/* VPS page – layout only, components come from site.css */

/* HERO: copy left, price panel right */
.vps-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; align-items: end; }
.vps-hero__price { padding: 40px; border-radius: var(--radius-card); background: linear-gradient(126deg, rgba(73, 73, 73, 0.2) 12%, rgba(0, 0, 0, 0.2) 95%); }
.vps-hero__from { color: var(--c-mint); font-size: 12px; letter-spacing: 0.38em; text-transform: uppercase; }
.vps-hero__amount { color: var(--c-mint); font-size: var(--fs-price); font-weight: 700; line-height: 1.1; }
.vps-hero__period { font-size: 14px; color: rgba(255, 255, 255, 0.75); }
.vps-hero__facts { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--c-mint-line); font-weight: 500; }
.vps-hero__facts li + li { margin-top: 6px; }

/* PLANS: reuse .plan from site.css */
.vps-plans { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 88px 32px; margin-top: 72px; padding-bottom: 26px; }
.vps-plans .plan__features { padding-left: 0; }
.vps-plans .plan__features .is-soon { opacity: .7; }
.vps-plans__tag {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  padding: 4px 16px; border-radius: var(--radius-pill);
  background: var(--c-bg); color: var(--c-mint); border: 1px solid var(--c-mint);
  font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap;
}
.vps-note { margin-top: 64px; color: var(--c-mint); text-align: center; }

/* Shared asymmetric split */
.vps-split { display: grid; gap: 48px 80px; align-items: start; }
.vps-split--specs { grid-template-columns: 360px minmax(0, 1fr); }
.vps-split--os { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.vps-split--why { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.vps-split__lead { max-width: 440px; margin-top: 20px; color: rgba(255, 255, 255, 0.82); }
@media (min-width: 601px) { .vps-split--specs .spec-table { min-width: 560px; } }
.vps-split--specs .spec-table tbody th { font-weight: 400; }

/* OS chips */
.vps-os { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.vps-os li { padding: 8px 20px; border: 1px solid var(--c-mint-line); border-radius: var(--radius-pill); color: var(--c-mint); font-weight: 500; }

.vps-code {
  margin: 0; padding: 24px 28px; overflow-x: auto;
  border-radius: var(--radius-plan); background: #0F0E12; border: 1px solid #262626;
  font: 16px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.vps-code__prompt { color: var(--c-mint); }
.vps-tools { margin: 32px 0 0; }
.vps-tools div { padding: 18px 0; border-bottom: 1px solid var(--c-mint-line); }
.vps-tools dt { color: var(--c-mint); font-size: 18px; font-weight: 700; }
.vps-tools dd { margin: 4px 0 0; color: rgba(255, 255, 255, 0.82); }

/* WHY: numbered list, not cards */
.vps-why { margin: 0; padding: 0; list-style: none; counter-reset: why; }
.vps-why li { counter-increment: why; display: grid; grid-template-columns: 56px 1fr; padding: 24px 0; border-top: 1px solid var(--c-mint-line); }
.vps-why li:last-child { border-bottom: 1px solid var(--c-mint-line); }
.vps-why li::before { content: counter(why, decimal-leading-zero); grid-row: span 2; color: var(--c-mint); font-size: 14px; letter-spacing: 0.2em; line-height: 2.2; }
.vps-why h3 { font-size: 20px; line-height: 1.6; }
.vps-why p { color: rgba(255, 255, 255, 0.82); }
.vps-why a, .faq-item__a a { color: var(--c-mint); text-decoration: underline; text-underline-offset: 3px; }

.vps-faq { margin-top: 72px; }

/* CTA band – same look as the homepage banner */
.vps-cta {
  display: flex; flex-direction: column; align-items: flex-start; gap: 32px;
  padding: 72px 56px; border-radius: var(--radius-panel);
  background: linear-gradient(238.62deg, #063B27 1.598%, #BEF3DF 73.098%);
  color: var(--c-bg);
}
.vps-cta__title { font-size: var(--fs-h2); font-weight: 700; line-height: 1.22; }
.vps-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.vps-cta__link { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.vps-cta .btn--dark:focus-visible, .vps-cta__link:focus-visible { outline-color: var(--c-bg); }

@media (max-width: 1279px) {
  .vps-split--specs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 991px) {
  .vps-hero__grid, .vps-split--os, .vps-split--why { grid-template-columns: minmax(0, 1fr); }
  .vps-hero__price { max-width: 400px; }
  .vps-faq { margin-top: 48px; }
  .faq-item__q { font-size: 18px; line-height: 1.6; }
  .vps-cta { padding: 48px 28px; }
}
@media (max-width: 600px) {
  .vps-plans .plan { width: 100%; }
}