/* ── Hero ─────────────────────────── */
/* Two-column layout above 1100px: content on the left, audio-timer on
   the right, both vertically centered and visually related to each
   other instead of one being absolute and floating off in a corner.
   Below 1100px the timer hides and content centers. */
.hero{
  position:relative;
  min-height:100vh;min-height:100dvh;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:88px clamp(40px,7vw,120px) 72px;
  overflow:hidden;
}
/* Wide viewports: the fixed .landing-jumpnav (left rail, ~210px wide,
   visible at ≥1100px) was crowding the hero content against the left
   edge while leaving dead space on the right. Bias the hero rightward
   so the orb + chat box sit centered in the *remaining* viewport (the
   space between the nav rail and the right edge), not in the full
   viewport, matches what the eye expects. */
@media (min-width:1100px){
  .hero{
    padding-left:clamp(220px,17vw,300px);
    padding-right:clamp(40px,5vw,80px);
  }
}
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background:var(--hero-grad);
  overflow:hidden;
  /* 2026-05-19: soft fade-out at the bottom of the hero so the red
     ambient glow (.hero-bg::before/::after) doesn't terminate at a
     hard horizontal edge against the founder-video section below.
     The base hero-grad shows through underneath since body bg is the
     same variable, so masking is safe. */
  -webkit-mask-image:linear-gradient(180deg,black 0%, black 78%, transparent 100%);
  mask-image:linear-gradient(180deg,black 0%, black 78%, transparent 100%);
}
/* Hero ambient glows. Previously used filter:blur(64px)/blur(48px) on
   animated pseudo-elements, Chrome's large-radius blur runs on the
   main thread (Safari composites it on the GPU), so on Chrome the
   drift animation pinned a CPU core every frame and made the rest of
   the page feel heavy. Dropped the filter entirely; the radial-
   gradient's transparent-at-62% stop already produces a soft falloff,
   and stretching the element bigger compensates for the missing blur
   visually. will-change:transform forces both layers onto their own
   compositor layer so the drift translate is a pure GPU op. */
.hero-bg::before{
  content:'';position:absolute;
  top:-30%;right:-20%;
  width:100%;height:140%;
  background:radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 65%);
  /* Drift animation removed — the sideways translate + scale on the two
     glow halos was making the orb and the typing card appear to shift
     toward and away from each other in a "breathing" pattern. The glows
     stay; they just no longer move. */
}
.hero-bg::after{
  content:'';position:absolute;
  bottom:-20%;left:-20%;
  width:80%;height:100%;
  background:radial-gradient(ellipse at center, var(--accent-glow2) 0%, transparent 65%);
}

.hero-grain{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* 2026-05-26: mirror .hero-bg's mask so the noise overlay also fades
     into the next section instead of cutting off as a hard band at the
     bottom of the hero. Same 78% start point keeps both layers aligned. */
  -webkit-mask-image:linear-gradient(180deg,black 0%, black 78%, transparent 100%);
  mask-image:linear-gradient(180deg,black 0%, black 78%, transparent 100%);
}

/* Hero content. 2026-04-20 redesign: split layout.
   Header/credibility stays centered at the top. Below it, a 2-col grid:
   LEFT = "Debate the AI" label + animated orb + CTAs.
   RIGHT = live mini-chat demo (the streaming AI output that used to sit
   below the hero on its own row). Stacks to single column on mobile.
   Kept max-width roomy so the split has breathing room on wide screens. */
.hero-content{
  position:relative;z-index:2;
  text-align:center;
  max-width:1200px;
  margin:0 auto;
  padding-top:20px;
}
.hero-head{
  max-width:820px;
  margin:0 auto;
}.hero-left{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:22px;
  padding:24px 8px;
  position:relative;
}
/* ── "Debate the AI" label above the orb ───────────── */
/* Override the global .hero h1 sizing, that rule wraps "DEBATE THE AI"
   to two lines once the orb column is narrow. The headline is supposed
   to sit on a single line above the orb, big enough to anchor the
   left column without competing with the main hero h1 over on the chat
   side. white-space:nowrap is non-negotiable here. */
