.site-header {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  z-index: 50;
  border-bottom-width: 1px;
  border-color: var(--color-surface-container);
  background-color: var(--color-header);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
.site-header__inner {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  height: 3.5rem;
  max-width: 1440px;
  align-items: center;
  justify-content: space-between;
  padding-left: var(--gutter-mobile);
  padding-right: var(--gutter-mobile);
}
@media (min-width: 640px) {
.site-header__inner {
  padding-left: var(--margin);
  padding-right: var(--margin);
}
}
.cluster-md {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.cluster-xs {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.site-header__logo-mark {
  display: flex;
  height: 1.5rem;
  width: 1.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background-color: var(--color-inverse-surface);
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-inverse-on-surface);
}
.site-header__logo-dot {
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 0.125rem;
  background-color: var(--color-primary-fixed);
}
.heading-sm {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 24px;
  letter-spacing: 0.012em;
  font-weight: 600;
  color: var(--color-on-surface);
}
.site-header__nav {
  display: none;
  align-items: center;
  gap: 0.75rem; /* 1024–1279px: leaves room for the padded "Deploy Server" button */
  align-self: stretch;
}
@media (min-width: 1024px) {
.site-header__nav {
  display: flex;
}
}
@media (min-width: 1280px) {
.site-header__nav {
  gap: var(--space-lg);
}
}
.site-header__nav-trigger {
  position: relative;
  display: inline-flex;
  height: 100%;
  align-items: center;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-on-surface-variant);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.site-header__nav-trigger::after {
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: calc(50% + 13px);
  height: 0.125rem;
  width: 70%;
  transform: translateX(-50%);
  content: '';
  border-radius: 0.75rem;
}
.site-header__nav-trigger:hover {
  color: var(--color-on-surface);
}
.site-header__nav-trigger[aria-expanded="true"] {
  color: var(--color-primary);
}
.site-header__nav-trigger[aria-current="page"]::after {
  content: '';
  background-color: var(--color-primary-container);
}
.mega {
  visibility: hidden;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 3.5rem;
  z-index: 10;
  transform: translateY(-0.25rem);
  border-bottom-width: 1px;
  border-color: var(--color-surface-container);
  background-color: var(--color-surface-container-lowest);
  opacity: 0;
  box-shadow: var(--shadow-popover);
  transition-property: opacity, transform, visibility;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.mega[data-open="true"] {
  visibility: visible;
  transform: translate(0, 0);
  opacity: 1;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
@media (prefers-reduced-motion: reduce) {
.mega {
  transition-property: none;
}
}
.mega__inner {
  margin-left: auto;
  margin-right: auto;
  max-width: 1440px;
  padding-left: var(--margin);
  padding-right: var(--margin);
  padding-bottom: var(--space-xl);
  padding-top: var(--space-lg);
}
.mega__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
}
.mega__group-label {
  margin-bottom: var(--space-xs);
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-tertiary);
}
.mega__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
}
.mega__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 0.5rem;
  padding: var(--space-md);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.mega__card:hover {
  background-color: var(--color-surface-container-low);
}
.mega__card-icon {
  margin-bottom: var(--space-md);
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container);
  color: var(--color-primary);
}
.label-strong {
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 600;
  color: var(--color-on-surface);
}
.desc {
  margin-top: 0.25rem;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--color-tertiary);
}
.mega__price {
  margin-top: var(--space-sm);
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--color-on-surface-variant);
}
.mega__card-icon-wordpress {
  margin-bottom: var(--space-md);
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container);
  color: var(--brand-wordpress);
}
.mega__footer {
  margin-top: var(--space-md);
  border-top-width: 1px;
  border-color: var(--color-surface-container);
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  padding-top: var(--space-md);
}
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-primary);
}
.link-arrow:hover {
  -webkit-text-decoration-line: underline;
  text-decoration-line: underline;
}
.icon-16 {
  font-size: 16px;
}
.mega__columns-apps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
}
.mega__apps-col {
  grid-column: span 2 / span 2;
}
.mega__group-label-apps {
  margin-bottom: var(--space-xs);
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-tertiary);
}
.mega__apps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xs);
}
.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  border-radius: 0.5rem;
  padding: var(--space-sm);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.menu-item:hover {
  background-color: var(--color-surface-container-low);
}
.menu-icon-docker {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container);
  color: var(--brand-docker);
}
.icon-20 {
  font-size: 20px;
}
.shrink {
  min-width: 0px;
}
.item-title {
  display: block;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 600;
  color: var(--color-on-surface);
}
.item-note {
  display: block;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--color-tertiary);
}
.menu-icon-nodejs {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container);
  color: var(--brand-nodejs);
}
.menu-icon-gitlab {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container);
  color: var(--brand-gitlab);
}
.menu-icon-nextjs {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container);
  color: var(--brand-nextjs);
}
.menu-icon-postgresql {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container);
  color: var(--brand-postgresql);
}
.menu-icon-wordpress {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container);
  color: var(--brand-wordpress);
}
.mega__list {
  display: grid;
  gap: var(--space-xs);
}
.menu-icon {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container);
  color: var(--color-primary);
}
.mega__footer-apps {
  margin-top: var(--space-md);
  border-top-width: 1px;
  border-color: var(--color-surface-container);
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
  padding-top: var(--space-md);
}
.site-header__nav-link {
  position: relative;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-on-surface-variant);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.site-header__nav-link::after {
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: calc(50% + 13px);
  height: 0.125rem;
  width: 70%;
  transform: translateX(-50%);
  content: '';
  border-radius: 0.75rem;
}
.site-header__nav-link:hover {
  color: var(--color-on-surface);
}
.site-header__nav-link[aria-current="page"]::after {
  content: '';
  background-color: var(--color-primary-container);
}
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
@media (min-width: 1024px) {
.site-header__actions {
  gap: var(--space-sm);
}
}
@media (min-width: 1280px) {
.site-header__actions {
  gap: var(--space-md);
}
}
/* The currency selector (includes/currency-selector.php), beside the prices: a one-cell control
   in the style of the billing period control next to it (a grey track, the choice in a white
   cell), with a chevron because it opens the three currencies. The pricing page sizes it like
   its own period cells (further down). */
