/* ============================================================
   Trenthos v2 - "warm rounded" design system
   Direction: warm, inviting, uncrowded, trustworthy. Soft rounded
   cards floating on a pale warm-sage ground, blurred colour blobs,
   pill controls, Fraunces headlines over Plus Jakarta Sans.
   Teal from the cube logo; ONE warm sand accent for warmth.
   Loaded page-by-page during the redesign rollout; style.css keeps
   serving un-migrated pages. See docs/redesign-plan.md.
   ============================================================ */

:root {
  --ground:      #ECF1EF;
  --ground-warm: #F4EFE7;
  --card:        #FDFEFD;
  --ink:         #14302E;
  --ink-mute:    #4C625F;
  --line:        #E2E9E6;
  --accent:      #157171;
  --accent-deep: #0C3A39;
  --accent-soft: #DCEBE8;
  --warm:        #F3DEC6;
  --warm-deep:   #E9C6A0;

  --r-hero: 40px;
  --r-card: 28px;
  --r-tile: 16px;

  --shadow:    0 24px 60px -32px rgba(12, 58, 57, 0.28);
  --shadow-sm: 0 14px 34px -22px rgba(12, 58, 57, 0.35);

  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Reset & base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* anchor targets land below the sticky masthead, not underneath it */
[id] { scroll-margin-top: 100px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Overscroll: iOS composites the rubber-band area from the root's solid
   background-color (gradients are background-images and get ignored), so
   the root carries the footer's deep teal. The body paints the pale
   ground over the whole page, and the top edge stays pale via the
   masthead + theme-color. */
html {
  background-color: var(--accent-deep);
}

body {
  margin: 0;
  /* iOS 26 Safari tints its toolbar from body's background-COLOR (it
     dropped theme-color support), while humans see the background-IMAGE.
     The sampled colour is pale in the page and switches to the footer
     teal only while the footer is on screen (class set by main.js) -
     one static colour would tint the toolbar everywhere. */
  background-color: var(--ground);
  background-image: linear-gradient(var(--ground), var(--ground));
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.footer-visible { background-color: var(--accent-deep); }

img { max-width: 100%; height: auto; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); }

::selection { background: var(--accent-soft); color: var(--ink); }

/* Keyboard focus: visible ring; mouse clicks stay clean */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 10px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 500;
  background: var(--accent-deep);
  color: #fff;
  padding: 12px 22px;
  border-radius: 0 0 14px 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---------- Typography ---------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.35rem); }
h2 { font-size: clamp(1.95rem, 3.6vw, 2.85rem); }
h3 { font-size: 1.42rem; line-height: 1.25; }

h1 .hl, h2 .hl { color: var(--accent); font-style: italic; }

p { margin: 0; }

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.19rem);
  line-height: 1.62;
  color: var(--ink-mute);
  max-width: 56ch;
  text-wrap: pretty;
}

.mono {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.92em;
}

/* Eyebrow: small warm dot + tracked caps. Opens every section. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--warm-deep);
  flex: none;
}
.eyebrow--onDark { color: #A9D6D1; }
.eyebrow--onDark::before { background: var(--warm); }

/* ---------- Layout ---------- */

.shell {
  width: min(1200px, 100% - 48px);
  margin-inline: auto;
}

section { padding: clamp(56px, 9vw, 104px) 0; }
section.tight { padding-top: clamp(24px, 4vw, 44px); }

.section-intro { max-width: 640px; }
.section-intro .eyebrow { margin-bottom: 18px; }
.section-intro .lede { margin-top: 18px; }

/* Warm parchment band: a full-width rounded ground for section rhythm */
.band {
  background: var(--ground-warm);
  border-radius: 44px;
  width: min(1400px, 100% - 24px);
  margin-inline: auto;
}

/* ---------- Masthead ---------- */

