/* ── self-hosted fonts ───────────────────────────────────── */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/cormorant-garamond-400.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/cormorant-garamond-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Kalam";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/kalam-400.woff2") format("woff2");
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/caveat-400.woff2") format("woff2");
}

/* ── Nightfall design tokens ─────────────────────────────── */

:root {
  /* Native chrome (scrollbars, form controls) renders dark — without this the
     UA assumes a light page and paints light-gray scrollbars over Nightfall. */
  color-scheme: dark;
  --bg: #0d1024;
  --deep: #1a1f3d;
  --ink: #f3ecdb;
  --muted: rgba(243, 236, 219, 0.6);
  --rule: rgba(243, 236, 219, 0.22);
  --glow: #e9c46a;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

body {
  /* Flat base only; the viewport gradient lives on the fixed .starfield layer.
     `background-attachment: fixed` here janks on mobile — phones don't repaint a
     fixed background mid-scroll, so it lagged until the gesture ended. */
  background: var(--bg);
  color: var(--ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 19px;
}

/* The full-viewport backdrop: a fixed layer carrying both the radial gradient
   and the stars. Being a `position: fixed` element (not a fixed background
   image) it stays pinned while the page scrolls without the mobile repaint lag.
   Height is locked to the *large* viewport (lvh = toolbar retracted) and the
   bottom edge is released, so the mobile address bar collapsing mid-scroll
   doesn't resize this layer and stretch the stars — `inset:0`/`height:100%`
   tracked the dynamic viewport and snapped on release. */
.starfield {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%; /* explicit — an <svg> is a replaced element and won't stretch from left/right alone */
  height: 100vh; /* fallback for browsers without large-viewport units */
  height: 100lvh;
  background: radial-gradient(ellipse at 50% 30%, var(--deep) 0%, var(--bg) 65%);
  pointer-events: none;
  z-index: 0;
}

.content {
  position: relative;
  z-index: 1;
}

/* While the share overlay is open, its fixed-position card must paint above
   the site footer — a later DOM sibling that sits at the same z-index (1) as
   .content and would otherwise win the paint-order tie. */
.result-share-open .content {
  z-index: 2;
}

/* No grey tap-rectangle flashing over these controls while the next page loads
   — the round type coins and the pill/text links all read cleaner without it. */
.landing__vertex,
.landing__cta,
.wizard__back,
.reading__back,
.report__back,
.result__back {
  -webkit-tap-highlight-color: transparent;
}

/* ── Sigils ──────────────────────────────────────────────── */

/* Bare sigil: fills its container; recolors via the parent's `color`. */
.sigil {
  width: 100%;
  height: 100%;
  color: var(--tc, currentColor);
}

/* Coin: sigil framed in a type-colored medallion with halo + double ring.
   `--tc` is the type's signature color, set inline on a parent (or on the
   .sigil-coin itself). The coin fills its container; size via CSS. */
.sigil-coin {
  position: relative;
  width: 100%;
  height: 100%;
  color: var(--tc, var(--glow));
}

.sigil-coin__halo {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--tc) 27%, transparent) 0%, transparent 65%);
  filter: blur(8px);
  pointer-events: none;
}

.sigil-coin__face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--tc) 18%, transparent) 0%, var(--bg) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sigil-coin__face::before,
.sigil-coin__face::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.sigil-coin__face::before {
  inset: 2%;
  border: 1px solid color-mix(in srgb, var(--tc) 45%, transparent);
}

.sigil-coin__face::after {
  inset: 6%;
  border: 1px solid color-mix(in srgb, var(--tc) 22%, transparent);
}

.sigil-coin__face .sigil {
  position: relative;
  width: 66%;
  height: 66%;
  z-index: 1;
}

/* ── Landing ─────────────────────────────────────────────── */

.landing {
  display: flex;
  flex-direction: column;
}

/* The hero fold: full viewport height, centred. The about section and the
   legal footer flow normally below it (scroll to reach them). */
.landing__hero-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Top/bottom are intentionally asymmetric: the smaller top + larger bottom
     lift the centred ring slightly above the vertical midline, opening room
     for the scroll cue below it without shrinking the ring. */
  padding: 14px 56px 60px;
  position: relative; /* anchors the scroll cue + the locale switcher */
}

/* Locale switcher — top-right of the hero fold, landing-only. A compact
   <details> pill (globe + short code + chevron) that opens a small dropdown of
   the endonyms; no JS, the native disclosure does the work. Quiet resting idiom
   matching the nearby chrome labels; brightens on hover/focus. */
.landing__locale {
  position: absolute;
  top: 18px;
  right: 24px;
  z-index: 2; /* above the dim disc / ring */
}
.landing__locale-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--muted);
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 15px;
  letter-spacing: 0.04em;
  cursor: pointer;
  list-style: none; /* Firefox marker */
}
.landing__locale-pill::-webkit-details-marker { display: none; }
.landing__locale-pill:hover { color: var(--ink); border-color: var(--muted); }
.landing__locale:has(> summary:focus-visible) .landing__locale-pill,
.landing__locale-pill:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 3px;
  color: var(--ink);
}
.landing__locale-globe { flex: 0 0 auto; }
.landing__locale-short { line-height: 1; }
.landing__locale-chevron {
  font-size: 10px;
  line-height: 1;
  transition: transform 0.15s ease;
}
.landing__locale[open] .landing__locale-chevron { transform: rotate(180deg); }

/* The open panel: a small right-aligned dropdown floating below the pill. */
.landing__locale-menu {
  position: absolute;
  right: 0;
  margin: 6px 0 0;
  padding: 6px;
  list-style: none;
  min-width: 140px;
  background: var(--deep);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.landing__locale-menu li { display: block; }
.landing__locale-link,
.landing__locale-current {
  display: block;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 16px;
  letter-spacing: 0.02em;
}
.landing__locale-link {
  color: var(--muted);
  text-decoration: none;
}
.landing__locale-link:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.landing__locale-link:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: -2px;
}
.landing__locale-current { color: var(--ink); font-weight: 600; }

.landing__hero {
  --enneagram-size: 680px;
  --coin-size: 110px;
  /* Label distance from the coin centre (×coin-size). Tightened so the bottom
     vertices' labels ride closer to their coins and clear the scroll cue below
     — about as tight as it goes before the text touches the coin ring. */
  --label-gap: 0.64;
  position: relative;
  width: var(--enneagram-size);
  height: var(--enneagram-size);
  max-width: 100%;
}

/* The diagram (backbone + the nine vertices) overlays the hero square; the
   centre text floats on top of it. On mobile they stack, with the text above
   the diagram — see the mobile query. */
.landing__diagram {
  position: absolute;
  inset: 0;
}

.landing__backbone {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.landing__vertex {
  position: absolute;
  transform: translate(-50%, -50%);
  width: var(--coin-size);
  height: var(--coin-size);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
}
.landing__vertex:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 4px;
  border-radius: 50%;
}

/* Label sits directly above (or below, for the lower vertices) its coin, not
   pushed radially outward, so the composition's width is just the ring — the
   side labels no longer splay out and constrain how large the enneagram can be.
   --label-dir is -1 (above) or 1 (below), set inline per vertex. */
.landing__vertex-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform:
    translate(-50%, -50%)
    translateY(calc(var(--coin-size) * var(--label-gap, 0.78) * var(--label-dir, -1)));
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

.landing__vertex-numeral {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--tc);
  opacity: 0.85;
}

.landing__vertex-name {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--ink);
  opacity: 0.85;
  line-height: 1.1;
}

/* Hover feedback for the nine landing vertices: a slight lift and a
   brighter halo, just enough to read as alive. Scoped to .landing__vertex
   so the same .sigil-coin used on the result/reading pages doesn't react.
   The halo's gradient color stays put — `brightness()` does the glow
   work, which transitions cleanly where a gradient color swap would not. */
.landing__vertex .sigil-coin,
.landing__vertex .sigil-coin__halo,
.landing__vertex-numeral,
.landing__vertex-name {
  transition: transform 220ms ease, filter 220ms ease, opacity 220ms ease;
}

.landing__vertex:hover .sigil-coin {
  transform: scale(1.05);
}

.landing__vertex:hover .sigil-coin__halo {
  filter: blur(10px) brightness(1.5);
}

.landing__vertex:hover .landing__vertex-numeral,
.landing__vertex:hover .landing__vertex-name {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .landing__vertex:hover .sigil-coin {
    transform: none;
  }
}

.landing__center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  z-index: 2;
}

.landing__dim-disc {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(ellipse, var(--bg) 30%, transparent 75%);
  filter: blur(6px);
  z-index: -1;
  pointer-events: none;
}

.landing__headline {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 56px;
  line-height: 1.0;
  letter-spacing: -1px;
  color: var(--ink);
  max-width: 460px;
}

.landing__meta {
  margin: -11px 0 0; /* sit close under the CTA, tighter than the column gap */
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 15px;
  color: var(--muted);
  /* Falls below the dim-disc, onto the ring's chord lines — a bg-coloured halo
     dims them out so they don't strike through the line. */
  text-shadow: 0 0 6px var(--bg), 0 0 12px var(--bg), 0 0 20px var(--bg);
}

.landing__form {
  margin: 0;
}

.landing__cta {
  margin-top: 8px;
  padding: 14px 36px;
  border-radius: 999px;
  border: 1.6px solid var(--glow);
  background: var(--glow);
  color: var(--bg);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
  letter-spacing: 3px;
  text-transform: lowercase;
  cursor: pointer;
}

