/*
 * v2: the site's second look, a mix of two references. By day it reads like Apple's site: a
 * soft grey page, white tiles, big tight type, blue pill buttons, a frosted bar on top. After
 * hours, and in the "scenes" that every page opens with, it is cinema in the manner of
 * Spaceship: black, one electric-blue light, white type, translucent pills, and motion that
 * follows the scroll (assets/js/motion.js). Loaded after site.css, so it restyles the same
 * markup; nothing here changes a service, plan, price or link. The page-specific parts follow
 * the shared ones, each under its own heading.
 */

/* ── Tokens ──────────────────────────────────────────────────────────────────────────────── */
/* motion.js writes these on the element that uses them and nowhere else; registered as not
   inherited, a new value each frame restyles that element alone, not everything inside it. */
@property --v2-c { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --v2-py { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --v2-o { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --v2-tx { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --v2-ty { syntax: '<number>'; inherits: false; initial-value: 0; }

:root {
  --v2-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* motion: movement eases out over longer; opacity is linear, shorter and a beat later */
  --v2-ease-out: cubic-bezier(0, 0, 0.35, 1);
  --v2-ease-io: cubic-bezier(0.55, 0, 0.35, 1);
  /* a scene opening out from a rounded stage (motion.js --v2-c): side inset and corner radius */
  --v2-frame-x: min(3.5vw, 52px);
  --v2-frame-r: 44px;
  --v2-radius-tile: 28px;
  --v2-radius-card: 20px;
  --glow-blue: 41 72 255;
  --glow-cyan: 0 170 255;
  --glow-violet: 124 77 255;
  --v2-scene-bg: #000000;
  --v2-tile: #ffffff;
  /* the existing roles, remapped */
  --color-surface: #f5f5f7;
  --color-background: #f5f5f7;
  --color-surface-bright: #f5f5f7;
  --color-surface-section: #ffffff;
  --color-surface-footer: #f5f5f7;
  --color-on-surface: #1d1d1f;
  --color-on-background: #1d1d1f;
  --color-on-surface-variant: #424245;
  --color-tertiary: #6e6e73;
  --color-primary: #0066cc;
  --color-primary-container: #0071e3;
  --color-primary-solid: #0077ed;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f5f5f7;
  --color-surface-container: #ececf0;
  --color-surface-container-high: #e6e6eb;
  --color-surface-container-highest: #dedee3;
  --color-surface-variant: #e3e3e8;
  --color-header: rgb(245 245 247 / 0.8);
  --color-hairline: rgb(0 0 0 / 0.08);
  --color-border-soft: rgb(0 0 0 / 0.1);
  --color-border-strong: rgb(0 0 0 / 0.2);
  --shadow-card: 0 0 0 1px rgb(0 0 0 / 0.04), 0 2px 6px rgb(0 0 0 / 0.03), 0 20px 44px -26px rgb(0 0 0 / 0.2);
  --shadow-card-featured: 0 0 0 1px rgb(0 113 227 / 0.35), 0 2px 6px rgb(0 0 0 / 0.04), 0 26px 52px -26px rgb(0 56 140 / 0.3);
  --shadow-md: 0 2px 6px rgb(0 0 0 / 0.04), 0 12px 28px -14px rgb(0 0 0 / 0.18);
  --shadow-card-hover: 0 0 0 1px rgb(0 0 0 / 0.05), 0 4px 12px rgb(0 0 0 / 0.04), 0 34px 64px -30px rgb(0 0 0 / 0.3);
  /* the old ambient light is retired: no lights, no seams, no grain */
  --amb-gain: 0;
  --amb-seam: transparent;
  --amb-band: #f5f5f7;
  --amb-grain: none;
}
:root[data-theme='dark'] {
  /* After hours the page is a deep charcoal and the scenes are pure black stages on it, the way
     the grey page frames them by day; tiles sit a step above the page and catch a top edge of
     light. */
  --v2-tile: #1b1b1e;
  --color-surface: #101012;
  --color-background: #101012;
  --color-surface-bright: #101012;
  --color-surface-section: #101012;
  --color-surface-footer: #0b0b0d;
  --color-on-surface: #f5f5f7;
  --color-on-background: #f5f5f7;
  --color-on-surface-variant: #c7c7cc;
  --color-tertiary: #a1a1a6;
  --color-primary: #2997ff;
  --color-primary-container: #0071e3;
  --color-primary-solid: #0077ed;
  --color-surface-container-lowest: #1b1b1e;
  --color-surface-container-low: #202024;
  --color-surface-container: #26262b;
  --color-surface-container-high: #2d2d33;
  --color-surface-container-highest: #36363c;
  --color-surface-variant: #36363c;
  --color-surface-selected: #3c3c43;
  --color-header: rgb(18 18 20 / 0.74);
  --color-hairline: rgb(255 255 255 / 0.08);
  --color-border-soft: rgb(255 255 255 / 0.1);
  --color-border-strong: rgb(255 255 255 / 0.22);
  --color-border-default: rgb(255 255 255 / 0.08);
  --shadow-card: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 0 0 1px rgb(255 255 255 / 0.08), 0 24px 48px -28px rgb(0 0 0 / 0.95);
  --shadow-card-featured: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 0 0 1px rgb(41 151 255 / 0.5), 0 26px 52px -24px rgb(0 40 140 / 0.6);
  --shadow-md: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 0 0 1px rgb(255 255 255 / 0.08), 0 12px 28px -14px rgb(0 0 0 / 0.95);
  --shadow-card-hover: inset 0 1px 0 rgb(255 255 255 / 0.1), 0 0 0 1px rgb(150 180 255 / 0.22), 0 34px 64px -30px rgb(var(--glow-blue) / 0.5);
  --amb-band: #101012;
  --amb-card: #1b1b1e;
  --amb-card-nested: #202024;
  --amb-grain: none;
}

/* The scenes: always dark, in both themes. The tokens are set again inside them, so whatever
   sits in a scene (text, buttons, cards, the console window) takes its dark form. */
.scene,
.home-hero,
.hosting-hero,
.apps-hero,
.pricing-nav,
.site-header.v2-on-dark {
  --color-surface: #000000;
  --color-surface-section: #000000;
  --color-on-surface: #f5f5f7;
  --color-on-background: #f5f5f7;
  --color-on-surface-variant: #d2d2d7;
  --color-tertiary: #a1a1a6;
  --color-primary: #6e9bff;
  --color-surface-container-lowest: #141416;
  --color-surface-container-low: #1c1c1f;
  --color-surface-container: #232327;
  --color-surface-container-high: #2b2b30;
  --color-surface-container-highest: #34343a;
  --color-surface-variant: #34343a;
  --color-surface-selected: #3a3a40;
  --color-border-soft: rgb(255 255 255 / 0.12);
  --color-border-strong: rgb(255 255 255 / 0.24);
  --color-border-default: rgb(255 255 255 / 0.08);
  --color-hairline: rgb(255 255 255 / 0.08);
  --shadow-card: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 0 0 1px rgb(255 255 255 / 0.08), 0 24px 48px -24px rgb(0 0 0 / 0.9);
  --shadow-md: 0 0 0 1px rgb(255 255 255 / 0.08), 0 12px 28px -14px rgb(0 0 0 / 0.9);
  --shadow-card-hover: inset 0 1px 0 rgb(255 255 255 / 0.1), 0 0 0 1px rgb(150 180 255 / 0.26), 0 34px 64px -30px rgb(var(--glow-blue) / 0.6);
  --amb-card: #141416;
  --amb-card-nested: #1c1c1f;
  --color-on-selected-muted: #bfc1c9;
  --color-device: #17181c;
  --color-on-device: #ececf0;
  --color-fill-soft: rgb(255 255 255 / 0.035);
  --color-fill-hover: rgb(255 255 255 / 0.07);
  --color-band-40: rgb(255 255 255 / 0.02);
  --color-band-50: rgb(255 255 255 / 0.03);
  --color-band-60: rgb(255 255 255 / 0.025);
  --color-tint-20: rgb(255 255 255 / 0.02);
  --color-tint-40: rgb(255 255 255 / 0.04);
  --color-tint-variant: rgb(255 255 255 / 0.05);
  --color-placeholder: #8a8d97;
  --color-field-edge: rgb(255 255 255 / 0.08);
  --shadow-field: inset 0 0 0 1px rgb(255 255 255 / 0.07);
  --color-success: #3ccf91;
  --color-success-strong: #5fdca6;
  --color-success-container: rgb(60 207 145 / 0.12);
  --color-success-badge: rgb(60 207 145 / 0.16);
  --color-on-success-badge: #8ef0c3;
  --rgb-primary-fixed: 45 104 190;
  --color-outline-variant: #474952;
  --shadow-xs: 0 0 0 1px rgb(255 255 255 / 0.06), 0 1px 2px rgb(0 0 0 / 0.4);
  color-scheme: dark;
}

/* ── Retiring the ambient light ─────────────────────────────────────────────────────────── */
:root[data-theme] :is(.amb, .home-hero__platform, .console-preview__window, .get-started, .telemetry__card, .summary__card, .sizer__card) {
  background-image: none;
}

/* ── Page ───────────────────────────────────────────────────────────────────────────────── */
body {
  background-color: var(--color-background);
  color: var(--color-on-surface);
  text-rendering: optimizeLegibility;
}
.site-main {
  background-color: var(--color-surface);
}

/* ── Header: a slim frosted bar; dark over a scene; it slips away while you read down the
   page and comes back as soon as you scroll up (motion.js). ──────────────────────────── */
.site-header {
  border-bottom-color: var(--color-hairline);
  background-color: var(--color-header);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  transition: transform 0.45s var(--v2-ease), background-color 0.3s ease, border-color 0.3s ease;
}
/* While the theme cross-fades, the bar changes with the page, not after it. */
:root:is(.theme-fading, .theme-swap) .site-header {
  transition: transform 0.45s var(--v2-ease);
}
.site-header.v2-on-dark {
  --color-header: rgb(0 0 0 / 0.55);
  border-bottom-color: rgb(255 255 255 / 0.06);
}
/* The logo: its coloured parts (cloud, "India") are an image; the "Hostup" letters are a mask
   filled with the logo's navy, or white while the bar is dark (over a dark scene, dark theme). */
.site-header__logo {
  position: relative;
  display: block;
  height: 36px;
  aspect-ratio: 1820 / 449;
}
@media (max-width: 767.98px) {
  .site-header__logo {
    height: 30px;
  }
}
.site-header__logo > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.site-header__logo-ink {
  background-color: #061932;
  -webkit-mask: url(../img/brand/hostupindia-logo-ink.png) center / contain no-repeat;
  mask: url(../img/brand/hostupindia-logo-ink.png) center / contain no-repeat;
}
.site-header.v2-on-dark .site-header__logo-ink,
:root[data-theme='dark'] .site-header__logo-ink {
  background-color: #f5f5f7;
}
/* Keyboard focus in the bar keeps it in place (a mouse click on one of its buttons does not). */
@media (prefers-reduced-motion: no-preference) {
@supports selector(:has(*)) {
html.v2-header-hidden .site-header:not(:has(:focus-visible)) {
  transform: translateY(-100%);
}
}
@supports not selector(:has(*)) {
html.v2-header-hidden .site-header:not(:focus-within) {
  transform: translateY(-100%);
}
}
}
.site-header__nav-link {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.008em;
  color: var(--color-on-surface-variant);
}
.site-header__nav-link:hover {
  color: var(--color-on-surface);
}
.site-header__cta {
  height: 2rem;
  border-radius: 980px;
  padding-left: 0.9375rem;
  padding-right: 0.9375rem;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.008em;
  box-shadow: none;
}
.site-header__sign-in {
  font-size: 13px;
}

/* ── Type ───────────────────────────────────────────────────────────────────────────────── */
.eyebrow {
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-primary);
}
.section-head {
  max-width: 50rem;
}
.section-title {
  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;
  color: var(--color-on-surface);
}
@media (min-width: 768px) {
.section-title {
  font-size: clamp(2rem, 1.05rem + 2.7vw, 3.5rem);
  line-height: 1.07;
  letter-spacing: -0.026em;
  font-weight: 700;
}
}
.section-intro {
  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);
}
.home-hero__title {
  font-weight: 700;
  letter-spacing: -0.03em;
}
.home-hero__lead {
  font-size: clamp(1.0625rem, 0.95rem + 0.42vw, 1.3125rem);
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--color-tertiary);
}

/* ── Buttons: pills. Blue and filled for the main action; the second one is a blue outline
   that fills on hover, or, in a scene, a translucent white pill. ─────────────────────────── */
.btn-primary,
.btn-secondary {
  height: 2.75rem;
  gap: 0.375rem;
  border-radius: 980px;
  padding-left: 1.375rem;
  padding-right: 1.375rem;
  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;
}
.btn-primary {
  background-color: var(--color-primary-container);
  color: #ffffff;
  box-shadow: none;
}
.btn-primary:hover {
  background-color: var(--color-primary-solid);
  box-shadow: 0 10px 26px -12px rgb(0 113 227 / 0.55);
}
:root[data-theme='dark'] .btn-primary:hover,
:is(.scene, .home-hero, .hosting-hero, .apps-hero) .btn-primary:hover {
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), 0 12px 32px -10px rgb(var(--glow-blue) / 0.75);
}
.btn-primary,
.btn-secondary {
  background-image: linear-gradient(rgb(255 255 255 / 0), rgb(255 255 255 / 0));
}
.btn-primary:hover,
:is(.scene, .home-hero, .hosting-hero, .apps-hero) .btn-secondary:hover {
  background-image: linear-gradient(rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.08));
}
@media (prefers-reduced-motion: no-preference) {
.btn-primary,
.btn-secondary {
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.3s var(--v2-ease-out), scale 0.2s var(--v2-ease-out);
}
.btn-primary:active,
.btn-secondary:active {
  scale: 0.97;
}
.btn-arrow,
.link-arrow .material-symbols-outlined {
  transition: translate 0.3s var(--v2-ease-out);
}
.btn-primary:hover .btn-arrow,
.btn-secondary:hover .btn-arrow,
.link-arrow:hover .material-symbols-outlined {
  translate: 0.2rem 0;
}
}
.btn-secondary {
  background-color: transparent;
  color: var(--color-primary);
  box-shadow: inset 0 0 0 1px currentColor;
}
.btn-secondary:hover {
  background-color: var(--color-primary-container);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px var(--color-primary-container);
}
:is(.scene, .home-hero, .hosting-hero, .apps-hero) .btn-secondary {
  background-color: rgb(255 255 255 / 0.1);
  color: #ffffff;
  box-shadow: none;
}
:is(.scene, .home-hero, .hosting-hero, .apps-hero) .btn-secondary:hover {
  background-color: rgb(255 255 255 / 0.18);
}
@media (max-width: 639.98px) {
.btn-primary,
.btn-secondary {
  height: 2.625rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  font-size: 15px;
}
}
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.site-header__cta:focus-visible,
.platform__step-link:focus-visible {
  outline: 2px solid var(--color-primary-container);
  outline-offset: 3px;
}
:root[data-theme='dark'] :is(.btn-primary, .btn-secondary, .site-header__cta, .platform__step-link):focus-visible,
:is(.scene, .home-hero, .hosting-hero, .apps-hero) :is(.btn-primary, .btn-secondary, .platform__step-link):focus-visible {
  outline-color: #6e9bff;
}
.link-arrow {
  font-weight: 600;
  color: var(--color-primary);
}

