/* Base rules that the artifact host used to provide, kept so the pages render
   exactly as they were approved. */
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);}
html{scroll-padding-top:env(safe-area-inset-top,0px);}
[hidden]:not([hidden="until-found"]){display:none!important;}
img{max-width:100%;}

  /* ---------- Theme tokens ----------
     Bare :root = light mode (default). Dark mode applies when the OS is set to dark
     (unless the viewer explicitly picked light), or when the viewer explicitly picks
     dark via the header toggle (data-theme="dark" on <html>). */
  :root{
    /* Daylight-ocean light palette: every neutral below is tinted from a deep
       teal ink (7,46,56) instead of plain gray, so light mode reads as "sunlit
       shallow water" rather than a generic pale UI -- and carries the same
       teal-navy relationship dark mode uses, just inverted in lightness. */
    --navy:#E9F5F3;
    --navy-deep:#D9EEEA;
    --surface:#FCFEFE;
    --surface-2:#F0F8F6;
    --line:rgba(7,46,56,0.10);
    --line-strong:rgba(7,46,56,0.20);
    --pearl:#0A2A32;
    --muted:#3E6672;
    --teal:#0B7A68;
    --teal-dim:rgba(38,230,200,0.16);
    --violet:#7C3AED;
    /* Violet used as TEXT. The brand violet measures 3.5:1 on the dark
       background and 4.24:1 on a dark card -- both under the 4.5:1 that body
       text needs. Borders, fills and gradients keep --violet; only type that
       has to be read uses this. */
    --violet-ink:#6D28D9;
    --violet-dim:rgba(139,92,246,0.14);
    --good:#157A52;
    --warn:#8A5A00;
    --danger:#B42318;
    --on-accent:#FFFFFF;
    --teal-hover:#0E9683;
    /* True brand teal/navy pair, fixed in both themes (not the accessibility-adjusted
       --teal above). Used only where teal is a solid FILL or BORDER with plenty of
       area -- dark navy text on it clears 11:1 contrast -- e.g. primary buttons and
       the bet slip. Never used for small teal TEXT on a light surface; --teal (above)
       stays darker there because brand teal text on white fails contrast. */
    --teal-brand:#26E6C8;
    --teal-brand-hover:#4ff0d6;
    --on-teal-brand:#071827;
    --tint-1:rgba(7,46,56,0.035);
    --tint-2:rgba(7,46,56,0.06);
    --tint-3:rgba(7,46,56,0.09);
    --card-tint:rgba(7,46,56,0.02);
    --card-tint-hover:rgba(7,46,56,0.045);
    --ghost-num:rgba(7,46,56,0.05);
    --grid-line:rgba(7,46,56,0.045);
    --nav-bg:rgba(233,245,243,0.92);
    --menu-bg:rgba(233,245,243,0.97);
    --radius-sm:10px;
    --radius-md:16px;
    --radius-lg:28px;
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --navy:#071827;
      --navy-deep:#040f19;
      --surface:#0F2A3D;
      --surface-2:#132F42;
      --line:rgba(244,247,251,0.10);
      --line-strong:rgba(244,247,251,0.18);
      --pearl:#F4F7FB;
      --muted:#93A8B8;
      --teal:#26E6C8;
      --teal-dim:rgba(38,230,200,0.14);
      --violet:#8B5CF6;
      --violet-ink:#A78BFA;
      --violet-dim:rgba(139,92,246,0.16);
      --good:#3DDC97;
      --warn:#F5B942;
      --danger:#F26B6B;
      --on-accent:#04231d;
      --teal-hover:#4ff0d6;
      --tint-1:rgba(244,247,251,0.03);
      --tint-2:rgba(244,247,251,0.06);
      --tint-3:rgba(244,247,251,0.08);
      --card-tint:rgba(244,247,251,0.02);
      --card-tint-hover:rgba(244,247,251,0.04);
      --ghost-num:rgba(244,247,251,0.045);
      --grid-line:rgba(244,247,251,0.035);
      --nav-bg:rgba(7,24,39,0.92);
      --menu-bg:rgba(7,24,39,0.97);
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"]{
    --navy:#071827;
    --navy-deep:#040f19;
    --surface:#0F2A3D;
    --surface-2:#132F42;
    --line:rgba(244,247,251,0.10);
    --line-strong:rgba(244,247,251,0.18);
    --pearl:#F4F7FB;
    --muted:#93A8B8;
    --teal:#26E6C8;
    --teal-dim:rgba(38,230,200,0.14);
    --violet:#8B5CF6;
    --violet-ink:#A78BFA;
    --violet-dim:rgba(139,92,246,0.16);
    --good:#3DDC97;
    --warn:#F5B942;
    --danger:#F26B6B;
    --on-accent:#04231d;
    --teal-hover:#4ff0d6;
    --tint-1:rgba(244,247,251,0.03);
    --tint-2:rgba(244,247,251,0.06);
    --tint-3:rgba(244,247,251,0.08);
    --card-tint:rgba(244,247,251,0.02);
    --card-tint-hover:rgba(244,247,251,0.04);
    --ghost-num:rgba(244,247,251,0.045);
    --grid-line:rgba(244,247,251,0.035);
    --nav-bg:rgba(7,24,39,0.92);
    --menu-bg:rgba(7,24,39,0.97);
    color-scheme: dark;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--navy);
    color:var(--pearl);
    font-family:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
    -webkit-font-smoothing:antialiased;
    line-height:1.5;
    transition:background-color .25s ease, color .25s ease;
  }
  /* One continuous ambient field for the homepage specifically (scoped to body.home-glow,
     set only on index.html — other pages keep the flat body background above) — soft teal/
     violet glows seeded at intervals down the page, instead of a per-section fill. Percentages
     are of the full scrollable height, so they land roughly near each section regardless of
     how long the page is, over the same navy→navy-deep base the hero used to keep to itself.
     Sections no longer paint their own background on top of this (see #preview/#membership
     below), so the glow reads as one unbroken atmosphere instead of alternating flat bands
     with seams between them.

     The faint grid-line pattern lives here too now, as the first (topmost) layer, tiling the
     whole document instead of stopping dead at the bottom of the hero — it used to be a local
     .hero::before pseudo-element, which is exactly the "clean break" under the header: the grid
     just stopped and the rest of the page was plain. One shared layer here means the hero no
     longer needs its own copy (removed below, so the two can't double up or drift out of phase
     with each other). */
  /* Glow pools down the document. Earlier passes alternated a single pool between the left and
     right edge every ~11-16% — each pool only reached about halfway across, so a given SIDE of
     the page only got a new pool every other step, leaving an exposed gap (most visibly right
     where the hero hands off to #preview, around 15% down). Pools here are much larger and
     fade out much later (72% vs. the original ~56-58%), so each one's reach comfortably crosses
     the page's center and overlaps its neighbors on BOTH sides — there's no longer a side that
     can go dark between two pools. Spacing is ~9-10% apart so coverage never fully drops out. */
  body.home-glow{
    background:
      linear-gradient(var(--grid-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
      radial-gradient(1150px 720px at 82% 0%, rgba(139,92,246,0.19), transparent 72%),
      radial-gradient(1100px 700px at 16% 9%, rgba(38,230,200,0.15), transparent 72%),
      radial-gradient(1150px 720px at 84% 19%, rgba(38,230,200,0.12), transparent 72%),
      radial-gradient(1100px 700px at 14% 29%, rgba(139,92,246,0.13), transparent 72%),
      radial-gradient(1150px 720px at 84% 40%, rgba(139,92,246,0.11), transparent 72%),
      radial-gradient(1100px 700px at 14% 51%, rgba(38,230,200,0.12), transparent 72%),
      radial-gradient(1150px 720px at 84% 62%, rgba(38,230,200,0.11), transparent 72%),
      radial-gradient(1100px 700px at 14% 73%, rgba(139,92,246,0.12), transparent 72%),
      radial-gradient(1150px 720px at 84% 85%, rgba(139,92,246,0.11), transparent 72%),
      radial-gradient(1100px 700px at 16% 96%, rgba(38,230,200,0.11), transparent 72%),
      linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 40%, var(--navy-deep) 70%, var(--navy) 100%);
    background-repeat:repeat,repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
    background-size:48px 48px,48px 48px,auto,auto,auto,auto,auto,auto,auto,auto,auto,auto,auto;
  }
  /* main (not body/html) clips the .reveal-left/.reveal-right slide-in effects, which start
     off-canvas — scoped here rather than on body so it can't interfere with the sticky nav. */
  main{overflow-x:hidden;}
  .sr-only{
    position:absolute;
    width:1px;height:1px;
    padding:0;margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }
  h1,h2,h3,.display{
    font-family:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
    font-weight:650;
    letter-spacing:-0.01em;
    text-wrap:balance;
    margin:0;
  }
  .mono, .odds, .num{
    font-family:'Roboto Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
    font-variant-numeric: tabular-nums;
  }
  a{color:inherit;}
  img{max-width:100%;}
  [hidden]{display:none!important;}
  ::selection{background:var(--teal-dim);color:var(--pearl);}

  a:focus-visible, button:focus-visible, .tab:focus-visible{
    outline:2px solid var(--teal);
    outline-offset:3px;
    border-radius:6px;
  }

  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding-inline:24px;
    position:relative;
  }
  @media (max-width:640px){ .wrap{padding-inline:18px;} }

  /* ---------- Nav ---------- */
  header.nav{
    position:sticky;
    top:env(safe-area-inset-top,0px);
    z-index:50;
    background:var(--nav-bg);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    transition:background-color .25s ease;
  }
  /* The frosted-glass nav sits on a rich, varying glow+grid background now (see body.home-glow),
     so its blur used to read as a blurred rectangle with a hard bottom edge — exactly the "cut
     off" look. Tapering the header's own background + blur to transparent over its last ~20%
     (a few px, well below the logo/buttons, which sit higher up and stay fully opaque) lets it
     dissolve into the page instead of ending on a line. Homepage only — other pages' nav keeps
     its plain edge, which was never an issue against their flat background. */
  body.home-glow header.nav{
    -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
    mask-image:linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
  }
  /* Mobile scroll jank fix (2 Oct 2026): header.nav is position:sticky, so its
     backdrop-filter blur has to resample whatever's scrolled behind it on every
     single frame. That's cheap over a flat background, but body.home-glow paints
     13 stacked gradient layers (grid lines + 10 radial glow pools), and blurring
     that combination every frame is what was making the whole page feel janky/
     bouncy while scrolling on phones -- confirmed by it showing up site-wide during
     scroll, not just near the hero where the glow is strongest. --nav-bg is already
     92% opaque on its own, so the blur was buying very little visually; dropping it
     (and the mask that only existed to taper the blur's hard edge) below 640px
     keeps the frosted-glass look on desktop, where it's cheap, and gives mobile a
     plain, fast, still-nearly-opaque bar instead. */
  @media (max-width:640px){
    header.nav{
      backdrop-filter:none;
      -webkit-backdrop-filter:none;
    }
    body.home-glow header.nav{
      -webkit-mask-image:none;
      mask-image:none;
    }
  }
  .nav-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding-block:13px;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:11px;
    text-decoration:none;
    flex:none;
  }
  .brand svg{width:34px;height:34px;flex:none;}
  .brand-text{
    display:inline-flex;
    align-items:baseline;
    font-family:'Sora',sans-serif;
    font-weight:600;
    font-size:1.34rem;
    letter-spacing:0.005em;
  }
  .brand-text .oct{color:var(--pearl);}
  .brand-text .odds-word{
    font-family:'Sora',sans-serif;
    background:linear-gradient(90deg, var(--teal), var(--violet));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    margin-left:0.08em;
  }
  .brand:hover .odds-word{filter:brightness(1.15);}

  /* No nav links anywhere on the site any more (27 Sep 2026 redesign) — the header is
     just the wordmark on the left and three controls on the right (theme toggle,
     account, Join), at every width. That retires the old width-measuring .nav-fits
     system entirely: with nothing to fit or collapse, there's no hamburger and no
     mobile menu to build one for. */
  .nav-cta{display:flex;align-items:center;gap:10px;flex:none;}
  .btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-family:'Sora',sans-serif;
    font-weight:600;
    font-size:0.92rem;
    padding:11px 20px;
    border-radius:999px;
    border:1px solid transparent;
    cursor:pointer;
    text-decoration:none;
    min-height:44px;
    min-width:44px;
    overflow:hidden;
    transition:transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  }
  .btn:active{transform:translateY(1px);}
  .btn-primary{background:var(--teal-brand);color:var(--on-teal-brand);box-shadow:0 0 0 rgba(38,230,200,0);}
  .btn-primary:hover{background:var(--teal-brand-hover);box-shadow:0 8px 24px -8px rgba(38,230,200,0.55);}
  .btn-ghost{background:transparent;color:var(--pearl);border-color:var(--line-strong);}
  .btn-ghost:hover{border-color:var(--teal);color:var(--teal);}
  .btn-block{width:100%;}
  .btn-icon{width:16px;height:16px;flex:none;}
  .nav-theme-toggle,.nav-icon-btn{width:44px;padding:0;}
  .nav-theme-toggle svg,.nav-icon-btn svg{width:18px;height:18px;}
  .nav-theme-toggle .icon-moon{display:none;}
  .nav-theme-toggle.is-dark .icon-sun{display:none;}
  .nav-theme-toggle.is-dark .icon-moon{display:block;}

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    overflow:hidden;
    padding-block:76px 64px;
    /* No local background here anymore -- body.home-glow's own ambient pools (below) already
       cover this area. A local glow used to be layered on top for extra richness, but its
       radial-gradient pools extended past .hero's own box and got clipped hard by this
       overflow:hidden at the hero's bottom edge -- exactly where a pool was strongest (the
       teal pool centered at 6% 96%, just inside the bottom-left corner). That produced a
       crisp horizontal line where the extra glow stopped and only body's dimmer field showed
       through, which is the "cut off" Jake flagged. Three full redesigns of body's own
       gradient schedule never touched this because the line was never coming from body's
       background at all. */
  }
  /* The grid-line pattern used to live here as a .hero::before pseudo-element, local to the
     hero only — that's what made it stop dead at the bottom of the hero. It's now one layer
     of body.home-glow's background (above) so it tiles the whole page instead. */
  .hero-grid{
    position:relative;
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    gap:48px;
    align-items:center;
  }
  @media (max-width:900px){ .hero-grid{grid-template-columns:1fr;} .hero-mark{order:-1;} }

  /* Centered hero layout — copy stacked and centered, the octopus-mark grid replaced
     by the market-line graphic below. Single column at every width, so there is no
     900px breakpoint to manage here the way .hero-grid needs one. */
  .hero-center{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .hero-center .headline,
  .hero-center .sub{ margin-inline:auto; }
  .hero-center .hero-actions{ justify-content:center; }
  .hero-center .hero-proof{ justify-content:center; }

  .hero-line-wrap{ width:100%; max-width:900px; margin:48px auto 0; }
  .hero-line-wrap svg{ width:100%; height:auto; display:block; overflow:visible; }
  .hero-line-wrap .flow-path{
    fill:none;
    stroke:url(#heroLineGrad);
    stroke-width:2.5;
    filter:drop-shadow(0 0 4px rgba(38,230,200,0.35)) drop-shadow(0 0 2px rgba(139,92,246,0.25));
  }
  .hero-line-wrap text{
    font-family:'Roboto Mono',monospace;
    font-size:13px;
    fill:var(--muted);
  }
  .hero-line-cap{
    text-align:center;
    margin-top:10px;
    font-family:'Roboto Mono',monospace;
    font-size:0.66rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--muted);
  }
  @media (max-width:640px){
    .hero-line-wrap text{ display:none; }
  }

  /* Hero market line — draws itself in once on load, gated on the same paused/hero-play
     mechanism as the rest of the hero (below), so it starts from a real settled paint
     boundary instead of racing the main thread. Reduced-motion visitors see it already
     drawn, with no animation. */
  @media (prefers-reduced-motion: no-preference){
    .hero-line-wrap .flow-path{
      stroke-dasharray:1300;
      stroke-dashoffset:1300;
      animation:heroLineDraw 2.2s cubic-bezier(.16,1,.3,1) 1.3s both;
      animation-play-state:paused;
    }
    html.hero-play .hero-line-wrap .flow-path{ animation-play-state:running; }
    @keyframes heroLineDraw{ to{ stroke-dashoffset:0; } }

    .hero-line-wrap .line-mark{
      opacity:0;
      transform:scale(0);
      transform-box:fill-box;
      transform-origin:center;
      animation:heroLineMarkIn .6s cubic-bezier(.16,1,.3,1) both;
      animation-play-state:paused;
    }
    html.hero-play .hero-line-wrap .line-mark{ animation-play-state:running; }
    .hero-line-wrap .line-mark:nth-of-type(1){ animation-delay:1.9s; }
    .hero-line-wrap .line-mark:nth-of-type(2){ animation-delay:2.35s; }
    .hero-line-wrap .line-mark:nth-of-type(3){ animation-delay:2.8s; }
    @keyframes heroLineMarkIn{ to{ opacity:1; transform:scale(1); } }
  }

  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:'Roboto Mono',monospace;
    font-size:0.76rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--teal);
    background:var(--teal-dim);
    border:1px solid rgba(38,230,200,0.30);
    padding:7px 14px;
    border-radius:999px;
    margin-bottom:22px;
  }
  .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--teal);}

  h1.headline{
    font-size:clamp(2.1rem, 4.6vw, 3.4rem);
    line-height:1.06;
    max-width:14ch;
  }
  h1.headline .accent{
    background:linear-gradient(90deg, var(--teal), var(--violet));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }

  .sub{
    color:var(--muted);
    font-size:1.08rem;
    max-width:46ch;
    margin-top:20px;
  }
  .hero-actions{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;}

  .hero-proof{
    display:flex;
    gap:28px;
    margin-top:40px;
    flex-wrap:wrap;
  }
  .proof-item .num{font-size:1.3rem;color:var(--pearl);display:block;}
  .proof-item .cap{font-size:0.78rem;color:var(--muted);}

  /* Hero load-in: the headline drops in from above, the subhead/buttons/proof stats rise in
     underneath it one after another, and the octopus mark slides in from off the right edge
     of the page — all once, on load, as plain CSS animations rather than the scroll .reveal
     system, since the hero is already in view on first paint (no IntersectionObserver needed,
     and no risk of a flash-of-hidden-content for a moment before JS runs). The hero itself has
     overflow:hidden, so the mark's off-screen starting position never causes a horizontal
     scrollbar. Reduced-motion visitors get none of this — the media query means the base,
     final-position styles are all they ever see. */
  @media (prefers-reduced-motion: no-preference){
    /* Each hero element's animation starts out PAUSED (frozen on its 0% frame, thanks to
       fill-mode "both") instead of playing immediately on load. CSS animations run on wall-clock
       time, not paint frames: if the main thread is busy for a stretch right as one of these
       would normally start (parsing the page's own script, the big inline octopus SVG, the
       reveal-system setup, a slow device, a cold cache, etc.), the clock keeps ticking through
       that block, and by the time the browser is finally free to paint, the animation can already
       be a big chunk of the way through — which is exactly the "barely moves" / "just appears"
       glitch: sometimes the thread is free right away and the full slide plays, sometimes it
       isn't and the animation has already half-finished (or more) before the first frame anyone
       actually sees. Staying paused sidesteps this entirely: nothing's clock is running yet, so
       nothing can secretly get ahead. The JS below flips every one of these to "running" inside a
       double requestAnimationFrame — i.e. only once the browser has genuinely reached a settled
       paint boundary — so every visitor's animation starts from the exact same real 0% frame. */
    .headline, .sub, .hero-actions, .hero-proof, .hero-mark{ animation-play-state:paused; }
    html.hero-play .headline, html.hero-play .sub, html.hero-play .hero-actions,
    html.hero-play .hero-proof, html.hero-play .hero-mark{ animation-play-state:running; }
    .headline{ animation:heroTitleIn 2.7s cubic-bezier(.16,1,.3,1) both; }
    @keyframes heroTitleIn{
      0%{ opacity:0; transform:translateY(-150px); }
      100%{ opacity:1; transform:translateY(0); }
    }
    .sub{ animation:heroRiseIn 1.7s cubic-bezier(.16,1,.3,1) .6s both; }
    .hero-actions{ animation:heroRiseIn 1.7s cubic-bezier(.16,1,.3,1) .82s both; }
    .hero-proof{ animation:heroRiseIn 1.7s cubic-bezier(.16,1,.3,1) 1.04s both; }
    @keyframes heroRiseIn{
      0%{ opacity:0; transform:translateY(26px); }
      100%{ opacity:1; transform:translateY(0); }
    }
    .hero-mark{ animation:heroMarkIn 3.1s cubic-bezier(.16,1,.3,1) .25s both; }
    @keyframes heroMarkIn{
      0%{ opacity:0; transform:translateX(65vw); }
      100%{ opacity:1; transform:translateX(0); }
    }
  }

  .hero-mark{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }
  .mark-stage{
    position:relative;
    width:100%;
    max-width:440px;
    aspect-ratio:1/1;
    cursor:pointer;
  }
  .mark-stage svg{width:100%;height:100%;overflow:visible;}

  /* ---------- Live, interactive octopus mark ---------- */
  .pupil, .pupil-glint{ pointer-events:none; }
  .octo-svg{ transition:filter .2s ease; }
  .octo-svg.camo{ animation:camo-shift 1.15s ease-in-out; }
  @keyframes camo-shift{
    0%{ filter:hue-rotate(0deg) saturate(1); }
    30%{ filter:hue-rotate(130deg) saturate(1.7); }
    65%{ filter:hue-rotate(255deg) saturate(1.5); }
    100%{ filter:hue-rotate(360deg) saturate(1); }
  }
  .ripple{
    fill:none;
    stroke:var(--teal);
    stroke-width:2;
    opacity:0.6;
    transform-box:fill-box;
    transform-origin:center;
    animation:ripple-grow 0.9s ease-out forwards;
    pointer-events:none;
  }
  @keyframes ripple-grow{
    0%{ opacity:0.55; transform:scale(0.25); }
    100%{ opacity:0; transform:scale(2.4); }
  }
  @media (prefers-reduced-motion: reduce){
    .octo-svg.camo{ animation:none; filter:hue-rotate(210deg) saturate(1.35); }
    .ripple{ display:none; }
  }
  @media (prefers-reduced-motion: no-preference){
    .mark-stage.pointer-active .tentacle{
      animation:none;
      transform:rotate(calc(var(--sway, 0) * var(--tfac, 1) * 1deg));
      transition:transform .4s ease-out;
    }
  }


  .float-chip{
    position:absolute;
    display:flex;
    align-items:center;
    gap:7px;
    font-family:'Roboto Mono',monospace;
    font-size:0.74rem;
    border:1.5px solid transparent;
    background:
      linear-gradient(var(--navy), var(--navy)) padding-box,
      linear-gradient(90deg, var(--teal), var(--violet)) border-box;
    padding:8px 12px;
    border-radius:999px;
    box-shadow:0 12px 28px -14px rgba(0,0,0,0.6);
    white-space:nowrap;
  }
  .float-chip svg{width:12px;height:12px;flex:none;}
  .chip-num{
    background:linear-gradient(90deg, var(--teal), var(--violet));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    font-weight:600;
  }
  /* Anchored just beyond the SVG tip of tentacles 1, 3 and 6 (tip coords, viewBox 420 -> %,
     nudged further outward along each tentacle's own direction) so the bubble reads as
     "attached" without ever sitting on top of the tentacle line or its flick/suction marks. */
  .chip-t1{ left:5.7%; top:72.84%; transform:translate(4%, -104%); }
  .chip-t3{ left:46.2%; top:85.24%; transform:translate(-46%, -118%); }
  .chip-t6{ left:94.8%; top:41.44%; transform:translate(-104%, -46%); }
  @media (prefers-reduced-motion: no-preference){
    .chip-t1{ animation: float-a 5.5s ease-in-out infinite; }
    .chip-t3{ animation: float-b 6s ease-in-out infinite; }
    .chip-t6{ animation: float-c 6.5s ease-in-out infinite; }
    @keyframes float-a{ 0%,100%{transform:translate(4%,-104%);} 50%{transform:translate(4%,-114%);} }
    @keyframes float-b{ 0%,100%{transform:translate(-46%,-118%);} 50%{transform:translate(-46%,-128%);} }
    @keyframes float-c{ 0%,100%{transform:translate(-104%,-46%);} 50%{transform:translate(-104%,-54%);} }
    .tentacle{ animation: drift 7s ease-in-out infinite; transform-origin:202px 141px; }
    .tentacle:nth-of-type(2){ animation-delay:-1.1s; }
    .tentacle:nth-of-type(3){ animation-delay:-2.3s; }
    .tentacle:nth-of-type(4){ animation-delay:-3.6s; }
    .tentacle:nth-of-type(5){ animation-delay:-4.8s; }
    .tentacle:nth-of-type(6){ animation-delay:-5.9s; }
    @keyframes drift{
      0%,100%{ transform:rotate(0deg); }
      50%{ transform:rotate(1.6deg); }
    }
    .ping{ animation: ping 3.6s ease-out infinite; transform-origin:210px 210px; }
    @keyframes ping{
      0%{ opacity:0.62; transform:scale(0.85); }
      70%{ opacity:0; transform:scale(1.15); }
      100%{ opacity:0; transform:scale(1.15); }
    }
    .live-dot{ animation: pulse-dot 1.8s ease-in-out infinite; }
    @keyframes pulse-dot{
      0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(38,230,200,0.55); }
      50%{ opacity:0.7; box-shadow:0 0 0 4px rgba(38,230,200,0); }
    }
    .live-badge{ animation: pulse-badge 2.4s ease-in-out infinite; }
    @keyframes pulse-badge{
      0%,100%{ box-shadow:0 0 0 0 rgba(38,230,200,0.38); }
      50%{ box-shadow:0 0 0 8px rgba(38,230,200,0); }
    }
  }
  @media (max-width:480px){ .float-chip{display:none;} .live-badge{display:none;} }

  .ping{ stroke:var(--teal); }

  .tentacle{ cursor:pointer; transition:opacity .2s ease, filter .2s ease; }
  .tentacle path{ transition:stroke-width .2s ease; }
  .tentacle:hover, .tentacle:focus-visible{
    opacity:1 !important;
    filter:drop-shadow(0 0 7px rgba(38,230,200,0.75)) drop-shadow(0 0 3px rgba(139,92,246,0.55));
  }
  .tentacle:hover path, .tentacle:focus-visible path{ stroke-width:5.2; }

  .live-badge{
    position:absolute;
    top:4%; left:1%;
    display:flex;
    align-items:center;
    gap:7px;
    font-family:'Roboto Mono',monospace;
    font-size:0.72rem;
    border:1.5px solid transparent;
    background:
      linear-gradient(var(--navy), var(--navy)) padding-box,
      linear-gradient(90deg, var(--teal), var(--violet)) border-box;
    padding:7px 12px;
    border-radius:999px;
    cursor:pointer;
  }
  .live-dot{width:7px;height:7px;border-radius:50%;background:var(--teal);flex:none;}
  #chipMoveText{transition:opacity .2s ease;}

  /* ---------- Section shell ---------- */
  section{padding-block:84px;position:relative;}
  /* Sections used to alternate flat tinted bands with hairline borders (#preview/#membership
     on --surface, #faq/#about on the bare page background) so they'd read as distinct chapters
     on scroll. That's what made the page look like stacked blocks instead of one continuous
     surface, so it's gone — every section now sits directly on body's ambient glow (above),
     and each section's own cards (.preview-shell, .plan, .faq-item, …) already carry their own
     surface fill, so nothing loses contrast by losing the band behind it. */

  /* Scroll reveal: below-the-fold section heads and content cards fade + slide up into
     place as they enter the viewport, so each section arrives as its own beat rather than
     the color banding alone doing all the work. Hidden state only applies once the JS below
     has run (via the .js-reveal class on <html>, set as early as possible) so content is
     never invisible for no-JS visitors, and reduced-motion visitors skip the animation and
     see everything in place immediately. */
  /* The default reveal also eases in from a slight blur + scale("focus pop") on top of the
     fade-up, so content feels like it's settling into focus rather than just sliding —
     restrained (small blur radius, small scale delta), but a bit more premium than a plain
     fade. Directional variants below only override `transform` (keeping their own slide),
     so they still inherit this blur from here. */
  .js-reveal .reveal{ opacity:0; transform:translateY(28px) scale(0.96); filter:blur(6px); }
  /* Directional variants — used on How it works, where the heading comes in from the
     right and the three step cards come in from the left, crossing paths for a bit more
     motion than the default straight fade-up. These run slower than the default reveal
     and, on the step cards, each one waits for the previous one to be well underway
     (see .step.reveal-d1/2/3 below) rather than sliding in together. */
  .js-reveal .reveal-right{ transform:translateX(56px); }
  .js-reveal .reveal-left{ transform:translateX(-100vw); }
  /* .step already carries its own fast transition (for the hover lift, defined further down
     under "How it works") that lists its own transition-property set (transform, border-color,
     box-shadow — notably no opacity) and shares equal specificity with the reveal rules above,
     so as the later rule it was silently winning outright: the slide-in was snapping in over
     .18s instead of 1.9s, AND opacity wasn't part of that list at all, so the card popped
     fully visible before it had finished sliding. This higher-specificity override restates
     the whole transition explicitly (opacity + transform slow and smooth, border-color/
     box-shadow left fast for hover) so the entrance is correct. .reveal-done (added by JS
     once the entrance transition finishes) then hands hover back its normal fast timing —
     see the rule right after the How it works section below. */
  @media (prefers-reduced-motion: no-preference){
    .step.reveal-left{
      transition:
        opacity 2.3s cubic-bezier(.16,1,.3,1),
        transform 2.3s cubic-bezier(.16,1,.3,1),
        filter 2.3s cubic-bezier(.16,1,.3,1),
        border-color .18s ease,
        box-shadow .18s ease;
    }
  }
  /* Product preview: each pick card drops in from above once the section is scrolled into
     view (or immediately when a tab is switched — see the JS). .pick-card already has its
     own transition (border-color/background only, for the hover state), which — same story
     as .step above — would otherwise win the cascade and silently drop opacity/transform
     from the list, so this override restates the full set explicitly. Slow and tall on
     purpose, with a wide per-card stagger (set inline in cardHTML), so the cards visibly
     cascade top to bottom rather than dropping in together. */
  .js-reveal .reveal-top{ transform:translateY(-90px) scale(0.96); }
  @media (prefers-reduced-motion: no-preference){
    .pick-card.reveal-top{
      transition:
        opacity 2.1s cubic-bezier(.16,1,.3,1),
        transform 2.1s cubic-bezier(.16,1,.3,1),
        filter 2.1s cubic-bezier(.16,1,.3,1),
        border-color .15s ease,
        background .15s ease;
    }
  }
  .js-reveal .reveal.is-visible{ opacity:1; transform:none; filter:none; }
  @media (prefers-reduced-motion: no-preference){
    .reveal{ transition:opacity 1.1s cubic-bezier(.22,.61,.36,1), transform 1.1s cubic-bezier(.22,.61,.36,1), filter 1.1s cubic-bezier(.22,.61,.36,1); }
    /* Placed AFTER the generic .reveal rule above on purpose: both are single-class selectors
       (equal specificity), and the later rule in source order wins per-property in a cascade
       tie. .reveal's shorthand sets transition-duration as part of setting opacity+transform
       together, so a plain "transition-duration:1.9s" rule declared earlier here — as this
       used to be — was silently discarded rather than overriding it, and the section-head
       ("How it works") title quietly fell back to the fast .7s default. Restating the full
       shorthand explicitly, this far down, is what actually wins the tie. .step already has
       its own higher-specificity .step.reveal-left rule above and stays unaffected by this. */
    .reveal-right, .reveal-left{
      transition: opacity 2.3s cubic-bezier(.16,1,.3,1), transform 2.3s cubic-bezier(.16,1,.3,1), filter 2.3s cubic-bezier(.16,1,.3,1);
    }
  }
  @media (prefers-reduced-motion: reduce){
    .js-reveal .reveal{ opacity:1; transform:none; filter:none; }
  }
  .reveal-d1{transition-delay:.05s;}
  .reveal-d2{transition-delay:.15s;}
  .reveal-d3{transition-delay:.25s;}
  .reveal-d4{transition-delay:.35s;}
  /* FAQ list: each question is its own .reveal target (there are too many, spread over too
     tall a block, for a single .reveal-group to feel right — they should arrive a few at a
     time as you actually scroll past them). A short 4-step cycle staggers whichever handful
     share a viewport without the delay climbing to seconds by the bottom of a long list. */
  .faq-item.reveal:nth-child(4n+1){transition-delay:0s;}
  .faq-item.reveal:nth-child(4n+2){transition-delay:.08s;}
  .faq-item.reveal:nth-child(4n+3){transition-delay:.16s;}
  .faq-item.reveal:nth-child(4n+4){transition-delay:.24s;}
  /* Step cards specifically: left card first, then each next one after the previous is
     well underway — a clear one-at-a-time sequence rather than the tighter stagger used
     elsewhere on the page. */
  .step.reveal-d1{transition-delay:0s;}
  .step.reveal-d2{transition-delay:.4s;}
  .step.reveal-d3{transition-delay:.8s;}

  .section-head{max-width:640px;margin-bottom:44px;}
  .kicker{
    font-family:'Roboto Mono',monospace;
    font-weight:600;
    font-size:clamp(1rem,2.1vw,1.35rem);
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--violet-ink);
    margin-bottom:12px;
    display:block;
  }
  .section-head h2{font-size:clamp(1.5rem,3vw,2.1rem);}
  .section-head p{color:var(--muted);margin-top:14px;font-size:1.02rem;max-width:56ch;}

  /* Shared decorative "market line" divider — the same visual language as the hero
     mark's tentacles, used sparingly as a connective flourish between sections. */
  .flow-line{display:block;width:100%;height:40px;margin:-6px 0 28px;opacity:0.95;}
  .flow-line .flow-path{filter:drop-shadow(0 0 4px rgba(38,230,200,0.35)) drop-shadow(0 0 2px rgba(139,92,246,0.25));}
  @media (max-width:860px){ .flow-line{display:none;} }

  /* ---------- How it works ---------- */
  .steps{
    position:relative;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
  }
  @media (max-width:860px){ .steps{grid-template-columns:1fr;} }
  .step{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    border:1px solid var(--line);
    background:var(--surface);
    border-radius:var(--radius-md);
    padding:30px 22px 24px;
    transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .step:hover{
    transform:translateY(-4px);
    border-color:var(--line-strong);
    box-shadow:0 20px 40px -28px rgba(0,0,0,0.7);
  }
  /* Restores the normal fast hover transition once the slow entrance slide has actually
     finished (class added by JS on transitionend) — same specificity as .step.reveal-left
     above, but defined later, so it wins the tie and hover stops inheriting the slow,
     opacity-inclusive entrance transition. */
  .step.reveal-done{ transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
  .step-ghost{
    position:absolute;
    z-index:0;
    top:0; right:0;
    font-family:'Sora',sans-serif;
    font-weight:700;
    font-size:3.6rem;
    line-height:1;
    color:var(--violet);
    opacity:0.4;
    pointer-events:none;
  }
  .step-badge{
    position:relative;
    z-index:1;
    width:52px;height:52px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:18px;
  }
  .step-badge svg{width:22px;height:22px;}
  .step-badge.teal{color:var(--teal);background:var(--teal-dim);box-shadow:inset 0 0 0 1px rgba(38,230,200,0.3);}
  .step-badge.violet{color:var(--violet);background:var(--violet-dim);box-shadow:inset 0 0 0 1px rgba(139,92,246,0.3);}
  .step h3{position:relative;z-index:1;font-size:1.12rem;margin-bottom:8px;}
  .step p{position:relative;z-index:1;color:var(--muted);font-size:0.94rem;margin:0;}

  /* ---------- Product preview ---------- */
  .preview-shell{
    position:relative;
    border:1px solid var(--line-strong);
    border-radius:var(--radius-lg);
    background:linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
    overflow:hidden;
    box-shadow:0 40px 80px -40px rgba(0,0,0,0.6);
  }
  .preview-shell::before{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:2px;
    background:linear-gradient(90deg, var(--teal), var(--violet));
    opacity:0.8;
  }
  .preview-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 20px;
    border-bottom:1px solid var(--line);
    flex-wrap:wrap;
  }
  .preview-bar-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
  /* Own brand mark in the panel header instead of a mac/browser-window mockup (27 Sep 2026) —
     a small octopus mark plus a live-status pill reads as "this is OctopusOdds' own app",
     not "this is a screenshot dressed up in someone else's browser chrome." */
  .preview-mark{width:24px;height:24px;flex:none;display:flex;}
  .preview-mark svg{width:100%;height:100%;}
  @media (max-width:480px){ .preview-mark{display:none;} }
  .panel-live-badge{
    display:inline-flex;align-items:center;gap:7px;
    font-family:'Roboto Mono',monospace;font-size:0.72rem;letter-spacing:0.02em;
    color:var(--teal);border:1px solid var(--teal);background:var(--teal-dim);
    padding:5px 11px;border-radius:999px;white-space:nowrap;
  }
  @media (max-width:400px){ .panel-live-badge{display:none;} }
  .preview-tabs{
    display:flex;
    gap:2px;
    flex-wrap:wrap;
    padding:3px;
    border:1px solid var(--line);
    border-radius:999px;
    background:var(--tint-1);
  }
  .tab{
    font-family:'Sora',sans-serif;
    font-size:0.82rem;
    font-weight:600;
    color:var(--muted);
    background:transparent;
    border:1px solid transparent;
    border-radius:999px;
    padding:7px 14px;
    cursor:pointer;
    min-height:34px;
    transition:background .15s ease, color .15s ease, border-color .15s ease;
  }
  .tab:hover{color:var(--pearl);}
  .tab[aria-selected="true"]{background:var(--teal-dim);color:var(--teal);border-color:rgba(38,230,200,0.3);}
  .demo-tag{
    font-family:'Roboto Mono',monospace;
    font-size:0.72rem;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--warn);
    border:1px solid rgba(245,185,66,0.35);
    background:rgba(245,185,66,0.10);
    padding:5px 10px;
    border-radius:999px;
    white-space:nowrap;
  }
  .preview-body{padding:22px;}
  .pick-list{display:flex;flex-direction:column;gap:12px;}
  .pick-card{
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:16px;
    align-items:center;
    border:1px solid var(--line);
    border-left:3px solid var(--line-strong);
    background:var(--card-tint);
    border-radius:var(--radius-sm);
    padding:16px 18px;
    transition:border-color .15s ease, background .15s ease;
  }
  .pick-card:hover{border-top-color:var(--line-strong);border-right-color:var(--line-strong);border-bottom-color:var(--line-strong);background:var(--card-tint-hover);}
  .pick-card[data-status="active"]{border-left-color:var(--good);}
  .pick-card[data-status="moved"]{border-left-color:var(--warn);}
  .pick-card[data-status="settled"]{border-left-color:var(--violet);}
  @media (max-width:640px){ .pick-card{grid-template-columns:1fr;} .pick-right{align-items:flex-start!important;} }
  .pick-sport{
    font-family:'Roboto Mono',monospace;
    font-size:0.72rem;
    color:var(--muted);
    background:var(--tint-2);
    padding:8px 10px;
    border-radius:8px;
    text-align:center;
    min-width:52px;
  }
  .pick-mid h4{font-size:0.98rem;font-weight:600;margin:0 0 4px;}
  .pick-meta{color:var(--muted);font-size:0.82rem;display:flex;gap:10px;flex-wrap:wrap;}
  .pick-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
  .price{font-size:1.05rem;font-weight:600;}
  .status{
    font-size:0.72rem;
    font-weight:600;
    padding:4px 10px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
  }
  .status::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;}
  .status-active{color:var(--good);background:rgba(61,220,151,0.12);}
  .status-active::before{background:var(--good);}
  .status-moved{color:var(--warn);background:rgba(245,185,66,0.12);}
  .status-moved::before{background:var(--warn);}
  .status-win{color:var(--good);background:rgba(61,220,151,0.12);}
  .status-win::before{background:var(--good);}
  .status-loss{color:var(--danger);background:rgba(242,107,107,0.12);}
  .status-loss::before{background:var(--danger);}
  .status-push{color:var(--muted);background:var(--tint-3);}
  .status-push::before{background:var(--muted);}
  .empty-note{
    padding:32px 18px;
    text-align:center;
    color:var(--muted);
    font-size:0.92rem;
  }

  /* ---------- Transparency ---------- */
  .metrics{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    overflow:hidden;
  }
  @media (max-width:760px){ .metrics{grid-template-columns:repeat(2,1fr);} }
  .metric{position:relative;background:var(--surface);padding:22px 20px 18px;overflow:hidden;}
  .metric .num{font-size:1.6rem;display:block;margin-bottom:4px;}
  .metric .lbl{color:var(--muted);font-size:0.82rem;}
  .metric .num.up{color:var(--teal);}
  .metric .spark{display:block;width:100%;height:26px;margin-top:14px;}

  .note-card{
    margin-top:22px;
    border:1px solid var(--line);
    border-left:3px solid var(--violet);
    background:rgba(139,92,246,0.06);
    border-radius:var(--radius-sm);
    padding:18px 20px;
    color:var(--muted);
    font-size:0.9rem;
  }
  .note-card strong{color:var(--pearl);}

  /* ---------- Membership ---------- */
  .plans{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
  }
  @media (max-width:900px){ .plans{grid-template-columns:1fr;max-width:420px;margin-inline:auto;} }
  .plan{
    position:relative;
    isolation:isolate;
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    padding:28px 26px;
    background:var(--surface);
    display:flex;
    flex-direction:column;
    gap:18px;
    transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .plan::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    border-radius:inherit;
    opacity:0;
    transition:opacity .25s ease;
    pointer-events:none;
  }
  .plan:hover::after{opacity:1;}
  .plan:hover{transform:translateY(-4px);box-shadow:0 24px 48px -30px rgba(0,0,0,0.75);}
  .plan:nth-child(1)::after{background:linear-gradient(160deg, rgba(139,92,246,0.20), rgba(139,92,246,0.02) 70%);}
  .plan:nth-child(1):hover{border-color:rgba(139,92,246,0.5);}
  .plan:nth-child(3)::after{background:linear-gradient(160deg, rgba(38,230,200,0.16), rgba(139,92,246,0.16) 75%);}
  .plan:nth-child(3):hover{border-color:rgba(139,92,246,0.4);}
  .plan.featured{
    border-color:rgba(38,230,200,0.5);
    background:linear-gradient(180deg, rgba(38,230,200,0.10), var(--surface) 60%);
  }
  .plan.featured::after{background:linear-gradient(160deg, rgba(38,230,200,0.28), rgba(38,230,200,0.04) 70%);}
  .plan.featured:hover{border-color:var(--teal);box-shadow:0 26px 56px -28px rgba(38,230,200,0.35);}
  .plan.featured::before{
    content:"Most members choose this";
    position:absolute;
    top:-13px;
    left:26px;
    font-family:'Roboto Mono',monospace;
    font-size:0.68rem;
    letter-spacing:0.04em;
    text-transform:uppercase;
    background:var(--teal);
    color:var(--on-accent);
    padding:5px 10px;
    border-radius:999px;
  }
  .plan h3{font-size:1.1rem;}
  .price-row{display:flex;align-items:baseline;gap:6px;}
  .price-row .amt{font-family:'Sora',sans-serif;font-size:2.1rem;font-weight:700;}
  .price-row .per{color:var(--muted);font-size:0.88rem;}
  .plan-sub{color:var(--muted);font-size:0.82rem;margin-top:-10px;}
  .plan-sub.savings{color:var(--teal);}
  .plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:0.88rem;color:var(--muted);}
  .plan li{display:flex;gap:10px;align-items:flex-start;}
  .plan li svg{flex:none;margin-top:3px;width:14px;height:14px;color:var(--teal);}
  .price-placeholder-note{color:var(--muted);font-size:0.8rem;margin-top:18px;}

  /* ---------- Membership compare table ---------- */
  .compare-wrap{
    overflow-x:auto;
    border-radius:var(--radius-md);
    -webkit-overflow-scrolling:touch;
  }
  .compare-table{
    display:flex;
    flex-direction:column;
    min-width:640px;
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    background:var(--surface);
    overflow:hidden;
  }
  .cmp-row{
    display:grid;
    grid-template-columns:minmax(220px,1.7fr) repeat(3,minmax(118px,1fr));
    border-bottom:1px solid var(--line);
  }
  .cmp-row:last-child{border-bottom:none;}
  .cmp-cell{padding:16px;}
  .cmp-cell.is-member{background:rgba(38,230,200,0.07);}

  /* Header row */
  .cmp-row-head{background:var(--surface-2);border-bottom:1px solid var(--line-strong);}
  .cmp-corner{display:flex;align-items:flex-end;}
  .cmp-corner-label{font-family:'Roboto Mono',monospace;font-size:0.72rem;letter-spacing:0.05em;text-transform:uppercase;color:var(--muted);}
  .cmp-head{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    text-align:center;
    padding-block:22px 18px;
  }
  .cmp-head.is-member{background:rgba(38,230,200,0.13);}
  .cmp-head h3{font-size:1.02rem;display:flex;align-items:center;gap:8px;}
  .cmp-popular{
    font-family:'Roboto Mono',monospace;
    font-size:0.62rem;
    letter-spacing:0.04em;
    text-transform:uppercase;
    background:var(--teal);
    color:var(--on-accent);
    padding:3px 8px;
    border-radius:999px;
  }
  .cmp-price{display:flex;align-items:baseline;gap:4px;}
  .cmp-price .amt{font-family:'Sora',sans-serif;font-size:1.5rem;font-weight:700;}
  .cmp-sub{color:var(--muted);font-size:0.78rem;}
  .cmp-sub-savings{color:var(--teal);}
  .cmp-head .btn{margin-top:6px;width:100%;min-height:40px;padding:9px 16px;font-size:0.84rem;}

  /* Category divider rows */
  .cmp-row-category{border-bottom:1px solid var(--line);}
  .cmp-category{
    display:flex;
    align-items:center;
    padding-block:10px;
    font-family:'Roboto Mono',monospace;
    font-size:0.72rem;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--violet-ink);
    background:var(--tint-1);
  }
  .cmp-category-fill{background:var(--tint-1);}
  .cmp-category-fill.is-member{background:rgba(38,230,200,0.10);}

  /* Feature rows */
  .cmp-label{color:var(--pearl);font-size:0.9rem;}
  .cmp-val{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:var(--muted);
    font-size:0.86rem;
  }
  .cmp-check{width:18px;height:18px;color:var(--teal);flex:none;}
  .cmp-dash{color:var(--line-strong);font-size:1.1rem;}

  @media (max-width:640px){
    .cmp-cell{padding:12px 10px;}
    .cmp-head{padding-block:18px 14px;}
    .cmp-label{font-size:0.84rem;}
  }

  /* ---------- About ---------- */
  .about-split{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:start;
  }
  @media (max-width:860px){ .about-split{grid-template-columns:1fr;gap:18px;} }
  .about-split-head h2{
    font-size:clamp(1.9rem,4.2vw,2.9rem);
    line-height:1.08;
    margin-top:6px;
  }
  .about-split-body p{color:var(--muted);font-size:1rem;line-height:1.62;}
  .about-split-body p + p{margin-top:16px;}

  .about-pillars{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:44px;
  }
  @media (max-width:760px){ .about-pillars{grid-template-columns:1fr;} }
  .about-pillar{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    padding:24px 22px;
  }
  .pillar-num{
    display:block;
    font-family:'Roboto Mono',monospace;
    font-size:0.78rem;
    font-weight:600;
    letter-spacing:0.05em;
    color:var(--teal);
    margin-bottom:12px;
  }
  .about-pillar h3{font-size:1.02rem;}
  .about-pillar p{color:var(--muted);font-size:0.88rem;line-height:1.55;margin-top:8px;}

  /* ---------- Footer ---------- */
  footer{
    border-top:1px solid var(--line);
    padding-block:48px;
    color:var(--muted);
    font-size:0.86rem;
  }
  .footer-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1fr;
    gap:32px;
  }
  @media (max-width:760px){ .footer-grid{grid-template-columns:1fr 1fr;} }
  .footer-grid h3{color:var(--pearl);font-size:0.82rem;letter-spacing:0.04em;text-transform:uppercase;margin-bottom:14px;font-family:'Sora',sans-serif;}
  .footer-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
  /* ---- product preview: the verdict band ----
     The homepage preview used to open with four sentences about de-vigging and
     bury its payoff in a footnote. A prospect needs the answer first: the best
     number, the worst number, and the gap between them in the unit people
     actually think in. The table below is then evidence rather than homework.

     Best and worst are named in words, not signalled by colour -- the coloured
     rule is a second cue, never the only one. */
  .pv-verdict{
    display:grid; gap:10px; margin:0 0 18px;
    grid-template-columns:1fr;
  }
  @media (min-width:720px){
    .pv-verdict{grid-template-columns:1fr auto 1fr; align-items:stretch;}
  }
  .pv-stat{
    display:flex; flex-direction:column; gap:3px;
    background:var(--tint-1); border:1px solid var(--line);
    border-left:3px solid var(--line-strong);
    border-radius:var(--radius-sm); padding:13px 15px;
  }
  .pv-best{border-left-color:var(--good);}
  .pv-worst{border-left-color:var(--danger);}
  .pv-lbl{
    font-size:0.66rem; text-transform:uppercase; letter-spacing:0.07em;
    font-weight:700; color:var(--muted);
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  }
  .pv-best .pv-lbl{color:var(--good);}
  .pv-worst .pv-lbl{color:var(--danger);}
  .pv-rank{
    font-family:'Roboto Mono',monospace; font-size:0.62rem; font-weight:600;
    letter-spacing:0.02em; text-transform:none; color:var(--muted);
    background:var(--tint-2); border-radius:999px; padding:2px 7px;
  }
  .pv-venue{font-family:'Sora',sans-serif; font-weight:650; font-size:1.18rem; letter-spacing:-0.01em; margin-top:2px;}
  .pv-line{font-family:'Roboto Mono',monospace; font-size:0.94rem; font-variant-numeric:tabular-nums;}
  .pv-cost{font-size:0.8rem; color:var(--muted);}
  .pv-cost b{color:var(--pearl); font-weight:650;}

  /* The number the whole section exists to show. */
  .pv-gap{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; gap:2px; padding:13px 18px;
    border:1px solid var(--line); border-radius:var(--radius-sm);
    background:linear-gradient(135deg, var(--teal-dim), var(--violet-dim));
  }
  .pv-gap-num{
    font-family:'Sora',sans-serif; font-weight:700; font-size:1.7rem;
    letter-spacing:-0.02em; font-variant-numeric:tabular-nums; line-height:1.05;
  }
  .pv-gap-lbl{font-size:0.74rem; color:var(--muted); max-width:16ch; line-height:1.35;}
  @media (min-width:720px){ .pv-gap{min-width:170px;} }

  /* ---- live price cards ----
     A card per game with a colour-split bar, replacing a five-column table that
     had nowhere to go on a phone. Club COLOURS only: a colour identifies a club
     the way its name does, while its logo is a trademark and is deliberately
     absent everywhere on this site. */
  .lp-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
  @media (min-width:760px){ .lp-list{grid-template-columns:1fr 1fr;} }
  .lp-card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
    padding:14px 16px 13px;
  }
  .lp-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px;}
  .lp-match{font-family:'Sora',sans-serif;font-weight:650;font-size:1rem;margin:0;letter-spacing:-0.005em;}
  .lp-v{color:var(--muted);font-weight:500;}
  .lp-when{color:var(--muted);font-size:0.76rem;white-space:nowrap;}

  /* The bar is a picture of the split, never the only statement of it -- both
     percentages are printed as text below, so it stays out of the accessibility
     tree. The track border and the divider between segments matter: several
     clubs are near-black or near-white, and without them a segment can vanish
     into the page or into its neighbour. */
  .lp-bar{
    display:flex; height:9px; border-radius:999px; overflow:hidden;
    background:var(--tint-2); border:1px solid var(--line); margin-bottom:11px;
  }
  .lp-bar span{display:block;height:100%;}
  .lp-bar span + span{border-left:2px solid var(--surface);}

  .lp-sides{display:flex;align-items:center;justify-content:space-between;gap:12px;}

  /* ---- the spacer between the two prices ----
     Two moneylines sitting near each other read as one number at a glance
     ("-228 +228"), so they get a divider. It is the brand's own market-line
     motif at small scale: a single stroke fading in and out, teal into violet,
     with one suction-cup dot at the centre. Decorative, so aria-hidden -- the
     sides are already separate elements carrying their own team names. */
  .lp-split{
    position:relative; flex:none; align-self:stretch;
    width:1px; min-height:26px; margin:0 2px;
    background:linear-gradient(180deg,
      transparent 0%, var(--teal) 28%, var(--violet) 72%, transparent 100%);
    opacity:0.5;
  }
  .lp-split::after{
    content:""; position:absolute; top:50%; left:50%;
    width:5px; height:5px; margin:-2.5px 0 0 -2.5px;
    border-radius:50%; background:var(--violet); opacity:0.9;
  }

  /* Stacked on a narrow screen, the same stroke lies down and runs across. */
  @media (max-width:420px){
    .lp-split{
      width:auto; align-self:auto; min-height:0; height:1px; margin:2px 0;
      background:linear-gradient(90deg,
        transparent 0%, var(--teal) 28%, var(--violet) 72%, transparent 100%);
    }
    .lp-split::after{ left:50%; top:50%; }
  }
  .lp-side{display:flex;align-items:center;gap:7px;min-width:0;}
  .lp-side-b{flex-direction:row-reverse;}
  .lp-dot{width:9px;height:9px;border-radius:3px;flex:none;box-shadow:0 0 0 1px var(--line);}
  .lp-name{font-size:0.82rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .lp-pct{font-family:'Roboto Mono',monospace;font-size:0.82rem;color:var(--muted);font-variant-numeric:tabular-nums;}
  .lp-price{font-family:'Roboto Mono',monospace;font-size:0.92rem;font-weight:600;font-variant-numeric:tabular-nums;}
  @media (max-width:420px){
    .lp-sides{flex-direction:column;align-items:stretch;gap:6px;}
    .lp-side-b{flex-direction:row;}
    .lp-side{justify-content:flex-start;}
    .lp-side .lp-pct{margin-left:auto;}
  }

  /* Stacked footer links are navigation, not prose, so WCAG 2.5.8's inline
     exception does not apply and they need 24px of height. Padding rather than
     a taller line, so the footer's visual rhythm is unchanged. */
  .footer-grid a{
    text-decoration:none; color:var(--muted);
    display:inline-flex; align-items:center; min-height:24px; padding:3px 0;
  }
  .footer-grid a:hover{color:var(--teal);}
  .footer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    margin-top:40px;
    padding-top:24px;
    border-top:1px solid var(--line);
  }
  .disclaimer{max-width:640px;color:var(--muted);font-size:0.78rem;}

  /* Decorative full-bleed wordmark along the footer's bottom edge -- purely
     ornamental (aria-hidden, no information of its own; "OctopusOdds" is
     already readable as text in the brand lockup above), so a low-opacity
     token color is fine here even though it would fail text contrast. */
  footer{overflow:hidden;}
  .footer-wordmark{
    margin-top:44px;
    height:clamp(70px,11vw,130px);
    display:flex;
    align-items:flex-start;
    justify-content:center;
    overflow:hidden;
    pointer-events:none;
    user-select:none;
  }
  .footer-wordmark span{
    font-family:'Sora',sans-serif;
    font-weight:700;
    font-size:clamp(6rem,18vw,14rem);
    line-height:1;
    color:var(--pearl);
    opacity:0.05;
    white-space:nowrap;
    letter-spacing:-0.02em;
  }
  @media (prefers-reduced-motion: no-preference){ .footer-wordmark{transition:opacity .3s ease;} }

  /* ---------- Membership page: intro band ---------- */
  .page-intro{
    position:relative;
    overflow:hidden;
    padding-block:64px 52px;
    background:
      radial-gradient(680px 420px at 82% -10%, rgba(139,92,246,0.18), transparent 60%),
      radial-gradient(720px 480px at 12% 0%, rgba(38,230,200,0.14), transparent 55%),
      linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
    border-bottom:1px solid var(--line);
  }
  .page-intro .wrap{max-width:760px;}
  .page-intro h1{font-size:clamp(1.9rem, 4.2vw, 2.7rem); line-height:1.12; margin-top:14px;}
  .page-intro .sub{margin-top:16px; color:var(--muted); font-size:1.06rem; max-width:58ch;}
  .page-intro .hero-actions{margin-top:28px;}

  /* ---------- Membership page: member-app glance cards ---------- */
  .glance-intro{max-width:640px;}
  .glance-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:18px;
    margin-top:36px;
  }
  @media (max-width:900px){ .glance-grid{grid-template-columns:repeat(2, 1fr);} }
  @media (max-width:600px){ .glance-grid{grid-template-columns:1fr;} }
  .glance-card{
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    padding:22px;
    display:flex;
    flex-direction:column;
    gap:10px;
    transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .glance-card:hover{transform:translateY(-3px); border-color:var(--line-strong); box-shadow:0 16px 32px -20px rgba(0,0,0,0.5);}
  .glance-card .g-icon{
    width:38px;height:38px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    background:var(--teal-dim);color:var(--teal);flex:none;
  }
  .glance-card:nth-child(3n+2) .g-icon{background:var(--violet-dim); color:var(--violet);}
  .glance-card .g-icon svg{width:19px;height:19px;}
  .glance-card h3{font-family:'Sora',sans-serif; font-size:1.02rem; margin:0;}
  .glance-card p{color:var(--muted); font-size:0.92rem; margin:0; line-height:1.55;}
  .g-tag{
    align-self:flex-start;
    font-family:'Roboto Mono',monospace;
    font-size:0.66rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--muted);
    background:var(--tint-2);
    border:1px solid var(--line);
    border-radius:999px;
    padding:4px 10px;
    margin-top:2px;
  }
  .glance-preview-note{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-top:22px;
    padding:14px 16px;
    background:var(--tint-1);
    border:1px solid var(--line);
    border-radius:var(--radius-sm);
    color:var(--muted);
    font-size:0.88rem;
    line-height:1.55;
  }
  .glance-preview-note svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--teal);}

  /* ---------- Homepage: "The edge" pillar grid (CLV / fair price / sportsbook sync / alerts).
     Reuses .glance-card/.g-icon chrome but in a 2x2 layout -- these cards carry more copy than
     the 3-col .glance-grid tiles elsewhere, so two per row reads better than three. One of the
     four pillars (live movement alerts) has no built feature behind it yet, so it gets a
     distinct violet "Not yet built" tag instead of the amber .demo-tag the other three use --
     the two tags share a box model on purpose so they read as one status-tag family. ---- */
  .pillar-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:18px;
    margin-top:36px;
  }
  @media (max-width:700px){ .pillar-grid{grid-template-columns:1fr;} }
  .glance-card .g-icon.violet{background:var(--violet-dim); color:var(--violet);}
  .glance-card .demo-tag,
  .glance-card .roadmap-tag{align-self:flex-start; margin-top:2px;}
  .roadmap-tag{
    font-family:'Roboto Mono',monospace;
    font-size:0.72rem;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--violet-ink);
    border:1px solid rgba(139,92,246,0.35);
    background:var(--violet-dim);
    padding:5px 10px;
    border-radius:999px;
    white-space:nowrap;
  }

  /* ---------- Homepage: "Build a bet" section head -- the kicker/headline and the three-step
     flow strip share one row (headline left, steps right) instead of stacking, so the steps
     read as a direct answer to the headline's claim rather than a separate block underneath.
     Wraps to a stacked column once there's no room for both side by side. Scoped here (not on
     .section-head itself, which is reused across every other section on the site) so nothing
     else is affected. ---- */
  .preview-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px 18px;
    flex-wrap:wrap;
    margin-bottom:40px;
  }
  .preview-head .section-head{margin-bottom:0;max-width:600px;flex:none;}
  .preview-head h2{font-size:clamp(1.4rem,2.5vw,1.85rem);}
  .preview-head h2 .hl-teal{color:var(--teal);}
  @media (max-width:760px){ .preview-head{flex-direction:column;align-items:flex-start;gap:18px;} }

  /* ---------- Homepage: the three-step "how it works" strip beside the bet showcase headline,
     ending on the one-click-to-sportsbook step -- this is the thing we most want a first-time
     visitor to notice, so step 3 gets its own accent colour instead of matching steps 1-2.
     Sized a touch smaller than ordinary body text (0.82rem vs the usual 0.88rem+) specifically
     so this three-step strip can sit beside the headline on one row at the common ~1280px
     desktop width instead of always wrapping below it -- still well above the ~0.76rem floor
     used for other secondary labels elsewhere on the page. ---- */
  .bet-flow{
    display:flex;
    flex-wrap:wrap;
    gap:8px 14px;
    margin:0;
  }
  .bet-flow-step{
    display:flex;
    align-items:center;
    gap:7px;
    font-size:0.82rem;
    color:var(--muted);
    white-space:nowrap;
  }
  .bfs-num{
    display:flex;
    align-items:center;
    justify-content:center;
    width:19px;
    height:19px;
    border-radius:50%;
    background:var(--tint-2);
    border:1px solid var(--line);
    color:var(--pearl);
    font-family:'Roboto Mono',monospace;
    font-size:0.7rem;
    font-weight:700;
    flex:none;
  }
  .bet-flow-tap{
    color:var(--pearl);
    font-weight:600;
    padding:5px 12px 5px 5px;
    border-radius:999px;
    border:1.5px solid var(--good);
    background:rgba(61,220,151,0.1);
  }
  .bet-flow-tap .bfs-num{background:rgba(61,220,151,0.18); color:var(--good); border-color:transparent;}
  @media (max-width:520px){ .bet-flow{gap:8px 14px;} .bet-flow-step{font-size:0.8rem;white-space:normal;} }

  /* ---------- Homepage: straight-bet / parlay showcase (two static example cards, ahead of
     the live #preview embed below them). Real book names, made-up demo prices -- every card
     carries its own "Demonstration data" tag, same wording used on methodology.html, so
     nobody mistakes this for a live quote. Colour never carries the "best price" signal alone:
     that row also gets a text "Best" flag, readable in any theme and to a screen reader.
     Venue badges reuse the member app's own colour-coded monogram (same hues as VENUE_MARK
     in preview.html) so the homepage and the app read as one product, not two designs. ---- */
  .bet-showcase{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
    margin-bottom:30px;
  }
  @media (max-width:820px){ .bet-showcase{grid-template-columns:1fr;} }
  .bet-card{
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    padding:26px 26px 24px;
    display:flex;
    flex-direction:column;
    gap:18px;
    transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .bet-card:hover{transform:translateY(-3px); border-color:var(--line-strong); box-shadow:0 20px 40px -26px rgba(0,0,0,0.5);}
  .bet-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
  .bet-kind{
    font-family:'Sora',sans-serif;
    font-weight:700;
    font-size:1.08rem;
  }
  .sport-chip{
    font-family:'Roboto Mono',monospace;
    font-size:0.7rem;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--violet-ink);
    background:var(--violet-dim);
    border-radius:999px;
    padding:5px 11px;
    white-space:nowrap;
  }
  .team-dot{
    width:13px;height:13px;border-radius:50%;flex:none;
    background:var(--tc, var(--muted));
    box-shadow:0 0 0 4px color-mix(in srgb, var(--tc, var(--muted)) 22%, transparent);
  }
  .bet-selection{display:flex;align-items:center;gap:14px;}
  .bet-selection strong{font-family:'Sora',sans-serif;font-size:1.28rem;font-weight:700;display:block;letter-spacing:-0.01em;}
  .bet-matchup{color:var(--muted);font-size:0.86rem;}
  .bet-explainer{
    margin:0;
    color:var(--muted);
    font-size:0.86rem;
    line-height:1.5;
    background:var(--tint-1);
    border:1px solid var(--line);
    border-radius:var(--radius-sm);
    padding:10px 12px;
  }
  .bet-explainer b{color:var(--pearl);font-weight:600;}
  .bet-legs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
  .bet-legs li{display:flex;align-items:center;gap:10px;font-size:0.98rem;font-weight:600;}
  .bet-legs .leg-mkt{margin-left:auto;color:var(--muted);font-size:0.76rem;font-weight:500;font-family:'Roboto Mono',monospace;text-transform:uppercase;letter-spacing:0.04em;}
  .bet-venues{display:flex;flex-direction:column;border-top:1px solid var(--line);}
  .venue-badge{
    width:28px;height:28px;flex:none;border-radius:8px;
    display:inline-flex;align-items:center;justify-content:center;
    font-family:'Sora',sans-serif;font-size:0.62rem;font-weight:700;letter-spacing:0.01em;
    color:#fff;background:var(--vb,var(--muted));
  }
  .bet-venue-row{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 4px;
    border-bottom:1px solid var(--line);
    font-size:0.94rem;
  }
  .venue-rank{
    font-family:'Roboto Mono',monospace;
    font-size:0.72rem;
    font-weight:600;
    color:var(--muted);
    width:16px;
    flex:none;
    text-align:center;
  }
  .bet-venue-row .venue-name{font-weight:650;display:flex;align-items:center;}
  .pm-tag{color:var(--muted);font-weight:500;font-size:0.74rem;margin-left:6px;}
  .bet-venue-row .venue-price{margin-left:auto;color:var(--muted);font-weight:600;font-size:1.02rem;font-family:'Roboto Mono',monospace;font-variant-numeric:tabular-nums;}
  .bet-venue-row .venue-payout{color:var(--muted);font-size:0.92rem;}
  .venue-cost{
    color:var(--muted);
    font-size:0.78rem;
    font-family:'Roboto Mono',monospace;
    font-variant-numeric:tabular-nums;
    min-width:52px;
    text-align:right;
  }
  .bet-venue-row.is-best{
    background:var(--teal-dim);
    margin-inline:-10px;
    padding-inline:10px;
    border-radius:var(--radius-sm);
    border-bottom-color:transparent;
    box-shadow:inset 0 0 0 1.5px rgba(38,230,200,0.45);
  }
  .bet-venue-row.is-best .venue-price{color:var(--pearl);font-weight:700;font-size:1.12rem;}
  .bet-venue-row.is-best .venue-payout{color:var(--pearl);font-weight:600;}
  .bet-venue-row.is-best .venue-cost{color:var(--good);font-weight:650;}
  .bet-venue-row.is-best .venue-rank{color:var(--teal);}
  .best-flag{
    display:inline-flex;align-items:center;gap:3px;
    font-family:'Roboto Mono',monospace;
    font-size:0.68rem;
    font-weight:700;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--on-accent);
    background:var(--teal);
    padding:4px 9px;
    border-radius:999px;
    white-space:nowrap;
  }
  .best-flag svg{width:10px;height:10px;}
  .bet-stat{color:var(--muted);font-size:0.9rem;line-height:1.55;margin:0;}
  .bet-stat strong{color:var(--pearl);}
  @media (max-width:480px){
    .bet-venue-row{flex-wrap:wrap;row-gap:5px;}
    .bet-venue-row .venue-price{margin-left:0;}
    .bet-venue-row .venue-payout{width:100%;order:3;padding-left:40px;}
    .venue-cost:not(.venue-best){display:none;}
  }

  /* ---------- Membership page: closing CTA band ---------- */
  .cta-band{background:var(--surface); border-block:1px solid var(--line); text-align:center;}
  .cta-band h2{font-size:clamp(1.5rem, 3vw, 2rem);}
  .cta-band p{color:var(--muted); max-width:52ch; margin:14px auto 26px;}
  .cta-band .btn{margin:0 6px;}

  /* ---------- About page: commitments list ---------- */
  .commitments{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:16px;
    margin-top:36px;
  }
  @media (max-width:760px){ .commitments{grid-template-columns:1fr;} }
  .commitment{
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:18px 20px;
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:var(--radius-md);
  }
  .commitment .c-icon{
    flex:none;
    width:26px;height:26px;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--teal-dim);
    color:var(--teal);
    margin-top:1px;
  }
  .commitment .c-icon svg{width:13px;height:13px;}
  .commitment p{margin:0;color:var(--pearl);font-size:0.94rem;line-height:1.55;}

  /* ---------- About page: founder cards ---------- */
  .founders{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:20px;
    margin-top:36px;
  }
  @media (max-width:900px){ .founders{grid-template-columns:1fr;max-width:420px;margin-inline:auto;} }
  .founder-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    padding:26px 24px;
    display:flex;
    flex-direction:column;
    gap:10px;
    text-align:left;
    transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .founder-card:hover{transform:translateY(-3px); border-color:var(--line-strong); box-shadow:0 20px 40px -24px rgba(0,0,0,0.55);}
  .founder-card .f-avatar{
    width:48px;height:48px;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-family:'Sora',sans-serif;
    font-weight:700;
    font-size:1.1rem;
    color:var(--on-accent);
    background:linear-gradient(135deg, var(--teal), var(--violet));
    margin-bottom:4px;
  }
  .founder-card h4{font-size:1.02rem;margin:0;}
  .founder-card p{color:var(--muted);font-size:0.9rem;margin:0;line-height:1.55;}


  /* ---------- Homepage teaser "read the full page" link ---------- */
  .section-more{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:24px;
    color:var(--teal);
    font-weight:600;
    font-size:0.92rem;
    text-decoration:none;
  }
  .section-more:hover{ text-decoration:underline; }
  .section-more svg{ width:16px;height:16px;flex-shrink:0; }

  /* ---------- Content pages (FAQ, contact, waitlist, legal, 404) ---------- */
  .prose{max-width:68ch;}
  .prose h2{font-size:clamp(1.25rem,2.4vw,1.6rem);margin:38px 0 12px;}
  .prose h2:first-child{margin-top:0;}
  .prose h3{font-size:1.04rem;margin:24px 0 8px;}
  .prose p, .prose li{color:var(--muted);font-size:1rem;line-height:1.65;}
  .prose p{margin:0 0 14px;}
  .prose ul{margin:0 0 16px;padding-left:22px;display:flex;flex-direction:column;gap:8px;}
  .prose strong{color:var(--pearl);}
  .prose a{color:var(--teal);font-weight:600;}
  .prose a:hover{text-decoration:underline;}
  .prose .updated{
    font-family:'Roboto Mono',monospace;font-size:0.76rem;color:var(--muted);
    letter-spacing:0.03em;text-transform:uppercase;margin-bottom:26px;display:block;
  }

  .faq-list{max-width:68ch;display:flex;flex-direction:column;gap:10px;}
  .faq-item{
    background:var(--surface);border:1px solid var(--line);
    border-radius:var(--radius-md);padding:0;overflow:hidden;
  }
  .faq-item[open]{border-color:var(--line-strong);}
  .faq-item > summary{
    cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;
    padding:18px 20px;font-family:'Sora',sans-serif;font-weight:600;font-size:1rem;
    color:var(--pearl);min-height:44px;
  }
  .faq-item > summary::-webkit-details-marker{display:none;}
  .faq-item > summary:hover{background:var(--tint-1);}
  .faq-item > summary:focus-visible{outline:2px solid var(--teal);outline-offset:-2px;}
  .faq-item > summary .chev{
    margin-left:auto;flex:none;width:16px;height:16px;color:var(--muted);
    transition:transform .18s ease;
  }
  @media (prefers-reduced-motion: reduce){ .faq-item > summary .chev{transition:none;} }
  .faq-item[open] > summary .chev{transform:rotate(180deg);}
  .faq-answer{padding:0 20px 18px;color:var(--muted);font-size:0.95rem;line-height:1.65;}
  .faq-answer p{margin:0 0 10px;}
  .faq-answer p:last-child{margin-bottom:0;}
  .faq-answer a{color:var(--teal);font-weight:600;}

  .contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:8px;}
  @media (max-width:760px){ .contact-grid{grid-template-columns:1fr;} }

  .big-cta{
    display:flex;flex-direction:column;align-items:flex-start;gap:14px;
    background:var(--surface);border:1px solid var(--line);
    border-radius:var(--radius-md);padding:26px;max-width:68ch;
  }
  .big-cta .mail{
    font-family:'Roboto Mono',monospace;font-size:1.02rem;color:var(--teal);
    font-weight:600;word-break:break-all;
  }

  .status-list{max-width:68ch;display:flex;flex-direction:column;gap:12px;margin:24px 0 0;}
  .status-row{
    display:flex;align-items:flex-start;gap:12px;padding:14px 16px;
    background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);
  }
  .status-row .sr-dot{
    flex:none;width:9px;height:9px;border-radius:50%;margin-top:7px;background:var(--muted);
  }
  .status-row.is-live .sr-dot{background:var(--good);}
  .status-row.is-soon .sr-dot{background:var(--warn);}
  .status-row .sr-body{min-width:0;}
  .status-row .sr-body b{display:block;font-family:'Sora',sans-serif;font-size:0.96rem;color:var(--pearl);}
  .status-row .sr-body span{display:block;color:var(--muted);font-size:0.86rem;margin-top:3px;line-height:1.55;}

  .center-page{text-align:center;padding-block:96px 84px;}
  .center-page .code{
    font-family:'Roboto Mono',monospace;font-size:3.4rem;font-weight:600;
    background:linear-gradient(90deg,var(--teal-brand),var(--violet));
    -webkit-background-clip:text;background-clip:text;color:transparent;
    display:inline-block;width:fit-content;margin-inline:auto;
  }
  .center-page h1{margin-top:8px;font-size:clamp(1.5rem,3vw,2rem);}
  .center-page p{color:var(--muted);max-width:46ch;margin:14px auto 26px;}
  /* Header at narrow widths: just the wordmark shrinking a touch and the wrap gutter
     tightening. Three compact controls (theme toggle, account, Join) never need a
     hamburger to fit — there are no nav links competing for room any more. */
  @media (max-width:400px){
    .brand svg{width:28px;height:28px;}
    .brand-text{font-size:1.1rem;}
    .nav-inner{gap:10px;}
    .nav-cta{gap:6px;}
    .wrap{padding-inline:14px;}
  }
  /* Smallest real phones (iPhone SE and similar, ~320-360px): the wordmark plus three
     44px controls is tight even after the 400px step above, so compact further —
     smaller icon buttons, a tighter Join button, a smaller wordmark. */
  @media (max-width:360px){
    .wrap{padding-inline:10px;}
    .nav-inner{gap:6px;}
    .brand svg{width:24px;height:24px;}
    .brand{gap:8px;}
    .brand-text{font-size:0.96rem;}
    .nav-theme-toggle,.nav-icon-btn{width:38px;height:38px;min-width:38px;min-height:38px;}
    .nav-theme-toggle svg,.nav-icon-btn svg{width:16px;height:16px;}
    .nav-cta .btn-primary{padding:8px 14px;min-width:0;font-size:0.84rem;}
  }
  .nav-inner{min-width:0;}
  .nav-cta{min-width:0;}

  /* Bottom tab bar (phones, 27 Sep 2026 -- 29 Sep 2026): removed. It mirrored the member
     app's own bottom nav on the public homepage before you'd joined anything, which read as
     the site pretending you were already in the app. That bottom nav is a member-app-only
     affordance now -- see preview.html's own .bottom-tabs, which is already hidden there
     when preview.html is embedded (html.is-embed) so it never doubles up with this page's
     chrome either. */

  /* ---------- Floating stat chips on phones (22 Sep 2026) ----------
     The chips and the Live feed badge were hidden outright below 480px, which
     loses the whole point of the mark — the numbers are what say "this is a
     betting research tool" rather than "here is a cartoon octopus". They were
     hidden because at full size they collide with each other on a narrow
     screen, so bring them back smaller instead: at 320px the three chips then
     occupy roughly 78px each against a ~300px stage, which clears. */
  @media (max-width:480px){
    .float-chip{
      display:flex;
      font-size:0.58rem;
      padding:5px 8px;
      gap:5px;
      border-width:1.2px;
      box-shadow:0 8px 18px -10px rgba(0,0,0,0.5);
    }
    .float-chip svg{width:10px;height:10px;}
    .live-badge{
      display:flex;
      font-size:0.58rem;
      padding:5px 9px;
      gap:5px;
      border-width:1.2px;
    }
    .live-dot{width:6px;height:6px;}
  }
  @media (max-width:360px){
    .float-chip{font-size:0.52rem;padding:4px 7px;gap:4px;}
    .float-chip svg{width:9px;height:9px;}
    .live-badge{font-size:0.52rem;padding:4px 8px;}
  }

