/* The Empty Seat Diagnostic -- all styles for lite/index.html.
   Plain CSS, no build step: the page links this file directly. */
:root {
  --green-050: #F2FAE8;
  --green-100: #D4EFA3;
  --green-300: #AADA60;
  --green-500: #7DC114;
  --green-600: #5E9A0D;
  --green-800: #3F6D07;
  --green-950: #244002;
  --blue-050: #E8F3FD;
  --blue-200: #B8D8F7;
  --blue-400: #79B8EF;
  --blue-500: #3A85D4;
  --blue-700: #1A5FA8;
  --blue-900: #0C3F75;
  --blue-950: #062140;
  --risk-300: #F2A695;
  --risk-500: #E8806F;
  --white: #F8F8F6;
  --gray-100: #EAEAE6;
  --gray-300: #C4C4BE;
  --gray-500: #888882;
  --gray-700: #4E4E4A;
  --ink: #2A2A27;
  --black: #111110;
  --line: rgba(42, 42, 39, 0.16);
  --max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: "DM Sans", sans-serif; font-weight: 400; line-height: 1.75; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
.shell { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
.eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 24px; color: var(--green-800); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 30px; height: 1px; background: currentColor; flex-shrink: 0; }
.display { margin: 0; font-family: "DM Serif Display", serif; font-size: clamp(2.7rem, 5.2vw, 5.25rem); font-weight: 400; line-height: 1; letter-spacing: -0.025em; }
.display em, .section-title em, .question em { color: var(--green-500); font-weight: 400; }
.clarity-highlight { color: #4F97E6; white-space: nowrap; filter: url(#smudge); text-shadow: 3px 0 3px rgba(58,133,212,0.5), 6px 0 7px rgba(58,133,212,0.3), -2px 0 3px rgba(94,162,232,0.35); }
.section-title { margin: 0; font-family: "DM Serif Display", serif; font-size: clamp(2.1rem, 4vw, 3.8rem); font-weight: 400; line-height: 1.06; letter-spacing: -0.02em; }
.body-lg { max-width: 690px; margin: 24px 0 0; color: var(--gray-700); font-size: 1.025rem; line-height: 1.85; }
.btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0.8rem 1.65rem; border: 1px solid transparent; background: none; color: inherit; cursor: pointer; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-decoration: none; text-transform: uppercase; transition: transform 220ms cubic-bezier(0.2, 0, 0, 1), box-shadow 220ms ease, border-color 220ms ease, color 220ms ease; }
/* Squircle corners on every clickable control. `corner-shape` gives a true
   superellipse where it is supported; everywhere else the radius alone still
   renders a well-proportioned rounded corner. Round icon buttons and the joined
   lever-tab strip keep their own shapes. */
.btn,
.option,
.optin-choice label,
.nav-menu a,
.nav-menu button,
.score-buttons button,
.yesno-buttons button {
  border-radius: 16px;
  corner-shape: squircle;
}
.score-buttons button, .yesno-buttons button { border-radius: 12px; }
/* Bottom-up fill sweep shared by every button */
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: scaleY(0); transform-origin: bottom; transition: transform 0.42s cubic-bezier(0.2, 0, 0, 1); }
.btn:hover::before { transform: scaleY(1); }
.btn[disabled] { overflow: visible; }
.btn[disabled]::before { display: none; }
/* Solid buttons: resting depth + a gentle darken sweep on hover */
.btn-primary { background: linear-gradient(180deg, var(--green-500), var(--green-600)); color: white; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 6px 18px rgba(36,64,2,0.18); }
.btn-primary::before { background: linear-gradient(180deg, var(--green-600), var(--green-800)); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 12px 32px rgba(125,193,20,0.32); }
.btn-blue { background: linear-gradient(180deg, var(--blue-500), var(--blue-700)); color: white; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 6px 18px rgba(6,33,64,0.2); }
.btn-blue::before { background: linear-gradient(180deg, var(--blue-700), var(--blue-900)); }
.btn-blue:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 12px 32px rgba(58,133,212,0.3); }
.btn-dark { background: var(--ink); color: white; box-shadow: 0 6px 18px rgba(0,0,0,0.22); }
.btn-dark::before { background: linear-gradient(180deg, var(--green-800), var(--green-950)); }
.btn-dark:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,0.3); }
/* Ghost / outline buttons: brand colour floods up and the label flips to white */
.btn-secondary { border-color: rgba(248,248,246,0.32); color: var(--white); }
.btn-secondary::before { background: var(--green-500); }
.btn-secondary:hover { border-color: var(--green-500); color: white; transform: translateY(-2px); }
.phone-btn::before { background: var(--blue-900); }
.btn:not(.btn-primary):not(.btn-secondary):not(.btn-blue):not(.btn-dark):not(.phone-btn)::before { background: var(--ink); }
.btn:not(.btn-primary):not(.btn-secondary):not(.btn-blue):not(.btn-dark):not(.phone-btn):hover { color: white; transform: translateY(-2px); }
/* Tactile press */
.btn:active { transform: translateY(0) scale(0.985); }
.strategy-btn, .calc-cta-btn { min-height: 60px; flex-direction: column; gap: 3px; padding-top: 0.65rem; padding-bottom: 0.65rem; line-height: 1.15; }
.strategy-btn { font-size: 0.88rem; text-align: center; }
.strategy-btn small { font-size: 0.58rem; font-weight: 500; letter-spacing: 0.08em; opacity: 0.82; }

nav { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(248,248,246,0.12); background: rgba(17,17,16,0.94); color: var(--white); backdrop-filter: blur(16px); transition: transform 240ms cubic-bezier(0.2, 0, 0, 1); will-change: transform; }
body.mobile-main-nav-compact:not(.profile-mode) > nav { transform: translateY(-105%); }
.nav-inner { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 26px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-logo { width: 205px; height: auto; display: block; }
.nav-actions { position: relative; display: flex; align-items: center; gap: 10px; }
.nav-menu-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 42px; height: 42px; flex: 0 0 auto; padding: 0; border: 1px solid rgba(248,248,246,0.26); border-radius: 50%; background: transparent; color: var(--white); cursor: pointer; transition: background 200ms ease, border-color 200ms ease, transform 200ms ease; }
.nav-menu-toggle span { display: block; width: 17px; height: 1.5px; background: currentColor; transition: transform 220ms cubic-bezier(0.2, 0, 0, 1), opacity 160ms ease; }
.nav-menu-toggle:hover { border-color: var(--green-300); background: rgba(255,255,255,0.08); transform: translateY(-1px); }
.nav-menu-toggle[aria-expanded="true"] { border-color: var(--green-300); background: rgba(255,255,255,0.1); }
.nav-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.nav-menu { position: absolute; top: calc(100% + 14px); right: 0; z-index: 60; display: grid; gap: 6px; width: min(290px, calc(100vw - 40px)); padding: 10px; border: 1px solid rgba(248,248,246,0.18); background: rgba(17,17,16,0.98); box-shadow: 0 26px 64px rgba(0,0,0,0.5); backdrop-filter: blur(16px); transform-origin: top right; animation: navMenuIn 0.22s cubic-bezier(0.2, 0, 0, 1) both; }
.nav-menu[hidden] { display: none; }
.nav-menu a,
.nav-menu button { display: flex; align-items: center; width: 100%; min-height: 46px; padding: 0.7rem 1rem; border: 1px solid rgba(248,248,246,0.14); background: transparent; color: var(--gray-300); cursor: pointer; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; line-height: 1.25; text-align: left; text-decoration: none; text-transform: uppercase; transition: background 200ms ease, border-color 200ms ease, color 200ms ease; }
.nav-menu a:hover,
.nav-menu button:hover { border-color: rgba(121,184,239,0.7); background: rgba(58,133,212,0.1); color: var(--white); }
/* Contact matches the section links; only the green CTA stands apart. */
.nav-menu .nav-menu-cta { justify-content: center; min-height: 58px; margin-top: 4px; border-color: transparent; background: linear-gradient(180deg, var(--green-500), var(--green-600)); color: white; font-size: 0.76rem; letter-spacing: 0.12em; text-align: center; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 8px 20px rgba(36,64,2,0.3); transition: background 220ms ease, transform 200ms ease, box-shadow 220ms ease; }
.nav-menu .nav-menu-cta:hover { border-color: transparent; background: linear-gradient(180deg, var(--green-600), var(--green-800)); color: white; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 12px 28px rgba(125,193,20,0.32); }
@keyframes navMenuIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .nav-menu { animation: none; } .nav-menu-toggle span { transition: none; } }

.hero { min-height: calc(100vh - 72px); display: grid; place-items: center; position: relative; overflow: hidden; background: var(--black); color: var(--white); }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 76% 28%, rgba(125,193,20,0.22), transparent 28%), radial-gradient(circle at 5% 90%, rgba(58,133,212,0.15), transparent 32%); }
.hero::after { content: ""; position: absolute; width: 560px; height: 560px; right: 150px; bottom: 150px; background: url(../assets/images/synchrony-mark-faint.png) no-repeat center / contain; pointer-events: none; }
.hero-inner { position: relative; z-index: 1; padding: 58px 0 54px; }
.hero .eyebrow { color: var(--green-300); }
.hero-copy { max-width: 850px; }
/* Sits hard left; the auto margin packs the icons and the logo together on the right. */
.nav-diagnostic-name { display: grid; gap: 3px; flex: 0 1 auto; margin-right: auto; color: var(--blue-400); font-family: "DM Serif Display", serif; font-weight: 400; font-size: clamp(0.95rem, 1.5vw, 1.28rem); line-height: 1.1; white-space: nowrap; text-decoration: none; cursor: pointer; transition: opacity 200ms ease; }
.nav-diagnostic-name:hover { opacity: 0.78; }
.nav-diagnostic-name em { color: var(--green-300); font-style: italic; }
.nav-diagnostic-name small { color: var(--gray-500); font-family: "DM Sans", sans-serif; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.16em; line-height: 1.2; text-transform: uppercase; }
.svg-filters { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.hero .display span { display: block; color: var(--green-300); font-style: italic; }
.hero .body-lg { max-width: 720px; margin-top: 22px; color: var(--gray-100); font-size: 1.16rem; line-height: 1.72; }
.hero-calc-line { max-width: 760px; margin: 20px 0 0; color: var(--gray-300); font-size: 0.92rem; line-height: 1.75; }
.hero-calc-name { color: var(--blue-200); font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero .hero-actions { max-width: 500px; width: 100%; flex-wrap: nowrap; }
.hero .hero-actions .btn { white-space: nowrap; }
.hero .hero-actions .strategy-btn { min-width: 280px; font-size: 0.8rem; }
/* Hero cost-calculator CTA (its own button, opens the calculator dialog) */
.calc-cta-btn { gap: 9px; font-size: 1rem; text-align: center; }
.calc-cta-btn > span, .calc-cta-btn small { display: block; width: 100%; text-align: center; }
.calc-cta-btn small { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.06em; opacity: 0.92; }
.calc-cta-btn .cta-title { font-size: 1.12em; letter-spacing: 0.08em; line-height: 1.32; text-align: center; }
.hero .hero-actions .calc-cta-btn { width: 100%; min-width: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 8px 22px rgba(58,133,212,0.3); animation: ctaGlow 3.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .hero .hero-actions .calc-cta-btn { animation: none; }
}
.assessment-subhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px 10px; max-width: 720px; margin: 28px 0 0; padding-top: 20px; color: var(--gray-700); font-size: 0.98rem; line-height: 1.55; }
.assessment-subhead strong { color: var(--green-950); font-family: "DM Serif Display", serif; font-size: clamp(1.25rem, 2vw, 1.62rem); font-weight: 400; line-height: 1.08; }
.assessment-subhead span { color: var(--gray-700); }
.assessment-subhead .blueprint-name { color: var(--green-800); font-weight: 700; }
.assessment-heading-copy .section-title { padding-bottom: 16px; border-bottom: 1px solid rgba(63,109,7,0.16); }
.assessment-subtitle { margin: 16px 0 0; padding-bottom: 12px; color: var(--gray-700); font-size: 1.14rem; line-height: 1.6; }

.why-diagnostic { padding: 72px 0 78px; border-top: 4px solid var(--blue-500); border-bottom: 1px solid rgba(12,63,117,0.12); background: var(--blue-050); color: var(--blue-950); text-align: center; }
.why-diagnostic .shell { max-width: 860px; }
.why-diagnostic .eyebrow { justify-content: center; margin-bottom: 24px; color: var(--blue-900); letter-spacing: 0; }
.why-diagnostic .eyebrow::before { background: var(--blue-500); }
.why-diagnostic blockquote { margin: 0 auto; color: var(--ink); font-family: "DM Serif Display", serif; font-size: 2.25rem; font-style: italic; font-weight: 400; line-height: 1.38; }
.why-diagnostic .quote-line { display: block; }
.why-diagnostic .quote-emphasis { color: var(--blue-900); }
.why-mantra { display: inline-block; margin: 22px auto 0; color: var(--blue-900); font-size: 0.86rem; font-weight: 600; letter-spacing: 0; line-height: 1.4; text-transform: uppercase; }
/* Leak-motif pipeline */
.why-diagnostic { position: relative; overflow: hidden; }
.why-diagnostic .shell { position: relative; z-index: 1; }
.why-diagnostic::after { content: ""; position: absolute; width: 380px; height: 380px; left: 58%; top: 56%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(58,133,212,0.13), transparent 68%); pointer-events: none; }
.leak-line { display: flex; align-items: center; justify-content: center; max-width: 540px; margin: 8px auto 30px; }
.leak-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: rgba(12,63,117,0.28); }
.leak-seg { flex: 1 1 auto; height: 0; border-top: 1px dashed rgba(12,63,117,0.32); }
.leak-dot.leak { width: 15px; height: 15px; background: var(--blue-500); box-shadow: 0 0 0 4px rgba(58,133,212,0.16), 0 0 16px 3px rgba(58,133,212,0.5); animation: leakPulse 2.6s ease-in-out infinite; }
@keyframes leakPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(58,133,212,0.16), 0 0 12px 2px rgba(58,133,212,0.42); }
  50% { box-shadow: 0 0 0 7px rgba(58,133,212,0.08), 0 0 24px 5px rgba(58,133,212,0.62); }
}

