/* ══════════════════════════════════════════════════════════════
   Blitz Content AI — shared styles for the public pages
   (blog, solutions, comparison + niche pages, and the
   server-rendered /terms /refund /privacy).

   Mirrors the main app (public/css/app.css): same token names,
   same two themes, same easing and surface treatment, so these
   pages read as the same site rather than as leftovers.
   One file for all of them — edit here to restyle them all.
   ══════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────────
   Split into dark and light exactly like app.css. Everything below
   this block must go through a token: a hardcoded colour is a
   colour that only works in one theme, which is how these pages
   ended up dark-only in the first place. */
:root,
[data-theme="dark"] {
  /* Секція F задача 1: ЦІ ТРИ значення мусять збігатися з app.css побайтово — сім
     SEO-сторінок (ai-for-*, blitz-vs-*, blog, solutions) вантажать ЛИШЕ цей файл і
     ніколи app.css, тож правка глибини площин в app.css їх не досягає. Саме так вони й
     лишились на мертвій сходинці, коли задача 1 підняла app.css: рев'ю впіймало це вже
     ПІСЛЯ того, як їхній ?v= було піднято, тобто версія брехала про перевіреність.
     Сторож на розбіжність — у backend/tests/design-overhaul.test.js. */
  --bg: #0a0a08; --surface: #161510; --surface2: #1f1e19;
  --border: #2a2a28; --border-strong: #3a3a36;
  --gold: #c9a84c; --gold-l: #e8c97a;
  --on-gold: #20180a;                       /* text ON a gold fill */
  --gold-grad: linear-gradient(135deg, #e8c97a, #c9a84c);
  --gold-dim: rgba(201, 168, 76, .08);
  --gold-line: rgba(201, 168, 76, .28);
  --gold-line-strong: rgba(201, 168, 76, .45);
  --gold-glow: rgba(201, 168, 76, .32);
  /* --dim was #6a655c, which measures 3.42:1 on this background — it is used for 12px footer
     copy and the legal-document sub-labels, i.e. exactly the small text that needs 4.5:1. */
  --text: #f0ede6; --body: #d8d3c8; --mid: #9a958a; --dim: #8b8579;
  --green: #7bb274; --red: #d47a6a;
  --nav-bg: rgba(10, 10, 8, .82);
  --card-grad: linear-gradient(180deg, #14140f 0%, #0f0f0d 100%);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-lift: 0 14px 38px rgba(0, 0, 0, .45);
  --ambient: radial-gradient(60% 100% at 50% 0%, rgba(201, 168, 76, .10), transparent 70%);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --r26-ease: cubic-bezier(.22, .7, .2, 1);
}

[data-theme="light"] {
  color-scheme: light;
  /* Warm off-white rather than pure white, so light mode stays in the same
     warm family as dark instead of turning clinical blue-grey. */
  --bg: #f6f3eb; --surface: #ffffff; --surface2: #efece4;   /* синхронно з app.css — див. вище */
  --border: #e2ded2; --border-strong: #cdc7b6;
  /* The brand gold (#c9a84c) is 2.17:1 on this background — unusable as text.
     These are the same darkened values app.css uses, so a heading is the same
     colour on the landing page and in the app. */
  --gold: #7f6418; --gold-l: #6b520f;
  --on-gold: #ffffff;
  --gold-grad: linear-gradient(135deg, #8a6d1f, #6b520f);
  --gold-dim: rgba(127, 100, 24, .07);
  --gold-line: rgba(127, 100, 24, .26);
  --gold-line-strong: rgba(127, 100, 24, .40);
  --gold-glow: rgba(127, 100, 24, .20);
  --text: #17160f; --body: #35322a; --mid: #4a4740; --dim: #6b6860;
  /* #15803d measures 4.35:1 where it is actually used — the ✓ marks sit inside .cmp-table td.us,
     which lays a gold tint over the page, not on the bare background. Darkened to clear 4.5:1
     against that tinted cell rather than against white. */
  --green: #146c34; --red: #b91c1c;
  --nav-bg: rgba(255, 255, 255, .82);
  --card-grad: linear-gradient(180deg, #ffffff 0%, #fdfcf9 100%);
  --shadow-card: 0 1px 2px rgba(23, 22, 15, .05);
  --shadow-lift: 0 14px 34px rgba(23, 22, 15, .10);
  --ambient: radial-gradient(60% 100% at 50% 0%, rgba(127, 100, 24, .07), transparent 70%);
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* The header is sticky, so an anchor jump used to drop the target heading UNDERNEATH it —
     the reader lands on a section whose title is hidden. Measured: scroll-padding-top was
     `auto` on every one of these pages. 66px header + breathing room. */
  scroll-padding-top: 92px;
}
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: 'DM Sans', system-ui, sans-serif; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
/* Subtle top glow, echoing the app hero */
body::before {
  content: ''; position: fixed; inset: 0 0 auto 0; height: 420px; pointer-events: none; z-index: 0;
  background: var(--ambient);
}
a { color: var(--gold); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--gold-l); }
.wrap { max-width: 900px; margin: 0 auto; padding: 0 22px; position: relative; z-index: 1; }

/* ── Keyboard access ───────────────────────────────────────────
   These ten pages had NO focus styling at all. Every interactive element fell back to whatever
   the browser draws, and the gold-on-dark UA outline is close to invisible — so a keyboard user
   navigating a legal document could not tell where they were. Explicit ring, in both themes. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}
/* Only suppress the ring for pointer users, never for keyboard ones. */
:focus:not(:focus-visible) { outline: none; }

/* Skip link: hidden until focused, then the first thing Tab reaches. Without it, reaching the
   body of a policy meant tabbing through the whole header on every page. */
.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 100;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--gold); border-radius: 10px;
  padding: 12px 18px; font-size: 14px; font-weight: 600;
  box-shadow: var(--shadow-lift);
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 12px; color: var(--text); }

/* ── Header ────────────────────────────────────────────────── */
header.site {
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20;
  background: var(--nav-bg); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
header.site .wrap { display: flex; align-items: center; justify-content: space-between; height: 66px; }
/* The prose pages (blog.html, and the /terms /refund /privacy template) narrow `.wrap` to 780px
   because a 900px measure is tiring to read. That is a rule about paragraphs, but it was hitting
   the header and footer too — on /terms the header row measured 736px of content in a 736px box,
   with "Поради з SEO" squeezed to 72px and wrapping onto a second line. Reading measure and
   navigation width are unrelated decisions; keep the chrome at the site-wide width.
   The two-class selector outranks the pages' own `.wrap { max-width: 780px }`. */
header.site .wrap, footer.site .wrap { max-width: 900px; }
.logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Syne', sans-serif; font-weight: 800; font-size: 19px; color: var(--text);
  letter-spacing: -.01em; white-space: nowrap; flex-shrink: 0;
}
.logo img {
  height: 30px; width: auto; display: block;
  filter: drop-shadow(0 2px 7px var(--gold-glow)); transition: transform .3s var(--ease), filter .25s var(--ease);
}
.logo:hover { color: var(--text); }
.logo:hover img { transform: scale(1.05); filter: drop-shadow(0 4px 13px var(--gold-glow)); }

.site-nav { display: flex; align-items: center; gap: 26px; }
.site-nav > a:not(.btn) {
  color: var(--mid); font-size: 14.5px; font-weight: 500;
  /* A nav label that wraps to two lines makes the header taller than its own fixed height and
     reads as broken. If space runs out, the 900px breakpoint drops the wordmark instead. */
  white-space: nowrap;
}
.site-nav > a:not(.btn):hover { color: var(--text); }

/* ── Theme toggle ──────────────────────────────────────────────
   Injected by theme.js into .site-nav on every page that does not
   already carry one (the app's index.html places its own by hand). */
.theme-toggle {
  /* 44px is the WCAG 2.5.5 target minimum, and this is an icon-only control with no
     surrounding text to enlarge the hit area. */
  flex-shrink: 0; width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--mid); cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.theme-toggle:hover { color: var(--gold); border-color: var(--gold-line-strong); transform: translateY(-1px); }
.theme-toggle svg { width: 17px; height: 17px; display: block; }
/* One button, two glyphs: whichever theme is active, the icon shows the
   theme you would switch TO, which is what the aria-label promises. */
.theme-toggle .ico-moon { display: none; }
[data-theme="light"] .theme-toggle .ico-sun { display: none; }
[data-theme="light"] .theme-toggle .ico-moon { display: block; }

/* ── Buttons (match app .btn-primary) ──────────────────────── */
.btn {
  background: var(--gold-grad); color: var(--on-gold);
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 14px;
  padding: 11px 22px; border-radius: 100px; display: inline-flex;
  align-items: center; justify-content: center; min-height: 44px;
  border: none; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease);
  white-space: nowrap;
}
.btn:hover { color: var(--on-gold); filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 8px 26px var(--gold-glow); }
.btn:active { transform: scale(.975); }
.btn-sm { font-size: 13.5px; padding: 9px 18px; }
.btn-lg { font-size: 16px; padding: 15px 34px; }
.btn-ghost {
  background: var(--surface2); color: var(--text); border: 1px solid var(--border);
  font-family: 'Syne', sans-serif; font-weight: 600; font-size: 14px;
  padding: 11px 22px; border-radius: 100px; display: inline-flex;
  align-items: center; justify-content: center; min-height: 44px; cursor: pointer;
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.btn-ghost:hover { color: var(--text); border-color: var(--gold); transform: translateY(-1px); }

/* ── Hero ──────────────────────────────────────────────────── */
.hero { text-align: center; padding: 66px 0 36px; }
.hero .label {
  display: inline-block; font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold-l);
  background: var(--gold-dim); border: 1px solid var(--gold-line);
  padding: 6px 15px; border-radius: 100px; margin-bottom: 18px;
}
.hero h1 { font-family: 'Old Standard TT', serif; font-weight: 400; font-size: clamp(36px, 6vw, 58px); line-height: 1.06; margin: 4px 0 16px; }
.hero h1 em { font-style: italic; color: var(--gold-l); }
.hero p { color: var(--mid); font-size: 18px; max-width: 640px; margin: 0 auto 22px; }
.hero .sub-note { font-size: 13px; color: var(--dim); margin-top: 12px; }

