/* ============================================================
   INDAGO — V2 site (Vectorio-aligned editorial system)
   Paper surfaces · ink type · teal accent · vermilion highlight.
   Google Sans Flex for voice, Google Sans Code for measurement.
   ============================================================ */

/* Self-hosted, sovereign — no Google Fonts CDN call. Both faces are the
   OFL-licensed latin-subset variable woff2 (wght axis), so one file covers
   every weight the site uses. Files live next to this stylesheet. */
@font-face {
  font-family: "Google Sans Flex";
  font-style: normal;
  font-weight: 1 1000;
  font-display: swap;
  src: url("fonts/GoogleSansFlex.woff2") format("woff2");
}
@font-face {
  font-family: "Google Sans Code";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("fonts/GoogleSansCode.woff2") format("woff2");
}

:root {
  /* Indago CI 2026 — navy structure · white/bone surfaces · electric-cyan signal.
     Var names kept so all rules re-skin; the --teal slot IS the Indago signal. */
  /* surfaces — white + bone */
  --paper:        #FFFFFF;
  --paper-2:      #F4F3EE;
  --paper-3:      #ECEDEA;
  --paper-tint:   #FAFAF8;
  --card:         #FFFFFF;

  /* ink (near-black, faint navy undertone) */
  --ink:          #0B0E14;
  --ink-2:        #2A2F39;
  --ink-3:        #5B616C;
  --ink-4:        #9AA0A9;
  --ink-inverse:  #FFFFFF;

  /* rules */
  --rule:         rgba(11,14,20,0.10);
  --rule-strong:  rgba(11,14,20,0.22);
  --rule-ink:     #0B0E14;

  /* INDAGO signal — electric cyan. On paper the DIM cut (legible as text);
     over-photo/dark grounds use --teal-bright = the bright POWER cyan. */
  --teal:         #00596B;            /* dim — on-paper text/links/accents */
  --teal-hover:   #00455A;
  --teal-bright:  #00D4FF;            /* POWER — over-photo / dark, the highlight */
  --teal-glow:    rgba(0, 212, 255, .55);
  --teal-soft:    rgba(0, 212, 255, 0.10);
  --teal-strong:  rgba(0, 212, 255, 0.20);

  /* secondary — navy (structure), this slot was vermilion */
  --vermilion:        #112A46;
  --vermilion-hover:  #1C3D63;
  --vermilion-soft:   rgba(17, 42, 70, 0.08);
  --vermilion-strong: rgba(17, 42, 70, 0.18);

  /* status — error kept off any brand red */
  --ok:   #16A34A;
  --warn: #B7791F;
  --err:  #BE123C;

  /* type — change --brand-face (one line) to swap the whole brand typeface */
  --brand-face: "Google Sans Flex";
  --sans:    var(--brand-face), -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --display: var(--brand-face), -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono:    "Google Sans Code", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* motion */
  --ease:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --fast:   140ms;
  --base:   240ms;
  --slow:   480ms;

  /* geometry */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --col-max: 1240px;
  --gutter:  32px;

  --shadow-card:
    0 0 0 0.5px rgba(14, 14, 12, 0.06),
    0 1px 2px rgba(14, 14, 12, 0.04),
    0 18px 36px -22px rgba(14, 14, 12, 0.18);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
/* anchored targets (#waitlist, #bundles, #proof, #step-*, …) clear the sticky
   masthead when jumped to, instead of hiding under it. */
section[id], article[id] { scroll-margin-top: 88px; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: "ss01", "kern", "liga";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip (not hidden) kills the 100vw full-bleed leak on iOS landscape WITHOUT
     establishing a scroll container — so the sticky masthead keeps working. */
  overflow-x: clip;
  background-image:
    radial-gradient(rgba(14,14,12,0.025) 1px, transparent 1px),
    radial-gradient(rgba(14,14,12,0.018) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
}

a { color: var(--ink); text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease); }
a:hover { color: var(--teal); border-bottom-color: var(--teal); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--teal-strong); color: var(--ink); }
code, kbd, samp { font-family: var(--mono); font-size: 0.92em; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* ============================================================
   masthead — hairline bar, paper-glass on scroll
   ============================================================ */
.masthead {
  position: sticky; top: 0; z-index: 30;
  background: rgba(242, 239, 230, 0.82);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--rule);
}
.masthead-inner {
  max-width: var(--col-max); margin: 0 auto;
  /* honour the landscape notch: never let brand/nav slip under the safe-area inset */
  padding: 16px max(var(--gutter), env(safe-area-inset-right)) 16px max(var(--gutter), env(safe-area-inset-left));
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 28px;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); border: 0; }
.brand:hover { color: var(--ink); border: 0; }
.brand .mark { width: 28px; height: 28px; color: var(--ink); display: inline-block; }
/* canonical mark uses currentColor — so .masthead.over-photo flips it via color: paper */
.brand .word {
  font-family: var(--display); font-weight: 700; font-size: 16px;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.brand .rule-v { width: 1px; height: 16px; background: var(--rule-strong); }
.brand .kicker {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  letter-spacing: 0.04em; text-transform: uppercase;
}

.nav { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }
.nav a {
  color: var(--ink-2); font-size: 13.5px; font-weight: 500;
  padding: 8px 14px; border-radius: var(--r-sm); border: 0;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.nav a:hover { color: var(--ink); background: var(--paper-3); border: 0; }
.nav a.active { color: var(--teal); }

.top-actions { display: flex; align-items: center; gap: 10px; }
.top-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; background: var(--ink); color: var(--paper);
  border-radius: var(--r-sm); font-size: 13px; font-weight: 500;
  letter-spacing: 0.01em; border: 1px solid var(--ink);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease);
  white-space: nowrap;
}
.top-cta:hover { background: var(--teal); color: var(--paper); border-color: var(--teal); transform: translateY(-1px); }
.top-cta.secondary { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.top-cta.secondary:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.top-cta .arrow { font-family: var(--mono); }

/* over-photo variant (used on cinematic hero) */
.masthead.over-photo {
  background: transparent; border-bottom: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  position: absolute; left: 0; right: 0; top: 0;
}
.masthead.over-photo .brand,
.masthead.over-photo .brand .word,
.masthead.over-photo .nav a,
.masthead.over-photo .top-cta.secondary { color: var(--paper); }
.masthead.over-photo .brand .kicker { color: rgba(242,239,230,.70); }
.masthead.over-photo .brand .rule-v { background: rgba(242,239,230,.30); }
.masthead.over-photo .nav a:hover { background: rgba(242,239,230,.10); color: var(--paper); }
.masthead.over-photo .nav a.active { color: var(--teal); }
.masthead.over-photo .top-cta { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.masthead.over-photo .top-cta:hover { background: var(--teal); color: var(--paper); border-color: var(--teal); }
.masthead.over-photo .top-cta.secondary { background: transparent; color: var(--paper); border-color: rgba(242,239,230,.40); }
.masthead.over-photo .top-cta.secondary:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.masthead.over-photo .brand .mark { color: var(--paper); }

/* ── hamburger + drawer (narrow displays) ── */
.masthead .hamburger {
  display: none;
  width: 36px; height: 36px; padding: 6px;
  flex-direction: column; justify-content: center; gap: 5px;
  background: transparent; border: 0; cursor: pointer;
}
.masthead .hamburger span {
  display: block; width: 100%; height: 2px;
  background: var(--ink); border-radius: 1px;
  transition: transform .26s var(--ease), opacity .2s var(--ease);
  transform-origin: center;
}
.masthead.over-photo .hamburger span { background: var(--paper); }
.masthead .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.masthead .hamburger.open span:nth-child(2) { opacity: 0; }
.masthead .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-drawer {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: rgba(14,14,12,.96);
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  border-bottom: 1px solid rgba(242,239,230,.10);
  padding: 8px var(--gutter) 24px;
  display: none;
  flex-direction: column;
  z-index: 29;
}
.nav-drawer.open { display: flex; }
.nav-drawer > a {
  padding: 16px 0;
  font-family: var(--sans);
  font-size: 18px; font-weight: 500;
  color: rgba(242,239,230,.85);
  border: 0;
  border-bottom: 1px solid rgba(242,239,230,.08);
  letter-spacing: .01em;
}
.nav-drawer > a:hover { color: var(--paper); border-bottom-color: rgba(242,239,230,.18); }
.nav-drawer > a.active { color: var(--teal-bright); }
.nav-drawer .drawer-actions {
  margin-top: 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.nav-drawer .drawer-actions a {
  padding: 13px 18px;
  text-align: center;
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 14.5px; font-weight: 500;
  border-bottom: 0; color: var(--paper);
}
.nav-drawer .drawer-actions .cta-sec {
  background: transparent;
  border: 1px solid rgba(242,239,230,.30);
}
.nav-drawer .drawer-actions .cta-sec:hover { background: rgba(242,239,230,.06); }
.nav-drawer .drawer-actions .cta-pri { background: var(--paper); color: var(--ink); }
.nav-drawer .drawer-actions .cta-pri:hover { background: var(--teal-bright); color: var(--ink); }

@media (max-width: 980px) {
  .masthead-inner { grid-template-columns: 1fr auto; gap: 16px; }
  .masthead .nav, .masthead .top-actions { display: none; }
  .masthead .hamburger { display: flex; }
  .cine .credit, .cine .hint { display: none; }
  .cine .bottom { padding-bottom: 56px; }
}

/* ============================================================
   page shell
   ============================================================ */
.page { max-width: var(--col-max); margin: 0 auto;
  padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left)); }
section.block { padding: clamp(100px, 13vw, 184px) 0; border-top: 1px solid var(--rule); }
/* A page-hero block (the first section that carries h1.hero-headline) sits
   closer under the sticky masthead than a mid-page section's full rhythm —
   one rule, so every content page is consistent without inline overrides. */
main.page > section.block:has(> h1.hero-headline) { padding-top: 56px; }
section.block:first-of-type { border-top: 0; }

/* dateline pill — mono, restrained */
.dateline {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  color: var(--ink-2); letter-spacing: 0.10em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 28px;
}
.dateline::before {
  content: ""; width: 28px; height: 1px;
  background: var(--teal); display: inline-block;
}

/* ============================================================
   headlines
   ============================================================ */
h1.hero-headline {
  font-family: var(--display); font-weight: 700;
  /* content-page hero (pricing, macos-app, …) — kept deliberately below the
     cinematic homepage .cine hero so inner pages don't shout louder than home.
     Single source of truth; no per-page inline overrides. */
  font-size: clamp(30px, 4vw, 52px); line-height: 1.04;
  letter-spacing: -0.03em; color: var(--ink);
  margin: 0 0 28px; max-width: 26ch;
}
h1.hero-headline em { font-style: italic; color: var(--teal); font-weight: 700; }
h1.hero-headline .vrm { color: var(--vermilion); }

h2.section-title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(32px, 4.4vw, 56px); line-height: 1.02;
  letter-spacing: -0.032em; color: var(--ink);
  margin: 0 0 22px; max-width: 22ch;
}
h2.section-title em { font-style: italic; color: var(--teal); font-weight: 700; }

