/* Homepage only. Circles identify people and status. Shared navigation
   and product pages keep their own styles.
   2026-10-29, Aidan, off the leaderboard: "fix the way this is lame and
   square", then "add more depth / shadow vibes to the homepage too". The
   3px corner and the blanket box-shadow:none that made every surface a
   flat box are replaced by a rounded corner and three shadow steps. A
   surface gets depth by reading a token, so the dark themes swap the
   tokens below instead of overriding each rule. */
body.homepage-red-wordmark{
  --home-rule:color-mix(in srgb,var(--text) 14%,transparent);
  --home-soft:color-mix(in srgb,var(--text) 5%,var(--bg));
  --home-panel:var(--bg);
  --home-corner:12px;
  --home-radius:20px;
  --home-shadow-sm:0 1px 2px rgba(28,22,14,.06),0 3px 8px -3px rgba(28,22,14,.12);
  --home-shadow:0 1px 2px rgba(28,22,14,.05),0 12px 30px -12px rgba(28,22,14,.22);
  --home-shadow-lg:0 2px 4px rgba(28,22,14,.05),0 28px 56px -22px rgba(28,22,14,.32);
  --home-glow:0 12px 26px -12px rgba(217,35,35,.65);
  background:var(--bg);
}
/* Dark themes: deeper shadows plus a hairline top light, which is what
   reads as depth on a near-black page. */
html:not([data-theme="light"]) body.homepage-red-wordmark{
  --home-shadow-sm:0 1px 2px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04);
  --home-shadow:0 2px 4px rgba(0,0,0,.45),0 16px 34px -14px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.05);
  --home-shadow-lg:0 2px 6px rgba(0,0,0,.5),0 30px 60px -24px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.06);
  --home-glow:0 12px 28px -12px rgba(239,68,68,.6);
}
body.homepage-red-wordmark :is(h1,h2,h3,h4){font-weight:600;letter-spacing:-.025em}
body.homepage-red-wordmark :is(button,input,textarea,select){font-family:var(--font-body)}
body.homepage-red-wordmark :is(a,button,summary,input,textarea):focus-visible{
  outline:2px solid var(--accent);outline-offset:4px;
}

/* Plain navigation, with a contained sign-in action. */
body.homepage-red-wordmark .ui-topbar{box-shadow:none;border-bottom:1px solid var(--home-rule)}
body.homepage-red-wordmark .ui-topbar :is(.ui-topbar-more-btn,.ui-topbar-howbtn){
  border-radius:var(--home-corner);border-color:transparent;background:transparent;
  box-shadow:none;font-weight:500;letter-spacing:0;
}
body.homepage-red-wordmark .ui-topbar :is(.ui-topbar-more-btn,.ui-topbar-howbtn):hover{
  background:var(--home-soft);border-color:var(--home-rule);box-shadow:none;
}
body.homepage-red-wordmark .ui-topbar :is(.ui-btn,.theme-toggle,.ui-bell,.ui-topbar-lang,.ui-topbar-burger){
  border-radius:var(--home-corner);box-shadow:none;letter-spacing:0;
}
body.homepage-red-wordmark .ui-topbar .ui-btn{font-weight:600;text-transform:none}
body.homepage-red-wordmark .lang-picker.in-nav{border-radius:var(--home-corner)}

