/* Home-only hierarchy; the shared B4 system and other routes stay unchanged. */
.home-intro { display:grid; gap:var(--space-6); padding-block:var(--space-10); }
.home-intro h1 { max-width:18ch; margin:0; font-size:clamp(2.25rem,4vw,3.5rem); }
.home-intro .lead { margin-bottom:var(--space-4); }
.home-intro .actions { gap:var(--space-3) var(--space-6); }
.home-intro .text-link { min-height:44px; }
.home-shortcuts { padding-block:var(--space-8); border-top:1px solid var(--strong); }
.shortcut-heading { display:flex; justify-content:space-between; align-items:end; gap:var(--space-6); }
.shortcut-heading h2 { margin-bottom:var(--space-3); }
.shortcut-heading p { margin:0; font-size:1rem; }
.shortcut-stage { position:relative; margin-block:var(--space-4); }
.shortcut-controls button { position:absolute; z-index:2; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:48px; height:48px; padding:var(--space-3); border:0; border-radius:var(--radius-sm); color:var(--link); background:transparent; cursor:pointer; }
.shortcut-controls button:first-child { left:var(--space-3); }
.shortcut-controls button:last-child { right:var(--space-3); }
.shortcut-controls button:hover { color:var(--link-hover); background:transparent; }
.shortcut-controls svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.75; }
.calculator-rail { display:grid; grid-auto-flow:column; grid-auto-columns:100%; gap:var(--space-6); list-style:none; margin:0; padding:var(--space-2) var(--space-2) var(--space-4); overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scroll-padding-inline:var(--space-2); scrollbar-color:var(--strong) var(--bg); scrollbar-width:thin; }
.calculator-shortcut { display:flex; flex-direction:column; min-width:0; padding:var(--space-6); margin:0; background:var(--tint); border-radius:0 28px 0 0; scroll-snap-align:start; }
.shortcut-link { display:flex; flex-direction:column; flex:1; color:inherit; text-decoration:none; }
.shortcut-link:hover { color:inherit; }
.shortcut-link:hover h3,.shortcut-link:hover .shortcut-cta { color:var(--link-hover); text-decoration:underline; }
.shortcut-cta { color:var(--link); }
.calculator-shortcut+li { margin-top:0; }
.calculator-shortcut h3 { font-size:1.2rem; line-height:1.2; min-height:0; margin:0 0 var(--space-3); }
.shortcut-context { font-size:1rem; min-height:0; line-height:1.5; margin-bottom:var(--space-4); }
.shortcut-amount { margin:0 0 var(--space-3); }
.shortcut-amount span { display:block; color:var(--muted); margin-bottom:var(--space-1); }
.shortcut-amount strong { font-size:clamp(1.6rem,2.8vw,2.6rem); font-weight:600; line-height:1.15; letter-spacing:-.025em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.calculator-shortcut .shortcut-amount strong { color:var(--primary); }
.shortcut-explanation { font-size:1rem; line-height:1.45; margin-bottom:var(--space-4); }
.shortcut-breakdown { margin:0 0 var(--space-6); }
.shortcut-breakdown figcaption { font-size:.875rem; color:var(--muted); margin-bottom:var(--space-3); }
.shortcut-concept+.shortcut-concept { margin-top:var(--space-4); }
.shortcut-concept-label { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:var(--space-1) var(--space-2); font-size:.875rem; line-height:1.4; }
.shortcut-concept-label span { flex:1 1 8rem; }
.shortcut-concept-label strong { flex:0 0 auto; white-space:nowrap; font-variant-numeric:tabular-nums; }
.shortcut-bar { display:block; width:100%; height:8px; margin-top:var(--space-2); }
.shortcut-bar-track { fill:var(--bar-track); }
.shortcut-bar-value { fill:var(--accent-strong); }
.shortcut-scenario { color:var(--muted); font-size:.875rem; line-height:1.5; margin-bottom:var(--space-5); }
.shortcut-cta { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); min-height:48px; margin-top:auto; padding-block:var(--space-3); border-top:1px solid var(--border); font-size:1rem; font-weight:600; text-decoration:none; }
.shortcut-cta:hover { text-decoration:underline; }
.shortcut-cta .arrow { flex-shrink:0; }
.shortcut-note { max-width:85ch; margin:var(--space-4) 0 0; }
.home-next-step .story { padding-top:0; }
@media (min-width:700px) {
  .home-intro { grid-template-columns:1.15fr 1fr; gap:var(--space-12); align-items:center; }
  .shortcut-link { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:var(--space-12); grid-template-areas:"title breakdown" "context breakdown" "amount breakdown" "explanation breakdown" "scenario breakdown" "cta cta"; }
  .shortcut-link h3 { grid-area:title; }
  .shortcut-context { grid-area:context; }
  .shortcut-amount { grid-area:amount; }
  .shortcut-explanation { grid-area:explanation; }
  .shortcut-scenario { grid-area:scenario; }
  .shortcut-breakdown { grid-area:breakdown; align-self:center; }
  .shortcut-cta { grid-area:cta; }
  .shortcut-amount strong { font-size:clamp(2rem,4vw,3.7rem); }
  .calculator-shortcut { padding:var(--space-8); }
}
@media (min-width:700px) and (max-width:999px) {
  .calculator-shortcut { padding:var(--space-4); }
}
@media (max-width:699px) {
  .home-intro { padding-block:var(--space-6); gap:var(--space-4); }
  .home-intro .lead { font-size:1.1rem; }
  .home-shortcuts { padding-block:var(--space-6); }
  .shortcut-heading h2 { font-size:1.8rem; }
  .shortcut-amount strong { font-size:2rem; }
  .calculator-shortcut { padding:var(--space-4); }
}

/* Overlay inactive examples to reserve the tallest height without exposing their links. */
.calculator-rail.is-enhanced { grid-auto-flow:row; grid-template-columns:minmax(0,1fr); overflow:visible; scroll-snap-type:none; }
.is-enhanced .calculator-shortcut { grid-area:1 / 1; visibility:hidden; pointer-events:none; }
.is-enhanced .calculator-shortcut.is-active { visibility:visible; pointer-events:auto; }
.is-enhanced .shortcut-link { transform:translateX(0); }
.is-enhanced.has-interacted .calculator-shortcut.is-active .shortcut-link { animation:shortcut-reveal 380ms cubic-bezier(.16,1,.3,1) both; }
@keyframes shortcut-reveal {
  from { opacity:0; transform:translateX(8px); }
  to { opacity:1; transform:translateX(0); }
}
@media (min-width:700px) {
  .is-enhanced .calculator-shortcut { padding-inline:var(--space-16); }
}
@media (max-width:699px) {
  .shortcut-controls button { top:24px; transform:none; }
  .is-enhanced .calculator-shortcut h3 { display:grid; place-items:center; min-height:48px; margin-inline:var(--space-10); text-align:center; }
}
@media (prefers-reduced-motion:reduce) {
  .is-enhanced.has-interacted .calculator-shortcut.is-active .shortcut-link { animation:none; }
}