/* ============================================================
   Amberlock — base, shell and section styles
   Static CSS, no build step (§13.1). Cascade order:
   tokens.css -> site.css. Nothing else.
   ============================================================ */

/* ---- fonts -------------------------------------------------
   Self-hosted, latin subset, variable so one file covers every
   weight (§14.3). Aldrich is deliberately absent — the wordmark
   ships as outlined SVG. */

@font-face {
  font-family: "Space Grotesk Variable";
  src: url("../fonts/space-grotesk-var-latin.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Variable";
  src: url("../fonts/inter-var-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4 Variable";
  src: url("../fonts/source-serif-4-var-latin.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- reset -------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--resin);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 550;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-s);
}

::selection { background: var(--amber); color: var(--bone); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: var(--space-2xs);
  left: var(--space-2xs);
  z-index: 100;
  padding: var(--space-2xs) var(--space-s);
  background: var(--bone);
  color: var(--ink);
  border-radius: var(--radius-s);
  font-weight: 600;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---- layout primitives -------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }

/* Dividers are dashed, never solid (§13.2). */
.section--ruled { border-top: 1px dashed var(--hairline); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--bone-dim);
  margin: 0 0 var(--space-s);
}

.lede {
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  color: var(--bone-dim);
  max-width: var(--container-text);
}

/* Specimen caption — the one place the serif is allowed (§14.3). */
.specimen-label {
  font-family: var(--font-label);
  font-size: var(--step--1);
  font-style: italic;
  color: var(--bone-dim);
  letter-spacing: 0.01em;
}

/* ---- buttons and links -------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.7em 1.35em;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out),
              color var(--dur-hover) var(--ease-out),
              transform var(--dur-hover) var(--ease-out);
}

/* Amber fill + resin label: the amber is a graphic here, and the
   label sits on it at 5.9:1. Amber is never the text colour. */
.btn--primary { background: var(--amber); color: #100C08; }
.btn--primary:hover { background: var(--amber-bright); transform: translateY(-1px); }
.btn--primary:active { transform: none; }

.btn--ghost {
  background: transparent;
  color: var(--bone);
  border-color: var(--hairline);
}
.btn--ghost:hover { border-color: var(--bone-dim); background: rgba(245, 239, 230, 0.06); }

.btn--sm { font-size: var(--step--1); padding: 0.6em 1.1em; }

/* Text link with an amber rule under it — the rule is a graphic,
   the text stays --bone, so the amber body-text rule holds. */
.link-quiet {
  color: var(--bone);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--amber);
  padding-bottom: 2px;
  transition: color var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out);
}
.link-quiet:hover { color: var(--amber-bright); border-bottom-color: var(--amber-bright); }
.link-quiet::after { content: " \2192"; }

@media (prefers-reduced-motion: reduce) {
  .btn, .link-quiet { transition-duration: 1ms; }
  .btn--primary:hover { transform: none; }
}

/* ---- header / nav ------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--resin-veil);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-hover) var(--ease-out),
              padding var(--dur-hover) var(--ease-out);
}
.site-header[data-condensed="true"] { border-bottom-color: var(--hairline-solid); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  min-height: 4.5rem;
  transition: min-height var(--dur-hover) var(--ease-out);
}
.site-header[data-condensed="true"] .site-header__inner { min-height: 3.75rem; }

/* The full wordmark shows at every breakpoint and in the condensed
   state. The cabochon mark is favicon and app icon only — it never
   substitutes for the logo in the nav.
   150px on mobile still clears the ~140px two-tone floor (§14.4). */
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand__wordmark { width: 150px; height: auto; }

@media (min-width: 52rem) {
  .brand__wordmark { width: 168px; }
}

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.nav__link {
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--bone-dim);
  padding-block: var(--space-3xs);
  transition: color var(--dur-hover) var(--ease-out);
}
.nav__link:hover { color: var(--bone); }

.header__cta { margin-left: var(--space-m); }