/* ── Section ───────────────────────────────────────────────── */
section.blk { border-top: 1px solid var(--border); padding: 46px 0; }
section.blk h2 { font-family: 'Old Standard TT', serif; font-weight: 400; font-size: clamp(26px, 4vw, 36px); line-height: 1.18; margin: 0 0 18px; }
section.blk h2 em { font-style: italic; color: var(--gold-l); }
section.blk h3 { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 18px; margin: 26px 0 8px; color: var(--gold-l); }
section.blk p { color: var(--body); margin: 0 0 16px; }
section.blk ul { color: var(--body); padding-left: 22px; margin: 0 0 16px; }
section.blk li { margin-bottom: 9px; }

/* ══ Long-form documents: /terms, /refund, /privacy, and blog articles ══════════
   These pages exist to be READ, start to finish, by someone who is already slightly reluctant.
   Everything below serves that and nothing else. */

/* Measure. Body text was running at 76 characters per line (measured, Cyrillic, 16px DM Sans in a
   736px column) against the 65-75 that reading research puts as comfortable. Past ~75 the eye
   loses its place on the return sweep — the effect people describe as "I read that paragraph
   twice".

   The number is 60ch and not 68ch on purpose. `ch` is the width of the digit "0", which in DM Sans
   is 10.99px, while this document's actual average character is 9.71px — a ratio of 0.88. So a
   68ch column holds 77 real characters, not 68, and setting the "correct-looking" value would have
   changed nothing. 60ch measures out to ~68 characters, mid-band. Re-measure if the body font
   ever changes; the unit tracks font SIZE faithfully but not font WIDTH. */
