/* ============================================================================
   AI DEPO — shared production stylesheet. Vanilla CSS only, no dependencies.

   The "Your team, multiplied" system: white ground, near-black ink, a tall
   condensed serif (Instrument Serif) for display and a clean grotesk
   (Instrument Sans) for text, both self-hosted from /fonts under the SIL OFL.
   Colour arrives only through the prism spectrum — the hero canvas, thin
   spectrum rules and small accents — never as large flat fills.

   Palette (single source of truth in §1):
     ground #FFFFFF · paper #F7F6F3 · ink #0E0E0E · muted #5E5B56
     rule #E7E4DE · spectrum red #D7354F → coral → amber → cyan → blue #3E5BD8

   The seven canonical pages use this file. The retained legacy pages
   (interlink, dispatch, sentinel, quarry, foundry, webright, momentum,
   solutions) load legacy.css, the frozen previous system, and are not
   styled here.

   Sections:
     1  fonts & tokens        8  cards & lists
     2  reset & base          9  steps
     3  focus & skip link    10  stats & sources
     4  header & navigation  11  FAQ
     5  buttons & links      12  contact form
     6  frames & heroes      13  call to action & footer
     7  sections & type      14  responsive · 15 reduced motion
                             16  homepage components
   ========================================================================= */

/* ---------- 1. Fonts & tokens --------------------------------------------- */
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/_assets/site/fonts/instrument-serif-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/_assets/site/fonts/instrument-serif-italic-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/_assets/site/fonts/instrument-sans-latin.woff2") format("woff2");
}

:root {
  --bg: #FFFFFF;
  --paper: #F7F6F3;
  --ink: #0E0E0E;
  --ink-2: #2B2A28;
  --muted: #5E5B56;
  --dim: #6F6B65;
  --rule: #E7E4DE;
  --rule-2: #D9D5CD;

  --red: #D7354F;
  --coral: #EE7F6A;
  --amber: #E9A24B;
  --cyan: #19B8D6;
  --blue: #3E5BD8;
  --spectrum: linear-gradient(90deg, var(--red), var(--coral) 28%, var(--amber) 46%, var(--cyan) 70%, var(--blue));

  --serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --gut: clamp(10px, 1.4vw, 22px);       /* page edge around framed cards */
  --pad: clamp(20px, 4.2vw, 64px);       /* inner horizontal padding */
  --max: 1240px;
  --radius: clamp(18px, 2.2vw, 30px);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- 2. Reset & base ----------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- 3. Focus & skip link ------------------------------------------ */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.skip-link {
  position: absolute; left: -999px; top: 10px; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; text-decoration: none;
}
.skip-link:focus { left: 12px; }
.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;
}

/* ---------- 4. Header & navigation ---------------------------------------- */
.site-header {
  position: relative; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: clamp(18px, 2.4vw, 34px) var(--pad) 0;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink);
  font-family: var(--serif); font-size: 25px; line-height: 1; letter-spacing: .02em;
}
.brand .mark { width: 24px; height: 24px; flex: none; }
.nav { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 40px); }
.nav > a, .nav-trigger {
  font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none; background: none; border: 0; padding: 8px 0; cursor: pointer;
}
.nav > a:hover, .nav-trigger:hover { color: var(--ink); }
.nav > a[aria-current="page"], .nav-group.is-current .nav-trigger { color: var(--ink); box-shadow: inset 0 -1px 0 var(--ink); }
.nav .nav-cta {
  letter-spacing: .02em; text-transform: none; font-size: 15px; font-weight: 500;
  padding: 10px 18px; border-radius: 999px; background: var(--ink); color: #fff;
}
.nav .nav-cta:hover { color: #fff; background: #2a2a2a; }
.nav .nav-cta[aria-current="page"] { box-shadow: none; }

.nav-group { position: relative; }
.nav-trigger { display: inline-flex; align-items: center; gap: 7px; }
.nav-caret { width: 9px; height: 9px; transition: transform .25s var(--ease); }
.nav-group.open .nav-caret { transform: rotate(180deg); }
.nav-menu {
  position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0;
  width: 320px; padding: 8px; border-radius: 18px; background: #fff;
  border: 1px solid var(--rule-2); box-shadow: 0 24px 60px -28px rgba(14,14,14,.28);
  display: none;
}
.nav-group.open .nav-menu { display: block; }
html:not(.js-ready) .nav-group:focus-within .nav-menu { display: block; }
.nav-menu a { display: block; padding: 12px 14px; border-radius: 12px; text-decoration: none; }
.nav-menu a:hover, .nav-menu a:focus-visible { background: var(--paper); }
.nav-menu a[aria-current="page"] { background: var(--paper); }
.nav-name { display: flex; align-items: center; gap: 9px; font-family: var(--serif); font-size: 22px; line-height: 1.15; color: var(--ink); }
.nav-name::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tint, var(--ink)); flex: none; }
.nav-outcome { display: block; margin: 3px 0 0 16px; font-size: 14px; color: var(--muted); }

