[hidden]{display:none!important}

/*
  rdp-buy.com  |  design preview v1
  World: the Remote Desktop session itself. Cobalt desktop field, white windows, a taskbar.
  Radius system: windows 12px, controls 8px, status chips full pill. Nothing else.
  All prices, specs, latencies, names and invoice numbers are SAMPLE DATA (see PLACEHOLDERS list in the handoff).
  WHMCS hooks are marked with data-whmcs="..." and <!-- WHMCS: ... --> comments.
*/
:root{
  --field:#1c4fe0; --field-deep:#0f2f9e; --field-soft:#3463ea;
  --bg:#f2f6fd; --surface:#ffffff; --surface-2:#e9effb; --line:#d3dcef;
  --ink:#0a1330; --muted:#465273; --on-field:#ffffff; --on-field-muted:#f0f4ff;
  --accent:#ffbf2f; --accent-ink:#1b1400; --accent-hover:#ffcd57;
  --ok:#0b7a4b; --ok-bg:#dff5ea; --warn:#8a5a00; --warn-bg:#fff0cc; --bad:#b3261e; --bad-bg:#fde5e3;
  --shadow-win:0 1px 0 rgba(10,19,48,.06), 0 18px 40px -12px rgba(10,19,48,.28), 0 6px 14px -6px rgba(10,19,48,.18);
  --shadow-soft:0 1px 2px rgba(10,19,48,.06), 0 8px 24px -10px rgba(10,19,48,.18);
  --r-win:12px; --r-ctl:8px; --r-pill:999px;
  --f-display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --f-ui:'Schibsted Grotesk','Segoe UI',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --wrap:1240px; --nav-h:64px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-color:var(--field-soft) var(--surface-2)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--f-ui);background:var(--bg);color:var(--ink);line-height:1.55;font-size:16px;min-height:100dvh;-webkit-font-smoothing:antialiased;caret-color:var(--field);overflow-x:clip}
::selection{background:var(--accent);color:var(--accent-ink)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--surface-2)}
::-webkit-scrollbar-thumb{background:var(--field-soft);border-radius:var(--r-pill);border:3px solid var(--surface-2)}
a{color:inherit;text-underline-offset:.22em}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img,svg{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:var(--r-ctl)}
.tnum{font-variant-numeric:proportional-nums}
.mono{font-family:var(--f-mono)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{font-family:var(--f-display);letter-spacing:-.03em;line-height:1.02;text-wrap:balance}
p{text-wrap:pretty}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;height:48px;padding:0 22px;border-radius:var(--r-ctl);border:1px solid transparent;font-weight:600;font-size:.98rem;text-decoration:none;white-space:nowrap;transition:transform .18s var(--ease),background-color .18s,box-shadow .18s,border-color .18s}
.btn:active{transform:translateY(1px) scale(.98)}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 6px 14px -6px rgba(10,19,48,.45)}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.1);color:var(--on-field);border-color:rgba(255,255,255,.4)}
.btn-ghost:hover{background:rgba(255,255,255,.2)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-line:hover{background:var(--surface-2);border-color:var(--field-soft)}
.btn-sm{height:38px;padding:0 14px;font-size:.9rem}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.btn .ph{font-size:1.1em}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--line)}
.nav .wrap{height:var(--nav-h);display:flex;align-items:center;gap:28px}
.logo{white-space:nowrap;flex:none;display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-display);font-weight:800;font-size:1.2rem;letter-spacing:-.03em}
.logo svg{width:30px;height:30px}
.logo b{color:var(--field)}

.nav-links{display:flex;gap:4px;margin-left:8px}
.nav-links a{padding:8px 12px;border-radius:var(--r-ctl);text-decoration:none;font-weight:500;font-size:.95rem;color:var(--muted);transition:color .15s,background-color .15s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink);background:var(--surface-2)}
.nav-end{margin-left:auto;display:flex;align-items:center;gap:8px}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-ctl);border:1px solid var(--line);background:transparent;font-size:1.15rem;transition:background-color .15s}
.icon-btn:hover{background:var(--surface-2)}
.burger{display:none}
@media (max-width:1000px){
  .nav-links{display:none}
  .nav.open .nav-links{display:flex;position:absolute;top:var(--nav-h);left:0;right:0;flex-direction:column;background:var(--surface);padding:12px 24px 18px;border-bottom:1px solid var(--line);gap:2px}
  .burger{display:grid}
  .nav-end .btn-line{display:none}
}


/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;color:var(--on-field);background:linear-gradient(180deg,var(--field-deep) 0%,var(--field) 38%,var(--field-soft) 72%,#3a64e3 100%);min-height:calc(100dvh - var(--nav-h));display:flex;align-items:center}

.hero .wrap{width:100%;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:center;padding-top:48px;padding-bottom:140px;position:relative;z-index:2}
.hero h1{font-size:clamp(2.6rem,5.1vw,4.7rem);font-weight:800;max-width:11ch}
.hero p.lede{margin-top:22px;font-size:1.15rem;color:var(--on-field-muted);max-width:34ch}
.hero .ctas{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
.sky{position:absolute;inset:0;z-index:0;pointer-events:none}
.cloud{position:absolute;border-radius:50%;background:rgba(255,255,255,.18);filter:blur(34px);animation:drift 38s linear infinite}
.cloud.c1{width:360px;height:90px;top:14%;left:-10%}
.cloud.c2{width:480px;height:110px;top:34%;left:30%;animation-duration:52s;animation-delay:-20s;opacity:.7}
.cloud.c3{width:300px;height:80px;top:8%;left:60%;animation-duration:44s;animation-delay:-8s}
@keyframes drift{from{transform:translateX(-12vw)}to{transform:translateX(120vw)}}
.hills{position:absolute;left:0;right:0;bottom:-1px;height:44%;z-index:1;pointer-events:none}
.hills svg{width:100%;height:100%}
.hills .h1{animation:sway 14s ease-in-out infinite alternate}
.hills .h2{animation:sway 18s ease-in-out infinite alternate-reverse}
@keyframes sway{from{transform:translateX(-1.5%)}to{transform:translateX(1.5%)}}

/* windows */
.win{background:var(--surface);color:var(--ink);border-radius:var(--r-win);box-shadow:var(--shadow-win);overflow:hidden;border:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.win-bar{border-radius:calc(var(--r-win) - 1px) calc(var(--r-win) - 1px) 0 0;display:flex;align-items:center;gap:10px;height:44px;padding:0 8px 0 16px;background:var(--surface-2);border-bottom:1px solid var(--line);font-size:.85rem;font-weight:600}
.win-bar .ph{font-size:1rem;color:var(--field)}

.win-bar .ttl{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win-ctl{display:flex}
.win-ctl i{width:34px;height:28px;display:grid;place-items:center;font-size:.8rem;color:var(--muted);font-style:normal}
.win-body{padding:18px}

.scene{position:relative;height:540px}
.scene .win.main{position:absolute;left:0;top:0;width:min(470px,100%);z-index:3}
.scene .win.session{position:absolute;right:0;bottom:0;width:min(400px,86%);z-index:2}
.scene .win.session .win-body{padding:0}
.log{background:#07102b;color:#cfe0ff;font-family:var(--f-mono);font-size:.8rem;line-height:1.9;padding:14px 16px;height:182px;overflow:hidden}
.log .l{opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.log .l.on{opacity:1;transform:none}
.log .ok{color:#6ee7b0}
.log .cur{display:inline-block;width:.55em;height:1em;background:#cfe0ff;vertical-align:-.15em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.session-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;font-size:.82rem;background:var(--surface)}
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--r-pill);font-size:.76rem;font-weight:600;background:var(--surface-2);color:var(--muted)}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.bad{background:var(--bad-bg);color:var(--bad)}

/* form atoms */
.field{display:grid;gap:6px;margin-bottom:14px}
.field>label,.lbl{font-size:.8rem;font-weight:600;color:var(--muted);letter-spacing:.01em}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--surface-2);border-radius:var(--r-ctl);padding:3px;gap:3px}
.seg button{border:0;background:transparent;height:34px;border-radius:6px;font-weight:600;font-size:.86rem;color:var(--muted);transition:background-color .15s,color .15s,box-shadow .15s}
.seg button[aria-pressed="true"],.seg button[aria-checked="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(10,19,48,.18)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);font-weight:600;font-size:.84rem;transition:border-color .15s,background-color .15s,transform .15s var(--ease)}
.chip small{font-family:var(--f-mono);font-weight:400;color:var(--muted);font-size:.74rem}
.chip:hover{border-color:var(--field-soft)}
.chip[aria-pressed="true"]{border-color:var(--field);background:color-mix(in srgb,var(--field) 10%,var(--surface));box-shadow:0 0 0 1px var(--field) inset}
.chip:active{transform:scale(.97)}
input[type=text],input[type=email],input[type=password],select,textarea{width:100%;height:44px;padding:0 12px;border-radius:var(--r-ctl);border:1px solid var(--line);background:var(--surface);transition:border-color .15s,box-shadow .15s}
textarea{height:auto;padding:10px 12px;min-height:96px;resize:vertical}
input:hover,select:hover,textarea:hover{border-color:var(--field-soft)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--field);box-shadow:0 0 0 3px color-mix(in srgb,var(--field) 28%,transparent)}
input::placeholder,textarea::placeholder{color:#5c6788}

.help{font-size:.78rem;color:var(--muted)}
.err{font-size:.78rem;color:var(--bad);display:none}
.invalid input{border-color:var(--bad)}
.invalid .err{display:block}

.price-line{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:6px;border-top:1px solid var(--line);margin-top:6px}
.price-line .amt{font-family:var(--f-display);font-weight:800;font-size:2rem;letter-spacing:-.03em}
.price-line .amt small{font-family:var(--f-ui);font-size:.9rem;font-weight:500;color:var(--muted);letter-spacing:0}

.cursor{position:absolute;z-index:9;width:22px;height:22px;left:0;top:0;pointer-events:none;opacity:0;transition:transform .9s var(--ease),opacity .3s;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.cursor.show{opacity:1}
.ripple{position:absolute;z-index:8;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:2px solid var(--accent);pointer-events:none;opacity:0}
.ripple.go{animation:ripple .6s var(--ease)}
@keyframes ripple{from{opacity:1;transform:scale(.3)}to{opacity:0;transform:scale(1.6)}}

/* taskbar */
.taskbar{position:absolute;left:0;right:0;bottom:0;height:44px;z-index:3;background:rgba(7,16,43,.55);backdrop-filter:blur(14px);border-top:1px solid rgba(255,255,255,.18);display:flex;align-items:center;gap:6px;padding:0 14px;color:#fff;font-size:.82rem}
.taskbar .tb-app{display:flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:6px;background:rgba(255,255,255,.14)}
.taskbar .tb-end{margin-left:auto;font-family:var(--f-mono);font-size:.78rem;text-align:right;line-height:1.2}

/* ---------- sections ---------- */
section{position:relative}
.sec{padding:112px 0}
.sec-tight{padding:88px 0}
.sec h2,.sec-tight h2{font-size:clamp(2rem,3.8vw,3.4rem);font-weight:800;max-width:16ch}
.sec .sub,.sec-tight .sub{margin-top:16px;color:var(--muted);max-width:52ch;font-size:1.08rem}
.field-sec{background:linear-gradient(180deg,var(--field) 0%,var(--field-deep) 100%);color:var(--on-field)}
.field-sec .sub{color:var(--on-field-muted)}
.sec-tight h2{max-width:20ch}

/* plans: window stack */
.plans-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cycle{width:min(380px,100%)}
.stack{margin-top:56px;display:grid;grid-template-columns:1fr 1.18fr 1fr;gap:20px;align-items:end}
.plan{position:relative;overflow:visible;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.plan:hover{transform:translateY(-6px)}
.plan.feat{margin-bottom:28px}
.plan .win-body{padding:24px}
.plan h3{font-size:1.7rem;font-weight:800}
.plan .who{margin-top:6px;color:var(--muted);font-size:.95rem;min-height:3em}
.plan .cost{margin:20px 0 4px;display:flex;align-items:baseline;gap:6px}
.plan .cost .n{font-family:var(--f-display);font-weight:800;font-size:3rem;letter-spacing:-.04em}
.plan .cost .per{color:var(--muted)}
.plan .bill{font-size:.84rem;color:var(--muted);min-height:1.4em}
.plan ul{list-style:none;margin:18px 0 22px;display:grid;gap:9px}
.plan li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem}
.plan li .ph{color:var(--ok);margin-top:3px;flex:none}
.plan .btn{width:100%}
.badge-popular{vertical-align:middle;margin-left:12px;background:var(--accent);color:var(--accent-ink);font-family:var(--f-ui);letter-spacing:0;font-weight:700;font-size:.76rem;height:26px;padding:0 12px;border-radius:var(--r-pill);display:inline-flex;align-items:center}
.included{margin-top:64px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}
.included h3{font-size:1.15rem;font-family:var(--f-ui);font-weight:600;letter-spacing:0;margin-bottom:10px}
.inc-group{padding:22px 0;border-top:1px solid var(--line)}
.inc-group p{color:var(--muted);max-width:46ch}

/* split-flap board */
.board-wrap{margin-top:48px;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px;align-items:start}
.board{background:#080e24;border-radius:var(--r-win);padding:14px 18px 10px;box-shadow:var(--shadow-win);border:1px solid rgba(255,255,255,.14);color:#f2f5ff}
.board table{width:100%;border-collapse:separate;border-spacing:0 6px;font-family:var(--f-mono)}
.board th{font-weight:500;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:#9fb2e6;text-align:left;padding:4px 6px 6px}
.board td{padding:0 3px}
.flap{display:inline-flex;gap:2px;vertical-align:middle}
.flap i{font-style:normal;display:inline-grid;place-items:center;width:1.45ch;min-width:21px;height:34px;background:linear-gradient(#1a2347 0 49%,#0e1530 51% 100%);border-radius:4px;font-size:1.06rem;font-weight:500;color:#fff;position:relative;overflow:hidden}
.flap i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.7)}
.flap i.flip{animation:flip .38s var(--ease)}
@keyframes flip{0%{transform:perspective(200px) rotateX(-90deg);opacity:.2}100%{transform:perspective(200px) rotateX(0);opacity:1}}
.board .city{font-family:var(--f-ui);font-size:.98rem;font-weight:500;padding:0 10px 0 6px;white-space:nowrap}
.board .state{font-family:var(--f-ui);font-size:.78rem;font-weight:600;color:#7ff0b8;white-space:nowrap}
.board-note{font-size:.8rem;color:var(--on-field-muted);margin-top:14px;max-width:60ch}
.board-copy h3{font-size:1.6rem;font-weight:800}
.board-copy p{margin-top:12px;color:var(--on-field-muted)}
.board-copy .btn{margin-top:22px}

/* finder */
.finder{margin-top:44px;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:32px;align-items:start}
.work-list{display:grid;gap:8px;align-content:start}
.work{display:flex;align-items:center;gap:14px;text-align:left;width:100%;min-height:58px;padding:0 18px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-ctl);font-weight:600;transition:border-color .18s,background-color .18s,transform .18s var(--ease)}
.work .ph{font-size:1.4rem;color:var(--field)}

.work:hover{border-color:var(--field-soft);transform:translateX(4px)}
.work[aria-pressed="true"]{border-color:var(--field);background:color-mix(in srgb,var(--field) 9%,var(--surface));box-shadow:0 0 0 1px var(--field) inset}
.result .win-body{padding:28px;display:grid;gap:18px;min-height:100%}
.result h3{font-size:2.2rem;font-weight:800}
.result .why{color:var(--muted);max-width:50ch}
.spec-row{display:flex;flex-wrap:wrap;gap:8px}
.result .go{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.result .reveal{animation:rise .5s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* systems */
.os-row{margin-top:44px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.os{display:grid;justify-items:center;gap:12px;padding:22px 8px 16px;border-radius:var(--r-ctl);text-align:center;transition:background-color .2s,transform .25s var(--ease)}
.os:hover{background:rgba(255,255,255,.12);transform:translateY(-4px)}
.os .ico{width:64px;height:64px;display:grid;place-items:center;border-radius:14px;background:#fff;box-shadow:0 8px 18px -8px rgba(0,0,0,.5)}
.os .ico img{width:34px;height:34px}
.os .ico .ph{font-size:2rem;color:#0a64d6}
.os b{font-size:.94rem;font-weight:600}
.os small{color:var(--on-field-muted);font-size:.8rem;margin-top:-8px}

/* flow */
.flow{margin-top:56px;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.flow::before{content:"";position:absolute;left:0;right:0;top:28px;height:2px;background:var(--line)}
.flow::after{content:"";position:absolute;left:0;top:28px;height:2px;width:0;background:var(--field);transition:width 1.6s var(--ease)}
.flow.in::after{width:100%}
.fstep{position:relative;padding-top:0}
.fstep .dot{width:56px;height:56px;border-radius:var(--r-win);display:grid;place-items:center;background:var(--surface);border:2px solid var(--line);font-size:1.5rem;color:var(--field);position:relative;z-index:1;transition:border-color .4s,background-color .4s,color .4s}
.flow.in .fstep .dot{border-color:var(--field);}
.flow.in .fstep:nth-child(1) .dot{transition-delay:.1s}
.flow.in .fstep:nth-child(2) .dot{transition-delay:.5s}
.flow.in .fstep:nth-child(3) .dot{transition-delay:.9s}
.flow.in .fstep:nth-child(4) .dot{transition-delay:1.3s}
.fstep h3{margin-top:18px;font-size:1.4rem;font-weight:800}
.fstep p{margin-top:8px;color:var(--muted);font-size:.96rem;max-width:30ch}


/* faq */
.faq{margin-top:40px;max-width:820px}
.faq details{border-top:1px solid var(--line);padding:0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;font-weight:600;font-size:1.1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ph{transition:transform .3s var(--ease);color:var(--field)}
.faq details[open] summary .ph{transform:rotate(180deg)}
.faq .ans{padding:0 0 22px;color:var(--muted);max-width:62ch}

/* cta */
.cta-band{text-align:left}
.cta-band .inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center}
.cta-band h2{max-width:14ch}

/* footer */
footer{background:var(--surface);border-top:1px solid var(--line);padding:56px 0 40px}
.foot{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px}
.foot .fh{display:block;font-size:.85rem;color:var(--muted);font-weight:600;margin-bottom:12px}
.foot a{display:block;text-decoration:none;padding:5px 0;color:var(--ink);font-size:.95rem}
.foot a:hover{text-decoration:underline}
.foot p{color:var(--muted);font-size:.92rem;max-width:34ch;margin-top:14px}
.legal{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem}

/* ---------- order view ---------- */
.page-head{padding:56px 0 28px}
.page-head h1{font-size:clamp(2rem,3.6vw,3.2rem);font-weight:800}
.page-head p{margin-top:10px;color:var(--muted);max-width:56ch}
.order-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px;align-items:start;padding-bottom:96px}
.block{margin-bottom:20px}
.plan-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.opt{display:grid;gap:4px;text-align:left;padding:14px;border-radius:var(--r-ctl);border:1px solid var(--line);background:var(--surface);transition:border-color .15s,background-color .15s}
.opt:hover{border-color:var(--field-soft)}
.opt[aria-pressed="true"]{border-color:var(--field);background:color-mix(in srgb,var(--field) 9%,var(--surface));box-shadow:0 0 0 1px var(--field) inset}
.opt b{font-size:1rem}
.opt span{font-size:.82rem;color:var(--muted)}
.summary{position:sticky;top:calc(var(--nav-h) + 20px)}
.sum-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.sum-row span:first-child{color:var(--muted)}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0 4px}
.sum-total b{font-family:var(--f-display);font-size:2rem;font-weight:800;letter-spacing:-.03em}
.pay{display:grid;gap:8px;margin:16px 0}
.pay label{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-ctl);cursor:pointer;font-weight:600;font-size:.94rem;background:var(--surface)}
.pay label:has(input:checked){border-color:var(--field);box-shadow:0 0 0 1px var(--field) inset;background:color-mix(in srgb,var(--field) 8%,var(--surface))}
.pay input{accent-color:var(--field);width:18px;height:18px}
.pay .ph{font-size:1.3rem;color:var(--field)}

.done{display:none;text-align:left}
.done.show{display:block;animation:rise .5s var(--ease)}
.done .tick{width:52px;height:52px;border-radius:var(--r-win);display:grid;place-items:center;background:var(--ok-bg);color:var(--ok);font-size:1.6rem;margin-bottom:14px}

/* ---------- client area ---------- */
.client{display:grid;grid-template-columns:230px minmax(0,1fr);gap:28px;padding-bottom:96px;align-items:start}
.side{position:sticky;top:calc(var(--nav-h) + 20px);display:grid;gap:4px}
.side button{display:flex;align-items:center;gap:12px;height:44px;padding:0 14px;border:0;background:transparent;border-radius:var(--r-ctl);font-weight:600;text-align:left;color:var(--muted);transition:background-color .15s,color .15s}
.side button .ph{font-size:1.2rem}
.side button:hover{background:var(--surface-2);color:var(--ink)}
.side button[aria-selected="true"]{background:var(--field);color:#fff}
.tabpanel{display:none}
.tabpanel.on{display:block;animation:rise .4s var(--ease)}
.due{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:20px 22px;border-radius:var(--r-win);background:var(--field);color:#fff;margin-bottom:20px}
.due b{font-family:var(--f-display);font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.due p{color:var(--on-field-muted);font-size:.92rem}
.svc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line)}
.svc:last-child{border-bottom:0}
.svc h4{font-family:var(--f-display);letter-spacing:-.01em;font-size:1.2rem;font-weight:600;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.svc .meta{margin-top:6px;color:var(--muted);font-size:.88rem;display:flex;gap:8px 18px;flex-wrap:wrap}
.svc .acts{display:flex;gap:8px;flex-wrap:wrap}
table.data{width:100%;border-collapse:collapse;font-size:.94rem}
table.data th{text-align:left;font-size:.78rem;color:var(--muted);font-weight:600;padding:12px 20px;border-bottom:1px solid var(--line)}
table.data td{padding:14px 20px;border-bottom:1px solid var(--line);font-variant-numeric:proportional-nums}
table.data tr:last-child td{border-bottom:0}
.empty{padding:38px 20px;text-align:center;color:var(--muted)}
.tick-list .t{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.tick-list .t b{font-weight:600}
.tick-list .t small{display:block;color:var(--muted);margin-top:2px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;z-index:80;background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:var(--r-ctl);font-weight:600;font-size:.92rem;box-shadow:var(--shadow-win);pointer-events:none;transition:opacity .3s,transform .4s var(--ease);max-width:calc(100vw - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* preview ribbon */
.ribbon{background:var(--ink);color:var(--bg);text-align:center;font-size:.82rem;padding:7px 16px}
.ribbon b{color:var(--accent)}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  .hero .wrap{grid-template-columns:1fr;padding-bottom:150px}
  .hero h1{max-width:14ch}
  .scene{height:auto;max-width:560px;display:grid;gap:16px}
  .scene .win.main,.scene .win.session{position:relative;width:100%;right:auto;bottom:auto}
  .board-wrap,.finder{grid-template-columns:1fr}
  .os-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .order-grid,.client{grid-template-columns:1fr}
  .summary,.side{position:static}
  .side{grid-auto-flow:column;grid-auto-columns:1fr;overflow-x:auto}
  .side button{justify-content:center;padding:0 10px;white-space:nowrap}
  .side button span{display:none}
  .side button[aria-selected="true"] span{display:inline}
}
@media (max-width:860px){
  .stack{grid-template-columns:1fr;gap:28px}
  .plan.feat{margin-bottom:0;order:-1}
  .included{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr 1fr;gap:36px 20px}
  .flow::before,.flow::after{display:none}
  .foot{grid-template-columns:1fr 1fr}
  .cta-band .inner{grid-template-columns:1fr}
  .sec{padding:80px 0}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  .plan-pick{grid-template-columns:1fr}
  .two{grid-template-columns:1fr}
  .board td.lat-h,.board th.lat-h{display:none}
  .svc{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .hero .ctas .btn{flex:1}
  .logo{font-size:1.05rem}.logo svg{width:26px;height:26px}
  .nav .wrap{gap:12px}.nav-end{gap:6px}
  table.data th,table.data td{padding:12px 12px}
  .hide-s{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  .flow::after{width:100%}
}

/* ======================= multi-page additions ======================= */
/* nav dropdown */
.dd{position:relative}
.dd-btn{display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:var(--r-ctl);border:0;background:transparent;font-weight:500;font-size:.95rem;color:var(--muted);transition:color .15s,background-color .15s}
.dd-btn:hover,.dd.open .dd-btn,.dd-btn[aria-current="page"]{color:var(--ink);background:var(--surface-2)}
.dd-btn .ph{font-size:.8rem;transition:transform .25s var(--ease)}
.dd.open .dd-btn .ph{transform:rotate(180deg)}
.dd-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:250px;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-win);box-shadow:var(--shadow-win);display:none;z-index:60}
.dd.open .dd-menu{display:block;animation:rise .25s var(--ease)}
.nav-links .dd-menu a{display:flex;align-items:center;gap:12px;padding:10px 12px;color:var(--ink);font-weight:500;border-radius:var(--r-ctl)}
.nav-links .dd-menu a small{display:block;color:var(--muted);font-weight:400;font-size:.8rem}
.nav-links .dd-menu a .ph{font-size:1.25rem;color:var(--field)}

.nav-links .dd-menu a:hover{background:var(--surface-2)}
.m-only{display:none}
@media (max-width:1100px){.nav-end .signin{display:none}}
@media (max-width:1000px){
  .nav-links .m-only{display:block}
  .dd-btn{width:100%;justify-content:space-between;padding:10px 12px}
  .dd-menu{position:static;box-shadow:none;border:0;padding:0 0 0 12px;min-width:0;background:transparent}
  .nav-end .btn-line{display:none}
}
.nav-links a[aria-current="page"]{color:var(--ink);background:var(--surface-2)}

/* generic page chrome */
.crumbs{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:.88rem;padding-top:28px}
.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline}
.prose{max-width:68ch}.prose h2{font-size:1.6rem;font-weight:800;margin:40px 0 10px}.prose p{color:var(--muted);margin-bottom:12px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
.link-list{list-style:none;display:grid;gap:2px}
.page-head .actions{margin-top:20px;display:flex;gap:10px;flex-wrap:wrap}

/* family summary (plans page) */
.fam-sum{margin-top:40px;display:grid;gap:0}
.fam-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) auto;gap:24px;align-items:center;padding:26px 0;border-top:1px solid var(--line)}
.fam-row:last-child{border-bottom:1px solid var(--line)}
.fam-row h3{font-size:1.5rem;font-weight:800;display:flex;align-items:center;gap:12px}
.fam-row h3 .ph{font-size:1.6rem;color:var(--field)}
.fam-row p{color:var(--muted)}
.fam-row .from{text-align:right;white-space:nowrap}
.fam-row .from b{font-family:var(--f-display);font-size:1.6rem;letter-spacing:-.02em}
.fam-row .from small{display:block;color:var(--muted);font-size:.82rem}
@media (max-width:860px){.fam-row{grid-template-columns:1fr;gap:12px}.fam-row .from{text-align:left}}

/* order: plan type cards (infographic) */
.type-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.type-card{position:relative;display:grid;gap:16px;text-align:left;padding:22px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-win);overflow:hidden;transition:transform .35s var(--ease),border-color .2s,background-color .25s,box-shadow .35s var(--ease);animation:cardIn .7s var(--ease) both;animation-delay:calc(var(--i)*.08s)}
@keyframes cardIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.type-card:hover{transform:translateY(-3px);border-color:var(--field-soft);box-shadow:var(--shadow-soft)}
.type-card:active{transform:translateY(0) scale(.99)}
.tc-head{display:flex;gap:16px;align-items:center;padding-right:30px}
.tc-ico{width:58px;height:58px;border-radius:14px;display:grid;place-items:center;flex:none;font-size:1.9rem;background:color-mix(in srgb,var(--field) 12%,var(--surface));color:var(--field);transition:background-color .3s,color .3s,transform .45s var(--ease)}
.type-card:hover .tc-ico{transform:rotate(-7deg) scale(1.07)}
.tc-head b{display:block;font-family:var(--f-display);font-size:1.3rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.tc-head small{display:block;margin-top:5px;color:var(--muted);font-size:.9rem;line-height:1.4}
.tc-stats{display:grid;gap:11px}
.tc-stat{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l v" "r r";gap:7px 12px;align-items:baseline;font-size:.84rem;color:var(--muted)}
.tc-stat>span:first-child{grid-area:l;font-weight:600}
.tc-stat .range{grid-area:r}
.tc-stat em{grid-area:v;font-style:normal;color:var(--ink);font-weight:700;text-align:right;white-space:nowrap}
.range{position:relative;height:8px;border-radius:var(--r-pill);background:var(--surface-2)}
.range i{position:absolute;top:0;bottom:0;left:calc(var(--a)*100%);width:calc((var(--b) - var(--a))*100%);min-width:10px;border-radius:var(--r-pill);background:var(--field);transform-origin:left;animation:grow 1.1s var(--ease) calc(.3s + var(--i)*.08s) both}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.tc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-top:14px;border-top:1px dashed var(--line);font-size:.9rem}
.tc-foot .n{font-weight:700}
.tc-foot .from{color:var(--muted)}.tc-foot .from strong{color:var(--ink);font-family:var(--f-display);font-size:1.15rem;letter-spacing:-.02em}
.tc-check{position:absolute;top:16px;right:16px;font-size:1.5rem;color:var(--field);opacity:0;transform:scale(.4) rotate(-30deg);transition:opacity .3s,transform .55s var(--ease)}
.type-card[aria-pressed="true"]{border-color:var(--field);background:color-mix(in srgb,var(--field) 7%,var(--surface));box-shadow:0 0 0 1px var(--field) inset,var(--shadow-soft)}
.type-card[aria-pressed="true"] .tc-ico{background:var(--field);color:#fff}
.type-card[aria-pressed="true"] .tc-check{opacity:1;transform:none}
@media (max-width:760px){.type-cards{grid-template-columns:1fr}}

/* order: plan selection */
.ptools{display:grid;gap:12px;margin-bottom:14px}
.sub-tabs{display:flex;gap:8px;flex-wrap:wrap}
.sub-tabs button{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);font-weight:600;font-size:.9rem;color:var(--muted);transition:background-color .2s,border-color .2s,color .2s,transform .2s var(--ease)}
.sub-tabs button small{font-family:var(--f-mono);font-weight:500;font-size:.76rem;opacity:.75}
.sub-tabs button:hover{border-color:var(--field-soft);color:var(--ink)}
.sub-tabs button:active{transform:scale(.97)}
.sub-tabs button[aria-selected="true"]{background:var(--field);border-color:var(--field);color:#fff}
.sub-about{color:var(--muted);font-size:.92rem;max-width:70ch}
.ptable{border:1px solid var(--line);border-radius:var(--r-win);overflow:hidden;background:var(--surface);display:flex;flex-direction:column;min-width:0}
.p-filter{position:relative;border-bottom:1px solid var(--line)}
.p-filter .ph{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:1.15rem}
.p-filter input{border:0;border-radius:0;height:56px;padding-left:50px;background:transparent}
.p-filter input:focus{box-shadow:inset 0 -2px 0 var(--field)}
.p-scroll{max-height:540px;overflow:auto}
.p-table{width:100%;border-collapse:collapse;font-size:.94rem;min-width:720px}
.p-table thead th{position:sticky;top:0;background:var(--surface);z-index:1;text-align:left;border-bottom:1px solid var(--line);padding:0}
.p-table thead button{width:100%;display:flex;align-items:center;gap:6px;border:0;background:transparent;padding:14px 16px;font-weight:600;color:var(--muted);font-size:.86rem}
.p-table thead button .ph{font-size:.8rem;opacity:.6}
.p-table thead th[aria-sort="ascending"] button,.p-table thead th[aria-sort="descending"] button{color:var(--field)}
.p-table tbody tr{cursor:pointer;border-bottom:1px solid var(--line);transition:background-color .12s}
.p-table tbody tr:hover{background:var(--surface-2)}
.p-table tbody tr.on{background:color-mix(in srgb,var(--field) 12%,var(--surface));outline:2px solid var(--field);outline-offset:-2px}
.p-table tbody tr.off{opacity:.45;cursor:not-allowed}
.p-table td{padding:13px 16px;white-space:nowrap;font-variant-numeric:proportional-nums}
.p-table td.pr{font-weight:700;text-align:right}
.p-table td.pr small{color:var(--muted);font-weight:400}
.p-table thead th:last-child button{justify-content:flex-end}
.p-table .mini{display:inline-block;vertical-align:middle;width:46px;height:6px;margin-left:10px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden;position:relative}
.p-table .mini i{position:absolute;inset:0;border-radius:inherit;background:var(--field);transform-origin:left;transform:scaleX(var(--p))}
.p-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 16px;border-top:1px solid var(--line);font-size:.82rem;color:var(--muted)}
.order-grid{grid-template-columns:minmax(0,1.85fr) minmax(320px,.95fr)}
@media (max-width:1060px){.order-grid{grid-template-columns:minmax(0,1fr)}.order-grid>*{min-width:0}}

/* order: location picker */
.loc-search{position:relative}
.loc-search .ph{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted)}
.loc-search input{padding-left:42px}
.loc-meta{display:flex;justify-content:space-between;margin:10px 2px 0;font-size:.82rem;color:var(--muted)}
.loc-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:12px;align-items:start}
.loc-col{border:1px solid var(--line);border-radius:var(--r-win);overflow:hidden;background:var(--surface)}
.loc-col h3{font-family:var(--f-ui);letter-spacing:0;font-size:.86rem;font-weight:600;color:var(--muted);padding:13px 16px;border-bottom:1px solid var(--line);line-height:1.2}
.loc{display:flex;align-items:center;gap:12px;width:100%;height:44px;padding:0 16px;border:0;background:transparent;text-align:left;font-size:.95rem;transition:background-color .12s}
.loc img{width:24px;height:18px;border-radius:3px;object-fit:cover;flex:none;box-shadow:0 0 0 1px rgba(10,19,48,.14)}
.loc span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.loc small{color:var(--muted)}
.loc .ph{opacity:0;color:var(--field)}
.loc:hover:not(:disabled){background:var(--surface-2)}
.loc[aria-pressed="true"]{background:color-mix(in srgb,var(--field) 12%,var(--surface));font-weight:600}
.loc[aria-pressed="true"] .ph{opacity:1}
.loc.off{opacity:.38;cursor:not-allowed}
.region-tabs{display:none;margin-top:12px}
.empty-note{padding:26px;text-align:center;color:var(--muted)}
@media (max-width:860px){
  .loc-cols{grid-template-columns:1fr}
  .region-tabs{display:grid}
  .loc-cols:not(.searching) .loc-col:not(.on){display:none}
}

/* order: os, features, details */
.os-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:12px}
.os-tile{display:flex;align-items:center;gap:14px;text-align:left;padding:14px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-ctl);transition:border-color .15s,background-color .15s}
.os-tile:hover{border-color:var(--field-soft)}
.os-tile[aria-pressed="true"]{border-color:var(--field);background:color-mix(in srgb,var(--field) 9%,var(--surface));box-shadow:0 0 0 1px var(--field) inset}
.os-tile .ico{width:46px;height:46px;border-radius:10px;background:#fff;display:grid;place-items:center;flex:none;box-shadow:0 1px 3px rgba(10,19,48,.18)}
.os-tile .ico .ph{font-size:1.6rem;color:#0a64d6}
.os-tile b{display:block;font-size:.95rem}.os-tile small{color:var(--muted);font-size:.8rem}
.os-note{margin-top:12px;font-size:.88rem;color:var(--muted)}
.seg button:disabled{opacity:.45;cursor:not-allowed}
.addon{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 18px;align-items:center;padding:16px 0;border-top:1px solid var(--line)}
.addon:first-of-type{border-top:0;padding-top:0}
.addon b{display:block}.addon span.d{display:block;color:var(--muted);font-size:.88rem;margin-top:2px}
.addon .rt{display:flex;align-items:center;gap:14px;justify-content:flex-end}
.addon .unit{font-size:.85rem;color:var(--muted);white-space:nowrap;min-width:90px;text-align:right}
.switch{position:relative;width:46px;height:26px;flex:none}
.switch input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.switch span{position:absolute;inset:0;background:var(--line);border-radius:var(--r-pill);transition:background-color .2s}
.switch span::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(10,19,48,.35);transition:transform .25s var(--ease)}
.switch input:checked+span{background:var(--field)}
.switch input:checked+span::after{transform:translateX(20px)}
.switch input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-ctl);overflow:hidden}
.stepper button{width:38px;height:38px;border:0;background:var(--surface-2);font-size:1.1rem;display:grid;place-items:center}
.stepper button:hover{background:var(--line)}
.stepper output{min-width:42px;text-align:center;font-weight:600;font-variant-numeric:proportional-nums}
.pw-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center}
.meter{display:flex;gap:4px;margin-top:8px}
.meter i{flex:1;height:4px;border-radius:2px;background:var(--line);transition:background-color .2s}
.meter i.on.s1{background:var(--bad)}.meter i.on.s2{background:var(--warn)}.meter i.on.s3,.meter i.on.s4{background:var(--ok)}
.sum-row .inl{display:inline-flex;align-items:center;gap:8px}
.sum-row .inl img{width:20px;height:15px;border-radius:2px;object-fit:cover}
.sum-total b small{font-size:.9rem;font-weight:500;color:var(--muted);letter-spacing:0;font-family:var(--f-ui)}
.fine{font-size:.8rem;color:var(--muted);margin-top:10px}
h2.ttl{font-family:var(--f-ui);font-size:.88rem;font-weight:600;letter-spacing:0;line-height:1.2;margin:0}
@media (max-width:560px){.addon{grid-template-columns:1fr}.addon .rt{justify-content:space-between}.pw-row{grid-template-columns:1fr auto}.pw-row .btn{grid-column:1/-1}}

/* locations page tiles */
.loc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-top:24px}
.loc-tile{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--surface);text-decoration:none;transition:border-color .15s,transform .2s var(--ease),background-color .15s}
.loc-tile:hover{border-color:var(--field);transform:translateY(-2px)}
.loc-tile img{width:32px;height:24px;border-radius:4px;object-fit:cover;box-shadow:0 0 0 1px rgba(10,19,48,.14)}
.loc-tile b{display:block;font-size:1rem}.loc-tile small{color:var(--muted)}
.loc-tile .ms{margin-left:auto;font-family:var(--f-mono);font-size:.8rem;color:var(--muted)}
.region-h{margin-top:56px;font-size:clamp(1.7rem,2.8vw,2.3rem);font-weight:800;letter-spacing:-.03em}

/* systems page */
.os-big{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:20px}
.check-list{list-style:none;display:grid;gap:10px;margin-top:16px}
.check-list li{display:flex;gap:12px;align-items:flex-start}
.check-list .ph{color:var(--ok);margin-top:4px}

/* client sidebar links */
.side a{display:flex;align-items:center;gap:12px;height:44px;padding:0 14px;border-radius:var(--r-ctl);font-weight:600;text-decoration:none;color:var(--muted);transition:background-color .15s,color .15s}
.side a .ph{font-size:1.2rem}
.side a:hover{background:var(--surface-2);color:var(--ink)}
.side a[aria-current="page"]{background:var(--field);color:#fff}
.side a .n{margin-left:auto;font-size:.76rem;background:var(--accent);color:var(--accent-ink);border-radius:var(--r-pill);padding:1px 8px;font-weight:700}
.stat-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:20px}
.stat-row a{display:block;padding:18px;border:1px solid var(--line);border-radius:var(--r-win);background:var(--surface);text-decoration:none;transition:border-color .15s,transform .2s var(--ease)}
.stat-row a:hover{border-color:var(--field);transform:translateY(-2px)}
.stat-row b{font-family:var(--f-display);font-size:2rem;letter-spacing:-.03em;display:block}
.stat-row span{color:var(--muted);font-size:.9rem}
.hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:26px 0 10px}
.hd h2{font-family:var(--f-display);font-size:1.4rem;font-weight:800}
@media (max-width:560px){.stat-row{grid-template-columns:1fr}}
@media (max-width:1060px){.side a span{display:inline}.side{grid-auto-flow:row;overflow:visible}}

/* support */
.kb{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 56px;margin-top:28px}
.kb-group h2{font-family:var(--f-ui);letter-spacing:0;font-size:1.3rem;font-weight:700;padding:14px 0 8px;border-bottom:2px solid var(--ink)}
.kb-group ul{list-style:none}
.kb-group li a{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none}
.kb-group li a:hover{color:var(--field)}
.kb-group li a .ph{color:var(--muted)}
.search-big{position:relative;max-width:640px;margin-top:22px}
.search-big .ph{position:absolute;left:18px;top:50%;transform:translateY(-50%);font-size:1.2rem;color:var(--muted)}
.search-big input{height:56px;padding-left:50px;font-size:1.05rem}
@media (max-width:760px){.kb{grid-template-columns:1fr}.split{grid-template-columns:1fr}}
.form-win{max-width:720px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.row2{grid-template-columns:1fr}}
.auth-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start;max-width:980px}
@media (max-width:860px){.auth-grid{grid-template-columns:1fr}}
.check{display:flex;gap:10px;align-items:center;font-size:.92rem}
.check input{accent-color:var(--field);width:18px;height:18px}

/* internal pricing analysis */
.an-table{width:100%;border-collapse:collapse;font-size:.9rem}
.an-table th{text-align:left;font-size:.78rem;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.an-table td{padding:10px 12px;border-bottom:1px solid var(--line);font-variant-numeric:proportional-nums;vertical-align:top}
.an-table td.num{text-align:right;white-space:nowrap}
.verdict{padding:18px 20px;border-radius:var(--r-win);background:var(--warn-bg);color:var(--ink);border:1px solid var(--line)}
.verdict b{color:var(--warn)}
.callout-bad{color:var(--bad);font-weight:600}
.scroll-x{overflow-x:auto}
.foot .fh{display:block;font-size:.85rem;color:var(--muted);font-weight:600;margin-bottom:12px}

/* ======================= infographic pricing cards ======================= */
.plans-tools{margin-top:30px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.plans-tools .seg{width:min(340px,100%)}
.plans-tools p{color:var(--muted);font-size:.92rem}
.stack{margin-top:40px}
.plan2{position:relative;opacity:0;transform:translateY(34px) scale(.95);filter:blur(8px);transition:opacity .9s var(--ease) calc(var(--d,0)*.14s),transform .9s var(--ease) calc(var(--d,0)*.14s),filter .9s var(--ease) calc(var(--d,0)*.14s)}
.plan2.in{opacity:1;transform:none;filter:none}
.plan2.quick{transition-delay:0s}
.plan2.feat{margin-bottom:28px}
.tilt{position:relative;background:var(--surface);border-radius:var(--r-win);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);box-shadow:var(--shadow-win);overflow:hidden;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .3s var(--ease),box-shadow .4s var(--ease)}
.plan2.hot .tilt{box-shadow:0 1px 0 rgba(10,19,48,.06),0 30px 54px -16px rgba(10,19,48,.36),0 10px 18px -8px rgba(10,19,48,.2)}
.tilt::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--field) 13%,transparent),transparent 62%)}
.plan2.hot .tilt::before{opacity:1}
.sheen{position:absolute;top:0;bottom:0;left:-60%;width:38%;z-index:2;pointer-events:none;transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);opacity:0}
.plan2.in .sheen{animation:sheen 1.5s var(--ease) calc(var(--d,0)*.14s + .6s) 1 both}
.plan2.feat.in .sheen{animation:sheenLoop 9s ease-in-out 2.4s infinite}
@keyframes sheen{0%{left:-60%;opacity:.9}100%{left:140%;opacity:0}}
@keyframes sheenLoop{0%,62%{left:-60%;opacity:0}66%{opacity:.9}84%,100%{left:140%;opacity:0}}
.p2-body{position:relative;z-index:1;padding:24px}
.p2-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.p2-top h3{font-size:1.9rem;font-weight:800}
.plan2 .who{color:var(--muted);margin-top:6px;min-height:3em}
.p2-price{display:flex;align-items:baseline;gap:6px;margin:16px 0 12px}
.p2-price b{font-family:var(--f-display);font-size:3.2rem;font-weight:800;letter-spacing:-.04em;line-height:1}
.p2-price span{color:var(--muted)}
.p2-chips{display:flex;flex-wrap:wrap;gap:6px}
.p2-chips .pill{height:26px}
.p2-os{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:.88rem;margin-top:12px}
.p2-os .ph{font-size:1.1rem;color:var(--field)}