/* ── Scenes: black, lit by one electric-blue light that drifts and swells as the scene moves
   through the window (--v2-p, 0..1, set by motion.js). ───────────────────────────────────── */
.scene,
.home-hero,
.hosting-hero,
.apps-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background-color: var(--v2-scene-bg);
  color: var(--color-on-surface);
}
.scene::before,
.home-hero::before,
.hosting-hero::before,
.apps-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 60% at var(--v2-glow-x, 50%) var(--v2-glow-y, 38%), rgb(var(--v2-glow, var(--glow-blue)) / 0.62) 0%, rgb(var(--v2-glow, var(--glow-blue)) / 0.22) 38%, rgb(var(--v2-glow, var(--glow-blue)) / 0) 72%),
    radial-gradient(ellipse 90% 70% at 50% 120%, rgb(var(--glow-violet) / 0.16) 0%, rgb(var(--glow-violet) / 0) 70%);
  inset: 0 -14%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 82%, transparent 100%);
  opacity: calc(0.7 + var(--v2-p, 0.5) * 0.3);
  transform: translate3d(0, calc((var(--v2-p, 0.5) - 0.5) * -60px), 0) scale(calc(1 + var(--v2-p, 0.5) * 0.1));
}
@media (prefers-reduced-motion: no-preference) {
.scene::before,
.home-hero::before,
.hosting-hero::before,
.apps-hero::before {
  will-change: transform, opacity;
}
}
/* A scene's own edge: a hairline of light along its top, which tells the black stage from the
   charcoal page after hours (by day the grey page already frames it). */