.nav-toggle {
  display: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--rule-2);
  background: #fff; align-items: center; justify-content: center; cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .x { display: none; }
.nav-toggle[aria-expanded="true"] .x { display: block; }
.nav-toggle[aria-expanded="true"] .menu { display: none; }

/* ---------- 5. Buttons & links -------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 28px; border-radius: 999px; text-decoration: none; cursor: pointer;
  font-family: var(--serif); font-size: 22px; line-height: 1; letter-spacing: .005em;
  border: 1px solid var(--ink); transition: background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.btn-primary { background: var(--ink); color: #fff; box-shadow: 0 12px 30px -16px rgba(14,14,14,.55); }
.btn-primary:hover { background: #262626; }
.btn-ghost {
  background: rgba(255,255,255,.72); color: var(--ink);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 #fff, 0 10px 26px -18px rgba(14,14,14,.4);
}
.btn-ghost:hover { background: #fff; }
.btn .arrow { font-family: var(--sans); font-size: 17px; }
.textlink {
  font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--rule-2); padding-bottom: 2px; transition: border-color .2s;
}
.textlink:hover { border-color: var(--ink); }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }

/* ---------- 6. Frames & heroes -------------------------------------------- */
.frame { padding: var(--gut) var(--gut) 0; }
.top-card {
  position: relative; isolation: isolate;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bg);
  display: flex; flex-direction: column;
}
.hero-art {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none;
}
.hero-art canvas { width: 100%; height: 100%; }
/* Static stand-in when WebGL is unavailable or before it starts. */
.hero-art::before {
  content: ""; position: absolute; right: -6%; top: 34%; width: 52%; height: 56%;
  background: linear-gradient(168deg, transparent 18%, rgba(215,53,79,.35) 32%, rgba(238,127,106,.32) 42%, rgba(233,162,75,.28) 50%, rgba(255,255,255,.4) 55%, rgba(25,184,214,.32) 64%, rgba(62,91,216,.3) 74%, transparent 86%);
  filter: blur(26px);
}
.has-gl .hero-art::before { display: none; }

.hero { min-height: min(max(660px, calc(100svh - 2 * var(--gut))), 960px); }
.hero-body {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(40px, 7vh, 96px) var(--pad) 36px; max-width: 860px;
}
.eyebrow {
  margin-bottom: 22px; font-size: 13px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2);
}
.hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(60px, 8.6vw, 132px); line-height: .93; letter-spacing: -.012em; }
.lede { margin-top: 26px; max-width: 600px; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.5; color: var(--muted); }
.hero .ctas { margin-top: 36px; }
.strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px clamp(18px, 2.6vw, 40px);
  list-style: none; margin: 0; padding: 0 var(--pad) clamp(22px, 3vw, 38px);
}
.strip li { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.strip svg { width: 17px; height: 17px; stroke: var(--ink-2); fill: none; stroke-width: 1.6; }

/* Inner-page hero: same card and header, a shorter body, the prism moved right. */
.page-hero { min-height: clamp(520px, 72svh, 720px); }
.page-hero .hero-body { max-width: 760px; padding-bottom: clamp(48px, 7vw, 96px); }
.page-hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(52px, 6.8vw, 104px); line-height: .95; letter-spacing: -.01em; }