h3.card-title {
  font-family: var(--display); font-weight: 600; font-size: 22px;
  letter-spacing: -0.018em; margin: 0 0 8px;
}

p.lead {
  font-family: var(--sans); font-size: 19px; line-height: 1.55;
  color: var(--ink-2); max-width: 56ch; margin: 0 0 36px;
}
p.lead em { font-style: italic; color: var(--ink); }
p { margin: 0 0 14px; }

.eyebrow {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 14px;
  display: flex; align-items: center; gap: 10px;
}
.eyebrow .num { color: var(--teal); }

/* ============================================================
   buttons
   ============================================================ */
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px; border-radius: var(--r-sm);
  font-size: 14.5px; font-weight: 500; border: 1px solid transparent;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.btn .arrow { font-family: var(--mono); transition: transform var(--fast) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-primary:hover { background: var(--teal); border-color: var(--teal); color: var(--paper); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn-outline:hover { color: var(--ink); border-color: var(--ink); background: var(--paper-tint); }
.btn-text { color: var(--ink); padding: 13px 4px; border-bottom: 1px solid var(--rule-strong); border-radius: 0; }
.btn-text:hover { color: var(--teal); border-bottom-color: var(--teal); }

/* ============================================================
   CINEMATIC HERO — full-bleed photo, single bold sentence
   ============================================================ */
.cine {
  /* Roomier vertical footprint (matches the Vectorio sibling hero). The old
     92vh / max-960 cap was ~40px too short for this page's content: with the
     168px top-rule inset the 1fr middle row collapsed and the .bottom flow row
     overflowed the capped height, colliding with the absolutely-pinned
     .credit/.hint at bottom:24px (clipped at the teal frame). */
  position: relative; height: 100vh; min-height: 720px; max-height: 1000px;
  margin: 0; padding: 0; color: var(--paper); overflow: hidden; background: #0a0a08;
}
.cine .photos { position: absolute; inset: 0; background: #0a0a08; }
.cine .photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  background-color: #0a0a08;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: brightness(0.72) contrast(1.08) saturate(0.86);
  opacity: 0; transition: opacity 1.4s var(--ease); will-change: opacity;
}
.cine .photo.active { opacity: 1; }
.cine .vignette {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,8,.55) 0%, rgba(10,10,8,.05) 40%, rgba(10,10,8,.5) 100%),
    radial-gradient(ellipse at center, rgba(10,10,8,0) 0%, rgba(10,10,8,.45) 100%);
  pointer-events: none;
}
.cine .grain {
  position: absolute; inset: 0; opacity: 0.18; mix-blend-mode: overlay;
  background-image:
    radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px; pointer-events: none;
}
.cine .frame { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--teal); }

.cine .inner {
  position: relative; z-index: 2;
  max-width: var(--col-max); margin: 0 auto; height: 100%;
  padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
  display: grid; grid-template-rows: auto 1fr auto;
}
.cine .top-rule { padding-top: 168px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cine .pill {
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(242,239,230,.85);
  display: inline-flex; gap: 10px; align-items: center;
  border: 1px solid rgba(242,239,230,.30); padding: 6px 12px; border-radius: 99px;
}
.cine .pill::before { content: ""; width: 6px; height: 6px; background: var(--teal); border-radius: 50%; }
.cine .pill b { color: var(--paper); font-weight: 600; }
.cine .pill.dim { color: rgba(242,239,230,.50); border-color: rgba(242,239,230,.18); }
.cine .pill.dim::before { background: rgba(242,239,230,.35); }
.cine .pill.vrm::before { background: var(--vermilion); }

.cine h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(48px, 7.6vw, 124px); line-height: 0.94; letter-spacing: -0.040em;
  color: var(--paper); max-width: 18ch; margin: 28px 0 0;
  text-shadow: 0 1px 60px rgba(0,0,0,.35);
}
.cine h1 em { font-style: italic; color: var(--teal-bright); font-weight: 800; text-shadow: 0 0 24px var(--teal-glow); }
.cine h1 .vrm { color: var(--vermilion); font-style: italic; font-weight: 800; }
/* tighter hero typography — fewer dense paragraphs, lighter h1 max-width */
.cine h1 { max-width: 22ch; }

.cine .rotator {
  display: inline-block; vertical-align: baseline; overflow: visible;
  text-align: left; white-space: nowrap;
  transition: width 380ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.cine .rotator-word {
  display: inline-block; color: var(--teal-bright);
  font-style: italic; font-weight: 800; white-space: nowrap;
  text-shadow: 0 0 24px var(--teal-glow);
  transition: opacity 220ms var(--ease);
}
.cine .rotator.swapping .rotator-word { opacity: 0; }
.cine .rotator-meter {
  position: absolute; visibility: hidden; white-space: nowrap;
  font: inherit; font-style: italic; font-weight: 800; pointer-events: none;
}

.cine .evidence {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 18px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(242,239,230,.78);
  border-top: 1px solid rgba(242,239,230,.16);
  padding-top: 14px;
}
.cine .evidence::before { content: ""; width: 6px; height: 6px; background: var(--teal); border-radius: 50%; }
.cine .evidence a {
  color: var(--paper); border-bottom: 1px solid rgba(242,239,230,.30); padding-bottom: 1px;
}
.cine .evidence a:hover { color: var(--teal); border-bottom-color: var(--teal); }

.cine .bottom {
  padding-bottom: 56px;
  display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 48px; align-items: end;
}
@media (max-width: 920px) { .cine .bottom { grid-template-columns: 1fr; gap: 24px; padding-bottom: 36px; } }

.cine .bottom p {
  font-family: var(--display); font-weight: 400; font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.4; color: rgba(242,239,230,.92);
  max-width: 46ch; margin: 0;
}
.cine .bottom p em { color: var(--paper); font-style: italic; font-weight: 700; }
.cine .bottom p .hl { color: var(--paper); font-style: italic; font-weight: 700; position: relative; }
.cine .bottom p .hl::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.10em;
  height: 0.10em; background: var(--teal-bright); border-radius: 1em;
  box-shadow: 0 0 18px var(--teal-glow);
}

