/* ============================================================
   HardFore For Courses (/for-courses), the static page in
   public/for-courses.html. All of the page's CSS lives here.

   Tokens. Dark-first: bare :root is the DARK palette, and
   [data-theme="light"] on <html> is the light one. That attribute is
   the app's own contract: /theme-init.js (loaded in <head>, before
   first paint) sets it from the visitor's stored choice in the app,
   else from the phone's setting; marketing/for-courses.js keeps it in
   step when the phone flips. No colour-scheme media query here:
   a stored 'dark' has to beat a light phone, and only JS knows the
   store (the same reason index.css has no such branch).
   ============================================================ */
:root{
  color-scheme:dark;
  --bg-page:#07090E; --bg-card:#0F1318; --bg-sunken:#04060A; --bg-raised:#161A20;
  --line:#1B2027; --line-strong:#272D36;
  --ink:#FFFFFF; --ink-soft:#C4CBD3; --ink-muted:#9098A1; --ink-inverse:#04140A;
  --lime:#249A43; --lime-glow:#3BA257; --gold:#C79A4F; --red:#FF453A; --amber:#FBBF24; --blue:#0A84FF;
  /* Large brand surfaces keep the deeper green in both themes. */
  --brand-green:#0E5F2C; --on-brand-green:#F2FBF4;
  --amber-text:#FBBF24;
  --shadow-card:none;
  --shadow-float:0 24px 64px rgba(0,0,0,.55);
  --bar-bg:rgba(7,9,14,.80);
  --show-dark:block; --show-light:none;
  /* Same in both themes: hardware and marks drawn ON product screens. */
  --device:#0A0C10; --device-edge:#2B313A;
  --shot-ring:#3BA257;          /* on-art: hotspot ring over dark product screens */
  --shot-ring-dark:#0E5F2C;     /* on-art: hotspot ring over the cream TV board */
  --paper:#FFFFFF;              /* on-art: QR quiet zone */
  --badge-bg:#000000; --badge-ink:#FFFFFF;
  --tint:color-mix(in srgb,var(--lime) 9%,transparent);
  --tint-strong:color-mix(in srgb,var(--lime) 16%,transparent);
  --lime-line:color-mix(in srgb,var(--lime) 42%,var(--line));
  --font-sans:-apple-system,"SF Pro Text","SF Pro Display",Roboto,system-ui,sans-serif;
  --font-serif:Georgia,"Times New Roman",serif;
  --gutter:16px;
  --radius:16px;
  /* Cards (.card). In dark, the card ground (#0F1318) was 1.07:1 on the page
     (#07090E) and its --line hairline 1.22:1, so a visitor could not see
     where one card ends and the next begins (marketer review, 2026-09-29).
     Dark cards sit one step up the surface ladder, on --bg-raised, with the
     --line-strong edge. Light keeps its white card, hairline and shadow. */
  --card-ground:var(--bg-raised); --card-line:var(--line-strong);
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg-page:#F6F7F9; --bg-card:#FFFFFF; --bg-sunken:#F0F2F5; --bg-raised:#E9ECEF;
  --line:#DDE1E6; --line-strong:#C9CED6;
  --ink:#0A0D12; --ink-soft:#2D333B; --ink-muted:#5B626C; --ink-inverse:#F2FBF4;
  --lime:#0E5F2C; --lime-glow:#147A39; --gold:#8A6420; --red:#D70015; --amber:#CC8400; --blue:#0A66C2;
  --amber-text:#9C6A0B;
  --shadow-card:0 1px 2px rgba(10,13,18,.06);
  --shadow-float:0 12px 32px rgba(10,13,18,.12);
  --bar-bg:rgba(246,247,249,.84);
  --show-dark:none; --show-light:block;
  --card-ground:var(--bg-card); --card-line:var(--line);
}
@media (min-width:640px){ :root{ --gutter:24px; } }
@media (min-width:1024px){ :root{ --gutter:40px; } }

/* ============================================================ Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg-page);color:var(--ink);font:400 16px/1.55 var(--font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p,h1,h2,h3,h4,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--lime-glow);outline-offset:3px}
[hidden]{display:none!important}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--lime);color:var(--ink-inverse);padding:10px 14px;border-radius:10px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.i{width:1em;height:1em;flex:none;display:inline-block;vertical-align:middle}
.only-dark{display:var(--show-dark)!important}
.only-light{display:var(--show-light)!important}

.wrap{padding-inline:var(--gutter)}
.container{max-width:1180px;margin-inline:auto}
.section{padding-block:clamp(72px,9vw,120px)}
.section + .section{border-top:1px solid var(--line)}

/* ============================================================ Type */
.eyebrow{font:700 11px/1.2 var(--font-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--lime)}
.tag{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--lime);border-radius:4px;padding:6px 12px;font:700 10px/1 var(--font-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--lime)}
.h1{font-family:var(--font-serif);font-weight:700;font-size:clamp(34px,3.8vw,52px);line-height:1.04;letter-spacing:-.02em;text-wrap:balance}
.h1 em{font-style:italic;color:var(--lime)}
.h2{font-family:var(--font-serif);font-weight:700;font-size:clamp(30px,3.5vw,46px);line-height:1.06;letter-spacing:-.015em;text-wrap:balance}
.h2 em{font-style:italic;color:var(--lime)}
.h2-caps{font-family:var(--font-sans);font-weight:800;text-transform:uppercase;font-size:clamp(22px,2.5vw,32px);line-height:1.08;letter-spacing:-.01em;text-wrap:balance}
.h3{font:700 20px/1.25 var(--font-sans);letter-spacing:-.01em;text-wrap:balance}
.lead{font-size:clamp(17px,1.35vw,19px);line-height:1.55;color:var(--ink-soft);max-width:60ch;text-wrap:pretty}
.lead-sm{font-size:16px}
.cap{font-size:12px;line-height:1.45;color:var(--ink-muted)}
.sec-head{display:grid;gap:16px;justify-items:start;max-width:780px;margin-bottom:clamp(36px,4.5vw,56px)}

