@font-face{font-family:Manrope;src:url("/assets/fonts/manrope-variable.ttf") format("truetype");font-style:normal;font-weight:200 800;font-display:swap}
/* Phontix AI website — design tokens and components
   See docs/DESIGN-SYSTEM.md for the reasoning behind each choice. */

:root {
  --paper: #fbfaf6;
  --mist: #f0f4ef;
  --mist-2: #e1ebe5;
  --line: #d1dfd8;
  --line-strong: #6e8583;
  --ink: #132f35;
  --body: #3b5559;
  --muted: #55676a;
  /* Petrol and mineral teal ground the research-led interface. Jade gradients
     distinguish visual data flows; links and small text use the darker teal. */
  --brand-teal: #006b64;
  --brand-jade: #16978b;
  --brand-grad: linear-gradient(135deg, var(--brand-teal) 0%, var(--brand-jade) 100%);
  --link: #006b64;
  --btn: #006b64;
  --btn-hover: #00564f;
  --btn-text: #ffffff;
  --focus: #006b64;
  --band: #132f35;
  --band-body: #c3d5d1;
  --band-link: #c8eee4;
  --band-hover: #e1f1e9;

  --loe: var(--link);
  --pf: var(--link);
  --bl: var(--link);
  --accent: var(--link);

  --ok: #0e7a43; --ok-bg: #e6f4ec;
  --warn: #8a5a00; --warn-bg: #fff3d6;
  --risk: #a4361f; --risk-bg: #fbe7e1;
  --gap: #9b1c2e; --gap-bg: #fbe6e9;
  --info: #006b64; --info-bg: #e0f1e9;

  --serif: var(--sans);
  --sans: "Manrope", "Segoe UI", system-ui, sans-serif;

  --maxw: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --shadow-frame: 0 1px 0 rgba(19, 47, 53, .04), 0 24px 60px -28px rgba(19, 47, 53, .35);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --paper: #0b1d22;
  --mist: #10292f;
  --mist-2: #17383d;
  --line: #29494c;
  --line-strong: #6b9392;
  --ink: #f0f7f4;
  --body: #c3d5d1;
  --muted: #92ada8;
  --brand-teal: #78d7c5;
  --brand-jade: #4fb6a1;
  --link: #78d7c5;
  --btn: #78d7c5;
  --btn-hover: #a0e7d8;
  --btn-text: #09221f;
  --focus: #78d7c5;
  --band: #081a1f;
  --band-body: #b3cec6;
  --loe: var(--link);
  --pf: var(--link);
  --bl: var(--link);
  --ok: #6fd4a0; --ok-bg: rgba(111, 212, 160, .12);
  --warn: #f1c46b; --warn-bg: rgba(241, 196, 107, .12);
  --risk: #f39a82; --risk-bg: rgba(243, 154, 130, .12);
  --gap: #f58a9c; --gap-bg: rgba(245, 138, 156, .12);
  --info: #78d7c5; --info-bg: rgba(120, 215, 197, .12);
  --shadow-frame: 0 24px 60px -30px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

.theme-loe { --accent: var(--loe); }
.theme-pf { --accent: var(--pf); }
.theme-bl { --accent: var(--bl); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  font-feature-settings: "tnum" 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: var(--r-sm); z-index: 200; }
.skip:focus { left: 12px; }

h1, h2, h3, h4 { color: var(--ink); margin: 0 0 .5em; }
h1, h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -.012em; font-optical-sizing: auto; }
h1 { font-size: clamp(2.3rem, 4.4vw, 3.55rem); line-height: 1.08; max-width: 20ch; }
h2 { font-size: clamp(1.65rem, 2.7vw, 2.25rem); line-height: 1.15; max-width: 28ch; }
h3 { font-family: var(--sans); font-size: 1.12rem; font-weight: 600; line-height: 1.35; letter-spacing: -.003em; }
h4 { font-family: var(--sans); font-size: 1rem; font-weight: 600; }
p { margin: 0 0 1em; max-width: 68ch; }
.lede { font-size: 1.18rem; line-height: 1.6; color: var(--body); max-width: 60ch; }
.small { font-size: .9rem; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums lining-nums; }
ul, ol { padding-left: 1.2em; }
li { margin-bottom: .35em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(42px, 5.4vw, 72px); }
.section.tight { padding-block: clamp(34px, 4.2vw, 54px); }
.section.mist { background: var(--mist); }
.section + .section:not(.mist):not(.band) { border-top: 1px solid var(--line); }
.band { background: var(--band); color: var(--band-body); }
.band h2, .band h3 { color: #fff; }
.band a:not(.btn) { color: var(--band-link); }

.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.split.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.split.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
@media (max-width: 900px) { .split, .split.even, .split.flip { grid-template-columns: 1fr; } }
/* A single-column grid track is auto-sized, so a 1600px screenshot inside one
   forces the track wider than the viewport and the whole page scrolls sideways.
   min-width:0 lets the track shrink so .frame img's width:100% resolves correctly. */
.split > *, .cols-3 > * { min-width: 0; }
.frame img { max-width: 100%; }
.stack > * + * { margin-top: 1rem; }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 900px) { .cols-3 { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .cols-2 { grid-template-columns: 1fr; } }
.sec-head { margin-bottom: clamp(28px, 4vw, 48px); }
.sec-head p { color: var(--muted); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; gap: 24px; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: none; }
.brand img { width: auto; height: calc(2.14rem + 3px); flex-shrink: 0; } /* Name + tagline line heights and their gap. */
.brand > span { display: flex; flex-direction: column; }
.brand-mark-dark { display: none; }
:root[data-theme="dark"] .brand-mark-light { display: none; }
:root[data-theme="dark"] .brand-mark-dark { display: block; }
.brand-name { font-weight: 600; font-size: 1.12rem; letter-spacing: -.01em; line-height: 1; color: var(--brand-teal); }
.brand-tag { display: block; font-size: .68rem; line-height: 1.5; color: var(--muted); letter-spacing: .02em; margin-top: 3px; font-weight: 500; }
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.nav-links > li { position: relative; margin: 0; }
.nav-links > li > a, .nav-links > li > button {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; border-radius: var(--r-sm);
  color: var(--ink); font: 500 .95rem/1 var(--sans); text-decoration: none; background: none; border: 0; cursor: pointer;
}
.nav-links > li > a:hover, .nav-links > li > button:hover, .nav-links > li > a[aria-current="page"] { background: var(--mist); }
.nav-links > li > a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--brand-teal); border-radius: var(--r-sm) var(--r-sm) 0 0; }
.caret { width: 10px; height: 10px; transition: transform .15s; }
.menu {
  position: absolute; top: calc(100% + 8px); left: -8px; width: 360px; list-style: none; margin: 0; padding: 8px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: 0 24px 50px -24px rgba(19,47,53,.35);
  display: none;
}
.has-menu.open .menu { display: block; }
.has-menu.open .caret { transform: rotate(180deg); }
.menu a { display: grid; grid-template-columns: 4px 1fr; column-gap: 12px; padding: 10px 12px; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; }
.menu a:hover { background: var(--mist); }
.menu .rule { grid-row: span 2; border-radius: 4px; background: var(--accent); }
.menu strong { font-weight: 600; font-size: .95rem; }
.menu span.d { color: var(--muted); font-size: .84rem; line-height: 1.35; }
.nav-tools { display: flex; align-items: center; gap: 8px; }
.icon-btn { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: var(--r-sm); border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; }
.icon-btn:hover { background: var(--mist); }
.icon-btn svg { width: 18px; height: 18px; }
.theme-icon-dark { display: none; }
:root[data-theme="dark"] .theme-icon-dark { display: block; }
:root[data-theme="dark"] .theme-icon-light { display: none; }
.burger { display: none; }
@media (max-width: 1060px) {
  body.nav-open .site-header { backdrop-filter: none; background: var(--paper); }
  .burger { display: inline-grid; }
  .nav-links { display: none; position: fixed; inset: 72px 0 0 0; background: var(--paper); flex-direction: column; align-items: stretch; padding: 16px var(--gutter) 32px; overflow-y: auto; gap: 2px; }
  body.nav-open .nav-links { display: flex; }
  .nav-links > li > a, .nav-links > li > button { width: 100%; padding: 14px 8px; font-size: 1.05rem; justify-content: space-between; }
  .menu { position: static; width: auto; box-shadow: none; border: 0; padding: 0 0 8px 8px; display: block; }
  .nav .nav-cta { display: none; }
  body.nav-open .nav-links .mobile-cta { display: block; margin-top: 16px; }
}
.nav-links .mobile-cta { display: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 11px 20px;
  border-radius: var(--r-sm); border: 1px solid transparent; background: var(--btn); color: var(--btn-text);
  font: 600 .98rem/1.1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--btn-hover); text-decoration: none; }
