/* Extracted from "GTM Diagnostic.html" by scripts/extract-reference-assets.mjs.
   Do not edit by hand — re-run the script instead. */

:root {
      --ink: #17252f;
      --ink-soft: #53636c;
      --paper: #f7f5ef;
      --card: #fffefa;
      --line: #dedbd2;
      --accent: #e85d3f;
      --accent-soft: #fff0eb;
      --teal: #177f72;
      --teal-soft: #e6f4f1;
      --muted: #eeece5;
      --shadow: 0 18px 60px rgba(23, 37, 47, .08);
      --radius: 22px;
    }

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
      margin: 0;
      min-height: 100vh;
      background: var(--paper);
      color: var(--ink);
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.45;
    }

button, input { font: inherit; }

button { color: inherit; }

.shell {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 280px minmax(0, 1fr);
    }

.rail {
      padding: 34px 30px;
      border-right: 1px solid var(--line);
      display: flex;
      flex-direction: column;
      position: sticky;
      top: 0;
      height: 100vh;
    }

.brand {
      display: flex;
      align-items: center;
      gap: 11px;
      font-weight: 760;
      letter-spacing: -.02em;
    }

.brand-logo {
      display: block;
      width: 100%;
      max-width: 132px;
      height: auto;
    }

.rail-copy {
      margin: 48px 0 28px;
    }