.nav-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  background: none;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  color: var(--bone);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  padding: 0.5em 1em;
  cursor: pointer;
}

@media (max-width: 51.999rem) {
  .nav, .header__cta { display: none; }
}
@media (min-width: 52rem) {
  .nav-toggle { display: none; }
}

/* Mobile: full-screen overlay, five items stacked, CTA pinned
   bottom, one specimen as the only ornament (§6). */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--resin);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--gutter);
  padding-block-end: calc(var(--gutter) + env(safe-area-inset-bottom));
}
.mobile-nav[hidden] { display: none; }
.mobile-nav__top { display: flex; align-items: center; justify-content: space-between; }
.mobile-nav__list { display: grid; gap: var(--space-s); align-content: center; }
.mobile-nav__link {
  font-family: var(--font-display);
  font-size: var(--step-3);
  text-decoration: none;
  color: var(--bone);
}
.mobile-nav__ornament {
  width: 96px; margin-inline: auto; opacity: 0.65;
}
.mobile-nav__foot { display: grid; gap: var(--space-s); justify-items: stretch; }
.mobile-nav .btn { width: 100%; }

/* ---- hero (§7 #1) -------------------------------------------- */

.hero {
  padding-block: clamp(2.5rem, 1rem + 6vw, 5.5rem) var(--section-y);
}
.hero__grid {
  display: grid;
  gap: clamp(2rem, 1rem + 5vw, 4rem);
  align-items: center;
}
@media (min-width: 64rem) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; }
}

/* The positioning line runs long on purpose (§2), so the hero
   headline sits a step below the display maximum rather than
   wrapping into a wall. --step-6 is reserved for short headlines. */
.hero__title {
  font-size: var(--step-4);
  max-width: 24ch;
}
/* "Live in a day." is the outcome clause — amber, and well above
   the 24px large-text threshold, so the contrast rule holds. */
.hero__title em { font-style: normal; color: var(--amber); }

.hero__sub {
  margin-top: var(--space-m);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  color: var(--bone-dim);
  max-width: 46ch;
}

.hero__actions {
  margin-top: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-m);
}

.hero__note {
  margin-top: var(--space-m);
  font-size: var(--step--1);
  color: var(--bone-dim);
}

/* ---- hero specimen ------------------------------------------
   Static and clean. The Sealed -> Revived transition (§14.6) is
   deliberately unimplemented: the fractured Revived raster read as
   damage, and an edge overlay on intact amber read as clutter. The
   approach is parked for the marketing agent, so the hero is one
   unmodified specimen and nothing else.

   Consequence worth knowing: --cyan now appears nowhere on the
   site. That is correct rather than a gap — §14.2 reserves it for
   liveness, and there is currently no live-graph element. Do not
   reach for it as a general accent in the meantime. */

.hero-stage-wrap { margin: 0; }

.hero-stage {
  width: min(100%, 34rem);
  margin-inline: auto;
  border-radius: var(--radius-l);
  overflow: hidden;
}
.hero-stage__frame { width: 100%; height: auto; }

.hero-stage__caption {
  margin-top: var(--space-m);
  max-width: 34rem;
  margin-inline: auto;
}

/* Specimen note — what the creature means in our taxonomy. The
   serif is allowed here and only here (§14.3). */
.specimen-note {
  font-family: var(--font-label);
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--bone-dim);
}
.specimen-note b {
  font-style: italic;
  font-weight: 600;
  color: var(--bone);
}

/* ---- the gap (§7 #2) -----------------------------------------
   Three vertical bands, one idea each, one large specimen each.
   Each band fades in once on arrival — ordinary scrolling, no pin,
   no hijack, nothing that draws attention to itself (§13.2). */

.gap__head { max-width: var(--container-text); }
.gap__title { font-size: var(--step-4); }

.bands {
  margin-top: var(--space-2xl);
  display: grid;
}

