/* v2: hosting (see assets/css/v2.css for the shared look). */

/* ── v2: Web Hosting (web-hosting.php, main.site-main--web-hosting) ────────────────────────────
   The page as Apple shows a product and Spaceship lights it: a black opening scene with the
   telemetry window standing up out of a planet's rim of blue light; Apple's white tiles on the
   grey page for the choices and the plans; two more scenes (the data centers, the closing facts
   and call to action) to keep the rhythm. Everything here is scoped to this page's <main>, so the
   plan cards, highlights and FAQ that other pages share keep their own look there. */

.site-main--web-hosting {
  --wh-tile-radius: 28px;
  --wh-card-radius: 24px;
  /* Tiles: the shared card edge in both themes (a hairline and a soft drop by day; a lit top edge,
     a hairline and a deep drop after hours), and the shared lifted edge under the pointer. The
     plan cards stay calmer: a hairline only. */
  --wh-ring: var(--shadow-card);
  --wh-lift: var(--shadow-card-hover);
  --wh-plan-ring: 0 0 0 1px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.03);
  --wh-chip: #f5f5f7;
  --wh-chip-icon: #ffffff;
  --wh-chip-edge: rgb(0 0 0 / 0.035);
  --wh-chip-deck: 0 0 0 1px rgb(0 0 0 / 0.05), 0 2px 4px rgb(0 0 0 / 0.04), 0 16px 30px -16px rgb(0 0 0 / 0.3);
  /* how much of a use-case glyph's colour tints its tile's corner */
  --wh-tint: 9%;
}
:root[data-theme='dark'] .site-main--web-hosting {
  --wh-plan-ring: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 0 0 1px rgb(255 255 255 / 0.08);
  --wh-chip: #242428;
  --wh-chip-icon: #313137;
  --wh-chip-edge: rgb(255 255 255 / 0.06);
  --wh-chip-deck: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 0 0 1px rgb(255 255 255 / 0.08), 0 18px 34px -16px rgb(0 0 0 / 0.95);
  --wh-tint: 20%;
}
@media (max-width: 639.98px) {
.site-main--web-hosting {
  --wh-tile-radius: 22px;
  --wh-card-radius: 22px;
}
}

/* ── Rhythm: tile sections breathe like Apple's, scenes get a full stage ── */
.site-main--web-hosting :is(.use-cases, .section-default, #faq) {
  background-color: var(--color-surface);
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.site-main--web-hosting #pricing {
  padding-top: 2rem;
}
.site-main--web-hosting :is(.datacenters, .trust-compact).scene {
  overflow: hidden;
  overflow: clip;
  background-color: var(--v2-scene-bg);
  padding-top: 6rem;
  padding-bottom: 6rem;
}
@media (min-width: 1024px) {
.site-main--web-hosting :is(.use-cases, .section-default, #faq) {
  padding-top: 7rem;
  padding-bottom: 7rem;
}
.site-main--web-hosting #pricing {
  padding-top: 3rem;
}
.site-main--web-hosting :is(.datacenters, .trust-compact).scene {
  padding-top: 9rem;
  padding-bottom: 9rem;
}
}
.site-main--web-hosting :is(.use-cases, .section-default, .datacenters, .trust-compact) > .container {
  max-width: 1200px;
}

/* Section heads: centred, big and tight. */
.site-main--web-hosting :is(.use-cases__head, .plans__head) {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3rem;
  max-width: 52rem;
  text-align: center;
}
@media (min-width: 1024px) {
.site-main--web-hosting :is(.use-cases__head, .plans__head) {
  margin-bottom: 3.5rem;
}
}
.site-main--web-hosting .section-title-compact {
  margin-top: 0.75rem;
  font-size: clamp(2rem, 1.05rem + 2.7vw, 3.5rem);
  line-height: 1.07;
  letter-spacing: -0.026em;
  font-weight: 700;
  text-wrap: balance;
  color: var(--color-on-surface);
}
.site-main--web-hosting .desc-md {
  margin-top: 1rem;
  font-size: clamp(1.0625rem, 0.95rem + 0.42vw, 1.3125rem);
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--color-tertiary);
}

/* ── Hero: a black stage; the headline centred; the telemetry window as a glass object that
   stands up out of the light as the page scrolls (--v2-p from motion.js) ── */
.site-main--web-hosting .hosting-hero {
  --v2-glow-x: 50%;
  --v2-glow-y: 64%;
  padding-bottom: 5rem;
}
@media (min-width: 1024px) {
.site-main--web-hosting .hosting-hero {
  padding-bottom: 7rem;
}
}
.site-main--web-hosting .hosting-hero .hosting-hero__grid {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 3.5rem;
}
@media (min-width: 1024px) {
.site-main--web-hosting .hosting-hero .hosting-hero__grid {
  gap: 4.5rem;
}
}
/* A faint field of points behind everything, brightest round the window. */
.site-main--web-hosting .hosting-hero__field {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle, rgb(255 255 255 / 0.2) 1px, transparent 1.6px);
  background-size: 26px 26px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 58% 46% at 50% 58%, #000 0%, rgb(0 0 0 / 0.35) 55%, transparent 80%);
  mask-image: radial-gradient(ellipse 58% 46% at 50% 58%, #000 0%, rgb(0 0 0 / 0.35) 55%, transparent 80%);
  opacity: 0.55;
}
/* Farther still, a sky of stars (the shared tile), over the headline and fading out before the
   planet's rim, so the horizon reads as a planet's in space. */