.legal-doc, article.prose, .blog-article {
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

.legal-doc { border-top: 1px solid var(--border); padding: 40px 0 8px; }
.legal-doc p { color: var(--body); margin: 0 0 18px; }
.legal-doc ul { color: var(--body); padding-left: 22px; margin: 0 0 18px; }
.legal-doc li { margin-bottom: 10px; }
.legal-doc strong { color: var(--text); font-weight: 600; }
.legal-doc em { color: var(--text); }

/* Section headings. Generous space ABOVE and tight below, so each heading visually belongs to the
   text it introduces rather than floating between two blocks — the single most useful thing
   typography can do for a document read in fragments. The hairline gives the eye a resting edge
   when scrolling fast, which is how a policy is usually read. */
.legal-doc h2.ld-h {
  font-family: 'Syne', sans-serif; font-weight: 700;
  font-size: clamp(19px, 2.4vw, 22px); line-height: 1.3;
  color: var(--gold-l);
  margin: 56px 0 12px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
  scroll-margin-top: 92px;   /* clears the sticky header on an anchor jump */
}
.legal-doc h2.ld-h:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* The "#" that makes a clause linkable. Hidden until the heading is hovered or the link itself is
   focused — present for anyone who wants it, invisible clutter for everyone else. It stays
   reachable by keyboard because :focus-visible brings it back. */
.ld-anchor {
  position: relative;
  margin-left: .4em; color: var(--dim); font-weight: 400;
  opacity: 0; transition: opacity .18s var(--ease), color .18s var(--ease);
  text-decoration: none;
}
/* The glyph is 15×26 — too small to hit reliably, especially on touch. Rather than draw a bigger
   "#", give it an invisible 44×44 hit area. It can overlap the heading text; the heading is not
   itself clickable, so nothing is stolen. */
.ld-anchor::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.ld-h:hover .ld-anchor, .ld-anchor:focus-visible { opacity: 1; }
.ld-anchor:hover { color: var(--gold); }
/* Touch has no hover, so on touch devices the anchor would be permanently invisible and the
   space it reserves permanently empty. Show it faintly instead. */
@media (hover: none) { .ld-anchor { opacity: .45; } }

/* Document header meta: what changed and how long this will take. */
.doc-hero { padding-bottom: 26px; }
.doc-meta {
  display: flex; flex-wrap: wrap; gap: 6px 10px; justify-content: center;
  color: var(--dim); font-size: 13px; margin: 10px 0 0;
}

/* ── Table of contents ─────────────────────────────────────────
   A nine-section contract with no way in is a wall. Most readers arrive with ONE question —
   can I get a refund, what happens to my data — and the fastest honest answer is a list of
   what is in here. Server-rendered, so it works with JavaScript off and is in the HTML a
   crawler reads. */
.doc-toc {
  border: 1px solid var(--border); border-radius: 16px;
  background: var(--card-grad); box-shadow: var(--shadow-card);
  padding: 4px 22px; margin: 0 auto; max-width: 60ch;
}
.doc-toc summary {
  cursor: pointer; list-style: none;
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 14px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--mid);
  padding: 16px 0; display: flex; align-items: center; gap: 10px;
  min-height: 44px;
}
.doc-toc summary::-webkit-details-marker { display: none; }
.doc-toc summary::before {
  content: ''; width: 8px; height: 8px; flex-shrink: 0;
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg); transition: transform .22s var(--r26-ease);
}
.doc-toc[open] summary::before { transform: rotate(45deg); }
.doc-toc-count {
  margin-left: auto; color: var(--dim); font-weight: 500;
  font-family: 'DM Sans', sans-serif; letter-spacing: 0; text-transform: none;
}
.doc-toc ol {
  margin: 0 0 18px; padding: 0 0 0 4px; list-style: none;
  counter-reset: toc;
  columns: 2; column-gap: 30px;
}
.doc-toc li { counter-increment: toc; break-inside: avoid; margin-bottom: 2px; }
.doc-toc li a {
  display: flex; gap: 10px; align-items: baseline;
  color: var(--mid); font-size: 14px; line-height: 1.45;
  /* 12px vertical takes a single-line entry to 44px. These are discrete navigation controls in a
     list, not links inline in a sentence, so the WCAG 2.5.8 inline exception does not cover them —
     measured at 36px before this. */
  padding: 12px 8px 12px 0; border-radius: 8px;
}
.doc-toc li a::before {
  content: counter(toc) '.'; color: var(--gold); flex-shrink: 0;
  font-variant-numeric: tabular-nums; min-width: 1.6em;
}
.doc-toc li a:hover { color: var(--text); }
/* Single column on narrow screens. The contents list also ships CLOSED and is opened by
   landing.js only above 700px: an open twelve-item list on a phone pushes the document itself a
   full screen down, which is the opposite of what a contents list is for. With JavaScript off it
   stays closed — still one tap from open, so nothing is lost. */