.band {
  display: grid;
  gap: var(--space-l);
  align-items: center;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4rem);
  border-top: 1px dashed var(--hairline);
}
.band:first-child { border-top: 0; }

@media (min-width: 52rem) {
  .band { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: var(--space-2xl); }
  /* Alternate the specimen side so the eye zig-zags down the section.
     Explicit placement, not `order` — `order` would leave the copy in
     the narrow 22rem track and squeeze it to a column. */
  .band--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); }
  .band--flip .band__art  { grid-column: 2; grid-row: 1; }
  .band--flip .band__copy { grid-column: 1; grid-row: 1; }
}

/* Sealed context: no cyan may appear here, including in overlays. */
.band__art { display: grid; gap: var(--space-s); justify-items: start; }
.band__art img {
  width: min(100%, 17.5rem);
  height: auto;
  border-radius: var(--radius-l);
}
.band__art .specimen-note { max-width: 17.5rem; }

@media (max-width: 51.999rem) {
  .band__art { justify-items: center; text-align: center; }
}

.band__eyebrow {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--bone-dim);
  margin-bottom: var(--space-2xs);
}

.band__title {
  font-size: var(--step-3);
  max-width: 18ch;
}

/* One supporting paragraph per band. The three scannable lines
   below carry the point; this carries the argument. */
.band__lead {
  margin-top: var(--space-s);
  color: var(--bone-dim);
  max-width: 52ch;
}
.band__lead strong { color: var(--bone); font-weight: 600; }

/* Deliberately larger than body copy — these three lines are the
   scannable payload of the section, not supporting detail. */
.band__list {
  margin-top: var(--space-m);
  display: grid;
}
.band__list li {
  font-size: var(--step-1);
  line-height: 1.35;
  color: var(--bone-dim);
  padding-block: var(--space-xs);
  border-top: 1px dashed var(--hairline);
}
.band__list li:first-child { border-top: 0; padding-top: 0; }
.band__list strong { color: var(--bone); font-weight: 600; }
.band__list em { font-style: italic; color: var(--bone); }

/* The attach-don't-attack block. Raised surface, amber rule. */
.gap__attach {
  margin-top: var(--space-2xl);
  background: var(--resin-raised);
  border: 1px solid var(--hairline-solid);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-m);
  padding: clamp(1.5rem, 1rem + 2.5vw, 2.5rem);
  display: grid;
  gap: var(--space-m);
}
@media (min-width: 64rem) {
  .gap__attach { grid-template-columns: 1fr 1.4fr; align-items: start; gap: var(--space-xl); }
}
.gap__attach h3 { font-size: var(--step-2); max-width: 18ch; }
.gap__attach p { color: var(--bone-dim); }
.gap__attach p + p { margin-top: var(--space-s); }
.gap__attach strong { color: var(--bone); font-weight: 600; }

/* ---- footer -------------------------------------------------- */

.site-footer {
  border-top: 1px dashed var(--hairline);
  padding-block: var(--space-2xl) var(--space-xl);
  font-size: var(--step--1);
}
.site-footer__grid {
  display: grid;
  gap: var(--space-xl) var(--space-l);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 52rem) {
  .site-footer__grid { grid-template-columns: 1.4fr repeat(4, 1fr); }
}
.site-footer h2 {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--bone-dim);
  margin-bottom: var(--space-s);
}
.site-footer ul { display: grid; gap: var(--space-2xs); }
.site-footer a { color: var(--bone-dim); text-decoration: none; }
.site-footer a:hover { color: var(--bone); }
.site-footer__brand { display: grid; gap: var(--space-s); align-content: start; }
.site-footer__brand img { width: 150px; }
.site-footer__brand p { color: var(--bone-dim); max-width: 28ch; }

