/* =========================================================================
   SIRO PADEL — Booking Engine
   Built to the SIRO 2025 brand guideline (colour, type, UI system).
   Palette, type scale, buttons, forms and controls follow the brand's own
   digital UI spec (pp. 85–95).
   ========================================================================= */

:root{
  /* ---- Brand colour palette (guideline p.35 / UI p.87) ---- */
  --green:        #1C3532;  /* SIRO Green — Pantone 567C, primary          */
  --green-deep:   #142623;  /* darker green for depth                      */
  --green-tint:   #24423E;
  --black:        #0F1615;  /* near-black (UI tertiary)                    */
  --pure-black:   #000000;
  --white:        #FFFFFF;
  --blush:        #E9D4C3;  /* Pantone 482C                                */
  --blush-tint:   #F9E9E0;
  --tan:          #CCA58E;  /* Pantone 4735C                               */
  --yellow:       #EEF90C;  /* Luminary Yellow — Pantone 393C, accent      */
  --nutri:        #B7CFA6;  /* Pantone 559C                                */
  --pastel:       #D4EB8E;  /* Pantone 372C                                */
  --zen:          #E9E9E9;  /* Zen Grey — Pantone Cool Grey 1C             */
  --grey:         #606060;
  --grey-line:    #C9C6C0;
  --success:      #0E8C22;
  --error:        #D72C34;

  /* ---- Working tokens ---- */
  --bg:      #EAE7E1;               /* warm zen-grey canvas                */
  --surface: #FBFAF7;              /* warm off-white panel                */
  --ink:     #16211F;             /* body ink (green-black)               */
  --muted:   #6E7370;
  --hair:    rgba(20,38,35,.14);

  /* ---- Type ---- */
  --display: 'Barlow Semi Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --body:    'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow: 0 24px 60px -28px rgba(15,22,21,.45);
  --shadow-sm: 0 10px 30px -18px rgba(15,22,21,.4);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--green-deep);
  line-height:1.6;
  letter-spacing:.1px;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ---- Film grain / black-mist overlay (brand photography note) ---- */
.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================================
   TYPOGRAPHY PRIMITIVES
   ========================================================================= */
.wordmark{
  font-family:var(--display);
  font-weight:300;
  letter-spacing:.42em;
  text-indent:.42em;
  display:inline-block;
}
.wordmark--sm{ font-size:22px; }
.wordmark--card{ font-size:19px; letter-spacing:.4em; text-indent:.4em; }

.h1{ font-family:var(--display); font-weight:300; font-size:clamp(34px,5vw,52px); line-height:1.02; letter-spacing:-.01em; }
.h2{ font-family:var(--display); font-weight:300; font-size:clamp(28px,3.6vw,40px); line-height:1.05; letter-spacing:-.005em; }

.eyebrow{
  font-family:var(--body);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:11.5px;
  color:var(--muted);
}
.eyebrow--light{ color:rgba(255,255,255,.62); }

.lede{
  font-size:16.5px; line-height:1.62; color:var(--muted); max-width:52ch;
  font-weight:300;
}

/* =========================================================================
   BUTTONS  (brand UI spec p.89 — pill, uppercase, invert on hover)
   ========================================================================= */
.btn{
  font-family:var(--body);
  font-size:12.5px;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.2em;
  padding:15px 34px 14px;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  background:transparent;
  transition:background .4s var(--ease), color .4s var(--ease),
             border-color .4s var(--ease), opacity .3s, transform .3s var(--ease);
  white-space:nowrap;
  line-height:1;
}
.btn--lg{ padding:19px 46px 18px; font-size:13px; }

/* Dark (filled green) — primary, on light surfaces */
.btn--dark{ background:var(--green); color:var(--white); border-color:var(--green); }
.btn--dark:hover{ background:var(--green-deep); border-color:var(--green-deep); }

/* Light (on dark surfaces) — outline → fill white */
.btn--light{ color:var(--white); border-color:rgba(255,255,255,.55); }
.btn--light:hover{ background:var(--white); color:var(--green); border-color:var(--white); }

/* Ghost — quiet back button */
.btn--ghost{ color:var(--muted); border-color:transparent; padding-left:6px; padding-right:6px; letter-spacing:.16em; }
.btn--ghost:hover{ color:var(--ink); }
.btn--ghost::before{ content:"\2190"; margin-right:10px; display:inline-block; }

.btn:disabled{ opacity:.32; cursor:not-allowed; }
.btn:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }

/* =========================================================================
   INTRO / CINEMATIC HERO
   ========================================================================= */
.intro{
  position:fixed; inset:0; z-index:100;
  background:var(--green-deep);
  color:var(--white);
  overflow:hidden;
  transition:opacity .9s var(--ease), visibility .9s;
}
.intro.is-hidden{ opacity:0; visibility:hidden; }

.intro__mist{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 78% 15%, rgba(233,212,195,.28), transparent 55%),
    radial-gradient(90% 70% at 12% 92%, rgba(183,207,166,.16), transparent 60%),
    linear-gradient(160deg, #1F3B37 0%, #16292680 40%, #0E1B19 100%);
}
.intro__pattern{
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='150'%3E%3Ctext x='0' y='110' font-family='Arial' font-weight='300' font-size='120' letter-spacing='34' fill='%23ffffff' fill-opacity='0.03'%3ESIRO%3C/text%3E%3C/svg%3E");
  background-size:auto 150px;
  mask-image:linear-gradient(180deg, transparent, #000 60%);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 60%);
  opacity:.9;
}
.intro__inner{
  position:relative; z-index:2; height:100%;
  display:grid; grid-template-rows:auto 1fr auto;
  padding:clamp(24px,4vw,54px);
  max-width:1500px; margin:0 auto;
}
.intro__logo{ display:flex; align-items:baseline; gap:18px; }
.intro__logo .wordmark{ font-size:26px; }
.wordmark__sub, .brand__logo-sub{
  font-family:var(--body); font-weight:400; text-transform:uppercase;
  letter-spacing:.42em; font-size:11px; color:rgba(255,255,255,.5);
}
.intro__center{ align-self:center; max-width:760px; }
.intro__title{
  font-family:var(--display); font-weight:200;
  font-size:clamp(52px,10vw,132px); line-height:.92; letter-spacing:-.015em;
  margin:.28em 0 .34em;
}
.intro__lede{
  font-size:clamp(16px,2vw,20px); line-height:1.55; font-weight:300;
  color:rgba(255,255,255,.82); max-width:46ch; margin-bottom:2.4em;
}
.intro__foot{
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; text-transform:uppercase; letter-spacing:.2em;
  color:rgba(255,255,255,.45); border-top:1px solid rgba(255,255,255,.12);
  padding-top:22px;
}

/* fade/rise entrance */
.intro__center .eyebrow,
.intro__title,
.intro__lede,
.intro__center .btn{
  opacity:0; transform:translateY(18px);
  animation:rise .9s var(--ease) forwards;
}
.intro__title{ animation-delay:.12s; }
.intro__lede{ animation-delay:.24s; }
.intro__center .btn{ animation-delay:.36s; }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* =========================================================================
   APP SHELL
   ========================================================================= */
.app{
  display:grid;
  grid-template-columns:minmax(340px, 38%) 1fr;
  min-height:100vh;
  background:var(--bg);
}

/* ---- Brand / summary panel ---- */
.brand{
  position:sticky; top:0; align-self:start;
  height:100vh;
  background:var(--green);
  color:var(--white);
  padding:clamp(28px,3vw,46px);
  display:flex; flex-direction:column;
  overflow:hidden;
}
.brand__mist{
  position:absolute; inset:0;
  background:
    radial-gradient(90% 55% at 85% 8%, rgba(233,212,195,.22), transparent 55%),
    radial-gradient(80% 60% at 0% 100%, rgba(183,207,166,.12), transparent 60%);
  pointer-events:none;
}
.brand__pattern{
  position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='120'%3E%3Ctext x='0' y='90' font-family='Arial' font-weight='300' font-size='96' letter-spacing='26' fill='%23ffffff' fill-opacity='0.028'%3ESIRO%3C/text%3E%3C/svg%3E");
  background-size:auto 120px;
  opacity:.9;
}
.brand__head,.brand__body,.brand__foot{ position:relative; z-index:1; }
.brand__logo{ display:flex; align-items:baseline; gap:14px; }
.brand__body{ margin-top:auto; margin-bottom:auto; padding:32px 0; }
.brand__body .eyebrow{ margin-bottom:22px; }

.summary{ display:flex; flex-direction:column; }
.summary__row{
  display:flex; justify-content:space-between; align-items:baseline; gap:18px;
  padding:15px 0; border-bottom:1px solid rgba(255,255,255,.11);
}
.summary__k{
  font-size:11px; text-transform:uppercase; letter-spacing:.18em;
  color:rgba(255,255,255,.5); flex-shrink:0;
}
.summary__v{
  font-family:var(--display); font-weight:300; font-size:19px;
  text-align:right; color:#fff; letter-spacing:.01em;
  transition:color .3s;
}
.summary__v.is-empty{ color:rgba(255,255,255,.28); font-size:16px; }
.summary__v.just-set{ animation:flash .6s var(--ease); }
@keyframes flash{ 0%{ color:var(--pastel); } 100%{ color:#fff; } }

.summary__flags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.flag{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.16em;
  padding:7px 13px; border-radius:999px;
  border:1px solid rgba(255,255,255,.28); color:rgba(255,255,255,.85);
  display:inline-flex; align-items:center; gap:7px;
}
.flag--yellow{ border-color:var(--yellow); color:var(--yellow); }
.flag::before{ content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }

.summary__total{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:26px; padding-top:20px; border-top:1px solid rgba(255,255,255,.2);
}
.summary__price{ font-family:var(--display); font-weight:400; font-size:26px; }

.brand__foot{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.18em;
  color:rgba(255,255,255,.4); border-top:1px solid rgba(255,255,255,.12);
  padding-top:20px;
}

/* =========================================================================
   FLOW COLUMN
   ========================================================================= */
.flow{
  display:flex; flex-direction:column; min-height:100vh;
  background:var(--surface);
}
.flow__top{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair);
  padding:0 clamp(24px,4vw,64px);
}
.stepper{ display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; }
.stepper::-webkit-scrollbar{ display:none; }
.stepper__item{
  background:none; border:none; cursor:pointer;
  display:flex; flex-direction:column; gap:5px;
  padding:20px 10px 18px; position:relative;
  flex:1 1 auto; min-width:88px;
  transition:opacity .3s;
  opacity:.4;
}
.stepper__item::after{
  content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:2px;
  background:var(--green); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.stepper__item.is-active{ opacity:1; }
.stepper__item.is-active::after{ transform:scaleX(1); }
.stepper__item.is-done{ opacity:.75; }
.stepper__item:not(:disabled):hover{ opacity:.85; }
.stepper__item:disabled{ cursor:default; }
.stepper__n{ font-family:var(--display); font-size:13px; letter-spacing:.1em; color:var(--muted); }
.stepper__item.is-active .stepper__n{ color:var(--green); }
.stepper__l{ font-size:11px; text-transform:uppercase; letter-spacing:.14em; }

.flow__scroll{
  flex:1;
  padding:clamp(36px,5vw,76px) clamp(24px,4vw,64px);
  max-width:920px; width:100%;
}

/* ---- Steps ---- */
.step{ display:none; animation:stepIn .55s var(--ease); }
.step.is-active{ display:block; }
@keyframes stepIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }

.step__head{ margin-bottom:38px; }
.step__head .eyebrow{ margin-bottom:16px; }
.step__head .h2{ margin-bottom:16px; }

.field-label{
  font-size:11px; text-transform:uppercase; letter-spacing:.2em;
  color:var(--muted); margin:34px 0 15px;
  display:flex; align-items:center; gap:12px;
}
.step__head + .field-label{ margin-top:0; }
.field-label__opt{ text-transform:none; letter-spacing:.02em; font-size:12px; color:var(--grey-line); font-style:italic; }

/* =========================================================================
   CHOICE CARDS  (radio-style selection)
   ========================================================================= */
.choice-grid{ display:grid; gap:14px; }
.choice-grid--2{ grid-template-columns:repeat(2,1fr); }
.choice-grid--3{ grid-template-columns:repeat(3,1fr); }

.choice{
  text-align:left; cursor:pointer;
  background:var(--white);
  border:1px solid var(--grey-line);
  border-radius:14px;
  padding:22px 22px 20px;
  display:flex; flex-direction:column; gap:6px;
  position:relative;
  transition:border-color .35s var(--ease), background .35s var(--ease),
             box-shadow .35s var(--ease), transform .25s var(--ease);
  font-family:var(--body);
  min-height:100%;
}
.choice:hover{ border-color:var(--green); box-shadow:var(--shadow-sm); }
.choice:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }
.choice.is-selected{
  border-color:var(--green); background:var(--green); color:#fff;
  box-shadow:var(--shadow-sm);
}
.choice.is-selected .choice__meta,
.choice.is-selected .choice__note{ color:rgba(255,255,255,.72); }
.choice.is-selected .choice__tag{ color:var(--pastel); border-color:rgba(212,235,142,.5); }

.choice__title{ font-family:var(--display); font-weight:400; font-size:22px; line-height:1.1; letter-spacing:.005em; }
.choice__meta{ font-size:12.5px; color:var(--muted); letter-spacing:.02em; }
.choice__note{ font-size:13px; color:var(--muted); line-height:1.5; }
.choice__tag{
  margin-top:auto; align-self:flex-start;
  font-size:10.5px; text-transform:uppercase; letter-spacing:.15em;
  color:var(--green); border:1px solid var(--grey-line);
  padding:5px 11px; border-radius:999px;
}
.choice--court{ min-height:180px; }
.choice--court .choice__tag{ margin-top:14px; }
.choice--slim{ padding:16px 18px; }
.choice--slim .choice__title{ font-size:19px; }

/* selected check dot (UI control p.92) */
.choice::before{
  content:""; position:absolute; top:16px; right:16px;
  width:18px; height:18px; border-radius:50%;
  border:1.5px solid var(--grey-line); background:transparent;
  transition:all .3s var(--ease);
}
.choice.is-selected::before{
  border-color:#fff; background:#fff;
  box-shadow:inset 0 0 0 4px var(--green);
}
.choice--slim::before{ top:14px; right:14px; width:15px; height:15px; }

/* =========================================================================
   DATE + TIME
   ========================================================================= */
.date-row{ display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; scrollbar-width:none; }
.date-row::-webkit-scrollbar{ display:none; }
.date-pill{
  flex:0 0 auto; cursor:pointer;
  background:var(--white); border:1px solid var(--grey-line); border-radius:14px;
  padding:16px 14px 15px; width:96px; text-align:center;
  font-family:var(--body);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  transition:border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.date-pill:hover{ border-color:var(--green); }
.date-pill.is-selected{ background:var(--green); border-color:var(--green); color:#fff; }
.date-pill__dow{ font-size:11px; text-transform:uppercase; letter-spacing:.16em; color:var(--muted); line-height:1; }
.date-pill.is-selected .date-pill__dow{ color:rgba(255,255,255,.72); }
.date-pill__num{ font-family:var(--display); font-size:30px; font-weight:400; line-height:1; letter-spacing:.01em; }
.date-pill__mon{ font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); line-height:1; }
.date-pill.is-selected .date-pill__mon{ color:rgba(255,255,255,.72); }

.time-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(96px,1fr)); gap:10px; }
.time{
  cursor:pointer; text-align:center;
  background:var(--white); border:1px solid var(--grey-line); border-radius:10px;
  padding:13px 6px; font-family:var(--display); font-size:17px; font-weight:400;
  letter-spacing:.03em;
  transition:all .3s var(--ease);
}
.time:hover:not(.is-off){ border-color:var(--green); }
.time.is-selected{ background:var(--green); border-color:var(--green); color:#fff; }
.time.is-off{ opacity:.32; cursor:not-allowed; text-decoration:line-through; }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }

/* =========================================================================
   ADD-ONS
   ========================================================================= */
.addons{ display:flex; flex-direction:column; gap:12px; }
.addon{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  background:var(--white); border:1px solid var(--grey-line); border-radius:14px;
  padding:18px 20px; cursor:pointer;
  transition:border-color .3s var(--ease);
}
.addon:hover{ border-color:var(--green); }
.addon__title{ font-family:var(--display); font-size:18px; font-weight:400; display:block; }
.addon__note{ font-size:13px; color:var(--muted); }
.addon__right{ display:flex; align-items:center; gap:16px; flex-shrink:0; }
.addon__price{ font-family:var(--display); font-size:16px; color:var(--muted); }

/* =========================================================================
   FORM  (brand UI spec p.90 — underline fields, label above)
   ========================================================================= */
.siro-form{ display:flex; flex-direction:column; gap:8px; }
.field-pair{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.field{ position:relative; padding:14px 0 18px; }
.field label{
  display:block; font-size:11px; text-transform:uppercase; letter-spacing:.16em;
  color:var(--muted); margin-bottom:9px;
}
.req{ color:var(--green); margin-left:3px; }
.field input,
.field select{
  width:100%; border:none; background:transparent;
  border-bottom:1px solid var(--grey-line);
  padding:6px 0 10px;
  font-family:var(--display); font-weight:300; font-size:21px; color:var(--ink);
  letter-spacing:.01em;
  transition:border-color .3s var(--ease);
  border-radius:0;
}
.field input::placeholder{ color:#B7B3AC; }
.field input:focus,
.field select:focus{ outline:none; border-bottom-color:var(--green); border-bottom-width:1.5px; }
.field--select{ position:relative; }
.field select{ -webkit-appearance:none; appearance:none; cursor:pointer; padding-right:30px; }
.field select:invalid{ color:#B7B3AC; }
.field__chev{
  position:absolute; right:2px; bottom:20px; width:11px; height:11px;
  border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted);
  transform:rotate(45deg); pointer-events:none;
}
.field__err{
  position:absolute; bottom:0; left:0;
  font-size:11.5px; color:var(--error); letter-spacing:.02em;
  opacity:0; transform:translateY(-2px); transition:opacity .25s;
}
.field.is-invalid input,
.field.is-invalid select{ border-bottom-color:var(--error); }
.field.is-invalid .field__err{ opacity:1; }

/* =========================================================================
   CHECKBOX + TOGGLE  (brand UI controls p.92)
   ========================================================================= */
.checkbox{
  width:22px; height:22px; flex-shrink:0;
  border:1.5px solid var(--grey-line); border-radius:6px;
  background:var(--white); cursor:pointer; position:relative;
  transition:all .25s var(--ease);
}
.checkbox::after{
  content:""; position:absolute; left:7px; top:3px;
  width:6px; height:11px; border:solid var(--white); border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0); transform-origin:center;
  transition:transform .25s var(--ease);
}
.checkbox.is-checked{ background:var(--green); border-color:var(--green); }
.checkbox.is-checked::after{ transform:rotate(45deg) scale(1); }
.checkbox:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }

.toggle{
  width:52px; height:28px; flex-shrink:0; border-radius:999px;
  background:var(--white); border:1.5px solid var(--grey-line);
  position:relative; cursor:pointer; transition:all .3s var(--ease);
}
.toggle::after{
  content:""; position:absolute; top:2px; left:2px;
  width:20px; height:20px; border-radius:50%;
  background:var(--muted);
  transition:all .3s var(--ease);
}
.toggle.is-on{ background:var(--green); border-color:var(--green); }
.toggle.is-on::after{ left:26px; background:var(--white); }
.toggle:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }

.checkbox-row{
  display:flex; align-items:flex-start; gap:14px; cursor:pointer;
  font-size:14px; color:var(--ink); line-height:1.5; padding:14px 0;
}
.checkbox-row--terms{ margin-top:26px; padding-top:22px; border-top:1px solid var(--hair); }

.switch-row{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:22px 24px; margin-top:24px; cursor:pointer;
  background:var(--white); border:1px solid var(--grey-line); border-radius:14px;
  transition:border-color .3s;
}
.switch-row:hover{ border-color:var(--green); }
.switch-row--tight{ margin-top:20px; }
.switch-row__title{ font-family:var(--display); font-size:20px; font-weight:400; display:block; }
.switch-row__note{ font-size:13px; color:var(--muted); }