.site-main--web-hosting .hosting-hero__stars {
  opacity: 0.7;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / 0.8) 40%, transparent 68%);
  mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / 0.8) 40%, transparent 68%);
}
.site-main--web-hosting .hosting-hero .hosting-hero__copy {
  grid-column: auto;
  align-items: center;
  max-width: 60rem;
  text-align: center;
}
.site-main--web-hosting .hosting-hero .hosting-hero__copy > h1 {
  margin-top: 1.5rem;
}
.site-main--web-hosting .hosting-hero .hosting-hero__copy > .hosting-hero__lead {
  margin-top: 1.25rem;
}
.site-main--web-hosting .hosting-hero .hosting-hero__copy > .hosting-hero__actions {
  margin-top: 2rem;
}
.site-main--web-hosting .hosting-hero__badge {
  gap: 0.5rem;
  border-radius: 980px;
  background-color: rgb(255 255 255 / 0.08);
  padding: 0.4375rem 0.9375rem 0.4375rem 0.8125rem;
  color: #d2d2d7;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.site-main--web-hosting .hosting-hero__badge .overline {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #d2d2d7;
}
.site-main--web-hosting .hosting-hero__badge-dot {
  height: 7px;
  width: 7px;
  border-radius: 50%;
  background-color: #5b8cff;
  box-shadow: 0 0 10px rgb(91 140 255 / 0.9);
}
.site-main--web-hosting .hosting-hero .display-text {
  font-size: clamp(2.75rem, 1rem + 5.2vw, 5.5rem);
  line-height: 1.04;
  letter-spacing: -0.034em;
  font-weight: 700;
  color: #ffffff;
}
.site-main--web-hosting .hosting-hero__accent {
  background-image: linear-gradient(96deg, #ffffff 4%, #b4c7ff 46%, #8c7dff 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.site-main--web-hosting .hosting-hero__lead {
  max-width: 40rem;
  text-wrap: balance;
  font-size: clamp(1.1875rem, 1rem + 0.55vw, 1.5rem);
  line-height: 1.36;
  letter-spacing: -0.014em;
  color: #a1a1a6;
}
.site-main--web-hosting .hosting-hero__actions {
  justify-content: center;
  gap: 0.75rem;
  padding-top: 0;
}

/* The window. */
.site-main--web-hosting .hosting-hero .telemetry {
  position: relative;
  grid-column: auto;
  width: 100%;
  max-width: 60rem;
}
/* The planet: a huge dark disc whose rim of blue light rises behind the window. */
.site-main--web-hosting .telemetry__horizon {
  position: absolute;
  left: 50%;
  top: 44%;
  z-index: -1;
  width: max(250%, 56rem);
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, #000000 96%, #04060f 99%, transparent 100%);
  box-shadow:
    0 -1px 0 0 rgb(170 195 255 / 0.55),
    0 -14px 50px -6px rgb(var(--glow-blue) / 0.75),
    0 -60px 160px -10px rgb(var(--glow-blue) / 0.45),
    inset 0 22px 50px -26px rgb(140 170 255 / 0.6);
}
.site-main--web-hosting .telemetry__card {
  border-radius: var(--wh-card-radius);
  background-color: rgb(22 23 30 / 0.66);
  padding: 1.125rem;
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  backdrop-filter: blur(28px) saturate(150%);
  transform-origin: 50% 100%;
  text-align: left;
}
/* Its glass sheen and blue under-glow, the same in both themes: stated strongly enough to win over
   site.css's after-hours card shadow (:root[data-theme='dark'] .telemetry__card) and v2.css's
   retired ambient sheen (:root[data-theme] :is(…, .telemetry__card)). */
:root .site-main--web-hosting .hosting-hero .telemetry__card {
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.015) 40%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.12),
    0 0 0 1px rgb(255 255 255 / 0.1),
    0 60px 120px -40px rgb(var(--glow-blue) / 0.6),
    0 30px 60px -30px rgb(0 0 0 / 0.9);
}
@media (min-width: 768px) {
.site-main--web-hosting .telemetry__card {
  padding: 1.5rem;
}
}
.site-main--web-hosting .telemetry__card .card-head {
  margin-bottom: 1rem;
  padding-bottom: 0;
}
.site-main--web-hosting .telemetry__dot {
  height: 11px;
  width: 11px;
  background-color: rgb(255 255 255 / 0.16);
}
.site-main--web-hosting .telemetry__card .card-head {
  gap: 0.75rem;
}
.site-main--web-hosting .telemetry__card .card-head > .cluster-sm {
  min-width: 0;
}
.site-main--web-hosting .telemetry__card .card-head > .telemetry__live {
  flex-shrink: 0;
}
.site-main--web-hosting .telemetry__dot {
  flex-shrink: 0;
}
.site-main--web-hosting .telemetry__host {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 12px;
  color: #a1a1a6;
}
@media (max-width: 479.98px) {
.site-main--web-hosting .telemetry__host {
  font-size: 11px;
}
}
.site-main--web-hosting .telemetry__live {
  gap: 0.375rem;
  border-radius: 980px;
  background-color: rgb(255 255 255 / 0.08);
  padding: 0.25rem 0.625rem;
  font-size: 11px;
  font-weight: 600;
  color: #d2d2d7;
}
.site-main--web-hosting .telemetry__live .dot-sm {
  background-color: #5b8cff;
  box-shadow: 0 0 8px rgb(91 140 255 / 0.9);
}
.site-main--web-hosting .telemetry__metrics {
  margin: 0;
  gap: 0.625rem;
}
.site-main--web-hosting :is(.telemetry__metric, .telemetry__metric-wide, .telemetry__latency) {
  border-radius: 14px;
  background-color: rgb(255 255 255 / 0.045);
  padding: 0.875rem 1rem;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
}
.site-main--web-hosting .telemetry__card .caption-block {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: #a1a1a6;
}
.site-main--web-hosting :is(.telemetry__value, .telemetry__value-accent) {
  margin-top: 0.375rem;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: #f5f5f7;
}
.site-main--web-hosting .telemetry__value-accent {
  justify-self: start;
  width: fit-content;
  background-image: linear-gradient(90deg, #7fa6ff, #6fd6ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.site-main--web-hosting .telemetry__card .caption {
  display: block;
  margin-top: 0.125rem;
  font-size: 12px;
  line-height: 16px;
  color: #a1a1a6;
}
.site-main--web-hosting .telemetry__latency {
  margin-top: 0.625rem;
  padding-bottom: 0.75rem;
}
.site-main--web-hosting .telemetry__latency-head {
  margin-bottom: 0.75rem;
}
.site-main--web-hosting .telemetry__latency-head .caption {
  margin-top: 0;
  color: #d2d2d7;
  font-weight: 600;
}
.site-main--web-hosting .telemetry__chart {
  display: block;
  height: auto;
  aspect-ratio: 500 / 80;
  overflow: visible;
  color: #5b8cff;
  filter: drop-shadow(0 0 7px rgb(70 120 255 / 0.65));
}
.site-main--web-hosting .telemetry__line {
  stroke: #7fa6ff;
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}
.site-main--web-hosting .telemetry__area {
  fill-opacity: 0.16;
}
.site-main--web-hosting .telemetry__point {
  fill: #dce6ff;
  transform-box: fill-box;
  transform-origin: center;
}
.site-main--web-hosting .telemetry__latency-axis {
  margin-top: 0.625rem;
  font-size: 11px;
  line-height: 14px;
  color: #a1a1a6;
}
.site-main--web-hosting .telemetry__terminal {
  margin-top: 0.625rem;
  gap: 0.75rem;
  border-radius: 14px;
  background-color: rgb(0 0 0 / 0.5);
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07);
}
.site-main--web-hosting .telemetry__terminal-line {
  min-width: 0;
  gap: 0.625rem;
}
.site-main--web-hosting .telemetry__prompt {
  font-size: 13px;
  color: #7fa6ff;
}
.site-main--web-hosting .telemetry__command {
  font-size: 13px;
  line-height: 18px;
  color: #e5e5ea;
}
.site-main--web-hosting .telemetry__copy {
  flex-shrink: 0;
  height: 2rem;
  border-radius: 980px;
  background-color: rgb(255 255 255 / 0.1);
  padding: 0 0.875rem;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  box-shadow: none;
  transition: background-color 0.2s ease;
}
.site-main--web-hosting .telemetry__copy:hover {
  background-color: rgb(255 255 255 / 0.18);
}
.site-main--web-hosting .telemetry__copy:focus-visible {
  outline: 2px solid #6e9bff;
  outline-offset: 2px;
}

