/* ==========================================================================
   NIA CHESS — website stylesheet · v4
   "Walnut & cream" — editorial serif, soft layered surfaces, one gold accent.
   Light is the default. Dark mode via <html data-theme="dark">.
   ========================================================================== */

:root{
  /* --- LIGHT (default) --- */
  --paper:#fbf8f1;
  --paper-2:#f3eee2;
  --ink:#1b1712;
  --ink-2:#3d352b;
  --muted:#6b6255;
  --dim:#8f8677;
  --gold:#a8751a;
  --gold-bright:#dfb14e;
  --gold-deep:#7a530f;
  --gold-wash:rgba(223,177,78,.16);
  --raise:#ffffff;
  --raise-2:#f5f0e5;
  --edge:#e6dece;
  --line:rgba(27,23,18,.10);
  --green:#4d8a3b;
  --green-bright:#8cc46a;
  --green-deep:#35652a;
  --red:#c0392f;
  --blue:#3b6fa8;
  --walnut:#2b2016;
  --walnut-2:#3b2c1e;
  --walnut-ink:#f6efe0;
  --walnut-muted:#c9bba3;
  --shadow:0 1px 2px rgba(40,30,10,.05), 0 10px 30px -14px rgba(40,30,10,.22);
  --shadow-lift:0 2px 4px rgba(40,30,10,.05), 0 30px 60px -22px rgba(40,30,10,.32);
  --board-l:#f0d9b5; --board-d:#b58863;
  --us-wash:#eef6e8; --us-head:#dff0d4; --us-focus:#e2f3d6; --us-focus-head:#cfe9bd;

  --num:"Outfit","Inter","Avenir Next",-apple-system,system-ui,sans-serif;
  --display:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --serif:var(--display);
  --brand:"Inter","Futura","Avenir Next",-apple-system,system-ui,sans-serif;
  --ui:"Inter","Helvetica Neue",-apple-system,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
}

:root[data-theme="dark"]{
  --paper:#0e0c0a;
  --paper-2:#151210;
  --ink:#f3ece0;
  --ink-2:#ded5c4;
  --muted:#a89b86;
  --dim:#8a8070;
  --gold:#dfb14e;
  --gold-bright:#ecc468;
  --gold-deep:#8f6a1e;
  --gold-wash:rgba(223,177,78,.14);
  --raise:#1b1712;
  --raise-2:#241e18;
  --edge:#2d261e;
  --line:rgba(243,236,224,.12);
  --green:#8cc46a;
  --green-bright:#a8d68a;
  --green-deep:#4f7a45;
  --red:#e35d5b;
  --blue:#749bbf;
  --walnut:#1b1712;
  --walnut-2:#241e18;
  --walnut-ink:#f3ece0;
  --walnut-muted:#a89b86;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px -14px rgba(0,0,0,.7);
  --shadow-lift:0 2px 4px rgba(0,0,0,.35), 0 30px 60px -22px rgba(0,0,0,.85);
  --us-wash:#16200f; --us-head:#1d2c13; --us-focus:#1f2f14; --us-focus-head:#294020;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--ui); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .25s ease, color .25s ease;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.wrap{ width:min(1180px, calc(100% - 32px)); margin:0 auto; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:600; line-height:1.05; margin:0; color:var(--ink);
  font-variation-settings:"opsz" 72, "SOFT" 30; }
h1{ font-size:clamp(40px,5.8vw,68px); letter-spacing:-.022em; }
h2{ font-size:clamp(30px,4vw,46px); letter-spacing:-.018em; }
h3{ font-size:21px; letter-spacing:-.01em; font-variation-settings:"opsz" 24; }
p{ margin:0 0 14px; }
p.lead{ font-size:18.5px; color:var(--muted); font-weight:450; max-width:60ch; line-height:1.6; }
.sub{ color:var(--muted); font-weight:500; }
section{ padding:88px 0; }
section.tight{ padding:44px 0; }
section.band{ background:var(--paper-2); }
.center{ text-align:center; }
.center .lead{ margin-left:auto; margin-right:auto; }
.center h2{ max-width:26ch; margin-left:auto; margin-right:auto; }
.sec-head{ margin-bottom:44px; }

.eb{ display:inline-flex; align-items:center; gap:10px; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
     color:var(--gold); font-weight:700; margin-bottom:14px; }
.eb:before{ content:''; width:22px; height:2px; background:var(--gold-bright); border-radius:2px; }
.center .eb:after{ content:''; width:22px; height:2px; background:var(--gold-bright); border-radius:2px; }
em.gold{ font-style:normal; color:var(--gold); }

/* ---------- header ---------- */
.top{ position:sticky; top:0; z-index:40; padding:12px 0; pointer-events:none; }
.top .wrap{ pointer-events:auto; display:flex; align-items:center; gap:8px; height:60px; padding:0 8px 0 18px;
  border-radius:999px; background:color-mix(in srgb, var(--raise) 82%, transparent);
  backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:var(--shadow), 0 0 0 1px var(--line); }
.logo{ display:flex; align-items:center; gap:10px; font-family:var(--brand); font-weight:800;
       letter-spacing:.14em; font-size:15.5px; color:var(--ink); flex:0 0 auto; }
.logo img{ height:30px; width:auto; }
:root[data-theme="dark"] .logo img{ filter:invert(50%) sepia(100%) saturate(167%) hue-rotate(3deg) brightness(100%) contrast(161%); }
nav.main{ margin-left:auto; display:flex; gap:2px; }
nav.main a{ padding:9px 13px; border-radius:999px; font-weight:600; font-size:14px; color:var(--muted); transition:color .15s, background .15s; }
nav.main a:hover{ color:var(--ink); }
nav.main a.on{ color:var(--ink); background:var(--raise-2); }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 24px;
      border-radius:999px; border:none; font:inherit; font-weight:700; font-size:15px; cursor:pointer;
      background:var(--gold-bright); color:#231a08; letter-spacing:-.005em;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 8px 18px -8px rgba(168,117,26,.6);
      transition:transform .15s cubic-bezier(.2,.9,.3,1.3), box-shadow .15s, background .15s; }