.btn.secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn.secondary:hover { border-color: var(--ink); background: transparent; }
.band .btn.secondary { color: #fff; border-color: rgba(255,255,255,.35); }
.band .btn.secondary:hover { border-color: #fff; }
.band .btn:not(.secondary) { background: #fbfaf6; color: #132f35; }
.band .btn:not(.secondary):hover { background: var(--band-hover); }
.btn.small { min-height: 38px; padding: 8px 14px; font-size: .9rem; }
.btn[disabled] { opacity: .6; cursor: progress; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }
.text-link { font-weight: 600; text-decoration: none; color: var(--link); }
.text-link:hover { text-decoration: underline; }

/* ---------- chips ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; line-height: 1.5; border: 1px solid transparent; white-space: nowrap; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.plain::before { display: none; }
.chip.ok { color: var(--ok); background: var(--ok-bg); }
.chip.warn { color: var(--warn); background: var(--warn-bg); }
.chip.risk { color: var(--risk); background: var(--risk-bg); }
.chip.gap { color: var(--gap); background: var(--gap-bg); }
.chip.info { color: var(--info); background: var(--info-bg); }
.chip.neutral { color: var(--muted); background: var(--mist); border-color: var(--line); }
.chip.accent { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: var(--paper); }

/* ---------- breadcrumb ---------- */
.crumbs { font-size: .88rem; color: var(--muted); margin-bottom: 18px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.crumbs li { margin: 0; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line-strong); }
.crumbs a { color: var(--muted); }

/* ---------- hero ---------- */
.hero { padding-block: clamp(48px, 7vw, 96px) clamp(48px, 6vw, 88px); }
.hero .split { align-items: center; }
.hero-note { margin-top: 28px; font-size: .92rem; color: var(--muted); max-width: 52ch; }
.page-hero { padding-block: clamp(40px, 6vw, 80px) clamp(36px, 5vw, 64px); background: var(--mist); border-bottom: 1px solid var(--line); }
.page-hero.accented { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--mist)) 0%, var(--mist) 100%); }
/* The product kicker is a rule, a name and an availability chip on one line.
   At phone width the three together exceed the viewport, so it wraps rather
   than pushing the page sideways. */
.page-hero .kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.page-hero .kicker .chip { white-space: normal; }
.product-rule { display: inline-block; width: 28px; height: 4px; border-radius: 4px; background: var(--accent); }

/* annotated screenshot: the one bold device on the site */
.frame { position: relative; border-radius: var(--r-lg); border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-frame); overflow: hidden; }
.frame img { width: 100%; }
.frame figcaption { font-size: .82rem; color: var(--muted); padding: 10px 14px; border-top: 1px solid var(--line); background: var(--paper); }
.annotated { position: relative; }
.annotated .frame { overflow: visible; }
.annotated .frame img { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.callout {
  position: absolute; display: flex; align-items: flex-start; gap: 10px; max-width: 250px;
  background: var(--paper); color: var(--body); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  padding: 10px 12px; font-size: .82rem; line-height: 1.4; box-shadow: 0 14px 30px -18px rgba(19,47,53,.5);
}
.callout b { display: block; color: var(--ink); font-weight: 600; font-size: .86rem; margin-bottom: 2px; }
.callout .pin { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-weight: 600; font-size: .75rem; }
.callout::after { content: ""; position: absolute; width: var(--leader, 40px); height: 1px; background: var(--ink); top: 21px; opacity: .6; }
.callout.left::after { right: calc(-1 * var(--leader, 40px)); }
.callout.right::after { left: calc(-1 * var(--leader, 40px)); }
@media (prefers-reduced-motion: no-preference) {
  .js .annotated .callout { opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease; }
  .js .annotated.ready .callout { opacity: 1; transform: none; }
  .js .annotated.ready .callout:nth-of-type(2) { transition-delay: .35s; }
  .js .annotated.ready .callout:nth-of-type(3) { transition-delay: .7s; }
}
@media (max-width: 1100px) {
  .callout { position: static; max-width: none; margin-top: 10px; box-shadow: none; }
  .callout::after { display: none; }
  .annotated .callouts { display: grid; gap: 8px; margin-top: 12px; }
}
.exhibit { margin: clamp(40px, 6vw, 72px) auto 0; max-width: 600px; }
.exhibit .callout.left { left: -290px; width: 250px; --leader: 40px; }
.exhibit .callout.right { right: -290px; width: 250px; --leader: 40px; }
.placeholder-shot { aspect-ratio: 16 / 10; display: grid; place-items: center; text-align: center; padding: 32px; background: repeating-linear-gradient(135deg, var(--mist) 0 12px, var(--mist-2) 12px 24px); color: var(--muted); font-size: .92rem; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.placeholder-shot strong { display: block; color: var(--ink); margin-bottom: 6px; }

/* ---------- product list rows (home) ---------- */
.product-rows { border-top: 1px solid var(--line); }
.product-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: 28px; padding: 32px 0; border-bottom: 1px solid var(--line); position: relative; }
.product-row::before { content: ""; position: absolute; left: calc(-1 * clamp(10px, 1.6vw, 22px)); top: 34px; bottom: 34px; width: 3px; border-radius: 3px; background: var(--accent); }
.product-row h3 { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; margin-bottom: 6px; }
.product-row .who { color: var(--muted); font-size: .95rem; margin: 0; }
.product-row .links { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
@media (max-width: 900px) { .product-row { grid-template-columns: 1fr; gap: 12px; } .product-row::before { left: -12px; } }

/* ---------- sequence / chain ---------- */
.chain { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(var(--steps, 5), minmax(0, 1fr)); counter-reset: step; border-top: 2px solid var(--ink); }
.chain > li { margin: 0; padding: 18px 18px 4px 0; counter-increment: step; position: relative; }
.chain > li + li { padding-left: 18px; border-left: 1px solid var(--line); }
.chain > li::before { content: counter(step); display: block; font-family: var(--serif); font-size: 1.6rem; font-weight: 600; color: var(--accent); line-height: 1; margin-bottom: 10px; }
.chain h3 { font-size: 1rem; margin-bottom: 6px; }
.chain p { font-size: .92rem; color: var(--muted); margin: 0; }
@media (max-width: 1000px) { .chain { grid-template-columns: 1fr 1fr; } .chain > li { border-left: 0 !important; padding-left: 0 !important; border-bottom: 1px solid var(--line); } }
@media (max-width: 560px) { .chain { grid-template-columns: 1fr; } }

/* ---------- feature list ---------- */
.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.feature { padding: 22px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 28px 1fr; gap: 14px; }
.feature svg { width: 24px; height: 24px; color: var(--accent); margin-top: 2px; }
.feature h3 { margin-bottom: 4px; font-size: 1.02rem; }
.feature p { margin: 0; font-size: .95rem; color: var(--muted); }
@media (max-width: 760px) { .features { grid-template-columns: 1fr; } }

/* ---------- tables ---------- */
.table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; color: var(--ink); background: var(--mist); font-size: .88rem; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
caption { caption-side: bottom; text-align: left; padding: 10px 16px; font-size: .84rem; color: var(--muted); }

/* ---------- quote rule ---------- */
.rule-quote { border-left: 3px solid var(--accent); padding: 6px 0 6px 24px; margin: 0; }
.rule-quote p { font-family: var(--serif); font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.35; color: var(--ink); max-width: 44ch; margin: 0 0 10px; }
.rule-quote cite { font-style: normal; font-size: .88rem; color: var(--muted); }

/* ---------- lists: will / won't ---------- */
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); margin: 0; }
.checklist li:last-child { border-bottom: 0; }
.checklist svg { width: 20px; height: 20px; margin-top: 3px; }
.checklist.yes svg { color: var(--ok); }
.checklist.no svg { color: var(--gap); }

