/* ===========================================================================
   CONTENT PAGES — about, contact, FAQ, policies.
   Shares the PDP's chapter rhythm so a content page never reads as a different
   site: same axis, same vertical cadence, same tint band treatment.
   =========================================================================== */

.pagewrap { display: block; }

/* ---- page hero -------------------------------------------------------------
   Constrain the TEXT, never the block that owns the alignment. `.pagehero`
   carried `max-width: 52rem` itself, which beat `.axis`'s 80rem while leaving
   its `margin-inline: auto` untouched — so the hero centred as a narrow column
   and started 248px right of the axis every other section on the page sits on
   (measured on /contact/ at 1440: hero left 304, chapter left 56). It read as
   an indented headline above a full-width form. The measure now lives on the
   h1, and the lede keeps its own 60ch. */
.pagehero { padding-block: var(--p-space-18) var(--p-space-12); }
@media (min-width: 1024px) { .pagehero { padding-block: var(--p-space-24) var(--p-space-14); } }
.pagehero--tight { padding-block: var(--p-space-14) var(--p-space-9); }
@media (min-width: 1024px) { .pagehero--tight { padding-block: var(--p-space-18) var(--p-space-10); } }
.pagehero__h1 { margin: var(--p-space-3) 0 0; max-width: 52rem; text-wrap: balance; }
.pagehero__lede { margin: var(--p-space-5) 0 0; color: var(--ink-2); max-width: 60ch; }

/* ---- chapters -------------------------------------------------------------- */
.pagechapter { padding-block: var(--p-space-14); }
@media (min-width: 1024px) { .pagechapter { padding-block: var(--p-space-20); } }
.pagechapter--tint {
  border-block: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface-2) 42%, var(--background));
}
.pagechapter__head { max-width: 44rem; margin-bottom: var(--p-space-10); }

/* A chapter that opens the page because there is no hero above it. /contact/
   absorbed its hero into the console, so the chapter's own 56/80px top padding
   would have sat the tray almost against the header. */
.pagechapter--console { padding-block: var(--p-space-10) var(--p-space-16); }
@media (min-width: 1024px) { .pagechapter--console { padding-block: var(--p-space-14) var(--p-space-24); } }

/* ---- about: image + copy --------------------------------------------------- */
.aboutgrid { display: grid; gap: var(--p-space-10); align-items: center; }
@media (min-width: 900px) { .aboutgrid { grid-template-columns: 0.9fr 1fr; gap: var(--p-space-16); } }
.aboutgrid__media { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-2xl); box-shadow: var(--elevation-card); }
.aboutgrid__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.aboutgrid__copy h2 { margin: 0 0 var(--p-space-4); }
.aboutgrid__copy p { margin: 0 0 var(--p-space-4); color: var(--ink-2); max-width: 56ch; }
.aboutgrid__copy p:last-child { margin-bottom: 0; }

/* ---- pillars ---------------------------------------------------------------
   Hairline-separated columns rather than three boxed cards: the page already
   carries enough card surfaces, and rules read quieter than containers. */