/* reveal block */
.reveal{ overflow:hidden; }
.reveal[hidden]{ display:none; }
.reveal.is-in{ animation:stepIn .5s var(--ease); }

/* =========================================================================
   FEATURE PANEL (Residences)
   ========================================================================= */
.feature{
  position:relative; border-radius:18px; overflow:hidden;
  padding:38px 40px; color:var(--green);
  box-shadow:var(--shadow-sm);
}
.feature--blush{ background:var(--blush); }
.feature__pattern{
  position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='120'%3E%3Ctext x='0' y='90' font-family='Arial' font-weight='300' font-size='96' letter-spacing='26' fill='%231C3532' fill-opacity='0.04'%3ESIRO%3C/text%3E%3C/svg%3E");
  background-size:auto 120px;
}
.feature__body{ position:relative; z-index:1; }
.feature__lede{ font-size:19px; line-height:1.5; font-weight:300; max-width:54ch; margin-bottom:24px; }
.feature__fine{ font-size:12.5px; color:rgba(28,53,50,.65); margin-top:22px; max-width:56ch; }

.ticks{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.ticks li{ position:relative; padding-left:30px; font-size:15px; line-height:1.45; }
.ticks li::before{
  content:""; position:absolute; left:0; top:2px;
  width:18px; height:18px; border-radius:50%;
  border:1.5px solid currentColor; opacity:.9;
}
.ticks li::after{
  content:""; position:absolute; left:6px; top:6px;
  width:5px; height:9px; border:solid currentColor; border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg);
}

