@font-face {
  font-family: "Lexend Giga";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/lexend-giga-latin-700.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  /* Foundations */
  --canvas: #121417;
  --canvas-raised: #171a1f;
  --canvas-app: #101214;
  --surface: #1a1e24;
  --surface-raised: #222831;
  --surface-strong: #1d2a3a;
  --surface-inset: #111419;
  --surface-header: #16191e;
  --surface-footer: #0e1013;
  --surface-card: #191e25;
  --surface-brand-mark: #080d14;
  --surface-ghost: rgb(12 20 30 / 62%);
  --surface-header-translucent: rgb(18 20 23 / 88%);
  --surface-plans: rgb(20 24 30 / 80%);
  --surface-plan: rgb(25 30 37 / 88%);
  --surface-plan-hover: #202a36;
  --surface-plan-featured: #202d3b;
  --surface-plan-option-featured: #17283a;
  --surface-callout: #1a222c;
  --surface-metric: rgb(24 29 35 / 88%);
  --surface-toast: #17263a;
  --surface-bottom-nav: #171b21;
  --surface-subscription: linear-gradient(135deg, rgb(31 46 64 / 96%), rgb(25 35 48 / 96%));
  --surface-cabinet-canvas:
    radial-gradient(ellipse 72% 62% at 78% 18%, rgb(48 101 159 / 21%) 0%, rgb(31 66 108 / 10%) 34%, rgb(15 21 29 / 0%) 72%),
    radial-gradient(ellipse 58% 48% at 14% 86%, rgb(31 72 119 / 10%) 0%, rgb(21 47 78 / 5%) 38%, rgb(13 18 25 / 0%) 76%),
    radial-gradient(ellipse at 52% 44%, rgb(14 20 27 / 0%) 38%, rgb(5 8 12 / 31%) 100%),
    linear-gradient(142deg, #11151a 0%, #0e141c 52%, #0a1018 100%);
  --surface-cabinet-geometry:
    radial-gradient(circle at 52% 47%, rgb(110 171 229 / 8%) 0 1px, transparent 2px),
    linear-gradient(132deg, transparent 0 20%, rgb(116 176 233 / 5%) 20.08% 20.22%, transparent 20.3% 100%),
    linear-gradient(132deg, transparent 0 32%, rgb(116 176 233 / 4%) 32.08% 32.2%, transparent 32.28% 100%),
    linear-gradient(132deg, transparent 0 44%, rgb(116 176 233 / 3%) 44.08% 44.18%, transparent 44.26% 100%),
    linear-gradient(48deg, transparent 0 55%, rgb(86 146 204 / 4%) 55.08% 55.2%, transparent 55.28% 100%),
    linear-gradient(48deg, transparent 0 68%, rgb(86 146 204 / 3%) 68.08% 68.18%, transparent 68.26% 100%);
  --surface-cabinet-geometry-mask: radial-gradient(ellipse 68% 72% at 54% 48%, #000 0 28%, rgb(0 0 0 / 72%) 48%, transparent 82%);
  --surface-cabinet-normal:
    linear-gradient(132deg, rgb(103 161 217 / 4%) 0%, rgb(103 161 217 / 0%) 32%),
    linear-gradient(145deg, rgb(30 36 44 / 88%), rgb(22 27 34 / 84%));
  --surface-cabinet-action:
    radial-gradient(ellipse 72% 120% at 104% -8%, rgb(72 137 201 / 14%) 0%, rgb(51 102 155 / 5%) 42%, transparent 72%),
    linear-gradient(132deg, rgb(115 174 229 / 6%) 0%, rgb(115 174 229 / 0%) 34%),
    linear-gradient(145deg, rgb(32 39 48 / 96%), rgb(22 28 36 / 94%));
  --surface-cabinet-checkout:
    radial-gradient(ellipse 84% 92% at 100% 0%, rgb(79 142 204 / 17%) 0%, rgb(51 101 151 / 6%) 42%, transparent 74%),
    linear-gradient(132deg, rgb(128 181 231 / 7%) 0%, rgb(128 181 231 / 0%) 36%),
    linear-gradient(145deg, rgb(36 43 53 / 98%), rgb(23 29 37 / 97%) 66%, rgb(18 24 32 / 97%) 100%);
  --surface-cabinet-modal:
    radial-gradient(ellipse 72% 88% at 100% 0%, rgb(70 132 193 / 13%) 0%, transparent 66%),
    linear-gradient(145deg, rgb(34 41 51 / 98%), rgb(22 27 35 / 98%));
  --surface-cabinet-row-hover: rgb(101 169 237 / 8%);
  --surface-cabinet-row-recommended: linear-gradient(90deg, transparent 0%, rgb(101 169 237 / 3%) 72%, rgb(101 169 237 / 5%) 100%);
  --surface-cabinet-device-visual:
    radial-gradient(circle at 52% 48%, rgb(74 144 210 / 12%) 0%, rgb(42 88 134 / 4%) 36%, transparent 70%);
  --surface-cabinet-floating:
    linear-gradient(180deg, rgb(35 42 51 / 96%), rgb(19 24 31 / 97%));
  --surface-public-overlay: rgb(8 11 15 / 20%);
  --surface-chip: rgb(24 30 38 / 72%);
  --surface-chip-accent: rgb(101 169 237 / 10%);
  --surface-period-glow:
    radial-gradient(ellipse 90% 70% at 82% 0%, rgb(101 169 237 / 11%) 0%, transparent 66%);
  --surface-callout-glow:
    radial-gradient(ellipse 60% 130% at 88% 12%, rgb(85 148 214 / 20%) 0%, transparent 70%);
  --surface-step-marker: rgb(101 169 237 / 12%);
  --surface-public-hero:
    linear-gradient(135deg, rgb(33 75 125 / 44%) 0%, rgb(23 52 88 / 24%) 23%, rgb(15 29 48 / 0%) 49%),
    linear-gradient(98deg, rgb(9 12 17 / 98%) 0%, rgb(10 14 20 / 94%) 40%, rgb(10 17 27 / 73%) 68%, rgb(14 26 42 / 52%) 100%),
    linear-gradient(180deg, rgb(16 31 50 / 12%) 0%, rgb(16 31 50 / 0%) 48%);
  --surface-browser-auth: var(--canvas-app);
  --surface-auth-glow: rgb(33 75 125 / 30%);
  --surface-auth-glow-far: rgb(33 75 125 / 16%);
  --surface-auth-glow-fade: rgb(33 75 125 / 0%);
  --surface-auth-field-node: rgb(159 196 234 / 11%);
  --surface-auth-field-fade: rgb(159 196 234 / 0%);
  --surface-auth-clear-fade: rgb(16 18 20 / 0%);
  --surface-modal-backdrop: rgb(2 6 11 / 72%);

  --text: #f5f7fb;
  --text-soft: #d2d9e3;
  --text-muted: #9da8b8;
  --text-on-accent: #ffffff;
  --text-on-positive: #07110a;
  --text-accent-soft: #dceeff;
  --text-accent-muted: #b8d9f7;
  --text-accent-featured: #a9d4fb;
  --text-positive: #c3e9c6;
  --text-warning: #f1cf91;
  --text-warning-soft: #f0cf91;
  --text-danger: #e99ca4;
  --text-danger-hover: #ffc0c6;
  --text-danger-on-surface: #ffc2c9;

  --line: rgb(195 209 226 / 16%);
  --line-header: rgb(151 177 209 / 16%);
  --line-subtle: rgb(151 177 209 / 15%);
  --line-chip: rgb(166 195 228 / 20%);
  --line-strong: rgb(195 209 226 / 29%);
  --line-subscription: rgb(156 185 218 / 23%);
  --line-accent-subtle: rgb(101 169 237 / 30%);
  --line-accent-soft: rgb(101 169 237 / 48%);
  --line-accent-medium: rgb(101 169 237 / 52%);
  --line-accent: rgb(101 169 237 / 56%);
  --hero-route-field: #9fc4ea;
  --hero-route-spark: #dbeaff;
  --line-accent-hover: rgb(101 169 237 / 70%);
  --line-cabinet-surface: rgb(166 195 228 / 22%);
  --line-cabinet-action: rgb(132 181 228 / 38%);
  --line-cabinet-highlight: rgb(187 218 246 / 16%);
  --line-cabinet-side-highlight: rgb(187 218 246 / 5%);
  --line-cabinet-geometry: rgb(113 174 230 / 18%);
  --line-cabinet-row-hover: rgb(124 172 220 / 28%);
  --line-positive: rgb(113 183 120 / 46%);
  --line-warning: rgb(227 179 92 / 30%);
  --line-warning-strong: rgb(227 179 92 / 46%);
  --line-negative: rgb(225 120 131 / 44%);

  --accent: #65a9ed;
  --accent-strong: #3476bc;
  --accent-hover: #3578c0;
  --accent-soft: rgb(101 169 237 / 14%);
  --accent-surface-subtle: rgb(101 169 237 / 11%);
  --accent-surface-active: rgb(101 169 237 / 10%);
  --accent-icon-soft: #8fb9e9;
  --accent-rule: linear-gradient(90deg, rgb(122 183 240 / 88%), rgb(101 169 237 / 58%) 48%, rgb(61 132 202 / 12%));
  --accent-rule-vertical: linear-gradient(180deg, rgb(122 183 240 / 90%), rgb(101 169 237 / 18%));
  --focus-ring: #65a9ed;
  --positive: #71b778;
  --positive-soft: rgb(113 183 120 / 14%);
  --warning: #e3b35c;
  --warning-soft: rgb(227 179 92 / 15%);
  --negative: #e17883;
  --negative-soft: rgb(225 120 131 / 12%);

  --cta-border: transparent;
  --cta-border-hover: rgb(127 187 241 / 20%);
  --cta-surface: linear-gradient(135deg, #4483c2 0%, #326fae 100%);
  --cta-surface-hover: linear-gradient(135deg, #4f90cf 0%, #3b7ab9 100%);
  --cta-text-shadow: none;
  --shadow: 0 18px 48px rgb(0 0 0 / 24%);
  --shadow-subscription: 0 14px 30px rgb(0 0 0 / 13%);
  --shadow-cta: none;
  --shadow-cta-hover: none;
  --surface-header-scrim:
    linear-gradient(180deg, rgb(15 17 21 / 100%) 0%, rgb(15 17 21 / 97%) 46%, rgb(15 17 21 / 76%) 72%, rgb(15 17 21 / 0%) 100%);
  --shadow-period-card: 0 18px 44px rgb(0 0 0 / 22%);
  --shadow-primary-action: 0 10px 24px rgb(30 74 122 / 34%);
  --shadow-primary-action-hover: 0 14px 30px rgb(30 74 122 / 42%);
  --shadow-modal: 0 28px 80px rgb(0 0 0 / 48%);
  --shadow-floating-nav: 0 12px 32px rgb(0 0 0 / 32%);
  --shadow-cabinet-surface: inset 0 1px 0 rgb(255 255 255 / 3%);
  --shadow-cabinet-action: 0 20px 52px rgb(0 0 0 / 22%), inset 0 1px 0 rgb(255 255 255 / 6%), inset 1px 0 0 rgb(114 176 233 / 3%);
  --shadow-cabinet-checkout: 0 24px 64px rgb(0 0 0 / 28%), inset 0 1px 0 rgb(255 255 255 / 7%), inset 1px 0 0 rgb(114 176 233 / 4%);
  --shadow-cabinet-cta: 0 7px 18px rgb(0 0 0 / 16%), inset 0 1px 0 rgb(255 255 255 / 7%);
  --shadow-cabinet-cta-hover: 0 10px 24px rgb(0 0 0 / 20%), inset 0 1px 0 rgb(255 255 255 / 9%);
  --shadow-cabinet-cta-active: inset 0 2px 8px rgb(0 0 0 / 18%);
  --shadow-cabinet-icon-halo: 0 0 34px rgb(64 137 208 / 18%), inset 0 1px 0 rgb(255 255 255 / 4%);

  /* Layout and component metrics */
  --space-1: 4px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --space-section: 112px;

  --font-size-overline: 11px;
  --font-size-label: 12px;
  --font-size-small: 13px;
  --font-size-micro: 11px;
  --font-size-caption: 14px;
  --font-size-row: 15px;
  --font-size-body: 16px;
  --font-size-lead: 17px;
  --font-size-subheading: 18px;
  --font-size-heading: 20px;
  --font-size-panel-title: 24px;
  --font-size-panel-title-compact: 22px;
  --font-size-display: 31px;
  --font-size-period-price: clamp(38px, 3.4vw, 52px);
  --font-size-screen-title: 34px;
  --font-size-screen-title-mobile: 30px;
  --font-size-hero-lead: 19px;
  --font-size-public-h1: clamp(48px, 5vw, 64px);
  --font-size-public-h1-compact: clamp(42px, 8vw, 48px);
  --font-size-section-heading: clamp(32px, 3.1vw, 44px);
  --font-size-brand-name: 0.78em;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-brand: 1;
  --line-height-body: 1.55;
  --line-height-small: 1.45;
  --line-height-tight: 1.15;
  --line-height-control: 1.2;
  --line-height-hero: 1.04;
  --line-height-section-heading: 1.12;
  --line-height-screen-title: 1.06;
  --line-height-panel-title: 1.12;
  --line-height-fact: 1.32;
  --line-height-price: 1.1;
  --line-height-dialog-title: 1.1;
  --tracking-display: -0.018em;
  --tracking-brand: 0.02em;
  --tracking-eyebrow: 0.1em;
  --tracking-label: 0.08em;

  --radius-large: 20px;
  --radius: 14px;
  --radius-small: 10px;
  --radius-tight: 6px;
  --radius-pill: 999px;
  --icon-size-small: 16px;
  --icon-size-default: 18px;
  --icon-size-large: 22px;
  --control-height: 48px;
  --control-height-compact: 40px;
  --control-height-large: 56px;
  --max-width: 1180px;
  --cabinet-max-width: 880px;
  --cabinet-header-max-width: 1040px;
  --cabinet-focused-max-width: 560px;
  /* A row is a label and one action, and at 680px they sat four hundred pixels apart with
     nothing in between. The column is sized to the row it holds, not to the window. */
  --cabinet-list-max-width: 560px;
  --cabinet-pending-max-width: 680px;
  --cabinet-empty-state-max-width: 480px;
  --cabinet-device-empty-max-width: 780px;
  --page-gutter: var(--space-5);
  --page-gutter-compact: var(--space-4);
  --cabinet-gutter: var(--space-4);
  --cabinet-focus-gutter: 6px;
  --site-header-height: 72px;
  --site-header-height-compact: 64px;
  --site-header-scrim-fade: var(--space-6);
  --site-header-rail-height: 2px;
  --section-anchor-offset: calc(var(--site-header-height) + var(--space-5));
  --section-anchor-offset-compact: calc(var(--site-header-height-compact) + var(--space-4));
  --site-nav-link-padding: var(--space-2-5) 0;
  --site-nav-marker-size: 5px;
  --brand-mark-size: 36px;
  --brand-mark-size-compact: 34px;
  --brand-mark-size-footer: 30px;
  --cabinet-brand-mark-size: 31px;
  --hero-min-height: 100svh;
  --hero-padding: calc(var(--site-header-height) + var(--space-8)) 0 var(--space-section);
  --hero-padding-compact: calc(var(--site-header-height-compact) + var(--space-6)) 0 var(--space-10);
  --hero-grid-gap: var(--space-9);
  --hero-visual-width: 360px;
  --hero-visual-height: 470px;
  --step-marker-size: 40px;
  /* Four stops need a comfortable step, not the whole shell: 720 leaves 640 of content, a 480
     travel and 160 between ticks. At full width the travel was 824 and the action sat 699 from
     the price it acts on. */
  --period-picker-max-width: 720px;
  --period-dot-size: 10px;
  --period-thumb-core: 26px;
  --period-thumb-halo: 6px;
  --period-thumb-size: calc(var(--period-thumb-core) + (var(--period-thumb-halo) * 2));
  --period-touch-height: 44px;
  --surface-period-halo: rgb(101 169 237 / 12%);
  --cabinet-main-padding-block-end: 42px;
  --cabinet-main-padding-block: 36px var(--cabinet-main-padding-block-end);
  --cabinet-main-padding-block-compact: 30px var(--cabinet-main-padding-block-end);
  --cabinet-auth-max-width: 920px;
  --cabinet-auth-field-step: 52px;
  --cabinet-auth-panel-width: 400px;
  --cabinet-auth-main-padding-block: var(--space-9);
  --cabinet-auth-layout-gap: var(--space-8);
  --cabinet-checkout-max-width: 560px;
  --cabinet-state-icon-size: 42px;
  --cabinet-action-icon-size: 36px;
  --cabinet-slot-min-width: 244px;
  --cabinet-slot-min-height: 156px;
  --badge-height: 28px;
  --cabinet-skeleton-row-height: 64px;
  --dialog-max-width: 420px;
  --toast-max-width: 380px;
  --toast-inset: 20px;
  --cabinet-topbar-height: 64px;
  --cabinet-checkout-topbar-height: 56px;
  --cabinet-bottom-nav-height: 64px;
  --cabinet-bottom-nav-inset: var(--cabinet-gutter);
  --cabinet-bottom-nav-offset: var(--space-3);
  --cabinet-bottom-nav-padding: 6px;
  --cabinet-bottom-nav-chip-width: 52px;
  --cabinet-bottom-nav-chip-height: 26px;
  --font-brand: "Lexend Giga", Inter, ui-sans-serif, system-ui, sans-serif;
  font-family: Inter, "SF Pro Text", "SF Pro Display", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

*::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

html {
  min-width: 320px;
  background: var(--canvas);
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  min-width: 320px;
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}

body.public-site {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}

body.public-site::before,
body.public-site::after {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
}

body.public-site::before {
  background: var(--canvas) url("/assets/xrayed-background.webp") center / cover no-repeat;
}

body.public-site::after {
  background: var(--surface-public-overlay);
}

body,
button,
input,
textarea,
select {
  font: inherit;
}

/* iOS paints a translucent highlight over the box of a tapped control. On controls we have styled
   ourselves it reads as a rectangle flashing behind them, so it is suppressed everywhere. */
button,
a,
input,
label {
  -webkit-tap-highlight-color: transparent;
}

button {
  border: 0;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

.shell {
  width: min(calc(100% - (var(--page-gutter) * 2)), var(--max-width));
  margin: 0 auto;
}

.eyebrow {
  margin: 0 0 var(--space-3);
  color: var(--accent);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.button {
  display: inline-flex;
  min-height: var(--control-height);
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-small);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-control);
  text-align: center;
}

.button--compact {
  min-height: var(--control-height-compact);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-caption);
}

.button--primary {
  background: var(--cta-surface);
  color: var(--text-on-accent);
}

.button--large {
  min-height: var(--control-height-large);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius);
  font-size: var(--font-size-body);
}

.button--primary.button--large {
  box-shadow: var(--shadow-primary-action);
}

.button--cabinet {
  position: relative;
  gap: var(--space-2-5);
  overflow: hidden;
  border-color: var(--cta-border);
  background: var(--cta-surface);
  box-shadow: var(--shadow-cta);
  color: var(--text-on-accent);
  text-shadow: var(--cta-text-shadow);
}

/* Safari 27 paints an uninitialised buffer behind a masked element unless that element gets its
   own compositing layer, which shows as noise that shifts while the page scrolls. The 3D component
   below is what promotes it; a plain 2D transform is not enough. Every icon mask carries it. */
.button--cabinet::after {
  width: var(--icon-size-small);
  height: var(--icon-size-small);
  flex: 0 0 auto;
  content: "";
  background: currentcolor;
  mask: url("/assets/icons/chevron-right.svg") center / contain no-repeat;
  transform: translateY(1px) translateZ(0);
}

.button--cabinet.button--compact {
  gap: var(--space-2);
  padding-right: var(--space-3);
}

.button--cabinet.button--compact::after {
  width: var(--icon-size-small);
  height: var(--icon-size-small);
}

.button--positive {
  background: var(--positive);
  color: var(--text-on-positive);
}

.button--negative {
  border-color: var(--line-negative);
  background: var(--negative-soft);
  color: var(--text-danger-on-surface);
}

.button--ghost {
  border-color: var(--line-strong);
  background: var(--surface-ghost);
  color: var(--text);
}

.button--quiet {
  background: transparent;
  color: var(--text-muted);
}

.button--icon {
  width: var(--control-height-compact);
  min-height: var(--control-height-compact);
  padding: 0;
  background: transparent;
  color: var(--text-muted);
}

@media (prefers-reduced-motion: no-preference) {
  .button {
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .button:hover:not(:disabled) {
    transform: translateY(-1px);
  }
}

@media (hover: hover) {
  .button--primary:hover:not(:disabled) {
    background: var(--cta-surface-hover);
  }

  .button--primary.button--large:hover:not(:disabled) {
    box-shadow: var(--shadow-primary-action-hover);
  }

  .button--cabinet:hover:not(:disabled) {
    border-color: var(--cta-border-hover);
    background: var(--cta-surface-hover);
    box-shadow: var(--shadow-cta-hover);
  }

  .button--ghost:hover:not(:disabled) {
    border-color: var(--line-accent-hover);
    background: var(--accent-soft);
    color: var(--text-accent-soft);
  }

  .button--quiet:hover:not(:disabled) {
    background: var(--accent-soft);
    color: var(--text-accent-soft);
  }

  .button--icon:hover:not(:disabled) {
    background: var(--surface-raised);
    color: var(--text);
  }
}

:where(button, a, input, textarea, select):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.button:active:not(:disabled) {
  transform: translateY(0);
}

/* Public site */

.site-header {
  position: fixed;
  z-index: 30;
  top: 0;
  right: 0;
  left: 0;
}

/* The page dissolves under the header instead of meeting a bar edge. */
.site-header::before {
  position: absolute;
  content: "";
  background: var(--surface-header-scrim);
  inset: 0 0 calc(var(--site-header-scrim-fade) * -1);
  opacity: 0;
  pointer-events: none;
}

.site-header__inner {
  position: relative;
  display: flex;
  min-height: var(--site-header-height);
  align-items: center;
  gap: var(--space-6);
}

.site-header__rail {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--line-header);
  opacity: 0;
  pointer-events: none;
}

.site-header__rail::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--site-header-rail-height);
  content: "";
  background: var(--accent-rule);
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left center;
}

.site-header.is-scrolled::before,
.site-header.is-scrolled .site-header__rail {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .site-header::before,
  .site-header__rail {
    transition: opacity 220ms ease;
  }

  .site-header__rail::after {
    transition: transform 120ms linear;
  }
}

.brand {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-3);
  color: var(--text);
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-brand);
}