/* ---------- Price-comparison and bet-tracker tables ----------
   Used on the homepage (#preview) and on /product. Lives here rather than
   inline on each page so the two cannot drift apart. ---------- */
  .cx-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:4px;}
  .cx-game{font-family:'Sora',sans-serif;font-weight:650;font-size:1.05rem;color:var(--pearl);}
  .cx-when{display:block;font-family:'IBM Plex Sans',sans-serif;font-weight:400;font-size:0.82rem;color:var(--muted);margin-top:3px;}
  .cx-pill{display:inline-flex;align-items:center;gap:8px;background:var(--teal-dim);border:1px solid var(--teal);
    color:var(--pearl);border-radius:999px;padding:7px 14px;font-family:'Roboto Mono',monospace;
    font-size:0.86rem;font-weight:500;}
  .cx-pill b{font-weight:600;}
  .cx-ref{margin:16px 0 18px;padding:13px 15px;border:1px solid var(--line);border-radius:var(--radius-sm);
    background:var(--tint-1);font-size:0.88rem;line-height:1.55;color:var(--muted);}
  .cx-ref strong{color:var(--pearl);font-weight:600;}
  .cx-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  table.cx{width:100%;border-collapse:collapse;font-size:0.92rem;min-width:420px;}
  table.cx th,table.cx td{padding:11px 10px;border-bottom:1px solid var(--line);text-align:left;}
  table.cx thead th{font-family:'IBM Plex Sans',sans-serif;font-size:0.72rem;text-transform:uppercase;
    letter-spacing:0.07em;color:var(--muted);font-weight:600;border-bottom:1px solid var(--line-strong);white-space:nowrap;}
  table.cx tbody th{font-weight:600;color:var(--pearl);white-space:nowrap;}
  table.cx .cx-num{font-family:'Roboto Mono',monospace;text-align:right;white-space:nowrap;color:var(--pearl);}
  table.cx thead th.cx-num{text-align:right;}
  table.cx .cx-cost{color:var(--muted);}
  table.cx tr.cx-is-best th,table.cx tr.cx-is-best td{background:var(--teal-dim);}
  table.cx tr.cx-is-best .cx-cost{color:var(--pearl);font-weight:600;}
  table.cx tbody tr:last-child th,table.cx tbody tr:last-child td{border-bottom:none;}
  .cx-best{display:inline-block;margin-left:8px;background:var(--teal);color:var(--on-accent);
    font-family:'Sora',sans-serif;font-size:0.6rem;font-weight:700;text-transform:uppercase;
    letter-spacing:0.07em;padding:3px 7px;border-radius:5px;vertical-align:middle;}
  .cx-note{margin-top:18px;padding:14px 16px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);
    background:var(--tint-2);font-size:0.9rem;line-height:1.6;}
  .cx-note strong{color:var(--pearl);}
  .cx-foot{margin-top:14px;font-size:0.86rem;color:var(--muted);line-height:1.55;}
  /* Result and CLV markers never rely on colour alone - each carries a word and a sign. */
  .cx-flag{font-family:'IBM Plex Sans',sans-serif;font-size:0.68rem;font-weight:600;text-transform:uppercase;
    letter-spacing:0.06em;padding:3px 8px;border-radius:999px;white-space:nowrap;display:inline-block;}
  .cx-flag.beat{color:var(--good);border:1px solid var(--good);background:transparent;}
  .cx-flag.missed{color:var(--muted);border:1px solid var(--line-strong);background:transparent;}
  @media (max-width:560px){
    /* Measured at 375px: with the 420px min-width the "what it costs you" column
       — the whole point of the table — sat off-screen behind a sideways swipe.
       Dropping the min-width and letting the header wrap fits all four columns
       in 301px with no scroll and no page overflow. */
    table.cx{font-size:0.86rem;min-width:0;}
    table.cx th,table.cx td{padding:9px 5px;}
    table.cx thead th{font-size:0.62rem;letter-spacing:0.04em;white-space:normal;}
    table.cx tbody th{white-space:normal;}
    .cx-best{margin-left:0;margin-top:4px;display:block;width:-moz-fit-content;width:fit-content;}
    .cx-pill{font-size:0.8rem;padding:6px 12px;}
    .cx-flag{font-size:0.6rem;padding:2px 6px;}
  }

