/* =============================================================================
 * SECTIONS — editorial layouts. No glows, no grids, no continuous motion.
 * ===========================================================================*/

/* ============================ HERO ======================================== */
.hero { position: relative; padding-block: clamp(2.75rem, 2rem + 4vw, 5rem); }
.hero__glow { display: none !important; }
.hero__inner {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
  width: 100%;
}
.hero__copy { max-width: 34rem; }
.hero h1 { margin-top: var(--space-md); }
.hero h1 .grad { color: var(--accent-ink); -webkit-text-fill-color: currentColor; background: none; }
.hero h1 .serif { color: var(--text-strong); }
.hero__desc { margin-top: var(--space-lg); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.hero__trust { margin-top: var(--space-lg); display: flex; align-items: center; gap: 0.55rem; font-size: 0.86rem; color: var(--text-muted); }
.hero__trust svg { width: 16px; height: 16px; color: var(--accent-ink); flex-shrink: 0; }

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; gap: 2rem; }
  .hero__copy { max-width: 40rem; }
}

/* (Former Signal Map hero visual removed — the hero now uses the aurora
   constellation SVG in enhance.css; its .signalmap CSS was orphaned.) */

/* ==================== POSITIONING STRIP =================================== */
.strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
.strip__item .n { font-family: var(--font-sans); font-size: 0.85rem; color: var(--accent-ink); font-weight: 600; }
.strip__item h3 { font-size: var(--step-1); margin-top: var(--space-sm); }   /* label → title 12 */
.strip__item p { color: var(--text-muted); font-size: 0.92rem; margin-top: var(--space-xs); } /* title → desc 8 */
@media (max-width: 720px) { .strip { grid-template-columns: 1fr; gap: var(--space-lg); } }

/* ==================== THREE RESULTS (editorial blocks) =================== */
/* Columns separated by a gutter (no full-height vertical rules that dangle
   below shorter columns). */
.results-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--space-2xl); border-top: 1px solid var(--border); }
.result-block { padding-top: var(--space-xl); }
.result-block .n { font-family: var(--font-sans); font-size: 0.82rem; color: var(--text-muted); }
.result-block h3 { font-size: var(--step-2); margin-top: 0.5rem; }
.result-block h3 .serif { color: var(--accent-ink); }
.result-block p { margin-top: 0.6rem; color: var(--text-muted); font-size: 0.95rem; }
@media (max-width: 760px) {
  .results-grid { grid-template-columns: 1fr; }
  .result-block { border-right: 0; border-bottom: 1px solid var(--border); padding: var(--space-lg) 0; }
  .result-block:last-child { border-bottom: 0; }
}

