/* Design v2 layer for every VPS service page (generic VPS + product families).
   Loaded last; only shape, accent and typography are aligned with the homepage — layout stays as built. */

/* Hero: light background with the homepage's green glow and dot grid */
.svc-hero,.vps-hero{position:relative;isolation:isolate;background:
  radial-gradient(ellipse 42% 70% at 88% 35%,rgba(149,242,171,.26),rgba(149,242,171,0) 70%),
  radial-gradient(rgba(10,10,10,.07) 1px,transparent 1.2px) 0 0/22px 22px,#fff}

/* Eyebrows / kickers: sans, sentence case, green dash */
.svc-eyebrow,.vps-kicker{display:inline-flex;align-items:center;gap:8px;font:600 13px/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--mid)}
.svc-eyebrow::before,.vps-kicker::before{content:'';flex:0 0 auto;width:18px;height:2px;background:var(--signal-ink)}
.svc-final .svc-eyebrow,.vps-final .vps-kicker{color:#a7a7a2}
.svc-final .svc-eyebrow::before,.vps-final .vps-kicker::before{background:var(--signal)}

/* Buttons: pills */
.vps-button,.svc-actions a,.svc-final a.vps-button{border-radius:999px;font-family:var(--sans);font-weight:700;letter-spacing:0;text-transform:none}
.svc-actions .vps-button:not(.outline),.svc-final .vps-button,.vps-final .vps-button{background:var(--signal);border-color:var(--signal);color:var(--ink)}
.svc-actions .vps-button:not(.outline):hover,.svc-final .vps-button:hover,.vps-final .vps-button:hover{background:#b4f7c4;border-color:#b4f7c4}
.vps-text-link,.svc-text-link{text-underline-offset:3px}

/* Location switch: segmented pill like the homepage */
.vps-location-tabs{padding:4px;gap:2px;border:1px solid var(--line);border-radius:999px;background:#fff;width:auto}
.vps-location-tabs button{border:0;border-radius:999px;font:600 13px var(--sans);padding:10px 16px;min-height:40px}
.vps-location-tabs button:not(.active):hover{background:var(--panel);color:var(--ink)}

/* Plan rows and tags */
.vps-plan-row{border-radius:14px}
.vps-plan-row+.vps-plan-row{margin-top:10px}
.vps-plan-row.recommended{border-left-width:1px}
.vps-tag{border-radius:999px;padding:4px 10px;font:700 10.5px var(--sans);letter-spacing:.01em;text-transform:none}
.vps-plan-row.recommended .vps-tag{background:var(--signal);border-color:var(--signal);color:var(--ink)}

/* Cards, panels, illustrations: rounded */
.vps-feature-card,.vps-os-card,.mock-window,.vps-hero-right,.svc-board,.svc-visual,.svc-case-grid,.svc-feature-grid,
.svc-resource-guides,.svc-operations-grid,.svc-location-grid,.svc-related-grid>*,.svc-facts,.svc-knowledge-chapter,
.svc-table-scroll,.vps-compare,.storage-card,.location-panel,.svc-depth-note,.svc-scope{border-radius:14px}
.svc-case-grid,.svc-feature-grid,.svc-resource-guides,.svc-operations-grid,.svc-location-grid,.svc-table-scroll{overflow:hidden}
.vps-hero-right:before{display:none}

/* FAQ: card list like the homepage */
.svc-faq details,.vps-faq-list details{border:1px solid var(--line);border-radius:12px;background:#fff;padding:0 20px;margin-bottom:10px;transition:border-color .2s}
.svc-faq details[open],.vps-faq-list details[open]{border-color:var(--ink)}
.svc-faq summary,.vps-faq-list summary{font-family:var(--sans);padding-top:16px;padding-bottom:16px}
.svc-faq details p,.vps-faq-list details p{padding-bottom:18px}

/* In-page navigation: sans and pill hover */
.svc-jump-nav a,.vps-guide-nav a,.svc-knowledge-nav a{font-family:var(--sans);font-size:13px;font-weight:600;border-radius:999px}

/* Final CTA keeps the dark band, with the homepage dot pattern */
.svc-final,.vps-final{background:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px) 0 0/22px 22px,var(--ink)}

@media(max-width:640px){
  .vps-location-tabs{border-radius:18px}
  .vps-location-tabs button{padding:10px 6px;font-size:12.5px}
}
/* FAQ: narrower title column so the questions get the width (all service pages). */
@media(min-width:761px){.svc-faq-grid{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:56px}.svc-faq-grid>div:first-child{position:sticky;top:96px;align-self:start}}