.brand__mark {
  width: var(--brand-mark-size);
  height: var(--brand-mark-size);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-brand-mark);
  object-fit: cover;
}

.brand__name {
  font-family: var(--font-brand);
  font-size: var(--font-size-brand-name);
  font-weight: 700;
  letter-spacing: normal;
  line-height: var(--line-height-brand);
}

.site-nav {
  display: flex;
  gap: var(--space-5);
  margin-right: auto;
  color: var(--text-muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--site-nav-link-padding);
  border-radius: var(--radius-small);
  transition: color 140ms ease;
}

.site-nav a::before {
  width: var(--site-nav-marker-size);
  height: var(--site-nav-marker-size);
  content: "";
  border-radius: var(--radius-pill);
  background: currentcolor;
  opacity: 0;
}

.site-nav a[aria-current]::before {
  background: var(--accent);
  opacity: 1;
}

.site-nav a[aria-current] {
  color: var(--text);
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--text);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
}

/* A header with no section links has nothing pushing its action to the edge:
   .site-nav's auto margin is what does it on the landing page. */
.site-header__inner--bare {
  justify-content: space-between;
}

.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--surface-public-hero);
}

.hero__content {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, var(--hero-visual-width));
  gap: var(--hero-grid-gap);
  min-height: var(--hero-min-height);
  align-items: center;
  padding: var(--hero-padding);
}

.hero__copy {
  max-width: 760px;
  text-align: left;
}

.hero h1,
.section-heading h2,
.callout h2 {
  margin: 0;
  color: var(--text);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-display);
  overflow-wrap: break-word;
  text-wrap: balance;
}

.cabinet-screen-heading h1,
.cabinet-gate h1,
.confirm-dialog h2 {
  margin: 0;
  color: var(--text);
  font-weight: 780;
  letter-spacing: normal;
}

.hero h1 {
  max-width: 760px;
  font-size: var(--font-size-public-h1);
  line-height: var(--line-height-hero);
}

.hero__lead {
  max-width: 58ch;
  margin: var(--space-5) 0 0;
  color: var(--text-soft);
  font-size: var(--font-size-hero-lead);
  line-height: var(--line-height-body);
  overflow-wrap: break-word;
  text-wrap: pretty;
}

.hero__statement {
  max-width: 40ch;
  margin: var(--space-4) 0 0;
  color: var(--text-soft);
  font-size: var(--font-size-subheading);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
  overflow-wrap: break-word;
  text-wrap: pretty;
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.hero__facts li {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2-5) var(--space-4);
  border: 1px solid var(--line-chip);
  border-radius: var(--radius-pill);
  background: var(--surface-chip);
}

.hero__fact-value {
  color: var(--text);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: var(--line-height-tight);
  white-space: nowrap;
}

