/* v2: servers (see assets/css/v2.css for the shared look).
 *
 * The VPS / VDS configurator (vps-hosting.php, main.site-main--servers). It opens on a scene: black,
 * one electric-blue light, two fields of stars drifting at their own pace, the server type chosen
 * in a glass switch whose white pill slides across, and under it the page's story drawn as a node
 * of 64 cores: shared, they pass between tenants; dedicated, a block of them locks to your colour.
 * The scene ends on a planet's rim whose body is the page itself, so the configurator rises out
 * of it as a horizon in either theme. Below, Apple's order page: white tiles on the grey page
 * (charcoal after hours), outlined choices that ring blue when picked, a small blade that lights
 * as far as each slider goes, big figures, thin sliders whose knobs glide to a picked size, and an
 * order summary that stays beside you (on phones its total waits at the foot of the screen). The
 * bare-metal offer closes it as a lit dark tile with a server in its light. Every selector here is
 * scoped to the page; assets/js/configurator.js keeps working on the same ids and classes, and
 * assets/js/v2-servers.js only reads it.
 */

/* ── Page tokens ──────────────────────────────────────────────────────────────────────────── */
.site-main--servers {
  --srv-tile: #ffffff;
  --srv-inset: #f5f5f7;
  --srv-edge: rgb(0 0 0 / 0.14);
  --srv-edge-hover: rgb(0 0 0 / 0.34);
  --srv-pick: #0071e3;
  --srv-pick-text: #0066cc;
  --srv-pick-tint: rgb(0 113 227 / 0.04);
  --srv-track: #dcdce1;
  --srv-fill: #0071e3;
  --srv-text: #1d1d1f;
  --srv-text-2: #424245;
  --srv-muted: #6e6e73;
  --srv-green: #03804a;
  --srv-hair: rgb(0 0 0 / 0.08);
  --srv-knob-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.1), 0 1px 4px rgb(0 0 0 / 0.24);
  --srv-ring: 0 0 0 2px var(--srv-tile), 0 0 0 4px var(--srv-pick);
  --srv-chip-on: #ffffff;
  --srv-chip-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 3px 10px rgb(0 0 0 / 0.08);
  /* the page itself (the planet's body at the foot of the scene is painted in it) */
  --srv-page: #f5f5f7;
  --srv-rim-haze: #a9c2ff;
  --srv-rim-tint: 34%;
  /* the comparison table's columns: VDS tinted, and the one under the pointer */
  --srv-col: rgb(0 113 227 / 0.05);
  --srv-col-hover: rgb(0 0 0 / 0.028);
  --srv-col-vds-hover: rgb(0 113 227 / 0.1);
  --srv-edge-shade: rgb(0 0 0 / 0.08);
}
:root[data-theme='dark'] .site-main--servers {
  --srv-tile: #1b1b1e;
  --srv-inset: #242428;
  --srv-page: #101012;
  --srv-rim-haze: #2f5cff;
  --srv-rim-tint: 30%;
  --srv-col: rgb(41 151 255 / 0.09);
  --srv-col-hover: rgb(255 255 255 / 0.035);
  --srv-col-vds-hover: rgb(41 151 255 / 0.16);
  --srv-edge-shade: rgb(0 0 0 / 0.55);
  --srv-edge: rgb(255 255 255 / 0.15);
  --srv-edge-hover: rgb(255 255 255 / 0.32);
  --srv-pick: #2997ff;
  --srv-pick-text: #2997ff;
  --srv-pick-tint: rgb(41 151 255 / 0.08);
  --srv-track: #333338;
  --srv-fill: #2997ff;
  --srv-text: #f5f5f7;
  --srv-text-2: #d2d2d7;
  --srv-muted: #a1a1a6;
  --srv-green: #3ccf91;
  --srv-hair: rgb(255 255 255 / 0.09);
  --srv-knob-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.2), 0 1px 4px rgb(0 0 0 / 0.6);
  --srv-chip-on: #3a3a3e;
  --srv-chip-shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 3px 10px rgb(0 0 0 / 0.3);
}

/* ── The scene: status, title, the server-type switch and what it means ─────────────────────── */
.site-main--servers > .site-main__sections > section.scene.config-hero:first-child {
  padding-top: calc(3.5rem + 0.25rem);
  padding-bottom: 5rem;
}
@media (min-width: 768px) {
.site-main--servers > .site-main__sections > section.scene.config-hero:first-child {
  padding-top: calc(3.5rem + 0.5rem);
  padding-bottom: 7rem;
}
}
.config-hero {
  --v2-glow-y: 30%;
  overflow: hidden;
  overflow: clip;
  padding-left: var(--margin-mobile);
  padding-right: var(--margin-mobile);
  text-align: center;
}
@media (min-width: 768px) {
.config-hero {
  padding-left: var(--margin);
  padding-right: var(--margin);
}
}
/* Stars (the shared fields, far and near, each drifting at its own speed: motion.js) kept clear of
   the title, and a planet's rim of light along the foot of the scene. The planet's body is the page
   (grey by day, charcoal after hours), so the scene has no straight edge: the page comes up into it
   as a curved horizon, lit along its rim, and rises a little further as you scroll on. */
.site-main--servers .config-hero > :is(.v2-stars, .v2-stars--near) {
  -webkit-mask-image: radial-gradient(ellipse 62% 52% at 50% 40%, transparent 24%, #000 78%);
  mask-image: radial-gradient(ellipse 62% 52% at 50% 40%, transparent 24%, #000 78%);
}
.site-main--servers .config-hero > .v2-stars {
  opacity: 0.55;
}
.site-main--servers .config-hero > .v2-stars--near {
  opacity: 0.7;
}
.config-hero__inner {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  max-width: 75rem;
}
.config-hero__inner::after {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(100% + 1.5rem);
  z-index: -1;
  width: max(160%, 70rem, 150vw);
  aspect-ratio: 5 / 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, var(--srv-page) 88%, color-mix(in srgb, var(--srv-page), var(--srv-rim-haze) var(--srv-rim-tint)) 97.2%, #6f9bff 99.1%, #e4ecff 100%);
  box-shadow: 0 -2px 16px rgb(120 165 255 / 0.5), 0 -30px 100px -12px rgb(var(--glow-cyan) / 0.34);
  transform: translate3d(-50%, calc((var(--v2-p, 0.5) - 0.5) * -84px), 0);
}

/* Local bar (Apple's sub-nav): where you are on the left, the platform's state on the right. */
.site-main--servers .config-status {
  margin-bottom: 0;
  min-height: 3.25rem;
  gap: 0.75rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.12);
  padding: 0.75rem 0;
  text-align: left;
  color: #a1a1a6;
}
.site-main--servers .config-status__crumbs {
  gap: 0.375rem;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: #a1a1a6;
}
/* The trail is where you are, not a set of links: no pointer, no hover. */
.site-main--servers .config-status__crumb {
  cursor: default;
}
.site-main--servers .config-status .strong {
  font-weight: 600;
  color: #f5f5f7;
}
.site-main--servers .config-status .cluster-md {
  gap: 0.5rem;
}
.site-main--servers .config-status__badge {
  gap: 0.4375rem;
  border-radius: 980px;
  background-color: rgb(255 255 255 / 0.08);
  padding: 0.3125rem 0.75rem;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
}
.site-main--servers .config-status__badge .value-sm {
  font-size: 12px;
  font-weight: 500;
  color: #e8e8ed;
}
.site-main--servers .config-status__dot {
  background-color: #3ccf91;
  box-shadow: 0 0 0 3px rgb(60 207 145 / 0.18), 0 0 10px rgb(60 207 145 / 0.8);
  /* the dot's pulse (site.css) plays a few times, then rests */
  animation-iteration-count: 3;
}
.site-main--servers .config-status__deploy-time {
  gap: 0.375rem;
  border-radius: 980px;
  padding: 0.3125rem 0.75rem;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
  font-size: 12px;
  color: #a1a1a6;
}
.site-main--servers .config-status__deploy-time .emphasis {
  font-weight: 600;
  color: #8fb0ff;
}

/* Title block */
.site-main--servers .page-intro {
  margin: 3.5rem auto 0;
  align-items: center;
  gap: 2.25rem;
}
@media (min-width: 768px) {
.site-main--servers .page-intro {
  margin-top: 3.5rem;
}
}
@media (min-width: 1024px) {
.site-main--servers .page-intro {
  flex-direction: column;
  align-items: center;
}
}
.site-main--servers .page-intro-text {
  max-width: 58rem;
}
.site-main--servers .eyebrow-block {
  margin-bottom: 1rem;
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #8fb0ff;
}
.site-main--servers .config-hero .page-title {
  margin-bottom: 0;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1rem + 5.2vw, 5.5rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: #ffffff;
  background-image: linear-gradient(180deg, #ffffff 42%, #b4c8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-wrap: balance;
}
.site-main--servers .config-intro__lead {
  margin: 1.5rem auto 0;
  max-width: 40rem;
  font-size: clamp(1.0625rem, 0.95rem + 0.42vw, 1.3125rem);
  line-height: 1.42;
  letter-spacing: -0.012em;
  color: #c2c2c8;
  text-wrap: pretty;
}

/* The switch: a glass track; the white pill slides to the chosen type. */
.site-main--servers .mode-switch {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  align-self: center;
  gap: 0;
  border-radius: 980px;
  background-color: rgb(255 255 255 / 0.08);
  padding: 0.3125rem;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12), 0 24px 60px -24px rgb(var(--glow-blue) / 0.7);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
}
.site-main--servers .mode-switch::before {
  content: '';
  position: absolute;
  top: 0.3125rem;
  bottom: 0.3125rem;
  left: 0.3125rem;
  width: calc(50% - 0.3125rem);
  border-radius: 980px;
  background-color: #ffffff;
  box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.7), 0 0 44px -8px rgb(140 175 255 / 0.65);
  transition: translate 0.55s var(--v2-ease);
}
.site-main--servers .mode-switch:has(#toggle-vds.mode-switch__option-active)::before {
  translate: 100% 0;
}
.site-main--servers :is(.mode-switch__option, .mode-switch__option-active) {
  position: relative;
  z-index: 1;
  justify-content: center;
  min-height: 3.25rem;
  gap: 0.5rem;
  border-radius: 980px;
  background-color: transparent;
  padding: 0.5rem 1.75rem;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.016em;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: none;
  transition: color 0.4s ease, background-color 0.3s ease;
}
.site-main--servers .mode-switch__option {
  color: rgb(255 255 255 / 0.88);
}
.site-main--servers .mode-switch__option:hover {
  color: #ffffff;
  background-color: rgb(255 255 255 / 0.07);
}
.site-main--servers .mode-switch__option-active {
  color: #1d1d1f;
}
.site-main--servers .mode-switch .note-plain {
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: #a1a1a6;
  transition: color 0.4s ease;
}
.site-main--servers .mode-switch__option-active .note-plain {
  color: #6e6e73;
}
.site-main--servers .mode-switch :is(.dot, .mode-switch__dot) {
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 50%;
  background-color: transparent;
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.4);
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
.site-main--servers .mode-switch__option-active :is(.dot, .mode-switch__dot) {
  background-color: #0071e3;
  box-shadow: 0 0 0 3px rgb(0 113 227 / 0.18);
}
.site-main--servers :is(.mode-switch__option, .mode-switch__option-active):focus-visible {
  outline: 2px solid #6e9bff;
  outline-offset: 3px;
}
/* Without :has() the pill can't follow, so the chosen option draws its own. */
@supports not selector(:has(*)) {
.site-main--servers .mode-switch::before {
  display: none;
}
.site-main--servers .mode-switch__option-active {
  background-color: #ffffff;
}
}
@media (max-width: 639.98px) {
.site-main--servers .mode-switch {
  display: grid;
  width: 100%;
}
.site-main--servers :is(.mode-switch__option, .mode-switch__option-active) {
  flex-wrap: wrap;
  column-gap: 0.375rem;
  row-gap: 0;
  min-height: 3.5rem;
  padding: 0.375rem 0.75rem;
  font-size: 15px;
  line-height: 20px;
}
.site-main--servers .mode-switch :is(.dot, .mode-switch__dot) {
  display: none;
}
.site-main--servers .mode-switch .note-plain {
  flex-basis: 100%;
  font-size: 12px;
  line-height: 16px;
}
}

