/* MortgageMath US — components. Tokens live in tokens.css; nothing here hard-codes a colour. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--s-2)); interpolate-size: allow-keywords; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--c-bg); color: var(--c-text); font: 400 var(--t-base)/var(--lh-body) var(--f-body); font-feature-settings: "kern"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, h4 { font-family: var(--f-display); color: var(--c-ink); line-height: var(--lh-snug); letter-spacing: -.02em; margin: 0 0 var(--s-2); font-weight: 650; text-wrap: balance; }
h1 { font-size: var(--t-4xl); line-height: var(--lh-tight); letter-spacing: -.035em; font-weight: 700; }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }
p { margin: 0 0 var(--s-2); text-wrap: pretty; }
a { color: var(--c-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur-1) var(--ease-out); }
a:hover { color: var(--c-primary-hover); }
img, svg, video { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-xs); }
::selection { background: var(--c-primary-100); color: var(--c-ink); }
code, kbd { font-family: var(--f-mono); font-size: .9em; }
code { background: var(--c-primary-50); color: var(--c-primary-ink); padding: .1em .35em; border-radius: 6px; }
hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--s-4) 0; }
table { border-collapse: collapse; width: 100%; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--s-2); top: -100px; z-index: 100; background: var(--c-primary); color: var(--c-on-primary); padding: var(--s-1) var(--s-2); border-radius: var(--r-sm); font-weight: 600; }
.skip-link:focus { top: var(--s-1); }
main:focus { outline: none; }
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.icon { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
.num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: .95em; letter-spacing: -.01em; color: var(--c-ink); font-weight: 500; }
data.fact { font-variant-numeric: tabular-nums lining-nums; color: var(--c-ink); font-weight: 600; border-bottom: 1px dotted var(--c-primary-300); cursor: help; }
.is-planned { color: var(--c-subtle); }
.link-planned { color: inherit; border-bottom: 1px dashed var(--c-line-strong); }

/* ---------- Buttons, chips, badges ---------- */
.btn { --b: var(--c-primary); display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1); min-height: 44px; padding: 10px 20px; border-radius: var(--r-pill); border: 1px solid transparent; font: 600 var(--t-sm)/1 var(--f-display); letter-spacing: -.005em; text-decoration: none; white-space: nowrap; transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2), color var(--dur-2); }
.btn .icon { transition: transform var(--dur-2) var(--ease-out); }
.btn:hover .icon:last-child { transform: translateX(3px); }
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--g-primary); color: var(--c-on-primary); box-shadow: 0 1px 0 rgb(255 255 255 / .25) inset, 0 8px 20px -8px rgb(29 78 216 / .55); }
.btn--primary:hover { color: var(--c-on-primary); transform: translateY(-1px); box-shadow: 0 1px 0 rgb(255 255 255 / .25) inset, 0 12px 28px -8px rgb(29 78 216 / .6); }
.btn--ghost { background: var(--c-glass-strong); color: var(--c-primary-ink); border-color: var(--c-line-strong); }
.btn--ghost:hover { border-color: var(--c-primary-300); color: var(--c-primary); background: var(--c-primary-50); }
.btn--sm { min-height: 36px; padding: 8px 14px; font-size: var(--t-xs); }
.btn--lg { min-height: 52px; padding: 14px 26px; font-size: var(--t-base); }
.btn.is-disabled { opacity: .55; pointer-events: none; }
.linklike { background: none; border: 0; padding: 0; color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-pill); border: 1px solid var(--c-line); background: var(--c-glass-strong); color: var(--c-ink); transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2), background-color var(--dur-2); }
.icon-btn:hover { border-color: var(--c-primary-300); color: var(--c-primary); }
.icon-btn:active { transform: scale(.94); }
.icon-btn--glass { backdrop-filter: blur(var(--blur-1)); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--c-primary-50); color: var(--c-primary-ink); font: 600 var(--t-xs)/1.2 var(--f-body); white-space: nowrap; }
.chip--soft { background: var(--c-bg-tint); color: var(--c-muted); border: 1px dashed var(--c-line-strong); }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px; border-radius: var(--r-pill); font: 600 var(--t-xs)/1 var(--f-body); }
.badge--reviewed { background: var(--c-accent-50); color: var(--c-accent-ink); border: 1px solid var(--c-accent-100); }
.badge .icon { width: 16px; height: 16px; }
.kbd { display: inline-block; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--c-line-strong); border-bottom-width: 2px; background: var(--c-surface); color: var(--c-muted); font: 500 11px/1.3 var(--f-mono); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 var(--s-1); color: var(--c-primary); font: 600 var(--t-xs)/1.2 var(--f-display); letter-spacing: .08em; text-transform: uppercase; }
.eyebrow .icon { width: 16px; height: 16px; }
.eyebrow--pill { padding: 6px 12px 6px 8px; border-radius: var(--r-pill); background: var(--c-glass-strong); border: 1px solid var(--c-glass-border); box-shadow: var(--sh-1); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: 0; flex: none; }
.dot--blue, .seg-pi { background: var(--c-cat-1); }
.dot--mint, .seg-tax { background: var(--c-cat-2); }
.dot--violet, .seg-ins { background: var(--c-cat-3); }
.seg-pmi { background: var(--c-cat-4); }
.seg-hoa { background: var(--c-cat-5); }
.tone-blue { background: var(--c-primary-50); color: var(--c-primary); }
.tone-mint { background: var(--c-accent-50); color: var(--c-accent-ink); }
.tone-violet { background: var(--c-violet-50); color: var(--c-violet); }
.tone-amber { background: var(--c-amber-50); color: var(--c-amber); }
.tone-sky { background: var(--c-sky-50); color: var(--c-sky); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: var(--z-header); view-transition-name: site-header; }
.site-header::before { content: ""; position: absolute; inset: 0; background: var(--c-glass-strong); backdrop-filter: saturate(1.8) blur(var(--blur-2)); -webkit-backdrop-filter: saturate(1.8) blur(var(--blur-2)); border-bottom: 1px solid var(--c-line); transform-origin: top; transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3); }
.site-header.is-scrolled::before { transform: scaleY(.88); box-shadow: 0 10px 30px -18px rgb(11 26 58 / .25); }
.site-header__bar { position: relative; display: flex; align-items: center; gap: var(--s-3); height: var(--header-h); max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); transition: transform var(--dur-3) var(--ease-out); }
.site-header.is-scrolled .site-header__bar { transform: translateY(-4px); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--c-ink); flex: none; }
.brand__mark { width: 36px; height: 36px; transition: transform var(--dur-3) var(--ease-out); }
.site-header.is-scrolled .brand__mark { transform: scale(.9); }
.brand__name { font: 700 1.125rem/1 var(--f-display); letter-spacing: -.03em; }
.brand__us { margin-left: 1px; padding: 2px 6px; border-radius: 6px; background: var(--c-accent-50); color: var(--c-accent-ink); font-size: .7em; letter-spacing: .02em; vertical-align: 2px; }
.nav { flex: 1; }
.nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__link { display: inline-flex; align-items: center; gap: 4px; padding: 10px 14px; border-radius: var(--r-pill); border: 0; background: none; color: var(--c-text); font: 500 var(--t-sm)/1 var(--f-display); text-decoration: none; transition: background-color var(--dur-2), color var(--dur-2); }
.nav__link:hover, .nav__link[aria-expanded="true"], .nav__link.is-active { background: var(--c-primary-50); color: var(--c-primary); }
.nav__chev { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease-out); }
.nav__trigger[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }
.has-mega { position: static; }
.mega { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(var(--header-h) - 6px); max-width: var(--container); margin-inline: auto; padding: var(--s-3); border-radius: var(--r-xl); background: var(--c-glass-strong); backdrop-filter: blur(var(--blur-3)) saturate(1.6); -webkit-backdrop-filter: blur(var(--blur-3)) saturate(1.6); border: 1px solid var(--c-glass-border); box-shadow: var(--sh-3); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3); }
.has-mega:hover .mega, .has-mega:focus-within .mega, .has-mega.is-open .mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.js .has-mega:not(.is-open):not(:hover) .mega { opacity: 0; visibility: hidden; transform: translateY(8px); }
.mega__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-2); }
.mega__col { display: grid; grid-template-columns: 40px 1fr; grid-template-areas: "icon hub" "desc desc" "links links"; align-items: center; column-gap: 12px; padding: var(--s-2); border-radius: var(--r-lg); transition: background-color var(--dur-2); }
.mega__col:hover { background: var(--c-bg-soft); }
.mega__icon { grid-area: icon; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); }
.mega__hub { grid-area: hub; font: 650 var(--t-base)/1.2 var(--f-display); color: var(--c-ink); text-decoration: none; }
a.mega__hub:hover { color: var(--c-primary); }
.mega__desc { grid-area: desc; margin: 10px 0 8px; color: var(--c-muted); font-size: var(--t-xs); line-height: 1.45; }
.mega__links { grid-area: links; list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: var(--t-sm); }
.mega__links a, .mega__links span { display: block; padding: 4px 0; text-decoration: none; color: var(--c-text); }
.mega__links a:hover { color: var(--c-primary); }
.mega__foot { display: flex; gap: var(--s-2); margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--c-line); }
.mega__cta { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill); background: var(--c-primary-50); font: 600 var(--t-sm)/1 var(--f-display); text-decoration: none; }
.site-header__actions { display: flex; align-items: center; gap: var(--s-1); margin-left: auto; }
.search-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 14px; border-radius: var(--r-pill); border: 1px solid var(--c-line); background: var(--c-glass-strong); color: var(--c-muted); font-size: var(--t-sm); transition: border-color var(--dur-2), box-shadow var(--dur-2); }
.search-btn:hover { border-color: var(--c-primary-300); box-shadow: var(--sh-1); color: var(--c-ink); }
.theme-sun { display: none; }
[data-theme="dark"] .theme-sun { display: block; }
[data-theme="dark"] .theme-moon { display: none; }
.menu-btn { display: none; }
.menu-close { display: none; }
.nav-open .menu-open { display: none; }
.nav-open .menu-close { display: block; }
.scroll-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--c-primary), var(--c-accent)); transform-origin: left; transform: scaleX(0); }
@supports (animation-timeline: scroll()) {
  .t-guide .scroll-progress span, .t-post .scroll-progress span, .t-hub .scroll-progress span, .t-state .scroll-progress span, .t-market .scroll-progress span, .t-tool .scroll-progress span, .t-page .scroll-progress span { animation: grow-x linear both; animation-timeline: scroll(root); }
}
@keyframes grow-x { to { transform: scaleX(1); } }