:where(.scene, .home-hero, .hosting-hero, .apps-hero) {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07);
}
/* Arriving and leaving (motion.js): a full-width scene opens out from a rounded stage inset from
   the edges to the full width, and closes back into one as it goes; scenes that touch stay
   joined. The clip is only on while it moves (.v2-framing), never on a scene at rest. */
@media (prefers-reduced-motion: no-preference) {
html.v2-js .v2-framing {
  clip-path: inset(0 calc(var(--v2-c, 0) * var(--v2-frame-x)) round calc(var(--v2-c, 0) * var(--v2-frame-r)));
}
}
@media (max-width: 767.98px) {
:root {
  --v2-frame-x: 10px;
  --v2-frame-r: 28px;
}
}
.site-main > .site-main__sections > :is(.home-hero, .hosting-hero, .apps-hero):first-child,
.site-main > .site-main__sections > section.scene:first-child {
  margin-top: -3.5rem;
  padding-top: calc(3.5rem + 5rem);
}
@media (min-width: 768px) {
.site-main > .site-main__sections > :is(.home-hero, .hosting-hero, .apps-hero):first-child,
.site-main > .site-main__sections > section.scene:first-child {
  padding-top: calc(3.5rem + 7rem);
}
}
.scene .section-title,
.home-hero .home-hero__title,
.hosting-hero .display-text,
.apps-hero .page-title {
  color: #ffffff;
}
.scene .eyebrow,
.home-hero .eyebrow {
  color: #8fb0ff;
}
/* A scene's headline lights up word by word as it rises through the window (motion.js). */
.v2-word {
  opacity: var(--v2-o, 1);
  transition: opacity 0.18s linear;
}

