/* ── THE BRAND PALETTE IS IMMUTABLE ────────────────────────────────────────────────────────
   These three are the company's colours. They mean the same thing in every theme, in print,
   and in the app, and NOTHING below may redefine them.

   They were theme-varying, and that is the whole bug: `--cream` was #F3EFE7 in light and
   #1B1E22 in dark, so every `color: var(--cream)` — the heading on a dark band, the Client
   Login button, the timeline step labels — became near-black text on a near-black background.
   One token doing two jobs produced eleven screenshots of different-looking symptoms.

   A colour that names a PIGMENT cannot also name a ROLE. Roles live in the block after this
   one and are free to flip; pigments are not.                                              */
:root {
  --graphite: #22262B;
  --graphite-2: #2B3036;
  --graphite-3: #353B42;
  --oxide: #B9472A;
  --oxide-soft: #DE7F66;      /* the accent ON a dark ground: 5.3:1 on graphite, where
                                 #D06B51 measured 4.28 and #B9472A only 2.9 */
  --oxide-ink: #9C3B22;       /* the accent ON its own pale tint: 5.0:1, where full-strength
                                 oxide on oxide-pale is 3.86 and reads as a washed-out card */
  --cream: #F3EFE7;
  --porcelain: #FBF9F4;
  --success: #2E7D61;
  --warning: #9A6A18;
  --critical: #B43C3C;
  --info: #3D6489;
  --max: 1180px;
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
}

/* ── ROLES. These flip with the theme; the pigments above never do. ──────────────────────── */
:root {
  --page-bg: var(--porcelain);      /* the page itself */
  --section-alt: var(--cream);      /* the alternating band between white sections */
  --surface: #FFFFFF;               /* a card sitting on the page */
  --surface-2: #F7F3EC;             /* a panel sitting on a card */
  --text: var(--graphite);
  --muted: #66707A;
  --line: rgba(34,38,43,.13);
  --line-strong: rgba(34,38,43,.22);
  --shadow: 0 24px 70px rgba(34,38,43,.12);
  --panel: rgba(255,255,255,.72);
  --panel-border: rgba(34,38,43,.12);

  /* A band that is DARK on a light page and stays dark on a dark one. Its text is cream in
     both, which is the pairing the old `color: var(--cream)` was reaching for and lost. */
  --inverse-bg: var(--graphite);
  --inverse-text: var(--cream);
  --inverse-muted: rgba(243,239,231,.68);

  /* A wash of oxide, and what may legibly sit ON it. White on pale peach is the washed-out
     card in the screenshots — it happens by INHERITANCE inside a dark band, so the pairing has
     to be stated on the tinted element rather than left to whatever it sits inside. */
  --oxide-pale: #F0D8D0;
  --on-oxide-pale: var(--graphite);

  /* Oxide at full strength is a 3:1 accent on a dark ground — fine as a 7px dot, too weak
     for 12px uppercase kickers. `--oxide-soft` already existed for this and was never
     wired up; one rule had hardcoded #E48A72 to work around its absence. */
  --accent-text: var(--oxide);
  --accent-on-pale: var(--oxide-ink);

  color-scheme: light;
}

:root[data-theme="dark"] {
  --page-bg: #171A1E;
  --section-alt: #1B1E22;
  --surface: #22262B;
  --surface-2: #292E34;
  --text: var(--cream);
  --muted: #B5BDC5;
  --line: rgba(243,239,231,.12);
  --line-strong: rgba(243,239,231,.22);
  --shadow: 0 24px 70px rgba(0,0,0,.34);
  --panel: rgba(255,255,255,.055);
  --panel-border: rgba(255,255,255,.12);

  --inverse-bg: #111417;            /* darker than the page, so the band still reads as a band */
  --inverse-text: var(--cream);     /* unchanged, on purpose */
  --inverse-muted: rgba(243,239,231,.68);

  --oxide-pale: rgba(185,71,42,.18);
  --on-oxide-pale: var(--cream);
  --accent-text: var(--oxide-soft);
  --accent-on-pale: var(--oxide-soft);

  color-scheme: dark;
}