/* The node: one server's two sockets of 32 cores (Section 02: two per node, 32 cores each), on a
   board of glass leaning back toward the horizon. With the shared type chosen, every core takes
   turns between tenants, the colours passing over the board for a few beats before it rests; with
   the dedicated type, the board dims and a block as large as the cores you chose (--pin, 4 until
   v2-servers.js reads the figure) locks to one colour, the badge's, filling two rows at a time.
   It follows the switch's own state (configurator.js sets the buttons' classes). */
.site-main--servers .srv-node {
  --cell: 0.625rem;
  --cell-gap: 0.1875rem;
  margin: 2.25rem auto 0;
  width: fit-content;
  max-width: 100%;
  perspective: 900px;
  pointer-events: none;
}
@media (min-width: 768px) {
.site-main--servers .srv-node {
  --cell: 0.875rem;
  --cell-gap: 0.3125rem;
  margin-top: 2.25rem;
}
}
@media (min-width: 1024px) {
.site-main--servers .srv-node {
  --cell: 0.9375rem;
  --cell-gap: 0.3125rem;
}
}
.site-main--servers .srv-node__board {
  display: flex;
  align-items: center;
  border-radius: 18px;
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.075), rgb(255 255 255 / 0.015) 70%);
  padding: 0.75rem 0.875rem;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1), inset 0 1px 0 rgb(255 255 255 / 0.18), 0 50px 90px -40px rgb(var(--glow-blue) / 0.8);
  transform: rotateX(20deg);
  transform-origin: 50% 100%;
}
@media (min-width: 768px) {
.site-main--servers .srv-node__board {
  border-radius: 26px;
  padding: 1.125rem 1.5rem;
}
}
.site-main--servers .srv-node__socket {
  display: grid;
  grid-template-columns: repeat(8, var(--cell));
  grid-auto-rows: var(--cell);
  gap: var(--cell-gap);
  border-radius: 10px;
  background-color: rgb(0 0 0 / 0.6);
  padding: 0.4375rem;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 0 0 4px rgb(255 255 255 / 0.025), 0 0 0 5px rgb(255 255 255 / 0.06);
}
@media (min-width: 768px) {
.site-main--servers .srv-node__socket {
  border-radius: 14px;
  padding: 0.6875rem;
}
}
/* The link between the sockets: three lit traces. */
.site-main--servers .srv-node__bus {
  align-self: stretch;
  width: 1.5rem;
  background-image:
    linear-gradient(90deg, rgb(110 155 255 / 0.1), rgb(160 190 255 / 0.7), rgb(110 155 255 / 0.1)),
    linear-gradient(90deg, rgb(110 155 255 / 0.1), rgb(160 190 255 / 0.55), rgb(110 155 255 / 0.1)),
    linear-gradient(90deg, rgb(110 155 255 / 0.1), rgb(160 190 255 / 0.7), rgb(110 155 255 / 0.1));
  background-position: 0 38%, 0 50%, 0 62%;
  background-size: 100% 1px;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
.site-main--servers .srv-node__bus {
  width: 2.75rem;
}
}
/* A core: its tenant's colour; above it a dimmer (other servers' cores, when dedicated) and the
   pinned colour (yours). */