.audit-intro { padding: 110px 0 84px; }
.intro-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(48px, 6vw, 88px); align-items: center; }
.intro-note { position: relative; padding: 34px 36px; border-left: 4px solid var(--green-500); border-radius: 0 6px 6px 0; background: var(--white); box-shadow: 0 22px 60px rgba(36,64,2,0.09); color: var(--gray-700); }
.intro-note-label { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; color: var(--green-800); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.intro-note-label::before { content: ""; width: 24px; height: 1px; background: var(--green-500); }
.intro-note p { margin: 0; font-family: "DM Serif Display", serif; font-size: clamp(1.35rem, 2.1vw, 1.72rem); font-weight: 400; line-height: 1.34; color: var(--ink); letter-spacing: -0.01em; }
.intro-note p strong { color: var(--green-800); font-weight: 400; font-style: italic; }
.intro-note .intro-note-tail { display: block; margin-top: 14px; font-family: "DM Sans", sans-serif; font-size: 0.92rem; font-style: normal; line-height: 1.7; color: var(--gray-500); letter-spacing: 0; }

.areas { padding: 0 0 110px; background: url(../assets/images/synchrony-mark-faint.png) no-repeat right -90px bottom -120px / 440px auto; }
.area-table { border: 1px solid var(--line); }
.area-row { display: grid; grid-template-columns: 70px 1fr; min-height: 120px; border-bottom: 1px solid var(--line); transition: background 220ms ease; }
.area-row:last-child { border-bottom: 0; }
.area-num { display: grid; place-items: center; border-right: 1px solid var(--line); color: var(--gray-300); font-family: "DM Serif Display", serif; font-size: 2rem; }
.area-main { padding: 26px 30px; }
.area-main h3 { margin: 0 0 10px; color: var(--green-950); font-family: "DM Serif Display", serif; font-size: 1.3rem; font-weight: 400; }
.area-main p { margin: 0; color: var(--gray-500); font-size: 0.82rem; line-height: 1.7; }

.quote-band { padding: 82px 0; background: var(--green-950); color: var(--white); text-align: center; }
.quote-band blockquote { max-width: 900px; margin: 0 auto; font-family: "DM Serif Display", serif; font-size: clamp(1.7rem, 3.4vw, 3rem); font-style: italic; font-weight: 400; line-height: 1.35; }
.quote-band blockquote::before { content: "“"; color: var(--green-300); }
.quote-band blockquote::after { content: "”"; color: var(--green-300); }
.quote-band blockquote span { color: var(--green-300); }
.quote-band cite { display: block; margin-top: 24px; color: var(--green-100); font-size: 0.66rem; font-style: normal; letter-spacing: 0.15em; text-transform: uppercase; }

.assessment-section { padding: 110px 0; background-color: var(--green-050); background-image: url(../assets/images/synchrony-mark-faint.png); background-repeat: no-repeat; background-position: left -120px top -130px; background-size: 440px auto; }
.assessment-head { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr); align-items: center; gap: clamp(48px, 8vw, 110px); margin-bottom: 52px; }
.assessment-heading-copy { max-width: 760px; }
.assessment-heading-copy .eyebrow { margin-bottom: 18px; }
.assessment-head p { margin: 0; color: var(--gray-700); }
.assessment-description { display: grid; gap: 18px; padding: 8px 0 8px 28px; border-left: 2px solid var(--green-500); font-size: 0.94rem; line-height: 1.8; }
.assessment-description strong { color: var(--green-950); font-weight: 600; }
.assessment-card { min-height: 520px; border: 1px solid rgba(63,109,7,0.22); background: var(--white); box-shadow: 0 28px 80px rgba(36,64,2,0.08); }
.assessment-top { height: 4px; background: var(--gray-100); }
.assessment-bar { width: 10%; height: 100%; background: var(--green-500); transition: width 240ms ease; }
.assessment-content { padding: 38px 42px 32px; }
/* ---- Diagnostic lock ----------------------------------------------------
   The vacancy number is the whole reason these questions are worth answering,
   so the card stays shut until they have one. The questions sit frosted behind
   the panel rather than being removed, so it reads as "one step away" instead
   of "come back later", and the card is capped to a predictable height while
   locked so the panel lands centred rather than halfway down a long form. */