/* AN INVERSE BAND IS A THEME BOUNDARY. The ground under it just flipped, so the page's
   roles no longer describe it. Redefining the tokens AT the band means every descendant —
   headings, muted copy, hairlines, the accent — follows without being enumerated, in both
   themes. Patching each descendant instead is how `.section-dark .section-kicker` ended up
   with a hardcoded #E48A72 that only fixed one of them. */
.section-dark, .cta-panel, .footer {
  --text: var(--inverse-text);
  --muted: var(--inverse-muted);
  --line: rgba(243,239,231,.14);
  --line-strong: rgba(243,239,231,.24);
  --accent-text: var(--oxide-soft);
  --accent-on-pale: var(--oxide-soft);
  --surface: rgba(255,255,255,.055);
  --surface-2: rgba(255,255,255,.04);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--page-bg);
  line-height: 1.56;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  transition: background .25s ease, color .25s ease;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; }
::selection { background: rgba(185,71,42,.28); }

.announce {
  background: var(--graphite);
  color: rgba(243,239,231,.86);
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 13px;
}
.announce-inner {
  max-width: var(--max);
  margin: 0 auto;
  min-height: 38px;
  padding: 7px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px 14px;
}
.announce a { color: #fff; font-weight: 760; }
.announce .parent-label { color: rgba(243,239,231,.58); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(22px);
  background: color-mix(in srgb, var(--page-bg) 88%, transparent);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 12px 24px;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}
.brand { display: flex; align-items: center; flex: 0 0 auto; }
.brand img { height: 44px; width: auto; }
.brand .logo-dark { display: none; }
:root[data-theme="dark"] .brand .logo-light { display: none; }
:root[data-theme="dark"] .brand .logo-dark { display: block; }

.nav-shell { display: flex; align-items: center; gap: 8px; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 1px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav-links a {
  color: color-mix(in srgb, var(--text) 76%, transparent);
  padding: 9px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 650;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.nav-links a:hover, .nav-links a.active {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 7%, transparent);
}
.nav-links a.nav-cta {
  margin-left: 5px;
  color: #fff;
  background: var(--graphite);
  border: 1px solid var(--graphite);
  padding-inline: 14px;
}
:root[data-theme="dark"] .nav-links a.nav-cta {
  color: var(--graphite);
  background: var(--cream);
  border-color: var(--cream);
}
/* SIGN UP IS THE ONE ACTION THE SITE EXISTS TO PRODUCE, so it is the filled one and Client Login
   sits beside it as an outline. Two solid buttons next to each other say neither is the point. */
.nav-links a.nav-cta-signup {
  color: #fff;
  background: var(--oxide);
  border-color: var(--oxide);
}
/* `a.nav-cta-signup + li` can never match: the anchor is INSIDE the li, so its adjacent sibling
   is not an li. The `:has()` form is the one that does the work. */
.nav-links li:has(a.nav-cta-signup) + li a.nav-cta {
  color: var(--text);
  background: transparent;
  border-color: var(--line);
}
:root[data-theme="dark"] .nav-links a.nav-cta-signup {
  color: #fff;
  background: var(--oxide);
  border-color: var(--oxide);
}
:root[data-theme="dark"] .nav-links li:has(a.nav-cta-signup) + li a.nav-cta {
  color: var(--text);
  background: transparent;
  border-color: var(--line);
}
/* THE PRICE, WHEREVER IT IS SHOWN. Quiet, next to the action it qualifies — a figure a visitor
   has to ask for is a lead somebody has to work, and self-serve at volume cannot afford that. */
.hero-price, .cta-price {
  margin-top: 14px;
  max-width: 620px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.theme-toggle, .mobile-toggle {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 74%, transparent);
  color: var(--text);
  border-radius: 12px;
  cursor: pointer;
}
.theme-toggle:hover, .mobile-toggle:hover { border-color: var(--line-strong); }
.theme-icon { font-size: 18px; line-height: 1; transform: rotate(-20deg); }
.mobile-toggle { display: none; padding: 9px; }
.mobile-toggle span { display:block; width:19px; height:2px; background:currentColor; margin:3px 0; border-radius:2px; }

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 18%, rgba(185,71,42,.16), transparent 32%),
    radial-gradient(circle at 16% 0%, rgba(34,38,43,.07), transparent 36%),
    linear-gradient(135deg, var(--porcelain) 0%, var(--cream) 100%);
  color: var(--text);
}
:root[data-theme="dark"] .hero {
  background:
    radial-gradient(circle at 78% 18%, rgba(185,71,42,.24), transparent 32%),
    radial-gradient(circle at 16% 0%, rgba(243,239,231,.055), transparent 36%),
    linear-gradient(135deg, #171A1E 0%, #22262B 58%, #292E34 100%);
}
.hero:before {
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--text) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text) 4%, transparent) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, black 0%, transparent 84%);
  pointer-events:none;
}
.hero:after {
  content:""; position:absolute; right:-10%; top:3%; width:min(58vw,820px); aspect-ratio:1;
  background:
    radial-gradient(circle, transparent 0 46%, rgba(185,71,42,.18) 47%, transparent 48%),
    radial-gradient(circle, transparent 0 59%, color-mix(in srgb, var(--text) 7%, transparent) 60%, transparent 61%),
    conic-gradient(from 170deg, transparent, rgba(185,71,42,.14), transparent, color-mix(in srgb, var(--text) 8%, transparent), transparent);
  border-radius:50%; opacity:.7; pointer-events:none;
}
.hero-inner {
  position: relative; z-index:2;
  max-width: var(--max); margin:0 auto; padding:86px 24px 62px;
  min-height: 670px;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr); align-items:center; gap:52px;
}
.eyebrow {
  display:inline-flex; align-items:center; gap:9px; padding:8px 12px;
  border:1px solid color-mix(in srgb, var(--oxide) 40%, transparent); border-radius:999px;
  background:color-mix(in srgb, var(--oxide) 9%, transparent); color:var(--accent-text);
  font-size:12px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
}
.eyebrow:before { content:""; width:7px; height:7px; border-radius:50%; background:var(--oxide); box-shadow:0 0 0 5px rgba(185,71,42,.11); }
h1,h2,h3,h4,p { margin-top:0; }
h1 { margin:22px 0 20px; font-size:clamp(48px,7vw,82px); line-height:.94; letter-spacing:-.058em; font-weight:830; }
.hero-lede { max-width:720px; color:var(--muted); font-size:clamp(18px,2.1vw,22px); line-height:1.5; margin-bottom:28px; }
.accent { color:var(--accent-text); }
.hero-actions,.section-actions { display:flex; align-items:center; flex-wrap:wrap; gap:13px; margin-top:28px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:13px 18px; border-radius:999px; font-weight:760; font-size:15px; border:1px solid transparent; transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease; }
.btn:hover { transform:translateY(-2px); }
.btn-primary { color:#fff; background:var(--graphite); box-shadow:0 18px 42px rgba(34,38,43,.16); }
.btn-secondary { color:var(--text); border-color:var(--line-strong); background:color-mix(in srgb, var(--surface) 68%, transparent); }
.btn-oxide { color:#fff; background:var(--oxide); box-shadow:0 18px 42px rgba(185,71,42,.18); }
:root[data-theme="dark"] .btn-primary { color:var(--graphite); background:var(--cream); }
:root[data-theme="dark"] .btn-secondary { background:rgba(255,255,255,.05); }

.hero-panel {
  position:relative; border:1px solid var(--panel-border); border-radius:var(--radius-xl);
  background:linear-gradient(180deg, color-mix(in srgb,var(--surface) 86%,transparent), color-mix(in srgb,var(--surface) 64%,transparent));
  box-shadow:var(--shadow); overflow:hidden;
}
.hero-panel:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 28% 0%, rgba(185,71,42,.12), transparent 36%); pointer-events:none; }
.panel-top { position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; border-bottom:1px solid var(--line); }
.panel-title { font-weight:780; }
.status-pill { color:var(--success); background:color-mix(in srgb,var(--success) 10%,transparent); border:1px solid color-mix(in srgb,var(--success) 28%,transparent); border-radius:999px; padding:6px 10px; font-size:12px; font-weight:760; }
.arch-panel { position:relative; padding:22px; }
.system-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.system-chip { padding:10px 8px; text-align:center; border:1px solid var(--line); border-radius:10px; background:color-mix(in srgb,var(--surface) 86%,transparent); font-size:12px; font-weight:720; }
.flow-arrow { text-align:center; color:var(--oxide); font-size:20px; padding:7px 0; }
.governance-floor { padding:14px 16px; border:1px solid rgba(185,71,42,.28); border-radius:12px; background:color-mix(in srgb,var(--oxide) 8%,transparent); }
.governance-floor strong { display:block; color:var(--oxide); font-size:12px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px; }
.governance-floor span { display:block; color:var(--muted); font-size:12px; }
.brain-block { padding:16px; border:1px solid var(--line); border-radius:12px; background:color-mix(in srgb,var(--surface) 86%,transparent); }
.brain-block strong { display:block; margin-bottom:7px; }
.brain-tags { display:flex; flex-wrap:wrap; gap:6px; }
.brain-tags span { padding:5px 8px; border-radius:999px; background:color-mix(in srgb,var(--text) 6%,transparent); font-size:11px; font-weight:680; color:var(--muted); }
.output-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.output-card { padding:12px; border-radius:10px; background:var(--inverse-bg); color:var(--inverse-text); font-size:12px; font-weight:730; text-align:center; }
.output-card.oxide { background:var(--oxide); color:#fff; }

.proof-bar { position:relative; z-index:3; border-top:1px solid var(--line); background:color-mix(in srgb,var(--surface) 80%,transparent); }
.proof-bar-inner { max-width:var(--max); margin:0 auto; padding:0 24px; display:grid; grid-template-columns:repeat(4,1fr); }
.proof-item { padding:20px 18px; color:var(--muted); font-size:13px; border-right:1px solid var(--line); }
.proof-item:first-child { border-left:1px solid var(--line); }
.proof-item strong { display:block; color:var(--text); margin-bottom:4px; }

.container { max-width:var(--max); margin:0 auto; padding:0 24px; }
.section-white,.section-cream,.section-dark { padding:96px 0; }
.section-white { background:var(--surface); }
.section-cream { background:var(--section-alt); }
.section-dark { background:var(--inverse-bg); color:var(--inverse-text); }
.section-head { max-width:800px; margin-bottom:38px; }
.section-head.center { text-align:center; margin-left:auto; margin-right:auto; }
.section-kicker { color:var(--accent-text); font-size:12px; font-weight:820; letter-spacing:.11em; text-transform:uppercase; margin-bottom:10px; }
.section-head h2,.split h2 { font-size:clamp(34px,5vw,56px); line-height:1.03; letter-spacing:-.045em; margin-bottom:18px; }
.section-head p,.large-p { color:var(--muted); font-size:18px; }
.section-dark .section-head p,.section-dark .large-p { color:rgba(243,239,231,.7); }

.cards-2,.cards-3,.cards-4 { display:grid; gap:18px; }
.cards-2 { grid-template-columns:repeat(2,1fr); }
.cards-3 { grid-template-columns:repeat(3,1fr); }
.cards-4 { grid-template-columns:repeat(4,1fr); }
.card { border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); padding:26px; box-shadow:0 10px 34px rgba(34,38,43,.035); }
.card h3 { font-size:20px; letter-spacing:-.025em; margin-bottom:10px; }
.card p { color:var(--muted); margin-bottom:0; }
.card .icon { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:var(--oxide-pale); color:var(--oxide); font-weight:850; margin-bottom:18px; }
.section-dark .card { background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.12); box-shadow:none; }
.section-dark .card p { color:var(--inverse-muted); }