.site-main--servers .srv-node__socket > span {
  position: relative;
  border-radius: 3px;
  background-color: var(--c1);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28);
}
.site-main--servers .srv-t0 {
  --c1: #2f62ff;
  --c2: #7a5cff;
  --c3: #149dff;
}
.site-main--servers .srv-t1 {
  --c1: #149dff;
  --c2: #2f62ff;
  --c3: #9fb8ff;
}
.site-main--servers .srv-t2 {
  --c1: #7a5cff;
  --c2: #149dff;
  --c3: #2f62ff;
}
.site-main--servers .srv-t3 {
  --c1: #9fb8ff;
  --c2: #7a5cff;
  --c3: #2f62ff;
}
.site-main--servers .srv-node__socket > span::after,
.site-main--servers .srv-node__socket > span::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
}
.site-main--servers .srv-node__socket > span::after {
  background-color: #16171c;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07);
  transition: opacity 0.45s linear;
}
.site-main--servers .srv-node__socket > span::before {
  z-index: 1;
  background-image: linear-gradient(180deg, #a4f5d0, #3ccf91);
  box-shadow: 0 0 12px rgb(60 207 145 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.55);
  transition: opacity 0.3s linear;
}
.site-main--servers .config-hero:has(#toggle-vds.mode-switch__option-active) .srv-node__socket > span::after {
  opacity: 0.88;
}
.site-main--servers .config-hero:has(#toggle-vds.mode-switch__option-active) .srv-node__socket > span::before {
  opacity: clamp(0, var(--pin, 4) - var(--k), 1);
  transition-delay: calc(min(var(--k), 32) * 13ms);
}
@media (prefers-reduced-motion: no-preference) {
/* Shared: each core passes between three tenants in turn, a few times over, then rests; the light
   reaches the board along its diagonal as it arrives. Off screen it waits (v2-servers.js). */
html.v2-js .site-main--servers .config-hero:not(:has(#toggle-vds.mode-switch__option-active)) .srv-node.is-in .srv-node__socket > span {
  animation: srv-share 5.4s linear var(--d, 0s) 3 both, srv-arrive 0.7s linear calc(var(--g, 0) * 24ms + 0.15s) backwards;
}
html.v2-js .site-main--servers .config-hero:not(:has(#toggle-vds.mode-switch__option-active)) .srv-node.srv-away .srv-node__socket > span,
html.v2-js .site-main--servers .srv-node.srv-away .srv-node__socket > span {
  animation-play-state: paused;
}
}
@keyframes srv-share {
0%, 22% { background-color: var(--c1); }
33%, 55% { background-color: var(--c2); }
66%, 88% { background-color: var(--c3); }
100% { background-color: var(--c1); }
}
@keyframes srv-arrive {
from { opacity: 0.12; }
}

/* What the chosen type is: a pane of glass under the node. */
.site-main--servers .arch-banner {
  margin: 1.75rem auto 0;
  max-width: 46rem;
  border-radius: 22px;
  background-color: rgb(255 255 255 / 0.06);
  background-image: linear-gradient(rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.5));
  padding: 1.25rem 1.5rem;
  text-align: left;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1), inset 0 1px 0 rgb(255 255 255 / 0.08), 0 30px 70px -36px rgb(var(--glow-blue) / 0.55);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
}
.site-main--servers .arch-banner .media-object {
  align-items: center;
}
.site-main--servers .arch-banner .icon-tile {
  height: 3rem;
  width: 3rem;
  border-radius: 14px;
  background-image: linear-gradient(135deg, #2f6bff 0%, #00a6ff 100%);
  color: #ffffff;
  box-shadow: 0 10px 28px -8px rgb(41 100 255 / 0.85), inset 0 1px 0 rgb(255 255 255 / 0.3);
}
.site-main--servers .arch-banner .cluster-sm {
  flex-wrap: wrap;
  row-gap: 0.25rem;
}
.site-main--servers #arch-title {
  font-size: 19px;
  line-height: 24px;
  letter-spacing: -0.016em;
  font-weight: 600;
  color: #ffffff;
}
.site-main--servers :is(.arch-banner__badge, .arch-banner__badge-dedicated) {
  border-radius: 980px;
  padding: 0.1875rem 0.625rem;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: background-color 0.4s ease, color 0.4s ease;
}
/* Switching type: the banner's words come in from the side the pill moved toward (once the type
   has been switched; v2-servers.js marks the scene). Movement eases out, the fade is quicker. */
@media (prefers-reduced-motion: no-preference) {
html.v2-js .site-main--servers .config-hero.srv-switched .arch-banner .media-object {
  animation: srv-in-left 0.7s var(--v2-ease-out) both, srv-fade-a 0.32s linear 0.06s both;
}
html.v2-js .site-main--servers .config-hero.srv-switched:has(#toggle-vds.mode-switch__option-active) .arch-banner .media-object {
  animation-name: srv-in-right, srv-fade-b;
}
}
@keyframes srv-in-left {
from { translate: -1.25rem 0; }
}
@keyframes srv-in-right {
from { translate: 1.25rem 0; }
}
@keyframes srv-fade-a {
from { opacity: 0; }
}
@keyframes srv-fade-b {
from { opacity: 0; }
}
.site-main--servers .arch-banner__badge {
  background-color: rgb(110 155 255 / 0.18);
  color: #b4c8ff;
}
.site-main--servers .arch-banner__badge-dedicated {
  background-color: rgb(60 207 145 / 0.16);
  color: #8ef0c3;
}
.site-main--servers .arch-banner__desc {
  margin-top: 0.25rem;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.012em;
  color: #b9b9bf;
}
.site-main--servers .arch-banner__facts {
  border-left: 1px solid rgb(255 255 255 / 0.12);
  padding-left: 1.5rem;
  font-size: 13px;
  line-height: 18px;
  color: #a1a1a6;
}
.site-main--servers .arch-banner__fact-label {
  font-size: 13px;
  line-height: 18px;
  color: #ffffff;
}
@media (max-width: 767.98px) {
.site-main--servers .arch-banner__facts {
  border-left: 0;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  width: 100%;
  padding-left: 0;
  padding-top: 0.875rem;
}
.site-main--servers .arch-banner__fact {
  flex-direction: row;
  gap: 0.5rem;
  text-align: left;
}
}

/* ── The configurator: tiles on the page ─────────────────────────────────────────────────── */
.site-main--servers .config-page {
  max-width: calc(75rem + 2 * var(--margin-mobile));
  padding-top: 3rem;
  padding-bottom: 4rem;
}
@media (min-width: 768px) {
.site-main--servers .config-page {
  max-width: calc(75rem + 2 * var(--margin));
  padding-top: 4.5rem;
  padding-bottom: 5rem;
}
}
.site-main--servers .config {
  gap: 1rem;
}
@media (min-width: 1024px) {
.site-main--servers .config {
  gap: 1.25rem;
}
}
.site-main--servers .config__controls {
  gap: 1rem;
}
.site-main--servers .config__controls > .card {
  border-radius: var(--v2-radius-tile);
  background-color: var(--srv-tile);
  padding: 1.5rem;
  box-shadow: none;
}
/* After hours the tiles sit a step above the charcoal page and catch a top edge of light. */
:root[data-theme='dark'] .site-main--servers .config__controls > .card {
  box-shadow: var(--shadow-card);
}
@media (min-width: 640px) {
.site-main--servers .config__controls > .card {
  padding: 2.5rem;
}
}
@media (max-width: 639.98px) {
.site-main--servers .config__controls > .card {
  border-radius: 22px;
}
}
.site-main--servers .panel-head {
  margin-bottom: 1.5rem;
}
.site-main--servers .step-label {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--srv-muted);
}
.site-main--servers .config__controls > .card h2.heading-sm {
  margin-top: 0.375rem;
  font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem);
  line-height: 1.12;
  letter-spacing: -0.024em;
  font-weight: 700;
  color: var(--srv-text);
}

/* Choices: Apple's outlined options; the chosen one rings blue. */
.site-main--servers :is(.region__option, .os-btn, .addons__option) {
  border-radius: 18px;
  background-color: var(--srv-tile);
  box-shadow: inset 0 0 0 1px var(--srv-edge);
  transition: box-shadow 0.25s ease, background-color 0.25s ease;
}
.site-main--servers :is(.region__option, .os-btn, .addons__option):hover {
  background-color: var(--srv-tile);
  box-shadow: inset 0 0 0 1px var(--srv-edge-hover);
}
.site-main--servers :is(.region__option:has(input:checked), .os__option-selected, .os__option-custom-selected, .addons__option:has(input:checked)),
.site-main--servers :is(.region__option:has(input:checked), .os__option-selected, .os__option-custom-selected, .addons__option:has(input:checked)):hover {
  background-color: var(--srv-pick-tint);
  box-shadow: inset 0 0 0 2px var(--srv-pick);
}
.site-main--servers :is(.region__option:has(input:focus-visible), .addons__option:has(input:focus-visible)),
.site-main--servers .os-btn:focus-visible {
  outline: 2px solid var(--srv-pick);
  outline-offset: 3px;
}

/* Region */
.site-main--servers .region__options {
  gap: 0.75rem;
}
/* The two regions as two points, roughly where they lie: the chosen one lit and haloed; when the
   choice changes a light crosses from the old point to the new one, once (v2-servers.js marks the
   picture on the first change, so nothing crosses as the page loads). No line stays between them. */
.site-main--servers .srv-route {
  flex-shrink: 0;
  width: 3.75rem;
  height: auto;
  aspect-ratio: 84 / 64;
  margin: -0.25rem -0.25rem 0 0.75rem;
  overflow: visible;
  color: var(--srv-pick);
}
@media (min-width: 480px) {
.site-main--servers .srv-route {
  width: 5.25rem;
}
}
/* the narrowest phones keep the heading on one line instead */
@media (max-width: 379.98px) {
.site-main--servers .srv-route {
  display: none;
}
}
.site-main--servers .srv-route__grid {
  fill: var(--srv-muted);
  opacity: 0.4;
}
.site-main--servers .srv-route__pt {
  fill: var(--srv-tile);
  stroke: var(--srv-edge-hover);
  stroke-width: 1.5;
  transition: fill 0.3s ease, stroke 0.3s ease;
}
.site-main--servers .srv-route__halo {
  fill: currentColor;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.site-main--servers .srv-route__beam {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 0.45 1.6;
  stroke-dashoffset: 0.45;
  opacity: 0;
}
.site-main--servers .card:has([data-region='mumbai'] input:checked) .srv-route__pt--mum,
.site-main--servers .card:has([data-region='delhi'] input:checked) .srv-route__pt--del {
  fill: currentColor;
  stroke: currentColor;
}
.site-main--servers .card:has([data-region='mumbai'] input:checked) .srv-route__halo--mum,
.site-main--servers .card:has([data-region='delhi'] input:checked) .srv-route__halo--del {
  opacity: 0.16;
}
:root[data-theme='dark'] .site-main--servers :is(.card:has([data-region='mumbai'] input:checked) .srv-route__pt--mum, .card:has([data-region='delhi'] input:checked) .srv-route__pt--del) {
  filter: drop-shadow(0 0 4px rgb(41 151 255 / 0.9));
}
@media (prefers-reduced-motion: no-preference) {
html.v2-js .site-main--servers .card:has([data-region='mumbai'] input:checked) .srv-route.srv-moved .srv-route__beam--mum,
html.v2-js .site-main--servers .card:has([data-region='delhi'] input:checked) .srv-route.srv-moved .srv-route__beam--del {
  animation: srv-beam 0.95s var(--v2-ease-io) both;
}
}
@keyframes srv-beam {
from { stroke-dashoffset: 0.45; opacity: 1; }
80% { opacity: 1; }
to { stroke-dashoffset: -1; opacity: 0; }
}
.site-main--servers .region__option {
  min-height: 5.25rem;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
}
.site-main--servers .region__option .cluster-md {
  gap: 0.875rem;
}
.site-main--servers .region__country {
  height: 2.5rem;
  width: 2.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--srv-inset);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--srv-text);
}
.site-main--servers .region__option .label-strong {
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  color: var(--srv-text);
}
.site-main--servers .region__option .note {
  margin-top: 0.125rem;
  font-size: 13px;
  line-height: 18px;
  color: var(--srv-muted);
}
.site-main--servers .region__latency-fast {
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--srv-green);
}
.site-main--servers .region__latency-fast .icon-14 {
  font-size: 16px;
}
@media (max-width: 479.98px), (min-width: 640px) and (max-width: 1279.98px) {
.site-main--servers .region__option {
  flex-wrap: wrap;
  row-gap: 0.375rem;
  padding: 1rem;
}
.site-main--servers .region__option > .align-end {
  margin-left: 3.375rem;
}
.site-main--servers .region__latency-fast {
  justify-content: flex-start;
}
}

