/* v2: pages (see assets/css/v2.css for the shared look).
 *
 * Everything that is not a product or hosting page: the menus that open from the header (the
 * mega menus, the phone menu, the theme menu) and the currency menu beside the prices, the
 * request sheet, the About and policy pages, the 404 page and the console. By day these read
 * like Apple's (soft grey, white, frosted, pill controls); after hours, and wherever the header
 * sits over a scene, they take Spaceship's night form. Loaded last, so it refines v2.css.
 * Nothing here changes a service, plan, price or link.
 */

/* ── Tokens ──────────────────────────────────────────────────────────────────────────────── */
:root {
  --v2p-flyout: #fafafc;
  /* by day a faint daylight falls into the menus from above, as the scenes' light does at night */
  --v2p-flyout-glow:
    radial-gradient(ellipse 70% 140% at 50% -40%, rgb(0 113 227 / 0.07), rgb(0 113 227 / 0) 70%),
    radial-gradient(ellipse 34% 100% at 86% -30%, rgb(90 200 250 / 0.08), rgb(90 200 250 / 0) 70%);
  --v2p-fill: rgb(0 0 0 / 0.045);
  --v2p-fill-strong: rgb(0 0 0 / 0.08);
  --v2p-icon: #ffffff;
  --v2p-icon-ring: 0 0 0 1px rgb(0 0 0 / 0.06), 0 2px 6px rgb(0 0 0 / 0.05);
  --v2p-thumb-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.04), 0 1px 2px rgb(0 0 0 / 0.1), 0 3px 8px rgb(0 0 0 / 0.06);
  --v2p-menu-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.08), 0 18px 44px -10px rgb(0 0 0 / 0.24), 0 2px 8px rgb(0 0 0 / 0.06);
  --v2p-sheet: #ffffff;
  --v2p-sheet-glass: rgb(255 255 255 / 0.78);
  --v2p-field: #ffffff;
  --v2p-field-edge: rgb(0 0 0 / 0.18);
  --v2p-inset: #f5f5f7;
  --v2p-ring: rgb(0 113 227 / 0.3);
  --v2p-danger: #d70015;
  --v2p-ok: #187531;
  --v2p-scrim: rgb(232 232 237 / 0.42);
}
:root[data-theme='dark'] {
  --v2p-flyout: #161617;
  --v2p-fill: rgb(255 255 255 / 0.07);
  --v2p-fill-strong: rgb(255 255 255 / 0.13);
  --v2p-icon: rgb(255 255 255 / 0.07);
  --v2p-icon-ring: 0 0 0 1px rgb(255 255 255 / 0.07);
  --v2p-thumb-shadow: 0 0 0 0.5px rgb(255 255 255 / 0.06), 0 1px 3px rgb(0 0 0 / 0.5);
  --v2p-menu-shadow: 0 0 0 1px rgb(255 255 255 / 0.09), 0 20px 50px -10px rgb(0 0 0 / 0.85);
  --v2p-sheet: #1c1c1e;
  --v2p-sheet-glass: rgb(28 28 30 / 0.78);
  --v2p-field: rgb(255 255 255 / 0.06);
  --v2p-field-edge: rgb(255 255 255 / 0.16);
  --v2p-inset: rgb(255 255 255 / 0.05);
  --v2p-ring: rgb(41 151 255 / 0.38);
  --v2p-danger: #ff453a;
  --v2p-ok: #30d158;
  --v2p-scrim: rgb(0 0 0 / 0.5);
  --v2p-flyout-shade: 0.6;
}
/* Over a scene the header, and the menus that open from it, take the night form; so does a
   currency menu that opens inside a scene. */
.site-header.v2-on-dark,
.scene,
.home-hero,
.hosting-hero,
.apps-hero,
.pricing-nav {
  --v2p-flyout: #0a0a0c;
  --v2p-flyout-glow: radial-gradient(ellipse 70% 140% at 50% -40%, rgb(var(--glow-blue) / 0.2), rgb(var(--glow-blue) / 0) 70%);
  --v2p-fill: rgb(255 255 255 / 0.07);
  --v2p-fill-strong: rgb(255 255 255 / 0.13);
  --v2p-icon: rgb(255 255 255 / 0.07);
  --v2p-icon-ring: 0 0 0 1px rgb(255 255 255 / 0.08);
  --v2p-thumb-shadow: 0 0 0 0.5px rgb(255 255 255 / 0.06), 0 1px 3px rgb(0 0 0 / 0.5);
  --v2p-menu-shadow: 0 0 0 1px rgb(255 255 255 / 0.1), 0 20px 50px -10px rgb(0 0 0 / 0.85);
  --v2p-ring: rgb(41 151 255 / 0.38);
  --v2p-flyout-shade: 0.6;
}
:root[data-theme='dark'] .site-header:not(.v2-on-dark) {
  --v2p-flyout-glow: radial-gradient(ellipse 70% 140% at 50% -40%, rgb(var(--glow-blue) / 0.12), rgb(var(--glow-blue) / 0) 70%);
}

@keyframes v2p-item-in {
from { opacity: 0; translate: 0 -10px; }
}
@keyframes v2p-fade {
from { opacity: 0; }
}

/* ── Header: while a menu is open the bar and the panel are one frosted sheet ─────────────── */
.site-header:has(.mega[data-open='true']),
.site-header:has(.mobile-nav[data-open='true']) {
  background-color: var(--v2p-flyout);
  border-bottom-color: transparent;
}
.site-header__nav-trigger[aria-expanded='true'] {
  color: var(--color-on-surface);
}
.site-header__nav-trigger,
.site-header__nav-link {
  border-radius: 6px;
}
/* The menu bar's links, a touch larger than the original 13-14px and all one size. */
.site-header__nav-trigger,
.site-header__nav-link {
  font-size: 15px;
}
.site-header__nav-trigger:focus-visible,
.site-header__nav-link:focus-visible {
  outline: 2px solid var(--color-primary-container);
  outline-offset: 2px;
}

/* The page behind an open menu: blurred and veiled, as on Apple's site. */
.nav-overlay {
  background-color: var(--v2p-scrim);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  transition: opacity 0.35s var(--v2-ease), visibility 0s linear 0.35s, background-color 0.3s ease;
}
.site-header.v2-on-dark + .nav-overlay {
  background-color: rgb(0 0 0 / 0.5);
}
.nav-overlay[data-open='true'] {
  transition: opacity 0.35s var(--v2-ease), visibility 0s, background-color 0.3s ease;
}

/* ── Mega menus: a large panel that unrolls from the bar, its items drifting in ──────────── */
.mega {
  top: 100%;
  transform: none;
  border-bottom: 0;
  background-color: var(--v2p-flyout);
  background-image: var(--v2p-flyout-glow);
  box-shadow: 0 1px 0 var(--color-hairline), 0 40px 60px -44px rgb(0 0 0 / var(--v2p-flyout-shade, 0.16));
  transition: opacity 0.22s ease, visibility 0s linear 0.22s, background-color 0.3s ease, box-shadow 0.3s ease;
}
.mega[data-open='true'] {
  transition: opacity 0.15s ease, visibility 0s, background-color 0.3s ease, box-shadow 0.3s ease;
}
/* A menu is the same sheet as the bar it hangs from: dark over a scene, in the page's theme
   elsewhere. If the page scrolls under an open menu and the bar changes form, the menu changes
   with it in one short cross-fade (the bar's own colours ease over the same time), rather than
   snapping from one look to the other. */
