/* ============================================================
   BLOSSOM HOST — concept-03 "DROP"
   Shared stylesheet: landing + full customer app
   Direction: bold drop-culture, black + hot sakura pink
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  /* ink surfaces — layered elevation */
  --ink:#0B0A0C;          /* base */
  --ink-1:#100E12;        /* app background */
  --ink-2:#16131A;        /* raised panel */
  --ink-3:#1F1B25;        /* card / input */
  --ink-4:#2A2531;        /* hover / elevated chip */
  --paper:#F6EDF0;
  --paper-dim:#CDC4CC;
  --muted:#8A8290;
  --muted-2:#645D6C;

  --sakura:#FF2E88;
  --sakura-deep:#C2185B;
  --sakura-soft:rgba(255,46,136,.12);
  --bloom:#FF77AE;
  --go:#C8FF3D;
  --go-deep:#9ED40c;
  --warn:#FFC83D;
  --bad:#FF5470;

  --line:rgba(246,237,240,0.10);
  --line-2:rgba(246,237,240,0.20);
  --line-3:rgba(246,237,240,0.32);

  --disp:"Archivo Expanded","Archivo",sans-serif;
  --disp-c:"Archivo",sans-serif;
  --body:"Hanken Grotesk",sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;

  --shadow-card:0 18px 50px -30px rgba(0,0,0,.9);
  --shadow-pop:0 30px 80px -28px rgba(255,46,136,.40), 0 20px 60px -30px rgba(0,0,0,.8);
  --r:14px; --r-sm:8px;
  --maxw:1240px;
  --appw:1360px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--ink); color:var(--paper); font-family:var(--body);
  font-size:1.02rem; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
button{font-family:inherit}
input,select,textarea{font-family:inherit}
::selection{background:var(--sakura); color:#fff}
:focus-visible{outline:2px solid var(--go); outline-offset:2px; border-radius:3px}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,48px)}
.mono{font-family:var(--mono)}
.eyebrow{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.2em;
  color:var(--sakura); display:inline-flex; align-items:center; gap:.6em}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--sakura); display:inline-block}

