/* ============================================================
   Components — shared external components and their variants.
   Every variant is a documented modifier class. No component is
   duplicated per page, no CTA is hidden with page-specific CSS,
   and nothing is targeted by page slug or positional selector.
   ============================================================ */

/* Pre-copy safety. Structural prompts and unapproved draft strings stay in
   source for the slot-by-slot copy pass but must never appear to visitors.
   Change a slot to an approved status when its final copy is supplied. */
[data-copy-status="required"]:not([data-copy-filled="true"]),
[data-copy-status="needs-decision"],
[data-copy-status="draft"],
[data-copy-status="temporary"] { display: none !important; }

/* ------------------------------------------------------------
   HEADER  ·  base + .site-header--no-cta
   ------------------------------------------------------------ */
.site-header { width: 100%; background: var(--soft-black); color: var(--text-on-black); }
.site-header__inner {
  width: min(100%, var(--container-max));
  margin-inline: auto;
  padding-inline: var(--gutter);
  min-height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
/* The wordmark link contains an image, not text: no underline to draw. */
.site-header__inner > a { text-decoration: none; }
.site-header__wordmark { height: 52px; width: auto; }

.nav-primary {
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  flex-wrap: nowrap;          /* the desktop nav never becomes two lines */
}
/* DEV-17 · approved correction. Every desktop nav link is a 44px
   interactive target, achieved on the interactive element itself through
   vertical padding — not by enlarging type, not by a wrapper, and not by an
   invisible overlay. Type size, labels, horizontal gaps and the 840px
   drawer threshold are untouched, and because only padding-block changes,
   the corrected 841-1023px navigation fit is unaffected. */
.nav-primary__link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 11px;      /* 22px line box + 22px = 44px */
  font-weight: var(--weight-label);
  font-size: var(--body-sm);
  color: var(--text-on-black);
  white-space: nowrap;
}
/* B-32. The label stays a compliant light token; orange carries the state
   as an underline, alongside weight and aria-current — so no state is
   communicated by colour alone. */
.nav-primary__link:hover {
  color: var(--paper);
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
.nav-primary__link[aria-current="page"] {
  color: var(--text-on-black);
  font-weight: var(--weight-eyebrow);
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

/* DEV-14 · approved responsive correction.
   32px normally, 24px below 1024px. The 840px drawer threshold is
   unchanged, no destination is removed, no type size is reduced, and no
   button padding or hit area is touched. Measured need at 841px was
   830px against 799px available; the reduction saves 5 x 8px = 40px. */
@media (max-width: 1023.98px) {
  .nav-primary { gap: var(--nav-gap-compact); }
}

/* .site-header--no-cta is a PARAMETER, not a page-level deletion.
   The CTA is not rendered at all — no empty container is left behind, and
   no page-specific CSS hides it. house of hopium and both error
   templates pass it. */
.site-header--no-cta .button--header { display: none; }

/* ------------------------------------------------------------
   BUTTONS  ·  base + --secondary + --on-lilac + --header
   ------------------------------------------------------------ */
.button {
  text-decoration: none;
  display: inline-block;
  font-family: var(--font-body);
  font-weight: var(--weight-label);
  font-size: var(--button-size);
  letter-spacing: var(--button-tracking);
  text-transform: uppercase;
  padding: 17px 32px;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--action-bg);
  color: var(--action-label);
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease);
  /* Width is never set: CTA wording must be able to change without a
     structural or CSS change. */
}
/* B-32 verification, and the one thing it found beyond the accent itself:
   soft-black on orange measured 4.38:1 and soft-black on orange-press
   3.32:1 — the button LABEL was failing. --ground-black on orange is
   5.19:1, so the label token changes. Hover no longer darkens the
   background, because darkening it lowers label contrast further (3.93:1):
   the hover cue is an inset ring in the label colour, which is a
   non-colour-dependent state change. DEV-36. */
/* Specificity guard: base.css sets a light text colour for links on dark
   grounds (DEV-34), which outranks .button on its own. The button label is
   restated here at element+class specificity so a button inside the dark
   header keeps its own compliant label. */
a.button, button.button, .on-black .button { color: var(--action-label); }
.button:hover {
  background: var(--action-bg);
  color: var(--action-label);
  box-shadow: inset 0 0 0 2px var(--action-label);
}

.button--secondary {
  background: transparent;
  border: var(--border-outline);
  color: var(--soft-black);
  padding: 15.5px 30.5px;   /* keeps the outer box identical to .button */
}
.button--secondary:hover { background: rgba(54,54,54,0.06); color: var(--soft-black); }

/* DEV-02 · the only non-orange primary action in the external set.
   Lilac and orange sit too close in value for orange to hold a button
   against it. The colour derives from the GROUND, so a band that changes
   ground gets the right button without a page override. */
.ground-lilac .button:not(.button--secondary) {
  background: var(--soft-black);
  color: var(--paper);
}
.ground-lilac .button:not(.button--secondary):hover { background: var(--ground-black); }

/* DEV-17 · the account button is a 44px target too. padding-inline is
   unchanged at 20px, so the button's width — and the measured navigation
   fit at 841px — is exactly as approved. */
.button--header {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 20px;
  font-size: var(--button-size-sm);
  letter-spacing: var(--button-tracking-sm);
  white-space: nowrap;
}

/* Its own orange rule IS the underline, so the text-decoration is cleared
   to avoid two lines. Text colour comes from the base link rule
   (--text-strong), so it passes on every light ground. */
.link-inline {
  text-decoration: none;
  font-weight: var(--weight-label);
  border-bottom: 1px solid var(--orange);
  padding-bottom: 2px;
}

/* ------------------------------------------------------------
   FOOTER  ·  base + --no-cta + --with-top-divider
   ------------------------------------------------------------ */
.site-footer { width: 100%; background: var(--soft-black); color: var(--text-on-black); }
.site-footer__inner {
  width: 100%;
  margin-inline: auto;
  padding: clamp(56px, 5vw, 80px) clamp(28px, 4vw, 64px) clamp(32px, 3vw, 48px);
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 5vw, 72px);
}
.site-footer__top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: clamp(64px, 8vw, 144px); flex-wrap: nowrap;
}
.site-footer__top > a { text-decoration: none; }
.site-footer__wordmark { width: clamp(180px, 15vw, 238px); height: auto; }
.site-footer__columns {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: clamp(52px, 6vw, 108px);
}
/* DEV-33. The footer links had the same fault DEV-16 fixed in the drawer
   and DEV-17 in the desktop nav, and it went unmeasured because every
   hit-area sweep was scoped to main: the link is display:block with no
   vertical padding, so its clickable box was the 21px line box.
   The link now carries the 44px minimum, and the column gap drops from
   12px to 0 so the padding provides the rhythm instead of adding to it —
   without that the columns in every footer in the set would loosen. */
.site-footer__column { display: flex; flex-direction: column; gap: 0; }
/* The column heading keeps the old 12px separation from its first link,
   since it is not a target and gains no padding. */
.site-footer__heading { margin-bottom: var(--space-4); }
/* B-32. Orange on soft-black measured 4.38:1 at 9.5px. The words take the
   light text token; the orange stays as the marker rule. */
.site-footer__heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-on-black);
}
.site-footer__heading::before { content: ""; flex: 0 0 auto; width: 24px; height: 2px; background: var(--orange); }
.site-footer__link {
  text-decoration: none;
  display: flex;
  align-items: center;
  min-height: 56px;
  font-size: 16px;
  line-height: 1.35;
  color: var(--text-on-black);
}
.site-footer__link:hover { color: var(--paper); text-decoration: underline; text-decoration-color: var(--orange); }
.site-footer__base {
  border-top: var(--border-on-black);
  padding-top: clamp(28px, 3vw, 44px);
  display: flex; justify-content: space-between;
  font-size: 15px; flex-wrap: wrap; gap: var(--space-4);
}
.site-footer__base span { color: var(--text-on-black); }