/* ==================== OPPORTUNITY INDEX (interactive editorial) ========== */
.opp-index { display: grid; grid-template-columns: 1fr 0.9fr; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: start; }
.opp-index__list { border-top: 1px solid var(--border); }
.opp-row {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem;
  padding: 1.15rem 0.25rem; border-bottom: 1px solid var(--border); text-align: left;
  transition: padding var(--dur) var(--ease-out);
}
.opp-row .num { font-size: 0.85rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.opp-row .name { font-family: var(--font-sans); font-weight: 600; font-size: var(--step-1); color: var(--text-strong); }
.opp-row .name small { display: block; font-weight: 400; font-size: 0.86rem; color: var(--text-muted); margin-top: 0.15rem; }
.opp-row .go { color: var(--text-muted); opacity: 0; transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.opp-row .go svg { width: 18px; height: 18px; }
.opp-row:hover, .opp-row[aria-current='true'] { padding-left: 0.75rem; }
.opp-row:hover .name, .opp-row[aria-current='true'] .name { color: var(--accent-ink); }
.opp-row:hover .go, .opp-row[aria-current='true'] .go { opacity: 1; }
.opp-row[aria-current='true'] .num { color: var(--accent-ink); }

.opp-preview {
  position: sticky; top: calc(var(--header-h) + 20px);
  border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--space-xl);
  background: var(--surface); min-height: 260px;
}
/* Soft swap: each hover re-mounts .opp-preview__body, replaying this fade/slide-in
 * so the panel eases into its new content instead of cutting to it. */
.opp-preview__body { animation: oppPreviewIn .34s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes oppPreviewIn {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .opp-preview__body { animation: none; }
}
.opp-preview .cat { font-size: 0.82rem; color: var(--accent-ink); font-weight: 600; }
.opp-preview h3 { font-size: var(--step-2); margin-top: 0.4rem; }
.opp-preview p { margin-top: 0.6rem; color: var(--text-muted); }
.opp-preview .result-of { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--border); font-size: 0.9rem; }
.opp-preview .result-of b { color: var(--text-strong); }
.opp-preview .link-arrow { margin-top: 1.25rem; }
@media (max-width: 820px) {
  .opp-index { grid-template-columns: 1fr; }
  .opp-preview { display: none; }
  .opp-row .go { opacity: 1; }
}

/* ==================== PROCESS (horizontal, quiet) ======================== */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); position: relative; }
.process__step { padding-top: 1.25rem; border-top: 2px solid var(--border); position: relative; }
.process__step::before { content: ''; position: absolute; top: -2px; left: 0; width: 34px; height: 2px; background: var(--accent); }
.process__step .n { font-size: 0.82rem; color: var(--text-muted); }
.process__step h3 { font-size: var(--step-1); margin-top: 0.3rem; }
.process__step p { margin-top: 0.4rem; color: var(--text-muted); font-size: 0.9rem; }
@media (max-width: 760px) { .process { grid-template-columns: 1fr; gap: var(--space-lg); } }

/* Legacy .steps (used on how-it-works / opportunity detail) — restyled quiet */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }
.steps__line { position: absolute; left: 0; right: 0; top: 26px; height: 2px; background: var(--border); z-index: 0; }
.steps__line span { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: var(--accent); transition: width 0.9s var(--ease-out); }
.step { position: relative; z-index: 1; }
.step__dot { width: 52px; height: 52px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border-strong); display: grid; place-items: center; font-family: var(--font-sans); font-weight: 600; font-size: 1rem; color: var(--text-strong); }
.step.is-active .step__dot { border-color: var(--accent); color: var(--accent-ink); }
.step h3 { font-size: var(--step-1); margin-top: var(--space-md); }
.step p { margin-top: var(--space-xs); color: var(--text-muted); font-size: 0.9rem; }
@media (max-width: 780px) {
  .steps { grid-template-columns: 1fr; gap: var(--space-lg); padding-left: 34px; }
  .steps__line { left: 25px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .steps__line span { width: 100% !important; height: 0; transition: height 0.9s var(--ease-out); }
  .step { display: grid; grid-template-columns: 52px 1fr; gap: var(--space-md); align-items: start; margin-left: -34px; }
}

/* ==================== DELIVERABLES / feature rows ======================== */
.deliver-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.deliver-item { background: var(--bg); padding: var(--space-lg); }
.deliver-item .n { font-size: 0.82rem; color: var(--accent-ink); font-weight: 600; }
.deliver-item h4 { margin-top: var(--space-sm); font-size: var(--step-1); }
.deliver-item p { margin-top: var(--space-xs); color: var(--text-muted); font-size: 0.9rem; }
@media (max-width: 820px) { .deliver-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .deliver-grid { grid-template-columns: 1fr; } }

/* ==================== PLATFORM PREVIEW / DASHBOARD ====================== */
.dashboard { border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-md); }
.dashboard__bar { display: flex; align-items: center; gap: 0.7rem; padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.dashboard__bar .dots { display: flex; gap: 6px; }
.dashboard__bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.dashboard__bar .title { font-size: 0.85rem; color: var(--text-muted); font-weight: 500; }
.dashboard__body { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1px; background: var(--border); }
.dashboard__main, .dashboard__side { background: var(--surface); padding: var(--space-lg); display: grid; gap: var(--space-md); align-content: start; }
.dash-card { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--space-md); background: var(--bg); }
.dash-card .k { font-size: 0.78rem; color: var(--text-muted); font-weight: 500; }
.dash-card .v { margin-top: 0.3rem; font-weight: 600; color: var(--text-strong); }
.dash-progress { height: 7px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin-top: 0.6rem; }
.dash-progress span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent); transition: width 1s var(--ease-out); }
.dash-milestones { display: grid; gap: 0.5rem; }
.dash-milestones li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.88rem; color: var(--text-muted); }
.dash-milestones li .box { width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dash-milestones li.done .box { background: var(--accent); border-color: transparent; color: #fff; }
.dash-milestones li.done .box svg { width: 12px; height: 12px; }
.dash-milestones li.done { color: var(--text); text-decoration: line-through; text-decoration-color: var(--border-strong); }
@media (max-width: 720px) { .dashboard__body { grid-template-columns: 1fr; } }

/* ==================== GUIDANCE (human) ================================== */
.guidance-grid { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--space-xl); border-top: 1px solid var(--border); }
.guidance-tier { padding-top: var(--space-lg); }
.guidance-tier h4 { font-size: var(--step-1); margin-bottom: var(--space-xs); }
.guidance-tier p { color: var(--text-muted); font-size: 0.9rem; }
.guidance-tier .plans { margin-top: var(--space-md); font-size: 0.82rem; color: var(--accent-ink); font-weight: 600; text-transform: none; letter-spacing: 0; }
@media (max-width: 900px) { .guidance-grid { grid-template-columns: 1fr 1fr; column-gap: var(--space-lg); } }
@media (max-width: 520px) { .guidance-grid { grid-template-columns: 1fr; } }

/* Stacked "levels" list (used beside the image in the Human guidance section). */
.guidance-list { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--border); }
.guidance-list .guidance-tier { padding: var(--space-lg) 0; border-bottom: 1px solid var(--border); }
.guidance-list .guidance-tier:last-child { border-bottom: 0; padding-bottom: 0; }
.guidance-list .guidance-tier h4 { margin-bottom: var(--space-2xs); }
.guidance-list .guidance-tier .plans { margin-top: var(--space-xs); }