/* Processor: an inset panel with the chip's figures set large. */
.site-main--servers .cpu__option {
  cursor: default;
  border-radius: 20px;
  background-color: var(--srv-inset);
  padding: 1.5rem;
}
.site-main--servers .cpu__option:hover {
  background-color: var(--srv-inset);
}
@media (min-width: 640px) {
.site-main--servers .cpu__option {
  padding: 1.75rem 2rem;
}
}
.site-main--servers .cpu__option-head {
  margin-bottom: 0;
}
.site-main--servers .cpu__option-head .cluster-sm {
  gap: 1rem;
}
.site-main--servers .cpu__icon-intel {
  display: inline-grid;
  height: 3.25rem;
  width: 3.25rem;
  flex-shrink: 0;
  place-items: center;
  border-radius: 15px;
  background-image: linear-gradient(140deg, #0a5bd8 0%, #1aa3ff 100%);
  font-size: 30px;
  color: #ffffff;
  box-shadow: 0 10px 24px -10px rgb(0 90 220 / 0.8), inset 0 1px 0 rgb(255 255 255 / 0.28);
}
.site-main--servers .cpu__option-head .heading-sm {
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--srv-text);
}
.site-main--servers .cpu__option-head .caption {
  margin-top: 0.25rem;
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
  color: var(--srv-muted);
}
.site-main--servers .cpu__specs {
  margin: 1.5rem 0 0;
  gap: 0;
  border-radius: 0;
  border-top: 1px solid var(--srv-hair);
  background-color: transparent;
  padding: 1.25rem 0 0;
}
.site-main--servers .cpu__specs > div + div {
  border-left: 1px solid var(--srv-hair);
  padding-left: 1rem;
}
@media (min-width: 640px) {
.site-main--servers .cpu__specs > div + div {
  padding-left: 1.5rem;
}
}
.site-main--servers .cpu__specs .caption {
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--srv-muted);
}
.site-main--servers .cpu__specs :is(.figure-label, .cpu__spec-accent, .cpu__spec-gain) {
  margin-top: 0.25rem;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 0.95rem + 1vw, 1.875rem);
  line-height: 1.1;
  letter-spacing: -0.024em;
  font-weight: 700;
  color: var(--srv-text);
}
.site-main--servers .cpu__specs .cpu__spec-accent {
  color: var(--srv-pick-text);
}
.site-main--servers .cpu__specs .cpu__spec-gain {
  color: var(--srv-green);
}
@media (max-width: 479.98px) {
.site-main--servers .cpu__option {
  padding: 1.25rem;
}
.site-main--servers .cpu__specs {
  grid-template-columns: minmax(0, 1fr);
  padding-top: 0.25rem;
}
.site-main--servers .cpu__specs > div,
.site-main--servers .cpu__specs > div + div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-left: 0;
  padding: 0.75rem 0 0;
}
.site-main--servers .cpu__specs > div + div {
  margin-top: 0.75rem;
  border-top: 1px solid var(--srv-hair);
}
.site-main--servers .cpu__specs :is(.figure-label, .cpu__spec-accent, .cpu__spec-gain) {
  margin-top: 0;
  font-size: 1.25rem;
}
}
.site-main--servers .cpu__note {
  margin-top: 1.25rem;
  font-size: 13px;
  line-height: 18px;
  color: var(--srv-muted);
}

/* Compute & storage: sizes as a segmented control; sliders with a white knob and a blue fill. */
.site-main--servers .resources__head {
  margin-bottom: 2rem;
  gap: 1rem;
}
@media (min-width: 640px) {
.site-main--servers .resources__head {
  align-items: flex-end;
}
}
.site-main--servers .presets {
  gap: 0.125rem;
  border-radius: 980px;
  background-color: var(--srv-inset);
  padding: 0.25rem;
  box-shadow: inset 0 0 0 1px var(--srv-hair);
}
.site-main--servers :is(.presets__option, .presets__option-active) {
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 980px;
  padding: 0 1rem;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.site-main--servers .presets__option {
  color: var(--srv-muted);
}
.site-main--servers .presets__option:hover {
  color: var(--srv-text);
}
.site-main--servers .presets__option-active {
  background-color: var(--srv-chip-on);
  color: var(--srv-text);
  box-shadow: var(--srv-chip-shadow);
}
.site-main--servers .preset-btn:focus-visible {
  outline: 2px solid var(--srv-pick);
  outline-offset: 1px;
}
@media (max-width: 639.98px) {
.site-main--servers .presets {
  display: flex;
  width: 100%;
}
.site-main--servers .preset-btn {
  flex: 1 1 0;
  padding: 0 0.5rem;
}
}
/* The blade: the server the sliders are sizing, shown as hardware (a graphite front by day, near
   black after hours) with three modules (cores in pairs, memory sticks, drive bays) whose segments
   light, left to right, as far as each slider goes (1 to 8 of 8; --lit-* from the page, kept in
   step by v2-servers.js). Blue like the sliders' fill, glowing a little. No figures: the figures
   are the sliders'. */
.site-main--servers .srv-blade {
  display: flex;
  align-items: center;
  margin: -0.5rem 0 2rem;
  border-radius: 16px;
  background-image: linear-gradient(180deg, #2b2b30 0%, #18181b 100%);
  padding: 0.875rem 0.25rem;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), inset 0 0 0 1px rgb(255 255 255 / 0.05), 0 14px 26px -16px rgb(0 0 0 / 0.55);
}
:root[data-theme='dark'] .site-main--servers .srv-blade {
  background-image: linear-gradient(180deg, #111114 0%, #070708 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 16px 30px -18px rgb(var(--glow-blue) / 0.55);
}
.site-main--servers .srv-blade__zone {
  display: grid;
  flex: 1 1 0;
  place-content: center;
  padding: 0 0.375rem;
}
.site-main--servers .srv-blade__zone + .srv-blade__zone {
  border-left: 1px solid rgb(255 255 255 / 0.08);
}
.site-main--servers .srv-blade__zone--cpu {
  --lit: var(--lit-cpu, 1);
  grid-auto-flow: column;
  grid-template-rows: repeat(2, 0.5rem);
  grid-auto-columns: 0.5rem;
  gap: 0.25rem;
}
.site-main--servers .srv-blade__zone--ram {
  --lit: var(--lit-ram, 1);
  grid-auto-flow: column;
  grid-template-rows: 1.25rem;
  grid-auto-columns: 0.25rem;
  gap: 0.25rem;
}
.site-main--servers .srv-blade__zone--disk {
  --lit: var(--lit-disk, 1);
  grid-auto-flow: column;
  grid-template-rows: 1.25rem;
  grid-auto-columns: 0.5rem;
  gap: 0.1875rem;
}
@media (min-width: 480px) {
.site-main--servers .srv-blade {
  padding: 1rem 0.5rem;
}
.site-main--servers .srv-blade__zone--cpu {
  grid-template-rows: repeat(2, 0.625rem);
  grid-auto-columns: 0.625rem;
}
.site-main--servers .srv-blade__zone--ram {
  grid-template-rows: 1.5rem;
  grid-auto-columns: 0.3125rem;
  gap: 0.3125rem;
}
.site-main--servers .srv-blade__zone--disk {
  grid-template-rows: 1.5rem;
  grid-auto-columns: 0.875rem;
  gap: 0.25rem;
}
}
@media (min-width: 1024px) {
.site-main--servers .srv-blade__zone--cpu {
  grid-template-rows: repeat(2, 0.75rem);
  grid-auto-columns: 0.75rem;
}
.site-main--servers .srv-blade__zone--ram {
  grid-template-rows: 1.75rem;
  grid-auto-columns: 0.375rem;
  gap: 0.375rem;
}
.site-main--servers .srv-blade__zone--disk {
  grid-template-rows: 1.75rem;
  grid-auto-columns: 1rem;
  gap: 0.3125rem;
}
}
.site-main--servers .srv-blade__zone > span {
  position: relative;
  border-radius: 2px;
  background-color: rgb(255 255 255 / 0.1);
}
.site-main--servers .srv-blade__zone--disk > span {
  border-radius: 3px;
}
.site-main--servers .srv-blade__zone > span::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: linear-gradient(180deg, #5eb0ff, #1f7bff);
  box-shadow: 0 0 9px rgb(41 140 255 / 0.65);
  opacity: clamp(0, var(--lit) - var(--n), 1);
}
@media (prefers-reduced-motion: no-preference) {
.site-main--servers .srv-blade__zone > span::before {
  transition: opacity 0.28s linear;
  transition-delay: calc(var(--n) * 40ms);
}
}

.site-main--servers .resources__sliders > :not([hidden]) ~ :not([hidden]) {
  margin-top: 2rem;
}
.site-main--servers .resources__sliders > .stack-list > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0;
}
.site-main--servers .resources__sliders .split {
  align-items: flex-end;
  gap: 1rem;
}
.site-main--servers .resources__sliders .cluster-xs {
  gap: 0.5rem;
  padding-bottom: 0.3125rem;
}
.site-main--servers .resources__icon {
  font-size: 22px;
  color: var(--srv-pick-text);
}
.site-main--servers .resources__sliders .label-strong {
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  color: var(--srv-text);
}
.site-main--servers .resources__sliders .note-num {
  font-size: 14px;
  line-height: 18px;
  color: var(--srv-muted);
}
.site-main--servers .resources__sliders .cluster-xs {
  flex-wrap: wrap;
  row-gap: 0.125rem;
}
.site-main--servers .resources__sliders .note-num {
  white-space: nowrap;
}
.site-main--servers .resources__value {
  flex-shrink: 0;
  font-size: clamp(1.875rem, 1.5rem + 1vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--srv-text);
}
.site-main--servers .resources__value .note {
  margin-left: 0.125rem;
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1;
  letter-spacing: -0.016em;
  font-weight: 600;
  color: var(--srv-muted);
}
/* The slider: a 6px track, a 26px white knob. The knob paints the track itself, blue to its left
   and grey to its right (a border image stretched 100vw each way), and the input clips the rest,
   so the fill follows the value with no script. Firefox draws its own progress bar. */
.site-main--servers .resources__slider {
  display: block;
  height: 2.5rem;
  margin: 0.5rem 0 0.125rem;
  overflow: hidden;
  border-radius: 0;
  background-color: transparent;
  outline: none;
}
.site-main--servers .resources__slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background-color: var(--srv-track);
}
.site-main--servers .resources__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 26px;
  width: 26px;
  margin-top: -10px;
  border: 0;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: var(--srv-knob-shadow);
  border-image: linear-gradient(90deg, var(--srv-fill) 50%, var(--srv-track) 50%) 0 1 / 10px 100vw / 0 100vw;
  transition: box-shadow 0.2s ease;
}
.site-main--servers .resources__slider::-webkit-slider-thumb:hover,
.site-main--servers .resources__slider::-webkit-slider-thumb:active {
  background-color: #ffffff;
}
.site-main--servers .resources__slider:focus-visible::-webkit-slider-thumb {
  box-shadow: var(--srv-knob-shadow), var(--srv-ring);
}
.site-main--servers .resources__slider::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background-color: var(--srv-track);
}
.site-main--servers .resources__slider::-moz-range-progress {
  height: 6px;
  border-radius: 3px;
  background-color: var(--srv-fill);
}
.site-main--servers .resources__slider::-moz-range-thumb {
  height: 26px;
  width: 26px;
  border: 0;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: var(--srv-knob-shadow);
}
.site-main--servers .resources__slider::-moz-range-thumb:hover,
.site-main--servers .resources__slider::-moz-range-thumb:active {
  background-color: #ffffff;
}
.site-main--servers .resources__slider:focus-visible::-moz-range-thumb {
  box-shadow: var(--srv-knob-shadow), var(--srv-ring);
}
@media (forced-colors: active) {
.site-main--servers .resources__slider {
  overflow: visible;
}
.site-main--servers .resources__slider::-webkit-slider-thumb {
  border-image: none;
}
}
.site-main--servers .resources__scale {
  font-size: 13px;
  line-height: 18px;
  color: var(--srv-muted);
}
/* The four figures under the sliders. */
.site-main--servers .spec-meter {
  margin-top: 2.25rem;
  gap: 1.25rem 0;
  border-radius: 20px;
  background-color: var(--srv-inset);
  padding: 1.25rem 0.5rem;
}
.site-main--servers .spec-meter > div {
  padding: 0 0.5rem;
}
.site-main--servers .spec-meter > div:nth-child(even) {
  border-left: 1px solid var(--srv-hair);
}
@media (min-width: 640px) {
.site-main--servers .spec-meter > div + div {
  border-left: 1px solid var(--srv-hair);
}
}
.site-main--servers .spec-meter .caption-block {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--srv-muted);
}
.site-main--servers .spec-meter .figure-sm {
  display: block;
  margin-top: 0.375rem;
  white-space: nowrap;
  font-size: clamp(1.125rem, 0.9rem + 0.6vw, 1.5rem);
  line-height: 1.1;
  letter-spacing: -0.024em;
  font-weight: 700;
  color: var(--srv-text);
}

