/* 2026-07-06: simplified first screen. Three clear doors: live people, the AI orb, and student ambassadorships. */ @media(min-width:900px){.hero-illustrated{zoom:.97;max-width:1500px}} /* 2026-07-07: three cards rebuilt as ONE uniform selector so the choice is obvious. Identical skeleton per card: equal-height visual band -> kind label -> title -> one line -> chips -> full-width CTA on a shared baseline. Left-aligned across all three (the AI card no longer centers), DOM order carries the layout (live -> AI -> ambassadors), so no order overrides. */ .hero-illustrated .hi-choose{display:block;text-align:center;font-size:.82rem;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:var(--hi-ink-soft,#7a6f66);margin:36px auto 4px} /* 2026-07-18: site slogan eyebrow above the rotating H1. Same small-caps register as .hi-choose but brand red + rule marks so it reads as the slogan, not another nav label. */ /* Gap scales with the headline. A flat 10px under a ~68px display face glued the eyebrow to it; this keeps the label reading as a separate tier at every width. */ /* 2026-07-22: sized as a heading, not an eyebrow. It became the

when "Take a side. / Speak live. Get judged." was cut, but kept its .76rem caption size, so the page's top-level heading rendered SMALLER (15.2px) than the paragraph under it (20px) — inverted hierarchy, and it read as a label stranded under the topbar. Now clamps to 24px at desktop, above the 20px subhead. Tracking drops .26em -> .14em because letter-spacing tuned for a 15px caption stretches badly at 24px. Size and rule marks are viewport-relative so the line never outgrows a phone: at .85rem with short rules it still fits inside 390px. Margin-bottom tightens 19px -> ~12px so the slogan and subhead group as one block, sitting closer to each other than to the cards. */ /* 2026-07-22 (third pass): money glyphs cut, so the slogan carries the hero alone — sized up to a real display line (~38px at desktop, still one line at 390px). Tracking eases as size grows; rule marks scale with it. */ .hero-illustrated .hi-slogan{display:flex;align-items:center;justify-content:center;gap:clamp(12px,1.6vw,22px);margin:0 0 clamp(8px,.9vw,12px);font-size:clamp(1.3rem,3.3vw,2.4rem);font-weight:900;letter-spacing:.1em;line-height:1.08;text-transform:uppercase;color:var(--hi-red,#b91c1c)} .hero-illustrated .hi-slogan::before,.hero-illustrated .hi-slogan::after{content:"";width:clamp(26px,4.2vw,62px);height:1px;flex:none;background:currentColor;opacity:.45} .hero-illustrated .hi-triptych{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;width:100%;max-width:1260px;margin:14px auto 0;align-items:stretch} /* 2026-07-07: let the unified doors break out of the hero's inner column without swallowing the first screen. Desktop only; mobile keeps the stacked single column. */ @media(min-width:981px){.hero-illustrated .hi-doors--unified{width:min(1260px,calc(100vw - 72px));max-width:none}} .hero-illustrated .hi-path-card{position:relative;display:flex;width:100%;min-width:0;box-sizing:border-box;height:100%;min-height:448px;flex-direction:column;justify-content:flex-start;gap:13px;padding:20px;border-radius:20px;text-align:left;text-decoration:none;color:var(--hi-chip-ink);background:linear-gradient(180deg,rgba(255,254,250,.97),rgba(255,250,243,.93));border:1px solid rgba(29,25,21,.1);box-shadow:0 22px 58px rgba(29,25,21,.11),inset 0 1px 0 rgba(255,255,255,.65);overflow:hidden;transition:transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s ease,box-shadow .2s ease} .hero-illustrated .hi-triptych .hi-path-card{--hi-ink:#1a1a1f;--hi-ink-soft:#5f5650;--hi-chip-ink:#1a1a1f} .hero-illustrated .hi-path-card:hover{transform:translateY(-6px);border-color:rgba(200,50,50,.5);box-shadow:0 34px 78px rgba(29,25,21,.18),inset 0 1px 0 rgba(255,255,255,.7)} .hero-illustrated .hi-path-card:focus-visible{outline:3px solid rgba(200,50,50,.6);outline-offset:3px} .hero-illustrated .hi-path-visual{position:relative;width:100%;height:176px;min-height:0;border-radius:14px;overflow:hidden;flex:0 0 auto} .hero-illustrated .hi-path-eyebrow{display:flex;align-items:center;gap:8px;font-size:.68rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--hi-red)} .hero-illustrated .hi-path-eyebrow i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.9} .hero-illustrated .hi-path-card h2{font-family:var(--font-display);font-size:clamp(1.48rem,1.86vw,1.96rem);line-height:1.03;letter-spacing:-.02em;color:var(--hi-ink);margin:0;text-transform:none} .hero-illustrated .hi-path-copy{font-size:.92rem;line-height:1.45;color:var(--hi-ink-soft);margin:0} .hero-illustrated .hi-path-foot{margin-top:auto;display:flex;flex-direction:column;gap:12px;padding-top:8px} .hero-illustrated .hi-path-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;box-sizing:border-box;padding:13px 16px;border-radius:12px;background:var(--hi-red);color:#fff;font-size:.86rem;font-weight:800;letter-spacing:.01em;box-shadow:0 11px 26px rgba(200,50,50,.26)} .hero-illustrated .hi-path-card:hover .hi-path-cta{box-shadow:0 14px 34px rgba(200,50,50,.36)} .hero-illustrated .hi-path-meta{display:flex;flex-wrap:wrap;gap:6px} .hero-illustrated .hi-path-meta span{font-size:.63rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--hi-ink-soft);border:1px solid rgba(29,25,21,.12);background:rgba(255,255,255,.5);border-radius:999px;padding:4px 9px} .hero-illustrated .hi-live-tiles{display:grid;width:100%;min-width:0;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:6px;height:100%;min-height:0;overflow:hidden} .hero-illustrated .hi-live-tiles img{display:block;width:100%;min-width:0;height:100%;min-height:0;object-fit:cover;border-radius:8px;filter:saturate(.95);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)} .hero-illustrated .hi-live-tiles img:first-child{grid-row:span 2} .hero-illustrated .hi-live-pill{position:absolute;z-index:2;top:10px;right:10px;display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border-radius:999px;background:rgba(255,253,247,.92);border:1px solid rgba(34,197,94,.4);color:#15803d;font-size:.6rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;box-shadow:0 4px 12px rgba(29,25,21,.14)} .hero-illustrated .hi-live-pill i{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 10px rgba(34,197,94,.8)} .hero-illustrated .hi-path-card--ai{border-color:rgba(200,50,50,.24)} .hero-illustrated .hi-path-visual--ai{display:grid;place-items:center;background:radial-gradient(circle at 50% 44%,rgba(239,68,68,.14),rgba(255,246,240,.5) 72%);border:1px solid rgba(200,50,50,.12)} .hero-illustrated .hi-ai-core{position:relative;width:154px;aspect-ratio:1;margin:0 auto;display:grid;place-items:center;isolation:isolate} .hero-illustrated .hi-ai-core::before{content:"";position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(circle,rgba(239,68,68,.20),transparent 58%);filter:blur(16px);opacity:.78} .hero-illustrated .hi-ai-ring{position:absolute;border-radius:50%;border:1px solid rgba(200,50,50,.26);box-shadow:0 0 0 1px rgba(255,255,255,.42) inset} .hero-illustrated .hi-ai-ring--outer{inset:4%;background:conic-gradient(from 150deg,transparent 0 16%,rgba(239,68,68,.62) 17% 23%,transparent 24% 54%,rgba(184,138,78,.28) 55% 61%,transparent 62%);animation:hiAiSpin 14s linear infinite} .hero-illustrated .hi-ai-ring--mid{inset:17%;border-style:dashed;border-color:rgba(200,50,50,.22);animation:hiAiSpin 18s linear infinite reverse} .hero-illustrated .hi-ai-disc{position:absolute;inset:28%;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(200,50,50,.22);background:radial-gradient(circle at 33% 25%,rgba(255,255,255,.98) 0 12%,rgba(255,255,255,.54) 13% 23%,transparent 24%),radial-gradient(circle at 66% 72%,rgba(239,68,68,.34),transparent 44%),linear-gradient(145deg,rgba(255,252,246,.98),rgba(255,231,222,.94) 55%,rgba(244,196,173,.88));box-shadow:inset 10px 12px 22px rgba(255,255,255,.62),inset -12px -14px 24px rgba(168,80,55,.20),0 18px 45px rgba(200,50,50,.14),0 0 38px rgba(239,68,68,.18)} .hero-illustrated .hi-ai-disc::after{content:"";position:absolute;inset:18%;border-radius:50%;border:1px solid rgba(200,50,50,.20);background:radial-gradient(circle,rgba(239,68,68,.32),rgba(239,68,68,.08) 44%,transparent 47%);animation:hiAiBeat 2.8s ease-in-out infinite} .hero-illustrated .hi-ai-bars{position:relative;z-index:2;display:flex;align-items:center;gap:3px;height:28px} .hero-illustrated .hi-ai-bars i{display:block;width:4px;height:12px;border-radius:999px;background:#b72a2a;box-shadow:0 0 12px rgba(239,68,68,.26);animation:hiAiWave 1.15s ease-in-out infinite} .hero-illustrated .hi-ai-bars i:nth-child(2){height:20px;animation-delay:-.18s} .hero-illustrated .hi-ai-bars i:nth-child(3){height:26px;background:#ef4444;animation-delay:-.34s} .hero-illustrated .hi-ai-bars i:nth-child(4){height:18px;animation-delay:-.5s} .hero-illustrated .hi-ai-bars i:nth-child(5){height:11px;animation-delay:-.66s} .hero-illustrated .hi-ai-node{position:absolute;width:9px;height:9px;border-radius:50%;background:#ef4444;box-shadow:0 0 18px rgba(239,68,68,.75);z-index:2} .hero-illustrated .hi-ai-node--one{top:14%;right:28%;animation:hiAiNode 3.4s ease-in-out infinite} .hero-illustrated .hi-ai-node--two{right:9%;bottom:34%;animation:hiAiNode 3.4s ease-in-out -.9s infinite} .hero-illustrated .hi-ai-node--three{left:18%;bottom:19%;background:#b7865b;box-shadow:0 0 14px rgba(183,134,91,.36);animation:hiAiNode 3.4s ease-in-out -1.8s infinite} .hero-illustrated .hi-ai-label{position:absolute;left:50%;bottom:2%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;background:rgba(255,253,247,.9);border:1px solid rgba(200,50,50,.18);color:#7f1d1d;font-size:.6rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;box-shadow:0 8px 20px rgba(200,50,50,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .hero-illustrated .hi-ai-label i{width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 10px rgba(34,197,94,.85)} @keyframes hiAiSpin{to{transform:rotate(360deg)}} @keyframes hiAiBeat{0%,100%{transform:scale(.88);opacity:.54}50%{transform:scale(1.08);opacity:1}} @keyframes hiAiWave{0%,100%{transform:scaleY(.55);opacity:.65}50%{transform:scaleY(1);opacity:1}} @keyframes hiAiNode{0%,100%{transform:scale(.78);opacity:.48}50%{transform:scale(1.08);opacity:1}} .hero-illustrated .hi-amb-photo{position:relative;width:100%;min-width:0;height:100%;min-height:0;overflow:hidden;background:#221a14} .hero-illustrated .hi-amb-photo img{width:100%;height:100%;min-height:0;object-fit:cover;display:block;filter:saturate(.92) contrast(.96)} .hero-illustrated .hi-amb-photo::after{content:"Founding class";position:absolute;left:10px;bottom:10px;padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.94);color:#a4201d;font-size:.62rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase} /* Put account value above the three product doors. Guest use stays open, while saved ballots and the style profile get a real pitch. */ /* The .hi-free-strip sign-in card ("Keep every ballot", Continue with Google) was removed 2026-08-12 at the founder's request, along with its base rules, its two band-row overrides, its 700px stack and its dark-theme block. Sign-in still reaches every visitor via the topbar, the post-2-generations nudge and the feature paywalls (soul.md section 4: advised, not required). */ /* 2026-08-24: with the three-card cluster removed (see the markup note below), this section's only visible content is gone and what is left is padding around nothing: a ~104px blank band between the first screen and #how-it-works. Collapsed here rather than by deleting
, which still carries the .hi-head arm, both ?doors= QA arms and two scripts that other code reaches for. The QA arms are keyed off html[data-doors-ab], not off having children (both arms carry markup at all times and are display:none), so the collapse is excluded on ?doors=unified and ?doors=classic and those debug views keep their padding. Putting any block back into this section means dropping this rule. */ :root[data-hero-ab="illustrated"]:not([data-doors-ab="unified"]):not([data-doors-ab="classic"]) section.hero{ padding-top:0 !important;padding-bottom:0 !important;min-height:0} /* The band row (2026-07-22, rewritten 2026-08-12). Was Ambassador + sign-in side by side. The ambassador card left for .hi-pair-row (2026-08-01) and the founder removed the sign-in strip (2026-08-12), so this row carries Open Spar Night alone. Column by default; the row rules below turn on at >=901px and now have a single card to place. */ /* 2026-08-01 (the founder): "Debate the AI" + the Ambassador Fund as a two-up row under the live card. Same rail as .hi-doors--livefirst above so the three cards line up on one left edge. Stacks below 901px, matching every other pair on this page. */ .hero-illustrated .hi-pair-row{ width:100%;max-width:min(1340px,calc(100vw - 96px)); margin:14px auto 0;display:grid;grid-template-columns:minmax(0,1fr); gap:14px;align-items:stretch; } @media(min-width:901px){ .hero-illustrated .hi-pair-row{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px} } /* Inside the pair the banner is a half-rail card, not a wide strip: drop its own centering/width and stack copy over the CTA so the button pins to the bottom and lines up with "Start a voice round" in the card beside it. Mirrors the .hi-band-row treatment. */ .hero-illustrated .hi-pair-row > .hi-ambassador-banner{ width:auto;max-width:none;margin:0; /* auto 1fr auto: copy takes what it needs, the PHOTO absorbs the leftover height so this card matches the taller one beside it, CTA pins to the bottom. Before the photo existed the copy row was the 1fr and the slack rendered as a large empty middle. */ grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto; align-items:start;gap:14px; } /* min-height, not aspect-ratio: the row is already sized by the grid, and an aspect-ratio here would fight it and reintroduce the gap at some widths. object-fit keeps the crop sane at whatever height the grid lands on. Scoped to the banner rather than to the pair row, so the photo still renders correctly if the card is ever placed somewhere else. */ .hero-illustrated .hi-ambassador-banner .hi-amb-shot{ position:relative;z-index:1;display:block;align-self:stretch; min-height:150px;border-radius:14px;overflow:hidden; border:1px solid rgba(200,50,50,.20); background:rgba(29,25,21,.06); } .hero-illustrated .hi-ambassador-banner .hi-amb-shot img{ width:100%;height:100%;object-fit:cover;display:block; /* Nudged toward the page's warm palette so a raw photo does not read as a foreign object dropped into the card. */ filter:saturate(.92) contrast(.98); } .hero-illustrated .hi-pair-row .hi-ambassador-cta{ width:100%;box-sizing:border-box;justify-content:center; white-space:normal;text-align:center; } /* grid-area:amb named the old doors grid; nothing names it here. */ .hero-illustrated .hi-pair-row > .hi-lf-amb{grid-area:auto;height:100%;min-height:0} @media(max-width:900px){ .hero-illustrated .hi-pair-row{max-width:560px} .hero-illustrated .hi-pair-row > .hi-ambassador-banner{width:100%} } @media(max-width:560px){ .hero-illustrated .hi-pair-row{max-width:100%;padding:0 14px;box-sizing:border-box} } .hero-illustrated .hi-band-row{display:flex;flex-direction:column;align-items:center} /* Spar-night banner rides the same rail as the two strips above so the three read as one cluster: same width, 14px gap, and the card's own centering/margins stand down inside the slot. */ .hero-illustrated .hi-spar-slot{width:min(1180px,100%);margin:6px auto 8px} .hero-illustrated .hi-spar-slot .sn-card--banner{max-width:none;margin:0} @media(min-width:901px){ .hero-illustrated .hi-band-row{ flex-direction:row;align-items:stretch;gap:14px; /* 2026-07-22: 1180 -> 1155 so this row RENDERS on the same 1120 rail as the livenow chips/stage below (they were ~25px apart per side, which read as misalignment, not hierarchy). .hero-illustrated carries zoom:.97, so layout 1155 x .97 = 1120 rendered; if that zoom ever goes, drop this to 1120. The wide door cards above stay as the deliberate dominant tier. */ width:min(1155px,100%);margin:18px auto 8px; } .hero-illustrated .hi-band-row > .hi-ambassador-banner{ flex:1 1 0;min-width:0;width:auto;max-width:none;margin:0; /* Stack copy over CTA. Side by side, each panel is ~580px and "Apply for the founding class" next to three lines of copy is too tight to read. grid-template-rows 1fr auto pins both CTAs to the bottom so they line up across the two panels regardless of copy length. */ grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto; align-items:start;gap:14px; } .hero-illustrated .hi-band-row .hi-ambassador-cta{ width:100%;box-sizing:border-box;justify-content:center; } /* Spar night joins the row (2026-07-22, second pass). Between 901 and 1079 it wraps onto its own line under the pair: three ~290px columns cannot hold "Every Wednesday at 8:00 PM ET" plus a countdown plus two buttons. wrap + width:100% is what makes that fall out for free. */ .hero-illustrated .hi-band-row{flex-wrap:wrap} .hero-illustrated .hi-band-row > .hi-spar-slot{ width:100%;margin:0; } } @media(min-width:1080px){ /* Three across, equal columns. grid-auto-flow:column (not three declared tracks) keeps the signed-in case working: when the row holds one card, that card makes one track and fills the rail, instead of leaving two empty thirds. */ .hero-illustrated .hi-band-row{ display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr); align-items:stretch; } .hero-illustrated .hi-band-row > .hi-spar-slot{width:auto;min-width:0} /* Equal thirds are narrower than "Apply for the founding class" on one line, so the two nowrap CTAs are allowed to wrap here. Without this their min-content pins those cards wider than their track and the button overflows the card. */ .hero-illustrated .hi-band-row .hi-ambassador-cta{ white-space:normal;text-align:center;padding-left:12px;padding-right:12px; } /* Both of these carry less copy than the spar card, so with the CTA pinned to the bottom the leftover height collected as one dead block under the text. Centering the copy in its track splits that space above and below, where it reads as padding. The schoolhouse stays where it is: .hi-ambassador-copy carries a 118px right padding tuned to clear it at 106px wide, and growing or moving the illustration spends that clearance. */ .hero-illustrated .hi-band-row .hi-ambassador-copy{align-self:center} /* The banner's own 3-column grid (tile | copy | timer+actions, with a 350px floor on the last track) does not fit a third of the rail, so inside the row it stacks: tile beside the copy, timer and buttons on a full-width row under a hairline. Same shape its own <=820px breakpoint uses. */ .hero-illustrated .hi-band-row .sn-card--banner{ height:100%;box-sizing:border-box; grid-template-columns:auto minmax(0,1fr);gap:16px;padding:20px 22px; } .hero-illustrated .hi-band-row .sn-card--banner .sn-sub{max-width:none} /* 2026-07-22 (fit pass): the timer sat on its own line above two stacked buttons, which made this card ~90px taller than the other two and left a dead gap under their copy. Countdown and buttons share a line now, so all three land within ~40px. */ .hero-illustrated .hi-band-row .sn-card--banner .sn-right{ grid-column:1 / -1;grid-template-columns:minmax(0,1fr) minmax(148px,auto); align-content:end;align-items:center; gap:14px;padding:14px 0 0;border-left:0;border-top:1px solid rgba(29,25,21,.12); } .hero-illustrated .hi-band-row .sn-card--banner .sn-title{ font-size:1.24rem;margin:5px 0 4px; } .hero-illustrated .hi-band-row .sn-card--banner .sn-count{font-size:1.5rem} .hero-illustrated .hi-band-row .sn-card--banner .sn-cta{ min-height:40px;padding:8px 12px;white-space:normal; } .hero-illustrated .hi-band-row .sn-card--banner .sn-actions{min-width:0} } /* 2026-07-22: was a near-black slab (linear-gradient #211817 -> #35201e) dropped into a warm cream page. It read as a foreign object between the door cards and the section below. Restyled onto the house panel language the door cards already use: warm blush paper, hairline red border, soft red-tinted shadow, dark ink text. The solid red CTA now carries the contrast instead of the whole band shouting. A low-opacity radial adds depth at the right edge so it is not a flat fill, kept subtle so it stays texture. */ .hero-illustrated .hi-ambassador-banner{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;width:min(1000px,100%);box-sizing:border-box;margin:18px auto 0;padding:17px 18px 17px 21px;border:1px solid rgba(200,50,50,.22);border-radius:18px;background:linear-gradient(135deg,#fffaf7 0%,#fff0ea 54%,#fce2d8 100%);box-shadow:0 14px 34px rgba(200,50,50,.10),0 2px 6px rgba(29,25,21,.05);color:var(--hi-ink,#1a1a1f);text-align:left;text-decoration:none;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease} .hero-illustrated .hi-ambassador-banner::after{content:"";position:absolute;right:-60px;top:50%;width:340px;height:340px;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle,rgba(200,50,50,.09) 0%,rgba(200,50,50,0) 70%);pointer-events:none} /* Schoolhouse. Sits in the card's top-right on the existing red glow, which now reads as light behind the building. Muted on purpose: it is texture supporting the headline, not a logo. z-index 1 puts it above the ::after glow but the copy also sits at z-index 1 and comes later in the DOM, so text always wins if they ever meet. */ .hero-illustrated .hi-amb-school{position:absolute;z-index:1;right:16px;top:12px;width:106px;height:auto;pointer-events:none;overflow:visible} .hero-illustrated .hi-amb-school .sch-ground{stroke:rgba(29,25,21,.20);stroke-width:2;stroke-linecap:round;fill:none} .hero-illustrated .hi-amb-school .sch-body{fill:rgba(29,25,21,.11)} .hero-illustrated .hi-amb-school .sch-tower{fill:rgba(29,25,21,.15)} .hero-illustrated .hi-amb-school .sch-roof{fill:rgba(200,50,50,.55)} .hero-illustrated .hi-amb-school .sch-door{fill:rgba(200,50,50,.42)} .hero-illustrated .hi-amb-school .sch-flag{fill:rgba(200,50,50,.70)} .hero-illustrated .hi-amb-school .sch-pole{stroke:rgba(29,25,21,.35);stroke-width:1.6;stroke-linecap:round;fill:none} .hero-illustrated .hi-amb-school .sch-win rect{fill:#fffdfa;stroke:rgba(200,50,50,.34);stroke-width:1.4} .hero-illustrated .hi-amb-school .sch-mullion path{stroke:rgba(200,50,50,.30);stroke-width:1.2;fill:none} /* Keeps the three copy lines clear of the building. */ .hero-illustrated .hi-ambassador-banner .hi-ambassador-copy{padding-right:118px} @media(max-width:700px){ .hero-illustrated .hi-amb-school{width:78px;right:10px;top:10px} .hero-illustrated .hi-ambassador-banner .hi-ambassador-copy{padding-right:86px} } .hero-illustrated .hi-ambassador-banner:hover{transform:translateY(-2px);border-color:rgba(200,50,50,.42);box-shadow:0 20px 44px rgba(200,50,50,.16),0 3px 8px rgba(29,25,21,.06)} .hero-illustrated .hi-ambassador-copy{display:flex;min-width:0;flex-direction:column;align-items:flex-start;gap:3px} /* Copy sits above the corner glow. */ .hero-illustrated .hi-ambassador-copy, .hero-illustrated .hi-ambassador-cta{position:relative;z-index:1} .hero-illustrated .hi-ambassador-kicker{color:#b91c1c;font-size:.65rem;font-weight:900;letter-spacing:.12em;line-height:1.2;text-transform:uppercase} .hero-illustrated .hi-ambassador-title{color:var(--hi-ink,#1a1a1f);font-family:var(--font-body);font-size:1.3rem;font-weight:800;line-height:1.12} .hero-illustrated .hi-ambassador-detail{color:rgba(29,25,21,.64);font-family:var(--font-body);font-size:.9rem;font-weight:500;line-height:1.35} .hero-illustrated .hi-ambassador-cta{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border-radius:12px;background:var(--hi-red);box-shadow:0 10px 22px rgba(200,50,50,.28);color:#fff;font-size:.9rem;font-weight:900;white-space:nowrap} /* Dark themes: a warm ember panel, not the old near-black. Keeps the same shape and the same red CTA, just inverted ink. DORMANT TODAY: DARK_MODE_ENABLED is false in the head script, which pins this page to data-theme="light", so these never match on the live site. They exist so the banner does not go back to being a black slab the day that flag is flipped on. Don't debug them by hand-setting data-theme on : the disabled theme system fights it and you get a half-applied mix that looks like a specificity bug and isn't. */ [data-theme="grey"] .hero-illustrated .hi-ambassador-banner, [data-theme="crimson"] .hero-illustrated .hi-ambassador-banner, [data-theme="stone"] .hero-illustrated .hi-ambassador-banner, [data-theme="dark"] .hero-illustrated .hi-ambassador-banner{ background:linear-gradient(135deg,rgba(96,38,32,.55) 0%,rgba(64,29,26,.5) 60%,rgba(48,24,22,.5) 100%); border-color:rgba(248,113,113,.30); box-shadow:0 16px 38px rgba(0,0,0,.32); color:#f5efe7; } [data-theme="grey"] .hero-illustrated .hi-ambassador-title, [data-theme="crimson"] .hero-illustrated .hi-ambassador-title, [data-theme="stone"] .hero-illustrated .hi-ambassador-title, [data-theme="dark"] .hero-illustrated .hi-ambassador-title{color:#fff} [data-theme="grey"] .hero-illustrated .hi-ambassador-kicker, [data-theme="crimson"] .hero-illustrated .hi-ambassador-kicker, [data-theme="stone"] .hero-illustrated .hi-ambassador-kicker, [data-theme="dark"] .hero-illustrated .hi-ambassador-kicker{color:#fca5a5} [data-theme="grey"] .hero-illustrated .hi-ambassador-detail, [data-theme="crimson"] .hero-illustrated .hi-ambassador-detail, [data-theme="stone"] .hero-illustrated .hi-ambassador-detail, [data-theme="dark"] .hero-illustrated .hi-ambassador-detail{color:rgba(255,255,255,.72)} @media(max-width:700px){ .hero-illustrated .hi-ambassador-banner{grid-template-columns:1fr;gap:14px;width:100%;max-width:560px;padding:17px;text-align:center} .hero-illustrated .hi-ambassador-copy{align-items:center} .hero-illustrated .hi-ambassador-cta{width:100%;box-sizing:border-box} } [data-theme="dark"] .hero-illustrated .hi-path-card, [data-theme="crimson"] .hero-illustrated .hi-path-card, [data-theme="grey"] .hero-illustrated .hi-path-card, [data-theme="stone"] .hero-illustrated .hi-path-card{ --hi-ink:#f5efe7; --hi-ink-soft:rgba(245,239,231,.70); --hi-chip-ink:#f5efe7; background:linear-gradient(180deg,rgba(42,31,28,.88),rgba(30,24,23,.80)); border-color:rgba(245,239,231,.13); box-shadow:0 18px 54px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05); } [data-theme="dark"] .hero-illustrated .hi-path-card--ai, [data-theme="crimson"] .hero-illustrated .hi-path-card--ai, [data-theme="grey"] .hero-illustrated .hi-path-card--ai, [data-theme="stone"] .hero-illustrated .hi-path-card--ai{border-color:rgba(239,68,68,.26)} [data-theme="dark"] .hero-illustrated .hi-path-visual--ai, [data-theme="crimson"] .hero-illustrated .hi-path-visual--ai, [data-theme="grey"] .hero-illustrated .hi-path-visual--ai, [data-theme="stone"] .hero-illustrated .hi-path-visual--ai{ background:radial-gradient(circle at 50% 42%,rgba(239,68,68,.22),rgba(38,27,25,.6) 72%); border-color:rgba(239,68,68,.22); } [data-theme="dark"] .hero-illustrated .hi-path-meta span, [data-theme="crimson"] .hero-illustrated .hi-path-meta span, [data-theme="grey"] .hero-illustrated .hi-path-meta span, [data-theme="stone"] .hero-illustrated .hi-path-meta span{ color:rgba(245,239,231,.68); border-color:rgba(245,239,231,.13); background:rgba(255,255,255,.04); } [data-theme="dark"] .hero-illustrated .hi-live-pill, [data-theme="crimson"] .hero-illustrated .hi-live-pill, [data-theme="grey"] .hero-illustrated .hi-live-pill, [data-theme="stone"] .hero-illustrated .hi-live-pill{ color:#bbf7d0; background:rgba(34,197,94,.10); border-color:rgba(34,197,94,.28); } [data-theme="dark"] .hero-illustrated .hi-ai-label, [data-theme="crimson"] .hero-illustrated .hi-ai-label, [data-theme="grey"] .hero-illustrated .hi-ai-label, [data-theme="stone"] .hero-illustrated .hi-ai-label{ color:#fef2f2; background:rgba(30,24,23,.76); border-color:rgba(239,68,68,.26); } @media(max-width:980px){.hero-illustrated .hi-triptych{grid-template-columns:minmax(0,1fr);max-width:560px;gap:18px}.hero-illustrated .hi-path-card{height:auto;min-height:0}.hero-illustrated .hi-path-visual{height:204px}} @media(max-width:560px){html,body{overflow-x:hidden}:root[data-hero-ab="illustrated"] section.hero{padding-left:0 !important;padding-right:0 !important}:root[data-hero-ab="illustrated"] .hero-content{width:100vw !important;max-width:100vw !important;margin:0 !important;text-align:center !important}:root[data-hero-ab="illustrated"] .hero-illustrated{width:100vw;max-width:100vw;padding-left:20px;padding-right:20px;box-sizing:border-box}.hero-illustrated .hi-head{width:100%;max-width:calc(100vw - 40px)}section.hero .hero-illustrated h1.hi-headline{white-space:normal !important;font-size:clamp(2rem,10vw,2.55rem) !important;max-width:calc(100vw - 40px);margin-left:auto !important;margin-right:auto !important}.hero-illustrated .hi-headline-lead,.hero-illustrated .hi-headline-accent{display:block}.hero-illustrated .hi-subhead{max-width:calc(100vw - 48px);font-size:.9rem}.hero-illustrated .hi-subhead strong,.hero-illustrated .hi-sub-tail{display:block}.hero-illustrated .hi-triptych{width:100%;max-width:calc(100vw - 40px);gap:12px;margin-top:18px}.hero-illustrated .hi-path-card{min-height:auto;padding:17px}.hero-illustrated .hi-ai-core{width:136px}.hero-illustrated .hi-path-visual{height:172px}} @media(prefers-reduced-motion:reduce){.hero-illustrated .hi-ai-ring,.hero-illustrated .hi-ai-disc::after,.hero-illustrated .hi-ai-bars i,.hero-illustrated .hi-ai-node{animation:none}} /* ===== DOORS A/B (2026-07-07) ===== One arm shows at a time. Fail-open to the unified selector when the attribute is absent/unrecognized: classic is display:none by default and only revealed under html[data-doors-ab="classic"]. */ .hero-illustrated .hi-doors--classic{display:none} html[data-doors-ab="classic"] .hero-illustrated .hi-doors--unified{display:none} html[data-doors-ab="classic"] .hero-illustrated .hi-doors--classic{display:block} /* Classic (control) arm: the exact pre-2026-07-07 triptych, every layout class namespaced hio-* so it never collides with the unified hi-* rules above. The orb INTERNALS (hi-ai-ring / disc / bars / node / label) and keyframes are shared and reused as-is; only the orb container (hio-ai-core) is namespaced for its size. */ .hero-illustrated .hio-triptych{display:grid;grid-template-columns:minmax(350px,1fr) minmax(380px,1.05fr) minmax(350px,1fr);gap:20px;width:100%;max-width:1420px;margin:22px auto 0;align-items:start} .hero-illustrated .hio-path-card--live{order:1} .hero-illustrated .hio-path-card--ambassadors{order:2} .hero-illustrated .hio-path-card--ai{order:3} .hero-illustrated .hio-path-card{position:relative;display:flex;width:100%;min-width:0;box-sizing:border-box;height:430px;min-height:0;flex-direction:column;justify-content:flex-start;gap:14px;padding:18px;border-radius:18px;text-decoration:none;color:var(--hi-chip-ink);background:rgba(255,253,247,.9);border:1px solid rgba(29,25,21,.12);box-shadow:0 18px 48px rgba(29,25,21,.10);overflow:hidden;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease} .hero-illustrated .hio-triptych .hio-path-card{--hi-ink:#1a1a1f;--hi-ink-soft:#5f5650;--hi-chip-ink:#1a1a1f} .hero-illustrated .hio-path-card:hover{transform:translateY(-3px);border-color:rgba(200,50,50,.55);box-shadow:0 24px 70px rgba(29,25,21,.16)} .hero-illustrated .hio-path-card:focus-visible{outline:3px solid rgba(200,50,50,.6);outline-offset:3px} .hero-illustrated .hio-path-eyebrow{font-size:.66rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--hi-red)} .hero-illustrated .hio-path-card h2{font-family:var(--font-display);font-size:clamp(1.36rem,1.7vw,1.72rem);line-height:1.04;letter-spacing:-.018em;color:var(--hi-ink);margin:0;text-transform:none} .hero-illustrated .hio-path-copy{font-size:.86rem;line-height:1.4;color:var(--hi-ink-soft);margin:0;max-width:34ch} .hero-illustrated .hio-path-cta{display:inline-flex;align-items:center;gap:8px;width:max-content;margin-top:auto;padding:10px 14px;border-radius:999px;background:var(--hi-red);color:#fff;font-size:.78rem;font-weight:800;letter-spacing:.01em;box-shadow:0 9px 24px rgba(200,50,50,.24)} .hero-illustrated .hio-path-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px} .hero-illustrated .hio-path-meta span{font-size:.63rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--hi-ink-soft);border:1px solid rgba(29,25,21,.12);background:rgba(255,255,255,.45);border-radius:999px;padding:4px 7px} .hero-illustrated .hio-live-tiles{display:grid;width:100%;min-width:0;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:8px;height:142px;min-height:0;overflow:hidden} .hero-illustrated .hio-live-tiles img{display:block;width:100%;min-width:0;height:100%;min-height:0;object-fit:cover;border-radius:10px;filter:saturate(.95);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)} .hero-illustrated .hio-live-tiles img:first-child{grid-row:span 2} .hero-illustrated .hio-live-pill{position:absolute;top:16px;right:16px;display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.34);color:#15803d;font-size:.62rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase} .hero-illustrated .hio-live-pill i{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 10px rgba(34,197,94,.8)} .hero-illustrated .hio-path-card--ai{align-items:center;text-align:center;padding:18px;background:linear-gradient(180deg,rgba(255,253,247,.98),rgba(255,248,238,.9));border-color:rgba(200,50,50,.28)} .hero-illustrated .hio-path-card--ai::before{content:"";position:absolute;inset:12px;border-radius:15px;background:radial-gradient(circle at 50% 26%,rgba(239,68,68,.10),transparent 37%),linear-gradient(135deg,rgba(255,255,255,.48),transparent 42%,rgba(239,68,68,.045));pointer-events:none} .hero-illustrated .hio-path-card--ai > *{position:relative;z-index:1} .hero-illustrated .hio-path-card--ai .hio-path-copy{margin:0 auto;max-width:34ch} .hero-illustrated .hio-path-card--ai .hio-path-cta{margin-left:auto;margin-right:auto} .hero-illustrated .hio-ai-core{position:relative;width:min(184px,54vw);aspect-ratio:1;margin:0 auto -2px;display:grid;place-items:center;isolation:isolate} .hero-illustrated .hio-ai-core::before{content:"";position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(circle,rgba(239,68,68,.20),transparent 58%);filter:blur(16px);opacity:.78} .hero-illustrated .hio-amb-photo{position:relative;width:100%;min-width:0;height:142px;min-height:0;border-radius:12px;overflow:hidden;background:#221a14;border:1px solid rgba(255,255,255,.16)} .hero-illustrated .hio-amb-photo img{width:100%;height:100%;min-height:0;object-fit:cover;display:block;filter:saturate(.92) contrast(.96)} .hero-illustrated .hio-amb-photo::after{content:"Founding class";position:absolute;left:10px;bottom:10px;padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.94);color:#a4201d;font-size:.62rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase} [data-theme="dark"] .hero-illustrated .hio-path-card, [data-theme="crimson"] .hero-illustrated .hio-path-card, [data-theme="grey"] .hero-illustrated .hio-path-card, [data-theme="stone"] .hero-illustrated .hio-path-card{ --hi-ink:#f5efe7; --hi-ink-soft:rgba(245,239,231,.70); --hi-chip-ink:#f5efe7; background:linear-gradient(180deg,rgba(42,31,28,.88),rgba(30,24,23,.80)); border-color:rgba(245,239,231,.13); box-shadow:0 18px 54px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05); } [data-theme="dark"] .hero-illustrated .hio-path-card--ai, [data-theme="crimson"] .hero-illustrated .hio-path-card--ai, [data-theme="grey"] .hero-illustrated .hio-path-card--ai, [data-theme="stone"] .hero-illustrated .hio-path-card--ai{ background:radial-gradient(circle at 50% 18%,rgba(239,68,68,.16),transparent 44%),linear-gradient(180deg,rgba(48,32,29,.90),rgba(29,24,23,.82)); border-color:rgba(239,68,68,.26); } [data-theme="dark"] .hero-illustrated .hio-path-meta span, [data-theme="crimson"] .hero-illustrated .hio-path-meta span, [data-theme="grey"] .hero-illustrated .hio-path-meta span, [data-theme="stone"] .hero-illustrated .hio-path-meta span{ color:rgba(245,239,231,.68); border-color:rgba(245,239,231,.13); background:rgba(255,255,255,.04); } [data-theme="dark"] .hero-illustrated .hio-live-pill, [data-theme="crimson"] .hero-illustrated .hio-live-pill, [data-theme="grey"] .hero-illustrated .hio-live-pill, [data-theme="stone"] .hero-illustrated .hio-live-pill{ color:#bbf7d0; background:rgba(34,197,94,.10); border-color:rgba(34,197,94,.28); } @media(max-width:980px){.hero-illustrated .hio-triptych{grid-template-columns:minmax(0,1fr);max-width:560px}.hero-illustrated .hio-path-card{height:auto;min-height:300px}.hero-illustrated .hio-live-tiles{height:150px}} @media(max-width:560px){.hero-illustrated .hio-triptych{width:100%;max-width:calc(100vw - 40px);gap:12px;margin-top:18px}.hero-illustrated .hio-path-card{min-height:auto;padding:18px}.hero-illustrated .hio-ai-core{width:min(198px,70vw)}.hero-illustrated .hio-live-tiles,.hero-illustrated .hio-amb-photo{height:120px}} /* ═══════════════════════════════════════════════════════════════ LIVE-FIRST hero (2026-07-08) — NEW DEFAULT door layout. Fix: the three equal cards gave the AI orb too much visual gravity (brightest, most symmetric object). Now the live room is the hero (left, ~62%), founding-class applications are the second door (right, ~38%), and the AI orb is demoted to a slim always-available fallback strip below. Reuses .hi-path-card for card chrome + full dark/light theming, and the shared hi-ai-* orb internals at a smaller size. Rollback to the equal triptych with ?doors=unified (or the classic arm with ?doors=classic). */ .hero-illustrated .hi-doors--livefirst{display:block} .hero-illustrated .hi-doors--unified{display:none} html[data-doors-ab="unified"] .hero-illustrated .hi-doors--livefirst{display:none} html[data-doors-ab="unified"] .hero-illustrated .hi-doors--unified{display:block} html[data-doors-ab="classic"] .hero-illustrated .hi-doors--livefirst{display:none} /* 2026-07-18: the old ≥981px breakout (left:50% + translateX(-50%) + 100vw width) mixed parent-relative and viewport-relative math; any ancestor transform or iPad Safari viewport quirk shifted the whole strip off the left edge. Plain in-flow centering inside the already-centered .hero-content is stable everywhere. */ .hero-illustrated .hi-doors--livefirst{width:100%;max-width:min(1340px,calc(100vw - 96px));margin:10px auto 0} /* Ink is left to the theme system: light-theme root gives dark ink (readable on the light card), the [data-theme=dark] .hi-path-card override gives light ink. Do NOT re-pin --hi-ink here — an override at equal specificity lands after the dark rule and wins, which turns the headline/motion/judge text near-black on the dark card. */ /* 2026-08-01: the voice card moved out to .hi-pair-row, so this grid is one full-rail column. Kept as a grid (not a bare div) because the live card's own rules lean on grid-area:live. */ .hero-illustrated .hi-lf-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"live";grid-template-rows:auto;column-gap:18px;row-gap:14px;align-items:stretch} .hero-illustrated .hi-lf-live{grid-area:live} /* .hi-path-card carries min-height:448px for the equal-triptych arm. Here the grid row owns the height, so remove that inherited floor. */ .hero-illustrated .hi-lf-live,.hero-illustrated .hi-lf-amb{height:100%;min-height:0} /* shared eyebrow + CTA */ .hero-illustrated .hi-lf-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.68rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:var(--hi-red)} .hero-illustrated .hi-lf-eyebrow i{width:7px;height:7px;border-radius:50%;background:currentColor} .hero-illustrated .hi-lf-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:12px;font-size:.98rem;font-weight:800;letter-spacing:.01em;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease,color .15s ease} .hero-illustrated .hi-lf-cta--primary{background:var(--hi-red);color:#fff;box-shadow:0 11px 26px rgba(200,50,50,.26)} .hero-illustrated .hi-lf-cta--primary:hover{transform:translateY(-1px);box-shadow:0 15px 34px rgba(200,50,50,.36)} .hero-illustrated .hi-lf-cta--ghost{background:transparent;color:var(--hi-ink);border:1px solid var(--hi-card-line,rgba(29,25,21,.22))} .hero-illustrated .hi-lf-cta--ghost:hover{border-color:var(--hi-red);color:var(--hi-red)} .hero-illustrated .hi-lf-cta--full{width:100%;box-sizing:border-box} /* LEFT — live room (mini product interface) */ /* space-evenly, paired with dropping margin-top:auto on the foot. With 16/9 tiles the card no longer fills the row on its own, and auto-margin dumped every spare pixel into one 76px void above the buttons. Even rhythm reads deliberate; a single gap reads broken. */ .hero-illustrated .hi-lf-live{padding:0;overflow:hidden;display:flex;flex-direction:column;gap:0;justify-content:space-evenly} .hero-illustrated .hi-lf-live-hit{position:absolute;inset:0;z-index:2;border-radius:inherit;text-decoration:none} .hero-illustrated .hi-lf-live-hit:focus-visible{outline:3px solid rgba(200,50,50,.64);outline-offset:-5px} .hero-illustrated .hi-lf-roombar{display:flex;align-items:center;gap:9px;padding:11px 18px;border-bottom:1px solid var(--hi-card-line,rgba(29,25,21,.12));font-size:.65rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--hi-ink-soft)} .hero-illustrated .hi-lf-roombar-spacer{flex:1} .hero-illustrated .hi-lf-liveflag{display:inline-flex;align-items:center;gap:6px;color:#dc2626} .hero-illustrated .hi-lf-liveflag i{width:7px;height:7px;border-radius:50%;background:#ef4444;box-shadow:0 0 9px rgba(239,68,68,.85);animation:hiAiBeat 2s ease-in-out infinite} .hero-illustrated .hi-lf-judged b{color:var(--hi-red);font-weight:900} .hero-illustrated .hi-lf-stage{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:10px 18px 0;flex:0 0 auto;min-height:0} /* 16/9 so a tile reads as a screen. Was a fixed 390px grid row with the stage flexing into whatever remained, which squashed both tiles into slivers. Card height now comes from the tiles. */ .hero-illustrated .hi-lf-tile{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;min-height:0;background:#1c1512;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)} /* .42s to match the slowed fadeMs in the rotator below; at .24s the tiles cut rather than dissolved. */ .hero-illustrated .hi-lf-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .42s ease,transform .42s ease} .hero-illustrated .hi-lf-tile img.is-swapping{opacity:0;transform:scale(1.018)} .hero-illustrated .hi-lf-tile--speaking{box-shadow:inset 0 0 0 2px #ef4444} .hero-illustrated .hi-lf-timer{position:absolute;top:8px;right:8px;padding:3px 7px;border-radius:7px;background:rgba(18,13,11,.78);color:#fff;font-size:.62rem;font-weight:900;font-variant-numeric:tabular-nums} .hero-illustrated .hi-lf-motion{margin:9px 18px 0;padding:8px 13px;border-radius:11px;background:rgba(200,50,50,.06);border:1px solid var(--hi-card-line,rgba(29,25,21,.12));font-size:1.02rem;font-weight:600;line-height:1.22;color:var(--hi-ink);font-family:var(--font-body)} .hero-illustrated .hi-lf-motion-k{display:block;font-family:inherit;font-size:.65rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:var(--hi-red);margin-bottom:2px} .hero-illustrated .hi-lf-judge{display:flex;align-items:center;gap:9px;margin:9px 18px 0;font-size:.7rem;color:var(--hi-ink-soft)} .hero-illustrated .hi-lf-judge-dot{width:8px;height:8px;border-radius:50%;background:#ef4444;box-shadow:0 0 10px rgba(239,68,68,.7);flex:0 0 auto;animation:hiAiBeat 2.4s ease-in-out infinite} .hero-illustrated .hi-lf-judge-t{flex:1;min-width:0} .hero-illustrated .hi-lf-judge-t b{color:var(--hi-ink);font-weight:800} /* ── Prediction-market layer (2026-07-22) ────────────────────── "Bet on your words" was only words: nothing on the first screen looked like a market. Two instruments fix that, both inside the live card so the bet reads as part of the round: (1) a ticker of other rounds circulating under the roombar with names, odds, and pooled money; (2) the motion box becomes the featured market: price line, per-side odds with the debaters' names, and the pot. Illustrative, same status as the face tiles; markup carries full static defaults so the reduced-motion path still renders a complete market. */ .hero-illustrated .hi-lf-ticker{display:flex;overflow:hidden;padding:6px 0;border-bottom:1px solid var(--hi-card-line,rgba(29,25,21,.12));background:rgba(200,50,50,.045);white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .hero-illustrated .hi-lf-ticker-track{display:inline-flex;flex:0 0 auto;animation:hiTicker 38s linear infinite} .hero-illustrated .hi-lf-ticker-group{display:inline-flex;gap:30px;padding-right:30px} .hero-illustrated .hi-lf-ticker-group>span{display:inline-flex;align-items:baseline;gap:5px;font-size:.6rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--hi-ink-soft);font-variant-numeric:tabular-nums} .hero-illustrated .hi-lf-ticker-group em{font-style:normal;font-weight:900;color:var(--hi-ink)} .hero-illustrated .hi-lf-ticker-group b{font-weight:900;color:var(--hi-red)} .hero-illustrated .hi-lf-ticker-group .up{color:#15803d;font-style:normal} .hero-illustrated .hi-lf-ticker-group .dn{color:#b91c1c;font-style:normal} @keyframes hiTicker{to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.hero-illustrated .hi-lf-ticker-track{animation:none}} .hero-illustrated .hi-lf-mkt-head{display:flex;align-items:baseline;gap:10px} .hero-illustrated .hi-lf-mkt-vol{margin-left:auto;font-size:.64rem;font-weight:700;letter-spacing:.02em;text-transform:none;color:var(--hi-ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap} .hero-illustrated .hi-lf-mkt-vol b{color:var(--hi-ink);font-weight:900} .hero-illustrated .hi-lf-mkt-chart{position:relative;height:44px;margin-top:8px} .hero-illustrated .hi-lf-mkt-chart svg{display:block;width:100%;height:100%} .hero-illustrated .hi-lf-mkt-grid{stroke:rgba(29,25,21,.09);stroke-width:1} .hero-illustrated .hi-lf-mkt-area{fill:rgba(200,50,50,.10)} .hero-illustrated .hi-lf-mkt-line{fill:none;stroke:var(--hi-red,#c83232);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round} /* HTML overlay dot, not an SVG circle: preserveAspectRatio="none" scales x ~6x more than y, which would stretch a circle into a smear. top is set as a % of chart height (static default and by the JS below). */ .hero-illustrated .hi-lf-mkt-dot{position:absolute;right:-3px;width:7px;height:7px;border-radius:50%;background:var(--hi-red,#c83232);transform:translateY(-50%);box-shadow:0 0 8px rgba(200,50,50,.6)} .hero-illustrated .hi-lf-mkt-dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;background:rgba(200,50,50,.35);animation:hiMktHalo 1.8s ease-out infinite} @keyframes hiMktHalo{0%{transform:scale(.6);opacity:.9}70%{transform:scale(2.6);opacity:0}100%{transform:scale(2.6);opacity:0}} .hero-illustrated .hi-lf-mkt-rows{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px} .hero-illustrated .hi-lf-mkt-side{position:relative;overflow:hidden;display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:9px;border:1px solid rgba(200,50,50,.3);background:#fff} .hero-illustrated .hi-lf-mkt-side--con{border-color:rgba(29,25,21,.18)} .hero-illustrated .hi-lf-mkt-fill{position:absolute;left:0;top:0;bottom:0;display:block;background:rgba(200,50,50,.12);transition:width .6s cubic-bezier(.2,.8,.2,1)} .hero-illustrated .hi-lf-mkt-side--con .hi-lf-mkt-fill{background:rgba(29,25,21,.07)} .hero-illustrated .hi-lf-mkt-tag{position:relative;font-size:.54rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--hi-red);border:1px solid rgba(200,50,50,.34);border-radius:5px;padding:2px 5px;background:rgba(255,255,255,.72)} .hero-illustrated .hi-lf-mkt-side--con .hi-lf-mkt-tag{color:var(--hi-ink-soft);border-color:rgba(29,25,21,.22)} .hero-illustrated .hi-lf-mkt-name{position:relative;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-body);font-size:.76rem;font-weight:700;color:var(--hi-ink)} .hero-illustrated .hi-lf-mkt-pct{position:relative;font-size:1rem;font-weight:900;color:var(--hi-ink);font-variant-numeric:tabular-nums} .hero-illustrated .hi-lf-mkt-side--pro .hi-lf-mkt-pct{color:var(--hi-red)} [data-theme="dark"] .hero-illustrated .hi-lf-ticker, [data-theme="crimson"] .hero-illustrated .hi-lf-ticker, [data-theme="grey"] .hero-illustrated .hi-lf-ticker, [data-theme="stone"] .hero-illustrated .hi-lf-ticker{background:rgba(239,68,68,.07);border-color:rgba(245,239,231,.12)} [data-theme="dark"] .hero-illustrated .hi-lf-mkt-side, [data-theme="crimson"] .hero-illustrated .hi-lf-mkt-side, [data-theme="grey"] .hero-illustrated .hi-lf-mkt-side, [data-theme="stone"] .hero-illustrated .hi-lf-mkt-side{background:rgba(255,255,255,.05);border-color:rgba(239,68,68,.28)} [data-theme="dark"] .hero-illustrated .hi-lf-mkt-side--con, [data-theme="crimson"] .hero-illustrated .hi-lf-mkt-side--con, [data-theme="grey"] .hero-illustrated .hi-lf-mkt-side--con, [data-theme="stone"] .hero-illustrated .hi-lf-mkt-side--con{border-color:rgba(245,239,231,.16)} [data-theme="dark"] .hero-illustrated .hi-lf-mkt-tag, [data-theme="crimson"] .hero-illustrated .hi-lf-mkt-tag, [data-theme="grey"] .hero-illustrated .hi-lf-mkt-tag, [data-theme="stone"] .hero-illustrated .hi-lf-mkt-tag{background:rgba(255,255,255,.06)} .hero-illustrated .hi-lf-live-foot{padding:11px 18px 14px;display:flex;flex-direction:column;gap:8px} .hero-illustrated .hi-lf-cta-row{position:relative;z-index:3;display:flex;gap:10px;flex-wrap:wrap} .hero-illustrated .hi-lf-cta-row .hi-lf-cta--primary{flex:1;min-width:160px} /* RIGHT — Voice AI */ .hero-illustrated .hi-lf-amb{display:flex;flex-direction:column;gap:5px;padding:13px;text-decoration:none} /* A shallow visual keeps the voice card the same height as the live product interface beside it. */ .hero-illustrated .hi-lf-amb-photo{position:relative;border-radius:13px;overflow:hidden;aspect-ratio:16/6.5;background:#221a14;border:1px solid rgba(255,255,255,.14)} .hero-illustrated .hi-lf-amb-photo img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.94) contrast(.97)} .hero-illustrated .hi-lf-amb-badge{position:absolute;left:10px;bottom:10px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.95);color:#a4201d;font-size:.65rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase} .hero-illustrated .hi-lf-amb-top{display:flex;align-items:center;justify-content:space-between;gap:12px} .hero-illustrated .hi-lf-amb-top .hi-lf-eyebrow{min-width:0} /* 2026-07-18: was a second red button (.hi-lf-founder-mini) in a card that already carries the big red apply CTA — two red buttons in one small card read as template chrome. Now a quiet text link. */ .hero-illustrated .hi-lf-founder-quiet{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;text-decoration:none;font-size:.7rem;font-weight:700;color:var(--hi-ink-soft);border-bottom:1px dashed currentColor;padding-bottom:1px;transition:color .15s ease} .hero-illustrated .hi-lf-founder-quiet:hover{color:var(--hi-red)} .hero-illustrated .hi-lf-amb h2{font-family:var(--font-display);font-size:clamp(1.5rem,2.45vw,1.9rem);line-height:1.02;letter-spacing:-.02em;color:var(--hi-ink);margin:0} .hero-illustrated .hi-lf-amb-copy{font-size:1.02rem;line-height:1.4;color:var(--hi-ink-soft);margin:0} .hero-illustrated .hi-lf-amb-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:0} /* Chips stay on ONE compact line (they wrapped to two once the card narrowed and the type went up). */ .hero-illustrated .hi-lf-amb .hi-path-meta{flex-wrap:nowrap;gap:8px} .hero-illustrated .hi-lf-amb .hi-path-meta span{font-size:.65rem;padding:4px 10px} .hero-illustrated .hi-lf-amb-wl{align-self:center;font-size:.7rem;font-weight:700;color:var(--hi-ink-dim,var(--text-dim));text-decoration:none;border-bottom:1px dashed currentColor;padding-bottom:1px;opacity:.85} .hero-illustrated .hi-lf-amb-wl:hover{color:var(--hi-red);opacity:1} .hero-illustrated .hi-lf-amb .hi-lf-cta{white-space:nowrap} /* BELOW LEFT — Voice AI sits with the live product path, not between columns. */ /* Founding-card photo rotator: two real shots crossfade on a 10s cycle with a slow zoom. First frame lands mid-fade-in (negative delay) so there is no blank flash on load. */ .hero-illustrated .hi-lf-amb-photo--live img{position:absolute;inset:0;opacity:0;animation:hiAmbFade 10s linear infinite,hiAmbKen 10s linear infinite} .hero-illustrated .hi-lf-amb-photo--live img:nth-child(1){animation-delay:-1s,-1s} .hero-illustrated .hi-lf-amb-photo--live img:nth-child(2){animation-delay:4s,4s} @keyframes hiAmbFade{0%{opacity:0}10%{opacity:1}50%{opacity:1}60%{opacity:0}100%{opacity:0}} @keyframes hiAmbKen{0%{transform:scale(1.02)}60%{transform:scale(1.1)}100%{transform:scale(1.1)}} @media (prefers-reduced-motion: reduce){ .hero-illustrated .hi-lf-amb-photo--live img{animation:none !important;opacity:0} .hero-illustrated .hi-lf-amb-photo--live img:first-child{opacity:1} } .hero-illustrated .hi-lf-aistrip{display:flex;align-items:center;justify-content:center;gap:16px;width:100%;min-height:104px;margin:0;padding:9px 18px;border-radius:14px;text-decoration:none;background:rgba(255,253,248,.9);border:1px solid var(--hi-card-line,rgba(29,25,21,.15));box-shadow:0 14px 34px rgba(29,25,21,.07);box-sizing:border-box;transition:border-color .15s ease,background .15s ease,transform .15s ease} .hero-illustrated .hi-lf-aistrip:hover{border-color:rgba(200,50,50,.5);background:#fff;transform:translateY(-2px);box-shadow:0 18px 44px rgba(200,50,50,.14)} .hero-illustrated .va-stage{flex:0 0 auto;width:74px;height:74px;border-radius:15px;display:grid;place-items:center;position:relative;overflow:hidden;background:radial-gradient(120% 90% at 50% 10%,rgba(255,255,255,.9),transparent 60%),linear-gradient(180deg,#fff3f0,#fbe2dc);border:1px solid rgba(200,50,50,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 24px rgba(29,25,21,.10)} .hero-illustrated .hi-lf-amb-photo--voice{display:grid;place-items:center;background:radial-gradient(circle at 50% 12%,rgba(255,255,255,.96),rgba(255,241,237,.94) 48%,rgba(243,211,203,.92));border-color:rgba(200,50,50,.2)} .hero-illustrated .hi-lf-amb-photo--voice .va-stage{width:112px;height:112px;border-radius:999px} /* Her still fills the panel. --her only applies once the image actually loads; the onerror handler drops the class so the orb and gradient come back rather than leaving an empty frame. */ /* Taller than the 16/6.5 the other ambient panels use, and the crop biased up: the source is 3:2 with Theodore's head near the top, so the shared letterbox ratio cut his face off. 16/8.6 keeps ~80% of the frame height and 12% pulls the window up to clear his hair while holding the desk in shot. */ .hero-illustrated .hi-lf-amb-photo--her{position:relative;overflow:hidden;background:#1a0d0a;aspect-ratio:16/8.6} .hero-illustrated .hi-lf-her-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block} .hero-illustrated .hi-lf-amb-photo--her .va-stage{display:none} .hero-illustrated .hi-lf-her-credit{position:absolute;right:9px;bottom:8px;z-index:2; font-size:.55rem;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.82); text-shadow:0 1px 3px rgba(0,0,0,.6)} .hero-illustrated .hi-lf-amb-photo--her .hi-lf-amb-badge{z-index:2} .hero-illustrated .va-stage::after{content:"";position:absolute;left:14%;right:14%;bottom:9px;height:1px;background:linear-gradient(90deg,transparent,rgba(200,50,50,.45),transparent)} .hero-illustrated .va-eq{display:flex;align-items:flex-end;gap:4px;height:34px} .hero-illustrated .va-eq i{display:block;width:5px;border-radius:999px;background:linear-gradient(180deg,#e05a4a,#c83232);box-shadow:0 1px 3px rgba(200,50,50,.28);transform-origin:bottom;animation:vaEq 1.05s ease-in-out infinite} .hero-illustrated .va-eq i:nth-child(1){height:12px} .hero-illustrated .va-eq i:nth-child(2){height:20px;animation-delay:-.15s} .hero-illustrated .va-eq i:nth-child(3){height:28px;animation-delay:-.3s} .hero-illustrated .va-eq i:nth-child(4){height:34px;animation-delay:-.45s} .hero-illustrated .va-eq i:nth-child(5){height:26px;animation-delay:-.6s} .hero-illustrated .va-eq i:nth-child(6){height:18px;animation-delay:-.75s} .hero-illustrated .va-eq i:nth-child(7){height:11px;animation-delay:-.9s} @keyframes vaEq{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}} .hero-illustrated .hi-lf-aistrip:hover .va-eq i{animation-duration:.55s} .hero-illustrated .va-kicker{font-size:.65rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:var(--hi-red);margin-bottom:1px} .hero-illustrated .hi-lf-aistrip-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} .hero-illustrated .hi-lf-aistrip-txt b{font-size:1.35rem;font-weight:800;color:var(--hi-ink);font-family:var(--font-body);line-height:1.08} .hero-illustrated .hi-lf-aistrip-txt span{font-size:.98rem;line-height:1.28;color:var(--hi-ink-soft)} /* The kicker IS a span, and the rule above sits later in source at equal specificity — without re-stating the size here it inherits the body size and the label renders as big as the description. */ .hero-illustrated .hi-lf-aistrip-txt .va-kicker{font-size:.65rem;line-height:1.25} .hero-illustrated .hi-lf-aistrip-cta{flex:0 0 auto} @media(prefers-reduced-motion:reduce){.hero-illustrated .va-eq i{animation:none}} /* stacking: tablet + mobile */ @media(max-width:900px){.hero-illustrated .hi-lf-grid{max-width:560px;margin:0 auto}.hero-illustrated .hi-lf-live{min-height:0}.hero-illustrated .hi-lf-amb .hi-lf-cta{white-space:normal}} @media(max-width:420px){.hero-illustrated .hi-lf-amb-top{align-items:flex-start;flex-direction:column;gap:8px}} @media(max-width:560px){ .hero-illustrated .hi-doors--livefirst{width:100%;max-width:100%;padding:0 14px;box-sizing:border-box;overflow:hidden} .hero-illustrated .hi-lf-grid{width:100%;max-width:100%;gap:14px} .hero-illustrated .hi-lf-live,.hero-illustrated .hi-lf-amb,.hero-illustrated .hi-lf-aistrip{max-width:100%;box-sizing:border-box} .hero-illustrated .hi-lf-roombar{gap:6px;padding:11px 12px;font-size:.56rem;white-space:nowrap} .hero-illustrated .hi-lf-roombar .hi-lf-speeches{display:none} .hero-illustrated .hi-lf-roombar .hi-lf-roombar-spacer, .hero-illustrated .hi-lf-roombar .hi-lf-judged{display:none} .hero-illustrated .hi-lf-stage{gap:7px;padding:10px 12px 0} .hero-illustrated .hi-lf-tile{border-radius:10px;min-width:0} .hero-illustrated .hi-lf-motion{margin:8px 12px 0;padding:7px 10px;font-size:.8rem} .hero-illustrated .hi-lf-ticker-group{gap:20px;padding-right:20px} /* 2026-07-22: the head is a baseline flex row, and on a phone there is not room for "Motion · live market" AND the pot line beside it, so the label broke mid-phrase into "MOTION · LIVE / MARKET" and ran under the pot figure. Stack them: each gets its own line and neither wraps. */ .hero-illustrated .hi-lf-mkt-head{flex-direction:column;align-items:flex-start;gap:2px} .hero-illustrated .hi-lf-mkt-vol{font-size:.58rem;margin-left:0} .hero-illustrated .hi-lf-mkt-chart{height:34px;margin-top:6px} .hero-illustrated .hi-lf-mkt-rows{gap:6px;margin-top:6px} .hero-illustrated .hi-lf-mkt-side{padding:6px 8px;gap:5px} .hero-illustrated .hi-lf-mkt-name{font-size:.66rem} .hero-illustrated .hi-lf-mkt-pct{font-size:.86rem} .hero-illustrated .hi-lf-judge{align-items:flex-start;margin:8px 12px 0;font-size:.64rem;line-height:1.28} .hero-illustrated .hi-lf-live-foot{padding:10px 12px 12px} .hero-illustrated .hi-lf-cta-row{display:grid;grid-template-columns:1fr;gap:8px} .hero-illustrated .hi-lf-cta-row .hi-lf-cta--primary{min-width:0} .hero-illustrated .hi-lf-aistrip{align-items:flex-start;justify-content:flex-start;flex-wrap:wrap;gap:10px;padding:12px} .hero-illustrated .va-stage{width:54px;height:54px;border-radius:12px} .hero-illustrated .hi-lf-amb-photo--voice .va-stage{width:78px;height:78px;border-radius:999px} .hero-illustrated .va-eq{height:22px;gap:3px} .hero-illustrated .va-eq i{width:4px} .hero-illustrated .hi-lf-aistrip-cta{width:100%;min-height:42px} }