/* ═══════════════════════════════════════════════════════════════════════
   maliniapp.co.za — the waiting-list landing page.

   Every value here comes from tokens/*.css. If you find yourself typing a
   hex, a radius or a duration, it belongs in a token file instead — the
   design system is the source of truth, not this file.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── base ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box }
html, body { margin: 0; padding: 0 }
html { scroll-behavior: smooth }

body {
  background: var(--surface-field);
  color: var(--text-strong);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Paper grain — the most identifying texture in the brand. Fixed, full
   viewport, multiplied into the field. Content sits above it. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: var(--texture-grain);
  opacity: var(--texture-grain-opacity);
  mix-blend-mode: multiply;
}
body > * { position: relative; z-index: 2 }

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0 }
ul, ol { padding: 0; list-style: none }
img, svg { display: block; max-width: 100% }

a { color: var(--text-link); text-decoration: none }
a:hover { color: var(--text-link-hover); text-decoration: underline;
          text-decoration-thickness: 1px; text-underline-offset: 3px }

b, strong { font-weight: var(--weight-bold); color: var(--text-strong) }

:focus-visible {
  outline: 2px solid var(--moss);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.skip {
  position: absolute; left: var(--space-2); top: var(--space-2);
  z-index: 99; padding: var(--space-4) var(--space-6);
  background: var(--surface-ink); color: var(--text-on-ink);
  border-radius: var(--radius-md); font-size: var(--size-body-xs);
  transform: translateY(-200%);
}
.skip:focus { transform: none; color: var(--text-on-ink) }

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

/* ── layout shell ────────────────────────────────────────────────────── */
.wrap { max-width: 640px; margin: 0 auto; padding: 0 var(--gutter); position: relative }
@media (min-width: 780px) { .wrap { max-width: 1080px; padding: 0 40px } }

.sec { padding: 52px 0 }
@media (min-width: 780px) { .sec { padding: var(--section-y-wide) 0 } }
.sec--flush { padding-bottom: 0 }

.band {
  background: var(--surface-field-alt);
  margin: 0 calc(var(--gutter) * -1);
  padding: var(--space-13) var(--gutter);
  border-top: var(--border-hair);
  border-bottom: var(--border-hair);
}
@media (min-width: 780px) { .band { margin: 0 -40px; padding: var(--section-y) 40px } }

/* The shell is wide; the measure is not. */
.col { max-width: 720px }
.rule { border-top: var(--border-hair) }

.hero-grid { display: grid; gap: var(--space-10); align-items: start }
@media (min-width: 980px) { .hero-grid { grid-template-columns: 1.02fr 0.98fr; gap: var(--space-13) } }

.three { display: grid; gap: 0 var(--space-12) }
@media (min-width: 980px) { .three { grid-template-columns: repeat(3, 1fr) } }

.two { display: grid; gap: 0 var(--space-13) }
@media (min-width: 980px) { .two { grid-template-columns: 1fr 1fr } }