.landing__cta:hover {
  background: #f0d488;
  border-color: #f0d488;
}

.landing__cta:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 3px;
}

/* Secondary "about" link under the meta line — jumps to the about section.
   Bordered pill = interactive (house rule); a *ghost* pill (hairline border, no
   fill) so the begin CTA stays the only filled pill in the composition. The
   chevron keeps the "scroll down" hint. */
.landing__about-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Pulled up into the clear band under the meta line: at the column gap's
     natural position the pill straddles the 3–6 triangle base. */
  margin-top: -6px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 4px 12px;
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  /* Brighter than --muted: the muted read as non-interactive in the survey. */
  color: color-mix(in srgb, var(--ink) 40%, var(--muted));
  /* Translucent backing so the enneagram chord lines don't strike through the
     pill interior (same idiom as the chat input over the starfield). */
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  text-decoration: none;
  transition: color 200ms ease;
  /* Same halo as the meta line: this pill sits on the chord lines below the
     dim-disc, which otherwise strike through it. */
  text-shadow: 0 0 6px var(--bg), 0 0 12px var(--bg), 0 0 20px var(--bg);
}
.landing__about-link:hover {
  color: var(--ink);
  border-color: var(--muted);
}
.landing__about-link:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 3px;
}
.landing__about-link-chevron {
  font-size: 14px;
  line-height: 1;
}

/* ── Landing: about the Enneagram ────────────────────────── */

.about {
  display: flex;
  justify-content: center;
  padding: 0 56px 96px;
  scroll-margin-top: 32px; /* anchor jump clears the top edge */
}
/* Standalone /{locale}/about page. Mirrors the legal-page container (.legal)
   so the back-button topbar and the about panel align with that surface;
   760 − 20px side padding = 720, the panel's max-width, so it fills the box. */
.about--standalone {
  display: block;
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 20px 64px;
}
.about__panel {
  width: 100%;
  max-width: 720px;
  background: var(--deep);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 44px 52px;
}
.about__eyebrow {
  margin: 0 0 18px;
  text-align: center;
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 15px;
  letter-spacing: 3px;
  color: var(--glow);
  opacity: 0.9;
}
.about__prose {
  font-size: 19px;
  line-height: 1.7;
  color: var(--ink);
}
.about__prose h2 {
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -0.3px;
  margin: 1.6em 0 0.4em;
}
.about__prose h2:first-child { margin-top: 0; }
.about__prose p { margin: 0 0 1em; }
.about__prose p:last-child { margin-bottom: 0; }
.about__prose strong { color: var(--glow); font-weight: 400; }
/* Authored content images in the prose block: centred, framed, and
   height-capped so a tall portrait can't dwarf a wider one. */
.about__prose img {
  display: block;
  margin: 1.6em auto;
  max-width: 100%;
  max-height: 320px;
  width: auto;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--rule);
}
.about__prose figure {
  margin: 1.6em auto;
  text-align: center;
}
.about__prose figure img { margin: 0 auto 8px; }
.about__prose figcaption {
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 15px;
  color: var(--muted);
}
/* A run of consecutive images lays out as one centred row that wraps to a
   stack on a narrow panel. Bottoms align so images of unequal height share
   a baseline. */
.about__prose .figrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 22px;
  margin: 1.6em 0;
}
.about__prose .figrow figure { margin: 0; }
/* The begin CTA, repeated at the foot of the about panel so a reader who scrolled
   the whole section can start without scrolling back up. */
.about__cta {
  display: flex;
  justify-content: center;
  margin: 40px 0 0;
}

/* ── Wizard ──────────────────────────────────────────────── */

.wizard {
  min-height: 100vh;
  padding: 32px 56px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.wizard__back {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border: 1.6px solid var(--muted);
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font-family: "Caveat", "Comic Sans MS", cursive;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
}

.wizard__back:hover {
  border-color: var(--ink);
}

.wizard__back:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 3px;
}

/* Progress is shown visually by the sigil strip (which is aria-hidden), so the
   "step X of 9" text is screen-reader-only rather than displayed. */
.wizard__step {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The progress strip — the 9 type sigils in order, as a meter. Answered steps
   fill with their own signature colour (set inline), upcoming steps are dim grey
   outlines, and the current step is enlarged + glowing with a dot beneath it. */
.wizard__progress {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin: 4px auto 2px;
}

.wizard__sigil {
  width: 42px;
  height: 42px;
  color: var(--muted); /* upcoming: grey, not yet reached */
  opacity: 0.4;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.wizard__sigil .sigil {
  display: block;
  width: 100%;
  height: 100%;
}

/* Answered — alight: full strength in the type's own colour (inline `color`),
   saturation-boosted and softly glowing. */
.wizard__sigil.is-done {
  opacity: 1;
  filter: saturate(1.5) drop-shadow(0 0 3px currentColor);
}

/* Current step — its colour, enlarged and glowing brighter, the strip's
   "you are here" marker. */
.wizard__sigil.is-current {
  opacity: 1;
  transform: scale(1.4);
  filter: saturate(1.5) drop-shadow(0 0 6px currentColor);
}

/* The form is a card-like surface so the wizard's question area sits
 * on solid ground — the starfield behind it would otherwise compete
 * with the rating dots. --deep alone reads nearly flat against --bg, so
 * the panel is lit from above (a touch brighter at the crown, settling
 * into --deep), floated off the sky with a soft shadow, and capped with
 * a hairline top-edge highlight — glass catching starlight. */
.wizard__form {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 28px 30px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--deep) 90%, var(--ink)) 0%,
    var(--deep) 40%
  );
  border: 1px solid var(--rule);
  border-radius: 16px;
  box-shadow:
    0 18px 50px -28px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(243, 236, 219, 0.1);
}

.wizard__statements {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.wizard__statement {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* A transparent left rail that lights up once the statement is answered, so an
     unanswered one is visible at a glance. Always present (so nothing shifts when
     it colours in); the small indent keeps the text clear of the rail. */
  padding-left: 14px;
  border-left: 2px solid transparent;
  transition: border-color 0.2s ease;
}

.wizard__statement.is-answered {
  border-left-color: color-mix(in srgb, var(--glow) 55%, transparent);
}

.wizard__statement-text {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.wizard__statement-number {
  min-width: 30px; /* room for two digits (1..45) so the body text stays aligned */
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 16px;
  opacity: 0.4;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.wizard__statement.is-answered .wizard__statement-number {
  opacity: 1;
  color: var(--glow);
}

.wizard__statement-body {
  flex: 1;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 19px;
  line-height: 1.45;
}

.wizard__rating {
  display: flex;
  align-items: center;
  max-width: 340px;
  margin: 0 0 0 32px;
  padding: 0;
  border: 0;
}

/* Each label is an equal-width, 44px-tall column, so the tap target is the
   whole column — the visible dots stay small (size encodes the answer's
   strength) but a thumb never has to land on a 14px circle. */
.wizard__rating-label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  cursor: pointer;
}

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

.wizard__rating-dot {
  display: inline-block;
  border-radius: 50%;
  border: 1.4px solid;
  background: transparent;
  transition: background-color 200ms ease-out, border-color 200ms ease-out;
}

/* Size is a symmetric V — extremes (1, 5) are largest, neutral (3) is
 * smallest — so size encodes the strength of the answer.
 *
 * The resting ring carries a faint wash of the dot's own --pick hue, so
 * the unselected row already reads as a disagree→agree spectrum (red →
 * gold → green) straight from the stars — no connecting rail, which would
 * read as a slider rather than a constellation. Selection fills with the
 * full --pick hue plus a halo of uniform spread and alpha, so the chosen
 * dot always reads at the same intensity — only its hue changes. */
.wizard__rating-dot {
  border-color: color-mix(in srgb, var(--pick) 38%, rgba(243, 236, 219, 0.8));
}
.wizard__rating-dot--1 {
  width: 26px;
  height: 26px;
  --pick: #d96b5e;
}
.wizard__rating-dot--2 {
  width: 18px;
  height: 18px;
  --pick: color-mix(in srgb, #d96b5e 55%, #e9c46a);
}
.wizard__rating-dot--3 {
  width: 14px;
  height: 14px;
  --pick: #e9c46a;
}
.wizard__rating-dot--4 {
  width: 18px;
  height: 18px;
  --pick: color-mix(in srgb, #7fb069 55%, #e9c46a);
}
.wizard__rating-dot--5 {
  width: 26px;
  height: 26px;
  --pick: #7fb069;
}

.wizard__rating-input:checked + .wizard__rating-dot {
  background: var(--pick);
  border-color: var(--pick);
  box-shadow: 0 0 10px 2px color-mix(in srgb, var(--pick) 55%, transparent);
}

.wizard__rating-input:focus-visible + .wizard__rating-dot {
  outline: 2px solid var(--glow);
  outline-offset: 3px;
}

/* Rating legend: a single centred line that names the 1→5 anchors. The two
 * dots mirror the unselected rating-dot rendering (transparent fill, thin
 * ring in the anchor hue) so the legend visually maps onto the real row. */
.wizard__legend {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  justify-content: center;
  width: 100%;
  margin: 0 0 18px;
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 15px;
  color: var(--muted);
}

.wizard__legend-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.4px solid;
  background: transparent;
}
.wizard__legend-dot--low {
  border-color: #d96b5e;
}
.wizard__legend-dot--high {
  border-color: #7fb069;
}

.wizard__legend-arrow {
  color: var(--muted);
}

.wizard__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--rule);
}

/* Progress tally between Back and Continue: how many of the 45 are answered. */
.wizard__counter {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.5px;
  color: var(--muted);
}

.wizard__counter-n {
  color: var(--glow);
  font-style: normal;
}

.wizard__continue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border: 1.6px solid var(--glow);
  border-radius: 6px;
  background: var(--glow);
  color: var(--bg);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 1px;
  cursor: pointer;
}