.pillars { display: grid; gap: 0; }
@media (min-width: 860px) { .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pillar {
  position: relative; padding: var(--p-space-8) 0;
  border-top: 1px solid var(--border);
}
@media (min-width: 860px) {
  .pillar { padding: 0 var(--p-space-8); border-top: none; border-left: 1px solid var(--border); }
  .pillar:first-child { padding-left: 0; border-left: none; }
  .pillar:last-child { padding-right: 0; }
}
.pillar__n {
  display: block; font-family: var(--font-mono), ui-monospace, monospace;
  font-size: var(--p-text-11); font-weight: 600; letter-spacing: var(--p-tracking-14); color: var(--brand);
}
.pillar__icon { display: block; margin: var(--p-space-4) 0 var(--p-space-3-5); color: var(--foreground); }
.pillar__icon svg { width: 1.5rem; height: 1.5rem; }
.pillar__t { margin: 0; font-size: var(--p-text-17); font-weight: 600; letter-spacing: var(--p-tracking-n10); color: var(--foreground); }
.pillar__b { margin: var(--p-space-2) 0 0; font-size: var(--p-text-15); line-height: 1.6; color: var(--ink-2); }

/* ---- contact · THE CONSOLE ---------------------------------------------------
   /contact/ used to be a left-aligned hero above a 1.35/0.65 split of white form
   and four white cards, every one of them on a white page behind a #ECF3FC
   hairline. Measured at 1440 the page painted exactly two surfaces — the submit
   button and the site header — and carried ~200px of dead air between the lede
   and the first field, because `.pagehero` and `.pagechapter` are separate
   sections that know nothing about each other. It read as unstyled. The note
   that started this rewrite was "extremely hard to read, zero depth."

   The fix is structural, not cosmetic: ONE object instead of six. A tint tray
   holds two panels 6px apart — a deep-blue DESK carrying the headline and the
   facts, and a raised white INTAKE panel carrying the form. That is three
   elevation steps (page -> tray -> panels) where there were none, and it puts a
   blue-800 ground behind the headline so the type is legible AGAINST something
   rather than merely on it. The hero is gone as a separate section; absorbing it
   into the desk is what removes the void, and no amount of padding tuning could
   have.

   RADII ARE CONCENTRIC. The tray is --radius-panel (24px) with 6px of padding,
   so the inner panels are 24 - 6 = 18px. Equal radius on parent and child is the
   single commonest thing that makes nested surfaces read as pasted together.
   --------------------------------------------------------------------------- */
.contact {
  padding: var(--p-space-1-5);
  border-radius: var(--radius-panel);
  /* THE STAGE IS THE DARK ONE. First pass made the tray a pale tint holding a
     dark rail and a white panel; on a white page a 64%-of-#F0F6FD tray is
     indistinguishable from the ground, so the bezel it was there to draw did
     not exist and the intake panel read as floating loose. Inverting it — deep
     blue tray, white slab dropped into it — is what actually produces the
     contrast this page was missing, and it costs a surface rather than adding
     one. */
  background: var(--surface-ink);
  /* Lit from the top-left. A single wide cupric wash is what stops blue-800
     reading as a flat rectangle of paint at 1268px across. */
  background-image: radial-gradient(105% 120% at 0% 0%,
    color-mix(in oklab, var(--brand) 42%, transparent) 0%, transparent 62%);
  overflow: hidden;
}
.contact__inner { display: grid; gap: var(--p-space-1-5); align-items: stretch; }
@media (min-width: 960px) {
  /* 0.86 / 1.14, not 1.35 / 0.65. The proportion states the relationship: the
     desk introduces, the form is the work. The old ratio said the opposite of
     what the page is for and still left the aside too narrow to hold a line. */
  .contact__inner { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); }
}

/* ---- the desk --------------------------------------------------------------- */
/* The rail paints nothing — it is content ON the stage, which is why the stage
   had to become the dark surface rather than a frame around one. */
.contact__rail {
  display: flex; flex-direction: column;
  padding: var(--p-space-6) var(--p-space-5) var(--p-space-8);
  color: var(--brand-foreground);
}
@media (min-width: 960px) { .contact__rail { padding: var(--p-space-10) var(--p-space-9) var(--p-space-10) var(--p-space-8); } }

/* 21rem forces the break. display-lg tops out at 60px, and "Talk to a person."
   set solid is 446px — one pixel under the rail's 469px measure, so it filled
   the column edge-to-edge and read as crowding the intake panel rather than
   opening the page. Two lines is the shape this headline wants. */
.contact__h1 { margin: 0; max-width: 21rem; color: var(--brand-foreground); text-wrap: balance; }
.contact__lede {
  margin: var(--p-space-4) 0 0; max-width: 36ch;
  color: var(--on-dark-ink); text-wrap: pretty;
}

.contact__facts { margin: var(--p-space-8) 0 0; }
.contact__fact { padding: var(--p-space-4) 0; border-top: 1px solid var(--on-dark-line); }
.contact__fact-k { margin: 0; color: var(--on-dark-ink); }
.contact__fact-v { margin: var(--p-space-2) 0 0; color: var(--brand-foreground); }

.contact__email {
  display: inline-block; margin: var(--p-space-2) 0 0;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: var(--p-text-14); font-weight: 500;
  color: var(--brand-foreground); overflow-wrap: anywhere;
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: color-mix(in oklab, var(--brand-foreground) 38%, transparent);
  transition: text-decoration-color 150ms var(--ease-default);
}
.contact__email:hover, .contact__email.is-hover { text-decoration-color: var(--brand-foreground); }