/* Operating systems: tiles, the chosen one ringed and ticked. */
.site-main--servers .os__options {
  gap: 0.75rem;
}
.site-main--servers .os-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-width: 0;
  padding: 1.125rem 1.125rem 1rem;
  text-align: left;
}
.site-main--servers :is(.os__option-custom, .os__option-custom-selected) {
  border: 1px dashed var(--srv-edge-hover);
  box-shadow: none;
}
.site-main--servers .os__option-custom:hover {
  border-color: var(--srv-muted);
  box-shadow: none;
}
.site-main--servers .os__option-custom-selected,
.site-main--servers .os__option-custom-selected:hover {
  border-color: var(--srv-pick);
  box-shadow: inset 0 0 0 1px var(--srv-pick);
}
.site-main--servers .os-btn > div:first-child {
  margin-bottom: 0.875rem;
  height: 2.75rem;
  width: 2.75rem;
  border-radius: 12px;
  background-color: var(--srv-inset);
}
.site-main--servers .os-btn > div:first-child svg {
  height: 22px;
  width: 22px;
}
.site-main--servers .os-btn::after {
  content: '';
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  height: 1.375rem;
  width: 1.375rem;
  border-radius: 50%;
  background: var(--srv-pick) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.6L12 5.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  opacity: 0;
  scale: 0.6;
  transition: opacity 0.25s ease, scale 0.35s var(--v2-ease);
}
.site-main--servers :is(.os__option-selected, .os__option-custom-selected)::after {
  opacity: 1;
  scale: 1;
}
.site-main--servers .os__name {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.018em;
  font-weight: 600;
  color: var(--srv-text);
}
.site-main--servers .os__desc {
  margin-top: 0.125rem;
  font-size: 13px;
  line-height: 18px;
  color: var(--srv-muted);
}
.site-main--servers :is(.os__price-free, .os__price-note) {
  margin-top: auto;
  padding-top: 0.625rem;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
}
.site-main--servers .os__price-free {
  color: var(--srv-green);
}
.site-main--servers .os__price-note {
  color: var(--srv-text-2);
}
@media (min-width: 640px) and (max-width: 767.98px), (min-width: 1024px) and (max-width: 1199.98px) {
.site-main--servers .os-btn {
  padding: 1rem 0.875rem 0.875rem;
}
.site-main--servers .os-btn::after {
  top: 0.75rem;
  right: 0.75rem;
}
}

/* Add-ons: outlined rows with Apple's round-cornered tick boxes. */
.site-main--servers .config__controls > .card > .stack-list > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0.75rem;
}
.site-main--servers .addons__option {
  gap: 1rem;
  padding: 1.125rem 1.25rem;
}
.site-main--servers .addons__option .media-object {
  align-items: center;
  gap: 1rem;
}
.site-main--servers .addons__checkbox {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  height: 1.375rem;
  width: 1.375rem;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
  border: 1.5px solid var(--srv-edge-hover);
  border-radius: 7px;
  background-color: var(--srv-tile);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.site-main--servers .addons__checkbox:checked {
  border-color: var(--srv-pick);
  background: var(--srv-pick) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.8 8.4l2.7 2.7L12.2 5.3' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat;
}
.site-main--servers .addons__checkbox:focus-visible {
  outline: none;
}
@media (forced-colors: active) {
.site-main--servers .addons__checkbox {
  -webkit-appearance: auto;
  appearance: auto;
}
}
.site-main--servers .addons__option .cluster-sm {
  flex-wrap: wrap;
  row-gap: 0.25rem;
}
.site-main--servers .addons__option .label-strong {
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  color: var(--srv-text);
}
.site-main--servers .addons__option .note-soft {
  margin-top: 0.125rem;
  font-size: 14px;
  line-height: 19px;
  color: var(--srv-muted);
}
.site-main--servers .addons__included {
  border-radius: 980px;
  background-color: var(--srv-pick-tint);
  padding: 0.125rem 0.5rem;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--srv-pick-text);
  box-shadow: inset 0 0 0 1px rgb(0 113 227 / 0.25);
}
.site-main--servers .addons__price-col {
  margin-left: 0;
}
.site-main--servers .addons__price-col .figure-sm,
.site-main--servers .addons__price {
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--srv-text);
}
.site-main--servers .addons__price {
  color: var(--srv-green);
}
.site-main--servers .addons__price-col .caption-block {
  margin-top: 0.125rem;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--srv-muted);
}
@media (max-width: 479.98px) {
.site-main--servers .addons__option {
  align-items: flex-start;
  padding: 1rem;
}
.site-main--servers .addons__option .media-object {
  align-items: flex-start;
  gap: 0.75rem;
}
.site-main--servers .addons__checkbox {
  margin-top: 0.0625rem;
}
.site-main--servers .addons__option .label-strong {
  font-size: 16px;
}
.site-main--servers .addons__option {
  flex-wrap: wrap;
  row-gap: 0.5rem;
}
.site-main--servers .addons__price-col {
  display: flex;
  flex-basis: 100%;
  align-items: baseline;
  gap: 0.375rem;
  padding-left: 2.125rem;
  text-align: left;
}
.site-main--servers .addons__price-col .caption-block {
  margin-top: 0;
}
.site-main--servers .addons__price-col .figure-sm,
.site-main--servers .addons__price {
  font-size: 15px;
  line-height: 20px;
}
}

/* ── The order summary: beside you all the way down; frosted glass after hours ──────────────── */
.site-main--servers .summary {
  top: calc(3.5rem + 1.25rem);
}
.site-main--servers .summary > :not([hidden]) ~ :not([hidden]) {
  margin-top: 1rem;
}
.site-main--servers .summary__card {
  border-radius: var(--v2-radius-tile);
  background-color: var(--srv-tile);
  padding: 1.75rem;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.03), 0 30px 60px -36px rgb(0 0 0 / 0.28);
}
@media (min-width: 1200px) {
.site-main--servers .summary__card {
  padding: 2rem;
}
}
@media (min-width: 1024px) and (max-height: 860px) {
.site-main--servers .summary__card {
  padding: 1.5rem 1.75rem;
}
.site-main--servers .summary__head,
.site-main--servers .summary .field-group,
.site-main--servers .summary__lines {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}
.site-main--servers .summary .field-group {
  padding-bottom: 0;
}
.site-main--servers .summary__lines > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0.5rem;
}
.site-main--servers .summary__assurances {
  margin-top: 1rem;
  padding-top: 0.75rem;
}
.site-main--servers .summary__assurances > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0.375rem;
}
}
:root[data-theme='dark'] .site-main--servers .summary::before {
  content: '';
  position: absolute;
  top: -3rem;
  left: 0;
  right: 0;
  height: 26rem;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--glow-blue) / 0.42), rgb(var(--glow-violet) / 0.12) 60%, transparent 100%);
  filter: blur(10px);
}
:root[data-theme='dark'] .site-main--servers .config {
  isolation: isolate;
}
:root[data-theme='dark'] .site-main--servers .summary__card {
  background-color: rgb(24 24 28 / 0.62);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1), inset 0 1px 0 rgb(255 255 255 / 0.1), 0 40px 90px -40px rgb(var(--glow-blue) / 0.55);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
}
/* "Summary" and the currency share the first line; the configuration's name has the full width. */
.site-main--servers .summary__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1rem;
  row-gap: 0.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--srv-hair);
  padding-bottom: 1.25rem;
}
.site-main--servers .summary__head > div:first-child {
  display: contents;
}
.site-main--servers .summary__head .step-label {
  grid-row: 1;
  grid-column: 1;
}
.site-main--servers .summary__head > .currency {
  grid-row: 1;
  grid-column: 2;
}
.site-main--servers .summary__head #summary-tier-name {
  grid-row: 2;
  grid-column: 1 / -1;
}
.site-main--servers .summary__head .step-label {
  color: var(--srv-pick-text);
}
.site-main--servers #summary-tier-name {
  margin-top: 0.375rem;
  font-size: clamp(1.25rem, 1.05rem + 0.5vw, 1.5rem);
  line-height: 1.18;
  letter-spacing: -0.022em;
  font-weight: 700;
  color: var(--srv-text);
}
.site-main--servers .summary .currency__button {
  border-radius: 980px;
}
/* The currency menu drops from the button's right edge, inside the card (Apple's menus do), so it
   never reaches past the page on a phone; nav.js still nudges it if it ever has to. */
.site-main--servers .summary .currency__panel:not([data-side]) {
  left: auto;
  right: 0;
  transform: translateX(var(--menu-shift, 0px));
}
.site-main--servers .summary .field-group {
  margin-bottom: 1.25rem;
}
.site-main--servers .billing__label {
  margin-bottom: 0.5rem;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.08em;
  color: var(--srv-muted);
}
.site-main--servers .billing__term {
  border-radius: 12px;
  background-color: var(--srv-inset);
  padding: 0.6875rem 0.875rem;
  text-align: left;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--srv-text);
}
.site-main--servers .summary__lines {
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--srv-hair);
  padding-bottom: 1.25rem;
  font-size: 14px;
  line-height: 19px;
  letter-spacing: -0.016em;
}
.site-main--servers .summary__lines > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0.75rem;
}
.site-main--servers .summary__lines .split {
  gap: 0.75rem;
}
.site-main--servers .summary__line-label {
  min-width: 0;
  gap: 0.625rem;
  color: var(--srv-text);
}
.site-main--servers .summary__line-label .material-symbols-outlined {
  font-size: 18px;
  color: var(--srv-muted);
}
.site-main--servers .summary__lines :is(.value-sm, .price-free, .price-paid) {
  flex-shrink: 0;
  font-size: 14px;
  line-height: 19px;
  letter-spacing: -0.016em;
  font-weight: 600;
  color: var(--srv-text);
}
.site-main--servers .summary__lines .price-free {
  color: var(--srv-green);
}
.site-main--servers .summary__line-value {
  max-width: none;
}
.site-main--servers .summary__bandwidth-row {
  padding-top: 0.125rem;
  color: var(--srv-muted);
}
.site-main--servers .summary__bandwidth-row .material-symbols-outlined {
  font-size: 18px;
}
.site-main--servers .summary__bandwidth-row .icon-label {
  gap: 0.625rem;
}
.site-main--servers .summary__bandwidth {
  font-size: 14px;
  line-height: 19px;
  font-weight: 600;
  color: var(--srv-text-2);
}
.site-main--servers .summary__total {
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 0;
}
.site-main--servers .summary__label {
  padding-bottom: 0.375rem;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 600;
  text-transform: none;
  color: var(--srv-text);
}
.site-main--servers .summary__price-row {
  flex-wrap: wrap;
  column-gap: 0.375rem;
}
.site-main--servers .summary__price {
  font-size: clamp(2.25rem, 1.6rem + 1.4vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.034em;
  font-weight: 700;
  color: var(--srv-text);
}
:root[data-theme='dark'] .site-main--servers .summary__price {
  background-image: linear-gradient(180deg, #ffffff 35%, #a9c1ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.site-main--servers .summary__total .note {
  font-size: 14px;
  line-height: 19px;
  color: var(--srv-muted);
}
.site-main--servers .summary__total .align-end > .note {
  margin-top: 0.25rem;
  font-size: 12px;
  line-height: 16px;
}
.site-main--servers .summary__cta {
  height: 3.25rem;
  margin-top: 0.5rem;
  border-radius: 980px;
  background-color: #0071e3;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  color: #ffffff;
  box-shadow: none;
  transition: background-color 0.25s ease, box-shadow 0.3s ease;
}
.site-main--servers .summary__cta:hover {
  background-color: #0077ed;
}
:root[data-theme='dark'] .site-main--servers .summary__cta {
  box-shadow: 0 14px 34px -14px rgb(0 113 227 / 0.95);
}
.site-main--servers .summary__cta:focus-visible {
  outline: 2px solid var(--srv-pick);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.site-main--servers .summary__cta:active {
  transform: none;
}
}
.site-main--servers .summary__assurances {
  margin-top: 1.25rem;
  border-top: 1px solid var(--srv-hair);
  padding-top: 1rem;
}
.site-main--servers .summary__assurance {
  gap: 0.625rem;
  font-size: 13px;
  line-height: 18px;
  color: var(--srv-muted);
}
.site-main--servers .summary__assurance .material-symbols-outlined {
  font-size: 18px;
}
.site-main--servers .summary__icon {
  color: var(--srv-green);
}
.site-main--servers .summary__assurance .icon-18-accent {
  color: var(--srv-pick-text);
}
/* Diagnostics: a quiet tile under the summary. */
.site-main--servers .summary > .card-muted {
  border-radius: 22px;
  background-color: var(--srv-tile);
  padding: 1.25rem 1.5rem;
}
:root[data-theme='dark'] .site-main--servers .summary > .card-muted {
  background-color: rgb(20 20 22 / 0.7);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07);
}
.site-main--servers .summary .row-head {
  margin-bottom: 0.75rem;
}
.site-main--servers .summary .overline-strong {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.08em;
  color: var(--srv-muted);
}
.site-main--servers .diagnostics__dot {
  background-color: #3ccf91;
  box-shadow: 0 0 0 3px rgb(60 207 145 / 0.18);
}
@media (prefers-reduced-motion: no-preference) {
.site-main--servers .diagnostics__dot {
  animation: pulse 2.4s ease-in-out 3;
}
}
.site-main--servers .diagnostics__list {
  font-size: 13px;
  line-height: 18px;
  color: var(--srv-muted);
}
.site-main--servers .diagnostics__list > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0.5rem;
}
.site-main--servers .diagnostics__list .spread {
  gap: 1rem;
}
.site-main--servers .diagnostics__value {
  text-align: right;
  font-weight: 500;
  color: var(--srv-text);
}

/* Phones and tablets: the summary follows the controls, so its total waits at the foot of the
   screen all the way down the configurator and settles into place under the order lines. The
   summary's own boxes step aside (display: contents) so the total can stick within the whole
   configurator; its top (head, billing, lines) is one tile, the total a frosted bar, then Deploy
   Now. The same total, not a copy. Desktop keeps the sticky card beside the controls. */
@media (max-width: 1023.98px) {
/* whatever the keyboard moves to is scrolled clear of the bar */
html:has(.site-main--servers .srv-sum-total) {
  scroll-padding-bottom: 7rem;
}
.site-main--servers .config {
  display: block;
}
.site-main--servers :is(.summary, .summary__card) {
  display: contents;
}
:root[data-theme='dark'] .site-main--servers .summary::before {
  content: none;
}
.site-main--servers .srv-sum-top {
  margin-top: 1rem;
  border-radius: var(--v2-radius-tile);
  background-color: var(--srv-tile);
  padding: 1.75rem 1.75rem 0;
}
:root[data-theme='dark'] .site-main--servers .srv-sum-top {
  box-shadow: var(--shadow-card);
}
.site-main--servers .srv-sum-top .summary__lines {
  margin-bottom: 0;
  border-bottom: 0;
  padding-bottom: 1.5rem;
}
.site-main--servers .summary .srv-sum-total {
  position: sticky;
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  z-index: 5;
  margin: 0.75rem 0 0;
  border-radius: 22px;
  background-color: rgb(255 255 255 / 0.84);
  padding: 0.75rem 1.25rem 0.8125rem;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.06), 0 12px 32px -10px rgb(0 0 0 / 0.28);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
:root[data-theme='dark'] .site-main--servers .summary .srv-sum-total {
  background-color: rgb(32 32 36 / 0.8);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), 0 0 0 1px rgb(255 255 255 / 0.1), 0 16px 40px -12px rgb(0 0 0 / 0.95), 0 18px 50px -24px rgb(var(--glow-blue) / 0.6);
}
.site-main--servers .srv-sum-total .summary__label {
  padding-bottom: 0.25rem;
}
.site-main--servers .srv-sum-total .summary__price {
  font-size: 1.875rem;
}
.site-main--servers .summary__cta {
  margin-top: 0.75rem;
}
.site-main--servers .summary__assurances {
  margin-top: 1rem;
  border-top: 0;
  padding: 0 0.5rem;
}
.site-main--servers .summary > .card-muted {
  margin-top: 1rem;
}
}
@media (max-width: 639.98px) {
.site-main--servers .srv-sum-top {
  border-radius: 22px;
  padding: 1.5rem 1.5rem 0;
}
}

