/* ──────────────────────────────────────────────────────────────────
   2026-05-13 SECTION HEADING UNIFY.
   Bring #voice-ai / #live-debates / #topics / #faq / #why / the style-
   memory ui-section / story onto the same editorial heading pattern as
   the rebuilt Tools section. Same eyebrow type, same sentence-case h2
   weight, same left alignment, same hairline rule under the head block.
   CSS-only — no markup changes per section, just global overrides
   scoped to .sec / .ui-section / .story. */

/* Section shell padding/width matches the editorial system. Widen
   the wrap on sections that hold grids/cards; leave the FAQ + Why
   essay narrower so body copy stays readable.
   2026-05-15: dropped section padding from 88→56 (desktop) and 64→44
   (mobile). The "one-thing-per-section with huge breathing room"
   pattern was costing ~1.5 viewport heights of scroll across the
   12+ stacked sections. Tighter rhythm reads as edited, not loose. */
.sec{padding:56px 0 !important}
.sec > .wrap{padding:0 clamp(20px,5vw,72px) !important}
#topics > .wrap{max-width:1180px !important}
#faq > .wrap{max-width:1760px !important;padding-left:clamp(20px,5vw,64px) !important;padding-right:clamp(20px,5vw,64px) !important}
#why > .wrap{max-width:820px !important}
@media(max-width:640px){.sec{padding:44px 0 !important}}

/* Legacy .sec-label → editorial eyebrow. Strip the accent-red default
   so it reads as a small-caps tag, not a brand-color shout. Override
   sec-specific colors (the green "Live Topics" hack, the per-section
   red bumps) so every eyebrow lines up. */
.sec .sec-label,
section .sec-label{
  font-size:.66rem !important;
  font-weight:700 !important;
  letter-spacing:.22em !important;
  text-transform:uppercase !important;
  color:rgba(255,255,255,.68) !important;
  margin-bottom:12px !important;
  text-align:left !important;
  display:inline-block;
}
[data-theme="light"] .sec .sec-label,
[data-theme="light"] section .sec-label{color:rgba(0,0,0,.64) !important}

/* Legacy .sec-title → editorial headline. Sentence case, lighter weight,
   tighter letter-spacing, more breathing line-height. The hh-accent
   inside picks up the crimson gradient. */
.sec .sec-title,
section .sec-title{
  font-size:clamp(1.7rem,3.4vw,2.6rem) !important;
  font-weight:700 !important;
  letter-spacing:-.025em !important;
  line-height:1.1 !important;
  text-transform:none !important;
  color:var(--text) !important;
  margin-bottom:18px !important;
  text-align:left !important;
  max-width:820px;
}
.sec .sec-title em.hh-accent,
section .sec-title em.hh-accent{
  color:#dc2626;
  font-style:normal;
  font-weight:700;
  letter-spacing:-.025em;
  background:linear-gradient(180deg,#f87171 0%,#dc2626 80%,#991b1b 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding-right:.08em;margin-right:-.04em;
}

/* Sub-paragraph under the section title. */
.sec .sec-sub,
section .sec-sub{
  text-align:left !important;
  margin:0 0 36px !important;
  max-width:680px !important;
  font-size:1.02rem !important;
  line-height:1.6 !important;
  color:rgba(255,255,255,.72) !important;
}
[data-theme="light"] .sec .sec-sub,
[data-theme="light"] section .sec-sub{color:rgba(0,0,0,.64) !important}

/* Hairline under the section head group. Targets the first text-content
   block (usually a div wrapping label + h2) so the rule sits below the
   intro without us touching every section's markup. */
.sec .wrap > .sec-label{padding-top:0}
.sec .wrap > .sec-sub + *{margin-top:0}

/* Override .wrap text-align:center inline styles. Voice AI + Live
   Debates use `style="text-align:center"` on the wrap — kill that
   so the new left-aligned heading pattern applies. */
section#voice-ai .wrap[style*="text-align:center"],
section#live-debates .wrap[style*="text-align:center"]{
  text-align:left !important;
}

/* Voice AI + Live Debates inline-styled chip eyebrows — restyle into
   editorial eyebrow pills (still with the pulsing red dot, just at the
   editorial type scale + left-aligned + no glow). */
#voice-ai > .wrap > div:first-child,
#live-debates > .wrap > div:first-child{
  display:inline-flex !important;
  align-items:center;gap:10px !important;
  padding:6px 14px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.07) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  font-size:.66rem !important;
  font-weight:700 !important;
  letter-spacing:.22em !important;
  text-transform:uppercase !important;
  color:rgba(255,255,255,.92) !important;
  margin-bottom:18px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