/* What happens after you press send. The NUMERAL is bright and the prose is
   quiet, which is the brand law's own inversion: mono is the evidence face, so
   the counter is the thing that reads as a fact and the sentence supports it. */
.contact__steps { margin: 0; padding: 0; list-style: none; counter-reset: contact-step; }
.contact__step {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--p-space-3-5); align-items: baseline;
  padding: var(--p-space-2-5) 0;
  color: var(--on-dark-ink);
}
.contact__step::before {
  counter-increment: contact-step;
  content: counter(contact-step, decimal-leading-zero);
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: var(--p-text-11); font-weight: 500; letter-spacing: var(--p-tracking-6);
  color: var(--brand-foreground);
}

/* A DEFINITE gap, not `margin-top: auto`. Bottom-pinning this block to the
   panel floor looked right in the default state and fell apart in the sent
   one: the success notice adds ~110px to the intake, the rail stretches to
   match, and every pixel of that lands in one hole between "Hours" and "What
   happens next". Fixed spacing keeps the desk a tight column and lets the
   surplus fall as open stage below it, where dark negative space reads as
   deliberate rather than as a gap in a list. */
.contact__rail-foot { margin-top: var(--p-space-10); }

/* ---- the intake panel -------------------------------------------------------- */
.contact__intake {
  display: flex; flex-direction: column;
  padding: var(--p-space-7);
  border-radius: calc(var(--radius-panel) - var(--p-space-1-5));
  background: var(--card);
  box-shadow: var(--elevation-panel);
}
@media (min-width: 960px) { .contact__intake { padding: var(--p-space-10); } }
.contact__intake-head {
  margin-bottom: var(--p-space-7); padding-bottom: var(--p-space-5);
  border-bottom: 1px solid var(--border);
}
.contact__intake-head h2 { margin: 0; color: var(--foreground); }
.contact__intake-head p { margin: var(--p-space-2) 0 0; color: var(--ink-2); }

/* ---- the form ---------------------------------------------------------------- */
/* THE MESSAGE BOX ABSORBS THE SLACK. The desk column is naturally taller than
   the form, and with `align-items: stretch` the intake panel used to stretch to
   match and park ~120px of nothing under the send row — the same dead air this
   rewrite exists to remove, moved rather than removed. Four explicit rows, the
   third of them 1fr, so the growth lands in the textarea where it is useful.
   The honeypot is position:absolute and the nonce is type=hidden, so neither
   generates a box and neither claims a track. */
.cform { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: var(--p-space-5); flex: 1; }
.cform__row { display: grid; gap: var(--p-space-5); }
@media (min-width: 560px) { .cform__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--p-space-4); } }
.cform__field { display: flex; flex-direction: column; gap: var(--p-space-2); min-height: 0; }
.cform__label {
  display: flex; align-items: baseline; gap: var(--p-space-2);
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: var(--p-text-11); font-weight: 500;
  letter-spacing: var(--p-tracking-6); text-transform: uppercase; color: var(--ink-3);
}
.cform__opt { text-transform: none; letter-spacing: var(--p-tracking-0); color: var(--ink-4); }

/* THE WELL. A field on a white panel used to be white with a --border hairline,
   which is to say invisible: same fill as its parent, edged in the faintest
   line in the system. An input RECEIVES content, so it is inset — the fill
   declares the field and the border can then stop shouting. Scoped to .cform on
   purpose; checkout and account share `.control` and are not part of this
   change. */
.cform .control {
  background: var(--control-fill);
  border-color: color-mix(in oklab, var(--border-strong) 72%, transparent);
  /* The vertical's form baseline gives every control a 1px drop shadow. A well
     is INSET; a drop shadow says the opposite, and the two together read as a
     tile rather than a field. Killed here, and the focus ring is restated below
     because removing the shadow removes the ring with it. */
  box-shadow: none;
}
.cform .control:hover, .cform .control.is-hover { border-color: var(--border-hover); }
/* Both states, not just :focus-visible. verticals/skincare pins the ring on
   plain `:focus` at (0,1,1); `.cform .control` is (0,2,0) and wins the
   box-shadow fight, so a click-focused select would otherwise have no ring at
   all — visible to a mouse user, gone. */
.cform .control:focus,
.cform .control:focus-visible,
.cform .control.is-focus {
  background: var(--background);
  border-color: var(--ring); outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 22%, transparent);
}
.cform .control::placeholder { color: var(--ink-4); }

