/**
 * content.css · the styles the content pages add on top of the shared
 * system: /learn/, /faq/, /privacy/, /terms/, /why-mould-detect/,
 * /ai-vision/, /pricing/, /for-specialists/, /investors/ and the three
 * noindex /early-access/ result pages (confirmed, expired, withdrawn),
 * which reuse only the page head anatomy below.
 *
 * Loaded by those pages alone, after tokens.css, base.css and app.css.
 * Everything structural is already solved upstream (.shell, .section,
 * .section-head, .eyebrow, .lede, .claim, .cta, .help-band, .btn, .reveal),
 * so what lives here is genuinely new anatomy: the shared page head, the
 * standing HOW WE HELP band, the guide point grid, the video card, the chat
 * teaser, the disclosure, the policy block, the national risk map, the
 * AI Vision article figures, the pricing matrix and value-lock chips, the
 * specialists workflow/tier-ladder anatomy, and the investors market band.
 *
 * /terms/ adds NO anatomy at all: it is the /privacy/ document in the same
 * hairline column, so it reuses .policy wholesale and appears in this file only
 * by inheritance.
 *
 * House rules (design.md §2, §4, §6): every value is a token or composed from
 * tokens with color-mix, no raw colours, no shadows, hairlines carry structure,
 * and only transform and opacity ever animate.
 *
 * Order: page head · how we help · guides · videos · certifications ·
 * Miss Mould teaser · disclosures · FAQ close · policy · national map ·
 * why-page editorial blocks · ai-vision article · pricing matrix ·
 * for-specialists workflow · investors market band.
 */

/* ====================================================================== */
/*  PAGE HEAD (shared by all three)                                       */
/* ====================================================================== */

/* Same clearance the About page buys: there is no hero here, so the first
   section owes the fixed header its own room. */
.content-head {
  padding-block-start: calc(var(--nav-h) + var(--sp-6));
  padding-block-end: var(--sp-6);
}

.content-head__inner {
  display: grid;
  gap: var(--sp-3);
}

.content-head__text {
  display: grid;
  gap: var(--sp-3);
}

/* ---- the establishing shot (client direction 2026-08-26) ------------- */
/* One circle-cropped photograph beside the head: the page announces its
   audience before a word lands. Echoes the homepage's circular
   how-it-works portrait (the approved circular-media register); the circle
   is CSS because these are plain photographs, not alpha-masked artwork.
   The hairline ring is the same frame every media panel wears. */
/* The eyebrow rides its own full-width row; the circle then starts level
   with the h1's cap line and hangs beside the text it accompanies (client
   direction 2026-08-26), rather than floating centred in the column. */
.content-head__inner--shot {
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "eyebrow eyebrow"
    "text    shot";
  align-items: start;
  gap: var(--sp-3) var(--gutter);
}

.content-head__inner--shot > .eyebrow { grid-area: eyebrow; }
.content-head__inner--shot > .content-head__text { grid-area: text; }
.content-head__inner--shot > .content-head__shot { grid-area: shot; }

.content-head__shot {
  width: clamp(13rem, 24vw, 19rem);
  aspect-ratio: 1;
  height: auto;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
}

/* Below the two-column width the shot steps under the lede as a smaller
   medallion, centred (client direction 2026-08-26). */
@media (max-width: 759px) {
  .content-head__inner--shot {
    grid-template-columns: 1fr;
    grid-template-areas: "eyebrow" "text" "shot";
  }
  .content-head__shot {
    width: 11rem;
    justify-self: center;
  }
}

/* A sub-page h1 is not a hero h1: --text-display belongs to the homepage
   alone, so this takes the section-title step down (design.md §3.1). */
.content-head__title {
  font-size: var(--text-h2);
  max-width: 20ch;
  margin: 0;
}

.content-head__lede { max-width: 58ch; }

/* One follow-on action under the head (the three noindex /early-access/
   result pages: confirmed, expired, withdrawn). Left-aligned, matching the
   asymmetric default everywhere but the homepage's CTA band. */
.content-head__actions { margin-block-start: var(--sp-4); margin-block-end: var(--sp-6); }

/* ====================================================================== */
/*  HOW WE HELP (the standing support band)                               */
/* ====================================================================== */

/*
 * The same treatment the homepage's closing band uses: --surface-1 between two
 * hairlines. It is deliberately the quietest panel on the page, because its job
 * is reassurance, not persuasion, and because it appears on all three pages and
 * must never compete with the content it introduces.
 */
.help-band {
  background-color: var(--surface-1);
  border-block: 1px solid var(--line);
}

.help-band__inner {
  display: grid;
  gap: var(--sp-3);
  justify-items: start;
}

.help-band__body {
  color: var(--ink-1);
  font-size: var(--text-body-lg);
  max-width: 62ch;
}

.help-band__actions { margin-block-start: var(--sp-2); }

/* ====================================================================== */
/*  GUIDES (/learn/)                                                      */
/* ====================================================================== */

.guide__head { max-width: 40rem; }

.guide__head .lede { margin-block-start: var(--sp-3); }

/*
 * Two columns of hairline-separated points, off the left edge of the field
 * rather than in a card row: these are notes, not offers (design.md §6 bans the
 * identical-card row, and four boxes would be exactly that).
 */
.guide__points {
  margin-block-start: var(--sp-6);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--sp-6);
}

.point {
  padding-block: var(--sp-4);
  border-block-start: 1px solid var(--line);
}

/* The first point in EACH column loses its rule, so the grid opens on a clean
   edge in both columns at desktop. */
.point:nth-child(1),
.point:nth-child(2) { border-block-start: 0; padding-block-start: 0; }

/* A point heading is a label on a note, so it takes the h3 slot but caps the
   fluid token: uncapped, 28px serif over a 46ch measure read as a section
   title and flattened the hierarchy the h2 above it had just built. */
.point__heading {
  font-size: min(var(--text-h3), 1.2rem);
  margin-block-end: var(--sp-2);
}

.point__body {
  color: var(--ink-1);
  max-width: 52ch;
}

@media (max-width: 900px) {
  .guide__points { grid-template-columns: 1fr; gap: 0; }
  .point:nth-child(2) {
    border-block-start: 1px solid var(--line);
    padding-block-start: var(--sp-4);
  }
}

/* ====================================================================== */
/*  VIDEOS (/learn/)                                                      */
/* ====================================================================== */

.videos {
  margin-block-start: var(--sp-6);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
}

.video__link {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: var(--sp-4);
  align-items: center;
  height: 100%;
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background-color: var(--surface-1);
  color: var(--ink-0);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.video__link:hover,
.video__link:focus-visible {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.video__thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-1);
  background-color: var(--surface-2);
}

.video__title {
  font-size: min(var(--text-h3), 1.0625rem);
  line-height: 1.25;
  margin-block-end: var(--sp-2);
}

.video__partner { color: var(--ink-2); }

@media (max-width: 900px) {
  .videos { grid-template-columns: 1fr; }
}

/*
 * Phones stack the card instead of narrowing the thumbnail column. With two
 * partners in the section the titles and credits are long, and a 7.5rem
 * thumbnail beside them left roughly 170px of measure: eight lines of title
 * over four lines of credit per card. Full-width thumbnail, text underneath,
 * and every card reads in three lines or fewer.
 */
@media (max-width: 559px) {
  .video__link {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    align-items: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .video__link { transition: border-color var(--dur-fast) linear; }
  .video__link:hover,
  .video__link:focus-visible { transform: none; }
}

/* ====================================================================== */
/*  CERTIFICATIONS (/learn/)                                              */
/* ====================================================================== */

/* A roadmap note is not a guide. It keeps the h2 slot for the outline's sake,
   but the fluid token is capped so "coming soon" never sets the largest type on
   the screen and out-shouts the four guides above it. */
.certs__head h2 { font-size: min(var(--text-h2), 1.75rem); }

.certs__body {
  color: var(--ink-1);
  max-width: 55ch;
  margin-block-start: var(--sp-4);
}

/* The planner's chip register, tinted with the accent rather than a risk
   colour: this is a state of the roadmap, not a state of someone's wall, and
   the risk palette is reserved for data (design.md §2.2). */
.chip {
  display: inline-block;
  margin-block-start: var(--sp-3);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-1);
  background-color: color-mix(in srgb, var(--accent) 12%, var(--surface-1));
  color: color-mix(in oklab, var(--accent) 55%, var(--ink-0));
}