/* ============================================================ Controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:999px;border:1px solid transparent;font:700 15px/1 var(--font-sans);letter-spacing:-.005em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.btn .i{width:18px;height:18px;transition:transform .15s ease}
.btn:hover .i-arrow{transform:translateX(3px)}
.btn-primary{background:var(--lime);color:var(--ink-inverse)}
.btn-primary:hover{background:var(--lime-glow)}
.btn-secondary{background:var(--bg-card);color:var(--ink);border-color:var(--line-strong)}
.btn-secondary:hover{background:var(--bg-raised)}
.btn-sm{height:38px;padding:0 16px;font-size:14px}
.btn-lg{height:52px;padding:0 24px;font-size:16px}
.btn-xl{height:60px;padding:0 30px;font-size:17px}
.text-link{display:inline-flex;align-items:center;gap:6px;color:var(--lime);font-weight:700;font-size:15px;text-decoration:none}
.text-link:hover{text-decoration:underline;text-underline-offset:4px}
.text-link .i{width:16px;height:16px}
.chip{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:999px;background:var(--bg-sunken);border:1px solid var(--line);font:600 13px/1 var(--font-sans);color:var(--ink-soft);white-space:nowrap}
.card{background:var(--card-ground);border:1px solid var(--card-line);border-radius:var(--radius);box-shadow:var(--shadow-card)}
.icon-btn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:999px;border:1px solid var(--line-strong);background:var(--bg-card);color:var(--ink);cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.icon-btn:hover{background:var(--bg-raised)}
.icon-btn .i{width:18px;height:18px}
.icon-btn.solid{background:var(--lime);border-color:var(--lime);color:var(--ink-inverse)}
.icon-btn.solid:hover{background:var(--lime-glow)}
.ticks{display:grid;gap:12px}
.ticks li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;color:var(--ink-soft);line-height:1.5}
.tick{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--tint-strong);color:var(--lime);margin-top:1px}
.tick .i{width:14px;height:14px}
.pulse{position:relative;width:8px;height:8px;border-radius:50%;background:var(--lime);flex:none}
.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--lime);animation:ping 1.8s ease-out infinite}
@keyframes ping{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(2.8);opacity:0}}

/* ============================================================ Top bar */
/* One row from 1200px up: brand, Find a tournament, the menu links, the
   dark / light switch, the primary button. The search sits next to the brand,
   at the far end from the filled green button, so the two never sit side by
   side. Below 1200px the search and the links fold into a panel under the bar
   (the Menu button, driven by marketing/for-courses.js); the switch and, above
   720px, the primary button stay in the bar. Colours are the page's tokens. */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--bar-bg);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line)}
.topbar-in{display:flex;align-items:center;gap:8px;height:64px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none;margin-right:auto}
.brand img{height:26px;width:auto}
/* The app's own lockup (components/Brand.tsx + icons/DiceLogo.tsx), drawn
   here because this page is static: two dice on 2 beside the slanted
   wordmark. Colours mirror the app's tokens — dark: white "Hard", green
   "Fore", near-black pips; light: one Masters green, white pips on the
   green die. Keep in step with Brand.tsx if the mark changes. */