.wizard__continue:hover:not(:disabled) {
  background: #f0d488;
  border-color: #f0d488;
}

.wizard__continue:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* "Not yet", not "broken": a ghost button — dropping the gold fill's opacity
   left a muddy brown that reads as disabled-broken. Hollow it out instead. */
.wizard__continue:disabled {
  border-color: var(--rule);
  background: transparent;
  color: var(--muted);
  cursor: not-allowed;
}

/* ── Result ──────────────────────────────────────────────── */

.result {
  min-height: 100vh;
  padding: 32px 56px 56px;
}

/* Card surface over the starfield on desktop (the same panel as the reading
 * page); flattened on mobile — see the ≤640px query. */
.result__container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 52px 56px;
  background: var(--deep);
  border: 1px solid var(--rule);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* Sits in normal flow as the card's first child; the negative margin pulls
 * the hero up from the container's 56px gap to the spec'd 32px topbar→hero
 * spacing without touching the gap between any other section pair. */
.result__topbar {
  align-self: flex-start;
  margin-bottom: -24px;
}

.result__eyebrow {
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 16px;
  letter-spacing: 3px;
  color: var(--glow);
  opacity: 0.9;
}

/* ── Hero: two-column, enneagram left + identity stack right ─── */

.result__hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 72px;
  align-items: center;
}

.result__hero-diagram {
  display: flex;
  justify-content: center;
}

.result__identity {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.result__heading {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 68px;
  letter-spacing: -1px;
  line-height: 0.98;
  color: var(--ink);
}

.result__heading-name {
  color: var(--tc);
}

/* Wing suffix in the "Type 2w3" heading — same italic serif as the heading but
   markedly subordinate, so the "w3" reads as a qualifier of the numeral. Colour
   is set inline (the wing's signature hex). */
.result__heading-wing {
  font-size: 0.6em;
  letter-spacing: 0;
}

.result__wing-line {
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 17px;
  color: var(--muted);
}

.result__wing-num {
  font-weight: 600;
}

.result__hero-rule {
  width: 50%;
  height: 1px;
  background: var(--rule);
  margin: 6px 0;
}

.result__quote {
  margin: 0;
  max-width: 440px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 21px;
  line-height: 1.55;
  opacity: 0.9;
}

.result__actions {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}

.result__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 17px;
  letter-spacing: 1px;
  text-decoration: none;
  cursor: pointer;
}

.result__action--primary {
  background: var(--tc);
  color: var(--bg);
  border-color: var(--tc);
}

.result__action--primary:hover {
  filter: brightness(1.08);
}

.result__action:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* Wraps the share trigger and the overlay it opens. No longer a positioning
   context — the overlay is fixed to the viewport, not anchored to this box —
   but still centers the trigger among the other hero actions. */
.result__share {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Backdrop: fixed over the whole viewport, static dim fill (no blur, no
   animation, no thumbnail), centering the dialog card. `height` repeats with
   the dvh fallback pattern used elsewhere (see .starfield) for browsers
   without dynamic-viewport units. */
.result__share-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(13, 16, 36, 0.72);
  overflow: auto;
  height: 100vh;
  height: 100dvh;
}

.result__share-overlay[hidden] {
  display: none;
}

.result__share-dialog {
  width: min(520px, calc(100vw - 40px));
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px;
  background: var(--deep);
  border: 1px solid var(--rule);
  border-radius: 20px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6);
}