/* ---------- Live feed status pill (the /product live prices section) ---------- */
.live-tag{
  font-family:'Roboto Mono',monospace; font-size:0.72rem; letter-spacing:0.04em;
  color:var(--muted); border:1px solid var(--line-strong); background:var(--tint-1);
  padding:5px 11px; border-radius:999px; white-space:nowrap;
  display:inline-flex; align-items:center; gap:7px;
}
/* Live vs stale is never signalled by colour alone - the label itself says which. */
.live-tag.is-live{color:var(--good); border-color:var(--good); background:transparent;}
.live-tag.is-stale{color:var(--warn); border-color:var(--warn); background:transparent;}
.live-dot{width:7px; height:7px; border-radius:50%; background:currentColor; flex:none;}
.live-tag.is-live .live-dot{animation:livePulse 2.4s ease-in-out infinite;}
@keyframes livePulse{0%,100%{opacity:1;} 50%{opacity:0.35;}}
@media (prefers-reduced-motion:reduce){ .live-tag.is-live .live-dot{animation:none;} }

  /* ---------- Live app embeds (25 Sep 2026) ----------
     Public previews are the real member app (/preview?embed=...) in an iframe, not
     hand-built mockups, so they can never drift from what members see. */
  .app-embed .preview-bar{padding:12px 18px;}
  .app-embed-open{font-size:0.84rem;font-weight:600;color:var(--teal);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;padding:0 4px;}
  .app-embed-open:hover{text-decoration:underline;}
  .app-embed-open:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:6px;}
  .app-embed-frame{display:block;width:100%;border:0;background:transparent;min-height:320px;transition:height .2s ease;}
  @media (prefers-reduced-motion: reduce){ .app-embed-frame{transition:none;} }
  .app-embed-note{margin:0;padding:12px 18px 16px;border-top:1px solid var(--line);font-size:0.84rem;color:var(--muted);}

  /* ---------- Site-wide demo-data banner (every public marketing page) ----------
     A persistent, unmissable strip under the nav saying every odds/pick/result on
     the site is demo data -- the same message the footer line already carries in
     small type, surfaced where it can't be missed. Reuses the member app's
     .demo-banner colors (violet-dim/violet-ink) so the two products read as one
     brand. Full-bleed bar with a .wrap inside so its content lines up with the
     nav and page content at every width. */
  .site-demo-banner{
    background:linear-gradient(180deg, rgba(139,92,246,0.16) 0%, rgba(139,92,246,0.05) 100%);
    color:var(--violet-ink);
  }
  .site-demo-banner .wrap{
    display:flex; align-items:center; gap:10px;
    padding-block:10px;
    font-size:0.82rem; font-weight:500; line-height:1.4;
  }
  .site-demo-banner svg{width:16px;height:16px;flex:none;}
  /* Free-tool-to-membership nudge under the embed (27 Sep 2026) — the odds board itself is
     free forever; this is the one place on the page that says so and points at what
     membership actually adds, right where someone has just finished using the free part. */
  .bet-cta-row{
    display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
    padding:14px 18px;border-top:1px solid var(--line);background:var(--tint-1);
  }
  .bet-cta-row p{margin:0;font-size:0.86rem;color:var(--muted);max-width:56ch;}
  .bet-cta-row .btn{flex:none;}

  /* ---------- Homepage: Community section (1 Oct 2026) ----------
     Same shell chrome as "Build a bet" above it (.preview-shell/.app-embed/.bet-flow/
     .bet-card/.bet-cta-row all reused as-is) so the two sections read as one product
     walkthrough, not two different designs. The two showcase cards are a hand-built
     illustration of the real Groups/group-parlay screens in the member app (same
     pattern the "Build a bet" cards already use — static demo markup, not a live
     iframe), not a second copy of the app's own code. */
  .comm-showcase{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
    margin-bottom:30px;
  }
  @media (max-width:820px){ .comm-showcase{grid-template-columns:1fr;} }

  .comm-group-id{display:flex;align-items:flex-start;gap:12px;}
  .comm-group-icon{
    width:40px;height:40px;border-radius:12px;flex:none;
    display:flex;align-items:center;justify-content:center;
    background:color-mix(in srgb, var(--gc,var(--teal)) 20%, transparent);
    color:var(--gc,var(--teal));
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gc,var(--teal)) 38%, transparent);
  }
  .comm-group-icon svg{width:19px;height:19px;}
  .comm-group-name{font-family:'Sora',sans-serif;font-size:1.08rem;font-weight:700;display:block;letter-spacing:-0.005em;}
  .comm-group-id .bet-matchup{margin-top:3px;}
  .comm-group-stats{
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;
    font-size:0.82rem;color:var(--muted);
    padding-top:14px;border-top:1px solid var(--line);
  }
  .comm-open-badge{
    margin-left:auto;font-family:'Roboto Mono',monospace;font-size:0.68rem;font-weight:600;
    letter-spacing:0.03em;text-transform:uppercase;color:var(--teal);
    background:var(--teal-dim);border:1px solid rgba(38,230,200,0.3);
    border-radius:999px;padding:4px 10px;white-space:nowrap;
  }

  .comm-parlay-title{display:flex;align-items:center;gap:9px;font-family:'Sora',sans-serif;font-weight:700;font-size:1.08rem;}
  .comm-dice{display:flex;flex:none;width:22px;height:22px;align-items:center;justify-content:center;color:var(--violet);}
  .comm-dice svg{width:17px;height:17px;}

  .comm-pips-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
  .comm-pips{display:flex;flex-wrap:wrap;gap:6px;}
  .pip{
    width:22px;height:22px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
    border:2px dashed var(--line-strong);color:transparent;
  }
  .pip svg{width:11px;height:11px;}
  .pip.is-filled{border:2px solid transparent;background:linear-gradient(135deg,var(--teal),var(--violet));color:#071827;}
  .comm-pips-label{font-size:0.78rem;color:var(--muted);}

  /* Team badges — ported from the member app's own .team-badge (preview.html) so the
     homepage illustration and the real Groups screen show literally the same mark:
     team colour + abbreviation, never a licensed logo (see brand-business-plan.md). */
  .team-badge{
    width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;
    background:var(--tb-bg,var(--surface-2));color:var(--tb-ink,var(--pearl));position:relative;overflow:hidden;
    font-family:'Sora',sans-serif;font-weight:700;font-size:9px;line-height:1;letter-spacing:0.02em;
    box-shadow:inset 0 0 0 1.5px var(--tb-ring,rgba(255,255,255,0.28)), 0 0 0 1px var(--line);
  }
  .team-badge::after{content:"";position:absolute;left:-2px;right:-2px;bottom:5px;height:1.5px;background:var(--tb-ink,var(--pearl));opacity:0.28;transform:rotate(-14deg);}
  .team-badge span{position:relative;z-index:1;}
  @media (max-width:520px){ .team-badge{width:22px;height:22px;font-size:8px;} }

  .comm-invite-btn{
    align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
    font-size:0.84rem;font-weight:600;color:var(--teal);text-decoration:none;
    border:1px solid rgba(38,230,200,0.35);background:var(--teal-dim);
    border-radius:999px;padding:8px 14px;min-height:36px;
  }
  .comm-invite-btn svg{width:15px;height:15px;flex:none;}
  .comm-invite-btn:hover{border-color:var(--teal);}
  .comm-invite-btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}

  @media (prefers-reduced-motion:reduce){ .pip{transition:none;} }

  /* ---------- Resources hub + articles (2 Oct) ---------- */
  .resource-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:28px;
  }
  @media (max-width:900px){ .resource-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:600px){ .resource-grid{grid-template-columns:1fr;} }
  .resource-card{
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    padding:22px;
    display:flex;
    flex-direction:column;
    gap:10px;
    text-decoration:none;
    color:inherit;
    transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  a.resource-card:hover{transform:translateY(-3px); border-color:var(--line-strong); box-shadow:0 16px 32px -20px rgba(0,0,0,0.5);}
  a.resource-card:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
  .resource-card .r-icon{
    width:38px;height:38px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    background:var(--teal-dim);color:var(--teal);flex:none;
  }
  .resource-card:nth-child(3n+2) .r-icon{background:var(--violet-dim); color:var(--violet);}
  .resource-card .r-icon svg{width:19px;height:19px;}
  .resource-card h3{font-family:'Sora',sans-serif; font-size:1.02rem; margin:0; color:var(--pearl);}
  .resource-card p{color:var(--muted); font-size:0.92rem; margin:0; line-height:1.55;}
  .resource-card .r-tag{
    align-self:flex-start;
    font-family:'Roboto Mono',monospace;
    font-size:0.66rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--muted);
    background:var(--tint-2);
    border:1px solid var(--line);
    border-radius:999px;
    padding:4px 10px;
  }
  .resource-card .r-meta{
    margin-top:auto;
    padding-top:6px;
    display:flex;
    align-items:center;
    gap:8px;
    font-family:'Roboto Mono',monospace;
    font-size:0.7rem;
    letter-spacing:0.03em;
    color:var(--muted);
  }
  .resource-card .r-meta .r-arrow{margin-left:auto;color:var(--teal);transition:transform .18s ease;flex:none;}
  .resource-card:hover .r-meta .r-arrow{transform:translateX(3px);}
  .resource-card.is-planned{opacity:0.7;}
  .resource-card.is-planned .r-icon{background:var(--tint-2);color:var(--muted);}
  .resource-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:52px;}
  .resource-section-head:first-of-type{margin-top:0;}
  .resource-section-head h2{font-family:'Sora',sans-serif;font-size:1.32rem;margin:0;}
  .resource-section-head p{color:var(--muted);font-size:0.92rem;margin:4px 0 0;max-width:60ch;}

  .article-body{max-width:68ch;margin-top:30px;}
  .article-body h2{font-family:'Sora',sans-serif; font-size:1.28rem; margin:34px 0 14px; color:var(--pearl);}
  .article-body p{color:var(--muted); font-size:1rem; line-height:1.72; margin:0 0 16px;}
  .article-body p strong{color:var(--pearl);}
  .article-body ul{margin:0 0 16px; padding-left:1.3em; color:var(--muted); font-size:1rem; line-height:1.72;}
  .article-body li{margin-bottom:6px;}
  .article-meta{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    margin-top:16px;
    font-family:'Roboto Mono',monospace; font-size:0.74rem; color:var(--muted); letter-spacing:0.03em;
  }
  .article-related{margin-top:50px; padding-top:30px; border-top:1px solid var(--line); max-width:68ch;}
  .article-related h2{font-family:'Sora',sans-serif; font-size:1.08rem; margin:0 0 18px;}
  .article-related-list{display:flex; flex-direction:column; gap:10px;}
  .article-related-list a{
    display:flex; align-items:center; gap:10px;
    color:var(--pearl); text-decoration:none; font-weight:600; font-size:0.94rem;
    padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-sm);
    transition:border-color .15s ease, background .15s ease;
  }
  .article-related-list a:hover{border-color:var(--line-strong); background:var(--tint-1);}
  .article-related-list a svg{width:15px;height:15px;color:var(--teal);flex:none;}


  /* ---------- Resources hub: simple card grid (2 Oct, v3) ---------- */
  .resource-filters{display:flex;gap:8px;flex-wrap:wrap;margin:28px 0 0;}
  .resource-filter{
    font-family:'Roboto Mono',monospace;font-size:0.76rem;letter-spacing:0.02em;text-transform:uppercase;
    color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;
    padding:8px 16px;cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease;
  }
  .resource-filter:hover{border-color:var(--line-strong);color:var(--pearl);}
  .resource-filter:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
  .resource-filter.is-active{background:var(--teal-dim);border-color:var(--teal);color:var(--teal);}

  .resource-hub-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px;
  }
  @media (max-width:900px){ .resource-hub-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:600px){ .resource-hub-grid{grid-template-columns:1fr;} }

  .resource-tile{
    display:flex;flex-direction:column;gap:8px;
    background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-md);
    padding:18px;text-decoration:none;color:inherit;
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
  }
  a.resource-tile:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:0 16px 32px -20px rgba(0,0,0,0.5);}
  a.resource-tile:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
  .resource-tile .r-tag{
    align-self:flex-start;font-family:'Roboto Mono',monospace;font-size:0.64rem;letter-spacing:0.06em;
    text-transform:uppercase;color:var(--muted);background:var(--tint-2);border:1px solid var(--line);
    border-radius:999px;padding:3px 9px;
  }
  .resource-tile h3{font-family:'Sora',sans-serif;font-size:0.98rem;line-height:1.3;margin:2px 0 0;color:var(--pearl);}
  .resource-tile p{
    color:var(--muted);font-size:0.86rem;line-height:1.5;margin:0;
    overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  }
  .resource-tile .r-meta{
    margin-top:auto;padding-top:4px;display:flex;align-items:center;gap:8px;
    font-family:'Roboto Mono',monospace;font-size:0.7rem;letter-spacing:0.03em;color:var(--muted);
  }
  .resource-tile .r-meta .r-arrow{margin-left:auto;color:var(--teal);transition:transform .18s ease;}
  a.resource-tile:hover .r-meta .r-arrow{transform:translateX(3px);}
  .resource-tile.is-planned{opacity:0.7;}
  .resource-tile.is-hidden{display:none;}
  .resource-empty{color:var(--muted);font-size:0.94rem;padding:28px 6px;text-align:center;}

  /* ---------- Resources hub: bento feature layout (3 Oct) ---------- */
  .resource-section{margin-top:36px;}
  .resource-section:first-of-type{margin-top:20px;}
  .resource-section.is-hidden{display:none;}
  .resource-section-label{
    display:flex;align-items:center;gap:8px;margin:0 0 16px;
    font-family:'Roboto Mono',monospace;font-weight:600;font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);
  }
  .resource-section-label .dot{width:6px;height:6px;border-radius:50%;background:var(--teal);flex:none;}
  .resource-section-label .sep{margin:0 2px;color:var(--line-strong);}

  .resource-bento{
    display:grid;grid-template-columns:1.6fr 1fr;grid-template-rows:repeat(2,minmax(150px,1fr));gap:16px;
  }
  @media (max-width:860px){ .resource-bento{grid-template-columns:1fr;grid-template-rows:none;} }

  .bento-card{
    position:relative;overflow:hidden;
    display:flex;flex-direction:column;gap:10px;
    background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-md);
    padding:24px;text-decoration:none;color:inherit;
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
  }
  a.bento-card:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:0 20px 40px -24px rgba(0,0,0,0.55);}
  a.bento-card:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}

  .bento-card.is-feature{grid-row:1 / 3;justify-content:space-between;padding:28px;}
  @media (max-width:860px){ .bento-card.is-feature{grid-row:auto;} }

  .bento-eyebrow{
    font-family:'Roboto Mono',monospace;font-size:0.68rem;letter-spacing:0.08em;text-transform:uppercase;
    color:var(--teal);display:flex;align-items:center;gap:6px;
  }
  .bento-eyebrow .sep{color:var(--line-strong);}
  .bento-card h3{font-family:'Sora',sans-serif;margin:6px 0 0;color:var(--pearl);}
  .bento-card.is-feature h3{font-size:1.5rem;line-height:1.22;max-width:22ch;}
  .bento-card p{color:var(--muted);font-size:0.92rem;line-height:1.55;margin:0;max-width:40ch;position:relative;z-index:1;}

  .bento-stat{
    margin-top:auto;padding-top:22px;display:flex;align-items:baseline;gap:10px;
    font-family:'Roboto Mono',monospace;font-weight:600;
  }
  .bento-stat .from{font-size:1.9rem;color:var(--pearl);}
  .bento-stat .arrow{font-size:1.3rem;color:var(--muted);}
  .bento-stat .to{font-size:1.9rem;color:var(--teal);}

  .bento-chip{
    align-self:flex-start;font-family:'Roboto Mono',monospace;font-size:0.68rem;letter-spacing:0.03em;
    color:var(--muted);background:var(--tint-2);border:1px solid var(--line);border-radius:999px;padding:4px 10px;
    position:relative;z-index:1;
  }
  .bento-num{
    position:absolute;right:8px;bottom:-18px;font-family:'Sora',sans-serif;font-weight:700;
    font-size:4.6rem;line-height:1;color:var(--pearl);opacity:0.07;pointer-events:none;
  }
  .bento-meta{
    margin-top:auto;padding-top:14px;display:flex;align-items:center;gap:8px;position:relative;z-index:1;
    font-family:'Roboto Mono',monospace;font-size:0.7rem;letter-spacing:0.03em;color:var(--muted);
  }
  .bento-meta .r-arrow{margin-left:auto;color:var(--teal);transition:transform .18s ease;}
  a.bento-card:hover .bento-meta .r-arrow{transform:translateX(3px);}

  .resource-subgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:16px;}
  .resource-subgrid-3{grid-template-columns:repeat(3,1fr);}
  @media (max-width:860px){ .resource-subgrid-3{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:600px){ .resource-subgrid, .resource-subgrid-3{grid-template-columns:1fr;} }

  /* ---------- Resources hub: docs-style layout (2 Oct, v4) ---------- */
  .docs-crumb{display:flex;align-items:center;gap:8px;margin:28px 0 24px;font-family:'Roboto Mono',monospace;font-size:0.76rem;color:var(--muted);}
  .docs-crumb a{color:var(--muted);text-decoration:none;}
  .docs-crumb a:hover{color:var(--teal);}
  .docs-crumb .crumb-sep{color:var(--line-strong);}
  .docs-crumb [aria-current="page"]{color:var(--pearl);}

  .docs-layout{display:grid;grid-template-columns:240px 1fr;gap:48px;align-items:start;padding-bottom:88px;}
  @media (max-width:900px){ .docs-layout{grid-template-columns:1fr;gap:24px;} }

  .docs-sidebar{position:sticky;top:calc(env(safe-area-inset-top,0px) + 88px);display:flex;flex-direction:column;gap:28px;}
  @media (max-width:900px){ .docs-sidebar{position:static;} }
  .docs-sidebar summary{display:none;}
  @media (max-width:900px){
    .docs-sidebar summary{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;font-family:'Sora',sans-serif;font-weight:600;font-size:0.92rem;color:var(--pearl);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:13px 16px;list-style:none;}
    .docs-sidebar summary::-webkit-details-marker{display:none;}
    .docs-sidebar summary::after{content:"";width:9px;height:9px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:rotate(45deg);transition:transform .18s ease;}
    .docs-sidebar[open] summary::after{transform:rotate(-135deg);}
    .docs-sidebar[open] summary{border-radius:var(--radius-sm) var(--radius-sm) 0 0;}
    .docs-sidebar .docs-sidebar-body{border:1px solid var(--line);border-top:none;border-radius:0 0 var(--radius-sm) var(--radius-sm);padding:16px;background:var(--surface);display:flex;flex-direction:column;gap:24px;}
  }
  .docs-sidebar-body{display:flex;flex-direction:column;gap:28px;}

  .docs-group-label{font-family:'Roboto Mono',monospace;font-weight:600;font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;}
  .docs-nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
  .docs-nav-link{display:flex;align-items:center;gap:6px;text-decoration:none;color:var(--muted);font-size:0.88rem;line-height:1.4;padding:7px 10px;border-radius:8px;transition:background .15s ease,color .15s ease;}
  .docs-nav-link:hover{color:var(--pearl);background:var(--tint-1);}
  .docs-nav-link.is-active{color:var(--teal);background:var(--teal-dim);font-weight:600;}
  .docs-nav-link:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
  .docs-nav-link .ext-icon{width:12px;height:12px;flex:none;opacity:0.7;}

  .docs-main{min-width:0;}
  .docs-main h1{font-size:clamp(1.8rem,3.6vw,2.4rem);line-height:1.14;max-width:18ch;margin:0;}
  .docs-main .sub{color:var(--muted);font-size:1.02rem;max-width:58ch;margin-top:16px;}

  .docs-ask{position:relative;display:flex;align-items:center;gap:10px;margin-top:28px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:13px 16px;}
  .docs-ask:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-dim);}
  .docs-ask svg{width:17px;height:17px;flex:none;color:var(--muted);}
  .docs-ask input{flex:1;min-width:0;border:0;background:transparent;outline:0;color:var(--pearl);font-family:'IBM Plex Sans',sans-serif;font-size:0.94rem;}
  .docs-ask input::placeholder{color:var(--muted);}
  .docs-ask-kbd{flex:none;font-family:'Roboto Mono',monospace;font-size:0.72rem;color:var(--muted);border:1px solid var(--line-strong);border-radius:6px;padding:2px 7px;background:var(--tint-1);}

  .docs-section-label{display:flex;align-items:center;gap:8px;margin:40px 0 16px;font-family:'Roboto Mono',monospace;font-weight:600;font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);}
  .docs-section-label .dot{width:6px;height:6px;border-radius:50%;background:var(--teal);flex:none;}

  .qa-list{display:flex;flex-direction:column;gap:14px;}
  .qa-card{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-md);padding:24px 26px;}
  .qa-card h3{font-family:'Sora',sans-serif;font-size:1.08rem;margin:0;}
  .qa-card p{color:var(--muted);font-size:0.92rem;line-height:1.6;margin:10px 0 0;max-width:62ch;}
  .qa-footer{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;}
  .qa-pill{font-family:'Roboto Mono',monospace;font-size:0.78rem;font-weight:600;color:var(--pearl);background:var(--tint-2);border:1px solid var(--line-strong);border-radius:8px;padding:6px 11px;white-space:nowrap;}
  .qa-link{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--teal);font-size:0.86rem;font-weight:600;}
  .qa-link:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:4px;}
  .qa-link .qa-time{color:var(--muted);font-weight:400;}
  .qa-link .qa-time::before{content:"\00b7";margin:0 6px;color:var(--line-strong);}
  .qa-link .r-arrow{transition:transform .18s ease;}
  .qa-link:hover .r-arrow{transform:translateX(3px);}
  .qa-link:hover{text-decoration:underline;}

  .qa-empty{color:var(--muted);font-size:0.92rem;padding:32px 0;text-align:center;}

  /* ---------- Homepage: "The edge" rebuilt as a 4-step bet-journey timeline (3 Oct, v2) ----------
     Replaces the old interactive pillar-grid (fair price / CLV / sportsbook sync / alerts, each
     with its own mini-demo widget) with a single chronological strip -- same four claims, now
     ordered the way a member actually experiences them across one bet (before you bet, before
     kickoff, at kickoff, all season) instead of grouped by feature. Price-move alerts stays the
     one step with no shipped feature behind it: a hollow dashed circle plus a "Roadmap" word in
     its own eyebrow label carries that status in text, not color alone. */
  .journey-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;}
  .journey-demo-tag{flex:none;margin-top:4px;}

  .journey-track{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative;margin-top:40px;}
  .journey-track::before{content:"";position:absolute;top:22px;left:calc(100%/8);right:calc(100%/8);height:2px;background:linear-gradient(90deg,var(--teal),var(--violet));z-index:0;}
  @media (max-width:860px){
    .journey-track{grid-template-columns:1fr;gap:28px;margin-top:28px;}
    .journey-track::before{display:none;}
  }

  .journey-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;position:relative;z-index:1;}
  @media (max-width:860px){ .journey-item{flex-direction:row;flex-wrap:wrap;align-items:flex-start;text-align:left;} }

  .journey-num{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;font-family:'Sora',sans-serif;font-weight:700;font-size:1.02rem;}
  .journey-num.is-teal{background:var(--teal);color:var(--on-accent);}
  .journey-num.is-violet{background:var(--violet);color:var(--on-accent);}
  .journey-num.is-hollow{background:var(--surface);border:2px dashed var(--violet);color:var(--violet);}

  .journey-eyebrow{font-family:'Roboto Mono',monospace;font-weight:600;font-size:0.72rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);align-self:center;}
  .journey-eyebrow.is-violet{color:var(--violet-ink);}
  @media (max-width:860px){
    .journey-eyebrow{align-self:center;margin-top:11px;}
  }

  .journey-card{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-md);padding:22px;display:flex;flex-direction:column;gap:10px;text-align:left;margin-top:2px;}
  .journey-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none;}
  .journey-icon svg{width:18px;height:18px;}
  .journey-icon.is-teal{background:var(--teal-dim);color:var(--teal);}
  .journey-icon.is-violet{background:var(--violet-dim);color:var(--violet);}
  @media (max-width:860px){ .journey-card{margin-top:14px;} }
  .journey-card.is-roadmap{background:transparent;border-style:dashed;border-color:rgba(139,92,246,0.4);}
  .journey-card h3{font-family:'Sora',sans-serif;font-size:1.02rem;margin:0;}
  .journey-card p{color:var(--muted);font-size:0.9rem;line-height:1.55;margin:0;}

  .journey-chip{margin-top:auto;font-family:'IBM Plex Mono',monospace;font-size:0.84rem;background:var(--tint-1);border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 13px;}
  .journey-chip-row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
  .jc-label{color:var(--muted);}
  .jc-mono{color:var(--muted);}
  .jc-value{font-weight:700;font-size:1.15rem;color:var(--pearl);display:inline-flex;align-items:center;gap:4px;}
  .jc-value.is-good{color:var(--teal);}
  .jc-value svg{width:13px;height:13px;flex:none;}

  .journey-chip-toast{display:flex;flex-direction:column;gap:4px;}
  .journey-chip-toast strong{font-family:'Sora',sans-serif;font-size:0.88rem;font-weight:600;color:var(--pearl);}
  .journey-chip-toast .jc-mono{font-size:0.95rem;font-weight:600;color:var(--pearl);}

  .journey-badges{display:flex;flex-wrap:wrap;gap:6px;background:transparent;border:0;padding:0;}
  .journey-badge{font-family:'IBM Plex Mono',monospace;font-size:0.74rem;font-weight:600;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 11px;display:inline-flex;align-items:center;gap:5px;}
  .journey-badge.is-active{color:var(--teal);border-color:rgba(38,230,200,0.35);background:var(--teal-dim);}
  .journey-badge svg{width:11px;height:11px;flex:none;}

  /* ---------- Resource tools pages: ordered lists, figures, CTA, responsible-play line (2 Oct) ---------- */
  .article-body ol{margin:0 0 16px; padding-left:1.4em; color:var(--muted); font-size:1rem; line-height:1.72;}
  .article-body ol li::marker{font-family:'Roboto Mono',monospace; color:var(--teal); font-weight:600;}
  .article-body li strong{color:var(--pearl);}
  .article-body .cx-tablewrap{margin:0 0 12px;}
  .article-body .cx-note ul{margin:8px 0 6px;}
  .article-body .cx-note{margin:6px 0 22px;}
  .article-body .cx-foot{margin:0 0 18px;}
  .article-figure{margin:6px 0 22px; padding:16px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2);}
  .article-figure figcaption{margin-top:10px; font-size:0.84rem; color:var(--muted); line-height:1.5;}
  .article-cta{margin:36px 0 14px; padding:20px 22px; border:1px solid var(--line-strong); border-radius:var(--radius-md); background:var(--teal-dim);}
  .article-cta p{margin:0 0 14px;}
  .article-cta .btn{min-height:44px;}
  .article-body > p > .btn{min-height:44px;}
  .rp-line{font-size:0.86rem !important; color:var(--muted);}

  /* ---------- Homepage: "Build one parlay as a group" ring infographic ---------- */
  #group-parlay .gp-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center;}
  .gp-copy h2{font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.08;}
  .gp-copy h2 .hl-teal{color:var(--teal);}
  .gp-copy p{color:var(--muted);margin-top:16px;font-size:1.05rem;max-width:42ch;}
  .gp-chips{list-style:none;margin:18px 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
  .gp-chips li{font-family:'Roboto Mono',monospace;font-size:0.78rem;color:var(--muted);border:1px solid var(--line-strong);background:var(--tint-1);border-radius:999px;padding:6px 12px;}
  .gp-ring-wrap{position:relative;width:100%;max-width:640px;height:440px;margin-inline:auto;}
  .gp-ring{position:absolute;left:50%;top:50%;width:250px;height:250px;transform:translate(-50%,-50%);}
  .gp-ring svg{width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(0 14px 30px rgba(7,46,56,0.18));}
  .gp-face{fill:var(--surface);stroke:var(--line);stroke-width:1;}
  .gp-track{fill:none;stroke:var(--tint-3);stroke-width:14;}
  .gp-arc{fill:none;stroke:var(--violet);stroke-width:14;stroke-linecap:round;}
  .gp-node{stroke:var(--surface);stroke-width:3;}
  .gp-node.is-filled{fill:var(--violet);}
  .gp-node.is-open{fill:var(--surface);stroke:var(--violet);stroke-width:2.5;}
  .gp-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:62px;pointer-events:none;}
  .gp-count{font-family:'Roboto Mono',monospace;font-weight:700;font-size:2.3rem;line-height:1;color:var(--pearl);}
  .gp-count-cap{margin-top:6px;font-family:'Roboto Mono',monospace;font-size:0.6rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);}
  .gp-legs{list-style:none;margin:0;padding:0;}
  .gp-leg{position:absolute;display:flex;align-items:center;gap:9px;min-width:0;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 10px 24px rgba(7,46,56,0.12);}
  .gp-leg--1{top:0;left:50%;transform:translateX(-30%);}
  .gp-leg--2{top:50%;right:0;transform:translateY(-50%);}
  .gp-leg--3{bottom:0;left:50%;transform:translateX(-30%);}
  .gp-leg--4{top:50%;left:0;transform:translateY(-50%);}
  .gp-leg.is-open{border-style:dashed;border-color:var(--line-strong);background:var(--tint-1);box-shadow:none;color:var(--muted);}
  .gp-num{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--violet);color:#fff;font-size:0.72rem;font-weight:700;}
  .gp-num.is-open{background:transparent;border:1.5px dashed var(--violet-ink);color:var(--violet-ink);}
  .gp-leg-text{display:flex;flex-direction:column;min-width:0;line-height:1.2;}
  .gp-leg-text strong{font-size:0.86rem;color:var(--pearl);white-space:nowrap;}
  .gp-leg.is-open .gp-leg-text strong{color:var(--muted);font-weight:500;}
  .gp-leg-text small{font-size:0.7rem;color:var(--muted);}
  .gp-price{margin-left:auto;padding-left:8px;font-family:'Roboto Mono',monospace;font-weight:700;font-size:0.9rem;color:var(--pearl);}
  /* The arc draws itself once when the ring scrolls into view. */
  @media (prefers-reduced-motion:no-preference){
    .js-reveal .gp-ring-wrap.reveal .gp-arc{stroke-dasharray:0 100;transition:stroke-dasharray 1.4s cubic-bezier(.22,.61,.36,1) .35s;}
    .js-reveal .gp-ring-wrap.reveal.is-visible .gp-arc{stroke-dasharray:75 25;}
  }
  @media (max-width:900px){
    #group-parlay .gp-grid{grid-template-columns:1fr;gap:28px;}
    .gp-ring-wrap{height:auto;display:flex;flex-direction:column;align-items:center;gap:20px;max-width:420px;}
    .gp-ring{position:relative;left:auto;top:auto;transform:none;width:220px;height:220px;}
    .gp-count{font-size:2.1rem;}
    .gp-legs{width:100%;display:flex;flex-direction:column;gap:10px;}
    .gp-leg{position:static;transform:none;width:100%;}
  }

/* ---------- Homepage: "Bet builder — try it here" (Oct 2026) ----------
   Interactive sample board + slip. The board and slip are drawn as a product
   screenshot, so they use fixed light-surface colours in BOTH themes (like the
   member app's own odds board) rather than the page tokens. All prices are
   demonstration data. */
#preview .tb-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px;flex-wrap:wrap;}
.tb-kicker{display:block;font-family:'Roboto Mono',monospace;font-weight:600;font-size:0.78rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--teal);margin-bottom:12px;}
.tb-head h2{font-size:clamp(1.9rem,4.6vw,3.1rem);line-height:1.06;margin:0 0 14px;text-wrap:balance;}
.tb-sub{margin:0;color:var(--muted);font-size:1.08rem;}
.tb-chip{display:inline-block;font-family:'Roboto Mono',monospace;font-weight:600;color:var(--teal);background:var(--teal-dim);border:1px solid rgba(38,230,200,0.38);border-radius:8px;padding:1px 9px;min-width:6.4em;text-align:center;transition:opacity .2s ease;}
.tb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.tb-head{position:relative;}
.tb-cap{margin:0;font-family:'Roboto Mono',monospace;font-size:0.78rem;color:var(--muted);}
.tb-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start;}
.tb-col{min-width:0;}

.tb-board{background:#EAF4F2;color:#0A2A32;border-radius:24px;padding:4px 18px 8px;border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,0.18);}
.tb-hd,.tb-game{display:grid;grid-template-columns:78px minmax(0,1.5fr) repeat(3,minmax(0,1fr));column-gap:10px;align-items:center;}
.tb-hd{padding:16px 0 10px;font-family:'Roboto Mono',monospace;font-size:0.66rem;letter-spacing:0.16em;text-transform:uppercase;color:#456872;}
.tb-game{padding:12px 0;border-top:1px solid rgba(7,46,56,0.12);row-gap:8px;}
.tb-time{grid-column:1;grid-row:1 / 3;display:flex;flex-direction:column;gap:2px;}
.tb-time b{font-family:'Sora',sans-serif;font-size:0.95rem;}
.tb-time span{font-family:'Roboto Mono',monospace;font-size:0.68rem;color:#456872;}
.tb-team{grid-column:2;display:flex;align-items:center;gap:8px;font-weight:600;font-size:0.86rem;min-width:0;}
.tb-t1{grid-row:1;} .tb-t2{grid-row:2;}
.tb-shield{width:22px;height:26px;flex:none;display:grid;place-items:center;background:var(--tb-bg);color:var(--tb-ink);clip-path:polygon(0 0,100% 0,100% 60%,50% 100%,0 60%);font-family:'Sora',sans-serif;font-weight:700;font-size:7.5px;letter-spacing:0;padding-bottom:4px;}
.c1{grid-column:3;} .c2{grid-column:4;} .c3{grid-column:5;}
.r1{grid-row:1;} .r2{grid-row:2;}

.tb-cell{appearance:none;font-family:inherit;color:#0A2A32;cursor:pointer;text-align:center;position:relative;min-height:58px;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:8px 10px 9px;background:#fff;border:1px solid rgba(7,46,56,0.14);border-radius:12px;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;}
.tb-cell:hover{border-color:rgba(11,122,104,0.6);box-shadow:0 3px 12px rgba(7,46,56,0.12);}
.tb-cell:focus-visible,.tb-slip button:focus-visible,.tb-slip a:focus-visible,.tb-jump:focus-visible{outline:3px solid #6D28D9;outline-offset:2px;}
.tb-main{font-family:'Sora',sans-serif;font-weight:700;font-size:1.08rem;font-variant-numeric:tabular-nums;line-height:1.15;}
.tb-s2{font-family:'Roboto Mono',monospace;font-size:0.7rem;color:#456872;font-variant-numeric:tabular-nums;}
.tb-r{text-align:right;}
.tb-mk,.tb-mline{display:none;}
.tb-row2{display:flex;justify-content:space-between;align-items:baseline;gap:6px;}
.tb-ol{font-weight:700;font-size:0.8rem;}
.tb-over{color:#0B6B5B;} .tb-under{color:#5B21B6;}
.tb-bar{display:block;height:4px;border-radius:99px;background:rgba(7,46,56,0.13);margin-top:5px;overflow:hidden;}
.tb-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#26E6C8,#8B5CF6);}
.tb-ou{grid-column:4;grid-row:1 / 3;align-self:center;justify-self:center;z-index:2;pointer-events:none;background:#071827;color:#F4F7FB;border-radius:999px;padding:4px 10px;font-family:'Roboto Mono',monospace;font-size:0.62rem;letter-spacing:0.04em;box-shadow:0 0 0 3px #EAF4F2;}
.tb-ou b{color:#26E6C8;font-size:0.82rem;margin-left:2px;}

.tb-cell[aria-pressed="true"]{background:linear-gradient(135deg,#26E6C8 0%,#7FA6F5 100%);border-color:#071827;box-shadow:0 6px 18px rgba(38,230,200,0.3);}
.tb-cell[aria-pressed="true"] .tb-s2,.tb-cell[aria-pressed="true"] .tb-ol{color:#071827;}
.tb-cell[aria-pressed="true"] .tb-bar{background:rgba(7,24,39,0.25);}
.tb-cell[aria-pressed="true"] .tb-bar i{background:#071827;}
.tb-cell[aria-pressed="true"]::after{content:"\2713";position:absolute;top:-9px;right:-9px;width:22px;height:22px;border-radius:50%;background:#071827;color:#fff;font-size:0.72rem;font-weight:700;display:grid;place-items:center;box-shadow:0 0 0 2px #fff;}

.tb-jump{display:none;}

/* Slip */
.tb-slip{--si:#0A2A32;background:#fff;color:var(--si);border:2px solid #26E6C8;border-radius:24px;padding:10px;display:flex;flex-direction:column;gap:10px;box-shadow:0 18px 50px rgba(0,0,0,0.18);outline:none;position:sticky;top:90px;}
.tb-slip h3{margin:0;font-size:1.1rem;color:#071827;}
.tb-slip-head{display:flex;align-items:center;justify-content:space-between;background:#26E6C8;color:#071827;border-radius:14px;padding:10px 12px 10px 16px;}
.tb-clear{appearance:none;font:600 0.85rem 'Sora',sans-serif;color:#4C1D95;background:#fff;border:2px solid #7C3AED;border-radius:999px;padding:6px 16px;min-height:36px;cursor:pointer;}
.tb-clear:disabled{opacity:.5;cursor:default;}
.tb-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.tb-tab{appearance:none;font:600 0.95rem 'Sora',sans-serif;color:#0A2A32;background:#fff;border:1px solid rgba(7,46,56,0.18);border-radius:12px;padding:10px;min-height:46px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;}
.tb-tab[aria-pressed="true"]{background:#7C3AED;border-color:#7C3AED;color:#fff;}
.tb-count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:99px;font-size:0.72rem;background:rgba(7,46,56,0.1);}
.tb-tab[aria-pressed="true"] .tb-count{background:rgba(255,255,255,0.28);}
.tb-legs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.tb-leg{border:1px solid rgba(7,46,56,0.14);border-radius:14px;padding:10px 12px;display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;background:#fff;}
.tb-leg-m{font-family:'Roboto Mono',monospace;font-size:0.68rem;font-weight:600;letter-spacing:0.04em;color:#456872;text-transform:uppercase;}
.tb-leg-t{font-family:'Sora',sans-serif;font-weight:700;font-size:0.95rem;line-height:1.25;color:#071827;}
.tb-leg-w{display:block;font:500 0.72rem 'Roboto Mono',monospace;color:#456872;margin-top:2px;}
.tb-odds{border:2px solid #26E6C8;border-radius:10px;padding:6px 10px;display:flex;align-items:baseline;gap:6px;font-family:'Roboto Mono',monospace;font-weight:700;font-size:0.95rem;white-space:nowrap;color:#071827;}
.tb-odds small{font-size:0.6rem;letter-spacing:0.08em;color:#456872;}
.tb-x{appearance:none;position:relative;width:30px;height:30px;border-radius:50%;border:2px solid #7C3AED;background:#fff;color:#5B21B6;font:700 0.85rem 'Sora',sans-serif;cursor:pointer;justify-self:end;display:grid;place-items:center;padding:0;}
.tb-x::before{content:"";position:absolute;inset:-8px;}
.tb-empty{margin:0;padding:18px 12px;text-align:center;color:#456872;font-size:0.9rem;border:1px dashed rgba(7,46,56,0.25);border-radius:14px;}
.tb-best{border:2px solid rgba(38,230,200,0.7);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:10px;font-size:0.92rem;}
.tb-best p{margin:0;}
.tb-best b{white-space:nowrap;}
.tb-btn{appearance:none;font:700 0.95rem 'Sora',sans-serif;border:0;border-radius:12px;padding:12px 16px;min-height:46px;cursor:pointer;text-align:center;}
.tb-btn-violet{background:#7C3AED;color:#fff;align-self:flex-start;}
.tb-btn-teal{background:#26E6C8;color:#071827;}
.tb-btn:hover{filter:brightness(1.06);}
.tb-venues{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;font-size:0.86rem;}
.tb-venues li{display:grid;grid-template-columns:20px 1fr auto auto;gap:8px;align-items:center;padding:8px 2px;border-top:1px solid rgba(7,46,56,0.1);font-variant-numeric:tabular-nums;}
.tb-venues .tb-vr{font-family:'Roboto Mono',monospace;color:#456872;font-size:0.72rem;}
.tb-venues .tb-vp{font-family:'Roboto Mono',monospace;font-weight:700;}
.tb-venues .tb-vd{font-family:'Roboto Mono',monospace;font-size:0.74rem;color:#456872;min-width:5.2em;text-align:right;}
.tb-flag{font:700 0.62rem 'Roboto Mono',monospace;letter-spacing:0.06em;text-transform:uppercase;background:#071827;color:#26E6C8;border-radius:99px;padding:2px 7px;margin-left:6px;}
.tb-group{display:flex;align-items:center;justify-content:space-between;gap:10px;text-decoration:none;color:#071827;border:2px solid #7C3AED;border-radius:16px;padding:12px 14px;}
.tb-group b{display:block;font-family:'Sora',sans-serif;font-size:0.95rem;}
.tb-group small{color:#456872;font-size:0.78rem;}
.tb-demo-msg{margin:0;font-size:0.8rem;color:#4C1D95;background:rgba(124,58,237,0.08);border-radius:10px;padding:8px 10px;}
.tb-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
.tb-note{margin:22px 0 0;font-size:0.84rem;color:var(--muted);max-width:78ch;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;}
.tb-cta{margin-top:18px;border:1px solid var(--line);border-radius:16px;}

@media (min-width:1100px){ .tb-cap{position:absolute;right:0;bottom:8px;} }
@media (max-width:980px){
  .tb-layout{grid-template-columns:1fr;}
  .tb-slip{position:static;}
  .tb-jump{display:flex;position:sticky;bottom:calc(14px + env(safe-area-inset-bottom,0px));margin-top:14px;width:max-content;max-width:100%;margin-inline:auto;align-items:center;gap:6px;background:#26E6C8;color:#071827;font:700 0.9rem 'Sora',sans-serif;text-decoration:none;border-radius:999px;padding:12px 20px;min-height:46px;box-shadow:0 8px 24px rgba(0,0,0,0.3);z-index:5;}
}
@media (max-width:720px){
  .tb-board{padding:4px 12px 8px;border-radius:20px;}
  .tb-hd,.tb-ou{display:none;}
  .tb-game{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:8px;row-gap:6px;padding:14px 0;}
  .tb-time{grid-column:1 / -1;grid-row:1;flex-direction:row;align-items:baseline;gap:8px;}
  .tb-t1,.tb-t2{grid-column:1 / -1;}
  .tb-t1{grid-row:2;}
  .tb-t2{grid-row:4;margin-top:4px;}
  .r1.c1,.r1.c2,.r1.c3{grid-row:3;}
  .r2.c1,.r2.c2,.r2.c3{grid-row:5;}
  .c1{grid-column:1;} .c2{grid-column:2;} .c3{grid-column:3;}
  .tb-cell{padding:7px 6px 8px;min-height:68px;}
  .tb-mk{display:block;font:600 0.56rem 'Roboto Mono',monospace;letter-spacing:0.1em;text-transform:uppercase;color:#456872;}
  .tb-cell[aria-pressed="true"] .tb-mk{color:#071827;}
  .tb-mline{display:inline;}
  .tb-main{font-size:0.98rem;}
  .tb-row2{flex-direction:column;align-items:center;gap:0;}
  .tb-r{text-align:center;}
  .tb-s2{font-size:0.64rem;}
  #preview .tb-head{flex-direction:column;align-items:flex-start;gap:12px;}
}
@media (prefers-reduced-motion:reduce){
  .tb-cell,.tb-chip{transition:none;}
}

/* ---------- Homepage: "On your phone" three-phone fan (Oct 2026) ----------
   The phones are CSS illustrations drawn in em units: .ph-fan's font-size tracks the
   stage width (container-query units), so the whole fan scales as one piece.
   Screens show demonstration data and are hidden from assistive tech; the stage carries a
   single descriptive label. */
.ph-grid{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);gap:48px;align-items:center;}
.ph-copy h2{font-size:clamp(2rem,3.9vw,2.9rem);line-height:1.04;margin:0 0 18px;text-wrap:balance;}
.ph-lede{margin:0 0 26px;color:var(--muted);font-size:1.08rem;max-width:44ch;}
.ph-steps{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-direction:column;gap:16px;}
.ph-steps li{display:flex;gap:14px;align-items:flex-start;}
.ph-n{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--teal-dim);color:var(--teal);font:700 0.9rem 'Sora',sans-serif;border:1px solid rgba(38,230,200,0.35);}
.ph-steps b{display:block;font-family:'Sora',sans-serif;font-size:1.02rem;color:var(--pearl);}
.ph-steps span:not(.ph-n){display:block;color:var(--muted);font-size:0.92rem;margin-top:2px;}
.ph-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:22px;}
.ph-qr{display:flex;align-items:center;gap:14px;}
.ph-qr svg{width:104px;height:104px;flex:none;border-radius:12px;box-shadow:0 0 0 1px var(--line);}
.ph-qr p{margin:0;max-width:15ch;font-size:0.84rem;color:var(--muted);line-height:1.4;}
.ph-qr b{display:block;color:var(--pearl);}
@media (hover:none) and (pointer:coarse){ .ph-qr{display:none;} }

.ph-stage{container-type:inline-size;width:100%;max-width:640px;margin-inline:auto;aspect-ratio:64 / 58;}
.ph-fan{position:relative;width:100%;height:100%;font-size:10px;font-size:calc(100cqw / 64);font-family:'Sora',sans-serif;}
.ph-phone{position:absolute;background:#0B2230;border-radius:4em;padding:0.9em;box-shadow:0 2em 5em rgba(0,0,0,0.45),inset 0 0 0 0.15em rgba(255,255,255,0.14);}
.ph-mid{left:19em;top:0.5em;width:26em;height:55em;z-index:3;}
.ph-left,.ph-right{top:6em;width:24em;height:47em;}
.ph-left{left:0.5em;transform:rotate(-9deg);z-index:1;}
.ph-right{right:0.5em;transform:rotate(9deg);z-index:2;}
.ph-notch{position:absolute;top:1.7em;left:50%;transform:translateX(-50%);width:8em;height:2.2em;border-radius:99px;background:#050F17;z-index:4;}
.ph-screen{position:relative;height:100%;border-radius:3.2em;background:#EAF4F2;overflow:hidden;padding:4.4em 1em 1em;color:#0A2A32;}
.ph-mid .ph-screen{padding-top:4.6em;}
.ph-sp{display:flex;justify-content:space-between;font-size:0.82em;font-weight:600;padding:0 0.3em 0.6em;color:#456872;}
.ph-sp .on{color:#071827;}
.ph-sp u{text-decoration:none;font-size:0.72em;background:#26E6C8;color:#071827;border-radius:99px;padding:0.1em 0.5em;margin-left:0.3em;font-family:'Roboto Mono',monospace;}
.ph-sub{border-bottom:0.1em solid rgba(7,46,56,0.12);font-size:0.74em;padding-bottom:0.7em;}
.ph-sub .on{border-bottom:0.2em solid #26E6C8;padding-bottom:0.5em;}
.ph-hd{display:grid;grid-template-columns:4.2em 1fr 1fr 1fr;gap:0.4em;font:600 0.5em 'Roboto Mono',monospace;letter-spacing:0.12em;text-transform:uppercase;color:#456872;padding:0.9em 0.2em 0.2em;text-align:center;}
.ph-hd span:first-child{text-align:left;}
.ph-g{position:relative;border-top:0.1em solid rgba(7,46,56,0.12);padding:0.5em 0 0.4em;}
.ph-gh{display:flex;align-items:baseline;gap:0.6em;font-size:0.8em;margin-bottom:0.3em;}
.ph-gh span{font:0.78em 'Roboto Mono',monospace;color:#456872;}
.ph-gh em{margin-left:auto;font-style:normal;font-size:0.8em;color:#456872;}
.ph-r{display:grid;grid-template-columns:4.2em 1fr 1fr 1fr;gap:0.4em;align-items:center;margin-top:0.35em;}
.ph-t{display:flex;align-items:center;gap:0.5em;font-weight:700;font-size:0.78em;}
.ph-sh{display:block;width:1.5em;height:1.8em;background:var(--b);clip-path:polygon(0 0,100% 0,100% 60%,50% 100%,0 60%);}
.ph-c{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;border:0.08em solid rgba(7,46,56,0.12);border-radius:0.8em;height:3.9em;padding:0.3em 0.2em;position:relative;}
.ph-cm{font-weight:700;font-size:0.92em;line-height:1.1;white-space:nowrap;}
.ph-ar{font-size:0.6em;margin-right:0.35em;color:#0B6B5B;vertical-align:0.1em;}
.ph-cs{font:0.52em 'Roboto Mono',monospace;color:#456872;margin-top:0.25em;white-space:nowrap;}
.ph-cb{display:block;width:84%;height:0.3em;border-radius:99px;background:rgba(7,46,56,0.13);margin-top:0.4em;overflow:hidden;}
.ph-cb i{display:block;height:100%;background:linear-gradient(90deg,#26E6C8,#8B5CF6);}
.ph-c.is-sel{background:linear-gradient(135deg,#26E6C8,#7FA6F5);border-color:#071827;}
.ph-c.is-sel .ph-cs{color:#071827;}
.ph-c.is-sel .ph-cb{background:rgba(7,24,39,0.25);}
.ph-c.is-sel .ph-cb i{background:#071827;}
.ph-c.is-sel::after{content:"\2713";position:absolute;top:-0.5em;right:-0.4em;width:1.5em;height:1.5em;border-radius:50%;background:#071827;color:#fff;font-size:0.6em;display:grid;place-items:center;}
.ph-ou{position:absolute;left:26.2em;top:11.9em;transform:translate(-50%,-50%);background:#071827;color:#F4F7FB;border-radius:99px;padding:0.25em 0.8em;font:0.52em 'Roboto Mono',monospace;white-space:nowrap;z-index:2;box-shadow:0 0 0 0.3em #EAF4F2;}
.ph-ou s{text-decoration:none;opacity:0.8;margin-right:0.4em;}
.ph-ou b{color:#26E6C8;font-size:1.25em;}
.ph-bar{position:absolute;left:0.9em;right:0.9em;bottom:1em;display:flex;align-items:center;gap:0.9em;background:#E6FBF7;border:0.15em solid #26E6C8;border-radius:1.6em;padding:0.9em 1em;z-index:3;}
.ph-bar b{display:block;font-size:0.95em;}
.ph-bar small{display:block;font-size:0.58em;color:#456872;margin-top:0.2em;}
.ph-bar em{margin-left:auto;font-style:normal;font-weight:700;font-size:1em;background:#26E6C8;color:#071827;border-radius:99px;padding:0.5em 1em;}
.ph-badge{flex:none;width:2.2em;height:2.2em;border-radius:50%;display:grid;place-items:center;background:#26E6C8;color:#071827;font-weight:700;font-size:0.82em;}

.ph-slipscr{padding-top:4.8em;background:#E6F7F4;}
.ph-sh1{display:flex;align-items:center;gap:0.8em;font-size:1em;margin-bottom:0.9em;}
.ph-tabs{display:grid;grid-template-columns:1fr 1fr;gap:0.5em;margin-bottom:0.8em;}
.ph-tabs span{text-align:center;font-weight:700;font-size:0.9em;padding:0.7em 0.3em;border-radius:1em;background:#fff;border:0.08em solid rgba(7,46,56,0.14);}
.ph-tabs span.on{background:#7C3AED;color:#fff;border-color:#7C3AED;}
.ph-tabs u{text-decoration:none;font-size:0.8em;background:rgba(7,46,56,0.1);border-radius:99px;padding:0.1em 0.55em;margin-left:0.3em;}
.ph-tabs .on u{background:rgba(255,255,255,0.3);}
.ph-lg{background:#fff;border:0.08em solid rgba(7,46,56,0.12);border-radius:1.1em;padding:0.8em 0.9em;margin-bottom:0.6em;display:flex;flex-direction:column;gap:0.4em;}
.ph-lg small{font:600 0.55em 'Roboto Mono',monospace;color:#456872;text-transform:uppercase;letter-spacing:0.05em;}
.ph-lg b{font-size:0.92em;line-height:1.2;}
.ph-tag{align-self:flex-start;font:600 0.62em 'Roboto Mono',monospace;color:#5B21B6;border:0.12em solid #7C3AED;border-radius:0.7em;padding:0.25em 0.8em;}
.ph-bt{font-weight:700;font-size:0.78em;border-radius:0.9em;padding:0.7em 1em;text-align:center;}
.ph-bt.v{background:#7C3AED;color:#fff;align-self:flex-start;}
.ph-bt.t{background:#8FE9D9;color:#071827;}
.ph-lg2{display:grid;grid-template-columns:1fr auto;align-items:center;gap:0.3em 0.6em;}
.ph-lg2 small{grid-column:1;}
.ph-x{grid-column:2;grid-row:1;justify-self:end;font-style:normal;width:1.9em;height:1.9em;border-radius:50%;border:0.14em solid #7C3AED;display:grid;place-items:center;color:#5B21B6;font-size:0.8em;line-height:1;}
.ph-lg2 b{grid-column:1;grid-row:2;}
.ph-od{grid-column:2;grid-row:2;border:0.14em solid #26E6C8;border-radius:0.8em;padding:0.35em 0.7em;font:700 0.85em 'Roboto Mono',monospace;white-space:nowrap;}
.ph-od u{text-decoration:none;font-size:0.6em;color:#456872;margin-right:0.4em;}
.ph-bk{background:#fff;border:0.15em solid rgba(38,230,200,0.7);border-radius:1.1em;padding:0.8em 0.9em;display:flex;flex-direction:column;gap:0.5em;}
.ph-bk p{margin:0;font-size:0.78em;}
.ph-bk ul{list-style:none;margin:0;padding:0;font-size:0.72em;}
.ph-bk li{display:grid;grid-template-columns:1fr auto auto;gap:0.8em;padding:0.35em 0;border-top:0.08em solid rgba(7,46,56,0.1);font-family:'Roboto Mono',monospace;}
.ph-bk li b{font-family:'Sora',sans-serif;font-size:0.95em;}
.ph-bk li em{font-style:normal;color:#456872;}

@media (max-width:900px){
  .ph-grid{grid-template-columns:1fr;gap:36px;}
  .ph-qr{display:none;}
}

/* ---------- Homepage: "Shop for free. Measure as a member." glowing comparison (Oct 2026) ----------
   The plan table is a dark panel in BOTH themes (like the odds board and phone mocks), with each plan
   column drawn as its own softly glowing card: neutral Starter, teal Member, violet Annual. Rows use
   display:contents so one grid lines every column up; .cmp-colbg elements paint the column cards. */
.cmp-head-block{text-align:center;margin:0 auto 34px;max-width:760px;}
.cmp-head-block h2{font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.08;margin:12px 0 0;text-wrap:balance;}
.cmp-head-block h2 .hl-teal{color:var(--teal);}
.compare-wrap.cmp-glow{
  --pearl:#F4F7FB;--muted:#A9BCCB;--line:rgba(255,255,255,0.08);--line-strong:rgba(255,255,255,0.16);--teal:#26E6C8;
  position:relative;color:#F4F7FB;border-radius:28px;padding:34px 18px 22px;border:1px solid rgba(255,255,255,0.08);
  background:radial-gradient(60% 50% at 62% 0%,rgba(38,230,200,0.14),transparent 70%),radial-gradient(45% 55% at 100% 20%,rgba(139,92,246,0.22),transparent 70%),#050F18;
}
.cmp-glow .compare-table{
  display:grid;min-width:660px;position:relative;border:0;background:none;border-radius:0;overflow:visible;
  grid-template-columns:minmax(210px,1.6fr) repeat(3,minmax(120px,1fr));column-gap:0;
}
.cmp-glow .cmp-row{display:contents;}
.cmp-glow .cmp-cell{position:relative;z-index:1;padding:16px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:none;}
.cmp-glow .cmp-row-head .cmp-cell,.cmp-glow .cmp-row-category .cmp-cell{border-bottom:0;}
.cmp-glow .cmp-row:last-child .cmp-cell{border-bottom:0;}
.cmp-glow .cmp-cell.is-member,.cmp-glow .cmp-head.is-member,.cmp-glow .cmp-category-fill,.cmp-glow .cmp-category-fill.is-member{background:none;}
.cmp-glow .cmp-colbg{position:absolute;top:0;bottom:0;width:21.74%;box-sizing:border-box;z-index:0;border-radius:22px;border:1px solid rgba(255,255,255,0.1);background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.015));}
.cmp-glow .cmp-colbg.is-starter{left:34.78%;}
.cmp-glow .cmp-colbg.is-member{left:56.52%;top:-14px;bottom:-10px;border-color:rgba(38,230,200,0.6);background:linear-gradient(180deg,rgba(38,230,200,0.22),rgba(38,230,200,0.04) 38%,rgba(38,230,200,0.02));box-shadow:0 0 46px rgba(38,230,200,0.2),inset 0 0 28px rgba(38,230,200,0.06);}
.cmp-glow .cmp-colbg.is-annual{left:78.26%;border-color:rgba(139,92,246,0.55);background:linear-gradient(180deg,rgba(139,92,246,0.30),rgba(139,92,246,0.07) 40%,rgba(139,92,246,0.03));box-shadow:0 0 40px rgba(139,92,246,0.16);}
.cmp-glow .cmp-row-head .cmp-cell{background:none;}
.cmp-glow .cmp-corner{flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:6px;}
.cmp-glow .cmp-corner-label{color:#C5D3DF;letter-spacing:0.14em;}
.cmp-corner-note{font-size:0.74rem;line-height:1.4;color:#A9BCCB;max-width:20ch;}
.cmp-glow .cmp-head{gap:5px;padding-block:26px 18px;}
.cmp-glow .cmp-head h3{font:600 0.66rem 'Roboto Mono',monospace;letter-spacing:0.18em;text-transform:uppercase;color:#C5D3DF;gap:0;}
.cmp-glow .cmp-head.is-member h3{color:#26E6C8;}
.cmp-glow .cmp-popular{background:none;color:inherit;padding:0;font:inherit;letter-spacing:inherit;}
.cmp-glow .cmp-popular::before{content:"\00b7";margin:0 0.55em;}
.cmp-glow .cmp-price .amt{font-size:2rem;color:#fff;letter-spacing:-0.01em;}
.cmp-glow .cmp-sub{color:#A9BCCB;font-size:0.76rem;}
.cmp-glow .cmp-head .btn{border-radius:999px;margin-top:auto;font-weight:700;}
.cmp-glow .cmp-head .cmp-sub{margin-bottom:10px;}
.note-mobile{display:none;}
.cmp-glow .is-starter.cmp-head .btn{background:transparent;color:#F4F7FB;border:1px solid rgba(255,255,255,0.38);}
.cmp-glow .is-member.cmp-head .btn{background:#26E6C8;color:#071827;border:0;box-shadow:0 0 22px rgba(38,230,200,0.35);}
.cmp-glow .is-annual.cmp-head .btn{background:#7C3AED;color:#fff;border:0;}
.cmp-glow .cmp-category{display:flex;align-items:center;gap:12px;padding-block:22px 10px;font-size:0.7rem;letter-spacing:0.16em;color:#9FB3C4;background:none;}
.cmp-glow .cmp-category.cat-price{color:#26E6C8;}
.cmp-glow .cmp-category.cat-measure{color:#B79BFB;}
.cmp-ico{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:9px;font:600 0.8rem 'Roboto Mono',monospace;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.08);}
.cat-price .cmp-ico{background:rgba(38,230,200,0.14);border-color:rgba(38,230,200,0.3);}
.cat-measure .cmp-ico{background:rgba(139,92,246,0.16);border-color:rgba(139,92,246,0.35);}
.cmp-glow .cmp-label{color:#F4F7FB;font-size:0.88rem;}
.cmp-glow .cmp-val{color:#E4ECF3;font-family:'Roboto Mono',monospace;font-size:0.8rem;}
.cmp-glow .cmp-check{width:22px;height:22px;padding:4px;border-radius:50%;box-sizing:border-box;}
.cmp-glow .is-starter .cmp-check{background:#2B3B49;color:#F4F7FB;}
.cmp-glow .is-member .cmp-check{background:#26E6C8;color:#071827;}
.cmp-glow .is-annual .cmp-check{background:#8B5CF6;color:#fff;}
.cmp-glow .cmp-dash{color:rgba(255,255,255,0.28);}
.price-placeholder-note{max-width:70ch;}
@media (max-width:640px){
  .compare-wrap.cmp-glow{padding:26px 6px 16px;border-radius:22px;overflow-x:visible;}
  .cmp-glow .compare-table{min-width:0;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));}
  .cmp-glow .cmp-colbg{width:22.22%;}
  .cmp-glow .cmp-colbg.is-starter{left:33.33%;}
  .cmp-glow .cmp-colbg.is-member{left:55.56%;}
  .cmp-glow .cmp-colbg.is-annual{left:77.78%;}
  .cmp-glow .cmp-cell{padding:12px 6px;}
  .cmp-glow .cmp-label{font-size:0.78rem;line-height:1.3;}
  .cmp-glow .cmp-head{padding-inline:4px;}
  .cmp-glow .cmp-head h3{font-size:0.54rem;letter-spacing:0.1em;flex-wrap:wrap;justify-content:center;text-align:center;}
  .cmp-glow .cmp-popular{display:block;}
  .cmp-glow .cmp-popular::before{content:none;}
  .cmp-glow .cmp-price .amt{font-size:1.3rem;}
  .cmp-glow .cmp-sub{font-size:0.62rem;line-height:1.3;}
  .cmp-glow .cmp-head .btn{padding:8px 4px;min-height:40px;font-size:0.7rem;line-height:1.1;}
  .cmp-glow .cmp-category{padding-inline:6px;gap:8px;font-size:0.6rem;letter-spacing:0.1em;}
  .cmp-ico{width:24px;height:24px;flex:none;}
  .cmp-corner-note{display:none;}
  .note-mobile{display:inline;}
  .cmp-glow .cmp-val{font-size:0.66rem;}
}

/* ---------- Homepage hero: copy left, "one bet, every venue" price hub right (Oct 2026) ----------
   The hub is HTML + one SVG of spokes laid out on a fixed 600x540 design grid; .hub-in's font-size
   tracks the container width (cqw), so every card scales together. Prices are sample data and the
   graphic carries one descriptive label for assistive tech. */
.hero-split{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:40px;}
.hero-split .hero-copy{min-width:0;}
.hero-split h1.headline{font-size:clamp(2.4rem,5vw,4rem);line-height:1.03;max-width:none;letter-spacing:-0.025em;}
.hero-split .eyebrow{text-transform:none;letter-spacing:0.03em;}
.hero-split .sub{font-size:1.18rem;max-width:34ch;}
.hub-wrap{align-items:stretch;}
.hub{container-type:inline-size;width:100%;max-width:620px;margin-inline:auto;aspect-ratio:600 / 540;}
.hub-in{position:relative;width:100%;height:100%;font-size:10px;font-size:calc(100cqw / 60);}
.hub-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.hub-spoke{fill:none;stroke:rgba(139,120,246,0.75);stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-linecap:round;}
.hub-spoke.is-best{stroke:#26E6C8;stroke-width:3.4;filter:drop-shadow(0 0 6px rgba(38,230,200,0.55));}
.hub-card{position:absolute;transform:translate(-50%,-50%);width:13.4em;height:6.5em;border-radius:1.2em;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.25em;background:var(--surface);color:var(--pearl);border:1px solid var(--line-strong);box-shadow:0 0.6em 2em rgba(0,0,0,0.18);}
.hc-n{font:600 1.25em 'Sora',sans-serif;color:var(--muted);}
.hc-p{font:700 2.1em 'Roboto Mono',monospace;line-height:1;font-variant-numeric:tabular-nums;}
.hub-card.is-best{background:#26E6C8;color:#071827;border-color:#26E6C8;box-shadow:0 0 0 0.6em rgba(38,230,200,0.18),0 0 3em rgba(38,230,200,0.45);z-index:2;}
.hub-card.is-best .hc-n{color:#07382F;}
.hub-card.is-more{background:var(--navy-deep);border:1px dashed var(--line-strong);box-shadow:none;}
.hub-card.is-more .hc-p{font-size:1.9em;color:var(--muted);}
.hub-core{position:absolute;transform:translate(-50%,-50%);width:26.6em;height:26.6em;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2em;z-index:3;
  background:radial-gradient(circle at 50% 38%,rgba(38,230,200,0.28),rgba(38,230,200,0.08) 62%,rgba(7,24,39,0.9) 100%),#08202D;border:0.22em solid rgba(38,230,200,0.7);box-shadow:0 0 5em rgba(38,230,200,0.3),inset 0 0 3em rgba(38,230,200,0.12);}
.hub-oct{width:8em;height:8em;filter:drop-shadow(0 0 1em rgba(38,230,200,0.5));}
.hub-bet{font:600 1.15em 'Roboto Mono',monospace;letter-spacing:0.14em;text-transform:uppercase;color:#B8CBD8;}
.hub-cap{margin:6px 0 0;text-align:center;font:0.74rem 'Roboto Mono',monospace;color:var(--muted);}
@media (prefers-reduced-motion:no-preference){
  .hub-spoke{stroke-dasharray:100;stroke-dashoffset:100;animation:hubDraw 1.6s cubic-bezier(.16,1,.3,1) 1.1s forwards;animation-play-state:paused;}
  html.hero-play .hub-spoke{animation-play-state:running;}
  @keyframes hubDraw{to{stroke-dashoffset:0;}}
  .hub-card.is-best{animation:hubPulse 3.2s ease-in-out 3s infinite;}
  @keyframes hubPulse{0%,100%{box-shadow:0 0 0 0.6em rgba(38,230,200,0.18),0 0 3em rgba(38,230,200,0.45);}50%{box-shadow:0 0 0 1em rgba(38,230,200,0.08),0 0 4em rgba(38,230,200,0.6);}}
}
@media (min-width:641px){ .nav-icon-btn.nav-signin{width:auto;padding:0 18px;} .nav-signin svg{display:none;} }
@media (max-width:640px){ .nav-signin-txt{display:none;} }
@media (max-width:900px){
  .hero-split{grid-template-columns:1fr;gap:28px;}
  .hero-split .hero-mark{order:0;}
}

/* ---------- Homepage: "With you for the whole life of a bet" line story (Oct 2026) ----------
   One sample bet drawn as a week-long price line with four moments hung on it. The panel is a
   fixed dark surface in both themes. On desktop the three chart cards sit on the line (the stage
   scales as one piece via container-query units); on small screens the cards stack under a
   short decorative line. Everything is demonstration data. */
.story-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:28px;}
.story-kicker{display:block;font:700 0.82rem 'Roboto Mono',monospace;letter-spacing:0.14em;text-transform:uppercase;color:var(--violet-ink);margin-bottom:10px;}
.story-head h2{font-size:clamp(1.9rem,4.4vw,3.1rem);line-height:1.06;margin:0 0 12px;text-wrap:balance;}
.story-head p{margin:0;color:var(--muted);font-size:1.05rem;}
.story-head{position:relative;}
.story-head-r{display:flex;align-items:center;gap:14px;}
@media (min-width:1100px){ .story-head-r{position:absolute;right:0;bottom:6px;} }
.story-head-r b{font:700 1.2rem 'Sora',sans-serif;color:var(--pearl);}
.story-panel{container-type:inline-size;border-radius:28px;border:1px solid rgba(255,255,255,0.1);background:radial-gradient(60% 70% at 85% 10%,rgba(139,92,246,0.16),transparent 70%),radial-gradient(50% 60% at 10% 90%,rgba(38,230,200,0.08),transparent 70%),#07172A;box-shadow:0 18px 50px rgba(0,0,0,0.2);color:#F4F7FB;overflow:hidden;}
.story-stage{position:relative;aspect-ratio:1225 / 450;font-size:10px;font-size:calc(100cqw / 122.5);}
.story-svg{position:absolute;inset:0;width:100%;height:100%;}
.story-fair{stroke:rgba(38,230,200,0.6);stroke-width:2;stroke-dasharray:7 7;}
.story-fair-lbl{font:600 11px 'Roboto Mono',monospace;letter-spacing:0.08em;fill:#26E6C8;}
.story-axis text{font:500 11px 'Roboto Mono',monospace;letter-spacing:0.12em;fill:#7C93A6;}
.story-path{filter:drop-shadow(0 0 6px rgba(111,143,240,0.45));}
.story-card{position:absolute;width:26em;background:#0E2640;border:1px solid rgba(255,255,255,0.12);border-radius:1.4em;padding:1.5em 1.7em;box-shadow:0 1.2em 3em rgba(0,0,0,0.35);}
.sc-1{left:2.5em;top:4.2em;}
.sc-2{left:42.9em;top:23em;}
.sc-3{left:92.6em;top:10.6em;}
.story-card.is-roadmap{border-style:dashed;border-color:rgba(139,92,246,0.7);background:#102244;}
.sc-top{display:flex;align-items:center;gap:0.9em;margin-bottom:0.9em;}
.sc-n{flex:none;display:inline-grid;place-items:center;width:2.4em;height:2.4em;border-radius:50%;font:700 0.95em 'Roboto Mono',monospace;color:#071827;background:#26E6C8;}
.sc-n.is-violet{background:#8B5CF6;color:#fff;}
.sc-n.is-hollow{background:transparent;color:#C9B8FB;border:0.16em dashed #8B5CF6;}
.sc-eye{font:600 0.95em 'Roboto Mono',monospace;letter-spacing:0.14em;text-transform:uppercase;color:#26E6C8;}
.sc-eye.is-violet{color:#B79BFB;}
.story-card h3{font:700 1.7em 'Sora',sans-serif;line-height:1.15;margin:0 0 0.4em;color:#fff;}
.story-card p{margin:0;font-size:1.2em;line-height:1.4;color:#A9BCCB;}
.story-card p.mono{font-family:'Roboto Mono',monospace;color:#F4F7FB;font-weight:600;}
.story-card .is-teal,.story-panel .is-teal{color:#26E6C8;}
.story-card .sc-n.is-teal{color:#071827;}
.story-foot{display:grid;grid-template-columns:1.45fr 1fr;gap:16px;margin-top:18px;}
.story-sync,.story-cta{border-radius:20px;padding:18px 22px;display:flex;align-items:center;gap:18px;}
.story-sync{background:#0C2038;border:1px solid rgba(139,92,246,0.35);color:#F4F7FB;flex-wrap:wrap;}
.story-sync .sc-n{width:38px;height:38px;font-size:0.95rem;}
.story-sync-copy{flex:1 1 200px;min-width:0;}
.story-sync-copy .sc-eye{font-size:0.62rem;display:block;margin-bottom:4px;}
.story-sync h3{margin:0;font:700 1.05rem 'Sora',sans-serif;line-height:1.25;color:#fff;}
.story-books{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap;}
.story-books li{display:inline-flex;align-items:center;gap:6px;font:600 0.78rem 'Roboto Mono',monospace;color:#E4ECF3;border:1px solid rgba(255,255,255,0.22);border-radius:999px;padding:7px 14px;}
.story-books li.is-active{background:#26E6C8;color:#071827;border-color:#26E6C8;}
.story-books svg{width:12px;height:12px;}
.story-cta{background:linear-gradient(135deg,rgba(38,230,200,0.12),rgba(38,230,200,0.04));border:1px solid rgba(38,230,200,0.35);justify-content:space-between;color:#F4F7FB;flex-wrap:wrap;}
.story-cta p{margin:0;font-size:0.98rem;color:#C5D3DF;}
.story-cta strong{font-weight:500;}
@media (prefers-reduced-motion:no-preference){
  .story-path{stroke-dasharray:100;stroke-dashoffset:100;}
  .story-area,.story-dot,.story-card{opacity:0;transition:opacity .8s ease;}
  .story-panel.is-visible .story-path{stroke-dashoffset:0;transition:stroke-dashoffset 2.6s cubic-bezier(.4,0,.2,1) .2s;}
  .story-panel.is-visible .story-area{opacity:1;transition-delay:1.2s;}
  .story-panel.is-visible .story-dot{opacity:1;transition-delay:1s;}
  .story-panel.is-visible .sc-1{opacity:1;transition-delay:.5s;}
  .story-panel.is-visible .sc-2{opacity:1;transition-delay:1.3s;}
  .story-panel.is-visible .sc-3{opacity:1;transition-delay:2.1s;}
  html:not(.js-reveal) .story-path{stroke-dashoffset:0;}
  html:not(.js-reveal) .story-area,html:not(.js-reveal) .story-dot,html:not(.js-reveal) .story-card{opacity:1;}
}
@media (max-width:900px){
  .story-foot{grid-template-columns:1fr;}
}
@media (max-width:820px){
  .story-stage{aspect-ratio:auto;font-size:1rem;display:flex;flex-direction:column;gap:14px;padding:16px;}
  .story-svg{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1225 / 400;order:-1;}
  .story-axis,.story-fair-lbl{display:none;}
  .story-card{position:static;width:auto;padding:16px 18px;border-radius:16px;}
  .story-card h3{font-size:1.15rem;}
  .story-card p{font-size:0.94rem;}
  .sc-n{width:2.1em;height:2.1em;font-size:0.85rem;}
  .sc-eye{font-size:0.7rem;}
}

/* "Coming soon" labels (features not in the app yet) */
.soon-pill{display:inline-block;margin-left:auto;padding:0.25em 0.7em;border-radius:999px;border:1px dashed rgba(183,155,251,0.75);color:#C9B8FB;font:600 0.7em 'Roboto Mono',monospace;letter-spacing:0.12em;text-transform:uppercase;white-space:nowrap;}
.cmp-soon{display:inline-block;padding:3px 10px;border-radius:999px;border:1px dashed rgba(183,155,251,0.75);color:#C9B8FB;font:600 0.72rem 'Roboto Mono',monospace;letter-spacing:0.1em;text-transform:uppercase;white-space:nowrap;}
.cmp-soon-tag{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;border:1px dashed rgba(183,155,251,0.75);color:#C9B8FB;font:600 0.68rem 'Roboto Mono',monospace;letter-spacing:0.1em;text-transform:uppercase;vertical-align:middle;white-space:nowrap;}
@media (max-width:640px){.cmp-soon{padding:2px 6px;font-size:0.62rem;letter-spacing:0.04em;}.cmp-soon-tag{display:block;margin:4px 0 0;width:max-content;}}

/* Bet-builder board + slip: dark treatment in dark mode */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tb-board{background:#0B1D2E;color:#F4F7FB;border-color:rgba(255,255,255,0.1);box-shadow:0 18px 50px rgba(0,0,0,0.45);}
  :root:not([data-theme="light"]) .tb-hd,:root:not([data-theme="light"]) .tb-time span,:root:not([data-theme="light"]) .tb-s2,:root:not([data-theme="light"]) .tb-mk{color:#8FB0BF;}
  :root:not([data-theme="light"]) .tb-game{border-top-color:rgba(255,255,255,0.09);}
  :root:not([data-theme="light"]) .tb-cell{background:#112B40;color:#F4F7FB;border-color:rgba(255,255,255,0.13);}
  :root:not([data-theme="light"]) .tb-cell:hover{border-color:rgba(38,230,200,0.7);box-shadow:0 3px 14px rgba(0,0,0,0.35);}
  :root:not([data-theme="light"]) .tb-over{color:#26E6C8;} .tb-under{color:#B79BFB;}
  :root:not([data-theme="light"]) .tb-bar{background:rgba(255,255,255,0.14);}
  :root:not([data-theme="light"]) .tb-ou{border:1px solid rgba(255,255,255,0.22);box-shadow:0 0 0 3px #0B1D2E;}
  :root:not([data-theme="light"]) .tb-cell[aria-pressed="true"],:root:not([data-theme="light"]) .tb-cell[aria-pressed="true"] .tb-main,:root:not([data-theme="light"]) .tb-cell[aria-pressed="true"] .tb-over,:root:not([data-theme="light"]) .tb-cell[aria-pressed="true"] .tb-under,:root:not([data-theme="light"]) .tb-cell[aria-pressed="true"] .tb-s2,:root:not([data-theme="light"]) .tb-cell[aria-pressed="true"] .tb-ol,:root:not([data-theme="light"]) .tb-cell[aria-pressed="true"] .tb-mk{color:#071827;}
  :root:not([data-theme="light"]) .tb-cell[aria-pressed="true"]{border-color:#26E6C8;}
  :root:not([data-theme="light"]) .tb-cell[aria-pressed="true"]::after{box-shadow:0 0 0 2px #0B1D2E;}
  :root:not([data-theme="light"]) .tb-slip{--si:#F4F7FB;background:#0B1D2E;box-shadow:0 18px 50px rgba(0,0,0,0.45);}
  :root:not([data-theme="light"]) .tb-slip h3{color:#071827;}
  :root:not([data-theme="light"]) .tb-clear{background:#112B40;color:#E4D9FF;border-color:#8B5CF6;}
  :root:not([data-theme="light"]) .tb-tab{background:#112B40;color:#F4F7FB;border-color:rgba(255,255,255,0.16);}
  :root:not([data-theme="light"]) .tb-tab[aria-pressed="true"]{background:#7C3AED;border-color:#7C3AED;color:#fff;}
  :root:not([data-theme="light"]) .tb-count{background:rgba(255,255,255,0.14);}
  :root:not([data-theme="light"]) .tb-leg{background:#112B40;border-color:rgba(255,255,255,0.12);}
  :root:not([data-theme="light"]) .tb-leg-t,:root:not([data-theme="light"]) .tb-odds{color:#F4F7FB;}
  :root:not([data-theme="light"]) .tb-leg-m,:root:not([data-theme="light"]) .tb-leg-w,:root:not([data-theme="light"]) .tb-odds small,:root:not([data-theme="light"]) .tb-empty,:root:not([data-theme="light"]) .tb-group small,:root:not([data-theme="light"]) .tb-venues .tb-vr,:root:not([data-theme="light"]) .tb-venues .tb-vd{color:#8FB0BF;}
  :root:not([data-theme="light"]) .tb-x{background:#112B40;color:#E4D9FF;border-color:#8B5CF6;}
  :root:not([data-theme="light"]) .tb-empty{border-color:rgba(255,255,255,0.22);}
  :root:not([data-theme="light"]) .tb-venues li{border-top-color:rgba(255,255,255,0.1);}
  :root:not([data-theme="light"]) .tb-flag{background:#26E6C8;color:#071827;}
  :root:not([data-theme="light"]) .tb-group{color:#F4F7FB;border-color:#8B5CF6;}
  :root:not([data-theme="light"]) .tb-demo-msg{color:#E4D9FF;background:rgba(139,92,246,0.18);}
  :root:not([data-theme="light"]) .tb-btn-violet{background:#8B5CF6;}
}
:root[data-theme="dark"] .tb-board{background:#0B1D2E;color:#F4F7FB;border-color:rgba(255,255,255,0.1);box-shadow:0 18px 50px rgba(0,0,0,0.45);}
:root[data-theme="dark"] .tb-hd,:root[data-theme="dark"] .tb-time span,:root[data-theme="dark"] .tb-s2,:root[data-theme="dark"] .tb-mk{color:#8FB0BF;}
:root[data-theme="dark"] .tb-game{border-top-color:rgba(255,255,255,0.09);}
:root[data-theme="dark"] .tb-cell{background:#112B40;color:#F4F7FB;border-color:rgba(255,255,255,0.13);}
:root[data-theme="dark"] .tb-cell:hover{border-color:rgba(38,230,200,0.7);box-shadow:0 3px 14px rgba(0,0,0,0.35);}
:root[data-theme="dark"] .tb-over{color:#26E6C8;} .tb-under{color:#B79BFB;}
:root[data-theme="dark"] .tb-bar{background:rgba(255,255,255,0.14);}
:root[data-theme="dark"] .tb-ou{border:1px solid rgba(255,255,255,0.22);box-shadow:0 0 0 3px #0B1D2E;}
:root[data-theme="dark"] .tb-cell[aria-pressed="true"],:root[data-theme="dark"] .tb-cell[aria-pressed="true"] .tb-main,:root[data-theme="dark"] .tb-cell[aria-pressed="true"] .tb-over,:root[data-theme="dark"] .tb-cell[aria-pressed="true"] .tb-under,:root[data-theme="dark"] .tb-cell[aria-pressed="true"] .tb-s2,:root[data-theme="dark"] .tb-cell[aria-pressed="true"] .tb-ol,:root[data-theme="dark"] .tb-cell[aria-pressed="true"] .tb-mk{color:#071827;}
:root[data-theme="dark"] .tb-cell[aria-pressed="true"]{border-color:#26E6C8;}
:root[data-theme="dark"] .tb-cell[aria-pressed="true"]::after{box-shadow:0 0 0 2px #0B1D2E;}
:root[data-theme="dark"] .tb-slip{--si:#F4F7FB;background:#0B1D2E;box-shadow:0 18px 50px rgba(0,0,0,0.45);}
:root[data-theme="dark"] .tb-slip h3{color:#071827;}
:root[data-theme="dark"] .tb-clear{background:#112B40;color:#E4D9FF;border-color:#8B5CF6;}
:root[data-theme="dark"] .tb-tab{background:#112B40;color:#F4F7FB;border-color:rgba(255,255,255,0.16);}
:root[data-theme="dark"] .tb-tab[aria-pressed="true"]{background:#7C3AED;border-color:#7C3AED;color:#fff;}
:root[data-theme="dark"] .tb-count{background:rgba(255,255,255,0.14);}
:root[data-theme="dark"] .tb-leg{background:#112B40;border-color:rgba(255,255,255,0.12);}
:root[data-theme="dark"] .tb-leg-t,:root[data-theme="dark"] .tb-odds{color:#F4F7FB;}
:root[data-theme="dark"] .tb-leg-m,:root[data-theme="dark"] .tb-leg-w,:root[data-theme="dark"] .tb-odds small,:root[data-theme="dark"] .tb-empty,:root[data-theme="dark"] .tb-group small,:root[data-theme="dark"] .tb-venues .tb-vr,:root[data-theme="dark"] .tb-venues .tb-vd{color:#8FB0BF;}
:root[data-theme="dark"] .tb-x{background:#112B40;color:#E4D9FF;border-color:#8B5CF6;}
:root[data-theme="dark"] .tb-empty{border-color:rgba(255,255,255,0.22);}
:root[data-theme="dark"] .tb-venues li{border-top-color:rgba(255,255,255,0.1);}
:root[data-theme="dark"] .tb-flag{background:#26E6C8;color:#071827;}
:root[data-theme="dark"] .tb-group{color:#F4F7FB;border-color:#8B5CF6;}
:root[data-theme="dark"] .tb-demo-msg{color:#E4D9FF;background:rgba(139,92,246,0.18);}
:root[data-theme="dark"] .tb-btn-violet{background:#8B5CF6;}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tb-cell[aria-pressed="true"]{background:linear-gradient(135deg,#26E6C8 0%,#7FA6F5 100%);box-shadow:0 6px 18px rgba(38,230,200,0.3);}
  :root:not([data-theme="light"]) .tb-cell[aria-pressed="true"] .tb-bar{background:rgba(7,24,39,0.25);}
  :root:not([data-theme="light"]) .tb-cell[aria-pressed="true"] .tb-bar i{background:#071827;}
}
:root[data-theme="dark"] .tb-cell[aria-pressed="true"]{background:linear-gradient(135deg,#26E6C8 0%,#7FA6F5 100%);box-shadow:0 6px 18px rgba(38,230,200,0.3);}
:root[data-theme="dark"] .tb-cell[aria-pressed="true"] .tb-bar{background:rgba(7,24,39,0.25);}
:root[data-theme="dark"] .tb-cell[aria-pressed="true"] .tb-bar i{background:#071827;}