/* ===========================================================================
   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: 4.5rem 3rem; }
@media (min-width: 1024px) { .pagehero { padding-block: 6rem 3.5rem; } }
.pagehero--tight { padding-block: 3.5rem 2.25rem; }
@media (min-width: 1024px) { .pagehero--tight { padding-block: 4.5rem 2.5rem; } }
.pagehero__h1 { margin: 0.75rem 0 0; max-width: 52rem; text-wrap: balance; }
.pagehero__lede { margin: 1.25rem 0 0; color: var(--ink-2); max-width: 60ch; }

/* ---- chapters -------------------------------------------------------------- */
.pagechapter { padding-block: 3.5rem; }
@media (min-width: 1024px) { .pagechapter { padding-block: 5rem; } }
.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: 2.5rem; }

/* ---- about: image + copy --------------------------------------------------- */
.aboutgrid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .aboutgrid { grid-template-columns: 0.9fr 1fr; gap: 4rem; } }
.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 1rem; }
.aboutgrid__copy p { margin: 0 0 1rem; 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: 2rem 0;
  border-top: 1px solid var(--border);
}
@media (min-width: 860px) {
  .pillar { padding: 0 2rem; 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: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; color: var(--brand);
}
.pillar__icon { display: block; margin: 1rem 0 0.875rem; color: var(--foreground); }
.pillar__icon svg { width: 1.5rem; height: 1.5rem; }
.pillar__t { margin: 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; color: var(--foreground); }
.pillar__b { margin: 0.5rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-2); }

/* ---- contact ---------------------------------------------------------------- */
.contact { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .contact { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: 4rem; } }
.cform__row { display: grid; gap: 0.875rem; }
@media (min-width: 560px) { .cform__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } }
.cform__field { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 1rem; }
.cform__row .cform__field { margin-bottom: 0; }
.cform__row { margin-bottom: 1rem; }
.cform__label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}
.cform__opt { text-transform: none; letter-spacing: 0; color: var(--ink-4); }
.cform__area { min-height: 9rem; resize: vertical; padding: 0.6875rem 0.8125rem; 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; }

.contact__side { display: flex; flex-direction: column; gap: 0.875rem; }
.contact__card {
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: var(--card);
}
.contact__card--quiet { background: transparent; border-style: dashed; }
.contact__email {
  display: inline-block; margin-top: 0.4375rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.875rem; font-weight: 600; color: var(--foreground);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklab, var(--brand) 45%, transparent);
  overflow-wrap: anywhere;
}
.contact__email:hover { color: var(--brand); }
.contact__line { margin: 0.4375rem 0 0; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); }
.contact__card .ms-textlink { margin-top: 0.75rem; }

/* ---- notices ---------------------------------------------------------------- */
.notice {
  display: flex; align-items: flex-start; gap: 0.625rem;
  padding: 0.875rem 1rem; margin-bottom: 1.5rem;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface);
}
.notice div { display: flex; flex-direction: column; gap: 0.125rem; }
.notice strong { font-size: 0.9375rem; color: var(--foreground); }
.notice span { font-size: 0.875rem; color: var(--ink-2); }
.notice svg { flex-shrink: 0; margin-top: 0.125rem; }
.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 ---------------------------------------------------------------- */
.faqpage { max-width: 48rem; margin-inline: auto; }
.faqpage__group + .faqpage__group { margin-top: 3rem; }
.faqpage__title {
  margin: 0 0 1rem; font-size: 0.6875rem; font-weight: 600;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
  padding-bottom: 0.75rem; border-bottom: 1px solid var(--border);
}

/* ---- policy pages ------------------------------------------------------------ */
.policy { max-width: 44rem; }
.policy__updated {
  margin: 1rem 0 0; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4);
}
.policy__section + .policy__section { margin-top: 2.5rem; }
.policy__h2 {
  margin: 0 0 0.75rem; font-size: 1.125rem; font-weight: 600;
  letter-spacing: -0.01em; color: var(--foreground);
}
.policy__p { margin: 0 0 0.875rem; font-size: 0.9375rem; line-height: 1.7; color: var(--ink-2); max-width: 68ch; }
.policy__p:last-child { margin-bottom: 0; }
.policy__p strong { color: var(--foreground); font-weight: 600; }
.policy__p a, .policy__ul a { color: var(--accent); text-underline-offset: 0.2em; }