.lockup{display:inline-flex;align-items:center;gap:8px;--lk-word:#fff;--lk-ink:#050C16;--lk-edge:#04060A;--lk-pip2:#050C16}
:root[data-theme="light"] .lockup{--lk-word:var(--lime);--lk-ink:var(--lime);--lk-edge:var(--lime);--lk-pip2:#fff}
.lockup .dice{height:32px;width:36px;flex:none}
.lockup .d1{fill:#fff;stroke:var(--lk-ink);stroke-width:2}
.lockup .p1{fill:var(--lk-ink)}
.lockup .d2{fill:var(--lime);stroke:var(--lk-edge);stroke-width:2}
.lockup .p2{fill:var(--lk-pip2)}
.lockup .word{display:inline-block;font:900 24px/1 -apple-system,"SF Pro Display",Roboto,system-ui,sans-serif;text-transform:uppercase;letter-spacing:-.025em;transform:skewX(-12deg);white-space:nowrap}
.lockup .w-hard{color:var(--lk-word)}
.lockup .w-fore{color:var(--lime)}
.brand-sub{font:700 11px/1 var(--font-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted);padding-left:12px;border-left:1px solid var(--line-strong);white-space:nowrap}
.menu-btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 12px;border-radius:999px;border:1px solid var(--line-strong);background:var(--bg-card);color:var(--ink);font:600 14px/1 var(--font-sans);cursor:pointer;flex:none}
.menu-btn:hover{background:var(--bg-raised)}
.menu-btn .i{width:18px;height:18px}
.menu-btn[aria-expanded="true"]{border-color:var(--lime);background:var(--tint)}
.theme-btn{flex:none;width:38px;height:38px}
.bar-cta{flex:none}
/* Find a tournament: an always-visible green outline, the glass and a
   placeholder, so it reads as a working box. The glass is the field's label
   (a tap on it focuses the field); Enter sends the words. 16px type so a
   phone does not zoom on focus. */
.find{position:relative;display:flex;align-items:center;height:40px;border:1.5px solid var(--lime);border-radius:999px;background:var(--bg-sunken)}
.find:focus-within{border-color:var(--lime-glow);box-shadow:0 0 0 3px var(--tint-strong)}
.find-i{display:grid;place-items:center;flex:none;width:38px;height:100%;padding-left:4px;color:var(--lime);cursor:text}
.find-i .i{width:18px;height:18px}
.find-in{flex:1;min-width:0;height:100%;padding:0 12px 0 2px;border:0;background:none;color:var(--ink);font:500 16px/1 var(--font-sans);-webkit-appearance:none;appearance:none;border-radius:0 999px 999px 0}
.find-in::placeholder{color:var(--ink-muted);opacity:1}
.find-in:focus{outline:none}
.find-in::-webkit-search-decoration,.find-in::-webkit-search-cancel-button{-webkit-appearance:none}
.topnav{display:flex;align-items:center;gap:2px}
.nav-link{display:inline-flex;align-items:center;height:38px;padding:0 9px;border-radius:999px;font:600 14px/1 var(--font-sans);color:var(--ink-soft);text-decoration:none;white-space:nowrap}
.nav-link:hover{color:var(--ink);background:var(--bg-raised)}

/* Wide: the panel's contents join the row, and the Menu button goes. */
@media (min-width:1200px){
  .menu-btn{display:none}
  .menu-panel{display:contents}
  .find{flex:0 1 230px;min-width:180px;margin-right:auto}
  .brand{margin-right:6px}
}
/* The brand's "For courses" tag needs the room the search would lose. */
@media (max-width:1279px){
  .brand-sub{display:none}
}
/* The panel under the bar: the search first, then one link a row. */
@media (max-width:1199px){
  .menu-panel{position:absolute;left:0;right:0;top:100%;display:grid;gap:14px;padding:16px var(--gutter) 20px;background:var(--bg-page);border-bottom:1px solid var(--line-strong);box-shadow:var(--shadow-float);max-height:calc(100dvh - 64px - env(safe-area-inset-top,0px));overflow-y:auto;overscroll-behavior:contain}
  .topbar:not(.is-open) .menu-panel{display:none}
  .menu-panel > *{width:100%;max-width:1180px;margin-inline:auto}
  .find{height:48px}
  .find-i{width:46px}
  .topnav{flex-direction:column;align-items:stretch;gap:0}
  .nav-link{height:48px;padding:0 12px;font-size:16px;border-radius:0;color:var(--ink)}
  .nav-link + .nav-link{border-top:1px solid var(--line)}
}

/* The golfer door stays visible when the header menu folds on phones. */
.golfer-strip{background:var(--brand-green);color:var(--on-brand-green)}
.golfer-strip-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px;padding-block:12px}
.golfer-strip-copy{display:flex;align-items:baseline;gap:20px}
.golfer-strip-copy strong{font-size:16px;font-weight:700}
.golfer-strip-copy span{font-size:14px}
.golfer-strip-button{min-width:190px;flex:none;background:var(--on-brand-green);color:var(--brand-green);border-color:transparent;gap:12px;font-weight:750}
.golfer-strip-button:hover{background:var(--on-brand-green);color:var(--brand-green);border-color:currentColor}
@media(max-width:720px){
  .golfer-strip-inner{display:block;padding-block:14px}
  .golfer-strip-copy{display:grid;gap:4px;margin-bottom:10px}
  .golfer-strip-copy strong{font-size:14px}
  .golfer-strip-copy span{font-size:13px}
  .golfer-strip-button{width:100%}
}

/* ============================================================ Hero */
.hero{position:relative;overflow:hidden;padding-block:clamp(40px,6vw,84px) 0}
.hero::before{content:"";position:absolute;left:-10%;right:-10%;top:-240px;height:760px;background:radial-gradient(55% 55% at 28% 38%,var(--tint-strong),transparent 70%);pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(36px,4.5vw,56px);align-items:center}
.hero-copy{display:grid;gap:24px;justify-items:start}
.hero-copy > .tag{font-size:16px;font-weight:800;letter-spacing:.14em;padding:8px 14px}
@media(max-width:720px){.hero-copy > .tag{font-size:15px}}
.cta-row{display:flex;flex-wrap:wrap;gap:16px 14px;align-items:flex-start}
.cta-stack{display:grid;gap:9px;justify-items:start;max-width:250px}
.cta-cap{font-size:12px;line-height:1.45;color:var(--ink-muted);text-wrap:pretty}
.hero-visual{position:relative;padding:0 0 19% 11%}
.tv{position:relative}
.tv-screen{position:relative;background:var(--device);padding:clamp(6px,.75vw,10px);border-radius:14px;box-shadow:0 0 0 1px var(--device-edge),var(--shadow-float)}
.tv-screen img{width:100%;aspect-ratio:1600/994;object-fit:cover;border-radius:4px}
.tv-label{position:absolute;right:14px;top:-30px;display:inline-flex;align-items:center;gap:8px;font:700 11px/1 var(--font-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted)}
.phone{position:relative;background:var(--device);padding:5px;border-radius:30px;box-shadow:0 0 0 1px var(--device-edge),var(--shadow-float)}
.phone img{width:100%;aspect-ratio:780/1688;object-fit:cover;object-position:top;border-radius:25px}
.phone-hero{position:absolute;left:0;bottom:0;width:25%}
.proof{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(44px,6vw,76px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proof li{display:flex;align-items:center;gap:10px;padding:18px clamp(12px,1.6vw,22px);font:600 14px/1.35 var(--font-sans);color:var(--ink-soft)}
.proof li + li{border-left:1px solid var(--line)}
.proof .i{width:18px;height:18px;color:var(--lime)}
.proof .star{color:var(--gold)}

/* ============================================================ Setup video (#setup-video)
   A switch (the steps are in the comment above the section). OFF, the section
   is `hidden`, so [hidden] above keeps it undrawn whatever its classes say,
   and it is not a .section, so `.section + .section` never draws the features
   section a top border for it. ON, the facade: a 16:9 local poster with a play
   button over it, a plain link until marketing/for-courses.js swaps in the
   player on a tap. The play button and its label sit on the poster, so they
   keep their colours in both themes. */
.vid-sec{padding-block:clamp(56px,7vw,96px) 0}
.vid-head{justify-items:center;text-align:center;margin-inline:auto}
.vid{position:relative;display:block;max-width:960px;margin-inline:auto;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius);border:1px solid var(--card-line);background:var(--device);box-shadow:var(--shadow-float);color:var(--ink);text-decoration:none}
.vid-poster{width:100%;height:100%;object-fit:cover}
.vid-play{position:absolute;left:50%;top:50%;width:clamp(64px,9vw,88px);height:clamp(64px,9vw,88px);transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;background:#249A43 /* on-art */;color:#04140A /* on-art */;box-shadow:0 0 0 8px rgba(36,154,67,.22),0 14px 34px rgba(0,0,0,.45) /* on-art */;transition:transform .15s ease,background-color .15s ease}
.vid-play .i{width:42%;height:42%;margin-left:6%}
.vid:hover .vid-play{transform:translate(-50%,-50%) scale(1.06);background:#3BA257 /* on-art */}
.vid-label{position:absolute;left:50%;bottom:clamp(12px,3vw,26px);transform:translateX(-50%);padding:9px 16px;border-radius:999px;background:rgba(7,9,14,.78) /* on-art */;color:#FFFFFF /* on-art */;font:700 14px/1 var(--font-sans);white-space:nowrap}
.vid-frame{display:block;width:100%;height:100%;border:0}

/* ============================================================ Practice club door */
.door{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4.5vw,64px);align-items:center;padding:clamp(22px,4.5vw,60px);border-radius:24px;border:1px solid var(--lime-line);
  background:
    radial-gradient(90% 70% at 88% 8%,var(--tint-strong),transparent 62%),
    repeating-linear-gradient(118deg,var(--tint) 0 64px,transparent 64px 128px),
    var(--bg-card);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--lime) 6%,transparent),var(--shadow-float)}
.door-copy{display:grid;gap:22px;justify-items:start}
.door .lead{font-size:17px}
.door-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.open-now{display:inline-flex;align-items:center;gap:8px;font:700 11px/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.door .ticks li{font-size:16px}
.door-cta{display:grid;gap:10px;justify-items:start}
.door-micro{font-size:14px;line-height:1.5;color:var(--ink-soft);max-width:44ch}
.door-terms{font-size:12px;line-height:1.7;color:var(--ink-muted)}
.door-terms a{color:var(--ink-soft)}
.browser{background:var(--bg-card);border:1px solid var(--line-strong);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-float)}
.browser-bar{display:flex;align-items:center;gap:12px;height:38px;padding:0 14px;background:var(--bg-raised);border-bottom:1px solid var(--line)}
.dots{display:flex;gap:6px;width:46px;flex:none}
.dots i{display:block;width:10px;height:10px;border-radius:50%;background:var(--line-strong)}
.url{flex:1;min-width:0;max-width:380px;margin-inline:auto;height:24px;padding:0 12px;border-radius:999px;background:var(--bg-sunken);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:6px;font:500 12px/1 var(--font-sans);color:var(--ink-muted);white-space:nowrap;overflow:hidden}
.url .i{width:12px;height:12px;flex:none}
.url span{overflow:hidden;text-overflow:ellipsis}
.bar-end{width:46px;flex:none}
.pc-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding:8px 12px;background:var(--lime);color:var(--ink-inverse);font:600 12px/1.2 var(--font-sans)}
.pc-left{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.pc-left b{font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:11px}
.pc-left span::before{content:"·";margin-right:10px;opacity:.6}
.pc-right{display:flex;gap:6px}
.pc-chip{display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--ink-inverse) 45%,transparent);font-size:11px;font-weight:700}
.door-shot img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left}
.next-steps{margin-top:22px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 36px;align-items:start;padding:22px 26px;border-radius:var(--radius);border:1px dashed var(--line-strong)}
.next-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 28px}
.next-label{padding-top:5px}
.next-list li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;font-size:15px;line-height:1.5;color:var(--ink-soft)}
.next-list li b{color:var(--ink)}
.n-dot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--lime);color:var(--lime);font:700 13px/1 var(--font-sans);font-variant-numeric:tabular-nums}

