/* ==========================================================================
   New store (docs/NEW-STORE.md). Reference: mockups/store-locations-2026-10/store-full.html.
   Loaded after checkout-next.css, which supplies the shared .cx components (stepper, tiles, cards,
   location tiles, mobile bar). Everything here is scoped under .ns (landing) or .cx.ns (flows and the
   after-order page), so app.css and the step-through checkout are never touched.
   ========================================================================== */
.ns{--ns-save:#34d399;--ns-strike:#a3a5a8;--ns-focus:#a5b4fc}
body.theme-light .ns{--ns-save:#14794f;--ns-strike:#5b6170;--ns-focus:#4f46e5}
.ns .sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ns .nw{white-space:nowrap}
.ns h1:focus,.ns h2:focus{outline:none}

/* ── landing: five service cards led by the trimmed storefront art ── */
.ns.ns-landing{max-width:1240px;margin:0 auto;padding:1.5rem 1.5rem 4rem;color:var(--text-primary)}
.ns .lnd-head{max-width:1180px;margin:0 auto 1.4rem;padding:0 .25rem}
.ns .lnd-head h1{margin:0 0 .35rem;font-size:2rem;font-weight:800;letter-spacing:-.02em;color:var(--text-primary)}
.ns .lnd-head p{margin:0;color:var(--text-secondary);font-size:1rem}
.ns .lnd{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem}
/* No lift on the card itself: moving the hover target made it jitter when the cursor sat near an edge (the card slid
   out from under the cursor, lost :hover, dropped back, repeat). The border/glow and the artwork react instead. */
.ns .sv{position:relative;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;text-decoration:none;color:var(--text-primary);border:1.5px solid rgba(var(--sheen),.12);background:rgba(var(--sheen),.02);transition:border-color .15s,box-shadow .15s}
.ns .sv:hover{border-color:rgba(var(--fc),.8);box-shadow:0 14px 34px -18px rgba(var(--fc),.95)}
.ns .sv:focus-visible{outline:2px solid var(--ns-focus);outline-offset:3px}
.ns .sv-art{--k:1;display:grid;place-items:center;height:200px;padding:.6rem;background:radial-gradient(70% 75% at 50% 62%,rgba(var(--fc),.42),rgba(var(--fc),.10) 72%,transparent),linear-gradient(180deg,rgba(var(--fc),.14),rgba(var(--fc),.03));border-bottom:1px solid rgba(var(--fc),.28)}
body.theme-light .ns .sv-art{background:radial-gradient(70% 75% at 50% 62%,rgba(var(--fc),.30),rgba(var(--fc),.08) 72%,transparent),linear-gradient(180deg,rgba(var(--fc),.12),rgba(var(--fc),.02))}
.ns .sv-art img{display:block;width:calc(var(--aw) * 1px * var(--k));height:calc(var(--ah) * 1px * var(--k));max-width:100%;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(0,0,0,.35));transition:transform .2s;backface-visibility:hidden}
body.theme-light .ns .sv-art img{filter:drop-shadow(0 8px 10px rgba(0,0,0,.18))}
.ns .sv:hover .sv-art img{transform:translateY(-3px) scale(1.04)}
.ns .sv-body{flex:1;display:flex;flex-direction:column;gap:.75rem;padding:1rem 1.05rem 1.1rem}
.ns .sv-t{display:flex;flex-direction:column;gap:.3rem}
.ns .sv-t b{font-size:1.18rem;font-weight:800;letter-spacing:-.01em}
.ns .sv-t span{font-size:.88rem;line-height:1.45;color:var(--text-secondary)}
.ns .sv-p{margin-top:auto;padding-right:2.4rem;font-size:.88rem;color:var(--text-secondary)}
.ns .sv-p b{font-size:1.2rem;font-weight:800;color:var(--text-primary)}
.ns .sv-p .strike{text-decoration:line-through;color:var(--ns-strike)} /* running sale (StorePromoPreview) */
.ns .sv-p .sv-was{display:block;font-size:.8rem;line-height:1.3} /* original price on its own line above the sale price, so the row never overflows the card */
.ns .fr-was{display:block;font-size:.8rem;line-height:1.3;font-weight:400} /* fromHtml on type / game cards */
.ns .fr-save{display:block;margin-top:.1rem;font-size:.76rem;font-weight:700;color:var(--ns-save)}
.ns .sv-p .sv-save{display:block;margin-top:.1rem;font-size:.76rem;font-weight:700;color:var(--ns-save)}
.ns .sv-p small{display:block;font-size:.76rem;color:var(--text-muted);margin-top:.15rem}
.ns .sv-go{position:absolute;right:.9rem;bottom:1rem;width:1.9rem;height:1.9rem;display:grid;place-items:center;border-radius:9px;color:var(--text-muted);background:rgba(var(--sheen),.06)}
.ns .sv-go svg{width:1.1rem;height:1.1rem}
.ns .sv:hover .sv-go{color:#fff;background:rgba(var(--fc),1)}
.ns .sv-trust{max-width:1180px;margin:1.2rem auto 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;font-size:.84rem;color:var(--text-secondary)}
.ns .sv-trust li::before{content:"✓ ";color:var(--ns-save);font-weight:800}
.ns .lnd-empty{max-width:1180px;margin:0 auto;padding:1.2rem;border-radius:14px;border:1px dashed rgba(var(--sheen),.2);color:var(--text-secondary)}
@media (max-width:1180px){.ns .lnd{grid-template-columns:repeat(6,minmax(0,1fr))}.ns .lnd .sv{grid-column:span 2}.ns .lnd .sv:nth-child(4):nth-last-child(2){grid-column:2/span 2}}
@media (max-width:760px){
 .ns.ns-landing{padding:1rem 1rem 3rem}
 .ns .lnd{grid-template-columns:minmax(0,1fr);gap:.75rem}.ns .lnd .sv,.ns .lnd .sv:nth-child(4):nth-last-child(2){grid-column:auto}
 .ns .sv{flex-direction:row;border-radius:16px}
 .ns .sv-art{--k:.64;flex:none;width:128px;height:auto;min-height:140px;padding:.4rem;border-bottom:0;border-right:1px solid rgba(var(--fc),.28)}
 .ns .sv-body{min-width:0;padding:.85rem 2.6rem .85rem .9rem;gap:.5rem}
 .ns .sv-t b{font-size:1.08rem}.ns .sv-t span{font-size:.84rem}
 .ns .sv-p{padding-right:0}
 .ns .sv-go{top:50%;bottom:auto;right:.6rem;transform:translateY(-50%)}
 .ns .lnd-head h1{font-size:1.5rem}
}
@media (max-width:380px){.ns .sv-art{--k:.6;width:116px}}

/* ── flow shell ── */
.cx.ns .stepper.n4{grid-template-columns:repeat(4,1fr)}
.cx.ns .layout.solo{grid-template-columns:minmax(0,1fr)}
.cx.ns .err:not(:empty){margin-top:.7rem;font-weight:600}
.cx.ns .note{margin-top:1rem}
.cx.ns .rec-pill,.cx.ns .pop-pill{display:inline-block;font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.14rem .5rem;border-radius:999px;vertical-align:.15em}
.cx.ns .rec-pill{background:rgba(99,102,241,.14);border:1px solid rgba(99,102,241,.55);color:var(--text-primary)}
.cx.ns .pop-pill{margin-left:.4rem;background:var(--accent,#6366f1);color:#fff}
.cx.ns .est{font-size:.72rem;color:var(--text-muted)}
.cx.ns .carried{margin:0 0 1rem;padding:.6rem .85rem;border-radius:12px;font-size:.86rem;color:var(--text-secondary);border:1px solid rgba(99,102,241,.4);background:rgba(99,102,241,.08)}
.cx.ns .carried b{color:var(--text-primary)}
.cx.ns .carried a{white-space:nowrap}
@media (max-width:992px){
 .cx.ns .stepper{padding:.45rem .3rem}
 .cx.ns .stepper .lbl{display:block;font-size:.62rem;font-weight:600;text-align:center;white-space:nowrap}
 .cx.ns .stepper button{flex-direction:column;gap:.2rem;padding:.3rem 0}
 .cx.ns .stepper .dot{width:1.6rem;height:1.6rem;font-size:.72rem}
 .cx.ns .progress{margin:-1.1rem .6rem 1.2rem}
 .cx.ns .mb-ctx{flex:1;min-width:0;font-size:.82rem;line-height:1.3;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis}
 .cx.ns .mb-ctx b{color:var(--text-primary)}
}
@media (max-width:640px){
 .cx.ns .page-head{margin-bottom:1rem}
 .cx.ns .page-head .hint{display:none}
 .cx.ns .page-head h1{font-size:1.35rem}
 .cx.ns .step h2{font-size:1.25rem}
}

/* context chips ("Type: Linux VPS · Change") */
.cx.ns .ctx-row{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.2rem}
.cx.ns .ctx{display:inline-flex;align-items:center;gap:.45rem;max-width:100%;padding:.3rem .35rem .3rem .75rem;border-radius:999px;border:1px solid rgba(var(--sheen),.16);background:rgba(var(--sheen),.04);font-size:.84rem}
.cx.ns .ctx-k{font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.cx.ns .ctx b{min-width:0;overflow-wrap:anywhere}
.cx.ns .ctx a{flex:none;padding:.15rem .55rem;border-radius:999px;font-size:.78rem;font-weight:600;color:var(--cc9bef0);text-decoration:none;background:rgba(99,102,241,.1)}
.cx.ns .ctx a:hover{text-decoration:underline}

/* step 1: type cards */
.cx.ns .tp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.cx.ns .tp{position:relative;display:flex;flex-direction:column;gap:.9rem;padding:1.5rem 1.4rem 1.3rem;border-radius:16px;text-decoration:none;color:var(--text-primary);border:1.5px solid rgba(var(--sheen),.12);background:linear-gradient(160deg,color-mix(in srgb,var(--fc) 9%,transparent),transparent 60%),rgba(var(--sheen),.02);transition:border-color .15s,box-shadow .15s}
.cx.ns .tp:hover{border-color:color-mix(in srgb,var(--fc) 70%,transparent);box-shadow:0 10px 30px -14px color-mix(in srgb,var(--fc) 80%,transparent)}
.cx.ns .tp:focus-visible{outline:2px solid var(--ns-focus);outline-offset:3px}
.cx.ns .tp.is-sel{border-color:var(--sel);box-shadow:0 0 0 1px var(--sel)}
.cx.ns .tp-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:#fff;background:var(--fc)}
.cx.ns .tp-t{display:flex;flex-direction:column;gap:.35rem}
.cx.ns .tp-t b{font-size:1.3rem;font-weight:800;letter-spacing:-.01em}
.cx.ns .tp-sub{font-size:.85rem;font-weight:600;color:var(--text-muted)}
.cx.ns .tp-d{font-size:.9rem;line-height:1.45;color:var(--text-secondary)}
.cx.ns .tp-p{display:flex;flex-direction:column;gap:.1rem;margin-top:auto;padding-top:.85rem;border-top:1px solid rgba(var(--sheen),.08)}
.cx.ns .tp-from{font-size:.9rem;color:var(--text-secondary)}
.cx.ns .tp-from b{font-size:1.35rem;font-weight:800;color:var(--text-primary)}
.cx.ns .tp-n{font-size:.78rem;color:var(--text-muted)}
.cx.ns .tp-go{position:absolute;top:1.4rem;right:1.2rem;width:1.9rem;height:1.9rem;display:grid;place-items:center;border-radius:9px;color:var(--text-muted);background:rgba(var(--sheen),.05)}
.cx.ns .tp-go svg{width:1.1rem;height:1.1rem}
.cx.ns .tp:hover .tp-go{color:#fff;background:var(--fc)}
@media (max-width:860px){
 .cx.ns .tp-grid{grid-template-columns:minmax(0,1fr);gap:.75rem}
 .cx.ns .tp{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ic t" "ic p";column-gap:.9rem;row-gap:.5rem;padding:1rem 2.9rem 1rem 1rem}
 .cx.ns .tp-ic{grid-area:ic;width:42px;height:42px;border-radius:12px}
 .cx.ns .tp-t{grid-area:t}.cx.ns .tp-p{grid-area:p;padding-top:0;border-top:0;flex-direction:row;align-items:baseline;gap:.6rem;flex-wrap:wrap}
 .cx.ns .tp-t b{font-size:1.1rem}.cx.ns .tp-d{font-size:.84rem}.cx.ns .tp-from b{font-size:1.1rem}
 .cx.ns .tp-go{top:50%;right:.8rem;transform:translateY(-50%)}
}

/* step 2: location (map + cards) */
.cx.ns .map{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1rem;align-items:center;margin-bottom:1.1rem;padding:.75rem 1.25rem;border-radius:14px;border:1px solid rgba(var(--sheen),.1);background:radial-gradient(120% 120% at 80% 90%,rgba(99,102,241,.12),transparent 60%),rgba(var(--sheen),.02)}
.cx.ns .map svg{width:100%;height:auto;max-height:250px;display:block}
.cx.ns .map .land{fill:rgba(var(--sheen),.07);stroke:rgba(var(--sheen),.32);stroke-width:1;stroke-linejoin:round}
.cx.ns .map .pin{cursor:pointer}
.cx.ns .map .pin .dot{fill:var(--bg-elevated);stroke:rgba(var(--sheen),.6);stroke-width:2}
.cx.ns .map .pin .ring{fill:none;stroke:var(--sel);stroke-width:2;opacity:0}
.cx.ns .map .pin text{font:700 15px Inter,sans-serif;fill:var(--text-primary)}
.cx.ns .map .pin text.sub{font:600 11.5px Inter,sans-serif;fill:var(--text-muted)}
.cx.ns .map .pin.is-sel .dot{fill:var(--sel);stroke:#fff}
.cx.ns .map .pin.is-sel .ring{opacity:.55}
.cx.ns .map .legend{font-size:.84rem;color:var(--text-secondary)}
.cx.ns .map .legend b{display:block;color:var(--text-primary);font-size:.98rem;margin-bottom:.35rem}
.cx.ns .map .legend table{width:100%;border-collapse:collapse;margin-top:.6rem;font-size:.8rem}
.cx.ns .map .legend th,.cx.ns .map .legend td{padding:.3rem .2rem;border-bottom:1px solid rgba(var(--sheen),.08);text-align:left;font-weight:500}
.cx.ns .map .legend thead th{color:var(--text-muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.cx.ns .map .legend .is-sel{color:var(--text-primary);font-weight:700}
.cx.ns .loc .face{gap:.6rem;padding:1rem 1.1rem}
.cx.ns .loc ul{font-size:.82rem}
.cx.ns .loc .loc-price{align-items:baseline}
.cx.ns .loc .lp-k{font-size:.78rem;font-weight:600;color:var(--text-secondary)}
.cx.ns .loc-grid.one{grid-template-columns:minmax(0,1fr);max-width:520px}
.cx.ns .lat-sm{display:none}
@media (max-width:640px){
 .cx.ns .map{display:none}
 .cx.ns .lat-sm{display:list-item}
 .cx.ns .loc .lp-k{flex-basis:100%}
 .cx.ns .loc .loc-price .now,.cx.ns .loc .loc-price .hint{white-space:nowrap}
}

/* step 3: plan cards (one price, one button). Every block spans the card; on phones only price + button share a row. */
.cx.ns .pl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.85rem}
.cx.ns .pl{display:flex;flex-direction:column;gap:.55rem;padding:1.15rem 1.15rem 1.1rem;border-radius:14px;border:1px solid rgba(var(--sheen),.12);background:rgba(var(--sheen),.025);transition:border-color .15s}
.cx.ns .pl > *{min-width:0}
.cx.ns .pl:hover{border-color:rgba(var(--sheen),.3)}
.cx.ns .pl.is-out{opacity:.7}
.cx.ns .pl-n{margin:0;font-size:1.1rem;font-weight:800}
.cx.ns .pl-sp{margin:0;font-size:.82rem;line-height:1.4;color:var(--text-secondary)}
.cx.ns .pl-pr{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.25rem;margin:.35rem 0 .2rem;line-height:1.2}
.cx.ns .pl-pr .strike{flex-basis:100%;font-size:.78rem;color:var(--ns-strike)}
.cx.ns .pl-pr .now{font-size:1.45rem}
.cx.ns .pl-pr .save{flex-basis:100%;margin-top:.15rem;font-size:.76rem;color:var(--ns-save)}
.cx.ns .pl-stock{font-size:.78rem;color:var(--text-secondary)}
.cx.ns .pl-go{width:100%;margin-top:auto}
.cx.ns .pl-txt{display:flex;flex-direction:column;gap:.55rem;min-width:0}
/* Custom Build under a plan table: one full-width horizontal card (text | price | Select), stacks on phones. */
.cx.ns .pl-grid.pl-grid-wide{display:block;margin-top:.85rem}
.cx.ns .pl.pl-wide{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(150px,200px);align-items:center;gap:.5rem 1.75rem}
.cx.ns .pl.pl-wide .pl-txt{grid-column:1;grid-row:1 / span 2}
.cx.ns .pl.pl-wide .pl-pr{grid-column:2;grid-row:1 / span 2;margin:0;white-space:nowrap}
.cx.ns .pl.pl-wide .pl-go{grid-column:3;grid-row:1 / span 2;margin:0}
.cx.ns .pl.pl-wide .pl-stock{grid-column:1 / -1;margin:0}
@media (max-width:700px){.cx.ns .pl.pl-wide{display:flex;flex-direction:column;align-items:stretch}}
.cx.ns .pl-foot{margin:1rem 0 0}
@media (max-width:640px){
 .cx.ns .pl-grid{grid-template-columns:minmax(0,1fr);gap:.6rem}
 .cx.ns .pl{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-auto-flow:row;column-gap:.75rem;row-gap:.3rem;padding:.9rem 1rem}
 .cx.ns .pl > *{grid-column:1 / -1}
 .cx.ns .pl > .pl-pr{grid-column:1;align-self:end;margin:.2rem 0 0}
 .cx.ns .pl > .pl-go{grid-column:2;align-self:end;width:auto;padding:.6rem 1.2rem}
 .cx.ns .pl-pr .now{font-size:1.3rem}
}

/* ── after order ── */
.cx.ns.rd{max-width:1100px}
.cx.ns .rd-hero{display:flex;gap:1rem;align-items:flex-start;margin:.4rem 0 1.2rem;padding:1.2rem;border-radius:16px;border:1px solid rgba(52,211,153,.55);background:rgba(52,211,153,.08)}
.cx.ns .rd-hero.review{border-color:rgba(251,191,36,.55);background:rgba(251,191,36,.08)}
.cx.ns .rd-ok{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:1.3rem;color:#04120c;background:#34d399}
.cx.ns .rd-hero.review .rd-ok{background:#fbbf24;color:#1c1300}
.cx.ns .rd-hero h1{margin:.1rem 0 .35rem;font-size:1.5rem;font-weight:800}
.cx.ns .rd-hero p{margin:0;color:var(--text-secondary);overflow-wrap:anywhere}
.cx.ns .rd-hero p b{color:var(--text-primary)}
.cx.ns .rd-list{display:grid;gap:1rem}
.cx.ns .rd-card{padding:1.1rem 1.15rem;border-radius:14px;border:1px solid rgba(var(--sheen),.12);background:rgba(var(--sheen),.025);min-width:0}
.cx.ns .rd-card h2{margin:0 0 .2rem;font-size:1.1rem;font-weight:800;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;overflow-wrap:anywhere}
.cx.ns .rd-sub{margin:0 0 .6rem;font-size:.86rem;color:var(--text-secondary)}
.cx.ns .rd-rows{display:grid;margin:0}
.cx.ns .rd-row{display:grid;grid-template-columns:8.5rem minmax(0,1fr) auto;gap:.4rem .8rem;align-items:center;padding:.6rem 0;border-top:1px solid rgba(var(--sheen),.08)}
.cx.ns .rd-row:first-child{border-top:0}
.cx.ns .rd-row .k{font-size:.8rem;color:var(--text-muted)}
.cx.ns .rd-row .v{min-width:0;overflow-wrap:anywhere;font-size:.9rem}
.cx.ns .rd-row .v code{font-size:.88rem}
.cx.ns .rd-row .wait{color:var(--text-muted)}
.cx.ns .rd-row .btn{padding:.35rem .7rem;font-size:.8rem;min-height:0}
.cx.ns .rd-pill{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:.16rem .5rem;border-radius:999px;white-space:nowrap}
.cx.ns .rd-pill.setup{color:#78350f;background:#fde68a}
.cx.ns .rd-pill.ready{color:#04120c;background:#34d399}
.cx.ns .rd-pill.review{color:#1e1b4b;background:#c7d2fe}
.cx.ns .rd-pill.failed,.cx.ns .rd-pill.cancelled{color:#450a0a;background:#fca5a5}
.cx.ns .rd-act{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:1rem}
.cx.ns .rd-act .btn{text-decoration:none}
.cx.ns .rd-act .btn-primary{color:var(--text-on-accent,#fff)}
.cx.ns .rd-msg{margin:.7rem 0 0;font-size:.84rem;color:var(--text-secondary)}
.cx.ns .rd-foot{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:1.4rem}
.cx.ns .rd-foot .btn{text-decoration:none}
.cx.ns .rd-trust{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin-top:1.2rem;font-size:.8rem;color:var(--text-muted)}
@media (max-width:760px){
 .cx.ns .rd-hero{flex-direction:column;padding:1rem}
 .cx.ns .rd-hero h1{font-size:1.3rem}
 .cx.ns .rd-row{grid-template-columns:minmax(0,1fr) auto}
 .cx.ns .rd-row .k{grid-column:1 / -1}
 .cx.ns .rd-act .btn,.cx.ns .rd-foot .btn{flex:1 1 100%}
}

/* ── wave 2: web hosting (plan cards, domain step), managed services (tiers, lead form), hosting after-order ── */
.cx.ns .stepper.n3{grid-template-columns:repeat(3,1fr)}
.cx.ns .rv-link{font-weight:600;font-size:.82rem;text-decoration:none;color:var(--cc9bef0)}
.cx.ns .rv-link:hover{text-decoration:underline}
/* hosting plan cards: websites + alias domains first, then the plan's limits */
.cx.ns .hp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.85rem}
.cx.ns .hp{position:relative;display:flex;flex-direction:column;gap:.7rem;min-width:0;padding:1.15rem 1rem 1rem;border-radius:16px;border:1.5px solid rgba(var(--sheen),.12);background:rgba(var(--sheen),.02);overflow:hidden;transition:border-color .15s}
.cx.ns .hp > *{min-width:0}
.cx.ns .hp::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,#eab308,#f59e0b)}
.cx.ns .hp:hover{border-color:rgba(234,179,8,.6)}
.cx.ns .hp.is-sel{border-color:var(--sel);box-shadow:0 0 0 1px var(--sel)}
.cx.ns .hp-top h3{margin:0;font-size:1.12rem;font-weight:800;letter-spacing:-.01em;overflow-wrap:anywhere}
.cx.ns .hp-tag{margin:.2rem 0 0;font-size:.8rem;line-height:1.4;color:var(--text-muted)}
.cx.ns .hp .pl-pr{margin:0}
.cx.ns .hp-dom{display:flex;align-items:center;gap:.65rem;padding:.6rem .7rem;border-radius:12px;background:rgba(234,179,8,.10);border:1px solid rgba(234,179,8,.38)}
.cx.ns .hp-dom-n{flex:none;min-width:2.1rem;text-align:center;font-size:1.9rem;font-weight:800;line-height:1;color:var(--text-primary)}
.cx.ns .hp-dom-t{display:flex;flex-direction:column;min-width:0;font-size:.78rem;color:var(--text-secondary);line-height:1.35}
.cx.ns .hp-dom-t b{font-size:.92rem;color:var(--text-primary)}
.cx.ns .hp.unl .hp-dom-t b{font-size:1rem}
.cx.ns .hp-f{list-style:none;margin:0;padding:0}
.cx.ns .hp-f li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:.5rem;padding:.36rem 0;border-bottom:1px dashed rgba(var(--sheen),.12);font-size:.82rem}
.cx.ns .hp-f li:last-child{border-bottom:0}
.cx.ns .hp-i{display:grid;color:var(--accent-soft,#818cf8)}
body.theme-light .cx.ns .hp-i{color:#6d28d9}
.cx.ns .hp-k{color:var(--text-muted)}
.cx.ns .hp-v{font-weight:600;text-align:right;color:var(--text-primary);overflow-wrap:anywhere}
.cx.ns .hp .pl-go{margin-top:auto;width:100%;text-align:center;text-decoration:none}
@media (min-width:641px){.cx.ns .hp-tag{min-height:4.2em}.cx.ns .hp-dom{min-height:3.6rem}}
@media (max-width:640px){
 .cx.ns .hp-grid{grid-template-columns:minmax(0,1fr)}
 .cx.ns .hp-f{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:.9rem}
 .cx.ns .hp-f li{grid-template-columns:18px minmax(0,1fr);grid-template-areas:"i k" "i v";row-gap:0}
 .cx.ns .hp-i{grid-area:i}.cx.ns .hp-k{grid-area:k;font-size:.74rem}.cx.ns .hp-v{grid-area:v;text-align:left}
}
/* domain step */
.cx.ns .dns-tiles .opt-desc{font-size:.84rem}
.cx.ns .tile.opt .face .opt-desc code{font-size:.8rem;overflow-wrap:anywhere}
.cx.ns .dom-allow{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.3rem 1rem;padding:.65rem .8rem;border-radius:12px;font-size:.85rem;color:var(--text-secondary);background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.32)}
.cx.ns .dom-allow b{color:var(--text-primary)}
.cx.ns .dom-list{list-style:none;margin:.7rem 0;padding:0;display:grid;gap:.45rem}
.cx.ns .dom-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.7rem;align-items:center;padding:.6rem .75rem;border-radius:12px;border:1px solid rgba(var(--sheen),.12);background:rgba(var(--sheen),.02)}
.cx.ns .dom-d{display:flex;flex-direction:column;min-width:0}
.cx.ns .dom-d b{overflow-wrap:anywhere;font-size:.92rem}
.cx.ns .dom-d b.is-later{color:var(--text-muted)}
.cx.ns .dom-d span{font-size:.8rem;color:var(--text-secondary);overflow-wrap:anywhere}
.cx.ns .dom-k{justify-self:end;font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.2rem .5rem;border-radius:999px;border:1px solid rgba(var(--sheen),.3);color:var(--text-primary);white-space:nowrap}
.cx.ns .dom-k.k-prim{border-color:var(--sel);background:rgba(99,102,241,.14)}
.cx.ns .dom-k.k-alias{border-color:rgba(14,165,233,.65);background:rgba(14,165,233,.12)}
.cx.ns .dom-k.k-site{border-color:rgba(52,211,153,.65);background:rgba(52,211,153,.12)}
.cx.ns .dom-row .btn,.cx.ns .btn-sm{padding:.35rem .7rem;font-size:.8rem;min-height:0}
.cx.ns .dom-form{margin-top:.4rem;padding:1rem;border-radius:14px;border:1.5px dashed rgba(234,179,8,.5);background:rgba(234,179,8,.04)}
.cx.ns .dom-form .sub-h{margin-top:0}
.cx.ns .dom-form-act{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}
.cx.ns .dom-left-sm{display:block;margin-top:.4rem;font-size:.74rem;font-weight:700;color:var(--ns-save)}
.cx.ns .tile.opt input:disabled + .face .dom-left-sm{color:var(--text-muted)}
.cx.ns .opt-title{flex-wrap:wrap}
@media (max-width:640px){
 .cx.ns .dom-row{grid-template-columns:minmax(0,1fr) auto;row-gap:.45rem}
 .cx.ns .dom-row .btn{grid-column:2;justify-self:end}
 .cx.ns .dom-row > span:empty{display:none}
 .cx.ns .dom-form-act .btn{flex:1 1 auto}
}
/* managed: tier cards (no overlapping text on phones: every block stacks, the button spans the card) */
.cx.ns .tier-grid{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}
@media (min-width:1000px){.cx.ns .tier-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cx.ns .pl .pl-d{margin:0;font-size:.84rem;line-height:1.45;color:var(--text-secondary)}
.cx.ns .pl .pl-ul{margin:.1rem 0 .3rem;padding-left:1.1rem;font-size:.82rem;line-height:1.5;color:var(--text-secondary)}
.cx.ns .pl .pl-ul li{margin:.15rem 0}
.cx.ns a.pl-go{text-align:center;text-decoration:none}
.cx.ns .pop-pill.alt{background:#0d9488}
.cx.ns .pl-local{border-style:dashed;border-color:rgba(13,148,136,.6);background:linear-gradient(160deg,rgba(13,148,136,.10),transparent 60%),rgba(var(--sheen),.02)}
.cx.ns .pl-local .pl-pr .now{font-size:1.25rem}
.cx.ns .pl-local .pl-pr .hint{flex-basis:100%}
.cx.ns .tier-grid .pl-n{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .4rem}
.cx.ns .tier-grid .pl-n .pop-pill{margin-left:0}
@media (max-width:640px){
 .cx.ns .tier-grid .pl{display:flex;flex-direction:column;gap:.45rem}
 .cx.ns .tier-grid .pl > .pl-pr,.cx.ns .tier-grid .pl > .pl-go{align-self:stretch;width:100%}
 .cx.ns .tier-grid .pl-go{padding:.7rem 1rem}
}
.cx.ns .svc-list{display:grid;gap:.6rem}
.cx.ns .svc-list .tile.opt .face{gap:.2rem}
.cx.ns .svc-list .opt-title,.cx.ns .svc-list .opt-desc{overflow-wrap:anywhere}
.cx.ns .new-types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.cx.ns .rv-price .pl-pr,.cx.ns .rv-price{display:inline-flex;flex-wrap:wrap;align-items:baseline;column-gap:.3rem}
.cx.ns .rv-price .strike{color:var(--ns-strike);font-size:.82rem}
.cx.ns .rv-price .save{color:var(--ns-save);font-size:.78rem;font-weight:700}
.cx.ns .review-row > span:nth-child(2){min-width:0;overflow-wrap:anywhere}
@media (max-width:640px){.cx.ns .new-types{grid-template-columns:minmax(0,1fr)}.cx.ns .review-row .rv-link{grid-column:2;grid-row:1/span 2;align-self:center}}
/* Locally Managed lead form */
.cx.ns .lead-intro{margin:0 0 1rem;font-size:.92rem;color:var(--text-secondary)}
.cx.ns .lead-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem}
.cx.ns .lead-grid .field{margin:0 0 .85rem;min-width:0}
.cx.ns .lead-grid .input{width:100%}
.cx.ns .req{color:var(--danger,#f87171)}
.cx.ns .lead-err{margin-top:.25rem;font-size:.78rem;font-weight:600;color:#fca5a5}
body.theme-light .cx.ns .lead-err{color:#b91c1c}
.cx.ns .lead-err:empty{display:none}
.cx.ns .lead-needs{border:0;margin:.4rem 0 0;padding:0;min-width:0}
.cx.ns .lead-needs legend{padding:0;margin-bottom:.55rem;font-weight:700;font-size:.92rem;color:var(--text-primary)}
.cx.ns .lead-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.1rem 1rem}
.cx.ns .lead-checks .check{margin:.3rem 0}
.cx.ns .lead-more{display:block;margin:.8rem 0 .35rem}
.cx.ns textarea.input{width:100%;min-height:86px;resize:vertical;font:inherit;line-height:1.45}
.cx.ns .lead-sum{margin-bottom:1rem;padding:.75rem .9rem;border-radius:12px;border:1px solid rgba(248,113,113,.6);background:rgba(248,113,113,.08);font-size:.88rem;color:var(--text-primary)}
.cx.ns .lead-sum:focus{outline:2px solid var(--ns-focus);outline-offset:2px}
.cx.ns .lead-sum ul{margin:.35rem 0 0;padding-left:1.1rem}
.cx.ns .lead-sum a{color:inherit;text-decoration:underline}
.cx.ns .lead-done{display:flex;gap:1rem;align-items:flex-start;padding:1.1rem;border-radius:14px;border:1px solid rgba(52,211,153,.55);background:rgba(52,211,153,.08)}
.cx.ns .lead-done p{margin:0;font-size:.92rem;color:var(--text-secondary);overflow-wrap:anywhere}
.cx.ns .lead-done p b{color:var(--text-primary)}
.cx.ns .lead-done .lead-big{margin-bottom:.35rem;font-size:1.15rem;font-weight:800;color:var(--text-primary)}
.cx.ns .lead-ok{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:1.3rem;color:#04120c;background:#34d399}
.cx.ns .lead-ref{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.05rem;letter-spacing:.03em}
.cx.ns .hp-field{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:640px){.cx.ns .lead-grid,.cx.ns .lead-checks{grid-template-columns:minmax(0,1fr)}.cx.ns .lead-done{flex-direction:column}}
/* after-order: web hosting card (two groups) */
.cx.ns .rd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:.4rem}
.cx.ns .rd-sec{min-width:0;padding:.9rem 1rem;border-radius:12px;border:1px solid rgba(var(--sheen),.1);background:rgba(var(--sheen),.02)}
.cx.ns .rd-sec h3{margin:0 0 .4rem;font-size:1rem;font-weight:800;overflow-wrap:anywhere}
.cx.ns .rd-p{margin:0 0 .6rem;font-size:.86rem;color:var(--text-secondary)}
.cx.ns .rd-p.sm{margin:.7rem 0 0;font-size:.8rem}
@media (max-width:760px){.cx.ns .rd-grid{grid-template-columns:minmax(0,1fr)}.cx.ns .rd-sec{padding:.8rem}}

/* ── game picker (wave 2, new-store-game.js): image cards with the real category banners ── */
.cx.ns .gm-tools{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-bottom:1rem}
.cx.ns .gm-tools .field{flex:1 1 240px;margin:0}
.cx.ns .chips{display:flex;flex-wrap:wrap;gap:.4rem}
.cx.ns .chip{font:inherit;font-size:.8rem;font-weight:600;padding:.4rem .75rem;border-radius:999px;cursor:pointer;color:var(--text-secondary);background:rgba(var(--sheen),.04);border:1px solid rgba(var(--sheen),.14)}
.cx.ns .chip:focus-visible{outline:2px solid var(--ns-focus);outline-offset:2px}
.cx.ns .chip[aria-pressed=true]{color:#fff;background:var(--accent,#6366f1);border-color:var(--accent,#6366f1)}
body.theme-light .cx.ns .chip[aria-pressed=true]{background:#4f46e5;border-color:#4f46e5}
.cx.ns .gm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:.85rem}
.cx.ns .gm-grid[hidden],.cx.ns .gm[hidden]{display:none}
.cx.ns .gm{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:14px;overflow:hidden;text-decoration:none;color:var(--text-primary);border:1.5px solid rgba(var(--sheen),.12);background:rgba(var(--sheen),.025);transition:border-color .15s,box-shadow .15s}
.cx.ns a.gm:hover{border-color:rgba(var(--gc),.9);box-shadow:0 12px 26px -16px rgba(var(--gc),.9)}
.cx.ns .gm:focus-visible{outline:2px solid var(--ns-focus);outline-offset:3px}
.cx.ns .gm.is-sel{border-color:var(--sel);box-shadow:0 0 0 1px var(--sel)}
.cx.ns .gm.is-off{cursor:not-allowed}
.cx.ns .gm.is-off .gm-art{filter:grayscale(1);opacity:.55}
.cx.ns .gm-art{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#101014}
.cx.ns .gm-art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s}
.cx.ns a.gm:hover .gm-art img{transform:scale(1.05)}
.cx.ns .gm-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28),transparent 38%,transparent 70%,rgba(0,0,0,.25));pointer-events:none}
.cx.ns .gm-genre{position:absolute;left:.5rem;bottom:.5rem;z-index:1;font-size:.64rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.2rem .5rem;border-radius:999px;color:#fff;background:rgba(0,0,0,.66)}
.cx.ns .gm-fb{position:absolute;inset:0;display:grid;place-items:center;padding:.8rem .8rem 1.6rem;text-align:center;font-weight:800;font-size:1.05rem;line-height:1.15;letter-spacing:-.01em;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.45);overflow-wrap:anywhere;background:radial-gradient(90% 90% at 80% 10%,rgba(255,255,255,.18),transparent 55%),linear-gradient(135deg,rgba(var(--gc),1),rgba(var(--gc),.45))}
.cx.ns .gm-body{display:flex;flex-direction:column;gap:.15rem;padding:.65rem .8rem .8rem;min-width:0}
.cx.ns .gm-body b{font-size:.95rem;line-height:1.25;overflow-wrap:anywhere}
.cx.ns .gm-p{font-size:.8rem;color:var(--text-secondary)}
.cx.ns .gm-p strong{font-size:.98rem;color:var(--text-primary)}
.cx.ns .gm-n{font-size:.74rem;color:var(--text-muted)}
.cx.ns .gm-off{align-self:flex-start;margin:.1rem 0;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.15rem .5rem;border-radius:999px;color:var(--text-secondary);background:rgba(var(--sheen),.08);border:1px solid rgba(var(--sheen),.2)}
.cx.ns .gm-h{margin:1.6rem 0 .3rem;font-size:.95rem;font-weight:800}
.cx.ns .gm-h[hidden],.cx.ns .gm-sub[hidden]{display:none}
.cx.ns .gm-sub{margin:0 0 .8rem;font-size:.84rem;color:var(--text-secondary)}
.cx.ns .gm-empty{margin-top:.6rem;padding:1rem;border-radius:12px;border:1px dashed rgba(var(--sheen),.2);color:var(--text-secondary);font-size:.9rem}
.cx.ns .gm-empty[hidden]{display:none}
@media (max-width:640px){
 .cx.ns .gm-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
 .cx.ns .gm-body{padding:.55rem .6rem .65rem}
 .cx.ns .gm-body b{font-size:.88rem}
 .cx.ns .gm-fb{font-size:.84rem;padding:.5rem .5rem 1.75rem}
 .cx.ns .gm-genre{font-size:.58rem;left:.35rem;bottom:.35rem}
 .cx.ns .gm-tools .field{flex-basis:100%}
}

/* ── storage (wave 2, new-store-storage.js): "coming soon" location card, never selectable ── */
.cx.ns .tile.soon{cursor:default}
.cx.ns .tile.soon .face{border-style:dashed;opacity:.72}
.cx.ns .tier-soon{color:var(--text-secondary);background:rgba(var(--sheen),.06);border:1px dashed rgba(var(--sheen),.3)}
.cx.ns .soon-t{font-size:.82rem;color:var(--text-secondary)}
.cx.ns .loc-grid.one .tile.soon{max-width:520px}
/* coming-soon locations on every flow (StoreLocations::comingSoon): dashed pin, no pick; "(soon)" latency column */
.cx.ns .map .pin.soon{cursor:default}
.cx.ns .map .pin.soon .dot{fill:none;stroke:var(--text-muted);stroke-width:2;stroke-dasharray:3 2}
.cx.ns .map .pin.soon .ring{display:none}
.cx.ns .map .pin.soon text{opacity:.7}
.cx.ns .map th.soon,.cx.ns .map td.soon{opacity:.6}
.cx.ns .map th.soon small{font-weight:500}
.cx.ns .tile.soon ul{opacity:.85}

/* ── Plan comparison (SableStore.planTable in new-store.js: the Plan step of VPS, game servers, hosting,
   storage and managed services) + the one-flow steppers ──
   Stepper: one list per flow from the first store step to Pay (VPS 10, game servers 9 or 10, hosting and storage 5),
   drawn by SableStore.stepper on the store page and on its step-through checkout (.cx.ns, preset set), so it never
   jumps between the two pages. Labels never overlap at any width: a label that doesn't fit its pill is cut with an
   ellipsis (the pill's tooltip has the full label and value); long steppers (9-10 pills) put the dot above the label
   below 1200px; phones (640px and below) show only the current step's label. */
.cx.ns .stepper.n5{grid-template-columns:repeat(5,minmax(0,1fr))}
.cx.ns .stepper.n9{grid-template-columns:repeat(9,minmax(0,1fr))}
.cx.ns .stepper.n10{grid-template-columns:repeat(10,minmax(0,1fr))}
.cx.ns .stepper li,.cx.ns .stepper button{min-width:0}
.cx.ns .stepper .lbl{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx.ns .stepper .lbl small{max-width:100%}
.cx.ns .stepper:is(.n9,.n10){gap:.2rem;padding:.75rem .6rem}
.cx.ns .stepper:is(.n9,.n10) button{gap:.4rem;padding:.5rem .3rem}
@media (max-width:1199px){
 .cx.ns .stepper:is(.n9,.n10){gap:.15rem;padding:.45rem .3rem}
 .cx.ns .stepper:is(.n9,.n10) button{flex-direction:column;gap:.2rem;padding:.3rem .1rem}
 .cx.ns .stepper:is(.n9,.n10) .lbl{display:block;font-size:.66rem;text-align:center}
 .cx.ns .stepper:is(.n9,.n10) .dot{width:1.6rem;height:1.6rem;font-size:.72rem}
}
@media (max-width:992px){
 .cx.ns .stepper:is(.n9,.n10) .lbl{font-size:.62rem}
}
@media (max-width:640px){
 .cx.ns .stepper:is(.n9,.n10){gap:0;padding:.45rem .2rem .55rem}
 .cx.ns .stepper:is(.n9,.n10) li{overflow:visible}
 .cx.ns .stepper:is(.n9,.n10) button{padding:.3rem 0}
 .cx.ns .stepper:is(.n9,.n10) .dot{width:1.45rem;height:1.45rem;font-size:.66rem}
 .cx.ns .stepper:is(.n9,.n10) li:not(.current) .lbl{visibility:hidden}
 /* the one visible label may run under its neighbours' (hidden) labels, never over a dot */
 .cx.ns .stepper:is(.n9,.n10) li.current .lbl{position:relative;z-index:1;max-width:none;overflow:visible;font-size:.64rem;color:var(--text-primary)}
 .cx.ns .stepper:is(.n9,.n10) li.current button{background:none}
 .cx.ns .page-head .plan-chip{display:none}
}
/* "Every plan includes": rows that are the same for every plan (SableStore.planTable moves them here) */
.cx.ns .pc-inc{margin:0 0 .9rem;padding:.75rem .9rem .8rem;border-radius:14px;border:1px solid rgba(var(--sheen),.1);background:rgba(var(--sheen),.02)}
.cx.ns .pc-inc .pc-inc-t{margin:0 0 .55rem;font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted)}
.cx.ns .pc-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem .5rem}
.cx.ns .pc-chip{display:inline-flex;align-items:center;gap:.45rem;max-width:100%;padding:.34rem .7rem .34rem .55rem;border-radius:999px;border:1px solid rgba(var(--sheen),.12);background:rgba(var(--sheen),.035);font-size:.8rem;font-weight:600;line-height:1.3;color:var(--text-primary)}
.cx.ns .pc-chip .pc-ri{margin:0}
.cx.ns .pc-chip.is-muted{color:var(--text-secondary)}
.cx.ns .pc-chip-s{font-weight:500;color:var(--text-muted)}
.cx.ns .pc-chip s{color:var(--ns-strike)}
/* Table: one column per plan, always fits its box (table-layout fixed, values wrap; never scrolls sideways) */
.cx.ns .pc-box{container-type:inline-size;margin:0 0 .2rem}
.cx.ns .pc{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:.88rem;border:1px solid rgba(var(--sheen),.1);border-radius:14px;overflow:hidden}
.cx.ns .pc .pc-lc{width:9.5rem}
@container (max-width:700px){.cx.ns .pc .pc-lc{width:7.5rem}}
.cx.ns .pc th,.cx.ns .pc td{padding:.62rem .6rem;text-align:left;vertical-align:top;border-top:1px solid rgba(var(--sheen),.07);overflow-wrap:break-word}
.cx.ns .pc .pc-corner,.cx.ns .pc th[scope=row]{padding-left:.85rem}
.cx.ns .pc tr > :last-child{padding-right:.85rem}
.cx.ns .pc thead > tr > *{border-top:0}
.cx.ns .pc .pc-r1 > *{vertical-align:bottom;padding-top:.85rem;padding-bottom:.1rem}
.cx.ns .pc .pc-r2 > td{vertical-align:top;padding-top:.15rem;padding-bottom:.1rem}
.cx.ns .pc .pc-r3 > td{vertical-align:bottom;padding-top:.25rem;padding-bottom:.85rem}
.cx.ns .pc .pc-corner{vertical-align:bottom;padding-bottom:.85rem}
.cx.ns .pc tbody tr:first-child > *{border-top:1px solid rgba(var(--sheen),.14)}
.cx.ns .pc th[scope=row]{font-size:.82rem;font-weight:600;color:var(--text-secondary)}
.cx.ns .pc-rl{display:flex;align-items:center;gap:.45rem;min-width:0}
.cx.ns .pc-ri{flex:none;display:grid;color:var(--accent-soft,#818cf8)}
body.theme-light .cx.ns .pc-ri{color:#4f46e5}
.cx.ns .pc-corner-t{display:block;font-size:.95rem;font-weight:800;color:var(--text-primary)}
.cx.ns .pc-corner-s{display:block;font-size:.76rem;font-weight:500;color:var(--text-muted)}
.cx.ns .pc-h{font-weight:400}
.cx.ns .pc-badges{display:flex;flex-wrap:wrap;gap:.25rem;min-height:1.15rem;margin-bottom:.3rem}
.cx.ns .pc-badges .pop-pill{margin-left:0}
.cx.ns .pc-name{display:block;font-size:clamp(.95rem,.55rem + .8cqi,1.1rem);font-weight:800;letter-spacing:-.01em;color:var(--text-primary)}
.cx.ns .pc-desc{display:block;font-size:.74rem;line-height:1.35;font-weight:500;color:var(--text-muted)}
.cx.ns .pc-price{display:block!important;margin:0 0 .65rem!important;line-height:1.15}
.cx.ns .pc-price .strike,.cx.ns .pc-price .save,.cx.ns .pc-price .hint{display:block}
.cx.ns .pc-price .strike{font-size:.74rem}
.cx.ns .pc-price .now{display:block;white-space:nowrap;font-size:clamp(1.05rem,.3rem + 1.2cqi,1.55rem);font-weight:800;letter-spacing:-.01em}
.cx.ns .pc-price .hint{font-size:.72rem;margin-top:.1rem}
.cx.ns .pc-price .save{margin-top:.2rem;font-size:.72rem}
.cx.ns .pc .pl-go{display:block;width:100%;padding:.48rem .4rem;font-size:.84rem;text-align:center}
.cx.ns .pc-msg{display:block;margin-top:.45rem;font-size:.72rem;line-height:1.35;color:var(--text-secondary)}
.cx.ns .pc-stock{display:inline-block;font-size:.6rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.14rem .45rem;border-radius:999px}
.cx.ns .pc-stock.low{color:#fbbf24;background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.5)}
.cx.ns .pc-stock.out{color:#f87171;background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.5)}
body.theme-light .cx.ns .pc-stock.low{color:#92400e;background:#fef3c7;border-color:#f59e0b}
body.theme-light .cx.ns .pc-stock.out{color:#991b1b;background:#fee2e2;border-color:#f87171}
.cx.ns .pc-v{display:block;font-weight:700;color:var(--text-primary)}
.cx.ns .pc-v.is-muted{font-weight:500;color:var(--text-muted)}
.cx.ns .pc tbody tr:nth-child(even) > *{background:rgba(var(--sheen),.018)}
.cx.ns .pc tbody tr:hover > td{background:rgba(var(--sheen),.035)}
/* Popular column: a soft accent band top to bottom */
.cx.ns .pc .is-pop{background:rgba(99,102,241,.08)!important;box-shadow:inset 1px 0 0 rgba(99,102,241,.5),inset -1px 0 0 rgba(99,102,241,.5)}
.cx.ns .pc .pc-r1 .is-pop{box-shadow:inset 1px 0 0 rgba(99,102,241,.5),inset -1px 0 0 rgba(99,102,241,.5),inset 0 3px 0 var(--accent,#6366f1)}
.cx.ns .pc .is-out .pc-v,.cx.ns .pc .is-out .pc-name,.cx.ns .pc .is-out .pc-price,.cx.ns .pcc.is-out .pcc-dl,.cx.ns .pcc.is-out .pcc-top{opacity:.55}
/* the plan already picked (hosting, storage, managed: Back from the next step) */
.cx.ns .pc .is-sel .pc-name::after,.cx.ns .pcc.is-sel .pcc-n::after{content:"Your pick";display:inline-block;margin-left:.4rem;vertical-align:.2em;font-size:.58rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.1rem .4rem;border-radius:999px;color:var(--ns-save);border:1px solid currentColor}
.cx.ns .pc .is-sel{box-shadow:inset 1px 0 0 rgba(52,211,153,.45),inset -1px 0 0 rgba(52,211,153,.45)}
.cx.ns .pc .pc-r1 .is-sel{box-shadow:inset 1px 0 0 rgba(52,211,153,.45),inset -1px 0 0 rgba(52,211,153,.45),inset 0 3px 0 var(--ns-save)}
/* managed services: the two business quote cards under the per-server table */
@media (min-width:1000px){.cx.ns .biz-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cx.ns .pc-notes{margin:.55rem 0 0;font-size:.76rem;line-height:1.5;color:var(--text-muted)}
.cx.ns .pc-notes b{font-weight:600;color:var(--text-secondary)}
/* Cards: the same plans as a grid when the box is too narrow for the columns, and always on phones */
.cx.ns .pcc-list{display:none;grid-template-columns:repeat(auto-fill,minmax(14.5rem,1fr));gap:.75rem}
.cx.ns .pcc{display:flex;flex-direction:column;min-width:0;padding:.95rem 1rem 1rem;border-radius:14px;border:1px solid rgba(var(--sheen),.12);background:rgba(var(--sheen),.025)}
.cx.ns .pcc.is-pop{border-color:rgba(99,102,241,.65);box-shadow:inset 0 3px 0 var(--accent,#6366f1);background:rgba(99,102,241,.06)}
.cx.ns .pcc.is-sel{border-color:rgba(52,211,153,.6)}
.cx.ns .pcc-top{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n b" "p p" "d d";column-gap:.75rem;align-items:center}
.cx.ns .pcc .pcc-n{grid-area:n;margin:0;font-size:1.12rem;font-weight:800;overflow-wrap:anywhere}
.cx.ns .pcc-top .pc-badges{grid-area:b;margin:0;min-height:0;justify-content:flex-end}
.cx.ns .pcc-top .pc-price{grid-area:p;display:flex!important;flex-wrap:wrap;align-items:baseline;column-gap:.3rem;margin:.35rem 0 0!important}
.cx.ns .pcc-top .pc-price .strike{flex-basis:100%}
.cx.ns .pcc-top .pc-price .now{display:inline;font-size:1.3rem}
.cx.ns .pcc-top .pc-price .hint{display:inline;margin:0}
.cx.ns .pcc-top .pc-price .save{display:inline;margin:0 0 0 .45rem}
.cx.ns .pcc-top .pc-desc{grid-area:d;margin-top:.35rem;font-size:.8rem}
.cx.ns .pcc-dl{flex:1;margin:.7rem 0 .85rem;display:grid;align-content:start}
.cx.ns .pcc-dl > div{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;padding:.42rem 0;border-top:1px dashed rgba(var(--sheen),.12)}
.cx.ns .pcc-dl dt{flex:0 1 auto;min-width:0;display:flex;align-items:center;font-size:.82rem;color:var(--text-secondary)}
.cx.ns .pcc-dl dd{flex:none;max-width:60%;margin:0;text-align:right;font-size:.88rem}
.cx.ns .pcc .pc-msg{margin:0 0 .6rem;font-size:.78rem}
.cx.ns .pcc .pl-go{display:block;width:100%;margin-top:auto;padding:.65rem 1rem;text-align:center}
/* Table → cards when the columns would get narrower than ~130px (breakpoint per column count) */
@container (max-width:1200px){.cx.ns .pc-box[data-cols="8"] .pc{display:none}.cx.ns .pc-box[data-cols="8"] .pcc-list{display:grid}}
@container (max-width:1060px){.cx.ns .pc-box[data-cols="7"] .pc{display:none}.cx.ns .pc-box[data-cols="7"] .pcc-list{display:grid}}
@container (max-width:920px){.cx.ns .pc-box[data-cols="6"] .pc{display:none}.cx.ns .pc-box[data-cols="6"] .pcc-list{display:grid}}
@container (max-width:790px){.cx.ns .pc-box[data-cols="5"] .pc{display:none}.cx.ns .pc-box[data-cols="5"] .pcc-list{display:grid}}
@container (max-width:660px){.cx.ns .pc-box[data-cols="4"] .pc{display:none}.cx.ns .pc-box[data-cols="4"] .pcc-list{display:grid}}
@container (max-width:520px){.cx.ns .pc-box[data-cols="3"] .pc{display:none}.cx.ns .pc-box[data-cols="3"] .pcc-list{display:grid}}
@container (max-width:400px){.cx.ns .pc-box[data-cols="2"] .pc{display:none}.cx.ns .pc-box[data-cols="2"] .pcc-list{display:grid}}
@media (max-width:768px){
 .cx.ns .pc{display:none}
 .cx.ns .pcc-list{display:grid;grid-template-columns:minmax(0,1fr)}
 .cx.ns .pc-inc{padding:.7rem .75rem}
 .cx.ns .pc-chip{font-size:.78rem}
}

/* Business form: the item the visitor arrived with (website deep link), list one click away */
.cx.ns .lead-picked{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;padding:.9rem 1rem;border-radius:var(--radius-lg,.5rem);border:1px solid var(--accent,#4318a0);background:color-mix(in srgb,var(--accent,#4318a0) 10%,transparent)}
.cx.ns .lead-picked .btn{margin-left:auto}
.cx.ns .lead-picked .lp-k{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75}

@media (prefers-reduced-motion: reduce){.ns .sv-art img{transition:none}.ns .sv:hover .sv-art img{transform:none}}

/* Managed › Your business: spacing between option groups, compact bundle billing switch, yearly bundle prices */
.cx.ns .lead-more + .tiles,.cx.ns .lead-bh + .tiles{margin-bottom:.4rem}
.cx.ns .tiles + .sub-h.lead-more{margin-top:1.4rem}
.cx.ns .lead-bh{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.6rem}
.cx.ns .seg{display:inline-flex;padding:3px;border-radius:999px;border:1px solid rgba(var(--sheen),.16);background:rgba(var(--sheen),.03);font-size:.82rem;font-weight:700}
.cx.ns .seg-o{position:relative;cursor:pointer}
.cx.ns .seg-o input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.cx.ns .seg-o span{display:block;padding:.38rem .95rem;border-radius:999px;color:var(--text-secondary);transition:background .15s,color .15s}
.cx.ns .seg-o small{font-weight:800;color:var(--ns-save,#34d399);margin-left:.2rem}
.cx.ns .seg-o input:checked + span{background:var(--accent,#6366f1);color:#fff}
.cx.ns .seg-o input:checked + span small{color:#d1fae5}
.cx.ns .seg-o input:focus-visible + span{outline:2px solid var(--accent-soft,#818cf8);outline-offset:2px}
.cx.ns .opt-price.bp{display:flex;flex-direction:column;align-items:flex-end;gap:.05rem;text-align:right;white-space:nowrap}
.cx.ns .opt-price.bp .strike{font-size:.75rem;font-weight:600;color:var(--text-muted);text-decoration:line-through}
.cx.ns .opt-price.bp .save{font-size:.74rem;font-weight:800;color:var(--ns-save,#34d399)}
@media (max-width:560px){.cx.ns .opt-title{flex-wrap:wrap}.cx.ns .opt-price.bp{flex-basis:100%;align-items:flex-start;text-align:left}}
/* ── Locally Managed quote builder (new-store-managed.js): needs cards, details, estimate ── */
.cx.ns .stepper.n6{grid-template-columns:repeat(6,minmax(0,1fr))}
.cx.ns .qb-group{border:0;margin:0 0 1.2rem;padding:0;min-width:0}
.cx.ns .qb-group legend{padding:0;margin:0 0 .6rem;font-size:1rem;font-weight:800;color:var(--text-primary)}
.cx.ns .qb-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.7rem}
.cx.ns .qb-card .face{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.75rem;align-items:start;padding:.9rem .95rem}
.cx.ns .qb-ic{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:10px;color:var(--accent-soft,#818cf8);background:rgba(99,102,241,.12)}
body.theme-light .cx.ns .qb-ic{color:#4f46e5}
.cx.ns .qb-tx{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.cx.ns .qb-t{font-weight:700;font-size:.95rem;color:var(--text-primary)}
.cx.ns .qb-d{font-size:.82rem;line-height:1.4;color:var(--text-secondary)}
.cx.ns .qb-from{margin-top:.15rem;font-size:.76rem;font-weight:600;color:var(--text-muted)}
.cx.ns .qb-tick{width:1.3rem;height:1.3rem;border-radius:6px;border:1.5px solid rgba(var(--sheen),.35);display:grid;place-items:center;font-size:.75rem;font-weight:900;color:#fff}
.cx.ns .qb-card input:checked + .face .qb-tick{background:var(--sel);border-color:var(--sel)}
.cx.ns .qb-card input:checked + .face .qb-tick::after{content:"✓"}
.cx.ns .qb-count{margin:.2rem 0 0;font-size:.86rem;font-weight:600;color:var(--text-secondary)}
.cx.ns .qb-sec{margin-bottom:.4rem}
.cx.ns .qb-for{margin-left:auto;font-size:.74rem;font-weight:600;color:var(--text-muted);text-align:right}
.cx.ns .qb-fs{margin-bottom:1rem}
.cx.ns .qb-fs .tiles{gap:.6rem}
.cx.ns .qb-fs .opt-desc b{color:var(--text-primary)}
.cx.ns .qb-fh{margin:-.2rem 0 .7rem}
.cx.ns .qb-num{display:flex;align-items:stretch;max-width:12rem}
.cx.ns .qb-num .input{text-align:center;border-radius:0;-moz-appearance:textfield;appearance:textfield}
.cx.ns .qb-num .input::-webkit-outer-spin-button,.cx.ns .qb-num .input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cx.ns .qb-nb{flex:none;width:2.75rem;font-size:1.2rem;font-weight:700;cursor:pointer;color:var(--text-primary);background:rgba(var(--sheen),.06);border:1px solid rgba(var(--sheen),.14)}
.cx.ns .qb-nb:first-child{border-radius:10px 0 0 10px;border-right:0}
.cx.ns .qb-nb:last-child{border-radius:0 10px 10px 0;border-left:0}
.cx.ns .qb-nb:hover{background:rgba(var(--sheen),.12)}
.cx.ns .qb-nb:focus-visible{outline:2px solid var(--ns-focus);outline-offset:2px;position:relative}
.cx.ns .qb-numf .hint{margin-top:.35rem}
.cx.ns .qb-segs{display:flex;flex-wrap:wrap;gap:1rem 2rem;margin:.2rem 0 1rem}
.cx.ns .qb-seg{border:0;margin:0;padding:0;min-width:0}
.cx.ns .qb-seg legend{padding:0;margin-bottom:.45rem;font-size:.88rem;font-weight:700;color:var(--text-primary)}
.cx.ns .qb-sel{max-width:20rem}
.cx.ns .qb-note{margin:0 0 1rem;padding:.75rem .9rem;border-radius:12px;font-size:.88rem;color:var(--text-secondary);border:1px solid rgba(251,191,36,.5);background:rgba(251,191,36,.08)}
.cx.ns .qb-note b{color:var(--text-primary)}
.cx.ns .qb-plan .face{gap:.25rem}
.cx.ns .qb-pt{margin-top:.35rem;font-size:1.2rem;font-weight:800;color:var(--text-primary)}
.cx.ns .qb-pt .hint{font-weight:600}
.cx.ns .qb-plans + .qb-fh{margin-top:.6rem}
.cx.ns .qb-fh:empty{display:none}
.cx.ns .qb-bundle{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.6rem 1rem;align-items:start;margin-bottom:.7rem;padding:1rem;border-radius:14px;border:1px solid rgba(var(--sheen),.14);background:rgba(var(--sheen),.02)}
.cx.ns .qb-bundle.is-on{border-color:var(--sel);background:rgba(99,102,241,.10);box-shadow:0 0 0 1px var(--sel)}
.cx.ns .qb-bt{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.cx.ns .qb-bt .rec-pill{align-self:flex-start}
.cx.ns .qb-ba{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}
.cx.ns .qb-pr{display:flex;flex-direction:column;align-items:flex-end;gap:.05rem;text-align:right;white-space:nowrap}
.cx.ns .qb-pr .strike{font-size:.78rem;color:var(--ns-strike)}
.cx.ns .qb-pr .now{font-size:1.1rem}
.cx.ns .qb-pr .now .hint{font-size:.78rem;font-weight:600}
.cx.ns .qb-pr .save{font-size:.76rem;color:var(--ns-save)}
.cx.ns .qb-fromw{font-size:.78rem;font-weight:600;color:var(--text-muted)}
.cx.ns .qb-host{margin-bottom:.7rem}
.cx.ns .qb-lines{list-style:none;margin:0;padding:0;border:1px solid var(--border);border-radius:14px;overflow:hidden}
.cx.ns .qb-line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.4rem 1rem;align-items:start;padding:.85rem 1rem;border-bottom:1px solid var(--border)}
.cx.ns .qb-line:last-child{border-bottom:0}
.cx.ns .qb-line > div{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.cx.ns .qb-line .hint{line-height:1.4}
.cx.ns .qb-total{margin-top:1.2rem;padding:1rem 1.1rem;border-radius:14px;border:1px solid rgba(99,102,241,.5);background:rgba(99,102,241,.08)}
.cx.ns .qb-tr{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.2rem 0;font-size:.95rem}
.cx.ns .qb-tr b{font-size:1.2rem;font-weight:800;white-space:nowrap}
.cx.ns .qb-total p{margin:.4rem 0 0}
@media (max-width:640px){
 .cx.ns .qb-cards{grid-template-columns:minmax(0,1fr)}
 .cx.ns .qb-card .face{padding:.75rem .8rem}
 .cx.ns .qb-for{display:none}
 .cx.ns .qb-bundle,.cx.ns .qb-line{grid-template-columns:minmax(0,1fr)}
 .cx.ns .qb-pr{align-items:flex-start;text-align:left}
 .cx.ns .qb-num{max-width:none}
 .cx.ns .qb-num .input{flex:1}
 .cx.ns .stepper.n6 .lbl{display:none}
 .cx.ns .stepper.n6 li.current .lbl{display:block}
}
.cx.ns .lead-sum,.cx.ns .qb-sec .input,.cx.ns .qb-fs .tile input,.cx.ns .lead-grid .input{scroll-margin-top:8rem}
.cx.ns #stepBody > .lead-picked{margin-bottom:1rem}
.cx.ns .qb-tr span{white-space:nowrap}@media (max-width:640px){.cx.ns .qb-tr b{font-size:1.05rem}}
/* quote builder: a note right after the plan tiles needs breathing room (QA 2026-10-04) */
.cx.ns .qb-plans ~ .qb-fh{margin-top:.75rem}
/* quote builder v2 (handoff HANDOFF-business-lead-builder.md): pills, live estimate, "Your request", note under Send */
.cx.ns .qb-pills-fs{border:0;margin:0 0 1rem;padding:0;min-width:0}
.cx.ns .qb-pills-fs legend{padding:0;margin-bottom:.5rem;font-weight:700;font-size:.92rem;color:var(--text-primary)}
.cx.ns .qb-pills{display:flex;flex-wrap:wrap;gap:.45rem}
.cx.ns .qb-pill{position:relative;cursor:pointer;min-width:0}
.cx.ns .qb-pill input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.cx.ns .qb-pill span{display:block;padding:.5rem .95rem;border-radius:999px;font-size:.86rem;font-weight:600;line-height:1.25;color:var(--text-secondary);border:1px solid rgba(var(--sheen),.18);background:rgba(var(--sheen),.03);transition:background .15s,color .15s,border-color .15s}
.cx.ns .qb-pill:hover span{border-color:rgba(var(--sheen),.35)}
.cx.ns .qb-pill input:checked + span{background:var(--sel,#6366f1);border-color:var(--sel,#6366f1);color:#fff}
.cx.ns .qb-pill input:focus-visible + span{outline:2px solid var(--ns-focus);outline-offset:2px}
.cx.ns .qb-pill small{font-weight:800;margin-left:.2rem;color:var(--ns-save)}
.cx.ns .qb-pill input:checked + span small{color:#d1fae5}
.cx.ns .qb-sec{padding-top:.2rem}
.cx.ns .qb-sec .sub-h:focus{outline:none}
.cx.ns .qb-sec .sub-h:focus-visible{outline:2px solid var(--ns-focus);outline-offset:4px;border-radius:4px}
.cx.ns .qb-bundles .opt-desc .qb-pr{align-items:flex-start;text-align:left;margin-top:.45rem;white-space:normal}
.cx.ns .qb-live{margin:.2rem 0 1rem;padding:.7rem .9rem;border-radius:12px;font-weight:700;font-size:.92rem;color:var(--text-primary);border:1px solid rgba(99,102,241,.45);background:rgba(99,102,241,.08)}
.cx.ns .qb-check{margin:.9rem 0 .3rem;font-weight:600}
.cx.ns .qb-check input:disabled + span{opacity:.8}
.cx.ns .qb-url{max-width:26rem}
.cx.ns .qb-req{margin:0 0 1.3rem;padding:1rem 1.1rem;border-radius:14px;border:1px solid rgba(99,102,241,.5);background:rgba(99,102,241,.06)}
.cx.ns .qb-req-h{margin:0 0 .5rem;font-size:1rem;font-weight:800;color:var(--text-primary)}
.cx.ns .qb-req-list{list-style:none;margin:0;padding:0}
.cx.ns .qb-req-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.2rem 1rem;align-items:start;padding:.55rem 0;border-top:1px solid var(--border)}
.cx.ns .qb-req-row:first-child{border-top:0}
.cx.ns .qb-req-t{display:flex;flex-direction:column;gap:.15rem;min-width:0;overflow-wrap:anywhere}
.cx.ns .qb-req-t b{color:var(--text-primary);font-size:.92rem}
.cx.ns .qb-req-more{display:inline-block;margin-top:.5rem}
.cx.ns .qb-after{margin:.6rem 0 0;font-size:.84rem;color:var(--text-secondary);text-align:right}
.cx.ns .qb-after-m{display:none}
@media (max-width:992px){.cx.ns .qb-after-m{display:block;text-align:left;margin-top:1rem}.cx.ns #qbAfter{display:none}}
@media (max-width:640px){.cx.ns .qb-pill span{padding:.5rem .8rem}.cx.ns .qb-url{max-width:none}}
.cx.ns .qb-save{color:var(--ns-save)}