@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-public-overlay: rgb(8 11 15 / 20%);
  --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-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-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%);
  --line-accent-hover: rgb(101 169 237 / 70%);
  --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: #3d84ca;
  --accent-hover: #4b94da;
  --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%));
  --focus-ring: rgb(101 169 237 / 38%);
  --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;
  --shadow-hero-preview: 0 26px 64px rgb(0 0 0 / 32%);
  --shadow-modal: 0 28px 80px rgb(0 0 0 / 48%);
  --shadow-floating-nav: 0 12px 32px rgb(0 0 0 / 32%);

  /* 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-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-screen-title: 34px;
  --font-size-screen-title-mobile: 30px;
  --font-size-hero-lead: 19px;
  --font-size-public-h1: clamp(48px, 4.6vw, 68px);
  --font-size-public-h1-compact: clamp(43px, 12vw, 58px);
  --font-size-section-heading: clamp(34px, 3.4vw, 46px);
  --font-size-brand-name: 0.78em;
  --line-height-brand: 1;
  --line-height-body: 1.5;
  --line-height-tight: 1.15;
  --line-height-hero: 0.99;
  --line-height-section-heading: 1.08;
  --line-height-screen-title: 1.06;
  --line-height-panel-title: 1.12;
  --line-height-fact: 1.32;
  --line-height-dialog-title: 1.1;
  --tracking-brand: 0.02em;
  --tracking-eyebrow: 0.1em;
  --tracking-label: 0.08em;

  --radius: 8px;
  --radius-small: 6px;
  --radius-tight: 4px;
  --radius-pill: 999px;
  --icon-size-small: 16px;
  --icon-size-default: 18px;
  --icon-size-large: 22px;
  --control-height: 48px;
  --control-height-compact: 40px;
  --max-width: 1180px;
  --cabinet-max-width: 720px;
  --page-gutter: var(--space-5);
  --page-gutter-compact: var(--space-4);
  --cabinet-gutter: var(--space-4);
  --site-header-height: 76px;
  --site-header-height-compact: 68px;
  --section-anchor-offset: calc(var(--site-header-height) + var(--space-4));
  --section-anchor-offset-compact: calc(var(--site-header-height-compact) + var(--space-4));
  --site-nav-link-padding: 28px 0;
  --brand-mark-size: 36px;
  --brand-mark-size-compact: 34px;
  --brand-mark-size-footer: 30px;
  --cabinet-brand-mark-size: 31px;
  --hero-min-height: calc(100svh - var(--site-header-height));
  --hero-padding: 72px 0 112px;
  --hero-padding-compact: 64px 0 80px;
  --hero-grid-gap: var(--space-9);
  --hero-preview-width: 360px;
  --plan-card-min-height: 172px;
  --plan-card-min-height-compact: 172px;
  --cabinet-main-padding: 36px 0 42px;
  --cabinet-main-padding-compact: 30px 0 42px;
  --cabinet-checkout-max-width: 480px;
  --cabinet-checkout-action-width: 320px;
  --cabinet-metric-min-height: 96px;
  --cabinet-state-icon-size: 42px;
  --cabinet-action-icon-size: 36px;
  --badge-height: 28px;
  --cabinet-skeleton-row-height: 64px;
  --dialog-max-width: 420px;
  --toast-max-width: 380px;
  --toast-inset: 20px;
  --cabinet-topbar-height: 72px;
  --cabinet-bottom-nav-height: 64px;
  --cabinet-bottom-nav-inset: var(--cabinet-gutter);
  --cabinet-bottom-nav-offset: var(--space-3);
  --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;
  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;
}

button,
a {
  -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: 800;
  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: 760;
  line-height: var(--line-height-tight);
  text-align: center;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.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(--accent-strong);
  color: var(--text-on-accent);
}

.button--primary:hover:not(:disabled) {
  background: var(--accent-hover);
}

.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);
}

.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);
}

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

.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--ghost:hover:not(:disabled) {
  border-color: var(--line-accent-hover);
  background: var(--accent-soft);
  color: var(--text-accent-soft);
}

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

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

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

.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: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--line-header);
  background: var(--surface-header-translucent);
  backdrop-filter: blur(18px);
}

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

.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: 830;
  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: 700;
}

.site-nav a {
  padding: var(--site-nav-link-padding);
  transition: color 140ms ease;
}

.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);
}

.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-preview-width));
  gap: var(--hero-grid-gap);
  min-height: var(--hero-min-height);
  align-items: center;
  padding: var(--hero-padding);
}

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

.hero h1,
.section-heading h2,
.callout h2,
.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: 680px;
  font-size: var(--font-size-public-h1);
  line-height: var(--line-height-hero);
}

.hero__lead {
  max-width: 550px;
  margin: var(--space-5) 0 0;
  color: var(--text-soft);
  font-size: var(--font-size-hero-lead);
  line-height: var(--line-height-body);
}

.hero__statement {
  max-width: 500px;
  margin: var(--space-4) 0 0;
  color: var(--text-soft);
  font-size: var(--font-size-subheading);
  font-weight: 640;
  line-height: var(--line-height-body);
}

.hero__terms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  font-size: var(--font-size-subheading);
  font-weight: 680;
}

.hero__terms strong {
  color: var(--text);
  font-weight: 760;
}

.hero__term-limit {
  display: inline-flex;
  gap: var(--space-2);
  color: var(--text-muted);
}

.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: 740;
  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;
}

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

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

.hero-preview {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-hero-preview);
}

.hero-preview__topbar {
  display: flex;
  min-height: var(--control-height);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line);
  background: var(--surface-header);
  color: var(--text-soft);
  font-size: var(--font-size-small);
  font-weight: 720;
}

.hero-preview__brand {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-2);
  color: var(--text);
  font-size: var(--font-size-small);
  font-weight: 700;
  letter-spacing: var(--tracking-brand);
}

.hero-preview__brand img {
  width: var(--space-6);
  height: var(--space-6);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-small);
}

.hero-preview__main {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-5);
}

.hero-preview__eyebrow {
  margin: 0;
  color: var(--accent);
  font-size: var(--font-size-overline);
  font-weight: 800;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.hero-preview__title {
  margin: calc(var(--space-4) * -1) 0 0;
  color: var(--text-soft);
  font-size: var(--font-size-panel-title);
  font-weight: 780;
  line-height: var(--line-height-tight);
}

.hero-preview__facts {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--line);
}

.hero-preview__facts div {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}

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

.hero-preview__facts dd {
  margin: 0;
  color: var(--text);
  font-size: var(--font-size-caption);
  font-weight: 720;
}

.hero-preview__action {
  display: grid;
  grid-template-columns: var(--icon-size-default) minmax(0, 1fr) var(--icon-size-default);
  gap: var(--space-2);
  align-items: center;
  min-height: var(--control-height);
  padding: var(--space-3);
  border: 1px solid var(--line-accent-subtle);
  border-radius: var(--radius-small);
  background: var(--accent-surface-subtle);
  color: var(--text-accent-soft);
  font-size: var(--font-size-caption);
  font-weight: 760;
}

.hero-preview__action::before,
.hero-preview__action::after {
  display: block;
  width: var(--icon-size-default);
  height: var(--icon-size-default);
  content: "";
  background: var(--accent);
  mask: url("/assets/icons/link.svg") center / contain no-repeat;
}

.hero-preview__action::after {
  mask-image: url("/assets/icons/chevron-right.svg");
}

.hero-preview__navigation {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-height: var(--control-height);
  padding: var(--space-2);
  border-top: 1px solid var(--line);
  background: var(--surface-bottom-nav);
}

.hero-preview__navigation span {
  display: grid;
  place-items: center;
  color: var(--text-muted);
}

.hero-preview__navigation span::before {
  width: var(--icon-size-default);
  height: var(--icon-size-default);
  content: "";
  background: currentcolor;
  mask: url("/assets/icons/house.svg") center / contain no-repeat;
}

.hero-preview__navigation .is-active {
  color: var(--accent);
}

.hero-preview__navigation span.hero-preview__navigation-item--plans::before {
  mask-image: url("/assets/icons/calendar-plus.svg");
}

.hero-preview__navigation span.hero-preview__navigation-item--devices::before {
  mask-image: url("/assets/icons/smartphone.svg");
}

.hero-preview__navigation span.hero-preview__navigation-item--support::before {
  mask-image: url("/assets/icons/circle-help.svg");
}

.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);
}

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

.section-heading--plans {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.55fr);
  gap: var(--space-3) 56px;
  max-width: none;
  align-items: end;
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--line);
}

.section-heading--plans .eyebrow,
.section-heading--plans h2 {
  grid-column: 1;
}

.section-heading--plans p:not(.eyebrow) {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
}

.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);
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.plan-card {
  position: relative;
  min-height: var(--plan-card-min-height);
  padding: var(--space-5);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-plan);
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.plan-card:hover {
  border-color: var(--line-accent-soft);
  background: var(--surface-plan-hover);
  transform: translateY(-3px);
}

.plan-card--featured {
  border-color: var(--line-accent);
  background: var(--surface-plan-featured);
}

.plan-card--featured::before,
.callout::before {
  position: absolute;
  top: 0;
  right: var(--space-5);
  left: var(--space-5);
  height: 3px;
  border-radius: 0 0 2px 2px;
  background: var(--accent-rule);
  content: "";
  pointer-events: none;
}

.plan-card h3 {
  margin: 0;
  color: var(--text-soft);
  font-size: var(--font-size-body);
}

.plan-card__price {
  margin: var(--space-6) 0 0;
  color: var(--text);
  font-size: var(--font-size-display);
  font-weight: 800;
  letter-spacing: normal;
}

.section-note,
.site-footer__caption {
  color: var(--text-muted);
}

.plan-card__badge {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  margin: 0;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--line-accent-subtle);
  border-radius: var(--radius-tight);
  background: var(--accent-soft);
  color: var(--text-accent-muted);
  font-size: var(--font-size-overline);
  font-weight: 760;
}

.section-note {
  margin: var(--space-4) 0 0;
  font-size: var(--font-size-caption);
}

.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;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.steps li {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--line);
}

.steps__number {
  color: var(--accent);
  font-size: var(--font-size-small);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
}

.steps h3 {
  margin: 0;
  color: var(--text);
  font-size: var(--font-size-heading);
}

.steps p {
  max-width: 460px;
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
}

.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);
}

.service-principles {
  display: grid;
}

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

.service-principle h3 {
  max-width: 460px;
  margin: 0;
  color: var(--text);
  font-size: var(--font-size-heading);
  font-weight: 760;
  line-height: var(--line-height-tight);
}

.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);
}

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

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

.callout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-7);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-callout);
  box-shadow: var(--shadow);
}

.callout > div {
  max-width: 620px;
}

.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-small);
}

.footer-links {
  display: grid;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--font-size-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;
}

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(--canvas-app);
}

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

.cabinet-page .cabinet-topbar__inner {
  display: flex;
  width: min(calc(100% - (var(--cabinet-gutter) * 2)), var(--cabinet-max-width));
  min-height: var(--cabinet-topbar-height);
  align-items: center;
  gap: var(--space-3);
  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);
}

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

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

.cabinet-page .cabinet-topbar__sign-out {
  margin-left: var(--space-3);
  padding: var(--space-2) 0;
  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--subview .cabinet-topbar__title {
  margin-left: 0;
}

.cabinet-page .cabinet-main {
  width: min(calc(100% - (var(--cabinet-gutter) * 2)), var(--cabinet-max-width));
  min-height: 0;
  margin: 0 auto;
  padding: var(--cabinet-main-padding);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}

.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-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;
}

.cabinet-page .cabinet-view:not([hidden]) {
  animation: cabinet-screen-in 180ms ease-out both;
}

@keyframes cabinet-screen-in {
  from {
    opacity: 0;
    transform: translateY(7px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.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);
  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-connect-card,
.cabinet-page .cabinet-empty-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-card);
}

.cabinet-page .cabinet-state-card {
  padding: var(--space-4) 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-raised);
}

.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__header--with-badge {
  grid-template-columns: var(--cabinet-state-icon-size) minmax(0, 1fr) auto;
}

.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;
}

.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");
}

.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__badge {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  min-height: var(--badge-height);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-tight);
  background: var(--surface-raised);
  color: var(--text-soft);
  font-size: var(--font-size-label);
  font-weight: 740;
  white-space: nowrap;
}

.cabinet-page .cabinet-state-card__badge--pending {
  border-color: var(--line-warning-strong);
  background: var(--warning-soft);
  color: var(--text-warning);
}

.cabinet-page .cabinet-state-card__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2-5);
  margin: 0;
}

.cabinet-page .cabinet-state-card__facts div {
  display: grid;
  gap: var(--space-2);
  min-height: var(--cabinet-metric-min-height);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--surface-metric);
}

.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;
}

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

.cabinet-page .cabinet-order-callout {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--line-warning);
  border-radius: var(--radius-small);
  background: var(--warning-soft);
  color: var(--text);
  text-align: left;
}

.cabinet-page .cabinet-order-callout > span:not(.cabinet-row__chevron),
.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-order-callout strong,
.cabinet-page .cabinet-action-row strong,
.cabinet-page .cabinet-support-row strong {
  font-size: var(--font-size-row);
}

.cabinet-page .cabinet-order-callout small,
.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-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,
.cabinet-page .cabinet-device-list {
  border-top: 1px solid var(--line);
}

.cabinet-page .cabinet-action-row,
.cabinet-page .cabinet-support-row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-1);
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  text-align: left;
  transition: color 140ms ease, background-color 140ms ease;
}

.cabinet-page .cabinet-action-row:hover,
.cabinet-page .cabinet-support-row:hover {
  color: var(--text-accent-soft);
}

.cabinet-page .cabinet-action-row:hover strong,
.cabinet-page .cabinet-support-row:hover strong {
  color: var(--accent);
}

.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);
  border-radius: var(--radius-small);
  background: var(--surface-raised);
}

.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;
}

.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,
.cabinet-page .cabinet-order-callout .cabinet-row__chevron {
  background: var(--accent);
}

.cabinet-page .cabinet-order-callout .cabinet-row__chevron {
  background: var(--warning);
}

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

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

.cabinet-page .cabinet-row__chevron {
  display: block;
  flex: 0 0 auto;
  mask-image: url("/assets/icons/chevron-right.svg");
}

.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-connect-card,
.cabinet-page .cabinet-empty-card {
  padding: var(--space-5);
}

.cabinet-page .cabinet-connect-card__label {
  margin: 0;
  color: var(--accent);
  font-size: var(--font-size-label);
  font-weight: 780;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.cabinet-page .cabinet-connect-card h2,
.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-connect-card > p:not(.cabinet-connect-card__label),
.cabinet-page .cabinet-empty-card > p {
  margin: 0;
  color: var(--text-muted);
}

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

.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;
  gap: var(--space-3);
}

.cabinet-page .cabinet-plan-option {
  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: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

.cabinet-page .cabinet-plan-option:hover {
  border-color: var(--line-strong);
  background: var(--surface-raised);
}

.cabinet-page .cabinet-plan-option:active {
  border-color: var(--line-strong);
  background: var(--surface-raised);
}

.cabinet-page .cabinet-plan-option--featured {
  border-color: var(--line-accent);
  background: var(--surface-plan-option-featured);
}

.cabinet-page .cabinet-plan-option--featured:hover {
  border-color: var(--line-accent-hover);
  background: var(--surface-plan-featured);
}

.cabinet-page .cabinet-plan-option--featured:active {
  border-color: var(--line-accent-hover);
  background: var(--surface-plan-featured);
}

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

.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--featured .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;
}

.cabinet-page .cabinet-plan-option--featured .cabinet-plan-option__chevron,
.cabinet-page .cabinet-plan-option:hover .cabinet-plan-option__chevron {
  background: var(--accent);
}

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

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

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

.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__amount {
  margin: 0;
  color: var(--text);
  font-size: var(--font-size-display);
  font-weight: 780;
  line-height: var(--line-height-tight);
}

.cabinet-page .cabinet-checkout-flow__pay {
  width: min(100%, var(--cabinet-checkout-action-width));
}

.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: 430px;
  margin: 0;
  color: var(--text-muted);
  font-size: var(--font-size-small);
}

.cabinet-page .cabinet-checkout-flow__payment-status {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.cabinet-page .cabinet-checkout-flow__status-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-self: start;
  gap: var(--space-2);
}

.cabinet-page .cabinet-checkout-flow__status-separator {
  color: var(--text-muted);
  font-size: var(--font-size-small);
}

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

.cabinet-page .cabinet-danger-action {
  justify-self: start;
  margin-top: var(--space-4);
  color: var(--text-danger);
}

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

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

.cabinet-page .cabinet-device-row {
  display: grid;
  grid-template-columns: var(--cabinet-action-icon-size) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-1);
  border-bottom: 1px solid var(--line);
}

.cabinet-page .cabinet-device-row__icon {
  display: grid;
  width: var(--cabinet-action-icon-size);
  height: var(--cabinet-action-icon-size);
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--surface-raised);
}

.cabinet-page .cabinet-device-row__icon::before {
  width: var(--icon-size-default);
  height: var(--icon-size-default);
  content: "";
  background: var(--text-muted);
  mask: url("/assets/icons/smartphone.svg") center / contain no-repeat;
}

.cabinet-page .cabinet-device-row__content {
  min-width: 0;
}

.cabinet-page .cabinet-device-row h2 {
  margin: 0;
  color: var(--text);
  font-size: var(--font-size-body);
}

.cabinet-page .cabinet-device-row p {
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
  font-size: var(--font-size-small);
  overflow-wrap: anywhere;
}

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

.cabinet-page .cabinet-device-row__remove {
  flex-shrink: 0;
  padding: var(--space-2) 0;
  background: transparent;
  color: var(--text-danger);
  font-size: var(--font-size-small);
  font-weight: 740;
}

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

.cabinet-page .cabinet-loading-list {
  display: grid;
  gap: var(--space-2-5);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line);
}

.cabinet-page .cabinet-loading-list span {
  display: block;
  height: var(--cabinet-skeleton-row-height);
  border-radius: var(--radius-small);
  background: var(--surface);
  animation: cabinet-loading 1.2s ease-in-out infinite alternate;
}

@keyframes cabinet-loading {
  from { opacity: 0.45; }
  to { opacity: 0.9; }
}

.cabinet-page .cabinet-bottom-nav {
  display: grid;
  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(--space-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-bottom-nav);
  box-shadow: var(--shadow-floating-nav);
}

.cabinet-page .cabinet-bottom-nav button {
  display: grid;
  min-height: calc(var(--cabinet-bottom-nav-height) - (var(--space-1) * 2));
  place-items: center;
  padding: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  transition: color 140ms ease, transform 140ms ease;
}

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

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

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

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

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

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

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

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

.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: start;
  justify-content: space-between;
  gap: var(--space-3);
}

.confirm-dialog__header .eyebrow {
  margin: var(--space-3) 0 0;
}

.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;
}

.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: calc(100svh - var(--site-header-height-compact));
    padding: var(--hero-padding-compact);
  }

  .hero__copy {
    max-width: 560px;
  }

  .hero__visual {
    display: none;
  }

  .hero h1 {
    font-size: var(--font-size-public-h1-compact);
  }

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

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

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

  .section-heading--plans,
  .information-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .section-heading--plans p:not(.eyebrow) {
    grid-column: 1;
    grid-row: auto;
  }

  .plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .information-grid {
    gap: var(--space-6);
  }

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

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

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

  .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 .cabinet-main {
    padding: var(--cabinet-main-padding-compact);
  }

}

@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__periods-link {
    width: 100%;
  }

  .hero__term-limit > [aria-hidden] {
    display: none;
  }

  .hero__copy {
    text-align: left;
  }

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

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

  .plan-grid {
    grid-template-columns: 1fr;
  }

  .plan-card {
    min-height: var(--plan-card-min-height-compact);
  }

  .plan-card__price {
    margin-top: var(--space-6);
  }

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

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

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

  .cabinet-page .cabinet-state-card:not(.cabinet-state-card--inactive) {
    padding: var(--space-4) 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__badge {
    grid-column: 2;
    justify-self: start;
  }

  .cabinet-page .cabinet-state-card__facts {
    grid-template-columns: 1fr;
  }

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

  .cabinet-page .cabinet-checkout-flow__pay {
    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;
  }
}