/* ═══════════════════════════════════════════════════════════
   Blue Arctic · Surfaces & motion
   Loaded last on every page. One card material, one way to light
   it, one entrance; the tokens are in tokens.css, the pointer and
   the entrance triggers in site.js.

   Hover never moves layout. A card that lifts travels with the
   `translate` property (composited, and separate from `transform`,
   which the entrance owns) and, while lifted, extends its hit box
   down by the lift distance (::after), so a pointer resting on the
   bottom edge cannot fall off the card, drop the hover and start the
   enter/leave flicker loop. Lifting cards opt out of scroll anchoring.

   (Release note, 2026-11-06: this sentence exists only to change the
   file's hash. The previous ?ver= URL was requested on production
   before the file shipped, and Cloudflare cached that 404.)

   Only cards that hold a button or an arrow link lift; information
   cards light up in place. Nothing animates a size, a margin or a
   border width.
   ═══════════════════════════════════════════════════════════ */

/* 0 → 1 while a surface is hovered (or holds keyboard focus): every
   light in this file is multiplied by it, so they fade together. */
@property --fx-on {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}


/* ── 1 · Glacier card material ──────────────────────────────
   Painted entirely in the background, so no card needs a pseudo-element
   or overflow:hidden. Padding-box layers are the face: the pointer light,
   frost along the top edge, a cool corner wash, the fill. Border-box
   layers show through the transparent 1px border as the rim: the pointer
   arc, a resting glint at the top centre (the card is lit from above;
   it hands over to the pointer arc on hover), the hover tint, the base
   hairline. --mx/--my are set by site.js. */
.feature-card,
.plan-card,
.ba-ps-card,
.vs-card,
.channel-card,
.stat-row > div,
.rv--cards .rv-card,
.hv-managed-card,
.res-card {
  --fx-fill:   linear-gradient(var(--paper), var(--paper));
  --fx-rim:    linear-gradient(var(--line), var(--line));
  --fx-frost:  rgba(232, 243, 251, .7);
  --fx-wash:   rgba(95, 185, 238, .08);
  --fx-arc:    45, 121, 245;
  --fx-tint:   rgba(160, 207, 238, calc(var(--fx-on) * var(--fx-tint-a, 1)));
  --fx-face:
    radial-gradient(20rem circle at var(--mx, 50%) var(--my, 0%), rgba(95, 185, 238, calc(.11 * var(--fx-on))), transparent 70%) padding-box,
    linear-gradient(180deg, var(--fx-frost), transparent 4.5rem) padding-box,
    radial-gradient(18rem 12rem at 100% 0%, var(--fx-wash), transparent 70%) padding-box,
    var(--fx-fill) padding-box,
    radial-gradient(12rem circle at var(--mx, 50%) var(--my, 0%), rgba(var(--fx-arc), calc(.75 * var(--fx-on))), transparent 70%) border-box,
    radial-gradient(15rem 3.5rem at 50% 0%, rgba(var(--fx-arc), calc(var(--fx-rest, .36) * (1 - var(--fx-on)))), transparent 70%) border-box,
    linear-gradient(var(--fx-tint), var(--fx-tint)) border-box,
    var(--fx-rim) border-box;
  position: relative;
  border-color: transparent;
  background: var(--fx-face);
  box-shadow: var(--shadow-card);
  transition: --fx-on var(--t-2) var(--ease), box-shadow var(--t-3) var(--ease), translate var(--t-3) var(--ease);
}

/* Product cards keep the stronger corner light their old ::before washes had. */
.ba-ps-card { --fx-wash: rgba(95, 185, 238, .12); }
.hv-managed-card { --fx-wash: rgba(95, 185, 238, .15); }