.assessment-card { position: relative; }
.assessment-card.is-locked .assessment-content { max-height: 440px; overflow: hidden; }
.assessment-lock {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vw, 54px);
  /* Thin enough that the first question reads through as a promise of what is
     behind the panel, thick enough to keep the lock copy legible on top of it. */
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(4px) saturate(1.05);
  -webkit-backdrop-filter: blur(4px) saturate(1.05);
  text-align: center;
  transition: opacity 0.45s ease, visibility 0.45s;
}
.assessment-lock[hidden] { display: none; }
.assessment-lock.is-open { opacity: 0; visibility: hidden; pointer-events: none; }
.assessment-lock-inner { display: grid; justify-items: center; gap: 13px; max-width: 520px; }
.assessment-lock-icon { position: relative; display: grid; place-items: center; width: 60px; height: 60px; border: 1px solid rgba(63,109,7,0.3); border-radius: 50%; background: var(--green-050); color: var(--green-800); }
.assessment-lock-icon::after { content: ""; position: absolute; inset: -7px; border: 1px solid rgba(125,193,20,0.5); border-radius: 50%; animation: lockPulse 3s ease-out infinite; }
.assessment-lock h3 { margin: 3px 0 0; color: var(--green-950); font-family: "DM Serif Display", serif; font-size: clamp(1.55rem, 3vw, 2.05rem); font-weight: 400; line-height: 1.1; }
.assessment-lock p { margin: 0; max-width: 47ch; color: var(--gray-700); font-size: 0.97rem; line-height: 1.68; }
.assessment-lock .btn { width: min(360px, 100%); margin-top: 5px; }
@keyframes lockPulse {
  0% { opacity: .6; transform: scale(.95); }
  70%, 100% { opacity: 0; transform: scale(1.16); }
}
@media (prefers-reduced-motion: reduce) { .assessment-lock-icon::after { animation: none; } }
.step-meta { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 38px; color: var(--green-800); font-size: 0.67rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.step-progress { display: flex; align-items: center; gap: 12px; min-width: 200px; max-width: 260px; flex: 0 1 auto; }
.step-progress-track { flex: 1; height: 6px; border-radius: 100px; background: var(--gray-100); overflow: hidden; }
.step-progress-fill { height: 100%; width: 0; border-radius: 100px; background: var(--green-500); transition: width 300ms cubic-bezier(0.2, 0, 0, 1); }
.step-progress-pct { flex: 0 0 auto; color: var(--green-800); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.question { max-width: 880px; margin: 0; color: var(--green-950); font-family: "DM Serif Display", serif; font-size: clamp(1.65rem, 3vw, 2.35rem); font-weight: 400; line-height: 1.2; }
.question-hint { margin: 10px 0 30px; color: var(--gray-500); font-size: 0.87rem; line-height: 1.65; }
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.options.rating-options { grid-template-columns: repeat(5, 1fr); }
.option { min-height: 62px; padding: 14px 18px; border: 1px solid var(--line); background: var(--white); color: var(--ink); cursor: pointer; text-align: left; font-size: 0.9rem; transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease; }
.rating-options .option { min-height: 70px; padding: 12px; text-align: center; font-family: "DM Serif Display", serif; font-size: 1.2rem; }
.rating-scale { display: flex; justify-content: space-between; gap: 20px; margin: 0 0 12px; color: var(--gray-500); font-size: 0.72rem; }
.rating-scale[hidden] { display: none; }
.option:hover { border-color: var(--green-500); background: var(--green-050); }
.option.selected { border-color: var(--green-800); background: var(--green-050); color: var(--green-950); box-shadow: inset 3px 0 0 var(--green-500); }
.assessment-nav { display: flex; justify-content: space-between; gap: 14px; margin-top: 35px; padding-top: 25px; border-top: 1px solid var(--line); }
.assessment-nav .btn[disabled] { background: var(--gray-100); color: var(--gray-300); cursor: not-allowed; transform: none; }
.contact-gate { display: none; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; }
.field { display: grid; align-content: start; gap: 7px; }
.field label { color: var(--green-800); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; }
.field input, .field select, .field textarea { width: 100%; min-height: 54px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 0; background: white; color: var(--ink); outline: none; }
.field textarea { min-height: 170px; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green-500); }
.form-note { margin: 16px 0 0; color: var(--gray-500); font-size: 0.74rem; }
.results { display: none; }
.results.show { display: block; }
.result-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 160px minmax(0, 1fr) minmax(190px, 230px); gap: 34px; align-items: center; padding: 36px; border: 1px solid rgba(121,184,239,0.2); border-radius: 18px; background: linear-gradient(135deg, #111110 0%, #172115 52%, #0C2946 100%); color: white; box-shadow: 0 24px 70px rgba(12,63,117,0.18); }
/* Brand watermark. The faint mark used elsewhere was drawn for light surfaces and
   all but disappears here, so this uses the full-colour mark held right down. */
.result-hero::before { content: ""; position: absolute; z-index: -1; width: 420px; height: 420px; right: -70px; top: -80px; background: url(../assets/images/synchrony-mark.png) no-repeat center / contain; opacity: 0.12; pointer-events: none; }
.score-block { display: grid; justify-items: center; align-content: center; gap: 14px; }
.score-ring { position: relative; width: 152px; height: 152px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.055), transparent 66%); text-align: center; }
.score-ring strong { display: block; color: var(--green-300); font-family: "DM Serif Display", serif; font-size: 3.2rem; font-weight: 400; line-height: 1; }
.score-ring-max { color: var(--gray-300); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.04em; }
.score-ring-label { color: var(--gray-300); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; text-align: center; }
.result-kicker { display: block; margin-bottom: 7px; color: var(--green-300); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.result-hero h3 { margin: 0 0 10px; color: var(--white); font-family: "DM Serif Display", serif; font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.05; }
.result-hero p { max-width: 670px; margin: 0; color: var(--gray-100); font-size: 0.9rem; line-height: 1.68; }
.result-priority { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 12px; align-items: center; margin-top: 20px; padding-top: 17px; border-top: 1px solid rgba(248,248,246,0.14); }
.result-priority > span { color: var(--gray-300); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.result-priority strong { color: var(--white); font-size: 0.92rem; }
.result-priority small { font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.result-cost-card { display: grid; gap: 7px; align-content: center; min-height: 164px; padding: 24px; border: 1px solid rgba(121,184,239,0.32); border-radius: 14px; background: linear-gradient(145deg, rgba(58,133,212,0.22), rgba(58,133,212,0.07)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }
.result-cost-card[hidden] { display: none; }
.result-cost-card span { color: var(--blue-200); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.result-cost-card strong { color: var(--white); font-family: "DM Serif Display", serif; font-size: clamp(1.8rem, 3vw, 2.35rem); font-weight: 400; line-height: 1; letter-spacing: -0.03em; }
.result-cost-card small { color: var(--gray-300); font-size: 0.68rem; line-height: 1.5; }
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.result-panel { padding: 28px 30px; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: 0 12px 34px rgba(36,64,2,0.055); }
/* Section heading with the small brand rule beside it. */
.result-panel h4 { display: flex; align-items: center; gap: 9px; margin: 0 0 20px; color: var(--green-950); font-family: "DM Serif Display", serif; font-size: 1.28rem; font-weight: 400; letter-spacing: -0.01em; text-transform: none; }
.result-panel h4::before { content: ""; flex: 0 0 auto; width: 7px; height: 18px; border-radius: 2px; background: var(--green-500); }
.result-panel-eyebrow, .result-panel-heading > div > span { display: block; margin-bottom: 5px; color: var(--green-800); font-size: 0.61rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.result-panel-eyebrow + h4 { margin-bottom: 20px; }
.result-panel-heading { display: flex; justify-content: space-between; gap: 28px; align-items: end; margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.result-panel-heading h4 { margin-bottom: 0; }
.result-panel-heading p { max-width: 410px; margin: 0; color: var(--gray-500); font-size: 0.78rem; line-height: 1.55; }
/* Where to Focus First: score pill, lever name, severity tag, consequence. */
.focus-item { position: relative; margin-bottom: 14px; padding: 18px 18px 18px 21px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(120deg, rgba(242,250,232,0.78), rgba(255,255,255,0.94)); }
.focus-item::before { content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--focus-accent); }
.focus-item:last-child { margin-bottom: 0; }
.focus-priority { margin-bottom: 7px; color: var(--gray-500); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.focus-head { display: flex; justify-content: space-between; align-items: center; gap: 9px; margin-bottom: 4px; }
.gap-score { padding: 2px 10px; border-radius: 20px; color: var(--white); font-size: 0.76rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.focus-name { color: var(--green-950); font-family: "DM Serif Display", serif; font-size: 1.08rem; font-weight: 400; }
.gap-level { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.gap-consequence { display: block; margin: 4px 0 0; color: var(--gray-700); font-size: 0.86rem; line-height: 1.55; }
/* What to Do First: numbered steps in brand counters. */
.result-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.result-steps li { position: relative; margin-bottom: 12px; padding: 3px 0 14px 40px; border-bottom: 1px solid var(--line); color: var(--gray-700); font-size: 0.86rem; line-height: 1.58; }
.result-steps li:last-child { margin-bottom: 0; }
.result-steps li:last-child { padding-bottom: 0; border-bottom: 0; }
.result-steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; background: linear-gradient(145deg, var(--green-500), var(--green-800)); color: white; box-shadow: 0 5px 12px rgba(63,109,7,0.18); font-size: 0.72rem; font-weight: 700; }
.result-steps li strong { color: var(--green-950); }
.result-note-panel { margin-top: 18px; padding-top: 16px; padding-bottom: 16px; border-style: dashed; background: rgba(242,250,232,0.5); box-shadow: none; }
.result-method { margin: 0; color: var(--gray-500); font-size: 0.74rem; line-height: 1.65; }
.dimension-scores { margin-top: 18px; }
.dimension-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.dimension-row { position: relative; display: grid; gap: 8px; padding: 17px 18px 15px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(242,250,232,0.5)); }
.dimension-row::before { content: ""; position: absolute; left: 0; top: 15px; width: 3px; height: 28px; border-radius: 0 3px 3px 0; background: var(--dimension-accent); }
.dimension-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.dimension-name { color: var(--green-950); font-size: 0.92rem; font-weight: 700; }
.dimension-pct { color: var(--gray-500); font-size: 0.86rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.dimension-pct strong { font-size: 0.94rem; font-weight: 700; }
.dimension-track { height: 7px; border-radius: 6px; background: var(--gray-100); overflow: hidden; }
.dimension-fill { height: 100%; width: 0; border-radius: 6px; transition: width 0.9s cubic-bezier(0.2, 0, 0, 1); }
.dimension-state { font-size: 0.61rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
/* Blueprint is the whole ask here; retake sits quietly underneath it. */
.result-closing { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; margin-top: 20px; padding: 27px 30px; border: 1px solid rgba(58,133,212,0.22); border-radius: 16px; background: linear-gradient(120deg, var(--blue-050), rgba(242,250,232,0.76)); box-shadow: 0 12px 34px rgba(12,63,117,0.06); }
.result-closing-label { display: block; margin-bottom: 5px; color: var(--blue-900); font-size: 0.61rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.result-actions { display: grid; justify-items: center; gap: 12px; margin-top: 0; }
.result-actions .btn { width: min(410px, 100%); min-height: 60px; border-radius: 11px; font-size: 0.86rem; }
.result-retake { padding: 0; border: 0; background: none; color: var(--gray-700); cursor: pointer; font-size: 0.86rem; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; transition: color 200ms ease; }
.result-retake:hover { color: var(--green-800); }
[data-theme="dark"] .result-retake { color: var(--d-soft); }
[data-theme="dark"] .result-retake:hover { color: var(--d-head); }
.result-cta-intro { max-width: 540px; margin: 0; color: var(--blue-950); font-family: "DM Serif Display", serif; font-size: 1.22rem; font-weight: 400; line-height: 1.35; }

@media (max-width: 980px) {
  .result-hero { grid-template-columns: 150px 1fr; }
  .result-cost-card { grid-column: 1 / -1; grid-template-columns: 1fr auto; min-height: 0; }
  .result-cost-card small { grid-column: 1 / -1; }
  .result-closing { grid-template-columns: 1fr; }
  .result-actions { justify-items: start; }
}

@media (max-width: 680px) {
  .result-hero { grid-template-columns: 1fr; gap: 24px; padding: 27px 22px; text-align: center; }
  .result-hero p { font-size: 0.96rem; }
  .result-priority { grid-template-columns: 1fr; justify-items: center; }
  .result-cost-card { grid-template-columns: 1fr; text-align: left; }
  .result-cost-card small { grid-column: auto; }
  .result-panel, .result-closing { padding: 24px 20px; }
  .result-panel-heading { display: grid; align-items: start; }
  .dimension-list { grid-template-columns: 1fr; }
  .result-actions { justify-items: stretch; }
}

.blueprint { position: relative; overflow: hidden; padding: 110px 0; background: var(--black); color: var(--white); }
.blueprint::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 68% 0%, rgba(58,133,212,0.26), transparent 34%),
    radial-gradient(circle at 18% 58%, rgba(26,95,168,0.18), transparent 38%);
  pointer-events: none;
}
.blueprint::after {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  right: 180px;
  top: 60px;
  background: url(../assets/images/synchrony-mark-faint.png) no-repeat center / contain;
  pointer-events: none;
}
.blueprint .shell { position: relative; z-index: 1; }
.blueprint .eyebrow { color: var(--blue-400); }
.blueprint-head .eyebrow { color: var(--green-300); }
.blueprint-head { display: grid; grid-template-columns: 1fr 0.8fr; gap: 70px; align-items: end; margin-bottom: 55px; }
.blueprint-head p { margin: 0; color: var(--gray-300); }
.blueprint .section-title em { color: var(--blue-500); }
.blueprint-tabs { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 48px; border: 1px solid rgba(248,248,246,0.16); }
.blueprint-tab { min-height: 66px; border: 0; border-right: 1px solid rgba(248,248,246,0.16); border-bottom: 3px solid transparent; background: transparent; color: var(--gray-300); cursor: pointer; font-size: 0.69rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; transition: color 200ms ease, background 200ms ease, border-bottom-color 200ms ease; }
.blueprint-tab:last-child { border-right: 0; }
.blueprint-tab.active { border-bottom-color: var(--blue-500); color: var(--blue-400); background: rgba(58,133,212,0.1); }
.blueprint-module { display: none; padding: 56px 0 0; }
.blueprint-module.active { display: block; animation: moduleIn 0.45s cubic-bezier(0.2, 0, 0, 1) both; }
.blueprint-feedback { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 34px; align-items: center; margin-top: 76px; padding: 30px 32px; border: 1px solid rgba(121,184,239,0.3); background: linear-gradient(110deg, rgba(58,133,212,0.16), rgba(58,133,212,0.035)); }
.blueprint-feedback-copy { display: grid; gap: 7px; }
.blueprint-feedback-copy strong { color: var(--blue-200); font-family: "DM Serif Display", serif; font-size: 1.55rem; font-weight: 400; line-height: 1.15; }
.blueprint-feedback-copy span { color: var(--gray-300); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.13em; line-height: 1.55; text-transform: uppercase; }
.blueprint-feedback .btn { min-width: 170px; }
.module-intro { max-width: 760px; margin-bottom: 38px; }
.module-intro h3 { margin: 0; font-family: "DM Serif Display", serif; font-size: clamp(2.4rem, 5vw, 4.5rem); font-weight: 400; line-height: 1.02; }
.module-intro h3 em { color: var(--blue-400); }
.module-intro p { color: var(--gray-300); }
.module-card-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(248,248,246,0.16); border-left: 1px solid rgba(248,248,246,0.16); }
.module-card { padding: 30px; border-right: 1px solid rgba(248,248,246,0.16); border-bottom: 1px solid rgba(248,248,246,0.16); transition: background 200ms ease; }
.module-card h4 { margin: 0 0 12px; color: var(--blue-200); font-family: "DM Serif Display", serif; font-size: 1.4rem; font-weight: 400; }
.module-card p { margin: 0; color: var(--gray-300); font-size: 0.84rem; }
.prompt-list { display: grid; gap: 8px; margin-top: 28px; }
.prompt-intro { margin: 30px 0 -10px; color: var(--white); font-weight: 500; }
.prompt-intro strong { color: var(--blue-400); }
.prompt { padding: 16px 20px; border-left: 2px solid var(--blue-500); background: rgba(58,133,212,0.08); color: var(--gray-300); font-size: 0.86rem; line-height: 1.65; transition: background 200ms ease, border-left-color 200ms ease; }
.scorecard-list { display: grid; gap: 10px; max-width: 850px; }
.scorecard-item { padding: 18px; border: 1px solid rgba(248,248,246,0.16); }
.scorecard-row { display: flex; justify-content: space-between; gap: 18px; align-items: center; }
.scorecard-row span { color: var(--gray-300); font-size: 0.85rem; }
.score-buttons { display: flex; gap: 5px; flex: 0 0 auto; }
.score-buttons button { width: 36px; height: 36px; border: 1px solid rgba(248,248,246,0.2); background: transparent; color: var(--gray-300); cursor: pointer; transition: background 150ms ease, border-color 150ms ease, color 150ms ease; }
.score-buttons button.selected { border-color: var(--blue-500); background: var(--blue-500); color: white; }
.score-total { margin-top: 16px; color: var(--blue-400); font-family: "DM Serif Display", serif; font-size: 1.6rem; }
.scorecard-insight { margin-top: 26px; padding: 24px; border-left: 3px solid var(--blue-500); background: rgba(58,133,212,0.08); }
.scorecard-insight h4 { margin: 0 0 8px; color: var(--blue-200); font-family: "DM Serif Display", serif; font-size: 1.35rem; font-weight: 400; }
.scorecard-insight p { margin: 0; color: var(--gray-300); font-size: 0.84rem; }
.scorecard-insight ul { margin: 14px 0 0; padding-left: 18px; color: var(--gray-300); font-size: 0.84rem; }
.experience-list { display: grid; gap: 10px; max-width: 850px; }
.yesno-buttons { display: flex; gap: 6px; flex: 0 0 auto; }
.yesno-buttons button { width: 54px; height: 40px; border: 1px solid rgba(248,248,246,0.2); background: transparent; color: var(--gray-300); cursor: pointer; font-size: 0.8rem; transition: background 150ms ease, border-color 150ms ease, color 150ms ease; }
.yesno-buttons button.selected { border-color: var(--blue-500); background: var(--blue-500); color: white; }
.yesno-buttons button:not(.selected):hover { border-color: rgba(248,248,246,0.55); color: var(--white); background: rgba(248,248,246,0.07); }
.vacancy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 850px; }
.vacancy-grid .field label { color: var(--blue-200); }
.vacancy-grid .field input { background: rgba(255,255,255,0.04); border-color: rgba(248,248,246,0.2); color: var(--white); }
.vacancy-grid .field input::placeholder { color: var(--gray-500); }
.vacancy-grid .field input:focus { border-color: var(--blue-500); }
.vacancy-total { margin-top: 18px; color: var(--blue-400); font-family: "DM Serif Display", serif; font-size: 1.6rem; }
.calc-citation { max-width: 62ch; margin: 8px 0 0; color: var(--gray-500); font-size: 0.76rem; font-style: italic; line-height: 1.55; }
.blueprint-closing-cta { display: flex; flex-direction: column; align-items: center; gap: 22px; margin-top: 72px; padding-top: 44px; border-top: 1px solid rgba(248,248,246,0.16); text-align: center; }
.blueprint-closing-kicker { margin: 0; color: var(--white); font-family: "DM Serif Display", serif; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 400; line-height: 1.15; }
.blueprint-closing-cta .strategy-btn { width: min(520px, 100%); }
/* Michael's note. It swipes in from the right edge while the blueprint is on
   screen -- the closing CTA already owns the centre -- waits a beat, plays his
   message once, and swipes back out when the message is done. */
.bp-note {
  --bp-note-gutter: clamp(18px, 3vw, 46px);
  position: fixed;
  z-index: 44;
  right: var(--bp-note-gutter);
  bottom: clamp(18px, 3vw, 38px);
  width: fit-content;
  max-width: calc(100vw - 36px);
  display: grid;
  grid-template-columns: 62px auto;
  gap: 16px;
  align-items: center;
  padding: 16px 22px 16px 17px;
  overflow: hidden;
  border: 1px solid rgba(121,184,239,0.34);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(58,133,212,0.2), rgba(11,14,18,0.95) 58%), rgba(11,14,18,0.95);
  box-shadow: 0 26px 70px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  text-align: left;
  opacity: 0;
  /* Parked just past the right edge, gutter included, so it is fully off screen. */
  transform: translateX(calc(100% + var(--bp-note-gutter)));
  pointer-events: none;
  transition: opacity .45s ease, transform .62s cubic-bezier(.22, 1, .36, 1);
}
.bp-note[hidden] { display: none; }
.bp-note.is-visible { opacity: 1; transform: none; pointer-events: auto; }
/* Stay out of the way of the modals and of Michael's profile view. */
body:has(dialog[open]) .bp-note,
body.profile-mode .bp-note { opacity: 0; transform: translateX(calc(100% + var(--bp-note-gutter))); pointer-events: none; }
.bp-note::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 26%, rgba(121,184,239,0.1), transparent 72%);
  transform: translateX(-110%);
  animation: bpSweep 6s 1.5s ease-in-out infinite;
  pointer-events: none;
}
.bp-note-portrait { position: relative; width: 62px; height: 62px; border-radius: 50%; }
.bp-note-portrait img { display: block; width: 100%; height: 100%; box-sizing: border-box; object-fit: cover; object-position: center; border: 2px solid rgba(243,240,231,0.8); border-radius: 50%; filter: saturate(.88) contrast(1.04); }
.bp-note-portrait::after { content: ""; position: absolute; inset: -5px; border: 1px solid rgba(121,184,239,0.7); border-radius: 50%; animation: bpPulse 2.8s ease-out infinite; }
/* While the message plays, a small badge on the headshot mutes and unmutes it.
   The headshot itself stays visible -- it is the point of the card. */
.bp-note-audio { position: absolute; right: -5px; bottom: -5px; z-index: 3; display: grid; place-items: center; width: 27px; height: 27px; padding: 0; border: 1px solid rgba(121,184,239,0.75); border-radius: 50%; background: rgba(11,14,18,0.96); color: var(--blue-200); cursor: pointer; transition: border-color 200ms ease, color 200ms ease, background 200ms ease; }
.bp-note-audio[hidden] { display: none; }
.bp-note-audio:hover { border-color: var(--blue-400); background: rgba(58,133,212,0.3); color: white; }
.bp-note-audio .bp-cross { opacity: 0; }
.bp-note-audio.is-muted .bp-wave { opacity: 0; }
.bp-note-audio.is-muted .bp-cross { opacity: 1; }
/* Same voice as the hero nudge: sans, semibold, and held to a single line. */
.bp-note-copy { position: relative; z-index: 2; margin: 0; color: #f7f5ef; font-family: "DM Sans", sans-serif; font-size: 16px; font-weight: 600; line-height: 1.22; white-space: nowrap; }
@keyframes bpPulse {
  0% { opacity: .65; transform: scale(.94); }
  70%, 100% { opacity: 0; transform: scale(1.18); }
}
@keyframes bpSweep {
  0%, 66% { transform: translateX(-110%); }
  86%, 100% { transform: translateX(110%); }
}
/* Shrink to keep the single line inside the narrowest phones. */
@media (max-width: 620px) {
  .bp-note { --bp-note-gutter: 12px; bottom: 12px; max-width: calc(100vw - 24px); grid-template-columns: 50px auto; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 15px; }
  .bp-note-portrait { width: 50px; height: 50px; }
  .bp-note-copy { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .bp-note { transition-duration: .01ms; }
  .bp-note::after, .bp-note-portrait::after { animation: none; }
}

.about { padding: 110px 0; }
.about-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 80px; align-items: start; }
.about-card { padding: 34px; background: var(--black); color: white; }
.about-card .logo-large { width: 100%; margin-bottom: 28px; }
.about-card strong { display: block; color: var(--green-100); font-family: "DM Serif Display", serif; font-size: 2rem; font-weight: 400; }
.about-card span { color: var(--blue-200); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.about-copy .section-title { color: var(--green-950); }
.about-copy > p { color: var(--gray-700); }
.credentials { display: grid; gap: 12px; margin-top: 28px; }
.credential { padding: 18px 20px; border-left: 3px solid var(--green-500); background: var(--green-050); transition: background 200ms ease, transform 200ms ease; }
.credential strong { display: block; color: var(--green-950); font-weight: 600; }
.credential span { color: var(--gray-700); font-size: 0.84rem; }
.about-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

.final-cta { padding: 95px 0; background: var(--blue-050); text-align: center; }
.final-cta .eyebrow { justify-content: center; color: var(--blue-900); }
.final-cta .section-title { color: var(--blue-950); }
.final-cta p { max-width: 680px; margin: 20px auto 30px; color: var(--gray-700); }
footer { padding: 28px 0; background: var(--black); color: var(--gray-500); font-size: 0.72rem; }
.footer-inner { display: flex; justify-content: space-between; gap: 20px; }
.footer-inner a { color: var(--green-300); text-decoration: none; }
.profile-view { display: none; }
body.profile-mode > nav, body.profile-mode > main, body.profile-mode > footer { display: none; }
body.profile-mode .profile-view { display: block; }
.profile-nav { position: sticky; top: 0; z-index: 60; background: rgba(17,17,16,0.96); border-bottom: 1px solid rgba(248,248,246,0.14); transition: transform 240ms cubic-bezier(0.2, 0, 0, 1); will-change: transform; }
body.mobile-profile-nav-hidden.profile-mode .profile-nav { transform: translateY(-105%); }
.profile-nav-inner { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.profile-links { display: flex; align-items: center; gap: 22px; }
.profile-links a { color: var(--gray-300); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-decoration: none; text-transform: uppercase; transition: color 200ms ease; }
.profile-links a:hover { color: var(--green-300); }
.profile-back { border: 1px solid rgba(248,248,246,0.26); background: transparent; color: var(--white); cursor: pointer; padding: 0.72rem 1.1rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.profile-hero { min-height: calc(100vh - 72px); display: grid; place-items: center; padding: 58px 0 54px; background: radial-gradient(circle at 78% 20%, rgba(125,193,20,0.2), transparent 32%), var(--black); color: white; }
.profile-hero-copy { max-width: 850px; }
.profile-hero .eyebrow { color: var(--green-300); }
.profile-hero p:not(.eyebrow) { max-width: 650px; margin: 18px 0 0; color: var(--gray-300); font-size: 0.92rem; line-height: 1.75; }
.profile-stats { display: grid; grid-template-columns: repeat(4,1fr); background: var(--green-950); color: white; }
.profile-stat { padding: 28px 20px; text-align: center; border-right: 1px solid rgba(248,248,246,0.12); }
.profile-stat span { display: block; color: var(--green-100); font-size: 1.2rem; line-height: 1.35; letter-spacing: 0.05em; text-transform: uppercase; }
.profile-section { padding: 105px 0; scroll-margin-top: 72px; }
.profile-about { background: var(--green-050); }
.profile-two-col { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 80px; align-items: start; }
.profile-quote { margin: 0; padding-left: 24px; border-left: 3px solid var(--green-500); color: var(--green-950); font-family: "DM Serif Display", serif; font-size: 1.7rem; font-style: italic; line-height: 1.45; }
.profile-credentials { display: grid; gap: 12px; margin-top: 28px; }
.profile-credential { padding: 18px 20px; border-left: 2px solid var(--green-500); background: white; transition: background 200ms ease, transform 200ms ease; }
.profile-credential strong { display: block; color: var(--green-950); font-weight: 600; }
.profile-credential span, .profile-copy p { color: var(--gray-700); font-size: 0.86rem; }
.profile-testimonials { overflow: hidden; background: var(--black); color: var(--white); }
.profile-testimonials .eyebrow { color: var(--green-300); }
.profile-testimonials .section-title { color: var(--white); margin-bottom: 42px; }
.profile-testimonials-track-wrap { position: relative; overflow: hidden; }
.profile-testimonials-track-wrap::before, .profile-testimonials-track-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; }
.profile-testimonials-track-wrap::before { left: 0; background: linear-gradient(to right, var(--black), transparent); }
.profile-testimonials-track-wrap::after { right: 0; background: linear-gradient(to left, var(--black), transparent); }
.profile-testimonials-track { display: flex; gap: 18px; width: max-content; animation: profileTestimonialScroll 40s linear infinite; }
.profile-testimonials-track:hover { animation-play-state: paused; }
.profile-testimonial-card { position: relative; flex: 0 0 auto; width: 360px; padding: 32px 34px; border: 1px solid rgba(125,193,20,0.18); background: rgba(255,255,255,0.045); }
.profile-testimonial-card::before { content: "\201C"; position: absolute; top: 4px; left: 22px; color: var(--green-300); font-family: "DM Serif Display", serif; font-size: 4rem; line-height: 1; opacity: 0.3; }
.profile-testimonial-text { margin: 0 0 22px; padding-top: 16px; color: var(--gray-300); font-family: "DM Serif Display", serif; font-size: 1.02rem; font-style: italic; line-height: 1.65; }
.profile-testimonial-author { margin: 0; color: var(--green-300); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.profile-testimonial-role { margin: 4px 0 0; color: rgba(248,248,246,0.48); font-size: 0.74rem; line-height: 1.5; }
@keyframes profileTestimonialScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.profile-beliefs { background: var(--black); color: white; }
.profile-beliefs .eyebrow { color: var(--green-300); }
.profile-grid { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 42px; border-top: 1px solid rgba(248,248,246,0.14); border-left: 1px solid rgba(248,248,246,0.14); }
.profile-belief { padding: 30px; border-right: 1px solid rgba(248,248,246,0.14); border-bottom: 1px solid rgba(248,248,246,0.14); transition: background 220ms ease; }
.profile-belief strong { display: block; color: var(--green-300); font-family: "DM Serif Display", serif; font-size: 2rem; font-weight: 400; }
.profile-belief p { color: var(--gray-300); font-style: italic; }
.profile-pillars { display: grid; grid-template-columns: 1fr 1fr; margin-top: 42px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.profile-pillar { padding: 32px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background 220ms ease; }
.profile-pillar span { color: var(--green-500); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; }
.profile-pillar h3 { margin: 14px 0 8px; color: var(--green-950); font-family: "DM Serif Display", serif; font-size: 1.5rem; font-weight: 400; }
.profile-pillar p { margin: 0; color: var(--gray-700); font-size: 0.86rem; }
.profile-serve { background: var(--gray-100); }
.profile-serve-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 40px; }
.profile-serve-card { padding: 28px; border-top: 3px solid var(--green-500); background: var(--white); transition: transform 240ms cubic-bezier(0.2, 0, 0, 1), box-shadow 240ms ease; }
.profile-serve-card h3 { margin: 0 0 8px; color: var(--green-950); font-family: "DM Serif Display", serif; font-size: 1.2rem; font-weight: 400; }
.profile-serve-card p { margin: 0; color: var(--gray-700); font-size: 0.82rem; }
.profile-cost { background: var(--green-950); color: white; }
.profile-cost .eyebrow { color: var(--green-300); }
.profile-cost p { color: var(--green-100); }
.cost-calc-cta { align-self: start; padding: 32px; border: 1px solid rgba(125,193,20,0.28); background: rgba(255,255,255,0.03); }
.cost-calc-cta p { margin: 0 0 26px; font-size: 0.98rem; line-height: 1.7; }
.cost-calc-cta .hero-actions { margin: 0; max-width: 380px; }
.cost-calc-cta .strategy-btn { width: 100%; min-width: 0; }
.calc-dialog { width: min(700px, calc(100vw - 28px)); max-height: min(88vh, 840px); padding: 0; border: 1px solid rgba(248,248,246,0.16); background: var(--ink); color: var(--white); overflow: auto; }
.calc-dialog::backdrop { background: rgba(6,10,8,0.64); backdrop-filter: blur(3px); }
.calc-dialog-inner { position: relative; padding: clamp(26px, 4vw, 46px); }
#costCalcDialog .calc-dialog-inner { background: url(../assets/images/synchrony-mark-faint.png) no-repeat right -70px top -50px / 300px auto; }
.calc-dialog .eyebrow { color: var(--green-300); }
.calc-dialog-close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(248,248,246,0.22); border-radius: 50%; background: transparent; color: var(--white); cursor: pointer; font-size: 1.5rem; line-height: 1; transition: background 200ms ease, border-color 200ms ease; }
.calc-dialog-close:hover { background: rgba(248,248,246,0.09); border-color: rgba(248,248,246,0.5); }
.calc-dialog-title { margin: 0 0 12px; font-family: "DM Serif Display", serif; font-size: clamp(1.6rem, 3vw, 2.15rem); font-weight: 400; line-height: 1.1; }
.calc-to-diagnostic { margin-top: 28px; padding-top: 26px; border-top: 1px solid rgba(248,248,246,0.14); text-align: center; }
.calc-to-diagnostic-lead { max-width: 560px; margin: 0 auto 18px; color: var(--white); font-family: "DM Serif Display", serif; font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 400; line-height: 1.3; }
.calc-to-diagnostic .btn { min-width: 240px; }
.calc-to-diagnostic .btn[disabled] { background: rgba(248,248,246,0.09); box-shadow: none; color: var(--gray-500); cursor: not-allowed; transform: none; }
[data-theme="light"] .calc-dialog:not(.contact-dialog) .calc-to-diagnostic .btn[disabled] { background: var(--gray-100); color: var(--gray-500); }
.calc-to-diagnostic-note { max-width: 500px; margin: 16px auto 0; color: var(--gray-300); font-size: 0.8rem; line-height: 1.55; }
/* ---- Cost calculator in light mode -------------------------------------
   The dialog is authored dark, so light is a full repaint: paper ground, ink
   type, and the field/insight treatments swapped off their translucent-white
   versions, which vanish on a light background. Scoped away from the contact
   dialog, which shares .calc-dialog but paints itself. */
[data-theme="light"] .calc-dialog:not(.contact-dialog) { border-color: rgba(63,109,7,0.22); background: var(--white); color: var(--ink); box-shadow: 0 30px 90px rgba(36,64,2,0.16); }
[data-theme="light"] .calc-dialog:not(.contact-dialog)::backdrop { background: rgba(36,64,2,0.28); }
[data-theme="light"] .calc-dialog:not(.contact-dialog) .eyebrow { color: var(--green-800); }
[data-theme="light"] .calc-dialog:not(.contact-dialog) .calc-dialog-title { color: var(--green-950); }
[data-theme="light"] .calc-dialog:not(.contact-dialog) .calc-dialog-close { border-color: rgba(17,17,16,0.18); color: var(--ink); }
[data-theme="light"] .calc-dialog:not(.contact-dialog) .calc-dialog-close:hover { background: rgba(17,17,16,0.06); border-color: rgba(17,17,16,0.42); }
[data-theme="light"] .calc-dialog:not(.contact-dialog) .vacancy-grid .field label { color: var(--green-800); }
[data-theme="light"] .calc-dialog:not(.contact-dialog) .vacancy-grid .field input { background: var(--white); border-color: var(--line); color: var(--ink); }
[data-theme="light"] .calc-dialog:not(.contact-dialog) .vacancy-grid .field input::placeholder { color: var(--gray-500); }
[data-theme="light"] .calc-dialog:not(.contact-dialog) .vacancy-grid .field input:focus { border-color: var(--blue-700); }
[data-theme="light"] .calc-dialog:not(.contact-dialog) .vacancy-total { color: var(--blue-900); }
[data-theme="light"] .calc-dialog:not(.contact-dialog) .calc-citation { color: var(--gray-500); }
[data-theme="light"] .calc-dialog:not(.contact-dialog) .scorecard-insight { background: var(--blue-050); border-left-color: var(--blue-700); }
[data-theme="light"] .calc-dialog:not(.contact-dialog) .scorecard-insight h4 { color: var(--blue-900); }
[data-theme="light"] .calc-dialog:not(.contact-dialog) .scorecard-insight p { color: var(--gray-700); }
[data-theme="light"] .calc-dialog:not(.contact-dialog) .calc-to-diagnostic { border-top-color: var(--line); }
[data-theme="light"] .calc-dialog:not(.contact-dialog) .calc-to-diagnostic-lead { color: var(--green-950); }
[data-theme="light"] .calc-dialog:not(.contact-dialog) .calc-to-diagnostic-note { color: var(--gray-700); }
.profile-contact { min-height: calc(100vh - 72px); display: grid; place-items: center; background: var(--blue-050); text-align: center; }
.profile-contact .eyebrow { justify-content: center; color: var(--blue-900); }
.profile-contact p { max-width: 650px; margin: 20px auto 0; color: var(--gray-700); }
.contact-primary-cta { display: flex; justify-content: center; margin-top: 32px; }
.contact-hero-btn { width: min(500px, 100%); min-height: 78px; gap: 4px; }
.contact-hero-btn span { font-size: 1.05rem; letter-spacing: 0.06em; }
.contact-hero-btn small { font-size: 0.66rem; }
.contact-secondary-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 14px; }
.profile-contact .phone-btn { border-color: var(--blue-700); color: var(--blue-900); }
.profile-contact .phone-btn:hover { color: white; transform: translateY(-2px); }
.profile-feedback { position: relative; overflow: hidden; background: var(--black); color: var(--white); }
.profile-feedback::before { content: ""; position: absolute; width: 520px; height: 520px; top: -300px; right: -180px; border: 1px solid rgba(121,184,239,0.2); border-radius: 50%; box-shadow: 0 0 0 70px rgba(58,133,212,0.025), 0 0 0 140px rgba(58,133,212,0.018); pointer-events: none; }
.profile-feedback-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(480px, 1.2fr); gap: clamp(54px, 8vw, 110px); align-items: start; }
.profile-feedback-copy { position: sticky; top: 112px; }
.profile-feedback .eyebrow { color: var(--blue-400); }
.profile-feedback .section-title { color: var(--white); }
.profile-feedback .section-title em { color: var(--blue-400); }
.profile-feedback-copy > p:not(.eyebrow) { margin: 24px 0 0; color: var(--gray-300); }
.feedback-promise { display: grid; gap: 14px; margin-top: 36px; padding-top: 25px; border-top: 1px solid rgba(248,248,246,0.14); }
.feedback-promise span { display: flex; align-items: center; gap: 12px; color: var(--gray-300); font-size: 0.78rem; }
.feedback-promise span::before { content: ""; width: 20px; height: 1px; flex: 0 0 auto; background: var(--blue-500); }
.profile-feedback-form { padding: clamp(28px, 5vw, 50px); border-top: 4px solid var(--blue-500); background: var(--white); box-shadow: 0 30px 90px rgba(0,0,0,0.3); }
.profile-feedback-form h3 { margin: 0; color: var(--green-950); font-family: "DM Serif Display", serif; font-size: clamp(1.7rem, 3vw, 2.35rem); font-weight: 400; line-height: 1.15; }
.profile-feedback-form > p { margin: 10px 0 0; color: var(--gray-500); font-size: 0.83rem; }
.feedback-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 30px; }
.feedback-fields .field-wide { grid-column: 1 / -1; }
.feedback-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.feedback-form-footer small { max-width: 280px; color: var(--gray-500); font-size: 0.68rem; line-height: 1.5; }
.feedback-status { min-height: 1.5em; margin: 15px 0 0; color: var(--green-800); font-size: 0.78rem; font-weight: 600; }
.feedback-closing { position: relative; z-index: 1; margin-top: clamp(56px, 8vw, 90px); padding-top: 42px; border-top: 1px solid rgba(248,248,246,0.14); text-align: center; }
.feedback-closing p { max-width: 920px; margin: 0 auto; color: var(--white); font-family: "DM Serif Display", serif; font-size: clamp(1.5rem, 2.6vw, 2.15rem); font-weight: 400; line-height: 1.36; }
.feedback-closing strong { color: var(--blue-400); font-weight: 400; }

/* Selection */
::selection { background: var(--green-100); color: var(--green-950); }

/* Hero entrance animation */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-inner { animation: fadeUp 0.7s cubic-bezier(0.2, 0, 0, 1) both; }

/* Smooth scroll anchor offset for sticky nav */
section[id] { scroll-margin-top: 80px; }

/* Hover states */
.area-row:hover { background: rgba(125,193,20,0.03); }
.module-card:hover { background: rgba(255,255,255,0.055); }
.prompt:hover { background: rgba(255,255,255,0.08); border-left-color: var(--green-300); }
.credential:hover { background: var(--green-100); transform: translateX(3px); }
.profile-credential:hover { background: var(--green-050); transform: translateX(3px); }
.profile-serve-card:hover { transform: translateY(-4px); box-shadow: 0 10px 32px rgba(36,64,2,0.1); }
.profile-pillar:hover { background: var(--green-050); }
.profile-belief:hover { background: rgba(255,255,255,0.05); }
.blueprint-tab:not(.active):hover { color: var(--white); background: rgba(58,133,212,0.08); border-bottom-color: rgba(58,133,212,0.34); }
.score-buttons button:not(.selected):hover { border-color: rgba(248,248,246,0.55); color: var(--white); background: rgba(248,248,246,0.07); }

/* Focus-visible states */
button:focus-visible { outline: 2px solid var(--green-500); outline-offset: 2px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--green-500); outline-offset: 0; }
a:focus-visible { outline: 2px solid var(--green-500); outline-offset: 3px; }

/* Assessment card polish */
.assessment-card { border-radius: 1px; }
.assessment-top { border-radius: 1px 1px 0 0; }
.assessment-bar { border-radius: 0 1px 1px 0; }

/* Nav inner padding refinement */
.nav-inner { padding: 0 2px; }

@media (max-width: 860px) {
  body { font-size: 1.03rem; line-height: 1.78; }
  .display { font-size: 4.1rem; line-height: 0.98; letter-spacing: 0; }
  .section-title { font-size: 3.15rem; line-height: 1.04; letter-spacing: 0; }
  .body-lg, .hero .body-lg, .profile-hero p:not(.eyebrow) { font-size: 1.03rem; line-height: 1.78; }
  .hero .body-lg { max-width: 720px; font-size: 1.2rem; line-height: 1.68; }
  .eyebrow { font-size: 0.74rem; line-height: 1.45; letter-spacing: 0; }
  .btn { font-size: 0.82rem; line-height: 1.18; letter-spacing: 0; }
  .strategy-btn { font-size: 0.9rem; }
  .calc-cta-btn { font-size: 0.86rem; }
  .strategy-btn small { font-size: 0.62rem; line-height: 1.2; letter-spacing: 0; }
  .calc-cta-btn small { font-size: 0.72rem; line-height: 1.3; letter-spacing: 0; }
  nav, .profile-nav { transition: transform 240ms cubic-bezier(0.2, 0, 0, 1), padding 240ms ease; }
  body:not(.profile-mode) > nav { position: sticky; top: 0; }
  body:not(.profile-mode) > main { padding-top: 0; }
  .nav-inner { flex-wrap: nowrap; min-height: 66px; padding: 10px 2px; gap: 16px; }
  /* Tablets still have room to seat the diagnostic name beside the icons and the
     logo, as long as it is allowed to fold onto a second line when it runs out. */
  .nav-diagnostic-name { flex: 0 1 auto; min-width: 0; font-size: 0.95rem; white-space: normal; }
  .nav-menu { width: min(290px, calc(100vw - 26px)); }
  .nav-menu a, .nav-menu button { min-height: 50px; font-size: 0.7rem; letter-spacing: 0.06em; }
  .profile-nav-inner { flex-wrap: wrap; padding: 10px 0; }
  .profile-links { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 8px; }
  .profile-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; border: 1px solid rgba(248,248,246,0.18); font-size: 0.68rem; line-height: 1.25; letter-spacing: 0; text-align: center; }
  .profile-back { min-height: 42px; padding: 0.66rem 0.85rem; font-size: 0.7rem; letter-spacing: 0; text-align: center; }
  .hero .hero-actions { width: 100%; flex-wrap: wrap; }
  .intro-grid, .blueprint-head, .about-grid { grid-template-columns: 1fr; gap: 35px; }
  .blueprint-feedback, .profile-feedback-grid { grid-template-columns: 1fr; }
  .profile-feedback-copy { position: static; }
  .area-row { grid-template-columns: 52px 1fr; }
  .area-prompts { grid-column: 2; border-top: 1px solid var(--line); }
  .area-main { border-right: 0; }
  .intro-note, .assessment-description, .assessment-head p, .blueprint-head p, .about-copy > p, .final-cta p, .profile-copy p, .profile-cost p, .profile-contact p { font-size: 1.03rem; line-height: 1.78; }
  .assessment-subhead { font-size: 1.04rem; }
  .area-main h3, .module-card h4, .profile-pillar h3, .profile-serve-card h3 { font-size: 1.48rem; line-height: 1.15; }
  .area-main p, .area-prompts p, .module-card p, .credential span, .profile-credential span, .profile-pillar p, .profile-serve-card p { font-size: 0.95rem; line-height: 1.72; }
  .why-diagnostic { padding: 68px 0 74px; }
  .why-diagnostic blockquote { font-size: 2.1rem; line-height: 1.36; letter-spacing: 0; }
  .why-mantra { font-size: 0.84rem; letter-spacing: 0; }
  .quote-band blockquote { font-size: 2.45rem; }
  .quote-band cite, .field label { font-size: 0.74rem; line-height: 1.4; letter-spacing: 0; }
  .question { font-size: 2.2rem; line-height: 1.16; }
  .question-hint, .option, .field input, .field select, .form-note, .result-hero p, .result-panel, .result-method, .scorecard-row span, .scorecard-insight p, .scorecard-insight ul { font-size: 0.98rem; line-height: 1.68; }
  .rating-scale { font-size: 0.8rem; }
  .rating-options .option { font-size: 1.32rem; line-height: 1.1; }
  .module-intro h3 { font-size: 3.45rem; letter-spacing: 0; }
  .prompt, .scorecard-insight h4 { font-size: 1rem; line-height: 1.68; }
  .about-card strong, .profile-belief strong { font-size: 2.15rem; }
  .profile-quote { font-size: 1.85rem; }
  .profile-testimonial-text { font-size: 1.12rem; line-height: 1.62; }
  .options, .contact-grid, .result-grid, .module-card-grid, .vacancy-grid { grid-template-columns: 1fr; }
  .options.rating-options { grid-template-columns: repeat(5, 1fr); }
  /* Four levers fold to a clean 2x2, so the bottom pair drops its underline. */
  .blueprint-tabs { grid-template-columns: 1fr 1fr; }
  .blueprint-tab { border-right: 1px solid rgba(248,248,246,0.28); border-bottom: 1px solid rgba(248,248,246,0.28); font-size: 0.76rem; line-height: 1.25; letter-spacing: 0; }
  .blueprint-tab:nth-child(2n) { border-right: 0; }
  .blueprint-tab:nth-last-child(-n + 2) { border-bottom: 0; }
  .blueprint-tab.active { border-bottom-color: rgba(248,248,246,0.28); box-shadow: inset 0 -4px 0 var(--blue-500); }
  .assessment-head { grid-template-columns: 1fr; gap: 28px; }
  .assessment-description { padding-left: 22px; }
  .result-hero { grid-template-columns: 1fr; }
  .profile-two-col { grid-template-columns: 1fr; }
  .profile-grid, .profile-serve-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 1.06rem; line-height: 1.76; }
  .shell { width: min(100% - 26px, var(--max)); }
  .brand-logo { width: 145px; }
  /* Phones cannot seat the name beside the icons and the logo, so it takes the
     first row for itself and the icons fall back to the left edge -- which is why
     the menu panel has to hang from the left here or it runs off the screen. */
  .nav-inner { justify-content: space-between; flex-wrap: wrap; gap: 7px 10px; padding: 9px 2px; }
  .nav-diagnostic-name { order: -1; flex: 1 0 100%; width: 100%; margin-right: 0; font-size: 1.04rem; }
  .nav-diagnostic-name small { font-size: 0.54rem; letter-spacing: 0.13em; }
  .nav-menu { right: auto; left: 0; transform-origin: top left; }
  .profile-nav-inner { justify-content: center; }
  .profile-links { grid-template-columns: 1fr 1fr; }
  .profile-back { grid-column: 1 / -1; }
  .hero-inner, .why-diagnostic, .audit-intro, .assessment-section, .blueprint, .about { padding-top: 76px; padding-bottom: 76px; }
  .display { font-size: 3.12rem; line-height: 1; }
  .section-title { font-size: 2.58rem; line-height: 1.04; }
  .body-lg, .hero .body-lg, .intro-note, .assessment-description, .assessment-head p, .blueprint-head p, .about-copy > p, .final-cta p, .profile-hero p:not(.eyebrow), .profile-copy p, .profile-cost p, .profile-contact p { font-size: 1.06rem; line-height: 1.76; }
  .hero .body-lg { font-size: 1.14rem; line-height: 1.68; }
  .eyebrow { gap: 10px; margin-bottom: 18px; font-size: 0.76rem; letter-spacing: 0; }
  .hero .hero-actions .strategy-btn, .strategy-btn, .calc-cta-btn, .btn { font-size: 0.88rem; }
  .strategy-btn small, .calc-cta-btn small { font-size: 0.64rem; }
  .hero-actions .btn, .result-actions .btn, .about-actions .btn { width: 100%; }
  .blueprint-feedback { padding: 25px 22px; }
  .blueprint-feedback .btn { width: 100%; }
  .feedback-fields { grid-template-columns: 1fr; }
  .feedback-fields .field-wide { grid-column: auto; }
  .feedback-form-footer { align-items: stretch; flex-direction: column; }
  .feedback-form-footer .btn { width: 100%; }
  .hero .hero-actions .calc-cta-btn { min-width: 0; white-space: normal; }
  .hero .hero-actions .calc-cta-btn { font-size: 0.8rem; }
  .hero .hero-actions .calc-cta-btn small { font-size: 0.66rem; line-height: 1.35; }
  .area-row { min-height: auto; }
  .area-main, .area-prompts { padding: 22px 18px; }
  .area-num { font-size: 2.15rem; }
  .area-main h3, .module-card h4, .profile-pillar h3, .profile-serve-card h3 { font-size: 1.54rem; }
  .area-main p, .area-prompts p, .module-card p, .credential span, .profile-credential span, .profile-pillar p, .profile-serve-card p { font-size: 0.98rem; }
  .why-diagnostic blockquote { font-size: 1.78rem; line-height: 1.3; }
  .why-mantra { margin-top: 24px; font-size: 0.78rem; }
  .quote-band blockquote { font-size: 2.1rem; line-height: 1.28; }
  .assessment-content { padding: 25px 18px; }
  .question { font-size: 2.05rem; }
  .question-hint, .option, .field input, .field select, .result-panel, .result-hero p, .result-method, .scorecard-row span, .scorecard-insight p, .scorecard-insight ul { font-size: 1rem; }
  .assessment-nav { flex-direction: column-reverse; }
  .assessment-nav .btn { width: 100%; }
  .footer-inner { display: grid; }
  .options.rating-options { grid-template-columns: repeat(5, 1fr); }
  .rating-options .option { min-height: 56px; padding: 8px; font-size: 1.34rem; }
  .blueprint-module { overflow-x: auto; }
  .blueprint-tab { min-height: 62px; font-size: 0.78rem; letter-spacing: 0; }
  .module-intro h3 { font-size: 2.85rem; }
  .profile-testimonial-card { width: min(320px, calc(100vw - 54px)); padding: 28px 24px; }
  .profile-testimonials-track-wrap::before, .profile-testimonials-track-wrap::after { width: 34px; }
  .profile-stats, .profile-grid, .profile-pillars, .profile-serve-grid { grid-template-columns: 1fr; }
  .profile-section, .profile-hero { padding: 72px 0; }
}