/* Homepage agent fan-out (app.js §5): the prism hub, its label, and the
   agent cards the coloured flows run to. Positions are set by the script;
   without it the cards still render as a static list. */
.hero .hero-art::before { display: none; }
.agent-hub {
  position: absolute; z-index: 1; left: 56%; top: 66%;
  width: var(--hub, 84px); height: var(--hub, 84px);
  transform: translate(-50%, -50%); pointer-events: none;
  filter: drop-shadow(0 14px 16px rgba(14,14,14,.14));
}
.agent-hub svg { width: 100%; height: 100%; }
.agent-hub.flash svg { animation: hub-flash .6s var(--ease); }
@keyframes hub-flash { 30% { transform: scale(1.08); } }
html:not(.has-fanout) .agent-hub, html:not(.has-fanout) .agent-label { display: none; }
.agent-label {
  position: absolute; z-index: 1; transform: translateX(-50%); pointer-events: none;
  font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); white-space: nowrap;
}
.agents {
  position: absolute; z-index: 1; right: var(--pad); top: 0; bottom: 0;
  width: min(300px, 24vw); margin: 0; padding: 104px 0 84px; list-style: none;
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
}
.agent {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 12px;
  border-radius: 14px; background: rgba(255,255,255,.94); border: 1px solid var(--rule);
  box-shadow: 0 10px 24px -20px rgba(14,14,14,.35);
  font-size: 16px; line-height: 1.3; transition: border-color .5s, box-shadow .5s;
}
.agent .dot { flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--c); }
.agent .txt { flex: 1; min-width: 0; }
.agent .area { display: block; margin-bottom: 3px; font-size: 13.5px; font-weight: 600; color: var(--t, var(--ink)); }
.agent .who { display: block; margin-bottom: 1px; font-size: 10.5px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--dim); }
.agent .who[hidden] { display: none; }
.agent .task { display: block; color: var(--ink); }
.agent .who, .agent .task { transition: opacity .35s; }
.agent.swap .who, .agent.swap .task { opacity: 0; }
.agent .ok { flex: 0 0 18px; height: 18px; border-radius: 50%; border: 1px solid var(--rule-2); display: grid; place-items: center; transition: background .4s, border-color .4s; }
.agent .ok svg { width: 10px; height: 10px; stroke: #fff; stroke-width: 2.4; fill: none; opacity: 0; transition: opacity .3s; }
.agent.done { border-color: color-mix(in srgb, var(--c) 55%, var(--rule)); box-shadow: 0 12px 26px -18px color-mix(in srgb, var(--c) 60%, transparent); }
.agent.done .ok { background: var(--c); border-color: var(--c); }
.agent.done .ok svg { opacity: 1; }

/* ---------- 7. Sections & type -------------------------------------------- */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: clamp(80px, 10vw, 140px) 0; }
.section.tight { padding-top: 0; }
.section.paper { background: var(--paper); border-block: 1px solid var(--rule); }
.kicker { margin-bottom: 18px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.kicker .dot { display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: var(--tint, var(--ink)); vertical-align: 1px; }
h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5.2vw, 76px); line-height: 1; letter-spacing: -.01em; }
h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(27px, 2.3vw, 35px); line-height: 1.1; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.spectrum-rule { height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, var(--red) 16%, var(--coral) 32%, var(--amber) 46%, var(--cyan) 68%, var(--blue) 84%, transparent); }
.head { display: flex; flex-wrap: wrap; gap: 28px 48px; justify-content: space-between; align-items: flex-end; margin-bottom: clamp(44px, 5vw, 68px); }
.head > p { max-width: 420px; }
.statement { font-family: var(--serif); font-size: clamp(30px, 3.6vw, 52px); line-height: 1.12; max-width: 1080px; }
.statement .soft { color: #8E8A83; }
.prose { max-width: 680px; }
.prose p + p { margin-top: 1.1em; }
.prose p { font-size: 18px; color: var(--ink-2); }
.split { display: flex; flex-wrap: wrap; gap: clamp(40px, 6vw, 96px); }
.split > * { flex: 1 1 400px; min-width: 0; }
.note { margin-top: 28px; padding: 18px 20px; border-radius: 14px; background: var(--paper); border: 1px solid var(--rule); font-size: 15px; color: var(--muted); }

/* ---------- 8. Cards & lists ---------------------------------------------- */
.tri { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); border-top: 1px solid var(--rule-2); margin-top: clamp(52px, 7vw, 92px); }
.tri > div { padding: 30px 32px 0 0; }
.tri .n, .steps .n { display: block; font-size: 12px; letter-spacing: .16em; color: var(--dim); }
.tri .n { margin-bottom: 38px; }
.tri h3 { margin-bottom: 12px; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 16px; }
.card {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--rule); border-radius: 22px; padding: 34px 30px 30px; background: #fff;
  transition: border-color .3s, box-shadow .3s, transform .3s var(--ease);
}
.card::before { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 2px; border-radius: 2px; background: var(--tint, var(--ink)); }
a.card { text-decoration: none; color: inherit; }
a.card:hover { border-color: var(--rule-2); box-shadow: 0 24px 50px -34px rgba(14,14,14,.35); transform: translateY(-2px); }
.card .lead { margin: 12px 0 24px; color: var(--muted); }
.card .more { margin-top: auto; padding-top: 24px; font-size: 15px; font-weight: 500; }
.ticks { list-style: none; margin: 0; padding: 20px 0 0; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 11px; font-size: 15px; color: var(--ink-2); }
.ticks li { display: flex; gap: 12px; }
.ticks li::before { content: ""; flex: 0 0 6px; height: 6px; margin-top: 9px; border-radius: 50%; background: var(--tint, var(--ink)); }

