/* HOME PAGE — one calm editorial page: hero with a live price-cap model, the ethical principle (Gefühl ≠ Wirkung),
   the feeling/effect map with three examples, "how a model works" in four steps, three chapters in focus, all 15 chapters.
   Loaded only by /index.html, after base.css. Everything is prefixed hm- (chapter cards keep .hero-card).
   States:  html.hm-js      js/home.js runs (reveal-on-scroll pre-states exist only then)
            .hm-pin         on .hm-stack: the hero is pinned while the foundation slides over it (wide screens)
            .hm-play        on .hm-mx / .hm-story: that scroll scene is running (JavaScript, no reduced motion, scene fits the screen)
   Without these classes the page is static, complete and readable (no JavaScript, reduced motion, print).
   Motion: transform and opacity only; pinned scenes use position: sticky; nothing intercepts scrolling. */

/* ── TOKENS ─────────────────────────────────────────────────────── */
:root {
  --hm-glow-o: .5; --hm-red-t: #ff6b76; --hm-drop: rgba(0,0,0,.6);
  --hm-cta: #d42f3d; --hm-ease: cubic-bezier(.2,.7,.2,1);
  --hm-gx: 16px; --hm-max: 1320px;
  --hm-top: 61px;   /* height of the fixed header; home.js writes the measured value */
}
@media (prefers-color-scheme: light) { :root { --hm-glow-o: .22; --hm-red-t: #a81f26; --hm-drop: rgba(22,22,42,.2); } }
html.theme-light { --hm-glow-o: .22; --hm-red-t: #a81f26; --hm-drop: rgba(22,22,42,.2); }
html.theme-dark { --hm-glow-o: .5; --hm-red-t: #ff6b76; --hm-drop: rgba(0,0,0,.6); }
@media (min-width: 601px) { :root { --hm-gx: 32px; } }
@media (min-width: 901px) { :root { --hm-gx: 76px; --hm-top: 96px; } } /* from here on the gutter keeps everything clear of the fixed scroll-top button (28px + 44px) */
@media (min-width: 1100px) { :root { --hm-gx: clamp(72px, 6.5vw, 96px); } }
@media (min-width: 1800px) { :root { --hm-max: 1480px; } }
@media (min-width: 2300px) { :root { --hm-max: 1640px; } }
/* base.css defines the two chart colours for the dark palette only; these are the same values, theme-aware */
main { --supply-color: var(--accent3); --demand-color: var(--accent); }

/* ── SHARED PIECES ──────────────────────────────────────────────── */
.hm-wrap { max-width: var(--hm-max); margin: 0 auto; }
.hm-eth, .hm-mx, .hm-model-head, .hm-how, .hm-focus, .hm-ch { padding-left: var(--hm-gx); padding-right: var(--hm-gx); }
.hm-defs { position:absolute; }
/* type: Space Mono for labels, Playfair Display for headlines (declared once) */
.hm-btn, .hm-more, .hm-graph-head, .hm-axis-t, .hm-c-lbl, .hm-eq-lbl, .hm-cap-lbl, .hm-short-lbl, .hm-note-lbl, .hm-readout, .hm-toc-k, .hm-pole-tag, .hm-pole-q, .hm-pole-badge, .hm-map-end, .hm-mx-hint, .hm-case-label, .hm-rail-b, .hm-act-tag, .hm-how-k, .hm-stand, .hm-focus-k, .hm-card-foot, .hm-tick { font-family:'Space Mono',monospace; }
.hm-btn, .hm-more, .hm-graph-head, .hm-axis-t, .hm-c-lbl, .hm-eq-lbl, .hm-cap-lbl, .hm-short-lbl, .hm-note-lbl, .hm-toc-k, .hm-pole-tag, .hm-pole-q, .hm-pole-badge, .hm-map-end, .hm-mx-hint, .hm-case-label, .hm-rail-b, .hm-act-tag, .hm-how-k, .hm-stand, .hm-focus-k, .hm-card-foot { text-transform:uppercase; }
.hm-h2, .hm-toc-t, .hm-pole-word, .hm-pole-quote, .hm-map-cap, .hm-map-ttl, .hm-case-h, .hm-case-big, .hm-count, .hm-act h3, .hm-how-h, .hm-step-no, .hm-step h3, .hm-group-title { font-family:'Playfair Display',serif; }
.hm-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.hm-arr { width:14px; height:14px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s var(--hm-ease); }
.hm-tag { margin-bottom:16px; font-size:11px; letter-spacing:0.32em; line-height:1.5; }
.hm-h2 { font-weight:900; font-size:clamp(30px,4.5vw,64px); line-height:1.03; letter-spacing:-0.02em; text-wrap:balance; }
.hm-h2 em { font-style:italic; color:var(--accent); }
.hm-h2-s { font-size:clamp(28px,3.3vw,46px); line-height:1.06; margin-bottom:18px; }
.hm-p { font-size:15px; line-height:1.75; color:var(--content-color); max-width:36em; margin:0 0 14px; }
.hm-p-strong { color:var(--text); font-size:16px; }
.hm-p strong { font-weight:500; color:var(--text); }
.hm-sec-head { margin-bottom:28px; }
.hm-sec-head-2 { display:grid; gap:14px 64px; }
.hm-sec-head-2 > .hm-p { margin-bottom:0; }
.hm-l { position:absolute; inset:0; pointer-events:none; }
/* backdrop used by the hero and by the model stage: a faint grid and two soft glows, moved by home.js (--hp scroll, --mx/--my pointer) */
.hm-bg { position:absolute; inset:0; z-index:-1; pointer-events:none; }
.hm-bg-grid { position:absolute; inset:-14% -8% -14% 24%; background-image:linear-gradient(var(--chart-grid) 1px, transparent 1px), linear-gradient(90deg, var(--chart-grid) 1px, transparent 1px); background-size:56px 56px; -webkit-mask-image:radial-gradient(ellipse 62% 62% at 60% 46%, #000 0%, transparent 74%); mask-image:radial-gradient(ellipse 62% 62% at 60% 46%, #000 0%, transparent 74%); transform:translate3d(calc(var(--mx) * -12px), calc(var(--hp) * 110px + var(--my) * -9px), 0); }
.hm-bg-glow { position:absolute; border-radius:50%; }
.hm-bg-glow-a { width:900px; height:900px; top:-300px; right:-220px; background:radial-gradient(circle, var(--hero-glow) 0%, transparent 70%); transform:translate3d(calc(var(--mx) * 18px), calc(var(--hp) * 60px + var(--my) * 14px), 0); }
.hm-bg-glow-b { width:760px; height:760px; bottom:-380px; right:8%; background:radial-gradient(circle, var(--shade-teal) 0%, transparent 68%); opacity:.5; transform:translate3d(calc(var(--mx) * -22px), calc(var(--hp) * -70px + var(--my) * -12px), 0); }

/* ── BUTTONS / LINKS ────────────────────────────────────────────── */
.hm-btn { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:50px; padding:13px 22px; font-size:12px; font-weight:700; letter-spacing:0.12em; line-height:1.3; text-decoration:none; border:1px solid transparent; transition:background-color .25s, border-color .25s, color .25s, transform .25s var(--hm-ease); }
.hm-btn-primary { background:var(--hm-cta); color:#fff; border-color:rgba(0,0,0,0.3); }
.hm-btn-primary:hover { background:#c0272e; transform:translateY(-2px); }
.hm-btn-primary:focus-visible { outline:2px solid var(--text); outline-offset:3px; }
.hm-btn-ghost { color:var(--text); border-color:var(--guide-line-soft); font-weight:400; }
.hm-btn-ghost:hover { border-color:var(--text); background:var(--surface); }
.hm-btn-line { color:var(--text); border-color:var(--accent-ethik); font-weight:400; }
.hm-btn-line:hover { background:var(--surface2); }
.hm-btn:hover .hm-arr, .hm-more:hover .hm-arr, .hm-case-h a:hover .hm-arr { transform:translateX(4px); }
.hm-btn-ghost:hover .hm-arr, .hm-toc-item:hover .hm-arr { transform:translateY(3px); }
.hm-more { display:inline-flex; align-items:center; gap:10px; min-height:36px; padding:8px 0 7px; font-size:11px; letter-spacing:0.12em; line-height:1.4; color:var(--text); text-decoration:none; border-bottom:1px solid var(--guide-line-soft); transition:border-color .25s; }
.hm-more:hover { border-bottom-color:var(--accent); }
@media (max-width: 1099.98px), (pointer: coarse) { .hm-more { min-height:44px; } }

/* ── HERO ───────────────────────────────────────────────────────── */
.hm-stack { position:relative; }
.hm-hero { position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; padding:0 var(--hm-gx); --hp:0; --mx:0; --my:0; }
.hm-hero-in { flex:1 1 auto; width:100%; max-width:var(--hm-max); margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr); gap:30px; align-items:center; padding:22px 0 30px; }
.hm-hero .hm-eyebrow { margin:0 0 18px; letter-spacing:0.3em; overflow-wrap:anywhere; }
.hm-hero .hm-title { font-size:clamp(35px,10.8vw,60px); line-height:0.98; letter-spacing:-0.022em; max-width:none; margin:0 0 18px; }
.hm-line { display:block; overflow:hidden; padding:0.03em 0.06em 0.2em; margin:0 -0.06em -0.2em; }
.hm-line > span { display:block; }
.hm-lead { font-size:15px; line-height:1.62; color:var(--text-secondary); max-width:36em; margin:0 0 24px; }
.hm-lead strong { display:block; font-weight:500; font-size:1.12em; line-height:1.42; color:var(--text); margin-bottom:0.5em; }
.hm-cta { display:flex; flex-wrap:wrap; gap:10px 12px; }

/* ── DIAGRAM (hero: draggable cap · model stage: played by scrolling) ─
   One plot box (8:7). The curves are SVG; everything that moves is an HTML layer placed with percentages:
   --cap  y of the cap line, --lvl y of the market points (hero: the cap itself), --qa / --qn  x of the quantity supplied / demanded */
.hm-graph { position:relative; margin:0; min-width:0; --cap:60; --qa:38.44; --qn:62.93; --kq:1; --kk:1; --kp:1; --gl:34px; }
.hm-graph-head { display:flex; justify-content:space-between; align-items:center; gap:8px 16px; flex-wrap:wrap; margin:0 0 8px var(--gl); min-height:20px; font-size:11px; letter-spacing:0.16em; line-height:1.4; color:var(--text-secondary); }
.hm-graph-tag::before { content:''; display:inline-block; width:7px; height:7px; margin-right:10px; border-radius:50%; background:var(--gold); vertical-align:1px; }
.hm-graph-hint { display:none; align-items:center; gap:8px; color:var(--text); transition:opacity .4s; }
.hm-js .hm-graph-hint { display:inline-flex; }
.hm-graph.hm-used .hm-graph-hint { opacity:0; }
.hm-graph-hint .hm-arr { animation:hm-bob 1.8s ease-in-out infinite; }
.hm-plot-wrap { padding:10px 22px 30px var(--gl); }
.hm-plot { position:relative; max-width:640px; }
.hm-plot::before { content:''; display:block; padding-top:87.5%; } /* 8:7, the SVG's viewBox */
.hm-svg { position:absolute; left:0; top:0; width:100%; height:100%; overflow:visible; }
.hm-axis { fill:none; stroke:var(--guide-line); stroke-width:1.25; vector-effect:non-scaling-stroke; }
.hm-guide { fill:none; stroke:var(--guide-line); stroke-width:1; stroke-dasharray:2 5; vector-effect:non-scaling-stroke; }
/* the curves sit in a window that slides open from the left (two opposite translations: outer and inner), so they can draw themselves with transforms only */
.hm-wipe { position:absolute; inset:-30px; overflow:hidden; pointer-events:none; -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 22px), transparent); mask-image:linear-gradient(90deg, #000 calc(100% - 22px), transparent); } /* soft leading edge while the curves draw */
.hm-wipe-in { position:absolute; inset:0; }
.hm-wipe .hm-svg { left:30px; top:30px; width:calc(100% - 60px); height:calc(100% - 60px); }
.hm-curve { fill:none; stroke-width:9; stroke-linecap:round; stroke-linejoin:round; }
.hm-glow { fill:none; stroke-width:16; stroke-linecap:round; stroke-linejoin:round; opacity:var(--hm-glow-o); filter:blur(11px); }
.hm-c-s { stroke:var(--supply-color); }
.hm-c-d { stroke:var(--demand-color); }
.hm-ly { transform:translate3d(0, calc(var(--cap) * 1%), 0); }
.hm-lv { transform:translate3d(0, calc(var(--lvl, var(--cap)) * 1%), 0); }
.hm-lx-a { transform:translate3d(calc(var(--qa) * 1%), 0, 0); }
.hm-lx-n { transform:translate3d(calc(var(--qn) * 1%), 0, 0); }
.hm-lx-m { transform:translate3d(calc((var(--qa) + var(--qn)) * 0.5%), calc((100 - var(--lvl, var(--cap))) * var(--km, .4) * 1%), 0); } /* centre of the shortage, 40% down: clear of both curves at every cap */
/* the shortage is the red bar on the cap line (a distance); the band below it only projects that distance onto the Q axis */
.hm-short { background:linear-gradient(var(--shade-red) 35%, transparent 135%); transform-origin:0 100%; transform:translate3d(calc(var(--qa) * 1%), 0, 0) scale(calc((var(--qn) - var(--qa)) / 100), calc(1 - var(--lvl, var(--cap)) / 100)); }
.hm-drop { position:absolute; left:0; top:0; width:1px; height:100%; margin-left:-0.5px; opacity:.6; transform-origin:0 100%; transform:scaleY(calc(1 - var(--lvl, var(--cap)) / 100)); }
.hm-drop-a { background:var(--supply-color); }
.hm-drop-n { background:var(--demand-color); }
.hm-fade, .hm-short, .hm-seg { transition:opacity .3s; }
.hm-graph[data-bind="0"] .hm-fade, .hm-graph[data-bind="0"] .hm-short, .hm-graph[data-bind="0"] .hm-seg { opacity:0; }
.hm-fade-q { opacity:var(--kq); }
.hm-fade-k { opacity:var(--kk); }
.hm-tick { position:absolute; font-size:12px; line-height:1; white-space:nowrap; color:var(--text-secondary); }
.hm-tick sub { font-size:0.84em; }
.hm-tick-l { right:100%; margin-right:9px; transform:translateY(-50%); }
.hm-tick-b { top:100%; left:0; margin-top:10px; transform:translateX(-50%); }
.hm-tick-p { top:44.44%; }
.hm-tick-q { left:50%; }
.hm-tick-qa { color:var(--accent3-text); }
.hm-tick-qn { color:var(--accent); }
.hm-tick-pd { top:0; color:var(--text); opacity:var(--kp); }
.hm-axis-t, .hm-c-lbl, .hm-eq-lbl, .hm-cap-lbl, .hm-short-lbl, .hm-note-lbl { position:absolute; font-size:11px; line-height:1.2; letter-spacing:0.16em; white-space:nowrap; }
.hm-axis-t { color:var(--text-secondary); letter-spacing:0.12em; }
.hm-axis-p { left:10px; top:3px; }
.hm-axis-q { right:4px; bottom:8px; }
.hm-c-lbl-d { left:39%; top:3.2%; color:var(--accent); }
.hm-c-lbl-s { left:80%; top:3.2%; color:var(--accent3-text); }
.hm-eq { position:absolute; left:50%; top:44.44%; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px var(--bg); }
.hm-eq::after { content:''; position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--gold); animation:hm-ring 3s ease-out infinite; }
.hm-eq-lbl { left:50%; top:44.44%; transform:translate(20px,-50%); color:var(--gold-text); }
.hm-hero .hm-eq-lbl { opacity:var(--kp); } /* the cap line never strikes through the word: it fades while the cap is at P* (same measure as the P_D tick) */
.hm-capline { position:absolute; left:0; right:0; top:-1px; height:2px; background:var(--text); }
.hm-graph[data-bind="0"] .hm-capline { background:repeating-linear-gradient(90deg, var(--text) 0 8px, transparent 8px 14px); opacity:.55; }
.hm-seg { top:-2px; bottom:auto; height:4px; background:var(--demand-color); transform-origin:0 50%; transform:translate3d(calc(var(--qa) * 1%), 0, 0) scaleX(calc((var(--qn) - var(--qa)) / 100)); }
.hm-dot { position:absolute; left:0; top:0; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; box-shadow:0 0 0 3px var(--bg); }
.hm-dot-a { background:var(--supply-color); }
.hm-dot-n { background:var(--demand-color); }
.hm-short-lbl { left:0; top:0; transform:translate(-50%, -50%); padding:4px 8px 4px 9px; color:var(--accent); background:var(--bg); border:1px solid var(--demand-color); letter-spacing:0.14em; }
.hm-cap-lbl { left:10px; bottom:100%; margin-bottom:8px; color:var(--text); }
.hm-lbl-short { display:none; }
.hm-handle { position:absolute; right:-22px; top:0; width:44px; height:44px; margin-top:-22px; padding:0; display:none; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--bg); background:var(--text); color:var(--bg); cursor:ns-resize; pointer-events:auto; touch-action:none; -webkit-tap-highlight-color:transparent; transition:transform .2s var(--hm-ease); }
.hm-handle::before { content:''; position:absolute; inset:0; border-radius:50%; box-shadow:0 6px 20px rgba(0,0,0,0.35); }
.hm-js .hm-handle { display:flex; }
.hm-handle svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.hm-handle:hover, .hm-graph.hm-drag .hm-handle { transform:scale(1.12); }
.hm-handle::after { content:''; position:absolute; inset:-1px; border-radius:50%; border:1px solid var(--text); opacity:0; animation:hm-halo 2.6s ease-out 3.6s infinite; pointer-events:none; }
.hm-graph.hm-used .hm-handle::after { animation:none; }
.hm-handle:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.hm-hit { position:absolute; left:0; right:24px; top:-14px; height:28px; display:none; pointer-events:auto; cursor:ns-resize; }
@media (hover: hover) and (pointer: fine) { .hm-js .hm-hit { display:block; } }
.hm-graph-cap { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:6px 24px; margin:6px 0 0 var(--gl); }
.hm-status { flex:1 1 260px; display:grid; margin:0; font-size:14px; line-height:1.55; color:var(--content-color); }
.hm-status p { grid-area:1 / 1; margin:0; transition:opacity .3s; }
.hm-graph[data-bind="1"] .hm-status-free, .hm-graph[data-bind="0"] .hm-status-bind { visibility:hidden; opacity:0; }
.hm-status sub, .hm-readout sub, .hm-act sub { font-size:0.8em; }
/* off screen: idle loops stand still (class set by home.js through an IntersectionObserver) */
.hm-idle .hm-eq::after, .hm-idle .hm-handle::after, .hm-idle .hm-graph-hint .hm-arr, .hm-off .hm-eq::after, .hm-off .hm-handle::after, .hm-off .hm-graph-hint .hm-arr { animation-play-state:paused; }

/* hero: in-page index */
.hm-toc { width:100%; max-width:var(--hm-max); margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr); border-top:1px solid var(--border); }
.hm-toc-item { display:grid; grid-template-columns:88px minmax(0,1fr) auto; align-items:center; gap:2px 12px; min-height:46px; padding:8px 4px 9px 0; color:var(--text); text-decoration:none; border-bottom:1px solid var(--border); }
.hm-toc-item:last-child { border-bottom:none; }
.hm-toc-k { font-size:11px; letter-spacing:0.18em; color:var(--accent); }
.hm-toc-t { font-size:16px; font-weight:700; line-height:1.2; }
.hm-toc .hm-arr { color:var(--text-secondary); }
.hm-toc-item:hover .hm-toc-t { color:var(--accent); }
.hm-toc-item:focus-visible { outline-offset:-2px; } /* the strip is the last child of the clipping hero: the ring stays inside the link */
/* one column: key and title share a row while they fit; with enlarged text the key takes the width it needs and the title moves below it */
@media (max-width: 899.98px) {
  .hm-toc-item { display:flex; flex-wrap:wrap; }
  .hm-toc-k { flex:0 0 auto; min-width:88px; }
  .hm-toc-t { flex:1 1 7.5em; min-width:0; }
  .hm-toc .hm-arr { flex:0 0 auto; }
}

@media (min-width: 601px) {
  .hm-hero .hm-title { font-size:clamp(56px,8.6vw,84px); margin-bottom:24px; }
  .hm-lead { font-size:17px; margin-bottom:30px; }
  .hm-hero-in { gap:44px; padding:40px 0 44px; }
  .hm-graph { --gl:40px; max-width:640px; }
}
@media (min-width: 900px) {
  .hm-toc { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .hm-toc-item { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"k a" "t t"; align-content:start; gap:5px 12px; min-height:60px; padding:13px 16px 15px 0; border-bottom:none; border-right:1px solid var(--border); }
  .hm-toc-item + .hm-toc-item { padding-left:18px; }
  .hm-toc-item:last-child { border-right:none; padding-right:0; }
  .hm-toc-k { grid-area:k; letter-spacing:0.28em; }
  .hm-toc-t { grid-area:t; }
  .hm-toc .hm-arr { grid-area:a; }
}
@media (min-width: 1100px) {
  .hm-hero { min-height:calc(100vh - 108px); min-height:calc(100svh - 108px); }
  .hm-hero-in { grid-template-columns:minmax(0,1.06fr) minmax(0,1fr); gap:clamp(36px,4.4vw,72px); padding:28px 0 26px; }
  /* headline and diagram also follow the viewport height, so the whole hero fits on laptop screens (and can be pinned) */
  .hm-hero .hm-title { font-size:clamp(44px, min(5.7vw, 35vh - 158px), 88px); font-size:clamp(44px, min(5.7vw, 35svh - 158px), 88px); line-height:0.95; margin-bottom:28px; }
  .hm-hero .hm-eyebrow { margin-bottom:26px; }
  .hm-lead { font-size:clamp(15px,1.2vw,17.5px); margin-bottom:34px; }
  .hm-graph { justify-self:end; width:100%; max-width:min(620px, 114.3vh - 414px); max-width:min(620px, 114.3svh - 414px); }
  .hm-toc-t { font-size:clamp(15px,1.17vw,17px); }
}
@media (min-width: 1360px) { .hm-graph { max-width:min(620px, 114.3vh - 390px); max-width:min(620px, 114.3svh - 390px); } } /* index titles fit on one line */
@media (min-width: 1800px) {
  .hm-hero .hm-title { font-size:clamp(44px, min(5.7vw, 35vh - 158px), 98px); font-size:clamp(44px, min(5.7vw, 35svh - 158px), 98px); }
  .hm-graph { max-width:min(700px, 114.3vh - 390px); max-width:min(700px, 114.3svh - 390px); }
  .hm-plot { max-width:none; }
}
@media (min-width: 1100px) and (max-height: 820px) {
  .hm-hero-in { padding:18px 0; }
  .hm-hero .hm-eyebrow { margin-bottom:16px; }
  .hm-hero .hm-title { margin-bottom:20px; }
  .hm-lead { margin-bottom:24px; }
  .hm-toc-item { padding-top:10px; padding-bottom:11px; }
  .hm-graph { max-width:min(620px, 114.3vh - 380px); max-width:min(620px, 114.3svh - 380px); }
}
@media (min-width: 1360px) and (max-height: 820px) { .hm-graph { max-width:min(620px, 114.3vh - 356px); max-width:min(620px, 114.3svh - 356px); } }
@media (min-width: 1100px) and (max-height: 700px) {
  .hm-graph-head { font-size:10px; letter-spacing:0.08em; }
  .hm-graph-cap .hm-more { display:none; }
  .hm-graph { max-width:calc(114.3vh - 360px); max-width:calc(114.3svh - 360px); }
}
@media (min-width: 1360px) and (max-height: 700px) { .hm-graph { max-width:calc(114.3vh - 336px); max-width:calc(114.3svh - 336px); } }
@media (max-width: 600px) {
  .hm-curve { stroke-width:11; }
  .hm-tick-l { margin-right:6px; }
  .hm-hero .hm-lbl-long { display:none; }
  .hm-short-lbl { letter-spacing:0.08em; padding:3px 6px 3px 7px; }
  .hm-hero .hm-lbl-short { display:inline; } /* small plot: the short label stays clear of the supply curve at every cap */
  .hm-graph-head { font-size:10px; letter-spacing:0.06em; }
  .hm-graph-hint { white-space:nowrap; }
  /* small plot: the two labels on the right end at the plot's edge and may break, so enlarged text is never cut off */
  .hm-hero .hm-c-lbl-s { left:auto; right:0; }
  .hm-hero .hm-c-lbl-d { top:calc(3.2% + max(0px, (1em - 11px) * 3.4)); } /* enlarged text: the demand label drops below the row of "Preis (P)" and the supply label; no change at the normal size */
  .hm-hero .hm-eq-lbl { right:0; white-space:normal; overflow-wrap:anywhere; }
  .hm-btn { flex:1 1 100%; min-height:48px; }
  .hm-plot-wrap { padding-right:16px; }
  .hm-handle { right:-16px; }
  .hm-status { font-size:13px; }
  .hm-bg-grid { inset:-6% -30% -6% -30%; background-size:44px 44px; }
  .hm-bg-glow-b { display:none; }
}
@media (max-width: 359px) { .hm-hero .hm-eyebrow { letter-spacing:0.1em; } }

/* hero: pinned on large screens — it stays put while the foundation sheet slides over it (class .hm-pin is set by home.js
   only when the whole hero fits under the header; without it the hero simply scrolls away) */
@media screen and (min-width: 1100px) {
  .hm-pin > .hm-hero { position:sticky; top:108px; }
  .hm-pin .hm-hero-copy { transform:translate3d(0, calc(var(--hp) * -70px), 0); opacity:calc(1.2 - var(--hp) * 1.45); }
  .hm-pin .hm-hero .hm-graph { transform-origin:50% 35%; transform:translate3d(calc(var(--mx) * 5px), calc(var(--hp) * -30px + var(--my) * 4px), 0) scale(calc(1 - var(--hp) * 0.06)); opacity:calc(1.25 - var(--hp) * 1.2); }
  .hm-pin .hm-toc { opacity:calc(1 - var(--hp) * 3.2); }
  .hm-pin .hm-hero .hm-bg-grid { transform:translate3d(calc(var(--mx) * -12px), calc(var(--hp) * 80px + var(--my) * -9px), 0); }
  /* the sheet's shadow on the hero: a layer as tall as the hero whose lower edge travels with the sheet's upper edge */
  .hm-pin > .hm-hero::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(to top, var(--bg), transparent 190px); transform:translate3d(0, calc(var(--hp) * -100%), 0); opacity:calc(var(--hp) * 7); }
  .hm-pin > .hm-eth::before { content:''; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg, transparent, var(--accent) 22%, var(--gold) 50%, var(--accent3) 78%, transparent); opacity:.75; }
  /* the first pixels of the sheet that rise over the hero carry content: short top padding, and its head does not wait for the reveal */
  .hm-pin > .hm-eth { padding-top:60px; }
  .hm-js .hm-pin > .hm-eth .hm-eth-head .hm-rv { opacity:1; transform:none; transition:none; }
}
/* covered or scrolled away (class set by home.js): nothing left to paint, but every control stays reachable with the keyboard */
.hm-pin > .hm-hero.hm-off .hm-hero-in, .hm-pin > .hm-hero.hm-off .hm-bg { opacity:0; }

/* hero: load choreography (pure CSS, so it also runs without JavaScript; js/home.js removes .hm-intro afterwards) */
.hm-intro .hm-line > span { animation:hm-rise .95s var(--hm-ease) both; }
.hm-intro .hm-line:nth-child(2) > span { animation-delay:.09s; }
.hm-intro .hm-line:nth-child(3) > span { animation-delay:.18s; }
.hm-intro .hm-eyebrow { animation:hm-fade .8s ease both; }
.hm-intro .hm-lead { animation:hm-up .8s var(--hm-ease) .32s both; }
.hm-intro .hm-cta { animation:hm-up .8s var(--hm-ease) .44s both; }
.hm-intro .hm-toc { animation:hm-fade .9s ease .8s both; }
.hm-intro .hm-graph-head, .hm-intro .hm-axis-t, .hm-intro .hm-axis { animation:hm-fade .7s ease .15s both; }
.hm-intro .hm-wipe { animation:hm-wipe-a 1.5s cubic-bezier(.45,.05,.2,1) .3s both; }
.hm-intro .hm-wipe-in { animation:hm-wipe-b 1.5s cubic-bezier(.45,.05,.2,1) .3s both; }
.hm-intro .hm-guide, .hm-intro .hm-c-lbl, .hm-intro .hm-eq-lbl, .hm-intro .hm-tick-p, .hm-intro .hm-tick-q { animation:hm-fade .6s ease 1.55s both; }
.hm-intro .hm-eq { animation:hm-pop .55s var(--hm-ease) 1.45s both; }
.hm-intro .hm-dyn, .hm-intro .hm-graph-cap { animation:hm-fade .6s ease 1.75s both; }
@keyframes hm-rise { from { transform:translate3d(0,108%,0); } to { transform:none; } }
@keyframes hm-up { from { opacity:0; transform:translate3d(0,16px,0); } to { opacity:1; transform:none; } }
@keyframes hm-fade { from { opacity:0; } to { opacity:1; } }
@keyframes hm-wipe-a { from { transform:translate3d(-100%,0,0); } to { transform:none; } }
@keyframes hm-wipe-b { from { transform:translate3d(100%,0,0); } to { transform:none; } }
@keyframes hm-pop { from { opacity:0; transform:scale(0); } to { opacity:1; transform:none; } }
@keyframes hm-ring { 0% { transform:scale(1); opacity:.7; } 70%, 100% { transform:scale(2.9); opacity:0; } }
@keyframes hm-halo { 0% { transform:scale(1); opacity:.6; } 70%, 100% { transform:scale(1.5); opacity:0; } }
@keyframes hm-bob { 0%, 100% { transform:translateY(-2px); } 50% { transform:translateY(2px); } }

/* ── REVEAL ON SCROLL (only with JavaScript) ────────────────────── */
.hm-js .hm-rv, .hm-js .hm-rv-l, .hm-js .hm-rv-r { transition:opacity .8s var(--hm-ease), transform .95s var(--hm-ease); transition-delay:calc(var(--d, 0) * 110ms); }
@media screen {
  .hm-js .hm-rv, .hm-js .hm-rv-l, .hm-js .hm-rv-r { opacity:0; }
  .hm-js .hm-rv { transform:translate3d(0,26px,0); }
  .hm-js .hm-rv-l { transform:translate3d(-24px,0,0); }
  .hm-js .hm-rv-r { transform:translate3d(24px,0,0); } /* less than the narrowest gutter of the two-column layout: nothing leaves the page */
  .hm-js .hm-rv.is-in, .hm-js .hm-rv-l.is-in, .hm-js .hm-rv-r.is-in, .hm-js .hm-rv:focus-visible, .hm-js .hm-rv:focus-within { opacity:1; transform:none; }
}
@media screen and (max-width: 899.98px) { .hm-js .hm-rv-l:not(.is-in), .hm-js .hm-rv-r:not(.is-in) { transform:translate3d(0,22px,0); } }

/* ── ETHICS — the principle: Gefühl ≠ Wirkung ───────────────────── */
.hm-eth { position:relative; background:var(--surface); border-top:1px solid var(--border); padding-top:56px; padding-bottom:44px; }
.hm-eth .hm-tag, .hm-mx .hm-tag { color:var(--accent-ethik); }
.hm-eth-head { display:grid; gap:22px 64px; margin-bottom:44px; }
.hm-eth-head .hm-btn { margin-top:10px; }
.hm-split { position:relative; }
.hm-split-axis { --sp:1; display:none; position:absolute; left:50%; top:-28px; bottom:-28px; width:1px; margin-left:-0.5px; background:var(--border); }
.hm-split-axis i { position:absolute; inset:0; background:linear-gradient(var(--accent), var(--gold) 46%, var(--accent3)); transform-origin:50% 0; transform:scaleY(var(--sp)); }
.hm-poles { --drift:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2px; position:relative; }
.hm-pole { position:relative; padding:16px 14px 18px; min-width:0; }
.hm-pole-feel { border-top:2px solid var(--accent); background:linear-gradient(180deg, var(--shade-red), transparent 92%); }
.hm-pole-out { border-top:2px solid var(--accent3); background:linear-gradient(180deg, var(--shade-teal), transparent 92%); }
.hm-pole-tag { font-size:10px; letter-spacing:0.12em; line-height:1.55; margin-bottom:12px; overflow-wrap:break-word; hyphens:auto; }
.hm-pole-feel .hm-pole-tag, .hm-pole-feel .hm-pole-q { color:var(--hm-red-t); }
.hm-pole-out .hm-pole-tag, .hm-pole-out .hm-pole-q { color:var(--accent3-text); }
.hm-pole-word { font-weight:900; font-size:clamp(30px,9.4vw,52px); line-height:1; letter-spacing:-0.02em; margin:0 0 10px; color:var(--text); }
.hm-pole-word span { display:inline-block; max-width:100%; overflow-wrap:anywhere; }
.hm-pole-feel .hm-pole-word { font-style:italic; }
.hm-pole-quote { font-style:italic; font-size:15px; line-height:1.4; color:var(--text); margin:0; }
.hm-pole-q { font-size:10px; letter-spacing:0.1em; line-height:1.55; margin:14px 0 0; }
.hm-pole-badge { display:inline-block; margin:12px 0 0; padding:5px 10px 6px; font-size:10px; font-weight:700; letter-spacing:0.12em; line-height:1.4; color:var(--bg); background:var(--accent3-text); }
.hm-pole-mid { position:absolute; left:50%; top:0; z-index:2; width:40px; height:40px; margin:-21px 0 0 -20px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--gold); background:var(--surface); color:var(--gold-text); }
.hm-pole-mid svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
@media (min-width: 601px) {
  .hm-eth { padding-top:80px; padding-bottom:64px; }
  .hm-pole { padding:22px 24px 24px; }
  .hm-pole-tag { font-size:11px; letter-spacing:0.2em; }
  .hm-pole-q { font-size:11px; letter-spacing:0.16em; }
  .hm-pole-badge { font-size:11px; }
  .hm-pole-quote { font-size:18px; }
  .hm-p { font-size:16px; }
  .hm-p-strong { font-size:17px; }
}
@media (min-width: 900px) {
  .hm-eth { padding-top:clamp(72px,7.6vw,112px); padding-bottom:clamp(64px,7vw,96px); }
  .hm-eth-head, .hm-sec-head-2 { grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); align-items:end; }
  .hm-eth-head { align-items:start; margin-bottom:clamp(48px,6vw,84px); }
  .hm-split-axis { display:block; }
  .hm-poles { grid-template-columns:minmax(0,1fr) 128px minmax(0,1fr); gap:0; }
  .hm-pole { padding:26px 34px 30px; }
  .hm-pole-feel { grid-column:1; text-align:right; background:linear-gradient(270deg, var(--shade-red), transparent 88%); }
  .hm-pole-out { grid-column:3; background:linear-gradient(90deg, var(--shade-teal), transparent 88%); }
  .hm-pole-word { font-size:clamp(52px,6.6vw,96px); margin-bottom:14px; }
  .hm-pole-feel .hm-pole-word span { transform:translate3d(calc(var(--drift) * -1px), 0, 0); }
  .hm-pole-out .hm-pole-word span { transform:translate3d(calc(var(--drift) * 1px), 0, 0); }
  .hm-pole-quote { font-size:clamp(18px,1.7vw,22px); }
  .hm-pole-mid { top:50%; width:56px; height:56px; margin:-28px 0 0 -28px; }
  .hm-pole-mid svg { width:22px; height:22px; }
  .hm-pole-badge { position:absolute; right:-1px; top:-2px; margin:0; }
}
/* no room for the two words side by side (320px phones, strongly enlarged text): the poles stack, the ≠ sits between them */
.hm-split { container:hm-split / inline-size; }
@container hm-split (max-width: 20em) {
  .hm-poles { grid-template-columns:minmax(0,1fr); gap:0; }
  .hm-pole-mid { position:relative; left:auto; top:auto; justify-self:center; margin:-14px 0; }
}
@media screen and (max-width: 899.98px) { .hm-js .hm-pole-mid.hm-rv { transition-delay:.45s; } } /* one column: the ≠ follows the poles, not the other way round */

/* ── THE MAP — feeling versus effect, three examples ────────────── */
.hm-mx { position:relative; background:var(--surface); border-bottom:1px solid var(--border); padding-top:28px; padding-bottom:56px; }
.hm-mx-in { display:flex; flex-direction:column; gap:22px; }
.hm-mx-steps { display:contents; }
.hm-mx-hint { display:none; align-items:flex-start; gap:10px; margin:18px 0 0; font-size:11px; letter-spacing:0.12em; line-height:1.6; color:var(--accent-ethik); }
.hm-mx-hint .hm-arr { margin-top:2px; }
.hm-mx-outro .hm-p { margin:6px 0 0; max-width:38em; }
/* the map: a plane with two crossing axes; legends below (feeling) and on the left (effect, read upwards) */
.hm-map { --lg:34px; --in:1; --ax:1; --qb:1; --qg:1; display:grid; grid-template-columns:var(--lg) minmax(0,1fr); grid-template-rows:auto var(--lg); width:min(34rem, 100%); margin:0 auto; container:hm-mapbox / inline-size; }
.hm-map-plane { grid-area:1 / 2; position:relative; aspect-ratio:1 / 1; background:var(--bg); border:1px solid var(--guide-line-soft); container:hm-map / inline-size; }
@container hm-map (max-width: 400px) { .hm-map-cap { display:none; } }
.hm-map-grid { position:absolute; inset:0; background-image:linear-gradient(var(--chart-grid) 1px, transparent 1px), linear-gradient(90deg, var(--chart-grid) 1px, transparent 1px); background-size:12.5% 12.5%; }
.hm-map-quad { position:absolute; width:50%; height:50%; }
.hm-map-quad-bad { right:0; bottom:0; background:radial-gradient(130% 130% at 100% 100%, var(--shade-red), transparent 72%); opacity:var(--qb); }
.hm-map-quad-good { left:0; top:0; background:radial-gradient(130% 130% at 0 0, var(--shade-teal), transparent 72%); opacity:var(--qg); }
.hm-map-cap { position:absolute; font-style:italic; font-weight:700; font-size:clamp(13px,1.2vw,17px); line-height:1.2; }
.hm-map-cap-bad { right:5%; bottom:4.5%; text-align:right; color:var(--hm-red-t); opacity:var(--qb); }
.hm-map-cap-good { left:5%; top:4.5%; color:var(--accent3-text); opacity:var(--qg); }
.hm-map-ax { position:absolute; background:var(--guide-line); }
.hm-map-ax-x { left:3%; right:3%; top:50%; height:2px; margin-top:-1px; }
.hm-map-ax-y { top:3%; bottom:3%; left:50%; width:2px; margin-left:-1px; opacity:calc(.35 + .65 * var(--ax)); } /* there from the start, at full strength with the first example */
.hm-map-ax::before, .hm-map-ax::after { content:''; position:absolute; width:8px; height:8px; border:solid var(--guide-line); border-width:2px 2px 0 0; }
.hm-map-ax-x::before { left:0; top:-3px; transform:rotate(-135deg); }
.hm-map-ax-x::after { right:0; top:-3px; transform:rotate(45deg); }
.hm-map-ax-y::before { top:0; left:-3px; transform:rotate(-45deg); }
.hm-map-ax-y::after { bottom:0; left:-3px; transform:rotate(135deg); }
.hm-map-leg { display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; color:var(--text-secondary); }
.hm-map-x { grid-area:2 / 2; padding-top:8px; }
.hm-map-y { grid-area:1 / 1; writing-mode:vertical-rl; transform:rotate(180deg); padding-left:8px; } /* reads from the bottom up */
.hm-map-end { flex:0 1 38%; min-width:0; overflow-wrap:anywhere; font-size:12px; font-weight:500; letter-spacing:0.08em; line-height:1.25; }
.hm-map-end:first-child { color:var(--hm-red-t); }      /* both axes: the bad end first, the good end last */
.hm-map-end:last-child { text-align:right; color:var(--accent3-text); }
.hm-map-ttl { font-weight:900; font-style:italic; font-size:18px; line-height:1; letter-spacing:0; color:var(--text); }
.hm-map .hm-lbl-long { white-space:nowrap; }
@container hm-mapbox (max-width: 540px) {   /* the long end labels need about 450px of axis; below that the short ones */
  .hm-map .hm-lbl-short { display:inline; }
  .hm-map .hm-lbl-long { display:none; }
}
@media (min-width: 1000px) { .hm-map-ttl { font-size:21px; } }
@media (min-width: 1600px) { .hm-map-end { font-size:13px; } .hm-map-ttl { font-size:23px; } }
@container hm-map (min-width: 580px) { .hm-tok-name { font-size:15px; top:21px; } .hm-tok-name-up { top:auto; bottom:12px; } .hm-map-cap { font-size:19px; } }
/* tokens: each lives on a layer as large as the plane, so the glide can be written in % of the plane (--dy: distance to the feeling axis) */
.hm-tok { position:absolute; inset:0; pointer-events:none; --g:1; --a:1; opacity:var(--a); transform:translate3d(0, calc((1 - var(--g)) * var(--dy) * 1%), 0); }
.hm-tok-bad { --x:74%; --y:76%; --dy:-26; --c:var(--accent); --cs:var(--shade-red); }
.hm-tok-mixed { --x:74%; --y:50%; --dy:0; --c:var(--gold); --cs:var(--shade-gold); }
.hm-tok-good { --x:26%; --y:23%; --dy:27; --c:var(--accent3); --cs:var(--shade-teal); }
.hm-tok-pin { position:absolute; left:var(--x); top:var(--y); width:0; height:0; }
.hm-tok-dot { position:absolute; left:-9px; top:-9px; width:18px; height:18px; border-radius:50%; background:var(--c); border:2px solid var(--bg); box-shadow:0 0 0 7px var(--cs); transform:scale(calc(.4 + .6 * var(--a))); }
.hm-tok-dot::after { content:''; position:absolute; inset:-9px; border-radius:50%; border:1.5px solid var(--c); opacity:0; }
.hm-tok-name { position:absolute; left:0; top:19px; transform:translateX(-50%); padding:3px 8px 4px; font-size:13px; font-weight:500; line-height:1.25; text-align:center; white-space:nowrap; color:var(--text); background:var(--surface); border:1px solid var(--border); }
.hm-tok-name-up { top:auto; bottom:10px; }
.hm-tok-range { position:absolute; left:var(--x); top:38%; width:2px; height:24%; margin-left:-1px; background:var(--c); transform:scaleY(var(--g)); }
.hm-tok-range::before, .hm-tok-range::after { content:''; position:absolute; left:-5px; width:12px; height:2px; background:var(--c); }
.hm-tok-range::before { top:0; }
.hm-tok-range::after { bottom:0; }
.hm-tok-lift { transform:translate3d(0, calc(var(--g) * -12%), 0); }
/* the examples */
.hm-case { --c:var(--accent); min-width:0; }
.hm-case-mixed { --c:var(--gold); }
.hm-case-good { --c:var(--accent3); }
.hm-case-card { position:relative; height:100%; padding:20px 18px 22px; background:var(--bg); border:1px solid var(--border); }
.hm-case-card::before { content:''; position:absolute; left:-1px; right:-1px; top:-1px; height:3px; background:var(--c); }
.hm-case-card::after { content:''; position:absolute; inset:0; z-index:-1; box-shadow:0 30px 60px -28px var(--hm-drop); opacity:0; transition:opacity .5s; pointer-events:none; }
.hm-case-h { font-weight:900; font-size:clamp(25px,2.3vw,32px); line-height:1.12; letter-spacing:-0.01em; margin:0 0 12px; }
.hm-case-h a { display:inline-flex; align-items:center; gap:0.42em; min-height:46px; color:var(--text); text-decoration:underline; text-decoration-color:var(--c); text-decoration-thickness:2px; text-underline-offset:0.2em; }
.hm-case-h a:hover { color:var(--text); text-decoration-thickness:3px; }
.hm-case-h .hm-arr { width:0.52em; height:0.52em; color:var(--text-secondary); }
.hm-case-cell { min-width:0; padding:2px 0 2px 16px; border-left:2px solid var(--accent); }
.hm-case-out { margin-top:18px; border-left-color:var(--accent3); }
.hm-case-label { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin-bottom:9px; font-size:11px; letter-spacing:0.16em; line-height:1.5; }
.hm-case-side { color:var(--hm-red-t); font-weight:700; }
.hm-case-out .hm-case-side { color:var(--accent3-text); }
.hm-verdict { display:inline-flex; align-items:center; gap:7px; color:var(--text-secondary); }
.hm-verdict::before { content:''; flex:none; width:0; height:0; border-left:4.5px solid transparent; border-right:4.5px solid transparent; }
.hm-v-up::before { border-bottom:7px solid var(--accent3); }
.hm-v-down::before { border-top:7px solid var(--accent); }
.hm-v-mid::before { width:8px; height:8px; border:none; background:var(--gold); transform:rotate(45deg) scale(.8); }
.hm-case-big { font-size:clamp(18px,1.6vw,22px); font-weight:700; line-height:1.28; color:var(--text); margin:0 0 8px; text-wrap:balance; }
.hm-case-quote { font-style:italic; font-weight:500; }
.hm-case-txt { font-size:14px; line-height:1.68; color:var(--text-secondary); margin:0; }
@media (max-width: 999.98px) {
  .hm-map .hm-lbl-short { display:inline; }
  .hm-map .hm-lbl-long { display:none; }
}
@media (min-width: 601px) {
  .hm-mx { padding-top:36px; padding-bottom:80px; }
  .hm-case-card { padding:26px 28px 28px; }
  .hm-case-txt { font-size:14.5px; }
}
@media (min-width: 1000px) {
  /* static layout (no JavaScript, reduced motion): the map next to the introduction, the three examples side by side below; narrower screens keep one column */
  .hm-mx-in { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:36px 2px; align-items:stretch; }
  .hm-mx-pin { grid-area:1 / 1 / 2 / 4; }
  .hm-mx-intro { grid-area:1 / 4 / 2 / 7; align-self:center; padding-left:clamp(28px,4vw,64px); }
  .hm-case { grid-column:span 2; }
  .hm-mx-outro { grid-column:1 / -1; }
  .hm-map { margin-left:0; }
}
@media (min-width: 900px) { .hm-mx { padding-bottom:clamp(80px,8vw,112px); } }

/* scroll scene (home.js): the map is pinned while the examples scroll past; each token appears on the feeling axis and glides to its effect */
@media screen {
  .hm-play .hm-mx-hint { display:flex; }
  .hm-play .hm-case-card { transform:scale(.97); transform-origin:50% 50%; transition:transform .5s var(--hm-ease); }
  .hm-play .hm-case-card::before { opacity:.4; transition:opacity .5s; }
  .hm-play .hm-case.is-on .hm-case-card, .hm-play .hm-case:focus-within .hm-case-card { transform:none; }
  .hm-play .hm-case.is-on .hm-case-card::before, .hm-play .hm-case.is-on .hm-case-card::after, .hm-play .hm-case:focus-within .hm-case-card::before { opacity:1; }
  .hm-play .hm-tok-dot, .hm-play .hm-tok-name { transition:opacity .4s; }
  .hm-play .hm-tok.is-dim .hm-tok-name { opacity:.6; }
  .hm-play .hm-tok.is-on .hm-tok-dot::after { animation:hm-ring 2.4s ease-out infinite; }
  .hm-idle .hm-tok-dot::after { animation-play-state:paused; }
}
@media screen and (max-width: 999.98px) {
  /* phones and tablets in portrait: the map is a compact strip pinned under the header; the examples scroll beneath it.
     --out (home.js) runs from 0 to 1 while the end of the section travels up the free area: the strip slides away under the header */
  .hm-play .hm-mx-pin { position:sticky; top:var(--hm-top); z-index:3; margin:0 calc(var(--hm-gx) * -1); padding:10px var(--hm-gx) 4px; background:var(--surface); border-bottom:1px solid var(--border); transform:translate3d(0, calc(var(--out, 0) * -100%), 0); opacity:calc(1 - var(--out, 0)); }
  .hm-play .hm-mx-pin::after { content:''; position:absolute; left:0; right:0; top:100%; height:22px; margin-top:1px; background:linear-gradient(var(--surface), transparent); pointer-events:none; }
  .hm-play .hm-map { --lg:28px; width:min(100%, 26rem); }
  .hm-play .hm-map-plane { aspect-ratio:auto; height:clamp(192px, 29vh, 250px); height:clamp(192px, 29svh, 250px); }
  .hm-play .hm-map-ttl { font-size:16px; }
  .hm-play .hm-map-leg { gap:6px; }
  .hm-play .hm-map-end { flex-basis:auto; font-size:11px; letter-spacing:0.06em; }
  .hm-play .hm-tok-name { font-size:12px; padding:2px 6px 3px; top:16px; }
  .hm-play .hm-tok-name-up { top:auto; bottom:8px; }
  .hm-play .hm-tok-dot { left:-8px; top:-8px; width:16px; height:16px; box-shadow:0 0 0 5px var(--cs); }
  .hm-play .hm-mx-in { gap:0; }
  .hm-play .hm-mx-intro { padding-bottom:26px; }
  .hm-play .hm-case { padding:22px 0 9vh; }
  .hm-play .hm-mx-outro { padding:4px 0 0; }
}
@media screen and (min-width: 600px) and (max-width: 999.98px) {
  /* large phones and tablets: the strip may be taller */
  .hm-play .hm-map { width:min(100%, 34rem); }
  .hm-play .hm-map-plane { height:clamp(192px, 32vh, 340px); height:clamp(192px, 32svh, 340px); }
}
@media screen and (min-width: 1000px) {
  .hm-play .hm-mx-in { grid-template-columns:minmax(0,1fr) minmax(0,1.04fr); gap:0 clamp(28px,5vw,88px); align-items:start; }
  .hm-play .hm-mx-pin { grid-area:1 / 1 / 3 / 2; position:sticky; top:calc(var(--hm-top) + (100vh - var(--hm-top) - var(--hm-maph, 34rem)) / 2); perspective:1300px; }
  /* the map takes its size from its column, limited by the screen height */
  .hm-play .hm-map { width:min(42.5rem, 100%, 100vh - var(--hm-top) - 120px); transform-origin:50% 100%; transform:rotateX(calc((1 - var(--in)) * 32deg)) scale(calc(.9 + .1 * var(--in))); opacity:calc(.45 + .55 * var(--in)); }
  .hm-play .hm-mx-steps { display:block; grid-area:2 / 2; }
  .hm-play .hm-mx-intro { grid-area:1 / 2; display:flex; flex-direction:column; justify-content:center; min-height:calc(86vh - var(--hm-top)); padding:0 0 4vh; } /* the first example already peeks in from below: an invitation to scroll */
  .hm-play .hm-case { padding:0 0 13vh; }
  .hm-play .hm-case-card { height:auto; transform-origin:0 50%; }
  .hm-play .hm-mx-outro { padding:0 0 4vh; }
}

/* ── HOW A MODEL WORKS — the price cap in four steps ────────────── */
.hm-model { position:relative; }
.hm-model-head { padding-top:56px; padding-bottom:8px; }
.hm-model-head .hm-sec-head { margin-bottom:0; }
.hm-stage .hm-bg-glow-a { top:50%; margin-top:-450px; right:-140px; }
.hm-stage { position:relative; isolation:isolate; overflow:hidden; padding:28px var(--hm-gx) 8px; --hp:0; --mx:0; --my:0; } /* overflow: the diagram's layers are as wide as the plot and are shifted sideways */
.hm-stage-in { position:relative; width:100%; max-width:var(--hm-max); margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr); gap:28px; }
.hm-stage-copy { position:relative; min-width:0; }
.hm-rail, .hm-count { display:none; }
.hm-acts { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:2px; }
.hm-act { --c:var(--gold); min-width:0; padding:18px 18px 20px; background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--c); }
.hm-act-2 { --c:var(--text); }
.hm-act-3 { --c:var(--accent); }
.hm-act-4 { --c:var(--accent-ethik); }
.hm-act-tag { font-size:11px; letter-spacing:0.18em; line-height:1.6; color:var(--text-secondary); margin-bottom:6px; }
.hm-act h3 { font-size:22px; font-weight:700; line-height:1.18; letter-spacing:-0.005em; color:var(--text); margin:0 0 8px; text-wrap:balance; }
.hm-act p { font-size:15px; line-height:1.62; color:var(--content-color); margin:0; }
.hm-act-cta { margin-top:16px; }
.hm-graph-story { order:-1; --lvl:60; --draw:1; --ke:1; --kg:1; --kl:1; --kc:1; --kd:1; --ks:1; --ka:1; --kb:1; --dim:1; width:100%; max-width:560px; margin:0 auto; }
.hm-graph-story .hm-plot { container:hm-plot / inline-size; }
/* a small plot (short phones): one-letter axis titles, tighter labels */
@container hm-plot (max-width: 250px) {
  .hm-lbl-long { display:none; }
  .hm-lbl-short { display:inline; }
  .hm-c-lbl, .hm-eq-lbl, .hm-cap-lbl, .hm-short-lbl, .hm-note-lbl { font-size:10px; letter-spacing:0.05em; }
  .hm-short-lbl, .hm-note-lbl { padding:2px 5px; }
  .hm-axis-t { font-size:12px; }
  .hm-lx-m { --km:.34; }
  .hm-c-lbl-s { left:auto; right:0; }
  .hm-note-b .hm-note-lbl { bottom:10px; }
}
.hm-graph-story .hm-plot-wrap { padding-top:14px; }
.hm-graph-story .hm-cap-lbl { left:auto; right:4px; }
.hm-graph-story .hm-axis-q { bottom:auto; top:100%; margin-top:10px; right:0; }
.hm-note-shaft { position:absolute; background:var(--text); }
.hm-note-tip i { position:absolute; width:0; height:0; }
.hm-note-lbl { color:var(--text); font-weight:700; padding:3px 6px; background:var(--bg); }
/* step 4, the pay-off: two areas grow with the two arrows. Intention = the lower price (P* → P_D) on the units still supplied (0 … Q_A);
   outcome = the units that are no longer supplied (Q_A … Q*). Positions are those of the resting cap, like the arrows. */