.cine .actions { display: flex; gap: 18px; flex-wrap: wrap; justify-content: flex-end; row-gap: 12px; }
@media (max-width: 920px) { .cine .actions { justify-content: flex-start; } }
.cine .bottom { gap: 56px; }
@media (max-width: 920px) { .cine .bottom { gap: 28px; } }
.cine .bottom-left p { margin-bottom: 18px; }
.cine .btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px; font-size: 14.5px; font-weight: 500; border-radius: var(--r-sm);
  border: 1px solid transparent; transition: all var(--fast) var(--ease);
}
.cine .btn.primary { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.cine .btn.primary:hover { background: var(--teal); color: var(--paper); border-color: var(--teal); }
.cine .btn.outline { background: transparent; color: var(--paper); border-color: rgba(242,239,230,.46); }
.cine .btn.outline:hover { background: rgba(242,239,230,.10); color: var(--paper); border-color: var(--paper); }
/* mobile: shrink the two hero CTAs so they sit side-by-side on one row */
@media (max-width: 560px) {
  .cine .actions { gap: 10px; flex-wrap: nowrap; width: 100%; }
  .cine .actions .btn { flex: 1 1 0; min-width: 0; justify-content: center;
    padding: 12px 10px; font-size: 13px; gap: 6px; white-space: nowrap; }
}

.cine .credit {
  position: absolute; right: var(--gutter); bottom: 24px; z-index: 3;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(242,239,230,.55);
}
.cine .credit .loc { color: var(--teal); font-weight: 600; letter-spacing: .18em; margin-right: 6px; }
.cine .credit b { color: rgba(242,239,230,.85); font-weight: 600; }

.cine .hint {
  position: absolute; left: var(--gutter); bottom: 24px; z-index: 3;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(242,239,230,.7);
  display: inline-flex; align-items: center; gap: 8px;
}
.cine .hint .a { color: var(--teal); animation: bob 2.4s var(--ease) infinite; display:inline-block; }
@keyframes bob { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(3px) } }

@media (max-width: 920px) {
  .cine .credit, .cine .hint { display: none; }
  .cine .top-rule { padding-top: 124px; }
}

/* Short viewports (laptops, split windows): the 168px top inset + full
   content can't fit a viewport-height hero without the .bottom row riding
   down onto the bottom-pinned .credit/.hint. Reclaim the top inset and
   retire the corner captions before any collision can occur. */
@media (max-height: 780px) {
  .cine .top-rule { padding-top: 116px; }
  .cine .credit, .cine .hint { display: none; }
  .cine .bottom { padding-bottom: 40px; }
}

/* Bundle-page hero — same vertical footprint as the index so the rule
   pills, h1, subhead and action row don't compete with the photo
   credit overlay. Smaller h1 typography only. */
.cine.bundle { height: 92vh; min-height: 700px; max-height: 960px; }
.cine.bundle .top-rule { padding-top: 168px; }
.cine.bundle h1 { font-size: clamp(42px, 5.8vw, 88px); max-width: 22ch; }
.cine.bundle .bottom { padding-bottom: 56px; }
/* On bundle pages the photo is fixed — the rotating credit chip would be
   misleading. Hide the credit; keep the "Continue ↓" hint as a generic
   scroll cue (it doesn't reference photo content). */
.cine.bundle .credit { display: none; }

/* ============================================================
   WHAT IS INDAGO — the snap definition, dictionary-style.
   First thing readers see after the claims-bar.
   ============================================================ */
.definition {
  padding: clamp(64px, 7vw, 96px) 0 clamp(52px, 6vw, 72px);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-tint);
}
.definition .inner {
  max-width: var(--col-max); margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid; grid-template-columns: 200px minmax(0,1fr); gap: 56px;
  align-items: start;
}
@media (max-width: 920px) {
  .definition .inner { grid-template-columns: 1fr; gap: 28px; }
}
.definition .label {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3);
  border-top: 2px solid var(--ink); padding-top: 14px;
}
.definition .label .word {
  display: block; margin-top: 8px;
  font-family: var(--display); font-weight: 700; font-size: 28px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink);
}
.definition .label .pron {
  display: block; margin-top: 4px;
  font-family: var(--mono); font-size: 11px; font-weight: 400;
  letter-spacing: 0.04em; text-transform: none; color: var(--ink-3); font-style: italic;
}
.definition .body p.gloss {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(22px, 2.6vw, 32px); line-height: 1.32;
  letter-spacing: -0.014em; color: var(--ink);
  margin: 0 0 18px; max-width: 56ch;
}
.definition .body p.gloss em { font-style: italic; color: var(--teal); font-weight: 500; }
.definition .body p.gloss b { font-weight: 700; color: var(--ink); }
.definition .body .etymology {
  margin: 0 0 24px;
  font-family: var(--mono); font-size: 12px; color: var(--ink-3);
  letter-spacing: 0.02em; line-height: 1.55;
}
.definition .body .etymology b { color: var(--ink-2); font-weight: 600; }
/* equation rotator — INDAGO + [thing] + [you/team] = [outcome] */
.definition .eq-row {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding-top: 18px; border-top: 1px dashed var(--rule);
  font-family: var(--mono); font-size: 13px;
  min-height: 56px; /* prevents row from shrinking during swap */
}
.definition .eq-row .pre {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3); margin-right: 4px;
}
.definition .eq-part {
  display: inline-flex; align-items: center;
  padding: 7px 14px; border-radius: 99px;
  background: var(--paper-tint); border: 1px solid var(--rule-strong);
  color: var(--ink); white-space: nowrap;
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.definition .eq-part.indago {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
  font-weight: 700; letter-spacing: 0.12em;
}
.definition .eq-part.outcome {
  background: var(--teal); color: var(--paper); border-color: var(--teal);
  font-weight: 600;
  box-shadow: 0 0 0 3px var(--teal-soft);
}
.definition .eq-op {
  font-family: var(--display); font-weight: 500; font-size: 20px;
  color: var(--ink-3); padding: 0 2px;
  font-variant-numeric: tabular-nums;
}
.definition .eq-row.swapping .eq-part.rot { opacity: 0; transform: translateY(2px); }
.definition .eq-row .note {
  width: 100%;
  margin-top: 4px;
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  letter-spacing: 0.02em;
}

/* ============================================================
   CLAIMS RIBBON — concrete ROI claims directly under hero
   "100s of patents in seconds · weeks → minutes · try free"
   ============================================================ */
.claims-bar {
  background: var(--ink);
  color: var(--paper);
  border-top: 3px solid var(--teal-bright);
  border-bottom: 1px solid rgba(242,239,230,.10);
  position: relative;
}
.claims-bar .inner {
  max-width: var(--col-max); margin: 0 auto;
  padding: 6px var(--gutter);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
}
/* Each pillar is a LINK — a big ghosted index number to the left, the claim +
   its proof link to the right. Reads as an editorial index, not a slide stack. */
.claims-bar .claim {
  display: grid; grid-template-columns: clamp(46px, 6vw, 72px) 1fr; column-gap: 22px;
  align-items: start; padding: 30px 32px; text-decoration: none; position: relative;
  border-top: 1px solid rgba(242,239,230,.09);
  border-left: 1px solid rgba(242,239,230,.09);
  transition: background var(--fast) var(--ease);
}
.claims-bar .claim:nth-child(1), .claims-bar .claim:nth-child(2), .claims-bar .claim:nth-child(3) { border-top: 0; }
.claims-bar .claim:nth-child(3n+1) { border-left: 0; }
.claims-bar .claim:hover { background: rgba(0,212,255,.05); }
/* cyan keyline runs down the left edge on hover — the affordance cue */
.claims-bar .claim::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--teal-bright); transform: scaleY(0); transform-origin: top;
  transition: transform var(--med, .28s) var(--ease);
}
.claims-bar .claim:hover::before { transform: scaleY(1); }
.claims-bar .claim .figure {
  grid-column: 1; grid-row: 1 / 4;
  font-family: var(--display); font-weight: 800; line-height: .88;
  font-size: clamp(30px, 4vw, 46px); letter-spacing: -0.02em;
  color: rgba(0,212,255,.82); transition: color var(--fast) var(--ease);
}
.claims-bar .claim:hover .figure { color: var(--teal-bright); }
.claims-bar .claim .head {
  font-family: var(--display); font-size: clamp(17px, 1.6vw, 20px); font-weight: 700;
  line-height: 1.15; letter-spacing: -0.01em; color: var(--paper); margin-top: 2px;
}
.claims-bar .claim .sub {
  font-family: var(--sans); font-size: 13px; line-height: 1.45;
  color: rgba(242,239,230,.58); margin-top: 8px; max-width: 42ch;
}
.claims-bar .claim .see {
  margin-top: 12px;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase; color: rgba(242,239,230,.5);
  display: inline-flex; align-items: center; gap: 7px; transition: color var(--fast) var(--ease);
}
.claims-bar .claim:hover .see { color: var(--teal-bright); }
.claims-bar .claim .see .ar { color: var(--teal-bright); transition: transform var(--fast) var(--ease); }
.claims-bar .claim:hover .see .ar { transform: translateX(4px); }
/* the ∞ pillar spans the full width — surfaces the "unlimited context" moat as its own line */
.claims-bar .claim.claim-wide { grid-column: 1 / -1; border-left: 0;
  border-top: 1px solid rgba(242,239,230,.09); background: rgba(0,212,255,.045); }
.claims-bar .claim.claim-wide .figure { color: var(--teal-bright); font-size: clamp(34px, 5vw, 54px); }
.claims-bar .claim.claim-wide .sub { max-width: none; }
/* ---- Bundle-page proof claims use <div class="claim"> (NOT the homepage's
   <a class="claim"> index). Their .figure is a long stat PHRASE, so the fixed
   46-72px grid column clips it and it overlaps the copy. Stack instead: the
   stat is a full-width heading with the description flowing beneath it. ---- */
.claims-bar div.claim { display: block; color: rgba(242,239,230,.80);
  font-family: var(--sans); font-size: 15px; line-height: 1.5; }
.claims-bar div.claim .figure {
  display: block; grid-column: auto; grid-row: auto; max-width: none;
  font-size: clamp(26px, 3.1vw, 38px); line-height: 1.04; margin-bottom: 12px;
}
.claims-bar div.claim em { color: var(--paper); font-style: italic; font-weight: 600; }
@media (max-width: 860px) {
  .claims-bar .inner { grid-template-columns: 1fr; }
  .claims-bar .claim { border-left: 0; padding: 26px 24px; }
  .claims-bar .claim:nth-child(n+2) { border-top: 1px solid rgba(242,239,230,.09); }
  .claims-bar .claim:first-child { border-top: 0; }
}