/* ── Tiles and cards: Apple's white tiles by day, charcoal after hours; under the pointer a soft
   light follows it across the surface (motion.js sets --mx/--my). ───────────────────────── */
.card-column,
.card-muted,
.plans__card-featured {
  border-radius: var(--v2-radius-card);
}
.v2-spot {
  position: relative;
}
.v2-spot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgb(var(--glow-blue) / 0.11), rgb(var(--glow-blue) / 0) 60%),
    radial-gradient(160px circle at var(--mx, 50%) var(--my, 0%), rgb(0 113 227 / 0.05), transparent 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
:root[data-theme='dark'] .v2-spot::after,
:is(.scene, .home-hero, .hosting-hero, .apps-hero) .v2-spot::after {
  background:
    radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgb(110 155 255 / 0.16), rgb(110 155 255 / 0) 60%),
    radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgb(255 255 255 / 0.06), transparent 70%);
}
@media (hover: hover) and (pointer: fine) {
.v2-spot:hover::after {
  opacity: 1;
}
/* A tile under the pointer lifts its shadow: a deeper drop by day, a lit edge and a blue
   under-glow after hours and in scenes. (Page files may set their own.) */
.v2-tile {
  transition: box-shadow 0.35s var(--v2-ease-out), transform 0.45s var(--v2-ease-out), background-color 0.3s ease;
}
.v2-tile:hover {
  box-shadow: var(--shadow-card-hover);
}
}