/* Specimen strip — all eight Sealed, quiet, hover reveals the label. */
.specimen-strip {
  margin-top: var(--space-2xl);
  padding-top: var(--space-l);
  border-top: 1px dashed var(--hairline);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-m) var(--space-s);
  justify-items: center;
}
@media (min-width: 52rem) {
  .specimen-strip { grid-template-columns: repeat(8, 1fr); }
  /* Closer to the ~96px floor where specimens still read (§14.5). */
  .specimen-strip__item,
  .specimen-strip__item img { width: 80px; }
  .specimen-strip__item img { height: 80px; }
}
.specimen-strip__item {
  margin: 0;
  text-align: center;
  width: 64px;
}
.specimen-strip__item img {
  width: 64px; height: 64px;
  border-radius: var(--radius-s);
  filter: grayscale(1);
  opacity: 0.45;
  transition: filter var(--dur-hover) var(--ease-out), opacity var(--dur-hover) var(--ease-out);
}
.specimen-strip__item:hover img,
.specimen-strip__item:focus-within img { filter: none; opacity: 1; }
.specimen-strip__item figcaption {
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-style: italic;
  color: var(--bone-dim);
  margin-top: var(--space-3xs);
  opacity: 0;
  transition: opacity var(--dur-hover) var(--ease-out);
}
.specimen-strip__item:hover figcaption,
.specimen-strip__item:focus-within figcaption { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .specimen-strip__item img,
  .specimen-strip__item figcaption { transition-duration: 1ms; }
}

.site-footer__legal {
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1px dashed var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-m);
  justify-content: space-between;
  color: var(--bone-dim);
}

/* ---- scroll-in ---------------------------------------------
   Elements marked [data-animate] start offset; motion.js clears
   them once. If JS never runs, .no-js reveals everything, so the
   page is never blank without script. */

.no-js [data-animate] { opacity: 1 !important; transform: none !important; }
[data-animate] { opacity: 0; transform: translateY(16px); }
@media (prefers-reduced-motion: reduce) {
  [data-animate] { opacity: 1; transform: none; }
}

/* ============================================================
   Page patterns — introduced with the full site build.
   Everything below reuses the tokens; no new colour values.
   ============================================================ */

/* ---- shared section furniture -------------------------------- */

.section-title { font-size: var(--step-4); max-width: 20ch; }

.prose { max-width: var(--container-text); display: grid; gap: var(--space-m); color: var(--bone-dim); }
.prose--lead { max-width: 34rem; }
.prose strong { color: var(--bone); font-weight: 600; }
.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--resin-raised);
  border: 1px solid var(--hairline-solid);
  border-radius: var(--radius-s);
  padding: 0.1em 0.4em;
}
.prose__aside {
  border-left: 2px solid var(--hairline);
  padding-left: var(--space-m);
  font-size: var(--step--1);
}

.note { margin-top: var(--space-m); font-size: var(--step--1); color: var(--bone-dim); }

/* ---- inner-page hero ----------------------------------------- */

.page-hero { padding-block: clamp(2rem, 1rem + 5vw, 4rem) var(--section-y); }
.page-hero__grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); align-items: center; }
@media (min-width: 64rem) {
  .page-hero__grid { grid-template-columns: 1.15fr 0.85fr; }
}
.page-hero__title { font-size: var(--step-5); max-width: 18ch; }
.page-hero__sub {
  margin-top: var(--space-m);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  color: var(--bone-dim);
  max-width: 48ch;
}
.page-hero__sub em { font-style: normal; color: var(--bone); font-weight: 600; }
.page-hero__note { margin-top: var(--space-m); font-size: var(--step--1); color: var(--bone-dim); max-width: 52ch; }
.page-hero__note strong, .page-hero__sub strong { color: var(--bone); font-weight: 600; }

.page-hero__art { margin: 0; display: grid; gap: var(--space-s); justify-items: center; }
.page-hero__art img { width: min(100%, 20rem); height: auto; border-radius: var(--radius-l); }
.page-hero__art figcaption { max-width: 32ch; }

/* ---- the specimen plate (§7 #3) ------------------------------- */

