/* Tinova Readiness Blueprint - design system v3 (light and warm) */

:root {
  --canvas: #FDFAF6;
  --surface: #FFFFFF;
  --tint: #FBF1EA;
  --tint-2: #FDEDE6;
  --ink: #221E1B;
  --muted: #786F66;
  --orange: #EE492D;
  --orange-warm: #F36A26;
  --grad: linear-gradient(135deg, #F36A26 0%, #EE492D 100%);
  --hair: #EDE5DC;
  --green: #3F8F63;

  --shadow: 0 2px 4px rgba(60, 40, 30, 0.04), 0 12px 32px rgba(60, 40, 30, 0.06);
  --shadow-lift: 0 4px 8px rgba(60, 40, 30, 0.05), 0 20px 48px rgba(60, 40, 30, 0.09);

  --r-card: 20px;
  --r-btn: 14px;
  --t: 200ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --maxw: 1160px;
  --pad: clamp(20px, 5vw, 72px);

  --step--1: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
  --step-0: clamp(0.98rem, 0.94rem + 0.18vw, 1.0625rem);
  --step-1: clamp(1.06rem, 1rem + 0.32vw, 1.22rem);
  --step-2: clamp(1.28rem, 1.14rem + 0.66vw, 1.7rem);
  --step-3: clamp(1.6rem, 1.32rem + 1.25vw, 2.4rem);
  --step-hero: clamp(2.35rem, 1.72rem + 2.5vw, 3.6rem);
  --step-mega: clamp(4.2rem, 2.6rem + 6.6vw, 8.4rem);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body { display: flex; flex-direction: column; min-height: 100vh; }
#app { flex: 1 1 auto; }

h1, h2, h3, h4 {
  font-family: Poppins, Inter, sans-serif;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0;
  text-transform: none;
}

p { margin: 0; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
strong { font-weight: 600; }

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

/* tiny eyebrow label, used sparingly */
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--orange);
}

/* ---------- Logo lockup, cropped from the real JPG, always on white ---------- */
.logo-mark {
  --lh: 26px;
  display: block;
  height: var(--lh);
  width: calc(var(--lh) * 3.02);
  background-image: url("assets/tinova-logo.jpg");
  background-repeat: no-repeat;
  background-size: calc(var(--lh) * 3.4033) calc(var(--lh) * 3.4254);
  background-position: calc(var(--lh) * -0.2334) calc(var(--lh) * -1.2);
  background-color: #fff;
}

/* ---------- Top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #FFFFFF;
  border-bottom: 1px solid var(--hair);
}
.topbar-line { height: 2px; width: 100%; background: #F4EBE2; }
.topbar-line-fill {
  display: block; height: 100%; width: 0%;
  background: var(--grad);
  transition: width 420ms var(--ease);
}
.topbar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 13px var(--pad);
  display: flex;
  align-items: center;
  gap: 18px;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.4vw, 26px);
  opacity: 1;
  transition: opacity var(--t) var(--ease);
}
.topbar-right[hidden] { display: none; }

.lens-counter {
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.meter { display: flex; align-items: center; gap: 10px; }
.meter-label {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600;
}
.meter-track {
  width: clamp(70px, 13vw, 150px); height: 8px; border-radius: 999px;
  background: #F1E7DD; overflow: hidden; display: block;
}
.meter-fill {
  display: block; height: 100%; width: 0%; border-radius: 999px;
  background: var(--grad);
  transition: width 620ms cubic-bezier(0.16, 1, 0.3, 1);
}
.meter-value {
  font-variant-numeric: tabular-nums; font-size: var(--step--1); font-weight: 500;
  color: var(--ink); min-width: 6ch; text-align: right;
}
@media (max-width: 720px) {
  .meter-label { display: none; }
  .topbar-inner { gap: 10px; }
}
@media (max-width: 460px) {
  .meter-track { display: none; }
}

/* ---------- App shell ---------- */
.app { flex: 1 0 auto; position: relative; }

.screen {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(30px, 5vw, 64px) var(--pad) clamp(52px, 7vw, 104px);
  position: relative;
}

.anim-in { animation: slideFade 220ms var(--ease) both; }
@keyframes slideFade {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.anim-in.back { animation-name: slideFadeBack; }
@keyframes slideFadeBack {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Pinwheel background graphic ---------- */
.pinwheel {
  position: absolute;
  background: url("assets/pinwheel.svg") no-repeat center / contain;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}
.pinwheel-hero {
  width: clamp(420px, 58vw, 760px);
  aspect-ratio: 1;
  right: clamp(-260px, -14vw, -110px);
  top: clamp(-140px, -8vw, -60px);
}
@media (max-width: 939px) {
  .pinwheel-hero { top: auto; bottom: -130px; right: -190px; width: 420px; }
}
.pinwheel-inter {
  width: clamp(360px, 62vw, 720px);
  aspect-ratio: 1;
  left: clamp(-250px, -20vw, -120px);
  bottom: clamp(-220px, -16vw, -110px);
}
.pinwheel-result {
  width: clamp(340px, 50vw, 620px);
  aspect-ratio: 1;
  right: clamp(-230px, -16vw, -100px);
  top: -90px;
  opacity: 0.06;
}
.screen > *:not(.pinwheel) { position: relative; z-index: 1; }
/* sections that carry the cropped mark clip it at their own edge */
.hero, .interstitial, .result { overflow: hidden; }

/* ---------- Buttons ---------- */
.btn {
  appearance: none; border: 0; cursor: pointer; text-decoration: none;
  display: inline-block; width: fit-content;
  background: var(--grad); color: #fff;
  font-family: Inter, sans-serif;
  font-weight: 600; font-size: var(--step-1);
  padding: 17px 34px; border-radius: var(--r-btn);
  box-shadow: 0 2px 4px rgba(200, 70, 40, 0.14), 0 12px 26px rgba(200, 70, 40, 0.18);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), filter var(--t) var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(200, 70, 40, 0.16), 0 18px 34px rgba(200, 70, 40, 0.22); filter: saturate(1.05); }
.btn:active { transform: translateY(0); }
.btn-wide { width: 100%; text-align: center; display: block; }
.btn-ghost {
  background: #fff; color: var(--ink);
  border: 1px solid var(--hair); font-size: var(--step-0); font-weight: 500;
  padding: 12px 22px; box-shadow: none;
}
.btn-ghost:hover { background: var(--tint); box-shadow: none; transform: none; border-color: #E2D6C9; }

:where(button, a, input, [tabindex]):focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/* ---------- Hero ---------- */
.hero { padding-top: clamp(34px, 6vw, 78px); padding-bottom: clamp(56px, 8vw, 116px); }
.hero-grid { display: grid; gap: clamp(34px, 5vw, 64px); }
@media (min-width: 940px) {
  .hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(330px, 0.95fr); align-items: start; }
  .hero-aside { margin-top: 88px; margin-right: calc(var(--pad) * -0.5); }
}
.hero h1 {
  font-size: var(--step-hero);
  font-weight: 600;
  max-width: 15ch;
  margin: 14px 0 0;
}
.hero h1 .accent {
  color: var(--orange);
  font-style: normal;
  position: relative;
  white-space: nowrap;
}
.hero h1 .accent::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -0.07em; height: 0.075em;
  background: var(--grad); border-radius: 999px; opacity: 0.3;
}
.hero-sub {
  font-size: var(--step-1);
  color: var(--muted);
  max-width: 46ch;
  margin-top: 20px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 30px; }
.hero-meta {
  margin-top: 26px;
  font-size: var(--step--1);
  color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center;
}
.hero-meta .dot { width: 5px; height: 5px; border-radius: 999px; background: var(--orange); opacity: 0.55; display: inline-block; }
.hero-note {
  margin-top: 34px;
  padding-left: 18px;
  border-left: 2px solid var(--hair);
  color: var(--muted);
  font-size: var(--step--1);
  max-width: 40ch;
}

/* Pull quote card, deliberately tilted and offset off the grid */
.hero-aside { position: relative; }
.thesis {
  background: var(--tint);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  padding: clamp(26px, 3.4vw, 38px) clamp(24px, 3vw, 34px);
  box-shadow: var(--shadow);
  transform: rotate(-1.4deg);
  font-family: Poppins, Inter, sans-serif;
  font-weight: 500;
  font-size: clamp(1.14rem, 1rem + 0.55vw, 1.42rem);
  line-height: 1.42;
  letter-spacing: -0.008em;
  color: var(--ink);
}
.thesis-mark {
  display: block;
  width: 34px; height: 3px; border-radius: 999px;
  background: var(--grad);
  margin-bottom: 18px;
}
.thesis-by {
  transform: rotate(-1.4deg);
  margin-top: 16px;
  padding-left: 6px;
  font-size: var(--step--1);
  color: var(--muted);
}

/* Nine lens band, indented off the main text column on purpose */
.lens-band {
  margin-top: clamp(48px, 7vw, 88px);
  padding-top: 26px;
  border-top: 1px solid var(--hair);
}
@media (min-width: 940px) { .lens-band { margin-left: 6%; } }
.lens-band-label {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
  color: var(--muted); margin-bottom: 18px;
}
.lens-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px 30px;
  grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr));
  max-width: 900px;
}
.lens-list li {
  display: flex; align-items: baseline; gap: 10px;
  font-size: var(--step-0);
  color: var(--ink);
}
.lens-list .ln {
  font-family: Poppins, sans-serif; font-weight: 600; font-size: 0.78rem;
  color: var(--orange); min-width: 1.4ch;
}