/* ---------- Blobs, grid, motif ---------- */
.blob { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform; }
.blob--a { width: 52vmax; height: 52vmax; right: -14vmax; top: -24vmax; background: radial-gradient(circle, rgb(147 180 245 / .42), transparent 62%); animation: drift-a 26s var(--ease-in-out) infinite alternate; }
.blob--b { width: 44vmax; height: 44vmax; left: -16vmax; bottom: -26vmax; background: radial-gradient(circle, rgb(110 231 183 / .32), transparent 62%); animation: drift-b 30s var(--ease-in-out) infinite alternate; }
.blob--c { width: 30vmax; height: 30vmax; left: 38%; top: -12vmax; background: radial-gradient(circle, rgb(196 181 253 / .3), transparent 62%); animation: drift-c 22s var(--ease-in-out) infinite alternate; }
.blob--d { width: 24vmax; height: 24vmax; right: 18%; bottom: -14vmax; background: radial-gradient(circle, rgb(125 211 252 / .28), transparent 62%); animation: drift-a 34s var(--ease-in-out) infinite alternate-reverse; }
@keyframes drift-a { to { transform: translate3d(-6vmax, 5vmax, 0) scale(1.12) rotate(18deg); } }
@keyframes drift-b { to { transform: translate3d(7vmax, -4vmax, 0) scale(.92) rotate(-14deg); } }
@keyframes drift-c { to { transform: translate3d(-5vmax, 6vmax, 0) scale(1.18); } }
.motif { display: block; width: 100%; height: auto; overflow: visible; }
.m-grid path { stroke: var(--c-primary-100); stroke-width: 1; opacity: .7; }
.m-lines path, .m-lines rect, .m-lines circle { fill: none; stroke: var(--c-primary); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.m-lines .m-dim { stroke: var(--c-primary-300); stroke-width: 1.6; }
.m-lines .m-alt { stroke: var(--c-accent); }
.m-lines .m-fill { fill: var(--c-primary-50); stroke: none; }
.m-lines .m-area--a { fill: rgb(29 78 216 / .09); stroke: none; }
.m-lines .m-area--b { fill: rgb(16 185 129 / .12); stroke: none; }
.m-lines .m-dot { fill: var(--c-accent); stroke: var(--c-bg); stroke-width: 3; }
.js [data-draw] [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js [data-draw].is-drawn [pathLength] { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur-draw) var(--ease-out); transition-delay: calc(var(--d, 0) * 110ms); }
.js [data-draw] .m-fill, .js [data-draw] .m-area--a, .js [data-draw] .m-area--b, .js [data-draw] .m-dot { opacity: 0; transition: opacity var(--dur-5) var(--ease-out) 900ms; }
.js [data-draw].is-drawn .m-fill, .js [data-draw].is-drawn .m-area--a, .js [data-draw].is-drawn .m-area--b, .js [data-draw].is-drawn .m-dot { opacity: 1; }
.m-float { animation: bob 6s var(--ease-in-out) infinite alternate; transform-box: fill-box; }
@keyframes bob { to { transform: translateY(-8px) rotate(-6deg); } }

/* ---------- Hero slider ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: var(--s-4) 0 var(--s-12); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--g-grid); -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 85%); mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 85%); }
.hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-1) var(--s-3); margin-bottom: var(--s-3); }
.hero__h1 { margin: 0; font-size: var(--t-lg); line-height: 1.3; letter-spacing: -.015em; font-weight: 600; color: var(--c-muted); max-width: 40ch; view-transition-name: page-title; }
.hero__rate { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; padding: 8px 14px; border-radius: var(--r-pill); background: var(--c-glass-strong); border: 1px solid var(--c-glass-border); box-shadow: var(--sh-1); font-size: var(--t-xs); color: var(--c-muted); backdrop-filter: blur(var(--blur-1)); }
.hero__rate strong { font-family: var(--f-mono); color: var(--c-ink); font-weight: 500; }
.pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); }
.pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--c-accent); animation: ping 2.4s var(--ease-out) infinite; }
@keyframes ping { 70%, 100% { transform: scale(2.6); opacity: 0; } }
.slider { position: relative; }
.slider__track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: var(--s-4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.slider__track::-webkit-scrollbar { display: none; }
.slide { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: var(--s-6); min-height: 470px; scroll-snap-align: start; }
.js .slider__track { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; touch-action: pan-y; }
.js .slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: scale(1.025); transition: opacity var(--dur-5) var(--ease-out), transform 1400ms var(--ease-out), visibility 0s linear var(--dur-5); }
.js .slide.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; z-index: 1; }
.slide__title { font-size: var(--t-4xl); line-height: var(--lh-tight); letter-spacing: -.035em; margin: var(--s-2) 0 var(--s-1); max-width: 16ch; }
.slide__num { margin: 0 0 var(--s-2); font: 500 var(--t-display)/1 var(--f-mono); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.slide__num span { display: inline-block; background: linear-gradient(100deg, var(--c-primary) 10%, #2563eb 45%, var(--c-accent) 95%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.slide__note { max-width: 52ch; color: var(--c-muted); font-size: var(--t-sm); line-height: 1.6; margin-bottom: var(--s-3); }
.slide__art { position: relative; max-width: 520px; justify-self: center; width: 100%; }
.art__svg { padding: var(--s-3); border-radius: var(--r-xl); background: radial-gradient(120% 90% at 100% 0%, var(--c-primary-50), transparent 60%), radial-gradient(90% 80% at 0% 100%, var(--c-accent-50), transparent 60%), var(--c-glass-strong); border: 1px solid var(--c-glass-border); box-shadow: var(--sh-3); }
.glass-chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--r-md); background: var(--c-glass-strong); border: 1px solid var(--c-glass-border); box-shadow: var(--sh-2); backdrop-filter: blur(var(--blur-2)); -webkit-backdrop-filter: blur(var(--blur-2)); font-size: var(--t-xs); color: var(--c-muted); white-space: nowrap; transition: transform 600ms var(--ease-out); }
.glass-chip b { font: 500 var(--t-sm)/1 var(--f-mono); color: var(--c-ink); }
.glass-chip--a { left: -4%; top: 8%; }
.glass-chip--b { right: -2%; top: 38%; }
.glass-chip--c { left: 8%; bottom: 4%; }
.js .slide .glass-chip { opacity: 0; translate: 0 12px; transition: opacity var(--dur-4) var(--ease-out), translate var(--dur-4) var(--ease-out), transform 600ms var(--ease-out); }
.js .slide.is-active .glass-chip { opacity: 1; translate: 0 0; transition-delay: 700ms; }
.js .slide.is-active .glass-chip--b { transition-delay: 850ms; }
.js .slide.is-active .glass-chip--c { transition-delay: 1000ms; }
.slider__controls { position: relative; z-index: 2; display: flex; align-items: center; gap: var(--s-1); margin-top: var(--s-3); }
.slider__dots { display: flex; gap: 6px; padding: 0 var(--s-1); }
.slider__dot { width: 44px; height: 44px; border: 0; padding: 0; background: none; display: grid; place-items: center; }
.slider__dot span { display: block; width: 28px; height: 6px; border-radius: var(--r-pill); background: var(--c-primary-100); overflow: hidden; position: relative; }
.slider__dot span::after { content: ""; position: absolute; inset: 0; background: var(--g-primary); transform: scaleX(0); transform-origin: left; }
.slider__dot.is-active span::after { transform: scaleX(1); transition: transform 6s linear; }
.slider.is-paused .slider__dot.is-active span::after, .slider.is-static .slider__dot.is-active span::after { transition: none; transform: scaleX(1); }
.slider__pause .i-play { display: none; fill: currentColor; stroke: none; }
.slider.is-paused .slider__pause .i-play { display: block; }
.slider.is-paused .slider__pause .i-pause { display: none; }
html:not(.js) .slider__controls { display: none; }

/* ---------- Sections ---------- */
.section { padding-block: var(--s-10); }
.section--flush { padding-top: var(--s-4); }
.section--tint { position: relative; isolation: isolate; background: var(--c-bg-soft); }
.section--tint::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--g-grid); -webkit-mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent); }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-2) var(--s-6); margin-bottom: var(--s-5); }
.section-head h2 { font-size: var(--t-3xl); line-height: 1.12; letter-spacing: -.03em; margin: 0; max-width: 22ch; }
.section-head__lede { max-width: 50ch; margin: 0; color: var(--c-muted); }
.section-head--tight { margin-bottom: var(--s-3); }
.section-head--tight h2 { font-size: var(--t-2xl); }

