/* ============================================================
   The Cut — marketing site
   One stylesheet, five pages, no build step.

   Josh, 20 Aug: the site moved from one 18,400px page to a teaser
   homepage plus four inner pages. Five copies of an inline <style>
   block would have drifted apart inside a week, so it lives here.
   Nothing else about the workflow changed — edit the CSS, reload.
   ============================================================ */

/* ============ The Cut brand system — mirrored from the app ============ */
    :root {
      --board: #123B26;        /* evergreen scoreboard */
      --board-deep: #0C2A1B;
      --board-black: #071711;  /* near-black green for the darkest bands */
      --letter: #F3C64B;       /* scoreboard gold */
      --cream: #F7F3E3;        /* paper cards */
      --paper: #FFFFFF;
      --ink: #14201A;
      --ink-soft: #4B5A52;
      --line: #DCE3DE;
      --cut: #C8102E;          /* the cut line */
      --radius: 12px;
      --display: 'Oswald', 'Arial Narrow', sans-serif;
      --body: 'Inter', system-ui, -apple-system, sans-serif;
      --mono: 'IBM Plex Mono', ui-monospace, monospace;
    }
    * { box-sizing: border-box; margin: 0; }
    html { scroll-padding-top: 76px; }
    @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
    body { font-family: var(--body); color: var(--ink); background: #F4F6F4; line-height: 1.6; -webkit-font-smoothing: antialiased; }
    img, svg { vertical-align: middle; }
    a { color: inherit; }
    .container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
    .display { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.03em; }
    .ic { width: 20px; height: 20px; flex-shrink: 0; }
    .skip { position: absolute; left: -9999px; top: 0; background: var(--letter); color: var(--board); padding: 10px 16px; z-index: 200; font-weight: 700; }
    .skip:focus { left: 12px; top: 12px; }

    .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 26px; border-radius: 10px; font-weight: 700; text-decoration: none; font-size: 1rem; border: 2px solid transparent; transition: transform .06s ease, background .15s ease, box-shadow .15s ease; }
    .btn:active { transform: translateY(1px); }
    .btn:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--letter); outline-offset: 2px; }
    .btn-cut { background: linear-gradient(180deg, #DA2240, var(--cut)); color: #fff; box-shadow: 0 4px 14px rgba(200,16,46,0.35); }
    .btn-cut:hover { box-shadow: 0 6px 20px rgba(200,16,46,0.45); }
    .btn-gold { background: var(--letter); color: var(--board-deep); box-shadow: 0 4px 14px rgba(243,198,75,0.3); }
    .btn-ghost { border-color: rgba(243,198,75,0.85); color: var(--letter); background: transparent; }
    .btn-ghost:hover { background: rgba(243,198,75,0.1); }
    .btn-ghost-ink { border-color: var(--board); color: var(--board); background: transparent; }
    .btn-ghost-ink:hover { background: rgba(18,59,38,0.06); }

    /* ---------- sticky nav ---------- */
    .nav { position: sticky; top: 0; z-index: 100; background: rgba(12,42,27,0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 2px solid rgba(243,198,75,0.5); transition: background .2s ease; }
    .nav.scrolled { background: rgba(9,30,20,0.96); box-shadow: 0 4px 18px rgba(0,0,0,0.25); }
    .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 20px; max-width: 1120px; margin: 0 auto; transition: padding .2s ease; }
    .nav.scrolled .nav-inner { padding-top: 9px; padding-bottom: 9px; }
    .brand { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 1.3rem; color: var(--letter); text-decoration: none; white-space: nowrap; }
    .brand small { color: #fff; font-weight: 400; font-size: 0.82rem; }
    .nav-links { display: flex; gap: 22px; align-items: center; }
    .nav-links a { color: rgba(255,255,255,0.9); text-decoration: none; font-size: 0.92rem; font-weight: 600; }
    .nav-links a:hover { color: var(--letter); }
    .nav-cta { display: flex; gap: 10px; align-items: center; }
    .nav-cta .signin { color: #fff; text-decoration: none; font-size: 0.9rem; font-weight: 600; border: 1.5px solid rgba(255,255,255,0.55); padding: 9px 16px; border-radius: 8px; white-space: nowrap; }
    .nav-cta .signin:hover { background: rgba(255,255,255,0.1); }
    .nav-cta .start { background: var(--letter); color: var(--board-deep); font-weight: 700; text-decoration: none; padding: 10px 18px; border-radius: 8px; font-size: 0.9rem; white-space: nowrap; }
    @media (max-width: 860px) { .nav-links { display: none; } }
    @media (max-width: 430px) { .nav-cta .signin { display: none; } }

    /* ---------- hero ---------- */
    .hero { background: radial-gradient(120% 150% at 100% 0%, rgba(243,198,75,0.13) 0%, rgba(243,198,75,0) 46%), linear-gradient(163deg, #1A4A31 0%, var(--board) 48%, var(--board-deep) 100%); color: #fff; padding: 68px 0 84px; overflow: hidden; }
    .hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 44px; align-items: center; }
    .hero-badge { display: inline-flex; align-items: center; gap: 9px; background: rgba(243,198,75,0.14); border: 1px solid rgba(243,198,75,0.4); color: var(--letter); font-family: var(--display); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; padding: 7px 14px; border-radius: 999px; margin-bottom: 22px; }
    .hero h1 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(2.7rem, 6.4vw, 4.6rem); line-height: 0.98; color: var(--letter); letter-spacing: 0.015em; }
    .hero h1 .white { color: #fff; }
    .hero .tagline { max-width: 540px; margin: 22px 0 28px; font-size: 1.14rem; color: rgba(255,255,255,0.9); line-height: 1.65; }
    .hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; }
    .hero .fineprint { margin-top: 18px; font-size: 0.85rem; color: rgba(255,255,255,0.72); max-width: 480px; }
    .hero-cutline { border: none; border-top: 3px dashed rgba(200,16,46,0.9); width: 120px; margin: 24px 0 0; position: relative; }
    .hero-cutline::after { content: 'THE CUT'; position: absolute; left: 128px; top: -10px; font-family: var(--display); font-size: 0.6rem; letter-spacing: 0.2em; background: var(--cut); color: #fff; padding: 2px 8px; border-radius: 3px; }

    /* ---------- phone mockups (pure CSS) ---------- */
    .phone-wrap { position: relative; display: flex; justify-content: center; }
    .phone { width: 296px; background: #0B0D0C; border-radius: 44px; padding: 10px; box-shadow: 0 30px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.12); position: relative; }
    .phone .screen { border-radius: 35px; overflow: hidden; background: #EEF3EE; display: flex; flex-direction: column; position: relative; min-height: 560px; }
    .phone .island { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 84px; height: 22px; background: #0B0D0C; border-radius: 999px; z-index: 6; }
    .appbar { background: var(--board); border-bottom: 2px solid rgba(243,198,75,0.55); padding: 46px 16px 9px; display: flex; align-items: center; justify-content: space-between; }
    .appbar .wm { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.86rem; color: var(--letter); }
    .appbar .wm small { color: #fff; font-weight: 400; font-size: 0.66rem; }
    .appbar .ic { width: 15px; height: 15px; color: rgba(255,255,255,0.85); }
    .pbody { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
    .tabbar { background: var(--board-deep); border-top: 2px solid rgba(243,198,75,0.55); display: flex; padding: 7px 6px 14px; gap: 2px; }
    .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 2px; border-radius: 9px; color: rgba(255,255,255,0.72); text-decoration: none; font-family: var(--display); text-transform: uppercase; font-size: 0.44rem; letter-spacing: 0.05em; pointer-events: none; }
    .tabbar a .ic { width: 15px; height: 15px; }
    .tabbar a.on { background: var(--letter); color: var(--board); font-weight: 700; }
    /* in-phone board */
    .pboard { background: linear-gradient(180deg, var(--board), var(--board-deep)); border-radius: 11px; overflow: hidden; color: #fff; box-shadow: 0 5px 14px rgba(12,42,27,0.3); }
    .pboard .live { display: inline-flex; align-items: center; gap: 5px; margin: 9px 11px 4px; font-family: var(--display); text-transform: uppercase; font-size: 0.5rem; letter-spacing: 0.16em; color: var(--cut); font-weight: 700; }
    .pboard .live { color: #FF8095; }
    .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cut); }
    @media (prefers-reduced-motion: no-preference) { .live-dot { animation: pulse 1.6s infinite; } }
    @keyframes pulse { 50% { opacity: 0.35; } }
    .prow { display: grid; grid-template-columns: 22px 1fr 34px 30px; gap: 4px; align-items: center; padding: 7px 11px; border-top: 1px solid rgba(255,255,255,0.09); font-size: 0.66rem; }
    .prow.head { font-family: var(--display); text-transform: uppercase; font-size: 0.5rem; letter-spacing: 0.13em; color: var(--letter); background: var(--board-deep); border-top: none; padding: 7px 11px 6px; }
    .prow.lead { background: rgba(243,198,75,0.14); box-shadow: inset 3px 0 0 var(--letter); }
    .prow .pos { font-family: var(--display); font-size: 0.78rem; color: var(--letter); }
    .prow .nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .prow .num { font-family: var(--mono); font-weight: 600; text-align: center; }
    .prow .thru { font-size: 0.58rem; color: rgba(255,255,255,0.7); text-align: center; font-family: var(--mono); }
    .under { color: #FF8095; }
    .pcut { border: none; border-top: 2px dashed rgba(200,16,46,0.85); margin: 1px 10px; position: relative; overflow: visible; }
    .pcut::after { content: 'THE CUT'; position: absolute; right: 0; top: -6px; font-family: var(--display); font-size: 0.38rem; letter-spacing: 0.18em; background: var(--cut); color: #fff; padding: 1px 5px; border-radius: 2px; }
    .pev { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.56rem; color: var(--ink-soft); text-align: center; padding-top: 2px; }
    /* in-phone scoring screen */
    .hole-head { text-align: center; padding: 4px 0 2px; }
    .hole-head .hl { font-family: var(--display); font-size: 0.5rem; letter-spacing: 0.3em; color: var(--ink-soft); text-transform: uppercase; }
    .hole-head .hn { font-family: var(--display); font-weight: 700; font-size: 2.5rem; line-height: 1; color: var(--board); }
    .hole-head .hp { font-family: var(--mono); font-weight: 600; font-size: 0.54rem; letter-spacing: 0.08em; color: var(--ink-soft); }
    .scorecard-card { background: #fff; border: 1.5px solid var(--line); border-radius: 11px; padding: 9px 10px; }
    .srow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 2px; border-top: 1px solid #EDF1ED; }
    .srow:first-child { border-top: none; }
    .srow .who { display: flex; align-items: center; gap: 7px; font-size: 0.72rem; font-weight: 600; }
    .avat { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(160deg, #1A4A31, var(--board-deep)); color: var(--letter); font-family: var(--display); font-size: 0.52rem; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(243,198,75,0.4); }
    .sc { width: 26px; height: 26px; border-radius: 7px; background: var(--board); color: #fff; font-family: var(--mono); font-weight: 600; font-size: 0.78rem; display: flex; align-items: center; justify-content: center; }
    .sc.birdie { background: #fff; color: var(--cut); border: 2px solid var(--cut); border-radius: 50%; }
    .sc.bogey { background: #fff; color: var(--board); border: 2px solid var(--board); }
    .stacks-label { font-family: var(--display); text-transform: uppercase; font-size: 0.5rem; letter-spacing: 0.2em; color: var(--ink-soft); margin: 2px 2px 0; }
    .stacks { display: flex; flex-wrap: wrap; gap: 5px; }
    .stack-pill { display: inline-flex; align-items: center; gap: 5px; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 4px 9px; font-family: var(--mono); font-size: 0.56rem; font-weight: 600; color: var(--board); }
    .stack-pill.hot { border-color: var(--cut); color: var(--cut); }
    .stack-pill.gold { background: rgba(243,198,75,0.2); border-color: #D9B23F; color: #6b5412; }
    .save-btn { margin-top: auto; background: linear-gradient(180deg, #1A4A31, var(--board)); color: var(--letter); border-radius: 10px; text-align: center; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.7rem; padding: 11px; box-shadow: 0 3px 10px rgba(18,59,38,0.3); }
    /* in-phone feed */
    .fcard { background: #fff; border: 1.5px solid var(--line); border-radius: 11px; padding: 9px 10px; }
    .fhead { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
    .fhead .who { font-size: 0.66rem; font-weight: 700; color: var(--board); text-transform: uppercase; letter-spacing: 0.04em; }
    .fhead .when { font-size: 0.56rem; color: var(--ink-soft); margin-left: auto; font-family: var(--mono); }
    .fcard p { font-size: 0.64rem; color: var(--ink-soft); line-height: 1.45; }
    .fstat { display: flex; gap: 5px; margin-top: 6px; }
    .fstat span { font-family: var(--mono); font-size: 0.54rem; font-weight: 600; background: #EEF3EE; border-radius: 6px; padding: 3px 7px; color: var(--board); }
    .fswing { margin-top: 6px; border-radius: 8px; background: linear-gradient(160deg, #22352B, #0C1A12); height: 84px; display: flex; align-items: center; justify-content: center; color: var(--letter); position: relative; }
    .fswing .ic { width: 26px; height: 26px; }
    .fswing em { position: absolute; left: 8px; bottom: 6px; font-style: normal; font-family: var(--mono); font-size: 0.5rem; color: rgba(255,255,255,0.75); }
    .freact { display: flex; gap: 10px; margin-top: 6px; font-family: var(--mono); font-size: 0.56rem; color: var(--ink-soft); }
    /* floating chips beside hero phone */
    .float-chip { position: absolute; background: #fff; border-radius: 11px; box-shadow: 0 12px 30px rgba(12,42,27,0.35); padding: 9px 13px; font-family: var(--mono); font-size: 0.66rem; font-weight: 600; color: var(--board); display: flex; align-items: center; gap: 7px; z-index: 5; }
    .float-chip .ic { width: 15px; height: 15px; color: var(--cut); }
    .fc-1 { top: 88px; left: -8px; }
    .fc-2 { bottom: 120px; right: -14px; }
    @media (max-width: 1150px) { .fc-1 { left: 6px; } .fc-2 { right: 0; } }

    /* ---------- sections ---------- */
    section.pad { padding: 84px 0 0; }
    .sec-head { max-width: 680px; margin: 0 auto 36px; text-align: center; }
    .sec-head.left { text-align: left; margin-left: 0; }
    .eyebrow { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.72rem; color: var(--cut); margin-bottom: 10px; font-weight: 600; }
    .on-dark .eyebrow { color: var(--letter); }
    .sec-head h2 { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.8rem, 4.4vw, 2.7rem); color: var(--board); line-height: 1.06; }
    .on-dark .sec-head h2, .on-dark h2 { color: #fff; }
    .sec-head p { color: var(--ink-soft); margin-top: 12px; font-size: 1.03rem; }
    .on-dark .sec-head p { color: rgba(255,255,255,0.82); }

    /* orb — the app's page-head badge */
    .orb { width: 62px; height: 62px; border-radius: 50%; background: linear-gradient(160deg, #1A4A31, var(--board-deep)); color: var(--letter); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 2px rgba(243,198,75,0.45), 0 6px 16px rgba(18,59,38,0.3); margin: 0 auto 16px; }
    .orb .ic { width: 28px; height: 28px; }
    .sec-head.left .orb { margin-left: 0; }

    /* steps */
    .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .step { background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 26px 24px; }
    .step-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
    .step-num { width: 42px; height: 42px; border-radius: 12px; background: var(--board); color: var(--letter); font-family: var(--display); font-size: 1.3rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .step .ic { width: 22px; height: 22px; color: var(--board); }
    .step h3 { font-family: var(--display); text-transform: uppercase; font-size: 1.12rem; color: var(--board); margin-bottom: 6px; }
    .step p { color: var(--ink-soft); font-size: 0.95rem; }

    /* formats wall */
    .formats-band { background: var(--cream); border-top: 1.5px solid #E8E1C8; border-bottom: 1.5px solid #E8E1C8; margin-top: 84px; padding: 72px 0 76px; }
    .format-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 860px; margin: 0 auto; }
    .format-chips span { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid #D8D0B4; border-radius: 999px; padding: 10px 18px; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; font-size: 0.88rem; color: var(--board); background: #fff; }
    .format-chips .ic { width: 16px; height: 16px; color: var(--cut); }
    .side-note { text-align: center; margin: 26px auto 0; max-width: 620px; color: var(--ink-soft); font-size: 0.97rem; }
    .side-note strong { color: var(--ink); }
    .free-tag { display: inline-flex; align-items: center; gap: 8px; margin: 22px auto 0; background: var(--board); color: var(--letter); font-family: var(--display); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.74rem; padding: 8px 18px; border-radius: 999px; }

    /* dark showcase band */
    .show-band { background: linear-gradient(170deg, var(--board) 0%, var(--board-deep) 70%, var(--board-black) 100%); color: #fff; margin-top: 84px; padding: 84px 0; }
    .show-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 52px; align-items: center; }
    .show-row + .show-row { margin-top: 80px; }
    .show-row .copy h3 { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--letter); line-height: 1.1; margin-bottom: 14px; }
    .show-row .copy p { color: rgba(255,255,255,0.85); margin-bottom: 16px; }
    .tick-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
    .tick-list li { display: flex; gap: 11px; align-items: flex-start; color: rgba(255,255,255,0.92); font-size: 0.97rem; line-height: 1.5; }
    .tick-list .ic { width: 18px; height: 18px; color: var(--letter); margin-top: 3px; }
    .tick-list strong { color: #fff; }
    /* the stats band sits on cream — white bold vanishes there, so the whole
       list flips to ink (the same treatment the social band already gets) */
    #stats .tick-list li { color: var(--ink); }
    #stats .tick-list li span { color: var(--ink-soft); }
    #stats .tick-list strong { color: var(--board); }
    #stats .tick-list .ic { color: var(--cut); }
    .pro-mini { display: inline-block; font-family: var(--display); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; background: var(--letter); color: var(--board-deep); padding: 2px 8px; border-radius: 4px; margin-left: 6px; vertical-align: 2px; }

    /* Cut AI band */
    /* Cut AI runs dark so the page keeps alternating, and because three phone
       screenshots look considerably better on scoreboard green than on cream. */
    .ai-band { background: linear-gradient(168deg, #1A4A31 0%, var(--board) 52%, var(--board-deep) 100%); padding: 86px 0 92px; }
    .ai-band .sec-head h2 { color: #fff; }
    .ai-band .sec-head p { color: rgba(255,255,255,0.82); }
    .ai-band .sec-head .eyebrow { color: var(--letter); }
    .ai-band .ai-row .copy h3 { color: var(--letter); }
    .ai-band .ai-row .copy p { color: rgba(255,255,255,0.84); }
    .ai-band .ai-row .copy .step { color: #F08095; }
    .ai-band .ai-more { color: rgba(255,255,255,0.8); }
    .ai-band .ai-more span { background: rgba(255,255,255,0.08); border-color: rgba(243,198,75,0.4); color: #fff; }
    .ai-band .ai-price, .ai-band .ai-also { color: rgba(255,255,255,0.82); }
    .ai-band .ai-price strong { color: var(--letter); }
    .ai-band .sec-head h2 { font-size: clamp(2.2rem, 5vw, 3.2rem); }
    .ai-band .sec-head p { font-size: 1.12rem; }
    .ai-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 8px; }
    .ai-card { background: #fff; border: 1.5px solid #E3DCC2; border-radius: 13px; padding: 18px 16px; }
    .ai-card .ic { width: 22px; height: 22px; color: var(--cut); margin-bottom: 10px; }
    .ai-card h3 { font-family: var(--display); text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.04em; color: var(--board); margin-bottom: 5px; }
    .ai-card p { font-size: 0.83rem; color: var(--ink-soft); line-height: 1.5; }
    .ai-quote { text-align: center; font-family: var(--mono); font-size: clamp(0.95rem, 2.4vw, 1.2rem); color: var(--board); background: #fff; border: 1.5px solid #E3DCC2; border-radius: 999px; display: inline-flex; align-items: center; gap: 12px; padding: 12px 24px; margin: 0 auto 30px; }
    .ai-quote .ic { color: var(--cut); }
    .ai-price { text-align: center; margin-top: 30px; color: var(--ink-soft); font-size: 0.95rem; }
    .ai-price strong { color: var(--ink); }
    .ai-also { text-align: center; margin-top: 12px; font-size: 0.88rem; color: var(--ink-soft); max-width: 560px; margin-left: auto; margin-right: auto; }
    .ai-grid.three { grid-template-columns: repeat(3, 1fr); max-width: 980px; margin-left: auto; margin-right: auto; }
    .ai-grid.three .ai-card { padding: 22px 20px; }
    .ai-grid.three .ai-card p { font-size: 0.9rem; }
    .ai-more { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin-top: 26px; color: var(--ink-soft); font-size: 0.88rem; font-weight: 600; }
    .ai-more span { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1.5px solid #E3DCC2; border-radius: 999px; padding: 7px 14px; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.74rem; color: var(--board); }
    .ai-more .ic { width: 14px; height: 14px; color: var(--cut); }

    /* voice pill in the hero phone */
    .voice-pill { display: flex; align-items: center; gap: 8px; background: linear-gradient(160deg, #1A4A31, var(--board-deep)); border: 1.5px solid rgba(243,198,75,0.5); border-radius: 999px; padding: 8px 12px; color: #fff; }
    .voice-pill .ic { width: 14px; height: 14px; color: var(--letter); }
    .vp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cut); flex-shrink: 0; }
    @media (prefers-reduced-motion: no-preference) { .vp-dot { animation: pulse 1.2s infinite; } }
    .vp-text { font-family: var(--mono); font-size: 0.6rem; color: rgba(255,255,255,0.95); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .srow.landed { background: rgba(243,198,75,0.14); box-shadow: inset 3px 0 0 var(--letter); border-radius: 6px; padding-left: 6px; padding-right: 4px; border-top-color: transparent; }
    .sc.wait { background: #fff; color: var(--ink-soft); border: 1.5px dashed var(--line); }

    /* ---------- Side Action (was "the game within the game") ---------- */
    .props-band { background: radial-gradient(110% 130% at 0% 0%, rgba(200,16,46,0.18) 0%, rgba(200,16,46,0) 48%), linear-gradient(163deg, #0E2A1E 0%, var(--board-black) 100%); color: #fff; margin-top: 84px; padding: 92px 0; border-top: 2px solid rgba(200,16,46,0.55); border-bottom: 2px solid rgba(200,16,46,0.55); }
    .props-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 52px; align-items: center; }
    .props-eyebrow { color: #FF5C71; letter-spacing: 0.26em; }
    .props-h2 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(2.4rem, 6vw, 3.8rem); line-height: 0.98; color: #fff; margin-bottom: 16px; letter-spacing: 0.015em; }
    .props-h2 em { font-style: normal; color: #FF5C71; }
    @supports (-webkit-text-stroke: 2px red) { .props-h2 em { color: transparent; -webkit-text-stroke: 2.5px #FF5C71; } }
    .props-lede { color: rgba(255,255,255,0.85); font-size: 1.05rem; margin-bottom: 20px; max-width: 480px; }
    .props-tick { color: #FF5C71 !important; }
    .props-fine { margin-top: 20px; font-size: 0.8rem; color: rgba(255,255,255,0.68); max-width: 440px; }
    .action-board { background: rgba(255,255,255,0.04); border: 1.5px solid rgba(200,16,46,0.5); border-radius: 16px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.4); }
    .ab-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: rgba(200,16,46,0.14); border-bottom: 1.5px solid rgba(200,16,46,0.45); }
    .ab-title { display: inline-flex; align-items: center; gap: 9px; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 1rem; color: #fff; }
    .ab-title .ic { width: 18px; height: 18px; color: #FF5C71; }
    .ab-live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.66rem; color: #FF5C71; }
    .ab-row { padding: 13px 18px; border-top: 1px solid rgba(255,255,255,0.08); }
    .ab-row.hot { background: rgba(200,16,46,0.1); }
    .ab-q { font-weight: 700; font-size: 0.98rem; color: #fff; margin-bottom: 7px; }
    .ab-sides { display: flex; flex-wrap: wrap; gap: 7px; }
    .ab-side { font-family: var(--mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.04em; border: 1px solid rgba(255,255,255,0.3); color: rgba(255,255,255,0.8); border-radius: 999px; padding: 4px 11px; }
    .ab-side.taken { background: var(--letter); color: var(--board-deep); border-color: var(--letter); }
    .ab-side.open { border-color: #FF5C71; color: #FF8095; }
    @media (prefers-reduced-motion: no-preference) { .ab-side.open { animation: pulse 1.6s infinite; } }
    .ab-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 18px; background: rgba(0,0,0,0.25); font-family: var(--mono); font-size: 0.7rem; color: rgba(255,255,255,0.68); }
    .ab-alert { display: inline-flex; align-items: center; gap: 6px; color: var(--letter); font-weight: 600; }
    .ab-alert .ic { width: 13px; height: 13px; }

    /* ---------- social band (warm) ---------- */
    .social-band { background: var(--cream); border-top: 1.5px solid #E8E1C8; border-bottom: 1.5px solid #E8E1C8; padding: 84px 0; }
    .social-band .show-row .copy h3 { color: var(--board); }
    .social-band .show-row .copy > p { color: var(--ink-soft); }
    .social-band .tick-list li { color: var(--ink); }
    .social-band .tick-list li span { color: var(--ink-soft); }
    .social-band .tick-list strong { color: var(--ink); }
    .social-band .tick-list .ic { color: var(--cut); }
    .social-band .pro-mini { background: var(--board); color: var(--letter); }
    .roast-card { margin: 22px 0 0; background: #fff; border: 1.5px solid #E3DCC2; border-left: 4px solid var(--cut); border-radius: 12px; padding: 16px 20px; }
    .roast-card blockquote { font-family: var(--mono); font-size: 0.95rem; color: var(--ink); margin: 0; }
    .roast-card figcaption { margin-top: 8px; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.64rem; color: var(--cut); }
    .social-link { margin-top: 18px; font-size: 0.92rem; color: var(--ink-soft); }
    .social-link a { color: var(--cut); font-weight: 700; }

    /* stats band */
    .stats-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 52px; align-items: center; }
    .rank-board { background: linear-gradient(180deg, var(--board), var(--board-deep)); border-radius: 16px; overflow: hidden; color: #fff; box-shadow: 0 18px 44px rgba(12,42,27,0.3); }
    .rank-board .rb-head { padding: 16px 18px 12px; background: var(--board-deep); display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
    .rank-board .rb-title { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.08em; color: var(--letter); font-size: 1.05rem; }
    .rank-board .rb-sub { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; color: rgba(255,255,255,0.6); text-transform: uppercase; }
    .rrow { display: grid; grid-template-columns: 40px 1fr 64px 64px 64px; gap: 6px; align-items: center; padding: 12px 18px; border-top: 1px solid rgba(255,255,255,0.09); font-size: 0.92rem; }
    .rrow.head { font-family: var(--display); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--letter); border-top: none; padding-bottom: 6px; }
    .rrow.lead { background: rgba(243,198,75,0.13); box-shadow: inset 4px 0 0 var(--letter); }
    .rrow .pos { font-family: var(--display); font-size: 1.1rem; color: var(--letter); }
    .rrow .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rrow .num { font-family: var(--mono); font-weight: 600; text-align: center; font-size: 0.85rem; }
    .filter-pills { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 18px 16px; }
    .filter-pills span { font-family: var(--mono); font-size: 0.64rem; border: 1px solid rgba(255,255,255,0.3); color: rgba(255,255,255,0.85); border-radius: 999px; padding: 4px 11px; }
    .filter-pills span.on { background: var(--letter); color: var(--board); border-color: var(--letter); font-weight: 600; }

    /* origin band */
    .origin-band { background: linear-gradient(163deg, #0E2A1E 0%, var(--board-black) 100%); color: #fff; margin-top: 84px; padding: 88px 0; border-top: 2px solid rgba(243,198,75,0.35); border-bottom: 2px solid rgba(243,198,75,0.35); }
    .origin-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 52px; align-items: center; }
    .origin-band h2 { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.8rem, 4.4vw, 2.6rem); color: #fff; line-height: 1.08; margin-bottom: 18px; }
    .origin-band h2 em { font-style: normal; color: var(--letter); }
    .origin-band p { color: rgba(255,255,255,0.85); margin-bottom: 14px; font-size: 1.02rem; }
    .origin-card { background: rgba(255,255,255,0.05); border: 1.5px solid rgba(243,198,75,0.35); border-radius: 16px; padding: 26px; }
    .origin-card .oc-ev { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.1em; color: var(--letter); font-size: 1.1rem; }
    .origin-card .oc-sub { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin: 4px 0 16px; }
    .oc-row { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.9rem; color: rgba(255,255,255,0.88); }
    .oc-row b { font-family: var(--mono); color: var(--letter); font-weight: 600; }

    /* pricing */
    .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
    .plan { border-radius: 18px; padding: 30px 26px; display: flex; flex-direction: column; border: 1.5px solid var(--line); background: #fff; }
    .plan.cream { background: var(--cream); border-color: #E4D9B8; }
    .plan.dark { background: linear-gradient(163deg, #1A4A31 0%, var(--board) 55%, var(--board-deep) 100%); border-color: transparent; color: #fff; position: relative; box-shadow: 0 18px 44px rgba(12,42,27,0.25); }
    .plan.black { background: linear-gradient(163deg, #0E2A1E 0%, var(--board-black) 100%); border-color: rgba(243,198,75,0.32); color: #fff; }
    .plan .p-eyebrow { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.66rem; color: var(--ink-soft); margin-bottom: 8px; }
    .plan.dark .p-eyebrow, .plan.black .p-eyebrow { color: var(--letter); }
    .plan h3 { font-family: var(--display); text-transform: uppercase; font-size: 1.7rem; color: var(--board); line-height: 1; }
    .plan.dark h3, .plan.black h3 { color: #fff; }
    .plan .p-price { font-family: var(--display); font-size: 1.5rem; color: var(--board); margin: 10px 0 2px; }
    .plan.dark .p-price, .plan.black .p-price { color: var(--letter); }
    .plan .p-price small { font-family: var(--body); font-size: 0.78rem; font-weight: 500; color: var(--ink-soft); letter-spacing: 0; text-transform: none; }
    .plan.dark .p-price small, .plan.black .p-price small { color: rgba(255,255,255,0.78); }
    .plan .p-lede { font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 16px; }
    .plan.dark .p-lede, .plan.black .p-lede { color: rgba(255,255,255,0.82); }
    .plan ul { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; }
    .plan li { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(20,32,26,0.08); font-size: 0.9rem; color: var(--ink); line-height: 1.45; align-items: flex-start; }
    .plan.dark li, .plan.black li { border-top-color: rgba(255,255,255,0.16); color: rgba(255,255,255,0.94); }
    .plan li::before { content: '›'; color: var(--cut); font-weight: 700; flex-shrink: 0; }
    .plan.dark li::before, .plan.black li::before { color: var(--letter); }
    .plan .btn { margin-top: auto; }
    .pop-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--letter); color: var(--board-deep); font-family: var(--display); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.64rem; padding: 5px 14px; border-radius: 999px; box-shadow: 0 4px 12px rgba(0,0,0,0.25); white-space: nowrap; }
    .plans-note { text-align: center; margin-top: 24px; color: var(--ink-soft); font-size: 0.92rem; }
    .plans-note strong { color: var(--ink); }

    /* guides */
    .guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .guide-card { background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 24px 22px; text-decoration: none; display: block; transition: transform .12s ease, box-shadow .12s ease; }
    .guide-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(18,59,38,0.12); }
    .guide-card .ic { width: 24px; height: 24px; color: var(--cut); margin-bottom: 12px; }
    .guide-card h3 { font-family: var(--display); text-transform: uppercase; font-size: 1.02rem; color: var(--board); margin-bottom: 6px; }
    .guide-card p { color: var(--ink-soft); font-size: 0.88rem; }
    .guide-card .read { display: inline-block; margin-top: 12px; font-size: 0.82rem; font-weight: 700; color: var(--cut); }

    /* FAQ */
    .faq { max-width: 760px; margin: 0 auto; }
    .faq details { background: #fff; border: 1.5px solid var(--line); border-radius: 13px; padding: 16px 20px; margin-bottom: 10px; }
    .faq summary { font-weight: 700; cursor: pointer; color: var(--board); font-size: 1rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
    .faq summary::-webkit-details-marker { display: none; }
    .faq summary::after { content: '+'; font-family: var(--display); font-size: 1.3rem; color: var(--cut); flex-shrink: 0; }
    .faq details[open] summary::after { content: '–'; }
    .faq p { color: var(--ink-soft); margin-top: 10px; font-size: 0.94rem; }

    /* CTA band */
    .cta-band { background: radial-gradient(120% 150% at 100% 0%, rgba(243,198,75,0.14) 0%, rgba(243,198,75,0) 45%), linear-gradient(163deg, #1A4A31 0%, var(--board) 50%, var(--board-deep) 100%); border-radius: 20px; text-align: center; color: #fff; padding: 60px 28px; margin: 84px 0 72px; box-shadow: 0 20px 50px rgba(12,42,27,0.3); }
    .cta-band h2 { font-family: var(--display); text-transform: uppercase; color: var(--letter); font-size: clamp(1.8rem, 4.4vw, 2.8rem); line-height: 1.05; }
    .cta-band p { color: rgba(255,255,255,0.85); margin: 14px auto 26px; max-width: 540px; font-size: 1.05rem; }
    .cta-band .ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
    .cta-band .fineprint { margin-top: 16px; font-size: 0.82rem; color: rgba(255,255,255,0.65); }

    /* 📱 Get the app — the store badges. Hidden until a link exists (see
       THE_CUT_STORES at the bottom of this file); flip one string on approval
       day and every badge on the site turns on at once. */
    .storebar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 20px; }
    .storebar[hidden] { display: none; }
    .storebadge {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 10px 16px; border-radius: 12px; text-decoration: none;
      background: #000; color: #fff; border: 1px solid rgba(255,255,255,0.28);
      transition: transform .12s ease, border-color .12s ease;
    }
    .storebadge:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.6); }
    .storebadge svg { width: 22px; height: 22px; flex: 0 0 auto; fill: currentColor; }
    .storebadge .sb-t { display: block; line-height: 1.15; }
    .storebadge .sb-small { font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
    .storebadge .sb-big { font-size: 0.98rem; font-weight: 700; }

    /* footer */
    footer { background: var(--board-black); color: rgba(255,255,255,0.72); padding: 48px 0 40px; font-size: 0.88rem; border-top: 2px solid rgba(243,198,75,0.4); }
    .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
    .foot-grid h3 { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.74rem; color: var(--letter); margin-bottom: 12px; }
    .foot-grid ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
    .foot-grid a { color: rgba(255,255,255,0.72); text-decoration: none; }
    .foot-grid a:hover { color: var(--letter); }
    .foot-brand .brand { font-size: 1.4rem; }
    .foot-brand p { margin-top: 10px; max-width: 280px; color: rgba(255,255,255,0.82); }
    .foot-bottom { border-top: 1px solid rgba(255,255,255,0.12); margin-top: 36px; padding-top: 20px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 0.8rem; color: rgba(255,255,255,0.55); }

    /* reveal on scroll */
    @media (prefers-reduced-motion: no-preference) {
      .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
      .reveal.in { opacity: 1; transform: none; }
    }

    /* ---------- responsive ---------- */
    @media (max-width: 960px) {
      .hero-grid, .show-row, .stats-grid, .origin-grid, .props-grid { grid-template-columns: 1fr; }
      .hero { padding: 52px 0 64px; }
      .hero-grid { gap: 40px; }
      .phone-wrap { margin-top: 8px; }
      .show-row .phone-wrap { order: 2; }
      .show-row .copy { order: 1; }
      .ai-grid, .ai-grid.three { grid-template-columns: repeat(2, 1fr); }
      .steps, .plans, .guide-grid { grid-template-columns: 1fr; }
      .plan.dark { order: -1; }
      .foot-grid { grid-template-columns: 1fr 1fr; }
      section.pad { padding-top: 64px; }
      .show-band, .origin-band, .formats-band, .ai-band, .props-band, .social-band { padding-top: 64px; padding-bottom: 64px; margin-top: 64px; }
      .ai-band, .social-band { margin-top: 0; }
    }
    @media (max-width: 460px) {
      .container { padding: 0 16px; }
      .phone { width: 264px; }
      .phone .screen { min-height: 508px; }
      .ai-grid, .ai-grid.three { grid-template-columns: 1fr; }
      .props-band { padding: 56px 0; }
      .ab-q { font-size: 0.9rem; }
      .foot-grid { grid-template-columns: 1fr; gap: 24px; }
      .hero .ctas .btn, .cta-band .ctas .btn { width: 100%; }
      .rrow { grid-template-columns: 32px 1fr 52px 52px 52px; padding: 11px 12px; font-size: 0.84rem; }
      .filter-pills { padding: 10px 12px 14px; }
      .float-chip { display: none; }
      .cta-band { padding: 44px 20px; margin: 64px 0 56px; }
    }
  
    /* ---------- What makes it different (real app shots) ----------
       Josh, 19 Aug: six things nobody else does, each proved with an actual
       screenshot rather than an illustration. The image window is fixed-height
       with object-position:top so six tall phone shots don't turn the page into
       a mile of scrolling — you see the part that makes the point. */
    /* Josh, 19 Aug: the page used to breathe dark → light → dark and now runs
       dark into dark. The six sit on cream so the hero has something to land
       against; the cards stay scoreboard-green so they still pop. */
    .diff-band { background: var(--cream); border-bottom: 1.5px solid #E8E1C8; padding: 78px 0 84px; }
    .diff-band .sec-head h2 { color: var(--board); font-size: clamp(2.2rem, 5.4vw, 3.4rem); }
    .diff-band .sec-head .eyebrow { color: var(--cut); }
    .diff-band .sec-head p { color: var(--ink-soft); font-size: 1.1rem; }
    .diff-foot { color: var(--ink-soft); }
    .diff-card .diff-body h3 { color: #fff; }
    .diff-card .diff-body p { color: rgba(255,255,255,0.82); }
    .diff-card .diff-body .n { color: var(--letter); }
    .diff-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 26px; }
    /* The band is cream now, so the cards have to carry the dark themselves —
       a translucent white fill over cream is invisible, which is exactly how the
       white body copy ended up unreadable. */
    .diff-card { background: linear-gradient(168deg, #1A4A31, var(--board) 60%, var(--board-deep)); border: 1px solid rgba(12,42,27,0.18); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 14px 32px rgba(12,42,27,0.16); }
    .diff-shot { height: 400px; overflow: hidden; background: #0B0D0C; border-bottom: 1px solid rgba(243,198,75,0.28); }
    .diff-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
    .diff-body { padding: 18px 20px 22px; }
    .diff-body .n { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; color: var(--letter); display: block; margin-bottom: 6px; }
    .diff-body h3 { font-family: var(--display); text-transform: uppercase; font-size: 1.18rem; color: #fff; line-height: 1.12; margin-bottom: 8px; }
    .diff-body p { color: rgba(255,255,255,0.8); font-size: 0.92rem; line-height: 1.6; margin: 0; }
    .diff-foot { text-align: center; margin-top: 34px; color: var(--ink-soft); font-size: 0.9rem; }

    /* ---------- Clubs: the enterprise tease ----------
       The first version used a real screenshot of the demo club page. It looked
       terrible, and for a good reason: that club has no branding image and no
       members, so the shot was a grey slab above the words "MEMBERS (0)".
       Never advertise a tier with a picture of it being empty. This is a
       designed board instead — same idiom as the hero's phone mock. */
    .ent-band { background: var(--cream); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 72px 0 78px; margin-top: 72px; }
    .ent-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: 52px; align-items: center; max-width: 1080px; margin: 0 auto; padding: 0 20px; }
    .ent-grid .tag { display: inline-block; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.66rem; background: var(--board); color: var(--letter); padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; }
    .ent-grid h2 { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.7rem, 3.8vw, 2.4rem); color: var(--board); line-height: 1.06; margin-bottom: 12px; }
    .ent-grid > div > p { color: var(--ink-soft); }
    .ent-list { list-style: none; padding: 0; margin: 18px 0 24px; }
    .ent-list li { position: relative; padding-left: 26px; margin: 9px 0; color: var(--ink-soft); }
    .ent-list li::before { content: '⛳'; position: absolute; left: 0; top: 0; font-size: 0.85rem; }
    .ent-list li strong { color: var(--ink); }

    /* the board mock — deliberately illustrative, not a screenshot */
    .clubboard { background: linear-gradient(168deg, #1A4A31, var(--board) 60%, var(--board-deep)); border-radius: 16px; padding: 20px; box-shadow: 0 24px 50px rgba(12,42,27,0.28); border: 1px solid rgba(243,198,75,0.3); }
    .cb-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(243,198,75,0.28); margin-bottom: 16px; }
    .cb-crest { width: 42px; height: 42px; border-radius: 50%; background: var(--letter); color: var(--board-deep); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 0.86rem; flex: none; }
    .cb-head b { display: block; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.03em; color: #fff; font-size: 1.02rem; line-height: 1.15; }
    .cb-head span { font-size: 0.76rem; color: rgba(255,255,255,0.6); }
    .cb-cols { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
    .cb-col h4 { font-family: var(--display); text-transform: uppercase; font-size: 0.66rem; letter-spacing: 0.16em; color: var(--letter); margin-bottom: 8px; }
    .cb-ev { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 9px; padding: 9px 10px; margin-bottom: 8px; }
    .cb-ev b { display: block; color: #fff; font-size: 0.8rem; font-weight: 600; line-height: 1.25; }
    .cb-ev span { font-family: var(--mono); font-size: 0.64rem; color: rgba(255,255,255,0.55); }
    .cb-pill { display: inline-block; margin-top: 6px; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.56rem; padding: 2px 7px; border-radius: 999px; }
    .cb-pill.live { background: var(--cut); color: #fff; }
    .cb-pill.reg { background: rgba(243,198,75,0.9); color: var(--board-deep); }
    .cb-pill.done { background: rgba(255,255,255,0.16); color: rgba(255,255,255,0.75); }
    .cb-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.72rem; color: rgba(255,255,255,0.55); display: flex; justify-content: space-between; gap: 10px; }
    @media (max-width: 900px) { .ent-grid { grid-template-columns: 1fr; gap: 30px; } .ent-grid .clubboard { order: 2; } }
    @media (max-width: 460px) { .cb-cols { grid-template-columns: 1fr; } }
    @media (max-width: 980px) { .diff-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
    @media (max-width: 900px) { .ent-band { grid-template-columns: 1fr; gap: 26px; } .ent-band .ent-img { order: 2; } }
    @media (max-width: 620px) { .diff-grid { grid-template-columns: 1fr; } .diff-shot { height: 360px; } }
  
    /* the hero phone holds a real screenshot now, not a CSS mock */
    .phone-live { padding: 8px; overflow: hidden; }
    .phone-live img { width: 100%; height: auto; display: block; border-radius: 28px; }
    @media (prefers-reduced-motion: no-preference) {
      .phone-wrap .phone-live { animation: heroFloat 7s ease-in-out infinite; }
      @keyframes heroFloat { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-12px) } }
    }
  
    /* ---------- On your wrist ---------- */
    .watch-band { background: var(--cream); border-top: 1.5px solid #E8E1C8; border-bottom: 1.5px solid #E8E1C8; padding: 70px 0 74px; }
    .watch-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,0.9fr); gap: 46px; align-items: center; }
    .watch-grid .tag { display: inline-block; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.66rem; background: var(--board); color: var(--letter); padding: 5px 12px; border-radius: 999px; margin-bottom: 12px; }
    .watch-grid h2 { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.6rem,3.6vw,2.2rem); color: var(--board); line-height: 1.08; margin-bottom: 12px; }
    .watch-grid p { color: var(--ink-soft); }
    .watch-note { font-size: 0.85rem; margin-top: 10px; color: var(--ink-soft); opacity: 0.8; }
    .watch-pair { display: flex; gap: 20px; justify-content: center; }
    .watch { background: #0B0D0C; border-radius: 30px; padding: 8px; box-shadow: 0 18px 40px rgba(0,0,0,0.32), 0 0 0 1px rgba(255,255,255,0.1); }
    .watch img { display: block; width: 168px; height: auto; border-radius: 24px; }
    @media (prefers-reduced-motion: no-preference) {
      .watch:nth-child(1) { animation: watchFloat 6s ease-in-out infinite; }
      .watch:nth-child(2) { animation: watchFloat 6s ease-in-out infinite 1.2s; }
      @keyframes watchFloat { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-9px) } }
    }
    @media (max-width: 900px) { .watch-grid { grid-template-columns: 1fr; gap: 28px; } }
    @media (max-width: 420px) { .watch img { width: 132px; } }

    /* ---------- Cut AI, shown rather than described ----------
       First attempt inherited half the band's card styles and rendered gold
       headings on cream with 200px-wide paragraphs. Everything here is now
       explicit, and the screenshot sits in a fixed-height window (same trick as
       the six cards) so a 1476px-tall phone shot can't stretch the row. */
    .ai-show { max-width: 1060px; margin: 40px auto 0; display: flex; flex-direction: column; gap: 40px; }
    .ai-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,0.62fr); gap: 52px; align-items: center; text-align: left; }
    .ai-row:nth-child(even) .ai-shot { order: -1; }
    .ai-row .copy { min-width: 0; }
    .ai-row .copy .step { display: block; background: none; border: none; padding: 0; margin: 0 0 10px;
      font-family: var(--mono); font-size: 0.86rem; letter-spacing: 0.18em; color: var(--cut); font-weight: 600; }
    .ai-row .copy h3 { font-family: var(--display); text-transform: uppercase; color: var(--board);
      font-size: clamp(1.9rem, 4.2vw, 2.9rem); line-height: 1.03; margin: 0 0 14px; letter-spacing: 0.01em; }
    .ai-row .copy p { color: var(--ink-soft); font-size: 1.24rem; line-height: 1.55; margin: 0; max-width: 34ch; }
    .ai-shot { display: flex; justify-content: center; min-width: 0; }
    .ai-frame { width: 244px; background: #0B0D0C; border-radius: 34px; padding: 8px;
      box-shadow: 0 22px 48px rgba(12,42,27,0.26), 0 0 0 1px rgba(255,255,255,0.08); }
    .ai-frame span { display: block; height: 500px; overflow: hidden; border-radius: 27px; background: #EEF3EE; }
    .ai-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
    @media (max-width: 860px) {
      .ai-row { grid-template-columns: 1fr; gap: 20px; }
      .ai-row:nth-child(even) .ai-shot { order: 0; }
      .ai-row .copy p { max-width: none; }
    }
    /* ---------- motion ----------
       The site had reveal-on-scroll but everything arrived at once, which reads
       as a page repaint rather than as movement. Stagger the cards, lift them
       on hover, and let the screenshots breathe. All of it inside a
       prefers-reduced-motion guard — the observer already adds .in immediately
       when motion is reduced, so nothing is ever hidden from those users. */
    @media (prefers-reduced-motion: no-preference) {
      .diff-card, .guide-card, .ai-card, .step-card, .plan { transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, border-color .28s ease; }
      .diff-card:hover { transform: translateY(-8px); border-color: rgba(243,198,75,0.75); box-shadow: 0 22px 44px rgba(0,0,0,0.3); }
      .guide-card:hover, .ai-card:hover, .step-card:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(12,42,27,0.16); }
      .diff-shot img { transition: transform .5s cubic-bezier(.2,.7,.3,1); }
      .diff-card:hover .diff-shot img { transform: scale(1.035); }
      /* staggered arrival — the grid children come in one after another */
      .diff-grid .diff-card { transition-delay: calc(var(--i, 0) * 90ms); }
      .ai-show .ai-row { transition-delay: calc(var(--i, 0) * 80ms); }
    }
  
    /* ---------- the fifteen, explained ----------
       Josh, 19 Aug: "some people may not know the games". Chips told you a name
       and nothing else. Cards tell you what you'd actually be playing. */
    .game-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; max-width: 1040px; margin: 4px auto 0; }
    .game-card { background: #fff; border: 1.5px solid #E3DCC2; border-radius: 13px; padding: 17px 18px 19px; }
    .game-card h3 { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.02rem; color: var(--board); margin-bottom: 6px; }
    .game-card p { font-size: 0.9rem; line-height: 1.55; color: var(--ink-soft); margin: 0; }
    @media (prefers-reduced-motion: no-preference) {
      .game-card { transition: transform .24s cubic-bezier(.2,.7,.3,1), box-shadow .24s ease, border-color .24s ease; }
      .game-card:hover { transform: translateY(-4px); border-color: var(--board); box-shadow: 0 14px 30px rgba(12,42,27,0.14); }
    }
    @media (max-width: 900px) { .game-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
    @media (max-width: 560px) { .game-grid { grid-template-columns: 1fr; } }

    /* ================== PHOTOGRAPHY ==================
       Josh, 19 Aug: "I dont mind the start, but it gets boring from there."
       It was boring because from the hero down the page is fifteen sections of
       the identical shape — container width, heading, paragraph, phone. Same
       size, same rhythm, no human being anywhere on a product about your
       friends. These are 35mm stills shot for The Cut, and they are here to
       break that rhythm and put people on the page.

       RULE KEPT: none of this adds a band. Every photo either sits BEHIND an
       existing dark band (.ph-bg), opens one (.band-photo), or is content
       INSIDE a light band (.ph-fig / .ph-strip / .roast-photo). The
       dark → cream → dark alternation downpage is byte-for-byte unchanged.

       Every <img> here carries height:auto next to width:100% — the hero
       broke once because a height attribute went unanswered. Don't drop it. */

    .ph-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
    .ph-bg :is(img, video) { width: 100%; height: 100%; object-fit: cover; display: block; }
    .ph-bg::after { content: ''; position: absolute; inset: 0; }

    /* --- hero: the photo lives under the type, weighted so the left column
           stays near-solid green and the copy contrast never moves --- */
    .hero {
      position: relative; isolation: isolate;
      /* The photograph needs vertical room or it crops to somebody's torso.
         Capped in px so a tall desktop monitor doesn't push the six
         differentiators — the section that does the selling — off the fold. */
      min-height: min(90vh, 780px);
      display: flex; align-items: center;
      padding: 72px 0 80px;
    }
    .hero > .container { position: relative; z-index: 2; width: 100%; }
    .hero .ph-bg :is(img, video) { object-position: 50% 54%; }
    /* The photograph is atmosphere, not a subject. If you read it as a
       photo before you read the headline, the scrim has gone too light. */
    .hero .ph-bg::after {
      background:
        linear-gradient(96deg, rgba(7,23,17,0.97) 0%, rgba(9,32,21,0.94) 26%, rgba(10,36,23,0.85) 48%, rgba(10,36,23,0.66) 72%, rgba(10,36,23,0.74) 100%),
        linear-gradient(180deg, rgba(7,23,17,0.60) 0%, rgba(7,23,17,0.10) 30%, rgba(7,23,17,0.16) 58%, rgba(7,23,17,0.86) 100%),
        radial-gradient(120% 150% at 100% 0%, rgba(243,198,75,0.13) 0%, rgba(243,198,75,0) 46%);
    }
    @media (max-width: 960px) {
      /* stacked: type sits over the middle of the frame, so flatten the scrim */
      .hero { min-height: 0; }
      .hero .ph-bg :is(img, video) { object-position: 46% 34%; }
      .hero .ph-bg::after {
        background: linear-gradient(180deg, rgba(7,23,17,0.82) 0%, rgba(9,32,21,0.93) 40%, rgba(7,23,17,0.97) 100%);
      }
    }

    /* --- a photo that OPENS a dark band and dissolves into it --- */
    .band-photo { position: relative; width: 100%; overflow: hidden; margin: 0; line-height: 0; }
    .band-photo :is(img, video) { width: 100%; height: auto; display: block; aspect-ratio: 24 / 9; object-fit: cover; max-height: 480px; }
    .band-photo::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(7,23,17,0.50) 0%, rgba(7,23,17,0.12) 34%, rgba(12,40,28,0.70) 76%, #0E2A1E 100%);
    }
    .band-photo figcaption {
      position: absolute; left: 50%; transform: translateX(-50%); bottom: 26px; z-index: 2;
      width: 100%; max-width: 1120px; padding: 0 20px; line-height: 1.5;
      font-family: var(--display); text-transform: uppercase; letter-spacing: 0.14em;
      font-size: 0.72rem; color: rgba(255,255,255,0.78);
    }
    .band-photo figcaption em { font-style: normal; color: var(--letter); }
    /* the band gives up its top padding so the photo can reach the edge */
    .props-band.has-photo { padding-top: 0; }
    .props-band.has-photo > .container { padding-top: 62px; }
    @media (max-width: 960px) {
      .band-photo :is(img, video) { aspect-ratio: 16 / 9; }
      .props-band.has-photo > .container { padding-top: 44px; }
    }
    @media (max-width: 560px) {
      .band-photo :is(img, video) { aspect-ratio: 4 / 3; }
      .band-photo figcaption { bottom: 16px; font-size: 0.64rem; letter-spacing: 0.1em; }
    }

    /* --- an editorial photo used as CONTENT inside a light band --- */
    .ph-fig { position: relative; margin: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 42px rgba(12,42,27,0.22); }
    .ph-fig :is(img, video) { width: 100%; height: auto; display: block; }
    .ph-fig.tall :is(img, video) { aspect-ratio: 4 / 5; object-fit: cover; }
    .ph-fig figcaption {
      position: absolute; left: 0; right: 0; bottom: 0; padding: 44px 18px 15px;
      background: linear-gradient(180deg, rgba(7,23,17,0) 0%, rgba(7,23,17,0.86) 68%);
      color: rgba(255,255,255,0.9); font-family: var(--display);
      text-transform: uppercase; letter-spacing: 0.13em; font-size: 0.66rem; line-height: 1.6;
    }
    .ph-fig figcaption em { font-style: normal; color: var(--letter); }

    /* --- a full-width photo strip, container width and rounded so it reads as
           content rather than as a new band --- */
    .ph-strip { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 46px rgba(12,42,27,0.26); }
    .ph-strip :is(img, video) { width: 100%; height: auto; display: block; aspect-ratio: 21 / 9; object-fit: cover; }
    .ph-strip figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 28px 22px; background: linear-gradient(180deg, rgba(7,23,17,0) 0%, rgba(7,23,17,0.88) 66%); }
    .ph-strip .pl { font-family: var(--display); text-transform: uppercase; color: #fff; font-size: clamp(1.15rem, 2.7vw, 1.85rem); line-height: 1.08; letter-spacing: 0.02em; }
    .ph-strip .pl em { font-style: normal; color: var(--letter); }
    .ph-strip .ps { margin-top: 8px; font-size: 0.88rem; line-height: 1.55; color: rgba(255,255,255,0.76); max-width: 560px; }
    @media (max-width: 700px) {
      .ph-strip :is(img, video) { aspect-ratio: 3 / 2; }
      .ph-strip figcaption { padding: 54px 18px 16px; }
    }

    /* --- the needle, on a photo instead of in a white box --- */
    .roast-photo { position: relative; margin: 24px 0 0; border-radius: 12px; overflow: hidden; box-shadow: 0 16px 38px rgba(12,42,27,0.24); }
    .roast-photo :is(img, video) { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
    .roast-photo .rp-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 66px 20px 16px; background: linear-gradient(180deg, rgba(7,23,17,0) 0%, rgba(7,23,17,0.9) 60%); border-left: 4px solid var(--cut); }
    .roast-photo blockquote { font-family: var(--mono); font-size: 0.95rem; color: #fff; margin: 0; }
    .roast-photo figcaption { margin-top: 8px; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.64rem; color: #FF8095; }

    /* --- two-column heads and splits --- */
    .head-split { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 42px; align-items: center; margin-bottom: 34px; }
    .head-split .sec-head { text-align: left; margin: 0; max-width: none; }
    .how-split { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 46px; align-items: center; }
    .how-split .sec-head { text-align: left; margin: 0 0 24px; max-width: none; }
    .how-split .steps { grid-template-columns: 1fr; gap: 14px; }
    .ent-band .ph-strip { margin-bottom: 44px; }
    @media (max-width: 900px) {
      .head-split, .how-split { grid-template-columns: 1fr; gap: 30px; }
      .head-split .ph-fig, .how-split .ph-fig { order: 2; }
      .how-split .steps { grid-template-columns: 1fr; }
    }

    /* --- origin: the emotional middle of the page, so it gets a photograph
           instead of a flat gradient --- */
    .origin-band { position: relative; isolation: isolate; }
    .origin-band > .container { position: relative; z-index: 2; }
    .origin-band .ph-bg :is(img, video) { object-position: 66% 54%; }
    .origin-band .ph-bg::after {
      background:
        linear-gradient(100deg, rgba(7,23,17,0.96) 0%, rgba(9,30,20,0.90) 38%, rgba(9,30,20,0.60) 72%, rgba(9,30,20,0.50) 100%),
        linear-gradient(180deg, rgba(7,23,17,0.66) 0%, rgba(7,23,17,0.16) 42%, rgba(7,23,17,0.82) 100%);
    }
    @media (max-width: 960px) {
      .origin-band .ph-bg::after { background: linear-gradient(180deg, rgba(7,23,17,0.86) 0%, rgba(9,30,20,0.94) 46%, rgba(7,23,17,0.96) 100%); }
    }

    /* --- the close: make it the biggest thing on the page, not a small box --- */
    .cta-band { position: relative; isolation: isolate; overflow: hidden; padding: clamp(66px, 9vw, 116px) 28px; }
    .cta-band > *:not(.ph-bg) { position: relative; z-index: 2; }
    .cta-band .ph-bg :is(img, video) { object-position: 46% 58%; }
    .cta-band .ph-bg::after {
      background:
        linear-gradient(180deg, rgba(7,23,17,0.58) 0%, rgba(10,34,22,0.76) 48%, rgba(7,23,17,0.90) 100%),
        radial-gradient(80% 110% at 50% 42%, rgba(7,23,17,0.55) 0%, rgba(7,23,17,0.10) 70%),
        radial-gradient(90% 120% at 50% 0%, rgba(243,198,75,0.14) 0%, rgba(243,198,75,0) 55%);
    }
    .cta-band h2 { font-size: clamp(2rem, 5.4vw, 3.4rem); }

    /* Motion stays inside the reduced-motion guard, same as everything else. */
    @media (prefers-reduced-motion: no-preference) {
      .ph-fig :is(img, video), .ph-strip :is(img, video), .roast-photo :is(img, video) { transition: transform .7s cubic-bezier(.2,.7,.3,1); }
      .ph-fig:hover img, .ph-strip:hover img, .roast-photo:hover img { transform: scale(1.035); }
    }

/* ============================================================
   MULTI-PAGE — added 20 Aug when the one long page became five
   ============================================================ */

/* ---------- film: the Runway clips, wherever a photo used to sit ----------
   Every <video> on this site is decorative, silent and autoplaying, so it
   MUST carry muted + playsinline or iOS refuses to start it, and it must
   never be the thing carrying meaning -- the poster frame is the real
   content and the motion is a bonus. Anyone on reduced-motion gets the
   poster and nothing else; see the block at the bottom. */
video { display: block; max-width: 100%; }
.ph-bg video, .band-photo video, .ph-fig video, .ph-strip video { object-fit: cover; }
.ph-strip video, .ph-fig video { width: 100%; height: auto; }

/* ---------- page head: the top of an inner page ---------- */
.pagehead { position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(163deg, #1A4A31 0%, var(--board) 48%, var(--board-deep) 100%);
  color: #fff; padding: clamp(72px, 11vw, 132px) 0 clamp(64px, 9vw, 104px); }
.pagehead > .container { position: relative; z-index: 2; }
.pagehead .ph-bg::after {
  background:
    linear-gradient(96deg, rgba(7,23,17,0.95) 0%, rgba(9,32,21,0.90) 30%, rgba(10,36,23,0.72) 58%, rgba(10,36,23,0.62) 100%),
    linear-gradient(180deg, rgba(7,23,17,0.55) 0%, rgba(7,23,17,0.12) 34%, rgba(7,23,17,0.82) 100%); }
.pagehead .eyebrow { color: var(--letter); }
.pagehead h1 { font-family: var(--display); text-transform: uppercase; font-weight: 700;
  font-size: clamp(2.3rem, 6vw, 4rem); line-height: 1.0; color: #fff; letter-spacing: 0.015em; }
.pagehead h1 em { font-style: normal; color: var(--letter); }
.pagehead .lede { max-width: 620px; margin-top: 20px; font-size: 1.12rem;
  color: rgba(255,255,255,0.88); line-height: 1.62; }
.crumb { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 0.7rem; color: rgba(255,255,255,0.6); margin-bottom: 18px; display: block; text-decoration: none; }
.crumb:hover { color: var(--letter); }

/* ---------- chapter tiles: the whole of the homepage's middle ---------- */
.chapters { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.chapter { position: relative; display: block; overflow: hidden; border-radius: 16px;
  text-decoration: none; color: #fff; isolation: isolate;
  box-shadow: 0 16px 40px rgba(12,42,27,0.22); min-height: 310px; }
.chapter :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; }
.chapter::after { content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(7,23,17,0.22) 0%, rgba(7,23,17,0.30) 42%, rgba(7,23,17,0.92) 100%); }
.chapter .ch-body { position: relative; z-index: 2; height: 100%; display: flex;
  flex-direction: column; justify-content: flex-end; padding: 26px 26px 24px; min-height: 310px; }
.chapter .ch-n { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.2em;
  font-size: 0.66rem; color: var(--letter); margin-bottom: 8px; }
.chapter h3 { font-family: var(--display); text-transform: uppercase; font-size: 1.6rem;
  line-height: 1.05; color: #fff; letter-spacing: 0.02em; }
.chapter p { margin-top: 9px; font-size: 0.95rem; color: rgba(255,255,255,0.84); max-width: 42ch; }
.chapter .ch-go { margin-top: 14px; font-family: var(--display); text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.72rem; color: var(--letter); }
.chapter .ch-go::after { content: ' →'; }
@media (prefers-reduced-motion: no-preference) {
  .chapter { transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease; }
  .chapter :is(img, video) { transition: transform .7s cubic-bezier(.2,.7,.3,1); }
  .chapter:hover { transform: translateY(-5px); box-shadow: 0 24px 54px rgba(12,42,27,0.32); }
  .chapter:hover :is(img, video) { transform: scale(1.045); }
}
@media (max-width: 760px) { .chapters { grid-template-columns: 1fr; } }

/* ---------- on to the next page ---------- */
.nextpage { border-top: 1.5px solid var(--line); margin-top: 84px; padding: 34px 0 76px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.nextpage .np-l { font-family: var(--display); text-transform: uppercase;
  letter-spacing: 0.18em; font-size: 0.68rem; color: var(--ink-soft); }
.nextpage a { font-family: var(--display); text-transform: uppercase; font-size: 1.5rem;
  color: var(--board); text-decoration: none; letter-spacing: 0.02em; }
.nextpage a:hover { color: var(--cut); }
.nextpage a::after { content: ' →'; }
.on-dark .nextpage { border-color: rgba(255,255,255,0.16); }
.on-dark .nextpage a { color: #fff; }

/* ---------- nav: current page gets the gold ---------- */
.nav-links a[aria-current="page"] { color: var(--letter); }

/* ---------- the :15, as the way in ----------
   Shown once per visitor, desktop only, never when motion is reduced.
   Esc closes it, the Skip button is real and focusable, and the page
   underneath is fully rendered before this ever appears -- it is an
   overlay on a working site, not a gate in front of a blank one. */
.intro { position: fixed; inset: 0; z-index: 400; background: #071711;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s; }
.intro.on { opacity: 1; visibility: visible; }
.intro video { width: 100%; height: 100%; object-fit: cover; }
.intro-skip { position: absolute; right: 22px; bottom: 22px; z-index: 2;
  background: rgba(7,23,17,0.6); border: 1.5px solid rgba(255,255,255,0.45);
  color: #fff; font-family: var(--display); text-transform: uppercase;
  letter-spacing: 0.16em; font-size: 0.72rem; padding: 11px 20px; border-radius: 8px;
  cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.intro-skip:hover { background: rgba(200,16,46,0.85); border-color: transparent; }
.intro-bar { position: absolute; left: 0; bottom: 0; height: 3px; z-index: 2;
  background: var(--letter); width: 0; }
.intro.on .intro-bar { animation: introbar var(--introdur, 15s) linear forwards; }
@keyframes introbar { to { width: 100%; } }
@media (max-width: 900px) { .intro { display: none; } }

/* ---------- reduced motion: every clip becomes its poster ----------
   Pausing isn't enough -- a paused <video> still shows frame one, which is
   fine, but autoplay must never start in the first place. The script checks
   this too; the CSS is the belt to its braces. */
@media (prefers-reduced-motion: reduce) {
  .intro { display: none !important; }
  .chapter :is(img, video) { transition: none; }
}

/* ---------- hero, film version ----------
   The scrim above was weighted for the first-tee still, which is a bright
   foggy frame that needed holding down. The dusk range clip arrives already
   dark, so the same scrim crushes it to a flat green box. Lighter scrim, and
   the type carries its own shadow instead. */
.hero.has-film { min-height: min(88vh, 760px); }
.hero.has-film .ph-bg::after {
  background:
    linear-gradient(96deg, rgba(7,23,17,0.90) 0%, rgba(9,32,21,0.74) 26%, rgba(10,36,23,0.44) 52%, rgba(10,36,23,0.24) 78%, rgba(10,36,23,0.40) 100%),
    linear-gradient(180deg, rgba(7,23,17,0.62) 0%, rgba(7,23,17,0.05) 30%, rgba(7,23,17,0.10) 56%, rgba(7,23,17,0.80) 100%);
}
.hero.has-film h1 { text-shadow: 0 2px 24px rgba(7,23,17,0.55); }
.hero.has-film .tagline { text-shadow: 0 1px 12px rgba(7,23,17,0.7); max-width: 640px; }
/* no phone beside it any more, so the type takes the room it used to use */
.hero.has-film .hero-grid { grid-template-columns: 1fr; max-width: 1000px; margin: 0 auto; }
.hero.has-film h1 { font-size: clamp(2.9rem, 7.4vw, 5.4rem); }
@media (max-width: 960px) {
  .hero.has-film { min-height: 0; }
  .hero.has-film .ph-bg::after {
    background: linear-gradient(180deg, rgba(7,23,17,0.74) 0%, rgba(9,32,21,0.86) 44%, rgba(7,23,17,0.95) 100%);
  }
}

/* pagehead film runs dark too — same correction, gentler */
.pagehead .ph-bg::after {
  background:
    linear-gradient(96deg, rgba(7,23,17,0.92) 0%, rgba(9,32,21,0.80) 30%, rgba(10,36,23,0.52) 62%, rgba(10,36,23,0.44) 100%),
    linear-gradient(180deg, rgba(7,23,17,0.50) 0%, rgba(7,23,17,0.08) 36%, rgba(7,23,17,0.78) 100%);
}
.pagehead h1, .pagehead .lede { text-shadow: 0 2px 20px rgba(7,23,17,0.5); }

/* the first band on an inner page butts straight onto the page head — the
   84px top margin left a stripe of page background that read as a seam */
.pagehead + .formats-band, .pagehead + .props-band,
.pagehead + .social-band, .pagehead + .ai-band,
.pagehead + section.pad { margin-top: 0; }
.pagehead + section.pad { padding-top: 76px; }