.split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:center; }
.split.top { align-items:start; }
.metric-strip { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--surface); }
.metric { padding:24px; border-right:1px solid var(--line); }
.metric:last-child { border-right:0; }
.metric strong { display:block; font-size:22px; letter-spacing:-.03em; margin-bottom:5px; }
.metric span { display:block; color:var(--muted); font-size:13px; }
.section-dark .metric-strip { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); }
.section-dark .metric { border-color:rgba(255,255,255,.12); }
.section-dark .metric span { color:rgba(243,239,231,.66); }

.page-hero { position:relative; overflow:hidden; padding:82px 0 74px; background:linear-gradient(140deg,var(--page-bg),var(--section-alt)); border-bottom:1px solid var(--line); }
.page-hero:after { content:""; position:absolute; width:560px; height:560px; right:-150px; top:-280px; border-radius:50%; border:1px solid rgba(185,71,42,.2); box-shadow:0 0 0 70px rgba(185,71,42,.035),0 0 0 140px rgba(185,71,42,.025); }
.page-hero .container { position:relative; z-index:2; }
.breadcrumb { color:var(--accent-text); text-transform:uppercase; letter-spacing:.11em; font-size:12px; font-weight:820; margin-bottom:15px; }
.page-hero h1 { max-width:900px; font-size:clamp(46px,7vw,76px); margin:0 0 20px; }
.page-hero p { max-width:790px; font-size:21px; color:var(--muted); }