/* ---------- Cards ---------- */
.card { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 6px; padding: var(--s-3); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--c-glass-strong), var(--c-glass)); border: 1px solid var(--c-glass-border); box-shadow: var(--sh-2); color: var(--c-text); text-decoration: none; overflow: hidden; }
.card--link { transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); }
.card--link:hover { color: var(--c-text); transform: translateY(-4px); box-shadow: var(--sh-3); }
.card--link::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--g-sweep); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity var(--dur-3) var(--ease-out); pointer-events: none; }
.card--link:hover::before, .card--link:focus-visible::before { opacity: 1; animation: sweep 3s linear infinite; }
@keyframes sweep { to { --angle: 360deg; } }
.card--link::after { content: ""; position: absolute; z-index: -1; left: -170px; top: -170px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgb(147 180 245 / .3), transparent 62%); transform: translate(var(--mx, -400px), var(--my, -400px)); opacity: 0; transition: opacity var(--dur-3); pointer-events: none; }
.card--link:hover::after { opacity: 1; }
.card--planned { box-shadow: var(--sh-1); }
.card__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-sm); margin-bottom: var(--s-1); }
.card__icon--lg { width: 52px; height: 52px; border-radius: var(--r-md); }
.card__icon .icon { width: 22px; height: 22px; }
.card__eyebrow { color: var(--c-subtle); font: 600 11px/1.2 var(--f-display); letter-spacing: .08em; text-transform: uppercase; }
.card__title { color: var(--c-ink); font: 650 var(--t-lg)/1.3 var(--f-display); letter-spacing: -.02em; }
.card__title--lg { font-size: var(--t-xl); }
.card__desc { color: var(--c-muted); font-size: var(--t-sm); line-height: 1.55; }
.card__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s-1); margin-top: auto; padding-top: var(--s-2); color: var(--c-subtle); font-size: var(--t-xs); }
.card__go { display: inline-flex; align-items: center; gap: 6px; color: var(--c-primary); font: 600 var(--t-sm)/1 var(--f-display); }
.card__arrow { transition: transform var(--dur-2) var(--ease-out); }
.card--link:hover .card__arrow { transform: translateX(4px); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--s-2); }
.card-grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--s-3); }

/* Trust strip and stat cards */
.trust { position: relative; z-index: 2; margin-top: calc(-1 * var(--s-8)); }
.trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.stat-card { position: relative; padding: var(--s-3); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--c-glass-strong), var(--c-glass)); border: 1px solid var(--c-glass-border); box-shadow: var(--sh-2); backdrop-filter: blur(var(--blur-2)); -webkit-backdrop-filter: blur(var(--blur-2)); }
.stat-card::before { content: ""; position: absolute; left: var(--s-3); right: var(--s-3); top: 0; height: 3px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--c-primary), var(--c-accent)); opacity: .85; }
.stat-card__num { margin: 0 0 6px; font: 500 clamp(1.6rem, 1.3rem + 1.1vw, 2.35rem)/1.05 var(--f-mono); letter-spacing: -.04em; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.stat-card__num small, .stat-card__unit { font-size: .42em; color: var(--c-muted); letter-spacing: 0; font-family: var(--f-body); font-weight: 500; margin-left: 4px; }
.stat-card__label { margin: 0 0 var(--s-1); color: var(--c-text); font-size: var(--t-sm); font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.stat-card__src { margin: 0; color: var(--c-subtle); font-size: var(--t-xs); line-height: 1.4; }
.stat-card__src a { color: inherit; }
.stat-card__src a:hover { color: var(--c-primary); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: var(--s-2); margin-bottom: var(--s-4); }
.js [data-count]:not(.is-counted) { opacity: 0; }
.stat-card__num [data-count] { display: inline-block; }
[data-count] { transition: opacity var(--dur-2); }

/* Bento */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-2); }
.bento__item { grid-column: span 2; min-height: 260px; }
.bento__item--1 { grid-row: span 2; background: linear-gradient(160deg, var(--c-primary-50), var(--c-glass-strong) 45%, var(--c-accent-50)); }
.bento__item--3 { grid-column: 1 / span 2; }
.bento__item--4 { grid-column: 5 / span 2; }
.bento__kids { list-style: none; margin: var(--s-1) 0 0; padding: 0; display: grid; gap: 6px; font-size: var(--t-sm); color: var(--c-text); }
.bento__kids li { display: flex; gap: 8px; align-items: baseline; }
.bento__art { margin-top: auto; padding-top: var(--s-2); }
.bento__art .motif { max-height: 190px; opacity: .9; }
.bento__kids .icon { width: 15px; height: 15px; color: var(--c-accent-ink); flex: none; transform: translateY(2px); }

/* ---------- State tile map ---------- */
.map-wrap { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--s-5); align-items: center; }
.tile-map { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); grid-template-rows: repeat(8, auto); gap: clamp(3px, .6vw, 7px); }
.tile { position: relative; grid-column: var(--c); grid-row: var(--r); aspect-ratio: 1; display: grid; place-items: center; border-radius: clamp(5px, .9vw, 11px); font: 500 clamp(9px, .55rem + .3vw, 13px)/1 var(--f-mono); color: var(--c-ink); text-decoration: none; background: var(--c-seq-1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .5); transition: transform var(--dur-2) var(--ease-out); cursor: pointer; }
.tile::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; box-shadow: 0 0 0 2px var(--c-primary), 0 10px 26px -6px rgb(29 78 216 / .6); opacity: 0; transition: opacity var(--dur-2); pointer-events: none; }
.tile:hover, .tile:focus-visible, .tile.is-hot { transform: translateY(-3px) scale(1.08); z-index: 2; color: var(--c-ink); }
.tile:hover::after, .tile:focus-visible::after, .tile.is-hot::after { opacity: 1; }
.tile:focus-visible { box-shadow: none; }
.tile.b1 { background: var(--c-seq-1); }
.tile.b2 { background: var(--c-seq-2); }
.tile.b3 { background: var(--c-seq-3); }
.tile.b4 { background: var(--c-seq-4); color: #fff; }
.tile.b5 { background: var(--c-seq-5); color: #fff; }
.tile.b4:hover, .tile.b5:hover, .tile.b4.is-hot, .tile.b5.is-hot { color: #fff; }
.tile.is-built::before { content: ""; position: absolute; top: 12%; right: 12%; width: 18%; height: 18%; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 0 2px #fff; }
.map-panel { gap: var(--s-1); }
.map-panel__stats { display: grid; gap: var(--s-1); margin: var(--s-1) 0; }
.map-panel__stats div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); padding: 10px 0; border-bottom: 1px solid var(--c-line); }
.map-panel__stats dt { color: var(--c-muted); font-size: var(--t-sm); }
.map-panel__stats dd { margin: 0; font: 500 var(--t-xl)/1 var(--f-mono); color: var(--c-ink); letter-spacing: -.03em; }
.map-panel__src { font-size: var(--t-xs); color: var(--c-subtle); }
.state-select label { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--c-ink); margin-bottom: 6px; }
.state-select__row { display: flex; gap: var(--s-1); }
select, input[type="text"], input[type="search"], input[type="number"], input[type="password"], input[type="email"] { min-height: 44px; padding: 8px 12px; border-radius: var(--r-sm); border: 1px solid var(--c-line-strong); background: var(--c-surface); color: var(--c-ink); transition: border-color var(--dur-2), box-shadow var(--dur-2); }
select { flex: 1; min-width: 0; padding-right: 32px; }
select:focus-visible, input:focus-visible { border-color: var(--c-primary); box-shadow: var(--sh-glow); }
.legend { display: flex; align-items: center; gap: 4px; margin-top: var(--s-2); font-size: var(--t-xs); color: var(--c-subtle); }
.legend i { width: 26px; height: 10px; border-radius: 3px; }
.legend .b1 { background: var(--c-seq-1); } .legend .b2 { background: var(--c-seq-2); } .legend .b3 { background: var(--c-seq-3); } .legend .b4 { background: var(--c-seq-4); } .legend .b5 { background: var(--c-seq-5); }
.loc-lists { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s-6); margin-top: var(--s-8); }
.pill-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pill { display: inline-block; padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid var(--c-line); background: var(--c-surface); font-size: var(--t-sm); text-decoration: none; color: var(--c-text); transition: border-color var(--dur-2), color var(--dur-2), transform var(--dur-2) var(--ease-out); }
a.pill:hover { border-color: var(--c-primary-300); color: var(--c-primary); transform: translateY(-2px); }
.pill.is-planned { border-style: dashed; }

/* ---------- Tools showcase ---------- */
.tools-show { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s-3); align-items: stretch; }
.mini-calc { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; gap: var(--s-3); padding: var(--s-4); background: linear-gradient(160deg, var(--c-glass-strong), var(--c-primary-50) 70%, var(--c-accent-50)); }
.mini-calc__head { grid-column: 1 / -1; }
.mini-calc__head h3 { margin: 0; font-size: var(--t-2xl); }
.mini-calc__fields { display: grid; gap: var(--s-3); align-content: center; }
.mini-calc__out { display: flex; flex-direction: column; justify-content: center; gap: var(--s-1); padding: var(--s-3); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--sh-1); border: 1px solid var(--c-line); }
.mini-calc__label { margin: 0; color: var(--c-muted); font-size: var(--t-sm); }
.mini-calc__total { margin: 0; font: 500 clamp(2rem, 1.6rem + 1.6vw, 3rem)/1 var(--f-mono); letter-spacing: -.05em; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.mini-chart { width: 100%; height: 130px; margin: var(--s-1) 0; }
.mini-chart__a { fill: none; stroke: var(--c-accent); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.mini-chart__b { fill: rgb(29 78 216 / .1); stroke: var(--c-primary); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.mini-calc__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 var(--s-1); font-size: var(--t-xs); color: var(--c-muted); }
.tools-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.tool-card { gap: 4px; padding: var(--s-2) var(--s-3) var(--s-3); }
.tool-card .card__title { font-size: var(--t-base); }
.tool-card .card__desc { font-size: var(--t-xs); }
.tool-card .chip { align-self: flex-start; margin-top: 6px; }
.tool-preview { width: 100%; max-width: 120px; height: 64px; margin-bottom: 4px; }
.tool-preview * { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tool-preview .tp-track { stroke: var(--c-primary-100); stroke-width: 9; }
.tool-preview circle.tp-a, .tool-preview circle.tp-b, .tool-preview circle.tp-c { stroke-width: 9; stroke-linecap: butt; transform: rotate(-90deg); transform-origin: 60px 40px; }
.tool-preview .tp-a { stroke: var(--c-primary); }
.tool-preview .tp-b { stroke: var(--c-accent); }
.tool-preview .tp-c { stroke: var(--c-cat-3); }
.tool-preview .tp-bar { stroke: var(--c-primary); stroke-width: 10; }
.tool-preview .tp-fill { fill: rgb(29 78 216 / .12); stroke: none; }
.tool-preview .tp-dot { fill: var(--c-accent); stroke: none; }
.tool-preview .tp-s1 { fill: var(--c-primary); stroke: none; } .tool-preview .tp-s2 { fill: var(--c-accent); stroke: none; } .tool-preview .tp-s3 { fill: var(--c-cat-3); stroke: none; }
.tools-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--s-3); margin-bottom: var(--s-8); }
.tool-card--lg { padding: var(--s-4); }
.tool-card--lg .tool-preview { position: absolute; right: var(--s-3); top: var(--s-3); width: 110px; opacity: .9; }

/* Carousel */
.carousel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, calc((100% - 3 * var(--s-3)) / 4)); gap: var(--s-3); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: var(--s-1) var(--s-1) var(--s-3); margin: calc(-1 * var(--s-1)); scrollbar-width: thin; scrollbar-color: var(--c-primary-200) transparent; }
.carousel__item { scroll-snap-align: start; min-height: 220px; }
.carousel-nav { display: flex; gap: var(--s-1); }
.related { padding-block: var(--s-6) var(--s-10); }
.related h2 { font-size: var(--t-2xl); margin: 0; }