/* ── FAQ: a quiet list, the open answer easing in. ─────────────────────────────────────── */
.faq {
  max-width: 50rem;
}
.faq__question {
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.016em;
}
.faq__answer {
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-tertiary);
}
@media (prefers-reduced-motion: no-preference) {
.faq__item[open] .faq__answer {
  animation: v2-fade-down 0.4s var(--v2-ease) both;
}
}
@keyframes v2-fade-down {
from { opacity: 0; translate: 0 -6px; }
to { opacity: 1; translate: none; }
}

/* ── Footer: Apple's: small type, quiet grey. ──────────────────────────────────────────── */
.site-footer {
  border-top-color: var(--color-hairline);
  background-color: var(--color-surface-footer);
  padding-top: 3rem;
  padding-bottom: 2.5rem;
}
.site-footer__heading {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--color-on-surface);
}
.site-footer__link {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-on-surface-variant);
}
.site-footer__link:hover {
  color: var(--color-on-surface);
  text-decoration: underline;
}
.site-footer__bottom {
  border-top-color: var(--color-hairline);
}
:root[data-theme='dark'] .site-footer {
  background-image:
    linear-gradient(90deg, transparent 8%, rgb(110 155 255 / 0.32) 50%, transparent 92%),
    radial-gradient(48% 120px at 50% 0, rgb(var(--glow-blue) / 0.1), transparent);
  background-size: 100% 1px, 100% 100%;
  background-repeat: no-repeat;
}

