/* ============ TypeKingdom: DISC & MBTI ============ */

:root {
  /* Phase 3B: the warm/beige greys are gone. --paper used to be the page
     canvas AND a component fill; the canvas is now Kingdom White, so --paper
     survives only as the second surface (option rows, quote blocks, inset
     panels) that still has to read as "not a card" against white. */
  --ink: #272238;
  --ink-soft: #4b4660;
  --ink-muted: #7a7590;
  --paper: #f7f5fd;
  --surface: #ffffff;
  --line: #e7e3f3;

  /* The public brand violet is Royal Violet. --disc-c and the Guardian realm
     palettes deliberately keep their own values: those encode data, not brand. */
  --violet: #6654e8;
  --violet-deep: #5442d4;
  --violet-soft: #eeebff;
  --coral: #e8654f;
  --coral-soft: #fdeae6;
  --gold: #e3a63c;
  --teal: #2a9d8f;
  --teal-soft: #e3f4f2;

  --disc-d: #e8654f;
  --disc-i: #e3a63c;
  --disc-s: #2a9d8f;
  --disc-c: #6c5ce7;

  /* Two distinct values, deliberately not one.

     --header-row-h is an INPUT: the header's nominal single-row height, a
     design constant the header sizes itself from.

     --header-h is an OUTPUT: the header's real rendered height, republished
     by js/app.js. It changes when the header wraps to a second row between
     the mobile drawer breakpoint and full desktop width. Anything that must
     sit clear of the header reads this instead of hardcoding a number.

     The header must never size itself from --header-h: that would make its
     height depend on its own measurement and grow without bound. */
  --header-row-h: 64px;
  --header-h: 64px;

  --radius: 16px;
  /* Lower and softer than before. On a white canvas the old shadow was doing
     the separating work borders should do, which is what made the cards read
     as generic floating SaaS panels. */
  --shadow: 0 1px 2px rgba(39, 34, 56, 0.04), 0 6px 18px rgba(39, 34, 56, 0.06);
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--tk-white);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.container.narrow { max-width: 720px; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; }

/* ============ Header ============ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid var(--line);
}
/* The frosted blur lives on a pseudo-element, NOT on .site-header itself.
   backdrop-filter makes an element the containing block for its
   position: fixed descendants, and the mobile drawer and its backdrop live
   inside the header (the nav has to stay there for the desktop flex row).
   That trapped both inside the 66px header instead of the viewport, so the
   backdrop covered only the header strip and taps outside it never closed
   the drawer. Moving the filter to a child keeps the identical appearance
   and leaves the header an ordinary ancestor. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  backdrop-filter: blur(12px);
  pointer-events: none;
}
/* min-height, not height: between the mobile drawer breakpoint and full
   desktop width the nav wraps its CTA onto a second row, and a fixed height
   let that row render OUTSIDE the header box (overflow is visible), landing
   on top of the sticky result nav below. Letting the header grow keeps its
   own content inside it at every width; --header-h then keeps whatever
   sticks below it in the right place. Single-row widths are unaffected:
   the tallest item is 40px, so min-height still governs. */
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; row-gap: 6px; min-height: var(--header-row-h); padding: 6px 0;
}
.logo {
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 700;
  color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 9px;
}
/* The crest is an <img>, not a glyph: one asset serves the app shell, the two
   standalone pages and the generated blog, so there is a single place to
   change the mark. No tile, no glow -- it sits directly on the white header. */
/* 35px, not the 30px it shipped at in Phase 3B: at 30 the crown read as a
   speck beside a 1.25rem serif wordmark. Still under the header's 40px tallest
   item, so --header-row-h continues to govern and the bar does not grow. */
.logo-mark { width: 35px; height: 35px; display: block; flex: none; }
/* 26px, not 28px. The 35px crest is ~5px wider than the lockup was, which was
   enough to push the nav onto its own row for every width from 961px to
   1028px. Two pixels off each of the seven gaps buys back 14px and moves that
   wrap threshold below where it sat before the crest grew. */
.nav { display: flex; gap: 26px; }
.nav a {
  color: var(--ink-soft); text-decoration: none; font-size: 0.92rem; font-weight: 500;
  transition: color 0.15s;
}
.nav a:hover { color: var(--violet); }

/* ============ Views ============ */
.view { display: none; }
.view.active { display: block; animation: fadeIn 0.35s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ============ Hero ============

   The homepage hero is the only user of .hero, so these rules are the hero
   and nothing else. Deliberately left-aligned rather than centred: a centred
   column under a lone headline is the house style of every generated landing
   page, and the asymmetry is what makes the white space read as composed
   instead of empty. */
.hero {
  text-align: left;
  padding: 64px 0 0;
  background: var(--tk-white);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tk-plum);
  background: var(--tk-lilac);
  padding: 7px 15px; border-radius: 999px; margin-bottom: 22px;
}
/* One small dot of brand colour, in place of a fully violet chip. */
.eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--tk-violet); flex: none;
}
.hero-sub {
  font-size: 1.1rem; color: var(--ink-soft);
  max-width: 34em; margin: 0 0 32px;
}
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-meta { margin-top: 20px; font-size: 0.85rem; color: var(--ink-muted); }