.result__share-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.result__share-heading {
  margin: 0;
  color: var(--ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 27px;
  line-height: 1.2;
}

.result__share-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.result__share-close:hover {
  border-color: color-mix(in srgb, var(--ink) 45%, var(--rule));
}

.result__share-close:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.result__share-summary {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.result__share-summary-type {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 17px;
  color: var(--muted);
}

.result__share-summary-name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 23px;
  color: var(--tc);
}

/* First, full-width primary action — hidden by native `hidden` until
   share.js confirms navigator.share exists. Filled with the type color like
   .result__action--primary so it reads as the preferred option. */
.result__share-native {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 13px 22px;
  box-sizing: border-box;
  border-radius: 999px;
  border: 1px solid var(--tc);
  background: var(--tc);
  color: var(--bg);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 17px;
  letter-spacing: 0.5px;
  cursor: pointer;
}

.result__share-native:hover {
  filter: brightness(1.08);
}

.result__share-native:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.result__share-native[hidden] {
  display: none;
}

.result__share-destinations {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Text-only ghost controls, touch-sized — Facebook / X / email read as equal
   secondary options beneath the native action. */
.result__share-destination {
  flex: 1 1 auto;
  min-height: 44px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0.3px;
  text-decoration: none;
  cursor: pointer;
}

.result__share-destination:hover {
  border-color: color-mix(in srgb, var(--ink) 45%, var(--rule));
}

.result__share-destination:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.result__share-link-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.result__share-link-label {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: var(--muted);
}

.result__share-link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.result__share-link-input {
  min-width: 0;
  min-height: 44px;
  box-sizing: border-box;
  font-family: system-ui, sans-serif;
  font-size: 15px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink);
}

.result__share-link-input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.result__share-copy {
  min-height: 44px;
  box-sizing: border-box;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 16px;
  white-space: nowrap;
  cursor: pointer;
}

.result__share-copy:hover {
  border-color: color-mix(in srgb, var(--ink) 45%, var(--rule));
}

.result__share-copy:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Visible, muted status line — native-share failure or manual-copy help
   persist here (see share.js); a min-height keeps the layout stable whether
   or not it currently holds text. */
.result__share-status {
  margin: 0;
  min-height: 36px;
  color: var(--muted);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.4;
}

.result__free-identity {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

/* ── Famous-examples strip: flat accent-text names, middot-separated ──
   Bordered pills sat directly under the real action buttons and read as more
   buttons (false affordance); flat names in the type colour don't. */

.result__examples {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.result__examples-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.result__example {
  color: var(--tc);
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 16px;
  line-height: 1.3;
}
/* Middot between adjacent names; margin matches the list gap so the dot sits
   symmetrically. Leading dots on wrapped lines are accepted. */
.result__example + .result__example::before {
  content: "·";
  color: var(--muted);
  margin-right: 10px;
}

/* The strip and the upsell card read as one flow: cancel the container's 56px
 * gap plus the shared band's own top margin, which together leave a dead band
 * between the centred chips and the "go deeper" card. */
.result__examples + .report-band {
  margin-top: -34px;
}

.result__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 12px;
  margin-top: 30px;
}

.result__nav-form {
  margin: 0;
}

.result__nav-link {
  color: var(--muted);
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 16px;
  text-decoration: none;
}

.result__nav-retake {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.result__nav-link:hover { color: var(--ink); }
.result__nav-link:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }
.result__nav-sep { color: var(--rule); }

/* ── Core-type description (long prose, same per type regardless of wing) */

.result__description {
  margin: 0 auto;
  max-width: 640px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 17px;
  line-height: 1.7;
}

.result__description p {
  margin: 0 0 1em;
}

.result__description p:last-child {
  margin-bottom: 0;
}

/* Lead-in mirrors the paid report's prose: the opening paragraph reads
 * slightly larger with a drop-cap initial in the type colour, so the free
 * description gets the same editorial entry point. */
.result__description > p:first-child {
  font-size: 1.06em;
}
.result__description > p:first-child::first-letter {
  float: left;
  margin: 0.04em 0.1em 0 0;
  font-size: 3.1em;
  line-height: 0.7;
  font-style: normal;
  color: var(--tc);
}

/* ── In-page enneagram diagram primitives ──────────────────── */

.diagram {
  position: relative;
  width: 100%;
  height: 100%;
}

.diagram__svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Halo and aura sit behind the sigils. Both use a radial gradient piped
 * in via inline `background` (with the type-colour mixed at the right
 * alpha) and a CSS-only blur. */
.diagram__halo,
.diagram__aura {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}

.diagram__halo {
  width: 55%;
  height: 55%;
  filter: blur(24px);
}

.diagram__aura {
  width: 38%;
  height: 38%;
  filter: blur(6px);
}

.diagram__sigil {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.diagram__sigil-label {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 10px;
  letter-spacing: 2px;
  opacity: 0.7;
}

/* Sigil sizing differs between the header diagram (primary dominates,
 * wing is small) and the relation diagrams (destination ('to') is the
 * focus, slightly larger than the user's own sigil). */
.diagram--header .diagram__sigil--primary { width: 26%; height: 26%; }
.diagram--header .diagram__sigil--wing    { width: 16%; height: 16%; opacity: 0.85; }

.diagram--relation .diagram__sigil--primary   { width: 27%; height: 27%; }
.diagram--relation .diagram__sigil--secondary { width: 30%; height: 30%; }

/* Hero diagram size — overridable on mobile. */
.result__hero-diagram .diagram { width: 420px; height: 420px; }

/* The broad halo is dialled back from its default here so the type's glow
 * stays a contained star rather than washing across the gap into the
 * heading; the tight aura still gives the sigil its bright core. */
.result__hero-diagram .diagram__halo {
  width: 42%;
  height: 42%;
  filter: blur(20px);
}

/* ── Reading ─────────────────────────────────────────────── */

.reading {
  min-height: 100vh;
  padding: 32px 56px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.reading__header {
  display: flex;
}

/* Card surface over the starfield on desktop; flattened on mobile (the page
 * goes flat deep there — see the ≤640px query). */
.reading__panel {
  max-width: 760px;
  margin: 0 auto;
  padding: 36px 40px;
  background: var(--deep);
  border: 1px solid var(--rule);
  border-radius: 14px;
}

.reading__back {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border: 1.6px solid var(--muted);
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font-family: "Caveat", "Comic Sans MS", cursive;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
}

.reading__back:hover {
  border-color: var(--ink);
}

.reading__back:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 3px;
}

/* Lateral nav out of the type page (Pass 2 dead-end fix): prev · all nine · next,
   a quiet Kalam row centred under the upsell band. */
.reading__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 12px;
  margin-top: 30px;
}
.reading__nav-link {
  color: var(--muted);
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 16px;
  text-decoration: none;
}
.reading__nav-link:hover { color: var(--ink); }
.reading__nav-link:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }
.reading__nav-sep { color: var(--rule); }

.reading__title-block {
  text-align: center;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.reading__eyebrow {
  font-family: "Caveat", "Comic Sans MS", cursive;
  font-size: 16px;
  letter-spacing: 1.5px;
  color: var(--glow);
}

.reading__title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 46px;
  letter-spacing: -0.5px;
}

.reading__wing-subline {
  margin-top: 6px;
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 16px;
  color: var(--muted);
}

.reading__body {
  margin: 24px auto 0;
  max-width: 640px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 19px;
  line-height: 1.7;
}

.reading__body p {
  margin: 0 0 1em;
}

.reading__body p:last-child {
  margin-bottom: 0;
}

.reading__diagram {
  margin: 32px auto 0;
}
.reading__diagram--header   { width: 180px; height: 180px; }
.reading__diagram--relation { width: 220px; height: 220px; }

.reading__relation {
  margin-top: 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.reading__relation-eyebrow {
  font-family: "Caveat", "Comic Sans MS", cursive;
  font-size: 18px;
  letter-spacing: 1.5px;
  color: var(--glow);
}

.reading__relation-caption {
  margin-top: 8px;
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 15px;
  color: var(--muted);
}

/* ── Mobile ──────────────────────────────────────────────── */

@media (max-width: 720px) {
  .landing__hero-wrap {
    /* Stack from the top so a tall diagram-plus-text column never clips when
       it exceeds the viewport height. Slim side margin so the ring fills more
       of the width. */
    align-items: flex-start;
    padding: 28px 8px;
  }
  .about {
    padding: 0 14px 64px;
  }
  /* The base .about mobile rule zeroes the top padding (it sits under the
     hero); the standalone page has no hero above it, so keep its top gap and
     narrow the sides to the mobile idiom. */
  .about--standalone {
    padding: 24px 14px 64px;
  }
  .about__panel {
    padding: 30px 22px;
  }
  /* Intro text on top, ring in the middle, CTA at the bottom (thumb-reachable).
     The gap clears the type-9 label, which pokes up above the top of the ring. */
  .landing__hero {
    /* Cap high enough that the 12px page margin is what bounds the ring on
       phones (so it fills the width); the cap only kicks in on wide tablets. */
    --enneagram-size: 440px;
    --coin-size: 64px;
    --label-gap: 0.78; /* smaller phone coins need relatively more clearance; no cue to dodge here */
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }
  .landing__diagram {
    position: relative;
    inset: auto;
    width: min(var(--enneagram-size), 100%);
    aspect-ratio: 1;
    flex: none;
  }
  /* Dissolve the overlay wrapper so intro / diagram / form become siblings of
     the hero and can be ordered independently around the ring. */
  .landing__center {
    display: contents;
  }
  .landing__headline {
    order: -1; /* above the ring */
    font-size: 38px;
    max-width: 360px;
  }
  .landing__form {
    order: 1; /* below the ring — easy to tap */
  }
  .landing__meta {
    order: 2; /* the 45-questions line sits under the CTA */
    margin-top: -22px; /* closer to the CTA than the 30px column gap */
  }
  .landing__about-link {
    order: 3; /* below the meta line */
    margin-top: 0; /* the 30px hero gap already spaces it on mobile */
  }
  .landing__dim-disc {
    display: none; /* nothing to dim — the text no longer overlays the ring */
  }
  .landing__locale {
    top: 10px;
    right: 12px; /* tuck into the corner, clear of the top-stacked hero */
  }
  /* An overlong type name wraps to two centred lines instead of running off
     the diagram edge at the far-left/right vertices. width:max-content keeps
     short names shrink-wrapped (the absolute box would otherwise be squeezed
     by the containing block's right edge before the cap applies). */
  .landing__vertex-label {
    white-space: normal;
    width: max-content;
    max-width: 88px;
  }
  .landing__vertex-name {
    font-size: 11px;
  }
  .landing__vertex-numeral {
    font-size: 9px;
    letter-spacing: 2px;
  }
}

@media (max-width: 640px) {
  .wizard {
    padding: 20px 18px;
  }
  .wizard__progress {
    gap: 6px;
  }
  .wizard__sigil {
    width: 30px;
    height: 30px;
  }
  .wizard__form {
    padding: 18px;
    border-radius: 12px;
  }
  .wizard__statements {
    gap: 18px;
  }

  .result {
    padding: 20px 18px;
  }
  .result__container {
    gap: 40px;
    padding: 22px 20px;
  }
  .result__topbar {
    margin-bottom: -16px;
  }
  .result__hero {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: center;
  }
  .result__identity {
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  /* Shrink to the card width on narrow phones (it no longer has the full
     viewport now that it sits inside the panel), staying square. */
  .result__hero-diagram .diagram { width: min(300px, 100%); height: auto; aspect-ratio: 1; }
  .result__heading {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    font-size: 72px;
    line-height: 1.08;
    overflow-wrap: anywhere;
  }
  .result__hero-rule {
    width: 60%;
  }
  .result__quote {
    font-size: 19px;
    max-width: 360px;
  }
  .result__actions {
    justify-content: center;
    flex-wrap: wrap;
  }
  /* Overlay becomes a full-width bottom sheet: flush to the viewport edges,
     rounded on top only, with safe-area padding for devices with a home
     indicator. */
  .result__share-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .result__share-dialog {
    width: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 20px 20px 0 0;
    padding: 24px 20px calc(20px + env(safe-area-inset-bottom));
  }
  .reading__diagram--header   { width: 150px; height: 150px; }
  .reading__diagram--relation { width: 180px; height: 180px; }

  .reading {
    padding: 20px 18px;
  }
  .reading__panel {
    padding: 22px 20px;
  }
  .reading__title {
    font-size: 32px;
  }

  /* Mobile: drop the starfield and the card chrome — the deep panel colour just
     fills the page. (Desktop keeps the starfield showing around the cards.) */
  .reading,
  .result,
  .report { background: var(--deep); }
  .reading__panel,
  .result__container,
  .report__overlay--card { border: none; }
}

/* ── Report (paid surface) ───────────────────────────────── */

.report {
  position: relative;
  padding: 40px 24px 80px;
}

.report__hero {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.report__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Unlocked, this bar holds four pills (back + chat/resend/download) — more
     than a 360px phone can fit on one line, so both rows may wrap. */
  flex-wrap: wrap;
  gap: 12px;
  max-width: 820px;
  margin: 0 auto 4px;
}

.report__tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* Tools reuse the back link's outlined-pill look. The download button is a
   <button>, so reset its native chrome to match the <a>. */
.report__tool {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border: 1.6px solid var(--muted);
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font-family: "Caveat", "Comic Sans MS", cursive;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}
.report__tool:hover { border-color: var(--ink); }
.report__tool:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }

.report__back,
.result__back {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border: 1.6px solid var(--muted);
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font-family: "Caveat", "Comic Sans MS", cursive;
  font-size: 16px;
  text-decoration: none;
}
.report__back:hover,
.result__back:hover { border-color: var(--ink); }
.report__back:focus-visible,
.result__back:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }

.report__hero-diagram {
  width: 200px;
  height: 200px;
  margin: 10px auto 4px;
}

.report__eyebrow {
  font-family: "Caveat", "Comic Sans MS", cursive;
  font-size: 15px;
  letter-spacing: 1.5px;
  color: var(--glow);
}

.report__title {
  margin: 6px 0 4px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 48px;
  letter-spacing: -0.5px;
}

.report__subline {
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 14px;
  color: var(--muted);
}

/* The overlay card sits over the starfield (like the reading page) on desktop,
   enclosing the hero (enneagram + title) and the chapters as one panel;
   flattened on mobile — see the ≤640px query. Unlocked-only: the locked teaser
   keeps its loose layout, so .report__overlay alone carries no chrome. */
.report__overlay--card {
  max-width: 820px;
  margin: 28px auto 0;
  padding: 30px 52px 40px;
  background: var(--deep);
  border: 1px solid var(--rule);
  border-radius: 16px;
}

/* Chapters sit directly inside the overlay card; the top margin is the gap
   below the hero. The card chrome lives on .report__overlay--card. */
.report__panel {
  margin-top: 24px;
}

.report__chapter {
  padding: 0 0 16px;
}
.report__chapter:first-child {
  padding-top: 4px;
}

/* Chapter divider: a hairline with the user's type sigil centred — a recurring
   brand motif that paces the long scroll. Hidden before the first chapter. */
.report__divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 30px 0 28px;
}
.report__divider::before,
.report__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.report__divider-sigil {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  opacity: 0.7;
}
.report__chapter:first-child .report__divider {
  display: none;
}

.report__chapter-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
}
.report__chapter-num {
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--tc);
  opacity: 0.9;
}
.report__chapter-title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 30px;
}

.report__prose {
  max-width: 640px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 19px;
  line-height: 1.75;
}
.report__prose p { margin: 0 0 1em; }
.report__prose p:last-child { margin-bottom: 0; }
.report__prose h2,
.report__prose h3 {
  font-style: italic;
  font-weight: 400;
  margin: 1.2em 0 0.4em;
}

/* Lead-in: the opening paragraph of a prose chapter reads slightly larger, with
   a drop-cap initial in the type colour. Scoped to a leading <p>, so the
   bullet-list chapters (which start with <ul>) get no drop cap. */
.report__prose > p:first-child {
  font-size: 1.06em;
}
.report__prose > p:first-child::first-letter {
  float: left;
  margin: 0.04em 0.08em 0 0;
  font-size: 3.1em;
  line-height: 0.7;
  font-style: normal;
  color: var(--tc);
}

/* Bullet lists carry a small diamond marker in the type's signature colour. */
.report__prose ul {
  list-style: none;
  margin: 0 0 1em;
  padding-left: 1.4em;
}
.report__prose li {
  position: relative;
  margin: 0 0 0.5em;
}
.report__prose li::before {
  content: "";
  position: absolute;
  left: -1.3em;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--tc);
  transform: rotate(45deg);
}

/* Glance card: the two-cell core fear / core desire callout that opens the
   motivation chapter. Shares the panel idiom of the toc/sample cards. */
.report__glance {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 0 0 18px;
  padding: 0;
}
.report__glance-cell {
  padding: 20px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--deep);
}
.report__glance-label {
  margin: 0 0 8px;
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--glow);
  opacity: 0.9;
}
.report__glance-text {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
}

/* Triad strip: the three Enneagram centres, closing the identity chapter. Each
   cell is a panel in the glance idiom; the visitor's own centre is lit with a
   type-tinted border and label, its type number a filled type-colour disc. */
.report__triad {
  margin: 26px 0 4px;
}
.report__triad-eyebrow {
  margin: 0 0 10px;
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--glow);
  opacity: 0.9;
}
.report__triad-cells {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.report__triad-cell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--deep);
}
.report__triad-cell--active {
  border-color: color-mix(in srgb, var(--tc) 45%, transparent);
}
.report__triad-label {
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--muted);
}
.report__triad-cell--active .report__triad-label { color: var(--tc); }
.report__triad-nums {
  display: flex;
  gap: 8px;
}
.report__triad-num {
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 15px;
  color: var(--muted);
}
.report__triad-num--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tc);
  color: var(--bg);
}

/* Pull-quote interstitial: a per-type line between chapters. No panel — it
   breathes, echoing the result page's result__quote idiom. */
.report__pullquote {
  margin: 40px auto;
  max-width: 34em;
  text-align: center;
}
.report__pullquote-text {
  margin: 0;
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 19px;
  line-height: 1.6;
  color: var(--tc);
}

/* End-of-report chat invitation (Pass 2): the warmest onward step for a buyer,
   and chat is a headline feature. Echoes the upsell band's lit type-tinted
   panel, centred like the pull-quote. Gated in the template on ChatHref, so it
   darks with the admin chat kill-switch. Hidden in print (see @media print). */
.report__chat-cta {
  margin: 44px auto 8px;
  max-width: 34em;
  padding: 26px 28px;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--tc) 24%, var(--rule));
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--tc) 15%, var(--deep)) 0%,
    color-mix(in srgb, var(--tc) 6%, var(--deep)) 100%
  );
  box-shadow:
    0 16px 40px -26px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(243, 236, 219, 0.08);
}
.report__chat-cta-kicker {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 18px;
  color: var(--tc);
}
.report__chat-cta-lead {
  margin: 8px 0 18px;
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 17px;
  color: var(--ink);
}
.report__chat-cta-btn {
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  border-radius: 8px;
  background: var(--glow);
  color: var(--bg);
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 6px 22px -8px color-mix(in srgb, var(--glow) 65%, transparent);
}
.report__chat-cta-btn:hover { filter: brightness(1.06); }
.report__chat-cta-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Strengths & challenges: the prose bullet list becomes full-width card rows,
   the diamond marker tucked inside each card. */
.report__chapter--strengths .report__prose ul,
.report__chapter--challenges .report__prose ul {
  padding-left: 0;
}
.report__chapter--strengths .report__prose li,
.report__chapter--challenges .report__prose li {
  margin: 0 0 10px;
  padding: 14px 16px 14px 38px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--deep);
}
.report__chapter--strengths .report__prose li::before,
.report__chapter--challenges .report__prose li::before {
  left: 16px;
  top: 1.25em;
}

/* Questions: a numbered journal — decimal-leading-zero counters in the chapter-
   number idiom, replacing the diamond, with roomier ruled rhythm. */
.report__chapter--questions .report__prose ul {
  counter-reset: report-question;
  padding-left: 0;
}
.report__chapter--questions .report__prose li {
  counter-increment: report-question;
  margin: 0 0 1.1em;
  padding: 0 0 1.1em 2.4em;
  border-bottom: 1px solid var(--rule);
}
.report__chapter--questions .report__prose li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.report__chapter--questions .report__prose li::before {
  content: counter(report-question, decimal-leading-zero);
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  background: none;
  transform: none;
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--tc);
}

/* Spectrum widget: radial plot + legend. */

.spectrum {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: center;
}
.spectrum__figure {
  flex: 0 0 auto;
  margin: 0;
  width: 300px;
  max-width: 72vw;
}
.spectrum__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.spectrum__guide { fill: none; stroke: var(--rule); stroke-width: 0.5; }
.spectrum__spoke { opacity: 0.5; stroke-width: 1.4; stroke-linecap: round; }
.spectrum__spoke--primary {
  opacity: 1;
  stroke-width: 2.4;
  filter: drop-shadow(0 0 2px currentColor);
}
.spectrum__dot { opacity: 0.6; }
.spectrum__dot--primary { opacity: 1; }
.spectrum__halo {
  fill: none;
  stroke-width: 0.8;
  opacity: 0.55;
}
.spectrum__numeral {
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 5px;
  fill: var(--muted);
  text-anchor: middle;
  dominant-baseline: middle;
}
.spectrum__numeral--primary { fill: var(--glow); }

.spectrum__legend {
  flex: 1 1 240px;
  min-width: 220px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.spectrum__legend-row {
  display: grid;
  grid-template-columns: 16px 1fr 72px 28px;
  align-items: center;
  gap: 10px;
  padding-left: 10px;
  border-left: 2px solid transparent;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 15px;
  color: var(--muted);
}
/* "You are here": the primary row carries a type-colour accent bar and total. */
.spectrum__legend-row--primary {
  color: var(--ink);
  border-left-color: var(--tc);
}
.spectrum__legend-row--primary .spectrum__legend-total { color: var(--tc); }
.spectrum__legend-num { text-align: center; font-weight: 600; }
.spectrum__legend-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--rule);
  overflow: hidden;
}
.spectrum__legend-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  opacity: 0.65;
}
.spectrum__legend-row--primary .spectrum__legend-fill { opacity: 1; }
.spectrum__legend-total { text-align: right; font-variant-numeric: tabular-nums; }

/* Locked teaser state. */