/* (i) etymology popover — folds the long indāgāre note off the page to save space */
.info-i { position: relative; display: inline-grid; place-items: center; width: 17px; height: 17px;
  margin-left: 9px; padding: 0; border-radius: 50%; border: 1px solid var(--rule-strong, rgba(11,14,20,.28));
  background: transparent; color: var(--ink-3, #5B616C); font-family: var(--mono); font-size: 10.5px; line-height: 1;
  font-style: normal; text-transform: none; cursor: pointer; vertical-align: middle;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.info-i:hover, .info-i:focus-visible { border-color: var(--teal, #00A6C7); color: var(--teal, #00A6C7); outline: none; }
.info-pop { position: absolute; left: 0; top: calc(100% + 11px); width: min(340px, 80vw);
  background: var(--ink, #0B0E14); color: rgba(255,255,255,.9); padding: 13px 15px; border-radius: 10px;
  font-family: var(--sans); font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0; text-transform: none;
  text-align: left; box-shadow: 0 18px 44px -18px rgba(0,0,0,.55); z-index: 20;
  opacity: 0; visibility: hidden; transform: translateY(5px);
  transition: opacity var(--base) var(--ease), transform var(--base) var(--ease), visibility var(--base); }
.info-pop b { color: var(--teal-bright, #00D4FF); font-style: italic; }
.info-pop::before { content: ""; position: absolute; bottom: 100%; left: 15px; border: 6px solid transparent;
  border-bottom-color: var(--ink, #0B0E14); }
.info-i:hover .info-pop, .info-i:focus .info-pop, .info-i:focus-visible .info-pop {
  opacity: 1; visibility: visible; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .info-pop { transition: opacity .12s linear, visibility .12s; } }

/* ============================================================
   preamble — "what we are" below the cinematic hero
   ============================================================ */
.preamble {
  padding: 96px 0 64px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.preamble .row {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); gap: 64px; align-items: end;
  max-width: var(--col-max); margin: 0 auto; padding: 0 var(--gutter);
}
@media (max-width: 920px) { .preamble .row { grid-template-columns: 1fr; } }
.preamble h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(32px, 4vw, 56px); line-height: 1.02; letter-spacing: -0.032em;
  color: var(--ink); margin: 0; max-width: 16ch;
}
.preamble h2 em { font-style: italic; color: var(--teal); }
.preamble h2 .vrm { font-style: italic; color: var(--vermilion); }
.preamble p { color: #1f1c16; font-size: 19px; line-height: 1.62; font-weight: 440; max-width: 52ch; margin: 0; }

/* ============================================================
   FROM INSIDE THE LOOP — Claude / cloud-AI testimonials
   Real wording from live agent sessions, names redacted,
   product name normalized to "Indago".
   ============================================================ */
.testimonials {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
  margin-top: 28px;
}
@media (max-width: 1200px) { .testimonials { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px)  { .testimonials { grid-template-columns: 1fr; } }

/* before / after proof table (img 18) */
table.before-after {
  width: 100%; border-collapse: collapse;
  background: var(--paper-tint); border: 1px solid var(--rule);
  margin-top: 12px;
}
table.before-after col.before { width: 40%; }
table.before-after col.after  { width: 60%; }
table.before-after thead th {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
  text-align: left; padding: 12px 18px;
  border-bottom: 1px solid var(--rule-ink);
  background: var(--paper-2);
}
table.before-after thead th.before { color: var(--vermilion); }
table.before-after thead th.after  { color: var(--teal); }
table.before-after tbody td {
  padding: 12px 18px; vertical-align: top;
  border-bottom: 1px dashed var(--rule);
  font-size: 14px; line-height: 1.5; color: var(--ink-2);
}
table.before-after tbody td.before { color: var(--ink-2); }
table.before-after tbody td.after  { color: var(--ink); }
table.before-after tbody td code {
  font-family: var(--mono); font-size: 12.5px;
  color: var(--teal-hover); background: var(--teal-soft);
  padding: 1px 5px; border-radius: 3px;
}
table.before-after tbody tr:last-child td { border-bottom: 0; }

/* "cost of not using" list — vermilion-flagged consequences */
.cost-of-skipping {
  margin-top: 24px;
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
}
@media (max-width: 900px) { .cost-of-skipping { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .cost-of-skipping { grid-template-columns: 1fr; } }
.cost-of-skipping .item {
  background: var(--paper); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 6px;
}
.cost-of-skipping .item .label {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--vermilion);
}
.cost-of-skipping .item p {
  margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.5;
}
.cost-of-skipping .item p b { color: var(--ink); }
.testimonial {
  background: var(--paper); padding: 28px 26px 22px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
}
.testimonial::before {
  content: "“";
  position: absolute; top: -8px; left: 22px;
  font-family: var(--display); font-size: 88px; font-weight: 700;
  color: var(--teal); opacity: 0.18; line-height: 1;
}
.testimonial .from {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--vermilion); font-weight: 600;
  margin-bottom: 4px;
}
.testimonial blockquote {
  margin: 0; padding: 0;
  font-family: var(--display); font-weight: 400;
  font-size: 17px; line-height: 1.45; letter-spacing: -0.012em;
  color: var(--ink);
}
.testimonial blockquote em { font-style: italic; color: var(--teal); font-weight: 500; }
.testimonial blockquote b { font-weight: 700; color: var(--ink); }
.testimonial blockquote code {
  font-family: var(--mono); font-size: 13px;
  color: var(--teal-hover); background: var(--teal-soft);
  padding: 1px 5px; border-radius: 3px;
}
.testimonial .who {
  margin-top: auto;
  padding-top: 14px; border-top: 1px dashed var(--rule);
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink-3);
}
.testimonial .who b { color: var(--ink); font-weight: 600; }

/* tagline strip — the t-shirt candidates */
.taglines {
  margin-top: 36px;
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center;
}
.taglines .lab {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3); padding-right: 12px;
  border-right: 1px solid var(--rule); margin-right: 4px;
}
.taglines .tag {
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  font-family: var(--mono); font-size: 12px; color: var(--ink);
  background: var(--paper-tint);
  border: 1px solid var(--rule-strong);
  border-radius: 99px;
}

/* ============================================================
   LOCAL-FIRST MODES — 4-card grid (A · B · C · D)
   Your data stays local. Your AI is your choice.
   ============================================================ */
.modes {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
  margin-top: 28px;
}
@media (max-width: 1100px) { .modes { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px)  { .modes { grid-template-columns: 1fr; } }

.mode {
  background: var(--paper); padding: 26px 26px 22px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative; min-height: 460px;
  border-top: 3px solid var(--rule);
  transition: background var(--base) var(--ease), border-top-color var(--base) var(--ease);
}
.mode.a { border-top-color: var(--teal); }
.mode.b { border-top-color: var(--ok); }
.mode.c { border-top-color: var(--vermilion); }
.mode.d { border-top-color: var(--ink); }
.mode:hover { background: var(--card); }

.mode .letter {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--ink-3);
}
.mode.a .letter { color: var(--teal); }
.mode.b .letter { color: var(--ok); }
.mode.c .letter { color: var(--vermilion); }
.mode.d .letter { color: var(--ink); }

.mode .visual {
  height: 100px; margin: 4px 0 12px;
  background: var(--paper-tint);
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  position: relative; overflow: hidden;
}
.mode .visual svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mode h3 {
  font-family: var(--display); font-weight: 700; font-size: 20px;
  letter-spacing: -0.018em; line-height: 1.2; color: var(--ink);
  margin: 0 0 4px;
}
.mode h3 em { font-style: italic; color: var(--teal); font-weight: 700; }
.mode .desc {
  color: var(--ink-2); font-size: 14px; line-height: 1.5;
  margin: 0 0 14px;
}
.mode .leaves {
  margin-top: auto;
  padding-top: 14px; border-top: 1px dashed var(--rule);
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.02em;
  display: grid; gap: 6px;
}
.mode .leaves .row { display: grid; grid-template-columns: 80px 1fr; gap: 10px; align-items: baseline; }
.mode .leaves .lab { color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.14em; font-size: 9.5px; font-weight: 600; padding-top: 2px; }
.mode .leaves .out { color: var(--vermilion); font-weight: 500; }
.mode .leaves .in  { color: var(--ok); font-weight: 500; }
.mode.d .leaves .out { color: var(--ok); font-weight: 600; } /* air-gapped: nothing leaves */
.mode .audience {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.08em; color: var(--ink-3);
  margin-top: 12px;
}

/* The cloud-AI advantage sub-block — paid claim panel after the modes. */
.ai-edge {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
  margin-top: 36px;
}
@media (max-width: 900px) { .ai-edge { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .ai-edge { grid-template-columns: 1fr; } }
.ai-edge .edge {
  background: var(--paper); padding: 22px 22px 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.ai-edge .edge .figure {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--vermilion);
}
.ai-edge .edge h4 {
  font-family: var(--display); font-weight: 600; font-size: 17px;
  letter-spacing: -0.015em; color: var(--ink); margin: 2px 0 4px;
  line-height: 1.25;
}
.ai-edge .edge p {
  color: var(--ink-2); font-size: 13.5px; line-height: 1.5; margin: 0;
}
.ai-edge .edge p em { color: var(--ink); font-style: italic; font-weight: 600; }

/* ============================================================
   BUNDLE TILES — the centerpiece of the v2 information architecture
   each target group / use case finds its own door immediately
   ============================================================ */
.bundle-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
  margin-top: 28px;
}
@media (max-width: 1100px) { .bundle-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 820px)  { .bundle-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 540px)  { .bundle-grid { grid-template-columns: 1fr; } }

.bundle-tile {
  background: var(--paper); padding: 24px 24px 22px;
  display: flex; flex-direction: column; gap: 8px;
  position: relative; overflow: hidden; min-height: 320px;
  border-top: 2px solid transparent;
  transition: background var(--base) var(--ease), border-top-color var(--base) var(--ease), transform var(--base) var(--ease);
  color: var(--ink); border-bottom: 0; border-left: 0; border-right: 0;
}
.bundle-tile:hover { background: var(--card); border-top-color: var(--teal); transform: translateY(-2px); color: var(--ink); }
.bundle-tile .hook {
  font-family: var(--display); font-weight: 700;
  font-size: 22px; letter-spacing: -0.018em;
  color: var(--ink); line-height: 1.15;
  margin: 2px 0 12px;
}
.bundle-tile:hover .hook { color: var(--teal); }
.bundle-tile .visual {
  height: 120px; margin: 4px 0 14px;
  background: var(--paper-tint);
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  position: relative; overflow: hidden;
}
.bundle-tile .visual svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bundle-tile:hover .visual { background: var(--paper); }
.bundle-tile:hover .visual .accent { stroke: var(--teal); }
.bundle-tile:hover .visual .accent-fill { fill: var(--teal); }
.bundle-tile .badge {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .20em;
  text-transform: uppercase; color: var(--teal); font-weight: 600;
}
.bundle-tile.tier-paid .badge { color: var(--vermilion); }
.bundle-tile.tier-free .badge { color: var(--ok); }
.bundle-tile .name {
  font-family: var(--display); font-weight: 700; font-size: 21px;
  letter-spacing: -0.018em; color: var(--ink); line-height: 1.15;
  margin: 2px 0 4px;
}
.bundle-tile .audience {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  letter-spacing: .04em;
}
.bundle-tile .desc {
  color: var(--ink-2); font-size: 14.5px; line-height: 1.5; margin: 6px 0 0;
}
.bundle-tile .more {
  margin-top: auto; padding-top: 12px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em;
  color: var(--ink); display: inline-flex; gap: 8px; align-items: center;
}
.bundle-tile .more .arrow { transition: transform var(--fast) var(--ease); }
.bundle-tile:hover .more { color: var(--teal); }
.bundle-tile:hover .more .arrow { transform: translateX(4px); }

/* ============================================================
   product / capability cards (generic)
   ============================================================ */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px;
         background: var(--rule); border: 1px solid var(--rule); }
.cards.two  { grid-template-columns: repeat(2, minmax(0,1fr)); }
.cards.four { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 920px) { .cards, .cards.two, .cards.four { grid-template-columns: 1fr; } }

.card {
  background: var(--paper); padding: 32px;
  display: flex; flex-direction: column; min-height: 240px;
  position: relative; transition: background var(--base) var(--ease);
  color: var(--ink); border: 0;
}
.card:hover { background: var(--card); color: var(--ink); border: 0; }
.card .num {
  font-family: var(--mono); font-size: 11px; color: var(--teal);
  letter-spacing: 0.16em; margin-bottom: 14px;
}
.card .desc { color: var(--ink-2); font-size: 15px; margin: 0 0 18px; flex: 1; }
.card .meta {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-3);
  letter-spacing: 0.04em;
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--rule);
}
.card .more {
  margin-top: auto;
  font-family: var(--mono); font-size: 12px; color: var(--ink);
  letter-spacing: 0.04em;
  display: inline-flex; gap: 8px; align-items: center;
}
.card .more .arrow { transition: transform var(--fast) var(--ease); }
.card:hover .more .arrow { transform: translateX(4px); color: var(--teal); }

/* ============================================================
   DEMO BLOCK — "the question you would ask"
   editorial Q-and-A, ranked results, citation-grade
   ============================================================ */
.demo {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-md);
  box-shadow: var(--shadow-card); overflow: hidden;
}
.demo .demo-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--rule);
  background: var(--paper-tint);
}
.demo .demo-head .label {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}
.demo .demo-head .live {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--teal);
}
.demo .demo-head .live .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft);
  animation: pulse 1.6s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.9); }
}
.demo .q {
  padding: 18px 20px 14px;
  font-family: var(--mono); font-size: 13px; color: var(--ink);
  border-bottom: 1px dashed var(--rule);
}
.demo .q::before {
  content: "?  "; color: var(--teal); font-weight: 600;
}
.demo .a {
  padding: 16px 20px 20px;
  display: grid; gap: 14px;
}
.demo .hit {
  display: grid; grid-template-columns: 36px 1fr auto; gap: 14px;
  align-items: start; padding-bottom: 14px; border-bottom: 1px dashed var(--rule);
}
.demo .hit:last-child { border-bottom: 0; padding-bottom: 0; }
.demo .hit .rank {
  font-family: var(--mono); font-size: 13px; color: var(--teal);
  font-weight: 600; padding-top: 2px;
}
.demo .hit .body { font-size: 14px; color: var(--ink); line-height: 1.5; }
.demo .hit .body .src {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  letter-spacing: .04em; display: block; margin-top: 4px;
}
.demo .hit .body em { color: var(--teal); font-style: normal; font-weight: 600; }
.demo .hit .score {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  text-align: right; padding-top: 2px;
}
.demo .hit .score b { color: var(--ink); font-weight: 600; }
.demo .foot {
  padding: 12px 20px; border-top: 1px solid var(--rule);
  background: var(--paper-tint);
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  display: flex; justify-content: space-between; align-items: center;
  letter-spacing: .04em;
}