.currency {
  position: relative;
  display: flex;
  flex-shrink: 0;
}
.currency__button {
  display: inline-flex;
  border-radius: 0.75rem;
  background-color: var(--color-surface-container-high);
  padding: 0.25rem;
  transition-property: background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.currency__button:hover,
.currency__button[aria-expanded="true"] {
  background-color: var(--color-surface-container-highest);
}
.currency__button:focus-visible {
  outline: 2px solid var(--color-primary-container);
  outline-offset: 2px;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.currency__value {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.75rem;
  background-color: var(--color-surface-selected);
  padding: 0.375rem 0.625rem 0.375rem 1rem;
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 500;
  white-space: nowrap;
  color: var(--color-on-surface);
  box-shadow: var(--shadow-xs);
}
.currency__labels {
  display: inline-grid;
}
.currency__label,
.currency__label-sizer {
  grid-column-start: 1;
  grid-row-start: 1;
}
.currency__label-sizer {
  visibility: hidden;
}
.currency__chevron {
  font-size: 14px;
  color: var(--color-on-surface-variant);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.currency__button[aria-expanded="true"] .currency__chevron {
  transform: rotate(180deg);
}
/* The currency menu (assets/js/nav.js opens it: on hover with a mouse, on a click, tap or Enter):
   centred under the button and moved sideways only as far as it takes to stay on screen and
   inside a card that clips (--menu-shift). Closed, it takes no room, so it can never widen the
   page. The choices inside
   are styled with the theme menu's (further down). */
.currency__panel {
  display: none;
  position: absolute;
  left: 50%;
  top: 100%;
  z-index: 30;
  transform: translateX(calc(-50% + var(--menu-shift, 0px)));
  padding-top: 0.5rem;
}
.currency__panel[data-open="true"] {
  display: block;
  animation: menu-in 120ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Beside the button, or above it (phones, where the billing period sits on the row below). */
.currency__panel[data-side="end"] {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  padding-top: 0;
  padding-left: 0.5rem;
}
.currency__panel[data-side="above"] {
  top: auto;
  bottom: 100%;
  padding-top: 0;
  padding-bottom: 0.5rem;
}
@media (prefers-reduced-motion: reduce) {
.currency__chevron {
  transition-property: none;
}
}
.site-header__sign-in {
  display: none;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-on-surface-variant);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.site-header__sign-in:hover {
  color: var(--color-on-surface);
}
@media (min-width: 640px) {
.site-header__sign-in {
  display: inline-block;
}
}
/* The theme switcher (includes/theme-switcher.php): where the currency button was, the same size
   and fill, showing the chosen theme's icon. It opens Light, Dark and System under it. Below 640px
   the choice is in the phone menu; without JavaScript there is nothing to switch, so it hides. */
.theme {
  position: relative;
  display: none;
}
@media (min-width: 640px) {
.theme {
  display: flex;
}
}
:root:not([data-theme-choice]) .theme {
  display: none;
}
.theme__button {
  display: inline-flex;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background-color: var(--color-surface-container-low);
  color: var(--color-on-surface-variant);
  transition-property: color, background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.theme__button:hover,
.theme__button[aria-expanded="true"] {
  background-color: var(--color-surface-container);
  color: var(--color-on-surface);
}
.theme__button:focus-visible {
  outline: 2px solid var(--color-primary-container);
  outline-offset: 2px;
}
.theme__state {
  display: none;
}
:root[data-theme-choice="light"] .theme__state-light,
:root[data-theme-choice="dark"] .theme__state-dark,
:root[data-theme-choice="system"] .theme__state-system {
  display: flex;
}
.theme__icon {
  width: 18px;
  height: 18px;
}
.theme__panel {
  display: none;
  position: absolute;
  left: 50%;
  top: 100%;
  z-index: 20;
  transform: translateX(-50%);
  padding-top: 0.5rem;
}
.theme__panel[data-open="true"] {
  display: block;
  animation: menu-in 120ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* The menus that open under a control, the currency selector's (on hover) and the theme
   switcher's (on click only), and the theme choice in the phone menu: the choices side by side
   in one pill-shaped track, the chosen one in a raised cell with a bold name, like the site's
   other segmented controls. Hover lightens a choice, pressing it dims it, focus rings it. */
@keyframes menu-in {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
.currency__panel[data-open="true"],
.theme__panel[data-open="true"] {
  animation: none;
}
}
.currency__options,
.theme__options,
.mobile-nav__theme {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  border-radius: 9999px;
  background-color: var(--color-surface-container-high);
  padding: 0.25rem;
  white-space: nowrap;
}
.currency__options,
.theme__options {
  box-shadow: var(--shadow-popover-ring);
}
.currency-option,
.theme-option {
  display: inline-flex;
  height: 1.75rem;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  white-space: nowrap;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 500;
  color: var(--color-on-surface-variant);
  transition-property: color, background-color, box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.currency-option:hover,
.theme-option:hover {
  background-color: var(--color-fill-soft);
  color: var(--color-on-surface);
}
.currency-option:active,
.theme-option:active {
  background-color: var(--color-fill-hover);
}
.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(--shadow-xs);
}
.currency-option:focus-visible,
.theme-option:focus-visible {
  outline: 2px solid var(--color-primary-container);
  outline-offset: 1px;
}
.theme-option__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.site-header__cta {
  display: inline-flex;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  border-radius: 0.75rem;
  background-color: var(--color-primary-container);
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-on-primary-container);
  box-shadow: var(--shadow-cta);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.site-header__cta:hover {
  background-color: var(--color-primary-solid);
}
.site-header__avatar {
  display: flex;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background-color: var(--color-primary-solid);
}
.site-header__avatar-icon {
  font-size: 18px;
  color: var(--color-on-primary);
}
.site-header__menu-button {
  display: flex;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  color: var(--color-on-surface);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.site-header__menu-button:hover {
  background-color: var(--color-surface-container);
}
@media (min-width: 1024px) {
.site-header__menu-button {
  display: none;
}
}
.icon-22 {
  font-size: 22px;
}
.mobile-nav {
  visibility: hidden;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 3.5rem;
  z-index: 10;
  max-height: calc(100dvh - 3.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-bottom-width: 1px;
  border-color: var(--color-surface-container);
  background-color: var(--color-surface-container-lowest);
  opacity: 0;
  box-shadow: var(--shadow-popover);
  transition-property: opacity, visibility;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
.mobile-nav[data-open="true"] {
  visibility: visible;
  opacity: 1;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
@media (prefers-reduced-motion: reduce) {
.mobile-nav {
  transition-property: none;
}
}
@media (min-width: 1024px) {
.mobile-nav {
  display: none;
}
}
.mobile-nav__nav {
  padding-left: var(--gutter-mobile);
  padding-right: var(--gutter-mobile);
  padding-bottom: var(--space-lg);
  padding-top: var(--space-xs);
}
@media (min-width: 640px) {
.mobile-nav__nav {
  padding-left: var(--margin);
  padding-right: var(--margin);
}
}
.mobile-nav__group {
  border-bottom-width: 1px;
  border-color: var(--color-surface-container);
}
.mobile-nav__toggle {
  display: flex;
  cursor: pointer;
  list-style-type: none;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 24px;
  letter-spacing: 0.012em;
  font-weight: 600;
  color: var(--color-on-surface);
}
.mobile-nav__toggle::-webkit-details-marker {
  display: none;
}
.mobile-nav__chevron {
  color: var(--color-tertiary);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.mobile-nav__group[open] .mobile-nav__chevron {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
.mobile-nav__chevron {
  transition-property: none;
}
}
.mobile-nav__items {
  display: grid;
  gap: var(--space-xs);
  padding-bottom: var(--space-sm);
}
@media (min-width: 640px) {
.mobile-nav__items {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.mobile-nav__price {
  display: block;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--color-on-surface-variant);
}
.mobile-nav__footer {
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
  padding-bottom: var(--space-md);
}
.mobile-nav__link {
  display: flex;
  align-items: center;
  border-bottom-width: 1px;
  border-color: var(--color-surface-container);
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 24px;
  letter-spacing: 0.012em;
  font-weight: 600;
  color: var(--color-on-surface);
}
.mobile-nav__account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem var(--space-md);
  padding-top: var(--space-md);
}
@media (min-width: 640px) {
.mobile-nav__account {
  display: none;
}
}
.mobile-nav__sign-in {
  flex-shrink: 0;
  white-space: nowrap;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-on-surface-variant);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.mobile-nav__sign-in:hover {
  color: var(--color-on-surface);
}
.nav-overlay {
  visibility: hidden;
  position: fixed;
  inset: 0px;
  z-index: 40;
  background-color: rgb(var(--rgb-scrim) / 0.1);
  opacity: 0;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition-property: opacity, visibility;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
.nav-overlay[data-open="true"] {
  visibility: visible;
  opacity: 1;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
@media (prefers-reduced-motion: reduce) {
.nav-overlay {
  transition-property: none;
}
}
.site-main {
  min-height: calc(100vh - 320px);
  width: 100%;
  background-color: var(--color-surface);
  padding-top: 3.5rem;
}
.site-main__sections {
  display: flex;
  width: 100%;
  flex-direction: column;
}
.home-hero {
  position: relative;
  overflow: hidden;
  padding-left: var(--gutter-mobile);
  padding-right: var(--gutter-mobile);
  padding-bottom: 5rem;
  padding-top: 5rem;
}
@media (min-width: 768px) {
.home-hero {
  padding-left: var(--margin);
  padding-right: var(--margin);
  padding-bottom: 7rem;
  padding-top: 7rem;
}
}
.container-narrow {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}
.home-hero__inner {
  margin-left: auto;
  margin-right: auto;
  max-width: 48rem;
  text-align: center;
}
.eyebrow {
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary);
}
.home-hero__title {
  margin-top: 0.75rem;
  text-wrap: balance;
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 40px;
  letter-spacing: 0.002em;
  font-weight: 600;
  color: var(--color-on-surface);
}
@media (min-width: 768px) {
.home-hero__title {
  font-size: 48px;
  line-height: 52px;
  letter-spacing: -0.003em;
  font-weight: 600;
}
}
.home-hero__lead {
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
  max-width: 36rem;
  text-wrap: balance;
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 24px;
  letter-spacing: -0.022em;
  font-weight: 400;
  color: var(--color-tertiary);
}
.home-hero__actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.btn-primary {
  display: inline-flex;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  background-color: var(--color-primary-container);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-on-primary-container);
  box-shadow: var(--shadow-md);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.btn-primary:hover {
  background-color: var(--color-primary-solid);
}
.btn-arrow {
  font-size: 18px;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.btn-primary:hover .btn-arrow {
  transform: translateX(0.125rem);
}
.btn-secondary {
  display: inline-flex;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background-color: var(--color-surface-container);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-on-surface);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.btn-secondary:hover {
  background-color: var(--color-surface-variant);
}
.home-hero__figure {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 4rem;
  max-width: 64rem;
}
@media (min-width: 768px) {
.home-hero__figure {
  margin-top: 6rem;
}
}
.home-hero__dots {
  pointer-events: none;
  position: absolute;
  left: -1.5rem;
  right: -1.5rem;
  top: -2.5rem;
  bottom: -2.5rem;
  background-image: radial-gradient(circle, var(--color-outline-variant) 1px, transparent 1.5px);
  opacity: 0.7;
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, #000 35%, transparent 75%);
}
@media (min-width: 768px) {
.home-hero__dots {
  left: -4rem;
  right: -4rem;
  top: -3.5rem;
  bottom: -3.5rem;
}
}
.stage {
  position: relative;
}
.home-hero__caption {
  margin-bottom: 0.75rem;
  text-align: left;
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-tertiary);
}
.home-hero__workloads {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (min-width: 1024px) {
.home-hero__workloads {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}
}
.home-hero__workload {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: var(--color-surface-container);
  background-color: var(--color-surface-container-lowest);
  padding: 0.75rem;
  box-shadow: var(--shadow-xs);
}
@media (min-width: 640px) {
.home-hero__workload {
  flex-direction: row;
  align-items: center;
}
}
@media (min-width: 768px) {
.home-hero__workload {
  padding: 1rem;
}
}
.home-hero__workload-icon {
  display: flex;
  height: 2.25rem;
  width: 2.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background-color: rgb(var(--rgb-primary-fixed) / 0.5);
  color: var(--color-primary);
}
.home-hero__workload-text {
  min-width: 0px;
  text-align: left;
}
.home-hero__connectors {
  display: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}
@media (min-width: 1024px) {
.home-hero__connectors {
  display: grid;
}
}
.home-hero__connector {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.home-hero__line {
  height: 2.25rem;
  width: 1px;
  background-image: linear-gradient(to bottom, var(--color-outline-variant), var(--color-primary-container));
}
.home-hero__node {
  position: relative;
  z-index: 10;
  margin-bottom: -0.25rem;
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 0.75rem;
  background-color: var(--color-primary-container);
  box-shadow: 0 0 0 0px #fff, 0 0 0 calc(4px + 0px) rgb(var(--rgb-primary-fixed) / 0.6);
}
.home-hero__platform {
  position: relative;
  margin-top: 0.75rem;
  border-radius: 0.5rem;
  background-color: var(--color-device);
  padding: 1rem;
  box-shadow: var(--shadow-hero);
}
@media (min-width: 768px) {
.home-hero__platform {
  padding: 1.5rem;
}
}
@media (min-width: 1024px) {
.home-hero__platform {
  margin-top: 0px;
}
}
.home-hero__platform-caption {
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(240 240 242 / 0.6);
}
.home-hero__layers {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border-radius: 0.25rem;
  background-color: rgb(240 240 242 / 0.1);
}
@media (min-width: 768px) {
.home-hero__layers {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.home-hero__layer {
  background-color: var(--color-device);
  padding: 0.75rem;
}
@media (min-width: 768px) {
.home-hero__layer {
  padding: 1rem;
}
}
.home-hero__layer-icon {
  font-size: 20px;
  color: var(--color-primary-fixed-dim);
}
.home-hero__layer-title {
  margin-top: 0.5rem;
  display: block;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 24px;
  letter-spacing: 0.012em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-on-device);
}
.home-hero__layer-note {
  margin-top: 0.125rem;
  display: block;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: rgb(240 240 242 / 0.6);
}
/* ── Homepage hero (index.php): text on the left, the infrastructure picture on the right ──────
   Scoped to .home-hero--split: the service pages and the pricing page share the hero's classes and
   stay as they are. The picture is one image per theme (assets/img/hero-servers-*.webp) whose own
   backdrop is transparent and whose edges fade out, so the page's light shows through and no
   rectangle shows; the three facts on it are text laid over the picture's own cards, sized in cqw
   so they stay on them at every width. */
.home-hero--split {
  --hero-title: #111a2b;
  --hero-badge-bg: #fcfdff;
  --hero-badge-edge: rgb(15 23 42 / 0.07);
  --hero-badge-edge-hover: rgb(15 23 42 / 0.16);
  --hero-badge-shadow: rgb(28 52 96 / 0.12);
  --hero-badge-title: #111a2b;
  --hero-badge-note: #4c5566;
  --hero-badge-icon: #2b3446;
  padding-top: 1.5rem;
  padding-bottom: 3.5rem;
}
:root[data-theme='dark'] .home-hero--split {
  --hero-title: #eef2f8;
  --hero-badge-bg: #1c2b42;
  --hero-badge-edge: rgb(148 180 230 / 0.16);
  --hero-badge-edge-hover: rgb(148 180 230 / 0.34);
  --hero-badge-shadow: rgb(2 8 20 / 0.45);
  --hero-badge-title: #eef3fa;
  --hero-badge-note: #c3cee0;
  --hero-badge-icon: #dbe6f7;
}
/* Its light: cool white by day with only a trace of warmth; deep navy after hours, the lamp
   behind the picture a soft cool blue. Values for this hero only (the ambient system, below). */
.home-hero--split.amb {
  --amb-base: #f6f8fc;
  --amb-key: 250 246 240;
  --amb-shade: 206 218 238;
}
:root[data-theme='dark'] .home-hero--split.amb {
  --amb-i: 0.4;
  --amb-base: #101c2c;
  --amb-key: 74 122 198;
  --amb-sky: 120 150 205;
  --amb-shade: 6 12 22;
  --amb-card: #15243a;
  --amb-card-nested: #1a2b44;
}
@media (min-width: 768px) {
.home-hero--split {
  padding-top: 2rem;
  padding-bottom: 4.5rem;
}
}
@media (min-width: 1024px) {
.home-hero--split {
  padding-top: 0;
  padding-bottom: 5rem;
}
}
.home-hero__split {
  display: grid;
  align-items: center;
  gap: 2.5rem;
}
.home-hero--split .home-hero__title {
  font-size: clamp(2.5rem, 11.3vw, 2.75rem);
  line-height: 1.09;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--hero-title);
}
@media (min-width: 768px) {
.home-hero--split .home-hero__title {
  font-size: 63px;
  line-height: 66px;
  letter-spacing: -0.026em;
}
}
/* Desktop: as large as its column allows on two lines (5vw), up to 4.4rem. */
@media (min-width: 1024px) {
.home-hero--split .home-hero__title {
  font-size: clamp(3.25rem, 5vw, 4.4rem);
  line-height: 1.04;
}
}
.home-hero--split .home-hero__figure {
  margin-top: 3rem;
}
@media (min-width: 768px) {
.home-hero--split .home-hero__figure {
  margin-top: 3.5rem;
}
}
/* Desktop: the text and the picture fill the first screen below the fixed header (3.5rem) and sit
   at its vertical centre, on any screen height; the band is a little wider than the page's other
   sections (the header's width, so its edges line up with the header's). On portrait screens the
   band stops at 75vw tall, so it isn't mostly empty. The text sits 1.5rem above the picture's
   centre. */
@media (min-width: 1024px) {
.home-hero--split .container-narrow {
  max-width: calc(1440px - 2 * var(--margin));
}
.home-hero__split {
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(2rem, 4vw, 4.5rem);
  min-height: min(calc(100vh - 3.5rem), 75vw);
  min-height: min(calc(100svh - 3.5rem), 75vw);
  align-content: center;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.home-hero--split .home-hero__figure {
  margin-top: 1.5rem;
}
.home-hero--split .home-hero__inner {
  position: relative;
  top: -1.5rem;
  margin: 0;
  max-width: 48rem;
  text-align: left;
}
.home-hero--split .home-hero__lead {
  margin-left: 0;
  max-width: 32rem;
}
.home-hero--split .home-hero__actions {
  justify-content: flex-start;
}
}
.home-hero__art {
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: 33rem;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 425 / 535;
}
/* Desktop: narrower than the text column (growing from 22rem at 1024px to 33rem at 1440px), and
   never taller than the band's room on the screen: the screen less the header (3.5rem) and the
   band's padding (2rem + 2rem); 0.794 = the picture's width / height. */
@media (min-width: 1024px) {
.home-hero__art {
  width: min(33rem, calc(43.3vw - 6rem), calc((100vh - 7.5rem) * 0.794));
  width: min(33rem, calc(43.3vw - 6rem), calc((100svh - 7.5rem) * 0.794));
  max-width: none;
  margin-right: 0;
}
}
.home-hero__art-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.home-hero__art-img-dark,
:root[data-theme='dark'] .home-hero__art-img-light {
  display: none;
}
:root[data-theme='dark'] .home-hero__art-img-dark {
  display: block;
}
.home-hero__badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 3.3cqw;
  height: 19.4cqw;
  padding: 0 4.2cqw;
  overflow: hidden;
  border: 1px solid var(--hero-badge-edge);
  border-radius: 2.8cqw;
  background-color: var(--hero-badge-bg);
  box-shadow: 0 1.4cqw 3.6cqw var(--hero-badge-shadow);
  text-align: left;
}
/* Data Centers is a link to the Locations section (#network): under the pointer its edge and
   shadow deepen a little. */
a.home-hero__badge {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
@media (hover: hover) {
a.home-hero__badge:hover {
  border-color: var(--hero-badge-edge-hover);
  box-shadow: 0 1.8cqw 4.8cqw var(--hero-badge-shadow);
}
}
/* Each card is at least as wide as the picture's own card under it and grows with its text if it
   needs to (larger text, wider letter spacing), so its text is never cut. */
.home-hero__badge-regions {
  left: -6cqw;
  top: 25.8cqw;
  min-width: 49.3cqw;
}
.home-hero__badge-uptime {
  left: 47.3cqw;
  top: 51.7cqw;
  min-width: 42.1cqw;
}
.home-hero__badge-storage {
  left: 18.4cqw;
  top: 84cqw;
  min-width: 48cqw;
}
@media (max-width: 639px) {
.home-hero__badge-regions {
  left: -1cqw;
  min-width: 44.3cqw;
}
}
.home-hero__badge-icon {
  flex: none;
  font-size: 5.4cqw;
  color: var(--hero-badge-icon);
}
.home-hero__badge-storage .home-hero__badge-icon {
  color: var(--color-primary);
}
.home-hero__badge-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.home-hero__badge-title {
  font-family: var(--font-text);
  font-size: 3.3cqw;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 600;
  white-space: nowrap;
  color: var(--hero-badge-title);
}
.home-hero__badge-note {
  font-family: var(--font-text);
  font-size: 3.1cqw;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 400;
  white-space: nowrap;
  color: var(--hero-badge-note);
}
.section-white {
  background-color: var(--color-surface-section);
  padding-left: var(--gutter-mobile);
  padding-right: var(--gutter-mobile);
  padding-top: 5rem;
  padding-bottom: 5rem;
}
@media (min-width: 768px) {
.section-white {
  padding-left: var(--margin);
  padding-right: var(--margin);
  padding-top: 7rem;
  padding-bottom: 7rem;
}
}
@media (min-width: 1024px) {
.section-white {
  padding-top: 8rem;
  padding-bottom: 8rem;
}
}
.section-head {
  margin-left: auto;
  margin-right: auto;
  max-width: 42rem;
  text-align: center;
}
.section-title {
  margin-top: 0.5rem;
  text-wrap: balance;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 32px;
  letter-spacing: 0.008em;
  font-weight: 600;
  color: var(--color-on-surface);
}
@media (min-width: 768px) {
.section-title {
  font-size: 32px;
  line-height: 38px;
  letter-spacing: 0.004em;
  font-weight: 600;
}
}
.section-intro {
  margin-top: 0.75rem;
  text-wrap: balance;
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 24px;
  letter-spacing: -0.022em;
  font-weight: 400;
  color: var(--color-tertiary);
}
.platform__paths {
  margin-top: 3rem;
}
@media (min-width: 768px) {
.platform__paths {
  margin-top: 5rem;
}
}
.platform__scale {
  margin-bottom: 1.25rem;
  display: none;
  justify-content: space-between;
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-tertiary);
}
@media (min-width: 768px) {
.platform__scale {
  display: flex;
}
}
.platform__scale-end {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.icon-14 {
  font-size: 14px;
}
.platform__track {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  display: none;
  height: 1px;
  background-image: linear-gradient(to right, var(--color-surface-container-high), var(--color-inverse-primary), var(--color-primary-container));
}
@media (min-width: 768px) {
.platform__track {
  display: block;
}
}
.platform__steps {
  position: relative;
  display: grid;
}
@media (min-width: 768px) {
.platform__steps {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.platform__step {
  position: relative;
  border-top-width: 1px;
  border-color: var(--color-surface-container);
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.platform__step:first-child {
  border-top-width: 0px;
  padding-top: 0px;
}
@media (min-width: 768px) {
.platform__step {
  border-top-width: 0px;
  padding-bottom: 0px;
  padding-right: 1.25rem;
}
}
@media (min-width: 768px) {
.platform__step:first-child {
  padding-top: 2rem;
}
}
@media (min-width: 1024px) {
.platform__step {
  padding-right: 2rem;
}
}
.platform__node {
  position: absolute;
  left: 0px;
  top: 0px;
  display: none;
  height: 0.625rem;
  width: 0.625rem;
  transform: translateY(-50%);
  border-radius: 0.75rem;
  background-color: var(--color-primary-container);
  box-shadow: 0 0 0 0px #fff, 0 0 0 calc(4px + 0px) var(--color-surface-section);
}
@media (min-width: 768px) {
.platform__node {
  display: block;
}
}
.platform__capacity {
  display: flex;
  height: 1.25rem;
  align-items: flex-end;
  gap: 3px;
}
.platform__level-1 {
  height: 0.5rem;
  width: 0.25rem;
  border-radius: 0.75rem;
  background-color: var(--color-primary-container);
}
.platform__level-2-off {
  height: 0.75rem;
  width: 0.25rem;
  border-radius: 0.75rem;
  background-color: var(--color-surface-container-high);
}
.platform__level-3-off {
  height: 1rem;
  width: 0.25rem;
  border-radius: 0.75rem;
  background-color: var(--color-surface-container-high);
}
.platform__level-4-off {
  height: 1.25rem;
  width: 0.25rem;
  border-radius: 0.75rem;
  background-color: var(--color-surface-container-high);
}
.platform__step-title {
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 24px;
  letter-spacing: 0.012em;
  font-weight: 600;
  color: var(--color-on-surface);
}
.platform__step-kicker {
  margin-top: 0.25rem;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-on-surface-variant);
}
.card-text {
  margin-top: 0.5rem;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.016em;
  font-weight: 400;
  color: var(--color-tertiary);
}
.platform__step-link {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-primary);
}
.platform__step-link:hover {
  -webkit-text-decoration-line: underline;
  text-decoration-line: underline;
}
.platform__level-2 {
  height: 0.75rem;
  width: 0.25rem;
  border-radius: 0.75rem;
  background-color: var(--color-primary-container);
}
.platform__level-3 {
  height: 1rem;
  width: 0.25rem;
  border-radius: 0.75rem;
  background-color: var(--color-primary-container);
}
.platform__level-4 {
  height: 1.25rem;
  width: 0.25rem;
  border-radius: 0.75rem;
  background-color: var(--color-primary-container);
}
.platform__ways-label {
  margin-top: 3.5rem;
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-tertiary);
}
@media (min-width: 768px) {
.platform__ways-label {
  margin-top: 5rem;
}
}
.platform__ways {
  margin-top: 1rem;
  display: grid;
  gap: 1rem;
}
@media (min-width: 768px) {
.platform__ways {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
}
.platform__way {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  border-radius: 0.5rem;
  background-color: var(--color-surface-container-low);
  padding: 1.25rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.platform__way:hover {
  background-color: var(--color-surface-container);
}
@media (min-width: 768px) {
.platform__way {
  padding: 1.5rem;
}
}
.icon-tile {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container-lowest);
  color: var(--color-primary);
  box-shadow: var(--shadow-xs);
}
.heading-sm-block {
  display: block;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 24px;
  letter-spacing: 0.012em;
  font-weight: 600;
  color: var(--color-on-surface);
}
.platform__way-desc {
  margin-top: 0.25rem;
  display: block;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.016em;
  font-weight: 400;
  color: var(--color-tertiary);
}
.platform__way-link {
  margin-top: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-primary);
}
.platform__way:hover .platform__way-link {
  -webkit-text-decoration-line: underline;
  text-decoration-line: underline;
}
.section-plain {
  padding-left: var(--gutter-mobile);
  padding-right: var(--gutter-mobile);
  padding-top: 5rem;
  padding-bottom: 5rem;
}
@media (min-width: 768px) {
.section-plain {
  padding-left: var(--margin);
  padding-right: var(--margin);
  padding-top: 7rem;
  padding-bottom: 7rem;
}
}
@media (min-width: 1024px) {
.section-plain {
  padding-top: 8rem;
  padding-bottom: 8rem;
}
}
.console-preview__window {
  margin-top: 3rem;
  overflow: hidden;
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: var(--color-surface-container);
  background-color: var(--color-surface-container-lowest);
  box-shadow: var(--shadow-window);
}
@media (min-width: 768px) {
.console-preview__window {
  margin-top: 4rem;
}
}
.console-preview__appbar {
  display: flex;
  height: 3rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom-width: 1px;
  border-color: var(--color-surface-container);
  padding-left: 1rem;
  padding-right: 1rem;
}
.crumbs {
  display: flex;
  min-width: 0px;
  align-items: center;
  gap: 0.5rem;
}
.separator {
  color: var(--color-outline-variant);
}
.console-preview__crumb {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-tertiary);
}
.console-preview__search {
  display: none;
  height: 2rem;
  width: 18rem;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container-low);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  color: var(--color-tertiary);
}
@media (min-width: 768px) {
.console-preview__search {
  display: flex;
}
}
.icon-18 {
  font-size: 18px;
}
.console-preview__search-text {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.console-preview__account {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.console-preview__region {
  display: none;
  height: 1.5rem;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container-low);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--color-on-surface-variant);
}
@media (min-width: 640px) {
.console-preview__region {
  display: inline-flex;
}
}
.status-dot {
  height: 0.375rem;
  width: 0.375rem;
  border-radius: 0.75rem;
  background-color: var(--brand-rocky);
}
.console-preview__avatar {
  display: flex;
  height: 1.75rem;
  width: 1.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background-color: var(--color-primary-solid);
}
.console-preview__avatar-icon {
  font-size: 16px;
  color: var(--color-on-primary);
}
.console-preview__body {
  display: grid;
}
@media (min-width: 1024px) {
.console-preview__body {
  grid-template-columns: 208px 1fr;
}
}
.console-preview__sidebar {
  display: none;
  flex-direction: column;
  gap: 0.125rem;
  border-right-width: 1px;
  border-color: var(--color-surface-container);
  background-color: var(--color-band-50);
  padding: 0.75rem;
}
@media (min-width: 1024px) {
.console-preview__sidebar {
  display: flex;
}
}
.console-preview__nav-active {
  display: flex;
  height: 2rem;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0.25rem;
  background-color: var(--color-surface-selected);
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-on-surface);
  box-shadow: var(--shadow-xs);
}
.console-preview__nav-item {
  display: flex;
  height: 2rem;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0.25rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-on-surface-variant);
}
.console-preview__deploy {
  margin-top: 1.5rem;
  display: inline-flex;
  height: 2rem;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: 0.25rem;
  background-color: var(--color-primary-container);
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-on-primary-container);
}
.console-preview__content {
  min-width: 0px;
  padding: 1rem;
}
@media (min-width: 768px) {
.console-preview__content {
  padding: 1.5rem;
}
}
.console-preview__server-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.console-preview__server-id {
  display: flex;
  min-width: 0px;
  align-items: center;
  gap: 0.75rem;
}
.console-preview__os-tile {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  border-width: 1px;
  border-color: var(--color-surface-container);
  color: var(--brand-ubuntu);
}
.cluster-sm {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.console-preview__status {
  display: inline-flex;
  height: 1.25rem;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.75rem;
  background-color: var(--color-success-container);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 500;
  color: var(--color-success-strong);
}
.console-preview__spec {
  margin-top: 0.125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--color-tertiary);
}
.console-preview__actions {
  display: none;
  align-items: center;
  gap: 0.5rem;
}
@media (min-width: 768px) {
.console-preview__actions {
  display: flex;
}
}
.console-preview__action {
  display: inline-flex;
  height: 2rem;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0.25rem;
  border-width: 1px;
  border-color: var(--color-surface-container);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-on-surface-variant);
}
.console-preview__metrics {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (min-width: 768px) {
.console-preview__metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.card-muted {
  border-radius: 0.5rem;
  background-color: var(--color-surface-container-low);
  padding: 1rem;
}
.split {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.overline {
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-tertiary);
}
.icon-16-muted {
  font-size: 16px;
  color: var(--color-tertiary);
}
.console-preview__value {
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 30px;
  letter-spacing: 0.009em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-on-surface);
}
.note-num {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--color-tertiary);
}
.console-preview__meter {
  margin-top: 0.75rem;
  height: 0.25rem;
  overflow: hidden;
  border-radius: 0.75rem;
  background-color: var(--color-surface-container-high);
}
.console-preview__fill-cpu {
  height: 100%;
  width: 38%;
  border-radius: 0.75rem;
  background-color: var(--color-primary-container);
}
.console-preview__fill-memory {
  height: 100%;
  width: 52%;
  border-radius: 0.75rem;
  background-color: var(--color-primary-container);
}
.console-preview__fill-storage {
  height: 100%;
  width: 41%;
  border-radius: 0.75rem;
  background-color: var(--color-primary-container);
}
.console-preview__fill-network {
  height: 100%;
  width: 18%;
  border-radius: 0.75rem;
  background-color: var(--color-primary-container);
}
.console-preview__panels {
  margin-top: 0.75rem;
  display: grid;
  gap: 0.75rem;
}
@media (min-width: 1024px) {
.console-preview__panels {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
.console-preview__chart-card {
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: var(--color-surface-container);
  padding: 1rem;
}
@media (min-width: 768px) {
.console-preview__chart-card {
  padding: 1.25rem;
}
}
@media (min-width: 1024px) {
.console-preview__chart-card {
  grid-column: span 3 / span 3;
}
}
.note {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--color-tertiary);
}
/* The chart's grid lines (drawn #e8e8ea in index.php): the track colour, so they recede in both themes. */
.console-preview__chart line {
  stroke: var(--color-surface-container-high);
}
.console-preview__plot {
  position: relative;
  margin-top: 1rem;
}
.console-preview__chart {
  display: block;
  height: 9rem;
  width: 100%;
}
@media (min-width: 768px) {
.console-preview__chart {
  height: 10rem;
}
}
.console-preview__now {
  position: absolute;
  right: 0px;
  top: 60.5%;
  height: 0.625rem;
  width: 0.625rem;
  transform: translate(50%, -50%);
  border-radius: 0.75rem;
  background-color: var(--color-primary-container);
  box-shadow: 0 0 0 0px #fff, 0 0 0 calc(4px + 0px) rgb(var(--rgb-primary-fixed) / 0.7);
}
.console-preview__axis {
  margin-top: 0.5rem;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--color-tertiary);
}
.console-preview__servers {
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: var(--color-surface-container);
  padding: 1rem;
}
@media (min-width: 768px) {
.console-preview__servers {
  padding: 1.25rem;
}
}
@media (min-width: 1024px) {
.console-preview__servers {
  grid-column: span 2 / span 2;
}
}
.console-preview__server-list {
  margin-top: 0.5rem;
}
.console-preview__server {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-top-width: 1px;
  border-color: var(--color-surface-container);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.console-preview__server:first-child {
  border-top-width: 0px;
}
.console-preview__logo-ubuntu {
  display: flex;
  height: 2rem;
  width: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container-low);
  color: var(--brand-ubuntu);
}
.console-preview__server-text {
  min-width: 0px;
  flex: 1 1 0%;
}
.console-preview__server-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-on-surface);
}
.console-preview__server-meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--color-tertiary);
}
.console-preview__server-status {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--color-on-surface-variant);
}
.console-preview__logo-debian {
  display: flex;
  height: 2rem;
  width: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container-low);
  color: var(--brand-debian);
}
.console-preview__logo-rocky {
  display: flex;
  height: 2rem;
  width: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container-low);
  color: var(--brand-rocky);
}
.console-preview__dot-deploying {
  height: 0.375rem;
  width: 0.375rem;
  border-radius: 0.75rem;
  background-color: var(--color-primary-container);
}
@media (prefers-reduced-motion: no-preference) {
.console-preview__dot-deploying {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
}
.console-preview__captions {
  margin-left: auto;
  margin-right: auto;
  margin-top: 3rem;
  display: grid;
  max-width: 64rem;
  gap: 2rem;
}
@media (min-width: 768px) {
.console-preview__captions {
  margin-top: 4rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.console-preview__caption {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.console-preview__caption-icon {
  font-size: 22px;
  color: var(--color-primary);
}
.desc-md {
  margin-top: 0.25rem;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.016em;
  font-weight: 400;
  color: var(--color-tertiary);
}
.home-apps__list {
  margin-left: auto;
  margin-right: auto;
  margin-top: 3rem;
  display: grid;
  max-width: 64rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
@media (min-width: 768px) {
.home-apps__list {
  margin-top: 4rem;
  gap: 1rem;
}
}
@media (min-width: 1024px) {
.home-apps__list {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
}
.home-apps__app {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  border-radius: 0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  text-align: center;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.home-apps__app:hover {
  background-color: var(--color-surface-container-low);
}
@media (min-width: 768px) {
.home-apps__app {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
}
.home-apps__logo-wordpress {
  display: flex;
  height: 3.5rem;
  width: 3.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: var(--color-surface-container);
  background-color: var(--color-surface-container-lowest);
  color: var(--brand-wordpress);
  box-shadow: var(--shadow-xs);
}
.tile-note {
  margin-top: 0.125rem;
  display: block;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--color-tertiary);
}
.home-apps__logo-nextjs {
  display: flex;
  height: 3.5rem;
  width: 3.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: var(--color-surface-container);
  background-color: var(--color-surface-container-lowest);
  color: var(--brand-nextjs);
  box-shadow: var(--shadow-xs);
}
.home-apps__logo-nodejs {
  display: flex;
  height: 3.5rem;
  width: 3.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: var(--color-surface-container);
  background-color: var(--color-surface-container-lowest);
  color: var(--brand-nodejs);
  box-shadow: var(--shadow-xs);
}
.home-apps__logo-docker {
  display: flex;
  height: 3.5rem;
  width: 3.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: var(--color-surface-container);
  background-color: var(--color-surface-container-lowest);
  color: var(--brand-docker);
  box-shadow: var(--shadow-xs);
}
.home-apps__logo-gitlab {
  display: flex;
  height: 3.5rem;
  width: 3.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: var(--color-surface-container);
  background-color: var(--color-surface-container-lowest);
  color: var(--brand-gitlab);
  box-shadow: var(--shadow-xs);
}
.home-apps__logo-postgresql {
  display: flex;
  height: 3.5rem;
  width: 3.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: var(--color-surface-container);
  background-color: var(--color-surface-container-lowest);
  color: var(--brand-postgresql);
  box-shadow: var(--shadow-xs);
}
.home-apps__more {
  margin-top: 2.5rem;
  text-align: center;
}
@media (min-width: 768px) {
.home-apps__more {
  margin-top: 3rem;
}
}
.network__status-row {
  margin-top: 1.25rem;
}
.network__status {
  display: inline-flex;
  height: 1.75rem;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: var(--color-surface-container);
  background-color: var(--color-surface-container-lowest);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--color-on-surface-variant);
}
.network__chain {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 3rem;
  max-width: 36rem;
}
@media (min-width: 768px) {
.network__chain {
  margin-top: 4rem;
}
}
@media (min-width: 1024px) {
.network__chain {
  max-width: 72rem;
}
}
.network__line {
  position: absolute;
  left: 25%;
  right: 25%;
  top: 0.75rem;
  display: none;
  height: 1px;
  background-color: var(--color-outline-variant);
}
@media (min-width: 1024px) {
.network__line {
  display: block;
}
}
.network__latency-1 {
  position: absolute;
  left: 25%;
  top: 0.75rem;
  display: none;
  height: 1.5rem;
  transform: translate(-50%, -50%);
  align-items: center;
  border-radius: 0.25rem;
  border-width: 1px;
  border-color: var(--color-surface-container);
  background-color: var(--color-surface-container-lowest);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--color-on-surface-variant);
}
@media (min-width: 1024px) {
.network__latency-1 {
  display: inline-flex;
}
}
.network__latency-2 {
  position: absolute;
  left: 50%;
  top: 0.75rem;
  display: none;
  height: 1.5rem;
  transform: translate(-50%, -50%);
  align-items: center;
  border-radius: 0.25rem;
  border-width: 1px;
  border-color: var(--color-surface-container);
  background-color: var(--color-surface-container-lowest);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--color-on-surface-variant);
}
@media (min-width: 1024px) {
.network__latency-2 {
  display: inline-flex;
}
}
.network__latency-3 {
  position: absolute;
  left: 75%;
  top: 0.75rem;
  display: none;
  height: 1.5rem;
  transform: translate(-50%, -50%);
  align-items: center;
  border-radius: 0.25rem;
  border-width: 1px;
  border-color: var(--color-surface-container);
  background-color: var(--color-surface-container-lowest);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--color-on-surface-variant);
}
@media (min-width: 1024px) {
.network__latency-3 {
  display: inline-flex;
}
}
.network__regions {
  position: relative;
}
@media (min-width: 1024px) {
.network__regions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.network__region {
  position: relative;
  display: flex;
  gap: 1rem;
}
@media (min-width: 1024px) {
.network__region {
  display: block;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
}
.network__rail {
  position: absolute;
  bottom: 0px;
  left: 0.75rem;
  top: 0.75rem;
  width: 1px;
  background-color: var(--color-outline-variant);
}
@media (min-width: 1024px) {
.network__rail {
  display: none;
}
}
.network__node {
  position: relative;
  z-index: 10;
  display: flex;
  height: 1.5rem;
  width: 1.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background-color: var(--color-surface);
}
@media (min-width: 1024px) {
.network__node {
  margin-left: auto;
  margin-right: auto;
}
}
.network__node-dot {
  height: 0.625rem;
  width: 0.625rem;
  border-radius: 0.75rem;
  background-color: var(--color-primary-container);
  box-shadow: 0 0 0 0px #fff, 0 0 0 calc(4px + 0px) var(--color-primary-fixed);
}
.network__card {
  flex: 1 1 0%;
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: var(--color-surface-container);
  background-color: var(--color-surface-container-lowest);
  padding: 1.25rem;
}
@media (min-width: 1024px) {
.network__card {
  margin-top: 1.5rem;
  text-align: center;
}
}
.network__region-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
@media (min-width: 1024px) {
.network__region-name {
  justify-content: center;
}
}
.network__country {
  border-radius: 0.25rem;
  border-width: 1px;
  border-color: var(--color-surface-container);
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 500;
  color: var(--color-tertiary);
}
.network__chips {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
@media (min-width: 1024px) {
.network__chips {
  justify-content: center;
}
}
.network__chip {
  display: inline-flex;
  height: 1.5rem;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container-low);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--color-on-surface-variant);
}
.network__route {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
@media (min-width: 1024px) {
.network__route {
  display: none;
}
}
.network__rail-full {
  position: absolute;
  bottom: 0px;
  left: 0.75rem;
  top: 0px;
  width: 1px;
  background-color: var(--color-outline-variant);
}
.network__spacer {
  width: 1.5rem;
  flex-shrink: 0;
}
.network__latency {
  display: inline-flex;
  height: 1.5rem;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.25rem;
  border-width: 1px;
  border-color: var(--color-surface-container);
  background-color: var(--color-surface-container-lowest);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--color-on-surface-variant);
}
.network__note {
  margin-top: 2rem;
  text-align: center;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--color-tertiary);
}
.os-picker__list {
  margin-left: auto;
  margin-right: auto;
  margin-top: 3rem;
  display: grid;
  max-width: 64rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (min-width: 768px) {
.os-picker__list {
  margin-top: 4rem;
  gap: 1rem;
}
}
@media (min-width: 1024px) {
.os-picker__list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.os-picker__option {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  border-radius: 0.5rem;
  background-color: var(--color-surface-container-low);
  padding: 1rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.os-picker__option:hover {
  background-color: var(--color-surface-container);
}
@media (min-width: 640px) {
.os-picker__option {
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}
}
.os-picker__logo-ubuntu {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container-lowest);
  color: var(--brand-ubuntu);
  box-shadow: var(--shadow-xs);
}
.os-picker__logo-debian {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container-lowest);
  color: var(--brand-debian);
  box-shadow: var(--shadow-xs);
}
.os-picker__logo-almalinux {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container-lowest);
  box-shadow: var(--shadow-xs);
}
.os-picker__logo-rocky {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container-lowest);
  color: var(--brand-rocky);
  box-shadow: var(--shadow-xs);
}
.os-picker__logo-windows {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container-lowest);
  color: var(--brand-windows);
  box-shadow: var(--shadow-xs);
}
.os-picker__logo-arch {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container-lowest);
  color: var(--brand-arch);
  box-shadow: var(--shadow-xs);
}
.os-picker__logo-alpine {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container-lowest);
  color: var(--brand-alpine);
  box-shadow: var(--shadow-xs);
}
.trust {
  width: 100%;
  background-color: var(--color-band-60);
  padding-left: var(--gutter-mobile);
  padding-right: var(--gutter-mobile);
  padding-top: 5rem;
  padding-bottom: 5rem;
}
@media (min-width: 768px) {
.trust {
  padding-left: var(--margin);
  padding-right: var(--margin);
  padding-top: 7rem;
  padding-bottom: 7rem;
}
}
@media (min-width: 1024px) {
.trust {
  padding-top: 8rem;
  padding-bottom: 8rem;
}
}
/* Infrastructure highlights (includes/highlights.php): one white panel in the pricing cards'
   treatment (12px corners, a hairline ring, a soft lift), divided into cells by 1px hairlines
   (the panel's tint showing through 1px gaps): four across from 1024px, two by two from 640px,
   stacked on phones. Each cell: the label with a small glyph, the figure, one line. */
.highlights {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border-radius: 0.75rem;
  background-color: var(--color-hairline);
  box-shadow: var(--shadow-card);
}
@media (min-width: 640px) {
.highlights {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.highlights {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.highlights__item {
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface-container-lowest);
  padding: 1.5rem 1.5rem 1.625rem;
}
@media (min-width: 768px) {
.highlights__item {
  padding: 2rem 2rem 2.125rem;
}
}
@media (min-width: 1024px) {
.highlights__item {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
}
.highlights__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.highlights__label {
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-tertiary);
}
.highlights__icon {
  font-size: 18px;
  color: var(--color-primary);
}
.highlights__value {
  margin-top: 1.5rem;
  display: block;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 40px;
  letter-spacing: 0.003em;
  font-weight: 600;
  color: var(--color-on-surface);
}
@media (min-width: 768px) {
.highlights__value {
  margin-top: 2rem;
  font-size: 40px;
  line-height: 44px;
  letter-spacing: 0;
}
}
.highlights__text {
  margin-top: 0.375rem;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.016em;
  font-weight: 400;
  color: var(--color-tertiary);
}
/* The space before "Get Started", as the card grid had. */
.trust .highlights {
  margin-bottom: 4rem;
}
@media (min-width: 768px) {
.trust .highlights {
  margin-bottom: 6rem;
}
}
.trust-compact .highlights {
  margin-bottom: var(--space-xl);
}
.card {
  border-radius: 0.5rem;
  background-color: var(--color-surface-container-lowest);
  padding: var(--space-lg);
  box-shadow: var(--shadow-xs);
}
.get-started {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  max-width: 56rem;
  flex-direction: column;
  align-items: center;
  border-radius: 0.5rem;
  background-color: var(--color-surface-container-lowest);
  padding: var(--space-lg);
  text-align: center;
  box-shadow: var(--shadow-md);
}
@media (min-width: 768px) {
.get-started {
  padding: var(--space-xl);
}
}
.get-started__title {
  margin-top: var(--space-xs);
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 52px;
  letter-spacing: -0.003em;
  font-weight: 600;
  color: var(--color-on-surface);
}
.get-started__lead {
  margin-top: var(--space-xs);
  max-width: 36rem;
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 24px;
  letter-spacing: -0.022em;
  font-weight: 400;
  color: var(--color-tertiary);
}
.get-started__launcher {
  margin-top: var(--space-lg);
  display: flex;
  width: 100%;
  max-width: 32rem;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  border-radius: 0.75rem;
  background-color: var(--color-surface-container-low);
  box-shadow: var(--shadow-field);
  padding: 0.375rem;
}
@media (min-width: 640px) {
.get-started__launcher {
  flex-direction: row;
}
}
.get-started__field {
  display: flex;
  width: 100%;
  flex: 1 1 0%;
  align-items: center;
  gap: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
@media (min-width: 640px) {
.get-started__field {
  width: auto;
}
}
.get-started__icon {
  font-size: 18px;
  color: var(--color-tertiary);
}
.get-started__input {
  width: 100%;
  border-style: none;
  background-color: transparent;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--color-on-surface);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.get-started__input::placeholder {
  color: var(--color-tertiary);
}
.get-started__cta {
  display: inline-flex;
  height: 2.25rem;
  width: 100%;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: 0.75rem;
  background-color: var(--color-primary-container);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-on-primary-container);
  box-shadow: var(--shadow-xs);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.get-started__cta:hover {
  background-color: var(--color-primary-solid);
}
@media (min-width: 640px) {
.get-started__cta {
  width: auto;
}
}
.get-started__assurances {
  margin-top: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--color-tertiary);
}
.icon-16-accent {
  font-size: 16px;
  color: var(--color-primary);
}
.site-footer {
  width: 100%;
  border-top-width: 1px;
  border-color: var(--color-surface-container);
  background-color: var(--color-surface-footer);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}
.site-footer__inner {
  margin-left: auto;
  margin-right: auto;
  max-width: 1440px;
  padding-left: var(--margin);
  padding-right: var(--margin);
}
.site-footer__grid {
  margin-bottom: var(--space-xl);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl);
}
@media (min-width: 768px) {
.site-footer__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.site-footer__heading {
  margin-bottom: var(--space-md);
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-tertiary);
}
.stack-list > :not([hidden]) ~ :not([hidden]) {
  margin-top: var(--space-sm);
  margin-bottom: 0px;
}
.site-footer__item {
  line-height: 1;
}
.site-footer__link {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--color-on-surface-variant);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.site-footer__link:hover {
  color: var(--color-on-surface);
}
.site-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  border-top-width: 1px;
  border-color: var(--color-surface-container);
  padding-top: var(--space-lg);
}
@media (min-width: 640px) {
.site-footer__bottom {
  flex-direction: row;
}
}
.dot-inline {
  display: inline-block;
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 0.75rem;
  background-color: var(--color-primary);
}
.value-sm-soft {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--color-on-surface-variant);
}
.hosting-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-left: var(--gutter-mobile);
  padding-right: var(--gutter-mobile);
  padding-bottom: var(--space-xl);
  padding-top: var(--space-lg);
}
@media (min-width: 768px) {
.hosting-hero {
  padding-left: var(--margin);
  padding-right: var(--margin);
  padding-top: var(--space-xl);
}
}
.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1440px;
}
.hosting-hero__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  align-items: center;
  gap: var(--gutter);
}
@media (min-width: 1024px) {
.hosting-hero__grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
}
.hosting-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hosting-hero__copy > :not([hidden]) ~ :not([hidden]) {
  margin-top: var(--space-md);
  margin-bottom: 0px;
}
@media (min-width: 1024px) {
.hosting-hero__copy {
  grid-column: span 6 / span 6;
}
}
.hosting-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  border-radius: 0.75rem;
  background-color: var(--color-surface-container-high);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  color: var(--color-on-surface);
}
.hosting-hero__badge-dot {
  height: 0.375rem;
  width: 0.375rem;
  border-radius: 0.75rem;
  background-color: var(--color-primary-container);
}
.display-text {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 52px;
  letter-spacing: -0.003em;
  font-weight: 600;
  color: var(--color-on-surface);
}
.hosting-hero__lead {
  max-width: 36rem;
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 24px;
  letter-spacing: -0.022em;
  font-weight: 400;
  color: var(--color-on-surface-variant);
}
.hosting-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  padding-top: var(--space-xs);
}
.hosting-hero__status-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding-top: var(--space-xs);
}
.hosting-hero__status-dot {
  height: 0.5rem;
  width: 0.5rem;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  border-radius: 0.75rem;
  background-color: var(--color-primary);
}
.hosting-hero__status {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--color-tertiary);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.hosting-hero__status:hover {
  color: var(--color-on-surface);
}
.hosting-hero__status-badge {
  border-radius: 0.125rem;
  background-color: rgb(var(--rgb-primary-fixed) / 0.4);
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
}
.telemetry {
  width: 100%;
}
@media (min-width: 1024px) {
.telemetry {
  grid-column: span 6 / span 6;
}
}
.telemetry__card {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  background-color: var(--color-surface-container-lowest);
  padding: var(--space-md);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 768px) {
.telemetry__card {
  padding: var(--space-lg);
}
}
.card-head {
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-sm);
}
.telemetry__dot {
  height: 0.75rem;
  width: 0.75rem;
  border-radius: 0.75rem;
  background-color: var(--color-surface-container-highest);
}
.telemetry__host {
  margin-left: 0.5rem;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--color-tertiary);
}
.telemetry__live {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.75rem;
  background-color: var(--color-surface-container);
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 500;
  color: var(--color-tertiary);
}
.dot-sm {
  height: 0.375rem;
  width: 0.375rem;
  border-radius: 0.75rem;
  background-color: var(--color-primary);
}
.telemetry__metrics {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-sm);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}
@media (min-width: 640px) {
.telemetry__metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.telemetry__metric {
  border-radius: 0.25rem;
  background-color: var(--color-surface-container-low);
  padding: var(--space-sm);
}
.caption-block {
  display: block;
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 500;
  color: var(--color-tertiary);
}
.telemetry__value {
  margin-top: 0.125rem;
  display: block;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-on-surface);
}
.caption {
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 500;
  color: var(--color-tertiary);
}
.telemetry__metric-wide {
  grid-column: span 2 / span 2;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container-low);
  padding: var(--space-sm);
}
@media (min-width: 640px) {
.telemetry__metric-wide {
  grid-column: span 1 / span 1;
}
}
.telemetry__value-accent {
  margin-top: 0.125rem;
  display: block;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
}
.telemetry__latency {
  margin-top: var(--space-sm);
  border-radius: 0.25rem;
  background-color: var(--color-surface-container-low);
  padding: var(--space-sm);
}
.telemetry__latency-head {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--color-on-surface);
}
.telemetry__chart {
  height: 4rem;
  width: 100%;
  color: var(--color-primary);
}
.telemetry__point {
  fill: var(--color-primary);
}
.telemetry__latency-axis {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--color-tertiary);
}
.telemetry__terminal {
  margin-top: var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 0.25rem;
  background-color: var(--color-tint-variant);
  padding: var(--space-sm);
}
.telemetry__terminal-line {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  overflow: hidden;
}
.telemetry__prompt {
  -webkit-user-select: none;
  user-select: none;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0em;
  font-weight: 400;
  color: var(--color-tertiary);
}
.telemetry__command {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0em;
  font-weight: 400;
  color: var(--color-on-surface);
}
.telemetry__copy {
  white-space: nowrap;
  border-radius: 0.125rem;
  background-color: var(--color-surface-container-lowest);
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 500;
  color: var(--color-on-surface);
  box-shadow: var(--shadow-xs);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.telemetry__copy:hover {
  background-color: var(--color-surface);
}
.use-cases {
  width: 100%;
  background-color: var(--color-band-50);
  padding-left: var(--gutter-mobile);
  padding-right: var(--gutter-mobile);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}
@media (min-width: 768px) {
.use-cases {
  padding-left: var(--margin);
  padding-right: var(--margin);
}
}
.use-cases__head {
  margin-bottom: var(--space-lg);
  max-width: 42rem;
}
.section-title-compact {
  margin-top: 0.25rem;
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 38px;
  letter-spacing: 0.004em;
  font-weight: 600;
  color: var(--color-on-surface);
}
.use-cases__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-md);
}
@media (min-width: 768px) {
.use-cases__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.use-cases__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.use-cases__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 0.5rem;
  background-color: var(--color-surface-container-lowest);
  padding: var(--space-lg);
  box-shadow: var(--shadow-xs);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.use-cases__card:hover {
  box-shadow: var(--shadow-md);
}
.use-cases__icon-tile {
  margin-bottom: var(--space-md);
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container);
  color: var(--color-primary);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.use-cases__card:hover .use-cases__icon-tile {
  background-color: var(--color-primary-solid);
  color: var(--color-on-primary);
}
.use-cases__heading {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 24px;
  letter-spacing: 0.012em;
  font-weight: 600;
  color: var(--color-on-surface);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.use-cases__card:hover .use-cases__heading {
  color: var(--color-primary);
}
.use-cases__link {
  margin-top: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-sm);
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-primary);
}
.use-cases__arrow {
  font-size: 18px;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.use-cases__card:hover .use-cases__arrow {
  transform: translateX(0.25rem);
}
.section-default {
  width: 100%;
  padding-left: var(--gutter-mobile);
  padding-right: var(--gutter-mobile);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}
@media (min-width: 768px) {
.section-default {
  padding-left: var(--margin);
  padding-right: var(--margin);
}
}
.plans__head {
  margin-bottom: var(--space-lg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-sm);
}
@media (min-width: 768px) {
.plans__head {
  flex-direction: row;
  align-items: flex-end;
}
}
.plans__billing {
  display: inline-flex;
  align-self: flex-start;
  border-radius: 0.75rem;
  background-color: var(--color-surface-container-high);
  padding: 0.25rem;
}
@media (min-width: 768px) {
.plans__billing {
  align-self: auto;
}
}
.plans__billing-option-active {
  border-radius: 0.75rem;
  background-color: var(--color-surface-selected);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 500;
  color: var(--color-on-surface);
  box-shadow: var(--shadow-xs);
}
.plans__billing-option {
  border-radius: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 500;
  color: var(--color-tertiary);
}
.plans__billing-option:hover {
  color: var(--color-on-surface);
}
/* The controls of a plan grid (includes/plan-controls.php): the currency selector, then the
   billing period, on one row. On a phone the period moves under the selector when the row has
   no room for both; from 768px the two stay together, beside the heading or below it. */
.plans__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: flex-start;
  gap: 0.5rem;
}
@media (min-width: 768px) {
.plans__controls {
  flex-wrap: nowrap;
  flex-shrink: 0;
  align-self: auto;
}
}
.plans__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-md);
}
@media (min-width: 768px) {
.plans__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.plans__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.card-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 0.5rem;
  background-color: var(--color-surface-container-lowest);
  padding: var(--space-lg);
  box-shadow: var(--shadow-xs);
}
.plans__name {
  margin-top: 0.25rem;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 24px;
  letter-spacing: 0.012em;
  font-weight: 600;
  color: var(--color-on-surface);
}
.plans__price-row {
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}
.plans__desc {
  margin-bottom: var(--space-md);
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--color-tertiary);
}
.plans__features > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0.625rem;
  margin-bottom: 0px;
}
.plans__features {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--color-on-surface);
}
.icon-18-accent {
  font-size: 18px;
  color: var(--color-primary);
}
.plans__select {
  margin-top: var(--space-lg);
  display: block;
  width: 100%;
  border-radius: 0.75rem;
  background-color: var(--color-surface-container);
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  text-align: center;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-on-surface);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.plans__select:hover {
  background-color: var(--color-surface-variant);
}
.plans__card-featured {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border-radius: 0.5rem;
  background-color: var(--color-surface-container-lowest);
  padding: var(--space-lg);
  box-shadow: var(--shadow-md);
}
.plans__featured-bar {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  height: 0.25rem;
  background-color: var(--color-primary);
}
.plans__badge {
  border-radius: 0.75rem;
  background-color: var(--color-primary-fixed);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 500;
  color: var(--color-on-primary-fixed);
}
.plans__select-primary {
  margin-top: var(--space-lg);
  display: block;
  width: 100%;
  border-radius: 0.75rem;
  background-color: var(--color-primary-container);
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  text-align: center;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-on-primary-container);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.plans__select-primary:hover {
  background-color: var(--color-primary-solid);
}
.datacenters {
  width: 100%;
  background-color: var(--color-band-40);
  padding-left: var(--gutter-mobile);
  padding-right: var(--gutter-mobile);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}