/* ============================================================
   MOTION & ANIMATIONS
   ============================================================ */

/* Decorative orb drift (hero + blueprint) */
@keyframes heroFloat {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-22px, -26px); }
}

/* Primary hero CTA attention glow */
@keyframes ctaGlow {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 8px 20px rgba(58,133,212,0.28); }
  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 12px 32px rgba(58,133,212,0.46); }
}

/* Diagnostic question step transition */
@keyframes questionIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.question-animate { animation: questionIn 0.38s cubic-bezier(0.2, 0, 0, 1) both; }

/* Option select micro-interaction */
@keyframes optionSelectPulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(0.985); }
  100% { transform: scale(1); }
}
.option.option-pulse { animation: optionSelectPulse 0.3s cubic-bezier(0.2, 0, 0, 1); }

/* Blueprint module fade-in on tab switch */
@keyframes moduleIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Animated score ring (results) */
.score-ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.score-ring-track { fill: none; stroke: rgba(248,248,246,0.16); stroke-width: 5; }
.score-ring-arc { fill: none; stroke: var(--green-500); stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset 1.15s cubic-bezier(0.2, 0, 0, 1), stroke 0.5s ease; }
.score-ring-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 100%; }

/* Results reveal + staggered panels */
.results { opacity: 0; transform: translateY(22px); transition: opacity 0.7s cubic-bezier(0.2, 0, 0, 1), transform 0.7s cubic-bezier(0.2, 0, 0, 1); }
.results.reveal-in { opacity: 1; transform: none; }
.results .result-grid .result-panel,
.results .result-actions { opacity: 0; transform: translateY(16px); transition: opacity 0.55s cubic-bezier(0.2, 0, 0, 1), transform 0.55s cubic-bezier(0.2, 0, 0, 1); }
.results.reveal-in .result-grid .result-panel:nth-child(1) { transition-delay: 0.18s; }
.results.reveal-in .result-grid .result-panel:nth-child(2) { transition-delay: 0.3s; }
.results.reveal-in .result-actions { transition-delay: 0.42s; }
.results.reveal-in .result-grid .result-panel,
.results.reveal-in .result-actions { opacity: 1; transform: none; }

