/* ══════════════════════════════════════════════════════════════
   hostna OS — concept build 1.0
   A single-surface, non-scrolling desktop for a hosting company.
   Namespace is deliberately fresh: nothing here talks to the
   production theme (hostna-v6.css) or the FOSSBilling layers.
   ══════════════════════════════════════════════════════════════ */

/* ── 1. reset ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{
  overflow:hidden;overflow:clip;
  font:400 15px/1.55 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",Inter,system-ui,sans-serif;
  color:var(--ink);
  background:var(--bg-base);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0;outline:0}
button{cursor:pointer}
svg{display:block}
ul{list-style:none}
::selection{background:color-mix(in srgb,var(--accent) 42%,transparent)}

/* ── 2. tokens ──────────────────────────────────────────────── */
:root{
  --bar-h:38px;
  --nav-h:70px;
  --blur:14px; /* perf: blur cost grows superlinearly with radius; glass layers are
                  opaque enough (.66/.34) that 14px reads the same as 30px did */
  --r-win:26px;
  --r-tile:20px;
  --r-ctl:13px;
  --accent:#5aa9ff;
  --accent-2:#a273ff;
  --accent-3:#3fdcc0;
  --warn:#ffb347;
  --ok:#48e08b;
  --ease:cubic-bezier(.22,.8,.28,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

html[data-theme="dark"]{
  --bg-base:#05070d;
  --ink:#eef2f8;
  --ink-2:rgba(238,242,248,.72);
  --ink-3:rgba(238,242,248,.46);
  --stroke:rgba(255,255,255,.14);
  --stroke-2:rgba(255,255,255,.07);
  --glass-a:rgba(255,255,255,.11);
  --glass-b:rgba(255,255,255,.035);
  --tile:rgba(255,255,255,.055);
  --tile-2:rgba(255,255,255,.09);
  --tile-hover:rgba(255,255,255,.085);
  --sunk:rgba(6,9,16,.42);
  --spec:rgba(255,255,255,.5);
  --shadow-win:0 46px 90px -34px rgba(0,0,0,.85),0 4px 16px rgba(0,0,0,.35);
  --shadow-pop:0 22px 48px -18px rgba(0,0,0,.7);
  --w1:#2a3ea8; --w2:#7d2f9e; --w3:#0e6f8c; --w4:#132049;
}

html[data-theme="light"]{
  --bg-base:#e9e4dc;
  --ink:#15181f;
  --ink-2:rgba(21,24,31,.66);
  --ink-3:rgba(21,24,31,.42);
  --stroke:rgba(255,255,255,.8);
  --stroke-2:rgba(24,28,38,.07);
  --glass-a:rgba(255,255,255,.66);
  --glass-b:rgba(255,255,255,.34);
  --tile:rgba(255,255,255,.5);
  --tile-2:rgba(255,255,255,.72);
  --tile-hover:rgba(255,255,255,.74);
  --sunk:rgba(255,255,255,.42);
  --spec:rgba(255,255,255,.95);
  --shadow-win:0 40px 80px -34px rgba(60,50,45,.42),0 3px 12px rgba(60,50,45,.1);
  --shadow-pop:0 20px 44px -18px rgba(60,50,45,.32);
  --w1:#ffd9b8; --w2:#c9d8ff; --w3:#ffc9d6; --w4:#f6ede2;
  --accent:#2f7fe0;
}

/* ── 3. wallpaper ───────────────────────────────────────────── */
/* clip, not hidden: an overflow:hidden box is still a scroll container that
   script can shift. clip is not one at all. hidden stays first as a fallback. */
.desk{position:fixed;inset:0;overflow:hidden;overflow:clip;opacity:0;transition:opacity .7s var(--ease),transform 1s var(--ease);transform:scale(1.04)}
.desk.is-on{opacity:1;transform:none}
.wall{position:absolute;inset:-10%;z-index:0}
/* perf: blur cost rises superlinearly with radius. 90/110px on four
   half-viewport washes was the aurora wallpaper's whole frame budget; 62/76px
   over the same soft gradients is not tellable apart at these sizes. */
/* The theme selector is wrapped in :where() so it contributes no specificity.
   Written plainly, `html[data-theme="light"] .wall .blob` is (0,3,1) and
   silently outranked the wallpaper-switch rule `.wall[data-wall="shore"] >
   .blob` (0,3,0) — so in light mode the blobs were never actually faded out,
   and four half-viewport blur(110px) layers kept painting underneath an opaque
   wallpaper. :where() drops it to (0,2,0), which the switch beats, and opacity
   stays a real animatable declaration so the .9s cross-fade still runs. */
.wall .blob{position:absolute;border-radius:50%;filter:blur(62px);opacity:.85;will-change:transform}
:where(html[data-theme="light"]) .wall .blob{filter:blur(76px);opacity:.95}
.b1{width:52vw;height:52vw;left:-8vw;top:-14vw;background:var(--w1);animation:drift1 34s ease-in-out infinite alternate}
.b2{width:46vw;height:46vw;right:-6vw;top:-10vw;background:var(--w2);animation:drift2 41s ease-in-out infinite alternate}
.b3{width:44vw;height:44vw;right:6vw;bottom:-18vw;background:var(--w3);animation:drift3 37s ease-in-out infinite alternate}
.b4{width:60vw;height:40vw;left:10vw;bottom:-22vw;background:var(--w4);animation:drift1 45s ease-in-out infinite alternate-reverse}
/* perf: translate only. Scaling a blurred layer makes the compositor
   re-rasterise it at the new scale instead of just moving the cached texture;
   over a 44-60vw soft wash the breathing was never visible anyway. */
@keyframes drift1{to{transform:translate3d(6vw,4vw,0)}}
@keyframes drift2{to{transform:translate3d(-7vw,5vw,0)}}
@keyframes drift3{to{transform:translate3d(4vw,-6vw,0)}}
/* perf: no blend modes on full-screen washes — a blend layer forces an
   offscreen render group over everything beneath it, every frame. The same
   sheen/vignette is approximated with plain alpha. */
.wall .silk{position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 50% -10%,rgba(255,255,255,.08),transparent 60%),
    radial-gradient(90% 60% at 50% 120%,rgba(0,0,0,.22),transparent 60%)}
html[data-theme="light"] .wall .silk{background:radial-gradient(120% 80% at 50% -20%,rgba(255,255,255,.32),transparent 62%),radial-gradient(100% 70% at 50% 120%,rgba(150,120,100,.14),transparent 60%)}
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── 4. boot ────────────────────────────────────────────────── */
.boot{position:fixed;inset:0;z-index:200;display:grid;place-content:center;justify-items:center;gap:16px;
  background:radial-gradient(70% 70% at 50% 40%,#0d1322,#04060b 70%);cursor:pointer;transition:opacity .55s var(--ease),visibility .55s}
.boot.is-off{opacity:0;visibility:hidden;pointer-events:none}
.boot-mark svg{width:74px;height:74px;filter:drop-shadow(0 12px 30px rgba(90,140,255,.45));animation:bootPop .9s var(--ease-out) both}
.boot-name{font-size:26px;letter-spacing:-.02em;font-weight:600;color:#eef2f8;animation:bootPop .9s .1s var(--ease-out) both}
.boot-name span{opacity:.5;font-weight:400}
.boot-bar{width:190px;height:4px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.boot-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#6ea8ff,#a273ff);animation:bootFill 1.5s var(--ease) forwards}
.boot-hint{font-size:11.5px;color:rgba(238,242,248,.4);letter-spacing:.02em}
html[data-theme="light"] .boot{background:radial-gradient(70% 70% at 50% 40%,#fdfaf4,#e3ddd2 72%)}
html[data-theme="light"] .boot-name{color:#15181f}
html[data-theme="light"] .boot-bar{background:rgba(20,24,32,.12)}
html[data-theme="light"] .boot-hint{color:rgba(21,24,31,.45)}
@keyframes bootPop{from{opacity:0;transform:translateY(10px) scale(.94)}}
@keyframes bootFill{to{width:100%}}

/* ── 5. glass primitive ─────────────────────────────────────── */
.glassy{
  background:linear-gradient(155deg,var(--glass-a),var(--glass-b));
  -webkit-backdrop-filter:blur(var(--blur)) saturate(180%);
  backdrop-filter:blur(var(--blur)) saturate(180%);
  border:1px solid var(--stroke);
  position:relative;
}
.glassy::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,var(--spec),transparent 26%);opacity:.28;mix-blend-mode:overlay}

/* ── 6. menubar ─────────────────────────────────────────────── */
.menubar{position:absolute;top:0;left:0;right:0;height:var(--bar-h);z-index:30;
  display:flex;align-items:center;justify-content:space-between;padding:0 12px;gap:12px;
  background:linear-gradient(180deg,var(--glass-a),var(--glass-b));
  -webkit-backdrop-filter:blur(12px) saturate(170%);backdrop-filter:blur(12px) saturate(170%);
  border-bottom:1px solid var(--stroke-2);font-size:13px}
.mb-left,.mb-right{display:flex;align-items:center;gap:4px;min-width:0}
.mb-logo{width:26px;height:26px;display:grid;place-items:center;border-radius:8px;color:var(--ink);transition:background .2s}
.mb-logo svg{width:19px;height:19px}
.mb-logo:hover{background:var(--tile-2)}
.mb-brand{font-size:13px;font-weight:700;letter-spacing:.14em;margin-right:2px}
.mb-tag{font-size:9.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);border:1px solid var(--stroke-2);
  padding:2px 6px;border-radius:99px;margin-right:10px}
.mb-item{padding:4px 9px;border-radius:8px;color:var(--ink-2);font-size:13px;transition:background .18s,color .18s}
.mb-item:hover{background:var(--tile-2);color:var(--ink)}
.mb-chip{display:flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:99px;
  background:var(--tile);border:1px solid var(--stroke-2);color:var(--ink-2);font-size:11.5px;white-space:nowrap;transition:background .18s}
.mb-chip:hover{background:var(--tile-hover)}
.mb-chip .i{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.mb-chip kbd{font:inherit;font-size:10px;opacity:.55;border:1px solid var(--stroke-2);border-radius:5px;padding:0 4px}
.mb-live .pip{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent);animation:pip 2.4s infinite}
@keyframes pip{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.mb-theme{width:26px;padding:0;justify-content:center}
.mb-theme .moon{display:none}
html[data-theme="light"] .mb-theme .sun{display:none}
html[data-theme="light"] .mb-theme .moon{display:block}
.mb-clock{font-size:12px;font-variant-numeric:tabular-nums;color:var(--ink-2);padding-left:6px;min-width:78px;text-align:right}

/* ── 7. rail ────────────────────────────────────────────────── */
/* One navigation bar, along the bottom. It is the old left rail moved down:
   same thin glass pill, same icons, now where a dock belongs. */
.rail{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:25;
  display:flex;align-items:center;gap:6px;padding:7px 9px;border-radius:22px;
  max-width:calc(100% - 24px);overflow:visible;
  background:linear-gradient(160deg,var(--glass-a),var(--glass-b));
  -webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);
  border:1px solid var(--stroke);box-shadow:var(--shadow-pop);
  transition:transform .45s var(--ease),opacity .35s}
.rail::-webkit-scrollbar{display:none}
.rail-btn{position:relative;flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;
  border-radius:13px;color:var(--ink-2);transition:background .2s,color .2s,transform .2s var(--ease)}
.rail-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.rail-btn:hover{background:var(--tile-2);color:var(--ink);transform:translateY(-3px)}
.rail-btn svg{transition:transform .2s var(--ease)}
.rail-btn.bounce{animation:navPop .5s var(--ease)}
@keyframes navPop{35%{transform:translateY(-9px) scale(1.08)}70%{transform:translateY(0) scale(1)}85%{transform:translateY(-2px)}}
.rail-btn[data-label]::before{content:attr(data-label);position:absolute;left:50%;top:-36px;
  transform:translateX(-50%) translateY(6px);padding:5px 10px;border-radius:9px;font-size:11.5px;
  white-space:nowrap;color:var(--ink);
  background:linear-gradient(160deg,var(--glass-a),var(--glass-b));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--stroke);box-shadow:var(--shadow-pop);
  opacity:0;pointer-events:none;transition:.2s var(--ease)}
.rail-btn:hover::before{opacity:1;transform:translateX(-50%) translateY(0)}
.rail-btn.on::after{content:"";position:absolute;left:50%;bottom:-4px;width:4px;height:4px;border-radius:50%;
  background:var(--ink);transform:translateX(-50%)}
.rail-btn.on{color:var(--ink);background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.06));
  box-shadow:inset 0 1px 0 var(--spec),0 6px 14px -8px rgba(0,0,0,.6)}
html[data-theme="light"] .rail-btn.on{background:linear-gradient(160deg,#fff,rgba(255,255,255,.7))}
.rail-sep{width:1px;height:22px;background:var(--stroke);margin:0 3px;opacity:.6;flex:0 0 auto}

/* ── 8. stage + window ──────────────────────────────────────── */
.stage{position:absolute;inset:var(--bar-h) 0 0 0;z-index:20;
  padding:14px 16px calc(var(--nav-h) + 4px) 16px;
  transition:padding .45s var(--ease)}
.win{height:100%;display:flex;flex-direction:column;min-height:0;border-radius:var(--r-win);
  overflow:hidden;overflow:clip;
  background:linear-gradient(155deg,var(--glass-a),var(--glass-b));
  -webkit-backdrop-filter:blur(var(--blur)) saturate(180%);backdrop-filter:blur(var(--blur)) saturate(180%);
  border:1px solid var(--stroke);box-shadow:var(--shadow-win);
  animation:winIn .7s var(--ease-out) both}
@keyframes winIn{from{opacity:0;transform:translateY(18px) scale(.985)}}
.win::before{content:"";position:absolute;inset:0;border-radius:var(--r-win);pointer-events:none;z-index:5;
  box-shadow:inset 0 1px 0 var(--spec),inset 0 0 0 1px rgba(255,255,255,.04)}
.win.is-jump{animation:jump .5s var(--ease)}
@keyframes jump{40%{transform:scale(.994)}}

.winbar{display:flex;align-items:center;gap:14px;height:52px;flex:0 0 auto;padding:0 14px;
  border-bottom:1px solid var(--stroke-2);background:linear-gradient(180deg,rgba(255,255,255,.06),transparent)}
html[data-theme="light"] .winbar{background:linear-gradient(180deg,rgba(255,255,255,.5),transparent)}
.lights{display:flex;gap:7px;flex:0 0 auto}
.lights b{width:11px;height:11px;border-radius:50%;display:block;transition:transform .2s}
.lights.sm b{width:8px;height:8px}
.l-r{background:#ff5f57;box-shadow:inset 0 1px 1px rgba(255,255,255,.4)}
.l-y{background:#ffbd2e;box-shadow:inset 0 1px 1px rgba(255,255,255,.4)}
.l-g{background:#28c840;box-shadow:inset 0 1px 1px rgba(255,255,255,.4)}
.lights b:hover{transform:scale(1.18)}
.winbar{position:relative}
.wt{display:flex;align-items:center;margin-left:4px;min-width:0;white-space:nowrap;
  font-size:12.5px;font-weight:640;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  padding:5px 12px;border-radius:10px;transition:background .2s,color .2s}
.wt:hover{background:var(--tile-2)}
/* a screen with no tab pill lets the title take the middle of the bar */
.win.no-tabs .wt{position:absolute;left:50%;transform:translateX(-50%);margin:0}
/* ...except the desktop, which does not need naming. A view pushed over it
   still does, so the title comes back as soon as the flow stack has anything. */
.win.title-off:not(.has-flow) .wt{display:none}
.win.has-flow .wt{position:static;transform:none;margin-left:4px}
.wt-tabs{display:flex;gap:2px;padding:3px;border-radius:11px;background:var(--sunk);border:1px solid var(--stroke-2);margin:0 auto}
.wt-tabs button{padding:4px 12px;border-radius:8px;font-size:12px;color:var(--ink-3);transition:.2s}
.wt-tabs button:hover{color:var(--ink-2)}
.wt-tabs button.on{color:var(--ink);background:var(--tile-2);box-shadow:0 1px 3px rgba(0,0,0,.2),inset 0 1px 0 var(--spec)}
.wt-act{display:flex;gap:8px;flex:0 0 auto;margin-left:auto}

/* ── 9. screens ─────────────────────────────────────────────── */
.screens{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;overflow:clip}
/* perf: no filter in the transition — an animated blur() cannot run on the
   compositor, so every frame re-rasterised the whole incoming screen. opacity
   + transform are both composited; the switch now costs two layers, not a
   repaint. contain isolates each screen's layout so one screen's first build
   never reflows its neighbours. */
.screen{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;
  contain:layout style;
  transform:translateY(10px);
  transition:opacity .18s var(--ease),transform .22s var(--ease),visibility .22s}
.screen.is-active{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.screen:not(.is-active) *{animation-play-state:paused}
.scroll{height:100%;overflow:auto;overscroll-behavior:contain;padding:14px 18px 14px;scrollbar-width:thin;
  scrollbar-color:var(--stroke) transparent}
.scroll.flat{padding:0}
.scroll::-webkit-scrollbar{width:9px;height:9px}
.scroll::-webkit-scrollbar-thumb{background:var(--stroke);border-radius:99px;border:3px solid transparent;background-clip:padding-box}
.scroll::-webkit-scrollbar-thumb:hover{background:var(--ink-3);background-clip:padding-box}
.scroll::-webkit-scrollbar-track{background:transparent}

.stagger>*{animation:rise .38s var(--ease-out) both}
.screen.is-active .stagger>*:nth-child(1){animation-delay:.02s}
.screen.is-active .stagger>*:nth-child(2){animation-delay:.05s}
.screen.is-active .stagger>*:nth-child(3){animation-delay:.08s}
.screen.is-active .stagger>*:nth-child(4){animation-delay:.11s}
.screen.is-active .stagger>*:nth-child(5){animation-delay:.14s}
.screen.is-active .stagger>*:nth-child(6){animation-delay:.17s}
.screen.is-active .stagger>*:nth-child(7){animation-delay:.19s}
.screen.is-active .stagger>*:nth-child(8){animation-delay:.21s}
.screen.is-active .stagger>*:nth-child(9){animation-delay:.23s}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.99)}}

/* ── 10. typography + controls ──────────────────────────────── */
h1{font-size:clamp(28px,3vw,42px);line-height:1.05;letter-spacing:-.035em;font-weight:640}
h1.xl{font-size:clamp(30px,3.4vw,46px)}
h2{font-size:clamp(23px,2.4vw,32px);line-height:1.1;letter-spacing:-.028em;font-weight:640}
h3{font-size:16px;letter-spacing:-.015em;font-weight:600}
.lead{color:var(--ink-2);font-size:14.5px;max-width:56ch}
.center{text-align:center;margin-inline:auto}
.tiny{font-size:11.5px;color:var(--ink-3)}
.eyebrow{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}

.prime-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:34px;padding:0 15px;border-radius:11px;
  font-size:13px;font-weight:560;color:#fff;letter-spacing:-.005em;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 88%,#fff 12%),color-mix(in srgb,var(--accent) 78%,#000 22%));
  box-shadow:0 8px 20px -10px color-mix(in srgb,var(--accent) 85%,transparent),inset 0 1px 0 rgba(255,255,255,.42);
  transition:transform .18s var(--ease),box-shadow .22s,filter .2s}
.prime-btn:hover{transform:translateY(-1.5px);filter:brightness(1.06);box-shadow:0 14px 28px -12px color-mix(in srgb,var(--accent) 90%,transparent),inset 0 1px 0 rgba(255,255,255,.5)}
.prime-btn:active{transform:translateY(0) scale(.985)}
.ghost-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:34px;padding:0 15px;border-radius:11px;
  font-size:13px;font-weight:520;color:var(--ink);background:var(--tile-2);border:1px solid var(--stroke);
  box-shadow:inset 0 1px 0 var(--spec);transition:transform .18s var(--ease),background .2s}
.ghost-btn:hover{transform:translateY(-1.5px);background:var(--tile-hover)}
.ghost-btn:active{transform:translateY(0) scale(.985)}
.lg{height:42px;padding:0 20px;font-size:14px;border-radius:13px}
.full{width:100%}

.chips{display:flex;gap:7px;flex-wrap:nowrap}
.chips.wrap{flex-wrap:wrap}
.chip{height:29px;padding:0 12px;border-radius:99px;font-size:12.5px;color:var(--ink-2);
  background:var(--tile);border:1px solid var(--stroke-2);transition:.2s;white-space:nowrap}
.chip:hover{background:var(--tile-hover);color:var(--ink);transform:translateY(-1px)}
.chip.on{color:var(--ink);background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.08));border-color:var(--stroke);box-shadow:inset 0 1px 0 var(--spec)}
html[data-theme="light"] .chip.on{background:#fff}

.seg{display:flex;gap:3px;padding:4px;border-radius:13px;background:var(--sunk);border:1px solid var(--stroke-2);flex:0 0 auto}
.seg button{padding:6px 14px;border-radius:10px;font-size:12.5px;color:var(--ink-3);transition:.2s;display:flex;gap:6px;align-items:center}
.seg button em{font-style:normal;font-size:10.5px;color:var(--accent-3)}
.seg button.on{color:var(--ink);background:var(--tile-2);box-shadow:0 2px 6px rgba(0,0,0,.22),inset 0 1px 0 var(--spec)}

.sw{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 10px;cursor:pointer;
  padding:9px 11px;border-radius:14px;background:var(--tile);border:1px solid var(--stroke-2);transition:background .2s}
.sw:hover{background:var(--tile-hover)}
.sw>span{font-size:13px;font-weight:520}
.sw>em{grid-column:1/2;font-style:normal;font-size:11px;color:var(--ink-3)}
.sw input{position:absolute;opacity:0;pointer-events:none}
.sw>i{grid-row:1/3;grid-column:2;width:40px;height:23px;border-radius:99px;background:var(--sunk);
  border:1px solid var(--stroke-2);position:relative;transition:background .28s var(--ease)}
.sw>i::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;
  background:linear-gradient(180deg,#fff,#dfe4ec);box-shadow:0 2px 5px rgba(0,0,0,.35);transition:transform .28s var(--ease)}
.sw input:checked+i{background:linear-gradient(180deg,color-mix(in srgb,var(--ok) 92%,#fff),color-mix(in srgb,var(--ok) 72%,#000));border-color:transparent}
.sw input:checked+i::after{transform:translateX(17px)}
.sw.row{grid-template-columns:1fr auto;padding:9px 12px}
.sw.row>i{grid-row:1}

.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:0 0 auto}
.dot.ok{background:var(--ok);box-shadow:0 0 8px color-mix(in srgb,var(--ok) 60%,transparent)}
.dot.warn{background:var(--warn);box-shadow:0 0 8px color-mix(in srgb,var(--warn) 60%,transparent)}
.dot.edge{background:var(--accent);box-shadow:0 0 8px color-mix(in srgb,var(--accent) 60%,transparent)}

/* ── 11. bento tiles ────────────────────────────────────────── */
.bento{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(92px,auto);gap:11px;min-height:100%}
.span-2{grid-column:span 2}.span-3{grid-column:span 3}.span-4{grid-column:span 4}
.span-5{grid-column:span 5}.span-6{grid-column:span 6}.span-7{grid-column:span 7}
.span-8{grid-column:span 8}.span-9{grid-column:span 9}.span-12{grid-column:1/-1}
.row-1{grid-row:span 1}.row-2{grid-row:span 2}
.tile{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0;overflow:hidden;
  padding:14px 16px;border-radius:var(--r-tile);background:var(--tile);border:1px solid var(--stroke-2);
  overflow:clip;
  box-shadow:inset 0 1px 0 var(--spec),0 10px 24px -20px rgba(0,0,0,.7);
  transition:background .3s,transform .35s var(--ease),box-shadow .35s}
.tile:hover{background:var(--tile-hover);transform:translateY(-2px);box-shadow:inset 0 1px 0 var(--spec),0 18px 34px -22px rgba(0,0,0,.8)}
.tile-h{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:0 0 auto}
.tile-h>span:first-child{font-size:12.5px;font-weight:600;letter-spacing:-.005em}
.tile-h em{font-style:normal;font-size:11px;color:var(--ink-3)}
.tile-lead{font-size:12.5px;color:var(--ink-2);line-height:1.45}
.pill-mini{font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;padding:2px 7px;border-radius:99px;
  color:var(--accent-2);background:color-mix(in srgb,var(--accent-2) 18%,transparent)}

/* hero tile */
.t-hero{flex-direction:row;align-items:center;gap:18px;padding:22px 26px;
  background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 16%,var(--tile)),var(--tile) 62%)}
.hero-copy{flex:1 1 auto;min-width:0}
.hero-copy p{color:var(--ink-2);font-size:13.5px;margin-top:10px;max-width:44ch}
.hero-cta{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.hero-art{flex:0 0 auto;width:min(38%,250px);aspect-ratio:1;display:grid;place-items:center}
.hero-art svg{width:100%;height:auto;animation:float 7s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-9px)}}

/* pulse tile */
.heart-wrap{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.heart{width:54px;height:54px;flex:0 0 auto;filter:drop-shadow(0 8px 18px rgba(255,84,112,.4));
  animation:beat var(--beat,1.1s) ease-in-out infinite}
.heart svg{width:100%;height:100%}
@keyframes beat{0%,100%{transform:scale(1)}12%{transform:scale(1.14)}24%{transform:scale(1)}36%{transform:scale(1.07)}48%{transform:scale(1)}}
.bpm b{display:block;font-size:26px;font-weight:640;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.bpm span{font-size:11px;color:var(--ink-3)}
.ecg{width:100%;height:36px;flex:0 0 auto}
.ecg polyline{fill:none;stroke:var(--accent-3);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent-3) 60%,transparent))}
.meters{display:flex;flex-direction:column;gap:7px;margin-top:auto}
.meter{display:grid;grid-template-columns:34px 1fr 38px;align-items:center;gap:8px;font-size:11px;color:var(--ink-3)}
.meter i{height:5px;border-radius:99px;background:var(--sunk);overflow:hidden;display:block}
.meter b{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .6s var(--ease)}
.meter em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-2)}

