/* ═══════════════════════════════════════════════════════════════
   Chrona Actions — shared marketing stylesheet
   ───────────────────────────────────────────────────────────────
   This is the ONLY stylesheet on the site. There are no per-page
   <style> blocks and no style="" attributes anywhere, which is what
   lets vercel.json ship a Content-Security-Policy with no
   'unsafe-inline'. Adding an inline style silently breaks the CSP.

   NEVER HARD-CODE A COLOUR. Every colour goes through a token in
   :root. ../chronabioweb carries ~80 lines of override patches that
   exist purely because some components wrote hex values directly.

   THE VISUAL GRAMMAR IS THE PRODUCT'S OWN, and it is semantic
   rather than decorative. Both rules are lifted from the app's
   stylesheet (../actions/apps/web/src/styles.css) where they are
   load-bearing:

     1. A DASHED EDGE MEANS NOT YET SETTLED, and dashed amber is
        used for nothing else. The app's comment: "Dashed, because
        'not settled yet' is what a dashed edge means everywhere
        else in software."
     2. A GROUP IS A LEFT RULE, NEVER A NESTED CARD. The app puts it
        in capitals — "AN ACTION IS NOT A CARD." So this site has no
        cards at all: no panels, no drop shadows, no boxed grids.
        Structure is carried by left rules and hairlines.

   Unlike ../chronabioweb there is no theme-switching machinery. That
   site is dark with opt-in light bands, so it rewrites tokens on a
   scoped selector. This site is light throughout, so the tokens are
   declared once and never reassigned.
   ═══════════════════════════════════════════════════════════════ */

/* ── Self-hosted fonts (latin subsets, OFL — see fonts/NOTICE.md) ── */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/geist-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dm-mono-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/dm-mono-500-latin.woff2') format('woff2');
}
/* Italic only — italic is Instrument Serif's only use on this site. */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif-italic-latin.woff2') format('woff2');
}

/* ── Reset ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Tokens ───────────────────────────────────────────────────────
   Contrast is measured, not assumed. Ratios below are against
   --bg (#F4F1EA). Text tones are darker than ../chronabioweb's
   light-band equivalents because that site only uses them on short
   runs inside a mostly-dark page, where this site uses them for
   whole pages of body copy:
     --text-secondary  6.7:1   AA at any size
     --text-tertiary   4.8:1   AA — chronabio's #A09A8C is 3.0:1 and
                               would fail on 10px mono eyebrows
     --accent          4.5:1   AA, but only just — use --accent-ink
                               for small text, --accent for buttons,
                               large type, rules and fills
     --accent-ink      6.6:1
     --unsettled       5.7:1
   ─────────────────────────────────────────────────────────────── */
:root {
  /* Surfaces. --bg and --text-primary are shared verbatim with
     ../chronabioweb's light band, which is what makes the two sites
     read as siblings. --bg-subtle diverges deliberately: chronabio
     warms one shade to #EFEBE0, this site cools to a faint teal so
     the band variation ties back to the product's own accent. */
  --bg:             #F4F1EA;
  --bg-surface:     #FFFFFF;
  --bg-subtle:      #F0F4F2;

  /* Ink */
  --text-primary:   #221610;  /* warm charcoal — shared with the app */
  --text-secondary: #5A554C;
  --text-tertiary:  #6F6A62;

  /* Rules */
  --border:         #E0DCD2;
  --border-mid:     #CFCABF;

  /* Chrona teal, byte-exact from ../actions/apps/web/src/styles.css.
     Kevin has used this teal since the pilot; the marketing site
     should read as the same product. */
  --accent:         #0d7c72;
  --accent-ink:     #0a6058;
  --accent-soft:    #ecf6f4;
  --accent-tint:    #dbeeeb;
  --on-accent:      #ffffff;

  /* The hero brand field. Named as its own role rather than reusing
     --accent, because the band rewrites --accent for its descendants and
     a background reading a token it also overwrites is circular.
     These are the DEEP end of the Chrona teal — --field-from is exactly
     --accent-ink. Measured reason in the .brand-field block below. */
  --field-from:    #0a6058;
  --field-to:      #084b45;
  --on-field:      #eaf4f2;

  /* "Not yet settled" — the ONLY use of amber on this site. Two
     tones because the text tone needs AA and the rule tone does
     not, and the rule reads better slightly brighter. */
  --unsettled:      #9a4708;
  --unsettled-rule: #b45309;
  --unsettled-wash: rgba(180, 83, 9, 0.06);
  /* Badge fill. Deliberately close in weight to --accent-tint so the two
     halves of a .disagree pill read as equals; at the --unsettled-wash
     alpha the amber half looked unfilled next to the teal one. */
  --unsettled-tint: rgba(180, 83, 9, 0.14);

  /* Type */
  --sans:  'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --mono:  'DM Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

html {
  background: var(--bg);
  scrollbar-gutter: stable;
}

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── Skip nav ─────────────────────────────────────────────────── */
.skip-nav {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--accent);
  color: var(--on-accent);
  padding: 0 18px;
  z-index: 999;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  /* Full 44px — this is the first thing a keyboard user lands on. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.skip-nav:focus { top: 0; }

/* ── Focus ring. Never `outline: none`. ───────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── Nav ──────────────────────────────────────────────────────── */
nav.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 40px;
  height: 56px;
  border-bottom: 1px solid var(--border);
  /* Opaque, not translucent. A paper veil at 86% over the teal hero mixed
     into a murky sage; an opaque paper bar reads as a clean edge against
     the field instead. This is why --bg-veil and the backdrop-filter that
     went with it are gone. */
  background: var(--bg);
  transition: transform 0.32s cubic-bezier(.4, 0, .2, 1);
}
/* Hide on scroll-down, restore on scroll-up. Applied by marketing.js,
   and only when motion is not reduced. */