@media (min-width: 768px) {
.datacenters {
  padding-left: var(--margin);
  padding-right: var(--margin);
}
}
.datacenters__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-lg);
}
@media (min-width: 1024px) {
.datacenters__grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
}
.datacenters__intro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media (min-width: 1024px) {
.datacenters__intro {
  grid-column: span 5 / span 5;
}
}
.datacenters__peering {
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
  border-radius: 0.5rem;
  background-color: var(--color-surface-container-lowest);
  padding: var(--space-md);
  box-shadow: var(--shadow-xs);
}
.datacenters__label {
  margin-bottom: var(--space-xs);
  display: block;
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-tertiary);
}
.datacenters__exchanges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.datacenters__exchange {
  border-radius: 0.125rem;
  background-color: var(--color-surface-container);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--color-on-surface);
}
.link-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-primary);
}
.link-icon:hover {
  -webkit-text-decoration-line: underline;
  text-decoration-line: underline;
}
.datacenters__latency {
  border-radius: 0.5rem;
  background-color: var(--color-surface-container-lowest);
  padding: var(--space-lg);
  box-shadow: var(--shadow-xs);
}
@media (min-width: 1024px) {
.datacenters__latency {
  grid-column: span 7 / span 7;
}
}
.datacenters__route {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container-low);
  padding: var(--space-sm);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.datacenters__route:hover {
  background-color: var(--color-surface-container);
}
.datacenters__dot {
  height: 0.625rem;
  width: 0.625rem;
  border-radius: 0.75rem;
  background-color: var(--color-primary);
}
.align-end {
  text-align: right;
}
.figure-label {
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-on-surface);
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  align-items: center;
  gap: var(--space-xl);
}
@media (min-width: 1024px) {
.feature-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
}
.stacks__intro {
  display: flex;
  flex-direction: column;
}
.stacks__intro > :not([hidden]) ~ :not([hidden]) {
  margin-top: var(--space-md);
  margin-bottom: 0px;
}
@media (min-width: 1024px) {
.stacks__intro {
  grid-column: span 6 / span 6;
}
}
.stacks__apps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  padding-top: var(--space-xs);
}
@media (min-width: 640px) {
.stacks__apps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.stacks__app {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  border-radius: 0.25rem;
  background-color: var(--color-surface-container-low);
  padding: var(--space-sm);
}
.stacks__icon-docker {
  font-size: 20px;
  color: var(--brand-docker);
}
.stacks__icon-nodejs {
  font-size: 20px;
  color: var(--brand-nodejs);
}
.stacks__icon-gitlab {
  font-size: 20px;
  color: var(--brand-gitlab);
}
.stacks__icon-nextjs {
  font-size: 20px;
  color: var(--brand-nextjs);
}
.stacks__icon-postgresql {
  font-size: 20px;
  color: var(--brand-postgresql);
}
.stacks__icon-wordpress {
  font-size: 20px;
  color: var(--brand-wordpress);
}
.studio {
  border-radius: 0.5rem;
  background-color: var(--color-surface-container-lowest);
  padding: var(--space-lg);
  box-shadow: var(--shadow-xs);
}
@media (min-width: 1024px) {
.studio {
  grid-column: span 6 / span 6;
}
}
.studio__badge {
  margin-bottom: var(--space-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0.75rem;
  background-color: var(--color-surface-container);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 500;
  color: var(--color-tertiary);
}
.heading-md {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 30px;
  letter-spacing: 0.009em;
  font-weight: 600;
  color: var(--color-on-surface);
}
.studio__features {
  margin-top: var(--space-md);
}
.studio__features > :not([hidden]) ~ :not([hidden]) {
  margin-top: var(--space-sm);
  margin-bottom: 0px;
}
.studio__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}
.studio__icon {
  margin-top: 0.125rem;
  color: var(--color-primary);
}
.studio__footer {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
}
.studio__cta {
  display: inline-flex;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background-color: var(--color-primary-container);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-on-primary-container);
  box-shadow: var(--shadow-xs);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.studio__cta:hover {
  background-color: var(--color-primary-solid);
}
.trust-compact {
  width: 100%;
  background-color: var(--color-band-60);
  padding-left: var(--gutter-mobile);
  padding-right: var(--gutter-mobile);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}
@media (min-width: 768px) {
.trust-compact {
  padding-left: var(--margin);
  padding-right: var(--margin);
}
}
.config-page {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1440px;
  padding-left: var(--margin-mobile);
  padding-right: var(--margin-mobile);
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}
@media (min-width: 768px) {
.config-page {
  padding-left: var(--margin);
  padding-right: var(--margin);
}
}
.config-status {
  margin-bottom: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  color: var(--color-tertiary);
}
.config-status__crumbs {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 500;
}
.config-status__crumb {
  cursor: pointer;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.config-status__crumb:hover {
  color: var(--color-on-surface);
}
.strong {
  font-weight: 600;
  color: var(--color-on-surface);
}
.config-status__badge {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  border-radius: 0.75rem;
  background-color: var(--color-surface-container);
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.config-status__dot {
  height: 0.375rem;
  width: 0.375rem;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  border-radius: 0.75rem;
  background-color: var(--brand-rocky);
}
.value-sm {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--color-on-surface);
}
.config-status__deploy-time {
  display: none;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--color-tertiary);
}
@media (min-width: 640px) {
.config-status__deploy-time {
  display: flex;
}
}
.emphasis {
  font-weight: 500;
  color: var(--color-primary);
}
.page-intro {
  margin-bottom: var(--space-xl);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-lg);
}
@media (min-width: 1024px) {
.page-intro {
  flex-direction: row;
  align-items: flex-end;
}
}
.page-intro-text {
  max-width: 42rem;
}
.eyebrow-block {
  margin-bottom: var(--space-xs);
  display: block;
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary);
}
.page-title {
  margin-bottom: var(--space-sm);
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 52px;
  letter-spacing: -0.003em;
  font-weight: 600;
  color: var(--color-on-surface);
}
.config-intro__lead {
  font-family: var(--font-text);
  font-size: 17px;
  letter-spacing: -0.022em;
  font-weight: 400;
  line-height: 1.625;
  color: var(--color-on-surface-variant);
}
.mode-switch {
  display: inline-flex;
  align-self: flex-start;
  border-radius: 0.75rem;
  background-color: var(--color-surface-container-high);
  padding: 0.375rem;
  box-shadow: var(--shadow-xs);
}
@media (min-width: 1024px) {
.mode-switch {
  align-self: auto;
}
}
.mode-switch__option-active {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  background-color: var(--color-surface-selected);
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 600;
  color: var(--color-on-surface);
  box-shadow: var(--shadow-xs);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
/* The "(Shared)" / "(Dedicated)" note inside the chosen mode: muted, but readable on the raised cell. */
.mode-switch__option-active .note-plain {
  color: var(--color-on-selected-muted);
}
.dot {
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 0.75rem;
  background-color: var(--color-primary);
}
.note-plain {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--color-tertiary);
}
.mode-switch__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-on-surface-variant);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
.mode-switch__option:hover {
  color: var(--color-on-surface);
}
.mode-switch__dot {
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 0.75rem;
  background-color: transparent;
}
.arch-banner {
  margin-bottom: var(--space-xl);
  border-radius: 0.5rem;
  background-color: var(--color-surface-container-low);
  padding: var(--space-md);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
.arch-banner__layout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
}
@media (min-width: 768px) {
.arch-banner__layout {
  flex-direction: row;
  align-items: center;
}
}
.media-object {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}
.arch-banner__badge {
  border-radius: 0.75rem;
  background-color: rgb(var(--rgb-primary) / 0.1);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 500;
  color: var(--color-primary);
}
.arch-banner__desc {
  margin-top: 0.25rem;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--color-on-surface-variant);
}
.arch-banner__facts {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-lg);
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--color-tertiary);
}
.arch-banner__fact {
  display: flex;
  flex-direction: column;
  text-align: right;
}
.arch-banner__fact-label {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--color-on-surface);
}
.divider-v {
  height: 2rem;
  width: 1px;
  background-color: var(--color-surface-container);
}
.config {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  align-items: flex-start;
  gap: var(--space-lg);
}
@media (min-width: 1024px) {
.config {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
}
.config__controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
@media (min-width: 1024px) {
.config__controls {
  grid-column: span 8 / span 8;
}
}
.panel-head {
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.step-label {
  display: block;
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-tertiary);
}
.region__status {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0.75rem;
  background-color: var(--color-success-container);
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--color-success);
}
.region__dot {
  height: 0.375rem;
  width: 0.375rem;
  border-radius: 0.75rem;
  background-color: var(--color-success);
}
.region__options {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-sm);
}
@media (min-width: 640px) {
.region__options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.region__option {
  position: relative;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container-low);
  padding: var(--space-md);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.region__option:hover {
  background-color: var(--color-surface-container);
}
.region__country {
  display: flex;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background-color: var(--color-surface-container-lowest);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--color-on-surface);
}
.region__latency-fast {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-success);
}
.region__latency {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-on-surface-variant);
}
.cpu__options {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-md);
}
@media (min-width: 768px) {
.cpu__options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.cpu__option {
  display: flex;
  cursor: pointer;
  flex-direction: column;
  border-radius: 0.5rem;
  background-color: var(--color-surface-container-low);
  padding: var(--space-md);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.cpu__option:hover {
  background-color: var(--color-surface-container);
}
.cpu__option-head {
  margin-bottom: 0.75rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.cpu__specs {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container-lowest);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.cpu__spec-accent {
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
}
.cpu__spec-gain {
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-success);
}
.cpu__note {
  margin-top: 0.5rem;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--color-on-surface-variant);
}
.cpu__icon-intel {
  font-size: 28px;
  color: var(--brand-intel);
}
.resources__head {
  margin-bottom: var(--space-lg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-sm);
}
@media (min-width: 640px) {
.resources__head {
  flex-direction: row;
  align-items: center;
}
}
.presets {
  display: inline-flex;
  gap: 0.125rem;
  overflow-x: auto;
  border-radius: 0.75rem;
  background-color: var(--color-surface-container-low);
  padding: 0.25rem;
}
.presets__option {
  border-radius: 0.75rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 500;
  color: var(--color-on-surface-variant);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.presets__option:hover {
  color: var(--color-on-surface);
}
.presets__option-active {
  border-radius: 0.75rem;
  background-color: var(--color-surface-selected);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 600;
  color: var(--color-on-surface);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.resources__sliders > :not([hidden]) ~ :not([hidden]) {
  margin-top: var(--space-xl);
  margin-bottom: 0px;
}
.resources__icon {
  font-size: 20px;
  color: var(--color-primary);
}
.resources__value {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 24px;
  letter-spacing: 0.012em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
}
.resources__slider {
  height: 0.5rem;
  width: 100%;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container);
  accent-color: var(--color-primary);
}
/* The thumb is drawn here for every engine (each would otherwise draw its own): the 15px brand-blue
   disc Chrome draws by default, centred on the 8px track. WebKit/Blink and Gecko rules stay apart, as a selector one
   engine doesn't know would drop the whole rule in it. */
.resources__slider::-webkit-slider-runnable-track {
  height: 0.5rem;
  border-radius: 0.25rem;
  background-color: transparent;
}
.resources__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  margin-top: -3.5px;
  border: 0;
  border-radius: 50%;
  background-color: var(--color-primary);
}
.resources__slider::-moz-range-track {
  height: 0.5rem;
  border-radius: 0.25rem;
  background-color: transparent;
}
.resources__slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border: 0;
  border-radius: 50%;
  background-color: var(--color-primary);
}
.resources__slider::-webkit-slider-thumb:hover {
  background-color: var(--color-slider-thumb-hover);
}
.resources__slider::-webkit-slider-thumb:active {
  background-color: var(--color-slider-thumb-active);
}
.resources__slider::-moz-range-thumb:hover {
  background-color: var(--color-slider-thumb-hover);
}
.resources__slider::-moz-range-thumb:active {
  background-color: var(--color-slider-thumb-active);
}
/* Contrast themes (forced colours) would paint the thumb in the page colour: keep it in the
   system highlight colour, as the engines' own thumbs were. */