.site-footer--no-cta .button { display: none; }

/* DEV-13 · the dark-boundary rule, moved OUT of individual page copies of
   the footer and into the shared component as a documented modifier.
   Where a dark ground meets the dark footer the boundary carries
   --surface-divider-on-black; where a light ground meets it, the colour
   change IS the boundary and no rule is drawn.
   The page template passes the modifier; the border and the token live
   here. Not targeted by page slug, not inferred positionally, and no page
   retains a border inside its own copy of the footer. */
.site-footer--with-top-divider { border-top: var(--border-on-black); }

@media (max-width: 839.98px) {
  .site-footer__inner { padding-inline: var(--gutter); gap: var(--space-8); }
  .site-footer__top { flex-direction: column; gap: var(--space-8); }
  .site-footer__columns { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) var(--space-5); }
  .site-footer__column:last-child { grid-column: 1 / -1; }
  .site-footer__link { min-height: 44px; }
}

@media (max-width: 479.98px) {
  .site-footer__columns { grid-template-columns: 1fr; }
  .site-footer__column:last-child { grid-column: auto; }
  .site-footer__base { flex-direction: column; }
}

/* ------------------------------------------------------------
   CTA BAND  ·  one component, four grounds
   ------------------------------------------------------------ */
.cta-band__inner {
  width: min(100%, var(--container-max));
  margin-inline: auto;
  padding: clamp(48px, 6vw, 76px) var(--gutter);
}
.cta-band__heading { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.08; max-width: 22em; margin-block: var(--space-4) 0; }
.cta-band__body { font-size: var(--body-legal); line-height: 1.6; color: var(--text-body); max-width: 30em; margin-block: var(--space-4) var(--space-6); }
.cta-band__reassurance { font-size: var(--body-sm); line-height: 1.5; color: var(--text-body); margin-top: var(--space-4); max-width: 34em; }
.ground-black .cta-band__body,
.ground-black .cta-band__reassurance { color: rgba(245,239,233,0.82); }
.ground-lilac .cta-band__body,
.ground-lilac .cta-band__reassurance { color: rgba(54,54,54,0.78); }

/* ------------------------------------------------------------
   LEGAL PAGES
   ------------------------------------------------------------ */
.legal-head__inner { width: min(100%, var(--container-max)); margin-inline: auto; padding: clamp(44px,5.5vw,64px) var(--gutter); }
.legal-head__meta { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.legal-head__updated { font-weight: var(--weight-label); font-size: var(--body-xs); letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.legal-head__rule { width: 1px; height: 14px; background: var(--surface-divider); }
.legal-head__entity { font-size: var(--body-sm); color: var(--text-muted); }

.legal-body {
  width: min(100%, var(--container-max));
  margin-inline: auto;
  padding: clamp(44px,5.5vw,64px) var(--gutter) clamp(60px,8vw,88px);
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.legal-contents { position: sticky; top: var(--space-6); min-width: 0; }
.legal-contents__label { font-weight: var(--weight-eyebrow); font-size: var(--eyebrow-card-size); letter-spacing: var(--eyebrow-card-tracking); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-4); }
.legal-contents__list { display: flex; flex-direction: column; }
/* 10px padding gave a 39px box. The rail keeps its border-left reading and
   the link becomes a 44px target. DEV-33. */
.legal-contents__link {
  text-decoration: none;
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--body-sm);
  line-height: 1.4;
  color: var(--text-muted);
  padding: 10px 0 10px 14px;
  border-left: 2px solid var(--surface-divider);
}
.legal-contents__link:hover { color: var(--soft-black); }
/* B-32. Current item: compliant text, with three non-colour indicators —
   weight, the orange border rule, and aria-current. */
.legal-contents__link[aria-current="true"] { font-weight: 600; color: var(--soft-black); border-left-color: var(--orange); border-left-width: 3px; }

/* DEV-06 · 17px at 34em. Legal text is read, not scanned.
   The font-size MUST sit on .legal-prose itself, not only on its children:
   --measure-legal is an em value and resolves against this element's own
   font-size. With the size on the children only, the container measured
   against the inherited 15px body size and computed to 510px — 30em of
   actual 17px running text, narrower than the ~33em the approved template
   rendered. Raising the type would then have tightened the measure, which is
   the opposite of the approved intent. Children inherit from here. */
.legal-prose {
  min-width: 0;
  font-size: var(--body-legal);
  line-height: var(--leading-legal);
  max-width: var(--measure-legal);
}
.legal-prose p, .legal-prose li { color: var(--text-body); }
.legal-prose h2 { font-size: var(--display-band); line-height: 1.18; color: var(--text-strong); margin-bottom: var(--space-4); }
.legal-list { line-height: var(--leading-legal); }
.legal-prose > section { margin-bottom: 44px; }
.legal-prose > section:last-of-type { margin-bottom: 0; }
.legal-prose p + p { margin-top: var(--space-4); }
.legal-summary { background: var(--stone); padding: 26px 28px; margin-bottom: var(--pad-tight); }
.legal-summary__label { font-weight: var(--weight-eyebrow); font-size: var(--eyebrow-card-size); letter-spacing: var(--eyebrow-card-tracking); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-3); }
/* Excluded from DEV-06 by decision: the summary box and the table are not
   long-form clause prose. Sizes restated because .legal-prose now sets 17px. */
.legal-summary p { font-size: var(--body-base); line-height: 1.65; }

.legal-list { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.legal-list li { display: flex; gap: var(--space-3); }
.legal-list li::before { content: "—"; color: var(--orange); font-weight: var(--weight-eyebrow); flex: 0 0 auto; }

.legal-table { width: 100%; border-collapse: collapse; margin-top: var(--space-5); }
.legal-table th {
  text-align: left; padding: 0 var(--space-4) var(--space-3) 0;
  border-bottom: var(--border-ground-strong);
  font-weight: var(--weight-eyebrow); font-size: var(--eyebrow-card-size);
  letter-spacing: var(--eyebrow-card-tracking); text-transform: uppercase; color: var(--text-muted);
}
.legal-table td { padding: var(--space-4) var(--space-4) var(--space-4) 0; border-bottom: var(--border-hairline); font-size: 14px; line-height: 1.5; color: var(--text-body); }

.legal-nav { border-top: var(--border-hairline); margin-top: var(--space-6); padding-top: var(--space-5); display: flex; gap: var(--pad-utility); flex-wrap: wrap; }
/* Same correction, same reason — the legal link row had the identical
   no-padding pattern. DEV-33. */
.legal-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: var(--weight-label);
  font-size: var(--body-sm);
  line-height: var(--leading-body);
}

/* U-09 · below 768px the contents rail becomes a static block above the
   prose rather than a sticky element in a single column. */
@media (max-width: 767.98px) {
  .legal-body { grid-template-columns: minmax(0, 1fr); }
  .legal-contents { position: static; }
}

/* ------------------------------------------------------------
   ERROR TEMPLATES  ·  one shell, two copy sets
   ------------------------------------------------------------ */
.error__inner {
  width: min(100%, var(--container-max));
  margin-inline: auto;
  padding: clamp(72px, 11vw, 132px) var(--gutter) clamp(76px, 11vw, 136px);
}
.error__h1 { font-size: clamp(38px, 5.6vw, 68px); line-height: 1.02; max-width: 17em; margin-block: var(--space-5) var(--space-5); }
.error__body { font-size: 19px; line-height: 1.6; color: var(--text-body); max-width: 30em; margin-bottom: var(--pad-tight); }
.error__rule { width: 100%; max-width: 520px; height: 1px; background: var(--surface-divider); margin: var(--pad-tight) 0 var(--space-5); }
.error__links { display: flex; gap: 30px; flex-wrap: wrap; }
/* Standalone destination links, so they are targets: 44px minimum. They
   measured 28px — the same no-padding pattern as the footer. DEV-33. */