/* ── shared type utilities ───────────────────────────────────────────── */
.mono {
  font-family: var(--font-mono);
  font-size: var(--size-label-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.kicker { margin-bottom: var(--space-4) }
.prose {
  font-size: var(--size-body);
  line-height: var(--leading-prose);
  color: var(--text-body);
  max-width: var(--measure-prose);
  margin-top: var(--space-8);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--size-label-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-body);
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.eyebrow::before {
  content: ""; flex: none;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 7px solid var(--terracotta);
}
.eyebrow--ochre { color: var(--text-on-ink-accent) }
.eyebrow--ochre::before { border-bottom-color: var(--ochre) }

/* ── chevron course · Great Zimbabwe stone frieze ────────────────────── */
.chevron {
  height: var(--chevron-h);
  background: var(--pattern-chevron);
  opacity: 0.65;
}
.chevron--soft { opacity: 0.45 }
.chevron--gold { background: var(--pattern-chevron-gold); opacity: 0.7 }

/* ── masthead ────────────────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; gap: var(--space-8);
  flex-wrap: wrap;
  padding: var(--space-9) 0 var(--space-7);
  border-bottom: var(--border-hair);
}
.topbar__brand { display: flex; align-items: center; gap: var(--space-4); color: var(--text-strong) }
.topbar__brand:hover { text-decoration: none; color: var(--text-strong) }
.seal { width: 20px; height: 20px; color: var(--terracotta); flex: none }
.topbar__word {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: 21px;
  letter-spacing: var(--track-tight);
}
.topbar__nav { display: flex; gap: var(--space-7); flex-wrap: wrap; margin-right: auto }
.topbar__nav a {
  font-size: var(--size-body-xs);
  color: var(--text-body);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.topbar__nav a:hover {
  text-decoration: none;
  color: var(--text-strong);
  border-bottom-color: var(--charcoal);
}
.topbar__tag { font-size: var(--size-label-xs); letter-spacing: var(--track-label-wide) }
@media (max-width: 600px) { .topbar__tag { display: none } }

/* ── actions ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: var(--weight-bold);
  line-height: 1.2;
  padding: var(--space-6) var(--space-8);
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-stone);
  transition: background var(--dur-hover) var(--ease-default),
              color var(--dur-hover) var(--ease-default),
              transform var(--dur-press) var(--ease-default),
              box-shadow var(--dur-press) var(--ease-default);
}
.btn:hover { text-decoration: none }
.btn:active { transform: var(--press-offset); box-shadow: none }

.btn--primary {
  background: var(--action-primary-bg);
  color: var(--action-primary-fg);
  box-shadow: var(--shadow-lip);
}
.btn--primary:hover { background: var(--action-primary-bg-hover); color: var(--action-primary-fg) }

.btn--accent {
  background: var(--action-accent-bg);
  color: var(--action-accent-fg);
  box-shadow: var(--shadow-lip-accent);
}
.btn--accent:hover { background: color-mix(in oklab, var(--ochre) 88%, var(--charcoal)); color: var(--action-accent-fg) }

/* A text action on ink — no fill, no lip. */
.btn--ghost-ink {
  background: none; padding: 0; border-radius: 0;
  color: var(--text-on-ink-accent);
  font-weight: var(--weight-medium);
  box-shadow: none;
}
.btn--ghost-ink:hover {
  color: color-mix(in oklab, var(--ochre) 80%, var(--bone));
  text-decoration: underline; text-underline-offset: 3px;
}
.btn--ghost-ink:active { transform: none }

/* On ink, the moss ring disappears — the ochre one does not. */
.closing :focus-visible, .inkpanel :focus-visible, .tier--featured :focus-visible {
  outline-color: var(--ochre);
}

.field {
  flex: 1 1 200px;
  min-width: 200px;
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--text-strong);
  background: var(--surface-raised);
  border: var(--border-firm);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-7);
}
.field::placeholder { color: var(--text-faint) }
.field[aria-invalid="true"] { border-color: var(--terracotta) }

/* ── the waiting-list capture ────────────────────────────────────────── */
.join { margin-top: var(--space-2) }
.join__label { margin-bottom: var(--space-4) }
.join__row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: flex-start }
.join__row .btn { border-radius: var(--radius-md) }
.join__note {
  margin: var(--space-5) 2px 0;
  font-size: var(--size-meta);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 48ch;
}
.join__error {
  margin: var(--space-4) 2px 0;
  font-size: var(--size-meta);
  line-height: 1.5;
  color: var(--terracotta);
  max-width: 48ch;
}
.join__error--ink { color: var(--ochre) }

.join__done {
  padding: var(--space-7) var(--space-7);
  border-radius: var(--radius-md);
  border: var(--border-firm);
  background: var(--surface-raised);
}
.join__done-kicker { color: var(--text-accent); margin-bottom: var(--space-2) }
.join__done-body {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  line-height: 1.35;
  color: var(--text-body);
}