.plate {
  margin-top: var(--space-2xl);
  display: grid;
  gap: var(--space-xl) var(--space-l);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.plate__item img { width: 96px; height: 96px; border-radius: var(--radius-m); margin-bottom: var(--space-s); }
.plate__item h3 { font-size: var(--step-1); margin-bottom: var(--space-2xs); }
.plate__item p { color: var(--bone-dim); font-size: var(--step--1); line-height: 1.5; }

/* ---- outcome cards (§7 #4–6) --------------------------------- */

.outcomes {
  margin-top: var(--space-2xl);
  display: grid;
  gap: var(--space-xl);
}
@media (min-width: 52rem) { .outcomes { grid-template-columns: repeat(3, 1fr); gap: var(--space-l); } }

.outcome { display: grid; gap: var(--space-s); align-content: start; padding-top: var(--space-s); border-top: 1px dashed var(--hairline); }
.outcome__num { font-family: var(--font-display); font-size: var(--step--1); color: var(--amber); letter-spacing: var(--tracking-wide); }
.outcome h3 { font-size: var(--step-2); }
.outcome__lead { color: var(--bone-dim); }
.outcome__proof {
  color: var(--bone-dim);
  font-size: var(--step--1);
  border-left: 2px solid var(--amber);
  padding-left: var(--space-s);
}

/* ---- depth / feature split ----------------------------------- */

.depth, .feature { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); align-items: start; }
@media (min-width: 64rem) {
  .depth   { grid-template-columns: 1.2fr 0.8fr; }
  .feature { grid-template-columns: 1.2fr 0.8fr; }
}
.depth__body { color: var(--bone-dim); margin-top: var(--space-m); max-width: 56ch; }
.depth__body strong, .feature strong { color: var(--bone); font-weight: 600; }
.depth__art, .feature__art { margin: 0; display: grid; gap: var(--space-s); justify-items: center; }
.depth__art img, .feature__art img { width: min(100%, 17.5rem); height: auto; border-radius: var(--radius-l); }
.depth__art figcaption, .feature__art figcaption { max-width: 30ch; }
.feature__lead { font-size: var(--step-1); line-height: var(--leading-snug); color: var(--bone); margin-top: var(--space-m); }
.feature p { color: var(--bone-dim); margin-top: var(--space-m); max-width: 56ch; }

/* ---- steps --------------------------------------------------- */

.steps { margin-top: var(--space-2xl); display: grid; gap: var(--space-l); counter-reset: step; }
@media (min-width: 52rem) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { border-top: 1px dashed var(--hairline); padding-top: var(--space-s); }
.step__num {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--amber);
  line-height: 1;
  margin-bottom: var(--space-2xs);
}
.step h3 { font-size: var(--step-1); margin-bottom: var(--space-2xs); }
.step p { color: var(--bone-dim); font-size: var(--step--1); line-height: 1.55; }

/* ---- callout ------------------------------------------------- */

.callout {
  margin-top: var(--space-2xl);
  background: var(--resin-raised);
  border: 1px solid var(--hairline-solid);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-m);
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  max-width: 62rem;
}
.callout--wide { max-width: none; margin-top: 0; }
.callout h2, .callout h3 { font-size: var(--step-2); margin-bottom: var(--space-s); max-width: 24ch; }
.callout p { color: var(--bone-dim); max-width: 68ch; }
.callout p + p { margin-top: var(--space-s); }
.callout strong { color: var(--bone); font-weight: 600; }

/* ---- two-column split ---------------------------------------- */

.split { margin-top: var(--space-2xl); display: grid; gap: var(--space-xl); }
@media (min-width: 52rem) { .split { grid-template-columns: repeat(2, 1fr); gap: var(--space-2xl); } }
.split__title { font-size: var(--step-2); margin-bottom: var(--space-m); }
.split p { color: var(--bone-dim); max-width: 54ch; }
.split p + p { margin-top: var(--space-s); }
.split strong { color: var(--bone); font-weight: 600; }
.split__rule {
  margin-top: var(--space-m);
  border-top: 1px dashed var(--hairline);
  padding-top: var(--space-s);
}
.split__rule--todo { border-top-style: dotted; opacity: 0.85; }