/* =========================================================================
   PLAYER CARD
   ========================================================================= */
.card-layout{ display:grid; grid-template-columns:1.05fr 1fr; gap:44px; align-items:center; }
.card-layout__visual{ perspective:1400px; }

.playercard{
  position:relative; width:100%; aspect-ratio:1.586/1;
  background:linear-gradient(150deg, #17201E 0%, #0B100F 100%);
  border-radius:18px; overflow:hidden; color:#fff;
  padding:26px 28px; display:flex; flex-direction:column;
  box-shadow:var(--shadow);
  transform:rotateY(-14deg) rotateX(6deg);
  transition:transform .6s var(--ease);
  border:1px solid rgba(255,255,255,.06);
}
.card-layout:hover .playercard{ transform:rotateY(-6deg) rotateX(3deg); }
.playercard.is-active{
  transform:rotateY(0) rotateX(0);
  background:linear-gradient(150deg, #21403B 0%, #12211E 100%);
}
.playercard__pattern{
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='70'%3E%3Ctext x='0' y='54' font-family='Arial' font-weight='300' font-size='58' letter-spacing='15' fill='%23ffffff' fill-opacity='0.05'%3ESIRO%3C/text%3E%3C/svg%3E");
  background-size:auto 70px;
}
.playercard__sheen{
  position:absolute; top:0; left:-60%; width:50%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.14), transparent);
  transform:skewX(-18deg);
}
.playercard.is-active .playercard__sheen{ animation:sheen 1.1s var(--ease) .2s; }
@keyframes sheen{ from{ left:-60%; } to{ left:130%; } }

.playercard__top{ position:relative; z-index:1; display:flex; justify-content:space-between; align-items:flex-start; }
.playercard__type{ font-size:10px; text-transform:uppercase; letter-spacing:.26em; color:rgba(255,255,255,.6); }
.playercard__chip{
  position:relative; z-index:1; width:38px; height:28px; border-radius:6px; margin-top:18px;
  background:linear-gradient(135deg,#D9C9A8,#B49A6E);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
}
.playercard__chip::after{
  content:""; position:absolute; inset:6px 10px;
  border:1px solid rgba(0,0,0,.25); border-radius:2px;
}
.playercard__bottom{ position:relative; z-index:1; margin-top:auto; }
.playercard__name{
  font-family:var(--display); font-weight:400; font-size:clamp(18px,2.4vw,23px);
  text-transform:uppercase; letter-spacing:.14em; display:block;
  transition:color .3s;
}
.playercard__access{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--pastel); display:block; margin-top:5px; }
.playercard__no{ font-family:var(--display); font-size:13px; letter-spacing:.24em; color:rgba(255,255,255,.55); display:block; margin-top:12px; }

.card-layout__copy .ticks{ margin-top:20px; }
.card-layout__copy .ticks li{ color:var(--ink); }

/* =========================================================================
   REVIEW
   ========================================================================= */
.review{
  border:1px solid var(--grey-line); border-radius:16px; overflow:hidden;
  background:var(--white);
}
.review__group{ padding:22px 26px; border-bottom:1px solid var(--hair); }
.review__group:last-child{ border-bottom:none; }
.review__gk{ font-size:10.5px; text-transform:uppercase; letter-spacing:.2em; color:var(--muted); margin-bottom:14px; }
.review__line{ display:flex; justify-content:space-between; gap:20px; padding:7px 0; font-size:15px; }
.review__line .k{ color:var(--muted); }
.review__line .v{ font-family:var(--display); font-size:18px; font-weight:400; text-align:right; }
.review__line--total{ border-top:1px solid var(--hair); margin-top:10px; padding-top:16px; }
.review__line--total .v{ font-size:24px; }
.review__edit{
  background:none; border:none; cursor:pointer; color:var(--green);
  font-size:11px; text-transform:uppercase; letter-spacing:.14em;
  float:right; margin-top:-30px;
}
.review__edit:hover{ text-decoration:underline; }
.review__err{ color:var(--error); font-size:13px; margin-top:12px; }
.review--confirm{ margin:26px 0; text-align:left; }