@media (max-width: 700px) { .doc-toc ol { columns: 1; } }

/* ── TOC as a sticky side rail on wide screens ───────────────────
   FIX (2026-08-09, user feedback on /terms): the contents list used to be a full-width block
   ABOVE the document — a reader who followed a direct #section link, or just wanted to start
   reading, had to scroll past the whole list first. .legal-body wraps the TOC + the document;
   below 900px it's untouched (a plain block stack — .doc-toc is still the collapsible <details>
   it always was, opened above 700px by landing.js). At 900px+ there is room for both a
   comfortable reading column AND a rail beside it, so it becomes a two-column grid with the TOC
   pinned in view while the document scrolls underneath it — always reachable, never in the way.
   Scoped to .legal-body (not the bare .doc-toc/.legal-doc classes) so it can't affect any other
   page that happens to reuse those class names. */
@media (min-width: 900px) {
  .legal-body {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    align-items: start;
    gap: 8px 44px;
    max-width: 1060px;
    margin: 0 auto;
  }
  .legal-body .doc-toc {
    position: sticky;
    top: 96px; /* clears the floating pill nav */
    max-width: none;
    margin: 40px 0 0;
    max-height: calc(100vh - 128px);
    overflow-y: auto;
  }
  .legal-body .doc-toc ol { columns: 1; }
  .legal-body .legal-doc { margin: 0; }
}