.masthead {
  padding: 18px 0;
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(236, 241, 239, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: box-shadow 0.25s ease;
}
/* soft edge once the page has actually scrolled (toggled in main.js) */
.masthead.is-stuck { box-shadow: 0 10px 32px -20px rgba(12, 58, 57, 0.35); }
.masthead-inner {
  width: min(1320px, 100% - 48px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 28px;
}
.brand { display: block; flex: none; }
.brand-logo { height: 42px; width: auto; display: block; }

.nav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.nav-item {
  padding: 10px 16px;
  border-radius: 999px;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.97rem;
  transition: background 0.2s ease, color 0.2s ease;
}
.nav-item:hover { background: rgba(20, 48, 46, 0.06); color: var(--ink); }
.nav-item[aria-current="page"] { background: rgba(20, 48, 46, 0.08); }
.nav .pill { margin-left: 12px; }

/* Products dropdown */
.nav-drop { position: relative; }
.nav-drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: none;
  cursor: pointer;
}
.nav-drop-btn .caret { transition: transform 0.2s ease; }
.nav-drop:hover .nav-drop-btn .caret,
.nav-drop.open .nav-drop-btn .caret { transform: rotate(180deg); }
.nav-drop-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  min-width: 320px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 60;
}
/* bridge the hover gap between button and menu */
.nav-drop-menu::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu,
.nav-drop.open .nav-drop-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-drop-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  border-radius: 14px;
  color: var(--ink);
}
.nav-drop-link:hover { background: var(--accent-soft); color: var(--ink); }
.nav-drop-link strong { font-size: 0.97rem; font-weight: 700; }
.nav-drop-link span { font-size: 0.84rem; color: var(--ink-mute); }
.nav-drop-link[aria-current="page"] strong { color: var(--accent-deep); }

@media (max-width: 880px) {
  /* in the sheet the dropdown becomes a collapsible group: the
     "Products" row spans the sheet with its caret on the right, and
     the product links indent beneath it */
  .nav-drop {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .nav-drop-btn {
    display: flex;
    width: 100%;
    justify-content: space-between;
    text-align: left;
  }
  .nav-drop-menu {
    display: none;
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    min-width: 0;
    align-items: stretch;
    gap: 2px;
    margin-top: 2px;
  }
  .nav-drop.open .nav-drop-menu { display: flex; transform: none; }
  .nav-drop-menu::before { display: none; }
  .nav-drop-link { align-items: flex-start; padding: 10px 16px 10px 34px; border-radius: 14px; }
  .nav-drop-link:hover { background: rgba(20, 48, 46, 0.06); }
  .nav-drop-link strong { font-size: 1rem; font-weight: 600; color: var(--accent-deep); }
  .nav-drop-link span { display: none; }
}

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

@media (max-width: 880px) {
  .masthead {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(236, 241, 239, 0.97);
  }
  .nav-toggle { display: inline-flex; }
  .brand-logo { height: 36px; }
  /* dropdown sheet anchored under the sticky header (reference pattern):
     stacked, left-aligned items; the page stays visible beneath */
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin: 0;
    background: var(--ground);
    padding: 8px 22px 20px;
    border-bottom: 1px solid var(--line);
    border-radius: 0 0 26px 26px;
    box-shadow: var(--shadow);
  }
  .nav.open { display: flex; }
  .nav-item { font-size: 1.02rem; padding: 12px 16px; border-radius: 14px; }
  .nav .pill { margin: 12px 0 0; justify-content: center; }
}

/* ---------- Pills & chips ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.99rem;
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease,
    transform 0.22s ease, box-shadow 0.22s ease;
}
.pill .arrow { transition: transform 0.22s ease; }
.pill:hover .arrow { transform: translateX(3px); }

.pill--fill { background: var(--accent); color: #fff; }
.pill--fill:hover {
  background: var(--accent-deep);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.pill--ghost {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line);
}
.pill--ghost:hover {
  border-color: var(--accent);
  color: var(--accent-deep);
  transform: translateY(-1px);
}

/* On the deep-teal CTA band */
.pill--light { background: #fff; color: var(--accent-deep); }
.pill--light:hover {
  background: var(--warm);
  color: var(--accent-deep);
  transform: translateY(-1px);
}

/* Fact chip: quiet, verifiable statements only */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}
.chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.75;
}

/* Inline text link with arrow */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--accent);
}
.text-link .arrow { transition: transform 0.22s ease; }
.text-link:hover { color: var(--accent-deep); }
.text-link:hover .arrow { transform: translateX(3px); }

/* ---------- Hero ---------- */