/* =========================================================================
   CONFIRMATION
   ========================================================================= */
.step--confirm.is-active{ display:flex; }
.confirm{ max-width:620px; margin:0 auto; text-align:center; padding:20px 0; }
.confirm .eyebrow{ margin:26px 0 14px; }
.confirm .h1{ margin-bottom:18px; }
.confirm__lede{ font-size:16.5px; color:var(--muted); margin-bottom:34px; }
.rosette{ width:74px; height:74px; margin:0 auto; }
.rosette svg{ width:100%; height:100%; }
.rosette__badge{ fill:var(--green); }
.rosette__tick{ stroke:#fff; }
.rosette svg{ opacity:0; transform:scale(.6); transform-origin:center; animation:pop .6s var(--ease) .15s forwards; }
@keyframes pop{ to{ opacity:1; transform:scale(1); } }

.confirm__ref{
  display:inline-flex; flex-direction:column; gap:6px; align-items:center;
  padding:18px 34px; border:1px dashed var(--grey-line); border-radius:12px;
  margin-bottom:20px;
}
.confirm__ref span:last-child{ font-family:var(--display); font-size:24px; letter-spacing:.14em; }
.confirm__notes{ display:flex; flex-direction:column; gap:10px; margin:6px 0 34px; }
.confirm__note{
  font-size:14px; color:var(--ink); background:var(--blush-tint);
  padding:14px 18px; border-radius:10px; text-align:left;
  display:flex; gap:12px; align-items:flex-start;
}
.confirm__note::before{ content:""; flex-shrink:0; width:6px; height:6px; border-radius:50%; background:var(--green); margin-top:8px; }

/* =========================================================================
   FLOW NAV
   ========================================================================= */
.flow__nav{
  position:sticky; bottom:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:18px clamp(24px,4vw,64px);
  background:color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--hair);
}
.flow__nav-right{ display:flex; align-items:center; gap:26px; }
.flow__price{ text-align:right; }
.flow__price-k{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:.18em; color:var(--muted); }
.flow__price-v{ font-family:var(--display); font-size:22px; font-weight:400; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1080px){
  /* minmax(0,1fr) — plain 1fr resolves to minmax(auto,1fr), and the auto
     minimum refuses to shrink below the column content's min-content width,
     forcing the grid wider than the viewport on mobile. */
  .app{ grid-template-columns:minmax(0,1fr); }
  .brand,.flow{ min-width:0; }
  .brand{
    position:relative; height:auto; min-height:0;
    padding:22px clamp(20px,5vw,32px);
  }
  .brand__body{ padding:24px 0; margin:0; }
  /* On mobile the live summary collapses to keep the flow front-and-centre */
  .brand__body{ display:none; }
  .brand.is-open .brand__body{ display:block; }
  .brand__head{ display:flex; align-items:center; justify-content:space-between; }
  .brand__foot{ display:none; }
  .brand__summary-toggle{ display:inline-flex; }
}
@media (min-width:1081px){
  .brand__summary-toggle{ display:none; }
}

@media (max-width:640px){
  .choice-grid--2,.choice-grid--3{ grid-template-columns:1fr; }
  .choice--court{ min-height:0; }
  .split{ grid-template-columns:1fr; gap:0; }
  .field-pair{ grid-template-columns:1fr; gap:0; }
  .card-layout{ grid-template-columns:1fr; gap:32px; }
  .card-layout__visual{ max-width:360px; margin:0 auto; }
  .flow__price{ display:none; }
  .flow__nav{ padding:14px 20px; }
  .btn{ padding:14px 26px; }
  .feature{ padding:28px 24px; }
  .intro__title{ font-size:clamp(46px,15vw,80px); }
  .stepper__item{ min-width:76px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001s !important; transition-duration:.05s !important; }
}