body.nav-hidden nav.site-nav { transform: translateY(-100%); }

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-primary);
  min-height: 44px;
  flex-shrink: 0;
}
/* The mark is 138x86 — wider than tall. Height is pinned and width
   follows, so it is never distorted. Intrinsic width/height are also
   set on the <img> itself so it reserves space and cannot shift layout. */
.nav-logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav-logo-mark img { height: 19px; width: auto; display: block; }

.nav-wordmark {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin-left: auto;
}
.nav-links a {
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 400;
  letter-spacing: -0.005em;
  transition: color 0.15s;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--text-primary); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  padding: 9px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--sans);
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: background-color 0.15s;
  text-decoration: none;
  min-height: 44px;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-cta:hover { background: var(--accent-ink); }

/* ── Mobile hamburger + panel ─────────────────────────────────── */
.nav-hamburger {
  display: none;
  background: transparent;
  border: 1px solid var(--border-mid);
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  margin-left: 10px;
  /* 44x44, not ../chronabioweb's 36x36. On a phone this is the only
     navigation control on the page, so it gets the comfortable size. */
  min-height: 44px;
  min-width: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--text-primary);
  transition: transform 0.2s, opacity 0.2s;
}
body.nav-open .nav-hamburger span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
body.nav-open .nav-hamburger span:nth-child(2) { opacity: 0; }
body.nav-open .nav-hamburger span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

.nav-mobile-panel {
  display: none;
  position: fixed;
  top: 56px;
  left: 0; right: 0;
  z-index: 99;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 4px 24px 12px;
}
body.nav-open .nav-mobile-panel { display: block; }
.nav-mobile-panel ul { list-style: none; }
.nav-mobile-panel li { border-bottom: 1px solid var(--border); }
.nav-mobile-panel li:last-child { border-bottom: none; }
.nav-mobile-panel a {
  display: flex;
  align-items: center;
  padding: 14px 4px;
  font-size: 15px;
  color: var(--text-secondary);
  text-decoration: none;
  letter-spacing: -0.005em;
  min-height: 44px;
  transition: color 0.15s;
}
.nav-mobile-panel a:hover,
.nav-mobile-panel a[aria-current="page"] { color: var(--text-primary); }

/* ── Buttons ──────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  padding: 12px 22px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--sans);
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: background-color 0.15s, transform 0.1s;
  white-space: nowrap;
  text-decoration: none;
  min-height: 44px;
}
.btn-primary:hover { background: var(--accent-ink); transform: translateY(-1px); }
.btn-primary svg { width: 14px; height: 14px; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-mid);
  padding: 12px 22px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 400;
  font-family: var(--sans);
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: border-color 0.15s, color 0.15s, transform 0.1s;
  white-space: nowrap;
  text-decoration: none;
  min-height: 44px;
}
.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.btn-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 36px;
}

.sign-in-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text-tertiary);
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: color 0.15s, gap 0.2s;
  min-height: 44px;
}
.sign-in-link:hover { color: var(--text-primary); gap: 10px; }
.sign-in-link svg { width: 11px; height: 11px; }

/* ── Eyebrows ─────────────────────────────────────────────────── */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 28px; }
.eyebrow-text {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.eyebrow-line { width: 24px; height: 1px; background: var(--accent); opacity: 0.55; }

/* Section eyebrows carry the content-file section number. They are
   decorative text, never headings. */
.section-eyebrow {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 28px;
}
.section-eyebrow::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--border-mid);
}
.section-eyebrow.centered { justify-content: center; margin-left: auto; margin-right: auto; }
.section-eyebrow.centered::before { display: none; }