/* Native selects cannot be styled, so the arrow is ours and the control's is
   suppressed. Without appearance:none the OS chevron sits on top of the tinted
   well and reads as a second, misaligned control. */
.cform__select { position: relative; display: block; }
/* `.cform .control` sets the `background` SHORTHAND, which is what clears the
   data-URI chevron :where(select) paints in verticals/skincare — otherwise the
   field carries two arrows, theirs and ours, three pixels apart. */
.cform__select .control { appearance: none; -webkit-appearance: none; padding-inline-end: var(--p-space-9); }
.cform__select svg {
  position: absolute; inset-inline-end: var(--p-space-3-5); inset-block-start: 50%;
  width: 1rem; height: 1rem; translate: 0 -50%;
  color: var(--ink-3); pointer-events: none;
}
.cform__area { height: 100%; min-height: 9.5rem; resize: vertical; padding: var(--p-space-3) var(--p-space-3-5); line-height: 1.55; }
/* honeypot — off-screen rather than display:none, which some bots detect */
.cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cform__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--p-space-4);
  padding-top: var(--p-space-6);
  border-top: 1px solid var(--border);
}
.cform__note { margin: 0; max-width: 32ch; color: var(--ink-3); }
/* Below 560 the foot wraps and the pill would sit alone on a half-width line.
   A submit button on a phone is the whole point of the panel — give it the
   width. */
@media (max-width: 559px) {
  /* `justify-content: space-between` comes from the flex rule above and does NOT
     stop applying when the container becomes a grid — in a grid it sizes and
     DISTRIBUTES THE TRACKS, so the single auto column resolved to the button's
     max-content (242px inside a 290px row on a 390px phone) and `width: 100%`
     dutifully filled a column that was already too narrow. Reset it to normal,
     which for a grid container means stretch. Measured on the live page. */
  .cform__foot { display: grid; justify-content: normal; }
  .cform .cform__send { width: 100%; justify-content: space-between; }
}

/* Every :hover / :focus-visible above also matches .is-hover / .is-focus, the
   convention primitives.css sets: a specimen sheet that restates a component's
   declarations is a specimen sheet that drifts from it.
   Button-in-button: the arrow never sits naked beside the label, it rides in its
   own well flush with the pill's inner edge. The nested circle is what gives the
   press somewhere to travel on hover. */
/* `.cform .cform__send`, not `.cform__send`: the vertical's `.btn--xl` is also
   (0,1,0) and loads after this sheet, so a single class here loses the padding
   and the arrow well sits flush against the pill's edge. */
.cform .cform__send { gap: var(--p-space-3); padding-inline-end: var(--p-space-2); }
.cform__send-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: var(--p-radius-circle);
  background: color-mix(in oklab, var(--brand-foreground) 18%, transparent);
  transition: transform 200ms var(--ease-default), background-color 200ms var(--ease-default);
}
.cform .cform__send:hover .cform__send-i,
.cform .cform__send.is-hover .cform__send-i {
  transform: translateX(2px);
  background: color-mix(in oklab, var(--brand-foreground) 30%, transparent);
}
.cform__send-i svg { width: 0.9375rem; height: 0.9375rem; }
@media (prefers-reduced-motion: reduce) { .cform .cform__send:hover .cform__send-i { transform: none; } }

/* ---- faster routes ------------------------------------------------------------
   Ruled rows, not a third rank of boxes. The console above is dense and
   enclosed; this band is open and hairline-separated, so the eye gets a change
   of rhythm instead of a fourth identical card surface. */
/* .ms-reveal lives on THIS band, not on the console. `html.ms-js .ms-reveal`
   is opacity:0 until storefront.js fires, and the console is the page — a
   contact form that is blank until JS lands is a contact form nobody sends.
   The routes are below the fold, which is what the reveal is for. */
.contact__routes {
  display: grid; gap: var(--p-space-2);
  margin-top: var(--p-space-12); padding-top: var(--p-space-6);
  border-top: 1px solid var(--border);
}
@media (min-width: 780px) { .contact__routes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--p-space-4); } }
.contact__route {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--p-space-4);
  padding: var(--p-space-4) var(--p-space-4);
  border-radius: var(--radius-card);
  color: inherit; text-decoration: none;
  transition: background-color 200ms var(--ease-default);
}
.contact__route:hover, .contact__route.is-hover { background: color-mix(in oklab, var(--surface-2) 78%, var(--background)); }
.contact__route:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 30%, transparent);
}
.contact__route-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--p-space-11); height: var(--p-space-11);
  border-radius: var(--radius-control);
  background: var(--brand-muted); color: var(--brand);
}
.contact__route-i svg { width: 1.125rem; height: 1.125rem; }
.contact__route-t { display: block; margin: 0; color: var(--foreground); }
.contact__route-b { display: block; margin: var(--p-space-1) 0 0; max-width: 46ch; color: var(--ink-2); text-wrap: pretty; }
.contact__route-go {
  color: var(--ink-4);
  transition: transform 200ms var(--ease-default), color 200ms var(--ease-default);
}
.contact__route-go svg { width: 1.125rem; height: 1.125rem; }
.contact__route:hover .contact__route-go,
.contact__route.is-hover .contact__route-go { transform: translateX(3px); color: var(--brand); }
@media (prefers-reduced-motion: reduce) { .contact__route:hover .contact__route-go { transform: none; } }

