/* Desktop keeps the first screen at 90% of its previous width, matching the requested zoomed-out view. Mobile moves the board into #mhome. */ @media(min-width:941px){ #first-screen{align-items:flex-start;padding-top:124px;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; 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. */ #first-screen #fsBoard .fs-actions{grid-column:1 / -1;grid-row:4;position:relative;z-index:4;margin:clamp(18px,3vh,32px) 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 b{font-weight:700;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:5;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:5;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:108px} #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. */ .landing-more-shell[data-home-board-only] > :not(#ranked-band){display:none !important} .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 home shows the board's main market only; the more-rounds list is a wide-screen composition. */ #mhome .fs-board .fs-more{display:none}