.diagram { border:1px solid var(--line); border-radius:var(--radius-xl); background:var(--surface); padding:26px; box-shadow:var(--shadow); }
.diagram-label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:780; margin-bottom:9px; }
.diagram-row { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.diagram-node { padding:12px 10px; border:1px solid var(--line); border-radius:10px; text-align:center; font-size:12px; font-weight:720; background:var(--surface-2); }
.diagram-wide { padding:16px; border-radius:12px; border:1px solid var(--line); background:var(--surface-2); }
.diagram-wide.oxide { border-color:rgba(185,71,42,.35); background:var(--oxide-pale); color:var(--on-oxide-pale); }
.diagram-wide.oxide strong { color:var(--accent-on-pale); }
.diagram-arrow { text-align:center; color:var(--accent-text); font-size:20px; padding:8px 0; }

.timeline { position:relative; }
.timeline:before { content:""; position:absolute; left:21px; top:20px; bottom:20px; width:1px; background:var(--line-strong); }
.timeline-row { position:relative; display:grid; grid-template-columns:44px 1fr; gap:18px; padding:0 0 24px; }
.flow-num { position:relative; z-index:2; width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:var(--graphite); color:var(--cream); font-size:13px; font-weight:820; box-shadow:0 0 0 5px var(--surface); }
:root[data-theme="dark"] .flow-num { background:var(--cream); color:var(--graphite); box-shadow:0 0 0 5px var(--surface); }
.timeline-row h3 { margin:1px 0 6px; font-size:18px; }
.timeline-row p { color:var(--muted); margin:0; }

.control-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.control { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:16px; padding:20px; background:var(--surface); }
.control:after { content:""; position:absolute; width:80px; height:80px; right:-28px; top:-28px; border-radius:50%; border:10px solid color-mix(in srgb,var(--oxide) 12%,transparent); }
.control small { display:block; color:var(--oxide); text-transform:uppercase; letter-spacing:.08em; font-weight:800; margin-bottom:8px; }
.control strong { display:block; font-size:17px; margin-bottom:5px; }
.control p { color:var(--muted); font-size:14px; margin:0; }
/* On the dark band the label's --oxide sits at ~2.5:1 on the translucent card; --oxide-soft is the
   accent that was made for a dark ground (5.3:1 on graphite). */
.section-dark .control small { color:var(--oxide-soft); }
.section-dark .control p { color:var(--inverse-muted); }

.integration-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.integration { border:1px solid var(--line); border-radius:15px; padding:22px; background:var(--surface); }
.integration strong { display:block; font-size:17px; margin-bottom:5px; }
.integration span { color:var(--muted); font-size:13px; }
.integration .mode { display:inline-block; margin-top:14px; padding:5px 8px; border-radius:999px; background:color-mix(in srgb,var(--text) 6%,transparent); color:var(--muted); font-size:11px; font-weight:780; }

.pill-row { display:flex; flex-wrap:wrap; gap:8px; }
.pill { padding:7px 10px; border-radius:999px; background:color-mix(in srgb,var(--text) 6%,transparent); color:var(--muted); border:1px solid var(--line); font-size:12px; font-weight:700; }

.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); }
table { width:100%; border-collapse:collapse; min-width:700px; }
th,td { padding:17px 18px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; background:var(--surface-2); }
td { color:var(--muted); }
td strong { color:var(--text); }
tr:last-child td { border-bottom:0; }