/* Human guidance split: image matches the levels-list height (no empty channel). */
.guidance-split { align-items: stretch; }
.guidance-split .image-placeholder { aspect-ratio: auto; height: 100%; min-height: 380px; }
@media (max-width: 820px) {
  .guidance-split .image-placeholder { aspect-ratio: 3 / 2; height: auto; min-height: 0; }
}

/* ==================== PRICING =========================================== */
.pricing-toggle { display: inline-flex; padding: 4px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); gap: 4px; }
.pricing-toggle button { padding: 0.55em 1.2em; border-radius: var(--r-pill); font-weight: 600; font-size: 0.9rem; color: var(--text-muted); transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.pricing-toggle button[aria-selected='true'] { background: var(--accent); color: #fff; }
.pricing-toggle button[aria-selected='true'].is-mint { background: var(--accent); color: #fff; }

.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); align-items: stretch; }
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; } }
.plan { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--space-lg); background: var(--surface); position: relative; }
.plan--featured { border-color: var(--accent); box-shadow: none; }
.plan--featured::after { content: none; }
.plan__badge { align-self: flex-start; margin-bottom: var(--space-sm); }
.plan__name { font-family: var(--font-sans); font-weight: 600; font-size: var(--step-2); }
.plan__price { display: flex; align-items: baseline; gap: 0.15rem; margin-top: var(--space-xs); }
.plan__price .cur { font-size: var(--step-0); color: var(--text-muted); }
.plan__price .amt { font-family: var(--font-sans); font-size: var(--step-3); color: var(--text-strong); font-weight: 600; }
.plan__price .per { font-size: 0.85rem; color: var(--text-muted); }
.plan__summary { color: var(--text-muted); margin-top: var(--space-sm); font-size: 0.92rem; }
/* Subtle divider separates the "identity + description" group from the benefits */
.plan__features { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--border); display: grid; gap: 0.75rem; margin-bottom: var(--space-lg); }
.plan__features li { display: flex; gap: 0.55rem; font-size: 0.9rem; line-height: 1.4; }
.plan__features li svg { width: 17px; height: 17px; color: var(--accent-ink); flex-shrink: 0; margin-top: 2px; }
.plan__cta { margin-top: auto; }   /* pin to bottom; features margin-bottom guarantees the gap */
.plan__foot-note { margin-top: var(--space-sm); font-size: 0.76rem; color: var(--text-muted); text-align: center; }