.doc-nav {
  margin: 40px 0 0; padding-top: 26px; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: center; font-size: 14px;
}
.doc-nav a { padding: 10px 14px; border-radius: 999px; min-height: 44px; display: inline-flex; align-items: center; }
.doc-nav a:hover { background: var(--surface2); }

@media (max-width: 560px) {
  .legal-doc { padding-top: 30px; }
  .legal-doc h2.ld-h { margin-top: 40px; padding-top: 20px; }
}

/* ── Comparison table ──────────────────────────────────────── */
/* The table has a hard minimum width — four columns of prose do not compress — so it needs its
   own scroll axis rather than pushing the whole page sideways. Previously it was squeezed to
   343px on a phone at 13px type; now it keeps a readable 460px and scrolls.
   The fade on the right edge is the only affordance telling a reader there is more table
   off-screen; without it a truncated comparison just looks like a comparison with fewer columns.
   landing.js removes .has-more once the reader reaches the end, so the hint never lies. */
.table-wrap { position: relative; }
.table-wrap::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 46px;
  pointer-events: none; border-radius: 0 14px 14px 0;
  background: linear-gradient(90deg, transparent, var(--bg));
  opacity: 0; transition: opacity .2s var(--ease);
}
.table-wrap.has-more::after { opacity: 1; }
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
  margin: 0 0 4px;
  scrollbar-width: thin;
}
.table-scroll:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.cmp-table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 14.5px; overflow: hidden; border-radius: 14px; border: 1px solid var(--border); }
.cmp-table th, .cmp-table td { padding: 13px 15px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.cmp-table thead th { background: var(--surface2); font-family: 'Syne', sans-serif; font-weight: 700; font-size: 13px; }
.cmp-table thead th.us { color: var(--gold-l); }
.cmp-table tbody td:first-child { color: var(--mid); font-weight: 500; }
.cmp-table td.us { background: var(--gold-dim); color: var(--text); }
.cmp-table tr:last-child td { border-bottom: none; }
.yes { color: var(--green); font-weight: 700; }
.no { color: var(--red); font-weight: 700; }

/* ── Feature / benefit cards ───────────────────────────────── */
.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 8px 0 4px; }
.feat-card {
  background: var(--card-grad); border: 1px solid var(--border); border-radius: 16px; padding: 20px;
  box-shadow: var(--shadow-card);
  transition: border-color .25s var(--r26-ease), transform .25s var(--r26-ease), box-shadow .25s var(--r26-ease);
}
.feat-card:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.feat-card .ico { font-size: 24px; }
/* Specificity note — the doubled class is deliberate. `section.blk h3` above is (0,1,2): one
   class, two elements. A plain `.feat-card h3` is (0,1,1) and LOSES to it, so when the card
   titles were promoted from h4 to h3 (to stop the h2→h4 level skip) they silently took on the
   section-heading look: 18px gold with a 26px lead, measured, instead of 15.5px neutral.
   Repeating the class makes this (0,2,1), which wins, without touching the generic rule that
   other pages rely on. */