.report__teaser {
  max-width: 860px;
  margin: 28px auto 0;
  text-align: center;
}
/* The page's pitch line — one personalized sentence under the paid notice. */
.report__teaser-lead {
  margin: 6px 0 26px;
  max-width: 560px;
  margin-inline: auto;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 21px;
  line-height: 1.55;
  color: var(--ink);
}
.report__teaser-lock {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 13px;
  height: 11px;
  border: 1.5px solid var(--muted);
  border-radius: 2px;
}
.report__teaser-lock::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -7px;
  transform: translateX(-50%);
  width: 9px;
  height: 8px;
  border: 1.5px solid var(--muted);
  border-bottom: none;
  border-radius: 5px 5px 0 0;
}
.report__teaser-cta {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.report__cta {
  display: inline-flex;
  align-items: center;
  padding: 12px 28px;
  border-radius: 8px;
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 16px;
}
.report__cta--locked {
  background: var(--glow);
  color: var(--bg);
  opacity: 0.85;
}
.report__buy {
  margin: 0;
}
.report__cta--buy {
  background: var(--glow);
  color: var(--bg);
  border: none;
  cursor: pointer;
}
.report__teaser-note {
  margin: 0;
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 13px;
  color: var(--muted);
}

/* Table-of-contents card: the nine chapters as numbered rows in one panel
   (like the sample card), closing with a "plus: PDF / chat" line. */
.report__toc {
  position: relative;
  max-width: 640px;
  margin: 34px auto;
  padding: 28px 34px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--deep);
  text-align: left;
}
.report__toc-eyebrow {
  margin-bottom: 18px;
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--glow);
  opacity: 0.9;
}
.report__toc-lock {
  top: 24px;
  right: 26px;
}
.report__toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  row-gap: 14px;
}
.report__toc-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
}
.report__toc-num {
  padding-top: 6px;
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--glow);
  opacity: 0.7;
}
.report__toc-title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
}
.report__toc-hook {
  margin: 2px 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
.report__toc-plus {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  /* Sits over the starfield: a bg-coloured halo dims out any star behind the
     small text (the landing hero's "dim disc" idiom, applied cheaply). */
  text-shadow: 0 0 6px var(--bg), 0 0 12px var(--bg), 0 0 20px var(--bg);
}

/* Sample block: the paywall peek — chapter-one head + the first sentence,
   faded out under a lock and a "continue reading" CTA. */
.report__sample {
  max-width: 640px;
  margin: 34px auto;
  padding: 28px 34px 26px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--deep);
  text-align: left;
}
.report__sample-eyebrow {
  margin-bottom: 14px;
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--glow);
  opacity: 0.9;
}
.report__sample-prose {
  position: relative;
  overflow: hidden;
}
/* Fade the last ~2.5em of the sampled text into the panel — the words cut. */
.report__sample-prose::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.5em;
  background: linear-gradient(to bottom, transparent, var(--deep));
  pointer-events: none;
}
/* Reuse the teaser-lock glyph, but sit it in flow and centred under the fade. */
.report__sample-lock {
  position: relative;
  top: auto;
  right: auto;
  display: block;
  margin: 20px auto 22px;
}
.report__sample-cta {
  margin-top: 0;
}

/* Reassurance row: one-time purchase · re-access · withdrawal, quiet and muted. */
.report__assure {
  margin: 32px auto 0;
  max-width: 640px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 15px;
  color: var(--muted);
  /* This row sits low on the page, over the open starfield — halo it so the
     stars behind don't strike through the small text. */
  text-shadow: 0 0 6px var(--bg), 0 0 12px var(--bg), 0 0 20px var(--bg);
}

/* "already bought? sign in" — a quiet muted line under the closing CTA, its link
   lifting to ink on hover (like the landing footer's discrete links). */
.report__signin-hint {
  margin: 18px auto 0;
  max-width: 640px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 15px;
  color: var(--muted);
  /* Also low over the starfield — same halo so stars don't strike the line. */
  text-shadow: 0 0 6px var(--bg), 0 0 12px var(--bg), 0 0 20px var(--bg);
}
.report__signin-link {
  color: var(--muted);
  text-decoration: underline;
}
.report__signin-link:hover { color: var(--ink); }
.report__signin-link:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Checkout-return banner: "payment received — link on its way", quiet and gold. */
.report__paid-notice {
  margin: 0 auto 22px;
  max-width: 560px;
  padding: 12px 20px;
  border: 1px solid color-mix(in srgb, var(--glow) 45%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--glow) 8%, transparent);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 16px;
  color: var(--muted);
}

/* ── Chat with your type ─────────────────────────────────── */

/* The chat fills the viewport (no floating card): a history sidebar beside a
   full-height chat column over the fixed starfield. Full-bleed (no centring
   margin) so the sidebar hugs the left edge. position:relative anchors the
   mobile drawer + scrim, which overlay the chat rather than shrink it. */
.chat {
  --tc: var(--glow);
  display: flex;
  flex-direction: row;
  position: relative;
  /* Fixed (not min-) height so the log scrolls internally and the input stays
     pinned in view — min-height lets a long reply grow the page and push the
     input below the fold. */
  height: 100vh;
  height: 100dvh;
  width: 100%;
  box-sizing: border-box;
}

/* History sidebar: hidden by default, shown when the root carries --nav-open
   (JS opens it on desktop, leaves it closed on mobile). On desktop it's an
   in-flow translucent column — the starfield reads through, like every other
   panel on the site; the opaque mobile drawer rules are in the media query
   below. */
.chat__nav {
  display: none;
  flex: 0 0 250px;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-right: 1px solid var(--rule);
  background: color-mix(in srgb, var(--deep) 55%, transparent);
  min-height: 0;
  box-sizing: border-box;
}
.chat--nav-open .chat__nav { display: flex; }
/* With the sidebar open the hamburger is redundant (Pass 2): on desktop the rail
   is a permanent fixture, on mobile the scrim closes it. Hide it while open. */
.chat--nav-open .chat__toggle { display: none; }
.chat__nav-head {
  flex: 0 0 auto;
  font-family: "Caveat", "Comic Sans MS", cursive;
  font-size: 15px;
  letter-spacing: 1.5px;
  text-align: center;
  color: var(--muted);
}
.chat__new {
  flex: 0 0 auto;
  padding: 10px 14px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: none;
  color: var(--ink);
  font-family: "Caveat", "Comic Sans MS", cursive;
  font-size: 18px;
  text-align: center;
  cursor: pointer;
}
.chat__new:hover { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.chat__new:focus-visible { outline: 2px solid var(--tc); outline-offset: 2px; }

/* The conversation list scrolls on its own so a long history never pushes the
   "New chat" button off-screen. */
.chat__convos {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chat__convo {
  display: flex;
  align-items: center;
  gap: 2px;
  border-radius: 6px;
}
/* Neutral ink wash + type-colored title — mixing --tc into the dark base
   made a muddy gray-khaki that matched nothing in the palette. */
.chat__convo--active { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.chat__convo--active .chat__convo-open { color: var(--tc); }
.chat__convo-open {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px;
  border: none;
  background: none;
  color: var(--ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 16px;
  line-height: 1.3;
  text-align: left;
  /* One line, cut with an ellipsis — a long first turn never grows the row. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.chat__convo-open:hover { color: var(--tc); }
.chat__convo-open:focus-visible { outline: 2px solid var(--tc); outline-offset: -2px; }
.chat__convo-del {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  opacity: 0; /* revealed on row hover / keyboard focus */
}
.chat__convo:hover .chat__convo-del,
.chat__convo-del:focus-visible { opacity: 1; }
.chat__convo-del:hover { color: var(--ink); }
.chat__convos-empty {
  padding: 8px 10px;
  color: var(--muted);
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 15px;
}

/* The chat page is the only one that scrolls mid-layout (transcript + history
   list scroll internally), so the raw browser scrollbar shows where every
   other page scrolls at the viewport edge — theme it thin and dim. The webkit
   rules cover Safari, which lacks scrollbar-color. */
.chat__log,
.chat__convos {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ink) 22%, transparent) transparent;
}
.chat__log::-webkit-scrollbar,
.chat__convos::-webkit-scrollbar { width: 8px; }
.chat__log::-webkit-scrollbar-thumb,
.chat__convos::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 4px;
}
.chat__log::-webkit-scrollbar-track,
.chat__convos::-webkit-scrollbar-track { background: transparent; }

/* The chat column: header band, scrolling transcript, pinned composer band.
   No column padding — the top and bottom bands run full-bleed so nothing
   floats over bare stars. */
.chat__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
/* Hamburger toggle for the history sidebar. Hero children are pinned to explicit grid columns so hiding the toggle (nav open) doesn't shift the back button into the 1fr track and stretch it. */
.chat__toggle {
  grid-column: 1;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1.6px solid var(--muted);
  border-radius: 6px;
  background: none;
  cursor: pointer;
}
.chat__toggle:hover { border-color: var(--ink); }
.chat__toggle:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }
.chat__toggle-bars,
.chat__toggle-bars::before,
.chat__toggle-bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}
.chat__toggle-bars { position: relative; }
.chat__toggle-bars::before,
.chat__toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.chat__toggle-bars::before { top: -6px; }
.chat__toggle-bars::after { top: 6px; }
.chat__back {
  grid-column: 3;
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border: 1.6px solid var(--muted);
  border-radius: 6px;
  color: var(--ink);
  font-family: "Caveat", "Comic Sans MS", cursive;
  font-size: 14px;
  text-decoration: none;
}
.chat__back:hover { border-color: var(--ink); }
.chat__back:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }

/* The hero is the page's full-bleed header band: sidebar toggle | title
   stack | back button on one strip, so the chrome is anchored instead of
   floating over the starfield above a rounded panel. */