/* The recommended plan: an ice-lit face and a sky-to-blue rim. */
.plan-card.is-popular,
.ba-ps-card.is-popular,
.vs-card.is-highlight {
  --fx-fill:   linear-gradient(180deg, #EEF5FF 0%, var(--paper) 46%);
  --fx-rim:    linear-gradient(160deg, #8ED0F6 0%, var(--blue-500) 34%, var(--blue-700) 100%);
  --fx-frost:  rgba(255, 255, 255, 0);
  --fx-wash:   rgba(95, 185, 238, .16);
  --fx-arc:    205, 236, 252;
  --fx-rest:   .9;
  --fx-tint-a: 0;
  border-color: transparent;
  background: var(--fx-face);
  box-shadow: var(--shadow-popular);
}
.plan-card.is-popular:hover,
.ba-ps-card.is-popular:hover { border-color: transparent; }

/* Lit: hover on a mouse, or keyboard focus anywhere inside. */
.feature-card:has(:focus-visible),
.plan-card:has(:focus-visible),
.ba-ps-card:has(:focus-visible),
.vs-card:has(:focus-visible),
.hv-managed-card:has(:focus-visible),
.res-card:has(:focus-visible) { --fx-on: 1; box-shadow: var(--shadow-card-on); }
@media (hover: hover) and (pointer: fine) {
  .feature-card:hover,
  .plan-card:hover,
  .ba-ps-card:hover,
  .vs-card:hover,
  .channel-card:hover,
  .stat-row > div:hover,
  .rv--cards .rv-card:hover,
  .hv-managed-card:hover,
  .res-card:hover { --fx-on: 1; box-shadow: var(--shadow-card-on); }
  .plan-card.is-popular:hover,
  .ba-ps-card.is-popular:hover,
  .vs-card.is-highlight:hover { box-shadow: var(--shadow-popular), 0 34px 70px -30px rgba(21, 96, 232, .38); }
}

/* Lift, for cards that lead somewhere. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .plan-card:has(.btn),
  .ba-ps-card,
  .vs-card:has(.btn),
  .hv-managed-card,
  .feature-card:has(.link-arrow, .btn) { overflow-anchor: none; }
  .plan-card:has(.btn):hover,
  .ba-ps-card:hover,
  .vs-card:has(.btn):hover,
  .hv-managed-card:hover,
  .feature-card:has(.link-arrow, .btn):hover { translate: 0 calc(-1 * var(--fx-lift)); }
  /* Hit guard: covers the strip the card just vacated. */
  .plan-card:has(.btn):hover::after,
  .ba-ps-card:hover::after,
  .vs-card:has(.btn):hover::after,
  .hv-managed-card:hover::after,
  .feature-card:has(.link-arrow, .btn):hover::after {
    content: "";
    position: absolute;
    inset: 100% 0 auto;
    height: calc(var(--fx-lift) + 2px);
  }
  /* The same guard for the card's buttons: a pointer that lands on a
     button's bottom edge as the card starts to rise keeps the button. */
  :is(.plan-card, .ba-ps-card, .vs-card, .hv-managed-card, .feature-card) .btn:not(.link-arrow) { position: relative; }
  :is(.plan-card, .ba-ps-card, .vs-card, .hv-managed-card, .feature-card):hover .btn:not(.link-arrow)::after {
    content: "";
    position: absolute;
    inset: 100% 0 auto;
    height: calc(var(--fx-lift) + 2px);
  }
}

/* Popular flags: a lit pill rather than a flat label. */
.badge-pop,
.ba-ps-flag {
  background: linear-gradient(135deg, #1D68EE 0%, var(--blue-600) 50%, var(--blue-700) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 16px -8px rgba(21, 96, 232, .75);
}


/* ── 2 · Icon tiles ─────────────────────────────────────────
   Ice glass: a cool gradient, a lit top edge and a little blue depth.
   On hover a glint crosses the tile once and the icon's accent stroke
   redraws itself; on arrival (§ 9) the tile settles in and the accent
   draws. The glint snaps back off-tile with no transition, so it never
   runs backwards. */
.feature-card .feature-ico,
.vs-card .feature-ico,
.inc-list .inc-ico,
.section-mist .inc-list .inc-ico,
.ba-ps-ico,
.hv-managed-ico,
.hv-figure-ico {
  border-color: var(--ice-200);
  background:
    linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .95) 50%, transparent 62%) 130% 0 / 250% 100% no-repeat,
    linear-gradient(145deg, #F4FAFE 0%, var(--ice-100) 42%, var(--blue-100) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 1px 2px rgba(21, 96, 232, .08), 0 8px 16px -10px rgba(21, 96, 232, .45);
  transition: background-position 0s, box-shadow var(--t-2) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .feature-card:hover .feature-ico,
  .vs-card:hover .feature-ico,
  .inc-list .ba-li:hover .inc-ico,
  .ba-ps-card:hover .ba-ps-ico,
  .hv-managed-card:hover .hv-managed-ico,
  .hv-figure:hover .hv-figure-ico {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 1px 2px rgba(21, 96, 232, .1), 0 10px 20px -10px rgba(21, 96, 232, .6);
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .feature-card:hover .feature-ico,
  .vs-card:hover .feature-ico,
  .inc-list .ba-li:hover .inc-ico,
  .ba-ps-card:hover .ba-ps-ico,
  .hv-managed-card:hover .hv-managed-ico,
  .hv-figure:hover .hv-figure-ico {
    background-position: -30% 0, 0 0;
    transition: background-position .9s var(--ease), box-shadow var(--t-2) var(--ease);
  }
  .feature-card:hover .feature-ico .acc,
  .vs-card:hover .feature-ico .acc,
  .inc-list .ba-li:hover .inc-ico .acc,
  .ba-ps-card:hover .ba-ps-ico .acc,
  .hv-managed-card:hover .hv-managed-ico .acc,
  .hv-figure:hover .hv-figure-ico .acc,
  .hv-included-item:hover .hv-included-ico .acc { animation: fx-draw .75s var(--ease-draw); }
}
/* Accent strokes are at most 59 units long, so a 60-unit dash draws any
   of them whole. The dash exists only while the animation runs. */
@keyframes fx-draw {
  from { stroke-dasharray: 60; stroke-dashoffset: 60; }
  to   { stroke-dasharray: 60; stroke-dashoffset: 0; }
}


/* ── 3 · Buttons ────────────────────────────────────────────
   Primary: a lit gradient with an inset top edge and a blue shadow; on
   hover it deepens (a tint layer driven by --fx-on, so the change eases
   instead of snapping between two gradients) and a single sheen crosses
   it. On navy the tint lightens instead. Press settles it by 2%. */
.btn {
  transition: background-color var(--t-1) var(--ease), border-color var(--t-1) var(--ease), color var(--t-1) var(--ease),
              box-shadow var(--t-2) var(--ease), --fx-on var(--t-2) var(--ease), background-position 0s, scale var(--t-1) var(--ease);
}
.btn-primary {
  --fx-btn-tint: rgba(4, 28, 88, calc(.24 * var(--fx-on)));
  background-color: var(--blue-600);
  background-image:
    linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .28) 50%, transparent 62%),
    linear-gradient(var(--fx-btn-tint), var(--fx-btn-tint)),
    linear-gradient(180deg, #1F6BF0 0%, #1257D8 100%);
  background-size: 250% 100%, auto, auto;
  background-position: 130% 0, 0 0, 0 0;
  background-repeat: no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(8, 25, 45, .14), 0 8px 18px -10px rgba(21, 96, 232, .7);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  --fx-on: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 2px 4px rgba(8, 25, 45, .12), 0 14px 28px -12px rgba(21, 96, 232, .85);
}
.bahero .btn-primary,
.hv-hero .btn-primary,
.hv-final .btn-primary,
.cta-band .btn-primary,
.hv-included .btn-primary { --fx-btn-tint: rgba(150, 205, 255, calc(.16 * var(--fx-on))); }
.btn-primary:active { scale: .98; }

.btn-secondary {
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(8, 25, 45, .06);
}
.btn-secondary:hover {
  background: #F3F8FE;
  box-shadow: inset 0 1px 0 #fff, 0 8px 18px -12px rgba(21, 96, 232, .5);
}
.btn-secondary:active,
.btn-on-dark:active { scale: .98; }

.btn-on-dark { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.btn-on-dark:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 10px 26px -14px rgba(95, 185, 238, .6); }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn-primary:hover {
    background-position: -30% 0, 0 0, 0 0;
    transition: background-color var(--t-1) var(--ease), border-color var(--t-1) var(--ease), color var(--t-1) var(--ease),
                box-shadow var(--t-2) var(--ease), --fx-on var(--t-2) var(--ease), background-position .85s var(--ease), scale var(--t-1) var(--ease);
  }
}

