/* Self-hosted, variable, latin. Fraunces = editorial display, Newsreader = warm
       reading serif. Self-hosted so there is no third-party request or GDPR exposure. */
    @font-face {
      font-family: "Fraunces";
      font-style: normal;
      font-weight: 300 900;
      font-display: swap;
      src: url("/https/formspal.com/ai-document-maker/fraunces-latin.woff2") format("woff2");
    }
    @font-face {
      font-family: "Newsreader";
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url("/https/formspal.com/ai-document-maker/newsreader-400-latin.woff2") format("woff2");
    }
    @font-face {
      font-family: "Newsreader";
      font-style: normal;
      font-weight: 600;
      font-display: swap;
      src: url("/https/formspal.com/ai-document-maker/newsreader-600-latin.woff2") format("woff2");
    }
    :root {
      --primary: #0e8a5f; --primary-dark: #0b6e4c; --primary-light: #e6f4ee; --btn: #0b6e4c;
      --ink: #1c2530; --ink-soft: #51606f; --faint: #6b7785; --line: #cdd5de;
      --bg: #f7f9fb; --white: #ffffff; --footbg: #11181c; --footink: #c4ccd4; --footline: #243038;
    }
    html[data-fpai-theme="dark"] {
      --primary: #16a571; --primary-dark: #34c188; --primary-light: #143323; --btn: #0c7a54;
      --ink: #f2f5f7; --ink-soft: #aab5bf; --faint: #8e99a4; --line: #2a3036;
      --bg: #15181b; --white: #1e2329; --footbg: #0c1114; --footink: #aab5bf; --footline: #1c252b;
    }
    * { box-sizing: border-box; }
    /* Guard against horizontal scroll from decorative bleed (added for the old hero glow; kept as a general guard).
       `clip` (not `hidden`) keeps the sticky header working. Applied to html AND body:
       `clip` on the root element alone doesn't reliably stop the propagated viewport scroll. */
    html, body { overflow-x: clip; }
    body {
      margin: 0; font-family: "Newsreader", Georgia, "Times New Roman", serif;
      background: var(--bg); color: var(--ink); line-height: 1.55; -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; }

    /* ---------- site header ---------- */
    .site-signin { text-decoration: none; color: var(--ink-soft); font-weight: 600; font-size: 14.5px; padding: 8px 10px; }
    .site-signin:hover { color: var(--primary-dark); }
    .site-cta {
      text-decoration: none; background: var(--btn); color: #fff; font-weight: 700; font-size: 14.5px;
      padding: 9px 16px; border-radius: 9px; white-space: nowrap;
    }
    .site-cta:hover { background: var(--primary-dark); }
    /* Visible keyboard focus across header / nav / links / controls (most had none). */
    a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible {
      outline: 3px solid var(--primary); outline-offset: 2px;
    }
    /* Visually hidden until focused, then drops down: lets keyboard/AT users jump
       straight past the nav to the generator. */
    .skip-link {
      position: absolute; left: 8px; top: -56px; z-index: 1200;
      background: var(--btn); color: #fff; padding: 10px 16px;
      border-radius: 0 0 8px 8px; font-weight: 700; text-decoration: none;
      box-shadow: 0 4px 14px rgba(20, 28, 38, .18); transition: top .15s ease;
    }
    .skip-link:focus { top: 0; }
    :target { scroll-margin-top: 76px; } /* keep anchored targets clear of the sticky header */
    .site-hublink { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--ink-soft); font-size: 14.5px; font-weight: 600; padding: 8px 11px; border-radius: 8px; margin-left: 2px; white-space: nowrap; }
    .site-hublink:hover { color: var(--primary-dark); background: var(--primary-light); }
    .site-theme-toggle {
      width: 38px; height: 38px; border-radius: 50%; flex: none; padding: 0; cursor: pointer;
      background: var(--white); border: 1.5px solid var(--line);
      display: inline-flex; align-items: center; justify-content: center;
    }
    .site-theme-toggle:hover { border-color: var(--primary); }
    .site-theme-toggle svg { width: 17px; height: 17px; }
    .site-theme-toggle .sun { display: none; stroke: #e8a32b; }
    .site-theme-toggle .moon { display: block; stroke: var(--primary); }
    html[data-fpai-theme="dark"] .site-theme-toggle .sun { display: block; }
    html[data-fpai-theme="dark"] .site-theme-toggle .moon { display: none; }

    /* ---------- hero (spokes): left-aligned, plain facts line instead of stat pills ---------- */
    .hero { max-width: 1180px; margin: 0 auto; padding: 52px 20px 28px; text-align: left; }
    .hero h1 {
      font-family: "Fraunces", Georgia, serif; font-weight: 500; letter-spacing: -.012em;
      font-size: clamp(33px, 4.4vw, 54px); line-height: 1.08; max-width: 760px; margin: 0 0 18px;
      text-wrap: balance;
    }
    .hero p.sub { font-size: 19px; color: var(--ink-soft); max-width: 640px; margin: 0 0 18px; line-height: 1.5; }
    .hero .stats { display: flex; gap: 6px 22px; flex-wrap: wrap; font-size: 14.5px; color: var(--ink-soft); max-width: 760px; }
    .hero .stats b { color: var(--ink); font-weight: 600; }

    /* ---------- hub-only hero (.hero-split): copy on the left, a real document excerpt on the right ----------
       Deliberately plain: no tilt, no glow, no hand-drawn underline, no staggered entrance. The
       excerpt is set in the page's own reading face so it looks like the output, not a mockup. */
    .hero.hero-split { max-width: 1180px; text-align: left; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
      gap: 56px; align-items: start; padding: 56px 20px 44px; }
    .hero-split h1 { font-family: "Fraunces", Georgia, serif; font-weight: 500; letter-spacing: -.012em;
      font-size: clamp(34px, 4.4vw, 54px); line-height: 1.08; margin: 0 0 20px; text-wrap: balance; }
    /* p.sub: outranks the centered .hero p.sub default above (auto margins would offset it on tablets) */
    .hero-split p.sub { font-size: 19px; color: var(--ink-soft); max-width: 470px; margin: 0 0 26px; line-height: 1.5; }
    .hero-actions { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
    /* Large CTA variant of .site-cta: the hub hero button and the final CTA. Specificity (0,2,0)
       keeps it above the 560px .site-cta padding override, so these two never shrink. */
    .site-cta.hero-go, .finalcta .site-cta { display: inline-block; font-size: 16px; padding: 13px 24px; border: 0; }
    .hero-ex { color: var(--ink-soft); font-size: 15px; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
    .hero-ex:hover { color: var(--primary-dark); text-decoration-color: currentColor; }
    .hero-signals { margin: 22px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); max-width: 470px; }
    .hero-art { display: block; text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; }
    .hero-art:focus-visible { outline: 3px solid var(--primary); outline-offset: 6px; }
    .hero-doc { background: var(--white); color: var(--ink); border: 1px solid var(--line); padding: 38px 42px 34px;
      font-size: 13.5px; line-height: 1.55; box-shadow: 0 1px 2px rgba(20, 28, 38, .05), 0 24px 48px -34px rgba(20, 28, 38, .3);
      transition: border-color .15s ease; }
    .hero-art:hover .hero-doc { border-color: var(--primary); }
    .hd-ttl { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 21px; line-height: 1.2; margin: 0 0 16px; }
    .hd-h { font-weight: 700; font-size: 13.5px; margin: 14px 0 5px; }
    .hd-p { margin: 0 0 8px; }
    .hd-last { margin-bottom: 0; }
    .hd-cur { display: inline-block; width: 2px; height: 14px; background: var(--primary-dark); vertical-align: -2px; margin-left: 3px; animation: hd-bl 1s steps(2) infinite; }
    @keyframes hd-bl { 50% { opacity: 0; } }
    .hero-cap { margin-top: 14px; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
    .hero-cap-k { font-weight: 600; color: var(--ink-soft); }
    .hero-cap-k + .hero-cap-k, .hero-cap .hero-cap-k:not(:first-child) { margin-left: 6px; }
    @media (max-width: 860px) {
      .hero.hero-split { grid-template-columns: 1fr; gap: 28px; padding: 34px 20px 24px; }
      /* The excerpt is hidden in place on phones so it never paints above the generator; the
         sample figures further down show real output at a readable size. */
      .hero-art { display: none; }
    }
    @media (prefers-reduced-motion: reduce) { .hd-cur { animation: none; } }
    .wrap { padding: 4px 20px 8px; }

    /* Uniform lining figures in serif headings (Cormorant defaults to old-style). */
    .hero h1, .sec-head h2, .why h2, .finalcta h2, .why-card .big { font-variant-numeric: lining-nums; }

    /* ---------- footer ---------- */
    .site-foot { background: var(--footbg); color: var(--footink); margin-top: 48px; }
    .site-foot a { color: var(--footink); text-decoration: none; }
    .site-foot a:hover { color: #fff; }
    .foot-cols { max-width: 1180px; margin: 0 auto; padding: 44px 20px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 28px; }
    .foot-brand svg { width: 34px; height: 34px; }
    .foot-brand b { display: block; font-size: 18px; font-weight: 800; color: #fff; margin: 8px 0 6px; }
    .foot-brand p { font-size: 13.5px; line-height: 1.6; margin: 0 0 12px; max-width: 260px; }
    .foot-addr { font-size: 12.5px; line-height: 1.65; color: var(--footink); margin: 14px 0 0; max-width: 260px; font-style: normal; }
    .foot-addr strong { display: block; color: #fff; font-weight: 700; margin-bottom: 2px; }
    .foot-col h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: #fff; margin: 0 0 12px; font-weight: 700; }
    .foot-col ul { list-style: none; margin: 0; padding: 0; }
    .foot-col li { margin-bottom: 9px; font-size: 14px; }
    .foot-bottom { border-top: 1px solid var(--footline); }
    .foot-bottom-inner { max-width: 1180px; margin: 0 auto; padding: 16px 20px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 13px; }
    .foot-bottom-inner .legal { display: flex; gap: 14px; flex-wrap: wrap; margin-left: auto; }
    .foot-share { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border: 1px solid var(--footline); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; transition: border-color .15s, color .15s; }
    .foot-share:hover { border-color: var(--primary); color: var(--primary); }
    .foot-share svg { flex: none; }
    .foot-disc { max-width: 1180px; margin: 0 auto; padding: 0 20px 26px; font-size: 12px; color: var(--faint); }

    /* ---------- content sections: an editorial 5/12 | 7/12 grid ----------
       Every section is one grid: the heading and its lede sit in the left column, the content
       in the right, and wide blocks span both. Hairlines separate sections and rows instead of
       cards, tinted panels, icons and glowing badges. Same rules on the hub and the spokes. */
    .section { max-width: 1180px; margin: 0 auto; padding: 52px 20px 60px; border-top: 1px solid var(--line);
      display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; row-gap: 0; align-items: start; }
    .sec-head { grid-column: 1; text-align: left; margin: 0; }
    .sec-head h2, .why h2 { font-family: "Fraunces", Georgia, serif; font-weight: 500; letter-spacing: -.01em; font-size: clamp(28px, 3.1vw, 38px); line-height: 1.12; margin: 0 0 14px; }
    .sec-head p, .why > div > p { font-size: 16.5px; color: var(--ink-soft); margin: 0; line-height: 1.6; }
    .sec-head p { max-width: 440px; }
    .section > :not(.sec-head) { grid-column: 2; }
    /* wide blocks span both columns (selectors match the :not() rule's specificity) */
    .section > .gendir-grid, .section > .sample-fig-wide { grid-column: 1 / -1; }

    /* steps: number | heading + text, ruled rows */
    /* .step (number | heading + text) and the how-to .guide rows share one ruled-row recipe;
       .step lays it out as a grid, .guide as a counter in the left padding. */
    .step, .guide > li { padding: 16px 0 18px; border-top: 1px solid var(--line); }
    .step:last-child, .guide > li:last-child { border-bottom: 1px solid var(--line); }
    .step-num, .guide > li::before { color: var(--ink-soft); font-family: "Fraunces", Georgia, serif; font-weight: 500;
      font-size: 24px; line-height: 1.1; font-variant-numeric: lining-nums; }
    .step h3, .guide > li h3 { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 19px; color: var(--ink); margin: 0 0 5px; }
    .step p, .guide > li p { font-size: 15.5px; color: var(--ink-soft); margin: 0; line-height: 1.62; }
    .step { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 0; align-items: start; }
    .step-num { grid-column: 1; grid-row: 1 / 3; padding-top: 1px; }
    .step h3 { grid-column: 2; grid-row: 1; }
    .step p { grid-column: 2; grid-row: 2; }
    /* hub personas: heading | text, same ruled rows */
    .persona-grid .step { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); column-gap: 28px; }
    .persona-grid .step h3 { grid-column: 1; grid-row: 1; font-size: 17px; margin: 0; }
    .persona-grid .step p { grid-column: 2; grid-row: 1; }
    .persona-grid a { color: var(--ink); text-decoration-color: var(--line); text-underline-offset: 3px; }
    .persona-grid a:hover { color: var(--primary-dark); text-decoration-color: currentColor; }

    /* spoke document-type list: two ruled columns of prefill links (page.js handles the click) */
    .typegrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
    .typecard { display: flex; flex-direction: column; gap: 3px; text-align: left; text-decoration: none; cursor: pointer;
      border-top: 1px solid var(--line); padding: 12px 0 14px; }
    .typecard b { font-size: 16px; color: var(--ink); font-weight: 600; transition: color .14s ease; }
    .typecard span { font-size: 14px; color: var(--ink-soft); }
    .typecard:hover b { color: var(--primary-dark); }

    /* hub features: two ruled columns, no icons */
    .featgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
    .feat { border-top: 1px solid var(--line); padding: 16px 0 26px; }
    .feat h3 { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 19px; margin: 0 0 7px; }
    .feat p { font-size: 15.5px; color: var(--ink-soft); margin: 0; line-height: 1.62; }

    /* hub "you provide / the writer adds": two plain ruled lists, no winner card */
    .vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
    .vs-col { border-top: 1px solid var(--line); padding: 16px 0 0; }
    .vs-col h3 { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 18px; color: var(--ink); margin: 0 0 12px; }
    .vs-col ul { list-style: none; margin: 0; padding: 0; }
    .vs-col li { position: relative; padding-left: 18px; margin: 0 0 10px; font-size: 15.5px; line-height: 1.45; color: var(--ink); }
    .vs-col li:last-child { margin-bottom: 0; }
    .vs-col li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--faint); }
    .vs-win li::before { background: var(--primary); }

    /* backed by FormsPal: the figure sits in the heading column, the argument in the content column */
    /* .why has no box of its own: its card and text are items of the .section grid above. */
    .why { display: contents; }
    /* The card comes first in the DOM so tab order matches the visual order (WCAG 2.4.3). */
    .why > div:not(.why-card) { grid-column: 2; }
    .why-list { list-style: none; margin: 18px 0 0; padding: 0; }
    .why-list li { display: block; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15.5px; color: var(--ink); line-height: 1.5; }
    .why-list li:last-child { border-bottom: 1px solid var(--line); }
    .why-card { grid-column: 1; padding: 4px 0 0; text-align: left; }
    .why-card .big { font-family: "Fraunces", serif; font-weight: 500; font-size: clamp(56px, 6vw, 84px); line-height: 1; letter-spacing: -.025em; color: var(--ink); }
    .why-card .cap { font-size: 16px; color: var(--ink-soft); margin: 8px 0 20px; max-width: 320px; }
    .why-card .site-cta, .finalcta .site-cta, .site-cta.hero-go { border-radius: 6px; }

    /* what's-included list (spokes): two ruled columns, no check icons */
    .incl-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
    .incl-list li { display: block; border-top: 1px solid var(--line); padding: 9px 0 10px; font-size: 15.5px; color: var(--ink); line-height: 1.5; }
    .incl-note { font-size: 15.5px; color: var(--ink-soft); line-height: 1.62; margin: 26px 0 0; max-width: 560px; text-align: left; }
    .incl-note a { color: var(--primary-dark); font-weight: 600; text-decoration: none; }
    .incl-note a:hover { text-decoration: underline; }

    .faq details { border-bottom: 1px solid var(--line); }
    .faq details:first-child { border-top: 1px solid var(--line); }
    .faq summary { cursor: pointer; list-style: none; padding: 19px 0; font-size: 17px; font-weight: 600; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
    .faq summary::-webkit-details-marker { display: none; }
    .faq summary::after { content: "+"; color: var(--ink-soft); font-size: 23px; font-weight: 400; line-height: .9; flex: none; transition: transform .2s ease; }
    .faq details[open] summary::after { transform: rotate(45deg); }
    .faq details p { margin: -2px 0 19px; font-size: 15px; color: var(--ink-soft); line-height: 1.66; }

    .finalcta { display: block; text-align: left; padding-bottom: 48px; }
    .finalcta h2 { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.12; max-width: 620px; margin: 0 0 12px; }
    .finalcta p { font-size: 17px; color: var(--ink-soft); margin: 0 0 22px; }

    /* "All AI generators" directory: ink headings, ruled columns, spans the section */
    .gendir-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 30px 32px; margin: 36px 0 0; }
    .gendir-col h3 { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 17px; color: var(--ink); border-top: 1px solid var(--line); padding-top: 14px; margin: 0 0 12px; }
    .gendir-col ul { list-style: none; margin: 0; padding: 0; }
    .gendir-col li { margin: 0 0 10px; }
    .gendir-col a { font-size: 15px; color: var(--ink); text-decoration: none; line-height: 1.45; border-bottom: 1px solid transparent; transition: color .14s ease, border-color .14s ease; }
    /* --primary-dark, not --primary: #0e8a5f on white is ~4.4:1, a hair under
       the 4.5:1 AA bar at this size (in dark theme --primary-dark is lighter). */
    .gendir-col a:hover { color: var(--primary-dark); border-bottom-color: var(--primary-dark); }

    /* Deep-content prose sections (competitive spokes) */
    .prose { max-width: 640px; margin: 0; }
    .prose p { font-size: 16px; color: var(--ink); line-height: 1.72; margin: 0 0 16px; }
    .prose h3 { font-size: 19px; font-weight: 700; color: var(--ink); margin: 28px 0 8px; }
    .prose ul { margin: 0 0 16px; padding-left: 22px; }
    .prose li { font-size: 16px; color: var(--ink); line-height: 1.6; margin: 0 0 7px; }
    .prose a { color: var(--primary-dark); font-weight: 600; text-decoration: none; }
    .prose a:hover { text-decoration: underline; }

    /* "How to" steps: the shared ruled-row values live with .step above; only the counter is here */
    .guide { list-style: none; counter-reset: g; margin: 10px 0 18px; padding: 0; }
    .guide > li { counter-increment: g; position: relative; padding-left: 52px; margin: 0; }
    .guide > li::before { content: counter(g); position: absolute; left: 0; top: 17px; }

    /* sample figures (real generated output, 00079): plain bordered page, no card chrome */
    .sample-fig { margin: 36px 0 0; }
    .sample-fig-wide { margin-top: 44px; max-width: 960px; }
    .sample-fig img { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: 3px; background: #fff; }
    .sample-fig figcaption { margin-top: 10px; font-size: 13.5px; color: var(--ink-soft); text-align: left; }
    /* Dark theme: take the edge off the paper-white screenshots so they don't glare
       against the dark page (the in-widget document sheet stays full white on purpose). */
    html[data-fpai-theme="dark"] .sample-fig img { filter: brightness(.9); }

    /* hero signal link (00081) */
    .hero-signals a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }

    /* REMOVED, do not reintroduce: a legacy "nav collapses to a hamburger"
       block used to sit here. Its wrapping @media had been deleted at some
       point while the body and the closing brace survived, so every rule in it
       had fallen to depth 0 and applied at every width. The file carried one
       more } than { as a result.

       The worst of it was an unconditional .site-nav { display: none }, which
       targets the shared frame's nav. It was masked only by load order:
       shared-frame.css loads after this file and its .site-head .site-nav is
       (0,2,0) against that (0,1,0). Any change to load order or to selector
       prefixing would have unmasked it and taken the nav out on all 26 pages.

       Everything else in the block styled markup that no longer exists:
       .navtoggle, .nav-item, .nav-top and .nav-panel are all zero hits across
       the HTML, the partials and the JS. The single live declaration,
       .mega-col { min-width: 0 }, belongs to the shared-frame browse mega
       dropdown and moved to widget/shared-frame.css beside its .mega-group
       sibling, properly scoped. The hamburger behaviour this block was
       reaching for now ships in the frame itself. */
    @media (max-width: 900px) {
      .section { display: block; padding: 44px 20px 52px; }
      .sec-head { margin-bottom: 28px; }
      .why-card { margin-bottom: 28px; }
      .foot-cols { grid-template-columns: 1fr 1fr; gap: 24px; }
      /* Park the widget's sticky export bar just below the 64px sticky site
         header (the widget defaults to top:8px, which tucks the word-count and
         Copy row behind the nav while scrolling a long document). */
      .fpai-toolbar { top: 72px; }
    }
    @media (max-width: 560px) {
      .site-signin { display: none; }
      .site-hublink .hub-label { display: none; }
      /* keep the header on one line on small phones (logo-only brand) */
      .site-cta { padding: 8px 13px; }
      .typegrid, .featgrid, .vs-grid, .incl-list { grid-template-columns: 1fr; }
      .vs-grid { gap: 24px; }
      .foot-cols { grid-template-columns: 1fr; }
      .step { grid-template-columns: 40px minmax(0, 1fr); }
      .guide > li { padding-left: 40px; }
      .persona-grid .step { grid-template-columns: 1fr; }
      .persona-grid .step p { grid-column: 1; grid-row: 2; margin-top: 4px; }
      .hide-sm { display: none; } /* trims a hero sub-sentence on phones */
      /* Tighten the hero on phones so the tool lands sooner. */
      .hero { padding: 26px 18px 14px; }
      .hero h1 { font-size: clamp(28px, 7.5vw, 33px); margin-bottom: 9px; }
      .hero p.sub { font-size: 16px; line-height: 1.45; margin-bottom: 14px; }
      .hero .stats { font-size: 13.5px; gap: 4px 14px; }
    }