/* pima — see docs/SITE-NOTES.md for the reasoning behind this file. */

/* ── Webfonts, SELF-HOSTED ───────────────────────────────────────────────────
   ⚠️ NEVER swap these for a fonts.googleapis.com <link>: it would falsify the
   privacy policy's "no requests to another company's servers" and needs a CSP
   relaxation `font-src 'self'` does not. latin-ext is Inter-only, for U+02C8 in
   /ˈpi.ma/. ────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-latin-400-700-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: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-latin-ext-400-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/source-serif-4-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: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/source-serif-4-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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-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;
}

:root {
  /* ── THE DESIGN SYSTEM ────────────────────────────────────────────────────
     Every colour below MAPS onto a token from pima.css (fetched at deploy,
     ADR-0041). ⚠️ Typing a hex here means the system has a gap — add the token in
     packages/brand instead. One argued exception: --wm-dot.
     ───────────────────────────────────────────────────────────────────────── */

  /* A composition ground, NOT the app's canvas. */
  --bg:       var(--pima-star-map-ground);
  --ink:      var(--pima-text-primary);
  --ink-dim:  var(--pima-text-secondary);
  --hairline: var(--pima-border-subtle);

  /* accent-ui = 3:1, for marks. accent-text = 4.5:1, for teal that is READ. */
  --teal:        var(--pima-accent-ui);
  --teal-light:  var(--pima-accent-ui);
  --accent-text: var(--pima-accent-text);

  /* Fallback lattice for no-mask browsers. ⚠️ Dots need ~3x the alpha of lines —
     do not copy line values here. */
  --grid: color-mix(in srgb, var(--pima-text-secondary) 22%, transparent);

  /* System tokens: the app's login screen paints the same planisphere. */
  --stars: var(--pima-star-map-stars);
  --bloom: var(--pima-star-map-bloom);

  /* ⚠️ TEAL, not a neutral: over constellation lines a neutral rule reads as one
     more chart line. Hue is what separates them. Other hairlines keep --hairline. */
  --rule: color-mix(in srgb, var(--pima-accent-ui) 55%, transparent);

  /* ⚠️ THE ONE ARGUED LITERAL HERE. teal-400, pinned: it must match the generated
     assets (tools/) and must NOT vary by theme. These disagreed once — docs/SITE-NOTES.md. */
  --wm-dot: #238582;

  /* ── ONE JOB EACH ─────────────────────────────────────────────────────────
     Teal marks the thing you act on, or the thing that tells you where you are —
     never the thing you read. So: links, arrows, focus rings, and the uppercase
     section label. Neutrals are body structure and captions. Amber has left this
     site entirely (it is a WARNING token now). Full argument in the notes.
     ───────────────────────────────────────────────────────────────────────── */

  /* ⚠️ Named because two places must agree: <body> pads by it, the sticky footer
     cancels it with a negative margin. Inline it in one and they drift. */
  --pad: clamp(2rem, 6vw, 4rem);

  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Sans is chrome, serif is the definition, mono is the typed line. The system
     stacks behind each still cover the swap window and a failed woff2. */
  --serif: 'Source Serif 4', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo,
           Consolas, 'Liberation Mono', 'Courier New', monospace;
}

/* ⚠️ No light-mode block: pima.css emits both themes, so the mappings above are
   correct in each. Its measured decisions moved into brand tests, not lost. */

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

html {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* min-height, not height: real content sits below the spread now, and a fixed
   height would clip it on short screens instead of scrolling. */
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* fixed: an oversized absolute layer would inflate the document. */
  background-image:
    radial-gradient(52rem 34rem at 50% 46%, var(--bloom), transparent 72%);
  background-attachment: fixed;

  /* Column: masthead -> prose -> footer. The vertical centring lives on .page. */
  display: flex;
  flex-direction: column;
  padding: var(--pad);
  /* The sticky footer owns this space. */
  padding-bottom: 0;
}

/* Takes the space the footer does not, and centres the composition in it. */
.page {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(3.5rem, 9vw, 6.5rem);
}

/* The lattice sheet. `fixed` keeps it out of flow; the radial mask is what makes
   it read as a sheet rather than wallpaper. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  /* ⚠️ FALLBACK, AND IT MUST STAY. Without mask support the rule below paints a
     flat --grid rectangle over the viewport; @supports upgrades it to the chart. */
  background-image: radial-gradient(circle, var(--grid) 1.2px, transparent 1.3px);
  background-size: 26px 26px;
}

