/* ============================================================
   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; }

/* the hero CTA anchors to the card (#classify-tool on .classifier-wrap);
   scroll-margin keeps it clear of the 76px sticky header on small screens */
.classifier-wrap { position: relative; scroll-margin-top: 90px; }
.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);
}
/* one-shot attention pulse played when the hero CTA is clicked (home.html):
   a soft green ring expanding out from the card edge, feedback only, never on
   load. The global prefers-reduced-motion rule collapses it. */
.classifier.attn { animation: classifier-attn .7s ease-out; }
@keyframes classifier-attn {
  0% { box-shadow: var(--shadow), 0 0 0 0 rgba(11, 107, 87, .45); }
  100% { box-shadow: var(--shadow), 0 0 0 16px rgba(11, 107, 87, 0); }
}
.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; }

/* Browser check inside the shared classify panel (operator, 2026-08-20): the
   widget draws its own state, this only owns the rhythm around it. */
.classify-check { margin: 10px 0 4px; }
.classify-check altcha-widget { display: block; max-width: 100%; }
.classify-check-note { font-size: 14px; line-height: 1.5; color: var(--muted); }
.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; }

/* ── the result's code card (spec 52 §1) ────────────────────────────────
   The free tool's answer wears the card the app and the code pages show
   (spec 48 §1): dark card, kicker with tick, the code large, the plain
   title, the action row, the fact row. The marketing site loads site.css
   only, so the family is ported here in the site's own variables and its
   own display face, while the class names stay the shared ones, one
   partial rendering correctly under either stylesheet. */
.cxr-code-card {
  width: 100%;
  padding: 24px; border-radius: 20px;
  color: #fff; background: var(--green-2); box-shadow: var(--shadow);
}
.app-code-card { width: 100%; }
.cxr-code-card-kicker {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px;
  color: var(--mint); font-size: 12px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
}
.cxr-code-card-tick {
  display: inline-grid; place-items: center; width: 20px; height: 20px;
  border-radius: 7px; color: var(--green-2); background: var(--mint);
  font-size: 12px; line-height: 1;
}
.cxr-code-card-value {
  margin: 0 0 8px; color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 600; font-size: 40px; line-height: 1.05;
  letter-spacing: .02em; overflow-wrap: anywhere;
}
.app-code-card-title {
  margin: 0 0 16px; color: var(--mint);
  font-size: 15px; line-height: 1.5; overflow-wrap: anywhere;
}
.cxr-code-card-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
}
/* mint on the dark fill: the site's green button would sink into it */
.cxr-code-card .btn-primary {
  border: 0; border-radius: 10px; padding: 12px 22px;
  color: var(--green-2); background: var(--mint);
  font-size: 14px; font-weight: 700; white-space: nowrap;
  transition: background .15s ease;
}
.cxr-code-card .btn-primary:hover,
.cxr-code-card .btn-primary:focus-visible,
.cxr-code-card .cxr-copy-done { background: #fff; }
.app-code-card-link {
  color: #fff; font-size: 14px; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
}
.app-code-card-link:hover, .app-code-card-link:focus-visible { color: var(--mint); }
.cxr-code-card .cxr-copy-status {
  align-self: center; color: var(--mint); font-size: 13px; font-weight: 700;
}
.cxr-code-card-facts {
  display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 14px 0 0;
  padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .18);
  color: var(--mint); font-size: 13px; line-height: 1.4;
}
.cxr-code-card-fact + .cxr-code-card-fact::before { content: "·"; margin-right: 10px; }
@media (max-width: 560px) {
  .cxr-code-card-value { font-size: 32px; }
}

/* ── which half of the code page to open (spec 52 §2) ───────────────────
   Two small toggles under the card, outlined until one is chosen. A pure
   JavaScript affordance (it only rewrites a link's hash and remembers the
   answer in this browser), so it is hidden until the script marks the
   document. */
.cxr-jsonly { display: none; }
.cxr-js .cxr-jsonly { display: flex; }
.classify-situation {
  flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.5;
}
.classify-situation-opt {
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-2); background: #fff;
  font-size: 13px; font-weight: 700; line-height: 1.3;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.classify-situation-opt:hover { border-color: var(--green); color: var(--green); }
.classify-situation-opt[aria-pressed="true"] {
  border-color: var(--green); color: #fff; background: var(--green);
}

/* 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); }

.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/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); }

.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; }

.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 { 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; }
}

@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; }
  .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 builds on the generic
   .workflow / .steps / .product-window / .code-panel rules, so those 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 rule 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
     elsewhere on the site (#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; }
}