/* ── pills ───────────────────────────────────────────────────────────── */
.pills { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-9) }
.pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-5);
  font-size: var(--size-label);
  color: var(--text-body);
}
.pill::before {
  content: ""; flex: none;
  width: 0; height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-bottom: 6px solid var(--terracotta);
}
.pill--moss::before { border-bottom-color: var(--moss) }
.pill--quiet::before { border-bottom-color: var(--soapstone) }

/* ── 01 · hero ───────────────────────────────────────────────────────── */
.hero { padding: var(--space-11) 0 }

.vernacular { margin: 0 0 var(--space-7) }
.vernacular__btn {
  display: block; padding: 0; border: 0; background: none; cursor: pointer;
  text-align: left; color: inherit;
  border-radius: var(--radius-xs);
}
.vernacular__phrase {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-body);
  font-size: 23px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--text-faint);
}
.vernacular__btn:hover .vernacular__phrase { color: var(--text-muted) }
/* The gloss is rendered, never hidden behind a picker. */
.vernacular__gloss {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--size-meta);
  line-height: 1.4;
  color: var(--text-muted);
}

.hero__h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-display-strong);
  font-size: clamp(40px, 9.4vw, 60px);
  line-height: var(--leading-hero);
  letter-spacing: var(--track-hero);
  margin-bottom: var(--space-8);
  max-width: 15ch;
}
.hero__h1 span { display: block }
.hero__h1 em {
  font-style: italic;
  font-weight: var(--weight-medium);
  color: var(--terracotta);
}
.hero__lede {
  font-size: 17px;
  line-height: var(--leading-body);
  color: var(--text-body);
  margin-bottom: var(--space-7);
  max-width: var(--measure-prose);
}
.hero__price {
  font-size: var(--size-body);
  font-weight: var(--weight-medium);
  line-height: 1.45;
  color: var(--text-body);
  margin-bottom: var(--space-9);
  max-width: var(--measure-prose);
}

/* ── the proof artefact ──────────────────────────────────────────────── */
.proof {
  display: flex; flex-wrap: wrap;
  border: var(--border-firm);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-field-alt);
}
.proof__before, .proof__after {
  display: flex; flex-direction: column; gap: var(--space-6);
  padding: var(--space-8) var(--space-7) var(--space-7);
  min-height: 220px;
}
.proof__before { background: var(--oat); flex: 1 1 200px }
.proof__after  { background: var(--surface-ink); color: var(--text-on-ink); flex: 1.1 1 220px }
.proof__stamp { font-size: var(--size-label-xs); letter-spacing: 0.16em; color: var(--text-muted) }
.proof__after .proof__stamp { color: var(--text-on-ink-muted) }

/* the till slip */
.slip {
  width: 140px;
  background: var(--paper-warm);
  padding: var(--space-4) var(--space-4) var(--space-7);
  transform: rotate(-3deg);
  box-shadow: var(--shadow-slip);
  font-family: var(--font-mono);
  font-size: 9.5px;
  line-height: 1.5;
  color: var(--charcoal-2);
  /* torn bottom edge */
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent 0 3.2px, #000 3.6px) 0 0/9px 100% repeat-x;
  mask: radial-gradient(circle at 50% 100%, transparent 0 3.2px, #000 3.6px) 0 0/9px 100% repeat-x;
}
.slip__biz {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--weight-medium);
  color: var(--charcoal);
  text-align: center;
  padding-bottom: var(--space-2);
  border-bottom: 1px dashed var(--rule-strong);
  margin-bottom: var(--space-2);
}
.slip__lines > div { display: flex; justify-content: space-between; gap: var(--space-2) }
.slip__lines dt, .slip__lines dd { margin: 0 }
.slip__lines dd { white-space: nowrap }
.slip__total {
  display: flex; justify-content: space-between;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--charcoal);
  border-top: 1px dashed var(--rule-strong);
  margin-top: var(--space-2); padding-top: var(--space-2);
}
.slip__thanks {
  text-align: center; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--soapstone); margin-top: var(--space-2);
}