.hero-side-label-big{
  font-size:clamp(1.6rem,2.6vw,2.4rem) !important;
  font-weight:900;
  letter-spacing:-.02em !important;
  text-transform:uppercase;color:var(--text);
  white-space:nowrap;
  line-height:1;
  margin:0 0 4px;
}
.hero-orb-caption{
  font-size:.82rem;color:var(--text-dim);line-height:1.5;
  max-width:320px;text-align:center;font-style:normal;
}

/* ── Orb: canvas-based pulsing blob, mirrors /practice aesthetic ──
   Idle state = gentle wavy circle outline. AI-speaking state (toggled
   via body.hero-orb-active) = red glow + faster pulse. The widget
   animates during mini-chat streaming for a cohesive left-right feel. */
.hero-orb-wrap{
  position:relative;
  width:min(340px,80vw);
  aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
}
.hero-orb-glow{
  position:absolute;inset:-12%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(239,68,68,.32) 0%,rgba(239,68,68,0) 65%);
  filter:blur(28px);
  opacity:.55;
  transition:opacity .4s ease;
  pointer-events:none;
}
.hero-orb-wrap.speaking .hero-orb-glow{opacity:1}
/* Ring now visible at rest, pre-upgrade it was a hairline on var(--border)
   that basically disappeared. Crimson-tinted with a soft outer glow so the
   orb reads as 'held' by a circle even before it starts speaking. */
.hero-orb-ring{
  position:absolute;inset:0;border-radius:50%;
  border:1.5px solid rgba(239,68,68,.32);
  box-shadow:0 0 32px rgba(239,68,68,.12), inset 0 0 24px rgba(239,68,68,.04);
  transition:border-color .4s ease,box-shadow .4s ease;
}
.hero-orb-wrap.speaking .hero-orb-ring{
  border-color:rgba(239,68,68,.6);
  box-shadow:0 0 50px rgba(239,68,68,.24), inset 0 0 32px rgba(239,68,68,.08);
  animation:heroOrbPulse 2.4s ease-in-out infinite;
}
@keyframes heroOrbPulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.035);opacity:.75}
}
#heroOrb{
  width:100%;height:100%;border-radius:50%;
  position:relative;z-index:1;
}

/* The orb itself is the trigger now (no separate Try-me button taking up
   vertical space and crowding the CTA row). Hovering brightens the ring +
   glow + caption hint; clicking plays a sample debate line. */
.hero-orb-wrap{cursor:pointer;transition:transform .25s ease}
.hero-orb-wrap:hover{transform:translateY(-2px)}
.hero-orb-wrap:hover .hero-orb-glow{opacity:.95}
.hero-orb-wrap:hover .hero-orb-ring{
  border-color:rgba(239,68,68,.65);
  box-shadow:0 0 50px rgba(239,68,68,.30), inset 0 0 32px rgba(239,68,68,.10);
}
.hero-orb-wrap.playing .hero-orb-glow{opacity:1}
.hero-orb-hint{
  /* Bumped from .62rem/700 + var(--text-dim) — was reading as a faint
     pink wash against the orb's radial glow on light theme + getting
     lost in the dark backdrop on crimson. Now larger, heavier weight,
     full --text color so it's unmistakable as the call-to-action. */
  font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text);margin-top:10px;text-align:center;
  transition:color .25s ease, opacity .25s ease, transform .25s ease;
  pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.18);
}
.hero-orb-wrap:hover ~ .hero-orb-hint{color:var(--accent);opacity:1;transform:translateY(-1px)}
.hero-orb-wrap.playing ~ .hero-orb-hint{color:var(--accent);opacity:1}
.hero-orb-wrap.loading ~ .hero-orb-hint{opacity:.85}
/* Light theme: use a darker accent + drop the text-shadow (would muddy
   the off-white surface). Dark/crimson keep the shadow for legibility
   over the radial-gradient backdrop. */