.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-2); }
.rows li { display: flex; flex-wrap: wrap; gap: 6px 28px; padding: 24px 0; border-bottom: 1px solid var(--rule-2); }
.rows strong { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.2; flex: 0 0 230px; }
.rows span { color: var(--muted); flex: 1 1 240px; }

.serve { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 40px 32px; }
.serve svg { width: 28px; height: 28px; stroke: var(--ink); fill: none; stroke-width: 1.4; margin-bottom: 20px; }
.serve h3 { font-size: 28px; margin-bottom: 8px; }

/* Capability blocks on the three "What we build" pages. */
.cap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); padding: clamp(44px, 5vw, 64px) 0; border-top: 1px solid var(--rule-2); scroll-margin-top: 24px; }
.cap:last-child { border-bottom: 1px solid var(--rule-2); }
.cap .kicker { margin-bottom: 14px; }
.cap h3 { font-size: clamp(32px, 3vw, 44px); }
.cap .lead { margin-top: 16px; color: var(--muted); font-size: 18px; }
.cap .ticks { border-top: 0; padding-top: 6px; font-size: 16px; gap: 14px; }
.cap .example { margin-top: 26px; padding: 18px 20px; border-left: 2px solid var(--tint, var(--ink)); background: var(--paper); border-radius: 0 12px 12px 0; font-size: 15px; color: var(--ink-2); }
.cap .example b { display: block; margin-bottom: 4px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); font-weight: 600; }