.btn:hover{ transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 14px 26px -10px rgba(168,117,26,.7); }
.btn:active{ transform:translateY(0); }
.btn.ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line); }
.btn.ghost:hover{ box-shadow:inset 0 0 0 1.5px var(--ink); }
.btn.dark{ background:var(--ink); color:var(--paper); box-shadow:0 8px 18px -8px rgba(0,0,0,.5); }
:root[data-theme="dark"] .btn.dark{ background:var(--ink); color:var(--paper); }
.btn.green{ background:var(--green-bright); color:#132009; box-shadow:0 8px 18px -8px rgba(77,138,59,.6); }
.btn.sm{ padding:9px 16px; font-size:13.5px; }
.btn.lg{ padding:17px 32px; font-size:16.5px; }
.btn svg{ width:18px; height:18px; }

/* theme toggle */
.themebtn{ flex:0 0 auto; width:42px; height:42px; border-radius:50%; border:none; cursor:pointer;
  background:transparent; color:var(--ink); display:inline-flex; align-items:center; justify-content:center; padding:0;
  transition:background .15s; }
.themebtn:hover{ background:var(--raise-2); }
.themebtn svg{ width:20px; height:20px; }
.themebtn .moon{ display:none; }
:root[data-theme="dark"] .themebtn .moon{ display:block; }
:root[data-theme="dark"] .themebtn .sun{ display:none; }

/* mobile menu */
.menubtn{ display:none; width:42px; height:42px; border-radius:50%; border:none; background:transparent; color:var(--ink);
  cursor:pointer; align-items:center; justify-content:center; padding:0; }
.menubtn svg{ width:22px; height:22px; }
.menubtn .x{ display:none; }
.menu-open .menubtn .x{ display:block; } .menu-open .menubtn .bars{ display:none; }
@media (max-width:860px){
  .top .wrap{ height:56px; padding:0 6px 0 14px; }
  .logo{ font-size:14px; } .logo img{ height:26px; }
  .menubtn{ display:inline-flex; }
  .top .btn.sm{ display:none; }
  nav.main{ position:fixed; left:12px; right:12px; top:78px; flex-direction:column; gap:4px; padding:12px;
    border-radius:24px; background:var(--raise); box-shadow:var(--shadow-lift), 0 0 0 1px var(--line);
    opacity:0; transform:translateY(-8px) scale(.98); pointer-events:none;
    transition:opacity .18s ease, transform .22s cubic-bezier(.2,.9,.3,1.3); }
  .menu-open nav.main{ opacity:1; transform:none; pointer-events:auto; }
  nav.main a{ padding:13px 16px; font-size:16px; border-radius:14px; }
  nav.main a.cta{ margin-top:6px; background:var(--gold-bright); color:#231a08; text-align:center; font-weight:700; }
  .menu-open .themebtn{ }
}
@media (min-width:861px){ nav.main a.cta{ display:none; } }

/* ---------- cards & grids ---------- */
.card{ background:var(--raise); border-radius:22px; padding:26px; box-shadow:var(--shadow), 0 0 0 1px var(--line); }
.card.gold{ box-shadow:var(--shadow-lift), 0 0 0 2px var(--gold-bright); }
.card.line{ box-shadow:0 0 0 1px var(--line); background:color-mix(in srgb, var(--raise) 60%, transparent); }
.card p{ color:var(--muted); font-weight:450; margin:8px 0 0; font-size:15.5px; }
.card h3{ margin-top:2px; }
.grid{ display:grid; gap:18px; }
.grid.c2{ grid-template-columns:repeat(2,1fr); }
.grid.c3{ grid-template-columns:repeat(3,1fr); }
.grid.c4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:960px){ .grid.c3,.grid.c4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .grid.c2,.grid.c3,.grid.c4{ grid-template-columns:1fr; } }

.ic{ width:48px; height:48px; border-radius:14px; background:var(--gold-wash); display:flex;
     align-items:center; justify-content:center; margin-bottom:16px; }
.ic svg{ width:25px; height:25px; stroke:var(--gold); }
.pill{ display:inline-block; padding:5px 12px; border-radius:999px; font-size:11px; font-weight:700;
       letter-spacing:.08em; text-transform:uppercase; background:var(--gold-wash); color:var(--gold); }

/* ---------- phone frames ---------- */
.phone{ width:100%; max-width:330px; border-radius:30px; padding:10px; background:#1c1813;
        box-shadow:var(--shadow-lift), 0 0 0 1px #3a3128, inset 0 0 0 1px rgba(255,255,255,.06); }
.phone img{ border-radius:21px; width:100%; }
.phone.big{ max-width:400px; }

/* ==========================================================================
   HERO — walnut panel, copy left, tablet floating right with move badges
   ========================================================================== */
.hero{ padding:14px 0 0; }
.hero-panel{ position:relative; width:min(1240px, calc(100% - 24px)); margin:0 auto; border-radius:36px; overflow:hidden;
  background:radial-gradient(120% 90% at 100% 0%, var(--walnut-2), var(--walnut) 60%);
  color:var(--walnut-ink); box-shadow:var(--shadow-lift); }
.hero-panel:before{ content:''; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background:
    radial-gradient(circle at 12% 20%, rgba(223,177,78,.22), transparent 42%),
    radial-gradient(circle at 92% 80%, rgba(140,196,106,.12), transparent 40%); }
.hero-panel:after{ content:''; position:absolute; inset:0; pointer-events:none; opacity:.05;
  background-image:linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%),
                   linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%);
  background-size:64px 64px; background-position:0 0, 32px 32px;
  -webkit-mask:radial-gradient(circle at 85% 40%, #000, transparent 55%); mask:radial-gradient(circle at 85% 40%, #000, transparent 55%); }
.hero-grid{ position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:32px;
  align-items:center; padding:clamp(36px,5vw,72px) clamp(24px,5vw,72px) 0; }
.hero-copy{ padding-bottom:clamp(36px,5vw,72px); max-width:600px; }
.hero h1{ color:var(--walnut-ink); margin-bottom:18px; }
.hero h1 em{ font-style:normal; color:var(--gold-bright); }
.hero .lead{ color:var(--walnut-muted); font-size:19px; }
.hero .eb{ color:var(--gold-bright); }
.hero .eb:before{ background:var(--gold-bright); }

/* the one Coach Ada line */
.ada-one{ position:relative; display:flex; gap:14px; align-items:flex-start; margin-top:28px;
  padding:16px 20px 17px 16px; border-radius:20px; background:rgba(255,255,255,.06);
  box-shadow:0 0 0 1px rgba(255,255,255,.12); max-width:540px;
  overflow:hidden; cursor:pointer; transition:transform .18s cubic-bezier(.2,.9,.3,1.3), background .18s; }
.ada-one:hover, .ada-one:focus-visible{ transform:translateY(-3px); background:rgba(255,255,255,.09); }
.ada-one .av, .ada-one .body{ transition:opacity .22s ease, filter .22s ease; }
.ada-one:hover .av, .ada-one:hover .body,
.ada-one:focus-visible .av, .ada-one:focus-visible .body{ opacity:.14; filter:blur(1.5px); }
.ada-more{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0;
  transition:opacity .22s ease; }
.ada-one:hover .ada-more, .ada-one:focus-visible .ada-more{ opacity:1; }
.ada-more-in{ display:inline-flex; align-items:center; gap:10px; padding:12px 22px; border-radius:999px;
  background:var(--gold-bright); color:#231a08; font-weight:700; font-size:15px;
  transform:translateY(6px) scale(.96); transition:transform .26s cubic-bezier(.2,.9,.3,1.5); }
.ada-one:hover .ada-more-in, .ada-one:focus-visible .ada-more-in{ transform:none; }
.ada-more-in svg{ width:18px; height:18px; }
.ada-one .av{ display:block; width:54px; height:54px; flex:0 0 auto; border-radius:50%; overflow:hidden;
  background:var(--gold-wash); box-shadow:0 0 0 2px var(--gold-bright); }
.ada-one .av img{ width:100%; height:100%; }
.ada-one .body{ display:block; font-size:15.5px; line-height:1.5; color:var(--walnut-muted); }
.ada-one .body b{ color:var(--walnut-ink); }
.ada-one .who{ display:block; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-bright); font-weight:700; margin-bottom:6px; }

/* move-quality badges (same symbols the app uses) */
.q{ display:inline-flex; min-width:22px; height:22px; padding:0 6px; border-radius:999px; align-items:center;
  justify-content:center; font-size:11px; font-weight:800; color:#fff; margin-right:7px; vertical-align:-4px; }
.q.best{ background:#81b64c } .q.great{ background:#749bbf } .q.brill{ background:#26c2a3 }
.q.good{ background:#95b776 } .q.book{ background:#a88865 } .q.inacc{ background:#e6a817 }
.q.mist{ background:#e0842a } .q.blun{ background:#ca3431 } .q.miss{ background:#d9673e }

.hero-cta{ margin-top:30px; display:flex; flex-direction:column; gap:16px; align-items:flex-start; }
.price{ display:inline-flex; align-items:center; gap:10px; padding:7px 16px 7px 7px; border-radius:999px;
  background:rgba(255,255,255,.07); box-shadow:0 0 0 1px rgba(255,255,255,.12); font-weight:600; font-size:13.5px;
  color:var(--walnut-muted); flex-wrap:wrap; }
.price b{ background:var(--gold-bright); color:#231a08; padding:5px 12px; border-radius:999px; font-size:14px; font-weight:800; }
.price .sep{ opacity:.45; }

/* the tablet shot with floating move badges */
.hero-shot{ position:relative; align-self:center; padding:0 0 clamp(36px,5vw,72px); }
.hero-shot img.shot{ width:100%; max-width:520px; margin:0 auto; height:auto; border-radius:26px 26px 0 0;
  box-shadow:0 -10px 60px rgba(0,0,0,.45), 0 0 0 8px #14100c, 0 0 0 9px rgba(255,255,255,.12);
  transform:translateY(8px); }
.float{ position:absolute; display:inline-flex; align-items:center; gap:9px; padding:9px 14px 9px 9px; border-radius:999px;
  background:var(--raise); color:var(--ink); font-weight:700; font-size:13.5px; box-shadow:var(--shadow-lift);
  animation:floaty 6s ease-in-out infinite; white-space:nowrap; }
.float .q{ margin:0; }
.float small{ color:var(--muted); font-weight:600; margin-left:2px; }
.float.f1{ left:-4%; top:14%; animation-delay:0s; }
.float.f2{ right:-3%; top:38%; animation-delay:-2s; }
.float.f3{ left:2%; bottom:22%; animation-delay:-4s; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }
@media (max-width:1000px){
  .hero-grid{ grid-template-columns:1fr; gap:8px; padding-bottom:0; }
  .hero-copy{ padding-bottom:12px; max-width:none; }
  .hero-shot{ margin:18px auto 0; padding:0; width:min(420px,88%); }
  .hero-shot img.shot{ transform:none; }
  .float{ font-size:12.5px; }
  .float.f1{ left:-6%; top:6%; } .float.f2{ right:-6%; top:30%; } .float.f3{ left:-4%; bottom:18%; }
}
@media (max-width:560px){ .float.f3{ display:none; } .float{ padding:7px 12px 7px 7px; } .hero-panel:after{ opacity:.03; } }

/* proof strip under the hero */
.proof{ width:min(1180px, calc(100% - 32px)); margin:0 auto; padding:34px 0 0; display:flex; flex-wrap:wrap;
  justify-content:center; gap:14px 36px; color:var(--muted); font-weight:600; font-size:15px; }
.proof span b{ font-family:var(--num); font-weight:700; font-size:clamp(28px,2.6vw,34px); color:var(--ink); margin-right:9px; letter-spacing:-.02em; }
.proof span{ display:inline-flex; align-items:baseline; }
@media (max-width:600px){ .proof{ display:grid; grid-template-columns:1fr 1fr; gap:14px 10px; text-align:left; }
  .proof span{ flex-direction:column; align-items:flex-start; gap:2px; } .proof span b{ font-size:30px; } }

/* app store buttons */
.stores{ display:flex; gap:12px; flex-wrap:wrap; }
.storeimg{ display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; border-radius:14px;
  background:#000; box-shadow:0 0 0 1px rgba(255,255,255,.22), 0 10px 22px -10px rgba(0,0,0,.6); transition:transform .15s; }
.storeimg:hover{ transform:translateY(-2px); }
.storeimg .badge{ height:46px; width:auto; display:block; }
.hero-cta .storeimg .badge, .plan .storeimg .badge, .pricecard .storeimg .badge{ height:54px; }
.storeimg{ background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.08), 0 10px 22px -10px rgba(0,0,0,.35); }
.hero .storeimg{ background:#000; box-shadow:0 0 0 1px rgba(255,255,255,.25), 0 10px 22px -10px rgba(0,0,0,.8); }
@media (max-width:520px){ .storeimg .badge{ height:40px; }
  .hero-cta .storeimg .badge, .plan .storeimg .badge, .pricecard .storeimg .badge{ height:46px; } }

.offline-facts{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:820px){ .offline-facts{ grid-template-columns:repeat(3,1fr) !important; } }
@media (max-width:520px){ .offline-facts{ grid-template-columns:repeat(2,1fr) !important; } }
.fact{ background:var(--raise); border-radius:18px; padding:22px 14px; box-shadow:0 0 0 1px var(--line); text-align:center; }
.fact b{ display:block; font-family:var(--num); font-weight:800; font-size:clamp(26px,3.2vw,38px); color:var(--ink); line-height:1; }
.fact span{ display:block; margin-top:8px; font-size:12px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); }

/* ==========================================================================
   BOTS gallery
   ========================================================================== */
.botwrap{ display:grid; grid-template-columns:1fr 400px; gap:30px; align-items:start; }
@media (max-width:1040px){ .botwrap{ grid-template-columns:1fr; } }
.botgrid{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
@media (max-width:1040px){ .botgrid{ grid-template-columns:repeat(6,1fr); } }
@media (max-width:760px){ .botgrid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:460px){ .botgrid{ grid-template-columns:repeat(3,1fr); gap:8px; } }
.bot{ position:relative; text-align:center; padding:14px 6px 12px; border-radius:20px; background:var(--raise);
  box-shadow:0 0 0 1px var(--line); cursor:pointer; border:2px solid transparent; font-family:inherit; color:inherit;
  transition:transform .16s cubic-bezier(.2,.9,.3,1.3), box-shadow .16s, border-color .16s; }
.bot:hover{ transform:translateY(-6px) scale(1.04); box-shadow:var(--shadow-lift); z-index:2; }
.bot.on{ border-color:var(--gold-bright); transform:translateY(-4px); box-shadow:var(--shadow); }
.bot .av{ width:62px; height:62px; margin:0 auto; border-radius:50%; background:var(--tint,var(--gold-wash));
  display:flex; align-items:center; justify-content:center; overflow:hidden; }
.bot .av img{ width:58px; height:58px; }
.bot b{ display:block; margin-top:8px; font-size:13px; line-height:1.2; }
.bot small{ display:block; color:var(--gold); font-weight:700; font-size:11.5px; margin-top:2px; }
.bot .crown{ position:absolute; top:-9px; right:-4px; font-size:17px; color:var(--gold); }

.botcard{ position:sticky; top:96px; background:var(--raise); border-radius:26px; padding:28px;
  box-shadow:var(--shadow-lift), 0 0 0 1px var(--line); }
.botcard .head{ display:flex; align-items:center; gap:16px; }
.botcard .bigav{ width:96px; height:96px; flex:0 0 auto; border-radius:50%; overflow:hidden;
  background:var(--tint,var(--gold-wash)); box-shadow:0 0 0 3px var(--gold-bright); }
.botcard .bigav img{ width:100%; height:100%; }
.botcard h3{ font-size:28px; margin-bottom:6px; }
.botcard .meta{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.botcard .elo{ background:var(--gold-bright); color:#231a08; padding:3px 11px; border-radius:999px; font-weight:800; font-size:13px; }
.botcard .tag{ background:var(--raise-2); color:var(--muted); padding:3px 11px; border-radius:999px; font-weight:700; font-size:12px; }
.botcard .blurb{ margin-top:18px; color:var(--muted); font-weight:450; font-size:15.5px; }
.botcard .said{ margin-top:18px; padding:15px 17px; border-radius:16px; border-top-left-radius:5px;
  background:var(--raise-2); font-size:15.5px; font-weight:500; color:var(--ink); font-family:var(--display); font-style:italic;
  font-variation-settings:"opsz" 18, "SOFT" 50; }
.botcard .said .who{ display:block; font-family:var(--ui); font-style:normal; font-size:10px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--gold); font-weight:700; margin-bottom:5px; }
.botcard .bar{ margin-top:18px; }
.botcard .bar .lab{ display:flex; justify-content:space-between; font-size:11px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-bottom:6px; }
.botcard .track{ height:10px; border-radius:999px; background:var(--raise-2); overflow:hidden; }
.botcard .fill{ height:100%; border-radius:999px; background:linear-gradient(90deg,var(--green-bright),var(--gold-bright));
  transition:width .4s cubic-bezier(.2,.9,.3,1); }
.botcard .hint{ margin-top:16px; font-size:13px; color:var(--dim); font-weight:500; }

/* ==========================================================================
   TOURNAMENT BRACKET
   ========================================================================== */
.bracketbox{ position:relative; background:var(--raise); border-radius:28px; padding:clamp(20px,3vw,36px);
  box-shadow:var(--shadow-lift), 0 0 0 1px var(--line); }
.bracketbox .confetti{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:6; display:none; }
.bracket-head{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:26px; }
.cupname{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.cupdot{ width:14px; height:14px; border-radius:50%; background:var(--c); align-self:center;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--c) 24%, transparent); }
.cupname b{ font-family:var(--display); font-weight:600; font-size:24px; }
.cupname small{ color:var(--muted); font-weight:600; font-size:13.5px; }
.bracket-head .btn{ margin-left:auto; }

.bracket{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2.4vw,34px); align-items:center; }
@media (max-width:820px){ .bracket{ grid-template-columns:1fr; } }
.round{ display:flex; flex-direction:column; gap:14px; justify-content:center; }
.rlabel{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); font-weight:700;
  text-align:center; margin-bottom:2px; }
.match{ background:var(--raise-2); border-radius:16px; overflow:hidden; box-shadow:0 0 0 1px var(--line);
  opacity:.28; transform:translateY(8px); transition:opacity .45s ease, transform .45s ease; }
.match.live{ opacity:1; transform:none; }
.match.final{ box-shadow:0 0 0 2px var(--gold-bright); }
.side{ display:flex; align-items:center; gap:10px; padding:10px 13px; position:relative; }
.side + .side{ border-top:1px solid var(--line); }
.pav{ width:32px; height:32px; flex:0 0 auto; border-radius:50%; overflow:hidden; background:var(--t,var(--gold-wash));
  display:flex; align-items:center; justify-content:center; font-style:normal; font-size:11px; font-weight:800; color:var(--ink); }
.pav img{ width:32px; height:32px; }
.side .nm{ font-weight:600; font-size:14px; flex:1 1 auto; }
.side .el{ font-size:12px; font-weight:700; color:var(--dim); }
.match.live .side[data-w]{ background:color-mix(in srgb, var(--green-bright) 26%, transparent); }
.match.live .side[data-w] .nm{ font-weight:800; }
.match.live .side[data-w]:after{ content:'✓'; margin-left:8px; width:18px; height:18px; border-radius:50%;
  background:var(--green); color:#fff; font-size:11px; font-weight:900; display:flex; align-items:center; justify-content:center; }
.match.live .side:not([data-w]){ opacity:.5; }

.champ{ margin-top:8px; text-align:center; padding:20px 14px 18px; border-radius:18px;
  background:linear-gradient(160deg, var(--gold-wash), transparent); box-shadow:0 0 0 2px var(--gold-bright) inset;
  opacity:0; transform:scale(.9); transition:opacity .5s ease, transform .5s cubic-bezier(.2,.9,.3,1.4); }
.champ.live{ opacity:1; transform:none; }
.champ b{ display:block; font-family:var(--display); font-size:26px; margin-top:6px; }
.champ small{ display:block; color:var(--muted); font-weight:600; font-size:13px; margin-top:3px; }
.champ .crown{ display:flex; width:74px; height:74px; margin:0 auto; align-items:center; justify-content:center;
  border-radius:50%; background:linear-gradient(160deg,#f6dc95,#dfb14e 55%,#b8862b);
  box-shadow:0 10px 24px rgba(160,120,30,.35); font-size:0; position:relative; }
.champ .crown:before{ content:''; width:40px; height:40px; background:#4a3406;
  -webkit-mask:var(--crownmask) center/contain no-repeat; mask:var(--crownmask) center/contain no-repeat; }
:root{ --crownmask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 8l4 3 5-6 5 6 4-3-2 11H5L3 8zm2.6 13h12.8v1.6H5.6z"/></svg>'); }

.rewards{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:30px; padding-top:26px; border-top:1px solid var(--line); }
@media (max-width:860px){ .rewards{ grid-template-columns:repeat(2,1fr); } }
.rw{ text-align:center; }
.rw .medal{ display:flex; width:52px; height:52px; margin:0 auto 10px; border-radius:50%; align-items:center;
  justify-content:center; font-size:20px; font-weight:800; color:#3a2a06; }
.medal.gold{ background:linear-gradient(160deg,#f3d281,#dfb14e); }
.medal.silver{ background:linear-gradient(160deg,#eceef2,#bfc4cd); }
.medal.bronze{ background:linear-gradient(160deg,#e8b489,#c07f4d); }
.medal.pts{ background:var(--raise-2); color:var(--ink); box-shadow:0 0 0 1px var(--line); font-size:15px; }
.medal.feat{ background:linear-gradient(160deg,#b7a0e8,#8a6fd0); color:#fff; }
.rw b{ display:block; font-size:14.5px; } .rw small{ display:block; color:var(--muted); font-weight:500; font-size:12.5px; margin-top:2px; }

/* ==========================================================================
   WATCH & LEARN player — real captured frames
   ========================================================================== */
.player{ background:var(--raise); border-radius:28px; overflow:hidden; box-shadow:var(--shadow-lift), 0 0 0 1px var(--line); }
.player-bar{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; padding:18px 26px;
  border-bottom:1px solid var(--line); background:var(--raise-2); }
.player-bar .ptitle{ font-family:var(--display); font-weight:600; font-size:22px; }
.player-bar .psub{ color:var(--muted); font-weight:600; font-size:13px; margin-right:auto; }
.player-bar .eb{ margin:0; }
.player-body.frames{ display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch; }
@media (max-width:900px){ .player-body.frames{ grid-template-columns:1fr; } }
.pframe{ padding:22px; display:flex; align-items:center; justify-content:center; background:var(--raise-2); }
.pframe img{ width:100%; max-width:520px; border-radius:14px; box-shadow:var(--shadow-lift); animation:pfade .5s ease; }
@keyframes pfade{ from{ opacity:.25; transform:scale(.985) } to{ opacity:1; transform:none } }
.pside{ padding:32px 34px; display:flex; flex-direction:column; justify-content:center; gap:26px; }
.pcaption{ font-family:var(--display); font-size:clamp(20px,2vw,26px); line-height:1.4; color:var(--ink); font-weight:500;
  font-variation-settings:"opsz" 24, "SOFT" 40; }
.pcaption b{ color:var(--gold); font-weight:600; }
.pnote{ margin:14px 0 0; font-size:12.5px; color:var(--dim); font-weight:500; }
.pfoot{ padding:0; }
.ptrack{ height:6px; border-radius:999px; background:var(--raise-2); overflow:hidden; }
.pfill{ height:100%; width:0; border-radius:999px; background:var(--green); transition:width .35s linear; }
.psteps{ display:flex; gap:6px; margin-top:12px; }
.psteps i{ flex:1 1 auto; height:4px; border-radius:999px; background:var(--edge); }
.psteps i.on{ background:var(--gold); }

/* ==========================================================================
   feature rows
   ========================================================================== */
.feat{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.feat.flip .txt{ order:2; } .feat.flip .pic{ order:1; }
@media (max-width:960px){ .feat{ grid-template-columns:1fr; gap:32px; } .feat.flip .txt{ order:1; } .feat.flip .pic{ order:2; } }
.feat .pic{ display:flex; justify-content:center; }
.feat ul{ margin:20px 0 0; padding:0; list-style:none; }
.feat li{ padding:8px 0 8px 32px; position:relative; color:var(--ink-2); font-weight:500; }
.feat li:before{ content:''; position:absolute; left:0; top:12px; width:19px; height:19px; border-radius:50%; background:var(--green); }
.feat li:after{ content:''; position:absolute; left:6.5px; top:16px; width:5px; height:9px; border:solid #fff;
  border-width:0 2.5px 2.5px 0; transform:rotate(45deg); }

/* ==========================================================================
   SAFE / family band
   ========================================================================== */
.safe{ background:linear-gradient(150deg, var(--green-bright), var(--green)); border-radius:34px;
  padding:clamp(32px,4.5vw,60px); color:#0f1c08; box-shadow:var(--shadow-lift); }
:root[data-theme="dark"] .safe{ color:#0c1806; }
.safe h2{ color:inherit; max-width:20ch; }
.safe .eb{ color:rgba(15,28,8,.7); } .safe .eb:before{ background:rgba(15,28,8,.5); }
.safe .lead{ color:rgba(15,28,8,.82); font-weight:500; }
.safe-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:28px; }
@media (max-width:700px){ .safe-list{ grid-template-columns:1fr; } }
.safe-item{ background:rgba(255,255,255,.7); border-radius:16px; padding:16px 18px; font-weight:600;
  font-size:15px; line-height:1.45; transition:transform .16s cubic-bezier(.2,.9,.3,1.3), background .16s, box-shadow .16s; }
.safe-item:hover{ transform:translateY(-4px); background:#fff; box-shadow:0 14px 26px -10px rgba(20,45,10,.35); }
.safe .btn{ margin-top:28px; background:#0f1c08; color:#eaf6e2; box-shadow:none; }

/* ==========================================================================
   PRICING — free vs everything
   ========================================================================== */
.pricing{ display:grid; grid-template-columns:1fr 1.15fr; gap:22px; align-items:stretch; }
@media (max-width:900px){ .pricing{ grid-template-columns:1fr; } }
.pricecard{ position:relative; background:var(--raise); border-radius:28px; padding:clamp(26px,3vw,38px);
  box-shadow:var(--shadow), 0 0 0 1px var(--line); display:flex; flex-direction:column; }
.pricecard.hot{ background:radial-gradient(120% 90% at 100% 0%, var(--walnut-2), var(--walnut) 60%); color:var(--walnut-ink);
  box-shadow:var(--shadow-lift), 0 0 0 2px var(--gold-bright); overflow:hidden; }
.pricecard.hot:before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 90% 0%, rgba(223,177,78,.25), transparent 45%); }
.pricecard > *{ position:relative; }
.pricecard .eb{ margin-bottom:8px; }
.pricecard.hot .eb{ color:var(--gold-bright); } .pricecard.hot .eb:before{ background:var(--gold-bright); }
.pricecard h3{ font-family:var(--num); font-weight:700; font-size:28px; letter-spacing:-.01em; }
.pricecard.hot h3{ color:var(--walnut-ink); }
.amount{ display:flex; align-items:baseline; gap:10px; margin:14px 0 6px; flex-wrap:wrap; }
.amount b{ font-family:var(--num); font-size:clamp(56px,6vw,76px); line-height:1; letter-spacing:-.035em; font-weight:800; }
.amount b sup{ font-size:.42em; vertical-align:top; top:.35em; position:relative; letter-spacing:0; }
.amount span{ font-size:15px; font-weight:600; color:var(--muted); }
.pricecard.hot .amount b{ color:var(--gold-bright); }
.pricecard.hot .amount span{ color:var(--walnut-muted); }
.pricecard .sub{ font-size:15px; margin-top:4px; }
.pricecard.hot .sub{ color:var(--walnut-muted); }
.ribbon{ position:absolute; top:22px; right:22px; padding:6px 12px; border-radius:999px; background:var(--gold-bright); color:#231a08;
  font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.checks{ margin:20px 0 0; padding:0; list-style:none; text-align:left; }
.checks li{ padding:8px 0 8px 30px; position:relative; font-weight:500; font-size:15px; line-height:1.45; }
.checks li:before{ content:''; position:absolute; left:0; top:11px; width:19px; height:19px; border-radius:50%; background:var(--green); }
.checks li:after{ content:''; position:absolute; left:6.5px; top:15px; width:5px; height:9px; border:solid #fff;
  border-width:0 2.5px 2.5px 0; transform:rotate(45deg); }
.checks li.dim{ color:var(--dim); }
.checks li.dim:before{ background:var(--edge); } .checks li.dim:after{ border-color:var(--muted); }
.pricecard.hot .checks li{ color:var(--walnut-ink); }
.pricecard.hot .checks li:before{ background:var(--gold-bright); } .pricecard.hot .checks li:after{ border-color:#231a08; }
.pricecard .stores{ margin-top:auto; padding-top:26px; }
.pricecard .cta{ margin-top:auto; padding-top:26px; display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.pricecard.hot .stores .storeimg{ background:#000; box-shadow:0 0 0 1px rgba(255,255,255,.25), 0 10px 22px -10px rgba(0,0,0,.8); }
.nosub{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.nosub span{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; font-size:12.5px; font-weight:700;
  background:var(--raise-2); color:var(--muted); box-shadow:0 0 0 1px var(--line); }
.pricecard.hot .nosub span{ background:rgba(255,255,255,.08); color:var(--walnut-ink); box-shadow:0 0 0 1px rgba(255,255,255,.14); }
.nosub span:before{ content:'×'; color:var(--red); font-weight:900; font-size:14px; }

/* the "why one payment" argument */
.why{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:22px; }
@media (max-width:900px){ .why{ grid-template-columns:1fr; } }
.why .card{ padding:24px 26px; }
.why .card b.big{ display:block; font-family:var(--num); font-weight:800; font-size:34px; color:var(--gold); line-height:1; margin-bottom:10px; letter-spacing:-.02em; }
.why .card h3{ font-size:18px; font-family:var(--ui); font-weight:700; }

/* ==========================================================================
   comparison table
   ========================================================================== */
.tablewrap{ overflow-x:auto; border-radius:24px; box-shadow:var(--shadow), 0 0 0 1px var(--line); background:var(--raise); }
table.cmp{ width:100%; min-width:720px; border-collapse:collapse; font-size:15px; }
table.cmp th, table.cmp td{ padding:15px 16px; text-align:left; border-bottom:1px solid var(--line); }
table.cmp thead th{ font-family:var(--display); font-weight:600; font-size:17px; background:var(--raise-2); position:sticky; top:0; }
table.cmp thead th:first-child{ font-family:var(--ui); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); font-weight:700; }
table.cmp th.us, table.cmp td.us{ background:var(--us-wash); position:relative; }
table.cmp th.us:before, table.cmp td.us:before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--green); }
table.cmp th.us:after, table.cmp td.us:after{ content:''; position:absolute; right:0; top:0; bottom:0; width:3px; background:var(--green); }
table.cmp thead th.us{ background:var(--us-head); padding-top:20px; padding-bottom:20px; }
.uslogo{ display:inline-flex; align-items:center; gap:9px; font-family:var(--brand); font-weight:800; letter-spacing:.13em; font-size:14px; color:var(--ink); }
.uslogo img{ height:26px; width:auto; }
:root[data-theme="dark"] .uslogo img{ filter:invert(50%) sepia(100%) saturate(167%) hue-rotate(3deg) brightness(100%) contrast(161%); }
.tick{ display:inline-flex; width:21px; height:21px; border-radius:50%; background:var(--green); margin-right:9px; vertical-align:-4px; position:relative; flex:0 0 auto; }
.tick:after{ content:''; position:absolute; left:7px; top:5px; width:5px; height:9px; border:solid #fff; border-width:0 2.4px 2.4px 0; transform:rotate(45deg); }
table.cmp tbody th{ font-family:var(--ui); font-weight:600; font-size:14.5px; color:var(--ink); width:26%; }
table.cmp td{ color:var(--muted); font-weight:500; }
table.cmp td.us{ color:var(--ink); font-weight:700; }
table.cmp tr:last-child th, table.cmp tr:last-child td{ border-bottom:none; }
.cmp-note{ margin-top:16px; font-size:13px; color:var(--dim); font-weight:450; max-width:80ch; }
table.cmp td, table.cmp th{ transition:opacity .22s ease, background .22s ease, filter .22s ease; }
.tablewrap.focus table.cmp td:not(.us):not([scope]), .tablewrap.focus table.cmp thead th:not(.us):not(:first-child){ opacity:.42; filter:grayscale(1); }
.tablewrap.focus table.cmp .us{ background:var(--us-focus); }
.tablewrap.focus table.cmp thead th.us{ background:var(--us-focus-head); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ max-width:860px; margin:0 auto; }
.faq details{ background:var(--raise); border-radius:18px; box-shadow:0 0 0 1px var(--line); margin-bottom:10px; overflow:hidden; transition:box-shadow .2s; }
.faq details[open]{ box-shadow:var(--shadow), 0 0 0 1px var(--line); }
.faq summary{ list-style:none; cursor:pointer; padding:20px 56px 20px 24px; font-weight:600; font-size:17px; position:relative; color:var(--ink); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:after{ content:'+'; position:absolute; right:22px; top:50%; transform:translateY(-50%); font-size:26px; font-weight:300; color:var(--gold); line-height:1; }
.faq details[open] summary:after{ content:'−'; }
.faq .a{ padding:0 24px 22px; color:var(--muted); font-weight:450; font-size:15.5px; }
.faq .a a{ color:var(--gold); font-weight:600; }

/* ---------- legal ---------- */
.legal{ max-width:780px; }
.legal h2{ font-size:26px; margin:38px 0 10px; }
.legal p, .legal li{ color:var(--muted); font-weight:450; }
.legal strong{ color:var(--ink); }
.legal a{ color:var(--gold); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* ---------- footer ---------- */
footer{ border-top:1px solid var(--line); padding:56px 0 48px; color:var(--muted); font-size:14px; }
.foot{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; }
@media (max-width:820px){ .foot{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .foot{ grid-template-columns:1fr; } }
.foot .logo{ margin-bottom:12px; }
.foot p{ max-width:34ch; font-weight:450; }
.foot h4{ font-family:var(--ui); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-bottom:12px; font-weight:700; }
.foot nav{ display:flex; flex-direction:column; gap:8px; }
.foot nav a{ font-weight:500; } .foot nav a:hover{ color:var(--ink); }
.foot-bar{ margin-top:36px; padding-top:20px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:12px 24px; font-size:13px; color:var(--dim); }

/* ---------- misc ---------- */
.spacer{ height:60px; }
section[id], .faq details{ scroll-margin-top:96px; }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }

/* scroll-in reveal */
.rv{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.3,1); }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; } }

/* ==========================================================================
   Coach Ada page
   ========================================================================== */
.ada-portrait{ text-align:center; }
.pfaceWrap{ position:relative; display:inline-block; }
.pfaceBig{ width:min(340px,72vw); height:min(340px,72vw); margin:0 auto; border-radius:50%; overflow:hidden;
  background:linear-gradient(160deg, var(--gold-wash), var(--raise-2));
  box-shadow:0 0 0 8px var(--raise), 0 0 0 10px var(--gold-bright), var(--shadow-lift); }
.pfaceBig img{ width:100%; height:100%; object-fit:cover; }
.plive{ display:inline-flex; align-items:center; gap:8px; margin-top:22px; font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--green); }
.plive i{ width:9px; height:9px; border-radius:50%; background:var(--green); animation:blip 1.8s infinite; }
@keyframes blip{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }
.ada-portrait p{ margin-top:10px; color:var(--muted); font-weight:600; font-size:15px; }
.adaSay{ position:absolute; left:50%; top:-14px; transform:translate(-46%,-100%) scale(.9);
  background:var(--raise); color:var(--ink); font-weight:600; font-size:16px; line-height:1.35;
  padding:15px 20px; border-radius:20px; box-shadow:var(--shadow-lift), 0 0 0 2px var(--gold-bright);
  width:max-content; max-width:min(300px,72vw); text-align:left; opacity:0; pointer-events:none;
  transition:opacity .3s ease, transform .35s cubic-bezier(.2,.9,.3,1.5); z-index:4; }
.adaSay:after{ content:''; position:absolute; left:44%; bottom:-13px; width:0; height:0; border:13px solid transparent; border-top-color:var(--gold-bright); border-bottom:0; }
.adaSay.on{ opacity:1; transform:translate(-46%,-100%) scale(1); }

.ada-stage{ display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center; }
@media (max-width:1000px){ .ada-stage{ grid-template-columns:1fr; gap:30px; } }
.ada-panel{ position:relative; background:var(--raise); border-radius:28px; padding:30px 30px 26px;
  box-shadow:var(--shadow-lift), 0 0 0 1px var(--line); overflow:hidden; }
.ada-panel:before{ content:''; position:absolute; right:-70px; top:-70px; width:240px; height:240px; border-radius:50%; background:var(--gold-wash); pointer-events:none; }
.ada-head{ position:relative; display:flex; align-items:center; gap:18px; margin-bottom:20px; }
.ada-face{ width:104px; height:104px; flex:0 0 auto; border-radius:50%; overflow:hidden;
  background:linear-gradient(160deg, var(--gold-wash), var(--raise-2)); box-shadow:0 0 0 4px var(--gold-bright), var(--shadow); }
.ada-face img{ width:100%; height:100%; object-fit:cover; }
.ada-head h2{ margin-bottom:4px; }
.ada-head .role{ color:var(--muted); font-weight:600; font-size:14.5px; }
.chat{ position:relative; display:flex; flex-direction:column; gap:12px; }
.msg{ display:flex; gap:12px; align-items:flex-start; }
.msg .av{ width:42px; height:42px; flex:0 0 auto; border-radius:50%; overflow:hidden; background:var(--raise-2); box-shadow:0 0 0 2px var(--gold-bright); }
.msg .av img{ width:100%; height:100%; }
.msg .body{ background:var(--raise-2); border-radius:16px; border-top-left-radius:5px; padding:13px 16px; font-size:15.5px; line-height:1.5; color:var(--ink-2); flex:1 1 auto; }
.msg .body b{ color:var(--ink); }
.msg .who{ display:block; font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:5px; }
.msg.me{ flex-direction:row-reverse; }
.msg.me .body{ background:var(--gold-wash); border-top-left-radius:16px; border-top-right-radius:5px; color:var(--ink); font-weight:500; flex:0 1 auto; }
.msg.me .av{ box-shadow:0 0 0 2px var(--green); background:var(--green); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:15px; }
.ada-foot{ position:relative; margin-top:20px; display:flex; gap:10px; flex-wrap:wrap; }
.chipbtn{ padding:9px 15px; border-radius:999px; background:var(--raise-2); color:var(--ink); font-weight:600; font-size:13px; box-shadow:0 0 0 1px var(--line); }

/* ==========================================================================
   download page — the whole cast
   ========================================================================== */
.cast{ position:relative; background:var(--raise); border-radius:32px; padding:clamp(28px,4vw,52px); box-shadow:var(--shadow-lift), 0 0 0 1px var(--line); overflow:hidden; }
.cast:before{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 50% -10%, var(--gold-wash), transparent 60%); }
.cast-head{ position:relative; text-align:center; margin-bottom:36px; }
.cast-head .lead{ margin:0 auto; }
.castgrid{ position:relative; display:flex; flex-wrap:wrap; justify-content:center; gap:14px 10px; }
.castface{ position:relative; width:clamp(88px,10vw,118px); text-align:center; transition:transform .2s cubic-bezier(.2,.9,.3,1.4); }
.castface:hover{ transform:translateY(-9px) scale(1.07); z-index:20; }
.castface .ring{ width:100%; aspect-ratio:1/1; border-radius:50%; background:var(--tint,var(--gold-wash)); display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:0 0 0 1px var(--line), inset 0 -4px 0 rgba(0,0,0,.08); }
.castface .ring img{ width:94%; height:94%; }
.castface.legend .ring{ box-shadow:0 0 0 3px var(--gold-bright); }
.castface b{ display:block; margin-top:9px; font-size:12.5px; line-height:1.2; }
.castface small{ display:block; color:var(--gold); font-weight:700; font-size:11px; }
.castsay{ position:absolute; left:50%; bottom:calc(100% + 14px); transform:translate(-50%,6px) scale(.92);
  width:max-content; max-width:230px; padding:12px 15px; border-radius:16px; background:var(--raise); color:var(--ink);
  font-size:13.5px; font-weight:500; line-height:1.42; text-align:left;
  box-shadow:var(--shadow-lift), 0 0 0 2px var(--tint-solid,var(--gold-bright)); opacity:0; pointer-events:none; z-index:20;
  transition:opacity .16s ease, transform .2s cubic-bezier(.2,.9,.3,1.5); }
.castsay b{ display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-bottom:4px; }
.castsay:after{ content:''; position:absolute; left:50%; margin-left:-9px; bottom:-11px; width:0; height:0; border:10px solid transparent; border-top-color:var(--tint-solid,var(--gold-bright)); border-bottom:0; }
.castface:hover .castsay, .castface:focus-within .castsay{ opacity:1; transform:translate(-50%,0) scale(1); }
.castbadges{ position:relative; display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:44px; padding-top:34px; border-top:1px solid var(--line); }
@media (max-width:900px){ .castbadges{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .castbadges{ grid-template-columns:repeat(2,1fr); } }
.cb{ text-align:center; }
.cb .sym{ display:flex; width:clamp(58px,7vw,76px); height:clamp(58px,7vw,76px); margin:0 auto 12px; border-radius:50%; align-items:center; justify-content:center; color:#fff; font-weight:900; font-size:clamp(22px,2.6vw,28px); line-height:1; }
.cb.brill  .sym{ background:#26c2a3; } .cb.great  .sym{ background:#749bbf; } .cb.best   .sym{ background:#81b64c; }
.cb.good   .sym{ background:#95b776; } .cb.streak .sym{ background:linear-gradient(160deg,#ffb347,#e2622b); }
.cb.crown  .sym{ background:linear-gradient(160deg,#f6dc95,#dfb14e); color:#4a3406; }
.cb b{ display:block; font-size:15px; } .cb small{ display:block; color:var(--muted); font-weight:500; font-size:12.5px; margin-top:2px; }
.castfoot{ position:relative; margin:34px auto 0; max-width:70ch; text-align:center; color:var(--muted); font-weight:500; font-size:15.5px; }

/* signup form */
.signup{ display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.signup input[type=email]{ font:inherit; padding:15px 18px; border-radius:999px; border:none; background:var(--raise-2); color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line); outline:none; transition:box-shadow .15s; }
.signup input[type=email]:focus{ box-shadow:inset 0 0 0 2px var(--gold-bright); }
.signup .formmsg{ display:none; font-weight:600; font-size:14px; }
.signup .formmsg.on{ display:block; }
.signup .formmsg.ok{ color:var(--green); }
.signup .formmsg.err{ color:var(--red); }
.signup.sending button{ opacity:.6; pointer-events:none; }

/* ==========================================================================
   OFFLINE — animated feature haul that lands in the tablet
   ========================================================================== */
.haul{ position:relative; display:grid; grid-template-columns:1fr 400px; gap:44px; align-items:center; }
@media (max-width:1020px){ .haul{ grid-template-columns:1fr; gap:30px; } }
.haulbars{ display:flex; flex-direction:column; gap:11px; }
.hb{ display:grid; grid-template-columns:150px 1fr auto; gap:14px; align-items:center; }
@media (max-width:560px){ .hb{ grid-template-columns:104px 1fr auto; gap:10px; } }
.hlab{ font-size:13px; font-weight:600; color:var(--muted); text-align:right; }
@media (max-width:560px){ .hlab{ font-size:11.5px; } }
.htrack{ height:20px; border-radius:999px; background:var(--raise); box-shadow:inset 0 0 0 1px var(--line); overflow:hidden; }
.htrack i{ display:block; height:100%; width:0; border-radius:999px; background:var(--c); transition:width 2.1s cubic-bezier(.16,.8,.3,1); }
.haul.run .htrack i{ width:var(--w); }
.hnum{ font-family:var(--display); font-size:clamp(17px,2vw,22px); min-width:86px; text-align:right; color:var(--ink); font-variant-numeric:tabular-nums; }
@media (max-width:560px){ .hnum{ min-width:64px; font-size:16px; } }
.haulkid{ position:relative; text-align:center; }
.kidframe{ position:relative; display:inline-block; width:min(400px,86vw); }
.haulkid .kid{ width:100%; display:block; margin:0; filter:drop-shadow(0 22px 34px rgba(60,44,16,.22)); }
:root[data-theme="dark"] .haulkid .kid{ filter:drop-shadow(0 22px 34px rgba(0,0,0,.6)); }
.haulkid .kidscreen{ position:absolute; left:10.9%; top:30.9%; width:27.6%; height:24.4%; object-fit:cover; object-position:top center; border-radius:3px;
  transform:rotate(-21.25deg); transform-origin:50% 50%; box-shadow:0 0 0 1px rgba(0,0,0,.18); opacity:0; transition:opacity .7s ease .9s; }
.haul.land .haulkid .kidscreen{ opacity:1; }
.haulcap{ margin:18px auto 0; max-width:34ch; font-weight:500; color:var(--muted); font-size:15px; opacity:0; transition:opacity .6s ease 1.2s; }
.haul.land .haulcap{ opacity:1; }
.haulflies{ position:absolute; inset:0; pointer-events:none; z-index:3; }
.haulflies i{ position:absolute; display:block; height:9px; border-radius:999px; opacity:0; }
.haulreplay{ position:absolute; right:0; top:-56px; }
@media (max-width:1020px){ .haulreplay{ position:static; margin:22px auto 0; display:block; } }

/* ---------- lightbox ---------- */
.lightbox[hidden]{ display:none !important; }
.lightbox{ position:fixed; inset:0; z-index:200; background:rgba(18,14,8,.86); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; gap:min(4vw,40px); padding:4vh 2vw; }
.lbfig{ margin:0; display:flex; flex-direction:column; align-items:center; gap:16px; max-height:92vh; }
.lbfig img{ max-height:82vh; width:auto; border-radius:20px; box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 0 8px #1c1813; }
.lbfig figcaption{ color:#f1eadd; font-weight:600; font-size:15px; text-align:center; }
.lbclose{ position:absolute; top:18px; right:18px; width:48px; height:48px; border-radius:50%; border:none; cursor:pointer; background:rgba(255,255,255,.14); color:#fff; display:flex; align-items:center; justify-content:center; }
.lbclose svg{ width:22px; height:22px; }
.lbnav{ width:52px; height:52px; flex:0 0 auto; border-radius:50%; border:none; cursor:pointer; background:rgba(255,255,255,.14); color:#fff; display:flex; align-items:center; justify-content:center; }
.lbnav svg{ width:24px; height:24px; }
@media (max-width:700px){ .lbnav{ position:absolute; bottom:16px; } .lbprev{ left:20px } .lbnext{ right:20px } }

/* page hero (inner pages) */
.page-hero{ padding:40px 0 20px; }
.page-hero .tagline{ display:inline-flex; align-items:center; gap:9px; padding:6px 14px 6px 6px; border-radius:999px;
  background:var(--raise); box-shadow:0 0 0 1px var(--line); font-weight:600; font-size:13px; color:var(--muted); margin-bottom:22px; }
.page-hero .tagline b{ background:var(--gold-bright); color:#231a08; padding:4px 10px; border-radius:999px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.page-hero h1{ max-width:16ch; }
.page-hero.center h1{ margin-left:auto; margin-right:auto; }
.hero-cta.row{ flex-direction:row; flex-wrap:wrap; align-items:center; }

/* value strip on download page */
.valuestrip{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-radius:24px; overflow:hidden; box-shadow:0 0 0 1px var(--line); background:var(--raise); }
@media (max-width:760px){ .valuestrip{ grid-template-columns:1fr; } }
.valuestrip > div{ padding:26px 28px; border-right:1px solid var(--line); }
.valuestrip > div:last-child{ border-right:none; }
@media (max-width:760px){ .valuestrip > div{ border-right:none; border-bottom:1px solid var(--line); } .valuestrip > div:last-child{ border-bottom:none; } }
.valuestrip b.big{ display:block; font-family:var(--num); font-weight:800; font-size:34px; color:var(--gold); line-height:1; margin-bottom:8px; letter-spacing:-.02em; }
.valuestrip p{ margin:0; color:var(--muted); font-size:14.5px; }
.valuestrip h3{ font-family:var(--ui); font-size:16px; font-weight:700; margin-bottom:6px; }
@media (min-width:1001px){ .ada-portrait{ padding-top:72px; } }

/* ==========================================================================
   v3 — live boards (hero + Coach Ada demo)
   ========================================================================== */
.nb{ position:relative; width:100%; aspect-ratio:1/1; border-radius:14px; overflow:hidden;
  background:#6b4a2e url('img/walnut.jpg') center/cover; box-shadow:0 30px 70px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.35); }
.nb-grid{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(8,1fr); }
.nb-sq{ display:block; }
.nb-sq.l{ background:rgba(255,236,205,.62); }
.nb-sq.d{ background:rgba(66,36,14,.46); }
.nb-marks, .nb-pieces{ position:absolute; inset:0; pointer-events:none; }
.nb-m{ position:absolute; left:0; top:0; width:12.5%; height:12.5%; display:block; }
.nb-m.last{ background:rgba(223,177,78,.42); box-shadow:inset 0 0 0 2px rgba(223,177,78,.6); }
.nb-m.target{ background:rgba(202,52,49,.30); box-shadow:inset 0 0 0 3px rgba(202,52,49,.75); animation:nbpulse 1.4s ease-in-out infinite; }
.nb-m.dot:before{ content:''; position:absolute; inset:0; margin:auto; width:34%; height:34%; border-radius:50%; background:rgba(58,122,176,.85); box-shadow:0 0 0 3px rgba(58,122,176,.3); animation:nbpop .35s cubic-bezier(.2,.9,.3,1.5); }
@keyframes nbpulse{ 0%,100%{ box-shadow:inset 0 0 0 3px rgba(202,52,49,.75) } 50%{ box-shadow:inset 0 0 0 5px rgba(202,52,49,.95) } }
@keyframes nbpop{ from{ transform:scale(0) } to{ transform:scale(1) } }
.nb-p{ position:absolute; left:0; top:0; width:12.5%; height:12.5%; will-change:transform;
  transition:transform .5s cubic-bezier(.3,.8,.3,1), opacity .25s; filter:drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.nb-p svg{ width:100%; height:100%; display:block; transform:scale(1.02); }
.nb-p.moving{ z-index:3; filter:drop-shadow(0 8px 8px rgba(0,0,0,.4)); }
.nb-p.taken{ opacity:0; transform-origin:center; }
.nb-arrows{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.nb-a{ opacity:.92; transform-origin:center; animation:nbarrow .32s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes nbarrow{ from{ opacity:0; transform:scale(.94) } to{ opacity:.92; transform:none } }
.nb-badge{ position:absolute; left:50%; bottom:-10px; transform:translate(-50%,10px) scale(.94); max-width:calc(100% - 24px);
  padding:10px 16px 10px 12px; border-radius:999px; background:var(--raise); color:var(--ink); font-size:14px; font-weight:500;
  line-height:1.35; box-shadow:var(--shadow-lift), 0 0 0 1px var(--line); opacity:0; pointer-events:none; white-space:nowrap;
  transition:opacity .25s ease, transform .35s cubic-bezier(.2,.9,.3,1.4); z-index:5; display:flex; align-items:center; gap:2px; }
.nb-badge b{ margin-right:4px; }
.nb-badge.on{ opacity:1; transform:translate(-50%,-14px) scale(1); }
.nb-badge.warn{ box-shadow:var(--shadow-lift), 0 0 0 2px #b15c00; }
.nb-badge.brill{ box-shadow:var(--shadow-lift), 0 0 0 2px #26c2a3; }
.nb-badge.best{ box-shadow:var(--shadow-lift), 0 0 0 2px #81b64c; }
.nb-badge.great{ box-shadow:var(--shadow-lift), 0 0 0 2px #749bbf; }
.nb-badge.mist{ box-shadow:var(--shadow-lift), 0 0 0 2px #e0842a; }
@media (max-width:640px){ .nb-badge{ font-size:12.5px; white-space:normal; text-align:left; padding:8px 14px 8px 10px; display:block; width:calc(100% - 20px); max-width:none; } .nb-badge .q{ float:left; margin-top:1px; } .nb-badge.on{ transform:translate(-50%,-8px) scale(1); } .hero-stage .float.f2{ display:none; } .hero-stage .float.f1{ top:-14px; right:0; } }

/* hero stage around the board */
.hero-stage{ position:relative; width:min(520px,100%); margin:0 auto; }
.hero-stage .frame{ position:relative; padding:12px; border-radius:24px; background:#14100c;
  box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 40px 80px -30px rgba(0,0,0,.8); }
.hero-stage .nb{ border-radius:12px; box-shadow:none; }
.hero-stage .nb-badge{ font-size:13.5px; }
.hero-stage .cap{ display:flex; align-items:center; gap:10px; margin-top:16px; justify-content:space-between; flex-wrap:wrap; }
.hero-stage .cap span{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--walnut-muted); }
.hero-stage .cap .lv{ width:8px; height:8px; border-radius:50%; background:#8cc46a; animation:blip 1.8s infinite; }
.hero-stage .cap .btn{ background:rgba(255,255,255,.08); color:var(--walnut-ink); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); }
.hero-stage .cap .btn:hover{ background:rgba(255,255,255,.14); }
.hero-stage .float{ z-index:6; }
.hero-stage .float.f1{ left:auto; right:-6%; top:-16px; }
.hero-stage .float.f2{ right:auto; left:-6%; top:34%; }
@media (max-width:1000px){ .hero-stage{ margin-top:8px; } .hero-stage .float.f1{ right:-2%; } .hero-stage .float.f2{ left:-2%; } }
.legend{ display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:12px; }
.legend span{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--walnut-muted); }
.legend i{ width:22px; height:5px; border-radius:3px; display:block; }
.legend i.sq{ width:14px; height:14px; border-radius:3px; }

/* ---------- Coach Ada live demo section ---------- */
.ada-demo{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; border-radius:30px; overflow:hidden;
  background:var(--raise); box-shadow:var(--shadow-lift), 0 0 0 1px var(--line); }
@media (max-width:960px){ .ada-demo{ grid-template-columns:1fr; } }
.ada-demo .boardside{ padding:clamp(18px,3vw,34px); background:radial-gradient(120% 90% at 100% 0%, var(--walnut-2), var(--walnut) 60%); display:flex; flex-direction:column; justify-content:center; }
.ada-demo .boardside .nb{ width:100%; max-width:520px; margin:0 auto; }
.ada-demo .boardside .cap{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; max-width:520px; margin:16px auto 0; width:100%; }
.ada-demo .boardside .cap span{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--walnut-muted); }
.ada-demo .boardside .cap .lv{ width:8px; height:8px; border-radius:50%; background:#8cc46a; animation:blip 1.8s infinite; }
.ada-demo .boardside .btn{ background:rgba(255,255,255,.08); color:var(--walnut-ink); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); }
.ada-demo .chatside{ padding:clamp(22px,3vw,34px); display:flex; flex-direction:column; min-height:520px; }
.ada-demo .chathead{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.ada-demo .chathead .face{ width:64px; height:64px; border-radius:50%; overflow:hidden; background:var(--gold-wash); box-shadow:0 0 0 3px var(--gold-bright); flex:0 0 auto; }
.ada-demo .chathead .face img{ width:100%; height:100%; }
.ada-demo .chathead h3{ font-size:22px; margin-bottom:2px; }
.ada-demo .chathead .role{ color:var(--muted); font-weight:600; font-size:13.5px; }
.ada-demo .chat{ flex:1 1 auto; overflow:hidden; justify-content:flex-start; }
.ada-demo .msg{ opacity:0; transform:translateY(10px); transition:opacity .35s ease, transform .4s cubic-bezier(.2,.8,.3,1); }
.ada-demo .msg.in{ opacity:1; transform:none; }
.ada-demo .chips{ margin-top:18px; display:flex; gap:8px; flex-wrap:wrap; }
.ada-demo .psteps{ margin-top:16px; }

/* ---------- pricing v3: Ada on the free card ---------- */
.pricecard .adafree{ display:flex; align-items:center; gap:14px; margin-top:18px; padding:14px 16px; border-radius:18px; background:var(--raise-2); box-shadow:0 0 0 1px var(--line); }
.pricecard .adafree .face{ width:62px; height:62px; flex:0 0 auto; border-radius:50%; overflow:hidden; background:var(--gold-wash); box-shadow:0 0 0 3px var(--gold-bright); }
.pricecard .adafree .face img{ width:100%; height:100%; }
.pricecard .adafree b{ display:block; font-size:15px; }
.pricecard .adafree small{ display:block; color:var(--muted); font-weight:500; font-size:13px; line-height:1.4; margin-top:2px; }
.pricecard .adafree .tagfree{ display:inline-block; margin-left:6px; padding:2px 8px; border-radius:999px; background:var(--green); color:#fff; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; vertical-align:2px; }
.pricecard .stores{ justify-content:flex-start; }
.pricecard.hot .cta .btn{ background:var(--gold-bright); color:#231a08; }
.pricecard .note{ font-size:12.5px; color:var(--dim); font-weight:500; margin-top:10px; }
.pricecard.hot .note{ color:var(--walnut-muted); }

/* ---------- tournament headline flourish ---------- */
.champline{ display:inline-flex; align-items:center; gap:10px; }

/* ---------- features v3: bento ---------- */
.bento{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px; }
.tile{ position:relative; overflow:hidden; border-radius:26px; background:var(--raise); box-shadow:var(--shadow), 0 0 0 1px var(--line);
  padding:26px; display:flex; flex-direction:column; min-height:300px; transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s; }
.tile:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift), 0 0 0 1px var(--line); }
.tile .eb{ margin-bottom:8px; }
.tile h3{ font-size:22px; max-width:22ch; }
.tile p{ color:var(--muted); font-size:14.5px; margin:8px 0 0; max-width:40ch; }
.tile .n{ font-family:var(--num); font-weight:800; font-size:clamp(34px,4vw,52px); line-height:1; letter-spacing:-.03em; color:var(--gold); margin-bottom:6px; }
.tile .shot{ margin:auto -26px -26px; padding:22px 26px 0; height:300px; overflow:hidden; flex:0 0 auto; }
.tile.s7 .shot, .tile.s8 .shot{ height:360px; }
.tile .shot img{ width:100%; border-radius:16px 16px 0 0; box-shadow:0 -6px 30px -10px rgba(0,0,0,.35), 0 0 0 1px var(--line); display:block; }
.tile.dark{ background:radial-gradient(120% 90% at 100% 0%, var(--walnut-2), var(--walnut) 60%); color:var(--walnut-ink); }
.tile.dark h3{ color:var(--walnut-ink); } .tile.dark p{ color:var(--walnut-muted); } .tile.dark .eb{ color:var(--gold-bright); } .tile.dark .eb:before{ background:var(--gold-bright); }
.tile.green{ background:linear-gradient(150deg, var(--green-bright), var(--green)); color:#0f1c08; }
.tile.green h3{ color:inherit; } .tile.green p{ color:rgba(15,28,8,.8); } .tile.green .eb{ color:rgba(15,28,8,.7); } .tile.green .eb:before{ background:rgba(15,28,8,.5); } .tile.green .n{ color:#0f1c08; }
.tile.side{ flex-direction:row; align-items:center; gap:22px; }
.tile.side .shot{ margin:0; padding:0; flex:0 0 42%; height:380px; overflow:hidden; border-radius:16px; box-shadow:var(--shadow-lift), 0 0 0 1px var(--line); }
.tile.side .shot img{ margin:0; border-radius:16px; box-shadow:none; }
.tile.side .txt{ flex:1 1 auto; }
.s12{ grid-column:span 12; } .s8{ grid-column:span 8; } .s7{ grid-column:span 7; } .s6{ grid-column:span 6; } .s5{ grid-column:span 5; } .s4{ grid-column:span 4; } .s3{ grid-column:span 3; }
@media (max-width:960px){ .s8,.s7,.s6,.s5{ grid-column:span 12; } .s4,.s3{ grid-column:span 6; } }
@media (max-width:600px){ .s4,.s3{ grid-column:span 12; } .tile.side{ flex-direction:column; align-items:stretch; } .tile.side .shot{ flex:none; } }
.tile .ph{ margin-top:auto; padding-top:20px; display:flex; justify-content:center; }
.tile .ph img{ width:min(100%,300px); border-radius:18px; box-shadow:var(--shadow-lift), 0 0 0 1px var(--line); }

/* day / night compare slider */
.daynight{ position:relative; margin-top:auto; padding-top:20px; }
.dn{ position:relative; border-radius:16px; overflow:hidden; box-shadow:var(--shadow-lift), 0 0 0 1px var(--line); aspect-ratio:1500/2011; max-height:380px; margin:0 auto; width:auto; }
.dn img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; }
.dn img.night{ clip-path:inset(0 0 0 var(--x,50%)); }
.dn .handle{ position:absolute; top:0; bottom:0; left:var(--x,50%); width:2px; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.25); pointer-events:none; }
.dn .handle:after{ content:'⇔'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:34px; height:34px; border-radius:50%; background:#fff; color:#1b1712; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800; box-shadow:0 6px 16px rgba(0,0,0,.3); }
.dn input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0; }
.dn .lab{ position:absolute; top:10px; padding:4px 9px; border-radius:999px; font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; background:rgba(0,0,0,.55); color:#fff; pointer-events:none; }
.dn .lab.l{ left:10px; } .dn .lab.r{ right:10px; }

/* the "everything else" list */
.list3{ columns:3; column-gap:28px; }
@media (max-width:900px){ .list3{ columns:2; } } @media (max-width:560px){ .list3{ columns:1; } }
.list3 div{ break-inside:avoid; padding:12px 0 12px 30px; position:relative; border-bottom:1px solid var(--line); }
.list3 div b{ display:block; font-size:15px; } .list3 div span{ color:var(--muted); font-size:14px; font-weight:450; }
.list3 div:before{ content:''; position:absolute; left:0; top:16px; width:18px; height:18px; border-radius:50%; background:var(--gold-bright); }
.list3 div:after{ content:''; position:absolute; left:6px; top:19.5px; width:5px; height:9px; border:solid #231a08; border-width:0 2.4px 2.4px 0; transform:rotate(45deg); }
.kidframe .kid{ width:100%; display:block; margin:0; filter:drop-shadow(0 22px 34px rgba(60,44,16,.22)); }
:root[data-theme="dark"] .kidframe .kid{ filter:drop-shadow(0 22px 34px rgba(0,0,0,.6)); }
.kidframe .kidscreen{ position:absolute; left:10.9%; top:30.9%; width:27.6%; height:24.4%; object-fit:cover; object-position:top center; border-radius:3px; transform:rotate(-21.25deg); transform-origin:50% 50%; box-shadow:0 0 0 1px rgba(0,0,0,.18); }


/* ==========================================================================
   v4 — on-square grade badges (as in the app), per-move coaching rows,
   piece-set picker, display demo
   ========================================================================== */
.nb-sb{ position:absolute; width:12.5%; height:12.5%; display:flex; align-items:flex-start; justify-content:flex-end; pointer-events:none; z-index:4; --sbc:#81b64c; }
.nb-sb.best{ --sbc:#81b64c } .nb-sb.great{ --sbc:#749bbf } .nb-sb.brill{ --sbc:#26c2a3 } .nb-sb.good{ --sbc:#95b776 }
.nb-sb.book{ --sbc:#a88865 } .nb-sb.inacc{ --sbc:#e6a817 } .nb-sb.mist{ --sbc:#e0842a } .nb-sb.blun{ --sbc:#ca3431 }
.nb-sb span{ display:flex; align-items:center; justify-content:center; width:42%; height:42%; min-width:16px; min-height:16px; margin:-14% -14% 0 0;
  border-radius:50%; background:var(--sbc); color:#fff; font-family:var(--ui); font-weight:800; font-size:clamp(9px,1.5vw,13px); line-height:1;
  box-shadow:0 2px 6px rgba(0,0,0,.4), 0 0 0 2px rgba(255,255,255,.85); animation:nbpop .38s cubic-bezier(.2,.9,.3,1.6) both; }
.nb-sb.brill span{ font-size:clamp(8px,1.2vw,11px); letter-spacing:-.05em; }

/* per-move coaching rows (replaces the chat bubbles) */
.mrow{ display:grid; grid-template-columns:118px 1fr; gap:14px; align-items:start; padding:12px 0; border-top:1px solid var(--line);
  opacity:0; transform:translateY(10px); transition:opacity .35s ease, transform .4s cubic-bezier(.2,.8,.3,1); }
.mrow.in{ opacity:1; transform:none; }
.mrow:first-child{ border-top:none; }
.mrow .mv{ display:flex; flex-direction:column; gap:4px; }
.mrow .mv .who{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:700; }
.mrow .mv b{ font-family:var(--num); font-weight:700; font-size:20px; letter-spacing:-.01em; display:inline-flex; align-items:center; gap:8px; }
.mrow .mv .q{ margin:0; vertical-align:0; align-self:flex-start; }
.mrow .note{ font-size:15px; line-height:1.5; color:var(--ink-2); padding:10px 14px; border-radius:14px; background:var(--raise-2); }
.mrow .note b{ color:var(--ink); }
.mrow.latest .note{ box-shadow:0 0 0 2px var(--gold-bright) inset; background:var(--gold-wash); color:var(--ink); }
.mrow.g-brill.latest .note{ box-shadow:0 0 0 2px #26c2a3 inset; background:rgba(38,194,163,.12); }
.mrow.g-mist.latest .note{ box-shadow:0 0 0 2px #e0842a inset; background:rgba(224,132,42,.12); }
.mrow.g-blun.latest .note{ box-shadow:0 0 0 2px #ca3431 inset; background:rgba(202,52,49,.1); }
@media (max-width:560px){ .mrow{ grid-template-columns:1fr; gap:6px; } }
.ada-demo .chat{ display:flex; flex-direction:column; gap:0; }
.mlist{ display:flex; flex-direction:column; }
.mlist .mrow{ opacity:1; transform:none; }
.mlist .mrow.latest .note{ box-shadow:none; background:var(--raise-2); }
.mhead{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; border-radius:14px; background:var(--raise-2); margin-bottom:6px; }
.mhead .eb{ margin:0; }
.mhead .sum{ font-family:var(--num); font-weight:700; font-size:14px; color:var(--muted); display:flex; gap:10px; flex-wrap:wrap; }
.mhead .sum .q{ margin:0 2px 0 0; }

/* piece-set picker */
.pieces{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; align-items:center; }
@media (max-width:900px){ .pieces{ grid-template-columns:1fr; } }
.pieces .boardwrap{ padding:12px; border-radius:22px; background:#14100c; box-shadow:var(--shadow-lift); max-width:520px; margin:0 auto; width:100%; }
.pieces .boardwrap .nb{ border-radius:12px; box-shadow:none; }
.psets{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media (max-width:560px){ .psets{ grid-template-columns:repeat(3,1fr); } }
.pset{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 8px 10px; border-radius:16px; border:2px solid transparent; background:var(--raise);
  box-shadow:0 0 0 1px var(--line); cursor:pointer; font:inherit; color:var(--ink); transition:transform .15s, box-shadow .15s, border-color .15s; }
.pset:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.pset.on{ border-color:var(--gold-bright); box-shadow:var(--shadow); }
.pset .pv{ display:flex; gap:2px; width:100%; justify-content:center; }
.pset .pv i{ width:30%; aspect-ratio:1/1; display:block; }
.pset .pv i svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.pset b{ font-size:12.5px; font-weight:600; }
.pieces .cur{ margin-top:14px; font-size:13.5px; color:var(--muted); font-weight:500; }
.pieces .cur b{ color:var(--ink); }

/* display demo — day/night, colour/b&w, warm light, brightness */
.display{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:36px; align-items:center; }
@media (max-width:960px){ .display{ grid-template-columns:1fr; } }
.tab{ position:relative; width:min(360px,100%); margin:0 auto; border-radius:28px; padding:12px; background:#1c1813;
  box-shadow:var(--shadow-lift), 0 0 0 1px #3a3128, inset 0 0 0 1px rgba(255,255,255,.06); }
.tab .scr{ position:relative; border-radius:18px; overflow:hidden; aspect-ratio:1500/2010; background:#000; }
.tab .scr img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; transition:opacity .35s ease, filter .3s ease; }
.tab .scr img.n{ opacity:0; }
.tab.night .scr img.n{ opacity:1; }
.tab.bw .scr img{ filter:grayscale(1) contrast(1.16); }
.tab .veil{ position:absolute; inset:0; pointer-events:none; }
.tab .veil.warm{ background:#ff8a1f; mix-blend-mode:multiply; opacity:calc(var(--warm,0) * .55); }
.tab .veil.dim{ background:#000; opacity:calc((1 - var(--bright,1)) * .85); }
.ctrls{ display:flex; flex-direction:column; gap:16px; }
.ctrl{ display:grid; grid-template-columns:120px 1fr; gap:14px; align-items:center; padding:14px 18px; border-radius:18px; background:var(--raise); box-shadow:0 0 0 1px var(--line); }
@media (max-width:480px){ .ctrl{ grid-template-columns:1fr; gap:8px; } }
.ctrl .lab{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); font-weight:700; }
.ctrl .lab small{ display:block; text-transform:none; letter-spacing:0; font-size:12.5px; color:var(--muted); font-weight:500; margin-top:3px; line-height:1.35; }
.seg{ display:inline-flex; background:var(--raise-2); border-radius:999px; padding:4px; gap:4px; }
.seg button{ font:inherit; font-weight:700; font-size:13.5px; padding:8px 16px; border-radius:999px; border:none; background:transparent; color:var(--muted); cursor:pointer; transition:background .15s, color .15s; }
.seg button.on{ background:var(--gold-bright); color:#231a08; }
.ctrl input[type=range]{ width:100%; accent-color:var(--gold); }
.ctrl .val{ font-family:var(--num); font-weight:700; font-size:14px; color:var(--ink); min-width:44px; text-align:right; }
.ctrl .row{ display:flex; align-items:center; gap:12px; }
.presets{ display:flex; gap:8px; flex-wrap:wrap; }
.presets button{ font:inherit; font-weight:600; font-size:13px; padding:8px 14px; border-radius:999px; border:none; background:var(--raise-2); color:var(--ink); cursor:pointer; box-shadow:0 0 0 1px var(--line); }
.presets button:hover{ background:var(--gold-wash); }