/* Inter, self-hosted: no third-party request, which matters for an audience
   that reaches us through blocked networks. Variable weight, two subsets. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --bg: #f4f7fb;
  --ink: #101828;
  --muted: #667085;
  --line: #e5eaf2;
  --primary: #ff6a3d;
  --primary-dark: #e85124;
  --secondary: #4d6bff;
  --navy: #101a46;
  --navy-soft: #172052;
  --surface: #ffffff;
  --soft: #f8fbff;
  --shadow: 0 24px 70px rgba(16, 24, 40, 0.12);
  --r-card: 18px;
  --r-tile: 14px;
  --r-btn: 12px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 6px 16px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 2px 4px rgba(16, 24, 40, 0.04), 0 14px 34px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 4px 8px rgba(16, 24, 40, 0.04), 0 28px 64px rgba(16, 24, 40, 0.12);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Any component rule that sets display beats the hidden attribute's UA style,
   and hiding things is how the device chooser works. Every time that has been
   forgotten a customer saw five platforms' instructions at once, so make the
   attribute win outright - staff.css has carried the same rule for a while. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(244, 247, 251, 0));
  content: "";
  height: 420px;
  left: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  z-index: -1;
}

a {
  color: inherit;
}

button,
input,
textarea {
  font: inherit;
}

.topbar {
  align-items: center;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  left: 50%;
  max-width: 1180px;
  padding: 24px;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 100%;
  z-index: 5;
}

.brand {
  align-items: center;
  color: #fff;
  display: inline-flex;
  font-size: 18px;
  font-weight: 900;
  gap: 10px;
  text-decoration: none;
}

.brand-mark {
  align-items: center;
  background: linear-gradient(135deg, var(--primary), #ffb347);
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  font-size: 15px;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.topnav {
  align-items: center;
  display: flex;
  gap: 24px;
}

.topnav a {
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.topnav a:hover {
  color: #fff;
}

main {
  min-height: calc(100vh - 112px);
}

/* Server-move notice: the first row of the hero, spanning both of its columns.
   Warm against the navy so a customer whose profile stopped working sees it
   before the sales copy. */
.switch-banner {
  align-items: center;
  background: rgba(255, 180, 84, 0.14);
  border: 1px solid rgba(255, 180, 84, 0.42);
  border-radius: 12px;
  color: #ffe6c2;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  grid-column: 1 / -1;
  padding: 16px 20px;
}

.switch-banner-text {
  flex: 1 1 420px;
  min-width: 0;
}

.switch-banner strong {
  color: #fff;
  display: block;
  font-size: 16px;
  line-height: 1.3;
}

.switch-banner p {
  font-size: 14px;
  font-weight: 600;
  margin: 4px 0 0;
}

.switch-banner .button {
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .switch-banner .button {
    width: 100%;
  }
}

.hero-section {
  background: var(--navy);
  color: #fff;
  overflow: hidden;
  position: relative;
}

.hero-bg {
  background:
    radial-gradient(760px 420px at 12% 8%, rgba(255, 106, 61, 0.28), transparent 62%),
    radial-gradient(680px 460px at 88% 22%, rgba(77, 107, 255, 0.32), transparent 66%),
    linear-gradient(140deg, #0c1438 0%, #131d52 55%, #1d2a63 100%);
  inset: 0;
  position: absolute;
}

/* Faint grid, so the large dark area reads as designed rather than empty. */
.hero-bg::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 68px 68px;
  content: "";
  inset: 0;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
  position: absolute;
}

/* The feature cards overlap the hero, so the bottom edge fades into the page
   background instead of cutting off. */
.hero-bg::after {
  background: linear-gradient(0deg, var(--bg) 0%, rgba(244, 247, 251, 0.72) 5%, transparent 24%);
  content: "";
  inset: 0;
  position: absolute;
}

.hero-accent {
  background: linear-gradient(96deg, #ffb37a 0%, var(--primary) 42%, #8ba6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hero-content {
  align-items: start;
  display: grid;
  gap: 48px;
  grid-template-columns: minmax(0, 1fr) 420px;
  margin: 0 auto;
  max-width: 1180px;
  padding: 112px 24px 96px;
  position: relative;
  z-index: 1;
}

.hero-copy {
  max-width: 690px;
  padding-top: 16px;
}

.eyebrow {
  color: var(--primary);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin: 0 0 16px;
  text-transform: uppercase;
}

.landing-page .hero-copy .eyebrow {
  align-items: center;
  background: rgba(255, 106, 61, 0.14);
  border: 1px solid rgba(255, 106, 61, 0.32);
  border-radius: 999px;
  color: #ffc2a6;
  display: inline-flex;
  padding: 7px 14px;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  font-size: clamp(34px, 5.2vw, 60px);
  letter-spacing: -0.025em;
  line-height: 1.04;
  margin-bottom: 24px;
}

h2 {
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -0.02em;
  line-height: 1.14;
  margin-bottom: 14px;
}

h3 {
  font-size: 19px;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-bottom: 10px;
}

.lead {
  color: rgba(255, 255, 255, 0.78);
  font-size: 20px;
  line-height: 1.55;
  margin-bottom: 0;
  max-width: 640px;
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}

.trust-row span {
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.92);
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  gap: 8px;
  padding: 9px 15px;
}

.trust-row span::before {
  background: #5ce1a6;
  border-radius: 50%;
  content: "";
  height: 6px;
  width: 6px;
}

.purchase-card,
.panel,
.status-panel {
  background: var(--surface);
  border: 1px solid rgba(229, 234, 242, 0.92);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lg);
}

.purchase-card {
  color: var(--ink);
  display: grid;
  gap: 20px;
  padding: 28px;
}

.plan-summary {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding-bottom: 18px;
}

.plan-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.plan-summary h2 {
  color: var(--ink);
  font-size: 24px;
  line-height: 1.15;
  margin-bottom: 0;
}

.price-block {
  text-align: right;
}

.price {
  color: var(--navy);
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 6px;
  white-space: nowrap;
}

.price-block span {
  color: var(--muted);
  display: block;
  font-size: 13px;
  font-weight: 800;
}

.form {
  display: grid;
  gap: 14px;
}

.purchase-card > .form > button[type="submit"]:not(.secondary) {
  order: 5;
}

.purchase-card > .form > button.secondary[formaction] {
  order: 6;
}

.purchase-card > .form > .hint {
  order: 7;
}

.form-error {
  background: #fff1f1;
  border: 1px solid #ffd0d0;
  border-radius: 6px;
  color: #9b1c1c;
  font-size: 14px;
  font-weight: 800;
  margin: 0;
  padding: 10px 12px;
}

.form-success {
  background: #eefaf2;
  border: 1px solid #bfe9cb;
  border-radius: 6px;
  color: #156a32;
  font-size: 14px;
  font-weight: 800;
  margin: 0;
  padding: 10px 12px;
}

/* Inline "resend the code" action: a submit button that reads as a link. */
.linklike,
.linklike:hover {
  background: none;
  border: 0;
  box-shadow: none;
  color: inherit;
  cursor: pointer;
  display: inline;
  font: inherit;
  min-height: 0;
  padding: 0;
  text-decoration: underline;
  width: auto;
}

