/* neonstudio dragon site v14-fade (2026-10-05). Unbounded for display, Manrope for reading (as v8; v9 tried Clash Display and Satoshi); the dragon site's own run of
   cyan to violet to magenta, which the switchboard can swap for one of the main site's neons. Without JavaScript every
   tube reads as lit; with it, tubes start as unlit glass and strike on when power reaches them. */

:root{
  --bg:#010103;--deep:#05060a;--panel:rgba(5,6,10,.8);
  --text:#f5f6f8;--soft:#c9cfdb;--muted:#9aa4b6;--hair:rgba(255,255,255,.09);--hair2:rgba(255,255,255,.15);
  --viper:#11e35c;
  --c1:#1fe0ff;--c2:#9b6bff;--c3:#ff3d9a;
  --run:linear-gradient(100deg,var(--c1),var(--c2) 50%,var(--c3));
  --pad:clamp(20px,6vw,88px);--r:3px;
  /* keys (DESIGN-DNA 4b with the Aero depth, 2026-10-04): a flat face, a 1px lit top edge, a 3px hard side in a darker
     cut, a 2px contact line and a close cast. On this near-black ground the cast is near-black and the neutral face is
     a slate whose side still clears the ground (1.42:1). No pills anywhere. */
  --k-r:8px;--k:3px;--k-down:1px;
  --k-ease:cubic-bezier(.2,.8,.3,1);--k-spring:cubic-bezier(.25,.9,.35,1.15);
  --k-contact:rgba(0,0,0,.6);--k-drop:rgba(0,0,0,.72);--k-dy:2px;--k-blur:5px;--k-spread:-1px;
  /* v18 (James, 2026-10-06: "C1/C4 ... fix but make it follow neon selection"): the action key takes the chosen neon (Run's is
     green since v23, James: "use green buttons in RUN layered with pink and purple": it echoes the dragon's green eyes against the
     run's pink and violet; v21's was pink), dark lettering; its hover brightens; viper green stays for success only (an uploaded file, a sent brief) */
  --k-act:#22e07a;--k-act-hover:#56e48b;--k-act-side:#075b2e;--k-act-ink:#07080d;--success:#11e35c;--k-lit-on:rgba(255,255,255,.34);--k-lit-off:rgba(255,255,255,.12);
  --k-n:#363d4c;--k-n-hover:#2f3543;--k-n-side:#232836;--k-n-ink:#f5f6f8;--k-n-lit:rgba(255,255,255,.2);--k-n-lit-dn:rgba(255,255,255,.08);
  /* a chosen answer is a deep cut of the scheme's secondary (v22) with white lettering, held down, with a lit top edge, so it never
     matches the action key */
  --k-on:#4f3586;--k-on-side:#20153a;--k-on-ink:#ffffff;--k-on-lit:#c0aaff;
  --display:'Unbounded',system-ui,sans-serif;--body:'Manrope',system-ui,sans-serif;
}
html[data-neon=pink]{--c1:#ff3d9a;--c2:#9b6bff;--c3:#2fe6d0;--k-act:#ff3d9a;--k-act-hover:#ff5ea6;--k-act-side:#69133c;--k-on:#573c8f;--k-on-side:#251a3d;--k-on-lit:#d2bcff}
html[data-neon=gold]{--c1:#ffbd1f;--c2:#ff8a1f;--c3:#ff3d6e;--k-act:#ffbd1f;--k-act-hover:#ffc64f;--k-act-side:#694c06;--k-on:#733e0e;--k-on-side:#331c06;--k-on-lit:#ffca9a}
html[data-neon=green]{--c1:#22e07a;--c2:#1fe0ff;--c3:#9b6bff;--k-act:#22e07a;--k-act-hover:#56e48b;--k-act-side:#075b2e;--k-on:#0b535e;--k-on-side:#052429;--k-on-lit:#9af1ff}
html[data-neon=blue]{--c1:#3b82ff;--c2:#1fe0ff;--c3:#7dffcf;--k-act:#3b82ff;--k-act-hover:#5493ff;--k-act-side:#123269;--k-on:#0b535e;--k-on-side:#052429;--k-on-lit:#9af1ff}
html[data-neon=black]{--c1:#b26dff;--c2:#ff4fd8;--c3:#c6ff3d;--k-act:#b26dff;--k-act-hover:#bb81ff;--k-act-side:#472869;--k-on:#7f276c;--k-on-side:#381130;--k-on-lit:#ffb0ed}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:84px}
body{background:var(--bg);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit}
::selection{background:var(--c3);color:#08090e}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--pad)}
.center{text-align:center}
:focus-visible{outline:2px solid var(--c1);outline-offset:3px}

/* ---------- the fixed layers: 3D stage, its light on the page, the wire, sparks ---------- */
#stage{position:fixed;left:0;top:0;width:100%;height:100lvh;z-index:0;pointer-events:none}
#gl{display:block;width:100%;height:100%}
#spill{position:fixed;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:var(--sa,0);
  background:radial-gradient(38vmax 30vmax at var(--sx,70%) var(--sy,40%),color-mix(in oklab,var(--spill,#9b6bff) 10%,transparent),transparent 72%)}
#wire{position:absolute;left:0;top:0;width:100%;height:0;z-index:1;pointer-events:none}
#wire svg{position:absolute;left:0;width:100%;overflow:hidden}
#wire .w-glass{fill:none;stroke:rgba(255,255,255,.075);stroke-width:4;stroke-linecap:round}
#wire .w-glow{fill:none;stroke:url(#wireRun);stroke-width:9;opacity:.2;stroke-linecap:round}
#wire .w-tube{fill:none;stroke:url(#wireRun);stroke-width:2.6;opacity:.9;stroke-linecap:round}
#wire .w-core{fill:none;stroke:#effcff;stroke-width:1;stroke-linecap:round}
#wire .w-tap{fill:none;stroke:rgba(255,255,255,.12);stroke-width:1.5;stroke-linecap:round;transition:stroke .3s}
#wire .w-tap.on{stroke:url(#wireRun)}
#wire .w-node{fill:var(--bg);stroke:rgba(255,255,255,.22);stroke-width:1.5;transition:stroke .3s}
#wire .w-node.on{stroke:#fff;fill:url(#wireRun)}
#wire .w-head .hg{fill:url(#wireRun);opacity:.35}
#wire .w-head .hc{fill:#fff}
.sprite stop.s1,.mark stop.s1,.steptube stop.s1{stop-color:var(--c1)}
.sprite stop.s2,.mark stop.s2,.steptube stop.s2{stop-color:var(--c2)}
.sprite stop.s3,.mark stop.s3,.steptube stop.s3{stop-color:var(--c3)}
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:30;pointer-events:none}
main,.foot{position:relative;z-index:2}
.lg-stampbar{position:relative;z-index:3}   /* the last-updated stamp sits over the 3D stage, above the header, and scrolls away */

/* ---------- header ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:14px var(--pad);padding-top:max(14px,env(safe-area-inset-top));border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
.nav.solid{background:rgba(3,4,8,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--hair)}
.brand{display:inline-flex;align-items:center;min-height:44px}
.mark-box{position:relative;display:block}
.mark{display:block;height:26px;width:auto;overflow:visible}
.mark .w-neon{fill:url(#markRun)}
.mark .w-studio{fill:#f3f3f3}
/* v18, the lit glass core (study L1): 55% of the tube colour into white, no glow at rest; flat under 20px (the intake bar) */
.mark .w-core{fill:url(#markCore)}
.mark stop.k1{stop-color:color-mix(in oklab,var(--c1) 55%,#fff)}.mark stop.k2{stop-color:color-mix(in oklab,var(--c2) 55%,#fff)}.mark stop.k3{stop-color:color-mix(in oklab,var(--c3) 55%,#fff)}
.mark-glow .w-core,.in-top .mark .w-core{display:none}
.mark-glow{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;
  filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 10px var(--c2)) drop-shadow(0 0 26px color-mix(in oklab,var(--c2) 60%,transparent))}
.mark-glow .w-neon{fill:color-mix(in oklab,var(--c2) 35%,#fff)}
/* power-up, as logo neon v2 on neonstudio.ai: "neon" strikes letter by letter wearing a glow, then the glow fades and the
   four letters settle into solid colour; "studio" never changes */
html.js .brand:not(.on) .mark .w-neon path{fill:rgba(255,255,255,.13)}
html.js .brand:not(.on) .mark .w-core path{fill:transparent}
.brand.on .mark .w-core path{animation:coreStrike .9s steps(1,end) backwards}
.brand.on .mark .w-core path:nth-child(2){animation-delay:.08s}.brand.on .mark .w-core path:nth-child(3){animation-delay:.16s}.brand.on .mark .w-core path:nth-child(4){animation-delay:.24s}
@keyframes coreStrike{0%,39%{fill:transparent}40%,100%{fill:url(#markCore)}}
.brand.on .mark .w-neon path{animation:logoStrike .9s steps(1,end) backwards}
.brand.on .mark .w-neon path:nth-child(2){animation-delay:.08s}
.brand.on .mark .w-neon path:nth-child(3){animation-delay:.16s}
.brand.on .mark .w-neon path:nth-child(4){animation-delay:.24s}
.brand.on .mark-glow{animation:logoGlow 2.8s ease .1s both}
@keyframes logoStrike{0%{fill:rgba(255,255,255,.13)}14%{fill:#fff}24%{fill:rgba(255,255,255,.13)}40%,100%{fill:url(#markRun)}}
@keyframes logoGlow{0%{opacity:0}12%,62%{opacity:1}100%{opacity:0}}

.xp{display:flex;align-items:center;gap:10px}
.xp-label{font-size:12.5px;font-weight:600;color:var(--muted)}
.xp-opts{display:flex;gap:6px}
.xp a{min-height:34px;padding:0 13px;font-size:13px}

.links{display:flex;align-items:center;gap:24px}
.links .l{font-size:14px;font-weight:600;color:var(--muted);transition:color .2s}
.links .l:hover{color:var(--text)}
@media(max-width:1179px){.nav{flex-wrap:wrap;row-gap:8px}.xp{order:3;flex:0 0 100%;justify-content:center}.nav.solid .xp{display:none}}
@media(max-width:899px){.links .l{display:none}}
.btn .short{display:none}
@media(max-width:700px){.mark{height:21px}.xp a{min-height:36px;padding:0 14px}.xp-label{display:none}}
@media(max-width:480px){.nav .btn .long{display:none}.nav .btn .short{display:inline}.mark{height:19px}}
/* v18: between 1180 and 1359px the header is one row and "Get three free mockups" wrapped onto two lines (48px tall), worse with the
   arrow cue; the short label keeps it on one */
@media(min-width:1180px) and (max-width:1359px){.nav .btn .long{display:none}.nav .btn .short{display:inline}}
@media(min-width:1180px) and (max-width:1279px){.xp-label{display:none}}   /* the row is exactly full there (measured at 1180) */

/* ---------- buttons are keys (DESIGN-DNA 4b, BTN·KEY-6 to 9, the Aero depth): three tiers, no pills ---------- */
.btn,.key{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:var(--k-r);
  font-family:var(--body);font-weight:700;line-height:1.2;text-align:center;cursor:pointer;text-decoration:none;
  --side:var(--k-n-side);--lit:var(--k-n-lit);--lit-dn:var(--k-n-lit-dn);background:var(--k-n);color:var(--k-n-ink);
  box-shadow:inset 0 1px 0 var(--lit),0 var(--k) 0 var(--side),0 calc(var(--k) + 1px) 2px var(--k-contact),
             0 calc(var(--k) + var(--k-dy)) var(--k-blur) var(--k-spread) var(--k-drop);
  transition:transform .14s var(--k-ease),box-shadow .14s var(--k-ease),background-color .14s,color .14s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.btn{min-height:48px;padding:10px 22px;font-size:15px}
.btn-sm{min-height:40px;padding:8px 16px;font-size:13.5px}
.btn:hover,.key:hover{background:var(--k-n-hover)}
/* tier 1, calls to action: the action colour on its darker cut */
.btn-primary{--side:var(--k-act-side);--lit:var(--k-lit-on);--lit-dn:var(--k-lit-off);background:var(--k-act);color:var(--k-act-ink);font-weight:800;
  --k-dy:4px;--k-blur:14px;--k-spread:-2px;--k-drop:color-mix(in oklab,var(--k-act) 55%,transparent)}
.btn-primary:hover{background:var(--k-act-hover)}
/* a cue that is not colour: the action key carries an arrow, since it now shares its hue with the page's neon */
.btn-primary::before{content:"";order:2;flex:none;width:13px;height:13px;margin-left:-2px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6h7.2M6.4 2.6 9.8 6 6.4 9.4' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6h7.2M6.4 2.6 9.8 6 6.4 9.4' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
/* tier 3, latching selectors: the chosen key keeps its place and fills with its own colour */
.key:is([aria-selected=true],[aria-checked=true],[aria-pressed=true],[aria-current],:has(input:checked)){
  --side:var(--k-on-side);--lit:var(--k-on-lit);--lit-dn:var(--k-lit-off);background:var(--k-on);color:var(--k-on-ink);
  transform:translateY(calc(var(--k) - var(--k-down)));
  box-shadow:inset 0 1px 0 var(--lit),0 var(--k-down) 0 var(--side),0 calc(var(--k-down) + 1px) 2px var(--k-contact)}
/* the experience switch is a place, not a lit choice: the current key stays slate and shows a small lamp in the neon */
.xp a.key[aria-current]{--side:var(--k-n-side);--lit:var(--k-n-lit);background:var(--k-n);color:var(--k-n-ink);transform:none;
  box-shadow:inset 0 1px 0 var(--lit),0 var(--k) 0 var(--side),0 calc(var(--k) + 1px) 2px var(--k-contact),0 calc(var(--k) + var(--k-dy)) var(--k-blur) var(--k-spread) var(--k-drop)}
.xp a.key[aria-current]::before{content:"";flex:none;width:6px;height:6px;border-radius:1px;background:var(--c2);box-shadow:0 0 6px var(--c2)}
.xp a.key[aria-current]:hover{background:var(--k-n-hover)}
.key:is([aria-selected=true],[aria-checked=true],[aria-pressed=true],[aria-current],:has(input:checked)):hover{background:var(--k-on)}
/* held: the face goes down to 1px of side and the shadow goes in under it */
.btn:is(:active,.is-pressed),.key:is(:active,.is-pressed){transform:translateY(calc(var(--k) - var(--k-down)));
  box-shadow:inset 0 1px 0 var(--lit-dn),0 var(--k-down) 0 var(--side),0 calc(var(--k-down) + 1px) 2px var(--k-contact),0 2px 3px -1px var(--k-drop);
  transition-duration:.055s}
/* released: past rest by a pixel, back, settle; the action fires at the 40% mark, 120ms in (v8.js) */
@keyframes kRebound{
  0%{transform:translateY(calc(var(--k) - var(--k-down)));
     box-shadow:inset 0 1px 0 var(--lit-dn),0 var(--k-down) 0 var(--side),0 calc(var(--k-down) + 1px) 2px var(--k-contact),0 2px 3px -1px var(--k-drop)}
  40%{transform:translateY(-1px);
     box-shadow:inset 0 1px 0 var(--lit),0 calc(var(--k) + 1px) 0 var(--side),0 calc(var(--k) + 2px) 2px var(--k-contact),
                0 calc(var(--k) + var(--k-dy) + 1px) var(--k-blur) var(--k-spread) var(--k-drop)}
  68%{transform:translateY(.5px)}
  86%{transform:translateY(-.3px)}
  100%{transform:none;
     box-shadow:inset 0 1px 0 var(--lit),0 var(--k) 0 var(--side),0 calc(var(--k) + 1px) 2px var(--k-contact),
                0 calc(var(--k) + var(--k-dy)) var(--k-blur) var(--k-spread) var(--k-drop)}}
.btn.is-rebounding,.key.is-rebounding{animation:kRebound .3s var(--k-spring) both;transition:none}
/* smaller keys reach 44px through a transparent margin on the key itself (Aero K12) */
.btn-sm::after,.key::after{content:"";position:absolute;inset:-4px 0 calc(-1 * (var(--k) + 4px));border-radius:inherit}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.btn-row.center{justify-content:center}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.02em;text-wrap:balance}
.h1{font-size:clamp(32px,4.4vw,70px);line-height:1.07;margin-bottom:26px}
.h1 .plain{display:block}
.chapter h2{font-size:clamp(27px,3.3vw,50px);line-height:1.1;margin-bottom:18px}
h3{font-size:18px;font-weight:500;letter-spacing:-.01em;line-height:1.3}
.eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:20px;font-size:14px;font-weight:700;color:var(--soft)}
.eyebrow .ix{font-family:var(--display);font-weight:500;font-size:12px;color:var(--muted);letter-spacing:.04em}
.eyebrow .node{position:relative;flex:0 0 7px;width:7px;height:7px;background:rgba(255,255,255,.24);transition:background .3s,box-shadow .3s}
.powered .eyebrow .node,html:not(.js) .eyebrow .node{background:var(--c1);box-shadow:0 0 8px var(--c1),0 0 18px color-mix(in oklab,var(--c1) 45%,transparent)}
.shead{max-width:820px;margin-bottom:56px}
.shead>p:not(.eyebrow){color:var(--muted);max-width:60ch}
.lede{color:var(--soft);font-size:clamp(16px,1.3vw,19px);max-width:44ch}
.body{color:var(--soft);max-width:62ch;margin-bottom:16px}
.body b,.lede b{color:#fff}
.fine{margin-top:16px;color:var(--muted);font-size:13.5px}

/* ---------- lit words: neon letter by letter ---------- */
.lit .w{display:inline-block;white-space:nowrap}
.lit .ch,.lit:not(:has(.ch)),.ti{
  --col:color-mix(in oklab,color-mix(in oklab,var(--c2) calc(min(var(--hue,var(--t,0)),.5)*200%),var(--c1)),var(--c3) calc(max(var(--hue,var(--t,0)) - .5,0)*200%));
  --core:color-mix(in oklab,var(--col) 40%,#fff)}
.lit .ch,.lit:not(:has(.ch)){display:inline-block;color:var(--core);
  text-shadow:0 0 1px var(--col),0 0 8px var(--col),0 0 20px color-mix(in oklab,var(--col) 70%,transparent),0 0 44px color-mix(in oklab,var(--col) 36%,transparent)}
.lit:not(:has(.ch)){--t:.5}
html.js .lit:not(.on) .ch{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.22);text-shadow:none}
html.js .lit.on .ch{animation:strike .8s steps(1,end) backwards;animation-delay:calc(var(--i,0)*34ms + var(--d,0ms))}
html.js .lit.on.quick .ch{animation-duration:.45s;animation-delay:calc(var(--i,0)*20ms)}
.lit .ch.sag{opacity:.32;text-shadow:none}
html.js .lit.on.still .ch,html.js .lit.on.still .ch.late{animation:none!important}
html.js .chapter.powered.still .ti .c{animation:none}
.powered.still .tick{transition:none}
.lit .ch.late{animation:strikeLate 1.4s steps(1,end) backwards!important;animation-delay:calc(var(--i,0)*34ms + var(--d,0ms))!important}
@keyframes strike{
  0%{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.22);text-shadow:none}
  16%{color:#fff;-webkit-text-stroke:0 transparent;text-shadow:0 0 2px #fff,0 0 14px var(--col),0 0 34px var(--col)}
  30%{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.3);text-shadow:none}
  46%,100%{color:var(--core);-webkit-text-stroke:0 transparent;text-shadow:0 0 1px var(--col),0 0 8px var(--col),0 0 20px color-mix(in oklab,var(--col) 70%,transparent),0 0 44px color-mix(in oklab,var(--col) 36%,transparent)}}
@keyframes strikeLate{
  0%,40%{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.22);text-shadow:none}
  52%{color:#fff;-webkit-text-stroke:0 transparent;text-shadow:0 0 2px #fff,0 0 14px var(--col)}
  62%{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.3);text-shadow:none}
  74%,100%{color:var(--core);-webkit-text-stroke:0 transparent;text-shadow:0 0 1px var(--col),0 0 8px var(--col),0 0 20px color-mix(in oklab,var(--col) 70%,transparent),0 0 44px color-mix(in oklab,var(--col) 36%,transparent)}}

/* ---------- tube icons ---------- */
.ti{display:block;flex:0 0 28px;width:28px;height:28px;overflow:visible;transition:filter .4s}
.ti use{fill:none;stroke-linecap:round;stroke-linejoin:round}
.ti .g{stroke:var(--col);stroke-width:4;opacity:.3}
.ti .c{stroke:var(--core);stroke-width:1.6}
.powered .ti,html:not(.js) .ti{filter:drop-shadow(0 0 5px color-mix(in oklab,var(--col) 80%,transparent))}
html.js .chapter:not(.powered) .ti .g{opacity:0}
html.js .chapter:not(.powered) .ti .c{stroke:rgba(255,255,255,.24)}
html.js .chapter.powered .ti .c{animation:tiOn .8s steps(1,end) backwards;animation-delay:calc(var(--t,0)*520ms + 260ms)}
@keyframes tiOn{0%{stroke:rgba(255,255,255,.24)}18%{stroke:#fff}32%{stroke:rgba(255,255,255,.24)}48%,100%{stroke:var(--core)}}

/* ---------- chapters ---------- */
.chapter{position:relative;padding:clamp(96px,14vh,160px) 0}

/* the dragon run: the hero and the first impression share one docked stage slot */
.run{position:relative}
/* the dock keeps its real height so it lets go when the run ends; the hero slides up over it instead */
.dock{position:sticky;top:0;height:100svh;pointer-events:none;z-index:0}
.dock+.hero{margin-top:-100svh}
.dock .stage-slot{position:absolute;right:0;top:calc(8svh + var(--stamp,0px));width:58%;height:calc(92svh - var(--stamp,0px))}
.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
html.stage-ready .poster-off{visibility:hidden}
.hero{min-height:100svh;display:flex;align-items:center;padding:120px 0 90px}
.hero-wrap{width:100%}
.hero-copy{position:relative;max-width:600px;z-index:2}
html.breaker .hero-copy{animation:jolt .18s steps(3,end) 1}
@keyframes jolt{0%{transform:translate(1px,-1px)}33%{transform:translate(-1px,1px)}66%{transform:translate(1px,0)}100%{transform:none}}
.scrollcue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--muted)}
.scrollcue i{position:relative;width:1px;height:44px;overflow:hidden;background:rgba(255,255,255,.08)}
.scrollcue i::after{content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;background:linear-gradient(180deg,transparent,var(--c1));animation:drip 2.2s ease-in-out infinite}
@keyframes drip{to{transform:translateY(375%)}}   /* a transform, not top: no layout every frame */

.first{padding:0}
.first-inner{position:relative}
html.js:not(.rm) .first{height:210svh}
html.js:not(.rm) .first-inner{position:sticky;top:0;height:100svh;display:flex;align-items:center}
.first .wrap{width:100%}
.first-copy{max-width:min(620px,48vw);font-family:var(--display);font-weight:400;font-size:clamp(21px,2.4vw,36px);line-height:1.34;letter-spacing:-.01em;color:var(--soft)}
.first-copy b{font-weight:600;color:#fff}
html.js .first-copy .wd{color:rgba(245,246,248,.36);transition:color .3s,text-shadow .3s}
html.js .first-copy .wd.on{color:var(--soft)}
html.js .first-copy b .wd.on{color:#fff;text-shadow:0 0 18px color-mix(in oklab,var(--c1) 30%,transparent)}

@media(max-width:899px){
  .dock .stage-slot{left:0;right:0;width:auto;top:calc(max(96px,10svh) + var(--stamp,0px));height:44svh}
  .hero{align-items:flex-end;padding:56svh 0 70px}
  .hero-copy::before,.first-copy::before{content:"";position:absolute;inset:-26px -20px -20px;z-index:-1;background:linear-gradient(180deg,transparent,rgba(1,1,3,.8) 26%,rgba(1,1,3,.86))}
  .scrollcue{display:none}
  html.js:not(.rm) .first-inner{align-items:flex-end;padding-bottom:9svh}
  .first-copy{position:relative;max-width:none;font-size:clamp(19px,5.4vw,26px)}
}

/* ---------- how it works: one glass tube through four steps ---------- */
.how{padding-bottom:clamp(60px,10vh,120px)}
.how-pin{position:relative}
.how-track{position:relative;padding:0 var(--pad)}
.step-art{position:relative;width:100%;aspect-ratio:340/200}
.step-n{font-family:var(--display);font-weight:600;font-size:clamp(54px,6.6vw,104px);line-height:.9;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.2);margin-bottom:16px;transition:-webkit-text-stroke-color .4s}
.step.on .step-n,html:not(.js) .step-n{-webkit-text-stroke-color:color-mix(in oklab,var(--c2) 60%,#fff);-webkit-text-stroke-width:2px;filter:drop-shadow(0 0 6px color-mix(in oklab,var(--c2) 45%,transparent))}
.step h3{font-size:clamp(20px,1.9vw,28px);margin-bottom:12px}
.step p:not(.step-n){color:var(--muted);max-width:40ch}   /* the number is a p too: it keeps its transparent fill */
.steptube{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.steptube path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.steptube .glass{stroke:rgba(255,255,255,.09);stroke-width:8}
.steptube .glow{stroke:url(#stepRun);stroke-width:12;opacity:.2}
.steptube .tube{stroke:url(#stepRun);stroke-width:3.6}
.steptube .core{stroke:#f2fcff;stroke-width:1.3}
.steptube .head{fill:#fff}
.steptube .headglow{fill:url(#stepRun);opacity:.4}
@media(min-width:900px){
  .how-track{display:flex;width:max-content}
  .step{flex:0 0 min(80vw,1040px);display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,4vw,64px);align-items:center;padding-right:clamp(48px,7vw,110px)}
  html.js:not(.rm) .how-pin{height:var(--pin-h,320vh)}
  html.js:not(.rm) .how-view{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center}
  html.js:not(.rm) .how-track{will-change:transform}
  html.rm .how-track,html:not(.js) .how-track{flex-wrap:wrap;width:auto}
}
@media(max-width:899px){
  .how-track{display:flex;flex-direction:column;gap:64px}
  .step-art{max-width:460px;margin-bottom:26px}
}

/* ---------- before and after ---------- */
.ba{position:relative;max-width:1000px;margin:0 auto}
.ba-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#0b0d14;border:1px solid var(--hair);border-bottom:0;border-radius:3px 3px 0 0}
.ba-bar i{width:10px;height:10px;border-radius:50%;background:#262a35}
.ba-bar span{margin-left:10px;font-size:12.5px;font-weight:600;color:var(--muted)}
.ba-view{--pos:50%;position:relative;overflow:hidden;aspect-ratio:16/10;border:1px solid var(--hair);background:#0b0d14;user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:ew-resize}
.ba-site .ba-view{border-radius:0 0 3px 3px}
.ba-before,.ba-after{position:absolute;inset:0}
.ba-before{width:100%;height:100%;object-fit:cover;object-position:top}
/* the pictures must never start the browser's own image drag: that cancels the pointer and the slider stops */
.ba-view img{pointer-events:none;-webkit-user-drag:none;user-select:none}
.ba-after{clip-path:inset(0 0 0 var(--pos))}
.ba-after img{width:100%;height:100%;object-fit:cover;object-position:top}
.ba-tube{position:absolute;top:0;bottom:0;left:var(--pos);width:0;z-index:3;pointer-events:none}
.ba-tube::before{content:"";position:absolute;top:0;bottom:0;left:-4px;width:8px;border-radius:4px;background:linear-gradient(180deg,var(--c1),var(--c2),var(--c3));opacity:.55;box-shadow:0 0 14px var(--c2),0 0 34px color-mix(in oklab,var(--c2) 50%,transparent)}
.ba-tube::after{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:#f2fcff}
.ba-tube i{position:absolute;top:50%;left:-24px;width:48px;height:48px;margin-top:-24px;border-radius:50%;background:rgba(3,4,8,.82);border:1.5px solid color-mix(in oklab,var(--c2) 55%,#fff);box-shadow:0 0 18px color-mix(in oklab,var(--c2) 60%,transparent)}
.ba-tube i::before,.ba-tube i::after{content:"";position:absolute;top:50%;width:8px;height:8px;margin-top:-4px;border:solid #fff;border-width:2px 2px 0 0}
.ba-tube i::before{left:11px;transform:rotate(-135deg)}.ba-tube i::after{right:11px;transform:rotate(45deg)}
.ba-view:has(.ba-range:focus-visible) .ba-tube i{outline:2px solid var(--c1);outline-offset:3px}
.ba-range{position:absolute;left:0;bottom:0;width:100%;height:24px;opacity:0;pointer-events:none;margin:0}
.ba-tag{position:absolute;top:14px;z-index:2;padding:5px 9px;border-radius:2px;background:rgba(3,4,8,.78);font-size:12.5px;font-weight:700;pointer-events:none}
.ba-tag-b{left:14px;color:var(--soft)}
.ba-tag-a{right:14px;color:#fff}
.ba figcaption{margin-top:14px;text-align:center;font-size:13.5px;color:var(--muted)}
.logo-old{display:grid;place-items:center;background:#ecebe6}
.logo-old span{font-family:'Times New Roman',Times,serif;font-weight:700;font-size:clamp(26px,3.6vw,46px);color:#59606b}
.logo-old img{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain}   /* v22: the Diva Dog badge, whole, on the light panel */
.logo-new{display:grid;place-items:center;background:#06070b}
.logo-new img{width:80%;height:auto;filter:drop-shadow(0 0 16px rgba(255,79,150,.38))}   /* v22: the Diva Dog crown mark, its own pink glow */
.ba-logo .ba-view{aspect-ratio:16/10;border-radius:3px}

/* ---------- included ---------- */
.incl{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);column-gap:56px;border-top:1px solid var(--hair)}
.incl li{position:relative;display:flex;gap:18px;align-items:flex-start;padding:24px 44px 24px 0;border-bottom:1px solid var(--hair)}
.incl h3{font-family:var(--body);font-weight:700;font-size:16.5px;letter-spacing:0;margin-bottom:3px}
.incl p{color:var(--muted);font-size:15.5px}
.tick{position:absolute;right:2px;top:26px;width:20px;height:20px;fill:none;stroke:var(--soft);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24}
.powered .tick{stroke-dashoffset:0;transition:stroke-dashoffset .5s cubic-bezier(.4,0,.2,1) calc(var(--t,0)*600ms + .35s);filter:drop-shadow(0 0 3px rgba(255,255,255,.35))}
html:not(.js) .tick,html.rm .tick{stroke-dashoffset:0}
@media(max-width:760px){.incl{grid-template-columns:1fr}}

/* ---------- method ---------- */
.method-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
@media(max-width:899px){.method-grid{grid-template-columns:1fr}}

/* ---------- devices ---------- */
.devices{padding:clamp(96px,14vh,160px) 0}
.dev-grid{display:grid;grid-template-columns:minmax(300px,.8fr) 1.2fr;gap:40px;align-items:center;width:100%}
.dev-slot{position:relative;height:min(76svh,660px)}
.dev-fallback{width:100%;height:100%;object-fit:contain;transition:opacity .6s}
html.stage-devices .dev-fallback{opacity:0}
.dev-tabs{display:flex;flex-wrap:wrap;gap:12px 8px;margin:26px 0 18px}
.dev-tabs button{min-height:36px;padding:7px 15px;font-size:14px}

.dev-meta{font-size:14.5px;color:var(--muted)}
.dev-meta a{color:var(--text);border-bottom:1px solid var(--hair2);margin-left:6px}
@media(min-width:900px){
  html.js:not(.rm) .devices{height:230svh;padding:0}
  html.js:not(.rm) .dev-inner{position:sticky;top:0;height:100svh;display:flex;align-items:center}
}
@media(max-width:899px){.dev-grid{grid-template-columns:1fr}.dev-slot{height:56svh}}

/* ---------- work: a sideways gallery ---------- */
.work{padding-bottom:clamp(60px,10vh,120px)}
.work-track{list-style:none;display:flex;gap:clamp(18px,2.4vw,34px);padding:0 var(--pad)}
.wcard{flex:0 0 clamp(270px,34vw,520px);transform:translateY(calc(var(--lift,0) * 1px))}
.wopen{display:block;width:100%;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer;text-decoration:none}
.wimg{position:relative;display:block;overflow:hidden;aspect-ratio:16/10;border-radius:3px;border:1px solid var(--hair);background:#0b0d14;transition:border-color .25s,box-shadow .25s}
.wimg img{width:100%;height:100%;object-fit:cover;object-position:top;transform:translateX(calc(var(--d,0) * -4%)) scale(1.1)}
.wopen:hover .wimg{border-color:color-mix(in oklab,var(--c2) 65%,#fff);box-shadow:0 0 0 1px color-mix(in oklab,var(--c2) 45%,transparent),0 0 30px color-mix(in oklab,var(--c2) 28%,transparent)}
.wopen:focus-visible{outline:none}
.wopen:focus-visible .wimg{outline:2px solid var(--c1);outline-offset:3px}
.wnum{display:block;margin-top:16px;font-family:var(--display);font-size:12.5px;color:var(--muted)}
.wname{display:block;margin:4px 0 2px;font-family:var(--display);font-weight:500;font-size:clamp(18px,1.6vw,22px)}
.wsec{display:block;font-size:14.5px;color:var(--muted)}
@media(min-width:900px){
  html.js:not(.rm) .work-pin{height:var(--pin-h,300vh)}
  html.js:not(.rm) .work-view{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center}
  html.js:not(.rm) .work-track{width:max-content;will-change:transform}
}
@media(max-width:899px){
  .work-view{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px}
  .work-view::-webkit-scrollbar{display:none}
  .work-track{width:max-content}
  .wcard{flex-basis:78vw;scroll-snap-align:center;transform:none}
}
html.rm .work-view,html:not(.js) .work-view{overflow-x:auto;scroll-snap-type:x mandatory}
html.rm .work-track,html:not(.js) .work-track{width:max-content}

/* ---------- who ---------- */
.statement{max-width:44ch;font-weight:500;font-size:clamp(19px,1.9vw,27px);line-height:1.55;color:var(--muted)}
.statement b{display:block;color:#fff;font-weight:700;margin-bottom:10px}

/* ---------- light your name ---------- */
.field{display:block;max-width:520px;margin:0 auto 34px}
.field span{display:block;margin-bottom:10px;font-size:14px;font-weight:700;color:var(--soft)}
.field input{width:100%;min-height:56px;padding:0 20px;border-radius:3px;border:1px solid var(--hair2);background:rgba(3,4,8,.72);color:var(--text);font:600 18px var(--body);transition:border-color .2s,box-shadow .2s}
.field input::placeholder{color:#6f7787}
.field input:focus{outline:none;border-color:color-mix(in oklab,var(--c2) 70%,#fff);box-shadow:0 0 0 3px color-mix(in oklab,var(--c2) 28%,transparent)}
.looks{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
/* v18-name: the name in glass tube, with the dragon that lights it (name.js) */
.name-stage{max-width:1120px;margin:0 auto 30px}
#namegl{display:block;width:100%;aspect-ratio:1064/400;border-radius:3px;background:#07070b}
.name-stage figcaption{margin-top:12px;text-align:center;font-size:13.5px;color:var(--muted)}
@media(max-width:760px){#namegl{aspect-ratio:10/9}}
html:not(.js) .name-stage{display:none}
.look .wall{position:relative;display:grid;place-items:center;aspect-ratio:4/3;padding:22px;overflow:hidden;border-radius:3px;border:1px solid var(--hair);
  background-color:#0b0c11;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 24px),repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,transparent 1px 48px)}
.look .wall::before{content:"";position:absolute;inset:0;background:radial-gradient(56% 46% at 50% 50%,color-mix(in oklab,var(--lc,var(--c2)) 22%,transparent),transparent 72%);pointer-events:none}
.look figcaption{margin-top:12px;text-align:center;font-size:13.5px;font-weight:700;color:var(--muted)}
.sign{position:relative;max-width:100%;text-align:center;line-height:1.08;overflow-wrap:anywhere;font-size:28px}
.look-studio .sign{font-family:var(--display);font-weight:600}
.look-script{--lc:var(--c3)}
.look-script .sign{font-family:'Yellowtail',cursive;--col:var(--c3);color:color-mix(in oklab,var(--c3) 40%,#fff);text-shadow:0 0 1px var(--c3),0 0 8px var(--c3),0 0 22px color-mix(in oklab,var(--c3) 70%,transparent),0 0 46px color-mix(in oklab,var(--c3) 35%,transparent)}
.look-retro{--lc:var(--c1)}
.look-retro .sign{font-family:'Monoton',cursive;font-weight:400;color:color-mix(in oklab,var(--c1) 40%,#fff);text-shadow:0 0 1px var(--c1),0 0 8px var(--c1),0 0 22px color-mix(in oklab,var(--c1) 70%,transparent)}
.sign.buzz{animation:buzz .32s steps(1,end) 1}
@keyframes buzz{0%{opacity:1}30%{opacity:.35}55%{opacity:1}}
.sign .ch.new{animation:strike .6s steps(1,end) backwards}
@media(max-width:860px){.looks{grid-template-columns:1fr}.look .wall{aspect-ratio:16/7}}

/* ---------- numbers ---------- */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.kpi{border-top:2px solid var(--hair2);padding-top:24px}
.kv{font-family:var(--display);font-weight:600;font-size:clamp(52px,6vw,92px);line-height:1}
.kl{margin-top:14px;color:var(--muted);max-width:26ch}
@media(max-width:760px){.kpis{grid-template-columns:1fr;gap:34px}}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:1000px;margin:0 auto 20px}
.plan{position:relative;display:flex;flex-direction:column;padding:34px 30px;border:1px solid var(--hair);border-radius:var(--r);background:var(--panel)}
.plan-hot{border-color:transparent;box-shadow:0 0 40px color-mix(in oklab,var(--c2) 14%,transparent)}
.plan-hot::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;background:var(--run);opacity:.8;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.pt{font-family:var(--display);font-weight:600;font-size:21px}
.pd{margin-top:4px;color:var(--muted);font-size:15px}
.pp{margin:22px 0 8px;font-family:var(--display);font-weight:600;font-size:clamp(32px,3.2vw,44px);letter-spacing:-.02em;line-height:1.1}
.pp span{font-family:var(--body);font-weight:600;font-size:15px;color:var(--muted);letter-spacing:0}
.pl{margin-bottom:18px;color:var(--soft);font-size:15.5px}
.plan ul{list-style:none;display:grid;gap:10px;flex:1;margin-bottom:28px}
.plan li{position:relative;padding-left:22px;color:var(--soft);font-size:15px}
.plan li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--c2)}
.plan .btn{align-self:flex-start}
.design-first{max-width:1000px;margin:0 auto 20px;padding:30px;text-align:center;border:1px solid var(--hair);border-radius:var(--r);background:var(--panel)}
.design-first .pl{max-width:70ch;margin:0 auto}
.df-v{margin:12px 0;font-family:var(--display);font-weight:600;font-size:clamp(42px,5vw,64px);line-height:1.1}
.df-v>span:last-child{font-family:var(--body);font-size:16px;font-weight:600;color:var(--muted)}
@media(max-width:860px){.plans{grid-template-columns:1fr}}

.quote{max-width:1120px;margin:72px auto 0;padding:clamp(22px,3vw,40px);border:1px solid var(--hair2);border-radius:3px;background:rgba(5,6,10,.88)}
.q-head h3{font-size:clamp(22px,2.2vw,30px);font-weight:600}
.q-head p{margin-top:8px;color:var(--muted)}
/* the estimate as a wizard: one question at a time, a step list you can go back through, the run lighting a tube as you go */
.wz{margin-top:28px}
.wz [hidden]{display:none!important}
.wz-steps{list-style:none;display:flex;justify-content:space-between;gap:4px;margin:0;padding:0}
.wz-steps button{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 2px;border:0;background:none;color:var(--muted);font:600 14px var(--body);cursor:pointer;transition:color .2s}
.wz-steps button:disabled{cursor:default}
.wz-steps li:not(.done):not([aria-current]) button:disabled{opacity:.62}
.wz-steps .n{font-family:var(--display);font-weight:500;font-size:12px;letter-spacing:.04em}
.wz-steps li.done button{color:var(--soft)}
.wz-steps li.done button:hover{color:#fff}
.wz-steps li[aria-current] button{color:#fff}
.wz-steps li[aria-current] .n{color:var(--c1);text-shadow:0 0 8px color-mix(in oklab,var(--c1) 60%,transparent)}
.wz-tube{position:relative;height:4px;margin-top:2px;border-radius:2px;background:rgba(255,255,255,.07);overflow:hidden}
.wz-tube i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3));box-shadow:0 0 12px color-mix(in oklab,var(--c2) 70%,transparent);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.wz-count{display:none;margin-top:14px;font-size:14px;font-weight:700;color:var(--soft)}
.wz-stage{margin-top:34px}
.wz-panel{min-width:0;margin:0;padding:0;border:0}
.wz-title{font-family:var(--display);font-weight:600;font-size:clamp(24px,2.5vw,34px);letter-spacing:-.02em;line-height:1.15;outline:none}
.wz-help{margin:10px 0 24px;color:var(--muted)}
.wz-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.q-opt.key{display:block;min-height:56px;text-align:left;font-weight:600}
.q-opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.q-opt span{display:grid;grid-template-columns:1fr auto;align-items:center;gap:3px 14px;min-height:56px;height:100%;padding:12px 16px;font-size:15.5px;line-height:1.3}
.q-opt b{font-weight:600}
.q-opt small{font-size:13.5px;font-weight:700;opacity:.72;white-space:nowrap}
.q-opt em{grid-column:1/-1;font-style:normal;font-size:14px;font-weight:500;opacity:.72}
.q-opt:has(input:checked) small,.q-opt:has(input:checked) em{opacity:.85}
.q-opt:has(input:focus-visible){outline:2px solid var(--c1);outline-offset:4px}
.wz-note{margin:16px 0 0}
.wz-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px;margin-top:32px;padding-top:22px;border-top:1px solid var(--hair)}
.wz-sofar{color:var(--muted);font-weight:600}
.wz-sofar b{font-family:var(--display);font-weight:600;font-size:19px;color:#fff;letter-spacing:-.01em}
.wz-nav{display:flex;gap:10px;margin-left:auto}
.wz-nav .wz-off{visibility:hidden}
.wz-result{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px 56px;align-items:start}
.q-total{margin:14px 0 4px;font-family:var(--display);font-weight:600;font-size:clamp(38px,4.2vw,58px);line-height:1.1}
.q-from{font-family:var(--body);font-size:16px;font-weight:700;color:var(--muted)}
.q-month{margin-bottom:18px;color:var(--soft);font-weight:700}
.q-lines{list-style:none;display:grid;gap:10px;margin:0;padding:22px 24px;border:1px solid var(--hair);border-radius:3px;background:rgba(1,1,3,.55)}
.q-lines li{display:flex;justify-content:space-between;gap:12px;font-size:14.5px;color:var(--muted)}
.q-lines b{color:var(--soft);font-weight:700;white-space:nowrap}
.q-note{margin-bottom:14px;font-size:14px;color:color-mix(in oklab,var(--c1) 65%,#fff)}
.q-note:empty{display:none}
.wz-result .btn-row{margin-top:22px}
@media(max-width:760px){
  .wz-steps,.wz-tube{display:none}
  .wz-count{display:block;margin-top:0}
  .wz-count::after{content:"";display:block;height:4px;margin-top:10px;border-radius:2px;background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3)) 0 0/calc(var(--p,0)*100%) 100% no-repeat,rgba(255,255,255,.07)}
  .wz-stage{margin-top:24px}
  .wz-opts{grid-template-columns:1fr}
  .wz-result{grid-template-columns:1fr}
  .q-lines{padding:18px}
  .wz-foot{flex-direction:column;align-items:stretch}
  .wz-nav{margin-left:0}
  .wz-nav .btn{flex:1}
  .wz-nav .wz-off{display:none}
}

/* ---------- the future ---------- */
.glass-sign{max-width:1120px;margin:0 auto 46px}
#signgl{display:block;width:100%;aspect-ratio:1120/380;border-radius:3px;background:#07070b}
.glass-sign figcaption{margin-top:12px;text-align:center;font-size:13.5px;color:var(--muted)}
@media(max-width:760px){#signgl{aspect-ratio:2/1}}

/* ---------- guarantee, questions, close ---------- */
.guar{display:flex;gap:30px;align-items:center;padding:clamp(26px,4vw,48px);border:1px solid var(--hair);border-radius:3px;background:var(--panel)}
.guar .seal{flex:0 0 64px;width:64px;height:64px}
.guar h2{font-size:clamp(24px,2.7vw,40px)}
.guar .body{margin:0}
@media(max-width:700px){.guar{flex-direction:column;align-items:flex-start}}
.qa-list{max-width:880px;border-top:1px solid var(--hair)}
.qa{border-bottom:1px solid var(--hair)}
.qa summary{display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:64px;padding:18px 0;list-style:none;cursor:pointer;font-weight:700;font-size:17px}
.qa summary::-webkit-details-marker{display:none}
.qa .plus{position:relative;flex:0 0 18px;width:18px;height:18px}
.qa .plus::before,.qa .plus::after{content:"";position:absolute;border-radius:2px;background:var(--c1);box-shadow:0 0 8px color-mix(in oklab,var(--c1) 80%,transparent)}
.qa .plus::before{left:0;right:0;top:8px;height:2px}
.qa .plus::after{top:0;bottom:0;left:8px;width:2px;transition:transform .2s}
.qa[open] .plus::after{transform:scaleY(0)}
.qa p{max-width:68ch;padding:0 0 22px;color:var(--muted)}
.final{padding-top:0;padding-bottom:clamp(110px,16vh,180px)}
.final-slot{position:relative;height:min(64svh,580px);margin-bottom:-30px;pointer-events:none}
.final h2{max-width:15em;margin:0 auto 16px;font-size:clamp(29px,4vw,62px)}
.final .body{margin:0 auto}

/* ---------- footer ---------- */
.foot{padding:56px 0 calc(48px + env(safe-area-inset-bottom));border-top:1px solid var(--hair);background:rgba(1,1,3,.94)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}
.foot .mark{height:22px}
.about{max-width:34ch;margin-top:16px;color:var(--muted);font-size:14.5px}
.fcol h3{margin-bottom:12px;font-family:var(--body);font-weight:700;font-size:13.5px;letter-spacing:0;color:var(--muted)}
.fcol a{display:block;padding:6px 0;font-size:15px;color:var(--soft);transition:color .2s}
.fcol a:hover{color:#fff}
.foot-b{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:40px;padding-top:22px;border-top:1px solid var(--hair);font-size:13px;color:var(--muted)}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}.foot-grid>div:first-child{grid-column:1/-1}.fcol a{padding:11px 0}}

/* ---------- switchboard ---------- */
.switchboard{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:45}
.sb-open{min-height:44px;padding:0 16px 0 12px;font-size:13.5px;background:rgba(43,49,62,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.sb-dot{width:14px;height:14px;border-radius:2px;background:var(--run);box-shadow:0 0 10px var(--c2)}
.sb-panel{position:absolute;right:0;bottom:58px;width:min(310px,calc(100vw - 32px));padding:16px;border:1px solid var(--hair2);border-radius:3px;background:rgba(5,6,10,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.sb-h{margin:2px 0 10px;font-size:13.5px;font-weight:700;color:var(--soft)}
.sb-swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 8px;margin-bottom:18px}
.sb-swatches button{justify-content:flex-start;min-height:36px;padding:0 10px;font-size:13px}
.sb-swatches i{flex:0 0 12px;width:12px;height:12px;border-radius:2px;box-shadow:0 0 8px currentColor}
.sb-swatches [data-neon=run] i{background:linear-gradient(135deg,#1fe0ff,#9b6bff,#ff3d9a);color:#9b6bff}
.sb-swatches [data-neon=pink] i{background:linear-gradient(135deg,#ff3d9a,#9b6bff,#2fe6d0);color:#ff3d9a}
.sb-swatches [data-neon=gold] i{background:linear-gradient(135deg,#ffbd1f,#ff8a1f,#ff3d6e);color:#ffbd1f}
.sb-swatches [data-neon=green] i{background:linear-gradient(135deg,#22e07a,#1fe0ff,#9b6bff);color:#22e07a}
.sb-swatches [data-neon=blue] i{background:linear-gradient(135deg,#3b82ff,#1fe0ff,#7dffcf);color:#3b82ff}
.sb-swatches [data-neon=black] i{background:linear-gradient(135deg,#b26dff,#ff4fd8,#c6ff3d);color:#b26dff}
.sb-swatches [data-neon=pink]{--k-on:#573c8f;--k-on-side:#251a3d;--k-on-lit:#d2bcff}
.sb-swatches [data-neon=gold]{--k-on:#733e0e;--k-on-side:#331c06;--k-on-lit:#ffca9a}
.sb-swatches [data-neon=green]{--k-on:#0b535e;--k-on-side:#052429;--k-on-lit:#9af1ff}
.sb-swatches [data-neon=blue]{--k-on:#0b535e;--k-on-side:#052429;--k-on-lit:#9af1ff}
.sb-swatches [data-neon=black]{--k-on:#7f276c;--k-on-side:#381130;--k-on-lit:#ffb0ed}
.sb-swatches [data-neon=run]{--k-on:#4f3586;--k-on-side:#20153a;--k-on-lit:#c0aaff}
.sb-sound{justify-content:flex-start;width:100%;min-height:40px;padding:0 12px;font-size:14px}
.sb-sound svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.sb-note{margin-top:10px;font-size:12.5px;color:var(--muted)}
@media(max-width:700px){.sb-open{width:44px;padding:0;justify-content:center}.sb-open>span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}

/* ---------- case panel ---------- */
.case{width:100%;max-width:min(1060px,94vw);margin:auto;padding:0;border:0;background:transparent;color:var(--text)}
.case::backdrop{background:rgba(1,1,3,.8);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.case-in{position:relative;display:grid;grid-template-columns:1.35fr 1fr;overflow:hidden;border:1px solid var(--hair2);border-radius:3px;background:#07080d}
.case-media{min-height:300px;background:#0b0d14}
.case-media>img{width:100%;height:100%;object-fit:cover;object-position:top}
.case-media .ba{max-width:none}
.case-media .ba-view{border:0;border-radius:0;aspect-ratio:auto;height:100%;min-height:300px}
.case-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(24px,3vw,40px)}
.case-k{margin-bottom:10px;font-size:14px;font-weight:700;color:var(--muted)}
.case h2{margin-bottom:14px;font-size:clamp(24px,2.6vw,36px)}
.case-x{position:absolute;top:12px;right:12px;z-index:5;width:44px;height:44px;padding:0}
.case-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media(max-width:760px){
  .case{max-width:100vw;margin:auto 0 0}
  .case-in{grid-template-columns:1fr;max-height:92svh;overflow:auto;border-radius:3px 3px 0 0}
  .case-media,.case-media .ba-view{min-height:220px}
}

/* ---------- reduced motion: a settled, lit page ---------- */
html.rm *,html.rm *::before,html.rm *::after{animation:none!important;transition:none!important}
html.rm{scroll-behavior:auto}

/* ---------- the intake (v16, 2026-10-06): the three free mockups are asked for on this page ----------
   One sheet over the page, in the page's own parts: keys for every choice, the estimate's step list and glass progress tube,
   3px panels, Unbounded titles. Phones get the whole screen; the Back and Continue keys stay in reach at the foot. */
html.intake-open{overflow:hidden}
.intake{width:min(1000px,calc(100vw - 32px));max-width:none;max-height:min(920px,calc(100svh - 32px));margin:auto;padding:0;
  border:1px solid var(--hair2);border-radius:3px;background:#07080d;color:var(--text);overflow:hidden}
.intake[open]{display:flex}
.intake::backdrop{background:rgba(1,1,3,.84);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.intake [hidden]{display:none!important}
.in-shell{display:flex;flex-direction:column;flex:1;min-width:0;max-height:inherit}
.in-top{display:flex;align-items:center;gap:16px;padding:12px 12px 12px 24px;border-bottom:1px solid var(--hair)}
.in-top .mark{height:18px;flex:none}
.in-k{flex:1;min-width:0;font-size:13.5px;font-weight:700;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.in-x{width:44px;height:44px;padding:0;flex:none}
.in-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.in-prog{padding:14px clamp(20px,4vw,44px) 0}
.in-prog .wz-steps button{font-size:13.5px}
.in-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:30px clamp(20px,4vw,44px) 28px}
.in-title{font-family:var(--display);font-weight:600;font-size:clamp(24px,2.9vw,34px);letter-spacing:-.02em;line-height:1.15;outline:none}
.in-desc{max-width:62ch;margin-top:10px;color:var(--muted)}
.in-fields{margin-top:28px}
.in-fields>*+*{margin-top:22px}
.in-row{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.in-field label{display:block;margin-bottom:8px;font-size:14px;font-weight:700;color:var(--soft)}
.in-field label em,.in-set legend em{font-style:normal;font-weight:600;color:var(--muted)}
.in-field :is(input:not([type=checkbox]),select,textarea){display:block;width:100%;min-height:52px;padding:12px 16px;border:1px solid var(--hair2);border-radius:3px;
  background:rgba(3,4,8,.72);color:var(--text);font:600 16px/1.4 var(--body);transition:border-color .15s,box-shadow .15s}
.in-field textarea{resize:vertical;min-height:96px}
.in-field select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;
  background:rgba(3,4,8,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa4b6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/18px}
.in-field select option{background:#0b0d14;color:var(--text)}
.in-field :is(input,textarea)::placeholder{color:#6f7787}
.in-field :is(input,select,textarea):focus{outline:none;border-color:color-mix(in oklab,var(--c2) 70%,#fff);box-shadow:0 0 0 3px color-mix(in oklab,var(--c2) 28%,transparent)}
.in-field :is(input,select,textarea)[aria-invalid]{border-color:#ff8f8f;box-shadow:0 0 0 3px rgba(255,120,120,.22)}
.in-field input:disabled{opacity:.45;cursor:not-allowed}
.in-field .in-check{display:inline-flex;align-items:center;gap:12px;min-height:44px;margin:6px 0 0;font-size:15px;font-weight:600;color:var(--soft);cursor:pointer}
.in-check input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--k-act)}
.in-hint{margin-top:8px;font-size:14px;color:var(--muted)}
.in-count{text-align:right}
.in-set{min-width:0;padding:0;border:0}
.in-set legend{margin-bottom:12px;padding:0;font-size:15.5px;font-weight:700;color:var(--soft)}
.in-set .in-hint{margin:-4px 0 12px}
.in-chips{display:flex;flex-wrap:wrap;gap:10px}
.q-opt.in-chip{min-height:48px}
.q-opt.in-chip span{display:flex;min-height:48px;padding:10px 16px}
.in-feats{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.q-opt.in-feat span{grid-template-columns:auto 1fr auto;align-items:center}
.q-opt.in-feat svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.q-opt.in-feat em{grid-column:2/-1}
.in-carry{padding:14px 16px;border:1px solid var(--hair);border-left:2px solid var(--c1);border-radius:3px;background:rgba(1,1,3,.55);font-size:15px;color:var(--soft)}
.in-carry b{color:#fff}
/* the two ways in */
.in-paths{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.in-path.key{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:0;padding:24px 22px 26px;text-align:left;font-weight:600;line-height:1.45}
.in-path-k{font-size:13px;font-weight:700;opacity:.72}
.in-path b{font-family:var(--display);font-weight:600;font-size:clamp(19px,1.9vw,23px);letter-spacing:-.01em;line-height:1.2}
.in-path span:not(.in-path-k){font-size:15px;font-weight:500;opacity:.86}
.in-path i{margin-top:6px;font-style:normal;font-size:13.5px;font-weight:700;opacity:.72}
/* v25: the door screen (intake v7). Three doors, each one key; the label sits at the foot of the key with an arrow */
.in-doors{grid-template-columns:repeat(3,minmax(0,1fr))}
.in-door.key{min-height:100%}
.in-door>span:not(.in-path-k){flex:1}
.in-door i{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-size:15px;opacity:1;color:#fff}
.in-door i svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.in-done-keys{display:flex;flex-wrap:wrap;gap:12px}
.in-done-keys .btn{margin-top:6px}
.in-switch{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;color:var(--soft);font:700 15px var(--body);
  text-decoration:underline;text-decoration-color:color-mix(in oklab,var(--c1) 60%,transparent);text-underline-offset:4px;cursor:pointer}
.in-switch:hover{color:#fff}
/* looks: real work, two screens each */
.in-looks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.in-look{position:relative;display:block;cursor:pointer}
.in-look input{position:absolute;opacity:0;pointer-events:none}
.in-look-card{display:flex;flex-direction:column;height:100%;overflow:hidden;border:1px solid var(--hair2);border-radius:3px;background:#0b0d14;transition:border-color .15s,box-shadow .15s}
.in-look:hover .in-look-card{border-color:rgba(255,255,255,.28)}
.in-look input:checked+.in-look-card{border-color:color-mix(in oklab,var(--c2) 75%,#fff);box-shadow:0 0 0 1px color-mix(in oklab,var(--c2) 75%,#fff),0 0 26px -6px color-mix(in oklab,var(--c2) 60%,transparent)}
.in-look input:focus-visible+.in-look-card{outline:2px solid var(--c1);outline-offset:3px}
.in-stage{position:relative;display:block;aspect-ratio:16/8;overflow:hidden;background:#05060a}
.in-stage img{position:absolute;width:72%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:2px;box-shadow:0 10px 24px -8px rgba(0,0,0,.8)}
.in-stage img:first-child{left:5%;top:9%}
.in-stage img:nth-child(2){right:5%;top:30%}
.in-tick{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--k-on);color:var(--k-on-ink);opacity:0;transform:scale(.6);transition:opacity .15s,transform .2s var(--k-ease)}
.in-tick svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.in-look input:checked+.in-look-card .in-tick{opacity:1;transform:none}
.in-look-meta{display:flex;flex-direction:column;gap:5px;padding:16px 18px 18px}
.in-look-meta b{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.01em}
.in-look-meta>span:not(.in-sw){font-size:15px;color:var(--soft)}
.in-look-meta small{font-size:13.5px;color:var(--muted)}
.in-sw{display:flex;gap:6px;margin-top:6px}
.in-sw i{width:22px;height:22px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.q-opt.in-range{margin-top:14px;width:100%}
/* files */
.in-zone{display:flex;flex-direction:column;align-items:center;gap:8px;padding:30px 22px;border:1.5px dashed var(--hair2);border-radius:3px;background:rgba(1,1,3,.55);text-align:center;cursor:pointer;transition:border-color .15s,background-color .15s}
.in-zone:hover,.in-zone.is-over{border-color:color-mix(in oklab,var(--c2) 70%,#fff);background:color-mix(in oklab,var(--c2) 8%,rgba(1,1,3,.55))}
.in-drop input:focus-visible+.in-zone{outline:2px solid var(--c1);outline-offset:3px}
.in-zone svg{width:30px;height:30px;fill:none;stroke:var(--c1);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.in-zone b{font-size:16px}
.in-zone small{max-width:52ch;font-size:13.5px;color:var(--muted)}
.in-files{list-style:none;display:grid;gap:8px;margin-top:12px}
.in-files:empty{display:none}
.in-files li{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;padding:8px 8px 8px 10px;border:1px solid var(--hair);border-radius:3px;background:rgba(1,1,3,.55)}
.in-files img,.in-ext{width:44px;height:44px;border-radius:2px;object-fit:cover}
.in-ext{display:grid;place-items:center;background:#161a24;font-style:normal;font-size:11.5px;font-weight:800;color:var(--soft)}
.in-files span{min-width:0}
.in-files b{display:block;overflow:hidden;font-size:14.5px;text-overflow:ellipsis;white-space:nowrap}
.in-files small{font-size:13px;color:var(--muted)}
.in-files li.is-error small{color:#ff9b9b}
.in-files li.is-done small{color:color-mix(in oklab,var(--success) 70%,#fff)}
.in-bar{display:block;height:3px;margin-top:6px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.in-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3))}
/* review */
.in-sum{display:grid;border:1px solid var(--hair);border-radius:3px;background:rgba(1,1,3,.55)}
.in-sum>div{display:grid;grid-template-columns:150px 1fr auto;align-items:center;gap:6px 18px;min-height:56px;padding:10px 12px 10px 18px}
.in-sum>div+div{border-top:1px solid var(--hair)}
.in-sum dt{font-size:13.5px;font-weight:700;color:var(--muted)}
.in-sum dd{min-width:0;margin:0;font-size:15px;color:var(--soft);overflow-wrap:anywhere}
.in-fine{font-size:14.5px;font-weight:700;color:var(--soft)}
/* foot, errors, the honeypot */
.in-error{margin-top:18px;color:#ff9b9b;font-size:14.5px;font-weight:600}
.in-error:empty{display:none}
.in-privacy{margin-top:26px;font-size:13px;color:var(--muted)}
.in-privacy a{color:var(--soft)}
.in-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.in-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:14px clamp(20px,4vw,44px) 16px;border-top:1px solid var(--hair);background:#07080d}
.in-status{flex:1;min-width:0;font-size:14px;font-weight:600;color:var(--muted)}
.in-foot .wz-nav{margin-left:auto}
/* sent */
.in-done{display:flex;flex-direction:column;align-items:flex-start;gap:16px;max-width:60ch}
.in-done-tick{width:56px;height:56px;fill:none;stroke:color-mix(in oklab,var(--c1) 55%,#fff);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 6px var(--c1)) drop-shadow(0 0 18px color-mix(in oklab,var(--c1) 60%,transparent))}
.in-done p{font-size:17px;color:var(--soft)}
.in-done b{color:#fff}
.in-done .in-ref{font-size:14px;color:var(--muted)}
.in-done .btn{margin-top:6px}
@media(max-width:760px){
  .intake{width:100vw;max-width:100vw;height:100svh;max-height:100svh;margin:0;border:0;border-radius:0}
  .in-top{padding-left:18px}
  .in-scroll{padding-top:22px}
  .in-row,.in-paths,.in-looks{grid-template-columns:1fr}
  .in-doors{grid-template-columns:1fr}
  .in-stage{aspect-ratio:16/7}
  .in-sum>div{grid-template-columns:1fr auto;padding-left:14px}
  .in-sum dt{grid-column:1}
  .in-sum dd{grid-column:1}
  .in-sum .in-edit{grid-column:2;grid-row:1/3}
  .in-foot .wz-nav{width:100%;margin-left:0}
  .in-foot .wz-nav .btn{flex:1}
  .in-status:empty{display:none}
}


/* ---------- v16 mobile QA (2026-10-06) ---------- */
/* without JavaScript: a solid header, and no empty boxes where the 3D, the tabs and the switch would be */
html:not(.js) .nav{background:rgba(3,4,8,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--hair)}
html:not(.js) .step-art,html:not(.js) .final-slot,html:not(.js) .dev-tabs,html:not(.js) .switchboard{display:none}
html:not(.js) #signgl{background:#07070b url(assets/neonstudio-bold.svg) center/70% no-repeat}
/* safe areas on landscape phones: content clears the sensor housing */
.wrap{padding-inline:max(var(--pad),env(safe-area-inset-left)) max(var(--pad),env(safe-area-inset-right))}
.nav{padding-left:max(var(--pad),env(safe-area-inset-left));padding-right:max(var(--pad),env(safe-area-inset-right))}
.how-track,.work-track{padding-left:max(var(--pad),env(safe-area-inset-left));padding-right:max(var(--pad),env(safe-area-inset-right))}
/* taps: the visit link and the header links reach 44px; footer links get room; pressing gives feedback */
.dev-meta a{display:inline-flex;align-items:center;min-height:44px}
@media(min-width:900px){.links .l{display:inline-flex;align-items:center;min-height:44px}}   /* phones hide these links (line 98); never bring them back */
.fcol a{padding:10px 0}
.fcol a:active,.dev-meta a:active,.qa summary:active,.links .l:active{color:#fff}
.wopen:active .wimg{opacity:.85}
.ba-view{touch-action:pan-y pinch-zoom}
/* the switchboard steps aside on phones while the estimate's keys are on screen */
.switchboard{transition:opacity .2s}
.switchboard.away{opacity:0;pointer-events:none}
/* the case dialog: tags clear the close key, the sheet clears the home indicator, the close key never scrolls away */
.case-media .ba-tag{top:auto;bottom:12px}
.case{overflow:visible}
.case-in{max-height:calc(100svh - 2rem);overflow:auto}
@media(max-width:899px){
  .case-in{max-height:92svh}
  .case-copy{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  /* the hero's scrim fades out instead of ending in a hard edge across the dragon */
  .hero-copy::before,.first-copy::before{inset:-26px -20px -96px;background:linear-gradient(180deg,transparent,rgba(1,1,3,.8) 20%,rgba(1,1,3,.86) 70%,transparent)}
  /* row 21: body copy at 16px on phones */
  .fine,.incl p,.pd,.pl,.plan li,.dev-meta,.about,.q-lines li,.q-note,.sb-note{font-size:16px}
  /* the devices slot is as tall as the laptop and phone it frames */
  .dev-slot{height:auto;aspect-ratio:3/2}
}
/* the hero's own keys sit above the fold on the phones the page is composed for */
@media(max-width:899px) and (max-height:860px){.hero{padding-top:45svh}.dock .stage-slot{height:34svh}}
/* landscape phones: one header row, the dragon beside the copy, cards that fit the height */
@media(max-width:899px) and (orientation:landscape){
  .nav .xp{display:none}
  .dock .stage-slot{left:auto;width:50%;top:calc(72px + var(--stamp,0px));height:calc(100svh - 72px - var(--stamp,0px))}
  .hero{align-items:center;padding:96px 0 40px}
  .hero-copy{max-width:50%}
  .hero-copy::before{-webkit-mask:linear-gradient(90deg,#000 60%,transparent);mask:linear-gradient(90deg,#000 60%,transparent)}
  .wcard{flex-basis:min(78vw,calc((100svh - 170px)*1.6))}
}
/* the intake on a short screen: the whole screen, compact rails, the count in place of the step list */
@media(max-height:520px){
  .intake{width:100vw;max-width:100vw;height:100svh;max-height:100svh;margin:0;border:0;border-radius:0}
  .in-top{padding-top:6px;padding-bottom:6px}
  .in-prog{padding-top:8px}
  .in-prog .wz-steps,.in-prog .wz-tube{display:none}
  .in-prog .wz-count{display:block;margin:0;font-size:13.5px}
  .in-scroll{padding-top:16px}
  .in-foot{padding-top:8px;padding-bottom:8px}
}


/* ---------- v16 design QA (2026-10-06) ---------- */
.incl .ti{--hue:.5}
a.skip{position:fixed;left:max(16px,env(safe-area-inset-left));top:-80px;z-index:100;padding:12px 18px;border-radius:var(--k-r);background:var(--k-act);color:var(--k-act-ink);font-weight:700;text-decoration:none}
a.skip:focus{top:max(12px,env(safe-area-inset-top))}
/* row 21: body copy at 16px on every screen */
.incl p,.pl,.pd,.plan li,.dev-meta,.about,.q-lines li,.fcol a{font-size:16px}
.fine.center{max-width:72ch;margin-inline:auto}
p{text-wrap:pretty}
/* states the audit found missing */
.qa summary:hover{color:#fff}
.dev-meta a:hover{border-bottom-color:currentColor}
.field input:focus-visible{outline:2px solid var(--c1);outline-offset:3px}
h3.pt{line-height:inherit;letter-spacing:normal}
/* the first impression's copy keeps clear of the dragon on desktop */
@media(min-width:900px){.first-copy{max-width:min(560px,40vw)}}
/* the spill's soft wash gets a fine grain, so its gradient never steps into bands */
#spill::after{content:"";position:absolute;inset:0;opacity:.06;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-image:radial-gradient(38vmax 30vmax at var(--sx,70%) var(--sy,40%),#000,transparent 72%);mask-image:radial-gradient(38vmax 30vmax at var(--sx,70%) var(--sy,40%),#000,transparent 72%)}
/* v18-handson: the dragon can be picked up with a mouse (hands.js): an open hand over it, a closed one while it is held */
html.dragon-grab body{cursor:grab}
html.dragon-drag body{cursor:grabbing;-webkit-user-select:none;user-select:none}
html.dragon-drag body *{cursor:grabbing!important}