.error__links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; }
.error__actions { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
/* The email link sits beside the retry button as a standalone action, so it
   is a target: 44px minimum. It measured 27px. DEV-33. */
.error__actions a { display: inline-flex; align-items: center; min-height: 44px; }
/* Polite live region. Reserves its own height so a failure does not shift
   the layout, and never moves keyboard focus. */
.error__status { min-height: 1.5em; font-size: var(--body-base); line-height: 1.5; color: var(--soft-black); max-width: 30em; margin-top: var(--space-5); }

/* ------------------------------------------------------------
   IMAGE WRAPPERS  ·  --plate --framed --gallery --full-bleed
   Placeholders preserve the true ratio so extraction cannot silently
   reflow a section. A meaningful empty slot never emits an empty <img>.
   ------------------------------------------------------------ */
.media { display: block; width: 100%; background: var(--stone); }
.media > img, .media > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media--contain > img { object-fit: contain; }   /* wordmarks, logos, screenshots */
.media--feature  { aspect-ratio: var(--ratio-feature); }
.media--video    { aspect-ratio: var(--ratio-video); }
.media--portrait { aspect-ratio: var(--ratio-portrait); }
.media--square   { aspect-ratio: var(--ratio-thumb); }
.media--wide     { aspect-ratio: var(--ratio-wide); }
.media--framed   { background: var(--paper); padding: 12px 12px 14px; box-shadow: var(--shadow-plate); }
.media__caption  { font-size: var(--body-xs); line-height: 1.5; color: var(--text-muted); margin-top: var(--space-2); }

/* CAPTIONS AND META · corrected. Every caption and meta line used
   --text-faint, which measures 2.76:1 on paper and 2.34:1 on stone. A
   caption is readable text: repetition elsewhere, a small size and the
   word "faint" are none of them an exception. All six uses now take
   --text-muted, the nearest existing token that passes on every light
   ground in the set — paper 5.75:1, stone 4.88:1, cream 5.25:1 — and no
   new colour token is introduced. The secondary read is carried where it
   should be: 11-12.5px at weight 500, above a hairline rule, against
   15-17px body copy in --text-body. DEV-32. */

/* ------------------------------------------------------------
   BAND LAYOUTS  ·  shared by every page template.
   Two thresholds only: 840px (two columns become one) and 600px
   (multi-column groups become one), from 02 v3. No page declares
   its own grid.
   ------------------------------------------------------------ */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 60px);
  align-items: center;
}
.split--text-led { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); }
.split--media-first > .media { order: -1; }
.split__col { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.split__col > .button { margin-top: var(--space-2); }
@media (max-width: 839.98px) {
  .split, .split--text-led { grid-template-columns: minmax(0, 1fr); }
  /* Copy before image at every collapsed width, on every page. */
  .split--media-first > .media { order: 0; }
}

.lead { font-size: var(--body-base); line-height: 1.7; color: var(--soft-black); max-width: 42em; }
.statement { font-size: 28px; line-height: 1.15; max-width: 30em; }
.hand-mark { font-family: var(--font-hand); font-weight: var(--weight-eyebrow); font-size: 17px; color: var(--soft-black); }
.mark-lilac { background: var(--lilac); color: var(--soft-black); padding: 0 3px; }

.centred-head { max-width: 44em; margin-inline: auto; text-align: center; display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--rule-gap); }
.centred-head__body { font-size: var(--body-base); line-height: 1.62; color: var(--text-body); }
.centred-action { margin-top: var(--space-5); text-align: center; }

/* Standalone text-link actions are touch targets, so they carry the 44px
   minimum. Links inside running prose are not: enlarging them would break
   the line box. Applied at extraction — DEV-16's rule generalised. */
.link-cta {
  text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-body);
  font-weight: var(--weight-label); font-size: 14.5px;
  color: var(--soft-black); background: none; border: 0; cursor: pointer;
  border-bottom: 1.5px solid var(--soft-black);
}
.link-cta:hover { color: var(--orange-press); border-bottom-color: var(--orange-press); }

/* ------------------------------------------------------------
   CENTRED HERO  ·  masterbrand homepage
   ------------------------------------------------------------ */
.hero-centred { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-5); padding-bottom: var(--pad-tight); }
.hero-centred__icons { display: flex; gap: 14px; }
.hero-centred__h1 { max-width: 880px; }
.hero-centred__body { font-size: var(--body-lead); line-height: 1.6; color: var(--text-body); max-width: 40em; }
.hero-centred__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; justify-content: center; }
.hero-centred__mark { width: 34px; height: 3px; background: var(--lilac); }
.media--hero-visual { aspect-ratio: 21 / 9; }
@media (max-width: 600px) {
  /* Both hero buttons full-width, primary first. */
  .hero-centred__actions { width: 100%; flex-direction: column; align-items: stretch; }
  .hero-centred__actions .button { text-align: center; }
  /* The brand-world composition is commissioned to hold at both crops. */
  .media--hero-visual { aspect-ratio: 3 / 2; }
}

/* ------------------------------------------------------------
   LISTS  ·  dot, ruled, numbered rows, numbered columns
   ------------------------------------------------------------ */
.dot-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.dot-list li { display: grid; grid-template-columns: 18px 1fr; gap: var(--space-3); font-size: var(--body-base); line-height: 1.5; color: var(--text-strong); }
.dot-list li::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--soft-black); margin-top: 7px; }

.rule-list { list-style: none; margin: 0; padding: 0; width: 100%; border-top: var(--border-hairline); }
.rule-list li { padding: 14px 0; border-bottom: var(--border-hairline); font-size: 14.5px; line-height: 1.5; color: var(--text-strong); }

.numbered-rows { list-style: none; margin: 0; padding: 0; min-width: 0; width: 100%; }
.numbered-rows li { display: flex; align-items: baseline; gap: var(--space-4); padding: 18px 0; border-bottom: var(--border-hairline); font-size: var(--body-base); line-height: 1.55; color: var(--text-body); }
.numbered-rows__n { font-family: var(--font-display); font-weight: var(--weight-display); font-size: 24px; color: var(--orange); flex: none; }

.numbered-cols { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.numbered-cols__item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.numbered-cols__n { font-family: var(--font-display); font-weight: var(--weight-display); font-size: 36px; line-height: 1; color: var(--lilac); }
.numbered-cols__title { font-family: var(--font-body); font-weight: 600; font-size: var(--body-base); color: var(--text-strong); }
.numbered-cols__body { font-size: var(--body-base); line-height: 1.6; color: var(--soft-black); }
@media (max-width: 839.98px) { .numbered-cols { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------
   ROUTE LIST  ·  compact links, never a card gallery or carousel
   ------------------------------------------------------------ */
.route-block { margin-top: var(--pad-tight); padding-top: var(--rule-gap-tight); border-top: var(--border-hairline); }
.route-block__label { font-family: var(--font-body); font-weight: var(--weight-eyebrow); font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--soft-black); margin-bottom: var(--space-4); }
.route-block__note { margin-top: var(--space-4); font-size: 13px; line-height: 1.55; color: var(--text-muted); max-width: 60em; }
.route-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); }
.route-list__item {
  text-decoration: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: 44px;                 /* hit area, verified rendered */
  padding: 12px 16px;
  border: var(--border-hairline); background: var(--stone);
  border-radius: var(--radius-card);
  font-size: var(--body-base); line-height: 1.4; color: var(--text-strong);
}
.route-list__item:hover { border-color: var(--soft-black); background: var(--paper); color: var(--text-strong); }
.route-list__arrow { color: var(--orange); flex: none; }