label {
  color: var(--muted);
  display: grid;
  font-size: 14px;
  font-weight: 800;
  gap: 8px;
}

label.checkbox {
  align-items: center;
  display: flex;
  gap: 10px;
}

label.checkbox input {
  min-height: 0;
  width: auto;
}

input,
textarea {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  min-height: 52px;
  padding: 12px 14px;
  width: 100%;
}

textarea {
  line-height: 1.5;
  min-height: 168px;
  resize: vertical;
}

input:focus,
textarea:focus {
  border-color: var(--secondary);
  outline: 4px solid rgba(77, 107, 255, 0.13);
}

button,
.button {
  align-items: center;
  background: linear-gradient(135deg, var(--primary), #ff9d42);
  border: 0;
  border-radius: var(--r-btn);
  box-shadow: 0 8px 20px rgba(255, 106, 61, 0.28);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-weight: 700;
  justify-content: center;
  letter-spacing: -0.01em;
  min-height: 52px;
  padding: 13px 20px;
  text-decoration: none;
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

button:hover,
.button:hover {
  background: linear-gradient(135deg, var(--primary-dark), #ff8628);
  box-shadow: 0 12px 26px rgba(255, 106, 61, 0.34);
  transform: translateY(-1px);
}

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

button:focus-visible,
.button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--secondary);
  outline-offset: 2px;
}

.secondary {
  background: #eef2ff;
  box-shadow: none;
  color: var(--navy);
}

.secondary:hover {
  background: #e0e7ff;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

.hint,
.section p,
.faq p,
.panel p {
  color: var(--muted);
  line-height: 1.6;
}

.hint {
  font-size: 14px;
  margin-bottom: 0;
}

.promo {
  border: 0;
}

.promo summary {
  color: var(--secondary);
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  list-style: none;
}

.promo summary::-webkit-details-marker {
  display: none;
}

.promo label {
  margin-top: 12px;
}

.feature-strip,
.after-payment-section,
.section,
.support-band,
.access-hero,
.cabinet-tabs,
.cabinet-overview,
.access-grid,
.setup-guide,
.support-hero,
.support-layout,
.narrow,
.site-footer {
  margin-left: auto;
  margin-right: auto;
  max-width: 1180px;
}

.feature-strip {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: -56px;
  margin-bottom: 24px;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

.feature-strip article {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  padding: 26px 24px 24px;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.feature-strip article:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.feature-strip article h3 {
  margin-bottom: 8px;
}

.feature-strip article p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 0;
}

.feature-icon {
  align-items: center;
  background: linear-gradient(135deg, #fff1eb, #ffe4d6);
  border-radius: var(--r-tile);
  color: var(--primary);
  display: inline-flex;
  height: 44px;
  justify-content: center;
  margin-bottom: 18px;
  width: 44px;
}

.feature-icon svg {
  height: 22px;
  width: 22px;
}

.after-payment-section {
  align-items: center;
  display: grid;
  gap: 48px;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
  padding: 72px 24px 22px;
}

.after-payment-section > div:first-child p:last-child {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.65;
  margin-bottom: 0;
  max-width: 680px;
}

.after-note {
  border-left: 4px solid var(--primary);
  padding-left: 22px;
}

.after-note strong {
  color: var(--navy);
  display: block;
  font-size: 22px;
  line-height: 1.3;
  margin-bottom: 12px;
}

.after-note p {
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 0;
}

.access-hero img {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.8), rgba(237, 242, 255, 0.6));
  border-radius: 8px;
  height: auto;
  padding: 18px;
  max-width: 100%;
}

.process-list {
  display: grid;
  gap: 14px;
  margin-top: 26px;
}

.process-list div {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 16px;
  grid-template-columns: 42px minmax(0, 1fr);
  padding: 16px;
}

.process-list span {
  align-items: center;
  background: var(--navy);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-weight: 900;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.process-list p {
  margin-bottom: 0;
}

.section {
  padding: 58px 24px 80px;
}

.support-band {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 55px rgba(16, 24, 40, 0.08);
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin-top: 40px;
  padding: 28px;
}

.legal-note {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  margin: 8px auto 0;
  max-width: 1180px;
  padding: 0 24px;
  text-align: center;
}

.legal-page {
  background: #fff;
}

.legal-page .topbar {
  position: relative;
  transform: none;
  left: auto;
  margin: 0 auto;
}

.legal-page .brand {
  color: var(--navy);
}

.legal-page .topnav a {
  color: var(--muted);
}

.legal-page .topnav a:hover {
  color: var(--navy);
}

.legal-container {
  margin: 0 auto;
  max-width: 820px;
  padding: 48px 24px 96px;
}

.legal-header {
  border-bottom: 1px solid var(--line);
  margin-bottom: 36px;
  padding-bottom: 28px;
}

.legal-kicker {
  color: var(--primary);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  margin: 0 0 12px;
  text-transform: uppercase;
}

.legal-page h1 {
  color: var(--navy);
  font-size: 40px;
  line-height: 1.1;
  margin: 0 0 14px;
}

.legal-meta {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
}

.legal-body h2 {
  color: var(--navy);
  font-size: 22px;
  line-height: 1.25;
  margin: 38px 0 14px;
}

.legal-body h2:first-child {
  margin-top: 0;
}

.legal-body p,
.legal-body li {
  color: #344054;
  font-size: 16px;
  line-height: 1.65;
}

.legal-body p {
  margin: 0 0 14px;
}

.legal-body ul {
  margin: 0 0 18px;
  padding-left: 22px;
}

.legal-body ul li {
  margin-bottom: 8px;
}

.legal-body strong {
  color: var(--navy);
}

.legal-body a {
  color: var(--secondary);
  text-decoration: underline;
}

@media (max-width: 640px) {
  .legal-container {
    padding: 32px 16px 64px;
  }

  .legal-page h1 {
    font-size: 30px;
  }

  .legal-body h2 {
    font-size: 20px;
  }
}

.support-line {
  margin: 0 auto;
  max-width: 1180px;
  padding: 0 24px 64px;
  text-align: center;
}

.support-line p {
  color: var(--muted);
  font-size: 15px;
  margin: 0;
}

.support-line a {
  color: var(--secondary);
  font-weight: 800;
  text-decoration: none;
}

.support-line a:hover {
  text-decoration: underline;
}

.support-band h2 {
  margin-bottom: 10px;
}

.support-band .button {
  flex: 0 0 auto;
}

.section-heading {
  margin-bottom: 24px;
}

.faq-list {
  display: grid;
  gap: 12px;
}

.faq-list details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-tile);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.18s ease;
}

.faq-list details:hover {
  box-shadow: var(--shadow-md);
}

.faq-list summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-weight: 700;
  gap: 16px;
  justify-content: space-between;
  list-style: none;
  padding: 20px 22px;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

/* Plus turning into a minus, drawn with borders so no icon font is needed. */
.faq-list summary::after {
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  content: "";
  flex: 0 0 auto;
  height: 9px;
  margin-right: 4px;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
  width: 9px;
}

.faq-list details[open] summary::after {
  transform: rotate(-135deg) translate(-3px, -3px);
}

.faq-list p {
  border-top: 1px solid var(--line);
  margin-bottom: 0;
  padding: 18px 22px 20px;
}

.site-footer {
  align-items: center;
  border-top: 1px solid var(--line);
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  gap: 18px 36px;
  justify-content: space-between;
  margin-top: 32px;
  padding: 28px 24px;
}

.site-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.site-footer-name {
  color: var(--navy);
  font-size: 15px;
  font-weight: 900;
}

.site-footer-tagline {
  color: var(--muted);
  font-size: 13px;
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.site-footer-links a {
  color: var(--muted);
  font-weight: 800;
  text-decoration: none;
}

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

.site-footer-copy {
  color: var(--muted);
  font-size: 13px;
}

.access-page .topbar,
.status-page .topbar {
  position: relative;
  transform: none;
  left: auto;
}

.access-page .brand,
.status-page .brand {
  color: var(--navy);
}

.access-page .topnav a,
.status-page .topnav a {
  color: var(--muted);
}

.access-page .topnav a:hover,
.status-page .topnav a:hover {
  color: var(--navy);
}

.access-hero {
  align-items: center;
  display: grid;
  gap: 38px;
  grid-template-columns: minmax(0, 1fr) 240px;
  padding: 42px 24px 18px;
}

.access-page h1,
.support-page h1 {
  font-size: 52px;
  line-height: 1.02;
}

.cabinet-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 24px 18px;
}

.cabinet-tabs a {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 900;
  padding: 11px 14px;
  text-decoration: none;
}

.cabinet-tabs a.active,
.cabinet-tabs a:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.cabinet-overview {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0 24px 22px;
}

.account-switcher {
  margin: 0 auto 22px;
  max-width: 1180px;
  width: calc(100% - 48px);
}

.section-heading.compact {
  margin-bottom: 18px;
}

.account-list {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.account-item {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  flex: 1 1 280px;
  gap: 16px;
  max-width: 360px;
  padding: 18px;
}

.account-item.active {
  background: #eef4ff;
  border-color: rgba(50, 92, 218, 0.42);
}

.account-item h3 {
  color: var(--navy);
  font-size: 20px;
  margin: 8px 0 0;
  overflow-wrap: anywhere;
}

.account-badge {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.account-item dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.account-item dl div {
  display: grid;
  gap: 8px;
  grid-template-columns: 96px minmax(0, 1fr);
}

.account-item .button {
  justify-self: start;
  min-height: 44px;
}

.metric-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 45px rgba(16, 24, 40, 0.08);
  padding: 22px;
}

.metric-panel span,
.support-summary span {
  color: var(--muted);
  display: block;
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.metric-panel strong,
.support-summary strong {
  color: var(--navy);
  display: block;
  font-size: 28px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.metric-panel p,
.support-summary p {
  color: var(--muted);
  line-height: 1.5;
  margin: 12px 0 0;
}

.access-hero .lead,
.status-panel .lead {
  color: var(--muted);
}

.access-grid {
  align-items: stretch;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  padding: 22px 24px;
}

.panel {
  padding: 30px;
}

.access-card-heading {
  align-items: center;
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.access-card-heading img {
  border-radius: 8px;
  object-fit: contain;
}

.vpn-info,
.credentials {
  display: grid;
  gap: 12px;
  margin: 0;
}

.vpn-info div,
.credentials div {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: 130px minmax(0, 1fr);
  padding-bottom: 12px;
}

.vpn-info div:last-child,
.credentials div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

dt {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

dd {
  font-weight: 900;
  margin: 0;
  overflow-wrap: anywhere;
}

.vpn-info a:not(.button),
.setup-guide a:not(.button):not(.setup-qr-tile):not(.android-guide-qr):not(.android-guide-shot) {
  color: var(--secondary);
}

.copy-value {
  background: transparent;
  border: 0;
  border-bottom: 1px dashed currentColor;
  border-radius: 0;
  color: var(--ink);
  display: inline;
  font-weight: 900;
  min-height: 0;
  padding: 0;
}

.copy-value.copied,
.copy-value:hover {
  background: transparent;
  color: var(--primary);
}

.panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.quick-import {
  display: grid;
  gap: 22px;
}

.qr-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.qr-tile {
  align-items: center;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  justify-items: center;
  padding: 16px;
  text-decoration: none;
}

.qr-tile span {
  font-weight: 900;
}

.qr-code {
  background: #fff;
  height: 150px;
  width: 150px;
}

.setup-method {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 18px;
  padding: 20px;
}

.setup-method.primary {
  border-color: rgba(47, 109, 255, 0.32);
  box-shadow: 0 14px 34px rgba(18, 33, 74, 0.08);
}

.setup-method h3 {
  color: var(--navy);
  font-size: 24px;
  line-height: 1.2;
  margin: 6px 0 8px;
}

.setup-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.setup-qr-layout {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
}

.setup-qr-tile {
  align-items: center;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  display: grid;
  gap: 12px;
  justify-items: center;
  padding: 16px;
  text-align: center;
  text-decoration: none;
}

.setup-qr-tile span {
  font-weight: 900;
}

.setup-steps {
  counter-reset: setup-step;
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.setup-steps li {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  counter-increment: setup-step;
  line-height: 1.5;
  margin: 0;
  min-height: 48px;
  padding: 12px 14px 12px 48px;
  position: relative;
}

.setup-steps li::before {
  align-items: center;
  background: var(--primary);
  border-radius: 999px;
  color: #fff;
  content: counter(setup-step);
  display: flex;
  font-size: 13px;
  font-weight: 900;
  height: 24px;
  justify-content: center;
  left: 14px;
  position: absolute;
  top: 12px;
  width: 24px;
}

.setup-fallback {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-top: 16px;
  overflow: hidden;
}

.setup-fallback > summary {
  color: var(--navy);
  cursor: pointer;
  font-weight: 900;
  list-style: none;
  padding: 16px 48px 16px 18px;
  position: relative;
}

.setup-fallback > summary::-webkit-details-marker {
  display: none;
}

.setup-fallback > summary::after {
  color: var(--primary);
  content: "+";
  font-size: 22px;
  line-height: 1;
  position: absolute;
  right: 18px;
  top: 14px;
}

.setup-fallback[open] > summary {
  border-bottom: 1px solid var(--line);
}

.setup-fallback[open] > summary::after {
  content: "x";
}

.setup-fallback > ol,
.setup-fallback > .guide-images {
  margin-left: 18px;
  margin-right: 18px;
}

.setup-fallback > ol {
  margin-top: 16px;
  padding-left: 22px;
}

.setup-fallback > ol > li {
  line-height: 1.6;
  margin-top: 10px;
}

.setup-fallback > .guide-images {
  margin-bottom: 18px;
}

.android-guide-card {
  gap: 20px;
}

.android-guide-flow {
  display: grid;
  gap: 14px;
}

.android-guide-flow p {
  line-height: 1.65;
  margin: 0;
}

.android-guide-shot {
  display: inline-flex;
  justify-self: start;
  max-width: min(100%, 280px);
  text-decoration: none;
}

.android-guide-shot img {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: block;
  max-width: 100%;
  padding: 8px;
}

.android-guide-qr {
  display: inline-flex;
  justify-self: start;
  text-decoration: none;
}

.android-guide-credentials {
  display: grid;
  gap: 8px;
  margin: 0;
}

.android-guide-credentials div {
  display: grid;
  gap: 4px 12px;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
}

.android-guide-credentials dt,
.android-guide-credentials dd {
  margin: 0;
}

.android-guide-credentials dt {
  color: var(--navy);
  font-weight: 900;
}

.android-guide-credentials dd {
  overflow-wrap: anywhere;
}

.android-guide-credentials-manual {
  margin-top: -2px;
}

.android-guide-finish {
  color: var(--navy);
  font-weight: 900;
}

.android-guide-flow-manual {
  margin: 18px;
}

.setup-guide {
  display: grid;
  gap: 14px;
  margin-bottom: 58px;
  margin-top: 10px;
  padding: 34px;
}

.vpn-accordion {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.vpn-accordion > summary {
  background: #fff;
  cursor: pointer;
  font-size: 16px;
  font-weight: 900;
  list-style: none;
  padding: 19px 52px 19px 20px;
  position: relative;
}

.vpn-accordion > summary::-webkit-details-marker {
  display: none;
}

.vpn-accordion > summary::after {
  color: var(--primary);
  content: "+";
  font-size: 25px;
  line-height: 1;
  position: absolute;
  right: 20px;
  top: 16px;
}

.vpn-accordion[open] > summary {
  border-bottom: 1px solid var(--line);
}

.vpn-accordion[open] > summary::after {
  content: "x";
}

.vpn-accordion-body {
  background: var(--soft);
  padding: 20px 22px 24px;
}

.vpn-accordion-body > ol {
  margin: 0;
  padding-left: 22px;
}

.vpn-accordion-body > ol > li {
  line-height: 1.6;
  margin-top: 12px;
}

.vpn-accordion-body code {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: block;
  font-size: 14px;
  overflow-x: auto;
  padding: 12px;
}

.guide-images {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-top: 18px;
}

.guide-images img {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: block;
  height: 170px;
  object-fit: contain;
  padding: 8px;
  width: 100%;
}

.narrow {
  max-width: 760px;
  padding: 56px 24px 90px;
}

.status-panel {
  padding: 38px;
}

.status-panel h1 {
  font-size: 48px;
}

.status-message {
  background: #fff7f2;
  border: 1px solid #ffd8c7;
  border-radius: 8px;
  color: var(--navy);
  font-weight: 900;
  margin: 24px 0 0;
  padding: 16px;
}

.support-hero {
  align-items: stretch;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) 340px;
  padding: 52px 24px 18px;
}

.support-hero .lead {
  color: var(--muted);
}

.support-summary {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 26px;
}

.support-layout {
  align-items: start;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr) 380px;
  padding: 22px 24px 70px;
}

.support-form {
  display: grid;
  gap: 18px;
}

.support-aside {
  display: grid;
  gap: 20px;
}

.check-list {
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
  padding-left: 20px;
}

.check-list li + li {
  margin-top: 10px;
}

.notice {
  border-radius: 8px;
  font-weight: 900;
  margin: 0;
  padding: 14px 16px;
}

.notice.success {
  background: #ecfdf3;
  border: 1px solid #abefc6;
  color: #067647;
}

.notice.error {
  background: #fff1f3;
  border: 1px solid #fecdd6;
  color: #c01048;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.install-steps {
  counter-reset: install-step;
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.install-steps li {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  counter-increment: install-step;
  line-height: 1.5;
  min-height: 48px;
  padding: 12px 14px 12px 48px;
  position: relative;
}

.install-steps li::before {
  align-items: center;
  background: var(--primary);
  border-radius: 999px;
  color: #fff;
  content: counter(install-step);
  display: flex;
  font-size: 13px;
  font-weight: 900;
  height: 24px;
  justify-content: center;
  left: 14px;
  position: absolute;
  top: 12px;
  width: 24px;
}

.install-steps .app-list {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.install-steps .app-list li {
  background: transparent;
  border: 0;
  border-radius: 0;
  counter-increment: none;
  min-height: 0;
  padding: 0;
}

.install-steps .app-list li::before {
  content: none;
}

@media (max-width: 980px) {
  .hero-content,
  .after-payment-section,
  .support-band,
  .access-hero,
  .access-grid,
  .support-hero,
  .support-layout {
    grid-template-columns: 1fr;
  }

  .cabinet-overview {
    grid-template-columns: 1fr;
  }

  .support-band {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero-content {
    gap: 32px;
    padding-top: 116px;
  }

  .purchase-card {
    max-width: 520px;
  }

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

  .access-hero img {
    display: none;
  }
}

@media (max-width: 640px) {
  .topbar {
    gap: 14px;
    padding: 16px;
  }

  .topnav {
    gap: 14px;
  }

  .topnav a {
    font-size: 13px;
  }

  .hero-section,
  .hero-content {
    min-height: 0;
  }

  .hero-content {
    padding: 88px 16px 64px;
  }

  .hero-copy {
    padding-top: 0;
  }

  /* h1/h2 scale fluidly via clamp(); only the lead needs a nudge here. */
  .lead {
    font-size: 17px;
  }

  .purchase-card,
  .panel,
  .status-panel,
  .setup-guide {
    padding: 20px;
  }

  .feature-strip,
  .after-payment-section,
  .section,
  .support-band,
  .support-line,
  .access-hero,
  .cabinet-tabs,
  .cabinet-overview,
  .account-switcher,
  .access-grid,
  .setup-guide,
  .support-hero,
  .support-layout,
  .narrow {
    padding-left: 16px;
    padding-right: 16px;
  }

  .feature-strip,
  .support-band,
  .qr-grid,
  .setup-qr-layout,
  .account-item dl div,
  .vpn-info div,
  .credentials div {
    grid-template-columns: 1fr;
  }

  .android-guide-credentials div {
    grid-template-columns: 1fr;
  }

  .feature-strip {
    margin-top: -48px;
  }

  .site-footer {
    align-items: flex-start;
    flex-direction: column;
    padding-left: 16px;
    padding-right: 16px;
  }

  .status-panel h1 {
    font-size: 38px;
  }

  .access-page h1,
  .support-page h1 {
    font-size: 38px;
  }

  .account-switcher {
    width: calc(100% - 32px);
  }

  .account-item {
    max-width: none;
  }
}

.access-hero-compact {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  padding-bottom: 12px;
}

.access-hero-compact .lead {
  max-width: 720px;
}

.access-status-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 45px rgba(16, 24, 40, 0.08);
  padding: 24px;
}

.access-status-card span {
  color: var(--muted);
  display: block;
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.access-status-card strong {
  color: var(--navy);
  display: block;
  font-size: 32px;
  line-height: 1.05;
}

.access-status-card p {
  color: var(--muted);
  line-height: 1.5;
  margin: 12px 0 0;
}

.connect-panel {
  margin: 4px auto 22px;
  max-width: 1180px;
  width: calc(100% - 48px);
}

.device-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.device-option {
  align-items: start;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  display: grid;
  gap: 10px;
  min-height: 152px;
  padding: 18px;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.device-option:hover {
  background: #fff;
  border-color: rgba(77, 107, 255, 0.38);
  box-shadow: 0 16px 36px rgba(16, 24, 40, 0.1);
  transform: translateY(-1px);
}

.device-option.recommended {
  background: #fff7f2;
  border-color: #ffd8c7;
}

.device-icon {
  align-items: center;
  background: var(--navy);
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  font-size: 13px;
  font-weight: 900;
  height: 38px;
  justify-content: center;
  width: 44px;
}

.device-option.recommended .device-icon {
  background: var(--primary);
}

.device-option strong {
  color: var(--navy);
  display: block;
  font-size: 20px;
  line-height: 1.2;
}

.device-option small {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.primary-access-grid {
  align-items: stretch;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
}

.secondary-access-grid {
  margin-bottom: 54px;
}

.vpn-credentials-card {
  border-color: rgba(77, 107, 255, 0.22);
}

.credential-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.credential-row {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 16px;
  grid-template-columns: 120px minmax(0, 1fr);
  padding: 14px 0;
}

.credential-row:first-child {
  padding-top: 0;
}

.credential-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.credential-row dd {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.credential-value {
  background: #f7f9ff;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--navy);
  display: inline-flex;
  font-weight: 900;
  line-height: 1.35;
  max-width: 100%;
  min-height: 42px;
  min-width: 180px;
  overflow-wrap: anywhere;
  padding: 10px 12px;
  text-decoration: none;
  word-break: break-word;
}

.credential-value.is-secret {
  letter-spacing: 0;
}

.credential-note {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.5;
}

.copy-button,
.small-action {
  background: #edf2ff;
  border: 1px solid #dbe5ff;
  border-radius: 6px;
  color: var(--navy);
  min-height: 42px;
  padding: 9px 12px;
}

.copy-button:hover,
.small-action:hover,
.copy-button.copied {
  background: #dfe7ff;
  color: var(--navy);
}

.small-action {
  background: #fff;
}

.help-card {
  align-content: start;
}

.help-card .button,
.help-card .secondary {
  width: 100%;
}

.qr-grid.single {
  grid-template-columns: minmax(0, 220px);
}

@media (max-width: 980px) {
  .access-hero-compact,
  .primary-access-grid {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 640px) {
  .access-hero-compact {
    padding-top: 28px;
  }

  .access-status-card {
    padding: 18px;
  }

  .connect-panel {
    width: calc(100% - 32px);
  }

  .device-grid,
  .credential-row {
    grid-template-columns: 1fr;
  }

  .device-option {
    min-height: 118px;
  }

  .credential-row {
    gap: 8px;
  }

  .credential-row dd {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr;
  }

  .credential-value,
  .copy-button,
  .small-action {
    justify-content: center;
    min-width: 0;
    width: 100%;
  }
}

/* ============================================================
   Cabinet redesign — device-first flow
   ============================================================ */

.cabinet-page main {
  padding-bottom: 96px;
}

.cabinet-status-banner {
  align-items: center;
  background: linear-gradient(135deg, #101a46 0%, #1a2864 60%, #2a3a7e 100%);
  border-radius: 14px;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 32px auto 28px;
  max-width: 1180px;
  padding: 22px 26px;
  width: calc(100% - 48px);
}

/* Three states. With weeks left the banner is a quiet line - the customer came
   to connect a device, not to buy. Inside the last week it turns amber and the
   button returns; once lapsed it turns red and the button is the only action. */
.cabinet-status-banner.is-calm {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  gap: 12px;
  margin-bottom: 22px;
  padding: 14px 22px;
}

/* One line, and it must stay one line: the default basis is the text's own
   width, which wraps the renew link onto a row of its own on a phone. */
.cabinet-status-banner.is-calm .cabinet-status-text {
  flex: 1 1 0;
  min-width: 0;
}

.cabinet-status-banner.is-calm .cabinet-status-text strong {
  color: var(--navy);
  font-size: 16px;
  margin-bottom: 2px;
}

.cabinet-status-banner.is-calm .cabinet-status-text small {
  color: var(--muted);
  font-size: 13px;
}

.cabinet-status-dot {
  background: #1ec97a;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(30, 201, 122, 0.16);
  flex: 0 0 auto;
  height: 10px;
  width: 10px;
}

.cabinet-status-banner.is-calm .cabinet-status-renew .linklike {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.cabinet-status-banner.is-calm .cabinet-status-renew .linklike:hover {
  color: var(--primary);
}

.cabinet-status-banner.is-soon {
  background: linear-gradient(135deg, #7a4708 0%, #9a5a0a 60%, #b06a10 100%);
}

.cabinet-status-banner.is-soon .cabinet-status-icon {
  background: #ffc978;
  color: #4a2a02;
}

.cabinet-status-banner.is-expired {
  background: linear-gradient(135deg, #6d1220 0%, #8c1a2a 60%, #a52134 100%);
}

.cabinet-status-banner.is-expired .cabinet-status-icon {
  background: #ffb3b3;
  color: #5c0d16;
}

.cabinet-status-icon {
  align-items: center;
  background: #1ec97a;
  border-radius: 50%;
  color: #08291a;
  display: inline-flex;
  flex: 0 0 auto;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.cabinet-status-text {
  flex: 1 1 auto;
  min-width: 220px;
}

.cabinet-status-text strong {
  display: block;
  font-size: 19px;
  line-height: 1.2;
  margin-bottom: 4px;
}

.cabinet-status-text small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
}

.cabinet-status-renew {
  flex: 0 0 auto;
  margin: 0;
}

.cabinet-status-renew .button {
  background: linear-gradient(135deg, var(--primary), #ff9d42);
  color: #fff;
}

.cabinet-step {
  margin: 0 auto 28px;
  max-width: 1180px;
  width: calc(100% - 48px);
}

.cabinet-step.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(16, 24, 40, 0.06);
  padding: 26px;
}

.connect-head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

.connect-head h2 {
  font-size: 22px;
  line-height: 1.2;
  margin: 0 0 4px;
}

.connect-head .hint {
  margin: 0;
}

.connect-eta {
  background: var(--soft);
  border-radius: 999px;
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 800;
  padding: 6px 12px;
}

.connect-lead {
  margin: 0;
}

/* The user agent already tells us the platform, so the chooser is the escape
   hatch for the customer who is reading on one device and setting up another.
   It ships open and JavaScript folds it away once detection succeeds. */
.device-switch > summary {
  color: var(--muted);
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 800;
  list-style: none;
  padding: 4px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.device-switch > summary::-webkit-details-marker {
  display: none;
}

.device-switch > summary:hover {
  color: var(--ink);
}

.device-switch {
  margin: 14px 0 4px;
}

.connect-steps {
  counter-reset: none;
  display: grid;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.connect-step {
  display: grid;
  gap: 14px;
  grid-template-columns: 34px minmax(0, 1fr);
}

.connect-step + .connect-step {
  border-top: 1px solid var(--line);
  padding-top: 22px;
}

.connect-step-num {
  align-items: center;
  background: var(--navy);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 900;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.connect-step-body {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.connect-step-body h3 {
  color: var(--navy);
  font-size: 19px;
  line-height: 1.2;
  margin: 4px 0 0;
}

.connect-step-body .hint {
  margin: 0;
}

.device-chooser {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 14px 0 0;
}

.device-tile {
  align-items: center;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-family: inherit;
  gap: 8px;
  justify-content: center;
  min-height: 124px;
  padding: 18px 12px;
  text-align: center;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.device-tile:hover {
  border-color: var(--primary);
  box-shadow: 0 12px 30px rgba(16, 24, 40, 0.08);
  transform: translateY(-1px);
}

.device-tile.active {
  background: #fff7f2;
  border-color: var(--primary);
  box-shadow: 0 14px 34px rgba(255, 106, 61, 0.18);
}

.device-tile svg {
  color: var(--navy);
  height: 32px;
  width: 32px;
}

.device-tile.active svg {
  color: var(--primary);
}

.device-tile strong {
  color: var(--navy);
  font-size: 15px;
  font-weight: 900;
}

.device-tile small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

/* The steps already sit inside the connect card, so the method block drops its
   own frame instead of drawing a second box inside the first. */
.connect-card .setup-method {
  border: 0;
  box-shadow: none;
  gap: 20px;
  padding: 18px 0 0;
}

.cabinet-page .setup-guide {
  margin-top: 4px;
}

.cabinet-page .vpn-accordion[hidden] {
  display: none;
}

.cabinet-credentials {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  margin: 0 auto 28px;
  max-width: 1180px;
  overflow: hidden;
  width: calc(100% - 48px);
}

.cabinet-credentials > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 4px;
  justify-content: space-between;
  list-style: none;
  padding: 22px 26px;
}

.cabinet-credentials > summary::-webkit-details-marker {
  display: none;
}

.cabinet-credentials > summary::after {
  border-bottom: 2px solid var(--navy);
  border-right: 2px solid var(--navy);
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  height: 9px;
  margin-left: 18px;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  width: 9px;
}

.cabinet-credentials[open] > summary::after {
  transform: rotate(-135deg);
}

.cabinet-credentials-title {
  color: var(--navy);
  display: block;
  font-size: 17px;
  font-weight: 900;
}

.cabinet-credentials-sub {
  color: var(--muted);
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-top: 4px;
}

.cabinet-credentials-body {
  border-top: 1px solid var(--line);
  padding: 18px 26px 26px;
}

.cabinet-credentials .credential-row {
  align-items: start;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: 140px minmax(0, 1fr);
  padding: 14px 0;
}

.cabinet-credentials .credential-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.credential-row-extra .credential-note {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-top: 6px;
  width: 100%;
}

.cabinet-telegram {
  align-items: center;
  background: #f6f9ff;
  border: 1px solid #dbe5ff;
  border-radius: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0 auto 24px;
  max-width: 1180px;
  padding: 20px 24px;
  width: calc(100% - 48px);
}

.cabinet-telegram-text {
  flex: 1 1 320px;
}

.cabinet-telegram-text strong {
  color: var(--navy);
  display: block;
  font-size: 16px;
  margin-bottom: 4px;
}

.cabinet-telegram-text p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

.cabinet-telegram-cta {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 12px;
}

.cabinet-telegram-qr {
  font-size: 13px;
}

.cabinet-telegram-qr summary {
  color: var(--secondary);
  cursor: pointer;
  font-weight: 800;
}

.cabinet-telegram-qr summary::-webkit-details-marker {
  display: none;
}

.cabinet-telegram-qr[open] summary {
  margin-bottom: 10px;
}

.cabinet-telegram-qr img {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  height: 150px;
  padding: 8px;
  width: 150px;
}

.cabinet-footer-actions {
  margin: 0 auto;
  max-width: 1180px;
  padding: 8px 24px 24px;
  text-align: center;
  width: 100%;
}

.cabinet-logout-link {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.cabinet-logout-link:hover {
  color: var(--navy);
  text-decoration: underline;
}

.help-fab {
  align-items: center;
  background: var(--navy);
  border-radius: 999px;
  bottom: 22px;
  box-shadow: 0 14px 30px rgba(16, 24, 40, 0.22);
  color: #fff;
  display: inline-flex;
  font-size: 15px;
  font-weight: 900;
  gap: 10px;
  padding: 14px 22px;
  position: fixed;
  right: 22px;
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.15s ease;
  z-index: 60;
}

.help-fab:hover {
  background: #1c2a6b;
  transform: translateY(-1px);
}

.help-fab svg {
  flex: 0 0 auto;
}

@media (max-width: 980px) {
  .device-chooser {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cabinet-credentials .credential-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .cabinet-status-banner,
  .cabinet-step,
  .cabinet-credentials,
  .cabinet-telegram {
    border-radius: 12px;
    padding-left: 18px;
    padding-right: 18px;
    width: calc(100% - 32px);
  }

  .cabinet-step.panel {
    padding: 20px 18px;
  }

  .cabinet-credentials > summary {
    padding: 18px;
  }

  .cabinet-credentials-body {
    padding: 14px 18px 20px;
  }

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

  .cabinet-status-renew {
    flex: 1 1 100%;
  }

  .cabinet-status-renew .button {
    width: 100%;
  }

  /* The quiet state stays a single line: its renew link must not claim a row
     of its own the way the full-width button does. */
  .cabinet-status-banner.is-calm {
    padding: 14px 18px;
  }

  .cabinet-status-banner.is-calm .cabinet-status-renew {
    flex: 0 0 auto;
  }

  .connect-step {
    gap: 12px;
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .connect-step-num {
    font-size: 15px;
    height: 30px;
    width: 30px;
  }

  .help-fab {
    bottom: 14px;
    font-size: 14px;
    padding: 12px 18px;
    right: 14px;
  }
}

/* ============================================================
   Support page redesign
   ============================================================ */

.support-page-new {
  background: #fff;
}

.support-page-new .topbar {
  position: relative;
  transform: none;
  left: auto;
  margin: 0 auto;
}

.support-page-new .brand { color: var(--navy); }
.support-page-new .topnav a { color: var(--muted); }
.support-page-new .topnav a:hover { color: var(--navy); }

.support-page-new main {
  padding-bottom: 32px;
}

.support-hero-new {
  margin: 28px auto 18px;
  max-width: 720px;
  padding: 0 24px;
  text-align: center;
}

.support-hero-new h1 {
  color: var(--navy);
  font-size: 38px;
  line-height: 1.1;
  margin: 0 0 12px;
}

.support-hero-sub {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.5;
  margin: 0;
}

.support-faq {
  margin: 12px auto 36px;
  max-width: 720px;
  padding: 0 24px;
}

.support-faq-title {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  margin: 0 0 12px;
}

.support-faq-list {
  display: grid;
  gap: 10px;
}

.support-faq-list details {
  background: #f8fbff;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.support-faq-list details[open] {
  background: #fff;
  border-color: rgba(77, 107, 255, 0.35);
}

.support-faq-list summary {
  align-items: center;
  color: var(--navy);
  cursor: pointer;
  display: flex;
  font-size: 15px;
  font-weight: 800;
  gap: 14px;
  justify-content: space-between;
  list-style: none;
  padding: 16px 18px;
}

.support-faq-list summary::-webkit-details-marker {
  display: none;
}

.support-faq-chevron {
  border-bottom: 2px solid var(--navy);
  border-right: 2px solid var(--navy);
  flex: 0 0 auto;
  height: 8px;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  width: 8px;
}

.support-faq-list details[open] .support-faq-chevron {
  transform: rotate(-135deg);
}

.support-faq-list details p {
  border-top: 1px solid var(--line);
  color: #344054;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  padding: 14px 18px 16px;
}

.support-faq-list code {
  background: #eef2ff;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  padding: 1px 6px;
}

.support-divider {
  align-items: center;
  display: flex;
  gap: 14px;
  margin: 0 auto 24px;
  max-width: 720px;
  padding: 0 24px;
}

.support-divider::before,
.support-divider::after {
  background: var(--line);
  content: "";
  flex: 1 1 auto;
  height: 1px;
}

.support-divider span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.support-form-wrap {
  margin: 0 auto 48px;
  max-width: 720px;
  padding: 0 24px;
}

.support-form-new {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(16, 24, 40, 0.06);
  display: grid;
  gap: 22px;
  padding: 28px;
}

.support-notice {
  border-radius: 10px;
  display: grid;
  gap: 4px;
  padding: 14px 16px;
}

.support-notice strong {
  color: inherit;
  font-size: 15px;
}

.support-notice span {
  font-size: 14px;
}

.support-notice.success {
  background: #eefaf2;
  border: 1px solid #bfe9cb;
  color: #156a32;
}

.support-notice.error {
  background: #fff1f1;
  border: 1px solid #ffd0d0;
  color: #9b1c1c;
}

.support-topics {
  border: 0;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.support-topics legend {
  color: var(--navy);
  font-size: 16px;
  font-weight: 900;
  margin-bottom: 8px;
  padding: 0;
}

.support-topic {
  cursor: pointer;
  display: block;
  position: relative;
}

.support-topic input[type="radio"] {
  height: 1px;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 1px;
}

.support-topic-card {
  align-items: flex-start;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 4px 14px;
  grid-template-columns: 40px minmax(0, 1fr);
  padding: 14px 16px;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.support-topic:hover .support-topic-card {
  border-color: rgba(77, 107, 255, 0.4);
}

.support-topic input:checked ~ .support-topic-card {
  background: #fff7f2;
  border-color: var(--primary);
  box-shadow: 0 10px 24px rgba(255, 106, 61, 0.14);
}

.support-topic input:focus-visible ~ .support-topic-card {
  outline: 3px solid rgba(77, 107, 255, 0.3);
  outline-offset: 2px;
}

.support-topic-icon {
  align-items: center;
  background: #f1f4ff;
  border-radius: 8px;
  color: var(--navy);
  display: inline-flex;
  grid-row: 1 / 3;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.support-topic input:checked ~ .support-topic-card .support-topic-icon {
  background: #fff0e8;
  color: var(--primary);
}

.support-topic-title {
  color: var(--navy);
  font-size: 15px;
  font-weight: 900;
}

.support-topic-sub {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.support-field {
  display: grid;
  gap: 8px;
}

.support-field-label {
  color: var(--navy);
  font-size: 14px;
  font-weight: 900;
}

.support-field input,
.support-field textarea {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  min-height: 52px;
  padding: 12px 14px;
  width: 100%;
}

.support-field textarea {
  line-height: 1.55;
  min-height: 148px;
  resize: vertical;
}

.support-field input:focus,
.support-field textarea:focus {
  border-color: var(--secondary);
  outline: 4px solid rgba(77, 107, 255, 0.13);
}

.support-field-hint {
  color: var(--muted);
  font-size: 13px;
}

.support-submit {
  background: linear-gradient(135deg, var(--primary), #ff9d42);
  border: 0;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  font-weight: 900;
  min-height: 54px;
  padding: 14px 18px;
  width: 100%;
}

.support-submit:hover {
  background: linear-gradient(135deg, var(--primary-dark), #ff8628);
}

.support-fineprint {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  margin: -6px 0 0;
  text-align: center;
}

@media (max-width: 640px) {
  .support-hero-new h1 {
    font-size: 30px;
  }

  .support-form-new {
    border-radius: 12px;
    padding: 20px;
  }

  .support-topic-card {
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 12px 14px;
  }

  .support-topic-icon {
    height: 32px;
    width: 32px;
  }
}

/* ---------------------------------------------------------------------------
   Landing sections: steps, devices, plan. Scoped to .landing-page so the
   cabinet and legal pages keep their own layout untouched.
   --------------------------------------------------------------------------- */

.landing-page .section {
  padding: 88px 24px 8px;
}

.section-eyebrow {
  color: var(--primary);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin: 0 0 12px;
  text-transform: uppercase;
}

.section-heading .section-sub {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
  max-width: 620px;
}

.steps-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 32px;
}

.steps-grid article {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  padding: 26px 24px 24px;
  position: relative;
}

.step-number {
  align-items: center;
  background: var(--navy);
  border-radius: 12px;
  color: #fff;
  display: inline-flex;
  font-size: 15px;
  font-weight: 800;
  height: 38px;
  justify-content: center;
  margin-bottom: 16px;
  width: 38px;
}

.steps-grid h3 {
  margin-bottom: 8px;
}

.steps-grid p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 0;
}

.devices-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 32px;
}

.device-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-tile);
  box-shadow: var(--shadow-sm);
  padding: 22px 18px;
  text-align: center;
}

.device-card svg {
  color: var(--navy);
  height: 26px;
  margin-bottom: 12px;
  width: 26px;
}

.device-card strong {
  display: block;
  font-size: 15px;
  margin-bottom: 6px;
}

.device-card span {
  color: var(--muted);
  display: block;
  font-size: 13px;
  line-height: 1.45;
}

.plan-band {
  align-items: center;
  background: linear-gradient(135deg, #0c1438 0%, #17205a 60%, #222f6d 100%);
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
  color: #fff;
  display: grid;
  gap: 40px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: 32px;
  overflow: hidden;
  padding: 40px 44px;
  position: relative;
}

.plan-band::after {
  background: radial-gradient(420px 260px at 90% 10%, rgba(255, 106, 61, 0.32), transparent 70%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

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

.plan-band h2 {
  color: #fff;
  margin-bottom: 18px;
}

.plan-includes {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.plan-includes li {
  align-items: center;
  color: rgba(255, 255, 255, 0.86);
  display: flex;
  font-size: 16px;
  gap: 10px;
}

.plan-includes li::before {
  border-right: 2px solid #5ce1a6;
  border-bottom: 2px solid #5ce1a6;
  content: "";
  flex: 0 0 auto;
  height: 10px;
  margin: -4px 2px 0 0;
  transform: rotate(45deg);
  width: 6px;
}

.plan-price {
  text-align: center;
  white-space: nowrap;
}

.plan-price strong {
  display: block;
  font-size: 52px;
  letter-spacing: -0.03em;
  line-height: 1;
}

.plan-price span {
  color: rgba(255, 255, 255, 0.7);
  display: block;
  font-size: 15px;
  margin-top: 8px;
}

.plan-price .button {
  margin-top: 20px;
  width: 100%;
}

.landing-page .legal-note {
  padding: 0 24px;
}

@media (max-width: 980px) {
  .steps-grid {
    grid-template-columns: 1fr;
  }

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

  .plan-band {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 32px 28px;
  }

  .plan-price {
    text-align: left;
  }

  .plan-price .button {
    width: auto;
  }
}

@media (max-width: 640px) {
  .landing-page .section {
    padding: 56px 16px 4px;
  }

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

  .plan-band {
    border-radius: 18px;
    margin-left: 0;
    margin-right: 0;
    padding: 26px 22px;
  }

  .plan-price strong {
    font-size: 44px;
  }
}

/* ---------------------------------------------------------------------------
   Cabinet: tab bar, subscription summary and the referral panel.
   --------------------------------------------------------------------------- */

.cabinet-tabs {
  margin: 0 auto;
  max-width: 1180px;
}

.cabinet-tab-link {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: none;
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
  min-height: 44px;
  padding: 10px 20px;
}

.cabinet-tab-link:hover {
  background: #fff;
  border-color: #cfd8ea;
  box-shadow: none;
  color: var(--ink);
  transform: none;
}

.cabinet-tab-link.active,
.cabinet-tab-link.active:hover {
  background: var(--navy);
  border-color: var(--navy);
  box-shadow: none;
  color: #fff;
}

.cabinet-tab-panel[hidden] {
  display: none;
}

.summary-list {
  display: grid;
  gap: 2px;
  margin: 0 0 22px;
}

.summary-list > div {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding: 14px 0;
}

.summary-list > div:last-child {
  border-bottom: 0;
}

.summary-list dt {
  color: var(--muted);
  font-size: 15px;
}

.summary-list dd {
  align-items: center;
  display: flex;
  font-weight: 700;
  gap: 10px;
  margin: 0;
}

.status-pill {
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  padding: 5px 12px;
}

.status-pill.ok {
  background: #e6f8ef;
  color: #10693a;
}

.status-pill.off {
  background: #fdecec;
  color: #9b1c1c;
}

/* The account block now nests inside the collapsed credentials card, so it
   drops the page-level centring it needed as a standalone section. */
.cabinet-credentials-body .account-switcher {
  margin: 22px 0 0;
  max-width: none;
  padding: 0;
  width: auto;
}

.cabinet-credentials-body .summary-list {
  margin-bottom: 0;
}

/* Copy buttons used to break mid-word ("Скопирова / ть") in narrow cells. */
.copy-button,
.small-action {
  white-space: nowrap;
}

/* Utility buttons are not calls to action: they must not inherit the CTA
   glow and lift from the base button rule. */
.copy-button,
.small-action,
.linklike,
.device-tile,
.cabinet-tab-link,
.faq-list summary,
.copy-button:hover,
.small-action:hover,
.linklike:hover,
.faq-list summary:hover {
  box-shadow: none;
  transform: none;
}

/* Hover must read quieter than the actual selection, and the base button
   hover would otherwise paint the whole tile orange. */
.device-tile:hover {
  background: var(--soft);
  border-color: #cfd8ea;
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.device-tile.active,
.device-tile.active:hover {
  background: #fff7f2;
  border-color: var(--primary);
  box-shadow: 0 14px 34px rgba(255, 106, 61, 0.18);
}

.referral-panel {
  display: grid;
  gap: 26px;
  margin: 0 auto 22px;
  max-width: 1180px;
  padding: 28px;
  width: calc(100% - 48px);
}

.referral-panel .section-heading.compact {
  margin-bottom: 0;
}

.referral-rewards {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.referral-reward {
  background: linear-gradient(135deg, #0c1438 0%, #17205a 100%);
  border-radius: var(--r-card);
  color: #fff;
  padding: 22px 24px;
}

.referral-reward strong {
  display: block;
  font-size: 34px;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 8px;
}

.referral-reward span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
  line-height: 1.45;
}

.referral-share {
  align-items: start;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.referral-link-block label {
  color: var(--muted);
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
}

.referral-link-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.referral-link-input {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  flex: 1 1 260px;
  font-size: 15px;
  min-height: 48px;
  padding: 12px 14px;
}

.referral-qr {
  text-align: center;
}

.referral-stats {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}

.referral-stats > div {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--r-tile);
  padding: 18px 20px;
}

.referral-stats dt {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 8px;
}

.referral-stats dd {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}

.referral-steps {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.referral-steps article {
  border: 1px solid var(--line);
  border-radius: var(--r-tile);
  padding: 20px;
}

.referral-steps h3 {
  margin-bottom: 6px;
}

.referral-steps p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 0;
}

@media (max-width: 980px) {
  .referral-share,
  .referral-rewards {
    grid-template-columns: 1fr;
  }

  .referral-steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .cabinet-tabs {
    padding: 10px 16px 16px;
  }

  .cabinet-tab-link {
    flex: 1 1 auto;
    padding: 10px 14px;
  }

  .referral-panel {
    padding: 20px;
    width: calc(100% - 32px);
  }

  .referral-stats {
    grid-template-columns: 1fr;
  }
}

/* One-tap import for the whitelist VPN: on a phone the QR is useless
   because it sits on the same screen the customer is reading. */
.whitelist-vpn-open {
  margin: 0 0 8px;
  width: 100%;
}

/* Full width is right on a phone; on a desktop it turns into a metre-wide
   orange bar, so cap it once there is room to spare. */
@media (min-width: 641px) {
  .whitelist-vpn-open {
    max-width: 380px;
  }
}

.connect-step-body .credential-note {
  font-weight: 600;
}

.whitelist-vpn-link .credential-note {
  display: block;
  margin-bottom: 14px;
}

.whitelist-vpn-link .credential-row dd {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* These rows carry no <dt>: the shared two-column grid was dropping the link
   and its buttons into the 120px label column, one per line. */
.whitelist-vpn-link .credential-row {
  display: block;
}

/* And the value must be allowed to shrink - its own 180px floor pushed the
   buttons onto rows of their own as soon as the column narrowed. */
.whitelist-vpn-link .credential-value {
  flex: 0 1 auto;
  min-width: 0;
}

.whitelist-vpn-link .credential-value.is-secret {
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 640px) {
  /* The QR tile is dead weight on the device you are already holding. */
  .whitelist-vpn-body .setup-qr-tile {
    order: 2;
  }

  .whitelist-vpn-link .copy-button,
  .whitelist-vpn-link .small-action {
    flex: 1 1 140px;
  }
}

/* The app-based VPN is the primary path now. Its per-device recommendation is
   swapped by the same chooser that drives the IKEv2 accordions. */
.app-pick {
  display: grid;
  gap: 8px;
}

/* Without this the grid above wins over the hidden attribute and every
   platform's instructions render at once, one after another. */
.app-pick[hidden] {
  display: none;
}

.app-pick .app-list {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}

/* IKEv2 lives under a collapsed block. It borrows .cabinet-credentials for the
   card itself, so only the inner spacing and the link colour need restating -
   the latter because .setup-guide no longer wraps these guides. */
.setup-legacy .cabinet-credentials-body {
  display: grid;
  gap: 14px;
}

.setup-legacy h3 {
  color: var(--navy);
  margin: 8px 0 0;
}

.setup-legacy a:not(.button):not(.setup-qr-tile):not(.android-guide-qr):not(.android-guide-shot) {
  color: var(--secondary);
}

/* Notices sit inside the two-column hero grid: without spanning they take a
   grid cell and push the purchase card onto its own row. */
.hero-content > .hero-notice {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-weight: 600;
  grid-column: 1 / -1;
}

.hero-content > .hero-notice.referral-notice {
  background: rgba(92, 225, 166, 0.14);
  border-color: rgba(92, 225, 166, 0.36);
  color: #d6fbe9;
}