.hero { padding: clamp(10px, 2vw, 26px) 0 clamp(48px, 7vw, 84px); }

.hero-card {
  position: relative;
  isolation: isolate;
  background: linear-gradient(165deg, #FDFEFD 30%, #F0F6F3 100%);
  border-radius: var(--r-hero);
  box-shadow: var(--shadow);
  width: min(1320px, 100% - 24px);
  margin-inline: auto;
  padding: clamp(56px, 8.5vw, 108px) clamp(28px, 6vw, 96px);
}
.hero-card > * { position: relative; z-index: 1; }

/* Backdrop clip: blurred/filtered children can escape a rounded
   overflow clip in Chromium, so blobs + shader live in this wrapper,
   which re-applies the card's radius as its own clip. */
.hero-fxwrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  /* Safari/WebKit refuses to clip blurred children to a rounded
     overflow box; masking the wrapper onto its own rasterised layer
     forces the clip there too. No-op in Chromium/Firefox. */
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
  transform: translateZ(0);
}

/* Faceted "engineered glass" shader (js/hero-shader.js), glowing from
   the card's top-right corner under the blobs. */
.hero-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(130% 140% at 100% 0%, #000 28%, transparent 62%);
  mask-image: radial-gradient(130% 140% at 100% 0%, #000 28%, transparent 62%);
}

/* Research hero "printer ink" paper shader (js/research-hero.js):
   low-res ordered-dither canvas, upscaled with crisp square dots. */
.hero-fx--paper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

/* Soft blurred colour blobs - the warmth */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  pointer-events: none;
}
.blob--warm {
  width: 560px;
  height: 560px;
  top: -150px;
  right: -60px;
  background: radial-gradient(circle at 42% 42%, var(--warm-deep) 0%, rgba(243, 222, 198, 0) 70%);
  opacity: 0.85;
}
.blob--teal {
  width: 620px;
  height: 620px;
  bottom: -280px;
  left: -160px;
  background: radial-gradient(circle at 55% 45%, #BFE0DA 0%, rgba(191, 224, 218, 0) 66%);
}
.blob--deep {
  width: 380px;
  height: 380px;
  top: -140px;
  left: 32%;
  background: radial-gradient(circle at 50% 50%, rgba(75, 167, 166, 0.55) 0%, rgba(75, 167, 166, 0) 70%);
}

.hero-card .eyebrow { margin-bottom: 26px; }

/* Product hero: copy left, product lockup right */
.hero-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(28px, 5vw, 72px);
}
.hero-copy { flex: 1 1 auto; min-width: 0; }
.hero-lockup {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-right: clamp(0px, 3vw, 44px);
}
.lockup-mark {
  width: 148px;
  height: 148px;
  display: block;
  filter: drop-shadow(0 18px 30px rgba(12, 58, 57, 0.22));
}
.lockup-text { text-align: center; }
.lockup-brand {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.lockup-name {
  display: block;
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 500;
  color: var(--ink);
  margin-top: 2px;
}
@media (max-width: 980px) { .hero-lockup { display: none; } }
.hero-card h1 { max-width: 17ch; }
.hero-card .lede { margin-top: 26px; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 38px;
}
.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 44px;
}

/* ---------- Feature cards (products) ---------- */

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: clamp(36px, 5vw, 56px);
}

.feature-card {
  --card-pad: clamp(28px, 3.4vw, 42px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--card-pad);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-sm);
  border-color: transparent;
}

.icon-tile {
  width: 54px;
  height: 54px;
  border-radius: var(--r-tile);
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-bottom: 6px;
}
.icon-tile--warm { background: var(--warm); color: var(--accent-deep); }