/* ============ Buttons ============ */
.btn {
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 600;
  padding: 12px 24px; border-radius: 12px; border: none; cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, background 0.15s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-lg { padding: 15px 30px; font-size: 1.02rem; }
.btn-primary { background: var(--violet); color: #fff; box-shadow: 0 3px 12px rgba(102, 84, 232, 0.28); }
.btn-primary:hover { background: var(--violet-deep); }
.btn-secondary { background: var(--ink); color: #fff; box-shadow: 0 4px 14px rgba(30, 27, 46, 0.25); }
.btn-secondary:hover { background: #35304d; }
.btn-ghost { background: transparent; color: var(--ink-soft); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--ink-muted); color: var(--ink); }
.btn-link {
  background: none; border: none; color: var(--ink-muted); font-weight: 500;
  font-size: 0.9rem; cursor: pointer; padding: 4px 0; font-family: var(--font-body);
}
.btn-link:hover { color: var(--violet); }

/* ============ Cards ============ */
.cards { display: grid; gap: 24px; margin: 56px 0; }
.cards.two-col { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.cards.three-col { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow);
}
.test-card h2 { font-size: 1.5rem; margin: 18px 0 12px; }
.test-card p { color: var(--ink-soft); font-size: 0.95rem; }
.card-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: #fff;
}
.mbti-icon { background: linear-gradient(135deg, var(--violet), var(--violet-deep)); }
.disc-icon { background: linear-gradient(135deg, var(--coral), #c94a35); }
.dichotomy-list { list-style: none; margin: 18px 0 14px; }
.dichotomy-list li {
  padding: 8px 0; border-bottom: 1px dashed var(--line);
  font-size: 0.92rem; color: var(--ink-soft);
}
.dichotomy-list li:last-child { border-bottom: none; }
.dichotomy-list strong { color: var(--ink); display: inline-block; min-width: 44px; }
.card-meta { font-size: 0.82rem !important; color: var(--ink-muted) !important; margin-bottom: 18px; }

/* ============ About ============ */
.about-section { padding-bottom: 72px; }
.section-title { text-align: center; font-size: 2rem; margin-top: 24px; }
.info-card h3 { font-size: 1.15rem; margin-bottom: 10px; color: var(--violet-deep); }
.info-card p { font-size: 0.9rem; color: var(--ink-soft); }
.disclaimer {
  background: var(--teal-soft); border: 1px solid #c5e6e2; border-radius: var(--radius);
  padding: 20px 24px; font-size: 0.9rem; color: #1d6a60;
}
.disclaimer.small { margin-top: 28px; font-size: 0.82rem; }

/* ============ Test view ============ */
#view-test { padding: 40px 0 80px; }
.test-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.test-title-label { font-size: 0.85rem; font-weight: 600; color: var(--ink-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.progress-track { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.progress-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--violet), var(--coral));
  border-radius: 999px; transition: width 0.3s ease;
}
.progress-text { font-size: 0.82rem; color: var(--ink-muted); margin: 8px 0 24px; }

.question-card { padding: 40px; }
.question-number { font-size: 0.8rem; font-weight: 600; color: var(--violet); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 10px; }
.question-text { font-size: 1.45rem; margin-bottom: 28px; min-height: 3.5em; }

/* :not([hidden]) so the hidden attribute genuinely hides the control. A bare
   `.likert { display:flex }` would override the UA [hidden]{display:none} rule
   (author beats UA), leaving both response controls on screen at once. */
.likert:not([hidden]) { display: flex; flex-direction: column; gap: 10px; }
/* Phase 3C: answer rows are white and carry their state in the border, not in
   a tint. Every row being lavender meant the page was coloured before the
   reader had chosen anything, which is what made the assessment read as a
   lavender SaaS form rather than a considered question. */
.likert-option {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-body); font-size: 0.98rem; font-weight: 500; color: var(--ink-soft);
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px;
  padding: 14px 18px; cursor: pointer; text-align: left;
  transition: border-color 0.12s, background 0.12s, transform 0.12s;
}
.likert-option:hover { border-color: var(--violet); background: var(--tk-lilac); transform: translateX(2px); }
.likert-option.selected { border-color: var(--violet); background: var(--tk-lilac); color: var(--violet-deep); font-weight: 600; }
.likert-option:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.likert-dot { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; }
.likert-dot.d1 { background: #e8654f; opacity: 0.85; }
.likert-dot.d2 { background: #eda08f; }
.likert-dot.d3 { background: #cfc9bd; }
.likert-dot.d4 { background: #9d92e8; }
.likert-dot.d5 { background: #6c5ce7; }

.forced-choice:not([hidden]) { display: flex; flex-direction: column; gap: 12px; }
.forced-choice-option {
  font-family: var(--font-body); font-size: 1rem; font-weight: 500; color: var(--ink-soft);
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px;
  padding: 18px 20px; cursor: pointer; text-align: left; line-height: 1.4;
  transition: border-color 0.12s, background 0.12s, transform 0.12s;
}
.forced-choice-option:hover { border-color: var(--violet); background: var(--tk-lilac); transform: translateX(2px); }
.forced-choice-option.selected { border-color: var(--violet); background: var(--tk-lilac); color: var(--violet-deep); font-weight: 600; }
.forced-choice-option:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }

.question-nav { display: flex; justify-content: space-between; margin-top: 26px; }

/* ============ Results ============ */
#view-results { padding: 48px 0 80px; }
.result-hero { text-align: center; margin-bottom: 36px; }
.result-kicker { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 12px; }
.result-type {
  font-family: var(--font-display); font-size: clamp(3rem, 8vw, 4.5rem); font-weight: 700;
  letter-spacing: 0.04em; line-height: 1;
  background: linear-gradient(120deg, var(--violet), var(--coral));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.result-name { font-size: 1.5rem; font-family: var(--font-display); margin-top: 8px; color: var(--ink); }
.result-tagline { color: var(--ink-soft); font-size: 1.05rem; max-width: 560px; margin: 10px auto 0; }

.trait-bars { margin: 32px 0; }
.trait-bar-row { margin-bottom: 22px; }
.trait-labels { display: flex; justify-content: space-between; font-size: 0.88rem; font-weight: 600; margin-bottom: 6px; }
.trait-labels .left-label { color: var(--violet-deep); }
.trait-labels .right-label { color: var(--coral); }
.trait-labels .dim { opacity: 0.45; font-weight: 500; }
.trait-track { height: 14px; background: var(--line); border-radius: 999px; position: relative; overflow: hidden; }
.trait-fill { height: 100%; border-radius: 999px; transition: width 0.6s ease; }
.trait-fill.left { background: var(--violet); }
.trait-fill.right { background: var(--coral); margin-left: auto; }
.trait-pct { font-size: 0.78rem; color: var(--ink-muted); margin-top: 4px; }

/* DISC bars */
.disc-bar-row { display: grid; grid-template-columns: 150px 1fr 52px; align-items: center; gap: 14px; margin-bottom: 16px; }
.disc-bar-label { font-size: 0.9rem; font-weight: 600; }
.disc-track { height: 18px; background: var(--line); border-radius: 999px; overflow: hidden; }
.disc-fill { height: 100%; border-radius: 999px; transition: width 0.6s ease; }
.disc-fill.d { background: var(--disc-d); }
.disc-fill.i { background: var(--disc-i); }
.disc-fill.s { background: var(--disc-s); }
.disc-fill.c { background: var(--disc-c); }
.disc-pct { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); text-align: right; }

.result-section { margin-top: 28px; }
.result-section h3 {
  font-size: 1.2rem; margin-bottom: 12px;
  display: flex; align-items: center; gap: 10px;
}
.result-section h3 .icon { font-size: 1.1rem; }
.result-section p { color: var(--ink-soft); font-size: 0.96rem; }
.pill-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pill {
  background: var(--violet-soft); color: var(--violet-deep);
  font-size: 0.85rem; font-weight: 500; padding: 6px 14px; border-radius: 999px;
}
.pill.warm { background: var(--coral-soft); color: #b34a37; }
.pill.cool { background: var(--teal-soft); color: #1d6a60; }

.results-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; justify-content: center; }

/* ============ Footer ============ */
.site-footer {
  border-top: 1px solid var(--line); padding: 32px 0; margin-top: 40px;
  text-align: center; color: var(--ink-muted); font-size: 0.85rem;
}
.footnote { font-size: 0.75rem; margin-top: 6px; opacity: 0.8; }

/* ============ Responsive ============ */
@media (max-width: 640px) {
  .header-inner { flex-direction: column; height: auto; padding: 10px 0; gap: 4px; }
  .nav { gap: 16px; }
  .nav a { font-size: 0.82rem; white-space: nowrap; }
  /* No bottom padding: .hero-lede carries the spacing now, and the banner
     rule has to sit flush against the edge of the white canvas. */
  .hero { padding: 56px 0 0; }
  .question-card { padding: 26px 20px; }
  .question-text { font-size: 1.2rem; min-height: 0; }
  .disc-bar-row { grid-template-columns: 110px 1fr 44px; }
}

/* ============ v2: homepage sections ============ */
.section { padding: 56px 0 8px; }
.section-sub { text-align: center; color: var(--ink-soft); max-width: 560px; margin: 10px auto 0; }
.section .section-title { margin-bottom: 4px; }
.center { text-align: center; margin-top: 28px; }
.btn-xl { padding: 18px 38px; font-size: 1.1rem; border-radius: 14px; }

.proof-strip {
  margin-top: 24px; display: flex; gap: 10px; align-items: center; justify-content: center;
  font-size: 0.9rem; color: var(--ink-soft);
}
.stars { color: var(--gold); letter-spacing: 2px; font-size: 1rem; }

/* what you unlock */
.unlock-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px; margin-top: 28px;
}
/* Phase 3C: no shadow at all. These are six short lines of text, and lifting
   each one off the page was the whole of what made them read as generated
   SaaS tiles. The border alone is enough to group them. */
.unlock-item {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 18px; font-weight: 600; font-size: 0.95rem; color: var(--ink);
}

/* journey steps */
.steps { display: flex; align-items: stretch; gap: 8px; margin-top: 28px; flex-wrap: wrap; }
.step {
  flex: 1; min-width: 180px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow);
}
.step h3 { font-size: 1.02rem; margin: 10px 0 6px; }
.step p { font-size: 0.85rem; color: var(--ink-soft); }
.step-num {
  width: 34px; height: 34px; border-radius: 50%; background: var(--violet); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.step-arrow { align-self: center; color: var(--ink-muted); font-size: 1.3rem; }

/* coming soon ecosystem */
.coming-soon-grid { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.coming-label { font-size: 0.85rem; color: var(--ink-muted); margin-right: 4px; }
.soon-pill {
  border: 1.5px dashed var(--line); color: var(--ink-muted); border-radius: 999px;
  padding: 5px 14px; font-size: 0.82rem; font-weight: 500; background: var(--surface);
}

/* report preview */
/* Was a lavender-to-peach wash. Swapping beige for a big pastel panel would
   have traded one generic surface for another, so the separation is now a
   border and the same soft shadow every other card uses. */
.report-preview-section {
  background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  border-radius: 24px; padding: 48px 32px 40px; margin-top: 48px;
}
.preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 30px; }
.preview-card {
  background: var(--surface); border-radius: var(--radius); padding: 22px;
  box-shadow: var(--shadow); transform: rotate(-0.4deg);
}
.preview-card:nth-child(2) { transform: rotate(0.5deg); }
.preview-kicker { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 8px; }
.preview-type {
  font-family: var(--font-display); font-size: 2.6rem; font-weight: 700;
  background: linear-gradient(120deg, var(--violet), var(--coral));
  -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1;
}
.preview-name { font-family: var(--font-display); font-size: 1.05rem; margin: 4px 0 14px; }
.mini-bar { height: 10px; background: var(--line); border-radius: 999px; margin-bottom: 8px; overflow: hidden; }
.mini-fill { height: 100%; border-radius: 999px; }
.mini-fill.violet { background: var(--violet); }
.mini-fill.coral { background: var(--coral); }
.mini-fill.teal { background: var(--teal); }
.preview-radar { width: 100%; max-width: 180px; display: block; margin: 0 auto; }
.radar-label { font-family: var(--font-body); font-size: 13px; font-weight: 700; fill: var(--ink-soft); }

/* testimonials */
.quote-card .stars { margin-bottom: 10px; }
.quote { font-size: 0.95rem; color: var(--ink); font-style: italic; }
.quote-by { margin-top: 12px; font-size: 0.85rem; color: var(--ink-muted); }

/* pricing */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; margin-top: 30px; }
.price-card { position: relative; display: flex; flex-direction: column; }
.price-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.price { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--violet-deep); margin-bottom: 14px; }
.price-note { font-size: 0.85rem; font-weight: 400; color: var(--ink-muted); }
.price-features { list-style: none; margin-bottom: 20px; flex: 1; }
.price-features li { font-size: 0.86rem; color: var(--ink-soft); padding: 5px 0; }
.price-card.featured { border: 2px solid var(--violet); box-shadow: 0 8px 28px rgba(102, 84, 232, 0.16); }
.badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--violet); color: #fff; font-size: 0.72rem; font-weight: 700;
  padding: 4px 14px; border-radius: 999px; letter-spacing: 0.04em;
}

/* FAQ */
.faq-list { max-width: 720px; margin: 28px auto 0; }
.faq-item {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 4px 20px; margin-bottom: 10px;
}
.faq-item summary {
  cursor: pointer; font-weight: 600; padding: 14px 0; font-size: 0.98rem;
  list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.faq-item summary::after { content: "+"; font-size: 1.3rem; color: var(--violet); }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { padding: 0 0 16px; color: var(--ink-soft); font-size: 0.92rem; }

/* final CTA */
.final-cta { text-align: center; padding: 64px 0 72px; }
.final-cta h2 { font-size: 2rem; margin-bottom: 8px; }
.final-cta p { color: var(--ink-soft); margin-bottom: 22px; }

/* ============ v2: results & sample report ============ */
.section-followup { margin-top: 14px; }
.disc-chart-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: center; }
.disc-radar { width: 100%; max-width: 240px; margin: 0 auto; display: block; }
.radar-wrap { text-align: center; }

/* share section */
.share-card-section { margin-top: 28px; border: 2px solid var(--violet-soft); }
.share-card-section h3 { font-size: 1.25rem; margin-bottom: 6px; }
.share-card-section > p { color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 16px; }
.share-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.share-btn {
  display: inline-block; padding: 10px 18px; border-radius: 10px; font-size: 0.88rem;
  font-weight: 600; color: #fff; text-decoration: none; border: none; cursor: pointer;
  font-family: var(--font-body); transition: transform 0.12s, opacity 0.12s;
}
.share-btn:hover { transform: translateY(-1px); opacity: 0.92; }
.share-btn.wa { background: #25d366; }
.share-btn.fb { background: #1877f2; }
.share-btn.li { background: #0a66c2; }
.share-btn.tw { background: #1e1b2e; }
.share-btn.dl { background: var(--violet); }

.referral-box, .email-box {
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px; margin-top: 12px;
}
.referral-box p, .email-box p { font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 10px; }
.referral-row { display: flex; gap: 10px; flex-wrap: wrap; }
.text-input {
  flex: 1; min-width: 200px; padding: 11px 14px; border: 1.5px solid var(--line);
  border-radius: 10px; font-family: var(--font-body); font-size: 0.9rem; color: var(--ink);
  background: var(--surface);
}
.text-input:focus { outline: none; border-color: var(--violet); }
.soon-tag {
  font-size: 0.72rem; background: var(--gold); color: #fff; border-radius: 999px;
  padding: 2px 10px; font-weight: 700; vertical-align: middle;
}
.tiny-note { font-size: 0.78rem !important; color: var(--ink-muted) !important; margin-top: 8px; }

/* premium teaser */
.premium-teaser { margin-top: 32px; }
.premium-header { text-align: center; margin-bottom: 18px; }
.premium-header h3 { font-family: var(--font-display); font-size: 1.4rem; }
.premium-header p { color: var(--ink-soft); font-size: 0.92rem; }
.premium-locked { position: relative; border-radius: var(--radius); overflow: hidden; }
.premium-content { filter: blur(7px); user-select: none; pointer-events: none; opacity: 0.75; }
.premium-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px;
  align-items: center; justify-content: center; text-align: center;
  background: linear-gradient(180deg, rgba(250,248,244,0.35), rgba(250,248,244,0.75));
}
.lock-icon { font-size: 2.2rem; }
.premium-overlay p { font-size: 1.05rem; }
.premium-facts {
  max-width: 360px; margin: 4px 0; padding-left: 20px; text-align: left;
  font-size: 0.92rem; color: var(--ink-soft); line-height: 1.5;
}
.premium-facts li { margin-bottom: 4px; }

/* sample view */
.sample-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--violet-soft); border: 1.5px solid var(--violet);
  border-radius: var(--radius); padding: 16px 22px; margin: 32px 0 36px;
  font-size: 0.92rem; color: var(--violet-deep);
}
.sample-divider {
  text-align: center; margin: 48px 0 36px; position: relative;
}
.sample-divider::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 1.5px dashed var(--line);
}
.sample-divider span {
  position: relative; background: var(--paper); padding: 0 18px;
  font-size: 0.85rem; font-weight: 600; color: var(--ink-muted);
}
#view-sample { padding-bottom: 80px; }
#view-sample .final-cta { margin-top: 40px; padding: 40px 24px; text-align: center; }

/* v2 responsive */
@media (max-width: 720px) {
  .steps { flex-direction: column; }
  .step-arrow { transform: rotate(90deg); align-self: center; }
  .disc-chart-grid { grid-template-columns: 1fr; }
  .report-preview-section { padding: 36px 20px 32px; }
}

/* ============ v3: explicit question navigation ============ */
.question-nav { align-items: center; }
#btn-next:disabled {
  opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none;
}
.nav-hint { text-align: center; font-size: 0.8rem; color: var(--ink-muted); margin-top: 14px; }

/* ============ v3: contact section ============ */
.contact-section {
  background: var(--surface); border: 1px solid var(--line); border-radius: 24px;
  padding: 48px 32px; margin-bottom: 24px;
}
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 36px; align-items: start; }
.contact-info h2 { font-size: 1.7rem; margin-bottom: 12px; }
.contact-info p { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 16px; }
.contact-email {
  display: inline-block; font-weight: 600; color: var(--violet-deep);
  background: var(--violet-soft); padding: 10px 18px; border-radius: 10px;
  text-decoration: none; font-size: 0.95rem;
}
.contact-email:hover { background: #e2dcff; }
.contact-form { display: flex; flex-direction: column; gap: 12px; }
.contact-form label { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
.contact-form input, .contact-form textarea, .contact-form select {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px;
  font-family: var(--font-body); font-size: 0.92rem; color: var(--ink); background: var(--paper);
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
  outline: none; border-color: var(--violet);
}
.contact-form textarea { min-height: 110px; resize: vertical; }
@media (max-width: 720px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-section { padding: 32px 20px; }
}

/* ============ v3: blog styles ============ */
.blog-article { max-width: 760px; margin: 0 auto; padding: 40px 24px 80px; }
.blog-article h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 14px; }
.blog-meta { color: var(--ink-muted); font-size: 0.85rem; margin-bottom: 28px; }
.blog-article h2 { font-size: 1.6rem; margin: 44px 0 12px; scroll-margin-top: 80px; }
.blog-article h3 { font-size: 1.05rem; margin: 20px 0 6px; color: var(--violet-deep); }
.blog-article p { color: var(--ink-soft); margin-bottom: 14px; }
.blog-article ul { margin: 0 0 14px 22px; color: var(--ink-soft); }
.blog-article li { margin-bottom: 5px; }
.toc {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 26px; margin: 24px 0 8px;
}
.toc strong { display: block; margin-bottom: 10px; }
.toc a { color: var(--violet-deep); text-decoration: none; font-size: 0.9rem; }
.toc a:hover { text-decoration: underline; }
.toc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.type-block {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 28px; margin-bottom: 20px;
}
.type-block .type-code {
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 700;
  background: linear-gradient(120deg, var(--violet), var(--coral));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.blog-cta {
  text-align: center; background: linear-gradient(135deg, var(--violet-soft), var(--coral-soft));
  border-radius: var(--radius); padding: 34px 24px; margin: 40px 0;
}
.blog-cta h2 { margin: 0 0 8px; }
.blog-cta .btn { margin-top: 14px; }

.site-footer a { color: var(--violet-deep); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .nav { flex-wrap: wrap; justify-content: center; row-gap: 4px; }
}

/* ============ v4: The Guardian Experience (Sprint 2) ============ */
:root {
  --hearth: #c98a1b;
  --hearth-deep: #a06e13;
  --hearth-soft: #fdf3e0;
}

/* ============ TypeKingdom palette (Phase 3A) ============

   The happy-kingdom palette. Declared here as tokens so later phases can
   adopt it deliberately, section by section; right now only the homepage
   hero consumes it, and the rest of the site keeps its existing colours.

   Only Midnight Plum and Royal Violet are text colours: they clear WCAG AA
   on white at 15.3:1 and 5.25:1. Sunshine, Coral, Orchid, Sky and Mint sit
   between 2.0:1 and 2.6:1 on white, so they are decoration and never carry
   text or meaning on their own. */
:root {
  --tk-white: #ffffff;
  --tk-plum: #272238;      /* headings and body contrast */
  --tk-violet: #6654e8;    /* primary brand / CTA        */
  --tk-sunshine: #ffc857;  /* decorative only            */
  --tk-coral: #ff7a72;     /* decorative only            */
  --tk-orchid: #e96dad;    /* decorative only            */
  --tk-sky: #64b7e8;       /* decorative only            */
  --tk-mint: #69c9a5;      /* decorative only            */
  --tk-lilac: #f4f1ff;     /* occasional subtle surface  */
}

/* --- Hero v2 --- */
.hero-v2 { position: relative; overflow: hidden; }

/* The lede is capped well short of the container so the headline breaks
   where the writing wants it to, not wherever the viewport happens to end. */
.hero-lede { max-width: 46rem; padding-bottom: 28px; }

/* Two sizes, not one. The promise leads; the Guardian line answers it. A
   single enormous block would be louder and say less. */
.hero-title { margin: 0 0 22px; }
.hero-title-main,
.hero-title-sub { display: block; font-family: var(--font-display); }
.hero-title-main {
  font-size: clamp(2.05rem, 4.6vw, 3.05rem);
  font-weight: 600; line-height: 1.08; color: var(--tk-plum);
  letter-spacing: -0.015em;
}
.hero-title-sub {
  font-size: clamp(1.4rem, 2.9vw, 1.95rem);
  font-weight: 500; line-height: 1.2; color: var(--tk-plum);
  margin-top: 0.32em;
}
.hero-title-sub em { font-style: italic; color: var(--tk-violet); }

/* One joyful mark, on the word the page is actually about. A drawn stroke
   rather than a gradient wash: it belongs to the typography instead of
   floating behind it. */
.hero-mark { position: relative; white-space: nowrap; }
.hero-mark::after {
  content: ""; position: absolute; left: 0.03em; right: 0.16em; bottom: -0.15em;
  height: 0.11em; border-radius: 999px;
  /* Phase 3C: Sunshine and Coral hold the first 80%, so Orchid reads as a
     warm tail rather than a third band. Three evenly-weighted colours in a
     stroke this small is a rainbow, which is the generic-flourish look. */
  background: linear-gradient(90deg,
    var(--tk-sunshine) 0%, var(--tk-coral) 62%, var(--tk-coral) 80%, var(--tk-orchid) 100%);
  /* Phase 3B: dropped clear of the descender -- at -0.05em the tail of the "y"
     cut straight through the stroke and it read as a rendering accident. The
     fractional tilt is what makes it look drawn rather than positioned. */
  transform: rotate(-0.5deg);
}

.hero-facts {
  margin-top: 24px; display: flex; gap: 10px; align-items: center; justify-content: center;
  flex-wrap: wrap; font-size: 0.88rem; color: var(--ink-soft);
}
.hero-facts .dot { color: var(--ink-muted); }

/* Hero-only overrides. .hero-actions and .hero-facts are shared with the
   Citadel and Inner Compass heroes, which stay centred, so the left
   alignment is scoped here rather than applied to the shared rules. */
.hero-v2 .hero-actions { justify-content: flex-start; }
.hero-v2 .hero-facts { justify-content: flex-start; }

/* Phase 3A scoped Royal Violet to the hero CTA because --violet was still the
   older #6C5CE7. Phase 3B folded --violet over to Royal Violet, so the whole
   override is now what .btn-primary already does and it has been removed.

   The ghost button keeps its hero-only treatment: the shared border is a page
   line, and against a pure white canvas the hero's needs to read as brand. */
.hero-v2 .btn-ghost { border-color: rgba(102, 84, 232, 0.22); color: var(--tk-plum); }
.hero-v2 .btn-ghost:hover { border-color: var(--tk-violet); color: var(--tk-violet); }
/* The separators are the cheapest place on the page to put a little colour.
   Written as "every dot, then every dot after a dot" rather than :nth-*(),
   which counts every span in the row and would silently stop matching the
   moment the copy around it changes. */
.hero-v2 .hero-facts .dot { color: var(--tk-sunshine); }
.hero-v2 .hero-facts .dot ~ .dot { color: var(--tk-mint); }

/* Reserved for Phase 3B Guardian artwork; see the note in index.html. The
   layout is defined now so dropping the characters in needs no new CSS,
   and :empty keeps the slot from taking any space until then. */
.hero-guardians {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: 20px; margin: 0 0 56px;
}
.hero-guardians:empty { display: none; }

/* Phase 3C: six separated segments, aligned to the container's left edge
   rather than bleeding across the viewport.

   As a continuous full-width bar it read as application progress: a
   coloured track spanning the page directly under a call to action is the
   shape of a progress indicator, whatever the colours are. Broken into short
   marks that stop where the text column stops, it reads as a mark. */
.hero-rule {
  max-width: 1080px; margin: 0 auto; padding: 0 24px 34px;
  display: flex; gap: 7px;
}
/* Uneven widths on purpose. Six identical dashes in a row is the shape of a
   pagination or step indicator; irregular ones can only be ornament. */
.hero-rule span { height: 3px; border-radius: 999px; }
.hero-rule span:nth-child(1) { width: 30px; background: var(--tk-violet); }
.hero-rule span:nth-child(2) { width: 18px; background: var(--tk-sunshine); }
.hero-rule span:nth-child(3) { width: 26px; background: var(--tk-coral); }
.hero-rule span:nth-child(4) { width: 13px; background: var(--tk-orchid); }
.hero-rule span:nth-child(5) { width: 22px; background: var(--tk-sky); }
.hero-rule span:nth-child(6) { width: 16px; background: var(--tk-mint); }
.hero-cta-note { margin-top: 10px; font-size: 0.8rem; color: var(--ink-muted); }
.welcome-chip {
  display: inline-flex; gap: 8px; align-items: center; margin-top: 22px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 999px;
  padding: 8px 16px; font-size: 0.88rem; color: var(--ink-soft);
  box-shadow: var(--shadow); cursor: pointer; transition: border-color .15s;
}
.welcome-chip:hover { border-color: var(--violet); }
.welcome-chip .chip-mark { font-weight: 700; }

/* --- The ceremony --- */
.ceremony {
  min-height: 62vh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; position: relative; padding: 40px 0;
}
.ceremony-rose { width: 230px; height: 230px; }
.ceremony-rose .rose-needle { transform-origin: 50% 50%; }
.ceremony.spinning .rose-needle { animation: needle-search 1.1s cubic-bezier(.45,.05,.55,.95) infinite; }
@keyframes needle-search {
  0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }
}
.ceremony.settling .rose-needle {
  animation: none;
  transition: transform 1.6s cubic-bezier(.2,.9,.25,1.08);
}
.ceremony-status { margin-top: 26px; font-size: 1.02rem; color: var(--ink-soft); min-height: 1.7em; }
.ceremony-skip {
  position: absolute; top: 10px; right: 0; background: none; border: none;
  color: var(--ink-muted); font-size: 0.85rem; cursor: pointer; padding: 8px;
  font-family: var(--font-body);
}
.ceremony-skip:hover { color: var(--ink); }

/* --- Reveal --- */
.reveal-content { animation: reveal-bloom 0.9s ease both; }
@keyframes reveal-bloom { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.guardian-hero {
  text-align: center; padding: 44px 28px 36px; border-radius: 24px; margin-bottom: 28px;
  border: 1.5px solid var(--line); position: relative; overflow: hidden;
  background:
    radial-gradient(480px 260px at 50% 0%, var(--g-soft, var(--violet-soft)), transparent),
    var(--surface);
}
.guardian-badge { width: 130px; height: 130px; margin: 0 auto 14px; }
.guardian-kicker {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: 14px;
}
.guardian-name {
  font-family: var(--font-display); font-size: clamp(2.2rem, 6vw, 3.2rem);
  font-weight: 700; line-height: 1.1; color: var(--g-deep, var(--violet-deep));
}
.guardian-epithet {
  font-size: 0.95rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink); margin-top: 12px;
}
.guardian-compass-style {
  display: inline-block; margin-top: 14px; font-weight: 700; font-size: 0.9rem;
  background: var(--g-soft, var(--violet-soft)); color: var(--g-deep, var(--violet-deep));
  border-radius: 999px; padding: 6px 16px; letter-spacing: 0.06em;
}
.guardian-meta { font-size: 0.85rem; color: var(--ink-muted); margin-top: 6px; }
.guardian-line {
  max-width: 480px; margin: 18px auto 0; font-size: 1.06rem; color: var(--ink);
  font-style: italic;
}
.guardian-line::before { content: "“"; color: var(--g-deep, var(--violet-deep)); }
.guardian-line::after { content: "”"; color: var(--g-deep, var(--violet-deep)); }
.guardian-hero .site-note {
  position: absolute; bottom: 10px; right: 16px; font-size: 0.7rem; color: var(--ink-muted); opacity: 0.75;
}

/* --- Wanderer's Reading --- */
.wanderer-card {
  margin-top: 28px; border: 1.5px dashed var(--ink-muted); background: var(--paper);
}
.wanderer-card h3 { display: flex; gap: 10px; align-items: center; font-size: 1.15rem; margin-bottom: 10px; }
.wanderer-card p { color: var(--ink-soft); font-size: 0.94rem; }
.wanderer-card p + p { margin-top: 10px; }

/* --- Passport --- */
.passport {
  margin-top: 32px; border-radius: 20px; overflow: hidden;
  border: 1.5px solid var(--g-deep, var(--violet-deep));
  box-shadow: var(--shadow); background: var(--surface);
}
.passport-cover {
  background: linear-gradient(140deg, var(--g-color, var(--violet)), var(--g-deep, var(--violet-deep)));
  color: #fff; padding: 22px 26px; display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.passport-cover .pp-title {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.92;
}
.passport-cover .pp-rose { width: 34px; height: 34px; flex-shrink: 0; }
.passport-body { padding: 24px 26px; display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; }
.passport-body .pp-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.passport-body .pp-value { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--ink); }
.passport-body .pp-sub { font-size: 0.85rem; color: var(--ink-soft); }
.pp-fields { display: grid; gap: 12px; }
.pp-stamp {
  width: 92px; height: 92px; border-radius: 50%; border: 2px solid var(--g-deep, var(--violet-deep));
  color: var(--g-deep, var(--violet-deep)); display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; transform: rotate(-8deg); opacity: 0.85;
  padding: 8px; line-height: 1.5;
}
.pp-stamp .pp-stamp-star { font-size: 1rem; }
.passport-foot {
  border-top: 1px dashed var(--line); padding: 14px 26px; display: flex; gap: 10px; flex-wrap: wrap;
  align-items: center; justify-content: space-between; font-size: 0.8rem; color: var(--ink-muted);
}
.passport-foot .pp-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Honest premium --- */
.premium-waitlist-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: 420px; margin: 6px auto 0; }
.premium-waitlist-row .text-input { background: #fff; }
.premium-overlay .tiny-note { max-width: 320px; }

/* --- The Crossing: transitions & drift --- */
.question-card.q-enter { animation: q-slide 0.28s ease both; }
@keyframes q-slide { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
#view-test { transition: background 0.8s ease; }

/* --- Reduced motion: a complete parallel experience --- */
@media (prefers-reduced-motion: reduce) {
  .ceremony .rose-needle { animation: none !important; transition: none !important; }
  .reveal-content, .question-card.q-enter, .view.active { animation: none !important; }
  .btn:hover { transform: none; }
}

@media (max-width: 640px) {
  .ceremony-rose { width: 180px; height: 180px; }
  .passport-body { grid-template-columns: 1fr; }
  .pp-stamp { justify-self: start; }
}
.rose-needle { transform-box: view-box; transform-origin: 50% 50%; }
@media (max-width: 640px) {
  .hero-v2 { padding-top: 44px; }
  .hero-lede { padding-bottom: 24px; }
  .hero-rule { padding-bottom: 26px; }
  .hero-guardians { margin-bottom: 40px; gap: 14px; }
}
/* The primary CTA carries a long label. Below this width it stops competing
   for the row and takes the full column, so it never sets the page's minimum
   width or shrinks to an awkward two-word wrap. */
@media (max-width: 520px) {
  .hero-v2 .hero-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hero-v2 .hero-actions .btn { width: 100%; }
  .hero-v2 .btn-xl { padding: 16px 20px; font-size: 1.02rem; }
  .hero-sub { font-size: 1.02rem; line-height: 1.5; margin-bottom: 26px; }
}
/* The eyebrow is one short line by design. At the narrowest widths its
   tracking is what pushes it onto a second row and turns a small chip into a
   full-width block, so the tracking is what gives way. */
@media (max-width: 380px) {
  .eyebrow { font-size: 0.68rem; letter-spacing: 0.07em; padding: 6px 12px; gap: 7px; }
}

/* ============ Compass Kingdom official artwork (Canon v1.0) ============ */
.kingdom-values {
  text-align: center; font-family: var(--font-display); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.85rem;
  color: var(--violet-deep); margin: 2px 0 6px;
}
.kingdom-art { margin: 26px auto 34px; max-width: 1032px; }
.kingdom-art img {
  display: block; width: 100%; height: auto; border-radius: 18px;
  border: 1px solid rgba(108, 92, 231, 0.18);
  box-shadow: 0 14px 44px rgba(30, 27, 46, 0.16);
}
.kingdom-art figcaption {
  text-align: center; font-size: 0.82rem; color: var(--ink-muted); margin-top: 10px;
}
.guardian-promise-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; opacity: 0.75; margin: 14px 0 2px;
}
.k-gift { font-size: 0.8rem; font-weight: 600; color: var(--r-deep, var(--violet-deep)); margin: 2px 0 6px; }

/* ============ Personalised result page (pilot: #/my-result) ============ */
#view-my-result { padding-bottom: max(56px, env(safe-area-inset-bottom)); }

/* section nav: the BAR may scroll sideways, the page never does. top tracks
   the sticky site header's real measured height (--header-h) so there is no
   seam or empty strip above it and nothing from the header can overlap it,
   including when the header wraps to a second row at tablet widths;
   a mask fades the edges to signal more items exist. */
.mr-nav {
  position: sticky; top: var(--header-h); z-index: 20;
  display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 8px max(16px, env(safe-area-inset-left)) 8px max(16px, env(safe-area-inset-right));
  background: var(--paper); border-bottom: 1px solid var(--line);
  scrollbar-width: none; scroll-padding-inline: 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.mr-nav::-webkit-scrollbar { display: none; }
.mr-nav-link {
  flex: 0 0 auto; font-size: 0.8rem; font-weight: 600; color: var(--ink-soft);
  text-decoration: none; padding: 6px 13px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--surface); white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mr-nav-link:hover { border-color: var(--violet); color: var(--violet-deep); }
.mr-nav-link.is-active { background: var(--violet); color: #fff; border-color: var(--violet); }
.mr-nav-link:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }

/* sticky nav must not cover a heading jumped to from the nav */
/* clears the header plus the sticky result nav (about 52px) at any header height */
.mr-section[id], .mr-portrait[id], .mr-approach[id] { scroll-margin-top: calc(var(--header-h) + 52px); }

.mr-header { text-align: center; padding: 26px 0 2px; }
.mr-kicker {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-muted);
}

/* hero: two columns on desktop, one on mobile with portrait BELOW the h1 */
.mr-hero {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px;
  align-items: center; padding: 6px 0 36px;
}
.mr-h1 {
  font-size: clamp(1.75rem, 3.2vw, 2.7rem); line-height: 1.16; margin-bottom: 12px;
  text-wrap: balance;
}
.mr-identity {
  font-family: var(--font-body); font-size: 0.9rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--violet-deep);
  text-wrap: balance;
}
.mr-motto {
  font-family: var(--font-display); font-style: italic; font-size: 1.1rem;
  color: var(--ink-soft); margin: 12px 0 20px; max-width: 46ch;
}
.mr-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.mr-portrait { text-align: center; }
.mr-portrait img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.mr-portrait-cap { font-family: var(--font-display); font-size: 1.05rem; margin-top: 10px; }
.mr-portrait-sub { font-size: 0.85rem; color: var(--ink-muted); }

