/* The CX Revenue Maturity Assessment.
   Tokens: Adoreboard Design Style Guide v3.0 (7 Oct 2026), B2 set, exact values only. */

/* Fonts, self-hosted since 30 Oct (Google Fonts before): the files Google served for Doc 00's three
   families, Latin and Latin Extended only, with Google's own ranges, so the text draws sooner and no
   visitor's address goes to Google. Licences (SIL OFL 1.1) sit beside the files in assets/fonts/. */
@font-face { font-family: "Literata"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/literata-600-opsz72-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/literata-600-opsz72-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url(../fonts/bricolage-grotesque-var-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url(../fonts/bricolage-grotesque-var-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(../fonts/inter-var-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(../fonts/inter-var-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --c-purple: #7455AD; --c-plum: #4C3773; --c-ink: #2F2545; --c-lilac: #B199D5;
  --c-mist: #F5F7FD; --c-line: #E0E9F1; --c-slate: #656476; --c-white: #FFFFFF;
  --c-tint-5: #F8F6FB; --c-tint-7: #F5F3F9; --c-tint-10: #F1EEF7; --c-tint-15: #EAE6F3;
  --c-risk: #B91C1C; --c-opportunity: #059669; --c-neutral: #C9C8D1;
  --shadow-sm: 0 1px 2px rgba(47,37,69,0.08);
  --shadow-md: 0 4px 12px rgba(47,37,69,0.10), 0 1px 3px rgba(47,37,69,0.08);
  --shadow-lg: 0 16px 32px rgba(47,37,69,0.16), 0 4px 10px rgba(47,37,69,0.10);
  --font-title: "Literata", Georgia, serif;   /* Doc 00 v3.3 (22 Oct): Literata 600, opsz 72; Fraunces retired */
  --font-body: "Bricolage Grotesque", Arial, sans-serif;
  --font-ui: "Inter", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; font-family: var(--font-body); color: var(--c-ink);
  background: var(--c-white); font-size: 18px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
main { min-height: 100svh; }

.band { padding: 40px 16px; }
.band.tight { padding: 24px 16px; }
.inner { max-width: 880px; margin: 0 auto; }
.inner.narrow { max-width: 640px; }

/* surfaces */
.surface-intro .intro-band { background: var(--c-tint-10); min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.surface-quiz .quiz-band { background: var(--c-mist); min-height: 100svh; }
.hero-band { background: var(--c-ink); color: var(--c-white); padding-top: 32px; }
.white-band { background: var(--c-white); }
.mist-band { background: var(--c-mist); }

/* type */
.display { font-family: var(--font-title); font-weight: 600; font-size: clamp(32px, 6vw, 56px); line-height: 1.1; margin: 8px 0 14px; color: var(--c-ink); }
.display.light { color: var(--c-white); font-size: clamp(36px, 7vw, 64px); }
.eyebrow { font-family: var(--font-ui); font-weight: 500; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-plum); margin: 0 0 4px; }
.eyebrow.light { color: var(--c-lilac); }
.sub { color: var(--c-slate); margin: 0 0 20px; font-size: 19px; }
.headline.light { color: rgba(255,255,255,0.86); font-size: 20px; margin: 0 0 20px; }
.section-title { font-family: var(--font-title); font-weight: 600; font-size: clamp(24px, 4vw, 32px); margin: 0 0 8px; color: var(--c-ink); }
.section-lead { color: var(--c-slate); margin: 0 0 20px; }
.stem { font-family: var(--font-title); font-weight: 600; font-size: clamp(26px, 4.5vw, 32px); line-height: 1.25; margin: 10px 0 14px; color: var(--c-ink); }
.hint { color: var(--c-slate); font-size: 15px; margin: 0 0 18px; }
.fineprint { font-size: 14px; color: var(--c-slate); margin: 10px 0 0; }

.logo { height: 28px; width: auto; display: block; margin-bottom: 20px; }
.logo.small { height: 22px; margin-bottom: 16px; }

/* intro */
.intro-grid { display: grid; gap: 32px; align-items: center; width: 100%; }
@media (min-width: 960px) { .intro-grid { grid-template-columns: 1.1fr 1fr; } }
.benefits { list-style: none; margin: 0 0 24px; padding: 0; }
.benefits li { display: flex; gap: 12px; align-items: baseline; margin-bottom: 10px; }
.benefits .num { font-family: var(--font-title); color: var(--c-purple); font-size: 22px; min-width: 20px; }
.intro-curve .stage-names { display: none; }
@media (min-width: 720px) { .intro-curve .stage-names { display: grid; } }

/* buttons */
.btn {
  font-family: var(--font-body); font-weight: 600; font-size: 17px;
  border-radius: 8px; padding: 14px 20px; min-height: 48px; cursor: pointer;
  border: 1.5px solid var(--c-line); background: var(--c-white); color: var(--c-ink);
  display: block; width: 100%; text-align: center; text-decoration: none;
}
.btn.primary { background: var(--c-purple); border-color: var(--c-purple); color: var(--c-white); min-height: 56px; }
.btn.primary:hover { background: var(--c-plum); border-color: var(--c-plum); }
.btn.big { width: auto; padding: 16px 36px; font-size: 18px; }
.btn.invert { background: var(--c-white); border-color: var(--c-white); color: var(--c-plum); min-height: 56px; }
.btn.invert:hover { background: var(--c-tint-10); }
.btn.secondary { border-color: var(--c-purple); color: var(--c-plum); margin-top: 10px; }
.btn.secondary:hover { background: var(--c-tint-10); }
.btn.ghost { border: none; background: none; color: var(--c-slate); width: auto; padding: 8px 4px; text-decoration: underline; font-weight: 400; }
@media (prefers-reduced-motion: no-preference) {
  .btn.primary, .btn.invert { transition: transform 120ms, background 120ms; }
  .btn.primary:hover, .btn.invert:hover { transform: scale(1.02); }
  .btn.primary:active, .btn.invert:active { transform: scale(0.98); }
}

:focus-visible { outline: 2px solid var(--c-plum); outline-offset: 2px; }
.hero-band :focus-visible, .cta-card .btn:focus-visible { outline-color: var(--c-lilac); }
.btn.primary:focus-visible { outline-color: var(--c-white); }

/* question screens */
.q-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.q-head .back { padding-left: 0; }
.q-meta { font-family: var(--font-ui); font-weight: 500; font-size: 13px; color: var(--c-slate); }

.progress { display: flex; gap: 6px; margin-bottom: 18px; }
.progress .seg { flex: 1; height: 6px; border-radius: 3px; background: var(--c-line); }
.progress .seg.done { background: var(--c-purple); }
.progress .seg.now { background: var(--c-lilac); }

.chip {
  display: inline-block; font-family: var(--font-ui); font-weight: 500; font-size: 13px;
  color: var(--c-plum); background: var(--c-tint-10); border-radius: 999px;
  padding: 4px 12px; margin: 4px 0;
}

.answers { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 16px; }
.btn.answer {
  display: flex; gap: 14px; align-items: center; text-align: left;
  min-height: 64px; border-radius: 12px; box-shadow: var(--shadow-sm); font-weight: 400;
}
.btn.answer:hover { border-color: var(--c-purple); background: var(--c-tint-5); }
.keycap {
  flex: none; width: 28px; height: 28px; border-radius: 6px;
  border: 1.5px solid var(--c-slate); color: var(--c-slate);
  font-family: var(--font-ui); font-weight: 500; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn.answer.chosen { background: var(--c-tint-10); border-color: var(--c-purple); box-shadow: 0 0 0 2px var(--c-purple); }
.btn.answer.chosen .keycap { background: var(--c-purple); border-color: var(--c-purple); color: var(--c-white); }
@media (prefers-reduced-motion: no-preference) {
  .btn.answer.chosen .keycap { animation: pop 160ms ease-out; }
  @keyframes pop { 0% { transform: scale(0.8); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
}

/* hero */
.hero-copy { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hero-copy { transform: translateY(8px); transition: transform 400ms ease-out; }
  .hero-copy.in { transform: none; }
}
.gut-line { color: var(--c-lilac); font-size: 17px; margin: 14px 0 0; }
.recognise { color: rgba(255,255,255,0.86); margin: 14px 0 6px; }
.recognise strong { color: var(--c-white); }
.hold-link { color: var(--c-lilac); display: inline-block; margin: 6px 0 10px; }

/* curve */
.curve-holder { position: relative; margin: 18px 0 6px; }
.curve-holder.has-pill { padding-top: 26px; }   /* room for the "You are here" pill above the curve */
.here-link { stroke: var(--c-lilac); stroke-width: 2; }
.curve { width: 100%; height: auto; display: block; }
.curve-dotted { stroke: rgba(255,255,255,0.54); stroke-width: 3; stroke-dasharray: 2 10; stroke-linecap: round; }
.surface-intro .curve-dotted { stroke: var(--c-lilac); }
.curve-solid { stroke: var(--c-lilac); stroke-width: 4; stroke-linecap: round; }
.node .dot { fill: var(--c-ink); stroke: rgba(255,255,255,0.54); stroke-width: 2; }
.surface-intro .node .dot { fill: var(--c-white); stroke: var(--c-purple); }
.node.passed .dot { fill: var(--c-lilac); stroke: var(--c-lilac); }
.node.here .dot { fill: var(--c-white); stroke: var(--c-white); }
.node .here-ring { fill: none; stroke: var(--c-lilac); stroke-width: 2.5; }
.node .gut-ring { fill: none; stroke: var(--c-lilac); stroke-width: 2; stroke-dasharray: 4 5; }
.node-num { font-family: var(--font-ui); font-weight: 500; font-size: 13px; fill: var(--c-white); }
.surface-intro .node-num { fill: var(--c-plum); }
.node.here .node-num { fill: var(--c-ink); }
.node.passed .node-num { fill: var(--c-ink); }
@media (prefers-reduced-motion: no-preference) {
  .curve-holder.landed .node.here .dot { animation: pulse 600ms ease-out 1; transform-origin: center; transform-box: fill-box; }
  @keyframes pulse { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
}
.here-pill {
  position: absolute; transform: translateX(-50%);
  font-family: var(--font-ui); font-weight: 500; font-size: 12px;
  background: var(--c-lilac); color: var(--c-ink);
  border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.stage-names { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 720px) { .stage-names { grid-template-columns: repeat(5, 1fr); text-align: center; } }
.stage-names li { border-radius: 8px; padding: 6px 8px; }
.stage-names li.current { background: rgba(177,153,213,0.14); }
.sn-name { display: block; font-weight: 600; font-size: 14px; color: var(--c-white); }
.sn-gist { display: block; font-size: 12.5px; color: rgba(255,255,255,0.76); }
.surface-intro .sn-name { color: var(--c-plum); }
.surface-intro .sn-gist { color: var(--c-slate); }

/* capability chart */
.capchart { margin: 10px 0 16px; }
.stageline-wrap { position: relative; padding-top: 22px; }
.capgrid { display: flex; flex-direction: column; gap: 12px; }
.caprow { display: grid; grid-template-columns: 1fr; gap: 6px; }
@media (min-width: 640px) { .caprow { grid-template-columns: 240px 1fr; align-items: center; } }
.capname { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-weight: 600; }
.pill { font-family: var(--font-ui); font-weight: 500; font-size: 11.5px; border-radius: 999px; padding: 2px 9px; }
.pill.strong { background: var(--c-tint-10); color: var(--c-plum); }
.pill.weak { background: var(--c-plum); color: var(--c-white); }
.capcells { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.cell { height: 22px; border-radius: 4px; background: var(--c-tint-15); }
.cell.filled { background: var(--c-purple); }
.stageline-overlay { position: absolute; inset: 22px 0 0 0; display: none; pointer-events: none; }
@media (min-width: 640px) { .stageline-overlay { display: grid; grid-template-columns: 240px 1fr; } }
.sl-area { position: relative; display: block; margin-left: 6px; }
.stageline { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--c-ink); opacity: 0.55; }
.stageline-label { position: absolute; top: -20px; transform: translateX(-50%); font-family: var(--font-ui); font-size: 12px; font-weight: 500; color: var(--c-ink); white-space: nowrap; }
.lever { background: var(--c-tint-7); border-left: 4px solid var(--c-purple); border-radius: 0 8px 8px 0; padding: 12px 14px; font-weight: 600; }
.method { margin-top: 14px; color: var(--c-slate); font-size: 15px; }
.method summary { cursor: pointer; font-weight: 600; color: var(--c-plum); }
.method a { color: var(--c-plum); }

/* moves */
.moves { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 720px) { .moves { grid-template-columns: repeat(3, 1fr); } }
.moves li { background: var(--c-white); border: 1px solid var(--c-line); border-radius: 12px; padding: 16px; box-shadow: var(--shadow-sm); }
.move-num { font-family: var(--font-title); font-size: 48px; line-height: 1; color: var(--c-purple); display: block; margin-bottom: 8px; }
.moves p { margin: 0; }

/* risk + stat */
.risk-line { display: flex; gap: 10px; align-items: baseline; margin: 0 0 16px; }
.risk-line .sq { flex: none; width: 10px; height: 10px; border-radius: 2px; position: relative; top: 0; }
.risk-line strong { flex: none; white-space: nowrap; } /* keep "The risk:" on one line beside long text */
@media (max-width: 719px) {
  .risk-line { display: block; }   /* phones: label then text as one flowing line, not two squeezed columns */
  .risk-line .sq { display: inline-block; margin-right: 8px; }
}
.risk-line.is-risk .sq { background: var(--c-risk); }
.risk-line.is-opp .sq { background: var(--c-opportunity); }
.pull { margin: 0; background: var(--c-tint-7); border-radius: 12px; padding: 26px 24px 18px; position: relative; }
.pull::before { content: "\201C"; font-family: var(--font-title); font-size: 96px; line-height: 0.6; color: var(--c-purple); position: absolute; top: 34px; left: 16px; opacity: 0.35; }
.pull blockquote { margin: 0 0 8px 46px; font-family: var(--font-title); font-weight: 600; font-size: clamp(20px, 3.5vw, 28px); line-height: 1.3; color: var(--c-ink); }
.pull figcaption { margin-left: 46px; font-size: 13px; color: var(--c-slate); }

/* CTA card */
.cta-card { background: var(--c-purple); border-radius: 12px; box-shadow: var(--shadow-md); color: var(--c-white); padding: 28px 24px; }
.cta-title { font-family: var(--font-title); font-weight: 600; font-size: clamp(24px, 4vw, 32px); margin: 4px 0 8px; color: var(--c-white); }
.cta-line { color: rgba(255,255,255,0.88); margin: 0 0 18px; }
.cta-card .btn.invert { width: auto; display: inline-block; padding: 14px 28px; }
.cta-also { display: block; margin-top: 12px; color: var(--c-white); font-size: 15px; }

/* email + share panels */
.duo { display: grid; gap: 20px; }
@media (min-width: 760px) { .duo { grid-template-columns: 1fr 1fr; align-items: start; } }
.panel { background: var(--c-white); border: 1px solid var(--c-line); border-radius: 12px; padding: 20px; box-shadow: var(--shadow-sm); }
.panel-title { font-family: var(--font-title); font-weight: 600; font-size: 22px; margin: 0 0 6px; }
.panel-lead { color: var(--c-slate); font-size: 15.5px; margin: 0 0 12px; }
.field-label { display: block; font-family: var(--font-ui); font-weight: 500; font-size: 13px; color: var(--c-slate); margin-bottom: 4px; }
.email-form input[type="email"] {
  width: 100%; min-height: 48px; border: 1.5px solid var(--c-line); border-radius: 8px;
  padding: 12px 14px; font-size: 16px; font-family: var(--font-body); margin-bottom: 10px;
}
.consent { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; color: var(--c-slate); margin-bottom: 10px; }
.consent input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--c-purple); }
.error { color: var(--c-ink); font-weight: 600; font-size: 14.5px; min-height: 1em; margin: 0 0 6px; }
.error:not(:empty)::before { content: "\26A0 "; color: var(--c-plum); }
.success { color: var(--c-ink); font-weight: 600; }
.tickmark { color: var(--c-purple); }
.copied { color: var(--c-plum); font-size: 14px; min-height: 1em; margin: 8px 0 0; }
.quiet-link { display: inline-block; margin-top: 10px; color: var(--c-slate); font-size: 14px; }

/* footer */
footer { background: var(--c-white); border-top: 1px solid var(--c-line); padding: 24px 16px 40px; color: var(--c-slate); }
.footer-inner { max-width: 880px; margin: 0 auto; }
footer .logo { height: 22px; margin-bottom: 12px; }
footer p { margin: 6px 0; font-size: 14px; }
footer .tiny { font-size: 12px; }
footer a { color: var(--c-slate); }

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

/* wave band (the brand artwork, as on the Challenge intro) */
.wave-band { max-width: 880px; margin: 28px auto 0; padding: 0 16px; }
.wave-img { width: 100%; height: auto; display: block; }
@media (max-width: 700px) { .wave-band { display: none; } }

/* result curve caption and the insight line */
.curve-caption { font-family: var(--font-ui); font-weight: 500; font-size: 12.5px; color: rgba(255,255,255,0.76); margin: 4px 0 0; }
.insight { border-left: 4px solid var(--c-lilac); background: var(--c-tint-5); border-radius: 0 8px 8px 0; padding: 12px 14px; color: var(--c-ink); margin-top: 10px; }

/* review mode (never present at live: notes file is outside the deploy set) */
.review-banner { background: var(--c-plum); color: var(--c-white); font-family: var(--font-ui); font-size: 13px; font-weight: 500; padding: 10px 16px; border-radius: 8px; max-width: 880px; margin: 0 auto 16px; }
.review-note { background: var(--c-tint-7); border: 1px dashed var(--c-plum); border-radius: 8px; padding: 10px 14px; margin-top: 16px; font-size: 15px; color: var(--c-slate); }
.review-note summary { cursor: pointer; font-weight: 600; color: var(--c-plum); }
.proto-label { font-family: var(--font-ui); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-plum); margin: 0 0 4px; }
.shape-proto { border: 1px dashed var(--c-plum); border-radius: 12px; padding: 16px; margin-top: 18px; background: var(--c-tint-5); }
.shape-plot { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; aspect-ratio: 1.6; max-width: 460px; margin: 8px 0; }
.shape-q { display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--c-slate); background: var(--c-white); border: 1px solid var(--c-line); border-radius: 8px; padding: 6px; }
.shape-q.q0 { grid-row: 2; grid-column: 1; }
.shape-q.q1 { grid-row: 2; grid-column: 2; }
.shape-q.q2 { grid-row: 1; grid-column: 1; }
.shape-q.q3 { grid-row: 1; grid-column: 2; }
.shape-q.active { background: var(--c-tint-15); border-color: var(--c-purple); color: var(--c-plum); font-weight: 600; }
.shape-dot { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--c-purple); border: 3px solid var(--c-white); box-shadow: var(--shadow-md); transform: translate(-50%, 50%); }
.shape-axes, .shape-line { font-size: 14.5px; color: var(--c-slate); margin: 6px 0 0; }
.shape-line { color: var(--c-ink); font-weight: 600; }

/* programmatically focused headings need no ring (not interactive) */
[data-focus][tabindex="-1"]:focus, [data-focus][tabindex="-1"]:focus-visible { outline: none; }
/* intro curve stays calm: names only, no gists */
.intro-curve .sn-gist { display: none; }

/* grid children must not inherit the SVG's intrinsic width as a minimum */
.intro-grid > * { min-width: 0; }
.curve { max-width: 100%; }

/* 22 Oct UX pass ----------------------------------------------------------- */
.card-label { font-family: var(--font-ui); font-weight: 500; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-plum); margin: 0 0 4px; }
/* contrast: lilac on purple was about 2.3:1; near-white passes AA */
.cta-card .eyebrow.light { color: rgba(255,255,255,0.88); }
.review-note a { color: var(--c-plum); text-decoration: underline; text-underline-offset: 2px; }

/* Landing curve, every width: a card, with the stage names as a numbered legend under
   the curve (name, then its gist), so the five stages read without the result. */
.intro-curve { background: var(--c-white); border-radius: 16px; padding: 20px 16px 16px; box-shadow: var(--shadow-md); }
.intro-curve .stage-names { display: grid; grid-template-columns: 1fr; text-align: left; gap: 8px; margin-top: 14px; counter-reset: st; }
.intro-curve .stage-names li { display: grid; grid-template-columns: 30px 132px 1fr; align-items: center; padding: 0; }   /* 132px fits "Operationalised" (29 Oct) */
.intro-curve .stage-names li::before {
  counter-increment: st; content: counter(st);
  width: 22px; height: 22px; border: 1.5px solid var(--c-purple); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-size: 12px; font-weight: 500; color: var(--c-plum);
}
.intro-curve .sn-name { font-size: 15px; }
.intro-curve .sn-gist { display: block; font-size: 14.5px; line-height: 1.4; }

/* Desktop landing: a wider stage so the headline sits on two lines, and the brand wave
   across the full width of the content. */
@media (min-width: 960px) {
  .intro-band { padding-top: 40px; padding-bottom: 32px; }
  .intro-band .inner.intro-grid { max-width: 1160px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 64px; }
  .intro-band .display { font-size: 52px; text-wrap: balance; }
  .intro-curve { padding: 22px 20px 16px; }
  .surface-intro .curve-dotted { stroke: var(--c-purple); stroke-width: 4; stroke-dasharray: 1 10; opacity: 0.6; }
  .surface-intro .node .dot { stroke-width: 2.5; }
  .wave-band { max-width: 1160px; margin-top: 36px; }
}

/* 29 Oct, Chris's steer ------------------------------------------------------ */
/* "Why we ask": the public line under the warm-up and each question, collapsed */
.why { margin: 4px 0 0; font-size: 15px; color: var(--c-slate); }
.why summary { cursor: pointer; font-weight: 600; color: var(--c-plum); padding: 10px 0; }
.why p { margin: 0 0 6px; max-width: 60ch; }

/* Your shape: the radar beside the lever line and the insight. Gridlines solid and quiet;
   the next stage dashed in Opportunity green; the answers in Purple with a 2px white ring
   on each point. */
.shape-block { margin: 26px 0 6px; }
.shape-title { font-family: var(--font-body); font-weight: 600; font-size: 20px; line-height: 1.3; margin: 0 0 4px; color: var(--c-ink); }
.shape-lead { color: var(--c-slate); margin: 0 0 14px; font-size: 16px; }
.shape-grid { display: grid; gap: 16px; }
@media (min-width: 860px) { .shape-grid { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 32px; align-items: center; } }
.radar-fig { margin: 0; background: var(--c-white); border: 1px solid var(--c-line); border-radius: 12px; padding: 10px 6px 14px; box-shadow: var(--shadow-sm); }
@media (min-width: 640px) { .radar-fig { padding: 16px 16px 14px; } }
.radar { width: 100%; height: auto; display: block; }
.radar-ring, .radar-spoke { fill: none; stroke: var(--c-line); stroke-width: 1; }
.radar-next { fill: none; stroke: var(--c-opportunity); stroke-width: 2; stroke-dasharray: 6 5; }
.radar-you { fill: rgba(116,85,173,0.16); stroke: var(--c-purple); stroke-width: 2; stroke-linejoin: round; }
.radar-dot { fill: var(--c-purple); stroke: var(--c-white); stroke-width: 2; }
.radar-hit { fill: transparent; }
.radar-label { font-family: var(--font-ui); font-weight: 500; font-size: 16px; fill: var(--c-ink); }
.radar-legend { list-style: none; margin: 10px 0 0; padding: 0 8px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--font-ui); font-weight: 500; font-size: 13px; color: var(--c-ink); }
.radar-legend li { display: flex; align-items: center; gap: 8px; }
.radar-legend .key { flex: none; width: 22px; height: 12px; border-radius: 3px; }
.radar-legend .key-you { background: rgba(116,85,173,0.16); border: 2px solid var(--c-purple); }
.radar-legend .key-next { height: 0; border-radius: 0; border-top: 2px dashed var(--c-opportunity); }
.shape-side .lever, .shape-side .insight { margin-top: 0; }
.shape-side .lever + .insight { margin-top: 12px; }

/* 29 Oct, the email bit (option B) ------------------------------------------- */
/* The ask after question 6, from the approved mock */
.ask-lead { color: var(--c-slate); margin: 0 0 12px; text-wrap: pretty; }
.ask-list { list-style: none; margin: 0 0 18px; padding: 0; }
.ask-list li { display: flex; gap: 10px; align-items: baseline; margin: 0 0 6px; color: var(--c-ink); }
.ask-list .tick { flex: none; color: var(--c-purple); font-weight: 700; }
.ask-form .btn.primary { margin-top: 2px; }
.ask-skip-wrap { text-align: center; margin-top: 6px; }
.ask-skip-wrap .btn.ghost { display: inline-block; font-size: 17px; color: var(--c-ink); }
.fineprint a { color: var(--c-slate); text-decoration: underline; text-underline-offset: 2px; }
.btn:disabled { opacity: 0.6; cursor: default; }

/* On the result's ink hero: a copy on its way, and a saved result's note */
.email-status, .saved-note { font-size: 15px; color: rgba(255,255,255,0.86); margin: 0 0 12px; }
.email-status .tickmark { color: var(--c-lilac); }
.email-status.failed { color: var(--c-white); font-weight: 600; }
.saved-note .btn.ghost { display: inline; color: var(--c-lilac); font-size: 15px; padding: 12px 0; }   /* inline padding: a 44px tap area without moving the line */

/* Only while the email is not connected: says so on the ask, in the reviewer notes' dashed style */
.preview-note { background: var(--c-tint-7); border: 1px dashed var(--c-plum); border-radius: 8px; padding: 10px 14px; margin: 0 0 16px; font-size: 14.5px; color: var(--c-slate); text-wrap: pretty; }
.preview-note strong { color: var(--c-plum); }

/* A lone share panel, when the email box is off or the result is a saved one */
.duo.solo { grid-template-columns: 1fr; max-width: 560px; }

/* 30 Oct, Chris's landing notes ---------------------------------------------- */
/* The logo: the wordmark at every width since v7 (the strapline lockup, from 720px up at Doc 00's 400px minimum, was too big) */
@media (min-width: 720px) { .intro-copy .logo { height: 32px; margin-bottom: 16px; } }   /* v7 (Carley, 30 Oct): the wordmark, smaller; was the 400px strapline lockup */
/* The tool's name: bigger on the landing page, and carried onto every screen after it */
.intro-copy .eyebrow { font-size: 18px; margin-bottom: 8px; }
.tool-bar { font-family: var(--font-ui); font-weight: 500; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-plum); margin: 0 0 12px; }
.brand-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 16px; }
.brand-row .logo.small { margin-bottom: 0; }
.tool-name-hero { font-family: var(--font-ui); font-weight: 500; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-lilac); }
/* "Typical barrier" over the descriptions in the landing card (the list itself shows from 720px) */
.intro-curve .barrier-label { display: none; }
@media (min-width: 720px) { .intro-curve .barrier-label { display: block; font-family: var(--font-ui); font-weight: 500; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-plum); margin: 14px 0 -6px 162px; } }
/* Question 7's payoff, above the bars */
.priority-line { border-left: 4px solid var(--c-purple); background: var(--c-tint-5); border-radius: 0 8px 8px 0; padding: 12px 14px; color: var(--c-ink); font-weight: 500; margin: 0 0 18px; max-width: 70ch; }