.hm-band { position:absolute; pointer-events:none; }
.hm-band-a { left:0; top:44.44%; width:38.44%; height:15.56%; background:var(--shade-gold); border-right:1px dashed var(--gold); transform-origin:0 0; transform:scaleY(var(--ka)); opacity:calc(var(--ka) * 4); }
.hm-band-b { left:38.44%; top:60%; width:11.56%; height:40%; background:repeating-linear-gradient(135deg, var(--accent) 0 2px, transparent 2px 7px); transform-origin:100% 50%; transform:scaleX(var(--kb)); opacity:calc(var(--kb) * .62); }
/* step 2: the price leaves a trail on the P axis while the cap sinks below P* (scroll scene only) */
.hm-cap-free, .hm-qbars, .hm-rail-play { display:none; }
.hm-ptrail { display:none; position:absolute; left:-3px; top:44.44%; width:6px; height:100%; background:var(--text); transform-origin:50% 0; transform:scaleY(max(0, (var(--cap) - 44.44) / 100)); opacity:calc(var(--kc) * .38); }
.hm-note-a { opacity:calc(var(--ka) * 5); }
.hm-note-a .hm-note-shaft { left:-3px; top:44.44%; width:6px; height:15.56%; transform-origin:50% 0; transform:scaleY(var(--ka)); }
.hm-note-a .hm-note-tip { transform:translate3d(0, calc((44.44 + 15.56 * var(--ka)) * 1%), 0); }
.hm-note-a .hm-note-tip i { left:-10px; top:-16px; border-left:10px solid transparent; border-right:10px solid transparent; border-top:17px solid var(--text); }
.hm-note-a .hm-note-lbl { left:12px; top:51.6%; transform:translateY(-50%); }
.hm-note-b { opacity:calc(var(--kb) * 5); }
.hm-note-b .hm-note-shaft { left:38.44%; bottom:-3px; width:11.56%; height:6px; transform-origin:100% 50%; transform:scaleX(var(--kb)); }
.hm-note-b .hm-note-tip { transform:translate3d(calc((50 - 11.56 * var(--kb)) * 1%), 0, 0); }
.hm-note-b .hm-note-tip i { left:0; bottom:-10px; border-top:10px solid transparent; border-bottom:10px solid transparent; border-right:17px solid var(--text); }
.hm-note-b .hm-note-lbl { left:44.2%; bottom:13px; transform:translateX(-50%); }
.hm-readout { display:grid; justify-items:center; margin:2px 0 0 var(--gl); font-size:12.5px; line-height:1.5; color:var(--text-secondary); }
.hm-readout span { grid-area:1 / 1; display:none; padding:6px 16px; border:1px solid var(--border); background:var(--surface); }
.hm-readout span:last-child { display:block; }
@media (min-width: 601px) {
  .hm-model-head { padding-top:80px; }
  .hm-acts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hm-act { padding:22px 24px 24px; }
}
@media (min-width: 900px) {
  .hm-model-head { padding-top:clamp(80px,8vw,112px); padding-bottom:0; }
  .hm-stage { padding-top:44px; }
  .hm-stage-in { grid-template-columns:minmax(0,.94fr) minmax(0,1fr); gap:clamp(32px,4.4vw,72px); align-items:center; }
  .hm-graph-story { order:0; margin:0; justify-self:end; max-width:600px; }
  .hm-acts { grid-template-columns:minmax(0,1fr); } /* static layout: the four steps as one column beside the finished diagram */
  .hm-act { padding:18px 24px 20px; }
}
/* scroll scene (home.js): the stage is pinned; scrolling plays the four steps (progress written as custom properties on the diagram) */
@media screen {
  .hm-play.hm-story { height:calc(100vh - var(--hm-top) + 195vh); height:calc(100svh - var(--hm-top) + 195svh); }
  .hm-play .hm-stage { position:sticky; top:var(--hm-top); height:calc(100vh - var(--hm-top)); height:calc(100svh - var(--hm-top)); display:flex; align-items:flex-start; padding-top:0; padding-bottom:0; }
  .hm-play .hm-stage-in { display:flex; flex-direction:column; justify-content:center; gap:0; min-height:100%; padding:4px 0 14px; }
  .hm-play .hm-stage-copy { display:contents; }
  .hm-play .hm-rail { order:1; display:flex; gap:6px; margin:0; }
  .hm-rail-b { position:relative; flex:0 0 44px; min-width:0; min-height:44px; padding:14px 0 4px; font-size:11px; letter-spacing:0.12em; line-height:1.4; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text-secondary); background:none; border:0; border-radius:0; cursor:pointer; -webkit-appearance:none; appearance:none; }
  .hm-rail-b::before, .hm-rail-b i { content:''; position:absolute; left:0; right:0; top:6px; height:2px; background:var(--range-bg); }
  .hm-rail-b i { background:var(--text); transform-origin:0 50%; transform:scaleX(var(--f, 0)); }
  .hm-rail-b b { font-weight:400; }
  .hm-rail-b span { display:none; margin-left:8px; }
  .hm-rail-b.is-on { flex:1 1 auto; color:var(--text); }
  .hm-rail-b.is-on span { display:inline; }
  .hm-rail-b:hover { color:var(--text); }
  .hm-rail-b:focus-visible { outline-offset:2px; }
  .hm-rail-b { letter-spacing:0.08em; }
  /* replay: runs the four steps once (home.js) */
  .hm-play .hm-rail-play { display:inline-flex; flex:0 0 44px; align-items:center; justify-content:center; min-height:44px; padding:0; color:var(--text); background:none; border:1px solid var(--border); border-radius:0; cursor:pointer; -webkit-appearance:none; appearance:none; transition:background-color .2s, color .2s, border-color .2s; }
  .hm-rail-play svg { width:14px; height:14px; fill:currentColor; }
  .hm-rail-play:hover { border-color:var(--text); }
  .hm-rail-play.is-run { color:var(--bg); background:var(--text); border-color:var(--text); }
  /* step 2: the cap comes from above P*, where it does not bind (dashed, labelled, no P_D tick), the price leaves a trail on the axis */
  .hm-play .hm-ptrail { display:block; }
  .hm-play .hm-graph-story[data-bind="0"] .hm-cap-free { display:inline; }
  .hm-play .hm-graph-story[data-bind="0"] .hm-tick-pd { opacity:0; }
  .hm-play .hm-graph-story { order:2; flex:0 0 auto; max-width:min(100%, 46vh - 20px); max-width:min(100%, 46svh - 20px); margin:0 auto; }
  .hm-play .hm-graph-story .hm-plot-wrap { padding-top:8px; padding-bottom:26px; }
  .hm-play .hm-readout { display:none; }
  .hm-play .hm-acts { order:3; grid-template-columns:minmax(0,1fr); gap:0; align-items:start; padding:8px 0 0; }
  .hm-play .hm-act { grid-area:1 / 1; padding:0 0 0 14px; background:none; border:0; border-left:2px solid var(--c); pointer-events:none; opacity:var(--o, 0); transform:translate3d(0, calc(var(--s, 0) * 1px), 0); }
  .hm-play .hm-act:first-child { --o:1; }
  .hm-play .hm-act.is-on { pointer-events:auto; }
  .hm-play .hm-act h3 { font-size:21px; margin-bottom:6px; }
  .hm-play .hm-act p { font-size:14.5px; line-height:1.55; }
  .hm-play .hm-act-cta { margin-top:12px; min-height:46px; padding:10px 14px; letter-spacing:0.08em; }
  /* the diagram follows the scroll position */
  .hm-play .hm-wipe { transform:translate3d(calc((var(--draw) - 1) * 100%), 0, 0); }
  .hm-play .hm-wipe-in { transform:translate3d(calc((1 - var(--draw)) * 100%), 0, 0); }
  .hm-play .hm-curve { opacity:var(--dim); }
  .hm-play .hm-c-lbl { opacity:calc((var(--draw) - .75) * 4); }
  .hm-play .hm-eq { transform:scale(var(--ke)); }
  .hm-play .hm-guide, .hm-play .hm-tick-p, .hm-play .hm-tick-q { opacity:var(--kg); }
  .hm-play .hm-eq-lbl { opacity:var(--kl); }
  .hm-play .hm-ly { opacity:var(--kc); }
  .hm-play .hm-fade, .hm-play .hm-seg { opacity:var(--kd); transition:none; }
  .hm-play .hm-short { opacity:var(--ks); transition:none; }
  html.hm-scene .scroll-top { opacity:0; visibility:hidden; pointer-events:none; } /* phones and small tablets (no wide gutter): nothing floats over a running scene */
}
@media screen and (min-width: 1440px) {   /* room for all four labels (below that only the active step shows its label) */
  .hm-rail-b, .hm-rail-b.is-on { flex:1 1 auto; } /* sized to their labels, so none is cut off */
  .hm-rail-b span { display:inline; }
}
@media screen and (max-width: 359.98px) { .hm-play .hm-rail-play { display:none; } }
/* the two quantities as bars under the step text: they part when the gap opens (wide and tall enough screens) */
@media screen and (min-width: 900px) and (min-height: 680px) {
  .hm-play .hm-qbars { grid-column:2; display:grid; gap:8px; max-width:30em; margin-top:20px; --qa:50; --qn:50; opacity:var(--kg, 0); }
  .hm-qbar { display:grid; grid-template-columns:9.5em minmax(0,1fr); align-items:center; gap:12px; font-family:'Space Mono',monospace; font-size:11px; line-height:1.3; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-secondary); }
  .hm-qbar-t { position:relative; height:8px; overflow:hidden; background:var(--range-bg); }
  .hm-qbar-t::after { content:''; position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--text); opacity:.7; } /* Q* */
  .hm-qbar-t i { position:absolute; left:0; top:0; width:100%; height:100%; transform-origin:0 50%; }
  .hm-qbar-a i { background:var(--supply-color); transform:scaleX(calc(var(--qa) / 100)); }
  .hm-qbar-n i { background:var(--demand-color); transform:scaleX(calc(var(--qn) / 100)); }
  .hm-qbar-g { opacity:var(--ks, 0); }
  .hm-qbar-g .hm-qbar-l { color:var(--hm-red-t); }
  .hm-qbar-g i { background:var(--accent); transform:translate3d(calc(var(--qa) * 1%), 0, 0) scaleX(calc((var(--qn) - var(--qa)) / 100)); }
}
@media screen and (min-width: 1920px) and (min-height: 1200px) {   /* very large screens: the stage grows with them */
  .hm-play .hm-graph-story { max-width:min(780px, 114.3vh - 330px); max-width:min(780px, 114.3svh - 330px); }
  .hm-play .hm-act { max-width:32em; }
  .hm-play .hm-act h3 { font-size:44px; }
  .hm-play .hm-act p { font-size:18px; }
}
@media screen and (min-width: 600px) and (max-width: 899.98px) {
  .hm-play .hm-rail, .hm-play .hm-acts { width:100%; max-width:560px; margin-left:auto; margin-right:auto; }
  .hm-play .hm-acts { padding-top:14px; }
  .hm-play .hm-act h3 { font-size:26px; }
  .hm-play .hm-act p { font-size:16px; line-height:1.62; }
}
@media screen and (min-width: 900px) {
  .hm-play.hm-story { height:calc(100vh - var(--hm-top) + 250vh); height:calc(100svh - var(--hm-top) + 250svh); margin-top:calc(var(--hm-lift, 0px) * -1); margin-bottom:calc(var(--hm-lift, 0px) * -1); } /* the stage's empty top and bottom slide under the section head and the closing strip (home.js measures --hm-lift) */
  .hm-how { position:relative; z-index:1; }
  .hm-model-head { position:relative; z-index:1; pointer-events:none; }
  .hm-model-head .hm-sec-head > * { pointer-events:auto; }
  .hm-play .hm-stage { align-items:center; }
  .hm-play .hm-stage-in { display:grid; grid-template-columns:minmax(0,.94fr) minmax(0,1fr); gap:clamp(32px,4.4vw,72px); align-items:center; min-height:0; padding:0; }
  .hm-play .hm-stage-copy { display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:clamp(18px,2vw,30px); align-items:start; }
  .hm-play .hm-rail { grid-column:1 / -1; order:0; gap:10px; margin-bottom:clamp(20px,4.5vh,48px); }
  /* the step number rolls like a counter (decorative; the step label says the same) */
  .hm-play .hm-count { display:block; margin-top:-0.08em; font-style:italic; font-weight:900; font-size:clamp(72px,7.4vw,112px); line-height:1.2; color:var(--accent); -webkit-user-select:none; user-select:none; }
  .hm-count-win { display:block; height:1.2em; overflow:hidden; padding:0 .14em 0 .04em; }
  .hm-count-roll { display:block; transform:translate3d(0, calc(var(--n, 0) * -1.2em), 0); }
  .hm-count-roll span { display:block; height:1.2em; }
  .hm-play .hm-acts { order:0; padding:0; min-height:17.5em; }
  .hm-play .hm-act { padding-left:0; border-left:0; max-width:30em; }
  .hm-play .hm-act h3 { font-size:clamp(26px,2.6vw,36px); margin-bottom:12px; }
  .hm-play .hm-act p { font-size:16px; line-height:1.68; }
  .hm-play .hm-act-cta { margin-top:22px; min-height:50px; padding:13px 22px; letter-spacing:0.12em; }
  .hm-play .hm-graph-story { order:0; max-width:min(620px, 114.3vh - 330px); max-width:min(620px, 114.3svh - 330px); margin:0; justify-self:end; }
  .hm-play .hm-graph-story .hm-plot-wrap { padding-top:14px; padding-bottom:30px; }
  .hm-play .hm-readout { display:grid; margin-top:4px; }
  .hm-play .hm-readout span { display:block; opacity:0; white-space:nowrap; transition:opacity .3s; }
  .hm-play .hm-readout span.is-on { opacity:1; }
}