/* ==================== COMPARISON TABLE ================================== */
.compare-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); }
table.compare { width: 100%; border-collapse: collapse; min-width: 720px; }
table.compare th, table.compare td { padding: 0.8rem 1rem; text-align: left; border-bottom: 1px solid var(--border); font-size: 0.88rem; }
table.compare thead th { font-family: var(--font-sans); font-size: 0.9rem; color: var(--text-strong); position: sticky; top: 0; background: var(--surface); }
table.compare tbody th { font-weight: 500; color: var(--text-muted); }
table.compare td { text-align: center; color: var(--text); }
table.compare td:first-child, table.compare th:first-child { text-align: left; }
table.compare .yes { color: var(--accent-ink); }
table.compare .no { color: color-mix(in srgb, var(--text-muted) 55%, transparent); }
table.compare tbody tr:hover { background: var(--surface-2); }
.compare-cards { display: none; }
@media (max-width: 760px) {
  .compare-wrap { display: none; }
  .compare-cards { display: grid; gap: var(--space-md); }
  .compare-card { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
  .compare-card > h4 { padding: 0.85rem 1rem; background: var(--surface-2); font-size: var(--step-1); }
  .compare-card dl { display: grid; }
  .compare-card dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.65rem 1rem; border-top: 1px solid var(--border); font-size: 0.86rem; }
  .compare-card dt { color: var(--text-muted); }
  .compare-card dd { color: var(--text-strong); font-weight: 600; text-align: right; }
}

/* ==================== CTA BANNER (clean band) =========================== */
.cta-banner { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: clamp(2rem, 1.5rem + 3vw, 3.5rem); background: var(--ink); border: 0; }
.cta-banner__glow { display: none !important; }
.cta-banner h2 { color: #fff; max-width: 22ch; }
.cta-banner p { color: var(--text-muted); margin-top: var(--space-sm); }
.cta-banner .hero__actions { margin-top: var(--space-lg); }
.cta-banner[data-theme='dark'] .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.3); }

/* ==================== INSIGHTS =========================================== */
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
@media (max-width: 900px) { .article-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .article-grid { grid-template-columns: 1fr; } }
.article-card { display: flex; flex-direction: column; height: 100%; }
.article-card .thumb { aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); margin-bottom: var(--space-md); background: var(--surface-2); }
.article-card .thumb svg { width: 100%; height: 100%; }
.article-card__meta { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--text-muted); font-weight: 500; margin-bottom: 0.5rem; }
.article-card h3 { font-size: var(--step-1); }
.article-card h3 a:hover { color: var(--accent-ink); }
.article-card p { color: var(--text-muted); font-size: 0.9rem; margin-top: var(--space-xs); }
.article-card .link-arrow { margin-top: auto; padding-top: var(--space-md); }

/* Article body (prose) */
.prose { max-width: 66ch; margin-inline: auto; }
.prose > * + * { margin-top: var(--space-lg); }
.prose h2 { font-size: var(--step-2); margin-top: var(--space-2xl); }
.prose p { font-size: var(--step-1); line-height: 1.7; color: var(--text); max-width: none; }
.prose ul { display: grid; gap: 0.55rem; padding-left: 0; }
.prose ul li { display: flex; gap: 0.65rem; color: var(--text); }
.prose ul li::before { content: ''; width: 6px; height: 6px; margin-top: 0.65em; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.prose blockquote { border-left: 2px solid var(--accent); padding-left: var(--space-lg); font-family: var(--font-serif); font-size: var(--step-2); font-style: italic; color: var(--text-strong); line-height: 1.35; }

/* ==================== INTERIOR PAGE HERO ================================ */
.page-hero { padding-block: clamp(2.5rem, 1.8rem + 3vw, 4rem) var(--space-lg); }
.page-hero h1 { font-size: var(--step-4); margin-top: var(--space-sm); max-width: 18ch; }
.page-hero p { margin-top: var(--space-md); }
.breadcrumb { display: flex; gap: 0.4rem; font-size: 0.82rem; color: var(--text-muted); }
.breadcrumb a:hover { color: var(--accent-ink); }

/* ==================== SPLIT ============================================= */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,1rem + 3vw,3rem); align-items: center; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }
.signal-scatter { display: none; }   /* old techy signal graphic removed */

/* Editorial image placeholder (used until real photography is produced) */
.image-placeholder {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background:
    repeating-linear-gradient(135deg, transparent 0 22px, color-mix(in srgb, var(--ink) 3%, transparent) 22px 23px),
    var(--surface-2);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--space-xl); gap: 0.5rem;
}
.image-placeholder .serif { font-family: var(--font-serif); font-size: var(--step-2); color: var(--text-strong); line-height: 1.2; max-width: 18ch; }
.image-placeholder small { font-size: 0.78rem; color: var(--text-muted); }
@media (max-width: 820px) { .image-placeholder { aspect-ratio: 3 / 2; } }

/* Section scaffolding */
.section { background: var(--bg); color: var(--text); padding-block: var(--section-y); position: relative; isolation: isolate; overflow-x: clip; }
.section--tight { padding-block: clamp(2rem, 1.5rem + 2vw, 3rem); }
.section--flush-top { padding-top: 0; }
.section__head { max-width: 46rem; margin-bottom: var(--section-head-gap); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head h2 { margin-top: var(--space-sm); }        /* label → title = 12 */
.section__head p { margin-top: var(--space-md); }         /* title → description = 16 */

/* ==================== DIAGNOSTIC / SCAN ================================= */
.scan { max-width: 680px; margin-inline: auto; }
.scan__head { margin-bottom: var(--space-xl); }
.scan__meta { display: flex; justify-content: space-between; margin-bottom: 0.6rem; }
.scan__bar { height: 5px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.scan__bar span { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width var(--dur-slow) var(--ease-out); }
.scan__q { border: 0; padding: 0; margin: 0; }
.scan__q legend { display: block; padding: 0; }
.scan__qlabel { display: block; font-family: var(--font-sans); font-weight: 600; font-size: var(--step-3); letter-spacing: -0.015em; color: var(--text-strong); line-height: 1.15; }
.scan__qhelp { display: block; color: var(--text-muted); margin-top: 0.5rem; }
.scan__options { display: grid; gap: 0.6rem; margin-top: var(--space-xl); }
.scan-option { display: flex; align-items: center; gap: 0.8rem; width: 100%; text-align: left; padding: 0.95rem 1.05rem; min-height: 54px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); color: var(--text); font-weight: 500; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.scan-option:hover { border-color: var(--accent); }
.scan-option__mark { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.scan-option__mark svg { width: 13px; height: 13px; }
.scan-option.is-selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.scan-option.is-selected .scan-option__mark { background: var(--accent); border-color: transparent; }
.scan__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-xl); flex-wrap: wrap; }
.scan__nav-right { display: flex; gap: 0.6rem; }
.scan__save { display: flex; align-items: center; gap: 0.5rem; margin-top: var(--space-lg); font-size: 0.8rem; color: var(--text-muted); }
.scan__save svg { width: 14px; height: 14px; color: var(--accent-ink); }

/* Results */
.result { max-width: 940px; margin-inline: auto; }
.result__head { max-width: 640px; margin-bottom: var(--space-xl); }
.result__head h2 { margin-top: var(--space-sm); }
.result__head p { margin-top: var(--space-sm); }
.result__profile { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
.result__profile > div { display: grid; gap: 0.3rem; align-content: start; }
.result__band, .result__planname { font-family: var(--font-sans); font-size: var(--step-2); color: var(--text-strong); }
.result__planprice { font-family: var(--font-sans); font-size: var(--step-2); color: var(--accent-ink); }
.result__readiness { border-right: 1px solid var(--border); padding-right: var(--space-lg); }
.result__subhead { margin: var(--space-2xl) 0 var(--space-lg); font-size: var(--step-2); }
.result__paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.result-path { border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--space-lg); background: var(--surface); display: flex; flex-direction: column; }
.result-path__rank { font-size: 0.8rem; color: var(--accent-ink); font-weight: 600; }
.result-path__icon { color: var(--accent-ink); margin: var(--space-sm) 0; }
.result-path__icon svg { width: 24px; height: 24px; }
.result-path h4 { font-size: var(--step-1); }
.result-path__why { font-size: 0.86rem; margin-top: var(--space-sm); color: var(--text); }
.result-path__why b { color: var(--text-strong); }
.result-path__project { margin-top: var(--space-md); padding: var(--space-md); border-radius: var(--r-md); background: var(--surface-2); }
.result-path__project .mono { font-size: 0.74rem; color: var(--accent-ink); }
.result-path__project p { margin-top: 0.3rem; font-size: 0.86rem; }
.result-path .link-arrow { margin-top: auto; padding-top: var(--space-md); }
.result-path .chk { display: inline-flex; }
.result__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); margin-top: var(--space-xl); align-items: start; }
.result__sharebar { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.result__sharebar .input { font-size: 0.82rem; }
.result__next .checkbox { margin-bottom: var(--space-md); }
.result__nextbtns { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.result__disclaimer { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: var(--space-xl); font-size: 0.8rem; color: var(--text-muted); line-height: 1.6; }
.result__disclaimer svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; }
@media (max-width: 820px) {
  .result__profile, .result__actions { grid-template-columns: 1fr; gap: var(--space-lg); }
  .result__readiness { border-right: 0; border-bottom: 1px solid var(--border); padding-right: 0; padding-bottom: var(--space-lg); }
  .result__paths { grid-template-columns: 1fr; }
}

/* Contact split */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(1.5rem,1rem + 3vw,3.5rem); align-items: start; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }

/* ==================== MOBILE COMPOSITION (≤640px) ====================== */
@media (max-width: 640px) {
  /* Card grids: breathable but tighter gap between cards (16px). */
  .grid, .grid-2, .grid-3, .paths-grid, .opp-grid, .article-grid, .pricing-grid { gap: var(--space-md); }
  .article-grid { gap: var(--space-lg); }              /* articles need a touch more */
  /* Cards: reduce oversized desktop padding on small screens (18–24px). */
  .card--pad-lg { padding: var(--space-lg); }
  /* Section header sits a little closer to its content on small screens. */
  .section__head { margin-bottom: var(--space-xl); }
  /* Hero: content-driven height, comfortable — never a full first screen. */
  .hero { padding-block: var(--space-2xl) var(--space-md); }
  .hero__actions { gap: var(--space-sm); }
  .hero__actions .btn { flex: 1 1 auto; }              /* comfortable tap targets */
  /* Split blocks stack with clear separation between the two halves. */
  .split { gap: var(--space-2xl); }
  /* Deliverables / result paths: single column already; ensure gap. */
  .result__paths { gap: var(--space-md); }
}

@media (max-width: 400px) {
  .card { padding: var(--space-md); }                  /* 16 on the smallest screens */
  .hero__actions .btn { width: 100%; flex-basis: 100%; }
}

/* ==================== PATH CARDS (opportunities library keeps cards) ==== */
.paths-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px,100%),1fr)); gap: var(--space-lg); }
.path-card { display: flex; flex-direction: column; }
.path-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); }
.path-card__num { font-size: 0.82rem; color: var(--text-muted); }
.path-card h3 { margin-top: var(--space-sm); }
.path-card p { margin-top: var(--space-xs); color: var(--text-muted); }
.path-card .deflist { margin-top: auto; padding-top: var(--space-md); }
.path-card__foot { margin-top: var(--space-lg); }