/* Spec: specs/website.md R15, R16, R20, R2, R3; specs/logo.md R3 (the word mark). The stylesheet of every page. */
@font-face{font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(fonts/archivo-latin-wdth-normal.woff2) format('woff2')}
@font-face{font-family:'Martian Mono';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/martian-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Martian Mono';font-style:normal;font-display:swap;font-weight:600;src:url(fonts/martian-mono-latin-600-normal.woff2) format('woff2')}
/* Layout: full-bleed colour stages (night · snow · peach · enzian · glow) joined by faceted ridgelines.
   Content sits on one 1320px measure; questions are fitted to it edge to edge.
   Width is tempo: 62% slanted = fast, 100% = text, 125% = wide and unhurried.
   Outline = no answer yet, filled = answered. That rule drives darts, numerals and every reveal. */
:root{
  --night:#0B0E2A; --night-2:#161A4A;
  --enzian:#2230E6; --enzian-deep:#1822B0;
  --glow:#FF5A2B; --glow-soft:#FF9466; --peach:#FFCDB0;
  --snow:#F2F4FA; --ice:#D3DAF6; --paper:#FFFFFF;
  --firn:#22CDB9; --lilac:#B9A6FF; --slate:#4A5078;
  --dusk:#3F2585; --rose:#B93E73;
  --accent-on-ink:#e8571c; /* the logo's orange on ink (specs/logo.md R1) */

  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --sans:'Archivo','Helvetica Neue',Arial,sans-serif;
  --mono:'Martian Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --w-fast:62%; --w-norm:100%; --w-wide:125%;

  --gutter:clamp(18px,5vw,64px);
  --max:1320px;
  --stage-y:clamp(72px,10vw,144px);
  --ridge-h:clamp(56px,9vw,150px);
  --ridge-hero:clamp(40px,6.4vw,96px);
  --cut:14px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{overflow-x:hidden;scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--snow);font:400 1.0625rem/1.55 var(--sans);font-stretch:var(--w-norm);overflow-x:clip;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
svg{display:block}
button{font:inherit;color:inherit}
.wrap{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}
.nb{white-space:nowrap}
:focus-visible{outline:3px solid var(--glow);outline-offset:3px}
.skip{position:fixed;z-index:60;left:var(--gutter);top:-80px;padding:12px 16px;background:var(--snow);color:var(--night);font-weight:700}
.skip:focus{top:calc(10px + env(safe-area-inset-top,0px))}

/* cut corners are the control language; --cut is set per element */
.btn,.chip,.tally,.ans,.mail-av,.rc,.rc-badge,.btn-ja,.copy{clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
.oct{clip-path:polygon(var(--pc) 0,calc(100% - var(--pc)) 0,100% var(--pc),100% calc(100% - var(--pc)),calc(100% - var(--pc)) 100%,var(--pc) 100%,0 calc(100% - var(--pc)),0 var(--pc))}

/* ---------- type ---------- */
.eyebrow{display:flex;align-items:center;gap:10px;font:600 .8125rem/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase}
.eyebrow::before{content:"";flex:none;width:.7em;height:.8em;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
.mega{font:900 clamp(2.2rem,12.4vw,5.6rem)/.86 var(--display);font-stretch:var(--w-wide);letter-spacing:-.022em;text-transform:uppercase}
.mega span{display:block;white-space:nowrap}
.title{font:800 clamp(2rem,5vw,4rem)/1.03 var(--display);letter-spacing:-.022em;text-wrap:balance}
.lead{font:600 clamp(1.25rem,2.2vw,1.75rem)/1.25 var(--sans);letter-spacing:-.005em;text-wrap:balance}
.ex{font:600 .75rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.measuring span{animation:none!important;font-stretch:var(--w-wide)!important}
@keyframes settle{from{font-stretch:62%}to{font-stretch:125%}}
@media (prefers-reduced-motion:no-preference){
  h1 span{animation:settle 1.1s cubic-bezier(.2,.8,.2,1) both}
  h1 span:nth-child(2){animation-delay:.06s}
  h1 span:nth-child(3){animation-delay:.12s}
  @supports (animation-timeline:view()){
    .mega span{animation:settle linear both;animation-timeline:view();animation-range:entry 0% cover 34%}
  }
}

/* tags carry the group's tempo */
.tag{display:inline-block;padding:5px 9px 4px;background:var(--night);color:var(--snow);text-transform:uppercase;clip-path:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,0 100%)}
.tag-fast{font:italic 800 .9rem/1 var(--display);font-stretch:var(--w-fast);letter-spacing:.06em}
.tag-wide{font:800 .72rem/1.25 var(--display);font-stretch:var(--w-wide);letter-spacing:.03em}
.tag-role{background:var(--enzian);font:700 .75rem/1.2 var(--sans);letter-spacing:.07em}

/* ---------- top bar: chips, no slab ---------- */
.bar{position:fixed;z-index:50;top:calc(10px + env(safe-area-inset-top,0px));left:var(--gutter);right:var(--gutter);max-width:var(--max);margin-inline:auto;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.bar-right{display:flex;gap:8px}
.chip{--cut:10px;pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;height:46px;border:0;background:var(--night);color:var(--snow);text-decoration:none;cursor:pointer}
.chip:focus-visible{outline:3px solid var(--snow);outline-offset:-5px}
/* The word mark (specs/logo.md R3): the sign's box is as high as the type and lies on whole pixels. The sign stands
   on the baseline and is the tallest item of its line, so its top is the top of .wm, which the chip puts 10 px down. */
.wordmark{padding:10px 16px 0 14px;align-items:flex-start;font:900 22px/1 var(--display);font-stretch:var(--w-wide);letter-spacing:.015em}
.wm{display:inline-flex;align-items:baseline}
.wordmark-v{width:1.08em;height:1em;margin-right:.03em;fill:currentColor}
.wordmark-v-right{fill:var(--accent-on-ink)}
.v-r{fill:var(--glow)}
.bar-link{padding:0 20px;background:var(--glow);color:var(--night);font:700 .98rem/1 var(--sans);transition:background .2s}
.bar-link:hover{background:var(--peach)}
.bar-link:focus-visible{outline-color:var(--night)}
.bar-pause{width:46px}
/* The V of the word mark is wider than a letter (specs/logo.md R3): on the narrowest phones the chips give up a
   little of their padding, so the bar stays between the page's margins. */
@media (max-width:359px){.wordmark{padding-right:10px}.bar-link{padding:0 14px}}
.bar-pause::before{content:"";width:13px;height:15px;background:linear-gradient(90deg,currentColor 0 34%,transparent 34% 66%,currentColor 66%)}
.bar-pause[aria-pressed="true"]::before{background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}

/* ---------- buttons ---------- */
.btn{--cut:14px;display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:14px 22px 14px 24px;background:var(--glow);color:var(--night);font:700 1.05rem/1 var(--sans);text-decoration:none;transition:background .2s}
.btn svg{width:14px;height:14px;fill:currentColor;transition:translate .25s}
.btn:hover{background:var(--peach)}
.btn:hover svg{translate:0 3px}
.btn:focus-visible{outline:3px solid var(--night);outline-offset:-6px}

/* ---------- scenes ---------- */
.scene{--hz:50%;--vx:0px}
.scene canvas{position:absolute;inset:0;width:100%;height:100%}
.riders{position:absolute;inset:0;pointer-events:none}
.sun{position:absolute;left:calc(50% + var(--vx));top:var(--hz);height:auto;aspect-ratio:1}
.road{display:none;position:absolute;inset:0;background:var(--night);clip-path:polygon(calc(50% + var(--vx) - 4px) var(--hz),calc(50% + var(--vx) + 4px) var(--hz),calc(50% + var(--vx) + 38%) 100%,calc(50% + var(--vx) - 38%) 100%)}
.nogl .road{display:block}

/* ---------- hero ---------- */
.hero{position:relative;display:grid;grid-template-rows:1fr auto;min-height:clamp(600px,88svh,900px);background:var(--night);isolation:isolate;overflow:clip}
.hero .scene{position:absolute;inset:0;z-index:-1;overflow:hidden}
.sky{position:absolute;inset:0;background:linear-gradient(180deg,#070921 0%,#121350 calc(var(--hz)*.42),var(--dusk) calc(var(--hz)*.70),var(--rose) calc(var(--hz)*.90),#FF7440 var(--hz),#FF7440 calc(var(--hz) + 2%),#3A1C5E calc(var(--hz) + 22%),#0B0E2A 86%)}
.sunglow{position:absolute;left:calc(50% + var(--vx));top:var(--hz);width:min(96vw,980px);aspect-ratio:1;translate:-50% -50%;background:radial-gradient(closest-side,rgba(255,196,140,.55),rgba(255,116,64,.22) 45%,transparent 70%)}
.hero .sun{width:clamp(140px,19vw,270px);translate:-40% -52%}
.far{position:absolute;left:-4%;top:var(--hz);width:108%;height:clamp(40px,6.4vw,96px);translate:0 -97%}
.scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,9,33,.66) 0%,rgba(7,9,33,.28) 34%,transparent 56%),linear-gradient(0deg,rgba(11,14,42,.92) 0%,transparent 24%)}
.hero-copy{padding-top:clamp(96px,14vh,150px)}
.hero .eyebrow{color:var(--peach);font-size:max(12px,min(3.1vw,.8125rem));letter-spacing:.06em}
/* the line above the question stays on one line, at 12 px or more (R14): tighter on narrow phones */
@media (max-width:400px){.hero .eyebrow{gap:7px;letter-spacing:0}}
@media (max-width:359px){.hero .eyebrow::before{display:none}}
h1{margin-top:clamp(14px,2vw,24px);font:900 clamp(3.6rem,20.2vw,6.4rem)/.84 var(--display);font-stretch:var(--w-wide);letter-spacing:-.028em;text-transform:uppercase;text-shadow:0 2px 30px rgba(7,9,33,.4)}
h1 span{display:block;white-space:nowrap}
.hero-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;padding-block:32px calc(var(--ridge-hero) + 30px)}
.hero-lede{max-width:min(27rem,100%);display:grid;gap:22px;justify-items:start}
.hero-lede p{font:500 clamp(1.1rem,1.5vw,1.3rem)/1.42 var(--sans)}
.tally{--cut:16px;flex:none;min-width:min(100%,300px);padding:16px 20px 14px;background:rgba(11,14,42,.9)}
.tally-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font:600 .88rem/1.3 var(--sans);color:var(--ice)}
.tally-head span{white-space:nowrap}
.tally-head .ex{color:var(--peach)}
.tally dl{display:flex;gap:24px;margin-top:10px}
.tally dl div{display:grid}
.tally dd{font:900 2.8rem/1 var(--display);font-stretch:var(--w-wide);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tally dt{order:2;margin-top:4px;font:600 .84rem/1.2 var(--sans);color:var(--ice)}
.tally .t-nein dd{color:#98A3FA}
.tally .t-offen dd{color:transparent;-webkit-text-stroke:1.5px var(--snow)}
@media (min-width:700px){
  h1{font-size:clamp(5rem,11.6vw,10.5rem);white-space:nowrap}
  h1 span{display:inline}
  h1 span:last-child{display:block}
}
@media (min-width:981px){.hero-lede{max-width:min(27rem,34vw)}}
@media (max-width:980px){
  .hero{--scene-h:min(150vw,640px);grid-template-rows:var(--scene-h) auto;min-height:0}
  @supports (height:1svh){.hero{--scene-h:clamp(430px,calc(100svh - 190px),min(150vw,640px))}}
  .hero .scene{inset:0 0 auto 0;height:var(--scene-h)}
  .scrim{background:linear-gradient(180deg,rgba(7,9,33,.5) 0%,transparent 58%),linear-gradient(0deg,var(--night) 0%,transparent 20%)}
  .hero-copy{padding-top:92px}
  .hero .sun{width:clamp(88px,24vw,150px);translate:78% -62%}
  .hero-foot{flex-direction:column;align-items:stretch;padding-top:4px}
}

/* riders: polygon drawings, placed on the road by the scene script */
.rider{position:absolute;left:0;top:0;width:100px;height:204px;overflow:visible;transform-origin:50px 170px;opacity:0;transition:opacity .45s ease-out}
.rider.in{opacity:1}
.r-shadow{fill:#05061A;opacity:.42}
.r-calf,.r-thigh{animation:pedal var(--cad,.76s) ease-in-out var(--ph,0s) infinite}
.r-calf{--amp:13px}.r-thigh{--amp:6px}
.r-leg-r .r-calf,.r-leg-r .r-thigh{animation-delay:calc(var(--ph,0s) - var(--cad,.76s)/2)}
.r-body{transform-origin:50px 97px;animation:sway var(--cad,.76s) ease-in-out var(--ph,0s) infinite}
.r-light{animation:blink 1.1s steps(2,jump-none) infinite}
@keyframes pedal{0%,100%{transform:translateY(var(--amp))}50%{transform:translateY(calc(var(--amp)*-1))}}
@keyframes sway{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(1.4deg)}}
@keyframes blink{from{opacity:1}to{opacity:.35}}
html[data-motion="off"] :is(.r-calf,.r-thigh,.r-body,.r-light,.pack){animation-play-state:paused}

/* ---------- stages ---------- */
.stage{position:relative;padding-block:var(--stage-y) calc(var(--stage-y) + var(--ridge-h));overflow-x:clip}
.snow{background:var(--snow);color:var(--night)}
.peachbg{background:var(--peach);color:var(--night)}
.enzian{background:var(--enzian);color:var(--snow)}
.night{background:var(--night);color:var(--snow)}
.glowbg{background:var(--glow);color:var(--night)}
.ridge{position:absolute;left:0;bottom:calc(100% - 1px);width:100%;height:var(--ridge-h);pointer-events:none}
.ridge polygon{transition:fill-opacity .7s var(--d,0ms),stroke-opacity .7s var(--d,0ms)}
.ridge.wire polygon{fill-opacity:0;stroke-opacity:.6}
.snow .eyebrow,.peachbg .eyebrow{color:var(--enzian)}
.enzian .eyebrow,.night .eyebrow{color:var(--peach)}

/* ---------- tip: the e-mail ---------- */
.tip > .ridge{height:var(--ridge-hero)}
.tip-grid{display:grid;gap:clamp(40px,6vw,80px);align-items:center}
.tip .mega{margin-top:18px}
.tip .mega span:last-child{color:var(--enzian)}
.claims{display:grid;gap:14px;margin-top:clamp(28px,4vw,48px);font:600 clamp(1.12rem,1.7vw,1.4rem)/1.3 var(--sans)}
.claims li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline}
.claims li::before{content:"";width:.62em;height:.72em;background:var(--glow);clip-path:polygon(0 0,100% 50%,0 100%)}
.phone-fig{display:grid;justify-items:center;gap:20px;min-width:0}
.try{display:flex;align-items:center;gap:10px;font:600 .8125rem/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--enzian)}
.try::before{content:"";width:.8em;height:.7em;background:var(--glow);clip-path:polygon(0 0,100% 0,50% 100%)}
.phone-stage{position:relative;width:min(100%,348px);margin-bottom:44px}
.slab{position:absolute;inset:0;--pc:28px}
.slab-a{background:var(--enzian);translate:18px 22px}
.slab-b{background:var(--glow);translate:36px 44px}
.phone{position:relative;--pc:28px;padding:12px;background:var(--night)}
.mail{--pc:18px;display:grid;gap:12px;padding:24px 16px 20px;background:var(--paper);color:var(--night);font-size:.95rem;line-height:1.4}
.mail-from{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:center;padding-bottom:13px;border-bottom:1px solid var(--ice)}
.mail-av{--cut:9px;display:grid;place-items:center;width:40px;height:40px;background:var(--enzian)}
.mail-av svg{width:21px;height:auto;fill:var(--snow)}
.mail-av .v-r{fill:var(--glow-soft)}
.mail-from b{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-weight:700}
.mail-from .ex{color:var(--enzian);font-style:normal}
.mail-from div>span{display:block;font-size:.86rem;line-height:1.3;color:var(--slate)}
.mail-hi{font-weight:500}
.mail-hi strong{font-weight:800}
.mail-facts{margin-top:-4px;font-size:.86rem;line-height:1.45;color:var(--slate)}
.ans{--cut:12px;display:grid;gap:4px;width:100%;min-height:52px;padding:13px 15px;border:0;background:var(--c,var(--ice));color:var(--night);text-align:left;cursor:pointer;transition:filter .2s,background .2s,translate .15s}
.ans:hover{filter:brightness(1.07)}
.ans:active{translate:0 1px}
.ans:focus-visible{outline:3px solid var(--night);outline-offset:-5px}
.ans-1{--c:var(--glow)}.ans-2{--c:var(--firn)}
.ans-0{--c:var(--ice);text-align:center}
.ans-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ans-main{font:800 1.1rem/1.15 var(--sans)}
.ans-1 .ans-main{font:italic 900 1.5rem/1 var(--display);font-stretch:var(--w-fast);letter-spacing:.01em}
.ans-2 .ans-main{font:800 1rem/1.3 var(--display);font-stretch:var(--w-wide);letter-spacing:-.01em}
.ans-meta{font:600 .8125rem/1.3 var(--mono)}
.ans-sub{font-size:.86rem;line-height:1.3}
.ans[aria-pressed="true"]{box-shadow:inset 0 0 0 3px var(--night)}
.ans[aria-pressed="true"] .ans-main::after{content:"";display:inline-block;width:.78em;height:.62em;margin-left:.45em;background:currentColor;clip-path:polygon(0 52%,14% 38%,38% 62%,86% 0,100% 14%,38% 100%)}
.mail[data-state] .ans[aria-pressed="false"]{--c:var(--snow)}
.ans.nudge{animation:nudge .9s ease-in-out 2}
@keyframes nudge{0%,100%{translate:0}35%{translate:0 -5px;filter:brightness(1.12)}70%{translate:0 2px}}
.mail-status{min-height:1.4em;font-weight:700;color:var(--enzian)}
.mail-foot{padding-top:11px;border-top:1px solid var(--ice);font-size:.9rem;color:var(--slate)}
.mail-foot b{color:var(--night)}
.mail-foot a{display:inline-block;padding-block:6px;text-underline-offset:3px;color:var(--enzian)}
.mail-legal{margin-top:-6px;font-size:.8125rem;line-height:1.45;color:var(--slate)}
.mail-legal u{text-underline-offset:2px}
.phone-fig figcaption{max-width:34ch;font:500 .92rem/1.4 var(--sans);color:var(--slate);text-align:center;text-wrap:balance}
@media (min-width:900px){.tip-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}}
@media (max-width:600px){
  .phone-stage{width:calc(100% - 16px);justify-self:start;margin-bottom:20px}
  .phone{padding:0;background:none;clip-path:none}
  .slab{--pc:18px}
  .slab-a{translate:8px 10px}.slab-b{translate:16px 20px}
}

/* ---------- gain ---------- */
.gain .title{margin-top:16px}
.gain-grid{display:grid;gap:clamp(32px,4vw,56px);margin-top:clamp(36px,5vw,64px)}
.gain-grid article{display:grid;gap:12px;align-content:start;padding-top:22px;border-top:2px solid var(--night)}
.gain-grid svg{width:104px;height:81px;margin-bottom:10px}
.gain-grid h3,.steps h3{font:800 clamp(1.3rem,2vw,1.6rem)/1.12 var(--sans);letter-spacing:-.015em}
.gain-grid p{color:#3A3F66;max-width:34ch}
@media (min-width:820px){
  .gain-grid{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:0}
  .gain-grid article{grid-row:span 3;grid-template-rows:subgrid}
}

/* ---------- count ---------- */
.count .mega{margin-top:18px}
.stats{display:grid;gap:clamp(28px,3vw,48px);margin-top:clamp(40px,6vw,80px)}
.stat{display:grid;grid-template-columns:8.6rem minmax(0,1fr);grid-template-areas:"num lab" "num sub" "form form";column-gap:16px;align-items:center}
.stat .num{grid-area:num;align-self:center;margin-left:-.045em;font:900 clamp(4.4rem,22vw,6rem)/.8 var(--display);font-stretch:var(--w-wide);letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.formation{grid-area:form;width:100%;height:auto;aspect-ratio:360/110;margin-top:14px;overflow:visible;color:var(--snow)}
.formation text{font:600 13px var(--mono);letter-spacing:.06em;fill:currentColor}
.lea{transition:opacity .5s,translate .9s cubic-bezier(.2,.9,.2,1)}
.lea.off{opacity:0;translate:-46px 0}
.stat .lab{grid-area:lab;align-self:end;font:800 1.35rem/1.1 var(--sans);letter-spacing:-.01em}
.stat .sub{grid-area:sub;align-self:start;font:500 .95rem/1.4 var(--sans);color:var(--ice)}
.is-nein .num{color:#98A3FA}
.is-offen .num{color:transparent;-webkit-text-stroke:2px var(--snow)}
.count-more{display:grid;gap:clamp(32px,5vw,72px);align-items:center;margin-top:clamp(56px,8vw,112px)}
.count-text{display:grid;gap:14px}
.count-text p:last-child{max-width:36ch;color:var(--ice)}
.ridecard{display:grid;gap:14px;min-width:0}
.rc{--cut:clamp(26px,3.4vw,44px);padding:22px 24px 14px;background:var(--paper);color:var(--night)}
.rc-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--ice)}
.rc-badge{--cut:11px;display:grid;place-items:center;width:52px;height:52px;background:var(--firn);font:900 1.05rem/1 var(--display);font-stretch:var(--w-wide)}
.rc-title{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.rc-title b{font:800 1.15rem/1.2 var(--display);font-stretch:var(--w-wide);letter-spacing:-.01em}
.rc-meta{flex-basis:100%;font:400 .8125rem/1.4 var(--mono);color:var(--slate)}
.rc-n{font:900 2.6rem/1 var(--display);font-stretch:var(--w-wide);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.rc-list li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;min-height:52px;padding:10px 0;border-bottom:1px solid var(--ice)}
.rc-list li:last-child{border:0;color:var(--slate);font-size:.95rem}
.av{width:34px;height:24px;flex:none}
.nm{font-weight:700}
.rc-list q{quotes:"«" "»";color:var(--slate);font-style:italic}
.ridecard figcaption{font:500 .9rem/1.4 var(--sans);color:var(--ice)}
@media (min-width:820px){
  .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stat{grid-template-columns:1fr;grid-template-areas:"num" "form" "lab" "sub";row-gap:6px;align-content:start}
  .stat .num{font-size:clamp(6rem,13.5vw,12.5rem)}
  .formation{margin-block:18px 10px}
  .count-more{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
}

/* ---------- tempo ---------- */
.tempo .lead{margin-top:clamp(20px,3vw,36px);max-width:34ch}
.lanes{margin-top:clamp(36px,5vw,64px);border-bottom:1px solid rgba(242,244,250,.2)}
.lane{position:relative;border-top:1px solid rgba(242,244,250,.2);overflow:hidden;--c:var(--snow)}
.lane-1{--c:var(--glow);--dur:15s}
.lane-2{--c:var(--firn);--dur:20s}
.lane-3{--c:var(--lilac)}
.lane-road{position:absolute;left:0;right:0;bottom:0;height:36px;pointer-events:none;color:var(--c)}
.pack{position:absolute;left:0;bottom:7px;width:170px;height:26px;overflow:visible;animation:ride var(--dur) linear infinite}
.pack-b{animation-delay:calc(var(--dur)/-2)}
.pack-still{left:var(--gutter);animation:none}
@keyframes ride{from{transform:translateX(-180px)}to{transform:translateX(100vw)}}
.lane-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;align-items:end;padding-block:clamp(24px,3.6vw,48px) clamp(46px,5vw,64px)}
.lane-head{display:grid;gap:10px}
.lane-desc{grid-column:1/-1;display:grid;gap:6px}
.lane-tag{display:flex;align-items:center;gap:10px;font:600 .8125rem/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--c)}
.lane-tag::before{content:"";width:.7em;height:.8em;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
.lane-name{font:900 clamp(3.6rem,17vw,5rem)/.82 var(--display);text-transform:uppercase;white-space:nowrap;color:var(--c)}
.lane-1 .lane-name{font-stretch:var(--w-fast);font-style:italic;letter-spacing:-.005em}
.lane-2 .lane-name{font-stretch:var(--w-wide);font-size:clamp(1.9rem,8.8vw,3.2rem);letter-spacing:-.025em}
.lane-3 .lane-name{font-size:clamp(3rem,14vw,4.4rem);color:transparent;-webkit-text-stroke:1.5px var(--c);letter-spacing:-.01em}
.lane-speed{padding-bottom:.08em;font:800 clamp(1.6rem,3.4vw,2.9rem)/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.lane-speed small{font:400 .8125rem/1 var(--mono);letter-spacing:.04em;margin-left:.3em;color:var(--ice)}
.lane-style{font:600 clamp(1.12rem,1.6vw,1.35rem)/1.25 var(--sans)}
.lane-meta{font:400 .8125rem/1.5 var(--mono);color:var(--ice)}
.tempo .note{margin-top:24px;font-size:1rem;color:var(--ice)}
@media (min-width:820px){
  .lane-in{grid-template-columns:minmax(0,1.45fr) minmax(0,.75fr) minmax(0,1.1fr);gap:10px 40px;align-items:center}
  .lane-desc{grid-column:auto}
  .lane-speed{padding-bottom:0}
  .lane-name{font-size:clamp(6rem,13vw,11.5rem)}
  .lane-2 .lane-name{font-size:clamp(3rem,6.1vw,5.5rem)}
  .lane-3 .lane-name{font-size:clamp(4rem,8.6vw,7.6rem)}
  .lane-3 .lane-desc{grid-column:3}
}

/* ---------- setup ---------- */
.setup .title{margin-top:16px}
.setup .title span{display:block;color:var(--enzian)}
.profile{width:100%;height:auto;aspect-ratio:1200/150;margin-top:clamp(28px,4vw,56px);display:none;overflow:visible}
.steps{display:grid;gap:clamp(28px,3vw,48px);margin-top:clamp(32px,4vw,48px);padding-left:26px;border-left:3px solid var(--enzian)}
.steps li{position:relative;display:grid;gap:10px;align-content:start}
.steps li::before{content:"";position:absolute;left:-26px;top:6px;width:20px;height:16px;background:var(--glow);clip-path:polygon(0 0,100% 50%,0 100%)}
.step-n{font:900 clamp(3rem,5vw,4.4rem)/.9 var(--display);font-stretch:var(--w-wide);letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1.5px var(--enzian)}
.steps p{color:var(--slate);max-width:36ch}
@media (min-width:820px){
  .profile{display:block}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:0;margin-top:20px;padding-left:0;border-left:0}
  .steps li{grid-row:span 3;grid-template-rows:subgrid}
  .steps li::before{display:none}
}

/* ---------- closing ---------- */
.closing{padding-bottom:0}
.closing > .wrap{position:relative;z-index:1}
.closing-side{display:grid;gap:28px;margin-top:clamp(28px,4vw,56px)}
.closing-side .lead{max-width:30ch}
.closing-cta{display:grid;gap:14px;justify-items:start}
.btn-ja{--cut:20px;position:relative;display:grid;gap:6px;width:min(100%,480px);padding:22px 76px 22px 26px;background:var(--night);color:var(--snow);text-decoration:none;transition:background .2s}
.btn-ja b{font:900 clamp(1.35rem,2.2vw,1.8rem)/1.05 var(--display);font-stretch:var(--w-wide);letter-spacing:-.015em}
.btn-ja > span{font:400 .84rem/1.4 var(--mono);color:var(--peach)}
.btn-ja svg{position:absolute;right:26px;top:50%;width:26px;height:26px;translate:0 -50%;fill:var(--glow);transition:translate .25s}
.btn-ja:hover{background:var(--enzian)}
.btn-ja:hover svg{translate:6px -50%;fill:var(--snow)}
.btn-ja:focus-visible{outline:3px solid var(--snow);outline-offset:-7px}
.ask{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font-weight:600}
.ask a{display:inline-block;padding-block:10px;text-underline-offset:4px;text-decoration-thickness:2px}
.ask a:focus-visible,.copy:focus-visible{outline-color:var(--night)}
.copy{--cut:8px;min-height:44px;padding:8px 14px;border:0;background:rgba(11,14,42,.14);font:700 .92rem/1 var(--sans);cursor:pointer;transition:background .2s}
.copy:hover{background:rgba(11,14,42,.24)}
.scene-end{position:relative;height:clamp(260px,42vw,580px);margin-top:clamp(16px,3vw,40px)}
.scene-end canvas{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%);mask-image:linear-gradient(180deg,transparent 0,#000 30%)}
.scene-end .sun{width:clamp(110px,20vw,270px);translate:-50% -50%}
@media (min-width:900px){
  .closing-side{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:48px}
  .closing-cta{width:480px}
}

/* ---------- footer ---------- */
.foot{position:relative;padding-top:clamp(56px,7vw,96px);background:var(--night);color:var(--ice);font-size:.95rem}
.foot-grid{display:grid;gap:18px 48px}
.foot-grid p{max-width:46ch}
.foot-grid strong{color:var(--snow)}
.foot-grid a{display:inline-block;padding-block:8px;text-underline-offset:3px}
.foot-clip{margin-top:clamp(40px,6vw,80px);overflow:hidden}
.foot-mark{font:900 18.2vw/.74 var(--display);font-stretch:var(--w-wide);letter-spacing:-.03em;text-align:center;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(211,218,246,.4);user-select:none;translate:0 .08em}
@media (min-width:820px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .pack{left:12%}.pack-b{display:none}
}

/* ---------- the Impressum and the 404 page: the top bar and one column of text on snow ---------- */
/* the chip keeps its place when the line beside it wraps, so the word mark stays on whole pixels (logo R3) */
.bar-left{display:flex;align-items:flex-start;gap:14px}
.top-what{align-self:center;max-width:22ch;font:600 .75rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--night)}
.doc{min-height:100svh;padding-block:calc(84px + var(--stage-y)/2) var(--stage-y);background:var(--snow);color:var(--night)}
.doc-in{display:grid;gap:18px;justify-items:start}
.doc-in>:not(h1){max-width:44rem}
.doc h1{margin:0;font:900 clamp(2.2rem,7vw,4rem)/.92 var(--display);text-wrap:balance;font-stretch:var(--w-wide);letter-spacing:-.02em;text-transform:uppercase;text-shadow:none}
.doc h2{margin-top:18px;font:800 clamp(1.5rem,4vw,2rem)/1.1 var(--display);letter-spacing:-.01em}
.doc address{font-style:normal}
.doc a:not(.btn){color:var(--enzian);text-underline-offset:3px}
.doc-list{display:grid;gap:12px}
.doc-list li{position:relative;padding-left:22px}
.doc-list li::before{content:"";position:absolute;left:0;top:.45em;width:.6em;height:.7em;background:var(--glow);clip-path:polygon(0 0,100% 50%,0 100%)}
.doc .btn{margin-top:12px}
.doc-links{font-size:.95rem}