/* ---------- source classes ---------- */
.source-class { padding: 22px 0; border-top: 1px solid var(--line); }
.source-class h3 { display: flex; justify-content: space-between; gap: 12px; }
.names { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.names span { font-size: .8rem; padding: 3px 8px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--mist); color: var(--body); }

/* ---------- locked teaser ---------- */
.locked { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--paper); display: flex; flex-direction: column; }
.locked .open { padding: 22px 22px 8px; }
.locked .veiled { padding: 4px 22px 18px; flex: 1; }
.locked .veiled ul { filter: blur(4px); opacity: .55; user-select: none; margin: 8px 0 0; font-size: .9rem; }
.locked .bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 22px; background: var(--mist); border-top: 1px solid var(--line); font-size: .9rem; }

/* ---------- people ---------- */
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.person { display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: start; }
.avatar { width: 96px; height: 96px; border-radius: 50%; background: var(--mist-2); display: grid; place-items: center; font-family: var(--serif); font-size: 1.8rem; color: var(--ink); border: 1px solid var(--line); overflow: hidden; }
.person h3 { font-family: var(--serif); font-size: 1.4rem; margin-bottom: 2px; }
.person .role { color: var(--muted); font-size: .92rem; margin-bottom: 10px; }
@media (max-width: 800px) { .people { grid-template-columns: 1fr; } .person { grid-template-columns: 72px 1fr; } .avatar { width: 72px; height: 72px; font-size: 1.4rem; } }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.facts > div { padding: 18px 20px 0 0; }
.facts > div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.facts .v { font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--ink); line-height: 1.1; font-weight: 600; }
.facts .l { font-size: .9rem; color: var(--muted); margin-top: 6px; }
.band .facts { border-top-color: rgba(255,255,255,.6); }
.band .facts > div + div { border-left-color: rgba(255,255,255,.18); }
.band .facts .v { color: #fff; }
.band .facts .l { color: var(--band-body); }
@media (max-width: 700px) { .facts { grid-template-columns: 1fr; } .facts > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); margin-top: 12px; } }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; font-weight: 600; color: var(--ink); font-size: 1.04rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 26px; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; }
.faq details[open] summary::after { transform: rotate(-135deg); top: 30px; }
.faq .answer { padding: 0 0 20px; }
.faq .answer p:last-child { margin-bottom: 0; }

/* ---------- CTA band ---------- */
.cta-band { padding-block: clamp(56px, 7vw, 96px); }
.cta-band .split { align-items: end; }
.cta-band p { color: var(--band-body); }

/* ---------- article cards ---------- */
.article-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.article-list li { margin: 0; border-bottom: 1px solid var(--line); }
.article-list a { display: grid; grid-template-columns: 150px 1fr; gap: 24px; padding: 24px 0; text-decoration: none; color: inherit; }
.article-list a:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; }
.article-list .meta { font-size: .88rem; color: var(--muted); }
.article-list h3 { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.article-list p { margin: 0; color: var(--muted); }
@media (max-width: 700px) { .article-list a { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- prose ---------- */
.prose { max-width: 70ch; }
.prose h2 { margin-top: 2em; font-size: 1.7rem; }
.prose h3 { margin-top: 1.6em; }
.prose p, .prose li { font-size: 1.07rem; line-height: 1.72; }
.prose blockquote { margin: 1.5em 0; padding-left: 20px; border-left: 3px solid var(--accent); color: var(--ink); font-family: var(--serif); font-size: 1.2rem; }
.prose table { font-size: .92rem; margin: 1.4em 0; }
.prose .table-wrap { margin: 1.4em 0; }
.summary-box, .note-box { border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px 24px; background: var(--mist); margin: 1.6em 0; }
.summary-box h2, .note-box h2 { font-family: var(--sans); font-size: 1rem; font-weight: 600; margin: 0 0 8px; }
.summary-box p:last-child, .note-box p:last-child, .note-box ul:last-child { margin-bottom: 0; }
.draft-flag { display: inline-block; font-size: .8rem; font-weight: 600; color: var(--warn); background: var(--warn-bg); padding: 2px 8px; border-radius: 4px; }

/* ---------- forms ---------- */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.form .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 600; font-size: .9rem; color: var(--ink); }
.field .opt { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
  font: 400 1rem/1.4 var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); padding: 11px 12px; width: 100%; min-height: 46px;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid color-mix(in srgb, var(--focus) 35%, transparent); border-color: var(--focus); }
.field .err { display: none; color: var(--gap); font-size: .85rem; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--gap); }
.field.invalid .err { display: block; }
.consent { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: .92rem; }
.consent input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--brand-teal); }
.hp { position: absolute; left: -9999px; }
.form-status { grid-column: 1 / -1; display: none; border-radius: var(--r-sm); padding: 12px 14px; font-size: .95rem; }
.form-status.ok { display: block; background: var(--ok-bg); color: var(--ok); }
.form-status.fail { display: block; background: var(--gap-bg); color: var(--gap); }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 32px); }