@media (forced-colors: active) {
.resources__slider::-webkit-slider-thumb,
.resources__slider::-webkit-slider-thumb:hover,
.resources__slider::-webkit-slider-thumb:active {
  forced-color-adjust: none;
  background-color: Highlight;
}
.resources__slider::-moz-range-thumb,
.resources__slider::-moz-range-thumb:hover,
.resources__slider::-moz-range-thumb:active {
  forced-color-adjust: none;
  background-color: Highlight;
}
}
.resources__scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--color-tertiary);
}
.spec-meter {
  margin-top: var(--space-lg);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  border-radius: 0.5rem;
  background-color: var(--color-surface-container-low);
  padding: var(--space-md);
  text-align: center;
}
@media (min-width: 640px) {
.spec-meter {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.figure-sm {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 24px;
  letter-spacing: 0.012em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-on-surface);
}
.os__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}
@media (min-width: 640px) {
.os__options {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.os__option-selected {
  border-radius: 0.5rem;
  background-color: var(--color-surface-container-low);
  padding: var(--space-md);
  text-align: left;
  box-shadow: 0 0 0 0px #fff, 0 0 0 calc(2px + 0px) var(--color-primary);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.os__option-selected:hover {
  background-color: var(--color-surface-container);
}
.os__logo-ubuntu {
  margin-bottom: 0.5rem;
  display: flex;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container-lowest);
  font-weight: 600;
  color: var(--brand-ubuntu);
}
.os__name {
  font-family: var(--font-text);
  font-size: 14px;
  letter-spacing: -0.016em;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-on-surface);
}
.os__desc {
  margin-top: 0.125rem;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--color-tertiary);
}
.os__price-free {
  margin-top: 0.5rem;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-success);
}
.os__option {
  border-radius: 0.5rem;
  background-color: var(--color-surface-container-low);
  padding: var(--space-md);
  text-align: left;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.os__option:hover {
  background-color: var(--color-surface-container);
}
.os__logo-debian {
  margin-bottom: 0.5rem;
  display: flex;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container-lowest);
  font-weight: 600;
  color: var(--brand-debian);
}
.os__logo-almalinux {
  margin-bottom: 0.5rem;
  display: flex;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container-lowest);
  font-weight: 600;
}
.os__logo-rocky {
  margin-bottom: 0.5rem;
  display: flex;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container-lowest);
  font-weight: 600;
  color: var(--brand-rocky);
}
.os__logo-windows {
  margin-bottom: 0.5rem;
  display: flex;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container-lowest);
  font-weight: 600;
  color: var(--brand-windows);
}
.os__logo-arch {
  margin-bottom: 0.5rem;
  display: flex;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container-lowest);
  font-weight: 600;
  color: var(--brand-arch);
}
.os__logo-alpine {
  margin-bottom: 0.5rem;
  display: flex;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container-lowest);
  font-weight: 600;
  color: var(--brand-alpine);
}
.os__option-custom {
  border-radius: 0.5rem;
  border-width: 1px;
  border-style: dashed;
  border-color: var(--color-tertiary-fixed-dim);
  background-color: var(--color-surface-container-low);
  padding: var(--space-md);
  text-align: left;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.os__option-custom:hover {
  background-color: var(--color-surface-container);
}
.os__logo-custom {
  margin-bottom: 0.5rem;
  display: flex;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container-lowest);
  color: var(--color-primary);
}
.os__price-note {
  margin-top: 0.5rem;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-on-surface-variant);
}
.addons__option {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  border-radius: 0.5rem;
  background-color: var(--color-surface-container-low);
  padding: var(--space-md);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.addons__option:hover {
  background-color: var(--color-surface-container);
}
.addons__checkbox {
  margin-top: 0.25rem;
  height: 1rem;
  width: 1rem;
  border-radius: 0.125rem;
  color: var(--color-primary);
  accent-color: var(--color-primary);
}
.note-soft {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--color-on-surface-variant);
}
.addons__price-col {
  margin-left: 1rem;
  flex-shrink: 0;
  text-align: right;
}
.addons__included {
  border-radius: 0.75rem;
  background-color: rgb(var(--rgb-primary) / 0.1);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 500;
  color: var(--color-primary);
}
.addons__price {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 24px;
  letter-spacing: 0.012em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-success);
}
.summary {
  position: sticky;
  top: 4.5rem;
}
.summary > :not([hidden]) ~ :not([hidden]) {
  margin-top: var(--space-md);
  margin-bottom: 0px;
}
@media (min-width: 1024px) {
.summary {
  grid-column: span 4 / span 4;
}
}
.summary__card {
  border-radius: 0.5rem;
  border-width: 0px;
  background-color: var(--color-surface-container-lowest);
  padding: var(--space-lg);
  box-shadow: var(--shadow-md);
}
.summary__head {
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  border-bottom-width: 1px;
  border-color: var(--color-surface-container);
  padding-bottom: var(--space-md);
}
.field-group {
  margin-bottom: var(--space-md);
}
.billing__label {
  margin-bottom: 0.375rem;
  display: block;
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-tertiary);
}
.summary__lines {
  margin-bottom: var(--space-md);
  border-bottom-width: 1px;
  border-color: var(--color-surface-container);
  padding-bottom: var(--space-md);
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--color-on-surface-variant);
}
.summary__lines > :not([hidden]) ~ :not([hidden]) {
  margin-top: var(--space-sm);
  margin-bottom: 0px;
}
.summary__line-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--color-on-surface);
}
.price-free {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-success);
}
.summary__line-value {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.summary__bandwidth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.25rem;
  color: var(--color-tertiary);
}
.icon-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.summary__bandwidth {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-on-surface-variant);
}
.summary__total {
  margin-bottom: 0.25rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.summary__label {
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-tertiary);
}
.summary__price-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.25rem;
}
.summary__price {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 52px;
  letter-spacing: -0.003em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
}
.summary__cta {
  display: flex;
  height: 3rem;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  background-color: var(--color-primary-solid);
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 600;
  color: var(--color-on-primary);
  box-shadow: var(--shadow-xs);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.summary__cta:hover {
  background-color: var(--color-primary-container);
}
.summary__cta:active {
  transform: scaleX(0.98) scaleY(0.98);
}
.summary__assurances {
  margin-top: var(--space-md);
  border-top-width: 1px;
  border-color: var(--color-surface-container);
  padding-top: var(--space-sm);
}
.summary__assurances > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0.5rem;
  margin-bottom: 0px;
}
.summary__assurance {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--color-tertiary);
}
.summary__icon {
  font-size: 18px;
  color: var(--color-success);
}
.row-head {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.overline-strong {
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-tertiary);
}
.diagnostics__dot {
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 0.75rem;
  background-color: var(--brand-rocky);
}
.diagnostics__list > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0.375rem;
  margin-bottom: 0px;
}
.diagnostics__list {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--color-tertiary);
}
.spread {
  display: flex;
  justify-content: space-between;
}
.diagnostics__value {
  font-weight: 500;
  color: var(--color-on-surface);
}
.compare {
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
}
.compare__head {
  margin-bottom: var(--space-lg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media (min-width: 768px) {
.compare__head {
  flex-direction: row;
  align-items: flex-end;
}
}
.title-lg {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 38px;
  letter-spacing: 0.004em;
  font-weight: 600;
  color: var(--color-on-surface);
}
.table-card {
  overflow: hidden;
  border-radius: 0.5rem;
  background-color: var(--color-surface-container-lowest);
  box-shadow: var(--shadow-xs);
}
.table-scroll {
  overflow-x: auto;
}
.data-table {
  width: 100%;
  text-align: left;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.data-table-head {
  background-color: var(--color-surface-container-low);
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-tertiary);
}
.compare__th {
  width: 25%;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}
.compare__th-vps {
  width: 25%;
  background-color: var(--color-tint-40);
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
  font-weight: 600;
  color: var(--color-on-surface);
}
.compare__th-vds {
  width: 25%;
  background-color: rgb(var(--rgb-primary) / 0.05);
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
  font-weight: 600;
  color: var(--color-primary);
}
.compare__th-plain {
  width: 25%;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
  color: var(--color-on-surface);
}
.compare__body > :not([hidden]) ~ :not([hidden]) {
  border-top-width: calc(1px * calc(1 - 0));
  border-bottom-width: calc(1px * 0);
  border-color: var(--color-surface-container);
}
.compare__body {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--color-on-surface-variant);
}
.compare__row {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.compare__row:hover {
  background-color: var(--color-band-50);
}
.compare__feature {
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
  font-weight: 500;
  color: var(--color-on-surface);
}
.compare__cell-vps {
  background-color: var(--color-tint-20);
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}
.compare__cell-vds-accent {
  background-color: rgb(var(--rgb-primary) / 0.05);
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
  font-weight: 600;
  color: var(--color-primary);
}
.compare__cell {
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}
.compare__cell-vds {
  background-color: rgb(var(--rgb-primary) / 0.05);
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
  font-weight: 600;
  color: var(--color-on-surface);
}
.bare-metal {
  margin-bottom: var(--space-xl);
  margin-top: var(--space-xl);
  border-radius: 1rem;
  background-color: var(--color-surface-container-lowest);
  padding: var(--space-lg);
  box-shadow: var(--shadow-xs);
}
@media (min-width: 768px) {
.bare-metal {
  padding: var(--space-xl);
}
}
@media (min-width: 1024px) {
.bare-metal__main {
  grid-column: span 7 / span 7;
}
}
.bare-metal__badge {
  margin-bottom: var(--space-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  background-color: var(--color-surface-container);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 600;
  color: var(--color-on-surface);
}
.feature-title {
  margin-bottom: var(--space-sm);
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 38px;
  letter-spacing: 0.004em;
  font-weight: 600;
  color: var(--color-on-surface);
}
.bare-metal__lead {
  margin-bottom: var(--space-lg);
  font-family: var(--font-text);
  font-size: 17px;
  letter-spacing: -0.022em;
  font-weight: 400;
  line-height: 1.625;
  color: var(--color-on-surface-variant);
}
.bare-metal__specs {
  margin-bottom: var(--space-lg);
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-md);
}
@media (min-width: 640px) {
.bare-metal__specs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.bare-metal__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}
.bare-metal__cta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  background-color: var(--color-on-surface);
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 600;
  color: var(--color-surface-container-lowest);
  box-shadow: var(--shadow-xs);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.bare-metal__cta:hover {
  background-color: var(--color-solid-hover);
}
.bare-metal__cta-alt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  background-color: var(--color-surface-container);
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-on-surface);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.bare-metal__cta-alt:hover {
  background-color: var(--color-surface-container-high);
}
.bare-metal__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
@media (min-width: 1024px) {
.bare-metal__aside {
  grid-column: span 5 / span 5;
}
}
.bare-metal__panel-head {
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom-width: 1px;
  border-color: var(--color-surface-container);
  padding-bottom: 0.5rem;
}
.bare-metal__readings > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0.75rem;
  margin-bottom: 0px;
}
.bare-metal__readings {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.bare-metal__reading {
  margin-bottom: 0.25rem;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--color-on-surface);
}
.bare-metal__value-ok {
  font-weight: 600;
  color: var(--color-success);
}
.meter {
  height: 0.375rem;
  width: 100%;
  overflow: hidden;
  border-radius: 0.75rem;
  background-color: var(--color-surface-container);
}
.bare-metal__fill-power {
  height: 100%;
  width: 99.9%;
  border-radius: 0.75rem;
  background-color: var(--brand-rocky);
}
.bare-metal__value {
  font-weight: 600;
  color: var(--color-primary);
}
.bare-metal__fill-fiber {
  height: 100%;
  width: 34%;
  border-radius: 0.75rem;
  background-color: var(--color-primary);
}
.bare-metal__fill-pue {
  height: 100%;
  width: 88%;
  border-radius: 0.75rem;
  background-color: var(--color-success);
}
.architect {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 0.5rem;
  background-color: var(--color-surface-container);
  padding: var(--space-md);
}
.architect__icon-tile {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background-color: var(--color-surface-container-lowest);
  color: var(--color-primary);
}
.architect__link {
  flex-shrink: 0;
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 600;
  color: var(--color-primary);
}
.architect__link:hover {
  -webkit-text-decoration-line: underline;
  text-decoration-line: underline;
}
.apps-hero {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1440px;
  padding-left: var(--margin);
  padding-right: var(--margin);
  padding-bottom: var(--space-lg);
  padding-top: var(--space-xl);
}
.apps-hero__badge {
  margin-bottom: var(--space-md);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  border-radius: 0.75rem;
  background-color: var(--color-surface-container-high);
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  color: var(--color-on-surface-variant);
}
.apps-hero__badge-text {
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.apps-hero__lead {
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 24px;
  letter-spacing: -0.022em;
  font-weight: 400;
  color: var(--color-tertiary);
}
.apps-hero__stat {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  border-radius: 0.5rem;
  background-color: var(--color-surface-container-lowest);
  padding: var(--space-md);
  box-shadow: var(--shadow-xs);
}
.column {
  display: flex;
  flex-direction: column;
}
.apps-hero__stat-label {
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-tertiary);
}
.apps-hero__stat-value {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 24px;
  letter-spacing: 0.012em;
  font-weight: 600;
  color: var(--color-primary);
}
.app-search {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  border-radius: 1rem;
  background-color: var(--color-surface-container-lowest);
  padding: var(--space-md);
  box-shadow: var(--shadow-xs);
}
.app-search__field {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
}
.app-search__icon {
  position: absolute;
  left: var(--space-md);
  font-size: 20px;
  color: var(--color-tertiary);
}
.app-search__input {
  height: 2.75rem;
  width: 100%;
  border-radius: 0.5rem;
  background-color: var(--color-surface-container-low);
  box-shadow: var(--shadow-field);
  padding-left: 2.75rem;
  padding-right: var(--space-md);
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.016em;
  font-weight: 400;
  color: var(--color-on-surface);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.app-search__input::placeholder {
  color: var(--color-tertiary);
}
.app-search__input:focus {
  background-color: var(--color-surface-container-lowest);
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 0px #fff, 0 0 0 calc(2px + 0px) var(--color-focus-soft);
}
.app-search__shortcut {
  position: absolute;
  right: var(--space-sm);
  display: none;
  align-items: center;
  gap: var(--space-xs);
}
@media (min-width: 640px) {
.app-search__shortcut {
  display: flex;
}
}
.app-search__key {
  border-radius: 0.125rem;
  background-color: var(--color-surface-container);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--color-tertiary);
}
.categories {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  overflow-x: auto;
  padding-top: 0.25rem;
}
.categories__pill-all-active {
  display: flex;
  height: 2rem;
  flex-shrink: 0;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0.75rem;
  background-color: var(--color-inverse-surface);
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-inverse-on-surface);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.categories__count {
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-on-tertiary);
  opacity: 0.8;
}
/* Keyboard focus is ringed inside the pill: the row scrolls sideways, which would clip a ring
   drawn outside it. */