/* Scroll reveal (targets assigned via JS) */
[data-reveal] { opacity: 0; transform: translateY(24px); will-change: opacity, transform; }
[data-reveal].reveal-ready { transition: opacity 0.75s cubic-bezier(0.2, 0, 0, 1), transform 0.75s cubic-bezier(0.2, 0, 0, 1); transition-delay: var(--reveal-delay, 0ms); }
[data-reveal].revealed { opacity: 1; transform: none; }

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal],
  .results,
  .results .result-grid .result-panel,
  .results .result-actions { opacity: 1 !important; transform: none !important; }
  .profile-testimonials-track { animation: none !important; }
  .hero-inner { animation: none !important; }
}

/* ============================================================
   THEME TOGGLE + DARK MODE
   Light theme is the default; every rule below is scoped to
   [data-theme="dark"] so the original design is untouched.
   ============================================================ */
:root { color-scheme: light; }
/* Five-step severity scale for the result scores: red through green.
   --sc-* is the text tone, tuned per theme to clear 4.5:1 on small numerals.
   --scb-* is the bar fill, which only has to read against the track, so it
   stays vivid instead of being darkened for legibility it does not need. */
:root {
  --sc-0: #B93B26; --sc-1: #A85F12; --sc-2: #7E6708; --sc-3: #1A5FA8; --sc-4: #4E7F0B;
  --scb-0: #E05A47; --scb-1: #E08A2E; --scb-2: #D2B42C; --scb-3: #3A85D4; --scb-4: #7DC114;
}
html[data-theme="dark"] {
  --sc-0: #F2A695; --sc-1: #F0B267; --sc-2: #DFC85F; --sc-3: #79B8EF; --sc-4: #AADA60;
  --scb-0: #E8806F; --scb-1: #E8A055; --scb-2: #D8C25A; --scb-3: #3A85D4; --scb-4: #7DC114;
}
.theme-toggle { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; padding: 0; border: 1px solid rgba(248,248,246,0.26); border-radius: 50%; background: transparent; color: var(--white); cursor: pointer; font-size: 1rem; line-height: 1; transition: background 200ms ease, border-color 200ms ease, transform 200ms ease; }
.theme-toggle::before { content: "\1F319"; }
.theme-toggle:hover { border-color: var(--green-300); background: rgba(255,255,255,0.08); transform: translateY(-1px); }

