/* Desktop keeps the first screen at 90% of its previous width, matching
   the requested zoomed-out view. Mobile moves the board into #mhome.
   2026-10-23, the founder off a screenshot: "close this spacing a bit".
   The top padding clears the 52px fixed bar by 36px (was 72px). */
@media(min-width:941px){
  #first-screen{align-items:flex-start;padding-top:88px;padding-left:clamp(28px,7vw,120px);padding-right:clamp(28px,4vw,64px)}
  #first-screen .fscreen-wrap{width:90%;max-width:1332px;grid-template-columns:minmax(0,1fr);gap:18px;transform:none}
  #first-screen .fscreen-wrap > .fs-board-wrap,
  body.signed-in #first-screen .fscreen-wrap > .fs-board-wrap{grid-row:1;align-self:start}
  #first-screen:not(.has-live) #fsBoard{display:grid}
  /* 2026-10-12, the founder: one fixed pair, the resolution ABOVE the
     photos, and the market "when you scroll below". The board is one
     column: resolution, then the two tiles sized to fill the first screen,
     then the market under the fold. Was a 1.5fr/1fr grid with the market
     beside the tiles and the resolution under them. */
  /* 2026-10-12 (late), the founder: the market "large across whole screen"
     with the other debates "on the bottom right ... like youtube options".
     Two columns: the first four rows span both; row five is the market on
     the left and the more-rounds list on the right. */
  #first-screen #fsBoard{grid-template-columns:minmax(0,2fr) minmax(300px,1fr);grid-template-rows:auto auto auto auto auto auto;
    column-gap:clamp(24px,2.6vw,44px);padding:clamp(20px,2vw,32px);border-radius:24px}
  #first-screen #fsBoard .fs-title{grid-column:1 / -1;grid-row:1;text-align:center}
  /* 2026-10-12 (afternoon): one line, never two. The box is the full board
     width, nowrap, and example-board.js steps the size down until the
     sentence fits. The swap fade (.fs-fade) is the opacity transition. */
  #first-screen #fsBoard h2.fs-motion,
  body.homepage-red-wordmark #first-screen #fsBoard h2.fs-motion{grid-column:1 / -1;grid-row:2;margin:0 0 clamp(14px,2vh,24px);
    max-width:none;width:100%;text-align:center;white-space:nowrap;overflow:hidden;
    font-size:clamp(1.45rem,2.34vw,2.34rem);height:auto;min-height:0;line-height:1.15}
  /* Tiles fill what is left of the first screen under the resolution and
     centre in it, keeping their own aspect so neither face is cropped. */
  /* "make it a bit smaller": the tiles cap at 1100px and no longer stretch
     the first screen to the fold. */
  /* 2026-10-12 (evening), the founder: "make this larger across the entire
     page". The tiles run the full board width again. */
  #first-screen #fsBoard .fs-stage{grid-column:1 / -1;grid-row:3;gap:clamp(16px,1.6vw,24px);margin:0 auto;width:100%;max-width:none;
    min-height:0;align-content:start;align-items:start}
  /* 2026-10-12: the three doors sit between the tiles and the market. */
  /* 2026-10-18, the founder's answer to the brand brief, verbatim: "put your
     money where your mouth is". The dare is the first screen's one visible
     line. It takes row 4 of the board, over the door, and pushes the action
     row to 5 and the ballot and market to 6. Explicit colour: the landing
     dims every <p> further down the cascade. */
  #first-screen #fsBoard .fs-dare{grid-column:1 / -1;grid-row:4;position:relative;z-index:4;width:100%;margin:clamp(20px,3vh,34px) 0 0;
    font-family:var(--font-display);font-weight:900;font-size:clamp(28px,2.7vw,42px);line-height:1.04;letter-spacing:-.02em;
    text-align:left;color:#f5efe7}
  [data-theme="light"] #first-screen #fsBoard .fs-dare{color:#0f0f12}
  #first-screen #fsBoard .fs-dare-sub{display:block;margin-top:8px;font-weight:500;font-size:clamp(1rem,1.15vw,1.2rem);line-height:1.4;letter-spacing:0;color:rgba(245,239,231,.78)}
  [data-theme="light"] #first-screen #fsBoard .fs-dare-sub{color:rgba(26,26,31,.7)}
  #first-screen #fsBoard .fs-actions{grid-column:1 / -1;grid-row: 5;position:relative;z-index:4;margin:clamp(12px,2vh,20px) auto 0;
    width:100%;max-width:none;flex-direction:row;align-items:center;flex-wrap:wrap;gap:14px 14px}
  /* Two pills on the left: Meet your match (solid) and Watch (outlined),
     the same height. "make the buttons circular actually - like
     rectangular" = fully rounded ends. The note takes its own line. */
  #first-screen .fs-actions .fs-cta--primary,
  #first-screen .fs-actions .fs-cta--predict,
  #first-screen .fs-actions .fs-cta--ai,
  #first-screen .fs-actions .fs-cta--watch-debates{width:auto;min-height:58px;padding:10px 18px;font-size:clamp(1.25rem,1.8vw,1.8rem);line-height:1.15}
  /* 2026-10-14: a fourth pill (Debate AI) joined the row. Padding 26 -> 18,
     gap 18 -> 14 and the font floor 1.35rem -> 1.25rem (the floor is what
     wins at 1440) so the four doors plus How it works and Discord still
     share one line from 1440px up. */
  body.homepage-red-wordmark #first-screen .fs-actions .fs-cta--primary,
  body.homepage-red-wordmark #first-screen .fs-actions .fs-cta--predict,
  body.homepage-red-wordmark #first-screen .fs-actions .fs-cta--ai,
  body.homepage-red-wordmark #first-screen .fs-actions .fs-cta--watch-debates{border-radius:999px}
  #first-screen .fs-actions :is(.fs-cta--watch-debates,.fs-cta--predict,.fs-cta--ai){background:transparent;border:2px solid #dc2626;color:#dc2626}
  #first-screen .fs-actions :is(.fs-cta--watch-debates,.fs-cta--predict,.fs-cta--ai):hover{background:rgba(220,38,38,.08);border-color:#b91c1c;color:#b91c1c}
  :root:not([data-theme="light"]) #first-screen .fs-actions :is(.fs-cta--watch-debates,.fs-cta--predict,.fs-cta--ai){border-color:#f05252;color:#f5efe7}
  :root:not([data-theme="light"]) #first-screen .fs-actions :is(.fs-cta--watch-debates,.fs-cta--predict,.fs-cta--ai):hover{background:rgba(240,82,82,.12);border-color:#f87171;color:#fff}
  /* How it works + Discord ride the same row, pushed to the right edge. */
  #first-screen .fs-actions .fs-what{margin-left:auto;flex-wrap:nowrap;gap:12px}
  #first-screen .fs-actions .fs-what-btn{min-height:48px;padding:10px 18px;font-size:1.05rem}
  #first-screen .fs-actions .fs-chats-discord{margin-left:0;min-height:48px}
  /* The hover card was width:min(340px,100%) of .fs-what, and in this row
     .fs-what is only as wide as its two buttons, so the three steps wrapped
     one word per line (2026-10-12, the founder: "widen this"). Sized to the
     viewport instead, anchored to the row's right edge. */
  #first-screen .fs-actions .fs-what-pop{left:auto;right:0;width:min(440px,calc(100vw - 32px))}
  #first-screen .fs-actions .fs-what-list li{font-size:1.02rem;line-height:1.45}
  /* The right column now holds only the hidden chat rail. */
  #first-screen .fs-rightcol{display:none}
  #first-screen .fs-record-note{flex:1 0 100%;margin:0;font-size:1rem;line-height:1.45;color:rgba(245,239,231,.8)}
  [data-theme="light"] #first-screen .fs-record-note{color:rgba(26,26,31,.72)}
  #first-screen .fs-record-note{font-style:italic}
  #first-screen .fs-record-note b{font-weight:900;font-style:normal;letter-spacing:-.01em;color:inherit}
  /* 2026-10-14, the founder: the pill is red again, the money word is the green. */
  #first-screen .fs-record-note .fs-money{color:#22c55e;font-weight:700}
  [data-theme="light"] #first-screen .fs-record-note .fs-money{color:#16a34a}
  #first-screen .fs-record-note a{color:#dc2626;font-weight:700;text-decoration:none}
  #first-screen .fs-record-note a:hover{text-decoration:underline;text-underline-offset:3px}
  #first-screen #fsBoard .fs-ballot{grid-column:1;grid-row: 6;display:flex;flex-direction:column;justify-content:flex-start;
    height:auto;min-height:0;margin-top:clamp(28px,4vh,48px);padding:clamp(20px,2.4vh,32px) 0 0;border-left:0;border-top:1px solid rgba(245,239,231,.16);text-align:left;overflow:visible}
  [data-theme="light"] #first-screen #fsBoard .fs-ballot{border-top-color:rgba(26,26,31,.12)}
  #first-screen #fsBoard .fs-pm{max-width:none}
  #first-screen #fsBoard .fs-pm-chart{height:clamp(200px,22vw,300px)}
  #first-screen #fsBoard .fs-pm-q{font-size:clamp(1.5rem,2vw,2rem)}
  #first-screen #fsBoard .fs-pm-price b{font-size:clamp(2.2rem,3vw,3rem)}
  /* More rounds: a list to the right of the market, one row per other card. */
  #first-screen #fsBoard .fs-more{grid-column:2;grid-row: 6;position:relative;z-index:4;display:flex;flex-direction:column;gap:12px;
    margin-top:clamp(28px,4vh,48px);padding-top:clamp(20px,2.4vh,32px);border-top:1px solid rgba(245,239,231,.16)}
  [data-theme="light"] #first-screen #fsBoard .fs-more{border-top-color:rgba(26,26,31,.12)}
  #first-screen #fsBoard .fs-more[hidden]{display:none}
  .fs-more-card{appearance:none;display:grid;grid-template-columns:132px minmax(0,1fr);gap:12px;align-items:center;width:100%;
    padding:8px;border:1px solid rgba(26,26,31,.1);border-radius:12px;background:rgba(255,255,255,.55);cursor:pointer;text-align:left;font:inherit;color:#1a1a1f}
  .fs-more-card:hover{border-color:rgba(26,26,31,.3);background:#fff}
  .fs-more-card:focus-visible{outline:2px solid #dc2626;outline-offset:2px}
  :root:not([data-theme="light"]) .fs-more-card{border-color:rgba(245,239,231,.16);background:rgba(255,255,255,.05);color:#f5efe7}
  :root:not([data-theme="light"]) .fs-more-card:hover{border-color:rgba(245,239,231,.4);background:rgba(255,255,255,.09)}
  .fs-more-faces{display:grid;grid-template-columns:1fr 1fr;gap:3px}
  .fs-more-faces img{display:block;width:100%;aspect-ratio:16/11;object-fit:cover;border-radius:6px;background:#000}
  .fs-more-body{display:flex;flex-direction:column;gap:5px;min-width:0}
  .fs-more-motion{display:block;font-family:var(--font-deck);font-weight:700;font-size:.98rem;line-height:1.2;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fs-more-names{display:flex;gap:10px;font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums}
  .fs-more-names i{font-style:normal}
  .fs-more-names .is-a{color:#16a34a} .fs-more-names .is-b{color:#dc2626}
  :root:not([data-theme="light"]) .fs-more-names .is-a{color:#4ade80}
  :root:not([data-theme="light"]) .fs-more-names .is-b{color:#f87171}
  .fs-more-spark{display:block;width:100%;height:34px;overflow:visible}
  .fs-more-spark .fs-pm-grid{stroke:rgba(26,26,31,.14);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:3 3}
  :root:not([data-theme="light"]) .fs-more-spark .fs-pm-grid{stroke:rgba(245,239,231,.18)}
  .fs-more-spark .fs-pm-line{stroke-width:1.6}
  .fs-more-spark .fs-pm-line.is-a{stroke:#16a34a} .fs-more-spark .fs-pm-line.is-b{stroke:#dc2626}
  :root:not([data-theme="light"]) .fs-more-spark .fs-pm-line.is-a{stroke:#4ade80}
  :root:not([data-theme="light"]) .fs-more-spark .fs-pm-line.is-b{stroke:#f87171}
  #first-screen #fsBoard .fs-ballot-wait{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,8px) minmax(0,1fr);justify-content:center;gap:18px 8px;
    font-size:clamp(1.3rem,1.8vw,1.8rem);letter-spacing:0;text-transform:none;line-height:1.3;color:inherit}
  #first-screen #fsBoard .fs-wait-copy{grid-column:1 / -1;justify-self:center;width:100%;max-width:280px;font-weight:600}
  #first-screen #fsBoard .fs-ballot-wait .fs-wait-label{display:block;grid-column:1 / -1;justify-self:center;
    width:max-content;height:auto;background:none;border-radius:0;animation:none;font-size:.75rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;opacity:.6}
  #first-screen #fsBoard .fs-ballot-wait .d1,
  #first-screen #fsBoard .fs-ballot-wait .d2,
  #first-screen #fsBoard .fs-ballot-wait .d3{width:8px;height:8px}
  #first-screen #fsBoard .fs-ballot-wait .d1{grid-column:2}
  #first-screen #fsBoard .fs-ballot-wait .fs-seat-cta{grid-column:1 / -1;justify-self:center;margin-top:4px;font-size:.9rem;padding:12px 20px}
  #first-screen #fsBoard .fs-ballot-wait .d2{grid-column:3}
  #first-screen #fsBoard .fs-ballot-wait .d3{grid-column:4}
  #first-screen #fsBoard .fs-ballot.is-in .fs-ballot-wait{display:none}
  #first-screen #fsBoard .fs-ballot-k{font-size:.75rem;margin-bottom:18px}
  #first-screen #fsBoard .fs-ballot-top{flex-direction:column;align-items:center;gap:16px}
  #first-screen #fsBoard .fs-ballot-top b{font-size:clamp(1.4rem,2vw,2rem);line-height:1.2;text-transform:none;letter-spacing:0}
  #first-screen #fsBoard .fs-ballot-top span{margin-left:0;font-size:clamp(.8rem,1vw,1rem);line-height:1.7}
  #first-screen #fsBoard .fs-nav--next{right:var(--fs-nav-right,6px)}
  #first-screen .fs-actions{margin-top:18px;gap:14px}
  body.homepage-red-wordmark #first-screen .fs-actions .fs-cta--primary{min-height:64px;padding:12px 22px;font-size:clamp(1.35rem,2.07vw,1.8rem)}
  #first-screen .fs-actions-row .fs-cta{min-height:58px;padding:12px 18px;font-size:clamp(1.15rem,1.4vw,1.45rem)}
  #first-screen .fs-signin--side{justify-content:flex-start;margin-top:0}
}
@media(min-width:941px) and (max-height:820px){
  #first-screen{padding-top:80px}
  #first-screen #fsBoard .fs-tile{aspect-ratio:16/9}
}
@media(min-width:1360px){
  #first-screen{padding-left:clamp(28px,4vw,64px)}
  /* Keep the tall chat column's spare height below sign-in, not between the actions. */
  /* 2026-10-11, the founder off a screenshot of the Highlights column: "make
     this skinnier and on the right to make more space on the general 2/3
     left side". Was clamp(230px,17vw,280px) with a 28-40px gap and a 20px
     push; the column is narrower, the gap tighter, the push to the edge
     larger. */
  /* 2026-10-12, the founder, pointing at the How it works + Discord row:
     "have this also below so the front thing takes up the whole screen".
     One column at every desktop width; the row sits under the board, above
     the actions, so the first screen is the resolution and the two tiles. */
  #first-screen .fscreen-wrap{width:90%;max-width:1332px;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto;column-gap:0}
  /* 2026-10-12: the chat column lines up with the market and the actions
     under the fold (align-self:end), instead of running the full height of
     the first screen beside the tiles. */
  /* 2026-10-12 (same day, after the mentor session): the chat rail is
     hidden, so the column holds only How it works + Discord and sits at the
     top right, level with the resolution. */
  #first-screen .fs-chats{flex:0 1 auto;height:auto;max-height:none;min-height:400px}
  #first-screen .fs-chats[hidden]{display:none}
  #first-screen .fs-chats-discord{padding:11px 15px;font-size:.94rem;gap:7px}
  #first-screen .fs-chats-discord svg{width:20px;height:20px}
  #first-screen .fs-chats-msg{font-size:.84rem;line-height:1.5}
  #first-screen .fs-chats-group{gap:14px;padding-bottom:14px}
}
.fs-wait-label{display:none}
.fs-wait-copy{font:inherit}

/* Example market placement on the wide board (2026-10-11). The component
   itself is css/landing/example-market.css; the phone placement is in
   mobile-home.css. */
@media(min-width:941px){
  #first-screen #fsBoard.has-pm .fs-ballot-wait,
  #first-screen #fsBoard.has-pm .fs-ballot-card,
  #first-screen #fsBoard.has-pm .fs-ballot.is-in .fs-ballot-card{display:none}
  /* Same reserve on the cards without a market, so the board holds its
     height as the rotator passes an open challenge. */
  #first-screen #fsBoard .fs-ballot{min-height:calc(176px + clamp(112px,10vw,140px))}
  #first-screen #fsBoard.has-pm .fs-ballot{justify-content:flex-start;text-align:left;padding-top:clamp(20px,2.4vh,32px);padding-bottom:4px}
  #first-screen #fsBoard.has-pm .fs-pm{display:flex}
}

/* 2026-10-12: home is the first screen only (debates, the market, the AI
   door). The tour shell and the leaderboard band carry [hidden] in the
   markup; this beats the display rules their own sheets set. */
.landing-more-shell[hidden],#ranked-band[hidden]{display:none !important}
/* 2026-10-12 (late): the shell is back on the page for the one child the
   founder asked for, the leaderboard band; the tour button, waitlist row
   and the rest stay off. */
/* 2026-10-29: the longer page's sections (.lx) show with the board. */
.landing-more-shell[data-home-board-only] > :not(#ranked-band):not(.lx):not(script){display:none !important}
/* 2026-11-07 (Aidan): "make the load more button go away and have it just
   have the pages load in normally". The 2026-11-01 Learn more gate is
   retired: the board and the .lx sections render under the first screen
   for everyone, no button. */
.landing-more-shell[data-home-board-only]{padding:0;margin:0;background:none;border:0;box-shadow:none}

/* 2026-10-12: the How it works + Discord row lives under the board at every
   desktop width (it used to be a right-hand column from 1360px up and
   absent below that). Board row 1, this row 2, actions row 3, sign-in row 4. */
@media(min-width:941px){
  #first-screen .fscreen-wrap > .fs-board-wrap,
  body.signed-in #first-screen .fscreen-wrap > .fs-board-wrap{grid-column:1;grid-row:1}
  /* 2026-10-12 (late): How it works + Discord moved into the button row, so
     this column holds only the hidden chat rail and renders nothing. */
  #first-screen .fs-rightcol{display:none}
  #first-screen .fs-rightcol .fs-what{width:100%;justify-content:flex-start;gap:14px}
  #first-screen .fs-rightcol .fs-chats-discord{margin-left:0}
  #first-screen .fscreen-wrap > .fs-actions{grid-column:1;grid-row:3;margin-top:4px}
  #first-screen .fscreen-wrap > .fs-signin--side{grid-column:1;grid-row:4}
}

/* The phone home has its own doors (mh-primary, mh-card); the board's
   doors stay out of #mhome. */
#mhome .fs-board .fs-actions{display:none}
/* The phone has its own dare over its own door (.mh-dare); the desktop line
   rides the moved board and must not print under the tiles. */
#mhome .fs-board .fs-dare{display:none}

/* The phone home shows the board's main market only; the more-rounds list
   is a wide-screen composition. */
#mhome .fs-board .fs-more{display:none}

/* 2026-10-18, the founder off a tall-window screenshot: "fix this
   spacing". The six round cards on the right ran taller than the market
   on the left, so the market sat over a 200px hole, and the sign-in row
   and the leaderboard each kept a generous gap of their own. The market
   now fills its column (the chart takes the slack; it is drawn from its
   own clientHeight on every tick, so it scales), and the two gaps under
   the board are trimmed. Desktop only; the phone home is its own layout. */
@media(min-width:941px){
  /* Same evening, the founder off the 13-pair board: "a list of like
     just 5 and the graph is not so tall". The chart keeps its own height
     and the side list shows five cards; the deck still rotates through
     every pair, five at a time. */
  #first-screen #fsBoard .fs-ballot.is-in{display:flex;flex-direction:column}
  #first-screen #fsBoard.has-pm .fs-pm{flex:1 1 auto;display:flex;flex-direction:column}
  #first-screen #fsBoard .fs-pm-chart{flex:1 1 auto;height:auto;min-height:clamp(200px,22vw,300px);max-height:380px}
  #first-screen #fsBoard .fs-more{align-self:start}
  #first-screen #fsBoard .fs-more .fs-more-card:nth-child(n+6){display:none}
  /* 2026-10-19, the founder off a screenshot of this row ("get rid of
     this", then "and the stuff on right side"): with the market off, the
     row under the board was a Decision block with a lot of empty space and
     a list of five other rounds beside it. Both come off the desktop board.
     The markup and example-board.js stay; delete these two lines to restore. */
  #first-screen #fsBoard .fs-ballot,
  #first-screen #fsBoard .fs-more{display:none !important}
  /* The sign-in row sat in grid row 4 behind two empty rows (the retired
     globe and headline), so three row-gaps stacked between the board and
     it. Put it in row 2, directly under the board. */
  #first-screen .fscreen-wrap{row-gap:12px}
  #first-screen .fscreen-wrap > .fs-signin--side{grid-row:2}
  /* 2026-10-19, the founder off a screenshot: "position better". The row
     sat on the wrap's edge, 28px left of the doors above it (those sit
     inside the board's padding), and 40px below the record note. It now
     takes the board's side padding so it shares the doors' left edge, and
     tucks up to sit just under the note. */
  #first-screen .fscreen-wrap > .fs-signin--side{padding-left:clamp(20px,2vw,32px);margin-top:-22px}
  #first-screen.fscreen,#first-screen{padding-bottom:16px}
  body #ranked-band.ranked-band{margin-top:18px}
}

/* 2026-11-02, the founder off a screenshot of the opened page: "space this
   out a bit better". Once Learn more is open, the leaderboard sat 18px under
   the record note, the two feature rows ran into each other, and the last
   one ran into the footer. Each section now gets real room around it.
   Phones are untouched (mobile-home.css hides this shell there). */
@media (min-width:721px){
  #ranked-band.ranked-band{margin-top:clamp(64px,8vw,112px)}
  .landing-more-shell > .lx{padding-top:clamp(88px,10vw,144px)}
  .landing-more-shell > #lx-vote{padding-bottom:clamp(88px,10vw,144px)}
  #ranked-band .rb-globe{gap:14px}
}