.feat-card.feat-card h3 { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 15.5px; margin: 10px 0 6px; color: var(--text); }
.feat-card p { color: var(--mid); font-size: 13.5px; margin: 0; }

/* ── Pain → solution list ──────────────────────────────────── */
.pain-list { list-style: none; padding: 0; margin: 0; }
.pain-list li { display: flex; gap: 11px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: 12px; padding: 13px 15px; margin-bottom: 10px; }
.pain-list .p-ico { font-size: 18px; flex-shrink: 0; }
.pain-list b { color: var(--text); }
.pain-list span.sol { color: var(--mid); }

/* ── CTA box ───────────────────────────────────────────────── */
.cta-box { background: linear-gradient(160deg, var(--gold-dim), var(--surface2)); border: 1px solid var(--gold-line); border-radius: 20px; padding: 36px 28px; text-align: center; margin: 44px 0 8px; }
/* Same specificity guard as .feat-card above: a CTA box that happens to sit inside a
   section.blk would otherwise lose its own heading style to the generic section rule. */
.cta-box.cta-box h3 { font-family: 'Old Standard TT', serif; font-weight: 400; font-size: 28px; margin: 0 0 8px; color: var(--text); }
.cta-box p { color: var(--mid); margin: 0 0 20px; }
.cta-guar { font-size: 12.5px; color: var(--dim); margin-top: 14px; }

/* ── FAQ ───────────────────────────────────────────────────── */
.faq details { border: 1px solid var(--border); border-radius: 12px; padding: 6px 16px; margin-bottom: 10px; background: var(--surface); transition: border-color .2s var(--ease); }
.faq details[open] { border-color: var(--gold-line-strong); }
.faq summary { cursor: pointer; font-family: 'Syne', sans-serif; font-weight: 600; font-size: 15px; padding: 10px 0; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: '+ '; color: var(--gold); }
.faq details[open] summary::before { content: '– '; }
.faq details p { color: var(--mid); margin: 4px 0 12px; }

