/* modue C5: the editorial shell
   One grotesk (Inter Tight) in two weights, neutral light grey paper and near-black ink (the same greys as the modue app), a 12-column grid with narrow gutters,
   lines of text that rise out of masks, buttons that grow from a ring into a disc. The device keeps Inter on its screens
   and the brand orange stays where something is alive: an LED, an active state. Pagers and progress dots are grey. */

:root{
  --paper:#e9e9eb;--paper-2:#e1e1e3;--paper-3:#d4d4d6;--grey:#bababc;--deep:#838385;--ink:#131314;--ink-2:#242425;--ink-3:#38383a;
  --orange:#ff4800;--orange-2:#ff6a2a;
  --f-ui:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Helvetica,sans-serif;--f:'Inter Tight','Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --rb:8px;--m:clamp(16px,1.6vw,28px);--gut:clamp(8px,.8vw,14px);--hd:72px;--sat:env(safe-area-inset-top,0px);
  --e-out:cubic-bezier(.23,1,.32,1);--e-io:cubic-bezier(.4,0,.2,1);--e-alpha:cubic-bezier(.25,.46,.45,.9);
  --t-fast:.35s;--t-norm:.45s;--t-smooth:.7s;
  color-scheme:light;
}
/* The page sets its own light and dark sections. A viewer may put data-theme on the root element (claude.ai does when
   the app is in dark mode), so the root always carries the light set, every light section states it again, and the dark
   set never applies to the root. */
:root,[data-theme="light"]{--bg:var(--paper);--fg:var(--ink);--fg-2:#58585c;--fg-3:var(--deep);--ln:rgba(19,19,20,.12);--ln-2:rgba(19,19,20,.2);--fill:var(--paper-2);--fill-2:var(--paper-3)}
[data-theme="dark"]:not(:root),.dark{--bg:var(--ink);--fg:var(--paper);--fg-2:rgba(233,233,235,.66);--fg-3:rgba(233,233,235,.44);--ln:rgba(233,233,235,.1);--ln-2:rgba(233,233,235,.18);--fill:var(--ink-2);--fill-2:var(--ink-3)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hd) + 24px)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--ink);color:var(--ink);font:500 15px/1.25 var(--f);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,canvas{display:block;max-width:100%}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;letter-spacing:inherit;text-align:inherit}
input{font:inherit;color:inherit;letter-spacing:inherit}
sup{font-size:.5em;line-height:0;vertical-align:.9em;font-weight:500;letter-spacing:0}
:focus-visible{outline:1.5px solid var(--orange);outline-offset:3px;border-radius:6px}
::selection{background:var(--ink);color:var(--paper)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:300;background:var(--paper);color:var(--ink);padding:10px 16px;border-radius:100px}
.skip:focus{top:12px}
.i{width:18px;height:18px;flex:none;fill:currentColor}
.ui{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- type ---------- */
.label-s{font:500 11px/1.25 var(--f);text-transform:uppercase;letter-spacing:.04em;color:var(--fg)}
.label-m{font:500 13px/1.2 var(--f);color:var(--fg)}
.label-l{font:500 15px/1.2 var(--f);color:var(--fg)}
.body-m{font:500 15px/1.3 var(--f);color:var(--fg)}
.body-l{font:500 17px/1.3 var(--f);color:var(--fg);max-width:34em;text-wrap:pretty}
.muted{color:var(--fg-3)!important}
.h-s{font:600 clamp(22px,1.9vw,28px)/1.1 var(--f);letter-spacing:-.01em;color:var(--fg)}
.h-m{font:600 clamp(26px,2.5vw,40px)/1.08 var(--f);letter-spacing:-.012em;color:var(--fg);text-wrap:balance}
.h-l{font:600 clamp(32px,3.6vw,56px)/1.04 var(--f);letter-spacing:-.016em;color:var(--fg);text-wrap:balance}
.h-xl{font:600 clamp(38px,4.6vw,74px)/1 var(--f);letter-spacing:-.02em;color:var(--fg);text-wrap:balance}
a.ul,.ul{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
sup.fn a{color:inherit;font-variant-numeric:tabular-nums}
sup.fn a:hover{color:var(--orange)}
.h-l sup.fn,.h-xl sup.fn{font-size:.28em;vertical-align:1.9em;color:var(--fg-3)}

/* ---------- layout ---------- */
.page{position:relative;z-index:1;background:var(--paper);box-shadow:0 1px 0 var(--paper)}
.wrap{width:100%;padding-inline:var(--m)}
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
/* blocks (cards, panels, framed renders and photos) take a soft corner; controls stay round, full-width sections stay square */
:is(.osc,.hc,.hvid-f,.pc-m,.pc-out,.pbd,.kit li,.fp-img,.rform fieldset,.bset,.tile-m,.power-fig,.reserve-stage,.demo-fig,.pshot,.lg-box,.lg-img.plate,.warn,.done .code){border-radius:var(--rb);overflow:hidden}
:is(.pbd-b,.pbd-pb){border-radius:calc(var(--rb) * .6)}
.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-9{grid-column:span 9}
.col-s4{grid-column:4/span 6}
.sec{position:relative;padding-block:clamp(110px,12vw,220px)}
section[data-theme="dark"]{background:var(--ink);color:var(--paper)}
section[data-theme="light"]{background:var(--paper);color:var(--ink)}
.sec-head{row-gap:18px;margin-bottom:clamp(56px,7vw,120px);align-items:start}
.sec-head .label-s{padding-top:.6em}

/* ---------- small parts ---------- */
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--orange);flex:none;box-shadow:0 0 0 0 rgba(255,72,0,.4),0 0 8px rgba(255,72,0,.7)}
.tag{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:100px;background:var(--fill);color:var(--fg);font:500 11px/1 var(--f);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.tag-dark{background:rgba(233,233,235,.08);color:var(--paper);text-transform:none;font-size:13px;letter-spacing:0;height:28px;padding:0 12px}
.tag-glass{background:rgba(233,233,235,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--ink)}
/* pills: the menu, the reserve button, chips */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:38px;padding:0 16px;border-radius:100px;background:var(--fill);color:var(--fg);font:500 15px/1 var(--f);white-space:nowrap;
  transition:background-color var(--t-norm) var(--e-out),color var(--t-norm) var(--e-out),transform var(--t-fast) var(--e-out)}
.pill:hover{background:var(--fill-2)}
.pill:active{transform:scale(.97)}
.pill-ink{background:var(--ink);color:var(--paper)}
.pill-ink:hover{background:#000}
.pill-line{background:transparent;box-shadow:inset 0 0 0 1px var(--ln-2)}
.pill-line:hover{background:var(--fill)}
.pill-glass{background:rgba(19,19,20,.55);color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);height:26px;padding:0 10px;font-size:12px;gap:6px}
.pill-glass .dot{width:6px;height:6px}
.pill-round{width:38px;padding:0}
.pill-menu,.pill-x{width:50px;padding:0;flex-direction:column;gap:5px}
.pill-menu i,.pill-x i{display:block;width:16px;height:1.5px;border-radius:2px;background:currentColor;transition:transform var(--t-norm) var(--e-out),opacity var(--t-fast)}
.pill-x i:first-child,.menu-open .pill-menu i:first-child{transform:translateY(3.25px) rotate(45deg)}
.pill-x i:last-child,.menu-open .pill-menu i:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button,.chip{display:inline-flex;align-items:center;height:36px;padding:0 15px;border-radius:100px;box-shadow:inset 0 0 0 1px var(--ln-2);color:var(--fg);font:500 14px/1 var(--f);white-space:nowrap;
  transition:background-color var(--t-norm) var(--e-out),color var(--t-norm) var(--e-out),box-shadow var(--t-norm)}
.chips button:hover,.chip:hover{background:var(--fill)}
.chips button[aria-selected="true"],.chips button[aria-checked="true"],.chip.on{background:var(--fg);color:var(--bg);box-shadow:none}
/* the round button: a ring that grows into a disc with an arrow; the label slides over and loses its underline */
.b{--c:26px;display:inline-flex;align-items:center;gap:10px;width:fit-content;font:500 15px/1.2 var(--f);color:var(--fg);cursor:pointer;white-space:nowrap}
.b-big{--c:34px;font-size:17px;gap:12px}
.b-c{position:relative;flex:none;width:var(--c);height:var(--c);display:grid;place-items:center;border-radius:50%;border:6px solid var(--fg);scale:.26;transform-origin:0 50%;overflow:hidden;
  transition:scale var(--t-smooth) var(--e-out),background-color var(--t-fast) var(--e-out),border-width var(--t-smooth) var(--e-out)}
.b-a{width:calc(var(--c) * .46);color:var(--bg);opacity:0;translate:-100% 0;transition:translate var(--t-smooth) var(--e-out),opacity var(--t-smooth) var(--e-out)}
.b-a svg{width:100%;height:auto}
.b-l{position:relative;translate:calc(var(--c) * -.72) 0;transition:translate var(--t-smooth) var(--e-out)}
.b-l::before{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:currentColor;transform-origin:100% 50%;transition:transform var(--t-smooth) var(--e-out) .1s}
@media (hover:hover){
  .b:hover .b-c{scale:1;background:var(--fg);border-width:1px}
  .b:hover .b-a{opacity:1;translate:0 0}
  .b:hover .b-l{translate:0 0}
  .b:hover .b-l::before{transform:scaleX(0)}
}
@media (hover:none){
  .b .b-c{scale:1;background:var(--fg);border-width:1px}
  .b .b-a{opacity:1;translate:0 0}
  .b .b-l{translate:0 0}
  .b .b-l::before{transform:scaleX(0)}
}
.b-light{--fg:var(--paper);--bg:var(--ink)}
.b[disabled]{opacity:.35;pointer-events:none}
.rplus{position:relative;flex:none;width:30px;height:30px;border-radius:50%;background:var(--fill);transition:background-color var(--t-norm) var(--e-out),transform var(--t-smooth) var(--e-out)}
.rplus::before,.rplus::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.4px;margin:-.7px 0 0 -5.5px;background:var(--fg);border-radius:1px;transition:transform var(--t-smooth) var(--e-out)}
.rplus::after{transform:rotate(90deg)}
.rbtn{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--fill);color:var(--fg);transition:background-color var(--t-norm) var(--e-out),color var(--t-norm)}
.rbtn svg{width:12px;height:12px}

/* ---------- reveals: lines rise out of masks, pictures open from the bottom ---------- */
.ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ln .li{display:block;transform:translateY(110%);transition:transform 1.1s var(--e-out) var(--d,0s)}
.in .ln .li,.ln.in .li{transform:none}
.js .lines:not(.split){visibility:hidden}
.mask{clip-path:inset(100% 0 0 0);transition:clip-path 1.25s var(--e-out)}
.mask>*{transform:scale(1.12);transition:transform 1.6s var(--e-out)}
.mask.in{clip-path:inset(0 0 0 0)}
.mask.in>*{transform:none}

/* ---------- loader and page transitions ---------- */
/* only the overview has a loader: an ink cover, the colour of its dark hero, until the deck is drawn. The logo on it is
   grey and fills with paper from left to right as the page gets ready: the paper logo lies underneath; over it a window
   of ink with the grey logo slides right while the grey logo inside slides left by as much, so the grey stays put and
   the paper shows from the left. Both moves are transforms, so the fill stays smooth while the page is busy loading
   the deck. Then the cover fades into the hero. Without JavaScript it fades after 6 s. */
.pt{position:fixed;inset:0;z-index:250;background:var(--paper);display:grid;place-items:center;pointer-events:none;transition:opacity .7s var(--e-out),visibility 0s .7s;animation:ptfail .6s var(--e-out) 6s forwards}
@keyframes ptfail{to{opacity:0;visibility:hidden}}
.pt-logo{position:relative;width:clamp(184px,16vw,256px);color:var(--ink);transition:opacity .35s}
.pt-logo svg{display:block;width:100%;height:auto;fill:currentColor}
.pt-g{position:absolute;inset:0;overflow:hidden;background:var(--paper);will-change:transform}
.pt-g>span{display:block;color:#c9c9cb;will-change:transform}
html.pt-out .pt{opacity:0;visibility:hidden}
html.pt-out .pt .pt-logo{opacity:0}
html.pt-ink .pt{background:var(--ink)}
html.pt-ink .pt-logo{color:var(--paper)}
html.pt-ink .pt-g{background:var(--ink)}
html.pt-ink .pt-g>span{color:var(--ink-3)}
/* from page to page the browser cross-fades the two pages (Chrome and Edge 126+, Safari 18.2+); elsewhere the next page
   simply loads */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.36s;animation-timing-function:var(--e-io)}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ---------- header ---------- */
.hd{position:fixed;top:0;left:0;right:0;z-index:120;height:calc(var(--hd) + var(--sat));padding:var(--sat) var(--m) 0;display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--ink);pointer-events:none;
  transition:color var(--t-norm) var(--e-out),transform var(--t-smooth) var(--e-out)}
.hd>*{pointer-events:auto}
.hd-logo{display:block;width:104px;color:currentColor}
.hd-logo svg{width:100%;height:auto;fill:currentColor}
.hd-r{display:flex;align-items:center;gap:8px}
/* desktop header is set larger than the 38 px pills elsewhere, so it holds its own next to the large type (Paweł, 12.11: "Duża") */
@media (min-width:761px){
  .hd-logo{width:138px}
  .hd-r{gap:10px}
  .hd .pill{height:46px;padding:0 20px;font-size:16.5px}
  .hd .pill-menu{width:58px;padding:0}
  .hd-batch{font-size:12.5px}
}
.hd-batch{display:inline-flex;align-items:center;gap:8px;margin-right:10px;color:inherit;opacity:.7;transition:opacity var(--t-norm) var(--e-out)}
.hd.moved .hd-batch{opacity:0;pointer-events:none}   /* the status line is for the first view; once the page moves it would sit on top of the content */
.hd-batch .dot{width:6px;height:6px}
.hd-res{position:relative}
.hd-res .dot{width:6px;height:6px}
.count{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--orange);color:#fff;font:600 11px/18px var(--f);text-align:center;margin-right:-6px}
.count:empty,.count[data-n="0"]{display:none}
.hd.on-dark{color:var(--paper)}
.hd.on-dark .pill-menu{background:var(--ink-2);color:var(--paper)}
.hd.on-dark .pill-menu:hover{background:var(--ink-3)}
.hd.on-dark .pill-ink{background:var(--paper);color:var(--ink)}
.hd.hide{transform:translateY(-110%)}
/* text pages: once the page moves, a plain bar in the colour of the section below sits under the header, so text never runs into the logo */
:is([data-page="legal"],[data-page="help"],[data-page="doc"]) .hd::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper);box-shadow:0 1px 0 rgba(19,19,20,.08);opacity:0;pointer-events:none;transition:opacity var(--t-norm) var(--e-out),background-color var(--t-norm) var(--e-out)}
:is([data-page="legal"],[data-page="help"],[data-page="doc"]) .hd.moved::before{opacity:1}
:is([data-page="legal"],[data-page="help"],[data-page="doc"]) .hd.on-dark::before{background:var(--ink);box-shadow:0 1px 0 rgba(233,233,235,.08)}
.menu-open .hd::before{opacity:0!important}
.menu-open .hd{color:var(--paper)}
.menu-open .hd .pill-menu{background:var(--ink-2);color:var(--paper)}
.menu-open .hd .hd-res,.menu-open .hd .hd-batch{opacity:0;pointer-events:none}