/* ---------- steps (what happens next) ---------- */
.steps { list-style: none; padding: 0; margin: 0; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 12px 0; margin: 0; }
.steps li::before { content: counter(s); width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; font-weight: 600; font-size: .9rem; color: var(--ink); }

/* ---------- pricing ---------- */
.tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); }
.tabs button { border: 0; background: none; font: 600 .95rem/1 var(--sans); padding: 11px 18px; border-radius: 999px; color: var(--body); cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 32px; align-items: stretch; }
.plan { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; background: var(--paper); }
.plan.emph { border: 2px solid var(--accent); }
.plan h3 { font-family: var(--serif); font-size: 1.5rem; margin-bottom: 4px; }
.plan .for { color: var(--muted); font-size: .92rem; min-height: 2.8em; }
.plan .price { font-family: var(--serif); font-size: 2.3rem; color: var(--ink); line-height: 1; margin: 18px 0 4px; font-variant-numeric: tabular-nums; }
.plan .price small { font-family: var(--sans); font-size: .9rem; color: var(--muted); }
.plan .billing { font-size: .88rem; color: var(--muted); margin-bottom: 18px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; }
.plan li { padding: 8px 0 8px 24px; border-top: 1px solid var(--line); font-size: .94rem; position: relative; margin: 0; }
.plan li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 10px; height: 6px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.plan .btn { width: 100%; }
@media (max-width: 960px) { .plans { grid-template-columns: 1fr; } .plan.emph { order: -1; } }
.draft-price { display: inline-flex; margin-left: 8px; vertical-align: middle; }
.plans-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.plans-strip > div { padding: 20px 22px; background: var(--paper); }
.plans-strip > div + div { border-left: 1px solid var(--line); }
.plans-strip .p { font-family: var(--serif); font-size: 1.5rem; color: var(--ink); }
@media (max-width: 760px) { .plans-strip { grid-template-columns: 1fr; } .plans-strip > div + div { border-left: 0; border-top: 1px solid var(--line); } }

