/* 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("/ai-document-maker/fraunces-latin.woff2") format("woff2");
    }
    @font-face {
      font-family: "Newsreader";
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url("/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("/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; --headbg: rgba(255,255,255,.88); --footbg: #11181c; --footink: #c4ccd4; --footline: #243038;
      --accent2: #b5731f; --accent2-ink: #8f5512; --paper-cream: #f6f1e7;
    }
    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; --headbg: rgba(18,21,25,.9); --footbg: #0c1114; --footink: #aab5bf; --footline: #1c252b;
      --accent2: #e0a253; --accent2-ink: #e0a253; --paper-cream: #f6f1e7;
    }
    * { box-sizing: border-box; }
    /* Guard against horizontal scroll from decorative bleed (e.g. the hero glow).
       `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 ---------- */
    .hero { max-width: 1080px; margin: 0 auto; padding: 48px 20px 24px; text-align: center; }
    .hero h1 {
      font-family: "Fraunces", Georgia, serif; font-weight: 600; letter-spacing: 0;
      font-size: clamp(33px, 6vw, 58px); line-height: 1.12; max-width: 840px; margin: 0 auto 14px;
      text-wrap: balance;
    }
    .hero h1 .accent { color: var(--primary); }
    .hero p.sub { font-size: 18.5px; color: var(--ink-soft); max-width: 620px; margin: 0 auto 20px; }
    .hero .stats { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
    .hero .stats span {
      font-size: 13.5px; font-weight: 600; color: var(--ink);
      background: var(--white); border: 1.5px solid var(--line); border-radius: 999px; padding: 8px 15px;
    }
    .hero .stats b { color: var(--primary-dark); font-weight: 700; } /* AA at 13.5px; --primary falls just short on white */

    /* ---------- hub-only asymmetric hero (.hero-split) ---------- */
    .hero.hero-split { max-width: 1180px; text-align: left; position: relative;
      display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items: center; padding: 52px 20px 40px; }
    .hero-split::before { content: ""; position: absolute; inset: -12% -16% auto auto; width: 62%; height: 130%; z-index: 0;
      background: radial-gradient(58% 58% at 72% 22%, color-mix(in srgb, var(--accent2) 16%, transparent), transparent 72%); pointer-events: none; }
    .hero-split > * { position: relative; z-index: 1; }
    .hero-eyebrow { display: inline-flex; align-items: center; gap: 11px; font-size: 12.5px; font-weight: 600;
      letter-spacing: .14em; text-transform: uppercase; color: var(--accent2-ink); margin: 0 0 18px; }
    .hero-eyebrow .er { width: 30px; height: 1px; background: var(--accent2); opacity: .75; }
    .hero-split h1 { font-family: "Fraunces", Georgia, serif; font-weight: 600; letter-spacing: -.012em;
      font-size: clamp(34px, 4.5vw, 56px); line-height: 1.05; margin: 0 0 18px; text-wrap: balance; }
    .hero-split h1 .hero-u { position: relative; white-space: nowrap; }
    .hero-split h1 .hero-u svg { position: absolute; left: 0; bottom: -9px; width: 100%; height: 12px; overflow: visible; }
    .hero-split .sub { font-size: 18.5px; color: var(--ink-soft); max-width: 440px; margin: 0 0 22px; line-height: 1.5; }
    .hero-signals { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--ink-soft); }
    .hero-signals b { color: var(--ink); font-weight: 700; }
    .hero-signals i { width: 4px; height: 4px; border-radius: 50%; background: var(--faint); display: inline-block; }
    .hero-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 28px; }
    .hero-go { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; background: var(--btn);
      color: #fff; font-weight: 700; font-size: 16px; padding: 14px 26px; border-radius: 11px; }
    .hero-go:hover { background: var(--primary-dark); }
    .hero-ex { text-decoration: none; color: var(--ink-soft); font-weight: 600; font-size: 14.5px; border-bottom: 1px dashed var(--faint); padding-bottom: 2px; }
    .hero-ex:hover { color: var(--primary-dark); }
    /* the live-document card (decorative) */
    .hero-art { position: relative; display: block; text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; }
    /* The card is decorative but earns its space as a jump-to-editor target: a button
       reveals on hover (and keyboard focus) and the whole card links to #tool. */
    .hero-jump {
      position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(-50% + 7px)); z-index: 3;
      display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
      padding: 12px 22px; border-radius: 999px; background: var(--btn); color: #fff;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
      font-weight: 700; font-size: 15px; box-shadow: 0 16px 34px -10px rgba(8, 40, 28, .55);
      opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
    }
    .hero-jump .hj-arrow { transition: transform .2s ease; }
    .hero-art:hover .hero-jump, .hero-art:focus-visible .hero-jump { opacity: 1; transform: translate(-50%, -50%); }
    .hero-art:hover .hero-jump .hj-arrow { transform: translateX(3px); }
    .hero-art:focus-visible { outline: 3px solid var(--primary); outline-offset: 6px; border-radius: 18px; }
    .hero-note { position: absolute; left: -8px; top: -38px; z-index: 2; font-family: "Fraunces", serif; font-style: italic;
      font-size: 15px; color: var(--accent2-ink); transform: rotate(-4deg); }
    .hero-doc { position: relative; background: var(--paper-cream); color: #23201a; border-radius: 14px;
      padding: 32px 34px 28px; transform: rotate(1.3deg); box-shadow: 0 36px 72px -32px rgba(0,0,0,.55); }
    .hd-tab { position: absolute; top: -12px; right: 26px; background: var(--btn); color: #fff; font-size: 11px;
      font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 5px 11px; border-radius: 6px;
      box-shadow: 0 3px 8px -2px rgba(8, 40, 28, .4); }
    .hd-ttl { font-family: "Fraunces", serif; font-weight: 600; font-size: 23px; line-height: 1.16; margin: 0 0 14px; }
    .hd-ln { height: 9px; border-radius: 3px; background: #e2dccd; margin: 9px 0; }
    .hd-ln.hd-s { background: #cfe6da; }
    .hd-h { font-weight: 700; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: #6a6354; margin: 18px 0 8px; }
    .hd-cur { display: inline-block; width: 2.5px; height: 16px; background: var(--primary-dark); vertical-align: -3px; margin-left: 2px; animation: hd-bl 1s steps(2) infinite; }
    @keyframes hd-bl { 50% { opacity: 0; } }
    .hd-foot { margin-top: 22px; padding-top: 15px; border-top: 1px solid #e6e0d2; font-size: 13px; font-weight: 500; color: #6a6354; letter-spacing: .01em; }
    .hd-foot b { color: #23201a; font-weight: 700; }
    @media (max-width: 860px) {
      .hero.hero-split { grid-template-columns: 1fr; gap: 28px; padding: 34px 20px 30px; }
      .hero-art { max-width: 430px; }
      /* Stacked layout: the note can't float above the card without colliding with the
         actions above it, so let it sit in normal flow as a label just above the card. */
      .hero-note { position: static; display: inline-block; margin: 0 0 13px 4px; }
      /* When the reorder script moves the card below the generator on phones it becomes a
         direct child of #main; keep the tilted-card style but shrink it to a compact accent
         (a true miniature, not full-width) and center it. */
      /* zoom (unlike transform: scale) reflows, so the shrunk card takes only its real
         footprint with no dead gap to compensate; keeps the tilt/shadow style, just a smaller
         centered accent below the tool. Size is a single dial. */
      #main > .hero-art { zoom: .47; margin: 14px auto 10px; }
    }
    /* ---------- hero motion: orchestrated load + the document writing itself ---------- */
    @keyframes hero-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
    @keyframes hd-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
    @keyframes draw-u { to { stroke-dashoffset: 0; } }
    .hero-split .hero-eyebrow, .hero-split h1, .hero-split .sub, .hero-split .hero-signals,
    .hero-split .hero-actions, .hero-split .hero-art { opacity: 0; animation: hero-rise .72s cubic-bezier(.2,.7,.2,1) both; }
    .hero-split .hero-eyebrow { animation-delay: .04s; }
    .hero-split h1 { animation-delay: .12s; }
    .hero-split .sub { animation-delay: .24s; }
    .hero-split .hero-signals { animation-delay: .34s; }
    .hero-split .hero-actions { animation-delay: .42s; }
    .hero-split .hero-art { animation-delay: .26s; animation-duration: .9s; }
    .hero-u svg path { stroke-dasharray: 110; stroke-dashoffset: 110; animation: draw-u .55s ease forwards .62s; }
    .hero-doc > * { opacity: 0; animation: hd-in .5s cubic-bezier(.3,.8,.3,1) both; }
    .hero-doc > *:nth-child(1) { animation-delay: .66s; } .hero-doc > *:nth-child(2) { animation-delay: .76s; }
    .hero-doc > *:nth-child(3) { animation-delay: .86s; } .hero-doc > *:nth-child(4) { animation-delay: .95s; }
    .hero-doc > *:nth-child(5) { animation-delay: 1.04s; } .hero-doc > *:nth-child(6) { animation-delay: 1.14s; }
    .hero-doc > *:nth-child(7) { animation-delay: 1.22s; } .hero-doc > *:nth-child(8) { animation-delay: 1.3s; }
    .hero-doc > *:nth-child(9) { animation-delay: 1.38s; } .hero-doc > *:nth-child(10) { animation-delay: 1.46s; }
    .hero-doc > *:nth-child(11) { animation-delay: 1.56s; }
    .hero-go { transition: transform .15s ease, background .15s ease; }
    .hero-go:hover { transform: translateY(-1px); }
    .hero-go span { transition: transform .15s ease; }
    .hero-go:hover span { transform: translateX(3px); }
    .hero-doc { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
    .hero-art:hover .hero-doc { transform: rotate(0deg) translateY(-4px); box-shadow: 0 46px 84px -30px rgba(0,0,0,.6); }
    @media (prefers-reduced-motion: reduce) {
      .hero-split .hero-eyebrow, .hero-split h1, .hero-split .sub, .hero-split .hero-signals,
      .hero-split .hero-actions, .hero-split .hero-art, .hero-doc > * { animation: none; opacity: 1; transform: none; }
      .hero-u svg path { stroke-dashoffset: 0; animation: none; }
      .hero-art:hover .hero-doc { transform: rotate(1.3deg); }
    }
    /* ---------- section scroll-reveal (IntersectionObserver adds .reveal then .in) ----------
       JS only adds .reveal when motion is allowed, so with no JS / reduced motion every
       block stays fully visible. Reveal targets are below the fold, so no load flash. */
    @media (prefers-reduced-motion: no-preference) {
      .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
      .reveal.in { opacity: 1; transform: 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 ---------- */
    .section { max-width: 1080px; margin: 0 auto; padding: 66px 20px; }
    .section-alt { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .sec-head { text-align: center; max-width: 660px; margin: 0 auto 44px; }
    .eyebrow { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--accent2-ink); margin-bottom: 12px; }
    .sec-head h2 { font-family: "Fraunces", Georgia, serif; font-weight: 600; letter-spacing: 0; font-size: clamp(30px, 3.8vw, 41px); line-height: 1.14; margin: 0 0 12px; }
    .sec-head p { font-size: 17px; color: var(--ink-soft); margin: 0; line-height: 1.6; }
    .ic { display: block; }

    .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
    .step-num { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-weight: 700; font-size: 18px; color: #fff; background: var(--primary); margin-bottom: 16px; box-shadow: 0 8px 18px -8px var(--primary); }
    .step h3 { font-size: 18.5px; margin: 0 0 7px; }
    .step p { font-size: 15px; color: var(--ink-soft); margin: 0; line-height: 1.62; }

    .typegrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
    .typecard { display: flex; flex-direction: column; gap: 9px; text-align: left; text-decoration: none; cursor: pointer; background: var(--white); border: 1.5px solid var(--line); border-radius: 14px; padding: 17px 16px; transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease; }
    .typecard:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 12px 26px -14px var(--primary); }
    .typecard .ic { width: 26px; height: 26px; color: var(--primary); }
    .typecard b { font-size: 14.5px; color: var(--ink); }
    .typecard span { font-size: 12px; color: var(--ink-soft); }

    .featgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 28px; }
    /* ---------- vs ChatGPT ---------- */
    .vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 860px; margin: 0 auto; }
    .vs-col { border: 1.5px solid var(--line); border-radius: 16px; padding: 22px 24px 24px; background: var(--white); }
    /* Light-theme surfaces (#fff on the near-white bg) read flat; a soft shadow lifts cards/pills. */
    .hero .stats span, .typecard, .vs-col { box-shadow: 0 1px 3px rgba(20, 28, 38, .06); }
    .vs-col h3 { font-size: 16px; font-weight: 700; margin: 0 0 14px; }
    .vs-col ul { list-style: none; margin: 0; padding: 0; }
    .vs-col li { position: relative; padding-left: 26px; margin: 0 0 10px; font-size: 15px; line-height: 1.45; color: var(--ink-soft); }
    .vs-col li:last-child { margin-bottom: 0; }
    .vs-col li::before { position: absolute; left: 0; top: -1px; font-weight: 700; }
    .vs-plain li::before { content: "\270E"; color: var(--faint); }  /* pencil: "you provide" is an input list, not a negative */
    .vs-win { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
    .vs-win h3 { color: var(--primary); }
    .vs-win li { color: var(--ink); }
    .vs-win li::before { content: "\2713"; color: var(--primary); }
    .feat .ic { width: 26px; height: 26px; color: var(--primary); margin-bottom: 13px; }
    .feat h3 { font-size: 17px; margin: 0 0 7px; }
    .feat p { font-size: 14.5px; color: var(--ink-soft); margin: 0; line-height: 1.62; }

    .why { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
    .why h2 { font-family: "Fraunces", Georgia, serif; font-weight: 600; letter-spacing: 0; font-size: clamp(29px, 3.6vw, 39px); line-height: 1.15; margin: 0 0 14px; }
    .why > div > p { font-size: 16px; color: var(--ink-soft); margin: 0; line-height: 1.6; }
    .why-list { list-style: none; margin: 20px 0 0; padding: 0; }
    .why-list li { display: flex; gap: 11px; margin-bottom: 14px; font-size: 15.5px; color: var(--ink); line-height: 1.5; }
    .why-list .ic { width: 21px; height: 21px; color: var(--primary); flex: none; margin-top: 2px; }
    .why-card { background: var(--primary-light); border: 1.5px solid color-mix(in srgb, var(--primary) 28%, var(--line)); border-radius: 18px; padding: 34px; text-align: center; }
    .why-card .big { font-family: "Fraunces", serif; font-weight: 600; font-size: 56px; line-height: 1; color: var(--primary); }
    .why-card .cap { font-size: 15px; color: var(--ink-soft); margin: 8px 0 20px; }

    /* what's-included list (deeper Tier-2 spokes) */
    .incl { max-width: 780px; margin: 0 auto; }
    .incl-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 13px 30px; }
    .incl-list li { display: flex; gap: 11px; font-size: 15.5px; color: var(--ink); line-height: 1.5; }
    .incl-list .ic { width: 21px; height: 21px; color: var(--primary); flex: none; margin-top: 2px; }
    .incl-note { font-size: 15px; color: var(--ink-soft); line-height: 1.62; margin: 30px auto 0; max-width: 640px; text-align: center; }
    .incl-note a { color: var(--primary-dark); font-weight: 600; text-decoration: none; }
    .incl-note a:hover { text-decoration: underline; }

    .faq { max-width: 760px; margin: 0 auto; }
    .faq details { border-bottom: 1px solid var(--line); }
    .faq summary { cursor: pointer; list-style: none; padding: 19px 0; font-size: 16.5px; 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(--primary); 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 { text-align: center; }
    .finalcta h2 { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: clamp(32px, 4.4vw, 46px); line-height: 1.12; margin: 0 0 14px; }
    .finalcta p { font-size: 18px; color: var(--ink-soft); margin: 0 0 26px; }
    .finalcta .site-cta { font-size: 16px; padding: 14px 30px; border: 0; }

    /* 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 { padding: 52px 20px; }
      /* Tablet portrait keeps a real grid - steps stay a 3-across stepper and
         features a tidy 2-col (6 cards = 3x2), not one sparse full-width column. */
      .typegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .featgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
      .why { grid-template-columns: 1fr; gap: 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 { grid-template-columns: 1fr; }
      .featgrid { grid-template-columns: 1fr; }
      .vs-grid { grid-template-columns: 1fr; }
      .incl-list { grid-template-columns: 1fr; gap: 11px; }
      .foot-cols { grid-template-columns: 1fr; }
      /* Phones: steps collapse to a tight badge-left numbered list. */
      .steps { grid-template-columns: 1fr; gap: 20px; }
      .step { display: grid; grid-template-columns: auto 1fr; column-gap: 15px; align-items: center; }
      .step-num { grid-column: 1; grid-row: 1 / 3; width: 38px; height: 38px; font-size: 16px; margin: 0; }
      .step h3 { grid-column: 2; grid-row: 1; margin: 0; }
      .step p { grid-column: 2; grid-row: 2; margin: 4px 0 0; }
      /* Stat chips: one full-width column of identical, single-line pills. This is
         the only layout that stays symmetric on every page; a 2-col grid wraps the
         longer per-spoke stats (up to "Backed by 16,000+ legal templates") into
         uneven rows. Symmetry beats the small height saving here. */
      .hero .stats { display: grid; grid-template-columns: 1fr; gap: 7px; max-width: 360px; margin: 0 auto; }
      .hero .stats span { text-align: center; padding: 9px 14px; font-size: 13px; }
      .hide-sm { display: none; } /* trims a hero sub-sentence on phones */
      /* Tighten the rest of 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; }
    }

    /* Hub - "All AI generators" in-content directory */
    .gendir-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 30px 26px; max-width: 960px; margin: 0 auto; }
    .gendir-col h3 { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); margin: 0 0 14px; }
    .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: 740px; margin: 0 auto; }
    .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 as a crisp numbered list with colored badges (every device) */
    .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 0 22px; }
    .guide > li:last-child { margin-bottom: 0; }
    .guide > li::before { content: counter(g); position: absolute; left: 0; top: 1px; width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px -7px var(--primary); }
    .guide > li h3 { font-size: 18px; font-weight: 700; color: var(--ink); margin: 4px 0 6px; }
    .guide > li p { font-size: 16px; color: var(--ink); line-height: 1.7; margin: 0; }

/* ---- sample figures (real generated output, 00079) ---- */
.sample-fig { max-width: 640px; margin: 34px auto 4px; }
.sample-fig-wide { max-width: 880px; }
.sample-fig img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 40px -22px rgba(8, 40, 28, .3);
  background: #fff;
}
.sample-fig figcaption { margin-top: 10px; font-size: 13.5px; color: var(--faint); text-align: center; }
/* 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; }