/* =============================================================================
 * Genotek canonical landing starter kit — styles
 * TPL-LANDING-GENOTEK-001 · kit genotek-canonical-v1
 *
 * ШАССИ. Перенесено из проверенной реализации brca-landing без изменения
 * значений: 35 токенов DS 2.0, контейнер 1344px, брейкпоинты 1160/1120/820/
 * 760/480 по ширине и 900/768/700/600 по высоте, типографическая шкала,
 * компоненты и hero-механика.
 *
 * Это заблокированные инварианты. Их правит изменение шаблона в DOS, а не
 * сборка отдельного лендинга: целостность файла проверяется по SHA-256 из
 * kit-manifest.json.
 * ========================================================================== */

@import url("./onest-font.css?v=20260805az");

:root {
  --primary: #2370fa;
  --on-primary: #fff;
  --surface: #f6f7f8;
  --surface-dim: #e9ecf0;
  --surface-bright: #fff;
  --on-surface: #000;
  --on-surface-var: #595f74;
  --secondary-tussock: #93683b;
  --secondary-java: #0a9fb0;
  --secondary-orange: #f04906;
  --secondary-rose: #ea187e;
  --secondary-lavender: #4651e5;
  --orange-tint: #fbd7c8;
  --blue-tint: #cfe0ff;
  --night: #0d111a;
  --line: #0f152024;
  --shadow-soft: 0 24px 80px #0f15201a;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --radius-s: 12px;
  --radius-m: 16px;
  --radius-l: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;
  --shell: 1344px
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  background: var(--surface);
  overflow-x: clip
}

body {
  min-width: 320px;
  color: var(--on-surface);
  background: var(--surface);
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  font-family: Onest, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  overflow-x: clip
}

body.modal-open {
  overflow: hidden
}

button,
input {
  font: inherit
}

button,
a {
  -webkit-tap-highlight-color: transparent
}

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

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

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

h1,
h2,
h3 {
  text-wrap: balance
}

.shell {
  width: min(calc(100% - 48px), var(--shell));
  margin-inline: auto
}

.skip-link {
  z-index: 1000;
  border-radius: var(--radius-full);
  color: var(--on-primary);
  background: var(--primary);
  padding: 12px 18px;
  transition: transform .18s;
  position: fixed;
  top: 12px;
  left: 12px;
  transform: translateY(-160%)
}

.skip-link:focus {
  transform: translateY(0)
}

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 4px
}

.eyebrow {
  color: var(--on-surface-var);
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: 20px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px
}

.eyebrow--light {
  color: #ffffffb8
}

.button {
  border-radius: var(--radius-full);
  cursor: pointer;
  border: 1px solid #0000;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  transition: color .18s, background-color .18s, border-color .18s, transform .18s;
  display: inline-flex
}

.button:hover {
  transform: translateY(-2px)
}

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

.button--primary:hover {
  background: #155dda
}

.button--dark {
  color: #fff;
  background: var(--night);
  min-height: 44px;
  padding: 10px 24px
}

.button--light {
  color: var(--night);
  background: #fff
}

.button--outline {
  color: var(--on-surface);
  background: 0 0;
  border-color: #00000038
}

.button--small {
  min-height: 44px;
  padding: 10px 22px;
  font-size: 14px;
  line-height: 20px
}

.button--full {
  width: 100%
}

.text-link {
  border-bottom: 1px solid;
  align-items: center;
  gap: 9px;
  padding-block: 8px;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex
}

.text-link svg {
  width: 18px;
  height: 18px
}

.site-header {
  z-index: 100;
  pointer-events: none;
  padding-top: 16px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0
}

.header-card {
  border-radius: var(--radius-full);
  -webkit-backdrop-filter: blur(26px)saturate(1.35);
  backdrop-filter: blur(26px)saturate(1.35);
  pointer-events: auto;
  background: #ffffff94;
  border: 1px solid #ffffff8c;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  min-height: 64px;
  padding: 10px 12px 10px 24px;
  transition: background .22s, box-shadow .22s;
  display: grid;
  box-shadow: 0 12px 48px #0f15200f
}

.site-header.is-scrolled .header-card {
  background: #ffffffc7;
  box-shadow: 0 16px 56px #0f15201a
}

.brand {
  align-items: center;
  display: inline-flex
}

.brand img {
  width: 100px;
  height: auto
}

.desktop-nav {
  justify-content: center;
  gap: 34px;
  display: flex
}

.desktop-nav a {
  color: #000000b8;
  font-size: 14px;
  line-height: 20px;
  position: relative
}

.desktop-nav a:after {
  content: "";
  transform-origin: 100%;
  background: currentColor;
  height: 1px;
  transition: transform .18s;
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  transform: scaleX(0)
}

.desktop-nav a:hover:after {
  transform-origin: 0;
  transform: scaleX(1)
}

.menu-button {
  width: 44px;
  height: 44px;
  color: var(--on-surface);
  cursor: pointer;
  background: #ffffffb3;
  border: 0;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: none
}

.menu-button svg {
  width: 21px;
  height: 21px
}

.mobile-nav {
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  pointer-events: auto;
  background: #ffffffe6;
  border: 1px solid #ffffffb3;
  gap: 4px;
  margin-top: 8px;
  padding: 16px;
  display: grid
}

.mobile-nav[hidden] {
  display: none
}

.mobile-nav a {
  border-radius: var(--radius-s);
  padding: 12px 14px
}

.mobile-nav a:hover {
  background: var(--surface)
}

.hero {
  border-radius: var(--radius-xl);
  background: var(--orange-tint);
  isolation: isolate;
  min-height: 920px;
  margin: 12px;
  position: relative;
  overflow: hidden
}

.hero:after {
  z-index: -2;
  background: color-mix(in srgb, var(--secondary-orange) 23%, var(--surface-bright));
  content: "";
  position: absolute;
  inset: 0
}

.hero-content {
  z-index: 2;
  min-height: 920px;
  width: min(calc(100% - 48px), var(--shell));
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding-top: 160px;
  padding-bottom: 56px;
  display: flex;
  position: relative
}

.hero h1 {
  letter-spacing: 0;
  max-width: 680px;
  margin-bottom: 28px;
  font-size: clamp(58px, 6.2vw, 96px);
  font-weight: 400;
  line-height: .98
}

.hero-lead {
  margin-bottom: 36px;
  font-size: clamp(18px, 1.55vw, 22px);
  line-height: 1.38
}

.hero-actions {
  align-items: center;
  gap: 28px;
  margin-bottom: 72px;
  display: flex
}

.hero-proof {
  border-top: 1px solid #0003;
  gap: 28px;
  width: 100%;
  padding-top: 20px;
  font-size: 14px;
  line-height: 20px;
  display: flex
}

.hero-proof strong {
  color: #00000080;
  margin-right: 5px;
  font-size: 12px
}

.hero-note {
  color: #0000008f;
  max-width: 480px;
  margin: 18px 0 0;
  font-size: 12px;
  line-height: 16px
}

.factor-story {
  background: var(--surface)
}

.factor-heading {
  grid-template-columns: 1.5fr .6fr;
  align-items: end;
  gap: 96px;
  margin-bottom: 72px;
  display: grid
}

.factor-heading .eyebrow {
  grid-column: 1/-1;
  margin-bottom: -44px
}

.factor-heading h2,
.account-heading h2,
.route-heading h2,
.specialists-head h2,
.included-copy h2 {
  letter-spacing: 0;
  margin-bottom: 0;
  font-size: clamp(52px, 7vw, 100px);
  font-weight: 400;
  line-height: .98
}

.factor-heading>p:last-child,
.account-heading>p:last-child,
.route-heading>p:last-child,
.specialists-head>p:last-child {
  color: var(--on-surface-var);
  margin-bottom: 4px;
  font-size: 18px;
  line-height: 1.5
}

.factor-grid {
  grid-template-columns: 1.07fr .93fr .93fr;
  align-items: end;
  gap: 16px;
  display: grid
}

.factor-card {
  border-radius: var(--radius-xl);
  background: var(--surface-dim);
  isolation: isolate;
  min-height: 610px;
  position: relative;
  overflow: hidden
}

.factor-card--sleep {
  min-height: 720px
}

.factor-card--metabolism {
  min-height: 570px
}

.factor-card--stress {
  min-height: 650px
}

.factor-card picture,
.factor-card img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0
}

.factor-card img {
  object-fit: cover;
  transition: transform .9s cubic-bezier(.22, 1, .36, 1)
}

.factor-card--sleep img {
  object-position: 42% center
}

.factor-card--metabolism img {
  object-position: center
}

.factor-card--stress img {
  object-position: 67% center
}

.factor-card:hover img {
  transform: scale(1.035)
}

.factor-card__shade {
  background: #04080f6b;
  position: absolute;
  inset: 35% 0 0
}

.factor-card__copy {
  color: #fff;
  position: absolute;
  bottom: 28px;
  left: 28px;
  right: 28px
}

.factor-card__copy>span {
  color: #ffffff9e;
  letter-spacing: .08em;
  margin-bottom: 20px;
  font-size: 12px;
  display: inline-block
}

.factor-card__copy h3 {
  letter-spacing: 0;
  margin-bottom: 10px;
  font-size: clamp(30px, 3vw, 46px);
  font-weight: 400;
  line-height: 1.08
}

.factor-card__copy p {
  color: #ffffffc7;
  max-width: 330px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px
}

.recognition {
  color: #fff;
  background: var(--night);
  overflow: hidden
}

.recognition-grid {
  grid-template-columns: .5fr 1.5fr;
  gap: 64px;
  margin-bottom: 80px;
  display: grid
}

.recognition-grid .eyebrow {
  color: #ffffff8c
}

.recognition h2 {
  letter-spacing: 0;
  max-width: 1000px;
  margin-bottom: 28px;
  font-size: clamp(54px, 7.4vw, 112px);
  font-weight: 400;
  line-height: .98
}

.recognition-grid>div>p {
  color: #ffffffa1;
  max-width: 660px;
  margin-bottom: 0;
  font-size: 18px;
  line-height: 1.5
}

.symptom-marquee {
  border-top: 1px solid #ffffff2e;
  border-bottom: 1px solid #ffffff2e;
  width: 100%;
  padding-block: 24px;
  overflow: hidden
}

.symptom-track {
  will-change: transform;
  align-items: center;
  gap: 12px;
  width: max-content;
  display: flex
}

.symptom-track span {
  border-radius: var(--radius-full);
  color: #ffffffd6;
  white-space: nowrap;
  border: 1px solid #ffffff38;
  align-items: center;
  min-height: 56px;
  padding: 14px 24px;
  font-size: 18px;
  display: inline-flex
}

.evidence {
  background: var(--surface-bright)
}

.evidence-grid {
  grid-template-columns: minmax(0, .95fr) minmax(0, .8fr);
  align-items: center;
  gap: clamp(56px, 8vw, 128px);
  display: grid
}

.evidence-visual {
  border-radius: var(--radius-xl);
  background: var(--night);
  isolation: isolate;
  min-height: 780px;
  position: relative;
  overflow: hidden
}

.visual-caption {
  z-index: 2;
  border-radius: var(--radius-full);
  color: #fff;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  background: #090f1a57;
  border: 1px solid #ffffff5c;
  padding: 10px 16px;
  font-size: 12px;
  line-height: 16px;
  position: absolute;
  bottom: 24px;
  right: 24px
}

.evidence-copy h2 {
  letter-spacing: 0;
  margin-bottom: 28px;
  font-size: clamp(48px, 5.1vw, 76px);
  font-weight: 400;
  line-height: 1.02
}

.large-copy {
  color: var(--on-surface-var);
  font-size: 20px;
  line-height: 1.5
}

.evidence-copy .large-copy {
  max-width: 680px;
  margin-bottom: 48px
}

.evidence-points {
  margin: 0;
  padding: 0;
  list-style: none
}

.evidence-points li {
  border-top: 1px solid var(--line);
  grid-template-columns: 48px 1fr;
  gap: 20px;
  padding-block: 24px;
  display: grid
}

.evidence-points>li>span {
  color: var(--on-surface-var);
  font-size: 12px;
  line-height: 20px
}

.evidence-points h3 {
  margin-bottom: 7px;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px
}

.evidence-points p {
  color: var(--on-surface-var);
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px
}

.account {
  background: var(--surface-dim)
}

.account-heading,
.route-heading,
.specialists-head {
  grid-template-columns: 1.4fr .6fr;
  align-items: end;
  gap: 80px;
  margin-bottom: 72px;
  display: grid
}

.account-heading .eyebrow,
.route-heading .eyebrow,
.specialists-head .eyebrow {
  grid-column: 1/-1;
  margin-bottom: -42px
}

.account-window {
  color: var(--on-surface);
  background: #151820;
  border-radius: 40px;
  padding: 16px;
  box-shadow: 0 40px 100px #0f15202e
}

.account-bar {
  background: #fff;
  border-radius: 24px 24px 8px 8px;
  justify-content: space-between;
  align-items: center;
  min-height: 72px;
  padding: 0 24px;
  display: flex
}

.account-brand,
.account-profile {
  align-items: center;
  gap: 14px;
  font-size: 14px;
  display: flex
}

.account-brand img {
  width: 94px
}

.account-brand span {
  border-left: 1px solid var(--line);
  color: var(--on-surface-var);
  padding-left: 14px
}

.profile-dot {
  color: #fff;
  background: var(--secondary-lavender);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex
}

.account-body {
  background: #fff;
  border-radius: 8px 8px 24px 24px;
  grid-template-columns: 220px 1fr;
  min-height: 650px;
  margin-top: 8px;
  display: grid;
  overflow: hidden
}

.account-nav {
  border-right: 1px solid var(--line);
  background: var(--surface);
  flex-direction: column;
  gap: 6px;
  padding: 32px 18px;
  display: flex
}

.account-nav span {
  border-radius: var(--radius-full);
  min-height: 44px;
  color: var(--on-surface-var);
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 20px;
  display: flex
}

.account-nav span.is-active {
  color: #fff;
  background: var(--night)
}

.account-nav svg {
  width: 18px;
  height: 18px
}

.account-main {
  flex-direction: column;
  padding: clamp(28px, 4vw, 56px);
  display: flex
}

.account-main__head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 40px;
  display: flex
}

.account-main__head p {
  color: var(--on-surface-var);
  margin-bottom: 8px;
  font-size: 14px
}

.account-main__head h3 {
  letter-spacing: 0;
  max-width: 650px;
  margin-bottom: 0;
  font-size: clamp(30px, 3.7vw, 54px);
  font-weight: 400;
  line-height: 1.08
}

.status-pill {
  border-radius: var(--radius-full);
  min-height: 32px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, #fff);
  white-space: nowrap;
  align-items: center;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  display: inline-flex
}

.status-pill--dark {
  color: #fff;
  background: #ffffff29
}

.data-panels {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 40px;
  display: grid
}

.data-panels article {
  border-radius: var(--radius-l);
  background: var(--surface);
  flex-direction: column;
  min-height: 230px;
  padding: 24px;
  display: flex
}