/* ---------- menu ---------- */
.menu{position:fixed;inset:0;z-index:110;background:var(--ink);color:var(--paper);display:grid;grid-template-rows:1fr auto;padding:calc(var(--hd) + var(--sat) + 3vh) var(--m) calc(var(--m) + env(safe-area-inset-bottom,0px));
  clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .9s var(--e-out),visibility 0s .9s}
.menu-open .menu{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .9s var(--e-out),visibility 0s}
.menu-l{display:grid;align-content:start;gap:2px}
.menu-l a{display:flex;align-items:baseline;gap:16px;width:fit-content;font:600 clamp(40px,6.4vw,92px)/1 var(--f);letter-spacing:-.02em;transition:opacity var(--t-norm) var(--e-out)}
.menu-l a em{font:500 13px/1 var(--f);font-style:normal;letter-spacing:0;color:var(--fg-3);opacity:0;transition:opacity var(--t-norm)}
.menu-l a .li{transition-delay:calc(.05s * var(--k,0) + .15s)}
.menu-open .menu-l a .li{transform:none}
.menu-open .menu-l a em{opacity:1;transition-delay:.5s}
.menu-l:hover a{opacity:.32}
.menu-l:hover a:hover{opacity:1}
.menu-l a[aria-current="page"] .li::after{content:"";display:inline-block;width:.14em;height:.14em;margin-left:.18em;border-radius:50%;background:currentColor;vertical-align:.62em}
.menu-l a.mys{color:var(--fg-3)}
.menu-b{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:end;opacity:0;transition:opacity .5s}
.menu-open .menu-b{opacity:1;transition-delay:.45s}
.menu-c{grid-column:span 3;display:grid;gap:6px;color:var(--fg-2)}
.menu-c .label-s{color:var(--fg-3);margin-bottom:6px}
.menu-c a:hover{color:var(--paper)}
.msoc{display:flex;flex-wrap:wrap;gap:4px 16px}
.menu-b .b{grid-column:10/span 3;justify-self:end}

/* ---------- 3D views ---------- */
.view{position:relative;overflow:hidden;contain:layout paint}
.view>canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.1s var(--e-out)}
.view.ready>canvas{opacity:1}
.view.swap>canvas{opacity:0;transition:opacity .22s ease}
.view .ov{position:absolute;inset:0;pointer-events:none}
.view .scr{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;pointer-events:none;will-change:transform}
.view .scr>.a{position:absolute;left:0;top:0;transform-origin:0 0}
.view.grab{cursor:grab;touch-action:pan-y}
.view.grab.dragging{cursor:grabbing}
.a{position:absolute}
.loading-hint{position:absolute;left:50%;top:50%;translate:-50% -50%;display:flex;gap:5px}
.loading-hint i{width:5px;height:5px;border-radius:50%;background:var(--fg-3);animation:ld 1.2s ease-in-out infinite}
.loading-hint i:nth-child(2){animation-delay:.15s}.loading-hint i:nth-child(3){animation-delay:.3s}
@keyframes ld{50%{opacity:.25}}
.view.ready .loading-hint{display:none}

/* ---------- hero: the deck itself, live; drag, turn, press, tap ---------- */
.hero{position:sticky;top:0;z-index:0;height:100svh;min-height:620px;overflow:hidden;isolation:isolate;background:var(--paper)}
.hero-view{position:absolute;inset:0;z-index:1;touch-action:pan-y}
.hero-view.can{cursor:grab}
.hero-view.hv-press{cursor:pointer}
.hero-view.hv-grab{cursor:grab}
.hero-view.dragging{cursor:grabbing}
.hero-words{position:absolute;inset:0;z-index:2;pointer-events:none}
.hw{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:8px;font:600 clamp(15px,1.2vw,19px)/1 var(--f);color:var(--fg);white-space:nowrap;pointer-events:auto;cursor:pointer;
  translate:-50% 0;opacity:0;transition:opacity .6s var(--e-out),color var(--t-norm)}
.hw.placed{opacity:1}
.hw .dot{background:var(--fill-2);box-shadow:none;transition:background-color .3s,box-shadow .3s}
.hw.on .dot{background:var(--orange);box-shadow:0 0 0 3px rgba(255,72,0,.15),0 0 10px rgba(255,72,0,.8)}
.hw .ln .li{transition-delay:calc(.08s * var(--k,0) + .35s)}
.hero.ready .hw .ln .li{transform:none}
.hero-tip{position:absolute;left:0;top:0;z-index:5;pointer-events:none;opacity:0;transition:opacity .25s}
.hero-tip span{display:block;translate:16px 14px;padding:7px 11px;border-radius:100px;background:var(--ink);color:var(--paper);font:500 12px/1 var(--f);white-space:nowrap}
.hero-tip.on{opacity:1}
.hero-foot{position:absolute;left:var(--m);right:var(--m);bottom:clamp(20px,4vh,44px);z-index:3;align-items:end;pointer-events:none}
.hero-foot>*{pointer-events:auto}
.hero-meta{display:grid;gap:10px;padding-bottom:6px}
.hero-say{display:grid;gap:clamp(18px,2.6vh,30px)}
.hero-say h1{position:relative}
.says{position:relative;display:block;height:1.1em;overflow:hidden}
.hero .h-xl{font-size:clamp(30px,3.9vw,72px)}
.say{position:absolute;left:0;top:0;display:block;white-space:nowrap}
.say .li{display:block;transform:translateY(1.5em);transition:transform .9s var(--e-out)}
.say.on .li{transform:none}
.say.out .li{transform:translateY(-1.5em)}
.hero:not(.ready) .say.on .li{transform:translateY(1.5em)}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 36px;opacity:0;transform:translateY(12px);transition:opacity 1s var(--e-out) .3s,transform 1s var(--e-out) .3s}
.hero.ready .hero-cta{opacity:1;transform:none}
.hero-hint{color:var(--fg-3);margin-left:auto}
.hero-hint .k{color:var(--fg)}

/* ---------- intro: a statement, with a live screen set into the first lines ---------- */
.intro{z-index:1;padding-top:clamp(90px,10vw,170px)}
.intro-h{font:600 clamp(30px,3.9vw,62px)/1.06 var(--f);letter-spacing:-.018em;color:var(--fg);max-width:22em}
/* the window in the first sentence: the One Touch screen, black glass with one widget at a time */
/* the overview's first statement and its numbers */
.intro-in{row-gap:clamp(44px,5.5vw,84px);align-items:start}
.intro-side{display:grid;gap:5px;padding-top:.75em}
.intro-st{font:600 clamp(28px,3.5vw,56px)/1.06 var(--f);letter-spacing:-.018em;max-width:19em}
.intro-aside{display:grid;gap:26px;justify-items:start;align-self:end}
.intro-aside .body-m{max-width:24em}
.nums.intro-nums{margin-top:0}
.intro-nums .num b{font-size:clamp(28px,2.9vw,48px)}
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gut);margin-top:clamp(80px,9vw,150px);border-top:1px solid var(--ln)}
.num{display:grid;gap:10px;align-content:start;padding-top:18px}
.num b{font:600 clamp(34px,3.4vw,54px)/1 var(--f);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.num b small{font:500 .36em/1 var(--f);color:var(--fg-3);margin-left:4px;letter-spacing:0}
.num>span:not(.label-s){color:var(--fg-2);max-width:20em}

/* ---------- story: the modules one by one, pinned ---------- */
.story{position:relative;z-index:1;height:620vh;background:var(--ink);color:var(--paper)}
.story-pin{position:sticky;top:0;height:100svh;min-height:600px;overflow:hidden;isolation:isolate}
.story .view{position:absolute;inset:0;z-index:1}
.story-pin::after{content:"";position:absolute;top:0;bottom:0;left:0;width:min(640px,52vw);z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(19,19,20,.86),rgba(19,19,20,.5) 58%,rgba(19,19,20,0))}
.story-txt{position:absolute;z-index:2;left:var(--m);top:50%;translate:0 -46%;width:min(460px,40vw);height:min(72vh,580px)}
.step{position:absolute;left:0;right:0;top:50%;translate:0 -50%;display:grid;gap:16px;justify-items:start;opacity:0;transform:translateY(24px);transition:opacity .6s var(--e-out),transform .8s var(--e-out);pointer-events:none}
.step.on{opacity:1;transform:none;pointer-events:auto}
.step-n{font:500 13px/1 var(--f);font-variant-numeric:tabular-nums;color:var(--orange)}
.step-n span{color:var(--fg-3);margin-left:6px}
.step h2{font:600 clamp(44px,5.4vw,88px)/.95 var(--f);letter-spacing:-.025em}
.step h3{font:600 clamp(20px,1.7vw,26px)/1.12 var(--f);letter-spacing:-.01em;text-wrap:balance}
.step-p{color:var(--fg-2);font-size:17px;line-height:1.3;max-width:24em}
.step .facts{display:flex;flex-wrap:wrap;gap:6px}
.step .b{margin-top:8px}
.story-dots{position:absolute;z-index:2;right:var(--m);top:50%;translate:0 -50%;display:grid;gap:10px}
.story-dots button{width:8px;height:8px;border-radius:50%;background:rgba(233,233,235,.22);transition:background-color .3s,transform .3s}
.story-dots button[aria-current="true"]{background:var(--paper);transform:scale(1.35)}

/* ---------- lineup: the five modules side by side, each shot the same way, one family ---------- */
.lineup{z-index:1}
.tiles{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:clamp(56px,7vw,120px);align-items:start}
.tile{display:grid;gap:14px;color:var(--fg)}
.tile-m{position:relative;overflow:hidden;background:var(--paper-2)}
.tile-m .view{position:absolute;inset:0}
.tile-c{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.tile-c p{display:grid;gap:2px}
.tile-c b{font:500 15px/1.15 var(--f)}
.tile-c span{color:var(--fg-3)}
.tile.mys .tile-m{background:#0e0e0f}
.tile .tile-m::after{content:"";position:absolute;inset:0;background:rgba(19,19,20,0);transition:background-color var(--t-norm)}
.tile:hover .tile-m::after{background:rgba(19,19,20,.03)}
.lineup .tiles{grid-template-columns:repeat(5,minmax(0,1fr));column-gap:clamp(6px,.6vw,10px);row-gap:0}
.lineup .tile{grid-column:auto;--d:0s}
.lineup .tile-m{aspect-ratio:.62}
.lineup .tile-m,.lineup .tile-m>*{transition-delay:var(--d)}
.lineup .tile:nth-child(2){--d:.07s}.lineup .tile:nth-child(3){--d:.14s}.lineup .tile:nth-child(4){--d:.21s}.lineup .tile:nth-child(5){--d:.28s}
.lineup .tile-c{min-height:3.4em}
.lineup-foot{margin-top:clamp(40px,4.5vw,72px)}
.tiles-row .tile{grid-column:span 3}
.tiles-row .tile-m{aspect-ratio:.92}

/* ---------- five desks: the deck plays each scene ---------- */
.uses{z-index:1}
.uses-body{align-items:start;row-gap:28px}
.uses-stage{position:sticky;top:calc(var(--hd) + 16px);aspect-ratio:1.18;background:radial-gradient(ellipse 72% 64% at 50% 52%,#242426 0%,#131314 72%);overflow:hidden}
.uses-stage .view{position:absolute;inset:0}
.uses-sub{position:absolute;left:50%;bottom:clamp(18px,4%,36px);translate:-50% 0;z-index:3;width:max-content;max-width:84%;text-align:center;font:500 clamp(15px,1.25vw,19px)/1.3 var(--f);color:#fff;
  opacity:0;transform:translateY(8px);transition:opacity .35s,transform .5s var(--e-out);text-wrap:balance}
.uses-sub.on{opacity:1;transform:none}
.uses-notes{position:absolute;right:16px;top:16px;z-index:3;display:grid;gap:6px;width:min(280px,46%);pointer-events:none}
.dn{display:flex;align-items:flex-start;gap:10px;padding:11px 13px 12px;border-radius:12px;background:rgba(36,36,37,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fefefe;animation:rn .5s var(--e-out) both}
.dn .i{width:20px;height:20px;color:var(--orange);flex:none;margin-top:1px}
.dn-t{display:grid;gap:2px;font-size:13.5px;line-height:1.3;min-width:0}
.dn-t b{font-weight:500;color:#a7a7a9;font-size:12px}
@keyframes rn{from{opacity:0;transform:translateY(-10px) scale(.97)}}
.uses-mirror{position:absolute;left:16px;top:16px;z-index:3;display:grid;gap:7px;margin:0}
.uses-mirror figcaption{font:500 11px/1 var(--f);text-transform:uppercase;letter-spacing:.04em;color:var(--fg-3)}
.dm-img{position:relative;display:block;width:86px;aspect-ratio:240/234;transition:width .5s var(--e-out),aspect-ratio .5s var(--e-out)}
.uses-mirror[data-size="2"] .dm-img{width:64px;aspect-ratio:240/476}
.dm-img img{position:absolute;inset:0;width:100%;height:100%;border-radius:8px;opacity:0;transition:opacity .45s var(--e-out)}
.dm-img img.on{opacity:1}
.uses-list{display:grid;border-top:1px solid var(--ln)}
.use{border-bottom:1px solid var(--ln)}
.use-h{display:flex;align-items:center;gap:18px;width:100%;padding:18px 0;color:var(--fg);opacity:.32;transition:opacity var(--t-norm) var(--e-out)}
.use-h:hover,.use.on .use-h{opacity:1}
.use-n{font:500 13px/1 var(--f);font-variant-numeric:tabular-nums;color:var(--fg-3);width:24px}
.use-t{flex:1;font:600 clamp(28px,2.9vw,46px)/1 var(--f);letter-spacing:-.016em}
.use .rplus{background:var(--fill)}
.use.on .rplus{transform:rotate(135deg);background:var(--paper)}
.use.on .rplus::before,.use.on .rplus::after{background:var(--ink)}
.use-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--e-out)}
.use.on .use-b{grid-template-rows:1fr}
.use-bi{overflow:hidden;display:grid;gap:14px;padding-left:42px;justify-items:start}
.use.on .use-bi{padding-bottom:26px}
.use-title{font:600 20px/1.1 var(--f);display:flex;gap:12px;align-items:baseline}
.use-title span{font:500 13px/1 var(--f);color:var(--fg-3);font-variant-numeric:tabular-nums}
.use-bi .body-m{color:var(--fg-2);max-width:32em}
.use-kit{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 16px;font-size:13.5px;line-height:1.35}
.use-kit dt{color:var(--fg-3)}
.use-kit dd{margin:0}
.use-play .tri{width:0;height:0;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
.use-play.on .tri{width:8px;height:10px;border:0;background:linear-gradient(90deg,currentColor 0 3px,transparent 3px 5px,currentColor 5px)}
.rip{position:absolute;left:0;top:0;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;border:2px solid rgba(255,255,255,.95);animation:rip .8s var(--e-out) forwards;pointer-events:none}
@keyframes rip{from{scale:.3;opacity:1}to{scale:1.7;opacity:0}}

/* ---------- widgets ---------- */
.widgets{z-index:1;overflow:hidden}
.widgets .sec-head{margin-bottom:0}
.wfoot{margin-top:clamp(48px,6vw,96px);align-items:start;row-gap:24px}
.wfoot>.label-s{padding-top:2px}
.apps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:40px var(--gut);align-content:start}
.appg{display:grid;gap:7px;align-content:start}
.appg img{width:100%;height:auto;aspect-ratio:240/234;border-radius:5%/5.1%;margin-bottom:9px;background:var(--ink-2)}
.appg .body-m{color:var(--fg-2)}

/* ---------- exploded view ---------- */
.explode{position:relative;z-index:1;height:320vh;background:var(--paper)}
.explode-pin{position:sticky;top:0;height:100svh;min-height:620px;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;padding-top:calc(var(--hd) + 3vh)}
.explode-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:12px;position:relative;z-index:2;align-items:end}
.explode-head .label-s{grid-column:1/span 3;align-self:start;padding-top:.6em}
.explode-head .h-l{grid-column:4/span 5}
.explode-head .body-l{grid-column:9/span 4;font-size:15px}
.explode-mid{position:relative;min-height:0}
.explode-mid .view{position:absolute;inset:0}
.explode-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:16px 26px;position:relative;z-index:2}
.explode-meter{display:flex;align-items:center;gap:12px;color:var(--fg-3);font-size:13px}
.mdots{display:flex;gap:5px}
.mdots i{width:6px;height:6px;border-radius:50%;background:var(--fill-2);transition:background-color .25s}
.mdots i.on{background:var(--fg)}
/* callouts: small graphite labels pinned to the parts, as on the device */
.callouts{position:absolute;inset:0;pointer-events:none}
.co{position:absolute;left:0;top:0;display:grid;gap:2px;padding:9px 12px 10px;border-radius:10px;background:var(--ink);color:var(--paper);white-space:nowrap;opacity:0;transition:opacity .45s var(--e-out)}
.co.on{opacity:1}
.co .k{font:500 11px/1.15 var(--f);text-transform:uppercase;letter-spacing:.04em;color:#a7a7a9;display:flex;align-items:center;gap:6px}
.co .k::before{content:"";width:5px;height:5px;border-radius:50%;background:#707072}
.co .v{font:500 14px/1.2 var(--f)}
.co.hot .k{color:var(--orange-2)}
.co.hot .k::before{background:var(--orange)}
.co-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.co-line line{stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}
.co-line .halo{stroke:rgba(233,233,235,.85);stroke-width:4;fill:rgba(233,233,235,.85)}
.co-line circle{fill:var(--ink)}
.co-line .hot line:not(.halo){stroke:var(--orange)}
.co-line .hot circle:not(.halo){fill:var(--orange)}
.co-line g{opacity:0;transition:opacity .45s var(--e-out)}
.co-line g.on{opacity:1}

/* ---------- close-ups ---------- */
.details{z-index:1}
.dgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:clamp(40px,5vw,72px);align-items:start}
.dcard{grid-column:span 4;display:grid;gap:14px;align-content:start}
.dcard.w{grid-column:span 8}
.dcard.h{grid-column:span 6}
.dshot{position:relative;aspect-ratio:1.05;overflow:hidden;background:radial-gradient(ellipse 80% 70% at 50% 40%,#242426 0%,#111112 78%)}
.dcard.w .dshot{aspect-ratio:2.1}
.dcard.h .dshot{aspect-ratio:1.5}
.dshot .view{position:absolute;inset:0}
.dcard figcaption{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--gut)}
.dcard figcaption .label-s{color:var(--fg-3);padding-top:.25em}
.cap{font-size:15px;line-height:1.3;color:var(--fg-2);text-wrap:pretty}
.cap b{color:var(--fg);font-weight:500}

/* ---------- power ---------- */
.power{z-index:1}
.power-in{align-items:center;row-gap:48px}
.power-txt{display:grid;gap:22px;align-content:start;justify-items:start}
/* two groups: the question with its ports, then the answer (the count, the deck it makes, the key to its colours) */
.power-calc{display:grid;gap:clamp(36px,3.4vw,52px);width:100%;margin-top:clamp(18px,2.2vw,34px);padding-top:clamp(28px,2.6vw,40px);border-top:1px solid var(--ln)}
.power-q{display:grid;gap:14px;justify-items:start}
.power-r{display:grid;justify-items:start;width:100%}
.power-r .cells{width:100%;margin-top:clamp(18px,1.8vw,26px)}
.power-calc .chips button{height:32px;padding:0 13px;font-size:13px}
.power-out{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.power-out .big{font:600 clamp(36px,3.6vw,56px)/1 var(--f);letter-spacing:-.02em}
.power-out .big b{font-weight:600;color:var(--orange)}
/* one rounded block per module, the One Touch first */
.cells{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:5px;max-width:460px}
.power-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px;color:var(--fg-3);font-size:13px}
.power-legend span{display:inline-flex;align-items:center;gap:7px}
.power-legend i{width:8px;height:14px;border-radius:2px;display:inline-block;background:var(--paper-3)}
.power-legend i.lg-ot{background:var(--ink)}
.power-legend i.lg-on{background:var(--orange)}
.power-legend i.lg-lp{background:transparent;box-shadow:inset 0 0 0 1.5px var(--orange)}
.power-fig{position:relative;aspect-ratio:1.25;background:var(--paper-2);overflow:hidden}
.power-fig .view{position:absolute;inset:0}
.power-play{position:absolute;left:20px;bottom:18px;z-index:2}

/* ---------- Mystery ---------- */
.mystery{position:relative;z-index:1;overflow:hidden;min-height:max(860px,116svh);display:grid;align-items:end;isolation:isolate;background:#000!important}
.mys-q{position:absolute;left:50%;top:42%;translate:-50% -50%;z-index:0;font:300 min(78vw,900px)/.8 var(--f);color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.14);pointer-events:none;user-select:none}
.mystery .view{position:absolute;inset:0;z-index:1}
.mys-dark{position:absolute;left:0;top:0;width:200%;height:200%;z-index:2;pointer-events:none;will-change:transform;transform:translate(-50%,-60%);--r:min(32vw,360px);
  background:radial-gradient(circle var(--r) at 50% 50%,rgba(0,0,0,0) 0%,rgba(0,0,0,.16) 38%,rgba(0,0,0,.84) 76%,#000 100%)}
.mys-in{position:relative;z-index:3;display:grid;justify-items:center;text-align:center;gap:20px;padding-block:24px clamp(64px,8vw,110px)}
.mys-in .h-xl{max-width:14em}
.mys-in .cta{margin-top:8px}
.mys-fine{color:var(--fg-3)}
.mys-hint{position:absolute;z-index:3;left:50%;top:calc(var(--hd) + 12px);translate:-50% 0;color:var(--fg-3);white-space:nowrap}

/* ---------- specs and questions ---------- */
.specs,.faq{z-index:1}
.specs{padding-bottom:clamp(40px,5vw,80px)}
.side-h{display:grid;gap:16px;align-content:start;padding-right:24px;margin-bottom:32px}
.side-h .label-s{color:var(--fg-3)}
.acc{display:grid;border-top:1px solid var(--ln)}
.acc details{border-bottom:1px solid var(--ln)}
.acc summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;cursor:pointer;list-style:none;font:600 clamp(19px,1.6vw,24px)/1.15 var(--f);letter-spacing:-.01em}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover .rplus{background:var(--fill-2)}
.acc details[open] .rplus{transform:rotate(135deg)}
.acc .acc-b{padding:0 0 26px;display:grid;gap:12px;color:var(--fg-2);max-width:44em;font-size:16px;line-height:1.4}
.kv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
.kv dt,.kv dd{padding:11px 0;border-top:1px solid var(--ln);font-size:15px}
.kv dt{color:var(--fg-3)}
.kv dd{color:var(--fg);text-align:right;padding-left:14px}
.tspec{display:grid;border-top:1px solid var(--ln)}
.tsg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:20px;padding-block:22px;border-bottom:1px solid var(--ln)}
.tsg .label-s{color:var(--fg-3);padding-top:.4em}
.tsg ul{display:grid;gap:10px}
.tsg li{font:500 17px/1.3 var(--f)}
.ask{margin-top:28px}

/* ---------- pick a set and reserve it ---------- */
.reserve{z-index:1}
.reserve .anchor{position:absolute;top:0;left:0}
.reserve-in{align-items:start;row-gap:40px}
.reserve-fig{position:sticky;top:calc(var(--hd) + 16px)}
.reserve-stage{position:relative;aspect-ratio:1.18;background:var(--paper-2);overflow:hidden}
.reserve-stage .view{position:absolute;inset:0}
.reserve-stage .tag{position:absolute;left:14px;bottom:14px;z-index:2;text-transform:none;font-size:13px;letter-spacing:0;height:28px;padding:0 12px}
.reserve-panel{display:grid;gap:28px;align-content:start}
/* the sets: one big card each, as when you pick a model before buying it. Grey like the stage, the chosen one in ink
   like a chosen chip; the drawing is the set seen from above */
.sets{display:grid;gap:14px}
.sets-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.sets-h .label-s{color:var(--fg)}
.sets-note{font-size:13px;color:var(--fg-3)}
.sets-list{display:grid;gap:6px}
.bset{--mb:var(--ink);--ms:#303032;--mk:#3f3f41;--ml:#626264;display:grid;grid-template-columns:clamp(58px,5vw,74px) minmax(0,1fr) auto;align-items:center;column-gap:clamp(14px,1.4vw,22px);width:100%;min-height:88px;padding:16px clamp(18px,1.7vw,26px) 16px clamp(16px,1.4vw,22px);background:var(--paper-2);color:var(--fg);text-align:left;cursor:pointer;transition:background-color .35s var(--e-out),color .35s var(--e-out)}
.bset:hover{background:var(--paper-3)}
.bset[aria-checked="true"]{--mb:#323234;--ms:#505052;--mk:#717173;--ml:#a7a7a9;--mo:rgba(233,233,235,.3);background:var(--ink);color:var(--paper)}
.bset:focus-visible{outline-offset:2px;border-radius:var(--rb)}
.bs-fig{display:flex;align-items:center;align-self:center}
.bs-svg{display:block;width:auto;height:50px;max-width:100%}
.bs-svg .mb{fill:var(--mb);stroke:var(--mo,transparent);stroke-width:.8;transition:fill .35s var(--e-out),stroke .35s var(--e-out)}
.bs-svg .ms{fill:var(--ms);transition:fill .35s var(--e-out)}
.bs-svg .mk{fill:var(--mk);transition:fill .35s var(--e-out)}
.bs-svg .ml{fill:none;stroke:var(--ml);stroke-width:1.3;stroke-linecap:round}
.bs-t{display:grid;gap:4px;min-width:0;align-self:baseline}
.bs-n{font:600 clamp(19px,1.55vw,24px)/1.15 var(--f);letter-spacing:-.012em}
.bs-m{font-size:14px;line-height:1.35;color:var(--fg-2);transition:color .35s var(--e-out)}
.bset[aria-checked="true"] .bs-m{color:rgba(233,233,235,.7)}
/* what the set is for: only under the chosen one, opening smoothly */
.bs-d{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .5s var(--e-out),opacity .35s var(--e-out)}
.bs-d>span{min-height:0;overflow:hidden}
.bs-d>span>span{display:block;padding-top:6px;font-size:14px;line-height:1.4;color:rgba(233,233,235,.5)}
.bset[aria-checked="true"] .bs-d{grid-template-rows:1fr;opacity:1}
.bs-p{align-self:baseline;font:600 clamp(19px,1.55vw,24px)/1.15 var(--f);letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
/* the button under the sets names the chosen one */
.reserve-cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 34px}
.res-go{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;height:62px;padding:0 11px 0 26px;border-radius:100px;background:var(--ink);color:var(--paper);font:500 17px/1 var(--f);transition:background-color .3s}
.res-go:hover{background:#000}
.res-go .rbtn{flex:none;width:40px;height:40px;background:var(--paper);color:var(--ink)}
.assure{display:grid;gap:8px;padding-top:20px;border-top:1px solid var(--ln)}
.assure li{display:flex;gap:10px;align-items:flex-start;color:var(--fg-2)}
.assure li::before{content:"";width:5px;height:5px;margin-top:.62em;border-radius:50%;background:var(--orange);flex:none}

/* ---------- legal pages: the documents and the contents on the left, the text in a readable column ---------- */
.legal{padding-top:calc(var(--hd) + clamp(48px,7vw,110px));padding-bottom:clamp(64px,8vw,140px)}
.legal-in{align-items:start;row-gap:32px}
.legal-side{position:sticky;top:calc(var(--hd) + 28px);display:grid;gap:36px;align-content:start;max-height:calc(100svh - var(--hd) - 56px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--ln-2) transparent;padding-right:12px}
.legal-side .label-s{color:var(--fg-3);margin-bottom:14px}
.legal-docs ul{display:grid;gap:9px;font-size:15px;line-height:1.3}
.legal-docs a{display:inline-flex;align-items:center;gap:9px;color:var(--fg-2);transition:color var(--t-norm) var(--e-out)}
.legal-docs a::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:0;transition:opacity var(--t-norm)}
.legal-docs a:hover{color:var(--fg)}
.legal-docs a[aria-current]{color:var(--fg)}
.legal-docs a[aria-current]::before{opacity:1}
.legal-toc ol{display:grid;gap:8px;font-size:13.5px;line-height:1.3}
.legal-toc a{display:grid;grid-template-columns:2.1em minmax(0,1fr);color:var(--fg-3);transition:color var(--t-norm) var(--e-out)}
.legal-toc .n{font-variant-numeric:tabular-nums}
.legal-toc ol.plain a{grid-template-columns:minmax(0,1fr)}
.legal-toc a:hover,.legal-toc a.on{color:var(--fg)}
.legal-main{display:grid;gap:clamp(28px,3.4vw,48px);min-width:0}
.legal-body{display:grid;gap:16px;font-size:16.5px;line-height:1.6;color:var(--fg-2);min-width:0;overflow-wrap:break-word}
.legal-body>:not(.lg-table),.lg-part>:not(.lg-table){max-width:70ch}
.lg-part{display:grid;gap:16px;min-width:0}
.legal-body h2{display:flex;gap:.55em;align-items:baseline;margin-top:34px;padding-top:26px;border-top:1px solid var(--ln);font:600 clamp(20px,1.7vw,26px)/1.2 var(--f);letter-spacing:-.01em;color:var(--fg);text-wrap:balance;scroll-margin-top:calc(var(--hd) + 28px)}
.legal-body h2:first-child{margin-top:0}
/* headings the document sets in capitals: smaller and spaced, so they read as section labels, not as shouting */
.legal-body h2.caps{font-size:clamp(15px,1.15vw,17px);line-height:1.35;letter-spacing:.045em}
.lg-n{flex:none;min-width:1.6em;color:var(--fg-3);font-variant-numeric:tabular-nums;letter-spacing:0}
.lg-t{min-width:0}
.legal-body h3{margin-top:10px;font:600 17px/1.3 var(--f);color:var(--fg)}
.legal-body ul,.legal-body ol{display:grid;gap:8px;padding-left:1.3em}
.legal-body ul{list-style:disc}
.legal-body ol{list-style:decimal}
.legal-body li::marker{color:var(--fg-3)}
.legal-body li>ul,.legal-body li>ol{margin-top:8px}
.legal-body a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--ln-2);text-underline-offset:3px;overflow-wrap:anywhere}
.legal-body a:hover{text-decoration-color:var(--fg)}
.legal-body b,.legal-body strong{color:var(--fg);font-weight:600}
/* the link to the Polish text, the document's own title lines, the contact box */
.legal-body .lg-pl{justify-self:start;padding:9px 16px;border-radius:100px;background:var(--paper-2);font:500 13.5px/1.3 var(--f);color:var(--fg)}
.lg-doc{font:500 11px/1.25 var(--f);text-transform:uppercase;letter-spacing:.04em;color:var(--fg-3)}
.lg-doc+.lg-doc{margin-top:-12px}
.lg-box{justify-self:start;padding:18px 22px;background:var(--paper-2);font-size:15px;line-height:1.55}
/* the register details: rows like the spec sheets */
.lg-facts{display:grid;border-bottom:1px solid var(--ln);font-size:15px;line-height:1.45}
.lg-facts p{padding:11px 0;border-top:1px solid var(--ln);color:var(--fg)}
.lg-facts .kv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:16px}
.lg-facts .k{color:var(--fg-3)}
/* tables scroll inside their own box on a phone */
.lg-table{overflow-x:auto;margin-block:6px;border-top:1px solid var(--ln-2);overscroll-behavior-x:contain}
.lg-table table{width:100%;min-width:560px;border-collapse:collapse;font-size:14.5px;line-height:1.45}
.lg-table th{padding:12px 18px 12px 0;text-align:left;vertical-align:bottom;font:500 11px/1.25 var(--f);text-transform:uppercase;letter-spacing:.04em;color:var(--fg-3);border-bottom:1px solid var(--ln)}
.lg-table td{padding:14px 18px 14px 0;vertical-align:top;border-bottom:1px solid var(--ln)}
.lg-table td:first-child{color:var(--fg)}
/* the funding marks: the colour versions sit on the page itself, the white one on a dark plate */
.lg-img{margin-block:10px}
.lg-img img{display:block;width:100%;max-width:640px;height:auto}
.lg-img.plate{justify-self:start;width:min(100%,640px);padding:clamp(16px,2.4vw,26px);background:var(--ink)}

/* ---------- module pages ---------- */
.phero{position:sticky;top:0;z-index:0;height:100svh;min-height:640px;overflow:hidden;isolation:isolate;background:var(--paper)}
.phero .view{position:absolute;inset:0;z-index:1}
.phero-top{position:absolute;left:var(--m);right:var(--m);top:calc(var(--hd) + var(--sat) + 8px);z-index:3;align-items:baseline}
.lnav{display:flex;gap:22px;flex-wrap:wrap}
.lnav a{font:500 15px/1 var(--f);opacity:.5;transition:opacity var(--t-norm)}
.lnav a:hover,.lnav a.on{opacity:1}
.pname{position:absolute;left:var(--m);top:calc(var(--hd) + var(--sat) + 9vh);z-index:0;font:600 clamp(72px,14vw,236px)/.86 var(--f);letter-spacing:-.04em;color:var(--fg);pointer-events:none}
.pname .li{transition-delay:.25s}
.phero.ready .pname .li{transform:none}
.phero-foot{position:absolute;left:var(--m);right:var(--m);bottom:clamp(20px,4vh,44px);z-index:3;align-items:end}
.phero-foot .label-s{color:var(--fg-3)}
.phero-say{display:grid;gap:22px}
.phero-cta{display:flex;flex-wrap:wrap;gap:14px 34px}
.phero-ctl{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.phero-ctl .pill .ui{width:15px;height:15px}
.dots{display:flex;gap:4px}
.dots button{width:20px;height:20px;display:grid;place-items:center}
.dots button::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--fg-3);transition:background-color .25s}
.dots button[aria-current="true"]::before{background:var(--fg)}
.highlights{z-index:1}
.pnote{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-top:40px;padding-top:22px;border-top:1px solid var(--ln)}
.pnote .body-m{color:var(--fg-2)}
.demo{z-index:1}
.demo-in{align-items:center;row-gap:40px}
.demo-txt{display:grid;gap:20px;align-content:center;justify-items:start}
.demo-txt>*{max-width:100%}
.demo-fig{position:relative;aspect-ratio:1.12;overflow:hidden;background:var(--paper-2)}
.demo.dark .demo-fig{background:radial-gradient(ellipse 70% 60% at 50% 45%,#242426 0%,#0e0e0f 80%)}
.demo-fig .view{position:absolute;inset:0}
.demo-fig.tall{aspect-ratio:.86;max-height:88vh;width:100%}
/* ---------- the demo controls: a piece of the modue screen, the same on every module page. A black panel holding the
   design system's tiles (#303031, radius 12, Inter, grey labels, white titles); orange for what is lit or pressed ---------- */
.mp{--n:4;container-type:inline-size;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:6px;width:100%;max-width:560px;margin-top:4px;padding:6px;border-radius:18px;background:#000;color:#fefefe;font-family:var(--f-ui);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.mw{position:relative;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:10px;min-width:0;padding:clamp(10px,2.9cqi,15px);border-radius:12px;background:#303031;color:#fefefe;text-align:left;font-family:var(--f-ui);transition:background-color .16s,color .16s}
.mw .i,.mw .g{width:clamp(18px,4.2cqi,22px);height:clamp(18px,4.2cqi,22px);color:#ababad;transition:color .16s}
.mw .g{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mw .tx{display:grid;gap:3px;min-width:0}
.mw .t{font:600 clamp(13px,3.3cqi,17px)/1.15 var(--f-ui);letter-spacing:-.01em}
.mw .s{font:400 clamp(11px,2.5cqi,13px)/1.25 var(--f-ui);color:#ababad;transition:color .16s}
button.mw{cursor:pointer}
@media (hover:hover){button.mw:hover,.dial:hover{background:#3a3a3c}}
.mw:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
/* lit: the LED under a key, the level you are on */
.mw.led::after{content:"";position:absolute;right:clamp(10px,2.9cqi,15px);top:clamp(12px,3.3cqi,17px);width:6px;height:6px;border-radius:50%;background:#565658;transition:background-color .16s}
.mw[aria-pressed="true"]::after{background:var(--orange)}
.mw.led[aria-pressed="true"] .i{color:var(--orange)}
/* pressed: the tile lights up the way the clock widget does, orange with dark type */
.mw.down,.mw.down:hover{background:var(--orange);color:#303031}
.mw.down .i,.mw.down .g,.mw.down .s{color:rgba(48,48,49,.72)}
.mw.down::after{background:#303031}
.gest .mw{aspect-ratio:1}
.keys{--n:5}
.keys .mw{aspect-ratio:.86}
.dials{--n:3}
.dial{aspect-ratio:.9;align-items:stretch;cursor:ns-resize;touch-action:none}
.mw-l{display:flex;align-items:center;gap:6px;font:400 clamp(12px,2.7cqi,14px)/1 var(--f-ui);color:#ababad}
.mw-l .i{width:clamp(16px,3.6cqi,19px);height:clamp(16px,3.6cqi,19px)}
.ring{position:relative;display:grid;place-items:center;width:min(100%,132px);aspect-ratio:1;margin:0 auto}
.ring svg{position:absolute;inset:0;width:100%;height:100%}
.ring circle{fill:#4d4d4f}
.ring .dv{position:relative;font:600 clamp(16px,4.8cqi,24px)/1 var(--f-ui);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.ring .dv small{margin-left:1px;font-size:.52em;font-weight:500;color:#ababad}
.dial.muted .dv{font-size:clamp(13px,3.4cqi,17px);color:#ababad}
.dial.down circle{fill:rgba(48,48,49,.4)!important}
.dial.down .dv small{color:inherit}
.slp{grid-template-columns:minmax(0,1fr)}
.vol{gap:clamp(8px,2.4cqi,14px);align-items:stretch}
.mw-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mw-o{font:600 clamp(20px,5.6cqi,30px)/1 var(--f-ui);letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--orange)}
.ruler{position:relative;display:block;height:clamp(54px,15cqi,76px);overflow:hidden;cursor:ew-resize;touch-action:none;border-radius:4px}
.ruler .mk{position:absolute;left:50%;top:0;width:4px;height:28%;margin-left:-2px;border-radius:2px;background:var(--orange)}
.ruler .tk{position:absolute;left:0;bottom:0;width:4px;height:62%;border-radius:2px;background:#d6d6d8;will-change:transform}
.ruler:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.lv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.lv .mw{aspect-ratio:1.18}
.hint{color:var(--fg-3)}
.pairs{z-index:1}
.band{z-index:1}
.band .h-xl{margin-bottom:22px}
.band-cta{display:flex;flex-wrap:wrap;gap:16px 34px;margin-top:34px}
.finger{position:absolute;left:0;top:0;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.5),rgba(255,255,255,.16) 62%,rgba(255,255,255,0) 72%);border:1.5px solid rgba(255,255,255,.75);opacity:0;pointer-events:none}
.ripple{position:absolute;left:0;top:0;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:2px solid rgba(255,255,255,.85);opacity:0;pointer-events:none}

/* ---------- footnotes ---------- */
.fnotes{padding-block:10px 0}
.fnotes ol{display:grid;gap:6px;padding:22px 0 26px 18px;list-style:decimal;color:var(--fg-3);font-size:12px;line-height:1.45;border-top:1px solid var(--ln)}
.fnotes li{max-width:96ch}

/* ---------- reservation drawer ---------- */
.scrim{position:fixed;inset:0;z-index:180;background:rgba(19,19,20,.42);opacity:0;visibility:hidden;transition:opacity .5s var(--e-out),visibility .5s}
.scrim.open{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:190;width:min(480px,100%);background:var(--paper);color:var(--ink);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .8s var(--e-out);visibility:hidden;--fg:var(--ink);--fg-2:#58585c;--fg-3:var(--deep);--ln:rgba(19,19,20,.12);--fill:var(--paper-2);--fill-2:var(--paper-3)}
.drawer.open{transform:none;visibility:visible}
.dr-h{display:flex;align-items:center;justify-content:space-between;gap:12px;height:calc(var(--hd) + var(--sat));padding:var(--sat) var(--m) 0;flex:none}
.dr-title{display:flex;align-items:center;gap:10px;font:600 20px/1 var(--f)}
.dr-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px var(--m) 18px;display:grid;align-content:start;gap:18px}
.dr-batch{display:grid;gap:6px;padding-bottom:18px;border-bottom:1px solid var(--ln)}
.dr-batch b{font:600 15px/1.2 var(--f);display:flex;align-items:center;gap:8px}
.dr-batch p{font-size:14px;color:var(--fg-2);line-height:1.4}
.dr-lines{display:grid;border-top:1px solid var(--ln)}
.line{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--ln)}
.line .thumb{width:44px;height:64px;padding:2px 0}
.line h4{font:600 17px/1.2 var(--f)}
.line .sub{font-size:13px;color:var(--fg-3);margin-top:3px}
.qty{display:flex;align-items:center;gap:2px;padding:3px;border-radius:100px;background:var(--paper-2)}
.qty button{width:32px;height:32px;display:grid;place-items:center;border-radius:50%}
.qty button:hover{background:var(--paper-3)}
.qty span{min-width:22px;text-align:center;font:600 14px/1 var(--f);font-variant-numeric:tabular-nums}
.qty .ui{width:12px;height:12px}
.dr-empty{display:grid;gap:6px}
.dr-empty .label{font:600 17px/1.2 var(--f)}
.dr-empty p{color:var(--fg-2)}
.add-label{margin-bottom:10px;color:var(--fg-3)}
.add-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.add-row button{display:flex;align-items:center;justify-content:space-between;gap:8px;height:50px;padding:0 16px;border-radius:100px;background:var(--paper-2);font:500 15px/1 var(--f);transition:background-color .2s}
.add-row button:hover{background:var(--paper-3)}
.add-row button .ui{width:14px;height:14px;color:var(--fg-2)}
.warn{display:flex;gap:10px;align-items:flex-start;padding:14px;background:var(--paper-2);font-size:14px;line-height:1.4;color:var(--fg-2)}
.warn .i{width:20px;height:20px;color:var(--orange)}
.check{display:flex;align-items:flex-start;gap:10px;font:500 14px/1.4 var(--f);color:var(--fg-2);cursor:pointer}
.check input{appearance:none;-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--paper-2);box-shadow:inset 0 0 0 1.5px var(--grey);flex:none;margin:0;display:grid;place-items:center;cursor:pointer}
.check input:checked{background:var(--ink);box-shadow:none}
.check input:checked::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--fg)}
.check.mys{color:var(--fg);margin:2px 0 6px}
.check.mys span{display:grid;gap:2px}
.check.mys small{font-size:12.5px;color:var(--fg-3)}
.field{display:grid;gap:8px}
.field>label:not(.check){font:500 11px/1 var(--f);text-transform:uppercase;letter-spacing:.04em;color:var(--fg-3)}
.field input:not([type=checkbox]){height:50px;padding:0 18px;border:0;border-radius:100px;background:var(--paper-2);font-size:16px;outline:none;box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .2s}
.field input:not([type=checkbox]):focus{box-shadow:inset 0 0 0 1.5px var(--fg)}
.field .err{color:#c23a00;font-size:13px;min-height:1.2em}
.dr-f{flex:none;padding:16px var(--m) calc(18px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--ln);display:grid;gap:10px}
.dr-f .small{color:var(--fg-3);font-size:12.5px;line-height:1.4}
.dr-go{display:flex;align-items:center;justify-content:space-between;width:100%;height:62px;padding:0 10px 0 22px;border-radius:100px;background:var(--ink);color:var(--paper);font:500 16px/1 var(--f);transition:background-color .3s}
.dr-go:hover{background:#000}
.dr-go[disabled]{opacity:.35;pointer-events:none}
.dr-go .rbtn{background:var(--paper);color:var(--ink);width:38px;height:38px}
.dr-sec{display:flex;align-items:center;justify-content:center;width:100%;height:50px;border-radius:100px;background:var(--paper-2);font:500 15px/1 var(--f)}
.dr-sec:hover{background:var(--paper-3)}
.done{display:grid;gap:16px}
.done .code{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;background:var(--ink);color:var(--paper);font:500 14px/1 var(--f)}
.done .code b{font:600 24px/1 var(--f);letter-spacing:.04em;color:var(--orange-2);font-variant-numeric:tabular-nums}
.done ul{display:grid;border-top:1px solid var(--ln)}
.done li{display:flex;justify-content:space-between;font-size:15px;padding:12px 0;border-bottom:1px solid var(--ln)}
.done li.mys span:last-child{color:var(--orange)}
.done .lead{font-size:17px;line-height:1.35}
.done .small{color:var(--fg-3);font-size:13px}

/* ---------- footer: revealed under the page ---------- */
.foot{position:sticky;bottom:0;z-index:0;background:var(--ink);color:var(--paper)}
.foot-in{padding:clamp(56px,7vw,110px) var(--m) 0}
.foot-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:end;padding-bottom:clamp(40px,5vw,72px);border-bottom:1px solid var(--ln)}
.foot-logo{grid-column:1/span 5;display:block;color:var(--paper)}
.foot-logo svg{width:100%;max-width:520px;height:auto;fill:currentColor}
.foot-cta{grid-column:7/span 6;display:flex;align-items:flex-end;gap:16px;font:600 clamp(26px,2.6vw,40px)/1.05 var(--f);letter-spacing:-.012em;text-align:left;color:var(--paper)}
.foot-cta .rbtn{background:var(--ink-2);color:var(--paper);width:40px;height:40px;margin-bottom:.1em}
.foot-cta:hover .rbtn{background:var(--paper);color:var(--ink)}
.foot-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gut);row-gap:40px;padding-block:clamp(40px,5vw,72px)}
.fcol{display:grid;gap:14px;align-content:start;color:var(--fg-2)}
.fcol .label-s{color:var(--fg-3);margin-bottom:14px}
.fcol a{transition:opacity var(--t-norm) var(--e-out)}
.fcol a:hover{opacity:.52}
.fcol ul{display:grid;gap:8px}
.fbig a{font:500 clamp(20px,1.7vw,26px)/1.1 var(--f);color:var(--paper)}
.fcol .tz{font-variant-numeric:tabular-nums}
.fcol .tz b{color:var(--paper);font-weight:500}
/* modue's profiles: a line of names, like the rest of the footer */
.fcol .fsoc-h{margin:18px 0 0}
.fcol .fsoc{display:flex;flex-wrap:wrap;gap:6px 18px}
.fsoc a{color:var(--paper)}
/* the EU funding marks, small, with the company's details: the white version on the dark footer, linked to modue's
   legal information */
.fcol .feu{display:block;width:min(100%,250px);margin-top:8px;transition:opacity var(--t-norm) var(--e-out)}
.feu img{display:block;width:100%;height:auto}
.foot .fnotes{padding-inline:0}
.fsign{display:flex;align-items:center;height:50px;margin-top:6px;padding:5px;border-radius:100px;background:var(--ink-2)}
.fsign input{flex:1;min-width:0;height:100%;padding:0 0 0 15px;border:0;background:none;color:var(--paper);outline:none;font-size:15px}
.fsign input::placeholder{color:var(--fg-3)}
.fsign button{height:40px;padding:0 18px;border-radius:100px;background:var(--paper);color:var(--ink);transition:background-color var(--t-norm)}
.fsign button:hover{background:#fff}
.fsign-note{font-size:13px;min-height:1.3em}
.foot-bot{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gut);row-gap:10px;padding-block:20px 24px;color:var(--fg-3);font-size:13px}
.foot-bot a{transition:color var(--t-norm)}
.foot-bot a:hover{color:var(--paper)}
.foot-legal{grid-column:span 2;display:flex;flex-wrap:wrap;gap:6px 22px}

/* single-column grids never grow wider than their box */
.power-txt,.power-calc,.demo-txt,.done,.dr-body,.dcard,.step,.side-h,.reserve-panel,.fcol,.menu-c,.legal-side,.legal-main,.legal-body,.lg-part{grid-template-columns:minmax(0,1fr)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .hd-batch{display:none}
  .lineup .tiles{grid-auto-flow:column;grid-auto-columns:31%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--m) * -1);padding-inline:var(--m);scroll-padding-inline:var(--m);scrollbar-width:none}
  .lineup .tiles::-webkit-scrollbar{display:none}
  .lineup .tile{scroll-snap-align:start}
  .tiles-row .tile{grid-column:span 6}
  .dcard,.dcard.h{grid-column:span 6}
  .dcard.w{grid-column:span 12}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .explode-head .h-l{grid-column:4/span 9}
  .explode-head .body-l{grid-column:4/span 9}
  .wfoot .apps{grid-column:1/-1}
}
@media (max-width:900px){
  .col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-s4{grid-column:1/-1}
  .sec-head .label-s{padding-top:0}
  .nums{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .uses-stage{position:relative;top:auto}
  .reserve-fig{position:relative;top:auto}
  .legal-side{position:static;max-height:none;overflow:visible;padding-right:0}
  .legal-toc{display:none}
  .legal-docs ul{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px}
  .lg-facts .kv{grid-template-columns:minmax(0,1fr);gap:2px}
  .hero-hint{display:none}
  .menu-c{grid-column:span 6}
  .menu-b{row-gap:24px}
  .menu-b .b{grid-column:1/-1;justify-self:start}
  .foot-top{row-gap:36px}
  .foot-logo,.foot-cta{grid-column:1/-1}
  .foot-bot{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px}
  .foot-legal{grid-column:1/-1;order:3}
  .explode-head .label-s,.explode-head .h-l,.explode-head .body-l{grid-column:1/-1}
  .phero-ctl{justify-content:flex-start}
  .story-txt{width:min(380px,46vw)}
}
@media (max-width:760px){
  :root{--hd:62px}
  .hd-logo{width:88px}
  .hd-res span:not(.count){display:none}
  .hd-res{width:38px;padding:0}
  .hd-res .count{position:absolute;right:-4px;top:-4px;margin:0}
  .hero-foot{bottom:16px}
  .says{height:2.24em}
  .say{white-space:normal;width:100%}
  .say .li{transform:translateY(2.6em)}
  .say.out .li{transform:translateY(-2.6em)}
  .hero:not(.ready) .say.on .li{transform:translateY(2.6em)}
  .hero-meta{display:none}
  .hw{font-size:12px;gap:0}
  .hw .dot{display:none}
  .story{height:560vh}
  .story-txt{left:var(--m);right:var(--m);top:auto;bottom:max(22px,3vh);translate:none;width:auto;height:min(48svh,380px)}
  .step{top:auto;bottom:0;translate:none;gap:10px}
  .step .facts{display:none}
  .story-pin::after{top:auto;width:auto;right:0;height:60%;background:linear-gradient(0deg,rgba(19,19,20,.94),rgba(19,19,20,.6) 55%,rgba(19,19,20,0))}
  .story-dots{top:calc(var(--hd) + 8px);right:auto;left:50%;translate:-50% 0;display:flex}
  .lineup .tiles{grid-auto-columns:62%}
  .tiles-row{grid-auto-flow:column;grid-auto-columns:78%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--m) * -1);padding-inline:var(--m);scrollbar-width:none}
  .tiles-row .tile{grid-column:auto;scroll-snap-align:start}
  .use-t{font-size:30px}
  .use-bi{padding-left:0}
  .uses-notes{width:min(240px,62%);right:10px;top:10px}
  .uses-mirror{display:none}
  .apps{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 10px}
  .dcard,.dcard.h,.dcard.w{grid-column:1/-1}
  .dcard.w .dshot{aspect-ratio:1.3}
  .dcard figcaption{grid-template-columns:minmax(0,1fr)}
  .explode{height:260vh}
  .explode-meter{display:none}
  .mp{max-width:none}
  .gest{--n:2}
  .gest .mw{aspect-ratio:auto;min-height:104px}
  .keys .mw .s{display:none}
  .lv .mw{aspect-ratio:auto;min-height:84px}
  .kv{grid-template-columns:minmax(0,1fr)}
  .kv dt{padding-bottom:0}
  .reserve-stage{aspect-ratio:1.3}
  .bset{grid-template-columns:52px minmax(0,1fr) auto;column-gap:14px;min-height:78px;padding:14px 16px 14px 14px}
  .bs-svg{height:42px}
  .bs-n,.bs-p{font-size:18px}
  .bs-m,.bs-d>span>span{font-size:13px}
  .res-go{height:56px;padding-left:22px;font-size:16px}
  .kv dd{border-top:0;text-align:left;padding:4px 0 12px}
  .tsg{grid-template-columns:minmax(0,1fr);gap:10px}
  .co{padding:7px 10px}
  .co .v{display:none}
  .foot{position:relative}
  .foot-grid{grid-template-columns:minmax(0,1fr)}
  .mys-q{font-size:120vw;top:36%}
  .pname{top:calc(var(--hd) + var(--sat) + 5vh)}
  .phero-top .lnav{display:none}
  .menu-l a{font-size:clamp(36px,11vw,56px)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important;scroll-behavior:auto!important}
  .ln .li,.say .li{transform:none!important}
  .mask{clip-path:none}.mask>*{transform:none}
  .hero-cta{opacity:1;transform:none}
}

/* ================================================================ C6: waitlist mode (brief v2.6 of 8 Nov 2026)
   One signup form used everywhere, a static headline with the rotating line under it, proof, perks and prices,
   a folded spec sheet, a bar on phones. The parts below follow the rest of the sheet: Inter Tight, ink on paper,
   orange only where something is alive. */
.wl [hidden]{display:none!important}
/* ---------- the form ---------- */
.wl{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;width:100%;max-width:600px}
.wl-f{display:grid;grid-template-columns:minmax(0,1fr)}
/* the field is the big button of the site (ink pill, label, disc with an arrow) with room to type on the left */
.wl-row{position:relative;display:flex;align-items:center;height:62px;padding:0 11px 0 26px;border-radius:100px;background:var(--fg);color:var(--bg);font:500 17px/1 var(--f);transition:box-shadow var(--t-norm) var(--e-out)}
.wl-row:focus-within{box-shadow:0 0 0 4px var(--ln-2)}
.wl-in{flex:1;min-width:0;height:100%;border:0;border-radius:0;background:none;outline:none;font:inherit;color:inherit;caret-color:var(--orange)}
.wl-in::placeholder{color:inherit;opacity:.5}
.wl-in:-webkit-autofill{-webkit-text-fill-color:var(--bg);box-shadow:0 0 0 100px var(--fg) inset}
.wl-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;opacity:0;pointer-events:none}
.wl-btn{position:relative;flex:none;display:inline-flex;align-items:center;gap:16px;height:100%;margin-left:12px;padding-left:20px;color:inherit;font:inherit;white-space:nowrap;transition:opacity var(--t-norm)}
.wl-btn::before{content:"";position:absolute;left:0;top:50%;width:1px;height:24px;margin-top:-12px;background:currentColor;opacity:.2}
.wl-btn .rbtn{flex:none;width:40px;height:40px;background:var(--bg);color:var(--fg);transition:transform var(--t-smooth) var(--e-out)}
.wl-btn:hover:not(:disabled) .rbtn{transform:rotate(45deg)}
.wl-btn:disabled{opacity:.6;cursor:default}
.wl-btn:focus-visible{outline-offset:-6px;border-radius:100px}
.wl-err{display:flex;margin-top:12px;gap:9px;align-items:baseline;font-size:14px;line-height:1.35;color:var(--fg)}
.wl-err::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange);flex:none;translate:0 -1px}
.wl-err a{text-decoration:underline;text-underline-offset:3px}
/* the consent, word for word, stays folded until the field is used: it opens on the first focus and stays open.
   Without scripts it is simply there. Where the block is pinned to the bottom of a hero the room for it is kept,
   so the field never moves under the pointer. */
.wl-fine{display:grid;grid-template-rows:1fr;margin-top:14px;transition:grid-template-rows .5s var(--e-out),margin-top .5s var(--e-out),opacity .4s var(--e-out),visibility 0s}
.wl-fine>p{min-height:0;overflow:hidden}
.wl.fold:not(.open) .wl-fine{grid-template-rows:0fr;margin-top:0;opacity:0;visibility:hidden;transition:grid-template-rows .5s var(--e-out),margin-top .5s var(--e-out),opacity .3s var(--e-out),visibility 0s .5s}
.wl-consent{font:500 11px/1.5 var(--f);color:var(--fg-2);max-width:78ch}
.wl-consent a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--ln-2);text-underline-offset:2px}
.wl-consent a:hover{text-decoration-color:currentColor}
/* after signing up: no box, the same type as the lead next to the field, the live dot from the header */
.wl-ok{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.wl-ok-t{display:grid;gap:2px;font:500 17px/1.3 var(--f)}
.wl-ok-h{display:flex;align-items:center;gap:9px;font-weight:600;color:var(--fg);outline:none}
.wl-ok-p{color:var(--fg-2);max-width:34em;text-wrap:pretty}
.wl-ok-p b{font-weight:600;color:var(--fg);overflow-wrap:anywhere}
.wl-ok-b{display:flex;flex-wrap:wrap;gap:8px}
.wl-small{font-size:13px;line-height:1.4;color:var(--fg-2)}
/* ---------- header and menu ---------- */
.menu-open .hd .hd-join,.menu-open .hd .hd-batch{opacity:0;pointer-events:none}
.menu-t{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-content:start}
.menu-t .menu-l{grid-column:1/span 7}
.menu-r{grid-column:8/span 5;display:grid;align-content:start;padding-top:.9vw;opacity:0;transition:opacity .5s}
.menu-open .menu-r{opacity:1;transition-delay:.4s}
.menu-r .label-s{color:var(--fg-3);padding-bottom:14px}
.menu-r a{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-top:1px solid var(--ln);font:600 clamp(19px,1.7vw,26px)/1.1 var(--f);letter-spacing:-.01em;color:var(--fg-2);transition:color var(--t-norm) var(--e-out),padding var(--t-smooth) var(--e-out)}
.menu-r a:last-child{border-bottom:1px solid var(--ln)}
.menu-r a:hover,.menu-r a[aria-current]{color:var(--paper);padding-left:8px}
/* ---------- hero: the C5 hero. The deck above, the words below on the grid: labels in the first three columns, the headline
   from the fourth, and under the headline the lead on the left and the form on the right. A line of proof closes it. ---------- */
.hero{--bar:clamp(46px,6vh,58px);min-height:760px}
@media (min-width:900px) and (max-height:759px){
  .hero{position:relative}
}
.hero-stage{position:absolute;inset:0;z-index:1}
.hero-foot{bottom:calc(var(--bar) + clamp(18px,3vh,32px));align-items:start}
.hero-meta{padding:.55em 0 0}
.hero-say{gap:clamp(16px,2.4vh,26px)}
.hero-row{--fh:34px;position:relative;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:var(--gut);row-gap:16px;align-items:start;opacity:0;transform:translateY(12px);transition:opacity 1s var(--e-out) .3s,transform 1s var(--e-out) .3s}
.hero.ready .hero-row{opacity:1;transform:none}
.hero-lead{grid-column:span 4;padding-right:clamp(12px,2.4vw,48px)}
.hero-txt{font:500 17px/1.3 var(--f)}
.hero-rot{font-weight:600;color:var(--fg)}
.hero-rot .says{height:1.3em}
.hero:not(.ready) .hero-rot .say.on .li{transform:none}
.hero-sub{color:var(--fg-2);text-wrap:pretty}
.hero-row .wl{grid-column:span 5}
/* the last row under the lead and the field: the link to the modules, and over it, once the field is used, the consent across the whole width */
.hero-under{grid-column:1/-1;display:flex;align-items:flex-start;min-height:var(--fh);transition:opacity .3s var(--e-out),visibility 0s}
.hero-row .wl.open~.hero-under{opacity:0;visibility:hidden;transition:opacity .3s var(--e-out),visibility 0s .3s}
.hero-row .wl-fine{position:absolute;left:0;right:0;bottom:0;height:var(--fh);margin:0;grid-template-rows:1fr!important}
.hero-row .wl-consent{max-width:none}
.hero-row .wl-consent br{display:none}
@media (max-width:1279px){
  .hero-row{--fh:50px}
}
/* signed up in the hero: the message takes the place of the lead, the two buttons the place of the field and the note
   the last row, so the words keep their height and the deck stays where it is */
.hero-row.done .hero-lead,.hero-row.done .hero-under{display:none}
.hero-row.done .wl,.hero-row.done .wl-ok{display:contents}
.hero-row.done .wl-ok-t{grid-column:span 4;padding-right:clamp(12px,2.4vw,48px)}
.hero-row.done .wl-ok-b{grid-column:span 5;align-self:start;padding-top:2px}
.hero-row.done .wl-small{grid-column:1/-1;min-height:var(--fh)}
/* prices: both currencies in the HTML, one shown once the head script has picked the region */
.m{white-space:nowrap}
[data-cur="usd"] .m-x,[data-cur="usd"] .m-e,[data-cur="eur"] .m-u,[data-cur="eur"] .m-x{display:none}
.cur-sw{display:none;gap:4px}
[data-cur] .cur-sw{display:flex}
.cur-sw button{height:32px;padding:0 13px;font-size:13px}
[data-cur="usd"] .cur-sw [data-set-cur="usd"],[data-cur="eur"] .cur-sw [data-set-cur="eur"]{background:var(--fg);color:var(--bg);box-shadow:none}
/* footer after the dark waitlist band: no reveal from under the page (dark on dark leaves only a seam and a clipped logo),
   just the next block, opened by the same thin line as the rest of the footer */
.page-end-dark{box-shadow:none}
.foot-after-dark{position:relative}
.foot-after-dark .foot-in{padding-top:0}
.foot-after-dark .foot-in::before{content:"";display:block;border-top:1px solid var(--ln);margin-bottom:clamp(56px,7vw,110px)}
/* the four footnotes in two columns on wide screens */
@media (min-width:1100px){
  .foot .fnotes ol{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gut);row-gap:8px;padding-left:0;list-style-position:inside}
}
/* module pages: the block sits at the bottom of the hero, so the room for the consent is kept */
.phero .wl-fine{min-height:66px;grid-template-rows:1fr!important;margin-top:14px!important}
.hero-bar{position:absolute;left:var(--m);right:var(--m);bottom:0;z-index:3;height:var(--bar);display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid var(--ln);opacity:0;transition:opacity 1s var(--e-out) .5s}
.hero.ready .hero-bar{opacity:1}
.hero-bar .hero-hint{margin:0}
.hero-proof{display:flex;flex-wrap:wrap;gap:4px 0;align-items:center;font:500 13px/1.25 var(--f);color:var(--fg-2)}
.hero-proof span{display:inline-flex;align-items:center;white-space:pre}
.hero-proof span+span::before{content:"";width:3px;height:3px;margin:0 14px;border-radius:50%;background:var(--fg-3)}
.hero-proof a{text-decoration:underline;text-decoration-color:var(--ln-2);text-underline-offset:3px;transition:text-decoration-color var(--t-norm)}
.hero-proof a:hover{text-decoration-color:currentColor}
/* ---------- the modules, one by one ---------- */
.step-n .step-pr{margin-left:14px;padding-left:14px;border-left:1px solid var(--ln-2);color:var(--paper)}
.step-fine{font-size:13px;color:var(--fg-2)}
.story-mys{position:absolute;left:0;bottom:calc(100svh + 40px);width:1px;height:1px;pointer-events:none}
@media (max-width:900px){
  /* phone and small tablet: the model comes before the controls, so what you tap and what it changes are on screen together */
  .demo-in{row-gap:16px}
  .demo-txt{display:contents}
  .demo-txt>*{grid-column:1/-1}
  .demo-fig{order:1;margin-top:8px}
  .demo-txt>.mp{order:2;margin-top:6px}
  .demo-txt>.hint{order:3}
  .demo-fig.tall{aspect-ratio:1;max-height:none}
}
.uses-chips{display:none}
@media (max-width:900px){
  /* phone and small tablet: the desks become chips above the stage and only the open desk's text sits under it */
  .uses-chips{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--m) * -1);padding:0 var(--m);grid-column:1/-1}
  .uses-chips::-webkit-scrollbar{display:none}
  .uses-chips button{flex:none}
  .uses-body{row-gap:16px}
  .uses-list{border-top:0}
  .use{border-bottom:0}
  .use:not(.on){display:none}
  .use-h{display:none}
  .use.on .use-bi{padding-bottom:0}
}
.uses-join{margin-top:clamp(40px,5vw,72px);padding-top:22px;border-top:1px solid var(--ln);max-width:none;color:var(--fg-2)}
.uses-join a{color:var(--fg)}
.cells button{aspect-ratio:1/2;border-radius:4px;background:var(--paper-3);transition:background-color .35s,transform var(--t-fast) var(--e-out)}
.cells button.ot{background:var(--ink)}
.cells button.on{background:var(--orange)}
.cells button.lp{background:transparent;box-shadow:inset 0 0 0 1.5px var(--orange)}
@media (hover:hover){.cells button:hover{transform:translateY(-3px)}}
/* ---------- real, and in production ---------- */
.proof{padding-top:0}
.nb{white-space:nowrap}
/* four photographs from the line in one band: a wide one and three in the tall proportion of a module */
.pshots{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut);height:clamp(300px,38vw,600px)}
.pshot{grid-column:span 2;position:relative;overflow:hidden;background:var(--paper-3)}
.pshot.wide{grid-column:span 6}
.pshot img{width:100%;height:100%;object-fit:cover}
.proof-row{margin-top:clamp(56px,7vw,120px)}
.proof-row>.label-s{padding-top:19px}
.proof-links{grid-column:4/-1;display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:4px;font-size:16px}
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut);border-top:1px solid var(--ln)}
.quote{display:flex;flex-direction:column;gap:22px;padding:18px 22px 0 0}
.quote blockquote{margin:0}
.quote blockquote p{font:600 clamp(20px,1.75vw,27px)/1.18 var(--f);letter-spacing:-.01em;text-wrap:pretty}
.quote figcaption{margin-top:auto;font-size:14px;color:var(--fg-2)}
.quote figcaption b{font-weight:500;color:var(--fg)}
.quotes-note{margin-top:34px;max-width:78ch;font-size:12.5px;line-height:1.45;color:var(--fg-2)}
/* ---------- what you get on the waitlist ---------- */
.perk-nums{grid-column:4/-1;margin-top:0}
.perk-nums .num b{font:600 clamp(22px,1.9vw,28px)/1.1 var(--f);letter-spacing:-.01em;text-wrap:balance}
.perks .reserve-in{margin-top:clamp(64px,8vw,130px)}
.perks .reserve-panel{gap:34px}
/* one list: the two module cards, a little air, the four sets. The stage on the left takes the full height of the
   list and the form, so both columns end on the same line */