html[data-theme="dark"] {
  color-scheme: dark;
  --d-bg: #0F1110; --d-surface: #191B1D; --d-surface-2: #22262C;
  --d-band-blue: #0B1626; --d-band-green: #0E1710; --d-band-gray: #141517;
  --d-text: #ECECE8; --d-head: #F5F5F1; --d-muted: #B6B6AF; --d-soft: #90908A;
  --d-border: rgba(248,248,246,0.14);
}
[data-theme="dark"] .theme-toggle::before { content: "\2600\FE0F"; }

[data-theme="dark"] body { background: var(--d-bg); color: var(--d-text); }

/* Eyebrows that sit on formerly-light bands */
[data-theme="dark"] .audit-intro .eyebrow,
[data-theme="dark"] .assessment-heading-copy .eyebrow,
[data-theme="dark"] .about .eyebrow,
[data-theme="dark"] .profile-about .eyebrow,
[data-theme="dark"] #profile-how .eyebrow,
[data-theme="dark"] .profile-serve .eyebrow { color: var(--green-300); }
[data-theme="dark"] .why-diagnostic .eyebrow,
[data-theme="dark"] .final-cta .eyebrow { color: var(--blue-400); }

/* Why-diagnostic */
[data-theme="dark"] .why-diagnostic { background: var(--d-band-blue); color: var(--d-text); border-bottom-color: rgba(121,184,239,0.16); }
[data-theme="dark"] .why-diagnostic blockquote { color: var(--d-text); }
[data-theme="dark"] .why-diagnostic .quote-emphasis,
[data-theme="dark"] .why-mantra { color: var(--blue-400); }
[data-theme="dark"] .leak-dot { background: rgba(121,184,239,0.45); }
[data-theme="dark"] .leak-seg { border-top-color: rgba(121,184,239,0.4); }

/* Audit-intro callout */
[data-theme="dark"] .intro-note { background: var(--d-surface); color: var(--d-muted); box-shadow: 0 22px 60px rgba(0,0,0,0.55); }
[data-theme="dark"] .intro-note p { color: var(--d-text); }
[data-theme="dark"] .intro-note-label,
[data-theme="dark"] .intro-note p strong { color: var(--green-300); }
[data-theme="dark"] .intro-note .intro-note-tail { color: var(--d-soft); }