/* Below 1024px the window fills the width, so the planet is drawn smaller and lower: its rim
   arcs out from under the window, visibly curved, with its light rising behind the glass. */
@media (max-width: 1023.98px) {
.site-main--web-hosting .hosting-hero {
  padding-bottom: 6.5rem;
}
.site-main--web-hosting .telemetry__horizon {
  top: calc(100% + 1.25rem);
  width: max(150%, 33rem);
}
}

/* Depth: three planes drift at their own pace as the page leaves the hero (a scroll-linked CSS
   animation over the first screen of scroll): the field of points farthest and slowest, the
   planet nearer, the window at the page's own pace. The window leans back and stands up as you
   scroll; the line draws itself; the dots breathe a few times. Off for visitors who ask for less
   motion; browsers without scroll-linked animations simply keep the planes still. */
@media (prefers-reduced-motion: no-preference) {
.site-main--web-hosting .telemetry__card {
  --wh-t: clamp(0, calc((0.6 - var(--v2-p, 1)) * 7), 1);
  transform: perspective(1800px) rotateX(calc(var(--wh-t) * 16deg)) scale(calc(1 - var(--wh-t) * 0.05));
}
@supports (animation-timeline: scroll()) {
html.v2-js .site-main--web-hosting :is(.hosting-hero__field, .telemetry__horizon, .hosting-hero__stars) {
  animation: wh-drift linear both;
  animation-timeline: scroll(root);
  animation-range: 0 100vh;
  will-change: transform;
}
html.v2-js .site-main--web-hosting .hosting-hero__field {
  --wh-drift: 34vh;
}
html.v2-js .site-main--web-hosting .hosting-hero__stars {
  --wh-drift: 46vh;
}
html.v2-js .site-main--web-hosting .telemetry__horizon {
  --wh-drift: 15vh;
}
@media (max-width: 1023.98px) {
html.v2-js .site-main--web-hosting .telemetry__horizon {
  --wh-drift: 7vh;
}
}
}
.site-main--web-hosting .telemetry.is-in .telemetry__chart {
  animation: wh-wipe 2.2s var(--v2-ease) 0.45s both;
}
.site-main--web-hosting .telemetry.is-in .telemetry__point {
  animation: wh-pop 0.6s var(--v2-ease) 2.1s both, wh-breathe 2.8s ease-in-out 2.7s 4;
}
.site-main--web-hosting :is(.hosting-hero__badge-dot, .telemetry__live .dot-sm, .datacenters__dot) {
  animation: wh-ping 2.6s ease-out 5;
}
}
@keyframes wh-drift {
to { transform: translate3d(0, var(--wh-drift, 0px), 0); }
}
@keyframes wh-wipe {
from { clip-path: inset(-20px 100% -20px -20px); }
to { clip-path: inset(-20px -20px -20px -20px); }
}
@keyframes wh-pop {
from { opacity: 0; transform: scale(0); }
}
@keyframes wh-breathe {
50% { opacity: 0.55; }
}
@keyframes wh-ping {
0% { box-shadow: 0 0 0 0 rgb(91 140 255 / 0.55), 0 0 8px rgb(91 140 255 / 0.9); }
70%, 100% { box-shadow: 0 0 0 8px rgb(91 140 255 / 0), 0 0 8px rgb(91 140 255 / 0.9); }
}

/* ── Use cases: six Apple tiles, each with a lit glyph; the whole tile is the link ── */
.site-main--web-hosting .use-cases__grid {
  gap: 1rem;
}
.site-main--web-hosting .use-cases__card {
  position: relative;
  overflow: hidden;
  border-radius: var(--wh-tile-radius);
  background-color: var(--v2-tile);
  padding: 2rem 1.75rem 1.75rem;
  box-shadow: var(--wh-ring);
  transition: transform 0.5s var(--v2-ease), box-shadow 0.4s ease;
}
@media (min-width: 768px) {
.site-main--web-hosting .use-cases__card {
  min-height: 18rem;
}
}
@media (min-width: 1024px) {
.site-main--web-hosting .use-cases__card {
  min-height: 19.5rem;
  padding: 2.5rem 2.25rem 2.25rem;
}
}
.site-main--web-hosting .use-cases__card:hover {
  box-shadow: var(--wh-lift);
}
/* Each tile carries a little of its glyph's colour in the corner, by day and after hours alike
   (a lighter wash on white, a deeper one on charcoal), and a lit hairline along its top. */