/* ── chat bubbles ────────────────────────────────────────────────────── */
.bubble {
  padding: var(--space-4) var(--space-5);
  font-size: var(--size-body-xs);
  line-height: 1.45;
  max-width: 92%;
}
.bubble--in {
  background: rgba(244, 236, 219, 0.08);
  border-radius: var(--radius-bubble-in);
  color: var(--text-on-ink);
}
.bubble--out {
  background: rgba(71, 94, 78, 0.42);
  border-radius: var(--radius-bubble-out);
  color: var(--text-on-ink);
  margin-left: auto;
}
.bubble__who {
  display: flex; gap: var(--space-3); align-items: baseline;
  font-family: var(--font-mono); font-size: var(--size-label-xs);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-on-ink-accent);
  margin-bottom: var(--space-2);
}
.bubble__time { color: var(--text-on-ink-muted) }
.bubble__body b { color: var(--bone) }
.bubble__delta {
  margin-top: var(--space-3);
  color: var(--ochre);
  font-size: var(--size-meta);
}
.bubble__delta b { color: var(--ochre) }
.bubble__gloss {
  margin-top: var(--space-1);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--size-meta);
  line-height: 1.35;
  color: color-mix(in oklab, var(--bone) 62%, transparent);
}
.bubble__photo {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: 0.06em;
  color: color-mix(in oklab, var(--bone) 72%, transparent);
  background: var(--pattern-hatch), rgba(244, 236, 219, 0.05);
  border: 1px dashed var(--rule-on-dark);
  border-radius: var(--radius-sm);
  padding: var(--space-7) var(--space-5);
  text-align: center;
}

/* ── 02 · the problem ────────────────────────────────────────────────── */
.quote { position: relative; padding-left: var(--space-9) }
.quote::before {
  content: "\201C";
  position: absolute; left: -2px; top: -10px;
  font-family: var(--font-display);
  font-size: 54px; line-height: 1;
  color: var(--terracotta);
}
.quote p {
  font-family: var(--font-display);
  font-weight: var(--weight-body);
  font-size: var(--size-quote);
  line-height: 1.22;
  letter-spacing: var(--track-tight);
  color: var(--text-strong);
}
.quote footer {
  margin-top: var(--space-5);
  font-size: var(--size-meta);
  color: var(--text-muted);
}

/* ── section heads ───────────────────────────────────────────────────── */
.sechead { margin-bottom: var(--space-10) }
.sechead h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-section);
  line-height: var(--leading-section);
  letter-spacing: var(--track-section);
  max-width: var(--measure-section-head);
}
.sechead h2 em { font-style: italic; color: var(--terracotta); font-weight: var(--weight-medium) }

/* ── 03 · numbered items ─────────────────────────────────────────────── */
.numbered {
  display: grid;
  grid-template-columns: var(--space-12) 1fr;
  gap: var(--space-7);
  align-items: start;
  border-top: var(--border-hair);
  padding: 28px 0 var(--space-9);
}
.numbered__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-body);
  font-size: 34px;
  line-height: 1;
  color: var(--terracotta);
}
.numbered h3 {
  font: var(--type-h3);
  letter-spacing: var(--track-tight);
  margin-bottom: var(--space-4);
}
.numbered p {
  font-size: var(--size-body-sm);
  line-height: var(--leading-body);
  color: var(--text-body);
}

/* ── 04 · the day rail ───────────────────────────────────────────────── */
/* Deliberately bleeds past both gutters — the day runs off the edge of
   the page the way it runs off the edge of a shift. */
.rail {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  overflow-x: auto;
  padding: var(--space-2) var(--gutter) var(--space-7);
  margin-top: var(--space-10);
  scrollbar-width: thin;
  scrollbar-color: var(--rule-strong) transparent;
  overscroll-behavior-x: contain;
}
@media (min-width: 780px) { .rail { padding-left: 40px; padding-right: 40px } }
.rail::-webkit-scrollbar { height: 6px }
.rail::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: var(--radius-xs) }
.rail::-webkit-scrollbar-track { background: transparent }
.rail__caption { margin-top: 2px }