/* Voice AI + Live Debates headlines + paragraphs left-align. */
#voice-ai h2, #live-debates h2{
  text-align:left !important;
  margin-bottom:14px !important;
  max-width:780px;
}
#voice-ai > .wrap > p,
#live-debates > .wrap > p{
  text-align:left !important;
  margin-left:0 !important;
  margin-right:0 !important;
  max-width:680px !important;
}
#voice-ai .voice-ai-chips,
#voice-ai > .wrap > div[style*="justify-content:center"][style*="flex-wrap"],
#live-debates > .wrap > div[style*="justify-content:center"][style*="flex-wrap"]{
  justify-content:flex-start !important;
}

/* CTA rows under voice-ai / live-debates — left align with the rest. */
#voice-ai > .wrap > div[style*="display:flex"][style*="justify-content:center"]:not(.voice-ai-chips),
#live-debates > .wrap > div[style*="display:flex"][style*="justify-content:center"]{
  justify-content:flex-start !important;
}

/* Style memory section (#signupCtaBtn wrapper) — left-align too. */
section.ui-section{text-align:left !important}
section.ui-section .ui-container-sm,
section.ui-section .ui-container{
  text-align:left !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
section.ui-section .ui-eyebrow{
  font-size:.66rem !important;
  font-weight:700 !important;
  letter-spacing:.22em !important;
  color:rgba(255,255,255,.68) !important;
  background:transparent !important;
  border:none !important;
  padding:0 !important;
  margin-bottom:12px !important;
  display:inline-block !important;
  text-transform:uppercase !important;
}
section.ui-section .ui-h1{
  font-size:clamp(1.7rem,3.4vw,2.6rem) !important;
  font-weight:700 !important;
  letter-spacing:-.025em !important;
  line-height:1.1 !important;
  text-transform:none !important;
  text-align:left !important;
}
section.ui-section .ui-h1 br{display:none}
section.ui-section .ui-h1 .accent{
  color:#dc2626 !important;
  background:linear-gradient(180deg,#f87171 0%,#dc2626 80%,#991b1b 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
section.ui-section .ui-lede{
  text-align:left !important;
  margin:0 0 28px !important;
  max-width:680px !important;
  font-size:1.02rem !important;
}

/* Story / "Why I built this" — left-align, editorial eyebrow, real
   paragraph spacing (was margin:0 → paragraphs ran together as one
   wall of text). */
.story{text-align:left !important;padding-bottom:48px !important}
.story .sec-label{margin-bottom:22px !important}
.story-text{
  margin:0 0 18px !important;
  max-width:760px !important;
  font-size:1rem !important;
  line-height:1.65 !important;
  color:rgba(255,255,255,.78) !important;
}
[data-theme="light"] .story-text{color:rgba(0,0,0,.68) !important}
.story-text:last-of-type{margin-bottom:0 !important}
.story-text strong{color:var(--text);font-weight:700}
/* Signature row — monogram avatar + name + role. Anchors the founder
   voice at the bottom of the essay. */
.story-sig-row{
  display:flex;align-items:center;gap:14px;
  margin-top:32px !important;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.08);
  max-width:640px;
}
[data-theme="light"] .story-sig-row{border-top-color:rgba(0,0,0,.08)}
.story-sig-avatar{
  flex:0 0 auto;
  width:40px;height:40px;
  display:inline-flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 4px 12px rgba(220,38,38,.18));
}
.story-sig-avatar svg{display:block}
.story-sig{
  margin:0 !important;
  display:flex;flex-direction:column;gap:2px;
  font-size:.86rem !important;
  font-weight:600;
  letter-spacing:-.005em;
  color:rgba(255,255,255,.92) !important;
  line-height:1.3;
}
.story-sig strong{
  color:var(--text);font-weight:700;
  font-size:.94rem;
  letter-spacing:-.01em;
}
.story-sig-meta{
  font-size:.74rem;
  font-weight:500;
  color:rgba(255,255,255,.68);
  letter-spacing:.01em;
}
[data-theme="light"] .story-sig{color:rgba(0,0,0,.78) !important}
[data-theme="light"] .story-sig-meta{color:rgba(0,0,0,.64)}

/* Story pair — places #story (founder essay) and #build-with-me
   (founder ask) side-by-side as two columns instead of stacked. The
   inner .story styles still drive paragraph rhythm and the signature
   row; this layer just swaps the container shape and adds a thin
   vertical divider between the columns. Collapses to a single column
   below 900px. */
.story-pair{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;
  max-width:1280px;margin:0 auto;padding:0 24px;
  align-items:start;
}
/* When the pair has only one section (after #story moved up next
   to the founder video), collapse to a single centered column with
   a narrower max-width and no vertical divider. */
.story-pair:has(> .story:only-child){
  grid-template-columns:1fr;
  max-width:760px;
}
.story-pair:has(> .story:only-child) > .story:first-child{
  border-right:none !important;
  padding-right:0 !important;
}
.story-pair > .story{
  padding:48px 0 32px !important;
  width:100%;
}
.story-pair > .story:first-child{
  border-right:1px solid rgba(255,255,255,.08);
  padding-right:48px !important;
}
[data-theme="light"] .story-pair > .story:first-child{
  border-right-color:rgba(0,0,0,.08);
}
.story-pair .story-text,
.story-pair .story-sig-row{
  max-width:none !important;
}
@media(max-width:900px){
  .story-pair{grid-template-columns:1fr;gap:0;padding:0}
  .story-pair > .story{padding:48px 24px 32px !important}
  .story-pair > .story:first-child{
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,.08);
    padding-right:0 !important;
  }
  [data-theme="light"] .story-pair > .story:first-child{
    border-bottom-color:rgba(0,0,0,.08);
  }
}