.metrics{display:grid;gap:18px;margin:20px 0;padding:20px 0;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line)}
.m-head{display:flex;align-items:center;gap:10px;margin-bottom:9px;font-size:.88rem;color:var(--muted)}
.m-head i{font-size:1.2rem;color:var(--field)}
.m-head b{margin-left:auto;color:var(--ink);font-family:var(--f-display);font-size:1.3rem;letter-spacing:-.02em;font-variant-numeric:proportional-nums}
.cores{display:flex;gap:5px}
.core{flex:1;aspect-ratio:1;max-width:30px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);transition:transform .55s var(--ease) calc(.3s + var(--k)*.08s),background-color .4s calc(.3s + var(--k)*.08s),border-color .4s calc(.3s + var(--k)*.08s),opacity .4s calc(.3s + var(--k)*.08s)}
.core.on{transform:scale(.5);opacity:.25}
.in .core.on{background:var(--field);border-color:var(--field);transform:none;opacity:1}
.bar{position:relative;height:10px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden}
.bar i{position:absolute;inset:0;transform:scaleX(0);transform-origin:left;background:var(--field);border-radius:inherit;transition:transform 1.3s var(--ease) calc(.3s + var(--ix,0)*.12s)}
.in .bar i{transform:scaleX(var(--p))}
.bar u{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 calc(12.5% - 1px),color-mix(in srgb,var(--surface) 75%,transparent) calc(12.5% - 1px) 12.5%)}
.p2-inc{list-style:none;display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:20px;font-size:.88rem;color:var(--muted)}
.p2-inc li{display:flex;align-items:center;gap:6px}
.p2-inc i{color:var(--ok);font-size:1rem}
.btn.shine{position:relative;overflow:hidden;width:100%}
.btn.shine::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:50%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transition:left .7s var(--ease)}
.btn.shine:hover::after{left:130%}
.btn.shine .ph{transition:transform .25s var(--ease)}
.btn.shine:hover .ph{transform:translateX(4px)}
.badge-popular{position:relative}