/* ---------- demo page ---------- */
.demo-shell { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--paper); box-shadow: var(--shadow-frame); }
.demo-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--mist); font-size: .88rem; }
.demo-frame { width: 100%; height: min(86vh, 900px); border: 0; display: block; background: #f9f9f7; }
.gate { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding: clamp(24px, 4vw, 48px); }
@media (max-width: 860px) { .gate { grid-template-columns: 1fr; } }
.demo-teaser { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #000; border: 1px solid var(--line-strong); border-radius: 0; }
.mobile-only { display: none; }
@media (max-width: 760px) { .desktop-only { display: none !important; } .mobile-only { display: block; } }

/* ---------- footer ---------- */
.site-footer { background: var(--band); color: var(--band-body); padding-block: 64px 32px; font-size: .95rem; }
.site-footer a { color: var(--band-link); text-decoration: none; }
.site-footer .linklike { background: none; border: 0; padding: 0; color: var(--band-link); font: inherit; cursor: pointer; }
.site-footer a:hover { text-decoration: underline; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
.foot-grid h2 { font-family: var(--sans); font-size: .9rem; font-weight: 600; color: #fff; margin-bottom: 12px; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; }
.foot-grid li { margin-bottom: 8px; }
.foot-brand .brand { color: #fff; }
.foot-brand .brand-name { color: #78d7c5; }
.foot-brand .brand-tag { color: var(--band-body); }
.foot-legal { margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .85rem; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }

/* ---------- cookie banner ---------- */
.cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 150; max-width: 560px; background: var(--paper); color: var(--body); border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 18px; box-shadow: 0 24px 60px -24px rgba(19,47,53,.5); display: none; }
.cookie.show { display: block; }
.cookie p { font-size: .92rem; margin-bottom: 12px; }
.cookie .actions { margin-top: 0; gap: 8px; }

/* ---------- utilities ---------- */
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 12px; } .mt-2 { margin-top: 24px; } .mt-3 { margin-top: 40px; }
.mb-0 { margin-bottom: 0; }
.center { text-align: center; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.divergence-bands { list-style: none; padding: 0; margin: 0; }
.divergence-bands li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); margin: 0; }
.divergence-bands li:last-child { border-bottom: 0; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; }
.kv dt { font-weight: 600; color: var(--ink); }
.kv dd { margin: 0; }
@media print { .site-header, .site-footer, .cookie, .no-print { display: none !important; } body { background: #fff; color: #000; } }
.field label.consent { font-weight: 400; font-size: .92rem; color: var(--body); }
.kicker .small { white-space: nowrap; }
.divergence-bands .chip, .kv dt .chip { justify-self: start; align-self: start; }
.stack > .form { margin-top: 12px; }


/* ===========================================================================
   RESOURCES — articles, blogs and case studies
   The nine pieces were designed as standalone editorial pages. This restores
   that design inside the site's chrome and on the site's palette.
   =========================================================================== */

/* ---- chart tokens -------------------------------------------------------
   The exhibits are inline SVG that style themselves through these names. They
   are declared here, and redeclared for dark, because an SVG cannot inherit a
   theme it was never told about: without this, chart text falls back to black
   and axis strokes to none, which is invisible on navy and invisible-ish on
   white. Shades are picked per theme rather than shared, so a bar that reads
   as a light tint on paper reads as a light tint on navy too. */
.resource-body {
  --c-ink: var(--ink);
  --c-muted: var(--muted);
  --c-rule: var(--line);
  --c-track: var(--mist-2);
  --c-teal: var(--brand-teal);
  --c-jade: var(--brand-jade);
  --c-warn: #B45309;
  --c-ok: #0e7a43;
  /* aliases, because the exhibits were authored against these names */
  --track: var(--c-track);
  --teal: var(--c-teal);
  --jade: var(--c-jade);
  --text: var(--c-ink);
  --rule: var(--c-rule);
  --risk: var(--c-warn);
  --gap: var(--c-muted);
}
:root[data-theme="dark"] .resource-body {
  --c-track: var(--mist-2);
  --c-warn: #f1c46b;
  --c-ok: #4cc98a;
}

.resource-body svg.chart { width: 100%; height: auto; display: block; overflow: visible; max-width: 100%; }
.resource-body .chart text { font-family: inherit; fill: var(--c-muted); font-size: 12px; }
.resource-body .chart .lbl { fill: var(--c-ink); font-size: 12.5px; font-weight: 500; }
.resource-body .chart .val { fill: var(--c-ink); font-size: 12px; font-variant-numeric: tabular-nums; }
.resource-body .chart .axis { stroke: var(--c-rule); stroke-width: 1; }
.resource-body .chart .track { fill: var(--c-track); }
.resource-body .legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: .8rem; color: var(--muted); margin-bottom: 12px; }
.resource-body .legend i { display: inline-block; width: 18px; height: 9px; margin-right: 6px; vertical-align: -1px; border-radius: 1px; }

/* ---- page shells --------------------------------------------------------
   article    contents rail left, because these are long and referred back to
   blog       narrow centred measure, read straight through
   case-study annotation rail right, telling whoever fills it what each slot is for */
.resource-single { max-width: 820px; }
.resource-grid-left,
.resource-grid-right { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
.resource-grid-left { grid-template-columns: 210px minmax(0, 1fr); }
.resource-grid-right { grid-template-columns: minmax(0, 1fr) 260px; }
.resource-grid-left > *, .resource-grid-right > * { min-width: 0; }
@media (max-width: 960px) {
  .resource-grid-left, .resource-grid-right { grid-template-columns: 1fr; }
  .resource-grid-left .page-rail.contents { position: static; }
}
.resource-body { width: 100%; max-width: 72ch; }

/* ---- rails ---- */
.page-rail { font-size: .86rem; }
.page-rail h2 { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; font-weight: 600; }
.page-rail.contents { position: sticky; top: 92px; }
.page-rail.contents ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.page-rail.contents li { margin: 0; }
.page-rail.contents a { display: block; padding: 5px 0 5px 14px; color: var(--muted); text-decoration: none; border-left: 2px solid transparent; margin-left: -1px; line-height: 1.35; }
.page-rail.contents a:hover { color: var(--ink); border-left-color: var(--accent); }
@media (max-width: 960px) { .page-rail:not(.contents) { margin-top: 36px; border-top: 2px solid var(--accent); padding-top: 22px; } }
.page-rail .note { border-left: 1px solid var(--line); padding: 0 0 20px 16px; }
.page-rail .note b { display: block; font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); margin-bottom: 5px; font-weight: 600; }
.page-rail .note p { margin: 0; font-size: .84rem; line-height: 1.55; color: var(--muted); }
.page-rail .note.stop { border-left-color: var(--warn); }
.page-rail .note.stop b { color: var(--warn); }

/* ---- masthead block ---- */
.resource-head { padding: clamp(22px, 3.5vw, 40px) 0 0; }
.resource-head h1 { max-width: 19ch; margin: 0 0 16px; }
.resource.type-blog .resource-head h1 { max-width: 22ch; }
.resource-head .kicker-line { font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); margin: 16px 0 12px; }
.resource-head .standfirst { font-size: 1.2rem; line-height: 1.5; color: var(--muted); max-width: 62ch; margin: 0 0 22px; }
.resource-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; font-size: .86rem; color: var(--muted); padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: clamp(26px, 3vw, 38px); }
.resource-meta strong { color: var(--ink); font-weight: 600; }

/* ---- status banners: these render in the built site on purpose ---- */
.resource-status { display: flex; gap: 12px; align-items: flex-start; border-radius: var(--r-sm); padding: 14px 16px; margin: 0 0 22px; font-size: .92rem; line-height: 1.5; background: var(--warn-bg); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.resource-status svg { flex: none; margin-top: 2px; }
.resource-status p { margin: 0; }
.resource-status.status-illustrative { border-left-width: 5px; }

/* ---- facts panel (:::facts) ---- */
.resource-body .facts-panel { background: var(--mist); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 22px 24px; margin: 28px 0; }
.resource-body .facts-panel h2 { font-size: 1rem; margin: 0 0 14px; }
.resource-body .facts-panel dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 0; font-size: .96rem; }
.resource-body .facts-panel dt { font-weight: 600; color: var(--accent); white-space: nowrap; font-variant-numeric: tabular-nums; }
.resource-body .facts-panel dd { margin: 0; }
.resource-body .facts-panel cite { display: block; font-style: normal; font-size: .8rem; color: var(--muted); margin-top: 3px; }
@media (max-width: 620px) { .resource-body .facts-panel dl { grid-template-columns: 1fr; gap: 3px; } .resource-body .facts-panel dd { margin-bottom: 12px; } }

/* ---- exhibits (:::exhibit) ---- */
.resource-body .exhibit-block { margin: 34px 0; border-top: 2px solid var(--ink); padding-top: 12px; }
.resource-body .exhibit-block > figcaption { font-size: .9rem; color: var(--muted); margin-bottom: 16px; }
.resource-body .exhibit-block > figcaption b { color: var(--ink); font-weight: 600; margin-right: 8px; }
.resource-body .exhibit-block .src { font-size: .8rem; line-height: 1.5; color: var(--muted); margin-top: 12px; }

/* ---- stat block, quote block, record and ledger, carried from the originals ---- */
.resource-body .statblock { margin: 40px 0; padding: 30px 0; border-top: 2px solid var(--accent); border-bottom: 1px solid var(--line); }
.resource-body .statblock .statlead { font-size: .92rem; color: var(--muted); margin: 0 0 18px; max-width: 60ch; }
.resource-body .statblock .bignum { font-size: clamp(48px, 8vw, 78px); font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--accent); margin: 0 0 6px; }
.resource-body .statblock .bignum-sub { font-size: 1rem; color: var(--ink); margin: 0 0 22px; }
.resource-body .record { margin: 38px 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.resource-body .record .rec { background: var(--paper); padding: 22px 24px; }
.resource-body .record .rec p { margin: 0 0 12px; }
.resource-body .record .rec .who { font-size: .84rem; color: var(--muted); line-height: 1.5; }
.resource-body .record .rec .who b { color: var(--ink); }
.resource-body .record .rec-head { font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.resource-body .ledger { margin: 30px 0; border-top: 1px solid var(--line); font-size: .94rem; }
.resource-body .ledger div { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.resource-body .ledger span:first-child { font-weight: 600; color: var(--accent); }
@media (max-width: 560px) { .resource-body .ledger div { grid-template-columns: 1fr; gap: 3px; } }
.resource-body .quoteblock { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; margin: 22px 0; }
.resource-body .quoteblock .bar { height: 5px; background: repeating-linear-gradient(45deg, var(--warn), var(--warn) 8px, transparent 8px, transparent 16px); opacity: .7; }
.resource-body .quoteblock .inner { padding: 22px 24px; }
.resource-body .quoteblock .mark { font-size: .76rem; color: var(--warn); margin: 0 0 12px; }
.resource-body .quoteblock blockquote { margin: 0 0 14px; font-family: var(--serif); font-size: 1.24rem; line-height: 1.45; color: var(--ink); border: 0; padding: 0; }
.resource-body .quoteblock .who { font-size: .84rem; color: var(--muted); }

/* ---- case-study slots and fact row ---- */
.resource-body .slot { background: var(--mist); border-left: 3px solid var(--accent); padding: 16px 20px; margin: 0 0 18px; }
.resource-body .slot .label { font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px; }
.resource-body .slot p:last-child { margin-bottom: 0; }
.resource-body .case-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: .88rem; color: var(--muted); padding: 14px 0; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.resource-body .case-meta strong { color: var(--ink); font-weight: 600; }
.resource-body .tag { display: inline-block; font-size: .68rem; padding: 2px 7px; border-radius: 3px; background: var(--warn-bg); color: var(--warn); margin-left: 6px; white-space: nowrap; }
.resource-body .fill { font-size: .82rem; background: var(--warn-bg); color: var(--warn); padding: 1px 7px; border-radius: 3px; }

/* ---- FAQ (:::faq) ---- */
.resource-body .faq details { border-bottom: 1px solid var(--line); padding: 14px 0; }
.resource-body .faq summary { cursor: pointer; font-weight: 500; font-size: 1.02rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.resource-body .faq summary::-webkit-details-marker { display: none; }
.resource-body .faq details p { margin: 10px 0 2px; color: var(--body); }

/* ---- method and sources notes (:::note) ---- */
.resource-body .note { background: transparent; border: 0; border-top: 1px solid var(--line); padding: 20px 0 0; margin: 40px 0 0; font-size: .9rem; color: var(--muted); }
.resource-body .note h2 { font-size: 1rem; color: var(--ink); margin: 0 0 10px; }
.resource-body .note ol { padding-left: 20px; }
.resource-body .note li { margin-bottom: 6px; }

/* ---- Insights row: date and author, heading and standfirst, then type ---- */
.article-list .row-type { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.article-list .row-type .flag { letter-spacing: 0; text-transform: none; font-size: .72rem; padding: 2px 8px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); }
.resource-more { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.resource-more a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 16px 18px; background: var(--paper); }
.resource-more a:hover { border-color: var(--accent); }

/* Home hero exhibit: the previous build's annotated frame at 80 per cent, centred.
   One product screen rather than three, because three tiles competed with the
   headline instead of supporting it.

   At 80 per cent the figure leaves roughly 115px of gutter each side, and the
   default callout position needs 290px, so the hero gets its own narrower callouts
   that straddle the frame edge instead of sitting entirely outside it. Scoped to
   .hero-exhibit so annotated exhibits on the product pages are untouched. */
.hero-exhibit { max-width: 80%; margin-inline: auto; }
.hero-exhibit .callout { max-width: 210px; }
.hero-exhibit.exhibit .callout.left { left: -128px; width: 210px; --leader: 26px; }
.hero-exhibit.exhibit .callout.right { right: -128px; width: 210px; --leader: 26px; }
@media (max-width: 1100px) {
  .hero-exhibit.exhibit .callout.left { left: -72px; }
  .hero-exhibit.exhibit .callout.right { right: -72px; }
}
@media (max-width: 900px) { .hero-exhibit { max-width: 100%; } }

/* Homepage hero: static editorial illustration alongside the introduction. */
.hero-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(26px, 3.4vw, 56px); align-items: center; }
.hero-split > * { min-width: 0; }
.hero-split h1 { margin-top: 0; }
.hero-line { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: .95rem; color: var(--muted); max-width: 54ch; }

@media (max-width: 900px) { .hero-split { grid-template-columns: 1fr; } }

/* A single-column grid track is auto-sized, so a wide child inside one can
   force the track past the viewport and scroll the whole page sideways. */
.hero-split > *, .product-row > * { min-width: 0; }

/* =========================================================================
   ABOUT PAGE

   The exhibit, the belief line, the technology grid, the compact founder cards
   and the demo steps. Everything uses the existing tokens; nothing new is
   introduced to the palette.
   ========================================================================= */

.about-hero h1 { max-width: 17ch; }
.about-hero .lede { max-width: 70ch; }

/* ---- the three-case exhibit ---- */
.stepper { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 52px); align-items: start; }
.stepper > * { min-width: 0; }
@media (max-width: 980px) { .stepper { grid-template-columns: 1fr; } }

.stepper .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.stepper .steps li { display: block; padding: 18px 20px; border-radius: var(--r-md); border: 1px solid transparent; cursor: pointer;
  transition: background .35s ease, border-color .35s ease, opacity .35s ease; }
.stepper .steps li::before { content: none; }
.stepper .steps li:hover { background: var(--mist); }
.stepper .steps li:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.stepper .steps li[aria-current="true"] { background: var(--paper); border-color: var(--line); box-shadow: 0 10px 26px -22px rgba(19, 47, 53, .5); }
.stepper .steps .pid { display: inline-flex; align-items: center; gap: 8px; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.stepper .steps .pid i { width: 20px; height: 3px; border-radius: 2px; display: block; background: var(--accent); }
.s-loe .pid i { background: var(--loe); } .s-pf .pid i { background: var(--pf); } .s-bl .pid i { background: var(--bl); }
.stepper .steps b { display: block; font-family: var(--serif); font-size: 1.16rem; font-weight: 600; color: var(--ink); margin-bottom: 5px; letter-spacing: -.012em; }
.stepper .steps p { margin: 0; font-size: .95rem; }

/* The panels stack in one grid cell so the container takes the height of the
   tallest and nothing is ever clipped. */
.panels { display: grid; container-type: inline-size; }
.panels > .panel { grid-area: 1 / 1; opacity: 0; pointer-events: none; transition: opacity .45s ease;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--mist);
  padding: clamp(16px, 3.2cqi, 24px); display: flex; flex-direction: column; margin: 0; }
.panels > .panel[data-on] { opacity: 1; pointer-events: auto; }
.p-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 2.6cqi;
  font-size: clamp(10px, 2.4cqi, 12px); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.p-stage { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 1cqi; }
.shut { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.6cqi;
  height: clamp(150px, 30cqi, 210px); border-radius: var(--r-sm); background: var(--mist-2); border: 1px solid var(--line-strong);
  transition: opacity .5s ease, transform .5s ease; }
.shut b { font-family: var(--serif); font-size: clamp(17px, 4.2cqi, 25px); color: var(--ink); font-weight: 600; }
.shut span { font-size: clamp(10px, 2.3cqi, 12px); letter-spacing: .06em; text-transform: uppercase; color: var(--body); }
.panels > .panel.is-open .shut { opacity: 0; transform: scale(.97); height: 0; margin: 0; overflow: hidden;
  transition: opacity .35s ease, height .55s cubic-bezier(.4, 0, .2, 1), transform .35s ease; }

.rows { display: grid; gap: .9cqi; opacity: 0; transform: translateY(8px); max-height: 0; overflow: hidden;
  transition: opacity .5s ease .18s, transform .55s cubic-bezier(.4, 0, .2, 1) .18s; }
.panels > .panel.is-open .rows { opacity: 1; transform: none; max-height: 620px; }
.rows .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2cqi; align-items: center;
  background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 1.5cqi 2.2cqi; }
.rows .nm { font-size: clamp(11px, 2.55cqi, 13.5px); font-weight: 600; color: var(--ink); line-height: 1.25; }
.rows .sc { display: block; font-size: clamp(9px, 2.1cqi, 11px); letter-spacing: .03em; color: var(--muted); margin-top: .3cqi; }
.rows .bar { width: clamp(44px, 13cqi, 78px); height: 5px; border-radius: 3px; background: var(--mist-2); overflow: hidden; display: block; }
.rows .bar i { display: block; height: 100%; border-radius: 3px; background: var(--brand-grad); }
.rows .row.flag { border-color: color-mix(in srgb, var(--brand-teal) 45%, transparent); background: color-mix(in srgb, var(--brand-teal) 5%, var(--paper)); }
.rows .row.gapr { border-color: color-mix(in srgb, var(--gap) 30%, transparent); background: var(--gap-bg); }
.rows .row.gapr .nm, .rows .row.gapr .sc { color: var(--gap); }
.rows .row.gapr .bar i { background: repeating-linear-gradient(45deg, transparent, transparent 4px, color-mix(in srgb, var(--gap) 42%, transparent) 4px, color-mix(in srgb, var(--gap) 42%, transparent) 8px); }
.p-foot { margin-top: 2.4cqi; font-size: clamp(11px, 2.4cqi, 13px); color: var(--muted); line-height: 1.45; min-height: 2.9em; }
.panels > .panel.is-open .p-foot .a { display: none; }
.panels > .panel:not(.is-open) .p-foot .b { display: none; }

/* ---- the belief line ---- */
.belief { margin: clamp(30px, 4vw, 48px) auto 0; max-width: 72ch; padding-top: 24px; border-top: 1px solid var(--line); }
.belief p { font-family: var(--serif); font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.38; color: var(--ink); margin: 0; letter-spacing: -.012em; }
.belief em { font-style: normal; background: linear-gradient(transparent 62%, color-mix(in srgb, var(--brand-teal) 18%, transparent) 62%); padding: 0 .08em; }

/* ---- technology ---- */
.tech { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 26px); margin-top: 26px; }
@media (max-width: 820px) { .tech { grid-template-columns: 1fr; } }
.tech article { border-top: 2px solid var(--ink); padding-top: 16px; }
.tech .tag { display: block; font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; }
.tech h3 { font-size: 1.1rem; margin-bottom: 7px; }
.tech p { font-size: .95rem; margin: 0; }

/* ---- the standard ---- */
.standard { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--paper); }
.standard .top { background: var(--band); color: #fff; padding: 20px 26px; }
.standard .top h3 { color: #fff; font-size: 1.3rem; margin: 0 0 6px; }
.standard .top p { margin: 0; color: var(--band-body); font-size: .9rem; }
.standard .clause { padding: 19px 26px; border-top: 1px solid var(--line); }
.standard .clause b { display: block; color: var(--ink); font-size: 1rem; margin-bottom: 5px; }
.standard .clause p { margin: 0; font-size: .95rem; }
.standard .foot { padding: 16px 26px; background: var(--mist); border-top: 1px solid var(--line); font-size: .92rem; }

/* ---- founders, compact: the method leads, the people follow ---- */
.people-sm { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.6vw, 30px); margin-top: 22px; }
@media (max-width: 820px) { .people-sm { grid-template-columns: 1fr; } }
.person-sm { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 18px; align-items: start; }
.person-sm .shot { width: 104px; height: 104px; border-radius: var(--r-md); overflow: hidden; background: var(--mist-2);
  display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 1.5rem; color: var(--muted); }
.person-sm .shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person-sm h3 { font-size: 1.14rem; margin: 0 0 1px; }
.person-sm .role { font-size: .8rem; color: var(--muted); margin: 0 0 9px; }
.person-sm p { font-size: .92rem; margin: 0 0 9px; }
.person-sm .owns { padding-top: 9px; border-top: 1px solid var(--line); }
.person-sm .owns b { color: var(--ink); }

/* ---- demo steps ---- */
.demo-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 26px); margin-top: 24px; }
@media (max-width: 820px) { .demo-steps { grid-template-columns: 1fr; } }
.demo-steps > div { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px 22px; }
.demo-steps .n { font-size: .7rem; letter-spacing: .1em; color: var(--brand-teal); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.demo-steps h3 { font-size: 1.04rem; margin-bottom: 6px; }
.demo-steps p { font-size: .92rem; margin: 0; color: var(--muted); }
.figs { display: grid; grid-template-columns: 1fr 1fr; max-width: 620px; border-top: 2px solid var(--ink); margin-top: 30px; }
.figs > div { padding: 16px 22px 0 0; }
.figs > div + div { padding-left: 22px; border-left: 1px solid var(--line); }
.figs .v { font-family: var(--serif); font-size: clamp(1.6rem, 2.4vw, 2rem); color: var(--ink); font-weight: 600; line-height: 1.1; }
.figs .l { font-size: .88rem; color: var(--muted); margin-top: 5px; }
@media (max-width: 560px) { .figs { grid-template-columns: 1fr; } .figs > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 14px; } }