/* The example round sits directly on the page, without an outer frame. */
body.homepage-red-wordmark :is(#first-screen,#mhome) #fsBoard{
  border:0;border-radius:0;
  background:transparent;box-shadow:none;transition:none;
}
body.homepage-red-wordmark :is(#first-screen,#mhome) #fsBoard:hover,
body.homepage-red-wordmark :is(#first-screen,#mhome) #fsBoard:focus-within{
  transform:none;box-shadow:none;
}
body.homepage-red-wordmark #fsBoard .fs-tile{border-radius:16px;box-shadow:var(--home-shadow)}
body.homepage-red-wordmark #fsBoard :is(.fs-tile-nm,.fs-clock,.fs-nav){border-radius:8px;box-shadow:none}
/* 2026-10-11: resolutions are set like the pitch deck's headlines,
   Avenir Next Bold, instead of the Georgia judge face. */
body.homepage-red-wordmark :is(#first-screen,#mhome) #fsBoard h2.fs-motion{
  font-family:var(--font-deck) !important;font-weight:700;font-style:normal;
  font-size:clamp(1.3rem,2.05vw,1.9rem);line-height:1.2;letter-spacing:-.01em;
  display:block;height:auto;min-height:2.4em;max-height:none;overflow:visible;-webkit-line-clamp:unset;
}
body.homepage-red-wordmark #first-screen #fsBoard .fs-ballot-top b{
  font-weight:600;font-size:clamp(1.3rem,1.9vw,1.8rem);letter-spacing:-.03em;
}
body.homepage-red-wordmark #first-screen #fsBoard .fs-wait-copy{font-size:1rem;font-weight:500;line-height:1.45}
body.homepage-red-wordmark #fsBoard :is(.fs-ballot-k,.fs-wait-label){font-size:11px;letter-spacing:.12em;font-weight:500}
body.homepage-red-wordmark #fsBoard .fs-ballot-top span{font-size:12px;font-weight:500}

/* One solid primary action. Secondary actions use a line, not a glow. */
body.homepage-red-wordmark :is(.fs-cta,.mh-primary,.mh-card,.mh-board,.mh-signin-btn,.fs-signin-btn,
  .fs-what-btn,.fs-chats-discord,.fs-chat-input,.fs-chat-send,.rb-action,.landing-more-summary,
  .hiw-go,.hero-pill,.hero-cta,.hero-cta-secondary,.hero-stage-cta,.live-proof-cta-btn,.live-proof-cta-ghost){
  border-radius:var(--home-corner);box-shadow:none;text-shadow:none;
}
body.homepage-red-wordmark :is(.fs-cta,.mh-card,.mh-signin-btn,.fs-signin-btn,.fs-chats-discord,.rb-action,.hiw-go){
  box-shadow:var(--home-shadow-sm);transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
body.homepage-red-wordmark :is(.fs-cta,.mh-primary,.mh-card,.fs-signin-btn,.fs-chats-discord,
  .rb-action,.landing-more-summary,.hiw-go):hover{
  transform:translateY(-1px);box-shadow:var(--home-shadow);
}
body.homepage-red-wordmark :is(#first-screen .fs-actions .fs-cta--primary,.mh-primary,.lm-wl-row .landing-more-summary){
  box-shadow:var(--home-glow);
}
body.homepage-red-wordmark :is(#first-screen .fs-actions .fs-cta--primary,.mh-primary,.lm-wl-row .landing-more-summary):hover{
  box-shadow:0 16px 30px -12px rgba(217,35,35,.7);
}
body.homepage-red-wordmark .fs-what-btn,body.homepage-red-wordmark .fs-what-btn:hover{box-shadow:none;transform:none}
body.homepage-red-wordmark #first-screen .fs-actions .fs-cta--primary{
  justify-content:space-between;min-height:72px;padding:16px 24px;
  background:#d92323;font-size:clamp(1.5rem,2.3vw,2rem);font-weight:600;letter-spacing:-.03em;
}
body.homepage-red-wordmark #first-screen .fs-actions .fs-cta--primary:hover{background:#bd1717}
body.homepage-red-wordmark #first-screen .fs-actions-row .fs-cta{
  min-height:64px;font-size:clamp(24px,1.7vw,28px);font-weight:600;border:1px solid var(--home-rule);
  color:var(--text);background:var(--bg);
}
body.homepage-red-wordmark [data-ai-invite] .ai-invite-label{background:var(--bg);padding:2px 10px;text-shadow:none}
body.homepage-red-wordmark .fs-signin--side .fs-signin-btn{
  padding:11px 15px;font-size:14px;font-weight:500;border:1px solid var(--home-rule);background:transparent;color:var(--text);
}
body.homepage-red-wordmark .fs-signin--side .fs-signin-why{font-size:13px}
body.homepage-red-wordmark #first-screen .fs-live-line{
  font-size:clamp(19px,1.4vw,22px);line-height:1.3;margin-bottom:4px;
}

