/* When the only visible CTA in .hero-ctas is "Debatable" (Sign
   in button is hidden), drop the cta-row gap entirely so the row's
   intrinsic height is just the mega-button height with no padding
   stretching it. */
body.signed-in .hero-ctas{gap:8px}
.hero-pill-rail{
  display:flex;align-items:center;gap:14px 15px;flex-wrap:wrap;
  margin:20px 0 0;
  max-width:600px;
  font-size:.98rem;
}
.hero-pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 24px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.26);
  color:rgba(255,255,255,.96);
  font-weight:700;letter-spacing:-.005em;
  text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 4px 12px rgba(0,0,0,.22);
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .15s ease;
}
.hero-pill:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.42);
  color:#fff;
  transform:translateY(-1px);
}
[data-theme="light"] .hero-pill{
  background:rgba(255,255,255,.78);
  border-color:rgba(0,0,0,.08);
  color:rgba(0,0,0,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 8px 20px rgba(0,0,0,.08);
}
[data-theme="light"] .hero-pill:hover{
  background:#fff;
  border-color:rgba(0,0,0,.16);
  color:#1a1a1f;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 12px 26px rgba(0,0,0,.12);
}
/* Voice "New" pill matches the default .hero-pill styling now; only the
   small .hero-pill-tag badge below carries the accent. The pill was
   previously red-highlighted (hero-pill-new) to flag Voice as new, but
   that made it shout louder than its peer pills. */
/* 2026-05-26 (rev2): primary + secondary pill tiers.
   PRIMARY pills (Adaptive voice + Debate Omegle) sit ABOVE the stage,
   bigger / fuller / brand-red filled. They're the "enter the room"
   actions and should feel like the dominant CTA pair on the page.
   SECONDARY pills (Prep / Scheduled / Credential) sit BELOW the stage
   in a lighter, smaller, monochrome treatment. They're paths people
   can take if they're not ready to enter a live round yet. */
.hero-pill-rail--primary{
  /* 2026-05-26 rev5: tightened from flank-the-stage giants to a
     compact segmented feature row. Critique was that the pills
     read as "massive floating buttons" detached from the rest of
     the composition. Now: smaller padding, no glow halo, baseline
     aligned with the orb card, gap reduced. Reads as feature
     selectors, not climax CTAs. */
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:8px;margin:0 auto 16px;
}
.hero-pill--primary{
  padding:8px 16px;
  background:transparent;
  border:1px solid rgba(239,68,68,.32);
  color:rgba(255,255,255,.86);
  font-weight:600;
  letter-spacing:-.005em;font-size:.88rem;
  box-shadow:none;
}
.hero-pill--primary:hover{
  background:rgba(239,68,68,.10);
  border-color:rgba(239,68,68,.55);
  color:#fff;
}
[data-theme="light"] .hero-pill--primary{
  background:transparent;
  border-color:rgba(220,38,38,.34);
  color:#7f1d1d;
  box-shadow:none;
}
[data-theme="light"] .hero-pill--primary:hover{
  background:rgba(220,38,38,.06);
  border-color:rgba(220,38,38,.52);
  color:#7f1d1d;
}
.hero-pill-rail--secondary{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:6px 14px;margin:18px auto 0;
  font-size:.86rem;
}
.hero-pill--secondary{
  padding:8px 14px;
  background:transparent;
  border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.74);
  font-weight:500;letter-spacing:.005em;font-size:.86rem;
  box-shadow:none;
}
.hero-pill--secondary:hover{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.32);
  color:#fff;
}
[data-theme="light"] .hero-pill--secondary{
  background:transparent;
  border-color:rgba(0,0,0,.12);
  color:rgba(0,0,0,.64);
  box-shadow:none;
}
[data-theme="light"] .hero-pill--secondary:hover{
  background:rgba(0,0,0,.03);
  border-color:rgba(0,0,0,.22);
  color:#1a1a1f;
}
.hero-pill-rail--secondary .hero-pill-sep{display:inline}

.hero-pill-tag{
  font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;
  background:rgba(239,68,68,.18);
  border:1px solid rgba(239,68,68,.50);
  color:#fca5a5;
}
[data-theme="light"] .hero-pill-tag{
  background:rgba(220,38,38,.14);
  border-color:rgba(220,38,38,.42);
  color:#b91c1c;
}
.hero-pill-sep{
  display:none;
  color:rgba(255,255,255,.68);
  font-weight:400;
  user-select:none;
  pointer-events:none;
  padding:0 2px;
}
[data-theme="light"] .hero-pill-sep{color:rgba(0,0,0,.64)}
/* Live debates pill. Same shape as other hero pills but with a small
   pulsing red dot so the "real humans live right now" signal is obvious
   at a glance — matches the LIVE chip styling on the bento tool tile
   and the .fa-thumb-tag dot on the demo-video card below. */