/* closing strip: how every chapter is read */
/* a short strip without numerals (the story above already counts 1 to 4). Phones: three plain lines, no pictures; from 760px: one row of three with a small pictogram */
.hm-how { padding-top:28px; padding-bottom:40px; }
.hm-how-h { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px; margin:0 0 12px; font-family:'Playfair Display',serif; font-size:clamp(20px,2.1vw,28px); font-weight:900; line-height:1.15; letter-spacing:-0.01em; color:var(--text); }
.hm-how-k { font-size:11px; font-weight:400; letter-spacing:0.32em; color:var(--accent); }
.hm-steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:0; }
.hm-step { display:block; min-width:0; padding:11px 0 12px; border-top:1px solid var(--border); }
.hm-step-fig { display:none; }
.hm-step-fig svg { display:block; width:100%; height:auto; overflow:visible; }
.hm-step-body { min-width:0; }
.hm-step h4 { font-family:'Playfair Display',serif; font-size:17px; font-weight:700; line-height:1.25; color:var(--text); margin:0 0 3px; }
.hm-step p { font-size:13.5px; line-height:1.5; color:var(--text-secondary); margin:0; }
.hm-step h4, .hm-step p { overflow-wrap:anywhere; -webkit-hyphens:auto; hyphens:auto; }
.hm-f-ink { fill:var(--text); }
.hm-f-dim { fill:var(--guide-line-soft); }
.hm-f-mark { fill:var(--shade-red); stroke:var(--accent); stroke-width:1; }
.hm-f-axis { fill:none; stroke:var(--guide-line); stroke-width:1.25; }
.hm-f-s { fill:none; stroke:var(--supply-color); stroke-width:3; stroke-linecap:round; }
.hm-f-d { fill:none; stroke:var(--demand-color); stroke-width:3; stroke-linecap:round; }
.hm-f-track { fill:none; stroke:var(--range-bg); stroke-width:4; stroke-linecap:round; }
.hm-f-fill { fill:none; stroke:var(--accent); stroke-width:4; stroke-linecap:round; }
.hm-f-thumb { fill:var(--text); stroke:var(--surface); stroke-width:3; }
.hm-f-pt { fill:var(--gold); }
.hm-f-mark, .hm-f-fill, .hm-f-thumb, .hm-f-swing, .hm-f-pt { transform-box:fill-box; }
.hm-f-mark, .hm-f-fill { transform-origin:0 50%; }
.hm-f-swing, .hm-f-pt { transform-origin:50% 50%; }
.hm-f-fill-1 { transform:scaleX(.68); }
.hm-f-thumb-1 { transform:translateX(62.5px); }
.hm-f-fill-2 { transform:scaleX(.33); }
.hm-f-thumb-2 { transform:translateX(30.5px); }
.hm-f-swing { transform:rotate(-11deg); }
.hm-js .hm-step .hm-f-mark { transition:transform .9s var(--hm-ease) .35s; }
.hm-js .hm-step .hm-f-fill, .hm-js .hm-step .hm-f-thumb, .hm-js .hm-step .hm-f-swing { transition:transform 1.2s var(--hm-ease) .5s; }
.hm-js .hm-step .hm-f-pt { transition:transform .45s var(--hm-ease) calc(.9s + var(--i) * 90ms); }
.hm-js .hm-step .hm-f-model { transition:opacity .9s ease .3s; }
@media screen {
  .hm-js .hm-step:not(.is-on) .hm-f-mark { transform:scaleX(0); }
  .hm-js .hm-step:not(.is-on) .hm-f-fill-1, .hm-js .hm-step:not(.is-on) .hm-f-fill-2 { transform:scaleX(.08); }
  .hm-js .hm-step:not(.is-on) .hm-f-thumb-1, .hm-js .hm-step:not(.is-on) .hm-f-thumb-2 { transform:translateX(7px); }
  .hm-js .hm-step:not(.is-on) .hm-f-swing { transform:rotate(0deg); }
  .hm-js .hm-step:not(.is-on) .hm-f-pt { transform:scale(0); }
  .hm-js .hm-step:not(.is-on) .hm-f-model { opacity:0; }
}
@media (min-width: 601px) {
  .hm-how { padding-top:40px; padding-bottom:64px; }
}
@media (min-width: 760px) {
  .hm-how-h { margin-bottom:20px; }
  .hm-steps { grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; }
  .hm-step { display:grid; grid-template-columns:minmax(0,1fr); align-content:start; gap:14px; padding:18px 20px 20px; background:var(--surface); border:1px solid var(--border); }
  .hm-step-fig { display:block; width:108px; }
  .hm-step h4 { font-size:19px; margin-bottom:5px; }
  .hm-step p { font-size:14px; line-height:1.58; }
}
@media (min-width: 1100px) {
  .hm-how { padding-top:clamp(40px,4.4vw,64px); padding-bottom:clamp(72px,7vw,104px); }
  .hm-step { grid-template-columns:120px minmax(0,1fr); gap:22px; align-items:center; padding:20px 24px; }
  .hm-step-fig { width:auto; }
}

/* ── IN FOCUS ───────────────────────────────────────────────────── */
.hm-focus { background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding-top:52px; padding-bottom:56px; }
.hm-focus-note { font-size:15px; line-height:1.7; color:var(--content-color); max-width:34em; margin:0; }
.hm-stand { display:inline-block; margin-left:4px; padding:2px 8px 3px; font-size:11px; letter-spacing:0.14em; line-height:1.5; white-space:nowrap; color:var(--gold-text); border:1px solid var(--gold); vertical-align:1px; }
.hm-focus-cards { display:grid; grid-template-columns:minmax(0,1fr); gap:2px; }
.hm-focus .hero-card, .hm-ch .hero-card { display:flex; flex-direction:column; min-width:0; padding:20px 20px 16px; transition:background-color .3s, transform .35s var(--hm-ease); }
.hm-focus .hero-card { background:var(--bg); }
.hm-focus .hero-card:hover, .hm-focus .hero-card:focus-visible { background:var(--surface2); }
.hm-focus-k { display:flex; align-items:center; gap:10px; margin-bottom:14px; font-size:11px; letter-spacing:0.2em; line-height:1.4; color:var(--text-secondary); }
.hm-focus-k::before { content:''; flex:none; width:18px; height:2px; background:var(--accent); }
.hm-focus .hero-card h3 { font-size:21px; line-height:1.2; margin-bottom:10px; text-wrap:balance; }
.hm-focus .hero-card p { font-size:14.5px; line-height:1.62; color:var(--content-color); margin-bottom:18px; }
.hm-focus-fig { display:none; }
.hm-focus-cap { fill:none; stroke:var(--text); stroke-width:2; }
.hm-focus-eq { fill:var(--gold); stroke:var(--bg); stroke-width:2; }
.hm-js .hm-focus-cap { transition:transform 1.1s var(--hm-ease) .7s; }
@media screen { .hm-js .hm-focus-card:not(.is-on) .hm-focus-cap { transform:translate3d(0,-30px,0); } }
@media (min-width: 601px) {
  .hm-focus { padding-top:72px; padding-bottom:80px; }
  .hm-focus .hero-card { padding:26px 26px 20px; }
  .hm-focus-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hm-focus-lead { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1fr) 150px; grid-template-areas:"k fig" "h fig" "p fig" "foot foot"; column-gap:28px; }
  .hm-focus .hm-focus-lead { display:grid; }
  .hm-focus-lead .hm-focus-k { grid-area:k; }
  .hm-focus-lead h3 { grid-area:h; }
  .hm-focus-lead p { grid-area:p; }
  .hm-focus-lead .hm-card-foot { grid-area:foot; }
  .hm-focus-fig { display:block; grid-area:fig; align-self:center; width:100%; height:auto; overflow:visible; }
  .hm-focus .hm-focus-lead h3 { font-size:clamp(24px,2.4vw,30px); }
}
@media (min-width: 900px) {
  .hm-focus { padding-top:clamp(72px,7.6vw,104px); padding-bottom:clamp(80px,8vw,112px); }
  .hm-focus .hm-sec-head { margin-bottom:clamp(32px,4vw,52px); }
}
@media (min-width: 1100px) {
  .hm-focus-cards { grid-template-columns:minmax(0,1.9fr) minmax(0,1fr) minmax(0,1fr); }
  .hm-focus-lead { grid-column:auto; grid-template-columns:minmax(0,1fr) clamp(130px,12vw,170px); }
}