.data-panels article:nth-child(2) {
  background: color-mix(in srgb, var(--secondary-orange) 12%, #fff)
}

.data-panels article:nth-child(3) {
  background: color-mix(in srgb, var(--secondary-java) 13%, #fff)
}

.panel-index {
  color: var(--on-surface-var);
  margin-bottom: auto;
  font-size: 12px
}

.data-panels p {
  color: var(--on-surface-var);
  margin-bottom: 7px;
  font-size: 14px
}

.data-panels strong {
  margin-bottom: 8px;
  font-size: 24px;
  font-weight: 500;
  line-height: 30px;
  display: block
}

.data-panels small {
  color: var(--on-surface-var);
  font-size: 12px;
  line-height: 16px
}

.account-next {
  border-top: 1px solid var(--line);
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-top: auto;
  padding-top: 32px;
  display: flex
}

.account-next .eyebrow {
  margin-bottom: 12px;
  display: block
}

.account-next h3 {
  margin-bottom: 6px;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px
}

.account-next p {
  max-width: 590px;
  color: var(--on-surface-var);
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px
}

.account-demo-action {
  cursor: default;
  user-select: none
}

.account-demo-action:hover {
  transform: none
}

.account-caption {
  color: #ffffff8f;
  margin: 12px 8px 2px;
  font-size: 12px;
  line-height: 16px
}

.route {
  color: #fff;
  background: var(--night)
}

.route-heading .eyebrow,
.route-heading>p:last-child {
  color: #ffffff94
}

.specialist-ribbon {
  grid-template-columns: repeat(4, minmax(300px, 1fr));
  gap: 12px;
  width: min(100% - 24px, 1660px);
  margin-inline: auto;
  display: grid
}

.specialist {
  border-radius: var(--radius-xl);
  flex-direction: column;
  min-height: 510px;
  padding: 30px;
  display: flex
}

.specialist>span {
  color: #ffffff94;
  margin-bottom: auto;
  font-size: 12px
}

.specialist h3 {
  color: #fff;
  letter-spacing: 0;
  margin-bottom: 14px;
  font-size: clamp(28px, 2.5vw, 40px);
  font-weight: 400;
  line-height: 1.06
}

.specialist p {
  color: #ffffffb8;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px
}

.specialist--blue {
  background: var(--primary)
}

.specialist--java {
  background: var(--secondary-java)
}

.specialist--orange {
  background: var(--secondary-orange)
}

.specialist--lavender {
  background: var(--secondary-lavender)
}

.included {
  background: var(--surface-dim)
}

.included-grid {
  grid-template-columns: minmax(0, 1fr) minmax(380px, .58fr);
  align-items: start;
  gap: clamp(48px, 9vw, 132px);
  display: grid
}

.included-copy h2 {
  max-width: 850px;
  margin-bottom: 34px
}

.included-copy>.large-copy {
  max-width: 700px;
  margin-bottom: 56px
}

.included-list {
  margin: 0;
  padding: 0;
  list-style: none
}

.included-list li {
  border-top: 1px solid #0000002e;
  grid-template-columns: 50px 1fr;
  gap: 20px;
  padding-block: 24px;
  display: grid
}

.included-list>li>span {
  color: var(--on-surface-var);
  font-size: 12px
}

.included-list strong {
  margin-bottom: 4px;
  font-size: 18px;
  line-height: 24px;
  display: block
}

.included-list p {
  color: var(--on-surface-var);
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px
}

.offer {
  border-radius: var(--radius-xl);
  color: #fff;
  background: var(--primary);
  padding: 34px;
  position: sticky;
  top: 104px;
  box-shadow: 0 32px 90px #2370fa38
}

.offer-top {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 80px;
  display: flex
}

.offer-top p {
  color: #ffffffc7;
  margin-bottom: 0;
  font-size: 13px
}

.offer-price {
  letter-spacing: 0;
  margin-bottom: 18px;
  font-size: clamp(50px, 5vw, 72px);
  font-weight: 400;
  line-height: 1
}

.offer-note {
  color: #ffffffb8;
  margin-bottom: 30px;
  font-size: 15px;
  line-height: 22px
}

.offer-lines {
  border-top: 1px solid #ffffff40;
  gap: 0;
  margin-bottom: 36px;
  display: grid
}

.offer-lines span {
  border-bottom: 1px solid #ffffff40;
  padding-block: 14px;
  font-size: 13px
}

.offer .button--primary {
  color: var(--primary);
  background: #fff
}

.offer-small {
  color: #ffffff94;
  text-align: center;
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 16px
}

.final-cta {
  border-radius: var(--radius-xl);
  color: #fff;
  background: var(--night);
  isolation: isolate;
  min-height: 850px;
  margin: 12px;
  position: relative;
  overflow: hidden
}

.final-shade {
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, #040911d1 0%, #040911bd 10%, #04091194 22%, #04091166 34%, #0409113d 44%, #0409111f 52%, #0409110d 58%, #04091105 64%, #0000 72%);
  position: absolute;
  inset: 0
}

.final-content {
  z-index: 2;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  min-height: 850px;
  padding-bottom: 64px;
  display: flex;
  position: relative
}

.final-content h2 {
  letter-spacing: 0;
  max-width: 760px;
  margin-bottom: 28px;
  font-size: clamp(52px, 6.4vw, 92px);
  font-weight: 400;
  line-height: .98
}

.final-content>p:not(.eyebrow) {
  color: #ffffffbd;
  max-width: 560px;
  margin-bottom: 32px;
  font-size: 18px;
  line-height: 1.5
}

.site-footer {
  background: var(--surface);
  padding-block: 56px 44px
}

.footer-top,
.footer-legal {
  justify-content: space-between;
  gap: 48px;
  display: flex
}

.footer-top {
  border-bottom: 1px solid var(--line);
  align-items: center;
  padding-bottom: 40px
}

.footer-top p {
  color: var(--on-surface-var);
  margin-bottom: 0;
  font-size: 13px
}

.footer-legal {
  padding-top: 28px
}

.footer-legal p {
  max-width: 740px;
  color: var(--on-surface-var);
  margin-bottom: 0;
  font-size: 12px;
  line-height: 18px
}

.footer-legal p:last-child {
  max-width: 360px
}

.modal-backdrop {
  z-index: 200;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background: #0d111a9e;
  place-items: center;
  padding: 20px;
  display: grid;
  position: fixed;
  inset: 0
}

.modal-backdrop[hidden] {
  display: none
}

.lead-modal {
  border-radius: var(--radius-xl);
  background: #fff;
  width: min(100%, 600px);
  max-height: calc(100vh - 40px);
  padding: clamp(32px, 6vw, 56px);
  position: relative;
  overflow-y: auto;
  box-shadow: 0 32px 120px #00000047
}

.lead-modal h2 {
  letter-spacing: 0;
  margin-bottom: 16px;
  font-size: clamp(38px, 5vw, 58px);
  font-weight: 400;
  line-height: 1.05
}

.lead-modal>div>p:not(.eyebrow) {
  color: var(--on-surface-var)
}

.form-package {
  align-self: flex-start;
  margin-bottom: 12px
}

.modal-close {
  z-index: 2;
  border: 1px solid var(--line);
  cursor: pointer;
  background: #fff;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  position: absolute;
  top: 18px;
  right: 18px
}

.modal-close svg {
  width: 19px;
  height: 19px
}

.lead-form {
  gap: 18px;
  margin-top: 32px;
  display: grid
}

.lead-form label {
  gap: 8px;
  display: grid
}

.lead-form label>span {
  font-size: 13px;
  font-weight: 500
}

.lead-form input {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  min-height: 56px;
  color: var(--on-surface);
  background: var(--surface);
  padding: 14px 18px
}

.lead-form input[aria-invalid=true] {
  border-color: var(--secondary-rose)
}

.form-error {
  color: var(--secondary-rose);
  margin: -8px 0 0;
  font-size: 12px
}

.form-consent {
  color: var(--on-surface-var);
  margin-bottom: 0;
  font-size: 11px;
  line-height: 16px
}

.success-icon {
  color: #fff;
  background: var(--secondary-java);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 28px;
  display: inline-flex
}

.success-view .button {
  margin-top: 26px
}

.js .reveal {
  opacity: 0;
  transition: opacity .7s, transform .85s cubic-bezier(.22, 1, .36, 1);
  transform: translateY(26px)
}

.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0)
}

.js .factor-story .factor-card.reveal:nth-child(2) {
  transition-delay: .14s
}

.js .factor-story .factor-card.reveal:nth-child(3) {
  transition-delay: .28s
}

@media (width<=1120px) {

  .desktop-nav,
  .header-cta {
    display: none
  }

  .header-card {
    grid-template-columns: 1fr auto
  }

  .menu-button {
    display: inline-flex
  }

  .hero,
  .hero-content {
    min-height: 860px
  }

  .factor-heading,
  .account-heading,
  .route-heading,
  .specialists-head {
    grid-template-columns: 1fr .62fr;
    gap: 48px
  }

  .factor-grid {
    grid-template-columns: 1fr 1fr
  }

  .factor-card--sleep {
    grid-row: span 2
  }

  .factor-card--metabolism,
  .factor-card--stress {
    min-height: 352px
  }

  .evidence-grid {
    gap: 56px
  }

  .evidence-visual {
    min-height: 670px
  }

  .account-body {
    grid-template-columns: 170px 1fr
  }

  .data-panels {
    grid-template-columns: 1fr
  }

  .data-panels article {
    min-height: 140px
  }

  .panel-index {
    margin-bottom: 22px
  }

  .specialist-ribbon {
    scroll-snap-type: x mandatory;
    grid-template-columns: repeat(4, minmax(330px, 1fr));
    padding-bottom: 12px;
    overflow-x: auto
  }

  .specialist {
    scroll-snap-align: start
  }

  .included-grid {
    gap: 56px
  }
}

@media (width<=820px) {
  .shell {
    width: min(calc(100% - 32px), var(--shell))
  }

  .section {
    padding-block: 96px
  }

  .site-header {
    padding-top: 10px
  }

  .header-card {
    min-height: 58px;
    padding: 7px 8px 7px 18px
  }

  .hero {
    border-radius: 24px;
    min-height: 920px;
    margin: 8px
  }

  .hero:after,
  .hero-split {
    background: color-mix(in srgb, var(--secondary-orange) 18%, #fff)
  }

  .hero-content {
    justify-content: flex-end;
    min-height: 920px;
    padding-top: 100px;
    padding-bottom: 28px
  }

  .hero-content>* {
    max-width: 100%
  }

  .hero-visual {
    inset: 0
  }

  .hero-content .eyebrow {
    margin-bottom: 14px
  }

  .hero h1 {
    margin-bottom: 18px;
    font-size: clamp(48px, 13vw, 72px)
  }

  .hero-lead {
    max-width: 560px;
    margin-bottom: 24px;
    font-size: 17px
  }

  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 34px
  }

  .hero-proof {
    white-space: nowrap;
    gap: 16px;
    overflow-x: auto
  }

  .factor-heading,
  .account-heading,
  .route-heading,
  .specialists-head,
  .recognition-grid {
    grid-template-columns: 1fr;
    gap: 26px
  }

  .factor-heading .eyebrow,
  .account-heading .eyebrow,
  .route-heading .eyebrow,
  .specialists-head .eyebrow {
    grid-column: auto;
    margin-bottom: 0
  }

  .factor-heading,
  .account-heading,
  .route-heading,
  .specialists-head {
    margin-bottom: 48px
  }

  .factor-grid {
    grid-template-columns: 1fr
  }

  .factor-card,
  .factor-card--sleep,
  .factor-card--metabolism,
  .factor-card--stress {
    min-height: 540px
  }

  .recognition-grid {
    margin-bottom: 52px
  }

  .recognition h2 {
    font-size: clamp(48px, 13vw, 82px)
  }

  .evidence-grid {
    grid-template-columns: 1fr
  }

  .evidence-visual {
    min-height: 620px
  }

  .account-window {
    border-radius: 28px;
    padding: 8px
  }

  .account-bar {
    border-radius: 20px 20px 6px 6px;
    min-height: 62px;
    padding: 0 18px
  }

  .account-brand span,
  .account-profile>span:first-child,
  .account-nav {
    display: none
  }

  .account-body {
    border-radius: 6px 6px 20px 20px;
    grid-template-columns: 1fr;
    min-height: auto
  }

  .account-main {
    padding: 26px 18px
  }

  .account-main__head,
  .account-next {
    flex-direction: column;
    align-items: flex-start
  }

  .data-panels {
    grid-template-columns: 1fr
  }

  .account-caption {
    margin: 10px 6px 4px
  }

  .specialist-ribbon {
    grid-template-columns: repeat(4, minmax(82vw, 1fr));
    width: calc(100% - 16px)
  }

  .specialist {
    min-height: 480px
  }

  .included-grid {
    grid-template-columns: 1fr
  }

  .offer {
    position: relative;
    top: auto
  }

  .final-cta,
  .final-content {
    min-height: 760px
  }

  .final-cta {
    border-radius: 24px;
    margin: 8px
  }

  .footer-top,
  .footer-legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px
  }
}

@media (width<=480px) {
  .shell {
    width: calc(100% - 24px)
  }

  .section {
    padding-block: 80px
  }

  .button {
    width: 100%
  }

  .hero,
  .hero-content {
    min-height: 860px
  }

  .hero-visual {
    inset: 0
  }

  .hero h1 {
    font-size: 48px
  }

  .hero-proof {
    font-size: 12px
  }

  .factor-heading h2,
  .account-heading h2,
  .route-heading h2,
  .specialists-head h2,
  .included-copy h2 {
    font-size: 48px
  }

  .factor-card,
  .factor-card--sleep,
  .factor-card--metabolism,
  .factor-card--stress {
    min-height: 480px
  }

  .recognition h2,
  .evidence-copy h2,
  .final-content h2 {
    font-size: 46px
  }

  .evidence-visual {
    min-height: 520px
  }

  .account-main__head .status-pill {
    align-self: flex-start
  }

  .account-next .button {
    width: 100%
  }

  .included-list li {
    grid-template-columns: 34px 1fr
  }

  .offer {
    padding: 26px
  }

  .offer-top {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 56px
  }

  .final-cta,
  .final-content {
    min-height: 700px
  }
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

  *,
  :before,
  :after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important
  }

  .js .reveal {
    opacity: 1;
    transform: none
  }

  .js .factor-story .factor-card.reveal {
    transition-delay: 0s
  }
}

.eyebrow {
  border-radius: var(--radius-full);
  color: #164da8;
  letter-spacing: .05em;
  background: #cfe0ffb8;
  border: 1px solid #2370fa33;
  align-items: center;
  width: fit-content;
  min-height: 36px;
  margin-bottom: 24px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  display: inline-flex
}

.eyebrow--light,
.hero .eyebrow {
  color: #fff;
  background: #0d111a75;
  border-color: #ffffff4d
}

.hero {
  isolation: isolate;
  color: #fff;
  background: var(--night);
  min-height: min(900px, 100svh)
}

.hero:after,
.hero-split {
  display: none
}

.hero-visual {
  z-index: -2;
  display: block;
  position: absolute;
  inset: 0
}

.hero-visual img {
  object-fit: cover;
  object-position: 32% center;
  width: 100%;
  height: 100%
}

.hero-shade {
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(#040b18a3 0%, #040b1866 7%, #040b1829 14%, #040b180d 20%, #0000 32%), linear-gradient(90deg, #040b18cc 0%, #040b189e 12%, #040b1861 24%, #040b1829 36%, #040b180d 44%, #0000 56%);
  position: absolute;
  inset: 0
}

.hero-content {
  min-height: min(900px, 100svh);
  padding-top: clamp(160px, 19vh, 224px);
  padding-bottom: 64px
}

.hero-content>* {
  max-width: 680px
}

.hero h1 {
  color: #fff;
  letter-spacing: 0;
  max-width: 720px;
  font-size: clamp(58px, 7vw, 104px);
  line-height: .94
}

.hero-lead,
.hero-note,
.hero .text-link,
.hero-proof {
  color: #ffffffe0
}

.hero-proof {
  border-top-color: #ffffff57
}

.factor-card__copy p {
  color: #ffffffe6;
  max-width: 28ch;
  font-size: 17px;
  line-height: 26px
}

.factor-card__shade {
  background: #04080f6b
}

.recognition {
  color: var(--on-surface);
  background: var(--surface)
}

.recognition-frame {
  border-radius: var(--radius-xl);
  background: var(--surface-bright);
  min-height: 680px;
  box-shadow: var(--shadow-soft);
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
  display: grid;
  overflow: hidden
}

.recognition-visual {
  min-height: 680px;
  position: relative;
  overflow: hidden
}

.recognition-visual img {
  object-fit: cover;
  object-position: 63% center;
  width: 100%;
  height: 100%
}

.recognition-copy {
  background: var(--blue-tint);
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 6vw, 88px);
  display: flex
}

.recognition-copy h2 {
  letter-spacing: 0;
  max-width: 10ch;
  margin-bottom: 24px;
  font-size: clamp(48px, 5vw, 78px);
  line-height: .98
}

.recognition-copy>p:not(.eyebrow) {
  color: #30384c;
  max-width: 47ch;
  margin-bottom: 36px;
  font-size: 18px;
  line-height: 28px
}

.symptom-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid
}

.symptom-list li {
  border-top: 1px solid #0f152029;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 12px;
  padding: 15px 0;
  font-size: 16px;
  line-height: 24px;
  display: grid
}

.symptom-list span {
  color: #164da8;
  font-size: 13px;
  font-weight: 600
}

.evidence-visual {
  border-radius: var(--radius-xl);
  min-height: 720px;
  position: relative;
  overflow: hidden
}

.evidence-visual picture,
.evidence-visual img {
  width: 100%;
  height: 100%
}

.evidence-visual img {
  object-fit: cover
}

.evidence-points p,
.included-list p,
.specialist p {
  font-size: 16px;
  line-height: 24px
}

.route {
  color: var(--on-surface);
  background: var(--surface-bright);
  overflow: hidden
}

.route-heading {
  margin-bottom: 64px
}

.route-heading .eyebrow {
  color: #164da8
}

.route-heading>p:last-child {
  color: var(--on-surface-var)
}

.route-cards {
  width: min(calc(100% - 48px), var(--shell));
  gap: 12px;
  height: 640px;
  margin-inline: auto;
  display: flex
}