.chat__hero {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--deep) 86%, transparent);
  border-bottom: 1px solid var(--rule);
}
.chat__hero-titles {
  grid-column: 2;
  min-width: 0;
  text-align: center;
}
.chat__eyebrow {
  font-family: "Caveat", "Comic Sans MS", cursive;
  font-size: 14px;
  letter-spacing: 1.5px;
  color: var(--tc);
}
.chat__title {
  margin: 2px 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  /* The band shares a row with two buttons — a long variant title truncates
     rather than wrapping the header taller. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat__subline {
  margin: 0;
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 12px;
  color: var(--muted);
}

/* The transcript grows to fill the space between hero and input, scrolling
   internally so the input stays pinned at the bottom of the viewport. */
.chat__log {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  padding: 20px 16px;
  /* Cap the transcript to a comfortable measure for the 18px Cormorant body —
     a no-op below 700px + padding, so mobile is untouched. */
  width: 100%;
  max-width: 732px; /* 700px measure + own side padding */
  margin-inline: auto;
}
.chat__msg {
  max-width: 84%;
  padding: 12px 17px;
  border-radius: 14px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 18px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere; /* a pasted URL/code must break, not widen the bubble */
}
/* Bubbles carry a solid-enough backing now that they sit over the starfield. */
.chat__msg--bot {
  align-self: flex-start;
  background: color-mix(in srgb, var(--deep) 93%, transparent);
  color: var(--ink);
  border-bottom-left-radius: 4px;
  white-space: normal; /* rendered Markdown — block elements control layout */
}
.chat__msg--user {
  align-self: flex-end;
  /* The starter-chip idiom (translucent deep fill + tc-tinted border) — a
     30% tc-into-deep mix landed on a muddy khaki outside the palette. */
  background: color-mix(in srgb, var(--deep) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--tc) 45%, transparent);
  color: var(--ink);
  border-bottom-right-radius: 4px;
}
.chat__msg--error {
  align-self: flex-start;
  color: var(--muted);
  font-style: italic;
}

/* Rendered-Markdown elements inside a bot bubble. The bubble padding owns the
   outer spacing, so the first/last child shed their margins. */
.chat__msg > :first-child { margin-top: 0; }
.chat__msg > :last-child { margin-bottom: 0; }
.chat__msg p { margin: 0 0 0.65em; }
.chat__msg ul,
.chat__msg ol { margin: 0.4em 0 0.65em; padding-left: 1.4em; }
.chat__msg li { margin: 0.2em 0; }
.chat__msg strong { font-weight: 700; }
.chat__msg em { font-style: italic; }
.chat__msg code {
  font-family: "Consolas", "Menlo", monospace;
  font-size: 0.85em;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  padding: 1px 5px;
  border-radius: 4px;
}
.chat__msg blockquote {
  margin: 0.55em 0;
  padding: 2px 0 2px 14px;
  border-left: 2px solid color-mix(in srgb, var(--tc) 60%, transparent);
  color: color-mix(in srgb, var(--ink) 85%, transparent);
  font-style: italic;
}
.chat__msg hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 0.85em 0;
}
/* A heading rendered as an inline sub-head, not a giant <h2>, to fit a bubble. */
.chat__md-h {
  display: block;
  font-style: normal;
  font-weight: 600;
  font-size: 0.95em;
  letter-spacing: 0.2px;
  color: var(--tc);
  margin: 0.7em 0 0.15em;
}

/* Starter-question chips: a wrapping row of pills above the composer, shown
   only on a fresh transcript (JS toggles --hidden). Capped to the same reading
   column as the log and form. */
.chat__starters {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 10px;
  width: 100%;
  max-width: 732px;
  margin-inline: auto;
  box-sizing: border-box;
}
.chat__starters--hidden { display: none; }
.chat__starter {
  padding: 8px 13px;
  border: 1px solid color-mix(in srgb, var(--tc) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--deep) 70%, transparent);
  color: var(--ink);
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 13px;
  line-height: 1.3;
  cursor: pointer;
}
.chat__starter:hover { background: color-mix(in srgb, var(--tc) 16%, transparent); }
.chat__starter:focus-visible { outline: 2px solid var(--tc); outline-offset: 2px; }

/* The composer is the page's full-bleed bottom band, bookending the header:
   the backing runs edge to edge while the padding trick caps the input row to
   the transcript's 700px measure. */
.chat__form {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  align-items: flex-end;
  border-top: 1px solid var(--rule);
  background: color-mix(in srgb, var(--deep) 86%, transparent);
  padding: 12px max(16px, calc((100% - 700px) / 2)) 14px;
  width: 100%;
  box-sizing: border-box;
}
.chat__input {
  flex: 1;
  resize: none; /* the grabber corner is gone; chat.js auto-grows the field */
  min-height: 44px;
  max-height: 160px;
  overflow-y: auto;
  padding: 10px 14px;
  border: 1.6px solid var(--muted);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  color: var(--ink);
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 16px; /* not smaller — iOS zooms the page on focusing a <16px field */
  line-height: 1.4;
}
.chat__input:focus-visible { outline: 2px solid var(--tc); outline-offset: 1px; }
.chat__input:disabled { opacity: 0.6; }
.chat__send {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  background: var(--tc);
  color: var(--bg);
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 16px;
  cursor: pointer;
}
.chat__send:disabled { opacity: 0.5; cursor: default; }
.chat__send:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Visually-hidden label kept for the textarea's accessible name. */
.chat__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

/* The scrim sits behind the mobile drawer (tap to close); it never shows on
   desktop, where the sidebar is in-flow. */
.chat__scrim { display: none; }

/* On narrow screens the sidebar overlays the chat as an off-canvas drawer
   instead of shrinking it — so opening history never squeezes the conversation
   on a phone. */
@media (max-width: 719px) {
  .chat__hero { gap: 8px; padding: 8px 10px; }
  .chat__eyebrow { display: none; } /* title + subline carry the context */
  .chat__title { font-size: 21px; }
  .chat--nav-open .chat__nav {
    position: absolute;
    inset: 0 auto 0 0;
    width: min(82vw, 300px);
    z-index: 30;
    background: var(--deep); /* opaque, so the chat doesn't bleed through */
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
  }
  .chat--nav-open .chat__scrim {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 20;
    background: rgba(0, 0, 0, 0.45);
  }
}

/* Touch screens have no hover to reveal the delete ✕ or to forgive small
   targets: surface the control at rest and pad the compact chat pills up to a
   ~44px hit area. Keyed on hover:none (not width) so a narrow desktop window
   keeps its mouse-sized chrome. */
@media (hover: none) {
  .chat__convo-del {
    opacity: 0.55;
    width: 40px;
    height: 40px;
  }
  .chat__back,
  .chat__starter {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* ── Resend my report ────────────────────────────────────── */

.resend {
  max-width: 540px;
  margin: 0 auto;
  padding: 64px 24px 80px;
  text-align: center;
}
.resend__heading {
  margin: 0 0 12px;
  font-family: "Caveat", "Comic Sans MS", cursive;
  font-size: 40px;
  color: var(--ink);
}
.resend__intro,
.resend__confirm {
  margin: 0 0 24px;
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
}
.resend__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.resend__label {
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 14px;
  color: var(--ink);
}
.resend__input {
  padding: 12px 14px;
  border: 1.6px solid var(--muted);
  border-radius: 8px;
  /* Not fully transparent — starfield dots inside the field read as dust. */
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  color: var(--ink);
  font-size: 16px;
}
.resend__input:focus-visible {
  border-color: var(--ink);
  outline: 2px solid var(--glow);
  outline-offset: 2px;
}
.resend__submit {
  margin-top: 6px;
  padding: 12px 28px;
  border: none;
  border-radius: 8px;
  background: var(--glow);
  color: var(--bg);
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 16px;
  cursor: pointer;
}
.resend__submit:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ── Account (magic-link sign-in) ────────────────────────── */

.account {
  max-width: 600px;
  margin: 0 auto;
  padding: 64px 24px 80px;
  text-align: center;
}
.account__panel,
.resend__panel {
  background: var(--deep);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 40px 44px;
}
.account__kicker,
.resend__kicker {
  margin: 0 0 18px;
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--glow);
  opacity: 0.9;
}
.account__heading {
  margin: 0 0 12px;
  font-family: "Caveat", "Comic Sans MS", cursive;
  font-size: 40px;
  color: var(--ink);
}
.account__intro,
.account__confirm,
.account__signed-in,
.account__empty {
  margin: 0 0 24px;
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
}
.account__error {
  margin: 0 0 16px;
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 15px;
  color: var(--glow);
}
.account__email { color: var(--ink); font-weight: 600; }
/* A long address breaks rather than pushing the centred column wide. */
.account__signed-in { overflow-wrap: anywhere; }
.account__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.account__label {
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 14px;
  color: var(--ink);
}
.account__input {
  padding: 12px 14px;
  border: 1.6px solid var(--muted);
  border-radius: 8px;
  /* Not fully transparent — starfield dots inside the field read as dust. */
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  color: var(--ink);
  font-size: 16px;
}
.account__input:focus-visible {
  border-color: var(--ink);
  outline: 2px solid var(--glow);
  outline-offset: 2px;
}
.account__submit,
.account__confirm-btn,
.account__start-btn {
  width: 100%;
  margin-top: 6px;
  padding: 12px 28px;
  border: none;
  border-radius: 8px;
  background: var(--glow);
  color: var(--bg);
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 16px;
  cursor: pointer;
}
.account__submit:focus-visible,
.account__confirm-btn:focus-visible,
.account__start-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.account__subheading {
  margin: 32px 0 12px;
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 22px;
  color: var(--ink);
}
.account__reports {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  text-align: left;
}
.account__report {
  border-top: 1px solid color-mix(in srgb, var(--muted) 40%, transparent);
  padding: 0; /* the link is the click target now, so it carries the padding */
}
.account__report:last-child { border-bottom: 1px solid color-mix(in srgb, var(--muted) 40%, transparent); }
.account__report-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 10px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 20px;
  font-style: italic;
  color: var(--ink);
  text-decoration: none;
}
/* Neutral ink wash on the whole row (same idiom as the active chat convo row)
   rather than an underline, now that the click target is the full row. */