/* ── Section scaffolding ──────────────────────────────────────── */
.section-wrap { position: relative; border-top: 1px solid var(--border); }
/* Anchored bands must not land under the 56px fixed nav. */
.section-wrap[id] { scroll-margin-top: 56px; }
.section-wrap.surface { background: var(--bg-surface); }
.section-wrap.subtle  { background: var(--bg-subtle); }
.section-wrap.flush   { border-top: none; }

.section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px 40px;
  position: relative;
}
.section.tight  { padding: 72px 40px; }
.section.airy   { padding: 112px 40px; }
.section.narrow { max-width: 820px; }

/* ── Typography ───────────────────────────────────────────────── */
.hero-headline {
  font-family: var(--sans);
  font-size: 54px;
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--text-primary);
  max-width: 15em;
  text-wrap: balance;
}

.section-headline {
  font-family: var(--sans);
  font-size: 38px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  max-width: 820px;
  text-wrap: balance;
}

/* One emphasis per headline, and it is always the pivot word. */
.hero-headline em,
.section-headline em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: -0.005em;
}

.hero-headline + .section-body,
.section-headline + .section-body { margin-top: 32px; }

.section-body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
  font-weight: 300;
  max-width: 640px;
  letter-spacing: -0.005em;
}
.section-body.wide { max-width: 760px; }
/* Prose that follows a block element needs its own top gap — the block's
   own margin only separates it from what came BEFORE it. */
.split + .section-body,
.gap-list + .section-body,
.fit-list + .section-body,
.flow + .section-body,
.principle-grid + .section-body { margin-top: 34px; }
.section-body p + p { margin-top: 18px; }
.section-body strong { color: var(--text-primary); font-weight: 500; }

.mono-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.mono-label.accent { color: var(--accent-ink); }
.mono-label.unsettled { color: var(--unsettled); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-ink);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  font-family: var(--sans);
  transition: gap 0.2s, color 0.15s;
}
.link-arrow:hover { gap: 12px; color: var(--accent); }
.link-arrow svg { width: 12px; height: 12px; }

/* A quiet one-line assertion. Not a heading, not a badge. */
.principle { display: inline-flex; align-items: center; gap: 10px; margin-top: 40px; }
.principle-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.principle-text {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.06em;
}

/* ═══════════════════════════════════════════════════════════════
   THE SIGNATURE — left rules instead of cards, and dashed = unsettled
   ═══════════════════════════════════════════════════════════════ */

/* A rule-row is the site's only container primitive. Left rule,
   no border, no background, no shadow, no radius. */
/* Spacing between rule-rows is ALWAYS the container's `gap`, never a
   sibling margin. A `.rule-row + .rule-row { margin-top }` rule looks
   harmless and silently pushes the second cell of every grid row down
   by that margin, so the columns no longer line up. */
.rule-row {
  border-left: 2px solid var(--border-mid);
  padding: 2px 0 2px 18px;
}

/* Settled: solid teal. */
.rule-row.settled { border-left-color: var(--accent); }

/* Not settled: dashed amber plus the faintest wash. This is the one
   place amber appears, and the dash is the whole point — see the
   grammar note at the top of this file. */
.rule-row.unsettled {
  border-left: 2px dashed var(--unsettled-rule);
  background: var(--unsettled-wash);
  padding-right: 16px;
}

.rule-row h3 {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.rule-row p {
  font-size: 15px;
  line-height: 1.65;
  font-weight: 300;
  color: var(--text-secondary);
  letter-spacing: -0.005em;
}
.rule-row .mono-label { display: block; margin-bottom: 10px; }

/* The six failure modes. Symptoms, not features — so a list with
   hairlines, never a grid of six cards. */
.gap-list { list-style: none; margin-top: 40px; max-width: 820px; }
.gap-list li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 300;
  color: var(--text-secondary);
  letter-spacing: -0.005em;
}
.gap-list li:last-child { border-bottom: 1px solid var(--border); }
.gap-list li::before {
  content: '';
  flex: 0 0 auto;
  width: 6px; height: 6px;
  margin-top: 0.55em;
  border-radius: 50%;
  border: 1.5px dashed var(--unsettled-rule);
}