/* ── Motion: blocks rise into place, a little blurred, as they come into view; groups follow
   one another. Only for visitors who haven't asked for less motion; until motion.js runs
   (html.v2-js), anything that is waiting shows after 2.5s anyway. ──────────────────────── */
@media (prefers-reduced-motion: no-preference) {
html.v2-motion :is(.v2-reveal, [data-reveal], .section-head, .home-hero__inner, .home-hero__art, .hosting-hero__copy, .page-intro, .platform__step, .platform__way, .home-apps__list > li, .os-picker__list > li, .highlights__item, .plans__grid > *, .product-features__item, .faq__item, .console-preview__window, .console-preview__caption, .network-globe__figure, .get-started, .v2-tile):not(.is-in) {
  opacity: 0;
}
html.v2-motion:not(.v2-js) :is(.v2-reveal, [data-reveal], .section-head, .home-hero__inner, .home-hero__art, .hosting-hero__copy, .page-intro, .platform__step, .platform__way, .home-apps__list > li, .os-picker__list > li, .highlights__item, .plans__grid > *, .product-features__item, .faq__item, .console-preview__window, .console-preview__caption, .network-globe__figure, .get-started, .v2-tile) {
  animation: v2-failsafe 0.01s linear 2.5s forwards;
}
html.v2-motion .is-in {
  animation: v2-rise-move 0.9s var(--v2-ease-out) backwards, v2-rise-fade 0.5s linear backwards, v2-pass 0.6s linear;
  animation-delay: calc(var(--v2-i, 0) * 90ms), calc(var(--v2-i, 0) * 90ms + 90ms), calc(var(--v2-i, 0) * 90ms);
}
/* The hero's headline block and picture (usually the page's largest paint) are never held back:
   they rise in from the very first paint by CSS alone (motion.js only marks them shown, which
   leaves this animation as it is). */
html.v2-motion .site-main__sections > :first-child :is(.home-hero__inner, .home-hero__art, .hosting-hero__copy, .page-intro, .section-head) {
  opacity: 1;
  animation: none;
}
/* Instead, the hero's light comes up as the page opens: the glow rises and settles once. (The
   glow is not content, so this never holds back the page's first paint.) */
.site-main__sections > :first-child:is(.scene, .home-hero, .hosting-hero, .apps-hero)::before {
  animation: v2-dawn 1.6s var(--v2-ease-out) backwards;
}
/* Whatever holds keyboard focus is shown at once, never left waiting to rise. */
html.v2-motion :is(.v2-reveal, [data-reveal], .section-head, .home-hero__inner, .home-hero__art, .hosting-hero__copy, .page-intro, .platform__step, .platform__way, .home-apps__list > li, .os-picker__list > li, .highlights__item, .plans__grid > *, .product-features__item, .faq__item, .console-preview__window, .console-preview__caption, .network-globe__figure, .get-started, .v2-tile):focus-within {
  opacity: 1;
  animation: none;
}
}
@keyframes v2-rise {
from { opacity: 0; translate: 0 28px; filter: blur(6px); }
to { opacity: 1; translate: none; filter: none; }
}
@keyframes v2-dawn {
from { opacity: 0; transform: translate3d(0, 60px, 0) scale(1.12); }
}
/* While a block is still rising it lets clicks through: when focus moves on and a block rises again,
   it never catches a click meant for what sits just below it (a FAQ question, say). */