/* ---- compare columns ----------------------------------------- */

.compare { margin-top: var(--space-2xl); display: grid; gap: var(--space-xl); }
@media (min-width: 52rem) { .compare { grid-template-columns: repeat(2, 1fr); gap: var(--space-2xl); } }
.compare__col h3 { font-size: var(--step-2); margin-bottom: var(--space-2xs); }
.compare__meta { font-size: var(--step--1); color: var(--bone-dim); margin-bottom: var(--space-m); letter-spacing: 0.01em; }
.compare__col p { color: var(--bone-dim); max-width: 52ch; }
.compare__col p + p { margin-top: var(--space-s); }

.tick-list { display: grid; gap: var(--space-xs); margin-top: var(--space-m); }
.tick-list li {
  position: relative;
  padding-left: var(--space-l);
  color: var(--bone-dim);
  line-height: 1.5;
}
.tick-list li::before {
  position: absolute;
  left: 0; top: 0;
  font-weight: 700;
}
/* Shape, not just colour — these read the same in greyscale. */
.tick-list--no  li::before { content: "\00D7"; color: var(--bone-dim); }
.tick-list--yes li::before { content: "\002B"; color: var(--amber); }

/* ---- chain (data model) -------------------------------------- */

.chain { margin-top: var(--space-2xl); display: grid; gap: 0; max-width: 62rem; }
.chain li {
  display: grid;
  gap: var(--space-2xs) var(--space-l);
  padding-block: var(--space-s);
  border-top: 1px dashed var(--hairline);
}
@media (min-width: 40rem) { .chain li { grid-template-columns: 12rem 1fr; align-items: baseline; } }
.chain b { font-family: var(--font-display); font-size: var(--step-1); font-weight: 550; }
.chain span { color: var(--bone-dim); }

/* ---- findings (severity ramp) --------------------------------
   §14.2: severity has its own ramp, outside the brand palette, and
   every severity colour is paired with a word. Rank never depends
   on hue alone. */

.findings { margin-top: var(--space-2xl); display: grid; gap: var(--space-l); }
@media (min-width: 52rem) { .findings { grid-template-columns: repeat(2, 1fr); } }

.finding { border-top: 1px dashed var(--hairline); padding-top: var(--space-s); }
.finding__sev {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-2xs);
}
.finding__dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.finding h3 { font-size: var(--step-1); margin-bottom: var(--space-2xs); }
.finding p:last-child { color: var(--bone-dim); font-size: var(--step--1); line-height: 1.55; }

.finding--critical .finding__sev { color: var(--sev-critical); }
.finding--critical .finding__dot { background: var(--sev-critical); }
.finding--high     .finding__sev { color: var(--sev-high); }
.finding--high     .finding__dot { background: var(--sev-high); }
.finding--medium   .finding__sev { color: var(--sev-medium); }
.finding--medium   .finding__dot { background: var(--sev-medium); }
.finding--low      .finding__sev { color: var(--sev-low); }
.finding--low      .finding__dot { background: var(--sev-low); }

/* ---- coverage: connector list and tiers ---------------------- */

.conn-list { margin-top: var(--space-2xl); display: grid; max-width: 66rem; }
.conn-list li {
  display: grid;
  gap: var(--space-2xs) var(--space-l);
  padding-block: var(--space-s);
  border-top: 1px dashed var(--hairline);
}
@media (min-width: 46rem) { .conn-list li { grid-template-columns: 16rem 1fr; align-items: baseline; } }
.conn-list b { font-family: var(--font-display); font-size: var(--step-0); font-weight: 550; }
.conn-list span { color: var(--bone-dim); font-size: var(--step--1); line-height: 1.55; }