.mr-section { margin: 0 auto 16px; max-width: 720px; }
.card.mr-section { padding: 24px 26px; }
.mr-section h2 { font-size: 1.25rem; margin-bottom: 8px; }
.mr-section p { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.65; }
.mr-section:focus-visible { outline: 3px solid var(--violet); outline-offset: 4px; }

/* Compass Approach: the outcome word is the primary; colour is never the
   only signal (mark + label text carry it too). */
.mr-approach-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 700; font-size: 1.02rem;
  color: var(--violet-deep) !important;
  background: var(--violet-soft); border: 1.5px solid var(--violet);
  border-radius: 999px; padding: 6px 15px; margin-bottom: 10px;
}
.mr-approach-mark { font-size: 0.95rem; }
.mr-lead { font-size: 1.02rem !important; color: var(--ink) !important; font-weight: 600; margin-bottom: 8px; }
.mr-approach-def { margin-bottom: 8px; }
.mr-principle { font-family: var(--font-display); font-style: italic; color: var(--violet-deep) !important; margin: 0; }

/* development-only notice: a slim in-flow banner at the top of the reading,
   beneath the sticky nav. Never overlays content; dev/LAN host only. */
.mr-dev-banner {
  margin: 8px auto 2px; max-width: 720px; text-align: center;
  background: #1e1b2e; color: #fff; font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 10px; border-radius: 8px;
}