.perks .sets-gap{display:block;height:10px}
.perks .sets-h{align-items:center;min-height:28px}
.perks .reserve-in{align-items:stretch}
.perks .reserve-fig{position:relative;top:auto;display:flex}
.perks .reserve-stage{flex:1;aspect-ratio:auto;min-height:420px}
.perks .reserve-panel{gap:24px}
@media (max-width:900px){
  .perks .reserve-stage{flex:none;width:100%;aspect-ratio:1.3;min-height:0}
}
@media (max-width:900px){
  .perks .reserve-fig:empty{display:none}
  .perks .rs-pin{position:sticky;top:calc(var(--hd) + 6px);z-index:2;margin-bottom:10px}
  .perks .rs-pin::before,.perks .rs-pin::after{content:"";position:absolute;left:0;right:0;background:var(--bg);pointer-events:none}   /* cards scroll under the stage, never beside it */
  .perks .rs-pin::before{bottom:100%;height:calc(var(--hd) + 6px)}
  .perks .rs-pin::after{top:100%;height:10px}
  .perks .rs-pin .reserve-stage{aspect-ratio:1.6}
}
.pk-fine{font-size:13px;line-height:1.4;color:var(--fg-2)}
.perks .wl{max-width:none}
.final .label-s{display:flex;align-items:flex-start;gap:9px;align-self:start;padding-top:.9em}
.final .wl{margin-top:34px}
.final .assure{margin-top:34px;max-width:520px}
/* ---------- module pages ---------- */
.phero-foot .phero-say{gap:14px}
.phero-price{font:500 15px/1.3 var(--f);color:var(--fg-2)}
.phero-snap{font:500 14px/1.35 var(--f);color:var(--fg-2);max-width:34em}
.phero-snap a{color:var(--fg)}
.phero-say .wl{max-width:500px}
.col-s10{grid-column:10/span 3}
.defn{margin-top:clamp(28px,3vw,44px);max-width:46em;font-size:18px;line-height:1.4}
/* ---------- footer ---------- */
.foot-grid.foot-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.foot-co{display:flex;align-items:center;justify-content:space-between;gap:24px 48px;flex-wrap:wrap;padding-block:22px;border-top:1px solid var(--ln);color:var(--fg-3);font-size:12px;line-height:1.5}
.foot-co p{flex:1 1 420px;max-width:104ch}
.foot-co .feu{display:block;flex:none;width:min(100%,250px);transition:opacity var(--t-norm) var(--e-out)}
.foot-co .feu:hover{opacity:.7}
.foot-bot{display:flex;justify-content:space-between;gap:16px;padding-block:14px 24px;border-top:1px solid var(--ln)}
/* ---------- the bar on phones ---------- */
.wbar{display:none}

