/* Layout: sticky brand bar; iPad landscape splits into a dimension rail + working pane, portrait/phone stacks. */
:root {
  --paper: #F1F4F3;      /* cool chart-paper ground */
  --surface: #FFFFFF;
  --ink: #15201D;
  --muted: #56655F;
  --line: #D3DBD8;
  --accent: #0E5A5E;     /* loch teal */
  --accent-ink: #FFFFFF;
  --accent-soft: #DCEBEA;
  --signal: #A86B12;     /* buoy amber: marks the weakest areas */
  --signal-soft: #F5E8D2;

  --font-display: "Spectral", Georgia, "Times New Roman", serif;
  --font-body: "Public Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.625rem;
  --step-3: 2.25rem;
  --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0E1513; --surface: #16201D; --ink: #E4EBE8; --muted: #95A6A0; --line: #2B3935;
    --accent: #6BBDBB; --accent-ink: #0E1513; --accent-soft: #1C3634;
    --signal: #E2AE58; --signal-soft: #3A2E1A;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0E1513; --surface: #16201D; --ink: #E4EBE8; --muted: #95A6A0; --line: #2B3935;
  --accent: #6BBDBB; --accent-ink: #0E1513; --accent-soft: #1C3634;
  --signal: #E2AE58; --signal-soft: #3A2E1A;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--step-0)/1.55 var(--font-body);
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; text-wrap: balance; margin: 0; }
p { margin: 0; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.wrap { max-width: 1120px; margin-inline: auto; padding-inline: max(16px, 3vw); }

/* Brand bar */
.bar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5;
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.bar-inner {
  max-width: 1120px; margin-inline: auto; padding: 12px max(16px, 3vw);
  display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; justify-content: space-between;
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); color: var(--accent); }
.brand .mark { width: 28px; height: 28px; flex: none; }
.bar-title { font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

main { padding-block: 28px 40px; }
.eyebrow { font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.lede { color: var(--muted); max-width: 60ch; }
.data { font-family: var(--font-data); font-variant-numeric: tabular-nums; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--accent-ink); font-weight: 600; cursor: pointer; text-decoration: none;
}
.btn.ghost { background: transparent; color: var(--accent); }
.btn:disabled { opacity: 0.45; cursor: default; }
.link-btn { background: none; border: 0; padding: 8px 0; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Intro */
.intro { display: grid; gap: 32px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .intro { grid-template-columns: 1.05fr 1fr; gap: 48px; } }
.intro-copy { display: grid; gap: 18px; min-width: 0; }
.intro-copy h1 { font-size: clamp(2rem, 4.2vw, 3rem); }
.facts { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0; margin: 4px 0 0; list-style: none; font-size: var(--step--1); color: var(--muted); }
.facts li::before { content: "·"; margin-right: 8px; color: var(--accent); }
.facts li:first-child::before { content: none; }
.credentials { border-top: 1px solid var(--line); padding-top: 16px; font-size: var(--step--1); color: var(--muted); max-width: 60ch; }
.credentials strong { color: var(--ink); font-weight: 600; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: grid; gap: 16px; min-width: 0; }
.example-tag { justify-self: start; font-size: var(--step--1); padding: 3px 10px; border-radius: 999px; background: var(--signal-soft); color: var(--signal); font-weight: 600; }

/* Maturity ladder chart: one row per dimension on a shared 0–3 scale */
.ladder { display: grid; gap: 14px; }
.ladder-scale, .ladder-row { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: 12px; align-items: center; }
.ladder-scale .ticks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); font-size: 0.6875rem; color: var(--muted); }
.ladder-scale .ticks span { text-align: center; }
.ladder-name { font-size: var(--step--1); font-weight: 500; }
.track { position: relative; height: 26px; border-radius: 6px; background:
  linear-gradient(to right, transparent calc(25% - 1px), var(--line) calc(25% - 1px), var(--line) 25%, transparent 25%,
    transparent calc(50% - 1px), var(--line) calc(50% - 1px), var(--line) 50%, transparent 50%,
    transparent calc(75% - 1px), var(--line) calc(75% - 1px), var(--line) 75%, transparent 75%), var(--paper); }