/* FAQ */
.faq__list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); align-items: start; }
.faq__item { border-radius: var(--r-md); border: 1px solid var(--c-line); background: var(--c-surface); box-shadow: var(--sh-1); margin-bottom: var(--s-1); transition: border-color var(--dur-2), box-shadow var(--dur-2); }
.faq__item[open] { border-color: var(--c-primary-200); box-shadow: var(--sh-2); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-2) var(--s-3); cursor: pointer; list-style: none; font: 600 var(--t-base)/1.4 var(--f-display); color: var(--c-ink); letter-spacing: -.01em; border-radius: var(--r-md); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__chev { width: 20px; height: 20px; color: var(--c-primary); transition: transform var(--dur-3) var(--ease-out); }
.faq__item[open] .faq__chev { transform: rotate(180deg); }
.faq__item::details-content { block-size: 0; overflow-y: clip; transition: block-size var(--dur-3) var(--ease-out), content-visibility var(--dur-3) allow-discrete; }
.faq__item[open]::details-content { block-size: auto; }
.faq__a { padding: 0 var(--s-3) var(--s-2); color: var(--c-text); }
.faq__a p:last-child { margin-bottom: 0; }
.faq__sources { margin-top: var(--s-3); font-size: var(--t-xs); color: var(--c-subtle); }

/* ---------- Page band (hubs, guides, locations, tools) ---------- */
.band { position: relative; isolation: isolate; overflow: hidden; padding: var(--s-4) 0 var(--s-6); border-bottom: 1px solid var(--c-line); }
.band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--g-grid); -webkit-mask-image: linear-gradient(180deg, #000, transparent 95%); mask-image: linear-gradient(180deg, #000, transparent 95%); }
.band__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.band__bg .blob--a { width: 40vmax; height: 40vmax; top: -22vmax; }
.band__bg .blob--b { width: 30vmax; height: 30vmax; bottom: -20vmax; left: -10vmax; }
.band__inner { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s-6); align-items: center; }
.band__title { margin: var(--s-1) 0 var(--s-2); max-width: 20ch; view-transition-name: page-title; }
.band__lede { max-width: 60ch; color: var(--c-muted); font-size: var(--t-lg); line-height: 1.55; }
.band__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); margin-top: var(--s-2); color: var(--c-muted); font-size: var(--t-xs); }
.band__meta .icon { width: 16px; height: 16px; margin-right: 4px; }
.byline, .meta-item { display: inline-flex; align-items: center; gap: 4px; }
.byline .icon, .meta-item .icon { margin-right: 2px; }
.band__aside { position: relative; display: grid; justify-items: end; }
.band__motif { max-width: 360px; opacity: .95; }
.stat-card--band { position: absolute; left: 0; bottom: -4px; max-width: 280px; }
.band--short { padding-bottom: var(--s-4); }
.band__actions { display: flex; gap: var(--s-1); flex-wrap: wrap; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; font-size: var(--t-xs); }
.crumbs li { display: inline-flex; align-items: center; gap: 2px; color: var(--c-muted); }
.crumbs a { color: var(--c-muted); text-decoration: none; padding: 4px 2px; }
.crumbs a:hover { color: var(--c-primary); }
.crumbs__sep { width: 14px; height: 14px; color: var(--c-line-strong); }
.crumbs [aria-current] { color: var(--c-ink); font-weight: 500; }

/* ---------- Article layout ---------- */
.page-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-4); padding-block: var(--s-6) var(--s-4); }
.prose-col { grid-column: 1 / span 8; min-width: 0; }
.side-col { grid-column: 10 / span 3; }
.prose { max-width: var(--measure); }
.prose--wide { max-width: 80ch; }
.prose h2 { margin-top: var(--s-8); font-size: var(--t-2xl); scroll-margin-top: calc(var(--header-h) + var(--s-2)); }
.prose h3 { margin-top: var(--s-5); }
.prose h2, .prose h3, .key-facts h2, .faq h2, .sources h2, .hub-children h2 { position: relative; }
.anchor { position: absolute; left: -1.1em; top: 0; padding-right: .3em; color: var(--c-primary-300); text-decoration: none; opacity: 0; transition: opacity var(--dur-2); }
h2:hover > .anchor, h3:hover > .anchor, .anchor:focus { opacity: 1; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 var(--s-3); }
.prose li { margin-bottom: var(--s-1); padding-left: 4px; }
.prose ul li::marker { color: var(--c-primary); }
.prose ol li::marker { color: var(--c-primary); font-family: var(--f-mono); font-weight: 500; }
.prose blockquote { margin: var(--s-3) 0; padding: var(--s-2) var(--s-3); border-left: 3px solid var(--c-primary-300); background: var(--c-bg-soft); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--c-muted); }
.formula { margin: var(--s-3) 0; padding: var(--s-3); border-radius: var(--r-md); background: var(--c-bg-soft); border: 1px solid var(--c-line); font: 500 var(--t-lg)/1.4 var(--f-mono); color: var(--c-ink); text-align: center; overflow-x: auto; }
.prose a.ext::after { content: "↗"; font-size: .75em; margin-left: 2px; vertical-align: 2px; }
.quick { position: relative; padding: var(--s-4); margin-bottom: var(--s-4); border-radius: var(--r-xl); background: var(--g-quick); border: 1px solid var(--c-primary-100); box-shadow: var(--sh-2); overflow: hidden; }
.quick::after { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgb(16 185 129 / .18), transparent 65%); pointer-events: none; }
.quick__label { display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--s-2); padding: 6px 12px; border-radius: var(--r-pill); background: var(--c-surface); color: var(--c-primary); font: 600 var(--t-xs)/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; box-shadow: var(--sh-1); }
.quick__body { font-size: var(--t-lg); line-height: 1.6; color: var(--c-ink); }
.quick__body p:last-child { margin-bottom: 0; }
.key-facts h2, .faq h2, .sources h2, .hub-children h2 { font-size: var(--t-2xl); margin-top: var(--s-6); }
.callout { display: grid; grid-template-columns: 40px 1fr; gap: var(--s-2); margin: var(--s-4) 0; padding: var(--s-3); border-radius: var(--r-lg); border: 1px solid var(--c-line); background: var(--c-surface); box-shadow: var(--sh-1); }
.callout__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); }
.callout__title { margin: 0 0 6px; font: 650 var(--t-base)/1.3 var(--f-display); color: var(--c-ink); }
.callout__body > :last-child { margin-bottom: 0; }
.callout--tip { border-color: var(--c-accent-100); background: linear-gradient(180deg, var(--c-accent-50), var(--c-surface)); }
.callout--tip .callout__icon { background: var(--c-accent-100); color: var(--c-accent-ink); }
.callout--warning { border-color: #fde3c4; background: linear-gradient(180deg, var(--c-warn-50), var(--c-surface)); }
.callout--warning .callout__icon { background: #fde9cf; color: var(--c-warn); }
.callout--rule { border-color: var(--c-primary-100); background: linear-gradient(180deg, var(--c-primary-50), var(--c-surface)); }
.callout--rule .callout__icon { background: var(--c-primary-100); color: var(--c-primary); }
.callout--note .callout__icon { background: var(--c-sky-50); color: var(--c-sky); }
.pull { margin: var(--s-6) 0; padding: var(--s-4) 0 var(--s-4) var(--s-4); border-left: 4px solid transparent; border-image: linear-gradient(180deg, var(--c-primary), var(--c-accent)) 1; }
.pull blockquote { margin: 0; }
.pull blockquote p { margin: 0; font: 500 var(--t-3xl)/1.1 var(--f-mono); letter-spacing: -.04em; color: var(--c-ink); }
.pull figcaption { margin-top: var(--s-1); color: var(--c-muted); font-size: var(--t-sm); max-width: 52ch; }
.example { margin: var(--s-4) 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); background: var(--c-bg-soft); border: 1px dashed var(--c-primary-200); position: relative; overflow: hidden; }
.example::before { content: ""; position: absolute; inset: 0; background: var(--g-grid); opacity: .7; z-index: 0; pointer-events: none; }
.example > * { position: relative; }
.example__label { display: flex; align-items: flex-start; gap: 8px; color: var(--c-primary); font: 600 var(--t-xs)/1.45 var(--f-display); letter-spacing: .06em; text-transform: uppercase; }
.example__label > .icon { flex: none; margin-top: .1em; }
.steps, .prose .steps { list-style: none; padding: 0; margin: var(--s-3) 0 var(--s-4); display: grid; gap: var(--s-2); }
.prose .steps li { padding-left: 0; margin: 0; }
.step { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: var(--s-2); padding: var(--s-2) var(--s-3) var(--s-2) var(--s-2); border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--sh-1); }
.step__n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--g-primary); color: #fff; font: 500 var(--t-base)/1 var(--f-mono); }
.step__name { margin: 2px 0 4px; font: 650 var(--t-base)/1.35 var(--f-display); color: var(--c-ink); }
.step p:last-child { margin-bottom: 0; }
.calc-embed { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: var(--s-3); margin: var(--s-4) 0; padding: var(--s-3); border-radius: var(--r-lg); background: linear-gradient(120deg, var(--c-primary-50), var(--c-surface) 60%); border: 1px solid var(--c-primary-100); text-decoration: none; color: var(--c-text); box-shadow: var(--sh-2); position: relative; isolation: isolate; overflow: hidden; }
.calc-embed__text { display: grid; gap: 4px; font-size: var(--t-sm); }
.calc-embed__title { font: 650 var(--t-lg)/1.25 var(--f-display); color: var(--c-ink); }
.calc-embed .eyebrow { margin: 0; }
.hub-children .card-grid { margin-top: var(--s-2); }
.sources__list { padding-left: 1.4em; font-size: var(--t-sm); color: var(--c-muted); }
.sources__list li { margin-bottom: 6px; }
.sources__when { color: var(--c-subtle); }
.sources__reviewed { font-size: var(--t-xs); line-height: 1.8; color: var(--c-subtle); margin-top: var(--s-2); }
.sources__reviewed .badge { margin-right: var(--s-1); vertical-align: middle; }
.toc { position: sticky; top: calc(var(--header-h) + var(--s-3)); padding: var(--s-3); border-radius: var(--r-lg); background: var(--c-glass-strong); border: 1px solid var(--c-line); box-shadow: var(--sh-1); margin-bottom: var(--s-3); }
.toc__h { margin: 0 0 var(--s-1); font: 600 var(--t-xs)/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--c-subtle); }
.toc__progress { height: 3px; border-radius: 3px; background: var(--c-primary-50); overflow: hidden; margin-bottom: var(--s-2); }
.toc__progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--c-primary), var(--c-accent)); transform-origin: left; transform: scaleX(var(--p, 0)); }
@supports (animation-timeline: scroll()) { .toc__progress span { animation: grow-x linear both; animation-timeline: scroll(root); } }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: var(--t-sm); max-height: calc(100vh - 280px); overflow: auto; }
.toc a { display: block; padding: 6px 10px; border-left: 2px solid var(--c-line); color: var(--c-muted); text-decoration: none; line-height: 1.35; transition: color var(--dur-2), border-color var(--dur-2), background-color var(--dur-2); }
.toc a:hover { color: var(--c-primary); }
.toc a.is-active { color: var(--c-primary); border-color: var(--c-primary); background: var(--c-primary-50); border-radius: 0 6px 6px 0; font-weight: 500; }
.toc-fab { display: none; }
.sheet { position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: 100%; max-height: 75vh; padding: var(--s-2) var(--s-3) var(--s-4); border: 0; border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--c-surface); color: var(--c-text); box-shadow: 0 -20px 50px -20px rgb(11 26 58 / .35); transform: translateY(100%); transition: transform var(--dur-3) var(--ease-out), overlay var(--dur-3) allow-discrete, display var(--dur-3) allow-discrete; }
.sheet[open] { transform: none; }
@starting-style { .sheet[open] { transform: translateY(100%); } }
.sheet::backdrop { background: rgb(11 26 58 / .3); }
.sheet__handle { width: 44px; height: 5px; border-radius: 5px; background: var(--c-line-strong); margin: 0 auto var(--s-2); }
.sheet__list { list-style: none; padding: 0; margin: 0 0 var(--s-2); display: grid; gap: 2px; }
.sheet__list a { display: block; padding: 12px 8px; border-bottom: 1px solid var(--c-line); text-decoration: none; color: var(--c-ink); }