/* 30 Oct, Chris's second round ------------------------------------------------- */
/* The diagram as the hero ("eye candy to motivate to find out where u are"): the card goes Ink,
   with a Purple glow top right and Plum bottom left; a real title in Literata, its end in Lilac;
   the curve over a soft purple area, its line brightening from Lilac to White as it climbs; and
   the teaser, which echoes the result's "You are here" pill. On Ink only White and Lilac carry
   text (Doc 00 L115). */
.intro-curve {
  background:
    radial-gradient(110% 80% at 100% 0%, rgba(116,85,173,0.55) 0%, rgba(116,85,173,0) 62%),
    radial-gradient(90% 70% at 0% 100%, rgba(76,55,115,0.75) 0%, rgba(76,55,115,0) 70%),
    var(--c-ink);
  border-radius: 20px; padding: 24px 18px 20px; box-shadow: var(--shadow-lg);
}
.curve-title { font-family: var(--font-title); font-weight: 600; font-size: 24px; line-height: 1.2; margin: 0; color: var(--c-white); }
.curve-title .hl { display: block; color: var(--c-lilac); }   /* "CX revenue maturity" on its own line, at every width */
.intro-curve .curve-holder { margin: 40px 0 0; }   /* room above Stage 5 for the teaser's pill */
.intro-curve .curve-stage { margin: 0 -18px; }      /* the curve runs edge to edge (the card's padding) */
.intro-curve .curve { overflow: visible; }         /* the glow behind Stage 5 runs past the top edge */
.curve-stage { position: relative; }
.hero-area-top { stop-color: var(--c-purple); stop-opacity: 0.62; }
.hero-area-bottom { stop-color: var(--c-purple); stop-opacity: 0; }
.hero-line-start { stop-color: var(--c-lilac); }
.hero-line-end { stop-color: var(--c-white); }
.hero-glow-in { stop-color: var(--c-purple); stop-opacity: 0.9; }
.hero-glow-out { stop-color: var(--c-purple); stop-opacity: 0; }
.hero-line { stroke-width: 4; stroke-linecap: round; }
.intro-curve .node .dot { fill: var(--c-ink); stroke: var(--c-lilac); stroke-width: 2.5; }
.intro-curve .node-num { fill: var(--c-white); font-size: 15px; }
.teaser-ring { fill: none; stroke: var(--c-white); stroke-width: 2.5; }
.teaser-pulse { fill: none; stroke: var(--c-lilac); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.teaser-pill {
  position: absolute; z-index: 1; pointer-events: none;
  transform: translate(var(--ax, -50%), calc(-100% - 22px));
  font-family: var(--font-ui); font-weight: 500; font-size: 13px; line-height: 1.3;
  background: var(--c-lilac); color: var(--c-ink); border-radius: 999px; padding: 4px 11px; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.intro-curve .stage-names li::before { border-color: var(--c-lilac); color: var(--c-white); }
.intro-curve .sn-name { color: var(--c-white); }
.intro-curve .sn-gist { color: rgba(255,255,255,0.8); }
.intro-curve .barrier-label { color: var(--c-lilac); }
@media (min-width: 720px) { .curve-title { font-size: 28px; } .intro-curve { padding: 26px 22px 20px; } .intro-curve .curve-stage { margin: 0 -22px; } }
@media (min-width: 960px) {
  .curve-title { font-size: 32px; }
  .intro-curve { padding: 28px 24px 22px; }
  .intro-curve .curve-stage { margin: 0 -24px; }
  /* the hero card a little wider, so each barrier line stays on one line */
  .intro-band .inner.intro-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
/* The motion: the area fades up, the line draws, the nodes pop in turn, then the teaser hops
   (app.js moves it; these rules smooth it). Off for reduced motion and in the still state. */
@media (prefers-reduced-motion: no-preference) {
  .curve-holder.hero:not(.still) .hero-area, .curve-holder.hero:not(.still) .hero-glow { animation: hero-fade 900ms ease-out both; }
  .curve-holder.hero:not(.still) .hero-line { stroke-dasharray: 1; animation: hero-draw 1000ms cubic-bezier(.3,.1,.3,1) both; }
  .curve-holder.hero:not(.still) .node { transform-box: fill-box; transform-origin: center; animation: hero-pop 420ms cubic-bezier(.2,.9,.3,1.25) both; animation-delay: calc(var(--i) * 160ms + 150ms); }
  .curve-holder.hero:not(.still) .teaser, .curve-holder.hero:not(.still) .teaser-pill { animation: hero-fade 300ms ease-out 850ms both; }   /* in by 1.15s, so the pill sits on Stage 1 before its first hop at 1.45s */
  .curve-holder.hero:not(.still) .teaser { transition: transform 520ms cubic-bezier(.45,0,.25,1); }
  .curve-holder.hero:not(.still) .teaser-pill { transition: left 520ms cubic-bezier(.45,0,.25,1), top 520ms cubic-bezier(.45,0,.25,1), transform 520ms cubic-bezier(.45,0,.25,1); }
  .curve-holder.hero:not(.still) .teaser.landed .teaser-pulse { animation: hero-pulse 1200ms ease-out 1; }
  @keyframes hero-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes hero-pop { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: scale(1); } }
  @keyframes hero-pulse { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
}

/* 2 Nov, v8: the next step ------------------------------------------------------- */
/* One block under the 3 insights, the Purple card: the email, then HubSpot's calendar in a white
   box. On Purple only White carries text (Doc 00 L114), so the form's words go white, the error's
   warning sign too, and the button inverts. */
.next-card .field-label, .next-card .consent, .next-card .fineprint, .next-card .error, .next-card .error:not(:empty)::before { color: var(--c-white); }
.next-card .fineprint a, .next-card .calendar-fallback a { color: var(--c-white); text-decoration: underline; text-underline-offset: 2px; }
.next-card .consent input { accent-color: var(--c-ink); }
.next-card .email-form { max-width: 480px; }
.next-card .email-form input[type="email"] { border-color: var(--c-white); }
.next-card .email-status { color: var(--c-white); font-weight: 600; margin: 0 0 14px; }
.next-card .email-status .tickmark, .next-card .booked .tickmark { color: var(--c-white); }
.calendar-wrap { background: var(--c-white); border-radius: 12px; padding: 6px; margin-top: 18px; }
.calendar-wrap iframe { width: 100% !important; border: 0; display: block; min-height: 620px; }
.calendar-fallback { margin: 12px 0 0; }
.booked { font-weight: 600; margin: 4px 0 0; color: var(--c-white); }
@media (max-width: 600px) { .next-card { padding: 24px 14px; } .calendar-wrap { padding: 2px; } .calendar-wrap iframe { min-height: 560px; } }
/* Not ready for a call: one quiet line under the card */
.not-ready { margin: 16px 0 0; color: var(--c-slate); font-size: 15.5px; }
.not-ready a { color: var(--c-purple); text-decoration: underline; text-underline-offset: 2px; }
/* The team: one quiet link */
.team-share { max-width: 600px; }
.team-link { color: var(--c-purple); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }