/* v2: products (see assets/css/v2.css for the shared look).
 *
 * The four product pages (includes/product-page.php: WordPress, Cloud and Reseller Hosting,
 * Dedicated Servers) and the Pricing page (pricing.php). This file loads on every page, so every
 * rule here is scoped to main.product-page or main.pricing-page.
 *
 *   Product pages: the hero is a scene with stars and a horizon of light that rises as you scroll;
 *   the features (or specifications) are Apple tiles, two of them wide and the first one lit;
 *   the plans are a scene of their own, glass cards with the recommended one ringed in a slowly
 *   turning light; the FAQ is a quiet list in a tile.
 *
 *   Pricing: the hero and the category links are one dark stage; the hosting categories are
 *   Apple bands (alternating grey and white, charcoal and deeper charcoal after hours), the server
 *   categories scenes (glass cards, each lit in its own colour, each with its own visual outside
 *   the cards: a row of cores, a chip of pinned cores, the chassis). The cards keep their exact
 *   size: only colours, corners, shadows and the ring of light change; the hover lift stays.
 *
 *   The artwork (includes/products-art.php): each product's hero visual rising out of the horizon,
 *   a rim of light as the seam into a plans scene, small drawings in the feature tiles, and on
 *   Dedicated Servers the server taken apart beside its specifications (assets/js/v2-products.js).
 *   Every loop stops after a few runs; with less motion everything is shown, still.
 */

/* A turning angle for the recommended card's ring of light. */
@property --vp-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes vp-turn {
  to { --vp-angle: 360deg; }
}
@keyframes vp-dawn {
  from { opacity: 0; transform: translateY(90px); }
}
@keyframes vp-stars-in {
  from { opacity: 0; }
}
@keyframes vp-twinkle {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.8; }
}

/* ══ Product pages ═════════════════════════════════════════════════════════════════════════ */