@media (max-width:1100px){
  .foot-grid.foot-5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-proof{font-size:12px}
  .hero-proof span+span::before{margin:0 9px}
}
@media (max-width:899px){
  /* the hero flows: text and form first, then the deck, then the proof */
  .hero{position:relative;height:auto;min-height:0;display:flex;flex-direction:column;padding-top:calc(var(--hd) + var(--sat) + 6px)}
  .hero-foot{position:static;display:block;padding:0 var(--m)}
  .hero-meta{display:block;padding:0 0 10px}
  .hero-say{gap:12px}
  .hero .h-xl{font-size:clamp(36px,10.4vw,60px);line-height:.98}
  .hero-row{display:grid;grid-template-columns:minmax(0,1fr);row-gap:16px;opacity:1;transform:none}
  .hero-lead,.hero-row .wl{grid-column:1/-1}
  .hero-lead{padding:0}
  .hero-txt{font-size:16px}
  .hero-rot .say{white-space:nowrap;width:auto}
  .hero-rot .say:not(.on) .li{transform:translateY(1.6em)}
  .hero-rot .say.out:not(.on) .li{transform:translateY(-1.6em)}
  .hero-row{row-gap:16px}
  .hero-under{min-height:0}
  .hero-row .wl.open~.hero-under{opacity:1;visibility:visible}
  .hero-row .wl-fine{position:static;height:auto;margin-top:14px;grid-template-rows:1fr}
  .hero-row .wl.fold:not(.open) .wl-fine{grid-template-rows:0fr!important;margin-top:0}
  .hero-row .wl-consent br{display:inline}
  .hero-row.done .hero-under{display:flex}
  .hero-row.done .wl{display:grid}
  .hero-row.done .wl-ok{display:grid}
  .hero-row.done .wl-ok-t,.hero-row.done .wl-ok-b,.hero-row.done .wl-small{grid-column:1/-1;padding:0;min-height:0}
  .hero-stage{position:relative;inset:auto;height:min(96vw,620px);margin-top:10px}
  .hero-bar{position:static;height:auto;margin-inline:var(--m);padding-block:14px 20px;opacity:1}
  .hero-bar .hero-hint{display:none}
  .hero-proof{gap:6px 0}
  .quotes{grid-template-columns:minmax(0,1fr)}
  .proof-links{grid-column:1/-1}
  .perk-nums{grid-column:1/-1}
  .proof-row>.label-s{padding:0 0 14px}
  .pshots{height:auto;grid-template-columns:repeat(3,minmax(0,1fr))}
  .pshot{grid-column:span 1;aspect-ratio:.62}
  .pshot.wide{grid-column:1/-1;aspect-ratio:1.5}
  .quote{padding-right:0}
  .menu-t .menu-l,.menu-r{grid-column:1/-1}
  .menu-r{margin-top:22px}
  .menu-r a{padding:11px 0;font-size:19px}
  .col-s10{grid-column:1/-1}
}
@media (max-width:760px){
  .hd-join{height:38px;padding:0 14px;font-size:14px}
  .foot-grid.foot-5{grid-template-columns:minmax(0,1fr)}
  .foot-co .feu{width:210px}
  .foot{padding-bottom:76px}
  .story-txt{bottom:84px}
  .wbar{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:115;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px;padding:7px 7px 7px 20px;border-radius:100px;background:var(--ink);color:var(--paper);box-shadow:0 12px 34px rgba(0,0,0,.28),inset 0 0 0 1px rgba(233,233,235,.1);transform:translateY(170%);transition:transform .55s var(--e-out)}
  .wbar.on{transform:none}
  .menu-open .wbar{transform:translateY(170%)}
  .wbar p{font:500 14px/1.2 var(--f)}
  .wbar .pill{height:40px;background:var(--paper);color:var(--ink)}
}
@media (max-width:760px){
  /* module pages: name, line, price and form first, then the module in a block of its own */
  .phero{position:relative;height:auto;min-height:0;display:flex;flex-direction:column;padding-top:calc(var(--hd) + var(--sat) + 6px)}
  .phero-top{position:static;padding-inline:var(--m)}
  .pname{position:static;padding-inline:var(--m);margin-top:10px;font-size:clamp(64px,23vw,120px)}
  .phero-foot{display:contents}
  .phero-say{order:2;padding-inline:var(--m);margin-top:14px}
  .phero .wl-fine{min-height:0}
  .phero .wl.fold:not(.open) .wl-fine{grid-template-rows:0fr!important;margin-top:0!important}
  .phero .view{position:relative;inset:auto;order:3;height:min(92vw,560px);margin-top:6px}
  .phero-ctl{order:4;padding:0 var(--m) 22px;justify-content:center}
}
@media (max-width:520px){
  .wl-row{height:auto;flex-direction:column;align-items:stretch;gap:8px;padding:0;border-radius:0;background:none;color:inherit}
  .wl-row:focus-within{box-shadow:none}
  .wl-in{flex:none;height:56px;padding:0 24px;border-radius:100px;color:var(--fg);box-shadow:inset 0 0 0 1px var(--ln-2);font-size:16px}
  .wl-in:focus{box-shadow:inset 0 0 0 1.5px var(--fg)}
  .wl-in:-webkit-autofill{-webkit-text-fill-color:var(--fg);box-shadow:inset 0 0 0 1px var(--ln-2),inset 0 0 0 100px var(--bg)}
  .wl-btn{height:56px;margin:0;padding:0 9px 0 24px;justify-content:space-between;border-radius:100px;background:var(--fg);color:var(--bg);font-size:16px}
  .wl-btn::before{display:none}
  .wl-btn .rbtn{width:38px;height:38px}
}