/* ====================================================================== */
/*  VALUE-LOCK CHIPS (/learn/)                                            */
/* ====================================================================== */

/*
 * The teaser chip that names which tier unlocks a capability the page has
 * just mentioned (client direction 2026-08-19, DIRECTION.md "Free vs paid
 * dynamic"). It gates nothing: every guide, video and answer on /learn/ stays
 * whole and free.
 *
 * It deliberately borrows .pricing__lock's anatomy (hairline, --r-1, ink-0
 * label beside an ink-2 tier) so a value lock looks the same wherever the
 * reader meets one, on the pricing page's strip or in the middle of a guide.
 * What it adds is the link: the chip routes to /pricing/, the single source
 * of tier truth, so the reader never has to go hunting.
 */
.value-lock-chip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
  margin-block-start: var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background-color: var(--surface-0);
  color: var(--ink-2);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.value-lock-chip__label { color: var(--ink-0); }
.value-lock-chip__sep { color: var(--ink-2); }

.value-lock-chip:hover,
.value-lock-chip:focus-visible { border-color: var(--accent); }

.value-lock-chip:hover .value-lock-chip__label,
.value-lock-chip:focus-visible .value-lock-chip__label { color: var(--accent); }

/* The ground stays --surface-0 everywhere, exactly as .pricing__lock's does:
   on a --surface-1 band the chip lifts one step, and on the page ground the
   hairline alone defines it, which is the field-notebook register. */

/* Where the chip shares a row with something else, the row owns the spacing
   and the chip's own top margin would knock it off that row's baseline. */
.miss__actions .value-lock-chip,
.certs__chips .value-lock-chip { margin-block-start: 0; }

/* COMING SOON beside the tier chip: two different answers, one row. */
.certs__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-block-start: var(--sp-3);
}

.certs__chips .chip { margin-block-start: 0; }

@media (prefers-reduced-motion: reduce) {
  .value-lock-chip { transition: border-color var(--dur-fast) linear; }
}

/* ====================================================================== */
/*  MISS MOULD TEASER (/learn/)                                           */
/* ====================================================================== */

.miss {
  background-color: var(--surface-1);
  border-block: 1px solid var(--line);
}

.thread {
  margin-block-start: var(--sp-5);
  display: grid;
  gap: var(--sp-3);
  max-width: 46rem;
}

/*
 * Quiet bubbles, not a chat widget. Nothing here responds, because Miss Mould
 * lives in the app and a website that fakes the conversation makes a promise it
 * cannot keep. The two turns differ by ground and by side so the exchange is
 * legible at a glance without a single icon.
 */
.turn {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-2);
  border: 1px solid var(--line);
}

.turn--ask {
  background-color: var(--surface-0);
  justify-self: start;
  max-width: 34rem;
}

.turn--reply {
  background-color: color-mix(in srgb, var(--accent) 8%, var(--surface-0));
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  justify-self: end;
  max-width: 40rem;
}

.turn__who {
  color: var(--ink-2);
  margin-block-end: var(--sp-1);
}

.turn__text { color: var(--ink-0); }

.miss__foot {
  color: var(--ink-1);
  margin-block-start: var(--sp-4);
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid var(--line);
  max-width: 46rem;
}

/* The button and the value-lock chip share the row and wrap together on a
   narrow screen rather than the chip hanging off the button's baseline. */
.miss__actions {
  margin-block-start: var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

@media (max-width: 700px) {
  .turn--ask,
  .turn--reply { justify-self: stretch; max-width: none; }
}

/* ====================================================================== */
/*  DISCLOSURES (/faq/)                                                   */
/* ====================================================================== */

.disclosures {
  margin-block-start: var(--sp-5);
  max-width: 64rem;
  border-block-start: 1px solid var(--line);
}

/*
 * A hairline stack, not a stack of cards: twenty boxes in a column is the
 * templated look design.md §6 rules out, and the rules already say "list".
 */
.disclosure { border-block-end: 1px solid var(--line); }

.disclosure__summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-4);
  align-items: center;
  padding-block: var(--sp-4);
  cursor: pointer;
  list-style: none;
}

/* Safari still paints its own triangle without this. */
.disclosure__summary::-webkit-details-marker { display: none; }

.disclosure__summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

.disclosure__q {
  font-size: min(var(--text-h3), 1.0625rem);
  line-height: 1.35;
  margin: 0;
  transition: color var(--dur-fast) var(--ease-out);
}

.disclosure__summary:hover .disclosure__q { color: var(--accent); }

/* The mark is drawn from two hairlines, so it themes itself and needs no
   asset: a plus that becomes a minus. */
.disclosure__mark {
  position: relative;
  width: var(--sp-4);
  height: var(--sp-4);
  flex: none;
}

.disclosure__mark::before,
.disclosure__mark::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background-color: var(--ink-1);
  transition: transform var(--dur-fast) var(--ease-out);
}

.disclosure__mark::after { transform: rotate(90deg); }

.disclosure[open] .disclosure__mark::after { transform: rotate(0deg); }

.disclosure__a {
  padding-block-end: var(--sp-4);
  padding-inline-end: var(--sp-6);
}

.disclosure__a p {
  color: var(--ink-1);
  max-width: 65ch;
}

.faq-group__more {
  margin-block-start: var(--sp-4);
  font-size: var(--text-small);
}

.faq-cta__actions { margin-block-start: var(--sp-2); }

/* ====================================================================== */
/*  POLICY (/privacy/)                                                    */
/* ====================================================================== */

/* Sections in a legal document are read one after another, so they are set as
   one hairline-ruled column on a narrow measure rather than as panels. The rule
   is drawn by adjacency rather than by :first-of-type, because the page head
   and the HOW WE HELP band are <section>s too: the first .policy is not the
   first section, and :first-of-type would have ruled the wrong block. */
.policy__inner { max-width: 62ch; }

.policy + .policy .policy__inner {
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid var(--line);
}

/* A policy heading is a signpost inside a document, not a section title on a
   marketing page: the h2 slot stays, the fluid token is capped. */
.policy__title {
  font-size: min(var(--text-h2), 1.75rem);
  margin-block-end: var(--sp-3);
}

.policy__body {
  color: var(--ink-1);
  margin-block-end: var(--sp-3);
}

.policy__body:last-child { margin-block-end: 0; }

.policy__list {
  display: grid;
  gap: var(--sp-2);
  margin-block-start: var(--sp-3);
  color: var(--ink-1);
}

/* Hairline bullets: the same instrument register the specimen labels use. */
.policy__list li {
  padding-inline-start: var(--sp-4);
  position: relative;
}

.policy__list li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.7em;
  inset-inline-start: 0;
  width: var(--sp-3);
  height: 1px;
  background-color: var(--accent);
}

/*
 * The health disclaimer is the one section a reader must not skim past, so it
 * leaves the column and takes an accent-edged card. Calmer than the app's amber
 * warning panel on purpose: this page's job is candour, not alarm
 * (design.md §1).
 */
/* Two classes on the section, so this beats the `.policy + .policy` rule above
   on specificity rather than by accident of order. */
.policy.policy--callout .policy__inner {
  /* Wider than the reading column so the card is visibly a different object,
     but still short of the shell: a full-width card left its copy stranded on
     one side of a very large empty box at 1440. */
  max-width: 52rem;
  border-block-start: 0;
  padding: var(--sp-5);
  border-radius: var(--r-2);
  border-inline-start: 3px solid var(--accent);
  background-color: color-mix(in srgb, var(--accent) 6%, var(--surface-1));
}

.policy--callout .policy__body { color: var(--ink-0); max-width: 62ch; }

.policy--callout .policy__body:first-of-type { font-weight: 500; }

/* ====================================================================== */
/*  NATIONAL RISK MAP (/why-mould-detect/)                                */
/* ====================================================================== */

/*
 * The page's one instrument. It borrows nothing from conditions.css, because
 * that file is the homepage's and this page does not load it: everything the
 * map needs is redeclared here under its own `.aumap` family, in tokens.
 *
 * The risk hooks are SCOPED to the map rather than declared globally the way
 * conditions.css declares them, so a future data-level attribute elsewhere on a
 * content page cannot silently inherit a colour it did not ask for.
 */
.aumap [data-level="low"]    { --risk: var(--risk-low); }
.aumap [data-level="watch"]  { --risk: var(--risk-watch); }
.aumap [data-level="high"]   { --risk: var(--risk-high); }
.aumap [data-level="severe"] { --risk: var(--risk-severe); }

/* Risk words are small text, and two of the four hues sit under 3:1 as ink.
   Nudging each toward --ink-0 keeps its identity and clears AA in both themes
   (design.md §2.2); the raw token still fills the marker. */
.aumap [data-level] { --risk-ink: color-mix(in oklab, var(--risk) 65%, var(--ink-0)); }

/* A city with no reading is not a fifth risk level, so it takes a surface
   rather than a hue, and says NO DATA in ordinary secondary ink. */
.aumap [data-level="none"] {
  --risk: var(--surface-2);
  --risk-ink: var(--ink-1);
}

.aumap__how {
  color: var(--ink-1);
  max-width: 65ch;
  margin-block-start: var(--sp-3);
}

.aumap__head { max-width: 44rem; }

.aumap {
  margin-block-start: var(--sp-5);
}

/* Held to the map's own width plus its padding rather than stretched across the
   1240px field: a 720px silhouette floating in the middle of a full-shell box
   reads as a mistake, and asymmetry is this system's default (design.md §4). */
.aumap__panel {
  max-width: 52rem;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-4);
}

/* Badge left, freshness stamp right, exactly as the conditions panels place
   them: the honesty of the reading is the first thing on the panel. */
.aumap__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-3);
}

.aumap__live {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-2);
}

.aumap__live.is-live,
.aumap__live.is-partial,
.aumap__live.is-offline { color: var(--ink-0); }

.aumap__live .live__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--risk-low);
  flex: none;
}

.aumap__live.is-partial .live__dot { background-color: var(--risk-watch); }

.aumap__stamp {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-1);
  font-variant-numeric: tabular-nums;
}

/* No reading, no stamp: an empty element must not open a gap in the row. */
.aumap__stamp:empty { display: none; }

/* The all-empty state: one mono line where the map was (design.md §7.7). */
.aumap__unavailable {
  margin: 0;
  padding-block: var(--sp-5);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-1);
}

.aumap__unavailable:empty { display: none; }

/* The UA's [hidden] rule loses to this file's own display declarations, so
   every hideable block answers it for itself. */
.aumap__figure[hidden],
.aumap__foot[hidden],
.aumap__details[hidden],
.aumap__live[hidden] { display: none; }

.aumap__figure { margin: 0; }

.aumap__svg {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  margin-inline: auto;
  overflow: visible;
}

/* The continent: one whisper of accent into the card surface, under everything.
   No second fill and no ocean: the page ground IS the ocean (design.md §4).
   Its edge is drawn separately, by .aumap__coast, ABOVE the zone tints. */
.aumap__land {
  fill: color-mix(in srgb, var(--accent) 8%, var(--surface-1));
}

/* The silhouette's hairline, redrawn over the underlay: a 1.25px rule beneath
   six fills is a rule nobody can see. */
.aumap__coast {
  fill: none;
  stroke: var(--line);
  stroke-width: 1.25;
  stroke-linejoin: round;
}

/*
 * The climate-zone underlay. Fills arrive as attributes from
 * js/components/au-zones-data.js, because six categorical hues keyed to data
 * are a CHART PALETTE (design.md §6) and this stylesheet stays tokens-only.
 * What lives here is the only part that is a design decision rather than a data
 * one: how much of them the reader gets. A third, so the bone and forest ground
 * still reads through and the live risk markers stay the loudest mark on the
 * panel. Zone edges are a whisper, because the Bureau's boundaries are exact
 * and this rendering is not.
 */
.aumap__zone {
  fill-opacity: 0.32;
  stroke: var(--ink-1);
  stroke-width: 0.4;
  stroke-opacity: 0.16;
  stroke-linejoin: round;
}

/* The same six hues sit paler over forest night than over bone, so the dark
   theme takes a little more of them. OPACITY, never colour: a chart palette
   that changed with the theme would be a chart that changed with the theme
   (design.md §5.1). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .aumap__zone { fill-opacity: 0.4; }
}

:root[data-theme="dark"] .aumap__zone { fill-opacity: 0.4; }

/* 10px marker with a 2.75px ring in the page ground. Widened from 2px when the
   zone tints arrived: a dot has to clear a coloured ground now, not just a
   near-surface one. */
.aumap__dot {
  fill: var(--risk);
  stroke: var(--surface-0);
  stroke-width: 2.75;
}

.aumap__city {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  fill: var(--ink-0);
}

/* Colour is never the only channel (design.md §2.2, binding): the word is
   always beside the dot, in the ink-mixed form of its own risk hue. */
.aumap__risk {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: var(--track-mono);
  fill: var(--risk-ink);
}

/*
 * The mono city rows. At phone widths a 900-unit viewBox lands at about a third
 * scale, which would set the SVG labels at six pixels, so below 560px the words
 * move down here and the markers keep their title tooltips. Above that width the
 * rows are clipped rather than removed, so the words stay in the accessibility
 * tree at every size and the map is never colour-only for anyone.
 */
.aumap__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.aumap__row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.aumap__rowdot {
  display: inline-block;
  vertical-align: middle;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--risk);
  flex: none;
}

.aumap__rowcity {
  font-size: var(--text-small);
  color: var(--ink-0);
}

.aumap__rowrisk {
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--risk-ink);
}

.aumap__foot {
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid var(--line);
}

.aumap__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.aumap__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-1);
}

.aumap__chipdot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--risk);
  flex: none;
}

/* The zone row sits under the risk row, quieter and tighter: the risk words are
   the reading and the zones are the ground it is read against. Six long names
   wrap, which is correct here, so the row is allowed two lines rather than
   being abbreviated into a key the map would then need. */
.aumap__legend--zones {
  margin-block-start: var(--sp-3);
  gap: var(--sp-1) var(--sp-3);
}

/* The row's own label. Chips are 11px mono, which is under the size --ink-2 is
   cleared for (design.md §2.1), so the lead gains weight rather than losing
   contrast. */
.aumap__chip--lead { color: var(--ink-0); }

/* ---- the table twin ---- */

.aumap__details { border-block-start: 1px solid var(--line); }

.aumap__summary {
  padding-block: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-1);
  cursor: pointer;
}

.aumap__summary:hover { color: var(--ink-0); }

.aumap__summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

.aumap__details > [data-table] {
  overflow-x: auto;
  padding-block-end: var(--sp-3);
}

.aumap__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
  color: var(--ink-1);
}

.aumap__table caption {
  text-align: start;
  color: var(--ink-1);
  padding-block-end: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
}

.aumap__table th,
.aumap__table td {
  text-align: start;
  padding: var(--sp-2) var(--sp-3) var(--sp-2) 0;
  border-block-end: 1px solid var(--line);
  white-space: nowrap;
}

.aumap__table thead th {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-1);
  font-weight: 400;
}

.aumap__table tbody th { font-weight: 500; color: var(--ink-0); }

.aumap__table td[data-level] { color: var(--ink-0); }

.aumap__table td[data-level] .aumap__rowdot { margin-inline-end: var(--sp-2); }

.aumap__table .num { font-variant-numeric: tabular-nums; }

/* ---- narrow ---- */

@media (max-width: 559px) {
  .aumap__panel { padding: var(--sp-3); }

  /* The SVG labels are unreadable at this scale, so they go and the mono rows
     arrive in their place. The markers keep their <title> tooltips. */
  .aumap__labels { display: none; }

  .aumap__rows {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    display: grid;
    gap: var(--sp-2);
    margin-block-start: var(--sp-4);
    padding-block-start: var(--sp-3);
    border-block-start: 1px solid var(--line);
  }
}