/* a container focused programmatically (view / section jump) must not paint a
   stray focus ring for pointer or programmatic focus; real keyboard focus and
   every interactive control keep their focus-visible outline. */
.view:focus:not(:focus-visible),
.mr-section:focus:not(:focus-visible),
.mr-portrait:focus:not(:focus-visible) { outline: none; }

/* identity line: the centred dot never starts a line; on narrow screens the
   two halves stack as intentional lines and the dot is hidden. */
.mr-id-part { white-space: nowrap; }


/* Long-form canon copy: the approved 32-record content arrives as ordered
   blocks, so paragraphs and their subheadings both need room to breathe. */
.mr-canon > p { margin: 0 0 14px; }
.mr-canon > p:last-child { margin-bottom: 0; }
.mr-canon-h {
  margin: 20px 0 8px; font-size: 0.95rem; font-weight: 700;
  letter-spacing: 0.01em; color: var(--violet-deep);
}
.mr-canon > .mr-canon-h:first-child { margin-top: 0; }

.mr-move { text-align: center; }
/* The move name sits directly under the section h2 (20px/600). Separating it
   by colour and space, rather than size alone, keeps the h2 dominant and
   still reads the practice name as the subject. text-wrap: balance stops the
   longer hyphenated names ("The Question-to-Breakthrough Move") from
   orphaning their final word on narrow screens. */
.mr-move-text {
  font-size: 1.12rem !important; color: var(--violet-deep) !important; font-weight: 600;
  margin-top: 14px; text-wrap: balance;
}
/* Left-aligned to match the numbered steps it introduces, inside the same
   46ch measure so the two line up exactly. */
/* Measure given in rem, not ch: the intro is set one step smaller than the
   steps, so a shared 46ch would resolve ~9px narrower and the two left edges
   would not line up. 29rem matches the steps' measure at any font size. */
.mr-move-intro {
  margin-top: 10px; color: var(--ink-soft); max-width: 29rem;
  margin-left: auto; margin-right: auto; text-align: left;
}
/* The four approved Compass Move steps. Left-aligned inside the centred
   card because numbered instructions are read, not scanned. */
.mr-move-steps {
  margin: 16px auto 0; padding: 0; max-width: 46ch;
  text-align: left; list-style: none; counter-reset: mr-step;
}
.mr-move-step {
  counter-increment: mr-step; position: relative;
  padding-left: 34px; margin-bottom: 14px;
}
.mr-move-step:last-child { margin-bottom: 0; }
.mr-move-step::before {
  content: counter(mr-step); position: absolute; left: 0; top: 0;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--violet-deep); color: #fff;
  font-size: 0.72rem; font-weight: 700; line-height: 22px; text-align: center;
}
.mr-move-step-title { display: block; font-weight: 600; color: var(--ink); }
.mr-move-step-detail { display: block; margin-top: 2px; color: var(--ink-soft); }
.mr-move-explain { margin-top: 18px; color: var(--ink-soft); max-width: 46ch; margin-left: auto; margin-right: auto; text-align: left; }
.mr-reflection {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  font-style: italic; color: var(--ink); max-width: 46ch; margin-left: auto; margin-right: auto;
}
.mr-reflection-label {
  display: block; margin-bottom: 4px; font-style: normal; font-weight: 600;
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--violet-deep);
}