:is(.mega, .mobile-nav) :is(.mega__card, .menu-item, .label-strong, .desc, .mega__price, .item-title, .item-note, .mega__group-label, .mega__group-label-apps, .mega__footer, .mega__footer-apps, .link-arrow, .mobile-nav__toggle, .mobile-nav__link, .mobile-nav__price, .mobile-nav__account, .mobile-nav__sign-in, [class*='menu-icon']) {
  transition-property: color, background-color, border-color, box-shadow;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
.mega :is(.mega__card-icon, .mega__card-icon-wordpress) {
  transition: transform 0.4s var(--v2-ease), background-color 0.3s ease, box-shadow 0.3s ease;
}
@media (prefers-reduced-motion: no-preference) {
.mega[data-open='true'] {
  animation: v2p-unroll 0.55s var(--v2-ease) both;
}
.mega[data-open='true'] :is(.mega__group-label, .mega__group-label-apps, .mega__card, .menu-item, .mega__footer, .mega__footer-apps) {
  animation: v2p-item-in 0.55s var(--v2-ease) both;
  animation-delay: calc(60ms + (var(--c, 0) * 3 + var(--n, 0)) * 35ms);
}
}
@keyframes v2p-unroll {
from { clip-path: inset(0 -100px 100% -100px); }
to { clip-path: inset(0 -100px -120px -100px); }
}
.mega :is(.mega__columns, .mega__columns-apps) > :nth-child(2) { --c: 1; }
.mega :is(.mega__cards, .mega__apps, .mega__list) > :nth-child(1) { --n: 1; }
.mega :is(.mega__cards, .mega__apps, .mega__list) > :nth-child(2) { --n: 2; }
.mega :is(.mega__cards, .mega__apps, .mega__list) > :nth-child(3) { --n: 3; }
.mega :is(.mega__cards, .mega__apps, .mega__list) > :nth-child(4) { --n: 4; }
.mega :is(.mega__cards, .mega__apps, .mega__list) > :nth-child(5) { --n: 5; }
.mega :is(.mega__cards, .mega__apps, .mega__list) > :nth-child(6) { --n: 6; }
.mega :is(.mega__footer, .mega__footer-apps) { --n: 7; }

.mega__inner {
  padding-top: 2rem;
  padding-bottom: 2.25rem;
}
.mega__columns {
  column-gap: 2.5rem;
}
.mega__columns-apps {
  column-gap: 2.5rem;
}
.mega__group-label,
.mega__group-label-apps {
  margin-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--color-tertiary);
}
.mega__group-label-apps {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.mega__cards {
  gap: 0.375rem;
}
.mega__card {
  border-radius: 18px;
  padding: 1rem;
  transition: background-color 0.25s ease;
}
.mega__card:hover {
  background-color: var(--v2p-fill);
}
.mega__card:focus-visible,
.mega .menu-item:focus-visible,
.mobile-nav :is(.menu-item, .mobile-nav__link, .mobile-nav__toggle, .mobile-nav__sign-in):focus-visible {
  outline: 2px solid var(--color-primary-container);
  outline-offset: 2px;
}
.mega__card-icon,
.mega__card-icon-wordpress {
  margin-bottom: 1rem;
  height: 2.75rem;
  width: 2.75rem;
  border-radius: 12px;
  background-color: var(--v2p-icon);
  box-shadow: var(--v2p-icon-ring);
  transition: transform 0.4s var(--v2-ease);
}
.mega__card-icon .material-symbols-outlined,
.mega__card-icon-wordpress .material-symbols-outlined {
  font-size: 22px;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.mega__card:hover :is(.mega__card-icon, .mega__card-icon-wordpress) {
  transform: scale(1.06);
}
}
.mega__card .label-strong {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 26px;
  letter-spacing: -0.021em;
  font-weight: 600;
}
.mega__card .desc {
  margin-top: 0.375rem;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.012em;
}
.mega__price {
  margin-top: 0.625rem;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--color-on-surface-variant);
}
.mega__apps,
.mega__list {
  gap: 0.25rem;
}
.mega .menu-item,
.mobile-nav .menu-item {
  gap: 0.875rem;
  border-radius: 14px;
  padding: 0.625rem 0.75rem;
  transition: background-color 0.25s ease;
}
.mega .menu-item:hover,
.mobile-nav .menu-item:hover {
  background-color: var(--v2p-fill);
}
:is(.mega, .mobile-nav) [class*='menu-icon'] {
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 11px;
  background-color: var(--v2p-icon);
  box-shadow: var(--v2p-icon-ring);
}
:is(.mega, .mobile-nav) .item-title {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.016em;
  font-weight: 600;
}
:is(.mega, .mobile-nav) .item-note {
  font-size: 13px;
  line-height: 18px;
  letter-spacing: -0.01em;
}
.mega__footer,
.mega__footer-apps {
  margin-top: 1.25rem;
  border-top: 1px solid var(--color-hairline);
  padding: 1.25rem 1rem 0;
}
.mega__footer-apps {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
:is(.mega, .mobile-nav) .link-arrow {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  border-radius: 6px;
}
:is(.mega, .mobile-nav) .link-arrow:focus-visible {
  outline: 2px solid var(--color-primary-container);
  outline-offset: 3px;
}

/* ── Phone menu: the whole screen under the bar, big type, the lines settling in one by one ─ */
.mobile-nav {
  top: 100%;
  height: calc(100vh - 3.5rem);
  height: calc(100dvh - 3.5rem);
  max-height: none;
  border-bottom: 0;
  background-color: var(--v2p-flyout);
  background-image: var(--v2p-flyout-glow);
  box-shadow: none;
  interpolate-size: allow-keywords;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s, background-color 0.3s ease;
}
.mobile-nav[data-open='true'] {
  transition: opacity 0.2s ease, visibility 0s, background-color 0.3s ease;
}
.mobile-nav__nav {
  padding-top: 0.75rem;
  padding-bottom: 3rem;
}
.mobile-nav__group {
  border-bottom: 0;
}
.mobile-nav__toggle,
.mobile-nav__link {
  border-bottom: 0;
  border-radius: 8px;
  padding-top: 0.6875rem;
  padding-bottom: 0.6875rem;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 34px;
  letter-spacing: -0.024em;
  font-weight: 600;
  color: var(--color-on-surface);
  transition: color 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
.mobile-nav__toggle:hover,
.mobile-nav__link:hover {
  color: var(--color-primary);
}
}
/* The menu button: a round control, like the theme switcher beside it. */
.site-header__menu-button {
  border-radius: 980px;
}
.site-header__menu-button:hover,
.site-header__menu-button[aria-expanded='true'] {
  background-color: var(--v2p-fill);
}
.site-header__menu-button:focus-visible {
  outline: 2px solid var(--color-primary-container);
  outline-offset: 2px;
}
.mobile-nav__chevron {
  font-size: 26px;
  color: var(--color-tertiary);
}
@media (prefers-reduced-motion: no-preference) {
.mobile-nav__chevron {
  transition: transform 0.35s var(--v2-ease);
}
}
.mobile-nav__items {
  gap: 0.25rem;
  padding-top: 0.25rem;
  padding-bottom: 0.5rem;
}
.mobile-nav .item-title {
  font-size: 17px;
  line-height: 22px;
}
.mobile-nav__price {
  margin-top: 0.125rem;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.mobile-nav__footer {
  padding: 0.5rem 0.75rem 1.25rem;
}
.mobile-nav__account {
  margin-top: 1.5rem;
  border-top: 1px solid var(--color-hairline);
  padding-top: 1.5rem;
}
.mobile-nav__sign-in {
  display: inline-flex;
  height: 2.5rem;
  align-items: center;
  border-radius: 980px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  color: var(--color-on-surface);
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
  transition: background-color 0.25s ease;
}
.mobile-nav__sign-in:hover {
  background-color: var(--v2p-fill);
  color: var(--color-on-surface);
}
@media (prefers-reduced-motion: no-preference) {
.mobile-nav[data-open='true'] .mobile-nav__nav > * {
  animation: v2p-item-in 0.6s var(--v2-ease) both;
  animation-delay: calc(40ms + var(--n, 0) * 40ms);
}
.mobile-nav__nav > :nth-child(2) { --n: 1; }
.mobile-nav__nav > :nth-child(3) { --n: 2; }
.mobile-nav__nav > :nth-child(4) { --n: 3; }
.mobile-nav__nav > :nth-child(5) { --n: 4; }
.mobile-nav__nav > :nth-child(6) { --n: 5; }
.mobile-nav__nav > :nth-child(7) { --n: 6; }
/* An accordion opens to its height instead of jumping (where the browser can animate it). */
.mobile-nav__group::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 0.45s var(--v2-ease), content-visibility 0.45s allow-discrete;
}
.mobile-nav__group[open]::details-content {
  block-size: auto;
}
.mobile-nav__group[open] .mobile-nav__items > * {
  animation: v2p-item-in 0.5s var(--v2-ease) both;
}
}

/* ── Theme switcher and the currency selector: pills, and a floating segmented track ─────── */
.theme__button {
  border-radius: 980px;
  background-color: transparent;
  color: var(--color-on-surface-variant);
  transition: background-color 0.25s ease, color 0.25s ease;
}
.theme__button:hover,
.theme__button[aria-expanded='true'] {
  background-color: var(--v2p-fill);
  color: var(--color-on-surface);
}
.theme__panel {
  padding-top: 0.625rem;
}
.currency__options,
.theme__options,
.mobile-nav__theme {
  gap: 0.125rem;
  border-radius: 980px;
  background-color: var(--color-surface-container-high);
  padding: 0.1875rem;
}
.currency__options,
.theme__options {
  box-shadow: var(--v2p-menu-shadow);
}
.currency-option,
.theme-option {
  height: 2rem;
  gap: 0.375rem;
  border-radius: 980px;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: -0.01em;
  font-weight: 500;
  color: var(--color-on-surface-variant);
}
.currency-option:hover,
.theme-option:hover {
  background-color: var(--v2p-fill);
  color: var(--color-on-surface);
}
.currency-option:active,
.theme-option:active {
  background-color: var(--v2p-fill-strong);
}
.currency-option[aria-pressed='true'],
:root[data-theme-choice='light'] .theme-option[data-theme-option='light'],
:root[data-theme-choice='dark'] .theme-option[data-theme-option='dark'],
:root[data-theme-choice='system'] .theme-option[data-theme-option='system'] {
  background-color: var(--color-surface-selected);
  color: var(--color-on-surface);
  font-weight: 600;
  box-shadow: var(--v2p-thumb-shadow);
}
.currency-option:focus-visible,
.theme-option:focus-visible {
  outline: 2px solid var(--color-primary-container);
  outline-offset: 1px;
}
@media (prefers-reduced-motion: no-preference) {
.currency__panel[data-open='true'],
.theme__panel[data-open='true'] {
  animation: v2p-pop 0.32s var(--v2-ease) both;
}
}
@keyframes v2p-pop {
from { opacity: 0; scale: 0.94; }
}
.theme__panel,
.currency__panel {
  transform-origin: 50% 0;
}
.currency__panel[data-side='above'] {
  transform-origin: 50% 100%;
}
.currency__panel[data-side='end'] {
  transform-origin: 0 50%;
}
/* The selector itself: a pill track holding the chosen currency in a raised pill, like the
   billing period beside it. A neighbour can set --v2-seg-radius to match a squarer control. */
.currency__button {
  border-radius: var(--v2-seg-radius, 980px);
  background-color: var(--color-surface-container-high);
  padding: 0.1875rem;
  transition: background-color 0.25s ease;
}
.currency__value,
.pricing-page .currency__value {
  border-radius: var(--v2-seg-radius, 980px);
  background-color: var(--color-surface-selected);
  padding: 0.375rem 0.625rem 0.375rem 0.875rem;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 600;
  box-shadow: var(--v2p-thumb-shadow);
}
@media (prefers-reduced-motion: no-preference) {
.currency__chevron {
  transition: transform 0.35s var(--v2-ease);
}
}

/* ── The request sheet (assets/js/enquiry.js; also Sign in): a rounded sheet over a blurred
   page; its title bar is frosted glass that the form scrolls under; pill controls. ───────── */
.request-dialog {
  border: 0;
  border-radius: 24px 24px 0 0;
  background-color: var(--v2p-sheet);
  color: var(--color-on-surface);
  box-shadow: 0 0 0 1px var(--color-hairline), 0 40px 120px -20px rgb(0 0 0 / 0.5);
}
@media (min-width: 640px) {
.request-dialog {
  max-width: 42rem;
  border-radius: 28px;
}
}
/* Behind the sheet the page is frosted: by day a light veil (Apple's), after hours a dark one. */
.request-dialog::backdrop {
  background-color: rgb(236 236 241 / 0.62);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
}
:root[data-theme='light'] .request-dialog {
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.07), 0 2px 8px rgb(0 0 0 / 0.04), 0 36px 100px -24px rgb(0 0 0 / 0.3);
}
:root[data-theme='dark'] .request-dialog::backdrop {
  background-color: rgb(0 0 0 / 0.62);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
}
@media (prefers-reduced-motion: no-preference) {
.request-dialog[open] {
  animation: v2p-sheet-up 0.55s var(--v2-ease) both;
}
.request-dialog[open]::backdrop {
  animation: v2p-fade 0.4s ease both;
}
@media (min-width: 640px) {
.request-dialog[open] {
  animation-name: v2p-sheet-in;
}
}
}
@keyframes v2p-sheet-up {
from { translate: 0 100%; }
}
@keyframes v2p-sheet-in {
from { opacity: 0; translate: 0 28px; scale: 0.96; filter: blur(6px); }
to { opacity: 1; translate: none; scale: none; filter: none; }
}
.request-dialog__header {
  background-color: var(--v2p-sheet-glass);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  padding-top: 1.75rem;
}
@media (min-width: 640px) {
.request-dialog__header {
  padding-left: 2.5rem;
  padding-right: 2rem;
  padding-top: 2.25rem;
}
}
.request-dialog__title {
  margin-top: 0.375rem;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  line-height: 1.12;
  letter-spacing: -0.026em;
  font-weight: 700;
}
.request-dialog__intro {
  margin-top: 0.5rem;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: -0.012em;
}
.request-dialog__close {
  margin-right: 0;
  height: 2.25rem;
  width: 2.25rem;
  border-radius: 980px;
  background-color: var(--v2p-fill);
  color: var(--color-on-surface-variant);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.request-dialog__close .material-symbols-outlined {
  font-size: 20px;
}
.request-dialog__close:hover {
  background-color: var(--v2p-fill-strong);
  color: var(--color-on-surface);
}
.request-dialog__close:focus-visible,
.request-form__submit:focus-visible,
.request-done__button:focus-visible,
.request-auth__option:focus-visible,
.request-auth__option-active:focus-visible {
  outline: 2px solid var(--color-primary-container);
  outline-offset: 2px;
}
@media (min-width: 640px) {
.request-form {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-bottom: 2.5rem;
}
.request-done {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
}
.request-form__selection {
  align-items: center;
  border-radius: 18px;
  background-color: var(--v2p-inset);
  padding: 1rem 1.25rem;
}
.request-form__selection-icon {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background-color: var(--v2p-icon);
  box-shadow: var(--v2p-icon-ring);
}
.request-form__selection-label {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
}
.request-form__item {
  margin-top: 0.125rem;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
}
.request-form__details {
  margin-top: 0.125rem;
  font-size: 13px;
  line-height: 18px;
}
.request-form__price {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 24px;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.request-form__fields {
  gap: 1.125rem 1rem;
}
.request-form__label {
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-on-surface-variant);
}
.request-form__input,
.request-form__textarea {
  margin-top: 0.5rem;
  border: 1px solid var(--v2p-field-edge);
  border-radius: 12px;
  background-color: var(--v2p-field);
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.request-form__input {
  height: 3rem;
}
.request-form__textarea {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.request-form__input:hover,
.request-form__textarea:hover {
  border-color: var(--color-border-strong);
}
.request-form__input:focus,
.request-form__textarea:focus {
  border-color: var(--color-primary-container);
  background-color: var(--v2p-field);
  box-shadow: 0 0 0 4px var(--v2p-ring);
}
.request-form__input[aria-invalid='true'],
.request-form__textarea[aria-invalid='true'] {
  border-color: var(--color-error);
  background-color: var(--v2p-field);
}
.request-form__error {
  font-size: 13px;
  line-height: 18px;
}
.request-form__group {
  margin-top: 2rem;
}
.request-form__hint {
  margin-top: 0.25rem;
  font-size: 13px;
  line-height: 18px;
}
.request-form__group-label {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
}
.request-form__service-name {
  margin-top: 0.375rem;
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.request-form__chips {
  gap: 0.5rem;
}
.request-form__chip {
  height: 2.375rem;
  border: 1px solid var(--v2p-field-edge);
  border-radius: 980px;
  background-color: var(--v2p-field);
  padding-left: 0.75rem;
  padding-right: 1rem;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-on-surface);
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.request-form__chip:hover {
  border-color: var(--color-border-strong);
}
.request-form__chip:has(:checked) {
  border-color: var(--color-primary-container);
  background-color: rgb(0 113 227 / 0.1);
  color: var(--color-on-surface);
  box-shadow: inset 0 0 0 1px var(--color-primary-container);
}
.request-form__chip:has(:focus-visible) {
  box-shadow: 0 0 0 4px var(--v2p-ring);
}
.request-form__check {
  height: 1.0625rem;
  width: 1.0625rem;
}
.request-form__optional {
  font-size: 13px;
  font-weight: 400;
}
.request-form__account {
  border-radius: 980px;
  background-color: var(--v2p-inset);
  padding: 0.375rem 0.875rem;
  font-size: 13px;
  line-height: 18px;
}
.request-form__alert {
  border-radius: 14px;
  padding: 0.875rem 1rem;
  font-size: 14px;
  line-height: 20px;
}
.request-form__footer {
  margin-top: 2rem;
  border-top: 1px solid var(--color-hairline);
  padding-top: 1.5rem;
}
.request-form__phone {
  font-size: 13px;
  line-height: 18px;
}
.request-form__submit {
  height: 2.75rem;
  border-radius: 980px;
  background-color: var(--color-primary-container);
  padding-left: 1.5rem;
  padding-right: 1.375rem;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #ffffff;
  box-shadow: none;
  transition: background-color 0.25s ease;
}
.request-form__submit:hover {
  background-color: var(--color-primary-solid);
}
.request-done__check {
  height: 4rem;
  width: 4rem;
  border-radius: 980px;
  background-color: rgb(52 199 89 / 0.14);
  color: var(--v2p-ok);
}
@media (prefers-reduced-motion: no-preference) {
.request-done:not([hidden]) .request-done__check {
  animation: v2p-pop 0.6s var(--v2-ease) both;
}
}
.request-done__title {
  font-size: 28px;
  line-height: 32px;
  letter-spacing: -0.026em;
  font-weight: 700;
}
.request-done__text {
  margin-top: 0.75rem;
  font-size: 15px;
  line-height: 22px;
}
.request-done__reference {
  font-size: 13px;
  line-height: 18px;
}
.request-done__notice {
  border-radius: 14px;
  background-color: var(--v2p-inset);
  font-size: 13px;
  line-height: 18px;
}
.request-done__button {
  height: 2.75rem;
  border-radius: 980px;
  background-color: var(--v2p-fill);
  padding-left: 1.75rem;
  padding-right: 1.75rem;
  font-size: 16px;
  font-weight: 600;
}
.request-done__button:hover {
  background-color: var(--v2p-fill-strong);
}
.request-auth__switch {
  border-radius: 980px;
  background-color: var(--color-surface-container-high);
  padding: 0.1875rem;
}
.request-auth__option,
.request-auth__option-active {
  border-radius: 980px;
  padding: 0.4375rem 1rem;
  font-size: 13px;
}
.request-auth__option-active {
  background-color: var(--color-surface-selected);
  box-shadow: var(--v2p-thumb-shadow);
}

/* ── About and policy pages (includes/info-page.php): a slim dark title scene that ends on a lit
   horizon, the curve of a planet catching the scene's light; then one reading column on a tile
   that rises over it. Below the horizon lies the page itself: by day the edge glows and fades
   into the grey page through a soft band of haze; after hours the lit edge alone marks where the
   black stage meets the charcoal page. The horizon sinks a little as the page scrolls (--v2-p),
   so the tile glides up over it; nothing else moves. ───────────────────────────────────────── */
:root {
  --v2p-ground: #f5f5f7;
  --v2p-rim: rgb(255 255 255 / 0.95);
  --v2p-rim-glow: rgb(150 190 255 / 0.9);
  --v2p-haze: rgb(0 113 227 / 0.2);
  --v2p-haze-far: rgb(120 170 255 / 0.32);
}
:root[data-theme='dark'] {
  --v2p-ground: #101012;
  --v2p-rim: rgb(170 195 255 / 0.55);
  --v2p-rim-glow: rgb(120 160 255 / 0.6);
  --v2p-haze: rgb(70 105 255 / 0.3);
  --v2p-haze-far: rgb(70 105 255 / 0.1);
}
.info-hero {
  --v2-glow-y: 92%;
  overflow: hidden;
  /* at least half the window tall, so at the top of the page it rests fully open (a shorter
     scene would already be closing into its stage, motion.js --v2-c) */
  min-height: calc(50vh + 1.5rem);
  padding-left: var(--gutter-mobile);
  padding-right: var(--gutter-mobile);
  padding-bottom: calc(11vw + 5rem);
  /* The curve's size follows the window, so it keeps one shape at every width and its ends stay
     clear of the scene's lower corners (by 3.5rem on phones, 2.5rem wider). */
  --hz-w: 240vw;
  --hz-top: calc(11vw + 3.5rem);
  /* Under the horizon the scene itself is painted ground-coloured (to the curve's lowest
     resting place), not black: so as the scene closes into its rounded stage, no dark hairline
     shows along its edges below the curve. */
  background: radial-gradient(circle calc(var(--hz-w) / 2) at 50% calc(100% - var(--hz-top) + 1rem + var(--hz-w) / 2), var(--v2p-ground) calc(100% + 2px), var(--v2-scene-bg) calc(100% + 3px));
}
@media (min-width: 768px) {
.info-hero {
  padding-left: var(--margin);
  padding-right: var(--margin);
  padding-bottom: calc(8vw + 4.5rem);
  --hz-w: 320vw;
  --hz-top: calc(8vw + 2.5rem);
}
}
/* The light rises from behind the horizon; below it the ground covers the rest. */
.info-hero::before {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%);
  mask-image: linear-gradient(180deg, transparent 0, #000 22%);
}
.info-hero__horizon {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: calc(100% - var(--hz-top));
  width: var(--hz-w);
  aspect-ratio: 1;
  margin-left: calc(var(--hz-w) / -2);
  border-radius: 50%;
  /* the haze gathers under the light, at the top of the curve, and thins out toward the sides */
  background:
    radial-gradient(42vw 11rem at 50% 0, var(--v2p-haze), transparent),
    var(--v2p-ground);
  box-shadow:
    0 0 0 1px var(--v2p-rim),
    0 -1px 12px 0 var(--v2p-rim-glow),
    0 -8px 60px 4px rgb(var(--glow-blue) / 0.5),
    0 -30px 180px 30px rgb(var(--glow-violet) / 0.18),
    inset 0 3px 8px -3px var(--v2p-haze-far);
  pointer-events: none;
}
/* The last stretch of ground settles to the plain page colour, so where the curve runs close to
   the scene's lower corners (and where the scene rounds them as it closes) no edge shows. */
.info-hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.25rem;
  background-image: linear-gradient(180deg, transparent, var(--v2p-ground) 80%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
html.v2-js .info-hero__horizon {
  /* --v2-p runs from about 0.65 (top of the page) as the scene leaves; the horizon sinks up to
     16px and widens a touch, so the tile seems to rise over it. */
  --hz-t: clamp(0, (var(--v2-p, 0.65) - 0.64) * 3.2, 1);
  transform: translate3d(0, calc(var(--hz-t) * 16px), 0) scale(calc(1 + var(--hz-t) * 0.012));
  transform-origin: 50% 0;
  will-change: transform;
  animation: v2p-horizon-in 1.4s var(--v2-ease-out) both;
}
}
@keyframes v2p-horizon-in {
from { translate: 0 2.5rem; }
}
.info-hero .section-head {
  max-width: 50rem;
}
.info-hero .section-title {
  font-size: clamp(2.5rem, 1.2rem + 4.2vw, 4.75rem);
  line-height: 1.04;
  letter-spacing: -0.034em;
  text-wrap: balance;
}
.info-hero .section-intro {
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.25rem;
  max-width: 38rem;
  text-wrap: balance;
  color: #a1a1a6;
}
.info-body {
  background-color: var(--color-surface);
  padding: 0 var(--gutter-mobile) 5rem;
}
@media (min-width: 768px) {
.info-body {
  padding-left: var(--margin);
  padding-right: var(--margin);
  padding-bottom: 7rem;
}
}
.info-page {
  position: relative;
  z-index: 1;
  margin-top: -3rem;
  max-width: 47rem;
  border-radius: 20px;
  background-color: var(--v2-tile);
  padding: 2.25rem 1.5rem 2.5rem;
  box-shadow: var(--shadow-card);
}
@media (min-width: 768px) {
.info-page {
  margin-top: -4rem;
  border-radius: var(--v2-radius-tile);
  padding: 3.5rem 4rem 4rem;
}
}
.info-page__heading {
  margin-top: 2.75rem;
  border-top: 1px solid var(--color-hairline);
  padding-top: 2.75rem;
  font-size: clamp(1.5rem, 1.25rem + 0.7vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: -0.024em;
  font-weight: 700;
}
.info-page__heading:first-child {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}
.info-page__text {
  margin-top: 1rem;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.012em;
  color: var(--color-on-surface-variant);
}
.info-page__text a {
  color: var(--color-primary);
}
/* Bulleted points in a policy section. */
.info-page__list {
  display: grid;
  gap: 0.5rem;
  margin: 0.875rem 0 0;
  padding-left: 1.25rem;
  list-style: disc;
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -0.012em;
  color: var(--color-on-surface-variant);
}
.info-page__list li::marker {
  color: var(--color-primary);
}
.info-page__list a {
  color: var(--color-primary);
}
.info-page__text a:hover {
  text-decoration: underline;
}
.info-page__details {
  margin-top: 1.25rem;
  grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
  column-gap: 0;
  border-bottom: 1px solid var(--color-hairline);
}
.info-page__details > :is(dt, dd) {
  margin: 0;
  border-top: 1px solid var(--color-hairline);
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.info-page__details dt {
  padding-right: 2rem;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.012em;
  font-weight: 600;
}
.info-page__details dd.info-page__text {
  margin-top: 0;
}
@media (max-width: 539.98px) {
.info-page__details {
  grid-template-columns: minmax(0, 1fr);
}
.info-page__details dt {
  padding-bottom: 0;
}
.info-page__details dd {
  border-top: 0;
  padding-top: 0.125rem;
}
}
.info-page__actions {
  margin-top: 2.5rem;
}

/* ── 404: a scene of its own, a planet's lit edge rising under a field of stars ─────────── */
.lost-scene {
  --v2-glow-y: 96%;
  --v2-glow: var(--glow-blue);
  /* how far the planet's top stands above the scene's foot */
  --lost-d: 10rem;
  display: flex;
  min-height: max(38rem, 100vh);
  min-height: max(38rem, 100svh);
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-left: var(--gutter-mobile);
  padding-right: var(--gutter-mobile);
}
.site-main--404 > .site-main__sections > section.lost-scene:first-child {
  padding-top: calc(3.5rem + 3rem);
  padding-bottom: 12rem;
}
@media (min-width: 768px) {
.lost-scene {
  --lost-d: max(12rem, 15vw);
  padding-left: var(--margin);
  padding-right: var(--margin);
}
.site-main--404 > .site-main__sections > section.lost-scene:first-child {
  padding-top: calc(3.5rem + 4rem);
  padding-bottom: calc(var(--lost-d) + 2rem);
}
}
.lost-scene__inner {
  position: relative;
  width: 100%;
}
.lost-scene .section-head {
  max-width: 52rem;
}
.lost-scene .section-title {
  font-size: clamp(2.75rem, 1rem + 5.4vw, 5.75rem);
  line-height: 1.02;
  letter-spacing: -0.036em;
  text-wrap: balance;
}
.lost-scene .section-intro {
  margin-top: 1.25rem;
  color: #a1a1a6;
}
.lost-scene .home-hero__actions {
  margin-top: 2.5rem;
}
/* The planet: by day its body is the daylight ground, the page's own grey, hazed blue under the
   light; after hours a night-side navy that sinks to black. Either way it runs on into the footer
   below with no edge (the footer takes the same colour here), and its rim is lit by the scene. */
.lost-scene {
  --v2p-planet-body: radial-gradient(50% calc(var(--lost-d) * 0.8) at 50% 0, rgb(0 113 227 / 0.22), transparent), var(--color-surface-footer);
  --v2p-planet-rim: rgb(255 255 255 / 0.95);
  --v2p-planet-inner: rgb(120 170 255 / 0.4);
}
:root[data-theme='dark'] .lost-scene {
  --v2p-planet-body: radial-gradient(circle at 50% 0%, #0c1436 0%, #04050c 22%, var(--color-surface-footer) 42%);
  --v2p-planet-rim: rgb(160 190 255 / 0.4);
  --v2p-planet-inner: rgb(140 175 255 / 0.6);
}
.lost-scene__planet {
  position: absolute;
  left: 50%;
  top: calc(100% - var(--lost-d));
  z-index: -1;
  width: max(170vw, 64rem);
  aspect-ratio: 1;
  margin-left: calc(max(170vw, 64rem) / -2);
  border-radius: 50%;
  background: var(--v2p-planet-body);
  box-shadow:
    0 0 0 1px var(--v2p-planet-rim),
    0 -1px 18px 1px rgb(120 160 255 / 0.55),
    0 -10px 90px 10px rgb(var(--glow-blue) / 0.5),
    0 -40px 240px 40px rgb(var(--glow-violet) / 0.22),
    inset 0 22px 70px -24px var(--v2p-planet-inner);
  pointer-events: none;
}
/* The scene's last stretch settles to the footer's colour, so the two meet without a line. */
.lost-scene::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3rem;
  background-image: linear-gradient(180deg, transparent, var(--color-surface-footer));
  pointer-events: none;
}
:root[data-theme] .site-main--404 + .site-footer,
.site-main--404 + .site-footer {
  border-top-color: transparent;
  background-image: none;
}
/* Two fields of stars, near and far, as on the other scenes (no image needed: dots drawn by the
   browser), fading out before the planet's edge. Each layer is cut wider than the scene, so it
   can drift (by translate, which the compositor moves without repainting) and hang back as the
   page scrolls (by transform) without an edge ever showing. */
.lost-scene__stars,
.lost-scene__stars::after {
  position: absolute;
  inset: -10rem -360px 0 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgb(255 255 255 / 0.9) 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 62%, rgb(255 255 255 / 0.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 57% 9%, rgb(255 255 255 / 0.8) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 76% 41%, rgb(200 215 255 / 0.9) 50%, transparent 51%),
    radial-gradient(1px 1px at 91% 77%, rgb(255 255 255 / 0.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 5% 88%, rgb(255 255 255 / 0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 46% 33%, rgb(255 255 255 / 0.55) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 66% 70%, rgb(255 255 255 / 0.65) 50%, transparent 51%);
  background-size: 340px 340px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 80%);
  mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 80%);
  opacity: 0.7;
}
.lost-scene__stars::after {
  content: '';
  inset: -40px 0 0 -120px;
  background-size: 520px 520px;
  background-position: 130px 60px;
  -webkit-mask-image: none;
  mask-image: none;
  opacity: 0.5;
}
@media (prefers-reduced-motion: no-preference) {
.lost-scene__planet {
  animation: v2p-planet-rise 1.6s var(--v2-ease-out) both;
}
.lost-scene__stars {
  animation: v2p-stars 120s linear 1, v2p-twinkle 5s ease-in-out 6 alternate;
}
.lost-scene__stars::after {
  animation: v2p-stars-far 120s linear 1;
}
/* Depth as the page scrolls (--v2-p runs from 0.5 at the top): the far stars hang back most,
   the near ones a little less, and the planet comes up to meet the footer. */
html.v2-js .lost-scene__stars {
  transform: translate3d(0, calc((var(--v2-p, 0.5) - 0.5) * 160px), 0);
  will-change: transform;
}
html.v2-js .lost-scene__stars::after {
  transform: translate3d(0, calc((var(--v2-p, 0.5) - 0.5) * 120px), 0);
  will-change: transform;
}
html.v2-js .lost-scene__planet {
  transform: translate3d(0, calc((0.5 - var(--v2-p, 0.5)) * 150px), 0);
  will-change: transform;
}
}
@keyframes v2p-planet-rise {
from { opacity: 0; translate: 0 7rem; }
to { opacity: 1; translate: none; }
}
/* the near field drifts left at 3px a second; the far one, carried by it, nets 2px */
@keyframes v2p-stars {
to { translate: -360px 0; }
}
@keyframes v2p-stars-far {
to { translate: 120px 40px; }
}
@keyframes v2p-twinkle {
to { opacity: 0.45; }
}

/* ── Console (console.php): an app in the v2 look. Apple-clean by day, Spaceship after hours:
   the cards are tiles, the controls pills, the numbers set big. ───────────────────────── */
/* Light from the top of the window: by day a clear Apple blue washing down into the grey, with a
   touch of cyan to one side; after hours the scene's electric blue and violet. */
.v2-console {
  align-items: flex-start;
  background-color: var(--color-surface);
  background-image:
    radial-gradient(ellipse 70% 34rem at 50% -12rem, rgb(0 113 227 / 0.24), rgb(0 113 227 / 0) 72%),
    radial-gradient(ellipse 40% 24rem at 86% -7rem, rgb(90 200 250 / 0.22), rgb(90 200 250 / 0) 70%);
  background-repeat: no-repeat;
  padding: 1rem;
}
:root[data-theme='dark'] .v2-console {
  background-image:
    radial-gradient(ellipse 60% 34rem at 50% -16rem, rgb(var(--glow-blue) / 0.42), rgb(var(--glow-blue) / 0) 72%),
    radial-gradient(ellipse 40% 24rem at 85% -8rem, rgb(var(--glow-violet) / 0.18), rgb(var(--glow-violet) / 0) 70%);
}
@media (min-width: 768px) {
.v2-console {
  padding: 1.5rem 2rem 3rem;
}
}
.v2-console .console__inner {
  max-width: 1360px;
  row-gap: 2.5rem;
}
/* Preview banner: a slim frosted capsule. */
.v2-console .console-banner {
  border-radius: 20px;
  background-color: rgb(255 255 255 / 0.72);
  padding: 0.75rem 0.75rem 0.75rem 1.25rem;
  box-shadow: 0 0 0 1px var(--color-hairline), 0 8px 24px -16px rgb(0 0 0 / 0.25);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
:root[data-theme='dark'] .v2-console .console-banner {
  background-color: rgb(20 20 22 / 0.72);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08);
}
@media (min-width: 768px) {
.v2-console .console-banner {
  border-radius: 980px;
}
}
.v2-console .console-banner .note-soft {
  font-size: 13px;
  line-height: 18px;
}
.v2-console .console-banner__eyebrow {
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.v2-console .meta-pill {
  border-radius: 980px;
  background-color: var(--v2p-fill);
  padding: 0.25rem 0.75rem;
  font-size: 12px;
}
.v2-console .console-banner__button {
  border-radius: 980px;
  background-color: var(--color-primary-container);
  padding: 0.4375rem 1rem;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: #ffffff;
  transition: background-color 0.25s ease;
}
.v2-console .console-banner__button:hover {
  background-color: var(--color-primary-solid);
}
/* Title row */
.v2-console .console-overview {
  row-gap: 1.75rem;
}
.v2-console .console-overview__crumbs {
  font-size: 13px;
  line-height: 18px;
  gap: 0.375rem;
}
.v2-console .console-overview__title-block .title-lg {
  margin-top: 0.25rem;
  font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.034em;
  font-weight: 700;
}
.v2-console :is(.console-overview__action, .console-overview__cta, .console-instance__action, .console-instance__action-danger) {
  height: 2.5rem;
  gap: 0.375rem;
  border-radius: 980px;
  padding-left: 1.125rem;
  padding-right: 1.25rem;
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: -0.012em;
  box-shadow: none;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.v2-console :is(.console-overview__action, .console-instance__action) {
  background-color: var(--v2-tile);
  color: var(--color-on-surface);
  box-shadow: 0 0 0 1px var(--color-hairline), 0 1px 2px rgb(0 0 0 / 0.04);
}
.v2-console :is(.console-overview__action, .console-instance__action):hover {
  background-color: var(--color-surface-container-low);
}
:root[data-theme='dark'] .v2-console :is(.console-overview__action, .console-instance__action) {
  background-color: rgb(255 255 255 / 0.08);
  box-shadow: none;
}
:root[data-theme='dark'] .v2-console :is(.console-overview__action, .console-instance__action):hover {
  background-color: rgb(255 255 255 / 0.14);
}
.v2-console .console-overview__cta {
  background-color: var(--color-primary-container);
  color: #ffffff;
}
.v2-console .console-overview__cta:hover {
  background-color: var(--color-primary-solid);
}
/* Shutdown: a tinted red pill in both themes, present without being the loudest thing on the page. */
.v2-console .console-instance__action-danger {
  background-color: rgb(215 0 21 / 0.08);
  color: var(--v2p-danger);
}
.v2-console .console-instance__action-danger:hover {
  background-color: rgb(215 0 21 / 0.13);
  color: #b8000f;
}
:root[data-theme='dark'] .v2-console .console-instance__action-danger {
  background-color: rgb(255 69 58 / 0.16);
  color: #ff6961;
}
:root[data-theme='dark'] .v2-console .console-instance__action-danger:hover {
  background-color: rgb(255 69 58 / 0.26);
  color: #ff7b74;
}
.v2-console button:focus-visible,
.v2-console .console-fleet__search:focus-visible {
  outline: 2px solid var(--color-primary-container);
  outline-offset: 2px;
}
/* Metrics: four tiles, the figures set big. */
.v2-console .console-metrics {
  gap: 1rem;
}
.v2-console .console-metrics > .card-column {
  border: 0;
  border-radius: 22px;
  background-color: var(--v2-tile);
  padding: 1.5rem 1.5rem 1.625rem;
  box-shadow: var(--shadow-card);
}
.v2-console .overline {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.v2-console .console-metrics .title-lg {
  font-size: 44px;
  line-height: 48px;
  letter-spacing: -0.04em;
  font-weight: 700;
}
.v2-console .console-metrics__body,
.v2-console .console-metrics__figure-spark {
  margin-top: 1.25rem;
}
.v2-console .figure-row {
  align-items: baseline;
  gap: 0.375rem;
}
.v2-console .console-metrics__unit {
  font-size: 15px;
  font-weight: 500;
}
.v2-console .console-metrics__legend {
  margin-top: 0.75rem;
  font-size: 12px;
}
.v2-console :is(.console-metrics__badge, .console-metrics__badge-accent, .console-fleet__count, .console-instance__node-id, .console-policy__badge) {
  border-radius: 980px;
  padding: 0.1875rem 0.625rem;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}
.v2-console .console-metrics__badge {
  background-color: rgb(52 199 89 / 0.13);
  color: var(--v2p-ok);
}
.v2-console .console-metrics__badge .dot-sm {
  background-color: currentColor;
}
.v2-console .console-metrics__badge-accent,
.v2-console .console-policy__badge {
  background-color: rgb(0 113 227 / 0.1);
  color: var(--color-primary);
}
.v2-console .console-policy__badge {
  background-color: rgb(0 113 227 / 0.07);
}
:root[data-theme='dark'] .v2-console :is(.console-metrics__badge-accent, .console-policy__badge) {
  background-color: rgb(41 151 255 / 0.16);
  color: #8fb0ff;
}
.v2-console .console-metrics__spark {
  height: 3rem;
  width: 7.5rem;
}
.v2-console :is(.console-metrics__meter, .console-fleet__meter) {
  height: 0.375rem;
  border-radius: 980px;
  background-color: var(--color-surface-container-high);
}
.v2-console .console-metrics__meter {
  margin-top: 0.875rem;
}
.v2-console :is(.console-metrics__meter, .console-fleet__meter) :is(.meter-fill, .console-metrics__fill) {
  border-radius: 980px;
  background-image: linear-gradient(90deg, #2948ff, #4f8bff);
  background-color: transparent;
}
.v2-console .console-metrics__meter .console-metrics__fill {
  background-image: linear-gradient(90deg, #7c4dff, #b18cff);
}
/* Instances */
.v2-console .console-fleet {
  row-gap: 1.25rem;
}
.v2-console .console-fleet__head .heading-sm,
.v2-console .console-policy .heading-sm {
  font-size: 24px;
  line-height: 28px;
  letter-spacing: -0.022em;
  font-weight: 700;
}
.v2-console .console-fleet__count {
  background-color: var(--v2p-fill);
  color: var(--color-on-surface-variant);
}
.v2-console .console-fleet__toolbar {
  gap: 0.25rem;
  border-radius: 980px;
  background-color: var(--v2-tile);
  padding: 0.25rem;
  box-shadow: 0 0 0 1px var(--color-hairline), 0 1px 2px rgb(0 0 0 / 0.04);
}
.v2-console .console-fleet__search {
  height: 2rem;
  border-radius: 980px;
  padding-left: 2.25rem;
  font-size: 14px;
  line-height: 18px;
}
.v2-console .console-fleet__search-icon {
  left: 0.875rem;
  font-size: 18px;
}
.v2-console .console-fleet__search:focus-visible {
  outline-offset: 0;
}
.v2-console .console-fleet__divider {
  background-color: var(--color-hairline);
}
.v2-console .console-fleet__filter {
  height: 2rem;
  border-radius: 980px;
  background-color: var(--v2p-fill);
  padding: 0 0.875rem;
  font-size: 13px;
  font-weight: 600;
  transition: background-color 0.25s ease;
}
.v2-console .console-fleet__filter:hover {
  background-color: var(--v2p-fill-strong);
}
.v2-console .table-card {
  border-radius: 22px;
  background-color: var(--v2-tile);
  box-shadow: var(--shadow-card);
}
.v2-console .data-table-head {
  background-color: transparent;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--color-hairline);
}
.v2-console .console-fleet__table :is(th) {
  padding-top: 1rem;
  padding-bottom: 0.875rem;
}
.v2-console .console-fleet__body > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--color-hairline);
}
.v2-console :is(.console-fleet__row, .console-fleet__row-selected) {
  background-color: transparent;
  transition: background-color 0.2s ease;
}
.v2-console :is(.console-fleet__row, .console-fleet__row-selected):hover {
  background-color: var(--v2p-fill);
}
.v2-console .console-fleet__row-selected {
  border-left-width: 0;
  background-color: rgb(0 113 227 / 0.05);
  box-shadow: inset 3px 0 0 var(--color-primary-container);
}
:root[data-theme='dark'] .v2-console .console-fleet__row-selected {
  background-color: rgb(41 151 255 / 0.08);
}
.v2-console :is(.console-fleet__cell, .console-fleet__cell-nowrap, .console-fleet__cell-actions) {
  padding-top: 1.125rem;
  padding-bottom: 1.125rem;
}
.v2-console .console-fleet__cell {
  white-space: nowrap;
}
.v2-console .console-fleet__name-selected,
.v2-console .console-fleet__cell .label-medium {
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
}
.v2-console :is(.console-fleet__dot, .console-fleet__dot-live) {
  background-color: #34c759;
  box-shadow: 0 0 0 3px rgb(52 199 89 / 0.18);
}
.v2-console .console-fleet__action {
  display: inline-flex;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 980px;
  padding: 0;
}
.v2-console .console-fleet__action:hover {
  background-color: var(--v2p-fill-strong);
}
.v2-console .console-fleet__copy {
  border-radius: 6px;
}
.v2-console .console-fleet__meter {
  height: 0.3125rem;
}
/* The selected instance: one large tile, segmented tabs, inset cards. */
.v2-console .console-instance {
  border-radius: var(--v2-radius-tile);
  background-color: var(--v2-tile);
  box-shadow: var(--shadow-card);
}
.v2-console .console-instance__head {
  background-color: transparent;
  padding: 1.75rem 1.5rem 1.25rem;
}
@media (min-width: 768px) {
.v2-console .console-instance__head {
  padding: 2.25rem 2.25rem 1.5rem;
}
}
.v2-console .console-instance__icon-tile {
  height: 3.25rem;
  width: 3.25rem;
  border-radius: 14px;
  background-image: linear-gradient(160deg, #4f8bff, #2948ff);
  color: #ffffff;
  box-shadow: 0 10px 24px -10px rgb(41 72 255 / 0.7);
}
.v2-console .console-instance__icon {
  font-size: 26px;
}
.v2-console .console-instance__head .cluster-sm {
  flex-wrap: wrap;
  row-gap: 0.375rem;
}
.v2-console .console-instance__node-id {
  white-space: nowrap;
}
.v2-console .console-instance .heading-md {
  font-size: clamp(1.375rem, 1rem + 1.6vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.026em;
  font-weight: 700;
}
.v2-console .console-instance__node-id {
  background-color: var(--v2p-fill);
  color: var(--color-on-surface-variant);
}
.v2-console .console-instance .note {
  margin-top: 0.25rem;
  font-size: 14px;
  line-height: 20px;
}
.v2-console .console-instance__actions {
  gap: 0.5rem;
}
.v2-console .console-instance__tabs {
  align-self: flex-start;
  max-width: calc(100% - 3rem);
  margin: 0 1.5rem;
  gap: 0.125rem;
  border-radius: 980px;
  background-color: var(--color-surface-container-high);
  padding: 0.1875rem;
}
@media (min-width: 768px) {
.v2-console .console-instance__tabs {
  max-width: calc(100% - 4.5rem);
  margin: 0 2.25rem;
}
}
/* On a phone the tabs scroll sideways: the far edge fades to say so. */
@media (max-width: 767.98px) {
.v2-console .console-instance__tabs {
  padding-right: 2.25rem;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
}
}
.v2-console :is(.console-instance__tab, .console-instance__tab-active) {
  flex-shrink: 0;
  border: 0;
  border-radius: 980px;
  padding: 0.4375rem 1rem;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--color-on-surface-variant);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.v2-console .console-instance__tab:hover {
  background-color: var(--v2p-fill);
  color: var(--color-on-surface);
}
.v2-console .console-instance__tab-active {
  background-color: var(--color-surface-selected);
  font-weight: 600;
  color: var(--color-on-surface);
  box-shadow: var(--v2p-thumb-shadow);
}
.v2-console .console-instance__content {
  row-gap: 1rem;
  background-color: transparent;
  padding: 1.5rem;
}
@media (min-width: 768px) {
.v2-console .console-instance__content {
  padding: 1.75rem 2.25rem 2.25rem;
}
}
.v2-console .console-graphs {
  gap: 1rem;
}
.v2-console :is(.console-graphs__card, .console-policy__card, .console-policy__card-wide) {
  border-radius: 20px;
  background-color: var(--v2p-inset);
  padding: 1.25rem 1.25rem 1rem;
}
.v2-console :is(.console-policy__card, .console-policy__card-wide) {
  padding: 1.5rem;
}
.v2-console :is(.console-graphs__value, .console-graphs__value-accent) {
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
}
.v2-console .console-graphs__plot {
  margin-top: 0.75rem;
  overflow: hidden;
  border-radius: 10px;
}
.v2-console .console-graphs__axis {
  font-size: 12px;
  line-height: 16px;
}
/* The four graphs in one family of blues: CPU and Disk the system blue, Memory a cyan, Network an
   indigo; after hours each line carries a little of its own light. */
.v2-console .console-graphs__chart-soft {
  color: #0a7ea4;
}
.v2-console .console-graphs__chart-strong {
  color: #5856d6;
}
:root[data-theme='dark'] .v2-console .console-graphs__chart-soft {
  color: #64d2ff;
}
:root[data-theme='dark'] .v2-console .console-graphs__chart-strong {
  color: #8e8cff;
}
:root[data-theme='dark'] .v2-console :is(.console-graphs__plot, .console-metrics__spark) svg {
  filter: drop-shadow(0 0 6px color-mix(in srgb, currentColor 45%, transparent));
}
.v2-console .console-policy {
  gap: 1rem;
}
.v2-console .console-policy__schedule {
  border-radius: 14px;
  background-color: var(--v2-tile);
  padding: 0.875rem 1rem;
  font-size: 13px;
  line-height: 20px;
}
:root[data-theme='dark'] .v2-console .console-policy__schedule {
  background-color: rgb(255 255 255 / 0.05);
}
.v2-console .console-policy__switch {
  height: 1.75rem;
  width: 2.875rem;
  border-radius: 980px;
  background-color: var(--color-primary-container);
  padding: 0.1875rem;
}
.v2-console .console-policy__switch-knob {
  height: 1.375rem;
  width: 1.375rem;
  border-radius: 980px;
  background-color: #ffffff;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.25);
}
.v2-console .console-policy__add {
  height: 2rem;
  border-radius: 980px;
  padding: 0 0.875rem 0 0.625rem;
  font-size: 13px;
  font-weight: 600;
  background-color: rgb(0 113 227 / 0.07);
  transition: background-color 0.25s ease;
}
:root[data-theme='dark'] .v2-console .console-policy__add {
  background-color: rgb(41 151 255 / 0.16);
  color: #8fb0ff;
}
.v2-console .console-policy__add:hover {
  text-decoration: none;
  background-color: rgb(0 113 227 / 0.16);
}
.v2-console .console-policy__table-wrap {
  border-radius: 14px;
  background-color: var(--v2-tile);
}
:root[data-theme='dark'] .v2-console .console-policy__table-wrap {
  background-color: rgb(255 255 255 / 0.05);
}
.v2-console .console-policy__head-row {
  border-color: var(--color-hairline);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.v2-console .console-policy__body > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--color-hairline);
}
.v2-console .console-policy__allow {
  display: inline-flex;
  border-radius: 980px;
  background-color: rgb(52 199 89 / 0.13);
  padding: 0.125rem 0.5rem;
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--v2p-ok);
}
.v2-console .console-policy__remove {
  display: inline-flex;
  height: 1.75rem;
  width: 1.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 980px;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.v2-console .console-policy__remove:hover {
  background-color: rgb(255 59 48 / 0.12);
  color: var(--v2p-danger);
}
.v2-console .console-policy__footnote {
  font-size: 13px;
  line-height: 18px;
}
.v2-console .console-policy__value {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 12px;
  font-weight: 600;
  color: var(--v2p-ok);
}
.v2-console .console-policy__value::before {
  content: '';
  height: 0.375rem;
  width: 0.375rem;
  border-radius: 50%;
  background-color: currentColor;
}
/* ── Console on a phone: designed for the width, not squeezed. The four figures in a 2×2 grid;
   the overview's actions on one line of pills, the instance's four as an even 2×2 of pills; the
   tables keep their columns (and their table semantics) but hold the first column in place while
   the rest scroll beneath it, the far edge fading to say there is more. ─────────────────────── */
@media (max-width: 639.98px) {
.v2-console .console__inner {
  row-gap: 2rem;
}
.v2-console .console-overview__actions {
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  gap: 0.375rem;
}
.v2-console .console-overview__actions {
  margin: 0 -1rem;
  padding: 0.25rem 1rem;
}
.v2-console :is(.console-overview__action, .console-overview__cta, .console-instance__action, .console-instance__action-danger) {
  flex-shrink: 0;
  height: 2.25rem;
  gap: 0.3125rem;
  padding-left: 0.75rem;
  padding-right: 0.8125rem;
  font-size: 13px;
}
.v2-console :is(.console-overview__action, .console-overview__cta, .console-instance__action) .material-symbols-outlined {
  font-size: 16px;
}
.v2-console .console-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.v2-console .console-metrics > .card-column {
  border-radius: 20px;
  padding: 1rem 1rem 1.125rem;
}
.v2-console .console-metrics .split {
  flex-wrap: wrap;
  gap: 0.375rem 0.5rem;
}
.v2-console .console-metrics .overline {
  font-size: 11px;
  letter-spacing: 0.05em;
}
.v2-console .console-metrics :is(.console-metrics__badge, .console-metrics__badge-accent) {
  padding: 0.125rem 0.5rem;
  font-size: 11px;
}
.v2-console .console-metrics .value-sm-soft {
  font-size: 11px;
  line-height: 16px;
}
.v2-console .console-metrics .title-lg {
  font-size: 30px;
  line-height: 34px;
  letter-spacing: -0.035em;
}
.v2-console .console-metrics__unit {
  font-size: 13px;
}
.v2-console :is(.console-metrics__body, .console-metrics__figure-spark) {
  margin-top: 1rem;
}
.v2-console .console-metrics__figure-spark {
  flex-direction: column;
  align-items: stretch;
  gap: 0.625rem;
}
.v2-console .console-metrics__spark {
  height: 2.25rem;
  width: 100%;
}
.v2-console .console-metrics__legend {
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  font-size: 11px;
}
.v2-console .console-metrics__meter {
  margin-top: 0.75rem;
}
.v2-console .console-fleet__toolbar {
  width: 100%;
}
.v2-console .console-fleet__search-field {
  min-width: 0;
  flex: 1 1 auto;
}
.v2-console .console-fleet__search {
  width: 100%;
}
.v2-console :is(.table-card, .console-instance) {
  border-radius: 22px;
}
.v2-console .console-fleet .table-scroll,
.v2-console .console-policy__table-wrap {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.25rem), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 2.25rem), transparent);
  /* a control reached with the keyboard is scrolled clear of the held column and the faded edge */
  scroll-padding-left: 12.75rem;
  scroll-padding-right: 2.25rem;
}
.v2-console .console-policy__table-wrap {
  scroll-padding-left: 9.5rem;
}
/* while the keyboard is in there, nothing is faded */
.v2-console :is(.console-fleet .table-scroll, .console-policy__table-wrap, .console-instance__tabs):has(:focus-visible) {
  -webkit-mask-image: none;
  mask-image: none;
}
.v2-console .console-fleet__table :is(th, td) {
  padding: 0.875rem 0.75rem;
}
.v2-console .console-fleet__table :is(th, td):last-child,
.v2-console .console-policy__table-wrap :is(th, td):last-child {
  padding-right: 2.5rem;
}
.v2-console .console-fleet__table :is(th, td):first-child,
.v2-console .console-policy__table-wrap :is(th, td):first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: var(--v2p-sticky, var(--v2-tile));
  box-shadow: 1px 0 0 var(--color-hairline), 10px 0 14px -12px rgb(0 0 0 / 0.25);
}
.v2-console .console-fleet__table :is(th, td):first-child {
  padding-left: 1rem;
}
.v2-console .console-fleet__row-selected > td:first-child {
  background-image: linear-gradient(rgb(0 113 227 / 0.05), rgb(0 113 227 / 0.05));
  box-shadow: inset 3px 0 0 var(--color-primary-container), 1px 0 0 var(--color-hairline), 10px 0 14px -12px rgb(0 0 0 / 0.25);
}
:root[data-theme='dark'] .v2-console .console-fleet__row-selected > td:first-child {
  background-image: linear-gradient(rgb(41 151 255 / 0.08), rgb(41 151 255 / 0.08));
}
.v2-console .console-fleet__row:hover > td:first-child {
  background-image: linear-gradient(var(--v2p-fill), var(--v2p-fill));
}
.v2-console .console-instance__head {
  padding: 1.25rem 1.25rem 1rem;
}
.v2-console .console-instance__head .cluster-md {
  align-items: flex-start;
  gap: 0.875rem;
}
.v2-console .console-instance__icon-tile {
  height: 2.75rem;
  width: 2.75rem;
  flex-shrink: 0;
  border-radius: 12px;
}
.v2-console .console-instance__icon {
  font-size: 22px;
}
.v2-console .console-instance .heading-md {
  font-size: 1.25rem;
}
.v2-console .console-instance .note {
  font-size: 13px;
  line-height: 18px;
}
.v2-console .console-instance__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}
.v2-console .console-instance__actions > * {
  justify-content: center;
}
.v2-console .console-instance__tabs {
  max-width: calc(100% - 2.5rem);
  margin: 0 1.25rem;
}
.v2-console .console-instance__content {
  row-gap: 0.75rem;
  padding: 1.25rem;
}
.v2-console .console-graphs {
  gap: 0.75rem;
}
.v2-console .console-graphs__plot {
  height: 5.5rem;
}
.v2-console :is(.console-policy__card, .console-policy__card-wide) {
  padding: 1.25rem 1rem;
}
.v2-console .console-policy__table-wrap :is(th, td) {
  white-space: nowrap;
}
}
/* The narrowest phones: the three overview actions still share one line. */
@media (max-width: 379.98px) {
.v2-console :is(.console-overview__action, .console-overview__cta) {
  gap: 0.25rem;
  padding-left: 0.6875rem;
  padding-right: 0.75rem;
  font-size: 12px;
}
.v2-console :is(.console-overview__action, .console-overview__cta) .material-symbols-outlined {
  font-size: 15px;
}
}
:root[data-theme='dark'] .v2-console .console-policy__table-wrap {
  --v2p-sticky: #313134; /* the table well (5% white) over the card (5% white) over the tile, made opaque */
}

/* The data draws itself in once, as each tile arrives: lines are drawn from left to right with the
   area beneath them filling in behind, and meters grow from zero to their (unchanged) widths, one
   tile after another. Nothing ticks or counts; once drawn, it stays. */
@media (prefers-reduced-motion: no-preference) {
html.v2-js .v2-console :is(.console-metrics__spark, .console-graphs__plot) path[stroke] {
  stroke-dasharray: 1.05 1.2;
}
/* a graph card is only revealed for its drawing: it neither fades nor rises on its own (the panel
   holding it already does) */
html.v2-motion .v2-console .console-graphs__card[data-reveal] {
  opacity: 1;
  animation: none;
}
html.v2-js .v2-console .card-column:not(.is-in) .console-metrics__spark path[stroke],
html.v2-js .v2-console .console-graphs__card:not(.is-in) path[stroke] {
  stroke-dashoffset: 1.1;
}
html.v2-js .v2-console .card-column:not(.is-in) .console-metrics__spark path:not([stroke]),
html.v2-js .v2-console .console-graphs__card:not(.is-in) path:not([stroke]) {
  opacity: 0;
}
html.v2-js .v2-console .card-column.is-in .console-metrics__spark path[stroke],
html.v2-js .v2-console .console-graphs__card.is-in path[stroke] {
  animation: v2p-draw 1.4s var(--v2-ease-out) both;
  animation-delay: var(--v2p-draw-at);
}
html.v2-js .v2-console .card-column.is-in .console-metrics__spark path:not([stroke]),
html.v2-js .v2-console .console-graphs__card.is-in path:not([stroke]) {
  animation: v2p-fade 0.9s linear both;
  animation-delay: calc(var(--v2p-draw-at) + 0.45s);
}
.v2-console .card-column {
  --v2p-draw-at: calc(var(--v2-i, 0) * 90ms + 0.35s);
}
.v2-console .console-graphs__card {
  --v2p-draw-at: calc(var(--v2-i, 0) * 120ms + 0.1s);
}
html.v2-js .v2-console :is(.console-metrics__meter, .console-fleet__meter) > * {
  transform-origin: 0 50%;
}
html.v2-js .v2-console :is(.card-column, .table-card):not(.is-in) :is(.console-metrics__meter, .console-fleet__meter) > * {
  transform: scaleX(0);
}
html.v2-js .v2-console :is(.card-column, .table-card).is-in :is(.console-metrics__meter, .console-fleet__meter) > * {
  animation: v2p-meter 1.2s var(--v2-ease-out) both;
  animation-delay: calc(var(--v2-i, 0) * 90ms + var(--v2p-row, 0) * 80ms + 0.4s);
}
.v2-console .console-fleet__body > :nth-child(2) { --v2p-row: 1; }
.v2-console .console-fleet__body > :nth-child(3) { --v2p-row: 2; }
.v2-console .console-fleet__body > :nth-child(4) { --v2p-row: 3; }
}
@keyframes v2p-draw {
from { stroke-dashoffset: 1.1; }
to { stroke-dashoffset: 0; }
}
@keyframes v2p-meter {
from { transform: scaleX(0); }
to { transform: none; }
}
/* The two pulsing dots settle after a few beats instead of pulsing for ever. */
.v2-console :is(.console-banner__dot, .console-fleet__dot-live) {
  animation-iteration-count: 3;
}
@media (prefers-reduced-motion: reduce) {
.v2-console :is(.console-banner__dot, .console-fleet__dot-live) {
  animation: none;
}
}

/* ── Footer: the business's own profiles (once set in config.php). ── */
.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* ── The WhatsApp button (once whatsapp_number is set in config.php): a small pill in the corner. ── */
.v2-chat {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.75rem;
  border-radius: 980px;
  background-color: var(--color-primary-container);
  padding: 0 1.125rem 0 0.875rem;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  box-shadow: 0 10px 28px -10px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.08);
}
.v2-chat:hover {
  background-color: var(--color-primary-solid);
}
.v2-chat svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
}
.v2-chat:focus-visible {
  outline: 2px solid var(--color-primary-container);
  outline-offset: 3px;
}