.hero__fact-label {
  color: var(--text-muted);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-tight);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--space-2-5);
  margin-top: var(--space-6);
}

.hero__periods-link {
  display: inline-flex;
  min-height: var(--control-height);
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  color: var(--text-soft);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-control);
  transition: color 160ms ease;
}

.hero__periods-link::after {
  display: block;
  width: var(--icon-size-small);
  height: var(--icon-size-small);
  content: "";
  background: currentcolor;
  mask: url("/assets/icons/chevron-right.svg") center / contain no-repeat;
  transform: translateZ(0);
}

.hero__periods-link:hover,
.hero__periods-link:focus-visible {
  color: var(--accent);
}

.hero__visual {
  justify-self: end;
  width: min(100%, var(--hero-visual-width));
  height: var(--hero-visual-height);
}

/* A route through a node field: the beam runs it once, lights it, and leaves.
   Movement is one-shot on purpose - the period slider below is where the page
   spends its motion, and a looping hero would compete with it. */
.hero-route {
  width: 100%;
  height: 100%;
  color: var(--hero-route-field);
}

.hero-route__field circle {
  fill-opacity: 0.12;
}

.hero-route__halo,
.hero-route__guide,
.hero-route__trail {
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-route__halo {
  stroke-width: 13;
  stroke-opacity: 0.07;
}

.hero-route__guide {
  stroke-width: 2;
  stroke-opacity: 0.17;
}

.hero-route__trail {
  stroke-width: 2.4;
  stroke-opacity: 0.8;
  stroke-dasharray: 100;
}

.hero-route__hop,
.hero-route__node-halo,
.hero-route__node-ring,
.hero-route__node-core {
  fill: var(--accent);
  transform-box: fill-box;
  transform-origin: center;
}

.hero-route__node-halo {
  fill-opacity: 0.1;
}

.hero-route__node-ring {
  fill-opacity: 0.22;
}

.hero-route__spark circle {
  fill: var(--hero-route-spark);
}

@media (prefers-reduced-motion: no-preference) {
  .hero-route__trail {
    stroke-dashoffset: 100;
    animation: hero-route-draw 2.0s linear 0.35s both;
  }

  .hero-route__hop,
  .hero-route__node-halo,
  .hero-route__node-ring {
    opacity: 0;
    transform: scale(0.4);
  }

  .hero-route__node-core {
    opacity: 0.22;
    transform: scale(0.5);
  }

  .hero-route__hop:nth-child(1) {
    animation: hero-route-node 300ms ease-out 0.69s both;
  }

  .hero-route__hop:nth-child(2) {
    animation: hero-route-node 300ms ease-out 0.98s both;
  }

  .hero-route__hop:nth-child(3) {
    animation: hero-route-node 300ms ease-out 1.29s both;
  }

  .hero-route__hop:nth-child(4) {
    animation: hero-route-node 300ms ease-out 1.59s both;
  }

  .hero-route__node-halo {
    animation: hero-route-node 550ms ease-out 1.85s both;
  }

  .hero-route__node-ring {
    animation: hero-route-node 450ms ease-out 1.89s both;
  }

  .hero-route__node-core {
    animation: hero-route-node 400ms ease-out 1.83s both;
  }
}

/* The spark only rides the path where offset-path exists; without it the group
   would sit in the corner instead of travelling, so it stays hidden. */
.hero-route__spark {
  opacity: 0;
}

@supports (offset-path: path("M 0,0 L 1,1")) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-route__spark {
      offset-path: path("M -60,300 L 68,396 L 206,420 L 256,286 L 134,214 L 286,132 L 470,176");
      animation: hero-route-travel 2.0s linear 0.35s both;
    }
  }
}

@keyframes hero-route-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes hero-route-node {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes hero-route-travel {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  92% {
    opacity: 1;
  }

  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}

/* The page a mistyped address lands on. It used to be the API's JSON body. */
.notice {
  display: grid;
  align-content: safe center;
  min-height: calc(100svh - var(--site-header-height) - var(--space-section));
  padding-block: var(--space-10);
}

.notice__lead {
  max-width: 44ch;
  margin: var(--space-4) 0 0;
  color: var(--text-soft);
  font-size: var(--font-size-lead);
  line-height: var(--line-height-body);
  text-wrap: pretty;
}

.notice__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2-5);
  margin-top: var(--space-7);
}

.section {
  padding: var(--space-section) 0;
}

.section[id] {
  scroll-margin-top: var(--section-anchor-offset);
}

.section--plans {
  border-bottom: 1px solid var(--line);
  background: var(--surface-plans);
}

/* The card is the whole section, so the section is as wide as the card. Left at full shell width
   it left half the row empty next to a two-column section, which read as unfinished rather than
   deliberate. The column is centred; the text inside it stays left-aligned like every other
   section heading on the page. */
.section--plans .shell {
  max-width: var(--period-picker-max-width);
}

.section-heading {
  max-width: 630px;
  margin-bottom: var(--space-7);
}

.section-heading h2,
.callout h2 {
  font-size: var(--font-size-section-heading);
  line-height: var(--line-height-section-heading);
}

.section-heading p:not(.eyebrow),
.callout p:not(.eyebrow) {
  margin: var(--space-3) 0 0;
  color: var(--text-muted);
  font-size: var(--font-size-lead);
  line-height: var(--line-height-body);
  overflow-wrap: break-word;
  text-wrap: pretty;
}


.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.period-picker {
  position: relative;
  max-width: var(--period-picker-max-width);
  padding: var(--space-7);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-large);
  background: var(--surface-card);
  box-shadow: var(--shadow-period-card);
}

.period-picker::after {
  position: absolute;
  content: "";
  background: var(--surface-period-glow);
  inset: 0;
  pointer-events: none;
}

.period-picker > * {
  position: relative;
  z-index: 1;
}

.period-scale {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  border: 0;
}

/* The axis is labelled once so the ticks can be bare numerals: four words of different lengths
   centred in equal columns crowded each other and left a hole before the last one. */
.period-scale__label {
  color: var(--text-muted);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.period-scale__axis {
  position: relative;
}

.period-scale__track {
  position: absolute;
  top: calc(var(--space-2) + (var(--period-dot-size) / 2) - 1px);
  right: calc(50% / var(--period-count, 4));
  left: calc(50% / var(--period-count, 4));
  height: 2px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
}

.period-scale__fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent);
  transform: scaleX(var(--period-progress, 0));
  transform-origin: left center;
}

.period-scale__options {
  display: grid;
  grid-template-columns: repeat(var(--period-count, 4), minmax(0, 1fr));
}

.period-scale__option {
  display: grid;
  justify-items: center;
  /* The caption has to clear the thumb, not the tick underneath it. */
  gap: calc(var(--space-3) + ((var(--period-thumb-core) - var(--period-dot-size)) / 2));
  padding-block: var(--space-2);
}

.period-scale__dot {
  width: var(--period-dot-size);
  height: var(--period-dot-size);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-inset);
}

/* The thumb travels from the first tick to the last, so the control is inset by the same half
   column as the track and then widened by the thumb: a range thumb's centre starts half a thumb
   inside its own box, and that offset has to be given back for the two to line up. */
.period-scale__input {
  position: absolute;
  top: calc(
    var(--space-2) + (var(--period-dot-size) / 2) - (var(--period-touch-height) / 2)
  );
  right: calc((50% / var(--period-count, 4)) - (var(--period-thumb-size) / 2));
  left: calc((50% / var(--period-count, 4)) - (var(--period-thumb-size) / 2));
  height: var(--period-touch-height);
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: grab;
  /* Vertical gestures still scroll the page; horizontal ones belong to the slider. */
  touch-action: pan-y;
  /* Nothing on a slider is text to select or long-press. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.period-scale__input:active {
  cursor: grabbing;
}

.period-scale__input::-webkit-slider-runnable-track {
  height: var(--period-touch-height);
  background: transparent;
}

.period-scale__input::-moz-range-track {
  height: var(--period-touch-height);
  background: transparent;
}

.period-scale__input::-webkit-slider-thumb {
  margin-top: calc((var(--period-touch-height) - var(--period-thumb-size)) / 2);
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  width: var(--period-thumb-size);
  height: var(--period-thumb-size);
  /* The halo lives inside the thumb's own box. A range input clips whatever its thumb paints
     outside itself, so an outer shadow was cut off flat at both ends of the travel. Widening the
     box does not move the thumb: its travel is the input's width minus the thumb, and the input is
     inset by half a thumb at each end, so the two cancel. */
  border: var(--period-thumb-halo) solid var(--surface-period-halo);
  border-radius: var(--radius-pill);
  background: var(--accent);
  background-clip: padding-box;
  box-shadow: inset 0 0 0 1px var(--line-accent);
}

.period-scale__input::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--period-thumb-size);
  height: var(--period-thumb-size);
  /* The halo lives inside the thumb's own box. A range input clips whatever its thumb paints
     outside itself, so an outer shadow was cut off flat at both ends of the travel. Widening the
     box does not move the thumb: its travel is the input's width minus the thumb, and the input is
     inset by half a thumb at each end, so the two cancel. */
  border: var(--period-thumb-halo) solid var(--surface-period-halo);
  border-radius: var(--radius-pill);
  background: var(--accent);
  background-clip: padding-box;
  box-shadow: inset 0 0 0 1px var(--line-accent);
}

.period-scale__input:focus-visible {
  outline: none;
}

.period-scale__input:focus-visible::-webkit-slider-thumb {
  border-color: var(--focus-ring);
}

.period-scale__input:focus-visible::-moz-range-thumb {
  border-color: var(--focus-ring);
}

.period-scale__caption {
  color: var(--text-muted);
  font-size: var(--font-size-row);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: var(--line-height-tight);
  text-align: center;
}

.period-scale__option.is-active .period-scale__caption {
  color: var(--text);
}

.period-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
  margin-top: var(--space-7);
}

.period-summary__figures {
  display: grid;
  gap: var(--space-2);
}

.period-summary__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  color: var(--text);
  font-size: var(--font-size-period-price);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-display);
  line-height: var(--line-height-price);
  white-space: nowrap;
}

.period-summary__term {
  color: var(--text-muted);
  font-size: var(--font-size-row);
  font-weight: var(--font-weight-regular);
  letter-spacing: normal;
  white-space: nowrap;
}

.period-summary__rate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  /* Holds the height of the badge whether or not the badge is there, so the action stays put as
     the slider crosses the periods that carry a saving. */
  min-height: calc(
    (var(--font-size-small) * var(--line-height-small)) + (var(--space-1) * 2) + 2px
  );
  margin: 0;
  color: var(--text-soft);
  font-size: var(--font-size-row);
  font-variant-numeric: tabular-nums;
  line-height: var(--line-height-small);
}

.period-summary__saving {
  margin: 0;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--line-accent-subtle);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--text-accent-muted);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: var(--line-height-small);
  white-space: nowrap;
}

.period-summary__action {
  margin-left: auto;
}

.period-terms {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  color: var(--text-muted);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-small);
  overflow-wrap: break-word;
  text-wrap: pretty;
}

@media (prefers-reduced-motion: no-preference) {
  .period-scale__fill {
    transition: transform 260ms ease;
  }

  .period-scale__dot {
    transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  }

  .period-scale__caption {
    transition: color 180ms ease;
  }

  .period-summary__saving {
    transition: opacity 200ms ease;
  }
}

@media (hover: hover) {
  .period-scale__input:hover::-webkit-slider-thumb {
    border-color: var(--line-accent-hover);
  }

  .period-scale__input:hover::-moz-range-thumb {
    border-color: var(--line-accent-hover);
  }
}

