:root {
  --ink: #111111; --ink-2: #2b2b2b; --body: #4d4d4d; --muted: #8a8a8a;
  --line: #e6e6e6; --line-2: #111111;
  --bg: #ffffff; --bg-soft: #f6f6f6;
  --pink: #ff005e; --pink-700: #d6004f;
  --font-head: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Consolas", monospace;
  --maxw: 1144px; --radius: 4px; --radius-pill: 999px; --ease: cubic-bezier(0.2, 0.6, 0.3, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--body);
  font-family: var(--font-body); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--font-head); color: var(--ink); font-weight: 700; line-height: 1.15; }
a { color: var(--pink); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 48px 24px 96px; }
.eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--pink); font-weight: 500; }
.btn { display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: var(--font-head); font-weight: 600; font-size: 16px; border-radius: var(--radius);
  padding: 14px 22px; border: 1px solid transparent; text-decoration: none; transition: background .15s var(--ease), color .15s var(--ease); }
.btn--primary { background: var(--pink); color: #fff; }
.btn--primary:hover { background: var(--pink-700); }
.btn--outline { background: #fff; color: var(--ink); border-color: var(--line-2); }
.btn--outline:hover { background: var(--ink); color: #fff; }
.btn--ghost { background: transparent; color: var(--muted); border-color: var(--line); }
.btn--lg { padding: 16px 28px; font-size: 17px; }
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* =========================================================================
   DIAGNOSTIC COMPONENTS (Task 4)
   Ported from _source/valueships-astro/src/pages/index.astro's
   <style is:global> block (component rules) and reskinned to the pricing.md
   light-theme tokens/fonts/radii per the Task 4 brief's replacement map.
   Astro's design-token system (--surface*, --on-surface, --primary, the
   font-size, font-weight, letter-spacing and motion-timing scale tokens,
   plus the --elevation elevation/shadow tokens) does not exist in this
   file's :root - obvious 1:1 renames follow the
   brief's table; tokens the brief doesn't cover (type scale, weights,
   letter-spacing, motion timing) are replaced with concrete values matching
   _source/pricing-md-final/assets/css/styles.css's actual scale, which is
   this project's real target look. Box-shadows (--elevation-*) are dropped
   entirely for in-flow cards - pricing.md is flat/hairline, no drop shadows.
   The results-unlock gate below is an in-flow card like any other - it is
   no longer a fixed overlay (see that section for why).
   Skipped per the brief: rules tied to removed DOM (the intro report preview
   grid, the intro leakage slider row, the ARR quick pick chips, the founder
   bio card, and the dark aubergine email gate band) were not carried over.
   ========================================================================= */

/* ---------- Button aliases -----------------------------------------------
   The original diagnostic markup (index.astro) used single-dash button
   modifiers (.btn-primary/.btn-ghost/.btn-large). Task 1's new primitives
   are double-dash (.btn--primary/.btn--ghost/.btn--lg). index.html preserves
   the original diagnostic class names verbatim (Task 2), so alias the
   single-dash names to the same look rather than touch index.html/main.js. */
.btn-primary { background: var(--pink); color: #fff; }
.btn-primary:hover { background: var(--pink-700); }
.btn-ghost { background: transparent; color: var(--muted); border-color: var(--line); }
.btn-large { padding: 16px 28px; font-size: 17px; }

/* ---------- Hero ---------------------------------------------------------
   No card border on the hero itself (matches pricing-md-final's real
   `.hero`, which is border-less - the bordered `.card` right below it
   provides the visual contrast). */
.hero { position: relative; padding: 48px 0 40px; margin-bottom: 8px; }
.hero__plane { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero__inner { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.1rem); line-height: 1.08; max-width: 18ch; margin: 16px 0 18px; }
.hero h1 em { font-style: normal; color: var(--pink); }
.hero__lede { font-size: 1.1rem; line-height: 1.55; color: var(--body); max-width: 60ch; margin-bottom: 32px; }
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; }

/* node-deco motif - positioning ported verbatim from
   _source/pricing-md-final/assets/css/styles.css (search .node-deco) */
.node-deco { position: absolute; z-index: 1; color: var(--pink); display: block; height: auto; }
.node-deco--tr { top: -22px; right: -8px; width: 92px; }
.node-deco--bl { bottom: -20px; left: -14px; width: 76px; }

/* ---------- Stats row ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 32px 0; }
.stat { padding: 24px 16px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: none; padding-left: 0; }
.stat__num { font-family: var(--font-mono); font-size: 2rem; font-weight: 700; color: var(--pink); line-height: 1; margin-bottom: 6px; letter-spacing: -0.01em; }
.stat__num.neutral { color: var(--ink); }
.stat__lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--body); font-weight: 600; }

/* ---------- Section card ---------- */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 48px 64px; margin-bottom: 24px; }
.card--band { background: var(--bg-soft); }
.card h2 { font-size: 1.6rem; line-height: 1.2; margin-bottom: 12px; }
.card h3 { font-size: 1.15rem; margin: 24px 0 8px; }
.card p { color: var(--ink); margin-bottom: 12px; }

/* ---------- Dimension grid (intro explainer + result scores share this) ---------- */
.dim-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 32px 0; }
.dim { padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.dim__lbl { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--body); font-weight: 700; margin-bottom: 10px; }
/* dim__score buckets: no red/green tokens exist in this monochrome+pink
   palette, so severity reads as muted (low) -> pink outline (medium) ->
   solid ink (high), echoing .btn--primary's solid-ink emphasis. */
