/* plan.css — the shared assessment UI (/enquire + /plan). Self-contained on
 * top of site.css tokens; nothing here touches existing components.
 * Display type carries its own line-height (1.08/1.15) — body leading (1.65)
 * on headlines was the "lines too spaced" defect. */

/* Funnel pages are short before the flow starts; without this the page can
 * end above the viewport bottom and show the UA's white canvas. */
html { background: var(--pearl); }

.plan-hero { background: var(--grad-hero); color: var(--white); padding: clamp(120px, 18vh, 190px) var(--section-x) clamp(56px, 8vw, 96px); text-align: center; position: relative; overflow: clip; }
.plan-hero > :not(.hero__arc) { position: relative; z-index: 1; }
/* The headline is centered here (unlike the left-aligned page heroes), so the
 * arc motif retreats to the corner and dims. Centered display type over a
 * bright ring is unreadable. */
.plan-hero .hero__arc svg { width: 105vmin; height: 105vmin; right: -56vmin; top: -40vmin; opacity: .3; }
.plan-hero .hero__arc svg:nth-child(2) { width: 165vmin; height: 165vmin; right: -98vmin; top: -76vmin; opacity: .12; }
.plan-hero .eyebrow { color: #9D96F2; justify-content: center; }
.plan-hero h1 { font-size: var(--fs-d1); font-weight: 300; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; max-width: 21ch; margin: 0 auto var(--sp-5); }
.plan-hero h1 strong { font-weight: 600; letter-spacing: -0.015em; }
.plan-hero .lead { color: rgba(255,255,255,.94); line-height: 1.6; max-width: 58ch; margin: 0 auto var(--sp-6); font-size: var(--fs-lead); }
.plan-hero .helper { color: var(--ink-300); font-size: var(--fs-sm); margin-top: var(--sp-3); }

/* Collapsed hero while the flow (or result) is on screen: a slim brand band,
 * never a giant intro above a question or the recommendation. */
body.plan-active .plan-hero { padding: calc(72px + var(--sp-7)) var(--section-x) var(--sp-6); }
body.plan-active .plan-hero .lead,
body.plan-active .plan-hero #plan-start,
body.plan-active .plan-hero .helper { display: none; }
body.plan-active .plan-hero h1 { font-size: var(--fs-d2); margin-bottom: 0; }
body.plan-active .plan-hero .eyebrow { margin-bottom: var(--sp-3); }

.plan-section { padding: 0 var(--section-x); background: var(--ink-050); }
body.plan-active .plan-section { padding: var(--sp-7) var(--section-x) var(--sp-9); }
#plan-app { max-width: 760px; margin: 0 auto; scroll-margin-top: 90px; }

.plan-card { background: var(--white); border-radius: var(--r-xl); box-shadow: var(--shadow-md); padding: clamp(24px, 4vw, 48px); }
.plan-progress { height: 5px; background: var(--ink-100); border-radius: var(--r-pill); overflow: hidden; }
.plan-progress span { display: block; height: 100%; background: var(--cobalt); border-radius: var(--r-pill); transition: width var(--t-med); }
.plan-progress__label { font-size: var(--fs-eyebrow); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-500); margin: var(--sp-2) 0 var(--sp-5); }

.plan-q { font-size: var(--fs-d2); font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; margin-bottom: var(--sp-2); }
.plan-hint { color: var(--ink-500); font-size: var(--fs-sm); margin-bottom: var(--sp-4); }
.plan-mod { color: var(--cobalt); font-weight: 500; margin-bottom: var(--sp-3); }
.plan-note { background: var(--cobalt-050); border-radius: var(--r-md); padding: var(--sp-4); color: var(--ink-700); font-size: var(--fs-sm); margin-bottom: var(--sp-4); }
.plan-body { color: var(--ink-700); line-height: 1.6; margin-bottom: var(--sp-5); }

.plan-opts { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.plan-opt { display: flex; align-items: center; gap: var(--sp-4); text-align: start; width: 100%; padding: var(--sp-3) var(--sp-4); border: 1.5px solid var(--ink-200); border-radius: var(--r-md); background: var(--white); cursor: pointer; font: inherit; transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
.plan-opt:hover { border-color: var(--cobalt-300); transform: translateY(-1px); }
.plan-opt.is-on { border-color: var(--cobalt); box-shadow: var(--ring); }
.plan-opt__key { flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--cobalt-050); color: var(--cobalt); font-weight: 600; font-size: var(--fs-sm); }
.plan-opt.is-on .plan-opt__key { background: var(--cobalt); color: var(--white); }
.plan-opt__txt strong { display: block; font-weight: 500; }
.plan-opt__txt em { display: block; font-style: normal; color: var(--ink-500); font-size: var(--fs-sm); line-height: 1.4; }

/* The advance action is always reachable, never hunted for below the fold. */
.plan-next { width: 100%; justify-content: center; position: sticky; bottom: 12px; z-index: 2; box-shadow: var(--shadow-cobalt); }
@supports (padding: env(safe-area-inset-bottom)) {
  .plan-next { bottom: calc(12px + env(safe-area-inset-bottom)); }
}
.plan-next[disabled] { opacity: .45; cursor: not-allowed; }
.plan-back { background: none; border: 0; color: var(--ink-500); font: inherit; font-size: var(--fs-sm); margin-top: var(--sp-4); cursor: pointer; }
.plan-back:hover { color: var(--cobalt); }
.plan-nav { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; }
.plan-nav .plan-back { margin-top: var(--sp-4); }
.plan-restart { background: none; border: 0; color: var(--ink-500); font: inherit; font-size: var(--fs-sm); margin: var(--sp-4) 0 0 auto; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.plan-restart:hover { color: var(--cobalt); }

.plan-gate { display: grid; gap: var(--sp-4); }
.plan-field { display: grid; gap: var(--sp-1); }
.plan-field__label { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-700); }
.plan-field input, .plan-field select, .plan-textarea { font: inherit; padding: 12px 14px; border: 1.5px solid var(--ink-200); border-radius: var(--r-md); background: var(--white); color: var(--pearl); width: 100%; }
.plan-field input:focus, .plan-field select:focus, .plan-textarea:focus { outline: none; border-color: var(--cobalt); box-shadow: var(--ring); }
.plan-dial { display: flex; gap: var(--sp-2); }
.plan-dial__code { flex: 0 0 120px; }
.plan-consent { color: var(--ink-400); font-size: var(--fs-sm); }
.plan-error { color: #B42318; font-size: var(--fs-sm); }

/* Result header pattern: 100% progress, eyebrow, greeting, then headline. */
.plan-result__eyebrow { display: inline-flex; gap: 10px; font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cobalt); margin-bottom: var(--sp-3); }
.plan-greet { color: var(--ink-500); font-size: var(--fs-sm); font-weight: 500; margin-bottom: var(--sp-2); }
.plan-pill { display: inline-block; background: var(--cobalt-050); color: var(--cobalt); font-size: var(--fs-eyebrow); letter-spacing: .1em; font-weight: 600; border-radius: var(--r-pill); padding: 6px 14px; margin-bottom: var(--sp-4); }
.plan-plays { margin: var(--sp-6) 0; }
.plan-plays__h { font-size: 1.15rem; font-weight: 600; margin-bottom: var(--sp-4); }
.plan-play { display: flex; gap: var(--sp-4); padding: var(--sp-4) 0; border-top: 1px solid var(--ink-100); }
.plan-play__n { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--cobalt); color: var(--white); font-weight: 600; }
.plan-play h4 { font-weight: 600; margin-bottom: var(--sp-1); }
.plan-play p { color: var(--ink-700); font-size: var(--fs-sm); }
.plan-play__i { color: var(--ink-500); font-style: italic; margin-top: var(--sp-1); }

.plan-rec { border: 1.5px solid var(--cobalt-100); background: var(--cobalt-050); border-radius: var(--r-lg); padding: var(--sp-5); margin: var(--sp-5) 0; }
.plan-brands { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.plan-brands__logo { height: 26px; width: auto; display: block; }
.plan-rec__name { font-weight: 600; font-size: 1.2rem; }
.plan-rec__price { color: var(--cobalt); font-weight: 600; margin-top: 2px; }
.plan-rec__note { color: var(--ink-500); font-size: var(--fs-sm); margin-top: var(--sp-2); }
.plan-rec__list { margin: var(--sp-3) 0 0 1.1em; color: var(--ink-700); font-size: var(--fs-sm); display: grid; gap: 6px; }
.plan-stack { margin-top: var(--sp-3); }
.plan-stack__line { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-2) 0; border-top: 1px solid var(--cobalt-100); font-size: var(--fs-sm); }

.plan-actions { display: grid; gap: var(--sp-3); }
.plan-actions .btn { justify-content: center; }
.plan-textarea { min-height: 84px; resize: vertical; }
.plan-alt { text-align: center; color: var(--ink-500); font-size: var(--fs-sm); background: none; border: 0; font-family: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.plan-alt:hover { color: var(--cobalt); }

@media (max-width: 560px) {
  .plan-card { padding: 20px 16px; border-radius: var(--r-lg); }
  .plan-opt { padding: 10px 12px; gap: var(--sp-3); }
  .plan-opt__txt em { font-size: .875rem; }
  .plan-dial__code { flex-basis: 104px; }
}