.daycard {
  flex: 0 0 auto;
  width: 282px;
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--surface-ink);
  color: var(--text-on-ink);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card);
  padding: var(--space-7) var(--space-7) var(--space-8);
}
.daycard__ts { color: var(--text-on-ink-accent); letter-spacing: var(--track-label) }
.daycard__src {
  color: var(--text-on-ink-muted);
  font-size: var(--size-label-xs);
  letter-spacing: 0.14em;
  margin-bottom: var(--space-3);
}
.daycard .bubble { max-width: 94% }
.daycard .bubble + .bubble { margin-top: var(--space-2) }

/* ── 05 · the ink panel ──────────────────────────────────────────────── */
.inkpanel {
  position: relative;
  overflow: hidden;
  background: var(--surface-ink);
  color: var(--text-on-ink);
  border-radius: var(--radius-md);
  padding: var(--space-10) 28px var(--space-9);
}
.inkpanel__inner { position: relative; z-index: 1 }
.inkpanel__h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(28px, 6.6vw, 38px);
  line-height: var(--leading-section);
  letter-spacing: -0.02em;
  color: var(--text-on-ink);
  margin-bottom: var(--space-7);
  max-width: 16ch;
}
.inkpanel__h2 em { font-style: italic; color: var(--ochre); font-weight: var(--weight-medium) }

/* Ndebele dotted seasoning — corner only, masked diagonally. */
.dots {
  position: absolute; right: -40px; top: -40px;
  width: 280px; height: 280px;
  opacity: 0.22;
  background: var(--pattern-dots-gold);
  -webkit-mask-image: var(--pattern-dots-mask);
  mask-image: var(--pattern-dots-mask);
  pointer-events: none;
}

.shapelist { display: grid; gap: var(--space-7) }
.shapelist li { display: grid; grid-template-columns: 18px 1fr; gap: var(--space-6); align-items: start }
.shapelist__mark { color: var(--ochre); width: 18px; height: 18px; margin-top: 2px }
.shapelist__mark svg { width: 18px; height: 18px }
.shapelist p {
  font-size: var(--size-body-sm);
  line-height: var(--leading-body);
  color: color-mix(in oklab, var(--bone) 78%, transparent);
}
.shapelist p b { color: var(--bone) }

/* ── 06 · price ──────────────────────────────────────────────────────── */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6) }

.tier {
  display: flex; flex-direction: column;
  border-radius: var(--radius-md);
  padding: var(--space-9) var(--space-8) var(--space-8);
  background: var(--surface-field);
  border: 1px solid var(--rule-strong);
}
.tier--featured {
  background: var(--surface-ink);
  color: var(--text-on-ink);
  border-color: transparent;
}
.tier__name {
  color: var(--text-accent);
  letter-spacing: var(--track-label);
  margin-bottom: var(--space-5);
}
.tier__name span { color: var(--text-faint) }
.tier--featured .tier__name { color: var(--text-on-ink-accent) }
.tier--featured .tier__name span { color: var(--text-on-ink-muted) }

.tier__headline {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: var(--track-tight);
  margin-bottom: var(--space-7);
}
.tier__price {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: var(--track-section);
}
.tier__note { font-size: var(--size-meta); color: var(--text-muted); margin-top: var(--space-1) }
.tier--featured .tier__note { color: var(--text-on-ink-muted) }
.tier__why {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-body);
  margin: var(--space-6) 0 var(--space-7);
  padding-top: var(--space-6);
  border-top: var(--border-hair);
}
.tier--featured .tier__why { color: color-mix(in oklab, var(--bone) 80%, transparent); border-top-color: var(--rule-on-dark-soft) }