/* ai mini */
.prompt-mini{display:flex;align-items:center;gap:9px;padding:12px 13px;border-radius:14px;width:100%;text-align:left;
  background:var(--sunk);border:1px solid var(--stroke-2);color:var(--ink-2);font-size:12.5px;transition:.25s}
.prompt-mini:hover{border-color:color-mix(in srgb,var(--accent) 50%,transparent);background:var(--tile-2)}
.prompt-mini .i{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:var(--accent-2);stroke-width:1.6;stroke-linejoin:round}
.typewriter{min-height:1.4em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.typewriter::after{content:"";display:inline-block;width:1.5px;height:1em;background:var(--accent-2);
  vertical-align:-2px;margin-left:2px;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}

/* globe mini */
.globe-mini{flex:1 1 auto;min-height:0;display:grid;place-items:center;position:relative}
.globe-mini canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ping-row{display:flex;justify-content:space-between;gap:6px;font-size:10.5px;color:var(--ink-3);flex:0 0 auto}
.ping-row b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}

.switch-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:1 1 auto;min-height:0;align-content:center}

.finder{display:flex;gap:8px;align-items:center;padding:6px;border-radius:15px;background:var(--sunk);
  border:1px solid var(--stroke-2);margin-top:auto;transition:border-color .25s,box-shadow .25s}
.finder:focus-within{border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.finder input{flex:1 1 auto;min-width:0;padding:0 10px;height:32px;font-size:13.5px;background:none}
.finder input::placeholder{color:var(--ink-3)}
.finder select{height:32px;padding:0 8px;border-radius:9px;background:var(--tile-2);color:var(--ink);font-size:12.5px;border:1px solid var(--stroke-2)}
.finder select option{background:#12161f;color:#eef2f8}
html[data-theme="light"] .finder select option{background:#fff;color:#15181f}

.big-price{display:flex;align-items:baseline;gap:1px;letter-spacing:-.04em}
.big-price b{font-size:34px;font-weight:650}
.big-price s{text-decoration:none;font-size:19px;font-weight:600;opacity:.65}
.big-price em{font-style:normal;font-size:12px;color:var(--ink-3);margin-left:5px;letter-spacing:0}
.spark{margin-top:auto;height:34px}
.spark svg{width:100%;height:100%}
.spark polyline{fill:none;stroke:var(--ok);stroke-width:1.6;stroke-linejoin:round}

/* ── 12. hosting ────────────────────────────────────────────── */
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:10px;flex-wrap:wrap}
.head-copy .lead{font-size:13px;max-width:62ch}
.head-copy h2{margin-bottom:8px}
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.plan{position:relative;cursor:pointer;display:flex;flex-direction:column;gap:9px;padding:15px 17px;border-radius:20px;
  background:var(--tile);border:1px solid var(--stroke-2);box-shadow:inset 0 1px 0 var(--spec);
  transition:transform .4s var(--ease),box-shadow .4s,background .3s;transform-style:preserve-3d}
.plan:hover{background:var(--tile-hover);box-shadow:inset 0 1px 0 var(--spec),0 28px 50px -30px rgba(0,0,0,.8)}
.plan.is-best{background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 20%,var(--tile)),var(--tile) 60%);
  border-color:color-mix(in srgb,var(--accent) 40%,var(--stroke))}
.ribbon{position:absolute;top:16px;right:16px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 9px;border-radius:99px;background:var(--accent);color:#fff;box-shadow:0 6px 14px -6px var(--accent)}
.plan header{display:flex;flex-direction:column;gap:6px}
.plan-ico{width:38px;height:38px;margin-bottom:0}
.plan-ico svg{width:100%;height:100%}
.plan header p{font-size:12.5px;color:var(--ink-3)}
.plan-price{display:flex;align-items:baseline;gap:4px;letter-spacing:-.04em}
.plan-price b{font-size:34px;font-weight:650;font-variant-numeric:tabular-nums}
.plan-price em{font-style:normal;font-size:12.5px;color:var(--ink-3);letter-spacing:0}
.plan ul{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--ink-2);margin-bottom:4px}
.plan li{display:flex;align-items:center;gap:9px}
.plan li::before{content:"";width:15px;height:15px;border-radius:50%;flex:0 0 auto;
  background:color-mix(in srgb,var(--ok) 22%,transparent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.2 4.8 8.4 9.4 3.8' fill='none' stroke='%2348e08b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:contain}
.plan .full{margin-top:auto}
.mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:8px}
.mini{padding:11px 13px;border-radius:16px;background:var(--tile);border:1px solid var(--stroke-2);
  box-shadow:inset 0 1px 0 var(--spec);transition:background .25s,transform .3s var(--ease)}
.mini:hover{background:var(--tile-hover);transform:translateY(-2px)}
.mi{display:block;width:26px;height:26px;margin-bottom:7px}
.mi svg{width:100%;height:100%}
.mini b{display:block;font-size:13.5px;margin-bottom:5px}
.mini p{font-size:12px;color:var(--ink-3);line-height:1.5}

/* ── 13. vps ────────────────────────────────────────────────── */
.vps-wrap{display:grid;grid-template-columns:1fr 322px;grid-template-rows:auto auto minmax(0,1fr);gap:14px;
  height:100%;min-height:520px}
.dials{grid-column:1;grid-row:2;display:flex;align-items:center;justify-content:space-around;gap:14px;flex-wrap:wrap;
  padding:14px 16px;border-radius:24px;background:var(--tile);border:1px solid var(--stroke-2);box-shadow:inset 0 1px 0 var(--spec)}