/* Ad slots: fixed reserved space, calm, clearly labelled, never animated. */
.ad-slot { position: relative; display: block; margin: var(--s-4) 0; border-radius: var(--r-md); background: var(--c-bg-soft); border: 1px solid var(--c-line); overflow: hidden; contain: layout paint; }
.ad-slot--inline { min-height: 280px; height: 280px; }
.ad-slot--side { width: 300px; max-width: 100%; height: 600px; position: sticky; top: calc(var(--header-h) + 360px); margin: 0; }
.ad-slot__label { position: absolute; left: 12px; top: 8px; font: 600 10px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--c-subtle); }

/* Data tables */
.table-wrap { position: relative; margin: var(--s-3) 0 var(--s-4); overflow: auto; border-radius: var(--r-md); border: 1px solid var(--c-line); background: var(--c-surface); box-shadow: var(--sh-1); }
.table-wrap--keep, .table-wrap--tall { max-height: min(72vh, 680px); } /* only long tables scroll inside the page */
.data-table { font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.data-table caption { caption-side: top; text-align: left; padding: var(--s-2) var(--s-2) var(--s-1); font: 600 var(--t-sm)/1.4 var(--f-display); color: var(--c-ink); }
.data-table th, .data-table td { padding: 12px 16px; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.data-table thead th { position: sticky; top: 0; z-index: 1; background: var(--c-bg-tint); color: var(--c-ink); font: 600 var(--t-xs)/1.3 var(--f-display); letter-spacing: .02em; white-space: normal; text-wrap: balance; box-shadow: inset 0 -1px 0 var(--c-line-strong); }
.data-table tbody tr:nth-child(even) { background: var(--c-bg-soft); }
.data-table tbody tr { transition: background-color var(--dur-1); }
.data-table tbody tr:hover { background: var(--c-primary-50); }
.data-table tbody th { font-weight: 600; color: var(--c-ink); }
.data-table .al-right { text-align: right; }
.data-table .al-center { text-align: center; }
.data-table td.al-right, .data-table td { font-family: var(--f-body); }
.data-table .sort-btn { all: unset; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; border-radius: 4px; }
.data-table .sort-btn:focus-visible { box-shadow: var(--ring); }
.data-table .sort-btn::after { content: "↕"; color: var(--c-subtle); font-size: 11px; }
.data-table th[aria-sort="ascending"] .sort-btn::after { content: "↑"; color: var(--c-primary); }
.data-table th[aria-sort="descending"] .sort-btn::after { content: "↓"; color: var(--c-primary); }
.data-table tr.is-due { background: var(--c-warn-50); }

/* ---------- Calculator ---------- */
.calc-section { margin-top: calc(-1 * var(--s-3)); position: relative; z-index: 2; }
.calc { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--s-4); padding: var(--s-4); border-radius: var(--r-xl); background: linear-gradient(170deg, var(--c-glass-strong), var(--c-surface) 40%, var(--c-primary-50)); box-shadow: var(--sh-3); }
.calc__h { display: flex; align-items: center; gap: 10px; font-size: var(--t-xl); margin-bottom: var(--s-3); }
.calc__inputs { display: grid; gap: var(--s-3); align-content: start; }
.field { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field > label, .field legend, .field__top label { font: 600 var(--t-sm)/1.3 var(--f-display); color: var(--c-ink); }
.field > label output { float: right; font: 500 var(--t-sm)/1.3 var(--f-mono); color: var(--c-primary); }
.field__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.field__box { display: inline-flex; align-items: center; gap: 4px; padding: 0 12px; height: 44px; border-radius: var(--r-sm); border: 1px solid var(--c-line-strong); background: var(--c-surface); color: var(--c-muted); font: 500 var(--t-sm)/1 var(--f-mono); transition: border-color var(--dur-2), box-shadow var(--dur-2); }
.field__box:focus-within { border-color: var(--c-primary); box-shadow: var(--sh-glow); }
.field__box input { width: 9ch; border: 0; padding: 0; min-height: 0; height: 100%; background: none; text-align: right; font: 500 var(--t-base)/1 var(--f-mono); color: var(--c-ink); box-shadow: none !important; -moz-appearance: textfield; }
.field__box input::-webkit-outer-spin-button, .field__box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field__hint { margin: 0; font-size: var(--t-xs); color: var(--c-subtle); }
.field__hint output { font-family: var(--f-mono); color: var(--c-ink); }
.range { --fill: 50%; -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--c-primary), var(--c-accent) var(--fill), var(--c-primary-100) var(--fill)); }
.range::-moz-range-track { height: 8px; border-radius: 8px; background: var(--c-primary-100); }
.range::-moz-range-progress { height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--c-primary), var(--c-accent)); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%; background: #fff; border: 3px solid var(--c-primary); box-shadow: 0 4px 12px -2px rgb(29 78 216 / .45); transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2); }
.range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--c-primary); box-shadow: 0 4px 12px -2px rgb(29 78 216 / .45); transition: transform var(--dur-1) var(--ease-out); }
.range:hover::-webkit-slider-thumb, .range:active::-webkit-slider-thumb { transform: scale(1.12); }
.range:active::-moz-range-thumb { transform: scale(1.12); }
.range:focus-visible { box-shadow: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: var(--sh-glow); }
.range:focus-visible::-moz-range-thumb { box-shadow: var(--sh-glow); }
.seg legend { margin-bottom: 8px; }
.seg__row { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--c-bg-tint); border: 1px solid var(--c-line); }
.seg__opt { position: relative; }
.seg__opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg__opt span { display: block; padding: 9px 0; border-radius: var(--r-pill); text-align: center; font: 600 var(--t-sm)/1 var(--f-display); color: var(--c-muted); transition: background-color var(--dur-2), color var(--dur-2), box-shadow var(--dur-2), transform var(--dur-1); }
.seg__opt input:checked + span { background: var(--c-surface); color: var(--c-primary); box-shadow: var(--sh-1); }
.seg__opt input:focus-visible + span { box-shadow: var(--ring); }
.seg__opt input:active + span { transform: scale(.96); }
.calc__more { border-radius: var(--r-md); border: 1px solid var(--c-line); background: var(--c-surface); }
.calc__more summary { display: flex; align-items: center; gap: 8px; padding: 12px 16px; cursor: pointer; list-style: none; font: 600 var(--t-sm)/1.3 var(--f-display); color: var(--c-ink); }
.calc__more summary::-webkit-details-marker { display: none; }
.calc__more summary .faq__chev { margin-left: auto; }
.calc__more[open] summary .faq__chev { transform: rotate(180deg); }
.calc__more::details-content { block-size: 0; overflow-y: clip; transition: block-size var(--dur-3) var(--ease-out), content-visibility var(--dur-3) allow-discrete; }
.calc__more[open]::details-content { block-size: auto; }
.calc__more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); padding: 0 16px 12px; }
.calc__more > .field__hint { padding: 0 16px 16px; }
.calc__more-grid .field:first-child { grid-column: 1 / -1; }
.calc__results { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); border-radius: var(--r-xl); background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--sh-2); align-self: start; position: sticky; top: calc(var(--header-h) + var(--s-2)); }
.calc__label { margin: 0; color: var(--c-muted); font-size: var(--t-sm); }
.calc__total { margin: 0; font: 500 clamp(2.6rem, 2rem + 2.6vw, 4rem)/1 var(--f-mono); letter-spacing: -.05em; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.donut-wrap { display: grid; grid-template-columns: 140px 1fr; gap: var(--s-3); align-items: center; }
.donut { width: 140px; height: 140px; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 16; }
.donut__track { stroke: var(--c-bg-tint); }
.donut__seg { transition: stroke-dasharray var(--dur-4) var(--ease-out), stroke-dashoffset var(--dur-4) var(--ease-out); }
.donut .seg-pi { stroke: var(--c-cat-1); background: none; } .donut .seg-tax { stroke: var(--c-cat-2); background: none; } .donut .seg-ins { stroke: var(--c-cat-3); background: none; } .donut .seg-pmi { stroke: var(--c-cat-4); background: none; } .donut .seg-hoa { stroke: var(--c-cat-5); background: none; }
.legend-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--t-sm); }
.legend-list li { display: flex; align-items: center; gap: 8px; transition: opacity var(--dur-2); }
.legend-list li.is-zero, .legend-list li.is-zero b { color: var(--c-subtle); }
.legend-list li.is-zero .dot { opacity: .35; }
.legend-list b { margin-left: auto; font: 500 var(--t-sm)/1 var(--f-mono); color: var(--c-ink); }
.calc__facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-1); margin: 0; }
.calc__facts div { padding: 12px; border-radius: var(--r-sm); background: var(--c-bg-soft); }
.calc__facts dt { font-size: var(--t-xs); color: var(--c-muted); }
.calc__facts dd { margin: 4px 0 0; font: 500 var(--t-base)/1.2 var(--f-mono); color: var(--c-ink); }
.calc__actions { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.calc__chart { grid-column: 1 / -1; }
.chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-1) var(--s-3); margin-bottom: var(--s-2); }
.chart-head h3 { margin: 0; font-size: var(--t-xl); }
.chart { position: relative; padding: 0 0 28px 64px; }
.chart__svg { display: block; width: 100%; height: 240px; overflow: visible; }
.chart__grid { stroke: var(--c-line); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
.chart__line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart__line--bal { stroke: var(--c-primary); }
.chart__line--int { stroke: var(--c-accent); }
.js .chart:not(.is-drawn) .chart__svg { clip-path: inset(0 100% 0 0); }
.js .chart.is-drawn .chart__svg { clip-path: inset(0 0 0 0); transition: clip-path 1400ms var(--ease-out); }
.js .chart.is-live .chart__svg { transition: none; }
.chart__area { transition: opacity var(--dur-4); }
.js .chart:not(.is-drawn) .chart__area { opacity: 0; }
.chart__y { position: absolute; left: 0; top: 0; bottom: 28px; width: 60px; display: flex; flex-direction: column; justify-content: space-between; font: 500 11px/1 var(--f-mono); color: var(--c-subtle); }
.chart__x { position: absolute; left: 64px; right: 0; bottom: 0; display: flex; justify-content: space-between; font: 500 11px/1 var(--f-mono); color: var(--c-subtle); }
.chart__tip { position: absolute; top: 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--c-ink); color: #fff; font: 500 12px/1.5 var(--f-mono); pointer-events: none; transform: translateX(-50%); white-space: nowrap; box-shadow: var(--sh-2); }
.chart__tip::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); }
.amort { margin-top: var(--s-6); }
/* Calculators (stage 2) */
.calc__sub { margin: 0; color: var(--c-muted); font-size: var(--t-sm); line-height: 1.5; }
.calc__sub b { color: var(--c-ink); font-family: var(--f-mono); font-weight: 500; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.field-pair .field__box input { width: 7ch; }
.check { display: flex; align-items: center; gap: 10px; font-size: var(--t-sm); color: var(--c-ink); cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--c-primary); }
.calc__facts dd.is-good { color: var(--c-accent-ink); }
.calc__facts dd.is-bad { color: var(--c-warn); }
.scen-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.scen { display: grid; gap: 6px; }
.scen__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-1); font-size: var(--t-sm); color: var(--c-ink); }
.scen__top .num { font-size: var(--t-base); }
.scen small { color: var(--c-subtle); font-size: var(--t-xs); line-height: 1.4; }
.scen__bar { display: block; height: 10px; border-radius: var(--r-pill); background: var(--c-bg-tint); overflow: hidden; }
.scen__bar span { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: var(--c-primary); transition: width var(--dur-4) var(--ease-out); }
.scen--comfort .scen__bar span { background: linear-gradient(90deg, var(--c-accent), var(--c-accent-300)); }
.scen--manual .scen__bar span { background: var(--c-primary); }
.scen--strong .scen__bar span { background: var(--c-cat-3); }
.scen--du .scen__bar span { background: var(--c-cat-4); }
.stack-bar { display: flex; height: 14px; border-radius: var(--r-pill); overflow: hidden; background: var(--c-bg-tint); gap: 2px; }
.stack-bar span { width: var(--w, 0%); transition: width var(--dur-4) var(--ease-out); }
.stack-bar span[style*="--w:0%"] { display: none; }
.seg-c6, .stack-bar .seg-c6 { background: var(--c-sky); }
.seg-c7, .stack-bar .seg-c7 { background: var(--c-subtle); }
.dot--amber { background: var(--c-cat-4); }
.legend-list--cc { font-size: var(--t-sm); }
.chart__zero { stroke: var(--c-line-strong); stroke-width: 1.5; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; fill: none; }
.chart__marker { stroke: var(--c-primary-300); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.chart__line--soft { opacity: .55; }
.chart__line--warn { stroke: var(--c-cat-4); }
.chart__line--dash { stroke-dasharray: 8 6; }

/* ---------- Palette, consent ---------- */
.palette { width: min(640px, calc(100vw - 32px)); max-height: min(70vh, 600px); margin: 12vh auto auto; padding: 0; border: 1px solid var(--c-glass-border); border-radius: var(--r-xl); background: var(--c-glass-strong); backdrop-filter: blur(var(--blur-3)) saturate(1.6); -webkit-backdrop-filter: blur(var(--blur-3)) saturate(1.6); box-shadow: var(--sh-3); color: var(--c-text); overflow: hidden; opacity: 0; transform: translateY(-8px) scale(.98); transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out), overlay var(--dur-2) allow-discrete, display var(--dur-2) allow-discrete; }
.palette[open] { opacity: 1; transform: none; }
@starting-style { .palette[open] { opacity: 0; transform: translateY(-8px) scale(.98); } }
.palette::backdrop { background: rgb(11 26 58 / .28); backdrop-filter: blur(3px); }
.palette__form { display: flex; align-items: center; gap: var(--s-1); padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--c-line); }
.palette__form input { flex: 1; border: 0; background: none; min-height: 44px; font-size: var(--t-lg); box-shadow: none !important; padding: 0; }
.palette__icon { width: 22px; height: 22px; color: var(--c-primary); }
.palette__results { list-style: none; margin: 0; padding: var(--s-1); max-height: 46vh; overflow: auto; }
.palette__results a { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 10px 12px; border-radius: var(--r-sm); text-decoration: none; color: var(--c-text); }
.palette__results a .chip { grid-row: span 2; align-self: center; min-width: 76px; justify-content: center; }
.palette__results a b { color: var(--c-ink); font: 600 var(--t-sm)/1.3 var(--f-display); }
.palette__results a small { color: var(--c-subtle); font-size: var(--t-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette__results [aria-selected="true"] a, .palette__results a:hover { background: var(--c-primary-50); }
.palette__results .palette__empty { padding: var(--s-3); color: var(--c-muted); font-size: var(--t-sm); }
.palette__hint { margin: 0; padding: 10px var(--s-3); border-top: 1px solid var(--c-line); font-size: var(--t-xs); color: var(--c-subtle); display: flex; gap: 4px; align-items: center; }
.consent { position: fixed; left: var(--s-2); bottom: var(--s-2); z-index: var(--z-consent); width: min(420px, calc(100vw - 32px)); padding: var(--s-3); border-radius: var(--r-lg); background: var(--c-glass-strong); backdrop-filter: blur(var(--blur-2)); -webkit-backdrop-filter: blur(var(--blur-2)); border: 1px solid var(--c-glass-border); box-shadow: var(--sh-3); font-size: var(--t-sm); }
.consent p { margin-bottom: var(--s-2); }
.consent__actions { display: flex; justify-content: flex-end; gap: var(--s-1); }

/* ---------- Footer ---------- */
.site-footer { position: relative; isolation: isolate; overflow: hidden; margin-top: var(--s-6); padding-top: var(--s-10); background: var(--c-bg-soft); border-top: 1px solid var(--c-line); font-size: var(--t-sm); }
.site-footer::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--g-grid); -webkit-mask-image: linear-gradient(transparent, #000 40%); mask-image: linear-gradient(transparent, #000 40%); }
.site-footer__glow { position: absolute; z-index: -1; width: 60vmax; height: 30vmax; left: 50%; top: -15vmax; transform: translateX(-50%); background: radial-gradient(closest-side, rgb(147 180 245 / .3), transparent); pointer-events: none; }
.site-footer__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: var(--s-8); padding-bottom: var(--s-6); }
.site-footer__brand p { color: var(--c-muted); max-width: 42ch; }
.site-footer__note { font-size: var(--t-xs); }
.site-footer__meta-links { list-style: none; padding: 0; margin: var(--s-2) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-1); }
.site-footer__meta-links a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--c-line); background: var(--c-surface); text-decoration: none; color: var(--c-muted); font-size: var(--t-xs); }
.site-footer__meta-links a:hover { color: var(--c-primary); border-color: var(--c-primary-200); }
.site-footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.site-footer__h { margin: 0 0 var(--s-2); font: 650 var(--t-sm)/1 var(--f-display); color: var(--c-ink); }
.site-footer__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer__cols a { color: var(--c-muted); text-decoration: none; }
.site-footer__cols a:hover { color: var(--c-primary); }
.brand--footer { margin-bottom: var(--s-2); }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); padding-block: var(--s-3); border-top: 1px solid var(--c-line); color: var(--c-subtle); font-size: var(--t-xs); }
.site-footer__bottom p { margin: 0; }