/* ── The star chart ──────────────────────────────────────────────────────────
   A J2000 planisphere from tools/make-star-field.py, consumed as an ALPHA MASK:
   the colour comes from background-color, so ONE file follows both themes.
   ────────────────────────────────────────────────────────────────────────── */
@supports ((-webkit-mask-image: url('/star-field.svg')) or (mask-image: url('/star-field.svg'))) {
  body::before {
    background-image: none;
    background-color: var(--stars);
    -webkit-mask-image: url('/star-field.svg');
            mask-image: url('/star-field.svg');
    -webkit-mask-size: cover;      mask-size: cover;
    -webkit-mask-position: center top; mask-position: center top;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }
}

/* The vignette as an OCCLUDER, not a mask — the mask slot is the star chart.
   Sits at -1, over the chart at -2, under all content. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 96% 94% at 50% 48%, transparent 45%, var(--bg) 99%);
}

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

/* ── The spread ─────────────────────────────────────────────────────────── */

/* ⚠️ FIXED width, not `auto`. With auto, every character typed would widen the
   column and slide the whole composition sideways. */
.spread {
  display: grid;
  grid-template-columns: auto 1px 25rem;
  gap: clamp(1.75rem, 5vw, 3.5rem);
  align-items: center;
}

.divider {
  background: var(--rule);
  align-self: stretch;
}

/* ── Left column ────────────────────────────────────────────────────────── */

.left { text-align: right; }

/* ⚠️ THE FONT-SIZE IS THE SIZING UNIT, not decoration — the image below is sized
   in `em` against it. Remove it and the mark collapses to its intrinsic 759px. */
.wordmark {
  margin: 0;
  font-size: clamp(2.75rem, 8vw, 4.75rem);
  line-height: 0.95;
}

/* ⚠️ DERIVED, NOT CHOSEN: 2.2145em / (720/759) = 2.3345em, because the PNG pads
   6% of the mark's height on every side. Get it wrong and the logo is 5% off. */
.wordmark img {
  display: block;
  margin-left: auto;      /* .left is right-aligned; a block image needs telling */
  width: 2.3345em;
  height: auto;
}

/* ⚠️ `.wm` and its CSS dot were RETIRED 2026-08-13 — the mark is an image now and
   the dot is in glyph space. Do NOT reinstate a dotless ı: it produced
   "pima pıma" on copy-paste. Geometry and the Safari defect: docs/SITE-NOTES.md. */

.ipa {
  margin: 0.7rem 0 0;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
}

/* ── Right column ───────────────────────────────────────────────────────── */

.right { text-align: left; }

.label {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-indent: 0.22em;
}

/* Serif italic against the sans — the strongest contrast available. */
.gloss {
  margin: 0.55rem 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.75rem, 5vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* ── The cycling lede ───────────────────────────────────────────────────── */

/* Mono, so it reads as typing rather than moving prose. min-height reserves the
   longest phrase: without it the centred grid drifts on every cycle. */
.lede {
  margin: 1.5rem 0 0;
  font-family: var(--mono);
  font-size: clamp(0.82rem, 2.1vw, 0.9rem);
  line-height: 1.75;
  letter-spacing: -0.01em;
  color: var(--ink-dim);
  /* ⚠️ MEASURED: 3 lines is the worst case at 320px, including mid-type partials.
     Re-measured 2026-08-11 when IBM Plex Mono replaced the system stack. */
  min-height: 3lh;
}

@supports not (min-height: 3lh) {
  .lede { min-height: 4.8em; }
}

.cycle { color: var(--ink); }

/* Only while the script is driving the text — a caret on static text lies. */
.cycle.is-typing::after {
  content: '';
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.18em;
  background: var(--teal-light);
  animation: caret 1.1s steps(1, end) infinite;
}

@keyframes caret {
  0%, 50%      { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* ── Contact ────────────────────────────────────────────────────────────── */

/* ONE call to action, deliberately (EVAL-E1). Kept as a flex column: it carries
   the narrow-screen centring, and a second action is plausible later. */
.actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}

.contact {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding-bottom: 2px;
  font-size: 0.875rem;
  color: var(--ink-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.contact:hover,
.contact:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--pima-accent-text);
}

.contact:focus-visible {
  outline: 2px solid var(--pima-accent-text);
  outline-offset: 6px;
  border-radius: 2px;
}

.contact .arrow {
  color: var(--pima-accent-text);
  transition: transform 0.18s ease;
}

.contact:hover .arrow { transform: translateX(3px); }

/* ── What pima does ─────────────────────────────────────────────────────── */

/* Measure, not width: ~34rem is 65-75 characters, where prose stops tiring. */
.about {
  max-width: 34rem;
  text-align: left;
}

/* ── ONE JOB EACH ─────────────────────────────────────────────────────────
     Teal marks the thing you act on, or the thing that tells you where you are —
     never the thing you read. So: links, arrows, focus rings, and the uppercase
     section label. Neutrals are body structure and captions. Amber has left this
     site entirely (it is a WARNING token now). Full argument in the notes.
     ───────────────────────────────────────────────────────────────────────── */
.about h1,
.doc h2 {
  margin: 0 0 1.1rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-text);
  /* Puts the optical left edge back in line with the paragraphs below. */
  text-indent: 0.22em;
}

.about p {
  margin: 0 0 1.05rem;
  font-size: 0.95rem;
  line-height: 1.72;
  color: var(--ink-dim);
}

/* The sentence that answers "what is this?" — serif, the page's voice for a
   definition. */
.about .lead {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 3vw, 1.4rem);
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 1.4rem;
}