.feature-card .card-eyebrow {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.feature-card h3 { max-width: 20ch; }
.feature-card p { color: var(--ink-mute); text-wrap: pretty; }
.feature-card .text-link { margin-top: auto; padding-top: 8px; }

/* Product screenshot: crisp, framed like the app - evidence, not wallpaper.
   .showcase = full-width frame under the product cards; .card-shot = the
   smaller in-card variant (bleeds off the card's bottom edge). */
.showcase { margin: 26px 0 0; }
.showcase .app-frame {
  position: relative;
  margin: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
}
/* the shot is a viewport into a longer page - fade the cut edge */
.showcase .app-frame::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72px;
  background: linear-gradient(rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
}
.showcase figcaption {
  margin-top: 16px;
  text-align: center;
  font-size: 0.86rem;
  color: var(--ink-mute);
}
.card-shot {
  margin: 14px calc(var(--card-pad) * -1) calc(var(--card-pad) * -1);
}
.app-frame {
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  margin: 0 18px;
  box-shadow: 0 -1px 0 rgba(12, 58, 57, 0.02), var(--shadow-sm);
}
.app-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  background: #EEF3F1;
  border-bottom: 1px solid var(--line);
}
.app-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #D3DFDB;
  flex: none;
}
.app-label {
  margin-left: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink-mute);
  background: #fff;
  border-radius: 999px;
  padding: 4px 14px;
}
.app-frame img { display: block; width: 100%; height: auto; }

/* ---------- Value cards ---------- */

.approach-band { padding: clamp(56px, 8vw, 96px) 0; }

.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: clamp(36px, 5vw, 54px);
}
.value-card {
  background: var(--card);
  border-radius: var(--r-card);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.value-card .icon-tile { width: 46px; height: 46px; border-radius: 14px; }
.value-card h4 {
  font-family: var(--font-body);
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: 0;
}
.value-card p { font-size: 0.94rem; color: var(--ink-mute); }

/* Step number for genuine sequences (e.g. how-it-works) */
.step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
}

/* Three-across variant (feature/compliance grids on product pages) */
.values-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .values-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .values-grid--3 { grid-template-columns: 1fr; } }

/* ---------- Integration spec rows (product pages) ---------- */