/* ---------- Misc pages ---------- */
.empty-state { display: grid; grid-template-columns: 220px 1fr; gap: var(--s-4); align-items: center; padding: var(--s-5); }
.loc-lists h2, .sitemap-cols h2 { font-size: var(--t-xl); }
.sitemap-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-4); }
.sitemap-list { padding-left: 1.1em; display: grid; gap: 6px; font-size: var(--t-sm); }
.search-form { display: flex; gap: var(--s-1); max-width: 640px; }
.search-form input { flex: 1; }
.search-results { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
.search-results a { display: grid; gap: 6px; text-decoration: none; color: var(--c-text); }
.search-results .chip { justify-self: start; }
.search-count { color: var(--c-muted); }
.code-block { padding: var(--s-2); border-radius: var(--r-sm); background: var(--c-ink); color: #e2e8ff; overflow: auto; font-size: var(--t-xs); }
.code-block code { background: none; color: inherit; padding: 0; }

.contact { margin: var(--s-4) 0; padding: var(--s-4); gap: var(--s-2); }
.contact h2 { display: flex; align-items: center; gap: 10px; font-size: var(--t-xl); }
.contact__form { display: grid; gap: var(--s-2); }
.contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.contact__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
textarea { min-height: 140px; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--c-line-strong); background: var(--c-surface); color: var(--c-ink); resize: vertical; font: inherit; }
textarea:focus-visible { border-color: var(--c-primary); box-shadow: var(--sh-glow); }
.contact .btn { justify-self: start; }

/* ---------- Admin ---------- */
.admin-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-2) var(--gutter); border-bottom: 1px solid var(--c-line); background: var(--c-surface); }
.admin-main { max-width: 1280px; margin: 0 auto; padding: var(--s-4) var(--gutter) var(--s-10); }
.admin-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-3); }
.admin-head h1 { margin: 0; font-size: var(--t-3xl); }
.seg--tabs { display: flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--c-bg-tint); border: 1px solid var(--c-line); }
.seg__tab { padding: 8px 16px; border-radius: var(--r-pill); text-decoration: none; color: var(--c-muted); font: 600 var(--t-sm)/1 var(--f-display); }
.seg__tab.is-active { background: var(--c-surface); color: var(--c-primary); box-shadow: var(--sh-1); }
.admin-flash { padding: 12px 16px; border-radius: var(--r-sm); background: var(--c-accent-50); color: var(--c-accent-ink); border: 1px solid var(--c-accent-100); font-size: var(--t-sm); word-break: break-word; }
.admin-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-2); margin-bottom: var(--s-3); }
.admin-card { margin-bottom: var(--s-3); }
.admin-card h2 { font-size: var(--t-xl); }
.admin-card h3 { font-size: var(--t-base); margin-top: var(--s-2); }
.admin-card__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-1); font-size: var(--t-xs); color: var(--c-muted); }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: var(--s-3); }
.admin-grid .admin-card { margin: 0; }
.hbar { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: var(--t-sm); }
.hbar li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.hbar__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar__track { height: 8px; border-radius: 8px; background: var(--c-bg-tint); overflow: hidden; }
.hbar__track span { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--c-primary), var(--c-accent)); }
.hbar b { font: 500 var(--t-sm)/1 var(--f-mono); color: var(--c-ink); }
.daychart { display: grid; grid-template-columns: repeat(30, 1fr); gap: 4px; align-items: end; height: 180px; margin-top: var(--s-2); }
.daychart__col { position: relative; height: 100%; display: flex; align-items: flex-end; }
.daychart__v, .daychart__s { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 4px 4px 0 0; }
.daychart__v { background: var(--c-primary-200); }
.daychart__s { background: var(--c-accent); left: 25%; right: 25%; }
.daychart__axis { display: flex; justify-content: space-between; font-size: var(--t-xs); color: var(--c-subtle); margin-top: 6px; }
.admin-empty, .admin-note { color: var(--c-subtle); font-size: var(--t-sm); }
.admin-actions { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: center; }
.admin-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-list { font-size: var(--t-sm); padding-left: 1.2em; }
.admin-msg { padding: var(--s-2) 0; border-bottom: 1px solid var(--c-line); }
.admin-msg.is-new { border-left: 3px solid var(--c-primary); padding-left: var(--s-2); }
.admin-msg__meta { font-size: var(--t-sm); color: var(--c-muted); }
.admin-msg__body { white-space: normal; }
.admin-login { max-width: 460px; margin: var(--s-8) auto; padding: var(--s-5); gap: var(--s-2); }
.admin-login form { display: grid; gap: var(--s-2); }
.form-error { color: var(--c-danger); font-weight: 600; }

