/* Homepage stage selector (scripts/structure-pages.js stageSelect, assets/stage-select.js). Without JavaScript
   the panels are a plain list of cards. The theme script sets data-theme on <html> before paint, so the tab
   layout below applies from the first frame and nothing jumps when the script arrives. Only transform and
   opacity move; motion.css drops the moves under reduced motion and keeps the fades. */
.stage-select{--ss-ease:var(--spring,cubic-bezier(.22,1,.36,1));container:ss/inline-size}
.stage-select [data-stage=expecting]{--ss-ink:var(--blue-ink)}.stage-select [data-stage=baby]{--ss-ink:var(--green-ink)}.stage-select [data-stage=toddler]{--ss-ink:var(--yellow-ink)}.stage-select [data-stage=preschool]{--ss-ink:var(--orange-ink)}.stage-select [data-stage=primary]{--ss-ink:var(--purple-ink)}.stage-select [data-stage=family]{--ss-ink:var(--red-ink)}
.ss-tabs{display:none}
.ss-stack{display:grid;gap:var(--space-4)}
.ss-panel{display:grid;grid-template-rows:auto 1fr;min-width:0;border:3px solid var(--outline);border-radius:var(--radius);background:var(--card);overflow:hidden;box-shadow:var(--shadow-sm)}
.ss-scene{position:relative;display:block;aspect-ratio:2/1;border-bottom:3px solid var(--outline);background:linear-gradient(to top,color-mix(in srgb,var(--stage) 42%,var(--card)) 0 15%,color-mix(in srgb,var(--stage) 16%,var(--card)) 15%)}
.ss-float{position:absolute;inset:6px 8px 2px;display:block}
.ss-scene .ra-art{width:100%;height:100%;object-fit:contain;object-position:50% 100%}
.ss-copy{display:flex;flex-direction:column;gap:10px;padding:16px 16px 18px}
.ss-copy>*{margin:0}
.ss-eyebrow{color:var(--ss-ink);font:800 .875rem/1.2 var(--font-body)}
.ss-copy h3{font:800 1.375rem/1.15 var(--font-head)}
.ss-line{color:var(--muted);font-size:1rem;line-height:1.45}
.ss-steps{display:grid;gap:8px;padding:0;list-style:none}
.ss-step{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 14px;border:2px solid var(--outline);border-radius:16px;background:var(--card);color:var(--ink);text-decoration:none}
.ss-step>span:first-child{display:grid;gap:2px;flex:1;min-width:0}
.ss-step strong{font-weight:800;line-height:1.25}
.ss-step small{color:var(--muted);font-size:.8125rem;font-weight:700}
.ss-step-go{font-weight:800;color:var(--ss-ink)}
.ss-step:hover{border-color:var(--ss-ink)}.ss-step:hover strong{text-decoration:underline;text-underline-offset:3px}
.ss-all{margin-top:auto!important;padding-top:4px}
.ss-all a{display:inline-flex;align-items:center;min-height:44px;padding:8px 20px;border-radius:var(--radius-btn);background:var(--stage);color:var(--stage-on);font-weight:800;text-decoration:none;box-shadow:inset 0 -4px 0 rgba(0,0,0,.22)}
.ss-all a:hover{text-decoration:underline;text-underline-offset:3px}
.stage-select :is(.ss-step,.ss-all a,.ss-tab):focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* Tabs (scripted). */
:root[data-theme] .ss-tabs{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(6.5rem,1fr));gap:4px;padding:4px;border:3px solid var(--outline);border-radius:26px;background:var(--card)}
.ss-tab{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:8px 10px;border:0;border-radius:20px;background:transparent;color:var(--ink);font:800 .9375rem/1.1 var(--font-body);cursor:pointer;transition:color 200ms ease-out,background-color 200ms ease-out;-webkit-tap-highlight-color:transparent}
.ss-tab:not([aria-selected=true]):hover{background:color-mix(in srgb,var(--stage) 14%,transparent)}
/* The chosen tab paints its own fill once the pill has arrived, so its label always sits on a solid fill. */
.ss-tab[aria-selected=true]{color:var(--stage-on);background:var(--stage);box-shadow:inset 0 -4px 0 rgba(0,0,0,.22);transition:color 200ms ease-out,background-color 0s linear 410ms,box-shadow 0s linear 410ms}
.ss-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--stage);box-shadow:0 0 0 2px var(--card)}
.ss-tab[aria-selected=true] .ss-dot{background:currentColor;box-shadow:none}
/* Dark theme: the chosen tab's fill is close to the tab bar, so it gets a light edge. */
:root[data-theme=dark] .ss-tab[aria-selected=true]{box-shadow:inset 0 -4px 0 rgba(0,0,0,.22),0 0 0 2px var(--outline)}
.ss-pill{position:absolute;top:0;left:0;z-index:0;border-radius:20px;background:var(--stage);box-shadow:inset 0 -4px 0 rgba(0,0,0,.22);pointer-events:none;transition:transform 410ms var(--ss-ease),background-color 250ms ease-out}
.stage-select:not(.is-ready) .ss-pill{display:none}
@media(max-width:24.99em){.ss-dot{display:none}.ss-tab{padding-inline:6px}}
.stage-select.is-instant *{transition:none!important}

/* One panel at a time: the panels share one cell, so the box keeps the tallest one's height. */
:root[data-theme] .ss-stack{gap:0;margin-top:12px;border:3px solid var(--outline);border-radius:var(--radius);background:var(--card);overflow:hidden;box-shadow:var(--shadow-sm)}
:root[data-theme] .ss-panel{grid-area:1/1;border:0;border-radius:0;background:none;box-shadow:none;visibility:hidden;transition:visibility 0s linear 260ms}
:root[data-theme] .ss-panel.is-active{visibility:visible;transition-delay:0s}
:root[data-theme] .ss-panel:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
:root[data-theme] .ss-panel:not(.is-active,.is-primed) .ss-scene img{display:none}
:root[data-theme] .ss-panel .ra-art{opacity:0;transform:scale(1.04);transition:opacity 250ms ease-out,transform 250ms var(--ss-ease)}
:root[data-theme] .ss-panel.is-active .ra-art{opacity:1;transform:none;transition:opacity 400ms ease-out,transform 540ms var(--ss-ease)}
/* The old words are gone before the new ones start, so two stages never show at once. */
:root[data-theme] .ss-copy{opacity:0;transform:translateY(8px);transition:opacity 120ms ease-out,transform 120ms ease-out}
:root[data-theme] .is-active>.ss-copy{opacity:1;transform:none;transition:opacity 320ms ease-out 130ms,transform 400ms var(--ss-ease) 130ms}

@media(min-width:48em){:root[data-theme] .ss-tabs{grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr))}}
/* Side by side only when the section is wide enough at the chosen text size. */
@container ss (min-width:44rem){
  .ss-panel{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:none}
  .ss-scene{display:flex;align-items:center;justify-content:center;aspect-ratio:auto;min-height:15rem;border-bottom:0;border-right:3px solid var(--outline);background:color-mix(in srgb,var(--stage) 16%,var(--card))}
  .ss-float{position:relative;inset:auto;width:calc(100% - 32px);aspect-ratio:2/1}
  .ss-copy{padding:22px 24px 24px}
  .ss-copy h3{font-size:1.625rem}
}