/* ---- notices ---------------------------------------------------------------- */
.notice {
  display: flex; align-items: flex-start; gap: var(--p-space-2-5);
  padding: var(--p-space-3-5) var(--p-space-4); margin-bottom: var(--p-space-6);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface);
}
.notice div { display: flex; flex-direction: column; gap: var(--p-space-0-5); }
.notice strong { font-size: var(--p-text-15); color: var(--foreground); }
.notice span { font-size: var(--p-text-14); color: var(--ink-2); }
.notice svg { flex-shrink: 0; margin-top: var(--p-space-0-5); }
.notice--ok  { border-color: color-mix(in oklab, var(--stock-in) 35%, transparent); background: color-mix(in oklab, var(--stock-in) 7%, transparent); }
.notice--ok svg { color: var(--stock-in); }
.notice--bad { border-color: color-mix(in oklab, var(--destructive, #c0392b) 35%, transparent); background: color-mix(in oklab, var(--destructive, #c0392b) 6%, transparent); }
.notice--bad svg { color: var(--destructive, #c0392b); }

/* ---- FAQ page ---------------------------------------------------------------- */

/* ONE MEASURE GOVERNS THE PAGE. The old build put a 48rem centred column under
   a hero that started at the page axis, so nothing on the page shared a left
   edge — measured at 1440 the hero began at x=128 and the questions at x=478,
   and it read as an indented list floating beside a headline. Everything now
   hangs off the axis on the left and terminates on --faq-measure on the right:
   the hero's closing rule, every group rule, and the closing band. The value is
   the sum of the register's own columns, so a group rule ends exactly where its
   last question does rather than overshooting it by ~210px. */
.pagewrap--faq { --faq-measure: 68rem; }
.pagewrap--faq .faqpage,
.pagewrap--faq .faqpage__tools,
.pagewrap--faq .pageclose { max-width: var(--faq-measure); }

/* ---- the hero tool row ------------------------------------------------------ */
.faqpage__tools {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--p-space-4); flex-wrap: wrap;
  margin-top: var(--p-space-8); padding-top: var(--p-space-6);
  border-top: 1px solid var(--border);
}
/* No JS, no filtering — so no field to type into. */
html:not(.ms-js) .faqpage__tools { display: none; }
.faqpage__tally {
  flex-shrink: 0; margin: 0;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: var(--p-text-12); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--ink-4); font-variant-numeric: tabular-nums;
}
.faqpage__tally b { font-weight: 600; color: var(--ink-2); }

/* The hero's own bottom padding plus a full chapter's top padding left 120px of
   nothing between the filter and the first question. The filter belongs to the
   register, so the register opens closer to it. */
.pagechapter--register { padding-block-start: var(--p-space-10); }

/* ---- the register ----------------------------------------------------------
   Two columns under one rule: the topic names the chapter from the left rail
   and sticks while its own questions scroll past, so "which section am I in" is
   answered by the layout rather than by a jump-nav that has to be kept in sync
   with it. The rule spans both columns, which is what makes the topic and the
   first question read as one block instead of two stray items. */
.faqpage { margin-inline: 0; }
.faqpage__group { border-top: 1px solid var(--border); padding-top: var(--p-space-5); }
.faqpage__group + .faqpage__group { margin-top: var(--p-space-12); }
.faqpage__aside { margin-bottom: var(--p-space-4); }
/* The scale comes from .title-xl in the markup — the topic is a heading on the
   ladder, not a bespoke size. This rule only unwinds the old mono micro-label
   the class used to carry. */
.faqpage__title { margin: 0; padding-bottom: 0; border-bottom: 0; text-transform: none; }
.faqpage__note {
  margin: var(--p-space-2) 0 0;
  font-size: var(--p-text-15); line-height: 1.5; color: var(--ink-3);
  text-wrap: pretty;
}
/* The group's own rule IS the list's top rule; a second one 20px below read as
   a mistake. */
.faqpage__group .ms-faq__list { margin-top: 0; border-top: 0; }

@media (min-width: 1024px) {
  .faqpage__group {
    display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    column-gap: var(--p-space-14); align-items: start;
  }
  .faqpage__group + .faqpage__group { margin-top: var(--p-space-16); }
  /* DOCKED BELOW THE WHOLE CHROME, NOT --site-header-h.
     That token is the HEADER's height; the topbar rides sticky with it rather
     than scrolling away, so the real docking line is ~33px lower. Measured on
     the live /faq/ 2026-08-21: sticky template part bottom 114, --site-header-h
     80. `+ var(--p-space-8)` therefore pinned the topic title at 112 — two
     pixels UNDER the header, with none of the intended air. The step here
     clears the full chrome and still reads as deliberate spacing on a store
     that has turned the topbar off. */
  .faqpage__aside {
    position: sticky; top: calc(var(--site-header-h) + var(--p-space-16));
    margin-bottom: 0;
  }
}

/* ---- filtered-out groups and the empty state -------------------------------- */
.faqpage__group[hidden] { display: none; }
.faqpage__empty {
  padding: var(--p-space-12) var(--p-space-6);
  border: 1px dashed var(--border-strong); border-radius: var(--radius-card);
  background: color-mix(in oklab, var(--brand) 4%, var(--card));
  text-align: center;
}
.faqpage__empty p { margin: 0; color: var(--ink-2); font-size: var(--p-text-16); }
.faqpage__empty .ms-textlink { margin-top: var(--p-space-3); }

/* ---- policy pages ------------------------------------------------------------ */
.policy { max-width: 44rem; }
.policy__updated {
  margin: var(--p-space-4) 0 0; font-family: var(--font-mono), ui-monospace, monospace;
  font-size: var(--p-text-11); letter-spacing: var(--p-tracking-6); text-transform: uppercase; color: var(--ink-4);
}
.policy__section + .policy__section { margin-top: var(--p-space-10); }
.policy__h2 {
  margin: 0 0 var(--p-space-3); font-size: var(--p-text-18); font-weight: 600;
  letter-spacing: var(--p-tracking-n10); color: var(--foreground);
}
.policy__p { margin: 0 0 var(--p-space-3-5); font-size: var(--p-text-15); line-height: 1.7; color: var(--ink-2); max-width: 68ch; }
.policy__p:last-child { margin-bottom: 0; }

/* ---- shared closing band ------------------------------------------------------ */
.pagechapter--close { padding-bottom: var(--p-space-20); }
.pageclose {
  display: grid; gap: var(--p-space-6); align-items: center;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: var(--radius-2xl); background: var(--surface-ink);
}
@media (min-width: 780px) { .pageclose { grid-template-columns: minmax(0, 1fr) auto; gap: var(--p-space-10); } }
.pageclose__title {
  margin: 0; font-size: clamp(1.375rem, 2.6vw, 1.875rem); font-weight: 600;
  letter-spacing: var(--p-tracking-n20); line-height: 1.15; color: var(--brand-foreground); text-wrap: balance;
}
.pageclose__sub { margin: var(--p-space-2-5) 0 0; max-width: 52ch; line-height: 1.6; color: color-mix(in oklab, var(--brand-foreground) 72%, transparent); }

/* Unresolved-placeholder notice — deliberately plain and slightly alarming,
   because it should be uncomfortable enough to get the fields filled in. */
.ms-draftnotice {
  border: 1px solid var(--warning);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--warning-tint) 10%, transparent);
  padding: var(--p-space-4) 1.15rem;
  margin: 0 0 var(--p-space-7);
}
.ms-draftnotice p { margin: 0; font-size: var(--p-text-15); line-height: 1.6; color: var(--ink-2); }