/* ============================================================
   tariffs.help, PUBLIC MARKETING SITE (apps/site)
   Standalone design system, ported faithfully from docs/index.html.
   This file OWNS the marketing look and is intentionally exempt from the
   tokens.css rule (CLAUDE.md §9), it is the marketing site's own system.
   It does NOT import tokens.css / components.css.

   Structure:
     1. Design tokens (:root) + base elements
     2. Layout helpers, buttons, eyebrow/typography helpers
     3. Notice bar + sticky header + language switcher
     4. Hero + live classifier card + classifier states (live tool)
     5. Trust bar, benefits, workflow, control, CTA
     6. Footer
     7. Generic content classes + aliases reused by the other pages
     8. Responsive rules (980 / 680) + reduced motion
   ============================================================ */

/* ---------- 1. Tokens + base ---------- */
:root {
  --ink: #10262d;
  --ink-2: #29434a;
  /* AA on both --card and --paper (operator readability pass 2026-08-06) */
  --muted: #5a6d71;
  --paper: #f6f4ee;
  --card: #fffefa;
  --line: #dbe2de;
  --green: #0b6b57;
  --green-2: #085846;
  --mint: #dff3e9;
  --mint-2: #b9e4d2;
  --amber: #f2b950;
  --amber-soft: #fff3d9;
  --navy: #0f2e35;
  --warn: #b4541f;
  --warn-soft: #fdeee1;
  --shadow: 0 22px 60px rgba(21, 51, 49, .12);
  --radius: 22px;
  --max: 1180px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --ease-spring: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* in-page anchor targets land below the 76px sticky header (chrome.css) */
section[id] { scroll-margin-top: 76px; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: -.03em;
  line-height: 1.08;
}
h1 { margin-bottom: 24px; font-size: clamp(46px, 5.4vw, 76px); font-weight: 500; }
h2 { margin-bottom: 18px; font-size: clamp(36px, 4vw, 52px); font-weight: 500; }
h3 { margin-bottom: 10px; font-size: 24px; font-weight: 600; }

/* the visible page frame + skip target */
.site-main { display: block; }

/* ---------- 2. Layout, buttons, typography helpers ---------- */
.shell {
  width: min(calc(100% - 40px), var(--max));
  margin-inline: auto;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  color: var(--green);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 20px; height: 2px; background: currentColor; }

.lead { color: var(--ink-2); font-size: clamp(18px, 2vw, 21px); line-height: 1.55; }
.muted { color: var(--muted); }

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 780;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button.primary { color: #fff; background: var(--green); box-shadow: 0 10px 25px rgba(11, 107, 87, .22); }
.button.primary:hover { background: var(--green-2); color: #fff; }
.button.secondary { border-color: #cfd9d5; background: rgba(255, 255, 255, .55); color: var(--ink); }
.button.secondary:hover { border-color: var(--green); color: var(--green); background: #fff; }
.button.light { color: var(--navy); background: #fff; }
.button.text { padding-inline: 6px; color: var(--green); }
.arrow { font-size: 18px; transition: transform .2s ease; }
.button:hover .arrow { transform: translateX(3px); }

/* Aliases so the not-yet-restyled pages keep working (map old .btn-* to the
   concept's .button look). */
.btn-primary {
  display: inline-flex; justify-content: center; align-items: center; gap: 9px;
  min-height: 48px; padding: 0 20px; border: 1px solid transparent;
  border-radius: 10px; font-size: 14px; font-weight: 780; color: #fff;
  background: var(--green); box-shadow: 0 10px 25px rgba(11, 107, 87, .22);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.btn-primary:hover { transform: translateY(-2px); background: var(--green-2); color: #fff; }
.btn-ghost {
  display: inline-flex; justify-content: center; align-items: center; gap: 9px;
  min-height: 48px; padding: 0 20px; border: 1px solid #cfd9d5;
  border-radius: 10px; font-size: 14px; font-weight: 780; color: var(--ink);
  background: rgba(255, 255, 255, .55);
  transition: transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease;
}
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--green); color: var(--green); background: #fff; }
.btn-sm { min-height: 42px; padding-inline: 16px; font-size: 14px; }
.lg { min-height: 52px; padding-inline: 24px; font-size: 15px; }

/* ---------- 3. (moved) Notice bar + header + language switcher ----------
   The shared marketing chrome (notice bar, sticky header, burger nav, language
   switcher) now lives in static/css/chrome.css under chrome- prefixed classes,
   so it can render on both the marketing site AND the public app surfaces
   (Code Explorer, /try/) without clobbering either design system. Its palette
   is copied from the :root block above; keep static/css/chrome.css in sync. */

/* ---------- 4. Hero + live classifier card ---------- */
.hero, .site-hero { position: relative; overflow: hidden; padding: 82px 0 88px; }
.hero::before {
  content: "";
  position: absolute;
  top: -310px;
  right: -200px;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(185, 228, 210, .62) 0, rgba(185, 228, 210, .12) 54%, transparent 72%);
  pointer-events: none;
}
.hero-grid { position: relative; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 64px; }
.hero-copy { padding-bottom: 10px; }
.hero-copy .lead { max-width: 620px; margin-bottom: 28px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hero-note { display: flex; gap: 18px; margin-top: 30px; color: var(--muted); font-size: 14px; }
.hero-note span { display: inline-flex; align-items: center; gap: 7px; }
.check { color: var(--green); font-weight: 900; }

.classifier-wrap { position: relative; }
.classifier-wrap::after {
  content: "";
  position: absolute;
  inset: 28px -18px -18px 28px;
  z-index: -1;
  border: 1px solid rgba(11, 107, 87, .2);
  border-radius: 28px;
  background: rgba(223, 243, 233, .4);
}
.classifier {
  overflow: hidden;
  border: 1px solid rgba(16, 38, 45, .12);
  border-radius: 24px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.classifier-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.classifier-head strong { font-family: Georgia, serif; font-size: 20px; }
.free-pill { flex: 0 0 auto; padding: 6px 10px; border-radius: 999px; color: var(--green); background: var(--mint); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.classifier-body { padding: 24px; }
.site-classify-heading { margin: 0 0 16px; font-family: Georgia, serif; font-size: 24px; font-weight: 600; }

/* tabs (concept), enhanced by JS; both fields still show + submit without JS */
.tabs { display: flex; gap: 5px; margin-bottom: 18px; padding: 4px; border-radius: 10px; background: #edf1ef; }
.tab {
  flex: 1;
  min-height: 38px;
  border: 0;
  border-radius: 7px;
  color: var(--muted);
  background: transparent;
  font-size: 14px;
  font-weight: 750;
}
.tab.active { color: var(--ink); background: #fff; box-shadow: 0 2px 8px rgba(24, 53, 50, .1); }

.classifier label, .field-label {
  display: block; margin-bottom: 8px; color: var(--ink-2);
  font-size: 13px; font-weight: 780; letter-spacing: .04em; text-transform: uppercase;
}
.field { position: relative; margin-bottom: 14px; }
.field-input,
.field input, .field textarea {
  width: 100%;
  border: 1px solid #cbd6d2;
  border-radius: 11px;
  outline: 0;
  color: var(--ink);
  background: #fff;
  transition: border .2s ease, box-shadow .2s ease;
}
.field input { height: 54px; padding: 0 16px; }
.field textarea { min-height: 102px; padding: 14px 16px; resize: vertical; }
.field input:focus, .field textarea:focus,
.field-input:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(11, 107, 87, .1); }
.field input::placeholder, .field textarea::placeholder,
.field-input::placeholder { color: #9aa8a4; }
input.field-input { height: 54px; padding: 0 16px; }
textarea.field-input { min-height: 102px; padding: 14px 16px; resize: vertical; }

.form-action, .public-submit {
  width: 100%; margin-top: 4px; border: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
}
.public-submit-label { display: inline-flex; align-items: center; gap: 9px; }
.privacy-line { margin: 11px 0 0; color: var(--muted); font-size: 13px; text-align: center; }

/* cancellation review step (/cancel/): a read-only echo of what was typed,
   stacked so it reads the same on a phone as on a desktop */
.cancel-review { display: grid; gap: 14px; margin: 16px 0 0; }
.cancel-review dt { color: var(--muted); font-size: 13px; }
.cancel-review dd { margin: 4px 0 0; color: var(--ink); font-size: 15px; font-weight: 700; white-space: pre-wrap; }
.cancel-card p + p { margin-top: 10px; }
/* the "go back" control is a submit button (it carries the typed values), so
   it needs the browser's default button face cleared to read as a text link */
.cancel-back { background: none; }

/* honeypot, visually hidden, still submits */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* htmx spinner: define the fade rule so a no-JS visitor never sees a
   permanently spinning indicator (the form still works via full POST). */
.htmx-indicator { opacity: 0; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }
.spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--line);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.spinner.sm { width: 20px; height: 20px; border-width: 2px; }
.spinner.xs { width: 14px; height: 14px; border-width: 2px; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes popIn { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* the swappable panel wrapper (HTMX target) */
.public-panel { display: flex; flex-direction: column; gap: 16px; }
.public-try { display: flex; flex-direction: column; gap: 0; }
.form-error, .field-error { margin: -8px 0 12px; color: var(--warn); font-size: 14px; }

/* result / question / nudge cards, the concept's mint success card, reused
   for every live-tool state so results stay consistent. */
.public-result {
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  margin: 0;
  padding: 18px;
  border: 1px solid var(--mint-2);
  border-radius: 14px;
  background: linear-gradient(135deg, #f5fbf8, #eef8f3);
  overflow-wrap: anywhere;
}
.public-result > * { min-width: 0; max-width: 100%; }
.done-card { align-items: flex-start; }
.success-check {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--green); color: #fff;
  font-size: 18px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  animation: popIn .4s var(--ease-spring);
}
.dash-title { font-family: Georgia, serif; font-size: 24px; font-weight: 600; margin: 0; }
.dash-sub { font-size: 14px; color: var(--ink-2); line-height: 1.55; margin: 0; }
.dash-sub strong { color: var(--ink); font-weight: 700; }

.url-code-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 14px 16px; border: 1px solid var(--mint-2); border-radius: 12px;
  background: #fff;
}
.url-code { font-family: var(--mono); font-size: 28px; font-weight: 700; color: var(--green); letter-spacing: .02em; }
.url-code-desc { font-size: 14px; color: var(--ink-2); }

/* plain-language confidence band (shared confidence_band.html) */
.trust-band {
  align-self: flex-start; white-space: nowrap;
  font-size: 12px; font-weight: 800; padding: 6px 10px; border-radius: 999px;
}
.trust-band-high, .trust-band-confirmed { color: #0b5c49; background: #d6f0e3; }
.trust-band-glance { color: #8a5406; background: var(--amber-soft); }
.trust-band-together { color: var(--ink-2); background: #eef2f0; }

.public-why {
  border: 1px solid #cee2d9; border-radius: 11px;
  background: #edf3f0; padding: 14px 16px;
  font-size: 14px; line-height: 1.5;
}
.public-why > summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.public-why > p { margin: 8px 0 0; color: var(--ink-2); overflow-wrap: anywhere; }
.public-rejected { margin: 10px 0 0; padding-left: 0; list-style: none; }
.public-rejected li { color: var(--ink-2); padding: 4px 0; border-top: 1px solid #cee2d9; font-size: 14px; overflow-wrap: anywhere; }
.public-rejected-code { font-family: var(--mono); color: var(--ink); font-weight: 700; }
.row-meta, .public-scenario { font-size: 13px; color: var(--muted); margin-top: 8px; }

/* the shared legal/disclaimer notice + free-sample note (directive 8) */
.decision-legal-notice {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid #cee2d9;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
}
.public-sample-note { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0; }
.public-cta { width: 100%; margin-top: 4px; }
.public-cta-block { display: flex; flex-direction: column; gap: 6px; }
.public-cta-block > * { min-width: 0; max-width: 100%; }

/* clickable answers to a "needs one detail" question */
.public-choices { display: flex; flex-direction: column; gap: 8px; margin: 6px 0; }
.public-choices form { margin: 0; }
.public-choice {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 12px 14px; font-size: 14px; font-weight: 600;
  color: var(--ink); background: #fff;
  border: 1px solid var(--mint-2); border-radius: 10px;
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.public-choice:hover { border-color: var(--green); color: var(--green); transform: translateX(2px); }
.public-choices-alt { font-size: 14px; margin-top: 2px; }

.public-result-error {
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid #f2cdb4; border-left: 3px solid var(--warn);
  border-radius: 14px; background: var(--warn-soft); color: var(--warn);
  padding: 16px 18px;
}
.public-result-error p { margin: 0; }

/* thin wrapper the marketing pages use around the tool card */
.site-classify { width: 100%; }

/* ---------- 5. Trust bar / benefits / workflow / control / CTA ---------- */
.trust-grid { display: grid; grid-template-columns: 1.15fr repeat(3, 1fr); min-height: 112px; }
.trust-item { display: flex; align-items: center; gap: 13px; padding: 22px 26px; border-left: 1px solid rgba(16, 38, 45, .09); }
.trust-item:first-child { padding-left: 0; border-left: 0; }
.trust-item strong { display: block; font-family: Georgia, serif; font-size: 17px; }
.trust-item small { color: var(--muted); font-size: 13px; }

section, .site-section { padding: 110px 0; }
.section-head { max-width: 690px; margin-bottom: 48px; }
.section-head p { color: var(--muted); font-size: 18px; }


.workflow-section { overflow: hidden; background: var(--navy); color: #fff; }
.workflow-section .eyebrow { color: #7bd6b3; }
.workflow-section .section-head p { color: #b9cbca; }
.workflow { display: grid; grid-template-columns: .88fr 1.12fr; gap: 70px; align-items: center; }
.steps { display: grid; gap: 8px; }
.step { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, .11); }
.step:last-child { border-bottom: 0; }
.step-num { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; color: #80dab8; font-size: 13px; font-weight: 800; }
.step h3 { margin-bottom: 7px; font-size: 22px; color: #fff; }
.step p { margin: 0; color: #b9cbca; font-size: 14px; }
.product-window { border: 1px solid rgba(255, 255, 255, .15); border-radius: 20px; background: #f7f8f5; box-shadow: 0 28px 80px rgba(0, 0, 0, .28); transform: rotate(1.2deg); }
.window-bar { display: flex; align-items: center; gap: 6px; height: 42px; padding: 0 16px; border-bottom: 1px solid #dce3df; }
.window-dot { width: 8px; height: 8px; border-radius: 50%; background: #cad2ce; }
.window-content { padding: 24px; color: var(--ink); }
.window-label { margin-bottom: 14px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.product-title { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 20px; }
.product-title strong { font: 600 21px/1.2 Georgia, serif; }
.product-chip { padding: 7px 10px; border-radius: 999px; color: var(--green); background: var(--mint); font-size: 12px; font-weight: 800; }
.code-panel { padding: 20px; border: 1px solid var(--green); border-radius: 13px; background: #fff; }
.code-panel-top { display: flex; justify-content: space-between; gap: 15px; }
.code-panel .code { font-size: 35px; }
.result-kicker { color: var(--muted); font-size: 12px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.code { margin: 3px 0 2px; color: var(--green); font: 700 30px/1.2 Georgia, serif; letter-spacing: .02em; }
.result-name { margin-bottom: 14px; color: var(--ink-2); font-size: 14px; }
.duty { align-self: center; padding: 7px 10px; border-radius: 8px; color: var(--ink); background: var(--amber-soft); font-size: 13px; font-weight: 800; }
.why { margin-top: 18px; padding: 16px; border-radius: 11px; background: #edf3f0; color: var(--ink-2); font-size: 14px; }
.why strong { color: var(--ink); }

.control { padding-top: 0; }
.control-box { display: grid; grid-template-columns: 1.15fr .85fr; gap: 70px; padding: 56px; border-radius: 26px; color: #fff; background: linear-gradient(125deg, #0b6b57, #114d49); }
.control-box h2 { margin-bottom: 16px; }
.control-box p { margin: 0; color: #d8ebe5; font-size: 18px; }
.control-box .decision-legal-notice { margin-top: 16px; border-top: 0; padding-top: 0; color: #bfe0d6; }
.control-points { display: grid; gap: 15px; align-content: center; }
.control-point { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 12px; background: rgba(255, 255, 255, .08); font-size: 14px; font-weight: 700; }
.control-check { display: grid; flex: 0 0 auto; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--green); background: #fff; font-weight: 900; }

.cta { padding-top: 0; }
.cta-box { position: relative; overflow: hidden; padding: 78px 40px; border: 1px solid rgba(16, 38, 45, .1); border-radius: 28px; background: var(--card); text-align: center; }
.cta-box::before, .cta-box::after { content: ""; position: absolute; width: 240px; height: 240px; border-radius: 50%; filter: blur(2px); }
.cta-box::before { top: -130px; left: -70px; background: rgba(223, 243, 233, .8); }
.cta-box::after { right: -80px; bottom: -160px; background: rgba(242, 185, 80, .17); }
.cta-inner { position: relative; z-index: 1; max-width: 690px; margin: auto; }
.cta-inner p { margin-bottom: 26px; color: var(--muted); font-size: 18px; }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.cta-caption { margin-top: 13px !important; font-size: 13px !important; }

/* ---------- 6. (moved) Footer ----------
   The shared footer moved to static/css/chrome.css (.chrome-footer*), for the
   same reason as the header (see section 3 above). */

/* ---------- 7. Generic content classes + compat for later-pass pages ---------- */
/* These let about/how-it-works/contact/tools/pricing/legal render decently
   before their own restyle pass. Concept-consistent, not pixel-final. */
.site-hero-inner { position: relative; max-width: 760px; }

.site-prose { width: min(calc(100% - 40px), 760px); margin-inline: auto; }
.site-prose h1, .site-prose h2, .site-prose h3 { margin-top: 1.4em; }
.site-prose h2 { font-size: 30px; }
.site-prose h3 { font-size: 21px; }
.site-prose p, .site-prose li { color: var(--ink-2); font-size: 16px; line-height: 1.7; }
.site-prose p { margin: 0 0 1em; }
.site-prose ul, .site-prose ol { margin: 0 0 1em; padding-left: 20px; }
.site-prose li { margin: 4px 0; }
.site-prose a { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }
.site-prose a:hover { color: var(--green-2); }

.card {
  padding: 26px;
  border: 1px solid rgba(16, 38, 45, .1);
  border-radius: var(--radius);
  background: var(--card);
}
.card-title { font-family: Georgia, serif; font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.card p { margin: 0; color: var(--muted); }
.method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  color: var(--green); background: var(--mint);
  font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.is-soon { color: var(--muted); background: #eef2f0; }

.duty-chip { padding: 7px 10px; border-radius: 8px; color: var(--ink); background: var(--amber-soft); font-size: 13px; font-weight: 800; }
.code-block { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--mint-2); border-radius: 13px; background: #fff; }
.code-block-main { display: flex; flex-direction: column; gap: 2px; }
.code-num { font-family: var(--mono); font-size: 26px; font-weight: 700; color: var(--green); }
.code-label { font-size: 14px; color: var(--ink-2); }
.here-why-summary { display: inline-block; margin-top: 12px; color: var(--green); font-size: 14px; font-weight: 700; cursor: pointer; }

/* light version of the help "vignette" window used on a few pages */
.gvignette { margin: 24px 0; }
.gvignette figcaption { margin-top: 12px; color: var(--muted); font-size: 14px; }
.gv-window { border: 1px solid var(--line); border-radius: 18px; background: #fff; overflow: hidden; box-shadow: var(--shadow); }
.gv-bar { display: flex; gap: 6px; height: 40px; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--line); }
.gv-bar span { width: 8px; height: 8px; border-radius: 50%; background: #cad2ce; }
.gv-body { padding: 22px; }
.gv-card { display: flex; flex-direction: column; gap: 12px; }
.gv-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.gv-title { font: 600 18px/1.2 Georgia, serif; }

/* hero stat tiles used by a couple of later-pass pages */
.hero-stats { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 26px; }
.hero-stat { display: flex; flex-direction: column; gap: 2px; }
.hero-stat-val { font-family: Georgia, serif; font-size: 30px; font-weight: 600; color: var(--green); }
.hero-stat-label { color: var(--muted); font-size: 14px; }

.hiw-intro { max-width: 720px; }
.tool-card { padding: 26px; border: 1px solid rgba(16, 38, 45, .1); border-radius: var(--radius); background: var(--card); }
.empty, .done { text-align: center; }

/* ---------- 8. Responsive ---------- */
@media (max-width: 980px) {
  /* header/nav/footer responsive rules moved to static/css/chrome.css */
  .hero-grid, .workflow, .method-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 720px; }
  .classifier-wrap { max-width: 680px; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-item:nth-child(3) { border-left: 0; }
  .trust-item:first-child { padding-left: 26px; }
  .control-box { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 680px) {
  .shell { width: min(calc(100% - 28px), var(--max)); }
  .site-prose { width: min(calc(100% - 28px), 760px); }
  /* header/nav/footer responsive rules moved to static/css/chrome.css */
  .hero, .site-hero { padding: 62px 0 68px; }
  .hero-grid { gap: 42px; }
  .hero-note { flex-direction: column; gap: 6px; }
  .classifier-wrap::after { inset: 15px -7px -9px 15px; }
  .classifier-head, .classifier-body { padding: 18px; }
  .trust-grid { grid-template-columns: 1fr; }
  .trust-item { border-left: 0; border-top: 1px solid rgba(16, 38, 45, .09); padding-inline: 8px; }
  .trust-item:first-child { padding-left: 8px; border-top: 0; }
  section, .site-section { padding: 80px 0; }
  .workflow { gap: 44px; }
  .window-content { padding: 18px; }
  .product-title, .code-panel-top { align-items: flex-start; flex-direction: column; }
  .control-box { padding: 34px 24px; }
  .cta-box { padding: 58px 20px; }
  .cta-actions .button, .cta-actions .btn-primary, .cta-actions .btn-ghost { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ============================================================
   homepage chapters (apps/site home.html)
   The middle of the marketing homepage reads as three visually separated
   chapters, adapted from docs/three-sections-separated.html:

     1. .impact          navy overview: chapter head, outcomes, workflow board
     2. .collaboration   light paper: capability grid + support stack
     3. .chapter-decision  forest gradient: steps, product window, the
                           responsibility bar that carries the legal notice

   A .bridge / .decision-bridge pill straddles each seam. The concept
   redefines several generic selectors site.css already owns for the light
   site (body / h2 / .eyebrow / .shell), so those are dropped here or scoped
   under the chapter class and can never leak. The concept's new forest hexes
   are NOT introduced: both gradients reuse the established #0b6b57 / #114d49
   pair, and the remaining colours come from :root or the rgba/# literals
   already used elsewhere in this file. Chapter 3 shares .workflow / .steps /
   .product-window / .code-panel with how_it_works.html, so those base rules
   stay generic and only the chapter's own overrides are scoped.
   ============================================================ */

/* ---------- shared chapter chrome ---------- */
.chapter-head {
  position: relative;
  display: grid;
  grid-template-columns: 1fr .86fr;
  gap: 70px;
  align-items: end;
  margin-bottom: 38px;
}
.chapter-head h2 {
  max-width: 690px;
  margin-bottom: 0;
  font-size: clamp(36px, 4.4vw, 60px);
  font-weight: 500;
  line-height: 1.05;
}
.chapter-intro { max-width: 520px; justify-self: end; }
.chapter-intro p { margin-bottom: 16px; font-size: clamp(15px, 1.7vw, 18px); }
.chapter-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.proof-pill {
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  color: #e1efec;
  background: rgba(255,255,255,.06);
  font-size: 12px;
  font-weight: 800;
}

/* the decorative 01 / 02 / 03 watermark, decoration only (aria-hidden) */
.chapter-number {
  position: absolute;
  top: -70px;
  right: 0;
  z-index: -1;
  font-size: clamp(120px, 16vw, 220px);
  font-weight: 500;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.metric-value, .ready-number, .engine-title, .capability-title,
.chapter-number, .proof-watermark {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: -.035em;
}

/* the two bridge pills that straddle the seams between chapters */
.bridge, .decision-bridge {
  position: relative;
  z-index: 5;
  color: #fff;
  box-shadow: 0 16px 44px rgba(0,0,0,.2);
  font-size: 14px;
  text-align: center;
}
.bridge {
  width: min(calc(100% - 40px), 840px);
  margin: -30px auto;
  padding: 17px 25px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: #153d42;
  font-weight: 750;
}
.bridge strong { color: #80dab8; }
.decision-bridge {
  width: min(calc(100% - 40px), 760px);
  margin: -32px auto;
  padding: 17px 24px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 14px;
  background: #114d49;
  font-weight: 800;
}

/* ---------- chapter 1: the navy overview ---------- */
.impact {
  --mint-accent: #80dab8;
  position: relative;
  overflow: hidden;
  padding: 80px 0 118px;
  color: #fff;
  background: var(--navy);
}
.impact::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .22;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, transparent, #000 35%, #000 70%, transparent);
}
.impact::after {
  content: "";
  position: absolute;
  top: -220px;
  right: -110px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(83,190,150,.22), transparent 67%);
}
.impact-inner { position: relative; z-index: 1; }
.impact .eyebrow { color: var(--mint-accent); }
.impact .chapter-intro p { color: #bbcecc; }
.impact .chapter-number { color: rgba(255,255,255,.035); }

/* outcomes strip: four hairline-joined cells above the workflow board,
   each a serif value followed by one flowing sentence. The last cell (duty
   savings) carries a mint value for a little extra weight */
.outcomes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  overflow: hidden;
  margin-bottom: 15px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 16px;
  background: rgba(255,255,255,.13);
}
.outcome { min-height: 94px; padding: 19px 21px; background: rgba(15,46,53,.94); }
.metric-value {
  display: block;
  margin-bottom: 4px;
  font-size: clamp(24px, 2.5vw, 32px);
  font-weight: 500;
  line-height: 1.05;
}
.outcome-accent .metric-value { color: var(--mint-accent); }
.outcome-copy { display: block; color: #a8bfbb; font-size: 14px; line-height: 1.42; }

/* workflow board: the light-mint centrepiece, one worked example catalog
   walking through import, automation and supervision */
.workflow-board {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  color: var(--ink);
  background: var(--mint);
  box-shadow: 0 28px 80px rgba(0,0,0,.24);
}
.board-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 54px;
  padding: 10px 22px;
  border-bottom: 1px solid rgba(16,38,45,.12);
  background: rgba(255,255,255,.4);
}
.board-title { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 800; }
.status-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 5px rgba(11,107,87,.09);
}
.board-note { color: #55736d; font-size: 10px; font-weight: 750; }
.board-flow {
  display: grid;
  grid-template-columns: .82fr 38px 1.28fr 38px 1fr;
  gap: 12px;
  align-items: stretch;
  padding: 22px;
}
.flow-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px;
  border: 1px solid rgba(16,38,45,.12);
  border-radius: 16px;
  background: rgba(255,255,255,.62);
}
.flow-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  color: #55736d;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.flow-label b { color: var(--green); }
.source-list { display: grid; gap: 8px; }
.source-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(16,38,45,.1);
  border-radius: 9px;
  color: var(--ink-2);
  background: #fff;
  font-size: 10px;
  font-weight: 800;
}
.source-row span:last-child { color: #55736d; font-size: 9px; font-weight: 750; }
.source-total {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 11px;
  border-top: 1px solid rgba(16,38,45,.1);
  color: #55736d;
  font-size: 9px;
  font-weight: 750;
}
.source-total strong { color: var(--ink); font-size: 11px; }
.flow-arrow { display: grid; place-items: center; color: var(--green); }
.arrow-line { position: relative; width: 100%; height: 2px; background: rgba(11,107,87,.28); }
.arrow-line::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 5px rgba(11,107,87,.09);
}
.arrow-line::after {
  content: "";
  position: absolute;
  top: -4px;
  right: 0;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--green);
  border-right: 2px solid var(--green);
  transform: rotate(45deg);
}
.engine {
  position: relative;
  overflow: hidden;
  color: #fff;
  border-color: transparent;
  background: var(--navy);
}
.engine::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -95px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(128,218,184,.16), transparent 68%);
}
.engine .flow-label { position: relative; z-index: 1; color: #9fb8b5; }
.engine .flow-label b { color: var(--mint-accent); }
.engine-title {
  position: relative;
  z-index: 1;
  margin-bottom: 14px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.1;
}
.engine-steps { position: relative; z-index: 1; display: grid; gap: 7px; }
.engine-step {
  display: grid;
  grid-template-columns: 23px 1fr auto;
  gap: 9px;
  align-items: center;
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 9px;
  background: rgba(255,255,255,.045);
  font-size: 10px;
}
.step-check {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 7px;
  color: var(--green);
  background: var(--mint);
  font-size: 9px;
  font-weight: 900;
}
.step-name { color: #dce9e6; font-weight: 800; }
.step-count { color: var(--mint-accent); font-weight: 800; }
.ready-number {
  margin: 4px 0 2px;
  color: var(--green);
  font-size: clamp(38px, 4vw, 55px);
  font-weight: 500;
  line-height: .95;
}
.ready-copy { margin-bottom: 15px; color: #55736d; font-size: 10px; font-weight: 750; }
.approval-bar {
  overflow: hidden;
  height: 7px;
  margin-bottom: 16px;
  border-radius: 99px;
  background: rgba(16,38,45,.1);
}
.approval-bar span { display: block; width: 98.9%; height: 100%; border-radius: inherit; background: var(--green); }
.exception-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  padding: 9px 10px;
  border: 1px solid rgba(242,185,80,.32);
  border-radius: 9px;
  color: #8a5406;
  background: rgba(242,185,80,.14);
  font-size: 9px;
  font-weight: 800;
}
.flow-people {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 15px;
  color: #55736d;
  font-size: 9px;
  font-weight: 750;
}
.avatars { display: flex; flex: 0 0 auto; }
.people-avatar {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  margin-left: -5px;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: var(--green);
  font-size: 8px;
  font-weight: 900;
}
.people-avatar:first-child { margin-left: 0; }
.people-avatar.supplier { color: var(--ink); background: var(--amber); }
.export-label {
  margin-top: auto;
  margin-bottom: 7px;
  color: #55736d;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.export-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.export-chip {
  padding: 6px 3px;
  border: 1px solid rgba(11,107,87,.14);
  border-radius: 7px;
  color: var(--green);
  background: rgba(11,107,87,.06);
  font-size: 8px;
  font-weight: 800;
  text-align: center;
}
.export-chip::after { content: " ✓"; }
.board-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 14px 22px;
  border-top: 1px solid rgba(16,38,45,.11);
  color: #47635d;
  background: rgba(255,255,255,.38);
  font-size: 13px;
  font-weight: 700;
}
.board-foot p { margin: 0; }
.board-foot strong { color: var(--ink); }
.control-note { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; color: var(--green); }
.control-note::before {
  content: "✓";
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  color: #fff;
  background: var(--green);
  font-size: 12px;
}

/* ---------- chapter 2: people and capabilities (light) ---------- */
.collaboration {
  position: relative;
  overflow: hidden;
  padding: 112px 0 118px;
  color: var(--ink);
  background: var(--paper);
}
.collaboration::before {
  content: "";
  position: absolute;
  left: -160px;
  bottom: -210px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(185,228,210,.52), transparent 68%);
  pointer-events: none;
}
.collaboration-inner { position: relative; z-index: 1; }
.collaboration .chapter-intro p { color: var(--ink-2); }
.collaboration .chapter-number { color: rgba(16,38,45,.04); }
.collaboration .proof-pill {
  border-color: rgba(16,38,45,.12);
  color: #46615b;
  background: rgba(255,255,255,.58);
}

.capability-grid { display: grid; grid-template-columns: 1fr 1fr .82fr; gap: 14px; align-items: stretch; }
.capability-card {
  position: relative;
  overflow: hidden;
  min-height: 390px;
  padding: 25px;
  border: 1px solid rgba(16,38,45,.12);
  border-radius: 22px;
  background: var(--card);
  box-shadow: 0 16px 42px rgba(24,55,50,.07);
}
.capability-card.dark {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(145deg, #0b6b57, #114d49);
}
.capability-kicker {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: #758984;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.capability-card.dark .capability-kicker { color: #9ec0b9; }
.capability-number { color: var(--green); letter-spacing: .02em; white-space: nowrap; }
.capability-card.dark .capability-number { color: #80dab8; }
.capability-title {
  max-width: 350px;
  margin: 20px 0 9px;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 500;
  line-height: 1.05;
}
.capability-copy { max-width: 390px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.capability-card.dark .capability-copy { color: #bed1cd; }

.variant-viz { position: relative; min-height: 126px; margin-top: 26px; padding-left: 2px; }
.source-product {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 11px;
  background: rgba(255,255,255,.09);
  font-size: 11px;
  font-weight: 750;
}
.source-check {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 7px;
  color: var(--green);
  background: var(--mint);
  font-weight: 900;
}
.variant-line { position: absolute; top: 41px; left: 48px; width: 2px; height: 47px; background: rgba(128,218,184,.35); }
.variant-line::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 240px;
  height: 2px;
  background: linear-gradient(90deg, rgba(128,218,184,.35), transparent);
}
.variant-chips { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 29px; }
.variant-chip {
  padding: 9px 5px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  color: #deebe8;
  background: rgba(0,0,0,.1);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}
.variant-chip .chip-applied { display: block; margin-top: 3px; color: #80dab8; font-size: 9px; font-weight: 750; }
.variant-alert {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 6px 9px;
  border: 1px solid rgba(242,185,80,.28);
  border-radius: 7px;
  color: #f3cb80;
  background: rgba(242,185,80,.08);
  font-size: 10px;
  font-weight: 800;
}

.supplier-thread { display: grid; gap: 8px; margin-top: 24px; }
.thread-row { display: flex; align-items: flex-start; gap: 8px; }
.thread-row.answer { justify-content: flex-end; }
.avatar {
  display: grid;
  flex: 0 0 30px;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--green);
  background: var(--mint);
  font-size: 9px;
  font-weight: 900;
}
.thread-row.answer .avatar { order: 2; color: #fff; background: var(--green); }
.bubble {
  max-width: 82%;
  padding: 10px 12px;
  border: 1px solid rgba(16,38,45,.12);
  border-radius: 4px 10px 10px 10px;
  color: var(--ink-2);
  background: #fff;
  font-size: 11px;
}
.thread-row.answer .bubble { border-color: transparent; border-radius: 10px 4px 10px 10px; color: #fff; background: var(--green); }
.thread-status {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 3px;
  padding-top: 11px;
  border-top: 1px solid rgba(16,38,45,.12);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}
.thread-status strong { color: var(--green); }

.support-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 14px; }
.support-card {
  min-height: 188px;
  padding: 20px;
  border: 1px solid rgba(16,38,45,.12);
  border-radius: 20px;
  background: var(--card);
  box-shadow: 0 12px 32px rgba(24,55,50,.06);
}
.support-card h3 { margin: 14px 0 6px; font-size: 23px; font-weight: 500; line-height: 1.08; }
.support-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.evidence-viz {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
  padding: 9px;
  border: 1px solid rgba(16,38,45,.1);
  border-radius: 8px;
  background: #f2f5f1;
}
.evidence-lines { display: grid; gap: 4px; }
.evidence-line { height: 4px; border-radius: 99px; background: rgba(16,38,45,.13); }
.evidence-line:first-child { width: 84px; background: rgba(11,107,87,.48); }
.evidence-line:nth-child(2) { width: 67px; }
.evidence-line:nth-child(3) { width: 76px; }
.evidence-ready { padding: 5px 7px; border-radius: 6px; color: var(--green); background: var(--mint); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.delivery-viz { display: grid; gap: 7px; margin-top: 13px; }
.delivery-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border: 1px solid rgba(11,107,87,.15);
  border-radius: 7px;
  color: var(--muted);
  background: rgba(223,243,233,.48);
  font-size: 9px;
  font-weight: 800;
}
.delivery-summary strong { color: var(--green); font-size: 11px; }
.delivery-destinations { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.delivery-chip {
  padding: 6px 3px;
  border: 1px solid rgba(16,38,45,.12);
  border-radius: 6px;
  color: #55716a;
  background: #fff;
  font-size: 9px;
  font-weight: 900;
  text-align: center;
}
.delivery-chip::after { content: " ✓"; color: var(--green); }

.collab-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(16,38,45,.12);
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}
.collab-foot p { max-width: 805px; margin: 0; }
.collab-foot strong { color: var(--ink); }
.collab-link { flex: 0 0 auto; color: var(--green); font-size: 14px; font-weight: 800; white-space: nowrap; }
.collab-link:hover { color: var(--green-2); }
.collab-link .arrow { display: inline-block; margin-left: 2px; font-size: inherit; transition: transform .2s ease; }
.collab-link:hover .arrow { transform: translateY(3px); }

/* ---------- chapter 3: how one product reaches a decision ---------- */
.chapter-decision {
  position: relative;
  overflow: hidden;
  padding: 116px 0 92px;
  background: linear-gradient(135deg, #114d49, #0b6b57);
}
.chapter-decision::before {
  content: "";
  position: absolute;
  top: -260px;
  left: 34%;
  width: 650px;
  height: 650px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(128,218,184,.15), transparent 68%);
  pointer-events: none;
}
.chapter-decision .shell { position: relative; z-index: 1; }
.chapter-decision .workflow { position: relative; }
.chapter-decision .chapter-number { top: -78px; right: auto; left: 0; color: rgba(255,255,255,.05); }
.chapter-decision .section-head { margin-bottom: 30px; }
.chapter-decision .section-head h2 {
  max-width: 590px;
  font-size: clamp(36px, 4.4vw, 58px);
  font-weight: 500;
  line-height: 1.04;
}
.chapter-decision .section-head p { color: #c2d7d2; }
.chapter-decision .step p { color: #aec6c0; }
.chapter-decision .step-num { color: #80dab8; }

.proof-wrap { position: relative; padding: 34px 0 8px; }
.proof-watermark {
  position: absolute;
  top: 0;
  right: 22px;
  color: rgba(255,255,255,.11);
  font-size: 44px;
  font-weight: 500;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.chapter-decision .product-window { position: relative; transform: rotate(1.1deg); }
.proof-caption { margin: 16px 20px 0; color: #bcd2cd; font-size: 13px; text-align: center; }

.responsibility-bar {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  margin-top: 52px;
  padding: 20px 22px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  color: #fff;
}
.responsibility-bar > strong {
  flex: 0 0 auto;
  max-width: 250px;
  font: 500 21px/1.2 Georgia, "Times New Roman", serif;
  letter-spacing: -.025em;
}
.responsibility-copy { max-width: 630px; }
.responsibility-copy > span { display: block; color: #b9d0cb; font-size: 14px; line-height: 1.5; }
.responsibility-bar .decision-legal-notice {
  margin-top: 8px;
  padding-top: 0;
  border-top: 0;
  color: #a7c6c0;
}
.responsibility-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 999px;
  color: #114d49;
  background: #80dab8;
  font-size: 12px;
  font-weight: 900;
}

/* ---------- chapter responsive ---------- */
@media (max-width: 1040px) {
  .chapter-head { grid-template-columns: 1fr; gap: 20px; }
  .chapter-intro { justify-self: start; }
  /* the board stacks: the three panels sit above each other and the arrows
     turn vertical, pointing down the flow instead of across it */
  .board-flow { grid-template-columns: 1fr; }
  .flow-arrow { min-height: 30px; }
  .arrow-line { width: 2px; height: 100%; }
  .arrow-line::before { top: 2px; left: -3px; }
  .arrow-line::after { top: auto; right: auto; bottom: 0; left: -3px; transform: rotate(135deg); }
  /* the outcomes strip folds from four across to two by two */
  .outcomes { grid-template-columns: 1fr 1fr; }
  .capability-grid { grid-template-columns: 1fr 1fr; }
  .support-stack { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .proof-wrap { max-width: 680px; }
}

@media (max-width: 720px) {
  .impact { padding: 64px 0 96px; }
  .collaboration { padding: 96px 0 96px; }
  .chapter-decision { padding: 96px 0 68px; }
  .bridge, .decision-bridge { width: calc(100% - 28px); border-radius: 14px; }
  /* the watermarks are decoration, not content: they are the only things
     that may disappear on a phone */
  .chapter-number { display: none; }
  .outcomes { grid-template-columns: 1fr; }
  .outcome { min-height: 82px; }
  /* the example-catalog note restacks, it is never hidden */
  .board-top, .board-foot { align-items: flex-start; flex-direction: column; gap: 10px; }
  .capability-grid { grid-template-columns: 1fr; }
  .support-stack { grid-column: auto; grid-template-columns: 1fr; }
  .collab-foot { align-items: flex-start; flex-direction: column; gap: 16px; }
  .responsibility-bar { align-items: flex-start; flex-direction: column; gap: 16px; }
  .responsibility-copy { max-width: none; }
  .responsibility-bar > strong { max-width: none; }
  .proof-caption { margin-inline: 0; }
}

@media (max-width: 460px) {
  .chapter-head h2, .chapter-decision .section-head h2 { font-size: 34px; }
  .chapter-intro p { font-size: 15px; }
  .board-flow { padding: 12px; }
  .flow-panel { padding: 17px; }
  .metric-value { font-size: 32px; }
  .engine-title { font-size: 21px; }
  .export-chips, .delivery-destinations, .variant-chips { grid-template-columns: 1fr 1fr; }
  .flow-people { align-items: flex-start; flex-direction: column; }
  .variant-line { display: none; }
  .bubble { max-width: 88%; }
  .capability-card { min-height: auto; padding: 22px; }
  .capability-title { font-size: 30px; }
  .capability-kicker { align-items: flex-start; flex-direction: column; gap: 7px; }
  .proof-watermark { display: none; }
}

/* ============================================================
   free-tools chooser page (apps/site tools.html)
   Ported from the operator mock docs/tools-redesign.html. The page keeps the
   shared site chrome (notice/header/footer from base.html); only the page BODY
   is themed here. Every new rule is scoped under .tools-hero / .choice-section
   so the generic .tool-card (still used by how_it_works via .method-grid) is
   left untouched. Colours/shadows reuse the existing :root tokens + established
   site.css rgba patterns; the one borrowed literal, #8a5406 (amber-dark text on
   --amber-soft), already lives in .trust-band-glance above. Reduced motion is
   already honoured by the global rule at the end of section 8.
   ============================================================ */

/* centred hero variant, reuses .hero's radial glow + relative/overflow */
.hero.tools-hero { padding: 74px 0 34px; text-align: center; }
.tools-hero .eyebrow { justify-content: center; }
.tools-hero .eyebrow::after { content: ""; width: 20px; height: 2px; background: currentColor; }
.tools-hero h1 { max-width: 850px; margin-inline: auto; }
.tools-hero .lead { max-width: 680px; margin-inline: auto; }

.choice-section { padding: 8px 0 96px; }

/* decision-rule pill (an <h2> used as the section label, so the generic h2
   type scale is fully reset here) */
.decision-rule {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: fit-content;
  margin: 0 auto 22px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
  background: rgba(255, 255, 255, .6);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
  text-align: center;
}
.decision-mark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #fff;
  background: var(--green);
  font-size: 13px;
  font-weight: 800;
}

.choice-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}
.or-badge {
  position: absolute;
  top: 46px;
  left: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 6px solid var(--paper);
  border-radius: 50%;
  color: var(--muted);
  background: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  transform: translateX(-50%);
}

.choice-section .tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 490px;
  padding: 34px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.choice-section .tool-card:hover {
  transform: translateY(-4px);
  border-color: var(--mint-2);
  box-shadow: 0 28px 76px rgba(20, 53, 50, .15);
}
.choice-section .tool-card::after {
  content: "";
  position: absolute;
  right: -82px;
  bottom: -100px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(185, 228, 210, .25);
  pointer-events: none;
}
.choice-section .tool-card.lookup::after { background: rgba(242, 185, 80, .14); }
.choice-section .tool-card > * { position: relative; z-index: 1; }

.card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.tool-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  color: var(--green);
  background: var(--mint);
}
.tool-card.lookup .tool-icon { color: #8a5406; background: var(--amber-soft); }
.tool-icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}
.free-badge {
  padding: 6px 9px;
  border-radius: 999px;
  color: var(--green);
  background: var(--mint);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.tool-card.lookup .free-badge { color: #8a5406; background: var(--amber-soft); }
.card-kicker {
  margin: 29px 0 7px;
  color: var(--green);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tool-card.lookup .card-kicker { color: #8a5406; }
.choice-section .tool-card h2 {
  margin: 0 0 11px;
  font-size: 36px;
  font-weight: 500;
  line-height: 1.08;
}
.card-description { max-width: 470px; margin: 0 0 23px; color: var(--muted); font-size: 14px; }
.difference-list {
  display: grid;
  gap: 10px;
  margin: 0 0 28px;
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.difference-list li { display: grid; grid-template-columns: 94px 1fr; gap: 12px; align-items: baseline; font-size: 13px; }
.difference-list strong { color: var(--ink); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.difference-list span { color: var(--ink-2); }
.card-action { margin-top: auto; }
.card-action .button { width: 100%; min-height: 54px; }
.tool-card.lookup .card-action .button {
  color: var(--green);
  border-color: var(--green);
  background: transparent;
  box-shadow: none;
}
.tool-card.lookup .card-action .button:hover { color: #fff; background: var(--green); }
.card-note { margin: 10px 0 0; color: var(--muted); font-size: 12px; text-align: center; }

.choice-summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 17px;
  align-items: center;
  max-width: 810px;
  margin: 24px auto 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .6);
}
.summary-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: var(--green);
  background: var(--mint);
  font-weight: 900;
}
.choice-summary p { margin: 0; color: var(--muted); font-size: 13px; }
.choice-summary strong { color: var(--ink); }
.choice-summary a { color: var(--green); font-size: 12px; font-weight: 800; white-space: nowrap; }

@media (max-width: 980px) {
  .choice-grid { grid-template-columns: 1fr; }
  .or-badge { top: 50%; transform: translate(-50%, -50%); }
  .choice-section .tool-card { min-height: 0; }
}

@media (max-width: 680px) {
  .hero.tools-hero { padding: 56px 0 26px; text-align: left; }
  .tools-hero .eyebrow { justify-content: flex-start; }
  .tools-hero .eyebrow::after { display: none; }
  .tools-hero h1, .tools-hero .lead { margin-inline: 0; }
  .choice-section { padding-bottom: 68px; }
  .decision-rule { width: 100%; justify-content: flex-start; border-radius: 13px; text-align: left; }
  .choice-section .tool-card { padding: 25px 22px; }
  .choice-section .tool-card h2 { font-size: 31px; }
  .difference-list li { grid-template-columns: 74px 1fr; }
  .or-badge { width: 38px; height: 38px; }
  .choice-summary { grid-template-columns: auto 1fr; }
  .choice-summary a { grid-column: 2; }
}

/* ============================================================
   about page redesign (apps/site about.html per operator mock
   docs/about-redesign.html). Keeps the shared site chrome (notice/header/
   footer from base.html); only the page BODY is themed here. Everything is
   scoped under .about-page so the generic-sounding classes it reuses
   (.story / .details / .identity / .trust-list / .connection / .reveal ...)
   can never leak into the app or the other marketing pages.

   Token mapping (mock hex -> existing site tokens/patterns):
     --ink/--ink-2/--muted/--paper/--card/--line/--green/--green-2(green-dark)/
     --mint/--mint-2(mint-strong)/--amber/--amber-soft/--navy/--radius/--max are
     already identical in :root and reused verbatim. The mock's --line-strong
     (#c6d4cf) has no token, so a scoped --line-strong is defined here from the
     established rgba(16,38,45,.x) border pattern used across site.css. Navy
     accents reuse the established navy-section literals (#7bd6b3 eyebrow,
     #80dab8/#b9cbca step accents from .workflow-section / .impact). Text over
     the green identity map reuses the on-green literals already used by
     .control-box (#d8ebe5, #bfe0d6). The giant translucent "GP" watermark is
     kept (a single ::after pseudo-element, rgba of --green). Reveal-on-scroll
     is opt-in via the .about-js root class (added in the page head) so the page
     is fully visible with JS off; reduced motion is honoured below.
   ============================================================ */

.about-page { --line-strong: rgba(16, 38, 45, .16); }

.about-page .section { padding: 106px 0; }
.about-page .section h1, .about-page .section h2 { font-weight: 500; }
.about-page .mono {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* company intro */
.about-page .company-intro { position: relative; overflow: hidden; padding-top: 84px; border-bottom: 1px solid var(--line); }
.about-page .company-intro::after {
  content: "GP";
  position: absolute;
  right: -28px;
  bottom: -102px;
  color: rgba(11, 107, 87, .045);
  font: 700 clamp(190px, 26vw, 390px)/.8 Georgia, serif;
  letter-spacing: -.08em;
  pointer-events: none;
}
.about-page .intro-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 250px 1fr; gap: 84px; align-items: start; }
.about-page .company-index { padding-top: 9px; border-top: 3px solid var(--green); }
.about-page .company-index span { display: block; margin-top: 17px; color: var(--muted); }
.about-page .company-index strong { display: block; margin: 2px 0 23px; color: var(--green); font: 500 78px/.95 Georgia, serif; letter-spacing: -.055em; }
.about-page .company-index p { max-width: 190px; margin: 0; color: var(--muted); font-size: 13px; }
.about-page .intro-copy h1 { max-width: 850px; margin: 0 0 28px; font-size: clamp(48px, 6vw, 80px); line-height: .99; }
.about-page .standfirst { max-width: 790px; margin: 0 0 42px; color: var(--ink-2); font-size: clamp(19px, 2.2vw, 23px); line-height: 1.55; }
.about-page .company-facts { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 790px; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.about-page .fact { padding: 18px 18px 18px 0; }
.about-page .fact + .fact { padding-left: 22px; border-left: 1px solid var(--line); }
.about-page .fact strong { display: block; margin-bottom: 3px; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0; }
.about-page .fact span { color: var(--muted); font-size: 12px; }

/* story */
.about-page .story { background: var(--card); }
.about-page .story-grid { display: grid; grid-template-columns: 250px 1fr; gap: 84px; }
.about-page .chapter-marker { display: flex; gap: 14px; align-items: flex-start; color: var(--muted); }
.about-page .chapter-marker::after { content: ""; flex: 1; height: 1px; margin-top: 8px; background: var(--line); }
.about-page .story-copy { max-width: 790px; }
.about-page .story-copy h2 { max-width: 720px; margin: 0 0 29px; font-size: clamp(43px, 5vw, 66px); line-height: 1; }
.about-page .story-copy > p { max-width: 730px; margin: 0 0 20px; color: var(--ink-2); font-size: 17px; line-height: 1.72; }
.about-page .founder-note { max-width: 700px; margin: 42px 0 0; padding: 26px 0 0; border-top: 1px solid var(--line-strong); color: var(--ink); font-family: Georgia, serif; font-size: 23px; line-height: 1.4; }
.about-page .founder-note strong { display: block; margin-bottom: 9px; color: var(--green); font: 800 12px/1.5 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }

/* dark-navy timeline */
.about-page .timeline-section { padding: 0; color: #fff; background: var(--navy); }
.about-page .timeline-head { display: grid; grid-template-columns: 1fr .7fr; gap: 72px; align-items: end; padding: 88px 0 54px; border-bottom: 1px solid rgba(255, 255, 255, .13); }
.about-page .timeline-head .eyebrow { color: #7bd6b3; }
.about-page .timeline-head h2 { max-width: 720px; margin: 0; font-size: clamp(40px, 4.7vw, 62px); line-height: 1.03; font-weight: 500; }
.about-page .timeline-head p { margin: 0 0 5px; color: #b9cbca; font-size: 16px; line-height: 1.65; }
.about-page .timeline { margin: 0; padding: 0; list-style: none; }
.about-page .timeline-item { display: grid; grid-template-columns: 250px 1fr; gap: 84px; padding: 42px 0; border-bottom: 1px solid rgba(255, 255, 255, .13); }
.about-page .timeline-item time { color: #80dab8; font: 500 33px/1 Georgia, serif; }
.about-page .timeline-item h3 { margin: 0 0 8px; color: #fff; font-size: 26px; font-weight: 500; }
.about-page .timeline-item p { max-width: 700px; margin: 0; color: #a9c0bc; font-size: 14px; line-height: 1.7; }

/* continuity trust-list */
.about-page .continuity { border-bottom: 1px solid var(--line); }
.about-page .continuity-grid { display: grid; grid-template-columns: .88fr 1.12fr; gap: 90px; align-items: start; }
.about-page .continuity h2 { max-width: 520px; margin: 0; font-size: clamp(40px, 4.6vw, 60px); line-height: 1.04; }
.about-page .trust-list { border-top: 1px solid var(--line-strong); }
.about-page .trust-row { display: grid; grid-template-columns: 50px 1fr; gap: 20px; padding: 25px 0; border-bottom: 1px solid var(--line-strong); }
.about-page .trust-row > span { color: var(--green); }
.about-page .trust-row h3 { margin: 0 0 7px; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 17px; font-weight: 800; line-height: 1.25; letter-spacing: -.015em; }
.about-page .trust-row p { max-width: 650px; margin: 0; color: var(--muted); font-size: 14px; }

/* identity: details + green identity map */
.about-page .identity { padding: 0; background: #e9eee9; }
.about-page .identity-grid { display: grid; grid-template-columns: .92fr 1.08fr; min-height: 520px; }
.about-page .identity-copy { padding: 76px 72px 76px 0; }
.about-page .identity-copy h2 { max-width: 520px; margin: 0 0 21px; font-size: clamp(39px, 4.2vw, 56px); line-height: 1.05; font-weight: 500; }
.about-page .identity-copy > p { max-width: 590px; margin: 0; color: var(--ink-2); }
.about-page .identity-map { display: flex; flex-direction: column; justify-content: center; padding: 68px; color: #fff; background: var(--green); }
.about-page .company-node, .about-page .service-node { padding: 23px 0; border-top: 1px solid rgba(255, 255, 255, .3); }
.about-page .service-node { border-bottom: 1px solid rgba(255, 255, 255, .3); }
.about-page .company-node small, .about-page .service-node small { display: block; margin-bottom: 7px; color: #bfe0d6; }
.about-page .company-node strong, .about-page .service-node strong { font: 500 31px/1.1 Georgia, serif; letter-spacing: -.025em; }
.about-page .connection { display: flex; align-items: center; gap: 13px; min-height: 70px; color: #d8ebe5; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.about-page .connection::before { content: ""; width: 32px; height: 1px; background: #fff; }
.about-page .details { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 30px; margin-top: 34px; }
.about-page .detail { padding-top: 13px; border-top: 1px solid var(--line-strong); }
.about-page .detail dt { margin-bottom: 4px; color: var(--muted); }
.about-page .detail dd { margin: 0; color: var(--ink); font-size: 14px; font-weight: 700; }
.about-page .detail a { color: var(--green); }
.about-page .source-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 29px; color: var(--green); font-size: 13px; font-weight: 800; }
.about-page .source-link:hover { text-decoration: underline; }

/* responsibility */
.about-page .responsibility { background: var(--card); }
.about-page .responsibility-grid { display: grid; grid-template-columns: 250px 1fr; gap: 84px; }
.about-page .responsibility-copy { max-width: 790px; }
.about-page .responsibility-copy h2 { margin: 0 0 24px; font-size: clamp(40px, 4.8vw, 62px); line-height: 1.03; }
.about-page .responsibility-copy > p { max-width: 730px; margin: 0; color: var(--ink-2); font-size: 17px; line-height: 1.7; }
.about-page .responsibility-points { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 42px; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.about-page .responsibility-point { padding: 22px 22px 22px 0; }
.about-page .responsibility-point + .responsibility-point { padding-left: 22px; border-left: 1px solid var(--line); }
.about-page .responsibility-point strong { display: block; margin-bottom: 5px; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0; }
.about-page .responsibility-point span { color: var(--muted); font-size: 12px; }

/* contact box */
.about-page .contact-section { padding: 74px 0; }
.about-page .contact-box { display: grid; grid-template-columns: 1fr auto; gap: 50px; align-items: center; padding: 0 0 28px; border-bottom: 3px solid var(--green); }
.about-page .contact-box h2 { max-width: 760px; margin: 0 0 12px; font-size: clamp(34px, 4vw, 49px); line-height: 1.07; }
.about-page .contact-box p { margin: 0; color: var(--muted); }
.about-page .contact-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

/* reveal-on-scroll, opt-in so the page is fully visible without JS */
.about-js .about-page .reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.about-js .about-page .reveal.visible { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .about-page .intro-grid, .about-page .story-grid, .about-page .responsibility-grid { grid-template-columns: 190px 1fr; gap: 48px; }
  .about-page .timeline-head, .about-page .continuity-grid, .about-page .identity-grid { grid-template-columns: 1fr; }
  .about-page .timeline-head { gap: 24px; }
  .about-page .identity-copy { padding-right: 0; }
  .about-page .contact-box { grid-template-columns: 1fr; gap: 28px; }
  .about-page .contact-actions { justify-content: flex-start; }
}

@media (max-width: 720px) {
  .about-page .section { padding: 76px 0; }
  .about-page .intro-grid, .about-page .story-grid, .about-page .responsibility-grid { grid-template-columns: 1fr; gap: 42px; }
  .about-page .company-index { max-width: 220px; }
  .about-page .timeline-item { grid-template-columns: 130px 1fr; gap: 28px; }
  .about-page .continuity-grid { gap: 48px; }
  .about-page .identity-map { padding: 48px 28px; }
  .about-page .responsibility-points { grid-template-columns: 1fr; }
  .about-page .responsibility-point, .about-page .responsibility-point + .responsibility-point { padding: 17px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .about-page .responsibility-point:last-child { border-bottom: 0; }
}

@media (max-width: 480px) {
  .about-page .company-facts, .about-page .details { grid-template-columns: 1fr; }
  .about-page .fact, .about-page .fact + .fact { padding: 14px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .about-page .fact:last-child { border-bottom: 0; }
  .about-page .timeline-item { grid-template-columns: 1fr; gap: 14px; }
  .about-page .timeline-item time { font-size: 27px; }
  .about-page .contact-actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .about-js .about-page .reveal { opacity: 1; transform: none; }
}

/* ── mobile audit fixes (2026-07-22): tap targets + label legibility ── */
/* (the .nav-burger tap-target rule moved to static/css/chrome.css) */
/* the badge and body-copy shrinks that used to live here are gone: they took
   .or-badge / .free-badge under the 12px chip floor and .difference-list li
   under the 13px reading floor, and both now sit at their base size */
@media (max-width: 720px) {
  .about-page .detail a, .about-page .source-link,
  .about-page .contact-actions a { display: inline-flex; align-items: center;
    min-height: 42px; }
}

/* ==========================================================================
   Pricing page (spec 18), redesigned to docs/pricing-redesign.html.
   Everything is scoped under .pricing-page and uses the site palette in this
   file's :root only (no new colour tokens); navy-panel and line-strong tints
   are derived with color-mix. Reveal-on-scroll is gated behind .pricing-js so
   content is fully visible with JavaScript off. The compare table scrolls
   inside its own wrapper (.table-scroll), never the page.
   ========================================================================== */

.pricing-page {
  --pr-line-strong: color-mix(in srgb, var(--line), var(--ink) 14%);
  --pr-shadow-soft: 0 10px 30px rgba(21, 51, 49, .07);
  --pr-navy-body: color-mix(in srgb, #fff 72%, var(--navy));
  --pr-navy-dim: color-mix(in srgb, #fff 56%, var(--navy));
  --pr-navy-line: rgba(255, 255, 255, .14);
  --pr-navy-fill: rgba(255, 255, 255, .06);
}

.pricing-page h2 { letter-spacing: -.035em; }

/* reveal-on-scroll: only dimmed when JS is on (see the inline script) */
.pricing-js .pricing-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
}
.pricing-js .pricing-reveal.is-visible { opacity: 1; transform: none; }

.pricing-page .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── 1. Hero ─────────────────────────────────────────────────────────── */
.pricing-hero {
  position: relative;
  overflow: hidden;
  padding: 78px 0 66px;
  border-bottom: 1px solid var(--line);
}
.pricing-hero::before {
  content: "";
  position: absolute;
  top: -320px;
  right: -220px;
  width: min(720px, 100vw);
  height: min(720px, 100vw);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--mint-2) 62%, transparent), transparent 68%);
  pointer-events: none;
}
.pricing-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(340px, .76fr);
  gap: 64px;
  align-items: center;
}
.pricing-hero-copy h1 { max-width: 780px; margin-bottom: 20px; font-size: clamp(44px, 5.4vw, 72px); }
.pricing-hero-copy .lead { max-width: 640px; margin-bottom: 26px; }
.pricing-risk-line {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  margin: 18px 0 0; color: var(--muted); font-size: 13px;
}
.pricing-risk-line span { display: inline-flex; align-items: center; gap: 7px; }
.pricing-risk-line b { color: var(--green); }

.pricing-proof {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--pr-line-strong);
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.pricing-proof::before {
  content: "";
  position: absolute;
  top: -90px; right: -90px;
  width: 210px; height: 210px;
  border-radius: 50%;
  background: var(--mint);
  pointer-events: none;
}
.pricing-proof .proof-head { position: relative; padding: 24px 26px 20px; border-bottom: 1px solid var(--line); }
.proof-kicker {
  display: block; margin-bottom: 9px; color: var(--green);
  font-size: 12px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase;
}
.pricing-proof .proof-head strong {
  display: block; max-width: 300px;
  font-family: Georgia, serif; font-size: 27px; font-weight: 500; letter-spacing: -.03em; line-height: 1.1;
}
.proof-row {
  display: grid; grid-template-columns: 42px 1fr; gap: 15px; align-items: start;
  padding: 18px 26px; border-bottom: 1px solid var(--line);
}
.proof-row:last-child { border-bottom: 0; }
.proof-num {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 10px; color: var(--green); background: var(--mint);
  font-size: 12px; font-weight: 900;
}
.proof-row strong { display: block; margin-bottom: 3px; font-size: 14px; }
.proof-row span { display: block; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* ── 2. Plan finder ──────────────────────────────────────────────────── */
.pricing-finder-wrap { padding: 34px 0 6px; }
.pricing-finder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .46fr);
  gap: 30px; align-items: center;
  padding: 24px 28px;
  border: 1px solid var(--pr-line-strong);
  border-radius: 18px;
  background: color-mix(in srgb, var(--card) 80%, transparent);
  box-shadow: var(--pr-shadow-soft);
}
.pricing-finder .finder-copy { display: grid; grid-template-columns: 1fr minmax(220px, .9fr); gap: 28px; align-items: center; }
.pricing-finder .finder-copy h2 { margin-bottom: 5px; font-size: 23px; font-weight: 600; }
.pricing-finder .finder-copy p { margin-bottom: 0; color: var(--muted); font-size: 13px; }
.finder-control label {
  display: flex; justify-content: space-between; gap: 14px;
  margin-bottom: 10px; color: var(--ink-2); font-size: 13px; font-weight: 800;
}
.finder-control output { color: var(--green); font-size: 14px; }
.finder-control input[type="range"] { width: 100%; min-height: 28px; accent-color: var(--green); cursor: pointer; }
.finder-result {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  min-height: 76px; padding: 14px 16px; border-radius: 13px;
  color: #fff; background: var(--navy);
}
.finder-result small {
  display: block; margin-bottom: 3px; color: var(--pr-navy-dim);
  font-size: 12px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase;
}
.finder-result strong { display: block; font-family: Georgia, serif; font-size: 22px; font-weight: 500; }
.finder-result a {
  flex: 0 0 auto; padding: 9px 12px; border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 8px; color: #fff; font-size: 13px; font-weight: 800; white-space: nowrap;
}
.finder-result a:hover { background: rgba(255, 255, 255, .1); }

/* ── 3. Plans: toggle + cards ────────────────────────────────────────── */
.pricing-plans { padding: 66px 0 92px; }
.plans-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 26px; }
.plans-head h2 { max-width: 640px; margin-bottom: 0; font-size: clamp(36px, 4.4vw, 54px); }

.billing-toggle {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px;
  border: 1px solid var(--pr-line-strong); border-radius: 11px;
  background: color-mix(in srgb, var(--card) 70%, transparent);
}
.billing-toggle button {
  min-height: 43px; padding: 0 15px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink-2); font-size: 13px; font-weight: 800;
  transition: background .2s var(--ease-spring), color .2s var(--ease-spring);
}
.billing-toggle button[aria-pressed="true"] { color: #fff; background: var(--green); box-shadow: 0 5px 14px rgba(11, 107, 87, .2); }
.save-label { display: block; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }

.pricing-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.pricing-card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  padding: 30px 26px 26px; border: 1px solid var(--pr-line-strong);
  border-radius: 20px; background: var(--card); box-shadow: var(--pr-shadow-soft);
}
.pricing-card.featured { border: 2px solid var(--green); padding: 29px 25px 25px; box-shadow: var(--shadow); }
.pricing-card .plan-top { flex: 1 1 auto; }
.pop-badge {
  position: absolute; top: 0; right: 24px; padding: 7px 11px;
  border-radius: 0 0 9px 9px; color: #fff; background: var(--green);
  font-size: 12px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase;
}
.plan-for { margin-bottom: 7px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pricing-card .plan-name { margin: 0 0 20px; font-family: Georgia, serif; font-size: 30px; font-weight: 600; }
.plan-price { min-height: 92px; margin-bottom: 4px; }
.price-main { display: flex; align-items: end; gap: 8px; }
.price-num { font-family: Georgia, serif; font-size: clamp(38px, 3.9vw, 48px); font-weight: 500; line-height: 1; letter-spacing: -.045em; color: var(--ink); }
.price-unit { padding-bottom: 5px; color: var(--muted); font-size: 13px; font-weight: 750; line-height: 1.25; }
.price-sub { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.price-save {
  display: inline-flex; align-items: center; gap: 5px; margin: 10px 0 0;
  padding: 5px 8px; border-radius: 7px; color: var(--warn-text, #87550c);
  background: var(--amber-soft); font-size: 12px; font-weight: 850;
}
.pricing-card .plan-cta { width: 100%; justify-content: center; min-height: 48px; margin: 20px 0 9px; }
.pricing-card .button.secondary { color: var(--green); border-color: var(--green); background: #fff; }
.pricing-card .button.secondary:hover { color: #fff; background: var(--green); }
.trial-note { min-height: 34px; margin: 0 0 18px; color: var(--muted); font-size: 13px; text-align: center; }
.capacity { margin: 0 -4px 20px; padding: 15px 16px; border-radius: 12px; background: color-mix(in srgb, var(--mint) 45%, var(--card)); }
.capacity strong { display: block; margin-bottom: 3px; color: var(--green); font-size: 16px; }
.capacity span { color: var(--ink-2); font-size: 13px; }
.plan-features { margin-top: auto; }
.feature-title { margin: 0 0 10px; font-size: 12px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.feature-list { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.feature-list li { position: relative; padding-left: 21px; color: var(--ink-2); font-size: 13px; line-height: 1.48; }
.feature-list li::before { content: "✓"; position: absolute; top: 0; left: 0; color: var(--green); font-weight: 900; }

.pricing-page .vat-note { margin: 16px 0 0; color: var(--muted); font-size: 13px; text-align: right; }

.included { margin-top: 20px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--mint) 34%, var(--card)); }
.included-inner { display: grid; grid-template-columns: .85fr repeat(4, 1fr); align-items: center; }
.included-intro { padding: 20px 22px; }
.included-intro strong { display: block; margin-bottom: 3px; font-family: Georgia, serif; font-size: 19px; font-weight: 600; }
.included-intro span { color: var(--muted); font-size: 13px; }
.included-item {
  min-height: 76px; padding: 18px 16px; border-left: 1px solid var(--line);
  color: var(--ink-2); font-size: 13px; font-weight: 750;
}
.included-item b { display: block; margin-bottom: 4px; color: var(--green); }

/* ── 4. Day-one advantage (navy) ─────────────────────────────────────── */
.pricing-day-one { padding: 96px 0; color: color-mix(in srgb, #fff 90%, var(--navy)); background: var(--navy); }
.pricing-day-one .day-one-grid { display: grid; grid-template-columns: .83fr 1.17fr; gap: 72px; align-items: center; }
.pricing-day-one .eyebrow { color: var(--mint-2); }
.pricing-day-one h2 { max-width: 520px; margin-bottom: 20px; color: #fff; font-size: clamp(36px, 4.6vw, 58px); }
.pricing-day-one .day-one-copy > p:last-child { max-width: 520px; margin-bottom: 0; color: var(--pr-navy-body); font-size: 16px; }
.allowance-card {
  padding: 28px; border: 1px solid var(--pr-navy-line); border-radius: 22px;
  background: var(--pr-navy-fill); box-shadow: 0 22px 60px rgba(0, 0, 0, .15);
}
.allowance-head { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.allowance-head span { color: var(--pr-navy-dim); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.allowance-head strong { color: #fff; font-family: Georgia, serif; font-size: 24px; font-weight: 500; }
.allowance-line { display: grid; grid-template-columns: 82px 1fr auto; gap: 14px; align-items: center; margin: 15px 0; }
.allowance-label { color: var(--pr-navy-body); font-size: 13px; font-weight: 750; }
.allowance-track { height: 12px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.allowance-fill { width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--mint-2)); }
.allowance-line:nth-child(3) .allowance-fill { width: 62%; }
.allowance-line:nth-child(4) .allowance-fill { width: 30%; }
.allowance-value { color: #fff; font-size: 13px; font-weight: 850; text-align: right; }
.allowance-note {
  display: flex; align-items: start; gap: 11px; margin: 24px 0 0; padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .12); color: var(--pr-navy-body); font-size: 13px;
}
.allowance-note b { color: var(--mint-2); }

/* ── 5. How it counts ────────────────────────────────────────────────── */
.pricing-how-counts { padding: 96px 0; background: var(--card); }
.count-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--pr-line-strong); border-bottom: 1px solid var(--pr-line-strong); }
.count-item { padding: 26px 24px 26px 0; }
.count-item + .count-item { padding-left: 24px; border-left: 1px solid var(--line); }
.count-num { display: block; margin-bottom: 16px; color: var(--green); font-size: 12px; font-weight: 900; letter-spacing: .09em; }
.count-item h3 { margin-bottom: 9px; font-family: Georgia, serif; font-size: 20px; font-weight: 600; }
.count-item p { margin-bottom: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

/* ── 6. Compare ──────────────────────────────────────────────────────── */
.pricing-compare { padding: 88px 0; }
.compare-intro { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 24px; }
.compare-intro h2 { max-width: 640px; margin-bottom: 0; font-size: clamp(34px, 4.2vw, 50px); }
.compare-note { max-width: 320px; margin: 0; color: var(--muted); font-size: 13px; }
.compare {
  overflow: hidden; border: 1px solid var(--pr-line-strong);
  border-radius: 18px; background: var(--card); box-shadow: var(--pr-shadow-soft);
}
.compare summary {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 24px; color: var(--green); font-size: 14px; font-weight: 850;
  cursor: pointer; list-style: none;
}
.compare summary::-webkit-details-marker { display: none; }
.compare summary::after { content: "+"; font-size: 22px; font-weight: 500; }
.compare[open] summary::after { content: "−"; }
.table-scroll { overflow-x: auto; border-top: 1px solid var(--line); -webkit-overflow-scrolling: touch; }
.compare-table { width: 100%; min-width: 720px; border-collapse: collapse; text-align: center; }
/* position:relative anchors the sr-only cell labels to their own cell; without
   it the absolutely-positioned .sr-only spans escape to the initial containing
   block at the table's full (720px) x-offset and force a page-level scrollbar
   at narrow widths even though .table-scroll clips the visible table. */
.compare-table th, .compare-table td { position: relative; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
.compare-table th:first-child, .compare-table td:first-child { width: 38%; text-align: left; }
.compare-table thead th { color: var(--ink); background: color-mix(in srgb, var(--paper) 70%, var(--card)); font-size: 13px; }
.compare-table thead th.col-featured { color: var(--green); background: var(--mint); }
.compare-table tbody th { color: var(--ink-2); font-weight: 700; }
.compare-table .group th {
  padding-top: 18px; color: var(--green); background: color-mix(in srgb, var(--mint) 30%, var(--card));
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
.compare-table .tick { color: var(--green); font-size: 15px; font-weight: 900; }
.compare-table .dash { color: var(--muted); }

/* ── 7. Trust band ───────────────────────────────────────────────────── */
.pricing-trust { padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--mint); }
.pricing-trust .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); min-height: 0; }
.pricing-trust .trust-item {
  display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 22px;
  border-left: 1px solid rgba(11, 107, 87, .18); color: var(--ink-2); font-size: 13px; font-weight: 750;
}
.pricing-trust .trust-item:first-child { padding-left: 0; border-left: 0; }
.pricing-trust .trust-check {
  display: grid; flex: 0 0 23px; place-items: center; width: 23px; height: 23px;
  border-radius: 50%; color: #fff; background: var(--green); font-size: 12px; font-weight: 900;
}

/* ── 8. FAQ ──────────────────────────────────────────────────────────── */
.pricing-faq { padding: 96px 0; background: var(--card); }
.pricing-faq .faq-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 72px; }
.pricing-faq .faq-intro h2 { max-width: 420px; margin-bottom: 14px; font-size: clamp(34px, 4.2vw, 52px); }
.pricing-faq .faq-intro p:last-child { max-width: 390px; color: var(--muted); font-size: 14px; }
.pricing-faq .faq-list { display: block; max-width: none; margin: 0; border-top: 1px solid var(--pr-line-strong); }
.pricing-faq .faq-item { border: 0; border-bottom: 1px solid var(--pr-line-strong); border-radius: 0; background: transparent; overflow: visible; }
.pricing-faq .faq-q {
  position: relative; padding: 22px 46px 22px 0; font-size: 14px; font-weight: 800;
  cursor: pointer; list-style: none;
}
.pricing-faq .faq-q::-webkit-details-marker { display: none; }
.pricing-faq .faq-q::after {
  content: "+"; position: absolute; top: 16px; right: 0; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 9px; color: var(--green); background: var(--mint);
  font-size: 18px; font-weight: 500; transition: none;
}
.pricing-faq .faq-item[open] .faq-q::after { content: "−"; transform: none; }
.pricing-faq .faq-a { max-width: 650px; padding: 0 46px 21px 0; }
.pricing-faq .faq-a p { margin-bottom: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }

/* ── 9. Final CTA (navy) ─────────────────────────────────────────────── */
.pricing-final-cta { padding: 70px 0; }
.cta-ghost-num {
  position: absolute; right: 250px; bottom: -60px; color: rgba(255, 255, 255, .05);
  font-family: Georgia, serif; font-size: 200px; font-weight: 700; line-height: .8;
  letter-spacing: -.08em; pointer-events: none; user-select: none;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1020px) {
  .pricing-hero-grid { grid-template-columns: 1fr .74fr; gap: 40px; }
  .pricing-day-one .day-one-grid, .pricing-faq .faq-grid { gap: 44px; }
  .count-grid { grid-template-columns: 1fr 1fr; }
  .count-item:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .count-item:nth-child(4) { border-top: 1px solid var(--line); }
}

@media (max-width: 860px) {
  .pricing-hero-grid,
  .pricing-day-one .day-one-grid,
  .pricing-faq .faq-grid { grid-template-columns: 1fr; }
  .pricing-proof { max-width: 620px; }
  .pricing-finder { grid-template-columns: 1fr; }
  .pricing-finder .finder-copy { grid-template-columns: 1fr 1fr; }
  .plans-head, .compare-intro { flex-direction: column; align-items: start; gap: 18px; }
  .pricing-cards { grid-template-columns: 1fr; max-width: 560px; }
  .included-inner { grid-template-columns: 1fr 1fr; }
  .included-intro { grid-column: 1 / -1; border-bottom: 1px solid var(--line); }
  .included-item:nth-of-type(2), .included-item:nth-of-type(4) { border-left: 0; }
  .pricing-page .vat-note { text-align: left; }
  .pricing-trust .trust-grid { grid-template-columns: 1fr 1fr; }
  .pricing-trust .trust-item:nth-child(odd) { padding-left: 0; border-left: 0; }
  .pricing-trust .trust-item:nth-child(n+3) { margin-top: 10px; }
  .cta-ghost-num { right: 30px; }
}

@media (max-width: 620px) {
  .pricing-hero { padding: 52px 0 52px; }
  .pricing-hero-copy h1 { font-size: clamp(38px, 12vw, 58px); }
  .hero-actions .button.primary { width: 100%; }
  .pricing-finder { padding: 22px; }
  .pricing-finder .finder-copy { grid-template-columns: 1fr; gap: 16px; }
  .pricing-plans { padding: 54px 0 68px; }
  .billing-toggle { width: 100%; }
  .billing-toggle button { flex: 1; }
  .pricing-day-one, .pricing-how-counts, .pricing-compare, .pricing-faq { padding: 66px 0; }
  .allowance-card { padding: 22px 20px; }
  .allowance-line { grid-template-columns: 66px 1fr; }
  .allowance-value { grid-column: 2; text-align: left; }
  .count-grid { grid-template-columns: 1fr; }
  .count-item, .count-item + .count-item { padding: 20px 0; border-left: 0; border-top: 1px solid var(--line); }
  .count-item:first-child { border-top: 0; }
  .compare summary { font-size: 13px; }
  .pricing-trust .trust-grid { grid-template-columns: 1fr; }
  .pricing-trust .trust-item, .pricing-trust .trust-item:first-child {
    padding: 10px 0; border-left: 0; border-top: 1px solid rgba(11, 107, 87, .18); margin-top: 0;
  }
  .pricing-trust .trust-item:first-child { border-top: 0; }
  .pricing-faq .faq-q { padding-right: 40px; }
  .pricing-faq .faq-a { padding-right: 0; }
  .cta-ghost-num { display: none; }
}

@media (max-width: 400px) {
  .pricing-finder .finder-copy { grid-template-columns: 1fr; }
  .finder-result { flex-direction: column; align-items: start; gap: 12px; }
  .included-inner { grid-template-columns: 1fr; }
  .included-item, .included-item:nth-of-type(2), .included-item:nth-of-type(4) { border-left: 0; border-top: 1px solid var(--line); }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-js .pricing-reveal { opacity: 1; transform: none; }
}

/* ============================================================
   homepage closing CTA (apps/site home.html), adapted from the operator mock
   docs/final-cta-section-v4-light.html.

   The page's two old closing sections (#account + .cta) are replaced by ONE
   light chapter on --paper that offers the two real next steps side by side,
   joined by an "or" badge: a product-URL form (option 01, a second entry
   point into the hero's shared classifier panel) and the mint account card
   (option 02). The mock's own palette maps straight onto this file's :root
   (ink / ink-2 / muted / paper / card / green / green-2 / mint / mint-2 /
   amber / line / shadow / radius / max), and its Inter + Georgia are the
   faces site.css already sets, so the type here only sets size and weight.
   The remaining tints are the rgba(11,107,87,.x) / rgba(16,38,45,.x) /
   rgba(185,228,210,.x) / rgba(242,185,80,.x) patterns already used above;
   no new hex is introduced. Everything is scoped under .final-cta so the
   generic-sounding class names (.url-card, .option-title, .account-benefits)
   can never leak into the app or the other marketing pages. Decoration (grid
   overlay, radial tints, concentric circle, the giant ghost arrow) is
   pseudo-elements only; the global reduced-motion rule in section 8 already
   neutralises every transition here.
   ============================================================ */

.final-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 112px 0 104px;
  color: var(--ink);
  background:
    radial-gradient(circle at 5% 9%, rgba(185, 228, 210, .58), transparent 23%),
    radial-gradient(circle at 96% 91%, rgba(242, 185, 80, .2), transparent 22%),
    var(--paper);
}
/* faint graph-paper overlay, fading out at both edges */
.final-cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .48;
  background-image:
    linear-gradient(rgba(16, 38, 45, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 38, 45, .045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
/* the concentric ring in the top-right corner */
.final-cta::after {
  content: "";
  position: absolute;
  top: -130px;
  right: -95px;
  z-index: -1;
  width: 390px;
  height: 390px;
  border: 1px solid rgba(11, 107, 87, .1);
  border-radius: 50%;
  box-shadow:
    0 0 0 42px rgba(11, 107, 87, .025),
    0 0 0 92px rgba(11, 107, 87, .018);
}

.final-cta .final-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .7fr);
  gap: 70px;
  align-items: end;
  margin-bottom: 44px;
}
.final-cta .final-title {
  max-width: 760px;
  margin: 0;
  font-size: clamp(48px, 5.7vw, 76px);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: .99;
  text-wrap: balance;
}
.final-cta .final-lead {
  max-width: 430px;
  margin: 0 0 5px;
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.65;
}

.final-cta .final-options {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, .75fr);
  gap: 16px;
  align-items: stretch;
}
/* the badge straddles the seam between the two cards (65.9% = the 1.45/.75
   split), and drops between them once they stack */
.final-cta .final-or {
  position: absolute;
  top: 50%;
  left: 65.9%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 5px solid var(--paper);
  border-radius: 50%;
  color: var(--muted);
  background: #fff;
  box-shadow: 0 5px 18px rgba(16, 38, 45, .1);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
}

.final-cta .url-card,
.final-cta .account-option-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.final-cta .url-card {
  position: relative;
  overflow: hidden;
  padding: 34px;
  background: var(--card);
  box-shadow: var(--shadow);
}
/* the short green rule along the card's top edge */
.final-cta .url-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 34px;
  width: 78px;
  height: 3px;
  border-radius: 0 0 5px 5px;
  background: var(--green);
}
/* the giant ghost arrow, decoration only */
.final-cta .url-card::after {
  content: "→";
  position: absolute;
  right: 26px;
  bottom: -53px;
  color: rgba(11, 107, 87, .04);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 210px;
  line-height: 1;
  pointer-events: none;
}
.final-cta .url-card > * { position: relative; z-index: 1; }

.final-cta .option-number {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  color: var(--green);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.final-cta .option-number b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(11, 107, 87, .18);
  border-radius: 7px;
  background: var(--mint);
  font-size: 12px;
}
.final-cta .option-title {
  margin: 0;
  font-size: clamp(28px, 3vw, 39px);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.08;
}
.final-cta .option-copy {
  max-width: 620px;
  margin: 10px 0 24px;
  color: var(--ink-2);
  font-size: 14px;
}

.final-cta .url-form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  padding: 8px 8px 8px 17px;
  border: 1px solid rgba(11, 107, 87, .24);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(21, 51, 49, .1);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.final-cta .url-form:focus-within {
  border-color: var(--green);
  box-shadow: 0 17px 42px rgba(21, 51, 49, .14), 0 0 0 4px rgba(11, 107, 87, .08);
  transform: translateY(-2px);
}
.final-cta .url-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  color: var(--green);
  background: var(--mint);
}
.final-cta .url-icon svg { width: 18px; height: 18px; }
.final-cta .url-field { min-width: 0; }
.final-cta .url-field label {
  display: block;
  margin-bottom: 1px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.final-cta .url-field input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: 15px;
}
.final-cta .url-field input::placeholder { color: #9aa8a4; }

.final-cta .url-submit {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 11px;
  min-height: 54px;
  padding: 0 20px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: var(--green);
  box-shadow: 0 10px 25px rgba(11, 107, 87, .2);
  font-size: 14px;
  font-weight: 850;
  white-space: nowrap;
  transition: background .2s ease, transform .2s ease;
}
.final-cta .url-submit:hover { background: var(--green-2); transform: translateX(2px); }
.final-cta .url-submit:disabled { transform: none; }
.final-cta .url-submit-label { display: inline-flex; align-items: center; gap: 9px; }
.final-cta .url-submit:hover .arrow { transform: translateX(3px); }

.final-cta .url-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 17px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.final-cta .url-notes span { display: inline-flex; align-items: center; gap: 6px; }
.final-cta .url-notes b { color: var(--green); font-size: 14px; }

.final-cta .account-option-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 34px;
  color: var(--ink);
  background:
    radial-gradient(circle at 100% 0, rgba(255, 255, 255, .72), transparent 38%),
    linear-gradient(145deg, var(--mint), var(--mint-2));
  box-shadow: var(--shadow);
}
.final-cta .account-option-card .option-title { font-size: clamp(28px, 2.6vw, 36px); }
.final-cta .account-option-card .option-copy { margin-bottom: 18px; }

.final-cta .account-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.final-cta .account-benefits li {
  padding: 7px 9px;
  border: 1px solid rgba(11, 107, 87, .15);
  border-radius: 999px;
  color: var(--ink-2);
  background: rgba(255, 255, 255, .57);
  font-size: 12px;
  font-weight: 800;
}

.final-cta .account-option-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 54px;
  margin-top: auto;
  padding: 0 18px;
  border-radius: 10px;
  color: #fff;
  background: var(--navy);
  box-shadow: 0 10px 24px rgba(15, 46, 53, .15);
  font-size: 14px;
  font-weight: 850;
  transition: background .2s ease, transform .2s ease;
}
.final-cta .account-option-button:hover { background: var(--green); transform: translateY(-2px); }
.final-cta .account-option-button:hover .arrow { transform: translateX(3px); }
.final-cta .account-option-foot {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

/* ---------- closing CTA responsive ---------- */
@media (max-width: 980px) {
  .final-cta { padding: 86px 0 80px; }
  .final-cta .final-intro { grid-template-columns: 1fr; gap: 22px; }
  .final-cta .final-lead { max-width: 680px; }
  .final-cta .final-options { grid-template-columns: 1fr; }
  /* the badge leaves the seam and sits between the stacked cards */
  .final-cta .final-or {
    position: relative;
    top: auto;
    left: auto;
    justify-self: center;
    margin: -28px 0;
    transform: none;
  }
}

@media (max-width: 680px) {
  .final-cta .final-title { font-size: clamp(40px, 12vw, 62px); }
  .final-cta .url-card, .final-cta .account-option-card { padding: 26px 22px; border-radius: 20px; }
  .final-cta .url-card::before { left: 22px; }
  /* the field keeps its icon; the button takes the full second row */
  .final-cta .url-form { grid-template-columns: auto minmax(0, 1fr); padding: 11px; }
  .final-cta .url-submit { grid-column: 1 / -1; }
}

@media (max-width: 420px) {
  .final-cta { padding: 70px 0 64px; }
  .final-cta .final-title { font-size: 40px; }
  /* the link glyph is decoration (aria-hidden), the only thing that goes */
  .final-cta .url-icon { display: none; }
  .final-cta .url-form { grid-template-columns: 1fr; }
}

/* ============================================================
   contact page redesign (apps/site contact.html per operator mock
   docs/contact-redesign.html). Keeps the shared site chrome (notice/header/
   footer from base.html); only the page BODY is themed here, scoped under
   .contact-page so the generic-sounding classes it reuses (.channel /
   .form-panel / .prepare-item / .ledger-row / .reveal ...) can never leak into
   the app or the other marketing pages.

   Token mapping (mock hex -> existing site tokens/patterns):
     --ink/--ink-2/--muted/--paper/--card/--line/--green/--green-2(green-dark)/
     --mint/--mint-2(mint-strong)/--navy/--max are already identical in :root
     and reused verbatim. The mock's --line-strong (#c6d4cf) and --shadow-soft
     have no token, so scoped values are derived from the established
     rgba(16,38,45,.x) border and rgba(21,51,49,.x) shadow patterns (same as
     .about-page / .pricing-page). Navy accents reuse the established
     on-navy literals (#7bd6b3 eyebrow, #b9cbca / #a9c0bc body) already used by
     .about-page .timeline-section. The giant translucent "@" watermark is kept
     (a single ::after pseudo-element, rgba of --green). The character counter
     and reveal-on-scroll are opt-in via the .contact-js root class (added in
     the page head) so the page works fully with JS off; reduced motion is
     honoured below.
   ============================================================ */

.contact-page {
  --line-strong: rgba(16, 38, 45, .16);
  --panel-shadow: 0 10px 30px rgba(21, 51, 49, .075);
}

.contact-page h1, .contact-page h2 { font-weight: 500; }
.contact-page .mono {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* intro */
.contact-page .contact-intro { position: relative; overflow: hidden; padding: 82px 0 74px; border-bottom: 1px solid var(--line); }
.contact-page .contact-intro::after {
  content: "@";
  position: absolute;
  right: -28px;
  bottom: -120px;
  color: rgba(11, 107, 87, .045);
  font: 500 clamp(230px, 30vw, 430px)/.8 Georgia, serif;
  pointer-events: none;
}
.contact-page .intro-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: 92px; align-items: end; }
.contact-page .intro-copy h1 { max-width: 710px; margin: 0 0 26px; font-size: clamp(44px, 6.2vw, 82px); line-height: .99; }
.contact-page .standfirst { max-width: 640px; margin: 0; color: var(--ink-2); font-size: clamp(18px, 2vw, 22px); line-height: 1.55; }
.contact-page .reply-note { padding-top: 15px; border-top: 3px solid var(--green); }
.contact-page .reply-note strong { display: block; margin: 8px 0 7px; font: 500 clamp(26px, 3vw, 30px)/1.1 Georgia, serif; letter-spacing: -.03em; }
.contact-page .reply-note p { margin: 0; color: var(--muted); font-size: 13px; }

/* workspace: channels + signature, and the form panel */
.contact-page .contact-workspace { padding: 88px 0 106px; }
.contact-page .workspace-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 78px; align-items: start; }
.contact-page .contact-aside { position: sticky; top: 96px; }
.contact-page .contact-aside h2 { max-width: 350px; margin: 0 0 31px; font-size: clamp(30px, 3.3vw, 44px); line-height: 1.06; }
.contact-page .channel-list { border-top: 1px solid var(--line-strong); }
.contact-page .channel {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 15px;
  align-items: center;
  padding: 19px 0;
  border-bottom: 1px solid var(--line-strong);
}
.contact-page .channel-index { color: var(--green); }
.contact-page .channel strong { display: block; margin-bottom: 2px; font-size: 14px; }
.contact-page .channel span:not(.channel-index):not(.channel-arrow) { color: var(--muted); font-size: 14px; }
.contact-page .channel-arrow { color: var(--green); font-size: 18px; transition: transform .2s ease; }
.contact-page .channel:hover strong { color: var(--green); }
.contact-page .channel:hover .channel-arrow { transform: translateX(3px); }
.contact-page .company-signature { margin-top: 35px; padding-top: 22px; border-top: 3px solid var(--ink); }
.contact-page .company-signature strong { display: block; margin: 7px 0 8px; font: 500 23px/1.15 Georgia, serif; letter-spacing: -.025em; }
.contact-page .company-signature p { margin: 0 0 14px; color: var(--muted); font-size: 13px; }
.contact-page .company-signature a { display: inline-flex; align-items: center; gap: 7px; color: var(--green); font-size: 13px; font-weight: 800; }
.contact-page .company-signature a:hover { text-decoration: underline; }

/* form panel */
.contact-page .form-panel { padding: 38px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--panel-shadow); }
.contact-page .form-head { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: start; margin-bottom: 28px; padding-bottom: 23px; border-bottom: 1px solid var(--line); }
.contact-page .form-head h2 { margin: 0 0 7px; font-size: clamp(27px, 3vw, 31px); }
.contact-page .form-head p { margin: 0; color: var(--muted); font-size: 13px; }
.contact-page .secure-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border-radius: 999px;
  color: var(--green);
  background: var(--mint);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.contact-page .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.contact-page .field { margin-bottom: 0; }
.contact-page .field.full { grid-column: 1 / -1; }
.contact-page .field-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
  font-size: 13px;
  letter-spacing: .06em;
}
.contact-page .field-label small { color: var(--muted); font-size: 12px; font-weight: 650; letter-spacing: 0; text-transform: none; }
.contact-page select.field-input {
  height: 54px;
  padding: 0 16px;
  font: inherit;
  color: inherit;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 24px, calc(100% - 14px) 24px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.contact-page textarea.field-input { min-height: 168px; }
.contact-page .message-meta { display: flex; justify-content: space-between; gap: 18px; margin-top: 7px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.contact-page .message-count { flex: 0 0 auto; font-family: var(--mono); }
.contact-page .form-error, .contact-page .field-error { margin: 8px 0 0; }
.contact-page .form-error { margin: 0 0 18px; padding: 12px 15px; border: 1px solid var(--warn); border-radius: 11px; background: var(--warn-soft); }
.contact-page .form-bottom { display: flex; justify-content: space-between; gap: 22px; align-items: center; margin-top: 24px; padding-top: 23px; border-top: 1px solid var(--line); }
.contact-page .form-bottom p { max-width: 430px; margin: 0; color: var(--muted); font-size: 13px; }
.contact-page .submit-button { flex: 0 0 auto; min-width: 150px; border: 0; }

/* the sent confirmation takes the place of the panel's content */
.contact-page .form-sent .mono { color: var(--green); }
.contact-page .form-sent h2 { margin: 10px 0 12px; font-size: clamp(27px, 3vw, 33px); }
.contact-page .form-sent p { max-width: 460px; margin: 0 0 22px; color: var(--ink-2); font-size: 15px; }

/* dark-navy prepare band */
.contact-page .contact-prepare { padding: 76px 0; color: #fff; background: var(--navy); }
.contact-page .prepare-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 86px; align-items: start; }
.contact-page .contact-prepare .eyebrow { color: #7bd6b3; }
.contact-page .contact-prepare h2 { max-width: 520px; margin: 0 0 19px; font-size: clamp(32px, 4.3vw, 56px); line-height: 1.04; }
.contact-page .prepare-copy > p { max-width: 520px; margin: 0; color: #b9cbca; font-size: 15px; line-height: 1.65; }
.contact-page .prepare-list { border-top: 1px solid rgba(255, 255, 255, .16); }
.contact-page .prepare-item { display: grid; grid-template-columns: 42px 1fr; gap: 17px; padding: 20px 0; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.contact-page .prepare-item > span { color: #80dab8; }
.contact-page .prepare-item strong { display: block; margin-bottom: 4px; font-size: 15px; }
.contact-page .prepare-item p { margin: 0; color: #a9c0bc; font-size: 14px; line-height: 1.65; }

/* company section + ledger */
.contact-page .contact-company { padding: 92px 0; border-bottom: 1px solid var(--line); }
.contact-page .company-grid { display: grid; grid-template-columns: 1fr .92fr; gap: 90px; align-items: center; }
.contact-page .company-copy h2 { max-width: 650px; margin: 0 0 21px; font-size: clamp(32px, 4.5vw, 58px); line-height: 1.05; }
.contact-page .company-copy > p { max-width: 640px; margin: 0; color: var(--ink-2); font-size: 17px; line-height: 1.65; }
.contact-page .company-copy .button { margin-top: 22px; }
.contact-page .company-ledger { margin: 0; border-top: 3px solid var(--green); }
.contact-page .ledger-row { display: grid; grid-template-columns: 130px 1fr; gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--line-strong); }
.contact-page .ledger-row dt { color: var(--muted); }
.contact-page .ledger-row dd { margin: 0; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.contact-page .ledger-row dd a { color: var(--green); }
.contact-page .ledger-row dd a:hover { text-decoration: underline; }

/* reveal-on-scroll, opt-in so the page is fully visible without JS */
.contact-js .contact-page .reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.contact-js .contact-page .reveal.visible { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .contact-page .intro-grid, .contact-page .workspace-grid,
  .contact-page .prepare-grid, .contact-page .company-grid { grid-template-columns: 1fr; }
  .contact-page .intro-grid { gap: 48px; }
  .contact-page .reply-note { max-width: 360px; }
  .contact-page .workspace-grid, .contact-page .prepare-grid,
  .contact-page .company-grid { gap: 52px; }
  .contact-page .contact-aside { position: static; }
  .contact-page .channel-list { max-width: 660px; }
}

@media (max-width: 720px) {
  .contact-page .contact-intro { padding: 58px 0; }
  .contact-page .contact-workspace { padding: 66px 0 76px; }
  .contact-page .contact-prepare { padding: 64px 0; }
  .contact-page .contact-company { padding: 72px 0; }
  .contact-page .form-panel { padding: 25px; }
  .contact-page .form-grid { grid-template-columns: 1fr; }
  .contact-page .field.full { grid-column: auto; }
  .contact-page .form-head { grid-template-columns: 1fr; }
  .contact-page .secure-note { width: fit-content; }
  .contact-page .form-bottom { flex-direction: column; align-items: flex-start; }
  .contact-page .channel, .contact-page .company-signature a,
  .contact-page .ledger-row dd a { min-height: 44px; }
  .contact-page .company-signature a { display: inline-flex; align-items: center; }
}

@media (max-width: 480px) {
  .contact-page .form-panel { padding: 20px 16px; border-radius: 16px; }
  .contact-page .channel { grid-template-columns: 34px 1fr auto; gap: 12px; }
  .contact-page .message-meta { flex-direction: column; gap: 3px; }
  .contact-page .submit-button { width: 100%; }
  .contact-page .ledger-row { grid-template-columns: 1fr; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-js .contact-page .reveal { opacity: 1; transform: none; }
}