[data-theme="light"] .hero-orb-hint{color:#1a1a1f;text-shadow:none}
[data-theme="light"] .hero-orb-wrap:hover ~ .hero-orb-hint,
[data-theme="light"] .hero-orb-wrap.playing ~ .hero-orb-hint{color:#dc2626}

/* ── CTA row under the orb ─────────────────────────── */
.hero-left-ctas{
  display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
  margin-top:4px;
}
/* ── CTA row under BOTH columns (orb + typing card) ─────
   The split puts orb left / typing card right; this row spans the full
   hero width and centers the three primary deflections (Spar / Live /
   Case prep) so neither column "owns" the CTAs. */
.hero-cta-row{
  display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center;
  margin:32px auto 0;max-width:920px;
}.hero-cta-row .hero-cta-secondary{padding:14px 22px !important}
@media(max-width:560px){
  .hero-cta-row{gap:8px}
  .hero-cta-row > *{flex:1 1 auto;min-width:0}
}

/* ── Responsive collapse ───────────────────────────── */
@media(max-width:960px){
  /* Collapse the 2-column hero to a vertical stack. CTA stack reads
     first (primary action above the demo); chat card sits below at
     full width. */
  .hero-split{
    flex-direction:column;
    align-items:center;
    gap:28px;
    text-align:center;
    margin-top:32px;
  }
  .hero-split .hero-cta-stack{
    width:100%;
    max-width:520px;
    padding-top:0;
  }
  .hero-split .hero-cta-mega{
    /* Restore the dominant pill treatment on mobile single-column. */
    font-size:1.05rem !important;
    padding:18px 36px !important;
  }
  .hero-split .hero-cta-rail{
    /* Restore inline rail on mobile — the column expands to full width
     so the three pills fit comfortably across one line. */
    flex-direction:row;
    align-items:center;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
  }
  .hero-split .hero-cta-rail-link{width:auto;justify-content:center}
  .hero-right{min-height:0}
  .hero-right > .mini-chat{width:100%;max-width:100%}
}

/* Pro Voice nudge mobile polish. The card stacks the eyebrow + label
   row + body paragraph; on narrow phones the row needs to allow
   wrapping and the body needs slightly tighter line-height so the
   card doesn't dominate the viewport. */
@media(max-width:560px){
  .hero-pro-voice{
    padding:12px 14px !important;
    margin:14px auto 0 !important;
  }
  .hero-pro-voice > div:first-child{
    gap:6px !important;
  }
  .hero-pro-voice > div:first-child > span:first-child{
    /* Pro · Voice pill — let it sit above the headline on tight widths. */
    flex:0 0 auto;
  }
  .hero-pro-voice > div:last-child{
    font-size:.74rem !important;
    line-height:1.4 !important;
  }
}
/* Phone-specific polish. Orb shrinks to fit narrow viewports, CTA row
   wraps and re-spaces, mini-chat never overflows the viewport. */
@media(max-width:480px){
  .hero-content{padding-top:12px}
  .hero-split{margin-top:20px;gap:22px}
  .hero-orb-wrap{width:min(260px,72vw)}
  .hero-orb-caption{font-size:.76rem;max-width:280px}
  .hero-left-ctas{gap:8px}
  .hero-left-ctas > *{flex:1 1 auto;min-width:0}
  .hero-right{padding:0 2px}
  .hero-right > .mini-chat{padding:16px;min-width:0;overflow:hidden}
  .hero-right > .mini-chat .beta-msg-body{word-wrap:break-word;overflow-wrap:anywhere}
}

/* Neural constellation now lives on the shared <canvas id="uiNeuralCanvas">
   (fixed, full viewport) animated by /js/ui-neural.js. The old in-hero
   .neural-canvas + #neuralNet IIFE was removed, running two simulations
   created a visible seam between the body region and the hero region. */

.hero-eyebrow{
  font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:28px;
}

.hero h1{
  font-size:clamp(2.2rem,5vw,3.8rem);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.03em;
  line-height:.95;
  color:var(--text);
  margin-bottom:12px;
}
.hero h1 .line3{
  display:block;
  font-size:.28em;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--text-dim);
  margin-top:14px;
  font-style:normal;
  text-transform:none;
}.hero-side{position:absolute;top:18%;max-width:180px;text-align:left;z-index:3;pointer-events:none}
.hero-side-left{left:20px}
.hero-side-right{right:20px;text-align:right}
.hero-side-body{font-size:.78rem !important}
@media(min-width:1600px){.hero-side{max-width:210px;top:20%}.hero-side-left{left:48px}.hero-side-right{right:48px}}
.hero-side-label{font-size:.66rem;font-weight:800;color:var(--accent);letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.hero-side-body{font-size:.85rem;line-height:1.55;color:var(--text-dim)}
.hero-side-body em{color:var(--text);font-style:normal;font-weight:600}
@media(max-width:1400px){.hero-side{display:none}}

/* ── Hero audio-timer visual (right side) ─────
   Advertises the voice debate feature. Animated waveform inside a
   glowing red ring, small timer + caption below. Pure eye candy. */
.hero-timer{
  position:relative;
  z-index:3;
  width:100%;
  max-width:380px;
  grid-column:1;
  /* Push timer toward the middle. sit at the right edge of its column so it's
     closer to the headline rather than pinned to the far left of the viewport. */
  justify-self:end;
  align-self:start;
  margin-top:80px;
  margin-right:-24px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  /* Clickable: pressing the animation kicks off Google sign-in. Biggest visual
     element on the landing page is now the primary sign-up funnel. */
  pointer-events:auto;
  cursor:pointer;
  user-select:none;
  transition:transform .25s ease;
}
.hero-timer:hover{transform:translateY(-2px)}
.hero-timer::after{
  content:'Tap to sign in';
  position:absolute;bottom:-28px;left:50%;transform:translateX(-50%);
  font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dim);opacity:.6;white-space:nowrap;
  transition:opacity .25s ease;pointer-events:none;
}
.hero-timer:hover::after{opacity:1;color:var(--accent)}
/* Hide the hero timer on tablets/phones. it overlaps the headline below ~1100px
   and is decorative anyway. The audio-debate feature is still surfaced via the
   "Debatable" nav button and the markets section. */
@media(max-width:1100px){.hero-timer{display:none}}
.hero-timer-label{
  font-size:.58rem;font-weight:600;
  color:rgba(255,255,255,.68);
  letter-spacing:.28em;text-transform:uppercase;
  margin-bottom:12px;
  display:flex;align-items:center;gap:7px;
}
.hero-timer-label::before{
  content:'';width:5px;height:5px;border-radius:50%;
  background:#ef4444;
  box-shadow:0 0 8px rgba(239,68,68,.8);
  animation:rec-pulse 1.6s ease-in-out infinite;
}
@keyframes rec-pulse{
  0%,100%{opacity:.4;transform:scale(.85)}
  50%{opacity:1;transform:scale(1.15)}
}
.hero-timer-ring{
  position:relative;
  width:100%;aspect-ratio:1/1;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 52%, rgba(180,20,20,.5) 0%, rgba(120,10,10,.32) 32%, rgba(30,4,4,.9) 64%, rgba(8,0,0,.98) 100%);
  box-shadow:
    inset 0 0 50px rgba(0,0,0,.85),
    inset 0 0 100px rgba(180,20,20,.22),
    0 0 60px rgba(239,68,68,.2),
    0 0 120px rgba(180,20,20,.14);
  border:1px solid rgba(239,68,68,.22);
}
/* "Breathing" halo, opacity-animated overlay instead of box-shadow keyframes
   on the ring itself. Animating box-shadow with 100-150px blurs forces a full
   repaint every frame; opacity on a separate layer is GPU-composited. */