/* ── Compare: Apple's comparison table in a tile ──────────────────────────────────────────── */
.site-main--servers .compare {
  margin-top: 5rem;
  padding-top: 0;
}
@media (min-width: 1024px) {
.site-main--servers .compare {
  margin-top: 7rem;
}
}
.site-main--servers .compare__head {
  margin-bottom: 2rem;
  gap: 0.75rem 2rem;
}
.site-main--servers .compare .eyebrow-block {
  margin-bottom: 0.75rem;
  color: var(--color-primary);
}
.site-main--servers .title-lg {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.05rem + 2.7vw, 3.5rem);
  line-height: 1.07;
  letter-spacing: -0.026em;
  font-weight: 700;
  color: var(--srv-text);
}
.site-main--servers .compare__link {
  display: block;
  flex-shrink: 0;
  gap: 0.25rem;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--srv-pick-text);
}
.site-main--servers .compare__link .material-symbols-outlined {
  margin-left: 0.125rem;
  vertical-align: -3px;
}
.site-main--servers .compare__link:focus-visible {
  border-radius: 6px;
  outline: 2px solid var(--srv-pick);
  outline-offset: 4px;
}
.site-main--servers .compare__link:hover {
  text-decoration: underline;
}
.site-main--servers .table-card {
  border-radius: var(--v2-radius-tile);
  background-color: var(--srv-tile);
  box-shadow: none;
}
:root[data-theme='dark'] .site-main--servers .table-card {
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
}
@media (max-width: 639.98px) {
.site-main--servers .table-card {
  border-radius: 22px;
}
}
.site-main--servers .data-table {
  min-width: 42rem;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: -0.016em;
}
.site-main--servers .data-table-head {
  background-color: transparent;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 600;
  text-transform: none;
  color: var(--srv-text);
}
.site-main--servers :is(.compare__th, .compare__th-vps, .compare__th-vds, .compare__th-plain) {
  padding: 1.75rem 1.5rem 1.25rem;
  vertical-align: bottom;
  background-color: transparent;
  font-weight: 600;
  color: var(--srv-text);
}
.site-main--servers .compare__th {
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--srv-muted);
}
.site-main--servers .compare__th-vds,
.site-main--servers :is(.compare__cell-vds, .compare__cell-vds-accent) {
  background-color: var(--srv-col);
}
/* As the table arrives, the VDS column's tint pours down it, row after row. */
@media (prefers-reduced-motion: no-preference) {
html.v2-js .site-main--servers .table-card :is(.compare__th-vds, .compare__cell-vds, .compare__cell-vds-accent) {
  background-color: transparent;
  background-image: linear-gradient(var(--srv-col), var(--srv-col));
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: 100% 0%;
}
html.v2-js .site-main--servers .table-card.is-in :is(.compare__th-vds, .compare__cell-vds, .compare__cell-vds-accent) {
  background-size: 100% 100%;
  transition: background-size 0.1s linear calc(0.3s + var(--srv-r, 0) * 0.09s), background-color 0.25s ease;
}
.site-main--servers .compare__body > tr:nth-child(1) { --srv-r: 1; }
.site-main--servers .compare__body > tr:nth-child(2) { --srv-r: 2; }
.site-main--servers .compare__body > tr:nth-child(3) { --srv-r: 3; }
.site-main--servers .compare__body > tr:nth-child(4) { --srv-r: 4; }
.site-main--servers .compare__body > tr:nth-child(5) { --srv-r: 5; }
.site-main--servers .compare__body > tr:nth-child(6) { --srv-r: 6; }
.site-main--servers .compare__body > tr:nth-child(7) { --srv-r: 7; }
.site-main--servers .compare__body > tr:nth-child(8) { --srv-r: 8; }
}
/* Under the pointer, a column lights from its header to its last row. */
@media (hover: hover) and (pointer: fine) {
.site-main--servers .data-table :is(th, td) {
  transition: background-color 0.25s ease;
}
.site-main--servers .data-table:has(:is(th, td):nth-child(2):hover) :is(th, td):nth-child(2),
.site-main--servers .data-table:has(:is(th, td):nth-child(4):hover) :is(th, td):nth-child(4) {
  background-color: var(--srv-col-hover);
}
.site-main--servers .data-table:has(:is(th, td):nth-child(3):hover) :is(th, td):nth-child(3) {
  background-color: var(--srv-col-vds-hover);
}
}
.site-main--servers .compare__th-vds {
  color: var(--srv-pick-text);
}
.site-main--servers .compare__body {
  font-size: 15px;
  line-height: 21px;
  color: var(--srv-text-2);
}
.site-main--servers .compare__body > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--srv-hair);
}
.site-main--servers .compare__row:hover {
  background-color: transparent;
}
.site-main--servers :is(.compare__feature, .compare__cell, .compare__cell-vps, .compare__cell-vds, .compare__cell-vds-accent) {
  padding: 1.125rem 1.5rem;
}
.site-main--servers :is(.compare__feature, .compare__cell, .compare__cell-vps) {
  background-color: transparent;
}
.site-main--servers .compare__feature {
  font-weight: 600;
  color: var(--srv-text);
}
.site-main--servers .compare__cell-vds {
  font-weight: 600;
  color: var(--srv-text);
}
.site-main--servers .compare__cell-vds-accent {
  font-weight: 600;
  color: var(--srv-pick-text);
}
.site-main--servers .compare__body tr:last-child td {
  padding-bottom: 1.75rem;
}
@media (max-width: 767.98px) {
/* Contained, so the wide table scrolls inside its tile and never widens a phone's viewport. */
.site-main--servers .table-scroll {
  contain: paint;
  border-radius: inherit;
}
.site-main--servers .data-table {
  min-width: 38rem;
}
.site-main--servers :is(.compare__th, .compare__feature) {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: var(--srv-tile);
  box-shadow: inset -1px 0 0 var(--srv-hair);
  transition: box-shadow 0.3s ease;
}
/* It scrolls sideways: a shade (and a small chevron) at the right edge until you reach the end,
   and a shadow off the pinned first column once you have moved (v2-servers.js marks the tile;
   without it the right shade simply stays). */
.site-main--servers .table-card {
  position: relative;
}
.site-main--servers .table-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 2.75rem;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5l4.5 4.5L6 12.5' fill='none' stroke='%238e8e93' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 0.625rem top 1.5rem / 0.875rem no-repeat,
    linear-gradient(90deg, transparent, var(--srv-edge-shade));
  transition: opacity 0.3s ease;
}
.site-main--servers .table-card[data-srv-end]::after {
  opacity: 0;
}
.site-main--servers .table-card[data-srv-moved] :is(.compare__th, .compare__feature) {
  box-shadow: inset -1px 0 0 var(--srv-hair), 12px 0 16px -12px var(--srv-edge-shade);
}
}
@media (max-width: 639.98px) {
.site-main--servers .data-table {
  min-width: 34rem;
}
.site-main--servers :is(.compare__th, .compare__th-vps, .compare__th-vds, .compare__th-plain) {
  padding: 1.25rem 1rem 1rem;
}
.site-main--servers :is(.compare__feature, .compare__cell, .compare__cell-vps, .compare__cell-vds, .compare__cell-vds-accent) {
  padding: 1rem;
}
}

/* ── Bare metal: a lit dark tile, the scene again in miniature, whatever the theme ─────────── */
.site-main--servers .bare-metal {
  --color-surface: #000000;
  --color-on-surface: #f5f5f7;
  --color-on-surface-variant: #d2d2d7;
  --color-tertiary: #a1a1a6;
  --color-primary: #6e9bff;
  --color-success: #3ccf91;
  --color-surface-container: rgb(255 255 255 / 0.1);
  --color-surface-container-low: rgb(255 255 255 / 0.06);
  --color-surface-container-lowest: #141416;
  --color-hairline: rgb(255 255 255 / 0.1);
  color-scheme: dark;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 1.25rem;
  margin-bottom: 0;
  /* a black stage with a body: its edge catches the key light at the upper right and a touch of
     violet at the far corner; by day it sits on a deep shadow, after hours on a blue under-glow */
  border: 1px solid transparent;
  border-radius: var(--v2-radius-tile);
  background:
    linear-gradient(#000000, #000000) padding-box,
    linear-gradient(215deg, rgb(170 196 255 / 0.62) 0%, rgb(255 255 255 / 0.12) 26%, rgb(255 255 255 / 0.05) 62%, rgb(124 77 255 / 0.32) 100%) border-box;
  padding: 2rem 1.5rem;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.08), 0 40px 70px -36px rgb(0 0 0 / 0.5);
  color: #f5f5f7;
}
:root[data-theme='dark'] .site-main--servers .bare-metal {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), 0 50px 100px -50px rgb(var(--glow-blue) / 0.65), 0 30px 60px -30px rgb(0 0 0 / 0.9);
}
@media (min-width: 640px) {
.site-main--servers .bare-metal {
  padding: 3rem;
}
}
@media (min-width: 1024px) {
.site-main--servers .bare-metal {
  padding: 4rem 3.5rem;
}
}
@media (max-width: 639.98px) {
.site-main--servers .bare-metal {
  border-radius: 22px;
}
}
/* Its light, a layer of its own that drifts slowly against the scroll ([data-parallax]). */
.site-main--servers .srv-bm-glow {
  position: absolute;
  inset: -14% -8%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 45% 52% at 80% 28%, rgb(var(--glow-blue) / 0.58) 0%, rgb(var(--glow-blue) / 0.18) 45%, rgb(var(--glow-blue) / 0) 75%),
    radial-gradient(ellipse 40% 50% at 8% 102%, rgb(var(--glow-violet) / 0.3) 0%, rgb(var(--glow-violet) / 0) 70%),
    radial-gradient(ellipse 30% 35% at 60% 88%, rgb(var(--glow-cyan) / 0.14) 0%, rgb(var(--glow-cyan) / 0) 70%);
}
/* The server in that light (original artwork): above the sample panel, which slides a little over
   its floor glow. */
.site-main--servers .srv-bm-chassis {
  display: block;
  width: 100%;
  max-width: 26rem;
  margin: -0.5rem auto -1.25rem;
}
.site-main--servers .srv-bm-chassis img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 1024px) {
.site-main--servers .srv-bm-chassis {
  max-width: none;
  margin: -1.5rem -0.5rem -1.5rem;
  width: calc(100% + 1rem);
}
}
.site-main--servers .bare-metal::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 55% 70% at 80% 30%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 55% 70% at 80% 30%, #000 0%, transparent 75%);
}
.site-main--servers .bare-metal .feature-grid {
  gap: 2.5rem;
}
@media (min-width: 1024px) {
.site-main--servers .bare-metal .feature-grid {
  gap: 3.5rem;
}
}
.site-main--servers .bare-metal__badge {
  margin-bottom: 1.25rem;
  border-radius: 980px;
  background-color: rgb(255 255 255 / 0.1);
  padding: 0.375rem 0.875rem;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: #f5f5f7;
}
.site-main--servers .bare-metal__badge .dot {
  background-color: #6e9bff;
  box-shadow: 0 0 10px rgb(110 155 255 / 0.9);
}
.site-main--servers .bare-metal .feature-title {
  margin-bottom: 1rem;
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem);
  line-height: 1.07;
  letter-spacing: -0.028em;
  font-weight: 700;
  color: #ffffff;
  text-wrap: balance;
}
.site-main--servers .bare-metal__lead {
  margin-bottom: 2rem;
  max-width: 36rem;
  font-size: clamp(1.0625rem, 0.98rem + 0.3vw, 1.1875rem);
  line-height: 1.45;
  letter-spacing: -0.014em;
  color: #b9b9bf;
}
.site-main--servers .bare-metal__lead [data-price] {
  font-weight: 600;
  color: #ffffff;
}
.site-main--servers .bare-metal__specs {
  margin-bottom: 2rem;
  gap: 0.75rem;
}
.site-main--servers .bare-metal .card-muted {
  border-radius: 18px;
  background-color: rgb(255 255 255 / 0.06);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.09);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.site-main--servers .bare-metal__specs .card-muted {
  padding: 1rem 1.125rem;
}
.site-main--servers .bare-metal .caption-block {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: #b4b4ba;
}
.site-main--servers .bare-metal .heading-sm-block {
  margin-top: 0.25rem;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.022em;
  font-weight: 700;
  color: #ffffff;
}
.site-main--servers .bare-metal__actions {
  gap: 0.75rem;
}
.site-main--servers :is(.bare-metal__cta, .bare-metal__cta-alt) {
  height: 2.75rem;
  gap: 0.375rem;
  border-radius: 980px;
  padding: 0 1.375rem;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 600;
  box-shadow: none;
  transition: background-color 0.25s ease, box-shadow 0.3s ease;
}
.site-main--servers .bare-metal__cta {
  background-color: #0071e3;
  color: #ffffff;
  box-shadow: 0 14px 34px -14px rgb(0 113 227 / 0.95);
}
.site-main--servers .bare-metal__cta:hover {
  background-color: #0077ed;
}
.site-main--servers .bare-metal__cta-alt {
  background-color: rgb(255 255 255 / 0.1);
  color: #ffffff;
}
.site-main--servers .bare-metal__cta-alt:hover {
  background-color: rgb(255 255 255 / 0.18);
}
.site-main--servers :is(.bare-metal__cta, .bare-metal__cta-alt, .architect__link):focus-visible {
  outline: 2px solid #6e9bff;
  outline-offset: 3px;
}
.site-main--servers .bare-metal__aside {
  gap: 0.75rem;
}
.site-main--servers .bare-metal__aside > .card-muted {
  padding: 1.25rem 1.5rem 1.5rem;
}
.site-main--servers .bare-metal__panel-head {
  margin-bottom: 1rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
  padding-bottom: 0.75rem;
}
.site-main--servers .bare-metal .overline-strong {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.08em;
  color: #c7c7cc;
}
.site-main--servers .bare-metal__panel-head .price-free {
  border-radius: 980px;
  background-color: rgb(60 207 145 / 0.14);
  padding: 0.125rem 0.5rem;
  font-size: 12px;
  font-weight: 600;
  color: #8ef0c3;
}
.site-main--servers .bare-metal__readings > :not([hidden]) ~ :not([hidden]) {
  margin-top: 1rem;
}
.site-main--servers .bare-metal__reading {
  margin-bottom: 0.5rem;
  font-size: 14px;
  line-height: 18px;
  color: #d2d2d7;
}
.site-main--servers .bare-metal__value-ok {
  color: #3ccf91;
}
.site-main--servers .bare-metal__value {
  color: #8fb0ff;
}
.site-main--servers .bare-metal .meter {
  height: 0.375rem;
  background-color: rgb(255 255 255 / 0.1);
  overflow: visible;
}
.site-main--servers :is(.bare-metal__fill-power, .bare-metal__fill-fiber, .bare-metal__fill-pue) {
  transform-origin: left center;
}
.site-main--servers .bare-metal__fill-power {
  background-image: linear-gradient(90deg, #10b981, #3ccf91);
  box-shadow: 0 0 14px rgb(60 207 145 / 0.45);
}
.site-main--servers .bare-metal__fill-fiber {
  background-image: linear-gradient(90deg, #2948ff, #2fa8ff);
  box-shadow: 0 0 14px rgb(47 140 255 / 0.65);
}
.site-main--servers .bare-metal__fill-pue {
  background-image: linear-gradient(90deg, #0ea371, #5fdca6);
  box-shadow: 0 0 14px rgb(60 207 145 / 0.4);
}
@media (prefers-reduced-motion: no-preference) {
html.v2-motion .site-main--servers .bare-metal:not(.is-in) .meter > div {
  transform: scaleX(0);
}
html.v2-motion .site-main--servers .bare-metal.is-in .meter > div {
  animation: srv-meter 1.4s var(--v2-ease) both;
  animation-delay: 0.45s;
}
html.v2-motion .site-main--servers .bare-metal.is-in .bare-metal__readings > div:nth-child(2) .meter > div {
  animation-delay: 0.6s;
}
html.v2-motion .site-main--servers .bare-metal.is-in .bare-metal__readings > div:nth-child(3) .meter > div {
  animation-delay: 0.75s;
}
}
@keyframes srv-meter {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.site-main--servers .bare-metal .strong {
  color: #ffffff;
}
.site-main--servers .architect {
  gap: 1rem;
  border-radius: 18px;
  background-color: rgb(255 255 255 / 0.06);
  padding: 1rem 1.125rem;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.09);
}
.site-main--servers .architect .cluster-md {
  gap: 0.875rem;
  min-width: 0;
}
.site-main--servers .architect__icon-tile {
  height: 2.75rem;
  width: 2.75rem;
  flex-shrink: 0;
  border-radius: 13px;
  background-image: linear-gradient(140deg, #2f6bff, #00a6ff);
  color: #ffffff;
  box-shadow: 0 10px 24px -10px rgb(41 100 255 / 0.9);
}
.site-main--servers .architect .label-strong {
  font-size: 16px;
  line-height: 21px;
  color: #ffffff;
}
.site-main--servers .architect .note {
  font-size: 13px;
  line-height: 18px;
  color: #a1a1a6;
}
.site-main--servers .architect__link {
  border-radius: 980px;
  background-color: rgb(255 255 255 / 0.12);
  padding: 0.5rem 1rem;
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  white-space: nowrap;
  color: #ffffff;
  transition: background-color 0.25s ease;
}
@media (max-width: 479.98px) {
.site-main--servers .architect {
  flex-wrap: wrap;
  row-gap: 0.75rem;
}
.site-main--servers .architect__link {
  margin-left: 3.625rem;
}
}
.site-main--servers .architect__link:hover {
  background-color: rgb(255 255 255 / 0.2);
  text-decoration: none;
}

/* ── Less motion: everything still, at once ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.site-main--servers .config-status__dot {
  animation: none;
}
.site-main--servers .mode-switch::before,
.site-main--servers .os-btn::after,
.site-main--servers :is(.mode-switch__option, .mode-switch__option-active, .presets__option, .presets__option-active, .region__option, .os-btn, .addons__option, .summary__cta, .arch-banner__badge, .arch-banner__badge-dedicated),
.site-main--servers .srv-node__socket > span::before,
.site-main--servers .srv-node__socket > span::after,
.site-main--servers :is(.srv-route__pt, .srv-route__halo),
.site-main--servers .table-card::after,
.site-main--servers :is(.compare__th, .compare__feature),
.site-main--servers .mode-switch :is(.note-plain, .dot, .mode-switch__dot),
.site-main--servers .addons__checkbox {
  transition: none;
}
.site-main--servers .diagnostics__dot {
  animation: none;
}
}

/* The FAQ sits on the page's own colour, so no white band cuts in under the bare-metal tile. */
.site-main--servers #faq {
  background-color: var(--color-surface);
}