/* Why section — already mostly left-aligned but the sec-title was
   uppercase + heavy. The global sec-title override above handles it.
   .why-p replaces the per-paragraph inline styles so the body copy
   sits at the editorial reading scale. */
.why-p{
  font-size:1rem;line-height:1.7;
  color:rgba(255,255,255,.78);
  max-width:680px;
  margin:0 0 22px;
}
.why-p:last-of-type{margin-bottom:0}
.why-p strong{color:var(--text);font-weight:700}
[data-theme="light"] .why-p{color:rgba(0,0,0,.68)}

/* ── Tools section — editorial rebuild ───────────────────────────── */
.tools-section{
  padding:48px clamp(20px,5vw,72px) 40px;
  max-width:1280px;margin:0 auto;
  position:relative;
}
.tools-wrap{max-width:1180px;margin:0 auto}
.tools-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:32px;flex-wrap:wrap;
  margin-bottom:36px;
  padding-bottom:22px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
[data-theme="light"] .tools-head{border-bottom-color:rgba(0,0,0,.08)}
.tools-headline{
  font-size:clamp(2rem,3.6vw,2.8rem);
  font-weight:700;
  letter-spacing:-.03em;line-height:1.05;
  color:var(--text);
  margin:0;
}
.tools-headline em.hh-accent{
  /* Reuse the hero accent treatment so this h2 reads as one of "us". */
  color:#dc2626;
  font-style:normal;
  font-weight:700;
  letter-spacing:-.025em;
  background:linear-gradient(180deg,#f87171 0%,#dc2626 80%,#991b1b 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding-right:.08em;margin-right:-.04em;
}
.tools-brand-row{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px;border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.14);
  font-size:.78rem;
  color:rgba(255,255,255,.85);
  letter-spacing:-.005em;
  flex-wrap:wrap;
}
[data-theme="light"] .tools-brand-row{
  background:rgba(0,0,0,.03);
  border-color:rgba(0,0,0,.10);
  color:rgba(0,0,0,.72);
}
.tools-brand-label{
  font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.68);
  padding-right:4px;
  border-right:1px solid rgba(255,255,255,.16);
  margin-right:4px;
}
[data-theme="light"] .tools-brand-label{
  color:rgba(0,0,0,.64);
  border-right-color:rgba(0,0,0,.10);
}
.tools-brand{
  font-weight:700;
  color:rgba(255,255,255,.95);
}
[data-theme="light"] .tools-brand{color:#1a1a1f}
.tools-brand-sep{
  color:rgba(255,255,255,.68);font-weight:400;user-select:none;
}
[data-theme="light"] .tools-brand-sep{color:rgba(0,0,0,.64)}

/* 2026-05-18: animated brain-logo discs inside the "Powered by" pill.
   Six circles, each holding a brand mark; staggered float so the row
   feels alive without competing with the headline. */
.tools-brand-row--logos{padding:6px 12px}
.tb-logos{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.tb-logo{
  width:34px;height:34px;border-radius:50%;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 1px 2px rgba(0,0,0,.05), inset 0 0 0 1px rgba(255,255,255,.6);
  transition:transform .2s ease, box-shadow .2s ease;
  animation: tb-float 5.5s ease-in-out infinite;
  will-change: transform;
}
.tb-logo img{
  width:62%;height:62%;object-fit:contain;display:block;
  -webkit-user-drag:none;user-select:none;pointer-events:none;
}
.tb-logo[data-brain="grok"] img{width:54%;height:54%}
.tb-logo[data-brain="gemini"] img{width:64%;height:64%}
.tb-logo[data-brain="deepseek"] img{width:70%;height:70%}
.tb-logo[data-brain="claude"] img{width:60%;height:60%}
.tb-logo[data-brain="gpt"] img{width:80%;height:80%;border-radius:50%}
.tb-logo[data-brain="openlab"] img{width:64%;height:64%}
.tb-logo:nth-child(1){animation-delay:0s}
.tb-logo:nth-child(2){animation-delay:.45s}
.tb-logo:nth-child(3){animation-delay:.9s}
.tb-logo:nth-child(4){animation-delay:1.35s}
.tb-logo:nth-child(5){animation-delay:1.8s}
.tb-logo:nth-child(6){animation-delay:2.25s}
.tb-logo:hover{
  transform:translateY(-3px) scale(1.08);
  box-shadow:0 6px 14px rgba(0,0,0,.12), inset 0 0 0 1px rgba(255,255,255,.6);
}
/* Open Lab logo: green open-source mark; sits on the same white disc
   as the other brain logos for visual harmony in the row. */
.tb-logo--ol{
  background:#fff;
}
[data-theme="light"] .tb-logo{
  background:#fff;
  border-color:rgba(0,0,0,.10);
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
@keyframes tb-float{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-3px)}
}
@media (prefers-reduced-motion: reduce){
  .tb-logo{animation:none}
}
@media(max-width:640px){
  .tb-logo{width:30px;height:30px}
  .tb-logos{gap:6px}
  .tb-logo--ol{font-size:.66rem}
}

/* Cards: numbered, hover lifts toward muted crimson without a wash. */
.tools-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
@media(max-width:1024px){.tools-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.tools-grid{grid-template-columns:1fr}}
/* "Use it beyond rounds" — 4 narrow cards in a single row at wide
   widths so the four use-cases read as a horizontal lineup, not a
   3+1 wrap. Steps down through 4→2→1 like the base grid. */
.tools-grid.tools-grid--four{grid-template-columns:repeat(4,1fr)}
@media(max-width:1024px){.tools-grid.tools-grid--four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.tools-grid.tools-grid--four{grid-template-columns:1fr}}
/* 3-up variant for the "Use it beyond rounds" section. 6 cards in
   two clean rows of 3 instead of the 4+2 orphaned wrap. Steps down
   3→2→1 across breakpoints. */
.tools-grid.tools-grid--three{grid-template-columns:repeat(3,1fr)}
@media(max-width:1024px){.tools-grid.tools-grid--three{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.tools-grid.tools-grid--three{grid-template-columns:1fr}}
/* Audience-tag pill replaces the old roman numerals on the beyond-
   rounds cards. Same purple as the section label, sized to read as
   a small scanning hook ("is this card for me?"). */
.tool-tag{
  display:inline-block;font-size:.62rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;
  color:#c084fc;margin-bottom:10px;
}
[data-theme="light"] .tool-tag{color:#7c3aed}
/* Linked variant of .tool-card. Stops the default anchor underline,
   inherits color so the existing card typography still wins, and
   adds the trailing arrow's hover affordance. */
.tool-card--linked{text-decoration:none;color:inherit}
.tool-card--linked .tool-arrow{
  align-self:flex-end;margin-top:auto;
  font-size:1.05rem;color:rgba(255,255,255,.68);
  transition:color .18s ease,transform .18s ease;
}
.tool-card--linked:hover .tool-arrow{color:#f87171;transform:translateX(4px)}
[data-theme="light"] .tool-card--linked .tool-arrow{color:rgba(0,0,0,.64)}
[data-theme="light"] .tool-card--linked:hover .tool-arrow{color:#b91c1c}
.tool-card{
  display:flex;flex-direction:column;
  padding:26px 26px 22px;
  background:linear-gradient(180deg,rgba(20,20,24,.5) 0%,rgba(14,14,18,.6) 100%);
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  text-decoration:none;color:inherit;
  position:relative;overflow:hidden;
  transition:border-color .22s ease, background .22s ease, transform .22s ease, box-shadow .22s ease;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.tool-card:hover{
  border-color:rgba(220,38,38,.5);
  background:linear-gradient(180deg,rgba(28,18,20,.6) 0%,rgba(18,12,14,.7) 100%);
  transform:translateY(-3px);
  box-shadow:0 22px 60px -28px rgba(220,38,38,.5);
}
[data-theme="light"] .tool-card{
  background:#fff;
  border-color:rgba(0,0,0,.08);
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
[data-theme="light"] .tool-card:hover{
  border-color:rgba(220,38,38,.5);
  box-shadow:0 14px 32px rgba(220,38,38,.10);
}
.tool-num{
  font-size:.66rem;font-weight:800;letter-spacing:.16em;
  color:rgba(220,38,38,.85);
  margin-bottom:14px;display:block;
}
[data-theme="light"] .tool-num{color:#b91c1c}
.tool-card h3{
  font-size:1.05rem;font-weight:700;
  letter-spacing:-.015em;line-height:1.25;
  color:var(--text);
  margin:0 0 10px;
  text-transform:none;
}
.tool-card p code,
.tool p code,
.tools .tool p code{
  font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.82em;
  padding:1px 6px;
  background:rgba(168,85,247,.10);
  border:1px solid rgba(168,85,247,.22);
  border-radius:4px;
  color:#e9d5ff;
  white-space:nowrap;
}
[data-theme="light"] .tool-card p code,
[data-theme="light"] .tool p code{
  background:rgba(168,85,247,.08);
  border-color:rgba(168,85,247,.30);
  color:#6b21a8;
}
.tool-card p{
  font-size:.88rem;line-height:1.55;
  color:rgba(255,255,255,.7);
  margin:0 0 18px;
  flex:1;
}
[data-theme="light"] .tool-card p{color:rgba(0,0,0,.64)}
.tool-cta{
  font-size:.74rem;font-weight:700;letter-spacing:.04em;
  color:rgba(255,255,255,.78);
  display:inline-flex;align-items:center;gap:8px;
  transition:color .22s ease, gap .22s ease;
}
.tool-card:hover .tool-cta{color:#f87171;gap:12px}
[data-theme="light"] .tool-cta{color:rgba(0,0,0,.7)}
[data-theme="light"] .tool-card:hover .tool-cta{color:#b91c1c}

/* .tool-card-feature removed 2026-05-18. The "featured tool" amber
   outline was a relic of the gold-amber Voice CTA era; the class
   isn't applied to anything in the current markup. Dead code, gone
   along with the gross-yellow regression risk. */

@media(max-width:640px){
  .tools-section{padding:44px 20px 48px}
  .tools-head{margin-bottom:24px;padding-bottom:18px}
  .tools-headline{font-size:1.7rem}
  .tools-brand-row{font-size:.74rem;padding:6px 12px}
}

/* Story section — keep editorial. */
.story{
  padding:80px clamp(20px,5vw,72px) 40px !important;
  max-width:760px;margin:0 auto;
}
.story .sec-label{
  font-size:.66rem !important;
  letter-spacing:.22em !important;
  color:rgba(255,255,255,.68) !important;
  font-weight:600 !important;
  margin-bottom:28px;
}
[data-theme="light"] .story .sec-label{color:rgba(0,0,0,.64) !important}

/* Mobile pass for new editorial hero — single column, smaller type. */
@media(max-width:768px){
  section.hero{padding:96px 20px 64px !important}
  .hero-headline{font-size:clamp(2.2rem,9vw,3.2rem) !important;line-height:1}
  .hero-sub{font-size:1rem;margin-bottom:28px}
  .hero-ctas{gap:10px;margin-bottom:40px}
  .btn-editorial{padding:13px 22px;font-size:.88rem}
  .btn-editorial:not(.btn-editorial-primary){flex:1 1 auto}
  .aud-section,.how-section{padding-left:20px;padding-right:20px}
  .final-cta{padding:80px 20px}
  .editorial-signin-row{font-size:.76rem}
}
@media(max-width:480px){
  .hero-headline{font-size:2.2rem !important}
  .hero-ctas{flex-direction:column;align-items:stretch}
  .btn-editorial{width:100%;justify-content:center}
}