/* ------------------------------------------------------------
   RESOURCE CARD  ·  topic eyebrow only; the resource TYPE is tagged
   and filterable but is never printed on a card. Library v7.
   ------------------------------------------------------------ */
.resource-card {
  text-decoration: none;
  min-width: 0; display: flex; flex-direction: column; gap: var(--space-4);
  background: var(--paper); border: var(--border-hairline);
  border-radius: 18px; box-shadow: var(--shadow-plate);
  padding: var(--pad-card-feature) var(--pad-card-feature) var(--pad-card-feature);
  color: var(--text-strong);
}
.resource-card:hover { color: var(--text-strong); box-shadow: var(--shadow-raised); }
.resource-card__topic { display: flex; align-items: center; gap: 9px; }
.resource-card__title { font-size: 28px; line-height: 1.1; }
.resource-card__body { font-size: var(--body-base); line-height: 1.62; color: var(--text-muted); }
.resource-card__meta { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-4); border-top: var(--border-hairline); font-weight: var(--weight-label); font-size: var(--body-xs); color: var(--text-muted); }
.resource-card__arrow { font-size: 16px; color: var(--orange); }

/* Third-party embed container. The theme sets width only. */
.embed-slot { width: 100%; min-height: 170px; background: var(--stone); }

.closing__h2 { font-size: clamp(32px, 3.6vw, 44px); line-height: 1.04; }
.closing__actions { justify-content: flex-start; }

/* ------------------------------------------------------------
   ACTION ROWS, NOTES, SECTION HEADS
   ------------------------------------------------------------ */
.action-row { display: flex; align-items: center; gap: var(--space-4); flex-wrap: nowrap; }
.action-row--with-note { gap: var(--space-5); }
.reassurance { font-weight: var(--weight-label); font-size: var(--body-base); line-height: 1.5; color: var(--text-muted); max-width: 34em; }
/* Empty behaviour for a preserved copy slot: the element stays in the
   template so copy can arrive without a structural change, and renders
   nothing — no reserved gap, no filler — until it does. Applies to the two
   masterbrand reassurance slots left open for the copy pass. */
.reassurance:empty { display: none; }
.lead--hero { font-size: var(--body-lead); max-width: 38em; }
.note { font-size: var(--body-sm); line-height: 1.6; color: var(--text-muted); max-width: 34em; }
.callout { margin-top: var(--space-5); padding: var(--space-4) var(--space-5); background: var(--paper); border: var(--border-hairline); border-left: 3px solid var(--lilac); font-size: 14.5px; line-height: 1.6; color: var(--text-body); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.section-head__h2 { max-width: 24em; }
.section-head__aside { font-size: 14px; color: var(--text-muted); max-width: 26em; }
.rule-block { margin-top: var(--pad-tight); padding-top: var(--pad-tight); border-top: var(--border-hairline); }
/* B-32. Compliant text, orange kept as the rule under it. */
.link-cta--quiet { font-size: 13px; letter-spacing: 0.5px; color: var(--soft-black); border-bottom-color: var(--orange); }
.link-cta--quiet:hover { color: var(--soft-black); border-bottom-width: 2px; }

.stack-media { min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }

/* ------------------------------------------------------------
   CARD FAMILIES
   type-card   · resource TYPE, the one place the type taxonomy is
                 the subject of the section
   resource-tile · a real Ghost post; prints the TOPIC only
   info-card   · a stated fact about the account
   proof-card  · shows what an account opens, rather than saying it
   ------------------------------------------------------------ */
.card-grid, .info-grid, .resource-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.card-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.info-grid, .resource-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.card-grid > li, .info-grid > li, .resource-grid > li { min-width: 0; display: flex; }

.type-card {
  text-decoration: none;
  min-width: 0; width: 100%; display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--paper); border: var(--border-hairline); border-radius: var(--radius-card);
  padding: var(--pad-card); color: var(--text-strong);
}
.type-card:hover { border-color: var(--soft-black); color: var(--text-strong); }
.type-card__title { font-size: var(--display-card); line-height: 1.15; }
.type-card__job { font-size: var(--body-sm); line-height: 1.55; color: var(--text-muted); }

.resource-tile {
  text-decoration: none;
  min-width: 0; width: 100%; display: flex; flex-direction: column;
  background: var(--paper); border: var(--border-hairline); border-radius: var(--radius-card);
  color: var(--text-strong);
}
.resource-tile:hover { border-color: var(--soft-black); color: var(--text-strong); }
.resource-tile > .media { border-bottom: var(--border-hairline); }
.resource-tile__inner { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-4) 18px; flex: 1; }
.resource-tile__topic { display: flex; align-items: center; gap: var(--space-2); }
.resource-tile__title { font-family: var(--font-display); font-weight: var(--weight-display); font-size: 19px; line-height: 1.15; flex: 1; }
.resource-tile__meta { font-weight: var(--weight-label); font-size: 11px; letter-spacing: 0.5px; color: var(--text-muted); padding-top: var(--space-3); border-top: var(--border-hairline); }

.info-card {
  min-width: 0; width: 100%; flex-direction: column; gap: var(--space-3);
  background: var(--paper); border: var(--border-hairline); border-radius: var(--radius-control);
  padding: var(--pad-card);
}
.info-card__head { display: flex; align-items: center; gap: 9px; }
.info-card__title { font-size: 22px; line-height: 1.12; }
.info-card__body { font-size: 14px; line-height: 1.55; color: var(--text-muted); }

.proof-card {
  text-decoration: none;
  display: flex; flex-direction: column; gap: var(--space-2);
  background: var(--paper); border: var(--border-hairline); border-radius: 16px;
  box-shadow: var(--shadow-raised); padding: 26px 28px; color: var(--text-strong);
}
.proof-card:hover { color: var(--text-strong); box-shadow: var(--shadow-plate); }
.proof-card__topic { display: flex; align-items: center; gap: var(--space-2); }
.proof-card__title { font-family: var(--font-display); font-weight: var(--weight-display); font-size: 24px; line-height: 1.14; }
.proof-card__meta { font-weight: var(--weight-label); font-size: 13px; color: var(--soft-black); border-bottom: 1px solid var(--orange); align-self: flex-start; }

/* ------------------------------------------------------------
   STEP LIST  ·  numbered rows with a title and a line of body.
   The steps are content, never a decorative process strip, and are
   never cropped or abbreviated at any width.
   ------------------------------------------------------------ */
.step-list { list-style: none; margin: 0; padding: 0; width: 100%; }
.step-list li { display: flex; align-items: baseline; gap: 18px; padding: 18px 0; border-bottom: var(--border-hairline); }
.step-list__n { font-family: var(--font-display); font-weight: var(--weight-display); font-size: 30px; line-height: 1; color: var(--orange); flex: none; }
.step-list__title { font-family: var(--font-body); font-weight: 600; font-size: var(--body-lead); line-height: 1.35; color: var(--text-strong); }
.step-list__body { font-size: var(--body-base); line-height: 1.5; color: var(--text-body); margin-top: var(--space-1); }
.ground-lilac .step-list li { border-bottom-color: var(--surface-divider-on-lilac); }
/* DEV-31. The source board draws these numerals in paper on lilac, which
   measures 1.83:1 and breaks the system rule that lilac carries soft-black
   text only — the rule 21 v2 audited all thirteen lilac grounds against.
   Soft-black instead: 6.59:1, and the numeral still reads as quieter than
   the step title because it is display weight 300 against a 600 label.
   Orange is not used here: it sits too close to lilac in value. */
.ground-lilac .step-list__n { color: var(--soft-black); }

/* ------------------------------------------------------------
   DIRECTORY  ·  kind cards, checklist, listing specimen, tiles
   ------------------------------------------------------------ */
.split--top { align-items: start; }
.card-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 839.98px) { .card-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)    { .card-grid--four { grid-template-columns: minmax(0, 1fr); } }

.kind-card { min-width: 0; width: 100%; flex-direction: column; gap: var(--space-3); background: var(--paper); border: var(--border-hairline); border-radius: var(--radius-card); padding: 24px 22px 26px; }
.kind-card__head { display: flex; align-items: center; gap: var(--space-3); }
.kind-card__title { font-size: 22px; line-height: 1.16; }
.kind-card__body { font-size: 14px; line-height: 1.55; color: var(--text-body); }

/* Checklist rows: icon, bold clause, one qualifying phrase. The icons are
   decorative beside a text label, so alt is empty. Filter and search
   glyphs are deliberately unused — either would imply controls that are
   not verified. */
.check-list { list-style: none; margin: 0; padding: 0; width: 100%; border-top: var(--border-hairline); }
.check-list li { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; padding: 16px 0; border-bottom: var(--border-hairline); }
.check-list li > img { margin-top: 3px; }
.check-list p { font-size: var(--body-legal); line-height: 1.45; color: var(--text-strong); }
.check-list strong { font-weight: var(--weight-eyebrow); }

/* Listing specimen · straightened (no tilt) because it sits square in a
   two-column box. Never carries a "checked" date or a verification claim. */
.listing-card { min-width: 0; background: var(--paper); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-plate); }
.listing-card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: 24px 26px 26px; }
.listing-card__topic { display: flex; align-items: center; gap: 9px; }
.listing-card__title { font-size: var(--display-band); line-height: 1.14; }
.listing-card__line { font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.listing-card__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: 14px; border-top: var(--border-hairline); font-weight: var(--weight-label); font-size: 11.5px; color: var(--text-muted); }

/* W19 tiles · fixed 280px, auto-fit from 220px, so three or two live
   entries fill the row with no stretched tile and no empty cell. */
.tile-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); }
.tile-grid > li { min-width: 0; display: flex; }
.tile {
  text-decoration: none;
  position: relative; min-width: 0; width: 100%; height: 280px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 20px; border-radius: var(--radius-card);
}
.tile:hover { opacity: 0.94; }
.tile__foot { display: flex; flex-direction: column; gap: var(--space-2); position: relative; z-index: 1; }
.tile__title { font-family: var(--font-display); font-weight: var(--weight-display); font-size: 17px; line-height: 1.14; }
.tile__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.tile__topic { font-weight: var(--weight-label); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; }
.tile--art { padding: 0; color: var(--text-on-black); }
.tile--art > .media { position: absolute; inset: 0; height: 100%; }
/* The earlier 4.89:1 figure was taken at the deepest gradient stop, not
   where the text sits: the ramp only reached full strength BELOW the first
   line, so the title's top line measured 1.88:1 over a bright photo. The
   scrim now holds 0.88 from the top edge of the foot and deepens to 0.96,
   with the feather moved ABOVE the foot so the artwork still fades in.
   Worst case — a pure-white photograph — the backdrop composites to
   L=0.16: paper text 8.84:1, --text-on-black 7.75:1. B-32 / DEV-37. */
.tile--art { display: flex; flex-direction: column; }
.tile--art > .tile__foot {
  margin-top: auto;
  padding: 20px;
  background: linear-gradient(180deg, rgba(43,42,41,0.88) 0%, rgba(43,42,41,0.96) 100%);
}
/* The feather, drawn above the foot rather than through it. */
.tile--art > .tile__foot::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: 72px;
  background: linear-gradient(180deg, rgba(43,42,41,0) 0%, rgba(43,42,41,0.88) 100%);
  pointer-events: none;
}
.tile--art .tile__title { color: var(--paper); }
.tile--art > .tile__foot { position: relative; }
/* Aligned with .tile--black: the two variants of one component must not
   disagree, and this is the variant whose backdrop is user photography. */
.tile--art .tile__topic { color: var(--text-on-black); display: inline-flex; align-items: center; gap: var(--space-2); }
.tile--art .tile__topic::before { content: ""; width: 12px; height: 2px; background: var(--orange); }
.tile--black { background: var(--soft-black); color: var(--text-on-black); }
.tile--black .tile__title { color: var(--paper); }
/* Orange on soft-black measures 4.38:1 at 10.5px, so the words take the
   light token and the orange becomes the marker. B-32. */
.tile--black .tile__topic { color: var(--text-on-black); display: inline-flex; align-items: center; gap: var(--space-2); }
.tile--black .tile__topic::before { content: ""; width: 12px; height: 2px; background: var(--orange); }
.tile--lilac { background: var(--lilac); color: var(--soft-black); }
.tile--lilac .tile__title, .tile--lilac .tile__topic { color: var(--soft-black); }
.media--tile { aspect-ratio: auto; }
.media--listing { aspect-ratio: 5 / 4; background: var(--paper); border: var(--border-hairline); }

.centred-cta { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-5); }
.centred-cta h2 { max-width: 26em; }
.centred-cta .centred-head__body { max-width: 44em; }
@media (max-width: 600px) { .centred-cta .button { width: 100%; text-align: center; } }
.lead--body { font-size: var(--body-lead); line-height: 1.7; color: var(--soft-black); max-width: 42em; }

/* ------------------------------------------------------------
   WORK WITH US  ·  offers, use cases, commissioner types,
   objection band, full-bleed founder split
   ------------------------------------------------------------ */
.stack-copy { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--pad-tight); }

.offer-grid { list-style: none; margin: var(--pad-tight) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
@media (max-width: 839.98px) { .offer-grid { grid-template-columns: minmax(0, 1fr); } }
.offer-card { min-width: 0; display: flex; flex-direction: column; background: var(--paper); border: var(--border-hairline); border-radius: var(--radius-card); padding: 28px 26px 30px; }
.offer-card__title { font-size: var(--display-band); line-height: 1.15; margin-bottom: var(--space-4); }
.offer-card__value { font-size: 14.5px; line-height: 1.6; color: var(--text-body); margin-bottom: var(--space-5); }
.offer-card__format { margin-top: auto; padding-top: 18px; border-top: var(--border-hairline); font-size: 13px; line-height: 1.5; color: var(--text-muted); }

.usecase-grid { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); }
.usecase { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.usecase__title { font-family: var(--font-body); font-weight: 600; font-size: 15.5px; color: var(--text-strong); }
.usecase__body { font-size: var(--body-base); line-height: 1.65; color: var(--soft-black); }

/* The five commissioner types as TEXT — always legible at 390px and
   always available to assistive technology. DEV-20. */
.type-row { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--surface-divider); border: var(--border-hairline); }
.type-row li { background: var(--paper); padding: 18px 16px; font-size: 14px; line-height: 1.5; color: var(--text-strong); }

.objection-band { margin-top: var(--pad-tight); padding: 34px 36px; display: grid; grid-template-columns: minmax(0, 1.35fr) auto; gap: var(--space-7); align-items: center; }
.objection-band__copy { display: flex; flex-direction: column; gap: var(--space-3); }
.objection-band__h3 { font-size: var(--display-band); line-height: 1.16; max-width: 26em; }
.objection-band__body { font-size: 14.5px; line-height: 1.6; max-width: 44em; }
@media (max-width: 839.98px) {
  .objection-band { grid-template-columns: minmax(0, 1fr); }
  .objection-band .button { justify-self: start; }
}
@media (max-width: 600px) {
  .objection-band { padding: var(--space-6) var(--space-5); }
  .objection-band .button { width: 100%; text-align: center; }
}

/* Founder section · copy in the container, image bleeding to the right
   page edge. Below 840px it becomes copy then image, both in the shell. */