.information-grid {
  display: grid;
  grid-template-columns: minmax(230px, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(44px, 9vw, 128px);
  align-items: start;
}

.steps {
  display: grid;
  max-width: 620px;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps li {
  position: relative;
  display: grid;
  grid-template-columns: var(--step-marker-size) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.steps li:not(:last-child)::before {
  position: absolute;
  top: calc(var(--step-marker-size) + var(--space-2));
  bottom: calc((var(--space-6) + var(--space-2)) * -1);
  left: calc(var(--step-marker-size) / 2);
  width: 1px;
  background: var(--line-subtle);
  content: "";
}

.steps__number {
  display: grid;
  width: var(--step-marker-size);
  height: var(--step-marker-size);
  place-items: center;
  border: 1px solid var(--line-accent-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-step-marker);
  color: var(--accent);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-label);
}

.steps h3 {
  margin: 0;
  color: var(--text);
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  overflow-wrap: break-word;
  text-wrap: balance;
}

.steps p {
  max-width: 460px;
  margin: var(--space-2) 0 0;
  color: var(--text-muted);
  line-height: var(--line-height-body);
  overflow-wrap: break-word;
  text-wrap: pretty;
}

.section--service {
  border-top: 1px solid var(--line);
  padding-bottom: var(--space-8);
  background: var(--surface-plans);
}

.service-story {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: var(--space-9);
  align-items: start;
}

.service-story__intro {
  margin: 0;
}

.service-story__intro p:not(.eyebrow) {
  margin: var(--space-4) 0 0;
  color: var(--text-muted);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  overflow-wrap: break-word;
  text-wrap: pretty;
}

.service-principles {
  display: grid;
  gap: var(--space-7);
}

.service-principle {
  position: relative;
  padding: 0 0 0 var(--space-5);
  border-left: 1px solid var(--line-subtle);
}

.service-principle::before {
  position: absolute;
  top: 0;
  left: -1px;
  width: 2px;
  height: var(--space-6);
  background: var(--accent-rule-vertical);
  content: "";
}

.service-principle h3 {
  max-width: 460px;
  margin: 0;
  color: var(--text);
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  overflow-wrap: break-word;
  text-wrap: balance;
}

.service-principle p {
  max-width: 560px;
  margin: var(--space-3) 0 0;
  color: var(--text-muted);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  overflow-wrap: break-word;
  text-wrap: pretty;
}

.service-principle p + p {
  margin-top: var(--space-3);
}

.section--callout {
  padding-top: 72px;
  padding-bottom: var(--space-section);
}

.callout {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  padding: var(--space-10) var(--space-8);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-large);
  background: var(--surface-callout);
  box-shadow: var(--shadow);
  text-align: center;
}

.callout p:not(.eyebrow) {
  max-width: 46ch;
}

.callout .button {
  margin-top: var(--space-3);
}

.callout::after {
  position: absolute;
  content: "";
  background: var(--surface-callout-glow);
  inset: 0;
  pointer-events: none;
}

.callout > * {
  position: relative;
  z-index: 1;
}

.site-footer {
  position: relative;
  border-top: 1px solid var(--line);
  background: var(--surface-footer);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(230px, auto) auto;
  gap: var(--space-6);
  align-items: end;
  padding: var(--space-7) 0;
}

.brand--footer {
  font-size: var(--font-size-lead);
}

.brand--footer .brand__mark {
  width: var(--brand-mark-size-footer);
  height: var(--brand-mark-size-footer);
}

.site-footer__caption {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-caption);
  line-height: var(--line-height-small);
  overflow-wrap: break-word;
  text-wrap: pretty;
}

.site-footer__mark {
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
  font-size: var(--font-size-micro);
  line-height: var(--line-height-small);
  letter-spacing: 0.06em;
  opacity: 0.5;
}

.footer-links {
  display: grid;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-small);
}

.footer-links a:hover {
  color: var(--text);
}

[data-reveal].is-revealed {
  animation: public-reveal 420ms ease-out both;
  animation-delay: var(--reveal-delay, 0ms);
}

@keyframes public-reveal {
  from {
    opacity: 0.68;
    transform: translate3d(0, 10px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Customer cabinet */

html:has(.cabinet-page) {
  height: 100%;
  overflow: hidden;
  background: var(--canvas);
  overscroll-behavior: none;
  touch-action: pan-x pan-y;
}

/* Before sign-in there is no app chrome to pin, and a fixed-height shell fights the on-screen
   keyboard: iOS shrinks the visual viewport, the shell shrinks with it, and the page background
   shows through below. These screens scroll like an ordinary document instead. */
html:has(.cabinet-page--browser-auth:not(.cabinet-page--browser-authenticated)) {
  height: auto;
  overflow: visible;
}

.cabinet-page--browser-auth:not(.cabinet-page--browser-authenticated) .cabinet-shell {
  height: auto;
  min-height: 100dvh;
  overflow: visible;
}

.cabinet-page--browser-auth:not(.cabinet-page--browser-authenticated) .cabinet-main {
  display: grid;
  /* "safe" so a viewport shorter than the form scrolls from the top rather
     than clipping the first field above it. */
  align-content: safe center;
  overflow: visible;
}

/* The only surface in the product with no atmosphere behind it. It gets the
   field of nodes the hero route runs through, cleared where the form sits, and
   one directional glow. Painted with gradients rather than a CSS mask: a masked
   composited element is what Safari 27 fills from an uninitialised buffer. */
.cabinet-page--browser-auth:not(.cabinet-page--browser-authenticated) .cabinet-shell::before {
  position: fixed;
  inset: 0;
  content: "";
  /* The clearing has to be wider than the form, or the pattern shows through
     the field and the labels. It is stated per breakpoint below. */
  --cabinet-auth-clear-x: 60%;
  --cabinet-auth-clear-y: 50%;

  background:
    radial-gradient(ellipse 58% 54% at 4% 0%, var(--surface-auth-glow), var(--surface-auth-glow-fade) 66%),
    radial-gradient(ellipse 46% 42% at 96% 100%, var(--surface-auth-glow-far), var(--surface-auth-glow-fade) 70%),
    radial-gradient(
      ellipse var(--cabinet-auth-clear-x) var(--cabinet-auth-clear-y) at 50% 48%,
      var(--canvas-app) 52%,
      var(--surface-auth-clear-fade) 100%
    ),
    radial-gradient(circle at center, var(--surface-auth-field-node) 1.5px, var(--surface-auth-field-fade) 1.6px)
      0 0 / var(--cabinet-auth-field-step) var(--cabinet-auth-field-step);
  pointer-events: none;
}

body.cabinet-page {
  position: fixed;
  inset: 0;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--surface-header);
  overscroll-behavior: none;
  touch-action: pan-x pan-y;
}

.cabinet-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  position: relative;
  z-index: 1;
  height: 100vh;
  height: 100dvh;
  height: var(--cabinet-viewport-height, 100dvh);
  overflow: hidden;
  background: var(--surface-cabinet-canvas);
}

.cabinet-shell::after {
  position: absolute;
  z-index: 0;
  top: 5%;
  right: -8%;
  width: min(68vw, 980px);
  height: 78%;
  content: "";
  background: var(--surface-cabinet-geometry);
  mask-image: var(--surface-cabinet-geometry-mask);
  pointer-events: none;
}

.cabinet-shell > .cabinet-topbar,
.cabinet-shell > .cabinet-main,
.cabinet-shell > .cabinet-bottom-nav {
  position: relative;
  z-index: 1;
}

.cabinet-page--browser-auth .cabinet-shell {
  background: var(--surface-browser-auth);
}

.cabinet-page--browser-auth:not(.cabinet-page--browser-authenticated) .cabinet-shell::after {
  display: none;
}

.cabinet-page--browser-auth.cabinet-page--browser-authenticated .cabinet-shell {
  background: var(--surface-cabinet-canvas);
}

.cabinet-page .cabinet-topbar {
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid var(--line);
  background: var(--surface-header-translucent);
  backdrop-filter: blur(10px);
}

.cabinet-page .cabinet-topbar__inner {
  display: flex;
  width: min(calc(100% - (var(--cabinet-gutter) * 2)), var(--cabinet-header-max-width));
  min-height: var(--cabinet-topbar-height);
  align-items: center;
  gap: var(--space-2);
  margin: 0 auto;
}

.cabinet-page .cabinet-topbar__brand,
.cabinet-page .cabinet-topbar__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--font-size-body);
  font-weight: 820;
}

.cabinet-page .cabinet-topbar__brand {
  font-family: var(--font-brand);
  font-size: var(--font-size-small);
  font-weight: 700;
  letter-spacing: normal;
}

.cabinet-page .cabinet-topbar__brand img {
  width: var(--cabinet-brand-mark-size);
  height: var(--cabinet-brand-mark-size);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}

.cabinet-page .cabinet-topbar__back {
  color: var(--accent);
  font-size: var(--font-size-caption);
  font-weight: 760;
}

.cabinet-page .cabinet-topbar__back::before {
  display: block;
  width: var(--icon-size-small);
  height: var(--icon-size-small);
  content: "";
  background: var(--accent);
  mask: url("/assets/icons/chevron-right.svg") center / contain no-repeat;
  transform: rotate(180deg) translateZ(0);
}

.cabinet-page .cabinet-topbar__title {
  display: none;
  color: var(--text-soft);
  font-size: var(--font-size-caption);
  font-weight: 740;
}

.cabinet-page .cabinet-topbar__sign-out {
  display: inline-flex;
  min-height: var(--control-height-compact);
  align-items: center;
  margin-left: auto;
  padding: var(--space-2);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--font-size-small);
  font-weight: 720;
}

.cabinet-page .cabinet-topbar__sign-out:hover {
  color: var(--text-soft);
}

.cabinet-page .cabinet-desktop-nav {
  display: flex;
  align-self: stretch;
  align-items: center;
  gap: var(--space-1);
  gap: var(--space-1);
  margin-left: var(--space-5);
}

.cabinet-page .cabinet-desktop-nav button {
  position: relative;
  min-height: var(--control-height-compact);
  padding: var(--space-2) var(--space-2-5);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  transition: color 140ms ease, background-color 140ms ease;
}

.cabinet-page .cabinet-desktop-nav button::after {
  position: absolute;
  right: var(--space-2-5);
  bottom: 0;
  left: var(--space-3);
  height: 2px;
  border-radius: var(--radius-pill);
  content: "";
  background: transparent;
}

.cabinet-page .cabinet-desktop-nav button:hover {
  color: var(--text-soft);
}

.cabinet-page .cabinet-desktop-nav button.is-active {
  color: var(--text);
}

.cabinet-page .cabinet-desktop-nav button.is-active::after {
  background: var(--accent);
}

.cabinet-page[data-cabinet-active-view="checkout"] .cabinet-topbar__inner {
  width: min(calc(100% - (var(--cabinet-gutter) * 2)), var(--cabinet-checkout-max-width));
  min-height: var(--cabinet-checkout-topbar-height);
}

.cabinet-page[data-cabinet-active-view="checkout"] .cabinet-topbar__title {
  display: none;
}

.cabinet-page[data-cabinet-active-view="checkout"] .cabinet-topbar__brand {
  display: none;
}

.cabinet-page[data-cabinet-active-view="checkout"] .cabinet-topbar__back {
  min-height: var(--control-height-compact);
}

.cabinet-page .cabinet-main {
  width: min(calc(100% - (var(--cabinet-gutter) * 2)), var(--cabinet-max-width));
  min-height: 0;
  margin: 0 auto;
  /* Setting overflow on one axis makes the other a scroll container too, so this box clips
     horizontally. Full-width controls sat flush against that edge and had their focus ring cut
     off. Every view sets only block padding, so this inline gutter is never reset. */
  padding-block: var(--cabinet-main-padding-block);
  padding-inline: var(--cabinet-focus-gutter);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}

.cabinet-page--browser-auth.cabinet-page--browser-authenticated .cabinet-topbar__inner {
  width: min(calc(100% - (var(--cabinet-gutter) * 2)), var(--cabinet-header-max-width));
}

.cabinet-page--browser-auth.cabinet-page--browser-authenticated .cabinet-main {
  width: min(calc(100% - (var(--cabinet-gutter) * 2)), var(--cabinet-max-width));
  padding-block: var(--cabinet-main-padding-block);
}

.cabinet-page[data-cabinet-active-view="home"] .cabinet-main,
.cabinet-page[data-cabinet-active-view="plans"] .cabinet-main,
.cabinet-page[data-cabinet-active-view="support"] .cabinet-main {
  max-width: var(--cabinet-list-max-width);
}

.cabinet-page[data-cabinet-active-view="connect"] .cabinet-main,
.cabinet-page[data-cabinet-active-view="checkout"] .cabinet-main {
  max-width: var(--cabinet-focused-max-width);
}

.cabinet-page .cabinet-gate {
  max-width: 500px;
  margin: var(--space-9) auto;
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.cabinet-page .cabinet-gate > h1 {
  font-size: var(--font-size-display);
  line-height: var(--line-height-panel-title);
}

.cabinet-page .cabinet-gate > p:not(.eyebrow) {
  margin: var(--space-3) 0 var(--space-5);
  color: var(--text-muted);
}

.cabinet-page .cabinet-gate__note {
  margin-top: var(--space-4) !important;
  margin-bottom: 0 !important;
  font-size: var(--font-size-small);
}

.cabinet-page .cabinet-auth-form {
  display: grid;
  gap: var(--space-3);
}

.cabinet-page .cabinet-auth-form label:not(.cabinet-consent) {
  color: var(--text-soft);
  font-size: var(--font-size-small);
  font-weight: 720;
}

.cabinet-page .cabinet-auth-form input:not([type="checkbox"]) {
  width: 100%;
  min-height: var(--control-height);
  padding: 0 var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-small);
  background: var(--surface-inset);
  color: var(--text);
  font: inherit;
}

.cabinet-page .cabinet-auth-form input:not([type="checkbox"]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.cabinet-page .cabinet-auth-form input:not([type="checkbox"])[aria-invalid="true"] {
  border-color: var(--line-negative);
}

.cabinet-page .cabinet-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

.cabinet-page .cabinet-consent input {
  flex: 0 0 auto;
  margin: var(--space-1) 0 0;
  accent-color: var(--accent);
}

.cabinet-page .cabinet-consent a {
  color: var(--accent);
}

.cabinet-page .cabinet-auth-back {
  justify-self: start;
  /* Pulled left by its own padding so the label lines up with the field above
     it rather than sitting sixteen pixels inside the column. */
  margin-inline-start: calc(var(--space-4) * -1);
}

.cabinet-page--browser-auth .cabinet-topbar__inner,
.cabinet-page--browser-auth .cabinet-main {
  width: min(calc(100% - (var(--cabinet-gutter) * 2)), var(--cabinet-auth-max-width));
}

.cabinet-page--browser-auth .cabinet-main {
  padding-block: var(--cabinet-auth-main-padding-block);
}

.cabinet-page--browser-auth .cabinet-gate {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.cabinet-page .cabinet-auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--cabinet-auth-panel-width));
  gap: var(--cabinet-auth-layout-gap);
  align-items: start;
}

.cabinet-page .cabinet-auth-layout__intro {
  max-width: 44ch;
}

.cabinet-page .cabinet-auth-layout__lede {
  margin: 0;
  color: var(--text);
  font-size: var(--font-size-screen-title);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-screen-title);
  text-wrap: balance;
}

.cabinet-page .cabinet-auth-layout__description {
  max-width: 38ch;
  margin: var(--space-3) 0 0;
  color: var(--text-muted);
  overflow-wrap: break-word;
  text-wrap: pretty;
}

.cabinet-page .cabinet-auth-layout__highlights {
  display: grid;
  margin: var(--space-6) 0 0;
  padding: 0;
  gap: var(--space-3);
  list-style: none;
}

.cabinet-page .cabinet-auth-layout__highlights li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--text-soft);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

.cabinet-page .cabinet-auth-layout__highlight-icon {
  display: inline-block;
  width: var(--icon-size-default);
  height: var(--icon-size-default);
  flex: 0 0 auto;
  background: var(--accent-icon-soft);
  mask: url("/assets/icons/link.svg") center / contain no-repeat;
  transform: translateZ(0);
}

.cabinet-page .cabinet-auth-layout__highlight-icon--period {
  mask-image: url("/assets/icons/calendar-days.svg");
  transform: translateZ(0);
}

.cabinet-page .cabinet-auth-layout__highlight-icon--devices {
  mask-image: url("/assets/icons/smartphone.svg");
  transform: translateZ(0);
}

.cabinet-page .cabinet-auth-panel {
  padding: var(--space-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
}

.cabinet-page .cabinet-auth-panel h1 {
  margin: 0;
  color: var(--text);
  font-size: var(--font-size-panel-title);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-panel-title);
  text-wrap: balance;
}

.cabinet-page .cabinet-auth-panel__description {
  margin: var(--space-2) 0 var(--space-5);
  color: var(--text-muted);
  overflow-wrap: break-word;
  text-wrap: pretty;
}

.cabinet-page .cabinet-auth-panel__description strong {
  color: var(--text-soft);
  font-weight: var(--font-weight-semibold);
}

.cabinet-page .cabinet-auth-panel__email {
  color: var(--text-soft);
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}

.cabinet-page .cabinet-auth-form {
  gap: var(--space-2);
}

.cabinet-page .cabinet-auth-form label:not(.cabinet-consent) {
  font-weight: var(--font-weight-semibold);
}

.cabinet-page .cabinet-auth-form input:not([type="checkbox"]) {
  font-size: var(--font-size-body);
}

.cabinet-page .cabinet-auth-form input[name="code"] {
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-label);
  text-align: center;
}

.cabinet-page .cabinet-auth-form > .button {
  width: 100%;
  margin-top: var(--space-3);
}

.cabinet-page .cabinet-auth-form__feedback,
.cabinet-page .cabinet-auth-form__request-status {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

.cabinet-page .cabinet-auth-form__feedback--error {
  color: var(--text-danger);
}

.cabinet-page .cabinet-auth-form__request-status {
  min-height: 0;
}

.cabinet-page .cabinet-auth-form .cabinet-auth-back {
  width: auto;
  margin-top: var(--space-2);
  padding-inline: 0;
}

.cabinet-page .cabinet-auth-panel__note {
  margin: var(--space-5) 0 0;
  color: var(--text-muted);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

.cabinet-page .cabinet-auth-panel__note a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.cabinet-page .cabinet-auth-panel__note--origin {
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-subtle);
}

/* The managed challenge clears most visitors without asking them anything, so the host reserves no
   room until Cloudflare wants an interaction or the widget has failed. It stays in the layout
   rather than being removed from it: a widget in a display:none host cannot run. */
.cabinet-page .cabinet-auth-challenge {
  min-height: 0;
  margin-top: 0;
}

.cabinet-page .cabinet-auth-challenge--visible,
.cabinet-page .cabinet-auth-challenge--failed {
  min-height: 65px;
  margin-top: var(--space-2);
}

.cabinet-page .cabinet-auth-challenge--failed {
  color: var(--text-danger);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

@media (max-width: 800px) {
  .cabinet-shell::after {
    display: none;
  }

  /* One narrow column: the clearing has to span the whole width of the form. */
  .cabinet-page--browser-auth:not(.cabinet-page--browser-authenticated) .cabinet-shell::before {
    --cabinet-auth-clear-x: 155%;
    --cabinet-auth-clear-y: 34%;
  }

  .cabinet-page .cabinet-auth-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  /* One column leaves the pitch no job, and it pushed the first field a third of a screen down. */
  .cabinet-page .cabinet-auth-layout__intro {
    display: none;
  }

  .cabinet-page .cabinet-auth-panel {
    width: 100%;
    max-width: var(--cabinet-auth-panel-width);
    margin-inline: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
}

.cabinet-page .cabinet-screen-heading {
  margin: 0 0 var(--space-5);
}

.cabinet-page .cabinet-screen-heading .eyebrow {
  margin-bottom: var(--space-2);
  color: var(--accent);
  font-size: var(--font-size-overline);
}

.cabinet-page .cabinet-screen-heading h1 {
  font-size: var(--font-size-screen-title);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-screen-title);
}

.cabinet-page .cabinet-screen-heading p:not(.eyebrow) {
  max-width: 530px;
  margin: var(--space-3) 0 0;
  color: var(--text-muted);
  font-size: var(--font-size-body);
}

.cabinet-page .cabinet-state-card,
.cabinet-page .cabinet-empty-card {
  border: 1px solid var(--line-cabinet-surface);
  border-radius: var(--radius);
  background: var(--surface-cabinet-normal);
  box-shadow: var(--shadow-cabinet-surface);
}

.cabinet-page .cabinet-state-card {
  padding: var(--space-5);
  border-color: var(--line-subscription);
  background: var(--surface-subscription);
  box-shadow: var(--shadow-subscription);
}

.cabinet-page .cabinet-state-card--inactive {
  padding: var(--space-5);
  background: var(--surface-cabinet-normal);
  box-shadow: var(--shadow-cabinet-surface);
}

.cabinet-page .cabinet-subscription-overview {
  display: grid;
  gap: var(--space-3);
}

.cabinet-page .cabinet-state-card__header {
  display: grid;
  grid-template-columns: var(--cabinet-state-icon-size) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
}

.cabinet-page .cabinet-state-card__icon {
  display: grid;
  width: var(--cabinet-state-icon-size);
  height: var(--cabinet-state-icon-size);
  place-items: center;
  border: 1px solid var(--line-accent-subtle);
  border-radius: var(--radius-small);
  background: var(--accent-surface-subtle);
}

.cabinet-page .cabinet-state-card__icon::before {
  width: var(--icon-size-large);
  height: var(--icon-size-large);
  content: "";
  background: var(--accent);
  mask: url("/assets/icons/shield-check.svg") center / contain no-repeat;
  transform: translateZ(0);
}

.cabinet-page .cabinet-state-card__icon--inactive {
  border-color: var(--line-strong);
  background: var(--surface-inset);
}

.cabinet-page .cabinet-state-card__icon--inactive::before {
  background: var(--text-muted);
  mask-image: url("/assets/icons/shield.svg");
  transform: translateZ(0);
}

.cabinet-page .cabinet-state-card__heading {
  min-width: 0;
}

.cabinet-page .cabinet-state-card__heading > p {
  margin: 0;
  color: var(--text-soft);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.cabinet-page .cabinet-state-card h2 {
  margin: var(--space-1) 0 0;
  color: var(--text);
  font-size: var(--font-size-panel-title);
  line-height: var(--line-height-tight);
}

.cabinet-page .cabinet-state-card--inactive h2 {
  color: var(--text-soft);
}

.cabinet-page .cabinet-state-card__copy {
  margin: var(--space-4) 0 0;
  color: var(--text-muted);
}

.cabinet-page .cabinet-state-card__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-subscription);
}

.cabinet-page .cabinet-state-card__facts div {
  display: grid;
  gap: var(--space-2);
}

.cabinet-page .cabinet-state-card__facts dt {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--font-size-small);
}

.cabinet-page .cabinet-state-card__facts dd {
  margin: 0;
  color: var(--text);
  font-size: var(--font-size-row);
  font-weight: 720;
  line-height: var(--line-height-fact);
}

.cabinet-page .cabinet-fact-icon {
  display: inline-block;
  width: var(--icon-size-small);
  height: var(--icon-size-small);
  flex: 0 0 auto;
  background: var(--accent);
  mask: url("/assets/icons/calendar-days.svg") center / contain no-repeat;
  transform: translateZ(0);
}

.cabinet-page .cabinet-fact-icon--devices {
  background: var(--accent-icon-soft);
  mask-image: url("/assets/icons/smartphone.svg");
  transform: translateZ(0);
}

.cabinet-page .cabinet-order-callout {
  position: relative;
  display: grid;
  grid-template-areas:
    "status"
    "summary"
    "note"
    "action";
  width: min(100%, var(--cabinet-pending-max-width));
  align-items: start;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--line-cabinet-action);
  border-radius: var(--radius);
  background: var(--surface-cabinet-action);
  color: var(--text);
  text-align: left;
  box-shadow: var(--shadow-cabinet-action);
  overflow: hidden;
}

.cabinet-page .cabinet-order-callout::after,
.cabinet-page .cabinet-access-summary::after,
.cabinet-page .cabinet-access-empty::after,
.cabinet-page .cabinet-checkout-panel::after {
  position: absolute;
  inset: 0;
  border-top: 1px solid var(--line-cabinet-highlight);
  border-left: 1px solid var(--line-cabinet-side-highlight);
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.cabinet-page .cabinet-action-row__content > span:last-child,
.cabinet-page .cabinet-support-row > span:not(.cabinet-row__chevron) {
  display: grid;
  gap: var(--space-1);
}

.cabinet-page .cabinet-action-row strong,
.cabinet-page .cabinet-support-row strong {
  font-size: var(--font-size-row);
}

.cabinet-page .cabinet-action-row small,
.cabinet-page .cabinet-support-row small {
  color: var(--text-muted);
  font-size: var(--font-size-small);
}

.cabinet-page .cabinet-order-callout__status,
.cabinet-page .cabinet-order-callout__summary,
.cabinet-page .cabinet-order-callout__note {
  margin: 0;
}

.cabinet-page .cabinet-order-callout__status {
  grid-area: status;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-warning);
  font-size: var(--font-size-small);
  font-weight: 740;
}

.cabinet-page .cabinet-order-callout__status span {
  width: var(--space-2);
  height: var(--space-2);
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--warning);
}

.cabinet-page .cabinet-order-callout__summary {
  grid-area: summary;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  color: var(--text);
}

.cabinet-page .cabinet-order-callout__summary h2 {
  margin: 0;
  font-size: var(--font-size-heading);
  line-height: var(--line-height-tight);
}

.cabinet-page .cabinet-order-callout__summary strong {
  color: var(--text-soft);
  font-size: var(--font-size-row);
  font-weight: 720;
}

.cabinet-page .cabinet-order-callout__note {
  grid-area: note;
  max-width: 52ch;
  color: var(--text-muted);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  text-wrap: pretty;
}

.cabinet-page .cabinet-order-callout__action {
  grid-area: action;
  justify-self: start;
  margin-top: var(--space-1);
  white-space: nowrap;
}

.cabinet-page .cabinet-current-access {
  margin: var(--space-3) 0 0;
  color: var(--text-muted);
  font-size: var(--font-size-small);
}

.cabinet-page .cabinet-access-summary {
  position: relative;
  padding: var(--space-5);
  border: 1px solid var(--line-cabinet-action);
  border-radius: var(--radius);
  background: var(--surface-cabinet-action);
  box-shadow: var(--shadow-cabinet-action);
  overflow: hidden;
}