.about .more {
  margin: 1.5rem 0 0;
}

/* ── Document pages (privacy policy) ────────────────────────────────────── */

/* Must NOT inherit .page's centring — a centred long document jumps. */
.doc-page {
  justify-content: flex-start;
  align-items: center;
  gap: 0;
}

.doc {
  max-width: 42rem;
  width: 100%;
  text-align: left;
}

.doc-head {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--hairline);
}

.doc-home {
  margin: 0 0 1.5rem;
  font-size: 0.85rem;
}

.doc-home a {
  color: var(--ink-dim);
  text-decoration: none;
  text-transform: lowercase; /* ADR-0031 */
}

.doc-home a:hover,
.doc-home a:focus-visible { color: var(--pima-accent-text); }

.doc h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.doc-version {
  margin: 0.75rem 0 0;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink-dim);
}

.doc section { margin-bottom: 2.5rem; }

/* .doc h2 is styled with .about h1 above — one rule, so they cannot drift. */

.doc p,
.doc li {
  font-size: 0.93rem;
  line-height: 1.75;
  color: var(--ink-dim);
}

.doc p { margin: 0 0 1rem; }

.doc strong { color: var(--ink); font-weight: 600; }

.doc ul {
  margin: 0 0 1rem;
  padding-left: 1.15rem;
}

.doc li { margin-bottom: 0.5rem; }

.doc a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--pima-accent-text);
}

.doc a:hover,
.doc a:focus-visible { color: var(--pima-accent-text); }

.doc code {
  font-family: var(--mono);
  font-size: 0.85em;
  color: var(--ink);
}

/* An aside, not a blockquote: a clarification, not a quotation. */
.doc .note {
  margin: 1.5rem 0 0;
  padding-left: 1.1rem;
  border-left: 2px solid var(--hairline);
}

.doc .note p { margin: 0; }

/* Tables scroll in their own box — at 320px they would otherwise push the page
   wide. */
.table-wrap {
  overflow-x: auto;
  margin: 0 0 1rem;
}

.doc table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9rem;
}

.doc th,
.doc td {
  padding: 0.6rem 0.9rem 0.6rem 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--hairline);
  line-height: 1.6;
  color: var(--ink-dim);
}