/* comparison infographic */
.compare{margin-top:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 56px}
.cmp-legend{grid-column:1/-1;display:flex;gap:20px;flex-wrap:wrap;font-size:.92rem;font-weight:600}
.sw{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:8px;vertical-align:-1px}
.t1{background:#8fb0ff}.t2{background:#3b6cf0}.t3{background:#1c3fb0}
.bar.t1,.bar.t2,.bar.t3{background:var(--surface-2)}
.bar.t1 i{background:#8fb0ff}.bar.t2 i{background:#3b6cf0}.bar.t3 i{background:#1c3fb0}
.cmp-block h3{font-family:var(--f-ui);font-size:1rem;font-weight:700;letter-spacing:0;margin-bottom:6px}
.cmp-row{display:grid;grid-template-columns:76px minmax(0,1fr) 76px;gap:12px;align-items:center;margin:9px 0}
.cmp-name{font-size:.88rem;color:var(--muted)}
.cmp-row b{text-align:right;font-variant-numeric:proportional-nums;font-size:.95rem}
@media (max-width:860px){.compare{grid-template-columns:1fr}.plan2.feat{margin-bottom:0;order:-1}}
@media (prefers-reduced-motion:reduce){
  .plan2{opacity:1;transform:none;filter:none}
  .core.on{background:var(--field);border-color:var(--field);transform:none;opacity:1}
  .bar i{transform:scaleX(var(--p))}
}

/* ======================= pricing deck (dark stage) ======================= */
.stage{position:relative;overflow:hidden;background:#070b19;color:#f4f6ff;padding:96px 0 104px;isolation:isolate}
.stage::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(900px 520px at 12% -8%,rgba(59,108,240,.35),transparent 60%),radial-gradient(760px 480px at 100% 100%,rgba(255,191,47,.12),transparent 60%)}
.stage-head{margin-bottom:34px}
.stage-head h2{font-size:clamp(2rem,3.8vw,3.4rem);font-weight:800;max-width:18ch}
.stage-head .sub{margin-top:14px;color:#b4bfe0;max-width:56ch;font-size:1.08rem}
.dk-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.dk-tabs{display:inline-flex;gap:4px;padding:6px;border:1px solid rgba(255,255,255,.12);border-radius:var(--r-win);background:rgba(255,255,255,.04)}
.dk-tabs button{padding:12px 22px;border:0;border-radius:var(--r-ctl);background:transparent;color:#aab5d8;font-weight:600;font-size:1rem;transition:background-color .2s,color .2s}
.dk-tabs button:hover{color:#fff}
.dk-tabs button[aria-selected="true"]{background:rgba(255,255,255,.13);color:#fff}
.dk-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dk-find{white-space:nowrap;display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 20px;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-win);background:rgba(255,255,255,.04);color:#fff;font-weight:600;transition:background-color .2s,transform .2s var(--ease)}
.dk-find:hover{background:rgba(255,255,255,.1)}.dk-find:active{transform:scale(.98)}
.dk-find .ph{font-size:1.2rem;color:var(--accent)}
.dk-os{background:rgba(255,255,255,.06);height:50px;border:1px solid rgba(255,255,255,.12);border-radius:var(--r-win);padding:5px}
.dk-os button{height:38px;color:#aab5d8;padding:0 16px}
.dk-os button[aria-pressed="true"]{background:rgba(255,255,255,.15);color:#fff;box-shadow:none}
.dk-bill{display:flex;align-items:center;gap:12px;height:50px;padding:0 18px;border:1px solid rgba(255,255,255,.12);border-radius:var(--r-win);background:rgba(255,255,255,.04);font-weight:600}
.dk-bill .dim{color:#8f9bc0}
.dk-bill .switch input:checked+span{background:var(--accent)}
.dk-bill .switch span{background:rgba(255,255,255,.22)}
.dk-off{background:var(--accent);color:var(--accent-ink);font-size:.76rem;padding:3px 8px;border-radius:var(--r-ctl)}
.dk-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:start}
.dk-grid.swap .dk{animation:swapIn .55s var(--ease) both;animation-delay:calc(var(--d)*.06s)}
@keyframes swapIn{from{opacity:.2;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.dk{position:relative;min-width:0;border-radius:var(--r-win);padding:28px;border:1px solid rgba(255,255,255,.1);opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease) calc(var(--d)*.12s),transform .8s var(--ease) calc(var(--d)*.12s),border-color .3s}
.dk.in{opacity:1;transform:none}
.dk:hover{border-color:rgba(255,255,255,.22)}
.t-basic{background:linear-gradient(180deg,#171d33 0%,#0d1224 100%)}
.t-business{background:linear-gradient(180deg,#16378a 0%,#0d1c4f 46%,#0a1231 100%);border-color:rgba(120,160,255,.35)}
.t-power{background:linear-gradient(180deg,#27327d 0%,#151b48 46%,#0b102a 100%);border-color:rgba(255,191,47,.4)}
.dk.pulse{animation:pulse 2.2s var(--ease)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,191,47,.7)}60%{box-shadow:0 0 0 18px rgba(255,191,47,0)}100%{box-shadow:0 0 0 0 rgba(255,191,47,0)}}
.dk-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dk-head h3{font-size:2.1rem;font-weight:800;letter-spacing:-.03em;text-transform:uppercase}
.dk-badges{display:flex;gap:6px;flex-wrap:wrap}
.bd{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:var(--r-ctl);font-size:.72rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase}
.bd.off{background:#ff4d7a;color:#fff}.bd.rec{background:rgba(255,255,255,.16);color:#fff}.bd.best{background:var(--accent);color:var(--accent-ink)}
.dk-tag{margin-top:6px;color:#aab5d8}
.al{margin-top:20px;padding:20px;border-radius:var(--r-win);background:rgba(255,255,255,.06)}
.al-big{display:flex;align-items:center;gap:12px;font-family:var(--f-display);font-weight:800;font-size:1.55rem;letter-spacing:-.02em}
.al-big .ph{color:var(--accent);font-size:1.5rem}
.al-big b{font-weight:800;font-variant-numeric:proportional-nums}
.al-sub{margin-top:12px;color:#b4bfe0;font-size:.96rem;line-height:1.7}
.al-sub span{border-bottom:1px dotted rgba(255,255,255,.4);cursor:help}
.al-slide{margin-top:18px}
.rng{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--accent) var(--pct,0%),rgba(255,255,255,.2) var(--pct,0%));outline:none;cursor:pointer}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;border:0;cursor:grab;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%230a1330' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 3L1.5 7l3 4M9.5 3l3 4-3 4'/%3E%3C/svg%3E") center no-repeat;box-shadow:0 3px 10px rgba(0,0,0,.45);transition:transform .2s var(--ease)}
.rng::-moz-range-thumb{width:30px;height:30px;border-radius:50%;border:0;cursor:grab;background:#fff;box-shadow:0 3px 10px rgba(0,0,0,.45)}
.rng:active::-webkit-slider-thumb{transform:scale(1.12);cursor:grabbing}
.rng:focus-visible{outline:3px solid var(--accent);outline-offset:8px}
.stops{display:flex;justify-content:space-between;margin-top:14px;gap:6px}
.stops button{border:0;background:transparent;color:#9aa6cb;font-family:var(--f-mono);font-size:.8rem;padding:4px 2px;transition:color .2s}
.stops button.on{color:#fff;font-weight:600}.stops button:hover{color:#fff}
.fixed{display:flex;gap:10px;align-items:center;padding:14px 16px;border:1px solid rgba(255,255,255,.1);border-radius:var(--r-ctl);color:#c6cfea;font-size:.92rem}
.fixed .ph{color:#7ee0a8}
.pr{margin-top:22px}
.pr-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pr-old{color:#ff6f93;font-family:var(--f-display);font-weight:800;font-size:1.8rem;letter-spacing:-.03em}
.pr-n{font-family:var(--f-display);font-weight:800;font-size:3.3rem;letter-spacing:-.04em;line-height:1}
.pr-u{color:#aab5d8;font-size:.98rem}
.cta-wrap{position:relative;margin-top:18px}
.cta{position:relative;z-index:1;display:block;width:100%;height:58px;border:0;border-radius:var(--r-win);font-weight:700;font-size:1.08rem;color:var(--accent-ink);background:var(--accent);overflow:hidden;box-shadow:0 4px 0 rgba(0,0,0,.28);transition:transform .2s var(--ease),box-shadow .2s,background-color .2s}
.cta:hover{transform:translateY(-2px);background:var(--accent-hover);box-shadow:0 6px 0 rgba(0,0,0,.28)}
.cta:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.28)}
.cta::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:50%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);transition:left .7s var(--ease)}
.cta:hover::after{left:130%}
.t-basic .cta{background:#fff;color:#0a1330}.t-basic .cta:hover{background:#f1f4ff}
.cap{margin-top:-14px;padding:26px 14px 14px;border-radius:var(--r-win);background:rgba(255,255,255,.06);text-align:center;color:#b4bfe0;font-size:.95rem}
.cap b{color:#fff}
.pn{margin-top:14px;padding:18px 20px;border-radius:var(--r-win);background:rgba(255,255,255,.05)}
.pn.hot{background:linear-gradient(180deg,rgba(255,191,47,.2),rgba(255,191,47,.05));border:1px solid rgba(255,191,47,.4)}
.t-basic .pn.hot{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.pn-h{display:flex;align-items:center;justify-content:space-between;gap:12px;font-family:var(--f-display);font-weight:800;font-size:.95rem;letter-spacing:-.01em;text-transform:uppercase;padding-bottom:4px;white-space:nowrap}
.pn-h span{display:flex;align-items:center;gap:10px}
.pn-h span .ph{color:var(--accent);font-size:1.2rem}
.pn-h a{font-family:var(--f-ui);font-weight:500;font-size:.88rem;text-transform:none;color:#b4bfe0;text-decoration:none}
.pn-h a:hover{color:#fff}
.pn-h>.ph{color:#9aa6cb;cursor:help}
.rw{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid rgba(255,255,255,.08);font-size:.96rem;color:#eef1ff;text-decoration:none}
.rw:first-of-type{border-top:0}
.rw>.ph{font-size:1rem;color:#7ee0a8;flex:none}
.rw.no{color:rgba(255,255,255,.45)}.rw.no>.ph{color:rgba(255,255,255,.4)}
.rw span:not(.mb){flex:1;min-width:0}
.rw .mb{flex:0 0 58px;height:6px;border-radius:var(--r-pill);background:rgba(255,255,255,.14);overflow:hidden}
.rw .mb i{display:block;height:100%;width:100%;border-radius:inherit;background:var(--accent);transform-origin:left;transform:scaleX(var(--p));transition:transform .8s var(--ease)}
.ch{font-style:normal;font-weight:700;font-size:.78rem;padding:3px 9px;border-radius:var(--r-ctl);background:var(--accent);color:var(--accent-ink);white-space:nowrap;font-variant-numeric:proportional-nums}
.ch.g{background:rgba(255,255,255,.14);color:#fff}
.rw.more{color:#c6cfea}.rw.more:hover{color:#fff}.rw.more .ph{color:var(--accent)}
.ft{list-style:none;margin-top:18px;display:grid;gap:9px}
.ft li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;color:#eef1ff}
.ft li .ph{margin-top:4px;color:#7ee0a8;flex:none}
.ft li.no{color:rgba(255,255,255,.45)}.ft li.no .ph{color:rgba(255,255,255,.4)}
.dk-note{margin-top:28px;color:#8f9bc0;font-size:.85rem;max-width:90ch}
/* comparison + value */
.cmp-wrap{margin-top:80px}
.cmp-wrap h3,.val h3{font-size:2rem;font-weight:800;margin-bottom:20px}
.cmp-t{border:1px solid rgba(255,255,255,.1);border-radius:var(--r-win);overflow:hidden;background:rgba(255,255,255,.03);overflow-x:auto}
.cmp-t table{width:100%;border-collapse:collapse;min-width:640px}
.cmp-t th,.cmp-t td{padding:16px 20px;text-align:left;border-top:1px solid rgba(255,255,255,.08);font-size:.96rem;vertical-align:middle}
.cmp-t thead th{border-top:0;padding-top:22px;padding-bottom:18px}
.cmp-t thead th b{display:block;font-family:var(--f-display);font-size:1.25rem;letter-spacing:-.02em;text-transform:uppercase}
.cmp-t thead th span{color:#aab5d8;font-weight:400;font-size:.88rem}
.cmp-t tbody th{color:#c6cfea;font-weight:500;width:28%}
.cmp-t td .ph{margin-right:8px;color:#7ee0a8}.cmp-t td.no{color:rgba(255,255,255,.5)}.cmp-t td.no .ph{color:rgba(255,255,255,.4)}
.cmp-t tr.x{display:none}.cmp-t.open tr.x{display:table-row}
.cmp-t td b{font-family:var(--f-display);font-size:1.25rem;letter-spacing:-.02em}
.cmp-wrap .btn{margin-top:18px}
.val{margin-top:72px;max-width:900px}
.val>p{color:#b4bfe0;margin:-8px 0 22px}
.val-row{display:grid;grid-template-columns:minmax(120px,170px) minmax(0,1fr) 110px 150px;gap:16px;align-items:center;padding:14px 0;border-top:1px solid rgba(255,255,255,.08)}
.vn{display:flex;flex-direction:column;gap:6px;align-items:flex-start;font-family:var(--f-display);font-weight:800;font-size:1.15rem;text-transform:uppercase;letter-spacing:-.01em}
.vb{height:12px;border-radius:var(--r-pill);background:rgba(255,255,255,.1);overflow:hidden}
.vb i{display:block;height:100%;border-radius:inherit;background:#6f95ff;transform-origin:left;transform:scaleX(0);transition:transform 1.2s var(--ease)}
.cmp-wrap,.val{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
#deckExtra.in .cmp-wrap,#deckExtra.in .val{opacity:1;transform:none}
#deckExtra.in .vb i{transform:scaleX(var(--p))}
.val-row.best .vb i{background:var(--accent)}
.val-row b{font-family:var(--f-display);font-size:1.3rem;letter-spacing:-.02em;text-align:right}.val-row b small{font-family:var(--f-ui);font-size:.8rem;color:#aab5d8;font-weight:500}
.vr{color:#b4bfe0;font-size:.9rem;text-align:right}
/* dialog */
.dk-dlg{border:1px solid rgba(255,255,255,.14);border-radius:var(--r-win);background:#0f1530;color:#fff;padding:26px;width:min(480px,calc(100vw - 32px));box-shadow:0 30px 80px rgba(0,0,0,.6)}
.dk-dlg::backdrop{background:rgba(4,8,22,.7);backdrop-filter:blur(4px)}
.dlg-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dlg-h h3{font-size:1.6rem;font-weight:800}
.dk-dlg .icon-btn{border-color:rgba(255,255,255,.2);color:#fff}
.dk-dlg p{margin:6px 0 18px;color:#b4bfe0}
.dlg-l{display:grid;gap:8px}
.dlg-l button{display:flex;align-items:center;gap:14px;width:100%;height:54px;padding:0 16px;border:1px solid rgba(255,255,255,.12);border-radius:var(--r-ctl);background:rgba(255,255,255,.05);color:#fff;font-weight:600;text-align:left;transition:background-color .2s,border-color .2s,transform .2s var(--ease)}
.dlg-l button .ph:first-child{color:var(--accent);font-size:1.3rem}
.dlg-l button .ph:last-child{margin-left:auto;opacity:.6}
.dlg-l button:hover{background:rgba(255,255,255,.12);border-color:var(--accent);transform:translateX(3px)}
@media (max-width:1180px){.dk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1060px){.dk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.dk-grid{grid-template-columns:minmax(0,1fr);max-width:620px;margin:0 auto}.val-row{grid-template-columns:minmax(100px,130px) minmax(0,1fr) 96px}.val-row .vr{display:none}}
@media (max-width:560px){.pn-h a{display:none}.stage{padding:72px 0}.dk{padding:22px}.pr-n{font-size:2.8rem}.dk-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:100%}.dk-tabs button{padding:12px 10px}.dk-tools{width:100%;display:grid;grid-template-columns:1fr;gap:10px}.dk-find,.dk-bill,.dk-os{width:100%;justify-content:center}.cmp-t th,.cmp-t td{padding:12px 14px}}
@media (prefers-reduced-motion:reduce){.dk{opacity:1;transform:none}.cmp-wrap,.val{opacity:1;transform:none}.vb i{transform:scaleX(var(--p))}}

/* ======================= deck v2 refinements ======================= */
.dk-billrow{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:-6px 0 30px}
.bill-pill{position:relative;display:inline-flex;padding:6px;border-radius:var(--r-pill);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.bp-bg{position:absolute;top:6px;bottom:6px;left:0;width:0;border-radius:var(--r-pill);background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.4);transition:transform .5s var(--ease),width .5s var(--ease)}
.bill-pill button{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 24px;border:0;border-radius:var(--r-pill);background:transparent;color:#b4bfe0;font-weight:700;font-size:1.02rem;white-space:nowrap;transition:color .3s}
.bill-pill button:hover{color:#fff}
.bill-pill button[aria-checked="true"]{color:#0a1330}
.sv{font-style:normal;font-size:.76rem;font-weight:800;padding:4px 10px;border-radius:var(--r-pill);background:rgba(255,255,255,.12);color:#c9d6ff;transition:background-color .3s,color .3s}
.bill-pill button[aria-checked="true"] .sv{background:var(--accent);color:var(--accent-ink)}
.bill-note{color:#8f9bc0;font-size:.9rem;max-width:44ch}
.pr-old{color:#ff7a99;font-family:var(--f-display);font-weight:800;font-size:1.7rem;letter-spacing:-.03em;text-decoration:line-through;text-decoration-thickness:2.5px;text-decoration-color:#ff7a99}
.pr-bill{margin-top:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:#aab5d8;font-size:.92rem}
.save-pill{background:rgba(126,224,168,.14);color:#9ff0c0;border:1px solid rgba(126,224,168,.32);font-weight:800;font-size:.76rem;padding:3px 10px;border-radius:var(--r-pill)}
.ch{background:rgba(255,255,255,.1);color:#f4f6ff;border:1px solid rgba(255,255,255,.15);font-weight:600;font-size:.8rem;padding:3px 10px;border-radius:var(--r-ctl);flex:none;white-space:nowrap}
.ch.ok{background:rgba(126,224,168,.13);border-color:rgba(126,224,168,.3);color:#9ff0c0}
.rw{padding:13px 0}
.rw .lb{flex:1;min-width:0}
.pn-h{text-transform:none;font-size:1.02rem;letter-spacing:-.01em;white-space:normal}
.pn-h span .ph,.al-big .ph,.rw.more .ph{color:#9db8ff}
.pn.hot{background:linear-gradient(180deg,rgba(111,149,255,.2),rgba(111,149,255,.05));border:1px solid rgba(143,176,255,.36)}
.t-basic .pn.hot{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.rw .mb i{background:linear-gradient(90deg,#6f95ff,#bdd0ff)}
.rng{background:linear-gradient(90deg,#8fb0ff var(--pct,0%),rgba(255,255,255,.2) var(--pct,0%))}
.cmp-old{color:#ff7a99;text-decoration:line-through;margin-right:8px;font-weight:500;font-size:.9rem}
.dk-tools{gap:12px}
@media (max-width:560px){
  .bill-pill{display:flex;width:100%}
  .bill-pill button{flex:1;flex-direction:column;gap:3px;height:auto;padding:9px 6px;font-size:.88rem}
  .sv{font-size:.68rem;padding:2px 7px}
  .bill-note{display:none}
}

/* order: billing cycle cards, due today */
.cyc-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cyc{display:grid;gap:8px;text-align:left;padding:16px 18px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-win);transition:border-color .2s,background-color .2s,transform .25s var(--ease)}
.cyc:hover{border-color:var(--field-soft);transform:translateY(-2px)}
.cyc[aria-pressed="true"]{border-color:var(--field);background:color-mix(in srgb,var(--field) 8%,var(--surface));box-shadow:0 0 0 1px var(--field) inset}
.cyc-h{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.cyc-h b{font-size:1rem}
.cyc-sv{font-style:normal;font-size:.72rem;font-weight:800;padding:3px 9px;border-radius:var(--r-pill);background:var(--ok-bg);color:var(--ok)}
.cyc-p{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.cyc-p s{color:var(--bad);text-decoration:line-through;text-decoration-thickness:2px;font-size:.95rem}
.cyc-p strong{font-family:var(--f-display);font-size:1.7rem;font-weight:800;letter-spacing:-.03em}
.cyc-p small{color:var(--muted)}
.cyc-s{color:var(--muted);font-size:.84rem}
.sum-old{color:var(--bad);text-decoration:line-through;text-decoration-thickness:2px;font-size:1.1rem;font-weight:600;margin-right:8px;font-family:var(--f-display)}
.sum-due{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:baseline;padding:12px 14px;margin:6px 0 4px;border-radius:var(--r-ctl);background:var(--surface-2)}
.sum-due b{font-family:var(--f-display);font-size:1.25rem}
.sum-due small{grid-column:1/-1;color:var(--muted);font-size:.82rem}
@media (max-width:760px){.cyc-cards{grid-template-columns:1fr}}

/* ======================= site-wide menu, footer and content pages ======================= */
.dd-menu.mega{display:none;grid-template-columns:repeat(3,minmax(190px,1fr));gap:4px 24px;min-width:680px;padding:20px;left:-40px}
.dd.open .dd-menu.mega{display:grid}
.mega-col h3{font-family:var(--f-ui);letter-spacing:0;font-size:.78rem;font-weight:700;color:var(--muted);padding:0 12px 8px;text-transform:uppercase}
.nav-links .dd-menu.mega a{padding:8px 12px;gap:12px;font-size:.95rem}
.nav-links .dd-menu.mega a img{width:22px;height:16px;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px rgba(10,19,48,.16);flex:none}
.nav-links .dd-menu .mega-all{grid-column:1/-1;margin-top:10px;padding:12px;border-top:1px solid var(--line);border-radius:0 0 var(--r-ctl) var(--r-ctl);color:var(--field);font-weight:700;justify-content:space-between}
.nav-end .acct{display:none}
@media (max-width:1180px){.nav-end .clientbtn{display:none}.nav-end .acct{display:grid}}
@media (max-width:1060px){.nav-links a,.dd-btn{padding:8px 9px;font-size:.92rem}.nav .wrap{gap:14px}}
@media (max-width:1000px){.dd-menu.mega{grid-template-columns:1fr;min-width:0;padding:0 0 0 12px;left:0}.mega-col{margin-bottom:8px}.nav-end .acct{display:none}}
.foot{grid-template-columns:minmax(0,1.3fr) repeat(5,minmax(0,1fr));gap:28px}
@media (max-width:1100px){.foot{grid-template-columns:repeat(3,minmax(0,1fr))}.foot>div:first-child{grid-column:1/-1}}
@media (max-width:560px){.foot{grid-template-columns:1fr 1fr}}

.chip-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.chip-links a{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);font-weight:600;font-size:.94rem;text-decoration:none;transition:border-color .2s,transform .25s var(--ease),background-color .2s}
.chip-links a:hover{border-color:var(--field);transform:translateY(-2px);background:var(--surface-2)}
.chip-links img{width:22px;height:16px;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px rgba(10,19,48,.16)}
.chip-links .ph{color:var(--field);font-size:1.15rem}

/* country pages */
.cty-head{display:flex;gap:28px;align-items:center}
.cty-flag img{width:84px;height:63px;border-radius:10px;object-fit:cover;box-shadow:0 0 0 1px rgba(10,19,48,.14),var(--shadow-soft)}
.stat-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:var(--r-win);background:var(--surface);overflow:hidden;margin-top:8px}
.stat{padding:24px 26px;border-left:1px solid var(--line)}
.stat:first-child{border-left:0}
.stat b{display:block;font-family:var(--f-display);font-size:2.2rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.stat span{display:block;margin-top:8px;color:var(--muted);font-size:.9rem}
.city-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:20px}
.city{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;align-items:center;padding:20px;border:1px solid var(--line);border-radius:var(--r-win);background:var(--surface);text-decoration:none;transition:border-color .2s,transform .3s var(--ease),box-shadow .3s}
.city:hover{border-color:var(--field);transform:translateY(-3px);box-shadow:var(--shadow-soft)}
.city img{width:44px;height:33px;border-radius:6px;object-fit:cover;box-shadow:0 0 0 1px rgba(10,19,48,.14)}
.city-t b{display:block;font-family:var(--f-display);font-size:1.3rem;letter-spacing:-.02em}
.city-t small{color:var(--muted)}
.city-go{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:12px;border-top:1px dashed var(--line);color:var(--field);font-weight:700;font-size:.92rem}
.city-go .ph{transition:transform .25s var(--ease)}.city:hover .city-go .ph{transform:translateX(4px)}
.reasons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:20px}
.reason h3{font-family:var(--f-ui);letter-spacing:0;font-size:1.1rem;font-weight:700;margin-bottom:8px;padding-top:14px;border-top:2px solid var(--ink)}
.reason p{color:var(--muted)}
@media (max-width:860px){.stat-strip{grid-template-columns:1fr 1fr}.stat:nth-child(3){border-left:0}.stat:nth-child(n+3){border-top:1px solid var(--line)}.reasons{grid-template-columns:1fr;gap:22px}.cty-head{flex-direction:column;align-items:flex-start;gap:16px}}

/* use-case pages */
.uc-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,.9fr);gap:48px;align-items:start}
.uc-side{position:sticky;top:calc(var(--nav-h) + 20px)}
.uc-spec{display:flex;align-items:baseline;gap:12px;font-family:var(--f-display);font-size:2rem;font-weight:800;letter-spacing:-.03em}
.uc-spec span{font-size:1.1rem;color:var(--muted);font-weight:600;font-family:var(--f-ui);letter-spacing:0}
.uc-sub{color:var(--muted);margin:6px 0 18px}
.uc-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.uc-price s{color:var(--bad);text-decoration:line-through;text-decoration-thickness:2px;font-size:1.2rem;font-family:var(--f-display);font-weight:800}
.uc-price b{font-family:var(--f-display);font-size:2.6rem;font-weight:800;letter-spacing:-.04em;line-height:1}
.uc-price span{color:var(--muted)}
.tips{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px;margin-top:20px}
.tip h3{font-family:var(--f-ui);letter-spacing:0;font-size:1.05rem;font-weight:700;margin-bottom:8px;padding-top:14px;border-top:2px solid var(--ink)}
.tip p{color:var(--muted);font-size:.96rem}
.verdict-ok{margin-top:36px;padding:20px 24px;border-radius:var(--r-win);background:var(--ok-bg);color:var(--ink);border:1px solid var(--line)}
.verdict-ok a{color:var(--field);font-weight:700}
@media (max-width:960px){.uc-grid{grid-template-columns:1fr}.uc-side{position:static;order:-1}}

/* blog */
.posts{display:grid;gap:0;max-width:820px}
.post{display:block;padding:28px 0;border-top:1px solid var(--line);text-decoration:none;transition:padding .3s var(--ease)}
.post:last-child{border-bottom:1px solid var(--line)}
.post:hover{padding-left:12px}
.post-m{display:flex;gap:16px;color:var(--muted);font-size:.86rem}
.post h2{font-size:1.7rem;font-weight:800;margin:8px 0}
.post p{color:var(--muted);max-width:60ch}
.post-go{display:inline-flex;gap:8px;align-items:center;margin-top:12px;color:var(--field);font-weight:700}
.article{max-width:760px;margin:0 auto}
.article header{padding:28px 0 8px}
.article h1{font-size:clamp(2rem,4vw,3.2rem);font-weight:800;margin:10px 0}
.lede2{color:var(--muted);font-size:1.2rem;max-width:54ch}
.article .prose{margin-top:28px}
.article .prose h2{font-size:1.5rem;margin:36px 0 8px}
.article .prose p{font-size:1.05rem;color:var(--ink);opacity:.86;line-height:1.7}
.art-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding:22px 26px;border-radius:var(--r-win);background:var(--surface-2)}

/* company */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:12px}
.step h2{font-size:1.5rem;font-weight:800;margin:14px 0 6px}
.step p{color:var(--muted)}
.step-i{width:56px;height:56px;border-radius:var(--r-win);display:grid;place-items:center;background:var(--field);color:#fff;font-size:1.6rem}
.about{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 56px;max-width:960px}
.about h2{font-size:1.4rem;font-weight:800;padding-top:14px;border-top:2px solid var(--ink);margin-bottom:8px}
.about p{color:var(--muted)}
.empty-state{max-width:640px;margin:8px auto 0;text-align:center;padding:48px 28px;border:1px dashed var(--line);border-radius:var(--r-win);background:var(--surface)}
.empty-state>.ph{font-size:2.4rem;color:var(--field)}
.empty-state h2{font-size:1.7rem;font-weight:800;margin:10px 0}
.empty-state p{color:var(--muted);max-width:50ch;margin:0 auto}
.legal-grid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:48px;align-items:start}
.toc{position:sticky;top:calc(var(--nav-h) + 20px);display:grid;gap:2px}
.toc a{padding:9px 12px;border-radius:var(--r-ctl);text-decoration:none;color:var(--muted);font-size:.92rem;font-weight:500;transition:background-color .15s,color .15s}
.toc a:hover{background:var(--surface-2);color:var(--ink)}
.legal-grid .prose h2{font-size:1.4rem;margin:32px 0 8px;scroll-margin-top:90px}
.legal-grid .prose h2:first-child{margin-top:0}
.legal-grid .prose p{color:var(--ink);opacity:.86}
.sitemap{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:32px 40px}
.link-list li{list-style:none}
@media (max-width:860px){.steps,.about{grid-template-columns:1fr}.legal-grid{grid-template-columns:1fr}.toc{position:static;grid-auto-flow:column;overflow-x:auto}.toc a{white-space:nowrap}}

.lede2{line-height:1.5}
.post-m,.crumbs{line-height:1.4}
.article .prose p,.legal-grid .prose p{line-height:1.7}

.nav-links>a,.dd-btn{white-space:nowrap}
@media (min-width:1001px) and (max-width:1180px){.nav-links{gap:0;margin-left:0}.nav-links a,.dd-btn{padding:8px 8px;font-size:.9rem}.nav .wrap{gap:12px}}

@media (max-width:1000px){.nav.open .nav-links{max-height:calc(100dvh - var(--nav-h) - 12px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}}


/* ======================= navigation v2: mega panels, hover bridge ======================= */
.nav .wrap{position:relative}
.dd{position:relative}
.dd.dd-wide{position:static}
.dd-btn{cursor:pointer}
.dd-menu,.mega-panel{display:none}
.dd.open>.dd-menu,.dd.open>.mega-panel{display:block;animation:mpIn .22s var(--ease)}
@keyframes mpIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* the invisible bridge keeps the pointer inside the menu while it crosses the gap */
.dd-menu{top:calc(100% + 10px);min-width:290px;padding:8px;border-radius:var(--r-win)}
.dd-menu::before{content:"";position:absolute;left:-12px;right:-12px;top:-14px;height:16px}
.mega-panel{position:absolute;top:100%;padding-top:10px;z-index:70}
.mp-loc{left:0;right:0}
.dd-rel .mega-panel{left:-120px;width:min(820px,calc(100vw - 48px))}
.mp-card{display:grid;grid-template-columns:300px minmax(0,1fr);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-win);box-shadow:var(--shadow-win);overflow:hidden}
.mp-uc .mp-card{grid-template-columns:minmax(0,1fr) 260px}
.mp-side{padding:28px;display:flex;flex-direction:column;gap:14px;background:linear-gradient(180deg,var(--field-deep),var(--field));color:#fff}
.mp-side h3{font-size:1.55rem;font-weight:800;line-height:1.08}
.mp-side p{color:var(--on-field-muted);font-size:.95rem;line-height:1.5}
.mp-side .btn{align-self:flex-start;margin-top:4px}
.mp-side.alt{background:var(--surface-2);color:var(--ink)}
.mp-side.alt p{color:var(--muted)}
.mp-pop{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding-top:16px;border-top:1px solid rgba(255,255,255,.22)}
.mp-pop span{width:100%;font-size:.84rem;color:var(--on-field-muted);font-weight:600}
.nav-links .mp-pop a{padding:5px 11px;border-radius:var(--r-pill);background:rgba(255,255,255,.14);color:#fff;font-size:.84rem;font-weight:600}
.nav-links .mp-pop a:hover{background:rgba(255,255,255,.26)}
.mp-body{padding:20px 24px 24px;min-width:0}
.mp-search{position:relative}
.mp-search>.ph{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted)}
.mp-search input{padding:0 64px 0 42px;height:46px;background:var(--surface-2);border-color:transparent}
.mp-search input:focus{background:var(--surface)}
.mp-search kbd{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-family:var(--f-mono);font-size:.7rem;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:2px 7px;background:var(--surface)}
.mp-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 22px;margin-top:16px;align-items:start}
.mp-col h3{display:flex;align-items:center;gap:8px;font-family:var(--f-ui);letter-spacing:0;font-size:.86rem;font-weight:700;color:var(--muted);padding:2px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.mp-col h3 em{font-style:normal;font-family:var(--f-mono);font-size:.72rem;font-weight:500;background:var(--surface-2);border-radius:var(--r-pill);padding:1px 8px;color:var(--muted)}
.nav-links .mp-c{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:var(--r-ctl);color:var(--ink);font-weight:500;transition:background-color .15s}
.nav-links .mp-c:hover,.nav-links .mp-c:focus-visible{background:var(--surface-2)}
.mp-c img{width:26px;height:19px;border-radius:3px;object-fit:cover;flex:none;box-shadow:0 0 0 1px rgba(10,19,48,.16)}
.mp-c b{display:block;font-size:.95rem;font-weight:600;line-height:1.2}
.mp-c small{display:block;color:var(--muted);font-size:.78rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
.mp-none{padding:18px 4px;color:var(--muted)}
.mu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.nav-links .mu,.nav-links .dd-menu a{display:flex;align-items:center;gap:14px;padding:11px 12px;border-radius:var(--r-ctl);color:var(--ink);font-weight:500;transition:background-color .15s}
.nav-links .mu:hover,.nav-links .dd-menu a:hover,.nav-links .mu:focus-visible,.nav-links .dd-menu a:focus-visible{background:var(--surface-2)}
.mu b,.dd-menu a b{display:block;font-size:.95rem;font-weight:600;line-height:1.2}
.mu small,.dd-menu a small{display:block;color:var(--muted);font-size:.8rem;font-weight:400;line-height:1.35;margin-top:2px}
.mu-i{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--field) 10%,var(--surface));color:var(--field);font-size:1.3rem;transition:background-color .2s,color .2s,transform .3s var(--ease)}
.nav-links .mu:hover .mu-i,.nav-links .dd-menu a:hover .mu-i{background:var(--field);color:#fff;transform:scale(1.06)}

.dd-menu a .mu-i .ph{font-size:1.3rem;color:inherit}
@media (max-width:1180px){.mp-card{grid-template-columns:250px minmax(0,1fr)}.mp-side{padding:22px}.mp-side h3{font-size:1.3rem}.mp-c small{max-width:150px}}
@media (max-width:1000px){
  .dd.dd-wide,.dd.dd-rel{position:static}
  .mega-panel{position:static;padding:0 0 0 8px;width:auto;left:auto;right:auto}
  .dd-rel .mega-panel{width:auto;left:auto}
  .mp-card,.mp-uc .mp-card{grid-template-columns:1fr;border:0;box-shadow:none;background:transparent;border-radius:0}
  .mp-side,.mp-side.alt{display:none}
  .mp-body{padding:4px 0 8px}
  .mp-cols,.mu-grid{grid-template-columns:1fr}
  .mp-search kbd{display:none}
  .dd-menu{top:auto;min-width:0}
  .dd-menu::before{display:none}
  .mp-c small{max-width:none}
}

/* hover bridge from the button down to a panel that is anchored to the nav bar edge */
.dd-btn{position:relative}
.dd.open>.dd-btn::after{content:"";position:absolute;left:-8px;right:-8px;top:100%;height:26px}
@media (max-width:1000px){.dd.open>.dd-btn::after{display:none}}

.mp-body{max-height:calc(100dvh - 150px);overflow-y:auto}
.nav-links .mp-c{padding:7px 10px}
@media (max-width:1000px){.mp-body{max-height:none;overflow:visible}}

/* ======================= market analysis page ======================= */
.mk-provs{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:20px}
.mk-prov{padding:20px;border:1px solid var(--line);border-radius:var(--r-win);background:var(--surface)}
.mk-prov.off{background:var(--surface-2);border-style:dashed}
.mk-prov h3{font-size:1.3rem;font-weight:800}
.mk-state{color:var(--muted);font-size:.88rem;margin:2px 0 12px}
.mk-prov dl{display:grid;gap:0}
.mk-prov dl>div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:.92rem}
.mk-prov dt{color:var(--muted)}.mk-prov dd{font-weight:600;text-align:right}
.mk-key{display:flex;gap:20px;flex-wrap:wrap;font-size:.88rem;color:var(--muted);margin:14px 0 6px}
.mk-key i,.mk-legend i{display:inline-block;vertical-align:-2px;margin-right:7px}
.sw-b{width:22px;height:8px;border-radius:99px;background:#9db8ff}.sw-m{width:3px;height:14px;background:var(--ink);vertical-align:-3px!important}.sw-t{width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--ink)}
.mk{display:grid;gap:0;margin-top:12px;border-top:1px solid var(--line)}
.mk-row{display:grid;grid-template-columns:200px minmax(0,1.5fr) 190px minmax(0,1.1fr);gap:20px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}
.mk-name b{display:block;font-family:var(--f-display);font-size:1.3rem;font-weight:800;letter-spacing:-.02em}
.mk-name small{color:var(--muted);font-size:.84rem}
.mk-range{position:relative;height:12px;border-radius:99px;background:var(--surface-2)}
.mk-band{position:absolute;top:0;bottom:0;border-radius:99px;background:#9db8ff}
.mk-med{position:absolute;top:-5px;bottom:-5px;width:3px;margin-left:-1px;background:var(--ink);border-radius:2px}
.mk-tgt{position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--ink)}
.mk-legend{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px;font-size:.82rem;color:var(--muted)}
.mk-note{font-style:normal;font-size:.78rem;color:var(--muted)}
.mk-today b{display:block;font-family:var(--f-display);font-size:1.5rem;letter-spacing:-.02em}
.mk-today small{color:var(--muted);font-size:.8rem;line-height:1.35;display:block}
.mk-bad{color:var(--bad)}
.mk-cost{display:grid;gap:8px}
.mk-cost>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;font-size:.8rem;color:var(--muted)}
.mk-cost span{grid-column:1/-1}
.mk-cost i{display:block;height:8px;border-radius:99px;background:var(--ok);min-width:6px}
.mk-cost .bad i{background:var(--bad)}
.mk-cost b{font-family:var(--f-display);font-size:1rem;color:var(--ink)}
.mk-feat th.us,.mk-feat td.us{background:color-mix(in srgb,var(--field) 7%,var(--surface))}
.mk-feat tbody th{font-weight:600;white-space:nowrap}
.mk-feat td{font-size:.88rem;min-width:110px}
@media (max-width:1100px){.mk-row{grid-template-columns:1fr 1fr}.mk-name,.mk-price{grid-column:1/-1}.mk-today{grid-column:1}.mk-cost{grid-column:2}}
@media (max-width:560px){.mk-row{grid-template-columns:1fr}.mk-today,.mk-cost{grid-column:1}}

.nav-links .mu,.nav-links .dd-menu a{white-space:normal}
.mp-body{overflow-x:hidden}

/* order: plan type, compact single row */
.type-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.type-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-ctl);min-width:0}
.type-card .tc-ico{width:42px;height:42px;border-radius:10px;font-size:1.35rem}
.type-card .tc-txt{min-width:0}
.type-card .tc-txt b{display:block;font-family:var(--f-ui);font-size:.96rem;font-weight:700;letter-spacing:0;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.type-card .tc-txt small{display:block;margin-top:2px;color:var(--muted);font-size:.8rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.type-card .tc-txt strong{color:var(--ink);font-weight:700}
.type-card .tc-check{top:8px;right:8px;font-size:1.1rem}
.type-card:hover{transform:translateY(-2px)}
@media (max-width:900px){.type-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.type-card{padding:10px}.type-card .tc-ico{width:36px;height:36px;font-size:1.15rem}.type-card .tc-txt small{white-space:normal}}

.type-card{gap:10px;padding:10px 12px}
.type-card .tc-ico{width:36px;height:36px;font-size:1.2rem;border-radius:9px}
.type-card .tc-txt b{font-size:.92rem}
.type-card .tc-txt small{font-size:.78rem}
.type-card .tc-check{top:6px;right:6px;font-size:1rem}
.type-card{padding:10px}
.type-card .tc-txt b{font-size:.9rem}
@media (max-width:1240px){.type-card .tc-txt b,.type-card .tc-txt small{white-space:normal;overflow:visible;text-overflow:clip}}


/* order: plan table fits its container, no sideways scrolling (Vultr style) */
.p-scroll{max-height:452px;overflow-y:auto;overflow-x:hidden}
.p-table{table-layout:fixed;min-width:0;width:100%;font-size:.9rem}
.p-table thead button{padding:12px 10px;font-size:.8rem}
.p-table td{padding:11px 10px;white-space:normal;overflow-wrap:anywhere;vertical-align:middle}
.p-table td.nm{font-size:.82rem;font-weight:500}
.p-table td.pr{white-space:normal;line-height:1.25}
.p-table td.pr .hr{display:block;font-size:.76rem;font-weight:400;color:var(--muted);margin-top:2px}
.p-table .mini{display:none}
.p-filter{display:flex;align-items:center}
.p-filter input{flex:1;min-width:0}
.p-sortsel{display:none;width:auto;max-width:48%;height:40px;margin-right:10px;font-size:.84rem}
.sub-tabs{gap:6px}
.sub-tabs button{height:34px;padding:0 13px;font-size:.84rem}
.sub-about{font-size:.86rem}
.ptools{margin-bottom:10px}
@media (max-width:680px){
  .p-sortsel{display:block}
  .p-table thead{display:none}
  .p-table,.p-table tbody{display:block}
  .p-table tbody tr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px 10px;padding:12px 14px}
  .p-table td{display:block;padding:0;font-size:.86rem}
  .p-table td.nm{grid-column:1/-1;font-size:.9rem;font-weight:700;margin-bottom:4px}
  .p-table td:nth-child(n+2):nth-child(-n+5)::before{content:attr(data-label);display:block;font-size:.68rem;font-weight:500;color:var(--muted)}
  .p-table td.pr{grid-column:1/-1;text-align:left;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
  .p-table td.pr .hr{margin:0}
}

/* ======================= animated stage, plans hero, centered billing ======================= */
.stage{background:linear-gradient(180deg,#0a1a52 0%,#07123a 22%,#050816 58%,#050816 100%)}
.stage::before,.stage::after{display:none}
/* the backdrop is a stack of ghost windows, the same window motif used across the site */
.aurora{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.aurora i{position:absolute;border:1px solid rgba(255,255,255,.13);border-radius:var(--r-win);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012));will-change:transform}
.aurora i::before{content:"";position:absolute;left:0;right:0;top:0;height:34px;border-bottom:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);border-radius:var(--r-win) var(--r-win) 0 0}
.aurora i::after{content:"";position:absolute;left:14px;top:14px;width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.28);box-shadow:12px 0 rgba(255,255,255,.28),24px 0 rgba(255,255,255,.28)}
.aurora i:nth-child(1){width:min(46vw,620px);height:min(30vw,400px);left:-6%;top:4%;transform:rotate(-6deg);animation:winA 34s ease-in-out infinite alternate}
.aurora i:nth-child(2){width:min(54vw,740px);height:min(34vw,460px);right:-9%;top:18%;transform:rotate(5deg);animation:winB 41s ease-in-out infinite alternate;opacity:.8}
.aurora i:nth-child(3){width:min(40vw,520px);height:min(26vw,340px);left:30%;bottom:-6%;transform:rotate(-3deg);animation:winC 37s ease-in-out infinite alternate;opacity:.6}
@keyframes winA{0%{transform:translate(0,0) rotate(-6deg)}100%{transform:translate(5vw,7vh) rotate(-3deg)}}
@keyframes winB{0%{transform:translate(0,0) rotate(5deg)}100%{transform:translate(-5vw,9vh) rotate(2deg)}}
@keyframes winC{0%{transform:translate(0,0) rotate(-3deg)}100%{transform:translate(-7vw,-6vh) rotate(-6deg)}}
.stage-hero{padding-top:72px}

/* hero */
.ph-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center;padding:12px 0 48px}
.ph-copy h1{font-size:clamp(2.8rem,5.6vw,5rem);font-weight:800;line-height:.96;letter-spacing:-.045em;max-width:9ch}
.ph-copy p{color:#b4bfe0;font-size:1.18rem;max-width:44ch;margin-top:22px;line-height:1.55}
.ph-stats{display:flex;gap:40px;flex-wrap:wrap;margin-top:36px;padding-top:28px;border-top:1px solid rgba(255,255,255,.14)}
.ph-stat b{display:block;font-family:var(--f-display);font-size:2.7rem;font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:proportional-nums}
.ph-stat span{display:block;margin-top:8px;color:#9aa6cb;font-size:.9rem}
.ph-vis{position:relative;height:360px}
.fl-w{position:absolute;transition:transform .35s var(--ease);transform:translate(calc(var(--px,0) * var(--k,10) * 1px),calc(var(--py,0) * var(--k,10) * .8px))}
.fl{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:var(--r-win);padding:18px 20px;box-shadow:0 24px 48px -16px rgba(0,0,0,.55);animation:bob 7s ease-in-out infinite}
.fl1{animation-duration:6.5s}.fl2{animation-duration:8s;animation-delay:-2s}.fl3{animation-duration:9s;animation-delay:-4s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.fl-t{display:block;font-size:.84rem;color:#b4bfe0}
.fl b{display:block;font-family:var(--f-display);font-size:1.5rem;font-weight:800;letter-spacing:-.02em;margin-top:2px}
.fl .flags{display:flex;align-items:center;margin-top:14px}
.fl .flags img{width:30px;height:22px;border-radius:4px;object-fit:cover;box-shadow:0 0 0 2px #14193a;margin-left:-8px}
.fl .flags img:first-child{margin-left:0}
.fl .flags em{font-style:normal;margin-left:10px;font-size:.84rem;color:#c9d6ff;font-weight:600}
.fl2{min-width:250px}
.fl2 .big{font-size:3.6rem;line-height:1;background:none;color:#fff}
.fl-bar{display:block;height:8px;border-radius:99px;background:rgba(255,255,255,.14);margin:14px 0 10px;overflow:hidden}
.fl-bar i{display:block;height:100%;width:100%;border-radius:inherit;background:linear-gradient(90deg,#7ee0a8,var(--accent));transform-origin:left;animation:flbar 3.6s var(--ease) infinite}
@keyframes flbar{0%{transform:scaleX(.08)}55%,100%{transform:scaleX(.84)}}
.fl-s{display:block;font-size:.82rem;color:#b4bfe0;max-width:26ch}
.fl3{display:flex;gap:14px;align-items:center;min-width:290px}
.fl3>.ph{font-size:2rem;color:#7ee0a8}
.fl3 b{font-size:1.05rem;margin:0}
.fl3 small{display:block;color:#b4bfe0;font-size:.82rem;margin-top:2px}

/* family strip */
.fam-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:72px}
.fam-tile{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;align-items:center;padding:20px;border-radius:var(--r-win);border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));backdrop-filter:blur(10px);text-decoration:none;color:#fff;transition:transform .35s var(--ease),border-color .25s,background-color .25s}
.fam-tile:hover{transform:translateY(-5px);border-color:rgba(143,176,255,.6);background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.05))}
.ft-ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:1.6rem;background:linear-gradient(135deg,#3b6cf0,#2a3fb8);box-shadow:0 10px 22px -8px rgba(59,108,240,.7);transition:transform .45s var(--ease)}
.fam-tile:hover .ft-ico{transform:rotate(-8deg) scale(1.08)}
.ft-b b{display:block;font-family:var(--f-display);font-size:1.3rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.ft-b small{display:block;margin-top:4px;color:#aab5d8;font-size:.84rem;line-height:1.35}
.ft-n{display:none}
.ft-p{grid-column:1/-1;border-top:1px dashed rgba(255,255,255,.18);padding-top:12px;margin-top:2px}
.ft-p em{font-style:normal;color:#9aa6cb;font-size:.84rem}
.ft-p strong{font-family:var(--f-display);font-size:1.7rem;letter-spacing:-.03em}
.ft-p small{display:block;color:#9aa6cb;font-size:.78rem;line-height:1.45;margin-top:2px}

/* centered billing selector with vivid discount badges */
.dk-billrow{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;margin:6px 0 34px}
.bill-pill{box-shadow:0 18px 40px -18px rgba(0,0,0,.7)}
.bill-pill button{padding:0 26px;height:54px;font-size:1.05rem}
.sv{position:relative;overflow:hidden;font-size:.78rem;font-weight:800;padding:5px 11px;color:#04210f;letter-spacing:.01em}
.sv-y{background:var(--accent);color:var(--accent-ink)}
.sv-h{background:#7ee0a8;color:#04210f}
.bill-pill button[aria-checked="true"] .sv{background:revert}
.bill-pill button[aria-checked="true"] .sv-y{background:var(--accent);color:var(--accent-ink)}
.bill-pill button[aria-checked="true"] .sv-h{background:#43c987;color:#031a0c}
.sv::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:svShine 4.5s ease-in-out infinite}
.sv-h::after{animation-delay:1.4s}
@keyframes svShine{0%,60%{left:-60%}100%{left:140%}}
.bill-note{color:#9aa6cb;font-size:.95rem;max-width:none}
.bill-note b{font-weight:800}.bill-note .y{color:var(--accent)}.bill-note .h{color:#7ee0a8}

@media (max-width:1060px){.ph-hero{grid-template-columns:1fr;gap:32px}.ph-vis{display:none}.fam-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.fam-strip{grid-template-columns:1fr}.ph-stats{gap:26px}.ph-stat b{font-size:2.2rem}.stage-hero{padding-top:56px}.bill-pill button{height:auto;padding:9px 6px}.sv{font-size:.68rem;padding:3px 8px}.bill-note{display:block;font-size:.84rem}}
@media (prefers-reduced-motion:reduce){.aurora i,.fl,.fl-bar i,.sv::after{animation:none}.fl-bar i{transform:scaleX(.84)}}

/* ======================= home hero v2: live network + data-centre skyline ======================= */
.hero2{background:linear-gradient(180deg,#0b2377 0%,#071447 48%,#050b2e 100%);isolation:isolate}
.hero2 .sky,.hero2 .hills{display:none}
.hero2::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(5,11,46,.7) 0%,rgba(5,11,46,.18) 52%,transparent 72%)}
#net{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero2 .wrap{z-index:3}
.hero2 .taskbar{z-index:4}
.dc{position:absolute;left:-2%;right:-2%;bottom:44px;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:7px;pointer-events:none;transform:translateX(calc(var(--mx,0) * -16px));transition:transform .5s var(--ease);-webkit-mask-image:linear-gradient(to top,#000 38%,transparent 100%);mask-image:linear-gradient(to top,#000 38%,transparent 100%)}
.rk{position:relative;flex:1 1 0;min-width:30px;max-width:var(--w);height:var(--h);border:1px solid rgba(157,184,255,.2);border-bottom:0;border-radius:6px 6px 0 0;background:repeating-linear-gradient(180deg,transparent 0 14px,rgba(157,184,255,.13) 14px 15px),linear-gradient(180deg,#112469,#0a1745)}
.rk::after{content:"";position:absolute;right:7px;top:10px;bottom:0;width:38%;background:repeating-linear-gradient(180deg,rgba(157,184,255,.22) 0 2px,transparent 2px 5px);opacity:.5}
.rk i{position:absolute;width:5px;height:5px;border-radius:50%;animation:led 2.4s steps(1) infinite}
.rk i.g{background:#7ee0a8}.rk i.a{background:#ffbf2f}
@keyframes led{0%,42%{opacity:1}46%,58%{opacity:.12}62%,100%{opacity:1}}
.hl-rdp{color:#fff;font-weight:800;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:5px}
.from-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.from{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:var(--r-pill);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);font-size:.92rem;color:#e6edff;backdrop-filter:blur(8px)}
.from b{font-weight:800;color:#fff}.from strong{font-family:var(--f-display);font-size:1.05rem;color:#fff}
.from.rdp{background:#2f5bff;border-color:#6f95ff;color:#fff;box-shadow:0 8px 20px -8px rgba(47,91,255,.9)}
.hero2 .cloud,.hero2 .hills{display:none}

/* server motion on every page: a mini rack in each page header, packets along the footer */
.page-head{position:relative}
.rack{position:absolute;right:0;top:50%;width:182px;display:grid;gap:7px;transform:translateY(-50%);animation:rackBob 9s ease-in-out infinite;pointer-events:none}
@keyframes rackBob{0%,100%{transform:translateY(-50%)}50%{transform:translateY(calc(-50% - 9px))}}
.rack b{display:flex;align-items:center;gap:6px;height:27px;padding:0 11px;border:1px solid var(--line);border-radius:8px;background:linear-gradient(180deg,var(--surface),var(--surface-2));box-shadow:var(--shadow-soft)}
.rack b i{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:led 2.6s steps(1) infinite}
.rack b i:nth-child(2){background:var(--accent);animation-duration:3.3s;animation-delay:-1s}
.rack b i:nth-child(3){background:var(--field-soft);animation-duration:1.9s;animation-delay:-.4s}
.rack b u{margin-left:auto;width:58px;height:8px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--line) 0 3px,transparent 3px 6px)}
.rack b:nth-child(2) i{animation-delay:-.7s}.rack b:nth-child(3) i{animation-delay:-1.6s}.rack b:nth-child(4) i{animation-delay:-2.1s}
@media (max-width:1000px){.rack{display:none}}
footer{position:relative}
.pktline{position:absolute;left:0;right:0;top:-1px;height:2px;overflow:hidden;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--field) 55%,transparent),transparent)}
.pktline i{position:absolute;top:0;width:44px;height:2px;border-radius:2px;background:var(--accent);animation:pkt 7s linear infinite}
.pktline i:nth-child(2){animation-duration:9s;animation-delay:-3s}.pktline i:nth-child(3){animation-duration:11s;animation-delay:-6s;background:var(--field-soft)}
@keyframes pkt{from{left:-60px}to{left:100%}}

/* RDP / VPS naming */
.dk-prod{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--r-ctl);font-size:.74rem;font-weight:800;letter-spacing:.02em}
.dk-prod.rdp{background:#2f5bff;color:#fff;box-shadow:0 6px 14px -6px rgba(47,91,255,.9)}
.dk-prod.vps{background:rgba(255,255,255,.14);color:#fff}
.hl{color:var(--accent)}
.tag{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:var(--r-ctl);font-size:.72rem;font-weight:800;background:rgba(255,255,255,.12);color:#dbe4ff}
.tag.rdp{background:#2f5bff;color:#fff}.tag.ghost{background:transparent;border:1px dashed rgba(255,255,255,.3);font-weight:600}
.ft-tags{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
@media (prefers-reduced-motion:reduce){.rk i,.rack,.rack b i,.pktline i{animation:none}}


/* hero locations ticker: flags and cities, revolving without end */
.hero2{--tb:56px}
.ticker{height:var(--tb);padding:0;gap:0;background:rgba(5,11,46,.72);border-top:1px solid rgba(157,184,255,.22);overflow:hidden}
.dc{bottom:var(--tb)}
.tk-label{flex:none;display:flex;align-items:center;gap:8px;height:100%;padding:0 20px;background:#2f5bff;color:#fff;font-size:.88rem;white-space:nowrap;position:relative;z-index:2}
.tk-label .ph{font-size:1.2rem}
.tk-label b{font-family:var(--f-display);font-size:1.15rem;font-weight:800}
.tk-track{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
.tk-run{display:flex;width:max-content;animation:tkRun 80s linear infinite}
.ticker:hover .tk-run{animation-play-state:paused}
.tk-grp{display:flex;gap:10px;padding:0 10px}
.tk{display:flex;align-items:center;gap:10px;height:36px;padding:0 15px 0 10px;border-radius:var(--r-pill);background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);color:#fff;text-decoration:none;font-size:.9rem;white-space:nowrap;transition:background-color .2s,border-color .2s,transform .25s var(--ease)}
.tk img{width:26px;height:19px;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.tk b{font-weight:600}
.tk span{color:#9db8ff;font-family:var(--f-mono);font-size:.74rem}
.tk:hover,.tk:focus-visible{background:rgba(255,255,255,.2);border-color:rgba(157,184,255,.7);transform:translateY(-2px)}
@keyframes tkRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:560px){.tk-label span{display:none}.tk-label{padding:0 14px}}
@media (prefers-reduced-motion:reduce){.tk-run{animation:none}.tk-track{overflow-x:auto;-webkit-mask-image:none;mask-image:none}.tk-grp[aria-hidden="true"]{display:none}}


/* ======================= home v3: one live network behind the whole page ======================= */
body.fx{background:#050a22}
body.fx #net{position:fixed;inset:0;width:100vw;height:100dvh;z-index:0;pointer-events:none}
body.fx main{position:relative;z-index:1;
  --bg:#070d1f;--surface:#0f1830;--surface-2:#15213f;--line:#243360;--ink:#eaf0ff;--muted:#a5b4d9;--field:#1239b8;--field-deep:#081a63;--field-soft:#2552d6;
  --ok:#47d19b;--ok-bg:#0e3426;--warn:#ffd27a;--warn-bg:#3a2a07;--bad:#ff8f87;--bad-bg:#3d1613;
  --shadow-win:0 1px 0 rgba(255,255,255,.05),0 24px 48px -14px rgba(0,0,0,.7),0 6px 14px -6px rgba(0,0,0,.5);--shadow-soft:0 1px 2px rgba(0,0,0,.4),0 10px 26px -12px rgba(0,0,0,.6);color:var(--ink)}
body.fx .sec,body.fx .sec-tight{background:transparent}
body.fx .field-sec{background:linear-gradient(180deg,rgba(28,79,224,.2),rgba(8,26,99,.3));border-top:1px solid rgba(157,184,255,.16)}
body.fx .stage{background:rgba(5,9,26,.5)}
body.fx .hero2{background:linear-gradient(180deg,rgba(11,35,119,.5) 0%,rgba(5,11,46,0) 100%)}
body.fx .hero2::before{background:linear-gradient(90deg,rgba(5,11,46,.55) 0%,rgba(5,11,46,.1) 50%,transparent 72%)}
body.fx .cta-band{background:linear-gradient(90deg,rgba(28,79,224,.5),rgba(8,26,99,.6))}
body.fx footer{position:relative;z-index:1}
.hero2 #net{display:none}

/* slim glass monoliths instead of the old crowded racks */
.dc{display:block;left:0;right:0;height:300px;bottom:var(--tb);-webkit-mask-image:linear-gradient(to top,#000 20%,transparent 100%);mask-image:linear-gradient(to top,#000 20%,transparent 100%);transform:none;gap:0}
.dc::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(157,184,255,.6) 30%,rgba(157,184,255,.6) 70%,transparent)}
.mn{position:absolute;bottom:0;left:var(--l);width:var(--w);height:var(--h);border:1px solid rgba(157,184,255,.3);border-bottom:0;border-radius:3px 3px 0 0;background:linear-gradient(180deg,rgba(157,184,255,.16),rgba(157,184,255,.03) 70%,transparent);transform:translateX(calc(var(--mx,0) * var(--d) * -16px));transition:transform .5s var(--ease)}
.mn::before{content:"";position:absolute;left:50%;top:16px;bottom:20px;width:2px;margin-left:-1px;border-radius:2px;background:linear-gradient(180deg,transparent 0%,#8fb0ff 50%,transparent 100%);background-size:100% 240%;animation:mnScan var(--t) linear var(--o) infinite}
.mn::after{content:"";position:absolute;left:50%;top:-3px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#7ee0a8;animation:led 3.2s steps(1) var(--o) infinite}
@keyframes mnScan{from{background-position:0 130%}to{background-position:0 -130%}}
@media (max-width:760px){.mn:nth-child(-n+4){display:none}}

/* entry offer */
.offer{margin-top:24px;max-width:480px;padding:14px;border-radius:var(--r-win);background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:1px solid rgba(157,184,255,.4);backdrop-filter:blur(10px)}
.offer-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:#fff}
.offer-top b{font-family:var(--f-display);font-size:1.15rem;letter-spacing:-.02em}
.offer-spec{margin-left:auto;font-family:var(--f-mono);font-size:.76rem;color:#cfe0ff}
.offer-cyc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.oc{display:grid;gap:2px;padding:10px 12px;border-radius:var(--r-ctl);border:1px solid rgba(255,255,255,.22);background:rgba(5,11,46,.5);color:#fff;text-decoration:none;transition:transform .2s var(--ease),border-color .2s,background-color .2s}
.oc small{font-size:.74rem;color:#cfe0ff;font-weight:600}
.oc strong{font-family:var(--f-display);font-size:1.55rem;letter-spacing:-.03em;line-height:1.1}
.oc span{font-size:.72rem;color:#b4c4ee}
.oc .save{color:#ffd27a;font-weight:700}
.oc.best{background:#2f5bff;border-color:#9db8ff;box-shadow:0 10px 24px -10px rgba(47,91,255,.95)}
.oc.best small{color:#fff}.oc.best .save{color:#ffe29a}
.oc:hover,.oc:focus-visible{transform:translateY(-2px);border-color:#9db8ff}
.hero2 .ctas .from{height:48px}

/* hero widget: billing and price */
.mini{font-style:normal;font-size:.72rem;font-weight:800;margin-left:6px;padding:2px 6px;border-radius:6px;background:#2f5bff;color:#fff;vertical-align:1px}
.price-line .amt s{font-family:var(--f-ui);font-size:1rem;font-weight:500;color:var(--muted);margin-right:8px;text-decoration-thickness:2px}
.save-pill{font-family:var(--f-ui);font-style:normal;font-size:.72rem;font-weight:800;letter-spacing:0;margin-left:10px;padding:3px 9px;border-radius:var(--r-pill);background:var(--ok-bg);color:var(--ok);vertical-align:middle}
.chip.dh{border-color:var(--field-soft)}
.seg button.dh{background:color-mix(in srgb,var(--surface) 55%,transparent);color:var(--ink)}
.btn-primary.dh{background:var(--accent-hover);transform:translateY(-1px)}

/* scene: the remote desktop sits behind, the configurator floats over its left side */
.scene{height:650px}
.scene .win.session{left:0;right:0;top:0;bottom:auto;width:100%;z-index:2}
.scene .win.main{left:0;top:150px;width:min(410px,66%);z-index:3}
.cursor{width:26px;height:26px;transition:transform .42s var(--ease),opacity .3s}
.pc{position:relative;height:360px;overflow:hidden;color:#fff;background:#050c26}
.pc-st{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:8px;padding-left:46%;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s .5s}
.pc[data-stage="off"] .pc-off,.pc[data-stage="boot"] .pc-boot,.pc[data-stage="lock"] .pc-lock,.pc[data-stage="login"] .pc-login,.pc[data-stage="desk"] .pc-desk{opacity:1;visibility:visible;transition:opacity .5s var(--ease)}
.pc[data-stage="lock"],.pc[data-stage="login"],.pc[data-stage="desk"]{background:linear-gradient(135deg,#0a2488 0%,#1c4fe0 42%,#4a86ff 66%,#0b1c63 100%)}
.pc-off{color:#8fa4d8;font-size:.88rem}.pc-off .ph{font-size:2rem}
.pc-boot{padding-left:0;place-content:stretch}
.pc-boot .log{position:absolute;inset:0;height:auto;padding:18px 18px 18px 46%;background:#050c26}
.pc-lock time{font-family:var(--f-display);font-weight:700;font-size:3.6rem;letter-spacing:-.04em;line-height:1}
.pc-lock span{font-size:.95rem;color:#dbe6ff}
.pc-lock small{margin-top:14px;font-size:.78rem;color:#cfe0ff;animation:blink 1.6s steps(1) infinite}
.pc-login{background:rgba(5,12,40,.5);backdrop-filter:blur(8px)}
.pc-login .av{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.2);font-size:2rem}
.pc-login b{font-size:1.05rem}
.pc-login .pw{display:flex;align-items:center;gap:6px;width:230px;height:38px;padding:0 4px 0 12px;border-radius:var(--r-ctl);background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35)}
.pc-login .pw>i{width:7px;height:7px;border-radius:50%;background:#fff;opacity:0;transform:scale(.4);transition:opacity .12s,transform .12s}
.pc-login .pw>i.on{opacity:1;transform:none}
.pc-login .go{margin-left:auto;width:30px;height:30px;border-radius:6px;display:grid;place-items:center;background:rgba(255,255,255,.22);text-decoration:none;transition:background-color .2s}
.pc-login .go.rdy{background:#fff;color:#0f2f9e}
.pc-login small{font-size:.78rem;color:#dbe6ff;min-height:1.2em}
.pc-login small.busy::before{content:"";display:inline-block;width:11px;height:11px;margin-right:8px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;vertical-align:-1px;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pc-desk{padding:0;display:block}
.d-ico{position:absolute;right:16px;width:66px;display:grid;justify-items:center;gap:3px;font-size:.66rem;color:#fff;opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.d-ico .ph{font-size:1.9rem}
.d-ico:nth-child(1){top:14px}.d-ico:nth-child(2){top:84px}.d-ico:nth-child(3){top:154px}
.pc[data-stage="desk"] .d-ico{opacity:1;transform:none}
.pc[data-stage="desk"] .d-ico:nth-child(2){transition-delay:.12s}.pc[data-stage="desk"] .d-ico:nth-child(3){transition-delay:.24s}
.d-win{position:absolute;right:98px;top:26px;width:min(262px,calc(54% - 20px));border-radius:8px;overflow:hidden;background:#f4f7ff;color:#0a1330;box-shadow:0 18px 36px -12px rgba(0,0,0,.6);opacity:0;transform:scale(.92) translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.pc[data-stage="desk"] .d-win{opacity:1;transform:none;transition-delay:.6s}
.d-bar{display:flex;align-items:center;gap:8px;height:30px;padding:0 10px;background:#e3eafb;font-size:.74rem;font-weight:700}
.d-bar span{flex:1}.d-bar u{text-decoration:none;color:#465273;font-size:.7rem}
.d-win dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;padding:12px 14px;font-size:.74rem}
.d-win dt{color:#465273}.d-win dd{font-weight:700;text-align:right;font-family:var(--f-mono);font-size:.72rem}
.d-task{position:absolute;left:0;right:0;bottom:0;height:36px;display:flex;align-items:center;gap:4px;padding:0 12px 0 calc(46% + 6px);background:rgba(6,14,44,.8);backdrop-filter:blur(10px);transform:translateY(100%);transition:transform .5s var(--ease) .1s}
.pc[data-stage="desk"] .d-task{transform:none}
.d-task>.ph{width:30px;height:28px;border-radius:6px;display:grid;place-items:center;font-size:1.05rem}
.d-task>.ph.st{color:#6fa0ff}.d-task>.ph.on{background:rgba(255,255,255,.16)}
.d-task .tray{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:.7rem}
@media (max-width:1060px){
  .scene{height:auto}
  .scene .win.session,.scene .win.main{position:relative;left:auto;top:auto;width:100%}
  .pc-st,.pc-boot .log{padding-left:0}.pc-boot .log{padding-left:18px}
  .d-task{padding-left:12px}.d-win{width:min(262px,calc(100% - 120px))}
  .pc{height:320px}
}
@media (max-width:560px){.offer-spec{margin-left:0;width:100%}.oc strong{font-size:1.3rem}.oc{padding:9px 10px}.pc{height:290px}.pc-lock time{font-size:2.8rem}}
@media (prefers-reduced-motion:reduce){.mn::before,.mn::after,.pc-lock small{animation:none}.pc-st,.d-ico,.d-win,.d-task{transition:none}}

/* hero fit: everything above the fold on a 900px laptop */
.hero2 .wrap{padding-top:28px;padding-bottom:96px}
.hero2 .win.main .win-body{padding:14px 16px}
.hero2 .win.main .field{margin-bottom:10px;gap:5px}
.hero2 .win.main .chip{height:32px}
.hero2 .win.main .seg button{height:32px}
.scene{height:640px}
.scene .win.main{top:96px}
.pc{height:350px}
.session-foot{justify-content:flex-end;gap:14px}
@media (max-width:1060px){.hero2 .wrap{padding-bottom:84px}.scene{height:auto}.scene .win.main{top:auto}}
.hero2{min-height:calc(100dvh - var(--nav-h) - var(--ann-h,40px))}

/* remote desktop content stays in the part the configurator does not cover */
@media (min-width:1061px){.hero .wrap{grid-template-columns:minmax(0,4.4fr) minmax(0,7.6fr)}}
.hero h1{font-size:clamp(2.4rem,4.4vw,4.2rem)}
.scene{--mw:min(390px,54%);container-type:inline-size;container-name:scene}
.scene .win.main{width:var(--mw)}
.pc-st,.pc-boot .log,.d-task{padding-left:calc(var(--mw) + 12px)}
.pc-boot .log{padding-right:14px}
.pc-login .pw{width:min(230px,100%)}
.d-ico{right:auto;left:calc(var(--mw) + 16px)}
.d-win{left:calc(var(--mw) + 96px);right:14px;width:auto}
@container scene (max-width:700px){.d-ico{display:none}.d-win{left:calc(var(--mw) + 12px)}}
@media (max-width:1060px){
  .scene{--mw:0px}.scene .win.main{width:100%}
  .pc-st,.pc-boot .log,.d-task{padding-left:12px}
  .d-ico{display:grid}.d-win{left:96px}
}

/* widget price line: strike price and price on one row, the saving underneath */
.price-line{align-items:center;flex-wrap:wrap;row-gap:8px}
.price-line .amt{min-width:0;white-space:nowrap}
.price-line .amt .save-pill{display:table;margin:4px 0 0;white-space:nowrap}
.price-line .btn{flex:none}


/* ======================= nav v3 and footer v2 ======================= */
:root{--nav-h:68px}
.ribbon{background:#050a22;color:#aab8e6;font-size:.78rem;padding:6px 16px}
.ribbon b{color:var(--accent)}
.nav{background:color-mix(in srgb,var(--surface) 84%,transparent);backdrop-filter:blur(18px) saturate(1.5);border-bottom:1px solid color-mix(in srgb,var(--line) 75%,transparent)}
.nav .wrap{height:var(--nav-h)}
.nav-links>a,.dd-btn{position:relative;border-radius:var(--r-pill);font-weight:600}
@media (min-width:1181px){.nav-links{gap:2px;margin-left:14px}.nav-links>a,.dd-btn{height:40px;padding:0 15px;display:inline-flex;align-items:center}}
.nav-links>a:hover,.dd-btn:hover,.dd.open .dd-btn{background:color-mix(in srgb,var(--field) 12%,transparent);color:var(--ink)}
.nav-links>a[aria-current="page"],.dd-btn[aria-current="page"]{background:transparent;color:var(--ink)}
@media (min-width:1001px){.nav-links>a[aria-current="page"]::after,.dd-btn[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:2px;width:18px;height:3px;margin-left:-9px;border-radius:3px;background:var(--accent)}}
.nav-end .clientbtn{gap:8px}
.nav-end .btn-primary .ph{transition:transform .2s var(--ease)}
.nav-end .btn-primary:hover .ph{transform:translateX(3px)}
.icon-btn{border-radius:var(--r-pill)}
body.fx .nav{--bg:#070d1f;--surface:#0b1330;--surface-2:#15213f;--line:#243360;--ink:#eaf0ff;--muted:#a5b4d9;--field:#3560e0;--field-soft:#2552d6;--shadow-win:0 24px 48px -14px rgba(0,0,0,.7);background:rgba(5,10,34,.72);border-bottom-color:rgba(157,184,255,.16);color:var(--ink)}
body.fx .nav .logo b{color:#8fb0ff}
body.fx .nav .btn-line{color:var(--ink);border-color:rgba(157,184,255,.35)}
body.fx .nav .btn-line:hover{background:rgba(255,255,255,.08)}
body.fx .nav .icon-btn{border-color:rgba(157,184,255,.3);color:var(--ink)}
body.fx .nav .dd-menu a .ph{color:#8fb0ff}

footer{background:#050922;color:#dbe4ff;border-top:1px solid rgba(157,184,255,.18);padding:64px 0 0;position:relative;overflow:hidden;--ink:#eaf0ff;--muted:#a5b4d9}
.ft-main{display:grid;grid-template-columns:minmax(260px,.9fr) minmax(0,2.1fr);gap:56px;align-items:start}
.ft-brand .logo{color:#fff}.ft-brand .logo b{color:#8fb0ff}
.ft-brand p{color:#a5b4d9;margin-top:16px;max-width:38ch;font-size:.95rem}
.ft-facts{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-top:22px;font-size:.88rem;color:#dbe4ff}
.ft-facts li{display:flex;align-items:center;gap:8px}
.ft-facts .ph{color:#8fb0ff;font-size:1.15rem}
.ft-cta{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.ft-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
footer .fh{display:block;font-family:var(--f-display);font-weight:700;font-size:.98rem;color:#fff;margin-bottom:14px;letter-spacing:-.01em}
.ft-cols a{display:block;padding:5px 0;color:#a5b4d9;text-decoration:none;font-size:.93rem;transition:color .15s,transform .2s var(--ease)}
.ft-cols a:hover,.ft-cols a:focus-visible{color:#fff;transform:translateX(3px)}
.ft-loc{margin-top:48px;padding-top:32px;border-top:1px solid rgba(157,184,255,.16)}
.ft-flags{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:2px 14px}
.ft-flags a{display:flex;align-items:center;gap:10px;padding:6px 0;color:#c4d1f5;text-decoration:none;font-size:.9rem;transition:color .15s}
.ft-flags a:hover,.ft-flags a:focus-visible{color:#fff}
.ft-flags img{width:20px;height:15px;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.ft-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:36px;padding:20px 0;border-top:1px solid rgba(157,184,255,.16);color:#9fb0dc;font-size:.85rem}
.ft-pay{display:flex;align-items:center;gap:8px}
.ft-pay .ph{font-size:1.1rem;margin-left:8px;color:#8fb0ff}
.ft-mark{font-family:var(--f-display);font-weight:800;font-size:clamp(3.4rem,13.5vw,11.5rem);line-height:.82;letter-spacing:-.05em;text-align:center;white-space:nowrap;color:rgba(157,184,255,.14);-webkit-mask-image:linear-gradient(180deg,#000 10%,transparent 90%);mask-image:linear-gradient(180deg,#000 10%,transparent 90%);user-select:none;margin-top:4px;transform:translateY(16%)}
@media (max-width:980px){.ft-main{grid-template-columns:1fr;gap:36px}}
@media (max-width:720px){.ft-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.ft-facts{grid-template-columns:1fr}.ft-flags{grid-template-columns:1fr 1fr}}

/* faster screen changes inside the remote desktop */
.pc-st{transition:opacity .3s var(--ease),visibility 0s .3s}
.pc[data-stage="off"] .pc-off,.pc[data-stage="boot"] .pc-boot,.pc[data-stage="lock"] .pc-lock,.pc[data-stage="login"] .pc-login,.pc[data-stage="desk"] .pc-desk{transition:opacity .3s var(--ease)}
.d-ico{transition:opacity .25s var(--ease),transform .25s var(--ease)}
.pc[data-stage="desk"] .d-ico:nth-child(2){transition-delay:.07s}.pc[data-stage="desk"] .d-ico:nth-child(3){transition-delay:.14s}
.d-win{transition:opacity .3s var(--ease),transform .3s var(--ease)}
.pc[data-stage="desk"] .d-win{transition-delay:.3s}
.d-task{transition:transform .3s var(--ease) 0s}
body.fx .nav input::placeholder{color:#b9c6ee}
.nav-links .btn-primary,.nav-links .btn-primary:hover{color:var(--accent-ink)}
.nav-links .btn-primary:hover{background:var(--accent-hover)}

@media (min-width:1001px){.nav-links>a.m-only{display:none}}




/* ======================= pricing section v3: heading beside a configure console ======================= */
.stage-home{background:rgba(5,9,26,.55);border-top:1px solid rgba(157,184,255,.18);padding:104px 0 112px}
.stage-home::before{background:linear-gradient(180deg,rgba(47,91,255,.16),transparent 38%)}
.dk-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center;margin-bottom:34px}
.sh h2{font-size:clamp(2.6rem,5.2vw,4.6rem);font-weight:800;line-height:.98;max-width:none}
.sh h2 em{font-style:normal;color:#fff;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:.07em;text-underline-offset:.13em}
.sh .sub{margin-top:20px;color:#b9c6ee;max-width:48ch;font-size:1.1rem}
.sh-from{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.sh-pts{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;margin-top:26px;max-width:520px}
.sh-pts li{display:flex;align-items:center;gap:10px;font-size:.95rem;color:#dbe4ff}
.sh-pts .ph{font-size:1.3rem;color:#8fb0ff;flex:none}
.cfg{position:relative;display:grid;gap:16px;padding:22px;border-radius:var(--r-win);border:1px solid rgba(157,184,255,.3);background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.035));backdrop-filter:blur(14px);box-shadow:0 30px 60px -28px rgba(0,0,0,.8)}
.cfg-f{display:grid;gap:8px;min-width:0}
.cfg-l{display:flex;align-items:center;gap:9px;font-size:.8rem;font-weight:700;color:#c4d1f5}
.cfg-l i{width:20px;height:20px;border-radius:50%;background:#2f5bff;color:#fff;font-style:normal;display:grid;place-items:center;font-size:.72rem}
.cfg-btn{display:flex;align-items:center;gap:12px;width:100%;height:58px;padding:0 16px;border-radius:var(--r-ctl);border:1px solid rgba(157,184,255,.4);background:rgba(5,11,46,.6);color:#fff;text-align:left;transition:border-color .2s,background-color .2s}
.cfg-btn:hover,.cfg-btn[aria-expanded="true"]{border-color:#9db8ff;background:rgba(5,11,46,.85)}
.cfg-btn img{width:30px;height:22px;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.25);flex:none}
.cb-t{display:grid;min-width:0}.cb-t b{font-size:1.02rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cb-t small{font-size:.76rem;color:#aab8e6}
.cfg-btn .ph{margin-left:auto;font-size:1rem;transition:transform .25s var(--ease)}
.cfg-btn[aria-expanded="true"] .ph{transform:rotate(180deg)}
.cfg .dk-os{width:100%;height:52px}.cfg .dk-os button{height:40px}
.cfg .dk-tabs{display:grid;grid-template-columns:1fr 1fr;width:100%}.cfg .dk-tabs button{padding:12px 10px;font-size:.96rem}
.cfg .dk-find{width:100%;justify-content:center;height:48px}
.dk-top.solo{grid-template-columns:1fr}
.dk-top.solo .cfg{grid-template-columns:1.35fr 1fr 1fr auto;align-items:end;gap:18px}
.dk-top.solo .dk-find{width:auto}
.loc-pop{position:absolute;right:0;top:calc(100% + 10px);z-index:30;width:min(800px,calc(100vw - 48px));padding:16px;border-radius:var(--r-win);border:1px solid rgba(157,184,255,.38);background:#0a1230;box-shadow:0 40px 80px -20px rgba(0,0,0,.85)}
.lp-top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.lp-search{position:relative;flex:1}
.lp-search .ph{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#aab8e6}
.lp-search input{width:100%;height:46px;padding:0 14px 0 42px;border-radius:var(--r-ctl);border:1px solid rgba(157,184,255,.3);background:rgba(255,255,255,.06);color:#fff}
.lp-search input::placeholder{color:#b9c6ee}
.lp-n{font-family:var(--f-mono);font-size:.78rem;color:#aab8e6;white-space:nowrap}
.lp-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;max-height:min(56vh,430px);overflow:auto;padding-right:6px}
.lp-col h4{font-family:var(--f-ui);font-size:.8rem;font-weight:700;color:#aab8e6;margin-bottom:10px}
.lp-c{margin-bottom:14px}
.lp-cn{display:flex;align-items:center;gap:9px;font-weight:700;font-size:.92rem;color:#fff;margin-bottom:7px}
.lp-cn img{width:20px;height:15px;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.lp-ct{display:flex;flex-wrap:wrap;gap:6px}
.lp-ct button{height:30px;padding:0 11px;border-radius:var(--r-pill);border:1px solid rgba(157,184,255,.28);background:rgba(255,255,255,.05);color:#dbe4ff;font-size:.82rem;font-weight:600;transition:background-color .15s,border-color .15s}
.lp-ct button:hover{border-color:#9db8ff;background:rgba(255,255,255,.12)}
.lp-ct button[aria-pressed="true"]{background:#2f5bff;border-color:#9db8ff;color:#fff}
.lp-none{padding:18px 4px;color:#b9c6ee}
@media (max-width:1000px){
  .dk-top{grid-template-columns:1fr;gap:34px}
  .loc-pop{left:0;right:0;width:auto}.lp-cols{grid-template-columns:1fr}
  .dk-top.solo .cfg{grid-template-columns:1fr}
}
@media (max-width:560px){.sh-pts{grid-template-columns:1fr}.cfg{padding:16px}.lp-n{display:none}}
.cfg{z-index:20}


/* ======================= internal profit and loss page ======================= */
.pl-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:8px 0 8px}
.pl-kpi{padding:20px;border-radius:var(--r-win);border:1px solid var(--line);background:var(--surface);display:grid;gap:4px}
.pl-kpi b{font-family:var(--f-display);font-size:2.3rem;letter-spacing:-.03em;line-height:1}
.pl-kpi span{font-weight:700;font-size:.92rem}
.pl-kpi small{color:var(--muted);font-size:.82rem;line-height:1.4}
.pl-kpi.bad{border-color:var(--bad)}.pl-kpi.bad b{color:var(--bad)}
.pl-assume ul{margin:0 0 0 1.1rem;display:grid;gap:8px;max-width:84ch;color:var(--muted)}
.pl-assume b{color:var(--ink)}
.pl-tiers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:18px 0 26px}
.pl-tier{padding:20px;border-radius:var(--r-win);border:1px solid var(--line);background:var(--surface);display:grid;gap:10px}
.pl-tier header{display:grid;gap:2px}.pl-tier header b{font-family:var(--f-display);font-size:1.3rem}
.pl-tier header span{color:var(--muted);font-size:.85rem}
.pl-bar{display:grid;grid-template-columns:150px minmax(0,1fr) 78px;gap:4px 12px;align-items:center;font-size:.86rem}
.pl-bar small{grid-column:2/4;color:var(--muted);font-size:.76rem;margin-top:-2px}
.pl-bar b{text-align:right;font-variant-numeric:tabular-nums}
.pl-bt{height:12px;border-radius:6px;background:var(--surface-2);overflow:hidden}
.pl-bt i{display:block;height:100%;border-radius:6px;background:var(--field-soft)}
.pl-bar.cogs .pl-bt i{background:var(--warn)}
.pl-bar.ours .pl-bt i{background:var(--field-soft)}
.pl-bar.q .pl-bt i,.pl-bar.q2 .pl-bt i{background:#7f8fbf}.pl-bar.q2 .pl-bt i{background:#5b6a99}
.pl-bar.f .pl-bt i{background:#4fb68a}
.pl-bar.none{grid-template-columns:150px 1fr}
.pl-gap{font-size:.88rem;padding-top:8px;border-top:1px solid var(--line)}
.pl-gap.bad b{color:var(--bad)}.pl-gap.ok b{color:var(--ok)}
.pl-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-win);background:var(--surface)}
.pl-scroll.tall{max-height:640px;overflow:auto}
.pl-t{width:100%;border-collapse:collapse;font-size:.86rem;font-variant-numeric:tabular-nums}
.pl-t th,.pl-t td{padding:10px 12px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
.pl-t thead th{background:var(--surface-2);font-weight:700;color:var(--ink);position:sticky;top:0;z-index:1}
.pl-t th:first-child,.pl-t td:first-child{text-align:left}
.pl-t tbody th{font-weight:600;text-align:left}
.pl-t th small{display:block;color:var(--muted);font-weight:400;font-size:.74rem}
.pl-t .pos{color:var(--ok)}.pl-t .neg{color:var(--bad);font-weight:700}
.pl-t tr.offer{background:color-mix(in srgb,var(--bad) 10%,transparent)}
.pl-cmp th[colspan]{text-align:center}
.pl-all thead th[data-k]{cursor:pointer;user-select:none}
.pl-all thead th[aria-sort="ascending"]::after{content:" \2191"}.pl-all thead th[aria-sort="descending"]::after{content:" \2193"}
.pl-calc{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px;align-items:start}
.pl-inputs{display:grid;gap:14px}
.pl-ctl{display:grid;gap:6px;max-width:320px}.pl-ctl label{font-size:.82rem;font-weight:700;color:var(--muted)}
.pl-ctl select,.pl-ctl input,.pl-tools select{height:44px;padding:0 12px;border-radius:var(--r-ctl);border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.pl-inputs .pl-t input{width:84px;height:36px;padding:0 8px;border-radius:var(--r-ctl);border:1px solid var(--line);background:var(--surface-2);color:var(--ink);text-align:right}
.pl-stmt{padding:18px;border-radius:var(--r-win);border:1px solid var(--line);background:var(--surface);position:sticky;top:90px}
.pl-s tr.sub th,.pl-s tr.sub td{font-weight:800;border-top:2px solid var(--line)}
.pl-s tr.tot th,.pl-s tr.tot td{font-weight:800;font-size:1.05rem;background:var(--surface-2)}
.pl-s tr.cost td{color:var(--muted)}
.pl-mg{margin-top:12px;font-size:.92rem}.pl-mg.neg b{color:var(--bad)}.pl-mg.pos b{color:var(--ok)}
.pl-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:12px 0}
.pl-tools .loc-search{flex:1 1 260px;max-width:380px;margin:0}
.pl-chk{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;color:var(--muted)}
.pl-count{color:var(--muted);font-size:.86rem;margin:6px 0 10px}
.fine{color:var(--muted);font-size:.82rem;margin:10px 0 24px;max-width:90ch}
@media (max-width:1000px){.pl-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.pl-tiers{grid-template-columns:1fr}.pl-calc{grid-template-columns:1fr}.pl-stmt{position:static}}
@media (max-width:560px){.pl-bar{grid-template-columns:110px minmax(0,1fr) 70px}.pl-kpi b{font-size:1.9rem}}


/* ======================= nav v4: floating gradient capsule ======================= */
:root{--nav-h:68px}
.ribbon{background:linear-gradient(90deg,rgba(47,91,255,.4),#050a22 32%,#050a22 68%,rgba(255,191,47,.28));color:#c4d1f5;letter-spacing:.01em}
.nav{background:transparent;border-bottom:0;backdrop-filter:none;padding:10px 0 0;pointer-events:none}
.nav>.wrap{pointer-events:auto}
.nav .wrap{max-width:min(1260px,calc(100% - 24px));padding:0 12px 0 22px;border-radius:var(--r-pill);
  background:radial-gradient(220px 90px at var(--nx,-300px) 50%,rgba(143,176,255,.22),transparent 70%),linear-gradient(100deg,color-mix(in srgb,var(--field) 30%,transparent) 0%,color-mix(in srgb,var(--surface) 80%,transparent) 32%,color-mix(in srgb,var(--surface) 80%,transparent) 66%,color-mix(in srgb,var(--accent) 20%,transparent) 100%);
  backdrop-filter:blur(20px) saturate(1.6);box-shadow:0 20px 46px -22px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08)}
.nav .wrap::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(115deg,rgba(143,176,255,.85),rgba(143,176,255,.14) 36%,rgba(143,176,255,.14) 62%,rgba(255,191,47,.7));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.nav .wrap::after{content:"";position:absolute;left:44px;right:44px;bottom:-1px;height:2px;border-radius:2px;pointer-events:none;background:linear-gradient(90deg,transparent 0%,var(--accent) 38%,#8fb0ff 62%,transparent 100%);background-size:240% 100%;animation:navSweep 8s linear infinite}
@keyframes navSweep{from{background-position:130% 0}to{background-position:-130% 0}}
.nav-links>a,.dd-btn{color:color-mix(in srgb,var(--ink) 84%,transparent);transition:color .2s,background-color .2s,box-shadow .2s}
.nav-links>a:hover,.dd-btn:hover,.dd.open .dd-btn,.nav-links>a[aria-current="page"],.dd-btn[aria-current="page"]{color:var(--ink);background:linear-gradient(135deg,color-mix(in srgb,var(--field) 34%,transparent),color-mix(in srgb,var(--field) 8%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--field) 40%,transparent)}
.nav-end .btn-primary{position:relative;overflow:hidden;background:linear-gradient(135deg,#ffd964 0%,#ffbf2f 52%,#ff9f2e 100%);box-shadow:0 10px 24px -10px rgba(255,160,40,.85),inset 0 1px 0 rgba(255,255,255,.5)}
.nav-end .btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.6) 50%,transparent 68%);transform:translateX(-130%);transition:transform .8s var(--ease);pointer-events:none}
.nav-end .btn-primary:hover::after{transform:translateX(130%)}
.nav-end .btn-line,.nav-end .icon-btn{border:1px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(125deg,#8fb0ff,rgba(143,176,255,.2) 55%,rgba(255,191,47,.85)) border-box}
.nav-end .btn-line:hover,.nav-end .icon-btn:hover{background:linear-gradient(var(--surface-2),var(--surface-2)) padding-box,linear-gradient(125deg,#bcd0ff,rgba(143,176,255,.35) 55%,#ffd36e) border-box}
body.fx .nav .btn-line,body.fx .nav .icon-btn{border:1px solid transparent}
.mp-card,.dd-menu{border:1px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(135deg,rgba(143,176,255,.7),rgba(143,176,255,.12) 42%,rgba(255,191,47,.55)) border-box;box-shadow:0 40px 80px -24px rgba(0,0,0,.75)}
.hero2{min-height:calc(100dvh - var(--nav-h) - 45px)}
@media (max-width:1000px){
  .nav .wrap{padding:0 10px 0 16px}
  .nav.open .nav-links{top:calc(var(--nav-h) + 18px);left:12px;right:12px;border-radius:var(--r-win);border:1px solid color-mix(in srgb,var(--field) 40%,transparent);background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(20px);box-shadow:0 30px 60px -20px rgba(0,0,0,.7)}
}
@media (prefers-reduced-motion:reduce){.nav .wrap::after{animation:none;opacity:.5}.nav-end .btn-primary::after{display:none}}
/* gradient borders written with a solid base colour */
.nav-end .btn-line,.nav-end .icon-btn{background-color:var(--surface);background-image:linear-gradient(var(--surface),var(--surface)),linear-gradient(125deg,#8fb0ff,rgba(143,176,255,.2) 55%,rgba(255,191,47,.85));background-origin:border-box;background-clip:padding-box,border-box}
.nav-end .btn-line:hover,.nav-end .icon-btn:hover{background-color:var(--surface-2);background-image:linear-gradient(var(--surface-2),var(--surface-2)),linear-gradient(125deg,#bcd0ff,rgba(143,176,255,.35) 55%,#ffd36e)}
.mp-card,.dd-menu{background-color:var(--surface);background-image:linear-gradient(var(--surface),var(--surface)),linear-gradient(135deg,rgba(143,176,255,.7),rgba(143,176,255,.12) 42%,rgba(255,191,47,.55));background-origin:border-box;background-clip:padding-box,border-box}
@media (max-width:1000px){.nav.open .nav-links{background-color:var(--surface);background-image:none;backdrop-filter:none}}

/* nav sits on top of the hero, so no dark band behind the capsule */
body.fx .nav{margin-bottom:calc(0px - var(--nav-h) - 10px)}
body.fx .hero2{min-height:calc(100dvh - var(--ann-h,40px))}
body.fx .hero2 .wrap{padding-top:calc(28px + var(--nav-h) + 10px)}
body.fx .hero2{background:linear-gradient(180deg,rgba(30,70,200,.55) 0%,rgba(11,35,119,.4) 22%,rgba(5,11,46,0) 100%)}
/* Client area + Order now: one joined control, soft ends, no border at the seam */
.nav-end .btn-sm{height:42px}
@media (min-width:1181px){
  .nav-end{gap:0}
  .nav-end .icon-btn{margin-right:10px}
  .nav-end .clientbtn{border-radius:999px 0 0 999px;border-right-width:0;padding:0 18px 0 16px}
  .nav-end .btn-primary{border-radius:0 999px 999px 0;padding:0 20px 0 18px}
}
@media (min-width:1181px){body.fx .nav .nav-end .clientbtn,.nav .nav-end .clientbtn{border-right-width:0}}

/* header area is fully transparent so the hero runs seamlessly to the top edge */
body.fx .nav,:root[data-theme="light"] body.fx .nav{background:transparent;background-image:none;border-bottom:0;box-shadow:none;backdrop-filter:none}
/* light version of the capsule on the home page */
:root[data-theme="light"] body.fx .nav{--bg:#f2f6fd;--surface:#ffffff;--surface-2:#e9effb;--line:#d3dcef;--ink:#0a1330;--muted:#465273;--field:#1c4fe0;--field-soft:#3463ea;--shadow-win:0 24px 48px -16px rgba(10,19,48,.35);color:var(--ink)}
:root[data-theme="light"] body.fx .nav .wrap{box-shadow:0 22px 46px -22px rgba(5,10,40,.6),inset 0 1px 0 rgba(255,255,255,.9)}
:root[data-theme="light"] body.fx .nav .logo b{color:var(--field)}
:root[data-theme="light"] body.fx .nav .dd-menu a .ph{color:var(--field)}
:root[data-theme="light"] body.fx .nav input::placeholder{color:#5c6788}
:root[data-theme="light"] body.fx .nav .btn-line,:root[data-theme="light"] body.fx .nav .icon-btn{color:var(--ink)}
:root[data-theme="light"] body.fx .nav .mp-pop a{background:var(--surface-2);color:var(--ink)}
:root[data-theme="light"] .nav .wrap{background:radial-gradient(220px 90px at var(--nx,-300px) 50%,rgba(28,79,224,.14),transparent 70%),linear-gradient(100deg,rgba(255,255,255,.94) 0%,rgba(244,248,255,.92) 45%,rgba(255,247,226,.95) 100%)}

/* every page: content and its background run up to the top edge, the menu floats over them */
.nav{margin-bottom:calc(0px - var(--nav-h) - 10px)}
main>.wrap:first-child{padding-top:calc(var(--nav-h) + 10px)}
.stage-hero{padding-top:calc(72px + var(--nav-h) + 10px)}
@media (max-width:560px){.stage-hero{padding-top:calc(56px + var(--nav-h) + 10px)}}
/* plain pages get the same top-edge glow as the home hero */
body:not(.fx){background-color:var(--bg);background-image:linear-gradient(180deg,rgba(30,70,200,.5) 0,rgba(11,35,119,.34) 150px,rgba(5,11,46,0) 560px);background-repeat:no-repeat}
:root[data-theme="light"] body:not(.fx){background-image:linear-gradient(180deg,rgba(28,79,224,.2) 0,rgba(28,79,224,.08) 180px,rgba(28,79,224,0) 520px)}

/* order page: server type row (two cards) */
.type-cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.type-cards.two{grid-template-columns:1fr}}

/* order page: plan categories as a tree beside the table, like Vultr's picker */
.p-split{display:grid;grid-template-columns:210px minmax(0,1fr);min-height:0}
.p-tree{display:flex;flex-direction:column;border-right:1px solid var(--line);padding:8px 0;overflow-y:auto;max-height:452px;background:color-mix(in srgb,var(--surface-2) 40%,transparent)}
.p-tree button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:44px;padding:0 16px;border:0;background:transparent;color:var(--ink);font-weight:600;font-size:.92rem;text-align:left;transition:background-color .15s,color .15s}
.p-tree button small{font-family:var(--f-mono);font-weight:500;font-size:.74rem;color:var(--muted)}
.p-tree button.child{min-height:38px;padding-left:34px;font-weight:500;font-size:.88rem;color:var(--muted)}
.p-tree button:hover{background:color-mix(in srgb,var(--field) 10%,transparent);color:var(--ink)}
.p-tree button[aria-selected="true"]{background:color-mix(in srgb,var(--field) 18%,transparent);color:var(--ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--field) 55%,transparent)}
.p-tree button[aria-selected="true"] small{color:var(--ink)}
@media (max-width:900px){
  .p-split{grid-template-columns:1fr}
  .p-tree{flex-direction:row;overflow-x:auto;overflow-y:hidden;border-right:0;border-bottom:1px solid var(--line);padding:8px;gap:6px;max-height:none}
  .p-tree button,.p-tree button.child{width:auto;flex:none;min-height:38px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--line);white-space:nowrap}
  .p-tree button.child{padding-left:14px}
}
.link-btn{background:none;border:0;padding:0;color:var(--ink);font-weight:600;font-size:inherit;text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.link-btn:hover{color:var(--field-soft)}


/* country pages: compact header, facts as chips, slim city cards */
.cty2{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 22px;align-items:center;padding:18px 0 14px}
.cty2 .rack{display:none}
.cty2 .cty-flag img{width:60px;height:45px;border-radius:6px;box-shadow:0 0 0 1px rgba(10,19,48,.16)}
.cty2 h1{font-size:clamp(1.8rem,3vw,2.5rem)}
.cty2 p{margin-top:6px;max-width:66ch;font-size:.98rem}
.cty-facts{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cty-facts li{padding:5px 12px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);font-size:.86rem;color:var(--muted)}
.cty-facts li b{color:var(--ink);font-variant-numeric:tabular-nums}
.cty-facts li.cty-note{border-color:transparent;background:transparent;padding-left:2px}
.cty2 .actions{margin:0;flex-wrap:nowrap}
.crumbs{padding-top:14px}
.cty-h{margin:18px 0 0;font-size:1.2rem}
.cty-h span{margin-left:8px;padding:2px 9px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--muted);font-family:var(--f-mono);font-size:.78rem;font-weight:500;vertical-align:2px}
.city-grid{grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:8px;margin-top:12px}
.city{grid-template-columns:auto minmax(0,1fr) auto;gap:12px;padding:11px 14px}
.city:hover{transform:translateY(-2px)}
.city img{width:32px;height:24px;border-radius:4px}
.city-t b{font-size:1rem}
.city-t small{font-size:.8rem}
.city-go{grid-column:auto;display:block;margin:0;padding:0;border:0;font-size:1.05rem;color:var(--field)}

@media (max-width:860px){.cty2{grid-template-columns:auto minmax(0,1fr)}.cty2 .actions{grid-column:1/-1;flex-wrap:wrap}}
@media (max-width:480px){.cty2 .cty-flag img{width:44px;height:33px}.city-grid{grid-template-columns:1fr 1fr}.city{padding:10px}}

/* ======================= pricing section v4: entrance, light sweep, popular plan ======================= */
.stage-fx{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.stage-fx i{position:absolute;top:-25%;bottom:-25%;left:-45%;width:32%;transform:skewX(-18deg);background:linear-gradient(100deg,transparent,rgba(143,176,255,.1),transparent);animation:beam 12s linear infinite}
.stage-fx i:nth-child(2){width:20%;background:linear-gradient(100deg,transparent,rgba(255,191,47,.07),transparent);animation-duration:17s;animation-delay:-7s}
@keyframes beam{to{left:135%}}

/* heading, chips and console rise in once, in sequence */
.rise{display:inline-block;transition:opacity .85s var(--ease) calc(var(--i,0) * 90ms),transform .85s var(--ease) calc(var(--i,0) * 90ms)}
.sh .sub.rise,.sh-from.rise,.sh-pts li.rise{display:block}
.sh-pts li.rise{display:flex}.sh-from.rise{display:flex}
.stage.arm:not(.go) .rise{opacity:0;transform:translateY(24px)}
.cfg{transition:opacity .9s var(--ease) .25s,transform .9s var(--ease) .25s}
.stage.arm:not(.go) .cfg{opacity:0;transform:translateY(28px) scale(.98)}
.stage.arm:not(.go) .dk-billrow{opacity:0;transform:translateY(20px)}
.dk-billrow{transition:opacity .9s var(--ease) .45s,transform .9s var(--ease) .45s}
.sh-cty h2 em .cty-fl,.stage-cty .sh h2 em .cty-fl{display:inline-block;margin-right:.28em;vertical-align:.02em}
.stage-cty .sh h2 em .cty-fl img{display:inline-block;width:.78em;height:.58em;border-radius:6px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.3),0 8px 18px -6px rgba(0,0,0,.6)}

/* the console edge is lit by a slow travelling gradient */
.cfg::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(120deg,rgba(143,176,255,.95),rgba(143,176,255,.08) 28%,rgba(255,191,47,.85) 55%,rgba(143,176,255,.08) 80%,rgba(143,176,255,.95));background-size:300% 100%;animation:cfgEdge 10s linear infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
@keyframes cfgEdge{to{background-position:-300% 0}}

/* plan cards: lift on hover, a light follows the pointer */
.dk{transition:opacity .8s var(--ease) calc(var(--d) * .12s),transform .8s var(--ease) calc(var(--d) * .12s),border-color .3s,translate .4s var(--ease),box-shadow .4s var(--ease)}
.dk:hover{translate:0 -6px;box-shadow:0 34px 60px -30px rgba(0,0,0,.85)}
.dk::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(280px 220px at var(--px,50%) var(--py,0%),rgba(143,176,255,.16),transparent 70%)}
.dk:hover::after{opacity:1}

/* the middle plan: raised, glowing edge and a Most popular tag */
@media (min-width:1001px){.t-business{translate:0 -14px}.t-business:hover{translate:0 -20px}}
.t-business{border-color:rgba(157,184,255,.7);box-shadow:0 40px 80px -34px rgba(47,91,255,.8)}
.t-business::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:2px;pointer-events:none;background:linear-gradient(120deg,rgba(143,176,255,.9),rgba(255,191,47,.9) 30%,rgba(143,176,255,.2) 55%,rgba(143,176,255,.9) 80%);background-size:300% 100%;animation:cfgEdge 7s linear infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.dk-pop{position:absolute;left:50%;top:-16px;z-index:3;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 18px;border-radius:var(--r-pill);background:linear-gradient(135deg,#ffd964 0%,#ffbf2f 55%,#ff9f2e 100%);color:var(--accent-ink);font-weight:800;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;overflow:hidden;box-shadow:0 12px 26px -8px rgba(255,160,40,.9),inset 0 1px 0 rgba(255,255,255,.55);animation:popFloat 3.4s ease-in-out infinite}
.dk-pop .ph{font-size:1rem}
.dk-pop::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.65) 50%,transparent 68%);transform:translateX(-130%);animation:popShine 3.4s ease-in-out infinite}
@keyframes popFloat{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-3px)}}
@keyframes popShine{0%,55%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
@media (prefers-reduced-motion:reduce){.stage-fx i,.cfg::before,.t-business::before,.dk-pop,.dk-pop::after{animation:none}.rise,.cfg,.dk-billrow{transition:none}.dk:hover{translate:none}}

/* ======================= location picker v2: compact popover under the Location field ======================= */
.cfg-f{position:relative}
.loc-pop{position:absolute;left:0;right:0;top:calc(100% + 8px);width:auto;max-width:none;z-index:40;padding:12px;border:1px solid transparent;border-radius:var(--r-win);transform-origin:top center;
  background-color:#0a1230;background-image:linear-gradient(#0a1230,#0a1230),linear-gradient(135deg,rgba(143,176,255,.75),rgba(143,176,255,.12) 45%,rgba(255,191,47,.6));background-origin:border-box;background-clip:padding-box,border-box;
  box-shadow:0 40px 80px -20px rgba(0,0,0,.9);animation:lpIn .28s var(--ease)}
@keyframes lpIn{from{opacity:0;transform:translateY(-8px) scale(.97)}}
.loc-pop .lp-search{position:relative;flex:none;margin:0 0 10px}
.loc-pop .lp-search input{height:44px;padding:0 56px 0 42px}
.lp-search kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);padding:2px 7px;border:1px solid rgba(157,184,255,.3);border-radius:6px;font-family:var(--f-mono);font-size:.7rem;color:#b9c6ee}
.lp-hot{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:10px}
.lp-hot>span{margin-right:2px;font-size:.74rem;font-weight:700;color:#aab8e6}
.lp-hot button{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px 0 8px;border:1px solid rgba(157,184,255,.28);border-radius:var(--r-pill);background:rgba(255,255,255,.05);color:#e6edff;font-size:.8rem;font-weight:600;transition:background-color .15s,border-color .15s,transform .15s}
.lp-hot button img{width:18px;height:13px;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.lp-hot button:hover{border-color:#9db8ff;background:rgba(255,255,255,.12);transform:translateY(-1px)}
.lp-hot button[aria-pressed="true"]{background:#2f5bff;border-color:#9db8ff;color:#fff}
.lp-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;margin-bottom:8px;border-radius:var(--r-ctl);background:rgba(255,255,255,.06);transition:opacity .2s}
.lp-tabs button{display:flex;align-items:center;justify-content:center;gap:6px;height:34px;border:0;border-radius:6px;background:transparent;color:#b9c6ee;font-weight:600;font-size:.82rem;transition:background-color .15s,color .15s}
.lp-tabs button small{font-family:var(--f-mono);font-size:.72rem;opacity:.8}
.lp-tabs button:hover{color:#fff}
.lp-tabs button[aria-selected="true"]{background:rgba(143,176,255,.22);color:#fff;box-shadow:inset 0 0 0 1px rgba(143,176,255,.45)}
.lp-tabs.dim{opacity:.45}
.lp-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;max-height:272px;overflow-y:auto;overscroll-behavior:contain;padding:2px 4px 2px 0}
.lp-i{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px;min-height:46px;padding:0 10px;border:1px solid transparent;border-radius:var(--r-ctl);background:transparent;color:#e6edff;text-align:left;animation:lpRow .32s var(--ease) both;animation-delay:calc(var(--k,0) * 16ms);transition:background-color .15s,border-color .15s}
.lp-i img{width:26px;height:19px;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.lp-name{display:grid;min-width:0}
.lp-name b{font-size:.92rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-name small{font-size:.74rem;color:#9fb0dc}
.lp-ms{font-style:normal;font-family:var(--f-mono);font-size:.72rem;color:#9fb0dc}
.lp-i .ph-check{opacity:0;font-size:.95rem;color:#fff}
.lp-i:hover,.lp-i:focus-visible{background:rgba(143,176,255,.14);border-color:rgba(143,176,255,.32)}
.lp-i[aria-selected="true"]{background:rgba(47,91,255,.35);border-color:rgba(157,184,255,.6)}
.lp-i[aria-selected="true"] .ph-check{opacity:1}
@keyframes lpRow{from{opacity:0;transform:translateY(6px)}}
.loc-pop .lp-none{padding:14px 6px;font-size:.9rem;color:#b9c6ee}
.lp-foot{display:flex;justify-content:space-between;gap:10px;margin-top:8px;padding-top:8px;border-top:1px solid rgba(157,184,255,.16);font-size:.74rem;color:#9fb0dc}
@media (max-width:560px){.lp-list{grid-template-columns:1fr}.lp-foot span:last-child{display:none}.lp-tabs button small{display:none}}
@media (prefers-reduced-motion:reduce){.loc-pop,.lp-i{animation:none}}

/* Popular stays on one line; on narrow screens it scrolls sideways instead of wrapping */
.lp-hot{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);padding-right:18px}
.lp-hot::-webkit-scrollbar{display:none}
.lp-hot>span{flex:none}
.lp-hot button{flex:none;gap:6px;padding:0 10px 0 7px;font-size:.78rem}
@media (min-width:640px){.lp-hot{-webkit-mask-image:none;mask-image:none;padding-right:0}}


/* US locations are the featured ones: a warm tint, nothing heavier */
.mp-c.us{background:linear-gradient(90deg,rgba(255,191,47,.16),rgba(255,191,47,0) 85%)}
.ft-flags a.us{color:#fff;font-weight:700}
.tk.us{border-color:rgba(255,191,47,.65);background:rgba(255,191,47,.14)}
.lp-i.us{background:linear-gradient(90deg,rgba(255,191,47,.12),rgba(255,191,47,0) 75%)}
.lp-i.us:hover,.lp-i.us:focus-visible{background:rgba(143,176,255,.14)}
.lp-i.us[aria-selected="true"]{background:rgba(47,91,255,.35)}
.loc.us{background:linear-gradient(90deg,rgba(255,191,47,.14),rgba(255,191,47,0) 80%)}
.loc.us[aria-pressed="true"]{background:color-mix(in srgb,var(--field) 12%,var(--surface))}

/* ======================= home locations: one compact board ======================= */
.locs2{padding:64px 0 56px}
.locs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.locs-head h2{max-width:24ch;font-size:clamp(1.9rem,3.2vw,2.8rem)}
.locs-head .sub{margin-top:10px;max-width:62ch}
.locs-head .btn{flex:none}
.board3{margin-top:26px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:#080e24;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-win);box-shadow:var(--shadow-win);overflow:hidden;color:#f2f5ff}
.b3-tabs{display:none}
.b3-col{padding:14px 14px 12px}
.b3-col+.b3-col{border-left:1px solid rgba(255,255,255,.1)}
.b3-col h3{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 8px 8px;font-family:var(--f-ui);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#9fb2e6;line-height:1.2}
.b3-col h3 small{font-family:var(--f-mono);font-size:.72rem;font-weight:500;letter-spacing:0;color:#9fb2e6}
.b3-col ul{list-style:none;display:grid;gap:2px}
.b3-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px;height:34px;padding:0 8px;border-radius:8px;color:#f2f5ff;text-decoration:none;font-size:.92rem;font-weight:500;transition:background-color .15s}
.b3-row:hover,.b3-row:focus-visible{background:rgba(143,176,255,.16)}
.b3-row.us{background:linear-gradient(90deg,rgba(255,191,47,.15),rgba(255,191,47,0) 85%)}
.b3-row.us:hover{background:rgba(143,176,255,.16)}
.b3-row img{width:22px;height:16px;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.b3-city{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b3-lat .flap{gap:1px}
.b3-lat .flap i{min-width:11px;width:11px;height:22px;border-radius:3px;font-size:.72rem}
.b3-dot{width:7px;height:7px;border-radius:50%;background:#7ff0b8}
@media (max-width:900px){
  .board3{grid-template-columns:1fr}
  .b3-tabs{display:flex;gap:4px;padding:6px;border-bottom:1px solid rgba(255,255,255,.1)}
  .b3-tabs button{flex:1;height:36px;border:0;border-radius:var(--r-ctl);background:transparent;color:#b9c6ee;font-weight:600;font-size:.84rem}
  .b3-tabs button[aria-pressed="true"]{background:rgba(143,176,255,.2);color:#fff;box-shadow:inset 0 0 0 1px rgba(143,176,255,.4)}
  .b3-col:not(.on){display:none}
  .b3-col+.b3-col{border-left:0}
}
/* tighter: Americas flows into two sub-columns so no column is taller than 10 rows */
.locs2{padding:48px 0 40px}
.locs-head h2{font-size:clamp(1.7rem,2.7vw,2.4rem);max-width:none}
.locs-head .sub{margin-top:8px;max-width:74ch;font-size:1rem}
.board3{margin-top:20px;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}
.b3-col{padding:12px 12px 10px}
.b3-col[data-r="am"] ul{display:block;column-count:2;column-gap:12px}
.b3-col[data-r="am"] li{break-inside:avoid;margin-bottom:2px}
.b3-row{height:32px}
.board-note{margin-top:10px}
@media (max-width:900px){.board3{grid-template-columns:1fr}.b3-col[data-r="am"] ul{column-count:1}}


/* ======================= hero callouts: rotating headline ======================= */
.hs-slides{display:grid}
.hs-slide{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .45s var(--ease),transform .5s var(--ease),visibility 0s .45s}
.hs-slide.on{opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--ease) .12s,transform .6s var(--ease) .12s,visibility 0s}
.hs-slide.on>*{animation:hsRise .7s var(--ease) both;animation-delay:calc(var(--j,0) * 90ms + 140ms)}
@keyframes hsRise{from{opacity:0;transform:translateY(18px)}}
.hs-chip{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 13px;margin-bottom:14px;border:1px solid rgba(255,191,47,.55);border-radius:var(--r-pill);background:rgba(255,191,47,.14);color:#ffd36e;font-weight:700;font-size:.8rem;letter-spacing:.02em}
.hs-chip .ph{font-size:1rem}
.hs-h{margin:0;font-family:var(--f-display);font-size:clamp(2.4rem,4.4vw,4.2rem);font-weight:800;letter-spacing:-.03em;line-height:1.02;max-width:11ch;text-wrap:balance}
.hs-slide .lede{max-width:36ch}
.hs-link{display:inline-flex;align-items:center;gap:8px;margin-top:14px;color:#fff;font-weight:700;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:5px}
.hs-link .ph{transition:transform .25s var(--ease)}
.hs-link:hover .ph{transform:translateX(4px)}
.hs-nav{display:flex;gap:8px;margin-top:18px}
.hs-dot{position:relative;width:34px;height:6px;padding:0;border:0;border-radius:var(--r-pill);background:rgba(255,255,255,.22);overflow:hidden;cursor:pointer;transition:width .3s var(--ease),background-color .2s}
.hs-dot:hover{background:rgba(255,255,255,.4)}
.hs-dot[aria-current="true"]{width:56px}
.hs-dot i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:var(--accent)}
.hs-dot[aria-current="true"] i{animation:hsFill 6.5s linear forwards}
@keyframes hsFill{to{transform:scaleX(1)}}
.hs.paused .hs-dot[aria-current="true"] i{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.hs-slide,.hs-slide.on{transition:none}.hs-slide.on>*{animation:none}.hs-dot[aria-current="true"] i{animation:none;transform:scaleX(1)}}
.hs-slide[data-i="0"]{padding-top:44px}   /* the first slide has no tag, so its headline lines up with the others */

/* System window in the hero: the location row carries the flag */
.d-win dd.loc-dd{display:flex;align-items:center;justify-content:flex-end;gap:7px;font-family:var(--f-ui);font-weight:700}
.d-win dd.loc-dd img{width:18px;height:13px;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px rgba(10,19,48,.25)}
.d-win dd.loc-dd span{white-space:nowrap}


/* ======================= top bar: glass offers and notices ======================= */
:root{--ann-h:40px}
html.no-ann{--ann-h:0px}
html.no-ann .ann{display:none}
.ann{position:relative;z-index:60;overflow:hidden;color:#eaf0ff;
  background-color:rgba(8,16,52,.86);background-image:linear-gradient(90deg,rgba(47,91,255,.34),rgba(255,255,255,.08) 46%,rgba(255,191,47,.24));
  backdrop-filter:blur(18px) saturate(1.6);border-bottom:1px solid rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 30px -18px rgba(0,0,0,.8)}
.ann::before{content:"";position:absolute;top:0;bottom:0;left:-30%;width:22%;transform:skewX(-20deg);pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);animation:annShine 9s ease-in-out infinite}
@keyframes annShine{0%,60%{left:-30%}100%{left:130%}}
.ann-in{position:relative;max-width:var(--wrap);margin:0 auto;padding:0 24px;min-height:var(--ann-h,40px);display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px}
.ann-ico{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,191,47,.5);background:rgba(255,191,47,.16);color:#ffd36e;font-size:.95rem}
.ann-msgs{display:grid;min-width:0;justify-items:center}
.ann-msg{grid-area:1/1;display:flex;align-items:center;justify-content:center;gap:9px;max-width:100%;margin:0;font-size:.86rem;line-height:1.45;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .35s var(--ease),transform .4s var(--ease),visibility 0s .35s}
.ann-msg.on{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--ease) .1s,transform .5s var(--ease) .1s,visibility 0s}
.ann-msg>.ph{flex:none;font-size:1rem;color:#8fb0ff}
.ann-msg b{flex:none;padding:2px 9px;border-radius:var(--r-pill);background:rgba(255,191,47,.2);color:#ffd36e;font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.ann-msg span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ann-msg a{flex:none;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 12px;border-radius:var(--r-pill);background:linear-gradient(135deg,#ffd964,#ffbf2f 55%,#ff9f2e);color:var(--accent-ink);font-size:.78rem;font-weight:800;text-decoration:none;box-shadow:0 6px 16px -8px rgba(255,160,40,.9);transition:transform .2s var(--ease)}
.ann-msg a:hover{transform:translateY(-1px)}
.ann-ctl{display:flex;align-items:center;gap:4px}
.ann-count{min-width:38px;text-align:center;font-family:var(--f-mono);font-size:.72rem;color:#b9c6ee}
.ann-b{width:26px;height:26px;display:grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:rgba(255,255,255,.08);color:#eaf0ff;font-size:.8rem;cursor:pointer;transition:background-color .15s,border-color .15s}
.ann-b:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.45)}
.ann-x{margin-left:6px}
.ann-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.08)}
.ann-bar i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#8fb0ff,#ffbf2f);animation:annFill 6s linear forwards}
@keyframes annFill{to{transform:scaleX(1)}}
.ann.paused .ann-bar i{animation-play-state:paused}
@media (max-width:760px){.ann-in{padding:0 12px;gap:8px}.ann-count,.ann-b:not(.ann-x){display:none}.ann-ico{display:none}.ann-in{grid-template-columns:minmax(0,1fr) auto}.ann-msg a{display:none}.ann-msg{justify-content:flex-start}}
@media (prefers-reduced-motion:reduce){.ann::before{animation:none;display:none}.ann-bar i{animation:none;transform:scaleX(1)}.ann-msg,.ann-msg.on{transition:none}}

/* ======================= plans page v5: family cards, and orange hover and selection ======================= */
:root{--hov-bg:rgba(255,191,47,.14);--hov-bd:rgba(255,191,47,.7);--sel-bg:rgba(255,191,47,.22);--hov-tx:#ffd36e}

/* family cards */
.fam-strip{gap:14px;margin-bottom:56px}
.fam-tile{grid-template-columns:1fr;gap:12px;align-items:start;padding:18px;text-decoration:none;color:inherit;transition:transform .3s var(--ease),border-color .25s,background-color .25s,box-shadow .3s}
.ft-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center}
.ft-ico{width:46px;height:46px;border-radius:12px;font-size:1.4rem;transition:background .3s,color .3s,box-shadow .3s,transform .45s var(--ease)}
.ft-b b{font-size:1.2rem}
.ft-n{font-family:var(--f-display);font-size:1.5rem;font-weight:800;line-height:1;text-align:right;color:#fff}
.ft-n small{display:block;margin-top:3px;font-family:var(--f-ui);font-size:.75rem;font-weight:600;color:#9aa6cb}
.ft-prices{display:grid;gap:6px;padding:10px 12px;border:1px solid rgba(255,255,255,.1);border-radius:var(--r-ctl);background:rgba(5,11,46,.45)}
.ft-pr{display:flex;align-items:baseline;gap:8px}
.ft-pr .tag{align-self:center;min-width:40px;justify-content:center}
.ft-pr em{font-style:normal;font-size:.8rem;color:#9aa6cb}
.ft-pr strong{font-family:var(--f-display);font-size:1.35rem;letter-spacing:-.02em;color:#fff}
.ft-pr small{font-size:.78rem;color:#9aa6cb}
.ft-pr.off{opacity:.7}
.ft-go{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.9rem;color:#dbe4ff;transition:color .2s}
.ft-go .ph{transition:transform .25s var(--ease)}
.fam-tile:hover,.fam-tile:focus-visible{transform:translateY(-5px);border-color:var(--hov-bd);background:linear-gradient(180deg,rgba(255,191,47,.16),rgba(255,191,47,.04));box-shadow:0 26px 46px -28px rgba(255,160,40,.6)}
.fam-tile:hover .ft-ico,.fam-tile.on .ft-ico{background:linear-gradient(135deg,#ffd964,#ff9f2e);color:var(--accent-ink);box-shadow:0 10px 24px -8px rgba(255,160,40,.85)}
.fam-tile:hover .ft-ico{transform:rotate(-8deg) scale(1.08)}
.fam-tile:hover .ft-go,.fam-tile.on .ft-go{color:var(--hov-tx)}
.fam-tile:hover .ft-go .ph{transform:translateX(5px)}
.fam-tile.on{border-color:var(--hov-bd);background:linear-gradient(180deg,rgba(255,191,47,.2),rgba(255,191,47,.05));box-shadow:inset 0 0 0 1px rgba(255,191,47,.5)}
@media (max-width:1100px){.fam-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.fam-strip{grid-template-columns:1fr}}

/* the console and the plan cards: hover is orange, the chosen option is orange */
.cfg-btn:hover,.cfg-btn[aria-expanded="true"]{border-color:var(--hov-bd);background:rgba(255,191,47,.08)}
.cfg .dk-os button:hover,.cfg .dk-tabs button:hover{background:var(--hov-bg);color:#fff}
.dk-os button[aria-pressed="true"],.dk-tabs button[aria-selected="true"]{background:var(--sel-bg);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,191,47,.6)}
.dk-find:hover,.dk-find:focus-visible{background:var(--hov-bg);border-color:var(--hov-bd)}
.cfg-l i{background:linear-gradient(135deg,#ffd964,#ff9f2e);color:var(--accent-ink);font-weight:800}
.dk:hover{border-color:var(--hov-bd)}
.dk::after{background:radial-gradient(280px 220px at var(--px,50%) var(--py,0%),rgba(255,191,47,.14),transparent 70%)}
.stops button:hover,.stops button.on{color:var(--hov-tx)}
.bill-pill button:hover{color:var(--hov-tx)}
.bill-pill button[aria-checked="true"]:hover{color:#0a1330}

/* the location picker follows the same colour */
.lp-i:hover,.lp-i:focus-visible{background:var(--hov-bg);border-color:var(--hov-bd)}
.lp-i[aria-selected="true"],.lp-i.us[aria-selected="true"]{background:var(--sel-bg);border-color:var(--hov-bd)}
.lp-i.us:hover{background:var(--hov-bg)}
.lp-i[aria-selected="true"] .ph-check{color:var(--hov-tx)}
.lp-hot button:hover{border-color:var(--hov-bd);background:var(--hov-bg)}
.lp-hot button[aria-pressed="true"]{background:var(--sel-bg);border-color:var(--hov-bd);color:#fff}
.lp-tabs button:hover{color:var(--hov-tx)}
.lp-tabs button[aria-selected="true"]{background:var(--sel-bg);box-shadow:inset 0 0 0 1px rgba(255,191,47,.55);color:#fff}
.loc-pop .lp-search input:focus{border-color:var(--hov-bd);outline:none}


/* ======================= products in the menu, switcher and location pages ======================= */
.mp-prod{display:flex;gap:4px;padding:4px;margin-bottom:12px;border-radius:var(--r-ctl);background:var(--surface-2);width:fit-content;max-width:100%;flex-wrap:wrap}
.mp-prod button{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border:0;border-radius:6px;background:transparent;color:var(--muted);font-weight:700;font-size:.86rem;cursor:pointer;transition:background-color .15s,color .15s,box-shadow .15s}
.mp-prod button .ph{font-size:1rem}
.mp-prod button:hover{background:rgba(255,191,47,.16);color:var(--ink)}
.mp-prod button[aria-selected="true"]{background:rgba(255,191,47,.24);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(255,191,47,.65)}
.mp-c.na{display:none}
.kind-sw{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 0}
.kind-sw a{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 15px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--ink);font-weight:700;font-size:.88rem;text-decoration:none;transition:background-color .15s,border-color .15s,transform .2s var(--ease)}
.kind-sw a:hover{border-color:rgba(255,191,47,.8);background:rgba(255,191,47,.14);transform:translateY(-1px)}
.kind-sw a.on{border-color:rgba(255,191,47,.85);background:rgba(255,191,47,.22);cursor:default}
.kind-sw a .ph{font-size:1.05rem}
.cty-flag.hub-ico{width:60px;height:60px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,#ffd964,#ff9f2e);color:var(--accent-ink);font-size:1.9rem}
.kp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-win);background:var(--surface)}
.kp-table{width:100%;border-collapse:collapse;font-size:.92rem;font-variant-numeric:tabular-nums}
.kp-table th,.kp-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.kp-table thead th{background:var(--surface-2);font-size:.8rem;font-weight:700;color:var(--muted)}
.kp-table tbody th{font-weight:600}
.kp-table tbody tr:last-child th,.kp-table tbody tr:last-child td{border-bottom:0}
.kp-table tbody tr:hover{background:rgba(255,191,47,.1)}
.kp-table td a{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px}
.fine{color:var(--muted);font-size:.84rem;margin:10px 0 24px}
.cty-h{font-size:1.6rem}
.kp-table{font-size:1rem}
.kp-table thead th{font-size:.84rem}

/* sticky menu selection: stays on the last item hovered until another is chosen */
.nav-links .mp-c.picked,.nav-links .dd-menu a.picked{background:var(--sel-bg);box-shadow:inset 0 0 0 1px var(--hov-bd)}
:root:not([data-theme="dark"]) .nav-links .mp-c.picked,:root:not([data-theme="dark"]) .nav-links .dd-menu a.picked{color:var(--ink)}

/* nav fit: the right-hand buttons stayed inside the capsule (they overhung its edge by a few px) */
@media (min-width:1181px){
  .nav .wrap{gap:18px}
  .nav-links .dd-btn,.nav-links > a{padding-left:12px;padding-right:12px}
}
/* menu icon tile: hover, focus and the sticky selection turn the tile amber, with a dark glyph that stays visible */
.nav-links .dd-menu a:hover .mu-i,.nav-links .dd-menu a:focus-visible .mu-i,.nav-links .dd-menu a.picked .mu-i{background:#ffbf2f;color:#0a1330;transform:scale(1.06)}
.nav-links .dd-menu a:hover .mu-i .ph,.nav-links .dd-menu a:focus-visible .mu-i .ph,.nav-links .dd-menu a.picked .mu-i .ph,
:root[data-theme] body.fx .nav .dd-menu a:hover .mu-i .ph,:root[data-theme] body.fx .nav .dd-menu a.picked .mu-i .ph{color:#0a1330}

/* four-up plan cards: compact, aligned rows, no cramped wrapping */
.t-standard{background:linear-gradient(180deg,#1d2a64 0%,#121a45 46%,#0a1029 100%);border-color:rgba(143,176,255,.3)}
.dk-grid{align-items:stretch}
.dk{display:flex;flex-direction:column;padding:24px 22px}
.dk-head{gap:10px;min-height:5.2rem;align-content:flex-start}
.dk-head h3{font-size:1.7rem;width:100%}
.dk-tag{margin-top:4px;min-height:2.9em;font-size:.95rem;line-height:1.45}
.al{margin-top:14px}
.al-top{padding:16px;border-radius:var(--r-ctl);background:rgba(255,255,255,.05)}
.al-big{font-size:1.2rem;white-space:nowrap}
.al-big .ph{display:none}
.al-sub{margin-top:10px;font-size:.92rem;line-height:1.65}
.al-slide{margin-top:12px;min-height:7.2rem}
.fixed{padding:12px 14px;font-size:.88rem;line-height:1.45;gap:10px}
.fixed .ph{flex:none}
.pr{margin-top:20px}
.pr-row{display:grid;grid-template-columns:auto 1fr;column-gap:10px;row-gap:2px;align-items:baseline}
.pr-old{grid-column:1/-1;font-size:1.15rem}
.pr-n{font-size:2.8rem}
.pr-u{font-size:.92rem}
.pr-bill{margin-top:10px;font-size:.88rem;gap:8px}
.cta-wrap{margin-top:16px}
.cap{font-size:.88rem;line-height:1.4}
.pn{padding:14px 14px}
.pn-h{font-size:.95rem;line-height:1.3}
.rw{flex-wrap:wrap;gap:6px 10px;padding:11px 0;font-size:.92rem;line-height:1.35}
.rw .lb{flex:1 1 auto;white-space:nowrap}
.rw .ch{margin-left:auto}
.dk .pns{margin-top:auto}
@media (max-width:1180px){.dk-head{min-height:0}.dk-tag{min-height:0}.al-slide{min-height:0}.dk-grid{gap:20px}.dk-head h3{font-size:1.9rem}}

/* slim cards: spec, price and the button. Everything else is in the comparison table */
.al-slide:empty{display:none}
.al-slide{min-height:0}
.dk .pr{margin-top:auto;padding-top:20px}
.dk-head{min-height:0}
.pns:empty{display:none}

/* legal hub */
.link-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.link-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:22px 22px 24px;border:1px solid var(--line);border-radius:var(--r-win);background:var(--surface);color:var(--ink);text-decoration:none;transition:border-color .2s,background-color .2s}
.link-card b{font-size:1.15rem;font-family:var(--f-display)}
.link-card span{color:var(--muted);font-size:.95rem;line-height:1.5;padding-right:28px}
.link-card i{position:absolute;right:20px;top:22px;color:var(--muted)}
.link-card:hover,.link-card:focus-visible{background:var(--hov-bg,rgba(255,191,47,.14));border-color:var(--hov-bd,rgba(255,191,47,.7))}
@media (max-width:900px){.link-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.link-cards{grid-template-columns:1fr}}

/* centred card text and the highlighted main points */
.dk{text-align:center}
.dk-head{justify-content:center}.dk-head h3{text-align:center}
.dk-badges{justify-content:center;width:100%}
.dk-tag{text-align:center}
.al-big,.al-sub{justify-content:center;text-align:center}
.pr-row{justify-content:center;justify-items:center;grid-template-columns:auto auto;text-align:center}
.pr-old{justify-self:center}
.pr-bill{justify-content:center;text-align:center}
.stops{justify-content:space-around}
.dk .pns{margin-top:18px}
.dk .pns:empty{display:none}
.kp{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.kp li{display:flex;align-items:center;justify-content:center;gap:9px;padding:9px 12px;border-radius:var(--r-ctl);background:rgba(255,255,255,.05);color:#d7def5;font-size:.9rem;line-height:1.3;text-align:left}
.kp li.hot{background:rgba(255,191,47,.12);box-shadow:inset 0 0 0 1px rgba(255,191,47,.38);color:#fff}
.kp .ph{flex:none;font-size:1.15rem;color:#9db8ff}
.kp li.hot .ph{color:#ffbf2f}
.kp b{color:#fff;font-weight:700}
.dk .pr{margin-top:auto;padding-top:20px}

/* no dead space: the spare height goes into the spec box, so the point lists and prices line up across the four cards */
.dk .al{flex:1 1 auto;display:flex;flex-direction:column}
.dk .al-top{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
.dk .pr{margin-top:0;padding-top:18px}

/* Professional is the plan to buy: lifted, glowing edge, solid amber tag. Standard keeps a quieter "Most popular" tag. */
.dk-pop.soft{background:rgba(10,19,48,.92);color:#ffd36e;box-shadow:inset 0 0 0 1px rgba(255,191,47,.55);animation:none;transform:translateX(-50%)}
.dk-pop.soft::after{display:none}
.t-business .cta{box-shadow:0 14px 30px -12px rgba(255,160,40,.9)}
.t-business .dk-head h3{color:#fff}

/* ---- Remo, the mascot. SVG files in assets/mascot/ animate themselves; here is where they sit ---- */
.mc{display:block;pointer-events:none;user-select:none}
.page-head[class*="mc-"]{--mc:url(mascot/idle-half.svg)}
.page-head.mc-wave{--mc:url(mascot/wave-half.svg)}.page-head.mc-think{--mc:url(mascot/think-half.svg)}.page-head.mc-cheer{--mc:url(mascot/cheer-half.svg)}.page-head.mc-point{--mc:url(mascot/point-half.svg)}
.page-head[class*="mc-"]::after{content:"";position:absolute;right:0;bottom:-6px;width:132px;height:118px;background:var(--mc) center/contain no-repeat;pointer-events:none}
@media (max-width:900px){.page-head[class*="mc-"]::after{display:none}}
.hero-mc{position:absolute;right:46px;top:-90px;z-index:4;filter:drop-shadow(0 -4px 14px rgba(0,0,0,.35))}
@media (max-width:1060px){.hero-mc{display:none}}
.deck-mc{position:absolute;right:2%;top:-8px}
.dk-billrow{position:relative}
@media (max-width:1180px){.deck-mc{display:none}}
footer .ft-brand{position:relative}
.empty-state>i.ph,.empty-state>.ph{display:none}
.empty-state::before{content:"";display:block;width:112px;height:153px;margin:0 auto 6px;background:url(mascot/sleep.svg) center/contain no-repeat}
.empty::before{content:"";display:block;width:80px;height:109px;margin:0 auto 6px;background:url(mascot/sleep.svg) center/contain no-repeat}
#done .tick{display:none}
#done .win-body::before{content:"";display:block;width:104px;height:142px;margin:0 0 6px -6px;background:url(mascot/cheer.svg) center/contain no-repeat}

/* each plan has its own Remi: the more power, the bigger the reaction */
.plan-mc{width:128px;height:114px;margin:6px auto -6px;position:relative;z-index:1}
.t-business .plan-mc{width:138px;height:123px;margin-top:2px}
.t-power .plan-mc{width:144px;height:128px;margin-top:-2px}
.dk-head{min-height:0}
.deck-mc{display:none}

/* Remi's head beside the footer logo */
.ft-id{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.ft-id .logo{min-width:0}
.ft-head{flex:none;width:78px;height:auto;margin-top:-8px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.4))}

/* blog: infographic, use-case examples, embed box */
.post-cover{display:block;width:100%;height:auto;border-radius:var(--r-win);margin-bottom:14px;border:1px solid var(--line)}
.post-tag{padding:2px 10px;border-radius:999px;background:var(--hov-bg,rgba(255,191,47,.14));color:var(--ink);font-weight:700;font-size:.78rem}
.ig{margin:28px 0}.ig img{display:block;width:100%;height:auto;border-radius:var(--r-win);border:1px solid var(--line);background:#0a1330}.ig figcaption{margin-top:8px;color:var(--muted);font-size:.9rem;text-align:center}
.post-ul{margin:10px 0 0;padding-left:1.2em;display:grid;gap:8px;line-height:1.6;font-size:1.05rem}
.uc{margin:16px 0;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-win);background:var(--surface)}
.uc-h{display:flex;align-items:center;gap:10px;font-size:1.1rem}.uc-h .ph{font-size:1.4rem;color:var(--field)}
.uc p{margin:8px 0 12px!important;font-size:1rem!important}
.uc-f{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}.uc-plan{padding:4px 12px;border-radius:999px;background:var(--hov-bg,rgba(255,191,47,.14));font-weight:700;font-size:.9rem}.uc-price{color:var(--muted);font-size:.92rem;margin-right:auto}
.embed-box{margin-top:40px;padding:22px;border:1px dashed var(--line);border-radius:var(--r-win)}
.embed-box h2{margin:0 0 6px!important;font-size:1.25rem!important}.embed-box textarea{width:100%;margin:12px 0;padding:12px;border-radius:var(--r-ctl);border:1px solid var(--line);background:var(--surface);color:var(--ink);font:.85rem/1.5 var(--f-mono,monospace);resize:vertical}

/* ---- payment badges ---- */
.pm-row{display:inline-flex;flex-wrap:wrap;align-items:center;gap:7px}
.pm{display:inline-grid;place-items:center;line-height:0;filter:drop-shadow(0 4px 8px rgba(0,0,0,.28));transition:transform .25s var(--ease)}
.pm svg{display:block}
.pm-row.sm .pm svg{height:22px;width:auto}
.pm:hover{transform:translateY(-3px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pm-sep{display:inline-block;width:1px;height:26px;margin:0 8px;background:rgba(157,184,255,.35)}
.ft-pay{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}
.ft-bottom{flex-wrap:wrap;gap:14px}
/* payment cards on the order page */
.paycards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.paycard{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:12px 14px 12px 42px;min-height:0;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--surface);color:var(--ink);cursor:pointer;transition:border-color .2s,background-color .2s,box-shadow .2s}
.paycard input{position:absolute;left:14px;top:50%;margin-top:-9px;width:18px;height:18px;accent-color:#ff9f2e}
.paycard b{font-size:.98rem;font-weight:700;margin-right:auto;color:var(--ink)}
.paycard .pc-note{padding:1px 8px;border-radius:999px;background:var(--surface-2,rgba(127,140,180,.14));color:var(--muted);font-size:.74rem;font-weight:600}
.paycard .pm-row{flex-basis:100%}
.paycard:hover{border-color:var(--hov-bd,rgba(255,191,47,.7));background:var(--hov-bg,rgba(255,191,47,.12))}
.paycard:has(input:checked){border-color:#ffbf2f;box-shadow:0 0 0 1px #ffbf2f inset;background:var(--sel-bg,rgba(255,191,47,.2))}
.paycard:has(input:focus-visible){outline:2px solid var(--field);outline-offset:2px}
.paycard .pm svg{height:24px;width:auto}
@media (max-width:620px){.paycards{grid-template-columns:1fr}}
/* ---- home: payment to login ---- */
.flow-sub{margin-top:10px;max-width:56ch;color:var(--muted)}
.flow{gap:20px;margin-top:48px}
.flow::before{top:auto;bottom:auto;display:none}
.flow::after{display:none}
.fstep{position:relative;padding:22px 22px 24px;border-radius:var(--r-win);border:1px solid rgba(157,184,255,.2);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));overflow:hidden;animation:fcard 8s ease-in-out infinite}
.fstep:nth-child(2){animation-delay:2s}.fstep:nth-child(3){animation-delay:4s}.fstep:nth-child(4){animation-delay:6s}
.fstep::after{content:"";position:absolute;top:50%;right:-22px;width:24px;height:2px;background:rgba(157,184,255,.3);animation:fcon 8s linear infinite}
.fstep:nth-child(2)::after{animation-delay:2s}.fstep:nth-child(3)::after{animation-delay:4s}
.fstep:last-child::after{display:none}
.fstep .fno{position:absolute;right:18px;top:14px;font:800 1.5rem var(--f-display);color:rgba(157,184,255,.22);letter-spacing:-.02em}
.fstep .dot{width:58px;height:58px;border-radius:18px;border:1px solid rgba(157,184,255,.45);background:linear-gradient(145deg,#16318f,#0d1c4f);color:#bcd0ff;box-shadow:0 12px 24px -14px rgba(28,79,224,.9);animation:fdot 8s ease-in-out infinite;transition:none}
.fstep:nth-child(2) .dot{animation-delay:2s}.fstep:nth-child(3) .dot{animation-delay:4s}.fstep:nth-child(4) .dot{animation-delay:6s}
.flow.in .fstep .dot{border-color:rgba(157,184,255,.45)}
.fstep h3{margin-top:18px;font-size:1.35rem}
.fstep p{color:#b4c2e6;max-width:none}
@keyframes fcard{0%,26%,100%{border-color:rgba(157,184,255,.2);transform:none}6%,20%{border-color:rgba(255,191,47,.7);transform:translateY(-4px)}}
@keyframes fdot{0%,26%,100%{background:linear-gradient(145deg,#16318f,#0d1c4f);color:#bcd0ff;box-shadow:0 12px 24px -14px rgba(28,79,224,.9)}6%,20%{background:linear-gradient(145deg,#ffd964,#ff9f2e);color:#0a1330;box-shadow:0 0 0 6px rgba(255,191,47,.18),0 16px 30px -12px rgba(255,160,40,.9)}}
@keyframes fcon{0%,18%,30%,100%{background:rgba(157,184,255,.3)}22%,26%{background:#ffbf2f;box-shadow:0 0 12px #ffbf2f}}
.payband{margin-top:26px;display:flex;align-items:center;justify-content:space-between;gap:20px 28px;flex-wrap:wrap;padding:18px 22px;border-radius:var(--r-win);border:1px solid rgba(255,191,47,.35);background:linear-gradient(90deg,rgba(255,191,47,.1),rgba(28,79,224,.12))}
.payband-t{display:grid;gap:2px}.payband-t b{font-family:var(--f-display);font-size:1.15rem}.payband-t span{color:#b4c2e6;font-size:.92rem}
.payband-b{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
@media (max-width:1060px){.fstep::after{display:none}}
@media (prefers-reduced-motion:reduce){.fstep,.fstep .dot,.fstep::after{animation:none}}

.pay-strip{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:22px;color:var(--muted);font-size:.9rem}
.pay-strip>span:first-child{font-weight:600;margin-right:4px}
.cta-band .pay-strip{color:#b4c2e6}

/* price panel: old price struck through on the same line as the new price, with a short entrance */
.dk .pr{margin-top:0;padding:18px 12px 14px;border-radius:20px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));text-align:center;overflow:hidden}
.t-business .pr{border-color:rgba(255,191,47,.55);background:linear-gradient(180deg,rgba(255,191,47,.16),rgba(255,191,47,.03))}
.dk .pr-row{display:flex;justify-content:center;align-items:baseline;flex-wrap:nowrap;gap:8px;animation:prIn .55s var(--ease) both}
.dk .pr-old{position:relative;grid-column:auto;order:-1;font-size:1.2rem;font-weight:700;letter-spacing:-.02em;color:#ff8ea8;text-decoration:none;white-space:nowrap}
.dk .pr-old::after{content:"";position:absolute;left:-3px;right:-3px;top:52%;height:2.5px;border-radius:2px;background:#ff5f86;transform:scaleX(0);transform-origin:left;animation:strike .5s .45s var(--ease) forwards}
.dk .pr-n{font-size:2.6rem;line-height:1;white-space:nowrap}
.dk .pr-u{font-size:.95rem;color:#aab5d8;font-weight:600}
.dk .pr-bill{margin-top:12px;justify-content:center;text-align:center;gap:6px 8px;font-size:.84rem}
.dk .pr .save-pill{animation:svPulse 2.8s ease-in-out 1s infinite}
@keyframes prIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes strike{to{transform:scaleX(1)}}
@keyframes svPulse{0%,100%{box-shadow:0 0 0 0 rgba(126,224,168,0)}50%{box-shadow:0 0 0 5px rgba(126,224,168,.16)}}
@media (prefers-reduced-motion:reduce){.dk .pr-row,.dk .pr-old::after,.dk .pr .save-pill{animation:none}.dk .pr-old::after{transform:scaleX(1)}}

/* plan cards: sections never shrink into each other, and the price panel keeps a gap under the point list */
.dk>*{flex-shrink:0}
.dk .al{flex:1 0 auto}
.dk .pns{margin-bottom:18px}
.dk .pr{position:relative;z-index:1}
.dk .kp{padding-bottom:2px}
.dk .pr{padding-left:8px;padding-right:8px}
.dk .pr-row{gap:6px}
.dk .pr-n{font-size:2.35rem}
.dk .pr-old{font-size:1.1rem}
/* price panel fit: one line for the price, one line for the saving, at every card width */
.dk .pr{padding-left:6px;padding-right:6px}
.dk .pr-row{gap:5px;max-width:100%}
.dk .pr-n{font-size:2.1rem;letter-spacing:-.045em}
.dk .pr-old{font-size:1rem}
.dk .pr-u{font-size:.85rem}
.dk .pr-bill{flex-wrap:nowrap;white-space:nowrap;gap:6px;font-size:.82rem}
.dk .pr-bill .save-pill{flex:none;padding:3px 8px;font-size:.72rem}

/* very narrow phones: keep logo, theme button, Order now and the menu button inside the capsule */
@media (max-width:430px){
  .nav .wrap{gap:8px;padding-left:16px;padding-right:8px}
  .nav .logo span{font-size:1.02rem}
  .nav-end{gap:6px}
  .nav-end .icon-btn{width:36px;height:36px;margin-right:0}
  .nav-end .btn-primary{padding:0 14px}
  .nav-end .btn-primary .ph{display:none}
}

/* call-to-action band: "Deploy RDP in minutes" with a timer ring */
.cta-band .inner{grid-template-columns:minmax(0,1fr) auto;gap:28px 40px}
.cta-band h2{max-width:none;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.05}
.cta-copy p{margin-top:10px;color:#cfdcff;font-size:1.1rem}
.cta-band .hl{position:relative;display:inline-block;color:#ffbf2f;white-space:nowrap}
.cta-band .hl::after{content:"";position:absolute;left:0;right:0;bottom:-.1em;height:.12em;border-radius:6px;background:#ffbf2f;transform:scaleX(0);transform-origin:left;animation:hlDraw 1.1s .3s var(--ease) forwards}
.cta-act{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.stopwatch{position:relative;display:grid;place-items:center;width:76px;height:76px;flex:none}
.stopwatch svg{position:absolute;inset:0}
.sw-ring{stroke-dasharray:201;stroke-dashoffset:201;animation:swRing 6s linear infinite}
.sw-i{font-size:1.5rem;color:#fff}
@keyframes swRing{from{stroke-dashoffset:201}to{stroke-dashoffset:0}}
@keyframes hlDraw{to{transform:scaleX(1)}}
@media (max-width:760px){.cta-band .inner{grid-template-columns:1fr}.cta-act{gap:16px}}
@media (prefers-reduced-motion:reduce){.sw-ring{animation:none;stroke-dashoffset:0}.cta-band .hl::after{animation:none;transform:scaleX(1)}}

/* menu sidebar: the deploy promise sits at the top */
.mp-fast{display:flex;align-items:center;gap:12px;margin:0 0 22px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff;text-decoration:none;transition:background-color .2s,border-color .2s,transform .25s var(--ease)}
.mp-fast:hover,.mp-fast:focus-visible{background:rgba(255,191,47,.2);border-color:#ffbf2f;transform:translateY(-2px)}
.mp-fast-t{display:grid;gap:2px;line-height:1.2}.mp-fast-t b{font-size:1.02rem;font-weight:800}.mp-fast-t small{color:#d6e3ff;font-size:.8rem}
.mp-fast .hl{color:#ffbf2f;position:relative;white-space:nowrap}
.mp-fast .hl::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:2px;background:#ffbf2f;transform:scaleX(0);transform-origin:left;animation:hlDraw 1s .3s var(--ease) forwards}
.stopwatch.sm{width:44px;height:44px}.stopwatch.sm .sw-i{font-size:1.05rem}
@media (prefers-reduced-motion:reduce){.mp-fast .hl::after{animation:none;transform:scaleX(1)}}

/* ---- customer journey: a line with five stops and a packet that travels it ---- */
.flow-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px 48px;align-items:center}
.flow-head h2{max-width:16ch}
.paypanel{padding:20px 22px;border-radius:var(--r-win);border:1px solid rgba(255,191,47,.4);background:linear-gradient(135deg,rgba(255,191,47,.1),rgba(28,79,224,.14))}
.pp-t{display:block;font:800 1.2rem var(--f-display);margin-bottom:12px}
.pp-rows{display:grid;gap:10px}.pp-r{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.pp-r .pm svg{height:30px;width:auto}
.pp-l{color:#b4c2e6;font-size:.82rem;font-weight:600;margin-right:2px}
.pp-n{display:block;margin-top:12px;color:#b4c2e6;font-size:.86rem}
.flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 18px;margin-top:64px;position:relative}
.flow .flow-line{position:absolute;left:10%;right:10%;top:32px;height:3px;border-radius:3px;background:rgba(157,184,255,.22);overflow:hidden}
.flow .flow-line::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#1c4fe0,#ffbf2f);transform:scaleX(0);transform-origin:left;animation:jFill 10s linear infinite}
.flow .flow-pkt{position:absolute;top:2px;left:10%;width:64px;height:40px;margin-left:-32px;z-index:2;animation:jPkt 10s linear infinite;filter:drop-shadow(0 8px 12px rgba(0,0,0,.45))}
.flow .flow-pkt img{display:block;width:64px;height:40px}
.flow .fstep{padding:0;border:0;background:none;border-radius:0;overflow:visible;text-align:center;animation:none;display:flex;flex-direction:column;align-items:center}
.flow .fstep::before,.flow .fstep::after,.flow .fstep .fno{display:none}
.flow .fstep .dot{width:64px;height:64px;border-radius:50%;position:relative;z-index:1;font-size:1.6rem;background:#0b1647;border:2px solid rgba(157,184,255,.5);color:#bcd0ff;box-shadow:none;animation:jDot 10s ease-in-out infinite}
.flow .fstep:nth-of-type(1) .dot,.flow .fstep:nth-of-type(1) h3,.flow .fstep:nth-of-type(1) p{animation-delay:0s}
.flow .fstep:nth-of-type(2) .dot,.flow .fstep:nth-of-type(2) h3,.flow .fstep:nth-of-type(2) p{animation-delay:2s}
.flow .fstep:nth-of-type(3) .dot,.flow .fstep:nth-of-type(3) h3,.flow .fstep:nth-of-type(3) p{animation-delay:4s}
.flow .fstep:nth-of-type(4) .dot,.flow .fstep:nth-of-type(4) h3,.flow .fstep:nth-of-type(4) p{animation-delay:6s}
.flow .fstep:nth-of-type(5) .dot,.flow .fstep:nth-of-type(5) h3,.flow .fstep:nth-of-type(5) p{animation-delay:8s}
.flow .fstep h3{margin-top:18px;font-size:1.3rem;animation:jTxt 10s ease-in-out infinite}
.flow .fstep p{margin-top:8px;max-width:24ch;color:#b4c2e6;font-size:.94rem;animation:jTxt 10s ease-in-out infinite}
@keyframes jFill{0%{transform:scaleX(0)}80%,100%{transform:scaleX(1)}}
@keyframes jPkt{0%{left:10%;opacity:1}80%{left:90%;opacity:1}90%,100%{left:90%;opacity:0}}
@keyframes jDot{0%,17%,100%{background:#0b1647;border-color:rgba(157,184,255,.5);color:#bcd0ff;box-shadow:none;transform:none}2%,14%{background:linear-gradient(145deg,#ffd964,#ff9f2e);border-color:#ffbf2f;color:#0a1330;box-shadow:0 0 0 8px rgba(255,191,47,.18),0 14px 30px -10px rgba(255,160,40,.9);transform:scale(1.1)}}
@keyframes jTxt{0%,17%,100%{opacity:.55}2%,14%{opacity:1}}
@media (max-width:1060px){.flow-head{grid-template-columns:1fr}.flow{grid-template-columns:1fr;gap:26px;margin-top:40px;padding-left:0}.flow .flow-line,.flow .flow-pkt{display:none}.flow .fstep{flex-direction:row;text-align:left;align-items:flex-start;gap:16px}.flow .fstep h3{margin-top:0}.flow .fstep>*:not(.dot){grid-column:2}.flow .fstep p{max-width:none}}
@media (prefers-reduced-motion:reduce){.flow .flow-line::after{animation:none;transform:scaleX(1)}.flow .flow-pkt{animation:none;display:none}.flow .fstep .dot,.flow .fstep h3,.flow .fstep p{animation:none;opacity:1}.flow .fstep .dot{background:linear-gradient(145deg,#16318f,#0d1c4f)}}

/* ---- Remi explains each section (assets/mascot-notes.js) ---- */
.mc-row{display:flex;align-items:center;justify-content:space-between;gap:20px}
.mc-row>h2{flex:1 1 auto;min-width:0}
.mc-note{display:flex;align-items:flex-end;gap:6px;flex:none;margin-bottom:-6px}
.mc-say{position:relative;max-width:190px;margin-bottom:34px;padding:9px 13px;border-radius:14px;background:#fff;color:#0a1330;font:600 .86rem/1.3 var(--f-ui);box-shadow:0 10px 22px -10px rgba(0,0,0,.5);animation:mcSay 5s ease-in-out infinite}
.mc-say::after{content:"";position:absolute;right:-5px;bottom:12px;width:11px;height:11px;background:#fff;transform:rotate(45deg)}
.mc-note img{display:block;width:132px;height:118px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.35))}
@keyframes mcSay{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (max-width:980px){.mc-note{display:none}}
/* mascot in page headers and the call-to-action band */
.head-mc{position:absolute;right:0;bottom:-6px;width:132px;height:auto;pointer-events:none}
@media (max-width:900px){.head-mc{display:none}}
.cta-band{position:relative;overflow:hidden}
.cta-mc{position:absolute;right:3%;bottom:0;width:150px;height:auto;pointer-events:none;filter:drop-shadow(0 -6px 16px rgba(0,0,0,.35))}
@media (min-width:1100px){.cta-band .inner{padding-right:190px}}
@media (max-width:1099px){.cta-mc{display:none}}
@media (prefers-reduced-motion:reduce){.mc-say{animation:none}}
/* contrast on the bright blue pills and cards */
.from.rdp,.from.rdp *{color:#fff}
.oc.best,.oc.best *{color:#fff}
.oc.best{background:#2347c9}
.mp-side{--muted:#e6edff}
.mp-side p,.mp-side .mp-pop span,.mp-side small,.mp-fast-t small{color:#eef3ff}
.mp-side .mp-pop span{opacity:.95}
.mp-side p,.mp-side .mp-pop span,.mp-side small,.mp-fast-t small,.mp-side h3{color:#fff}
.mp-side,.mp-side.alt{background-color:#1a3a9e;background-image:linear-gradient(160deg,#2e51c1,#1a3a9e)!important}
.mp-side :where(a,button,span,small,b,p,h3):not(.btn):not(.btn *){color:#fff}

/* plans at a glance: plan rows with spec chips, a big price and an Order button */
.kp-wrap{overflow:visible;border:0;background:none}
.kp-table,.kp-table tbody{display:block;width:100%}
.kp-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.kp-table tbody{display:grid;gap:12px}
.kp-table tr.kp-row{position:relative;display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,auto) auto auto;align-items:center;gap:10px 18px;padding:16px 20px;border:1px solid var(--line);border-radius:var(--r-win);background:var(--surface);transition:border-color .2s,transform .25s var(--ease),box-shadow .25s,background-color .2s;overflow:hidden}
.kp-table tr.kp-row::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,191,47,.16) 50%,transparent 65%);transform:translateX(-110%);transition:transform .7s var(--ease);pointer-events:none}
.kp-table tr.kp-row:hover{border-color:var(--hov-bd,rgba(255,191,47,.7));transform:translateY(-3px);box-shadow:0 18px 34px -22px rgba(10,19,48,.5);background:var(--hov-bg,rgba(255,191,47,.1))}
.kp-table tr.kp-row:hover::before{transform:translateX(110%)}
.kp-table tr.kp-row.best{border-color:rgba(255,191,47,.65);background:linear-gradient(90deg,rgba(255,191,47,.14),rgba(28,79,224,.08))}
.kp-table th,.kp-table td{display:block;padding:0;border:0;white-space:normal;text-align:left}
.kp-table tbody th{display:grid;gap:3px;justify-items:start}
.kp-name{font:800 1.15rem var(--f-display);letter-spacing:-.01em}
.kp-id{color:var(--muted);font-size:.78rem}
.kp-badge{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:999px;background:linear-gradient(135deg,#ffd964,#ff9f2e);color:#0a1330;font:800 .68rem var(--f-ui);font-style:normal;letter-spacing:.05em;text-transform:uppercase}
.kp-badge.soft{background:rgba(10,19,48,.9);color:#ffd36e;box-shadow:inset 0 0 0 1px rgba(255,191,47,.55)}
.kp-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:var(--surface-2,rgba(127,140,180,.14));font-weight:600;font-size:.88rem;white-space:nowrap}
.kp-chip .ph{color:var(--field);font-size:1.05rem}
.kp-pr{display:flex;align-items:baseline;gap:4px;white-space:nowrap}.kp-pr b{font:800 1.7rem var(--f-display);letter-spacing:-.03em}.kp-pr small{color:var(--muted);font-weight:600}
.kp-go .btn{white-space:nowrap}
@media (max-width:980px){
  .kp-table tr.kp-row{grid-template-columns:1fr 1fr;gap:12px 14px;padding:16px}
  .kp-table tbody th{grid-column:1/-1}
  .kp-table td[data-l]:not(.kp-pr){display:block}
  .kp-chip{font-size:.84rem;padding:6px 10px}
  .kp-pr{grid-column:1;align-self:center}.kp-go{grid-column:2;justify-self:end}
}
@media (max-width:520px){.kp-table tr.kp-row{grid-template-columns:repeat(3,auto);justify-content:start}.kp-table td[data-l]:not(.kp-pr){grid-column:auto}.kp-pr{grid-column:1/3}.kp-go{grid-column:3}.kp-chip{padding:5px 8px;font-size:.8rem}}
@media (prefers-reduced-motion:reduce){.kp-table tr.kp-row::before{display:none}.kp-table tr.kp-row:hover{transform:none}}

/* Remi takes less room: she overlaps upward into the section padding, and on the plan box she sits on its top-right corner */
.mc-note{margin:-44px 0 -4px}
.mc-note img{width:112px;height:100px}
.mc-say{margin-bottom:26px;max-width:170px;font-size:.82rem}
.mc-note.corner{position:absolute;right:22px;bottom:100%;margin:0 0 -6px;z-index:3;pointer-events:none}
.mc-note.corner .mc-say{margin-bottom:18px}
@media (max-width:980px){.mc-note.corner{display:flex;right:14px}.mc-note.corner .mc-say{display:none}.mc-note.corner img{width:84px;height:75px}}
.kp-table .kp-go .btn,.kp-table .kp-go .btn:hover{color:#0a1330;text-decoration:none}
.kp-badge{font-size:.72rem}
.kp-badge.soft{background-image:none;background-color:#0a1330}

/* one Remi, right next to its heading, never overlapping what follows */
.mc-row{justify-content:flex-start;gap:18px;flex-wrap:wrap}
.mc-row>h2{flex:0 1 auto}
.mc-note{margin:0}
.mc-note img{width:96px;height:86px}
.mc-say{margin-bottom:22px;max-width:190px}

/* heading Remi: small, right beside the heading, her speech bubble on her right */
.mc-row{align-items:flex-end;gap:14px}
.mc-row>.mc-note:not(.corner){align-items:center;gap:8px;margin:0 0 4px}
.mc-row>.mc-note:not(.corner) img{width:76px;height:68px;order:0}
.mc-row>.mc-note:not(.corner) .mc-say{order:1;margin:0;max-width:210px;font-size:.84rem;animation:none}
.mc-row>.mc-note:not(.corner) .mc-say::after{right:auto;left:-5px;bottom:auto;top:calc(50% - 5px)}
/* spacing under section headings that sit above plan rows */
.region-h+.kp-wrap,h2+.kp-wrap,.mc-row+.kp-wrap{margin-top:22px}
.region-h{margin-bottom:0}
.kp-wrap{margin-top:22px}

/* the plan-box corner Remi needs headroom above the box */
.dk-top:has(.mc-note.corner){margin-top:78px}

/* live chat button (home page) */
.chat-fab{position:fixed;right:18px;bottom:18px;z-index:60;display:inline-flex;align-items:center;gap:10px;padding:8px 18px 8px 8px;border-radius:999px;background:linear-gradient(135deg,#ffd964,#ffbf2f 55%,#ff9f2e);color:#0a1330;text-decoration:none;box-shadow:0 16px 34px -12px rgba(255,160,40,.85),0 0 0 1px rgba(255,255,255,.3) inset;transition:transform .25s var(--ease),box-shadow .25s;animation:chatIn .7s .8s var(--ease) both}
.chat-fab:hover,.chat-fab:focus-visible{transform:translateY(-3px);box-shadow:0 20px 40px -12px rgba(255,160,40,.95)}
.chat-av{position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#0a1330;color:#ffd36e;font-size:1.35rem}
.chat-dot{position:absolute;right:1px;top:1px;width:11px;height:11px;border-radius:50%;background:#2fd37d;border:2px solid #0a1330;animation:chatPulse 2s ease-in-out infinite}
.chat-t{display:grid;line-height:1.15}.chat-t b{font:800 1rem var(--f-ui)}.chat-t small{font-size:.76rem;font-weight:600;opacity:.8}
@keyframes chatIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes chatPulse{0%,100%{box-shadow:0 0 0 0 rgba(47,211,125,.55)}50%{box-shadow:0 0 0 6px rgba(47,211,125,0)}}
@media (max-width:560px){.chat-fab{right:12px;bottom:12px;padding:6px}.chat-t{display:none}}
@media (prefers-reduced-motion:reduce){.chat-fab,.chat-dot{animation:none}}

/* pinned at the top of the hero slider */
.hs-fast{display:inline-flex;align-items:center;gap:12px;margin:0 0 18px;padding:8px 18px 8px 10px;border-radius:999px;background:rgba(255,191,47,.14);border:1px solid rgba(255,191,47,.6);color:#fff;text-decoration:none;transition:background-color .2s,transform .25s var(--ease)}
.hs-fast:hover,.hs-fast:focus-visible{background:rgba(255,191,47,.26);transform:translateY(-2px)}
.hs-fast-t{display:grid;line-height:1.2}.hs-fast-t b{font:800 1.02rem var(--f-ui)}.hs-fast-t small{color:#d6e3ff;font-size:.78rem}
.hs-fast .hl{color:#ffbf2f;position:relative;white-space:nowrap}
.hs-fast .hl::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:2px;background:#ffbf2f;transform:scaleX(0);transform-origin:left;animation:hlDraw 1s .4s var(--ease) forwards}
.hs-fast>.ph{color:#ffbf2f}
@media (prefers-reduced-motion:reduce){.hs-fast .hl::after{animation:none;transform:scaleX(1)}}

/* "Deploy RDP in minutes": a tab docked to the top-left of the demo window, driven by the demo (assets/deploy-sync.js) */
.dx{display:none}
@media (min-width:1060px){
  .hs .hs-fast{display:none}
  .dx{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;position:relative;width:min(560px,100%);margin:0;transform:translateY(-66px);padding:9px 18px 9px 12px;z-index:4;color:#fff;text-decoration:none;border:1px solid rgba(157,184,255,.3);border-bottom:0;border-radius:18px 18px 0 0;background:linear-gradient(180deg,#16255a,#0f1a3d);box-shadow:0 -14px 34px -16px rgba(28,79,224,.7)}
  .dx:hover .dx-t{color:#ffe29a}
}
.dx-ring{position:relative;display:grid;place-items:center;width:46px;height:46px}
.dx-ring svg{position:absolute;inset:0}
.dx-fg{stroke-dashoffset:107}
.dx-n{font:800 1.02rem var(--f-display);font-variant-numeric:tabular-nums}
.dx-body{display:grid;gap:5px;min-width:0}
.dx-t{font:800 1.08rem var(--f-ui);white-space:nowrap}
.dx .hl{color:#ffbf2f;position:relative;white-space:nowrap}
.dx-steps{display:flex;align-items:center;gap:6px}
.dx-steps i{font:700 .72rem var(--f-ui);font-style:normal;letter-spacing:.03em;color:#b4c2e6;padding:2px 9px;border-radius:999px;border:1px solid rgba(157,184,255,.25);transition:background-color .3s,color .3s,border-color .3s}
.dx-steps i.done{color:#0a1330;background:#7ee0a8;border-color:#7ee0a8}
.dx-steps i.on{color:#0a1330;background:#ffbf2f;border-color:#ffbf2f;animation:dxOn 1.4s ease-in-out infinite}
.dx-live{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.08);font:600 .8rem var(--f-ui);white-space:nowrap}
.dx-live em{font-style:normal}
.dx-dot{width:9px;height:9px;border-radius:50%;background:#ffbf2f;animation:chatPulse 1.6s ease-in-out infinite}
.dx.ready .dx-dot{background:#2fd37d}
@keyframes dxOn{0%,100%{box-shadow:0 0 0 0 rgba(255,191,47,.5)}50%{box-shadow:0 0 0 5px rgba(255,191,47,0)}}
@media (prefers-reduced-motion:reduce){.dx-steps i.on,.dx-dot{animation:none}}

.dx-n{font-size:.86rem}

/* WHMCS connected: the order page only plans the server; hostname, password and account details are collected at WHMCS checkout */
/* server details (hostname, password, SSH key) stay here and travel to WHMCS; account and payment are taken at WHMCS checkout */
.whmcs-live #orderMain section.block:has(#fname),.whmcs-live #orderMain section.block:has(.paycards){display:none}
.whmcs-live .sum-due+.fine,.whmcs-live #payBox{display:none}

/* ---------- client area sign in (WHMCS login.tpl): brand panel + form ---------- */
.rb-login{--surface:#0d1a42;--surface-2:#182a60;--line:#2b3e7c;--ink:#f1f5ff;--muted:#b9c6ef;--field:#a9c0ff;--ok:#5fd6a0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);max-width:1020px;margin:8px auto 96px;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow-win)}
.rbl-brand{position:relative;padding:40px 36px;color:#fff;background:linear-gradient(160deg,#2e51c1,#0f2f9e);display:flex;flex-direction:column;gap:14px;overflow:hidden}
.rbl-brand::after{content:"";position:absolute;right:-90px;bottom:-90px;width:300px;height:300px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,191,47,.28),transparent);pointer-events:none}
.rbl-mc{width:132px;height:132px;margin:-6px 0 -4px -6px;align-self:flex-start}
.rbl-brand h1{font-size:2.1rem;line-height:1.05;font-weight:800;color:#fff}
.rbl-brand>p{color:#eef3ff;font-size:1rem;line-height:1.5;max-width:34ch}
.rbl-points{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:14px;position:relative;z-index:1}
.rbl-points li{display:flex;gap:12px;align-items:flex-start}
.rbl-points .ph{flex:none;width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:1.25rem;color:#ffd978}
.rbl-points span{display:flex;flex-direction:column;font-size:.9rem;color:#e6edff;line-height:1.35}
.rbl-points b{color:#fff;font-size:1rem}
.rbl-form{padding:40px 40px 28px;display:flex;flex-direction:column;justify-content:center;gap:14px;background:var(--surface);color:var(--ink)}
.rbl-card h2{font-size:1.7rem;font-weight:800;color:var(--ink)}
.rbl-sub{color:var(--muted);margin:2px 0 18px}
.rbl-card .field label{display:flex;justify-content:space-between;align-items:baseline}
.rbl-forgot{font-size:.85rem;font-weight:600;color:var(--field)}
.rbl-in{position:relative}
.rbl-in>.ph{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:1.15rem;pointer-events:none}
.rbl-in input{width:100%;padding-left:44px;padding-right:44px;min-height:48px}
.rbl-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;display:grid;place-items:center;font-size:1.15rem}
.rbl-eye:hover,.rbl-eye:focus-visible{background:var(--surface-2);color:var(--ink)}
.rbl-remember{margin:2px 0 16px}
.rbl-go{width:100%;min-height:50px;justify-content:center}
.rbl-new{text-align:center;margin-top:16px;color:var(--muted);font-size:.95rem}
.rbl-new a{font-weight:700;color:var(--field)}
.rbl-safe{display:flex;gap:8px;align-items:center;justify-content:center;color:var(--muted);font-size:.82rem;margin:6px 0 0}
.rbl-safe .ph{color:var(--ok);font-size:1.1rem}
.rbl-card .alert{display:flex;gap:8px;align-items:center;border-radius:10px;margin-bottom:14px}
@media (max-width:820px){.rb-login{grid-template-columns:1fr;margin-bottom:64px}.rbl-brand{padding:26px 22px}.rbl-mc{width:88px;height:88px}.rbl-brand h1{font-size:1.6rem}.rbl-points{display:none}.rbl-form{padding:26px 22px 22px}}

/* top bar: help and account links on the right, as most hosting sites do */
.ann-links{display:flex;align-items:center;gap:2px;padding-left:12px;margin-left:4px;border-left:1px solid rgba(255,255,255,.18)}
.ann-links a{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:var(--r-pill);color:#dbe4ff;font-size:.8rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:background-color .15s,color .15s}
.ann-links a:hover{background:rgba(255,255,255,.12);color:#fff}
.ann-links .ph{font-size:.95rem;color:#8fb0ff}
.ann-links a.ann-signin{border:1px solid rgba(255,255,255,.3);color:#fff;margin-left:4px}
.ann-links a.ann-signin:hover{background:#fff;color:var(--field)}.ann-links a.ann-signin:hover .ph{color:var(--field)}
@media (max-width:1100px){.ann-links a:not(.ann-signin) span{display:none}.ann-links a:not(.ann-signin){padding:0 8px}}
@media (max-width:720px){.ann-ctl{display:none}.ann-ico{display:none}.ann-in{grid-template-columns:minmax(0,1fr) auto;padding:0 12px;gap:8px}.ann-msgs{overflow:hidden;justify-items:start}.ann-msg{justify-content:flex-start}.ann-msg a,.ann-msg>.ph{display:none}.ann-links{padding-left:8px;margin-left:0}.ann-links{display:none}}

/* Cart icon in the menu bar; the WHMCS pages add the item count */
.nav-end .cartbtn{position:relative;color:var(--ink);text-decoration:none}
.cartbtn .cart-n{position:absolute;top:-5px;right:-5px;display:grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:.7rem;font-weight:800;line-height:1;box-shadow:0 0 0 2px var(--surface)}

/* Signed in: "Client area" with the customer's initial, in the brand blue, and a soft swap when the state changes */
.nav-end .clientbtn .cb-in{display:inline-flex;align-items:center;gap:8px}
.nav-end .clientbtn.is-in{padding-left:6px!important;color:var(--field)!important;font-weight:700;
  background:linear-gradient(color-mix(in srgb,var(--field) 9%,var(--surface)),color-mix(in srgb,var(--field) 9%,var(--surface))) padding-box,linear-gradient(125deg,#8fb0ff,rgba(143,176,255,.25) 55%,rgba(255,191,47,.85)) border-box}
.nav-end .clientbtn.is-in:hover{background:linear-gradient(color-mix(in srgb,var(--field) 15%,var(--surface)),color-mix(in srgb,var(--field) 15%,var(--surface))) padding-box,linear-gradient(125deg,#bcd0ff,rgba(143,176,255,.4) 55%,#ffd36e) border-box}
.cb-ava{position:relative;display:inline-grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#3463ea,#1c4fe0 60%,#0f2f9e);color:#fff;font-family:var(--f-display);font-size:.86rem;font-weight:800;line-height:1;box-shadow:0 4px 10px -4px rgba(28,79,224,.7)}
.cb-ava::after{content:"";position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:#2fcf86;box-shadow:0 0 0 2px var(--surface)}
.nav-end .acct.is-in{padding:0;overflow:visible}
.nav-end .acct.is-in .cb-ava{width:32px;height:32px}
.clientbtn.cb-swap .cb-in{animation:cbIn .45s var(--ease) both}
.clientbtn.cb-swap .cb-ava{animation:cbAva .6s var(--ease) both}
.clientbtn.cb-swap .cb-ava::after{animation:cbDot 1.4s ease-out .3s both}
@keyframes cbIn{from{opacity:0;transform:translateY(6px);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
@keyframes cbAva{0%{transform:scale(.4) rotate(-20deg)}60%{transform:scale(1.1) rotate(4deg)}100%{transform:none}}
@keyframes cbDot{0%{box-shadow:0 0 0 2px var(--surface),0 0 0 2px rgba(47,207,134,.6)}100%{box-shadow:0 0 0 2px var(--surface),0 0 0 10px rgba(47,207,134,0)}}
/* cart count pops in when it changes */
.cartbtn .cart-n{animation:cbPop .4s var(--ease) both}
@keyframes cbPop{0%{transform:scale(.3)}70%{transform:scale(1.15)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.clientbtn.cb-swap .cb-in,.clientbtn.cb-swap .cb-ava,.clientbtn.cb-swap .cb-ava::after,.cartbtn .cart-n{animation:none}}
.cb-ava.has-img{background-size:cover;background-position:center;color:transparent}

/* Cookie choice (Europe/UK only), bottom left, out of the way */
.rb-consent{position:fixed;left:16px;bottom:16px;z-index:9000;display:flex;flex-direction:column;gap:12px;max-width:380px;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);box-shadow:0 20px 50px -16px rgba(10,19,48,.45);font-size:.88rem;line-height:1.5;animation:rbConsentIn .3s var(--ease)}
.rb-consent p{margin:0;color:var(--muted)}.rb-consent b{display:block;color:var(--ink);font-size:.95rem;margin-bottom:2px}
.rb-consent a{color:var(--field);font-weight:600}
.rb-consent div{display:flex;gap:8px;justify-content:flex-end}
.rb-consent .btn{min-height:38px}
@keyframes rbConsentIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:520px){.rb-consent{left:10px;right:10px;bottom:10px;max-width:none}}
@media (prefers-reduced-motion:reduce){.rb-consent{animation:none}}

/* footer: brand profiles */
.ft-social{display:flex;gap:10px;margin-top:18px}
.ft-social a{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid rgba(169,192,255,.25);background:rgba(255,255,255,.05);color:#c9d6ff;font-size:1.2rem;text-decoration:none;transition:background .15s,color .15s,border-color .15s}
.ft-social a:hover{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,191,47,.6)}

/* Announcement controls: one slim pill, chevrons and dots; the current dot is wider and fills with the message timer */
.ann-ctl{gap:2px;height:28px;padding:0 3px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.06);backdrop-filter:blur(6px)}
.ann-ctl .ann-b{width:22px;height:22px;border:0;border-radius:50%;background:transparent;color:#c9d6ff;font-size:.78rem;transition:background-color .15s,color .15s}
.ann-ctl .ann-b:hover{background:rgba(255,255,255,.14);color:#fff}
.ann-ctl .ann-b:focus-visible,.ann-dot:focus-visible{outline:2px solid #ffbf2f;outline-offset:1px}
.ann-dots{display:flex;align-items:center;gap:5px;padding:0 4px}
.ann-dot{position:relative;width:6px;height:6px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.32);cursor:pointer;overflow:hidden;transition:width .35s var(--ease),background-color .2s}
.ann-dot:hover{background:rgba(255,255,255,.6)}
.ann-dot::after{content:"";position:absolute;inset:-8px -3px}
.ann-dot.on{width:22px;background:rgba(255,255,255,.22)}
.ann-dot i{position:absolute;inset:0;border-radius:inherit;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#ffd964,#ffbf2f)}
.ann-dot.on i{animation:annFill 6s linear forwards}
.ann.paused .ann-dot.on i{animation-play-state:paused}
.ann-count.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.ann-dot.on i{animation:none;transform:scaleX(1)}.ann-dot{transition:none}}

/* Performance and accessibility pass (PageSpeed): */
/* footer packet line and plan-section beam move with transform (GPU) instead of left */
.pktline i{left:0;animation-name:pktT}
@keyframes pktT{from{transform:translateX(-60px)}to{transform:translateX(100vw)}}
.stage-fx i{left:-45%;animation-name:beamT}
@keyframes beamT{from{transform:translateX(0) skewX(-18deg)}to{transform:translateX(562.5%) skewX(-18deg)}}
/* footer watermark: drawn by CSS, so it is decoration rather than low-contrast text */
.ft-mark::before{content:"rdp-buy.com"}
/* hero highlight dots and "Get this plan": 24px+ tap areas, same look */
.hs-nav{gap:10px}
.hs-dot{height:24px;background:none;overflow:visible}
.hs-dot::before{content:"";position:absolute;left:0;right:0;top:9px;height:6px;border-radius:var(--r-pill);background:rgba(255,255,255,.22);transition:background-color .2s}
.hs-dot:hover{background:none}.hs-dot:hover::before{background:rgba(255,255,255,.4)}
.hs-dot i{top:9px;bottom:auto;height:6px;border-radius:var(--r-pill)}
.hs-link{min-height:32px;padding:4px 0}

/* Top bar as frosted glass: see-through tint, strong blur, light sheen and highlight edges */
.ann{background-color:rgba(12,24,70,.5);background-image:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.02) 55%,rgba(255,255,255,0)),linear-gradient(90deg,rgba(47,91,255,.22),rgba(255,255,255,.04) 46%,rgba(255,191,47,.14));
  -webkit-backdrop-filter:blur(22px) saturate(1.8);backdrop-filter:blur(22px) saturate(1.8);border-bottom:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(255,255,255,.05),0 8px 24px -16px rgba(10,19,48,.55)}
.ann-msg span{text-shadow:0 1px 1px rgba(5,10,35,.35)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.ann{background-color:rgba(12,24,70,.9)}}
/* message controls: tiny and faint until you reach for them */
.ann-ctl{height:20px;padding:0 2px;gap:0;border:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;opacity:.38;transition:opacity .25s}
.ann:hover .ann-ctl,.ann-ctl:focus-within{opacity:.9}
.ann-ctl .ann-b{width:16px;height:16px;font-size:.66rem;color:#dbe5ff}
.ann-ctl .ann-b:hover{background:rgba(255,255,255,.14)}
.ann-dots{gap:4px;padding:0 3px}
.ann-dot{width:4px;height:4px;background:rgba(255,255,255,.5)}
.ann-dot.on{width:12px;background:rgba(255,255,255,.25)}
.ann-dot::after{inset:-10px -3px}

/* Menu buttons: cart and Sign in get Order now's polish. Frosted-blue glass, a hover lift with a glint,
   and one shared glint every 7 seconds that runs cart -> Sign in -> Order now. The glint is a gradient drawn
   inside each button's own shape, so the cart's count badge is never clipped. */
.nav-end .clientbtn,.nav-end .cartbtn,.nav-end .acct{position:relative;isolation:isolate;
  background-image:linear-gradient(160deg,#ffffff 0%,#eef3ff 55%,#e3ebff 100%),linear-gradient(125deg,#8fb0ff,rgba(143,176,255,.25) 55%,rgba(255,191,47,.9))!important;
  box-shadow:0 8px 18px -12px rgba(28,79,224,.55),inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),filter .2s}
.nav-end .clientbtn:hover,.nav-end .cartbtn:hover,.nav-end .acct:hover{transform:translateY(-1px);box-shadow:0 12px 24px -12px rgba(28,79,224,.65),inset 0 1px 0 #fff;
  background-image:linear-gradient(160deg,#ffffff 0%,#e6eeff 55%,#d8e4ff 100%),linear-gradient(125deg,#bcd0ff,rgba(143,176,255,.45) 55%,#ffd36e)!important}
.nav-end .clientbtn:active,.nav-end .cartbtn:active{transform:translateY(0) scale(.98)}
.nav-end .clientbtn::before,.nav-end .cartbtn::before,.nav-end .acct::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 36%,rgba(120,160,255,.28) 45%,rgba(255,255,255,.95) 50%,rgba(120,160,255,.28) 55%,transparent 64%) no-repeat;background-size:260% 100%;background-position:130% 0;
  animation:navGlint 7s ease-in-out infinite}
.nav-end .clientbtn:hover::before,.nav-end .cartbtn:hover::before,.nav-end .acct:hover::before{animation:navGlintNow .8s var(--ease) 1}
.nav-end .cartbtn::before{animation-delay:0s}.nav-end .clientbtn::before{animation-delay:.18s}
@keyframes navGlint{0%,78%{background-position:130% 0}100%{background-position:-30% 0}}
@keyframes navGlintNow{from{background-position:130% 0}to{background-position:-30% 0}}
/* Order now joins the same glint, right after Sign in */
.nav-end .btn-primary::after{animation:navGlintT 7s ease-in-out .36s infinite}
.nav-end .btn-primary:hover::after{animation:none}
@keyframes navGlintT{0%,78%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
/* icons answer the pointer */
.nav-end .cartbtn .ph,.nav-end .clientbtn .ph,.nav-end .acct .ph{transition:transform .25s var(--ease);color:var(--field)}
.nav-end .cartbtn:hover .ph{transform:rotate(-12deg) translateY(-1px)}
.nav-end .clientbtn:hover .ph-user,.nav-end .acct:hover .ph{transform:translateY(-2px)}
.nav-end .clientbtn{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.nav-end .clientbtn::before,.nav-end .cartbtn::before,.nav-end .acct::before,.nav-end .btn-primary::after{animation:none}.nav-end .clientbtn:hover,.nav-end .cartbtn:hover{transform:none}}
.nav-end .clientbtn.is-in{color:var(--field)!important;background-image:linear-gradient(160deg,#eef3ff 0%,#dde7ff 100%),linear-gradient(125deg,#8fb0ff,rgba(143,176,255,.25) 55%,rgba(255,191,47,.9))!important}
.nav-end .cartbtn .cart-n{z-index:2}
/* Sign in: the mascot's face instead of a person icon */
.nav-end .clientbtn .nav-mc{flex:none;width:30px;height:auto;margin:-4px -2px -4px -4px;transition:transform .25s var(--ease)}
.nav-end .clientbtn:hover .nav-mc{transform:translateY(-2px) rotate(-6deg)}
/* Pages without the home hero have only the light page colour behind the top bar, which turns the glass grey.
   Give them the navy base the home hero provides, so the bar is the same smoked glass on every page. */
body:not(.fx) .ann{background-color:rgba(9,19,62,.88)}

/* Hero headline: the first slide is simply there on load (no fade-in), which keeps the largest paint early;
   slides animate in only after the first change */
#hs:not(.moved) .hs-slide.on,#hs:not(.moved) .hs-slide.on>*{transition:none;animation:none;opacity:1;visibility:visible;transform:none}

/* ================= Mobile layout pass (phones up to 760px) =================
   Tighter sections and headings, plan cards as a swipeable row, a shorter hero, and a top bar that never overflows. */
@media (max-width:760px){
  /* sections: less air, smaller headings */
  main > section{padding-top:56px!important;padding-bottom:56px!important}
  main > section#hero{padding-top:0!important;padding-bottom:0!important}
  main > section#locations{padding-top:28px!important;padding-bottom:24px!important}
  main > section h2{font-size:clamp(1.55rem,7vw,1.85rem)!important;line-height:1.12!important}
  main > section p{font-size:1rem}
  .lede2{font-size:1.02rem!important}
  /* hero: the decorative desktop window is hidden; the real order box stays */
  #scene .win.session{display:none}
  #scene{margin-top:20px}
  .hero p.lede,.hs-slide .lede{font-size:1.02rem}
  /* plans: one card at a time, swipe sideways for the rest */
  #deck .dk-grid{display:grid;grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:86%;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin:0 -16px;padding:6px 16px 14px;scrollbar-width:none}
  #deck .dk-grid::-webkit-scrollbar{display:none}
  #deck .dk{scroll-snap-align:center;min-width:0}
  #deck .dk .plan-mc{width:72px!important;height:auto!important;margin-bottom:-6px}
  #deck .dk .pns{font-size:.86rem}
  #deck .dk .pns > *{padding-top:7px;padding-bottom:7px}
  #deck .dk .pr{padding-top:12px;padding-bottom:12px}
  #deck .dk-grid + .dk-swipe,#deck .dk-swipe{display:flex}
  /* top bar: the message fits the screen and ends with an ellipsis */
  .ann-msgs{min-width:0;overflow:hidden}
  .ann-msg{max-width:100%}
  .ann-msg span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
/* "Swipe for more plans" hint, phones only */
.dk-swipe{display:none;align-items:center;justify-content:center;gap:8px;margin:2px 0 0;color:var(--muted);font-size:.84rem;font-weight:600}
.dk-swipe i{display:inline-block;animation:dkSwipe 1.6s ease-in-out infinite}
@keyframes dkSwipe{50%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.dk-swipe i{animation:none}}
@media (max-width:760px){
  /* plan cards: content-sized spec box, tighter feature list and price block */
  #deck .dk .al{height:auto!important;min-height:0!important;margin-top:12px;padding:12px}
  #deck .dk .al-top{flex:none!important;padding:12px}
  #deck .dk .al-sub{margin-top:6px;font-size:.86rem;line-height:1.5}
  #deck .dk .kp{gap:6px}
  #deck .dk .pns{margin-top:12px!important;margin-bottom:12px!important}
  #deck .dk .dk-head{margin-top:0}
  #deck .dk .cta-wrap{margin-top:6px}
  /* the intro above the cards */
  #deck .dk-top{gap:22px;margin-bottom:22px}
  #deck .sh h2{font-size:clamp(2rem,9vw,2.4rem)!important}
  #deck .sh .sub{font-size:1rem;margin-top:12px}
  #deck .sh-pts{gap:6px!important;margin-top:14px!important}
  #deck .dk-note{font-size:.84rem;margin-top:10px}
}
@media (max-width:760px){
  #deck .dk-grid{align-items:start}   /* each card is as tall as its own content */
  #deck .dk .al{flex:none!important}
  #deck .dk .pns{margin-top:12px!important}
}
@media (max-width:760px){
  /* order page: billing options as compact rows (name and saving left, price right, billed amount below) */
  #cycCards{gap:8px}
  #cycCards .cyc{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:10px;row-gap:2px;padding:11px 14px;text-align:left}
  #cycCards .cyc-h{grid-column:1;grid-row:1;display:flex;align-items:center;gap:8px;margin:0}
  #cycCards .cyc-p{grid-column:2;grid-row:1 / span 2;margin:0;justify-content:flex-end;align-items:baseline}
  #cycCards .cyc-p strong{font-size:1.25rem}
  #cycCards .cyc-s{grid-column:1;grid-row:2;margin:0;font-size:.76rem}
  /* order page: the city list scrolls inside its own box */
  #locBlock .loc-col{max-height:300px;overflow-y:auto;overscroll-behavior:contain}
  .win.block .win-body{padding:14px}
}
/* plan-section light beams: a fixed top (not a % of the section) so the beam never jumps when the cards render (CLS);
   phones and tablets skip them */
.stage-fx i{top:-320px;bottom:-320px}
html.lite .stage-fx i{display:none}

/* plan filter tabs now use aria-pressed (they are toggle buttons, not tabs) */
.sub-tabs button[aria-pressed="true"]{background:var(--field);border-color:var(--field);color:#fff}
.p-tree button[aria-pressed="true"]{background:color-mix(in srgb,var(--field) 18%,transparent);color:var(--ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--field) 55%,transparent)}
.p-tree button[aria-pressed="true"] small{color:var(--ink)}
/* order page: the blocks filled in by order.js keep their final height from the first paint, so nothing below them jumps (CLS) */
#osFam{min-height:58px}#osNote{min-height:22px}#typeCards{min-height:58px}#subAbout{min-height:21px}#cycCards{min-height:138px}
@media (max-width:760px){#osFam{min-height:126px}#osNote{min-height:65px}#typeCards{min-height:91px}#subAbout{min-height:43px}#cycCards{min-height:294px}}

/* ================= Phones, round 2: compact plan cards, pinned plan slider, mini hero scene, steps timeline ================= */
@media (max-width:760px){
  /* plan card, phone layout: mascot beside the name, tight spec box, compact features, price and button */
  #deck .dk{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:12px;align-items:center;padding:16px 16px 14px!important;text-align:left}
  #deck .dk .plan-mc{grid-column:1;grid-row:1 / span 2;width:52px!important;height:auto!important;margin:0!important;align-self:center}
  #deck .dk .dk-head{grid-column:2;justify-content:flex-start;gap:8px;margin:0}
  #deck .dk .dk-head h3{font-size:1.3rem!important;line-height:1.1}
  #deck .dk .dk-tag{grid-column:2;margin:2px 0 0!important;font-size:.82rem}
  #deck .dk > .al,#deck .dk > .pns,#deck .dk > .pr,#deck .dk > .cta-wrap{grid-column:1 / -1}
  #deck .dk .dk-pop{top:-12px;height:26px;padding:0 12px;font-size:.72rem}
  #deck .dk .al{margin-top:12px!important;padding:0!important;background:none}
  #deck .dk .al-top{padding:10px 12px!important;text-align:center}
  #deck .dk .al-big{justify-content:center;font-size:1.05rem}
  #deck .dk .al-sub{margin-top:2px!important;font-size:.78rem!important;line-height:1.4!important}
  #deck .dk .pns{margin:10px 0!important}
  #deck .dk .pns .rw,#deck .dk .pns li{padding:6px 10px!important;font-size:.8rem!important;min-height:0!important;border-radius:9px!important;gap:8px!important}
  #deck .dk .pns .kp{gap:5px!important}
  #deck .dk .pr{padding:8px 10px!important;margin:0!important}
  #deck .dk .pr-n{font-size:2rem!important}
  #deck .dk .cta-wrap{margin-top:10px!important}
  #deck .dk .cta{min-height:44px!important;height:44px}
  #deck .dk .cap{margin-top:-10px!important;padding:16px 10px 8px!important;font-size:.76rem!important}
  /* pinned slider (set up by deck.js on phones): the cards stay on screen and vertical scroll slides them sideways */
  .dk-track{position:relative}
  .dk-pin{position:sticky;top:84px;overflow:hidden;margin:0 -16px;padding:18px 0 10px}
  .dk-pin .dk-grid{display:flex!important;gap:14px;overflow:visible!important;scroll-snap-type:none!important;margin:0!important;padding:0 7%!important;will-change:transform;backface-visibility:hidden}
  .dk-pin .dk{flex:0 0 86%;transition:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .dk-dots{display:flex;justify-content:center;gap:6px;margin-top:10px}
  .dk-dots i{width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.28);transition:width .25s,background-color .25s}
  .dk-dots i.on{width:18px;background:#ffbf2f}
  .dk-pin ~ .dk-swipe,.dk-track ~ .dk-swipe{display:none!important}
  /* hero: the desktop scene in miniature (scaled by home.js to the screen width) */
  .scene-fit{overflow-x:clip;overflow-y:visible;position:relative;margin-top:44px;width:100%;min-width:0;max-width:100%}
  #scene.mini{width:620px!important;max-width:none!important;height:640px!important;display:block!important;position:relative;transform:scale(var(--sz,.55));transform-origin:0 0;margin:0!important}
  #scene.mini .win.session{display:block!important;position:absolute!important;left:0!important;right:0!important;top:0!important;bottom:auto!important;width:100%!important}
  #scene.mini .win.main{position:absolute!important;left:0!important;top:96px!important;width:390px!important}
  #scene.mini .pc{height:360px}
  #scene.mini .pc-st{padding-left:46%}
  #scene.mini .pc-boot .log{padding-left:0}
  #scene.mini .hero-mc{display:block;right:30px;top:-70px;width:120px;height:auto}
  /* steps: a compact vertical timeline; the steps light up in turn and the mascot travels down the line */
  #support .flow{display:grid!important;grid-template-columns:1fr!important;gap:14px!important;margin-top:28px!important;position:relative;padding-left:0}
  #support .flow .flow-line{display:block!important;position:absolute;left:21px;right:auto;top:22px;bottom:22px;width:3px;height:auto}
  #support .flow .flow-line::after{transform:scaleY(0);transform-origin:top;animation:jFillV 10s linear infinite}
  #support .flow .flow-pkt{display:block!important;position:absolute;left:-1px;top:0;width:46px;height:29px;margin:0;animation:jPktV 10s linear infinite}
  #support .flow .flow-pkt img{width:46px;height:29px}
  #support .flow .fstep{display:grid!important;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:start;text-align:left!important}
  #support .flow .fstep .dot{grid-row:1 / span 2;width:44px!important;height:44px!important;font-size:1.15rem!important}
  #support .flow .fstep h3{margin:2px 0 0!important;font-size:1.02rem!important}
  #support .flow .fstep p{margin:2px 0 0!important;font-size:.84rem!important;max-width:none!important;line-height:1.45}
  /* "Pay your way": smaller logos, tighter box */
  #support .flow-head{gap:18px}
  #support .paypanel{padding:14px 16px}
  #support .pp-t{font-size:1rem;margin-bottom:8px}
  #support .paypanel .pm svg{height:22px!important;width:auto}
  #support .paypanel .pm-row{gap:5px}
  #support .pp-rows{gap:6px}
  #support .pp-n{font-size:.8rem}
}
@keyframes jFillV{0%{transform:scaleY(0)}80%,100%{transform:scaleY(1)}}
@keyframes jPktV{0%{transform:translateY(8px);opacity:1}80%{transform:translateY(var(--pktEnd,420px));opacity:1}90%,100%{transform:translateY(var(--pktEnd,420px));opacity:0}}
@media (prefers-reduced-motion:reduce){#support .flow .flow-pkt{display:none!important}#support .flow .flow-line::after{animation:none;transform:none}}

/* ===== Phones: minimal top bar (short message, small type) and a menu that flattens edge to edge on scroll ===== */
.ann-s,.ann-msg a.ann-s{display:none}   /* desktop shows the full message */
@media (max-width:760px){
  .ann-in{min-height:32px!important;padding:0 14px!important;gap:8px!important;grid-template-columns:minmax(0,1fr) auto!important}
  .ann-ico,.ann-msg > .ph,.ann-msg b,.ann-msg span,.ann-msg a:not(.ann-s),.ann-links,.ann-ctl{display:none!important}
  .ann-msg{justify-content:center!important;gap:0}
  .ann-msg a.ann-s{display:inline-flex!important;align-items:center;gap:6px;height:auto;padding:0;border:0;background:none!important;box-shadow:none!important;
    color:#e8eeff!important;font:500 .76rem/1 var(--f-ui);letter-spacing:.02em;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .ann-msg a.ann-s::after{content:"\2192";color:#ffd36e;font-weight:700}
  .ann::before{opacity:.5}
  .ann-bar{height:1px}
  /* menu: a floating capsule at the top that becomes a full-width bar once you scroll */
  /* the capsule is inset with margins (lengths animate cleanly; max-width between min() and 100% stalls halfway in Chrome) */
  .nav{transition:padding .45s var(--ease)}
  .nav .wrap{max-width:none!important;width:auto;margin:0 12px;border-radius:34px;
    transition:margin .45s var(--ease),border-radius .45s var(--ease),padding .45s var(--ease),box-shadow .45s var(--ease),background-color .45s}
  html.nav-flat .nav{padding-top:0}
  html.nav-flat .nav .wrap{margin:0!important;width:100%!important;max-width:none!important;box-sizing:border-box;border-radius:0!important;padding:0 12px 0 16px;
    background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 92%,transparent),color-mix(in srgb,var(--surface) 86%,transparent))!important;
    box-shadow:0 10px 24px -14px rgba(5,10,35,.6),inset 0 -1px 0 color-mix(in srgb,var(--line) 70%,transparent)!important}
  html.nav-flat .nav .wrap::before{opacity:0;transition:opacity .3s}
  html.nav-flat .nav .wrap::after{left:0;right:0}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){.nav,.nav .wrap{transition:none}}
@media (max-width:760px){
  /* "hidden" makes the section a scroll box, which stops the pinned plan slider from sticking; "clip" looks the same without that */
  .stage{overflow:clip!important}
}
@media (max-width:760px){
  #deck .dk .dk-head,#deck .dk .dk-head h3,#deck .dk .dk-tag{text-align:left!important;justify-content:flex-start!important}
  #deck .dk .dk-head{flex-wrap:wrap;row-gap:4px}
}
@media (max-width:760px){#support .flow .fstep{row-gap:0!important;gap:0 14px!important;grid-template-rows:auto 1fr}#support .flow .fstep h3{align-self:end;padding-top:4px}}

/* ================= Order page: plan table redesign =================
   Tier colours: Basic blue, Standard green, Professional amber, Power violet. Each row carries its tier as a pill and a
   colour stripe; specs read on one line with a small bar for relative power; the price stands out on the right. */
.p-table tr.pt-basic,.pt-chip.pt-basic{--tc:#1c4fe0;--tb:#e8efff}
.p-table tr.pt-standard,.pt-chip.pt-standard{--tc:#0b8a5a;--tb:#dcf5ea}
.p-table tr.pt-business,.pt-chip.pt-business{--tc:#b06a00;--tb:#fff0d2}
.p-table tr.pt-power,.pt-chip.pt-power{--tc:#6b3fd6;--tb:#efe7ff}
/* tier chips */
.pt-tiers{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface-2) 45%,var(--surface))}
.pt-chip{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font:600 .84rem var(--f-ui);cursor:pointer;transition:border-color .15s,background-color .15s,box-shadow .15s}
.pt-chip i{width:9px;height:9px;border-radius:50%;background:var(--tc,linear-gradient(135deg,#1c4fe0,#6b3fd6));background:var(--tc,#8fa3cf)}
.pt-chip small{display:grid;place-items:center;min-width:22px;height:20px;padding:0 6px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:.72rem;font-weight:700}
.pt-chip:hover:not(:disabled){border-color:color-mix(in srgb,var(--tc,#1c4fe0) 50%,var(--line))}
.pt-chip[aria-pressed="true"]{border-color:var(--tc,#1c4fe0);background:color-mix(in srgb,var(--tb,#e8efff) 75%,var(--surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--tc,#1c4fe0) 14%,transparent)}
.pt-chip[aria-pressed="true"] small{background:var(--tc,#1c4fe0);color:#fff}
.pt-chip:disabled{opacity:.45;cursor:not-allowed}
/* header */
.p-table thead th{background:color-mix(in srgb,var(--surface-2) 55%,var(--surface));box-shadow:inset 0 -1px 0 var(--line)}
.p-table thead button{font-size:.72rem!important;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.p-table thead th:first-child button{padding-left:52px}
/* rows */
.p-table tbody tr{position:relative;transition:background-color .15s,box-shadow .15s}
.p-table tbody tr:nth-child(even){background:color-mix(in srgb,var(--surface-2) 30%,var(--surface))}
.p-table tbody tr:hover{background:color-mix(in srgb,var(--tb,#e8efff) 55%,var(--surface))}
.p-table tbody td:first-child{box-shadow:inset 4px 0 0 var(--tc,#8fa3cf)}
.p-table td{vertical-align:middle!important}
.p-table td.nm{display:flex;align-items:center;gap:12px;white-space:normal}
.pt-radio{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid color-mix(in srgb,var(--tc,#8fa3cf) 55%,var(--line));background:var(--surface);transition:border-color .15s,box-shadow .15s}
.pt-name{display:grid;gap:5px;min-width:0}
.pt-name code{font:500 .8rem var(--f-mono);color:var(--muted);overflow-wrap:anywhere;background:none;padding:0}
.pt-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pt-tier{display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:999px;background:var(--tb);color:var(--tc);font:800 .72rem var(--f-ui);letter-spacing:.03em;text-transform:uppercase}
.pt-flag{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-radius:999px;background:linear-gradient(135deg,#ffd964,#ffbf2f);color:#1b1400;font:800 .68rem var(--f-ui)}
.pt-flag::before{content:"\2605";font-size:.7rem}
.pt-spec{display:block;white-space:nowrap;color:var(--muted);font-size:.84rem}
.pt-spec b{color:var(--ink);font-size:1.02rem;font-weight:800;font-variant-numeric:tabular-nums}
.pt-sub{display:block;margin-top:2px;color:var(--muted);font-size:.72rem}
.pt-bar{display:block;width:72%;max-width:84px;height:5px;margin-top:6px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.pt-bar b{display:block;height:100%;width:var(--w);border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--tc,#1c4fe0) 55%,#fff),var(--tc,#1c4fe0))}
.pt-dt{display:inline-flex;align-items:center;height:18px;margin-top:5px;padding:0 7px;border-radius:5px;font:800 .64rem var(--f-ui);letter-spacing:.04em;text-transform:uppercase;background:var(--surface-2);color:var(--muted)}
.pt-dt.dt-nvme{background:#e3f6ff;color:#0369a1}
.pt-price{display:block;color:var(--ink);font-family:var(--f-display);font-size:1.18rem;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.pt-price small{font:500 .78rem var(--f-ui);letter-spacing:0;color:var(--muted)}
.p-table td.pr .hr{font-size:.72rem}
/* chosen row: tier-tinted, a filled radio and a thicker stripe */
.p-table tbody tr.on{background:color-mix(in srgb,var(--tb,#e8efff) 85%,var(--surface))!important;outline:2px solid var(--tc,var(--field))!important;outline-offset:-2px}
.p-table tbody tr.on td:first-child{box-shadow:inset 6px 0 0 var(--tc,var(--field))}
.p-table tbody tr.on .pt-radio{border-color:var(--tc);box-shadow:inset 0 0 0 4px var(--surface),inset 0 0 0 10px var(--tc)}
.p-table tbody tr.on .pt-price{color:var(--tc)}
.p-table tbody tr:focus-visible{outline:2px solid var(--tc,var(--field));outline-offset:-2px}
/* phones: each plan is a card; the tier stripe runs down its left edge */
@media (max-width:760px){
  .pt-tiers{gap:6px;padding:10px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .pt-tiers::-webkit-scrollbar{display:none}
  .pt-chip{flex:none;height:32px;padding:0 10px;font-size:.8rem}
  .p-table tbody tr{box-shadow:inset 4px 0 0 var(--tc,#8fa3cf)}
  .p-table tbody td:first-child{box-shadow:none}
  .p-table tbody tr.on{box-shadow:inset 6px 0 0 var(--tc)}
  .p-table td.nm{grid-column:1 / -1}
  .pt-bar{width:100%}
  .pt-price{font-size:1.15rem}
}
@media (min-width:761px){
  .p-table thead button{letter-spacing:.04em!important;padding-left:10px;padding-right:10px}
  .p-table td{padding-left:10px!important;padding-right:10px!important}
  .p-table td.pr{padding-right:14px!important}
  .pt-price{font-size:1.05rem}
  .pt-price small{font-size:.72rem}
}
.pt-spec .pt-dt{margin:0 0 0 4px;vertical-align:2px}
.pt-sub{white-space:nowrap}
@media (min-width:761px){.p-table td.pr{white-space:nowrap}}
@media (max-width:760px){
  .ptable,.pt-tiers{min-width:0;max-width:100%}
  .ptable{overflow:hidden}
  .p-table tbody tr{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .p-table td:nth-child(n+2):nth-child(-n+4)::before{content:attr(data-label);display:block;font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
  .p-table td:nth-child(5)::before{content:none}
  .pt-sub{white-space:normal}
}
#orderMain{min-width:0}   /* a grid item must not grow to its widest row (the tier chips scroll inside their box on phones) */
/* tier chips row keeps its height before it is filled (no layout shift) */
.pt-tiers{min-height:59px;box-sizing:border-box}
@media (max-width:760px){.pt-tiers{min-height:53px}}
/* readable tier colours (4.5:1 on their tints) */
.p-table tr.pt-standard,.pt-chip.pt-standard{--tc:#066b45}
.p-table tr.pt-business,.pt-chip.pt-business{--tc:#8a5200}
/* faint top-bar controls: tiny to look at, 24px to tap */
.ann-ctl .ann-b{width:24px;height:24px}
.ann-dots{gap:4px;padding:0}
.ann-dot{position:relative;width:20px!important;height:24px!important;background:none!important;overflow:visible}
.ann-dot::before{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:999px;background:rgba(255,255,255,.5);transition:width .35s var(--ease),margin .35s var(--ease)}
.ann-dot.on::before{width:12px;margin-left:-6px;background:rgba(255,255,255,.25)}
.ann-dot i{left:50%;top:50%;right:auto;bottom:auto;width:12px;height:4px;margin:-2px 0 0 -6px;border-radius:999px;opacity:0}
.ann-dot.on i{opacity:1}
.ann-dot::after{content:none}
/* order summary: the lines, total and "due today" keep their height before order.js fills them, so the checkout button never moves */
#sumRows{min-height:343px}#sumDue{min-height:77px}#summaryAside .sum-total{min-height:70px}
/* top-bar dots: a full 24x24 tap area each */
.ann-dots{gap:0!important}
.ann-dot{width:24px!important;height:24px!important}

/* footer social: each network in its own brand colour */
.ft-social a{position:relative;overflow:hidden;color:#fff;border:0;font-size:1.25rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 18px -10px var(--sc,#000);transition:transform .18s var(--ease),box-shadow .18s,filter .18s}
.ft-social a:hover{transform:translateY(-2px);filter:brightness(1.08);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 12px 24px -10px var(--sc,#000)}
.ft-social .sc-youtube{--sc:#ff0033;background:linear-gradient(145deg,#ff4d5e,#ff0033 55%,#c4001f)}
.ft-social .sc-instagram{--sc:#d62976;background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.ft-social .sc-trustpilot{--sc:#00b67a;background:linear-gradient(145deg,#2fd89a,#00b67a 55%,#008f5f)}
.ft-social .sc-facebook{--sc:#1877f2;background:linear-gradient(145deg,#4a95ff,#1877f2)}
@media (max-width:760px){
  /* "VPS / RDP by country": a slim two-row strip you swipe sideways, instead of a wall of big pills */
  .chip-links{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:max-content;gap:6px;margin:10px -16px 0;padding:2px 16px 6px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:16px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    -webkit-mask:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 28px),transparent);mask:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 28px),transparent)}
  .chip-links::-webkit-scrollbar{display:none}
  .chip-links a{height:32px;padding:0 11px 0 8px;gap:6px;font-size:.8rem;font-weight:500;scroll-snap-align:start;color:color-mix(in srgb,var(--ink) 82%,transparent)}
  .chip-links a:hover{transform:none}
  .chip-links img{width:16px;height:12px;border-radius:2px}
  .cty-h{font-size:1.05rem}
}
/* phone menu icons live in the markup, hidden on the desktop bar */
.m-ico{display:none}
/* ======================= phone menu: a sheet with icon rows, flat accordions and an action bar ======================= */
@media (max-width:1000px){
  .nav.open::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:auto;background:rgba(6,12,40,.42);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:mFade .25s ease both}
  html:has(.nav.open){overflow:hidden}
  .nav.open .nav-links{top:calc(100% + 10px);left:0;right:0;gap:0;padding:8px;border-radius:24px;border:1px solid color-mix(in srgb,var(--field) 22%,var(--line));
    background:var(--surface);box-shadow:0 30px 70px -24px rgba(5,10,35,.55),0 2px 0 rgba(255,255,255,.6) inset;
    max-height:calc(100dvh - var(--nav-h) - 40px);animation:mSheet .32s var(--ease) both;transform-origin:top center}
  html.nav-flat .nav.open .nav-links{left:8px;right:8px}
  @keyframes mSheet{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
  @keyframes mFade{from{opacity:0}to{opacity:1}}
  /* top-level rows */
  .nav-links>.dd,.nav-links>a:not(.m-only){position:relative!important}
  .nav-links>.dd::after,.nav-links>a:not(.m-only)::after{content:"";position:absolute;left:58px;right:10px;bottom:0;height:1px;background:color-mix(in srgb,var(--line) 75%,transparent);pointer-events:none}
  .nav-links>.dd:has(+.m-cta)::after{display:none}
  .nav-links .m-ico,.nav-links .dd-btn .m-ico{font-size:1.2rem!important}
  .nav-links>.dd>.dd-btn,.nav-links>a:not(.m-only){display:flex;align-items:center;gap:12px;width:100%;min-height:54px;padding:8px 10px;border-radius:14px;
    font:600 1rem/1.2 var(--f-ui);color:var(--ink);background:none;box-shadow:none}
  .nav-links>.dd>.dd-btn>.ph-caret-down{margin-left:auto;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--surface-2);font-size:.85rem;color:var(--muted);transition:transform .25s var(--ease),background-color .2s,color .2s}
  .nav-links>.dd.open>.dd-btn{background:color-mix(in srgb,var(--field) 7%,transparent)}
  .nav-links>.dd.open>.dd-btn>.ph-caret-down{transform:rotate(180deg);background:var(--field);color:#fff}
  .nav-links>.dd>.dd-btn[aria-current="page"],.nav-links>a[aria-current="page"]{background:color-mix(in srgb,var(--field) 7%,transparent);box-shadow:none}
  .m-ico{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:11px;font-size:1.15rem;color:var(--field);
    background:linear-gradient(145deg,color-mix(in srgb,var(--field) 16%,transparent),color-mix(in srgb,var(--field) 6%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--field) 18%,transparent)}
  .nav-links>.dd>.dd-btn[aria-current="page"] .m-ico,.nav-links>a[aria-current="page"] .m-ico{color:var(--accent-ink,#1a1300);background:linear-gradient(145deg,#ffd964,#ffb22e);box-shadow:none}
  /* sub-items: flat, indented under the label, no cards */
  .nav-links>.dd>.dd-menu,.nav-links>.dd>.mega-panel{padding:2px 0 10px 46px;animation:mFade .2s ease both}
  .nav-links .dd-menu a,.nav-links .mu{min-height:48px;padding:7px 10px;gap:12px;border-radius:12px;background:none}
  .nav-links .dd-menu a .ph,.nav-links .mu .ph{font-size:1.1rem}
  .nav-links .dd-menu a b,.nav-links .mu b{font-size:.92rem}
  .nav-links .dd-menu a small,.nav-links .mu small{font-size:.76rem}
  .nav-links .dd-menu a[aria-current="page"],.nav-links .mu[aria-current="page"],.nav-links .mp-c[aria-current="page"]{background:color-mix(in srgb,var(--accent) 16%,transparent);box-shadow:inset 3px 0 0 var(--accent)}
  .nav-links .dd-menu a:active,.nav-links .mu:active,.nav-links .mp-c:active{background:var(--surface-2)}
  /* locations: search on top, then two columns of compact flag rows */
  .nav-links .mp-body{padding:4px 0 0}
  .nav-links>.dd>.mega-panel{padding:2px 0 10px 0}
  .nav-links .mp-prod{display:flex;flex-wrap:nowrap;width:auto;margin:0 0 4px;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px;background:none;border:0;box-shadow:none}
  .nav-links .mp-prod::-webkit-scrollbar{display:none}
  .nav-links .mp-prod button{flex:none;height:36px;padding:0 12px;border-radius:999px;font-size:.84rem;white-space:nowrap;border:1px solid var(--line);background:var(--surface)}
  .nav-links .mp-prod button[aria-pressed="true"],.nav-links .mp-prod button.on,.nav-links .mp-prod button[aria-selected="true"]{border-color:transparent;background:linear-gradient(135deg,#ffd964,#ffb22e);color:#1a1300}
  .nav-links .mp-card,.nav-links .dd-menu{background:none!important;border:0!important;box-shadow:none!important}
  .nav-links .mp-search{margin:8px 0 4px;width:100%;max-width:none}
  .nav-links .mp-search input{width:100%;max-width:none}
  .nav-links .mp-search input{height:42px;border-radius:12px;font-size:.92rem}
  .nav-links .mp-cols{grid-template-columns:1fr;gap:4px}
  .nav-links .mp-col{display:grid;grid-template-columns:1fr 1fr;gap:0 4px}
  .nav-links .mp-col h3{grid-column:1/-1;margin:8px 4px 2px;padding:0;border:0;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
  .nav-links .mp-c{padding:7px 8px;gap:9px;min-height:44px}
  .nav-links .mp-c img{width:22px;height:16px}
  .nav-links .mp-c b{font-size:.86rem}
  .nav-links .mp-c small{display:none}
  /* bottom actions */
  .nav-links .m-cta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 2px 0;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
  .nav-links .m-cta a{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:14px;font:600 .95rem/1 var(--f-ui);text-decoration:none;padding:0 10px}
  .nav-links .m-cta-in{color:var(--ink);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
  .nav-links .m-cta-ca{color:#1a1300;background:linear-gradient(135deg,#ffd964 0%,#ffbf2f 52%,#ff9f2e 100%);box-shadow:0 10px 22px -12px rgba(255,160,40,.9),inset 0 1px 0 rgba(255,255,255,.5)}
  .nav-links .m-cta .ph{font-size:1.15rem}
  .nav-links .m-help{display:flex!important;align-items:center;gap:10px;margin:8px 2px 2px;padding:10px 12px;border-radius:14px;font-size:.84rem;color:var(--muted);text-decoration:none;
    background:color-mix(in srgb,#14b86a 8%,transparent)}
  .nav-links .m-help b{color:var(--ink);font-weight:600}
  .nav-links .m-help>.ph:first-child{font-size:1.2rem;color:#0f9d58}
  .nav-links .m-help>.ph:last-child{margin-left:auto;color:var(--muted)}
}
@media (max-width:1000px) and (prefers-reduced-motion:reduce){.nav.open::before,.nav.open .nav-links,.nav-links>.dd>.dd-menu,.nav-links>.dd>.mega-panel{animation:none}}
@media (max-width:360px){.nav-links .mp-cols{grid-template-columns:1fr}}

/* ================= Plan pages on phones: hero, family tiles, comparison, value bars, hub headers ================= */
:root{--tc-basic:#3ddc97;--tc-standard:#7aa0ff;--tc-business:#b48cff;--tc-power:#ffbf2f}
.cmp-m{display:none}
@media (max-width:760px){
  /* ss1: the hero clears the floating menu again (the section padding rule above flattened it) */
  main > section.stage-hero{padding-top:calc(var(--nav-h) + 34px)!important}
  .ph-hero{padding:0 0 22px;gap:0}
  .ph-copy h1{font-size:clamp(2.3rem,11vw,2.9rem);line-height:1}
  .ph-copy>p{font-size:.98rem;line-height:1.5;margin-top:12px}
  .from-row{margin-top:16px}
  .ph-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:20px;padding:14px 0 0}
  .ph-stat{padding:0 10px;border-left:1px solid rgba(255,255,255,.12)}
  .ph-stat:first-child{padding-left:0;border-left:0}
  .ph-stat b{font-size:1.6rem!important}
  .ph-stat span{margin-top:4px;font-size:.72rem;line-height:1.3}

  /* ss2: plan families as a compact 2 x 2 grid; the whole tile is the link */
  .fam-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;margin-bottom:40px!important}
  .fam-tile{gap:8px!important;padding:12px!important;border-radius:16px}
  .fam-tile:hover,.fam-tile:focus-visible{transform:none}
  .ft-top{grid-template-columns:auto minmax(0,1fr)!important;gap:9px!important}
  .ft-ico{width:34px!important;height:34px!important;border-radius:10px!important;font-size:1.05rem!important}
  .ft-b b{font-size:.98rem!important;line-height:1.15}
  .ft-b small,.ft-go{display:none!important}
  .ft-prices{padding:0!important;border:0!important;background:none!important}
  .ft-pr{gap:4px!important;flex-wrap:wrap}
  .ft-pr .tag{display:none}
  .fam-tile{align-content:space-between}
  .ft-pr em{display:block;width:100%;font-size:.68rem!important}
  .ft-pr small{font-size:.66rem!important}
  .ft-pr strong{font-size:1.1rem!important}
  .ft-pr.off{opacity:.75}

  /* ss3: tier switcher and spec tiles instead of the wide table */
  .cmp-wrap{display:none}
  .cmp-m{display:block;margin-top:48px}
  .cmp-m h3{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;margin-bottom:14px}
  .cm-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
  .cm-tabs button{display:grid;gap:2px;justify-items:center;padding:8px 2px;border:0;border-radius:12px;background:none;color:#aab5d8;cursor:pointer;font:inherit;transition:background-color .2s,color .2s}
  .cm-tabs button b{font-size:.74rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
  .cm-tabs button small{font-size:.62rem;opacity:.85;white-space:nowrap}
  .cm-tabs button[aria-selected="true"]{background:color-mix(in srgb,var(--tc) 20%,transparent);color:#fff;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tc) 60%,transparent)}
  .cm-tabs button[aria-selected="true"] b{color:var(--tc)}
  .cm-card{margin-top:10px;border-radius:20px;overflow:hidden;border:1px solid color-mix(in srgb,var(--tc) 35%,rgba(255,255,255,.1));background:linear-gradient(180deg,color-mix(in srgb,var(--tc) 10%,transparent),rgba(255,255,255,.02) 40%)}
  .cm-pr{display:grid;grid-template-columns:1fr auto;align-items:end;gap:2px 10px;padding:16px 16px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
  .cm-tier{grid-column:1/-1;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tc)}
  .cm-amt{display:flex;align-items:baseline;gap:6px}
  .cm-amt b{font-family:var(--f-display);font-size:2.1rem;font-weight:800;letter-spacing:-.03em;line-height:1}
  .cm-amt s{color:#ff7a99;font-size:.85rem}
  .cm-amt small{color:#aab5d8;font-size:.8rem}
  .cm-bill{grid-column:1/-1;color:#aab5d8;font-size:.76rem}
  .cm-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.07)}
  .cm-t{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"i l" "i v";gap:0 9px;align-items:center;padding:11px 12px;background:#0b1233}
  .cm-t>.ph{grid-area:i;width:30px;height:30px;display:grid;place-items:center;border-radius:9px;font-size:1rem;color:var(--tc);background:color-mix(in srgb,var(--tc) 14%,transparent)}
  .cm-l{grid-area:l;font-size:.68rem;color:#8f9bc2;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cm-t b{grid-area:v;font-size:.9rem;font-weight:700;color:#fff;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cm-m{position:absolute;left:12px;right:12px;bottom:5px;height:3px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
  .cm-m i{display:block;height:100%;border-radius:inherit;background:var(--tc);transform-origin:left;transform:scaleX(var(--p));transition:transform .5s var(--ease)}
  .cm-t.no>.ph{color:#8f9bc2;background:rgba(255,255,255,.06)}
  .cm-t.no b{color:#aab5d8;font-weight:500}

  /* ss4: value rows stack as name and price, with the bar underneath */
  .val{margin-top:44px}
  .val h3{font-size:1.6rem}
  .val>p{font-size:.92rem;margin-bottom:6px}
  .val-row{grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"n p" "b b";gap:8px 12px!important;padding:12px 0!important}
  .val-row .vn{grid-area:n;flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px;font-size:.98rem}
  .val-row .vn .bd{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;font-family:var(--f-ui);font-size:.62rem;font-style:normal;font-weight:700;letter-spacing:.04em;line-height:1.2;white-space:nowrap;transform:none}
  .val-row .vb{grid-area:b;height:8px}
  .val-row b{grid-area:p;font-size:1.15rem!important}
  .val-row .vr{display:none}

  /* ss5: hub and country headers: icon beside the title, then copy, facts and two even buttons */
  .cty2{grid-template-columns:auto minmax(0,1fr)!important;gap:12px 14px!important;padding:6px 0 4px!important}
  .cty2 .cty-main{display:contents}
  .cty2 .cty-flag{grid-column:1;grid-row:1;align-self:center}
  .cty2 .cty-flag.hub-ico{width:48px;height:48px;border-radius:14px;font-size:1.5rem}
  .cty2 .cty-flag img{width:48px!important;height:36px!important}
  .cty2 h1{grid-column:2;grid-row:1;align-self:center;font-size:clamp(1.6rem,7.4vw,2rem)!important;line-height:1.08}
  .cty2 p{grid-column:1/-1;margin:0!important;font-size:.95rem!important;line-height:1.5}
  .cty2 .cty-facts{grid-column:1/-1;margin:0!important}
  .cty2 .actions{grid-column:1/-1;display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:10px}
  .cty2 .actions .btn{width:100%;justify-content:center;padding-inline:14px;min-width:0;white-space:nowrap;font-size:.92rem}
  /* RDP / VPS / Dedicated / Bare Metal switch on country pages: one even segmented row */
  .kind-sw{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px!important;padding:3px;margin:4px 0 10px!important;border-radius:14px;background:var(--surface);border:1px solid var(--line);flex-wrap:nowrap!important}
  .kind-sw a{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:2px!important;height:auto!important;min-height:46px;padding:5px 2px!important;border:0!important;border-radius:11px!important;font-size:.7rem!important;line-height:1.15;text-align:center;box-shadow:none!important;background:none}
  .kind-sw a .ph{font-size:1.05rem}
  .kind-sw a.on{background:linear-gradient(135deg,#ffd964,#ffb22e)!important;color:#1a1300!important}
  .crumbs{margin-bottom:4px}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){.cm-m i{transition:none}}

/* ================= Order page: groups as a pill row above the table (the table gets the full width), most popular plan ================= */
@media (min-width:901px){
  .p-split{grid-template-columns:1fr}
  .p-tree{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px;max-height:none;padding:10px 14px;border-right:0;border-bottom:1px solid var(--line);overflow:visible;background:var(--surface)}
  .p-tree button,.p-tree button.child{width:auto;flex:none;min-height:34px;padding:0 12px;gap:8px;border-radius:999px;border:1px solid var(--line);font-size:.84rem;white-space:nowrap}
  .p-tree button.child{min-height:30px;padding:0 10px;font-size:.8rem;margin-left:-2px;border-style:dashed}
  .p-tree button.child::before{content:"\21B3";color:var(--muted);font-size:.8rem;margin-right:-2px}
  .p-scroll{max-height:560px}
}
.p-table td:nth-child(4){overflow:hidden}
.p-table td:nth-child(4) .pt-spec{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.p-table td:nth-child(4) .pt-dt{margin-top:0}
.p-table td.pr{padding-left:4px}
/* most popular: warm row tint, a gold stripe and a flame pill */
.pt-pop{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-radius:999px;background:linear-gradient(135deg,#ff7a45,#ff4f6d);color:#fff;font:800 .68rem var(--f-ui);letter-spacing:.02em;box-shadow:0 6px 14px -6px rgba(255,79,109,.7)}
.pt-pop .ph{font-size:.82rem}
.p-table tbody tr.pop:not(.on){background:linear-gradient(90deg,rgba(255,122,69,.10),rgba(255,191,47,.06) 60%,transparent)}
.p-table tbody tr.pop td:first-child{box-shadow:inset 4px 0 0 #ff6a4d}
.p-table tbody tr.pop .pt-price{color:#d9381e}
.p-table tbody tr.pop.on .pt-price{color:var(--field)}

/* transfer icon shows on phones only */
.pt-tri{display:none}
/* ================= Phones: order page (plan list, billing, OS, add-ons), payment strip, content blocks ================= */
@media (max-width:760px){
  /* plan list: one compact row per plan. Radio | tier + name | price on the first line; vCPU, memory, storage and transfer on the second */
  .p-filter{gap:6px}
  .p-filter input{font-size:.9rem}
  .p-sortsel{height:36px!important;max-width:44%!important;font-size:.78rem!important;margin-right:6px!important}
  .p-tree{padding:8px 10px!important;gap:6px!important;flex-wrap:nowrap!important;overflow-x:auto!important;scrollbar-width:none}
  .p-tree::-webkit-scrollbar{display:none}
  .p-tree button,.p-tree button.child{min-height:30px!important;padding:0 10px!important;font-size:.76rem!important;gap:6px!important}
  .p-tree button small{font-size:.66rem!important}
  .pt-tiers{padding:8px 10px!important;min-height:0!important}
  .pt-chip{height:30px!important;font-size:.76rem!important;padding:0 9px!important;gap:5px!important}
  .pt-chip small{min-width:18px;height:17px;font-size:.64rem}
  .p-scroll{max-height:min(62vh,520px)!important}
  .p-table tbody tr{display:grid!important;grid-template-columns:20px auto auto minmax(0,1fr) auto!important;grid-template-areas:"r n n n p" "r c m d d";
    gap:6px 10px!important;align-items:center;padding:11px 12px 11px 14px!important}
  .p-table td{padding:0!important;margin:0!important;border:0!important;font-size:.8rem}
  .p-table td::before{content:none!important;display:none!important}
  .p-table td.nm{display:contents!important}
  .p-table td.nm .pt-radio{grid-area:r;width:18px;height:18px;align-self:center}
  .p-table td.nm .pt-name{grid-area:n;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
  .p-table td.nm .pt-tags{gap:4px}
  .pt-tier,.pt-flag,.pt-pop{height:18px!important;padding:0 7px!important;font-size:.6rem!important}
  .pt-pop .ph{font-size:.7rem}
  .pt-name code{font-size:.74rem!important}
  .p-table td:nth-child(2){grid-area:c}
  .p-table td:nth-child(3){grid-area:m}
  .p-table td:nth-child(4){grid-area:d;min-width:0}
  .p-table td:nth-child(n+2):nth-child(-n+4) .pt-spec{display:inline-flex!important;align-items:center;gap:3px;font-size:.74rem;white-space:nowrap}
  .p-table td:nth-child(n+2):nth-child(-n+4) .pt-spec b{font-size:.84rem}
  .p-table td:nth-child(3),.p-table td:nth-child(4){padding-left:10px!important;border-left:1px solid var(--line)!important}
  .p-table td:nth-child(4){display:flex!important;align-items:center;gap:6px;white-space:nowrap;overflow:hidden}
  .p-table td:nth-child(4) .pt-sub{display:inline!important;margin:0;font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .p-table td:nth-child(4) .pt-spec{flex-wrap:nowrap!important}
  .p-table td:nth-child(4) .pt-sub{color:var(--muted)}
  .pt-trl{display:none}
  .pt-tri{display:inline!important;font-size:.72rem;margin-right:2px;vertical-align:-1px}
  .pt-dt{height:15px!important;padding:0 4px!important;font-size:.56rem!important}
  .pt-bar{display:none!important}
  .p-table td.pr{grid-area:p;align-self:start;display:grid!important;justify-items:end;align-content:start;gap:1px;text-align:right;border:0!important;margin:0!important;padding:0!important}
  .pt-price{font-size:1.02rem!important;line-height:1.1}
  .pt-price small{font-size:.66rem!important}
  .p-table td.pr .hr{font-size:.64rem!important;margin:0!important}
  .p-table tbody tr.on{outline-width:1.5px!important}

  /* billing cycle: three compact segments on one line */
  #cycCards,.cyc-cards{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;min-height:0!important}
  .cyc{position:relative;display:grid!important;gap:2px!important;justify-items:center;text-align:center;padding:16px 4px 10px!important;border-radius:14px!important;min-width:0}
  .cyc{grid-template-columns:1fr!important;grid-template-areas:none!important;grid-template-rows:auto auto!important}
  .cyc>*{grid-area:auto!important;grid-column:1!important;grid-row:auto!important;justify-self:center!important}
  .cyc-h{display:block!important;white-space:nowrap}
  .cyc-h b{font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
  .cyc[aria-pressed="true"] .cyc-h b{color:var(--field)}
  .cyc-sv{position:absolute;top:-8px;left:50%;transform:translateX(-50%);height:17px;padding:0 7px!important;border-radius:999px;font-size:.6rem!important;line-height:17px;white-space:nowrap}
  .cyc-p{display:flex!important;align-items:baseline;justify-content:center;gap:2px}
  .cyc-p s,.cyc-s{display:none!important}
  .cyc-p strong{font-size:1.08rem!important}
  .cyc-p small{font-size:.66rem!important}
  #cycCards+.os-note{font-size:.76rem;margin-top:8px}

  /* operating system: server type as a slim two-way switch, versions as small tiles in a row */
  #osFam{min-height:0!important;gap:6px!important;display:grid!important;grid-template-columns:1fr 1fr!important}
  #osFam .type-card{padding:8px 10px!important;gap:8px!important;border-radius:12px}
  #osFam .type-card .tc-ico{width:30px!important;height:30px!important;font-size:1rem!important}
  #osFam .type-card .tc-txt small{display:none}
  #osNote{min-height:0!important;font-size:.74rem;margin-top:6px}
  .os-tiles{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important}
  .os-tile{flex-direction:column;justify-content:center;align-items:center;gap:6px!important;padding:10px 6px!important;text-align:center;border-radius:12px!important;min-width:0}
  .os-tile .ico{width:30px!important;height:30px!important;border-radius:9px;box-shadow:none!important}
  .os-tile .ico img{width:20px;height:20px}
  .os-tile .ico .ph{font-size:1.05rem}
  .os-tile b{display:block;font-size:.76rem!important;line-height:1.2}
  .os-tile small{display:block;font-size:.64rem!important;margin-top:2px}

  /* add-ons: text left, price and switch right, smaller copy */
  .addon{grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"t r" "d d";gap:2px 12px!important;padding:12px 0!important;align-items:center}
  .addon>div:first-child{display:contents}
  .addon>div:first-child>b{grid-area:t}
  .addon>div:first-child>.d{grid-area:d}
  .addon .rt{grid-area:r}
  .addon b{font-size:.92rem}
  .addon .d{display:block;font-size:.76rem;line-height:1.35;margin-top:2px}
  .addon .rt{justify-content:flex-end!important;gap:8px!important}
  .addon .unit{font-size:.78rem;white-space:nowrap}

  /* "We accept": every logo the same small size in one even block, UPI included */
  .pay-strip{gap:6px!important;margin-top:16px!important;font-size:.76rem!important;justify-content:center}
  .pay-strip>span:first-child{flex-basis:100%;text-align:center;margin:0 0 2px!important;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
  .pay-strip .pm-sep{display:none!important}
  .pay-strip>*:not(span:first-child){display:contents}

  /* content blocks: smaller headings, tighter reasons and questions */
  .region-h{font-size:1.4rem!important;line-height:1.15!important;margin-top:32px!important}
  .reasons{gap:0!important;margin-top:10px!important}
  .reason{padding:12px 0;border-top:1px solid var(--line)}
  .reason h3{font-size:.98rem!important;padding-top:0!important;border-top:0!important;margin-bottom:4px!important}
  .reason p{font-size:.86rem;line-height:1.5}
  .faq summary{padding:14px 0!important;font-size:.95rem!important}
  .faq details p,.faq details div{font-size:.88rem}
}

/* ================= Phones: home hero, scene and plans spacing ================= */
@media (max-width:760px){
  /* "Deploy RDP in minutes": smaller pill, the underline sits inside its own line */
  .hs-fast{gap:9px!important;margin:0 0 14px!important;padding:6px 14px 6px 7px!important}
  .hs-fast .stopwatch.sm{width:36px;height:36px}
  .hs-fast .stopwatch svg{width:100%;height:100%}
  .hs-fast .stopwatch .sw-i{font-size:.95rem}
  .hs-fast-t{gap:4px;line-height:1.15!important}
  .hs-fast-t b{font-size:.9rem!important;line-height:1.25}
  .hs-fast-t small{font-size:.7rem!important;line-height:1.2}
  .hs-fast .hl{display:inline-block;line-height:1.1;padding-bottom:2px}
  .hs-fast .hl::after{bottom:0!important;height:1.5px!important}
  /* headline: compact and still bold */
  .hs-h{font-size:clamp(1.75rem,8.4vw,2.1rem)!important;line-height:1.06!important;letter-spacing:-.035em!important;max-width:13ch!important}
  .hs-slide .lede,.hero p.lede{font-size:.94rem!important;line-height:1.5!important;margin-top:10px!important}
  /* the scene box is the blue desktop on wide screens; on phones only the windows show */
  #scene,.scene-fit #scene{background:transparent!important;box-shadow:none!important}
  #scene{margin-top:8px!important}
  /* plans: no extra gap after the locations ticker */
  main > section#plans{padding-top:30px!important}
  #plans .dk-top{margin-top:0!important}
}

/* menus: the page you are on keeps its highlight; the USA row's default glow steps back when another page is current */
.nav-links .dd.has-cur .mp-c.us:not(.picked){background:none}
.nav-links .mp-c.picked,.nav-links .dd-menu a.picked{position:relative}
.nav-links .mp-c.picked::after,.nav-links .dd-menu a.picked::after{content:"";position:absolute;right:10px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#ffbf2f;box-shadow:0 0 0 3px rgba(255,191,47,.25)}

/* the window must be the scroller on every page: WHMCS base styles pin html/body to 100% height, which with overflow-x made the
   body scroll instead of the window, so the floating menu never flattened and stuck oddly on phones */
html.whmcs-page,body.whmcs{height:auto!important;min-height:100dvh;overflow-x:clip!important;overflow-y:visible!important}

/* ---------- AI and Agents pages (tools/ai_pages.py) ---------- */
.ai-tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:8px}
.ai-tier{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-win);padding:22px 20px 20px;box-shadow:var(--shadow-soft)}
.ai-tier.rec{border:2px solid var(--field);padding:21px 19px 19px}
.ai-rec{position:absolute;top:16px;right:16px;background:var(--accent);color:var(--accent-ink);font-size:.78rem;font-weight:700;padding:3px 10px;border-radius:var(--r-pill)}
.ai-tier h3{font-family:var(--f-display);font-size:1.45rem;font-weight:800}
.ai-tier h3 span{color:var(--muted);font-weight:600;font-size:1.05rem;margin-left:4px}
.ai-price{margin-top:10px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.ai-price b{font-family:var(--f-display);font-size:1.9rem;font-weight:800}
.ai-price span{color:var(--muted);font-size:.9rem}
.ai-tier .fine{margin:2px 0 14px}
.ai-tier ul{list-style:none;display:grid;gap:8px;margin:0 0 18px;font-size:.95rem}
.ai-tier li{display:flex;gap:10px;align-items:center}
.ai-tier li .ph{color:var(--field);font-size:1.1rem}
.ai-tier .btn{margin-top:auto;width:100%}
.ai-fine{margin:14px 0 40px}
.ai-h{margin-top:0}
.ai-grid{margin-top:48px}
.ai-grid .tips{grid-template-columns:repeat(2,minmax(0,1fr))}
.ai-steps{list-style:none;counter-reset:s;display:grid;gap:14px;margin-top:18px}
.ai-steps li{counter-increment:s;display:grid;grid-template-columns:40px 1fr;column-gap:14px;align-items:start}
.ai-steps li::before{content:counter(s);grid-row:span 2;width:40px;height:40px;border-radius:50%;background:var(--field);color:#fff;display:grid;place-items:center;font-weight:700}
.ai-steps b{font-size:1.02rem}
.ai-steps span{color:var(--muted);font-size:.96rem}
.ai-why{list-style:none;display:grid;gap:14px;margin:0 0 18px}
.ai-why li{display:grid;gap:2px}
.ai-why span{color:var(--muted);font-size:.93rem}
.ai-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:8px 0 48px}
.ai-card{display:grid;grid-template-columns:44px 1fr;column-gap:14px;row-gap:2px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-win);padding:18px;text-decoration:none;color:var(--ink);transition:border-color .2s,transform .25s var(--ease)}
.ai-card:hover{border-color:var(--field);transform:translateY(-2px)}
.ai-card .mu-i{grid-row:span 3}
.ai-card b{font-size:1.05rem}
.ai-card span:not(.mu-i){color:var(--muted);font-size:.92rem}
.ai-card em{font-style:normal;font-weight:700;color:var(--field);font-size:.92rem}
@media (max-width:980px){.ai-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.ai-tiers,.ai-cards,.ai-grid .tips{grid-template-columns:1fr}}
.app-note{display:flex;align-items:center;gap:10px;margin-top:14px;padding:10px 14px;border-radius:var(--r-ctl);background:var(--surface-2);font-size:.95rem}
.app-note .ph{color:var(--field);font-size:1.2rem}
.app-note .link-btn{margin-left:auto}