/* Chat is a reading column. The typewriter remains its movement. */
body.homepage-red-wordmark .fs-chats{font-family:var(--font-body)}
body.homepage-red-wordmark #first-screen .fs-what-btn{
  min-height:42px;padding:8px 0;background:transparent;border:0;font-size:16px;font-weight:500;
}
body.homepage-red-wordmark #first-screen .fs-what-btn:hover{background:transparent}
body.homepage-red-wordmark .fs-what-pop{border-radius:var(--home-corner);box-shadow:0 6px 16px #0002}
body.homepage-red-wordmark .fs-chats-title{font-size:10px;letter-spacing:.12em;font-weight:500}
body.homepage-red-wordmark #first-screen .fs-chats-discord{font-size:14px;padding:11px 13px;font-weight:600}
body.homepage-red-wordmark #first-screen .fs-chats-msg{font-size:14px;line-height:1.6}
body.homepage-red-wordmark .fs-chats-room{font-size:10px;font-weight:600;letter-spacing:.03em}
body.homepage-red-wordmark .fs-chats-handle{font-weight:600}
body.homepage-red-wordmark :is(.fs-chat-compose label,.fs-chats-cta){font-size:13px;font-weight:600}
body.homepage-red-wordmark .fs-chat-input{font-size:14px;border-color:var(--home-rule);background:var(--bg);color:var(--text)}
body.homepage-red-wordmark .fs-chat-send{font-size:13px}

/* Standings are rows in a table, with circular identities and plain ranks. */
body.homepage-red-wordmark #ranked-band .rb-stage{
  padding:0;overflow:hidden;background:var(--bg);border:1px solid var(--home-rule);border-radius:var(--home-radius);box-shadow:var(--home-shadow-lg);
}
body.homepage-red-wordmark #ranked-band .rb-board{gap:0}
body.homepage-red-wordmark #ranked-band :is(.rb-row,.rb-load-row){
  border:0;border-bottom:1px solid var(--home-rule);border-radius:0;background:transparent;
}
body.homepage-red-wordmark #ranked-band .rb-row:hover{transform:none;background:var(--home-soft)}
body.homepage-red-wordmark #ranked-band .rb-rk{
  border-radius:0;background:transparent;box-shadow:none;color:var(--text-dim);font-weight:500;
}
body.homepage-red-wordmark #ranked-band .rb-row--top .rb-rk{color:var(--accent);font-weight:700}
body.homepage-red-wordmark #ranked-band .rb-ava{border-radius:50%}
body.homepage-red-wordmark #ranked-band .rb-chal-btn{min-height:34px;border-radius:999px;font-size:12px;letter-spacing:0;text-transform:none;font-weight:700;padding:0 16px;background:var(--bg);box-shadow:var(--home-shadow-sm);transition:background .14s ease,color .14s ease,box-shadow .14s ease}
body.homepage-red-wordmark #ranked-band .rb-chal-btn:hover{box-shadow:var(--home-glow)}
body.homepage-red-wordmark #ranked-band .rb-metric-value{font-family:var(--font-mono);font-size:16px}
body.homepage-red-wordmark .rb-title{font-size:clamp(1.5rem,2.4vw,2.2rem);font-weight:500;letter-spacing:-.04em}
body.homepage-red-wordmark .rb-action{font-size:13px;font-weight:500}
body.homepage-red-wordmark .lm-wl-row .landing-more-summary{
  border:1px solid #d92323;background:#d92323;color:#fff;box-shadow:none;min-height:64px;padding:16px 24px;
}
body.homepage-red-wordmark .lm-wl-row .landing-more-summary:hover{background:#bd1717;border-color:#bd1717}
body.homepage-red-wordmark .lm-wl-row .lm-title{font-size:20px;font-weight:700;line-height:1.2}
body.homepage-red-wordmark .lm-wl-row .landing-more-summary .lm-action{color:inherit}
body.homepage-red-wordmark .lm-wl-row .lm-action svg{width:28px;height:28px;animation:none}

/* The expanded tour uses the same corners and type hierarchy. */
body.homepage-red-wordmark :is(.hiw-panel,.hiw-rfd,.lp-trust-card,.rv-card,.lpb,.vg-card,.live-proof-video){border-radius:var(--home-radius);box-shadow:var(--home-shadow)}
body.homepage-red-wordmark #how-it-works{background:var(--bg)}
body.homepage-red-wordmark #how-it-works .hiw-motion{font-family:var(--font-deck);font-weight:700;letter-spacing:-.01em}
body.homepage-red-wordmark #reviews{background:var(--bg)}
body.homepage-red-wordmark #reviews .rv-card,
body.homepage-red-wordmark #reviews .rv-card:first-child{
  border-radius:var(--home-corner);background:var(--bg);box-shadow:none;border-color:var(--home-rule);
}
body.homepage-red-wordmark #reviews .rv-card::before{display:none}
body.homepage-red-wordmark #live-proof :is(.lp-trust-card,.lpb){border-radius:var(--home-corner);box-shadow:none}
body.homepage-red-wordmark :is(.hiw-nav,.vg-x){border-radius:var(--home-corner);box-shadow:none}
body.homepage-red-wordmark :is(.hiw-card-title,.sec-title,.live-proof-title){font-weight:500;letter-spacing:-.035em}
body.homepage-red-wordmark :is(.rv-card blockquote,.lpb-rfd p){font-family:var(--font-judge);font-weight:400}
body.homepage-red-wordmark #faq .faq-toggle{border-radius:0;background:transparent}
body.homepage-red-wordmark #faq .faq-stack-a{font-family:var(--font-body);font-size:16px;line-height:1.7}
body.homepage-red-wordmark .footer{border-top:1px solid var(--home-rule);background:var(--bg)}
body.homepage-red-wordmark :is(.lpull,.lpull-cta){border-radius:var(--home-corner)}
body.homepage-red-wordmark .lpull{font-family:var(--font-body);box-shadow:0 6px 20px #0002}

@media(min-width:941px){
  /* 2026-10-23, the founder off a laptop screenshot: "close this spacing a
     bit". The bar is 52px; the top padding clears it by 16 to 28px instead
     of 32 to 48px. The 10-11 centring below stays: on a tall window the
     board still sits in the middle, on a laptop where the board is taller
     than the window this padding is what sets the gap. */
  body.homepage-red-wordmark #first-screen{padding-top:clamp(68px,8vh,80px)}
  /* 2026-10-11, the founder off a screenshot of the signed-in home: "push
     this down to the middle on the left so you can't see a peep of the
     leaderboard". home-simple.css had zeroed the section's min-height, so
     at 860px tall the leaderboard title started at 843px. The first screen
     fills the viewport again and the board centres in its column instead
     of hugging the top; the sign-in bar keeps its own row under it. */
  /* 2026-10-23, the founder twice ("close this spacing a bit", then "fix
     the spacing between this" off a screenshot with the board a screen's
     worth below the bar): the board starts under the bar. min-height still
     fills the viewport, so the leaderboard stays below the fold. */
  /* 2026-10-24, the founder off a screenshot of a tall monitor ("fix the
     spacing here too"): a full 100svh floor left a screen's worth of
     black between the record note and the leaderboard. Capped at 900px:
     a laptop still keeps the leaderboard below the fold, a tall window
     stops at the content plus the band's own margin. */
  /* 2026-10-28, the founder a third time ("fix the spacing here as
     well"): even the 900px floor left ~250px of empty page under the
     record note on a laptop. No floor: the first screen is its content,
     and the leaderboard follows at the band's own margin. */
  body.homepage-red-wordmark #first-screen{min-height:0;align-items:flex-start}
  body.homepage-red-wordmark #first-screen .fscreen-wrap{grid-template-rows:1fr auto}
  body.homepage-red-wordmark #first-screen .fscreen-wrap > .fs-board-wrap,
  body.signed-in.homepage-red-wordmark #first-screen .fscreen-wrap > .fs-board-wrap{grid-row:1;align-self:center}
  /* The live band already clears the fixed navigation. */
  body.homepage-red-wordmark #homeLiveBand + #first-screen{padding-top:clamp(28px,4vh,44px)}
  body.homepage-red-wordmark #first-screen #fsBoard{padding-top:12px}
}
@media(min-width:1360px){
  body.homepage-red-wordmark #first-screen .fs-live-line{min-height:44px}
  body.homepage-red-wordmark #first-screen .fs-rightcol{transform:none;margin-top:0}
}
@media(max-width:720px){
  body.homepage-red-wordmark .da-tabbar{box-shadow:none}
  body.homepage-red-wordmark .da-tab--primary .da-tab-ic{width:32px;height:32px;margin-top:0;border-radius:var(--home-corner);box-shadow:none}
  body.homepage-red-wordmark .da-tab--primary .da-tab-ic svg{width:22px;height:22px}
  /* 2026-10-11, the founder off a phone screenshot: "make match with
     someone smaller so it fits into one line and allows space for the
     graph below to be visible". Was a 114px two-line block with the
     waveform under it; now one line with the arrow, no waveform. */
  body.homepage-red-wordmark .mh-primary{min-height:0;padding:15px 18px;background:#d92323}
  body.homepage-red-wordmark .mh-primary::after{display:none}
  body.homepage-red-wordmark .mh-primary-top{gap:10px}
  body.homepage-red-wordmark .mh-primary-label{font-size:clamp(20px,6.2vw,26px);font-weight:600;letter-spacing:-.03em;white-space:nowrap;line-height:1.1}
  body.homepage-red-wordmark .mh-primary .mh-arrow{width:30px;height:30px}
  body.homepage-red-wordmark .mh-primary-meta{display:none}
  body.homepage-red-wordmark :is(.mh-arrow,.mh-card-arrow){background:none;border-radius:0}
  body.homepage-red-wordmark .mh-primary-meta{font-size:11px;font-weight:500}
  body.homepage-red-wordmark .mh-card{min-height:76px;gap:8px;padding:16px 18px;border-color:var(--home-rule);background:var(--bg)}
  body.homepage-red-wordmark .mh-card-label{font-size:20px;font-weight:500}
  body.homepage-red-wordmark [data-cta="mhome-ai"] .mh-card-label{font-size:24px;font-weight:600}
  /* 2026-10-29, the founder off a phone screenshot: "make the sign in
     button circular rectangular and just better". A pill on a white
     fill so it reads as a real button under the red primary without
     competing with it; the reason line centers under it. */
  body.homepage-red-wordmark .mh-signin-btn{min-height:50px;font-size:15px;font-weight:600;letter-spacing:-.01em;
    border-radius:999px;background:var(--mh-card);color:var(--text);border-color:var(--home-rule)}
  body.homepage-red-wordmark #mhome #fsBoard{padding-bottom:4px}
  body.homepage-red-wordmark #mhome #fsBoard h2.fs-motion{font-size:clamp(20px,5.2vw,26px);min-height:0;line-height:1.2;margin-bottom:6px}
  body.homepage-red-wordmark #mhome #fsBoard .fs-ballot{min-height:24px;padding-top:3px}
  body.homepage-red-wordmark #mhome .mh-row{margin-top:8px}
  body.homepage-red-wordmark #mhome #fsBoard .fs-ballot-top b{font-weight:600;letter-spacing:-.025em}
  body.homepage-red-wordmark #ranked-band .rb-stage{padding:0}
  body.homepage-red-wordmark #ranked-band .rb-row{padding:10px 8px}
}

body.homepage-red-wordmark .footer-row{gap:24px;flex-wrap:wrap}
body.homepage-red-wordmark .footer-links{display:flex;flex-wrap:wrap;gap:12px 20px;justify-content:center}
body.homepage-red-wordmark .footer-more{margin-top:20px}
body.homepage-red-wordmark .footer-more > summary{cursor:pointer;padding:12px 0}
body.homepage-red-wordmark .footer-product-links{display:flex;flex-wrap:wrap;gap:14px 22px;justify-content:center;padding:20px 0}
body.homepage-red-wordmark :is(.footer-links a,.footer-product-links a){padding:4px 0}
body.homepage-red-wordmark :is(.footer a,.footer summary):focus-visible{outline:2px solid var(--accent);outline-offset:5px}