/* grain atmosphere */
.grain{position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.045; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ---------- BUTTONS ---------- */
.btn{font-family:var(--mono); text-transform:uppercase; letter-spacing:.06em; font-weight:700;
  font-size:.82rem; padding:13px 22px; cursor:pointer; border:0; display:inline-flex; align-items:center;
  justify-content:center; gap:9px; transition:transform .12s, background .15s, color .15s, border-color .15s; white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-pink{background:var(--sakura); color:#fff;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
.btn-pink:hover{background:#fff; color:var(--ink); transform:translateY(-2px)}
.btn-go{background:var(--go); color:var(--ink)}
.btn-go:hover{background:#fff; transform:translateY(-2px)}
.btn-ghost{background:transparent; color:var(--paper); border:1px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--paper); transform:translateY(-2px)}
.btn-dark{background:var(--ink-3); color:var(--paper); border:1px solid var(--line-2)}
.btn-dark:hover{background:var(--ink-4); border-color:var(--line-3)}
/* branded OAuth login buttons */
.btn-discord{background:#5865F2; color:#fff; border:1px solid #5865F2; display:inline-flex; align-items:center; justify-content:center; gap:10px}
.btn-discord:hover{background:#4752C4; border-color:#4752C4; transform:translateY(-2px)}
.btn-discord svg{flex:0 0 auto}
.btn-telegram{background:#229ED9; color:#fff; border:1px solid #229ED9; display:inline-flex; align-items:center; justify-content:center; gap:10px}
.btn-telegram:hover{background:#1c87ba; border-color:#1c87ba; transform:translateY(-2px)}
.btn-telegram svg{flex:0 0 auto}
.tg-widget{display:flex; justify-content:center; min-height:48px}
.btn-danger{background:transparent; color:var(--bad); border:1px solid rgba(255,84,112,.4)}
.btn-danger:hover{background:rgba(255,84,112,.12); border-color:var(--bad)}
.btn-sm{padding:9px 15px; font-size:.74rem}
.btn-lg{padding:16px 28px; font-size:.9rem}
.btn-block{width:100%}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none !important}

/* spinner inside buttons / loading */
.spin{width:14px;height:14px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;
  display:inline-block;animation:spin .7s linear infinite}
.btn-go .spin,.btn-pink:hover .spin{border-color:rgba(0,0,0,.3);border-top-color:#000}
@keyframes spin{to{transform:rotate(360deg)}}

/* status chips */
.chip{font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em;
  padding:4px 9px; border-radius:999px; display:inline-flex; align-items:center; gap:6px; font-weight:700; white-space:nowrap}
.chip .led{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.chip.running{background:rgba(200,255,61,.12); color:var(--go)}
.chip.running .led{background:var(--go); box-shadow:0 0 7px var(--go)}
.chip.provisioning{background:rgba(255,200,61,.12); color:var(--warn)}
.chip.provisioning .led{background:var(--warn); box-shadow:0 0 7px var(--warn); animation:blink 1s infinite}
.chip.rebuilding{background:rgba(255,200,61,.12); color:var(--warn)}
.chip.rebuilding .led{background:var(--warn); animation:blink 1s infinite}
.chip.suspended{background:rgba(138,130,144,.15); color:var(--muted)}
.chip.suspended .led{background:var(--muted)}
.chip.rebooting{background:rgba(255,119,174,.14); color:var(--bloom)}
.chip.rebooting .led{background:var(--bloom); animation:blink .6s infinite}
.chip.paid{background:rgba(200,255,61,.12); color:var(--go)}
.chip.due{background:rgba(255,200,61,.12); color:var(--warn)}
.chip.metal{background:var(--sakura-soft); color:var(--sakura)}
.chip.metal .led{background:var(--sakura)}
@keyframes blink{50%{opacity:.3}}

.pulse{width:8px;height:8px;border-radius:50%;background:var(--go);
  box-shadow:0 0 0 0 rgba(200,255,61,.6);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(200,255,61,.6)}70%{box-shadow:0 0 0 10px rgba(200,255,61,0)}100%{box-shadow:0 0 0 0 rgba(200,255,61,0)}}

/* ============================================================
   ROUTER VIEWS
   ============================================================ */
.view{display:none}
.view.active{display:block}
body.app-mode{background:var(--ink-1)}

/* ============================================================
   LANDING — NAV
   ============================================================ */
header.nav{position:sticky; top:0; z-index:60; backdrop-filter:blur(14px);
  background:rgba(11,10,12,.72); border-bottom:1px solid var(--line)}
.nav-in{display:flex; align-items:center; gap:clamp(16px,3vw,40px); height:68px}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--disp-c); font-weight:900;
  letter-spacing:-.02em; font-size:1.15rem}
.brand img{width:30px; height:30px}
.brand b{color:var(--sakura)}
nav.links{display:flex; gap:26px; margin-left:auto; font-weight:500; font-size:.94rem}
nav.links a{color:var(--paper-dim); transition:color .15s}
nav.links a:hover{color:var(--paper)}
nav.links .nav-cta{display:none}
.nav-cta{font-family:var(--mono); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em;
  background:var(--sakura); color:#fff; padding:10px 18px; border:0; cursor:pointer; font-weight:700;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  transition:transform .12s, background .15s}
.nav-cta:hover{background:var(--sakura-deep); transform:translateY(-1px)}
.nav-signin{margin-left:4px; color:var(--paper-dim); font-weight:600; font-size:.94rem; align-self:center}
.nav-signin:hover{color:var(--paper)}
.burger{display:none; margin-left:auto; background:none; border:1px solid var(--line-2); color:var(--paper);
  width:42px; height:42px; cursor:pointer; font-size:1.2rem}
@media(max-width:900px){
  nav.links{display:none; position:absolute; top:68px; left:0; right:0; flex-direction:column; gap:0;
    background:var(--ink-2); border-bottom:1px solid var(--line); padding:8px}
  nav.links.open{display:flex}
  nav.links a{padding:14px 8px; border-bottom:1px solid var(--line)}
  nav.links .nav-cta{display:block; margin:10px 8px; text-align:center}
  .burger{display:block}
  .nav-in>.nav-cta,.nav-in>.nav-signin{display:none}
}

/* ---------- HERO ---------- */
section{position:relative}
section[id]{scroll-margin-top:84px}
.hero{position:relative; padding-top:clamp(40px,7vh,80px); padding-bottom:clamp(40px,6vh,72px); overflow:hidden}
.hero-field{position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(900px 600px at 78% -10%, rgba(255,46,136,.30), transparent 60%),
    radial-gradient(700px 500px at 8% 110%, rgba(200,255,61,.07), transparent 55%),
    linear-gradient(180deg,#0B0A0C,#0E0B10);}
.hero-field::before{content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:48px 48px; mask-image:radial-gradient(900px 700px at 75% 0,#000,transparent 75%); opacity:.5}
.hero-in{position:relative; z-index:2}
.hero-top{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:clamp(20px,3vh,34px)}
.pill{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.14em;
  border:1px solid var(--line-2); padding:7px 12px; color:var(--paper-dim); display:inline-flex; gap:8px; align-items:center}
.hero h1{font-family:var(--disp); font-weight:900; line-height:.86; letter-spacing:-.02em;
  font-size:clamp(3.4rem,15.5vw,14rem); text-transform:uppercase}
.hero h1 .ln{display:block; overflow:hidden}
.hero h1 .ln span{display:block; transform:translateY(110%)}
.hero h1 .tint{color:var(--sakura)}
.hero h1 .out{color:transparent; -webkit-text-stroke:2px var(--paper); text-stroke:2px var(--paper)}
.anim .hero h1 .ln span{animation:rise .9s cubic-bezier(.16,1,.3,1) forwards}
.anim .hero h1 .ln:nth-child(1) span{animation-delay:.10s}
.anim .hero h1 .ln:nth-child(2) span{animation-delay:.22s}
.anim .hero h1 .ln:nth-child(3) span{animation-delay:.34s}
@keyframes rise{to{transform:translateY(0)}}
.hero-sub{display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,56px); align-items:flex-end; margin-top:clamp(26px,4vh,46px)}
.hero-sub p{max-width:46ch; color:var(--paper-dim); font-size:clamp(1rem,1.4vw,1.18rem)}
.hero-sub p b{color:var(--paper); font-weight:600}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:6px}

.anim [data-reveal]{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1)}
.anim [data-reveal].in{opacity:1; transform:none}

/* ---------- TICKER ---------- */
.ticker{border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--sakura); color:#0B0A0C; overflow:hidden; white-space:nowrap}
.ticker-track{display:inline-flex; will-change:transform; animation:scroll 32s linear infinite}
.anim-off .ticker-track{animation:none}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker span{font-family:var(--disp-c); font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  font-size:1.05rem; padding:14px 0; display:inline-flex; align-items:center}
.ticker span i{font-style:normal; margin:0 26px; opacity:.55}

/* ---------- SECTION SHELL ---------- */
.sec{padding:clamp(5rem,12vh,9rem) 0}
.sec-head{max-width:760px; margin-bottom:clamp(2.4rem,5vh,3.6rem)}
.sec-head h2{font-family:var(--disp); font-weight:800; text-transform:uppercase; line-height:.95;
  letter-spacing:-.01em; font-size:clamp(2.2rem,6vw,4.4rem); margin:.5rem 0 .8rem}
.sec-head p{color:var(--paper-dim); max-width:60ch}

/* stat strip */
.stats{display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); background:var(--ink-2)}
.stat{padding:clamp(20px,3vw,34px); border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat .n{font-family:var(--disp); font-weight:900; font-size:clamp(2rem,4vw,3.2rem); line-height:1; color:var(--paper)}
.stat .n em{font-style:normal; color:var(--sakura)}
.stat .l{font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin-top:10px}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)} .stat:nth-child(2){border-right:0}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line)}}

/* latency board */
.board{background:var(--ink-2); border:1px solid var(--line)}
.board-bar{display:flex; align-items:center; gap:14px; padding:16px clamp(16px,3vw,26px); border-bottom:1px solid var(--line); flex-wrap:wrap}
.board-bar .ttl{font-family:var(--disp-c); font-weight:800; text-transform:uppercase; letter-spacing:.02em; font-size:1.05rem}
.board-bar .live{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--go); display:inline-flex; gap:7px; align-items:center; margin-left:auto}
.board-bar .upd{font-family:var(--mono); font-size:.72rem; color:var(--muted)}
.board-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.brow{display:flex; align-items:center; gap:12px; padding:14px clamp(16px,3vw,22px); border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
.dot{width:9px; height:9px; border-radius:50%; flex:0 0 auto}
.dot.g{background:var(--go); box-shadow:0 0 8px var(--go)}
.dot.y{background:var(--warn); box-shadow:0 0 8px var(--warn)}
.dot.r{background:var(--sakura); box-shadow:0 0 8px var(--sakura)}
.brow .site{font-weight:600; font-size:.92rem; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.brow .ms{font-family:var(--mono); font-size:.86rem; color:var(--paper-dim)}
.brow .ms b{color:var(--paper)}

/* plans + configurator (landing) */
.price-layout{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(20px,3vw,40px); align-items:start}
@media(max-width:920px){.price-layout{grid-template-columns:1fr}}
.plan-list{display:flex; flex-direction:column; gap:10px}
.plan{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; background:var(--ink-2);
  border:1px solid var(--line); padding:18px 20px; cursor:pointer; text-align:left; width:100%; color:inherit;
  font:inherit; transition:border-color .15s, background .15s, transform .12s}
.plan:hover{border-color:var(--line-2); transform:translateX(3px)}
.plan[aria-pressed="true"]{border-color:var(--sakura); background:linear-gradient(90deg,var(--sakura-soft),var(--ink-2) 60%)}
.plan .pn{font-family:var(--disp-c); font-weight:900; font-size:1.18rem; text-transform:uppercase; letter-spacing:-.01em}
.plan .pn small{display:block; font-family:var(--mono); font-weight:400; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--sakura); margin-top:3px}
.plan .specs{font-family:var(--mono); font-size:.8rem; color:var(--muted); display:flex; gap:14px; flex-wrap:wrap}
.plan .specs b{color:var(--paper-dim); font-weight:400}
.plan .pr{font-family:var(--disp); font-weight:900; font-size:1.5rem; white-space:nowrap}
.plan .pr span{font-family:var(--mono); font-size:.7rem; color:var(--muted); font-weight:400}
@media(max-width:540px){.plan{grid-template-columns:1fr auto} .plan .specs{grid-column:1/-1}}

.config{position:sticky; top:88px; background:var(--ink-2); border:1px solid var(--line-2); border-radius:18px;
  padding:clamp(22px,3vw,30px); box-shadow:var(--shadow-pop)}
.toggle{display:flex; background:var(--ink); border:1px solid var(--line); padding:4px; gap:4px; margin-bottom:22px}
.toggle button{flex:1; font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; background:none; color:var(--muted); border:0; padding:11px; cursor:pointer; font-weight:700; transition:.15s}
.toggle button[aria-pressed="true"]{background:var(--sakura); color:#fff}
.config h3{font-family:var(--disp-c); font-weight:900; text-transform:uppercase; font-size:1.5rem; letter-spacing:-.01em}
.ckicker{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--sakura)}
.bigprice{font-family:var(--disp); font-weight:900; font-size:clamp(3rem,7vw,4.4rem); line-height:1; margin:14px 0 2px; display:flex; align-items:flex-start; gap:4px}
.bigprice .cur{font-size:1.6rem; margin-top:.3em; color:var(--sakura)}
.bigprice .per{font-family:var(--mono); font-size:.8rem; color:var(--muted); align-self:flex-end; margin-bottom:.7em; font-weight:400}
.save{font-family:var(--mono); font-size:.78rem; color:var(--go); min-height:1.2em; margin-bottom:18px}
.cfg-row{margin-bottom:16px}
.cfg-row label{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); display:block; margin-bottom:8px}
.seg{display:flex; gap:6px; flex-wrap:wrap}
.seg button{font-family:var(--mono); font-size:.78rem; background:var(--ink); border:1px solid var(--line); color:var(--paper-dim); padding:9px 13px; cursor:pointer; transition:.15s}
.seg button[aria-pressed="true"]{border-color:var(--sakura); color:#fff; background:var(--sakura-soft)}
.seg button:hover{border-color:var(--line-2)}
.cfg-os, .field{width:100%; font-family:var(--body); font-size:.95rem; background:var(--ink); color:var(--paper); border:1px solid var(--line); padding:12px; cursor:pointer}
.cfg-summary{font-family:var(--mono); font-size:.8rem; color:var(--paper-dim); border-top:1px solid var(--line); margin-top:18px; padding-top:16px; display:flex; flex-direction:column; gap:7px}
.cfg-summary .li{display:flex; justify-content:space-between}
.cfg-summary .li span:last-child{color:var(--paper)}
.config .btn{width:100%; margin-top:18px}
.metal-note{background:var(--sakura-soft); border:1px solid rgba(255,46,136,.3); padding:14px 16px; font-size:.86rem; color:var(--paper-dim); margin-bottom:18px}
.metal-note b{color:var(--paper)}
.hidden{display:none !important}

/* why grid */
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
@media(max-width:840px){.why-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.why-grid{grid-template-columns:1fr}}
.why{background:var(--ink); padding:clamp(22px,3vw,30px); transition:background .2s}
.why:hover{background:var(--ink-2)}
.why img{width:34px; height:34px; margin-bottom:16px}
.why h4{font-family:var(--disp-c); font-weight:800; text-transform:uppercase; font-size:1.05rem; letter-spacing:-.01em; margin-bottom:8px}
.why p{color:var(--muted); font-size:.92rem}

/* metal band */
.metal{background:linear-gradient(135deg,var(--sakura),var(--sakura-deep)); color:#fff; overflow:hidden; position:relative}
.metal::before{content:"BARE METAL"; position:absolute; right:-2%; top:50%; transform:translateY(-50%);
  font-family:var(--disp); font-weight:900; font-size:22vw; color:rgba(255,255,255,.08); white-space:nowrap; pointer-events:none; line-height:.8}
.metal-in{position:relative; z-index:2; display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center}
@media(max-width:840px){.metal-in{grid-template-columns:1fr}}
.metal-in .eyebrow{color:#fff}
.metal-in .eyebrow::before{background:#fff}
.metal-in h2{font-family:var(--disp); font-weight:900; text-transform:uppercase; line-height:.92; font-size:clamp(2.2rem,6vw,4.2rem); margin:14px 0 16px; letter-spacing:-.01em}
.metal-in p{font-size:1.08rem; max-width:52ch; color:rgba(255,255,255,.9)}
.metal-in p b{color:#fff}
.metal-card{background:rgba(11,10,12,.55); border:1px solid rgba(255,255,255,.25); padding:24px; backdrop-filter:blur(4px)}
.mc-row{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.16); font-family:var(--mono); font-size:.86rem}
.mc-row:last-child{border-bottom:0}
.mc-row .ck{color:var(--go); font-weight:700}
.mc-row b{color:#fff; margin-left:auto}

/* comparison */
.compare{border:1px solid var(--line); background:var(--ink-2)}
.crow{display:grid; grid-template-columns:1.4fr 1fr 1fr; border-bottom:1px solid var(--line)}
.crow:last-child{border-bottom:0}
.crow>div{padding:16px clamp(14px,2vw,22px); display:flex; align-items:center; gap:10px}
.crow.head>div{font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.1em}
.crow.head .us{color:var(--sakura)}
.crow .lbl{font-weight:600; border-right:1px solid var(--line)}
.crow .us{border-right:1px solid var(--line); background:var(--sakura-soft); font-weight:600}
.crow .them{color:var(--muted)}
.compare .ck{color:var(--go); font-weight:700}
.compare .x{color:var(--muted)}
@media(max-width:640px){.crow{grid-template-columns:1fr} .crow>div{border-right:0 !important; border-bottom:1px solid var(--line)} .crow>div:last-child{border-bottom:0}}

/* flow */
.flow{display:grid; grid-template-columns:repeat(4,1fr); counter-reset:step}
@media(max-width:780px){.flow{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.flow{grid-template-columns:1fr}}
.step{padding:clamp(20px,3vw,28px); border-left:1px solid var(--line); position:relative}
.step:first-child{border-left:0}
@media(max-width:780px){.step:nth-child(odd){border-left:0}}
.step .num{font-family:var(--disp); font-weight:900; font-size:2.6rem; color:transparent; -webkit-text-stroke:1.5px var(--sakura); line-height:1}
.step h4{font-family:var(--disp-c); font-weight:800; text-transform:uppercase; font-size:1.02rem; margin:14px 0 8px}
.step p{color:var(--muted); font-size:.9rem}

/* testimonials */
.tcards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:840px){.tcards{grid-template-columns:1fr}}
.tcard{background:var(--ink-2); border:1px solid var(--line); padding:24px; display:flex; flex-direction:column; gap:16px}
.tcard p{font-size:1rem; color:var(--paper-dim)}
.tcard .who{display:flex; align-items:center; gap:12px; margin-top:auto}
.tcard .av{width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--sakura),var(--sakura-deep)); display:grid; place-items:center; font-family:var(--disp-c); font-weight:900; color:#fff; font-size:.95rem}
.tcard .h{font-family:var(--mono); font-size:.82rem; color:var(--paper)}
.tcard .r{font-family:var(--mono); font-size:.72rem; color:var(--muted)}
.stars{color:var(--go); letter-spacing:2px; font-size:.85rem}

/* faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:22px 0; display:flex; align-items:center; gap:18px; font-family:var(--disp-c); font-weight:800; text-transform:uppercase; font-size:clamp(1rem,2.2vw,1.3rem); letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q{flex:1}
.faq summary .ic{font-family:var(--mono); color:var(--sakura); font-size:1.4rem; transition:transform .2s; flex:0 0 auto}
.faq details[open] summary .ic{transform:rotate(45deg)}
.faq .ans{padding:0 0 24px; color:var(--paper-dim); max-width:72ch}
.faq .ans b{color:var(--paper)}

/* ============================================================
   TAXA — sister product band.
   Sibling brand, same house: it borrows the ink surfaces and the
   type system but takes the leaf-green as its own accent (pink
   stays Blossom Host's) and sets its wordmark in lowercase mono,
   because taxa is an API product whose own rate card is monospace.
   ============================================================ */
.taxa{position:relative; overflow:hidden; background:
  linear-gradient(180deg, var(--ink) 0%, #120F16 40%, #120F16 60%, var(--ink) 100%);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.taxa::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(760px 420px at 72% 50%, rgba(200,255,61,.10), transparent 62%)}
.taxa-in{position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,68px); align-items:center}
@media(max-width:960px){.taxa-in{grid-template-columns:1fr; gap:40px}}

.taxa .eyebrow{color:var(--go)}
.taxa .eyebrow::before{background:var(--go)}

/* wordmark — the one place the sub-brand speaks in its own voice */
.taxa-mark{display:flex; align-items:center; gap:11px; margin:18px 0 8px}
.tsprig{width:38px; height:29px; flex:0 0 auto}
.tsprig path{fill:none; stroke:var(--go); stroke-width:2; stroke-linecap:round}
.tsprig .lf{fill:var(--go); stroke:none}
.taxa-mark .tw{font-family:var(--mono); font-weight:700; font-size:clamp(2.6rem,7vw,3.9rem);
  letter-spacing:-.055em; color:var(--paper); line-height:1}
.taxa-mark .tby{font-family:var(--mono); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.2em; color:var(--sakura)}

.taxa-pitch h2{font-family:var(--disp); font-weight:800; text-transform:uppercase; line-height:.96;
  font-size:clamp(1.7rem,3.6vw,2.7rem); letter-spacing:-.01em; margin:0 0 18px}
.taxa-pitch p{color:var(--paper-dim); max-width:54ch}
.taxa-pitch p b{color:var(--paper)}
.taxa-pitch .taxa-p2{margin-top:12px}

.taxa-claims{margin:26px 0 28px; border-top:1px solid var(--line)}
.taxa-claims div{display:grid; grid-template-columns:minmax(0,15.5em) 1fr; gap:6px 20px;
  padding:13px 0; border-bottom:1px solid var(--line); align-items:baseline}
.taxa-claims dt{font-family:var(--mono); font-size:.84rem; text-transform:uppercase;
  letter-spacing:.055em; color:var(--go)}
.taxa-claims dd{color:var(--muted); font-size:.93rem}
@media(max-width:520px){.taxa-claims div{grid-template-columns:1fr}}

.btn-taxa{background:var(--go); color:var(--ink)}
.btn-taxa:hover{background:#fff; transform:translateY(-2px)}
.taxa-note{margin-top:16px; font-size:.85rem; color:var(--muted-2); max-width:44ch}

/* ---- the classifier ---- */
.taxa-demo{background:rgba(11,10,12,.62); border:1px solid var(--line-2); border-radius:var(--r);
  padding:0; margin:0; backdrop-filter:blur(6px); box-shadow:var(--shadow-card); overflow:hidden}
.tx-bar-top{display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:.76rem}
.tx-dot{width:7px; height:7px; border-radius:50%; background:var(--go); flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(200,255,61,.5); animation:txpulse 2.4s ease-out infinite}
@keyframes txpulse{0%{box-shadow:0 0 0 0 rgba(200,255,61,.45)}70%{box-shadow:0 0 0 7px rgba(200,255,61,0)}100%{box-shadow:0 0 0 0 rgba(200,255,61,0)}}
.tx-ttl{color:var(--paper)}
.tx-meta{margin-left:auto; color:var(--muted-2); text-transform:uppercase; letter-spacing:.1em; font-size:.68rem}

/* The label set, stated once. Every value in the label column below is one of
   these four — that is the product's guarantee, shown rather than asserted. */
.tx-legend{display:flex; flex-wrap:wrap; align-items:center; gap:7px; padding:14px 20px 12px}
.tx-lk{font-family:var(--mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.16em;
  color:var(--muted-2); margin-right:3px}
.tx-chip{font-family:var(--mono); font-size:.7rem; color:var(--paper-dim); border:1px solid var(--line-2);
  border-radius:999px; padding:3px 10px; background:rgba(246,237,240,.03)}

.tx-head,.tx-r{display:grid; grid-template-columns:1fr 5.4em 3.1em; gap:14px; align-items:center}
.tx-head{padding:0 20px 8px; font-family:var(--mono); font-size:.6rem; text-transform:uppercase;
  letter-spacing:.16em; color:var(--muted-2); border-bottom:1px solid var(--line)}
.tx-head span:nth-child(3){text-align:right}

.tx-rows{list-style:none; margin:0; padding:0 20px; min-height:212px;
  -webkit-mask-image:linear-gradient(180deg,#000 68%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 68%,transparent 100%)}
.tx-r{padding:11px 0; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:.78rem;
  transition:opacity .38s ease, transform .38s cubic-bezier(.16,1,.3,1)}
.tx-r.pending{opacity:0; transform:translateY(-10px)}
.tx-t{color:var(--paper-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tx-l{color:var(--muted-2); transition:color .3s ease}
.tx-c{text-align:right; font-variant-numeric:tabular-nums; color:var(--muted-2); transition:color .3s ease}
.tx-r.done .tx-t{color:var(--paper)}
.tx-r.done .tx-l{color:var(--go)}
.tx-r.done .tx-c{color:var(--paper)}

.tx-foot{display:flex; align-items:center; gap:12px; padding:15px 20px; border-top:1px solid var(--line);
  margin-top:14px; font-family:var(--mono); font-size:.72rem; color:var(--muted-2)}
.tx-foot .tx-count em{font-style:normal; color:var(--paper); font-variant-numeric:tabular-nums}
.tx-foot .tx-model{margin-left:auto; color:var(--muted)}

@media(prefers-reduced-motion:reduce){
  .tx-dot{animation:none}
  .tx-text, .tx-track i, .tx-tip, .tx-name, .tx-score{transition:none}
}

/* ---------- email auth form ---------- */
.auth-email{margin-top:20px; display:block}
.pw-wrap{position:relative}
.pw-wrap .field{padding-right:64px; width:100%}
.pw-eye{position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:transparent; border:0; cursor:pointer; padding:6px 8px;
  font-family:var(--mono); font-size:.68rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--muted)}
.pw-eye:hover{color:var(--paper)}

.pw-meter{display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-top:10px}
.pw-meter i{height:4px; border-radius:2px; background:var(--ink-3);
  transition:background .25s ease}
.pw-meter i.low{background:var(--bad)}
.pw-meter i.mid{background:var(--warn)}
.pw-meter i.ok{background:var(--go)}

.pw-rules{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:4px}
.pw-rules li{font-size:.79rem; line-height:1.4; padding-left:18px; position:relative}
.pw-rules li::before{position:absolute; left:0; top:0}
.pw-rules li.bad{color:var(--muted)}
.pw-rules li.bad::before{content:"·"; color:var(--muted-2); font-weight:700}
.pw-rules li.good{color:var(--go)}
.pw-rules li.good::before{content:"✓"}

.auth-err{margin-top:14px; padding:10px 13px; font-size:.85rem; line-height:1.45;
  color:#FFD9E1; background:rgba(255,84,112,.12);
  border:1px solid rgba(255,84,112,.42); border-radius:var(--r-sm)}
.auth-err[hidden]{display:none}

.auth-swap{margin-top:16px; font-size:.86rem; color:var(--muted)}
.auth-swap button{background:none; border:0; padding:0; cursor:pointer;
  color:var(--sakura); font-size:inherit; font-family:inherit; font-weight:600;
  text-decoration:underline; text-underline-offset:3px}
.auth-swap button:hover{color:var(--bloom)}

.auth-or{display:flex; align-items:center; gap:14px; margin:24px 0 18px;
  font-family:var(--mono); font-size:.66rem; text-transform:uppercase;
  letter-spacing:.16em; color:var(--muted-2)}
.auth-or::before,.auth-or::after{content:""; flex:1; height:1px; background:var(--line)}

/* closing */
.closing{background:var(--ink-2); border-top:1px solid var(--line); position:relative; overflow:hidden}
.closing::before{content:""; position:absolute; inset:0; background:radial-gradient(700px 400px at 80% 120%, rgba(255,46,136,.22), transparent 60%)}
.closing-in{position:relative; z-index:2; text-align:center}
.closing h2{font-family:var(--disp); font-weight:900; text-transform:uppercase; line-height:.9; font-size:clamp(2.6rem,9vw,7rem); letter-spacing:-.02em; margin-bottom:18px}
.closing h2 .tint{color:var(--sakura)}
.closing p{color:var(--paper-dim); max-width:50ch; margin:0 auto 30px}
.closing .hero-actions{justify-content:center}

/* footer */
footer.ft{border-top:1px solid var(--line); padding:48px 0 36px; color:var(--muted); font-size:.88rem}
.ft-top{display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:34px}
.ft .brand{color:var(--paper); margin-bottom:14px}
.ft-cols{display:flex; gap:clamp(30px,6vw,80px); flex-wrap:wrap}
.ft-col h5{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--paper); margin-bottom:14px}
.ft-col a{display:block; color:var(--muted); padding:5px 0; transition:color .15s; cursor:pointer}
.ft-col a:hover{color:var(--sakura)}
.ft-bot{border-top:1px solid var(--line); padding-top:22px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--mono); font-size:.76rem}
.pay{display:flex; gap:10px; flex-wrap:wrap; font-family:var(--mono); font-size:.74rem}
.pay span{border:1px solid var(--line-2); padding:5px 10px; color:var(--paper-dim)}

/* ============================================================
   AUTH SCREEN
   ============================================================ */
.auth{min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr}
@media(max-width:860px){.auth{grid-template-columns:1fr}}
.auth-art{position:relative; overflow:hidden; background:linear-gradient(150deg,var(--sakura),var(--sakura-deep) 60%,#7a0f3a);
  padding:clamp(34px,5vw,60px); display:flex; flex-direction:column; justify-content:space-between; color:#fff}
@media(max-width:860px){.auth-art{display:none}}
.auth-art::before{content:"DROP"; position:absolute; left:-3%; bottom:-6%; font-family:var(--disp); font-weight:900;
  font-size:30vw; color:rgba(255,255,255,.08); line-height:.7; pointer-events:none}
.auth-art .brand{color:#fff; font-size:1.3rem; position:relative; z-index:2}
.auth-art .brand b{color:#fff}
.auth-art .tag{position:relative; z-index:2}
.auth-art .tag h2{font-family:var(--disp); font-weight:900; text-transform:uppercase; line-height:.92; font-size:clamp(2.4rem,4.5vw,3.6rem); letter-spacing:-.01em; margin-bottom:14px}
.auth-art .tag p{max-width:36ch; color:rgba(255,255,255,.85)}
.auth-art .artstats{position:relative; z-index:2; display:flex; gap:30px; font-family:var(--mono); font-size:.78rem}
.auth-art .artstats b{display:block; font-family:var(--disp); font-size:1.8rem; font-weight:900}
.auth-form{background:var(--ink-1); display:flex; align-items:center; justify-content:center; padding:clamp(28px,5vw,48px)}
.auth-card{width:100%; max-width:400px}
.auth-card .back{font-family:var(--mono); font-size:.78rem; color:var(--muted); margin-bottom:30px; display:inline-block; cursor:pointer}
.auth-card .back:hover{color:var(--paper)}
.auth-card h1{font-family:var(--disp-c); font-weight:900; text-transform:uppercase; font-size:2rem; letter-spacing:-.01em; margin-bottom:6px}
.auth-card .sub{color:var(--muted); margin-bottom:28px; font-size:.95rem}
.flabel{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); display:block; margin:16px 0 8px}
.field{cursor:text}
.field:focus{border-color:var(--sakura); outline:none}
.auth-tabs{display:flex; gap:0; margin-bottom:24px; border:1px solid var(--line); padding:4px}
.auth-tabs button{flex:1; background:none; border:0; color:var(--muted); font-family:var(--mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; padding:10px; cursor:pointer; font-weight:700}
.auth-tabs button[aria-pressed="true"]{background:var(--sakura); color:#fff}
.auth-note{font-family:var(--mono); font-size:.72rem; color:var(--muted-2); margin-top:18px; text-align:center}
.auth-alt{margin-top:20px; display:flex; gap:10px}
.auth-alt .btn{flex:1}

/* ============================================================
   APP SHELL (dashboard / server / billing / settings)
   ============================================================ */
.app{display:grid; grid-template-columns:248px 1fr; min-height:100vh}
@media(max-width:960px){.app{grid-template-columns:1fr}}
.side{background:var(--ink-2); border-right:1px solid var(--line); display:flex; flex-direction:column; position:sticky; top:0; height:100vh}
@media(max-width:960px){.side{position:fixed; z-index:90; width:248px; left:0; top:0; transform:translateX(-100%); transition:transform .2s} .side.open{transform:none; box-shadow:40px 0 80px -20px rgba(0,0,0,.7)}}
.side-brand{display:flex; align-items:center; gap:10px; padding:18px 20px; border-bottom:1px solid var(--line); font-family:var(--disp-c); font-weight:900; font-size:1.1rem}
.side-brand img{width:28px;height:28px}
.side-brand b{color:var(--sakura)}
.side-nav{padding:14px 12px; display:flex; flex-direction:column; gap:3px; flex:1}
.side-nav .navlbl{font-family:var(--mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.14em; color:var(--muted-2); padding:14px 12px 6px}
.snav{display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:var(--r-sm); color:var(--paper-dim); font-weight:600; font-size:.92rem; cursor:pointer; border:0; background:none; width:100%; text-align:left; transition:background .14s, color .14s}
.snav:hover{background:var(--ink-3); color:var(--paper)}
.snav.active{background:var(--sakura-soft); color:var(--paper)}
.snav.active .ic{color:var(--sakura)}
.snav .ic{width:18px; height:18px; flex:0 0 auto; opacity:.9}
.snav .badge{margin-left:auto; font-family:var(--mono); font-size:.62rem; background:var(--sakura); color:#fff; border-radius:999px; padding:2px 7px; font-weight:700}
.side-foot{padding:14px; border-top:1px solid var(--line)}
.side-user{display:flex; align-items:center; gap:10px; padding:8px; border-radius:var(--r-sm)}
.side-user .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--sakura),var(--sakura-deep)); display:grid; place-items:center; font-family:var(--disp-c); font-weight:900; color:#fff; font-size:.85rem; flex:0 0 auto}
.side-user .meta{min-width:0}
.side-user .nm{font-weight:700; font-size:.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.side-user .em{font-family:var(--mono); font-size:.68rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.main{min-width:0; display:flex; flex-direction:column}
.topbar{position:sticky; top:0; z-index:50; background:rgba(16,14,18,.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:16px; padding:14px clamp(18px,3vw,34px)}
.topbar .mbtn{display:none; background:none; border:1px solid var(--line-2); color:var(--paper); width:40px; height:40px; cursor:pointer; font-size:1.1rem}
@media(max-width:960px){.topbar .mbtn{display:block}}
.topbar h1{font-family:var(--disp-c); font-weight:900; text-transform:uppercase; font-size:1.3rem; letter-spacing:-.01em}
.topbar .crumb{font-family:var(--mono); font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}
.topbar .sp{flex:1}
.content{padding:clamp(20px,3.5vw,38px); flex:1}
.content-narrow{max-width:1080px}

/* page header within content */
.phead{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:26px}
.phead h2{font-family:var(--disp); font-weight:800; text-transform:uppercase; font-size:clamp(1.6rem,3.5vw,2.6rem); line-height:1; letter-spacing:-.01em}
.phead .psub{color:var(--muted); margin-top:8px; font-size:.95rem}

/* metric cards row */
.metrics{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:26px}
@media(max-width:860px){.metrics{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.metrics{grid-template-columns:1fr}}
.metric{background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; position:relative; overflow:hidden}
.metric::after{content:""; position:absolute; right:-20px; top:-20px; width:80px; height:80px; border-radius:50%; background:var(--sakura-soft)}
.metric .ml{font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted)}
.metric .mv{font-family:var(--disp); font-weight:900; font-size:2rem; line-height:1.1; margin-top:8px; position:relative; z-index:2}
.metric .mv em{font-style:normal; color:var(--sakura)}
.metric .md{font-size:.78rem; color:var(--muted); margin-top:4px}

/* server cards grid */
.srv-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:16px}
.srv-card{background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r); padding:20px; display:flex; flex-direction:column; gap:16px; transition:border-color .15s, transform .14s, box-shadow .2s; cursor:pointer; position:relative}
.srv-card:hover{border-color:var(--line-2); transform:translateY(-3px); box-shadow:var(--shadow-card)}
.srv-card .sc-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.srv-card .sc-name{font-family:var(--disp-c); font-weight:900; font-size:1.2rem; text-transform:uppercase; letter-spacing:-.01em}
.srv-card .sc-os{font-family:var(--mono); font-size:.72rem; color:var(--muted); margin-top:3px}
.srv-card .sc-ip{font-family:var(--mono); font-size:.86rem; color:var(--paper-dim); display:flex; align-items:center; gap:8px}
.srv-card .sc-ip .copy{cursor:pointer; color:var(--muted); font-size:.72rem; border:1px solid var(--line); padding:2px 7px; border-radius:5px}
.srv-card .sc-ip .copy:hover{color:var(--paper); border-color:var(--line-2)}
.srv-card .sc-specs{display:flex; gap:16px; flex-wrap:wrap; font-family:var(--mono); font-size:.76rem; color:var(--muted); border-top:1px solid var(--line); padding-top:14px}
.srv-card .sc-specs b{color:var(--paper-dim); font-weight:400}
.srv-card .sc-transfer{padding:12px;border:1px solid var(--line);border-radius:11px;background:rgba(0,0,0,.14)}
.sc-transfer-head,.sc-transfer-meta{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sc-transfer-head span{font-family:var(--mono);font-size:.57rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.sc-transfer-head b{font-family:var(--mono);font-size:.76rem;color:var(--paper);text-align:right}
.sc-transfer-bar{height:7px;margin:9px 0;background:var(--ink-4);border-radius:999px;overflow:hidden}
.sc-transfer-bar i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--go),var(--sakura));transition:width .4s ease}
.sc-transfer-meta{font-family:var(--mono);font-size:.56rem;color:var(--muted)}
.sc-transfer.warn{border-color:rgba(255,190,72,.34)}
.sc-transfer.warn .sc-transfer-bar i{background:linear-gradient(90deg,var(--warn),var(--sakura))}
.sc-transfer.full{border-color:rgba(255,84,112,.42)}
.sc-transfer.full .sc-transfer-head b{color:var(--bad)}
.sc-transfer.full .sc-transfer-bar i{background:var(--bad)}
.sc-transfer.unavailable{opacity:.72}
.srv-card .sc-foot{display:flex; align-items:center; gap:10px; margin-top:auto}
.srv-card .sc-foot .btn{flex:1}
.srv-card.is-metal{border-left:3px solid var(--sakura)}
/* provisioning progress bar on card */
.provbar{height:5px; background:var(--ink-4); border-radius:999px; overflow:hidden}
.provbar i{display:block; height:100%; background:linear-gradient(90deg,var(--sakura),var(--bloom)); width:0%; transition:width .5s ease}
.prov-pct{font-family:var(--mono); font-size:.72rem; color:var(--warn)}

/* empty state */
.empty{border:1px dashed var(--line-2); border-radius:var(--r); padding:clamp(40px,7vw,70px) 24px; text-align:center; background:var(--ink-2)}
.empty .ei{font-size:2.4rem; margin-bottom:14px; opacity:.8}
.empty h3{font-family:var(--disp-c); font-weight:800; text-transform:uppercase; font-size:1.4rem; margin-bottom:8px}
.empty p{color:var(--muted); max-width:42ch; margin:0 auto 22px}

/* ============================================================
   SERVER DETAIL
   ============================================================ */
.srv-hero{background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r); padding:clamp(20px,3vw,28px); margin-bottom:22px; position:relative; overflow:hidden}
.srv-hero.is-metal::before{content:"METAL"; position:absolute; right:-1%; top:50%; transform:translateY(-50%); font-family:var(--disp); font-weight:900; font-size:9rem; color:var(--sakura-soft); line-height:.7; pointer-events:none}
.srv-hero .sh-top{display:flex; align-items:flex-start; gap:18px; flex-wrap:wrap; position:relative; z-index:2}
.srv-hero .sh-name{font-family:var(--disp); font-weight:900; text-transform:uppercase; font-size:clamp(1.8rem,4vw,2.8rem); line-height:.95; letter-spacing:-.01em}
.srv-hero .sh-sub{font-family:var(--mono); font-size:.82rem; color:var(--muted); margin-top:8px; display:flex; gap:16px; flex-wrap:wrap}
.srv-hero .sh-actions{margin-left:auto; display:flex; gap:10px; flex-wrap:wrap}
@media(max-width:680px){.srv-hero .sh-actions{margin-left:0; width:100%}}

.grid-2{display:grid; grid-template-columns:1.4fr .9fr; gap:18px; align-items:start}
@media(max-width:920px){.grid-2{grid-template-columns:1fr}}
.panel{background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.panel-h{display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line)}
.panel-h h3{font-family:var(--disp-c); font-weight:800; text-transform:uppercase; font-size:1rem; letter-spacing:-.005em}
.panel-h .sp{flex:1}
.panel-b{padding:20px}

/* spec table */
.spec-tab{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line)}
.spec-tab .st{background:var(--ink-2); padding:14px 16px}
.spec-tab .st .k{font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
.spec-tab .st .v{font-weight:600; margin-top:5px; display:flex; align-items:center; gap:8px}
.spec-tab .st .v img{width:16px;height:16px}

/* action buttons grid */
.act-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.act{display:flex; align-items:center; gap:12px; padding:14px; background:var(--ink-3); border:1px solid var(--line); border-radius:var(--r-sm); cursor:pointer; text-align:left; transition:background .14s, border-color .14s}
.act:hover{background:var(--ink-4); border-color:var(--line-2)}
.act:disabled{opacity:.4; cursor:not-allowed}
.act img{width:20px;height:20px; flex:0 0 auto}
.act .at{font-weight:700; font-size:.88rem}
.act .ad{font-size:.74rem; color:var(--muted)}
.act.danger:hover{border-color:rgba(255,84,112,.5); background:rgba(255,84,112,.08)}

/* credentials box */
.creds{font-family:var(--mono); font-size:.86rem}
.cred-row{display:flex; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid var(--line)}
.cred-row:last-child{border-bottom:0}
.cred-row .ck{color:var(--muted); width:88px; flex:0 0 auto; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em}
.cred-row .cv{flex:1; color:var(--paper); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cred-row .cv.masked{letter-spacing:2px; color:var(--muted)}
.cred-row .cbtn{cursor:pointer; color:var(--muted); border:1px solid var(--line); padding:4px 8px; border-radius:5px; font-size:.7rem}
.cred-row .cbtn:hover{color:var(--paper); border-color:var(--line-2)}

/* action log timeline */
.log{position:relative}
.log-item{display:flex; gap:14px; padding:12px 0; border-bottom:1px solid var(--line)}
.log-item:last-child{border-bottom:0}
.log-item .ldot{width:9px;height:9px;border-radius:50%;background:var(--sakura);margin-top:6px;flex:0 0 auto;box-shadow:0 0 0 4px var(--sakura-soft)}
.log-item.ok .ldot{background:var(--go); box-shadow:0 0 0 4px rgba(200,255,61,.12)}
.log-item.warn .ldot{background:var(--warn); box-shadow:0 0 0 4px rgba(255,200,61,.12)}
.log-item .lmain{flex:1; min-width:0}
.log-item .lt{font-weight:600; font-size:.9rem}
.log-item .ld{font-size:.8rem; color:var(--muted)}
.log-item .ltime{font-family:var(--mono); font-size:.7rem; color:var(--muted-2); white-space:nowrap}

/* usage bars */
.usage{display:flex; flex-direction:column; gap:16px}
.usage .u{display:flex; flex-direction:column; gap:7px}
.usage .ul{display:flex; justify-content:space-between; font-family:var(--mono); font-size:.78rem}
.usage .ul .uv{color:var(--paper-dim)}
.ubar{height:8px; background:var(--ink-4); border-radius:999px; overflow:hidden}
.ubar i{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--sakura),var(--bloom))}
.ubar i.hi{background:linear-gradient(90deg,var(--warn),var(--bad))}

/* ============================================================
   BILLING
   ============================================================ */
.bill-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:18px; align-items:start; margin-bottom:22px}
@media(max-width:920px){.bill-grid{grid-template-columns:1fr}}
.table{width:100%; border-collapse:collapse; font-size:.9rem}
.table th{font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); text-align:left; padding:12px 16px; border-bottom:1px solid var(--line)}
.table td{padding:14px 16px; border-bottom:1px solid var(--line)}
.table tr:last-child td{border-bottom:0}
.table tr:hover td{background:var(--ink-3)}
.table .inv{font-family:var(--mono); font-size:.82rem; color:var(--paper-dim)}
.table .amt{font-family:var(--mono); font-weight:700}
.pm-card{background:linear-gradient(135deg,var(--ink-3),var(--ink-2)); border:1px solid var(--line-2); border-radius:var(--r); padding:22px; position:relative; overflow:hidden}
.pm-card .pm-net{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--sakura)}
.pm-card .pm-no{font-family:var(--mono); font-size:1.2rem; letter-spacing:.12em; margin:16px 0 8px}
.pm-card .pm-row{display:flex; justify-content:space-between; font-family:var(--mono); font-size:.78rem; color:var(--muted)}
.pay-methods{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.pay-methods .pmtag{font-family:var(--mono); font-size:.72rem; border:1px solid var(--line-2); padding:7px 12px; color:var(--paper-dim); cursor:pointer; transition:.14s}
.pay-methods .pmtag.active{border-color:var(--sakura); color:var(--paper); background:var(--sakura-soft)}
.pay-methods .pmtag:hover{border-color:var(--line-3)}

/* ============================================================
   BUY FLOW (in-app)
   ============================================================ */
.buy-phead{align-items:flex-start;margin-bottom:22px}
.buy-phead .eyebrow{margin-bottom:12px}
.buy-assurance{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.buy-assurance span{font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.07em;color:var(--paper-dim);border:1px solid var(--line);border-radius:999px;padding:7px 10px;background:var(--ink-2)}
.buy-assurance span:first-child{color:var(--go)}

.family-switch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:24px}
.family-choice{min-width:0;display:flex;align-items:center;gap:13px;position:relative;text-align:left;background:linear-gradient(145deg,var(--ink-2),rgba(27,24,31,.74));color:var(--paper);border:1px solid var(--line);border-radius:16px;padding:15px;cursor:pointer;overflow:hidden;transition:border-color .16s,transform .16s,background .16s}
.family-choice:hover{border-color:var(--line-3);transform:translateY(-2px)}
.family-choice[aria-pressed="true"]{border-color:var(--sakura);background:linear-gradient(145deg,var(--sakura-soft),var(--ink-2) 68%);box-shadow:0 0 0 1px rgba(255,46,136,.22)}
.family-choice.family-resi[aria-pressed="true"]{border-color:#8e7cff;background:linear-gradient(145deg,rgba(142,124,255,.14),var(--ink-2) 68%);box-shadow:0 0 0 1px rgba(142,124,255,.2)}
.family-orb{width:42px;height:42px;border:1px solid var(--line-2);background:var(--ink-4);border-radius:12px;display:grid;place-items:center;flex:0 0 auto;font-family:var(--mono);font-size:.7rem;font-weight:800;color:var(--sakura)}
.family-isp .family-orb{color:var(--go)}
.family-resi .family-orb{color:#a89cff}
.family-copy{display:flex;min-width:0;flex-direction:column;gap:2px}
.family-copy small{font-family:var(--mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.family-copy b{font-family:var(--disp-c);font-size:.98rem;text-transform:uppercase;white-space:nowrap}
.family-copy em{font-style:normal;font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.family-badge{margin-left:auto;align-self:flex-start;font-family:var(--mono);font-size:.56rem;text-transform:uppercase;letter-spacing:.07em;color:var(--paper-dim);border:1px solid var(--line-2);border-radius:999px;padding:4px 7px;white-space:nowrap}
.family-choice[aria-pressed="true"] .family-badge{color:var(--sakura);border-color:rgba(255,46,136,.35)}
.family-resi[aria-pressed="true"] .family-badge{color:#bcb4ff;border-color:rgba(168,156,255,.35)}

.buy-grid{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(330px,.72fr);gap:20px;align-items:start}
.buy-builder{display:flex;flex-direction:column;gap:16px;min-width:0}
.config-block{background:var(--ink-2);border:1px solid var(--line);border-radius:16px;padding:20px}
.config-step-head{display:flex;align-items:center;gap:10px;margin-bottom:17px}
.config-step-head>span,.payment-head>span{width:28px;height:28px;display:grid;place-items:center;flex:0 0 auto;border:1px solid rgba(255,46,136,.38);border-radius:8px;background:var(--sakura-soft);font-family:var(--mono);font-size:.62rem;color:var(--sakura)}
.config-step-head>div,.payment-head>div{display:flex;min-width:0;flex-direction:column;gap:2px}
.config-step-head b,.payment-head b{font-family:var(--disp-c);text-transform:uppercase;font-size:.94rem}
.config-step-head small,.payment-head small{font-size:.72rem;color:var(--muted)}
.tier-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tier{min-width:0;background:var(--ink-3);color:var(--paper);border:1px solid var(--line);border-radius:13px;padding:14px;cursor:pointer;text-align:left;transition:border-color .14s,transform .12s,background .14s;position:relative}
.tier:hover{border-color:var(--line-3);transform:translateY(-2px)}
.tier[aria-pressed="true"]{border-color:var(--sakura);background:linear-gradient(145deg,var(--sakura-soft),var(--ink-3) 72%);box-shadow:0 0 0 1px rgba(255,46,136,.22)}
.tier-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.tier .tn{font-family:var(--disp-c);font-weight:900;font-size:.9rem;text-transform:uppercase}
.tier .tp{font-family:var(--disp);font-weight:900;font-size:1.16rem;line-height:1}
.tier .tp span{font-family:var(--mono);font-size:.56rem;color:var(--muted);font-weight:400}
.tier-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:16px 0 10px;padding:13px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tier-metrics.has-hdd{grid-template-columns:repeat(2,1fr)}
.tier-metrics span{display:flex;flex-direction:column;gap:4px;min-width:0}
.tier-metrics b{font-family:var(--mono);font-size:.9rem;line-height:1.1;white-space:nowrap;color:var(--paper)}
.tier-metrics small{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.tier-network{display:flex;flex-direction:column;gap:6px;margin:0 0 13px;padding:10px;border:1px solid var(--line);border-radius:9px;background:rgba(0,0,0,.14)}
.tier-network span{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tier-network b{font-family:var(--mono);font-size:.8rem;color:var(--paper)}
.tier-network small{font-family:var(--mono);font-size:.59rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.tier[aria-pressed="true"] .tier-network{border-color:rgba(255,46,136,.22);background:rgba(255,46,136,.05)}
.tier-check{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.tier-check span{width:8px;height:8px;border:1px solid var(--line-3);border-radius:50%}
.tier[aria-pressed="true"] .tier-check{color:var(--paper)}
.tier[aria-pressed="true"] .tier-check span{border-color:var(--sakura);background:var(--sakura);box-shadow:0 0 8px var(--sakura)}
.tier .pop{position:absolute;top:-8px;right:10px;font-family:var(--mono);font-size:.52rem;text-transform:uppercase;letter-spacing:.08em;background:var(--go);color:var(--ink);padding:3px 7px;border-radius:999px;font-weight:800}
/* Sold-out tiers stay on the page so the ladder still reads as a full range,
   but they must be unmistakably unbuyable. */
.tier.tier-oos{opacity:.42;cursor:not-allowed;filter:saturate(.25)}
.tier.tier-oos:hover{border-color:var(--line);transform:none}
.tier.tier-oos .tier-check{color:var(--muted)}
.tier .pop-oos{background:var(--muted);color:var(--paper)}

.config-pair{display:grid;grid-template-columns:1fr 1.2fr;gap:22px}
.config-half+.config-half{border-left:1px solid var(--line);padding-left:22px}
.field-large{min-height:48px}
.included-note{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:.72rem;color:var(--go)}
.term-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.term-cards button{position:relative;display:flex;min-width:0;min-height:64px;flex-direction:column;align-items:center;justify-content:center;background:var(--ink-3);color:var(--paper);border:1px solid var(--line);border-radius:10px;cursor:pointer}
.term-cards button:hover{border-color:var(--line-3)}
.term-cards button[aria-pressed="true"]{border-color:var(--sakura);background:var(--sakura-soft)}
.term-cards b{font-family:var(--disp);font-size:1.05rem;line-height:1}
.term-cards small{font-family:var(--mono);font-size:.52rem;text-transform:uppercase;color:var(--muted)}
.term-cards em{position:absolute;top:-6px;right:4px;font-family:var(--mono);font-size:.46rem;font-style:normal;text-transform:uppercase;color:var(--muted);background:var(--ink-4);border:1px solid var(--line);border-radius:999px;padding:2px 5px}
.term-cards button[aria-pressed="true"] em{color:var(--go);border-color:rgba(200,255,61,.28)}
.addon-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.addon-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;padding:12px;background:var(--ink-3);border:1px solid var(--line);border-radius:11px}
.addon-copy{min-width:0}
.addon-copy>div{font-weight:750;font-size:.82rem}
.addon-copy small{display:block;margin-top:2px;color:var(--muted);font-size:.67rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.addon-action{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.addon-price{font-family:var(--mono);font-size:.62rem;color:var(--paper-dim);white-space:nowrap}

.summary-card{position:sticky;top:82px;background:linear-gradient(155deg,var(--ink-2),#111014);border:1px solid var(--line-2);border-radius:18px;padding:22px;box-shadow:var(--shadow-pop);overflow:hidden}
.summary-card::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,var(--sakura),var(--go));opacity:.8}
.summary-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.summary-head h3{margin-top:5px;font-family:var(--disp);font-size:1.45rem;text-transform:uppercase}
.summary-family{font-family:var(--mono);font-size:.55rem;text-transform:uppercase;letter-spacing:.06em;color:var(--paper-dim);border:1px solid var(--line-2);border-radius:999px;padding:5px 7px}
.summary-price{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:16px 0 4px}
.summary-price .bigprice{margin:0}
.summary-price .save{margin:0;text-align:right}
.summary-lines{margin-top:12px!important;padding-top:13px!important}
.due-today{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:14px 0 18px;padding:14px;border:1px solid rgba(200,255,61,.22);border-radius:12px;background:rgba(200,255,61,.06)}
.due-today>span{display:flex;flex-direction:column;gap:2px}
.due-today small{font-family:var(--mono);font-size:.56rem;text-transform:uppercase;color:var(--go)}
.due-today b{font-size:.76rem;color:var(--paper-dim)}
.due-today strong{font-family:var(--disp);font-size:1.5rem}
.payment-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.payment-grid{display:grid;gap:8px}
.payment-choice{width:100%;display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;text-align:left;background:var(--ink-3);color:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px;cursor:pointer;transition:border-color .14s,background .14s,transform .14s}
.payment-choice:hover{border-color:var(--line-3);transform:translateY(-1px)}
.payment-choice:disabled{opacity:.52;cursor:not-allowed;transform:none}
.payment-choice[aria-pressed="true"]{border-color:var(--sakura);background:linear-gradient(90deg,var(--sakura-soft),var(--ink-3));box-shadow:0 0 0 1px rgba(255,46,136,.2)}
.method-mark{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:10px;background:var(--ink-4);font-family:var(--disp);font-weight:900;color:var(--paper)}
.payment-choice[aria-pressed="true"] .method-mark{border-color:rgba(255,46,136,.42);color:var(--sakura)}
.method-copy{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.method-copy>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.method-copy b{font-size:.78rem}
.method-copy small{display:block;color:var(--muted);font-size:.64rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.method-copy em{font-family:var(--mono);font-style:normal;font-size:.48rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 5px;white-space:nowrap}
.method-state{font-family:var(--mono);font-size:.5rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.method-state.is-live{color:var(--go)}
.checkout-cta{margin-top:13px;min-height:48px}
.checkout-note{margin-top:11px;font-size:.69rem;line-height:1.45;color:var(--muted)}
.checkout-trust{display:flex;flex-direction:column;gap:4px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:.61rem;color:var(--paper-dim)}
.checkout-stage{position:relative;top:auto;max-width:680px;margin:0 auto}

/* payment + connection layer */
.provider-row small,.identity-row small{display:block;color:var(--muted);font-size:.74rem}
.provider-row em,.identity-row em{font-family:var(--mono);font-style:normal;font-size:.64rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.provider-preview{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.provider-preview button{background:var(--ink-3);border:1px solid var(--line-2);border-radius:10px;color:var(--paper);padding:16px;text-align:left}
.provider-preview button span{display:block;color:var(--muted);font-size:.74rem;margin-top:3px}
.provider-row,.identity-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.provider-row:last-of-type,.identity-row:last-of-type{border-bottom:0}
.provider-row span,.identity-row span{min-width:0}
.live-dot{color:var(--go)!important}

.residential-preview{border:1px solid var(--line-2);border-radius:20px;background:radial-gradient(circle at 82% 10%,rgba(142,124,255,.16),transparent 32%),linear-gradient(145deg,var(--ink-2),#111014);overflow:hidden}
.resi-hero{display:grid;grid-template-columns:1.35fr .65fr;gap:30px;align-items:center;padding:clamp(26px,4vw,48px);border-bottom:1px solid var(--line)}
.resi-hero h2{font-family:var(--disp);font-size:clamp(2rem,4vw,3.8rem);line-height:.94;text-transform:uppercase;letter-spacing:-.03em;margin:14px 0}
.resi-hero p{max-width:720px;color:var(--paper-dim);font-size:.94rem;line-height:1.65}
.resi-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}
.resi-status{display:flex;flex-direction:column;align-items:flex-start;position:relative;padding:24px;border:1px solid rgba(168,156,255,.28);border-radius:16px;background:rgba(142,124,255,.07)}
.resi-status .pulse{position:absolute;right:18px;top:18px;background:#a89cff;box-shadow:0 0 10px #a89cff}
.resi-status small{font-family:var(--mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.08em;color:#bcb4ff}
.resi-status b{font-family:var(--disp-c);font-size:1.3rem;text-transform:uppercase;margin:8px 0}
.resi-status em{font-style:normal;font-size:.72rem;line-height:1.5;color:var(--muted)}
.resi-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.resi-feature-grid article{padding:25px;border-right:1px solid var(--line)}
.resi-feature-grid article:last-child{border-right:0}
.resi-feature-grid article>span{font-family:var(--mono);font-size:.62rem;color:#a89cff}
.resi-feature-grid article b{display:block;margin:13px 0 7px;font-family:var(--disp-c);text-transform:uppercase}
.resi-feature-grid article p{color:var(--muted);font-size:.76rem;line-height:1.55}
.resi-boundary{display:flex;align-items:center;gap:14px;padding:16px 22px;border-top:1px solid var(--line);background:var(--ink-3)}
.resi-boundary b{font-size:.76rem;white-space:nowrap}
.resi-boundary span{font-size:.7rem;color:var(--muted)}
.resi-boundary .btn{margin-left:auto;white-space:nowrap}

@media(max-width:1180px){
  .family-switch{grid-template-columns:1fr}
  .family-choice{padding:13px 15px}
  .buy-grid{grid-template-columns:minmax(0,1fr) 340px}
  .tier-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .addon-list{grid-template-columns:1fr}
}
@media(max-width:920px){
  .buy-grid{grid-template-columns:1fr}
  .summary-card{position:relative;top:auto}
  .resi-hero{grid-template-columns:1fr}
}
@media(max-width:680px){
  .buy-assurance{justify-content:flex-start}
  .family-copy em{white-space:normal}
  .family-badge{display:none}
  .tier-grid{grid-template-columns:1fr}
  .config-pair{grid-template-columns:1fr}
  .config-half+.config-half{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:20px}
  .term-cards{grid-template-columns:repeat(2,1fr)}
  .addon-row{align-items:flex-start;flex-direction:column}
  .addon-action{width:100%;justify-content:space-between}
  .resi-feature-grid{grid-template-columns:1fr}
  .resi-feature-grid article{border-right:0;border-bottom:1px solid var(--line)}
  .resi-feature-grid article:last-child{border-bottom:0}
  .resi-boundary{align-items:flex-start;flex-direction:column}
  .resi-boundary .btn{margin-left:0}
}

/* real rolling transfer meter */
.usage-head,.usage-split{display:flex;align-items:center;justify-content:space-between;gap:10px}
.usage-head b{font-family:var(--disp);font-size:1.05rem}
.usage-head span,.usage-split{font-family:var(--mono);font-size:.68rem;color:var(--muted)}
.usage-bar{height:9px;background:var(--ink-4);border-radius:999px;overflow:hidden;margin:12px 0}
.usage-bar i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--go),var(--sakura));transition:width .45s ease}
.usage-split{flex-wrap:wrap;justify-content:flex-start}
.usage-split span:not(:last-child)::after{content:"·";margin-left:10px;color:var(--line-2)}

/* ============================================================
   MODAL / DRAWER / TOAST
   ============================================================ */
.overlay{position:fixed; inset:0; background:rgba(5,4,6,.72); backdrop-filter:blur(3px); z-index:200; display:none; align-items:center; justify-content:center; padding:20px; opacity:0; transition:opacity .18s}
.overlay.show{display:flex; opacity:1}
.modal{background:var(--ink-2); border:1px solid var(--line-2); border-radius:var(--r); max-width:480px; width:100%; box-shadow:var(--shadow-pop); transform:translateY(14px) scale(.98); transition:transform .2s; max-height:90vh; overflow:auto}
.overlay.show .modal{transform:none}
.modal-h{padding:22px 24px 0; display:flex; align-items:flex-start; gap:14px}
.modal-h .mi{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto;background:var(--sakura-soft)}
.modal-h .mi img{width:22px;height:22px}
.modal-h.danger .mi{background:rgba(255,84,112,.14)}
.modal-h h3{font-family:var(--disp-c); font-weight:800; text-transform:uppercase; font-size:1.25rem; letter-spacing:-.01em}
.modal-h .msub{color:var(--muted); font-size:.9rem; margin-top:4px}
.modal-b{padding:18px 24px}
.modal-b p{color:var(--paper-dim); font-size:.94rem}
.modal-b .warnbox{background:rgba(255,84,112,.08); border:1px solid rgba(255,84,112,.3); border-radius:var(--r-sm); padding:12px 14px; font-size:.86rem; color:var(--paper-dim); margin-top:14px}
.modal-b .warnbox b{color:var(--bad)}
.modal-f{padding:0 24px 24px; display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap}

/* console drawer */
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(680px,100%); background:#070608; border-left:1px solid var(--line-2); z-index:210; transform:translateX(100%); transition:transform .25s cubic-bezier(.16,1,.3,1); display:flex; flex-direction:column; box-shadow:-40px 0 90px -20px rgba(0,0,0,.8)}
.drawer.show{transform:none}
.drawer-h{display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line); background:var(--ink-2)}
.drawer-h h3{font-family:var(--disp-c); font-weight:800; text-transform:uppercase; font-size:1.05rem}
.drawer-h .dclose{margin-left:auto; background:none; border:1px solid var(--line-2); color:var(--paper); width:34px;height:34px; cursor:pointer}
.term{flex:1; overflow:auto; padding:18px 20px; font-family:var(--mono); font-size:.84rem; line-height:1.7; color:#cfeac0; background:#070608}
.term .tline{white-space:pre-wrap; word-break:break-word}
.term .pfx{color:var(--go)}
.term .dim{color:#5a6b4e}
.term .pk{color:var(--sakura)}
.term-in{display:flex; align-items:center; gap:10px; padding:12px 20px; border-top:1px solid var(--line); background:var(--ink-2); font-family:var(--mono)}
.term-in .pfx{color:var(--go)}
.term-in input{flex:1; background:none; border:0; color:var(--paper); font-family:var(--mono); font-size:.86rem; outline:none}
.cursor{display:inline-block;width:8px;height:15px;background:var(--go);animation:blink 1s step-end infinite;vertical-align:middle}

/* toasts */
.toasts{position:fixed; right:18px; bottom:18px; z-index:300; display:flex; flex-direction:column; gap:10px; max-width:360px}
@media(max-width:520px){.toasts{left:14px; right:14px; max-width:none}}
.toast{background:var(--ink-3); border:1px solid var(--line-2); border-left:3px solid var(--sakura); border-radius:var(--r-sm); padding:14px 16px; box-shadow:var(--shadow-card); display:flex; gap:12px; align-items:flex-start; animation:toastin .25s cubic-bezier(.16,1,.3,1)}
.toast.ok{border-left-color:var(--go)}
.toast.warn{border-left-color:var(--warn)}
.toast.err{border-left-color:var(--bad)}
.toast .ti{font-size:1rem; line-height:1.3}
.toast .tx{flex:1; min-width:0}
.toast .tt{font-weight:700; font-size:.9rem}
.toast .td{font-size:.82rem; color:var(--muted); margin-top:2px}
.toast .tc{cursor:pointer; color:var(--muted); font-size:1rem; flex:0 0 auto}
@keyframes toastin{from{opacity:0; transform:translateX(20px)}to{opacity:1; transform:none}}
.toast.out{animation:toastout .2s forwards}
@keyframes toastout{to{opacity:0; transform:translateX(20px)}}

/* skeleton loading */
.skel{background:linear-gradient(90deg,var(--ink-3) 25%,var(--ink-4) 50%,var(--ink-3) 75%); background-size:200% 100%; animation:shimmer 1.3s infinite; border-radius:6px}
@keyframes shimmer{to{background-position:-200% 0}}

/* small helpers */
.muted{color:var(--muted)}
.flex{display:flex}
.between{display:flex;justify-content:space-between;align-items:center;gap:12px}
.gap8{gap:8px}.gap12{gap:12px}.gap16{gap:16px}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.wrapw{flex-wrap:wrap}
.tag-os{font-family:var(--mono); font-size:.7rem; border:1px solid var(--line-2); padding:3px 8px; border-radius:5px; color:var(--paper-dim)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .pulse,.chip .led{animation:none}
}