.link-arrow .ico,
p.link-arrow a::after { transition: transform var(--t-2) var(--ease); }
.link-arrow:hover .ico,
p.link-arrow a:hover::after { transform: translateX(4px); }


/* ── 4 · Segmented controls and tabs ─────────────────────── */
.ba-ps-switch,
.plans-tabs {
  background: linear-gradient(180deg, var(--frost), var(--mist));
  box-shadow: inset 0 1px 2px rgba(8, 25, 45, .06);
}
.ba-ps-opt span,
.plans-tab { transition: background-color var(--t-1) var(--ease), color var(--t-1) var(--ease), box-shadow var(--t-2) var(--ease); }
.ba-ps-opt input:not(:checked) + span:hover,
.plans-tab:not([aria-selected="true"]):hover { color: var(--ink); background: rgba(255, 255, 255, .6); }
.ba-ps-opt input:checked + span,
.plans-tab[aria-selected="true"] {
  background: var(--paper);
  box-shadow: 0 0 0 1px rgba(21, 96, 232, .16), 0 1px 2px rgba(8, 25, 45, .08), 0 8px 18px -10px rgba(21, 96, 232, .45);
}
.hv-rv-tab { transition: border-color var(--t-1) var(--ease), background-color var(--t-1) var(--ease), box-shadow var(--t-2) var(--ease); }
.hv-rv-tab[aria-selected="true"] { box-shadow: 0 0 0 1px var(--blue-500), 0 10px 24px -14px rgba(21, 96, 232, .55); }


/* ── 5 · Included-feature checks ─────────────────────────────
   On light surfaces the check sits on a soft green disc. The disc is 2px
   wider than the old glyph and gives the 2px back in negative margin, so
   the text starts where it did and no line rewraps. Dark bands keep their
   own glyph colours. */
:is(.is-style-checklist, .plan-features) li:not(:is(.section-dark, .cta-band, .trial-band, .bahero, .hv-included, .hv-why, .hv-final) *)::before {
  width: 17px;
  height: 17px;
  margin: .22em -1px 0;
  background: var(--fx-check) center / contain no-repeat;
  -webkit-mask: none;
  mask: none;
}


/* ── 6 · FAQ ─────────────────────────────────────────────────
   The chevron sits in a small ice disc that fills blue when the answer
   is open; the answer slides open where the browser can animate it. */
.wp-block-details.faq-item {
  border-color: var(--line);
  transition: border-color var(--t-2) var(--ease), box-shadow var(--t-3) var(--ease), background-color var(--t-2) var(--ease);
}
.wp-block-details.faq-item > summary { position: relative; transition: color var(--t-1) var(--ease); }
.wp-block-details.faq-item > summary::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(1.3rem - 7px);
  width: 32px;
  height: 32px;
  margin-top: -16px;
  border-radius: 50%;
  background: var(--frost);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease);
}
.wp-block-details.faq-item > summary::after { position: relative; transition: transform var(--t-3) var(--ease), background-color var(--t-2) var(--ease); }
.wp-block-details.faq-item > summary:hover::before { background: var(--ice-100); box-shadow: inset 0 0 0 1px var(--ice-200); }
.wp-block-details.faq-item[open] {
  border-color: var(--ice-200);
  background: linear-gradient(180deg, #F6FAFE 0, var(--paper) 4.5rem);
  box-shadow: var(--shadow-card-on);
}
.wp-block-details.faq-item[open] > summary::before { background: var(--blue-600); box-shadow: 0 6px 14px -6px rgba(21, 96, 232, .6); }
.wp-block-details.faq-item[open] > summary::after { background: #fff; }
@media (hover: hover) and (pointer: fine) {
  .wp-block-details.faq-item:not([open]):hover { border-color: var(--ice-200); box-shadow: var(--shadow-card-on); }
}
@supports selector(::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    .wp-block-details.faq-item { interpolate-size: allow-keywords; }
    .wp-block-details.faq-item::details-content {
      block-size: 0;
      overflow-y: clip;
      transition: block-size var(--t-3) var(--ease), content-visibility var(--t-3) allow-discrete;
    }
    .wp-block-details.faq-item[open]::details-content { block-size: auto; }
  }
}


/* ── 7 · Tables ──────────────────────────────────────────────
   Rows answer the pointer with an ice wash; the header reads as a lit
   rail; the recommended column carries a blue cap. Backgrounds only, so
   no column ever changes width. */
.spec-table thead th,
.compare-table thead th { background: linear-gradient(180deg, #FBFCFD, var(--mist)); }
.spec-table thead th { box-shadow: inset 0 -1px 0 var(--line-2); }
.compare-table thead th { border-bottom-color: transparent; box-shadow: inset 0 -2px 0 var(--ice-200); }
.compare-table thead th.compare-col-highlight,
.compare-table thead th:has(.compare-col-pop) { box-shadow: inset 0 3px 0 var(--blue-600), inset 0 -2px 0 var(--ice-200); }
.spec-table tbody tr > *,
.compare-table tbody tr:not(.compare-group) > * { transition: background-color var(--t-1) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .spec-table tbody tr:hover > *,
  .compare-table tbody tr:not(.compare-group):hover > * { background-color: rgba(230, 243, 251, .6); }
}
.table-wrap { transition: box-shadow var(--t-3) var(--ease); }


/* ── 8 · Infrastructure presentation ─────────────────────────
   Stat readouts, numbered steps, photographs as viewports, and the
   light that runs along section seams. */

/* Stat readouts: a sky rail across the top (drawn on arrival), steady
   tabular figures. */
.stat-row > div::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 1.4rem;
  right: 1.4rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--sky-400) 25%, var(--blue-600) 75%, transparent);
  opacity: .85;
}
.stat-row strong { font-variant-numeric: tabular-nums; color: var(--navy-900); }
/* The caption under a figure is a block of its own, set tight, not a line
   of the paragraph's running text. */