/* Badges, ported from the app: 10%-alpha wash paired with the solid
   text tone. Used inside .disagree, and nowhere decoratively. */
.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.badge.b-record   { background: var(--accent-tint);   color: var(--accent-ink); }
.badge.b-reported { background: var(--unsettled-tint); color: var(--unsettled); }

/* A conflict is ONE fact, not two. The app wraps both states in a
   single amber-edged pill with a tiny "vs" so a scan cannot read
   the two halves as independent facts. */
.disagree {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--unsettled-rule);
  border-radius: 6px;
  padding: 5px 9px;
  background: var(--bg-surface);
}
.disagree-vs {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ── Two-column direction split (§02) ────────────────────────── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 52px;
  align-items: start;
}

/* ── Ordered flow (§03). A real sequence, so it is numbered. ──── */
.flow { display: grid; gap: 0; margin-top: 52px; counter-reset: step; }
.flow-step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--border);
  align-items: start;
}
.flow-step:last-child { border-bottom: 1px solid var(--border); }
.flow-num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  padding-top: 3px;
}
.flow-step.is-you .flow-num { color: var(--accent-ink); }
.flow-body h3 {
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.flow-body p {
  font-size: 15.5px;
  line-height: 1.65;
  font-weight: 300;
  color: var(--text-secondary);
  max-width: 620px;
  letter-spacing: -0.005em;
}
/* Step 03 is the human. It gets a teal left rule — the only
   emphasis in the flow, because it is the only step that is a
   person rather than a machine. */
.flow-step.is-you {
  border-left: 2px solid var(--accent);
  padding-left: 18px;
  background: var(--accent-soft);
}

/* ── Two-column principle grid (§04) ─────────────────────────── */
.principle-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px 48px;
  margin-top: 52px;
}

/* ── "Is not" list (§05) ─────────────────────────────────────── */
.not-list { list-style: none; margin: 36px 0 40px; max-width: 760px; }
.not-list li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 11px 0;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 300;
  color: var(--text-secondary);
  letter-spacing: -0.005em;
}
.not-list li::before {
  content: '';
  flex: 0 0 auto;
  width: 10px;
  height: 1px;
  margin-top: 0.72em;
  background: var(--border-mid);
}

/* ── Where it fits (§06) ─────────────────────────────────────── */
.fit-list { display: grid; gap: 26px; margin-top: 48px; max-width: 820px; }

/* ── Closing band ────────────────────────────────────────────── */
.cta-band { text-align: center; }
.cta-band .section-headline { margin: 0 auto; max-width: 700px; }
.cta-band .section-body { margin-left: auto; margin-right: auto; }
.cta-band .btn-row { justify-content: center; }

/* ═══════════════════════════════════════════════════════════════
   THE HERO BRAND FIELD — the one bold band on the site
   ───────────────────────────────────────────────────────────────
   Adapted from the app's sign-in screen (Flavia's design 1b). Its own
   note in ../actions/apps/web/src/styles.css states the intent, and it
   governs here too:

     "That is the one bold move on this screen; everything inside the
      card is the app's ordinary calm surface, so the boldness is spent
      once, on the field, and the controls stay quiet."

   So this is the ONLY saturated band on the page. Do not add a second
   one — a teal CTA band at the foot would halve the effect of this.

   Three deliberate departures from the app, each forced by the same
   difference: the app floats a WHITE CARD with dark text over its field,
   so nothing light is ever set directly on the teal. This band sets all
   of its text directly on it.

   1. The field is the DEEP end of the teal, and a gradient. Measured on
      the actual painted colour — sheen included, since the sheen lightens
      exactly the top-left corner where the eyebrow sits:

        field           white       --on-field (16px body)
        flat #0d7c72    4.2:1       3.8:1   ← body text FAILS AA
        this gradient   5.6:1       5.0:1   ← passes with margin

      So the app's brighter #0d7c72 is right for a field seen only around
      a card, and wrong for one carrying body copy.
   2. There is ONE text tone on the field, not two. A dimmer second tone
      (#bfdcd8) measured 3.5:1 and failed AA for the 10px eyebrow, the
      tagline and the sign-in link; on a saturated field, any tone light
      enough to pass is indistinguishable from the first. Hierarchy here
      comes from size, weight and tracking instead of from value.
   3. The pill scatter is biased to the right half. The app's card is
      opaque and centred, so overlap is invisible there; here the pills
      sit behind live text, and a pale pill under white type costs real
      contrast. Positions avoid the text column instead.
   ═══════════════════════════════════════════════════════════════ */
