@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --paper: #f5f4ef;
  --paper-2: #ebe9e1;
  --ink: #102331;
  --muted: #627079;
  --line: #cfd3ce;
  --stable: #16a781;
  --stable-dark: #08765f;
  --warm: #f3a638;
  --hot: #e5583e;
  --cold: #397ba8;
  --navy: #0b1b29;
  --cream: #fffdf7;
  --focus: #f0bd3d;
  --radius: 1.25rem;
  --shadow: 0 24px 70px rgba(11, 27, 41, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5.75rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.65 Inter, sans-serif; overflow-x: hidden; }
section[id], .anchor-target { scroll-margin-top: 5.75rem; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
h1, h2, h3, strong, .brand { font-family: "Space Grotesk", Inter, sans-serif; }
h1, h2, h3, p { margin-top: 0; }
a { color: inherit; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 200; background: white; padding: .8rem 1rem; border-radius: .5rem; }
.skip-link:focus { top: 1rem; }
.progress-track { position: fixed; z-index: 150; top: 0; left: 0; width: 100%; height: 3px; background: transparent; }
.progress-track span { display: block; width: 0; height: 100%; background: var(--stable); }
.phase-indicator { position: fixed; z-index: 80; left: .65rem; top: 50%; transform: rotate(-90deg) translateX(-50%); transform-origin: left top; color: var(--muted); font-size: .65rem; font-weight: 700; letter-spacing: .18em; pointer-events: none; }
.topbar { position: fixed; z-index: 100; inset: 3px 0 auto; height: 4.75rem; display: flex; align-items: center; gap: 1.25rem; padding: 0 clamp(1rem, 2.4vw, 2.5rem); color: var(--ink); background: rgba(245,244,239,.92); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(16,35,49,.09); }
.brand { font-weight: 700; font-size: .82rem; letter-spacing: -.02em; text-decoration: none; white-space: nowrap; }
.current-chapter { display: flex; align-items: baseline; gap: .55rem; min-width: 0; margin-right: auto; color: var(--muted); }
.current-chapter small { font-size: .55rem; letter-spacing: .1em; }
.current-chapter b { overflow: hidden; max-width: 18rem; color: var(--stable-dark); font: 700 .7rem "Space Grotesk"; text-overflow: ellipsis; white-space: nowrap; }
.top-actions { display: flex; align-items: center; gap: .8rem; }
.mode-switch { display: flex; align-items: center; gap: .35rem; white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; padding: .22rem; background: rgba(255,255,255,.42); }
.mode-switch button { border: 0; border-radius: 999px; padding: .45rem .6rem; color: var(--muted); background: transparent; font-size: .62rem; font-weight: 700; cursor: pointer; }
.mode-switch button[aria-pressed=true] { background: var(--ink); color: white; }
.mode-switch i { width: 1px; height: 1rem; background: var(--line); }
.mobile-mode-switch { display: none; grid-column: 1/-1; width: max-content; margin-bottom: .5rem; }
.status { display: grid; grid-template-columns: auto auto; gap: .1rem .45rem; align-items: center; font-size: .68rem; letter-spacing: .08em; }
.status[hidden] { display: none !important; }
.status small { grid-column: 1/-1; color: var(--muted); font-size: .52rem; letter-spacing: .08em; }
.status span { width: .55rem; height: .55rem; border-radius: 50%; background: var(--stable); box-shadow: 0 0 0 .3rem rgba(22,167,129,.12); }
.status.hot span { background: var(--hot); box-shadow: 0 0 0 .3rem rgba(229,88,62,.12); }
.status.cold span { background: var(--cold); box-shadow: 0 0 0 .3rem rgba(57,123,168,.12); }
.menu-toggle { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.42); font-size: .68rem; font-weight: 700; color: var(--ink); padding: .6rem .85rem; cursor: pointer; }
.mobile-nav { position: fixed; z-index: 90; top: 4.75rem; left: 0; right: 0; padding: 1.5rem max(1.25rem, calc((100vw - 1240px)/2)) 2rem; background: rgba(245,244,239,.98); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1.5rem 2rem; box-shadow: 0 24px 60px rgba(16,35,49,.1); }
.mobile-nav:not([hidden]) { display: grid; }
.nav-group { display: grid; align-content: start; gap: .55rem; }
.nav-group > span { color: var(--stable-dark); font-size: .62rem; font-weight: 700; letter-spacing: .11em; }
.nav-group a { color: var(--muted); font-size: .78rem; font-weight: 700; text-decoration: none; }
.nav-group a:hover, .nav-group a.active { color: var(--ink); }
.nav-group a.active { text-decoration: underline; text-decoration-color: var(--stable); text-decoration-thickness: 2px; text-underline-offset: .35rem; }

