/* Marked — design system + chapter layout */

:root {
  --ink: #050507;
  --ink-2: #0b0c10;
  --navy: #061033;
  --navy-2: #08183f;
  --blue: #1b4bc4;
  --blue-2: #2f6ad0;
  --accent: #3d7bff;
  --paper: #f2f1ec;
  --paper-2: #e6e4dd;
  --white: #ffffff;

  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --gut: clamp(1.5rem, 5vw, 5.5rem);
  --ease: cubic-bezier(0.22, 0.61, 0.24, 1);
  --ease-cinema: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Mandatory so a chapter always comes to rest filling the viewport rather
     than halfway between two. Disabled below 900px and under reduced-motion,
     where forced snapping fights the user. */
  scroll-snap-type: y mandatory;
  background: var(--ink);
}

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--paper);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* A restrained light pass keeps every chapter alive after its entrance. */
body::before {
  content: '';
  position: fixed;
  z-index: 30;
  inset: -35%;
  pointer-events: none;
  opacity: 0.22;
  background: radial-gradient(circle at 50% 50%, rgba(92, 139, 255, 0.2) 0%, transparent 30%);
  mix-blend-mode: screen;
  animation: ambient-light 12s ease-in-out infinite alternate;
}
body[data-chapter='access']::before {
  background: radial-gradient(circle at 50% 50%, rgba(4, 16, 51, 0.13) 0%, transparent 30%);
  mix-blend-mode: multiply;
}

@keyframes ambient-light {
  from { transform: translate3d(-14%, -6%, 0) scale(0.92); }
  to { transform: translate3d(15%, 8%, 0) scale(1.08); }
}

/* ---------- chapter shell ---------- */

.chapter {
  --scene-brightness: 1;
  --scene-saturation: 1;
  --scene-opacity: 1;
  --scene-shift: 0px;
  position: relative;
  min-height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  display: grid;
  align-content: center;
  padding: clamp(4rem, 9vh, 7rem) var(--gut) clamp(7rem, 14vh, 9rem);
  overflow: hidden;
  isolation: isolate;
}

body.motion-ready .chapter {
  filter: brightness(var(--scene-brightness)) saturate(var(--scene-saturation));
  opacity: var(--scene-opacity);
  will-change: filter, opacity;
}