.tier-list { margin-top: var(--space-2xl); display: grid; gap: var(--space-l); max-width: 66rem; }
.tier { border-top: 1px dashed var(--hairline); padding-top: var(--space-s); }
.tier__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-s);
  margin-bottom: var(--space-2xs);
}
.tier h3 { font-size: var(--step-1); }
.tier p { color: var(--bone-dim); max-width: 68ch; line-height: 1.55; }
.tier--out { opacity: 0.82; }

/* now / next / later. Word first, colour second. */
.tag {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 0.25em 0.7em;
  border-radius: var(--radius-pill);
  border: 1px solid;
  white-space: nowrap;
}
.tag--now   { color: var(--ok);       border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.tag--next  { color: var(--sev-medium); border-color: color-mix(in srgb, var(--sev-medium) 45%, transparent); }
.tag--later { color: var(--bone-dim); border-color: var(--hairline); }
.tag--none  { color: var(--sev-low);  border-color: var(--hairline); }
.eyebrow .tag { margin-left: var(--space-2xs); }

/* ---- vision: acts -------------------------------------------- */

.acts { margin-top: var(--space-2xl); display: grid; gap: var(--space-l); max-width: 66rem; }
.act { border-top: 1px dashed var(--hairline); padding-top: var(--space-s); }
.act__head { display: flex; align-items: center; gap: var(--space-s); margin-bottom: var(--space-2xs); }
.act__num { font-family: var(--font-display); font-size: var(--step--1); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--amber); }
.act h3 { font-size: var(--step-2); margin-bottom: var(--space-2xs); }
.act p { color: var(--bone-dim); max-width: 66ch; }

/* ---- trust grid / chips -------------------------------------- */

.trust-grid { margin-top: var(--space-2xl); display: grid; gap: var(--space-l); }
@media (min-width: 46rem) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 74rem) { .trust-grid { grid-template-columns: repeat(4, 1fr); } }
.trust-item { border-top: 1px dashed var(--hairline); padding-top: var(--space-s); }
.trust-item h3 { font-size: var(--step-0); font-weight: 600; margin-bottom: var(--space-2xs); }
.trust-item p { color: var(--bone-dim); font-size: var(--step--1); line-height: 1.55; }

.chips { margin-top: var(--space-l); display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.chip {
  font-family: var(--font-display);
  font-size: var(--step-0);
  padding: 0.4em 1em;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  color: var(--bone);
}

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

.closing__inner { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); align-items: center; }
@media (min-width: 64rem) { .closing__inner { grid-template-columns: 1.2fr 0.8fr; } }
.closing__title { font-size: var(--step-4); max-width: 18ch; }
.closing__sub { margin-top: var(--space-m); font-size: var(--step-1); line-height: var(--leading-snug); color: var(--bone-dim); max-width: 50ch; }
.closing__actions { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m); }
.closing__art { display: grid; gap: var(--space-s); justify-items: center; }
.closing__art img { width: min(100%, 15rem); height: auto; border-radius: var(--radius-l); }
.closing__art .specimen-note { max-width: 30ch; }

/* ---- forms ---------------------------------------------------- */

.form-block { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); align-items: start; }
@media (min-width: 64rem) {
  .form-block { grid-template-columns: 1fr 26rem; }
  .form-block--wide { grid-template-columns: 1fr 28rem; }
}
.form-block__copy { max-width: 46ch; }

.form { display: grid; gap: var(--space-m); }
.form--card {
  background: var(--resin-raised);
  border: 1px solid var(--hairline-solid);
  border-radius: var(--radius-l);
  padding: clamp(1.5rem, 1rem + 2vw, 2rem);
}
.form--inline { margin-top: var(--space-l); max-width: 26rem; }
.form .btn { justify-self: start; }