/* ── Hero: a full stage, the headline in light, stars above a rising horizon. ── */
.product-page .product-hero {
  --v2-glow-y: 34%;
  --vp-rise: clamp(4.5rem, 3rem + 7vw, 10rem);
  /* the room under the buttons where the product's own visual stands above the horizon */
  --vp-room: clamp(8.5rem, 30vh - 2.5rem, 15rem);
  --vp-room: clamp(8.5rem, 30svh - 2.5rem, 15rem);
  display: grid;
  min-height: clamp(36rem, 100vh, 62rem);
  min-height: clamp(36rem, 100svh, 62rem);
  align-content: center;
}
.site-main > .site-main__sections > .product-hero:first-child {
  padding-top: calc(3.5rem + 4rem);
  padding-bottom: calc(var(--vp-rise) + var(--vp-room) + 4rem);
}
.product-hero .home-hero__inner {
  max-width: 64rem;
}
.product-hero .eyebrow {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #8fb0ff;
}
.product-hero .home-hero__title {
  margin-top: 1rem;
  font-size: clamp(2.625rem, 1rem + 5.2vw, 5.5rem);
  line-height: 1.04;
  letter-spacing: -0.036em;
  font-weight: 700;
  background-image: linear-gradient(180deg, #ffffff 30%, #b9cbff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.06em;
}
.product-hero .home-hero__lead {
  margin-top: 1.25rem;
  max-width: 40rem;
  font-size: clamp(1.125rem, 0.95rem + 0.6vw, 1.5rem);
  line-height: 1.34;
  letter-spacing: -0.014em;
  color: #a1a1a6;
}
.product-hero .home-hero__actions {
  margin-top: 2.5rem;
}

/* Stars: three fields of points, drifting up a little as the page scrolls; one field twinkles. */
.product-hero__stars,
.product-hero__stars::before {
  position: absolute;
  inset: -12% 0 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: repeat;
}
.product-hero__stars {
  background-image:
    radial-gradient(1px 1px at 23px 41px, rgb(255 255 255 / 0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 151px 97px, rgb(255 255 255 / 0.6) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 271px 188px, rgb(190 210 255 / 0.9) 50%, transparent 100%),
    radial-gradient(1px 1px at 87px 263px, rgb(255 255 255 / 0.5) 50%, transparent 100%);
  background-size: 310px 310px, 230px 230px, 430px 430px, 370px 370px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 35%, #000 25%, transparent 85%);
  mask-image: radial-gradient(ellipse 75% 70% at 50% 35%, #000 25%, transparent 85%);
  opacity: 0.7;
  translate: 0 calc(var(--v2-p, 0.3) * -70px);
}
.product-hero__stars::before {
  content: '';
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 61px 133px, rgb(255 255 255 / 0.95) 50%, transparent 100%),
    radial-gradient(1px 1px at 199px 29px, rgb(200 220 255 / 0.9) 50%, transparent 100%);
  background-size: 260px 260px, 340px 340px;
  opacity: 0.5;
}
@media (prefers-reduced-motion: no-preference) {
.product-hero__stars::before {
  animation: vp-twinkle 5s ease-in-out 4;
}
}

/* The horizon: the rim of a dark world below the stage, lit from behind; it rises as you scroll. */
.product-hero__horizon {
  position: absolute;
  left: 50%;
  top: 100%;
  z-index: -1;
  width: max(170vw, 1500px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, #000000 92%, #02040c 97%, #0a1440 100%);
  box-shadow:
    inset 0 1.5px 0 rgb(186 206 255 / 0.95),
    inset 0 24px 48px -26px rgb(110 155 255 / 0.75),
    0 -2px 18px rgb(110 155 255 / 0.55),
    0 -30px 90px -10px rgb(var(--glow-blue) / 0.7),
    0 -90px 220px 20px rgb(var(--glow-violet) / 0.28);
  translate: -50% calc(-1 * var(--vp-rise) - var(--v2-p, 0.3) * 48px);
  will-change: translate;
}
/* On arrival the horizon rises into place and the stars come out. */
@media (prefers-reduced-motion: no-preference) {
.product-hero__horizon {
  animation: vp-dawn 1.8s var(--v2-ease) both;
}
.product-hero__stars {
  animation: vp-stars-in 2.4s ease-out both;
}
}

/* Each product's own visual (includes/products-art.php), standing on the horizon with its foot
   behind the rim: it moves with the horizon, and rises a little faster than it as the page
   scrolls (--vp-k, 0 at the top of the page to 1 as the stage leaves). It is in front of the
   horizon's glow, so its colours stay true; a mask the shape of the rim hides its foot. It sits
   behind the words and never over them. */
.product-hero {
  --vp-k: clamp(0, (var(--v2-p, 0.5) - 0.5) * 2.2, 1);
}
.vp-art {
  --vp-f: 0.25;
  --vp-lift: 1rem;
  position: absolute;
  left: 50%;
  top: calc(100% - var(--vp-rise));
  z-index: -1;
  width: min(calc(var(--vp-room) / (1 - var(--vp-f)) * var(--vp-ratio)), 92vw);
  aspect-ratio: var(--vp-ratio);
  pointer-events: none;
  translate: -50% calc((var(--vp-f) - 1) * 100% - var(--v2-p, 0.3) * 48px);
  will-change: translate;
  --vp-r: max(85vw, 750px);
  -webkit-mask-image: radial-gradient(circle var(--vp-r) at 50% calc((1 - var(--vp-f)) * 100% + var(--vp-r)), transparent calc(var(--vp-r) - 1px), #000 calc(var(--vp-r) + 1px));
  mask-image: radial-gradient(circle var(--vp-r) at 50% calc((1 - var(--vp-f)) * 100% + var(--vp-r)), transparent calc(var(--vp-r) - 1px), #000 calc(var(--vp-r) + 1px));
}
.vp-art__lift {
  translate: 0 calc(var(--vp-k) * var(--vp-lift) * -1);
}
.vp-art__lift,
.vp-art__fx,
.vp-plate,
.vp-chassis,
.vp-chassis > picture {
  position: absolute;
  inset: 0;
}
.vp-art__fx {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.vp-art picture,
.vp-art img {
  display: block;
  width: 100%;
  height: auto;
}
.vp-art--wordpress-hosting {
  --vp-ratio: 1.0367;
  --vp-f: 0.3;
  --vp-lift: 0px;
}
.vp-art--cloud-hosting {
  --vp-ratio: 1.4545;
  --vp-f: 0.24;
}
.vp-art--reseller-hosting {
  --vp-ratio: 1.65;
  --vp-f: 0.18;
}
.vp-art--dedicated {
  --vp-ratio: 1.6071;
  --vp-f: 0.3;
  --vp-lift: 1.25rem;
}
@media (prefers-reduced-motion: no-preference) {
.vp-art__lift {
  animation: vp-art-rise 1.4s var(--v2-ease-out) 0.35s both, vp-art-fade 0.8s linear 0.45s both;
}
}
@keyframes vp-art-rise {
  from { transform: translateY(64px); }
}
@keyframes vp-art-fade {
  from { opacity: 0; }
}

/* WordPress: the stack, from the storage at its foot to the storefront on top. The layers part as
   you scroll; on arrival each one settles onto the one below. */
.vp-plate {
  top: auto;
  bottom: calc(var(--i) * 11.4%);
  translate: 0 calc(var(--vp-k) * (var(--i) - 2) * -1.5rem);
  will-change: translate;
}
@media (prefers-reduced-motion: no-preference) {
.vp-art--wordpress-hosting .vp-art__lift {
  animation-name: vp-art-fade, vp-art-fade;
}
.vp-plate {
  animation: vp-settle 1.1s var(--v2-ease-out) both, vp-art-fade 0.5s linear both;
  animation-delay: calc(0.4s + var(--i) * 0.16s), calc(0.5s + var(--i) * 0.16s);
}
}
@keyframes vp-settle {
  from { transform: translateY(-3.25rem); }
}

/* Cloud: the site moves from one node to another along a trail of light, and back, and over
   again (automatic failover); then it rests. Held still: it rests on the first node. */
.vp-failover__face {
  fill: url(#vp-fo-face);
  stroke: rgb(207 224 255 / 0.7);
  stroke-width: 0.8;
  opacity: 0.14;
}
.vp-failover__face--from {
  opacity: 1;
}
.vp-failover__path {
  fill: none;
  stroke: rgb(157 184 255 / 0.26);
  stroke-width: 1;
  stroke-dasharray: 2 6;
}
.vp-failover__trail {
  fill: none;
  stroke: url(#vp-fo-trail);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 0.24 2;
  stroke-dashoffset: 0.24;
}
.vp-failover__orb {
  transform: translate(190.1px, 159px);
}
@media (prefers-reduced-motion: no-preference) {
.vp-failover :is(.vp-failover__orb, .vp-failover__trail, .vp-failover__face--from, .vp-failover__face--to) {
  animation-duration: 4.6s;
  animation-delay: 2s;
  animation-iteration-count: 3;
  animation-direction: alternate;
  animation-fill-mode: both;
  animation-timing-function: linear;
}
.vp-failover__orb { animation-name: vp-fo-orb; }
.vp-failover__trail { animation-name: vp-fo-trail; }
.vp-failover__face--from { animation-name: vp-fo-from; animation-timing-function: ease-in-out; }
.vp-failover__face--to { animation-name: vp-fo-to; animation-timing-function: ease-in-out; }
}
@keyframes vp-fo-from {
  0%, 16% { opacity: 1; }
  40%, 100% { opacity: 0.14; }
}
@keyframes vp-fo-to {
  0%, 46% { opacity: 0.14; }
  62%, 100% { opacity: 1; }
}
@keyframes vp-fo-orb {
  0% { transform: translate(190.1px, 159px); }
  14.00% { transform: translate(190.1px, 159.0px); }
  16.62% { transform: translate(192.4px, 157.0px); }
  19.25% { transform: translate(199.2px, 151.2px); }
  21.88% { transform: translate(210.7px, 142.2px); }
  24.50% { transform: translate(226.9px, 131.0px); }
  27.12% { transform: translate(247.7px, 119.3px); }
  29.75% { transform: translate(273.0px, 109.2px); }
  32.38% { transform: translate(301.9px, 103.0px); }
  35.00% { transform: translate(332.6px, 102.8px); }
  37.62% { transform: translate(362.8px, 109.0px); }
  40.25% { transform: translate(390.2px, 120.1px); }
  42.88% { transform: translate(413.8px, 133.8px); }
  45.50% { transform: translate(433.1px, 147.8px); }
  48.12% { transform: translate(448.1px, 160.5px); }
  50.75% { transform: translate(458.7px, 170.5px); }
  53.38% { transform: translate(465.1px, 176.8px); }
  56.00% { transform: translate(467.2px, 179.0px); }
  100% { transform: translate(467.2px, 179px); }
}
@keyframes vp-fo-trail {
  0% { stroke-dashoffset: 0.24; }
  14.00% { stroke-dashoffset: 0.240; }
  16.62% { stroke-dashoffset: 0.230; }
  19.25% { stroke-dashoffset: 0.202; }
  21.88% { stroke-dashoffset: 0.156; }
  24.50% { stroke-dashoffset: 0.094; }
  27.12% { stroke-dashoffset: 0.018; }
  29.75% { stroke-dashoffset: -0.069; }
  32.38% { stroke-dashoffset: -0.162; }
  35.00% { stroke-dashoffset: -0.260; }
  37.62% { stroke-dashoffset: -0.358; }
  40.25% { stroke-dashoffset: -0.451; }
  42.88% { stroke-dashoffset: -0.538; }
  45.50% { stroke-dashoffset: -0.614; }
  48.12% { stroke-dashoffset: -0.676; }
  50.75% { stroke-dashoffset: -0.722; }
  53.38% { stroke-dashoffset: -0.750; }
  56.00% { stroke-dashoffset: -0.760; }
  64%, 100% { stroke-dashoffset: -1; }
}

/* Reseller: lines fan out from the one panel to every account, which lights as its line arrives;
   a light runs out along them twice more, then all rests. */
.vp-fan__lines path,
.vp-fan__pulses path {
  fill: none;
  stroke-linecap: round;
}
.vp-fan__lines path {
  stroke: rgb(110 155 255 / 0.5);
  stroke-width: 1;
}
.vp-fan__pulses path {
  stroke: #dce7ff;
  stroke-width: 1.8;
  stroke-dasharray: 0.08 2;
  stroke-dashoffset: 0.08;
}
.vp-fan__tiles polygon {
  fill: rgb(110 155 255 / 0.5);
  stroke: rgb(207 224 255 / 0.85);
  stroke-width: 0.8;
  opacity: 0.6;
}
@media (prefers-reduced-motion: no-preference) {
.vp-fan__lines path {
  stroke-dasharray: 1 1;
  animation: vp-draw 0.9s var(--v2-ease-out) both;
  animation-delay: calc(1.2s + var(--i) * 70ms);
}
.vp-fan__tiles polygon {
  animation: vp-tile-lit 1.4s ease-out both;
  animation-delay: calc(1.7s + var(--i) * 70ms);
}
.vp-fan__pulses path {
  animation: vp-pulse 1.5s var(--v2-ease-io) 2 both;
  animation-delay: calc(3.4s + var(--i) * 60ms);
}
}
@keyframes vp-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes vp-tile-lit {
  from { opacity: 0; }
  30% { opacity: 1; }
  to { opacity: 0.6; }
}
@keyframes vp-pulse {
  from { stroke-dashoffset: 0.08; }
  to { stroke-dashoffset: -1; }
}

/* ── Overview: Apple tiles on the grey page. ── */
.product-page .product-overview {
  background-color: var(--color-surface);
  padding-top: 6rem;
  padding-bottom: 6rem;
}
@media (min-width: 1024px) {
.product-page .product-overview {
  padding-top: 8rem;
  padding-bottom: 8rem;
}
}
.product-page .section-head {
  max-width: 52rem;
}

/* Features: a bento of six, the first and the last tile wide; on a phone the four small tiles
   two to a row. */
.product-page .product-features {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.product-page .product-features__item:first-child,
.product-page .product-features__item:last-child {
  grid-column: span 2;
}
@media (min-width: 640px) {
.product-page .product-features {
  gap: 1rem;
}
}
@media (min-width: 1024px) {
.product-page .product-features {
  margin-top: 4.5rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.product-page .product-features__item {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 12rem;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  overflow: hidden;
  border-radius: 20px;
  background-color: var(--v2-tile);
  padding: 1.75rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.45s var(--v2-ease), box-shadow 0.3s ease;
}
@media (min-width: 768px) {
.product-page .product-features__item {
  min-height: 17rem;
  border-radius: var(--v2-radius-tile);
  padding: 2.25rem;
}
}
.product-page .product-features__badge {
  display: inline-grid;
  height: 3rem;
  width: 3rem;
  place-items: center;
  border-radius: 14px;
  background-image: linear-gradient(140deg, #3d7bff 0%, #2948ff 55%, #7c4dff 100%);
  box-shadow: 0 10px 24px -10px rgb(var(--glow-blue) / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.25);
}
.product-page .product-features__icon {
  font-size: 26px;
  color: #ffffff;
}
.product-page .product-features__copy {
  max-width: 30rem;
}
.product-page .product-features__item .label-strong {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.1rem + 0.6vw, 1.75rem);
  line-height: 1.14;
  letter-spacing: -0.022em;
  font-weight: 700;
}
.product-page .product-features__item .desc-md {
  margin-top: 0.5rem;
  font-size: 17px;
  line-height: 1.45;
  letter-spacing: -0.016em;
  color: var(--color-tertiary);
}
/* A wide tile's title is larger, and its icon stands huge and faint behind it. */
.product-page .product-features__ghost {
  display: none;
}
@media (min-width: 640px) {
.product-page .product-features__item:is(:first-child, :last-child) .label-strong {
  font-size: clamp(1.75rem, 1.2rem + 1.3vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.028em;
}
.product-page .product-features__item:is(:first-child, :last-child) .product-features__copy {
  max-width: calc(100% - 9rem);
}
.product-page .product-features__item:is(:first-child, :last-child) .product-features__ghost {
  position: absolute;
  top: 50%;
  right: clamp(1.5rem, 4vw, 3.5rem);
  z-index: -1;
  display: block;
  width: auto;
  overflow: visible;
  translate: 0 -50%;
  font-size: clamp(8rem, 5rem + 6vw, 11rem);
  line-height: 1;
  font-variation-settings: 'wght' 200;
  background-image: linear-gradient(160deg, rgb(var(--glow-blue) / 0.2) 10%, rgb(var(--glow-violet) / 0.04) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
}
:root[data-theme='dark'] .product-page .product-features__item:last-child .product-features__ghost {
  background-image: linear-gradient(160deg, rgb(110 155 255 / 0.3) 10%, rgb(124 77 255 / 0.06) 85%);
}
/* The first tile is lit: a small scene of its own, in both themes. */
.product-page .product-features__item:first-child {
  --color-on-surface: #ffffff;
  --color-tertiary: #c7c7cc;
  background-color: #000000;
  background-image:
    radial-gradient(ellipse 70% 90% at 85% 110%, rgb(var(--glow-blue) / 0.75) 0%, rgb(var(--glow-blue) / 0.22) 42%, transparent 72%),
    radial-gradient(ellipse 50% 60% at 100% 0%, rgb(var(--glow-violet) / 0.25) 0%, transparent 70%);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06), 0 30px 60px -30px rgb(var(--glow-blue) / 0.55);
}
/* After hours the lit tile is a black stage on the charcoal page: a top edge of light and a fine
   ring keep its shape. */
:root[data-theme='dark'] .product-page .product-features__item:first-child,
:root[data-theme='dark'] .product-page .product-specs > .card-muted:first-child {
  box-shadow: inset 0 1px 0 rgb(170 195 255 / 0.3), inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 30px 60px -30px rgb(var(--glow-blue) / 0.55);
}
.product-page .product-features__item:first-child .product-features__ghost {
  background-image: linear-gradient(160deg, rgb(170 195 255 / 0.4) 10%, rgb(110 155 255 / 0.05) 85%);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.product-page :is(.product-features__item, .product-specs > .card-muted, .platform__way):hover {
  transform: translateY(-4px);
}
}

/* Specifications (Dedicated Servers): five figures, large, the first tile lit; two to a row on a
   phone. Beside them on a wide screen (above them on a tablet) the server, taken apart. */
.product-page .product-specs {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.product-page .product-specs > .card-muted:first-child {
  grid-column: span 2;
}
@media (min-width: 640px) {
.product-page .product-specs {
  gap: 1rem;
}
}
@media (min-width: 1024px) {
.product-page .product-specs {
  margin-top: 4.5rem;
  grid-template-columns: minmax(0, 1.45fr) repeat(2, minmax(0, 1fr));
}
}
.product-page .product-specs > .card-muted {
  position: relative;
  display: flex;
  min-height: 11rem;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  overflow: hidden;
  container-type: inline-size;
  border-radius: 20px;
  background-color: var(--v2-tile);
  padding: 1.75rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.45s var(--v2-ease), box-shadow 0.3s ease;
}
@media (min-width: 768px) {
.product-page .product-specs > .card-muted {
  min-height: 13rem;
  border-radius: var(--v2-radius-tile);
  padding: 2.25rem;
}
}
@media (max-width: 639.98px) {
.product-page .product-specs > .card-muted {
  min-height: 8.5rem;
  gap: 1.25rem;
  padding: 1.25rem;
}
.product-page .product-specs > .card-muted .heading-sm-block {
  font-size: min(2rem, 17cqi);
}
}
.product-page .product-specs .caption-block {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--color-tertiary);
}
.product-page .product-specs .heading-sm-block {
  font-size: min(3.25rem, 14cqi);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 700;
  background-image: linear-gradient(180deg, #1d1d1f 35%, #4b4b57 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.06em;
}
:root[data-theme='dark'] .product-page .product-specs .heading-sm-block {
  background-image: linear-gradient(180deg, #ffffff 35%, #a9bdf5 100%);
}
.product-page .product-specs > .card-muted:first-child {
  --color-tertiary: #c7c7cc;
  background-color: #000000;
  background-image:
    radial-gradient(ellipse 60% 100% at 90% 120%, rgb(var(--glow-blue) / 0.75) 0%, rgb(var(--glow-blue) / 0.2) 45%, transparent 75%),
    radial-gradient(ellipse 45% 60% at 0% 0%, rgb(var(--glow-violet) / 0.22) 0%, transparent 70%);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06), 0 30px 60px -30px rgb(var(--glow-blue) / 0.55);
}
.product-page .product-specs > .card-muted:first-child .heading-sm-block,
:root[data-theme='dark'] .product-page .product-specs > .card-muted:first-child .heading-sm-block {
  font-size: min(4.5rem, 14cqi);
  background-image: linear-gradient(180deg, #ffffff 35%, #a9bdf5 100%);
}

/* More ways to build: the homepage's two wide tiles. */
.product-page .platform__ways-label {
  margin-top: 4.5rem;
  text-align: center;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-tertiary);
}
.product-page .platform__ways {
  margin-top: 1.25rem;
  gap: 1rem;
}
.product-page .platform__way {
  border-radius: 20px;
  background-color: var(--v2-tile);
  padding: 1.75rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.45s var(--v2-ease), box-shadow 0.3s ease;
}
@media (min-width: 768px) {
.product-page .platform__way {
  border-radius: var(--v2-radius-tile);
  padding: 2rem;
}
}
.product-page .platform__way:hover {
  background-color: var(--v2-tile);
}
.product-page .platform__way .icon-tile {
  height: 2.75rem;
  width: 2.75rem;
  border-radius: 12px;
  background-color: rgb(0 113 227 / 0.08);
  color: var(--color-primary);
  box-shadow: none;
}
:root[data-theme='dark'] .product-page .platform__way .icon-tile {
  background-color: rgb(41 151 255 / 0.14);
}
.product-page .platform__way .heading-sm-block {
  font-size: 21px;
  line-height: 26px;
  letter-spacing: -0.02em;
  font-weight: 600;
}
.product-page .platform__way-desc {
  font-size: 15px;
  line-height: 21px;
}
.product-page .platform__way-link {
  font-size: 15px;
  font-weight: 600;
}

/* ── The plans: a scene; glass cards, the recommended one ringed in light. ── */
.product-page .product-pricing {
  --v2-glow-y: 58%;
  overflow: clip;
  padding-top: 6rem;
  padding-bottom: 6rem;
}
@media (min-width: 1024px) {
.product-page .product-pricing {
  padding-top: 8rem;
  padding-bottom: 9rem;
}
}
/* The scene's floor of light fades out before the edge, so in the dark theme no band shows where
   the scene ends. */
.product-page .product-pricing::before {
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
}
.product-page .product-plan__billing {
  margin-top: 2.5rem;
}
.product-page .product-plan__billing + .product-plans {
  margin-top: 2.5rem;
}
.product-page .product-plans {
  gap: 1rem;
}

/* The currency and the billing period: translucent pills; the chosen period white. */
.product-pricing .currency__button,
.product-pricing .plans__billing {
  border-radius: 980px;
  background-color: rgb(255 255 255 / 0.08);
  padding: 4px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
}
.product-pricing .currency__button:hover,
.product-pricing .currency__button[aria-expanded='true'] {
  background-color: rgb(255 255 255 / 0.14);
}
.product-pricing .currency__value {
  border-radius: 980px;
  background-color: rgb(255 255 255 / 0.1);
  padding: 8px 12px 8px 16px;
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  color: #ffffff;
  box-shadow: none;
}
.product-pricing .currency__chevron {
  color: #d2d2d7;
}
.product-pricing :is(.plans__billing-option, .plans__billing-option-active) {
  border-radius: 980px;
  padding: 8px 16px;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: -0.01em;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.product-pricing .plans__billing-option {
  color: #d2d2d7;
}
.product-pricing .plans__billing-option:hover {
  color: #ffffff;
  background-color: rgb(255 255 255 / 0.08);
}
.product-pricing .plans__billing-option-active {
  background-color: #f5f5f7;
  color: #000000;
  font-weight: 600;
  box-shadow: 0 4px 14px -4px rgb(0 0 0 / 0.6);
}
.product-pricing :is(.plans__billing-option, .plans__billing-option-active):focus-visible {
  outline: 2px solid #6e9bff;
  outline-offset: 2px;
}

/* Six periods (Reseller) don't fit one row on a phone: three to a row, in a rounded panel. */
@media (max-width: 639.98px) {
.product-pricing .plans__billing:has(> :nth-child(5)) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-radius: 22px;
}
}

/* The cards. */
.product-pricing :is(.card-column, .plans__card-featured) {
  border-radius: 24px;
  background-color: rgb(22 22 26 / 0.72);
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0) 60%);
  padding: 1.75rem;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.09), 0 30px 60px -30px rgb(0 0 0 / 0.9);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  transition: transform 0.45s var(--v2-ease), box-shadow 0.3s ease, background-color 0.3s ease;
}
.product-pricing .plans__card-featured {
  background-color: rgb(16 22 48 / 0.8);
  background-image: linear-gradient(180deg, rgb(var(--glow-blue) / 0.3), rgb(var(--glow-blue) / 0) 55%);
  box-shadow: 0 40px 90px -36px rgb(var(--glow-blue) / 0.95), 0 30px 60px -30px rgb(0 0 0 / 0.9);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.product-pricing :is(.card-column, .plans__card-featured):hover {
  transform: translateY(-6px);
}
}
.product-pricing .card-column:hover {
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16), 0 36px 70px -30px rgb(0 0 0 / 0.95);
}
.product-pricing .plans__name {
  margin-top: 0.375rem;
  font-size: 21px;
  line-height: 26px;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: #ffffff;
}
.product-pricing .overline {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #a1a1a6;
}
.product-pricing .plans__price-row {
  margin-top: 1.25rem;
  margin-bottom: 0.25rem;
}
.product-pricing .plans__price-row .display-text {
  font-weight: 700;
  letter-spacing: -0.035em;
  color: #ffffff;
}
.product-pricing .plans__price-row .note {
  color: #a1a1a6;
}
.product-pricing .plans__desc {
  margin-bottom: 1.25rem;
  font-size: 13px;
  line-height: 18px;
  color: #a1a1a6;
}
.product-pricing .plans__features {
  border-top: 1px solid rgb(255 255 255 / 0.08);
  padding-top: 1.25rem;
  font-size: 14px;
  line-height: 19px;
  color: #d2d2d7;
}
.product-pricing .plans__features > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0.75rem;
}
.product-pricing .icon-18-accent {
  color: #6e9bff;
}
.product-pricing .plans__card-featured .eyebrow {
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.05em;
  color: #9db8ff;
}
.product-pricing .plans__badge {
  border-radius: 980px;
  background-color: rgb(110 155 255 / 0.16);
  padding: 2px 8px;
  font-size: 11px;
  line-height: 14px;
  white-space: nowrap;
  font-weight: 600;
  color: #cfdcff;
}
.product-pricing :is(.plans__select, .plans__select-primary) {
  margin-top: 2rem;
  border-radius: 980px;
  padding-top: 0.8125rem;
  padding-bottom: 0.8125rem;
  font-size: 15px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: -0.012em;
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.product-pricing .plans__select {
  background-color: rgb(255 255 255 / 0.1);
  color: #ffffff;
  box-shadow: none;
}
.product-pricing .plans__select:hover {
  background-color: rgb(255 255 255 / 0.18);
}
.product-pricing .plans__select-primary {
  background-color: var(--color-primary-container);
  color: #ffffff;
  box-shadow: 0 10px 30px -10px rgb(0 113 227 / 0.9);
}
.product-pricing .plans__select-primary:hover {
  background-color: var(--color-primary-solid);
}
.product-pricing :is(.plans__select, .plans__select-primary):focus-visible {
  outline: 2px solid #6e9bff;
  outline-offset: 2px;
}

/* The ring of light around a recommended card (its old top bar, now its edge): on the product
   pages and the Pricing page alike. It turns slowly; with less motion it holds still. */
:is(.product-page, .pricing-page) .plans__featured-bar {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: auto;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--vp-angle), rgb(110 155 255 / 0.35) 0deg, #6e9bff 60deg, #00aaff 110deg, rgb(124 77 255 / 0.9) 170deg, rgb(110 155 255 / 0.35) 230deg, rgb(110 155 255 / 0.35) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
/* It starts turning once its card has risen into view (.is-in, motion.js), not at page load, so
   a ring far down the page still turns when you get to it. */
@media (prefers-reduced-motion: no-preference) {
:is(.product-page, .pricing-page) .is-in > .plans__featured-bar {
  animation: vp-turn 7s linear 0.6s 3;
}
}

/* The links under the grid: quiet glass chips. */
.product-pricing .plans__more {
  margin-top: 3rem;
  gap: 0.625rem;
}
.product-pricing .plans__more .link-arrow {
  border-radius: 980px;
  background-color: rgb(255 255 255 / 0.06);
  padding: 0.625rem 1.125rem;
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  color: #d2d2d7;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
  transition: background-color 0.25s ease, color 0.25s ease;
}
.product-pricing .plans__more .link-arrow:hover {
  background-color: rgb(255 255 255 / 0.12);
  color: #ffffff;
  text-decoration: none;
}
.product-pricing .plans__more .link-arrow .material-symbols-outlined {
  color: #6e9bff;
}
.product-pricing .plans__more .link-arrow:focus-visible {
  outline: 2px solid #6e9bff;
  outline-offset: 2px;
}

/* Private Cloud (Dedicated Servers): a pane of glass, lit from below. */
.product-page .product-cta {
  position: relative;
  isolation: isolate;
  margin-top: 6rem;
  overflow: hidden;
  border-radius: 20px;
  background-color: rgb(14 14 18 / 0.7);
  padding: 4rem 1.5rem;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.09), 0 40px 100px -40px rgb(var(--glow-violet) / 0.6);
}
.product-page .product-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 80% at 50% 120%, rgb(var(--glow-violet) / 0.55) 0%, rgb(var(--glow-blue) / 0.2) 45%, transparent 75%);
}
@media (min-width: 768px) {
.product-page .product-cta {
  margin-top: 8rem;
  border-radius: var(--v2-radius-tile);
  padding: 5.5rem 3rem;
}
}
.product-page .product-cta .section-intro {
  color: #b4b4bb;
}
.product-page .product-actions {
  margin-top: 2.5rem;
}

/* ── FAQ (product pages and Pricing): the questions in one tile on the grey page. ── */
:is(.product-page, .pricing-page) #faq {
  background-color: var(--color-surface);
  padding-top: 6rem;
  padding-bottom: 6rem;
}
@media (min-width: 1024px) {
:is(.product-page, .pricing-page) #faq {
  padding-top: 8rem;
  padding-bottom: 8rem;
}
}
:is(.product-page, .pricing-page) #faq .faq {
  max-width: 56rem;
  margin-top: 3rem;
  border-top: 0;
  border-radius: 20px;
  background-color: var(--v2-tile);
  padding: 0.25rem 1.25rem;
  box-shadow: var(--shadow-card);
}
@media (min-width: 768px) {
:is(.product-page, .pricing-page) #faq .faq {
  border-radius: var(--v2-radius-tile);
  padding: 0.5rem 2.5rem;
}
}
:is(.product-page, .pricing-page) #faq .faq__item {
  border-color: var(--color-hairline);
}
:is(.product-page, .pricing-page) #faq .faq__item:last-child {
  border-bottom-width: 0;
}
:is(.product-page, .pricing-page) #faq .faq__question {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  font-size: 19px;
  line-height: 25px;
  letter-spacing: -0.02em;
}
:is(.product-page, .pricing-page) #faq .faq__question:focus-visible {
  outline: 2px solid var(--color-primary-container);
  outline-offset: 2px;
  border-radius: 6px;
}
:is(.product-page, .pricing-page) #faq .faq__chevron {
  display: inline-grid;
  height: 2rem;
  width: 2rem;
  place-items: center;
  border-radius: 50%;
  background-color: var(--color-surface-container-low);
  font-size: 20px;
  color: var(--color-on-surface-variant);
  transition: transform 0.35s var(--v2-ease), background-color 0.25s ease;
}
:root[data-theme='dark'] :is(.product-page, .pricing-page) #faq .faq__chevron {
  background-color: #232327;
}
:is(.product-page, .pricing-page) #faq .faq__answer {
  max-width: 46rem;
  padding-bottom: 1.5rem;
  font-size: 17px;
  line-height: 1.5;
}
@media (prefers-reduced-motion: reduce) {
:is(.product-page, .pricing-page) #faq .faq__chevron {
  transition: none;
}
}

/* A hyphenated word in a headline stays whole ("bare-metal", "pre-installed"). */
:is(.product-page, .pricing-page) .vp-nowrap {
  white-space: nowrap;
}

/* ══ Pricing page ══════════════════════════════════════════════════════════════════════════ */

/* ── The stage: the heading and the category links in one scene, over a rising horizon. ── */
.pricing-page .pricing-hero {
  --v2-glow-y: 26%;
  --vp-rise: clamp(3.5rem, 2rem + 5vw, 7.5rem);
}
.site-main > .site-main__sections > .pricing-hero:first-child {
  padding-top: calc(3.5rem + 4.5rem);
  padding-bottom: calc(var(--vp-rise) + 4rem);
}
@media (min-width: 768px) {
.site-main > .site-main__sections > .pricing-hero:first-child {
  padding-top: calc(3.5rem + 6rem);
  padding-bottom: calc(var(--vp-rise) + 5rem);
}
}
.pricing-hero .home-hero__inner {
  max-width: 60rem;
}
.pricing-page .pricing-hero .home-hero__title {
  font-size: clamp(2.625rem, 1rem + 5.2vw, 5.5rem);
  line-height: 1.04;
  letter-spacing: -0.036em;
  font-weight: 700;
  background-image: linear-gradient(180deg, #ffffff 30%, #b9cbff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.06em;
}
.pricing-hero .home-hero__lead {
  margin-top: 1.25rem;
  max-width: 40rem;
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);
  line-height: 1.38;
  letter-spacing: -0.014em;
  color: #a1a1a6;
}

/* The category links: translucent pills on the stage. They only jump to a category, so none is
   ever shown as selected: under the pointer a pill brightens, a press dims it, focus rings it. */
.pricing-page .pricing-nav {
  margin-top: 2.75rem;
  border-bottom-width: 0;
  background-color: transparent;
  padding: 0;
}
.pricing-page .pricing-nav__link {
  border-color: rgb(255 255 255 / 0.1);
  background-color: rgb(255 255 255 / 0.07);
  color: #f5f5f7;
  box-shadow: none;
}
@media (hover: hover) {
.pricing-page .pricing-nav__link:hover {
  border-color: rgb(255 255 255 / 0.22);
  background-color: rgb(255 255 255 / 0.14);
  box-shadow: none;
}
}
.pricing-page .pricing-nav__link:active {
  background-color: rgb(255 255 255 / 0.04);
  box-shadow: none;
}
.pricing-page .pricing-nav__link:focus-visible {
  outline: 2px solid #6e9bff;
  outline-offset: 2px;
}

/* ── The categories: hosting on the page (Apple), servers in scenes (each its own light). ── */
.pricing-page .pricing-band {
  background-color: var(--color-surface);
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
@media (min-width: 768px) {
.pricing-page .pricing-band {
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}
}
@media (min-width: 1024px) {
.pricing-page .pricing-band {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
}
.pricing-page .pricing-band--scene {
  overflow: clip;
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
  --color-fill-soft: rgb(255 255 255 / 0.06);
  --color-fill-hover: rgb(255 255 255 / 0.12);
}
@media (min-width: 768px) {
.pricing-page .pricing-band--scene {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
}
/* Each scene's light fades out before its edges, so one scene flows into the next. */
.pricing-page .pricing-band--scene::before {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 80%, transparent 100%);
}
.pricing-page .pricing-band--blue {
  --v2-glow-x: 18%;
  --v2-glow-y: 32%;
}
.pricing-page .pricing-band--cyan {
  --v2-glow: var(--glow-cyan);
  --v2-glow-x: 78%;
  --v2-glow-y: 50%;
}
.pricing-page .pricing-band--violet {
  --v2-glow: var(--glow-violet);
  --v2-glow-x: 40%;
  --v2-glow-y: 40%;
}

/* A category's heading: Apple's section type, the line under it in grey. */
.pricing-page .pricing-band .section-title-compact {
  font-size: clamp(1.875rem, 1.3rem + 1.5vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.028em;
  font-weight: 700;
}
.pricing-page .pricing-band .plans__head .desc-md {
  margin-top: 0.625rem;
  max-width: 40rem;
  font-size: 17px;
  line-height: 1.45;
  letter-spacing: -0.016em;
}
.pricing-page .pricing-band .plans__head {
  margin-bottom: 2rem;
}
@media (min-width: 768px) {
.pricing-page .pricing-band .plans__head {
  margin-bottom: 2.5rem;
}
}

/* The currency and the billing period: Apple's segmented control, the chosen period a raised
   white pill; on the dark ground translucent, the chosen period white. Sizes as before. */
.pricing-page .currency__button,
.pricing-page .plans__billing {
  border-radius: 980px;
  background-color: rgb(0 0 0 / 0.055);
}
.pricing-page .currency__button:hover,
.pricing-page .currency__button[aria-expanded='true'] {
  background-color: rgb(0 0 0 / 0.09);
}
.pricing-page .currency__value {
  border-radius: 980px;
  background-color: #ffffff;
  color: #1d1d1f;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 2px 8px -2px rgb(0 0 0 / 0.12);
}
.pricing-page :is(.plans__billing-option, .plans__billing-option-active) {
  border-radius: 980px;
}
.pricing-page .plans__billing-option {
  background-color: transparent;
  color: #424245;
}
.pricing-page .plans__billing-option:hover {
  background-color: rgb(0 0 0 / 0.05);
  color: #1d1d1f;
}
.pricing-page .plans__billing-option-active {
  background-color: #ffffff;
  color: #1d1d1f;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 2px 8px -2px rgb(0 0 0 / 0.12);
}
.pricing-page .plans__billing:not(.plans__billing-fixed):has(> :nth-child(5)) {
  border-radius: 20px;
}
@media (min-width: 640px) {
.pricing-page .plans__billing:not(.plans__billing-fixed):has(> :nth-child(5)) {
  border-radius: 980px;
}
}
:root[data-theme='dark'] .pricing-page :is(.currency__button, .plans__billing),
.pricing-page .pricing-band--scene :is(.currency__button, .plans__billing) {
  background-color: rgb(255 255 255 / 0.08);
}
:root[data-theme='dark'] .pricing-page .currency__button:is(:hover, [aria-expanded='true']),
.pricing-page .pricing-band--scene .currency__button:is(:hover, [aria-expanded='true']) {
  background-color: rgb(255 255 255 / 0.14);
}
:root[data-theme='dark'] .pricing-page .currency__value,
.pricing-page .pricing-band--scene .currency__value {
  background-color: rgb(255 255 255 / 0.12);
  color: #ffffff;
  box-shadow: none;
}
:root[data-theme='dark'] .pricing-page .plans__billing-option,
.pricing-page .pricing-band--scene .plans__billing-option {
  color: #d2d2d7;
}
:root[data-theme='dark'] .pricing-page .plans__billing-option:hover,
.pricing-page .pricing-band--scene .plans__billing-option:hover {
  background-color: rgb(255 255 255 / 0.08);
  color: #ffffff;
}
:root[data-theme='dark'] .pricing-page .plans__billing-option-active,
.pricing-page .pricing-band--scene .plans__billing-option-active {
  background-color: #f5f5f7;
  color: #000000;
  box-shadow: 0 4px 14px -4px rgb(0 0 0 / 0.6);
}

/* ── The plan cards: the same size as before; only their colours, corners, shadows and the
   ring of light change. The hover lift (site.css) stays. ── */
.pricing-page {
  --plan-shadow: 0 0 0 1px rgb(0 0 0 / 0.04), 0 2px 6px rgb(0 0 0 / 0.03), 0 20px 44px -26px rgb(0 0 0 / 0.2);
  --plan-shadow-hover: 0 0 0 1px rgb(0 0 0 / 0.06), 0 4px 10px rgb(0 0 0 / 0.04), 0 30px 56px -26px rgb(0 0 0 / 0.3);
  --plan-shadow-featured: 0 2px 6px rgb(0 0 0 / 0.04), 0 26px 56px -26px rgb(0 72 200 / 0.45);
  --plan-shadow-featured-hover: 0 4px 10px rgb(0 0 0 / 0.05), 0 34px 70px -28px rgb(0 72 200 / 0.55);
  --plan-tint-featured: rgb(0 113 227 / 0.06);
}
:root[data-theme='dark'] .pricing-page {
  --plan-shadow: 0 0 0 1px rgb(255 255 255 / 0.07), 0 20px 44px -24px rgb(0 0 0 / 0.9);
  --plan-shadow-hover: 0 0 0 1px rgb(255 255 255 / 0.14), 0 28px 56px -24px rgb(0 0 0 / 0.95);
  --plan-shadow-featured: 0 26px 60px -26px rgb(41 72 255 / 0.6), 0 20px 44px -24px rgb(0 0 0 / 0.9);
  --plan-shadow-featured-hover: 0 34px 76px -28px rgb(41 72 255 / 0.75), 0 28px 56px -24px rgb(0 0 0 / 0.95);
  --plan-tint-featured: rgb(var(--glow-blue) / 0.22);
}
.pricing-page .pricing-band--scene,
:root[data-theme='dark'] .pricing-page .pricing-band--scene {
  --plan-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.09), 0 30px 60px -30px rgb(0 0 0 / 0.9);
  --plan-shadow-hover: inset 0 0 0 1px rgb(255 255 255 / 0.18), 0 36px 70px -30px rgb(0 0 0 / 0.95);
  --plan-shadow-featured: 0 40px 90px -36px rgb(var(--glow-blue) / 0.95), 0 30px 60px -30px rgb(0 0 0 / 0.9);
  --plan-shadow-featured-hover: 0 46px 100px -36px rgb(var(--glow-blue) / 1), 0 34px 66px -30px rgb(0 0 0 / 0.95);
  --plan-tint-featured: rgb(var(--glow-blue) / 0.3);
}
.pricing-page .card-column,
.pricing-page .plans__card-featured {
  border-radius: 22px;
  background-color: var(--v2-tile);
}
.pricing-page .pricing-band--scene :is(.card-column, .plans__card-featured) {
  background-color: rgb(22 22 26 / 0.74);
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0) 60%);
}
.pricing-page .plans__card-featured,
.pricing-page .pricing-band--scene .plans__card-featured {
  background-image: linear-gradient(180deg, var(--plan-tint-featured), transparent 11rem);
}
.pricing-page .pricing-band--scene .plans__card-featured {
  background-color: rgb(16 22 48 / 0.8);
}
.pricing-page .plans__badge {
  border-radius: 980px;
  background-color: rgb(0 113 227 / 0.1);
  color: #0066cc;
}
.pricing-page .pricing-band--alt .plans__badge {
  color: #0058b0;
}
:root[data-theme='dark'] .pricing-page .plans__badge,
.pricing-page .pricing-band--scene .plans__badge {
  background-color: rgb(110 155 255 / 0.16);
  color: #cfdcff;
}
:root[data-theme='dark'] .pricing-page .plans__features,
.pricing-page .pricing-band--scene .plans__features {
  color: #d2d2d7;
}