@keyframes v2-pass {
from, to { pointer-events: none; }
}
@keyframes v2-rise-move {
from { translate: 0 36px; }
}
@keyframes v2-rise-fade {
from { opacity: 0; }
}

/* Headlines set their words in one after another as they arrive (motion.js wraps each word in
   .v2-w and adds .is-lit). Scene titles do not: they light up with the scroll instead. */
.v2-w {
  display: inline-block;
}
@media (prefers-reduced-motion: no-preference) {
html.v2-js .v2-split:not(.is-lit) .v2-w {
  opacity: 0;
  translate: 0 0.55em;
}
html.v2-js .v2-split.is-lit .v2-w {
  transition: translate 0.9s var(--v2-ease-out), opacity 0.45s linear;
  transition-delay: calc(var(--w, 0) * 45ms + 60ms), calc(var(--w, 0) * 45ms + 140ms);
}
html.v2-js .v2-split:focus-within .v2-w {
  opacity: 1;
  translate: none;
}
}

/* Layers that drift against the scroll ([data-parallax], motion.js sets --v2-py), and visuals
   that lean toward the pointer ([data-tilt], --v2-tx/--v2-ty). Put either on a layer of its own:
   they set transform. */
@media (prefers-reduced-motion: no-preference) {
html.v2-js [data-parallax] {
  transform: translate3d(0, var(--v2-py, 0px), 0);
  will-change: transform;
}
html.v2-js [data-tilt] {
  transform: perspective(1400px) rotateX(calc(var(--v2-ty, 0) * -3deg)) rotateY(calc(var(--v2-tx, 0) * 4deg));
  transition: transform 0.8s var(--v2-ease-out);
}
html.v2-js [data-tilt].is-tilting {
  transition-duration: 0.2s;
}
}

/* Stars for a scene: two tiles of original starfield, far and near, to layer at different
   parallax speeds: <div class="v2-stars" data-parallax="-0.05" aria-hidden="true"></div>. */
.v2-stars,
.v2-stars--near {
  position: absolute;
  inset: -12% 0;
  z-index: -1;
  pointer-events: none;
  background-image: url('../img/v2/stars-far.webp');
  background-image: image-set(url('../img/v2/stars-far.avif') type('image/avif'), url('../img/v2/stars-far.webp') type('image/webp'));
  background-size: 640px 640px;
  background-repeat: repeat;
  opacity: 0.7;
}
.v2-stars--near {
  background-image: url('../img/v2/stars-near.webp');
  background-image: image-set(url('../img/v2/stars-near.avif') type('image/avif'), url('../img/v2/stars-near.webp') type('image/webp'));
  background-position: 220px 140px;
  opacity: 0.85;
}

/* Switching theme: every colour changes at once (theme.js adds .theme-swap for two frames), so
   no shadow or colour is left easing after the cross-fade has finished. */
html.theme-swap,
html.theme-swap *,
html.theme-swap *::before,
html.theme-swap *::after {
  transition: none !important;
}
@keyframes v2-failsafe {
to { opacity: 1; }
}

/* Heroes that size themselves to the screen keep their own top padding: only the header's height
   is added back, since the scene now runs up behind the header. */
@media (min-width: 1024px) {
.site-main > .site-main__sections > .home-hero--split:first-child {
  padding-top: 3.5rem;
}
}
.site-main > .site-main__sections > .pricing-hero:first-child {
  padding-top: calc(3.5rem + 3rem);
}
@media (min-width: 768px) {
.site-main > .site-main__sections > .pricing-hero:first-child {
  padding-top: calc(3.5rem + 4rem);
}
}