/* ====================================================================== */
/*  WHY MOULD DETECT · editorial blocks                                   */
/* ====================================================================== */

/*
 * The proof band's register on the page surface rather than in a dark slab: the
 * homepage already spends the deep band on its three numbers, and a second
 * full-bleed one this far down reads as a template. Hairlines separate instead
 * (design.md §4), which is this system's primary structure device anyway.
 */
.why-stats {
  margin-block-start: var(--sp-6);
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 0;
}

.why-stat {
  padding-inline: var(--sp-5);
  border-inline-start: 1px solid var(--line);
}

.why-stat:first-child { padding-inline-start: 0; border-inline-start: 0; }

.why-stat__figure {
  font-family: var(--font-display);
  font-size: min(var(--text-stat), 3.25rem);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--track-display);
  color: var(--ink-0);
}

.why-stat__caption {
  color: var(--ink-1);
  margin-block-start: var(--sp-3);
  max-width: 22ch;
  text-transform: none;
  letter-spacing: 0.04em;
}

@media (max-width: 819px) {
  .why-stats { grid-template-columns: 1fr; }
  .why-stat { padding-inline: 0; border-inline-start: 0; }
  .why-stat + .why-stat {
    border-block-start: 1px solid var(--line);
    padding-block-start: var(--sp-4);
    margin-block-start: var(--sp-4);
  }
}

/* The About page's pull quote, on the page surface rather than inside the deep
   band, so it spends --ink-0 and --line where that one spends --band-*. */
.why-quote {
  margin: var(--sp-6) 0 0;
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid var(--line);
  display: grid;
  gap: var(--sp-3);
}

.why-quote__text {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.2rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-display);
  color: var(--ink-0);
  max-width: 20ch;
}

.why-quote__by { color: var(--ink-2); }

.why-body {
  color: var(--ink-1);
  max-width: 65ch;
  margin-block-start: var(--sp-4);
}

.why-claims {
  margin-block-start: var(--sp-6);
  max-width: 62ch;
}

.why-actions { margin-block-start: var(--sp-5); }

.why-cta__actions { margin-block-start: var(--sp-2); }

/* ====================================================================== */
/*  ---- /ai-vision/ ----                                                 */
/*                                                                        */
/*  The article's own anatomy: the prose column, the three drawn figures  */
/*  (augmentation grid, layered-data pipeline, classifier topology), the  */
/*  seven answers, and the glossary list. Everything structural above is  */
/*  reused unchanged: .section, .shell, .section-head, .eyebrow, .lede,   */
/*  .claim, .mono, .reveal, .content-head, .help-band, .cta.              */
/*                                                                        */
/*  House rule for the figures: NOT ONE literal paint value. Every fill   */
/*  and stroke below resolves a token or a color-mix of tokens, so both   */
/*  themes and the daypart drift come free, and the drawings can never    */
/*  drift away from the palette. Text inside a figure wears ink tokens    */
/*  only, never the accent (dataviz: the accent is a mark, not a voice).  */
/*  Geometry is in the SVG's own viewBox units, which are unitless and    */
/*  scale with the box, so every font-size below is a viewBox unit and    */
/*  renders at unit * container / viewBox-width device pixels.            */
/*                                                                        */
/*  FIT, NEVER CROP (client direction 2026-08-17). The two wide figures   */
/*  each ship a second, compact portrait drawing. A media query at        */
/*  1100px swaps them; below it the reader gets a drawing sized for the   */
/*  screen they are holding. There is no scroll container left in this    */
/*  file for a figure, and the page cannot scroll sideways at any width.  */
/* ====================================================================== */

/* ---- shared article anatomy ---- */

/* A figure section's head carries three things before the drawing (design.md
   §6 panel anatomy): the mono eyebrow, the benefit h2, the how-to-read line.
   It runs wider than .section-head's 34rem because the how-line is a full
   sentence of instruction, not a standfirst. */
.ai-panel__head { max-width: 46rem; }

.ai-how {
  color: var(--ink-1);
  max-width: 65ch;
}

.ai-prose {
  margin-block-start: var(--sp-5);
  display: grid;
  gap: var(--sp-4);
  max-width: 65ch;
  color: var(--ink-1);
}

/* The reader's eye should land on the drawing, not on a frame around it:
   figures sit on the page ground, separated by space and their caption. */
.ai-figure {
  margin: var(--sp-5) 0 0;
  display: grid;
  gap: var(--sp-3);
}

.ai-figure__cap {
  color: var(--ink-1);
  font-size: var(--text-small);
  max-width: 72ch;
}

/* The gesture-level claim under the pipeline, and the architecture line under
   the topology: both are instrument voice, so both are mono. */
.ai-figure__note {
  color: var(--ink-2);
  max-width: 72ch;
}

.ai-figure__arch {
  color: var(--ink-1);
  background-color: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  padding: var(--sp-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  text-transform: none;
}

/* The two renderings of each wide figure. Width alone chooses between them,
   so the swap needs no listener and no measurement (design.md §9), and the
   hidden one is display:none, which takes it out of the accessibility tree as
   well so its description is announced exactly once.

   The swap sits at 1100px, not at the layout's own 860px break, because the
   wide drawings need close to the full page measure to stay readable: at 860px
   they have 774px and their labels fall to about 10px, at 1024px they have
   922px and reach only about 12px. Both are worse than the compact drawings
   manage on a phone, so the compact drawings keep the whole tablet range.

   Each compact drawing is drawn for a phone, so past its cap it stops growing
   rather than becoming a poster: 32rem holds the topology's answer labels at
   15px and 26rem holds the pipeline's box titles at 15px, both close to what
   the wide drawings give at full measure. */
/* width: 100% is load-bearing, not decoration. .ai-figure is a grid, and an
   auto inline margin on a grid item makes it size to its content instead of
   stretching, which for an SVG with no width attribute means the replaced
   element default of 300px. The explicit width keeps the cap a cap. */
.net-fit,
.pipe-fit {
  display: none;
  width: 100%;
  margin-inline: auto;
}

.net-fit { max-width: 32rem; }

.pipe-fit { max-width: 26rem; }

@media (max-width: 1099px) {
  .net-desktop,
  .pipe-desktop { display: none; }

  .net-fit,
  .pipe-fit { display: block; }
}

.ai-svg { display: block; width: 100%; height: auto; }

/* ---- figure 1 · augmentation grid ---- */

/* 3 across at desktop (the brief's 2 rows of 3), 2 at tablet, 1 at phone. */
.aug__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}

.aug__tile { display: grid; gap: var(--sp-2); }

.aug__frame {
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
  background-color: var(--surface-1);
}

.aug__label { color: var(--ink-2); }

.aug__svg { display: block; width: 100%; height: auto; }

.aug__svg .a-bg { fill: var(--surface-2); }
.aug__svg .a-seam { fill: none; stroke: var(--line); stroke-width: 2.5; }
.aug__svg .a-tick { fill: none; stroke: var(--ink-2); stroke-width: 2.5; }
.aug__svg .a-colony { fill: color-mix(in srgb, var(--accent) 55%, var(--ink-0)); }
.aug__svg .a-spore { fill: color-mix(in srgb, var(--accent) 45%, var(--ink-1)); }

/* Contrast and hue are the two transforms an SVG transform cannot express, so
   they are expressed as token re-mixes: still no literal colour anywhere. */
.aug--contrast .a-bg { fill: var(--surface-0); }
.aug--contrast .a-colony { fill: color-mix(in srgb, var(--ink-0) 78%, var(--accent)); }
.aug--contrast .a-spore { fill: var(--ink-0); }

.aug--hue .a-bg { fill: color-mix(in srgb, var(--surface-2) 82%, var(--accent)); }
.aug--hue .a-colony { fill: color-mix(in srgb, var(--accent) 42%, var(--ink-1)); }
.aug--hue .a-spore { fill: color-mix(in srgb, var(--ink-1) 70%, var(--accent)); }

@media (max-width: 900px) {
  .aug__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 559px) {
  .aug__grid { grid-template-columns: 1fr; gap: var(--sp-3); }
}

/* ---- figure 2 · the layered-data pipeline ---- */

.pipe__svg .n-src {
  fill: var(--surface-1);
  stroke: var(--line);
  stroke-width: 1.5;
}

/* The lab box is drawn dashed like its path: it is the yardstick, and it is
   the one source that never teaches. */
.pipe__svg .n-lab {
  fill: var(--surface-1);
  stroke: var(--ink-2);
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
}

.pipe__svg .n-step {
  fill: var(--surface-2);
  stroke: var(--line);
  stroke-width: 1.5;
}

.pipe__svg .n-out {
  fill: color-mix(in srgb, var(--accent) 10%, var(--surface-1));
  stroke: color-mix(in srgb, var(--accent) 45%, transparent);
  stroke-width: 1.5;
}

.pipe__svg .k-flow { fill: none; stroke: var(--accent); stroke-width: 1.75; }
.pipe__svg .k-head { fill: var(--accent); }
.pipe__svg .k-test {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
}
.pipe__svg .k-testhead { fill: var(--ink-2); }

.pipe__svg .t-box {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  fill: var(--ink-0);
}

.pipe__svg .t-sub {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  fill: var(--ink-2);
}

/* The portrait rendering of the same pipeline. Its viewBox is 460 units wide,
   so at the 350px measure a 390px phone gives the figure, a 16.5-unit title
   lands at 12.6px and a 16-unit sub-line at 12.2px. Strokes are thickened in
   the same proportion so no hairline is lost on the way down. */
.pipe__svg--fit .n-src,
.pipe__svg--fit .n-lab,
.pipe__svg--fit .n-step,
.pipe__svg--fit .n-out { stroke-width: 2; }

.pipe__svg--fit .n-lab { stroke-dasharray: 7 6; }

.pipe__svg--fit .k-flow { stroke-width: 2.4; }

.pipe__svg--fit .k-test { stroke-width: 2; stroke-dasharray: 7 6; }

.pipe__svg--fit .t-box { font-size: 16.5px; }

.pipe__svg--fit .t-sub { font-size: 16px; }

/* ---- figure 3 · the classifier topology ---- */

/* The mesh is context, not content: hairlines at --line, one weight, no
   per-class colour anywhere. Identity is carried by the direct labels. */
.net__svg .k-edge { fill: none; stroke: var(--line); stroke-width: 1; }

/* The single lit path: one decision travelling input to answer. */
.net__svg .k-lit { fill: none; stroke: var(--accent); stroke-width: 2.25; }

.net__svg .n-node {
  fill: var(--surface-1);
  stroke: var(--ink-2);
  stroke-width: 1.5;
}

.net__svg .n-lit {
  fill: color-mix(in srgb, var(--accent) 22%, var(--surface-1));
  stroke: var(--accent);
  stroke-width: 2.25;
}

.net__svg .n-ellipsis { fill: var(--ink-2); }

.net__svg .t-out {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.08em;
  fill: var(--ink-0);
}

/* The lit row is emphasised by weight, never by colour: label text wears ink
   tokens only, and the accent stays a mark. */
.net__svg .t-out--lit { font-weight: 500; }

.net__svg .t-head,
.net__svg .t-foot {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.08em;
  fill: var(--ink-2);
}

/* The compact rendering's own paint. Its viewBox is 580 units wide, so at the
   350px measure a 390px phone gives the figure, a 17-unit answer label lands
   at 10.3px, a 16-unit head or foot label at 9.7px, and a 2.2-unit mesh line
   at 1.3px. Every one of those numbers is why these overrides exist. */
.net__svg--fit .k-edge { stroke-width: 2.2; }
.net__svg--fit .k-lit { stroke-width: 3.2; }
.net__svg--fit .n-node { stroke-width: 2; }
.net__svg--fit .n-lit { stroke-width: 3; }

.net__svg--fit .t-out { font-size: 17px; letter-spacing: 0.06em; }

.net__svg--fit .t-head,
.net__svg--fit .t-foot { font-size: 16px; }

/* ---- the seven answers ---- */

.ai-answers {
  margin-block-start: var(--sp-6);
  max-width: 62ch;
}

.ai-answers__title {
  font-size: min(var(--text-h3), 1.35rem);
  margin-block-end: var(--sp-4);
}

/* ---- the honest close ---- */

.ai-close {
  margin-block-start: var(--sp-5);
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--line);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-display);
  color: var(--ink-0);
  max-width: 26ch;
}

/* ---- glossary ---- */

/* Term and definition in two columns on one hairline grid: a definition list
   read as a field notebook, which is the register the whole page is in. */
.glossary {
  margin-block-start: var(--sp-5);
  display: grid;
  grid-template-columns: minmax(11rem, 16rem) minmax(0, 1fr);
  column-gap: var(--sp-5);
}

.glossary__term,
.glossary__def {
  border-block-start: 1px solid var(--line);
  padding-block: var(--sp-3);
}

.glossary__term {
  color: var(--ink-0);
  text-transform: none;
  letter-spacing: 0.04em;
}

.glossary__def {
  color: var(--ink-1);
  max-width: 62ch;
  margin: 0;
}

@media (max-width: 700px) {
  .glossary { grid-template-columns: 1fr; column-gap: 0; }
  .glossary__def { border-block-start: 0; padding-block-start: 0; }
  .glossary__term { padding-block-end: var(--sp-1); }
}

/* The closing band's action row, matching the other content pages. */
.ai-cta__actions { margin-block-start: var(--sp-2); }

/* ====================================================================== */
/*  ---- /pricing/ ----                                                   */
/*                                                                        */
/*  The matrix, the value-lock chips, and the pricing FAQ's provenance    */
/*  line. Everything structural above is reused unchanged: .section,      */
/*  .shell, .section-head, .eyebrow, .lede, .mono, .reveal, .content-head,*/
/*  .help-band (the value-lock strip's shell), .disclosures (the FAQ),    */
/*  .cta (the closing band).                                              */
/* ====================================================================== */

/*
 * The matrix scrolls inside its own container; the page never does
 * (design.md §10, the ship gate). A hairline frame makes the scroll region
 * legible as one object rather than a table floating loose on the page.
 */
.pricing__scroll {
  margin-block-start: var(--sp-5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}

.pricing__table {
  width: 100%;
  min-width: 52rem;
  border-collapse: collapse;
  font-size: var(--text-small);
}

/* The spanning group row: "For your home" over Free + Essential, "For
   specialists" over the three paid-up tiers, so the split DIRECTION.md asks
   for reads before a single feature row does. */
.pricing__grouprow th {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-1);
  background-color: var(--surface-1);
  padding: var(--sp-2) var(--sp-3);
  text-align: center;
  border-block-end: 1px solid var(--line);
}

.pricing__grouprow th:first-child { background-color: transparent; border-block-end: 0; }

.pricing__rowhead-corner {
  vertical-align: bottom;
  padding: var(--sp-3);
  text-align: start;
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
}

/* Every column carries its "who is this for" line at the top, per
   DIRECTION.md's free-vs-paid dynamic. */
.pricing__tierhead {
  vertical-align: top;
  padding: var(--sp-4) var(--sp-3);
  text-align: start;
  border-inline-start: 1px solid var(--line);
  min-width: 8.75rem;
  /* A definite height is what lets the inner column's `height: 100%`
     resolve against the ROW height, which every cell in the row shares.
     The cell still grows to fit its content: this is a floor, not the
     size. Without it the flex column collapses and the slack has nowhere
     to go (design.md §6.1). */
  height: 1px;
}

/* The head's contents, as one full-height column. `height: 100%` inside a
   table cell resolves against the row height, which every cell in the row
   shares, so `margin-block-start: auto` on the CTA bottom-aligns all five
   buttons regardless of how the copy above them wraps (design.md §6.1). */
.pricing__tierhead-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* A slot a tier does not fill: same text, same box, no ink. Holds the
   horizontal bands in step across columns without a magic min-height. */
.pricing__ghost { visibility: hidden; }

/* The one elastic slot. It absorbs whatever slack the tallest column
   creates, so every slot BELOW it (the button, then the price box) sits the
   same distance from the foot of every column. This is what actually holds
   the five buttons on one line. A reserved line count cannot: copy that
   wraps to four or five lines in a narrower column simply overruns it,
   which is exactly what happened at 1100px (client, 2026-08-21). */
.pricing__tierhead-inner .pricing__tierfit { flex: 1 1 auto; }

.pricing__tiername {
  display: block;
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: var(--ink-0);
}

/* Hairline rules bracket the price the way an instrument brackets a
   readout: the rule is the register, not decoration. They also draw the eye
   across the five columns, which is what makes the alignment legible. The
   box holds the eyebrow, the numeral and the saving note, so all three sit
   inside one frame (client direction 2026-08-21, reference table). */
.pricing__pricebox {
  display: block;
  margin-block-start: var(--sp-3);
  padding-block: var(--sp-2);
  border-block: 1px solid var(--line);
}

/* Everything BELOW the button must be equal height across columns, or the
   elastic slot above it hands each column a different amount of slack and
   the buttons drift apart again. "No card required" wraps to two lines in a
   narrow column while the ghost "From" is one, so the slot reserves two
   either way. The long prose gets the elastic slot; these short controlled
   labels get reservations (design.md §6.1). */
.pricing__price-eyebrow {
  display: block;
  font-size: 0.625rem;
  line-height: 1.4;
  min-height: calc(0.625rem * 1.4 * 2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-block-end: 0.15rem;
}

.pricing__tierprice {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--accent-deep);
}

.pricing__tierperiod {
  margin-inline-start: 0.2em;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-2);
}

/* Three reserved lines. The flex column plus `margin-block-start: auto` on
   the CTA is not enough on its own, because a percentage height inside a
   table cell does not resolve against the row height in practice, so this
   is the slot that actually holds the five buttons on one line. Longest
   copy today is three lines at the narrowest desktop column. */
.pricing__tierfit {
  display: block;
  line-height: 1.5;
  /* A visual floor only, so a one-line tier does not look cramped next to
     a four-line neighbour. Alignment comes from `flex: 1 1 auto`, not from
     this number. */
  min-height: calc(0.75rem * 1.5 * 2);
  margin-block: var(--sp-2) var(--sp-3);
  color: var(--ink-1);
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.75rem;
}

/* The label column is capped and wraps. It used to be `nowrap`, which let
   "Weather & environmental mould-risk data" set the column width and pushed
   the fifth tier out of the shell at 1440px (client direction 2026-08-21:
   the matrix must fit a desktop viewport, the scroller is for small
   screens). */
.pricing__table th[scope="row"] {
  width: 13rem;
  padding: var(--sp-3);
  border-block-end: 1px solid var(--line);
  text-align: start;
  color: var(--ink-0);
  font-weight: 500;
}

.pricing__table td {
  padding: var(--sp-3);
  border-block-end: 1px solid var(--line);
  border-inline-start: 1px solid var(--line);
  text-align: center;
  color: var(--ink-1);
}

/* Never colour alone (design.md §2.2): the glyph carries the mark, and every
   cell keeps a visually-hidden word alongside it for anyone who cannot see
   the glyph at all. */
/* Reading a twelve-row matrix means tracking one row across five columns.
   The hover rule is the instrument's cursor: it lifts the whole row, so the
   eye does not slip a line between "Team accounts" and "API access". Pointer
   devices only, and it never carries meaning on its own. */
@media (hover: hover) {
  .pricing__table tbody tr:not(.pricing__catrow):hover > * {
    background-color: color-mix(in srgb, var(--accent) 9%, transparent);
  }
}

.pricing__check { color: var(--accent); font-weight: 700; }
.pricing__dash { color: var(--ink-2); }

/* ---- value-lock strip ---- */

/* Reuses .help-band's surface-1 shell (app.css), so the sitewide wave pair
   has a band to cap the same way every other content page's standing band
   does (design.md §4.1). */
.pricing__locks {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.pricing__lock {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background-color: var(--surface-0);
}

.pricing__lock-label { color: var(--ink-0); }
.pricing__lock-tier { color: var(--ink-2); }

/* ---- FAQ provenance ---- */

.pricing__provenance {
  margin-block-start: var(--sp-4);
  color: var(--ink-2);
}

.pricing-cta__actions { margin-block-start: var(--sp-2); }

@media (max-width: 559px) {
  .pricing__lock { flex: 1 1 100%; }
}

/* ====================================================================== */
/*  PRICING · PRODUCTION LIFT (client direction 2026-08-19)               */
/*  Gradients here are a client-directed exception to design.md §2.3,     */
/*  kept to surface-to-surface and canopy-to-moss ramps only. Icons are   */
/*  Material Symbols, subset-loaded by pricing/index.html alone.          */
/* ====================================================================== */

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 1.25em;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  vertical-align: middle;
  font-variation-settings: "FILL" 0;
}

/* ---- tagline + billing toggle ---- */

.pricing__tagline {
  margin-block-start: var(--sp-3);
  color: var(--ink-2);
  font-size: 0.6875rem;
  letter-spacing: var(--track-mono);
}

.pricing__billing {
  margin-block-start: var(--sp-4);
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  overflow: hidden;
  background-color: var(--surface-1);
}

.pricing__bill-btn {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--sp-2) var(--sp-4);
  border: 0;
  background: transparent;
  color: var(--ink-1);
  cursor: pointer;
}

.pricing__bill-btn.is-active {
  background-color: var(--accent);
  color: var(--accent-ink);
}

/* Monthly/yearly views: the toggle flips one class on the section and the
   price spans swap. Default is monthly (client direction 2026-08-19). */
.pricing__price-y { display: none; }
.pricing--yearly .pricing__price-m { display: none; }
.pricing--yearly .pricing__price-y { display: inline; }
.pricing--yearly .pricing__save.pricing__price-y { display: inline-block; }

.pricing__save {
  /* A tinted chip, so it must hug its text rather than stretch to the
     column width once the head became a flex column. */
  align-self: flex-start;
  /* Two short, controlled strings ("2 months free", "Monthly only"), so a
     single line is safe and keeps the chip a chip rather than a tall pill. */
  white-space: nowrap;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-deep);
  background-color: color-mix(in srgb, var(--accent) 14%, var(--surface-0));
  border-radius: var(--r-1);
  padding: 0.15rem 0.5rem;
  margin-block-start: var(--sp-1);
}

/* ---- tier heads ---- */

.pricing__tierhead {
  background: linear-gradient(180deg, var(--surface-1), var(--surface-0));
}

.pricing__tiericon {
  display: block;
  font-size: 1.4rem;
  color: var(--accent-deep);
  margin-block-end: var(--sp-1);
}

.pricing__tierflag {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background-color: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--r-1);
  padding: 0.2rem 0.5rem;
  margin-block-end: var(--sp-2);
}

/* Full-width button per column: the shared left and right edges are what
   read as alignment, not the text inside them. Every slot above it is a
   fixed height, so the five buttons start level (design.md §6.1). */
.pricing__tiercta {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 0.75rem;
  padding: 0.55rem 0.5rem;
  white-space: nowrap;
}

/* The highlighted column: canopy-to-moss header ramp, bone type, accent
   column tint below. Dark theme swaps to the band-deep convention. */
.pricing__tierhead--hot {
  background: linear-gradient(
    180deg,
    var(--accent-deep),
    color-mix(in srgb, var(--accent-deep) 70%, var(--accent))
  );
  border-inline: 1px solid var(--accent-deep);
}

.pricing__tierhead--hot .pricing__tiername,
.pricing__tierhead--hot .pricing__tierprice { color: var(--surface-0); }

/* On the painted column the hairlines cannot use --line (it disappears into
   the accent ground) and the numeral cannot use --accent-deep (accent on
   accent). Both switch to the column's own ink at low alpha, the band-local
   convention from design.md §2.3. */
.pricing__tierhead--hot .pricing__pricebox {
  border-block-color: color-mix(in srgb, var(--surface-0) 38%, transparent);
}

.pricing__tierhead--hot .pricing__price-eyebrow { color: var(--surface-0); }

.pricing__tierhead--hot .pricing__tiericon { color: var(--surface-0); }

.pricing__tierhead--hot .pricing__tierperiod,
.pricing__tierhead--hot .pricing__tierfit {
  color: color-mix(in srgb, var(--surface-0) 76%, transparent);
}

:root[data-theme="dark"] .pricing__tierhead--hot {
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border-inline: 1px solid var(--accent);
}

:root[data-theme="dark"] .pricing__tierhead--hot .pricing__tiername,
:root[data-theme="dark"] .pricing__tierhead--hot .pricing__tierprice,
:root[data-theme="dark"] .pricing__tierhead--hot .pricing__tiericon { color: var(--ink-0); }

:root[data-theme="dark"] .pricing__tierhead--hot .pricing__pricebox {
  border-block-color: color-mix(in srgb, var(--ink-0) 30%, transparent);
}

:root[data-theme="dark"] .pricing__tierhead--hot .pricing__price-eyebrow { color: var(--ink-1); }

:root[data-theme="dark"] .pricing__tierhead--hot .pricing__tierperiod,
:root[data-theme="dark"] .pricing__tierhead--hot .pricing__tierfit { color: var(--ink-1); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pricing__tierhead--hot {
    background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
    border-inline: 1px solid var(--accent);
  }

  :root:not([data-theme="light"]) .pricing__tierhead--hot .pricing__tiername,
  :root:not([data-theme="light"]) .pricing__tierhead--hot .pricing__tierprice,
  :root:not([data-theme="light"]) .pricing__tierhead--hot .pricing__tiericon { color: var(--ink-0); }

  :root:not([data-theme="light"]) .pricing__tierhead--hot .pricing__pricebox {
    border-block-color: color-mix(in srgb, var(--ink-0) 30%, transparent);
  }

  :root:not([data-theme="light"]) .pricing__tierhead--hot .pricing__price-eyebrow { color: var(--ink-1); }

  :root:not([data-theme="light"]) .pricing__tierhead--hot .pricing__tierperiod,
  :root:not([data-theme="light"]) .pricing__tierhead--hot .pricing__tierfit { color: var(--ink-1); }
}

/* ---- body: zebra, hot column, category rows, sticky row heads ---- */

.pricing__table tbody tr:not(.pricing__catrow):nth-child(even) td {
  background-color: color-mix(in srgb, var(--surface-1) 55%, var(--surface-0));
}

.pricing__table td.pricing__cell--hot {
  background-color: color-mix(in srgb, var(--accent) 7%, var(--surface-0));
  border-inline: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

.pricing__table tbody tr:not(.pricing__catrow):nth-child(even) td.pricing__cell--hot {
  background-color: color-mix(in srgb, var(--accent) 12%, var(--surface-1));
}

/* The specialists group head. In LIGHT theme --accent-deep is a dark green
   on a pale tint and reads cleanly. In DARK theme both sides of that pair
   collapse to dark green (--surface-1 #16211a, --accent-deep #2e5b3d) and
   the label all but disappears, so the ink flips to bone. Reported by the
   client 2026-08-21. Same three-state pattern as the highlighted column. */
.pricing__grouprow th.pricing__grouphead--specialist {
  background-color: color-mix(in srgb, var(--accent) 12%, var(--surface-1));
  color: var(--accent-deep);
}

:root[data-theme="dark"] .pricing__grouprow th.pricing__grouphead--specialist {
  color: var(--ink-0);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pricing__grouprow th.pricing__grouphead--specialist {
    color: var(--ink-0);
  }
}

.pricing__catrow th {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-1);
  background-color: var(--surface-1);
  text-align: start;
  padding: var(--sp-2) var(--sp-3);
  border-block: 1px solid var(--line);
}

.pricing__catrow th .material-symbols-outlined {
  font-size: 1rem;
  color: var(--accent-deep);
  margin-inline-end: 0.4rem;
}

/* First column stays put while the table scrolls sideways (fixed-column
   responsive pattern; the row label is the anchor of every comparison). */
.pricing__table th[scope="row"],
.pricing__rowhead-corner,
.pricing__catrow th {
  position: sticky;
  inset-inline-start: 0;
  z-index: 2;
}

.pricing__table th[scope="row"] { background-color: var(--surface-0); }

.pricing__table tbody tr:not(.pricing__catrow):nth-child(even) th[scope="row"] {
  background-color: color-mix(in srgb, var(--surface-1) 55%, var(--surface-0));
}

/* ---- the check chip ---- */

.pricing__check {
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--accent) 16%, var(--surface-0));
  color: var(--accent);
  font-weight: 700;
  font-size: 0.8rem;
}

/* ---- SME accelerator band ---- */

.pricing__accel {
  margin-block-start: var(--sp-6);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
}

/* Gradient-grounded panels cannot take the .bio-bg utility: their own
   `background:` shorthand, loaded after app.css, would swallow the
   utility's background-image. The texture is layered inside the shorthand
   instead, first layer over the gradient, with per-child crops standing in
   for the numbered classes (design.md §4.2). */
.pricing__accel-item {
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background:
    url("/assets/bio-bg.png") 13% 71% / 560px repeat,
    linear-gradient(180deg, var(--surface-1), var(--surface-0));
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-2);
  align-content: start;
}

.pricing__accel-item:nth-child(2) {
  background:
    url("/assets/bio-bg.png") 47% 9% / 620px repeat,
    linear-gradient(180deg, var(--surface-1), var(--surface-0));
}

.pricing__accel-item:nth-child(3) {
  background:
    url("/assets/bio-bg.png") 82% 44% / 540px repeat,
    linear-gradient(180deg, var(--surface-1), var(--surface-0));
}

.pricing__accel-icon {
  font-size: 1.6rem;
  color: var(--accent-deep);
}

@media (max-width: 1000px) {
  .pricing__accel { grid-template-columns: repeat(2, 1fr); }
}

/* ---- mobile: rows-to-cards (the matrix yields to stacked tier cards) ---- */

.pricing__cards { display: none; }

/* Same gradient-panel layering as .pricing__accel-item above; crops cycle
   by three so no two stacked cards share one (design.md §4.2). */
.pricing__card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background:
    url("/assets/bio-bg.png") 25% 33% / 660px repeat,
    linear-gradient(180deg, var(--surface-1), var(--surface-0));
  padding: var(--sp-4);
}

.pricing__card:nth-child(3n + 2) {
  background:
    url("/assets/bio-bg.png") 66% 88% / 580px repeat,
    linear-gradient(180deg, var(--surface-1), var(--surface-0));
}

.pricing__card:nth-child(3n) {
  background:
    url("/assets/bio-bg.png") 5% 18% / 640px repeat,
    linear-gradient(180deg, var(--surface-1), var(--surface-0));
}

.pricing__card--hot { border-color: var(--accent); }

.pricing__card .pricing__tiername { font-size: 1.35rem; }

/* "Everything in Business, plus:" — the ladder lead-in that replaced the
   per-card category blocks (client direction 2026-08-21). A sentence, not a
   label, so it stays in the body face rather than the mono register. */
.pricing__card-lead {
  margin-block: var(--sp-4) 0;
  font-weight: 600;
  color: var(--ink-0);
}

.pricing__card-rows {
  list-style: none;
  margin: var(--sp-2) 0 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.pricing__card-rows li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  font-size: var(--text-small);
  color: var(--ink-1);
}

.pricing__card-val { color: var(--ink-0); text-align: end; }

@media (max-width: 759px) {
  .pricing__scroll { display: none; }

  .pricing__cards {
    display: grid;
    gap: var(--sp-4);
    margin-block-start: var(--sp-5);
  }

  .pricing__accel { grid-template-columns: 1fr; }
}