.hero-timer-ring::after{
  content:'';position:absolute;inset:0;
  border-radius:50%;
  pointer-events:none;
  box-shadow:
    inset 0 0 120px rgba(200,30,30,.3),
    0 0 85px rgba(239,68,68,.28),
    0 0 150px rgba(200,30,30,.2);
  opacity:.4;
  will-change:opacity;
  animation:timer-breathe 4.5s ease-in-out infinite;
}
.hero-timer-ring::before{
  content:'';position:absolute;inset:7%;
  border-radius:50%;
  border:1px solid rgba(239,68,68,.15);
  pointer-events:none;
}
.hero-timer-wave{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  gap:3px;
}
.hero-timer-wave span{
  display:block;
  width:3px;
  height:100%;
  border-radius:2px;
  background:linear-gradient(180deg,rgba(255,120,120,.95) 0%,rgba(239,68,68,.85) 50%,rgba(180,20,20,.75) 100%);
  box-shadow:0 0 10px rgba(239,68,68,.6),0 0 22px rgba(239,68,68,.3);
  transform-origin:center;
  animation:wave-bar 2.4s ease-in-out infinite;
}
/* Staggered bar animations. 13 bars with high variance so the waveform
   reads like real speech, not a synced equalizer. Slow + dramatic.
   Bars are full-height and scaleY between the old --min/--max heights
   (expressed as scale factors) — animating height forced layout+paint
   on all 13 siblings every frame; scaleY is compositor-only. */