/* ---------- Style guide ---------- */
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-2); }
.sg-swatch { border-radius: var(--r-md); border: 1px solid var(--c-line); overflow: hidden; background: var(--c-surface); font-size: var(--t-xs); }
.sg-swatch span { display: block; height: 72px; }
.sg-swatch p { margin: 0; padding: 8px 10px; }
.sg-row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-bottom: var(--s-3); }
.sg-box { width: 96px; height: 64px; border-radius: var(--r-md); background: var(--c-surface); border: 1px solid var(--c-line); display: grid; place-items: center; font-size: var(--t-xs); color: var(--c-muted); }
.sg-type > * { margin-bottom: var(--s-1); }
.sg-section { padding-block: var(--s-5); border-bottom: 1px solid var(--c-line); }

/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(var(--rise)); transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger)); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .card--link.reveal.is-in { transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); transition-delay: 0s; }

/* ---------- View transitions ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; animation-timing-function: var(--ease-out); }
::view-transition-group(page-title) { animation-duration: 380ms; animation-timing-function: var(--ease-out); }

/* ---------- Dark theme touches ---------- */
[data-theme="dark"] .tile.b1, [data-theme="dark"] .tile.b2, [data-theme="dark"] .tile.b3 { color: var(--c-ink); }
[data-theme="dark"] .callout--warning { border-color: #5c3d14; }
[data-theme="dark"] .callout--warning .callout__icon { background: #3d2a10; }
[data-theme="dark"] .chart__tip { background: #f2f6ff; color: #0b1220; }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .mega__grid { grid-template-columns: repeat(3, 1fr); }
  .carousel { grid-auto-columns: minmax(260px, calc((100% - 2 * var(--s-3)) / 3)); }
}
@media (max-width: 1023px) {
  :root { --header-h: 60px; }
  .menu-btn { display: inline-grid; }
  .search-btn__label, .search-btn .kbd { display: none; }
  .search-btn { width: 40px; padding: 0; justify-content: center; }
  .js .nav { position: fixed; inset: var(--header-h) 0 0 0; padding: var(--s-2) var(--gutter) var(--s-6); background: var(--c-bg); overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3); }
  .js .nav-open .nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .js .nav__list { flex-direction: column; align-items: stretch; gap: 4px; }
  .js .nav__link { padding: 14px 12px; font-size: var(--t-base); border-radius: var(--r-sm); }
  .js .nav__trigger { display: none; }
  .js .mega, .js .has-mega:not(.is-open):not(:hover) .mega { position: static; opacity: 1; visibility: visible; transform: none; padding: 0; border: 0; box-shadow: none; background: none; backdrop-filter: none; }
  .js .mega__grid { grid-template-columns: 1fr; gap: 4px; }
  .js .mega__col { padding: 12px; border: 1px solid var(--c-line); }
  .js .mega__desc { display: none; }
  .js .mega__links { grid-template-columns: 1fr 1fr; column-gap: var(--s-2); margin-top: 8px; }
  html:not(.js) .site-header__bar { flex-wrap: wrap; height: auto; padding-block: 10px; }
  html:not(.js) .nav { order: 3; flex-basis: 100%; overflow-x: auto; }
  html:not(.js) .mega { display: none; }
  .slide { grid-template-columns: 1fr; gap: var(--s-3); min-height: 0; }
  .slide__art { max-width: 420px; justify-self: start; }
  .trust__grid { grid-template-columns: repeat(2, 1fr); }
  .bento { grid-template-columns: 1fr 1fr; }
  .bento__item, .bento__item--3, .bento__item--4 { grid-column: auto; min-height: 0; }
  .bento__item--1 { grid-column: 1 / -1; grid-row: auto; }
  .map-wrap { grid-template-columns: 1fr; }
  .tools-show { grid-template-columns: 1fr; }
  .band__inner { grid-template-columns: 1fr; gap: var(--s-3); }
  .band__aside { justify-items: start; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); align-items: end; gap: var(--s-2); }
  .band__motif { max-width: 220px; }
  .stat-card--band { position: static; max-width: none; }
  .page-grid { grid-template-columns: 1fr; gap: 0; }
  .prose-col, .side-col { grid-column: 1 / -1; }
  .side-col { display: none; }
  .toc-fab { position: fixed; z-index: 40; left: 50%; bottom: var(--s-2); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: var(--r-pill); border: 1px solid var(--c-glass-border); background: var(--c-glass-strong); backdrop-filter: blur(var(--blur-2)); -webkit-backdrop-filter: blur(var(--blur-2)); box-shadow: var(--sh-3); font: 600 var(--t-sm)/1 var(--f-display); color: var(--c-ink); transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-3); }
  .toc-fab.is-hidden { transform: translate(-50%, 140%); opacity: 0; }
  html:not(.js) .toc-fab { display: none; }
  .calc { grid-template-columns: 1fr; }
  .calc__results { position: static; }
  .site-footer__top { grid-template-columns: 1fr; gap: var(--s-5); }
  .loc-lists { grid-template-columns: 1fr; }
  .carousel { grid-auto-columns: minmax(250px, calc((100% - var(--s-3)) / 2)); }
}
@media (max-width: 719px) {
  .section { padding-block: var(--s-8); }
  .hero { padding-bottom: var(--s-10); }
  .hero__head { margin-bottom: var(--s-2); }
  .slide__art { max-width: 340px; }
  .glass-chip { font-size: 11px; padding: 8px 10px; }
  .glass-chip b { font-size: 12px; }
  .glass-chip--a { left: 0; }
  .glass-chip--b { right: 0; }
  .bento { grid-template-columns: 1fr; }
  .bento__item--1 { grid-column: auto; }
  .faq__list { grid-template-columns: 1fr; }
  .mini-calc { grid-template-columns: 1fr; padding: var(--s-3); }
  .tools-grid { grid-template-columns: 1fr 1fr; }
  .site-footer__cols { grid-template-columns: 1fr 1fr; }
  .carousel { grid-auto-columns: 84%; }
  .donut-wrap { grid-template-columns: 112px 1fr; gap: var(--s-2); }
  .donut { width: 112px; height: 112px; }
  .calc { padding: var(--s-3) var(--s-2); }
  .calc__results { padding: var(--s-3); }
  .calc__more-grid { grid-template-columns: 1fr; }
  .field-pair { grid-template-columns: 1fr; }
  .chart { padding-left: 52px; }
  .chart__y { width: 48px; font-size: 10px; }
  .chart__x { left: 52px; }
  .chart__svg { height: 200px; }
  .calc-embed { grid-template-columns: 1fr; }
  .contact__row { grid-template-columns: 1fr; }
  .calc-embed__art { display: none; }
  .empty-state { grid-template-columns: 1fr; }
  .band__aside { grid-template-columns: 1fr; }
  .band__motif { display: none; }
  .anchor { display: none; }
  .ad-slot--inline { height: 280px; }
  .quick { padding: var(--s-3); }
  /* Tables become cards on small screens (except compact numeric tables marked .keep-table) */
  .table-wrap:not(.table-wrap--keep) { max-height: none; overflow: visible; border: 0; background: none; box-shadow: none; }
  .data-table:not(.keep-table) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data-table:not(.keep-table), .data-table:not(.keep-table) tbody, .data-table:not(.keep-table) tr, .data-table:not(.keep-table) th, .data-table:not(.keep-table) td { display: block; width: 100%; }
  .data-table:not(.keep-table) caption { display: block; padding-left: 0; }
  .data-table:not(.keep-table) tbody tr { margin-bottom: var(--s-2); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface) !important; box-shadow: var(--sh-1); overflow: hidden; }
  .data-table:not(.keep-table) tbody th { background: var(--c-bg-tint); border-bottom: 1px solid var(--c-line); }
  .data-table:not(.keep-table) tbody td { display: flex; justify-content: space-between; gap: var(--s-2); text-align: right; border-bottom: 1px solid var(--c-line); }
  .data-table:not(.keep-table) tbody td:last-child { border-bottom: 0; }
  .data-table:not(.keep-table) tbody td::before { content: attr(data-label); flex: none; max-width: 48%; color: var(--c-muted); font-size: var(--t-xs); text-align: left; font-weight: 500; }
  .data-table:not(.keep-table) tbody td > .cell { min-width: 0; }
  .data-table:not(.keep-table) tbody th[data-label]::before { content: attr(data-label) ": "; color: var(--c-muted); font-weight: 500; font-size: var(--t-xs); }
  .table-wrap--keep { max-height: 460px; }
  .keep-table th, .keep-table td { padding: 10px 10px; font-size: var(--t-xs); }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1); }
  .stat-grid .stat-card { padding: var(--s-2); min-width: 0; }
  .stat-grid .stat-card::before { left: var(--s-2); right: var(--s-2); }
  .stat-grid .stat-card__num { font-size: clamp(1.05rem, 5.4vw, 1.45rem); overflow-wrap: anywhere; }
  .hero__rate-extra { display: none; }
}
@media (max-width: 420px) {
  .donut-wrap { grid-template-columns: 1fr; justify-items: center; }
  .legend-list { width: 100%; }
  .brand__name { font-size: 1rem; }
  .trust__grid { gap: var(--s-1); }
  .stat-card { padding: var(--s-2); min-width: 0; }
  .stat-card__num { overflow-wrap: anywhere; }
  .stat-card::before { left: var(--s-2); right: var(--s-2); }
  .tools-grid { grid-template-columns: 1fr; }
  .site-footer__cols { grid-template-columns: 1fr; }
}
@media (hover: none) { .card--link::after { display: none; } }