body:not(.theme-landing) .stat-row span:not(.stat-unit) { display: block; margin-top: .55rem; line-height: 1.45; }
body:not(.theme-landing) .stat-row strong { font-size: clamp(2rem, 1.4rem + 1.1vw, 2.5rem); line-height: 1.1; }

/* Steps: lit badges joined by a rail (drawn on arrival). */
.step-list > .ba-li { position: relative; }
.step-num {
  background: linear-gradient(150deg, #1F6BF0 0%, var(--blue-600) 45%, var(--blue-700) 100%);
  box-shadow: 0 0 0 4px var(--ice-100), inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 18px -8px rgba(21, 96, 232, .7);
}
.section-mist .step-num { box-shadow: 0 0 0 4px var(--paper), inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 18px -8px rgba(21, 96, 232, .7); }
.step-list > .ba-li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(1.1rem - 1px);
  top: calc(2.2rem + .45rem);
  bottom: calc(-1.1rem + .45rem);
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--ice-200), rgba(201, 231, 248, .35));
  transform-origin: 50% 0;
}

/* Photographs as viewports: the frame clips, corner brackets mark the
   view, and the picture leans in a little under the pointer. */
.split-media > .wp-block-image {
  position: relative;
  overflow: clip;
  margin: 0;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lift), 0 30px 60px -36px rgba(21, 96, 232, .35);
}
.split-media > .wp-block-image img {
  border-radius: 0;
  box-shadow: none;
  transition: scale 1.2s var(--ease);
}
.split-media > .wp-block-image::after {
  content: "";
  position: absolute;
  inset: .9rem;
  z-index: 2;
  pointer-events: none;
  --c: rgba(255, 255, 255, .78);
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / 18px 2px,
    linear-gradient(var(--c), var(--c)) 0 0 / 2px 18px,
    linear-gradient(var(--c), var(--c)) 100% 0 / 18px 2px,
    linear-gradient(var(--c), var(--c)) 100% 0 / 2px 18px,
    linear-gradient(var(--c), var(--c)) 0 100% / 18px 2px,
    linear-gradient(var(--c), var(--c)) 0 100% / 2px 18px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 18px 2px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 2px 18px;
  background-repeat: no-repeat;
  filter: drop-shadow(0 1px 2px rgba(5, 11, 20, .45));
}
.split-media > .wp-block-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  background: linear-gradient(180deg, rgba(95, 185, 238, .1), transparent 40%, rgba(5, 11, 20, .18));
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .split-media > .wp-block-image:hover img,
  .hv-photo:hover img,
  .res-card:hover .res-card-image img { scale: 1.035; }
  .hv-photo img,
  .res-card-image img { transition: scale 1.2s var(--ease); }
}

/* Section seams: mist bands open with a hairline of arctic light, and a
   faint rack-floor grid of points settles in from the far corner. */
.section-mist {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(90deg, transparent, rgba(95, 185, 238, .4) 50%, transparent) top / 100% 1px no-repeat,
    radial-gradient(48rem 20rem at 100% 0%, rgba(95, 185, 238, .06), transparent 70%),
    var(--mist);
}
.section-mist::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(rgba(21, 96, 232, .16) 1px, transparent 1.5px) 0 0 / 22px 22px;
  -webkit-mask-image: radial-gradient(56rem 24rem at 100% 0%, #000, transparent 72%);
  mask-image: radial-gradient(56rem 24rem at 100% 0%, #000, transparent 72%);
}

/* Heroes: the canvas ends on the same seam, and digital waves run along
   its foot, in the bottom padding below the copy (they fade out within
   ~70px of the edge, so no line crosses text), and fade out before the
   photograph. The waves ride in the content layer (above the backdrop
   photo, beneath the copy) and are static here; only the CTA band's
   drift. .bahero clips them. */
.bahero {
  background:
    linear-gradient(90deg, transparent 4%, rgba(95, 185, 238, .45) 50%, transparent 96%) bottom / 100% 1px no-repeat,
    linear-gradient(180deg, var(--bahero-canvas) 0%, var(--bahero-canvas-mid) 58%, var(--bahero-canvas-deep) 100%);
}
.bahero-inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -60px;
  width: 100vw;
  height: 240px;
  translate: -50% 0;
  pointer-events: none;
  opacity: .7;
  /* The waves are the mask over a sky fill, not a background image: as a
     background image the layer outsizes a compact hero's copy on phones
     and becomes the page's LCP element. Masks are never LCP candidates. */
  background: var(--sky-400);
  -webkit-mask-image: var(--fx-waves), linear-gradient(90deg, #000 0%, #000 28%, transparent 70%), linear-gradient(0deg, #000 25%, transparent 55%);
  -webkit-mask-size: 1200px 240px, auto, auto;
  -webkit-mask-repeat: repeat-x, no-repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-image: var(--fx-waves), linear-gradient(90deg, #000 0%, #000 28%, transparent 70%), linear-gradient(0deg, #000 25%, transparent 55%);
  mask-size: 1200px 240px, auto, auto;
  mask-repeat: repeat-x, no-repeat, no-repeat;
  mask-composite: intersect;
}
/* Where the photograph sits beneath the copy, it is the foot of the hero:
   no waves across it. */
.bahero--company.has-backdrop .bahero-inner::before { display: none; }
@media (max-width: 900px) {
  .bahero--product.has-backdrop .bahero-inner::before { display: none; }
}
/* Phones have less bottom padding: the band sits lower still. */
@media (max-width: 640px) {
  .bahero-inner::before { bottom: -76px; }
}


/* ── 9 · CTA band ────────────────────────────────────────────
   The waves drift slowly behind the closing call to action (only while
   the band is on screen), and a soft light follows the pointer. */
.cta-band {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -70px;
  z-index: 0;
  width: calc(100% + 1200px);
  height: 240px;
  pointer-events: none;
  opacity: .55;
  background: var(--fx-waves) 0 0 / 1200px 240px repeat-x;
}
.cta-band::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 40rem;
  height: 40rem;
  margin: -20rem 0 0 -20rem;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(95, 185, 238, .16), rgba(21, 96, 232, .06) 55%, transparent);
  opacity: 0;
  translate: var(--mx, 50%) var(--my, 0);
  transition: opacity var(--t-3) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .cta-band:hover::after { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .cta-band::before { animation: fx-drift 90s linear infinite paused; }
  .cta-band.fx-live::before { animation-play-state: running; }
}
@keyframes fx-drift { to { translate: -1200px 0; } }
/* Phones: less bottom padding, so the waves sit lower still, under the copy. */
@media (max-width: 640px) {
  .cta-band::before { bottom: -100px; }
}


/* ── 10 · Homepage pieces ────────────────────────────────── */

/* "Included on every plan" (navy band): glass tiles with a pointer rim. */
.hv-included-item {
  position: relative;
  transition: border-color var(--t-2) var(--ease), background-color var(--t-2) var(--ease), box-shadow var(--t-3) var(--ease);
}
.hv-included-item::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(14rem circle at var(--mx, 50%) var(--my, 0%), rgba(142, 210, 246, .75), transparent 70%);
  -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);
  opacity: 0;
  transition: opacity var(--t-2) var(--ease);
}
.hv-included-ico { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 18px -10px rgba(21, 96, 232, .7); }
@media (hover: hover) and (pointer: fine) {
  .hv-included-item:hover { border-color: rgba(95, 185, 238, .32); box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .7), 0 0 40px -18px rgba(95, 185, 238, .35); }
  .hv-included-item:hover::before { opacity: 1; }
}

/* The proof bar's segments. */
.hv-figure { transition: background-color var(--t-2) var(--ease), box-shadow var(--t-3) var(--ease); }


/* ── 11 · Entrances ──────────────────────────────────────────
   site.js arms blocks that start below the fold (.fx-armed) and adds
   .fx-in as each one arrives; blocks arriving together stagger by
   --fx-i. Anything on screen at load, everything under reduced motion,
   and anything without script stays exactly where it is. Opacity and
   transform only; the arrival never moves another block. */
.fx-armed { opacity: 0; overflow-anchor: none; }
.fx-armed.fx-in {
  opacity: 1;
  animation: fx-rise var(--t-reveal) var(--ease) backwards;
  animation-delay: calc(var(--fx-i, 0) * 75ms);
}
.fx-armed:focus-within { opacity: 1; }
@keyframes fx-rise { from { opacity: 0; transform: translate3d(0, 18px, 0); } }

/* What arrives with a card: its icon tile settles and its accent draws;
   a stat's rail and a step's rail draw. */
.fx-in:not(.fx-done) :is(.feature-ico, .inc-ico, .ba-ps-ico, .hv-managed-ico) {
  animation: fx-settle .7s var(--ease) backwards;
  animation-delay: calc(var(--fx-i, 0) * 75ms + 140ms);
}
.fx-in:not(.fx-done) :is(.feature-ico, .inc-ico, .ba-ps-ico, .hv-managed-ico) .acc {
  animation: fx-draw 1s var(--ease-draw) backwards;
  animation-delay: calc(var(--fx-i, 0) * 75ms + 260ms);
}
.stat-row > div.fx-in:not(.fx-done)::before {
  animation: fx-rail-x .9s var(--ease) backwards;
  animation-delay: calc(var(--fx-i, 0) * 75ms + 200ms);
}
.step-list > .ba-li.fx-in:not(.fx-done)::before {
  animation: fx-rail-y .8s var(--ease) backwards;
  animation-delay: calc(var(--fx-i, 0) * 75ms + 300ms);
}
@keyframes fx-settle { from { opacity: 0; transform: scale(.82); } }
@keyframes fx-rail-x { from { transform: scaleX(0); } }
@keyframes fx-rail-y { from { transform: scaleY(0); } }


/* ── 12 · Scenes ─────────────────────────────────────────────
   A drawing beside a section's heading where the copy explains how the
   hosting is built (inc/scenes.php places it; the SVGs are in
   assets/scenes). A navy stage, drawn in arctic line work. At rest it is
   a complete picture; it moves only while on screen (.fx-live from
   site.js) and only with motion allowed, by opacity, transform and
   stroke offsets inside its own fixed box. */
.ba-scene {
  position: relative;
  isolation: isolate;
  margin: 0;
  padding: clamp(4px, .8vw, 10px);
  border-radius: 24px;
  overflow: clip;
  overflow-anchor: none;
  background:
    radial-gradient(90% 70% at 82% 0%, rgba(45, 121, 245, .30), transparent 62%),
    radial-gradient(70% 60% at 0% 100%, rgba(95, 185, 238, .13), transparent 70%),
    linear-gradient(160deg, var(--navy-800) 0%, var(--navy-900) 55%, var(--navy-950) 100%);
  box-shadow:
    inset 0 1px 0 rgba(201, 231, 248, .16),
    inset 0 0 0 1px rgba(201, 231, 248, .08),
    0 40px 70px -40px rgba(8, 20, 32, .55),
    0 18px 40px -26px rgba(21, 96, 232, .40);
}
/* A floor of points, lit from the top corner. */
.ba-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(201, 231, 248, .18) 1px, transparent 1.5px) 0 0 / 18px 18px;
  -webkit-mask-image: radial-gradient(85% 75% at 82% 8%, #000, transparent 75%);
  mask-image: radial-gradient(85% 75% at 82% 8%, #000, transparent 75%);
}
.ba-scene svg { display: block; width: 100%; height: auto; font-family: var(--font-body); }

/* Beside the heading on wide screens: the container becomes two columns
   for the heading row only; everything after the drawing spans both. The
   migration and Website Care steps sit beside the drawing too (it spans
   their row). */
@media (min-width: 1000px) {
  .has-scene > .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 31rem);
    column-gap: clamp(40px, 5vw, 80px);
    align-items: center;
  }
  .has-scene > .container > * { grid-column: 1 / -1; }
  .has-scene > .container > .section-head { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .has-scene > .container > .ba-scene { grid-column: 2; grid-row: 1; margin-bottom: var(--space-component); }
  .has-scene > .container > :is(.ba-scene--move, .ba-scene--care) { grid-row: 1 / span 2; align-self: start; margin-bottom: 0; }
  .has-scene > .container > :is(.ba-scene--move, .ba-scene--care) + * { grid-column: 1; grid-row: 2; align-self: start; margin-top: var(--space-component); }
}
@media (max-width: 999.98px) {
  .ba-scene { max-width: 36rem; margin-block: 1.75rem 2.5rem; }
}