/* ====================================================================== */
/*  ---- /for-specialists/ ----                                          */
/*                                                                        */
/*  The workflow steps, the claim lists, the Decision Support callout,    */
/*  and the tier ladder mini-cards. Everything structural above is reused */
/*  unchanged: .section, .shell, .section-head, .eyebrow, .lede, .mono,   */
/*  .claim, .reveal, .content-head, .help-band (the OH & labs band), .cta */
/*  (the closing band).                                                   */
/* ====================================================================== */

/* The process motif (design.md §1: mono, letterspaced, interpunct-separated,
   never headline voice), reused here per the brief's explicit workflow
   section rather than confined to the homepage's How It Works band. */
.specialists-process {
  margin-block-start: var(--sp-2);
  color: var(--ink-2);
}

.workflow {
  list-style: none;
  margin: var(--sp-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
}

.workflow__step {
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--line);
  display: grid;
  gap: var(--sp-2);
  align-content: start;
}

.workflow__label { color: var(--ink-2); }

.workflow__title {
  font-size: min(var(--text-h3), 1.2rem);
  margin: 0;
}

.workflow__body { color: var(--ink-1); max-width: 32ch; }

@media (max-width: 900px) {
  .workflow { grid-template-columns: 1fr; gap: var(--sp-5); }
}

/* ---- defensibility claims ---- */

.specialists-claims {
  margin-block-start: var(--sp-5);
  max-width: 62rem;
}

.specialists-claims .claim { max-width: 62ch; }

/* Two columns at desktop once the band has the width to spare, so the OH &
   labs band's three claims do not stack into one very tall hairline column
   inside a full-bleed band. */
.specialists-claims--band {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--sp-6);
}

.specialists-claims--band .claim:nth-child(2) { border-block-start: 0; padding-block-start: 0; }

@media (max-width: 700px) {
  .specialists-claims--band { grid-template-columns: 1fr; }
  .specialists-claims--band .claim:nth-child(2) {
    border-block-start: 1px solid var(--line);
    padding-block-start: var(--sp-4);
  }
}

.specialists-reg {
  margin-block-start: var(--sp-5);
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--line);
  color: var(--ink-1);
  max-width: 65ch;
}

/* ---- data & analysis ---- */

.specialists-body {
  margin-block-start: var(--sp-4);
  color: var(--ink-1);
  max-width: 65ch;
}

/* The "Decision Support only" liability framing (deck-extraction.md
 * "AUDIENCE LANGUAGE"), styled like /privacy/'s health-disclaimer callout: an
 * accent-edged card because a reader must not skim past it, calmer than an
 * alarm panel because the job is candour, not alarm (design.md §1). A
 * separate class from .policy--callout on purpose, since that one is scoped
 * to /privacy/'s document column.
 */
.specialists-note {
  margin-block-start: var(--sp-5);
  max-width: 52rem;
  padding: var(--sp-5);
  border-radius: var(--r-2);
  border-inline-start: 3px solid var(--accent);
  background-color: color-mix(in srgb, var(--accent) 6%, var(--surface-1));
}

.specialists-note p { margin: 0; color: var(--ink-0); max-width: 62ch; }
.specialists-note p + p { margin-block-start: var(--sp-2); color: var(--ink-1); }

/* ---- OH & labs band ---- */

/* Reuses .help-band's surface-1 shell (app.css) for the same reason the
   pricing page's value-lock strip does: the sitewide wave pair needs a
   surface-1 band to cap (design.md §4.1). */
#oh-and-labs h2 { margin-block-start: var(--sp-2); max-width: 30ch; }

/* ---- tier ladder ---- */

.tier-ladder {
  list-style: none;
  margin: var(--sp-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: stretch;
}

.tier-card {
  background-color: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-2);
  align-content: start;
  transition: border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.tier-card:hover { border-color: var(--accent); transform: translateY(-2px); }

.tier-card__name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: var(--ink-0);
}

.tier-card__price {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--ink-0);
}

.tier-card__period {
  margin-inline-start: 0.2em;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-2);
}

.tier-card__fit { color: var(--ink-1); margin: 0; }

.tier-ladder__more {
  margin-block-start: var(--sp-4);
  font-size: var(--text-small);
}

@media (max-width: 900px) {
  .tier-ladder { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .tier-card { transition: border-color var(--dur-fast) linear; }
  .tier-card:hover { transform: none; }
}

.specialists-cta__actions { margin-block-start: var(--sp-2); }

/* ====================================================================== */
/*  ---- /investors/ ----                                                */
/*                                                                        */
/*  The proof-band register at full strength (design.md §1.1): the deep   */
/*  market band with Libre Baskerville numerals and mono source captions, */
/*  the moat and model claim lists, and the regulatory note. Everything   */
/*  structural is reused unchanged: .section, .shell, .section-head,      */
/*  .eyebrow, .claim, .reveal, .content-head, .band-deep, .cta.           */
/* ====================================================================== */

/* .band-deep hands down --band-ink / --band-ink-soft / --band-line for both
   themes; every ink below spends one of those rather than a token directly,
   which is what keeps the band correct when it inverts in dark (the same
   rule about.css states for the mission band). */
.investors-market .eyebrow { color: var(--band-ink-soft); }

.investors-market__head { max-width: 46rem; }

.investors-market__head h2 {
  font-size: var(--text-h3);
  max-width: 34ch;
  color: var(--band-ink);
  margin-block-end: var(--sp-3);
}

/* Benefit before data (design.md §1): the heading states what the numbers
   buy the reader, this line states how to read them, and only then does the
   figure row arrive. */
.investors-market__read {
  color: var(--band-ink-soft);
  max-width: 56ch;
}

/* Four columns rather than the homepage proof band's three, so the figures
   step down a size: --text-stat is written for a 3-up row and would collide
   at four. */
.market-stats {
  margin-block-start: var(--sp-6);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.market-stat {
  padding-inline: var(--sp-4);
  border-inline-start: 1px solid var(--band-line);
}

.market-stat:first-child { padding-inline-start: 0; border-inline-start: 0; }

.market-stat__figure {
  font-family: var(--font-display);
  font-size: min(var(--text-stat), 3rem);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--track-display);
  color: var(--band-ink);
}

.market-stat__caption {
  color: var(--band-ink-soft);
  margin-block-start: var(--sp-3);
  max-width: 24ch;
}

/* The source is the caption's second line, in the instrument voice: an
   investor reads the provenance before the figure. */
.market-stat__source {
  color: var(--band-ink-soft);
  margin-block-start: var(--sp-2);
}

.market-stats__foot {
  color: var(--band-ink-soft);
  margin-block-start: var(--sp-5);
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid var(--band-line);
}

@media (max-width: 1000px) {
  .market-stats { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-5); }
  .market-stat:nth-child(3) { padding-inline-start: 0; border-inline-start: 0; }
}

@media (max-width: 640px) {
  .market-stats { grid-template-columns: 1fr; row-gap: 0; }
  .market-stat { padding-inline: 0; border-inline-start: 0; }
  .market-stat + .market-stat {
    border-block-start: 1px solid var(--band-line);
    padding-block-start: var(--sp-4);
    margin-block-start: var(--sp-4);
  }
}

/* ---- the moat, the model, the team pointer ---- */

.investors-body {
  color: var(--ink-1);
  max-width: 65ch;
  margin-block-start: var(--sp-4);
}

.investors-claims {
  margin-block-start: var(--sp-5);
  display: grid;
}

.investors-claims .claim { max-width: 62ch; }

.investors-more {
  margin-block-start: var(--sp-4);
  font-size: var(--text-small);
}

/* The regulatory tailwind, boxed the way /for-specialists/ boxes its
   Decision Support framing: an aside to the argument, not a step in it. */
.investors-note {
  margin-block-start: var(--sp-5);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background-color: var(--surface-1);
}

.investors-note p { margin: 0; color: var(--ink-0); max-width: 62ch; }
.investors-note p + p { margin-block-start: var(--sp-2); color: var(--ink-1); }

.investors-note__source { color: var(--ink-2); max-width: 62ch; }

/* ---- the closing band ---- */

.investors-cta__actions { margin-block-start: var(--sp-2); }

.investors-cta__note {
  color: var(--ink-2);
  margin-block-start: var(--sp-4);
  max-width: 46ch;
  margin-inline: auto;
}