/* ---------- Section headings shared ---------- */
.q-title {
  font-size: var(--step-3);
  max-width: 20ch;
  margin: 12px 0 0;
}
.q-sub {
  color: var(--muted);
  font-size: var(--step-1);
  max-width: 52ch;
  margin-top: 14px;
}

/* ---------- Stage screen, staggered rows instead of three equal cards ---------- */
.stage-screen { padding-top: clamp(40px, 7vw, 96px); }
.stage-grid { display: grid; gap: 16px; margin-top: clamp(30px, 4vw, 46px); }
.stage-card {
  text-align: left; cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: clamp(20px, 2.6vw, 28px) clamp(20px, 3vw, 32px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 20px;
  align-items: center;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease), background var(--t) var(--ease);
}
.stage-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: #E3D6C9; }
.stage-card .letter {
  grid-row: span 2;
  width: 46px; height: 46px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--tint-2); color: var(--orange);
  font-family: Poppins, sans-serif; font-weight: 600; font-size: 1.02rem;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.stage-card .title {
  font-family: Poppins, sans-serif; font-weight: 600; font-size: var(--step-2);
  line-height: 1.2; letter-spacing: -0.015em;
}
.stage-card .body { color: var(--muted); font-size: var(--step-0); max-width: 54ch; }
.stage-card .dest-tag {
  grid-column: 2;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hair);
  font-size: var(--step--1); color: var(--muted);
}
.stage-card .dest-tag strong { color: var(--orange); font-weight: 600; }
.stage-card.selected {
  border-color: var(--orange);
  background: var(--tint-2);
}
.stage-card.selected .letter { background: var(--orange); color: #fff; }
/* deliberate off-grid stagger */
@media (min-width: 860px) {
  .stage-card:nth-child(1) { margin-right: 6%; }
  .stage-card:nth-child(2) { margin-left: 5%; }
  .stage-card:nth-child(3) { margin-right: 2%; margin-left: 1.5%; }
}
@media (max-width: 560px) {
  .stage-card { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .stage-card .letter { grid-row: auto; }
  .stage-card .dest-tag { grid-column: 1; }
}

/* ---------- Contact capture ---------- */
.contact-screen { padding-top: clamp(36px, 6vw, 84px); }
.contact-grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 940px) {
  .contact-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .contact-intro { position: sticky; top: 104px; }
}
.contact-intro .q-title { max-width: 16ch; }
.reassure {
  margin-top: 26px;
  background: var(--tint);
  border-radius: var(--r-card);
  padding: 22px 24px;
  display: grid; gap: 10px;
  max-width: 42ch;
}
.reassure p { font-size: var(--step--1); color: var(--muted); }
.reassure p strong { color: var(--ink); }

.form {
  display: grid; gap: 18px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: clamp(24px, 3.4vw, 38px);
}
.form-row { display: grid; gap: 18px; }
@media (min-width: 560px) { .form-row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 7px; }
.field label {
  font-size: var(--step--1); font-weight: 500; color: var(--ink);
}
.field label .opt { color: var(--muted); font-weight: 400; }
.field input {
  background: #FEFCF9; border: 1px solid var(--hair); border-radius: var(--r-btn);
  padding: 14px 16px; color: var(--ink); width: 100%;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.field input::placeholder { color: #A99E93; }
.field input:focus { border-color: var(--orange); background: #fff; outline: none; box-shadow: 0 0 0 3px rgba(238, 73, 45, 0.12); }
.field.invalid input { border-color: #C2311A; background: #FFF7F5; }
.err { color: #B32D17; font-size: var(--step--1); }
.err:empty { display: none; }

.consent {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--tint); border-radius: var(--r-btn);
  padding: 14px 16px; cursor: pointer;
}
.consent input { width: 20px; height: 20px; accent-color: var(--orange); margin: 2px 0 0; flex: none; cursor: pointer; }
.consent span { color: var(--muted); font-size: var(--step--1); }
.microcopy { color: var(--muted); font-size: var(--step--1); }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- Question screen ---------- */
.qscreen {
  padding-top: clamp(28px, 4vw, 56px);
  min-height: calc(100vh - 130px);
  display: flex; flex-direction: column; justify-content: center;
}
@media (max-width: 760px) { .qscreen { min-height: 0; } }
.qcols { display: grid; gap: clamp(26px, 4vw, 60px); align-items: start; }
@media (min-width: 1000px) {
  .qcols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); }
  .qleft { padding-top: 14px; }
}
.qhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.qhead .lensname {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--orange);
}
.qhead .qnum { font-size: var(--step--1); color: var(--muted); }
.lensdots { display: flex; gap: 6px; margin-top: 18px; }
.lensdots span {
  width: 22px; height: 4px; border-radius: 999px; background: #EDE2D7; display: block;
}
.lensdots span.done { background: var(--orange); opacity: 0.45; }
.lensdots span.now { background: var(--grad); opacity: 1; }
.qtext {
  font-family: Poppins, Inter, sans-serif; font-weight: 500;
  font-size: clamp(1.42rem, 1.06rem + 1.5vw, 2.15rem);
  letter-spacing: -0.018em; line-height: 1.22;
  max-width: 25ch; margin: 20px 0 0;
}
.answers {
  display: grid; gap: 10px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: 14px;
}
.answer {
  display: flex; align-items: center; gap: 16px; cursor: pointer; text-align: left;
  background: #FEFCF9; border: 1px solid var(--hair); border-radius: var(--r-btn);
  padding: 16px 18px; width: 100%;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.answer:hover { background: var(--tint); border-color: #E3D6C9; transform: translateX(3px); }
.answer .key {
  font-family: Poppins, sans-serif; font-weight: 600; font-size: 0.85rem; color: var(--muted);
  width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--hair); background: #fff;
  display: grid; place-items: center; flex: none;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.answer .atext { font-size: var(--step-1); }
@media (max-width: 560px) {
  .answer { padding: 14px 14px; gap: 12px; }
  .answer .atext { font-size: var(--step-0); }
  .answers { padding: 10px; }
}
.answer.selected { border-color: var(--orange); background: var(--tint-2); }
.answer.selected .key { background: var(--grad); color: #fff; border-color: transparent; }
.qfoot { margin-top: 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hint { color: var(--muted); font-size: var(--step--1); }
@media (max-width: 700px) { .hint { display: none; } }

/* ---------- Interstitial ---------- */
.interstitial {
  min-height: calc(100vh - 130px);
  display: flex; flex-direction: column; justify-content: center;
  padding-top: clamp(36px, 5vw, 66px); padding-bottom: clamp(36px, 5vw, 66px);
}
.inter-card {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: clamp(28px, 4vw, 48px);
  max-width: 700px;
  display: grid; gap: 14px;
}
@media (min-width: 940px) { .inter-card { margin-left: 16%; } }
.interstitial .lens-done { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.interstitial h2 { font-size: var(--step-3); max-width: 18ch; }
.inter-score {
  font-family: Poppins, sans-serif; font-weight: 600; font-size: clamp(3rem, 2rem + 4vw, 4.6rem);
  line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.inter-score small { font-size: 0.3em; color: var(--muted); -webkit-text-fill-color: var(--muted); }
.inter-bar { height: 10px; border-radius: 999px; background: #F1E7DD; max-width: 420px; overflow: hidden; }
.inter-bar span { display: block; height: 100%; background: var(--grad); border-radius: 999px; animation: growbar 700ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes growbar { from { width: 0; } }
.inter-react { font-family: Poppins, sans-serif; font-weight: 500; font-size: var(--step-2); }
.inter-fast { color: var(--green); font-size: var(--step--1); }

/* ---------- Calculating ---------- */
.calc {
  min-height: calc(100vh - 130px);
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
}
.calc h2 { font-size: var(--step-3); max-width: 20ch; }
.calc .dots { color: var(--muted); }

/* ---------- Result ---------- */
.result { display: grid; gap: clamp(38px, 5vw, 68px); }

.score-block {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: clamp(28px, 4vw, 52px);
  display: grid; gap: 12px;
}
@media (min-width: 940px) { .score-block { margin-right: 8%; } }
.badge {
  display: inline-flex; align-items: center; width: fit-content;
  background: var(--tint-2); color: var(--orange);
  border-radius: 999px; padding: 6px 15px;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
}
.score-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }
.score-number {
  font-family: Poppins, sans-serif; font-weight: 600; font-size: var(--step-mega);
  line-height: 0.95; letter-spacing: -0.04em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.score-number .pct { font-size: 0.5em; letter-spacing: -0.02em; }
.score-headline {
  font-family: Poppins, sans-serif; font-weight: 500;
  font-size: var(--step-2); line-height: 1.25; max-width: 18ch;
}
.score-sub { color: var(--muted); font-size: var(--step-1); max-width: 40ch; }
.tier-title { font-size: var(--step-2); max-width: 24ch; margin-top: 20px; padding-top: 22px; border-top: 1px solid var(--hair); }
.tier-diag { color: var(--muted); max-width: 60ch; }

.destination {
  background: var(--tint);
  border-radius: var(--r-card);
  padding: clamp(26px, 4vw, 44px);
  display: grid; gap: 12px;
}
@media (min-width: 940px) { .destination { margin-left: 7%; } }
.destination h2 { font-size: var(--step-2); color: var(--orange); max-width: 22ch; }
.destination p { max-width: 56ch; }
.destination .reentry { color: var(--muted); font-size: var(--step--1); }

.verdict {
  border-left: 3px solid var(--orange);
  padding: 6px 0 6px 24px;
  font-family: Poppins, sans-serif; font-weight: 500;
  font-size: var(--step-2); line-height: 1.35; max-width: 42ch;
}

.section-label {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
  color: var(--muted); margin-bottom: 18px;
  display: flex; align-items: center; gap: 12px;
}
.section-label::after {
  content: ""; flex: 1; height: 1px; background: var(--hair);
}

.weakest {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: clamp(24px, 3.4vw, 40px);
  display: grid; gap: 14px;
  position: relative; overflow: hidden;
}
.weakest::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grad);
}
.weakest h3 { font-size: var(--step-2); max-width: 32ch; }
.weakest .cost { max-width: 62ch; }
.weakest .fixed { color: var(--muted); max-width: 62ch; }
.weakest .fixed strong { color: var(--green); }

.bars { display: grid; gap: 15px; }
.bar-row { display: grid; gap: 7px; }
.bar-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.bar-name { font-size: var(--step-0); }
.bar-row.weak .bar-name { color: var(--orange); font-weight: 600; }
.bar-tag {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
  color: #fff; background: var(--grad); border-radius: 999px; padding: 2px 9px; margin-left: 9px;
  white-space: nowrap;
}
.bar-val { font-variant-numeric: tabular-nums; color: var(--muted); font-size: var(--step--1); white-space: nowrap; }
.bar-track { height: 10px; background: #F1E7DD; border-radius: 999px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: #E9B79F; border-radius: 999px; animation: growbar 800ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.bar-row.weak .bar-fill { background: var(--grad); }
.bar-row.high .bar-fill { background: #9CC9AF; }

.moves { display: grid; gap: 14px; }
.moves-note { color: var(--muted); margin: 10px 0 22px; max-width: 56ch; }
.move {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start;
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: 22px 24px;
}
@media (min-width: 860px) {
  .move:nth-child(2) { margin-left: 5%; }
  .move:nth-child(3) { margin-left: 10%; }
}
.move .num {
  font-family: Poppins, sans-serif; font-weight: 600; font-size: 1.05rem;
  width: 38px; height: 38px; border-radius: 999px; flex: none;
  display: grid; place-items: center;
  background: var(--tint-2); color: var(--orange);
}
.move .mname { font-family: Poppins, sans-serif; font-weight: 600; font-size: var(--step-1); line-height: 1.3; }
.move .mfix { color: var(--muted); margin-top: 5px; }

.invite {
  background: var(--tint);
  border-radius: var(--r-card);
  padding: clamp(26px, 4.4vw, 52px);
  display: grid; gap: 20px;
}
.invite p.body { font-size: var(--step-1); max-width: 62ch; }
.invite .sig { color: var(--muted); }
.invite .offer-tag {
  font-size: var(--step--1); font-weight: 600; color: var(--orange);
}
.confirm {
  color: var(--muted);
  background: #fff; border: 1px solid var(--hair); border-radius: var(--r-card);
  padding: 20px 24px; box-shadow: var(--shadow);
}
.confirm strong { color: var(--ink); }
.restart { justify-self: start; }

/* ---------- Footer ---------- */
.footer { flex: none; margin-top: auto; background: var(--ink); color: #F6EFE7; }
.footer-rule { height: 3px; background: var(--grad); }
.footer-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 26px var(--pad);
  font-size: var(--step--1);
  display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: baseline;
}
.footer-name { font-family: Poppins, sans-serif; font-weight: 600; }
.footer-place { color: #B9AEA2; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .thesis, .thesis-by { transform: none; }
}

/* ==========================================================
   v4 LAYOUT, usability first
   Answer text is now full sentences, so cards top-align,
   read at a comfortable measure, and stay thumb-sized.
   ========================================================== */

.answer {
  align-items: flex-start;
  gap: 14px;
  padding: 15px 17px;
  min-height: 60px;
}
.answer .atext {
  line-height: 1.4;
  font-size: var(--step-0);
  padding-top: 1px;
}
.answer .key { flex: 0 0 auto; margin-top: 1px; }
.answers { gap: 8px; }

/* keep long choices readable rather than stretched across the viewport */
@media (min-width: 1000px) {
  .qcols { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); }
}
.qtext { max-width: 22ch; }
.qsub {
  color: var(--muted); font-size: var(--step-0);
  margin: 12px 0 0; max-width: 34ch; line-height: 1.55;
}
.ctx-screen .qtext { max-width: 26ch; }

/* --- result page rhythm --- */
.rblock { margin: 0 0 clamp(38px, 5vw, 66px); }
.rblock:last-child { margin-bottom: 0; }
.result .score-block { margin-bottom: clamp(28px, 3.5vw, 44px); }

.diag-card {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--r-card); box-shadow: var(--shadow);
  padding: clamp(22px, 3vw, 34px);
}
.diag-card .tier-title { margin-top: 0; }
.diag-card .verdict { margin-bottom: 0; }

/* --- belief 2: the cost, arithmetic on show --- */
.cost-card {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--r-card); box-shadow: var(--shadow);
  padding: clamp(22px, 3vw, 34px);
}
.cost-lead {
  font-size: var(--step-1); line-height: 1.55; margin: 0 0 22px;
  max-width: 60ch;
}
.cost-math { border-top: 1px solid var(--hair); }
.cm-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--hair);
}
.cm-row span { color: var(--muted); font-size: var(--step-0); max-width: 44ch; }
.cm-row b {
  font-family: Poppins, Inter, sans-serif; font-weight: 600;
  font-size: var(--step-1); white-space: nowrap;
}
.cm-row.total { border-bottom: 0; }
.cm-row.total span { color: var(--ink); font-weight: 500; }
.cm-row.total b { color: var(--orange); font-size: var(--step-2); }
.cost-annual {
  margin: 20px 0 0; font-size: var(--step-1); line-height: 1.55;
  background: var(--tint-2); border-radius: var(--r-btn);
  padding: 16px 18px;
}
.cost-note {
  margin: 14px 0 0; color: var(--muted); font-size: var(--step--1);
  line-height: 1.55; max-width: 62ch;
}

/* --- belief 3: score against the bar --- */
.bar-cmp-card {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--r-card); box-shadow: var(--shadow);
  padding: clamp(22px, 3vw, 34px);
}
.bcc-lead { margin: 0 0 22px; font-size: var(--step-1); line-height: 1.55; max-width: 62ch; }
.bar-cmp-head, .bar-cmp {
  display: grid; grid-template-columns: minmax(0, 1.7fr) 72px 72px minmax(0, 1fr);
  gap: 12px; align-items: center;
}
.bar-cmp-head {
  padding: 0 0 10px; border-bottom: 1px solid var(--hair);
}
.bar-cmp-head span {
  font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.bar-cmp { padding: 15px 0; border-bottom: 1px solid var(--hair); }
.bar-cmp:last-of-type { border-bottom: 0; }
.bc-name { font-weight: 500; font-size: var(--step-0); }
.bc-bar { color: var(--muted); font-variant-numeric: tabular-nums; font-size: var(--step-0); }
.bc-you {
  font-family: Poppins, Inter, sans-serif; font-weight: 600;
  font-variant-numeric: tabular-nums; font-size: var(--step-1);
  color: var(--orange);
}
.bar-cmp.clears .bc-you { color: var(--green); }
.bc-gap { font-size: var(--step--1); color: var(--muted); text-align: right; }
.bar-cmp.clears .bc-gap { color: var(--green); font-weight: 600; }
.bcc-verdict {
  margin: 22px 0 0; padding: 16px 18px;
  background: var(--tint); border-radius: var(--r-btn);
  font-size: var(--step-1); line-height: 1.5; font-weight: 500;
}
.bcc-note {
  margin: 12px 0 0; color: var(--muted); font-size: var(--step--1);
  line-height: 1.55; max-width: 62ch;
}

/* --- belief 4: their answers read back --- */
.readback {
  background: var(--tint); border: 1px solid var(--hair);
  border-left: 3px solid var(--orange);
  border-radius: var(--r-card); padding: clamp(22px, 3vw, 34px);
}
.rb-body {
  margin: 0; font-size: var(--step-1); line-height: 1.62; max-width: 66ch;
}
.rb-sig { margin: 16px 0 0; color: var(--muted); font-size: var(--step--1); }

/* --- the ask, heaviest block on the page --- */
.ask {
  background: var(--grad); color: #fff;
  border-radius: var(--r-card); padding: clamp(26px, 4vw, 46px);
  box-shadow: var(--shadow-lift);
}
.ask h2 {
  font-family: Poppins, Inter, sans-serif; font-weight: 600;
  font-size: var(--step-3); line-height: 1.16; letter-spacing: -0.02em;
  margin: 0; max-width: 24ch; color: #fff;
}
.ask-terms {
  margin: 14px 0 0; font-weight: 600; font-size: var(--step-1);
  color: rgba(255, 255, 255, 0.95);
}
.ask-lead { margin: 26px 0 12px; color: rgba(255, 255, 255, 0.88); font-size: var(--step-0); }
.ask-list { margin: 0; padding: 0; list-style: none; }
.ask-list li {
  position: relative; padding: 0 0 0 26px; margin: 0 0 12px;
  font-size: var(--step-0); line-height: 1.55; max-width: 62ch;
  color: rgba(255, 255, 255, 0.96);
}
.ask-list li::before {
  content: ""; position: absolute; left: 4px; top: 0.62em;
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
}
.ask-list strong { color: #fff; font-weight: 600; }
.ask-gap {
  margin: 24px 0 26px; padding: 16px 18px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--r-btn);
  font-size: var(--step-1); line-height: 1.5; font-weight: 500;
  max-width: 62ch;
}
.btn-ask {
  background: #fff; color: var(--orange);
  font-size: var(--step-1); padding: 18px 34px;
  box-shadow: 0 8px 24px rgba(90, 30, 10, 0.18);
}
.btn-ask:hover { background: #fff; color: #D93B21; transform: translateY(-2px); }
.ask-risk {
  margin: 18px 0 0; font-size: var(--step-0);
  color: rgba(255, 255, 255, 0.9); font-style: normal;
}
.ask-sig { margin: 22px 0 0; font-size: var(--step--1); color: rgba(255, 255, 255, 0.8); }

/* --- footer --- */
.rfoot {
  border-top: 1px solid var(--hair); padding-top: 26px;
}
.dest-foot {
  margin: 0 0 14px; color: var(--muted); font-size: var(--step-0);
  line-height: 1.6; max-width: 68ch;
}
.dest-foot strong { color: var(--ink); }

/* --- sticky ask --- */
.sticky-ask {
  position: fixed; left: 50%; bottom: 18px; z-index: 40;
  transform: translate(-50%, 130%);
  display: flex; align-items: center; gap: 18px;
  width: min(680px, calc(100vw - 32px));
  background: var(--ink); color: #fff;
  border-radius: 16px; padding: 12px 14px 12px 20px;
  box-shadow: 0 14px 40px rgba(30, 18, 10, 0.3);
  transition: transform 320ms var(--ease), opacity 320ms var(--ease);
  opacity: 0; pointer-events: none;
}
.sticky-ask.on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.sa-text {
  flex: 1 1 auto; font-size: var(--step--1); line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
}
.btn-sticky {
  flex: 0 0 auto; background: var(--grad); color: #fff;
  padding: 12px 20px; font-size: var(--step--1); white-space: nowrap;
}
.btn-sticky:hover { transform: translateY(-1px); }
@media (max-width: 620px) {
  .sticky-ask {
    flex-direction: column; align-items: stretch; gap: 10px;
    padding: 14px; bottom: 12px;
  }
  .sa-text { text-align: center; }
  .btn-sticky { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-ask { transition: none; }
}

/* --- interstitial consequence line --- */
.inter-cost {
  margin: 14px 0 0; color: var(--muted); font-size: var(--step-0);
  line-height: 1.55; max-width: 46ch; margin-inline: auto;
}
.interstitial.mid .inter-card h2 { max-width: 26ch; margin-inline: auto; }

/* --- narrow screens: the comparison table becomes stacked rows --- */
@media (max-width: 680px) {
  .bar-cmp-head { display: none; }
  .bar-cmp {
    grid-template-columns: 1fr auto; gap: 6px 12px;
    padding: 16px 0;
  }
  .bc-name { grid-column: 1 / -1; font-weight: 600; }
  .bc-bar::before { content: "Bar "; }
  .bc-you::after { content: " you"; font-size: var(--step--1); color: var(--muted); font-weight: 400; }
  .bc-gap { grid-column: 1 / -1; text-align: left; }
  .cm-row { flex-direction: column; gap: 4px; }
  .cm-row b { align-self: flex-start; }
}

/* ==========================================================
   v4 LAYOUT CORRECTIONS
   The result page was pouring narrow text into full-width
   cards, which left a dead right margin on every block and
   read as unconsidered. Cards now match the reading measure.
   ========================================================== */

.result { max-width: 860px; margin-inline: auto; }
.result .rblock > .section-label { margin-bottom: 14px; }

/* the tier title carried a stray rule and collided with the
   paragraph under it */
.diag-card .tier-title {
  border-top: 0; padding-top: 0; margin: 0 0 14px;
  max-width: 30ch;
}
.diag-card .tier-diag { margin: 0 0 22px; max-width: none; }
.diag-card .verdict { max-width: none; }
.weakest h3 { max-width: none; }
.weakest .cost, .weakest .fixed { max-width: none; }
.rb-body, .cost-lead, .bcc-lead, .cost-note, .bcc-note, .ask-list li, .ask-gap { max-width: none; }
.cm-row span { max-width: 34ch; }

/* the weakest-lens card is a consequence of the diagnosis above it,
   so it reads as one unit rather than two floating cards */
#bottleneck .weakest { margin-top: 14px; }

/* score block earns the width by putting the number and the
   headline on a real baseline together */
.result .score-block {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--r-card); box-shadow: var(--shadow);
  padding: clamp(24px, 3.4vw, 40px);
}

/* --- stage screen --- */
/* the staggered indents were decoration pretending to be design.
   Aligned cards, and the sales routing no longer leaks before
   they have answered a single question. */
@media (min-width: 900px) {
  .stage-card:nth-child(1),
  .stage-card:nth-child(2),
  .stage-card:nth-child(3) { margin-left: 0; margin-right: 0; }
}
.stage-screen { max-width: 860px; margin-inline: auto; }
.stage-card .body { max-width: none; }
.stage-card .title { font-size: var(--step-1); }

/* --- question screen: stop the content floating in dead space --- */
.qscreen { max-width: 1040px; margin-inline: auto; }
@media (min-width: 1000px) {
  .qcols { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; }
  .qleft { padding-top: 0; }
}
.contact-screen { max-width: 860px; margin-inline: auto; }

/* stage card subline is now a promise, not a price tag */
.stage-card .dest-tag { color: var(--muted); font-weight: 500; }
.stage-card .dest-tag strong { color: var(--orange); }

/* the numbered moves are a sequence, not a staircase */
@media (min-width: 860px) {
  .move:nth-child(2), .move:nth-child(3) { margin-left: 0; }
}
.moves-note, .invite p.body { max-width: none; }
.moves { gap: 12px; }

/* hero pre-frame: installs the reframe before the first question */
.preframe {
  margin: 22px 0 6px; padding: 20px 22px;
  background: var(--tint); border-radius: var(--r-card);
  border-left: 3px solid var(--orange);
  display: grid; gap: 9px;
}
.preframe p { color: var(--muted); font-size: var(--step-0); line-height: 1.6; }
.preframe .pf-last { color: var(--ink); font-weight: 500; }

/* ==========================================================
   THE FIX WE BUILD
   The result page diagnosed well and solved vaguely. This block
   states the deliverable in plain terms so the reader sees an
   actual solution before we ask for the call.
   ========================================================== */
.sol-lead { color: var(--muted); margin: 10px 0 20px; }
.sol-list {
  list-style: none; display: grid; gap: 2px;
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--r-card); box-shadow: var(--shadow);
  padding: 8px 0; overflow: hidden;
}
.sol-list li {
  display: grid; grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px; align-items: start;
  padding: 14px clamp(20px, 3vw, 28px);
  font-size: var(--step-0); line-height: 1.55;
}
.sol-list li + li { border-top: 1px solid var(--hair); }
.sol-list li::before {
  content: ""; margin-top: 8px;
  width: 13px; height: 13px; border-radius: 999px;
  background: var(--green); opacity: 0.9;
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px rgba(63,143,99,0.28);
}
.sol-note { color: var(--muted); font-size: var(--step--1); margin-top: 14px; }