.fill { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: var(--accent-soft); border-right: 3px solid var(--accent); }
.ladder-row.weak .fill { background: var(--signal-soft); border-right-color: var(--signal); }
.ladder-row.weak .ladder-name::after { content: " · priority"; color: var(--signal); font-weight: 600; }
@media (max-width: 520px) {
  .ladder-scale, .ladder-row { grid-template-columns: 1fr; gap: 4px; }
  .ladder-scale > span:first-child { display: none; }
}

/* Question screen */
.quiz { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .quiz { grid-template-columns: 260px minmax(0, 1fr); gap: 40px; } }
.rail { display: none; }
@media (min-width: 900px) {
  .rail { display: grid; gap: 4px; align-content: start; padding: 0; margin: 0; list-style: none; }
  .rail li { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 8px; color: var(--muted); font-size: var(--step--1); }
  .rail li.current { background: var(--surface); color: var(--ink); font-weight: 600; border: 1px solid var(--line); }
  .pips { display: flex; gap: 4px; }
  .pip { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--muted); }
  .pip.done { background: var(--accent); border-color: var(--accent); }
}
.progress { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--accent); transition: width 0.25s ease; }
.question { display: grid; gap: 20px; min-width: 0; }
.question h2 { font-size: clamp(1.5rem, 3vw, 2.125rem); }
.options { display: grid; gap: 10px; }
.option {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 14px; align-items: start; text-align: left;
  width: 100%; min-height: 64px; padding: 16px 18px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface); cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.option:hover { border-color: var(--accent); }
.option[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.option .lvl { font-family: var(--font-data); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); padding-top: 3px; }
@media (max-width: 520px) { .option { grid-template-columns: 1fr; gap: 4px; } }
.nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Results */
.results { display: grid; gap: 24px; }
.summary { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .summary { grid-template-columns: 300px minmax(0, 1fr); } }
.score-card { display: grid; gap: 10px; align-content: start; }
.score-num { font-family: var(--font-display); font-size: 4.5rem; line-height: 1; color: var(--accent); }
.score-num small { font-size: var(--step-2); color: var(--muted); }
.band { font-family: var(--font-display); font-size: var(--step-2); }
.priorities { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 4px 12px; border-radius: 999px; background: var(--signal-soft); color: var(--signal); font-size: var(--step--1); font-weight: 600; }

.briefing h2 { font-size: var(--step-2); }
.brief-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.brief-list li { display: grid; gap: 6px; padding: 16px 0; border-top: 1px solid var(--line); }
.brief-list li:first-child { border-top: 0; }
.brief-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-weight: 600; }
.brief-head .data { font-weight: 400; color: var(--muted); font-size: var(--step--1); }
.brief-list p { max-width: 68ch; }
.redacted { display: grid; gap: 6px; }
.redacted span { height: 10px; border-radius: 5px; background: var(--line); }
.redacted span:last-child { width: 62%; }

.unlock { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .unlock { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.offer { display: grid; gap: 10px; align-content: start; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.offer h3 { font-size: var(--step-1); }
.offer p { font-size: var(--step--1); color: var(--muted); }
.offer .btn { justify-self: start; }
.gate { grid-column: 1 / -1; }
@media (min-width: 760px) { .gate { grid-column: span 2; } }
.field { display: grid; gap: 4px; }
.field label { font-size: var(--step--1); font-weight: 600; }
.field input { min-height: 48px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); width: 100%; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--step--1); }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--accent); }
.fine { font-size: 0.75rem; color: var(--muted); }
.fine a { color: inherit; }
.msg { font-size: var(--step--1); min-height: 1.4em; }
.msg.err { color: var(--signal); }
.msg.ok { color: var(--accent); }

.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.foot { padding-block: 0 32px; font-size: 0.75rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }