/* Stundenwerk, fictional gym (concept demo of Alixier). Concept "Eine Halle. 28 Stunden." (tools/stundenwerk/KONZEPT.md).
   Graphite film chapters, chalk-white working part, one volt-lime accent (as text on graphite; as a ground with ink text on chalk;
   dark olive for accent words on chalk). Unbounded for every headline, Schibsted Grotesk for text and prices. One radius (4px).
   Base CSS = the still layout (no JS, "reduce motion"); html.moving = the pinned, scroll-driven zoom walls. */
@font-face { font-family: 'Unbounded'; src: url(fonts/unbounded-latin-wght-normal.woff2) format('woff2'); font-weight: 200 900; font-display: swap; }
@font-face { font-family: 'Schibsted Grotesk'; src: url(fonts/schibsted-grotesk-latin-wght-normal.woff2) format('woff2'); font-weight: 400 900; font-display: swap; }
:root {
  --chalk: #F3F2EE; --chalk-2: #E8E7E1; --ink: #16181C; --mute: #55585E; --line: #D6D5CF; --olive: #3E5500;
  --gr: #1B1E23; --gr-2: #262A31; --volt: #C9F24A; --on-dark: #F3F2EE; --dim: rgba(243, 242, 238, .78);
  --r: 4px; --gut: clamp(16px, 3.6vw, 56px); --hd: 66px; --max: 1320px; --cap: 178px;
}
* { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hd) + 16px); }
body { margin: 0; background: var(--chalk); color: var(--ink); font: 400 17px/1.55 'Schibsted Grotesk', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; overflow-wrap: break-word; } /* no hyphens: auto: German hyphenation of every text costs ~2 s of layout on a slow phone (Lighthouse, 20.10.) */
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 3px solid var(--olive); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--chalk); padding: 10px 14px; border-radius: var(--r); }
.skip:focus { top: 12px; }
.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }
.d { font-family: 'Unbounded', 'Arial Black', sans-serif; font-weight: 640; letter-spacing: -.025em; line-height: 1.04; hyphens: manual; }
.acc { color: var(--olive); }
.tag { font-size: 12px; font-weight: 500; letter-spacing: .02em; background: rgba(243, 242, 238, .92); color: var(--ink); padding: 3px 7px; border-radius: var(--r); }
.small { font-size: 14.5px; color: var(--mute); margin-top: 28px; max-width: 68ch; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* buttons: volt ground, ink text */
.btns { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: var(--r); border: 2px solid var(--ink); background: var(--volt); color: var(--ink); font-weight: 700; font-size: 16px; text-decoration: none; transition: background .2s, border-color .2s, color .2s; }
.btn:hover { background: var(--ink); color: var(--volt); }
.btn--line { background: transparent; }
.btn--line:hover { background: var(--ink); color: var(--chalk); }
.btn--ghost { background: transparent; color: var(--on-dark); border-color: var(--on-dark); }
.btn--ghost:hover { background: var(--on-dark); color: var(--ink); }
.btn--sm { min-height: 44px; padding: 0 16px; font-size: 15px; }
.more { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; font-weight: 700; font-size: 17px; text-decoration: none; border-bottom: 3px solid var(--volt); padding-bottom: 3px; }

/* header: one line; over a film (body.is-over) clear and light until the zoom starts */
.hd { position: sticky; top: 0; z-index: 40; background: rgba(243, 242, 238, .96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.hd__in { height: var(--hd); display: flex; align-items: center; gap: 28px; padding: 0 var(--gut); }
.logo { display: flex; flex-direction: column; text-decoration: none; line-height: 1.25; }
.logo b { font-size: 21px; line-height: 1; }
.logo small { font-size: 12.5px; margin-top: 4px; color: var(--mute); font-weight: 600; letter-spacing: .02em; }
.nav { display: flex; gap: 24px; margin-left: 12px; }
.nav a { text-decoration: none; font-weight: 600; font-size: 16px; padding: 10px 0; border-bottom: 3px solid transparent; }
.nav a:hover, .nav a[aria-current] { border-color: var(--volt); }
.hd__r { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.hd__live { font-size: 14px; color: var(--mute); }
.burger { display: none; }
.is-over .hd { position: fixed; left: 0; right: 0; }
.is-over .hd:not(.solid) { background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--on-dark); }
.is-over .hd:not(.solid)::before { content: ''; position: absolute; inset: 0 0 -40px; z-index: -1; background: linear-gradient(rgba(27, 30, 35, .72), rgba(27, 30, 35, 0)); pointer-events: none; }
.is-over .hd:not(.solid) .logo small, .is-over .hd:not(.solid) .hd__live { color: var(--dim); }
.is-over .hd:not(.solid) .burger { border-color: var(--on-dark); }
.is-over .hd:not(.solid) :focus-visible { outline-color: var(--volt); }
.is-over .hd:not(.solid) .btn { border-color: var(--volt); }
.live::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #8A8C90; margin-right: 8px; vertical-align: 1px; }
.live.is-open::before { background: #5BB531; }
.mnav { position: fixed; inset: var(--hd) 0 auto 0; z-index: 39; background: var(--chalk); color: var(--ink); border-bottom: 1px solid var(--line); padding: 8px var(--gut) 24px; display: flex; flex-direction: column; }
.mnav[hidden] { display: none; }
.mnav > a { font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 24px; line-height: 1.3; text-decoration: none; padding: 9px 0; border-bottom: 1px solid var(--line); }
.mnav a[aria-current] { color: var(--olive); }
.mnav p { margin-top: 18px; color: var(--mute); font-size: 15px; }

/* film */
.film { position: relative; overflow: hidden; background: var(--gr-2); }
.film img, .film video { width: 100%; height: 100%; object-fit: cover; }
.film video { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; }
.film video.is-play { opacity: 1; }
.film .tag { position: absolute; right: 10px; top: 10px; z-index: 1; }

/* ============ the zoom wall (start: the week; ending: the trial tile; inner pages: the topic strip) ============ */
.zw { position: relative; background: var(--gr); color: var(--on-dark); }
.zw__st { position: relative; }
.zw__film { position: relative; height: 100svh; min-height: 560px; }
.zw__film picture, .zw__film > img { width: 100%; height: 100%; }
.zw__film picture img { width: 100%; height: 100%; object-fit: cover; }
.zw__film .tile__t { opacity: 0; }
.is-wall .zw__film .tile__t { opacity: 1; }
.zw__t { position: absolute; left: var(--gut); right: var(--gut); top: 0; height: 100svh; min-height: 560px; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(48px, 11vh, 112px); z-index: 3; pointer-events: none; }
.zw__t > * { pointer-events: auto; }
.zw__t::before { content: ''; position: absolute; left: calc(-1 * var(--gut)); right: calc(-1 * var(--gut)); bottom: 0; height: 70%; z-index: -1; background: linear-gradient(rgba(27, 30, 35, 0), rgba(27, 30, 35, .8)); }
.zw__h { font-size: clamp(40px, 7.4vw, 118px); line-height: 1; max-width: 14ch; }
.zw .acc, .ch .acc, .ft .acc { color: var(--volt); }
.zw__s { margin-top: 20px; font-size: clamp(16px, 1.4vw, 19px); font-weight: 500; color: var(--on-dark); max-width: 56ch; }
.zw__go { margin-top: 26px; align-self: flex-start; border-color: var(--volt); }
.zw__tag { position: absolute; right: 12px; top: calc(var(--hd) + 10px); z-index: 4; }
.zw__end .zw__t, .zw__t--end { justify-content: flex-end; }
.zw__t--end .btns { margin-top: 22px; }
.zw__t--end .btn--ghost { border-color: var(--on-dark); }

/* the tiles */
.zw__wall { display: grid; gap: 4px; padding: 4px; background: var(--gr); }
.tile { position: relative; overflow: hidden; border-radius: var(--r); background: var(--gr-2); color: var(--on-dark); text-decoration: none; min-height: 0; }
.tile__i { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(rgba(27, 30, 35, 0), rgba(27, 30, 35, .86)); pointer-events: none; }
.tile__t { position: absolute; left: 10px; right: 8px; bottom: 8px; z-index: 1; display: flex; flex-direction: column; font-size: 14px; line-height: 1.25; font-weight: 500; }
.tile__t b { font-size: 15px; font-weight: 800; }
.tile__m { position: absolute; left: 8px; top: 8px; z-index: 1; white-space: nowrap; font-size: 12px; font-weight: 800; background: var(--volt); color: var(--ink); padding: 2px 7px; border-radius: var(--r); }
.tile__m:empty { display: none; }
.tile.is-today { box-shadow: inset 0 4px 0 var(--volt); }
.tile.is-next { outline: 3px solid var(--volt); outline-offset: -3px; }
.tile--trial { background: var(--volt); color: var(--ink); }
.is-wall.zw--end .zw__film { outline: 3px solid var(--volt); outline-offset: -3px; }
.tile--trial::after { display: none; }
.tile--go { background: var(--volt); color: var(--ink); }
.tile--go::after { display: none; }
.zw__film > .tile__t { left: 12px; bottom: 10px; z-index: 2; }
.zw__film > .tile__m { opacity: 0; z-index: 2; }
.is-wall .zw__film > .tile__m { opacity: 1; }
.is-wall .zw__film.is-next { outline: 3px solid var(--volt); outline-offset: -3px; }
.is-wall .zw__film.is-today { box-shadow: inset 0 4px 0 var(--volt); }
.zw__film::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(rgba(27, 30, 35, 0), rgba(27, 30, 35, .86)); opacity: 0; pointer-events: none; z-index: 1; }
.is-wall .zw__film::after { opacity: 1; }
a.tile:hover .tile__t b { text-decoration: underline; text-decoration-color: var(--volt); text-decoration-thickness: 3px; }
a.tile:focus-visible { outline: 3px solid var(--volt); outline-offset: -3px; }

/* the week: desktop days are columns, phone days are rows */
.zw__wall--week { grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); grid-auto-flow: column; height: 86vh; }
.zw__wall--strip { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); height: 70vh; }
.zw__wall--8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.zw__wall--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zw__wall--3 { grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: 1fr; }
.zw__wall--strip .tile__t { left: 16px; bottom: 14px; font-size: 16px; }
.zw__wall--strip .tile__t b { font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: clamp(18px, 1.8vw, 28px); letter-spacing: -.02em; line-height: 1.1; }
.zw--in .zw__film > .tile__t b { font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: clamp(18px, 1.8vw, 28px); letter-spacing: -.02em; line-height: 1.1; }
.zw--in .zw__film > .tile__t { left: 16px; bottom: 14px; font-size: 16px; }

/* the caption under the week */
.zw__cap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 12px 32px; align-items: center; padding: 16px var(--gut) 56px; background: var(--gr); }
.cap__h { font-size: clamp(20px, 1.9vw, 30px); line-height: 1.15; }
.cap__f { list-style: none; margin: 0; padding: 0; font-size: 15.5px; line-height: 1.5; color: var(--on-dark); }
.cap__f b { color: var(--volt); }
.cap__b .btn--ghost { border-color: var(--on-dark); }

/* ============ cost ============ */
.cost { padding-top: clamp(80px, 13vh, 150px); }
.cost__h { margin-bottom: clamp(26px, 4vh, 44px); }
.sec__h { font-size: clamp(34px, 4.6vw, 74px); }
.sec__h--m { font-size: clamp(26px, 2.6vw, 40px); }
.sec__s { margin-top: 18px; font-size: 18px; color: var(--mute); max-width: 56ch; }
.cost__g { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.trs { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.tr { padding: 16px 0; border-bottom: 1px solid var(--line); }
.tr__t { display: flex; align-items: baseline; gap: 12px; }
.tr__n { font-size: 20px; font-weight: 800; line-height: 1.3; }
.r__l { flex: 1; min-width: 16px; border-bottom: 2px dotted var(--line); transform: translateY(-5px); }
.tr__p { font-size: 18px; font-weight: 700; white-space: nowrap; }
.tr__p small { font-size: 14px; font-weight: 500; color: var(--mute); }
.tr__w { margin-top: 4px; font-size: 15.5px; color: var(--mute); max-width: 56ch; }
.tr--free .tr__p { background: var(--volt); padding: 0 8px; border-radius: var(--r); }
.cc { background: var(--gr); color: var(--on-dark); border-radius: var(--r); padding: clamp(20px, 2.6vw, 34px); }
.cc__l { display: block; font-weight: 700; font-size: 18px; }
.cc__row { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.cc__row input { flex: 1; accent-color: var(--volt); min-height: 44px; }
.cc__x { font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 26px; min-width: 2.6ch; }
.cc__k { display: flex; align-items: center; gap: 10px; margin-top: 10px; min-height: 44px; font-size: 16px; }
.cc__k input { width: 22px; height: 22px; accent-color: var(--volt); }
.cc__os { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid rgba(243, 242, 238, .25); }
.cc__o { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(243, 242, 238, .25); font-size: 16px; }
.cc__v { white-space: nowrap; }
.cc__o.is-off { color: rgba(243, 242, 238, .72); }
.cc__o.is-best { color: var(--volt); font-weight: 800; }
.cc__o.is-best .cc__n::after { content: ' · am günstigsten'; font-weight: 600; }
.cc__say { margin-top: 14px; font-size: 16px; }

/* ============ the hall: a film chapter ============ */
.ch { position: relative; margin-top: clamp(90px, 14vh, 160px); background: var(--gr); color: var(--on-dark); min-height: 100svh; display: flex; align-items: flex-end; }
.ch__f { position: absolute; inset: 0; }
.ch__f .film { height: 100%; }
.ch__t { position: relative; z-index: 2; width: 100%; padding-top: 30vh; padding-bottom: clamp(48px, 10vh, 110px); }
.ch__t::before { content: ''; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background: linear-gradient(rgba(27, 30, 35, 0), rgba(27, 30, 35, .84) 60%); }
.ch__h { font-size: clamp(36px, 5.6vw, 92px); max-width: 15ch; }
.ch__l { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px 40px; font-size: 16px; color: var(--dim); }
.ch__l b { display: block; font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 26px; color: var(--on-dark); }
.more--on { border-color: var(--volt); }

/* ============ the trial in three steps ============ */
.steps { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 0 clamp(24px, 5vw, 80px); padding-top: clamp(80px, 13vh, 150px); padding-bottom: clamp(80px, 13vh, 150px); align-items: end; }
.steps .sec__h { grid-column: 1 / -1; margin-bottom: clamp(24px, 4vh, 40px); }
.st { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.st li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.st__n { font-size: 36px; line-height: 1; color: var(--olive); }
.st h3 { font-size: 20px; font-weight: 800; line-height: 1.3; }
.st p { margin-top: 4px; color: var(--mute); max-width: 52ch; }
.steps__f { margin: 0; }
.steps__f .film { aspect-ratio: 4 / 5; border-radius: var(--r); }

/* ============ closing call on inner pages ============ */
.call { padding-top: clamp(72px, 12vh, 130px); padding-bottom: clamp(72px, 12vh, 130px); border-top: 1px solid var(--line); margin-top: clamp(56px, 9vh, 100px); }
.call__h { font-size: clamp(32px, 4.4vw, 68px); max-width: 24ch; }
.call__s { margin: 18px 0 24px; font-weight: 600; color: var(--mute); }

/* ============ training ============ */
.kls-w { padding-top: clamp(56px, 9vh, 110px); }
.kls { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.kl { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: clamp(16px, 3vw, 48px); padding: clamp(18px, 3vh, 30px) 0; border-bottom: 1px solid var(--line); align-items: start; }
.kl__f { margin: 0; position: relative; }
.kl__f img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.kl__f .tag { position: absolute; right: 8px; top: 8px; }
.kl__n { font-size: clamp(26px, 2.8vw, 42px); }
.kl__m { margin-top: 8px; font-weight: 700; }
.kl__x { margin-top: 8px; max-width: 60ch; color: var(--mute); }
.kl__w { margin-top: 10px; font-size: 15.5px; }
.free { padding-top: clamp(56px, 9vh, 100px); max-width: 860px; }

/* ============ Kursplan ============ */
.kp { padding-top: clamp(48px, 8vh, 96px); }
.kp__fs { display: grid; gap: 10px; margin-bottom: 28px; scroll-margin-top: calc(var(--hd) + 16px); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 0 16px; border: 2px solid var(--ink); border-radius: var(--r); background: transparent; font-weight: 700; font-size: 15px; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--volt); }
.kp__say { font-weight: 600; color: var(--mute); }
.kp__w { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.kp__d { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 12px 10px; scroll-margin-top: calc(var(--hd) + 16px); }
.kp__d.is-today { border: 2px solid var(--ink); box-shadow: inset 0 5px 0 var(--volt); }
.kp__h { font-size: 16px; font-weight: 800; padding-bottom: 8px; border-bottom: 2px solid var(--ink); display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.kp__now { font-size: 12.5px; background: var(--volt); padding: 1px 6px; border-radius: var(--r); }
.kp__now[hidden] { display: none; }
.kp__l { list-style: none; margin: 0; padding: 0; }
.kp__c { padding: 10px 0; border-bottom: 1px solid var(--line); display: grid; }
.kp__c[hidden] { display: none; }
.kp__t { font-weight: 800; }
.kp__n a { font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--volt); }
.kp__m { font-size: 13.5px; color: var(--mute); }
.kp__d.is-empty .kp__l::after { content: 'nichts passend'; display: block; padding: 10px 0; font-size: 13.5px; color: var(--mute); }

/* ============ Mitgliedschaft ============ */
.ms { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vh, 64px) clamp(24px, 5vw, 80px); padding-top: clamp(56px, 9vh, 110px); }
.ms__p .trs, .ms__c .cc { margin-top: 18px; }
.ms__t { grid-column: 1 / -1; }
.dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(20px, 4vw, 64px); margin: 18px 0 0; max-width: 1040px; }
.dl div { padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 12px; }
.dl dt { font-weight: 800; }
.dl dd { margin: 0; color: var(--mute); }
.dl--1 { grid-template-columns: 1fr; }

/* ============ Die Halle ============ */
.hl { padding-top: clamp(56px, 10vh, 120px); }
.lede { font-size: clamp(22px, 2.3vw, 34px); line-height: 1.3; font-weight: 500; letter-spacing: -.012em; max-width: 38ch; }
.hl__g { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(12px, 2vw, 28px); margin-top: clamp(32px, 6vh, 64px); align-items: start; }
.hl__g figure { margin: 0; }
.l1 .film { aspect-ratio: 16 / 10; border-radius: var(--r); }
.l2 { margin-top: 18% !important; } .l2 .film { aspect-ratio: 4 / 5; border-radius: var(--r); }
.hl__a { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: clamp(40px, 7vh, 72px); border-top: 2px solid var(--ink); padding-top: 20px; }
.hl__a section { scroll-margin-top: calc(var(--hd) + 16px); }
.hl__h { font-size: 20px; margin-bottom: 8px; }
.hl__a p { color: var(--mute); font-size: 16px; }
.hl__i { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); margin-top: clamp(56px, 9vh, 100px); }
.hl__live { margin: 12px 0 8px; font-weight: 700; }
.hours { border-collapse: collapse; width: 100%; max-width: 440px; margin-top: 8px; font-variant-numeric: tabular-nums; }
.hours td { padding: 9px 0; border-bottom: 1px solid var(--line); }
.hours td + td { text-align: right; }
.hours .is-today td { font-weight: 800; }

/* ============ Probetraining ============ */
.pt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 5vw, 80px); padding-top: clamp(56px, 9vh, 110px); padding-bottom: 40px; }
.pt section { scroll-margin-top: calc(var(--hd) + 16px); }
.st--page { margin-top: 18px; }
.pt__h2 { margin-top: 48px; }
.rows { list-style: none; margin: 12px 0 0; padding: 0; }
.r { padding: 12px 0; border-bottom: 1px solid var(--line); }
.r__t { display: flex; align-items: baseline; gap: 10px; }
.r__n { font-size: 17px; font-weight: 600; line-height: 1.3; }
.r__p { font-size: 16px; white-space: nowrap; color: var(--mute); }
.form { display: grid; gap: 14px; margin-top: 18px; }
.form label { display: grid; gap: 6px; font-weight: 700; font-size: 15px; }
.form label { min-width: 0; }
.form input, .form select, .form textarea { width: 100%; max-width: 100%; min-width: 0; min-height: 48px; padding: 10px 12px; border: 1px solid var(--ink); border-radius: var(--r); background: #fff; font-weight: 400; font-size: 16px; }
.form__p { font-size: 14px; color: var(--mute); }
.form .btn { justify-self: start; }
.form__ok { padding: 14px; border: 2px solid var(--ink); border-radius: var(--r); background: var(--chalk-2); }
.pt__fict { margin-bottom: 64px; }

/* legal */
.legal { padding-top: calc(var(--hd) + 40px); padding-bottom: 80px; max-width: 820px; }
.legal h1 { font-size: clamp(36px, 5.4vw, 64px); margin-bottom: 24px; }
.legal h2 { font-size: 20px; margin-top: 30px; }
.legal p { margin-top: 10px; }
.draft { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--chalk-2); }

/* footer */
.ft { background: var(--gr); color: var(--on-dark); padding: 64px 0 120px; }
.ft__in { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr 1fr; gap: 28px; }
.ft__name { font-size: clamp(28px, 2.8vw, 42px); color: var(--volt); align-self: start; }
.ft h2 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; font-weight: 700; }
.ft p { font-size: 15.5px; line-height: 1.75; }
.ft a { text-decoration: none; border-bottom: 1px solid rgba(243, 242, 238, .45); }
.ft__by { margin-top: 12px; color: var(--dim); }
.ft__fict { grid-column: 1 / -1; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(243, 242, 238, .2); font-size: 14.5px !important; color: rgba(243, 242, 238, .86); max-width: 90ch; }

/* phone bar + badge */
.pbar { display: none; }
.badge { position: fixed; left: 16px; bottom: 16px; z-index: 30; background: var(--chalk); color: var(--ink); font-size: 12.5px; font-weight: 700; padding: 8px 12px; border-radius: var(--r); text-decoration: none; box-shadow: 0 1px 0 rgba(0, 0, 0, .25); }

/* ============ motion (html.moving): pinned zoom walls ============ */
.moving .zw--week { height: 300vh; }
.moving .zw--in { height: 210vh; }
.moving .zw--end { height: 240vh; }
.moving .zw__st { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; }
.moving .zw__wall { position: absolute; left: 0; right: 0; top: var(--hd); bottom: 0; height: auto; transform-origin: 0 0; will-change: transform; visibility: hidden; }
.moving .zw--week .zw__wall { bottom: var(--cap); }
.moving .zw--end .zw__wall { visibility: visible; }
.moving .zw__film { position: absolute; left: 0; top: 0; width: 100%; height: 100%; min-height: 0; z-index: 2; }
.moving .zw__cap { position: absolute; left: 0; right: 0; bottom: 0; height: var(--cap); z-index: 3; opacity: 0; pointer-events: none; }
.moving .zw--end .zw__t { opacity: 0; }
.moving .zw--end .zw__t.is-off > * { pointer-events: none; }
.moving .zw--in { background: var(--gr); }
/* inner pages: the headline stays; it sits above the strip the film pulls back into */
.moving .zw--in .zw__t { height: calc(var(--hd) + 30vh); min-height: 0; padding-bottom: 3vh; }
.moving .zw--in .zw__t::before { top: 0; bottom: auto; height: 100%; background: linear-gradient(rgba(27, 30, 35, .8), rgba(27, 30, 35, .45) 60%, rgba(27, 30, 35, 0)); }
.moving .zw--in .zw__h { font-size: clamp(34px, 5vw, 80px); }
.moving .zw--in .zw__wall { top: calc(var(--hd) + 30vh); }
.moving .zw--in .zw__s { margin-top: 12px; }