/* ---------- 9. Steps ------------------------------------------------------ */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); position: relative; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--spectrum); }
.steps li { padding: 30px 26px 0 0; }
.steps .n { margin-bottom: 44px; }
.steps h3 { margin-bottom: 12px; }
.steps p { font-size: 15px; color: var(--muted); }

/* Detailed phases on the Approach page. */
.phase { display: grid; grid-template-columns: 120px minmax(0, 5fr) minmax(0, 6fr); gap: clamp(20px, 4vw, 64px); padding: clamp(40px, 5vw, 64px) 0; border-top: 1px solid var(--rule-2); scroll-margin-top: 24px; }
.phase:last-of-type { border-bottom: 1px solid var(--rule-2); }
.phase .n { font-family: var(--serif); font-size: 64px; line-height: .9; color: var(--tint, var(--ink)); }
.phase h3 { font-size: clamp(34px, 3.2vw, 48px); }
.phase .lead { margin-top: 14px; color: var(--muted); font-size: 18px; }
.phase dl { display: grid; gap: 18px; }
.phase dt { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.phase dd { margin-top: 4px; color: var(--ink-2); }

/* ---------- 10. Stats & sources ------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 22px; overflow: hidden; margin-top: 56px; }
.stat { background: #fff; padding: 38px 34px; }
.stat .big { display: block; margin-bottom: 20px; font-family: var(--serif); font-size: clamp(64px, 6.4vw, 96px); line-height: .9; }
.stat p { color: var(--muted); }
.stat .src { margin-top: 16px; font-size: 12px; letter-spacing: .04em; color: var(--dim); }
.stat .src a { color: inherit; }

/* ---------- 11. FAQ ------------------------------------------------------- */
.faq { border-top: 1px solid var(--rule-2); }
.faq details { border-bottom: 1px solid var(--rule-2); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 26px 0; cursor: pointer; list-style: none;
  font-family: var(--serif); font-size: clamp(23px, 2vw, 30px); line-height: 1.2;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--sans); font-size: 26px; font-weight: 300; color: var(--muted); transition: transform .25s var(--ease); flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 0 28px; max-width: 760px; color: var(--ink-2); }
.faq .answer p + p { margin-top: .8em; }

/* ---------- 12. Contact form ---------------------------------------------- */
.contact-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.contact-form { border: 1px solid var(--rule); border-radius: 24px; padding: clamp(24px, 3.4vw, 44px); background: #fff; box-shadow: 0 30px 70px -50px rgba(14,14,14,.35); }
.form-rows { display: grid; gap: 20px; }
.form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.field .opt { color: var(--dim); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid #8A867F; background: #fff;
  font-size: 16px; transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(62,91,216,.18); }
.form-foot { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.form-note { font-size: 14px; color: var(--muted); max-width: 360px; }
.aside-card { border: 1px solid var(--rule); border-radius: 24px; padding: clamp(24px, 3vw, 36px); background: var(--paper); }
.aside-card h2 { font-size: clamp(32px, 3vw, 42px); margin-bottom: 20px; }
.next { list-style: none; margin: 0; padding: 0; counter-reset: next; display: grid; gap: 20px; }
.next li { counter-increment: next; display: grid; grid-template-columns: 34px 1fr; gap: 12px; }
.next li::before { content: counter(next); width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--ink); display: grid; place-items: center; font-size: 14px; font-weight: 600; }
.next b { display: block; font-weight: 600; }
.next span { color: var(--muted); font-size: 15px; }

/* ---------- 13. Call to action & footer ----------------------------------- */
.cta {
  position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(48px, 8vw, 120px) var(--pad);
  background: var(--paper);
}
.cta::before {
  content: ""; position: absolute; z-index: -1; right: -12%; top: 6%; width: 68%; height: 88%;
  background: linear-gradient(168deg, transparent 18%, rgba(215,53,79,.32) 34%, rgba(238,127,106,.3) 43%, rgba(233,162,75,.28) 50%, rgba(255,255,255,.6) 55%, rgba(25,184,214,.3) 63%, rgba(62,91,216,.28) 72%, transparent 84%);
  filter: blur(50px);
}
.cta h2 { max-width: 780px; }
.cta p { margin-top: 22px; max-width: 520px; color: var(--muted); font-size: 18px; }
.cta .ctas { margin-top: 34px; }

.site-footer { padding: clamp(64px, 8vw, 96px) 0 48px; font-size: 15px; color: var(--muted); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; }
.footer-brand p { margin-top: 16px; max-width: 340px; }
.footer-col h2 { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); margin-bottom: 16px; line-height: 1.4; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col a { text-decoration: none; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; padding-top: 28px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--dim); }