.chapter--ink { background: var(--ink); }
.chapter--navy {
  background:
    radial-gradient(120% 90% at 78% 18%, #0b2154 0%, transparent 62%),
    linear-gradient(#050d28, #030818);
}
.chapter--blue {
  background:
    radial-gradient(110% 80% at 50% 95%, #2f6ad0 0%, transparent 60%),
    linear-gradient(#0d3ba8, #1c4fc0);
}
.chapter--deep {
  background:
    radial-gradient(90% 70% at 50% 108%, rgba(47, 106, 208, 0.30) 0%, transparent 62%),
    radial-gradient(70% 60% at 12% 0%, rgba(28, 60, 140, 0.22) 0%, transparent 58%),
    linear-gradient(#070b1a, #04060d 62%, var(--ink));
}
.chapter--paper { background: var(--paper); color: var(--ink); }

/* Hairline seam between chapters, so each reads as its own page. */
.chapter + .chapter::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: currentColor;
  opacity: 0.12;
  z-index: 3;
}

.chapter__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  transform: translate3d(0, var(--scene-shift), 0);
  will-change: transform;
}

.chapter__inner--wide { grid-template-columns: minmax(0, 1fr); }

/* Copy column reveal, driven by .is-active from main.js */
.chapter__copy > * {
  opacity: 0;
  transform: translate3d(0, 32px, 0) scale(0.985);
  filter: blur(8px);
  transition: opacity 0.7s var(--ease-cinema), transform 0.9s var(--ease-cinema), filter 0.7s var(--ease-cinema);
  will-change: opacity, transform, filter;
}
.chapter.is-active .chapter__copy > * { opacity: 1; transform: none; filter: none; }
.chapter.is-active .chapter__copy > *:nth-child(2) { transition-delay: 0.07s; }
.chapter.is-active .chapter__copy > *:nth-child(3) { transition-delay: 0.14s; }
.chapter.is-active .chapter__copy > *:nth-child(4) { transition-delay: 0.21s; }
.chapter.is-active .chapter__copy > *:nth-child(5) { transition-delay: 0.28s; }

.chapter__inner > .visual,
#marked > .visual,
.chapter__inner > .tiers,
.chapter__inner > .enterprise,
.chapter__inner > .build {
  opacity: 0;
  transform: translate3d(34px, 20px, 0) scale(0.975);
  filter: blur(10px);
  transition: opacity 0.85s var(--ease-cinema) 0.1s, transform 1.05s var(--ease-cinema) 0.1s, filter 0.8s var(--ease-cinema) 0.1s;
  will-change: opacity, transform, filter;
}
.chapter.is-active .chapter__inner > .visual,
.chapter.is-active#marked > .visual,
.chapter.is-active .chapter__inner > .tiers,
.chapter.is-active .chapter__inner > .enterprise,
.chapter.is-active .chapter__inner > .build { opacity: 1; transform: none; filter: none; }
.chapter.is-active .chapter__inner > .enterprise { transition-delay: 0.22s; }

/* ---------- typography ---------- */


h1, h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 0.98;
  margin: 0 0 clamp(1.25rem, 3vh, 2rem);
  text-wrap: balance;
}
h1 { font-size: clamp(2.9rem, 6.4vw, 6rem); }
h2 { font-size: clamp(2.4rem, 5.2vw, 4.9rem); }

.lede {
  font-size: clamp(0.95rem, 1.05vw, 1.0625rem);
  line-height: 1.62;
  max-width: 34ch;
  opacity: 0.7;
  margin: 0 0 clamp(1.75rem, 4vh, 2.5rem);
}
.lede strong { font-weight: 500; opacity: 1; }

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

.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1.35rem;
  border: 0;
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  font: 500 0.8125rem/1 var(--sans);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.cta svg { transition: transform 0.35s var(--ease); }
.cta:hover { background: var(--accent); color: var(--white); }
.cta:hover svg { transform: translateX(4px); }
.chapter--paper .cta { background: var(--ink); color: var(--paper); }
.chapter--paper .cta:hover { background: var(--blue); }

.cta--ghost {
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
  opacity: 0.75;
}
.cta--ghost:hover { background: transparent; color: inherit; opacity: 1; }

/* ---------- visual column ---------- */

.visual {
  position: relative;
  min-height: clamp(320px, 62vh, 660px);
  height: 100%;
}

glyph-field {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}
glyph-field canvas { display: block; }

/* Full-bleed fields sit behind the whole chapter. */
glyph-field.bleed {
  position: absolute;
  inset: auto 0 0 0;
  height: 78%;
  z-index: 0;
  opacity: 0;
  transform: translate3d(0, 40px, 0) scale(1.02);
  filter: blur(10px);
  transition: opacity 0.9s var(--ease-cinema) 0.12s, transform 1.15s var(--ease-cinema) 0.12s, filter 0.9s var(--ease-cinema) 0.12s;
  will-change: opacity, transform, filter;
}

.chapter.is-active > glyph-field.bleed { opacity: 1; transform: none; filter: none; }

#pricing > glyph-field.bleed {
  height: 100%;
  opacity: 0;
}
.chapter.is-active#pricing > glyph-field.bleed { opacity: 0.5; }

#access > glyph-field.bleed {
  height: 25%;
}

#trust > glyph-field.bleed {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 20%, rgba(0, 0, 0, 0.22) 34%, rgba(0, 0, 0, 0.72) 46%, #000 56%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 20%, rgba(0, 0, 0, 0.22) 34%, rgba(0, 0, 0, 0.72) 46%, #000 56%, #000 100%);
}

/* Keep the summit and its flag in one coordinate system while scrolling. */
#trust .chapter__inner { transform: none; }

#trust::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(4, 17, 66, 0.55) 0%, rgba(6, 25, 86, 0.42) 36%, rgba(12, 45, 130, 0.2) 54%, rgba(18, 66, 160, 0.06) 68%, transparent 80%);
}

.trust-cloud {
  position: absolute;
  z-index: 1;
  left: -1%;
  bottom: -5%;
  width: clamp(18rem, 38vw, 34rem);
  opacity: 0;
  mix-blend-mode: screen;
  transform: translate3d(-18px, 24px, 0) scale(1.04);
  filter: blur(8px) saturate(0.45) brightness(0.92);
  transition: opacity 1.1s var(--ease-cinema) 0.35s, transform 1.2s var(--ease-cinema) 0.35s, filter 1s var(--ease-cinema) 0.35s;
  pointer-events: none;
}

#trust.is-active > .trust-cloud {
  opacity: 0.34;
  transform: none;
  filter: saturate(0.45) brightness(0.92);
}

#trust .stat__l {
  opacity: 0.82;
  text-shadow: 0 1px 0.65rem rgba(3, 18, 66, 0.68);
}

#trust.is-active .label {
  opacity: 0.86;
  text-shadow: 0 1px 0.6rem rgba(4, 24, 92, 0.9);
}
#trust .label b { opacity: 0.8; }

/* The hero building uses the whole viewport while the copy stays above it. */
#marked .hero-field {
  inset: 0;
  z-index: 0;
  opacity: 0;
  transform: scale(1.035);
  filter: blur(7px);
  transition: opacity 1.05s var(--ease-cinema), transform 1.25s var(--ease-cinema), filter 0.95s var(--ease-cinema);
  will-change: opacity, transform, filter;
  clip-path: polygon(
    67.2% 0,
    89.6% 0,
    89.6% 52.5%,
    100% 52.5%,
    100% 100%,
    0 100%,
    0 52.5%,
    67.2% 52.5%
  );
}
#marked.is-active .hero-field {
  opacity: 0.76;
  transform: none;
  filter: blur(0.35px);
}
#marked .visual { min-height: min(74vh, 720px); }

/* ---------- data labels ---------- */

.labels { position: absolute; inset: 0; pointer-events: none; }

.label {
  position: absolute;
  font-family: var(--mono);
  font-size: 0.625rem;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 1.1s var(--ease) 0.5s, transform 1.1s var(--ease) 0.5s;
  white-space: nowrap;
}
.chapter.is-active .label { opacity: 0.48; transform: none; }
.chapter.is-active .label::before { animation: signal-pulse 2.4s ease-in-out infinite; }
.label b { display: block; font-weight: 400; opacity: 0.55; font-size: 0.5625rem; }
.label--lead { opacity: 0; }
.chapter.is-active .label--lead { opacity: 0.85; }

/* Tick marks anchoring labels to the field. */
.label::before {
  content: '';
  position: absolute;
  top: 0.45em;
  width: 1.6rem;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
}
.label[data-tick='left']::before { right: 100%; margin-right: 0.5rem; }
.label[data-tick='right']::before { left: 100%; margin-left: 0.5rem; }
.label[data-tick='none']::before { display: none; }

@keyframes signal-pulse {
  0%, 100% { opacity: 0.18; transform: scaleX(0.7); }
  50% { opacity: 0.65; transform: scaleX(1); }
}

/* ---------- ticker (hero) ---------- */