/* ── CHAPTERS ───────────────────────────────────────────────────── */
.hm-ch { padding-top:52px; padding-bottom:64px; }
.hm-ch-top { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:18px 48px; }
.hm-ch .hm-hint { display:flex; align-items:flex-start; gap:10px; max-width:400px; margin:0 0 4px; font-size:14px; line-height:1.6; color:var(--text-secondary); }
.hm-hint strong { color:var(--text); font-weight:500; }
.hm-ico { flex:none; width:18px; height:18px; margin-top:2px; fill:var(--bg); stroke:var(--accent); stroke-width:1.5; stroke-linecap:round; }
.hm-group { display:grid; grid-template-columns:minmax(0,1fr); border-top:1px solid var(--guide-line-soft); padding-bottom:30px; }
.hm-group:last-child { padding-bottom:0; }
.hm-group-head { position:sticky; top:var(--hm-top); z-index:3; padding:13px 0 12px; background:var(--bg); }
.hm-group-title { font-size:22px; font-weight:900; line-height:1.15; letter-spacing:-0.01em; color:var(--text); margin:0; }
.hm-cards { display:grid; grid-template-columns:minmax(0,1fr); gap:2px; }
.hm-ch .hero-card-num { display:flex; align-items:center; gap:10px; margin-bottom:14px; font-size:11px; letter-spacing:0.2em; color:var(--text-secondary); }
.hm-ch .hero-card-num::before { content:''; width:18px; height:2px; background:var(--accent); }
.hm-ch .hero-card h3 { font-size:19px; line-height:1.22; margin-bottom:9px; overflow-wrap:break-word; hyphens:auto; }
.hm-ch .hero-card p { font-size:13.5px; line-height:1.62; color:var(--text-secondary); margin-bottom:16px; }
.hm-card-foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:11px; border-top:1px solid var(--border); font-size:11px; letter-spacing:0.12em; line-height:1.4; color:var(--text-secondary); }
.hero-card:hover .hm-card-foot .hm-arr, .hero-card:focus-visible .hm-card-foot .hm-arr { transform:translateX(4px); color:var(--text); }
@media (max-width: 600px) {
  .hm-ch .hero-card { padding:18px 18px 14px; }
  .hm-ch .hero-card p { margin-bottom:10px; }
  .hm-card-foot { padding-top:9px; }
}
@media (min-width: 601px) {
  .hm-ch { padding-top:72px; padding-bottom:88px; }
  .hm-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hm-group-1 .hero-card { grid-column:1 / -1; }
  .hm-group-title { font-size:24px; }
  .hm-ch .hero-card { padding:24px 24px 18px; }
}
@media (min-width: 900px) { .hm-ch .hm-sec-head { margin-bottom:clamp(36px,4.5vw,56px); } }
@media (min-width: 1100px) {
  .hm-ch { padding-top:clamp(80px,8vw,112px); padding-bottom:clamp(88px,9vw,128px); }
  .hm-group { grid-template-columns:190px minmax(0,1fr); gap:0 34px; padding:26px 0 40px; }
  .hm-group-head { top:124px; align-self:start; padding:4px 0 0; background:none; z-index:auto; }
  .hm-group-title { font-size:clamp(23px,1.9vw,28px); }
  .hm-cards { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .hm-group-2 .hero-card { grid-column:span 2; }
  .hm-group-1 .hero-card { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1.2fr) auto; grid-template-areas:"num p foot" "h p foot"; gap:0 36px; align-items:center; padding:26px 28px; }
  .hm-group-1 .hero-card-num { grid-area:num; }
  .hm-group-1 .hero-card h3 { grid-area:h; font-size:clamp(21px,1.75vw,25px); margin-bottom:0; hyphens:manual; }
  .hm-group-1 .hero-card p { grid-area:p; font-size:15px; margin-bottom:0; }
  .hm-group-1 .hm-card-foot { grid-area:foot; margin-top:0; padding:14px 18px; border:1px solid var(--accent); color:var(--text); gap:14px; }
}