/* The buttons: pills. The recommended plan's is filled blue; the others are a blue outline that
   fills on hover (by day), or a translucent white pill (after hours and in the scenes). */
.pricing-page :is(.plans__select, .plans__select-primary) {
  border-radius: 980px;
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.pricing-page .plans__select {
  background-color: transparent;
  color: #0066cc;
  box-shadow: inset 0 0 0 1px rgb(0 102 204 / 0.55);
}
@media (hover: hover) {
.pricing-page .plans__select:hover {
  background-color: #0071e3;
  color: #ffffff;
  box-shadow: inset 0 0 0 1px #0071e3;
}
}
.pricing-page .plans__select-primary {
  background-color: #0071e3;
  color: #ffffff;
  box-shadow: 0 8px 22px -10px rgb(0 113 227 / 0.8);
}
.pricing-page .plans__select-primary:hover {
  background-color: #0077ed;
}
:root[data-theme='dark'] .pricing-page .plans__select,
.pricing-page .pricing-band--scene .plans__select {
  background-color: rgb(255 255 255 / 0.1);
  color: #ffffff;
  box-shadow: none;
}
@media (hover: hover) {
:root[data-theme='dark'] .pricing-page .plans__select:hover,
.pricing-page .pricing-band--scene .plans__select:hover {
  background-color: rgb(255 255 255 / 0.18);
  color: #ffffff;
  box-shadow: none;
}
}
.pricing-page :is(.plans__select, .plans__select-primary):focus-visible {
  outline: 2px solid var(--color-primary-container);
  outline-offset: 2px;
}
:root[data-theme='dark'] .pricing-page :is(.plans__select, .plans__select-primary):focus-visible,
.pricing-page .pricing-band--scene :is(.plans__select, .plans__select-primary):focus-visible {
  outline-color: #6e9bff;
}

/* The links under each grid. */
.pricing-page .pricing-band .plans__more .link-arrow {
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
}

/* The horizon's halo reaches past the stage's lower corners; the last stretch of the stage fades
   to black, so after hours (black below) the stage ends without a line. */
:is(.product-page, .pricing-page) .home-hero::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  height: min(14%, 7rem);
  pointer-events: none;
  background: linear-gradient(180deg, rgb(0 0 0 / 0), #000000);
}

/* ══ v3: seams, rhythm and the server scenes ═══════════════════════════════════════════════ */

/* The seam into a plans scene (a product page's plans; the first server scene on Pricing): the
   rim of the horizon again, a wide arc of light along the scene's top edge, brightest in the
   middle and gone at the sides (includes/products-art.php). It settles into place as the scene
   arrives (--v2-in). */
.vp-rim {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: -1;
  height: clamp(7rem, 13vw, 12.5rem);
  pointer-events: none;
  translate: 0 calc((1 - var(--v2-in, 1)) * 2rem);
  opacity: calc(0.25 + var(--v2-in, 1) * 0.75);
  will-change: translate, opacity;
}
.vp-rim svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Pricing: the hosting categories alternate, as Apple's pages do. By day grey and white bands,
   the cards grey on the white ones; after hours the page's charcoal and a deeper one, each band
   opening on a fine line of light with a soft light over its heading, so no two run together. */
.pricing-page .pricing-band--alt {
  background-color: #ffffff;
}
.pricing-page .pricing-band--alt :is(.card-column, .plans__card-featured) {
  background-color: #f5f5f7;
}
:root[data-theme='dark'] .pricing-page .pricing-band--alt {
  background-color: #0c0c0e;
}
:root[data-theme='dark'] .pricing-page .pricing-band--alt :is(.card-column, .plans__card-featured) {
  background-color: var(--v2-tile);
}
:root[data-theme='dark'] .pricing-page .pricing-band:not(.scene) {
  background-image:
    linear-gradient(90deg, rgb(110 155 255 / 0) 4%, rgb(110 155 255 / 0.2) 50%, rgb(110 155 255 / 0) 96%),
    radial-gradient(48rem 20rem at 18% 0%, rgb(var(--glow-blue) / 0.1), rgb(var(--glow-blue) / 0) 70%);
  background-size: 100% 1px, 100% 100%;
  background-repeat: no-repeat;
}

/* KVM VPS: sixteen cores in a row; they light as the cards rise, two, four, eight, sixteen. */
.vp-cpu {
  display: flex;
  gap: 6px;
  margin: -0.5rem 0 2rem;
}
.vp-cpu > span {
  position: relative;
  flex: 0 1 1.125rem;
  min-width: 0;
  aspect-ratio: 1;
  border-radius: 5px;
  background-color: rgb(255 255 255 / 0.04);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14);
}
.vp-cpu > span:is(:nth-child(2), :nth-child(4), :nth-child(8)) {
  margin-right: clamp(0.25rem, 1.6vw, 0.75rem);
}
.vp-cpu > span::before {
  content: '';
  position: absolute;
  inset: 30%;
  border-radius: 1.5px;
  background-color: rgb(255 255 255 / 0.12);
}
.vp-cpu > span::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(circle, #eef3ff 0 20%, rgb(110 155 255 / 0.9) 30%, rgb(47 107 255 / 0.32) 48%, rgb(47 107 255 / 0.16) 100%);
  box-shadow: inset 0 0 0 1px rgb(150 182 255 / 0.9), 0 0 14px -3px rgb(47 107 255 / 0.85);
  opacity: 0;
}
html:not(.v2-js) .vp-cpu > span::after,
.pricing-band--blue:has(.plans__grid > :nth-child(1).is-in) .vp-cpu > span:nth-child(-n + 2)::after,
.pricing-band--blue:has(.plans__grid > :nth-child(2).is-in) .vp-cpu > span:nth-child(-n + 4)::after,
.pricing-band--blue:has(.plans__grid > :nth-child(3).is-in) .vp-cpu > span:nth-child(-n + 8)::after,
.pricing-band--blue:has(.plans__grid > :nth-child(4).is-in) .vp-cpu > span::after {
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
.vp-cpu > span::after {
  transition: opacity 0.4s linear;
  transition-delay: calc(0.35s + var(--n) * 55ms);
}
}

