/* Clear Briefing website: one stylesheet. Highlighter tokens (docs/brand/tokens.md), light-first. */

/* ---------- Self-hosted fonts (fontsource 5.3.0, latin subset; see assets/fonts/MANIFEST.md) ---------- */
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  /* Brand colours */
  --cb-ink:       #141414;  /* near-black ink: text, chrome, buttons */
  --cb-marker:    #EDFF3B;  /* fluorescent marker: hero + closing bands, chips, mark (16.64:1 with ink) */
  --cb-paper:     #FFFFFF;  /* content paper */
  --cb-magenta:   #B0105F;  /* alert, on white only (6.81:1) */
  --cb-graphite:  #595954;  /* muted text (7.04:1 on white) */
  /* Derived tints */
  --cb-surface:   #FBFBF8;  /* cards, raised surfaces */
  --cb-rule:      #E4E4DC;  /* decorative dividers */
  --cb-control:   #8C8C84;  /* control borders (3.39:1 on white) */
  --cb-ink-2:     #2E2E2A;  /* hover on ink */
  --cb-marker-2:  #DDF020;  /* hover on marker */
  --cb-magenta-wash: #FBE7F0;

  /* Semantic aliases */
  --bg: var(--cb-paper); --surface: var(--cb-surface); --fg: var(--cb-ink); --heading: var(--cb-ink);
  --muted: var(--cb-graphite); --line: var(--cb-rule); --line-strong: var(--cb-control);
  --primary: var(--cb-ink); --primary-ink: var(--cb-marker); --primary-wash: var(--cb-marker);
  --accent: var(--cb-ink); --accent-ink: var(--cb-marker); --button-hover: var(--cb-ink-2); --button-border: var(--cb-ink);
  --link: var(--cb-ink); --link-hover: var(--cb-ink); --focus: var(--cb-ink);
  --alert: var(--cb-magenta); --alert-ink: var(--cb-paper); --alert-wash: var(--cb-magenta-wash);
  --chrome-bg: var(--cb-ink); --chrome-fg: var(--cb-paper); --chrome-muted: #BDBDB5; --chrome-line: #4A4A45;
  --chrome-mark: var(--cb-marker); --chrome-button-bg: var(--cb-marker); --chrome-button-fg: var(--cb-ink);
  --chrome-button-hover: var(--cb-marker-2); --chrome-focus: var(--cb-marker);
  --band-bg: var(--cb-marker); --band-fg: var(--cb-ink); --band-accent: var(--cb-ink); --band-mark: var(--cb-ink);
  --band-button-bg: var(--cb-ink); --band-button-fg: var(--cb-marker); --band-button-hover: var(--cb-ink-2); --band-focus: var(--cb-ink);
  --band-heading: var(--cb-ink);
  --foot-bg: var(--cb-marker); --foot-fg: var(--cb-ink); --foot-muted: var(--cb-ink); --foot-mark: var(--cb-ink); --foot-rule: 3px solid var(--cb-ink); --foot-focus: var(--cb-ink);
  --chip-bg: var(--cb-marker); --chip-fg: var(--cb-ink); --chip-border: var(--cb-marker);
  --display-weight: 400;
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-text: "Instrument Sans", Arial, "Liberation Sans", sans-serif;

  /* Type scale (6 steps, rem; root = 16px) */
  --step--1: 0.875rem;                        /* 14px: metadata, tags, captions */
  --step-0:  1.0625rem;                       /* 17px: body, line-height 1.6 */
  --step-1:  1.375rem;                        /* 22px: card headlines, h4 */
  --step-2:  1.75rem;                         /* 28px: h3, section intros */
  --step-3:  clamp(2rem, 1.4rem + 2.4vw, 2.625rem);   /* 32-42px: h2 */
  --step-4:  clamp(2.75rem, 1.6rem + 4.6vw, 4.75rem); /* 44-76px: hero h1, line-height 1.0 */
  --leading-tight: 1.05;
  --leading-snug:  1.2;
  --leading-body:  1.5;
  --measure: 66ch;

  /* Spacing scale (4px base) */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16: minimum mobile side gutter */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */

  /* Radius */
  --radius-sm: 4px;    /* blurbs, inputs */
  --radius-md: 6px;    /* cards, buttons */
  --radius-pill: 999px;/* tags, count badges */

  /* Lines and motion */
  --rule: 1px solid var(--line);
  --edge: 4px;         /* left edge on cards (primary) and alerts (alert) */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 100ms;   /* press acknowledgement, under 0.1s */
  --dur: 150ms;

  /* Site-only additions */
  --wrap: 72rem;
  --gutter: max(1rem, min(5vw, 3rem));
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: var(--leading-body);
}
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--display-weight); }
a { color: var(--link); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; overflow-wrap: break-word; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; color: var(--heading); letter-spacing: -0.005em; font-synthesis: none; }
h1 { font-size: var(--step-4); line-height: var(--leading-tight); }
h2 { font-size: var(--step-3); line-height: var(--leading-snug); }
h3 { font-size: var(--step-1); line-height: var(--leading-snug); }
p, ul, ol, pre { margin: 0; }
p, li { max-width: var(--measure); }
strong { font-weight: 600; }
/* Headings sit closer to what follows than to what precedes. */
* + h2 { margin-top: var(--space-8); }
* + h3 { margin-top: var(--space-6); }
h1 + *, h2 + *, h3 + * { margin-top: var(--space-3); }
p + p, p + ul, ul + p, p + ol, ol + p, ul + .small, p + .small { margin-top: var(--space-4); }
a { transition: color var(--dur) ease; }
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }

.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 20;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-md);
  background: var(--accent); color: var(--accent-ink); font-weight: 600;
}
.skip-link:focus { top: var(--space-2); }
.skip-link:hover { color: var(--accent-ink); }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.small { font-size: var(--step--1); color: var(--muted); }
.lede { font-size: 1.25rem; line-height: 1.5; }
.accent-text { color: var(--primary); }
.eyebrow {
  margin: 0 0 var(--space-3);
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Buttons ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 20px; border-radius: var(--radius-md);
  background: var(--accent); color: var(--accent-ink);
  font-weight: 600; line-height: 1.2; text-decoration: none;
  transition: background-color var(--dur) ease;
}
.button:hover { background: var(--button-hover); color: var(--accent-ink); }
.button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.button-small { min-height: 44px; padding: 8px 14px; font-size: 0.9375rem; }
.cta-row { margin-top: var(--space-6); }

/* ---------- Header ---------- */
.site-header { border-bottom: var(--rule); background: var(--surface); }
.header-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-4); align-items: center;
  padding-block: var(--space-3);
}
.brand-block { grid-column: 1; grid-row: 1 / span 2; min-width: 0; }
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--fg); text-decoration: none;
  font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.3125rem; line-height: 1.2;
}
.brand:hover { color: var(--fg); }
.brand-mark {
  flex: none; width: 30px; height: 30px; background: var(--primary);
  -webkit-mask: url("/assets/mark.svg") center / contain no-repeat;
  mask: url("/assets/mark.svg") center / contain no-repeat;
}
.tagline { margin-top: var(--space-1); font-size: 0.8125rem; line-height: 1.4; color: var(--muted); max-width: 34ch; }
.nav-toggle {
  grid-column: 2; grid-row: 1; justify-self: end;
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  background: var(--surface); color: var(--fg); font: inherit; font-size: 0.9375rem; font-weight: 600; cursor: pointer;
  transition: border-color var(--dur) ease;
}
.nav-toggle[hidden] { display: none; }
.nav-toggle:hover { border-color: var(--fg); }
.nav-toggle-icon, .nav-toggle-icon::before, .nav-toggle-icon::after {
  display: block; width: 16px; height: 2px; background: currentColor; border-radius: 1px;
}
.nav-toggle-icon { position: relative; }
.nav-toggle-icon::before, .nav-toggle-icon::after { content: ""; position: absolute; left: 0; }
.nav-toggle-icon::before { top: -5px; }
.nav-toggle-icon::after { top: 5px; }
.nav-open .nav-toggle-icon { background: transparent; }
.nav-open .nav-toggle-icon::before { top: 0; transform: rotate(45deg); }
.nav-open .nav-toggle-icon::after { top: 0; transform: rotate(-45deg); }
.header-cta { grid-column: 2; grid-row: 2; justify-self: end; }
.site-nav { grid-column: 1 / -1; grid-row: 3; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); margin: 0; padding: 0; list-style: none; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--fg); font-weight: 600; font-size: 0.9375rem; text-decoration: none;
  border-bottom: 3px solid transparent;
}
.site-nav a:hover { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; }
.site-nav a[aria-current="page"] { border-bottom-color: var(--primary); }