.hero-pill-live{
  display:inline-flex;align-items:center;gap:8px;
}
.hero-pill-live-dot{
  width:7px;height:7px;border-radius:50%;background:#ef4444;
  box-shadow:0 0 0 0 rgba(239,68,68,.55);
  animation:hero-pill-live-pulse 1.7s ease-out infinite;
  flex-shrink:0;
}
@keyframes hero-pill-live-pulse{
  0%  {box-shadow:0 0 0 0 rgba(239,68,68,.55)}
  70% {box-shadow:0 0 0 8px rgba(239,68,68,0)}
  100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}
}
@media (prefers-reduced-motion:reduce){
  .hero-pill-live-dot{animation:none}
}
@media(max-width:560px){
  .hero-pill-sep{display:none}
  .hero-pill-rail{gap:8px;font-size:.92rem}
  .hero-pill{padding:10px 16px}
  /* 'Still being built. Join the Discord' was 402px wide on a 375px
     viewport (clipped by overflow-x:hidden). Allow it to wrap and
     shrink its padding + font so it fits cleanly. */
  .hero-still-built{
    padding:10px 16px;font-size:.88rem;
    white-space:normal;text-align:center;
    line-height:1.3;
  }
}
.btn-editorial{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  min-height:60px;
  min-width:210px;
  padding:0 34px;
  border-radius:12px;
  font-family:inherit;
  font-size:1.05rem;font-weight:600;
  letter-spacing:-.005em;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  flex:0 0 auto;
  transition:transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn-editorial-primary{
  background:#dc2626;
  color:#fff;
  box-shadow:0 14px 30px rgba(220,38,38,.20),inset 0 1px 0 rgba(255,255,255,.16);
  border-color:rgba(220,38,38,.7);
}
.btn-editorial-primary:hover{
  background:#b91c1c;
  transform:translateY(-2px);
  box-shadow:0 18px 38px rgba(220,38,38,.28),inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-editorial-primary .arrow{transition:transform .2s ease}
.btn-editorial-primary:hover .arrow{transform:translateX(3px)}
.btn-editorial-secondary{
  background:rgba(255,255,255,.09);
  color:#fff;
  border-color:rgba(255,255,255,.32);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 4px 12px rgba(0,0,0,.25);
}
.btn-editorial-secondary:hover{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.55);
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 6px 16px rgba(0,0,0,.30);
}
.btn-editorial-secondary .voice-dot{
  width:7px;height:7px;border-radius:50%;
  background:#dc2626;
  box-shadow:0 0 0 3px rgba(220,38,38,.16);
  animation:editorial-pulse 2s ease-in-out infinite;
}
[data-theme="light"] .btn-editorial-secondary{
  background:rgba(0,0,0,.03);
  color:#1a1a1f;
  border-color:rgba(0,0,0,.14);
}
[data-theme="light"] .btn-editorial-secondary:hover{
  background:rgba(0,0,0,.06);
  border-color:rgba(0,0,0,.28);
}
/* Google sign-up — white card with the colored G, sized to match the
   primary "Start arguing" button so the two read as equal-weight
   conversion paths. Stands out against the dark hero on purpose;
   the brand convention for "Sign in with Google" is white-bg. */
.btn-editorial-google{
  background:#fff;
  color:#1a1a1f;
  border-color:rgba(255,255,255,.92);
  box-shadow:0 8px 22px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.6);
  font-weight:600;
  letter-spacing:-.005em;
}
.btn-editorial-google:hover{
  background:#f5f5f0;
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.6);
}
.btn-editorial-google svg{flex-shrink:0}
[data-theme="light"] .btn-editorial-google{
  border-color:rgba(0,0,0,.14);
  box-shadow:0 4px 12px rgba(0,0,0,.10);
}
[data-theme="light"] .btn-editorial-google:hover{
  border-color:rgba(0,0,0,.24);
  box-shadow:0 6px 16px rgba(0,0,0,.14);
}
@keyframes editorial-pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.55;transform:scale(.85)}
}