.notice { border-left:4px solid var(--oxide); background:var(--oxide-pale); padding:18px 20px; border-radius:0 12px 12px 0; color:var(--on-oxide-pale); }
.notice strong { color:var(--text); }

.cta-panel { display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:40px; padding:42px; border-radius:var(--radius-xl); background:var(--inverse-bg); color:var(--inverse-text); overflow:hidden; position:relative; }
.cta-panel:after { content:""; position:absolute; width:320px; height:320px; right:-160px; top:-120px; border-radius:50%; border:50px solid rgba(185,71,42,.25); }
.cta-panel h2 { font-size:clamp(34px,4vw,50px); line-height:1.02; letter-spacing:-.045em; margin-bottom:12px; }
.cta-panel p { color:var(--inverse-muted); margin:0; font-size:17px; }
.cta-panel .section-actions { justify-content:flex-end; position:relative; z-index:2; }
.cta-panel .btn-primary { background:var(--cream); color:var(--graphite); }
.cta-panel .btn-secondary { color:var(--inverse-text); border-color:rgba(243,239,231,.25); background:rgba(255,255,255,.05); }
/* The price sits under the panel's own copy, so it needs the spacing back that
   `.cta-panel p { margin:0 }` takes away on specificity, and a size that reads as a
   footnote to the offer rather than part of the pitch. */