.section-wrap.brand-field {
  /* Scoped token rewrite — the mechanism ../chronabioweb uses for its
     light bands, inverted. Every descendant inherits the on-teal palette
     through the normal cascade, so no component needs a variant. */
  --text-primary:   #ffffff;
  --text-secondary: var(--on-field);
  --text-tertiary:  var(--on-field);   /* one tone only — see note 2 above */
  --accent:         #ffffff;
  --accent-ink:     var(--on-field);
  --on-accent:      var(--field-to);   /* white button, deep teal label */
  --border:         rgb(255 255 255 / 22%);
  --border-mid:     rgb(255 255 255 / 34%);

  border-top: none;
  position: relative;
  overflow: hidden;
  color: var(--text-primary);
  /* A soft top-left sheen so the field reads as lit rather than printed —
     the app's phrasing, and its exact radial. */
  background:
    radial-gradient(120% 90% at 12% 8%, rgb(255 255 255 / 12%) 0%, rgb(255 255 255 / 0%) 55%),
    linear-gradient(158deg, var(--field-from) 0%, var(--field-to) 100%);
}

/* Faint hairlines with the pill scatter over them — "rows of work sitting
   just out of focus", per the app. Decorative, so aria-hidden in markup
   and pointer-events: none here. */
.hero-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* The app uses 14% over a flat fill on a short screen. Here the band is
     ~640px tall over a gradient, so the same value produced ten hard
     stripes — a venetian blind rather than a texture. 6% is the same idea
     at this scale. */
  background: repeating-linear-gradient(
    to bottom,
    rgb(255 255 255 / 6%) 0 1px,
    transparent 1px 68px
  );
}
.hero-field span {
  position: absolute;
  height: 14px;
  border-radius: 999px;
  background: var(--text-primary);
}
/* Positions are percentages, not the mock's fixed pixels, so the scatter
   holds at any viewport instead of clumping at one width. Set here rather
   than with style="" attributes, which would break the CSP. */
.hero-field span:nth-child(1) { left: 62%; top:  8%; width: 236px; opacity: .22; }
.hero-field span:nth-child(2) { left: 84%; top: 16%; width: 148px; opacity: .16; }
.hero-field span:nth-child(3) { left: 68%; top: 27%; width: 196px; opacity: .18; }
.hero-field span:nth-child(4) { left: 88%; top: 38%; width: 132px; opacity: .14; }
.hero-field span:nth-child(5) { left: 63%; top: 49%; width: 256px; opacity: .20; }
.hero-field span:nth-child(6) { left: 79%; top: 60%; width: 168px; opacity: .16; }
.hero-field span:nth-child(7) { left: 66%; top: 72%; width: 208px; opacity: .18; }
.hero-field span:nth-child(8) { left: 86%; top: 83%; width: 112px; opacity: .14; }
.hero-field span:nth-child(9) { left:  5%; top: 92%; width:  88px; opacity: .12; }

.hero { position: relative; }
.hero-copy { max-width: 780px; }

/* The product's own tagline, from the app's sign-in card. Two short lines,
   because that is how it is set there. */
.hero-tagline {
  margin-top: 30px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  line-height: 1.9;
}
.hero-tagline span { display: block; }

/* ── The reconciliation figure (§02) ─────────────────────────────
   It lives on a light band, not the hero, because its meaning depends on
   the teal/amber grammar and neither reads on a teal field. It also
   belongs beside the copy it illustrates. */
.reco-figure { width: 100%; }
.reco-figure svg { width: 100%; height: auto; display: block; }
/* No figcaption. The in-figure legend already names both line types, and
   a caption underneath restated it — one accessory too many. */
.direction-rows { display: grid; gap: 26px; }

/* Shared SVG primitives, so no diagram needs a style attribute. */
.svg-rule       { stroke: var(--border-mid); stroke-width: 1; fill: none; }
.svg-matched    { stroke: var(--accent); stroke-width: 1.5; fill: none; }
.svg-unsettled  { stroke: var(--unsettled-rule); stroke-width: 1.5; fill: none; stroke-dasharray: 4 3; }
.svg-fill-paper { fill: var(--bg-surface); }
.svg-fill-ink   { fill: var(--text-primary); }
.svg-fill-mute  { fill: var(--border-mid); }
.svg-fill-teal  { fill: var(--accent); }
/* 9px in a 420-unit viewBox. The figure scales down to ~340px on a phone,
   so this renders around 7px there — legible enough for a diagram label,
   and the figure's <title> carries the actual meaning regardless. */
.svg-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--text-tertiary);
}

/* ── Footer ───────────────────────────────────────────────────── */
footer.site-footer {
  border-top: 1px solid var(--border);
  padding: 56px 40px 48px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.footer-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  color: var(--text-secondary);
  max-width: 300px;
}
.footer-mark { display: flex; align-items: center; gap: 10px; }
.footer-brand .nav-logo-mark img { height: 18px; width: auto; }
.footer-brand .wordmark {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.footer-brand .tagline {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.footer-col { display: flex; flex-direction: column; }
.footer-col-head {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.footer-col a {
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: color 0.15s;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}
.footer-col a:hover { color: var(--text-primary); }
.footer-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-tertiary);
  letter-spacing: 0.06em;
  margin-top: 8px;
}

/* ── Long-form prose (privacy / terms / 404) ──────────────────── */
.prose {
  max-width: 760px;
  margin: 0 auto;
  padding: 130px 40px 96px;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.75;
  font-weight: 300;
  letter-spacing: -0.005em;
}
.prose h1 {
  font-family: var(--sans);
  font-size: 44px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin-bottom: 16px;
  text-wrap: balance;
}
.prose .prose-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 48px;
}
.prose h2 {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 48px 0 16px;
  text-wrap: balance;
}
.prose h3 {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 32px 0 12px;
}
.prose p { margin-bottom: 16px; }
.prose p strong { color: var(--text-primary); font-weight: 500; }
.prose ul, .prose ol { margin: 12px 0 20px 22px; }
.prose li { margin-bottom: 8px; }
.prose a {
  color: var(--accent-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-tint);
  transition: color 0.15s, border-color 0.15s;
}
.prose a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.prose hr { border: none; border-top: 1px solid var(--border); margin: 48px 0; }
.prose blockquote {
  border-left: 2px solid var(--accent);
  padding-left: 18px;
  margin: 24px 0;
  color: var(--text-primary);
  font-weight: 400;
}
.prose code {
  font-family: var(--mono);
  font-size: 0.92em;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--text-primary);
}

/* Legal tables. In ../chronabioweb these live in a per-page inline
   <style>; here they are in the shared sheet so the CSP needs no
   'unsafe-inline'. Table scrolls inside its own box rather than
   making the page scroll sideways. */
.table-scroll { overflow-x: auto; margin: 16px 0 24px; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  border: 1px solid var(--border);
  min-width: 520px;
}
.prose thead { background: var(--bg-subtle); }
.prose th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.prose td {
  padding: 12px 16px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.55;
}
.prose tbody tr:last-child td { border-bottom: none; }
.prose td:first-child { color: var(--text-primary); font-weight: 500; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .split { grid-template-columns: 1fr; gap: 30px; }
  .principle-grid { grid-template-columns: 1fr; gap: 30px; }
  .reco-figure { max-width: 520px; }
}

@media (max-width: 900px) {
  nav.site-nav { padding: 0 24px; }
  .nav-links { display: none; }
  .nav-hamburger { display: inline-flex; }
  .nav-cta { padding: 8px 12px; font-size: 12px; }

  .section { padding: 64px 24px; }
  .section.tight { padding: 56px 24px; }
  .section.airy  { padding: 88px 24px; }

  .hero-headline { font-size: 36px; letter-spacing: -0.03em; }
  /* The scatter is biased right for the desktop text column; on a phone the
     text is full width, so the field is dimmed rather than repositioned. */
  .hero-field { opacity: 0.5; }
  .section-headline { font-size: 28px; }
  .section-body { font-size: 15.5px; }

  .flow-step { grid-template-columns: 1fr; gap: 8px; }
  .flow-step.is-you { padding-left: 16px; }
  .flow-num { padding-top: 0; }

  footer.site-footer { padding: 48px 24px 36px; }
  .footer-row { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; max-width: none; }

  .prose { padding: 104px 24px 72px; }
  .prose h1 { font-size: 32px; }
  .prose h2 { font-size: 20px; }
}

/* ── Motion preference ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}