/* ---------- C6 stage 2: help, company and email pages (the legal layout and the C5 section head) ---------- */
.doc .legal-main{gap:clamp(22px,2.6vw,36px)}
.doc-lead{color:var(--fg-2);max-width:40em}
.doc .legal-body h3{margin-top:14px}
.todo{justify-self:start;width:fit-content;max-width:100%;padding:9px 14px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--ln-2);font:500 13.5px/1.45 var(--f);color:var(--fg-3);background:repeating-linear-gradient(135deg,transparent 0 8px,rgba(19,19,20,.025) 8px 16px)}
.todo b{color:var(--fg-2);font-weight:600;letter-spacing:.02em}
.loc{display:grid;gap:14px}
.loc>.label-s{color:var(--fg-3)}
.loc-row{display:grid;grid-template-columns:minmax(0,12em) minmax(0,1fr);gap:var(--gut);padding-block:18px;border-block:1px solid var(--ln)}
.loc-c{color:var(--fg);font-weight:600}
.loc-d{display:grid;gap:4px}
.loc-n{margin-top:8px;color:var(--fg-3);font-size:14.5px}
/* note pages: welcome, thanks, bonus, 404 */
.note{padding-top:calc(var(--hd) + clamp(56px,8vw,130px));padding-bottom:clamp(72px,9vw,150px)}
.note .sec-head{row-gap:22px}
.note .sec-head .body-l{grid-column:4/span 7}
.h-sub{display:block;color:var(--fg-3)}
.note .slot{display:inline-block;padding:0 8px;border-radius:7px;background:var(--fill-2);color:var(--fg);line-height:1.45}
.note-row{margin-top:clamp(44px,5vw,80px);align-items:start;row-gap:16px}
.note-row>.label-s{padding-top:4px}
.note-b{display:grid;gap:32px}
.note-i{display:grid;gap:14px;justify-items:start;padding-top:16px;border-top:1px solid var(--ln)}
.note-pills{display:flex;flex-wrap:wrap;gap:8px}
.note-small{grid-column:4/span 7;margin-top:18px}
.note [data-view] .sec-head{margin-bottom:0}
.note-wl{display:grid;gap:20px;max-width:640px}
.note-ph{width:100%;height:auto;border-radius:14px}
.note-band .h-l{margin-bottom:16px}
.note-band .body-l{margin-bottom:28px}
.bform{display:grid;gap:22px;max-width:560px}
.bform label{display:grid;gap:8px}
.bform .label-s{color:var(--fg-3)}
.bform input{width:100%;height:50px;padding:0 20px;border:0;border-radius:100px;background:var(--fill);font:500 16px/1 var(--f);color:var(--fg);outline:none;transition:box-shadow var(--t-fast)}
.bform input:focus-visible{box-shadow:inset 0 0 0 1.5px var(--fg)}
.bform small{font:500 13.5px/1.4 var(--f);color:var(--fg-3)}
.bf-pre{display:flex;align-items:center;border-radius:100px;background:var(--fill)}
.bf-pre>span{padding-left:20px;color:var(--fg-3);font:500 16px/1 var(--f)}
.bf-pre input{padding-left:4px;background:transparent}
.bf-err{color:#c2391b;font:500 14px/1.4 var(--f)}
.bf-go{height:50px;padding:0 26px;font-size:16px}
@media (max-width:900px){
  .note .sec-head .body-l,.note-small{grid-column:1/-1}
  .dlinks a{grid-template-columns:minmax(0,1fr) 16px}
  .dlinks .dl-s{grid-column:1;grid-row:2;font-size:14px}
  .dlinks svg{grid-row:1/span 2}
  .loc-row{grid-template-columns:minmax(0,1fr)}
  .rform fieldset{grid-template-columns:minmax(0,1fr);padding:16px}
}
/* the notice for visitors from Japan: a dark card, a bottom sheet on phones */
.jp{position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:24px;background:rgba(10,11,12,.5);opacity:0;transition:opacity .35s var(--e-out)}
.jp.on{opacity:1}
.jp-card{width:min(520px,100%);display:grid;gap:14px;padding:30px 30px 26px;border-radius:22px;background:var(--ink);color:var(--paper);font:500 15px/1.75 'Hiragino Sans','Hiragino Kaku Gothic ProN','Noto Sans JP','Yu Gothic','Meiryo',var(--f);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6);transform:translateY(14px);transition:transform .45s var(--e-out)}
.jp.on .jp-card{transform:none}
.jp-h{font-size:20px;line-height:1.4}
.jp-en{margin-top:-10px;font:500 11px/1.25 var(--f);text-transform:uppercase;letter-spacing:.04em;color:rgba(233,233,235,.5)}
.jp-p{color:rgba(233,233,235,.82)}
.jp-p b{color:var(--paper);font-weight:600}
.jp-b{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.jp-b .pill-ink{background:var(--paper);color:var(--ink)}
.jp-b .pill-line{color:var(--paper);box-shadow:inset 0 0 0 1px rgba(233,233,235,.25)}
@media (max-width:640px){.jp{place-items:end stretch;padding:0}.jp-card{width:100%;border-radius:22px 22px 0 0;padding:26px 20px calc(22px + env(safe-area-inset-bottom,0px))}.jp-b .pill{flex:1 1 100%}}
.note .label-s{display:flex;align-items:center;gap:9px}
.page{min-height:100svh}

/* ---------- C6: help pages (Damian's prototype of 11.11 in the C5 patterns) ----------
   A row of chips to move between the pages, the C5 section head for the hero and for every section, content from
   column 4. Blocks are square fills, controls are round; ink marks what is picked or recommended, orange only what is
   live (the system this page runs on). */
.hh{padding-top:calc(var(--hd) + var(--sat) + clamp(18px,2vw,32px));padding-bottom:clamp(56px,6vw,100px)}
.hh-nav{margin-bottom:clamp(56px,7vw,112px)}
.hh .sec-head{margin-bottom:clamp(36px,4vw,64px)}
.hh-f{grid-column:4/-1;display:flex;justify-content:center}
.hh-f img{width:min(100%,860px);height:auto}
.hh-w{grid-column:4/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gut)}
.hh-w figure{display:grid;gap:10px}
.hh-w img{width:100%;height:auto;aspect-ratio:240/234;border-radius:5%/5.1%}
.hh-w figcaption{color:var(--fg-3)}
.hh .todo{margin-top:14px}
.oscs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut);margin-top:clamp(32px,4vw,64px)}
.osc{display:grid;align-content:space-between;gap:48px;min-height:clamp(220px,19vw,290px);padding:clamp(20px,2vw,30px);background:var(--paper-2);color:var(--fg);transition:background-color .4s var(--e-out),color .4s var(--e-out)}
.osc-t{display:grid;gap:6px;align-content:start}
.osc-m,.osc-here{color:var(--fg-2);font-size:15px;line-height:1.3}
.osc-here{display:none;align-items:center;gap:9px}
.osc.on{background:var(--ink);--fg:var(--paper);--fg-2:rgba(233,233,235,.66);--ln-2:rgba(233,233,235,.24)}
.osc.on .osc-here{display:flex}
.osc-b{justify-self:start;height:50px;padding:0 20px;cursor:default}
.osc-b .i{width:18px;height:18px;margin-left:-3px}
.osc.on .pill-ink{background:var(--paper);color:var(--ink)}
.osc .pill-line{color:var(--fg)}
.hs{padding-block:clamp(64px,7vw,120px)}
.hs:not(.band)+.hs:not(.band),.hh+.hs:not(.band){padding-top:0}
.hs .sec-head{margin-bottom:clamp(32px,4vw,60px)}
.hs .sec-head::before,.hs.faq>.wrap::before{content:"";grid-column:1/-1;height:1px;background:var(--ln);margin-bottom:clamp(16px,2vw,32px)}
.band.hs .sec-head::before,.hs+.band.hs .sec-head::before{display:none}
.hs.faq>.wrap::before{margin-bottom:clamp(34px,4vw,60px)}
.hs-c{grid-column:4/-1;display:grid;gap:clamp(20px,2vw,28px);min-width:0;align-content:start;justify-items:stretch}
.hs-c.full{grid-column:1/-1}
.hs-c>.todo,.hs-c>.b{justify-self:start}
.hs-note{color:var(--fg-2);max-width:46em;font-size:15px;line-height:1.4}
.hsteps{display:grid;border-bottom:1px solid var(--ln)}
.hsteps li{display:grid;grid-template-columns:clamp(40px,4vw,64px) minmax(0,1fr);gap:var(--gut);padding:clamp(18px,1.8vw,26px) 0;border-top:1px solid var(--ln)}
.hst-n{font:500 13px/1.7 var(--f);font-variant-numeric:tabular-nums;color:var(--fg-3);padding-top:.3em}
.hst-b{display:grid;gap:8px;justify-items:start;max-width:46em}
.hst-b .body-m{color:var(--fg-2);line-height:1.4}
.hst-b .b{margin-top:6px}
.hst-b .todo{margin-top:4px}
.hsteps-s li{padding:14px 0}
.hsteps-s .hst-n{padding-top:0;line-height:1.4}
.hsteps-s .body-m{color:var(--fg)}
.hvid{display:grid;gap:12px;min-width:0;align-content:start}
.hvid-f{position:relative;display:grid;place-items:center;aspect-ratio:16/9;background:var(--fill)}
.hvid-p{display:grid;place-items:center;width:clamp(52px,4.4vw,68px);aspect-ratio:1;border-radius:50%;background:var(--ink);color:var(--paper)}
.hvid-p .i{width:36%;height:36%;margin-left:6%}
.hvid figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.hvid figcaption .label-s{color:var(--fg-3)}
.hvid-n{font:600 16px/1.2 var(--f)}
.hvid-l{color:var(--fg-3);font-size:14px}
.hvid.sm{width:calc((100% - var(--gut)) / 2)}
.hgrid{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:var(--gut)}
.hc{position:relative;display:grid;align-content:space-between;justify-items:start;gap:28px;min-width:0;padding:clamp(18px,1.6vw,24px);background:var(--fill);color:var(--fg)}
.hc-t{display:grid;gap:8px;align-content:start;justify-items:start}
.hc-img{display:block;width:100%;height:auto;aspect-ratio:6/5;object-fit:contain;margin-bottom:18px}
.hc .h-s{font-size:clamp(18px,1.45vw,22px);line-height:1.18}
.hc .body-m{color:var(--fg-2);line-height:1.4}
.hc .label-s,.hc-n{color:var(--fg-3)}
.hc-n{font:500 13px/1 var(--f);font-variant-numeric:tabular-nums;margin-bottom:10px}
.hc .label-s{margin-bottom:6px}
.hc-a{transition:background-color .35s var(--e-out)}
.hc-a:hover{background:var(--fill-2)}
.hc-a .rbtn{background:var(--bg)}
.hc-a:hover .rbtn{background:var(--fg);color:var(--bg)}
.hc-ink{background:var(--ink);--fg:var(--paper);--fg-2:rgba(233,233,235,.66);--fg-3:rgba(233,233,235,.44);--bg:var(--ink-3)}
.hc-ink.hc-a:hover{background:#000}
.hc-ink.hc-a:hover .rbtn{background:var(--paper);color:var(--ink)}
.hc-out{background:transparent;outline:1px dashed var(--ln-2);outline-offset:-1px}
.htag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:100px;background:var(--fill-2);color:var(--fg);font:500 12.5px/1 var(--f);white-space:nowrap}
.hc-t>.htag{margin-bottom:10px}
.htag-ink{background:var(--fg);color:var(--bg)}
.htag-line{background:transparent;box-shadow:inset 0 0 0 1px var(--ln-2)}
.hband{padding-block:clamp(88px,10vw,170px)}
.hband-t{display:grid;justify-items:start}
.hband-t .todo{margin-top:22px}
.hband.hs .sec-head{margin-bottom:clamp(36px,4vw,64px)}
/* /power: the configurator. Large modules, small figures, one answer: what to plug the deck into */
.pconf{display:grid;gap:clamp(14px,1.4vw,20px)}
.pc-mods{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gut)}
.pc-m{display:grid;grid-template-rows:auto 1fr auto;gap:16px;min-width:0;padding:clamp(16px,1.6vw,26px);background:var(--fill)}
.pc-m img{width:100%;height:auto;aspect-ratio:1.1;object-fit:contain;padding:4% 2%}
.pc-mt{display:grid;gap:4px;align-content:start}
.pc-mn{font:600 clamp(18px,1.45vw,22px)/1.15 var(--f);letter-spacing:-.01em}
.pc-w{color:var(--fg-3);font-size:13px;line-height:1.3;font-variant-numeric:tabular-nums}
.pc-fix{display:flex;align-items:center;min-height:44px;color:var(--fg-3);font-size:13.5px;line-height:1.3}
.pc-step{display:flex;align-items:center;justify-content:space-between;gap:6px;height:44px;padding:0 6px;border-radius:100px;background:var(--bg)}
.pc-b{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--paper);transition:background-color .2s,opacity .2s}
.pc-b:hover{background:#000}
.pc-b:disabled{opacity:.2;cursor:default}
.pc-b .ui{width:14px;height:14px}
.pc-c{min-width:2ch;text-align:center;font:600 19px/1 var(--f);font-variant-numeric:tabular-nums}
.pc-out{display:grid;gap:12px;justify-items:start;padding:clamp(24px,2.8vw,44px);background:var(--ink);color:var(--fg)}
.pc-out .label-s{color:var(--fg-3)}
@media (max-width:900px){.pc-out{position:sticky;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:3;box-shadow:0 10px 30px rgba(19,19,20,.18)}}   /* the answer stays on screen while you add modules */
.pc-rec{font:600 clamp(30px,3.4vw,52px)/1.04 var(--f);letter-spacing:-.016em;text-wrap:balance}
.pc-how{display:flex;flex-wrap:wrap;gap:4px 18px;color:var(--fg-2);font-size:16px;line-height:1.35}
.pc-how b{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums}
.pc-note{color:var(--fg-3);font-size:13.5px;line-height:1.45}
.pc-signs{display:grid;gap:14px;margin-top:clamp(10px,1.4vw,20px)}
.pc-signs .label-s{color:var(--fg-3)}
.pbd{display:grid;grid-template-columns:minmax(0,1.25fr) auto minmax(0,.8fr) auto minmax(0,1.25fr);align-items:center;gap:clamp(10px,1.4vw,22px);padding:clamp(20px,2.4vw,36px);background:var(--ink-2)}
.pbd-in{display:grid;gap:10px}
.pbd-b{display:grid;gap:5px;padding:14px 16px;box-shadow:inset 0 0 0 1px var(--ln-2);font:500 16px/1.25 var(--f);color:var(--fg)}
.pbd-b .label-s{color:var(--fg-3)}
.pbd-pb{place-items:center;min-height:68px;background:var(--paper);color:var(--ink);box-shadow:none;font-weight:600}
.pbd-a{color:var(--fg-3)}
.pbd-a svg{display:block;width:clamp(26px,2.6vw,40px);height:auto}
/* /films */
.kit{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gut)}
.kit li{display:grid;align-content:space-between;gap:28px;min-height:clamp(130px,11vw,160px);padding:clamp(16px,1.4vw,22px);background:var(--fill);font:500 15px/1.3 var(--f)}
.kit-i{width:36px;height:36px;color:var(--fg)}
.kit-x{font:600 30px/1 var(--f);letter-spacing:-.02em}
.fpanel{display:grid;gap:clamp(18px,2vw,28px)}
.js .fpanel[hidden]{display:none}
.fp-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--gut);align-items:stretch}
.fp-img{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:14px;padding:clamp(16px,1.6vw,24px);background:var(--fill)}
.fp-img img{width:100%;height:100%;max-height:280px;object-fit:contain;align-self:center}
.fp-img figcaption{display:grid;gap:3px}
/* /support */
.tp{gap:24px}
.tp-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:clamp(28px,3vw,48px)}
.tp-l{display:grid;align-self:end;width:100%;border-top:1px solid var(--ln)}
.tp-l a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--ln);font:500 15px/1.3 var(--f)}
.tp-l svg{width:12px;height:12px;flex:none;transition:transform var(--t-norm) var(--e-out)}
.tp-l a:hover svg{transform:translateX(4px)}
/* /repair */
.rf-first{grid-template-columns:minmax(0,1fr) auto;align-items:center;align-content:center;column-gap:clamp(20px,3vw,48px)}
.rf-first .h-s{max-width:28em}
.rform fieldset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px var(--gut);min-width:0;margin:0;padding:clamp(20px,2.4vw,36px);border:0;background:var(--fill)}
.rform label,.rf-mods{display:grid;gap:9px;min-width:0}
.rform .wide{grid-column:1/-1}
.rform .label-m{color:var(--fg-2)}
.rform input,.rform textarea{width:100%;height:50px;padding:0 20px;border:0;border-radius:100px;background:var(--bg);font:500 15px/1.3 var(--f);color:var(--fg);outline:none;box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .2s}
.rform textarea{height:auto;min-height:140px;padding:16px 20px;border-radius:25px;resize:vertical}
.rform input[type=file]{height:50px;padding:12px 20px;border-radius:100px}
.rform input:focus,.rform textarea:focus{box-shadow:inset 0 0 0 1.5px var(--fg)}
.rform .chips button[aria-pressed="true"]{background:var(--fg);color:var(--bg);box-shadow:none}
.rform fieldset[disabled] :is(input,textarea,.chips,.pill){opacity:.55}
.rf-go{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.rf-go .pill{height:50px;padding:0 24px}
.rf-go p{color:var(--fg-2);font-size:14.5px}
/* /compliance */
.hrows{display:grid;border-bottom:1px solid var(--ln)}
.hrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:12px var(--gut);align-items:start;padding:22px 0;border-top:1px solid var(--ln)}
.hrow .h-s{font-size:clamp(18px,1.45vw,22px)}
.hrow-c{display:grid;justify-items:start;min-width:0}
.hkv{width:100%}
.hkv dt:first-of-type,.hkv dd:first-of-type{border-top:0;padding-top:0}
.hkv dd{text-align:left}
@media (max-width:900px){
  .hs-c,.hh-f,.hh-w{grid-column:1/-1}
  .hh-nav{margin-bottom:48px;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--m));padding-inline:var(--m)}
  .hh-nav .chips{flex-wrap:nowrap}
  .hh-w{grid-template-columns:repeat(2,minmax(0,1fr))}
  .oscs{grid-template-columns:minmax(0,1fr)}
  .osc{min-height:0;gap:28px}
  .hgrid{grid-template-columns:minmax(0,1fr)}
  .hvid.sm{width:100%}
  .pc-mods{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pc-m:first-child{grid-column:1/-1;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto;align-items:center}
  .pc-m:first-child img{grid-row:span 2}
  .pbd{grid-template-columns:minmax(0,1fr)}
  .pbd-a{justify-self:center;transform:rotate(90deg)}
  .kit{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fp-top{grid-template-columns:minmax(0,1fr)}
  .fp-img img{max-height:200px}
  .rf-first{grid-template-columns:minmax(0,1fr)}
  .rform fieldset{grid-template-columns:minmax(0,1fr)}
  .hrow{grid-template-columns:minmax(0,1fr)}
}

/* ---------- C6: the waitlist panel (Paweł, 12.11: "Panel", first "Okno") ----------
   The hero keeps its field. Every other "Join the waitlist" is a button that opens this one panel from the right with
   the same form; on a phone it comes up from the bottom. Without scripts the button is a link to the hero form. */
.wj-open{justify-self:start;display:inline-flex;align-items:center;gap:22px;height:62px;padding:0 11px 0 28px;border-radius:100px;background:var(--fg);color:var(--bg);font:500 17px/1 var(--f);transition:opacity var(--t-norm) var(--e-out)}
.wj-open .rbtn{width:40px;height:40px;background:var(--bg);color:var(--fg);transition:transform var(--t-smooth) var(--e-out)}
.wj-open:hover .rbtn{transform:rotate(-45deg)}
.final .wj-open{margin-top:34px}
.reserve-panel .wj-open{margin-top:6px}
/* open and close are one CSS transition each way: closed is the resting state, [open] the shown one */
dialog.wj{position:fixed;inset:0 0 0 auto;margin:0;width:min(480px,100vw);height:100dvh;max-width:none;max-height:none;padding:0;border:0;border-radius:0;background:var(--bg);color:var(--fg);overflow:auto;overscroll-behavior:contain;
  box-shadow:-1px 0 0 rgba(233,233,235,.1);transform:translateX(100%);transition:transform .45s var(--e-out),overlay .45s allow-discrete,display .45s allow-discrete}
dialog.wj[open]{transform:none}
dialog.wj::backdrop{background:rgba(19,19,20,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .25s var(--e-out),overlay .4s allow-discrete,display .4s allow-discrete}
dialog.wj[open]::backdrop{opacity:1}
@starting-style{dialog.wj[open]{transform:translateX(100%)}dialog.wj[open]::backdrop{opacity:0}}
.wj-in{position:relative;display:grid;gap:22px;align-content:center;min-height:100%;padding:clamp(28px,3vw,44px)}
.wj-in>.label-s{color:var(--fg-3)}
.wj-h{margin:-10px 0 0;padding-right:48px;font:600 clamp(28px,2.6vw,38px)/1.02 var(--f);letter-spacing:-.016em;text-wrap:balance}
.wj-perks{display:grid;gap:6px;margin:0;padding:0;list-style:none;color:var(--fg-2);font:500 16px/1.3 var(--f)}
.wj-perks li{display:flex;align-items:baseline;gap:10px}
.wj-perks li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--orange);flex:none;translate:0 -.2em}
.wj-x{position:absolute;right:clamp(16px,2vw,24px);top:clamp(16px,2vw,24px);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--fill)}
.wj-x span{grid-area:1/1;width:14px;height:1.5px;background:var(--fg);transform:rotate(45deg)}
.wj-x span+span{transform:rotate(-45deg)}
.wj-x:hover{background:var(--fill-2)}
.wj .wl{max-width:none;margin:0}
.hero-row .wj-open{grid-column:span 5}
.phero-say .wj-open{margin-top:clamp(18px,2vw,28px)}
.note-wl .wj-open{margin-top:18px}
/* without scripts the link to #join-d shows the window in place of the dialog's own opening */
dialog.wj:target:not([open]){display:block;z-index:500;transform:none;box-shadow:0 0 0 100vmax rgba(19,19,20,.42)}
dialog.wj:focus,dialog.wj:focus-visible{outline:none}
@media (prefers-reduced-motion:reduce){dialog.wj,dialog.wj::backdrop{transition:none}}
@media (max-width:760px){
  .wj-open{width:100%;justify-content:space-between;height:56px;padding:0 9px 0 24px;font-size:16px}
  .hero-row .wj-open{grid-column:1/-1}
  .wj-open .rbtn{width:38px;height:38px}
  dialog.wj{inset:auto 0 0 0;width:100%;height:auto;max-height:92dvh;margin:0;border-radius:16px 16px 0 0;transform:translateY(100%)}
  dialog.wj[open]{transform:none}
  @starting-style{dialog.wj[open]{transform:translateY(100%);opacity:1}}
  .wj-in{gap:18px;min-height:0;align-content:start;padding:22px 16px calc(22px + env(safe-area-inset-bottom,0px))}
  .wj-in::before{content:"";justify-self:center;width:36px;height:4px;margin:-8px 0 2px;border-radius:4px;background:var(--fill-2)}
}

/* TEST (Paweł, 13.11): every piece of text in lower case, sentence starts and the upper-case labels included */
*,*::before,*::after{text-transform:lowercase!important}
::placeholder{text-transform:lowercase!important}