/* ============================================================
   Sidecourt — landing  ·  dark, restrained, product-forward
   ============================================================ */

@property --pal-bg          { syntax: '<color>'; inherits: true; initial-value: rgba(11,14,24,.94); }
@property --pal-accent      { syntax: '<color>'; inherits: true; initial-value: #ffd23f; }
@property --pal-accent-text { syntax: '<color>'; inherits: true; initial-value: #0a0c12; }
@property --pal-text        { syntax: '<color>'; inherits: true; initial-value: #ffffff; }

:root {
  --bg:#070809;
  --bg-1:#0b0c10;
  --ink:#e9ebf0;          /* headings  */
  --ink-2:#c3c7d1;        /* strong body */
  --mut:#9398a4;          /* body */
  --mut-2:#6b707c;        /* dim */
  --mut-3:#494e58;        /* faint */
  --amber:#ffd23f;
  --cyan:#46e6d8;
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.12);
  --wrap:1080px;
  --wrap-wide:1180px;
  --e:cubic-bezier(.22,1,.36,1);
  --e-soft:cubic-bezier(.16,1,.3,1);
  font-synthesis:none;
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:80px; -webkit-text-size-adjust:100%; }
body {
  background:var(--bg); color:var(--mut);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Helvetica Neue",system-ui,sans-serif;
  font-size:17px; line-height:1.6; letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; position:relative; min-height:100vh;
}
svg,img,video { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
em { font-style:normal; color:var(--ink-2); font-weight:600; letter-spacing:.04em; }
::selection { background:var(--amber); color:#0a0c10; }

.wrap { max-width:var(--wrap); margin:0 auto; padding:0 24px; width:100%; }
.wrap-wide { max-width:var(--wrap-wide); margin:0 auto; padding:0 24px; width:100%; }

/* ── ambient: a hair of warmth in the dark, not visible "blobs" ── */
.noise{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.05; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
.ambient{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.ambient .g{ position:absolute; border-radius:50%; filter:blur(160px); }
.ambient .g1{ width:760px; height:760px; top:-340px; left:50%; transform:translateX(-50%);
  background:radial-gradient(circle,rgba(255,210,63,.16),rgba(255,210,63,.04) 45%,transparent 70%); }
.ambient .g2{ width:680px; height:680px; top:46vh; right:-280px;
  background:radial-gradient(circle,rgba(70,230,216,.10),transparent 65%); }

main,.nav,.footer{ position:relative; z-index:1; }

/* ── reveal ───────────────────────────────────────────────── */
.reveal{ transition:opacity .85s var(--e-soft), transform .85s var(--e-soft); }
html.js .reveal{ opacity:0; transform:translateY(20px); }
html.js .reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s } .reveal[data-d="2"]{ transition-delay:.16s }
.reveal[data-d="3"]{ transition-delay:.24s } .reveal[data-d="4"]{ transition-delay:.34s }

/* ── type ─────────────────────────────────────────────────── */
h1,h2 { color:var(--ink); font-weight:600; letter-spacing:-.035em; line-height:1.06;
  background:linear-gradient(180deg,#fff 0%,#cdd1da 130%); -webkit-background-clip:text; background-clip:text; color:transparent; }
h1 { font-size:clamp(2.7rem,6.4vw,5rem); letter-spacing:-.042em; }
h1 .h1-hi{ background:linear-gradient(168deg,#ffe68e 6%,#ffc41d 96%); -webkit-background-clip:text; background-clip:text; color:transparent; }
h2 { font-size:clamp(1.9rem,3.7vw,2.95rem); }
.kicker{ font-size:.78rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--mut-2);
  display:inline-flex; align-items:center; gap:.6em; }
.kicker::before{ content:""; width:18px; height:1px; background:var(--amber); opacity:.8; }
.center .kicker{ justify-content:center; }
.center .kicker::before{ display:none; }

/* ── buttons ──────────────────────────────────────────────── */
.btn{ display:inline-flex; align-items:center; gap:.55em; font-weight:600; font-size:.95rem; line-height:1;
  border-radius:999px; padding:12px 18px; border:1px solid transparent; white-space:nowrap;
  transition:transform .2s var(--e), background .2s, border-color .2s, box-shadow .25s var(--e), color .2s; will-change:transform; }
.btn:active{ transform:translateY(.5px) scale(.99); }
.btn-lg{ font-size:1rem; padding:15px 26px; }
.btn-sm{ font-size:.84rem; padding:8px 13px; }

.btn-primary{ position:relative; overflow:hidden; color:#0a0c10; background:var(--amber);
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset, 0 8px 24px -10px rgba(255,210,63,.55), 0 1px 2px rgba(0,0,0,.3); }
.btn-primary:hover{ transform:translateY(-1.5px); background:#ffdb5e;
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 14px 34px -10px rgba(255,210,63,.6), 0 1px 2px rgba(0,0,0,.3); }
.btn-primary::after{ content:""; position:absolute; inset:0; transform:translateX(-130%) skewX(-16deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent); transition:transform .8s var(--e); }
.btn-primary:hover::after{ transform:translateX(130%) skewX(-16deg); }

.btn-ghost{ color:var(--ink-2); background:rgba(255,255,255,.03); border-color:var(--line-2); backdrop-filter:blur(8px); }
.btn-ghost:hover{ transform:translateY(-1.5px); background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.22); color:#fff; }

.cta-note{ font-size:.82rem; color:var(--mut-2); }
.cta-note a{ color:var(--ink-2); text-decoration:underline; text-underline-offset:2px; text-decoration-color:rgba(255,255,255,.25); }
.cta-note a:hover{ text-decoration-color:rgba(255,255,255,.6); }
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.cta-band .cta-row{ justify-content:center; }
.apple-ico{ height:1.05em; width:auto; flex:none; fill:currentColor; margin-top:-.1em; }
.win-ico{ height:.95em; width:auto; flex:none; margin-top:-.05em; }

/* ── nav ──────────────────────────────────────────────────── */
/* ── Scroll-morph navbar (Linear/Vercel-style 2026) ───────
   At the top of the page the nav is "naked" — logo, links and CTA
   float over the hero with no visible container. The moment the user
   starts scrolling (>16px), a glass capsule materializes around them
   with a bouncy spring (scale 0.96 → 1 with overshoot + tiny vertical
   settle). Same layout in both states; only the container appears.
   The inner .nav-links keeps its sliding indicator (script.js drives
   .nav-pill width + transform on hover/active section). */
/* ── Scroll-morph navbar (Linear/Vercel-style 2026) ───────
   At top : navbar spans the full content wrap (--wrap-wide, 1180px) —
   logo anchored far left, links centered, CTA anchored far right, no
   visible container. Looks like a "regular" full-width header.
   On scroll : the whole nav contracts (max-width animates from 1180px
   down to ~640px) and the glass pill materializes around the now-
   compact group, with strong backdrop blur. Links and CTA keep the
   same size in both states — only the wordmark/logo and the container
   width animate. Items use justify-content:space-between so they
   naturally pack closer together as the container shrinks. */
/* Shared easings for the size-vs-fade choreography */
:root{
  --nav-snap:cubic-bezier(.34,1.5,.5,1);          /* slight overshoot on size */
  --nav-fade:cubic-bezier(.4,0,.2,1);              /* clean fade for bg/blur */
}

.nav{
  /* Centered via left:0/right:0/margin:0 auto rather than transform:translateX(-50%),
     because an ancestor transform creates a 3D rendering context that prevents
     backdrop-filter from blurring content behind it (Chrome quirk). */
  position:fixed; top:18px; left:0; right:0;
  margin:0 auto;
  z-index:50;
  width:100%; max-width:var(--wrap-wide);
  padding:0 22px;
  border-radius:999px;
  background:transparent;
  border:1px solid transparent;
  backdrop-filter:blur(0) saturate(100%);
  -webkit-backdrop-filter:blur(0) saturate(100%);
  box-shadow:0 0 0 0 transparent;
  animation:nav-in .55s cubic-bezier(.22,1,.36,1) both;
  transition:
    max-width .6s cubic-bezier(.34,1.4,.5,1),    /* the size morph */
    padding .55s var(--nav-snap),
    top .4s cubic-bezier(.34,1.3,.5,1),
    background .45s var(--nav-fade),
    border-color .45s var(--nav-fade),
    backdrop-filter .45s var(--nav-fade),
    -webkit-backdrop-filter .45s var(--nav-fade),
    box-shadow .55s var(--nav-fade);
}
.nav.scrolled{
  /* Pill becomes visible on .nav itself — bg/blur/border/shadow live here,
     not on the inner .nav-row, so the glass effect covers the whole pill. */
  top:14px;
  max-width:760px;                                /* enough slack for wordmark + 3 links + CTA + gaps */
  padding:7px;
  background:rgba(10,12,16,.62);
  border-color:rgba(255,255,255,.12);
  backdrop-filter:blur(40px) saturate(180%);
  -webkit-backdrop-filter:blur(40px) saturate(180%);
  box-shadow:0 14px 44px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.07);
}
@keyframes nav-in{
  from{ opacity:0; }
  to  { opacity:1; }
}

/* nav-row : pure flex container, no chrome of its own */
.nav-row{
  display:flex; align-items:center; justify-content:space-between; position:relative;
}
.nav-row .btn-primary { flex-shrink:0; }

/* Wordmark + logo : the one thing that actually changes size between states */
.wordmark{
  display:inline-flex; align-items:center; gap:.56em;
  font-weight:600; font-size:1.22rem; letter-spacing:-.022em; color:var(--ink);
  transition:font-size .5s var(--nav-snap), gap .5s var(--nav-snap);
}
.nav.scrolled .wordmark{ font-size:1.02rem; gap:.48em; }
.wm-mark{
  width:28px; height:28px; flex:none; display:block;
  filter:drop-shadow(0 0 12px rgba(255,210,63,.55));
  transition:width .5s var(--nav-snap), height .5s var(--nav-snap), filter .3s var(--e);
}
.nav.scrolled .wm-mark{ width:20px; height:20px; }
.wordmark:hover .wm-mark{ filter:drop-shadow(0 0 16px rgba(255,210,63,.75)); }
.wm-mark svg{ width:100%; height:100%; display:block; }

/* nav-links : just the inner flex group that holds the 3 links + the sliding
   pill indicator. justify-content:space-between on .nav-row places this
   group dead-center between the wordmark and the CTA — no margins needed. */
.nav-links{
  position:absolute; left:50%;
  /* Optical centering: the wordmark (~123px) is much lighter visually
     than the bright CTA (~229px), so geometric centering pulls the links
     "toward the button" perceptually. Shift 30px left of geometric center
     so the empty space on each side feels balanced. */
  transform:translateX(calc(-50% - 30px));
  display:flex; align-items:center; gap:0;
}
.nav-links a{
  position:relative; z-index:1;
  padding:9px 18px;
  font-size:.92rem; font-weight:500; letter-spacing:-.005em;
  color:var(--mut);
  border-radius:999px;
  transition:color .22s var(--e);
}
.nav-links a:hover,
.nav-links a[data-active="true"]{ color:var(--ink); }

.nav-pill{
  position:absolute; top:0; left:0; z-index:0;
  width:0; height:100%;
  background:rgba(255,255,255,.08);
  border-radius:999px;
  opacity:0;
  transform:translate3d(0,0,0);
  transition:
    transform .42s cubic-bezier(.34,1.3,.64,1),
    width .42s cubic-bezier(.34,1.3,.64,1),
    opacity .22s var(--e);
  pointer-events:none;
}
.nav-links[data-pill="show"] .nav-pill{ opacity:1; }

/* CTA : same size both states */
.nav-row .btn-primary{ padding:10px 18px; font-size:.92rem; border-radius:999px; }

/* ── Burger + drawer (mobile only) ──────────────────────────
   On desktop the burger is hidden and the inline CTA + nav-links handle
   everything. Below 760px the nav-links + inline CTA hide and the burger
   takes over: tap → drawer slides down from below the nav as a separate
   glass panel with the same 3 section links + a primary CTA. */
.nav-burger{
  display:none; /* desktop */
  background:transparent; border:1px solid transparent; cursor:pointer;
  width:38px; height:38px; padding:0; position:relative; z-index:2;
  border-radius:12px;
  transition: background .2s, border-color .2s;
  flex:none;
}
.nav-burger:hover{ background:rgba(255,255,255,.06); border-color:var(--line-2); }
.nav-burger:focus-visible{ outline:none; border-color:rgba(255,210,63,.55); }
.burger-line{
  position:absolute; left:10px; width:18px; height:2px;
  background:var(--ink); border-radius:1px;
  transition: top .3s var(--e), transform .3s var(--e), opacity .15s;
}
.burger-line:nth-child(1){ top:13px; }
.burger-line:nth-child(2){ top:18px; }
.burger-line:nth-child(3){ top:23px; }
.nav-burger[aria-expanded="true"] .burger-line:nth-child(1){ top:18px; transform:rotate(45deg); }
.nav-burger[aria-expanded="true"] .burger-line:nth-child(2){ opacity:0; }
.nav-burger[aria-expanded="true"] .burger-line:nth-child(3){ top:18px; transform:rotate(-45deg); }

/* Fullscreen overlay menu. Body-level sibling of <header> (not a child) so
   the nav's backdrop-filter doesn't trap position:fixed to its box.
   z-index:49 sits just below the nav (z-index:50), so the nav capsule
   stays on top — the burger (in nav) remains clickable and morphs to X
   while the drawer fills everything below.
   Body scroll is locked via .drawer-open class added by JS. */
.nav-drawer{
  display:none; position:fixed; inset:0; z-index:49;
  flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:100px 24px 60px;
  background:rgba(8,10,16,.94);
  backdrop-filter:blur(28px) saturate(140%);
  -webkit-backdrop-filter:blur(28px) saturate(140%);
  opacity:0;
  transition: opacity .3s var(--e);
}
.nav-drawer.show{ display:flex; }
.nav-drawer.open{ opacity:1; }

.nav-drawer > a{
  position:relative;
  font-size:clamp(2rem,7vw,2.6rem); font-weight:600; letter-spacing:-.035em; line-height:1.1;
  padding:14px 24px; text-align:center;
  background:linear-gradient(180deg,#fff 0%,#cdd1da 130%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:0; transform:translateY(14px);
  transition: opacity .35s var(--e-soft), transform .35s var(--e-soft);
}
.nav-drawer.open > a{ opacity:1; transform:translateY(0); }
.nav-drawer.open > a:nth-child(1){ transition-delay:.06s; }
.nav-drawer.open > a:nth-child(2){ transition-delay:.12s; }
.nav-drawer.open > a:nth-child(3){ transition-delay:.18s; }
.nav-drawer.open > a:nth-child(4){ transition-delay:.26s; }

/* CTA in drawer overrides the h1-gradient styling above */
.nav-drawer-cta{
  margin-top:28px;
  font-size:1.02rem !important; padding:16px 30px !important;
  /* reset the background-clip:text trick so the button shows its real fill */
  -webkit-background-clip:border-box !important; background-clip:border-box !important;
}
.nav-drawer .btn-primary.nav-drawer-cta{
  background:var(--amber) !important;
  color:#0a0c10 !important;
  -webkit-text-fill-color:#0a0c10;
}
.nav-drawer .btn-ghost.nav-drawer-cta{
  background:rgba(255,255,255,.04) !important;
  border:1px solid var(--line-2) !important;
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink);
}

/* Body scroll lock while drawer is open */
html.drawer-open, html.drawer-open body{ overflow:hidden; }

@media (max-width:760px){
  .nav{ top:14px; padding:0 10px 0 14px; }
  .nav.scrolled{ top:10px; max-width:96vw; padding:6px 8px 6px 14px; }
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .nav-burger{ display:block; }
  .wordmark{ font-size:1.08rem; }
  .nav.scrolled .wordmark{ font-size:.98rem; }
  .wm-mark{ width:22px; height:22px; }
  .nav.scrolled .wm-mark{ width:18px; height:18px; }
}
@media (prefers-reduced-motion:reduce){
  .nav{
    animation:none;
    transition:max-width .2s, padding .2s, top .2s,
      background .25s, border-color .25s, backdrop-filter .25s, box-shadow .25s !important;
  }
  .wordmark, .wm-mark{ transition:color .2s !important; }
  .nav-pill{ transition:opacity .22s var(--e); }
}

/* ── hero ─────────────────────────────────────────────────── */
.hero{ padding:136px 0 60px; text-align:center; }
.hero-head{ }
.hero .kicker{ margin-bottom:24px; }
.hero .kicker::before{ display:none; }
.hero-title{ font-size:clamp(2.7rem,6.4vw,5rem); line-height:1.03; letter-spacing:-.046em; margin:0 auto 22px; text-wrap:balance; }
.hero-sub{ max-width:54ch; margin:0 auto 32px; font-size:1.18rem; color:var(--mut); line-height:1.6; }
.hero-cta{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.hero .cta-row{ justify-content:center; }

.hero-stage{ margin-top:clamp(52px,6.4vw,84px); position:relative; }
.hero-stage::before{ content:""; position:absolute; left:50%; top:-12%; z-index:-1; width:120%; height:128%; transform:translateX(-50%);
  pointer-events:none; border-radius:46% 46% 50% 50%/40%;
  background:radial-gradient(54% 56% at 50% 46%, rgba(255,206,70,.24), rgba(255,150,38,.08) 40%, transparent 72%);
  filter:blur(48px); }
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ── the "screen" — premium video frame ──────────────────── */
.screen{ position:relative; width:100%; aspect-ratio:16/9; border-radius:18px; overflow:hidden; isolation:isolate;
  background:#080a0f;
  box-shadow:0 0 0 1px rgba(255,255,255,.07), 0 1px 0 rgba(255,255,255,.06) inset,
    0 30px 70px -28px rgba(0,0,0,.85), 0 90px 180px -60px rgba(0,0,0,.7); }
.screen::after{ content:""; position:absolute; inset:0; z-index:8; pointer-events:none; border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.045),transparent 9%,transparent 86%,rgba(0,0,0,.28)); }
.screen-hero{ }
.screen video,.screen img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* faux broadcast court (placeholder scene) */
.scene{ position:absolute; inset:0; overflow:hidden; }
.court{ position:absolute; inset:0; overflow:hidden; }
.court-bed{ position:absolute; inset:0;
  background:linear-gradient(176deg,#0a1420 0%,#0d2034 18%,#163553 46%,#1c4063 72%,#15314c 100%); }
.court-bed::before{ content:""; position:absolute; inset:0;            /* the far stands / background, darker */
  background:linear-gradient(176deg,#070d16 0%,rgba(8,16,26,.55) 14%,transparent 30%,transparent 100%); }
.court-lines{ position:absolute; left:50%; bottom:-6%; width:170%; height:88%;
  transform:translateX(-50%) perspective(820px) rotateX(63deg); transform-origin:bottom center; }
.court-lines span{ position:absolute; box-sizing:border-box; border:2px solid rgba(255,255,255,.4); }
.cl-out{ left:9%; right:9%; top:0; bottom:0; }
.cl-singles{ left:16%; right:16%; top:0; bottom:0; border-top:none; border-bottom:none; }
.cl-service{ left:16%; right:16%; top:36%; height:0; border:none; border-top:2px solid rgba(255,255,255,.4); }
.cl-center{ left:50%; top:36%; bottom:0; width:0; border:none; border-left:2px solid rgba(255,255,255,.4); transform:translateX(-1px); }
.cl-net{ left:-3%; right:-3%; top:0; height:0; border:none; border-top:3px solid rgba(255,255,255,.78); box-shadow:0 8px 16px rgba(0,0,0,.32); }
.court-glow{ position:absolute; left:50%; top:8%; width:130%; height:120%; transform:translateX(-50%);
  background:radial-gradient(ellipse 60% 55% at 50% 64%,rgba(255,238,200,.16),rgba(255,238,200,.05) 40%,transparent 62%); mix-blend-mode:screen; }
.court-vig{ position:absolute; inset:0; box-shadow:inset 0 0 140px 22px rgba(0,0,0,.46); pointer-events:none; }
.court-vig-top{ z-index:7; box-shadow:inset 0 70px 110px -24px rgba(0,0,0,.62), inset 0 -56px 80px -10px rgba(0,0,0,.38); }

/* ── the scoreboard component ────────────────────────────── */
.scoreboard{ position:absolute; left:5.4%; top:8.4%; z-index:5; width:clamp(196px,35%,320px);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,sans-serif;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; transform-origin:top left;
  filter:drop-shadow(0 16px 32px rgba(0,0,0,.5)) drop-shadow(0 3px 8px rgba(0,0,0,.4));
  transition:--pal-bg .55s var(--e), --pal-accent .55s var(--e), --pal-accent-text .55s var(--e), --pal-text .55s var(--e), transform .5s var(--e); }
.sb-banner{ display:inline-block; margin-bottom:7px; padding:5px 10px 6px;
  background:var(--pal-accent); color:var(--pal-accent-text); font-size:.6rem; font-weight:800; letter-spacing:.15em; border-radius:6px;
  box-shadow:0 5px 16px -3px color-mix(in srgb,var(--pal-accent) 50%,transparent); }
.sb-panel{ background:var(--pal-bg); border-radius:11px; overflow:hidden; backdrop-filter:blur(10px) saturate(150%);
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset; text-align:left; }
.sb-line{ position:relative; display:flex; align-items:center; height:clamp(33px,3vw,42px); padding-left:11px; color:var(--pal-text); }
.sb-line + .sb-line::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:color-mix(in srgb,var(--pal-text) 12%,transparent); }
.sb-serve{ width:7px; height:7px; border-radius:50%; flex:none; margin-right:8px; background:color-mix(in srgb,var(--pal-text) 16%,transparent); }
.sb-serve.on{ background:var(--pal-accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--pal-accent) 32%,transparent),0 0 9px var(--pal-accent); }
.sb-name{ flex:1; min-width:0; font-weight:700; font-size:clamp(12px,1.1vw,15px); letter-spacing:.018em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:9px; }
.sb-sets{ display:flex; flex:none; }
.sb-sets b{ width:clamp(17px,1.55vw,23px); text-align:center; font-weight:600; font-size:clamp(12px,1.05vw,14px); opacity:.5; }
.sb-games{ width:clamp(21px,1.85vw,27px); text-align:center; font-weight:700; font-size:clamp(12.5px,1.15vw,16px); flex:none;
  background:color-mix(in srgb,var(--pal-text) 7%,transparent); align-self:stretch; display:flex; align-items:center; justify-content:center; }
.sb-pts{ width:clamp(30px,2.6vw,38px); flex:none; align-self:stretch; position:relative; perspective:340px;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:clamp(12.5px,1.15vw,16px);
  background:color-mix(in srgb,var(--pal-text) 12%,transparent); }
.sb-line.lead .sb-pts{ background:var(--pal-accent); color:var(--pal-accent-text); }

/* keep rows left-aligned even when the board sits in a right corner */
.scoreboard .sb-panel{ text-align:left; }

/* ── moments ──────────────────────────────────────────────── */
.moment{ padding:clamp(80px,13vw,168px) 0; }
.moment-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(34px,4.6vw,68px); align-items:center; }
.moment-grid-rev{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); }
.moment-grid-rev .moment-copy{ order:2; } .moment-grid-rev .moment-media{ order:1; }
.moment-copy .kicker{ margin-bottom:18px; }
.moment-copy h2{ margin-bottom:18px; }
.moment-copy p{ font-size:1.06rem; color:var(--mut); max-width:42ch; line-height:1.62; }
.moment-copy.center{ text-align:center; max-width:760px; margin:0 auto; }
.moment-copy.center p{ max-width:none; margin:0 auto; }
.moment-center .moment-copy{ margin-bottom:clamp(40px,6vw,70px); }
/* studio — annotated scoreboard with leader lines */
.studio-diagram{ position:relative; width:100%; max-width:1000px; margin:clamp(56px,8vw,110px) auto 0; aspect-ratio:1000/500; }
.studio-board{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; }
.studio-board .scoreboard{ position:static; width:clamp(280px,38vw,400px); }
.studio-lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:1; pointer-events:none; }
.studio-lines path{ fill:none; stroke:var(--mut-3); stroke-width:1.2; stroke-linecap:round; stroke-dasharray:1 0; opacity:0; transition:opacity .9s var(--e) .35s; }
.studio-diagram.in .studio-lines path{ opacity:.85; }
.callout{ position:absolute; max-width:230px; z-index:3; }
.callout p{ font-size:.94rem; line-height:1.5; color:var(--mut); margin:0; }
.callout strong{ color:var(--ink); font-weight:600; }
.callout-tl{ left:0;  top:0;     text-align:right; }
.callout-tr{ right:0; top:0;     text-align:left;  }
.callout-bl{ left:0;  bottom:0;  text-align:right; }
.callout-br{ right:0; bottom:0;  text-align:left;  }
@media (max-width:780px){
  .studio-diagram{ aspect-ratio:auto; max-width:520px; display:flex; flex-direction:column; align-items:stretch; gap:16px; }
  .studio-lines{ display:none; }
  .studio-board{ position:static; transform:none; display:flex; justify-content:center; margin:8px 0 24px; order:1; }
  .callout{ position:static; max-width:none; text-align:left; }
  .callout-tl{ order:2; } .callout-tr{ order:3; } .callout-bl{ order:4; } .callout-br{ order:5; }
  .callout::before{ content:""; display:inline-block; width:11px; height:2px; background:#ffd23f; border-radius:2px; vertical-align:middle; margin-right:10px; transform:translateY(-3px); }
}

/* ── waitlist band ───────────────────────────────────────── */
.cta-band{ padding:clamp(96px,15vw,200px) 0; text-align:center; position:relative; }
.cta-band::before{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(900px,90vw); height:340px; z-index:-1;
  background:radial-gradient(closest-side,rgba(255,210,63,.12),transparent); filter:blur(20px); }
.cta-band h2{ margin-bottom:14px; }
.cta-band p{ color:var(--mut); font-size:1.12rem; max-width:46ch; margin:0 auto 28px; }
.cta-band .btn{ margin-bottom:14px; }
.cta-band .cta-note{ display:block; }

/* ── footer ──────────────────────────────────────────────── */
.footer{ border-top:1px solid var(--line); padding:32px 0 48px; }
.foot-row{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.foot-meta{ font-size:.84rem; color:var(--mut-2); }
.footer .wm-mark{ filter:none; }
.foot-row .foot-meta:last-child{ margin-left:auto; }
@media (max-width:560px){ .foot-row .foot-meta:last-child{ margin-left:0; } }

/* ── highlights timeline mock ─────────────────────────── */
.hl-panel{
  background:rgba(9,11,18,.78); border:1px solid var(--line); border-radius:16px;
  overflow:hidden; backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 0 0 1px rgba(255,255,255,.045) inset,0 36px 80px -30px rgba(0,0,0,.8);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,sans-serif;
  font-variant-numeric:tabular-nums;
}
.hl-hdr{
  display:flex; align-items:center; gap:10px; padding:10px 13px;
  border-bottom:1px solid var(--line);
}
.hl-hdr-title{ font-size:11px; font-weight:600; color:var(--ink-2); flex:none; }
.hl-hdr-mode{
  display:flex; gap:2px; background:rgba(255,255,255,.05); border-radius:6px; padding:2px; flex:none;
}
.hl-seg{ font-size:10px; font-weight:600; padding:3px 8px; border-radius:4px; color:var(--mut-3); white-space:nowrap; }
.hl-seg-on{ background:rgba(255,255,255,.1); color:var(--ink-2); }
.hl-hdr-sum{ margin-left:auto; font-size:10px; font-weight:600; color:var(--amber); flex:none; }
.hl-list{ padding:4px 0; }
.hl-row{
  display:grid; grid-template-columns:18px 20px 30px 1fr 38px; align-items:center;
  gap:0 7px; padding:4px 13px 4px 10px; min-height:26px;
}
.hl-in{ color:var(--ink-2); }
.hl-out{ color:var(--mut-3); opacity:.52; }
.hl-corr{ color:var(--amber); background:rgba(255,210,63,.06); }
.hl-cb{
  width:11px; height:11px; border-radius:2.5px; border:1.5px solid var(--mut-3);
  display:grid; place-items:center;
}
.hl-cb-on{ background:var(--amber); border-color:var(--amber); }
.hl-cb-on::after{
  content:""; display:block; width:5px; height:3px;
  border-left:1.5px solid #0a0c10; border-bottom:1.5px solid #0a0c10;
  transform:translateY(-1.5px) rotate(-45deg);
}
.hl-n{ font-size:10px; color:var(--mut-3); text-align:right; font-weight:500; }
.hl-tc{ font-size:10.5px; }
.hl-out .hl-tc{ color:var(--mut-3); }
.hl-dur{
  position:relative; height:3px; border-radius:2px; background:rgba(255,255,255,.07); overflow:hidden;
}
.hl-dur i{
  display:block; position:absolute; left:0; top:0; bottom:0;
  width:var(--w,20%); border-radius:2px; background:rgba(70,230,216,.5);
}
.hl-out .hl-dur i{ background:rgba(255,255,255,.14); }
.hl-tag{
  font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:2px 6px; border-radius:4px; text-align:center; white-space:nowrap; display:block;
}
.hl-bp{ background:rgba(255,210,63,.14); color:var(--amber); }
.hl-ace{ background:rgba(70,230,216,.12); color:var(--cyan); }
.hl-win{ background:rgba(52,211,153,.12); color:#34d399; }
.hl-setp{ background:rgba(160,132,255,.12); color:#a084ff; }
.hl-mp{ background:rgba(255,100,80,.12); color:#ff6450; }
.hl-chip-corr{
  font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:2px 6px; border-radius:4px; display:block; white-space:nowrap;
  background:rgba(255,210,63,.13); color:var(--amber); border:1px solid rgba(255,210,63,.2);
}
.hl-ftr{
  display:flex; align-items:center; justify-content:space-between; padding:8px 13px;
  border-top:1px solid var(--line);
}
.hl-ftr-auto{
  font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:var(--amber); color:#0a0c10; padding:4px 10px; border-radius:5px;
}
.hl-ftr-corr{
  font-size:10.5px; font-weight:600; color:var(--mut-2);
  padding:4px 9px; border-radius:6px; border:1px solid var(--line-2);
}

/* ── match timeline ─────────────────────────────────────── */
.match-timeline{ margin-top:clamp(48px,7vw,72px); display:flex; flex-direction:column; gap:22px; }
.mtl-row{ display:flex; align-items:center; gap:18px; }
.mtl-label{
  font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mut-2); min-width:110px; flex:none; text-align:right;
}
.mtl-track{
  flex:1; height:6px; border-radius:3px;
  background:rgba(255,255,255,.06); position:relative;
}
.mtl-track--full::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:100%;
  border-radius:3px; background:rgba(255,255,255,.15);
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.4s .2s var(--e-soft);
}
.match-timeline.in .mtl-track--full::before{ transform:scaleX(1); }
.mtl-clip{
  position:absolute; left:var(--pos,50%); top:50%;
  width:38px; height:18px; transform:translate(-50%,-50%) scaleX(0);
  background:var(--amber); opacity:.2; border-radius:4px;
  transform-origin:center;
  transition:transform .5s var(--e), opacity .5s var(--e);
  pointer-events:none;
}
.match-timeline.in .mtl-clip{ transform:translate(-50%,-50%) scaleX(1); }
.mtl-track--full .mtl-clip:nth-of-type(1){ transition-delay:.55s; }
.mtl-track--full .mtl-clip:nth-of-type(2){ transition-delay:.7s; }
.mtl-track--full .mtl-clip:nth-of-type(3){ transition-delay:.85s; }
.mtl-track--full .mtl-clip:nth-of-type(4){ transition-delay:1s; }
.mtl-track--full .mtl-clip:nth-of-type(5){ transition-delay:1.15s; }
.mtl-track--full .mtl-clip:nth-of-type(6){ transition-delay:1.3s; }
.mtl-track--full .mtl-clip:nth-of-type(7){ transition-delay:1.45s; }
.mtl-track--full .mtl-clip:nth-of-type(8){ transition-delay:1.6s; }
.mtl-dot{
  position:absolute; top:50%; left:var(--pos,50%);
  width:10px; height:10px; border-radius:50%;
  transform:translate(-50%,-50%) scale(0);
  transition:transform .3s var(--e);
  border:1.5px solid currentColor; background:currentColor;
}
.mtl-bp  { color:var(--amber); }
.mtl-ace { color:var(--cyan); }
.mtl-win { color:#34d399; }
.mtl-setp{ color:#a084ff; }
.mtl-mp  { color:#ff6450; }
.mtl-track--full .mtl-dot:nth-of-type(9) { transition-delay:.65s; }
.mtl-track--full .mtl-dot:nth-of-type(10){ transition-delay:.8s; }
.mtl-track--full .mtl-dot:nth-of-type(11){ transition-delay:.95s; }
.mtl-track--full .mtl-dot:nth-of-type(12){ transition-delay:1.1s; }
.mtl-track--full .mtl-dot:nth-of-type(13){ transition-delay:1.25s; }
.mtl-track--full .mtl-dot:nth-of-type(14){ transition-delay:1.4s; }
.mtl-track--full .mtl-dot:nth-of-type(15){ transition-delay:1.55s; }
.mtl-track--full .mtl-dot:nth-of-type(16){ transition-delay:1.7s; }
.match-timeline.in .mtl-dot{ transform:translate(-50%,-50%) scale(1); }
.mtl-dur{
  font-size:.8rem; font-weight:700; letter-spacing:.02em;
  color:var(--mut-2); min-width:44px; flex:none;
  font-variant-numeric:tabular-nums;
}
.mtl-cut{
  margin:22px auto 0; max-width:54ch;
  font-size:.95rem; color:var(--mut); line-height:1.55; text-align:center;
}
.mtl-cut strong{ color:var(--amber); font-weight:600; }
.mtl-legend{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:6px 20px; margin-top:18px;
}
.mtl-leg{
  font-size:.64rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mut-2);
  display:flex; align-items:center; gap:6px;
}
.mtl-leg::before{
  content:''; width:7px; height:7px; border-radius:50%;
  background:currentColor; flex:none;
}
.mtl-leg.mtl-bp::before  { background:var(--amber); }
.mtl-leg.mtl-ace::before { background:var(--cyan); }
.mtl-leg.mtl-win::before { background:#34d399; }
.mtl-leg.mtl-setp::before{ background:#a084ff; }
.mtl-leg.mtl-mp::before  { background:#ff6450; }
@media (prefers-reduced-motion:reduce){
  .mtl-track--full::before{ transform:scaleX(1); }
  .mtl-dot{ transform:translate(-50%,-50%) scale(1); }
  .mtl-clip{ transform:translate(-50%,-50%) scaleX(1); }
}
@media (max-width:600px){
  .mtl-label{ min-width:72px; font-size:.62rem; letter-spacing:.06em; }
  .mtl-legend{ gap:5px 14px; }
  .mtl-cut{ font-size:.86rem; }
  .mtl-clip{ width:28px; height:16px; }
}

/* ── time compression widget ─────────────────────────────── */
.time-cmp{ margin-top:28px; display:flex; flex-direction:column; gap:9px; }
.tc-item{ display:flex; align-items:center; gap:12px; }
.tc-t{
  font-size:.78rem; font-weight:700; letter-spacing:.04em;
  color:var(--mut-2); min-width:52px; flex:none;
  font-variant-numeric:tabular-nums;
}
.tc-t--hi{ color:var(--amber); }
.tc-track{
  flex:1; height:4px; border-radius:2px;
  background:rgba(255,255,255,.06); overflow:hidden; position:relative;
}
.tc-fill{
  display:block; position:absolute; left:0; top:0; bottom:0;
  border-radius:2px; transform-origin:left; transform:scaleX(0);
}
.tc-fill--before{ width:100%; background:rgba(255,255,255,.2); }
.tc-fill--after{ width:16.7%; background:var(--amber); box-shadow:0 0 10px 2px rgba(255,210,63,.5); }
.tc-chip{
  font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 9px; border-radius:5px; white-space:nowrap; flex:none;
  background:rgba(255,210,63,.1); color:var(--amber); border:1px solid rgba(255,210,63,.22);
  opacity:0;
}
@keyframes tcFillIn{ to{ transform:scaleX(1); } }
@keyframes tcChipIn{ to{ opacity:1; } }
.time-cmp.in .tc-fill--before{ animation:tcFillIn 1.1s .1s var(--e-soft) forwards; }
.time-cmp.in .tc-fill--after{ animation:tcFillIn .75s .85s var(--e-soft) forwards; }
.time-cmp.in .tc-chip{ animation:tcChipIn .4s 1.5s ease forwards; }
@media (prefers-reduced-motion:reduce){
  .tc-fill{ transform:scaleX(1); }
  .tc-chip{ opacity:1; }
}

/* ── responsive ──────────────────────────────────────────── */
@media (max-width:900px){
  body{ font-size:16px; }
  .moment-grid,.moment-grid-rev{ grid-template-columns:1fr; gap:32px; }
  .moment-grid-rev .moment-copy{ order:1; } .moment-grid-rev .moment-media{ order:2; }
  .moment-copy p,.moment-copy.center p{ max-width:none; }
  .hero{ padding:112px 0 56px; }
  .hero-sub{ max-width:46ch; }
  .hero-stage::before{ filter:blur(34px); }
}
@media (max-width:768px){
  /* DOM order is adv-then-simple → matches mobile reading priority, so just reset desktop order */
  .dm-grid{ grid-template-columns:1fr; gap:14px; }
  .dm-block--simple,.dm-block--adv{ order:initial; }
  .dm-block{ padding:24px; }
  .dm-sub,.dm-p{ max-width:none; }
  .dm-badge{ top:12px; right:12px; }
}
@media (max-width:560px){
  .nav-row{ height:56px; }
  .nav .dl-os{ display:none; }
  .hero{ padding:96px 0 48px; }
  .hero-title{ letter-spacing:-.038em; }
  .btn-lg{ width:100%; justify-content:center; }
  .hero .cta-row{ flex-direction:column; align-items:center; width:100%; }
  .hero-cta .btn{ max-width:340px; }
  .moment{ padding:72px 0; }
  .scoreboard{ width:clamp(190px,44%,300px); }
  .edit-controls{ flex-wrap:wrap; bottom:48px; }
  .dm-section{ padding:64px 0; }
  .dm-clips{ gap:5px; }
  .dm-clip .hl-tag{ font-size:8.5px; padding:2px 3px; }
}
@media (max-width:480px){ .ba-tag{ display:none; } }

/* ── two modes (split asymétrique 40/60) ──────────────────── */
.dm-section{ padding:clamp(80px,12vw,148px) 0; border-top:1px solid var(--line); }
.dm-head{ text-align:center; max-width:760px; margin:0 auto clamp(44px,5.6vw,72px); }
.dm-head .kicker{ justify-content:center; }
.dm-head .kicker::before{ display:none; }
.dm-head h2{ margin-top:14px; font-size:clamp(1.7rem,3.4vw,2.7rem); }

.dm-grid{ display:grid; grid-template-columns:minmax(0,40fr) minmax(0,60fr); gap:clamp(14px,1.8vw,22px); align-items:stretch; }
.dm-block{ position:relative; padding:clamp(26px,3vw,40px); border-radius:18px; border:1px solid var(--line);
  background:rgba(255,255,255,.025); display:flex; flex-direction:column; gap:16px;
  transition:border-color .28s var(--e), transform .28s var(--e); }
.dm-block--simple{ order:1; }
.dm-block--adv{ order:2;
  background:
    linear-gradient(180deg,rgba(255,210,63,.055) 0%,rgba(255,210,63,.012) 50%,rgba(255,210,63,.025) 100%),
    rgba(255,255,255,.015);
  border-color:rgba(255,210,63,.28);
  box-shadow:0 0 0 1px rgba(255,210,63,.04), 0 28px 70px -36px rgba(255,210,63,.22); }
.dm-block--adv:hover{ border-color:rgba(255,210,63,.46); }
.dm-block--simple:hover{ border-color:var(--line-2); }

.dm-badge{ position:absolute; top:14px; right:14px; z-index:2;
  font-size:9.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  padding:5px 9px 6px; border-radius:5px; background:var(--amber); color:#0a0c10;
  box-shadow:0 5px 16px -4px rgba(255,210,63,.5); }

.dm-title{ font-size:clamp(1.18rem,1.9vw,1.5rem); font-weight:700; color:var(--ink); letter-spacing:-.025em; }
.dm-sub{ font-size:1rem; color:var(--ink-2); line-height:1.5; margin-top:-6px; max-width:38ch; }
.dm-p{ font-size:.97rem; color:var(--mut); line-height:1.62; max-width:46ch; }
.dm-p strong{ font-weight:700; color:var(--ink-2); }
.dm-foot{ margin-top:auto; padding-top:6px; font-size:.84rem; font-style:italic; color:var(--mut-2); line-height:1.5; }
.dm-block--adv .dm-foot{ color:rgba(255,210,63,.82); font-style:italic; }

/* mini-timelines */
.dm-timeline{ padding:8px 0 2px; }
.dm-bar{ display:block; height:13px; border-radius:7px;
  background:linear-gradient(90deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.09) 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset; }

.dm-clips{ display:flex; gap:6px; align-items:stretch; }
.dm-clip{ display:flex; flex-direction:column; gap:7px; flex:1; min-width:0; }
.dm-clip .hl-tag{ font-size:9px; padding:3px 4px; }
.dm-clip-bar{ display:block; height:13px; border-radius:7px; background:rgba(255,255,255,.14);
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset; }
.dm-clip:has(.hl-bp) .dm-clip-bar{ background:linear-gradient(180deg,rgba(255,210,63,.46),rgba(255,210,63,.18)); }
.dm-clip:has(.hl-ace) .dm-clip-bar{ background:linear-gradient(180deg,rgba(70,230,216,.46),rgba(70,230,216,.18)); }
.dm-clip:has(.hl-win) .dm-clip-bar{ background:linear-gradient(180deg,rgba(52,211,153,.46),rgba(52,211,153,.18)); }
.dm-clip:has(.hl-setp) .dm-clip-bar{ background:linear-gradient(180deg,rgba(160,132,255,.46),rgba(160,132,255,.18)); }
.dm-clip:has(.hl-mp) .dm-clip-bar{ background:linear-gradient(180deg,rgba(255,100,80,.46),rgba(255,100,80,.18)); }

.dm-label{ display:block; margin-top:12px; font-size:.84rem; color:var(--mut-2); font-variant-numeric:tabular-nums; letter-spacing:.005em; }


/* ── faq ─────────────────────────────────────────────────── */
.faq{ padding:clamp(80px,13vw,168px) 0; }
.faq-head{ text-align:center; margin-bottom:clamp(36px,5vw,56px); }
.faq-head .kicker{ margin-bottom:18px; }
.faq-head h2{ margin:0 auto; max-width:680px; }
.faq-list{ max-width:760px; margin:0 auto; border-top:1px solid var(--line); }

.faq-item{ border-bottom:1px solid var(--line); }
.faq-item > summary{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:22px 4px; cursor:pointer; list-style:none;
  font-weight:600; font-size:1.04rem; color:var(--ink-2); letter-spacing:-.012em;
  transition:color .15s var(--e);
}
.faq-item > summary::-webkit-details-marker{ display:none; }
.faq-item > summary:hover{ color:var(--ink); }
.faq-item[open] > summary{ color:var(--ink); }

.faq-chev{ flex:none; width:14px; height:14px; position:relative; }
.faq-chev::before, .faq-chev::after{
  content:""; position:absolute; top:50%; left:50%; background:var(--mut-2);
  border-radius:2px;
}
.faq-chev::before{ width:14px; height:1.6px; transform:translate(-50%,-50%); }
.faq-chev::after { width:1.6px; height:14px; transform:translate(-50%,-50%); transition:transform .25s var(--e); }
.faq-item[open] .faq-chev::after{ transform:translate(-50%,-50%) scaleY(0); }
.faq-item > summary:hover .faq-chev::before,
.faq-item > summary:hover .faq-chev::after{ background:var(--ink-2); }

.faq-a{ padding:0 4px; overflow:hidden; transition:height .28s var(--e); }
.faq-a > p{ padding-bottom:22px; color:var(--mut); font-size:.98rem; line-height:1.65; max-width:62ch; }


/* ════════════════════════ PRICING ════════════════════════ */
.pricing{ padding:104px 0 80px; position:relative; }
.pricing-head{ margin-bottom:48px; }
.pricing-head.center{ text-align:center; max-width:760px; margin-left:auto; margin-right:auto; }
.pricing-head .kicker{ margin-bottom:18px; }
.pricing-head h2{ font-size:clamp(2rem,4.6vw,3.05rem); margin:0 auto 18px; max-width:22ch; }
.pricing-lede{ max-width:54ch; margin:0 auto; font-size:1.04rem; color:var(--mut); line-height:1.65; }
.pricing-note.center{ text-align:center; }

.pricing-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:880px; margin:0 auto; }
@media (max-width:720px){ .pricing-grid{ grid-template-columns:1fr; } }

.pricing-card{
  position:relative; display:flex; flex-direction:column;
  padding:34px 28px 26px; border-radius:18px;
  background:rgba(255,255,255,.025); border:1px solid var(--line);
  transition:transform .35s var(--e-soft), border-color .35s var(--e-soft), background .35s var(--e-soft);
}
.pricing-card:hover{ transform:translateY(-2px); border-color:var(--line-2); }
.pricing-card--yearly{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,210,63,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,210,63,.04), rgba(255,255,255,.02));
  border-color:rgba(255,210,63,.32);
}
.pricing-card--yearly:hover{ border-color:rgba(255,210,63,.55); }

.pricing-badge{
  position:absolute; top:14px; right:14px;
  font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px; background:var(--amber); color:#0a0c10;
  box-shadow:0 4px 16px rgba(255,210,63,.32);
}

.pricing-name{
  font-size:.8rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--mut-2); margin:0 0 14px;
}
.pricing-price{ display:flex; align-items:baseline; gap:6px; margin:0 0 10px; }
.pricing-price strong{
  font-size:clamp(2.4rem,4vw,2.9rem); font-weight:700; letter-spacing:-.025em; color:var(--ink);
}
.pricing-per{ font-size:1rem; color:var(--mut); }
.pricing-equiv{ font-size:.92rem; color:var(--mut); margin:0 0 24px; line-height:1.5; }

.pricing-cta{ width:100%; justify-content:center; margin-bottom:14px; }
.pricing-foot{ font-size:.78rem; color:var(--mut-2); line-height:1.55; margin:0; }
.pricing-foot sup{ font-size:.7em; vertical-align:.4em; }

.pricing-note{ margin-top:36px; font-size:.85rem; color:var(--mut-2); }


/* ════════════════════════ DOWNLOAD ════════════════════════
   /download.html — two stacked OS cards. The card matching the visitor's
   OS (via `<html class="win">` from the inline detection script) is
   moved to the top, gets amber-gradient styling and a "Recommandé"
   badge. The other card stays right below it, fully functional but
   visually de-emphasized. No JS swap = no flash on Windows.

   Visit order convention:
   - default (no .win class)      = macOS visitor → mac card featured
   - html.win (Windows visitor)   = win card featured
   - JS disabled / Linux / mobile = macOS visitor default (same as JS off) */

.dl-page main{ padding-top:96px; min-height:calc(100vh - 220px); }

.dl-section{ padding:48px 0 96px; }
.dl-head{ text-align:center; max-width:680px; margin:0 auto 56px; }
.dl-head .kicker{ justify-content:center; margin-bottom:18px; }
.dl-head .kicker::before{ display:none; }
.dl-title{
  font-size:clamp(2.2rem,4.8vw,3.2rem); font-weight:600; letter-spacing:-.035em;
  line-height:1.06; margin:0 0 18px;
  background:linear-gradient(180deg,#fff 0%,#cdd1da 130%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.dl-lede{ max-width:54ch; margin:0 auto; font-size:1.04rem; color:var(--mut); line-height:1.65; }

.dl-cards{ display:flex; flex-direction:column; gap:20px; max-width:640px; margin:0 auto; }

.dl-card{
  position:relative; padding:30px 32px 26px;
  border-radius:20px; background:rgba(255,255,255,.025); border:1px solid var(--line);
  transition:padding .35s var(--e-soft), background .35s var(--e-soft), border-color .35s var(--e-soft);
}
.dl-card--mac{ order:1; }
.dl-card--win{ order:2; }
html.win .dl-card--mac{ order:2; }
html.win .dl-card--win{ order:1; }

/* Featured card — same amber-gradient treatment as pricing-card--yearly. */
html:not(.win) .dl-card--mac,
html.win .dl-card--win{
  padding:40px 36px 30px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,210,63,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,210,63,.04), rgba(255,255,255,.02));
  border-color:rgba(255,210,63,.32);
}

.dl-recommend{
  display:none; position:absolute; top:14px; right:14px;
  font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px;
  background:var(--amber); color:#0a0c10;
  box-shadow:0 4px 16px rgba(255,210,63,.32);
}
html:not(.win) .dl-card--mac .dl-recommend,
html.win .dl-card--win .dl-recommend{ display:inline-flex; }

.dl-card-head{ display:flex; align-items:center; gap:18px; margin-bottom:24px; }
.dl-os-icon{ width:46px; height:46px; flex:none; color:var(--ink); }
.dl-os-icon--apple{ fill:currentColor; }
.dl-card-titles{ min-width:0; }
.dl-os-name{
  font-size:1.45rem; font-weight:600; color:var(--ink);
  letter-spacing:-.02em; line-height:1.1; margin:0 0 4px;
  display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.dl-os-req{ font-size:.92rem; color:var(--mut); line-height:1.5; margin:0; }

.dl-cta{ width:100%; justify-content:center; padding:16px 26px; font-size:1.02rem; }
.dl-file-info{ margin-top:14px; font-size:.82rem; color:var(--mut-2); text-align:center; line-height:1.5; }
.dl-file-info code{
  font-family:"SF Mono",Menlo,Consolas,monospace; font-size:.92em;
  background:rgba(255,255,255,.05); padding:2px 6px; border-radius:4px; color:var(--ink-2);
}

/* SmartScreen explanation block (Windows card). Cyan-tinted to read as
   "important context", not "error". Always visible — applies in both
   featured and alt states, because the warning applies regardless. */
.dl-note{
  margin-top:22px; padding:16px 18px;
  border-radius:12px;
  background:rgba(70,230,216,.05);
  border:1px solid rgba(70,230,216,.18);
}
.dl-note-title{
  font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--cyan); margin:0 0 10px;
}
.dl-note p{ font-size:.9rem; color:var(--ink-2); line-height:1.6; margin:0 0 10px; }
.dl-note p:last-child{ margin-bottom:0; }
.dl-note strong{ color:var(--ink); font-weight:600; }
.dl-note-steps{
  margin:6px 0 10px; padding-left:22px;
  font-size:.9rem; color:var(--ink-2); line-height:1.7;
}
.dl-note-steps li{ margin-bottom:4px; }
.dl-note-foot{ font-size:.82rem; color:var(--mut); margin-top:6px; }

.dl-foot{
  text-align:center; margin-top:48px; padding:0 16px;
  font-size:.92rem; color:var(--mut-2); line-height:1.8;
}
.dl-foot a{
  color:var(--ink-2); text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:rgba(255,255,255,.25); transition:text-decoration-color .2s, color .2s;
}
.dl-foot a:hover{ text-decoration-color:rgba(255,255,255,.6); color:var(--ink); }

/* Beta tag — now lives on dark card titles (was originally designed for
   amber buttons; that usage went away with the per-CTA OS detection). */
.beta-tag{
  display:inline-flex; align-items:center; padding:3px 8px;
  font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  border-radius:999px; line-height:1;
  background:rgba(70,230,216,.16); color:var(--cyan);
  border:1px solid rgba(70,230,216,.32);
}

@media (max-width:600px){
  .dl-section{ padding:24px 0 64px; }
  .dl-head{ margin-bottom:36px; }
  .dl-card{ padding:24px 22px 22px; border-radius:16px; }
  html:not(.win) .dl-card--mac,
  html.win .dl-card--win{ padding:30px 24px 26px; }
  .dl-card-head{ gap:14px; margin-bottom:18px; }
  .dl-os-icon{ width:38px; height:38px; }
  .dl-os-name{ font-size:1.2rem; }
  .dl-recommend{ position:static; align-self:flex-start; display:none; margin-bottom:14px; }
  html:not(.win) .dl-card--mac .dl-recommend,
  html.win .dl-card--win .dl-recommend{ display:inline-flex; }
  .dl-note{ padding:14px 16px; margin-top:18px; }
}

/* ── reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  html.js .reveal{ opacity:1; transform:none; }
}