/* Message from the Guardian: the emotional close. Uses the Guardian's own
   palette (Fable = forest green + amber) with a doorway/compass motif. */
.mr-message {
  text-align: center; border: 1px solid color-mix(in srgb, var(--g-primary) 30%, var(--line));
  background: linear-gradient(180deg, var(--g-soft), #fff 82%);
  padding: 30px 28px 26px;
}
.mr-message-eyebrow {
  font-size: 0.72rem !important; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--g-deep) !important; margin-bottom: 6px;
}
.mr-message-motif { display: block; color: var(--g-primary); margin: 4px auto 10px; width: 48px; }
.mr-message-text {
  font-family: var(--font-display); font-size: 1.4rem; line-height: 1.4; font-style: italic;
  color: var(--ink); margin: 0 auto; max-width: 22ch; padding: 0; border: none;
}
.mr-message-text::before, .mr-message-text::after { content: "\201C"; }
.mr-message-text::after { content: "\201D"; }
.mr-message-by {
  font-family: var(--font-body); font-size: 0.82rem; color: var(--g-deep) !important;
  font-weight: 600; margin-top: 14px;
}
/* Canon messages close with their own approved sign-off as the final block,
   so js/app.js suppresses the duplicate .mr-message-by line. Give that last
   approved paragraph the attribution treatment instead: same look as
   .mr-message-by, lifted out of the italic body voice. Wording untouched. */
.mr-message-canon > p:last-child {
  font-family: var(--font-body); font-size: 0.82rem; color: var(--g-deep);
  font-weight: 600; font-style: normal; margin-top: 18px; max-width: none;
}
/* The closing quotation mark belongs at the end of the spoken message, not
   after the attribution that follows it, so move it onto the last prose
   paragraph. Canon messages are paragraphs throughout, so :nth-last-child(2)
   is always that final line. */
.mr-message-canon::after { content: none; }
.mr-message-canon > p:nth-last-child(2)::after { content: "\201D"; }

.mr-actions h2, .mr-related h2 { text-align: center; }
.mr-action-row {
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  max-width: 460px; margin: 0 auto;
}
.mr-act-primary { width: 100%; }
.mr-act-secondary-row { display: flex; gap: 10px; width: 100%; }
.mr-act-secondary-row .btn { flex: 1 1 0; white-space: nowrap; }
.mr-act-retake { color: var(--ink-muted); margin-top: 2px; }
.mr-act-retake:hover { color: var(--violet); }

.mr-related-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mr-related-card {
  display: flex; gap: 14px; align-items: center; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 16px;
  text-decoration: none; color: var(--ink); transition: border-color 0.15s, box-shadow 0.15s;
}
.mr-related-card:hover { border-color: var(--violet); box-shadow: var(--shadow); }
.mr-related-card:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }
.mr-related-art {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 12px; overflow: hidden;
  background: var(--g-soft, var(--violet-soft)); display: flex; align-items: center; justify-content: center;
}
.mr-related-art img { width: 100%; height: 100%; object-fit: cover; }
.mr-art-initial { display: none; font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--g-primary, var(--violet)); }
.mr-related-art.mr-art-fallback .mr-art-initial { display: block; }
.mr-realm-art {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 32% 28%, var(--r-soft), color-mix(in srgb, var(--r-color) 22%, #fff) 130%);
  border: 1px solid color-mix(in srgb, var(--r-deep) 25%, transparent);
}
.mr-realm-rose { width: 46px; height: 46px; display: block; }
.mr-related-body { display: flex; flex-direction: column; gap: 2px; }
.mr-related-title { font-family: var(--font-display); font-size: 1.08rem; }
.mr-related-desc { font-size: 0.82rem; color: var(--ink-muted); line-height: 1.4; }
.mr-related-cta { font-size: 0.82rem; font-weight: 600; color: var(--violet-deep); margin-top: 4px; }

/* share panel */
.mr-share-backdrop {
  position: fixed; inset: 0; z-index: 60; background: rgba(30, 27, 46, 0.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.mr-share-backdrop[hidden] { display: none; }
.mr-share-panel {
  background: var(--surface); border-radius: var(--radius); padding: 28px;
  max-width: 460px; width: 100%; box-shadow: var(--shadow);
}
.mr-share-panel h2 { font-size: 1.3rem; margin-bottom: 12px; }
.mr-share-text {
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px; font-size: 0.95rem; color: var(--ink-soft); margin-bottom: 16px;
}
.mr-share-actions { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 860px) {
  .mr-hero { grid-template-columns: 1fr; gap: 14px; text-align: center; padding-bottom: 20px; }
  .mr-hero-text { order: 1; }
  .mr-portrait { order: 2; margin-top: 2px; }   /* portrait sits below the heading */
  .mr-portrait img { max-height: 40vh; width: auto; max-width: 72%; }
  .mr-portrait-cap { margin-top: 8px; }
  .mr-motto { margin: 8px auto 14px; }
  .mr-hero-actions { justify-content: center; }
  .mr-hero-actions .btn { flex: 1 1 100%; }
  .mr-related-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .mr-h1 { font-size: clamp(1.55rem, 6.6vw, 1.85rem); }
  /* item 2: identity halves stack as intentional lines; the dot is hidden */
  .mr-identity { line-height: 1.35; }
  .mr-id-part { display: block; }
  .mr-id-dot { display: none; }
  /* item 3: portrait a touch smaller on narrow widths, no crop */
  .mr-portrait img { max-height: 36vh; max-width: 68%; }
  /* item 4: slightly smaller body text + tighter cards; message stays prominent */
  .card.mr-section { padding: 18px 16px; }
  .mr-section { margin-bottom: 14px; }
  .mr-section h2 { font-size: 1.12rem; }
  .mr-section p { font-size: 0.92rem; line-height: 1.6; }
  .mr-lead { font-size: 0.98rem !important; }
  .mr-message-text { font-size: 1.26rem; }
  .mr-message { padding: 24px 18px 20px; }
  /* item 8: compact footer, all links / legal / blessing preserved */
  .site-footer { padding: 24px 0; }
  .footer-cols { gap: 18px 24px; }
  .footer-blessing { margin: 14px 0 8px; }
}
/* item 5: at the narrowest widths the two secondary actions stack */
@media (max-width: 380px) {
  .mr-act-secondary-row { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .mr-nav { scroll-behavior: auto; }
  .mr-nav-link { scroll-behavior: auto; }
}

/* visually hidden but available to screen readers */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}