/* ---------- Reduced motion: instant fades, no movement, no autoplay ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; }
  .blob, .m-float, .pulse::after { animation: none !important; }
  .js .reveal { transform: none; transition: opacity 120ms linear; transition-delay: 0s; }
  .js .slide { transform: none; transition: opacity 120ms linear, visibility 0s linear 120ms; }
  .js .slide.is-active { transition-delay: 0s; }
  .js .slide .glass-chip { translate: none; transition: opacity 120ms linear; }
  .js [data-draw] [pathLength] { stroke-dashoffset: 0 !important; transition: none !important; }
  .js .chart .chart__svg { clip-path: none !important; transition: none !important; }
  .js [data-draw] .m-fill, .js [data-draw] .m-area--a, .js [data-draw] .m-area--b, .js [data-draw] .m-dot { opacity: 1; transition: none; }
  .card--link:hover, .btn:hover, .tile:hover, .tile.is-hot, a.pill:hover { transform: none; }
  .card--link:hover::before { animation: none; }
  .slider__dot.is-active span::after { transition: none; }
  .faq__item::details-content, .calc__more::details-content { transition: none; }
  .site-header.is-scrolled .site-header__bar, .site-header.is-scrolled::before, .site-header.is-scrolled .brand__mark { transform: none; }
  @view-transition { navigation: none; }
}
.gloss-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-3); }
.gloss-filter { display: flex; align-items: center; gap: 8px; flex: 1 1 280px; max-width: 420px; height: 46px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--c-line); background: var(--c-surface); box-shadow: var(--sh-1); color: var(--c-muted); }
.gloss-filter:focus-within { border-color: var(--c-primary); box-shadow: var(--ring); }
.gloss-filter input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; color: var(--c-ink); outline: none; }
.gloss-count { margin: 0; color: var(--c-muted); font-size: var(--t-sm); }
.gloss-groups { columns: 3 320px; column-gap: var(--s-3); }
.gloss-group { break-inside: avoid; margin: 0 0 var(--s-3); padding: var(--s-3); }
.gloss-group[hidden] { display: none; }
.gloss-group h2 { margin: 0 0 var(--s-2); font-size: var(--t-lg); }
.gloss-list { margin: 0; }
.gloss-item { padding: 10px 0; border-top: 1px solid var(--c-line); }
.gloss-item:first-child { border-top: 0; padding-top: 0; }
.gloss-item[hidden] { display: none; }
.gloss-item dt { font-weight: 600; color: var(--c-ink); }
.gloss-item dt a { text-decoration: none; }
.gloss-item dt a:hover { text-decoration: underline; }
.gloss-item dt .is-planned { color: var(--c-subtle); font-weight: 500; }
.gloss-item dd { margin: 2px 0 0; color: var(--c-muted); font-size: var(--t-sm); line-height: 1.5; }
.gloss-empty { color: var(--c-muted); }
@media print {
  .site-header, .site-footer, .ad-slot, .toc-fab, .side-col, .related, .consent, .hero__bg, .band__bg { display: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}
@media (max-width: 359px) {
  .site-header__bar { gap: 6px; }
  .brand { gap: 6px; }
  .brand__mark { width: 30px; height: 30px; }
  .brand__name { font-size: .9rem; }
  .site-header__actions { gap: 4px; }
  .site-header__actions .icon-btn, .site-header__actions .search-btn { width: 36px; height: 36px; }
}