/* The closing call to action: a lit scene, the box as glass. */
.get-started-scene {
  --v2-glow-y: 55%;
}
:root[data-theme] .get-started-scene .get-started,
.get-started-scene .get-started {
  border: 0;
  border-radius: var(--v2-radius-tile);
  background-color: rgb(20 20 22 / 0.6);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), 0 40px 100px -40px rgb(var(--glow-blue) / 0.6);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.get-started-scene .get-started__title {
  font-size: clamp(2rem, 1.05rem + 2.7vw, 3.5rem);
  line-height: 1.07;
  letter-spacing: -0.026em;
  font-weight: 700;
  color: #ffffff;
}
.get-started-scene .get-started__cta {
  border-radius: 980px;
}
.get-started-scene .get-started__field {
  border-radius: 980px;
}

/* The brand name stays on one line; a touch smaller on phones so the bar still fits. */
.site-header .heading-sm {
  white-space: nowrap;
  letter-spacing: -0.01em;
}
@media (max-width: 479.98px) {
.site-header .heading-sm {
  font-size: 16px;
}
.site-header__cta {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
}
@media (max-width: 379.98px) {
.site-header .heading-sm {
  font-size: 15px;
}
.site-header__actions {
  gap: 0.5rem;
}
.site-header__cta {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  font-size: 12px;
}
}
/* The narrowest phones: the name may take two lines, as it always did. */
@media (max-width: 359.98px) {
.site-header .heading-sm {
  white-space: normal;
}
}

/* Plan cards everywhere: the recommended card's label and its badge keep the cards' own small
   size (the larger site eyebrow would push the badge onto two or three lines). */
.plans__card-featured .split .eyebrow {
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.05em;
}
.plans__card-featured .plans__badge {
  white-space: nowrap;
}

/* The request form: a field it moves focus to is never left under its title bar. */
.request-dialog {
  scroll-padding-top: 9rem;
  scroll-padding-bottom: 1rem;
}
@media (min-width: 640px) {
.request-dialog {
  scroll-padding-top: 11rem;
}
}
/* The Pricing page keeps its cards' exact size (the owner's rule): there the badge wraps as it
   always did on narrow cards. */
.pricing-page .plans__card-featured .plans__badge {
  white-space: normal;
}

/* ── Offers shared by several pages: the free-migration band (includes/migration.php) and the row
   of promises under the Pricing headline. ───────────────────────────────────────────────── */
.v2-migrate {
  padding-top: 3rem;
  padding-bottom: 3rem;
  background-color: var(--color-surface);
}
.v2-migrate__box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem 2.25rem;
  border-radius: var(--v2-radius-tile);
  background-color: var(--v2-tile);
  padding: 2rem 2.25rem;
  box-shadow: var(--shadow-card);
}
.v2-migrate__art {
  width: 7.5rem;
  height: 4rem;
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.v2-migrate__path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: no-preference) {
html.v2-js .v2-migrate__box:not(.is-in) .v2-migrate__path {
  stroke-dashoffset: 1;
}
html.v2-js .v2-migrate__box.is-in .v2-migrate__path {
  transition: stroke-dashoffset 1.2s var(--v2-ease-out) 0.3s;
}
}
.v2-migrate__title {
  margin: 0.5rem 0 0;
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.12;
  letter-spacing: -0.024em;
  font-weight: 700;
  color: var(--color-on-surface);
}
.v2-migrate__text {
  margin: 0.5rem 0 0;
  font-size: 17px;
  line-height: 1.47;
  color: var(--color-tertiary);
}
.v2-migrate__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
}
@media (max-width: 767.98px) {
.v2-migrate__box {
  grid-template-columns: minmax(0, 1fr);
  padding: 1.75rem;
}
.v2-migrate__actions {
  align-items: flex-start;
}
}
.v2-promises {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.25rem;
  margin: 1.25rem auto 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 20px;
  color: #d2d2d7;
}
.v2-promises li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.v2-promises .material-symbols-outlined {
  font-size: 18px;
  color: #6e9bff;
}