.spec-list {
  list-style: none;
  margin: clamp(36px, 5vw, 54px) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.spec-list li {
  display: grid;
  grid-template-columns: 190px 1fr auto;
  align-items: center;
  gap: 18px;
  background: var(--card);
  border-radius: 18px;
  padding: 18px 24px;
}
.spec-label { font-weight: 700; font-size: 0.97rem; }
.spec-text { color: var(--ink-mute); font-size: 0.94rem; }
.status-pill {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.status-pill--live { background: var(--accent-soft); color: var(--accent-deep); }
.status-pill--live::before { background: var(--accent); }
.status-pill--building { background: var(--warm); color: #6B4E2A; }
.status-pill--building::before { background: var(--warm-deep); }
.status-pill--pending { background: #E9EEEC; color: var(--ink-mute); }
.status-pill--pending::before { background: #B9C8C4; }

@media (max-width: 720px) {
  .spec-list li { grid-template-columns: 1fr auto; }
  .spec-text { grid-column: 1 / -1; }
}

/* Inline status chips used in long-form docs prose */
.spec-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  vertical-align: 2px;
}
.spec-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; }
.spec-status--live { background: var(--accent-soft); color: var(--accent-deep); }
.spec-status--live::before { background: var(--accent); }
.spec-status--building { background: var(--warm); color: #6B4E2A; }
.spec-status--building::before { background: var(--warm-deep); }
.spec-status--pending { background: #E9EEEC; color: var(--ink-mute); }
.spec-status--pending::before { background: #B9C8C4; }

/* ---------- Research strip (the arm - not a product) ---------- */

.research-strip {
  display: grid;
  grid-template-columns: minmax(300px, 5fr) 7fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.research-strip .eyebrow { margin-bottom: 18px; }
.research-strip .lede { margin-top: 16px; font-size: 1.02rem; }
.research-strip .text-link { margin-top: 22px; }

.insight-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.insight-link {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 20px 26px;
  color: var(--ink);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.insight-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: transparent;
  color: var(--ink);
}
.insight-date {
  flex: none;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  width: 88px;
}
.insight-title {
  font-weight: 600;
  font-size: 0.99rem;
  line-height: 1.45;
  text-wrap: pretty;
}
.insight-link .arrow {
  margin-left: auto;
  color: var(--accent);
  transition: transform 0.22s ease;
}
.insight-link:hover .arrow { transform: translateX(3px); }

/* ---------- Post list (research writing) ---------- */

.post-list {
  list-style: none;
  margin: clamp(30px, 4vw, 44px) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.post-link {
  display: flex;
  align-items: flex-start;
  gap: 26px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 26px 30px;
  color: var(--ink);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.post-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: transparent;
  color: var(--ink);
}
.post-date {
  flex: none;
  width: 92px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 4px;
}
.post-body { display: flex; flex-direction: column; gap: 8px; }
.post-tag {
  align-self: flex-start;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-deep);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 4px 12px;
}
.post-body h3 {
  font-size: 1.18rem;
  line-height: 1.3;
}
.post-body p { color: var(--ink-mute); font-size: 0.95rem; }
.post-arrow {
  margin-left: auto;
  color: var(--accent);
  padding-top: 4px;
  transition: transform 0.22s ease;
}
.post-link:hover .post-arrow { transform: translateX(3px); }

@media (max-width: 720px) {
  .post-link { flex-wrap: wrap; gap: 10px 20px; padding: 22px; }
  .post-date { width: auto; padding: 0; }
  .post-arrow { display: none; }
}

/* Audience filter (insights index) */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(24px, 3vw, 34px);
}
.filter-btn {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.filter-btn:hover { border-color: var(--accent); color: var(--accent-deep); }
.filter-btn[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.filter-empty { display: none; margin-top: 28px; color: var(--ink-mute); }
.filter-empty.is-shown { display: block; }

/* ---------- CTA band ---------- */

.cta-band {
  position: relative;
  isolation: isolate;
  background: var(--accent-deep);
  color: #fff;
  border-radius: var(--r-hero);
  width: min(1320px, 100% - 24px);
  margin-inline: auto;
  padding: clamp(56px, 8vw, 96px) clamp(28px, 6vw, 96px);
  text-align: center;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band .blob--warm { opacity: 0.34; top: auto; bottom: -260px; right: -120px; }
.cta-band .blob--teal {
  opacity: 0.5;
  bottom: auto;
  top: -300px;
  left: -180px;
  background: radial-gradient(circle at 55% 45%, #1E5F5C 0%, rgba(30, 95, 92, 0) 66%);
}
.cta-band .eyebrow { margin-bottom: 22px; }
.cta-band h2 { color: #fff; max-width: 22ch; margin-inline: auto; }
.cta-band .cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  align-items: center;
  margin-top: 36px;
}
.cta-band .cta-mail { color: #A9D6D1; font-weight: 600; }
.cta-band .cta-mail:hover { color: #fff; }
.cta-band .cta-note { margin-top: 22px; font-size: 0.86rem; color: #8FB7B1; }

/* ---------- Footer ---------- */

.colophon {
  margin-top: clamp(20px, 3vw, 40px);
  /* bleed the footer colour into the overscroll area below the page -
     paints where the browser shows its canvas when rubber-banding */
  box-shadow: 0 100vh 0 100vh var(--accent-deep);
  background: var(--accent-deep);
  color: #C7DEDA;
  border-radius: 44px 44px 0 0;
  padding: clamp(56px, 7vw, 84px) 0 34px;
  font-size: 0.94rem;
}
.colophon a { color: #E4F0EC; }
.colophon a:hover { color: #fff; }

.colophon-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.colophon-logo {
  height: 42px;
  width: auto;
  display: block;
  filter: brightness(1.55) saturate(1.05);
}
.colophon-tagline {
  margin-top: 18px;
  max-width: 44ch;
  color: #A9C9C4;
  text-wrap: pretty;
}
.colophon-status {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.82rem;
  font-weight: 600;
  color: #C7DEDA;
}
.colophon-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--warm);
}

.colophon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  padding: 44px 0;
}
.colophon-col h5 {
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7FA8A2;
}
.colophon-col p { margin: 0 0 6px; }
.colophon-col ul { list-style: none; margin: 0; padding: 0; }
.colophon-col li { margin-bottom: 8px; }
.colophon-col strong { color: #fff; font-weight: 600; }

.colophon-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.85rem;
  color: #93B8B2;
}
.colophon-bar strong { color: #E4F0EC; font-weight: 600; }
.colophon-top-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

/* ============================================================
   Reading layer - articles, legal pages, subscribe/contact forms.
   Styles the existing article markup vocabulary (.legal-*, .article-*,
   .related, .subscribe) so published articles migrate to v2 without
   markup rewrites.
   ============================================================ */

/* Eyebrow alias used by articles (.marker) */
.marker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.marker::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--warm-deep);
  flex: none;
}
.marker--mute { color: var(--ink-mute); }

/* Article / legal hero: calm banner, no big card */
.legal-hero { padding: clamp(30px, 5vw, 60px) 0 clamp(20px, 3vw, 36px); }
.legal-hero .hero-eyebrow { margin-bottom: 22px; }
.legal-hero h1 {
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  max-width: 24ch;
}
.legal-hero .lede { margin-top: 20px; }

.legal-body { padding: clamp(20px, 3vw, 40px) 0 clamp(56px, 8vw, 96px); }

.article-shell {
  width: min(760px, 100% - 48px);
  margin-inline: auto;
}

.article-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.article-back:hover { color: var(--accent-deep); }

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
  padding: 18px 0;
  margin: 26px 0 10px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--ink-mute);
}
.legal-meta strong { color: var(--ink); font-weight: 600; }

/* Generated hero banner (tools/generate-art.mjs) */
.article-hero-art {
  margin-top: 28px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.article-hero-art svg { display: block; width: 100%; height: auto; }

/* Reading typography */
.legal-content { margin-top: 30px; }
.legal-content h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  margin: 2em 0 0.7em;
}
.legal-content h3 {
  font-family: var(--font-body);
  font-size: 1.06rem;
  font-weight: 700;
  margin: 1.8em 0 0.6em;
}
.legal-content p { margin: 0 0 1.05em; }
.legal-content ul, .legal-content ol { margin: 0 0 1.05em; padding-left: 1.4em; }
.legal-content li { margin-bottom: 0.45em; }
.legal-content a { text-decoration: underline; text-decoration-color: var(--accent-soft); text-underline-offset: 3px; }
.legal-content a:hover { text-decoration-color: var(--accent); }
.legal-content .article-lead {
  font-size: 1.16rem;
  line-height: 1.62;
  color: var(--ink);
}
.legal-content figure { margin: 1.8em 0; }
.legal-content figure svg { display: block; width: 100%; height: auto; }
.legal-content figcaption { font-size: 0.86rem; color: var(--ink-mute); margin-top: 10px; }
.legal-content code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.9em;
  background: var(--accent-soft);
  border-radius: 6px;
  padding: 1px 6px;
}
.legal-content blockquote {
  margin: 1.4em 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--accent);
  color: var(--ink-mute);
}

/* Inline citations */
sup.cite { line-height: 0; }
sup.cite a {
  font-size: 0.72em;
  font-weight: 700;
  text-decoration: none;
  color: var(--accent);
  padding: 0 2px;
}

/* Reference list */
.article-refs { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
.article-refs h2 { font-size: 1.3rem; margin: 0 0 16px; }
.ref-list {
  margin: 0;
  padding-left: 1.4em;
  font-size: 0.9rem;
  color: var(--ink-mute);
}
.ref-list li { margin-bottom: 10px; }
.ref-list a { word-break: break-word; }

/* Related writing */
.related { margin-top: 48px; }
.related h2 { font-size: 1.3rem; margin: 0 0 16px; }
.related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.related-list a {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 15px 20px;
  color: var(--ink);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.related-list a:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: transparent;
  color: var(--ink);
}
.related-tag {
  flex: none;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-deep);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 4px 11px;
}
.related-title { font-size: 0.93rem; font-weight: 600; line-height: 1.4; }

/* Article footer note */
.article-note {
  margin-top: 44px;
  padding: 18px 22px;
  background: var(--ground-warm);
  border-radius: 16px;
  font-size: 0.87rem;
  color: var(--ink-mute);
}

/* ---------- Forms (subscribe, contact) ---------- */

input[type="text"], input[type="email"], input[type="search"], select, textarea {
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--font-body);
  font-size: 0.97rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 18px;
  width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea { min-height: 150px; resize: vertical; }
::placeholder { color: #9AAFAB; }

/* Subscribe panel */
.subscribe {
  margin: 52px auto 0;
  max-width: 880px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(26px, 4vw, 40px);
}
.subscribe-eyebrow {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}
.subscribe h2 { font-size: 1.45rem; margin: 0 0 8px; }
.subscribe-lede { color: var(--ink-mute); font-size: 0.95rem; margin: 0 0 18px; }
.subscribe-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.subscribe-topic {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.subscribe-topic input { position: absolute; opacity: 0; width: 0; height: 0; }
.subscribe-topic span {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--ground);
  font-size: 0.86rem;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.subscribe-topic input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.subscribe-topic input:focus-visible + span {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.subscribe-row { display: flex; gap: 10px; flex-wrap: wrap; }
.subscribe-row input[type="email"] { flex: 1 1 260px; }
.subscribe-row button {
  font-family: var(--font-body);
  font-size: 0.97rem;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  padding: 13px 28px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.subscribe-row button:hover { background: var(--accent-deep); }
.subscribe-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; }
.subscribe-note { font-size: 0.8rem; color: var(--ink-mute); margin: 14px 0 0; }
.subscribe-msg { font-size: 0.9rem; font-weight: 600; margin: 10px 0 0; }
.subscribe-msg[data-kind="error"] { color: #A14747; }

/* Insight filter alias (articles index uses .insight-filter) */
.insight-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Toolbar above the article list: audience pills left, search right */
.list-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  flex-wrap: wrap;
}
.list-tools .subscribe { margin-top: 0; }

/* Insights search */
.insight-search {
  position: relative;
  flex: 0 1 340px;
  min-width: 240px;
}
.insight-search .search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-mute);
  pointer-events: none;
}
.insight-search input[type="search"] {
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 13px 20px 13px 46px;
  background: var(--card);
}
.insight-search input[type="search"]:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: none;
}
.insight-search input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

/* Legal pages: TOC + content grid */
.legal-shell {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 52px;
  width: min(1100px, 100% - 48px);
  margin-inline: auto;
  align-items: start;
}
.legal-shell .legal-content { margin-top: 0; max-width: 74ch; }

/* Long-form docs rhythm: sections separated by hairlines, not voids
   (they'd otherwise inherit the global section padding) */
.legal-content section { padding: 26px 0 8px; }
.legal-content section + section {
  margin-top: 22px;
  border-top: 1px solid var(--line);
}
.legal-content section h2 { margin-top: 0.4em; }

/* numbered section headings: the data-no becomes a teal chapter chip */
.legal-content h2[data-no] {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.legal-content h2[data-no]::before {
  content: attr(data-no);
  flex: none;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent-deep);
  background: var(--accent-soft);
  border-radius: 10px;
  padding: 4px 10px;
  transform: translateY(-4px);
}

/* teal list markers + a touch more air in doc lists */
.legal-content ul li::marker { color: var(--accent); }
.legal-content ol li::marker { color: var(--accent); font-weight: 700; }

/* "how to read this" style callout */
.legal-callout {
  margin-top: 26px;
  background: var(--ground-warm);
  border-radius: 18px;
  padding: 18px 24px;
  max-width: 76ch;
}
.legal-callout p { margin: 0; font-size: 0.93rem; color: var(--ink-mute); }
.legal-callout strong { color: var(--ink); }

/* numbered TOC entries to mirror the chapter chips */
.legal-toc ol { counter-reset: toc; }
.legal-toc ol li { counter-increment: toc; }
.legal-toc ol a::before {
  content: counter(toc, decimal-leading-zero);
  display: inline-block;
  width: 26px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
  opacity: 0.7;
}
.legal-toc ol a.is-active::before { opacity: 1; }
.legal-toc h5 {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.legal-toc ol { list-style: none; margin: 0; padding: 0; }
.legal-toc li { margin: 0; }
@media (max-width: 880px) {
  .legal-shell { grid-template-columns: 1fr; gap: 28px; }
  .legal-toc { position: static; }
}

/* legal-meta as a dl (privacy/disclaimer header) */
.legal-meta dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.legal-meta dd { margin: 3px 0 0; color: var(--ink); }

/* ---------- Contact page ---------- */

.contact-section { padding: clamp(24px, 4vw, 48px) 0 clamp(56px, 8vw, 96px); }
.contact-layout {
  display: grid;
  grid-template-columns: 7fr 4fr;
  gap: 36px;
  align-items: start;
}
@media (max-width: 880px) { .contact-layout { grid-template-columns: 1fr; } }

.contact-form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(26px, 4vw, 42px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.field label {
  display: block;
  font-weight: 600;
  font-size: 0.93rem;
  margin-bottom: 8px;
}
.field .req { color: var(--accent); }
.field .opt { color: var(--ink-mute); font-weight: 400; font-size: 0.8rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.hp-field { position: absolute !important; left: -9999px !important; }

.field-consent label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--ink-mute);
  cursor: pointer;
}
.field-consent input { width: auto; margin-top: 3px; accent-color: var(--accent); }

.form-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
button.pill { border: 0; }
.contact-mailto-link { font-size: 0.9rem; font-weight: 600; }
.form-status { font-weight: 600; font-size: 0.92rem; margin: 0; min-height: 1.2em; }
.form-status[data-kind="error"] { color: #A14747; }
.form-status[data-kind="pending"] { color: var(--ink-mute); }

.form-success {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(30px, 5vw, 48px);
}
.form-success-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-deep);
  margin-bottom: 16px;
}
.form-success h2 { font-size: 1.5rem; margin: 0 0 10px; }
.form-success p { color: var(--ink-mute); }

.contact-aside { display: flex; flex-direction: column; gap: 18px; }
.contact-aside-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 28px;
}
.contact-aside-title { font-size: 1.25rem; margin: 0 0 8px; }
.contact-aside-card p { color: var(--ink-mute); font-size: 0.94rem; margin: 0 0 14px; }
.contact-aside-email { font-weight: 700; }
.contact-meta {
  margin: 0;
  padding: 0 6px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 0.93rem;
}
.contact-meta dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.contact-meta dd { margin: 3px 0 0; }

/* Custom select (enhanced by js/main.js) */
.select { position: relative; }
.select.is-enhanced select {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}
.select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.97rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 18px;
  cursor: pointer;
  text-align: left;
}
.select-trigger:hover { border-color: var(--accent); }
.select-value.is-placeholder { color: #9AAFAB; }
.select-caret { flex: none; color: var(--ink-mute); }
.select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  list-style: none;
  margin: 0;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  max-height: 280px;
  overflow: auto;
}
.select-option {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.94rem;
  cursor: pointer;
}
.select-option.is-active { background: var(--accent-soft); }
.select-option[aria-selected="true"] { font-weight: 700; color: var(--accent-deep); }

/* Legal TOC (privacy / disclaimer / docs) - stops below the sticky masthead */
.legal-toc {
  position: sticky;
  top: 96px;
  font-size: 0.9rem;
}
/* On mobile the TOC shares the text's column - it must scroll away with
   the page, never stick over the content. Must FOLLOW the sticky rule:
   equal specificity, source order decides. */
@media (max-width: 880px) {
  .legal-toc { position: static; top: auto; }
}
.legal-toc a {
  display: block;
  padding: 7px 14px;
  border-radius: 10px;
  color: var(--ink-mute);
}
.legal-toc a:hover { color: var(--ink); background: rgba(20, 48, 46, 0.05); }
.legal-toc a.is-active { color: var(--accent-deep); background: var(--accent-soft); font-weight: 600; }

/* ---------- Reveal on scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.3, 1),
    transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .pill, .feature-card, .insight-link, .text-link .arrow, .pill .arrow { transition: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .research-strip { grid-template-columns: 1fr; }
  .colophon-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .product-grid { grid-template-columns: 1fr; }
  .hero-card { width: calc(100% - 16px); border-radius: 32px; }
  .cta-band { width: calc(100% - 16px); border-radius: 32px; text-align: left; }
  .cta-band h2 { margin-inline: 0; }
  .cta-band .cta-actions { justify-content: flex-start; }
  .band { width: calc(100% - 12px); border-radius: 30px; }
  .colophon { border-radius: 30px 30px 0 0; }
  .insight-link { flex-wrap: wrap; gap: 8px 20px; padding: 18px 20px; }
  .insight-date { width: auto; }
  .insight-link .arrow { display: none; }
}

@media (max-width: 520px) {
  .values-grid { grid-template-columns: 1fr; }
  .colophon-grid { grid-template-columns: 1fr; }
  .hero-actions .pill { width: 100%; justify-content: center; }
}