/* ── CARDS: focus ring inside the card, so neither a neighbour nor the sticky theme title can cover it ── */
.hm-focus .hero-card:focus-visible, .hm-ch .hero-card:focus-visible { outline-offset:-2px; }
@media (max-width: 1099.98px) { .hm-ch .hero-card { scroll-margin-top:calc(var(--hm-top) + 60px); } } /* a focused card lands below the sticky theme title */
.hm-ch .hero-card h3 { text-wrap:balance; }
@media (max-width: 600px) {   /* phones: the hint above the list already names the models, so only the arrow stays, beside the number */
  .hm-ch .hm-card-foot { position:absolute; top:17px; right:18px; margin:0; padding:0; border:0; }
  .hm-ch .hm-card-foot > span { display:none; }
  .hm-ch .hero-card p { margin-bottom:4px; }
}
.hm-btn-ghost { border-color:var(--text-secondary); } /* 3:1 against the page in both themes */
@media (max-width: 600px) { .hm-focus .hm-focus-lead { border-top:2px solid var(--accent); } .hm-focus .hm-focus-lead h3 { font-size:24px; } } /* the lead card stays recognisable when the cards stack */

/* ── SMALL RED TEXT: the lighter text red in the dark theme (4.5:1); --accent stays for lines and large type ── */
.hm-toc-k, .hm-how-k, .hm-focus .hm-tag, .hm-model .hm-tag, .hm-ch .hm-tag, .hm-c-lbl-d, .hm-tick-qn, .hm-short-lbl { color:var(--hm-red-t); }