/* Areas table */
[data-theme="dark"] .area-table { border-color: var(--d-border); }
[data-theme="dark"] .area-row { border-bottom-color: var(--d-border); }
[data-theme="dark"] .area-row:hover { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .area-num { border-right-color: var(--d-border); color: var(--d-soft); }
[data-theme="dark"] .area-main h3 { color: var(--d-head); }
[data-theme="dark"] .area-main p { color: var(--d-muted); }

/* Assessment */
[data-theme="dark"] .assessment-section { background-color: var(--d-band-green); }
[data-theme="dark"] .assessment-head p,
[data-theme="dark"] .assessment-subhead,
[data-theme="dark"] .assessment-subhead span,
[data-theme="dark"] .assessment-subtitle { color: var(--d-muted); }
[data-theme="dark"] .assessment-subhead strong { color: var(--d-head); }
[data-theme="dark"] .assessment-subhead .blueprint-name,
[data-theme="dark"] .assessment-description strong { color: var(--green-300); }
[data-theme="dark"] .assessment-heading-copy .section-title { border-bottom-color: rgba(125,193,20,0.22); }
[data-theme="dark"] .assessment-card { background: var(--d-surface); border-color: var(--d-border); box-shadow: 0 28px 80px rgba(0,0,0,0.55); }
[data-theme="dark"] .assessment-lock { background: rgba(25,27,29,0.52); }
[data-theme="dark"] .assessment-lock-icon { border-color: rgba(125,193,20,0.38); background: rgba(125,193,20,0.12); color: var(--green-300); }
[data-theme="dark"] .assessment-lock h3 { color: var(--d-head); }
[data-theme="dark"] .assessment-lock p { color: var(--d-muted); }
[data-theme="dark"] .assessment-top { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .step-meta,
[data-theme="dark"] .step-progress-pct { color: var(--green-300); }
[data-theme="dark"] .step-progress-track { background: rgba(255,255,255,0.1); }
[data-theme="dark"] .question { color: var(--d-head); }
[data-theme="dark"] .question-hint,
[data-theme="dark"] .rating-scale { color: var(--d-soft); }
[data-theme="dark"] .option { background: var(--d-surface-2); border-color: var(--d-border); color: var(--d-text); }
[data-theme="dark"] .option:hover { border-color: var(--green-500); background: rgba(125,193,20,0.12); }
[data-theme="dark"] .option.selected { background: rgba(125,193,20,0.16); color: var(--d-head); border-color: var(--green-500); }
[data-theme="dark"] .assessment-nav { border-top-color: var(--d-border); }
[data-theme="dark"] .assessment-nav .btn[disabled] { background: rgba(255,255,255,0.06); color: var(--d-soft); }

/* Form fields (contact gate + feedback form) */
[data-theme="dark"] .field input,
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea { background: var(--d-surface-2); color: var(--d-text); border-color: var(--d-border); }
[data-theme="dark"] .field label { color: var(--green-300); }
[data-theme="dark"] .field input::placeholder,
[data-theme="dark"] .field textarea::placeholder { color: var(--d-soft); }
[data-theme="dark"] .form-note { color: var(--d-soft); }

/* Results */
[data-theme="dark"] .result-panel { background: var(--d-surface); border-color: var(--d-border); }
[data-theme="dark"] .result-panel h4 { color: var(--d-head); }
[data-theme="dark"] .result-panel-heading { border-bottom-color: var(--d-border); }
[data-theme="dark"] .result-panel-heading p { color: var(--d-muted); }
[data-theme="dark"] .result-panel-eyebrow,
[data-theme="dark"] .result-panel-heading > div > span { color: var(--green-300); }
[data-theme="dark"] .result-steps li { color: var(--d-muted); }
[data-theme="dark"] .result-steps li { border-bottom-color: var(--d-border); }
[data-theme="dark"] .result-closing { border-color: rgba(121,184,239,0.24); background: linear-gradient(120deg, rgba(58,133,212,0.14), rgba(125,193,20,0.07)); }
[data-theme="dark"] .result-closing-label { color: var(--blue-400); }
[data-theme="dark"] .result-cta-intro { color: var(--d-head); }
[data-theme="dark"] .dimension-name,
[data-theme="dark"] .focus-name,
[data-theme="dark"] .result-steps li strong { color: var(--d-head); }
[data-theme="dark"] .dimension-row,
[data-theme="dark"] .focus-item { border-color: var(--d-border); background: linear-gradient(135deg, rgba(255,255,255,0.035), rgba(125,193,20,0.035)); }
[data-theme="dark"] .dimension-pct { color: var(--d-soft); }
[data-theme="dark"] .dimension-track { background: rgba(255,255,255,0.12); }
[data-theme="dark"] .result-panel ul { color: var(--d-muted); }
[data-theme="dark"] .result-method { color: var(--d-soft); }
[data-theme="dark"] .result-note-panel { background: rgba(125,193,20,0.035); }
[data-theme="dark"] .focus-priority { color: var(--d-soft); }
[data-theme="dark"] .gap-consequence { color: var(--d-muted); }

/* About (light band) */
[data-theme="dark"] .about-copy .section-title { color: var(--d-head); }
[data-theme="dark"] .about-copy > p { color: var(--d-muted); }
[data-theme="dark"] .credential { background: rgba(125,193,20,0.08); }
[data-theme="dark"] .credential:hover { background: rgba(125,193,20,0.14); }
[data-theme="dark"] .credential strong { color: var(--d-head); }
[data-theme="dark"] .credential span { color: var(--d-muted); }

/* Final CTA */
[data-theme="dark"] .final-cta { background: var(--d-band-blue); }
[data-theme="dark"] .final-cta .section-title { color: var(--d-head); }
[data-theme="dark"] .final-cta p { color: var(--d-muted); }

/* Blueprint eyebrow keeps its blue in dark */
[data-theme="dark"] .blueprint .eyebrow { color: var(--blue-400); }

/* Profile view: light bands */
[data-theme="dark"] .profile-about { background: var(--d-band-green); }
[data-theme="dark"] .profile-about .section-title { color: var(--d-head); }
[data-theme="dark"] .profile-quote { color: var(--d-text); }
[data-theme="dark"] .profile-credential { background: var(--d-surface); }
[data-theme="dark"] .profile-credential:hover { background: rgba(125,193,20,0.1); }
[data-theme="dark"] .profile-credential strong { color: var(--d-head); }
[data-theme="dark"] .profile-credential span,
[data-theme="dark"] .profile-copy p { color: var(--d-muted); }
[data-theme="dark"] .profile-pillars,
[data-theme="dark"] .profile-pillar { border-color: var(--d-border); }
[data-theme="dark"] .profile-pillar:hover { background: rgba(125,193,20,0.06); }
[data-theme="dark"] .profile-pillar h3 { color: var(--d-head); }
[data-theme="dark"] .profile-pillar p { color: var(--d-muted); }
[data-theme="dark"] .profile-serve { background: var(--d-band-gray); }
[data-theme="dark"] .profile-serve-card { background: var(--d-surface); }
[data-theme="dark"] .profile-serve-card h3 { color: var(--d-head); }
[data-theme="dark"] .profile-serve-card p { color: var(--d-muted); }
[data-theme="dark"] .profile-contact { background: var(--d-band-blue); }
[data-theme="dark"] .profile-contact p { color: var(--d-muted); }
[data-theme="dark"] .profile-contact .phone-btn { border-color: var(--blue-400); color: var(--blue-200); }
[data-theme="dark"] .profile-feedback-form { background: var(--d-surface); }
[data-theme="dark"] .profile-feedback-form h3 { color: var(--d-head); }
[data-theme="dark"] .profile-feedback-form > p { color: var(--d-soft); }
[data-theme="dark"] .feedback-form-footer { border-top-color: var(--d-border); }
[data-theme="dark"] .feedback-form-footer small { color: var(--d-soft); }
/* Stats band: keep the two-word / one-word line break clean at every width */
@media (max-width: 1300px) { .profile-stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .profile-stats { grid-template-columns: 1fr; } }

/* Lite version: one-page diagnostic with cost calculator */
body.lite-mode .brand-logo { width: auto; height: 60px; }
.brand-logo--light { display: none; }
[data-theme="light"] .brand-logo--dark { display: none; }
[data-theme="light"] .brand-logo--light { display: block; }
body.lite-mode .profile-cost { scroll-margin-top: 80px; }
body.lite-mode .profile-cost .section-title { color: var(--white); }
body.lite-mode .profile-cost .cost-calc-cta { background: rgba(255,255,255,0.045); }
body.lite-mode .result-actions .btn { flex: 0 0 auto; }
body.lite-mode footer { background: var(--black); }
/* Lite nav refinement + contact modal */
body.lite-mode .theme-toggle { width: 42px; height: 42px; flex: 0 0 42px; }
/* Contact gate: required marker + email opt-in choice */
.req { color: var(--risk-500); font-weight: 700; }
.optin-field { display: block; min-width: 0; margin: 0; padding: 0; border: 0; }
/* What opting in means is spelled out in the note under the form, so the legend
   is just the label. */
.optin-field legend { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 7px; padding: 0; color: var(--green-800); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; }
.optin-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.optin-choice label { position: relative; display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 12px 14px; border: 1px solid var(--line); background: white; color: var(--ink); cursor: pointer; font-size: 0.9rem; transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease; }
.optin-choice input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.optin-choice label:hover { border-color: var(--green-500); background: var(--green-050); }
.optin-choice label:has(input:checked) { border-color: var(--green-800); background: var(--green-050); color: var(--green-950); box-shadow: inset 3px 0 0 var(--green-500); }
.optin-choice label:has(input:focus-visible) { outline: 2px solid var(--green-500); outline-offset: 2px; }
.contact-optin-note { margin-top: 18px; }
[data-theme="dark"] .optin-field legend { color: var(--green-300); }
[data-theme="dark"] .optin-choice label { background: var(--d-surface-2); border-color: var(--d-border); color: var(--d-text); }
[data-theme="dark"] .optin-choice label:hover { border-color: var(--green-500); background: rgba(125,193,20,0.1); }
[data-theme="dark"] .optin-choice label:has(input:checked) { border-color: var(--green-300); background: rgba(125,193,20,0.14); color: var(--d-head); }
[data-theme="dark"] .req { color: var(--risk-300); }
@media (max-width: 860px) {
  .optin-field legend { font-size: 0.74rem; line-height: 1.4; letter-spacing: 0; }
  .optin-choice label { font-size: 0.98rem; }
}
body.lite-mode .strategy-btn small { display: block; margin-top: 2px; color: rgba(248,248,246,0.82); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase; }
.contact-dialog { width: min(880px, calc(100vw - 28px)); background: var(--blue-050); color: var(--ink); text-align: center; }
.contact-dialog .calc-dialog-inner { padding: clamp(32px, 5vw, 62px); }
.contact-dialog .calc-dialog-close { color: var(--ink); border-color: rgba(17,17,16,0.18); }
.contact-dialog .section-title { color: var(--ink); }
.contact-dialog .section-title em { color: var(--green-500); }
.contact-dialog .contact-primary-cta,
.contact-dialog .contact-secondary-actions { width: min(760px, 100%); margin-left: auto; margin-right: auto; }
.contact-dialog .contact-primary-cta { margin-top: 28px; }
/* Long, conversational sub-line: sentence case reads far better than micro-caps. */
/* One line where it fits, wrapping where it does not -- the button clips its
   overflow, so nowrap on a narrow screen would shave both ends off the sentence. */
body.lite-mode .contact-dialog .contact-hero-btn small { max-width: none; margin-inline: auto; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1.4; text-align: center; text-transform: none; white-space: normal; text-wrap: balance; }
.contact-dialog .contact-primary-cta .btn { width: 100%; min-height: 78px; }
.contact-dialog .contact-secondary-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.contact-dialog .contact-secondary-actions .btn { width: 100%; min-height: 54px; }
.contact-dialog .phone-btn { border-color: var(--blue-700); background: transparent; color: var(--blue-900); }
.contact-dialog .phone-btn:hover { color: white; transform: translateY(-2px); }
[data-theme="dark"] .contact-dialog { background: var(--d-band-blue); color: var(--d-head); }
[data-theme="dark"] .contact-dialog .section-title { color: var(--d-head); }
[data-theme="dark"] .contact-dialog .calc-dialog-close { color: var(--d-head); border-color: var(--d-border); }
[data-theme="dark"] .contact-dialog .phone-btn { border-color: var(--blue-400); color: var(--blue-200); }
[data-theme="dark"] .contact-dialog .phone-btn:hover { color: var(--white); border-color: var(--blue-200); }
@media (max-width: 560px) {
  body.lite-mode .brand-logo { height: 44px; }
  .nav-actions { gap: 8px; }
  .contact-dialog .contact-secondary-actions { grid-template-columns: 1fr; }
}

/* ---- Light theme for the two always-dark sections ------------------------
   The hero and the blueprint are authored dark. In light mode they invert to a
   paper base carrying the same brand wash: the hero drifts green to blue across
   a near-white ground, the blueprint sits on the blue paper it already uses for
   its accents. Everything keyed off white-on-dark rgba borders is restated in
   ink-on-paper so edges stay visible rather than disappearing. */
[data-theme="light"] .hero {
  background: linear-gradient(158deg, var(--green-050) 0%, var(--white) 46%, var(--blue-050) 100%);
  color: var(--ink);
}
[data-theme="light"] .hero::before {
  background:
    radial-gradient(circle at 76% 28%, rgba(125,193,20,0.20), transparent 30%),
    radial-gradient(circle at 5% 90%, rgba(58,133,212,0.16), transparent 34%);
}
[data-theme="light"] .hero::after { opacity: 0.55; }
[data-theme="light"] .hero .eyebrow { color: var(--green-800); }
[data-theme="light"] .hero .display { color: var(--green-950); }
[data-theme="light"] .hero .display span { color: var(--green-600); }
[data-theme="light"] .hero .body-lg,
[data-theme="light"] .hero-calc-line { color: var(--gray-700); }
[data-theme="light"] .hero-calc-name { color: var(--blue-700); }

[data-theme="light"] .blueprint { background: var(--blue-050); color: var(--blue-950); }
[data-theme="light"] .blueprint::before {
  background:
    radial-gradient(circle at 68% 0%, rgba(58,133,212,0.16), transparent 36%),
    radial-gradient(circle at 18% 58%, rgba(26,95,168,0.10), transparent 40%);
}
[data-theme="light"] .blueprint::after { opacity: 0.5; }
[data-theme="light"] .blueprint .eyebrow { color: var(--blue-900); }
[data-theme="light"] .blueprint-head .eyebrow { color: var(--green-800); }
[data-theme="light"] .blueprint .section-title { color: var(--blue-950); }
[data-theme="light"] .blueprint .section-title em { color: var(--blue-700); }
[data-theme="light"] .blueprint-head p { color: var(--gray-700); }
[data-theme="light"] .blueprint-tabs { border-color: rgba(12,63,117,0.18); background: rgba(255,255,255,0.55); }
[data-theme="light"] .blueprint-tab { border-right-color: rgba(12,63,117,0.18); color: var(--gray-700); }
[data-theme="light"] .blueprint-tab.active { border-bottom-color: var(--blue-500); background: rgba(58,133,212,0.12); color: var(--blue-900); }
[data-theme="light"] .blueprint .module-intro h3 { color: var(--blue-950); }
[data-theme="light"] .blueprint .module-intro h3 em { color: var(--blue-700); }
[data-theme="light"] .blueprint .module-intro p { color: var(--gray-700); }
[data-theme="light"] .blueprint .module-card-grid { border-top-color: rgba(12,63,117,0.16); border-left-color: rgba(12,63,117,0.16); }
[data-theme="light"] .blueprint .module-card { border-right-color: rgba(12,63,117,0.16); border-bottom-color: rgba(12,63,117,0.16); }
[data-theme="light"] .blueprint .module-card:hover { background: rgba(255,255,255,0.6); }
[data-theme="light"] .blueprint .module-card h4 { color: var(--blue-900); }
[data-theme="light"] .blueprint .module-card p { color: var(--gray-700); }
[data-theme="light"] .blueprint .prompt-intro { color: var(--blue-950); }
[data-theme="light"] .blueprint .prompt-intro strong { color: var(--blue-700); }
[data-theme="light"] .blueprint .prompt { background: rgba(255,255,255,0.7); color: var(--gray-700); }
[data-theme="light"] .blueprint .prompt:hover { background: white; border-left-color: var(--green-500); }
[data-theme="light"] .blueprint .scorecard-item { border-color: rgba(12,63,117,0.16); background: rgba(255,255,255,0.6); }
[data-theme="light"] .blueprint .scorecard-row span { color: var(--ink); }
[data-theme="light"] .blueprint .score-buttons button,
[data-theme="light"] .blueprint .yesno-buttons button { border-color: rgba(12,63,117,0.22); background: white; color: var(--gray-700); }
[data-theme="light"] .blueprint .yesno-buttons button:not(.selected):hover { border-color: var(--blue-500); background: white; color: var(--blue-900); }
[data-theme="light"] .blueprint .score-total { color: var(--blue-900); }
[data-theme="light"] .blueprint .scorecard-insight { background: rgba(255,255,255,0.75); }
[data-theme="light"] .blueprint .scorecard-insight h4 { color: var(--blue-900); }
[data-theme="light"] .blueprint .scorecard-insight p,
[data-theme="light"] .blueprint .scorecard-insight ul { color: var(--gray-700); }
[data-theme="light"] .blueprint .calc-citation { color: var(--gray-500); }
[data-theme="light"] .blueprint-feedback { border-color: rgba(58,133,212,0.32); background: linear-gradient(110deg, rgba(255,255,255,0.9), rgba(255,255,255,0.5)); }
[data-theme="light"] .blueprint-feedback-copy strong { color: var(--blue-900); }
[data-theme="light"] .blueprint-feedback-copy span { color: var(--gray-700); }
[data-theme="light"] .blueprint-closing-cta { border-top-color: rgba(12,63,117,0.16); }
[data-theme="light"] .blueprint-closing-kicker { color: var(--blue-950); }
/* Interactive states. The base rules paint white-on-dark, and the light
   overrides above outrank the plain .selected/:focus rules, so every state has
   to be restated here or it disappears against the paper. */
[data-theme="light"] .blueprint-tab:not(.active):hover { background: rgba(58,133,212,0.12); border-bottom-color: rgba(58,133,212,0.4); color: var(--blue-900); }
[data-theme="light"] .blueprint .score-buttons button:not(.selected):hover,
[data-theme="light"] .blueprint .yesno-buttons button:not(.selected):hover { border-color: var(--blue-500); background: white; color: var(--blue-900); }
[data-theme="light"] .blueprint .score-buttons button.selected,
[data-theme="light"] .blueprint .yesno-buttons button.selected { border-color: var(--blue-700); background: var(--blue-700); color: white; }

/* ---- Light theme: nav bar ------------------------------------------------
   The logo art is transparent with a white strapline, so a second copy with the
   neutral pixels recoloured to ink is swapped in here. The mark itself (green
   and blue) is identical in both files -- only the white text was touched. */
[data-theme="light"] nav { background: rgba(248,248,246,0.94); border-bottom-color: rgba(42,42,39,0.12); color: var(--ink); }
[data-theme="light"] .nav-diagnostic-name { color: var(--blue-700); }
[data-theme="light"] .nav-diagnostic-name small { color: var(--gray-500); }
/* green-500 reaches only ~2:1 on the light nav; one step darker clears the floor. */
[data-theme="light"] .nav-diagnostic-name em { color: var(--green-600); }
[data-theme="light"] .theme-toggle,
[data-theme="light"] .nav-menu-toggle { border-color: rgba(42,42,39,0.24); color: var(--ink); }
[data-theme="light"] .theme-toggle:hover,
[data-theme="light"] .nav-menu-toggle:hover { border-color: var(--green-600); background: rgba(36,64,2,0.06); }
[data-theme="light"] .nav-menu-toggle[aria-expanded="true"] { border-color: var(--green-600); background: rgba(36,64,2,0.09); }
[data-theme="light"] .nav-menu { border-color: rgba(42,42,39,0.14); background: rgba(255,255,255,0.98); box-shadow: 0 26px 64px rgba(36,64,2,0.18); }
[data-theme="light"] .nav-menu a,
[data-theme="light"] .nav-menu button { border-color: rgba(42,42,39,0.14); color: var(--gray-700); }
[data-theme="light"] .nav-menu a:hover,
[data-theme="light"] .nav-menu button:hover { border-color: var(--blue-500); background: rgba(58,133,212,0.08); color: var(--blue-900); }
[data-theme="light"] .nav-menu .nav-menu-cta { border-color: transparent; color: white; }
[data-theme="light"] .nav-menu .nav-menu-cta:hover { border-color: transparent; background: linear-gradient(180deg, var(--green-600), var(--green-800)); color: white; }

/* The green-500 accent only reaches ~2:1 against the light surfaces, under the
   3:1 large-text floor. One step darker keeps the brand green and clears it. */
[data-theme="light"] .display em,
[data-theme="light"] .section-title em,
[data-theme="light"] .question em { color: var(--green-600); }
[data-theme="light"] .contact-dialog .section-title em { color: var(--green-600); }
/* Required marker: the salmon reads at 2.5:1 on paper, too low for 12px text. */
[data-theme="light"] .req { color: #C24A32; }
/* Muted grey sits at 3.35:1 on the paper surfaces -- under the 4.5:1 floor for
   body text. One notch darker clears it while staying clearly secondary to the
   gray-700 body copy. Dark theme already passes, so it is untouched. */
[data-theme="light"] .nav-diagnostic-name small,
[data-theme="light"] .dimension-pct,
[data-theme="light"] .intro-note-tail,
[data-theme="light"] .question-hint,
[data-theme="light"] .form-note,
[data-theme="light"] .result-method { color: #6B6B66; }

/* ---- Michael scroll prompt: floating nudge toward the diagnostic ---- */
.mn-scroll-prompt {
  --mn-green: #93ad51;
  --mn-blue: #2f79ad;
  --mn-paper: #f3f0e7;
  position: fixed;
  z-index: 45;
  right: clamp(18px, 3vw, 46px);
  bottom: clamp(18px, 3vw, 38px);
  width: min(460px, calc(100vw - 36px));
  opacity: 0;
  transform: translateY(24px) scale(.98);
  pointer-events: none;
  transition: opacity .55s ease, transform .7s cubic-bezier(.22,1,.36,1);
}
.mn-scroll-prompt.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.mn-scroll-prompt.is-dismissed { opacity: 0; transform: translateY(18px) scale(.98); pointer-events: none; }
/* Stay out of the way of the modals and of Michael's profile view -- and retire
   for good the moment they start answering, since the nudge is spent. */
body:has(dialog[open]) .mn-scroll-prompt,
body.profile-mode .mn-scroll-prompt,
body[data-diagnostic-started] .mn-scroll-prompt,
body[data-diagnostic-taken] .mn-scroll-prompt { opacity: 0; transform: translateY(18px) scale(.98); pointer-events: none; }
.mn-scroll-prompt__button {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 15px;
  align-items: center;
  padding: 13px 13px 13px 14px;
  overflow: hidden;
  color: var(--mn-paper);
  font-family: "DM Sans", sans-serif;
  text-align: left;
  cursor: pointer;
  border: 1px solid rgba(147, 173, 81, .42);
  border-radius: 18px;
  background:
    linear-gradient(110deg, rgba(255,255,255,.07), transparent 42%),
    rgba(13, 16, 13, .94);
  box-shadow: 0 22px 70px rgba(0,0,0,.44), inset 0 1px rgba(255,255,255,.07);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}
.mn-scroll-prompt__button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 25%, rgba(147,173,81,.08), transparent 70%);
  transform: translateX(-110%);
  animation: mn-shimmer 5.5s 2.5s ease-in-out infinite;
  pointer-events: none;
}
.mn-scroll-prompt__button:hover,
.mn-scroll-prompt__button:focus-visible {
  border-color: rgba(147, 173, 81, .8);
  box-shadow: 0 24px 80px rgba(0,0,0,.55), 0 0 0 3px rgba(147,173,81,.14);
  outline: none;
}
.mn-scroll-prompt__portrait-wrap { position: relative; width: 72px; height: 72px; border-radius: 50%; isolation: isolate; }
.mn-scroll-prompt__portrait {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border: 2px solid rgba(243, 240, 231, .82);
  border-radius: 50%;
  filter: saturate(.86) contrast(1.04);
  box-sizing: border-box;
}
.mn-scroll-prompt__pulse {
  position: absolute;
  z-index: 1;
  inset: -5px;
  border: 1px solid rgba(147, 173, 81, .75);
  border-radius: 50%;
  animation: mn-portrait-pulse 2.8s ease-out infinite;
}
.mn-scroll-prompt__copy { position: relative; z-index: 2; display: grid; min-width: 0; }
.mn-scroll-prompt__eyebrow { margin-bottom: 4px; color: var(--mn-green); font-size: 10px; font-weight: 700; letter-spacing: .13em; line-height: 1.2; text-transform: uppercase; }
.mn-scroll-prompt__message { color: #f7f5ef; font-size: 16px; font-weight: 600; line-height: 1.22; }
.mn-scroll-prompt__action { margin-top: 6px; color: var(--mn-green); font-size: 10px; font-weight: 700; letter-spacing: .12em; line-height: 1.3; text-transform: uppercase; }
.mn-scroll-prompt__arrow {
  position: relative;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(47, 121, 173, .7);
  border-radius: 50%;
  background: rgba(47, 121, 173, .18);
  animation: mn-arrow 1.8s ease-in-out infinite;
}
@keyframes mn-portrait-pulse {
  0% { opacity: .7; transform: scale(.94); }
  70%, 100% { opacity: 0; transform: scale(1.18); }
}
@keyframes mn-arrow {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(4px); }
}
@keyframes mn-shimmer {
  0%, 62% { transform: translateX(-110%); }
  82%, 100% { transform: translateX(110%); }
}
@media (max-width: 620px) {
  .mn-scroll-prompt { right: 12px; bottom: 12px; width: calc(100vw - 24px); }
  .mn-scroll-prompt__button { grid-template-columns: 58px 1fr; gap: 11px; padding: 11px; border-radius: 15px; }
  .mn-scroll-prompt__portrait-wrap { width: 56px; height: 56px; }
  .mn-scroll-prompt__eyebrow { font-size: 9px; }
  .mn-scroll-prompt__message { font-size: 14px; }
  .mn-scroll-prompt__action { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .mn-scroll-prompt,
  .mn-scroll-prompt__button::after,
  .mn-scroll-prompt__pulse,
  .mn-scroll-prompt__arrow { animation: none !important; transition-duration: .01ms !important; }
}