.policy__ul { margin: 0 0 0.875rem; padding-left: 1.15rem; max-width: 68ch; }
.policy__ul li {
  margin: 0 0 0.5rem; font-size: 0.9375rem; line-height: 1.7; color: var(--ink-2);
}
.policy__ul li::marker { color: var(--ink-4); }

/* ---- contents rail -------------------------------------------------------------
   Only rendered for documents of 8+ sections. Sticky on desktop so the reader
   keeps their place in a long document; a plain block on mobile, where a
   position:sticky rail would eat the viewport it is meant to help navigate. */
.policy--toc { max-width: 68rem; }
.policy__toc { margin-bottom: 2.5rem; }
.policy__toctitle {
  margin: 0 0 0.75rem; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3);
  padding-bottom: 0.75rem; border-bottom: 1px solid var(--border);
}
.policy__toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.policy__toc li { counter-increment: toc; margin: 0 0 0.4rem; }
.policy__toc a {
  display: flex; gap: 0.6rem; font-size: 0.875rem; line-height: 1.5;
  color: var(--ink-3); text-decoration: none;
}
.policy__toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6875rem; color: var(--ink-4); padding-top: 0.15em;
}
.policy__toc a:hover { color: var(--accent); }

@media (min-width: 1024px) {
  .policy--toc {
    display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 4rem; align-items: start;
  }
  .policy--toc .policy__toc { position: sticky; top: 6rem; margin-bottom: 0; }
}

/* Anchor targets sit under the sticky header without this. */
.policy__section { scroll-margin-top: 6rem; }

/* ---- tables --------------------------------------------------------------------
   The processor and legal-basis tables are the densest thing on any policy page
   and the first to break a narrow viewport. The wrapper scrolls rather than the
   document, so a long "what they receive" cell can never push the page sideways. */
.policy__tablewrap { margin: 0 0 0.875rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.policy__table {
  width: 100%; min-width: 34rem; border-collapse: collapse;
  font-size: 0.875rem; line-height: 1.6;
}
.policy__table th, .policy__table td {
  text-align: left; padding: 0.7rem 0.9rem 0.7rem 0;
  border-bottom: 1px solid var(--border); vertical-align: top;
}
.policy__table th {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
}
.policy__table td { color: var(--ink-2); }
.policy__table td code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.8125rem; color: var(--foreground); word-break: break-word;
}
.policy__table tr:last-child td { border-bottom: 0; }

/* ---- other policies ------------------------------------------------------------ */
.policy__related { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.policy__relatedtitle {
  margin: 0 0 1rem; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3);
}
.policy__related ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
@media (min-width: 720px) { .policy__related ul { grid-template-columns: 1fr 1fr; } }
.policy__related a {
  display: block; padding: 0.85rem 1rem; border: 1px solid var(--border);
  border-radius: var(--radius); text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.policy__related a:hover { border-color: var(--accent); background: var(--surface-2); }
.policy__relatedname { display: block; font-size: 0.9375rem; font-weight: 600; color: var(--foreground); }
.policy__relatedsum { display: block; margin-top: 0.2rem; font-size: 0.8125rem; line-height: 1.5; color: var(--ink-3); }

/* ---- shared closing band ------------------------------------------------------ */
.pagechapter--close { padding-bottom: 5rem; }
.pageclose {
  display: grid; gap: 1.5rem; 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: 2.5rem; } }
.pageclose__title {
  margin: 0; font-size: clamp(1.375rem, 2.6vw, 1.875rem); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.15; color: var(--p-neutral-0); text-wrap: balance;
}
.pageclose__sub { margin: 0.625rem 0 0; max-width: 52ch; line-height: 1.6; color: color-mix(in oklab, var(--p-neutral-0) 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(--p-amber-600);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--p-amber-400) 10%, transparent);
  padding: 1rem 1.15rem;
  margin: 0 0 1.75rem;
}
.ms-draftnotice p { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--ink-2); }
/* Naming the outstanding fields turns "something is unfinished" into "these
   three facts are unfinished" — the reader can judge whether it affects them. */
.ms-draftnotice__list {
  margin-top: 0.6rem !important;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6875rem !important; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3) !important;
}