/* ============ phone ============ */
@media (max-width: 1100px) { .nav { gap: 16px; } .hd__live { display: none; } .hl__a { grid-template-columns: 1fr 1fr; } .kp__w { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  :root { --hd: 60px; --cap: 232px; }
  .nav, .hd__go { display: none; }
  .burger { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 2px solid var(--ink); border-radius: var(--r); background: transparent; font-weight: 700; }
  .logo b { font-size: 18px; }
  .zw__wall--week { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(7, minmax(0, 1fr)); grid-auto-flow: row; height: 640px; gap: 3px; padding: 3px; }
  .zw__wall--week .tile__t { left: 6px; right: 4px; bottom: 5px; font-size: 12px; line-height: 1.2; }
  .zw__wall--week .tile__t b { font-size: 12.5px; }
  .zw__wall--week .tile__m, .zw--week .zw__film > .tile__m { left: 3px; top: 3px; font-size: 10.5px; padding: 1px 4px; }
  .tile--trial .tile__t span, .zw--end .zw__film > .tile__t span { display: none; }
  .zw--week .zw__film > .tile__t { left: 6px; bottom: 5px; font-size: 12px; }
  .zw--week .zw__film > .tile__t b { font-size: 12.5px; }
  .zw__wall--strip { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: minmax(0, 1fr); height: 80vh; }
  .zw__wall--3 { grid-template-columns: 1fr; }
  .zw__wall--strip .tile__t { left: 10px; bottom: 10px; font-size: 14px; }
  .zw--in .zw__film > .tile__t { left: 10px; bottom: 10px; font-size: 14px; }
  .zw__cap { grid-template-columns: 1fr; gap: 10px; padding: 16px var(--gut) 52px; align-content: start; }
  .cap__b { display: none; }
  .cap__h { font-size: 20px; }
  .cap__f { font-size: 14.5px; }
  .cost__g, .ms, .pt, .hl__i, .hl__g, .steps { grid-template-columns: minmax(0, 1fr); }
  .steps__f { margin-top: 28px; } .steps__f .film { aspect-ratio: 4 / 3; }
  .kl { grid-template-columns: minmax(0, 1fr); }
  .kl__f { max-width: 420px; }
  .kp__w { grid-template-columns: 1fr; }
  .kp__l { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
  .ft__in { grid-template-columns: 1fr 1fr; }
  .ft__name { grid-column: 1 / -1; }
  .l2 { margin-top: 0 !important; width: 70%; justify-self: end; }
  .hl__a { grid-template-columns: 1fr; }
  .pbar { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(243, 242, 238, .97); border-top: 1px solid var(--line); transform: translateY(110%); }
  .pbar .btn { flex: 1; min-height: 46px; padding: 0 10px; font-size: 15px; }
  .is-past .pbar { transform: none; }
  .badge { bottom: 12px; left: 12px; font-size: 12px; }
  .is-past .badge { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .ft { padding-bottom: 150px; }
  .dl { grid-template-columns: 1fr; }
  .dl div { grid-template-columns: 9.4em minmax(0, 1fr); }
  .dl dt { hyphens: manual; }
  .moving .zw--week .zw__wall { bottom: calc(var(--cap) + 72px); }
  .moving .zw--week .zw__cap { bottom: 72px; }
  .zw__h { font-size: clamp(38px, 11.4vw, 64px); }
}
@media (max-width: 420px) { .kp__l { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }