/* TalkBot, extras */
/* Safety net: constrain ALL inline SVGs that don't carry their own width/height.
   Some browsers + React combos can render an unsized <svg> at 100vw if its parent is flex/grid.
   This caps any rogue SVG to 1em (effectively icon-sized) until explicitly enlarged. */
svg:not([width]):not([height]) { width: 1em; height: 1em; }
.logo svg, .logo img { width: 28px !important; height: 28px !important; }
.nav .logo img { display: block; }

.problem-num {
  font-size: 48px; line-height: 1;
  font-family: 'Instrument Serif', serif;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  color: var(--ink);
}
.problem-num .muted { font-size: 14px; color: var(--ink-3); }

.cursor-blink { display: inline-block; animation: blink 1s steps(2) infinite; color: oklch(0.78 0.16 70); }
@keyframes blink { 50% { opacity: 0; } }

/* gentle scroll behavior */
html { scroll-behavior: smooth; }

/* tighter mobile heroes */
@media (max-width: 700px) {
  .hero { padding: 56px 0 40px; }
  .section { padding: 64px 0; }
  .final-cta { padding: 40px 24px; }
}