.tier__features { display: grid; gap: var(--space-4); margin-bottom: var(--space-9) }
.tier__features li {
  display: grid; grid-template-columns: 8px 1fr; gap: var(--space-4);
  align-items: start;
  font-size: var(--size-body-sm);
  line-height: 1.45;
  color: var(--text-body);
}
.tier__features li::before {
  content: ""; margin-top: 6px;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 7px solid var(--terracotta);
}
.tier--featured .tier__features li { color: color-mix(in oklab, var(--bone) 82%, transparent) }
.tier--featured .tier__features li::before { border-bottom-color: var(--ochre) }
.tier .btn { margin-top: auto; align-self: flex-start }

.dashnote {
  margin-top: var(--space-8);
  padding: var(--space-7) var(--space-7);
  border: var(--border-dashed);
  border-radius: var(--radius-md);
  font-size: var(--size-body-xs);
  line-height: var(--leading-body);
  color: var(--text-body);
  max-width: 78ch;
}

/* ── 07 · FAQ ────────────────────────────────────────────────────────── */
.faq { border-top: var(--border-hair) }
.faq summary {
  display: grid;
  grid-template-columns: var(--space-11) 1fr var(--space-7);
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-8) 0;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none }
.faq__n { color: var(--text-faint) }
.faq__q {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: var(--track-tight);
  color: var(--text-strong);
}
.faq summary:hover .faq__q { color: var(--terracotta) }

/* the + that turns into a × */
.faq__mark {
  position: relative;
  width: 14px; height: 14px;
  justify-self: end; align-self: center;
  transition: transform var(--dur-toggle) var(--ease-default);
}
.faq__mark::before, .faq__mark::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: var(--charcoal-3);
}
.faq__mark::before { width: 100%; height: 1.5px }
.faq__mark::after  { width: 1.5px; height: 100% }
.faq[open] .faq__mark { transform: rotate(45deg) }

.faq > p {
  grid-column: 2;
  font-size: 15px;
  line-height: var(--leading-prose);
  color: var(--text-body);
  max-width: var(--measure-prose);
  padding: 0 var(--space-7) var(--space-8) var(--space-11);
}

/* ── 08 · the closing block ──────────────────────────────────────────── */
.closing {
  position: relative;
  overflow: hidden;
  background: var(--surface-ink);
  color: var(--text-on-ink);
  padding: var(--section-y) var(--gutter) var(--space-13);
}
.closing__inner { max-width: 720px; margin: 0 auto; position: relative; z-index: 1 }
.closing__h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(32px, 8.4vw, 46px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--text-on-ink);
  margin-bottom: var(--space-9);
  max-width: 14ch;
}
.closing__h2 em { font-style: italic; color: var(--ochre); font-weight: var(--weight-medium) }
.closing .join { margin-bottom: var(--space-12) }

.waitcard {
  background: rgba(244, 236, 219, 0.06);
  border: 1px solid var(--rule-on-dark-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-7);
}
.waitcard__head { color: var(--text-on-ink-accent); letter-spacing: var(--track-label) }
.waitcard__lead {
  margin: var(--space-3) 0 var(--space-7);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  line-height: 1.35;
  color: color-mix(in oklab, var(--bone) 90%, transparent);
}
.closing .join__done .waitcard__lead { margin-bottom: var(--space-7) }

/* ── the footer ──────────────────────────────────────────────────────── */
.brandfoot { border-top: 1px solid var(--rule-on-dark); padding-top: var(--space-9) }
.chapungu { width: 30px; height: 45px; fill: var(--ochre); opacity: 0.85; margin-bottom: var(--space-7) }
.brandfoot__line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.4;
  color: color-mix(in oklab, var(--bone) 76%, transparent);
  max-width: 42ch;
  margin-bottom: var(--space-9);
}
.brandfoot__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8);
  color: var(--text-on-ink-muted);
  font-size: var(--size-label-xs);
  letter-spacing: var(--track-label);
}
.brandfoot__meta a { color: var(--text-on-ink-muted) }
.brandfoot__meta a:hover { color: var(--ochre) }

/* ── the brand barely moves ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}