/* ============================================================ Guided tour */
.tour{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,3vw,40px);align-items:start}
.chapters{display:grid;grid-template-columns:1.3fr 1.1fr 1fr;gap:6px;margin-bottom:14px}
.chap{display:grid;gap:8px;padding:10px 12px 12px;border-radius:12px;border:1px solid var(--line);background:none;text-align:left;cursor:pointer;color:var(--ink-muted);transition:border-color .2s ease,background-color .2s ease}
.chap:hover{border-color:var(--line-strong)}
.chap b{font:800 11px/1 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.chap small{font-size:12px;line-height:1}
.chap .seg{height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.chap .seg i{display:block;height:100%;width:0;background:var(--lime);transition:width .3s ease}
.chap.is-on{border-color:var(--lime-line);background:var(--tint);color:var(--ink)}
.chap.is-on b{color:var(--lime)}
.tour-list{display:grid;gap:2px}
.tour-list li.ch-break{height:1px;background:var(--line);margin:8px 12px}
.tstep{width:100%;display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;padding:9px 12px;border-radius:12px;border:1px solid transparent;background:none;text-align:left;cursor:pointer;color:var(--ink-soft);font:600 15px/1.35 var(--font-sans);transition:background-color .2s ease,border-color .2s ease}
.tstep:hover{background:var(--bg-card)}
.tnum{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-strong);font:700 12px/1 var(--font-sans);color:var(--ink-muted);font-variant-numeric:tabular-nums;transition:all .2s ease}
.tstep .tt{padding-top:4px}
.tstep .tc{display:none;margin-top:6px;font-weight:400;font-size:14px;line-height:1.5;color:var(--ink-soft)}
.tstep[aria-current="step"]{background:var(--bg-card);border-color:var(--line-strong);color:var(--ink)}
.tstep[aria-current="step"] .tnum{background:var(--lime);border-color:var(--lime);color:var(--ink-inverse)}
.tstep[aria-current="step"] .tc{display:block}
.tstep.done .tnum{border-color:var(--lime-line);color:var(--lime)}
.tour-browser{box-shadow:var(--shadow-float)}
.tour-stage{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-sunken)}
.tour-stage:focus-visible{outline-offset:-3px}
.stage-inner{position:absolute;inset:0;--z:1;transform:scale(var(--z));transform-origin:var(--ox,50%) var(--oy,50%);transition:transform .6s cubic-bezier(.65,.05,.36,1),transform-origin .6s cubic-bezier(.65,.05,.36,1)}
.shot{position:absolute;inset:0;opacity:0;transition:opacity .35s ease;pointer-events:none}
.shot.is-on{opacity:1;pointer-events:auto}
.shot > img{width:100%;height:100%;object-fit:cover;object-position:top left}
.ring{-webkit-appearance:none;appearance:none;position:absolute;display:block;padding:0;margin:0;border:calc(2px / var(--z,1)) solid var(--shot-ring);border-radius:10px;background:color-mix(in srgb,var(--shot-ring) 8%,transparent);box-shadow:0 0 0 calc(4px / var(--z,1)) color-mix(in srgb,var(--shot-ring) 24%,transparent);cursor:pointer;transition:opacity .25s ease;z-index:2}
.ring::after{content:"";position:absolute;inset:-2px;border-radius:inherit;border:2px solid var(--shot-ring);animation:ringpulse 1.8s ease-out infinite;pointer-events:none}
.ring.dark-ring{--shot-ring:var(--shot-ring-dark)}
.ring.fade{opacity:0}
@keyframes ringpulse{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(1.14)}}
.cursor{position:absolute;z-index:3;width:0;height:0;pointer-events:none;transition:left .7s cubic-bezier(.65,.05,.36,1),top .7s cubic-bezier(.65,.05,.36,1)}
.cursor.no-anim{transition:none}
#tour.is-overview .ring,#tour.is-overview .cursor{opacity:0;pointer-events:none}
.cursor-body{position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(calc(1 / var(--z,1)))}
.cursor-halo{position:absolute;left:-20px;top:-20px;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle,rgba(77,190,106,.55),rgba(77,190,106,0) 68%) /* on-art */}
.cursor-ripple{position:absolute;left:-16px;top:-16px;width:32px;height:32px;border-radius:50%;border:2px solid #3BA257 /* on-art */;opacity:0}
.cursor.click .cursor-ripple{animation:ripple .55s ease-out}
.cursor-arrow{position:absolute;left:-3px;top:-2px;width:26px;height:26px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45)) /* on-art */;transition:transform .12s ease}
.cursor-arrow path{fill:#FFFFFF /* on-art */;stroke:#0A0C10 /* on-art */;stroke-width:1.6;stroke-linejoin:round}
.cursor.click .cursor-arrow{animation:press .3s ease}
@keyframes ripple{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.6)}}
@keyframes press{0%,100%{transform:scale(1)}40%{transform:scale(.82)}}
.tip{position:absolute;z-index:4;left:20%;top:30%;width:min(300px,46%);padding:14px 16px 14px;background:var(--bg-card);color:var(--ink);border:1px solid var(--line-strong);border-radius:14px;box-shadow:var(--shadow-float);transition:opacity .2s ease,transform .2s ease}
.tip.hide{opacity:0;transform:translateY(6px);pointer-events:none}
.tip-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.tip-ch{font:800 10px/1 var(--font-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--lime)}
.tip-n{font:600 12px/1 var(--font-sans);color:var(--ink-muted);font-variant-numeric:tabular-nums}
.tip-t{font:700 16px/1.3 var(--font-sans);margin-bottom:4px}
.tip-c{font-size:14px;line-height:1.5;color:var(--ink-soft)}
.tip-nav{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.tip-nav .icon-btn{width:32px;height:32px}
.tip-nav .icon-btn .i{width:16px;height:16px}
.tip::before{content:"";position:absolute;width:12px;height:12px;background:var(--bg-card);border:1px solid var(--line-strong);transform:rotate(45deg);display:none}
.tip[data-side="right"]::before{display:block;left:-7px;top:var(--ay,50%);margin-top:-6px;border-right:0;border-top:0}
.tip[data-side="left"]::before{display:block;right:-7px;top:var(--ay,50%);margin-top:-6px;border-left:0;border-bottom:0}
.tip[data-side="bottom"]::before{display:block;top:-7px;left:var(--ax,24px);margin-left:-6px;border-right:0;border-bottom:0}
.tip[data-side="top"]::before{display:block;bottom:-7px;left:var(--ax,24px);margin-left:-6px;border-left:0;border-top:0}
.tour-progress{height:3px;background:var(--line);opacity:0;transition:opacity .2s ease}
.tour.is-playing .tour-progress{opacity:1}
.tour-progress i{display:block;height:100%;width:100%;background:var(--lime);transform-origin:0 50%;transform:scaleX(0)}
.tour.is-held .tour-progress i{background:var(--ink-muted)}
.tour-foot{display:flex;align-items:center;gap:12px;margin-top:14px}
.dotbar{flex:1;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.dotgroup{display:grid;gap:6px;justify-items:center}
.dotgroup small{font:800 9px/1 var(--font-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted)}
.dotgroup.is-on small{color:var(--lime)}
.dotrow{display:flex;gap:2px}
.dot{width:22px;height:22px;border:0;padding:0;background:none;cursor:pointer;display:grid;place-items:center;border-radius:50%}
.dot i{display:block;width:8px;height:8px;border-radius:50%;background:var(--line-strong);transition:all .2s ease}
.dot.done i{background:var(--lime-line)}
.dot[aria-current="step"] i{width:20px;border-radius:4px;background:var(--lime)}
.play-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line-strong);background:var(--bg-card);color:var(--ink);font:700 13px/1 var(--font-sans);cursor:pointer}
.play-btn:hover{background:var(--bg-raised)}
.play-btn .i{width:14px;height:14px}
.play-btn .i-pause{display:none}
.tour.is-playing .play-btn .i-play{display:none}
.tour.is-playing .play-btn .i-pause{display:inline-block}
.tour-now{display:none}
.tour-chips{display:none}
.tour-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.tour-main{position:relative;min-width:0}
.tour-chips{position:relative}
.tour-count{display:none;flex:1;justify-content:center;font:600 13px/1 var(--font-sans);color:var(--ink-muted);font-variant-numeric:tabular-nums}
.chapters.mobile-only{display:none}


/* ============================================================ Two things */
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.two-card{display:flex;flex-direction:column;overflow:hidden}
.two-media{position:relative;height:clamp(250px,27vw,330px);overflow:hidden;background:radial-gradient(70% 90% at 50% 0%,var(--tint-strong),transparent 70%),var(--bg-sunken);border-bottom:1px solid var(--line)}
.two-media .browser{position:absolute;left:28px;top:28px;right:-60px;box-shadow:var(--shadow-float)}
.two-media .browser img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left}
.two-media .phone{position:absolute;left:50%;top:28px;width:min(46%,210px);transform:translateX(-50%)}
.two-body{display:grid;gap:14px;align-content:start;padding:clamp(22px,2.4vw,30px)}
.two-body .eyebrow{display:flex;align-items:center;gap:8px}
.two-body .eyebrow .i{width:16px;height:16px}
.two-card .ticks li{font-size:15.5px}

/* ============================================================ Features */
.feat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.feat{display:flex;flex-direction:column;overflow:hidden}
.feat-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg-sunken);border-bottom:1px solid var(--line)}
.feat-media img{width:100%;height:100%;object-fit:cover}
.feat-body{flex:1;display:flex;flex-direction:column;gap:10px;padding:20px 22px 22px}
.feat-body .h3{font-size:17px;line-height:1.3;display:flex;align-items:flex-start;gap:10px}
.feat-body .h3 .i{width:18px;height:18px;color:var(--lime);margin-top:2px}
.feat-body > p{font-size:14.5px;line-height:1.55;color:var(--ink-soft)}
.chipcloud{position:absolute;inset:0;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:8px;padding:18px 20px;background:radial-gradient(80% 90% at 50% 100%,var(--tint-strong),transparent 70%)}
.chipcloud .chip{background:var(--bg-card)}
.chipcloud .chip.hot{border-color:var(--lime-line);color:var(--ink)}

/* ============================================================ Pricing */
.price-hero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center;padding:clamp(24px,4vw,52px);border-color:var(--lime-line);background:radial-gradient(70% 120% at 0% 0%,var(--tint-strong),transparent 60%),var(--card-ground)}
.big-price{display:grid;gap:16px}
.big-price .num{font:700 clamp(80px,10vw,132px)/1 var(--font-serif);letter-spacing:-.04em;color:var(--lime)}
.big-price .per{font:700 13px/1.2 var(--font-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.big-price .thru{font-size:13px;color:var(--ink-muted)}
.price-copy{display:grid;gap:18px;justify-items:start}
.price-copy .lead{color:var(--ink)}
.price-note{font-size:14px;color:var(--ink-soft)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.tiers-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin:clamp(40px,5vw,56px) 0 18px}
.tiers-head p{font-size:15px;color:var(--ink-soft)}
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tier{display:flex;flex-direction:column;gap:14px;padding:24px 24px 20px}
.tier-name{font:800 12px/1 var(--font-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--lime)}
.tier-price{font:700 34px/1 var(--font-sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tier-price small{font-size:15px;font-weight:600;color:var(--ink-muted);letter-spacing:0}
.tier-mo{font-size:13px;color:var(--ink-muted);margin-top:-6px}
.tier-who{font-size:14.5px;line-height:1.5;color:var(--ink-soft);min-height:3em}
.tier-lead{font:700 13px/1.4 var(--font-sans);color:var(--ink)}
.tier .ticks{gap:10px}
.tier .ticks li{font-size:14.5px;grid-template-columns:18px 1fr;gap:10px}
.tier .tick{width:18px;height:18px}
.tier .tick .i{width:12px;height:12px}
.tier-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-muted)}
.tier-foot b{color:var(--ink);font-weight:700}

/* ============================================================ FAQ */
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,72px);align-items:start}
.faq-side{display:grid;gap:16px;justify-items:start;position:sticky;top:96px}
.faq-list{border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 2px;cursor:pointer;font:600 17px/1.4 var(--font-sans);color:var(--ink)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover{color:var(--lime)}
.pm{position:relative;width:28px;height:28px;flex:none;border-radius:50%;border:1px solid var(--line-strong);transition:transform .2s ease,background-color .2s ease}
.pm::before,.pm::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2px;margin:-1px 0 0 -5.5px;background:var(--ink);border-radius:2px}
.pm::after{transform:rotate(90deg)}
.faq-list details[open] .pm{transform:rotate(45deg);background:var(--bg-raised)}
.faq-a{padding:0 2px 22px;max-width:64ch;color:var(--ink-soft);line-height:1.6}