@media (max-width: 859px) {
  .has-js .site-nav { display: none; }
  .has-js.nav-open .site-nav { display: block; }
  .has-js .site-nav ul { flex-direction: column; border-top: var(--rule); margin-top: var(--space-2); }
  .has-js .site-nav li { border-bottom: var(--rule); max-width: none; }
  .has-js .site-nav a { display: flex; width: 100%; min-height: 48px; border-bottom: 0; }
  .has-js .site-nav a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--primary); padding-left: var(--space-3); }
}
@media (min-width: 860px) {
  .header-grid { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-6); padding-block: var(--space-4); }
  .brand-block { grid-row: 1; }
  .nav-toggle, .nav-toggle[hidden] { display: none; }
  .site-nav { grid-column: 2; grid-row: 1; justify-self: end; }
  .header-cta { grid-column: 3; grid-row: 1; }
}

/* ---------- Sections ---------- */
main { display: block; }
.section { padding-block: var(--space-6); border-top: var(--rule); }
.hero, .page-intro { border-top: 0; }
.hero h1 { max-width: 15ch; }
.hero .lede, .page-intro .lede { margin-top: var(--space-5); }
.page-intro h1 { max-width: 20ch; }
.hero-grid { display: grid; gap: var(--space-7); align-items: center; }
.hero-mark {
  display: block; width: 80px; height: 80px; background: var(--primary);
  -webkit-mask: url("/assets/mark.svg") center / contain no-repeat;
  mask: url("/assets/mark.svg") center / contain no-repeat;
}
@media (max-width: 859px) {
  .hero-grid { position: relative; }
  .hero-mark { position: absolute; top: 0; right: var(--gutter); }
  .hero h1 { padding-top: 48px; }
}
@media (min-width: 860px) {
  .section { padding-block: var(--space-7); }
  .hero-grid { grid-template-columns: minmax(0, 1fr) auto; }
  .hero-mark {
    display: block; width: 180px; height: 180px; background: var(--primary);
    -webkit-mask: url("/assets/mark.svg") center / contain no-repeat;
    mask: url("/assets/mark.svg") center / contain no-repeat;
  }
}
.section-link { margin-top: var(--space-5); font-weight: 600; }

/* Two-column split: text beside an example */
.split { display: grid; gap: var(--space-7); }
@media (min-width: 960px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; } }

/* ---------- Feature cards ---------- */
.card-grid { display: grid; gap: var(--space-4); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.card-grid > li { max-width: none; }
@media (min-width: 700px) { .card-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feature { padding: var(--space-5); border: var(--rule); border-radius: var(--radius-md); background: var(--surface); }
.feature h3 { margin-top: 0; }
.feature p { font-size: 1rem; }

/* ---------- Example story card (from the product's card anatomy) ---------- */
.example { margin: 0; }
.example-label { margin: 0 0 var(--space-3); }
.story {
  padding: var(--space-5) var(--space-5) var(--space-4);
  border: var(--rule); border-left: var(--edge) solid var(--primary); border-radius: var(--radius-md);
  background: var(--surface);
}
.story-top {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-4);
  font-size: 0.8125rem; color: var(--muted);
}
.priority { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--primary); }
.priority-bars { display: inline-flex; gap: 2px; }
.priority-bars span { width: 4px; height: 12px; border-radius: 1px; background: currentColor; }
.priority-bars span.off { background: var(--line); }
.story-headline {
  margin-top: var(--space-2); font-family: var(--font-display); font-size: var(--step-1); line-height: var(--leading-snug);
}
.story-reason { margin-top: var(--space-2); color: var(--cb-ink); font-size: var(--step--1); line-height: 1.5; }
.story-brief { margin-top: var(--space-2); font-size: 1rem; line-height: 1.55; }
.cite { color: var(--muted); }
.why {
  margin-top: var(--space-3); padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--primary-wash); font-size: 0.9375rem; line-height: 1.5;
}
.story-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4);
  margin-top: var(--space-4); font-size: 0.8125rem; color: var(--muted);
}
.story-foot ul { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.tags { display: inline-flex; align-items: center; }
.tag { display: inline-block; padding: 1px 9px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); color: var(--muted); }
.sources { font-weight: 600; color: var(--fg); }
.pin {
  display: inline-grid; place-items: center; flex: none;
  width: 1.375rem; height: 1.375rem; border-radius: 50%;
  background: var(--fg); color: var(--bg); font-family: var(--font-text); font-size: 0.75rem; font-weight: 600; line-height: 1;
  font-style: normal; vertical-align: middle;
}
.story .pin { margin-right: 6px; }
.story-headline .pin { vertical-align: 0.15em; }

/* Anatomy labels beside the annotated card */
.card-anatomy { margin-top: var(--space-6); }
@media (min-width: 960px) { .card-anatomy .anatomy { padding-top: 2.6rem; } }
.anatomy { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.anatomy li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.anatomy .pin { margin-top: 3px; }

/* ---------- Alert strip (poppy: always with the word "Alert" and the triangle) ---------- */
.alert-strip {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start;
  margin-top: var(--space-5); padding: var(--space-3) 14px; max-width: var(--measure);
  border-left: var(--edge) solid var(--alert); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--alert-wash); font-size: 0.9375rem; line-height: 1.5;
}
.alert-strip svg { width: 18px; height: 18px; margin-top: 3px; color: var(--alert); }
.alert-strip strong { color: var(--alert); }

/* ---------- Lists ---------- */
.steps { display: grid; gap: var(--space-5); margin: var(--space-6) 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps > li { counter-increment: step; padding-top: var(--space-4); border-top: 2px solid var(--primary); }
.steps > li::before {
  content: counter(step); display: block; margin-bottom: var(--space-2);
  font-family: var(--font-display); font-size: var(--step-2); line-height: 1; color: var(--primary);
}
@media (min-width: 700px) {
  .steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1000px) { .steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.pipeline { display: grid; gap: var(--space-5); margin-top: var(--space-6); }
@media (min-width: 700px) { .pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .pipeline { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pipeline > div { padding-top: var(--space-4); border-top: 2px solid var(--primary); }
.pipeline h3 { margin-top: 0; }
.pipeline + p { margin-top: var(--space-6); }

.rule-list { margin: var(--space-5) 0 0; padding: 0; list-style: none; border-top: var(--rule); max-width: var(--measure); }
.rule-list li { position: relative; padding: var(--space-3) 0 var(--space-3) var(--space-5); border-bottom: var(--rule); }
.rule-list li::before {
  content: ""; position: absolute; left: 2px; top: calc(var(--space-3) + 0.78em);
  width: 10px; height: 2px; background: var(--primary);
}
.rule-list + p, .rule-list + .small { margin-top: var(--space-4); }

.check-list { margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.check-list li { position: relative; padding: var(--space-1) 0 var(--space-1) 1.75rem; }
.check-list li::before {
  content: ""; position: absolute; left: 0.35rem; top: 0.55em;
  width: 0.4rem; height: 0.75rem; border: solid var(--primary); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}

/* ---------- Publishers rules ---------- */
.rules-grid { display: grid; gap: 0 var(--space-7); margin-top: var(--space-5); }
@media (min-width: 860px) { .rules-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rules-grid > div { padding-block: var(--space-5); border-top: var(--rule); }
.rules-grid h3 { margin-top: 0; }

/* ---------- Contact ---------- */
.template {
  margin-top: var(--space-5); padding: var(--space-5); max-width: var(--measure);
  border: var(--rule); border-left: var(--edge) solid var(--primary); border-radius: var(--radius-sm);
  background: var(--surface); font-family: var(--font-mono); font-size: 0.875rem; line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
@media (min-width: 700px) { .template { white-space: pre; } }
.mail-cta { margin-top: var(--space-6); }

/* ---------- Closing CTA ---------- */
.closing { background: var(--surface); }
.closing h2 { margin-top: 0; max-width: 16ch; font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); line-height: var(--leading-tight); }
.closing p { margin-top: var(--space-5); }

/* ---------- Footer ---------- */
.site-footer { padding-block: var(--space-7); border-top: var(--rule); font-size: 0.9375rem; }
.footer-grid { display: grid; gap: var(--space-5); }
@media (min-width: 860px) { .footer-grid { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } }
.footer-brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 1.125rem; }
.footer-brand .brand-mark { width: 24px; height: 24px; }
.footer-grid p { margin-top: var(--space-2); }
.footer-nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); margin: 0; padding: 0; list-style: none; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-copy { margin-top: var(--space-5); }

/* ---------- Direction overrides: dark chrome, colour bands, chips ---------- */
.button { border: 2px solid var(--button-border); }
.site-header { background: var(--chrome-bg); border-bottom-color: var(--chrome-bg); color: var(--chrome-fg); }
.site-header .brand, .site-header .brand:hover { color: var(--chrome-fg); }
.site-header .brand-mark { background: var(--chrome-mark); }
.site-footer .brand-mark { background: var(--foot-mark); }
.site-header .tagline { color: var(--chrome-muted); }
.site-nav a { color: var(--chrome-fg); }
.site-nav a:hover { color: var(--chrome-fg); text-decoration-color: var(--chrome-mark); text-decoration-thickness: 2px; }
.site-nav a[aria-current="page"] { border-bottom-color: var(--chrome-mark); }
.nav-toggle { background: transparent; color: var(--chrome-fg); border-color: var(--chrome-line); }
.nav-toggle:hover { border-color: var(--chrome-fg); }
@media (max-width: 859px) {
  .has-js .site-nav ul, .has-js .site-nav li { border-color: var(--chrome-line); }
  .has-js .site-nav a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--chrome-mark); }
}
.site-header .button { background: var(--chrome-button-bg); color: var(--chrome-button-fg); border-color: var(--chrome-button-bg); }
.site-header .button:hover { background: var(--chrome-button-hover); border-color: var(--chrome-button-hover); color: var(--chrome-button-fg); }
.site-header :focus-visible { outline-color: var(--chrome-focus); }

.hero, .closing { background: var(--band-bg); color: var(--band-fg); border-top: 0; }
.hero h1, .closing h2 { color: var(--band-heading); }
.hero .accent-text, .closing .accent-text { color: var(--band-accent); }
.hero-mark { background: var(--band-mark); }
.hero .button, .closing .button { background: var(--band-button-bg); color: var(--band-button-fg); border-color: var(--band-button-bg); }
.hero .button:hover, .closing .button:hover { background: var(--band-button-hover); border-color: var(--band-button-hover); color: var(--band-button-fg); }
.hero :focus-visible, .closing :focus-visible { outline-color: var(--band-focus); }

.site-footer { background: var(--foot-bg); color: var(--foot-fg); border-top: var(--foot-rule); font-size: var(--step-0); } /* no body text under 17px on marker */
.site-footer a { color: var(--foot-fg); }
.site-footer a:hover { color: var(--foot-fg); text-decoration-thickness: 3px; }
.site-footer :focus-visible { outline-color: var(--foot-focus); }
.site-footer .small { color: var(--foot-muted); font-size: var(--step-0); }

.example-label { display: inline-block; padding: 3px 10px; border-radius: var(--radius-sm); background: var(--chip-bg); color: var(--chip-fg); }
.tag { background: var(--chip-bg); color: var(--chip-fg); border-color: var(--chip-border); }

/* ---------- Direction 1: Highlighter specifics ---------- */
:root { --radius-md: 2px; --radius-sm: 2px; --step-4: clamp(3.25rem, 1.8rem + 5.6vw, 6rem); --step-3: clamp(2.375rem, 1.6rem + 3vw, 3.25rem); }
h1, h2 { letter-spacing: -0.01em; }
.accent-text { font-style: italic; }
.hero h1 { max-width: 14ch; line-height: 0.98; }
.closing h2 { font-size: clamp(2.75rem, 1.6rem + 4.2vw, 4.75rem); line-height: 1; }
/* Links: ink, underlined; hover lays a marker stroke under the words. */
main a:not(.button) { text-decoration-thickness: 1.5px; }
main a:not(.button):hover { background: linear-gradient(transparent 55%, var(--cb-marker) 55%); text-decoration-thickness: 1.5px; }
/* Step numbers sit above the text in a compact marker square. */
.steps > li::before, .pipeline .step-number {
  display: grid; place-items: center; width: 2rem; height: 2rem;
  margin-bottom: 0.75rem; padding: 0; border-radius: var(--radius-sm);
  background: var(--cb-marker); color: var(--cb-ink);
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; line-height: 1;
}
.story { border-left-width: 6px; }
.button { font-weight: 600; }
/* Instrument Serif is light: set small headings larger so they hold their weight. */
h3, .story-headline { font-size: 1.75rem; line-height: 1.1; }

/* Compact editorial rhythm, with source-order pairs on wide screens. */
.feature { padding: var(--space-4); }
.card-grid, .steps, .pipeline { margin-top: var(--space-5); }
.steps, .pipeline, .split { gap: var(--space-5); }
.rule-list li { padding-block: var(--space-2); }
.rule-list li::before { top: calc(var(--space-2) + 0.78em); }
.finish-intro { margin-bottom: var(--space-5); padding-left: var(--space-4); border-left: 4px solid var(--cb-marker); }
.finish-intro h2 { margin-top: 0; }
.section-pair > .section > .wrap { max-width: none; }
.why { font-size: var(--step-0); }
.alert-strip { font-size: 1rem; }
.alert-strip + p { margin-top: var(--space-4); }

.feature h3 + p { margin-top: var(--space-2); }
.hero .lede { margin-top: var(--space-4); }

@media (min-width: 900px) {
  .section-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; }
  .rule-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); max-width: none; }
  .section-pair .rule-list { display: block; }
  .section-pair h2 { font-size: 2.625rem; }
  .hero h1 { max-width: 19ch; font-size: 4.5rem; }
  .hero-grid { gap: var(--space-6); }
  .hero-mark { width: 200px; height: 200px; }
  .home-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
  .home-pair .rule-list { display: grid; }
  .closing .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-7); align-items: start; }
  .closing h2 { grid-row: 1 / span 2; }
  .closing p { grid-column: 2; margin-top: 0; }
  .closing p + p { margin-top: var(--space-5); }
  .hero .cta-row { margin-top: var(--space-5); }
}

@media (max-width: 899px) {
  :root { --gutter: 1rem; --leading-body: 1.45; }
  main { font-size: 1rem; }
  h2 { font-size: 2rem; line-height: 1.1; }
  h3, .story-headline { font-size: 1.375rem; line-height: 1.2; }
  .hero, .closing { font-size: var(--step-0); }
  .hero h1 { font-size: 2.75rem; padding-top: 48px; }
  .lede { font-size: 1.0625rem; }
  .hero .lede, .page-intro .lede, .closing p { margin-top: var(--space-4); }
  .page-intro h1 { font-size: 2.75rem; }
  .closing h2 { font-size: 2.25rem; }
  .section-pair { padding-block: var(--space-6); border-top: var(--rule); }
  .section-pair > .section { padding-block: 0; border-top: 0; }
  .section-pair > .section + .section { margin-top: var(--space-5); }
  .feature { padding: var(--space-3) 0; border-width: 1px 0 0; background: var(--bg); }
  .story { padding: var(--space-3); }
  .steps, .pipeline { gap: var(--space-4); }
  .steps > li, .pipeline > div { padding-top: var(--space-2); }
  .card-grid, .steps, .pipeline, .rule-list { margin-top: var(--space-4); }
  .cta-row, .section-link { margin-top: var(--space-4); }
  .site-footer { padding-block: var(--space-5); }
  .story-brief { line-height: 1.45; }
  p + p, p + ul, ul + p, p + ol, ol + p { margin-top: var(--space-2); }
  .pipeline h3 + p { margin-top: var(--space-1); }
  .steps, .pipeline, .card-grid { gap: var(--space-3); }
  .footer-grid { gap: var(--space-3); }
  .finish-intro { margin-bottom: var(--space-4); }
  .anatomy { gap: var(--space-2); }
  .rule-list li { padding-block: 6px; }
  .rule-list li::before { top: calc(6px + 0.78em); }
  .card-anatomy { margin-top: var(--space-5); gap: var(--space-4); }
}

/* ---------- Launch sign-up and result pages ---------- */
.launch-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--band-bg); }
.launch-page main { flex: 1; }
.launch-page .brand { min-height: 44px; }
.launch-page .hero { padding-block: var(--space-7); }
.notify-form { margin-top: var(--space-6); max-width: 38rem; }
.notify-form label { display: block; margin-bottom: var(--space-2); font-weight: 600; }
.notify-controls { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.notify-controls input {
  flex: 1 1 15rem; min-width: 0; width: 100%; min-height: 48px;
  padding: var(--space-3); border: 2px solid var(--fg); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--fg); font: inherit;
}
.notify-controls button { min-height: 48px; font: inherit; font-weight: 600; cursor: pointer; }
.notify-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.notify-consent { margin-top: var(--space-4); font-size: var(--step-0); }
.notify-pilot { margin-top: var(--space-6); font-size: var(--step-0); }
@media (max-width: 599px) { .notify-controls button { width: 100%; } }

.launch-marker { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--step-0); font-weight: 600; }
@media (min-width: 900px) {
  .closing .notify-form { grid-column: 2; margin-top: var(--space-5); }
  .closing .notify-consent, .closing .notify-pilot { margin-top: var(--space-4); }
}