.ticker {
  position: absolute;
  top: 0;
  right: 0;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  display: grid;
  gap: 0.45rem;
  z-index: 3;
  opacity: 0.85;
}
.ticker__row { display: grid; grid-template-columns: 5.5rem 5rem 4rem; gap: 0.75rem; }
.ticker__row span:nth-child(1) { opacity: 0.5; }
.ticker__row span:nth-child(3) { text-align: right; }
.ticker [data-q], .ticker [data-d], .stat__n, .tok-n { font-variant-numeric: tabular-nums; }
.up { color: #4ad995; }
.down { color: #ff6b6b; }

#marked .ticker,
#marked .label {
  color: var(--paper);
  background: rgba(5, 5, 7, 0.76);
  box-shadow: 0 0 1.5rem rgba(5, 5, 7, 0.9);
}
#marked .ticker { padding: 0.65rem 0.75rem; }
#marked .label { padding: 0.35rem 0.5rem; }
#marked.is-active .label { opacity: 0.82; }

/* ---------- stats ---------- */

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2rem, 5vw, 4.5rem);
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
}
.stat__n {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3.2vw, 3rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat {
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(0.96);
  filter: blur(5px);
  transition: opacity 0.55s var(--ease-cinema), transform 0.75s var(--ease-cinema), filter 0.55s var(--ease-cinema);
}
.chapter.is-active .stat { opacity: 1; transform: none; filter: none; }
.chapter.is-active .stat:nth-child(1) { transition-delay: 0.28s; }
.chapter.is-active .stat:nth-child(2) { transition-delay: 0.36s; }
.chapter.is-active .stat:nth-child(3) { transition-delay: 0.44s; }
.stat__l {
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-top: 0.6rem;
}

/* ---------- build chapter: code panel ---------- */

.build { display: grid; grid-template-columns: minmax(0, 1fr) 13rem; gap: clamp(1.5rem, 3vw, 3rem); }

.panel {
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(9, 11, 17, 0.72);
  backdrop-filter: blur(2px);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9);
}

.panel__tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--mono);
  font-size: 0.6875rem;
}
.panel__tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--paper);
  opacity: 0.4;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: opacity 0.25s;
}
.panel__tab:hover { opacity: 0.7; }
.panel__tab[aria-selected='true'] { opacity: 1; border-bottom-color: var(--accent); }