.cta-panel .cta-price { margin-top:14px; font-size:14px; line-height:1.55; }

.footer { background:#15181C; color:var(--inverse-text); padding:68px 24px 26px; }
.footer-grid { max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:1.55fr .8fr .9fr 1fr; gap:44px; }
.footer-logo { width:170px; margin-bottom:18px; }
.footer p { color:rgba(243,239,231,.58); font-size:14px; }
.footer h4 { color:rgba(243,239,231,.66); font-size:11px; text-transform:uppercase; letter-spacing:.09em; margin-bottom:14px; }
.footer a { display:block; color:rgba(243,239,231,.78); margin:9px 0; font-size:14px; }
.footer a:hover { color:#fff; }
.footer-bottom { max-width:var(--max); margin:44px auto 0; padding-top:20px; border-top:1px solid rgba(243,239,231,.12); display:flex; align-items:center; justify-content:space-between; gap:20px; color:rgba(243,239,231,.46); font-size:12px; }
.parent-mark { display:inline-flex; align-items:center; gap:8px; color:rgba(243,239,231,.72); font-weight:700; }
.parent-dot { width:8px; height:8px; border-radius:50%; background:var(--oxide); }

.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 1080px) {
  .nav-links a { padding-inline:8px; font-size:12px; }
  .brand img { height:40px; }
}
@media (max-width: 980px) {
  .mobile-toggle { display:inline-block; }
  .nav-links { display:none; position:absolute; left:18px; right:18px; top:calc(100% + 8px); padding:12px; border:1px solid var(--line); background:var(--surface); border-radius:16px; box-shadow:var(--shadow); flex-direction:column; align-items:stretch; }
  .nav-links.open { display:flex; }
  .nav-links a { display:block; padding:11px 12px; font-size:14px; }
  .nav-links a.nav-cta { margin:4px 0 0; text-align:center; }
  .nav-shell { position:relative; }
  .hero-inner { grid-template-columns:1fr; min-height:auto; padding-top:72px; }
  .hero-panel { max-width:680px; }
  .proof-bar-inner { grid-template-columns:repeat(2,1fr); }
  .proof-item:nth-child(3) { border-left:1px solid var(--line); }
  .cards-4 { grid-template-columns:repeat(2,1fr); }
  .cards-3 { grid-template-columns:1fr 1fr; }
  .split { grid-template-columns:1fr; gap:38px; }
  .metric-strip { grid-template-columns:repeat(2,1fr); }
  .metric:nth-child(2) { border-right:0; }
  .metric:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .integration-grid,.control-grid { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1.4fr 1fr 1fr; }
  .footer-grid > div:last-child { grid-column:2 / 4; }
  .cta-panel { grid-template-columns:1fr; }
  .cta-panel .section-actions { justify-content:flex-start; }
}
@media (max-width: 650px) {
  .announce-inner { justify-content:flex-start; }
  /* The label AND the thing that separates it. Hiding "A product of" on its own leaves the
     middot stranded at the end of the line, where it reads as a typo rather than punctuation. */
  .announce .parent-label,
  .announce .announce-sep { display:none; }
  .header-inner { padding-inline:16px; min-height:64px; }
  .brand img { height:36px; }
  .hero-inner { padding:58px 18px 44px; gap:34px; }
  h1 { font-size:clamp(43px,14vw,62px); }
  .hero-lede { font-size:18px; }
  .system-row,.diagram-row { grid-template-columns:1fr 1fr; }
  .output-row { grid-template-columns:1fr; }
  .proof-bar-inner { grid-template-columns:1fr; }
  .proof-item,.proof-item:first-child,.proof-item:nth-child(3) { border-left:0; border-right:0; border-bottom:1px solid var(--line); }
  .section-white,.section-cream,.section-dark { padding:72px 0; }
  .container { padding-inline:18px; }
  .page-hero { padding:62px 0 54px; }
  .page-hero p { font-size:18px; }
  .cards-2,.cards-3,.cards-4,.integration-grid,.control-grid { grid-template-columns:1fr; }
  .metric-strip { grid-template-columns:1fr; }
  .metric,.metric:nth-child(2) { border-right:0; border-bottom:1px solid var(--line); }
  .metric:last-child { border-bottom:0; }
  .cta-panel { padding:30px 24px; }
  .footer { padding-inline:18px; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:30px; }
  .footer-grid > div:first-child,.footer-grid > div:last-child { grid-column:1 / -1; }
  .footer-bottom { align-items:flex-start; flex-direction:column; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior:auto !important; transition:none !important; }
  .reveal { opacity:1; transform:none; }
}
/* Mobile dropdown anchors to the full header width, not the compact control cluster. */
.header-inner { position: relative; }
@media (max-width: 980px) {
  .nav-shell { position: static; }
  .nav-links { left: 16px; right: 16px; top: calc(100% + 8px); }
}


/* ── LONG-FORM LEGAL PAGES ───────────────────────────────────────────────────────────────────
   Terms and privacy are read, not skimmed, and usually by somebody checking one specific thing.
   A measured column, real heading hierarchy and a table that survives a phone. */
.prose-page { max-width: 760px; }
.prose-page h2 { font-size: 23px; letter-spacing: -.02em; margin: 38px 0 10px; }
.prose-page h2:first-of-type { margin-top: 8px; }
.prose-page h3 { font-size: 17px; margin: 22px 0 8px; }
.prose-page p, .prose-page li { color: var(--muted); line-height: 1.68; font-size: 15.5px; }
.prose-page p { margin: 0 0 14px; }
.prose-page ul { margin: 0 0 16px; padding-left: 20px; }
.prose-page li { margin-bottom: 9px; }
.prose-page strong { color: var(--text); font-weight: 680; }
.prose-page table { width: 100%; border-collapse: collapse; margin: 6px 0 18px; font-size: 14.5px; }
.prose-page th, .prose-page td { text-align: left; padding: 10px 12px;
                                 border-bottom: 1px solid var(--line); vertical-align: top;
                                 color: var(--muted); }
.prose-page th { color: var(--text); font-weight: 680; }
@media (max-width: 620px) {
  .prose-page th, .prose-page td { padding: 8px 6px; font-size: 13.5px; }
}
/* A DRAFT SAYS SO AT THE TOP. A legal page that is not yet in force and does not admit it is
   worse than no page, because somebody will rely on it. */
.notice-draft {
  border: 1px solid var(--oxide); border-left-width: 3px; border-radius: var(--radius-sm, 8px);
  background: color-mix(in srgb, var(--oxide) 7%, transparent);
  padding: 14px 16px; margin: 0 0 28px; font-size: 14.5px; line-height: 1.6; color: var(--text);
}


/* ── THE COUNTERPOINT, AND THE WORKED EXAMPLE ────────────────────────────────────────────────
   One line the whole competitive argument rests on, given room to be read rather than buried in
   a paragraph. Every AI competitor ships a chat box; this says why that is not the same thing. */
.counterpoint {
  max-width: 760px; margin: 40px auto 0; padding: 22px 26px;
  border-left: 3px solid var(--oxide); background: var(--surface, #fff);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.counterpoint p { margin: 0; font-size: clamp(18px, 2vw, 22px); line-height: 1.4;
                  letter-spacing: -.015em; font-weight: 640; color: var(--text); }

/* THE PROOF, LABELLED. A worked example that does not say it is synthetic is a customer result
   we did not have — the video labels it and so does this. */
.worked-example { max-width: 760px; margin: 28px auto 0; padding: 26px;
                  border: 1px solid var(--line); border-radius: var(--radius-xl, 16px);
                  background: var(--surface, #fff); }
.worked-head { display: flex; justify-content: space-between; align-items: baseline;
               gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.worked-label { font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
                color: var(--muted); }
.worked-example h3 { margin: 0 0 8px; font-size: 21px; letter-spacing: -.02em; }
.worked-example > p { color: var(--muted); margin: 0 0 18px; line-height: 1.65; }
.worked-chain { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.worked-chain span { padding: 7px 12px; border-radius: 999px; font-size: 13px;
                     background: color-mix(in srgb, var(--text) 5%, transparent);
                     color: var(--muted); }
.worked-chain span:not(:last-child)::after { content: " \2192"; color: var(--oxide);
                                             margin-left: 9px; font-weight: 700; }
.worked-chain span:last-child { background: color-mix(in srgb, var(--oxide) 11%, transparent);
                                color: var(--accent-text); font-weight: 620; }
@media (max-width: 620px) {
  .worked-chain { flex-direction: column; align-items: flex-start; }
  .worked-chain span:not(:last-child)::after { content: ""; margin: 0; }
}

/* Both doors in one diagram block, because a diagram that contradicts the paragraph beside it is
   the one a reader believes. */
.diagram-or { display:block; margin:5px 0; font-size:11px; letter-spacing:.09em;
              text-transform:uppercase; opacity:.6; font-weight:600; }

/* The product overview (YouTube, privacy-enhanced host). Written 2026-09-15 in the shared
   checkout and never committed, so no published version of the site ever carried it. */
.product-video-section { scroll-margin-top: 100px; }
.product-video-frame {
  width: 100%;
  max-width: 1040px;
  aspect-ratio: 16 / 9;
  margin: 32px auto 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: var(--graphite);
  box-shadow: var(--shadow);
}
.product-video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.product-video-link { margin: 18px 0 0; text-align: center; font-size: 14px; }
.product-video-link a { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.product-video-link a:hover { color: var(--accent-text); }
@media (max-width: 760px) { .product-video-frame { border-radius: 10px; } }