/* ============================================================
   FIGURES — big numbers panel
   ============================================================ */
.figures { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px;
           background: var(--rule); border-top: 1px solid var(--rule-ink); border-bottom: 1px solid var(--rule); }
@media (max-width: 920px) { .figures { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.figures .fig { background: var(--paper); padding: 36px 28px; }
.figures .fig .label {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 14px;
}
.figures .fig .n {
  font-family: var(--mono); font-size: clamp(36px, 4.6vw, 56px);
  font-weight: 500; line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 8px;
}
.figures .fig .n .unit { font-size: 16px; color: var(--ink-3); }
.figures .fig .desc { color: var(--ink-2); font-size: 13.5px; margin-top: 12px; max-width: 30ch; }

/* ============================================================
   tick-list — for "what's included" sections
   ============================================================ */
ul.tick-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
/* IMPORTANT: don't use display: grid on the <li> here — siblings (strong,
   the body text node, the meta span) would each become separate grid items
   placed by row, dropping the long text into the 24-px column. Use a
   relative-positioned padding-left so the arrow floats and the body text
   flows as normal inline content. */
ul.tick-list li {
  position: relative;
  padding: 0 0 14px 36px;
  border-bottom: 1px dashed var(--rule);
  line-height: 1.55;
  color: var(--ink-2);
}
ul.tick-list li::before {
  content: "→";
  position: absolute; left: 0; top: 0.1em;
  font-family: var(--mono); color: var(--teal);
  font-weight: 600;
}
ul.tick-list li strong {
  color: var(--ink); font-weight: 600;
  margin-right: 6px;
}
ul.tick-list li .meta {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  display: block; margin-top: 4px; letter-spacing: 0.04em;
}

/* ============================================================
   FINDINGS TABLE — editorial, monospace, tier chips on the left.
   ============================================================ */
table.findings {
  width: 100%; border-collapse: collapse;
  font-family: var(--mono); font-size: 12.5px;
  background: var(--paper-tint);
  border: 1px solid var(--rule);
  table-layout: fixed;
}
table.findings col.c-tier { width: 64px; }
table.findings col.c-fam  { width: 16%; }
table.findings col.c-rule { width: 28%; }
table.findings col.c-file { width: 1fr; }
table.findings col.c-conf { width: 90px; }
table.findings thead th {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
  text-align: left; padding: 10px 14px;
  border-bottom: 1px solid var(--rule-ink); background: var(--paper-2);
}
table.findings tbody td {
  padding: 9px 14px; vertical-align: middle;
  border-bottom: 1px dashed var(--rule);
  color: var(--ink); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
table.findings tbody tr:last-child td { border-bottom: 0; }
table.findings tbody tr:hover td { background: var(--card); }
table.findings td.col-conf { text-align: right; font-weight: 600; }
table.findings .tier {
  display: inline-block; width: 100%; text-align: center;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--paper);
  padding: 3px 6px; border-radius: 2px;
}
table.findings .tier.crit { background: var(--vermilion); }
table.findings .tier.high { background: var(--warn); }
table.findings .tier.med  { background: var(--teal); }
table.findings .tier.low  { background: var(--ink-3); }
table.findings td.col-fam { color: var(--ink-2); }
table.findings td.col-file { color: var(--ink-2); font-size: 12px; }
table.findings tfoot td {
  padding: 9px 14px; font-size: 11px; color: var(--ink-3);
  letter-spacing: 0.04em; background: var(--paper-2);
  border-top: 1px solid var(--rule-ink);
}
@media (max-width: 720px) {
  table.findings col.c-fam { width: 22%; }
  table.findings col.c-file { display: none; }
  table.findings td.col-file, table.findings th.col-file { display: none; }
}

/* ============================================================
   SAMPLE WORKFLOWS — input → method → output → result
   Per bundle page: 3 named real workflows with concrete numbers.
   ============================================================ */
.workflows {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
}
@media (max-width: 1100px) { .workflows { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
@media (max-width: 720px)  { .workflows { grid-template-columns: 1fr; } }
.workflow {
  background: var(--paper); padding: 28px 26px;
  display: flex; flex-direction: column;
  position: relative; min-height: 380px;
}
.workflow .wf-num {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 10px;
}
.workflow h3 {
  font-family: var(--display); font-weight: 700; font-size: 22px;
  letter-spacing: -0.018em; color: var(--ink);
  margin: 0 0 6px; line-height: 1.2;
}
.workflow h3 em { font-style: italic; color: var(--teal); }
.workflow .audience {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 18px;
}
.workflow ol {
  list-style: none; padding: 0; margin: 0 0 16px;
  display: grid; gap: 12px;
}
.workflow ol li {
  display: grid; grid-template-columns: 72px 1fr; gap: 14px;
  align-items: baseline;
}
.workflow ol li .lab {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
  padding-top: 2px;
}
.workflow ol li .body {
  font-family: var(--sans); font-size: 14.5px; color: var(--ink);
  line-height: 1.5;
}
.workflow ol li .body code {
  font-family: var(--mono); font-size: 12.5px;
  color: var(--teal-hover); background: var(--teal-soft);
  padding: 1px 5px; border-radius: 3px;
}
.workflow .result {
  margin-top: auto;
  padding: 14px 16px;
  border-top: 1px solid var(--rule-ink);
  background: var(--paper-tint);
  display: flex; flex-direction: column; gap: 4px;
}
.workflow .result .figure {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--vermilion);
}
.workflow .result .line {
  font-family: var(--display); font-size: 16px; color: var(--ink);
  font-weight: 500; line-height: 1.35;
}
.workflow .result .line b { font-weight: 700; }

/* status badge — verified / pending */
.workflow .status {
  position: absolute; top: 18px; right: 22px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 3px;
}
.workflow .status.verified {
  color: var(--ok); background: rgba(31,122,58,0.10);
  border: 1px solid rgba(31,122,58,0.30);
}
.workflow .status.pending {
  color: var(--warn); background: rgba(176,115,0,0.10);
  border: 1px solid rgba(176,115,0,0.30);
}
.workflow.is-pending .result { background: var(--paper-2); }
.workflow.is-pending .result .figure { color: var(--ink-3); }
.workflow.is-pending .result .line { color: var(--ink-2); }
.workflow.is-pending h3 em { color: var(--ink-2); }

/* ============================================================
   SOURCES STRIP — authority signals (USPTO · EPO · NIST · TED ...)
   ============================================================ */
.sources-strip {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 18px 0; border-top: 1px dashed var(--rule); border-bottom: 1px dashed var(--rule);
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-3);
  letter-spacing: 0.04em; align-items: center;
}
.sources-strip .lab {
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 10.5px;
  color: var(--ink-3); padding-right: 16px; border-right: 1px solid var(--rule); margin-right: 8px;
}
.sources-strip .src {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border: 1px solid var(--rule-strong); border-radius: 99px;
  background: var(--paper-tint); color: var(--ink-2);
}
.sources-strip .src:hover { border-color: var(--teal); color: var(--teal); }

/* ============================================================
   PULL QUOTE — persona testimonial
   ============================================================ */
.pull {
  border-left: 3px solid var(--teal);
  padding: 18px 0 18px 28px;
  margin: 32px 0;
  max-width: 56ch;
}
.pull q {
  font-family: var(--display); font-weight: 500; font-size: 22px;
  line-height: 1.4; letter-spacing: -0.012em; color: var(--ink);
  quotes: "\201C" "\201D";
}
.pull .who {
  display: block; margin-top: 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--ink-3);
}
.pull .who b { color: var(--ink); font-weight: 600; }

/* ============================================================
   PRICE TAG — bundle CTA "starts at"
   ============================================================ */
.pricetag {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 24px 0; border-top: 1px solid var(--rule-ink);
}
.pricetag .from {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3);
}
.pricetag .amount {
  font-family: var(--display); font-weight: 700; font-size: 36px;
  color: var(--ink); letter-spacing: -0.02em;
}
.pricetag .amount .unit { font-size: 14px; color: var(--ink-3); font-weight: 500; margin-left: 4px; }
.pricetag .note { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }

/* ============================================================
   RELATED-BUNDLES FOOTER — "also useful for…"
   ============================================================ */
.related {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
}
@media (max-width: 820px) { .related { grid-template-columns: 1fr; } }
.related .r-card {
  background: var(--paper); padding: 20px 22px;
  display: flex; flex-direction: column; gap: 6px;
  color: var(--ink); border: 0;
  transition: background var(--base) var(--ease);
}
.related .r-card:hover { background: var(--card); color: var(--ink); border: 0; }
.related .r-card .badge { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--teal); }
.related .r-card .name { font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: -0.012em; }
.related .r-card .desc { color: var(--ink-2); font-size: 13.5px; line-height: 1.45; }

/* ============================================================
   footer
   ============================================================ */
footer.site-foot {
  margin-top: 0;
  border-top: 1px solid var(--rule-ink);
  background: var(--paper-2);
}
.foot-grid {
  max-width: var(--col-max); margin: 0 auto;
  padding: 56px var(--gutter) 24px;
  display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap: 48px;
}
@media (max-width: 920px) { .foot-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 32px; } }
.foot-grid h4 {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 14px; font-weight: 500;
}
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.foot-grid a { font-size: 14px; color: var(--ink-2); }
.foot-grid a:hover { color: var(--teal); }
.foot-grid .word {
  font-family: var(--display); font-weight: 700; font-size: 22px;
  letter-spacing: -0.01em; color: var(--ink); margin: 0 0 14px;
}
.foot-grid p { color: var(--ink-2); font-size: 14px; max-width: 38ch; }
.foot-bottom {
  border-top: 1px solid var(--rule); padding: 18px var(--gutter);
  max-width: var(--col-max); margin: 0 auto;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em;
}
.foot-bottom .where { display: inline-flex; align-items: center; gap: 8px; }
.foot-bottom .where .dot { width: 6px; height: 6px; background: var(--teal); border-radius: 50%; }

/* ============================================================
   utilities
   ============================================================ */
.muted { color: var(--ink-3); }
.mono  { font-family: var(--mono); }
.cap   { letter-spacing: 0.10em; text-transform: uppercase; font-size: 11.5px; }
.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 64px; align-items: start; }
.split > * { min-width: 0; }
@media (max-width: 920px) { .split { grid-template-columns: 1fr; gap: 32px; } }
.split-1-2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: 64px; }
.split-1-2 > * { min-width: 0; }
@media (max-width: 920px) { .split-1-2 { grid-template-columns: 1fr; gap: 32px; } }
/* every grid track child gets min-width:0 so long mono / SVG content doesn't force overflow */
.cards > .card, .cards.two > .card, .cards.four > .card { min-width: 0; }
.bundle-tile, .workflow, .r-card, .lab-card { min-width: 0; }
.bundle-tile .visual, .lab-card .visual { min-width: 0; }
.bundle-tile .visual svg, .lab-card .visual svg { display: block; width: 100%; height: 100%; }
ul.tick-list li { min-width: 0; }
ul.tick-list li > * { min-width: 0; }
/* mono identifiers (indago.task.anomaly.code.dead-code.{lang}) have no spaces.
   force breaks anywhere so they don't push the column wider than its track. */
ul.tick-list li .meta,
.card .meta,
.workflow ol li .body code,
.workflow .audience,
.bundle-tile .audience,
.bundle-tile .desc,
.card .desc,
.demo .hit .src,
.r-card .desc {
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* the previous `overflow-wrap: anywhere` on the broad selector was too
   aggressive — it caused mid-word breaks once a column was narrow. The
   real bug was grid tracks defaulting to minmax(auto,1fr); see below. */
.spacer-l { height: 64px; }
.spacer-m { height: 32px; }
.caption {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-3);
  margin-top: 12px; letter-spacing: 0.02em;
}
.tag {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--ink-3);
  padding: 3px 8px; border: 1px solid var(--rule-strong); border-radius: 3px;
  background: var(--paper-tint); display: inline-block;
}
.tag.ok   { color: var(--ok);   border-color: rgba(31,122,58,0.3); background: rgba(31,122,58,0.06); }
.tag.warn { color: var(--warn); border-color: rgba(176,115,0,0.3); background: rgba(176,115,0,0.06); }
.tag.vrm  { color: var(--vermilion); border-color: rgba(214,58,20,0.3); background: var(--vermilion-soft); }

/* ============================================================
   Dynamic reveal — Apple/OpenAI scroll cadence.
   Content is NEVER hidden behind interaction; it fades up as it
   scrolls into view, then stays. Portable: depends only on tokens
   + the .js-reveal flag the inline head-script sets, so it drops
   into any Vectorio-family stylesheet unchanged.

   Graceful degradation, in order of guards:
     · no JS          → .js-reveal never set         → fully visible
     · reduced-motion → media query opts out          → fully visible
     · JS + motion    → hidden until .in-view fires    → animates in
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* block-level reveal: a section header or standalone element */
  .js-reveal .io {
    opacity: 0; transform: translateY(26px);
    transition: opacity .72s var(--ease), transform .72s var(--ease);
    will-change: opacity, transform;
  }
  .js-reveal .io.in-view { opacity: 1; transform: none; }

  /* staggered reveal: direct children cascade in sequence */
  .js-reveal .io[data-stagger] { opacity: 1; transform: none; transition: none; }
  .js-reveal .io[data-stagger] > * {
    opacity: 0; transform: translateY(20px);
    transition: opacity .62s var(--ease), transform .62s var(--ease);
    will-change: opacity, transform;
  }
  .js-reveal .io[data-stagger].in-view > * { opacity: 1; transform: none; }
  .js-reveal .io[data-stagger].in-view > *:nth-child(1)   { transition-delay: 0ms;   }
  .js-reveal .io[data-stagger].in-view > *:nth-child(2)   { transition-delay: 70ms;  }
  .js-reveal .io[data-stagger].in-view > *:nth-child(3)   { transition-delay: 140ms; }
  .js-reveal .io[data-stagger].in-view > *:nth-child(4)   { transition-delay: 210ms; }
  .js-reveal .io[data-stagger].in-view > *:nth-child(5)   { transition-delay: 280ms; }
  .js-reveal .io[data-stagger].in-view > *:nth-child(6)   { transition-delay: 350ms; }
  .js-reveal .io[data-stagger].in-view > *:nth-child(7)   { transition-delay: 410ms; }
  .js-reveal .io[data-stagger].in-view > *:nth-child(8)   { transition-delay: 470ms; }
  .js-reveal .io[data-stagger].in-view > *:nth-child(n+9) { transition-delay: 520ms; }

  /* legacy utility — kept working under the same gate */
  .js-reveal .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
  .js-reveal .reveal.d1 { transition-delay: 60ms; }
  .js-reveal .reveal.d2 { transition-delay: 140ms; }
  .js-reveal .reveal.d3 { transition-delay: 220ms; }
  .js-reveal .reveal.d4 { transition-delay: 300ms; }
  .js-reveal .reveal.d5 { transition-delay: 380ms; }
  .js-reveal .reveal.in-view { opacity: 1; transform: none; }
}

/* readability bumps on long-form pages */
main.page p { color: #1f1c16; font-weight: 440; line-height: 1.62; font-size: 16.5px; }
main.page p.lead { font-size: 19.5px; font-weight: 450; line-height: 1.55; }

/* ============================================================
   Reusable editorial primitives — replace per-element inline
   styles so the same building blocks port to the Vectorio site.
   ============================================================ */

/* sub-block: a titled passage nested inside a section.block */
.subblock { margin-top: clamp(40px, 5vw, 64px); }
.subblock > .sub-title {
  font-family: var(--display); font-size: 22px; font-weight: 600;
  letter-spacing: -0.014em; margin: 0 0 6px;
}
.subblock > .sub-title em { font-style: italic; }
.subblock > .sub-title .vrm { color: var(--vermilion); font-style: italic; }
.subblock > .sub-note {
  color: var(--ink-2); font-size: 14.5px; margin: 0 0 16px; max-width: 70ch;
}

/* inline code chip — teal-tinted, for verb/identifier callouts in prose */
code.chip {
  background: var(--teal-soft); color: var(--teal-hover);
  padding: 1px 5px; border-radius: 3px;
  font-family: var(--mono); font-size: 12.5px;
}

/* one-line pitch on ink ground — the dark editorial callout */
.pitch-callout {
  margin-top: clamp(40px, 5vw, 56px);
  padding: clamp(28px, 3vw, 36px);
  background: var(--ink); color: var(--paper);
  border-radius: var(--r-md); box-shadow: var(--shadow-card);
}
.pitch-callout .lab {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--teal-bright);
  display: block; margin-bottom: 12px;
}
/* main.page p (0,1,2) outranks a bare .pitch-callout p — scope to main.page so the
   light text wins on the dark block (otherwise only the cyan <em> stays readable) */