.eyebrow {
      margin: 0 0 10px;
      color: var(--accent);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

.rail-copy > p:last-child {
      margin: 14px 0 0;
      color: var(--ink-soft);
      font-size: 14px;
    }

.stages {
      display: grid;
      gap: 5px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

.stage {
      display: grid;
      grid-template-columns: 25px 1fr auto;
      align-items: center;
      gap: 10px;
      min-height: 42px;
      padding: 0 10px;
      border-radius: 11px;
      color: #7c878d;
      font-size: 13px;
      font-weight: 650;
    }

.stage.active { background: var(--card); color: var(--ink); }

.stage.done { color: var(--teal); }

.stage-index {
      width: 25px;
      height: 25px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      font-size: 11px;
      background: var(--paper);
    }

.stage.active .stage-index { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.stage.done .stage-index { border-color: var(--teal); color: white; background: var(--teal); }

.stage-count { font-variant-numeric: tabular-nums; font-size: 11px; }

.rail-foot {
      margin-top: auto;
      color: #7b868c;
      font-size: 12px;
    }

.main {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

.topbar {
      height: 72px;
      padding: 0 clamp(24px, 5vw, 76px);
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

.progress-copy { font-size: 13px; font-weight: 700; }

.progress-copy span { color: var(--ink-soft); font-weight: 550; }

.progress-track {
      width: min(300px, 30vw);
      height: 6px;
      background: #e4e1d9;
      border-radius: 99px;
      overflow: hidden;
    }

.progress-fill {
      width: 0;
      height: 100%;
      background: var(--accent);
      border-radius: inherit;
      transition: width .25s ease;
    }

.content {
      width: min(900px, calc(100% - 48px));
      margin: auto;
      padding: 46px 0 58px;
    }

.gate {
      min-height: 590px;
      padding: clamp(30px, 6vw, 66px);
      background: var(--card);
      border: 1px solid rgba(222, 219, 210, .9);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

.intro.hidden,
    .gate.hidden { display: none; }

.intro { margin: 0 0 clamp(22px, 3vw, 32px); }

.intro h2 {
      margin: 0;
      font-size: clamp(27px, 3.6vw, 40px);
      line-height: 1.06;
      letter-spacing: -.04em;
    }

.gate h2 {
      margin: 0;
      font-size: clamp(38px, 5.2vw, 64px);
      line-height: 1.02;
      letter-spacing: -.05em;
    }

.intro-meta {
      margin: 15px 0 0;
      color: var(--ink);
      font-size: 14px;
      font-weight: 760;
      letter-spacing: .01em;
    }

.result-hero > p { white-space: pre-line; }

.intro-lede,
    .gate-lede {
      max-width: 620px;
      margin: 20px 0 0;
      color: var(--ink-soft);
      font-size: 17px;
    }

.intro-lede { max-width: 660px; margin-top: 9px; font-size: 17px; }

.start-button,
    .gate-button,
    .cta-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 50px;
      padding: 0 24px;
      border: 1px solid var(--ink);
      border-radius: 12px;
      background: var(--ink);
      color: white;
      font-weight: 780;
      text-decoration: none;
      cursor: pointer;
    }

.gate {
      max-width: 760px;
      min-height: auto;
      margin: 0 auto;
    }

.gate h2 { max-width: 600px; font-size: clamp(34px, 4.5vw, 52px); }

.gate-form {
      margin-top: 32px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

.field { display: grid; gap: 7px; }

.field.full { grid-column: 1 / -1; }

.field label { font-size: 12px; font-weight: 780; }

.field input {
      min-height: 50px;
      width: 100%;
      padding: 0 14px;
      border: 1.5px solid var(--line);
      border-radius: 11px;
      background: white;
      color: var(--ink);
    }

.field input:focus { outline: 3px solid rgba(232, 93, 63, .18); border-color: var(--accent); }

.consent {
      grid-column: 1 / -1;
      display: flex;
      align-items: flex-start;
      gap: 9px;
      color: var(--ink-soft);
      font-size: 12px;
    }

.consent input { margin-top: 3px; accent-color: var(--accent); }

.gate-button { grid-column: 1 / -1; margin-top: 4px; }

.privacy-note { grid-column: 1 / -1; margin: 0; color: #879196; font-size: 11px; text-align: center; }

/* On question 1 the intro sits above the card, so the card stops
       reserving a full screen and the first question stays in view. */
    #intro:not(.hidden) ~ #assessment .question-card { min-height: 0; }

.question-card {
      min-height: 590px;
      background: var(--card);
      border: 1px solid rgba(222, 219, 210, .9);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: clamp(28px, 5vw, 58px);
      display: flex;
      flex-direction: column;
    }

.question-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 20px;
    }

.block-pill {
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      padding: 0 11px;
      color: var(--teal);
      background: var(--teal-soft);
      border-radius: 999px;
      font-size: 13px;
      font-weight: 800;
    }

.question-title {
      max-width: 730px;
      margin: 0;
      font-size: clamp(25px, 2.7vw, 35px);
      line-height: 1.12;
      letter-spacing: -.04em;
    }

.question-help {
      margin: 14px 0 30px;
      color: var(--ink-soft);
      font-size: 16px;
    }

.answers {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 9px;
    }

.answer {
      position: relative;
      min-height: 76px;
      padding: 16px 19px 15px 58px;
      text-align: left;
      background: white;
      border: 1.5px solid var(--line);
      border-radius: 15px;
      cursor: pointer;
      transition: border-color .14s ease, background .14s ease, transform .14s ease, box-shadow .14s ease;
    }

.answer:hover { border-color: #a6b0b4; transform: translateY(-1px); }

.answer:focus-visible { outline: 3px solid rgba(232, 93, 63, .24); outline-offset: 2px; }

.answer.selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }

.answer-key {
      position: absolute;
      left: 17px;
      top: 15px;
      width: 27px;
      height: 27px;
      display: grid;
      place-items: center;
      border: 1px solid #d5d2ca;
      border-radius: 8px;
      color: var(--ink-soft);
      background: var(--paper);
      font-size: 13px;
      font-weight: 800;
    }

.answer.selected .answer-key { color: white; border-color: var(--accent); background: var(--accent); }

.answer span:last-child { color: var(--ink); font-size: 15px; line-height: 1.45; }

.card-footer {
      margin-top: auto;
      padding-top: 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }

.back, .next {
      min-height: 44px;
      border-radius: 11px;
      font-weight: 750;
      cursor: pointer;
    }

.back {
      padding: 0 10px;
      border: 0;
      background: transparent;
      color: var(--ink-soft);
    }

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

.back:disabled { visibility: hidden; }

.next {
      padding: 0 21px;
      border: 1px solid var(--ink);
      background: var(--ink);
      color: white;
    }

.next:disabled { opacity: .35; cursor: not-allowed; }

.keyboard-note { color: #8b9498; font-size: 12px; text-align: center; }

.result { display: none; }

.result.visible { display: block; }

.assessment.hidden { display: none; }

.result-hero {
      padding: clamp(28px, 5vw, 56px);
      background: var(--ink);
      color: white;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

.result-hero .eyebrow { color: #ff9b82; }

.result-hero h2 { margin: 0; font-size: clamp(34px, 5vw, 58px); line-height: 1.02; letter-spacing: -.045em; }

.result-hero p:last-child { max-width: 690px; margin: 18px 0 0; color: #ced6d9; font-size: 17px; }

/* Name, then the number, then the verdict as a pill. Only the two
       blocks that need action carry a tint, so the eye finds them first. */
    .chain {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
      margin: 18px 0;
    }

.chain-item {
      min-width: 0;
      padding: 16px 12px 15px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--card);
    }

.chain-item strong {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 14.5px;
      letter-spacing: -.015em;
    }

.chain-meta {
      display: block;
      margin-top: 6px;
      color: var(--ink-soft);
      font-size: 12.5px;
      font-variant-numeric: tabular-nums;
    }

.chain-status {
      display: inline-block;
      max-width: 100%;
      margin-top: 11px;
      padding: 4px 9px;
      border-radius: 99px;
      background: var(--teal-soft);
      color: var(--teal);
      font-size: 11px;
      font-weight: 760;
      line-height: 1.35;
      letter-spacing: -.005em;
    }

.chain-item.start { border-color: #f3ad9c; background: var(--accent-soft); }

.chain-item.later { border-color: #e2d3ae; background: #fbf5e6; }

.chain-item.start .chain-status { background: #fff; color: var(--accent); }

.chain-item.later .chain-status { background: #fff; color: #8a7434; }

.findings-panel, .actions-panel { margin-top: 18px; }

.findings-panel.hidden { display: none; }

.findings-lede { margin: 0 0 12px; color: var(--ink-soft); font-size: 15px; }

.findings-panel ul { margin: 0; padding-left: 19px; display: grid; gap: 9px; }

.findings-panel li { color: var(--ink); font-size: 15px; line-height: 1.5; }

.findings-panel li::marker { color: var(--accent); }

.findings-strong { margin: 15px 0 0; color: var(--ink-soft); font-size: 14px; }

.findings-strong:empty { display: none; }

.actions-panel p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.55; white-space: pre-line; }

.result-panel {
      padding: 27px;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 17px;
    }

.result-panel h3 { margin: 0 0 12px; font-size: 19px; letter-spacing: -.02em; }

.result-panel p { margin: 0; color: var(--ink-soft); font-size: 14px; }

.result-panel ol { margin: 15px 0 0; padding-left: 20px; }

.result-panel li { margin: 9px 0; padding-left: 4px; font-size: 14px; }

/* The closing ask. No box, no fill, nothing competing with it. The
       page is left-aligned all the way down, so centring here is what
       tells the reader everything has stopped and this is the one move. */
    .result-cta {
      margin: 62px auto 0;
      padding: 0;
      max-width: 560px;
      display: block;
      background: none;
      border: 0;
      text-align: center;
    }

.result-cta h3 {
      margin: 0;
      font-size: clamp(23px, 3.2vw, 29px);
      line-height: 1.22;
      letter-spacing: -.03em;
    }

.result-cta p {
      max-width: 500px;
      margin: 13px auto 0;
      color: var(--ink-soft);
      font-size: 16px;
      line-height: 1.55;
    }

.cta-button {
      margin-top: 27px;
      min-height: 54px;
      padding: 0 30px;
      font-size: 16px;
      background: var(--accent);
      border-color: var(--accent);
    }

/* Retake lives in the top bar, out of the way of the ask. */
    .topbar-restart {
      min-height: 34px;
      padding: 0 13px;
      border: 1px solid var(--line);
      border-radius: 9px;
      background: #fff;
      color: var(--ink);
      font-size: 12.5px;
      font-weight: 700;
      cursor: pointer;
    }

.topbar-restart:hover { border-color: var(--ink-soft); }

.topbar-restart[hidden] { display: none; }

@media (max-width: 820px) {
.shell { display: block; }

.rail { position: static; height: auto; padding: 20px 22px; border-right: 0; border-bottom: 1px solid var(--line); }

.rail-copy, .rail-foot { display: none; }

.rail { display: grid; gap: 13px; }

.brand-logo { max-width: 100px; }

.stages { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }

.stage { min-height: 0; padding: 0; gap: 0; grid-template-columns: 1fr; font-size: 11px; text-align: center; }

.stage.active { background: none; }

.stage .stage-index, .stage .stage-count { display: none; }

.stage > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.stage::after { content: ""; display: block; width: 100%; height: 3px; margin-top: 6px; border-radius: 2px; background: var(--line); }

.stage.active::after { background: var(--accent); }

.stage.done::after { background: var(--teal); }

.topbar { height: auto; padding: 15px 22px; display: grid; grid-template-columns: 1fr auto; row-gap: 11px; }

.progress-copy { grid-column: 1; grid-row: 1; }

.topbar-restart { grid-column: 2; grid-row: 1; justify-self: end; }

.progress-track { grid-column: 1 / -1; grid-row: 2; width: 100%; }

.content { width: min(100% - 28px, 720px); padding: 18px 0 30px; }

.intro { margin-bottom: 20px; }

.gate { padding: 30px 22px; }

.gate-form { grid-template-columns: 1fr; }

.field.full, .consent, .gate-button, .privacy-note { grid-column: 1; }

.question-card { min-height: calc(100vh - 142px); padding: 25px 20px 20px; border-radius: 18px; }

.answers { grid-template-columns: 1fr; }

.answer { min-height: 89px; }

.keyboard-note { display: none; }

.chain { grid-template-columns: 1fr; }

.result-cta { margin-top: 46px; }

.cta-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}