/* Linux VPS plan cards */
.vps-flag { width:22px; height:15px; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.15); vertical-align:-3px; margin-right:7px; flex-shrink:0; }
.cycle-btn .vps-flag { display:inline-block; }
.vps-where { display:flex; justify-content:center; align-items:center; gap:7px; font-size:12.5px; color:var(--slate); margin-top:18px; padding-top:14px; border-top:1px solid var(--paper-line); }
.vps-where .vps-flag { margin:0; width:20px; height:13px; }
.vps-controls { display:flex; justify-content:center; align-items:center; gap:16px 28px; flex-wrap:wrap; margin-bottom:44px; }
.vps-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; align-items:stretch; }
.vps-card {
  position:relative; display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--paper-line); border-radius:14px; padding:28px 20px 24px;
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s cubic-bezier(.16,1,.3,1);
}
.vps-card:hover { transform:translateY(-6px); box-shadow:0 18px 34px -16px rgba(15,23,42,.25); }
.vps-card.popular { border:2px solid var(--signal); box-shadow:0 20px 40px -18px rgba(227,36,43,.35); transform:translateY(-10px); }
.vps-card.popular:hover { transform:translateY(-16px); }
.vps-badge {
  position:absolute; top:-13px; left:50%; transform:translateX(-50%); white-space:nowrap;
  background:var(--signal); color:#fff; font-family:var(--font-mono); font-size:11.5px; font-weight:500;
  padding:5px 12px; border-radius:999px; letter-spacing:.03em;
}
.vps-name { font-family:var(--font-mono); font-size:13px; font-weight:600; letter-spacing:.08em; color:var(--slate); text-align:center; }
.vps-term { font-size:12.5px; color:var(--slate); text-align:center; margin-top:14px; }
.vps-price { font-size:32px; font-weight:700; color:var(--ink); text-align:center; line-height:1.15; margin:2px 0 18px; }
.vps-price small { font-size:13px; font-weight:500; color:var(--slate); }
.vps-card .btn { margin-bottom:22px; }
.vps-specs { list-style:none; margin:0; padding:18px 0 0; border-top:1px solid var(--paper-line); display:flex; flex-direction:column; gap:12px; }
.vps-specs li { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink); }
.vps-specs svg, .vps-ico svg { width:18px; height:18px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.vps-specs svg { color:var(--signal); }
.vps-specs .lbl { color:var(--slate); margin-left:auto; font-size:12.5px; }
.vps-footnote { text-align:center; margin-top:28px; }

.vps-features { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.vps-feature { background:#fff; border:1px solid var(--paper-line); border-radius:12px; padding:26px 24px; }
.vps-ico { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:10px; background:var(--signal-tint); color:var(--signal); margin-bottom:14px; }
.vps-ico svg { width:22px; height:22px; }
.vps-feature h4 { font-size:16px; margin:0 0 6px; }
.vps-feature p { margin:0; font-size:14px; color:var(--slate); }

.compare-table thead th small { font-family:var(--font-body); text-transform:none; letter-spacing:0; font-weight:500; font-size:12.5px; color:var(--slate); }

.vps-banner-inner { display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; }
.vps-banner h2 { font-size:clamp(22px,2.6vw,30px); max-width:720px; margin:0 0 10px; }
.vps-banner p { margin:0; color:var(--slate); font-size:16px; }

@media (max-width:1100px) { .vps-grid { grid-template-columns:repeat(2,1fr); } .vps-card.popular { transform:none; } .vps-card.popular:hover { transform:translateY(-6px); } }
@media (max-width:900px) { .vps-features { grid-template-columns:1fr 1fr; } }
@media (max-width:640px) { .vps-grid, .vps-features { grid-template-columns:1fr; } }

/* One background colour (#fffdf9) for every section */
section, .vps-banner { background:#fffdf9; }
.feature-band { background:var(--paper-dim); }
.vps-banner { border-top:1px solid var(--paper-line); }

.vps-hero-art { display:flex; justify-content:center; }
.vps-hero-art svg { width:100%; max-width:520px; height:auto; }
@media (max-width:900px) { .vps-hero-art { display:none; } }

/* Content sections */
.vps-hero-price { margin:18px 0 0; font-size:16px; color:var(--slate); }
.vps-hero-price strong { color:var(--ink); font-size:20px; }
.vps-start-price { text-align:center; margin:28px 0 0; font-size:16px; color:var(--slate); }
.vps-start-price strong { color:var(--ink); font-size:20px; }
.vps-locations { text-align:center; margin:10px 0 0; font-size:13.5px; color:var(--slate); }
.vps-split { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.vps-split.center-y { align-items:center; }
.vps-split .section-head p { margin-top:14px; max-width:none; }
.vps-h3 { font-size:19px; margin:0 0 8px; color:var(--ink); }
.vps-h3.center, .vps-sub.center { text-align:center; }
.vps-sub { font-size:14.5px; color:var(--slate); margin:0 auto 22px; max-width:720px; }
.vps-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.vps-list li { position:relative; padding:14px 16px 14px 44px; background:#fff; border:1px solid var(--paper-line); border-radius:10px; font-size:14.5px; color:var(--ink); }
.vps-list li::before { content:"✓"; position:absolute; left:16px; top:14px; color:var(--signal); font-family:var(--font-mono); }
.vps-list li strong { font-weight:600; }
.vps-list.cols-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:1100px) { .vps-list.cols-4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px) { .vps-list.cols-4 { grid-template-columns:1fr; } }
.vps-note { font-size:14px; border-left:3px solid var(--signal); padding-left:14px; color:var(--ink); }
.feature-grid.two { grid-template-columns:repeat(2,1fr); }
.vps-features.cols-4 { grid-template-columns:repeat(4,1fr); }
.vps-features.cols-5 { grid-template-columns:repeat(5,1fr); }
.vps-features.cols-5 .vps-feature { padding:22px 18px; }
.vps-figure { margin:0; background:#fff; border:1px solid var(--paper-line); border-radius:16px; padding:16px; }
.vps-figure svg { display:block; width:100%; height:auto; }
.vps-figure figcaption { font-size:13px; color:var(--slate); margin-top:12px; text-align:center; }
.vps-two { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:24px; }
.vps-link { color:var(--signal); font-weight:600; white-space:nowrap; }
.vps-list.cols-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:900px) { .vps-list.cols-3 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px) { .vps-list.cols-3 { grid-template-columns:1fr; } }
.vps-cta-box > div:first-child { flex:1 1 420px; max-width:620px; }
.vps-cta-art { flex:0 1 380px; }
.vps-cta-art svg { display:block; width:100%; height:auto; }
.vps-cta-box { display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; background:#fff; border:1px solid var(--paper-line); border-radius:16px; padding:40px; }
.vps-cta-box > div { max-width:760px; }
.vps-cta-box h2 { font-size:clamp(24px,2.8vw,32px); margin:0 0 14px; }
.vps-cta-box p { font-size:15px; color:var(--slate); margin:0 0 12px; }
.vps-banner-price { margin-top:14px !important; color:var(--slate) !important; }
.vps-banner-price strong { font-size:20px; color:var(--ink); }
@media (max-width:1100px) { .vps-features.cols-4 { grid-template-columns:repeat(2,1fr); } .vps-features.cols-5 { grid-template-columns:repeat(3,1fr); } }
@media (max-width:900px) { .vps-split { grid-template-columns:1fr; gap:32px; } }
@media (max-width:640px) { .feature-grid.two, .vps-two, .vps-features.cols-4, .vps-features.cols-5 { grid-template-columns:1fr; } .vps-cta-box { padding:28px 22px; } }
#compare .section-head { max-width:880px; }
@media (min-width:700px) { #compare .section-head h2 { white-space:nowrap; } }
#who .vps-feature { position:relative; overflow:hidden; border-top:3px solid var(--signal); transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1), border-color .3s; }
#who .vps-feature::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--signal); transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.16,1,.3,1); }
#who .vps-feature:hover { transform:translateY(-8px); box-shadow:0 20px 38px -18px rgba(15,23,42,.3); }
#who .vps-feature:hover::after { transform:scaleX(1); }
#who .vps-ico { transition:transform .35s cubic-bezier(.34,1.56,.64,1), background .3s, color .3s; }
#who .vps-feature:hover .vps-ico { transform:scale(1.12) rotate(-8deg); background:var(--signal); color:#fff; }
#who .vps-feature h4 { transition:color .3s; }
#who .vps-feature:hover h4 { color:var(--signal); }
@media (prefers-reduced-motion:reduce) { #who .vps-feature, #who .vps-feature::after, #who .vps-ico { transition:none; } #who .vps-feature:hover, #who .vps-feature:hover .vps-ico { transform:none; } }
