/* ── Tokens ─────────────────────────────────────────────
   Two themes, alternating by section. Flat colour only: no gradients, glows or blur. */
:root{
  --frame:1200px;
  --pad:32px;
  --green:#2FB463;
  --sans:"Geist", ui-sans-serif, system-ui, sans-serif;
  --mono:"Geist Mono", ui-monospace, Menlo, monospace;
}
.dark{
  --bg:#000000; --surface:#0A0A0A; --raise:#161616; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --text:#EDEDED; --muted:#A1A1A1; --faint:#6E6E6E; --link:#EDEDED;
  --blue:#EDEDED; --blue-hover:#FFFFFF; --on-blue:#000000;
  color-scheme:dark;
}
.light{
  --bg:#FFFFFF; --surface:#FAFAFA; --raise:#FFFFFF; --line:#EAEAEA; --line-2:#D4D4D4;
  --text:#0A0A0A; --muted:#666666; --faint:#8F8F8F; --link:#0A0A0A;
  --blue:#0A0A0A; --blue-hover:#262626; --on-blue:#FFFFFF;
  color-scheme:light;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; font-family:var(--sans); font-size:16px; line-height:1.6; background:#000; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:4px; }
.num{ font-variant-numeric:tabular-nums; }
.mono{ font-family:var(--mono); font-size:13px; letter-spacing:0; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ── Sections + column rails ───────────────────────────── */
.sec{ position:relative; background:var(--bg); color:var(--text); }
.frame{ position:relative; max-width:calc(var(--frame) + var(--pad)*2); margin:0 auto; padding:0 var(--pad); }
.rails{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.rails .frame{ height:100%; }
.rails .in{ position:relative; height:100%; border-left:1px solid var(--line); border-right:1px solid var(--line); }
.rails i{ position:absolute; top:0; bottom:0; width:1px; background:var(--line); }
.rails i:nth-child(1){ left:25%; } .rails i:nth-child(2){ left:50%; } .rails i:nth-child(3){ left:75%; }
.sec > .frame{ z-index:1; }
.rule{ border-top:1px solid var(--line); }
@media (max-width:1023px){ .rails i:nth-child(1), .rails i:nth-child(3){ display:none; } }
@media (max-width:719px){ :root{ --pad:16px; } .rails i{ display:none; } }

/* ── Type ─────────────────────────────────────────────── */
h1,h2,h3{ margin:0; font-weight:500; letter-spacing:-0.035em; }
.h-xl{ font-size:clamp(44px, 6.4vw, 84px); line-height:1.0; letter-spacing:-0.045em; }
.h-l{ font-size:clamp(34px, 4.4vw, 56px); line-height:1.05; }
.h-m{ font-size:clamp(26px, 2.8vw, 36px); line-height:1.12; letter-spacing:-0.03em; }
.lede{ font-size:18px; line-height:1.55; color:var(--muted); max-width:34em; margin:0; }
.p{ color:var(--muted); margin:0; }
.statement{ font-size:clamp(26px, 3.2vw, 42px); line-height:1.18; letter-spacing:-0.03em; font-weight:500; margin:0; max-width:24em; }
.statement span{ color:var(--faint); }
.two-tone span{ color:var(--faint); display:block; }
.label{ font-family:var(--mono); font-size:12px; color:var(--faint); }

/* ── Buttons ──────────────────────────────────────────── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 20px; border-radius:999px; font-size:15px; font-weight:500; text-decoration:none; border:1px solid transparent; cursor:pointer; transition:background .15s, border-color .15s, color .15s; white-space:nowrap; }
.btn-sm{ height:34px; padding:0 14px; font-size:14px; }
.dark .btn-primary{ background:#EDEDED; color:#000; }
.dark .btn-primary:hover{ background:#fff; }
.light .btn-primary{ background:#0A0A0A; color:#fff; }
.light .btn-primary:hover{ background:#262626; }
.btn-blue{ background:var(--blue); color:var(--on-blue); }
.btn-blue:hover{ background:var(--blue-hover); }
.btn-ghost{ border-color:var(--line-2); color:var(--text); background:transparent; }
.btn-ghost:hover{ border-color:var(--muted); }
.link{ color:var(--link); text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:3px; font-weight:500; }
.link:hover{ text-decoration:underline; text-underline-offset:3px; }

/* ── Header ───────────────────────────────────────────── */
.hdr{ color:var(--text); position:sticky; top:0; z-index:50; background:var(--bg); border-bottom:1px solid var(--line); }
.hdr .bar{ height:64px; display:flex; align-items:center; gap:28px; }
.hdr .logo img{ height:22px; width:auto; }
.nav{ display:flex; gap:4px; margin-left:auto; margin-right:auto; }
.nav > li{ list-style:none; position:static; }
.nav{ padding:0; margin-block:0; }
.nav-btn{ background:none; border:0; height:36px; padding:0 12px; border-radius:8px; font-size:14px; color:var(--muted); cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.nav-btn:hover, .nav-btn[aria-expanded="true"]{ color:var(--text); background:var(--surface); }
.nav-btn svg{ width:10px; height:10px; transition:transform .2s; }
.nav-btn[aria-expanded="true"] svg{ transform:rotate(180deg); }
.hdr-act{ display:flex; align-items:center; gap:8px; }
.hdr-act .login{ font-size:14px; color:var(--muted); text-decoration:none; padding:0 10px; }
.hdr-act .login:hover{ color:var(--text); }
.menu-btn{ display:none; }

/* Menu panel */
.panel{ position:absolute; left:0; right:0; top:64px; background:var(--surface); border-bottom:1px solid var(--line); display:none; }
.panel.open{ display:block; animation:drop .18s ease-out; }
@keyframes drop{ from{ opacity:0; transform:translateY(-4px); } }
/* Card menu (owner pick A · Card, 2026-10-29): a floating card centred under its nav item */
.panel{ top:58px; right:auto; width:600px; border:1px solid var(--line-2); border-bottom:1px solid var(--line-2); border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.14); overflow:hidden; }
.panel.narrow{ width:420px; }
.panel .items{ display:grid; grid-template-columns:1fr 1fr; gap:2px; padding:8px; background:var(--raise); }
.panel.narrow .items{ grid-template-columns:1fr; }
.panel .it{ display:flex; gap:12px; padding:12px; border-radius:10px; text-decoration:none; transition:background .15s; }
.panel .it:hover{ background:var(--surface); }
.panel .it:hover .tile{ border-color:var(--muted); }
.panel .it b{ display:block; font-weight:500; font-size:14.5px; color:var(--text); }
.panel .it span{ display:block; font-size:13px; line-height:1.45; color:var(--muted); margin-top:2px; }
.panel .it em{ display:block; font:normal 12px var(--mono); color:var(--faint); margin-top:6px; }
.panel .foot a{ white-space:nowrap; }
.panel .foot{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 20px; border-top:1px solid var(--line); background:var(--surface); font-size:13px; color:var(--muted); }
.tile{ width:34px; height:34px; border-radius:9px; border:1px solid var(--line-2); background:var(--raise); display:grid; place-items:center; flex:none; color:var(--text); }
.tile svg{ width:16px; height:16px; }

/* Charcoal list menu (owner pick C · Charcoal list, 2026-10-29): a small dark card under the white header.
   Names left, starting price right in mono, no icons. Same placement script as before. */
.panel.cl{ width:380px; background:#0A0A0A; color:#EDEDED; border:0; border-radius:14px; box-shadow:0 0 0 1px #222, 0 24px 60px -16px rgba(0,0,0,.4); padding:6px; overflow:visible; }
.panel.cl a{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 12px; border-radius:9px; text-decoration:none; font-size:14px; color:#EDEDED; transition:background .12s; }
.panel.cl a:hover, .panel.cl a:focus-visible{ background:#1A1A1A; }
.panel.cl a span{ display:flex; flex-direction:column; }
.panel.cl a small{ font-size:12px; color:#8F8F8F; }
.panel.cl a i{ font:normal 12px var(--mono); color:#8F8F8F; white-space:nowrap; }
.panel.cl a:hover i{ color:#EDEDED; }
.panel.cl .hr{ height:1px; background:#222; margin:6px 8px; }
.panel.cl .lbl{ display:block; font:11px var(--mono); color:#6E6E6E; padding:8px 12px 2px; }
.panel.cl .ft{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 12px 8px; font-size:12.5px; color:#8F8F8F; }
.panel.cl .ft a{ padding:0; font-size:12.5px; text-decoration:underline; text-decoration-color:#444; text-underline-offset:3px; white-space:nowrap; }
.panel.cl .ft a:hover{ background:none; text-decoration-color:#EDEDED; }
.panel.cl:focus-visible, .panel.cl a:focus-visible{ outline-color:#EDEDED; }

/* Mobile sheet */
.sheet{ color:var(--text); position:fixed; inset:64px 0 0 0; background:var(--bg); z-index:49; overflow-y:auto; padding:8px var(--pad) 40px; display:none; border-top:1px solid var(--line); }
.sheet.open{ display:block; }
.sheet details{ border-bottom:1px solid var(--line); }
.sheet summary{ list-style:none; display:flex; justify-content:space-between; align-items:center; padding:18px 0; font-size:20px; font-weight:500; cursor:pointer; letter-spacing:-0.02em; }
.sheet summary::-webkit-details-marker{ display:none; }
.sheet summary::after{ content:"+"; font-weight:300; color:var(--muted); font-size:24px; }
.sheet details[open] summary::after{ content:"–"; }
.sheet details .mi{ margin:0; padding:10px 0; }
.sheet .s-link{ display:block; padding:18px 0; font-size:20px; font-weight:500; text-decoration:none; border-bottom:1px solid var(--line); letter-spacing:-0.02em; }
.sheet .s-act{ display:grid; gap:10px; margin-top:28px; }
.sheet .s-act .btn{ height:48px; }

@media (max-width:1023px){
  .nav, .hdr-act .login, .hdr-act .btn-ghost{ display:none; }
  .hdr-act{ margin-left:auto; }
  .menu-btn{ display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; background:none; border:1px solid var(--line-2); border-radius:999px; cursor:pointer; }
  .menu-btn svg{ width:16px; height:16px; }
}

/* ── Hero ─────────────────────────────────────────────── */
.hero{ padding:96px 0 0; }
.hero-copy{ display:grid; grid-template-columns:repeat(4, 1fr); padding:0 24px; }
.hero-copy h1{ grid-column:1 / span 3; padding-right:24px; }
.hero-copy .side{ grid-column:1 / span 2; margin-top:28px; padding-right:24px; }
.hero-copy .cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:32px; }
.hero-note{ grid-column:3 / span 2; align-self:end; padding-left:24px; display:grid; gap:10px; font-size:14px; color:var(--muted); }
.hero-note div{ display:flex; gap:10px; align-items:baseline; }
.hero-note b{ color:var(--text); font-weight:500; }
.dot{ width:7px; height:7px; border-radius:50%; background:var(--green); flex:none; transform:translateY(-1px); }

/* Client-area illustration */
.stage{ margin-top:72px; padding:0 0 0; }
.app{ position:relative; border:1px solid var(--line-2); border-bottom:0; border-radius:14px 14px 0 0; background:var(--surface); overflow:hidden; }
.app-top{ height:44px; display:flex; align-items:center; gap:16px; padding:0 16px; border-bottom:1px solid var(--line); }
.app-top .dots{ display:flex; gap:7px; }
.app-top .dots i{ width:10px; height:10px; border-radius:50%; background:var(--line-2); }
.app-top .url{ margin:0 auto; font:12px var(--mono); color:var(--faint); background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:3px 14px; }
.app-body{ display:grid; grid-template-columns:220px 1fr 340px; min-height:440px; }
.side-nav{ border-right:1px solid var(--line); padding:18px 12px; display:flex; flex-direction:column; gap:2px; }
.side-nav .brand{ display:flex; align-items:center; gap:10px; padding:4px 10px 18px; font-size:14px; font-weight:500; }
.side-nav .brand img{ width:20px; height:20px; }
.side-nav a{ display:flex; justify-content:space-between; align-items:center; padding:7px 10px; border-radius:7px; font-size:13.5px; color:var(--muted); text-decoration:none; }
.side-nav a.on{ background:var(--raise); color:var(--text); }
.side-nav a small{ font:11px var(--mono); color:var(--faint); }
.side-nav .sep{ height:1px; background:var(--line); margin:12px 10px; }
.list{ padding:18px 0; border-right:1px solid var(--line); min-width:0; }
.list-h{ display:flex; justify-content:space-between; align-items:center; padding:0 20px 14px; border-bottom:1px solid var(--line); }
.list-h h3{ font-size:15px; letter-spacing:-0.01em; }
.list-h span{ font:12px var(--mono); color:var(--faint); }
.svc{ display:grid; grid-template-columns:auto 1fr auto; gap:4px 12px; align-items:center; padding:13px 20px; border-bottom:1px solid var(--line); font-size:13.5px; }
.svc.on{ background:var(--raise); box-shadow:inset 2px 0 0 var(--blue); }
.svc .ico{ width:28px; height:28px; border-radius:7px; border:1px solid var(--line-2); display:grid; place-items:center; grid-row:span 2; }
.svc .ico svg{ width:14px; height:14px; color:var(--muted); }
.svc b{ font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.svc small{ color:var(--faint); font-size:12px; grid-column:2; }
.svc .st{ grid-row:span 2; display:flex; align-items:center; gap:7px; font-size:12px; color:var(--muted); }
.detail{ padding:18px 20px; display:flex; flex-direction:column; gap:18px; min-width:0; }
.detail h3{ font-size:15px; letter-spacing:-0.01em; }
.detail .sub{ font-size:12px; color:var(--faint); margin-top:2px; }
.meter{ display:grid; gap:7px; }
.meter .row{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted); }
.meter .row b{ color:var(--text); font-weight:500; }
.meter .bar{ height:4px; border-radius:2px; background:var(--line); overflow:hidden; }
.meter .bar i{ display:block; height:100%; width:var(--w); background:var(--blue); border-radius:2px; transform-origin:left; }
.checks{ display:grid; gap:0; border-top:1px solid var(--line); }
.checks div{ display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:12.5px; color:var(--muted); }
.checks div b{ color:var(--text); font-weight:500; display:flex; align-items:center; gap:7px; }
.cap{ display:flex; justify-content:space-between; gap:16px; padding:14px 24px 18px; font-size:12px; color:var(--faint); }

/* Load sequence: the one orchestrated moment */
@media (prefers-reduced-motion:no-preference){
  .app [data-seq]{ opacity:0; transform:translateY(6px); transition:opacity .5s ease, transform .5s ease; transition-delay:calc(var(--i, 0) * 70ms + 150ms); }
  .app.go [data-seq]{ opacity:1; transform:none; }
  .app .meter .bar i{ transform:scaleX(0); transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .7s; }
  .app.go .meter .bar i{ transform:scaleX(1); }
}

@media (max-width:1023px){
  .hero-copy h1{ grid-column:1 / -1; }
  .hero-copy .side{ grid-column:1 / -1; }
  .hero-note{ grid-column:1 / -1; padding-left:0; margin-top:36px; }
  .app-body{ grid-template-columns:1fr 300px; }
  .side-nav{ display:none; }
}
@media (max-width:719px){
  .hero{ padding-top:56px; }
  .stage{ margin-top:48px; }
  .app-body{ grid-template-columns:1fr; }
  .list{ border-right:0; }
  .list .svc:nth-child(n+4){ display:none; }
  .detail{ border-top:1px solid var(--line); }
  .app-top .url{ display:none; }
  .hero-copy .cta .btn{ flex:1; }
  .hero-copy{ padding:0 16px; }
  .cap{ padding:12px 16px 16px; flex-direction:column; gap:4px; }
}

/* ── Proof strip ─────────────────────────────────────── */
.proof{ display:grid; grid-template-columns:repeat(4, 1fr); border-top:1px solid var(--line); }
.proof > div{ padding:36px 24px 40px; }
.proof > div + div{ border-left:1px solid transparent; }
.proof b{ display:block; font-size:clamp(30px, 3vw, 40px); font-weight:500; letter-spacing:-0.04em; line-height:1; }
.proof span{ display:block; margin-top:10px; font-size:14px; color:var(--muted); }
.names{ border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px 36px; padding:30px 24px; }
.names span{ font-size:17px; font-weight:500; letter-spacing:-0.02em; color:var(--muted); }
.names .label{ width:100%; }
@media (max-width:1023px){ .proof{ grid-template-columns:repeat(2, 1fr); } .proof > div:nth-child(n+3){ border-top:1px solid var(--line); } }
@media (max-width:719px){ .proof > div{ padding:28px 16px; } .names{ padding:24px 16px; justify-content:flex-start; } }

/* ── Statement + three line drawings ──────────────────── */
.intro{ padding:128px 0 0; }
.intro .statement{ padding:0 24px; }
.intro .eyebrow{ display:block; padding:0 24px 20px; color:var(--muted); }
.trio{ display:grid; grid-template-columns:repeat(3, 1fr); margin-top:96px; border-top:1px solid var(--line); }
.trio > div{ padding:40px 24px 72px; }
.trio > div + div{ border-left:1px solid var(--line); }
.trio figure{ margin:0 0 36px; height:200px; display:grid; place-items:center; }
.trio svg{ width:220px; height:200px; color:var(--muted); }
.trio h3{ font-size:17px; letter-spacing:-0.01em; margin-bottom:8px; }
.trio p{ color:var(--muted); margin:0; font-size:15px; max-width:26em; }
@media (prefers-reduced-motion:no-preference){
  .trio .float{ animation:float 6s ease-in-out infinite; }
  .trio .scan{ animation:scan 3.2s ease-in-out infinite; }
  @keyframes scan{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(70px); } }
  @keyframes float{ 50%{ transform:translateY(-6px); } }
}
@media (max-width:1023px){ .trio{ grid-template-columns:1fr; } .trio > div + div{ border-left:0; border-top:1px solid var(--line); } .trio figure{ justify-content:start; } }
@media (max-width:719px){ .intro{ padding-top:88px; } .intro .statement, .intro .eyebrow{ padding-left:16px; padding-right:16px; } .trio{ margin-top:64px; } .trio > div{ padding:32px 16px 48px; } }

/* ── Split heading (heading left, text right) ─────────── */
.split{ display:grid; grid-template-columns:repeat(4, 1fr); padding:112px 0 64px; }
.split h2{ grid-column:1 / span 2; padding:0 24px; }
.split .right{ grid-column:3 / span 2; padding:0 24px; align-self:end; display:grid; gap:20px; justify-items:start; }
.split .right p{ font-size:18px; line-height:1.55; color:var(--muted); margin:0; max-width:30em; }
@media (max-width:1023px){ .split{ grid-template-columns:1fr; gap:24px; } .split h2, .split .right{ grid-column:1; } }
@media (max-width:719px){ .split{ padding:80px 0 40px; } .split h2, .split .right{ padding:0 16px; } }

/* ── Plans (light, PlanetScale-style boxes) ───────────── */
.plans-ctl{ display:flex; justify-content:space-between; align-items:end; gap:16px; flex-wrap:wrap; padding:0 24px 20px; }
.tabs{ display:flex; border:1px solid var(--line-2); border-radius:10px; padding:3px; gap:2px; overflow-x:auto; scrollbar-width:none; max-width:100%; }
.tabs::-webkit-scrollbar{ display:none; }
.tab{ border:0; background:none; height:34px; padding:0 14px; border-radius:7px; font-size:14px; color:var(--muted); cursor:pointer; white-space:nowrap; }
.tab:hover{ color:var(--text); }
.tab[aria-selected="true"]{ background:#0A0A0A; color:#fff; }
.cycle{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--muted); }
.switch{ position:relative; width:42px; height:24px; border-radius:999px; background:var(--line-2); border:0; cursor:pointer; padding:0; transition:background .2s; }
.switch::after{ content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .2s; }
.switch[aria-checked="true"]{ background:var(--blue); }
.switch[aria-checked="true"]::after{ transform:translateX(18px); }
.switch:disabled{ opacity:.45; cursor:not-allowed; }
.cycle .on{ color:var(--text); font-weight:500; }
.cycle-note{ font-size:13px; color:var(--faint); }

/* Size slider (modelled on the FlyNode cloud page): one charcoal card with the big figure, the scale, and the plan cards */
.cycle .free{ font:12px var(--mono); color:var(--text); border:1px solid var(--line-2); border-radius:999px; padding:3px 10px; }
.switch:disabled ~ .free{ color:var(--faint); }
.pz{ --pct:44.44%; border-radius:20px; background:#0A0A0A; color:var(--text); overflow:hidden; border:1px solid #1f1f1f; margin:0 24px; }
.pz-top{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 24px; border-bottom:1px solid var(--line); }
.pz-prod{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:500; white-space:nowrap; }
.pz-prod .tile{ width:28px; height:28px; border-radius:8px; }
.pz-prod .tile svg{ width:14px; height:14px; }
.pz-meta{ display:flex; align-items:center; gap:8px; font:12px var(--mono); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pz-main{ padding:48px 32px 36px; }
.pz-fig{ text-align:center; }
.pz-fig b{ display:inline-block; font-size:clamp(56px, 7vw, 88px); font-weight:500; letter-spacing:-0.05em; line-height:1; }
.pz-fig p{ margin:12px 0 0; font-size:15px; color:var(--muted); }
.tick{ animation:tick .35s cubic-bezier(.2,.8,.2,1); }
@keyframes tick{ from{ opacity:0; transform:translateY(40%); } }
.pz-slide{ max-width:980px; margin:44px auto 0; }
.pz-track{ position:relative; height:44px; }
.pz-track input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:grab; z-index:2; }
.pz-track input:active{ cursor:grabbing; }
.pz-rail{ position:absolute; left:14px; right:14px; top:50%; height:6px; margin-top:-3px; border-radius:3px; background:rgba(255,255,255,.1); pointer-events:none; }
.pz-fill{ position:absolute; left:0; top:0; bottom:0; width:var(--pct); border-radius:3px; background:#EDEDED; transition:width .3s ease-out; }
#pz-stops span{ position:absolute; top:50%; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; background:rgba(255,255,255,.25); }
#pz-stops span.on{ background:rgba(0,0,0,.5); }
.pz-thumb{ position:absolute; left:var(--pct); top:50%; width:28px; height:28px; margin:-14px 0 0 -14px; border-radius:50%; background:#fff; box-shadow:0 0 0 6px rgba(255,255,255,.12), 0 6px 18px rgba(0,0,0,.6); transition:left .3s cubic-bezier(.22,1,.36,1), box-shadow .2s; }
.pz-track input:focus-visible + .pz-rail .pz-thumb{ box-shadow:0 0 0 8px rgba(255,255,255,.3), 0 6px 18px rgba(0,0,0,.6); }
.pz-labels{ position:relative; height:42px; margin:0 14px; }
.pz-labels button{ position:absolute; top:0; transform:translateX(-50%); background:none; border:0; padding:2px 4px; cursor:pointer; color:var(--faint); text-align:center; white-space:nowrap; }
.pz-labels button:hover, .pz-labels button.on{ color:var(--text); }
.pz-labels b{ display:block; font-size:13px; font-weight:500; font-variant-numeric:tabular-nums; }
.pz-labels span{ display:block; font-size:11px; }
.pz-sum{ display:flex; justify-content:center; align-items:center; gap:24px; margin-top:20px; flex-wrap:wrap; }
.pz-sum p{ margin:0; font-size:15px; color:var(--muted); }
.pz-sum p b{ color:var(--text); font-weight:500; display:inline-block; }
.pz-sum .sep{ margin:0 8px; color:var(--faint); }
.pz-sum .btn{ height:48px; padding:0 26px; }
.sec .pz .btn-primary{ background:#EDEDED; color:#000; }
.sec .pz .btn-primary:hover{ background:#fff; }
.sec .pz .btn-ghost{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:var(--text); }
.sec .pz .btn-ghost:hover{ background:rgba(255,255,255,.1); }
.pz-cards{ border-top:1px solid var(--line); background:#050505; padding:24px 12px; overflow:hidden; }
.pz-cards ul{ list-style:none; margin:0; padding:0; display:flex; transform:translateX(calc(var(--s3, 0) * -100% / 3)); transition:transform .5s cubic-bezier(.22,1,.36,1); }
.pz-cards li{ flex:0 0 33.3333%; padding:0 8px; }
.pz-card{ height:100%; display:flex; flex-direction:column; border-radius:16px; background:#111; box-shadow:0 0 0 1px rgba(255,255,255,.08); padding:22px 20px 8px; cursor:pointer; transition:background .3s, box-shadow .3s; }
.pz-card:hover{ background:#161616; }
.pz-card.on{ background:#1a1a1a; box-shadow:0 0 0 1.5px #EDEDED; cursor:default; }
.pz-ch{ display:flex; align-items:center; gap:10px; }
.pz-ch h3{ font-size:18px; letter-spacing:-0.02em; }
.pz-badge:empty{ display:none; }
.pz-badge{ font:11px var(--mono); padding:2px 8px; border-radius:999px; border:1px solid var(--line-2); color:var(--muted); }
.pz-card.on .pz-badge{ background:#EDEDED; color:#000; border-color:#EDEDED; }
.pz-use{ margin:4px 0 0; font-size:13px; color:var(--muted); min-height:2.6em; }
.pz-price{ margin-top:14px; display:flex; align-items:baseline; gap:4px; }
.pz-price b{ font-size:36px; font-weight:500; letter-spacing:-0.04em; line-height:1; }
.pz-price span{ font-size:14px; color:var(--muted); }
.pz-bill{ margin:6px 0 0; font-size:12.5px; color:var(--faint); min-height:1.6em; }
.pz-card .btn{ margin-top:16px; width:100%; height:44px; border-radius:12px; }
.pz-card dl{ margin:18px -20px 0; padding:4px 20px; border-top:1px solid var(--line); }
.pz-card dl div{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:13.5px; }
.pz-card dl div:last-child{ border-bottom:0; }
.pz-card dt{ color:var(--muted); }
.pz-card dd{ margin:0; color:var(--text); font-weight:500; text-align:right; }
.pz-checks{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 24px; padding:16px 24px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted); }
.pz-checks span{ display:inline-flex; align-items:center; gap:6px; }
.pz-checks svg{ width:13px; height:13px; color:var(--green); }
.pz-sample{ margin:16px 24px 0; font-size:12.5px; color:var(--faint); }
.plans-end{ height:112px; }
@media (max-width:719px){
  .pz{ margin:0 16px; border-radius:16px; }
  .pz-top{ padding:12px 16px; }
  .pz-meta span{ display:none; }
  .pz-main{ padding:36px 16px 28px; }
  .pz-labels button:nth-child(even){ display:none; }
  .pz-labels span{ display:none; }
  .pz-sum{ flex-direction:column; gap:14px; text-align:center; }
  .pz-sum .btn{ width:100%; }
  .pz-cards ul{ transform:translateX(calc(var(--s1, 0) * -100%)); }
  .pz-cards li{ flex-basis:100%; }
  .pz-sample{ margin:14px 16px 0; }
  .plans-end{ height:80px; }
  .plans-ctl{ padding:0 16px 20px; }
  .tabs{ width:100%; }
}

/* ── Product overview (homepage): six boxes, each a short line, a from price and a link ── */
.prods{ display:grid; grid-template-columns:repeat(3, 1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.prod{ display:flex; flex-direction:column; gap:10px; padding:32px 24px 30px; text-decoration:none; min-height:250px; transition:background .15s; }
.prod:nth-child(n+4){ border-top:1px solid var(--line); }
.prod:not(:nth-child(3n+1)){ border-left:1px solid var(--line); }
.prod:hover{ background:var(--surface); }
.prod svg{ width:20px; height:20px; margin-bottom:18px; }
.prod h3{ font-size:20px; letter-spacing:-0.02em; }
.prod p{ margin:0; font-size:14.5px; color:var(--muted); max-width:24em; }
.prod .from{ margin-top:auto; padding-top:20px; display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:14px; color:var(--muted); }
.prod .from b{ font-size:24px; font-weight:500; letter-spacing:-0.03em; color:var(--text); }
.prod .go{ font-size:14px; color:var(--text); font-weight:500; white-space:nowrap; }
.prod:hover .go{ text-decoration:underline; text-underline-offset:3px; }
.prods-end{ height:112px; }
@media (max-width:1023px){ .prods{ grid-template-columns:repeat(2, 1fr); } .prod:nth-child(n){ border-left:0; border-top:0; } .prod:nth-child(n+3){ border-top:1px solid var(--line); } .prod:nth-child(even){ border-left:1px solid var(--line); } }
@media (max-width:719px){ .prods{ grid-template-columns:1fr; } .prod:nth-child(n){ border-left:0; } .prod + .prod{ border-top:1px solid var(--line); } .prod{ padding:28px 16px; min-height:0; } .prods-end{ height:80px; } }

/* ── Product page hero ── */
.page-hero{ padding-bottom:96px; }
.crumb{ grid-column:1 / -1; margin-bottom:28px; }
.crumb a{ color:inherit; text-decoration:none; }
.crumb a:hover{ color:var(--text); }
.plans-ctl.solo{ align-items:center; padding-top:8px; border-top:1px solid var(--line); padding-top:28px; }
@media (max-width:719px){ .page-hero{ padding-bottom:64px; } }

/* ── Compare table (web hosting page): all ten sizes side by side, scrolls inside its box on small screens ── */
.cmp-wrap{ margin:0 24px; border:1px solid var(--line); border-radius:14px; overflow-x:auto; background:var(--bg); }
.cmp{ border-collapse:collapse; width:100%; font-size:13.5px; }
.cmp th, .cmp td{ padding:12px 8px; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap; font-variant-numeric:tabular-nums; }
.cmp thead th{ font-weight:500; font-size:14.5px; color:var(--text); background:var(--surface); }
.cmp th:first-child, .cmp td:first-child{ text-align:left; white-space:normal; width:150px; position:sticky; left:0; background:var(--bg); color:var(--muted); font-weight:400; box-shadow:1px 0 0 var(--line); }
.cmp thead th:first-child{ background:var(--surface); }
.cmp tr.price td{ color:var(--text); font-weight:500; font-size:15px; }
.cmp tbody tr:last-child td{ border-bottom:0; }
.cmp td a{ display:inline-flex; height:30px; align-items:center; padding:0 12px; border-radius:999px; border:1px solid var(--line-2); text-decoration:none; font-size:13px; color:var(--text); }
.cmp td a:hover{ background:#0A0A0A; color:#fff; border-color:#0A0A0A; }
.cmp .pop{ background:var(--surface); }
.cmp-note{ margin:14px 24px 0; font-size:12.5px; color:var(--faint); }
@media (max-width:1180px){ .cmp{ min-width:1100px; } }
@media (max-width:719px){ .cmp-wrap{ margin:0 16px; } .cmp-note{ margin:12px 16px 0; } }

/* ── Facts (columns of short items) ───────────────────── */
.facts{ display:grid; grid-template-columns:repeat(4, 1fr); border-top:1px solid var(--line); }
.fact{ padding:32px 24px 40px; }
.fact:nth-child(n+5){ border-top:1px solid var(--line); }
.fact svg{ width:20px; height:20px; color:var(--text); margin-bottom:28px; }
.fact h3{ font-size:16px; letter-spacing:-0.01em; margin-bottom:6px; }
.fact p{ font-size:14.5px; color:var(--muted); margin:0; line-height:1.55; }
.facts-end{ height:112px; border-top:1px solid var(--line); }
@media (max-width:1023px){ .facts{ grid-template-columns:repeat(2, 1fr); } .fact:nth-child(n+3){ border-top:1px solid var(--line); } }
@media (max-width:719px){ .facts{ grid-template-columns:1fr; } .fact + .fact{ border-top:1px solid var(--line); } .fact{ padding:28px 16px 32px; } .facts-end{ height:80px; } }

/* ── Security console (dark) ──────────────────────────── */
.console{ display:grid; grid-template-columns:repeat(2, 1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.console > div{ padding:32px 24px 36px; min-width:0; }
.console > div + div{ border-left:1px solid var(--line); }
.win{ border:1px solid var(--line-2); border-radius:12px; background:var(--surface); overflow:hidden; }
.win-h{ display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); font-size:13px; }
.win-h b{ font-weight:500; }
.win-h span{ font:12px var(--mono); color:var(--faint); }
.log{ font:12.5px/1.9 var(--mono); padding:14px 16px; color:var(--muted); margin:0; white-space:pre-wrap; }
.log em{ font-style:normal; color:var(--green); }
.log u{ text-decoration:none; color:var(--text); }
.restore{ display:grid; }
.restore div{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); font-size:13px; color:var(--muted); }
.restore div:last-child{ border-bottom:0; }
.restore b{ color:var(--text); font-weight:500; }
.restore button{ border:1px solid var(--line-2); background:none; border-radius:999px; height:28px; padding:0 12px; font-size:12.5px; cursor:pointer; color:var(--text); }
.restore button:hover{ border-color:var(--muted); }
.restore button[data-done]{ color:var(--green); border-color:transparent; }
.console h3{ font-size:17px; letter-spacing:-0.01em; margin:28px 0 6px; }
.console p{ font-size:15px; color:var(--muted); margin:0; max-width:30em; }
.console .illus{ margin-top:14px; font-size:12px; color:var(--faint); }
.sec-list{ display:grid; grid-template-columns:repeat(4, 1fr); }
.sec-list div{ padding:24px 24px 28px; font-size:14.5px; color:var(--muted); }
.sec-list b{ display:block; color:var(--text); font-weight:500; margin-bottom:4px; font-size:15px; }
@media (max-width:1023px){ .console{ grid-template-columns:1fr; } .console > div + div{ border-left:0; border-top:1px solid var(--line); } .sec-list{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:719px){ .console > div{ padding:24px 16px 28px; } .sec-list{ grid-template-columns:1fr; } .sec-list div{ padding:18px 16px; border-top:1px solid var(--line); } }

/* ── Support ─────────────────────────────────────────── */
.support{ display:grid; grid-template-columns:repeat(4, 1fr); border-top:1px solid var(--line); }
.support > div{ padding:36px 24px 40px; }
.support .big{ grid-column:span 2; }
.support .big b{ display:block; font-size:clamp(64px, 9vw, 128px); font-weight:500; letter-spacing:-0.06em; line-height:.9; }
.support .big span{ display:block; margin-top:16px; color:var(--muted); max-width:22em; }
.contact{ display:grid; align-content:start; gap:0; }
.contact a{ display:flex; flex-direction:column; padding:14px 0; border-bottom:1px solid var(--line); text-decoration:none; }
.contact a:first-child{ border-top:1px solid var(--line); }
.contact a b{ font-weight:500; font-size:16px; }
.contact a span{ font-size:13px; color:var(--muted); }
.contact a:hover b{ color:var(--link); }
@media (max-width:1023px){ .support{ grid-template-columns:repeat(2, 1fr); } .support .big{ grid-column:1 / -1; } }
@media (max-width:719px){ .support{ grid-template-columns:1fr; } .support > div{ padding:28px 16px; } }

/* ── Reviews (light): heading left, two drifting columns right ─ */
.rv{ display:grid; grid-template-columns:repeat(3, 1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:112px; }
.rv-head{ padding:56px 24px; display:flex; flex-direction:column; justify-content:flex-start; position:sticky; top:64px; align-self:start; align-items:flex-start; gap:18px; }
.rv-head p{ margin:0; font-size:17px; color:var(--muted); max-width:22em; }
.rv-score{ display:flex; gap:28px; padding:6px 0; }
.rv-score b{ display:block; font-size:32px; font-weight:500; letter-spacing:-0.04em; line-height:1; }
.rv-score span{ font-size:13px; color:var(--muted); }
.rv-head .btn{ margin-top:8px; }
.rv-cols{ grid-column:span 2; height:1040px; display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:0 24px; border-left:1px solid var(--line); background:var(--surface);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); mask-image:linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); }
.rv-col{ overflow:hidden; }
.rv-col.one{ display:none; }
.rv-run, .rv-dup{ display:flex; flex-direction:column; gap:20px; }
.rv-dup{ padding-top:20px; }
@media (prefers-reduced-motion:no-preference){
  .rv-run{ animation:rv var(--t) linear infinite; }
  .rv-run.rev{ animation-direction:reverse; }
  .rv-cols:hover .rv-run{ animation-play-state:paused; }
  @keyframes rv{ to{ transform:translateY(-50%); } }
}
.rv-card{ margin:0; background:#fff; border-radius:16px; padding:24px; box-shadow:0 0 0 1px var(--line), 0 1px 2px rgba(0,0,0,.04), 0 12px 24px -16px rgba(0,0,0,.14); display:flex; flex-direction:column; gap:16px; }
.rv-card .stars{ display:flex; gap:2px; color:var(--text); }
.rv-card .stars svg{ width:15px; height:15px; }
.rv-card blockquote{ margin:0; font-size:15.5px; line-height:1.55; color:var(--text); }
.rv-card figcaption{ display:flex; align-items:center; gap:12px; padding-top:16px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); }
.rv-card figcaption b{ display:block; color:var(--text); font-weight:500; font-size:14.5px; }
.rv-card .av{ width:40px; height:40px; border-radius:50%; background:var(--surface); box-shadow:0 0 0 1px var(--line-2); display:grid; place-items:center; font-size:13px; font-weight:500; color:var(--text); flex:none; }
@media (max-width:1023px){ .rv{ grid-template-columns:1fr; } .rv-head{ position:static; } .rv-cols{ grid-column:1; border-left:0; border-top:1px solid var(--line); } }
@media (max-width:719px){
  .rv{ margin-top:80px; } .rv-head{ padding:44px 16px; }
  .rv-cols{ grid-template-columns:1fr; height:840px; padding:0 16px; }
  .rv-col{ display:none; } .rv-col.one{ display:block; }
}

/* ── FAQ ─────────────────────────────────────────────── */
.faq{ display:grid; grid-template-columns:repeat(4, 1fr); padding:112px 0; }
.faq h2{ grid-column:1 / span 2; padding:0 24px; }
.faq .qa{ grid-column:3 / span 2; padding:0 24px; border-top:1px solid var(--line); background:var(--bg); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; display:flex; justify-content:space-between; gap:20px; padding:20px 0; cursor:pointer; font-size:16.5px; font-weight:500; letter-spacing:-0.01em; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--muted); font-weight:300; font-size:22px; line-height:1; transition:transform .2s; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ margin:0 0 22px; color:var(--muted); font-size:15px; max-width:34em; }
@media (max-width:1023px){ .faq{ grid-template-columns:1fr; gap:32px; } .faq h2, .faq .qa{ grid-column:1; } }
@media (max-width:719px){ .faq{ padding:80px 0; } .faq h2, .faq .qa{ padding:0 16px; } }

/* ── Closing + footer (dark) ─────────────────────────── */
.closing{ padding:136px 0 120px; display:grid; grid-template-columns:repeat(4, 1fr); }
.closing h2{ grid-column:1 / span 3; padding:0 24px; }
.closing .cta{ grid-column:1 / span 3; padding:0 24px; margin-top:36px; display:flex; gap:12px; flex-wrap:wrap; }
.foot{ display:grid; grid-template-columns:repeat(4, 1fr); border-top:1px solid var(--line); }
.foot > div{ padding:40px 24px 48px; }
.foot h4{ margin:0 0 16px; font:500 12px var(--mono); color:var(--faint); }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.foot a{ color:var(--muted); text-decoration:none; font-size:14px; }
.foot a:hover{ color:var(--text); }
.foot .brand img{ height:22px; width:auto; margin-bottom:18px; }
.foot .brand p{ color:var(--muted); font-size:14px; margin:0 0 18px; max-width:22em; }
.base{ border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px 24px; padding:22px 24px 28px; font-size:13px; color:var(--faint); }
.base .soc{ display:flex; gap:18px; }
.base a{ color:var(--muted); text-decoration:none; }
.base a:hover{ color:var(--text); }
@media (max-width:1023px){ .foot{ grid-template-columns:repeat(2, 1fr); } .foot > div:nth-child(n+3){ border-top:1px solid var(--line); } .closing h2, .closing .cta{ grid-column:1 / -1; } }
@media (max-width:719px){ .closing{ padding:96px 0 80px; } .closing h2, .closing .cta{ padding:0 16px; } .foot{ grid-template-columns:1fr 1fr; } .foot > div{ padding:28px 16px 32px; } .foot > div:first-child{ grid-column:1 / -1; } .base{ padding:20px 16px 24px; } }

/* Footer wordmark: DOZEHOST across the whole frame, its foot cut off by the page edge */
.mark{ border-top:1px solid var(--line); overflow:hidden; padding:40px 24px 0; }
.mark svg{ width:100%; height:auto; overflow:visible; }
.mark text{ font-family:var(--sans); font-weight:600; font-size:262px; letter-spacing:-0.04em; fill:url(#markg); }
.mark stop.g1{ stop-color:var(--g1); } .mark stop.g2{ stop-color:var(--g2); } .mark stop.g3{ stop-color:#000; }
@media (max-width:719px){ .mark{ padding:28px 16px 0; } }

/* Reduced motion */
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } html{ scroll-behavior:auto; } }

/* ── Product cards (homepage; owner picked "three big cards", 2026-10-29): three large soft cards with a live
   illustration each, no hairline grid. All three the same light tone (owner: a white/black mix looked inconsistent). The rest as pills underneath. ── */
.pc-sec .split{ padding-bottom:48px; }
.pc{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; padding:0 24px; }
.pc-card{ position:relative; display:flex; flex-direction:column; border-radius:24px; background:#F4F4F4; color:#0A0A0A; text-decoration:none; overflow:hidden; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.pc-card:hover{ transform:translateY(-4px); box-shadow:0 30px 60px -30px rgba(0,0,0,.35); }
.pc-card.dk{ background:#0A0A0A; color:#EDEDED; }
.pc-art{ height:300px; display:flex; align-items:flex-end; justify-content:center; padding:32px 28px 0; position:relative; }
.pc-txt{ padding:28px 28px 28px; display:flex; flex-direction:column; flex:1; }
.pc-tag{ font:11px var(--mono); color:#8F8F8F; }
.pc-card.dk .pc-tag{ color:#6E6E6E; }
.pc-txt h3{ margin-top:10px; font-size:26px; letter-spacing:-0.03em; }
.pc-txt > p{ margin:8px 0 0; font-size:15px; color:#666; max-width:26em; }
.pc-card.dk .pc-txt > p{ color:#A1A1A1; }
.pc-txt ul{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:8px; }
.pc-txt li{ display:flex; gap:10px; align-items:center; font-size:14px; }
.pc-txt li svg{ width:14px; height:14px; flex:none; color:var(--green); }
.pc-foot{ margin-top:auto; padding-top:28px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.pc-from{ font-size:14px; color:#666; }
.pc-from b{ font-size:26px; font-weight:500; letter-spacing:-0.035em; color:#0A0A0A; }
.pc-card.dk .pc-from{ color:#A1A1A1; } .pc-card.dk .pc-from b{ color:#fff; }
.pc-go{ display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; border-radius:999px; background:#0A0A0A; color:#fff; font-size:14px; font-weight:500; white-space:nowrap; }
.pc-go svg{ width:13px; height:13px; transition:transform .25s; }
.pc-card:hover .pc-go svg{ transform:translateX(3px); }
.pc-card.dk .pc-go{ background:#EDEDED; color:#000; }
.pc-more{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:24px 24px 0; }
.pc-more > span{ font-size:14px; color:var(--muted); margin-right:4px; }
.pc-more a{ display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; border-radius:999px; background:#F4F4F4; text-decoration:none; font-size:14px; color:#0A0A0A; transition:background .2s; }
.pc-more a:hover{ background:#EAEAEA; }
.pc-more a i{ font:normal 12px var(--mono); color:#8F8F8F; }
.pc-end{ height:112px; }

/* Web: a FlyPanel window */
.pw{ width:100%; max-width:360px; background:#fff; border-radius:14px 14px 0 0; box-shadow:0 0 0 1px rgba(0,0,0,.06), 0 -10px 40px -20px rgba(0,0,0,.25); font-size:12px; overflow:hidden; }
.pw-tb{ height:30px; display:flex; align-items:center; gap:5px; padding:0 12px; border-bottom:1px solid #EFEFEF; }
.pw-tb i{ width:7px; height:7px; border-radius:50%; background:#E2E2E2; }
.pw-tb span{ margin-left:auto; font:10px var(--mono); color:#999; }
.pw-bd{ display:grid; grid-template-columns:72px 1fr; }
.pw-side{ border-right:1px solid #EFEFEF; padding:10px 8px; display:grid; gap:4px; align-content:start; }
.pw-side span{ height:8px; border-radius:3px; background:#EFEFEF; }
.pw-side span.on{ background:#0A0A0A; }
.pw-main{ padding:12px 14px 18px; display:grid; gap:11px; }
.pw-site{ display:flex; justify-content:space-between; align-items:center; }
.pw-site b{ font-weight:500; font-size:13px; }
.pc-ok{ display:inline-flex; align-items:center; gap:6px; font-size:11px; color:#666; }
.pc-ok::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--green); }
.pw-m{ display:grid; gap:5px; }
.pw-m div{ display:flex; justify-content:space-between; color:#777; font-size:11px; }
.pw-m s{ display:block; height:5px; border-radius:3px; background:#EFEFEF; overflow:hidden; text-decoration:none; }
.pw-m s i{ display:block; height:100%; width:var(--w); background:#0A0A0A; border-radius:3px; transform-origin:left; }
.pw-row{ display:flex; justify-content:space-between; align-items:center; padding-top:9px; border-top:1px solid #F2F2F2; color:#555; }
.pw-sw{ width:28px; height:16px; border-radius:999px; background:#0A0A0A; position:relative; }
.pw-sw::after{ content:""; position:absolute; top:2px; right:2px; width:12px; height:12px; border-radius:50%; background:#fff; }

/* BDIX: the route, dark */
.pb{ width:100%; max-width:380px; height:250px; }
.pb text{ font:11px var(--sans); fill:#777; }
.pb-pill{ position:absolute; left:50%; top:28px; transform:translateX(-50%); display:inline-flex; align-items:center; gap:8px; font:11px var(--mono); color:#555; background:#fff; border-radius:999px; padding:5px 12px; box-shadow:0 0 0 1px rgba(0,0,0,.06); white-space:nowrap; }
.pb-pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--green); }

/* VPS: a terminal that types */
.pt{ width:100%; max-width:360px; height:220px; background:#fff; color:#0A0A0A; border-radius:14px 14px 0 0; padding:14px 16px; font:12px/1.8 var(--mono); box-shadow:0 0 0 1px rgba(0,0,0,.06), 0 -10px 40px -20px rgba(0,0,0,.25); overflow:hidden; }
.pt-tb{ display:flex; gap:5px; margin-bottom:10px; }
.pt-tb i{ width:7px; height:7px; border-radius:50%; background:#E2E2E2; }
.pt .d{ color:#9A9A9A; } .pt .g{ color:#1F8F4C; }
.pt .cur{ display:inline-block; width:7px; height:13px; background:#0A0A0A; vertical-align:-2px; animation:ptblink 1s steps(1) infinite; }
@keyframes ptblink{ 50%{ opacity:0; } }

/* Entry: cards rise in once; meters fill */
@media (prefers-reduced-motion:no-preference){
  .pc .pc-card{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .35s; transition-delay:calc(var(--i) * 90ms); }
  .pc.in .pc-card{ opacity:1; transform:none; }
  .pc.in .pc-card:hover{ transform:translateY(-4px); transition-delay:0s; }
  .pw-m s i{ transform:scaleX(0); transition:transform 1.2s cubic-bezier(.2,.7,.2,1) .5s; }
  .pc.in .pw-m s i{ transform:scaleX(1); }
}
@media (max-width:1023px){ .pc{ grid-template-columns:1fr 1fr; } .pc-card:last-child{ grid-column:1 / -1; } }
@media (max-width:719px){
  .pc{ grid-template-columns:1fr; padding:0 16px; } .pc-card:last-child{ grid-column:auto; }
  .pc-art{ height:260px; padding:28px 20px 0; } .pc-txt{ padding:24px 20px; }
  .pc-more{ padding:20px 16px 0; } .pc-end{ height:80px; }
}

/* ── Owner round, 2026-10-29 (late) ───────────────────────────────────────
   1. Submenus open a little below the header and start at their nav item, so they sit to the right of it.
   2. Help gets its own submenu: phone, email, ticket, then self-help.
   3. A little colour: one accent (switchable while we choose, see the switcher) on primary buttons, mono labels,
      the product card buttons and the FAQ markers. Status dots stay green.
   4. The FAQ is its own section on a light grey band, so it no longer runs into the reviews.
   5. The footer DOZEHOST wordmark takes a soft accent gradient that fades into the black. */
.panel.cl{ top:72px; }
.panel.cl::before{ content:""; position:absolute; left:0; right:0; top:-16px; height:16px; } /* hover bridge across the gap */
.panel.cl.help{ width:400px; }
.panel.cl.help a i{ font-size:12.5px; }
.panel.cl .ic{ width:30px; height:30px; flex:none; border-radius:8px; background:#1A1A1A; display:grid; place-items:center; color:#EDEDED; margin-right:2px; }
.panel.cl .ic svg{ width:15px; height:15px; }
.panel.cl a .row{ display:flex; flex-direction:row; align-items:center; gap:12px; }
.panel.cl .live{ display:inline-flex; align-items:center; gap:6px; }
.panel.cl .live::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--green); }

:root{ --acc:#5B4CE8; --acc-hover:#4A3BD6; --on-acc:#fff; --acc-text:#5B4CE8; --acc-text-dk:#A79CFF; --acc-soft:#EEF0FF; --g1:#673DE6; --g2:#298FFF; }
html[data-accent="green"]{ --acc:#15803D; --acc-hover:#116B33; --on-acc:#fff; --acc-text:#15803D; --acc-text-dk:#4ADE80; --acc-soft:#E8F7EE; --g1:#16A34A; --g2:#A3E635; }
html[data-accent="orange"]{ --acc:#E5531A; --acc-hover:#CC4612; --on-acc:#fff; --acc-text:#C2410C; --acc-text-dk:#FF8A4C; --acc-soft:#FFF1EA; --g1:#F35815; --g2:#FFB224; }
html[data-accent="none"]{ --acc:#0A0A0A; --acc-hover:#262626; --on-acc:#fff; --acc-text:#8F8F8F; --acc-text-dk:#6E6E6E; --acc-soft:#F4F4F4; --g1:#2A2A2A; --g2:#1C1C1C; }
.light .btn-primary, .dark .btn-primary, .pc-go{ background:var(--acc); color:var(--on-acc); }
.light .btn-primary:hover, .dark .btn-primary:hover{ background:var(--acc-hover); }
.light .label, .light .pc-tag, .light .eyebrow{ color:var(--acc-text); }
.dark .label, .dark .eyebrow{ color:var(--acc-text-dk); }
.light .rv-score b{ color:var(--acc-text); }
:focus-visible{ outline-color:var(--acc); }

.faq-sec{ background:#F7F7F7; }
.faq-sec .faq{ padding:112px 0 120px; }
.faq .fh{ grid-column:1 / span 2; padding:0 24px; display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.faq .fh h2{ grid-column:auto; padding:0; }
.faq .fh p{ margin:0; font-size:17px; color:var(--muted); max-width:22em; }
.faq .fh .cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
.faq-sec .faq .qa{ border-top:0; background:none; display:grid; gap:10px; counter-reset:q; }
.faq-sec .faq details{ border:0; background:#fff; border-radius:14px; box-shadow:0 0 0 1px var(--line); padding:0 22px; counter-increment:q; transition:box-shadow .2s; }
.faq-sec .faq details:hover{ box-shadow:0 0 0 1px var(--line-2); }
.faq-sec .faq details[open]{ box-shadow:0 0 0 1px var(--line-2), 0 14px 30px -20px rgba(0,0,0,.25); }
.faq-sec .faq summary{ align-items:center; }
.faq-sec .faq summary::before{ content:counter(q, decimal-leading-zero); font:12px var(--mono); color:var(--acc-text); margin-right:-6px; }
.faq-sec .faq summary span{ flex:1; }
.faq-sec .faq summary::after{ width:26px; height:26px; flex:none; border-radius:50%; background:var(--acc-soft); color:var(--acc-text); display:grid; place-items:center; font-size:18px; }
.faq-sec .faq details p{ padding-left:30px; }
@media (max-width:1023px){ .faq .fh{ grid-column:1; } }
@media (max-width:719px){ .faq-sec .faq{ padding:80px 0 88px; } .faq .fh{ padding:0 16px; } .faq-sec .faq details{ padding:0 16px; } .faq-sec .faq details p{ padding-left:0; } }

/* Accent switcher (mockup only, while the owner chooses) */
.acc-sw{ position:fixed; right:16px; bottom:16px; z-index:90; display:flex; align-items:center; gap:4px; padding:5px; border-radius:999px; background:#0A0A0A; color:#EDEDED; box-shadow:0 0 0 1px #222, 0 12px 30px -10px rgba(0,0,0,.5); font:12px var(--mono); }
.acc-sw > span{ padding:0 8px 0 10px; color:#8F8F8F; }
.acc-sw button{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px; border:0; border-radius:999px; background:none; color:#A1A1A1; cursor:pointer; font:inherit; }
.acc-sw button i{ width:10px; height:10px; border-radius:50%; }
.acc-sw button[aria-pressed="true"]{ background:#222; color:#fff; }
@media (max-width:719px){ .acc-sw > span{ display:none; } .acc-sw button{ padding:0 8px; } }

/* ── Owner picks, 2026-10-29 (night), step 6 ─────────────────────────────
   Menu text 1 · Ink; colour B · Marker words in mint (step 7). The footer DOZEHOST wordmark was removed (owner). */
.light .nav-btn{ font-size:15px; font-weight:500; color:#0A0A0A; letter-spacing:-0.01em; }
.light .nav-btn svg{ color:#A1A1A1; }
.light .nav-btn:hover, .light .nav-btn[aria-expanded="true"]{ color:#0A0A0A; background:#F2F2F2; }
:root{ --mk:#B9F2CF; --mk-dk:#6EE7A8; } /* mint, owner pick (step 7) */
html[data-mk="lilac"]{ --mk:#DCD4FF; --mk-dk:#B9A8FF; }
html[data-mk="peach"]{ --mk:#FFD3BD; --mk-dk:#FFB38F; }
html[data-mk="lime"]{ --mk:#DFF5A3; --mk-dk:#C8F03C; }
mark.mk{ background:none; color:inherit; padding:0 .06em; margin:0 -.06em; box-shadow:inset 0 -.34em 0 var(--mk); border-radius:2px; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.dark mark.mk{ box-shadow:none; color:var(--mk-dk); }
.two-tone span mark.mk, .statement span mark.mk{ color:inherit; }

/* ── Products · P2 Bento (owner pick, step 8): Web Hosting large on the left, BDIX and VPS stacked on the right, the other
   three as small icon cards. Each product one soft tint (Web mint, BDIX peach, VPS lilac, E-commerce lime), deeper tone on
   its tag and ticks; buttons stay black. Scoped to .bn. ── */
.bn{ padding:0; }
.bn .t-mint{ --t:#E7F8EF; --d:#0E8A57; } .bn .t-peach{ --t:#FFEFE6; --d:#C2501B; } .bn .t-lilac{ --t:#F0EDFF; --d:#6447D6; } .bn .t-lime{ --t:#F2F9DC; --d:#5B7A06; }
.bn .tag{ font:11.5px var(--mono); color:var(--d); display:inline-flex; align-items:center; gap:8px; }
.bn .tag::before{ content:""; width:7px; height:7px; border-radius:2px; background:var(--d); }
.bn .ticks{ list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:14px; }
.bn .ticks li{ display:flex; gap:10px; align-items:center; }
.bn .ticks li::before{ content:""; width:16px; height:16px; flex:none; border-radius:50%; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2L11.5 5.6' fill='none' stroke='%23000' stroke-opacity='.55' stroke-width='1.6'/%3E%3C/svg%3E") center/16px no-repeat; }
.bn .from{ font-size:14px; color:#666; white-space:nowrap; } .bn .from b{ font-size:26px; font-weight:500; letter-spacing:-0.035em; color:#0A0A0A; }
.bn .go{ display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; border-radius:999px; background:#0A0A0A; color:#fff; font-size:14px; font-weight:500; white-space:nowrap; }
.bn .go svg{ width:13px; height:13px; transition:transform .25s; }
.bn a:hover .go svg{ transform:translateX(3px); }
.bn .ic{ width:38px; height:38px; border-radius:11px; background:var(--t); color:var(--d); display:grid; place-items:center; flex:none; }
.bn .ic svg{ width:18px; height:18px; }
.bn .art{ position:relative; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; }
.bn .pw-m s i{ transform:none; }
.bn .pb text{ font:10px var(--mono); fill:#666; }
.bn .pb-pill{ top:20px; }
.bn .term{ width:100%; max-width:340px; background:#fff; border-radius:14px 14px 0 0; box-shadow:0 0 0 1px rgba(0,0,0,.05); font:10.5px/1.75 var(--mono); padding:0 0 18px; min-height:150px; }
.bn .term .tb{ height:30px; display:flex; align-items:center; gap:5px; padding:0 12px; border-bottom:1px solid #EFEFEF; margin-bottom:10px; }
.bn .term .tb i{ width:7px; height:7px; border-radius:50%; background:#E2E2E2; }
.bn .term div.l{ padding:0 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .bn .term .p{ color:#999; } .bn .term .g{ color:#0E8A57; }
.bn .cur{ display:inline-block; width:7px; height:13px; background:#0A0A0A; vertical-align:-2px; animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.bn .p2{ display:grid; grid-template-columns:1.25fr 1fr; gap:16px; padding:0 24px; }
.bn .p2 > a{ border-radius:24px; overflow:hidden; text-decoration:none; color:#0A0A0A; background:var(--t); display:flex; transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.bn .p2 > a:hover{ transform:translateY(-3px); }
.bn .big{ grid-row:span 2; flex-direction:column; }
.bn .big .art{ height:330px; padding:36px 40px 0; }
.bn .big .txt{ padding:30px 36px 34px; }
.bn .side{ flex-direction:row; align-items:stretch; }
.bn .side .txt{ padding:28px; flex:1; }
.bn .side .art{ width:50%; flex:none; padding:24px 20px 0 0; }
.bn .side .pb{ height:200px; }
.bn .side .ticks{ display:none; }
.bn .txt{ display:flex; flex-direction:column; gap:10px; }
.bn h4{ margin:2px 0 0; font-size:26px; font-weight:500; letter-spacing:-0.03em; }
.bn .big h4{ font-size:34px; letter-spacing:-0.04em; }
.bn .txt > p{ margin:0 0 6px; font-size:15px; color:#555; max-width:26em; }
.bn .ft{ margin-top:auto; padding-top:18px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; }
.bn .smalls{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; padding:16px 24px 0; }
.bn .smalls a{ display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:18px; box-shadow:0 0 0 1px var(--line); text-decoration:none; color:#0A0A0A; background:#fff; transition:box-shadow .2s, background .2s; }
.bn .smalls a:hover{ background:#FAFAFA; box-shadow:0 0 0 1px var(--line-2); }
.bn .smalls b{ display:block; font-weight:500; font-size:15.5px; letter-spacing:-0.01em; }
.bn .smalls small{ display:block; font-size:13px; color:#666; line-height:1.45; }
.bn .smalls i{ margin-left:auto; font:normal 12.5px var(--mono); color:var(--d); white-space:nowrap; }
@media (max-width:1023px){ .bn .p2{ grid-template-columns:1fr; } .bn .big{ grid-row:auto; } .bn .smalls{ grid-template-columns:1fr; } }
@media (max-width:719px){
  .bn .p2, .bn .smalls{ padding-left:16px; padding-right:16px; }
  .bn .side{ flex-direction:column-reverse; } .bn .side .art{ width:auto; padding:24px 20px 0; height:190px; }
  .bn .big .art{ height:250px; padding:24px 16px 0; } .bn .big .txt{ padding:24px 22px 26px; }
}
@media (prefers-reduced-motion:reduce){ .bn .cur{ animation:none; } }

/* ── Header logo 26px (owner pick from the 1169px image mockups, 2026-10-29) ── */
.hdr .logo img{ height:26px; }
@media (max-width:719px){ .hdr .logo img{ height:24px; } }

/* Owner, 2026-10-29: customer names scroll in one line inside columns 2–4 (not full width), pausing on hover. */
.nm{ display:flex; align-items:center; flex-wrap:nowrap; gap:0; padding:0; }
.nm .label{ width:25%; flex:none; padding:26px 24px; }
.nm-mq{ flex:1; overflow:hidden; padding:26px 0; -webkit-mask:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.nm-t{ display:flex; gap:52px; width:max-content; animation:nm 44s linear infinite; }
.nm-mq:hover .nm-t{ animation-play-state:paused; }
.nm-t span{ font-size:17px; font-weight:500; letter-spacing:-0.02em; color:var(--muted); white-space:nowrap; }
@keyframes nm{ to{ transform:translateX(-50%); } }
@media (max-width:719px){ .nm{ flex-direction:column; align-items:stretch; } .nm .label{ width:auto; padding:22px 16px 0; } .nm-mq{ padding:14px 0 24px; } }
@media (prefers-reduced-motion:reduce){ .nm-t{ animation:none; flex-wrap:wrap; width:auto; gap:10px 28px; padding:0 24px; } .nm-t span[aria-hidden]{ display:none; } .nm-mq{ -webkit-mask:none; mask:none; } }

/* ── Dedicated servers page: the real line-up as three tinted groups with a spec table each (no order links yet) ── */
.svs{ display:grid; gap:16px; padding:0 24px; }
.sv{ --t:#F0EDFF; --d:#6447D6; border-radius:24px; background:var(--t); padding:28px; display:grid; grid-template-columns:1fr 2.6fr; gap:28px; align-items:start; }
.sv.t-peach{ --t:#FFEFE6; --d:#C2501B; }
.sv .tag{ font:11.5px var(--mono); color:var(--d); display:inline-flex; align-items:center; gap:8px; }
.sv .tag::before{ content:""; width:7px; height:7px; border-radius:2px; background:var(--d); }
.sv-h h3{ margin:10px 0 8px; font-size:26px; font-weight:500; letter-spacing:-0.03em; }
.sv-h p{ margin:0; font-size:14.5px; color:#555; }
.sv-t{ background:#fff; border-radius:16px; overflow-x:auto; }
.sv table{ width:100%; border-collapse:collapse; font-size:14px; }
.sv th, .sv td{ text-align:left; padding:14px 16px; border-bottom:1px solid #F0F0F0; white-space:nowrap; font-weight:400; }
.sv thead th{ font:11.5px var(--mono); color:#8F8F8F; padding-top:14px; padding-bottom:12px; }
.sv tbody tr:last-child th, .sv tbody tr:last-child td{ border-bottom:0; }
.sv tbody th b{ display:block; font-weight:500; font-size:15px; }
.sv tbody th small{ display:block; font-size:12.5px; color:#8F8F8F; }
.sv .pr{ color:#666; } .sv .pr b{ font-size:20px; font-weight:500; letter-spacing:-0.03em; color:#0A0A0A; }
.sv .act{ text-align:right; }
@media (max-width:1023px){ .sv{ grid-template-columns:1fr; } }
@media (max-width:719px){ .svs{ padding:0 16px; } .sv{ padding:20px 16px; } }
.sv > *{ min-width:0; }
.svs{ grid-template-columns:minmax(0, 1fr); } .sv{ grid-template-columns:minmax(0, 1fr) minmax(0, 2.6fr); } @media (max-width:1023px){ .sv{ grid-template-columns:minmax(0, 1fr); } }
/* Phones: each server becomes a small stacked card instead of a table row you have to swipe */
@media (max-width:719px){
  .sv table, .sv tbody{ display:block; } .sv thead{ display:none; }
  .sv tbody tr{ display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; padding:16px; border-bottom:1px solid #F0F0F0; }
  .sv tbody tr:last-child{ border-bottom:0; }
  .sv th, .sv td{ padding:0; border:0; white-space:normal; font-size:13.5px; }
  .sv tbody th{ grid-column:1 / -1; margin-bottom:4px; }
  .sv .pr{ align-self:center; } .sv .act{ text-align:right; align-self:center; }
}
@media (min-width:1024px){ .sv{ grid-template-columns:minmax(0, .8fr) minmax(0, 3fr); gap:24px; } .sv th, .sv td{ padding:13px 12px; } .sv .act{ padding-right:16px; } }

/* ── Hero B · Centred (owner pick, 2026-10-29): uptime pill, centred two-tone headline, lede, buttons, a trust row,
   then the console full width. Replaces the support chat card. ── */
.hero{ padding-top:72px; }
.hb{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:28px 24px 0; }
.hb h1{ max-width:13em; margin-top:26px; padding:0; }
.hb h1 span{ color:var(--faint); display:block; }
.hb .lede{ margin:26px auto 0; max-width:34em; }
.hb .cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:30px; }
.hero .stage{ margin-top:64px; }
.ht-pill{ display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 14px 0 12px; border-radius:999px; box-shadow:inset 0 0 0 1px #E4E4E4; font-size:13px; color:#555; text-decoration:none; background:#fff; transition:box-shadow .15s; white-space:nowrap; }
.ht-pill:hover{ box-shadow:inset 0 0 0 1px #C8C8C8; }
.ht-pill i{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px #E7F8EF; }
.ht-pill b{ color:#0A0A0A; font-weight:500; }
.ht-pill em{ font-style:normal; color:#A1A1A1; }
.ht-pill .short{ display:none; }
.ht-trust{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; margin-top:30px; font-size:14px; color:#666; align-items:center; }
.ht-trust span{ display:inline-flex; align-items:center; gap:6px; }
.ht-trust b{ color:#0A0A0A; font-weight:500; }
.ht-trust svg{ color:#0A0A0A; }
.ht-trust span + span::before{ content:""; width:3px; height:3px; border-radius:50%; background:#C8C8C8; margin-right:20px; }
@media (max-width:719px){
  .hero{ padding-top:56px; } .hb{ padding:8px 16px 0; } .hb .cta .btn{ width:100%; }
  .ht-pill .long{ display:none; } .ht-pill .short{ display:inline; }
  .ht-trust{ gap:8px 18px; font-size:13px; } .ht-trust span + span::before{ display:none; }
  .hero .stage{ margin-top:48px; }
}

/* Footer column titles brighter and bigger (owner, 2026-10-29) */
.foot h4{ font:500 14px var(--sans); color:#EDEDED; letter-spacing:-0.01em; margin-bottom:18px; }
/* Hero: only the two frame edges, no inner column lines (owner, 2026-10-29) */
.hero > .rails i{ display:none; }

/* ── Section tones (owner, 2026-10-29: neighbouring sections looked the same; follow flynode.io): white, light grey,
   black and charcoal alternate down the page. ── */
.pc-sec, .tone, .fq-sec{ background:#F5F5F6; }
.pc-sec .bn .smalls a{ background:#fff; }
.tone .contact a, .tone .support{ color:var(--text); }

/* Centred section header, flynode style: dot eyebrow, two-tone heading, one line under it */
.sh{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:112px 24px 0; }
.sh .eb{ display:inline-flex; align-items:center; gap:8px; font:12px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.sh .eb i{ width:6px; height:6px; border-radius:2px; background:var(--text); }
.sh h2{ margin-top:16px; max-width:16em; }
.sh p{ margin:14px 0 0; font-size:17px; color:var(--muted); max-width:30em; }

/* ── FAQ (homepage): centred 760px list, hairline dividers, round +/− button that turns black when open ── */
.fq{ max-width:760px; margin:48px auto 0; border-top:1px solid var(--line-2); position:relative; z-index:1; }
.fq details{ border-bottom:1px solid var(--line-2); }
.fq summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 0; font-size:19px; font-weight:500; letter-spacing:-0.015em; color:#3A3A3A; transition:color .15s; }
.fq summary::-webkit-details-marker{ display:none; }
.fq summary:hover, .fq details[open] summary{ color:var(--text); }
.fq summary i{ position:relative; width:36px; height:36px; flex:none; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 1px var(--line-2); transition:background .2s, box-shadow .2s; }
.fq summary i::before, .fq summary i::after{ content:""; position:absolute; left:50%; top:50%; width:12px; height:1.5px; margin:-.75px 0 0 -6px; background:#0A0A0A; border-radius:1px; transition:transform .2s, background .2s; }
.fq summary i::after{ transform:rotate(90deg); }
.fq details[open] summary i{ background:#0A0A0A; box-shadow:none; }
.fq details[open] summary i::before, .fq details[open] summary i::after{ background:#fff; }
.fq details[open] summary i::after{ transform:rotate(0deg); }
.fq summary:focus-visible i{ outline:2px solid #0A0A0A; outline-offset:2px; }
.fq details p{ margin:-4px 0 26px; max-width:40em; font-size:16px; line-height:1.65; color:var(--muted); }
.fq-more{ max-width:760px; margin:40px auto 0; padding:20px 24px; background:#fff; border-radius:18px; box-shadow:0 0 0 1px var(--line); display:flex; justify-content:space-between; align-items:center; gap:16px 24px; flex-wrap:wrap; position:relative; z-index:1; }
.fq-more b{ display:block; font-weight:500; font-size:15.5px; }
.fq-more span{ display:block; font-size:14px; color:var(--muted); }
.fq-more .act{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.fq-more .link{ font-size:14px; text-decoration:none; }
.fq-sec > .frame{ padding-bottom:120px; }
.fq-sec > .rails i{ display:none; }
@media (max-width:719px){
  .sh{ padding:80px 16px 0; } .fq, .fq-more{ margin-left:16px; margin-right:16px; }
  .fq summary{ font-size:17px; padding:20px 0; } .fq-sec > .frame{ padding-bottom:88px; }
}

/* ── Footer (all pages, owner: "more modern"): brand + contact + socials on the left, four link columns on the right,
   a network-status strip, then the legal row. Charcoal, so it stands apart from the black closing section. ── */
.ft2{ background:#0C0C0D; }
.ft2 > .rails i{ display:none; }
.ft-top{ display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, 2.85fr); gap:48px; padding:80px 24px 56px; }
.ft-brand img{ height:26px; width:auto; }
.ft-brand p{ margin:18px 0 0; font-size:14.5px; color:var(--muted); max-width:24em; }
.ft-contact{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:10px; font-size:14px; color:var(--muted); }
.ft-contact li{ display:flex; align-items:center; gap:10px; }
.ft-contact svg{ width:15px; height:15px; color:var(--faint); flex:none; }
.ft-contact a{ color:var(--text); text-decoration:none; } .ft-contact a:hover{ text-decoration:underline; text-underline-offset:3px; }
.ft-soc{ display:flex; gap:8px; margin-top:24px; }
.ft-soc a{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:#161618; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); color:#A1A1A1; transition:color .15s, background .15s; }
.ft-soc a:hover{ color:#fff; background:#1E1E21; }
.ft-soc svg{ width:16px; height:16px; }
.ft-cols{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:24px; }
.ft-cols h4{ margin:0 0 18px; font:500 14px var(--sans); color:#EDEDED; letter-spacing:-0.01em; }
.ft-cols ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.ft-cols a{ color:var(--muted); text-decoration:none; font-size:14px; transition:color .15s; }
.ft-cols a:hover{ color:var(--text); }
.ft-status{ margin:0 24px; padding:16px 20px; border-radius:16px; background:#141416; box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); display:flex; justify-content:space-between; align-items:center; gap:12px 24px; flex-wrap:wrap; text-decoration:none; color:var(--muted); font-size:14px; transition:background .15s; }
.ft-status:hover{ background:#18181B; }
.ft-status span{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ft-status i{ width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(47,180,99,.15); }
.ft-status b{ color:var(--text); font-weight:500; }
.ft-status em{ font-style:normal; font:12.5px var(--mono); color:var(--text); }
.ft-base{ display:flex; justify-content:space-between; align-items:center; gap:12px 24px; flex-wrap:wrap; padding:28px 24px 36px; margin-top:40px; border-top:1px solid var(--line); font-size:13px; color:var(--faint); }
.ft-base nav{ display:flex; gap:22px; flex-wrap:wrap; }
.ft-base a{ color:var(--muted); text-decoration:none; } .ft-base a:hover{ color:var(--text); }
@media (max-width:1023px){ .ft-top{ grid-template-columns:1fr; gap:40px; } }
@media (max-width:719px){
  .ft-top{ padding:56px 16px 40px; } .ft-cols{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:32px 16px; }
  .ft-status{ margin:0 16px; } .ft-base{ padding:24px 16px 32px; }
}

/* Section content never leaks its top/bottom margin outside the section (that showed the black page as a band) */
.sec > .frame{ display:flow-root; }

/* ── Closing (homepage, owner 2026-10-29: "do something with it"), flynode-style: offer + checklist on the left,
   a "What happens next" card with three steps on the right ── */
.cl2 > .rails i{ display:none; }
.cl-grid{ display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); gap:56px; align-items:center; padding:120px 24px; }
.cl-chip{ display:inline-flex; align-items:center; gap:8px; height:30px; padding:0 12px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--line-2); font-size:13px; color:var(--muted); }
.cl-chip i{ width:7px; height:7px; border-radius:50%; background:var(--green); }
.cl-l h2{ margin-top:22px; } .cl-l h2 span{ color:var(--faint); }
.cl-l > p{ margin:20px 0 0; font-size:17px; color:var(--muted); max-width:30em; }
.cl-list{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:12px; font-size:15px; }
.cl-list li{ display:flex; align-items:center; gap:12px; }
.cl-list svg{ width:20px; height:20px; padding:4px; border-radius:50%; background:#1A1A1D; color:#EDEDED; flex:none; }
.cl-l .cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:32px; }
.cl-mail{ margin:18px 0 0; font-size:14px; color:var(--muted); }
.cl-card{ background:#0E0E10; border-radius:24px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.09); padding:32px; }
.cl-k{ font:12px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }
.cl-card ol{ list-style:none; margin:24px 0 0; padding:0; counter-reset:st; display:grid; gap:0; }
.cl-card li{ position:relative; counter-increment:st; padding:0 0 28px 48px; }
.cl-card li::before{ content:counter(st); position:absolute; left:0; top:-2px; width:30px; height:30px; border-radius:50%; box-shadow:inset 0 0 0 1px var(--line-2); display:grid; place-items:center; font:12px var(--mono); color:var(--text); background:#0E0E10; }
.cl-card li::after{ content:""; position:absolute; left:15px; top:32px; bottom:4px; width:1px; background:var(--line-2); }
.cl-card li:last-child{ padding-bottom:4px; } .cl-card li:last-child::after{ display:none; }
.cl-card li b{ display:block; font-weight:500; font-size:16px; }
.cl-card li span{ display:block; margin-top:6px; font-size:14.5px; color:var(--muted); line-height:1.55; }
.cl-who{ margin-top:24px; padding-top:20px; border-top:1px solid var(--line); display:flex; align-items:center; gap:12px; }
.cl-who .av{ width:36px; height:36px; border-radius:50%; background:#EDEDED; color:#000; display:grid; place-items:center; font-size:12px; font-weight:600; flex:none; }
.cl-who b{ display:block; font-weight:500; font-size:14px; } .cl-who small{ display:block; font-size:12.5px; color:var(--muted); }
.cl-who a{ margin-left:auto; font-size:13.5px; color:var(--text); text-decoration:none; white-space:nowrap; } .cl-who a:hover{ text-decoration:underline; text-underline-offset:3px; }
@media (max-width:1023px){ .cl-grid{ grid-template-columns:1fr; gap:40px; } }
@media (max-width:719px){ .cl-grid{ padding:88px 16px; } .cl-card{ padding:24px 20px; } .cl-l .cta .btn{ width:100%; } .cl-who{ flex-wrap:wrap; } .cl-who a{ margin-left:48px; } }
/* Main buttons on black sections: light pill (the accent rule had made them black-on-black) */
.dark .btn-primary{ background:#EDEDED; color:#000; } .dark .btn-primary:hover{ background:#fff; }

/* ── In-house trio: isometric line figures (our own, in the style of liniqo.com's interactive figures, owner 2026-10-29).
   Thin grey lines on a dotted floor grid, one bright moving part each; hover lifts the figure. ── */
.trio figure.iso{ height:240px; margin-bottom:28px; }
.iso svg{ width:100%; max-width:320px; height:auto; overflow:visible; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.trio > div:hover .iso svg{ transform:translateY(-6px); }
.iso .gd{ stroke:#2A2A2A; stroke-width:1; stroke-dasharray:2 4; }
.iso .t{ fill:#141414; stroke:#4A4A4A; } .iso .l{ fill:#0B0B0B; stroke:#4A4A4A; } .iso .r{ fill:#0F0F0F; stroke:#4A4A4A; }
.iso .st{ fill:#101010; stroke:#3A3A3A; } .iso .sl{ fill:#080808; stroke:#3A3A3A; } .iso .sr{ fill:#0B0B0B; stroke:#3A3A3A; }
.iso .th{ fill:#EDEDED; stroke:#EDEDED; } .iso .lh{ fill:#9A9A9A; stroke:#EDEDED; } .iso .rh{ fill:#BDBDBD; stroke:#EDEDED; }
.iso polygon{ stroke-width:1; stroke-linejoin:round; }
.iso .ln{ stroke:#5A5A5A; stroke-width:1.2; stroke-linecap:round; }
.iso .hb{ fill:rgba(237,237,237,.14); stroke:#EDEDED; stroke-width:1.2; }
.iso .cur{ fill:#EDEDED; stroke:#000; stroke-width:.8; }
.iso .led{ fill:#2FB463; }
.iso .sp{ fill:rgba(237,237,237,.06); stroke:#EDEDED; stroke-width:1.2; }
.iso .sh{ fill:#000; stroke:#EDEDED; stroke-width:1.4; stroke-linejoin:round; }
.iso .tk{ stroke:#2FB463; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.iso .dash{ stroke:#6A6A6A; stroke-width:1.2; stroke-dasharray:3 4; }
.iso .pk{ fill:#EDEDED; }
.iso .ret, .iso .ret-h{ stroke:#9A9A9A; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:3 4; }
.iso .ret-h{ stroke-dasharray:none; }
.iso .pop{ animation:isopop 3.2s cubic-bezier(.2,.8,.2,1) infinite; transform-box:fill-box; }
@keyframes isopop{ 0%, 55%, 100%{ transform:translateY(0); } 70%, 85%{ transform:translateY(-8px); } }
@media (prefers-reduced-motion:reduce){ .iso .pop{ animation:none; } }
@media (max-width:719px){ .trio figure.iso{ height:auto; } }
/* Trio figures size to their drawing, so nothing spills onto the titles below */
.trio figure.iso{ height:auto; display:block; margin:0 0 32px; }
.trio figure.iso svg{ display:block; margin:0 auto; height:auto; }

/* Light versions of the isometric figures (white and light grey sections) */
.iso.lt .gd{ stroke:#D9D9D9; }
.iso.lt .t{ fill:#FFFFFF; stroke:#9A9A9A; } .iso.lt .l{ fill:#ECECEC; stroke:#9A9A9A; } .iso.lt .r{ fill:#F5F5F5; stroke:#9A9A9A; }
.iso.lt .st{ fill:#FAFAFA; stroke:#C4C4C4; } .iso.lt .sl{ fill:#E6E6E6; stroke:#C4C4C4; } .iso.lt .sr{ fill:#EFEFEF; stroke:#C4C4C4; }
.iso.lt .th{ fill:#0A0A0A; stroke:#0A0A0A; } .iso.lt .lh{ fill:#2A2A2A; stroke:#0A0A0A; } .iso.lt .rh{ fill:#3A3A3A; stroke:#0A0A0A; }
.iso.lt .ln{ stroke:#B0B0B0; } .iso.lt .dash{ stroke:#8F8F8F; } .iso.lt .pk{ fill:#0A0A0A; }
.iso .bolt{ fill:#0A0A0A; stroke:#0A0A0A; stroke-width:1; stroke-linejoin:round; }
.iso .bub{ fill:#fff; stroke:#0A0A0A; stroke-width:1.3; stroke-linejoin:round; } .iso .dot{ fill:#0A0A0A; }
.iso .okc{ fill:#fff; stroke:#2FB463; stroke-width:1.4; }
.iso .lb{ font:9px var(--mono); fill:#777; stroke:none; }
.perf-fig{ margin:0 0 8px; } .perf-fig svg{ width:100%; max-width:300px; height:auto; display:block; }
.support .big{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.sup-fig{ margin:0; flex:none; } .sup-fig svg{ width:260px; height:auto; display:block; }
.bn .iso-pb{ width:100%; max-width:340px; height:auto; }
.bn .iso-pb .st{ fill:rgba(255,255,255,.6); } .bn .iso-pb .sl, .bn .iso-pb .sr{ fill:rgba(255,255,255,.35); }
@media (max-width:1023px){ .support .big{ flex-wrap:wrap; } }
@media (max-width:719px){ .sup-fig svg{ width:220px; } .perf-fig svg{ max-width:260px; } }
.support .big b{ white-space:nowrap; } .support .big{ flex-wrap:wrap; } .sup-fig svg{ width:220px; }
/* scan plane drawn at full size */
.support .big{ display:block; }

/* Closing with more air (owner: "too much content, no breathing space") */
.cl-grid{ padding:176px 24px; gap:96px; }
.cl-l > p{ margin-top:24px; }
.cl-l .cta{ margin-top:40px; }
.cl-card{ padding:40px; }
.cl-card ol{ margin-top:32px; }
.cl-card li{ padding-bottom:36px; }
@media (max-width:719px){ .cl-grid{ padding:112px 16px; gap:56px; } .cl-card{ padding:28px 22px; } }

/* Bigger isometric figures (owner: "animation sizes are too small") */
.iso svg{ max-width:400px; }
.trio figure.iso svg{ width:100%; max-width:400px; }
.perf-fig svg{ max-width:440px; }
.sup-fig svg{ width:100%; max-width:440px; }
.bn .iso-pb{ max-width:420px; }
@media (max-width:719px){ .perf-fig svg, .sup-fig svg{ max-width:100%; } }
.iso svg{ overflow:hidden; } .trio figure.iso svg{ max-width:420px; }

/* Products, calmer (owner: "too busy again"): one picture (Web), text-only BDIX and VPS cards, no ticks or pill,
   small cards with name + price only, and no inner grid lines behind the section */
.calm > .rails i{ display:none; }
.bn .side{ flex-direction:column; }
.bn .side .txt{ padding:36px; }
.bn .side h4{ font-size:30px; }
.bn .smalls a{ padding:18px 20px; }
.bn .smalls b{ font-size:16px; }

/* ═══ Web Hosting page v2 (owner, 2026-10-29: better hero, more feature sections, liniqo-style figures) ═══ */
.g{ color:var(--faint); }
/* Hero: copy left, isometric figure right; only the frame edges */
.hh > .rails i{ display:none; }
.hh > .frame{ padding-bottom:88px; }
.hh-grid{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:32px; align-items:center; padding:0 24px; }
.hh-copy .crumb{ display:block; margin-bottom:22px; }
.hh-copy .hh-pill{ margin-bottom:24px; }
.hh-copy h1{ font-size:clamp(40px, 5.2vw, 68px); line-height:1.02; }
.hh-copy h1 span{ display:block; color:var(--faint); }
.hh-copy .lede{ margin-top:24px; }
.hh-copy .cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:32px; }
.hh-ticks{ list-style:none; margin:28px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 22px; font-size:14px; color:var(--muted); }
.hh-ticks li{ display:inline-flex; align-items:center; gap:8px; }
.hh-ticks li::before{ content:""; width:16px; height:16px; border-radius:50%; background:#E7F8EF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2L11.5 5.6' fill='none' stroke='%230E8A57' stroke-width='1.7'/%3E%3C/svg%3E") center/16px no-repeat; }
.hh-ticks a{ color:inherit; text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:3px; }
.hh-fig{ margin:0; } .hh-fig svg{ width:100%; max-width:560px; height:auto; display:block; margin:0 auto; }
.iso .lock{ fill:#fff; stroke:#0A0A0A; stroke-width:1.5; stroke-linejoin:round; } .iso .lock circle{ fill:#0A0A0A; stroke:none; }
.iso .hbtn{ fill:#0A0A0A; stroke:#0A0A0A; }
.iso.lt .hb{ fill:rgba(10,10,10,.06); stroke:#0A0A0A; }
.iso .ckb{ fill:#0A0A0A; } .iso .ckt{ font:500 11px var(--sans); fill:#fff; }
.iso.lt .cur{ fill:#fff; stroke:#0A0A0A; stroke-width:1.1; }

/* Shared: section end spacing, small eyebrow for left-aligned headers */
.sec-end{ height:120px; }
.eb2{ display:inline-flex; align-items:center; gap:8px; font:12px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.eb2 i{ width:6px; height:6px; border-radius:2px; background:var(--text); }

/* Included: bento of six cards, first one tall, last one wide */
.fxg{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; padding:56px 24px 0; position:relative; z-index:1; }
.fx{ --t:#F4F4F4; --d:#0A0A0A; background:var(--t); border-radius:22px; padding:28px; display:flex; flex-direction:column; gap:10px; min-height:200px; transition:transform .3s cubic-bezier(.2,.8,.2,1); }
.fx:hover{ transform:translateY(-3px); }
.fx.t-mint{ --t:#E7F8EF; --d:#0E8A57; } .fx.t-peach{ --t:#FFEFE6; --d:#C2501B; } .fx.t-lilac{ --t:#F0EDFF; --d:#6447D6; } .fx.t-lime{ --t:#F2F9DC; --d:#5B7A06; }
.fx.big{ grid-row:span 2; justify-content:flex-end; }
.fx.big h3{ font-size:30px; letter-spacing:-0.035em; }
.fx.wide{ grid-column:span 2; }
.fx-ic{ width:44px; height:44px; border-radius:13px; background:#fff; color:var(--d); display:grid; place-items:center; margin-bottom:auto; }
.fx.big .fx-ic{ width:64px; height:64px; border-radius:18px; } .fx.big .fx-ic svg{ width:30px; height:30px; }
.fx-ic svg{ width:22px; height:22px; }
.fx h3{ margin:20px 0 0; font-size:20px; font-weight:500; letter-spacing:-0.02em; }
.fx p{ margin:0; font-size:15px; color:#555; max-width:30em; }

/* WordPress: copy left, figure right, light grey */
.wp{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:48px; align-items:center; padding:120px 24px; }
.wp-copy h2{ margin-top:16px; } .wp-copy h2 .g{ display:block; }
.wp-copy > p{ margin:20px 0 0; font-size:17px; color:var(--muted); max-width:30em; }
.wp-list{ list-style:none; margin:28px 0 32px; padding:0; display:grid; gap:16px; }
.wp-list li{ padding-left:18px; border-left:2px solid var(--line-2); }
.wp-list b{ display:block; font-weight:500; font-size:16px; } .wp-list span{ font-size:14.5px; color:var(--muted); }
.wp-fig{ margin:0; } .wp-fig svg{ width:100%; max-width:500px; height:auto; display:block; margin:0 auto; }

/* Which size: four cards that move the slider */
.ucg{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; padding:56px 24px 0; position:relative; z-index:1; }
.uc{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; gap:8px; padding:24px; border-radius:20px; background:#fff; box-shadow:0 0 0 1px var(--line); transition:box-shadow .2s, transform .3s cubic-bezier(.2,.8,.2,1); }
.uc:hover{ box-shadow:0 0 0 1px var(--line-2), 0 20px 40px -28px rgba(0,0,0,.35); transform:translateY(-3px); }
.uc:focus-visible{ outline:2px solid #0A0A0A; outline-offset:3px; }
.uc-k{ font:12px var(--mono); color:var(--faint); }
.uc b{ margin-top:18px; font-size:20px; font-weight:500; letter-spacing:-0.02em; }
.uc > span:not(.uc-k){ font-size:14.5px; color:var(--muted); }
.uc em{ margin-top:auto; padding-top:18px; font-style:normal; font-size:14px; font-weight:500; }
.uc-note{ margin:16px 24px 0; font-size:13px; color:var(--faint); position:relative; z-index:1; }

@media (max-width:1023px){
  .hh-grid, .wp{ grid-template-columns:1fr; } .hh-fig svg{ max-width:460px; }
  .fxg{ grid-template-columns:repeat(2, minmax(0, 1fr)); } .fx.big{ grid-row:auto; } .fx.wide{ grid-column:1 / -1; }
  .ucg{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:719px){
  .hh-grid{ padding:0 16px; } .hh > .frame{ padding-bottom:56px; } .hh-copy .cta .btn{ width:100%; }
  .fxg, .ucg{ grid-template-columns:1fr; padding:40px 16px 0; } .fx.wide{ grid-column:auto; }
  .wp{ padding:88px 16px; } .uc-note{ margin:14px 16px 0; } .sec-end{ height:88px; }
}

.fx.wide{ grid-column:1 / -1; flex-direction:row; align-items:center; gap:24px; min-height:0; }
.fx.wide .fx-ic{ margin:0; flex:none; } .fx.wide h3{ margin:0; } .fx.wide p{ margin-left:auto; max-width:34em; }
@media (max-width:719px){ .fx.wide{ flex-direction:column; align-items:flex-start; } .fx.wide p{ margin-left:0; } }

/* ── Web Hosting price table v2 (owner: "improve the price table"): centred header with the billing switch,
   one configurator card — slider on the left, the chosen size with price, specs and Order on the right ── */
.cycle.seg{ margin-top:28px; padding:6px 8px 6px 16px; border-radius:999px; background:#fff; box-shadow:0 0 0 1px var(--line); }
.pz.v2{ display:grid; grid-template-columns:minmax(0, 1.45fr) minmax(0, 1fr); margin:48px 24px 0; border-radius:28px; overflow:hidden; position:relative; z-index:1; box-shadow:0 40px 80px -48px rgba(0,0,0,.55); }
.pz.v2 .pz-cards{ display:none; }
.pz.v2 .pz-l{ padding:28px 32px 36px; display:flex; flex-direction:column; }
.pz.v2 .pz-top{ border:0; padding:0; }
.pz.v2 .pz-fig{ padding:56px 0 8px; text-align:left; }
.pz.v2 .pz-fig b{ font-size:clamp(64px, 8vw, 104px); }
.pz.v2 .pz-fig p{ text-align:left; margin-left:0; }
.pz.v2 .pz-slide{ margin:auto 0 0; width:100%; max-width:none; padding:40px 0 0; }
.pz.v2 .pz-r{ background:#0A0A0A; border-left:1px solid var(--line); padding:32px; display:flex; flex-direction:column; }
.pz-k{ font:12px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }
.pz.v2 .pz-r h3{ margin:10px 0 0; font-size:24px; font-weight:500; letter-spacing:-0.025em; }
.pz-pp{ display:flex; align-items:baseline; gap:6px; margin-top:16px; }
.pz-pp b{ font-size:52px; font-weight:500; letter-spacing:-0.05em; line-height:1; }
.pz-pp span{ color:var(--muted); font-size:15px; }
.pz.v2 .pz-note{ margin:8px 0 0; font-size:14px; color:var(--muted); }
.pz-specs{ margin:24px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:0 20px; border-top:1px solid var(--line); }
.pz-specs div{ display:flex; flex-direction:column; gap:2px; padding:12px 0; border-bottom:1px solid var(--line); }
.pz-specs dt{ font-size:12.5px; color:var(--faint); } .pz-specs dd{ margin:0; font-size:15px; font-weight:500; color:var(--text); }
.pz-go{ margin-top:24px; width:100%; height:48px; background:#EDEDED; color:#000; font-size:15.5px; }
.pz-go:hover{ background:#fff; }
.pz.v2 .pz-checks{ border:0; padding:18px 0 0; justify-content:flex-start; gap:8px 16px; font-size:13px; }
.pz.v2 + .pz-sample{ margin:16px 24px 0; position:relative; z-index:1; }
@media (max-width:1023px){ .pz.v2{ grid-template-columns:1fr; } .pz.v2 .pz-r{ border-left:0; border-top:1px solid var(--line); } }
@media (max-width:719px){
  .pz.v2{ margin:36px 16px 0; border-radius:22px; } .pz.v2 .pz-l{ padding:22px 18px 28px; } .pz.v2 .pz-r{ padding:24px 18px; }
  .pz.v2 .pz-fig{ padding-top:36px; } .pz-pp b{ font-size:44px; } .pz.v2 + .pz-sample{ margin:14px 16px 0; }
  .cycle.seg{ flex-wrap:wrap; justify-content:center; }
}
.pz.v2 .pz-labels button span{ visibility:hidden; } .pz.v2 .pz-labels button.on span{ visibility:visible; }

/* ── Web Hosting pricing, flynode-style (owner: v2 "not good"): dark section, centred header, the slider card,
   three fully visible plan cards with an icon on every spec row, a trust line ── */
.pr-sec .sh p{ color:var(--muted); }
.pr-sec .cycle.seg{ background:#141416; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
.pr-sec .switch[aria-checked="true"]{ background:#EDEDED; } .pr-sec .switch::after{ background:#000; }
.pr-sec .pz{ margin:48px 24px 0; border-radius:28px; background:#0A0A0A; border:1px solid rgba(255,255,255,.08); position:relative; z-index:1; }
.pr-sec .pz-top{ padding:18px 28px; }
.pr-sec .pz-main{ padding:56px 32px 40px; }
.pr-sec .pz-cards{ padding:28px 18px; background:#0A0A0B; clip-path:inset(0 18px); }
.pr-sec .pz-cards li{ padding:0 10px; }
.pr-sec .pz-cards ul{ padding:0; }
.pr-sec .pz-cards{ overflow:hidden; }
.pr-sec .pz-card{ background:#111113; border-radius:20px; padding:26px 24px 10px; }
.pr-sec .pz-card.on{ background:#18181B; box-shadow:0 0 0 1.5px #EDEDED, 0 24px 48px -28px rgba(0,0,0,.8); }
.pr-sec .pz-price b{ font-size:42px; }
.pr-sec .pz-card .btn{ height:46px; border-radius:999px; }
.pr-sec .pz-card dl{ margin:20px -24px 0; padding:4px 24px; }
.pr-sec .pz-card dt{ display:flex; align-items:center; gap:10px; }
.pr-sec .pz-card dt svg{ width:15px; height:15px; color:var(--faint); flex:none; }
.pr-sec .pz-checks{ padding:18px 24px; }
.pr-trust{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px 28px; margin-top:24px; font-size:14px; color:var(--muted); position:relative; z-index:1; }
.pr-trust span{ display:inline-flex; align-items:center; gap:8px; }
.pr-trust span::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--green); }
.pr-sec .pz-sample{ text-align:center; margin:12px 24px 0; }
@media (max-width:719px){ .pr-sec .pz{ margin:36px 16px 0; border-radius:22px; } .pr-sec .pz-main{ padding:36px 16px 28px; } .pr-sec .pz-cards{ padding:24px 6px; clip-path:inset(0 6px); } }

/* Web Hosting hero: exploded stack figure */
.iso .shadow{ fill:rgba(0,0,0,.05); stroke:none; }
.iso.lt .dk{ fill:#F4F4F4; stroke:#B0B0B0; } .iso.lt .tile{ fill:#F4F4F4; stroke:#B0B0B0; }
.iso .blk{ fill:#2A2A2A; stroke:#555; } .iso.lt .blk{ fill:#fff; stroke:#fff; opacity:.9; }
.iso .lead{ stroke:#B0B0B0; stroke-width:1; } .iso .ldot{ fill:#0A0A0A; }
.iso .pill{ fill:#fff; stroke:#D4D4D4; } .iso .pill.on{ fill:#0A0A0A; stroke:#0A0A0A; }
.iso .pt{ font:500 10.5px var(--sans); fill:#0A0A0A; } .iso .pt.on{ fill:#fff; }
.hh-fig svg{ max-width:600px; overflow:visible; }

/* ════ Colour, flynode-style (owner, 2026-10-29: "a little colour so it isn't black and white": icons, titles, buttons,
   animations). One brand violet from the Doze logo; green stays for status; product tints stay. Home + Web Hosting. ════ */
:root{ --brand:#5B4CE8; --brand-hover:#4A3BD6; --brand-soft:#EFEDFF; --brand-line:#D9D3FF; --brand-on-dark:#A79CFF; --brand-btn-dark:#6E5DF2; }

/* Titles: the second half of a headline (or a key phrase) in violet; lighter violet on black */
.light .ac, .light .hb h1 span, .light .hh-copy h1 span, .light .g, .light .cl-l h2 span{ color:var(--brand); }
.dark .ac, .dark .g, .dark .cl-l h2 span{ color:var(--brand-on-dark); }
.statement .ac{ color:var(--brand-on-dark); }

/* Buttons: main buttons violet on white and on black; the header "Get started" too */
.light .btn-primary, .dark .btn-primary, .pz-go, .pc-go{ background:var(--brand); color:#fff; }
.light .btn-primary:hover, .dark .btn-primary:hover, .pz-go:hover{ background:var(--brand-hover); }
.dark .btn-primary{ background:var(--brand-btn-dark); } .dark .btn-primary:hover{ background:var(--brand); }
.bn .go{ background:var(--brand); }
.fq-more .btn-primary{ background:var(--brand); }

/* Eyebrows: violet square and violet text */
.sh .eb i, .eb2 i{ background:var(--brand); }
.light .sh .eb, .light .eb2{ color:var(--brand); }
.dark .sh .eb{ color:var(--brand-on-dark); } .dark .sh .eb i{ background:var(--brand-on-dark); }
.cl-chip i{ background:var(--brand-on-dark); }

/* Icons: violet line icons on soft violet tiles */
.fact svg{ width:40px; height:40px; padding:10px; border-radius:11px; background:var(--brand-soft); color:var(--brand); margin-bottom:22px; }
.ft-soc a:hover{ background:var(--brand); color:#fff; }
.panel.cl .ic{ background:rgba(110,93,242,.18); color:var(--brand-on-dark); }
.cl-list svg{ background:rgba(110,93,242,.25); color:var(--brand-on-dark); }
.wp-list li{ border-left-color:var(--brand); }

/* Numbers that matter */
.support .big b{ color:var(--brand); }

/* FAQ: the open button turns violet */
.fq details[open] summary i{ background:var(--brand); }
.fq summary:hover i{ box-shadow:inset 0 0 0 1px var(--brand); }

/* Animations: the moving / highlighted parts in violet */
.iso .th{ fill:var(--brand-btn-dark); stroke:var(--brand-on-dark); } .iso .lh{ fill:#4A3BD6; stroke:var(--brand-on-dark); } .iso .rh{ fill:#5B4CE8; stroke:var(--brand-on-dark); }
.iso .hb{ fill:rgba(167,156,255,.18); stroke:var(--brand-on-dark); }
.iso .pk{ fill:var(--brand-on-dark); }
.iso .sp{ fill:rgba(167,156,255,.1); stroke:var(--brand-on-dark); }
.iso .cur{ fill:var(--brand-on-dark); }
.iso.lt .th{ fill:var(--brand); stroke:var(--brand); } .iso.lt .lh{ fill:#4A3BD6; stroke:var(--brand); } .iso.lt .rh{ fill:#6A5BF0; stroke:var(--brand); }
.iso.lt .pk, .iso .ldot{ fill:var(--brand); }
.iso .bolt{ fill:var(--brand); stroke:var(--brand); }
.iso .pill.on{ fill:var(--brand); stroke:var(--brand); }
.iso .ckb{ fill:var(--brand); } .iso.lt .cur{ fill:#fff; stroke:var(--brand); }
.iso.lt .hb{ fill:var(--brand-soft); stroke:var(--brand); } .iso .hbtn{ fill:var(--brand); stroke:var(--brand); }
.iso .lock{ stroke:var(--brand); } .iso .lock circle{ fill:var(--brand); }
.iso .dot{ fill:var(--brand); } .iso .bub{ stroke:var(--brand); }

/* Pricing: violet slider, selected card and order buttons */
.pr-sec .pz-fill{ background:var(--brand-btn-dark); }
.pr-sec .pz-thumb{ box-shadow:0 0 0 6px rgba(110,93,242,.35), 0 6px 18px rgba(0,0,0,.6); }
.pr-sec .pz-stops span.on{ background:var(--brand-on-dark); }
.pr-sec .pz-card.on{ box-shadow:0 0 0 1.5px var(--brand-btn-dark), 0 24px 48px -28px rgba(110,93,242,.5); background:#17152A; }
.pr-sec .pz-card.on .pz-badge{ background:var(--brand-btn-dark); border-color:var(--brand-btn-dark); color:#fff; }
.pr-sec .pz-card .btn-primary{ background:var(--brand-btn-dark); color:#fff; }
.pr-sec .pz-card dt svg{ color:var(--brand-on-dark); }
.pr-sec .switch[aria-checked="true"]{ background:var(--brand-btn-dark); } .pr-sec .switch::after{ background:#fff; }
.pr-sec .pz-sum .btn-primary{ background:var(--brand-btn-dark); color:#fff; }
.cycle.seg .switch[aria-checked="true"]{ background:var(--brand); }
.pr-trust span::before{ background:var(--brand-on-dark); }

/* Hosting hero ticks and use-case links */
.uc em{ color:var(--brand); } .uc:hover{ box-shadow:0 0 0 1px var(--brand-line), 0 20px 40px -28px rgba(91,76,232,.35); }
.hh-pill i, .ht-pill i{ background:var(--green); }

/* Colour review fixes (expert pass): labels, stars, avatars, ratings, steps, numbers */
.light .label, .light .crumb a, .uc-k{ color:var(--brand); }
.light .crumb{ color:var(--faint); }
.dark .label, .intro .eyebrow{ color:var(--brand-on-dark); }
.rv-card .stars{ color:#F5A524; }
.rv-card .av{ background:var(--brand-soft); box-shadow:none; color:var(--brand); }
.rv-score b{ color:var(--brand) !important; }
.cl-card li::before{ box-shadow:inset 0 0 0 1px rgba(167,156,255,.55); color:var(--brand-on-dark); }
.cl-card li::after{ background:rgba(167,156,255,.25); }
.sec-list b, .sec-list strong{ color:var(--text); }
.nm .label{ color:var(--brand); }
.proof b{ color:var(--text); }
.proof > div:first-child b{ color:var(--brand); }
/* Light trust line (Dedicated servers section) */
.pr-trust.pr-lt span::before{ background:var(--brand); }

/* Header: "Log in" and "Get started" use the main menu's text (owner, 2026-10-29) */
.light .hdr-act .login{ font-size:15px; font-weight:500; color:#0A0A0A; letter-spacing:-0.01em; padding:0 12px; height:36px; display:inline-flex; align-items:center; border-radius:8px; }
.light .hdr-act .login:hover{ background:#F2F2F2; color:#0A0A0A; }
.hdr-act .btn-sm{ font-size:15px; font-weight:500; letter-spacing:-0.01em; height:38px; padding:0 18px; }

/* ── Web Hosting: centred hero (no figure) + dashboard showcase (owner: hero animation "too common") ── */
.hc2 .hb{ padding-top:8px; }
.hc2 .hb .crumb{ display:block; margin-bottom:22px; }
.hc2 .hb h1{ max-width:14em; margin-top:22px; }
.hc2 .hb h1 span{ display:block; color:var(--brand); }
.hc2 .hh-ticks{ justify-content:center; }
.hc2 > .frame{ padding-bottom:96px; }
.ds-sec{ background:#0A0A0B; }
.ds{ padding:88px 24px 112px; position:relative; z-index:1; }
.ds-tabs{ display:flex; justify-content:center; flex-wrap:wrap; gap:6px; max-width:max-content; margin:0 auto; padding:6px; border-radius:999px; background:#141416; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.ds-tab{ all:unset; position:relative; display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; border-radius:999px; font-size:14px; font-weight:500; color:#8F8F8F; cursor:pointer; overflow:hidden; transition:color .2s, background .2s; }
.ds-tab svg{ color:#6E6E6E; transition:color .2s; }
.ds-tab:hover{ color:#EDEDED; }
.ds-tab[aria-selected="true"]{ background:#232327; color:#fff; } .ds-tab[aria-selected="true"] svg{ color:var(--brand-on-dark); }
.ds-tab:focus-visible{ outline:2px solid var(--brand-on-dark); outline-offset:2px; }
.ds-prog{ position:absolute; left:16px; right:16px; bottom:6px; height:2px; border-radius:2px; background:rgba(255,255,255,.08); opacity:0; }
.ds-prog::after{ content:""; position:absolute; inset:0; width:0; background:var(--brand-on-dark); border-radius:2px; }
.ds.auto .ds-tab[aria-selected="true"] .ds-prog{ opacity:1; }
.ds.auto .ds-tab[aria-selected="true"] .ds-prog::after{ animation:dsprog var(--dsd, 5s) linear forwards; }
@keyframes dsprog{ to{ width:100%; } }
.ds-pause{ all:unset; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:#8F8F8F; cursor:pointer; } .ds-pause:hover{ color:#fff; }
.ds-caps{ position:relative; height:28px; margin:22px auto 32px; text-align:center; }
.ds-cap{ position:absolute; inset:0; margin:0; font-size:16px; color:var(--muted); opacity:0; transform:translateY(6px); transition:opacity .35s, transform .35s; }
.ds-cap.on{ opacity:1; transform:none; }
.ds-win{ max-width:1100px; margin:0 auto; border-radius:20px; background:#FAFAFA; color:#0A0A0A; overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 60px 120px -40px rgba(110,93,242,.35); }
.ds-bar{ height:44px; display:flex; align-items:center; gap:7px; padding:0 16px; background:#fff; border-bottom:1px solid #ECECEC; font-size:13px; color:#666; }
.ds-bar i{ width:10px; height:10px; border-radius:50%; background:#E4E4E4; }
.ds-bar span{ margin-left:14px; } .ds-bar em{ font-style:normal; color:#BDBDBD; margin:0 4px; }
.ds-bar small{ margin-left:auto; font:11px var(--mono); color:#A1A1A1; }
.ds-body{ display:grid; grid-template-columns:220px minmax(0, 1fr); min-height:460px; }
.ds-side{ background:#fff; border-right:1px solid #ECECEC; padding:16px 12px; display:flex; flex-direction:column; gap:2px; }
.ds-site{ display:flex; flex-direction:column; padding:6px 10px 16px; border-bottom:1px solid #F0F0F0; margin-bottom:10px; }
.ds-site b{ font-size:14px; font-weight:500; } .ds-site small{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#666; } .ds-site small i{ width:6px; height:6px; border-radius:50%; background:var(--green); }
.ds-nav{ display:flex; align-items:center; gap:10px; height:36px; padding:0 10px; border-radius:9px; font-size:14px; color:#555; transition:background .25s, color .25s; }
.ds-nav svg{ color:#A1A1A1; transition:color .25s; }
.ds-nav.on{ background:var(--brand-soft); color:var(--brand); } .ds-nav.on svg{ color:var(--brand); }
.ds-main{ position:relative; padding:24px; }
.ds-pane{ position:absolute; inset:24px; display:flex; flex-direction:column; gap:16px; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .45s, transform .45s cubic-bezier(.2,.8,.2,1), visibility 0s .45s; }
.ds-pane.on{ position:relative; inset:auto; opacity:1; visibility:visible; transform:none; transition:opacity .45s, transform .45s cubic-bezier(.2,.8,.2,1); }
.ds-row{ display:flex; gap:16px; } .ds-row.tight{ gap:10px; margin-top:16px; }
.ds-card{ background:#fff; border-radius:16px; box-shadow:0 0 0 1px #ECECEC; padding:20px; min-width:0; }
.ds-card.grow{ flex:1; } .w-280{ width:280px; flex:none; } .w-320{ width:320px; flex:none; } .ds-card.center{ text-align:center; }
.ds-k{ font-size:12.5px; color:#8F8F8F; }
.ds-big{ display:flex; align-items:baseline; gap:8px; margin-top:8px; } .ds-big b{ font-size:44px; font-weight:500; letter-spacing:-0.05em; line-height:1; color:#0A0A0A; } .ds-big span{ font-size:14px; color:#666; }
.ds-big.sm{ justify-content:center; } .ds-big.sm b{ font-size:34px; }
.ds-spark{ width:100%; height:90px; margin-top:14px; display:block; }
.ds-spark .area{ fill:var(--brand-soft); } .ds-spark .ln{ fill:none; stroke:var(--brand); stroke-width:2.5; stroke-linejoin:round; stroke-dasharray:600; stroke-dashoffset:600; }
.ds-pane.on .ds-spark .ln{ animation:dsdraw 1.4s ease-out forwards; }
@keyframes dsdraw{ to{ stroke-dashoffset:0; } }
.ds-edges{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:6px; }
.ds-edges li{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; background:#F7F7F8; font-size:14px; }
.ds-edges i{ width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(47,180,99,.5); }
.ds-pane.on .ds-edges i{ animation:dsping 1.8s ease-out infinite; } .ds-edges li:nth-child(2) i{ animation-delay:.3s !important; } .ds-edges li:nth-child(3) i{ animation-delay:.6s !important; } .ds-edges li:nth-child(4) i{ animation-delay:.9s !important; }
@keyframes dsping{ 0%{ box-shadow:0 0 0 0 rgba(47,180,99,.5); } 70%{ box-shadow:0 0 0 7px rgba(47,180,99,0); } 100%{ box-shadow:0 0 0 0 rgba(47,180,99,0); } }
.ds-edges b{ margin-left:auto; font:500 11px var(--mono); color:var(--brand); background:var(--brand-soft); padding:2px 8px; border-radius:999px; }
.ds-meter{ height:10px; border-radius:6px; background:#F0F0F0; overflow:hidden; margin-top:14px; } .ds-meter s{ display:block; height:100%; width:0; background:var(--brand); border-radius:6px; transition:width 1.2s cubic-bezier(.2,.8,.2,1) .2s; }
.ds-pane.on .ds-meter s{ width:var(--w); }
.ds-sub{ margin-top:10px; font-size:13.5px; color:#666; } .ds-sub b{ color:#0A0A0A; font-weight:500; }
.ds-pills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; } .ds-pills span{ font-size:13px; padding:6px 12px; border-radius:999px; background:#F4F4F4; } .ds-pills span.on{ background:var(--brand); color:#fff; }
.ds-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.ds-t{ display:block; margin-top:4px; font-size:17px; font-weight:500; letter-spacing:-0.01em; }
.ds-sw{ position:relative; width:40px; height:22px; border-radius:999px; background:#DADADA; flex:none; } .ds-sw::after{ content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .3s; }
.ds-sw.on{ background:var(--brand); } .ds-sw.on::after{ transform:translateX(18px); }
.ds-list{ list-style:none; margin:16px 0 0; padding:0; } .ds-list li{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-top:1px solid #F0F0F0; font:13px var(--mono); color:#555; }
.ds-list .hit{ font:500 11px var(--mono); color:#0E8A57; background:#E7F8EF; padding:2px 8px; border-radius:999px; }
.ds-actions{ display:flex; align-items:center; gap:14px; margin-top:14px; } .ds-btn{ display:inline-flex; align-items:center; height:34px; padding:0 14px; border-radius:999px; box-shadow:inset 0 0 0 1px #D4D4D4; font-size:13.5px; font-weight:500; }
.ds-btn.solid{ margin-top:18px; background:var(--brand); color:#fff; box-shadow:none; height:40px; padding:0 18px; } .ds-note{ font-size:12.5px; color:#8F8F8F; }
.ds-cmp{ display:grid; gap:14px; margin-top:16px; } .ds-cmp span{ display:block; font-size:13px; color:#666; margin-bottom:6px; }
.ds-cmp s{ display:block; height:12px; border-radius:6px; width:0; transition:width 1.2s cubic-bezier(.2,.8,.2,1) .2s; } .ds-cmp .slow{ background:#D4D4D4; } .ds-cmp .fast{ background:var(--brand); }
.ds-pane.on .ds-cmp .slow{ width:100%; } .ds-pane.on .ds-cmp .fast{ width:28%; }
.ds-ring{ width:150px; height:150px; margin:12px auto 0; display:block; transform:rotate(-90deg); }
.ds-ring circle{ fill:none; stroke-width:12; } .ds-ring .bg{ stroke:#F0F0F0; } .ds-ring .fg{ stroke:var(--brand); stroke-linecap:round; stroke-dasharray:314; stroke-dashoffset:314; transition:stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1) .2s; }
.ds-pane.on .ds-ring .fg{ stroke-dashoffset:236; }
.ds-bars{ display:flex; align-items:flex-end; gap:6px; height:150px; margin-top:16px; }
.ds-bars i{ flex:1; height:6%; border-radius:4px 4px 2px 2px; background:var(--brand-soft); transition:height .8s cubic-bezier(.2,.8,.2,1) var(--d); }
.ds-pane.on .ds-bars i{ height:var(--h); } .ds-bars i:nth-child(3n){ background:var(--brand); }
.ds-mini{ flex:1; padding:10px 12px; border-radius:10px; background:#F7F7F8; } .ds-mini span{ display:block; font-size:12px; color:#8F8F8F; } .ds-mini b{ font-size:14px; font-weight:500; }
.ds-tag{ font:500 11px var(--mono); padding:3px 9px; border-radius:999px; } .ds-tag.ok{ color:#0E8A57; background:#E7F8EF; }
.ds-chat{ display:grid; gap:10px; margin-top:16px; } .ds-chat .m{ max-width:80%; padding:11px 14px; border-radius:14px 14px 14px 4px; background:#F4F4F4; font-size:14px; line-height:1.5; opacity:0; transform:translateY(6px); transition:opacity .4s, transform .4s; }
.ds-chat .m b{ display:block; font-size:12px; color:var(--brand); font-weight:500; margin-bottom:2px; }
.ds-chat .m.me{ justify-self:end; background:var(--brand); color:#fff; border-radius:14px 14px 4px 14px; }
.ds-pane.on .ds-chat .m{ opacity:1; transform:none; } .ds-pane.on .ds-chat .m:nth-child(2){ transition-delay:.6s; } .ds-pane.on .ds-chat .m:nth-child(3){ transition-delay:1.2s; }
.ds-ticks{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:10px; font-size:14px; } .ds-ticks.two{ grid-template-columns:1fr 1fr; }
.ds-ticks li{ display:flex; align-items:center; gap:10px; } .ds-ticks svg{ width:20px; height:20px; padding:4px; border-radius:50%; background:var(--brand-soft); color:var(--brand); flex:none; }
.ds-yr{ display:flex; align-items:center; gap:10px; margin-top:16px; font-size:14px; } .ds-yr em{ font:normal 12px var(--mono); padding:2px 8px; border-radius:999px; background:var(--brand-soft); color:var(--brand); }
@media (max-width:1023px){ .ds-body{ grid-template-columns:1fr; } .ds-side{ display:none; } .ds-row{ flex-direction:column; } .w-280, .w-320{ width:auto; } }
@media (max-width:719px){
  .ds{ padding:64px 16px 80px; } .ds-tabs{ border-radius:20px; } .ds-tab{ height:36px; padding:0 12px; font-size:13px; } .ds-tab span{ display:none; } .ds-tab[aria-selected="true"] span{ display:inline; }
  .ds-caps{ height:48px; } .ds-cap{ font-size:14.5px; } .ds-main{ padding:14px; } .ds-pane{ inset:14px; } .ds-big b{ font-size:36px; } .ds-ticks.two{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){ .ds-pane, .ds-cap, .ds-chat .m{ transition:none; } .ds-spark .ln{ stroke-dashoffset:0; } }
.ds-stat{ display:flex; flex-direction:column; gap:4px; padding:16px 18px; } .ds-stat span{ font-size:12.5px; color:#8F8F8F; } .ds-stat b{ font-size:18px; font-weight:500; letter-spacing:-0.02em; }
a.ds-stat{ text-decoration:none; color:inherit; transition:box-shadow .2s; } a.ds-stat:hover{ box-shadow:0 0 0 1px var(--brand-line); } a.ds-stat b{ font-size:15.5px; }
.ds-sizes{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; } .ds-sizes span{ display:flex; flex-direction:column; padding:8px 12px; border-radius:10px; background:#F7F7F8; font:12.5px var(--mono); color:#666; } .ds-sizes b{ font:500 13px var(--sans); color:#0A0A0A; }
.ds-sizes span.on{ background:var(--brand); color:#E6E2FF; } .ds-sizes span.on b{ color:#fff; }

/* ── Offer topbar (owner, 2026-10-29): 2 months free on yearly + extra 30% off, above the sticky header ── */
.offer{ background:#0A0A0B; color:#EDEDED; border-bottom:1px solid rgba(255,255,255,.08); }
.offer[hidden]{ display:none; }
.offer-in{ display:flex; align-items:center; justify-content:center; gap:14px; height:44px; position:relative; }
.offer-k{ font:600 11px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--brand-btn-dark); padding:4px 10px; border-radius:999px; }
.offer p{ margin:0; font-size:14px; color:#BDBDBD; white-space:nowrap; } .offer p b{ color:#fff; font-weight:500; }
.offer .plus{ color:var(--brand-on-dark); font-weight:600; margin:0 2px; }
.offer-go{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 12px; border-radius:999px; background:#fff; color:#000; font-size:13px; font-weight:500; text-decoration:none; white-space:nowrap; transition:background .15s; }
.offer-go:hover{ background:#E6E2FF; }
.offer-go svg{ transition:transform .2s; } .offer-go:hover svg{ transform:translateX(2px); }
.offer-x{ all:unset; position:absolute; right:var(--pad); width:28px; height:28px; border-radius:50%; display:grid; place-items:center; color:#8F8F8F; cursor:pointer; }
.offer-x:hover{ color:#fff; background:rgba(255,255,255,.08); } .offer-x:focus-visible{ outline:2px solid var(--brand-on-dark); }
@media (max-width:719px){
  .offer-in{ justify-content:flex-start; gap:10px; height:auto; min-height:44px; padding-top:8px; padding-bottom:8px; padding-right:48px; flex-wrap:wrap; }
  .offer p{ font-size:13px; white-space:normal; } .offer-k{ font-size:10px; }
}
@media (max-width:1023px){ .light .hdr-act .login{ display:none; } }

/* ═══ Web Hosting page, round 3 (owner, 2026-10-29) ═══ */
/* Offer bar: a little bigger */
.offer-in{ height:48px; gap:16px; } .offer p{ font-size:15px; } .offer-k{ font-size:11.5px; padding:5px 11px; } .offer-go{ height:30px; font-size:13.5px; }

/* Hero: copy left, price card right */
.hx2 > .frame{ padding-bottom:104px; }
.hx2 .hh-grid{ grid-template-columns:minmax(0, 1.25fr) minmax(0, .85fr); gap:56px; align-items:center; }
.hx2 .hh-copy h1{ font-size:clamp(44px, 5.4vw, 72px); }
.hx2 .hh-copy h1 span{ color:var(--brand); }
.hx-rate{ display:flex; flex-wrap:wrap; gap:10px 24px; margin-top:32px; font-size:14px; color:#666; }
.hx-rate span{ display:inline-flex; align-items:center; gap:6px; } .hx-rate b{ color:#0A0A0A; font-weight:500; } .hx-rate em{ display:inline-flex; gap:1px; color:#F5A524; }
.hx-card{ position:relative; z-index:1; background:#fff; border-radius:24px; padding:28px; box-shadow:0 0 0 1px #EAEAEA, 0 40px 80px -40px rgba(91,76,232,.35); }
.hx-top{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.hx-name{ font-size:15px; font-weight:500; } .hx-deal{ font:500 11.5px var(--mono); color:var(--brand); background:var(--brand-soft); padding:4px 10px; border-radius:999px; }
.hx-price{ display:flex; align-items:baseline; gap:6px; margin-top:20px; } .hx-price b{ font-size:60px; font-weight:500; letter-spacing:-0.05em; line-height:1; } .hx-price span{ font-size:15px; color:#666; }
.hx-note{ margin:10px 0 0; font-size:13.5px; color:#8F8F8F; }
.hx-list{ list-style:none; margin:20px 0 0; padding:18px 0 0; border-top:1px solid #F0F0F0; display:grid; gap:11px; font-size:14.5px; }
.hx-list li{ display:flex; align-items:center; gap:10px; } .hx-list svg{ width:20px; height:20px; padding:4px; border-radius:50%; background:var(--brand-soft); color:var(--brand); flex:none; }
.hx-go{ width:100%; height:48px; margin-top:24px; font-size:15.5px; }
.hx-up{ display:flex; justify-content:center; align-items:center; gap:8px; margin-top:14px; font-size:13px; color:#666; text-decoration:none; } .hx-up i{ width:7px; height:7px; border-radius:50%; background:var(--green); } .hx-up:hover{ color:#0A0A0A; }

/* Showcase: header, five feature cards as the navigation, a bigger window */
.ds{ padding:104px 24px 120px; }
.ds-h{ padding:0 0 40px; } .ds-h .eb{ color:var(--brand-on-dark); } .ds-h .eb i{ background:var(--brand-on-dark); }
.ds-nav2{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:10px; margin:0 0 20px; }
.dsc{ all:unset; box-sizing:border-box; position:relative; cursor:pointer; display:flex; flex-direction:column; gap:4px; padding:18px 18px 18px; border-radius:16px; background:#121214; box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); overflow:hidden; transition:background .25s, box-shadow .25s; }
.dsc:hover{ background:#17171A; }
.dsc[aria-selected="true"]{ background:#1A1830; box-shadow:inset 0 0 0 1px rgba(167,156,255,.45); }
.dsc:focus-visible{ outline:2px solid var(--brand-on-dark); outline-offset:2px; }
.dsc-ic{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:#1E1E22; color:#8F8F8F; margin-bottom:10px; transition:background .25s, color .25s; }
.dsc[aria-selected="true"] .dsc-ic{ background:var(--brand-btn-dark); color:#fff; }
.dsc b{ font-size:15px; font-weight:500; color:#EDEDED; } .dsc-d{ font-size:13px; color:#8F8F8F; }
.dsc .ds-prog{ left:0; right:0; top:0; bottom:auto; height:2px; border-radius:0; opacity:1; background:transparent; }
.ds.auto .dsc[aria-selected="true"] .ds-prog::after{ border-radius:0; }
.ds-bar .ds-pause{ width:30px; height:30px; margin-left:10px; color:#8F8F8F; border-radius:8px; } .ds-bar .ds-pause:hover{ background:#F2F2F2; color:#0A0A0A; }
.ds-win{ max-width:none; }
.ds-body{ grid-template-columns:240px minmax(0, 1fr); min-height:560px; }
.ds-main{ padding:32px; } .ds-pane{ inset:32px; gap:20px; } .ds-row{ gap:20px; }
.ds-card{ padding:24px; } .ds-big b{ font-size:52px; } .ds-spark{ height:120px; } .ds-bars{ height:180px; }
@media (max-width:1023px){ .ds-nav2{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width:719px){
  .ds{ padding:72px 16px 80px; } .ds-nav2{ grid-template-columns:repeat(5, minmax(0, 1fr)); gap:6px; }
  .dsc{ padding:12px 6px; align-items:center; } .dsc b, .dsc-d{ display:none; } .dsc-ic{ margin:0; }
  .ds-main{ padding:14px; } .ds-pane{ inset:14px; } .ds-body{ min-height:0; }
  .hx2 .hh-grid{ grid-template-columns:1fr; } .hx-card{ padding:22px; } .hx-price b{ font-size:48px; }
}
@media (max-width:1023px){ .hx2 .hh-grid{ grid-template-columns:1fr; } }

/* Pricing: minimal header; the slider card, the plan cards and the ticks sit apart */
.pr-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px 24px; flex-wrap:wrap; padding:96px 24px 0; position:relative; z-index:1; }
.pr-head h2{ font-size:clamp(28px, 3vw, 40px); } .pr-head p{ margin:6px 0 0; font-size:15px; color:var(--muted); }
.pr-head .cycle.seg{ margin:0; }
.pr-sec .pz{ background:none; border:0; box-shadow:none; overflow:visible; margin-top:32px; }
.pr-sec .pz-top{ display:none; }
.pr-sec .pz-main{ background:#0E0E10; border-radius:24px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.pr-sec .pz-cards{ background:none; border:0; margin-top:16px; padding:6px 0; clip-path:inset(-6px 0); }
.pr-sec .pz-cards li{ padding:0 8px; } .pr-sec .pz-cards ul{ margin:0 -8px; }
.pr-sec .pz-card{ background:#111113; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.pr-sec .pz-checks{ border:0; margin-top:16px; padding:16px 20px; border-radius:16px; background:#0E0E10; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
@media (max-width:719px){ .pr-head{ padding:72px 16px 0; } .pr-sec .pz{ margin:24px 16px 0; } }

/* WordPress: full-width centred title, figure on the left, three feature rows on the right */
.wp-h{ padding-top:112px; } .wp-h h2{ max-width:none; }
.wp2{ display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); gap:48px; align-items:center; padding:56px 24px 0; position:relative; z-index:1; }
.wp-art{ background:#fff; border-radius:24px; box-shadow:0 0 0 1px #EAEAEA; padding:24px; } .wp-art .wp-fig{ margin:0; } .wp-art svg{ width:100%; height:auto; display:block; }
.wp-rows{ display:grid; gap:14px; justify-items:start; }
.wp-r{ display:flex; gap:16px; align-items:flex-start; padding:20px; border-radius:18px; background:#fff; box-shadow:0 0 0 1px #EAEAEA; width:100%; box-sizing:border-box; }
.wp-ic{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--brand-soft); color:var(--brand); flex:none; }
.wp-r b{ display:block; font-size:17px; font-weight:500; letter-spacing:-0.01em; } .wp-r span{ font-size:14.5px; color:var(--muted); }
.wp-rows .btn{ margin-top:10px; }
@media (max-width:1023px){ .wp2{ grid-template-columns:1fr; } }
@media (max-width:719px){ .wp-h{ padding-top:80px; } .wp2{ padding:40px 16px 0; gap:24px; } }

/* Which size: a picker on the left, the suggested size on the right */
.fit2{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:24px; padding:56px 24px 0; position:relative; z-index:1; max-width:1000px; margin:0 auto; }
.fo-list{ display:grid; gap:10px; align-content:start; }
.fo{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:16px; padding:18px 20px; border-radius:16px; background:#fff; box-shadow:0 0 0 1px #EAEAEA; transition:box-shadow .2s, background .2s; }
.fo:hover{ box-shadow:0 0 0 1px var(--brand-line); }
.fo[aria-checked="true"]{ background:var(--brand-soft); box-shadow:0 0 0 1.5px var(--brand); }
.fo:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.fo i{ width:18px; height:18px; border-radius:50%; box-shadow:inset 0 0 0 1.5px #C4C4C4; flex:none; transition:box-shadow .2s; }
.fo[aria-checked="true"] i{ box-shadow:inset 0 0 0 5px var(--brand); }
.fo b{ display:block; font-size:16.5px; font-weight:500; } .fo small{ font-size:14px; color:var(--muted); }
.fo-card{ background:#0E0E10; color:#EDEDED; border-radius:24px; padding:28px; display:flex; flex-direction:column; }
.fo-k{ font:12px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--brand-on-dark); }
.fo-name{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-top:12px; }
.fo-name > b{ font-size:40px; font-weight:500; letter-spacing:-0.04em; }
.fo-price{ font-size:15px; color:#A1A1A1; } .fo-price b{ font-size:26px; font-weight:500; color:#fff; letter-spacing:-0.03em; }
.fo-specs{ margin:20px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:0 20px; border-top:1px solid rgba(255,255,255,.08); }
.fo-specs div{ padding:12px 0; border-bottom:1px solid rgba(255,255,255,.08); } .fo-specs dt{ font-size:12.5px; color:#8F8F8F; } .fo-specs dd{ margin:2px 0 0; font-size:16px; font-weight:500; }
.fo-go{ margin-top:24px; height:48px; width:100%; }
.fo-note{ margin:12px 0 0; font-size:12.5px; color:#8F8F8F; text-align:center; }
.fo-card .fo-name > b, .fo-price b, .fo-specs dd{ transition:opacity .25s; } .fo-card.swap .fo-name > b, .fo-card.swap .fo-price b, .fo-card.swap .fo-specs dd{ opacity:0; }
@media (max-width:719px){ .fit2{ grid-template-columns:1fr; padding:40px 16px 0; } .fo-card{ padding:22px; } }
.ds-body{ min-height:500px; }
@media (max-width:719px){
  .ds-nav2 .dsc .dsc-ic, .ds-nav2 .dsc[aria-selected="true"] .dsc-ic{ display:grid; }
  .ds-nav2 .dsc .dsc-d, .ds-nav2 .dsc[aria-selected="true"] .dsc-d, .ds-nav2 .dsc b{ display:none; }
  .ds-nav2 .dsc{ height:56px; justify-content:center; }
  .ds-pane .ds-row > *{ width:100%; box-sizing:border-box; }
  .ds-bar span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ds-bar small{ display:none; }
}
@media (max-width:1023px){ .ds-body{ grid-template-columns:minmax(0, 1fr); } }
@media (max-width:719px){ .offer-in{ height:auto; min-height:48px; } }

/* ── Web Hosting hero, round 4: centred exactly like the homepage hero (owner: "based on homepage and flynode") ── */
.hc3 > .rails i{ display:none; }
.hc3 > .frame{ padding-bottom:96px; }
.hc3 .hb .crumb{ display:block; margin-bottom:20px; }
.hc3 .hb h1 span{ display:block; color:var(--brand); }
.hc3 .ht-pill b{ color:var(--brand); }
.hc3 .ht-trust{ margin-top:32px; }
.wp-sec .wp-art, .wp-sec .wp-r{ box-shadow:0 0 0 1px #EAEAEA; }
.wp-sec .wp-art{ background:#FAFAFA; }
.tone .fo{ background:#fff; }
.hc3 .hb h1{ max-width:none; font-size:clamp(40px, 5.2vw, 64px); line-height:1.04; } .hc3 .hb h1 > span{ margin-top:4px; }
.ht-trust svg{ color:#F5A524; }

/* ═══ Enterprise polish (owner, 2026-10-30: "feel like an enterprise site, AWS / DigitalOcean; no revamp, CSS only").
   Scoped to body.ent (homepage + Web Hosting). Add ?classic to the URL to see the page without it.
   Same layout, colours and sections; tighter type, squarer corners, hairline borders, quiet elevation, calmer hovers. ═══ */
.ent{ --ent-r:12px; --ent-r-sm:8px; --ent-shadow:0 1px 2px rgba(16,16,20,.05), 0 1px 1px rgba(16,16,20,.03); --ent-shadow-up:0 1px 2px rgba(16,16,20,.06), 0 8px 24px -12px rgba(16,16,20,.18); }
.ent .light{ --muted:#5E5E66; --line:#E7E7EA; --line-2:#D6D6DB; }
.ent ::selection{ background:var(--brand-soft); color:#0A0A0A; }
.ent :focus-visible{ outline-color:var(--brand); }

/* Type: a little firmer and denser, balanced headline breaks */
.ent h1, .ent h2, .ent h3{ font-weight:550; text-wrap:balance; }
.ent p, .ent .lede{ text-wrap:pretty; }
.ent .h-xl{ font-size:clamp(40px, 5.6vw, 74px); line-height:1.03; letter-spacing:-0.042em; }
.ent .h-l{ font-size:clamp(32px, 3.9vw, 50px); line-height:1.07; letter-spacing:-0.035em; }
.ent .lede{ font-size:18px; line-height:1.6; }
.ent .sh .eb, .ent .eb2, .ent .label, .ent .nm .label{ font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:500; }

/* Offer bar keeps its size (owner set 15px); header gets a firmer line */
.ent .offer-k, .ent .offer-go{ border-radius:6px; }
.ent .hdr{ box-shadow:0 1px 0 rgba(16,16,20,.02), 0 6px 16px -14px rgba(16,16,20,.25); }
.ent .hdr .bar{ height:68px; }
.ent .nav-btn{ border-radius:6px; }
.ent .menu-btn{ border-radius:8px; }

.ent .restore button{ border-radius:6px; }
.ent .tabs, .ent .switch{ border-radius:999px; }

/* Hero: badge and trust row read like a product line, the console sits on a soft shadow */
.ent .ht-pill{ border-radius:8px; height:30px; font-size:12.5px; box-shadow:inset 0 0 0 1px var(--line-2), var(--ent-shadow); }
.ent .ht-trust{ gap:10px 22px; font-size:13.5px; }
.ent .hb .cta{ margin-top:34px; }
.ent .cx{ border-radius:12px 12px 0 0; box-shadow:0 -1px 0 rgba(0,0,0,.04), 0 40px 80px -40px rgba(16,16,20,.45), 0 0 0 1px rgba(16,16,20,.10); }
.ent .cap{ font-family:var(--mono); font-size:11.5px; letter-spacing:0; }

/* Numbers row: hairline cells, mono captions */
.ent .proof > div + div{ border-left-color:var(--line); }
.ent .proof b{ font-weight:550; }
.ent .proof span{ font-family:var(--mono); font-size:12px; letter-spacing:.02em; }

/* Cards: 12px corners, hairline edges, no lift on hover (the edge and shadow answer instead) */
.ent .bn .p2 > a, .ent .fx{ border-radius:14px; box-shadow:inset 0 0 0 1px rgba(16,16,20,.06); transition:box-shadow .2s; }
.ent .bn .p2 > a:hover, .ent .fx:hover{ transform:none; box-shadow:inset 0 0 0 1px rgba(16,16,20,.14), var(--ent-shadow-up); }
.ent .bn .smalls a{ border-radius:var(--ent-r); box-shadow:0 0 0 1px var(--line), var(--ent-shadow); }
.ent .bn .smalls a:hover{ box-shadow:0 0 0 1px var(--line-2), var(--ent-shadow-up); background:#fff; }
.ent .bn .ic, .ent .fx-ic{ border-radius:8px; }
.ent .fx.big .fx-ic{ border-radius:12px; }
.ent .fact svg{ width:36px; height:36px; padding:9px; border-radius:8px; box-shadow:inset 0 0 0 1px var(--brand-line); }
.ent .rv-card{ border-radius:var(--ent-r); box-shadow:0 0 0 1px var(--line), var(--ent-shadow); }
.ent .wp-r{ border-radius:var(--ent-r); box-shadow:0 0 0 1px var(--line), var(--ent-shadow); }
.ent .fq-more{ border-radius:var(--ent-r); box-shadow:0 0 0 1px var(--line), var(--ent-shadow); }
.ent .win{ border-radius:10px; }
.ent .cl-card, .ent .fo-card{ border-radius:14px; }
.ent .ds-win{ border-radius:14px; }
.ent .ds-card{ border-radius:10px; box-shadow:0 0 0 1px #E6E6E9, var(--ent-shadow); }
.ent .pz{ border-radius:14px; }
.ent .pz-card{ border-radius:var(--ent-r); }
.ent .ft-status{ border-radius:10px; }
.ent .ft-soc a{ border-radius:8px; }
.ent .cl-chip{ border-radius:8px; }
.ent .panel.cl{ border-radius:12px; }
.ent .panel.cl a{ border-radius:7px; }

/* Column rails a shade lighter on white/grey so the content leads */
.ent .light .rails .in, .ent .light .rails i{ border-color:#EEEEF0; }
.ent .light .rails i{ background:#EEEEF0; }
.ent .tone .rails .in{ border-color:#E8E8EB; } .ent .tone .rails i{ background:#E8E8EB; }

/* FAQ: firmer question weight */
.ent .fq summary{ font-weight:500; letter-spacing:-0.015em; }

/* Hero title · Tonal, T1 Even (owner picks, steps 9b + 9d, 2026-10-30): ink line 66px over a grey line 58px, one line each, no punctuation */
.light .hb h1.tn{ max-width:none; font-weight:550; }
.light .hb h1.tn .l1{ display:block; color:#0A0A0A; font-size:clamp(26px, 4.6vw, 66px); line-height:1.04; letter-spacing:-0.045em; }
.light .hb h1.tn .l2{ display:block; margin-top:.08em; color:#9A9AA2; font-size:clamp(28px, 4.1vw, 58px); line-height:1.06; letter-spacing:-0.045em; }

/* Hero · Stone (owner pick, step 9e, 2026-10-30): one flat light warm grey behind the hero; white header stays.
   Frame marks were dropped (owner: "can't like the frame designs"). */
.hero.stone{ background:#F3F3F1; }
.hero.stone .rails .in{ border-color:#E5E8EB; }
.hero.stone .ht-pill{ background:#fff; box-shadow:inset 0 0 0 1px #E5E8EB, 0 1px 2px rgba(16,16,20,.04); }
.hero.stone .lede{ color:#55555C; }

/* Hero CTA, bigger and bolder (owner, step 9e): 52px, 16px semibold, 10px corners; violet main button with an arrow chip
   that slides on hover; white secondary with a violet phone icon. Full width on phones. */
.cta2{ margin-top:36px; gap:12px; }
.b2{ display:inline-flex; align-items:center; justify-content:center; gap:10px; height:52px; padding:0 24px; border-radius:10px; font-size:16px; font-weight:550; letter-spacing:-0.01em; text-decoration:none; white-space:nowrap; transition:background .15s, box-shadow .15s, transform .15s; }
.b2 svg{ width:16px; height:16px; flex:none; }
.b2-p{ background:var(--brand); color:#fff; padding-right:20px; box-shadow:0 1px 2px rgba(40,30,120,.25), 0 8px 20px -8px rgba(91,76,232,.55), inset 0 1px 0 rgba(255,255,255,.16); }
.b2-p:hover{ background:var(--brand-hover); }
.b2-p .arw{ display:grid; place-items:center; width:26px; height:26px; border-radius:7px; background:rgba(255,255,255,.16); }
.b2-p .arw svg{ width:14px; height:14px; transition:transform .2s; }
.b2-p:hover .arw svg{ transform:translateX(2px); }
.b2-g{ background:#fff; color:#0A0A0A; box-shadow:inset 0 0 0 1px #E5E8EB, 0 1px 2px rgba(16,16,20,.06); }
.b2-g:hover{ box-shadow:inset 0 0 0 1px #BDBDC4, 0 1px 2px rgba(16,16,20,.08); }
.b2-g svg{ color:var(--brand); }
.b2:active{ transform:translateY(1px); }
.b2:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; }
.hb .cta2 + .ht-trust{ margin-top:28px; }
@media (prefers-reduced-motion:reduce){ .b2, .b2-p .arw svg{ transition:none; } }
@media (max-width:719px){ .cta2 .b2{ width:100%; } }

/* ═══ Buttons, site-wide (owner, 2026-10-30: "update the buttons site wide", from the step 9e hero buttons):
   52px, 16px weight 550, 10px corners. Main buttons violet with a soft violet shadow and an arrow chip (CSS only) that
   nudges on hover; secondary white with a hairline on light, glassy hairline on dark. Header buttons (.btn-sm) stay small. ═══ */
.btn{ height:52px; padding:0 24px; gap:10px; border-radius:10px; font-size:16px; font-weight:550; letter-spacing:-0.01em; border:0; transition:background .15s, box-shadow .15s, transform .15s, color .15s; }
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:10px; }
.btn-sm{ height:36px; padding:0 14px; border-radius:8px; font-size:14px; font-weight:500; }
.light .btn-primary, .dark .btn-primary{ background:var(--brand); color:#fff; box-shadow:0 1px 2px rgba(40,30,120,.25), 0 8px 20px -8px rgba(91,76,232,.55), inset 0 1px 0 rgba(255,255,255,.16); }
.light .btn-primary:hover, .dark .btn-primary:hover{ background:var(--brand-hover); }
.dark .btn-primary{ background:var(--brand-btn-dark); box-shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -8px rgba(110,93,242,.6), inset 0 1px 0 rgba(255,255,255,.18); }
.dark .btn-primary:hover{ background:var(--brand); }
.btn-primary:not(.btn-sm){ padding-right:14px; }
.btn-primary:not(.btn-sm)::after{ content:""; width:26px; height:26px; flex:none; border-radius:7px; background:rgba(255,255,255,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7h8M7.5 3.5L11 7l-3.5 3.5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 6px center / 14px no-repeat; transition:background-position .2s; }
.btn-primary:not(.btn-sm):hover::after{ background-position:8px center; }
.btn-sm.btn-primary{ box-shadow:0 1px 2px rgba(40,30,120,.25), inset 0 1px 0 rgba(255,255,255,.16); }
.light .btn-ghost{ background:#fff; color:#0A0A0A; box-shadow:inset 0 0 0 1px #E5E8EB, 0 1px 2px rgba(16,16,20,.06); }
.light .btn-ghost:hover{ box-shadow:inset 0 0 0 1px #BDBDC4, 0 1px 2px rgba(16,16,20,.08); }
.dark .btn-ghost{ background:rgba(255,255,255,.04); color:#EDEDED; box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); }
.dark .btn-ghost:hover{ background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); }
.bn .go, .pc-go, .pz-go, .ds-btn, .pz-card .btn, .fo-go{ border-radius:10px; font-weight:550; }
@media (prefers-reduced-motion:reduce){ .btn, .btn-primary::after{ transition:none; } }

/* ═══ Homepage products · Showcase (owner picks, steps 10 + 10b, 2026-10-30): the hero's look on Stone; Even title;
   Web Hosting large with the FlyPanel window, BDIX + VPS beside it, buttons with the price inside (C2); the other three
   as charcoal cards under them (S3). Replaces the pastel bento (.bn). ═══ */
.sc-sec{ background:#F3F3F1; }
.sc-sec .rails .in{ border-color:#E5E8EB; } .sc-sec .rails i{ display:none; }
.sc-sec > .frame{ padding-top:128px; padding-bottom:136px; }
/* Header left, H2 · Wide title (owner pick, step 10c, 2026-10-30): pill, the title one line each (ink, then grey), the line
   right under it. No side column, so no empty space beside the title. */
.sc-head{ padding:0 24px; }
.sc-t span{ white-space:nowrap; }
.sc-head p{ margin:18px 0 0; max-width:36em; font-size:18px; line-height:1.55; color:#55555C; }
.sc-pill{ display:inline-flex; align-items:center; gap:8px; height:30px; padding:0 12px; border-radius:8px; background:#fff; box-shadow:inset 0 0 0 1px #E5E8EB, 0 1px 2px rgba(16,16,20,.04); font-size:12.5px; color:#55555C; }
.sc-pill i{ width:6px; height:6px; border-radius:2px; background:var(--brand); } .sc-pill b{ color:#0A0A0A; font-weight:500; }
.sc-t{ margin-top:24px; font-weight:550; }
.sc-t span{ display:block; letter-spacing:-0.045em; }
.sc-t .a{ color:#0A0A0A; font-size:clamp(28px, 3.4vw, 48px); line-height:1.06; }
.light .sc-t .b{ color:#9A9AA2; font-size:clamp(28px, 3.4vw, 48px); line-height:1.06; margin-top:.04em; }
.sc-g{ display:grid; grid-template-columns:1.3fr 1fr; gap:16px; margin:56px 24px 0; }
.sc-card{ display:flex; flex-direction:column; background:#fff; border-radius:14px; box-shadow:0 0 0 1px #E5E8EB, 0 1px 2px rgba(16,16,20,.04); text-decoration:none; color:#0A0A0A; transition:box-shadow .2s; }
.sc-card:hover{ box-shadow:0 0 0 1px #CFCFCA, 0 1px 2px rgba(16,16,20,.06), 0 16px 32px -20px rgba(16,16,20,.28); }
.sc-big{ grid-row:span 2; overflow:hidden; }
.sc-art{ height:280px; display:flex; align-items:flex-end; justify-content:center; padding:36px 40px 0; background:#FAFAF8; border-bottom:1px solid #EEEEEA; }
.sc-art .pw{ max-width:380px; }
.sc-in{ padding:28px 30px 30px; display:flex; flex-direction:column; gap:10px; flex:1; }
.sc-card h3{ margin:0; font-size:19px; font-weight:550; letter-spacing:-0.02em; }
.sc-big h3{ font-size:28px; letter-spacing:-0.035em; }
.sc-card p, .sc-dk p{ margin:0; font-size:14.5px; line-height:1.5; color:#66666D; }
.sc-tag{ font:500 11.5px var(--mono); letter-spacing:.09em; text-transform:uppercase; color:#8F8F96; }
.sc-top{ display:flex; align-items:center; gap:14px; margin-bottom:6px; }
.sc-ic{ width:40px; height:40px; flex:none; border-radius:10px; display:grid; place-items:center; background:var(--brand-soft); color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand-line); }
.sc-ic svg{ width:18px; height:18px; }
.sc-row{ margin-top:auto; padding-top:18px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.sc-row .btn{ height:48px; font-size:15px; }
.sc-row .btn b{ font-weight:650; }
.sc-note{ font-size:13px; color:#8F8F96; }
.sc-card:hover .btn-ghost{ box-shadow:inset 0 0 0 1px #BDBDC4, 0 1px 2px rgba(16,16,20,.08); }
.sc-tri{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin:16px 24px 0; }
.sc-dk{ display:flex; flex-direction:column; gap:10px; min-height:200px; padding:24px; border-radius:14px; background:#0E0E10; color:#EDEDED; box-shadow:0 0 0 1px #1E1E22; text-decoration:none; transition:box-shadow .2s; }
.sc-dk:hover{ box-shadow:0 0 0 1px #34343A, 0 16px 32px -18px rgba(0,0,0,.5); }
.sc-dk .sc-ic{ background:rgba(110,93,242,.16); color:var(--brand-on-dark); box-shadow:inset 0 0 0 1px rgba(167,156,255,.25); margin-bottom:8px; }
.sc-dk h3{ margin:0; font-size:19px; font-weight:550; letter-spacing:-0.02em; color:#EDEDED; }
.sc-dk p{ color:#A1A1A1; }
.sc-ft{ margin-top:auto; padding-top:16px; border-top:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sc-pr{ font-size:14px; color:#8F8F8F; } .sc-pr b{ font-size:22px; font-weight:550; letter-spacing:-0.03em; color:#fff; margin:0 2px; }
.sc-lk{ display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:550; color:var(--brand-on-dark); }
.sc-lk .arw{ width:14px; height:14px; transition:transform .2s; } .sc-dk:hover .sc-lk .arw{ transform:translateX(3px); }
@media (prefers-reduced-motion:reduce){ .sc-lk .arw{ transition:none; } }
@media (max-width:1023px){ .sc-t span{ white-space:normal; } .sc-g, .sc-tri{ grid-template-columns:1fr; } .sc-big{ grid-row:auto; } .sc-dk{ min-height:0; } }
@media (max-width:719px){
  .sc-sec > .frame{ padding-top:88px; padding-bottom:96px; }
  .sc-head{ padding:0 16px; } .sc-g, .sc-tri{ margin-left:16px; margin-right:16px; }
  .sc-art{ height:210px; padding:24px 16px 0; } .sc-in{ padding:22px 20px 24px; }
  .sc-row .btn{ width:100%; }
}

/* Bottom three, shorter and without prices (owner, 2026-10-30): icon and name on one row, one line, then the link */
.sc-dk{ min-height:0; padding:20px 22px; gap:8px; }
.sc-dt{ display:flex; align-items:center; gap:12px; }
.sc-dk .sc-dt .sc-ic{ width:36px; height:36px; margin:0; } .sc-dk .sc-dt .sc-ic svg{ width:16px; height:16px; }
.sc-dk .sc-ft{ padding-top:12px; justify-content:flex-start; }

/* Review cards: illustrated profile pictures (owner, 2026-10-30) */
.rv-card .av.av-img{ padding:0; overflow:hidden; background:none; box-shadow:0 0 0 1px rgba(16,16,20,.06); }
.rv-card .av.av-img svg{ width:100%; height:100%; display:block; }

/* Footer a little less black (owner, 2026-10-30: "not flynode black, undo it; just use less black in footer"):
   a neutral charcoal, no blue tint; its inner boxes step up from it */
.ft2{ background:#1A1A1C; }
.ft-status{ background:#222225; } .ft-status:hover{ background:#27272A; }
.ft-soc a{ background:#232326; } .ft-soc a:hover{ background:var(--brand); }

/* Offer bar (top bar) in the same FlyNode charcoal as the hero dashboards (owner, 2026-10-30: "change topbar color to same") */
.offer{ background:#18191D; border-bottom-color:rgba(255,255,255,.06); }
/* Offer text in one colour (owner, 2026-10-30: "use same text color"); the two key phrases stay bold */
.offer p, .offer p b, .offer .plus{ color:#EDEDED; }