/* ---------- 16. Homepage components ---------------------------------------
   Six sections, written and sized for owners 40+ who are not technical
   (after the GPT-6 Astra review): large type, no micro-labels, no jargon. */
.center { text-align: center; }
.center h2, .center > p { margin-left: auto; margin-right: auto; }
.sub { margin-top: 16px; max-width: 640px; font-size: 19px; color: var(--muted); }
.narrow-wrap { max-width: 860px; }
.pill { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; margin-bottom: 24px; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--rule); background: #fff; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.pill .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(215,53,79,.14); }
.hero-home .lede { font-size: clamp(19px, 1.5vw, 22px); max-width: 620px; color: var(--ink-2); }
.hero-home .ctas { margin-top: 32px; }
.hero-home .btn-ghost { background: #fff; }
.next-step { margin-top: 16px; font-size: 16px; color: var(--muted); }

/* Hero examples: the cards the coloured flows run to. */
.examples { position: absolute; z-index: 1; right: var(--pad); top: 0; bottom: 0; width: min(330px, 25vw); padding: 104px 0 64px; display: flex; flex-direction: column; justify-content: center; }
.examples-k { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.fan-pause { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rule-2); background: #fff; font-size: 14px; font-weight: 500; cursor: pointer; }
.fan-pause:hover { border-color: var(--ink); }
.examples .agents { position: static; width: auto; padding: 0; gap: 10px; }

.area-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 52px; }
.area-card { border: 1px solid var(--rule); border-top: 3px solid var(--c); border-radius: 18px; padding: 26px 26px 28px; background: #fff; }
.area-card h3 { display: flex; align-items: center; gap: 10px; font-size: clamp(26px, 2.2vw, 31px); }
.area-card h3 .dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.area-card .help { margin-top: 10px; font-size: 18px; color: var(--ink); }
.area-card ul { margin: 16px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 17px; color: var(--muted); }
.area-card li::marker { color: var(--t); }

.timeline { list-style: none; margin: 56px auto 0; padding: 0; max-width: 820px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 25px; top: 10px; bottom: 10px; width: 2px; background: var(--rule-2); }
.tl-step { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 24px; padding: 0 0 40px; }
.tl-step:last-child { padding-bottom: 0; }
.tl-ic { position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: #fff; border: 1px solid var(--rule); color: var(--c); }
.tl-ic svg { width: 24px; height: 24px; }
.tl-n { font-size: 15px; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.tl-step h3 { font-size: 32px; margin-bottom: 6px; }
.tl-step p { font-size: 18px; color: var(--ink-2); max-width: 600px; }
.trust-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 52px auto 0; max-width: 820px; }
.trust-pair p { display: flex; gap: 14px; align-items: flex-start; padding: 20px 22px; border-radius: 16px; border: 1px solid var(--rule); background: #fff; color: var(--ink-2); font-size: 17px; }
.trust-pair svg { flex: none; width: 22px; height: 22px; margin-top: 2px; padding: 3px; border-radius: 50%; background: var(--paper); color: var(--ink); }
.build-cards { margin-top: 48px; }
.build-cards .lead { font-size: 18px; }

.go-card { position: relative; overflow: hidden; isolation: isolate; max-width: 900px; margin: 0 auto; padding: clamp(44px, 6vw, 80px) clamp(24px, 5vw, 72px); border-radius: 28px; border: 1px solid var(--rule); background: #fff; text-align: center; }
.go-card::before { content: ""; position: absolute; z-index: -1; inset: auto -10% -40% -10%; height: 70%; background: linear-gradient(90deg, rgba(215,53,79,.16), rgba(238,127,106,.14), rgba(233,162,75,.14), rgba(25,184,214,.14), rgba(62,91,216,.16)); filter: blur(50px); }
.go-card h2 { font-size: clamp(40px, 5vw, 68px); }
.go-card > p.muted { margin: 18px auto 30px; max-width: 580px; font-size: 19px; }
.go-card .small { margin-top: 18px; font-size: 17px; color: var(--muted); }

.faq-num { margin-top: 40px; border: 1px solid var(--rule); border-radius: 20px; background: #fff; padding: 0 26px; }
.faq-num details { border-bottom: 1px solid var(--rule); }
.faq-num details:last-child { border-bottom: 0; }
.faq-num summary { font-family: var(--sans); font-weight: 600; font-size: 19px; padding: 22px 0; }
.faq-num .answer { padding: 0 0 24px; font-size: 18px; color: var(--ink-2); }

/* ---------- 14. Responsive ------------------------------------------------ */
@media (max-width: 1100px) {
  .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .examples { position: relative; right: auto; top: auto; bottom: auto; width: min(460px, 62%); margin: 4px var(--pad) 36px auto; padding: 0; }
  .agent-label { display: none; }
}
@media (max-width: 1000px) {
  .contact-layout { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .phase { grid-template-columns: 1fr; gap: 14px; }
  .phase .n { font-size: 48px; }
  .cap { grid-template-columns: 1fr; gap: 20px; }
}
/* 920px: mobile drawer — keep in step with DESKTOP_MIN in app.js. */
@media (max-width: 920px) {
  .nav-toggle { display: inline-flex; position: relative; z-index: 31; }
  html.js-ready .nav {
    position: fixed; inset: 0; z-index: 30; display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 96px 24px 32px; background: #fff; overflow-y: auto;
  }
  html.js-ready .nav.open { display: flex; }
  html:not(.js-ready) .nav { flex-wrap: wrap; justify-content: flex-end; gap: 6px 18px; }
  html:not(.js-ready) .nav-toggle { display: none; }
  .nav > a, .nav-trigger { font-size: 15px; padding: 18px 0; border-bottom: 1px solid var(--rule); text-align: left; width: 100%; justify-content: space-between; }
  .nav > a[aria-current="page"] { box-shadow: none; }
  .nav .nav-cta { margin-top: 24px; justify-content: center; text-align: center; border: 0; padding: 16px; font-size: 17px; }
  .nav-menu { position: static; translate: none; width: auto; border: 0; box-shadow: none; padding: 0 0 8px; }
  .site-header .brand { position: relative; z-index: 31; }
}
@media (max-width: 760px) {
  .area-grid, .trust-pair { grid-template-columns: 1fr; }
  .hero-home .ctas .btn { flex: 1 1 auto; }
  .examples { width: 72%; }
  body { font-size: 16px; }
  .hero { min-height: 0; }
  .hero-body { justify-content: flex-start; padding-top: 52px; }
  .strip li:nth-child(n+3) { display: none; }
  .page-hero { min-height: 0; }
  .page-hero .hero-art { display: none; }
  .page-hero .hero-body { padding-top: 48px; }
  .page-hero::after { content: ""; position: absolute; left: var(--pad); right: var(--pad); bottom: 0; height: 2px; background: var(--spectrum); }
  .form-pair { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .rows strong { flex-basis: 100%; }
}

/* ---------- 15. Reduced motion -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  a.card:hover { transform: none; }
}