.cabinet-page .cabinet-access-summary__heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.cabinet-page .cabinet-access-summary__heading > div {
  min-width: 0;
}

.cabinet-page .cabinet-access-summary__icon,
.cabinet-page .cabinet-access-empty__icon,
.cabinet-page .cabinet-focused-state__icon {
  display: grid;
  width: var(--cabinet-state-icon-size);
  height: var(--cabinet-state-icon-size);
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line-cabinet-surface);
  border-radius: var(--radius-small);
  background: var(--surface-cabinet-normal);
  box-shadow: var(--shadow-cabinet-icon-halo);
}

.cabinet-page .cabinet-access-summary__icon::before,
.cabinet-page .cabinet-access-empty__icon::before,
.cabinet-page .cabinet-focused-state__icon::before {
  width: var(--icon-size-large);
  height: var(--icon-size-large);
  content: "";
  background: var(--accent);
  mask: url("/assets/icons/shield-check.svg") center / contain no-repeat;
  transform: translateZ(0);
}

.cabinet-page .cabinet-access-summary__heading p,
.cabinet-page .cabinet-access-summary__heading h2 {
  margin: 0;
}

.cabinet-page .cabinet-access-summary__heading p {
  color: var(--text-accent-muted);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.cabinet-page .cabinet-access-summary__heading h2 {
  margin-top: var(--space-1);
  font-size: var(--font-size-heading);
}

.cabinet-page .cabinet-access-summary__facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 0.45fr);
  gap: var(--space-5);
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-subscription);
}

.cabinet-page .cabinet-access-summary__facts div {
  display: grid;
  gap: var(--space-1);
}

.cabinet-page .cabinet-access-summary__facts dt,
.cabinet-page .cabinet-access-summary__facts dd,
.cabinet-page .cabinet-access-summary__facts small {
  margin: 0;
}

.cabinet-page .cabinet-access-summary__facts dt,
.cabinet-page .cabinet-access-summary__facts small {
  color: var(--text-muted);
  font-size: var(--font-size-small);
}

.cabinet-page .cabinet-access-summary__facts dd {
  color: var(--text);
  font-size: var(--font-size-row);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.cabinet-page .cabinet-access-empty {
  position: relative;
  display: grid;
  grid-template-columns: var(--cabinet-state-icon-size) minmax(0, 1fr) auto;
  width: min(100%, var(--cabinet-pending-max-width));
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--line-cabinet-action);
  border-radius: var(--radius);
  background: var(--surface-cabinet-action);
  box-shadow: var(--shadow-cabinet-action);
  overflow: hidden;
}

.cabinet-page .cabinet-access-empty__icon {
  border-color: var(--line-cabinet-surface);
  background: var(--surface-cabinet-normal);
}

.cabinet-page .cabinet-access-empty__icon::before {
  background: var(--text-muted);
  mask-image: url("/assets/icons/shield.svg");
  transform: translateZ(0);
}

.cabinet-page .cabinet-access-empty__copy h2,
.cabinet-page .cabinet-access-empty__copy p {
  margin: 0;
}

.cabinet-page .cabinet-access-empty__copy h2 {
  font-size: var(--font-size-heading);
}

.cabinet-page .cabinet-access-empty__copy p {
  max-width: 48ch;
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: var(--font-size-small);
}

.cabinet-page .cabinet-action-section {
  margin-top: var(--space-7);
}

.cabinet-page .cabinet-action-section h2 {
  margin: 0 0 var(--space-4);
  color: var(--text);
  font-size: var(--font-size-subheading);
}

.cabinet-page .cabinet-action-section__copy {
  margin: 0 0 var(--space-4);
  color: var(--text-muted);
}

.cabinet-page .cabinet-support-list {
  border-top: 1px solid var(--line);
}

.cabinet-page .cabinet-action-row,
.cabinet-page .cabinet-support-row,
.cabinet-page .cabinet-account-row {
  position: relative;
  display: flex;
  /* A button shrink-wraps on `width: auto`, so the span is stated. */
  width: calc(100% + var(--cabinet-focus-gutter) * 2);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  /* The highlight reaches past the text on both sides so it reads as a target
     rather than a tint of the page. The overhang is exactly the gutter the
     scroll container keeps for focus rings, so nothing can scroll sideways. */
  margin-inline: calc(var(--cabinet-focus-gutter) * -1);
  padding: var(--space-4) var(--cabinet-focus-gutter);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: transparent;
  color: var(--text);
  text-align: left;
  transition: background-color 140ms ease;
}

.cabinet-page .cabinet-action-row:hover,
.cabinet-page .cabinet-support-row:hover {
  background: var(--surface-cabinet-row-hover);
}

.cabinet-page .cabinet-action-row:hover .cabinet-action-row__icon {
  border-color: var(--line-cabinet-row-hover);
}

.cabinet-page .cabinet-action-row__content {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-3);
}

.cabinet-page .cabinet-action-row__icon {
  display: grid;
  width: var(--cabinet-action-icon-size);
  height: var(--cabinet-action-icon-size);
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line-cabinet-surface);
  border-radius: var(--radius-small);
  background: var(--surface-cabinet-normal);
  box-shadow: inset 0 1px 0 var(--line-cabinet-highlight);
}

.cabinet-page .cabinet-action-row__icon::before,
.cabinet-page .cabinet-row__chevron {
  width: var(--icon-size-default);
  height: var(--icon-size-default);
  content: "";
  background: var(--text-muted);
  mask: url("/assets/icons/link.svg") center / contain no-repeat;
  transform: translateZ(0);
}

.cabinet-page .cabinet-action-row--primary .cabinet-action-row__icon {
  border-color: var(--line-accent-subtle);
  background: var(--accent-surface-subtle);
}

.cabinet-page .cabinet-action-row--primary .cabinet-action-row__icon::before,
.cabinet-page .cabinet-action-row--primary .cabinet-row__chevron {
  background: var(--accent);
}

.cabinet-page .cabinet-action-row__icon--devices::before {
  mask-image: url("/assets/icons/smartphone.svg");
  transform: translateZ(0);
}

.cabinet-page .cabinet-action-row__icon--calendar::before {
  mask-image: url("/assets/icons/calendar-plus.svg");
  transform: translateZ(0);
}

.cabinet-page .cabinet-action-row__icon--bell::before {
  mask-image: url("/assets/icons/bell.svg");
  transform: translateZ(0);
}

.cabinet-page .cabinet-row__chevron {
  display: block;
  flex: 0 0 auto;
  mask-image: url("/assets/icons/chevron-right.svg");
  transform: translateZ(0);
  transition: transform 140ms ease, background-color 140ms ease;
}

.cabinet-page .cabinet-action-row:hover .cabinet-row__chevron,
.cabinet-page .cabinet-support-row:hover .cabinet-row__chevron {
  transform: translate3d(3px, 0, 0);
}

.cabinet-page .cabinet-action-row:hover .cabinet-action-row__icon::before,
.cabinet-page .cabinet-action-row:hover .cabinet-row__chevron,
.cabinet-page .cabinet-support-row:hover .cabinet-row__chevron {
  background: var(--accent);
}

.cabinet-page .cabinet-primary-action {
  width: 100%;
}

.cabinet-page .cabinet-empty-card {
  padding: var(--space-5);
}

.cabinet-page .cabinet-empty-card h2 {
  margin: var(--space-5) 0 var(--space-2);
  color: var(--text);
  font-size: var(--font-size-panel-title);
  line-height: var(--line-height-panel-title);
}

.cabinet-page .cabinet-empty-card > p {
  margin: 0;
  color: var(--text-muted);
}

.cabinet-page .cabinet-empty-card .cabinet-primary-action {
  margin-top: var(--space-5);
}

/* A linked account is a fact and one rare action, so the row itself is not a target: only the
   detach is pressable, and it carries the same weight as detaching a device. */
.cabinet-page .cabinet-account-row__action {
  flex: 0 0 auto;
  padding: 0;
  background: transparent;
  color: var(--text-danger);
  font-size: var(--font-size-small);
  font-weight: 740;
}

/* Without a bot address there is no one-tap handoff, so the address itself has to be readable and
   copyable, and it needs the full width of the row rather than a place beside the text. */
.cabinet-page .cabinet-account-row--stacked {
  display: grid;
  gap: var(--space-3);
}

.cabinet-page .cabinet-account-row--stacked .cabinet-link-field {
  margin-top: 0;
}

.cabinet-page .cabinet-link-field {
  display: grid;
  gap: var(--space-2-5);
  margin-top: var(--space-5);
}

.cabinet-page .cabinet-link-field input {
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-2-5) var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-small);
  outline: 0;
  background: var(--surface-inset);
  color: var(--text-soft);
  font-size: var(--font-size-body);
}

.cabinet-page .cabinet-link-field input:focus-visible {
  border-color: var(--line-accent-soft);
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.cabinet-page .cabinet-link-field__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2-5);
}

.cabinet-page .cabinet-plan-picker {
  display: grid;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.cabinet-page .cabinet-plan-option {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto var(--icon-size-default);
  width: 100%;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  overflow: hidden;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.cabinet-page .cabinet-plan-option::before {
  position: absolute;
  top: var(--space-2);
  bottom: var(--space-2);
  left: 0;
  width: 1px;
  content: "";
  background: var(--accent);
  opacity: 0;
  transition: opacity 140ms ease;
}

.cabinet-page .cabinet-plan-option:last-child {
  border-bottom: 0;
}

.cabinet-page .cabinet-plan-option:active {
  border-color: var(--line-strong);
  background: var(--surface-inset);
  transform: translateY(1px);
}

.cabinet-page .cabinet-plan-option__content,
.cabinet-page .cabinet-plan-option__price {
  display: grid;
  gap: var(--space-1);
}

.cabinet-page .cabinet-plan-option__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.cabinet-page .cabinet-plan-option__title small {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-accent-muted);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-small);
}

.cabinet-page .cabinet-plan-option__content strong,
.cabinet-page .cabinet-plan-option__price strong {
  font-size: var(--font-size-body);
}

.cabinet-page .cabinet-plan-option small {
  color: var(--text-muted);
  font-size: var(--font-size-small);
}

.cabinet-page .cabinet-plan-option__price {
  text-align: right;
}

.cabinet-page .cabinet-plan-option__price strong,
.cabinet-page .cabinet-plan-option__chevron {
  transition: color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.cabinet-page .cabinet-plan-option--recommended {
  background: var(--surface-cabinet-row-recommended);
}

.cabinet-page .cabinet-plan-option--recommended .cabinet-plan-option__content > small {
  color: var(--text-accent-featured);
}

.cabinet-page .cabinet-plan-option__chevron {
  display: block;
  width: var(--icon-size-default);
  height: var(--icon-size-default);
  background: var(--text-muted);
  mask: url("/assets/icons/chevron-right.svg") center / contain no-repeat;
  transform: translateZ(0);
}

.cabinet-page .cabinet-plan-option--recommended .cabinet-plan-option__chevron,
.cabinet-page .cabinet-plan-option:focus-visible .cabinet-plan-option__chevron {
  background: var(--accent);
}

.cabinet-page .cabinet-plan-option:focus-visible::before {
  opacity: 1;
}

@media (hover: hover) {
  .cabinet-page .cabinet-plan-option:hover {
    border-color: var(--line-cabinet-row-hover);
    background: var(--surface-cabinet-row-hover);
  }

  .cabinet-page .cabinet-plan-option:hover::before {
    opacity: 0.72;
  }

  .cabinet-page .cabinet-plan-option:hover .cabinet-plan-option__price strong {
    color: var(--text-accent-soft);
  }

  .cabinet-page .cabinet-plan-option:hover .cabinet-plan-option__chevron {
    background: var(--accent);
    transform: translateX(2px);
  }
}

.cabinet-page .cabinet-checkout-flow {
  display: grid;
  gap: var(--space-5);
}

.cabinet-page .cabinet-checkout {
  max-width: var(--cabinet-checkout-max-width);
  margin: 0 auto;
}

.cabinet-page .cabinet-checkout-panel {
  position: relative;
  padding: var(--space-6);
  border: 1px solid var(--line-cabinet-action);
  border-radius: var(--radius);
  background: var(--surface-cabinet-checkout);
  box-shadow: var(--shadow-cabinet-checkout);
  overflow: hidden;
}

.cabinet-page .cabinet-checkout-panel .cabinet-screen-heading {
  margin-bottom: var(--space-2);
}

.cabinet-page .cabinet-checkout-flow__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-5);
  align-items: end;
}

.cabinet-page .cabinet-checkout-flow__period {
  margin: 0;
  color: var(--text-soft);
  font-size: var(--font-size-subheading);
  font-weight: 700;
}

.cabinet-page .cabinet-checkout-flow__summary small {
  display: block;
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: var(--font-size-small);
}

.cabinet-page .cabinet-checkout-flow__amount {
  margin: 0;
  color: var(--text);
  font-size: var(--font-size-display);
  font-weight: 780;
  line-height: var(--line-height-tight);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.cabinet-page .cabinet-checkout-flow__pay {
  width: 100%;
}

.cabinet-page .cabinet-checkout-flow__payment {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.cabinet-page .cabinet-checkout-flow--result {
  gap: var(--space-4);
}

.cabinet-page .cabinet-checkout-flow__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--text-soft);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.cabinet-page .cabinet-checkout-flow__status span {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--warning);
}

.cabinet-page .cabinet-checkout-flow__note {
  max-width: 460px;
  margin: 0;
  color: var(--text-muted);
  font-size: var(--font-size-small);
  text-wrap: pretty;
}

.cabinet-page .cabinet-checkout-flow__processing {
  display: grid;
  gap: var(--space-2);
}

.cabinet-page .cabinet-checkout-flow__processing-copy {
  display: grid;
  gap: var(--space-2);
}

.cabinet-page .cabinet-checkout-flow__secondary {
  display: flex;
  align-items: center;
  min-height: var(--control-height-compact);
  padding-top: var(--space-2);
}

.cabinet-page .cabinet-checkout-flow__refresh {
  justify-self: start;
  min-height: var(--control-height-compact);
  padding: var(--space-2) 0;
}

.cabinet-page .cabinet-checkout-flow__refresh {
  color: var(--accent);
}

.cabinet-page .cabinet-danger-action {
  min-height: var(--control-height-compact);
  padding: var(--space-2) 0;
  color: var(--text-muted);
}

@media (hover: hover) {
  .cabinet-page .cabinet-danger-action:hover:not(:disabled) {
    color: var(--text-danger-hover);
  }
}

@media (min-width: 801px) {
  .cabinet-page[data-cabinet-active-view="checkout"] .cabinet-main {
    display: grid;
    align-content: start;
    padding-block: var(--space-8);
  }
}

.cabinet-page .cabinet-focused-state {
  display: grid;
  width: min(100%, var(--cabinet-focused-max-width));
  justify-items: start;
  gap: var(--space-4);
  margin: 0;
}

.cabinet-page .cabinet-focused-state--empty {
  width: min(100%, var(--cabinet-empty-state-max-width));
  justify-items: center;
  gap: var(--space-3);
  margin: var(--space-7) auto 0;
  padding-top: var(--space-2);
  text-align: center;
}

.cabinet-page .cabinet-focused-state__icon--devices::before {
  mask-image: url("/assets/icons/smartphone.svg");
  transform: translateZ(0);
}

.cabinet-page .cabinet-focused-state__icon--devices {
  box-shadow: var(--shadow-cabinet-icon-halo);
}

.cabinet-page .cabinet-device-empty {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.8fr);
  width: min(100%, var(--cabinet-device-empty-max-width));
  min-height: 280px;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-6);
}

.cabinet-page .cabinet-device-empty__copy {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
}

.cabinet-page .cabinet-device-empty__copy h2,
.cabinet-page .cabinet-device-empty__copy p {
  margin: 0;
}

.cabinet-page .cabinet-device-empty__copy h2 {
  color: var(--text);
  font-size: var(--font-size-panel-title);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-panel-title);
  text-wrap: balance;
}

.cabinet-page .cabinet-device-empty__copy > p:not(.cabinet-device-empty__meta) {
  max-width: 38ch;
  color: var(--text-muted);
  text-wrap: pretty;
}

.cabinet-page .cabinet-device-empty__meta {
  color: var(--text-accent-muted);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.cabinet-page .cabinet-device-empty__copy .button {
  margin-top: var(--space-2);
}

.cabinet-page .cabinet-device-empty__icon {
  display: none;
}

.cabinet-page .cabinet-device-empty__visual {
  position: relative;
  width: min(100%, 300px);
  aspect-ratio: 1.45;
  justify-self: end;
  background: var(--surface-cabinet-device-visual);
  isolation: isolate;
}

.cabinet-page .cabinet-device-empty__visual::before,
.cabinet-page .cabinet-device-empty__visual::after {
  position: absolute;
  z-index: -1;
  content: "";
  border: 1px solid var(--line-cabinet-geometry);
  transform: rotate(-14deg);
}

.cabinet-page .cabinet-device-empty__visual::before {
  inset: 22% 10% 19% 16%;
}

.cabinet-page .cabinet-device-empty__visual::after {
  inset: 31% 20% 28% 6%;
  opacity: 0.55;
}

.cabinet-page .cabinet-device-empty__beam {
  position: absolute;
  top: 51%;
  right: 5%;
  left: 7%;
  height: 1px;
  background: var(--accent-rule);
  opacity: 0.32;
  transform: rotate(-14deg);
  transform-origin: center;
}

.cabinet-page .cabinet-device-empty__device {
  position: absolute;
  border: 1px solid var(--line-cabinet-surface);
  border-top-color: var(--line-cabinet-highlight);
  border-radius: var(--radius-small);
  background: var(--surface-cabinet-normal);
  box-shadow: var(--shadow-cabinet-surface);
}

.cabinet-page .cabinet-device-empty__device::after {
  position: absolute;
  inset: var(--space-2);
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-tight);
  content: "";
}

.cabinet-page .cabinet-device-empty__device--phone {
  top: 18%;
  left: 25%;
  width: 58px;
  height: 112px;
  transform: rotate(-6deg);
}

.cabinet-page .cabinet-device-empty__device--tablet {
  right: 17%;
  bottom: 20%;
  width: 112px;
  height: 76px;
  transform: rotate(5deg);
}

.cabinet-page .cabinet-device-empty__node {
  position: absolute;
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--accent);
  box-shadow: var(--shadow-cabinet-icon-halo);
}

.cabinet-page .cabinet-device-empty__node--start {
  top: 61%;
  left: 11%;
}

.cabinet-page .cabinet-device-empty__node--end {
  top: 34%;
  right: 10%;
}

.cabinet-page .cabinet-focused-state h2,
.cabinet-page .cabinet-focused-state p {
  margin: 0;
}

.cabinet-page .cabinet-focused-state h2 {
  font-size: var(--font-size-heading);
}

.cabinet-page .cabinet-focused-state p {
  max-width: 40ch;
  color: var(--text-muted);
  text-wrap: pretty;
}

.cabinet-page .cabinet-screen-note {
  margin: var(--space-4) 0 0;
  color: var(--text-muted);
  font-size: var(--font-size-small);
}

/* A row nobody can act on: the browser or its own settings decide this. Muting the icon keeps
   it from reading as a control that failed to respond. */
.cabinet-page .cabinet-account-row--quiet .cabinet-action-row__icon::before {
  background: var(--text-muted);
}

/* Steps followed on the device in the reader's hand, so they are numbered and spaced apart
   rather than packed like prose. They sit inside the row, aligned under its text. */
.cabinet-page .cabinet-steps {
  /* Indented past the icon so the numbers line up under the row's own text instead of
     hanging out to its left. */
  margin: 0 0 0 calc(var(--cabinet-action-icon-size) + var(--space-3));
  padding-left: var(--space-4);
  color: var(--text-muted);
  font-size: var(--font-size-small);
  display: grid;
  gap: var(--space-2);
}

.cabinet-page .cabinet-steps li {
  padding-left: var(--space-1);
}

/* Three slots, not a list. The screen's subject is how many of the three are
   used, and a full-width row put the device name and its "Отключить" nine
   hundred pixels apart with nothing in between. */
.cabinet-page .cabinet-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--cabinet-slot-min-width), 1fr));
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.cabinet-page .cabinet-slot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "icon icon"
    "title title"
    "meta meta"
    "since remove";
  gap: var(--space-2) var(--space-3);
  align-content: start;
  min-height: var(--cabinet-slot-min-height);
  padding: var(--space-4);
  border: 1px solid var(--line-cabinet-surface);
  border-radius: var(--radius);
  background: var(--surface-cabinet-normal);
  text-align: left;
}

.cabinet-page .cabinet-slot--free {
  border-style: dashed;
  border-color: var(--line-cabinet-action);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.cabinet-page .cabinet-slot--free:hover,
.cabinet-page .cabinet-slot--free:focus-visible {
  border-color: var(--accent);
  background: var(--surface-cabinet-action);
}

.cabinet-page .cabinet-slot--spare {
  grid-template-areas: "spare";
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  border-style: dashed;
  border-color: var(--line-cabinet-highlight);
  background: transparent;
}

.cabinet-page .cabinet-slot__spare {
  grid-area: spare;
  color: var(--text-muted);
  font-size: var(--font-size-small);
}

.cabinet-page .cabinet-slot__icon {
  display: grid;
  grid-area: icon;
  width: var(--cabinet-action-icon-size);
  height: var(--cabinet-action-icon-size);
  place-items: center;
  border: 1px solid var(--line-cabinet-surface);
  border-radius: var(--radius-small);
  background: var(--surface-cabinet-normal);
  box-shadow: inset 0 1px 0 var(--line-cabinet-highlight);
}

.cabinet-page .cabinet-slot__icon::before {
  width: var(--icon-size-default);
  height: var(--icon-size-default);
  content: "";
  background: var(--text-muted);
  transform: translateZ(0);
}

.cabinet-page .cabinet-slot__icon--smartphone::before {
  mask: url("/assets/icons/smartphone.svg") center / contain no-repeat;
  transform: translateZ(0);
}

.cabinet-page .cabinet-slot__icon--tablet::before {
  mask: url("/assets/icons/tablet.svg") center / contain no-repeat;
  transform: translateZ(0);
}

.cabinet-page .cabinet-slot__icon--monitor::before {
  mask: url("/assets/icons/monitor.svg") center / contain no-repeat;
  transform: translateZ(0);
}

.cabinet-page .cabinet-slot__icon--add::before {
  background: var(--accent);
  mask: url("/assets/icons/plus.svg") center / contain no-repeat;
  transform: translateZ(0);
}

.cabinet-page .cabinet-slot--free .cabinet-slot__icon {
  border-color: var(--line-cabinet-action);
  background: var(--surface-cabinet-action);
}

.cabinet-page .cabinet-slot__title {
  grid-area: title;
  margin: 0;
  color: var(--text);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}

.cabinet-page .cabinet-slot__meta {
  grid-area: meta;
  margin: 0;
  color: var(--text-muted);
  font-size: var(--font-size-small);
  overflow-wrap: anywhere;
}

.cabinet-page .cabinet-slot__since {
  grid-area: since;
  align-self: end;
  color: var(--text-muted);
  font-size: var(--font-size-label);
  font-variant-numeric: tabular-nums;
}

.cabinet-page .cabinet-slot__remove {
  grid-area: remove;
  align-self: end;
  padding: 0;
  background: transparent;
  color: var(--text-danger);
  font-size: var(--font-size-small);
  font-weight: 740;
}

.cabinet-page .cabinet-slot__remove:hover {
  color: var(--text-danger-hover);
}

.cabinet-page .cabinet-loading-state {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-height);
  color: var(--text-muted);
}

.cabinet-page .cabinet-loading-state p {
  margin: 0;
}

.cabinet-page .cabinet-loading-state__indicator {
  width: var(--icon-size-default);
  height: var(--icon-size-default);
  flex: 0 0 auto;
  border: 2px solid var(--line-strong);
  border-top-color: var(--accent);
  border-radius: var(--radius-pill);
  animation: cabinet-loading-spin 800ms linear infinite;
}

@keyframes cabinet-loading-spin {
  to { transform: rotate(1turn); }
}

.cabinet-page .cabinet-bottom-nav {
  display: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(calc(100% - (var(--cabinet-bottom-nav-inset) * 2)), var(--cabinet-max-width));
  min-height: var(--cabinet-bottom-nav-height);
  margin: 0 auto calc(var(--cabinet-bottom-nav-offset) + env(safe-area-inset-bottom));
  padding: var(--cabinet-bottom-nav-padding);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-large);
  background: var(--surface-cabinet-floating);
  box-shadow: var(--shadow-floating-nav);
  backdrop-filter: blur(10px);
}

.cabinet-page .button--primary {
  border-color: var(--cta-border);
  background: var(--cta-surface);
  box-shadow: var(--shadow-cabinet-cta);
}

.cabinet-page .button--primary:active:not(:disabled) {
  background: var(--accent-strong);
  box-shadow: var(--shadow-cabinet-cta-active);
  transform: translateY(1px);
}

@media (hover: hover) {
  .cabinet-page .button--primary:hover:not(:disabled) {
    border-color: var(--cta-border-hover);
    background: var(--cta-surface-hover);
    box-shadow: var(--shadow-cabinet-cta-hover);
  }
}