.panel__body {
  margin: 0;
  padding: 1.35rem 1.5rem 1.6rem;
  font-family: var(--mono);
  font-size: clamp(0.6875rem, 0.82vw, 0.8125rem);
  line-height: 1.85;
  overflow-x: auto;
  min-height: 17rem;
  tab-size: 2;
}
.tok-k { color: #7fa6ff; }
.tok-s { color: #c8b98f; }
.tok-n { color: #6fd3a8; }
.tok-p { opacity: 0.35; }
/* Live-updating numbers get a hairline underline so the flicker reads as data. */
.tok-n[data-live] { border-bottom: 1px solid rgba(111, 211, 168, 0.25); }

.endpoints {
  display: grid;
  align-content: start;
  gap: 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  padding-left: clamp(1rem, 2vw, 1.75rem);
}
.endpoints li {
  list-style: none;
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.45s var(--ease-cinema), transform 0.6s var(--ease-cinema);
}
.chapter.is-active .endpoints li { opacity: 1; transform: none; }
.chapter.is-active .endpoints li:nth-child(2) { transition-delay: 0.04s; }
.chapter.is-active .endpoints li:nth-child(3) { transition-delay: 0.08s; }
.chapter.is-active .endpoints li:nth-child(4) { transition-delay: 0.12s; }
.chapter.is-active .endpoints li:nth-child(5) { transition-delay: 0.16s; }
.chapter.is-active .endpoints li:nth-child(6) { transition-delay: 0.2s; }
.chapter.is-active .endpoints li:nth-child(7) { transition-delay: 0.24s; }
.endpoints a {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  color: inherit;
  text-decoration: none;
  opacity: 0.5;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: opacity 0.25s var(--ease), padding-left 0.25s var(--ease);
}
.endpoints a::after {
  content: 'GET';
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  opacity: 0;
  align-self: center;
  transition: opacity 0.25s;
}
.endpoints a:hover { opacity: 1; padding-left: 0.4rem; }
.endpoints a:hover::after { opacity: 0.6; color: var(--accent); }

/* ---------- trust flag ---------- */

.flag {
  position: absolute;
  /* --peak-x/--peak-y are published by <glyph-field peak> once the summit is
     located; the fallback only shows before the photo decodes. */
  /* --peak-nudge trims the detected centroid: the topmost row of an
     asymmetric ridge skews toward its gentler slope. */
  left: calc(var(--peak-x, 68.2%) + var(--peak-nudge, 22px));
  /* --peak-rise lifts the banner; the pole grows by the same amount so its
     base stays planted on the summit instead of floating above it. */
  top: calc(var(--peak-y, 30%) - 3.2rem - var(--peak-rise, 10px));
  z-index: 3;
  display: grid;
  gap: 2px;
  width: 1.15rem;
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(0.86);
  transition: opacity 0.55s var(--ease-cinema) 0.55s, transform 0.8s var(--ease-cinema) 0.55s;
}
.chapter.is-active .flag { opacity: 1; transform: none; }
.flag i { height: 3px; display: block; }
.chapter.is-active .flag i {
  transform-origin: left;
  animation: flag-breathe 1.8s ease-in-out infinite alternate;
}
.chapter.is-active .flag i:nth-child(2) { animation-delay: 0.08s; }
.chapter.is-active .flag i:nth-child(3) { animation-delay: 0.16s; }
.flag i:nth-child(1) { background: #ff9933; }
.flag i:nth-child(2) { background: #fff; }
.flag i:nth-child(3) { background: #138808; }
.flag::after {
  content: '';
  position: absolute;
  left: -2px;
  top: 0;
  width: 1px;
  height: calc(3.2rem + var(--peak-rise, 10px));
  background: rgba(255, 255, 255, 0.6);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.7s var(--ease-cinema) 0.62s;
}
.chapter.is-active .flag::after { transform: scaleY(1); }

@keyframes flag-breathe {
  from { transform: skewY(-2deg) scaleX(0.94); }
  to { transform: skewY(2deg) scaleX(1.06); }
}

/* ---------- nav pill ---------- */

.navpill {
  position: fixed;
  z-index: 40;
  bottom: clamp(1rem, 3vh, 1.75rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: rgba(8, 9, 13, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.85);
  max-width: calc(100vw - 2rem);
  overflow-x: auto;
  scrollbar-width: none;
  transition: opacity 0.65s var(--ease-cinema), transform 0.8s var(--ease-cinema);
}
body.motion-booting .navpill { opacity: 0; transform: translate3d(-50%, 18px, 0) scale(0.96); }
.navpill::-webkit-scrollbar { display: none; }

.navpill a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  color: #f2f1ec;
  font-size: 0.75rem;
  letter-spacing: 0.005em;
  text-decoration: none;
  opacity: 0.5;
  white-space: nowrap;
  transition: opacity 0.3s var(--ease), background 0.3s var(--ease);
}
.navpill a:hover { opacity: 0.85; }
.navpill a[aria-current='true'] { opacity: 1; background: rgba(255, 255, 255, 0.07); }

.navpill a i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.navpill a[aria-current='true'] i { opacity: 1; transform: none; }

/* ---------- masthead + scroll cue ---------- */

.masthead {
  position: fixed;
  z-index: 40;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(1.1rem, 2.4vh, 1.75rem) var(--gut);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  pointer-events: none;
  transition: color 0.6s var(--ease), opacity 0.65s var(--ease-cinema), transform 0.8s var(--ease-cinema);
}
body.motion-booting .masthead { opacity: 0; transform: translateY(-14px); }
body[data-chapter='access'] .masthead { color: var(--ink); }
.masthead a { color: inherit; text-decoration: none; }
.masthead__logo { display: flex; align-items: center; pointer-events: auto; }
.masthead__logo svg { display: block; height: 18px; width: auto; }

.cue {
  position: absolute;
  right: var(--gut);
  bottom: clamp(4.5rem, 12vh, 7rem);
  z-index: 3;
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.4;
  display: grid;
  justify-items: center;
  gap: 0.6rem;
}
.cue::after {
  content: '';
  width: 1px;
  height: 2.75rem;
  background: currentColor;
  animation: cue 2.6s var(--ease) infinite;
  transform-origin: top;
}
@keyframes cue {
  0% { transform: scaleY(0); }
  45% { transform: scaleY(1); }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  html { scroll-snap-type: none; }
  .chapter {
    min-height: auto;
    padding: clamp(5rem, 14vh, 7rem) var(--gut) clamp(6rem, 12vh, 7rem);
    align-content: start;
  }
  .chapter__inner { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  /* Stack instead of overlay: the field becomes a sized block and the ticker
     and labels flow above and below it. */
  .visual { min-height: 0; order: 2; display: flex; flex-direction: column; }
  .visual glyph-field:not(.hero-field) { position: relative; inset: auto; height: 58vh; min-height: 340px; }
  #marked .hero-field { position: absolute; inset: 0; height: 100%; min-height: 0; }
  .build { grid-template-columns: minmax(0, 1fr); }
  .endpoints {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 0.5rem;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5rem;
  }
  .ticker { position: static; margin-bottom: 2rem; justify-items: start; }
  .cue { display: none; }
  .lede { max-width: none; }
  /* Labels stack under the field rather than overlapping it on narrow screens. */
  .labels {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.5rem;
    margin-top: 1.25rem;
  }
  .label { position: static !important; white-space: normal; }
  .label::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; scroll-snap-type: none; }
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
  body.motion-ready .chapter { filter: none !important; opacity: 1 !important; }
  .chapter__inner { transform: none !important; }
  .chapter__copy > *, .label, .chapter__inner > .visual, .chapter__inner > .build,
  .chapter__inner > .tiers, .chapter__inner > .enterprise, .tier,
  .chapter > glyph-field.bleed, .stat, .flag, .endpoints li {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  #trust > .trust-cloud { opacity: 0.34 !important; transform: none !important; filter: saturate(0.45) brightness(0.92) !important; }
  body::before { display: none; }
  .chapter.is-active .label { opacity: 0.48; }
}

/* ---------- image licence attribution ---------- */

.site-credit {
  position: absolute;
  right: var(--gut);
  bottom: 1.25rem;
  z-index: 3;
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.06em;
  line-height: 1.7;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s var(--ease-cinema) 0.42s, transform 0.75s var(--ease-cinema) 0.42s;
  max-width: 34ch;
  margin: 0;
  text-align: right;
}
.chapter.is-active .site-credit { opacity: 0.4; transform: none; }
.site-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- privacy page ---------- */

.policy-page {
  min-height: 100vh;
  background: var(--ink);
  color: var(--paper);
  overflow-x: hidden;
}
.policy-page::before { display: none; }
.policy-header {
  width: min(calc(100% - 2 * var(--gut)), 1100px);
  margin: 0 auto;
  padding: 2rem 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid rgba(242, 241, 236, 0.18);
}
.policy-brand, .policy-back, .policy-footer a { color: inherit; text-decoration: none; }
.policy-brand { display: inline-flex; align-items: center; }
.policy-brand img { display: block; width: 82px; height: auto; filter: invert(1); }
.policy-back { font-size: 0.8rem; opacity: 0.68; }
.policy-back:hover, .policy-footer a:hover { opacity: 1; }
.policy-shell { width: min(calc(100% - 2 * var(--gut)), 880px); margin: 0 auto; padding: clamp(5rem, 10vw, 9rem) 0 7rem; }
.policy-kicker { margin: 0 0 1.5rem; font: 500 0.75rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.policy-page h1 { max-width: 10ch; margin-bottom: 1.5rem; font-size: clamp(3.5rem, 8vw, 7rem); }
.policy-intro { max-width: 44rem; margin: 0; font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.65; color: rgba(242, 241, 236, 0.78); }
.policy-updated { margin: 1.5rem 0 0; font: 0.75rem/1.5 var(--mono); color: rgba(242, 241, 236, 0.52); }
.policy-callout { margin: clamp(3rem, 8vw, 6rem) 0; padding: 1.5rem; border: 1px solid rgba(61, 123, 255, 0.62); background: rgba(61, 123, 255, 0.09); }
.policy-callout strong { display: block; margin-bottom: 0.65rem; font-size: 1.05rem; font-weight: 500; }
.policy-callout p { margin: 0; color: rgba(242, 241, 236, 0.76); }
.policy-contents { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem 2rem; padding: 1.5rem 0 3rem; border-top: 1px solid rgba(242, 241, 236, 0.18); border-bottom: 1px solid rgba(242, 241, 236, 0.18); }
.policy-contents a { color: var(--paper); font: 0.9rem/1.4 var(--mono); text-decoration: none; opacity: 0.7; }
.policy-contents a:hover { opacity: 1; }
.policy-article { padding-top: 2rem; }
.policy-article section { max-width: 780px; padding: 2.5rem 0; border-bottom: 1px solid rgba(242, 241, 236, 0.12); scroll-margin-top: 2rem; }
.policy-article h2 { margin-bottom: 1rem; font: 400 clamp(1.8rem, 3vw, 2.6rem)/1.1 var(--serif); letter-spacing: -0.01em; }
.policy-article p, .policy-article li { font-size: 1rem; line-height: 1.78; color: rgba(242, 241, 236, 0.77); }
.policy-article p { margin: 0 0 1rem; }
.policy-article p:last-child { margin-bottom: 0; }
.policy-article a { color: var(--paper); text-underline-offset: 3px; }
.policy-article ul { margin: 1rem 0 0; padding-left: 1.25rem; }
.policy-article li { margin: 0.65rem 0; padding-left: 0.25rem; }
.policy-article strong { color: var(--paper); font-weight: 500; }
.policy-table-wrap { overflow-x: auto; margin: 1.5rem 0; }
.policy-article table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 0.9rem; }
.policy-article th, .policy-article td { padding: 0.85rem 0.75rem; border-bottom: 1px solid rgba(242, 241, 236, 0.14); text-align: left; vertical-align: top; line-height: 1.55; }
.policy-article th { color: var(--paper); font: 500 0.72rem/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.policy-article td { color: rgba(242, 241, 236, 0.72); }
.policy-article td:first-child { width: 22%; color: var(--paper); }
.policy-footer { width: min(calc(100% - 2 * var(--gut)), 1100px); margin: 0 auto; padding: 2rem 0 3rem; display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; color: rgba(242, 241, 236, 0.54); font-size: 0.8rem; }
.policy-footer__logo { display: inline-flex; align-items: center; }
.policy-footer__logo img { display: block; width: 58px; height: auto; filter: invert(1); }

@media (max-width: 700px) {
  .policy-header { width: min(100% - 3rem, 1100px); }
  .policy-shell { width: min(100% - 3rem, 880px); padding-top: 4rem; }
  .policy-footer { width: min(100% - 3rem, 1100px); }
  .policy-contents { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .site-credit {
    position: relative;
    right: auto;
    bottom: auto;
    margin: 2rem 0 0;
    text-align: left;
  }
}


/* ---------- pricing ----------
   Cards reuse the .panel surface from the Build chapter, the serif figure
   from .stat__n and the mono metadata from .endpoints, so the chapter reads
   as the same system rather than a bolted-on pricing table. */

/* Four priced blocks are a lot for one 100vh chapter, so this chapter runs
   tighter than the rest: less padding, smaller headline, denser cards. */
#pricing { padding-block: clamp(3.25rem, 6.5vh, 5rem) clamp(5.5rem, 11vh, 7rem); }
#pricing .chapter__inner {
  align-items: stretch;
  gap: clamp(1.25rem, 2vw, 1.75rem);
}
#pricing h2 { font-size: clamp(1.8rem, 2.8vw, 2.6rem); margin-bottom: 0.6rem; }
#pricing .lede { margin-bottom: 0; }

.tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.85rem, 1.4vw, 1.25rem);
}

.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.1rem, 1.5vw, 1.5rem);
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(9, 11, 17, 0.72);
  backdrop-filter: blur(2px);
  border-radius: 3px;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9);
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease), transform 0.5s var(--ease-cinema);
}
.tier:hover { border-color: rgba(255, 255, 255, 0.24); transform: translateY(-3px); }

.tier--featured {
  border-color: rgba(61, 123, 255, 0.42);
  background: linear-gradient(rgba(18, 32, 66, 0.82), rgba(9, 11, 17, 0.82));
}
.tier--featured:hover { border-color: rgba(61, 123, 255, 0.65); }

.tier__ribbon {
  position: absolute;
  top: 0;
  right: clamp(1.1rem, 1.5vw, 1.5rem);
  transform: translateY(-50%);
  margin: 0;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--white);
  font-family: var(--mono);
  font-size: 0.5rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tier__name {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.5625rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
}

.tier__price {
  margin: 0.7rem 0 0;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  opacity: 0.45;
}
.tier__price span {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3.2vw, 3rem);
  line-height: 1;
  letter-spacing: -0.02em;
  opacity: 1;
  margin-right: 0.4rem;
  color: var(--paper);
}

.tier__for {
  margin: 0.7rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  opacity: 0.65;
  min-height: 2.35em;
}

.tier__list {
  list-style: none;
  margin: clamp(0.85rem, 1.5vh, 1.1rem) 0 clamp(1.1rem, 2.2vh, 1.5rem);
  padding: clamp(0.85rem, 1.5vh, 1.1rem) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  display: grid;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.03em;
  opacity: 0.66;
}
.tier__list li { display: flex; gap: 0.6rem; }
.tier__list li::before { content: '·'; opacity: 0.4; }
.tier__list b { font-weight: 400; color: var(--paper); opacity: 1; }

/* Pins every card's button to the bottom so they line up across the row. */
.tier__cta { margin-top: auto; align-self: flex-start; }

.enterprise {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding: clamp(1.05rem, 1.6vw, 1.5rem) clamp(1.25rem, 2.2vw, 2rem);
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(9, 11, 17, 0.5);
  border-radius: 3px;
}
.enterprise__name {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.5625rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
}
.enterprise__line {
  margin: 0.55rem 0 0;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.enterprise__body {
  margin: 0.45rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  opacity: 0.6;
  max-width: 52ch;
}

@media (max-width: 900px) {
  .tiers { grid-template-columns: minmax(0, 1fr); }
  .tier__for { min-height: 0; }
  .enterprise { flex-direction: column; align-items: flex-start; }
}


/* ---------- hero headline ----------
   The hero line must stay on ONE line, so it spans the full inner width
   rather than the left column, and its size is driven by vw with nowrap.
   The ticker and caption move to an absolutely positioned layer so they keep
   their corners once the grid collapses to a single column. */

#marked .chapter__inner { grid-template-columns: minmax(0, 1fr); }
#marked > .visual {
  position: absolute;
  inset: 0;
  z-index: 3;
  min-height: 0;
  height: auto;
  pointer-events: none;
}
/* Below the masthead, above the building's topmost glyph row (~145px in). */
#marked .ticker { top: clamp(4rem, 8vh, 5.25rem); right: 0; }
/* On the building's base, clear of the CTA over on the left. */
#marked .labels .label { left: auto; right: 0; bottom: 2%; text-align: right; }
#marked h1 {
  font-size: clamp(2rem, 5.8vw, 5.4rem);
}
/* nowrap only once Instrument Serif is confirmed loaded. The fallback serif
   is much wider, and with body{overflow-x:hidden} an overflowing nowrap line
   would be silently clipped; wrapping is the safer degradation. */
.serif-ready #marked h1 { white-space: nowrap; }
#marked .lede { max-width: 46ch; }

@media (max-width: 900px) {
  /* Below this the line cannot fit at a usable size, so let it wrap. */
  .serif-ready #marked h1 { white-space: normal; }
  #marked > .visual { position: static; }
  #marked .labels .label { text-align: left; }
  #marked h1 { font-size: clamp(2rem, 7.4vw, 3rem); }
  #marked .visual { position: static; }
}


/* Stat captions in the Trust chapter sit over the glyph field, so they need
   more weight than the default 0.6. */
#trust .stat__l { opacity: 0.82; }


/* Trust captions sit directly on the glyph field. Small uppercase mono at the
   default 0.48 disappears into the bright side of the mountain, so lift it and
   give it a shadow to separate it from the dots. */
#trust .label,
#trust.is-active .label {
  opacity: 1;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 10px rgba(3, 18, 58, 0.9), 0 0 2px rgba(3, 18, 58, 0.7);
}
/* The second line was 9px at 0.55 opacity over mid-blue: too faint to read. */
#trust .label b { opacity: 0.92; font-size: 0.625rem; }
#trust .label::before { opacity: 0.6; }