.dim__score { display: inline-block; padding: 4px 12px; border-radius: var(--radius-pill); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 14px; }
.dim__score.l { background: var(--bg-soft); color: var(--muted); border: 1px solid var(--line); }
.dim__score.m { background: rgba(255, 0, 94, 0.08); color: var(--pink); border: 1px solid var(--pink); }
.dim__score.h { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
.dim__desc { font-size: 0.9rem; color: var(--body); line-height: 1.55; }

/* ---------- Quiz ---------- */
.quiz { display: none; }
.quiz.active { display: block; }
.quiz__progress { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.quiz__progress-bar { flex: 1; height: 4px; background: var(--bg-soft); border-radius: var(--radius-pill); overflow: hidden; }
.quiz__progress-fill { height: 100%; background: var(--pink); width: 0%; transition: width 300ms var(--ease); }
.quiz__progress-label { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; color: var(--muted); white-space: nowrap; }

.question__dim { display: inline-block; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; color: var(--muted); margin-bottom: 16px; }
.question__text { font-size: 1.6rem; line-height: 1.2; margin-bottom: 32px; }

.answers { display: flex; flex-direction: column; gap: 10px; }
.answer {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease);
  text-align: left; font-family: var(--font-body); font-size: 1rem; color: var(--ink); width: 100%;
}
@media (hover: hover) {
  .answer:hover { border-color: var(--pink); background: rgba(255, 0, 94, 0.04); }
  .answer:hover .answer__num { background: var(--pink); color: #fff; }
}
.answer.selected { border-color: var(--pink); background: rgba(255, 0, 94, 0.04); }
.answer__num {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: var(--radius);
  background: var(--bg-soft); color: var(--body); font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.answer.selected .answer__num { background: var(--pink); color: #fff; }
.answer__text { flex: 1; line-height: 1.45; }

.quiz__nav { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.quiz__hint { font-size: 12px; color: var(--muted); }
@media (max-width: 991px) { .quiz__hint { display: none; } .quiz__nav { justify-content: space-between; } }

/* ARR range input */
.arr-input { display: flex; flex-direction: column; gap: 12px; }
.arr-input__row { display: flex; align-items: center; gap: 16px; }
.arr-input input[type=range] { flex: 1; accent-color: var(--pink); }
.arr-input__display { font-family: var(--font-mono); font-size: 2rem; font-weight: 700; color: var(--pink); min-width: 140px; line-height: 1; }
.arr-input__hint { font-size: 0.9rem; color: var(--body); }

/* ---------- Result ---------- */
.result { display: none; }
.result.active { display: block; }
.result__hero { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 56px 64px 48px; margin-bottom: 24px; position: relative; overflow: hidden; }
.result__hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--pink); }
.result__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.result__code { display: inline-block; font-family: var(--font-mono); font-size: 13px; background: var(--bg-soft); border: 1px solid var(--line); padding: 4px 10px; border-radius: var(--radius); letter-spacing: .04em; color: var(--pink); }
.result__class { display: inline-block; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; color: var(--muted); }
.result__name { font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.05; margin-bottom: 14px; }
.result__name em { color: var(--pink); font-style: normal; }
.result__profile { font-size: 1.1rem; color: var(--body); line-height: 1.55; max-width: 65ch; margin-bottom: 32px; }

.leakage { background: rgba(255, 0, 94, 0.04); border: 1px solid var(--line); border-left: 3px solid var(--pink); border-radius: var(--radius); padding: 28px 32px; margin: 32px 0; }
.leakage__lbl { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pink); font-weight: 700; margin-bottom: 10px; }
.leakage__num { font-size: 2.4rem; font-weight: 700; color: var(--ink); line-height: 1; margin-bottom: 10px; }
.leakage__sub { font-size: 0.9rem; color: var(--body); }

.moves { list-style: none; padding: 0; margin: 16px 0; display: flex; flex-direction: column; gap: 12px; }
.moves li { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); border-left: 3px solid var(--pink); }
.moves__num { flex-shrink: 0; width: 24px; height: 24px; border-radius: var(--radius-pill); background: var(--pink); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.moves__text { font-size: 1rem; line-height: 1.55; }

.quote { border-left: 3px solid var(--pink); padding: 16px 0 16px 24px; margin: 32px 0; color: var(--ink); font-family: var(--font-head); font-size: 1.1rem; font-weight: 500; font-style: italic; line-height: 1.55; }
.quote__author { font-family: var(--font-body); font-style: normal; margin-top: 14px; font-size: 0.9rem; color: var(--body); }
.quote__author strong { color: var(--ink); font-weight: 700; }

/* ---------- Archetype gallery ---------- */
.archetypes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 16px; }
.arch-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; cursor: pointer; transition: border-color .15s var(--ease), transform .15s var(--ease); }
.arch-card:hover { border-color: var(--pink); transform: translateY(-2px); }
.arch-card.you { border-color: var(--pink); background: rgba(255, 0, 94, 0.04); }
.arch-card__code { font-family: var(--font-mono); font-size: 11px; color: var(--pink); letter-spacing: .04em; margin-bottom: 6px; }
.arch-card__name { font-size: 1.15rem; margin-bottom: 6px; }
.arch-card__leak { font-size: 0.9rem; color: var(--body); }
.arch-card__leak strong { color: var(--pink); font-weight: 700; }