main.page .pitch-callout p {
  margin: 0; color: var(--paper); font-family: var(--display); font-weight: 500;
  font-size: clamp(20px, 2.4vw, 30px); line-height: 1.35; letter-spacing: -0.014em;
}
.pitch-callout p em { color: var(--teal-bright); font-style: italic; font-weight: 700; }

/* positioning band — the quieted definition + "answers must be right" lead */
.positioning .stance {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(22px, 2.6vw, 32px); line-height: 1.18;
  letter-spacing: -0.02em; color: var(--ink); margin: 0 0 14px; max-width: 24ch;
}
.positioning .stance em { font-style: italic; color: var(--teal); }

/* takeaway band — three big numbers that carry a section's whole point,
   so the reader spots the conclusion before reading any prose */
.takeaway {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
  border-radius: var(--r-md); overflow: hidden; margin: 4px 0 8px;
}
@media (max-width: 760px) { .takeaway { grid-template-columns: 1fr; } }
.takeaway .stat { background: var(--card); padding: clamp(22px,2.4vw,30px) clamp(20px,2vw,28px); }
.takeaway .stat .n {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(28px, 3.2vw, 42px); line-height: 1; color: var(--ink); display: block;
}
.takeaway .stat .n em { color: var(--teal); font-style: normal; }
.takeaway .stat .l { display: block; margin-top: 10px; font-size: 14.5px; color: var(--ink-2); line-height: 1.4; }

/* sources as a structured card grid (not a stacked wall of strips):
   each domain is a cell with its label as a header and chips wrapping below */
.sources-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
  border-radius: var(--r-md); overflow: hidden; margin-top: 8px;
}
.sources-grid .sources-strip {
  padding: 20px 22px; border: 0; background: var(--card); gap: 8px;
}
.sources-grid .sources-strip .lab {
  flex-basis: 100%; border: 0; padding: 0; margin: 0 0 4px;
  color: var(--teal); font-weight: 600;
}

/* ============================================================
   Section surfaces — Apple-style self-contained "scenes".
   Sections live inside the width-constrained main.page, so a plain
   background can't reach the viewport edge. The ::before paints a
   100vw band behind the (still-centred) content; body{overflow-x:
   hidden} absorbs the overflow. Alternating bands turn one long
   scroll into a sequence of distinct messages. Token-only → ports
   to the Vectorio site unchanged.

       claims-bar (ink) → definition (tint)
       I paper · II alt · III paper · IV alt · … · XI ink
   ============================================================ */
section.block { position: relative; }
/* every seam keeps a crisp hairline so the tone-shift reads as a boundary;
   the dark finale drops it (its own contrast is the divider) */
section.block.surf-ink { border-top: 0; }
section.block[class*="surf-"]::before {
  content: ""; position: absolute; z-index: -1;
  top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
}
/* the quiet alternate band — distinctly darker than --card so cards still pop.
   the inset top/bottom shadow lines give the band a panel edge so the seam
   reads even though the warm tones sit close together. */
.surf-2::before {
  background: var(--paper-2);
  box-shadow: inset 0 18px 26px -24px rgba(14,14,12,.28),
              inset 0 -18px 26px -24px rgba(14,14,12,.28);
}
.surf-tint::before{ background: var(--paper-tint); }
/* the dark finale — full text + button inversion */
.surf-ink::before { background: var(--ink); }
.surf-ink { color: var(--paper); }
.surf-ink h2.section-title { color: var(--paper); }
.surf-ink h2.section-title em { color: var(--teal-bright); }
.surf-ink p.lead, .surf-ink p { color: rgba(242,239,230,.86); }
.surf-ink p em, .surf-ink p.lead em { color: var(--paper); font-style: italic; }
.surf-ink code, .surf-ink code.chip { background: rgba(56,214,193,.14); color: var(--teal-bright); }
.surf-ink .dateline { color: rgba(242,239,230,.58); }
.surf-ink .dateline::before { background: var(--teal-bright); }
.surf-ink .caption { color: rgba(242,239,230,.5); }
.surf-ink .btn-primary { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.surf-ink .btn-primary:hover { background: var(--teal-bright); border-color: var(--teal-bright); color: var(--ink); }
.surf-ink .btn-outline { color: var(--paper); border-color: rgba(242,239,230,.40); }
.surf-ink .btn-outline:hover { color: var(--paper); border-color: var(--paper); background: rgba(242,239,230,.08); }
.surf-ink .btn-text { color: var(--paper); border-bottom-color: rgba(242,239,230,.40); }

/* ============================================================
   Value pillars — hero hook + per-pillar cyan keyline + wrapper
   ============================================================ */
.cine .hook { font-family: var(--display); font-weight: 700;
  font-size: clamp(18px, 2vw, 24px); letter-spacing: -0.01em; color: var(--paper); margin: 0 0 16px; }
.cine .hook em { font-style: normal; background: var(--teal-bright); color: var(--ink);
  padding: 0 9px; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.cine .hook .fa { color: var(--paper); font-weight: 700; }
.claims-bar .wrapper { max-width: var(--col-max); margin: 0 auto; padding: 14px var(--gutter) 6px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.02em; line-height: 1.5;
  color: rgba(242,239,230,.62); border-top: 1px solid rgba(242,239,230,.10); }
.claims-bar .wrapper .ar { color: var(--teal-bright); margin-right: 6px; }
.claims-bar .wrapper strong { color: var(--paper); font-weight: 700;
  box-shadow: inset 0 -0.16em 0 0 rgba(0,212,255,.45); padding: 0 2px; }

/* ============================================================
   MOBILE POLISH (2026-07-03) — the desktop scale collapses on phones:
   display-font body copy floors at 22px and leads are a fixed 19px, so
   narrow screens become a wall of large text with no hierarchy or air.
   This layer pulls body copy down, restores heading contrast + whitespace.
   ============================================================ */
@media (max-width: 680px) {
  :root { --gutter: 20px; }

  /* section rhythm — less towering vertical space between sections */
  section.block { padding: clamp(52px, 12vw, 76px) 0; }
  main.page > section.block:has(> h1.hero-headline) { padding-top: 40px; }

  /* headings keep punch but stop dominating; body now sits clearly below */
  h1.hero-headline { font-size: clamp(27px, 8vw, 40px); margin-bottom: 20px; }
  h2.section-title { font-size: clamp(25px, 7.4vw, 36px); line-height: 1.06; margin-bottom: 16px; }
  h3.card-title { font-size: 18px; }

  /* leads + display-font gloss/stance were the walls of oversized text */
  p.lead, main.page p.lead { font-size: 16px; line-height: 1.5; margin-bottom: 22px; }
  main.page p { font-size: 15.5px; line-height: 1.58; }

  .definition { padding: 44px 0 40px; }
  .definition .inner { gap: 22px; }
  .definition .label .word { font-size: 24px; }
  .definition .body p.gloss { font-size: 17.5px; line-height: 1.45; margin-bottom: 14px; }
  .positioning .stance { font-size: 17.5px; line-height: 1.36; max-width: none; }

  .ai-edge .edge { padding: 18px 16px 16px; }
  .ai-edge .edge h4 { font-size: 15.5px; }
  .ai-edge .edge p { font-size: 12.8px; line-height: 1.5; }

  /* claims-bar pillars — a touch tighter on phones */
  .claims-bar .claim { padding: 24px 20px; }
  .claims-bar .claim .head { font-size: 17px; }
  .claims-bar .claim .figure { font-size: 32px; }
  .claims-bar .claim.claim-wide .figure { font-size: 38px; }
}
@media (max-width: 420px) {
  h2.section-title { font-size: 23px; }
  .definition .body p.gloss, .positioning .stance { font-size: 16.5px; }
  p.lead, main.page p.lead { font-size: 15.5px; }
}