/* Hero option C (2026-10-29, Aidan: "Build homepage hero option C (product
   frame)", shipped the same day: "the new design is fucking great - push it"). A plain headline, one red button and
   a text link, then the example round framed like a product window. */
body.hero-c #first-screen .fs-actions,
body.hero-c #first-screen .fs-ballot,
body.hero-c #first-screen .fs-more{display:none!important}
/* 2026-10-29, Aidan, off a screenshot with the live strip showing: "push it up a
   little bit to fit in". Top padding 30px -> 8px. */
/* 2026-10-31, Aidan: "space out a bit more on y axis between texts here, feels a bit
   condensed". Top 8->28, headline->button 26->40, button->board 28->44,
   board->record line 24->32; phone gaps up ~8px each. */
body.hero-c #first-screen .fscreen-wrap{display:block!important;max-width:1080px;margin:0 auto;padding:28px 24px 0}
body.hero-c .hc-head{text-align:center;margin:0 auto 44px;max-width:960px}
body.hero-c .hc-h{font-family:var(--font-display,inherit);font-size:clamp(2.2rem,4.6vw,3.6rem);font-weight:800;line-height:1.05;letter-spacing:-.02em;margin:0;color:var(--text,#141417)}
body.hero-c .hc-sub{font-size:1.12rem;line-height:1.5;color:var(--text-dim,#5d5d66);margin:14px 0 26px}
/* 2026-10-31: the subline under the headline came off and it carried the
   gap above the button, so the button row owns that gap now. */
body.hero-c .hc-cta{display:flex;gap:22px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:40px}
/* 2026-11-01, Aidan: "increase size of this button". 1rem / 13x22 -> 1.35rem / 18x36. */
body.hero-c .hc-primary{display:inline-flex;align-items:center;gap:10px;background:#c62828;color:#fff;font-weight:800;font-size:1.35rem;padding:18px 36px;border-radius:10px;text-decoration:none;box-shadow:0 10px 24px -10px rgba(198,40,40,.55)}
body.hero-c .hc-primary:hover{background:#a51f1f}
/* Live-round door (2026-10-29, Aidan: "remove the watch rounds button and make
   sure to have the pop down live rounds thing"). Hidden until the watch-live
   poll finds a public round, then it drops in. The explicit [hidden] rule is
   load-bearing: display below would beat the UA sheet. */
body.hero-c .hc-live[hidden]{display:none!important}
body.hero-c .hc-live{display:inline-flex;align-items:center;gap:9px;color:#dc2626;font-weight:700;font-size:1rem;text-decoration:none;padding:12px 18px;border:1px solid rgba(220,38,38,.45);border-radius:8px;animation:hcLiveDrop .45s cubic-bezier(.2,.8,.2,1) both}
body.hero-c .hc-live:hover{border-color:#dc2626;background:rgba(220,38,38,.06)}
body.hero-c .hc-live .fs-watch-dot{display:block}
@keyframes hcLiveDrop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){body.hero-c .hc-live{animation:none}}
body.hero-c #first-screen .fs-board-wrap{max-width:920px;margin:0 auto}
/* 2026-10-29, Aidan: "bring back the arrows to swipe between too". The
   board's prev/next arrows (.fs-nav) were hidden when hero C shipped. */
body.hero-c #first-screen .fs-board{border:1px solid color-mix(in srgb,var(--text,#141417) 14%,transparent)!important;border-radius:12px!important;overflow:hidden!important;background:var(--bg-elev,#fff)!important;padding:0 12px 12px!important;box-shadow:0 30px 60px -30px rgba(0,0,0,.25)!important}
body.hero-c #first-screen .fs-motion{display:flex!important;align-items:center;gap:10px;margin:0 -12px 12px!important;padding:10px 14px!important;border-bottom:1px solid color-mix(in srgb,var(--text,#141417) 10%,transparent);font-size:.92rem!important;font-weight:600!important;line-height:1.3!important;text-align:left!important;letter-spacing:0!important;color:var(--text,#141417)!important;background:color-mix(in srgb,var(--text,#141417) 3%,transparent)}
body.hero-c #first-screen .fs-motion::before{content:"";flex:none;width:44px;height:10px;background:radial-gradient(circle,color-mix(in srgb,var(--text,#141417) 22%,transparent) 4px,transparent 4.5px) 0 0/16px 10px repeat-x}
body.hero-c .hc-record{margin:18px 0 0;font-size:.98rem;color:var(--text-dim,#5d5d66)}
/* 2026-10-31: the record line moved below the board, above sign-in. */
body.hero-c #first-screen .hc-record{max-width:920px;margin:32px auto 0;text-align:center}
body.hero-c:not(.signed-in) #first-screen .hc-record + .fs-signin{margin-top:14px!important}
body.hero-c .hc-record b{color:var(--text,#141417)}
/* 2026-10-31, Aidan: "be in italics or something to stand out better, and
   make the bold 'record your rounds' stronger". The sentence runs italic;
   the label stays upright at black weight so it reads as the headline. */
body.hero-c .hc-record{font-style:italic;font-size:1.06rem}
body.hero-c .hc-record b{font-style:normal;font-weight:900;letter-spacing:-.01em;margin-right:.15em}
body.hero-c #mhome .hc-record{font-size:.98rem}
body.hero-c .hc-record .hc-money{color:#15803d;font-weight:700}
/* Guest sign-in: a rounded button with its reason beside it, close under the frame. */
body.hero-c:not(.signed-in) #first-screen .fs-signin{display:flex!important;align-items:center;justify-content:center;gap:12px!important;max-width:920px;margin:22px auto 0!important;position:relative;z-index:1}
body.hero-c #first-screen .fs-signin-btn{border-radius:999px!important;padding:15px 30px!important;min-height:0!important;font-size:17px!important}
body.hero-c #first-screen .fs-signin-why{margin:0!important;max-width:none!important}
body.hero-c #first-screen .fs-motion{width:auto!important;max-width:none!important;box-sizing:border-box}

/* ── Phone (the #mhome first screen) ─────────────────────────────── */
body.hero-c #mhome .hc-head{margin:14px auto 30px;padding:0 4px}
body.hero-c #mhome .hc-h{font-size:2.15rem;line-height:1.08}
body.hero-c #mhome .hc-sub{font-size:1rem;margin:10px 0 18px}
body.hero-c #mhome .hc-cta{flex-direction:column;gap:14px;margin-top:26px}
body.hero-c #mhome .hc-primary{width:100%;justify-content:center;padding:18px 20px;font-size:1.25rem;box-sizing:border-box}
body.hero-c #mhome .hc-record{font-size:.92rem;line-height:1.45;margin:18px 4px 0;text-align:center}
body.hero-c #mhome .mh-primary{display:none!important}
body.hero-c #mhome .fs-more,body.hero-c #mhome .fs-ballot{display:none!important}
body.hero-c #mhome .fs-stage{margin-bottom:0!important}
body.hero-c #mhome .fs-board{border:1px solid color-mix(in srgb,var(--text,#141417) 14%,transparent)!important;border-radius:12px!important;overflow:hidden!important;background:var(--bg-elev,#fff)!important;padding:0 8px 8px!important;box-shadow:0 20px 40px -24px rgba(0,0,0,.25)!important}
body.hero-c #mhome .fs-motion{display:flex!important;align-items:center;gap:8px;width:auto!important;margin:0 -8px 8px!important;padding:9px 12px!important;border-bottom:1px solid color-mix(in srgb,var(--text,#141417) 10%,transparent);font-size:.86rem!important;font-weight:600!important;line-height:1.3!important;height:auto!important;min-height:0!important;text-align:left!important;letter-spacing:0!important;color:var(--text,#141417)!important;background:color-mix(in srgb,var(--text,#141417) 3%,transparent);opacity:1!important}
body.hero-c #mhome .fs-motion::before{content:"";flex:none;width:34px;height:8px;background:radial-gradient(circle,color-mix(in srgb,var(--text,#141417) 22%,transparent) 3px,transparent 3.5px) 0 0/12px 8px repeat-x}
body.hero-c #mhome .mh-signin{margin-top:18px}

/* Dark arm of color_scheme_v1 (2026-10-29, Aidan: "have the dark mode option
   too - not always just white"). The frame and copy above read page tokens;
   these are the few literal colours that need a dark value. */
[data-theme="crimson"] body.hero-c .hc-record .hc-money{color:#22c55e}
[data-theme="crimson"] body.hero-c .hc-primary{background:#dc2626}
[data-theme="crimson"] body.hero-c .hc-primary:hover{background:#b91c1c}
[data-theme="crimson"] body.hero-c .hc-live{color:#f87171;border-color:rgba(248,113,113,.5)}
[data-theme="crimson"] body.hero-c .hc-live:hover{color:#fca5a5;border-color:#f87171;background:rgba(248,113,113,.08)}
[data-theme="crimson"] body.hero-c #first-screen .fs-board,
[data-theme="crimson"] body.hero-c #mhome .fs-board{box-shadow:0 30px 60px -30px rgba(0,0,0,.7)!important}

/* 2026-10-31, the founder: the "Sign in or create account" button is no
   wider than its own label (on phones it was the full width of the board
   and the red button above it). The grey fill tried the same day came
   back off ("too intense grey"); the button keeps its original colors. */
body #mhome .mh-signin-btn{
  display:flex!important;width:fit-content!important;max-width:100%;margin-left:auto!important;margin-right:auto!important;
  min-height:46px!important;padding:12px 26px!important;font-size:15px!important;font-weight:600!important;
}