.category-pill:focus-visible {
  outline: 2px solid var(--color-primary-container);
  outline-offset: -2px;
}
/* When another category is chosen, "All" becomes a grey pill: its count then follows the label. */
.categories__pill-all .categories__count {
  color: inherit;
}
.categories__pill {
  height: 2rem;
  flex-shrink: 0;
  border-radius: 0.75rem;
  background-color: var(--color-surface-container-low);
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-on-surface-variant);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.categories__pill:hover {
  background-color: var(--color-surface-container);
}
.sizer {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1440px;
  padding-left: var(--margin);
  padding-right: var(--margin);
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}
.sizer__card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  background-color: var(--color-surface-container-lowest);
  padding: var(--space-lg);
  box-shadow: var(--shadow-xs);
}
@media (min-width: 1024px) {
.sizer__card {
  padding: var(--space-xl);
}
}
.sizer__head {
  margin-bottom: var(--space-lg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-sm);
}
@media (min-width: 768px) {
.sizer__head {
  flex-direction: row;
  align-items: center;
}
}
.sizer__title {
  margin-top: 0.125rem;
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 38px;
  letter-spacing: 0.004em;
  font-weight: 600;
  color: var(--color-on-surface);
}
.sizer__badge {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  border-radius: 0.75rem;
  background-color: var(--color-surface-container-low);
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--color-tertiary);
}
.sizer__dot {
  height: 0.5rem;
  width: 0.5rem;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  border-radius: 0.75rem;
  background-color: var(--color-primary-container);
}
.sizer__layout {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  align-items: flex-start;
  gap: var(--space-xl);
}
@media (min-width: 1024px) {
.sizer__layout {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
}
.sizer__steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
@media (min-width: 1024px) {
.sizer__steps {
  grid-column: span 7 / span 7;
}
}
.sizer__step-head {
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.sizer__step-number {
  display: flex;
  height: 1.5rem;
  width: 1.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background-color: var(--color-primary-fixed);
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-on-primary-fixed);
}
.sizer__stacks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}
@media (min-width: 640px) {
.sizer__stacks {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.sizer__stack-selected {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  border-radius: 0.5rem;
  background-color: var(--color-surface-container-high);
  padding: var(--space-md);
  text-align: left;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.sizer__icon-wordpress {
  font-size: 24px;
  color: var(--brand-wordpress);
}
.sizer__stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  border-radius: 0.5rem;
  background-color: var(--color-surface-container-low);
  padding: var(--space-md);
  text-align: left;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.sizer__stack:hover {
  background-color: var(--color-surface-container);
}
.sizer__icon-docker {
  font-size: 24px;
  color: var(--brand-docker);
}
.sizer__icon-gitlab {
  font-size: 24px;
  color: var(--brand-gitlab);
}
.sizer__icon-ghost {
  font-size: 24px;
  color: var(--brand-ghost);
}
.sizer__icon-magento {
  font-size: 24px;
  color: var(--brand-magento);
}
.sizer__icon-postgresql {
  font-size: 24px;
  color: var(--brand-postgresql);
}
.sizer__traffic {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
}
.sizer__tiers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-xs);
  border-radius: 0.5rem;
  background-color: var(--color-surface-container-low);
  padding: 0.375rem;
}
.sizer__tier {
  border-radius: 0.25rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-on-surface-variant);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.sizer__tier:hover {
  color: var(--color-on-surface);
}
.sizer__tier-active {
  border-radius: 0.25rem;
  background-color: var(--color-surface-selected);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 600;
  color: var(--color-on-surface);
  box-shadow: var(--shadow-xs);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.recommendation {
  display: flex;
  flex-direction: column;
  border-radius: 0.5rem;
  background-color: var(--color-surface-container-low);
  padding: var(--space-lg);
}
@media (min-width: 1024px) {
.recommendation {
  grid-column: span 5 / span 5;
}
}
.recommendation__head {
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-sm);
}
.recommendation__tools {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.meta-pill {
  border-radius: 0.75rem;
  background-color: var(--color-surface-container);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--color-on-surface-variant);
}
.recommendation__summary {
  margin-bottom: var(--space-lg);
}
.recommendation__specs {
  margin-bottom: var(--space-lg);
}
.recommendation__specs > :not([hidden]) ~ :not([hidden]) {
  margin-top: var(--space-md);
  margin-bottom: 0px;
}
.recommendation__spec-head {
  margin-bottom: 0.25rem;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 500;
  color: var(--color-on-surface-variant);
}
.recommendation__spec-value {
  font-family: var(--font-text);
  font-variant-numeric: tabular-nums;
}
.recommendation__fill {
  height: 100%;
  border-radius: 0.75rem;
  background-color: var(--color-primary-container);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
.recommendation__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-md);
}
.figure-row {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}
.recommendation__price {
  font-family: var(--font-display);
  font-size: 48px;
  letter-spacing: -0.003em;
  font-weight: 600;
  line-height: 1;
  color: var(--color-on-surface);
}
.btn-primary-flat {
  display: inline-flex;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background-color: var(--color-primary-container);
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-on-primary-container);
  box-shadow: var(--shadow-xs);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.btn-primary-flat:hover {
  background-color: var(--color-primary-solid);
}
.catalog {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1440px;
  padding-left: var(--margin);
  padding-right: var(--margin);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}
.catalog__head {
  margin-bottom: var(--space-lg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-sm);
}
@media (min-width: 640px) {
.catalog__head {
  flex-direction: row;
  align-items: flex-end;
}
}
.catalog__verified {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--color-tertiary);
}
.catalog__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-lg);
}
@media (min-width: 768px) {
.catalog__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.catalog__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.catalog__card {
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  background-color: var(--color-surface-container-lowest);
  padding: var(--space-lg);
  box-shadow: var(--shadow-xs);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.catalog__card:hover {
  box-shadow: var(--shadow-md);
}
.catalog__card-head {
  margin-bottom: var(--space-md);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.catalog__icon-tile {
  display: flex;
  height: 3rem;
  width: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background-color: var(--color-surface-container-low);
  color: var(--color-on-surface);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.catalog__card:hover .catalog__icon-tile {
  background-color: var(--color-primary-fixed);
}
.catalog__icon-wordpress {
  font-size: 28px;
  color: var(--brand-wordpress);
}
.catalog__tag {
  border-radius: 0.75rem;
  background-color: var(--color-surface-container-low);
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 500;
  color: var(--color-tertiary);
}
.catalog__heading {
  margin-bottom: 0.25rem;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 24px;
  letter-spacing: 0.012em;
  font-weight: 600;
  color: var(--color-on-surface);
}
.catalog__desc {
  margin-bottom: var(--space-md);
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.016em;
  font-weight: 400;
  color: var(--color-tertiary);
}
.catalog__requirements {
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  border-radius: 0.25rem;
  background-color: var(--color-band-50);
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--color-tertiary);
}
.catalog__card-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  padding-top: var(--space-md);
}
.catalog__specs {
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-primary);
}
.catalog__specs:hover {
  -webkit-text-decoration-line: underline;
  text-decoration-line: underline;
}
.catalog__deploy {
  display: inline-flex;
  height: 2.25rem;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.75rem;
  background-color: var(--color-surface-container-high);
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-on-surface);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.catalog__deploy:hover {
  background-color: var(--color-primary-container);
  color: var(--color-on-primary-container);
}
.catalog__icon-cpanel {
  font-size: 28px;
  color: var(--brand-cpanel);
}
.catalog__icon-docker {
  font-size: 28px;
  color: var(--brand-docker);
}
.catalog__icon-nodejs {
  font-size: 28px;
  color: var(--brand-nodejs);
}
.catalog__icon-gitlab {
  font-size: 28px;
  color: var(--brand-gitlab);
}
.catalog__icon-nextjs {
  font-size: 28px;
  color: var(--brand-nextjs);
}
.catalog__icon-ghost {
  font-size: 28px;
  color: var(--brand-ghost);
}
.catalog__icon-supabase {
  font-size: 28px;
  color: var(--brand-supabase);
}
.catalog__icon-woocommerce {
  font-size: 28px;
  color: var(--brand-woocommerce);
}
.benchmark {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1440px;
  padding-left: var(--margin);
  padding-right: var(--margin);
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}
.benchmark__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  border-radius: 1rem;
  background-color: var(--color-surface-container-lowest);
  padding: var(--space-lg);
  box-shadow: var(--shadow-xs);
}
@media (min-width: 1024px) {
.benchmark__card {
  flex-direction: row;
}
}
.benchmark__text-col {
  max-width: 36rem;
}
.benchmark__heading {
  margin-top: 0.25rem;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 30px;
  letter-spacing: 0.009em;
  font-weight: 600;
  color: var(--color-on-surface);
}
.benchmark__compare {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--space-sm);
  border-radius: 0.5rem;
  background-color: var(--color-surface-container-low);
  padding: var(--space-md);
}
@media (min-width: 1024px) {
.benchmark__compare {
  width: 24rem;
}
}
.benchmark__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.benchmark__value-brand {
  font-family: var(--font-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
}
.benchmark__track {
  height: 0.75rem;
  width: 100%;
  overflow: hidden;
  border-radius: 0.75rem;
  background-color: var(--color-surface-container);
}
.meter-fill {
  height: 100%;
  border-radius: 0.75rem;
  background-color: var(--color-primary);
}
.benchmark__row-spaced {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.muted {
  color: var(--color-tertiary);
}
.benchmark__value {
  font-family: var(--font-text);
  font-variant-numeric: tabular-nums;
  color: var(--color-tertiary);
}
.benchmark__fill-standard {
  height: 100%;
  border-radius: 0.75rem;
  background-color: var(--color-tertiary);
}
.benchmark__caption {
  margin-top: 0.25rem;
  text-align: right;
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-tertiary);
}
.spotlights {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-xl);
  width: 100%;
  max-width: 1440px;
  padding-left: var(--margin);
  padding-right: var(--margin);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}
.spotlights__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-lg);
}
@media (min-width: 1024px) {
.spotlights__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.spotlights__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border-radius: 1rem;
  background-color: var(--color-surface-container-lowest);
  padding: var(--space-lg);
  box-shadow: var(--shadow-xs);
}
@media (min-width: 1024px) {
.spotlights__card {
  padding: var(--space-xl);
}
}
.spotlights__body {
  position: relative;
  z-index: 10;
}
.spotlights__badge-ai {
  margin-bottom: var(--space-md);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  border-radius: 0.75rem;
  background-color: var(--color-primary-fixed);
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 500;
  color: var(--color-on-primary-fixed);
}
.spotlights__desc {
  margin-bottom: var(--space-lg);
  max-width: 32rem;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.016em;
  font-weight: 400;
  color: var(--color-tertiary);
}
.spotlights__features {
  margin-bottom: var(--space-lg);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}