.cabinet-page .cabinet-bottom-nav button {
  display: grid;
  grid-template-rows: var(--cabinet-bottom-nav-chip-height) auto;
  min-height: calc(var(--cabinet-bottom-nav-height) - (var(--cabinet-bottom-nav-padding) * 2));
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 0;
  background: transparent;
  color: var(--text-muted);
  /* A tab is one tap and nothing else. Left to the platform, a second tap is a zoom gesture. */
  touch-action: manipulation;
  transition: color 160ms ease;
}

/* The active mark hugs the icon instead of filling the cell: four marks on one surface read as a
   bar, four filled cells read as four buttons that happen to be adjacent. */
.cabinet-page .cabinet-bottom-nav__icon {
  display: grid;
  width: min(100%, var(--cabinet-bottom-nav-chip-width));
  height: var(--cabinet-bottom-nav-chip-height);
  border-radius: var(--radius-pill);
  place-items: center;
  background: transparent;
  transition: background-color 160ms ease;
}

.cabinet-page .cabinet-bottom-nav__icon::before {
  width: var(--icon-size-default);
  height: var(--icon-size-default);
  content: "";
  background: currentcolor;
  mask: url("/assets/icons/house.svg") center / contain no-repeat;
  transform: translateZ(0);
}

.cabinet-page .cabinet-bottom-nav__label {
  font-size: var(--font-size-overline);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  white-space: nowrap;
}

.cabinet-page .cabinet-bottom-nav button[data-cabinet-tab="plans"] .cabinet-bottom-nav__icon::before {
  mask-image: url("/assets/icons/calendar-plus.svg");
  transform: translateZ(0);
}

.cabinet-page .cabinet-bottom-nav button[data-cabinet-tab="devices"] .cabinet-bottom-nav__icon::before {
  mask-image: url("/assets/icons/smartphone.svg");
  transform: translateZ(0);
}

.cabinet-page .cabinet-bottom-nav button[data-cabinet-tab="support"] .cabinet-bottom-nav__icon::before {
  mask-image: url("/assets/icons/circle-help.svg");
  transform: translateZ(0);
}

/* A touch device has no hover to leave, so an unguarded rule stays lit on the last tapped tab. */
@media (hover: hover) {
  .cabinet-page .cabinet-bottom-nav button:hover {
    color: var(--text-soft);
  }
}

.cabinet-page .cabinet-bottom-nav button.is-active {
  color: var(--accent);
}

.cabinet-page .cabinet-bottom-nav button.is-active .cabinet-bottom-nav__icon {
  background: var(--accent-surface-active);
}

.confirm-dialog {
  width: min(calc(100% - (var(--space-6) * 2)), var(--dialog-max-width));
  padding: 0;
  border: 1px solid var(--line-cabinet-action);
  border-radius: var(--radius);
  background: var(--surface-cabinet-modal);
  color: var(--text);
  box-shadow: var(--shadow-cabinet-checkout);
}

.confirm-dialog::backdrop {
  background: var(--surface-modal-backdrop);
  backdrop-filter: blur(3px) saturate(0.8);
}

.confirm-dialog__content {
  position: relative;
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
}

.confirm-dialog__content:focus {
  outline: 0;
}

.confirm-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.confirm-dialog__header .eyebrow {
  margin: 0;
}

.confirm-dialog__close {
  margin-top: calc(var(--space-1) * -1);
  margin-right: calc(var(--space-1) * -1);
}

.confirm-dialog__close::before {
  width: var(--icon-size-default);
  height: var(--icon-size-default);
  content: "";
  background: currentcolor;
  mask: url("/assets/icons/x.svg") center / contain no-repeat;
  transform: translateZ(0);
}

.confirm-dialog h2 {
  font-size: var(--font-size-panel-title);
  line-height: var(--line-height-dialog-title);
}

.confirm-dialog__content > p:not(.eyebrow) {
  margin: 0;
  color: var(--text-muted);
}

.confirm-dialog__facts {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--line);
}

.confirm-dialog__facts div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}

.confirm-dialog__facts dt {
  color: var(--text-muted);
  font-size: var(--font-size-small);
}

.confirm-dialog__facts dd {
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: var(--font-size-caption);
  font-weight: 760;
  overflow-wrap: anywhere;
  text-align: right;
}

.confirm-dialog__facts .confirm-dialog__fact-value--accent {
  color: var(--text-accent-featured);
}

.confirm-dialog__facts .confirm-dialog__fact--stacked {
  grid-template-columns: 1fr;
  gap: var(--space-1);
}

.confirm-dialog__facts .confirm-dialog__fact--stacked dd {
  text-align: left;
}

.dialog-actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2-5);
  margin-top: var(--space-1);
}

@media (max-width: 420px) {
  .dialog-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 380px) {
  .confirm-dialog__facts div {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .confirm-dialog__facts dd {
    text-align: left;
  }

}

.toast {
  position: fixed;
  right: var(--toast-inset);
  bottom: calc(var(--toast-inset) + env(safe-area-inset-bottom));
  z-index: 50;
  max-width: min(calc(100% - (var(--toast-inset) * 2)), var(--toast-max-width));
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-small);
  background: var(--surface-toast);
  color: var(--text);
  box-shadow: var(--shadow);
  font-size: var(--font-size-caption);
}

@media (max-width: 800px) {
  .shell {
    width: min(calc(100% - (var(--page-gutter-compact) * 2)), var(--max-width));
  }

  .section[id] {
    scroll-margin-top: var(--section-anchor-offset-compact);
  }

  .site-header__inner {
    min-height: var(--site-header-height-compact);
  }

  .site-nav {
    display: none;
  }

  .site-header__actions {
    margin-left: auto;
  }

  .hero__content {
    grid-template-columns: 1fr;
    min-height: 100svh;
    padding: var(--hero-padding-compact);
  }

  .hero__copy {
    max-width: 560px;
  }

  .hero__visual {
    display: none;
  }

  .hero h1 {
    font-size: var(--font-size-public-h1-compact);
    line-height: var(--line-height-section-heading);
  }

  .hero__lead {
    font-size: var(--font-size-lead);
  }

  .section {
    padding: var(--space-10) 0;
  }

  .section--plans {
    padding-top: var(--space-9);
  }

  .section-heading--compact {
    max-width: none;
  }

  .period-picker {
    padding: var(--space-6);
  }

  .information-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .service-story {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .section--callout {
    padding-top: 56px;
    padding-bottom: 80px;
  }

  .callout {
    gap: var(--space-3);
    padding: var(--space-8) var(--space-5);
  }

  .callout .button {
    width: 100%;
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    align-items: start;
  }

  .cabinet-page .cabinet-topbar__inner,
  .cabinet-page .cabinet-main {
    width: min(calc(100% - (var(--cabinet-gutter) * 2)), var(--cabinet-max-width));
  }

  .cabinet-page--browser-auth.cabinet-page--browser-authenticated .cabinet-topbar__inner,
  .cabinet-page--browser-auth.cabinet-page--browser-authenticated .cabinet-main {
    width: min(calc(100% - (var(--cabinet-gutter) * 2)), var(--cabinet-max-width));
  }

  .cabinet-page .cabinet-main {
    padding-block: var(--cabinet-main-padding-block-compact);
  }

  .cabinet-page .cabinet-desktop-nav {
    display: none;
  }

  .cabinet-page .cabinet-bottom-nav {
    display: grid;
  }

  .cabinet-page:not(.cabinet-page--subview) .cabinet-topbar__title {
    display: none;
  }

  .cabinet-page--subview .cabinet-topbar__brand,
  .cabinet-page--subview .cabinet-topbar__sign-out {
    display: none;
  }

  .cabinet-page--subview .cabinet-topbar__title {
    display: block;
    margin-left: 0;
  }

  .cabinet-page .cabinet-screen-heading {
    margin-bottom: var(--space-5);
  }

  .cabinet-page .cabinet-access-summary__facts {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .cabinet-page .cabinet-access-empty {
    grid-template-columns: var(--cabinet-state-icon-size) minmax(0, 1fr);
  }

  .cabinet-page .cabinet-access-empty .button {
    grid-column: 1 / -1;
    width: 100%;
  }

}

/* 543px is where --cabinet-slot-min-width stops fitting two columns. Below it
   the grid is one column, and a stack of tall cards buries the list - so the
   device card lies back down into the row it reads as on a phone. */
@media (max-width: 543px) {
  .cabinet-page .cabinet-slot {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "icon title remove"
      "icon meta remove"
      "icon since remove";
    gap: var(--space-1) var(--space-3);
    align-content: center;
    min-height: 0;
  }

  .cabinet-page .cabinet-slot__icon,
  .cabinet-page .cabinet-slot__since,
  .cabinet-page .cabinet-slot__remove {
    align-self: center;
  }

  /* A spare slot only says how much room is left, and the heading says it in
     words. On one column it would just be a second copy of the same offer. */
  .cabinet-page .cabinet-slot--spare {
    display: none;
  }
}

@media (max-width: 460px) {
  .site-header__inner {
    gap: var(--space-3);
  }

  .brand {
    font-size: var(--font-size-subheading);
  }

  .brand__mark {
    width: var(--brand-mark-size-compact);
    height: var(--brand-mark-size-compact);
  }

  .site-header__actions .button {
    min-height: var(--control-height-compact);
    padding: var(--space-2) var(--space-3);
  }

  .hero__actions,
  .hero__actions .button,
  .hero__actions .button {
    width: 100%;
  }

  .hero__copy {
    text-align: left;
  }

  .hero__actions {
    justify-content: flex-start;
  }

  .hero__periods-link {
    justify-content: flex-start;
  }

  .period-picker {
    padding: var(--space-5);
  }

  .period-scale__caption {
    font-size: var(--font-size-small);
  }

  .period-summary {
    gap: var(--space-4);
    margin-top: var(--space-6);
  }

  .period-summary__action {
    width: 100%;
    margin-left: 0;
  }

  .steps li {
    grid-template-columns: var(--step-marker-size) minmax(0, 1fr);
    gap: var(--space-3);
  }

  .cabinet-page .cabinet-screen-heading h1 {
    font-size: var(--font-size-screen-title-mobile);
  }

  .cabinet-page .cabinet-empty-card {
    padding: var(--space-5);
  }

  .cabinet-page .cabinet-state-card h2 {
    margin-top: 3px;
    font-size: var(--font-size-panel-title-compact);
  }

  .cabinet-page .cabinet-state-card__header {
    grid-template-columns: var(--cabinet-state-icon-size) minmax(0, 1fr);
    align-items: start;
  }

  .cabinet-page .cabinet-state-card__facts {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .cabinet-page .cabinet-order-callout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "status"
      "summary"
      "note"
      "action";
    gap: var(--space-3);
  }

  .cabinet-page .cabinet-order-callout__action {
    width: 100%;
  }

  .cabinet-page .cabinet-device-empty {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: var(--space-5);
    margin-top: var(--space-6);
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-cabinet-normal);
    box-shadow: var(--shadow-cabinet-surface);
  }

  .cabinet-page .cabinet-device-empty__visual {
    display: none;
  }

  .cabinet-page .cabinet-device-empty__copy {
    max-width: var(--cabinet-empty-state-max-width);
    gap: var(--space-2);
  }

  .cabinet-page .cabinet-device-empty__icon {
    display: block;
    width: var(--icon-size-large);
    height: var(--icon-size-large);
    margin-bottom: var(--space-1);
    background: var(--accent);
    mask: url("/assets/icons/smartphone.svg") center / contain no-repeat;
    transform: translateZ(0);
  }

  .cabinet-page .cabinet-device-empty__copy h2 {
    font-size: var(--font-size-heading);
    line-height: var(--line-height-tight);
  }

  .cabinet-page .cabinet-device-empty__meta {
    order: 1;
    color: var(--text-muted);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-regular);
    letter-spacing: normal;
    text-transform: none;
  }

  .cabinet-page .cabinet-device-empty__copy .button {
    order: 2;
    width: 100%;
    margin-top: var(--space-3);
  }

  .cabinet-page .cabinet-topbar__title {
    font-size: var(--font-size-small);
  }

  .cabinet-page .cabinet-checkout-flow__pay {
    width: 100%;
  }

  .cabinet-page .cabinet-checkout-flow__summary {
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--space-2);
  }

  .cabinet-page .cabinet-checkout-flow__amount {
    text-align: start;
  }

  .cabinet-page .cabinet-checkout-panel {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .cabinet-page .cabinet-checkout-panel::after {
    display: none;
  }

  .cabinet-page .cabinet-focused-state .button {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .site-header__inner {
    gap: var(--space-2);
  }

  .site-header__actions .button {
    gap: var(--space-1);
    padding-right: var(--space-2);
    padding-left: var(--space-2);
    font-size: var(--font-size-small);
  }

  .cabinet-page:not(.cabinet-page--subview) .cabinet-topbar__title {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}