/* ── SHORTCUT TO THE CHAPTERS: sits above the scroll-top button, visible between the first screen and the overview ── */
.hm-jump { position:fixed; right:28px; bottom:84px; z-index:900; display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; border:1px solid var(--border); background:var(--nav-bg); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); color:var(--text-secondary); text-decoration:none; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s, visibility 0s .3s, color .2s, border-color .2s; }
.hm-jump.is-on { opacity:1; visibility:visible; pointer-events:auto; transition:opacity .3s, visibility 0s, color .2s, border-color .2s; }
.hm-jump svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.hm-jump-t { position:absolute; right:calc(100% + 10px); top:50%; padding:7px 12px; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.12em; line-height:1.4; white-space:nowrap; color:var(--text); background:var(--bg); border:1px solid var(--guide-line-soft); opacity:0; transform:translate3d(8px,-50%,0); transition:opacity .25s, transform .25s; pointer-events:none; }
.hm-jump:hover, .hm-jump:focus-visible { color:var(--text); border-color:var(--accent); }
.hm-jump:hover .hm-jump-t, .hm-jump:focus-visible .hm-jump-t { opacity:1; transform:translate3d(0,-50%,0); }
@media (max-width: 900px) { .hm-jump { right:16px; bottom:76px; } }
@media (prefers-reduced-motion: reduce) { .hm-jump, .hm-jump.is-on, .hm-jump-t { transition:none; } }
@media print { .hm-jump { display:none !important; } .hm-tag, .hm-how-h { break-after:avoid; } .hm-eth-head > div, .hm-sec-head > div { break-inside:avoid; } }