.spotlights__feature {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--color-on-surface);
}
.spotlights__footer {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-md);
}
.spotlights__badge {
  margin-bottom: var(--space-md);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  border-radius: 0.75rem;
  background-color: var(--color-surface-container-high);
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 500;
  color: var(--color-on-surface);
}
.spotlights__cta-dark {
  display: inline-flex;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background-color: var(--color-inverse-surface);
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-inverse-on-surface);
  box-shadow: var(--shadow-xs);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.spotlights__cta-dark:hover {
  opacity: 0.9;
}
.console__main {
  display: flex;
  min-height: 100vh;
  width: 100%;
  align-items: center;
  justify-content: center;
  background-color: var(--color-surface);
  padding: var(--space-md);
}
.console__inner {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  width: 100%;
  max-width: 1440px;
  flex-direction: column;
  row-gap: 2.5rem;
  color: var(--color-on-surface);
}
.console-banner {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  border-radius: 0.5rem;
  background-color: var(--color-surface-container-low);
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
  box-shadow: var(--shadow-xs);
}
@media (min-width: 768px) {
.console-banner {
  flex-direction: row;
  align-items: center;
}
}
.console-banner__dot {
  display: flex;
  height: 0.5rem;
  width: 0.5rem;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  border-radius: 0.75rem;
  background-color: var(--color-primary);
}
.console-banner__eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary);
}
.console-banner__sep {
  margin-left: var(--space-xs);
  margin-right: var(--space-xs);
  color: var(--color-outline-variant);
}
.text-default {
  font-family: var(--font-text);
  color: var(--color-on-surface);
}
.console-banner__actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-sm);
}
.console-banner__button {
  border-radius: 0.75rem;
  background-color: var(--color-surface-container-highest);
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 500;
  color: var(--color-on-surface);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.console-banner__button:hover {
  background-color: var(--color-surface-variant);
}
.console-overview {
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
}
.console-overview__head {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-md);
}
@media (min-width: 1024px) {
.console-overview__head {
  flex-direction: row;
  align-items: center;
}
}
.console-overview__title-block {
  display: flex;
  min-width: 0px;
  flex-direction: column;
  row-gap: 0.25rem;
}
.console-overview__crumbs {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 500;
  color: var(--color-tertiary);
}
.console-overview__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}
.console-overview__action {
  display: flex;
  height: 2.25rem;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0.75rem;
  background-color: var(--color-surface-container-low);
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-on-surface);
  box-shadow: var(--shadow-xs);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.console-overview__action:hover {
  background-color: var(--color-surface-container);
}
.console-overview__cta {
  display: flex;
  height: 2.25rem;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0.75rem;
  background-color: var(--color-primary-solid);
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-on-primary);
  box-shadow: var(--shadow-xs);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.console-overview__cta:hover {
  background-color: var(--color-primary-container);
}
.console-overview__cta:active {
  transform: scaleX(0.98) scaleY(0.98);
}
.console-metrics {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-md);
}
@media (min-width: 640px) {
.console-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.console-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.console-metrics__badge {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.75rem;
  background-color: var(--color-surface-container-low);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-on-surface-variant);
}
.console-metrics__body {
  margin-top: var(--space-md);
}
.console-metrics__unit {
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.016em;
  font-weight: 400;
  color: var(--color-tertiary);
}
.console-metrics__legend {
  margin-top: var(--space-xs);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 500;
  color: var(--color-tertiary);
}
.console-metrics__dot-warning {
  height: 0.375rem;
  width: 0.375rem;
  border-radius: 0.75rem;
  background-color: var(--color-tertiary-container);
}
.console-metrics__dot-stopped {
  height: 0.375rem;
  width: 0.375rem;
  border-radius: 0.75rem;
  background-color: var(--color-surface-variant);
}
.console-metrics__badge-accent {
  border-radius: 0.75rem;
  background-color: rgb(var(--rgb-primary-fixed) / 0.2);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
}
.console-metrics__figure-spark {
  margin-top: var(--space-md);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-sm);
}
.console-metrics__spark {
  height: 2.25rem;
  width: 6rem;
}
.chart {
  height: 100%;
  width: 100%;
  color: var(--color-primary);
}
.console-metrics__meter {
  margin-top: var(--space-sm);
  height: 0.375rem;
  width: 100%;
  overflow: hidden;
  border-radius: 0.75rem;
  background-color: var(--color-surface-container);
}
.console-metrics__fill {
  height: 100%;
  border-radius: 0.75rem;
  background-color: var(--color-on-surface-variant);
}
.console-fleet {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
.console-fleet__head {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-sm);
}
@media (min-width: 640px) {
.console-fleet__head {
  flex-direction: row;
  align-items: center;
}
}
.console-fleet__count {
  border-radius: 0.75rem;
  background-color: var(--color-surface-container-high);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-on-surface-variant);
}
.console-fleet__toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  border-radius: 0.75rem;
  background-color: var(--color-surface-container-lowest);
  padding: 0.25rem;
  box-shadow: var(--shadow-xs);
}
.console-fleet__search-field {
  position: relative;
  display: flex;
  align-items: center;
}
.console-fleet__search-icon {
  pointer-events: none;
  position: absolute;
  left: 0.75rem;
  font-size: 16px;
  color: var(--color-tertiary);
}
.console-fleet__search {
  width: 12rem;
  background-color: transparent;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 2rem;
  padding-right: 0.75rem;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--color-on-surface);
}
.console-fleet__search:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
@media (min-width: 640px) {
.console-fleet__search {
  width: 16rem;
}
}
.console-fleet__divider {
  height: 1rem;
  width: 1px;
  background-color: var(--color-surface-container);
}
.console-fleet__filter {
  border-radius: 0.75rem;
  background-color: var(--color-surface-container);
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 500;
  color: var(--color-on-surface);
}
.console-fleet__table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.console-fleet__th {
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
  font-weight: 500;
}
.console-fleet__th-narrow {
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
  font-weight: 500;
}
.console-fleet__th-end {
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
  text-align: right;
  font-weight: 500;
}
.console-fleet__body > :not([hidden]) ~ :not([hidden]) {
  border-top-width: calc(1px * calc(1 - 0));
  border-bottom-width: calc(1px * 0);
  border-color: var(--color-surface-container-low);
}
.console-fleet__body {
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.016em;
  font-weight: 400;
}
.console-fleet__row-selected {
  cursor: pointer;
  border-left-width: 2px;
  border-color: var(--color-primary);
  background-color: var(--color-surface-container-lowest);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.console-fleet__row-selected:hover {
  background-color: var(--color-band-50);
}
.console-fleet__cell {
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}
.console-fleet__name-selected {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-primary);
}
.console-fleet__star {
  font-size: 14px;
  color: var(--color-primary);
}
.console-fleet__cell-nowrap {
  white-space: nowrap;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}
.console-fleet__dot-live {
  height: 0.5rem;
  width: 0.5rem;
  flex-shrink: 0;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  border-radius: 0.75rem;
  background-color: var(--color-primary);
}
.console-fleet__ips {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.console-fleet__copy {
  color: var(--color-tertiary);
}
.console-fleet__copy:hover {
  color: var(--color-on-surface);
}
.console-fleet__ip {
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-tertiary);
}
.console-fleet__region {
  color: var(--color-on-surface);
}
.console-fleet__plan {
  display: flex;
  flex-direction: column;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.console-fleet__usage {
  display: flex;
  width: 7rem;
  flex-direction: column;
  gap: 0.25rem;
}
.console-fleet__usage-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-tertiary);
}
.console-fleet__meter {
  height: 0.25rem;
  width: 100%;
  overflow: hidden;
  border-radius: 0.75rem;
  background-color: var(--color-surface-container);
}
.console-fleet__cell-actions {
  white-space: nowrap;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
  text-align: right;
}
.console-fleet__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
}
.console-fleet__action {
  border-radius: 0.75rem;
  padding: 0.375rem;
  color: var(--color-tertiary);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.console-fleet__action:hover {
  background-color: var(--color-surface-container);
  color: var(--color-on-surface);
}
.console-fleet__row {
  cursor: pointer;
  background-color: var(--color-surface-container-lowest);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.console-fleet__row:hover {
  background-color: var(--color-band-50);
}
.label-medium {
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-on-surface);
}
.console-fleet__dot {
  height: 0.5rem;
  width: 0.5rem;
  flex-shrink: 0;
  border-radius: 0.75rem;
  background-color: var(--color-primary);
}
.console-instance {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0.5rem;
  background-color: var(--color-surface-container-lowest);
  box-shadow: var(--shadow-xs);
}
.console-instance__head {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-md);
  background-color: var(--color-surface-container-low);
  padding: var(--space-lg);
}
@media (min-width: 1024px) {
.console-instance__head {
  flex-direction: row;
  align-items: center;
}
}
.console-instance__icon-tile {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background-color: var(--color-surface-container-lowest);
  color: var(--color-primary);
  box-shadow: var(--shadow-xs);
}
.console-instance__icon {
  font-size: 24px;
}
.console-instance__node-id {
  border-radius: 0.75rem;
  background-color: var(--color-surface-container);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-on-surface);
}
.console-instance__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}
.console-instance__action {
  display: flex;
  height: 2.25rem;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0.75rem;
  background-color: var(--color-surface-container-lowest);
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-on-surface);
  box-shadow: var(--shadow-xs);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.console-instance__action:hover {
  background-color: var(--color-surface-container);
}
.console-instance__action-danger {
  display: flex;
  height: 2.25rem;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0.75rem;
  background-color: var(--color-error);
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-on-error);
  box-shadow: var(--shadow-xs);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.console-instance__action-danger:hover {
  background-color: rgb(var(--rgb-error) / 0.9);
}
.console-instance__tabs {
  display: flex;
  align-items: center;
  overflow-x: auto;
  background-color: var(--color-surface-container-lowest);
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}
.console-instance__tab-active {
  white-space: nowrap;
  border-bottom-width: 2px;
  border-color: var(--color-primary);
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-primary);
}
.console-instance__tab {
  white-space: nowrap;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-tertiary);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.console-instance__tab:hover {
  color: var(--color-on-surface);
}
.console-instance__content {
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
  background-color: var(--color-surface-container-lowest);
  padding: var(--space-lg);
}
.console-graphs {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-md);
}
@media (min-width: 768px) {
.console-graphs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1280px) {
.console-graphs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.console-graphs__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 0.5rem;
  background-color: var(--color-surface-container-low);
  padding: var(--space-md);
}
.console-graphs__value-accent {
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
}
.console-graphs__plot {
  display: flex;
  height: 7rem;
  width: 100%;
  align-items: flex-end;
}
.console-graphs__axis {
  margin-top: var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-tertiary);
}
.console-graphs__value {
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-on-surface);
}
.console-graphs__chart-soft {
  height: 100%;
  width: 100%;
  color: var(--color-on-surface-variant);
}
.console-graphs__chart-strong {
  height: 100%;
  width: 100%;
  color: var(--color-on-surface);
}
.console-policy {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-md);
}
@media (min-width: 1024px) {
.console-policy {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.console-policy__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  row-gap: 1rem;
  border-radius: 0.5rem;
  background-color: var(--color-surface-container-low);
  padding: var(--space-lg);
}
.console-policy__card-head {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.console-policy__badge {
  border-radius: 0.75rem;
  background-color: rgb(var(--rgb-primary-fixed) / 0.3);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-on-primary-fixed-variant);
}
.console-policy__schedule {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  border-radius: 0.25rem;
  background-color: var(--color-surface-container-lowest);
  padding: var(--space-md);
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.console-policy__time {
  font-family: var(--font-text);
  font-variant-numeric: tabular-nums;
  color: var(--color-on-surface);
}
.console-policy__toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-xs);
}
.console-policy__switch {
  position: relative;
  height: 1.5rem;
  width: 2.5rem;
  border-radius: 0.75rem;
  background-color: var(--color-primary-solid);
  padding: 0.125rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.console-policy__switch:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.console-policy__switch-knob {
  margin-left: auto;
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 0.75rem;
  background-color: var(--color-on-primary);
  box-shadow: var(--shadow-xs);
}
.console-policy__card-wide {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  row-gap: 1rem;
  border-radius: 0.5rem;
  background-color: var(--color-surface-container-low);
  padding: var(--space-lg);
}
@media (min-width: 1024px) {
.console-policy__card-wide {
  grid-column: span 2 / span 2;
}
}
.console-policy__add {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-primary);
}
.console-policy__add:hover {
  -webkit-text-decoration-line: underline;
  text-decoration-line: underline;
}
.console-policy__table-wrap {
  overflow-x: auto;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container-lowest);
}
.console-policy__head-row {
  border-bottom-width: 1px;
  border-color: var(--color-surface-container-low);
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-tertiary);
}
.console-policy__th {
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.console-policy__th-end {
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  text-align: right;
}
.console-policy__body > :not([hidden]) ~ :not([hidden]) {
  border-top-width: calc(1px * calc(1 - 0));
  border-bottom-width: calc(1px * 0);
  border-color: var(--color-surface-container-low);
}
.console-policy__body {
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.console-policy__cell-port {
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-weight: 500;
  color: var(--color-on-surface);
}
.console-policy__cell {
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  color: var(--color-tertiary);
}
.console-policy__allow {
  color: var(--color-primary);
}
.console-policy__cell-label {
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-family: var(--font-text);
  color: var(--color-on-surface);
}
.console-policy__remove {
  cursor: pointer;
  font-size: 16px;
  color: var(--color-tertiary);
}
.console-policy__remove:hover {
  color: var(--color-error);
}
.console-policy__footnote {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--color-tertiary);
}
.console-policy__value {
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-on-surface);
}
.arch-banner__badge-dedicated {
  border-radius: 0.75rem;
  background-color: var(--color-success-badge);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 500;
  color: var(--color-on-success-badge);
}
.price-paid {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-on-surface);
}
.os__option-custom-selected {
  border-radius: 0.5rem;
  border-width: 1px;
  border-style: dashed;
  border-color: var(--color-tertiary-fixed-dim);
  background-color: var(--color-surface-container-low);
  padding: var(--space-md);
  text-align: left;
  box-shadow: 0 0 0 0px #fff, 0 0 0 calc(2px + 0px) var(--color-primary);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.os__option-custom-selected:hover {
  background-color: var(--color-surface-container);
}
.categories__pill-all {
  display: flex;
  height: 2rem;
  flex-shrink: 0;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0.75rem;
  background-color: var(--color-surface-container-low);
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-on-surface-variant);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.categories__pill-active {
  height: 2rem;
  flex-shrink: 0;
  border-radius: 0.75rem;
  background-color: var(--color-inverse-surface);
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-inverse-on-surface);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
/* The chosen category keeps its fill on hover (its light label would vanish on the grey hover
   fill of the others); it only eases, like the other inverse button (.spotlights__cta-dark). */