.hero-timer-wave span:nth-child(1){animation-delay:.00s;--min-s:.04;--max-s:.18}
.hero-timer-wave span:nth-child(2){animation-delay:.32s;--min-s:.08;--max-s:.52}
.hero-timer-wave span:nth-child(3){animation-delay:.78s;--min-s:.06;--max-s:.88}
.hero-timer-wave span:nth-child(4){animation-delay:.18s;--min-s:.05;--max-s:.34}
.hero-timer-wave span:nth-child(5){animation-delay:1.10s;--min-s:.10;--max-s:.96}
.hero-timer-wave span:nth-child(6){animation-delay:.46s;--min-s:.06;--max-s:.62}
.hero-timer-wave span:nth-child(7){animation-delay:.92s;--min-s:.12;--max-s:1}
.hero-timer-wave span:nth-child(8){animation-delay:.24s;--min-s:.08;--max-s:.74}
.hero-timer-wave span:nth-child(9){animation-delay:1.38s;--min-s:.06;--max-s:.42}
.hero-timer-wave span:nth-child(10){animation-delay:.62s;--min-s:.09;--max-s:.84}
.hero-timer-wave span:nth-child(11){animation-delay:1.22s;--min-s:.05;--max-s:.30}
.hero-timer-wave span:nth-child(12){animation-delay:.40s;--min-s:.07;--max-s:.56}
.hero-timer-wave span:nth-child(13){animation-delay:.86s;--min-s:.04;--max-s:.14}
@keyframes wave-bar{
  0%,100%{transform:scaleY(var(--min-s,.05))}
  50%{transform:scaleY(var(--max-s,.5))}
}
.hero-timer-readout{
  margin-top:16px;
  font-family:var(--font-body);
  font-size:clamp(1.4rem,2vw,1.8rem);
  font-weight:300;
  color:#fff;
  letter-spacing:.02em;
  text-shadow:0 0 20px rgba(239,68,68,.3),0 2px 12px rgba(0,0,0,.6);
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.hero-timer-caption{
  margin-top:8px;
  font-size:.62rem;
  font-weight:500;
  color:rgba(255,255,255,.68);
  letter-spacing:.08em;
  text-align:center;
  max-width:90%;
}
.hero-timer-caption strong{
  color:rgba(255,255,255,.75);
  font-weight:600;
}
/* Rotating topic ticker. cycles through debate motions to advertise breadth */
.hero-timer-topics{
  margin-top:14px;
  width:100%;
  height:42px;
  position:relative;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 70%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 70%,transparent 100%);
}
.hero-timer-topic{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.68rem;font-weight:500;
  color:rgba(255,255,255,.68);
  text-align:center;
  line-height:1.35;
  padding:0 6px;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .55s ease,transform .55s ease;
  font-style:normal;
}
.hero-timer-topic.active{opacity:1;transform:translateY(0)}
.hero-timer-topic::before{
  content:'"';margin-right:2px;color:rgba(239,68,68,.7);font-style:normal;
}
.hero-timer-topic::after{
  content:'"';margin-left:2px;color:rgba(239,68,68,.7);font-style:normal;
}
/* Opacity-only breathe. The ::after layer carries the peak glow as a
   STATIC box-shadow; fading the layer in and out reproduces the pulse
   without repainting 100-150px shadow blurs every frame (the ring's own
   base shadow shows through at the low end). */
@keyframes timer-breathe{
  0%,100%{opacity:.12}
  50%{opacity:.9}
}
@media(max-width:1500px){.hero-timer{width:clamp(192px,16vw,240px);right:5vw}}
@media(max-width:1200px){.hero-timer{display:none}}.hero-cta-secondary{
  background:transparent !important;
  color:var(--text) !important;
  border:1px solid var(--border);
  padding:16px 32px !important;
  font-size:.95rem !important;
}
.hero-cta-secondary:hover{border-color:var(--text);background:var(--bg-card) !important}

/* .hero-cta-voice removed 2026-05-18. The class was a gold-amber
   Voice CTA from the 2026-05-09 redesign; the markup that used it
   has been gone for two weeks (no .hero-cta-voice element exists
   on this page anymore) but the CSS sat here as a regression risk —
   any future commit that re-added the class name would have
   accidentally summoned the "gross yellow" the user explicitly
   rejected. Dead code, gone. */