.dial-box{display:flex;flex-direction:column;align-items:center;gap:10px}
.dial-cap{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.dial{position:relative;width:158px;height:158px;touch-action:none;cursor:grab;user-select:none}
.dial:active{cursor:grabbing}
.dial svg{width:100%;height:100%}
.dial .track{fill:none;stroke:var(--sunk);stroke-width:11;stroke-linecap:round}
.dial .prog{fill:none;stroke:url(#dialGrad);stroke-width:11;stroke-linecap:round;transition:stroke-dasharray .32s var(--ease)}
.dial .tick{stroke:var(--ink-3);stroke-width:1.4;stroke-linecap:round;opacity:.35}
.dial .tick.hot{stroke:var(--accent-3);opacity:.95}
.dial .knob{fill:#fff;filter:drop-shadow(0 2px 5px rgba(0,0,0,.5));transform-box:view-box;transform-origin:60px 60px;transition:transform .32s var(--ease)}
.dial-core{position:absolute;inset:30px;border-radius:50%;display:grid;place-content:center;justify-items:center;gap:1px;
  background:linear-gradient(160deg,var(--tile-2),var(--sunk));border:1px solid var(--stroke-2);
  box-shadow:inset 0 2px 10px rgba(0,0,0,.28),inset 0 1px 0 var(--spec)}
.dial-val{font-size:32px;font-weight:640;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1}
.dial-unit{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

.config{grid-column:2;grid-row:1/4;display:flex;flex-direction:column;gap:14px;padding:18px;border-radius:24px;
  background:var(--tile);border:1px solid var(--stroke-2);box-shadow:inset 0 1px 0 var(--spec)}
.cfg-block{display:flex;flex-direction:column;gap:8px}
.cfg-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.cfg-label em{font-style:normal;letter-spacing:.02em;text-transform:none;font-size:10.5px;opacity:.85}
.os-row{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.os{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border-radius:14px;
  background:var(--sunk);border:1px solid transparent;font-size:10.5px;color:var(--ink-3);transition:.22s}
.os i{width:26px;height:26px;display:block}
.os i svg{width:100%;height:100%}
.os:hover{background:var(--tile-2);color:var(--ink-2)}
.os.on{color:var(--ink);border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  background:color-mix(in srgb,var(--accent) 14%,var(--tile-2));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}
.cfg-total{margin-top:auto;display:flex;flex-direction:column;gap:9px;padding-top:14px;border-top:1px solid var(--stroke-2)}
.ct-sum{font-size:12px;color:var(--ink-3)}
.ct-price{display:flex;align-items:baseline;gap:5px;letter-spacing:-.04em}
.ct-price b{font-size:40px;font-weight:650;font-variant-numeric:tabular-nums}
.ct-price em{font-style:normal;font-size:13px;color:var(--ink-3);letter-spacing:0}

.term-wrap{grid-column:1;grid-row:3;min-height:0}
.term{height:100%;min-height:118px;border-radius:20px;overflow:hidden;display:flex;flex-direction:column;
  background:rgba(6,9,15,.72);border:1px solid var(--stroke-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.term-bar{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.07);
  font-size:11px;color:rgba(238,242,248,.5)}
.term pre{flex:1 1 auto;overflow:auto;margin:0;padding:12px 14px;font:12px/1.65 "SF Mono",ui-monospace,Menlo,Consolas,monospace;
  color:#9fe8c8;white-space:pre-wrap;word-break:break-word}
.term pre b{color:#8fd0ff;font-weight:400}
.term pre i{color:rgba(238,242,248,.42);font-style:normal}
.term pre u{color:#ffd67a;text-decoration:none}

/* ── 14. dedicated ──────────────────────────────────────────── */
.ded-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:24px;align-items:stretch;height:100%;min-height:420px}
.ded-left{padding-top:8px}
.ded-left h2{margin-bottom:10px}
.gauges{display:flex;gap:16px;margin-top:26px;flex-wrap:wrap}
.gauge{position:relative;width:118px;height:118px;display:grid;place-items:center}
.gauge svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.gauge .g-track{fill:none;stroke:var(--sunk);stroke-width:9}
.gauge .g-fill{fill:none;stroke:url(#gaugeGrad);stroke-width:9;stroke-linecap:round;transition:stroke-dasharray .8s var(--ease)}
.gauge span{display:grid;justify-items:center;line-height:1.1}
.gauge b{font-size:22px;font-weight:640;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.gauge em{font-style:normal;font-size:10px;color:var(--ink-3);letter-spacing:.05em}
.ded-right{display:flex;flex-direction:column;gap:13px}
.rack{display:flex;gap:16px;align-items:center;padding:16px;border-radius:20px;background:var(--tile);
  border:1px solid var(--stroke-2);box-shadow:inset 0 1px 0 var(--spec);transition:transform .35s var(--ease),background .3s}
.rack:hover{transform:translateY(-2px);background:var(--tile-hover)}
.rack-art{width:96px;flex:0 0 auto}
.rack-art svg{width:100%;height:auto}
.rack-body{min-width:0}
.rack-body p{font-size:12px;color:var(--ink-3);margin:6px 0 10px;line-height:1.5}
.rack-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11.5px;color:var(--ink-3)}
.rack-foot>span{display:flex;align-items:center;gap:7px}
.rack-foot b{font-size:19px;font-weight:640;color:var(--ink);letter-spacing:-.03em}
.rack-foot b em{font-style:normal;font-size:11px;color:var(--ink-3);font-weight:400;letter-spacing:0}

/* ── 15. domains ────────────────────────────────────────────── */
.dom-wrap{max-width:760px;margin:0 auto;padding-top:14px}
.dom-wrap h2{margin-bottom:22px}
.finder-xl{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px;border-radius:19px;
  background:var(--sunk);border:1px solid var(--stroke);box-shadow:inset 0 1px 0 var(--spec),0 16px 36px -22px rgba(0,0,0,.8);
  transition:border-color .25s,box-shadow .25s}
.finder-xl:focus-within{border-color:color-mix(in srgb,var(--accent) 60%,transparent);
  box-shadow:inset 0 1px 0 var(--spec),0 0 0 4px color-mix(in srgb,var(--accent) 15%,transparent)}
.finder-xl .i{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round}
.finder-xl input{flex:1 1 auto;min-width:0;height:38px;font-size:16px;letter-spacing:-.01em}
.finder-xl input::placeholder{color:var(--ink-3)}
.tld-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:16px 0 20px}
.tld{display:flex;align-items:center;gap:7px;padding:5px 11px;border-radius:99px;font-size:11.5px;color:var(--ink-3);
  background:var(--tile);border:1px solid var(--stroke-2)}
.tld b{color:var(--ink);font-weight:600}
.dom-results{display:flex;flex-direction:column;gap:8px;min-height:120px}
.dom-empty{padding:34px;text-align:center;font-size:12.5px;color:var(--ink-3);border:1px dashed var(--stroke);border-radius:18px}
.dres{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:15px;background:var(--tile);
  border:1px solid var(--stroke-2);animation:rise .45s var(--ease-out) both}
.dres b{font-size:14.5px;letter-spacing:-.01em}
.dres .tag{font-size:10px;letter-spacing:.09em;text-transform:uppercase;padding:3px 8px;border-radius:99px}
.dres.free .tag{background:color-mix(in srgb,var(--ok) 20%,transparent);color:var(--ok)}
.dres.taken{opacity:.55}
.dres.taken .tag{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.dres .price{margin-left:auto;font-size:13.5px;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.dres .prime-btn,.dres .ghost-btn{height:30px;padding:0 12px;font-size:12px;flex:0 0 auto}

/* ── 16. ai studio ──────────────────────────────────────────── */
.ai-wrap{max-width:880px;margin:0 auto;padding-top:8px;text-align:center}
.ai-wrap h1{margin-bottom:12px}
.ai-wrap .lead{margin-bottom:18px}
.prompt-xl{text-align:left;padding:12px;border-radius:22px;background:var(--sunk);border:1px solid var(--stroke);
  box-shadow:inset 0 1px 0 var(--spec),0 26px 50px -28px rgba(0,0,0,.85);transition:border-color .25s,box-shadow .25s}
.prompt-xl:focus-within{border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  box-shadow:inset 0 1px 0 var(--spec),0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent)}
.prompt-xl textarea{width:100%;resize:none;font-size:15.5px;line-height:1.6;padding:6px 6px 12px}
.prompt-xl textarea::placeholder{color:var(--ink-3)}
.prompt-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ai-stage{display:grid;grid-template-columns:230px 1fr;gap:18px;margin-top:16px;text-align:left;align-items:start}
.ai-steps{display:flex;flex-direction:column;gap:7px}
.ai-step{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:13px;font-size:12.5px;
  color:var(--ink-3);background:var(--tile);border:1px solid var(--stroke-2);opacity:.45;transition:.35s}
.ai-step.on{opacity:1;color:var(--ink)}
.ai-step.done{opacity:1;color:var(--ink-2)}
.ai-step i{width:16px;height:16px;border-radius:50%;border:1.5px solid currentColor;flex:0 0 auto;position:relative}
.ai-step.on i{border-color:var(--accent);border-top-color:transparent;animation:spin .8s linear infinite}
.ai-step.done i{border-color:var(--ok);background:var(--ok)}
.ai-step.done i::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.2 4.8 8.4 9.4 3.8' fill='none' stroke='%23081018' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat}
@keyframes spin{to{transform:rotate(360deg)}}
.mockwin{border-radius:16px;overflow:hidden;background:var(--sunk);border:1px solid var(--stroke-2);box-shadow:inset 0 1px 0 var(--spec)}
.mockbar{display:flex;align-items:center;gap:10px;padding:8px 11px;border-bottom:1px solid var(--stroke-2)}
.mockurl{font-size:10.5px;color:var(--ink-3);padding:3px 10px;border-radius:99px;background:var(--tile);flex:1 1 auto;text-align:center}
.mockbody{padding:12px;display:flex;flex-direction:column;gap:9px}
.mk{border-radius:8px;background:var(--tile-2);opacity:.5;transition:opacity .5s,background .5s}
.mk-nav{height:16px}
.mk-hero{height:74px;background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 40%,transparent),color-mix(in srgb,var(--accent-2) 34%,transparent))}
.mk-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.mk-card{height:44px}
.mk-band{height:24px}
.mockwin.is-live .mk{opacity:1}
.mockwin.is-live{box-shadow:inset 0 1px 0 var(--spec),0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent),0 22px 44px -26px var(--accent)}

/* ── 17. network ────────────────────────────────────────────── */
.net-split{display:grid;grid-template-columns:minmax(0,1fr) 306px;height:100%;min-height:0}
.net-globe{position:relative;min-height:0}
.net-globe canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair}
.net-legend{position:absolute;left:20px;bottom:18px;display:flex;gap:14px;font-size:11px;color:var(--ink-3)}
.net-legend span{display:flex;align-items:center;gap:6px}
.net-side .scroll{flex:1 1 auto;min-height:0}
.net-side{display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--stroke-2);padding:18px 16px;gap:14px}
.net-card{padding:16px;border-radius:18px;background:var(--tile);border:1px solid var(--stroke-2);box-shadow:inset 0 1px 0 var(--spec);flex:0 0 auto}
.net-card h3{font-size:20px;letter-spacing:-.025em;margin-bottom:5px}
.net-card p{font-size:11.5px;color:var(--ink-3)}
.net-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.net-stats div{padding:10px;border-radius:12px;background:var(--sunk)}
.net-stats b{display:block;font-size:22px;font-weight:640;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.net-stats em{font-style:normal;font-size:10px;color:var(--ink-3)}
.loc-list{display:flex;flex-direction:column;gap:5px;padding:0 0 8px}
.loc{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:13px;font-size:12.5px;
  background:transparent;border:1px solid transparent;cursor:pointer;transition:.2s;width:100%;text-align:left}
.loc:hover{background:var(--tile)}
.loc.on{background:var(--tile-2);border-color:var(--stroke-2);box-shadow:inset 0 1px 0 var(--spec)}
.loc .flag{font-size:15px;line-height:1;flex:0 0 auto}
.loc .lname{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:520}
.loc .ms{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums;flex:0 0 auto}
.loc-head{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);padding:12px 12px 5px}
.loc-head:first-child{padding-top:2px}
.net-card.flash{animation:cardFlash .55s var(--ease)}
@keyframes cardFlash{from{box-shadow:inset 0 1px 0 var(--spec),0 0 0 3px color-mix(in srgb,var(--accent) 34%,transparent)}}
.net-globe canvas{touch-action:none}

/* ── 18. console ────────────────────────────────────────────── */
.svc{display:flex;flex-direction:column;gap:6px;overflow:auto;min-height:0}
.svc li{display:grid;grid-template-columns:auto 150px 1fr auto;align-items:center;gap:12px;padding:12px 13px;
  border-radius:13px;background:var(--sunk);font-size:12.5px}
.svc b{font-weight:600}
.svc span{color:var(--ink-3);font-size:11.5px}
.svc em{font-style:normal;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.usage-rings{display:flex;gap:12px;margin-top:auto;justify-content:space-between}
.ring{position:relative;width:62px;height:62px;display:grid;place-items:center;text-align:center}
.ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring .r-track{fill:none;stroke:var(--sunk);stroke-width:6}
.ring .r-fill{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round}
.ring span{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.ring em{position:absolute;bottom:-16px;font-style:normal;font-size:10px;color:var(--ink-3)}
.usage-rings{padding-bottom:18px}
.qa{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:auto}
.qa-btn{display:flex;align-items:center;gap:9px;padding:11px 12px;border-radius:13px;font-size:12.5px;
  background:var(--sunk);border:1px solid var(--stroke-2);color:var(--ink-2);transition:.2s}
.qa-btn:hover{background:var(--tile-2);color:var(--ink);transform:translateY(-1px)}
.qa-btn i{width:22px;height:22px;flex:0 0 auto}
.qa-btn i svg{width:100%;height:100%}

/* ── 19. app icon families (spotlight rows; the dock itself is gone) ── */
.di-home{background:linear-gradient(160deg,#7fb2ff,#3f6cff)}
.di-host{background:linear-gradient(160deg,#8ad8ff,#2f9ce0)}
.di-vps{background:linear-gradient(160deg,#a99bff,#6d4bff)}
.di-ded{background:linear-gradient(160deg,#9ea9bd,#4b5670)}
.di-dom{background:linear-gradient(160deg,#6fe3c4,#17a882)}
.di-ai{background:linear-gradient(160deg,#ffa8d8,#a24bff)}
.di-net{background:linear-gradient(160deg,#7fd2ff,#2f6fd0)}
.di-con{background:linear-gradient(160deg,#ffce7a,#f08a2e)}
.di-app{background:linear-gradient(160deg,#ffd08a,#f0742e)}
.di-set{background:linear-gradient(160deg,#c6cedd,#6a7488)}
/* the two panel apps — same swatch family as the rest of the dock index */
.di-cc{background:linear-gradient(160deg,#8fd0ff,#3f7fe0)}
.di-ad{background:linear-gradient(160deg,#b9a4ff,#6d4fd0)}

/* immersive mode */
.desk.immersive .rail{transform:translateX(-50%) translateY(120px);opacity:0;pointer-events:none}
.desk.immersive .stage{padding:8px}

/* ── 20. spotlight ──────────────────────────────────────────── */
.spot{position:fixed;inset:0;z-index:120;display:grid;place-items:start center;padding-top:16vh;
  background:rgba(4,6,12,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:fade .22s var(--ease)}
html[data-theme="light"] .spot{background:rgba(238,235,229,.66)}
.spot[hidden]{display:none}
@keyframes fade{from{opacity:0}}
.spot-card{width:min(560px,92vw);border-radius:20px;overflow:hidden;
  background:linear-gradient(160deg,var(--glass-a),var(--glass-b));
  -webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);
  border:1px solid var(--stroke);box-shadow:var(--shadow-win);animation:spotIn .3s var(--ease-out) both}
@keyframes spotIn{from{opacity:0;transform:translateY(-12px) scale(.97)}}
.spot-in{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--stroke-2)}
.spot-in .i{width:17px;height:17px;fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round}
.spot-in input{flex:1 1 auto;font-size:16px}
.spot-in kbd{font:inherit;font-size:10px;color:var(--ink-3);border:1px solid var(--stroke-2);border-radius:6px;padding:2px 6px}
.spot-list{max-height:46vh;overflow:auto;padding:7px}
.spot-list li{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;font-size:13.5px;cursor:pointer}
.spot-list li em{font-style:normal;font-size:11.5px;color:var(--ink-3);margin-left:auto}
.spot-list li.on,.spot-list li:hover{background:var(--tile-2)}
.spot-list .sico{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto}
.spot-list .sico svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ── 21. toasts ─────────────────────────────────────────────── */
.toasts{position:fixed;right:16px;top:calc(var(--bar-h) + 12px);z-index:130;display:flex;flex-direction:column;gap:9px;pointer-events:none}
.toast{display:flex;align-items:flex-start;gap:11px;width:302px;padding:13px 14px;border-radius:16px;
  background:linear-gradient(160deg,var(--glass-a),var(--glass-b));
  -webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);
  border:1px solid var(--stroke);box-shadow:var(--shadow-pop);animation:toastIn .4s var(--ease-out) both}
.toast.out{animation:toastOut .34s var(--ease) forwards}
@keyframes toastIn{from{opacity:0;transform:translateX(28px) scale(.96)}}
@keyframes toastOut{to{opacity:0;transform:translateX(28px) scale(.96)}}
.toast .tico{width:30px;height:30px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(160deg,#7fb2ff,#3f6cff);color:#fff;font-size:14px}
.toast b{display:block;font-size:12.5px;margin-bottom:2px}
.toast p{font-size:11.5px;color:var(--ink-3);line-height:1.45}

/* ── 22. responsive ─────────────────────────────────────────── */
@media (max-width:1180px){
  .mini-grid{grid-template-columns:repeat(2,1fr)}
  .vps-wrap{grid-template-columns:1fr;grid-template-rows:auto auto auto}
  .vps-plans,.dials,.config,.term-wrap{grid-column:1;grid-row:auto}
  .vps-wrap{height:auto;grid-template-rows:none}
  .ded-wrap{grid-template-columns:1fr}
  .net-split{grid-template-columns:1fr 264px}
  .ai-stage{grid-template-columns:1fr}
}
@media (max-width:900px){
  .stage{padding:10px 10px calc(var(--nav-h) - 2px) 10px}
  .mb-item,.mb-region,.mb-live{display:none}
  .wt-tabs{display:none}
  .wt-act .ghost-btn{display:none}
  .bento{grid-auto-rows:minmax(104px,auto)}
  .span-2,.span-3,.span-4{grid-column:span 6}
  .span-5,.span-6,.span-7,.span-8,.span-9{grid-column:span 12}
  .t-hero{flex-direction:column;align-items:flex-start;text-align:left}
  .hero-art{width:min(60%,190px);align-self:center}
  .plan-grid{grid-template-columns:1fr}
  .net-split{grid-template-columns:1fr;grid-template-rows:minmax(190px,1fr) minmax(230px,auto)}
  .net-side{border-left:0;border-top:1px solid var(--stroke-2);max-height:none;padding:12px}
  .net-side .scroll{min-height:110px}
  .dials{gap:8px}
  .dial{width:132px;height:132px}
  .dial-core{inset:24px}
  .dial-val{font-size:24px}
  .svc li{grid-template-columns:auto 1fr auto}
  .svc li span{display:none}
}
@media (max-width:620px){
  /* no hover on a phone, so the tooltip has nothing to lose and the bar can scroll */
  .rail{gap:3px;padding:6px 7px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
  .rail-btn{width:36px;height:36px}
  .switch-grid{grid-template-columns:1fr}
  .os-row{grid-template-columns:repeat(2,1fr)}
  .usage-rings{flex-wrap:wrap}
}

/* ══════════════════════════════════════════════════════════════
   24. build 1.1 — wallpapers, catalogue surfaces, account, settings
   Appended, not rewritten: every selector above still applies.
   ══════════════════════════════════════════════════════════════ */

/* ── 24.1 wallpapers ────────────────────────────────────────── */
/* perf: opacity:0 alone does NOT stop the work — a transparent layer with a
   live filter and an infinite transform animation is still rasterised and
   blurred every frame. Measured: on the default "shore" wallpaper the four
   aurora blobs were costing 1.9 viewports of blur(110px) that nobody could
   see. visibility:hidden takes them out of paint; the pause stops the
   animation driving invalidations. visibility is added to the transition so
   the .9s cross-fade between wallpapers still reads. */
.wall > .blob,.wall .shore{transition:opacity .9s var(--ease),visibility .9s}
.wall[data-wall="shore"] > .blob{opacity:0;visibility:hidden;animation-play-state:paused}
.wall[data-wall="aurora"] .shore{opacity:0;visibility:hidden}
.wall[data-wall="graphite"] > .blob{opacity:0;visibility:hidden;animation-play-state:paused}
.wall[data-wall="graphite"] .shore{opacity:0;visibility:hidden}
.wall[data-wall="graphite"]{background:radial-gradient(120% 90% at 22% 8%,#243044,#0a0e17 58%,#05070d)}
html[data-theme="light"] .wall[data-wall="graphite"]{background:radial-gradient(120% 90% at 22% 8%,#f4f1ec,#ddd8d0 58%,#cdc7bd)}

.shore{position:absolute;inset:0;overflow:hidden;overflow:clip}
.shore > span{position:absolute;inset:-32%;display:block}
.shore .sea{
  background:linear-gradient(107deg,
    #01213b 0%, #032f52 7%, #04486a 14%, #056881 21%,
    #078a97 27%, #12a8a5 32%, #37c6b6 36.5%, #6bdcc9 40.5%,
    #a6ecdd 44%, #d8f6ec 47.5%, #f4fbf4 50%, #fdf8ea 52%,
    #f3e2c3 55%, #ead2a8 62%, #e0c496 72%, #d3b280 86%, #c7a26d 100%)}
/* perf: the softness that used to come from filter:blur() on five layers the
   size of 4 viewports each is baked into the gradients themselves — wider
   colour stops read the same, cost nothing per frame, and stop forcing the
   window's backdrop-filter to re-sample a filtered stack. */
.shore .ripple{
  background:repeating-linear-gradient(107deg,rgba(255,255,255,0) 0 9px,rgba(255,255,255,.05) 9px 11px);
  -webkit-mask-image:linear-gradient(107deg,#000 0 42%,transparent 50%);
  mask-image:linear-gradient(107deg,#000 0 42%,transparent 50%)}
.shore .foam{background:linear-gradient(107deg,transparent 44.5%,rgba(255,255,255,.92) 49.6%,transparent 54.4%)}
.shore .f1{background:linear-gradient(107deg,transparent 43%,rgba(255,255,255,.92) 49.6%,transparent 56.5%);opacity:.6}
.shore .f2{background:linear-gradient(107deg,transparent 39.5%,rgba(255,255,255,.9) 49.6%,transparent 60%);opacity:.34;transform:rotate(.7deg) translateY(1.6%)}
.shore .f3{opacity:.42;transform:rotate(-.55deg) translateY(-1.2%)}
.shore .sand{
  background:
    repeating-linear-gradient(101deg,rgba(255,255,255,.05) 0 22px,rgba(150,110,60,.05) 22px 46px),
    radial-gradient(60% 40% at 82% 82%,rgba(255,240,205,.4),transparent 70%);
  -webkit-mask-image:linear-gradient(107deg,transparent 52%,#000 62%);
  mask-image:linear-gradient(107deg,transparent 52%,#000 62%)}
.shore .grain{opacity:.08;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23s)'/%3E%3C/svg%3E")}
.shore::after{content:"";position:absolute;inset:0;
  background:radial-gradient(90% 70% at 78% 88%,rgba(255,196,120,.18),transparent 60%)}
/* perf: the dark treatment used to be filter:saturate/brightness/contrast on
   the whole 5-layer stack — a permanent per-frame re-filter. The same night
   read now comes from a flat dark wash on the overlay, which composites once. */
html[data-theme="dark"] .shore::after{
  background:linear-gradient(107deg,rgba(2,6,16,.78),rgba(3,7,18,.58) 45%,rgba(26,14,8,.62))}

/* ── 24.2 shared bits ───────────────────────────────────────── */
.grad{background:linear-gradient(96deg,var(--accent),var(--accent-2) 52%,var(--accent-3));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.tile[data-go]{cursor:pointer}
.text-btn{font-size:12.5px;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px;padding:0 4px}
.text-btn:hover{color:var(--ink)}
.split-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:22px 0 10px}
.split-head h3{font-size:15px}
.cat-bar{display:flex;gap:6px;padding:4px;border-radius:14px;background:var(--sunk);border:1px solid var(--stroke-2);
  overflow-x:auto;scrollbar-width:none;max-width:100%}
.cat-bar::-webkit-scrollbar{display:none}
.cat-bar.center-bar{justify-content:center;margin:0 auto 14px;width:fit-content;max-width:100%}
.cat{display:flex;flex-direction:column;gap:1px;padding:7px 13px;border-radius:10px;white-space:nowrap;
  font-size:12.5px;color:var(--ink-3);transition:.2s}
.cat em{font-style:normal;font-size:10px;opacity:.7}
.cat:hover{color:var(--ink-2);background:var(--tile)}
.cat.on{color:var(--ink);background:var(--tile-2);box-shadow:0 2px 6px rgba(0,0,0,.22),inset 0 1px 0 var(--spec)}

/* ── 24.3 hosting plan grid ─────────────────────────────────── */
.plan-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.plan-grid.count-1{grid-template-columns:minmax(0,420px);justify-content:center}
.plan-grid.count-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.plan-grid.count-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.save-badge{position:absolute;top:16px;right:16px;font-size:10px;letter-spacing:.08em;padding:3px 8px;border-radius:99px;
  background:color-mix(in srgb,var(--ok) 20%,transparent);color:var(--ok)}
.plan.is-best .save-badge{top:44px}
.plan-old{font-size:12px;color:var(--ink-3);text-decoration:line-through;margin-left:6px}
.plan-renew{font-size:10.5px;color:var(--ink-3);margin-top:-6px}
.plan-note{grid-column:1/-1;font-size:10.5px;color:var(--ink-3);text-align:center;margin-top:2px}

/* ── 24.4 vps plan rail ─────────────────────────────────────── */
.vps-plans{grid-column:1;grid-row:1;display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.vplan{position:relative;text-align:left;padding:10px 12px;border-radius:14px;background:var(--tile);
  border:1px solid var(--stroke-2);box-shadow:inset 0 1px 0 var(--spec);transition:.22s}
.vplan:hover{background:var(--tile-hover);transform:translateY(-2px)}
.vplan.on{border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  background:color-mix(in srgb,var(--accent) 12%,var(--tile));
  box-shadow:inset 0 1px 0 var(--spec),0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent)}
.vplan b{display:block;font-size:13px;margin-bottom:3px}
.vplan .spec{font-size:11px;color:var(--ink-3);line-height:1.45}
.vplan .pr{margin-top:8px;font-size:16px;font-weight:640;letter-spacing:-.02em}
.vplan .pr em{font-style:normal;font-size:10.5px;color:var(--ink-3);font-weight:400}

/* ── 24.5 metal (vds + dedicated) ───────────────────────────── */
.ded-right{display:flex;flex-direction:column;gap:10px;min-height:0}
.metal-list{display:flex;flex-direction:column;gap:8px;overflow:auto;min-height:0;padding-right:4px;
  scrollbar-width:thin;scrollbar-color:var(--stroke) transparent}
.metal-list::-webkit-scrollbar{width:8px}
.metal-list::-webkit-scrollbar-thumb{background:var(--stroke);border-radius:99px;border:2px solid transparent;background-clip:padding-box}
.metal{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:11px 14px;
  border-radius:16px;background:var(--tile);border:1px solid var(--stroke-2);
  box-shadow:inset 0 1px 0 var(--spec);transition:.25s;animation:rise .45s var(--ease-out) both}
.metal:hover{background:var(--tile-hover);transform:translateX(2px)}
.metal .m-art{width:44px;flex:0 0 auto}
.metal .m-art svg{width:100%;height:auto}
.metal b{font-size:13.5px;letter-spacing:-.01em}
.metal .m-spec{font-size:11.5px;color:var(--ink-3);margin-top:3px;line-height:1.45}
.metal .m-price{text-align:right;white-space:nowrap}
.metal .m-price b{display:block;font-size:18px;font-weight:640;letter-spacing:-.03em}
.metal .m-price s{font-size:10.5px;color:var(--ink-3);text-decoration:line-through}
.gauge-note{margin-top:16px;margin-bottom:12px;max-width:44ch}

/* ── 24.6 studio ────────────────────────────────────────────── */
.studio-sep{margin:34px 0 16px;padding-top:26px;border-top:1px solid var(--stroke-2)}
.studio-sep h2{margin-bottom:8px}
.studio-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));text-align:left}
.pkg{position:relative;display:flex;flex-direction:column;gap:9px;padding:16px 17px;border-radius:18px;
  background:var(--tile);border:1px solid var(--stroke-2);box-shadow:inset 0 1px 0 var(--spec);
  transition:.28s;animation:rise .45s var(--ease-out) both}
.pkg:hover{background:var(--tile-hover);transform:translateY(-2px)}
.pkg.is-best{background:linear-gradient(160deg,color-mix(in srgb,var(--accent-2) 16%,var(--tile)),var(--tile) 60%);
  border-color:color-mix(in srgb,var(--accent-2) 34%,var(--stroke))}
.pkg .tag{font-size:9.5px;letter-spacing:.12em;color:var(--accent-2)}
.pkg h4{font-size:14.5px;letter-spacing:-.015em;font-weight:620}
.pkg .pk-price{display:flex;align-items:baseline;gap:4px;letter-spacing:-.03em}
.pkg .pk-price b{font-size:25px;font-weight:640}
.pkg .pk-price em{font-style:normal;font-size:11px;color:var(--ink-3);letter-spacing:0}
.pkg .pk-line{font-size:12px;color:var(--ink-2);line-height:1.45}
.pkg ul{display:flex;flex-direction:column;gap:5px;font-size:11.5px;color:var(--ink-3)}
.pkg li{display:flex;gap:7px;align-items:flex-start}
.pkg li::before{content:"";width:12px;height:12px;margin-top:3px;flex:0 0 auto;border-radius:50%;
  background:color-mix(in srgb,var(--ok) 22%,transparent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.2 4.8 8.4 9.4 3.8' fill='none' stroke='%2348e08b' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:contain}
.pkg .pk-meta{margin-top:auto;font-size:10.5px;color:var(--ink-3);padding-top:6px;border-top:1px solid var(--stroke-2)}

/* ── 24.7 licences ──────────────────────────────────────────── */
.lic-grid{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.lic{position:relative;display:flex;flex-direction:column;gap:7px;padding:15px 16px;border-radius:17px;
  background:var(--tile);border:1px solid var(--stroke-2);box-shadow:inset 0 1px 0 var(--spec);
  transition:.26s;animation:rise .45s var(--ease-out) both}
.lic:hover{background:var(--tile-hover);transform:translateY(-2px)}
.lic.is-best{border-color:color-mix(in srgb,var(--accent) 42%,var(--stroke))}
.lic .vendor{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.lic h4{font-size:14px;font-weight:620;letter-spacing:-.015em}
.lic .cov{font-size:11.5px;color:var(--ink-2)}
.lic .blurb{font-size:11.5px;color:var(--ink-3);line-height:1.45}
.lic .lic-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:auto;padding-top:8px}
.lic .lic-price b{font-size:19px;font-weight:640;letter-spacing:-.03em}
.lic .lic-price em{font-style:normal;font-size:10.5px;color:var(--ink-3)}
.lic .lic-price s{display:block;font-size:10px;color:var(--ink-3);text-decoration:line-through}
.addon-rail{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(196px,1fr))}
.addon{display:flex;gap:11px;align-items:flex-start;padding:13px 14px;border-radius:15px;background:var(--sunk);
  border:1px solid var(--stroke-2);transition:.22s}
.addon:hover{background:var(--tile-2)}
.addon .a-ico{width:28px;height:28px;flex:0 0 auto}
.addon .a-ico svg{width:100%;height:100%}
.addon b{display:block;font-size:12.5px}
.addon .a-price{font-size:11.5px;color:var(--accent-3);font-weight:560}
.addon p{font-size:11px;color:var(--ink-3);line-height:1.45;margin-top:3px}
/* the rows are products now, not a read-only list */
.addon .a-body{flex:1 1 auto;min-width:0}
.addon .a-add{flex:0 0 auto;align-self:center;height:30px;padding:0 13px;font-size:12px}
@media (max-width:560px){
  .addon{flex-wrap:wrap}
  .addon .a-add{width:100%;align-self:stretch;margin-top:2px}
}
/* a package card is a door now, not a poster */
.pkg{cursor:pointer}
.pkg .pk-cta{margin-top:12px;height:36px;font-size:12.5px}
.pkg:hover{border-color:color-mix(in srgb,var(--accent) 34%,var(--stroke-2))}
.usecase-note{margin-top:22px;padding:16px 18px;border-radius:18px;background:var(--tile);
  border:1px dashed var(--stroke);font-size:12.5px;color:var(--ink-2);line-height:1.6}
.usecase-note b{color:var(--ink)}
.usecase-note .chips{margin-top:10px;flex-wrap:wrap}

/* ── 24.8 account ───────────────────────────────────────────── */
.ca-title{font-size:19px;letter-spacing:-.025em;line-height:1.2}
.ca-btns{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gate-box{margin-top:auto;padding:11px 12px;border-radius:15px;background:var(--sunk);border:1px solid var(--stroke-2)}
.gate-list{display:flex;gap:7px;flex-wrap:wrap;margin:8px 0 7px}
.gate-list li{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;font-size:11.5px;
  background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ink-2)}
.gate-list li::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--ok);flex:0 0 auto}
.twofa{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--ink-3);padding-top:2px}
.twofa b{color:var(--ink-2)}
.order-note{display:flex;align-items:baseline;gap:9px;padding:10px 12px;border-radius:13px;
  background:color-mix(in srgb,var(--accent-3) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent-3) 26%,transparent)}
.order-note b{font-size:12.5px;letter-spacing:.06em;color:var(--accent-3)}
.checkout-mock{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.tick-list{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--ink-2)}
.tick-list.sm{font-size:11.5px;color:var(--ink-3)}
.tick-list li{display:flex;gap:8px;align-items:flex-start}
.tick-list li::before{content:"";width:13px;height:13px;margin-top:2px;flex:0 0 auto;border-radius:4px;
  background:color-mix(in srgb,var(--accent) 22%,transparent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.2 4.8 8.4 9.4 3.8' fill='none' stroke='%235aa9ff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:contain}
.pill-mini.free{color:var(--ok);background:color-mix(in srgb,var(--ok) 18%,transparent)}
.path{display:inline-block;font:12px ui-monospace,Menlo,Consolas,monospace;padding:4px 9px;border-radius:8px;
  background:var(--sunk);color:var(--ink-2);border:1px solid var(--stroke-2)}
.route-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:6px;overflow:auto;min-height:0}
.route{display:flex;flex-direction:column;gap:1px;padding:7px 10px;border-radius:12px;background:var(--sunk);
  border:1px solid var(--stroke-2);text-align:left;transition:.2s}
.route:hover{background:var(--tile-2);transform:translateY(-1px)}
.route b{font-size:12px;font-weight:560}
.route code{font:10.5px ui-monospace,Menlo,Consolas,monospace;color:var(--ink-3)}
.mod-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(166px,1fr));gap:7px;overflow:auto;min-height:0}
.mod{display:flex;flex-direction:column;gap:3px;padding:9px 11px;border-radius:13px;background:var(--sunk);
  border:1px solid var(--stroke-2);text-align:left;transition:.2s}
.mod:hover{background:var(--tile-2);transform:translateY(-1px)}
.mod b{font-size:12.5px}
.mod p{font-size:10.5px;color:var(--ink-3);line-height:1.45}

/* ── 24.9 settings ──────────────────────────────────────────── */
.set-wrap{max-width:1080px;margin:0 auto}
.set-block{margin-bottom:6px}
.set-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.legal-grid{display:grid;gap:9px;grid-template-columns:repeat(auto-fill,minmax(206px,1fr))}
.legal-card{display:flex;flex-direction:column;gap:5px;padding:13px 14px;border-radius:15px;text-align:left;
  background:var(--tile);border:1px solid var(--stroke-2);box-shadow:inset 0 1px 0 var(--spec);transition:.24s}
.legal-card:hover{background:var(--tile-hover);transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--accent) 34%,var(--stroke))}
.legal-card .lc-eyebrow{font-size:9px;letter-spacing:.14em;color:var(--ink-3)}
.legal-card b{font-size:12.5px;letter-spacing:-.01em}
.legal-card code{font:10px ui-monospace,Menlo,Consolas,monospace;color:var(--ink-3);margin-top:auto;padding-top:5px}
.id-card,.contact-card{padding:16px 17px;border-radius:17px;background:var(--tile);border:1px solid var(--stroke-2);
  box-shadow:inset 0 1px 0 var(--spec);font-size:12.5px;line-height:1.7}
.id-card dl{display:grid;grid-template-columns:auto 1fr;gap:5px 14px}
.id-card dt{color:var(--ink-3);font-size:11.5px}
.id-card dd{color:var(--ink)}
.contact-card .c-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.contact-card .c-btn{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:11px;font-size:12.5px;
  background:var(--sunk);border:1px solid var(--stroke-2);color:var(--ink-2);transition:.2s}
.contact-card .c-btn:hover{background:var(--tile-2);color:var(--ink);transform:translateY(-1px)}
.contact-card p{font-size:11.5px;color:var(--ink-3);line-height:1.6}
.wall-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px}
.wp{position:relative;height:86px;border-radius:15px;overflow:hidden;border:1px solid var(--stroke-2);
  box-shadow:inset 0 1px 0 var(--spec);transition:.24s}
.wp:hover{transform:translateY(-2px)}
.wp.on{border-color:color-mix(in srgb,var(--accent) 62%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.wp span{position:absolute;left:10px;bottom:8px;font-size:11.5px;font-weight:560;color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.6);z-index:2}
.wp i{position:absolute;inset:0;display:block}
.wp-shore i{background:linear-gradient(107deg,#01213b 0%,#056881 22%,#37c6b6 36%,#d8f6ec 47%,#fdf8ea 52%,#ead2a8 64%,#c7a26d 100%)}
.wp-aurora i{background:radial-gradient(60% 80% at 20% 20%,#2a3ea8,transparent 70%),radial-gradient(60% 80% at 85% 15%,#7d2f9e,transparent 70%),radial-gradient(70% 80% at 70% 95%,#0e6f8c,transparent 70%),#111a33}
.wp-graphite i{background:radial-gradient(120% 90% at 22% 8%,#243044,#0a0e17 60%)}
.pay-row{display:flex;flex-wrap:wrap;gap:7px}
.pay{padding:6px 12px;border-radius:9px;font-size:11.5px;color:var(--ink-2);background:var(--sunk);
  border:1px solid var(--stroke-2)}
.sitemap{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.sitemap h4{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.sitemap ul{display:flex;flex-direction:column;gap:5px}
.sitemap a{font-size:12.5px;color:var(--ink-2);text-decoration:none;transition:.18s;cursor:pointer;display:block}
.sitemap a:hover{color:var(--ink);transform:translateX(2px)}
.sitemap code{font:10px ui-monospace,Menlo,Consolas,monospace;color:var(--ink-3);opacity:0;transition:.18s}
.sitemap li:hover code{opacity:1}

.doc-reader{position:absolute;inset:0;z-index:12;display:grid;place-items:center;padding:26px;
  background:rgba(4,7,14,.74);-webkit-backdrop-filter:blur(10px) saturate(120%);
  backdrop-filter:blur(10px) saturate(120%);animation:fade .24s var(--ease)}
html[data-theme="light"] .doc-reader{background:rgba(242,240,235,.8)}
.doc-reader[hidden]{display:none}
.doc-card{position:relative;width:min(620px,100%);max-height:100%;overflow:auto;padding:28px 30px;border-radius:24px;
  background:linear-gradient(155deg,var(--glass-a),var(--glass-b));
  -webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);
  border:1px solid var(--stroke);box-shadow:var(--shadow-win);animation:spotIn .34s var(--ease-out) both}
.doc-card h2{margin:4px 0 12px}
.doc-close{position:absolute;top:16px;right:18px;width:28px;height:28px;border-radius:9px;color:var(--ink-3);
  font-size:13px;transition:.2s}
.doc-close:hover{background:var(--tile-2);color:var(--ink)}
.doc-meta{display:flex;flex-direction:column;gap:7px;margin:18px 0;padding:14px 15px;border-radius:15px;
  background:var(--sunk);border:1px solid var(--stroke-2);font-size:12px;color:var(--ink-3)}
.doc-meta span b{color:var(--ink-2);font-weight:560}
.doc-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ── 24.10 network extras ───────────────────────────────────── */
.net-hint{position:absolute;right:18px;bottom:18px;font-size:10.5px;letter-spacing:.06em;color:var(--ink-3);
  padding:5px 11px;border-radius:99px;background:var(--tile);border:1px solid var(--stroke-2)}
.loc.planned .lname{color:var(--ink-3)}
.loc .kind{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);flex:0 0 auto}

/* ── 24.12 responsive additions ─────────────────────────────── */
@media (max-width:1180px){
  .vps-plans{grid-template-columns:repeat(2,1fr)}
  .set-cols{grid-template-columns:1fr}
}
@media (max-width:900px){
  .plan-grid,.plan-grid.count-2,.plan-grid.count-3{grid-template-columns:1fr}
  .plan-grid.count-4{grid-template-columns:1fr}
  .vps-plans{grid-template-columns:1fr}
  .metal{grid-template-columns:1fr auto}
  .metal .m-art{display:none}
  .legal-grid{grid-template-columns:1fr 1fr}
  .doc-card{padding:22px}
}
@media (max-width:620px){
  .legal-grid{grid-template-columns:1fr}
  .studio-grid,.lic-grid,.addon-rail{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════
   25. build 1.2 — in-window navigation, order flow, cart
   ══════════════════════════════════════════════════════════════ */

html[data-theme="dark"]{ --bad:#ff8095 }
html[data-theme="light"]{ --bad:#c8324f }

/* an inactive screen is not laid out at all until it is opened */
.screen:not(.is-active){content-visibility:hidden}

/* ── 25.1 window chrome: back + breadcrumb ──────────────────── */
.navbar{display:flex;align-items:center;gap:2px;flex:0 0 auto;margin-left:2px}
.nav-btn{width:26px;height:26px;display:grid;place-items:center;border-radius:9px;color:var(--ink-2);
  transition:background .18s,color .18s,opacity .18s}
.nav-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.nav-btn:hover:not(:disabled){background:var(--tile-2);color:var(--ink)}
.nav-btn:disabled{opacity:.28;cursor:default}
.crumbs{display:none;align-items:center;gap:5px;min-width:0;overflow:hidden;font-size:12px}
.win.has-flow .crumbs{display:flex}
.win.has-flow .wt-tabs{display:none}
.crumbs i{font-style:normal;color:var(--ink-3);opacity:.6}
.crumb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px;color:var(--ink-3);
  padding:3px 7px;border-radius:8px;transition:.18s}
button.crumb:hover{background:var(--tile-2);color:var(--ink)}
.crumb.on{color:var(--ink);font-weight:560}

.mb-cart{gap:7px}
.mb-cart em{font-style:normal;font-variant-numeric:tabular-nums;color:var(--ink-3)}
.mb-cart span{min-width:12px;text-align:center;font-variant-numeric:tabular-nums}
.mb-cart.has-items{color:var(--ink);border-color:color-mix(in srgb,var(--accent-3) 45%,transparent);
  background:color-mix(in srgb,var(--accent-3) 14%,var(--tile))}
.mb-cart.has-items span{color:var(--accent-3);font-weight:600}

/* ── 25.2 the pushed view stack ─────────────────────────────── */
.flow{position:absolute;inset:0;z-index:6}
.flow[hidden]{display:none}
.flow.is-loading::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:9;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  background-size:40% 100%;background-repeat:no-repeat;animation:flowload 1.1s linear infinite}
@keyframes flowload{from{background-position:-40% 0}to{background-position:140% 0}}

/* A pushed page replaces the screen outright: the screen underneath is faded
   away (rule below), so the page needs no veil of its own and sits on exactly
   the same window glass every other screen sits on. One less backdrop-filter,
   and nothing shows through once the push has landed. */
/* perf: same rule as .screen — no filter in the push transition, and the
   pushed page is invisible (opacity 0) whenever it is behind, so the blur
   said nothing the opacity was not already saying. */
.flow-page{position:absolute;inset:0;opacity:0;pointer-events:none;
  contain:layout style;
  transform:translateX(26px);
  transition:opacity .2s var(--ease) .05s,transform .26s var(--ease)}
.flow-page.is-in{opacity:1;transform:none;pointer-events:auto}
.flow-page.is-in:not(.is-top){opacity:0;transform:translateX(-20px);pointer-events:none}
.flow-page.is-out{opacity:0;transform:translateX(26px)}
.flow-page.is-behind{opacity:0;transform:translateX(-20px)}

/* the screen leaves before the page arrives, so the two never overlap */
.win.has-flow .screens > .screen.is-active{
  opacity:0;pointer-events:none;transform:translateX(-20px);
  transition:opacity .14s var(--ease),transform .24s var(--ease)}
.flow-scroll{height:100%;overflow:auto;overscroll-behavior:contain;padding:18px 20px 22px;
  scrollbar-width:thin;scrollbar-color:var(--stroke) transparent}
.flow-scroll::-webkit-scrollbar{width:9px}
.flow-scroll::-webkit-scrollbar-thumb{background:var(--stroke);border-radius:99px;border:3px solid transparent;background-clip:padding-box}

/* ── 25.3 plan detail ───────────────────────────────────────── */
.plan-page,.order-page,.cart-page{max-width:1000px;margin:0 auto;
  animation:rise .45s var(--ease-out) both}
.plan-hero{display:flex;align-items:center;gap:26px;padding:22px 24px;border-radius:22px;margin-bottom:16px;
  background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 15%,var(--tile)),var(--tile) 62%);
  border:1px solid var(--stroke-2);box-shadow:inset 0 1px 0 var(--spec)}
.ph-copy{flex:1 1 auto;min-width:0}
.ph-copy h1{font-size:clamp(26px,2.8vw,38px);margin-bottom:8px}
.ph-price{display:flex;align-items:baseline;gap:6px;margin:14px 0 6px;letter-spacing:-.04em}
.ph-price b{font-size:40px;font-weight:650}
.ph-price em{font-style:normal;font-size:13px;color:var(--ink-3);letter-spacing:0}
.ph-price s{font-size:15px;color:var(--ink-3);text-decoration:line-through}
.save-badge.inline{position:static;margin-left:4px}
.ph-renew{font-size:12px;color:var(--ink-3);margin-bottom:16px}
.ph-cta{display:flex;gap:10px;flex-wrap:wrap}
.ph-art{width:min(30%,190px);flex:0 0 auto}
.ph-art svg{width:100%;height:auto;animation:float 7s ease-in-out infinite}

.plan-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.plan-col{padding:18px 20px;border-radius:20px;background:var(--tile);border:1px solid var(--stroke-2);
  box-shadow:inset 0 1px 0 var(--spec)}
.plan-col h3{margin-bottom:12px}
.feat-list{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--ink-2)}
.feat-list li{display:flex;gap:9px;align-items:flex-start}
.feat-list li::before{content:"";width:15px;height:15px;margin-top:2px;flex:0 0 auto;border-radius:50%;
  background:color-mix(in srgb,var(--ok) 22%,transparent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.2 4.8 8.4 9.4 3.8' fill='none' stroke='%2348e08b' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:contain}
.spec-table{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;font-size:12.5px}
.spec-table dt{color:var(--ink-3)}
.spec-table dd{color:var(--ink)}
.spec-table code{font:11px ui-monospace,Menlo,Consolas,monospace;color:var(--ink-2)}
.plan-trust{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;padding-top:14px;border-top:1px solid var(--stroke-2)}
.plan-trust span{font-size:10.5px;padding:4px 9px;border-radius:99px;background:var(--sunk);color:var(--ink-3)}
.plan-strip{padding:18px 20px;border-radius:20px;background:var(--tile);border:1px solid var(--stroke-2);
  box-shadow:inset 0 1px 0 var(--spec)}
.plan-strip h3{margin-bottom:12px}
.strip-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.strip-grid b{display:block;font-size:12.5px;margin-bottom:4px}
.strip-grid p{font-size:11.5px;color:var(--ink-3);line-height:1.5}

/* ── 25.4 order wizard ──────────────────────────────────────── */
.wiz-rail{display:flex;align-items:center;gap:8px;padding:8px;border-radius:15px;margin-bottom:16px;
  background:var(--sunk);border:1px solid var(--stroke-2);overflow-x:auto;scrollbar-width:none}
.wiz-rail::-webkit-scrollbar{display:none}
.wiz-rail li{display:flex;align-items:center;gap:8px;padding:6px 13px;border-radius:11px;white-space:nowrap;
  font-size:12.5px;color:var(--ink-3);transition:.2s}
.wiz-rail li[data-step]{cursor:pointer}
.wiz-rail li b{font-size:10.5px;letter-spacing:.1em;opacity:.7}
.wiz-rail li.on{color:var(--ink);background:var(--tile-2);box-shadow:inset 0 1px 0 var(--spec)}
.wiz-rail li.done{color:var(--accent-3)}
.wiz-rail li.done b::after{content:" ✓"}
.wiz-tail{margin-left:auto;font-size:11px;opacity:.7;cursor:default}

.order-cols{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:16px;align-items:start}
.order-main{display:flex;flex-direction:column;gap:14px;min-width:0}
.wiz-block{padding:18px 20px;border-radius:20px;background:var(--tile);border:1px solid var(--stroke-2);
  box-shadow:inset 0 1px 0 var(--spec)}
.wiz-block h3{margin-bottom:12px;display:flex;align-items:baseline;gap:9px}
.wiz-block h3 .tiny{font-weight:400}
.opt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:9px}
.opt-grid.two{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.opt{position:relative;display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:14px;
  background:var(--sunk);border:1px solid transparent;cursor:pointer;transition:.2s}
.opt:hover{background:var(--tile-2)}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt.on{border-color:color-mix(in srgb,var(--accent) 52%,transparent);
  background:color-mix(in srgb,var(--accent) 12%,var(--tile-2));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 11%,transparent)}
.opt-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.opt-body b{font-size:13px;font-weight:560}
.opt-body em{font-style:normal;font-size:11px;color:var(--ink-3);line-height:1.4}
.opt-price{font-size:12.5px;font-weight:600;white-space:nowrap;letter-spacing:-.02em}
.opt-tick{width:19px;height:19px;flex:0 0 auto;border-radius:6px;border:1.6px solid var(--stroke);transition:.2s}
.opt.on .opt-tick{background:var(--accent);border-color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.2 4.8 8.4 9.4 3.8' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:13px;background-position:center;background-repeat:no-repeat}

.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field.wide{grid-column:1/-1}
.field.is-off{display:none}
.field label{font-size:11.5px;color:var(--ink-3)}
.field label em{font-style:normal;opacity:.7}
.field input,.field select,.coupon-row input{height:38px;padding:0 12px;border-radius:11px;font-size:13.5px;
  background:var(--sunk);border:1px solid var(--stroke-2);color:var(--ink);transition:border-color .2s,box-shadow .2s}
.field input::placeholder,.coupon-row input::placeholder{color:var(--ink-3)}
.field input:focus,.field select:focus,.coupon-row input:focus{
  border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.field select option{background:#12161f;color:#eef2f8}
html[data-theme="light"] .field select option{background:#fff;color:#15181f}
.field-err{font-size:10.5px;color:var(--bad);min-height:13px;line-height:1.2}
.field.is-bad input,.field.is-bad select{border-color:var(--bad)}
.form-note{margin-top:14px;padding:12px 13px;border-radius:13px;font-size:11.5px;line-height:1.55;
  color:var(--ink-3);background:var(--sunk);border:1px dashed var(--stroke)}
.form-note b{color:var(--ink-2)}
.wiz-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

.rev-box{display:flex;flex-direction:column;gap:2px}
.rev-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:8px 0;
  border-bottom:1px dashed var(--stroke-2);font-size:12.5px;color:var(--ink-3)}
.rev-row:last-child{border-bottom:0}
.rev-row b{color:var(--ink);font-weight:560;text-align:right}
.coupon-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.coupon-row input{flex:0 0 180px;text-transform:uppercase;letter-spacing:.06em}
.coupon-ok{font-size:11.5px;color:var(--accent-3)}
.consent-all{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:13px;cursor:pointer;
  background:var(--sunk);border:1px solid var(--stroke-2);font-size:13px;margin-bottom:10px}
.consent-all input{width:19px;height:19px;accent-color:var(--accent)}
.tick-list.decl li{color:var(--ink-3)}

.order-sum{position:sticky;top:0;display:flex;flex-direction:column;gap:7px;padding:16px 17px;border-radius:20px;
  background:var(--tile);border:1px solid var(--stroke-2);box-shadow:inset 0 1px 0 var(--spec)}
.sum-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--ink-2)}
.sum-row.sub{font-size:11.5px;color:var(--ink-3);padding-left:9px}
.sum-row.disc b{color:var(--accent-3)}
.sum-row b{white-space:nowrap;font-weight:560}
.sum-line{height:1px;background:var(--stroke-2);margin:6px 0}
.sum-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:8px;padding-top:10px;
  border-top:1px solid var(--stroke-2);font-size:13px}
.sum-total b{font-size:24px;font-weight:650;letter-spacing:-.03em}

/* ── 25.5 cart ──────────────────────────────────────────────── */
.cart-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:16px}
.cart-cols{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:16px;align-items:start}
.cart-list{display:flex;flex-direction:column;gap:10px}
.cart-item{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:14px 16px;
  border-radius:18px;background:var(--tile);border:1px solid var(--stroke-2);box-shadow:inset 0 1px 0 var(--spec)}
.ci-art{width:40px;height:40px;flex:0 0 auto}
.ci-art svg{width:100%;height:100%}
.ci-body b{font-size:13.5px}
.ci-meta{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px}
.ci-addons{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.ci-addons li{font-size:10.5px;padding:3px 8px;border-radius:99px;background:var(--sunk);color:var(--ink-3)}
.ci-addons li em{font-style:normal;color:var(--ink-2)}
.ci-addons.once li{background:color-mix(in srgb,var(--accent-2) 14%,transparent)}
.ci-right{text-align:right}
.ci-right b{display:block;font-size:18px;font-weight:640;letter-spacing:-.03em}
.cart-empty{text-align:center;padding:52px 20px;max-width:520px;margin:0 auto}
.cart-empty-art{display:block;width:76px;margin:0 auto 18px}
.cart-empty-art svg{width:100%;height:auto}
.cart-empty h2{margin-bottom:10px}
.cart-empty .hero-cta{justify-content:center;margin-top:20px}

/* ── 25.6 checkout handoff ──────────────────────────────────── */
.handoff{position:fixed;z-index:140}
.handoff .doc-meta code{font:11.5px ui-monospace,Menlo,Consolas,monospace;color:var(--ink)}
.handoff .doc-meta em{font-style:normal;color:var(--ink);font-weight:560}

/* ── 25.7 responsive ────────────────────────────────────────── */
@media (max-width:1180px){
  .order-cols,.cart-cols{grid-template-columns:1fr}
  .order-sum{position:static}
}
@media (max-width:900px){
  .plan-hero{flex-direction:column;align-items:flex-start}
  .ph-art{display:none}
  .plan-cols{grid-template-columns:1fr}
  .field-grid{grid-template-columns:1fr}
  .crumb{max-width:110px}
  .cart-item{grid-template-columns:1fr auto}
  .ci-art{display:none}
  .flow-scroll{padding:14px 14px 18px}
  /* a switch- or family-mode screen has no other way to reach its content,
     so the bar gets the whole width: the title and the Client Area button
     both step aside (the Account icon in the bottom bar still reaches it) */
  .win.tabs-required .wt{display:none}
  .win.tabs-required .wt-act{display:none}
  .win.tabs-required .wt-tabs{display:flex;max-width:100%;overflow-x:auto;scrollbar-width:none}
  .win.tabs-required .wt-tabs::-webkit-scrollbar{display:none}
  .win.tabs-required.has-flow .wt-tabs{display:none}
  .win.tabs-required.has-flow .wt{display:flex}
  /* on a phone the back button and the window title carry the position;
     a breadcrumb would only collapse to nothing between them */
  .win.has-flow .crumbs{display:none}
  .win.has-flow .wt-act .prime-btn{display:none}
}

/* ══════════════════════════════════════════════════════════════
   26. build 1.3 — working window tabs, Studio split
   ══════════════════════════════════════════════════════════════ */

/* a screen with nothing to tab through renders no pill at all */
.wt-tabs:empty{display:none}

/* Studio: AI on the left, people on the right */
.studio-split{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;
  animation:rise .5s var(--ease-out) both}
.sx{display:flex;flex-direction:column;gap:10px;padding:16px 18px;border-radius:22px;
  background:var(--tile);border:1px solid var(--stroke-2);box-shadow:inset 0 1px 0 var(--spec)}
.sx-ai{background:linear-gradient(150deg,color-mix(in srgb,var(--accent-2) 13%,var(--tile)),var(--tile) 58%)}
.sx-design{background:linear-gradient(150deg,color-mix(in srgb,var(--accent-3) 11%,var(--tile)),var(--tile) 58%)}
.sx-head h2{font-size:clamp(21px,1.9vw,26px);line-height:1.12;margin-bottom:8px}
.sx-head .lead{font-size:12.5px;max-width:46ch}
.sx .prompt-xl{padding:11px}
.sx .prompt-xl textarea{font-size:14px}
.sx .ai-steps{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sx .ai-step{padding:8px 10px;font-size:11.5px}
.sx .mockwin{margin-top:auto}
.sx .mockbody{padding:10px;gap:7px}
.sx .mk-hero{height:54px}
.sx .mk-card{height:32px}
.sx .mk-band{height:18px}
.sx .mk-nav{height:13px}
.pane-note{margin-top:auto;padding-top:10px;border-top:1px solid var(--stroke-2)}

/* the other three Studio families, one tab each */
.pane{animation:rise .5s var(--ease-out) both}
.pane-head{max-width:640px;margin:0 auto 18px;text-align:center}
.pane-head h2{margin-bottom:8px}
.pane-head .lead{margin-inline:auto}
.studio-grid.compact{grid-template-columns:1fr 1fr;gap:9px}
.studio-grid.compact .pkg{padding:11px 13px;gap:4px}
.studio-grid.compact .pkg h4{font-size:13.5px}
.studio-grid.compact .pkg .pk-price b{font-size:20px}
.studio-grid.compact .pkg .pk-line{font-size:11px}
.studio-grid.compact .pkg ul{display:none}          /* the full list lives on its own tab */
.studio-grid.compact .pkg .pk-meta{padding-top:5px}

/* when the panel has no room to scroll, the tab flashes its section instead of
   moving nothing at all */
.tab-pulse{border-radius:18px;animation:tabPulse .8s var(--ease)}
@keyframes tabPulse{
  0%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 55%,transparent)}
  60%{box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 22%,transparent)}
  100%{box-shadow:0 0 0 5px transparent}}

/* keep this last: it has to beat the display rules above */
.is-tab-off{display:none}

@media (max-width:1180px){
  .studio-split{grid-template-columns:1fr}
  .sx .ai-steps{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .sx{padding:16px 17px}
  .sx .ai-steps{grid-template-columns:1fr 1fr}
  .studio-grid.compact{grid-template-columns:1fr}
}

/* ── 22b. short screens ─────────────────────────────────────────
   A desktop does not scroll its own home screen. On a laptop the bento
   is the one thing tall enough to need it, so it tightens instead.
   ────────────────────────────────────────────────────────────── */
@media (max-height:900px){
  .bento{gap:10px;grid-auto-rows:minmax(84px,auto)}
  .tile{padding:12px 14px}
  .t-hero{padding:18px 22px}
  .hero-copy p{margin-top:8px;font-size:13px}
  .hero-cta{margin-top:13px}
  .heart{width:48px;height:48px}
  .ecg{height:32px}
  .big-price b{font-size:30px}
  .sw{padding:8px 10px}
  .switch-grid{gap:7px}
  .scroll{padding:12px 16px 12px}
}
@media (max-height:820px){
  h1{font-size:clamp(24px,2.5vw,34px)}
  .eyebrow{margin-bottom:6px}
  .t-hero{padding:15px 19px}
  .hero-art{width:min(32%,168px)}
  .hero-cta{margin-top:11px}
  .lg{height:38px;padding:0 17px}
  .tile-lead{font-size:11.5px}
  .prompt-mini{padding:9px 11px}
  .meter{font-size:10px}
  .meters{gap:5px}
  .heart{width:42px;height:42px}
  .ecg{height:26px}
  .big-price b{font-size:26px}
  .tiny{font-size:10.5px}
}

/* ══════════════════════════════════════════════════════════════
   27. the Free tab: a conversion ladder
   Free on the left, honest about its ceiling; the entry plan and the
   one worth buying to its right, with an OR between them.
   ══════════════════════════════════════════════════════════════ */
.ladder-wrap{display:grid;grid-template-columns:.9fr auto 1fr 1.14fr;gap:13px;align-items:stretch}
/* The three tiers borrow the window's own traffic lights: stop, careful, go.
   --lad is the tint, --lad-ink the readable version of it. Both are mixed
   against theme tokens, so the identity survives a theme switch. */
.tone-red{--lad:#ff5f57}
.tone-amber{--lad:#ffbd2e}
.tone-green{--lad:#28c840}
html[data-theme="light"] .tone-red{--lad-ink:#c8342b}
html[data-theme="light"] .tone-amber{--lad-ink:#9a6a05}
html[data-theme="light"] .tone-green{--lad-ink:#177a2c}
html[data-theme="dark"] .tone-red{--lad-ink:#ff8f88}
html[data-theme="dark"] .tone-amber{--lad-ink:#ffd27a}
html[data-theme="dark"] .tone-green{--lad-ink:#6ee88a}

.lad{position:relative;display:flex;flex-direction:column;gap:8px;padding:15px 17px;border-radius:20px;
  overflow:hidden;
  background:linear-gradient(180deg,color-mix(in srgb,var(--lad) 15%,var(--tile)),var(--tile) 42%);
  border:1px solid color-mix(in srgb,var(--lad) 26%,var(--stroke-2));
  box-shadow:inset 0 1px 0 var(--spec);
  animation:rise .5s var(--ease-out) both;transition:transform .35s var(--ease),background .3s,box-shadow .35s}
.lad::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--lad)}
.lad:hover{transform:translateY(-3px);background:var(--tile-hover)}
.lad-tag{position:absolute;top:15px;right:15px;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  padding:4px 9px;border-radius:99px;background:color-mix(in srgb,var(--lad) 22%,transparent);color:var(--lad-ink)}
.lad-tag.muted{background:color-mix(in srgb,var(--lad) 16%,transparent);color:var(--lad-ink)}
.lad-tag.hot{background:var(--lad-ink);color:#fff;box-shadow:0 6px 16px -9px var(--lad)}
.lad-fam{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.lad header h3{font-size:16.5px;letter-spacing:-.02em;margin-bottom:4px}
.lad header p{font-size:11.5px;color:var(--ink-3);line-height:1.45;max-width:34ch}
.lad-price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;letter-spacing:-.04em;margin-top:2px}
.lad-price b{font-size:32px;font-weight:650}
.lad-price em{font-style:normal;font-size:11.5px;color:var(--ink-3);letter-spacing:0}
.lad-was{font-size:15px;color:var(--ink-3);text-decoration:line-through}
.lad-note{font-size:11px;color:var(--ink-3);margin-top:-4px}
.lad-note b{color:var(--accent-3);letter-spacing:.05em}
.lad-feats{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--ink-2)}
.lad-feats li{display:flex;gap:8px;align-items:flex-start}
.lad-feats li::before{content:"";width:14px;height:14px;margin-top:2px;flex:0 0 auto;border-radius:50%;
  background:color-mix(in srgb,var(--lad) 26%,transparent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.2 4.8 8.4 9.4 3.8' fill='none' stroke='%2348e08b' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:contain}
.lad .full{margin-top:auto}
.lad-foot{font-size:10.5px;color:var(--ink-3);line-height:1.45}

/* free is deliberately quieter - stated plainly, not talked down */
.lad-free .lad-price b{font-size:30px;color:var(--ink-2)}
.lad-free .lad-feats{color:var(--ink-3)}

/* the one the business wants you on */
.lad-ultra{border-color:color-mix(in srgb,var(--lad) 46%,var(--stroke));
  box-shadow:inset 0 1px 0 var(--spec),0 22px 44px -28px color-mix(in srgb,var(--lad) 75%,transparent)}
.lad-ultra::before{height:4px}

/* choose your panel */
.lad-panels{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.lad-panels .cfg-label{flex:0 0 auto}
.pchips{display:flex;flex-wrap:wrap;gap:5px}
.pchip{display:flex;align-items:center;gap:5px;padding:5px 9px;border-radius:9px;font-style:normal;
  font-size:11px;color:var(--ink-2);background:var(--tile-2);border:1px solid var(--stroke-2)}
.pchip svg{width:14px;height:14px;fill:none;stroke:var(--lad-ink);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.pchip.ghost{color:var(--ink-3);background:transparent;border-style:dashed}
.lad-os{font-size:10.5px;color:var(--ink-3)}
.lad-os b{color:var(--ink-2);font-weight:560}
.lad-mult{display:flex;gap:7px;flex-wrap:wrap}
.lad-mult span{display:flex;flex-direction:column;align-items:center;gap:0;padding:6px 10px;border-radius:11px;
  background:color-mix(in srgb,var(--lad) 12%,var(--tile-2));
  border:1px solid color-mix(in srgb,var(--lad) 24%,var(--stroke-2));font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.lad-mult b{font-size:16px;font-weight:650;letter-spacing:-.02em;color:var(--ink);text-transform:none}

/* the OR gutter */
.or{display:flex;flex-direction:column;align-items:center;gap:9px;padding:8px 0}
.or i{flex:1 1 auto;width:1px;background:linear-gradient(var(--stroke),transparent);display:block}
.or i:last-child{background:linear-gradient(transparent,var(--stroke))}
.or span{font-size:10.5px;letter-spacing:.16em;color:var(--ink-3);padding:7px 9px;border-radius:99px;
  background:var(--tile);border:1px solid var(--stroke-2)}

.lad-panel{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:11px 15px;border-radius:16px;background:var(--tile);border:1px dashed var(--stroke);
  animation:rise .5s .28s var(--ease-out) both}
.lad-panel b{display:block;font-size:12.5px;margin-bottom:2px}
.lad-panel span{font-size:11.5px;color:var(--ink-3);line-height:1.5;max-width:74ch;display:block}
.lad-panel .ghost-btn{flex:0 0 auto}

.ladder-trust{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;
  animation:rise .5s .34s var(--ease-out) both}
.ladder-trust span{display:flex;align-items:baseline;gap:7px;padding:8px 13px;border-radius:99px;
  background:var(--sunk);border:1px solid var(--stroke-2);font-size:11px;color:var(--ink-3)}
.ladder-trust b{font-size:12px;color:var(--ink)}
/* the ladder brings its own reassurance row */
.screen.is-ladder .mini-grid{display:none}

@media (max-width:1180px){
  .ladder-wrap{grid-template-columns:1fr 1fr}
  .or{flex-direction:row;grid-column:1/-1;padding:0}
  .or i{width:auto;height:1px;background:linear-gradient(90deg,transparent,var(--stroke))}
  .or i:last-child{background:linear-gradient(90deg,var(--stroke),transparent)}
}
@media (max-width:900px){
  .ladder-wrap{grid-template-columns:1fr}
  .lad-panel{flex-direction:column;align-items:flex-start}
}
@media (max-height:880px){
  .lad{padding:13px 15px;gap:7px}
  .lad-price b{font-size:29px}
  .lad-feats{font-size:11.5px;gap:4px}
  .lad header p{font-size:11px}
  .head-copy .lead{display:none}
  .head-row{margin-bottom:8px}
}
@media (max-height:780px){
  .lad-mult span{padding:5px 9px}
  .lad-mult b{font-size:14px}
  .lad-price b{font-size:26px}
  .lad-os{display:none}
}

/* ══════════════════════════════════════════════════════════════
   28. the Extra tab: hosting by workload
   ══════════════════════════════════════════════════════════════ */
.extra-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px;align-items:stretch}
.xcard{display:flex;flex-direction:column;gap:8px;padding:15px 15px 14px;border-radius:20px;
  background:var(--tile);border:1px solid var(--stroke-2);box-shadow:inset 0 1px 0 var(--spec);
  animation:rise .5s var(--ease-out) both;transition:transform .35s var(--ease),background .3s,box-shadow .35s}
.xcard:hover{transform:translateY(-3px);background:var(--tile-hover);
  box-shadow:inset 0 1px 0 var(--spec),0 20px 40px -28px rgba(0,0,0,.7)}
.xart{width:38px;height:38px;flex:0 0 auto}
.xart svg{width:100%;height:100%}
.xcard h3{font-size:15px;letter-spacing:-.02em}
.xline{font-size:11.5px;color:var(--ink-3);line-height:1.5}
.xprice{display:flex;align-items:baseline;gap:3px;letter-spacing:-.03em}
.xprice b{font-size:26px;font-weight:650}
.xprice em{font-style:normal;font-size:11px;color:var(--ink-3);letter-spacing:0}
.xspec{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:11.5px;
  padding:9px 11px;border-radius:12px;background:var(--sunk);border:1px solid var(--stroke-2)}
.xspec dt{color:var(--ink-3)}
.xspec dd{color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.xfrom{font-size:10.5px;color:var(--ink-3);line-height:1.45}
.xfrom b{color:var(--ink-2);font-weight:560}
.xmin{font-size:10.5px;color:var(--ink-3);line-height:1.5;padding:8px 10px;border-radius:11px;
  background:color-mix(in srgb,var(--accent) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 20%,transparent)}
.xnotes{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--ink-2)}
.xnotes li{display:flex;gap:7px;align-items:flex-start}
.xnotes li::before{content:"";width:12px;height:12px;margin-top:2px;flex:0 0 auto;border-radius:50%;
  background:color-mix(in srgb,var(--ok) 22%,transparent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.2 4.8 8.4 9.4 3.8' fill='none' stroke='%2348e08b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:contain}
.xcard .full{margin-top:auto}
.xfoot{grid-column:1/-1;margin-top:12px;font-size:11.5px;color:var(--ink-3);line-height:1.6;
  padding:12px 15px;border-radius:16px;background:var(--sunk);border:1px dashed var(--stroke);
  animation:rise .5s .34s var(--ease-out) both}
.xfoot .text-btn{font-size:11.5px}

@media (max-width:1400px){.extra-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1000px){.extra-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.extra-grid{grid-template-columns:1fr}}
@media (max-height:880px){
  .xcard{padding:12px 13px;gap:6px}
  .xart{width:32px;height:32px}
  .xprice b{font-size:23px}
  .xline{font-size:11px}
  .xnotes{font-size:10.5px}
}

/* ══════════════════════════════════════════════════════════════
   29. Domains: search on the left, transfer and tools on the right
   ══════════════════════════════════════════════════════════════ */
.dom-split{display:grid;grid-template-columns:1.12fr 1fr;gap:13px;height:100%;min-height:480px;align-items:stretch}
/* grid items default to min-width:auto, so one monospace value in the tool rows
   was widening the whole track past the panel on a phone */
.dom-split > *,.dom-side > *,.trow,.trow b{min-width:0}
.dom-card{display:flex;flex-direction:column;gap:11px;min-height:0;padding:17px 18px;border-radius:20px;
  background:var(--tile);border:1px solid var(--stroke-2);box-shadow:inset 0 1px 0 var(--spec)}
.dom-head h2{font-size:clamp(20px,1.9vw,26px);line-height:1.12}
.dom-head h3{font-size:16px;letter-spacing:-.02em}
.dom-side{display:flex;flex-direction:column;gap:13px;min-height:0}
.dom-find .dom-results{flex:1 1 auto;min-height:0;overflow:auto;padding-right:4px;
  scrollbar-width:thin;scrollbar-color:var(--stroke) transparent}
.dom-find .dom-results::-webkit-scrollbar{width:8px}
.dom-find .dom-results::-webkit-scrollbar-thumb{background:var(--stroke);border-radius:99px;
  border:2px solid transparent;background-clip:padding-box}
.dom-split .tld-row{margin:0;justify-content:flex-start}
.dom-split .dom-empty{padding:22px 18px}
.dom-split .dom-empty .tiny{display:block;margin-top:7px}

.dom-form{display:flex;flex-direction:column;gap:9px}
.dom-form .field{gap:4px}
.xfer-ok{padding:11px 13px;border-radius:13px;font-size:11.5px;line-height:1.5;
  background:color-mix(in srgb,var(--ok) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--ok) 30%,transparent);color:var(--ink-3)}
.xfer-ok b{display:block;font-size:12.5px;color:var(--ink);margin-bottom:3px}

/* the four checkers */
.dom-tools{min-height:0}
.tool-tabs{align-self:flex-start;max-width:100%;overflow-x:auto;scrollbar-width:none}
.tool-tabs::-webkit-scrollbar{display:none}
.tool-tabs button{padding:6px 13px;font-size:12px;white-space:nowrap}
.tool-run{display:flex;gap:8px;align-items:center}
.tool-run input{flex:1 1 auto;min-width:0;height:36px;padding:0 12px;border-radius:11px;font-size:13px;
  background:var(--sunk);border:1px solid var(--stroke-2);color:var(--ink);transition:border-color .2s,box-shadow .2s}
.tool-run input::placeholder{color:var(--ink-3)}
.tool-run input:focus{border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.tool-out{flex:1 1 auto;min-height:0;overflow:auto;padding-right:4px;scrollbar-width:thin;
  scrollbar-color:var(--stroke) transparent}
.tool-out::-webkit-scrollbar{width:8px}
.tool-out::-webkit-scrollbar-thumb{background:var(--stroke);border-radius:99px;border:2px solid transparent;background-clip:padding-box}
.tool-empty{padding:16px 14px;border-radius:13px;border:1px dashed var(--stroke);font-size:11.5px;
  color:var(--ink-3);line-height:1.55;text-align:center}
.tool-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.tool-head b{font-size:13.5px;letter-spacing:-.01em}
.tool-head span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.trows{display:flex;flex-direction:column;gap:1px;border-radius:13px;overflow:hidden;
  border:1px solid var(--stroke-2)}
.trow{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:baseline;padding:8px 12px;
  background:var(--sunk);font-size:11.5px}
.trow span{color:var(--ink-3)}
.trow b{color:var(--ink);font-weight:520;word-break:break-word;
  font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;font-size:11px}
.trow.wide{grid-template-columns:96px 1fr}
.tok{color:var(--ok)}
.twarn{color:var(--warn)}
.upbars{display:flex;gap:2px;align-items:flex-end}
.upbars i{width:4px;height:14px;border-radius:2px;background:color-mix(in srgb,var(--ok) 65%,transparent);display:block}
.upbars i.bad{background:var(--warn);height:9px}
.tool-note{font-size:10px;color:var(--ink-3);line-height:1.5;margin-top:8px}

@media (max-width:1100px){
  .dom-split{grid-template-columns:1fr;height:auto}
  .dom-find .dom-results,.tool-out{overflow:visible}
}
@media (max-height:820px){
  .dom-card{padding:14px 15px;gap:9px}
  .dom-head h2{font-size:20px}
}

/* ══════════════════════════════════════════════════════════════
   30. five plans across: the card tightens rather than the row wrapping
   ══════════════════════════════════════════════════════════════ */
.plan-grid.count-5{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.plan-grid.count-5 .plan{padding:13px 14px;gap:8px;border-radius:18px}
.plan-grid.count-5 .plan-ico{width:32px;height:32px}
.plan-grid.count-5 .plan header{gap:4px}
.plan-grid.count-5 .plan header h3{font-size:14.5px}
.plan-grid.count-5 .plan header p{font-size:11px;line-height:1.4}
.plan-grid.count-5 .plan-price b{font-size:26px}
.plan-grid.count-5 .plan-price em{font-size:11px}
.plan-grid.count-5 .plan-old{font-size:11px}
.plan-grid.count-5 .plan-renew{font-size:10px;margin-top:-4px}
.plan-grid.count-5 .plan ul{font-size:11.5px;gap:5px}
.plan-grid.count-5 .plan li::before{width:13px;height:13px}
.plan-grid.count-5 .plan li.more{font-size:10.5px;color:var(--ink-3)}
.plan-grid.count-5 .save-badge{top:12px;right:12px;font-size:9px;padding:3px 7px;letter-spacing:.06em}
.plan-grid.count-5 .plan.is-best .save-badge{top:37px}
.plan-grid.count-5 .ribbon{top:12px;right:12px;font-size:9px;padding:3px 8px}
.plan-grid.count-5 .plan .full{height:32px;font-size:12px;padding:0 10px}

@media (max-width:1360px){.plan-grid.count-5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1000px){.plan-grid.count-5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.plan-grid.count-5{grid-template-columns:1fr}}
@media (max-height:880px){
  .plan-grid.count-5 .plan{padding:11px 12px;gap:6px}
  .plan-grid.count-5 .plan-price b{font-size:23px}
  .plan-grid.count-5 .plan ul{font-size:11px;gap:4px}
  .plan-grid.count-5 .plan header p{display:none}
}

/* ══════════════════════════════════════════════════════════════
   31. VDS POWER builder — the machine gains parts as you size it
   ══════════════════════════════════════════════════════════════ */
.screen.is-rig .ded-left{display:none}
.screen.is-rig .ded-wrap{grid-template-columns:1fr}
.rig-host{overflow:visible!important;padding-right:0!important}

/* one page: the machine and its dials on the left, the software on the right.
   Both columns are header / scrolling middle / PINNED footer — the two prices
   are the footers, and a price that scrolls out of view is a price nobody
   reads. That is what went wrong here before: the machine price sat 92px and
   the grand total 333px below the fold of their own panels. */
.rig-cols{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:13px;
  align-items:stretch;min-height:0;height:100%}
.rig-cols > *,.rig-face > *,.rig-board > *,.rig-left > *{min-width:0}
.rig-left{display:flex;flex-direction:column;gap:11px;min-height:0}

/* the stage takes whatever the dials do not need, so the machine is as large
   as the window allows instead of a fixed box */
.rig-stage{flex:1 1 auto;min-height:186px;display:flex;flex-direction:column;gap:8px;
  padding:11px;border-radius:20px;overflow:hidden;overflow:clip;
  background:radial-gradient(80% 70% at 50% 36%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%),var(--tile);
  border:1px solid var(--stroke-2);box-shadow:inset 0 1px 0 var(--spec)}
.rig-scene{flex:1 1 auto;min-height:0;display:grid;place-items:center;overflow:hidden;overflow:clip}
.rig-strip{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:5px}
.rig-tags{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
.rig-tags:empty{display:none}

.rig-panel{display:flex;flex-direction:column;min-height:0;padding:14px 16px;border-radius:20px;
  background:var(--tile);border:1px solid var(--stroke-2);box-shadow:inset 0 1px 0 var(--spec)}
.rig-size{flex:0 0 auto;max-height:58%}
.rig-size .rig-mid{gap:6px}


.rig-right{min-height:0}
.rig-head{flex:0 0 auto;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.rig-head .eyebrow{margin:0;flex:0 0 auto}
.rig-head h3{font-size:14.5px;letter-spacing:-.02em;margin:0;padding-bottom:8px}
.rig-right .rig-head .eyebrow{font-size:10.5px;margin-bottom:2px}
.rig-mid{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:9px;
  scrollbar-width:thin;scrollbar-color:var(--stroke) transparent}
.rig-mid::-webkit-scrollbar{width:8px}
.rig-mid::-webkit-scrollbar-thumb{background:var(--stroke);border-radius:99px;border:2px solid transparent;background-clip:padding-box}

/* footer 1 — what the hardware costs, hardware only */
.rig-sub{flex:0 0 auto;display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-top:7px;padding-top:7px;border-top:1px solid var(--stroke-2);font-size:11.5px;color:var(--ink-3)}
.rig-sub b{font-size:19px;font-weight:650;letter-spacing:-.03em;color:var(--ink)}
.rig-sub em{font-style:normal;font-size:11px;color:var(--ink-3);font-weight:400;letter-spacing:0}

/* footer 2 — hardware plus everything chosen on the right */
.rig-total{flex:0 0 auto;display:flex;flex-direction:column;gap:8px;margin-top:9px;padding-top:10px;
  border-top:1px solid var(--stroke-2)}
.rig-total-row{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.rig-total .ct-sum{min-width:0;flex:1 1 auto}
.rig-total .ct-price b{font-size:31px}

/* four collapsible groups, one open at a time. Four card grids expanded at
   once was 21 boxes fighting for the same eye and it overran the panel;
   collapsed, a group still reports what it is set to. */
.sw-stack{display:flex;flex-direction:column;gap:8px}
.sw-grp{border:1px solid var(--stroke-2);border-radius:14px;background:var(--sunk);
  overflow:hidden;transition:background .2s,border-color .2s}
.sw-grp.is-open{background:var(--tile-2);border-color:var(--stroke)}
.sw-head{display:flex;align-items:center;gap:12px;width:100%;padding:11px 13px;text-align:left;
  transition:background .18s}
.sw-head:hover{background:var(--tile-hover)}
.sw-k{flex:0 0 auto;min-width:126px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.sw-sum{flex:1 1 auto;min-width:0;font-size:13px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sw-caret{flex:0 0 auto;width:14px;height:14px;position:relative}
.sw-caret::after{content:"";position:absolute;left:2px;top:3px;width:7px;height:7px;
  border-right:1.6px solid var(--ink-3);border-bottom:1.6px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .3s var(--ease)}
.sw-grp.is-open .sw-caret::after{transform:rotate(-135deg) translate(-2px,-2px)}
/* the closed bodies stay in the DOM so the radios keep their checked state */
.sw-body{max-height:0;overflow:hidden;opacity:0;
  transition:max-height .32s var(--ease),opacity .22s var(--ease)}
.sw-grp.is-open .sw-body{max-height:230px;opacity:1}
.sw-inner{padding:0 11px 11px}

/* one row, side by side — the tiles share the width evenly and shrink together */
.tile-row{display:flex;gap:7px;align-items:stretch}
.swt{position:relative;flex:1 1 0;min-width:0;min-height:76px;
  display:flex;flex-direction:column;gap:2px;padding:9px 10px;border-radius:11px;
  background:var(--tile);border:1px solid var(--stroke-2);cursor:pointer;transition:.18s}
.swt:hover{background:var(--tile-hover)}
.swt input{position:absolute;opacity:0;pointer-events:none}
.swt b{font-size:11.5px;font-weight:560;line-height:1.25;padding-right:17px}
.swt em{font-style:normal;font-size:10px;color:var(--ink-3);line-height:1.3;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.swt-p{margin-top:auto;padding-top:4px;font-size:11px;font-weight:600;color:var(--ink-2);
  letter-spacing:-.01em;white-space:nowrap}
.swt.on{border-color:color-mix(in srgb,var(--accent) 52%,transparent);
  background:color-mix(in srgb,var(--accent) 12%,var(--tile-2))}
.swt-tick{position:absolute;top:8px;right:8px;width:15px;height:15px;border-radius:5px;
  border:1.5px solid var(--stroke);transition:.2s}
.swt.on .swt-tick{background:var(--accent);border-color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E");
  background-size:11px;background-repeat:no-repeat;background-position:center}
.swt:focus-within{outline:2px solid var(--accent);outline-offset:2px}

.inc-chips{display:flex;flex-wrap:wrap;gap:4px 11px;justify-content:center}
.inc-chips span{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--ink-3);white-space:nowrap}
.inc-chips span::before{content:"";width:9px;height:9px;flex:0 0 auto;border-radius:3px;
  background:color-mix(in srgb,var(--ok) 30%,transparent);
  box-shadow:inset 0 0 0 1.3px color-mix(in srgb,var(--ok) 60%,transparent)}

.rig-actions{display:flex;gap:9px;flex-wrap:wrap}
.rig-actions .prime-btn{flex:1 1 auto}
.rig-note{font-size:10.5px;color:var(--ink-3);line-height:1.5;padding:8px 10px;border-radius:11px;
  background:var(--sunk);border:1px dashed var(--stroke)}
.rig-block .rig-note.bare{padding:0;background:none;border:0;line-height:1.45}
/* --- the machine ------------------------------------------------------
   An isometric SVG rack server with the lid off: drive cage at the front,
   two DIMM banks, two sockets, fans and PSU at the back. Sizing the machine
   physically installs the parts — a caddy slides into its bay, a DIMM drops
   into its slot and closes the clips, a CPU package lands on the socket.
   The SVG carries a viewBox, so it fits whatever box the stage gives it.
   ------------------------------------------------------------------- */
/* ========================================================================
   THE RIG — all colour derived from tokens so both themes hold up
   ===================================================================== */
.rig{
  width:100%;height:100%;display:block;
  /* metal ladder. NOTE: the bg-base share has to stay SMALL. Light mode's
     --bg-base is a near-white #e9e4dc, so mixing 22-70% of it into the greys
     collapsed the whole machine to the colour of the panel behind it - the
     rig was there, it was just invisible. Aluminium is DARK against a light
     surface; the base colour is a tint here, not the substance. */
  --m0:color-mix(in srgb, var(--bg-base) 14%, #eef1f6);
  --m1:color-mix(in srgb, var(--bg-base) 13%, #d3d9e2);
  --m2:color-mix(in srgb, var(--bg-base) 12%, #b0b8c5);
  --m3:color-mix(in srgb, var(--bg-base) 11%, #8b94a3);
  --m4:color-mix(in srgb, var(--bg-base) 10%, #69717f);
  --m5:color-mix(in srgb, var(--bg-base)  9%, #4b535f);
  --m6:color-mix(in srgb, var(--bg-base)  8%, #313842);
  /* plastic / rubber */
  --plast:color-mix(in srgb, var(--bg-base)  8%, #383f4a);
  --plast2:color-mix(in srgb, var(--bg-base) 9%, #545e6d);
  /* PCB */
  --pcb :color-mix(in srgb, var(--accent-3) 18%, #14503f);
  --pcb2:color-mix(in srgb, var(--accent-3) 10%, #0c3b2f);
  --pcb3:color-mix(in srgb, var(--accent-3) 28%, #226b58);
  --trace:color-mix(in srgb, var(--warn) 34%, #b8912f);
  --gold:color-mix(in srgb, var(--warn) 58%, #b8912f);
  --cav:color-mix(in srgb, var(--bg-base) 10%, #242932); /* cavities / shadow */
  --edge:rgba(255,255,255,.42);   /* bevel highlight */
  --seam:rgba(10,14,22,.38);      /* panel seam */
  --amb:.34;                      /* ambient-occlusion strength */
  --glow:0;                       /* 0..1, driven by `level` */
}
html[data-theme="dark"] .rig{
  --m0:color-mix(in srgb, var(--bg-base) 30%, #aeb7c6);
  --m1:color-mix(in srgb, var(--bg-base) 36%, #939cab);
  --m2:color-mix(in srgb, var(--bg-base) 42%, #7b8493);
  --m3:color-mix(in srgb, var(--bg-base) 50%, #626b7a);
  --m4:color-mix(in srgb, var(--bg-base) 58%, #4c5462);
  --m5:color-mix(in srgb, var(--bg-base) 66%, #39404c);
  --m6:color-mix(in srgb, var(--bg-base) 76%, #262c36);
  --plast:color-mix(in srgb, var(--bg-base) 62%, #2f353f);
  --plast2:color-mix(in srgb, var(--bg-base) 48%, #454d59);
  --pcb :color-mix(in srgb, var(--accent-3) 16%, #0d3a30);
  --pcb2:color-mix(in srgb, var(--accent-3) 9%,  #07281f);
  --pcb3:color-mix(in srgb, var(--accent-3) 26%, #14503f);
  --trace:color-mix(in srgb, var(--accent-3) 40%, #7a6224);
  --edge:rgba(255,255,255,.20);
  --seam:rgba(0,0,0,.5);
  --amb:.46;
}

/* ---- installable parts ------------------------------------------------ */
.rig .part{transition:transform .58s var(--ease), opacity .16s linear 0s}
.rig .part.out{opacity:0;transition:transform .58s var(--ease), opacity .2s linear .40s}
.rig .core,.rig .chan{transition:opacity .45s var(--ease)}
.rig .clip{transition:transform .34s var(--ease)}
.rig .clip.open{transform:translate(0px,-3.5px)}
.rig-noanim .part,.rig-noanim .clip,.rig-noanim .core,.rig-noanim .chan{transition:none !important}
.rig-bump{transform-box:fill-box;transform-origin:50% 92%}

/* ---- idle life -------------------------------------------------------- */
@keyframes rig-spin{to{transform:rotate(360deg)}}
@keyframes rig-blink{0%,72%{opacity:.14}78%,88%{opacity:1}100%{opacity:.14}}
@keyframes rig-breathe{0%,100%{opacity:calc(.28 + var(--glow) * .42)}50%{opacity:calc(.44 + var(--glow) * .56)}}
@keyframes rig-pulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes rig-settle{
  0%{transform:translateY(0) scaleY(1)}
  22%{transform:translateY(4.5px) scaleY(.986)}
  52%{transform:translateY(-2px) scaleY(1.007)}
  76%{transform:translateY(1px) scaleY(.998)}
  100%{transform:translateY(0) scaleY(1)}
}
.rig .blades{animation:rig-spin 2.6s linear infinite;transform-origin:0 0}
.rig .blades.b2{animation-duration:2.15s}
.rig .blades.b3{animation-duration:2.95s}
.rig .led-act{animation:rig-blink 1.9s steps(1,end) infinite}
.rig .boardglow{animation:rig-breathe 4.6s var(--ease) infinite}
.rig .pwr{animation:rig-pulse 3.4s ease-in-out infinite}
.chassis-bump{animation:rig-settle .5s var(--ease-out)}

/* ---- reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .rig .part,.rig .part.out,.rig .core,.rig .chan,.rig .clip{transition-duration:1ms !important;transition-delay:0ms !important}
  .rig .blades,.rig .led-act,.rig .boardglow,.rig .pwr,.chassis-bump{animation:none !important}
  .rig .boardglow{opacity:calc(.34 + var(--glow) * .5)}
  .rig .led-act{opacity:.9}
}

/* --- what is running on it: power gauge + chosen software ------------ */
.rig-gauge{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--ink-3);
  padding:3px 9px 3px 8px;border-radius:8px;background:var(--tile-2);border:1px solid var(--stroke-2)}
.rig-gauge i{width:74px;height:4px;border-radius:99px;background:var(--sunk);overflow:hidden;display:block}
.rig-gauge b{display:block;height:100%;border-radius:99px;transition:width .5s var(--ease);
  background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent-3))}
.rig-gauge em{font-style:normal;font-variant-numeric:tabular-nums}
.rig-badge{display:flex;align-items:center;gap:5px;padding:4px 8px;border-radius:8px;font-size:10px;
  background:var(--tile-2);border:1px solid var(--stroke-2);color:var(--ink-2)}
.rig-badge i{width:13px;height:13px;display:block}
.rig-badge i svg{width:100%;height:100%}
.rig-badge.soft{color:var(--ink-3)}

/* --- steppers --- */
.step-row{display:flex;flex-direction:column;gap:3px}
.step-head{display:flex;align-items:baseline;justify-content:space-between;font-size:11px;color:var(--ink-3)}
.step-head b{font-size:13.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.stepper{display:flex;align-items:center;gap:9px}
.stepper button{width:27px;height:27px;flex:0 0 auto;border-radius:9px;font-size:15px;line-height:1;
  background:var(--tile-2);border:1px solid var(--stroke-2);color:var(--ink);transition:.18s}
.stepper button:hover:not(:disabled){background:var(--accent);color:#fff;border-color:transparent;transform:translateY(-1px)}
.stepper button:disabled{opacity:.3;cursor:default}
.step-track{position:relative;flex:1 1 auto;height:20px;display:flex;align-items:center;gap:3px}
.step-track i{position:absolute;left:0;top:9px;height:3px;border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .35s var(--ease)}
.step-track u{position:relative;flex:1 1 auto;height:3px;border-radius:99px;background:var(--sunk);text-decoration:none}

/* below this the right panel is too narrow to carry two option columns inside
   two quadrant columns — one quadrant per row, options fit themselves */
/* narrow: a single row of six tiles stops being readable, so let it wrap */
@media (max-width:1150px){
  .tile-row{flex-wrap:wrap}
  .swt{flex:1 1 150px}
  .sw-grp.is-open .sw-body{max-height:420px}
}
@media (max-width:620px){
  .sw-head{flex-wrap:wrap;gap:2px 12px}
  .sw-k{min-width:0}
  .sw-sum{flex:1 0 100%;order:3}
  .swt{flex:1 1 130px}
}
@media (max-width:1100px){
  .rig-cols{grid-template-columns:1fr;height:auto}
  .rig-left{min-height:0}
  .rig-stage{flex:0 0 auto;min-height:210px}
  .rig-size{flex:0 0 auto;max-height:none}
  .rig-mid{overflow:visible}
  .rig-panel{padding:13px 14px}
}
@media (max-height:880px){
  .rig-panel{padding:12px 13px}
  .rig-stage{padding:9px;min-height:170px}
  .rig-right .tile-lead{display:none}
  .rig-head h3{font-size:14px;padding-bottom:7px}
  .rig-head p{display:none}
  .rig-total .ct-price b{font-size:28px}
}

/* ── 23. motion / a11y ──────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.08s !important}
  .wall .blob{animation:none}
}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}


/* ══════════════════════════════════════════════════════════════
   32. panel entry — sign-in sheet and unavailable notice
   The panels themselves live in panel.css; these two states belong
   to the shell, because the shell decides which one a screen shows.
   ══════════════════════════════════════════════════════════════ */
/* a dock button that has no session to open must actually disappear:
   .rail-btn sets display:flex, which beats [hidden]'s display:none */
.rail-btn[hidden]{display:none}

.pn-gate{min-height:100%;display:grid;place-items:center;padding:18px}
.pn-gate-card{width:min(420px,100%);display:flex;flex-direction:column;gap:11px;
  padding:22px 22px 20px;border-radius:var(--r-tile);
  background:var(--tile);border:1px solid var(--stroke-2);box-shadow:inset 0 1px 0 var(--spec),var(--shadow-pop)}
.pn-gate-card h3{font-size:19px;letter-spacing:-.02em;margin:-4px 0 3px}
.pn-f{display:flex;flex-direction:column;gap:5px}
.pn-f span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.pn-f input{height:40px;padding:0 12px;border-radius:var(--r-ctl);background:var(--sunk);
  border:1px solid var(--stroke-2);color:var(--ink);font-size:14px;transition:.18s}
.pn-f input:focus{border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  background:var(--tile-2)}
.pn-err{font-size:12px;color:var(--warn);margin:-2px 0 0}
.pn-alt{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;margin-top:-2px}
.pn-alt .text-btn{font-size:12px;color:var(--ink-2)}
.pn-alt .text-btn:hover{color:var(--accent)}
.pn-alt-sep{color:var(--ink-3)}
.pn-demo{font-size:10.5px;line-height:1.55;color:var(--ink-3);margin-top:2px;
  padding:9px 11px;border-radius:11px;background:var(--sunk);border:1px dashed var(--stroke)}
.pn-demo b{color:var(--ink-2)}
.pn-blank{min-height:100%;display:grid;place-content:center;justify-items:center;gap:6px;text-align:center;padding:24px}
.pn-blank h3{font-size:17px;letter-spacing:-.02em}

/* the order flow, when it already knows who is ordering */
.wiz-known{font-size:12.5px;line-height:1.55;color:var(--ink-2);margin-bottom:2px;
  padding:9px 12px;border-radius:12px;background:color-mix(in srgb,var(--ok) 12%,var(--sunk));
  border:1px solid color-mix(in srgb,var(--ok) 26%,var(--stroke-2))}
.wiz-known b{color:var(--ink)}

/* order received — the fourth step of the order flow */
.wiz-done{display:flex;flex-direction:column;gap:14px;max-width:760px}
.wd-mark{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--ok) 18%,var(--sunk));
  border:1px solid color-mix(in srgb,var(--ok) 40%,transparent);color:var(--ok)}
.wd-mark svg{width:24px;height:24px}
.wiz-done h3{font-size:23px;letter-spacing:-.02em;margin:-2px 0 -4px}
.wd-ref{font-variant-numeric:tabular-nums;letter-spacing:.01em;
  padding:1px 7px;border-radius:7px;background:var(--tile-2);border:1px solid var(--stroke-2)}
.wd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:11px}
.wd-card{display:flex;flex-direction:column;gap:4px;padding:13px 14px;border-radius:var(--r-tile);
  background:var(--tile);border:1px solid var(--stroke-2);box-shadow:inset 0 1px 0 var(--spec)}
.wd-card b{font-size:15px;letter-spacing:-.02em}
.wd-card p{font-size:11.5px;line-height:1.55;color:var(--ink-3)}
.wiz-legal{font-size:11px;line-height:1.6;color:var(--ink-3);padding:10px 12px;border-radius:12px;
  background:var(--sunk);border:1px dashed var(--stroke)}
@media (max-width:700px){.wd-grid{grid-template-columns:1fr}}

/* ══════════════════════════════════════════════════════════════
   33. touch targets
   Measured at 390 px before this block: every screen carried
   controls under 44 px, the VDS builder had 21 under 24 px, and
   111 pairs of controls sat closer than 8 px — several touching.
   A fingertip is about 9 mm; 44 px is where Apple and Google both
   land, and 24 px is the WCAG 2.5.8 floor. Size alone is not the
   fix: two 44 px buttons with no gap are still one mis-tap, so the
   gaps go up with them.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:860px){
  .prime-btn,.ghost-btn,.chip,.cat,.opt,.swt,.sw-head,.mb-chip,
  .wt-tabs button,.ad-btn,.loc,.a-add,.pk-cta,.cc-sm,.tk,.route,
  .stepper button,.step-track,.seg button,.tool-tabs button{min-height:44px}
  /* a segmented control is four targets in a row — the one place where
     making them tall is not enough, they need to be apart too */
  .seg,.tool-tabs,.os-row{gap:10px;flex-wrap:wrap}
  /* .chips is nowrap by design on a wide tile; on a phone that just clips the
     last chip mid-word inside the tile's own overflow, so let it wrap */
  .chips{flex-wrap:wrap}
  .os-row .os{min-height:44px}
  .seg button,.tool-tabs button{padding-inline:14px}
  .text-btn{min-height:36px;padding-inline:8px}

  /* the steppers are the densest thing in the build */
  .stepper{gap:12px}
  .stepper button{width:44px;height:44px;font-size:18px;border-radius:12px}
  .step-track{height:44px}
  .step-track i{top:20px}

  /* a checkbox glyph is decoration — the label is the target, so give
     the label the height rather than growing the tick */
  .swt{padding:11px 12px}
  .opt{padding:11px 12px}

  /* gaps: nothing tappable within 10px of the next tappable thing */
  .tile-row,.opt-grid,.opt-grid.tight,.chips,.cc-acts,.rig-actions,
  .wiz-nav,.ca-btns,.ad-acts,.sw-stack,.tk-list{gap:10px}
  .tile-row{flex-wrap:wrap}
  .swt{flex:1 1 150px}
  .cc-acts,.wiz-nav,.ca-btns{flex-wrap:wrap}
  .cc-acts>*,.wiz-nav>*{flex:1 1 auto}

  /* the accordion header is a full-width target; keep its caret clear
     of the summary so a thumb aiming at one does not land on the other */
  .sw-head{padding:12px 14px;gap:14px}
  .sw-caret{width:20px;height:20px}
  .sw-caret::after{left:5px;top:6px}

  /* nothing tappable should sit flush against the next thing */
  .rig-mid,.cc-scroll,.sw-inner{--tap-gap:10px}
  .sw-grp+.sw-grp{margin-top:2px}
  .rig-total,.cc-foot{padding-top:14px}

  /* the dock is the one bar that is always under a thumb */
  .rail-btn{min-width:46px;min-height:46px}
  .rail{gap:6px}
}

/* Coarse pointers on a wide screen — a touch laptop or a tablet in
   landscape — get the sizes without the reflow. */
@media (pointer:coarse) and (min-width:861px){
  .stepper button{width:38px;height:38px}
  .prime-btn,.ghost-btn,.chip,.cat,.sw-head,.a-add,.pk-cta{min-height:40px}
  .tile-row,.opt-grid,.cc-acts{gap:9px}
}

/* ══════════════════════════════════════════════════════════════
   34. mobile layout — stack what does not fit
   Looked at 390 px in a real render rather than measured: the bento
   was still two-up, so "AI Website Builder" wrapped to three lines
   in a 150 px column; the window tab bar broke its labels mid-phrase
   because nothing stopped them wrapping; the window title sat under
   the Client Area button; and the dock scrolled sideways, hiding
   apps. Same design language throughout — nothing here restyles a
   component, it only changes how many of them sit on a row.
   ══════════════════════════════════════════════════════════════ */

/* a tab label is a label, not a paragraph: let the bar scroll instead */
.wt-tabs button{white-space:nowrap}

@media (max-width:620px){
  /* the window title and the Client Area button were overlapping. The button
     stays — signed out, it is the ONLY way into the panel on a phone, because
     the dock hides both panel icons until there is a session. The title goes:
     the lit dock icon already says which app you are in. */
  .win:not(.has-flow) .wt{display:none}
  .wt-act .prime-btn{padding:0 14px;font-size:12.5px}

  /* three dials at 132px cannot share a 390px row, so the third one used to
     drop to a lonely left-aligned line */
  .dials{flex-wrap:wrap;justify-content:center;gap:10px}
}

@media (max-width:560px){
  /* one tile per row. Half-width tiles at this size gave the AI card a 150px
     column, which is narrower than its own title. */
  .bento{grid-auto-rows:minmax(76px,auto);gap:10px}
  .span-2,.span-3,.span-4,.span-5,.span-6,.span-7,.span-8,.span-9{grid-column:span 12}
  .row-2{grid-row:span 1}

  /* Eleven apps at a tappable size cannot fit one 390px row, and a
     sideways-scrolling dock hides apps behind an edge nobody looks for.
     Two rows of six fit — but only if the bar is given an explicit width:
     it is an absolutely-positioned flex box, so wrapping a content-sized
     one just produced three ragged rows. 6*42 + 5*5 + 16 padding = 293. */
  /* 6*42 + 5*7 + 16 padding = 303 — six per row, and the 7px gap keeps the
     dock inside the same 10px separation the rest of this pass enforces */
  .rail{flex-wrap:wrap;justify-content:center;overflow:visible;gap:7px;
    padding:8px;width:303px;max-width:calc(100vw - 20px)}
  .rail-sep{display:none}
  .rail-btn{min-width:42px;min-height:42px;width:42px;height:42px}
  /* the bar is two rows tall now, so the stage has to give it the room */
  .stage{padding-bottom:calc(var(--nav-h) + 44px)}

  /* two-column forms and split heads read better stacked than squeezed */
  .field-grid{grid-template-columns:1fr}
  .split-head{flex-direction:column;align-items:flex-start;gap:4px}
  .finder-xl{flex-wrap:wrap}
  .finder-xl input{flex:1 1 100%}
  .lic-foot{flex-wrap:wrap;gap:8px}
  .net-legend{flex-wrap:wrap}
}

/* ── 34.1 the VDS builder, stacked ──────────────────────────────
   At 390px the two columns stacked but kept sharing a fixed height:
   .rig-cols is stretched by its host, so `height:auto` still resolved
   to the host's height and the grid split 604px between two rows that
   needed 550 and 309. The left column's own panels then overflowed it
   and drew straight through the right column. Below 1100px the builder
   is a document, not a fitted panel — nothing here may be height-bound.
   ─────────────────────────────────────────────────────────────── */
@media (max-width:1100px){
  /* the HOST is the one holding the height: .metal-list.rig-host is a
     604px flex box, so the grid inside it was stretched no matter what
     `height:auto` said. Let the host be an ordinary block on a phone. */
  .rig-host{display:block;height:auto;min-height:0}
  .rig-cols{height:auto;align-self:start;align-content:start}
  .rig-left,.rig-right{height:auto;min-height:0;align-self:start}
  .rig-stage{flex:0 0 auto;min-height:210px}
  .rig-size{flex:0 0 auto;max-height:none}
  .rig-panel{min-height:0}
  .rig-mid{overflow:visible;min-height:0;flex:0 0 auto}
  /* the footers are pinned only because the panel is a fixed box; once it
     scrolls with the page they are simply the last thing in it */
  .rig-sub,.rig-total{position:static}
}

/* ── legal cards as links ────────────────────────────────────────────
   These were <button> and are now <a>, so the thirteen legal documents open
   at their own real, quotable URLs rather than in a copy inside the panel.
   The element-level `a` defaults would otherwise colour and underline them. */
.legal-card{color:var(--ink);text-decoration:none}
.legal-card:hover{text-decoration:none}
.legal-grid--more{margin-top:10px}