.site-main--web-hosting .use-cases__card {
  isolation: isolate;
}
.site-main--web-hosting .use-cases__card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--wh-g1, #3d8bff) 45%, transparent), transparent 55%) top left / 100% 1px no-repeat,
    radial-gradient(ellipse 75% 60% at 0% 0%, color-mix(in srgb, var(--wh-g1, #3d8bff) var(--wh-tint), transparent), transparent 70%);
  opacity: 0.85;
  transition: opacity 0.4s ease;
}
.site-main--web-hosting .use-cases__card:hover::before {
  opacity: 1;
}
.site-main--web-hosting .use-cases__card:focus-visible {
  outline: 2px solid var(--color-primary-container);
  outline-offset: 3px;
}
.site-main--web-hosting .use-cases__icon-tile {
  margin-bottom: 1.75rem;
  height: 3.25rem;
  width: 3.25rem;
  border-radius: 15px;
  background-color: transparent;
  background-image: linear-gradient(145deg, var(--wh-g1, #3d8bff), var(--wh-g2, #0050d0));
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 10px 22px -10px var(--wh-g2, #0050d0);
}
.site-main--web-hosting .use-cases__icon-tile .material-symbols-outlined {
  font-size: 26px;
}
.site-main--web-hosting .use-cases__card:hover .use-cases__icon-tile {
  background-color: transparent;
  color: #ffffff;
}
.site-main--web-hosting .use-cases__card:nth-child(2) { --wh-g1: #7a78ff; --wh-g2: #3f3cc9; }
.site-main--web-hosting .use-cases__card:nth-child(3) { --wh-g1: #2fd0ff; --wh-g2: #0070e0; }
.site-main--web-hosting .use-cases__card:nth-child(4) { --wh-g1: #9d7bff; --wh-g2: #5a2fd6; }
.site-main--web-hosting .use-cases__card:nth-child(5) { --wh-g1: #3cc8d8; --wh-g2: #0a7f99; }
.site-main--web-hosting .use-cases__card:nth-child(6) { --wh-g1: #c77dff; --wh-g2: #8a2fd0; }
.site-main--web-hosting .use-cases__heading {
  font-size: clamp(1.375rem, 1.1rem + 0.6vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.022em;
  font-weight: 700;
}
.site-main--web-hosting .use-cases__card:hover .use-cases__heading {
  color: var(--color-on-surface);
}
.site-main--web-hosting .use-cases__card .card-text {
  margin-top: 0.625rem;
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.012em;
}
.site-main--web-hosting .use-cases__link {
  margin-top: 2rem;
  justify-content: flex-start;
  gap: 0.625rem;
  padding-top: 0;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.site-main--web-hosting .use-cases__arrow {
  display: inline-flex;
  height: 1.75rem;
  width: 1.75rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgb(0 113 227 / 0.1);
  font-size: 16px;
  color: var(--color-primary);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s var(--v2-ease);
}
:root[data-theme='dark'] .site-main--web-hosting .use-cases__arrow {
  background-color: rgb(41 151 255 / 0.16);
}
.site-main--web-hosting .use-cases__card:hover .use-cases__arrow {
  background-color: var(--color-primary-container);
  color: #ffffff;
  transform: none;
}
@media (prefers-reduced-motion: no-preference) {
@media (hover: hover) and (pointer: fine) {
.site-main--web-hosting .use-cases__card:hover {
  transform: translateY(-4px);
}
.site-main--web-hosting .use-cases__card:hover .use-cases__arrow {
  transform: translateX(3px);
}
}
}

/* Phones and small tablets: one sideways row that snaps tile by tile, the next tile peeking in
   from the edge, running out to the screen's edges (instead of six tiles stacked a screen and a
   half tall). Every tile stays a link in the tab order; focusing one scrolls it into view. */
@media (max-width: 767.98px) {
.site-main--web-hosting .use-cases__grid {
  display: flex;
  gap: 0.75rem;
  margin: -0.75rem calc(-1 * var(--gutter-mobile, 1rem)) -2.5rem;
  padding: 0.75rem var(--gutter-mobile, 1rem) 2.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter-mobile, 1rem);
  scrollbar-width: none;
}
.site-main--web-hosting .use-cases__grid::-webkit-scrollbar {
  display: none;
}
.site-main--web-hosting .use-cases__card {
  flex: 0 0 min(80%, 19.5rem);
  min-height: 0;
  scroll-snap-align: start;
  padding: 1.75rem 1.5rem 1.5rem;
}
.site-main--web-hosting .use-cases__link {
  margin-top: 1.5rem;
}
.site-main--web-hosting .use-cases__icon-tile {
  margin-bottom: 1.5rem;
}
.site-main--web-hosting .use-cases__card .card-text {
  font-size: 16px;
}
}

/* ── Pricing: the head centred, the controls as Apple segmented pills, the plans as white
   cards; the recommended plan wears a slowly turning ring of blue light ── */
.site-main--web-hosting .plans__head {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2rem;
}
.site-main--web-hosting .plans__controls {
  align-self: center;
  justify-content: center;
  gap: 0.625rem;
}
/* The currency: a one-cell control in the same pill as the period. */
.site-main--web-hosting .currency__button {
  border-radius: 980px;
  background-color: rgb(0 0 0 / 0.06);
  padding: 0.25rem;
}
.site-main--web-hosting .currency__button:hover,
.site-main--web-hosting .currency__button[aria-expanded="true"] {
  background-color: rgb(0 0 0 / 0.1);
}
.site-main--web-hosting .currency__value {
  height: 2.25rem;
  border-radius: 980px;
  background-color: #ffffff;
  padding: 0 0.75rem 0 1.125rem;
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  color: #1d1d1f;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 3px 8px rgb(0 0 0 / 0.06);
}
.site-main--web-hosting .currency__chevron {
  font-size: 16px;
  color: #6e6e73;
}
:root[data-theme='dark'] .site-main--web-hosting .currency__button {
  background-color: #1c1c1f;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
}
:root[data-theme='dark'] .site-main--web-hosting .currency__button:hover,
:root[data-theme='dark'] .site-main--web-hosting .currency__button[aria-expanded="true"] {
  background-color: #232327;
}
:root[data-theme='dark'] .site-main--web-hosting .currency__value {
  background-color: #3a3a3f;
  color: #f5f5f7;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.5);
}
:root[data-theme='dark'] .site-main--web-hosting .currency__chevron {
  color: #c7c7cc;
}
/* The billing period: equal cells with one white pill that glides to the chosen period. */
.site-main--web-hosting .plans__billing {
  position: relative;
  isolation: isolate;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-self: center;
  border-radius: 980px;
  background-color: rgb(0 0 0 / 0.06);
  padding: 0.25rem;
}
.site-main--web-hosting :is(.plans__billing-option, .plans__billing-option-active) {
  position: relative;
  z-index: 1;
  height: 2.25rem;
  border-radius: 980px;
  padding: 0 1.125rem;
  white-space: nowrap;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.01em;
  font-weight: 500;
  color: #56565b;
  box-shadow: none;
  transition: color 0.3s ease, background-color 0.3s ease;
}
.site-main--web-hosting .plans__billing-option:hover {
  color: #1d1d1f;
}
.site-main--web-hosting .plans__billing-option-active {
  background-color: #ffffff;
  font-weight: 600;
  color: #1d1d1f;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 3px 8px rgb(0 0 0 / 0.06);
}
.site-main--web-hosting :is(.plans__billing-option, .plans__billing-option-active):focus-visible {
  outline: 2px solid var(--color-primary-container);
  outline-offset: 2px;
}
:root[data-theme='dark'] .site-main--web-hosting .plans__billing {
  background-color: #1c1c1f;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
}
:root[data-theme='dark'] .site-main--web-hosting .plans__billing-option {
  color: #a1a1a6;
}
:root[data-theme='dark'] .site-main--web-hosting .plans__billing-option:hover {
  color: #f5f5f7;
}
:root[data-theme='dark'] .site-main--web-hosting .plans__billing-option-active {
  background-color: #3a3a3f;
  color: #f5f5f7;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.5);
}
/* Where :has() is known, the white pill is one shape that slides between the cells. */
@supports selector(:has(a)) {
.site-main--web-hosting .plans__billing {
  --wh-n: 4;
  --wh-i: 0;
}
.site-main--web-hosting .plans__billing:has(> :nth-child(2):last-child) { --wh-n: 2; }
.site-main--web-hosting .plans__billing:has(> :nth-child(3):last-child) { --wh-n: 3; }
.site-main--web-hosting .plans__billing:has(> :nth-child(5):last-child) { --wh-n: 5; }
.site-main--web-hosting .plans__billing:has(> :nth-child(2)[aria-pressed="true"]) { --wh-i: 1; }
.site-main--web-hosting .plans__billing:has(> :nth-child(3)[aria-pressed="true"]) { --wh-i: 2; }
.site-main--web-hosting .plans__billing:has(> :nth-child(4)[aria-pressed="true"]) { --wh-i: 3; }
.site-main--web-hosting .plans__billing:has(> :nth-child(5)[aria-pressed="true"]) { --wh-i: 4; }
.site-main--web-hosting .plans__billing::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0.25rem;
  bottom: 0.25rem;
  left: 0.25rem;
  width: calc((100% - 0.5rem) / var(--wh-n));
  border-radius: 980px;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 3px 8px rgb(0 0 0 / 0.06);
  translate: calc(var(--wh-i) * 100%) 0;
  transition: translate 0.5s var(--v2-ease);
}
:root[data-theme='dark'] .site-main--web-hosting .plans__billing::before {
  background-color: #3a3a3f;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.5);
}
.site-main--web-hosting .plans__billing .plans__billing-option-active,
:root[data-theme='dark'] .site-main--web-hosting .plans__billing .plans__billing-option-active {
  background-color: transparent;
  box-shadow: none;
}
}
@media (prefers-reduced-motion: reduce) {
.site-main--web-hosting .plans__billing::before {
  transition: none;
}
}
@media (max-width: 479.98px) {
.site-main--web-hosting :is(.plans__billing-option, .plans__billing-option-active) {
  padding: 0 0.6875rem;
  font-size: 13px;
}
.site-main--web-hosting .currency__value {
  padding: 0 0.5rem 0 0.875rem;
  font-size: 13px;
}
}

/* The cards. */
.site-main--web-hosting .plans__grid {
  gap: 1rem;
}
@media (min-width: 768px) and (max-width: 1199.98px) {
.site-main--web-hosting .plans__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1200px) {
.site-main--web-hosting .plans__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.site-main--web-hosting :is(.plans__grid > .card-column, .plans__grid > .plans__card-featured) {
  border-radius: var(--wh-card-radius);
  background-color: var(--v2-tile);
  padding: 2rem 1.75rem 1.75rem;
  box-shadow: var(--wh-plan-ring);
  transition: box-shadow 0.4s ease, transform 0.5s var(--v2-ease);
}
.site-main--web-hosting .plans__grid > .card-column:hover {
  box-shadow: var(--wh-lift);
}
.site-main--web-hosting .plans__featured-bar {
  display: none;
}
.site-main--web-hosting .plans__grid .overline {
  display: block;
  font-size: 13px;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-tertiary);
}
.site-main--web-hosting .plans__grid .split {
  gap: 0.5rem;
}
.site-main--web-hosting .plans__grid .split .eyebrow {
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.04em;
  background-image: linear-gradient(90deg, #0071e3, #6b4dff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
:root[data-theme='dark'] .site-main--web-hosting .plans__grid .split .eyebrow {
  background-image: linear-gradient(90deg, #4fa3ff, #a48cff);
}
.site-main--web-hosting .plans__badge {
  border-radius: 980px;
  background-color: rgb(0 113 227 / 0.1);
  padding: 0.1875rem 0.625rem;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: #005bbf;
}
:root[data-theme='dark'] .site-main--web-hosting .plans__badge {
  background-color: rgb(41 151 255 / 0.16);
  color: #6cb6ff;
}
.site-main--web-hosting .plans__name {
  margin-top: 0.5rem;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.022em;
  font-weight: 700;
}
.site-main--web-hosting .plans__price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.25rem;
  margin-top: 1.75rem;
  margin-bottom: 0.375rem;
}
.site-main--web-hosting .plans__price-row .display-text {
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 700;
  color: var(--color-on-surface);
}
.site-main--web-hosting .plans__price-row .note {
  font-size: 15px;
  line-height: 20px;
  color: var(--color-tertiary);
}
.site-main--web-hosting .plans__desc {
  margin-bottom: 1.75rem;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-tertiary);
}
.site-main--web-hosting .plans__features {
  border-top: 1px solid var(--color-hairline);
  padding-top: 1.5rem;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.012em;
  color: var(--color-on-surface-variant);
}
.site-main--web-hosting .plans__features > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0.875rem;
}
.site-main--web-hosting .plans__features .cluster-sm {
  align-items: flex-start;
  gap: 0.625rem;
}
.site-main--web-hosting .plans__features .icon-18-accent {
  margin-top: 1px;
  font-size: 18px;
  color: var(--color-primary-container);
}
:root[data-theme='dark'] .site-main--web-hosting .plans__features .icon-18-accent {
  color: #2997ff;
}
.site-main--web-hosting :is(.plans__select, .plans__select-primary) {
  margin-top: 2rem;
  display: flex;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 980px;
  padding: 0 1.25rem;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.site-main--web-hosting .plans__select {
  background-color: transparent;
  color: var(--color-primary);
  box-shadow: inset 0 0 0 1px currentColor;
}
.site-main--web-hosting .plans__select:hover {
  background-color: var(--color-primary-container);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px var(--color-primary-container);
}
.site-main--web-hosting .plans__select-primary {
  background-color: var(--color-primary-container);
  color: #ffffff;
  box-shadow: 0 10px 24px -12px rgb(0 113 227 / 0.8);
}
.site-main--web-hosting .plans__select-primary:hover {
  background-color: var(--color-primary-solid);
}
.site-main--web-hosting :is(.plans__select, .plans__select-primary):focus-visible {
  outline: 2px solid var(--color-primary-container);
  outline-offset: 2px;
}
/* The recommended plan: a ring of blue and violet light round a white (or charcoal) card. */
@property --wh-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.site-main--web-hosting .plans__grid > .plans__card-featured {
  border: 1.5px solid transparent;
  padding: calc(2rem - 1.5px) calc(1.75rem - 1.5px) calc(1.75rem - 1.5px);
  background:
    linear-gradient(var(--v2-tile), var(--v2-tile)) padding-box,
    conic-gradient(from var(--wh-angle), #0071e3, #6b4dff, #00b4ff, #0071e3) border-box;
  box-shadow: 0 30px 60px -32px rgb(0 113 227 / 0.55), 0 12px 24px -16px rgb(107 77 255 / 0.25);
}
:root[data-theme='dark'] .site-main--web-hosting .plans__grid > .plans__card-featured {
  box-shadow: 0 30px 70px -30px rgb(41 120 255 / 0.6), 0 0 40px -10px rgb(107 77 255 / 0.3);
}
@media (prefers-reduced-motion: no-preference) {
html.v2-motion .site-main--web-hosting .plans__grid > .plans__card-featured.is-in {
  animation-name: v2-rise, wh-turn;
  animation-duration: 0.9s, 9s;
  animation-timing-function: var(--v2-ease), linear;
  animation-iteration-count: 1, 3;
  animation-fill-mode: both, none;
  animation-delay: calc(var(--v2-i, 0) * 80ms), 0s;
}
@media (hover: hover) and (pointer: fine) {
.site-main--web-hosting .plans__grid > :is(.card-column, .plans__card-featured):hover {
  transform: translateY(-4px);
}
}
}
@keyframes wh-turn {
to { --wh-angle: 360deg; }
}

/* The other hosting products and the full price list: one centred row of links. */
.site-main--web-hosting .plans__links {
  margin-top: 3rem;
}
.site-main--web-hosting .plans__more {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 2rem;
  margin: 0;
  text-align: center;
}
.site-main--web-hosting .plans__more .link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--color-primary);
}
.site-main--web-hosting .plans__more .link-arrow:hover {
  text-decoration: underline;
}

/* ── Locations: a scene, lit cyan from behind the latency panel ── */
.site-main--web-hosting .datacenters {
  --v2-glow: var(--glow-cyan);
  --v2-glow-x: 70%;
  --v2-glow-y: 52%;
}
@media (max-width: 1023.98px) {
.site-main--web-hosting .datacenters {
  --v2-glow-x: 50%;
  --v2-glow-y: 72%;
}
}
.site-main--web-hosting .datacenters__grid {
  align-items: center;
  gap: 3rem;
}
@media (min-width: 1024px) {
.site-main--web-hosting .datacenters__grid {
  gap: 4rem;
}
}
.site-main--web-hosting .datacenters__intro {
  justify-content: center;
  gap: 2rem;
}
.site-main--web-hosting .datacenters .section-title-compact {
  color: #ffffff;
}
.site-main--web-hosting .datacenters .eyebrow {
  color: #8fd3ff;
}
.site-main--web-hosting .datacenters .desc-md {
  color: #a1a1a6;
}
.site-main--web-hosting .datacenters .link-icon {
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
  color: #8fd3ff;
}
.site-main--web-hosting .datacenters__latency {
  border-radius: var(--wh-tile-radius);
  background-color: rgb(20 22 28 / 0.55);
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.015) 50%);
  padding: 1.75rem;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.1),
    0 0 0 1px rgb(255 255 255 / 0.09),
    0 50px 110px -40px rgb(var(--glow-cyan) / 0.45);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
}
@media (min-width: 768px) {
.site-main--web-hosting .datacenters__latency {
  padding: 2.5rem;
}
}
.site-main--web-hosting .datacenters__latency .card-head {
  margin-bottom: 0.5rem;
  padding-bottom: 0;
}
/* The route, drawn (web-hosting.php .dc-map): the two data centers as lit nodes, each ringed for
   its metro, on a faint field of points; the arc between them draws itself as the panel rises
   through the window (motion.js gives the map --v2-in; the arc is uncovered left to right, which
   follows the stroke since the arc only ever runs rightward), and once it is drawn a light pulse
   travels it three times, there and back (v2-hosting.js adds .is-drawn). No names, figures or
   status: the rows below say what it is. */
.site-main--web-hosting .dc-map {
  --wh-d: clamp(0, calc((var(--v2-in, 1) - 0.2) * 2.1), 1);
  position: relative;
  margin: 0.75rem 0 0.5rem;
  aspect-ratio: 600 / 220;
}
.site-main--web-hosting .dc-map::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgb(255 255 255 / 0.16) 1px, transparent 1.5px);
  background-size: 18px 18px;
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 60% 75% at 50% 50%, #000 0%, rgb(0 0 0 / 0.5) 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 75% at 50% 50%, #000 0%, rgb(0 0 0 / 0.5) 55%, transparent 100%);
}
.site-main--web-hosting .dc-map__layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.site-main--web-hosting .dc-map__ghost {
  stroke: rgb(255 255 255 / 0.16);
  stroke-width: 1.25;
  stroke-dasharray: 2 7;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.site-main--web-hosting .dc-map__metro {
  stroke: rgb(143 211 255 / 0.22);
  stroke-width: 1;
  stroke-dasharray: 3 5;
  vector-effect: non-scaling-stroke;
}
.site-main--web-hosting .dc-map__ring {
  stroke: rgb(143 211 255 / 0.55);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}
.site-main--web-hosting .dc-map__core {
  fill: #dff4ff;
}
.site-main--web-hosting .dc-map__arc {
  stroke-width: 2.25;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.site-main--web-hosting .dc-map__glow {
  stroke-width: 7;
  stroke-linecap: round;
  opacity: 0.45;
}
.site-main--web-hosting .dc-map__pulse {
  stroke: #f2fbff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 56 1000;
  stroke-dashoffset: 56;
}
.site-main--web-hosting .dc-map__pulse--bloom {
  stroke: #7fd4ff;
  stroke-width: 10;
  opacity: 0.8;
}
@media (prefers-reduced-motion: no-preference) {
html.v2-js .site-main--web-hosting .dc-map__route {
  clip-path: inset(0 calc((1 - var(--wh-d)) * 80%) 0 0);
}
/* The far node lights as the arc reaches it. */
html.v2-js .site-main--web-hosting .dc-map__node--far :is(.dc-map__halo, .dc-map__ring) {
  opacity: clamp(0.25, calc((var(--wh-d) - 0.55) * 4), 1);
}
html.v2-js .site-main--web-hosting .dc-map.is-drawn .dc-map__pulse {
  animation: wh-route-pulse 1.9s var(--v2-ease-io) 0.25s 3 alternate both;
}
}
@keyframes wh-route-pulse {
from { stroke-dashoffset: 56; }
to { stroke-dashoffset: -400; }
}
.site-main--web-hosting .datacenters__latency .heading-sm {
  font-size: 21px;
  line-height: 26px;
  letter-spacing: -0.016em;
  font-weight: 600;
  color: #ffffff;
}
.site-main--web-hosting .datacenters__latency .note-num {
  border-radius: 980px;
  background-color: rgb(255 255 255 / 0.08);
  padding: 0.25rem 0.625rem;
  font-size: 11px;
  font-weight: 600;
  color: #d2d2d7;
}
.site-main--web-hosting .datacenters__latency .stack-list > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0;
  border-top: 1px solid rgb(255 255 255 / 0.08);
}
.site-main--web-hosting .datacenters__route {
  gap: 1rem;
  border-radius: 0;
  background-color: transparent;
  padding: 1.375rem 0;
}
.site-main--web-hosting .datacenters__route:hover {
  background-color: transparent;
}
.site-main--web-hosting .datacenters__route .cluster-sm {
  gap: 0.875rem;
  min-width: 0;
}
.site-main--web-hosting .datacenters__dot {
  height: 8px;
  width: 8px;
  flex-shrink: 0;
  background-color: #5cc8ff;
  box-shadow: 0 0 8px rgb(92 200 255 / 0.9);
}
.site-main--web-hosting .datacenters__route .item-title {
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: -0.016em;
  color: #f5f5f7;
}
.site-main--web-hosting .datacenters__route .figure-label {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
  background-image: linear-gradient(180deg, #ffffff 30%, #9fdcff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
.site-main--web-hosting .datacenters__route:nth-child(2) .datacenters__dot { animation-delay: 0.8s; }
.site-main--web-hosting .datacenters__route:nth-child(3) .datacenters__dot { animation-delay: 1.6s; }
.site-main--web-hosting .datacenters__dot {
  animation-name: wh-ping-cyan;
}
}
@keyframes wh-ping-cyan {
0% { box-shadow: 0 0 0 0 rgb(92 200 255 / 0.55), 0 0 8px rgb(92 200 255 / 0.9); }
70%, 100% { box-shadow: 0 0 0 9px rgb(92 200 255 / 0), 0 0 8px rgb(92 200 255 / 0.9); }
}

/* ── Applications and the studio: a white tile beside a black one ── */
.site-main--web-hosting .feature-grid {
  align-items: stretch;
  gap: 1rem;
}
.site-main--web-hosting :is(.stacks__intro, .studio) {
  position: relative;
  overflow: hidden;
  border-radius: var(--wh-tile-radius);
  padding: 2.25rem 1.25rem 2rem;
}
@media (min-width: 640px) {
.site-main--web-hosting :is(.stacks__intro, .studio) {
  padding: 3rem 2.75rem 2.75rem;
}
}
@media (min-width: 1200px) {
.site-main--web-hosting :is(.stacks__intro, .studio) {
  padding: 3.5rem 3.25rem 3.25rem;
}
}
.site-main--web-hosting .stacks__intro {
  justify-content: space-between;
  background-color: var(--v2-tile);
  box-shadow: var(--wh-ring);
}
.site-main--web-hosting .stacks__intro > :not([hidden]) ~ :not([hidden]) {
  margin-top: 2rem;
}
.site-main--web-hosting :is(.stacks__intro .section-title-compact, .studio .heading-md) {
  font-size: clamp(1.875rem, 1.2rem + 1.6vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.026em;
  font-weight: 700;
}
.site-main--web-hosting .stacks__intro .desc-md {
  font-size: 17px;
  line-height: 1.47;
}
.site-main--web-hosting .stacks__apps {
  gap: 0.625rem;
  padding-top: 0;
}
@media (min-width: 1024px) {
.site-main--web-hosting .stacks__apps {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.site-main--web-hosting .stacks__app {
  min-width: 0;
  gap: 0.75rem;
  border-radius: 16px;
  background-color: var(--wh-chip);
  padding: 0.75rem;
  box-shadow: inset 0 0 0 1px var(--wh-chip-edge);
  transition: background-color 0.3s ease;
}
.site-main--web-hosting .stacks__app > .material-symbols-outlined {
  display: inline-flex;
  height: 2.125rem;
  width: 2.125rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background-color: var(--wh-chip-icon);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
}
/* Phones: two columns, each chip its glyph over its name. */
@media (max-width: 639.98px) {
.site-main--web-hosting .stacks__apps {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.site-main--web-hosting .stacks__app {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.875rem;
}
}
/* The six stacks arrive as a deck: stacked, fanned a little, in the middle of the space they will
   fill, and dealt out into the grid when it comes into view (v2-hosting.js measures the deck and
   adds .wh-deck, then .is-fanned; without it, or with less motion, they are simply a grid). */
@media (prefers-reduced-motion: no-preference) {
.site-main--web-hosting .stacks__apps.wh-deck:not(.is-fanned) > .stacks__app {
  transform: translate(var(--wh-dx, 0px), var(--wh-dy, 0px)) rotate(var(--wh-rot, 0deg));
  box-shadow: var(--wh-chip-deck);
}
.site-main--web-hosting .stacks__apps.wh-deck.is-fanned > .stacks__app {
  transition: transform 0.95s var(--v2-ease-out), box-shadow 0.6s linear, background-color 0.3s ease;
  transition-delay: calc(var(--wh-k, 0) * 70ms + 120ms);
}
}
.site-main--web-hosting .stacks__app > div {
  min-width: 0;
}
.site-main--web-hosting .stacks__app .item-title {
  font-size: 15px;
  line-height: 20px;
}
.site-main--web-hosting .stacks__app .caption {
  display: block;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-tertiary);
}
.site-main--web-hosting .stacks__intro .link-icon {
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
}
/* The studio: black in both themes, lit violet from one corner and blue from the other. */
.site-main--web-hosting .studio {
  --color-on-surface: #f5f5f7;
  --color-on-surface-variant: #d2d2d7;
  --color-tertiary: #a1a1a6;
  --color-primary: #6e9bff;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  /* its edge catches the two lights: violet at the top right, blue at the bottom left */
  border: 1px solid transparent;
  background:
    linear-gradient(#000000, #000000) padding-box,
    linear-gradient(225deg, rgb(var(--glow-violet) / 0.8), rgb(255 255 255 / 0.12) 28%, rgb(255 255 255 / 0.05) 62%, rgb(var(--glow-blue) / 0.75)) border-box;
  color: #f5f5f7;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.06), 0 28px 56px -30px rgb(0 0 0 / 0.5);
  color-scheme: dark;
}
/* After hours the black tile is a stage on the charcoal page: a lit top edge, and its two lights
   spill a little onto the page beneath it. */
:root[data-theme='dark'] .site-main--web-hosting .studio {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.1),
    0 44px 90px -44px rgb(var(--glow-violet) / 0.5),
    0 34px 80px -42px rgb(var(--glow-blue) / 0.55);
}
.site-main--web-hosting .studio::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 100% 0%, rgb(var(--glow-violet) / 0.55) 0%, rgb(var(--glow-violet) / 0.16) 45%, rgb(var(--glow-violet) / 0) 75%),
    radial-gradient(ellipse 70% 50% at 0% 100%, rgb(var(--glow-blue) / 0.45) 0%, rgb(var(--glow-blue) / 0.12) 45%, rgb(var(--glow-blue) / 0) 75%);
}
.site-main--web-hosting .studio__badge {
  align-self: flex-start;
  margin-bottom: 1.5rem;
  gap: 0.5rem;
  border-radius: 980px;
  background-color: rgb(255 255 255 / 0.1);
  padding: 0.375rem 0.875rem 0.375rem 0.75rem;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: #d2d2d7;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
}
.site-main--web-hosting .studio__badge .icon-16-accent {
  color: #b9a6ff;
}
.site-main--web-hosting .studio .heading-md {
  color: #ffffff;
}
.site-main--web-hosting .studio > .card-text {
  margin-top: 0.875rem;
  font-size: 17px;
  line-height: 1.47;
  color: #a1a1a6;
}
.site-main--web-hosting .studio__features {
  margin-top: 2.25rem;
}
.site-main--web-hosting .studio__features > :not([hidden]) ~ :not([hidden]) {
  margin-top: 1.25rem;
}
.site-main--web-hosting .studio__feature {
  gap: 1rem;
}
.site-main--web-hosting .studio__icon {
  display: inline-flex;
  height: 2.5rem;
  width: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  border-radius: 12px;
  background-color: rgb(255 255 255 / 0.08);
  font-size: 22px;
  color: #8fb0ff;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
}
.site-main--web-hosting .studio__feature .heading-sm {
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.016em;
  color: #f5f5f7;
}
.site-main--web-hosting .studio__feature .note {
  margin-top: 0.125rem;
  font-size: 14px;
  line-height: 20px;
  color: #a1a1a6;
}
.site-main--web-hosting .studio__footer {
  margin-top: auto;
  padding-top: 2.5rem;
}
.site-main--web-hosting .studio__cta {
  height: 2.75rem;
  border-radius: 980px;
  padding: 0 1.375rem;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #ffffff;
  box-shadow: 0 10px 30px -12px rgb(0 113 227 / 0.9);
  transition: background-color 0.25s ease;
}
.site-main--web-hosting .studio__cta:focus-visible {
  outline: 2px solid #6e9bff;
  outline-offset: 2px;
}

/* ── The closing scene: the four facts as glass, then "Get Started" ── */
.site-main--web-hosting .trust-compact {
  --v2-glow-y: 74%;
}
.site-main--web-hosting .trust-compact .highlights {
  gap: 1rem;
  overflow: visible;
  margin-bottom: 4rem;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}
@media (min-width: 640px) {
.site-main--web-hosting .trust-compact .highlights {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1200px) {
.site-main--web-hosting .trust-compact .highlights {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.site-main--web-hosting .trust-compact .highlights {
  margin-bottom: 6rem;
}
}
.site-main--web-hosting .highlights__item {
  border-radius: var(--wh-card-radius);
  background-color: rgb(255 255 255 / 0.045);
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0) 60%);
  padding: 1.75rem 1.75rem 2rem;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 0 0 1px rgb(255 255 255 / 0.08);
}
.site-main--web-hosting .highlights__label {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #a1a1a6;
}
.site-main--web-hosting .highlights__icon {
  font-size: 20px;
  color: #8fb0ff;
}
.site-main--web-hosting .highlights__value {
  margin-top: 2.5rem;
  font-size: clamp(2.75rem, 2.2rem + 1.2vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 700;
  background-image: linear-gradient(180deg, #ffffff 35%, #9db8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.08em;
}
.site-main--web-hosting .highlights__text {
  margin-top: 0.75rem;
  font-size: 15px;
  line-height: 20px;
  color: #a1a1a6;
}
/* Phones: two by two, the figures a size down so the widest (L3/L4/L7) fits its cell. */
@media (max-width: 639.98px) {
.site-main--web-hosting .trust-compact .highlights {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
}
.site-main--web-hosting .highlights__item {
  border-radius: 20px;
  padding: 1.125rem 1rem 1.25rem;
}
.site-main--web-hosting .highlights__head {
  align-items: flex-start;
  gap: 0.5rem;
  min-height: 28px; /* room for a label on two lines, so the figures line up across a row */
}
.site-main--web-hosting .highlights__label {
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.04em;
}
.site-main--web-hosting .highlights__icon {
  font-size: 18px;
}
.site-main--web-hosting .highlights__value {
  margin-top: 1.25rem;
  font-size: clamp(1.5rem, 0.9rem + 3.6vw, 2.25rem);
  letter-spacing: -0.035em;
}
.site-main--web-hosting .highlights__text {
  margin-top: 0.5rem;
  font-size: 13px;
  line-height: 18px;
}
}
/* As the four arrive, one band of light crosses their glass, cell after cell, once. */
.site-main--web-hosting .trust-compact .highlights__item {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.site-main--web-hosting .trust-compact .highlights__item:nth-child(2) { --wh-s: 1; }
.site-main--web-hosting .trust-compact .highlights__item:nth-child(3) { --wh-s: 2; }
.site-main--web-hosting .trust-compact .highlights__item:nth-child(4) { --wh-s: 3; }
@media (prefers-reduced-motion: no-preference) {
html.v2-js .site-main--web-hosting .trust-compact .highlights__item::before {
  content: '';
  position: absolute;
  inset: 0 -40%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgb(150 180 255 / 0.1) 44%, rgb(225 235 255 / 0.2) 50%, rgb(150 180 255 / 0.1) 56%, transparent 68%);
  transform: translateX(-100%);
}
html.v2-js .site-main--web-hosting .trust-compact .highlights__item.is-in::before {
  animation: wh-sweep 1.5s var(--v2-ease-io) calc(0.55s + var(--wh-s, 0) * 0.2s) both;
}
}
@keyframes wh-sweep {
from { transform: translateX(-100%); }
to { transform: translateX(100%); }
}
.site-main--web-hosting .trust-compact .get-started {
  max-width: 54rem;
  padding: 3rem 1.25rem 2.5rem;
}
/* The same glass sheen as the hero's window (v2.css retires the old one site-wide). */
:root[data-theme] .site-main--web-hosting .get-started-scene .get-started {
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.012) 42%);
}
@media (min-width: 768px) {
.site-main--web-hosting .trust-compact .get-started {
  padding: 4rem 3rem 3.25rem;
}
}
.site-main--web-hosting .trust-compact .get-started__title {
  margin-top: 0.75rem;
  text-wrap: balance;
}
.site-main--web-hosting .trust-compact .get-started__launcher {
  margin-top: 2.25rem;
  max-width: 34rem;
  gap: 0.5rem;
  border-radius: 1.5rem;
  background-color: rgb(255 255 255 / 0.06);
  padding: 0.375rem;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
}
@media (min-width: 640px) {
.site-main--web-hosting .trust-compact .get-started__launcher {
  border-radius: 980px;
}
}
.site-main--web-hosting .trust-compact .get-started__field {
  min-height: 2.75rem;
  padding-left: 1rem;
}
.site-main--web-hosting .trust-compact .get-started__field:focus-within {
  box-shadow: inset 0 0 0 2px #6e9bff;
}
.site-main--web-hosting .trust-compact .get-started__icon {
  font-size: 20px;
  color: #a1a1a6;
}
.site-main--web-hosting .trust-compact .get-started__input {
  font-size: 16px;
  line-height: 22px;
  color: #f5f5f7;
}
.site-main--web-hosting .trust-compact .get-started__input::placeholder {
  color: #a1a1a6;
}
.site-main--web-hosting .trust-compact .get-started__cta {
  height: 2.75rem;
  padding: 0 1.5rem;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  box-shadow: 0 10px 30px -12px rgb(0 113 227 / 0.9);
}
.site-main--web-hosting .trust-compact .get-started__cta:focus-visible {
  outline: 2px solid #6e9bff;
  outline-offset: 2px;
}
.site-main--web-hosting .trust-compact .get-started__assurances {
  margin-top: 1.5rem;
  gap: 0.75rem 1.5rem;
  font-size: 13px;
  line-height: 18px;
  color: #a1a1a6;
}
.site-main--web-hosting .trust-compact .get-started__assurances .icon-16-accent {
  color: #6e9bff;
}

/* ── FAQ: on the grey page, as on the homepage ── */
.site-main--web-hosting #faq .faq__item {
  border-color: var(--color-hairline);
}
.site-main--web-hosting #faq .faq {
  border-color: var(--color-hairline);
}