/* ── Related links ─────────────────────────────────────────── */
.related { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.related a { background: var(--surface2); border: 1px solid var(--border); border-radius: 100px; padding: 8px 16px; font-size: 13px; color: var(--mid); transition: border-color .2s var(--ease), color .2s var(--ease); }
.related a:hover { border-color: var(--gold); color: var(--gold-l); }

/* ── Footer (match app footer) ─────────────────────────────── */
footer.site { border-top: 1px solid var(--border); padding: 46px 0 40px; text-align: center; margin-top: 28px; }
footer.site .logo { font-size: 22px; justify-content: center; margin-bottom: 12px; }
footer.site .logo img { height: 40px; }
.foot-tag { color: var(--mid); font-size: 14px; margin: 0 0 10px; }
.foot-mail { margin: 0 0 16px; }
.foot-mail a { color: var(--gold); display: inline-block; padding: 6px 10px; border-radius: 8px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 2px 10px; justify-content: center; margin-bottom: 16px; }
/* Footer links measured 21px tall, under the 24px WCAG 2.5.8 minimum for a discrete control.
   Padding rather than a taller font, so the footer's visual weight does not change. */
.foot-links a { color: var(--mid); font-size: 13.5px; padding: 6px 8px; border-radius: 8px; display: inline-block; }
.foot-links a:hover { background: var(--surface2); }
.foot-links a:hover { color: var(--gold-l); }
/* Second, quieter footer row holding the legal documents (Terms / Refund / Privacy). Separate
   from the product nav above it so the two don't read as one undifferentiated list. */
.foot-legal { gap: 6px 14px; margin-top: -6px; }
.foot-legal a { color: var(--dim); font-size: 12.5px; }
.foot-copy { color: var(--dim); font-size: 12px; margin: 0; }

/* ── Scroll reveal ─────────────────────────────────────────────
   Same treatment as the main page. landing.js tags the section-level
   blocks; nothing is hidden unless that script actually ran (.js-motion),
   so a JS failure or a crawler still sees the whole page. */
.js-motion [data-reveal] {
  opacity: 0;
  translate: 0 22px;
  transition: opacity .6s var(--r26-ease), translate .6s var(--r26-ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.js-motion [data-reveal].is-revealed { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-motion [data-reveal] { opacity: 1; translate: none; transition: none; }
  .feat-card:hover, .btn:hover, .btn-ghost:hover, .theme-toggle:hover { transform: none; }
}

/* ── Responsive ────────────────────────────────────────────── */

/* Tablet / small-laptop band. Measured at a 680px viewport: the header row needed 770px, so the
   nav ran 90px past the wrap and the link labels were being squeezed to a third of their width.
   The wordmark plus four nav items simply do not fit once the theme toggle is in the row — and
   they did not really fit before it either, the squeeze just had somewhere to go. Drop the
   wordmark (the icon still reads as the logo and still links home) and tighten the rhythm. */
@media (max-width: 900px) {
  header.site .logo-word { display: none; }
  .site-nav { gap: 15px; }
  .site-nav > a:not(.btn) { font-size: 13.5px; }
  .site-nav .btn-sm { padding: 9px 15px; }
}

@media (max-width: 640px) {
  header.site .wrap { height: 60px; }
  .logo { font-size: 16px; gap: 8px; }
  .logo img { height: 26px; }
  .site-nav { gap: 12px; }
  .site-nav > a:not(.btn) { display: none; }        /* keep only the CTA on small screens */
  .btn-sm { padding: 8px 14px; font-size: 13px; }
  /* FIX (audit #20 medium #1, cont'd): .btn has white-space:nowrap (desktop: keeps short CTAs
     on one line) — but .btn-lg's longer hero CTAs ("Generate an SEO article in 30 sec →") don't
     fit on one line at 343px of content width, so nowrap forced the button itself past the
     viewport edge instead of wrapping. Let it wrap to two lines on phones. */
  .btn-lg { white-space: normal; text-align: center; }
  .cmp-table th, .cmp-table td { padding: 10px 10px; font-size: 13px; }
  .hero { padding: 46px 0 28px; }
  .wrap { padding: 0 16px; }
  /* Deliberately NOT shrunk on phones — a touch target is the last thing that should
     get smaller on the device that uses touch. */
  /* FIX (audit #20 medium #1): the full "Blitz Content AI" wordmark + the "Try for free"
     CTA never both fit in a phone-width header (measured: 375px viewport, 416px document
     scroll width) — the header caused page-wide horizontal scroll on every marketing page.
     Same "icon-only on mobile" pattern already used for the main app's nav (see app.css's
     identical .brand-word fix, audit #4 #11) — hide the wordmark text, keep the icon.
     The FOOTER logo hit the same overflow independently (larger 22px font-size, centered,
     no competing button but still too wide for a 343px content area) — same fix. */
  header.site .logo-word, footer.site .logo-word { display: none; }
}