.doc th {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

/* ⚠️ The privacy link is REQUIRED by Google for a published OAuth app. Quiet
   chrome, but not optional chrome. */
/* Sticky, so the privacy link is reachable anywhere in the policy.
     ⚠️ The background must stay OPAQUE — the bloom is background-attachment:
     fixed, so a transparent footer shows text sliding through it. */
.site-footer {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: var(--bg);
  margin-top: clamp(3rem, 8vw, 5rem);

  /* FULL-BLEED: cancel the gutter, re-apply as padding, or the bar reads as a
     floating card with visible edges. */
  margin-left: calc(-1 * var(--pad));
  margin-right: calc(-1 * var(--pad));
  padding-left: var(--pad);
  padding-right: var(--pad);

  /* ⚠️ What makes the settle invisible is that <body> has NO bottom padding — NOT
     that these match the gutter. Tying them together made the bar ~106px tall. */
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-top: 1px solid var(--hairline);
  text-align: center;
  font-size: 0.8rem;
  color: var(--ink-dim);
}

.site-footer p { margin: 0; }

/* 12.8px, so they need the accessible --ink-dim — one of them is the required
   privacy link, and a required link nobody can read satisfies nothing. */
/* inline-block + vertical padding so the tap target clears 24x24px. */
.site-footer a {
  display: inline-block;
  padding: 0.3rem 0.1rem;
  color: var(--ink-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--pima-accent-text);
}

.site-footer a:focus-visible {
  outline: 2px solid var(--pima-accent-text);
  outline-offset: 4px;
  border-radius: 2px;
}

.site-footer .sep { margin: 0 0.6rem; }

/* No .colophon rule: the Health Intel Ltd line was dropped from both footers
   2026-08-11. The company is named in section 1 of the policy, where it counts. */

/* ── Narrow ─────────────────────────────────────────────────────────────── */

@media (max-width: 46rem) {
  .spread {
    /* ⚠️ `minmax(0, 1fr)`, NOT `1fr`. A bare `1fr` is `minmax(auto, 1fr)`, so the
       track's MINIMUM is its content's min-content width — and the content here
       is a line being typed one character at a time. The track therefore grew
       and shrank with the phrase, and the wordmark, which is flush to the
       column's edge, slid 7px sideways in time with the typing. The desktop
       layout pins its track against exactly this; the narrow one did not. */
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
    max-width: 30rem;
    text-align: center;
  }
  .divider {
    height: 1px;
    width: 5rem;
    justify-self: center;
    align-self: auto;
  }
  .left, .right { text-align: center; }
  /* ⚠️ `text-align` CANNOT centre the wordmark — it is a BLOCK image, and the
     rule above is inert on it. It takes `margin-left: auto` to sit against the
     right edge on desktop, which pinned it there here too: 153px of space on
     its left and none on its right, while everything below it centred. */
  .wordmark img { margin-inline: auto; }
  /* The right column centres here, so the actions must too. */
  .actions { align-items: center; }
  /* Same 3lh — 320px is the width that actually needs three. */
}

@media (prefers-reduced-motion: reduce) {
  .cycle.is-typing::after { animation: none; opacity: 0; }
  .contact,
  .contact .arrow { transition: none; }
  .contact:hover .arrow { transform: none; }
}

/* ══ v2 — the marketing page below the spread ═══════════════════════════════
   Everything here maps onto pima.css tokens, same as above. One reading column
   for prose (--measure), one wider column for the two domain cards. Teal keeps
   its one job: the thing you act on, or the thing that tells you where you are.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --measure: 34rem;                  /* prose: 65–75 characters */
  --wide:    58rem;                  /* the domain grid and the steps */
}

/* ── Masthead ───────────────────────────────────────────────────────────── */

/* Sticky, full-bleed, no rule. ⚠️ The background must stay OPAQUE — the bloom is
   background-attachment: fixed, so a translucent bar shows text sliding through (tried 2026-09-09). */
.masthead {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg);
  margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 0;
  padding: 0.7rem var(--pad);
  font-size: 1.05rem;              /* the sizing unit for the small mark */
}

.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  max-width: var(--wide);
  margin: 0 auto;
}

/* Same PNG geometry as the hero mark: 2.3345em per 1em of mark height. */
.masthead-mark img {
  display: block;
  width: 2.3345em;
  height: auto;
}

.masthead-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.5vw, 1.6rem);
  font-size: 0.85rem;
}