.field { display: grid; gap: var(--space-2xs); }
.field label {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--bone);
}
.field input[type="text"],
.field input[type="email"],
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--bone);
  background: var(--resin);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-s);
  padding: 0.7em 0.85em;
  width: 100%;
  transition: border-color var(--dur-hover) var(--ease-out);
}
.field textarea { resize: vertical; line-height: 1.5; }
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--bone-dim) 50%),
                    linear-gradient(135deg, var(--bone-dim) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.5em;
}
.field input::placeholder, .field textarea::placeholder { color: #8a8175; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--bone-dim); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 1px;
  border-color: var(--bone);
}
.field input[aria-invalid="true"] { border-color: var(--sev-critical); }

.field__hint, .field__note { font-size: var(--step--1); color: var(--bone-dim); line-height: 1.5; }
.field__note { border-left: 2px solid var(--sev-medium); padding-left: var(--space-xs); }
.field__err { font-size: var(--step--1); color: var(--sev-critical); }

.field--check { gap: var(--space-xs); }
.check { display: flex; align-items: flex-start; gap: var(--space-xs); cursor: pointer; font-weight: 600; }
.check input {
  appearance: none;
  width: 1.15rem; height: 1.15rem;
  flex: 0 0 auto;
  margin-top: 0.15em;
  border: 1px solid var(--bone-dim);
  border-radius: var(--radius-s);
  background: var(--resin);
  cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
}
.check input:checked { background: var(--amber); border-color: var(--amber); }
.check input:checked::after {
  content: "";
  display: block;
  width: 0.3rem; height: 0.6rem;
  margin: 0.08rem auto 0;
  border: solid #100C08;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.check input:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

/* Honeypot. Off-screen rather than display:none — some bots skip
   hidden fields, and this must look fillable to them. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form__status {
  font-size: var(--step--1);
  border-left: 2px solid var(--hairline);
  padding-left: var(--space-xs);
  color: var(--bone-dim);
}
.form__status--ok  { border-left-color: var(--ok); color: var(--bone); }
.form__status--err { border-left-color: var(--sev-critical); color: var(--bone); }

/* ---- contact / careers / research ---------------------------- */

.contact-grid { margin-top: var(--space-2xl); display: grid; gap: var(--space-l); }
@media (min-width: 52rem) { .contact-grid { grid-template-columns: repeat(3, 1fr); } }
.contact-card { border-top: 1px dashed var(--hairline); padding-top: var(--space-s); }
.contact-card h2 { font-size: var(--step-1); margin-bottom: var(--space-2xs); }
.contact-card__note { margin-top: var(--space-2xs); color: var(--bone-dim); font-size: var(--step--1); line-height: 1.5; }

.empty {
  margin-top: var(--space-2xl);
  background: var(--resin-raised);
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-l);
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  display: grid;
  gap: var(--space-s);
  justify-items: start;
  max-width: 46rem;
}
.empty img { border-radius: var(--radius-m); }
.empty h2 { font-size: var(--step-2); }
.empty p { color: var(--bone-dim); max-width: 56ch; }

.cats { margin-top: var(--space-2xl); display: grid; gap: var(--space-l); }
@media (min-width: 52rem) { .cats { grid-template-columns: repeat(3, 1fr); } }
.cat { border-top: 1px dashed var(--hairline); padding-top: var(--space-s); }
.cat h2 { font-size: var(--step-1); margin-bottom: var(--space-2xs); }
.cat p { color: var(--bone-dim); font-size: var(--step--1); line-height: 1.55; }

.thanks__head { max-width: 42rem; }

/* ---- 404 ------------------------------------------------------ */

.notfound { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); align-items: center; }
@media (min-width: 52rem) { .notfound { grid-template-columns: 0.8fr 1.2fr; } }
.notfound__art { margin: 0; display: grid; gap: var(--space-s); justify-items: center; }
.notfound__art img { width: min(100%, 17.5rem); height: auto; border-radius: var(--radius-l); }
.notfound__art figcaption { max-width: 30ch; }

/* ---- active nav item ------------------------------------------ */

.nav__link.is-active { color: var(--bone); }