.account__report-link:hover,
.account__report-link:focus-visible {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.account__report-link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px; /* keep the ring inside the row edges */
}
.account__report-chevron {
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
}
.account__report-link:hover .account__report-chevron,
.account__report-link:focus-visible .account__report-chevron { color: var(--ink); }
.account__logout { margin-top: 16px; }
.account__logout-btn {
  padding: 8px 18px;
  border: 1px solid var(--muted);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 14px;
  cursor: pointer;
}
.account__logout-btn:hover,
.account__logout-btn:focus-visible { color: var(--ink); border-color: var(--ink); }

@media (max-width: 720px) {
  .report { padding: 24px 16px 60px; }
  .report__hero-diagram { width: 160px; height: 160px; }
  .report__title { font-size: 36px; }
  .report__overlay--card { margin-top: 4px; padding: 0 20px 28px; }
  .report__panel { margin-top: 22px; }
  .report__chapter-title { font-size: 25px; }
  .report__glance { grid-template-columns: 1fr; }
  .report__triad-cells { grid-template-columns: 1fr; }
  .spectrum { justify-content: center; }
  .spectrum__figure { width: 260px; }
  .report__toc { padding: 22px 20px; }
}

/* The narrowest phones (~360px): one more step down from the ≤640px display
   heading size, at an exact 1.5x narrow-phone scale (42px × 1.5 = 63px).
   Long type names are contained by .result__heading's own width/overflow-wrap
   rules rather than by promising a fixed two-line layout.
   After the ≤640/≤720 queries in source order, so it wins the
   equal-specificity cascade. */
@media (max-width: 400px) {
  .result__heading { font-size: 63px; }
  .report__title { font-size: 32px; }
}

/* Print stylesheet — the MVP "PDF" is a browser print of the report page. */

@media print {
  body {
    background: #fff;
    color: #14141a;
  }
  .starfield,
  .report__topbar,
  .report__chat-cta { display: none !important; }
  .report { padding: 0; background: #fff; }
  .report__overlay--card,
  .report__panel {
    max-width: none;
    margin: 0;
    padding: 0;
    background: #fff;
    border: none;
  }
  .report__teaser { max-width: none; margin: 0; }
  .report__chapter { break-inside: avoid; }
  .report__divider::before,
  .report__divider::after { background: #ddd; }
  .report__title,
  .report__chapter-title,
  .report__toc-title { color: #14141a; }
  .report__prose,
  .spectrum__legend-row,
  .spectrum__legend-row--primary { color: #2a2a33; }
  .report__chapter-num,
  .report__eyebrow,
  .report__subline { color: #555; }
  .report__glance-cell {
    background: #fff;
    border: 1px solid #ddd;
  }
  .report__glance-label { color: #555; }
  .report__glance-text { color: #2a2a33; }
  .report__triad-cell,
  .report__chapter--strengths .report__prose li,
  .report__chapter--challenges .report__prose li {
    background: #fff;
    border: 1px solid #ddd;
  }
  .report__triad-num--primary {
    background: none;
    border: 1px solid var(--tc);
    color: #2a2a33;
  }
  .report__pullquote-text { color: #2a2a33; }
  .report__chapter--questions .report__prose li { border-bottom: 1px solid #ddd; }
  .report__chapter--questions .report__prose li:last-child { border-bottom: none; }
  .report__chapter--questions .report__prose li::before { color: #555; }
  .spectrum__guide { stroke: #ccc; }
  .spectrum__legend-bar { background: #e4e4ea; }
  a { color: inherit; text-decoration: none; }
  /* The starfield halos are dark discs — drop them on the white print page. */
  .report__toc-plus,
  .report__assure,
  .report__signin-hint { text-shadow: none; }
}

/* ── Upsell band → the paid report (result + reading pages) ── */

.report-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 24px;
  max-width: 640px;
  margin: 28px auto;
  padding: 20px 26px;
  border: 1px solid color-mix(in srgb, var(--tc) 24%, var(--rule));
  border-radius: 14px;
  /* The free→paid bridge: a lit glass panel, type-tinted and lifted off the
   * veiled page, so it reads as a distinct, enticing offer rather than a
   * faint box that blends into the background. */
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--tc) 15%, var(--deep)) 0%,
    color-mix(in srgb, var(--tc) 6%, var(--deep)) 100%
  );
  box-shadow:
    0 16px 40px -26px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(243, 236, 219, 0.08);
}

.report-band__eyebrow {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 20px;
}

/* The paywall peek — one teaser line from the identity chapter. Same serif
   italic as the report's sample prose, but smaller and quieter: it's a single
   line inside a compact band, not a prose block. */
.report-band__sample {
  margin: 8px 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.4;
  color: var(--muted);
}

.report-band__chips {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.report-band__chip {
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 12px;
  padding: 3px 11px;
  border: 1px solid color-mix(in srgb, var(--tc) 32%, var(--rule));
  border-radius: 999px;
  background: color-mix(in srgb, var(--tc) 10%, transparent);
  color: var(--ink);
}
.report-band__more {
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 12px;
  color: var(--muted);
}

.report-band__form { margin: 0; }
.report-band__cta {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 11px 22px;
  border: none;
  border-radius: 8px;
  background: var(--glow);
  color: var(--bg);
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 22px -8px color-mix(in srgb, var(--glow) 65%, transparent);
}
.report-band__cta:hover { filter: brightness(1.06); }
.report-band__cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

@media (max-width: 720px) {
  .report-band {
    margin: 22px auto;
    padding: 16px 18px;
  }
  .report-band__cta { width: 100%; justify-content: center; }
}

@media print {
  .report-band { display: none !important; }
}

/* ── Site footer (discrete legal links) ──────────────────── */

/* Layout-level chrome: the footer renders at the true foot of every public
   page except the wizard and chat surfaces. Deliberately quiet — muted text,
   no rule, no chrome, right-aligned. */
.site-footer {
  /* Lift above the fixed .starfield backdrop (z-index 0), like .content —
     as a non-positioned sibling of <main> it painted underneath it. */
  position: relative;
  z-index: 1;
  padding: 16px 28px 22px;
  text-align: right;
}
.site-footer-links {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
.site-footer-link {
  color: var(--muted);
  font-size: 15px;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.site-footer-link:hover { color: var(--ink); }
.site-footer-link:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 3px;
  border-radius: 4px;
}
.site-footer-sep {
  color: var(--rule);
  font-size: 15px;
}

/* ── Legal pages (privacy, terms) ────────────────────────── */

.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 20px 64px;
}
.legal__topbar {
  margin-bottom: 16px;
}
/* Shared back-link pill: the legal topbar idiom, reused on the signin/resend
   surfaces so they're no longer dead ends (Pass 2). */
.legal__back,
.account__back,
.resend__back {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border: 1.6px solid var(--muted);
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font-family: "Caveat", "Comic Sans MS", cursive;
  font-size: 16px;
  text-decoration: none;
}
.legal__back:hover,
.account__back:hover,
.resend__back:hover { border-color: var(--ink); }
.legal__back:focus-visible,
.account__back:focus-visible,
.resend__back:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }

/* The account/resend sections are centred; the topbar keeps its back pill at the
   left edge above the centred content. */
.account__topbar,
.resend__topbar {
  text-align: left;
  margin-bottom: 24px;
}

.legal__panel {
  background: var(--deep);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 34px 38px;
}
.legal__title {
  margin: 0 0 6px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 42px;
  letter-spacing: -0.5px;
}
.legal__prose {
  font-size: 19px;
  line-height: 1.7;
  color: var(--ink);
  overflow-wrap: anywhere; /* contact URLs/emails in the prose must break, not overflow */
}
.legal__prose h2 {
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  margin: 1.5em 0 0.4em;
}
.legal__prose h3 {
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
  margin: 1.2em 0 0.3em;
}
.legal__prose p { margin: 0 0 1em; }
.legal__prose p:last-child { margin-bottom: 0; }
.legal__prose ul {
  margin: 0 0 1em;
  padding-left: 1.3em;
}
.legal__prose li { margin: 0 0 0.4em; }

@media (max-width: 720px) {
  .legal { padding: 24px 14px 48px; }
  .legal__panel { padding: 24px 20px; }
  .account__panel,
  .resend__panel { padding: 28px 20px; }
  .legal__title { font-size: 32px; }
}

.error-page {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px 64px;
}
.error-page__code {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(72px, 18vw, 120px);
  line-height: 1;
  color: var(--glow);
  opacity: 0.3;
}
.error-page__heading {
  margin: 12px 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 4vw, 34px);
  color: var(--ink);
}
.error-page__body {
  margin: 16px 0 0;
  max-width: 46ch;
  font-size: 19px;
  line-height: 1.65;
  color: var(--muted);
  /* Bare over the open starfield — halo so stars don't strike the small text. */
  text-shadow: 0 0 6px var(--bg), 0 0 12px var(--bg), 0 0 20px var(--bg);
}
.error-page__home {
  margin-top: 28px;
  color: var(--glow);
  text-transform: lowercase;
  letter-spacing: 2px;
  text-decoration: none;
}
.error-page__home:hover { text-decoration: underline; text-underline-offset: 4px; }
.error-page__home:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }

/* Phone readability anchor. `screen` keeps this out of report print output. */
@media screen and (max-width: 720px) {
  .wizard__statement-body,
  .about__prose,
  .report__prose,
  .reading__body,
  .legal__prose,
  .error-page__body {
    font-size: 20px;
  }
}