/* VDS: beside the two cards, a chip whose cores are pinned with threads of light (four, then
   eight, as the cards rise). Only where the cards leave the room for it. */
.vp-cores {
  display: none;
}
@media (min-width: 1024px) {
.pricing-band--cyan > .container-narrow {
  position: relative;
}
.vp-cores {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 4.5rem;
  left: calc(38rem + 4rem);
  z-index: -1;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.vp-cores__chip {
  width: min(100%, 30rem);
  height: auto;
  overflow: visible;
}
}
.vp-cores__side {
  fill: #0a0b10;
  stroke: rgb(157 184 255 / 0.25);
  stroke-width: 0.8;
}
.vp-cores__side--lit {
  fill: #11141d;
}
.vp-cores__top {
  stroke: rgb(207 224 255 / 0.65);
  stroke-width: 1;
}
.vp-cores__die {
  fill: #07080c;
  stroke: rgb(157 184 255 / 0.3);
  stroke-width: 0.8;
}
.vp-core {
  fill: #141826;
  stroke: rgb(157 184 255 / 0.22);
  stroke-width: 0.7;
}
.vp-core--a,
.vp-core--b {
  transition: fill 0.5s linear, stroke 0.5s linear;
}
.vp-pin {
  opacity: 0;
}
.vp-pin line {
  stroke: rgb(130 215 255 / 0.7);
  stroke-width: 1.2;
  stroke-linecap: round;
}
.vp-pin circle {
  fill: #e3f7ff;
}
html:not(.v2-js) .vp-core--a,
html:not(.v2-js) .vp-core--b,
.pricing-band--cyan:has(.plans__grid > :nth-child(1).is-in) .vp-core--a,
.pricing-band--cyan:has(.plans__grid > :nth-child(2).is-in) .vp-core--b {
  fill: #0d6fd6;
  stroke: #9ff0ff;
}
html:not(.v2-js) .vp-pin,
.pricing-band--cyan:has(.plans__grid > :nth-child(1).is-in) .vp-pin--a,
.pricing-band--cyan:has(.plans__grid > :nth-child(2).is-in) .vp-pin--b {
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
.vp-core--a,
.vp-core--b {
  transition-delay: calc(0.4s + var(--n) * 60ms);
}
.vp-pin {
  transition: opacity 0.6s linear, translate 0.9s var(--v2-ease-out);
  transition-delay: calc(0.6s + var(--n) * 60ms);
  translate: 0 14px;
}
html:not(.v2-js) .vp-pin,
.pricing-band--cyan:has(.plans__grid > :nth-child(1).is-in) .vp-pin--a,
.pricing-band--cyan:has(.plans__grid > :nth-child(2).is-in) .vp-pin--b {
  translate: none;
}
}

/* Dedicated: the chassis stands above the heading, on the right, drifting up a little as the
   scene moves up the window. Only where there is room beside the heading. */
.vp-scene-chassis {
  display: none;
}
@media (min-width: 1024px) {
.pricing-page .pricing-band--violet {
  padding-top: 11rem;
}
.pricing-band--violet .plans__head {
  position: relative;
}
.vp-scene-chassis {
  position: absolute;
  right: -1.25rem;
  bottom: calc(100% - 2.5rem);
  display: block;
  width: 19rem;
  aspect-ratio: 1.6071;
  pointer-events: none;
  translate: 0 calc((0.5 - var(--v2-p, 0.5)) * 2.5rem);
}
.vp-scene-chassis img {
  display: block;
  width: 100%;
  height: auto;
}
}

/* Dedicated Servers: the server taken apart (includes/products-art.php). Blue lines on the white
   tile by day, lines lit in ice after hours. Each part takes its place as its tile comes into
   view, and lights while its tile is under the pointer (assets/js/v2-products.js). */
.vp-diagram {
  --dg-line: rgb(0 102 204 / 0.5);
  --dg-faint: rgb(0 0 0 / 0.16);
  --dg-fill: #ffffff;
  --dg-floor: #f5f5f7;
  --dg-lit: #0071e3;
  --dg-lit-fill: #eaf3fe;
  display: none;
  border-radius: var(--v2-radius-tile);
  background-color: var(--v2-tile);
  box-shadow: var(--shadow-card);
  pointer-events: none;
}
:root[data-theme='dark'] .vp-diagram {
  --dg-line: rgb(157 184 255 / 0.62);
  --dg-faint: rgb(255 255 255 / 0.17);
  --dg-fill: #1b1b1e;
  --dg-floor: #151518;
  --dg-lit: #9db8ff;
  --dg-lit-fill: #1f2638;
  background-image: radial-gradient(ellipse 80% 60% at 60% 45%, rgb(var(--glow-blue) / 0.12), rgb(var(--glow-blue) / 0) 70%);
}
@media (min-width: 640px) {
.product-page .product-specs > .vp-diagram {
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  place-items: center;
  padding: 2rem;
}
.vp-dg {
  width: 100%;
  max-width: 34rem;
  height: auto;
  max-height: 23rem;
}
}
@media (min-width: 1024px) {
.product-page .product-specs > .vp-diagram {
  grid-column: 1;
  grid-row: 1 / span 3;
  padding: 2.5rem 2rem;
}
.vp-dg {
  max-height: none;
}
}
.vp-dg {
  overflow: visible;
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.vp-dg :is(.vp-dg__f, .vp-dg__wall) {
  fill: var(--dg-fill);
  stroke: var(--dg-line);
  stroke-width: 1;
}
.vp-dg__floor {
  fill: var(--dg-floor);
  stroke: var(--dg-line);
  stroke-width: 1;
}
.vp-dg :is(.vp-dg__board, .vp-dg__slot, .vp-dg__bay, .vp-dg__fan, .vp-dg__trace, .vp-dg__fin, .vp-dg__lead) {
  fill: none;
  stroke: var(--dg-faint);
  stroke-width: 1;
}
.vp-dg__port {
  fill: none;
  stroke: var(--dg-line);
  stroke-width: 1;
}
.vp-dg__guide {
  stroke: var(--dg-faint);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}
.vp-dg__dot {
  fill: var(--dg-fill);
  stroke: var(--dg-line);
  stroke-width: 1.2;
}
/* the part of a tile that has just come into view or is under the pointer */
.vp-diagram[data-active='cpu'] .vp-dg__part--cpu,
.vp-diagram[data-active='mem'] .vp-dg__part--mem,
.vp-diagram[data-active='disk'] .vp-dg__part--disk,
.vp-diagram[data-active='net'] .vp-dg__part--net,
.vp-diagram[data-active='ipmi'] .vp-dg__part--ipmi {
  --dg-line: var(--dg-lit);
  --dg-faint: var(--dg-lit);
  --dg-fill: var(--dg-lit-fill);
}
.vp-diagram[data-active] .vp-dg__part :is(.vp-dg__f, .vp-dg__port, .vp-dg__dot, .vp-dg__guide, .vp-dg__lead, .vp-dg__fin) {
  transition: fill 0.35s ease, stroke 0.35s ease;
}
.vp-diagram[data-active='cpu'] .vp-dg__part--cpu .vp-dg__dot,
.vp-diagram[data-active='mem'] .vp-dg__part--mem .vp-dg__dot,
.vp-diagram[data-active='disk'] .vp-dg__part--disk .vp-dg__dot,
.vp-diagram[data-active='net'] .vp-dg__part--net .vp-dg__dot,
.vp-diagram[data-active='ipmi'] .vp-dg__part--ipmi .vp-dg__dot {
  fill: var(--dg-lit);
}
/* after hours the lit part glows; the others step back while one is lit */
:root[data-theme='dark'] .vp-diagram[data-active='cpu'] .vp-dg__part--cpu,
:root[data-theme='dark'] .vp-diagram[data-active='mem'] .vp-dg__part--mem,
:root[data-theme='dark'] .vp-diagram[data-active='disk'] .vp-dg__part--disk,
:root[data-theme='dark'] .vp-diagram[data-active='net'] .vp-dg__part--net,
:root[data-theme='dark'] .vp-diagram[data-active='ipmi'] .vp-dg__part--ipmi {
  filter: url(#vp-dg-glow);
}
.vp-dg__part {
  transition: opacity 0.35s linear;
}
.vp-diagram[data-active]:not([data-active='cpu'])[data-seen~='cpu'] .vp-dg__part--cpu,
.vp-diagram[data-active]:not([data-active='mem'])[data-seen~='mem'] .vp-dg__part--mem,
.vp-diagram[data-active]:not([data-active='disk'])[data-seen~='disk'] .vp-dg__part--disk,
.vp-diagram[data-active]:not([data-active='net'])[data-seen~='net'] .vp-dg__part--net,
.vp-diagram[data-active]:not([data-active='ipmi'])[data-seen~='ipmi'] .vp-dg__part--ipmi {
  opacity: 0.45;
}
/* each part waits, faint and a little further out, until its tile has come into view */
@media (prefers-reduced-motion: no-preference) {
.vp-diagram--live .vp-dg__part {
  opacity: 0.16;
  translate: 0 -10px;
  transition: opacity 0.5s linear 0.1s, translate 0.9s var(--v2-ease-out);
}
.vp-diagram--live[data-seen~='cpu'] .vp-dg__part--cpu,
.vp-diagram--live[data-seen~='mem'] .vp-dg__part--mem,
.vp-diagram--live[data-seen~='disk'] .vp-dg__part--disk,
.vp-diagram--live[data-seen~='net'] .vp-dg__part--net,
.vp-diagram--live[data-seen~='ipmi'] .vp-dg__part--ipmi {
  opacity: 1;
  translate: none;
}
}

/* The small feature tiles on a phone: compact, two to a row; the title sized to the tile, so a
   word that must stay whole ("pre-installed") always fits. */
@media (max-width: 639.98px) {
.product-page .product-features__item:not(:first-child, :last-child) {
  container-type: inline-size;
  min-height: 10.5rem;
  gap: 1.25rem;
  border-radius: 18px;
  padding: 1.125rem;
}
.product-page .product-features__item:not(:first-child, :last-child) .product-features__badge {
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 12px;
}
.product-page .product-features__item:not(:first-child, :last-child) .product-features__icon {
  font-size: 22px;
}
.product-page .product-features__item:not(:first-child, :last-child) .label-strong {
  font-size: min(1.125rem, 12.5cqi);
  line-height: 1.18;
  letter-spacing: -0.016em;
}
.product-page .product-features__item:not(:first-child, :last-child) .desc-md {
  margin-top: 0.375rem;
  font-size: 14px;
  line-height: 1.38;
  letter-spacing: -0.01em;
}
}

/* A small tile's drawing, in its top corner (includes/products-art.php): blue lines, one part
   filled; its lines draw themselves in as the tile rises. Not on a phone's half-width tile. */
.vp-fa {
  display: none;
}
@media (min-width: 640px) {
.vp-fa {
  --fa-line: rgb(0 113 227 / 0.38);
  --fa-dot: rgb(0 113 227 / 0.3);
  --fa-acc: #2f6bff;
  --fa-soft: rgb(41 72 255 / 0.08);
  position: absolute;
  top: 1.75rem;
  right: 1.75rem;
  z-index: -1;
  display: block;
  width: clamp(5.5rem, 3rem + 4vw, 7.25rem);
  height: auto;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
}
@media (min-width: 768px) {
.vp-fa {
  top: 2.25rem;
  right: 2.25rem;
}
}
:root[data-theme='dark'] .vp-fa {
  --fa-line: rgb(157 184 255 / 0.42);
  --fa-dot: rgb(157 184 255 / 0.36);
  --fa-acc: #6e9bff;
  --fa-soft: rgb(110 155 255 / 0.13);
}
.vp-fa__l {
  stroke: var(--fa-line);
  stroke-width: 1.5;
}
.vp-fa__al {
  stroke: var(--fa-acc);
  stroke-width: 2;
}
.vp-fa__a {
  fill: var(--fa-acc);
}
.vp-fa__s {
  fill: var(--fa-soft);
  stroke: var(--fa-acc);
  stroke-width: 1.5;
}
.vp-fa__d {
  fill: var(--fa-dot);
}
.vp-fa__k {
  fill: var(--v2-tile);
  stroke: var(--fa-acc);
  stroke-width: 2;
}
.vp-fa__dash {
  stroke-dasharray: 2 5;
}
.vp-fa__flow {
  stroke: var(--fa-acc);
  stroke-width: 2;
  stroke-dasharray: 3 9;
  opacity: 0.6;
}
@media (prefers-reduced-motion: no-preference) {
html.v2-js .vp-fa :is(.vp-fa__l:not(.vp-fa__dash, .vp-fa__pins), .vp-fa__al) {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.3s var(--v2-ease-out) 0.35s;
}
html.v2-js .vp-fa :is(.vp-fa__a, .vp-fa__s, .vp-fa__d, .vp-fa__k, .vp-fa__dash, .vp-fa__pins, .vp-fa__flow) {
  opacity: 0;
  transition: opacity 0.5s linear 0.9s;
}
html.v2-js .is-in > .vp-fa :is(.vp-fa__l, .vp-fa__al) {
  stroke-dashoffset: 0;
}
html.v2-js .is-in > .vp-fa :is(.vp-fa__a, .vp-fa__s, .vp-fa__d, .vp-fa__k, .vp-fa__dash, .vp-fa__pins) {
  opacity: 1;
}
html.v2-js .is-in > .vp-fa .vp-fa__flow {
  opacity: 0.6;
  animation: vp-fa-flow 1.6s linear 1.4s 3;
}
html.v2-js .is-in > .vp-fa .vp-fa__cursor {
  animation: vp-fa-blink 1.1s steps(1) 1.6s 3;
}
}
@keyframes vp-fa-flow {
  to { stroke-dashoffset: -24; }
}
@keyframes vp-fa-blink {
  50% { opacity: 0; }
}