.categories__pill-active:hover {
  opacity: 0.9;
}
.sizer__stack-deselected {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  border-radius: 0.5rem;
  background-color: var(--color-surface-container-low);
  padding: var(--space-md);
  text-align: left;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.sizer__stack-selected-hover {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  border-radius: 0.5rem;
  background-color: var(--color-surface-container-high);
  padding: var(--space-md);
  text-align: left;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.sizer__stack-selected-hover:hover {
  background-color: var(--color-surface-container);
}
.sizer__tier-active-hover {
  border-radius: 0.25rem;
  background-color: var(--color-surface-selected);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 600;
  color: var(--color-on-surface);
  box-shadow: var(--shadow-xs);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.sizer__tier-active-hover:hover {
  color: var(--color-on-surface);
}
.sizer__tier-plain {
  border-radius: 0.25rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-on-surface-variant);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.request-dialog {
  margin: 0px;
  margin-top: auto;
  max-height: 92dvh;
  width: 100%;
  max-width: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  background-color: var(--color-surface-container-lowest);
  color: var(--color-on-surface);
  box-shadow: var(--shadow-dialog);
}
.request-dialog::backdrop {
  background-color: rgb(var(--rgb-scrim, 47 49 50) / 0.4);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
@media (min-width: 640px) {
.request-dialog {
  margin: auto;
  max-height: calc(100dvh - 4rem);
  max-width: 40rem;
  border-radius: 0.5rem;
}
}
.request-dialog__header {
  position: sticky;
  top: 0px;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  background-color: var(--color-surface-container-lowest);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-bottom: 1rem;
  padding-top: 1.5rem;
}
@media (min-width: 640px) {
.request-dialog__header {
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 2rem;
}
}
.request-dialog__title {
  margin-top: 0.25rem;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 30px;
  letter-spacing: 0.009em;
  font-weight: 600;
  color: var(--color-on-surface);
}
.request-dialog__intro {
  margin-top: 0.25rem;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.016em;
  font-weight: 400;
  color: var(--color-tertiary);
}
.request-dialog__close {
  margin-right: -0.5rem;
  display: flex;
  height: 2.25rem;
  width: 2.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  color: var(--color-on-surface-variant);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.request-dialog__close:hover {
  background-color: var(--color-surface-container);
}
.request-form {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-bottom: 1.5rem;
}
@media (min-width: 640px) {
.request-form {
  padding-left: 2rem;
  padding-right: 2rem;
  padding-bottom: 2rem;
}
}
.request-form__selection {
  margin-bottom: 1.5rem;
  margin-top: 0.25rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border-radius: 0.5rem;
  background-color: var(--color-surface-container-low);
  padding: 1rem;
}
.request-form__selection-icon {
  font-size: 20px;
  color: var(--color-primary);
}
.request-form__selection-text {
  min-width: 0px;
  flex: 1 1 0%;
}
.request-form__selection-label {
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-tertiary);
}
.request-form__item {
  margin-top: 0.25rem;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 600;
  color: var(--color-on-surface);
}
.request-form__details {
  margin-top: 0.125rem;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--color-tertiary);
}
.request-form__price {
  white-space: nowrap;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-on-surface);
}
.request-form__fields {
  display: grid;
  gap: 1rem;
}
@media (min-width: 640px) {
.request-form__fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 640px) {
.request-form__field-wide {
  grid-column: span 2 / span 2;
}
}
.request-form__label {
  display: block;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-on-surface);
}
.request-form__input {
  margin-top: 0.375rem;
  display: block;
  height: 2.75rem;
  width: 100%;
  border-radius: 0.25rem;
  border-width: 1px;
  border-color: var(--color-field-edge);
  background-color: var(--color-surface-container-low);
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.016em;
  font-weight: 400;
  color: var(--color-on-surface);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.request-form__input::placeholder {
  color: var(--color-tertiary);
}
.request-form__input:focus {
  border-color: var(--color-primary-container);
  background-color: var(--color-surface-container-lowest);
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 0px #fff, 0 0 0 calc(4px + 0px) rgb(var(--rgb-primary-fixed) / 0.6);
}
.request-form__input[aria-invalid="true"] {
  border-color: var(--color-error);
  background-color: var(--color-surface-container-lowest);
}
.request-form__textarea {
  margin-top: 0.375rem;
  display: block;
  min-height: 8rem;
  width: 100%;
  resize: vertical;
  border-radius: 0.25rem;
  border-width: 1px;
  border-color: var(--color-field-edge);
  background-color: var(--color-surface-container-low);
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.016em;
  font-weight: 400;
  color: var(--color-on-surface);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.request-form__textarea::placeholder {
  color: var(--color-tertiary);
}
.request-form__textarea:focus {
  border-color: var(--color-primary-container);
  background-color: var(--color-surface-container-lowest);
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 0px #fff, 0 0 0 calc(4px + 0px) rgb(var(--rgb-primary-fixed) / 0.6);
}
.request-form__textarea[aria-invalid="true"] {
  border-color: var(--color-error);
  background-color: var(--color-surface-container-lowest);
}
/* On touch screens text fields use 16px type: iPhone Safari zooms the whole page into a field set
   smaller than that, and stays zoomed. The hostname field and the console search keep the heights
   of their rows (18px, 24px), so nothing around the fields moves. */
@media (pointer: coarse) {
.request-form__input,
.request-form__textarea,
.get-started__input,
.app-search__input,
.console-fleet__search {
  font-size: 16px;
}
.get-started__input {
  height: 1.125rem;
}
.console-fleet__search {
  height: 1.5rem;
}
}
.request-form__error {
  margin-top: 0.375rem;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--color-error);
}
.request-form__group {
  margin-top: 1.75rem;
}
.request-form__hint {
  margin-top: 0.125rem;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--color-tertiary);
}
.request-form__service-group {
  margin-top: 1rem;
}
.request-form__group-label {
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-tertiary);
}
.request-form__chips {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.request-form__chip {
  display: inline-flex;
  height: 2.25rem;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.25rem;
  border-width: 1px;
  border-color: var(--color-surface-container);
  background-color: var(--color-surface-container-lowest);
  padding-left: 0.625rem;
  padding-right: 0.875rem;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-on-surface-variant);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.request-form__chip:hover {
  border-color: var(--color-outline-variant);
}
.request-form__chip:has(:checked) {
  border-color: var(--color-primary-container);
  background-color: rgb(var(--rgb-primary-fixed) / 0.4);
  color: var(--color-on-surface);
}
.request-form__check {
  height: 1rem;
  width: 1rem;
  flex-shrink: 0;
  accent-color: var(--color-primary-container);
}
.request-form__optional {
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.016em;
  font-weight: 400;
  color: var(--color-tertiary);
}
.request-form__alert {
  margin-top: 1.5rem;
  border-radius: 0.25rem;
  background-color: var(--color-error-container);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--color-on-error-container);
}
.request-form__footer {
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column-reverse;
  gap: 1rem;
}
@media (min-width: 640px) {
.request-form__footer {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
}
.request-form__phone {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--color-tertiary);
}
.request-form__phone-link {
  color: var(--color-primary);
}
.request-form__phone-link:hover {
  -webkit-text-decoration-line: underline;
  text-decoration-line: underline;
}
.request-form__submit {
  display: inline-flex;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  background-color: var(--color-primary-container);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-on-primary-container);
  box-shadow: var(--shadow-md);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.request-form__submit:hover {
  background-color: var(--color-primary-solid);
}
.request-form__submit:disabled {
  cursor: wait;
  opacity: 0.6;
}
.request-done {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
  text-align: center;
}
@media (min-width: 640px) {
.request-done {
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
}
.request-done__check {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  height: 3.5rem;
  width: 3.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background-color: var(--color-success-container);
  color: var(--color-success);
}
.request-done__check-icon {
  font-size: 30px;
}
.request-done__title {
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 30px;
  letter-spacing: 0.009em;
  font-weight: 600;
  color: var(--color-on-surface);
}
.request-done__title:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.request-done__text {
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.5rem;
  max-width: 28rem;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.016em;
  font-weight: 400;
  color: var(--color-tertiary);
}
.request-done__reference {
  margin-top: 1rem;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--color-tertiary);
}
.request-done__notice {
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
  max-width: 28rem;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container-low);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--color-on-surface-variant);
}
.request-done__button {
  margin-top: 2rem;
  display: inline-flex;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background-color: var(--color-surface-container);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-on-surface);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.request-done__button:hover {
  background-color: var(--color-surface-variant);
}
/* FAQ (includes/faq.php): questions that open like the phone menu's accordions */
.faq {
  margin-left: auto;
  margin-right: auto;
  margin-top: 3rem;
  max-width: 48rem;
  border-top-width: 1px;
  border-color: var(--color-surface-container);
}
.faq__item {
  border-bottom-width: 1px;
  border-color: var(--color-surface-container);
}
.faq__question {
  display: flex;
  cursor: pointer;
  list-style-type: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 24px;
  letter-spacing: 0.012em;
  font-weight: 600;
  color: var(--color-on-surface);
}
.faq__question::-webkit-details-marker {
  display: none;
}
.faq__chevron {
  flex-shrink: 0;
  color: var(--color-tertiary);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.faq__item[open] .faq__chevron {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
.faq__chevron {
  transition-property: none;
}
}
.faq__answer {
  max-width: 42rem;
  padding-bottom: 1.25rem;
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 24px;
  letter-spacing: -0.022em;
  font-weight: 400;
  color: var(--color-tertiary);
}
.faq__answer a {
  color: var(--color-primary);
}
.faq__answer a:hover {
  -webkit-text-decoration-line: underline;
  text-decoration-line: underline;
}
/* Header on small phones (375px): the buttons keep their size and "Deploy Server" stays on one
   line. Where there is room, nothing changes. Below 640px (where Sign In moves into the
   menu) the header and the phone menu use the page's 16px side margin, so the logo and
   all three buttons fit down to 360px. */
.site-header__cta,
.site-header__avatar,
.site-header__menu-button {
  flex-shrink: 0;
  white-space: nowrap;
}
/* About and policy pages (includes/info-page.php) */
.info-page {
  margin-left: auto;
  margin-right: auto;
  margin-top: 3rem;
  max-width: 48rem;
}
.info-page__heading {
  margin-top: 2rem;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 24px;
  letter-spacing: 0.012em;
  font-weight: 600;
  color: var(--color-on-surface);
}
.info-page__heading:first-child {
  margin-top: 0;
}
.info-page__text {
  margin-top: 0.75rem;
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 24px;
  letter-spacing: -0.022em;
  font-weight: 400;
  color: var(--color-tertiary);
}
.info-page__text a {
  color: var(--color-primary);
}
.info-page__details {
  margin-top: 0.75rem;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  column-gap: 1.5rem;
}
.info-page__details dd {
  margin-top: 0;
  overflow-wrap: anywhere;
}
.info-page__actions {
  margin-top: 2rem;
}
/* Product pages (includes/product-page.php): the homepage's hero and sections, with the features
   laid out like the console captions, the specifications as on the VPS page's bare-metal card,
   and the plan grid from Web Hosting. */
.product-features {
  margin-top: 3rem;
  display: grid;
  gap: 2rem;
}
@media (min-width: 640px) {
.product-features {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 768px) {
.product-features {
  margin-top: 4rem;
}
}
@media (min-width: 1024px) {
.product-features {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.product-features__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.product-features__icon {
  font-size: 22px;
  color: var(--color-primary);
}
.product-specs {
  margin-top: 3rem;
  display: grid;
  gap: var(--space-md);
}
@media (min-width: 640px) {
.product-specs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 768px) {
.product-specs {
  margin-top: 4rem;
}
}
.product-plan__billing {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
}
.product-plans {
  margin-top: 2rem;
}
.product-plan__billing + .product-plans {
  margin-top: 1.5rem;
}
.product-plan__billing .plans__controls {
  align-self: auto;
  justify-content: center;
}
/* Dedicated servers: five-figure prices need two cards to a row until 1280px. */
@media (min-width: 1024px) {
.product-plans-servers {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1280px) {
.product-plans-servers {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.product-cta {
  margin-top: 5rem;
}
@media (min-width: 768px) {
.product-cta {
  margin-top: 7rem;
}
}
/* Plan cards (includes/plan-card.php): a price given on request, the links to the other hosting
   products under a grid, and a billing switch that wraps when its periods don't fit on one row. */
.plans__billing {
  flex-wrap: wrap;
  justify-content: center;
}
.plans__on-request {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 52px;
  letter-spacing: 0.004em;
  font-weight: 600;
  color: var(--color-on-surface);
}
.plans__more {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.5rem;
}
@media (min-width: 768px) {
.plans__more {
  margin-top: 3rem;
}
}
.product-actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
/* The configurator's billing line (vps-hosting.php): servers are billed by the hour and priced
   per 30 days, so there is one period instead of a switch. It sits in the switch's track. */
.billing__term {
  border-radius: 0.25rem;
  background-color: var(--color-surface-container-low);
  padding: 0.625rem 0.75rem;
  text-align: center;
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.008em;
  font-weight: 500;
  color: var(--color-on-surface-variant);
}
/* The VPS page's processor (vps-hosting.php): one card, the width of the row. */
.cpu__options-single {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
.cpu__options-single {
  grid-template-columns: minmax(0, 1fr);
}
}

/* ── Accounts ─────────────────────────────────────────────────────────────────────────────
   The signed-in customer's initials in the header, the profile panel that slides in from the
   right, and the Sign in / Create account step of the request dialog. Everything here is drawn
   by assets/js/account.js, so none of it is in the page a search engine sees. */
.site-header__avatar-initials {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.006em;
  font-weight: 600;
  color: var(--color-on-primary);
}
.account-panel {
  position: fixed;
  inset: 0px;
  z-index: 60;
}
.account-panel__scrim {
  position: absolute;
  inset: 0px;
  background-color: rgb(var(--rgb-scrim) / 0.4);
  opacity: 0;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
.account-panel[data-open="true"] .account-panel__scrim {
  opacity: 1;
}
.account-panel__sheet {
  position: absolute;
  right: 0px;
  top: 0px;
  bottom: 0px;
  display: flex;
  width: 100%;
  max-width: 22rem;
  flex-direction: column;
  gap: var(--space-lg);
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--color-surface-container-lowest);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sheet);
  transform: translateX(100%);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 220ms;
}
.account-panel[data-open="true"] .account-panel__sheet {
  transform: translateX(0);
}
.account-panel__sheet:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.account-panel__sheet,
.account-panel__scrim {
  transition-property: none;
}
}
.account-panel__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.account-panel__avatar {
  display: flex;
  height: 2.75rem;
  width: 2.75rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background-color: var(--color-primary-solid);
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.006em;
  color: var(--color-on-primary);
}
.account-panel__identity {
  min-width: 0px;
  flex: 1 1 0%;
}
.account-panel__name {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.014em;
  font-weight: 600;
  color: var(--color-on-surface);
  overflow-wrap: anywhere;
}
.account-panel__caption {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  color: var(--color-tertiary);
}
.account-panel__rows {
  display: grid;
  gap: var(--space-md);
}
.account-panel__row {
  display: grid;
  gap: 0.125rem;
  border-top-width: 1px;
  border-color: var(--color-surface-container);
  padding-top: var(--space-md);
}
.account-panel__label {
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-tertiary);
}
.account-panel__value {
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.016em;
  color: var(--color-on-surface);
  overflow-wrap: anywhere;
}
.account-panel__id {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.account-panel__id-text {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.02em;
}
.account-panel__copy {
  display: inline-flex;
  height: 1.75rem;
  flex-shrink: 0;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container-low);
  padding-left: 0.5rem;
  padding-right: 0.625rem;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--color-on-surface-variant);
  transition-property: color, background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.account-panel__copy:hover {
  background-color: var(--color-surface-container);
  color: var(--color-on-surface);
}
.account-panel__note {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  color: var(--color-tertiary);
}
.account-panel__signout {
  margin-top: auto;
  display: flex;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background-color: var(--color-surface-container-low);
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-on-surface);
  transition-property: background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.account-panel__signout:hover {
  background-color: var(--color-surface-container);
}
.request-auth__switch {
  display: inline-flex;
  margin-bottom: var(--space-lg);
  border-radius: 0.75rem;
  background-color: var(--color-surface-container-high);
  padding: 0.25rem;
}
.request-auth__option,
.request-auth__option-active {
  border-radius: 0.5rem;
  padding: 0.375rem 0.875rem;
  font-family: var(--font-text);
  font-size: 13px;
  line-height: 18px;
  letter-spacing: -0.012em;
  font-weight: 500;
  color: var(--color-on-surface-variant);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.request-auth__option-active {
  background-color: var(--color-surface-selected);
  font-weight: 600;
  color: var(--color-on-surface);
  box-shadow: var(--shadow-xs);
}
.request-auth__option:hover {
  color: var(--color-on-surface);
}
.request-auth__note {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  color: var(--color-tertiary);
}
.request-form__account {
  margin-bottom: var(--space-md);
  display: inline-flex;
  align-items: center;
  border-radius: 0.25rem;
  background-color: var(--color-surface-container-low);
  padding: 0.375rem 0.625rem;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  color: var(--color-on-surface-variant);
}
.request-form__service-name {
  margin-top: 0.375rem;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-on-surface);
}

/* A plan grid with only two cards (the VDS sizes on the Pricing page): two columns instead of
   four, and no wider than the four-column cards beside them. */
@media (min-width: 1024px) {
.plans__grid-pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 38rem;
}
}

/* ── Pricing page (pricing.php) ──────────────────────────────────────────────────────────
   Scoped to .pricing-page: the service pages share the billing switch and the plan grid, and
   they stay exactly as they are. */

/* The page opens on its heading, and each category on its name: no label above either. */
.pricing-page .home-hero__title,
.pricing-page .section-title-compact {
  margin-top: 0;
}

/* The page's rhythm. The hero is compact and ends on its text, the category links right under
   it. Each category is a band of its own (white, then grey) with 3.5rem a side on
   desktop instead of the site's 8rem, so consecutive categories read as one catalogue rather
   than as separate pages; the FAQ at the foot follows the same rhythm. */
.pricing-hero {
  padding-top: 3rem;
  padding-bottom: 1.25rem;
}
@media (min-width: 768px) {
.pricing-hero {
  padding-top: 4rem;
  padding-bottom: 1.5rem;
}
}
.pricing-page :is(.section-white, .section-plain) {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
@media (min-width: 768px) {
.pricing-page :is(.section-white, .section-plain) {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
}
@media (min-width: 1024px) {
.pricing-page :is(.section-white, .section-plain) {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
}
/* The links under each grid sit closer to its cards. */
.pricing-page .plans__more {
  margin-top: 1.75rem;
}
@media (min-width: 768px) {
.pricing-page .plans__more {
  margin-top: 2rem;
}
}

/* The category links, right under the page's heading and on the same ground (no band or hairline
   between them: the band is the colour the hero's light fades to), with a hairline below where the
   prices begin.
   The links are white pills with a hairline edge and the faintest shadow, never more than four to
   a row so the rows come out even. They only jump to a category, so none is ever shown as
   selected (the user's call): under the pointer the edge and shadow deepen, a press dips the pill,
   and keyboard focus shows a ring. */
.pricing-nav {
  --nav-pill-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 2px 6px -3px rgb(0 0 0 / 0.08);
  --nav-pill-shadow-hover: 0 1px 2px rgb(0 0 0 / 0.05), 0 6px 14px -6px rgb(0 0 0 / 0.16);
  border-bottom-width: 1px;
  border-color: var(--color-surface-container);
  background-color: var(--amb-seam);
  padding: 1rem var(--gutter-mobile) 1.75rem;
}
:root[data-theme='dark'] .pricing-nav {
  --nav-pill-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
  --nav-pill-shadow-hover: 0 1px 2px rgb(0 0 0 / 0.45), 0 8px 18px -8px rgb(0 0 0 / 0.7);
}
@media (min-width: 768px) {
.pricing-nav {
  padding: 1rem var(--margin) 2rem;
}
}
.pricing-nav__list {
  display: flex;
  max-width: 44rem;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.pricing-nav__link {
  display: inline-flex;
  height: 2.5rem;
  align-items: center;
  border-radius: 9999px;
  border: 1px solid var(--color-border-soft);
  background-color: var(--color-surface-container-lowest);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--color-on-surface);
  white-space: nowrap;
  box-shadow: var(--nav-pill-shadow);
  transition-property: color, background-color, border-color, box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
/* Phones: two to a row, every row (a 22rem list fits any two of them, never three); from 680px
   four fit, so 4 + 4 as on tablets. A little tighter inside below 640px, so a 360px screen still
   takes two. */
@media (max-width: 679.98px) {
.pricing-nav__list {
  max-width: 22rem;
}
}
@media (min-width: 640px) {
.pricing-nav__link {
  padding-left: 1rem;
  padding-right: 1rem;
}
}
/* Desktop: a little larger, with room around each. */
@media (min-width: 1024px) {
.pricing-nav__list {
  max-width: 48rem;
  gap: 0.625rem;
}
.pricing-nav__link {
  height: 2.625rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.012em;
}
}
/* Hover only where there is a pointer: on a touch screen it would stay on the tapped link. */
@media (hover: hover) {
.pricing-nav__link:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--nav-pill-shadow-hover);
}
}
.pricing-nav__link:active {
  background-color: var(--color-surface-container-low);
  box-shadow: none;
}
.pricing-nav__link:focus-visible {
  outline: 2px solid var(--color-primary-container);
  outline-offset: 2px;
}

/* Scrolling to a category glides, unless the visitor has asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
:root:has(.pricing-page) {
  scroll-behavior: smooth;
}
}

/* A link scrolls to its category's heading. The fixed header is already kept clear
   (scroll-padding-top on the page); this leaves 2rem of room below it, so the heading, the
   cards and their buttons come into view together, without the section's top padding above. */
.pricing-page .plans__head {
  scroll-margin-top: 2rem;
}
@media (min-width: 768px) {
.pricing-page .plans__head {
  flex-wrap: wrap;
  row-gap: var(--space-md);
}
}

/* The plan cards, one treatment in every category, on the white bands as on the grey: 1.25rem
   apart and 1.5rem inside, in a column a little wider than the site's 1200px (78rem). A hairline edge
   and a soft lift (the edge is a shadow ring, not a border, so no card changes size); the
   recommended plan keeps its blue bar, with a fine blue edge and the faintest blue at its top. */
.pricing-page {
  --plan-gap: 1.25rem;
  --plan-shadow: var(--shadow-card);
  --plan-shadow-hover: 0 0 0 1px rgb(0 0 0 / 0.11), 0 2px 4px 0 rgb(0 0 0 / 0.04), 0 22px 40px -18px rgb(0 0 0 / 0.22);
  --plan-ring-featured: rgb(0 113 227 / 0.38);
  --plan-shadow-featured: 0 0 0 1px var(--plan-ring-featured), 0 1px 2px 0 rgb(0 0 0 / 0.04), 0 18px 40px -18px rgb(0 56 140 / 0.3);
  --plan-shadow-featured-hover: 0 0 0 1px var(--plan-ring-featured), 0 2px 4px 0 rgb(0 0 0 / 0.05), 0 26px 48px -20px rgb(0 56 140 / 0.36);
  --plan-tint-featured: rgb(0 113 227 / 0.045);
}
:root[data-theme='dark'] .pricing-page {
  --plan-shadow-hover: 0 0 0 1px rgb(255 255 255 / 0.15), 0 2px 4px 0 rgb(0 0 0 / 0.4), 0 24px 44px -18px rgb(0 0 0 / 0.8);
  --plan-ring-featured: rgb(79 157 246 / 0.5);
  --plan-shadow-featured: 0 0 0 1px var(--plan-ring-featured), 0 1px 2px 0 rgb(0 0 0 / 0.35), 0 20px 40px -18px rgb(0 0 0 / 0.75);
  --plan-shadow-featured-hover: 0 0 0 1px var(--plan-ring-featured), 0 2px 4px 0 rgb(0 0 0 / 0.4), 0 28px 52px -20px rgb(0 0 0 / 0.85);
  --plan-tint-featured: rgb(79 157 246 / 0.07);
}
.pricing-page section > .container-narrow {
  max-width: 78rem;
}
.pricing-page .plans__grid {
  gap: var(--plan-gap);
}
.pricing-page .card-column,
.pricing-page .plans__card-featured {
  border-radius: 1rem;
  box-shadow: var(--plan-shadow);
}
.pricing-page .plans__card-featured {
  background-image: linear-gradient(180deg, var(--plan-tint-featured), transparent 10rem);
  box-shadow: var(--plan-shadow-featured);
}
.pricing-page .plans__featured-bar {
  height: 3px;
}
/* The recommended card's top line (label and badge) is as tall as the other cards' (one 1.5rem
   line), so its name, price and features sit level with theirs. */
.pricing-page .plans__card-featured > div > .split {
  min-height: 1.5rem;
}
/* The price: 2.75rem, and smaller on a narrow card (1024-1279px screens), so the longest ones
   ('₹3,859.20', 'From ₹446.40') always fit on one line inside the card. A server's '/ 30 days'
   sits under its price in every card of that grid, so the cards of a row line up. */
.pricing-page .plans__price-row {
  container-type: inline-size;
}
.pricing-page .plans__price-row .display-text {
  font-size: min(2.75rem, 19.5cqi);
}
.pricing-page .plans__grid:has(.plans__desc:not([data-billing-note])) .plans__price-row > .note:last-child {
  display: block;
}
/* The buttons: the others quiet with a hairline edge, the recommended plan's the blue one. */
.pricing-page .plans__select {
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--color-border-soft);
}
@media (hover: hover) {
.pricing-page .plans__select:hover {
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
}
}
.pricing-page .plans__select-primary {
  font-weight: 600;
  box-shadow: var(--shadow-cta);
}
/* Under the pointer a card rises a few pixels and its edge and shadow deepen; it settles back
   when the pointer moves on. The recommended card rises the same way and keeps its blue edge, so
   the two never look alike. Only a transform and a shadow change: nothing moves around it. Not
   on touch screens; with reduced motion only the shadow changes. A card whose button has
   keyboard focus looks the same. */
.pricing-page .card-column,
.pricing-page .plans__card-featured {
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (hover: hover) and (pointer: fine) {
.pricing-page .card-column:hover {
  transform: translateY(-4px);
  box-shadow: var(--plan-shadow-hover);
}
.pricing-page .plans__card-featured:hover {
  transform: translateY(-4px);
  box-shadow: var(--plan-shadow-featured-hover);
}
}
.pricing-page .card-column:has(:focus-visible) {
  transform: translateY(-4px);
  box-shadow: var(--plan-shadow-hover);
}
.pricing-page .plans__card-featured:has(:focus-visible) {
  transform: translateY(-4px);
  box-shadow: var(--plan-shadow-featured-hover);
}
@media (prefers-reduced-motion: reduce) {
.pricing-page .card-column,
.pricing-page .plans__card-featured {
  transition-property: box-shadow;
}
.pricing-page .card-column:is(:hover, :has(:focus-visible)),
.pricing-page .plans__card-featured:is(:hover, :has(:focus-visible)) {
  transform: none;
}
}

/* Above the two VDS cards the heading is no wider than they are, so its control sits over them
   rather than at the far edge of the page. */
@media (min-width: 1024px) {
.pricing-page .plans__head-pair {
  max-width: 38rem;
}
}

/* The billing period control, the same in every category: each period is a cell of its own,
   the chosen one white and raised. It stays on one row; where there's no room beside the
   heading it moves below it rather than breaking the row. */
.pricing-page .plans__billing {
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: 0.25rem;
}
.pricing-page .plans__billing-option,
.pricing-page .plans__billing-option-active {
  border-radius: 0.5rem;
  padding: 0.4375rem 0.875rem;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  text-align: center;
  white-space: nowrap;
}
.pricing-page .plans__billing-option {
  background-color: var(--color-fill-soft);
  color: var(--color-on-surface-variant);
  transition-property: color, background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.pricing-page .plans__billing-option:hover {
  background-color: var(--color-fill-hover);
  color: var(--color-on-surface);
}
.pricing-page .plans__billing-option-active {
  font-weight: 600;
}
.pricing-page .currency__value {
  border-radius: 0.5rem;
  padding: 0.4375rem 0.625rem 0.4375rem 0.875rem;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: 600;
}
.pricing-page .currency__chevron {
  font-size: 16px;
}
.pricing-page .plans__controls {
  width: 100%;
}
@media (min-width: 640px) {
.pricing-page .plans__controls {
  width: auto;
}
}
.pricing-page .plans__billing-option:focus-visible,
.pricing-page .plans__billing-option-active:focus-visible {
  outline: 2px solid var(--color-primary-container);
  outline-offset: 1px;
}

/* On a phone the control spans the width, its periods in equal cells: one row for up to four,
   three to a row for five or more (Reseller). The fixed ones (VPS, VDS, dedicated servers: one
   billing basis, nothing to switch) keep their own width. */
.pricing-page .plans__billing:not(.plans__billing-fixed) {
  display: grid;
  width: 100%;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}
.pricing-page .plans__billing:not(.plans__billing-fixed):has(> :nth-child(5)) {
  grid-auto-flow: row;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (min-width: 640px) {
.pricing-page .plans__billing:not(.plans__billing-fixed) {
  display: inline-flex;
  width: auto;
}
}

/* The link to the Pricing page beside the VPS comparison's heading: under it on phones. */
.compare__link {
  margin-top: var(--space-sm);
}
@media (min-width: 768px) {
.compare__link {
  margin-top: 0;
}
}
/* Switching theme (assets/js/theme.js): one quick cross-fade of the whole page, or where View
   Transitions aren't supported, every colour easing at once. Never on page load; never with
   reduced motion (the script then switches instantly). */
/* The cross-fade never holds up the page: clicks and taps pass straight through it. */
::view-transition {
  pointer-events: none;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 200ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
/* During the cross-fade the page is shown as captured images of itself, and Safari draws those
   without backdrop-filter: the header kept only its see-through tint, and the text under it showed.
   While a transition runs, the header's tint sits on the page colour instead, which is how the
   frosted header looks over the plain page. theme.js marks its fades with .theme-fading, so this
   holds in browsers that run view transitions without knowing :active-view-transition (the :is()
   list skips a selector it can't read). */
:root:is(.theme-fading, :active-view-transition) .site-header {
  background-color: var(--color-surface);
  background-image: linear-gradient(var(--color-header), var(--color-header));
}
html.theme-changing,
html.theme-changing *,
html.theme-changing *::before,
html.theme-changing *::after {
  transition-property: background-color, border-color, color, fill, stroke, box-shadow, outline-color;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
/* ── Homepage rhythm (index.php, main.site-main--home) ──────────────────────────────────────────
   The homepage's sections sit closer than the site's default (8rem a side on desktop): 5rem a side,
   and 3rem from each section's heading to its content. Other pages keep the default spacing. */
.site-main--home :is(.section-white, .section-plain, .trust) {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.site-main--home :is(.platform__paths, .console-preview__window, .home-apps__list, .os-picker__list) {
  margin-top: 2.5rem;
}
@media (min-width: 768px) {
.site-main--home :is(.section-white, .section-plain, .trust) {
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}
.site-main--home :is(.platform__paths, .console-preview__window, .home-apps__list, .os-picker__list) {
  margin-top: 3rem;
}
}
@media (min-width: 1024px) {
.site-main--home :is(.section-white, .section-plain, .trust) {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
}
/* Locations on the homepage: the centred heading, and the globe right under it. The picture's haze
   fades to white at its edges: by day it multiplies into the section (white leaves the page as it
   is), after hours it is shown in its inverse (hues kept) and screened onto the dark page (black
   leaves it as it is), so in both themes it melts into the page with no edge. Four rings orbit it
   like an atom's, once the pointer has been over the globe (includes/globe-orbits.php,
   assets/js/globe-orbits.js). */
.network-globe__figure {
  --orbit-line: #86afe6;
  --orbit-line-opacity: 0.75;
  --orbit-line-near: #ffffff;
  --orbit-line-near-opacity: 0.55;
  --orbit-ball-hi: #b3d7ff;
  --orbit-ball-mid: #3a86f0;
  --orbit-ball-lo: #1a55c4;
  position: relative;
  margin: 1.5rem auto 0;
  max-width: 62.5rem;
}
:root[data-theme='dark'] .network-globe__figure {
  --orbit-line: #4f86d8;
  --orbit-line-opacity: 0.6;
  --orbit-line-near: #9cc6ff;
  --orbit-line-near-opacity: 0.45;
  --orbit-ball-hi: #a6d2ff;
  --orbit-ball-mid: #3d8cf6;
  --orbit-ball-lo: #1d52bd;
}
@media (min-width: 768px) {
.network-globe__figure {
  margin-top: 2rem;
}
}
/* Reached from the hero's Data Centers link: the page glides here (unless the visitor has asked
   for less motion) and stops with the heading 1.5rem under the header, so the globe is in view. */
@media (prefers-reduced-motion: no-preference) {
:root:has(.site-main--home) {
  scroll-behavior: smooth;
}
}
.network-globe {
  scroll-margin-top: -2rem;
}
@media (min-width: 768px) {
.network-globe {
  scroll-margin-top: -3rem;
}
}
@media (min-width: 1024px) {
.network-globe {
  scroll-margin-top: -3.5rem;
}
}
.network-globe__img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}
:root[data-theme='dark'] .network-globe__img {
  mix-blend-mode: screen;
  filter: invert(1) hue-rotate(180deg);
}
.globe-orbits {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.globe-orbits__path {
  fill: none;
  stroke: var(--orbit-line);
  stroke-opacity: var(--orbit-line-opacity);
  stroke-width: 1.3;
}
/* the near half of each ring crosses the globe (and its cards): lighter, so the map stays clear */
.globe-orbits__path--near {
  stroke: var(--orbit-line-near);
  stroke-opacity: var(--orbit-line-near-opacity);
}
.globe-orbits__ball-hi {
  stop-color: var(--orbit-ball-hi);
}
.globe-orbits__ball-mid {
  stop-color: var(--orbit-ball-mid);
}
.globe-orbits__ball-lo {
  stop-color: var(--orbit-ball-lo);
}
.globe-orbits__shine {
  fill: #fff;
  fill-opacity: 0.75;
}
/* ── Ambient light ("Raking Light", README design note 26) ─────────────────────────────────────
   The site is lit like one quiet room. Light: noon, one high window on the left, warm daylight
   falling off into cool sky-lit shade, a sandstone floor in the footer. Dark: the same room after
   hours, low tungsten lamps on alternating walls, a steel overhead, the console as the one
   self-lit object. Colour comes only from light temperature (tokens --amb-* in base.css); the
   brand blue stays for actions.
   Markup: .amb on a section is the quiet base (it only fades its edges into the shared seam
   tone); add one treatment: --window (page openers), --wash (lit working sections), --falloff
   (white card grids), --screen (the console), --floor (footer). --i sets the intensity inline
   (style="--amb-i:.7"); --canvas lights only the top of a tall element; --lamp-left/-right
   pick the lamp wall in the dark; --route is the Delhi NCR (warm) to Mumbai (cool) band.
   Only background-* properties are set here: no pseudo-elements, z-index or transforms, so
   menus, dialogs and the sticky summary are untouched. Never use the background shorthand on a
   treated element (it would reset the layers). */
.amb {
  --amb-i: 1;
  --amb-k: calc(var(--amb-i) * var(--amb-m) * var(--amb-gain));
  --amb-h: 100%;
  --amb-base: var(--color-surface);
  --amb-y: initial;
  --amb-rx: initial;
  --amb-ry: initial;
  --amb-dir: initial;
  --amb-side: initial;
  --amb-far: initial;
  --amb-seam-t: initial;
  --amb-seam-b: initial;
  --amb-seam-d: min(7rem, 16%);
  --amb-seam-layer: linear-gradient(180deg, var(--amb-seam-t, var(--amb-seam)) 0, transparent var(--amb-seam-d), transparent calc(100% - var(--amb-seam-d)), var(--amb-seam-b, var(--amb-seam)) 100%);
  background-image: var(--amb-seam-layer);
}
.section-white.amb {
  --amb-base: var(--color-surface-section);
}
:is(.trust, .trust-compact, .datacenters).amb {
  --amb-base: var(--amb-band);
}
.site-footer.amb {
  --amb-base: var(--color-surface-footer);
}
/* Every lit treatment: five layers (grain, seam, three lights) on an opaque base, so the blended
   grain never shows raw. */
.amb--window,
.amb--wash,
.amb--falloff,
.amb--screen,
.amb--floor {
  --amb-seam-d: min(11rem, 22%);
  background-color: var(--amb-base);
  background-size: 180px 180px, 100% 100%, 100% var(--amb-h), 100% var(--amb-h), 100% var(--amb-h);
  background-position: 0 0;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-blend-mode: var(--amb-grain-blend), normal, normal, normal, normal;
}
/* Top-anchored light on a tall element (a whole <main>, a text page): the lights end softly by
   --amb-h and the rest stays the plain base. */
.amb--canvas {
  --amb-h: 60rem;
  --amb-seam-layer: linear-gradient(180deg, transparent calc(var(--amb-h) * 0.55), var(--amb-base) var(--amb-h));
}
.amb--lamp-left {
  --amb-side: -6%;
  --amb-far: 106%;
}
.amb--lamp-right {
  --amb-side: 106%;
  --amb-far: -6%;
}
/* Window: the key light that opens a page. A diagonal from the warm upper left to the cool right
   wall; centres sit off-canvas and fall off over several stops, so no shape or rim shows. */
.amb--window {
  --amb-seam-t: transparent;
  background-image:
    var(--amb-grain),
    var(--amb-seam-layer),
    radial-gradient(ellipse 100% 130% at -10% -20%, rgb(var(--amb-key) / calc(0.70 * var(--amb-k))) 0%, rgb(var(--amb-key) / calc(0.42 * var(--amb-k))) 26%, rgb(var(--amb-key) / calc(0.16 * var(--amb-k))) 54%, rgb(var(--amb-key) / 0) 82%),
    linear-gradient(180deg, rgb(var(--amb-sky) / calc(0.75 * var(--amb-k))) 0%, rgb(var(--amb-sky) / 0) 34%),
    radial-gradient(ellipse 62% 80% at 108% 74%, rgb(var(--amb-shade) / calc(0.44 * var(--amb-k))) 0%, rgb(var(--amb-shade) / calc(0.22 * var(--amb-k))) 36%, rgb(var(--amb-shade) / calc(0.07 * var(--amb-k))) 62%, rgb(var(--amb-shade) / 0) 84%);
}
/* Wash: a lit working section, a step below the window. Warm at the left wall at heading
   height, cooling to shade on the right. */
.amb--wash {
  background-image:
    var(--amb-grain),
    var(--amb-seam-layer),
    radial-gradient(ellipse var(--amb-rx, 95%) var(--amb-ry, 120%) at -12% var(--amb-y, 28%), rgb(var(--amb-key) / calc(0.60 * var(--amb-k))) 0%, rgb(var(--amb-key) / calc(0.36 * var(--amb-k))) 26%, rgb(var(--amb-key) / calc(0.13 * var(--amb-k))) 54%, rgb(var(--amb-key) / 0) 82%),
    linear-gradient(var(--amb-dir, 98deg), rgb(var(--amb-shade) / 0) 42%, rgb(var(--amb-shade) / calc(0.14 * var(--amb-k))) 76%, rgb(var(--amb-shade) / calc(0.26 * var(--amb-k))) 100%),
    none;
}
/* Route: the place moment (#network, the data centres band). A flattened band of light at the
   route: warm on Delhi NCR (left), cooling toward Mumbai (right); stacked below 1024px, warm at
   the top (Delhi) and shade toward the bottom (Mumbai). */
.amb--route {
  --amb-y: 60%;
  --amb-rx: 130%;
  --amb-ry: 34%;
}
@media (max-width: 1023.98px) {
.amb--route {
  --amb-y: 22%;
  --amb-rx: 150%;
  --amb-ry: 60%;
  --amb-dir: 168deg;
}
}
/* Falloff: white sections full of cards. White can't get brighter, so the field falls away into
   cool shade and the white cards become the lit objects. */
.amb--falloff {
  background-image:
    var(--amb-grain),
    var(--amb-seam-layer),
    radial-gradient(ellipse 55% 80% at -6% 8%, rgb(var(--amb-key) / calc(0.34 * var(--amb-k))) 0%, rgb(var(--amb-key) / calc(0.13 * var(--amb-k))) 45%, rgb(var(--amb-key) / 0) 80%),
    linear-gradient(100deg, rgb(var(--amb-shade) / 0) 30%, rgb(var(--amb-shade) / calc(0.14 * var(--amb-k))) 64%, rgb(var(--amb-shade) / calc(0.32 * var(--amb-k))) 100%),
    radial-gradient(ellipse 52% 60% at 104% 60%, rgb(var(--amb-occlude) / calc(0.07 * var(--amb-k))) 0%, rgb(var(--amb-occlude) / calc(0.03 * var(--amb-k))) 45%, rgb(var(--amb-occlude) / 0) 80%);
}
/* Screen: the console section. By day the console is an object in shade with a lit headline;
   after hours it is the light source. */
.amb--screen {
  background-image:
    var(--amb-grain),
    var(--amb-seam-layer),
    radial-gradient(ellipse 80% 60% at -8% 14%, rgb(var(--amb-key) / calc(0.58 * var(--amb-k))) 0%, rgb(var(--amb-key) / calc(0.34 * var(--amb-k))) 26%, rgb(var(--amb-key) / calc(0.12 * var(--amb-k))) 54%, rgb(var(--amb-key) / 0) 82%),
    radial-gradient(ellipse 70% 55% at 50% 64%, rgb(var(--amb-shade) / calc(0.30 * var(--amb-k))) 0%, rgb(var(--amb-shade) / calc(0.19 * var(--amb-k))) 50%, rgb(var(--amb-shade) / calc(0.06 * var(--amb-k))) 80%, rgb(var(--amb-shade) / 0) 100%),
    linear-gradient(98deg, rgb(var(--amb-shade) / 0) 50%, rgb(var(--amb-shade) / calc(0.16 * var(--amb-k))) 100%);
}
/* Floor: the footer. Warm light reflected up from below, a faint ledge under its hairline. */
.amb--floor {
  --amb-seam-t: transparent;
  --amb-seam-b: transparent;
  background-image:
    var(--amb-grain),
    var(--amb-seam-layer),
    radial-gradient(ellipse 120% 90% at 50% 125%, rgb(var(--amb-bounce) / calc(0.30 * var(--amb-k))) 0%, rgb(var(--amb-bounce) / calc(0.17 * var(--amb-k))) 30%, rgb(var(--amb-bounce) / calc(0.06 * var(--amb-k))) 58%, rgb(var(--amb-bounce) / 0) 85%),
    linear-gradient(0deg, rgb(var(--amb-bounce) / calc(0.09 * var(--amb-k))) 0%, rgb(var(--amb-bounce) / 0) 45%),
    linear-gradient(180deg, rgb(var(--amb-occlude) / calc(0.05 * var(--amb-k))) 0%, rgb(var(--amb-occlude) / 0) 30%);
}
/* After hours: each treatment is recomposed, not dimmed. */
:root[data-theme='dark'] .amb--window {
  background-image:
    var(--amb-grain),
    var(--amb-seam-layer),
    radial-gradient(ellipse 58% 72% at var(--amb-side, 106%) 62%, rgb(var(--amb-key) / calc(0.095 * var(--amb-k))) 0%, rgb(var(--amb-key) / calc(0.056 * var(--amb-k))) 26%, rgb(var(--amb-key) / calc(0.02 * var(--amb-k))) 54%, rgb(var(--amb-key) / 0) 82%),
    linear-gradient(180deg, rgb(var(--amb-sky) / calc(0.07 * var(--amb-k))) 0%, rgb(var(--amb-sky) / calc(0.028 * var(--amb-k))) 24%, rgb(var(--amb-sky) / 0) 50%),
    radial-gradient(ellipse 75% 80% at var(--amb-far, -8%) 96%, rgb(var(--amb-shade) / calc(0.42 * var(--amb-k))) 0%, rgb(var(--amb-shade) / calc(0.2 * var(--amb-k))) 40%, rgb(var(--amb-shade) / 0) 78%);
}
:root[data-theme='dark'] .amb--wash {
  background-image:
    var(--amb-grain),
    var(--amb-seam-layer),
    radial-gradient(ellipse calc(var(--amb-rx, 95%) * 0.58) calc(var(--amb-ry, 120%) * 0.62) at var(--amb-side, -6%) var(--amb-y, 28%), rgb(var(--amb-key) / calc(0.075 * var(--amb-k))) 0%, rgb(var(--amb-key) / calc(0.044 * var(--amb-k))) 26%, rgb(var(--amb-key) / calc(0.015 * var(--amb-k))) 54%, rgb(var(--amb-key) / 0) 82%),
    radial-gradient(ellipse 120% 60% at 50% -10%, rgb(var(--amb-sky) / calc(0.05 * var(--amb-k))) 0%, rgb(var(--amb-sky) / calc(0.018 * var(--amb-k))) 50%, rgb(var(--amb-sky) / 0) 85%),
    radial-gradient(ellipse 70% 90% at var(--amb-far, 104%) 100%, rgb(var(--amb-shade) / calc(0.32 * var(--amb-k))) 0%, rgb(var(--amb-shade) / 0) 76%);
}
:root[data-theme='dark'] .amb--falloff {
  background-image:
    var(--amb-grain),
    var(--amb-seam-layer),
    radial-gradient(ellipse 45% 60% at var(--amb-side, -6%) 40%, rgb(var(--amb-key) / calc(0.032 * var(--amb-k))) 0%, rgb(var(--amb-key) / calc(0.012 * var(--amb-k))) 50%, rgb(var(--amb-key) / 0) 82%),
    radial-gradient(ellipse 120% 60% at 50% -10%, rgb(var(--amb-sky) / calc(0.055 * var(--amb-k))) 0%, rgb(var(--amb-sky) / calc(0.02 * var(--amb-k))) 50%, rgb(var(--amb-sky) / 0) 85%),
    linear-gradient(90deg, rgb(var(--amb-shade) / calc(0.34 * var(--amb-k))) 0%, rgb(var(--amb-shade) / 0) 26%, rgb(var(--amb-shade) / 0) 74%, rgb(var(--amb-shade) / calc(0.34 * var(--amb-k))) 100%);
}
:root[data-theme='dark'] .amb--screen {
  background-image:
    var(--amb-grain),
    var(--amb-seam-layer),
    radial-gradient(ellipse 72% 62% at 50% 62%, rgb(var(--amb-spill) / calc(0.08 * var(--amb-k))) 0%, rgb(var(--amb-spill) / calc(0.05 * var(--amb-k))) 50%, rgb(var(--amb-spill) / calc(0.02 * var(--amb-k))) 75%, rgb(var(--amb-spill) / 0) 100%),
    radial-gradient(ellipse 120% 60% at 50% -10%, rgb(var(--amb-sky) / calc(0.035 * var(--amb-k))) 0%, rgb(var(--amb-sky) / 0) 80%),
    linear-gradient(90deg, rgb(var(--amb-shade) / calc(0.30 * var(--amb-k))) 0%, rgb(var(--amb-shade) / 0) 18%, rgb(var(--amb-shade) / 0) 82%, rgb(var(--amb-shade) / calc(0.30 * var(--amb-k))) 100%);
}
:root[data-theme='dark'] .amb--floor {
  background-image:
    var(--amb-grain),
    var(--amb-seam-layer),
    radial-gradient(ellipse 90% 120% at 50% 130%, rgb(var(--amb-bounce) / calc(0.055 * var(--amb-k))) 0%, rgb(var(--amb-bounce) / calc(0.03 * var(--amb-k))) 30%, rgb(var(--amb-bounce) / calc(0.01 * var(--amb-k))) 58%, rgb(var(--amb-bounce) / 0) 85%),
    linear-gradient(90deg, rgb(var(--amb-shade) / calc(0.3 * var(--amb-k))) 0%, rgb(var(--amb-shade) / 0) 30%, rgb(var(--amb-shade) / 0) 70%, rgb(var(--amb-shade) / calc(0.3 * var(--amb-k))) 100%),
    none;
}
/* In the dark, cards inside a lit section step up one tone (nested panels with them), so they
   stay brighter than the light around them. */
:root[data-theme='dark'] :is(.amb--window, .amb--wash, .amb--screen):not(.amb--canvas) {
  --color-surface-container-lowest: var(--amb-card);
  --color-surface-container-low: var(--amb-card-nested);
}
/* Edge light on a few focal objects only (inset, so nothing moves). Light: the graphite platform
   panel catches the window on its top and left edges. Dark: an anodised top chamfer. */
.home-hero__platform {
  background-image: linear-gradient(155deg, var(--amb-sheen) 0%, transparent 38%);
  box-shadow: var(--shadow-hero), inset 0 1px 0 var(--amb-edge), inset 1px 0 0 var(--amb-edge-side);
}
:root[data-theme='dark'] .home-hero__platform {
  background-image: linear-gradient(180deg, var(--amb-sheen) 0%, transparent 42%);
  box-shadow: var(--shadow-hero), inset 0 1px 0 var(--amb-edge), inset -1px 0 0 var(--amb-edge-side);
}
:root[data-theme='dark'] :is(.console-preview__window, .get-started, .telemetry__card, .summary__card, .sizer__card) {
  background-image: linear-gradient(180deg, var(--amb-sheen) 0%, transparent 42%);
}
:root[data-theme='dark'] .console-preview__window {
  box-shadow: var(--shadow-window), inset 0 1px 0 var(--amb-edge);
}
:root[data-theme='dark'] .get-started {
  box-shadow: var(--shadow-md), inset 0 1px 0 var(--amb-edge);
}
:root[data-theme='dark'] .telemetry__card {
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--amb-edge);
}
:root[data-theme='dark'] .summary__card {
  box-shadow: var(--shadow-md), inset 0 1px 0 var(--amb-edge);
}
:root[data-theme='dark'] .sizer__card {
  box-shadow: var(--shadow-xs), inset 0 1px 0 var(--amb-edge);
}
:root[data-theme='dark'] .request-dialog__header {
  box-shadow: inset 0 1px 0 var(--amb-edge);
}
/* Browsers without view transitions switch theme by easing colours (html.theme-changing, theme.js).
   Gradients can't ease, so the light would show the other theme's colours over a base still
   easing: it is left out for those 250ms and comes back in the new theme. */
:root.theme-changing .amb {
  background-image: none;
}
/* Printing, forced colours and "more contrast": flat surfaces only. */
@media print, (forced-colors: active), (prefers-contrast: more) {
:root[data-theme] :is(.amb, .home-hero__platform, .console-preview__window, .get-started, .telemetry__card, .summary__card, .sizer__card) {
  background-image: none;
}
}