.masthead-nav a:not(.btn) {
  color: var(--ink-dim);
  text-decoration: none;
  padding: 0.3rem 0;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.masthead-nav a:not(.btn):hover,
.masthead-nav a:not(.btn):focus-visible {
  color: var(--ink);
  border-bottom-color: var(--pima-accent-text);
}

.masthead-nav a:focus-visible {
  outline: 2px solid var(--pima-accent-text);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ── Buttons — the design system's primary, and only that ───────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--pima-control-height, 36px);
  padding: 0 1.1rem;
  border-radius: var(--pima-radius-6);
  font-size: 0.9rem;
  font-weight: var(--pima-weight-medium, 500);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.btn-primary {
  background: var(--pima-accent-solid);
  color: var(--pima-accent-on-solid);
  box-shadow: var(--pima-elev-rest);
}

.btn-primary .arrow {
  color: inherit;
  transition: transform 0.18s ease;
}

.btn-primary:hover { box-shadow: var(--pima-elev-hover); }
.btn-primary:hover .arrow { transform: translateX(3px); }

.btn:focus-visible {
  outline: 2px solid var(--pima-accent-text);
  outline-offset: 3px;
}

.btn-sm {
  min-height: 32px;
  padding: 0 0.85rem;
  font-size: 0.82rem;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

/* Roughly a viewport, sized to what it holds rather than pinned to 100vh. */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 5vw, 3rem);
  min-height: min(72vh, 44rem);
  justify-content: center;
  padding-top: clamp(1rem, 4vw, 3rem);
}

/* The one sentence a reader takes away. Serif: the page's voice for a definition. */
.thesis {
  margin: 0;
  max-width: 30ch;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.6vw, 2.15rem);
  line-height: 1.25;
  letter-spacing: -0.012em;
  text-align: center;
  text-wrap: balance;
  color: var(--ink);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.75rem;
}

.hero-actions .contact { font-size: 0.9rem; }

/* ── Bands ──────────────────────────────────────────────────────────────── */

.band {
  width: 100%;
  max-width: var(--measure);
  text-align: left;
}

/* ONE rule for every section label — .about h1 and .doc h2 above share its values. */
.eyebrow {
  margin: 0 0 1.1rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-text);
  text-indent: 0.22em;
}

.band p {
  margin: 0 0 1.05rem;
  font-size: 0.95rem;
  line-height: 1.72;
  color: var(--ink-dim);
}

.band .lead {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 3vw, 1.4rem);
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 1.4rem;
}

.band .more { margin: 1.25rem 0 0; }

/* ── How it works — five steps, a sequence, so the order carries meaning ─── */

.steps { max-width: var(--wide); }

.steps-intro { max-width: var(--measure); }

.step-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step-list li {
  counter-increment: step;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.1rem 1.1rem 1.1rem 0;
  margin-right: 1.1rem;
  border-top: 1px solid var(--hairline);
}

/* Mono, lowercase: the same words the pipeline figure in the docs uses. */
.step-name {
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--ink);
}

.step-name::before {
  content: counter(step) ' ';
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--accent-text);
}

.step-text {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ink-dim);
}

/* ── Two domains ────────────────────────────────────────────────────────── */

.domains { max-width: var(--wide); }

.domains-intro { max-width: var(--measure); }

.domain-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem);
  margin-top: 1.5rem;
}

.domain {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* The docs' elevated screenshot card, verbatim: card ground, rest border, overlay elevation. */
.screen {
  padding: var(--pima-space-12, 12px);
  margin-bottom: 0.6rem;
  background: var(--pima-card-rest-bg);
  border: 1px solid var(--pima-card-rest-border);
  border-radius: var(--pima-card-radius);
  box-shadow: var(--pima-elev-overlay);
}

/* ⚠️ Both frames are the SAME shape whatever the captures measure: the PAR capture's
   ratio, and a taller capture is cropped at its foot, never squashed. */
.screen img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1474 / 875;
  object-fit: cover;
  object-position: top;
  border-radius: var(--pima-radius-6);
}

.domain h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--ink);
}

.domain p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--ink-dim);
}

.domain .contact { margin-top: 0.3rem; align-self: flex-start; }

/* ── Four things — a definition list, not four cards ────────────────────── */

.tenet-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem 2.5rem;
  margin: 0;
}

.tenet-list > div {
  padding-top: 0.9rem;
  border-top: 1px solid var(--hairline);
}

.tenet-list dt {
  margin: 0 0 0.35rem;
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--ink);
}

.tenet-list dd {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-dim);
}

/* ── See it working ─────────────────────────────────────────────────────── */

.evaluate .hero-actions {
  justify-content: flex-start;
  margin-top: 0.4rem;
}

/* ── Narrow screens ─────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .step-list { grid-template-columns: 1fr; }
  .step-list li {
    flex-direction: row;
    align-items: baseline;
    gap: 1rem;
    margin-right: 0;
    padding: 0.85rem 0;
  }
  .step-name { flex: 0 0 6.5rem; }
  .step-name::before { display: inline; margin: 0 0.4rem 0 0; }
  .domain-grid,
  .tenet-list { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .masthead-nav a:not(.btn) { display: none; }
  .hero { min-height: 0; }
}