/* ============================================================ Final CTA */
.final{position:relative;overflow:hidden;background:radial-gradient(60% 120% at 100% 0%,var(--tint-strong),transparent 60%),repeating-linear-gradient(118deg,color-mix(in srgb,var(--lime) 4%,transparent) 0 64px,transparent 64px 128px),var(--bg-card);border-top:1px solid var(--lime-line);border-bottom:1px solid var(--lime-line)}
.final-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,64px);align-items:center}
.final-copy{display:grid;gap:18px;justify-items:start}
.final-ctas{display:grid;gap:18px;justify-items:start}
.founder{display:flex;align-items:center;gap:12px;font-size:14px;line-height:1.5;color:var(--ink-soft);max-width:52ch}
.founder img{width:40px;height:40px;border-radius:10px;flex:none;box-shadow:0 0 0 1px var(--line-strong)}

/* ============================================================ Hero offer line */
.offer{max-width:62ch;padding:11px 16px;border-radius:12px;border:1px solid var(--lime-line);background:var(--tint);font-size:15px;line-height:1.5;color:var(--ink-soft);text-wrap:pretty}
.offer b{color:var(--ink);font-weight:700}

/* ============================================================ Feature cards: first sentence + bullets */
.feat .ticks{gap:8px}
.feat .ticks li{font-size:14px;line-height:1.45;grid-template-columns:18px 1fr;gap:10px}
.feat .tick{width:18px;height:18px}
.feat .tick .i{width:12px;height:12px}
.feat-link{margin-top:auto;padding-top:4px;font-size:14px}

/* Print Center: the last feature card leads to the paper gallery after Studio. */
.feat-print{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
.print-card-media{aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;border-bottom:0;border-right:1px solid var(--line)}
.print-card-media img{width:100%;height:auto;object-fit:contain;max-height:125px}
.print-card-media img:last-child{width:55%;max-height:130px}
.print-benefits{display:flex;flex-wrap:wrap;gap:14px 28px;margin:-12px 0 30px;color:var(--ink-soft);font-size:15px}
.print-benefits li{display:flex;align-items:center;gap:10px}
.print-gallery{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px}
.print-gallery figure{min-width:0}
.print-paper{display:flex;align-items:center;justify-content:center;height:300px;padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-sunken)}
.print-paper img{width:100%;height:100%;object-fit:contain}
.print-gallery figcaption{display:grid;gap:8px;padding-top:18px}
.print-gallery figcaption p{font-size:15px;color:var(--ink-soft)}
.print-gallery .text-link{justify-self:start;font-size:14px}
.print-extras{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px 24px;padding-top:30px;font-size:14px}
.print-extras ul{display:flex;flex-wrap:wrap;gap:10px 20px;color:var(--ink-soft)}
.print-example-caption{margin-top:16px}
@media(max-width:720px){
  .feat-print{grid-template-columns:minmax(0,1fr)}
  .print-card-media{border-right:0;border-bottom:1px solid var(--line)}
  .print-gallery{grid-template-columns:minmax(0,1fr);gap:30px}
  .print-paper{height:auto;min-height:180px;padding:16px}
  .print-paper img{height:auto}
  .print-benefits{margin-top:0;flex-direction:column}
}

/* ============================================================ Assistant walkthrough
   The chat is drawn in HTML over the real Club Studio screenshot. Its colours are the
   app's own dark assistant sheet, the same in both page themes, like the screenshot. */
.walk-wrap{container:walk / inline-size}
.walk{
  --as-bg:#0F1318; --as-raised:#161A20; --as-line:#1B2027; --as-line-strong:#272D36;  /* on-art */
  --as-ink:#FFFFFF; --as-soft:#C4CBD3; --as-muted:#9098A1; --as-inv:#04140A;           /* on-art */
  --as-lime:#249A43; --as-lime-glow:#3BA257; --as-red:#FF453A;                         /* on-art */
  display:grid;grid-template-columns:minmax(0,8.7fr) minmax(0,3.3fr);gap:clamp(24px,3vw,40px);align-items:start}
.walk-main{position:relative;min-width:0;display:flex;flex-direction:column}
.walk-frame{position:relative}
.walk-browser{box-shadow:var(--shadow-float)}
.walk-stage{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-sunken)}
.walk-stage:focus-visible{outline-offset:-3px}
.walk-inner{position:absolute;inset:0;--z:1;transform:scale(var(--z));transform-origin:100% 100%;transition:transform .6s cubic-bezier(.65,.05,.36,1);container-type:inline-size}
.wshot{position:absolute;inset:0;opacity:0;transition:opacity .35s ease;pointer-events:none}
.wshot.is-on{opacity:1}
.wshot > img{width:100%;height:100%;object-fit:cover;object-position:top left}
/* Step 1: the screenshot's composer held another request; this puts it back to empty. */
.w-patch{position:absolute;left:81.6%;top:84.2%;width:14.86%;height:15.12%;background:var(--as-bg)}
.w-patch span{position:absolute;left:1.9%;right:2.3%;top:66.2%;height:30.2%;display:flex;align-items:center;padding:0 .97cqw;border:1px solid var(--as-line-strong);border-radius:1.39cqw;background:var(--as-raised);color:var(--as-muted);font:400 .9cqw/1 var(--font-sans);white-space:nowrap;overflow:hidden}
.walk .ring{z-index:3}
.walk-foot{display:flex;align-items:center;gap:12px;margin-top:14px}
.walk-dots{flex:1;display:flex;justify-content:center;gap:2px}
.walk-now{display:none}
.walk-cap{margin-top:12px;font-size:12px;line-height:1.5;color:var(--ink-muted);text-align:center;text-wrap:balance}
.walk-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