/* Words and line work. */
.ba-scene .sc-t { fill: #A8BFD3; font-size: 13px; font-weight: 500; }
.ba-scene .sc-h { fill: #F4F9FD; font: 700 16.5px var(--font-display); letter-spacing: -.01em; }
.ba-scene .sc-m { fill: #E6F0F8; font-size: 14px; font-weight: 600; }
.ba-scene .sc-s { fill: #95AEC4; font-size: 12.5px; font-weight: 500; }
.ba-scene .sc-sky { fill: #8ED0F6; }
.ba-scene .sc-on { fill: #E6F3FB; }
.ba-scene :is(.sc-wire, .sc-flow, .sc-lead, .sc-floor, .sc-rail, .sc-vent, .sc-air, .sc-rule, .sc-tick, .sc-ripple, .sc-lock path, .sc-lock rect, .sc-fault path, .sc-fan) { fill: none; }
.ba-scene .sc-glyph { fill: #8ED0F6; }
.ba-scene .sc-fan { stroke: #8ED0F6; stroke-width: 1.6; stroke-linecap: round; transform-box: fill-box; transform-origin: center; }
.ba-scene .sc-wire { stroke: rgba(143, 208, 246, .32); stroke-width: 1.5; }
.ba-scene .sc-flow { stroke: #8ED0F6; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 2 20; }
.ba-scene .sc-lead { stroke: rgba(168, 191, 211, .32); }
.ba-scene .sc-lead.is-ours { stroke: rgba(142, 208, 246, .7); }
.ba-scene .sc-floor { stroke: rgba(201, 231, 248, .22); }
.ba-scene .sc-floor.sc-dim { stroke: rgba(201, 231, 248, .09); }
.ba-scene .sc-tile circle { fill: rgba(142, 208, 246, .45); }
.ba-scene .sc-air { stroke: #8ED0F6; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.ba-scene .sc-rule { stroke: rgba(201, 231, 248, .12); }
.ba-scene .sc-chip { fill: rgba(95, 185, 238, .10); stroke: rgba(142, 208, 246, .38); }
.ba-scene .sc-box { fill: rgba(18, 40, 61, .82); stroke: rgba(142, 208, 246, .26); }
.ba-scene .sc-node { fill: rgba(18, 40, 61, .9); stroke: rgba(142, 208, 246, .34); }
.ba-scene .sc-slot { fill: #0F2438; stroke: rgba(142, 208, 246, .30); }
.ba-scene .sc-row { fill: rgba(201, 231, 248, .045); stroke: rgba(201, 231, 248, .12); }
.ba-scene .sc-row.is-new { fill: rgba(95, 185, 238, .12); stroke: rgba(142, 208, 246, .42); }
.ba-scene .sc-tick { stroke: #4ADE80; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ba-scene .sc-okdisc { fill: rgba(74, 222, 128, .14); }
.ba-scene .sc-lock :is(path, rect) { stroke: #E6F3FB; stroke-width: 1.5; }
.ba-scene .sc-led.is-ok { fill: #4ADE80; }
.ba-scene .sc-led.is-act { fill: #8ED0F6; }
.ba-scene .sc-fault { opacity: 0; }
.ba-scene .sc-fault circle { fill: rgba(245, 181, 74, .16); stroke: #F5B54A; }
.ba-scene .sc-fault path { stroke: #F5B54A; stroke-width: 1.6; stroke-linecap: round; }

/* The rack. */
.ba-scene .sc-rack { fill: #0D2133; stroke: rgba(201, 231, 248, .24); }
.ba-scene .sc-rail { stroke: rgba(201, 231, 248, .24); stroke-dasharray: 2 5; }
.ba-scene .sc-unit { fill: #17344F; stroke: rgba(201, 231, 248, .16); }
.ba-scene .sc-unit.is-srv { fill: #14304A; }
.ba-scene .sc-vent { stroke: rgba(201, 231, 248, .14); }
.ba-scene .sc-port { fill: #0A1928; stroke: rgba(201, 231, 248, .2); stroke-width: .6; }
.ba-scene .sc-bay { fill: #0F2336; stroke: rgba(201, 231, 248, .14); stroke-width: .6; }
.ba-scene :is(.sc-pled, .sc-bled, .sc-dled) { fill: #5FB9EE; }
.ba-scene .sc-sweep { fill: rgba(142, 208, 246, .10); opacity: 0; }

/* Layers. */
.ba-scene .sc-ptop { fill: rgba(45, 121, 245, .10); stroke: rgba(142, 208, 246, .55); }
.ba-scene .sc-pside { fill: rgba(21, 96, 232, .22); stroke: rgba(142, 208, 246, .22); }
.ba-scene .is-site .sc-ptop { fill: rgba(95, 185, 238, .24); stroke: #8ED0F6; }
.ba-scene .is-site .sc-pside { fill: rgba(45, 121, 245, .38); }
.ba-scene .sc-pkt { opacity: 0; }
.ba-scene .sc-pkt.is-clean { fill: #CFEBFC; }
.ba-scene .sc-pkt.is-bad { fill: #F5B54A; }
.ba-scene .sc-ripple { stroke: #F5B54A; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }

/* The move. */
.ba-scene .sc-chip.is-domain { fill: rgba(201, 231, 248, .09); stroke: rgba(142, 208, 246, .5); }
.ba-scene .sc-card-new { stroke: rgba(142, 208, 246, .55); }
.ba-scene .sc-dns-old { stroke-dasharray: 3 5; opacity: .45; }
.ba-scene .sc-badge rect { fill: rgba(201, 231, 248, .07); stroke: rgba(201, 231, 248, .2); }
.ba-scene .sc-live rect { fill: rgba(74, 222, 128, .12); stroke: rgba(74, 222, 128, .42); }
.ba-scene .sc-copy-f { opacity: 0; }

/* Care. */
.ba-scene .sc-radar { fill: rgba(142, 208, 246, .22); stroke: rgba(142, 208, 246, .6); stroke-width: 1; transform-box: view-box; }
.ba-scene .sc-tile-dot { fill: #8ED0F6; }

@media (prefers-reduced-motion: no-preference) {
  /* Rack: status lights, port and drive activity, current on the feeds, air from the floor, a light down the rack. */
  .ba-scene.fx-live .sc-led.is-act { animation: sc-blink 1.7s ease-in-out infinite; animation-delay: var(--d, 0s); }
  .ba-scene.fx-live :is(.sc-pled, .sc-bled) { animation: sc-flicker 2.4s linear infinite; animation-delay: var(--d, 0s); }
  .ba-scene.fx-live .sc-flow { animation: sc-flow 1.1s linear infinite; animation-delay: var(--d, 0s); }
  .ba-scene.fx-live .sc-air { animation: sc-air 2.4s ease-out infinite; animation-delay: var(--d, 0s); }
  .ba-scene.fx-live .sc-sweep { animation: sc-sweep 7s ease-in-out infinite; }
  .ba-scene.fx-live .sc-fan { animation: sc-spin 2.8s linear infinite; }
  .ba-scene.fx-live .sc-radar { animation: sc-spin 4s linear infinite; }

  /* Paths: one part fails at a time (a feed, a route, a drive); the site stays online. 12 s cycle. */
  .ba-scene.fx-live :is(.sc-pwa, .sc-pwa-t, .sc-pwa-s, .sc-pwa-f) { animation: sc-fail-1 12s ease-in-out infinite; }
  .ba-scene.fx-live :is(.sc-nwa, .sc-nwa-t, .sc-nwa-s, .sc-nwa-f) { animation: sc-fail-2 12s ease-in-out infinite; }
  .ba-scene.fx-live .sc-pwa-f { animation: sc-flow 1.1s linear infinite, sc-fail-1 12s ease-in-out infinite; }
  .ba-scene.fx-live .sc-nwa-f { animation: sc-flow 1.1s linear infinite, sc-fail-2 12s ease-in-out infinite; }
  .ba-scene.fx-live .sc-pwa-x { animation: sc-x-1 12s ease-in-out infinite; }
  .ba-scene.fx-live .sc-nwa-x { animation: sc-x-2 12s ease-in-out infinite; }
  .ba-scene.fx-live .sc-drv1-x { animation: sc-x-3 12s ease-in-out infinite; }
  .ba-scene.fx-live .sc-drv1-l { animation: sc-rebuild 12s linear infinite; }

  /* Layers: clean requests reach the site; bad ones stop at a layer. 6 s cycle. */
  .ba-scene.fx-live .sc-pkt.is-clean { animation: sc-fall 6s linear infinite; animation-delay: var(--d, 0s); }
  .ba-scene.fx-live .sc-pkt.sc-stop1 { animation: sc-stop-1 6s linear infinite; animation-delay: var(--d, 0s); }
  .ba-scene.fx-live .sc-pkt.sc-stop2 { animation: sc-stop-2 6s linear infinite; animation-delay: var(--d, 0s); }
  .ba-scene.fx-live .sc-pkt.sc-stop3 { animation: sc-stop-3 6s linear infinite; animation-delay: var(--d, 0s); }
  .ba-scene.fx-live .sc-stop1-r { animation: sc-rip-1 6s ease-out infinite; animation-delay: var(--d, 0s); }
  .ba-scene.fx-live .sc-stop2-r { animation: sc-rip-2 6s ease-out infinite; animation-delay: var(--d, 0s); }
  .ba-scene.fx-live .sc-stop3-r { animation: sc-rip-3 6s ease-out infinite; animation-delay: var(--d, 0s); }

  /* The move: copy, test, switch, then hold. 16 s cycle. */
  .ba-scene.fx-live :is(.sc-copy, .sc-check) { animation: sc-in 16s var(--ease) infinite both; animation-delay: var(--d, 0s); }
  .ba-scene.fx-live .sc-copy-f { animation: sc-flow 1.1s linear infinite, sc-brief 16s linear infinite both; animation-delay: 0s, .6s; }
  .ba-scene.fx-live :is(.sc-dns-new, .sc-dns-new-f, .sc-live) { animation: sc-in 16s var(--ease) infinite both; animation-delay: 6.6s; }
  .ba-scene.fx-live .sc-dns-new-f { animation: sc-flow 1.1s linear infinite, sc-in 16s var(--ease) infinite both; animation-delay: 0s, 6.6s; }
  .ba-scene.fx-live .sc-untouched { animation: sc-in 16s var(--ease) infinite both; animation-delay: 7.2s; }
  .ba-scene.fx-live .sc-dns-old { animation: sc-out 16s var(--ease) infinite both; animation-delay: 6.6s; }
}
@keyframes sc-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes sc-flicker { 0%, 100% { opacity: 1; } 8% { opacity: .2; } 14% { opacity: 1; } 52% { opacity: .35; } 58% { opacity: 1; } }
@keyframes sc-flow { to { stroke-dashoffset: -22; } }
@keyframes sc-air { from { opacity: 0; transform: translateY(10px); } 30% { opacity: .7; } to { opacity: 0; transform: translateY(-14px); } }
@keyframes sc-sweep { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 70% { opacity: 1; } 85%, 100% { opacity: 0; transform: translateY(284px); } }
@keyframes sc-spin { to { transform: rotate(1turn); } }
@keyframes sc-fail-1 { 0%, 8% { opacity: 1; } 11%, 30% { opacity: .18; } 33%, 100% { opacity: 1; } }
@keyframes sc-fail-2 { 0%, 41% { opacity: 1; } 44%, 63% { opacity: .18; } 66%, 100% { opacity: 1; } }
@keyframes sc-x-1 { 0%, 8% { opacity: 0; } 11%, 30% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes sc-x-2 { 0%, 41% { opacity: 0; } 44%, 63% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes sc-x-3 { 0%, 74% { opacity: 0; } 77%, 84% { opacity: 1; } 87%, 100% { opacity: 0; } }
@keyframes sc-rebuild { 0%, 74% { fill: #5FB9EE; opacity: 1; } 76%, 84% { fill: #F5B54A; } 86% { fill: #5FB9EE; opacity: .3; } 88% { opacity: 1; } 90% { opacity: .3; } 92% { opacity: 1; } 94% { opacity: .3; } 96%, 100% { fill: #5FB9EE; opacity: 1; } }
@keyframes sc-fall { 0% { opacity: 0; transform: translateY(0); } 6% { opacity: 1; } 62% { opacity: 1; transform: translateY(334px); } 72%, 100% { opacity: 0; transform: translateY(334px); } }
@keyframes sc-stop-1 { 0% { opacity: 0; transform: translateY(0); } 6% { opacity: 1; } 14% { opacity: 1; transform: translateY(60px); } 22%, 100% { opacity: 0; transform: translateY(60px); } }
@keyframes sc-stop-2 { 0% { opacity: 0; transform: translateY(0); } 6% { opacity: 1; } 26% { opacity: 1; transform: translateY(126px); } 34%, 100% { opacity: 0; transform: translateY(126px); } }
@keyframes sc-stop-3 { 0% { opacity: 0; transform: translateY(0); } 6% { opacity: 1; } 38% { opacity: 1; transform: translateY(192px); } 46%, 100% { opacity: 0; transform: translateY(192px); } }
@keyframes sc-rip-1 { 0%, 13% { opacity: 0; transform: scale(.3); } 15% { opacity: .9; } 28%, 100% { opacity: 0; transform: scale(1.25); } }
@keyframes sc-rip-2 { 0%, 25% { opacity: 0; transform: scale(.3); } 27% { opacity: .9; } 40%, 100% { opacity: 0; transform: scale(1.25); } }
@keyframes sc-rip-3 { 0%, 37% { opacity: 0; transform: scale(.3); } 39% { opacity: .9; } 52%, 100% { opacity: 0; transform: scale(1.25); } }
@keyframes sc-in { 0% { opacity: 0; transform: translateY(4px); } 3%, 60% { opacity: 1; transform: none; } 63%, 100% { opacity: 0; transform: none; } }
@keyframes sc-out { 0% { opacity: .45; } 3%, 60% { opacity: .1; } 63%, 100% { opacity: .45; } }
@keyframes sc-brief { 0% { opacity: 0; } 3%, 18% { opacity: 1; } 21%, 100% { opacity: 0; } }


/* ── 13 · Reduced motion and print ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fx-armed { opacity: 1; }
  .cta-band::before { animation: none; }
}
@media print {
  .fx-armed { opacity: 1 !important; animation: none !important; }
  .ba-scene { box-shadow: none; }
  .bahero-inner::before,
  .cta-band::before,
  .cta-band::after,
  .split-media > .wp-block-image::after { display: none; }
}