/* Extracted from how-it-works.html */
    /* ============================================================
       PALETTE REFRESH — match the snapshot page (Anthropic warm minimal).
       Overrides shared.css tokens on this page only via body-scoped vars.
       Strips drop shadows + softens border-radius for the 2026 flat aesthetic. */
    body {
      --bg: #faf9f5;
      --bg-warm: #faf9f5;
      --surface: #ffffff;
      --ink: #141413;
      --ink-soft: #1a1a18;
      --ink-mid: #4a4a47;
      --muted: #8c8a82;
      --muted-soft: #b8b5ac;
      --line: #e6e3da;
      --line-fine: #ece9df;
      --accent: #4f5944;
      --accent-deep: #383f30;
      --accent-soft: rgba(79, 89, 68, 0.08);
      --accent-tint: rgba(79, 89, 68, 0.10);
      --accent-line: rgba(79, 89, 68, 0.22);
      background: #faf9f5;
      color: #141413;
    }
    /* 2026 flat: no drop shadows, no rounded blob cards. */
    .split-hero, .split-hero__visual, .quick-bento__cell, .faq__item,
    .sources-list__row, .step-mock, .step-mock__paper, .pdf-page,
    .step-mock--match, .step-mock--input, .step-mock--pdf,
    .btn-primary, .btn-secondary, .nav__cta, .story-step__visual,
    .matched-card, .signals-table, .signal-row, .figure, .info-only,
    .buy-cta, .matched-card__cta, .source-summary-card,
    .core-check-card, .source-types-card { box-shadow: none !important; }
    /* Buttons: flat terracotta block, sharp corners. */
    .btn-primary {
      border-radius: 4px !important;
      background: #141413 !important;
      color: #ffffff !important;
      transition: background 220ms ease !important;
    }
    .btn-primary:hover {
      background: var(--accent) !important;
      transform: none !important;
    }
    .split-hero__cta {
      background: #141413 !important;
      color: #ffffff !important;
      border-radius: 4px !important;
      box-shadow: none !important;
      transition: background 220ms ease !important;
    }
    .split-hero__cta:hover {
      background: var(--accent) !important;
      transform: none !important;
      box-shadow: none !important;
    }
    /* Why-this-exists — editorial manifesto, names the problem not competitors.
       Hairline rules, big serif title, italic prose body. No card chrome. */
    .why-exists {
      padding: 72px 0 64px;
      border-top: 1px solid var(--line-fine);
      border-bottom: 1px solid var(--line-fine);
    }
    .why-exists__kicker {
      font-family: "Geist Mono", ui-monospace, monospace;
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--accent);
      font-weight: 600;
      display: inline-flex; align-items: center; gap: 12px;
      margin-bottom: 22px;
    }
    .why-exists__kicker::before {
      content: ""; width: 22px; height: 1px; background: var(--accent);
    }
    .why-exists__title {
      font-family: "Fraunces", Georgia, serif;
      font-size: clamp(1.9rem, 3.2vw, 2.6rem);
      font-weight: 400;
      letter-spacing: -0.014em;
      line-height: 1.06;
      color: var(--ink);
      margin: 0 0 24px;
      max-width: 22ch;
      font-variation-settings: "opsz" 80, "SOFT" 30;
    }
    .why-exists__title em {
      font-style: italic;
      color: var(--accent);
    }
    .why-exists__body {
      font-family: "Fraunces", Georgia, serif;
      font-size: clamp(17px, 1.8vw, 19px);
      line-height: 1.55;
      color: var(--ink);
      margin: 0;
      max-width: 64ch;
      font-variation-settings: "opsz" 24, "SOFT" 30;
    }
    .why-exists__body em {
      font-style: italic;
      color: var(--accent);
    }

    /* ============================================================
       ADVANCED LAYER — scroll-reveal, typewriter, timeline. ============================================================ */

    /* Vertical timeline rule connecting the three step numbers */
    .story-steps {
      position: relative;
    }
    .story-steps::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 80px; bottom: 80px;
      width: 1px;
      background: linear-gradient(180deg, transparent 0%, var(--accent-line) 12%, var(--accent-line) 88%, transparent 100%);
      opacity: 0.6;
      pointer-events: none;
      z-index: 0;
    }
    @media (max-width: 880px) {
      .story-steps::before { left: 24px; }
    }
    /* Step numbers — bigger, italic, olive — like a timeline marker */
    .story-step__num {
      font-family: "Fraunces", Georgia, serif !important;
      font-style: italic !important;
      font-size: clamp(48px, 5.8vw, 72px) !important;
      color: var(--accent) !important;
      font-weight: 400 !important;
      font-variation-settings: "opsz" 144, "SOFT" 50 !important;
      letter-spacing: -0.04em !important;
      line-height: 0.85 !important;
      background: var(--bg) !important;
      padding: 0 14px !important;
      position: relative !important;
      z-index: 1 !important;
      display: inline-block !important;
    }

    /* Scroll-reveal on each step */
    .story-step {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 700ms ease, transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    .story-step.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Typewriter cursor for the autocomplete mockup */
    .step-mock--input .typed {
      display: inline-block;
      position: relative;
    }
    .step-mock--input .typed::after {
      content: "";
      display: inline-block;
      width: 1.5px; height: 1em;
      background: var(--accent);
      margin-left: 2px;
      vertical-align: text-bottom;
      animation: typewriter-caret 1.1s steps(1) infinite;
    }
    @keyframes typewriter-caret {
      0%, 50% { opacity: 1; }
      51%, 100% { opacity: 0; }
    }
    /* Suggestions fade in once typing finishes */
    .step-mock--input .suggestions {
      opacity: 0;
      transition: opacity 600ms ease 1100ms;
    }
    .story-step.is-visible .step-mock--input .suggestions {
      opacity: 1;
    }
  

/* Former style attributes from how-it-works.html */
.lg-inline-style-aeac853d64 { text-align: center; }
.lg-inline-style-ca626511a5 { font-family: 'Fraunces', Georgia, serif; font-size: clamp(2rem, 3.4vw, 2.6rem); font-weight: 400; letter-spacing: -0.012em; margin-bottom: 12px; line-height: 1.05; }
.lg-inline-style-96ab056401 { font-style: italic; color: var(--accent); }
.lg-inline-style-62924e1060 { font-size: 15.5px; color: var(--ink-mid); margin-bottom: 24px; }