.asheet{position:absolute;top:39px;right:1px;bottom:1px;width:52%;z-index:6;display:none;flex-direction:column;overflow:hidden;background:var(--as-bg);color:var(--as-ink);border-left:1px solid var(--as-line-strong);border-radius:0 0 13px 0;box-shadow:-24px 0 48px rgba(0,0,0,.45) /* on-art */;font-size:12px;line-height:1.42}
.walk.has-sheet .asheet{display:flex}
.walk.mini-sheet .asheet{top:auto;right:16px;bottom:16px;width:44%;max-height:calc(100% - 72px);border:1px solid var(--as-line-strong);border-radius:14px}
.walk.mini-sheet .as-comp{display:none}
.as-head{flex:none;display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--as-line)}
.as-icon{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--as-lime);color:var(--as-inv)}
.as-icon .i{width:15px;height:15px}
.as-title{flex:1;min-width:0}
.as-title b{display:block;font:600 13.5px/1.2 var(--font-sans)}
.as-title small{display:block;font-size:10.5px;line-height:1.3;color:var(--as-muted)}
.as-tools{display:flex;gap:12px;color:var(--as-muted)}
.as-tools .i{width:14px;height:14px}
.as-body{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:9px;padding:10px 14px 12px;scrollbar-width:none;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 16px);mask-image:linear-gradient(to bottom,transparent,#000 16px) /* on-art: a mask, not a colour */}
.as-body::-webkit-scrollbar{display:none}
.as-spacer{flex:1 0 0}
.as-empty{display:grid;justify-items:center;gap:6px;padding:6px 8px 2px;text-align:center}
.as-spark{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:rgba(36,154,67,.15) /* on-art */;color:var(--as-lime)}
.as-spark .i{width:20px;height:20px}
.as-empty b{margin-top:4px;font:600 13.5px/1.3 var(--font-sans)}
.as-empty p{max-width:34ch;font-size:11.5px;line-height:1.45;color:var(--as-muted)}
.as-u{align-self:flex-end;max-width:86%;padding:8px 12px;border-radius:16px 16px 6px 16px;background:var(--as-lime);color:var(--as-inv)}
.as-receipt{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;max-width:92%;padding:5px 10px;border:1px solid var(--as-line);border-radius:10px;background:rgba(22,26,32,.6) /* on-art */;font-size:10.5px;line-height:1.3;color:var(--as-muted)}
.as-receipt .i{width:11px;height:11px;flex:none}
.as-receipt .x{color:var(--as-red)}
.as-a{align-self:flex-start;max-width:94%;display:grid;gap:6px;padding:9px 12px;border-radius:16px 16px 16px 6px;background:var(--as-raised);border:1px solid var(--as-line)}
.as-lines{display:grid;gap:2px}
.as-li{display:block;padding-left:.72em;text-indent:-.72em}
.as-cut{color:var(--as-muted);letter-spacing:.1em;line-height:1}
.as-q{margin:0 -5px;padding:1px 5px;border-radius:5px;transition:background-color .3s ease}
.as-link{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:10px;border:1px solid rgba(36,154,67,.4) /* on-art */;background:rgba(36,154,67,.1) /* on-art */;color:var(--as-lime-glow);font:600 11.5px/1 var(--font-sans);white-space:nowrap}
.as-link .i{width:13px;height:13px}
.as-work{align-self:flex-start;display:flex;align-items:center;gap:10px;max-width:94%;padding:10px 12px;border-radius:16px 16px 16px 6px;background:var(--as-raised);border:1px solid var(--as-line);font-size:12px;line-height:1.35}
.as-work small{display:block;margin-top:2px;font-size:10.5px;color:var(--as-muted)}
.as-spin{flex:none;width:16px;height:16px;border-radius:50%;border:2px solid var(--as-line-strong);border-top-color:var(--as-lime);animation:asspin 1s linear infinite}
@keyframes asspin{to{transform:rotate(360deg)}}
.as-comp{flex:none;display:flex;align-items:flex-end;gap:6px;padding:10px 12px 12px;border-top:1px solid var(--as-line)}
.as-cbtn{flex:none;width:28px;height:32px;display:grid;place-items:center;color:var(--as-muted)}
.as-cbtn .i{width:17px;height:17px}
.as-box{flex:1;min-width:0;padding:8px 12px;border-radius:16px;border:1px solid var(--as-line-strong);background:var(--as-raised)}
.as-box .ph{color:var(--as-muted)}
.as-box.typed{border-color:rgba(36,154,67,.6) /* on-art */}
.as-send{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--as-lime);color:var(--as-inv)}
.as-send .i{width:15px;height:15px}
.asheet .is-hot{position:relative;box-shadow:0 0 0 2px var(--as-lime-glow),0 0 0 6px rgba(77,190,106,.22) /* on-art */}
.asheet .is-hot::after{content:"";position:absolute;inset:-2px;border-radius:inherit;border:2px solid var(--as-lime-glow);animation:ringpulse 1.8s ease-out infinite;pointer-events:none}
.asheet .as-q.is-hot{box-shadow:none;background:rgba(77,190,106,.2) /* on-art */}
.asheet .as-q.is-hot::after{display:none}