@media (prefers-reduced-motion: reduce) { .panel, .shut, .rows, .steps li { transition: none !important; } }

/* Editorial library and original conceptual artwork. */
.editorial-image{display:block;width:100%;height:auto;object-fit:cover}
.resource-category-grid,.resource-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.resource-category-grid{margin:32px 0 48px}
.resource-category-card{display:block;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--paper);text-decoration:none;color:var(--ink)}
.resource-category-card img{aspect-ratio:2/1;object-fit:cover}
.resource-category-card>span{display:grid;gap:10px;padding:22px}
.resource-category-card strong{font-size:1.4rem}
.resource-category-card b{color:var(--btn);font-size:.9rem}
.resource-category-card span span{color:var(--muted)}
.resource-category-nav{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.resource-category-nav a{padding:9px 16px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--ink)}
.resource-category-nav a[aria-current]{background:var(--btn);color:var(--paper)}
.resource-filters{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:860px}
.resource-filters label{display:block;margin-bottom:8px;font-weight:600}
.topic-picker{position:relative;min-width:0}
.topic-trigger{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:12px;border:1px solid var(--line-strong);border-radius:8px;background:var(--paper);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.topic-trigger::after{content:'';width:8px;height:8px;border-right:2px solid var(--link);border-bottom:2px solid var(--link);transform:rotate(45deg);margin:0 4px 4px;flex-shrink:0}
.topic-trigger[aria-expanded=true]::after{transform:rotate(225deg);margin-top:8px}
.topic-trigger:focus-visible{outline:3px solid color-mix(in srgb,var(--focus) 35%,transparent);border-color:var(--focus)}
.topic-options{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:30;padding:6px;max-height:min(320px,45vh);overflow-y:auto;overscroll-behavior:contain;background:var(--paper);color:var(--ink);border:1px solid var(--line-strong);border-radius:12px;box-shadow:0 16px 48px #071f2426;scrollbar-width:thin;scrollbar-color:var(--muted) var(--paper)}
.topic-options[hidden],.resource-filters select[hidden]{display:none}
.topic-options [role=option]{padding:11px 12px;min-height:44px;border-radius:6px;cursor:pointer}
.topic-options [role=option]:hover,.topic-options .is-active{background:var(--mist);color:var(--link);outline:1px solid var(--line);outline-offset:-1px}
.topic-options [aria-selected=true]{font-weight:700;color:var(--link);background:var(--mist)}
.resource-filters input,.resource-filters select{width:100%;padding:12px;border:1px solid var(--line-strong);border-radius:8px;background:var(--paper);color:var(--ink);min-width:0}
.resource-results{margin:20px 0}
.resource-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--paper);display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.resource-card:hover{box-shadow:0 12px 32px #132f3514;transform:translateY(-3px)}
.resource-card[hidden],.resource-empty[hidden]{display:none}
.resource-card-art{position:relative;display:block}
.resource-card-art img{aspect-ratio:3/2;object-fit:cover}
.resource-kind{position:absolute;left:16px;bottom:14px;padding:5px 10px;border-radius:6px;background:#fbfaf6;color:#132f35;font-size:.8rem;font-weight:600}
.resource-card-body{padding:22px;display:flex;flex:1;flex-direction:column;align-items:flex-start}
.resource-card-meta{display:flex;flex-wrap:wrap;gap:6px 12px;color:var(--muted);font-size:.78rem}
.resource-card h2{font-size:1.3rem;line-height:1.35;margin:14px 0 10px}
.resource-card h2 a{color:var(--ink);text-decoration:none}
.resource-card-body>p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;color:var(--muted);margin:0 0 20px}
.resource-card-body>.text-link{margin-top:auto}
.resource-draft{font-size:.72rem;color:var(--muted);margin-top:10px}
.resource-pagination{display:flex;justify-content:center;gap:10px;margin-top:36px;flex-wrap:wrap}
.resource-pagination [aria-current]{background:var(--btn);color:var(--paper)}
.resource-banner{margin:0 0 36px}
.resource-banner img{display:block;width:100%;height:auto;aspect-ratio:4/1;border-radius:0;object-fit:cover;object-position:center}
.story-banner{display:block;width:100%;border-radius:0;overflow:hidden;margin:32px 0 0;position:relative;background:var(--mist)}
.story-banner img{display:block;width:100%;height:auto;aspect-ratio:4/1;max-height:none;object-fit:cover;object-position:center}
@media(max-width:1000px){.resource-grid,.resource-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.resource-grid,.resource-category-grid,.resource-filters{grid-template-columns:1fr}.resource-card h2{font-size:1.25rem}}
@media(prefers-reduced-motion:reduce){.resource-card{transition:none}.resource-card:hover{transform:none}}

.product-editorial{border-radius:12px;aspect-ratio:2/1;object-fit:cover;margin-bottom:16px}


/* Themed country combobox and editorial hero artwork. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.country-picker{position:relative}
.country-picker>input{padding-right:48px}
.country-toggle{position:absolute;right:4px;top:4px;width:40px;height:calc(100% - 8px);display:grid;place-items:center;background:transparent;color:var(--muted);border:0;border-radius:8px;cursor:pointer}
.country-toggle:hover{color:var(--ink);background:var(--mist)}
.country-toggle[hidden],.country-popover[hidden],.country-empty[hidden]{display:none}
.country-popover{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:30;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 48px #071f2426;overflow:hidden}
.country-hint{padding:12px 16px;margin:0;font-size:.75rem;color:var(--muted);background:var(--mist);border-bottom:1px solid var(--line)}
.country-popover [role=listbox]{max-height:min(270px,38vh);overflow-y:auto;overscroll-behavior:contain;padding:6px;scrollbar-width:thin;scrollbar-color:var(--muted) var(--paper)}
.country-popover [role=option]{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;min-height:44px;border-radius:8px;cursor:pointer;font-size:.9rem;color:var(--body)}
.country-popover [role=option]:hover,.country-popover [role=option].is-active{background:var(--mist);color:var(--link);outline:1px solid var(--line);outline-offset:-1px}
.country-popover [aria-selected=true]{font-weight:600;background:var(--mist)}
.country-code{font-size:.72rem;color:var(--muted);letter-spacing:.04em}
.country-empty{padding:18px;margin:0;font-size:.85rem;color:var(--muted)}

.hero-art{background:var(--mist);margin:0;width:100%;border-radius:0;overflow:hidden;align-self:stretch;position:relative}
.hero-art img{display:block;width:100%;height:100%;position:absolute;inset:0;border-radius:0;object-fit:cover;object-position:center}

@media(max-width:900px){.hero-art img{position:static;height:auto;object-fit:contain}}
@media(max-width:420px){.actions .btn{max-width:100%;white-space:normal;text-align:center}}

.engagement-dialog{width:min(560px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:36px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);color:var(--body);box-shadow:var(--shadow-frame)}
.engagement-dialog::backdrop{background:rgba(8,26,31,.6)}
.engagement-dialog h2{font-size:clamp(1.5rem,4vw,2rem);padding-right:20px}
.engagement-close{position:absolute;right:12px;top:12px;font-size:24px}
.engagement-demos{display:grid;gap:10px;margin:24px 0 18px}.engagement-dialog .btn{white-space:normal;text-align:center}
@media(max-width:480px){.engagement-dialog{padding:28px 20px}}

/* Shared article/blog reading experience. Charts remain readable without JS. */
.page-rail.contents { max-height: calc(100vh - 120px); overflow-y: auto; }
.page-rail.contents a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.resource-body > p { margin-block: 0 1.35em; }
.resource-body h2 { scroll-margin-top: 100px; }
.resource-data-chart { margin: 2rem 0; padding: 20px; border: 1px solid var(--line); background: var(--mist); }
.resource-data-chart figcaption { font-weight: 700; color: var(--ink); font-size: 1.1rem; }
.resource-data-chart .chart-unit,.resource-data-chart .chart-source { font-size: .85rem; line-height: 1.6; color: var(--muted); }
.chart-key { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; padding: 0; }
.resource-body .chart-key li { font-size: .85rem; }
.chart-swatch { display: inline-block; width: 16px; height: 10px; margin-right: 7px; }
.resource-data-chart .series-0 { fill: var(--accent); background: var(--accent); }
.resource-data-chart .series-1 { fill: var(--muted); background: var(--muted); }
.chart-scroll { overflow-x: auto; }
.chart-scroll svg { display: block; width: 100%; min-width: 480px; height: auto; }
.chart-track { fill: var(--line); }
.chart-label,.chart-value { fill: var(--ink); font-family: inherit; font-size: 14px; }
.chart-value { font-variant-numeric: tabular-nums; }
.related-resources h3 { font-size: 1.25rem; line-height: 1.4; margin: 14px 0 10px; }
.related-resources h3 a { color: var(--ink); text-decoration: underline; text-underline-offset: .18em; }
.related-resources h3 a:hover { color: var(--accent); }
@media(max-width:960px) { .page-rail.contents { max-height: none; margin-bottom: 24px; } }
@media(max-width:640px) { .resource-data-chart { padding: 12px; } }