.route-card {
  border-radius: var(--radius-xl);
  color: #fff;
  background: var(--night);
  cursor: pointer;
  border: 1px solid #ffffff2e;
  flex: 0 160px;
  min-width: 0;
  transition: flex-basis .52s cubic-bezier(.22, 1, .36, 1), transform .24s;
  position: relative;
  overflow: hidden
}

.route-card.is-expanded {
  flex-basis: 544px
}

.route-card>img,
.route-card>picture,
.route-card>picture img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0
}

.route-card>img,
.route-card>picture img {
  object-fit: cover;
  object-position: center;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1), filter .3s;
  transform: scale(1.015)
}

.route-card:nth-child(6)>img {
  object-position: 72% center
}

.route-card__toggle,
.route-card__number {
  z-index: 3;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 52px;
  height: 52px;
  display: inline-flex;
  position: absolute;
  top: 20px
}

.route-card__number {
  color: #fff;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background: #0d111ab8;
  border: 1px solid #ffffff3d;
  font-size: 16px;
  font-weight: 600;
  left: 20px
}

.route-card__toggle {
  color: #fff;
  cursor: pointer;
  background: #0d111ab8;
  border: 1px solid #ffffff3d;
  right: 20px
}

.route-card__toggle svg {
  width: 22px;
  height: 22px
}

.route-card__copy {
  z-index: 2;
  border-radius: var(--radius-l);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background: #0d111acc;
  border: 1px solid #ffffff2e;
  min-width: 260px;
  padding: 24px;
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px
}

.route-card__copy h3 {
  letter-spacing: 0;
  max-width: 13ch;
  margin-bottom: 0;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.04
}

.route-card__details {
  opacity: 0;
  max-height: 0;
  transition: max-height .42s, opacity .26s, margin-top .42s;
  overflow: hidden
}

.route-card.is-expanded .route-card__details {
  opacity: 1;
  max-height: 260px;
  margin-top: 18px
}

.route-card__details p {
  color: #ffffffdb;
  max-width: 44ch;
  margin-bottom: 18px;
  font-size: 16px;
  line-height: 24px
}

.route-card__details span {
  color: #ffffffb8;
  border-top: 1px solid #ffffff38;
  padding-top: 14px;
  font-size: 14px;
  line-height: 20px;
  display: block
}

.specialists {
  background: var(--surface);
  overflow: hidden
}

.specialist-ribbon {
  width: min(calc(100% - 48px), var(--shell));
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 112px auto 0;
  display: grid;
  overflow: visible
}

.specialist {
  border-radius: var(--radius-xl);
  color: #fff;
  isolation: isolate;
  min-height: 540px;
  clip-path: inset(-96px 0 0 0 round var(--radius-xl));
  padding: 330px 28px 30px;
  position: relative;
  overflow: visible
}

.specialist:after {
  display: none
}

.specialist>img {
  z-index: 1;
  object-fit: cover;
  object-position: center top;
  transform-origin: top;
  width: 118%;
  max-width: none;
  height: 410px;
  position: absolute;
  top: -92px;
  left: 50%;
  transform: translate(-50%)
}

.specialist>span {
  z-index: 3;
  color: #ffffffd1;
  font-size: 14px;
  font-weight: 600;
  position: absolute;
  top: 18px;
  left: 20px
}

.specialist>div {
  z-index: 3;
  position: relative
}

.specialist h3 {
  margin-bottom: 14px;
  font-size: clamp(26px, 2.25vw, 36px);
  line-height: 1.02
}

.specialist p {
  color: #ffffffe0;
  margin-bottom: 0
}

.final-visual,
.final-visual img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0
}

.final-visual img {
  object-fit: cover;
  object-position: 58% center
}

@media (width<=1160px) {
  .recognition-frame {
    grid-template-columns: 1fr 1fr
  }

  .route-cards {
    scroll-snap-type: x proximity;
    width: calc(100% - 48px);
    padding-bottom: 12px;
    overflow-x: auto
  }

  .route-card {
    scroll-snap-align: center;
    flex: 0 0 172px
  }

  .route-card.is-expanded {
    flex-basis: min(560px, 68vw)
  }

  .specialist-ribbon {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 112px
  }
}

@media (width<=760px) {
  .eyebrow {
    min-height: 34px;
    margin-bottom: 20px;
    padding: 7px 12px;
    font-size: 13px;
    line-height: 18px
  }

  .hero,
  .hero-content {
    min-height: 820px
  }

  .hero-visual img {
    object-position: 38% 38%
  }

  .hero-shade {
    background: linear-gradient(#040b18a8 0%, #040b185c 9%, #040b181a 18%, #0000 30%), linear-gradient(90deg, #040b18c2 0%, #040b188a 18%, #040b183d 34%, #040b1814 46%, #0000 62%)
  }

  .hero-content {
    justify-content: flex-end;
    padding-top: 144px;
    padding-bottom: 40px
  }

  .hero h1 {
    font-size: clamp(48px, 14vw, 72px)
  }

  .recognition-frame {
    grid-template-columns: 1fr
  }

  .recognition-visual {
    min-height: 420px
  }

  .recognition-copy {
    padding: 36px 24px 40px
  }

  .recognition-copy h2 {
    font-size: clamp(44px, 12vw, 64px)
  }

  .evidence-visual {
    min-height: 500px
  }

  .route-cards:not([data-mobile-slider]) {
    gap: 10px;
    width: calc(100% - 24px);
    height: 590px
  }

  .route-card {
    border-radius: var(--radius-l);
    flex-basis: 116px
  }

  .route-card.is-expanded {
    flex-basis: min(86vw, 440px)
  }

  .route-card__number,
  .route-card__toggle {
    width: 44px;
    height: 44px;
    top: 14px
  }

  .route-card__number {
    left: 14px
  }

  .route-card__toggle {
    right: 14px
  }

  .route-card__copy {
    min-width: 244px;
    padding: 20px;
    bottom: 10px;
    left: 10px;
    right: 10px
  }

  .route-card__copy h3 {
    font-size: 26px
  }

  .specialist-ribbon {
    grid-template-columns: 1fr;
    row-gap: 104px;
    margin-top: 96px
  }

  .specialist {
    min-height: 540px;
    padding-top: 330px
  }

  .specialist>img {
    height: 400px;
    top: -84px
  }
}

.site-header {
  --header-frame-inset: 0px
}

.header-card {
  width: min(calc(100% - 48px - var(--header-frame-inset)), var(--shell))
}

.hero {
  --hero-scroll-distance: 75svh;
  min-height: calc(100svh + var(--hero-scroll-distance));
  height: calc(100svh + var(--hero-scroll-distance));
  background: var(--surface);
  border-radius: 0;
  margin: 0;
  overflow: visible
}

.hero-stage {
  top: var(--hero-gutter, 0px);
  width: calc(100% - var(--hero-gutter, 0px) * 2);
  height: calc(100svh - var(--hero-gutter, 0px) * 2);
  border-radius: var(--hero-radius, 0px);
  background: var(--night);
  isolation: isolate;
  will-change: top, width, height, border-radius;
  margin-inline: auto;
  position: sticky;
  overflow: hidden
}

.hero-content {
  width: min(calc(100% - 48px), var(--shell));
  min-height: 100%;
  padding-left: 24px;
  padding-right: 24px
}

.route-card,
.route-card.is-expanded {
  cursor: default;
  min-height: 500px
}

.route-card:hover {
  transform: none
}

.route-card__toggle {
  display: none
}

.route-card__details,
.route-card.is-expanded .route-card__details {
  opacity: 1;
  max-height: none;
  margin-top: 14px;
  overflow: visible
}

.route-card__details p {
  display: block
}

@media (width<=760px) {
  .header-card {
    width: min(calc(100% - 24px - var(--header-frame-inset)), var(--shell))
  }

  .hero {
    min-height: calc(100svh + var(--hero-scroll-distance, 300px));
    height: calc(100svh + var(--hero-scroll-distance, 300px))
  }

  .hero-content {
    width: calc(100% - 24px);
    padding-left: 12px;
    padding-right: 12px
  }

  .route-card,
  .route-card.is-expanded {
    min-height: 500px
  }
}

.eyebrow,
.eyebrow--light,
.hero .eyebrow {
  color: #164da8;
  letter-spacing: 0;
  background: 0 0;
  border: 0;
  border-radius: 0;
  min-height: 0;
  margin-bottom: 18px;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  display: block
}

.eyebrow--light,
.hero .eyebrow {
  color: #ffffffe0
}

.site-header {
  padding-top: 16px
}

.header-card,
.site-header.is-scrolled .header-card {
  -webkit-backdrop-filter: blur(28px)saturate(1.2);
  backdrop-filter: blur(28px)saturate(1.2);
  background: #fafcff61;
  border-color: #ffffff75;
  box-shadow: 0 12px 32px #070d191f
}

.site-header.is-scrolled .header-card {
  background: #fafcff85
}

.text-link {
  border-bottom: 0;
  text-decoration: none
}

.hero-proof,
.factor-card__shade {
  display: none
}

.factor-card__copy,
.route-card__copy,
.recognition-copy {
  isolation: isolate
}

.factor-card__copy:before,
.route-card__copy:before,
.recognition-copy:before {
  z-index: -1;
  content: "";
  pointer-events: none;
  -webkit-backdrop-filter: blur(14px)saturate(.9);
  backdrop-filter: blur(14px)saturate(.9);
  background: linear-gradient(#03091400 0%, #0309148a 74%);
  position: absolute;
  mask-image: radial-gradient(80% 76% at 50% 72%, #000 28%, #000000c7 60%, #0000 100%)
}

.factor-card__copy:before {
  inset: -48px -52px -38px
}

.recognition {
  background: var(--surface)
}

.recognition-frame {
  border-radius: var(--radius-xl);
  background: var(--night);
  align-items: flex-end;
  min-height: 760px;
  display: flex;
  position: relative;
  overflow: hidden
}

.recognition-visual,
.recognition-visual img {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  position: absolute;
  inset: 0
}

.recognition-visual img {
  object-fit: cover;
  object-position: center;
  filter: saturate(.9)contrast(1.03)
}

.recognition-frame:after {
  z-index: 1;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, #040a167a 0%, #040a161f 62%, #040a160a 100%);
  position: absolute;
  inset: 0
}

.recognition-copy {
  z-index: 2;
  color: #fff;
  background: 0 0;
  width: min(720px, 62%);
  padding: clamp(44px, 5vw, 80px);
  position: relative
}

.recognition-copy:before {
  inset: -58px -76px -68px -64px
}

.recognition-copy h2 {
  color: #fff;
  max-width: 12ch;
  margin-bottom: 20px;
  font-size: clamp(48px, 5vw, 78px)
}

.recognition-copy>p:not(.eyebrow) {
  color: #ffffffe6;
  max-width: 51ch;
  margin-bottom: 30px
}

.symptom-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 26px
}

.symptom-list li {
  color: #fffffff2;
  border-top-color: #ffffff47;
  grid-template-columns: 30px 1fr
}

.symptom-list span {
  color: #ffffffad
}

.evidence-visual picture {
  display: block;
  position: absolute;
  inset: 0
}

.evidence-visual img {
  object-position: center;
  display: block
}

.route-cards:not([data-mobile-slider]) {
  width: min(calc(100% - 48px), var(--shell));
  scroll-snap-type: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  height: auto;
  padding: 0;
  display: grid;
  overflow: visible
}

.route-card,
.route-card.is-expanded {
  flex: initial;
  scroll-snap-align: none;
  border-color: #ffffff38;
  min-height: 460px
}

.route-card:not(.is-expanded)>img,
.route-card:not(.is-expanded)>picture img {
  filter: brightness(.8)saturate(.92);
  transform: scale(1.03)
}

.route-card__copy {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: 0 0;
  border: 0;
  border-radius: 0;
  min-width: 0;
  padding: 22px;
  bottom: 12px;
  left: 12px;
  right: 12px
}

.route-card__copy:before {
  inset: -52px -42px -36px
}

.route-card__copy h3 {
  max-width: 12ch;
  font-size: clamp(26px, 2.3vw, 34px)
}

.route-card.is-expanded .route-card__details {
  max-height: 240px;
  margin-top: 14px
}

.route-card__details p {
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 22px
}

.route-card__details span {
  border-top-color: #fff3;
  padding-top: 10px;
  font-size: 13px
}

.specialist>img {
  object-fit: cover;
  height: 458px;
  mask-image: linear-gradient(#000 0% 70%, #0000009e 83%, #0000 100%)
}

.specialist--java>img {
  transform: translate(-50%)scale(1.69)translateY(12px);
  mask-image: linear-gradient(#000 0% 36%, #0000006b 50%, #0000 66%)
}

.specialist--orange>img {
  transform: translate(-50%)scale(1.64)translateY(-1px);
  mask-image: linear-gradient(#000 0% 36%, #0000006b 50%, #0000 66%)
}

.specialist--lavender>img {
  transform: translate(-50%)scale(1.3)translateY(-15px);
  mask-image: linear-gradient(#000 0% 36%, #0000006b 50%, #0000 66%)
}

.specialist--java:after,
.specialist--orange:after,
.specialist--lavender:after {
  z-index: 2;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  content: "";
  pointer-events: none;
  height: 72%;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0
}

.specialist--java:after {
  background: linear-gradient(180deg, transparent 0%, #0a9fb0b8 34%, var(--secondary-java) 54%)
}

.specialist--orange:after {
  background: linear-gradient(180deg, transparent 0%, #f04906b8 34%, var(--secondary-orange) 54%)
}

.specialist--lavender:after {
  background: linear-gradient(180deg, transparent 0%, #4651e5b8 34%, var(--secondary-lavender) 54%)
}

@media (width<=1160px) {
  .route-cards {
    width: min(calc(100% - 48px), var(--shell));
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media (width<=760px) {

  .eyebrow,
  .eyebrow--light,
  .hero .eyebrow {
    margin-bottom: 14px;
    font-size: 14px;
    line-height: 20px
  }

  .site-header {
    padding-top: 10px
  }

  .recognition-frame {
    min-height: 760px
  }

  .recognition-frame:after {
    background: linear-gradient(#040a162e 28%, #040a16ad 100%)
  }

  .recognition-copy {
    width: 100%;
    padding: 34px 24px 38px
  }

  .recognition-copy:before {
    inset: -52px -36px -48px
  }

  .recognition-copy h2 {
    font-size: clamp(42px, 11vw, 58px)
  }

  .symptom-list {
    grid-template-columns: 1fr
  }

  .route-cards:not([data-mobile-slider]) {
    grid-template-columns: 1fr;
    gap: 12px;
    width: calc(100% - 24px);
    height: auto
  }

  .route-card,
  .route-card.is-expanded {
    border-radius: var(--radius-l);
    min-height: 410px
  }

  .route-card__copy {
    padding: 20px;
    bottom: 8px;
    left: 8px;
    right: 8px
  }

  .route-card__copy h3 {
    font-size: 28px
  }

  .specialist {
    clip-path: inset(-88px 0 0 0 round var(--radius-xl))
  }

  .specialist>img {
    height: 448px;
    top: -84px
  }

  .specialist--java>img {
    transform: translate(-50%)scale(1.69)translateY(11px);
    mask-image: linear-gradient(#000 0% 34%, #0000006b 48%, #0000 64%)
  }

  .specialist--orange>img {
    transform: translate(-50%)scale(1.64)translateY(-1px);
    mask-image: linear-gradient(#000 0% 34%, #0000006b 48%, #0000 64%)
  }

  .specialist--lavender>img {
    transform: translate(-50%)scale(1.3)translateY(-15px);
    mask-image: linear-gradient(#000 0% 34%, #0000006b 48%, #0000 64%)
  }

  .specialist--java:after,
  .specialist--orange:after,
  .specialist--lavender:after {
    border-radius: 0 0 var(--radius-l) var(--radius-l);
    height: 76%
  }
}

.site-header {
  --header-top: 40px;
  padding-top: var(--header-top);
  transition: padding-top .2s
}

.header-card,
.site-header.is-scrolled .header-card {
  min-height: 80px;
  box-shadow: none;
  -webkit-backdrop-filter: blur(20px)saturate(1.08);
  backdrop-filter: blur(20px)saturate(1.08);
  background: #060c151a;
  border: 0;
  border-radius: 12px;
  padding: 10px 24px;
  transition: min-height .2s, background .2s, border-radius .2s
}

.header-card .brand img {
  filter: brightness(0)invert()
}

.desktop-nav a {
  color: #ffffffd6
}

.desktop-nav a:after {
  background: #ffffffad
}

.header-cta {
  color: #111827;
  background: #ffffffeb;
  border-color: #ffffffd6
}

.header-cta:hover {
  color: #fff;
  background: #111827
}

.eyebrow {
  color: #000;
  font-size: 17px;
  font-weight: 600;
  line-height: 22px
}

.hero .eyebrow,
.recognition-copy .eyebrow,
.eyebrow--light {
  color: #fff
}

.recognition-copy:before {
  display: none
}

.recognition-frame:after {
  background: linear-gradient(90deg, #040a16b8 0%, #040a1680 35%, #040a162e 62%, #040a1600 88%)
}

.recognition-visual img {
  object-position: center;
  filter: saturate(.98)contrast(1.03)
}

@media (width<=760px) {
  .site-header {
    padding-top: var(--header-top)
  }

  .header-card,
  .site-header.is-scrolled .header-card {
    border-radius: 12px;
    min-height: 66px;
    padding: 8px 16px
  }

  .eyebrow {
    font-size: 16px;
    line-height: 22px
  }

  .recognition-frame:after {
    background: linear-gradient(#040a160f 0%, #040a1661 42%, #040a16c7 100%)
  }
}

.hero {
  --hero-gutter: 0px;
  --hero-radius: 0px;
  --hero-scroll-distance: 75svh
}

.hero-content {
  min-height: 100%
}

.site-header {
  --header-top: 40px
}

.header-card {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: 0 0;
  border-radius: 0
}

.site-header.is-scrolled .header-card {
  -webkit-backdrop-filter: blur(20px)saturate(1.12);
  backdrop-filter: blur(20px)saturate(1.12);
  background: #f8fafcbd;
  border-radius: 16px;
  box-shadow: 0 12px 34px #070d191a
}

.site-header.is-scrolled .header-card .brand img {
  filter: none
}

.site-header.is-scrolled .desktop-nav a,
.site-header.is-scrolled .menu-button {
  color: #000000c2
}

.site-header.is-scrolled .desktop-nav a:after {
  background: #0000009e
}

.site-header.is-scrolled .header-cta {
  color: #fff;
  background: var(--primary);
  border-color: #0000
}

.menu-button {
  color: #fff
}

.eyebrow,
.eyebrow--light,
.hero .eyebrow {
  text-transform: none;
  letter-spacing: 0;
  font-size: 18px;
  font-weight: 600
}

@media (width<=760px) {
  .hero {
    --hero-scroll-distance: 300px
  }

  .hero-content {
    min-height: 100%
  }

  .site-header.is-scrolled .header-card {
    border-radius: 14px
  }

  .eyebrow,
  .eyebrow--light,
  .hero .eyebrow {
    font-size: 17px;
    line-height: 22px
  }
}

.hero {
  min-height: calc(100svh + var(--hero-scroll-distance, 75svh));
  height: calc(100svh + var(--hero-scroll-distance, 75svh));
  background: var(--surface);
  border-radius: 0;
  margin: 0;
  overflow: visible
}

.hero-stage {
  top: var(--hero-gutter, 0px);
  position: sticky
}

.factor-story.section {
  padding-top: clamp(70px, 6.66vw, 106px)
}

@media (width<=1120px) {
  .factor-story.section {
    padding-top: 64px
  }
}

@media (width<=760px) {
  .factor-story.section {
    padding-top: 54px
  }
}

.hero-lead {
  gap: 16px;
  max-width: 620px;
  margin-bottom: 36px;
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.45;
  display: grid
}

.hero-lead p {
  margin: 0
}

.hero-stage {
  flex-direction: column;
  display: flex
}

.hero-content {
  box-sizing: border-box;
  flex-direction: column;
  flex: auto;
  justify-content: flex-end;
  align-items: flex-start;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  padding-top: clamp(72px, 14svh, 160px);
  padding-bottom: clamp(20px, 4.5svh, 64px);
  display: flex;
  overflow: visible
}

.hero h1 {
  margin-bottom: clamp(12px, 2.5svh, 28px);
  font-size: clamp(40px, min(7.2svh, 7.8vw), 116px);
  line-height: clamp(.92, .9 + .02svh, .98)
}

.hero-lead {
  gap: clamp(8px, 1.5svh, 16px);
  margin-bottom: clamp(16px, 3.5svh, 36px);
  font-size: clamp(14px, min(2.2svh, 1.45vw), 20px);
  line-height: clamp(1.32, 1.28 + .04svh, 1.45)
}

.hero-actions {
  gap: clamp(12px, 2svh, 28px);
  margin-bottom: clamp(20px, 5svh, 72px)
}

.hero-actions .button {
  min-height: clamp(44px, 7.5svh, 56px);
  padding-block: clamp(10px, 1.6svh, 16px);
  padding-inline: clamp(20px, 3.2svh, 32px);
  font-size: clamp(14px, 2.1svh, 16px)
}

.hero-note {
  margin-top: clamp(8px, 1.8svh, 18px);
  font-size: clamp(10px, 1.6svh, 12px);
  line-height: clamp(14px, 2.4svh, 16px)
}

@media (width<=1120px) {
  .hero-content {
    min-height: 0
  }
}

@media (width<=820px) {
  .hero-content {
    height: 100%;
    min-height: 0;
    padding-top: clamp(64px, 12svh, 100px);
    padding-bottom: clamp(16px, 3.5svh, 28px)
  }
}

@media (width<=760px) {
  .hero-content {
    height: 100%;
    min-height: 0
  }
}

@media (height<=900px) {
  .hero-content {
    padding-top: clamp(64px, 11svh, 120px)
  }

  .hero h1 {
    font-size: clamp(44px, min(6.5svh, 7.2vw), 98px)
  }
}

@media (height<=768px) {
  .hero-content {
    padding-top: clamp(56px, 9svh, 96px);
    padding-bottom: clamp(16px, 3svh, 40px)
  }

  .hero h1 {
    margin-bottom: clamp(8px, 1.8svh, 18px);
    font-size: clamp(40px, min(5.8svh, 6.7vw), 80px)
  }

  .hero-lead {
    gap: clamp(6px, 1.2svh, 12px);
    margin-bottom: clamp(12px, 2.5svh, 22px);
    font-size: clamp(14px, min(2svh, 1.35vw), 17px);
    line-height: 1.38
  }

  .hero-actions {
    gap: clamp(10px, 1.8svh, 20px);
    margin-bottom: clamp(16px, 3.5svh, 40px)
  }
}

@media (height<=700px) {
  .hero-content {
    padding-top: clamp(52px, 8.5svh, 80px);
    padding-bottom: clamp(14px, 2.8svh, 32px)
  }

  .hero h1 {
    margin-bottom: clamp(6px, 1.4svh, 14px);
    font-size: clamp(36px, min(5.3svh, 6.1vw), 68px)
  }

  .hero-lead {
    margin-bottom: clamp(10px, 2.2svh, 18px);
    font-size: clamp(13px, min(1.9svh, 1.25vw), 16px);
    line-height: 1.35
  }

  .hero-actions {
    margin-bottom: clamp(14px, 3svh, 28px)
  }

  .hero-actions .button {
    min-height: 44px;
    padding-block: 10px;
    font-size: 14px
  }
}

@media (height<=600px) {
  .hero-content {
    padding-top: clamp(48px, 8svh, 72px);
    padding-bottom: clamp(12px, 2.5svh, 24px)
  }

  .hero h1 {
    margin-bottom: clamp(6px, 1.3svh, 12px);
    font-size: clamp(31px, min(4.7svh, 5.6vw), 54px)
  }

  .hero-lead {
    gap: 6px;
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 1.32
  }

  .hero-actions {
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px
  }

  .hero-note {
    margin-top: 6px;
    font-size: 10px;
    line-height: 13px
  }
}

@media (width<=760px) and (height<=700px) {
  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px
  }

  .hero-actions .button {
    width: auto
  }
}

.site-header:not(.is-scrolled) .header-card {
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: 0 0 !important;
  border: 0 !important
}

.site-header:not(.is-scrolled) .header-card .brand img {
  filter: brightness(0)invert()
}

.site-header:not(.is-scrolled) .desktop-nav a,
.site-header:not(.is-scrolled) .menu-button {
  color: #ffffffe0
}

.site-header:not(.is-scrolled) .desktop-nav a:after {
  background: #ffffffad
}

.site-header:not(.is-scrolled) .header-cta {
  color: #111827;
  background: #ffffffeb;
  border-color: #ffffffd6
}

.site-header.is-scrolled .header-card {
  box-shadow: none;
  -webkit-backdrop-filter: blur(32px)saturate(1.1);
  backdrop-filter: blur(32px)saturate(1.1);
  border: 0;
  border-radius: 9999px;
  transition: background .28s, color .28s, backdrop-filter .28s, border-radius .28s
}

.site-header.is-scrolled[data-surface=light] .header-card {
  background: #0000000d
}

.site-header.is-scrolled[data-surface=dark] .header-card {
  background: #ffffff0d
}

.site-header.is-scrolled[data-surface=light] .header-card .brand img {
  filter: none
}

.site-header.is-scrolled[data-surface=light] .desktop-nav a,
.site-header.is-scrolled[data-surface=light] .menu-button {
  color: #000000c7
}

.site-header.is-scrolled[data-surface=light] .desktop-nav a:after {
  background: #0000008c
}

.site-header.is-scrolled[data-surface=light] .menu-button {
  background: #ffffff4d
}

.site-header.is-scrolled[data-surface=light] .header-cta {
  color: #fff;
  background: var(--primary);
  border-color: #0000
}

.site-header.is-scrolled[data-surface=light] .header-cta:hover {
  color: #fff;
  background: #1a5fd4
}

.site-header.is-scrolled[data-surface=dark] .header-card .brand img {
  filter: brightness(0)invert()
}

.site-header.is-scrolled[data-surface=dark] .desktop-nav a,
.site-header.is-scrolled[data-surface=dark] .menu-button {
  color: #ffffffeb
}

.site-header.is-scrolled[data-surface=dark] .desktop-nav a:after {
  background: #ffffffb8
}

.site-header.is-scrolled[data-surface=dark] .menu-button {
  background: #ffffff4d
}

.site-header.is-scrolled[data-surface=dark] .header-cta {
  color: #111827;
  background: #fffffff0;
  border-color: #ffffffd6
}

.site-header.is-scrolled[data-surface=dark] .header-cta:hover {
  color: #fff;
  background: #111827
}

@media (width<=760px) {
  .site-header.is-scrolled .header-card {
    border-radius: 9999px
  }
}

@media (width<=820px) {
  .factor-card--sleep img {
    object-position: 36% 24%
  }

  .factor-card--stress img {
    object-position: 74% center
  }

  .factor-card--metabolism img {
    object-position: center 42%
  }

  .recognition-visual img {
    object-position: 58% 36%
  }

  .route-card>img,
  .route-card>picture img {
    object-position: center 38%
  }

  .route-card:nth-child(6)>img {
    object-position: 68% 38%
  }

  .final-visual img {
    object-position: 66% 40%
  }
}

@media (width<=480px) {
  .hero-visual img {
    object-position: 36% 34%
  }

  .recognition-visual img {
    object-position: 54% 32%
  }

  .final-visual img {
    object-position: 62% 36%
  }
}

.mobile-slider-wrap {
  position: relative
}

.mobile-slider-pagination {
  display: none
}

.mobile-slider-bullet {
  border-radius: var(--radius-full);
  cursor: pointer;
  background: #0f15202e;
  border: 0;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  padding: 0;
  transition: width .32s cubic-bezier(.22, 1, .36, 1), opacity .28s, background-color .28s
}

.mobile-slider-bullet.is-active {
  background: var(--primary);
  width: 28px
}

@media (width<=760px) {
  .mobile-slider-wrap {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    overflow: visible
  }

  .mobile-slider-wrap>[data-mobile-slider] {
    --mobile-slide-width: calc(100vw - 72px);
    --mobile-slide-gap: 12px;
    align-items: stretch;
    gap: var(--mobile-slide-gap);
    overscroll-behavior: none;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    cursor: grab;
    touch-action: pan-x;
    padding-inline: 12px;
    scroll-padding-inline: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    grid: none !important;
    grid-auto-flow: unset !important;
    flex-flow: row !important;
    row-gap: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin-inline: 0 !important;
    display: flex !important
  }

  .mobile-slider-wrap>[data-mobile-slider]::-webkit-scrollbar {
    display: none
  }

  .mobile-slider-wrap>[data-mobile-slider].is-dragging {
    cursor: grabbing;
    scroll-snap-type: none
  }

  .mobile-slider-wrap>[data-mobile-slider]>article {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    flex: 0 0 var(--mobile-slide-width) !important;
    width: var(--mobile-slide-width) !important;
    max-width: var(--mobile-slide-width) !important;
    min-width: var(--mobile-slide-width) !important
  }

  .factor-story .mobile-slider-wrap>.factor-grid[data-mobile-slider] {
    height: 480px
  }

  .route .mobile-slider-wrap>.route-cards[data-mobile-slider] {
    height: 410px !important
  }

  .specialists .mobile-slider-wrap>.specialist-ribbon[data-mobile-slider] {
    height: 540px;
    margin-top: 96px
  }

  .factor-grid[data-mobile-slider]>.factor-card,
  .factor-grid[data-mobile-slider]>.factor-card--sleep,
  .factor-grid[data-mobile-slider]>.factor-card--metabolism,
  .factor-grid[data-mobile-slider]>.factor-card--stress {
    min-height: 100%;
    max-height: 100%
  }

  .route-cards[data-mobile-slider]>.route-card,
  .route-cards[data-mobile-slider]>.route-card.is-expanded,
  .specialist-ribbon[data-mobile-slider]>.specialist {
    min-height: 100%;
    max-height: 100%;
    flex: 0 0 var(--mobile-slide-width) !important;
    flex-basis: var(--mobile-slide-width) !important
  }

  .mobile-slider-pagination {
    width: calc(100% - 24px);
    max-width: var(--shell);
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 24px auto 0;
    padding-bottom: 2px;
    display: flex
  }
}

@media (prefers-reduced-motion:reduce) {
  [data-mobile-slider] {
    scroll-behavior: auto
  }

  .mobile-slider-bullet {
    transition: none
  }
}

.plain-label {
  color: var(--on-surface);
  margin: 0 0 var(--space-3);
  font-size: 18px;
  font-weight: 600;
  line-height: 22px
}

.section-note {
  margin: var(--space-6) 0 0;
  color: var(--on-surface-var);
  max-width: 62ch
}

.section-note a {
  color: var(--primary);
  text-underline-offset: 3px;
  text-decoration: underline
}

.change__head {
  margin-bottom: clamp(48px, 5vw, 80px)
}

.change__table {
  border-radius: var(--radius-xl);
  background: var(--surface-bright);
  display: grid;
  overflow: hidden;
  box-shadow: 0 1px 2px #0d111a0d, 0 18px 44px #0d111a0f
}

.change__row {
  border-top: 1px solid #0d111a14;
  grid-template-columns: minmax(150px, .78fr) 1.35fr 1.35fr;
  align-items: stretch;
  display: grid
}

.change__row:first-child,
.change__row--head {
  border-top: 0
}

.change__col {
  padding: var(--space-6) var(--space-8) var(--space-4);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--on-surface-var);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px
}

.change__col--next {
  color: var(--primary);
  background: var(--blue-tint)
}

.change__topic {
  padding: var(--space-6) var(--space-8);
  color: var(--on-surface);
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 26px
}

.change__cell {
  padding: var(--space-6) var(--space-8);
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0;
  font-size: 17px;
  line-height: 25px;
  display: flex
}

.change__cell--now {
  color: var(--on-surface-var)
}

.change__cell--next {
  background: var(--blue-tint);
  color: var(--on-surface);
  font-weight: 500
}

.change__mark {
  fill: none;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 3px
}

.change__cell--now .change__mark {
  stroke: var(--on-surface-var);
  opacity: .45
}

.change__cell--next .change__mark {
  stroke: var(--primary)
}

@media (width<=900px) {
  .change__table {
    box-shadow: none;
    gap: var(--space-4);
    background: 0 0
  }

  .change__row--head {
    display: none
  }

  .change__row {
    background: var(--surface-bright);
    border-radius: var(--radius-l);
    border-top: 0;
    grid-template-columns: 1fr;
    overflow: hidden
  }

  .change__topic {
    padding: var(--space-6) var(--space-6) 0
  }

  .change__cell {
    padding: var(--space-4) var(--space-6);
    font-size: 16px;
    line-height: 24px
  }

  .change__cell--next {
    margin-top: var(--space-2);
    padding-block: var(--space-5)
  }
}

.fit {
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  display: grid;
  align-items: stretch
}

.fit__col {
  border-radius: var(--radius-xl);
  padding: var(--space-10)
}

.fit__col--yes {
  background: var(--blue-tint)
}

.fit__col--no {
  background: var(--surface-bright)
}

.fit__title {
  margin: 0 0 var(--space-6);
  font-size: 24px;
  line-height: 30px
}

.fit__list {
  gap: var(--space-4);
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex
}

.fit__list li {
  font-size: 16px;
  line-height: 24px
}

.fit__col--no .fit__list li {
  color: var(--on-surface-var)
}

.rep {
  background: var(--surface-bright);
  border-radius: var(--radius-xl);
  overflow: hidden
}

.rep__tabs {
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  gap: 0;
  display: flex
}

.rep__tab {
  cursor: pointer;
  padding: var(--space-6) var(--space-8);
  text-align: left;
  color: var(--on-surface-var);
  background: 0 0;
  border: 0;
  flex-direction: column;
  flex: 240px;
  align-items: flex-start;
  gap: 2px;
  transition: background .2s, color .2s;
  display: flex
}

.rep__tab[aria-selected=true] {
  color: var(--on-surface);
  box-shadow: inset 0 -3px 0 var(--primary)
}

.rep__tab:hover {
  background: var(--surface)
}

.rep__tab b {
  font-size: 18px;
  font-weight: 600;
  line-height: 24px
}

.rep__tab span {
  font-size: 15px;
  line-height: 22px
}

.rep__panel {
  padding: var(--space-8)
}

.rep__panel[hidden] {
  display: none
}

.rep__lead {
  margin: 0 0 var(--space-8);
  max-width: 62ch;
  color: var(--on-surface-var);
  font-size: 18px;
  line-height: 27px
}

.frags {
  gap: var(--space-10);
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex
}

.frag {
  gap: var(--space-10);
  grid-template-columns: minmax(0, 1.5fr) minmax(0, .82fr);
  align-items: center;
  display: grid
}

.frag__shot {
  border-radius: var(--radius-m);
  border: 0;
  background: #fff;
  transition: transform .25s, box-shadow .25s;
  display: block;
  overflow: hidden;
  box-shadow: 0 1px 2px #0d111a0d, 0 14px 34px #0d111a12
}

.frag__shot:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 2px #0d111a0d, 0 20px 44px #0d111a1c
}

.frag__shot img {
  width: 100%;
  height: auto;
  display: block
}

.frag__label {
  margin: 0 0 var(--space-3);
  color: var(--on-surface);
  font-size: 22px;
  font-weight: 600;
  line-height: 28px
}

.frag__why {
  color: var(--on-surface-var);
  margin: 0;
  font-size: 17px;
  line-height: 26px
}

.rep__foot {
  margin-top: var(--space-8)
}

.rep__pdf {
  align-items: center;
  gap: var(--space-4);
  background: var(--surface);
  border-radius: var(--radius-m);
  padding: var(--space-5) var(--space-6);
  transition: background .2s;
  display: inline-flex
}

.rep__pdf:hover {
  background: var(--surface-dim)
}

.rep__pdf i {
  background: var(--night);
  color: #fff;
  border-radius: 8px;
  place-items: center;
  width: 44px;
  height: 52px;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  display: grid
}

.rep__pdf b {
  font-size: 18px;
  line-height: 24px;
  display: block
}

.rep__pdf span {
  color: var(--on-surface-var);
  font-size: 15px;
  line-height: 22px;
  display: block
}

.doc-points {
  margin: 0 0 var(--space-10);
  gap: var(--space-6);
  counter-reset: dp;
  border-top: 1px solid var(--line);
  padding: 0;
  padding-top: var(--space-6);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none;
  display: grid
}

.doc-points li {
  counter-increment: dp;
  padding-left: 40px;
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  position: relative
}

.doc-points li:before {
  content: counter(dp, decimal-leading-zero);
  color: var(--primary);
  font-size: 15px;
  font-weight: 600;
  position: absolute;
  top: 1px;
  left: 0
}

.proofs {
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid
}

.proof {
  background: var(--surface-bright);
  border-radius: var(--radius-l);
  padding: var(--space-8);
  gap: var(--space-3);
  flex-direction: column;
  display: flex
}

.proof h3 {
  margin: 0;
  font-size: 20px;
  line-height: 26px
}

.proof p {
  color: var(--on-surface-var);
  margin: 0;
  font-size: 16px;
  line-height: 24px
}

.proof a {
  color: var(--primary);
  text-underline-offset: 3px;
  font-size: 16px;
  text-decoration: underline
}

.faq {
  gap: var(--space-3);
  flex-direction: column;
  max-width: 60rem;
  display: flex
}

.faq__item {
  background: var(--surface-bright);
  border-radius: var(--radius-m)
}

.faq__q {
  cursor: pointer;
  padding: var(--space-6) var(--space-8);
  justify-content: space-between;
  align-items: center;
  gap: var(--space-5);
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  list-style: none;
  display: flex
}

.faq__q::-webkit-details-marker {
  display: none
}

.faq__q:after {
  content: "+";
  color: var(--primary);
  flex-shrink: 0;
  font-size: 24px;
  line-height: 1
}

.faq__item[open] .faq__q:after {
  content: "–"
}

.faq__a {
  padding: 0 var(--space-8) var(--space-8);
  color: var(--on-surface-var);
  max-width: 62ch;
  margin: 0;
  font-size: 16px;
  line-height: 25px
}

.composition {
  background: var(--surface-bright);
  border-radius: var(--radius-m);
  margin-top: var(--space-8)
}

.composition>summary {
  cursor: pointer;
  padding: var(--space-6) var(--space-8);
  justify-content: space-between;
  align-items: center;
  gap: var(--space-5);
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  list-style: none;
  display: flex
}

.composition>summary:after {
  content: "+";
  color: var(--primary);
  flex-shrink: 0;
  font-size: 24px;
  line-height: 1
}

.composition[open]>summary:after {
  content: "–"
}

.composition>summary::-webkit-details-marker {
  display: none
}

.composition__body {
  padding: 0 var(--space-8) var(--space-8)
}

.tgroup+.tgroup {
  margin-top: var(--space-8)
}

.tgroup h4 {
  margin: 0 0 var(--space-4);
  color: var(--on-surface-var);
  font-size: 16px;
  font-weight: 500
}

.traits {
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid
}

.trait {
  background: var(--surface);
  border-radius: var(--radius-s);
  padding: var(--space-4) var(--space-5)
}

.trait b {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  display: block
}

.trait span {
  color: var(--on-surface-var);
  font-size: 15px;
  line-height: 22px;
  display: block
}

.team {
  margin-top: var(--space-12)
}

.team__list {
  margin: var(--space-6) 0 0;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  padding: 0;
  list-style: none;
  display: grid
}

.team:not(.team-v2) .member img {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-full);
  background: var(--surface-dim);
  width: 100%;
  max-width: 168px;
  margin-bottom: var(--space-4)
}

.member b {
  font-size: 18px;
  line-height: 24px;
  display: block
}

.member em {
  color: var(--primary);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  display: block
}

.member small {
  color: var(--on-surface-var);
  font-size: 15px;
  line-height: 22px;
  display: block
}

@media (width<=900px) {

  .rep__panel,
  .rep__tab {
    padding: var(--space-6)
  }
}

.specialist {
  min-height: 0;
  padding: var(--space-8);
  clip-path: none
}

.specialist-ribbon {
  margin-top: var(--space-10);
  grid-template-columns: repeat(3, minmax(0, 1fr))
}

@media (width<=900px) {
  .specialist-ribbon {
    grid-template-columns: 1fr
  }
}

.hero-content h1 {
  overflow-wrap: anywhere;
  hyphens: auto
}

@media (width<=560px) {
  .hero-content h1 {
    font-size: clamp(30px, 8.6vw, 40px)
  }
}

.section {
  padding-block: clamp(72px, 6.4vw, 108px)
}

.account-heading h2,
.route-heading h2,
.specialists-head h2,
.included-copy h2,
.chats__intro h2,
.section>.shell>h2 {
  letter-spacing: 0;
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 400;
  line-height: 1.04
}

.section>.shell>h2 {
  max-width: 26ch;
  margin-bottom: clamp(20px, 2.4vw, 32px)
}

.account-heading,
.route-heading,
.specialists-head {
  margin-bottom: clamp(36px, 4vw, 56px)
}

.account-heading .eyebrow,
.route-heading .eyebrow,
.specialists-head .eyebrow {
  margin-bottom: -22px
}

.evidence-copy h2,
.final-content h2 {
  letter-spacing: 0;
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.06
}

.recognition-copy h2 {
  letter-spacing: 0;
  max-width: 18ch;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.08
}

.evidence-visual {
  min-height: clamp(380px, 42vw, 560px)
}

.evidence-grid {
  align-items: center;
  gap: clamp(40px, 5.5vw, 88px)
}

.recognition-visual img {
  object-position: 50% 22%
}

.recognition-frame,
.recognition-visual {
  min-height: 560px
}

.hero-visual img {
  object-position: 36% 34%
}

.faq {
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(520px, 1fr));
  align-content: start;
  max-width: none;
  display: grid
}

.faq__item {
  align-self: start
}

.symptom-list,
.symptom-list>li {
  align-items: start
}

@media (width<=1000px) {
  .doc-points {
    gap: var(--space-4) var(--space-6);
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media (width<=560px) {
  .doc-points {
    grid-template-columns: 1fr
  }
}

.fit,
.proofs,
.faq {
  margin-top: var(--space-10)
}

.price-highlight {
  margin-top: var(--space-10);
  max-width: 62ch
}

.final-content .hero-note {
  margin-top: var(--space-6)
}

.composition__body>.section-note:first-child {
  margin-top: 0
}

@media (width<=900px) {
  .faq {
    grid-template-columns: 1fr
  }

  .frags {
    gap: var(--space-8)
  }

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

  .frag__label {
    font-size: 20px;
    line-height: 26px
  }

  .frag__why {
    font-size: 16px;
    line-height: 24px
  }
}

:root {
  --primary: #1f68ee
}

.account-caption {
  color: var(--on-surface-var)
}

.specialist p,
.specialist>span,
.offer-top>p,
.offer-note {
  color: #fff
}

.offer-small {
  color: #fffffff0
}

.offer .status-pill,
.offer .status-pill--dark {
  color: #fff;
  background: #123f8f
}

.offer .button--outline {
  color: #fff;
  border-color: #fff9;
  margin-top: 8px
}

.offer .button--outline:hover {
  background: #ffffff1f;
  border-color: #fff
}

.section-note a,
.proof a {
  color: #1a5cd8
}

.chats {
  overflow: hidden
}

.chats__head {
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
  display: flex
}

.chats__intro {
  max-width: 44rem
}

.chats__intro .large-copy {
  margin-top: var(--space-4);
  color: var(--on-surface-var)
}

.chats__arrows {
  gap: var(--space-3);
  flex: none;
  display: flex
}

.chats__arrow {
  border-radius: var(--radius-full);
  background: var(--surface-dim);
  width: 56px;
  height: 56px;
  color: var(--on-surface);
  cursor: pointer;
  border: 0;
  place-items: center;
  transition: background .25s, opacity .25s;
  display: grid
}

.chats__arrow svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 22px;
  height: 22px
}

.chats__arrow:hover {
  background: var(--blue-tint)
}

.chats__arrow:disabled {
  opacity: .35;
  cursor: default;
  background: var(--surface-dim)
}

.chats__track {
  gap: var(--space-6);
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin: -8px -4px -28px;
  width: 100vw;
  padding: 8px 4px 28px;
  padding-inline: max(24px, calc(50vw - var(--shell) / 2));
  scroll-padding-inline: max(24px, calc(50vw - var(--shell) / 2));
  overscroll-behavior-x: contain;
  align-items: flex-start;
  margin-inline: calc(50% - 50vw);
  display: flex;
  overflow-x: auto
}

.chats__track::-webkit-scrollbar {
  display: none
}

.chats__track:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 6px
}

.chats__dots {
  margin-top: var(--space-8);
  justify-content: center;
  gap: 8px;
  display: flex
}

.ios-dot {
  border-radius: var(--radius-full);
  background: var(--on-surface-var);
  opacity: .28;
  cursor: pointer;
  border: 0;
  width: 8px;
  height: 8px;
  padding: 0;
  transition: all .25s
}

.ios-dot.is-active {
  opacity: 1;
  background: var(--primary);
  width: 26px
}

.phone {
  --ink: #0b141a;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: linear-gradient(160deg, #2c2f36, #14161b 45%, #2a2d34);
  border-radius: 50px;
  flex: none;
  width: 330px;
  padding: 9px;
  box-shadow: inset 0 1px #ffffff2e, 0 26px 60px #0d111a47, 0 4px 14px #0d111a2e
}

.phone__screen {
  background: var(--chat-bg);
  height: 640px;
  color: var(--ink);
  letter-spacing: 0;
  border-radius: 42px;
  flex-direction: column;
  font-size: 15px;
  line-height: 20px;
  display: flex;
  position: relative;
  overflow: hidden
}

.phone--tg {
  --chat-bg: #e3ebf3;
  --bubble: #3390ec;
  --bubble-ink: #fff;
  --bubble-time: #ffffffad;
  --accent: #007aff
}

.phone--wa {
  --chat-bg: #efe7de;
  --bubble: #d9fdd3;
  --bubble-ink: #111b21;
  --bubble-time: #111b2173;
  --accent: #00a884
}

.phone__island {
  border-radius: var(--radius-full);
  z-index: 3;
  background: #05070a;
  width: 96px;
  height: 27px;
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translate(-50%)
}

.ios-status {
  height: 46px;
  color: var(--ink);
  background: #f7f7f8;
  flex: none;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 26px 0;
  display: flex
}

.ios-status__time {
  letter-spacing: 0;
  font-size: 14px;
  font-weight: 600
}

.ios-status__glyphs {
  fill: currentColor;
  width: 68px;
  height: 13px
}

.ios-bar {
  background: #f7f7f8;
  border-bottom: .5px solid #3c3c4338;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 9px;
  display: flex
}

.ios-bar__back {
  fill: none;
  width: 10px;
  height: 17px;
  stroke: var(--accent);
  stroke-width: 2.2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none
}

.ios-bar__ava {
  border-radius: var(--radius-full);
  background: linear-gradient(150deg, #b9c2cf, #8e99a8);
  flex: none;
  width: 34px;
  height: 34px;
  position: relative;
  overflow: hidden
}

.ios-bar__ava svg {
  fill: none;
  stroke: #16181d;
  stroke-width: 11px;
  stroke-linecap: round;
  opacity: .93;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  position: absolute;
  inset: -3px
}

.ios-bar__id {
  flex-direction: column;
  flex: auto;
  gap: 1px;
  min-width: 0;
  display: flex
}

.ios-bar__redact {
  fill: none;
  stroke: #16181d;
  stroke-width: 11px;
  stroke-linecap: round;
  opacity: .93;
  width: 108px;
  height: 15px
}

.ios-bar__id i {
  color: #3c3c4399;
  font-size: 12px;
  font-style: normal;
  line-height: 14px
}

.ios-bar__acts {
  flex: none;
  gap: 16px;
  display: flex
}

.ios-bar__acts svg {
  height: 17px;
  fill: var(--accent)
}

.ios-bar__acts svg:first-child {
  width: 24px
}

.ios-bar__acts svg:last-child {
  width: 17px
}

.ios-thread {
  flex-direction: column;
  flex: auto;
  justify-content: flex-end;
  gap: 3px;
  min-height: 0;
  padding: 12px 10px 8px;
  display: flex;
  overflow: hidden;
  mask-image: linear-gradient(#0000 0, #000 42px)
}

.ios-sep {
  border-radius: var(--radius-full);
  color: #0d111a9e;
  background: #0d111a1f;
  align-self: center;
  margin: 6px 0 4px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 15px
}

.ios-msg {
  border-radius: 15px;
  max-width: 82%;
  margin: 0;
  padding: 6px 9px 6px 10px;
  font-size: 15px;
  line-height: 20px;
  position: relative;
  box-shadow: 0 1px 1px #0b141a1a
}

.ios-msg--in {
  color: var(--ink);
  background: #fff;
  border-bottom-left-radius: 5px;
  align-self: flex-start
}

.ios-msg--out {
  background: var(--bubble);
  color: var(--bubble-ink);
  border-bottom-right-radius: 5px;
  align-self: flex-end
}

.ios-msg--in+.ios-msg--in {
  border-bottom-left-radius: 15px;
  margin-top: 1px
}

.ios-msg--out+.ios-msg--out {
  border-bottom-right-radius: 15px;
  margin-top: 1px
}

.ios-msg__meta {
  float: right;
  align-items: center;
  gap: 3px;
  margin: 5px -2px -1px 8px;
  font-size: 11px;
  line-height: 12px;
  display: inline-flex
}

.ios-ticks {
  fill: none;
  stroke: #53bdeb;
  stroke-width: 1.9px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 14px;
  height: 9px
}

.ios-compose {
  background: #f7f7f8;
  border-top: .5px solid #3c3c432e;
  flex: none;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 6px;
  display: flex
}

.ios-compose__plus {
  color: var(--accent);
  font-size: 22px;
  font-weight: 300;
  line-height: 1
}

.ios-compose__field {
  border-radius: var(--radius-full);
  color: #3c3c4373;
  background: #fff;
  border: .5px solid #3c3c4333;
  flex: auto;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 19px
}

.ios-compose__mic {
  fill: #3c3c438c;
  flex: none;
  width: 14px;
  height: 20px
}

.ios-home {
  border-radius: var(--radius-full);
  background: #0b141ac7;
  flex: none;
  width: 134px;
  height: 5px;
  margin: 5px auto 8px
}

@media (width<=900px) {
  .chats__head {
    align-items: flex-start;
    gap: var(--space-6);
    flex-direction: column
  }

  .chats__arrows {
    display: none
  }

  .chats__track {
    gap: var(--space-4);
    padding-inline: 24px
  }

  .phone {
    width: min(310px, 100vw - 76px)
  }
}

.hero-pick {
  gap: 10px;
  margin-top: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 600px;
  display: grid
}

.hero-pick span {
  padding: 11px 15px;
  border-radius: 12px;
  border: none;
  flex-direction: column;
  gap: 1px;
  display: flex
}

.hero-pick b {
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  color: #ffffffeb
}

.hero-pick i {
  font-size: 12px;
  font-style: normal;
  line-height: 16px
}

.hero-pick__main {
  color: #ffffffd4;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: #040b1838
}

.hero-pick__main i {
  color: #ffffff8f
}

.hero-pick__alt {
  color: #ffffffd4;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: #040b1838
}

.hero-pick__alt i {
  color: #ffffff8f
}

@media (width<=640px) {
  .hero-pick {
    grid-template-columns: 1fr;
    max-width: none
  }
}

.band__title {
  max-width: 34ch;
  margin: var(--space-4) 0 var(--space-10)
}

.band__grid {
  gap: var(--space-6);
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  align-items: stretch;
  display: grid
}

.band__opt {
  gap: var(--space-3);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  flex-direction: column;
  display: flex
}

.band__opt--full {
  background: var(--night);
  color: #fff
}

.band__opt--lite {
  background: var(--surface-bright)
}

.band__badge {
  margin-bottom: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--primary);
  color: #fff;
  letter-spacing: .04em;
  text-transform: uppercase;
  align-self: flex-start;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px
}

.band__label {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 26px
}

.band__price {
  letter-spacing: 0;
  margin: 0;
  font-size: clamp(34px, 3.4vw, 46px);
  line-height: 1.05
}

.band__note {
  margin: 0 0 var(--space-6);
  font-size: 17px;
  line-height: 26px
}

.band__opt--full .band__note {
  color: #ffffffb8
}

.band__opt--lite .band__note {
  color: var(--on-surface-var)
}

.band__opt .button {
  margin-top: auto
}

.band__opt--lite .button--outline {
  border-color: #0d111a2e
}

@media (width<=900px) {
  .band__grid {
    grid-template-columns: 1fr
  }

  .band__opt {
    padding: var(--space-8)
  }
}

.frag {
  align-items: start
}

.frag__copy {
  padding-top: var(--space-6);
  border-top: 1px solid var(--line)
}

.frag__label {
  margin-bottom: var(--space-4)
}

.change__head .evidence-visual {
  aspect-ratio: 5/4;
  min-height: 0
}

.change__head {
  align-items: stretch
}

@media (width<=900px) {
  .change__head .evidence-visual {
    aspect-ratio: 3/2
  }
}

.ios-bar__id i {
  color: #3c3c43c7
}

.ios-msg--in .ios-msg__meta {
  color: #0b141a9e
}

.phone--tg {
  --bubble: #2372bf;
  --bubble-time: #ffffffeb
}

.phone--wa {
  --bubble-time: #111b219e
}

.ios-msg--out .ios-msg__meta {
  color: var(--bubble-time)
}

.phone--tg {
  --bubble-time: #fffffffa
}

.ios-compose__field {
  color: #6b6b70
}

.change__col--next {
  color: #12459f
}

.ios-dot,
.mobile-slider-bullet {
  position: relative
}

.ios-dot:after,
.mobile-slider-bullet:after {
  content: "";
  width: 24px;
  height: 24px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.chats__dots {
  gap: 12px
}

.site-footer a {
  padding-block: 4px;
  display: inline-block
}

.desktop-nav a {
  padding-block: 4px
}

.section-note a,
.proof a {
  padding-block: 2px;
  display: inline-block
}

/* hero-dynamic-fit: clearance from header + content-aware type scale */
.hero {
  min-height: calc(100svh + var(--hero-scroll-distance, 75svh));
  height: calc(100svh + var(--hero-scroll-distance, 75svh));
  margin: 0;
  overflow: visible;
  border-radius: 0;
  background: var(--surface)
}

.hero-stage {
  position: sticky;
  top: var(--hero-gutter, 0px);
  width: calc(100% - var(--hero-gutter, 0px) * 2);
  height: calc(100svh - var(--hero-gutter, 0px) * 2);
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--hero-radius, 0px);
  background: var(--night);
  isolation: isolate;
  display: flex;
  flex-direction: column
}

.hero-content {
  --hero-fit: 1;
  --hero-clearance-top: clamp(96px, 12svh, 180px);
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  width: min(calc(100% - 48px), var(--shell));
  padding-inline: 24px;
  padding-top: var(--hero-clearance-top);
  padding-bottom: clamp(20px, 4.5svh, 64px);
  overflow: visible
}

.hero h1 {
  color: #fff;
  letter-spacing: 0;
  max-width: 720px;
  font-weight: 400;
  font-size: calc(clamp(32px, min(7.2svh, 7.8vw), 104px) * var(--hero-fit));
  line-height: clamp(0.96, calc(0.94 + (1 - var(--hero-fit)) * .14), 1.06);
  margin-bottom: calc(clamp(10px, 2.5svh, 28px) * var(--hero-fit))
}

.hero-lead {
  display: grid;
  gap: calc(clamp(8px, 1.5svh, 16px) * var(--hero-fit));
  max-width: 620px;
  margin-bottom: calc(clamp(14px, 3.5svh, 36px) * var(--hero-fit));
  font-size: calc(clamp(14px, min(2.2svh, 1.45vw), 20px) * var(--hero-fit));
  line-height: clamp(1.34, calc(1.32 + (1 - var(--hero-fit)) * .16), 1.48)
}

.hero-lead p {
  margin: 0
}

.hero-actions {
  align-items: center;
  gap: calc(clamp(12px, 2svh, 28px) * var(--hero-fit));
  margin-bottom: calc(clamp(16px, 5svh, 56px) * var(--hero-fit))
}

.hero-actions .button {
  min-height: clamp(44px, 7.5svh, 56px);
  padding-block: clamp(10px, 1.6svh, 16px);
  padding-inline: clamp(20px, 3.2svh, 32px);
  font-size: calc(clamp(14px, 2.1svh, 16px) * var(--hero-fit))
}

.hero-pick {
  gap: calc(10px * var(--hero-fit));
  margin-top: calc(18px * var(--hero-fit))
}

.hero-pick span {
  padding: calc(11px * var(--hero-fit)) calc(15px * var(--hero-fit))
}

.hero-pick b {
  font-size: calc(15px * var(--hero-fit));
  line-height: calc(20px * var(--hero-fit))
}

.hero-pick i {
  font-size: calc(12px * var(--hero-fit));
  line-height: calc(16px * var(--hero-fit))
}

.hero-content[style*="--hero-tight"] .hero-lead {
  gap: calc(clamp(6px, 1.2svh, 12px) * var(--hero-fit))
}

@media (width<=760px) {
  .hero-content {
    width: calc(100% - 24px);
    padding-inline: 12px;
    padding-bottom: clamp(16px, 3.5svh, 40px)
  }

  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(clamp(10px, 1.8svh, 20px) * var(--hero-fit))
  }

  .hero-pick {
    grid-template-columns: 1fr;
    max-width: none
  }
}

.hero-pick b {
  font-weight: 500
}

.hero-pick__main,
.hero-pick__alt {
  box-shadow: none
}

@media (width<=760px) {
  .hero-pick {
    --hero-pick-gap: calc(10px * var(--hero-fit, 1));
    --hero-pick-col: max(168px, calc((100% - var(--hero-pick-gap)) / 2));
    box-sizing: border-box;
    grid-template-columns: unset !important;
    flex-flow: row nowrap;
    align-items: stretch;
    gap: var(--hero-pick-gap);
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
    display: flex !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    cursor: grab
  }

  .hero-pick::-webkit-scrollbar {
    display: none
  }

  .hero-pick.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none
  }

  .hero-pick span {
    flex: 0 0 var(--hero-pick-col);
    width: var(--hero-pick-col);
    min-width: var(--hero-pick-col);
    max-width: var(--hero-pick-col);
    scroll-snap-align: start;
    scroll-snap-stop: always
  }
}

h1,
h2,
h3,
h4,
.band__title,
.fit__title,
.recognition h2,
.recognition-copy h2,
.section>.shell>h2,
.chats__intro h2,
.factor-heading h2,
.account-heading h2,
.route-heading h2,
.specialists-head h2,
.included-copy h2,
.evidence-copy h2,
.final-content h2,
.change__head h2,
.document-copy h2 {
  max-width: none;
  hyphens: none;
  -webkit-hyphens: none
}

.hero-content {
  --hero-line-max: clamp(640px, 80vw, 840px);
  --hero-subline-max: clamp(600px, 76vw, 800px)
}

.hero-content>h1,
.hero h1 {
  max-width: var(--hero-line-max)
}

.hero-content>.hero-lead,
.hero-lead {
  max-width: var(--hero-subline-max)
}

.hero-lead p {
  max-width: 100%
}

.hero-stage {
  --hero-object-x: 50%;
  --hero-object-y: 50%;
  --hero-visual-scale: 1
}

.hero-visual {
  background: var(--night)
}

.hero-visual img {
  object-fit: cover;
  object-position: var(--hero-object-x) var(--hero-object-y) !important;
  transform: scale(var(--hero-visual-scale, 1));
  transform-origin: var(--hero-object-x) var(--hero-object-y);
  will-change: transform
}

@media (width<=900px) {
  .hero-shade {
    background: linear-gradient(#040b18b8 0%, #040b1866 12%, #040b1824 24%, #0000 38%), linear-gradient(90deg, #040b18d9 0%, #040b18a8 22%, #040b1847 42%, #040b1814 54%, #0000 68%)
  }
}

@media (width<=560px) {
  .hero-shade {
    background: linear-gradient(#040b18c2 0%, #040b1875 14%, #040b182e 28%, #0000 42%), linear-gradient(90deg, #040b18e6 0%, #040b18b3 26%, #040b1852 48%, #040b181a 60%, #0000 74%)
  }
}

/* offerbar-v2 — pill glass bar, matches scrolled .header-card */
.offerbar {
  z-index: 60;
  pointer-events: none;
  position: fixed;
  inset: auto 0 0;
  padding: 0 0 max(16px, env(safe-area-inset-bottom));
  background: transparent !important;
  border: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: translateY(calc(100% + 24px));
  transition: transform .35s cubic-bezier(.22, 1, .36, 1)
}

.offerbar.is-visible {
  transform: translateY(0)
}

.offerbar-card {
  pointer-events: auto;
  box-sizing: border-box;
  border-radius: var(--radius-full, 9999px);
  -webkit-backdrop-filter: blur(20px)saturate(1.12);
  backdrop-filter: blur(20px)saturate(1.12);
  background: #f8fafcbd;
  border: 0;
  box-shadow: 0 12px 34px #070d191a;
  min-height: 64px;
  padding: 10px 16px 10px 24px;
  max-width: 100%
}

.offerbar__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px 16px;
  min-width: 0
}

.offerbar__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0
}

.offerbar__main b {
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  color: var(--on-surface)
}

.offerbar__main i {
  font-size: 14px;
  font-style: normal;
  line-height: 20px;
  color: var(--on-surface-var)
}

.offerbar__cta,
.offerbar__alt {
  flex-shrink: 0
}

.offerbar .button {
  transform: none
}

.offerbar .button:hover {
  transform: none
}

@media (width<=1240px) {
  .offerbar__inner {
    grid-template-columns: minmax(0, 1fr) auto auto
  }
}

@media (width<=1100px) {
  .offerbar__inner {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: none
  }

  .offerbar__main {
    grid-area: auto
  }

  .offerbar__alt,
  .offerbar__cta {
    grid-area: auto;
    width: auto
  }

  .offerbar__alt {
    font-size: 13px;
    line-height: 18px
  }
}

@media (width<=760px) {
  .offerbar-card {
    border-radius: 12px;
    min-height: 66px;
    padding: 8px 12px 8px 16px
  }

  .offerbar__main i {
    display: none
  }

  .offerbar__main b {
    font-size: 14px;
    line-height: 20px;
    white-space: normal
  }
}

@media (prefers-reduced-motion:reduce) {
  .offerbar {
    transition: none
  }
}

/* brca-patch-20260805 — desktop folder overrides (load last) */
.hero-content>h1,
.hero h1 {
  max-width: clamp(560px, 72vw, 760px) !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  overflow-wrap: normal !important;
  word-break: normal !important
}

.hero-content>.hero-lead,
.hero-lead {
  max-width: clamp(520px, 68vw, 720px) !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  overflow-wrap: normal !important;
  word-break: normal !important
}

.hero-content>.hero-lead p,
.hero-lead p {
  hyphens: none !important;
  -webkit-hyphens: none !important;
  overflow-wrap: normal !important;
  word-break: normal !important
}

@media (width<=760px) {
  .offerbar-card {
    border-radius: 9999px
  }

  .offerbar__inner {
    gap: 8px 10px
  }

  .offerbar .button--small {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 13px;
    line-height: 18px
  }
}

.hero-visual img {
  transform: none !important;
  min-width: 100%;
  min-height: 100%
}

.hero-stage {
  --hero-visual-scale: 1
}

.offerbar-card {
  border: 0 !important;
  outline: none !important
}

/* banner-safe-zones-v2 — text left on shell grid, subject stays right */
.final-cta,
.factor-card,
.route-card {
  --banner-text-max: min(520px, 46%)
}

.final-content h2,
.final-content>p:not(.eyebrow),
.final-content .button,
.final-content .hero-note {
  max-width: var(--banner-text-max);
  width: 100%
}

.final-shade {
  background: linear-gradient(90deg, #040911e8 0%, #040911c7 18%, #0409118f 32%, #04091152 46%, #04091124 58%, #0000 72%) !important
}

.factor-card__copy {
  right: auto !important;
  max-width: var(--banner-text-max) !important
}

.factor-card__copy p {
  max-width: 100% !important
}

@media (width>=1280px) {

  .final-cta,
  .factor-card,
  .route-card {
    --banner-text-max: min(560px, 44%)
  }
}

@media (width<=900px) {

  .final-content h2,
  .final-content>p:not(.eyebrow),
  .final-content .button,
  .final-content .hero-note {
    max-width: min(94%, 100%)
  }
}

/* text-stack-v2 — DS 2.0 vertical rhythm (kicker 16 → title 24 → body 48) */
:root {
  --text-stack-kicker-title: var(--space-4);
  --text-stack-title-body: var(--space-6);
  --text-stack-body-action: var(--space-12);
  --text-stack-title-content: var(--space-8);
}

.evidence-copy,
.chats__intro,
.route__intro,
.included-copy,
.account-heading,
.route-heading,
.specialists-head,
.final-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start
}

.account-heading,
.route-heading,
.specialists-head {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  grid-template-columns: unset !important
}

.evidence-copy>.eyebrow,
.chats__intro>.eyebrow,
.route__intro>.eyebrow,
.included-copy>.eyebrow,
.account-heading>.eyebrow,
.route-heading>.eyebrow,
.specialists-head>.eyebrow,
.section>.shell>.eyebrow:first-child {
  margin-bottom: var(--text-stack-kicker-title) !important;
  grid-column: auto !important
}

.evidence-copy>h2,
.chats__intro>h2,
.route__intro>h2,
.included-copy>h2,
.account-heading>h2,
.route-heading>h2,
.specialists-head>h2,
.section>.shell>.eyebrow:first-child+h2,
.section>.shell>.eyebrow:first-child+h2.band__title,
.final-content>h2 {
  margin-top: 0 !important;
  margin-bottom: var(--text-stack-title-body) !important
}

.section>.shell>.eyebrow:first-child+h2,
.section>.shell>.eyebrow:first-child+h2.band__title {
  margin-bottom: var(--text-stack-title-content) !important
}

.route-heading>h2:last-child,
.route__intro>h2:last-child,
.section>.shell>.eyebrow:first-child+h2:last-child {
  margin-bottom: var(--text-stack-title-content) !important
}

.evidence-copy>.large-copy,
.chats__intro>.large-copy,
.included-copy>.large-copy,
.account-heading>p:not(.eyebrow),
.specialists-head>p:not(.eyebrow),
.final-content>p:not(.eyebrow):not(.hero-note) {
  margin-top: 0 !important
}

.evidence-copy>.large-copy,
.included-copy>.large-copy {
  margin-bottom: var(--text-stack-body-action) !important
}

.chats__intro>.large-copy,
.account-heading>p:not(.eyebrow),
.specialists-head>p:not(.eyebrow) {
  margin-bottom: 0 !important
}

.final-content>p:not(.eyebrow):not(.hero-note) {
  margin-bottom: var(--text-stack-body-action) !important
}

.evidence-copy>.text-link {
  margin-top: 0
}

.section>.shell>.eyebrow:first-child+h2.band__title {
  margin: 0 0 var(--text-stack-title-content) !important
}

.hero-content>.eyebrow {
  margin-bottom: var(--text-stack-kicker-title) !important
}

/* chats-slider-v1 — no phone shadows (overflow track was clipping them) */
.chats .phone,
.chats__track .phone {
  box-shadow: none !important
}

.chats__track {
  margin: 0 calc(50% - 50vw) !important;
  padding-block: 0 !important;
  padding-inline: max(24px, calc(50vw - var(--shell)/2)) !important;
  scroll-padding-inline: max(24px, calc(50vw - var(--shell)/2)) !important
}

@media (width<=900px) {
  .chats__track {
    padding-inline: 24px !important;
    scroll-padding-inline: 24px !important
  }
}

.chats__track {
  cursor: grab;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch
}

.chats__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none !important;
  scroll-behavior: auto !important
}

.chats__track.is-dragging .phone {
  user-select: none;
  -webkit-user-select: none
}

/* change-table-v1 — no horizontal row dividers */
.change__row {
  border-top: 0 !important
}

/* caps-v1 — black table headers + light tracking on uppercase labels */
:root {
  --tracking-caps: 0.06em
}

.change__col,
.change__col--next {
  color: var(--on-surface) !important;
  letter-spacing: var(--tracking-caps) !important
}

.band__badge {
  letter-spacing: var(--tracking-caps) !important
}

/* eyebrow-v2 + text-stack-v3 — black kickers, unified DS 2.0 spacing */
:root {
  --text-stack-section-gap: var(--space-12)
}

.eyebrow,
.eyebrow--light {
  color: var(--on-surface) !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.22 !important;
  padding: 0 !important;
  min-height: 0 !important;
  display: block !important;
  width: auto !important
}

.hero .eyebrow,
.final-cta .eyebrow,
.final-content .eyebrow,
.recognition-copy .eyebrow,
.recognition-copy .eyebrow--light {
  color: #fff !important
}

.route-heading>.eyebrow,
.route-heading>.eyebrow--light,
.route__intro>.eyebrow,
.account-heading>.eyebrow,
.specialists-head>.eyebrow,
.evidence-copy>.eyebrow,
.chats__intro>.eyebrow,
.included-copy>.eyebrow,
.section>.shell>.eyebrow:first-child {
  margin-bottom: var(--text-stack-kicker-title) !important
}

.account-heading,
.route-heading,
.specialists-head,
.chats__head,
.route__head,
.change__head {
  margin-bottom: var(--text-stack-section-gap) !important
}

/* change-head-v3 — keep shell gutters, single column */
.shell.change__head {
  width: min(calc(100% - 48px), var(--shell)) !important;
  max-width: var(--shell) !important;
  margin-inline: auto !important;
  grid-template-columns: 1fr !important;
}

@media (width<=760px) {
  .shell.change__head {
    width: calc(100% - 24px) !important;
  }
}

.route-heading>h2:last-child,
.route__intro>h2:last-child,
.specialists-head>h2:last-child {
  margin-bottom: 0 !important
}

/* button-outline-v1 — DS 2.0 secondary hover + tighter offerbar gap */
.button--outline:hover {
  background: var(--surface-dim);
  border-color: #00000052
}

.button--outline:active {
  background: color-mix(in srgb, var(--surface-dim) 72%, var(--on-surface) 10%);
  border-color: #00000066
}

.offerbar__inner {
  gap: 10px var(--space-2) !important
}

@media (width<=760px) {
  .offerbar__inner {
    gap: 8px var(--space-2) !important
  }
}

.offerbar .button--outline:hover {
  background: var(--surface-dim) !important;
  border-color: #00000052 !important
}

.offerbar .button:hover {
  transform: none !important
}

/* DoctorAvatar — один компонент для всех портретов врачей */
.doctor-avatar {
  display: block;
  flex: none;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden
}

.doctor-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover
}

/* team-v2 */
.team-v2 .team__list {
  gap: var(--space-8);
  grid-template-columns: repeat(4, minmax(0, 1fr))
}

@media (width<=900px) {
  .team-v2 .team__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6)
  }
}

@media (width<=520px) {
  .team-v2 .team__list {
    grid-template-columns: 1fr
  }
}

.team-v2 .member {
  display: flex;
  flex-direction: column;
  align-items: flex-start
}

.team-v2 .doctor-avatar {
  margin: 0 0 var(--space-4)
}

.team-v2 .member b {
  font-size: 17px;
  font-weight: 600;
  line-height: 22px
}

.team-v2 .member em {
  margin-top: 2px;
  color: var(--primary);
  font-size: 15px;
  line-height: 22px
}

.team-v2 .member small {
  margin-top: var(--space-1);
  color: var(--on-surface-var);
  font-size: 14px;
  line-height: 20px
}

.plain-label {
  margin-bottom: var(--space-4) !important;
  font-size: 18px;
  font-weight: 600;
  line-height: 22px
}

/* rep-seg-v2 — DS 2.0 pill segmented control (white active + shadow) */
.rep__tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: var(--space-6);
  padding: 4px;
  background: var(--surface-dim);
  border-radius: var(--radius-full);
  border-bottom: 0 !important;
  flex-wrap: nowrap !important
}

.rep__tabs::after {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: var(--seg-left, 4px);
  width: var(--seg-width, calc(50% - 6px));
  background: var(--surface-bright);
  border-radius: var(--radius-full);
  box-shadow: 0 1px 2px #0d111a14, 0 2px 8px #0d111a0f;
  transition: left .28s cubic-bezier(.22, 1, .36, 1), width .28s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
  z-index: 0
}

.rep__tab {
  position: relative;
  z-index: 1;
  cursor: pointer;
  flex: initial !important;
  min-width: 0;
  border: 0;
  border-radius: var(--radius-full);
  padding: 14px 20px;
  text-align: left;
  background: transparent !important;
  box-shadow: none !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  transition: color .2s;
  display: flex
}

.rep__tab:hover {
  background: transparent !important
}

.rep__tab b {
  font-size: 17px;
  font-weight: 600;
  line-height: 22px;
  color: var(--on-surface-var);
  transition: color .2s
}

.rep__tab span {
  font-size: 14px;
  line-height: 20px;
  color: var(--on-surface-var);
  opacity: .85;
  transition: color .2s, opacity .2s
}

.rep__tab[aria-selected=true] b {
  color: var(--on-surface)
}

.rep__tab[aria-selected=true] span {
  color: var(--on-surface-var);
  opacity: 1
}

.rep__panel {
  padding: 0 var(--space-8) var(--space-8)
}

@media (width<=900px) {
  .rep__tabs {
    margin: var(--space-5)
  }

  .rep__tab {
    padding: 12px 14px
  }

  .rep__tab b {
    font-size: 15px;
    line-height: 20px
  }

  .rep__tab span {
    font-size: 13px;
    line-height: 18px
  }
}

@media (width<=560px) {
  .rep__tabs {
    margin: var(--space-4);
    gap: 3px;
    padding: 3px
  }

  .rep__tabs::after {
    top: 3px;
    bottom: 3px;
    left: var(--seg-left, 3px)
  }

  .rep__tab {
    padding: 10px 12px;
    align-items: center;
    text-align: center
  }

  .rep__tab b,
  .rep__tab span {
    text-align: center;
    width: 100%
  }
}

@media (prefers-reduced-motion:reduce) {
  .rep__tabs::after {
    transition: none
  }
}

/* route-plaque-v4 — match energy-landing gradient glass plaques */
.route-cards[data-route-track] .route-card__copy,
.route-card__copy {
  position: absolute !important;
  z-index: 2 !important;
  right: 12px !important;
  bottom: 12px !important;
  left: 12px !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 22px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  isolation: isolate !important;
  overflow: visible !important;
}

.route-cards[data-route-track] .route-card__copy::before,
.route-card__copy::before {
  display: block !important;
  position: absolute !important;
  z-index: -1 !important;
  content: "" !important;
  pointer-events: none !important;
  inset: -52px -42px -36px !important;
  background: linear-gradient(180deg, rgba(3, 9, 20, 0) 0%, rgba(3, 9, 20, .54) 74%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(.9) !important;
  backdrop-filter: blur(14px) saturate(.9) !important;
  -webkit-mask-image: radial-gradient(ellipse 80% 76% at 50% 72%, #000 28%, rgba(0, 0, 0, .78) 60%, transparent 100%) !important;
  mask-image: radial-gradient(ellipse 80% 76% at 50% 72%, #000 28%, rgba(0, 0, 0, .78) 60%, transparent 100%) !important;
}

.route-cards[data-route-track] .route-card__copy h3,
.route-card__copy h3 {
  max-width: 12ch !important;
  margin-bottom: 0 !important;
  font-size: clamp(26px, 2.3vw, 34px) !important;
  font-weight: 500 !important;
  line-height: 1.04 !important;
  letter-spacing: -0.035em !important;
}

.route-cards[data-route-track] .route-card__details p {
  max-width: 44ch !important;
  margin-bottom: 12px !important;
  color: rgba(255, 255, 255, .86) !important;
  font-size: 15px !important;
  line-height: 22px !important;
}

.route-cards[data-route-track] .route-card__details span {
  display: block !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(255, 255, 255, .2) !important;
  color: rgba(255, 255, 255, .72) !important;
  font-size: 13px !important;
  line-height: 20px !important;
}

@media (width<=900px) {

  .route-cards[data-route-track] .route-card__copy,
  .route-card__copy {
    right: 8px !important;
    bottom: 8px !important;
    left: 8px !important;
    padding: 20px !important;
  }

  .route-cards[data-route-track] .route-card__copy h3,
  .route-card__copy h3 {
    font-size: 28px !important
  }
}

/* specialists-cards-v4 — modular grid index + copy, no absolute overlay */
.specialist--blue:after,
.specialist--java:after,
.specialist--orange:after,
.specialist--lavender:after {
  display: none !important;
  content: none !important
}

.specialist>img {
  display: none !important
}

.specialist-ribbon {
  width: min(calc(100% - var(--space-12)), var(--shell)) !important;
  margin-top: var(--space-12) !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--space-4) !important;
  overflow: visible !important;
}

.specialist {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  min-height: 0 !important;
  padding: var(--space-8) !important;
  gap: var(--space-5) !important;
  position: relative !important;
  clip-path: none !important;
  overflow: hidden !important;
}

.specialist>span,
.specialist__index {
  position: static !important;
  top: auto !important;
  left: auto !important;
  z-index: auto !important;
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: .06em !important;
  font-variant-numeric: tabular-nums !important;
  color: #ffffffd1 !important;
}

.specialist>div,
.specialist__body {
  position: static !important;
  z-index: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: var(--space-4) !important;
  flex: 1 1 auto !important;
}

.specialist h3 {
  margin: 0 !important;
  max-width: none !important;
  font-size: clamp(26px, 2.25vw, 36px) !important;
  font-weight: 400 !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
  color: #fff !important;
}

.specialist p {
  margin: 0 !important;
  max-width: none !important;
  font-size: 16px !important;
  line-height: 24px !important;
  color: #ffffffe0 !important;
}

@media (width<=900px) {
  .specialist-ribbon {
    grid-template-columns: 1fr !important;
    row-gap: var(--space-4) !important;
    margin-top: var(--space-10) !important
  }

  .specialist {
    padding: var(--space-8) !important;
    gap: var(--space-5) !important
  }

  .specialist>div,
  .specialist__body {
    gap: var(--space-3) !important
  }
}

/* specialists-slider-v1 — horizontal track like chats on mobile */
.specialists {
  overflow: hidden;
}

.specialists__dots {
  margin-top: var(--space-8);
  justify-content: center;
  gap: 8px;
  display: none;
  width: min(calc(100% - 48px), var(--shell));
  max-width: var(--shell);
  margin-inline: auto;
}

.specialist-ribbon[data-specialist-track] {
  cursor: grab;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}

.specialist-ribbon[data-specialist-track]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 6px;
}

.specialist-ribbon[data-specialist-track].is-dragging {
  cursor: grabbing;
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
}

.specialist-ribbon[data-specialist-track].is-dragging .specialist {
  user-select: none;
  -webkit-user-select: none;
}

.specialists .mobile-slider-wrap>.specialist-ribbon,
.specialists .specialist-ribbon[data-specialist-track] {
  height: auto !important;
  min-height: 0 !important;
}

@media (width<=900px) {
  .specialist-ribbon[data-specialist-track] {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: stretch !important;
    grid-template-columns: unset !important;
    row-gap: 0 !important;
    gap: var(--space-4) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: var(--space-10) calc(50% - 50vw) 0 !important;
    padding-block: 0 !important;
    padding-inline: 24px !important;
    scroll-padding-inline: 24px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .specialist-ribbon[data-specialist-track]::-webkit-scrollbar {
    display: none;
  }

  .specialist-ribbon[data-specialist-track]>.specialist {
    flex: none !important;
    width: min(310px, calc(100vw - 76px)) !important;
    min-width: min(310px, calc(100vw - 76px)) !important;
    max-width: min(310px, calc(100vw - 76px)) !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: var(--space-6) !important;
    gap: var(--space-4) !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .specialist-ribbon[data-specialist-track]>.specialist h3 {
    font-size: 26px !important;
    line-height: 1.08 !important;
  }

  .specialists__dots {
    display: flex;
    gap: 12px;
  }
}

/* disclosure-accordions — smooth expand/collapse for FAQ + composition */
.js .faq__q:after,
.js .composition>summary:after {
  content: none !important;
  display: none !important;
}

.disclosure-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  position: relative;
}

.disclosure-icon::before,
.disclosure-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--primary);
  border-radius: 1px;
  transition: transform .32s cubic-bezier(.22, 1, .36, 1), opacity .24s ease;
}

.disclosure-icon::before {
  width: 16px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.disclosure-icon::after {
  width: 2px;
  height: 16px;
  transform: translate(-50%, -50%);
}

details[open] .disclosure-icon::after {
  transform: translate(-50%, -50%) scaleY(0);
  opacity: 0;
}

.js .disclosure-panel {
  overflow: hidden;
  transition: height .42s cubic-bezier(.22, 1, .36, 1), opacity .26s ease, padding-block .42s cubic-bezier(.22, 1, .36, 1);
}

.js details:not([open])>.disclosure-panel {
  height: 0;
  opacity: 0;
  padding-block: 0 !important;
}

.js details[open]>.disclosure-panel {
  opacity: 1;
}

@media (prefers-reduced-motion:reduce) {

  .js .disclosure-panel,
  .js .disclosure-icon::before,
  .js .disclosure-icon::after {
    transition: none !important;
  }
}

/* change-table-v2 — full-height blue column, safe clearance above offerbar */
.change__table {
  margin-bottom: var(--space-4);
}

.change__row {
  align-items: stretch !important;
}

.change__topic,
.change__cell {
  align-self: stretch;
}

.change__cell--next {
  align-items: flex-start;
}

@media (width>900px) {
  .change__cell--next {
    min-height: 100%;
  }
}

.change__col--next {
  display: flex;
  align-items: flex-end;
}

/* rep-doc fragment previews — rounded DS 2.0 frame */
.frag__shot:has(.rep-doc) {
  overflow: hidden;
  max-height: none;
  border-radius: var(--radius-m, 16px) !important;
  box-shadow: none !important;
  border: 1px solid rgba(35, 112, 250, 0.72) !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.frag__shot:has(.rep-doc):hover {
  border-color: rgba(35, 112, 250, 0.88) !important;
  box-shadow: 0 0 0 1px rgba(35, 112, 250, 0.35), 0 10px 28px rgba(35, 112, 250, 0.1) !important;
}

.frag__shot:has(.rep-doc) .rep-doc {
  overflow: visible;
  min-width: 0;
}

/* change-slider-v1 — horizontal mobile track mirroring chats */
.change {
  overflow: hidden;
}

.change__table[data-change-track] {
  cursor: grab;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}

.change__table[data-change-track]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 6px;
}

.change__table[data-change-track].is-dragging {
  cursor: grabbing;
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
}

.change__table[data-change-track].is-dragging .change__row {
  user-select: none;
  -webkit-user-select: none;
}

.change__dots {
  margin-top: var(--space-8);
  justify-content: center;
  gap: 8px;
  display: none;
  width: min(calc(100% - 48px), var(--shell));
  max-width: var(--shell);
  margin-inline: auto;
}

@media (width<=900px) {
  .change__table[data-change-track] {
    display: flex !important;
    flex-flow: row nowrap;
    align-items: flex-start;
    gap: var(--space-4);
    width: 100vw;
    margin: 0 calc(50% - 50vw) !important;
    margin-bottom: 0 !important;
    padding-block: 0 !important;
    padding-inline: 24px !important;
    scroll-padding-inline: 24px !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    box-shadow: none !important;
    background: transparent !important;
  }

  .change__table[data-change-track]::-webkit-scrollbar {
    display: none;
  }

  .change__table[data-change-track] .change__row:not(.change__row--head) {
    flex: none;
    width: min(310px, calc(100vw - 76px));
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .change__dots {
    display: flex;
    gap: 12px;
  }

  /* change-slider-v2 — compact cards, aligned topic/now/next rows */
  .change__table[data-change-track] {
    --change-topic-h: 56px;
    --change-now-h: 108px;
    align-items: stretch !important;
  }

  .change__table[data-change-track] .change__row:not(.change__row--head) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: var(--change-topic-h) var(--change-now-h) 1fr !important;
    align-content: stretch !important;
    align-items: stretch !important;
    align-self: stretch !important;
    min-height: 0 !important;
    height: 100% !important;
  }

  .change__table[data-change-track] .change__topic {
    min-height: var(--change-topic-h) !important;
    max-height: var(--change-topic-h) !important;
    padding: var(--space-5) var(--space-6) 0 !important;
    align-self: start !important;
    box-sizing: border-box;
  }

  .change__table[data-change-track] .change__cell--now {
    min-height: var(--change-now-h) !important;
    max-height: var(--change-now-h) !important;
    padding: var(--space-3) var(--space-6) !important;
    align-self: start !important;
    box-sizing: border-box;
  }

  .change__table[data-change-track] .change__cell--next {
    min-height: 100% !important;
    height: 100% !important;
    align-self: stretch !important;
    margin-top: 0 !important;
    padding: var(--space-4) var(--space-6) var(--space-5) !important;
  }
}

/* mobile-slider-fix-v3 — route/specialists horizontal scroll + bleed */
@media (width<=760px) {
  .route {
    overflow: visible;
  }

  .route-cards[data-mobile-slider],
  .mobile-slider-wrap>.route-cards[data-mobile-slider],
  .mobile-slider-wrap>.specialist-ribbon[data-mobile-slider] {
    display: flex !important;
    flex-flow: row nowrap !important;
    grid-template-columns: unset !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin-inline: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }

  .mobile-slider-wrap>[data-mobile-slider] {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }

  .route-cards[data-mobile-slider]>.route-card,
  .route-cards[data-mobile-slider]>.route-card.is-expanded {
    flex: 0 0 var(--mobile-slide-width, calc(100vw - 72px)) !important;
    flex-basis: var(--mobile-slide-width, calc(100vw - 72px)) !important;
    min-width: var(--mobile-slide-width, calc(100vw - 72px)) !important;
    max-width: var(--mobile-slide-width, calc(100vw - 72px)) !important;
    cursor: grab;
  }

  .route-cards[data-mobile-slider].is-dragging>.route-card {
    cursor: grabbing;
  }
}

/* fit-v2 — equal-height yes/no cards */
.fit {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.fit__col {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
}

@media (width<=760px) {
  .fit {
    grid-template-columns: 1fr
  }
}

/* route-track-v1 — horizontal slider like chats (desktop + mobile) */
.route__head {
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-8);
  display: flex;
}

.route__intro {
  max-width: 44rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.route__intro h2 {
  letter-spacing: 0;
  max-width: 26ch;
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 400;
  line-height: 1.04;
}

.route__arrows {
  gap: var(--space-3);
  flex: none;
  display: flex
}

.route__arrow {
  border-radius: var(--radius-full);
  background: var(--surface-dim);
  width: 56px;
  height: 56px;
  color: var(--on-surface);
  cursor: pointer;
  border: 0;
  place-items: center;
  transition: background .25s, opacity .25s;
  display: grid;
}

.route__arrow svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 22px;
  height: 22px;
}

.route__arrow:hover {
  background: var(--blue-tint)
}

.route__arrow:disabled {
  opacity: .35;
  cursor: default;
  background: var(--surface-dim)
}

.route-cards[data-route-track] {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: stretch;
  gap: var(--space-4);
  height: 460px;
  width: 100vw;
  max-width: 100vw;
  margin: 0 calc(50% - 50vw) !important;
  padding-inline: max(24px, calc(50vw - var(--shell)/2)) !important;
  scroll-padding-inline: max(24px, calc(50vw - var(--shell)/2)) !important;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  cursor: grab;
}

.route-cards[data-route-track]::-webkit-scrollbar {
  display: none
}

.route-cards[data-route-track]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 6px;
}

.route-cards[data-route-track].is-dragging {
  cursor: grabbing;
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
}

.route-cards[data-route-track].is-dragging .route-card {
  user-select: none;
  -webkit-user-select: none;
}

.route-cards[data-route-track] .route-card,
.route-cards[data-route-track] .route-card.is-expanded {
  flex: 0 0 min(300px, calc(100vw - 72px)) !important;
  width: min(300px, calc(100vw - 72px)) !important;
  min-width: min(300px, calc(100vw - 72px)) !important;
  max-width: min(300px, calc(100vw - 72px)) !important;
  min-height: 100% !important;
  border: 0 !important;
  outline: none;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  cursor: default;
}

.route-cards[data-route-track] .route-card__details {
  opacity: 1 !important;
  max-height: none !important;
  margin-top: 14px !important;
  overflow: visible !important;
}

.route__dots {
  margin-top: var(--space-8);
  justify-content: center;
  gap: 8px;
  display: flex;
}

@media (width<=900px) {
  .route__head {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-6)
  }

  .route__arrows {
    display: none
  }

  .route-cards[data-route-track] {
    gap: var(--space-4);
    padding-inline: 24px !important;
    scroll-padding-inline: 24px !important;
  }

  .route__dots {
    gap: 12px
  }
}

/* recognition-plaque-v1 — invisible-edge gradient blur behind left copy */
.recognition-visual img {
  object-position: 72% 42% !important;
}

.recognition-copy {
  isolation: isolate !important;
}

.recognition-copy::before {
  display: block !important;
  position: absolute !important;
  z-index: -1 !important;
  content: "" !important;
  pointer-events: none !important;
  inset: -80px -300px -80px -88px !important;
  background: linear-gradient(90deg,
      rgba(4, 10, 22, .84) 0%,
      rgba(4, 10, 22, .76) 10%,
      rgba(4, 10, 22, .66) 20%,
      rgba(4, 10, 22, .54) 32%,
      rgba(4, 10, 22, .42) 42%,
      rgba(4, 10, 22, .3) 52%,
      rgba(4, 10, 22, .18) 62%,
      rgba(4, 10, 22, .1) 72%,
      rgba(4, 10, 22, .04) 82%,
      rgba(4, 10, 22, 0) 96%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.05) !important;
  backdrop-filter: blur(30px) saturate(1.05) !important;
  -webkit-mask-image: linear-gradient(90deg,
      #000 0%,
      #000 46%,
      rgba(0, 0, 0, .94) 54%,
      rgba(0, 0, 0, .78) 62%,
      rgba(0, 0, 0, .56) 70%,
      rgba(0, 0, 0, .34) 78%,
      rgba(0, 0, 0, .14) 86%,
      transparent 100%) !important;
  mask-image: linear-gradient(90deg,
      #000 0%,
      #000 46%,
      rgba(0, 0, 0, .94) 54%,
      rgba(0, 0, 0, .78) 62%,
      rgba(0, 0, 0, .56) 70%,
      rgba(0, 0, 0, .34) 78%,
      rgba(0, 0, 0, .14) 86%,
      transparent 100%) !important;
}

.recognition-frame::after {
  background: linear-gradient(90deg,
      rgba(4, 10, 22, .52) 0%,
      rgba(4, 10, 22, .34) 32%,
      rgba(4, 10, 22, .16) 52%,
      rgba(4, 10, 22, .06) 66%,
      rgba(4, 10, 22, 0) 82%) !important;
}

@media (width<=760px) {
  .recognition-visual img {
    object-position: 68% 34% !important;
  }

  .recognition-copy::before {
    inset: -56px -56px -56px -48px !important;
    -webkit-mask-image: linear-gradient(180deg,
        rgba(0, 0, 0, .08) 0%,
        #000 18%,
        #000 72%,
        rgba(0, 0, 0, .85) 86%,
        transparent 100%) !important;
    mask-image: linear-gradient(180deg,
        rgba(0, 0, 0, .08) 0%,
        #000 18%,
        #000 72%,
        rgba(0, 0, 0, .85) 86%,
        transparent 100%) !important;
    background: linear-gradient(180deg,
        rgba(4, 10, 22, .08) 0%,
        rgba(4, 10, 22, .62) 22%,
        rgba(4, 10, 22, .74) 48%,
        rgba(4, 10, 22, .68) 68%,
        rgba(4, 10, 22, .42) 82%,
        rgba(4, 10, 22, .12) 92%,
        rgba(4, 10, 22, 0) 100%) !important;
  }

  .recognition-frame::after {
    background: linear-gradient(180deg,
        rgba(4, 10, 22, .06) 0%,
        rgba(4, 10, 22, .28) 42%,
        rgba(4, 10, 22, .58) 100%) !important;
  }
}

.route-card:nth-child(6)>img,
.route-card:nth-child(6)>picture img {
  object-position: center 40% !important;
}

.final-visual img {
  object-position: 58% 38% !important;
}

/* final-cta-mobile-v1 — bottom blur plaque + subject crop (mobile only) */
@media (width<=760px) {
  .final-cta {
    min-height: min(88svh, 680px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
  }

  .final-cta,
  .final-content {
    min-height: 0 !important;
  }

  .final-shade {
    background: linear-gradient(180deg,
        rgba(4, 10, 22, .06) 0%,
        rgba(4, 10, 22, .02) 28%,
        rgba(4, 10, 22, .08) 48%,
        rgba(4, 10, 22, .22) 68%,
        rgba(4, 10, 22, .38) 100%) !important;
  }

  .final-content {
    isolation: isolate !important;
    flex: 0 0 auto !important;
    width: calc(100% - 24px) !important;
    max-width: var(--shell) !important;
    margin-inline: auto !important;
    padding-top: var(--space-12) !important;
    padding-bottom: var(--space-8) !important;
    padding-inline: 0 !important;
    justify-content: flex-end !important;
  }

  .final-content::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: -1 !important;
    pointer-events: none !important;
    inset: -56px -12px -28px -12px !important;
    background: linear-gradient(180deg,
        rgba(4, 10, 22, .04) 0%,
        rgba(4, 10, 22, .14) 8%,
        rgba(4, 10, 22, .38) 18%,
        rgba(4, 10, 22, .56) 28%,
        rgba(4, 10, 22, .68) 38%,
        rgba(4, 10, 22, .72) 48%,
        rgba(4, 10, 22, .68) 58%,
        rgba(4, 10, 22, .58) 68%,
        rgba(4, 10, 22, .42) 78%,
        rgba(4, 10, 22, .24) 88%,
        rgba(4, 10, 22, .08) 96%,
        rgba(4, 10, 22, 0) 100%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.05) !important;
    backdrop-filter: blur(30px) saturate(1.05) !important;
    -webkit-mask-image: linear-gradient(180deg,
        transparent 0%,
        rgba(0, 0, 0, .22) 10%,
        rgba(0, 0, 0, .72) 20%,
        #000 32%,
        #000 74%,
        rgba(0, 0, 0, .9) 86%,
        rgba(0, 0, 0, .55) 94%,
        transparent 100%) !important;
    mask-image: linear-gradient(180deg,
        transparent 0%,
        rgba(0, 0, 0, .22) 10%,
        rgba(0, 0, 0, .72) 20%,
        #000 32%,
        #000 74%,
        rgba(0, 0, 0, .9) 86%,
        rgba(0, 0, 0, .55) 94%,
        transparent 100%) !important;
  }

  .final-visual img {
    object-position: center 30% !important;
  }
}

/* =============================================================================
 * КАТАЛОГ СЕКЦИЙ — добор из energy-landing
 *
 * Шасси уже содержит подавляющее большинство правил для секций, которые
 * рендерит energy. Ниже — только те правила, которых в шасси физически нет.
 * Правила energy, затрагивающие компоненты шасси, сознательно не перенесены.
 * ========================================================================== */

.evidence-points>li>span {
  color: var(--on-surface-var);
  font-size: 12px;
  line-height: 20px;
}

.factor-card__copy>span {
  display: inline-block;
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.factor-card__copy::before {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 9, 20, 0) 0%, rgba(3, 9, 20, 0.54) 74%);
  backdrop-filter: blur(14px) saturate(0.9);
  -webkit-backdrop-filter: blur(14px) saturate(0.9);
  -webkit-mask-image: radial-gradient(ellipse 80% 76% at 50% 72%, #000 28%, rgba(0, 0, 0, 0.78) 60%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 76% at 50% 72%, #000 28%, rgba(0, 0, 0, 0.78) 60%, transparent 100%);
}

.factor-heading>p:last-child {
  margin-bottom: 4px;
  color: var(--on-surface-var);
  font-size: 18px;
  line-height: 1.5;
}

.route-heading>p:last-child {
  margin-bottom: 4px;
  color: var(--on-surface-var);
  font-size: 18px;
  line-height: 1.5;
}

.specialist--orange>img {
  transform: translateX(-50%) scale(1.64) translateY(-1px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 36%, rgba(0, 0, 0, 0.42) 50%, transparent 66%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 36%, rgba(0, 0, 0, 0.42) 50%, transparent 66%);
}

.specialist--orange::after {
  display: block;
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  height: 72%;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  content: "";
  pointer-events: none;
}

@media(width<=760px) {
  .factor-grid[data-mobile-slider]>.factor-card {
    min-height: 100%;
    max-height: 100%;
  }

  .factor-grid[data-mobile-slider]>.factor-card--metabolism {
    min-height: 100%;
    max-height: 100%;
  }

  .factor-grid[data-mobile-slider]>.factor-card--sleep {
    min-height: 100%;
    max-height: 100%;
  }

  .factor-grid[data-mobile-slider]>.factor-card--stress {
    min-height: 100%;
    max-height: 100%;
  }

  .factor-story .mobile-slider-wrap>.factor-grid[data-mobile-slider] {
    height: 480px;
  }

  .specialist--orange>img {
    transform: translateX(-50%) scale(1.64) translateY(-1px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 34%, rgba(0, 0, 0, 0.42) 48%, transparent 64%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 34%, rgba(0, 0, 0, 0.42) 48%, transparent 64%);
  }

  .specialist--orange::after {
    height: 76%;
    border-radius: 0 0 var(--radius-l) var(--radius-l);
  }
}

@media(width<=820px) {
  .account-profile>span:first-child {
    display: none;
  }
}

/* offerbar-v3 — мобильная компоновка липкой плашки в две строки.
 *
 * Шасси раскладывает текст и обе кнопки в три колонки на любой ширине. Ниже
 * 480px текстовая колонка minmax(0,1fr) сжимается до нуля: подпись остаётся в
 * потоке, но обрезается кнопками. Мобильная схема: строка с текстом на всю
 * ширину, под ней две равные колонки кнопок. Значения токенов, кегли, радиусы
 * и высоты кнопок остаются шассийными, меняется только распределение по сетке.
 */
@media (width<=760px) {
  .offerbar__inner {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "main main"
      "cta alt";
    align-items: stretch
  }

  .offerbar__main {
    grid-area: main;
    min-width: 0;
    padding-inline: 4px
  }

  .offerbar__main b {
    white-space: normal;
    overflow-wrap: break-word
  }

  .offerbar__cta {
    grid-area: cta
  }

  .offerbar__alt {
    grid-area: alt
  }

  .offerbar__cta,
  .offerbar__alt {
    width: 100%;
    min-width: 0;
    justify-content: center;
    text-align: center;
    flex-shrink: 1
  }

  .offerbar-card {
    border-radius: var(--radius-l);
    padding: 10px 12px
  }
}