/* ---------- Results-unlock gate -------------------------------------------
   In-flow gate, not a modal. main.js toggles the .active class on
   #rg-backdrop to show/hide it, and hides/reveals the sibling
   #result-content accordingly. This sits at the top of #stage-result so it
   is visible immediately inside the auto-height iframe - a fixed/centered
   full-viewport overlay would render far off-screen once the iframe's
   content grows past the viewport height, since there is no inner scroll
   to bring a viewport-centered element into view. */
.rg-backdrop { display: none; }
.rg-backdrop.active { display: block; }
.rg-modal {
  background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 40px 36px; max-width: 560px; width: 100%; margin: 0 auto; text-align: center;
}
.rg-modal__lock { width: 56px; height: 56px; background: #fde8ef; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.rg-modal__lock svg { width: 26px; height: 26px; stroke: var(--pink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rg-modal h2 { font-size: 22px; margin: 0 0 8px; }
.rg-modal__sub { font-size: 15px; color: var(--body); margin: 0 0 24px; }
.rg-modal__teaser { margin: 0 0 28px; }
.rg-modal__teaser-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 4px; }
.rg-modal__code { font-family: var(--font-mono); font-size: 40px; font-weight: 700; color: var(--pink); letter-spacing: .04em; margin: 0 0 4px; }
.rg-modal__name { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0 0 4px; }
.rg-modal__desc { font-size: 14px; color: var(--body); margin: 0; }
.rg-modal__form { display: flex; flex-direction: column; gap: 10px; }
.rg-modal__form input {
  padding: 14px 18px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--bg-soft); color: var(--ink); font-family: var(--font-body);
  font-size: 1rem; width: 100%; box-sizing: border-box; text-align: left;
}
.rg-modal__form input:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 2px rgba(255, 0, 94, .2); }
.rg-modal__form input::placeholder { color: var(--muted); }
.rg-modal__form .btn { width: 100%; justify-content: center; }
.rg-modal__fine { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.rg-modal__error { font-size: 12px; color: #c0002a; margin: 0; overflow: hidden; max-height: 0; transition: max-height .15s ease; }
.rg-modal__error:not(:empty) { max-height: 40px; }

/* ---------- Stage transitions ---------- */
.stage { animation: fadeIn 300ms var(--ease); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .stage { animation: none; } }

/* ---------- Footer ---------- */
.meta-footer { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--line); font-size: 0.9rem; color: var(--muted); text-align: center; line-height: 1.6; }
.meta-footer strong { color: var(--body); font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .hero { padding: 32px 0 24px; }
  .card { padding: 32px 24px; }
  .result__hero { padding: 36px 24px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-left: 1px solid var(--line); }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--line); padding-bottom: 24px; }
  .stat:nth-child(3), .stat:nth-child(4) { padding-top: 24px; }
  .dim-grid { grid-template-columns: 1fr; }
  .question__text { font-size: 1.4rem; }
  .result__name { font-size: 1.9rem; }
  .leakage__num { font-size: 2rem; }
  .hero__ctas { flex-direction: column; }
  .hero__ctas .btn { width: 100%; justify-content: center; }
  .node-deco--tr { width: 64px; top: -14px; right: -6px; opacity: .6; }
  .node-deco--bl { display: none; }
}
@media (max-width: 480px) {
  .rg-modal { padding: 28px 20px; }
  .rg-modal__code { font-size: 32px; }
  .stat__num { font-size: 1.5rem; }
}