.bleed-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; min-height: 460px; }
.bleed-split__copy {
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-4);
  padding: var(--pad-section) var(--gutter) var(--pad-section)
           max(var(--gutter), calc((100vw - var(--container-max)) / 2));
}
.bleed-split__media { min-height: 420px; background: var(--stone); border-left: 1px solid var(--surface-divider-on-lilac); }
@media (max-width: 839.98px) {
  .bleed-split { grid-template-columns: minmax(0, 1fr); }
  .bleed-split__copy { padding: var(--pad-section) var(--gutter) var(--space-6); }
  .bleed-split__media { min-height: 0; aspect-ratio: var(--ratio-feature); border-left: 0; }
}

.eyebrow--ruled { display: flex; align-items: center; gap: var(--space-3); }
.eyebrow--ruled::before { content: ""; width: 34px; height: 1px; background: currentColor; flex: none; }

.fact-line { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.fact-line__figure { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--display-section); line-height: 1; color: var(--soft-black); }
.fact-line__detail { font-size: var(--body-sm); color: var(--text-muted); }

/* ------------------------------------------------------------
   BORROW MY BRAIN  ·  letter, stat row, outputs, Q&A
   ------------------------------------------------------------ */
.stack-copy--flush { margin-bottom: 0; align-items: flex-start; }
.statement--large { font-size: clamp(30px, 3.6vw, 42px); line-height: 1.04; max-width: 44em; }
.price-line { font-weight: var(--weight-eyebrow); font-size: 19px; color: var(--text-strong); }
.prose-block { display: flex; flex-direction: column; gap: var(--space-5); font-size: var(--body-lead); line-height: 1.75; color: var(--text-body); max-width: 34em; }
.letter { display: flex; flex-direction: column; gap: 14px; font-size: var(--body-lead); line-height: 1.75; color: var(--text-body); max-width: 34em; }
.signature { font-family: var(--font-hand); font-weight: var(--weight-eyebrow); font-size: 19px; color: var(--soft-black); }
/* B-32. The figure is read, so it takes a compliant token; the large-text
   allowance is deliberately not used. Orange survives as the rule beside
   it. */
.fact-line__figure--accent { color: var(--soft-black); display: inline-flex; align-items: center; gap: var(--space-3); }
.fact-line__figure--accent::before { content: ""; width: 20px; height: 3px; background: var(--orange); }

.stat-row { list-style: none; margin: var(--space-4) 0 0; padding: var(--space-5) 0 0; width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--rule-gap); border-top: var(--border-ground-strong); }
.stat-row__figure { display: block; font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--display-section); line-height: 1; color: var(--soft-black); }
.stat-row__figure--accent { color: var(--soft-black); }
.stat-row__figure--accent::before { content: ""; display: block; width: 24px; height: 3px; background: var(--orange); margin-bottom: var(--space-2); }
.stat-row__label { display: block; margin-top: var(--space-2); font-weight: var(--weight-label); font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }

/* Four outputs · the panel is the content; the two flanking cards are
   supporting. The rotation is decoration and is dropped when they stack. */
.outputs { margin-top: var(--pad-tight); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--space-5); align-items: center; }
.output-card { min-width: 0; background: var(--paper); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-plate); }
.output-card--left { transform: rotate(-2deg); }
.output-card--right { transform: rotate(2deg); }
.output-card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: 26px 28px 30px; }
.output-card__title { font-size: var(--display-band); line-height: 1.15; }

.panel { min-width: 0; background: var(--paper); border-radius: 24px; box-shadow: var(--shadow-plate); padding: var(--pad-card-feature) 48px 48px; display: flex; flex-direction: column; gap: var(--rule-gap); }
.panel__title { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.06; text-align: center; }
.panel__note { padding-top: 18px; border-top: var(--border-hairline); font-size: 14.5px; line-height: 1.5; color: var(--text-muted); }
.tick-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.tick-list li { display: flex; align-items: flex-start; gap: 14px; border: var(--border-hairline); border-radius: 12px; padding: 16px 18px; font-weight: 600; font-size: var(--body-legal); line-height: 1.4; }
.tick-list__mark { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 4px; background: var(--teal); color: #fff; font-size: 13px; line-height: 22px; text-align: center; font-weight: var(--weight-body); }
@media (max-width: 1023.98px) {
  .outputs { grid-template-columns: minmax(0, 1fr); }
  .output-card--left, .output-card--right { transform: none; }
  .panel { padding: var(--space-6) var(--space-6) var(--space-7); }
}

/* Open questions and answers. No accordion: nothing needed to understand
   the offer is hidden behind an interaction. */
.qa-list { margin: 0; padding: 0; border-top: var(--border-ground-strong); }
.qa-list dt { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--display-card); line-height: 1.2; color: var(--text-strong); max-width: 18em; padding-top: var(--space-5); }
.qa-list dd { margin: 0; padding: var(--space-2) 0 var(--space-5); border-bottom: var(--border-hairline); font-size: var(--body-lead); line-height: 1.65; color: var(--text-body); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
@media (min-width: 840px) {
  .qa-list { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); column-gap: var(--space-7); }
  .qa-list dt { border-bottom: var(--border-hairline); padding-bottom: var(--space-5); }
}

/* ------------------------------------------------------------
   ABOUT US  ·  approach rows, brand cards, gallery, letter,
   non-interactive specimen
   ------------------------------------------------------------ */
.centred-measure { max-width: 60em; margin-inline: auto; }
.stack-copy__h2 { margin-block: var(--space-3) var(--space-6); }

.approach-list { list-style: none; margin: 0; padding: 0; border-top: var(--border-ground-strong); }
.approach-list li { display: grid; grid-template-columns: 34px 200px minmax(0, 1fr); gap: var(--space-5); align-items: baseline; padding: 18px 0; border-bottom: var(--border-hairline); }
.approach-list__title { font-size: var(--display-card); line-height: 1.1; color: var(--text-strong); }
.approach-list__text { font-size: var(--body-base); line-height: 1.6; color: var(--text-body); }
@media (max-width: 600px) {
  .approach-list li { grid-template-columns: 34px minmax(0, 1fr); }
  .approach-list__text { grid-column: 2; }
}

/* W9b · the Library card is centre, larger, unrotated, on a heavier
   shadow: hierarchy is spatial, not typographic. The tilts are
   decoration and are dropped when the cards stack. */
.brand-card a { text-decoration: none; }
.brand-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); align-items: start; }
.brand-card { min-width: 0; background: var(--paper); border-radius: 18px; overflow: hidden; box-shadow: 0 34px 60px -24px rgba(43,42,41,0.35); }
.brand-card--tilt-left { transform: rotate(-2deg); margin-top: 34px; }
.brand-card--tilt-right { transform: rotate(2deg); margin-top: 26px; }
.brand-card--feature { border-radius: 22px; box-shadow: var(--shadow-plate); padding: 30px 30px 32px; display: flex; flex-direction: column; gap: var(--space-4); position: relative; z-index: 2; text-align: center; align-items: center; }
.brand-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: 20px 22px 24px; }
.brand-card__label { display: flex; align-items: center; gap: var(--space-2); }
.brand-card__title { font-size: 20px; line-height: 1.14; }
.brand-card__feature-title { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.06; }
.brand-card__note { font-size: var(--body-xs); line-height: 1.5; color: var(--text-muted); }
.brand-card--feature .media { width: 100%; }
@media (max-width: 839.98px) {
  .brand-card--tilt-left, .brand-card--tilt-right { transform: none; margin-top: 0; }
}

/* Ghost gallery card · equal columns, top-aligned, each image keeps its
   own proportions. Never cropped to a uniform ratio. */
.gallery { list-style: none; margin: var(--pad-tight) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); align-items: start; }
.gallery > li { min-width: 0; }
.media--landscape { aspect-ratio: 3 / 2; }

.letter-card { min-width: 0; background: rgba(255,255,255,0.62); border: 1px solid var(--surface-divider-on-lilac); padding: var(--pad-tight) 46px var(--space-7); display: flex; flex-direction: column; gap: var(--space-5); }
.letter__para { font-size: var(--body-lead); line-height: 1.72; color: var(--soft-black); max-width: 42em; }
.signature--large { font-size: 30px; line-height: 1; }
.byline { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--surface-divider-on-lilac); }
.byline__name { font-weight: var(--weight-eyebrow); font-size: var(--body-base); color: var(--text-strong); }
.byline__role { font-size: 14px; color: var(--text-body); }

/* Specimen · shows what a Resource looks like. NOT a link: no anchor, no
   arrow, no hover, not focusable, out of the tab order, and hidden from
   assistive technology because the surrounding copy already says it. */
.specimen { min-width: 0; background: var(--paper); border: var(--border-hairline); border-radius: 18px; box-shadow: var(--shadow-plate); padding: 32px 34px 34px; display: flex; flex-direction: column; gap: var(--space-4); }
.specimen__title { font-family: var(--font-display); font-weight: var(--weight-display); font-size: 28px; line-height: 1.1; color: var(--text-strong); }
.specimen__body { font-size: var(--body-base); line-height: 1.62; color: var(--text-muted); }
.specimen__meta { padding-top: var(--space-4); border-top: var(--border-hairline); font-weight: var(--weight-label); font-size: var(--body-xs); color: var(--text-muted); }

/* Unfilled image slots are editorial placeholders, not public artwork. */
.media:empty { display: none; }
.split:has(> .media:empty),
.split:has(> .specimen[aria-hidden="true"]) { grid-template-columns: minmax(0, 1fr); }
.split:has(> .media:empty) > .split__col,
.split:has(> .specimen[aria-hidden="true"]) > .split__col { max-width: 920px; }
.split > .media:empty,
.gallery > li:has(> .media:empty),
.plate:has(.media:empty),
.figure-fill:has(> .media:empty),
.specimen[aria-hidden="true"] { display: none; }
@media (max-width: 599.98px) {
  .action-row { flex-wrap: wrap; align-items: stretch; }
  .action-row > .button { width: 100%; justify-content: center; text-align: center; }
}

/* ------------------------------------------------------------
   OUR STORY  ·  chapter heads, dated notes, figure rows
   ------------------------------------------------------------ */
.chapter-head { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-7); }
.chapter-head__meta { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.chapter-head__period { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--display-band); line-height: 1; color: var(--text-muted); }
.ground-lilac .chapter-head__period { color: var(--soft-black); }

/* Dated milestones live INSIDE the chapter copy as a ruled list, never as
   their own mini-sections. A verified milestone drops in as one more li. */
.dated-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; width: 100%; border-top: var(--border-ground-strong); }
.dated-list li { padding: 18px 0; border-bottom: var(--border-hairline); font-size: 15.5px; line-height: 1.55; color: var(--text-strong); }
.dated-list li:last-child { border-bottom: 0; }
.dated-list strong { font-weight: var(--weight-eyebrow); }

.plate { margin: 0; background: var(--paper); padding: 12px 12px 14px; box-shadow: var(--shadow-plate); }
.figure-full { margin: 0; }
.figure-fill { margin: 0; min-width: 0; display: flex; flex-direction: column; }
.figure-fill > .media { flex: 1; }
.media--fill { height: 100%; min-height: 260px; aspect-ratio: auto; }
.media--feature-4-3 { aspect-ratio: 4 / 3; }
.media--10-9 { aspect-ratio: 10 / 9; }
.split--stretch { align-items: stretch; }

.figure-row { display: grid; gap: var(--space-5); margin-top: var(--space-6); align-items: start; }
.figure-row > figure { margin: 0; min-width: 0; }
.figure-row--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.figure-row--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
/* 1.6 : 1 widths with matched heights — the 16:9 and 10:9 ratios are
   computed to resolve to the same height, not eyeballed. */
.figure-row--uneven { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
@media (max-width: 839.98px) {
  .figure-row--three, .figure-row--uneven { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .figure-row--three, .figure-row--uneven, .figure-row--pair { grid-template-columns: minmax(0, 1fr); }
}

.link-row { display: flex; gap: var(--space-5); flex-wrap: wrap; }

/* ------------------------------------------------------------
   MEET THE FOUNDER  ·  bio column, logo plates, social links
   ------------------------------------------------------------ */
.bleed-split--tall { min-height: 560px; }
.bleed-split__copy { gap: var(--space-5); }
.bleed-split__media--photo { background: var(--stone); position: relative; }
.bleed-split__media--photo > img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; }
@media (max-width: 839.98px) {
  .bleed-split__media--photo { aspect-ratio: var(--ratio-portrait); }
}

.role-line { font-size: 18.5px; line-height: 1.55; color: var(--text-strong); max-width: 24em; }
.split--bio { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; gap: var(--space-8); }
@media (max-width: 839.98px) { .split--bio { grid-template-columns: minmax(0, 1fr); } }
.bio { display: flex; flex-direction: column; gap: var(--space-5); font-size: var(--body-legal); line-height: 1.68; color: var(--text-body); max-width: 34em; }
.bio-aside { min-width: 0; border-top: var(--border-ground-strong); padding-top: var(--space-4); }

.social-links { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; }
/* B-32. Orange text at 13px measures 2.76:1 on paper. The words take a
   compliant token, each already sits beside its own platform icon, and the
   orange returns as the underline. */
.social-links a {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px;
  font-weight: var(--weight-label); font-size: 13px;
  color: var(--soft-black);
  text-decoration: underline; text-decoration-color: var(--orange);
  text-underline-offset: 0.15em;
}
.social-links a:hover { text-decoration-thickness: 2px; }

/* Logo plates · auto-fitting, so two or three permitted logos fill the
   row without a gap. Nothing is invented to complete the design, and no
   plate ships with a placeholder mark in it. */
.logo-row { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--rule-gap); }
.logo-plate { min-width: 0; background: var(--paper); padding: 12px; }
.media--logo { height: 110px; aspect-ratio: auto; background: var(--paper); }

.section-head--ruled { align-items: flex-end; padding-bottom: 18px; margin-bottom: var(--space-6); border-bottom: var(--border-hairline); }
.section-head__stack { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.resource-grid--wide { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.resource-tile__title--lg { font-size: var(--display-card); line-height: 1.16; flex: none; }
.resource-tile__excerpt { font-size: var(--body-sm); line-height: 1.6; color: var(--text-muted); flex: 1; }

/* ------------------------------------------------------------
   HOUSE OF HOPIUM  ·  dark hero, dictionary entry, manifesto,
   guest-list form
   The brand name is lowercase everywhere: house of hopium.
   ------------------------------------------------------------ */
/* Quieter header: this page carries no header action at all, so the
   sub-brand identity stays dominant. */
.site-header--quiet .nav-primary__link { color: rgba(245,239,233,0.78); }
.site-header--quiet .nav-primary__link:hover { color: var(--paper); }

.hero-dark { position: relative; width: 100%; background: var(--soft-black); color: var(--text-on-black); overflow: hidden; min-height: 760px; display: flex; align-items: center; }
.hero-dark--band { min-height: 0; }
.hero-dark__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.hero-dark__video--soft { opacity: 0.5; }
/* isolation: isolate keeps the scrim (a z-index:-1 pseudo-element) inside
   this box, above the video, instead of falling behind the section's own
   background. */
.hero-dark__inner { position: relative; isolation: isolate; padding-block: var(--pad-band); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--rule-gap); }
/* The video frames are not knowable — the asset is dark by design, but a
   replacement might not be, and B-29 leaves it open. So the text does not
   depend on the footage: a vertically feathered scrim holds 0.88 across
   the whole copy block, with the feather sitting in the 88px block padding
   above and below the first and last text lines. Worst case — a
   pure-white frame — the backdrop composites to L=0.16: --text-on-black
   8.55:1, --paper 9.75:1, --lilac 5.32:1. The blob motion still reads at
   the top and bottom edges of the band. DEV-37. */
.hero-dark__inner::before {
  content: "";
  position: absolute;
  inset: 0 -6%;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(43,42,41,0) 0%,
    rgba(43,42,41,0.88) 9%,
    rgba(43,42,41,0.88) 91%,
    rgba(43,42,41,0) 100%);
  pointer-events: none;
}
.hero-dark__hook { font-size: 20px; line-height: 1.5; color: rgba(245,239,233,0.9); max-width: 26em; }
.hero-dark__hook--sm { font-size: var(--body-lead); line-height: 1.6; color: rgba(245,239,233,0.85); max-width: 34em; }
.hero-dark__meta { font-size: 13px; color: rgba(245,239,233,0.62); }
/* The sub-brand's accent is lilac, so this variant keeps it — 6.59:1 on
   soft-black and 5.32:1 over the hero scrim at its worst case — and its
   marker is lilac too, not orange. Declared after the dark-ground eyebrow
   rules so it wins. */
.hero-dark .eyebrow--lilac, .eyebrow--lilac { color: var(--lilac); font-size: 12px; letter-spacing: 3px; }
.eyebrow--lilac::before { background: var(--lilac); }

/* Motion carries no information here, so under reduced motion the loop is
   simply not shown and the ground (or poster) stands in. */
@media (prefers-reduced-motion: reduce) {
  .hero-dark__video { display: none; }
}

.hopium-wordmark { font-size: var(--numeral-xl); line-height: 0.92; color: var(--paper); text-transform: lowercase; letter-spacing: -0.02em; }
.hopium-wordmark em { font-style: italic; }
.hopium-h2 { font-size: clamp(28px, 3vw, 38px); line-height: 1.04; color: var(--paper); text-transform: lowercase; max-width: 22em; }
.kicker { font-family: var(--font-mono); font-size: var(--body-base); letter-spacing: 0.02em; color: var(--paper); min-height: 1.4em; }

.entry-word { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.entry-word__head { font-family: var(--font-display); font-weight: var(--weight-display); font-style: italic; font-size: clamp(44px, 6vw, 76px); line-height: 1; color: var(--paper); text-transform: lowercase; letter-spacing: -0.01em; }
.entry-word__pos { font-family: var(--font-display); font-weight: var(--weight-display); font-style: italic; font-size: clamp(20px, 2.4vw, 30px); line-height: 1; color: var(--lilac); }
.senses { margin-top: var(--pad-tight); padding-top: 30px; border-top: var(--border-on-black); display: flex; flex-direction: column; gap: var(--space-2); }
.senses__line { font-family: var(--font-display); font-weight: var(--weight-display); font-size: clamp(24px, 2.8vw, 34px); line-height: 1.18; color: var(--paper); }
.senses__line--lilac { color: var(--lilac); }

.manifesto { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-7); }
.manifesto__h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.06; max-width: 22em; }
.manifesto__p { font-size: 19px; line-height: 1.65; color: var(--text-body); max-width: 30em; }
.manifesto__close { font-size: 21px; line-height: 1.5; color: var(--soft-black); max-width: 28em; }
.manifesto__rule { width: min(80%, 520px); height: 1px; background: var(--surface-divider); }
.hopium-inline { font-family: var(--font-display); font-weight: var(--weight-display); font-style: italic; font-size: 1.15em; }
.scroll-cue { text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-size: 26px; line-height: 1; color: var(--soft-black); }
.scroll-cue:hover { color: var(--orange-press); }

.guest-form { width: 100%; max-width: var(--measure-form); display: flex; flex-direction: column; gap: var(--space-2); text-align: left; }
.guest-form__label { font-weight: var(--weight-label); font-size: 14px; color: rgba(245,239,233,0.9); }
.guest-form__row { display: flex; gap: var(--space-3); align-items: stretch; flex-wrap: wrap; }
.guest-form__input {
  flex: 1 1 240px; min-width: 0; min-height: 44px;
  background: rgba(245,239,233,0.1);
  border: 1.5px solid rgba(245,239,233,0.42);
  border-radius: var(--radius-pill);
  padding: 18px 26px;
  font-family: var(--font-body); font-size: var(--body-base); color: var(--paper);
}
/* Placeholder raised from 0.55 to 0.65 alpha: 0.55 measured 4.42:1 on
   soft-black, below the 4.5 minimum. Now 5.48:1. The visible label is
   unchanged and the placeholder remains additional to it, never instead. */
.guest-form__input::placeholder { color: rgba(245,239,233,0.65); }
/* Reserves its own height so a message does not shift the layout. */
.guest-form__status { min-height: 1.5em; font-size: var(--body-base); line-height: 1.5; color: var(--text-on-black); }
.guest-form__loading,
.guest-form__success,
.guest-form.success .guest-form__ready,
.guest-form.loading .guest-form__ready { display: none; }
.guest-form.loading .guest-form__loading,
.guest-form.success .guest-form__success { display: block; }
.guest-form__error:not(:empty) { color: var(--text-on-black); }

/* The lilac pill is this page's action colour: on soft-black, orange and
   lilac both read, and lilac is the sub-brand's own. */
.button--pill { border-radius: var(--radius-pill); background: var(--lilac); color: var(--soft-black); font-weight: 600; font-size: 11px; letter-spacing: 2.5px; padding: 18px 34px; }
.button--pill:hover { background: var(--paper); color: var(--soft-black); }
.link-cta--quiet-rule { border-bottom-color: rgba(54,54,54,0.4); }
.link-cta--quiet-rule:hover { color: var(--soft-black); border-bottom-color: var(--soft-black); }

/* ------------------------------------------------------------
   SECONDARY TEXT ON LILAC  ·  B-32
   --text-muted measures 3.13:1 on lilac and --text-body 4.21:1, both
   under the minimum. On lilac every secondary text run resolves to
   soft-black (6.59:1); the hierarchy is carried by size and weight, which
   is how it already works on the lilac grounds that carry no muted text.
   ------------------------------------------------------------ */
.ground-lilac .lead,
.ground-lilac .note,
.ground-lilac .reassurance,
.ground-lilac .fact-line__detail,
.ground-lilac .step-list__body,
.ground-lilac .centred-head__body,
.ground-lilac .brand-card__note,
.ground-lilac .media__caption,
.ground-lilac .objection-band__body,
.ground-lilac .letter__para,
.ground-lilac .byline__role,
.ground-lilac .numbered-cols__body,
.ground-lilac .type-card__job,
.ground-lilac .kind-card__body,
.ground-lilac .usecase__body { color: var(--soft-black); }

/* ------------------------------------------------------------
   MOBILE DRAWER  ·  840px. Same six items, same order, same
   hierarchy, including the account action.
   ------------------------------------------------------------ */
.nav-toggle { display: none; }
@media (max-width: 839.98px) {
  .nav-primary { display: none; }
  .nav-primary[data-open="true"] {
    display: flex; flex-direction: column; align-items: stretch;
    gap: var(--space-2); position: absolute; inset: var(--nav-height) 0 auto 0;
    background: var(--soft-black); padding: var(--space-5) var(--gutter);
    border-top: var(--border-on-black); z-index: 20;
  }
  /* DEV-16. The 44px minimum now comes from the base rule (DEV-17), so the
     drawer only changes the axis: the link fills the drawer width instead of
     hugging its label. Type sizes, destinations and button padding untouched. */
  .nav-primary__link {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .nav-primary .button--header { min-height: 44px; text-align: center; }
  .nav-toggle {
    display: inline-flex; align-items: center; gap: var(--space-2);
    background: none; border: 0; cursor: pointer;
    color: var(--text-on-black); font-family: var(--font-body);
    font-weight: var(--weight-label); font-size: var(--body-sm);
    min-height: 44px; padding-inline: var(--space-2);
  }
  .site-header__inner { position: relative; }
}