/* Step 2: the flyer, drawn as the other way in. */
.w-flyer{position:absolute;z-index:7;right:calc(52% + 22px);bottom:22px;width:236px;display:grid;justify-items:center;gap:12px;pointer-events:none}
.flyer{width:60%;aspect-ratio:17/22;display:flex;flex-direction:column;overflow:hidden;border-radius:5px;background:#FAF7F0 /* on-art: the flyer's paper */;box-shadow:0 0 0 1px rgba(0,0,0,.25),0 22px 44px rgba(0,0,0,.55) /* on-art */;transform:rotate(-5deg)}
.fl-top{display:grid;gap:3px;padding:10% 7% 8%;background:#0B4A24 /* on-art */;color:#FFFFFF /* on-art */;text-align:center}
.fl-top i{font:700 5px/1 var(--font-sans);font-style:normal;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.fl-top b{font:700 9.5px/1.12 var(--font-serif)}
.fl-rule{height:3px;flex:none;background:#C79A4F /* on-art */}
.fl-date{padding:9% 6% 7%;font:700 7px/1.2 var(--font-serif);color:#1A1A1A /* on-art */;text-align:center}
.fl-lines{display:grid;gap:5px;padding:0 10%}
.fl-lines i{display:block;height:3px;border-radius:2px;background:#D9D3C6 /* on-art */;width:86%}
.fl-lines i:nth-child(even){width:62%}
.fl-foot{margin-top:auto;height:8%;flex:none;background:#0B4A24 /* on-art */}
.fl-cap{max-width:100%;padding:7px 11px;border-radius:10px;background:rgba(15,19,24,.94) /* on-art */;border:1px solid rgba(77,190,106,.55) /* on-art */;color:#FFFFFF /* on-art */;font-size:12px;line-height:1.35;text-align:center;box-shadow:0 10px 24px rgba(0,0,0,.4) /* on-art */}
.fl-cap b{color:#3BA257 /* on-art */}

@container walk (max-width:1099px){
  .walk{grid-template-columns:minmax(0,1fr)}
  .walk-side{display:none}
  .walk-frame{display:contents}
  .walk-browser{order:1}
  .walk-foot{order:2}
  .walk-now{order:3;display:grid;gap:6px;margin-top:14px;padding:16px 18px;border-radius:14px;border:1px solid var(--line-strong);background:var(--bg-card)}
  .walk-now .tip-t{font-size:17px}
  .w-flyer{order:4;position:static;width:auto;display:flex;align-items:center;gap:14px;margin-top:12px;padding:12px 14px;border:1px dashed var(--line-strong);border-radius:14px}
  .w-flyer .flyer{width:44px;flex:none;transform:none;box-shadow:0 0 0 1px var(--line-strong)}
  .w-flyer .fl-top{padding:18% 8%}
  .w-flyer .fl-top i,.w-flyer .fl-top b,.w-flyer .fl-date{display:none}
  .w-flyer .fl-lines{padding-top:14%;gap:3px}
  .w-flyer .fl-lines i{height:2px}
  .w-flyer .fl-cap{max-width:none;padding:0;border:0;background:none;box-shadow:none;color:var(--ink-soft);text-align:left;font-size:14px;line-height:1.45}
  .w-flyer .fl-cap b{color:var(--ink)}
  .asheet,.walk.has-sheet .asheet,.walk.mini-sheet .asheet{order:5;position:static;display:flex;width:auto;max-height:none;margin-top:12px;border:1px solid var(--as-line-strong);border-radius:16px;box-shadow:var(--shadow-float)}
  .asheet{font-size:13px;line-height:1.45}
  .as-body{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .as-spacer{display:none}
  .asheet .is-hist{display:none!important}
  .walk-cap{order:6}
}

/* ============================================================ League row */
.league{padding-block:clamp(56px,7vw,88px)}
.league-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,56px);align-items:center}
.league-copy{display:grid;gap:14px;justify-items:start}
.league-copy .lead{font-size:16px}
.league-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.league-list li{display:grid;gap:12px;align-content:start;padding:18px 18px 20px;font-size:14.5px;line-height:1.5;color:var(--ink-soft)}
.league-list .i{width:22px;height:22px;color:var(--lime)}

/* ============================================================ About */
.about{padding-block:clamp(56px,7vw,88px)}
.about-in{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px 28px;align-items:center;max-width:920px}
.about-in > img{width:64px;height:64px;border-radius:14px;box-shadow:0 0 0 1px var(--line-strong)}
.about-copy{display:grid;gap:12px;justify-items:start}
.about-copy .lead{font-size:17px}

/* ============================================================ Footer */
.footer{padding-block:64px 36px;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:32px}
.foot-brand{display:grid;gap:18px;align-content:start;justify-items:start}
.foot-brand img{height:24px;width:auto}
.foot-brand p{font-size:14px;color:var(--ink-muted);max-width:30ch}
.stores{display:flex;flex-wrap:wrap;gap:10px}
.store{display:inline-flex;flex-direction:column;justify-content:center;height:44px;padding:0 14px;border-radius:10px;background:var(--badge-bg);color:var(--badge-ink);border:1px solid var(--line-strong);text-decoration:none;line-height:1.1}
.store small{font-size:10px;opacity:.85}
.store b{font-size:15px;font-weight:700;letter-spacing:-.01em}
.foot-col h3{font:800 11px/1 var(--font-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-bottom:16px}
.foot-col ul{display:grid;gap:10px}
.foot-col a{font-size:14px;color:var(--ink-muted);text-decoration:none}
.foot-col a:hover{color:var(--lime)}
.foot-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;margin-top:48px;padding-top:24px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-muted)}
.foot-bottom .motto{font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.foot-bottom a{color:var(--ink-soft)}
.foot-legal{margin-top:14px;font-size:11px;line-height:1.5;color:var(--ink-muted);max-width:90ch}

/* ============================================================ Phone sticky bar */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;gap:10px;padding:6px var(--gutter) calc(6px + env(safe-area-inset-bottom,0px));background:var(--bar-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.mbar .btn{flex:1;height:44px;padding:0 12px;font-size:15px}

/* ============================================================ Responsive */
/* Body copy is at least 17px on desktop (marketer review, 2026-09-29): the
   section leads already are; these running paragraphs were 16px. Card copy
   (14 to 15.5px, three cards to a row) and captions stay as they are. */
@media (min-width:1024px){
  .faq-a,.lead-sm,.league-copy .lead,.door .ticks li{font-size:17px}
}
@media (max-width:1023px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-visual{max-width:640px;width:100%;justify-self:center}
  .door{grid-template-columns:minmax(0,1fr)}
  .tour{grid-template-columns:minmax(0,1fr)}
  .tour-side{display:none}
  .tip{display:none}
  .tour-foot .dotbar{display:none}
  .tour-foot .tour-count{display:inline-flex}
  .tour-now{display:grid;gap:6px;margin-top:14px;padding:16px 18px;border-radius:14px;border:1px solid var(--line-strong);background:var(--bg-card)}
  .tour-now .tip-t{font-size:17px}
  .tour-chips{display:flex;gap:8px;overflow-x:auto;padding:14px 2px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tour-chips::-webkit-scrollbar{display:none}
  .tchip{flex:none;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 6px;border-radius:999px;border:1px solid var(--line-strong);background:var(--bg-card);color:var(--ink-soft);font:600 13px/1 var(--font-sans);cursor:pointer;white-space:nowrap}
  .tchip i{font-style:normal;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-strong);font-size:11px;font-weight:700;color:var(--ink-muted)}
  .tchip[aria-current="step"]{border-color:var(--lime);color:var(--ink)}
  .tchip[aria-current="step"] i{background:var(--lime);border-color:var(--lime);color:var(--ink-inverse)}
  .tchip-sep{flex:none;align-self:center;font:800 9px/1 var(--font-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted);padding:0 2px 0 6px}
  .chapters.mobile-only{display:grid;margin-bottom:12px}
  .next-steps{grid-template-columns:minmax(0,1fr)}
  .two{grid-template-columns:minmax(0,1fr)}
  .feat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiers{grid-template-columns:minmax(0,1fr)}
  .faq-grid{grid-template-columns:minmax(0,1fr)}
  .faq-side{position:static}
  .final-grid{grid-template-columns:minmax(0,1fr)}
  .league-grid{grid-template-columns:minmax(0,1fr)}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-brand{grid-column:1/-1}
}

@media (max-width:720px){
  .brand img{height:24px}
  .brand .lockup .word{font-size:20px}
  .bar-cta{display:none}
  .cta-row{flex-direction:column;align-items:stretch;width:100%}
  .cta-stack{max-width:none;justify-items:stretch}
  .cta-stack .btn{width:100%}
  .proof{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof li:nth-child(3){border-left:0}
  .proof li:nth-child(n+3){border-top:1px solid var(--line)}
  .door{border-radius:20px}
  .door-cta,.door-cta .btn{width:100%}
  .next-steps{padding:18px}
  .next-list{grid-template-columns:minmax(0,1fr)}
  .feat-grid{grid-template-columns:minmax(0,1fr)}
  .league-list{grid-template-columns:minmax(0,1fr)}
  .league-list li{grid-template-columns:22px 1fr;align-items:start;gap:12px;padding:16px}
  .about-in{grid-template-columns:minmax(0,1fr)}
  .about-in > img{width:52px;height:52px}
  .price-hero{grid-template-columns:minmax(0,1fr)}
  .btn-row .btn{flex:1}
  .final-ctas,.final-ctas .cta-stack,.final-ctas .btn{width:100%}
  .mbar{display:flex}
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}
  .pc-left span:first-of-type{display:none}
}
@media (max-width:560px){
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
  .hero-visual{padding:0 0 22% 13%}
  .phone-hero{width:27%}
  .phone{padding:3px;border-radius:18px}
  .phone img{border-radius:15px}
  .tv-label{display:none}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important}
  .cursor,.stage-inner,.shot,.tip,.ring{transition:none!important}
  .pulse::after,.ring::after,.asheet .is-hot::after{display:none}
  .walk-inner,.wshot{transition:none!important}
  .as-spin{animation:none!important}
}