.hero { min-height: 110vh; padding: clamp(8rem, 14vw, 11rem) max(1.25rem, calc((100vw - 1240px)/2)); position: relative; overflow: hidden; }
.section-dark { background: var(--navy); color: var(--cream); }
.hero:before { content: ""; position: absolute; width: min(70vw, 60rem); aspect-ratio: 1; left: 45%; top: 36%; transform: translate(-50%,-50%); border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 0 8rem rgba(255,255,255,.02), 0 0 0 18rem rgba(255,255,255,.015); }
.hero-inner { position: relative; z-index: 2; max-width: 76rem; }
.eyebrow, .step { font-size: .75rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--stable); }
.hero h1 { font-size: clamp(3.7rem, 9vw, 8.6rem); line-height: .84; letter-spacing: -.075em; margin: 1.25rem 0; max-width: 1050px; }
.hero-sub { font-size: clamp(1.15rem, 2.2vw, 1.6rem); color: #bac4c9; }
.hero-stat { display: flex; gap: clamp(1rem, 3vw, 3rem); align-items: end; margin: clamp(3rem, 6vw, 6rem) 0 0; padding-bottom: clamp(1.4rem, 2.5vw, 2.2rem); }
.hero-stat strong { font-size: clamp(6rem, 14vw, 11rem); letter-spacing: -.075em; line-height: .82; color: var(--warm); }
.hero-stat span { padding-bottom: .3rem; line-height: 1.45; color: #c5ced3; }
.source-chip { position: relative; z-index: 3; display: inline-flex; align-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: #d2dade; background: #102331; padding: .5rem .8rem; font-size: .78rem; font-weight: 600; text-decoration: none; }
.source-chip:hover { border-color: rgba(255,255,255,.42); color: white; }
.lead-question { font: 600 clamp(1.6rem, 3vw, 2.8rem)/1.15 "Space Grotesk"; margin: 4rem 0 2rem; }
.primary, .secondary { display: inline-flex; align-items: center; justify-content: center; gap: .8rem; min-height: 3.25rem; border: 0; border-radius: 999px; padding: .85rem 1.35rem; font-weight: 700; font-size: .82rem; text-decoration: none; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.primary { background: var(--stable); color: white; box-shadow: 0 .6rem 1.5rem rgba(22,167,129,.22); }
.secondary { border: 1px solid var(--line); color: var(--ink); background: transparent; }
.primary:hover, .secondary:hover { transform: translateY(-2px); box-shadow: 0 .8rem 2rem rgba(11,27,41,.16); }
.price-cloud span { position: absolute; z-index: 1; font: 600 clamp(.8rem, 1.5vw, 1.2rem) "Space Grotesk"; color: rgba(255,255,255,.24); animation: drift 8s ease-in-out infinite alternate; }
.price-cloud span:nth-child(1){left:8%;top:26%}.price-cloud span:nth-child(2){right:12%;top:22%;animation-delay:-2s}.price-cloud span:nth-child(3){right:22%;top:52%;animation-delay:-4s}.price-cloud span:nth-child(4){left:75%;top:74%;animation-delay:-1s}.price-cloud span:nth-child(5){left:6%;top:70%;animation-delay:-5s}.price-cloud span:nth-child(6){right:7%;top:39%;animation-delay:-3s}
@keyframes drift { to { transform: translateY(-20px); opacity: .6; } }
.hero-reveal { position: relative; z-index: 2; max-width: 60rem; margin: 11rem auto 0; text-align: center; font-size: clamp(1.6rem, 3.6vw, 3.5rem); line-height: 1.2; }
.hero-reveal p { color: #89969e; }
.hero-reveal strong { color: var(--cream); }

.chapter, .training, .sources { padding: clamp(4.75rem, 7.5vw, 7.5rem) max(1.25rem, calc((100vw - 1240px)/2)); }
.section-head { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(16rem,.7fr); gap: 1rem 4rem; align-items: end; margin-bottom: clamp(2.75rem, 4.5vw, 4.5rem); }
.section-head .step { grid-column: 1/-1; }
.section-head h2 { font-size: clamp(3rem, 7vw, 6.4rem); line-height: .94; letter-spacing: -.065em; margin: 0; }
.section-head > p:last-child { color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.25rem); max-width: 36rem; }
.section-head.centered { display: block; text-align: center; }
.section-head.centered h2 { margin: 1rem 0; }
.reveal { opacity: 0; transform: translateY(32px); transition: opacity .8s cubic-bezier(.2,.75,.2,1), transform .8s cubic-bezier(.2,.75,.2,1); }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.magic-square { position: relative; display: block; width: min(100%, 72rem); height: clamp(35rem, 55vw, 43rem); margin: auto; isolation: isolate; }
.goal { position: absolute; z-index: 2; width: clamp(13rem, 25vw, 19rem); min-height: 8.5rem; overflow: hidden; text-align: left; padding: clamp(1.1rem, 2vw, 1.75rem); color: var(--ink); background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; box-shadow: 0 16px 45px rgba(16,35,49,.07); transition: transform .35s cubic-bezier(.2,.75,.2,1), border-color .3s, background .3s, color .3s, box-shadow .3s; }
.goal-top { left: 50%; top: 0; transform: translateX(-50%); }
.goal-right { right: 0; top: 50%; transform: translateY(-50%); }
.goal-bottom { left: 50%; bottom: 0; transform: translateX(-50%); }
.goal-left { left: 0; top: 50%; transform: translateY(-50%); }
.goal-top:hover, .goal-top.active { transform: translate(-50%,-6px); }
.goal-right:hover, .goal-right.active { transform: translate(6px,-50%); }
.goal-bottom:hover, .goal-bottom.active { transform: translate(-50%,6px); }
.goal-left:hover, .goal-left.active { transform: translate(-6px,-50%); }
.goal:hover, .goal.active { border-color: var(--stable); background: var(--cream); box-shadow: 0 20px 55px rgba(8,118,95,.13); }
.magic-square.is-focused .goal:not(.active) { color: #8b969c; border-color: rgba(16,35,49,.12); box-shadow: none; }
.magic-square.is-focused .goal:not(.active) span { color: #7cbda9; }
.goal span { color: var(--stable); font-size: .75rem; font-weight: 700; }
.goal b { display: block; max-width: 100%; font-size: clamp(1.05rem, 2vw, 1.8rem); line-height: 1.08; margin-top: 1.2rem; overflow-wrap: break-word; hyphens: manual; }
.goal-right b { font-size: clamp(1rem, 1.65vw, 1.4rem); letter-spacing: -.025em; }
.goal-left b { font-size: clamp(.95rem, 1.55vw, 1.35rem); letter-spacing: -.025em; }
.goal small { position: absolute; right: 1rem; top: 1rem; color: var(--stable-dark); text-transform: uppercase; font-size: .65rem; }
.square-lines { position: absolute; z-index: 1; inset: 3.7rem 7rem; color: var(--stable-dark); pointer-events: none; }
.square-lines svg { width: 100%; height: 100%; overflow: visible; }
.square-lines polygon { fill: rgba(22,167,129,.025); stroke: currentColor; stroke-width: .6; vector-effect: non-scaling-stroke; transition: .7s cubic-bezier(.2,.75,.2,1); }
.square-lines circle { fill: var(--paper); stroke: currentColor; stroke-width: .5; vector-effect: non-scaling-stroke; }
.square-lines span { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: var(--muted); background: var(--paper); padding: .3rem .55rem; font-size: .62rem; font-weight: 700; letter-spacing: .12em; }
.inline-feedback { min-height: 2rem; margin: 1.25rem 0; font-weight: 600; color: var(--stable-dark); }
.magic-square + .inline-feedback { text-align: center; }
.stability-intro { background: linear-gradient(155deg,var(--paper) 0%,var(--paper) 70%,rgba(22,167,129,.07) 100%); }
.stability-explorer { display: grid; grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr); gap: 1.25rem; width: min(100%,76rem); margin: 0 auto; }
.stability-focus { min-width: 0; min-height: 34rem; padding: clamp(1.6rem,3.5vw,3rem); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; color: white; background: var(--stable-dark); border-radius: 1rem; box-shadow: 0 22px 55px rgba(8,118,95,.2); }
.stability-focus-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: #bcecdf; font-size: .72rem; font-weight: 700; letter-spacing: .1em; }
.stability-focus > div:nth-child(2) > p { margin: 0 0 .8rem; color: #bcecdf; font-size: .7rem; font-weight: 700; letter-spacing: .11em; }
.stability-focus h3 { max-width: 11ch; margin: 0 0 1.4rem; font-size: clamp(2.8rem,5.3vw,5.5rem); line-height: .86; letter-spacing: -.065em; overflow-wrap: normal; hyphens: manual; }
.stability-focus > div:nth-child(2) > strong { display: block; max-width: 34rem; color: #e5f4ef; font: 500 clamp(1.05rem,1.6vw,1.35rem)/1.45 Inter,sans-serif; }
.stability-signals { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; margin-top: 2.5rem; background: rgba(255,255,255,.22); }
.stability-signals span { padding: 1rem .75rem; background: var(--stable-dark); color: #d4eee7; font-size: .75rem; line-height: 1.35; }
.stability-signals b { display: block; margin-bottom: .3rem; color: white; font-size: .65rem; letter-spacing: .08em; }
.stability-lenses { min-width: 0; min-height: 34rem; overflow: hidden; border: 1px solid var(--line); border-radius: 1rem; background: var(--cream); box-shadow: 0 18px 45px rgba(16,35,49,.08); }
.stability-tabs { display: grid; grid-template-columns: repeat(3,1fr); border-bottom: 1px solid var(--line); }
.stability-tabs button { min-height: 3.5rem; border: 0; border-right: 1px solid var(--line); color: var(--muted); background: transparent; font-size: .68rem; font-weight: 700; letter-spacing: .07em; cursor: pointer; }
.stability-tabs button:last-child { border-right: 0; }
.stability-tabs button:hover { color: var(--ink); background: rgba(22,167,129,.06); }
.stability-tabs button[aria-selected=true] { color: white; background: var(--ink); }
#stability-detail { min-height: 29rem; padding: clamp(1.6rem,3.5vw,3rem); display: flex; flex-direction: column; }
#stability-detail.is-updating > * { animation: stability-detail-in .42s cubic-bezier(.2,.75,.2,1) both; }
#stability-detail.is-updating > *:nth-child(2) { animation-delay: .03s; }
#stability-detail.is-updating > *:nth-child(3) { animation-delay: .06s; }
#stability-detail.is-updating > *:nth-child(4) { animation-delay: .09s; }
@keyframes stability-detail-in { from { opacity: .3; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
#stability-detail > span { color: var(--stable-dark); font-size: .7rem; font-weight: 700; letter-spacing: .1em; }
#stability-detail h3 { margin: 1.1rem 0 .9rem; font-size: clamp(1.9rem,3.3vw,3.2rem); line-height: 1; letter-spacing: -.045em; }
#stability-detail > p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.65; }
.stability-detail-points { display: grid; margin-top: auto; padding-top: 2rem; }
.stability-detail-points div { display: grid; grid-template-columns: minmax(7rem,.38fr) minmax(0,1fr); gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--line); }
.stability-detail-points b { color: var(--stable-dark); font-size: .67rem; letter-spacing: .08em; }
.stability-detail-points span { color: var(--ink); font-size: .88rem; line-height: 1.4; }
.other-goals { max-width: 76rem; }
.other-goals > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-top: 1rem; background: var(--line); }
.other-goals > div span { padding: .9rem; color: var(--muted); background: var(--paper); font-size: .78rem; }
.other-goals > div b { color: var(--stable-dark); margin-right: .4rem; }
.deep-dive { max-width: 48rem; margin: 2.5rem auto 1rem; border-block: 1px solid var(--line); padding: 1rem 0; }
.deep-dive summary { cursor: pointer; font-weight: 700; font-family: "Space Grotesk"; }
.deep-dive p { color: var(--muted); margin: 1rem 0; }
.deep-dive a { color: var(--stable-dark); font-weight: 700; }
.person-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.25rem 0; }
.person-compare div { padding: 1rem; border: 1px solid var(--line); border-radius: .75rem; background: rgba(255,255,255,.55); }
.person-compare b, .person-compare span { display: block; }
.person-compare span { font-size: .85rem; color: var(--muted); margin: .4rem 0 .8rem; }
.person-compare i { display: block; width: var(--share); height: .45rem; border-radius: 1rem; background: var(--stable); }
.personal-inflation > small { display: block; color: var(--muted); }
.external-secondary { display: inline-block; margin-top: 1rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.source-link { display: block; width: max-content; max-width: 100%; margin: 1rem auto; color: var(--muted); font-size: .78rem; }
.contrast { background: var(--paper-2); }
.question-stage { max-width: 70rem; margin: 0 auto clamp(4.5rem, 7vw, 7rem); text-align: center; }
.question-stage h2 { font-size: clamp(2.5rem, 6vw, 6rem); line-height: 1; letter-spacing: -.06em; margin: 2rem 0 1rem; }
.big-question { font: 600 clamp(1.5rem, 3.4vw, 3.3rem) "Space Grotesk"; }
.choice-row { display: flex; justify-content: center; gap: 1rem; margin-top: 2rem; }
.choice-row button, .marketing-flow button { min-width: 7rem; min-height: 3.5rem; border: 1px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font-weight: 700; cursor: pointer; transition: .25s; }
.choice-row button:hover, .choice-row button.selected { background: var(--ink); color: white; }
.split-definitions { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 6rem; border-block: 1px solid var(--line); }
.split-definitions article { min-height: 25rem; padding: clamp(2rem,5vw,5rem); display: flex; flex-direction: column; justify-content: space-between; }
.split-definitions article + article { border-left: 1px solid var(--line); }
.split-definitions span { color: var(--stable-dark); font-size: .8rem; font-weight: 700; letter-spacing: .12em; }
.split-definitions strong { font-size: clamp(2rem,4vw,4rem); line-height: 1.05; }
.tag { width: fit-content; border: 1px solid var(--line); background: var(--cream); padding: .6rem .9rem; border-radius: .4rem; transform: rotate(-2deg); }
.mini-pulse { height: 5rem; display: flex; align-items: center; }
.mini-pulse i { display: block; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--stable) 10% 25%, transparent 25% 35%, var(--warm) 35% 62%, transparent 62% 70%, var(--hot)); transform: skewY(-5deg); }
.basket-lab { display: grid; grid-template-columns: minmax(17rem,.72fr) minmax(0,1.28fr); align-items: center; gap: clamp(2.5rem,5vw,5rem); }
.basket-lab h2, .index-lab h2, .rate-console h2, .training h2, .handout-callout h2, .sources h2 { font-size: clamp(2.5rem, 5vw, 5rem); line-height: .95; letter-spacing: -.055em; }
.basket-intro > p:not(.step) { max-width: 32rem; }
.basket-prompt { margin-top: 2rem; padding: 1rem 0 0 1.15rem; border-left: 3px solid var(--stable); color: var(--muted); }
.basket-prompt b { color: var(--ink); }
.basket { background: var(--cream); border: 1px solid var(--line); border-radius: 1.25rem; padding: 1.4rem; box-shadow: 0 18px 50px rgba(16,35,49,.08); }
.basket-current { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .15rem 1rem; align-items: center; margin-bottom: .9rem; padding: .95rem 1rem; border-radius: .8rem; color: white; background: var(--stable-dark); text-decoration: none; }
.basket-current span { min-width: 0; }
.basket-current small { display: block; color: #9ee5cf; font-size: .58rem; font-weight: 700; letter-spacing: .08em; }
.basket-current b { display: block; overflow: hidden; margin-top: .15rem; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.basket-current strong { grid-row: 1 / span 2; grid-column: 2; color: white; font-size: 1.75rem; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.basket-current em { color: #c9d9d4; font-size: .65rem; font-style: normal; }
.basket-current:hover { background: #07684f; }
.basket-presets { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .85rem; }
.basket-presets button { min-height: 2.5rem; padding: .55rem .75rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: transparent; font-size: .62rem; font-weight: 700; letter-spacing: .04em; cursor: pointer; }
.basket-presets button[aria-pressed=true] { color: white; border-color: var(--stable-dark); background: var(--stable-dark); }
.basket-adjusted-total { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; padding: .7rem .85rem; border: 1px solid rgba(8,118,95,.25); border-radius: .7rem; color: var(--stable-dark); background: rgba(22,167,129,.07); }
.basket-adjusted-total[hidden] { display: none; }
.basket-adjusted-total span { font-size: .62rem; font-weight: 700; letter-spacing: .06em; }
.basket-adjusted-total output { font: 700 1.45rem/1 "Space Grotesk"; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.basket-adjusted-total output.basket-total-hot { color: var(--hot); }
.basket-adjusted-total output.basket-total-cold { color: var(--cold); }
.basket-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; }
.basket-item { min-width: 0; min-height: 5.2rem; padding: .75rem; border: 1px solid transparent; border-radius: .7rem; color: var(--ink); background: var(--paper-2); display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: .65rem; opacity: 0; transform: translateY(-14px); text-align: left; cursor: pointer; transition: opacity .45s, transform .45s, background .25s, border-color .25s, box-shadow .25s; touch-action: manipulation; }
.basket-item.visible { opacity: 1; transform: translateY(0); }
.basket-item:hover { border-color: rgba(8,118,95,.35); }
.basket-item[aria-pressed=true] { border-color: var(--stable); background: white; box-shadow: inset 0 0 0 1px var(--stable), 0 8px 20px rgba(8,118,95,.1); }
.basket-icon { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border: 1px solid var(--stable); border-radius: .48rem; color: var(--stable-dark); font: 700 .65rem "Space Grotesk"; }
.basket-copy { display: grid; min-width: 0; grid-template-columns: minmax(0,1fr) auto; gap: .28rem .55rem; align-items: center; }
.basket-copy b { min-width: 0; overflow: hidden; font: 700 .9rem "Space Grotesk"; text-overflow: ellipsis; white-space: nowrap; }
.basket-copy small, .basket-copy em { color: var(--muted); font-size: .7rem; line-height: 1; white-space: nowrap; font-style: normal; }
.basket-copy em { justify-self: end; }
.basket-change-badge { min-width: 3.3rem; padding: .2rem .36rem; border-radius: 999px; color: var(--stable-dark); background: rgba(22,167,129,.1); font: 700 .68rem "Space Grotesk"; text-align: center; font-variant-numeric: tabular-nums; }
.basket-item.basket-hot .basket-change-badge { color: #a83422; background: rgba(229,88,62,.12); }
.basket-item.basket-down .basket-change-badge { color: var(--cold); background: rgba(57,123,168,.12); }
.basket-bar { grid-column: 1/-1; display: block; height: .28rem; overflow: hidden; border-radius: 999px; background: rgba(16,35,49,.1); }
.basket-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--stable); transition: width .7s cubic-bezier(.2,.75,.2,1) .18s; }
.basket-item.visible .basket-bar i { width: var(--weight); }
.basket.ready { box-shadow: 0 24px 60px rgba(8,118,95,.12); }
.basket-editor { display: grid; grid-template-columns: minmax(0,.85fr) minmax(15rem,1.15fr); gap: 1.25rem; align-items: center; margin-top: .85rem; padding: 1.1rem; border-radius: .85rem; color: white; background: var(--navy); }
.basket-editor-head { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .8rem; align-items: start; }
.basket-editor-head > span { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid #79d9bb; border-radius: .6rem; color: #9ee5cf; font: 700 .8rem "Space Grotesk"; }
.basket-editor-head small, .basket-math small { display: block; color: #9baab2; font-size: .58rem; font-weight: 700; letter-spacing: .08em; }
.basket-editor-head strong { display: block; margin-top: .15rem; font-size: 1.1rem; line-height: 1.2; }
.basket-editor-head p { margin: .3rem 0 0; color: #b7c1c6; font-size: .72rem; line-height: 1.35; }
.basket-control label { display: flex; align-items: center; justify-content: space-between; gap: .8rem; color: #c6d0d5; font-size: .64rem; font-weight: 700; letter-spacing: .06em; }
.basket-control output { color: var(--warm); font: 700 1.05rem "Space Grotesk"; font-variant-numeric: tabular-nums; }
.basket-control input[type=range] { accent-color: var(--warm); }
.basket-math { display: grid; grid-template-columns: .7fr 1.3fr; gap: .8rem; padding-top: .55rem; border-top: 1px solid rgba(255,255,255,.12); }
.basket-math b { display: block; margin-top: .15rem; color: white; font-size: .78rem; line-height: 1.25; font-variant-numeric: tabular-nums; }
.basket-formula { margin: .55rem 0 0; color: #9ee5cf; font: 600 .68rem/1.35 "Space Grotesk"; font-variant-numeric: tabular-nums; }
.basket-note { margin: .8rem .15rem 0; color: var(--muted); font-size: .68rem; line-height: 1.4; }
.concept-flow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .75rem; margin: 4rem auto 0; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .07em; }
.concept-flow span { padding: .5rem .75rem; border-radius: 999px; border: 1px solid var(--line); }
.concept-flow .current { color: white; border-color: var(--stable); background: var(--stable); }
.concept-flow i { color: var(--stable-dark); font-style: normal; }
.weighting { max-width: 58rem; margin: 6rem auto; }
.weighting h3 { font-size: clamp(2rem, 4vw, 4rem); margin-bottom: 1rem; }
.weighting > strong { font-size: clamp(3rem, 7vw, 6rem); color: var(--hot); }
.weight-bars { margin: 3rem 0; display: grid; gap: 1.1rem; }
.weight-bars div { display: grid; grid-template-columns: 8rem 1fr 7rem; align-items: center; gap: 1rem; font-size: .8rem; }
.weight-bars i { display: block; height: .9rem; width: var(--w); background: var(--stable); border-radius: 1rem; }
.index-lab { margin-top: 6rem; }
.timeline { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 1.2rem; margin: 4rem 0; }
.timeline > div { text-align: center; padding: 2.5rem 1rem; background: var(--cream); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(16,35,49,.06); }
.timeline span, .timeline small { display: block; font-size: .72rem; color: var(--muted); }
.timeline strong { display: block; font-size: clamp(2.2rem,5vw,4.5rem); margin: .75rem 0; }
.timeline > i { width: 2rem; height: 1px; background: var(--ink); }
.formula-card { background: var(--navy); color: white; padding: clamp(1.6rem,4vw,3rem); border-radius: var(--radius); }
.formula-intro { display: grid; grid-template-columns: minmax(9rem,.35fr) minmax(0,1fr); gap: 1.25rem 2rem; align-items: start; }
.formula-intro span { color: var(--warm); font-size: .68rem; font-weight: 700; letter-spacing: .1em; }
.formula-intro p { max-width: 48rem; margin: 0; color: #d0d9de; line-height: 1.6; }
.formula-card code { display: block; margin: 2rem 0; padding: 1.1rem 1.25rem; color: #9ee5cf; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12); border-radius: .75rem; font-size: clamp(.9rem,1.8vw,1.32rem); line-height: 1.5; white-space: normal; }
.formula-card code span { color: white; font-weight: 700; }
.formula-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: .8rem; background: rgba(255,255,255,.14); }
.formula-steps article { min-width: 0; min-height: 12rem; padding: 1.25rem; background: var(--navy); }
.formula-steps article > span { color: #9ee5cf; font-size: .64rem; font-weight: 700; letter-spacing: .08em; }
.formula-steps strong { display: block; margin: 1rem 0 .7rem; color: white; font: 700 clamp(.94rem,1.5vw,1.16rem)/1.35 "Space Grotesk"; }
.formula-steps p { margin: 0; color: #aebbc2; font-size: .82rem; line-height: 1.5; }
.formula-steps p b { color: white; }
.calculation { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.14); }
.calculation span { color: #b7c3c9; }
.calculation strong { color: var(--warm); font-size: clamp(1.7rem,3.8vw,3rem); line-height: 1; text-align: right; }
.index-terms { margin: 4rem 0 2rem; }
.index-terms-head { display: grid; grid-template-columns: .55fr 1fr; gap: .4rem 2rem; align-items: end; margin-bottom: 2rem; }
.index-terms-head > span { grid-column: 1/-1; color: var(--stable-dark); font-size: .68rem; font-weight: 700; letter-spacing: .1em; }
.index-terms-head h3 { margin: 0; font-size: clamp(2rem,4vw,3.6rem); line-height: 1; letter-spacing: -.045em; }
.index-terms-head p { margin: 0; color: var(--muted); line-height: 1.55; }
.vpi-hvpi { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: stretch; gap: 1rem; }
.vpi-hvpi article { padding: 1.5rem; border: 1px solid var(--line); border-top: 3px solid var(--stable); border-radius: .8rem; background: var(--cream); }
.vpi-hvpi article > span { display: block; margin-bottom: 1rem; color: var(--stable-dark); font-size: .64rem; font-weight: 700; letter-spacing: .09em; }
.vpi-hvpi b { display: block; font-size: clamp(1.05rem,1.8vw,1.35rem); line-height: 1.25; }
.vpi-hvpi p { color: var(--muted); line-height: 1.55; }
.vpi-hvpi > i { align-self: center; color: var(--muted); font: 700 .62rem/1.5 "Space Grotesk"; text-align: center; letter-spacing: .07em; }

.purchase { background: var(--cream); }
.purchase h2 span { color: var(--stable-dark); }
.sim-grid { display: grid; grid-template-columns: .62fr 1.38fr; gap: clamp(2rem,5vw,5rem); max-width: 76rem; margin: auto; }
.controls { padding: 2rem 0; }
.controls label, .rate-control label { display: flex; justify-content: space-between; font-size: .8rem; font-weight: 700; letter-spacing: .08em; margin: 1.5rem 0 .5rem; }
.controls output, .rate-control output { color: var(--stable-dark); }
input[type=range] { width: 100%; accent-color: var(--stable); min-height: 2.5rem; }
.controls small { display: block; color: var(--muted); margin-top: 2rem; }
.purchase-controls { align-self: center; }
.purchase-factor { display: grid; grid-template-columns: 1fr auto; gap: .35rem 1rem; margin-top: 2rem; padding: 1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.purchase-factor span { align-self: end; color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .09em; }
.purchase-factor strong { grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--ink); font: 700 clamp(1.55rem,3vw,2.15rem)/1 "Space Grotesk"; font-variant-numeric: tabular-nums; }
.purchase-factor code { color: var(--stable-dark); font: 600 .84rem/1.4 "Space Grotesk"; }
.purchase-stage { --year-progress: 50%; --power: 90.57%; position: relative; min-width: 0; overflow: hidden; padding: clamp(1.4rem,3.5vw,2.7rem); border-radius: var(--radius); color: white; background: radial-gradient(circle at 84% 16%,rgba(31,170,130,.18),transparent 31%),linear-gradient(145deg,#081925,#102939); box-shadow: 0 1.5rem 4rem rgba(16,35,49,.14); }
.purchase-stage:before { content: ""; position: absolute; right: -7rem; bottom: -8rem; width: 20rem; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.07); border-radius: 50%; box-shadow: 0 0 0 3rem rgba(255,255,255,.018),0 0 0 6rem rgba(255,255,255,.012); pointer-events: none; }
.journey-head { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.journey-head span { color: #91dfc8; font-size: .7rem; font-weight: 700; letter-spacing: .12em; }
.journey-head h3 { margin: .45rem 0 0; color: white; font-size: clamp(1.6rem,3.4vw,2.65rem); line-height: 1.05; letter-spacing: -.035em; }
.journey-head output { flex: 0 0 auto; padding: .55rem .75rem; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: #d8e5e9; font-size: .7rem; font-weight: 700; letter-spacing: .08em; }
.time-track { position: relative; height: 6.7rem; margin: 1.4rem 0 .5rem; }
.time-rail { position: relative; height: 100%; margin-inline: 1.7rem; }
.time-rail:before,.time-rail > i { content: ""; position: absolute; top: 2.05rem; left: 0; height: 2px; border-radius: 1rem; }
.time-rail:before { width: 100%; background: rgba(255,255,255,.16); }
.time-rail > i { width: var(--year-progress); background: linear-gradient(90deg,#f3a638,#1fae82); box-shadow: 0 0 1rem rgba(31,174,130,.3); transition: width .35s ease; }
.journey-token { position: absolute; z-index: 2; top: .55rem; left: var(--year-progress); display: flex; align-items: center; justify-content: center; width: 3.1rem; aspect-ratio: 1; border: 4px solid #102939; border-radius: 50%; color: var(--ink); background: white; box-shadow: 0 .4rem 1rem rgba(0,0,0,.2); transform: translateX(-50%); transition: left .35s ease; }
.time-ticks { position: absolute; left: 0; right: 0; top: 4.25rem; color: #8fa1aa; font-size: .58rem; font-weight: 700; letter-spacing: .05em; }
.time-ticks span { position: absolute; left: var(--tick); width: max-content; text-align: center; transform: translateX(-50%); }
.time-ticks span:first-child { text-align: left; transform: none; }
.time-ticks span:last-child { text-align: right; transform: translateX(-100%); }
.purchase-comparison { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr .92fr; gap: 1rem; }
.purchase-comparison article { min-width: 0; padding: clamp(1.25rem,2.7vw,2rem); border: 1px solid rgba(255,255,255,.13); border-radius: 1rem; background: rgba(255,255,255,.055); }
.purchase-comparison article > span { color: #9eb0b9; font-size: .68rem; font-weight: 700; letter-spacing: .1em; }
.price-transition { display: block; margin-top: 1.6rem; }
.price-transition small { color: #9eb0b9; font-size: .65rem; font-weight: 700; letter-spacing: .06em; }
.price-transition small b { display: inline-block; margin-left: .45rem; color: white; font-size: 1rem; letter-spacing: 0; }
.price-transition i { display: inline-block; margin-left: .55rem; color: var(--warm); font: 500 1.2rem/1 "Space Grotesk"; transform: translateY(.08rem); }
.price-transition strong { display: block; width: 100%; margin-top: 1rem; color: white; font: 700 clamp(2.15rem,4.1vw,3.25rem)/.95 "Space Grotesk"; letter-spacing: -.05em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cost-increase { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.12); }
.cost-increase span { color: #9eb0b9; font-size: .64rem; font-weight: 700; letter-spacing: .08em; }
.cost-increase output { color: var(--warm); font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.power-orbit { display: flex; flex-direction: column; align-items: center; }
.power-orbit > span { align-self: stretch; }
.power-dial { position: relative; display: grid; place-items: center; width: min(11rem,80%); aspect-ratio: 1; margin: 1.35rem auto .85rem; border-radius: 50%; background: conic-gradient(from -90deg,var(--stable) 0 var(--power),rgba(255,255,255,.1) var(--power) 100%); box-shadow: 0 0 0 .35rem rgba(255,255,255,.035); transition: background .35s ease; }
.power-dial:after { content: ""; position: absolute; inset: .72rem; border-radius: 50%; background: #122b3a; box-shadow: inset 0 0 1.5rem rgba(0,0,0,.18); }
.power-dial div { position: relative; z-index: 1; text-align: center; }
.power-dial small { display: block; margin-bottom: .35rem; color: #9eb0b9; font-size: .56rem; font-weight: 700; line-height: 1.25; letter-spacing: .08em; }
.power-dial strong { color: white; font: 700 clamp(1.35rem,2.8vw,2rem)/1 "Space Grotesk"; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.power-orbit p { margin: auto 0 0; color: #b9c7ce; font-size: .88rem; text-align: center; }
.power-orbit p b { color: var(--warm); }
.journey-insight { position: relative; z-index: 1; margin: 1.4rem 0 0; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.12); color: #b8c6cd; font-size: .9rem; line-height: 1.55; }
.journey-insight b { color: white; }
.journey-insight strong { color: #91dfc8; }
.purchase-stage.is-updating .journey-token { animation: journey-pulse .35s ease; }
@keyframes journey-pulse { 50% { transform: translateX(-50%) scale(1.12); } }
blockquote { margin: clamp(4rem,7vw,7rem) auto 2rem; max-width: 64rem; text-align: center; font: 500 clamp(2rem,5vw,5rem)/1.05 "Space Grotesk"; letter-spacing: -.04em; }
blockquote b { color: var(--stable-dark); }

.inflation-scale { max-width: 70rem; margin: auto; padding: 3rem 0; }
.scale-labels { position: relative; height: 3.4rem; color: var(--muted); font-size: .68rem; font-weight: 700; }
.scale-labels span { position: absolute; left: var(--pos); bottom: 0; width: max-content; max-width: 9rem; text-align: center; transform: translateX(-50%); }
.scale-labels span:first-child { transform: none; text-align: left; }
.scale-labels span:last-child { transform: translateX(-100%); text-align: right; }
.scale-labels .target-label { color: var(--ink); }
.scale-labels b { color: var(--ink); }
.inflation-scale input { appearance: none; height: 2.65rem; margin: 1.2rem 0; background: transparent; }
.inflation-scale input::-webkit-slider-runnable-track { height: .65rem; border-radius: 2rem; background: linear-gradient(90deg,var(--cold) 0%,#9bb7c4 20%,var(--stable) 34%,var(--warm) 67%,var(--hot) 100%); }
.inflation-scale input::-webkit-slider-thumb { appearance: none; width: 1.7rem; height: 1.7rem; margin-top: -.52rem; border: 4px solid white; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.inflation-scale input::-moz-range-track { height: .65rem; border-radius: 2rem; background: linear-gradient(90deg,var(--cold) 0%,#9bb7c4 20%,var(--stable) 34%,var(--warm) 67%,var(--hot) 100%); }
.inflation-scale input::-moz-range-thumb { width: 1.25rem; height: 1.25rem; border: 4px solid white; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.scale-readout { display: flex; align-items: baseline; justify-content: center; gap: 1.5rem; }
.scale-readout strong { font-size: clamp(3rem,7vw,6rem); }
.scale-readout span { color: var(--muted); }
.classification { max-width: 60rem; margin: 5rem auto 0; padding: clamp(2rem,5vw,4rem); background: var(--paper-2); border-radius: var(--radius); }
.axis-title { margin: 2rem 0 -.75rem; color: var(--muted); font-size: .65rem; font-weight: 700; letter-spacing: .1em; }
.axis { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; font-size: .75rem; font-weight: 700; margin: 1.25rem 0; }
.axis button { border: 0; border-radius: 999px; padding: .65rem .85rem; color: var(--ink); background: white; font-weight: 700; cursor: pointer; }
.axis button:hover, .axis button.active { color: white; background: var(--ink); }
.axis i { height: 4px; background: linear-gradient(90deg,var(--warm),var(--hot)); }
.axis.visibility i { background: repeating-linear-gradient(90deg,var(--ink) 0 12px,transparent 12px 20px); }
.classification > p:last-child { color: var(--muted); }
.type-feedback { min-height: 4rem; margin: 2rem 0 1rem; padding: 1rem 1.2rem; border-left: 3px solid var(--stable); background: rgba(255,255,255,.56); }

#ursachen { background: var(--navy); }
#ursachen .section-head > p:last-child { color: #aab5bb; }
.cause-switch { display: flex; flex-wrap: wrap; gap: .6rem; border-bottom: 1px solid rgba(255,255,255,.15); }
.cause-switch button { border: 0; background: transparent; color: #9ca9b0; padding: 1rem 1.2rem; font-weight: 700; cursor: pointer; }
.cause-switch button[aria-selected=true] { color: white; border-bottom: 3px solid var(--stable); }
.cause-visual { min-height: 0; padding: clamp(2.25rem,4vw,3.75rem) 0 1rem; }
.cause-copy { width: 100%; }
.cause-copy h3 { max-width: 24ch; margin-bottom: 0; font-size: clamp(2.25rem,4vw,3.8rem); line-height: .98; letter-spacing: -.04em; }
.cause-copy > p { max-width: 54rem; margin: 0; color: #b3bec4; }
.chain { counter-reset: cause-step; display: grid; grid-template-columns: repeat(var(--steps,4),minmax(0,1fr)); gap: 1.3rem; align-items: stretch; margin: 2.4rem 0 1.75rem; }
.chain span { counter-increment: cause-step; position: relative; display: grid; place-items: center; min-height: 7rem; padding: 2rem .9rem .9rem; border: 1px solid rgba(255,255,255,.22); border-radius: .65rem; background: rgba(255,255,255,.025); font: 600 clamp(.88rem,1.15vw,1rem)/1.4 "Space Grotesk"; overflow-wrap: anywhere; text-align: center; animation: chain-in .45s both; }
.chain span:before { content: "0" counter(cause-step); position: absolute; left: .75rem; top: .65rem; color: var(--stable); font-size: .75rem; letter-spacing: .08em; }
.chain span:not(:last-child):after { content: "→"; position: absolute; right: -.92rem; top: 50%; color: var(--warm); font-size: 1rem; transform: translateY(-50%); }
.chain span:nth-child(2){animation-delay:.08s}.chain span:nth-child(3){animation-delay:.16s}.chain span:nth-child(4){animation-delay:.24s}.chain span:nth-child(5){animation-delay:.32s}
@keyframes chain-in { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: translateY(0); } }

.deflation { background: #e7eff4; }
.deflation-intro { text-align: center; }
.deflation-intro h2 { font-size: clamp(4rem,12vw,11rem); letter-spacing: -.08em; line-height: .8; color: var(--cold); margin: 2rem 0; }
.deflation-intro > p { font: 600 clamp(1.8rem,4vw,3.5rem) "Space Grotesk"; }
.deflation-chain { max-width: 48rem; margin: 5rem auto; padding: 0; list-style: none; counter-reset: def; }
.deflation-chain li { opacity: .18; transform: translateY(-.5rem); padding: 1.2rem 1.5rem 1.2rem 4.5rem; border-bottom: 1px solid rgba(57,123,168,.25); position: relative; transition: .6s; }
.deflation-chain li.visible { opacity: 1; transform: translateY(0); }
.deflation-chain li:before { counter-increment: def; content: "0" counter(def); position: absolute; left: .75rem; font-weight: 700; color: var(--cold); }
.note { text-align: center; color: var(--muted); font-size: .85rem; }
.deflation blockquote b { color: var(--cold); }

.target-hero { text-align: center; }
.target-hero > strong { display: block; font-size: clamp(8rem,20vw,17rem); color: var(--stable-dark); letter-spacing: -.1em; line-height: .8; }
.target-hero h2 { font-size: clamp(2rem,5vw,4.5rem); }
.target-line { max-width: 50rem; margin: 4rem auto; display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; font-size: .75rem; font-weight: 700; }
.target-line i { height: 4px; background: linear-gradient(90deg,var(--cold),var(--stable),var(--hot)); position: relative; }
.target-line b { position: absolute; left: 36%; top: 50%; width: 1.2rem; height: 1.2rem; transform: translate(-50%,-50%); border: 4px solid white; background: var(--stable); border-radius: 50%; box-shadow: 0 0 0 1px var(--stable); }
.target-intro { max-width: 53rem; margin: 0 auto; text-align: center; font-size: 1.15rem; }
.reasons { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); margin: 4.5rem 0 2rem; border-block: 1px solid var(--line); }
.reasons article { background: var(--paper); padding: clamp(2rem,3vw,3rem); min-height: 17rem; }
.reasons span { color: var(--stable-dark); font-weight: 700; }
.reasons h3 { font-size: clamp(1.3rem,2.4vw,2rem); line-height: 1.12; margin: 2.5rem 0 1rem; }
.reasons p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.rate-console { display: block; margin: 6rem 0 4rem; padding: clamp(2rem,5vw,5rem); background: var(--navy); color: white; border-radius: var(--radius); box-shadow: var(--shadow); }
.rate-console-head { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(18rem,.75fr); gap: 2rem 5rem; align-items: end; }
.rate-console-head h2 { max-width: 13ch; margin-bottom: 0; }
.rate-console-head > div:last-child p { color: white; }
.simulation-question { color: white !important; font-size: 1.12rem; font-weight: 600; }
.rate-console small { color: #aeb9bf; }
.rate-control { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.16); }
.rate-control label { margin-top: 0; }
.rate-control output { color: var(--warm); }
.rate-control input { accent-color: var(--warm); }
.transmission { margin-top: 1.5rem; }
.policy-impact { overflow: hidden; border: 1px solid rgba(255,255,255,.17); border-radius: .9rem; background: rgba(255,255,255,.025); }
.policy-impact > header { display: grid; grid-template-columns: minmax(10rem,.34fr) minmax(12rem,.4fr) minmax(0,1fr); gap: 1.25rem; align-items: center; padding: 1.35rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,.16); }
.policy-impact > header span, .policy-impact article small, .policy-impact aside b { color: #8fa0a9; font-size: .68rem; font-weight: 700; letter-spacing: .09em; }
.policy-impact > header strong { color: var(--warm); font-size: clamp(1.25rem,2.4vw,2.1rem); line-height: 1; }
.policy-impact.neutral > header strong { color: #b7c4ca; }
.policy-impact.down > header strong { color: #72d8bb; }
.policy-impact > header p { margin: 0; color: #b8c3c8; font-size: .9rem; line-height: 1.5; }
.impact-journey { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
.impact-journey article { position: relative; min-width: 0; min-height: 15rem; padding: 1.5rem; border-right: 1px solid rgba(255,255,255,.14); }
.impact-journey article:last-child { border-right: 0; }
.impact-journey article > span { display: grid; place-items: center; width: 2rem; height: 2rem; margin-bottom: 2.5rem; border: 1px solid rgba(114,216,187,.55); border-radius: 50%; color: #9ee5cf; font-size: .68rem; font-weight: 700; }
.impact-journey article:not(:last-child):after { content: ""; position: absolute; left: calc(100% - 1rem); top: 2.48rem; z-index: 2; width: 2rem; height: 1px; background: var(--warm); }
.impact-journey small { display: block; min-height: 2.2rem; }
.impact-journey strong { display: block; min-height: 3.4rem; margin: .75rem 0; color: white; font-size: clamp(1.15rem,1.7vw,1.45rem); line-height: 1.15; }
.impact-journey p { margin: 0; color: #aebac0; font-size: .86rem; line-height: 1.55; }
.policy-impact aside { display: grid; grid-template-columns: minmax(10rem,.3fr) minmax(0,1fr); gap: 1.5rem; padding: 1.25rem 1.5rem; border-top: 1px solid rgba(255,255,255,.16); background: rgba(243,166,56,.055); }
.policy-impact aside b { color: var(--warm); }
.policy-impact aside p { margin: 0; color: #d1d9dc; font-size: .9rem; }
.reality-divider { display: flex; align-items: center; gap: 1rem; max-width: 60rem; margin: 0 auto 1.5rem; color: var(--hot); font-size: .72rem; font-weight: 700; letter-spacing: .12em; }
.reality-divider i { flex: 1; height: 1px; background: var(--warm); }
.current-box { max-width: 60rem; margin: auto; padding: clamp(2rem,4vw,4rem); border: 1px solid var(--warm); border-radius: var(--radius); }
.current-box > span { color: var(--hot); font-weight: 700; font-size: .75rem; letter-spacing: .1em; }
.current-box h3 { font-size: clamp(1.6rem,3vw,2.6rem); line-height: 1.15; margin: 1rem 0; }
.current-box p { color: var(--muted); }
.current-box a { font-size: .8rem; color: var(--stable-dark); font-weight: 700; }

.marketing { background: var(--warm); }
.marketing .step { color: var(--ink); }
.marketing-flow { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.marketing-flow button { padding: 1rem 1.4rem; }
.marketing-flow button:hover, .marketing-flow button.selected { background: var(--ink); color: white; }
.marketing-scene { max-width: 54rem; min-height: 11rem; margin: 2rem auto; padding: clamp(1.5rem,3vw,2.5rem); border-block: 1px solid rgba(16,35,49,.28); display: grid; align-items: center; }
.marketing-scene > div { display: grid; gap: .8rem; }
.marketing-scene .scene-label { color: rgba(16,35,49,.72); font-size: .72rem; font-weight: 700; letter-spacing: .1em; }
.marketing-scene strong { font-size: clamp(1.4rem,3vw,2.4rem); line-height: 1.1; }
.marketing-scene .scene-value { display: grid; gap: .2rem; color: var(--ink); font-size: clamp(2rem,4vw,3.5rem); line-height: 1.02; letter-spacing: -.045em; }
.marketing-scene .scene-line { display: flex; align-items: baseline; gap: .55rem; font: inherit; letter-spacing: inherit; white-space: nowrap; }
.marketing-scene .scene-line em { color: var(--ink); font-style: normal; }
.marketing-scene .scene-detail { color: rgba(16,35,49,.72); }
.marketing-question { max-width: 54rem; margin: 6rem auto 0; text-align: center; padding-top: 3rem; border-top: 1px solid rgba(16,35,49,.3); }
.marketing-question > span { font: 700 clamp(3rem,7vw,6rem) "Space Grotesk"; letter-spacing: -.06em; }
.marketing-question > p { font-size: 1.2rem; }
.marketing-question .inline-feedback { color: var(--ink); }

.training { background: var(--navy); color: white; }
.training-intro { min-height: 0; display: grid; place-content: center; padding: 2rem 0 4rem; text-align: center; }
.training-intro > span { color: var(--stable); font-weight: 700; font-size: .8rem; letter-spacing: .1em; }
.training-intro h2 { font-size: clamp(3.5rem,9vw,8rem); margin: 1.5rem 0; }
.training-intro .primary { justify-self: center; margin-top: 1.5rem; }
#training-app { max-width: 74rem; margin: auto; scroll-margin-top: 10rem; }
.training-bar { position: sticky; top: 4.6rem; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; background: rgba(11,27,41,.94); backdrop-filter: blur(10px); }
.training-bar > div { flex: 1; }
.training-bar span { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .1em; margin-bottom: .5rem; }
.training-progress { height: .35rem; background: rgba(255,255,255,.12); border-radius: 1rem; }
.training-progress i { display: block; width: 0; height: 100%; background: var(--stable); border-radius: 1rem; transition: width .4s; }
.training-bar button { border: 0; color: #aab5bb; background: transparent; font-size: .7rem; font-weight: 700; cursor: pointer; }
.challenge { display: none; padding: clamp(3.5rem,6vw,6rem) 0 2rem; min-height: 70vh; scroll-margin-top: 10rem; }
.challenge.active { display: block; }
.challenge .step { color: #72d8bb; }
.challenge > h2 { max-width: 60rem; }
.challenge > p { color: #b0bbc0; }
.contribution-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin: 4rem 0; align-items: end; }
.contribution-grid button { min-height: 10rem; color: white; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); padding: 1.3rem; text-align: left; cursor: pointer; }
.contribution-grid button:hover, .contribution-grid button.selected { border-color: var(--stable); transform: translateY(-3px); }
.contribution-grid span, .contribution-grid b { display: block; }
.contribution-grid span { color: #aeb9bf; font-size: .8rem; }
.contribution-grid b { margin-top: 2rem; font-size: 1.2rem; }
.challenge-feedback { margin: 2rem 0; min-height: 3rem; color: #9ee5cf; }
.challenge-feedback .bars { display: grid; gap: .5rem; margin-top: 1rem; }
.challenge-feedback .bars span { display: grid; grid-template-columns: 8rem 1fr 4rem; gap: 1rem; font-size: .75rem; }
.challenge-feedback .bars i { height: .7rem; width: var(--bar); background: var(--stable); border-radius: 1rem; }
.next-challenge { min-height: 3rem; border: 0; border-radius: 999px; padding: .8rem 1.2rem; background: var(--stable); color: white; font-weight: 700; cursor: pointer; }
.next-challenge:disabled { opacity: .3; cursor: not-allowed; }
.subtask, .decision-block { margin: 2rem 0; padding: clamp(1.3rem,3vw,2.4rem); border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius); }
.subtask > p, .subtask label { font-weight: 700; display: block; margin-bottom: 1rem; }
.options { display: grid; gap: .65rem; }
.options button, .dropzones button { min-height: 3.5rem; padding: .85rem 1rem; border: 1px solid rgba(255,255,255,.17); border-radius: .65rem; color: white; background: rgba(255,255,255,.04); text-align: left; cursor: pointer; transition: .25s; }
.options button:hover, .options button.selected, .dropzones button:hover { border-color: var(--stable); background: rgba(22,167,129,.12); }
.options button.correct { border-color: var(--stable); background: rgba(22,167,129,.18); }
.options button.wrong { border-color: rgba(229,88,62,.7); }
.input-row { display: flex; gap: .5rem; }
.input-row input { flex: 1; min-height: 3.4rem; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: white; border-radius: .6rem; padding: .8rem 1rem; }
.input-row button { border: 0; border-radius: .6rem; padding: .8rem 1.2rem; background: var(--stable); color: white; font-weight: 700; }
.detective-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 2rem; margin: 3rem 0; }
.scenario-list { display: grid; gap: .8rem; }
.scenario { border-left: 3px solid rgba(255,255,255,.18); padding: 1rem 1.2rem; background: rgba(255,255,255,.04); cursor: pointer; }
.scenario.selected { border-color: var(--warm); background: rgba(243,166,56,.1); }
.scenario.done { opacity: .88; border-color: var(--stable); }
.scenario span { display: block; margin-bottom: .45rem; color: #9faab0; font-size: .72rem; letter-spacing: .06em; }
.scenario-result { display: block; width: fit-content; margin-top: .65rem; padding: .25rem .5rem; border-radius: 999px; color: #9ee5cf; background: rgba(22,167,129,.13); font-size: .68rem; font-weight: 700; }
.dropzones { display: grid; align-content: start; gap: .75rem; position: sticky; top: 9rem; }
.dropzones button { min-height: 5rem; }
.dropzones button.hover { transform: scale(1.02); border-color: var(--warm); }
.rapid-card { max-width: 48rem; margin: 3rem auto; padding: clamp(2rem,5vw,4rem); border: 1px solid rgba(255,255,255,.17); border-radius: var(--radius); }
.rapid-card > span { color: var(--stable); font-size: .75rem; font-weight: 700; }
.rapid-card > p { font: 600 clamp(1.5rem,3vw,2.6rem)/1.2 "Space Grotesk"; margin: 2rem 0; }
#rapid-next { display: inline-flex; align-items: center; justify-content: center; min-height: 2.8rem; margin: 1rem 0 0; border: 0; border-radius: 999px; padding: .7rem 1rem; color: white; background: var(--stable); font-weight: 700; cursor: pointer; }
.nova-head { display: flex; justify-content: space-between; gap: 1rem; align-items: end; padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,.18); }
.nova-head span { font: 700 1.5rem "Space Grotesk"; color: var(--warm); }
.nova-head small { color: #aab5bb; }
.nova-brief { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(17rem,.5fr); gap: 1px; margin: 3rem 0 4rem; overflow: hidden; border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius); background: rgba(255,255,255,.15); }
.nova-brief > div, .nova-brief aside { padding: clamp(1.5rem,3vw,2.5rem); background: rgba(255,255,255,.035); }
.nova-brief span, .phase-heading span, .policy-result-head > span, .policy-summary-grid span, .time-horizons span, .uncertainty-note span { color: #72d8bb; font-size: .7rem; font-weight: 700; letter-spacing: .1em; }
.nova-brief h3 { max-width: 42rem; margin: .85rem 0; font-size: clamp(1.7rem,3vw,2.7rem); line-height: 1.08; }
.nova-brief p { max-width: 45rem; margin: 0; color: #b4bec3; }
.nova-brief aside { background: rgba(22,167,129,.09); }
.nova-brief ol { margin: 1rem 0 0; padding-left: 1.2rem; color: #d7dedf; }
.nova-brief li + li { margin-top: .6rem; }
.nova-data { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin: 1px 0 4rem; background: rgba(255,255,255,.13); }
.nova-data article { min-height: 9.5rem; padding: 1.2rem; background: var(--navy); display: flex; flex-direction: column; justify-content: space-between; }
.nova-data span { color: #9ba8af; font-size: .75rem; }
.nova-data strong { font-size: clamp(1.5rem,3vw,2.5rem); }
.nova-data small { color: #72d8bb; font-size: .7rem; }
.institution-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.decision-block > span { color: var(--warm); font-size: .72rem; font-weight: 700; letter-spacing: .08em; }
.decision-feedback { min-height: 2.8rem; margin: .8rem 0 1.5rem; color: #9ee5cf !important; font-size: .82rem; }
.selection-hint { color: #b0bbc0; font-size: .8rem; }
.evidence-check { background: rgba(255,255,255,.025); }
.evidence-check > p { margin: 2rem 0 .75rem; color: #d8dedf; font-weight: 700; }
.phase-heading { max-width: 48rem; margin: 5rem 0 1.5rem; }
.phase-heading h3 { margin-top: .7rem; font-size: clamp(1.8rem,3.5vw,3.2rem); line-height: 1.08; }
.reasoning-check { margin-top: 3rem; }
.impact-chain { display: grid; grid-template-columns: repeat(5,1fr); gap: .6rem; margin: 1.5rem 0 2rem; }
.impact-chain span { padding: 1rem; min-height: 7rem; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(255,255,255,.15); border-radius: .6rem; font-size: .78rem; }
.impact-chain b { font-size: 1.8rem; color: var(--warm); }
#policy-results { scroll-margin-top: 10rem; }
.policy-results { margin-top: 3rem; padding: clamp(1.3rem,3vw,2.5rem); border: 1px solid rgba(114,216,187,.35); border-radius: var(--radius); background: linear-gradient(145deg,rgba(22,167,129,.1),rgba(255,255,255,.025) 45%); }
.policy-result-head { max-width: 53rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.15); }
.policy-result-head h3 { margin: .7rem 0; font-size: clamp(2rem,4.5vw,4.3rem); line-height: .98; }
.policy-result-head p { margin: 0; color: #b5c0c5; }
.policy-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 2rem 0 3rem; background: rgba(255,255,255,.16); }
.policy-summary-grid article { min-height: 10rem; padding: 1.3rem; background: var(--navy); }
.policy-summary-grid p { margin: 1rem 0 0; color: #b8c2c6; }
.policy-summary-grid b { color: white; }
.fiscal-summary { margin: 0 0 3rem; padding: 1.2rem 1.4rem; border-left: 3px solid var(--stable); color: #d6dddf !important; background: rgba(22,167,129,.08); }
.time-horizons { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0 4rem; }
.time-horizons article { padding: 1.4rem; border: 1px solid rgba(255,255,255,.15); border-radius: .8rem; }
.time-horizons p { margin: .8rem 0 0; color: #b4bec3; }
.final-goal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0 3rem; }
.final-goal-grid article { min-height: 14rem; padding: 1.4rem; border: 1px solid rgba(255,255,255,.16); border-radius: .9rem; background: rgba(255,255,255,.025); }
.final-goal-grid article.positive { border-color: rgba(22,167,129,.72); }
.final-goal-grid article.risk { border-color: rgba(243,166,56,.72); }
.final-goal-grid article.mixed { border-color: rgba(170,181,187,.35); }
.final-goal-grid span { color: #72d8bb; font-size: .7rem; font-weight: 700; letter-spacing: .08em; }
.final-goal-grid .risk span { color: var(--warm); }
.final-goal-grid h4 { min-height: 2.9rem; margin: 1.2rem 0 .8rem; font: 700 1.15rem/1.18 "Space Grotesk"; }
.final-goal-grid p { margin: 0; color: #b4bec3; font-size: .86rem; }
.uncertainty-note { margin: 2rem 0 3rem; padding: 1.4rem; border: 1px dashed rgba(243,166,56,.55); border-radius: .8rem; }
.uncertainty-note span { color: var(--warm); }
.uncertainty-note p { margin: .7rem 0 0; color: #c2cbce; }
.challenge blockquote { font-size: clamp(2rem,4vw,4rem); }
.challenge blockquote small { display: block; margin-top: 1.5rem; color: #aab5bb; font: 500 1rem/1.5 Inter,sans-serif; letter-spacing: 0; }

/* Vortrag: gleiche Lernreise, kompaktere Abstände und gut lesbare Kerntexte */
.mode-presentation { font-size: 1.04rem; }
.mode-presentation .section-head > p:last-child,
.mode-presentation .target-intro,
.mode-presentation .cause-copy > p,
.mode-presentation .formula-card > p,
.mode-presentation .formula-intro p,
.mode-presentation .formula-steps p,
.mode-presentation .vpi-hvpi p,
.mode-presentation .marketing-question > p { font-size: 1.12rem; line-height: 1.55; }
.mode-presentation .deep-dive { max-width: 54rem; }
.mode-presentation .source-link { opacity: .7; }
.mode-presentation .stability-focus, .mode-presentation .stability-lenses { min-height: 31rem; }
.mode-presentation #stability-detail { min-height: 26rem; }
.mode-presentation .formula-steps article { min-height: 10rem; }
.mode-presentation .cause-copy h3 { font-size: clamp(2.35rem,4vw,3.6rem); }
.mode-presentation .transmission span { font-size: .86rem; }
.mode-presentation .hero-reveal { max-width: 70rem; }
.mode-presentation .hero { min-height: 100vh; padding-block: clamp(7rem,10vw,9rem); }
.mode-presentation .hero-reveal { margin-top: 5rem; }
.mode-presentation .chapter, .mode-presentation .training, .mode-presentation .sources { padding-block: clamp(4rem,6vw,6rem); }
.mode-presentation .question-stage { margin-bottom: 4rem; }
.mode-presentation .split-definitions { margin-bottom: 4rem; }
.mode-presentation .weighting, .mode-presentation .index-lab { margin-block: 4rem; }
.mode-presentation .classification { margin-top: 4rem; }
.mode-presentation .rate-console { margin-block: 4rem 3rem; }
.mode-presentation blockquote { margin-top: 4rem; }
.results { padding: 6rem 0; text-align: center; scroll-margin-top: 10rem; }
.knowledge-profile { max-width: 48rem; margin: 4rem auto; display: grid; gap: 1rem; text-align: left; }
.knowledge-profile div { display: grid; grid-template-columns: 1fr 10rem; align-items: center; gap: 1rem; padding-bottom: .8rem; border-bottom: 1px solid rgba(255,255,255,.16); }
.knowledge-profile b { text-align: right; color: #9ee5cf; }
.result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 3rem; }
.training .secondary { color: white; border-color: rgba(255,255,255,.3); }

.handout-callout { text-align: center; background: var(--stable); color: white; }
.handout-callout .step { color: white; opacity: .75; }
.handout-callout p { font-size: 1.2rem; }
.handout-callout > div { display: flex; justify-content: center; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.handout-callout .primary { background: var(--navy); }
.handout-callout .secondary { border-color: white; color: white; }
.handout-callout .handout-placeholder { opacity: .55; cursor: not-allowed; box-shadow: none; }
.handout-callout .handout-placeholder:hover { transform: none; box-shadow: none; }
.sources { background: #0a1823; color: white; }
.sources h2 { margin-bottom: 4rem; }
.source-columns { display: grid; grid-template-columns: repeat(4,1fr); gap: 2rem; }
.source-columns h3 { color: #94a4ad; font-size: .75rem; letter-spacing: .08em; }
.source-columns a { display: block; color: #e6eded; margin: .8rem 0; font-size: .82rem; text-underline-offset: 3px; }
.source-note { color: #82929b; margin-top: 4rem; font-size: .75rem; }
@media (max-width: 980px) {
  .current-chapter { margin-right: auto; }.top-actions .mode-switch { display: none; }.mobile-mode-switch { display: flex; }
  .mobile-nav { grid-template-columns: 1fr 1fr; }
  .status { position: fixed; right: 1rem; bottom: 1rem; top: auto; padding: .65rem .8rem; border-radius: .75rem; color: white; background: rgba(11,27,41,.94); box-shadow: var(--shadow); }
  .status small { color: #aeb9bf; }
  .section-head, .basket-lab, .sim-grid, .cause-visual { grid-template-columns: 1fr; }
  .stability-explorer, .rate-console-head { grid-template-columns: 1fr; }
  .impact-journey { grid-template-columns: 1fr 1fr; }
  .impact-journey article:nth-child(2) { border-right: 0; }
  .impact-journey article:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.14); }
  .impact-journey article:nth-child(2):after { display: none; }
  .section-head { align-items: start; }.section-head > p:last-child { margin-top: 1rem; }
  .basket-lab { gap: 2.5rem; }.sim-grid { gap: 1.5rem; }.cause-visual { gap: 1rem; }
  .source-columns { grid-template-columns: 1fr 1fr; }
  .impact-chain { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 680px) {
  html { scroll-padding-top: 5rem; }
  section[id], .anchor-target { scroll-margin-top: 5rem; }
  .topbar { height: 4rem; padding-inline: 1rem; gap: .5rem; }.brand { font-size: .7rem; }.current-chapter { display: none; }.menu-toggle { margin-left: auto; }.mobile-nav { top: 4rem; grid-template-columns: 1fr; max-height: calc(100vh - 4rem); overflow-y: auto; }
  .phase-indicator { display: none; }
  .hero { min-height: 100vh; padding-top: 7rem; }.hero h1 { font-size: clamp(3.3rem,16vw,5.5rem); }
  .hero-stat { display: block; padding-bottom: 1.25rem; }.hero-stat strong { display: block; font-size: clamp(5.7rem,27vw,8rem); line-height: .86; margin-bottom: 1rem; }
  .price-cloud span:nth-child(3),.price-cloud span:nth-child(4),.price-cloud span:nth-child(6){display:none}
  .hero-reveal { margin-top: 8rem; }
  .section-head h2, .basket-lab h2, .index-lab h2, .rate-console h2, .training h2, .handout-callout h2, .sources h2 { font-size: clamp(2.6rem,13vw,4.4rem); }
  .magic-square { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-rows: auto auto auto; gap: 1.1rem 1rem; width: 100%; height: auto; min-height: 33rem; padding: 1rem 0; align-items: stretch; }
  .magic-square .goal { position: relative; inset: auto; width: 100%; min-height: 8rem; padding: .85rem; border-radius: .8rem; transform: none !important; }
  .magic-square .goal-top { grid-column: 1/-1; grid-row: 1; justify-self: center; width: min(74%,18rem); }
  .magic-square .goal-left { grid-column: 1; grid-row: 2; }
  .magic-square .goal-right { grid-column: 2; grid-row: 2; }
  .magic-square .goal-bottom { grid-column: 1/-1; grid-row: 3; justify-self: center; width: min(74%,18rem); }
  .magic-square .goal:hover, .magic-square .goal.active { transform: translateY(-3px) !important; }
  .goal b, .finale .goal b { font-size: clamp(.76rem,3.3vw,1rem); line-height: 1.12; margin-top: .7rem; }
  .goal-left b, .finale .goal-left b { font-size: clamp(.7rem,3vw,.9rem); }
  .goal small { display: none; }
  .square-lines { inset: 4.25rem 3rem; }
  .square-lines span { font-size: .5rem; }
  .stability-focus, .stability-lenses { min-height: 0; }.stability-focus { padding: 1.4rem; }.stability-focus h3 { font-size: clamp(2.7rem,13vw,4.6rem); }.stability-signals { grid-template-columns: 1fr; }.stability-tabs { grid-template-columns: 1fr; }.stability-tabs button { min-height: 3rem; border-right: 0; border-bottom: 1px solid var(--line); }.stability-tabs button:last-child { border-bottom: 0; }#stability-detail { min-height: 0; padding: 1.4rem; }.stability-detail-points { margin-top: 1.5rem; }.stability-detail-points div { grid-template-columns: 1fr; gap: .3rem; }.other-goals > div { grid-template-columns: 1fr; }
  .split-definitions { grid-template-columns: 1fr; }.split-definitions article { min-height: 18rem; }.split-definitions article + article { border-left: 0; border-top: 1px solid var(--line); }
  .basket { padding: .9rem; }.basket-current { padding: .85rem; }.basket-current strong { font-size: 1.5rem; }.basket-presets { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }.basket-presets button { min-width: 0; padding-inline: .35rem; }.basket-grid { grid-template-columns: 1fr; }.basket-item { min-height: 5rem; padding: .7rem; }.basket-editor { grid-template-columns: 1fr; }.basket-note { font-size: .72rem; }
  .weight-bars div { grid-template-columns: 6rem 1fr; }.weight-bars b { display: none; }
  .timeline { grid-template-columns: 1fr; }.timeline > i { height: 1.5rem; width: 1px; margin: auto; }
  .formula-intro, .index-terms-head { grid-template-columns: 1fr; }
  .formula-steps { grid-template-columns: 1fr; }
  .formula-steps article { min-height: 0; }
  .calculation { display: block; }.calculation strong { display: block; margin-top: 1rem; text-align: left; }
  .vpi-hvpi { grid-template-columns: 1fr; }.vpi-hvpi > i { text-align: center; }
  .purchase-controls { padding-top: 0; }
  .purchase-stage { padding: 1.25rem; border-radius: .9rem; }
  .journey-head { display: block; }.journey-head output { display: inline-block; margin-top: .85rem; }
  .time-track { margin-inline: 0; }
  .time-rail { margin-inline: 1.55rem; }
  .time-ticks span:nth-child(even) { visibility: hidden; }
  .purchase-comparison { grid-template-columns: 1fr; }
  .price-transition strong { font-size: clamp(2.15rem,11vw,3rem); }
  .power-dial { width: min(10rem,72%); }
  .scale-labels span:nth-child(2),.scale-labels span:nth-child(4){display:none}.scale-labels .target-label { max-width: 6.5rem; }.scale-readout { display: block; text-align: center; }.scale-readout span { display: block; }
  .axis { grid-template-columns: 1fr; }.axis i { width: 100%; }.person-compare { grid-template-columns: 1fr; }
  .reasons { grid-template-columns: 1fr; }.reasons article { min-height: 10rem; }.reasons h3 { margin-top: 2rem; }
  .rate-console { margin-inline: -0.25rem; border-radius: .8rem; }.policy-impact > header, .policy-impact aside { grid-template-columns: 1fr; }.impact-journey { grid-template-columns: 1fr; }.impact-journey article { min-height: 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }.impact-journey article:last-child { border-bottom: 0; }.impact-journey article:not(:last-child):after { left: 2.48rem; top: calc(100% - 1rem); width: 1px; height: 2rem; }.impact-journey article:nth-child(2):after { display: block; }
  .marketing-flow { display: grid; }.marketing-flow button { width: 100%; }
  .marketing-scene .scene-value { font-size: clamp(1rem,5.2vw,1.8rem); }.marketing-scene .scene-line { gap: .3rem; }
  .training { padding-inline: 1rem; }.training-bar { top: 4rem; }.training-bar button { max-width: 6rem; }
  .contribution-grid { grid-template-columns: 1fr 1fr; }.challenge-feedback .bars span { grid-template-columns: 6rem 1fr 3rem; }
  .detective-layout, .institution-grid { grid-template-columns: 1fr; }.dropzones { position: static; }
  .nova-brief { grid-template-columns: 1fr; }.nova-head { display: block; }.nova-head small { display: block; margin-top: .5rem; }.nova-data { grid-template-columns: 1fr 1fr; }.nova-data article { min-height: 8.5rem; }
  .policy-summary-grid, .time-horizons, .final-goal-grid { grid-template-columns: 1fr; }.impact-chain { grid-template-columns: 1fr 1fr; }.impact-chain span:last-child { grid-column: 1/-1; }.final-goal-grid article { min-height: 0; }.knowledge-profile div { grid-template-columns: 1fr; }.knowledge-profile b { text-align: left; }
  .source-columns { grid-template-columns: 1fr; }
  .chain { grid-template-columns: 1fr; gap: 1.25rem; }.chain span { min-height: 5.5rem; }.chain span:not(:last-child):after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -1.08rem; transform: translateX(-50%); }
}

@media (max-width: 420px) {
  .basket-current { grid-template-columns: 1fr; }
  .basket-current strong { grid-row: auto; grid-column: auto; margin-top: .35rem; }
  .basket-presets { grid-template-columns: 1fr; }
  .basket-presets button { width: 100%; }
  .basket-copy { grid-template-columns: minmax(0,1fr) auto; }
  .basket-math { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:before, *:after { animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}