/* ── SUPPORT (markup unchanged): same gutters as the sections above ── */
main > .support-box { padding-left:max(var(--hm-gx), calc((100% - var(--hm-max)) / 2)); padding-right:max(var(--hm-gx), calc((100% - var(--hm-max)) / 2)); }

/* ── REDUCED MOTION — static, complete, readable ────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hm-intro *, .hm-eq::after, .hm-handle::after, .hm-graph-hint .hm-arr, .hm-tok-dot::after { animation:none !important; }
  .hm-js .hm-rv, .hm-js .hm-rv-l, .hm-js .hm-rv-r { opacity:1; transform:none; transition:none; }
  .hm-bg-grid, .hm-bg-glow, .hm-hero .hm-graph, .hm-hero-copy, .hm-pole-word span { transform:none !important; }
  .hm-pin > .hm-hero { position:relative; top:auto; }
  .hm-btn:hover, .hm-handle:hover { transform:none; }
}

/* ── PRINT — the finished page, without relying on script events ── */
@media print {
  :root, html.theme-dark, html.theme-light { --border:#ccc; --guide-line-soft:#999; --hm-red-t:#a81f26; --gold-text:#856010; --accent3-text:#0f7068; --bg:#fff; --surface:#fff; --text:#1a1a1a; --text-secondary:#555; --content-color:#333; }
  main *, main *::before, main *::after { transition:none !important; animation:none !important; }
  .hm-bg, .hm-graph-hint, .hm-handle, .hm-hit, .hm-toc, .hm-cta, .hm-arr, .hm-pole-mid, .hm-glow, .hm-split-axis, .hm-rail, .hm-count, .hm-mx-hint, .hm-act-cta, .hm-case-card::after, .hm-focus-fig, .hm-focus-k::before, .hm-ch .hero-card-num::before { display:none !important; }
  .hm-hero, .hm-stage, .hm-mx-pin, .hm-group-head { position:static !important; }
  .hm-hero { min-height:0 !important; overflow:visible; padding:0; }
  .hm-hero-in { display:block; padding:0 0 16px; opacity:1 !important; }
  .hm-hero-copy, .hm-graph, .hm-map, .hm-case-card, .hm-wipe, .hm-wipe-in, .hm-act { opacity:1 !important; transform:none !important; }
  .hm-graph { max-width:420px !important; margin:20px 0 0 !important; break-inside:avoid; }
  .hm-graph-story .hm-plot-wrap { padding-top:36px !important; } /* the cap label is laid out above the plot: keep that spot inside the unbreakable figure */
  /* end states of the two scroll scenes, whatever the script wrote last */
  .hm-graph-story { --cap:60 !important; --lvl:60 !important; --qa:38.44 !important; --qn:62.93 !important; --kq:1 !important; --kk:1 !important; --kp:1 !important; --draw:1 !important; --ke:1 !important; --kg:1 !important; --kl:1 !important; --kc:1 !important; --kd:1 !important; --ks:1 !important; --ka:1 !important; --kb:1 !important; --dim:1 !important; }
  .hm-map { --in:1 !important; --ax:1 !important; --qb:1 !important; --qg:1 !important; }
  .hm-tok { --g:1 !important; --a:1 !important; }
  .hm-story { height:auto !important; }
  .hm-stage { height:auto !important; padding:12px 0 0 !important; overflow:visible !important; }
  .hm-stage-in { display:flex !important; flex-direction:column; gap:16px !important; padding:0 !important; } /* the finished diagram first, then the four steps */
  .hm-graph-story { order:-1 !important; }
  .hm-acts { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important; }
  .hm-mx-in { display:flex !important; flex-direction:column; gap:14px !important; }
  .hm-mx-steps { display:contents !important; }
  .hm-mx-intro { order:-1; align-self:stretch !important; padding:0 !important; min-height:0 !important; }
  .hm-case { padding:0 !important; }
  .hm-axis, .hm-guide, .hm-f-axis { stroke:#777; }
  .hm-f-ink, .hm-f-thumb { fill:#1a1a1a; }
  .hm-f-dim { fill:#bbb; }
  .hm-ico { fill:#fff; }
  .hm-eth, .hm-mx, .hm-model-head, .hm-how, .hm-focus, .hm-ch { padding:20px 0 0 !important; border:none; }
  .hm-plot .hm-short, .hm-plot .hm-eq, .hm-plot .hm-capline, .hm-plot .hm-seg, .hm-plot .hm-dot, .hm-plot .hm-drop, .hm-note-shaft, .hm-map-ax, .hm-tok-dot, .hm-tok-range, .hm-tok-range::before, .hm-tok-range::after, .hm-v-mid::before, .hm-case-card::before { -webkit-print-color-adjust:exact; print-color-adjust:exact; box-shadow:none; }
  .hm-graph .hm-plot .hm-short { background:rgba(192,39,46,0.14) !important; }
  .hm-graph .hm-plot .hm-eq { background:#b8892a !important; }
  .hm-graph .hm-plot .hm-capline, .hm-graph .hm-plot .hm-seg, .hm-graph .hm-plot .hm-dot, .hm-graph .hm-plot .hm-drop, .hm-graph .hm-note-shaft, .hm-map .hm-map-ax { background:#1a1a1a !important; }
  .hm-map .hm-tok-dot, .hm-map .hm-tok-range, .hm-map .hm-tok-range::before, .hm-map .hm-tok-range::after { background:var(--c) !important; }
  .hm-map .hm-tok-name, .hm-short-lbl, .hm-note-lbl { background:#fff !important; }
  .hm-case, .hm-act, .hm-step, .hero-card, .hm-map { break-inside:avoid; }
  .hm-case-card, .hm-act, .hm-step, .hero-card, .hm-pole, .hm-map-plane { border:1px solid #ddd !important; }
  .hm-steps { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hm-step { display:block; }
  .hm-cards, .hm-focus-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hm-group-title, .hm-sec-head { break-after:avoid; }
}