* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  --effective-bottom-inset: max(32px, env(safe-area-inset-bottom))
}

html, body {
  height: 100%;
  background: transparent;
  font-family: var(--font-family-body);
  color: var(--color-text-primary);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

#app {
  width: 100%;
  min-width: 320px;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

img {
  width: auto;
  height: auto;
}

.screen {
  display: none;
  flex-direction: column;
  min-height: 100vh;
  padding-top: calc(44px + env(safe-area-inset-top));
  padding-bottom: calc(80px + var(--effective-bottom-inset));
}

.screen.is-active {
  display: flex;
}

/* Premium-offer screens (13/14) have a taller footer: CTA + price note +
   "start with current plan" link, so they need more reserved room. */
[data-screen="13"],
[data-screen="14"] {
  padding-bottom: calc(148px + var(--effective-bottom-inset));
}

a.cta-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  user-select: none;
}

/* Fixed, non-scrolling backdrop for every screen. Gradient screens
   override the background in their own ::before below. */
.screen::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: #ffffff;
}

/* Bottom cover: hides scrolling content behind/around the fixed CTA button.
   Reuses each screen's own background (set per screen type below), so
   content fades into the background before it reaches the button. Only the
   bottom strip is opaque; it fades to transparent above the button. */
.screen::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: #ffffff;
  -webkit-mask-image: linear-gradient(to top, #000 calc(48px + var(--effective-bottom-inset)), transparent calc(80px + var(--effective-bottom-inset)));
  mask-image: linear-gradient(to top, #000 calc(48px + var(--effective-bottom-inset)), transparent calc(80px + var(--effective-bottom-inset)));
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

[data-screen="13"]::after,
[data-screen="14"]::after {
  -webkit-mask-image: linear-gradient(to top, #000 calc(117px + var(--effective-bottom-inset)), transparent calc(148px + var(--effective-bottom-inset)));
  mask-image: linear-gradient(to top, #000 calc(117px + var(--effective-bottom-inset)), transparent calc(148px + var(--effective-bottom-inset)));
}

/* Nav bar: back button + logo. Fixed to the top so it stays put while the
   screen's own content scrolls beneath it; .screen's padding-top reserves
   the matching space so content starts right below it. viewport-fit=cover
   makes the page render edge-to-edge under the real device status bar, so
   we have to reserve that space ourselves via safe-area-inset-top —
   otherwise the logo renders right under the status bar and is hidden
   behind it. */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  height: calc(44px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 16px 0;
  flex-shrink: 0;
  background: transparent;
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  transition: background 0.2s ease, -webkit-backdrop-filter 0.2s ease, backdrop-filter 0.2s ease;
}

/* Frost the bar only once content has scrolled beneath it. */
body.is-nav-scrolled .nav-bar {
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.06);
}

.nav-back {
  position: absolute;
  left: 16px;
  /* Centered on the same 44px content row the logo centers in (below the
     safe-area padding), not a fixed offset from the top — so it lines up
     with the logo regardless of the nav bar's own height. */
  top: calc(env(safe-area-inset-top) + 22px);
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-primary);
}

.nav-back img {
  width: 20px;
  height: 20px;
}

.nav-logo {
  height: 22px;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 20px;
  flex: 1;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
}

/* Progress bar */
.progress-block {
  padding: 0 16px;
}

.progress-line {
  position: relative;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-border-primary);
  overflow: hidden;
}

.progress-step {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  transition: width 0.3s ease;
}

/* Question */
.question {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.question h1, .question h2 {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xxl);
  line-height: 1.25;
  letter-spacing: var(--letter-spacing-base);
  color: var(--color-text-primary);
}

.question p {
  font-family: var(--font-family-body);
  font-size: var(--font-size-s);
  color: var(--color-text-secondary);
}

/* Answers */
.answers {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.button-chooser {
  height: 50px;
  width: 100%;
  border: 2px solid var(--color-border-secondary);
  border-radius: var(--radius-button-square);
  background: var(--color-surface-primary);
  box-shadow: var(--shadow-elevation-2);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-s);
  letter-spacing: var(--letter-spacing-broad);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.button-chooser:active {
  background: #fafafa;
}

.button-chooser.is-selected {
  border-color: var(--color-accent);
}

/* Screen 00 · Intro */
.screen--intro::before,
.screen--intro::after {
  background: linear-gradient(106deg, #ffdef5 30%, #f7dfff 69%);
}

.intro-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 16px;
  margin-top: 48px;
  width: 100%;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.intro-mascot {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

.intro-card {
  width: 100%;
  background: var(--color-surface-primary);
  border-radius: 24px;
  padding: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.intro-card h1 {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xxl);
  line-height: 1.25;
  color: var(--color-text-primary);
}

.intro-card p {
  font-family: var(--font-family-body);
  font-size: 20px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.intro-footer {
  position: fixed;
  /* Same 32px inset as before up to the 540px cap, but expressed as
     left:50%+translateX so it can be centered instead of being pinned to
     the real (potentially much wider) viewport edges. */
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 508px;
  /* Safe-area-bottom is a floor, not an addend: on devices with a home
     indicator (~34px) the footer sits right at that inset, not 32+34px;
     on devices with none, it still keeps the intended 32px minimum. */
  bottom: var(--effective-bottom-inset);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 20;
  pointer-events: none;
}

.intro-footer > * {
  pointer-events: auto;
}

.cta-pill {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 50px;
  background: var(--general-positive, #08c408);
  box-shadow: var(--shadow-elevation-2);
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-bold);
  font-size: 16px;
  letter-spacing: var(--letter-spacing-broad);
  color: #fff;
  cursor: pointer;
}

/* Screens 02 / 02-1 / 02-2 / 02-3 · Branch (personalized answer) screens */
.screen--branch::before,
.screen--branch::after {
  background: linear-gradient(180deg, rgba(206, 138, 255, 0.25) 0%, rgba(255, 202, 132, 0.25) 100%), #ffffff;
}

.branch-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  text-align: center;
}

.branch-mascot {
  width: 120px;
  height: 120px;
  object-fit: contain;
}

.branch-text h1, .branch-text h2 {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xxl);
  line-height: 1.25;
  color: var(--color-text-primary);
}

.accent {
  color: var(--color-accent);
}

.branch-text p {
  font-family: var(--font-family-body);
  font-size: 20px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.offer-card {
  background: var(--color-surface-primary);
  border-radius: 24px;
  margin: 0 16px;
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.offer-title {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-bold);
  font-size: 18px;
  color: var(--color-text-primary);
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 8px;
  font-family: var(--font-family-body);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  width: fit-content;
}

/* Marathon carousel (screens 02 / 02-1 / 02-2) — one full-width card per swipe */

/* Program carousel (screen 02-3) — small square cards, several visible */

/* AI-coach card (screens 06 / 06-1 / 06-2) */

/* Family profiles (screens 09 / 09-1) */
.family-profiles {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 0 16px;
}

.family-avatar {
  flex: 1 1 59px;
  max-width: 59px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.family-avatar img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 120px;
  object-fit: cover;
}

.family-avatar span {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-bold);
  font-size: 12px;
  color: var(--color-text-secondary);
  text-align: center;
}

.stat-note-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--color-surface-primary);
  border-radius: 24px;
  margin: 0 16px;
  padding: 12px 16px 16px;
}

.stat-note-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.stat-note-text {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-bold);
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-text-primary);
}

.stat-note-source {
  font-family: var(--font-family-body);
  font-size: 12px;
  color: #7a8096;
  margin-top: 2px;
}

/* Stats card (screens 04 / 04-1 / 04-2) */
.stats-card {
  background: var(--color-surface-primary);
  border-radius: 24px;
  margin: 0 16px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stats-card-title {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-bold);
  font-size: 18px;
  line-height: 1.38;
  color: var(--color-text-primary);
}

.stats-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stats-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-family-body);
  font-size: 16px;
  color: var(--color-text-primary);
}

.stats-row .icon-down {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #08c408;
}

.stats-footnote {
  font-family: var(--font-family-body);
  font-size: 12px;
  color: #7a8096;
}

/* Meditation carousel (screens 04 / 04-1 / 04-2 / 04-3) */
.meditation-carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.meditation-card {
  position: relative;
  flex: 1 0 0;
  min-width: 160px;
  max-width: 272px;
  height: 188px;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px;
}

/* Footer action button (used on later screens) */
.footer {
  margin-top: auto;
  padding: 16px;
}

/* Specialist cards (screen 11-2) */

/* Screen 12 · Results summary */
.screen--results::before,
.screen--results::after {
  background: linear-gradient(180deg, rgba(206, 138, 255, 0.25) 0%, rgba(255, 202, 132, 0.25) 100%), #ffffff;
}

.results-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 16px;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  box-sizing: border-box;
}

.results-card {
  background: var(--color-surface-primary);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.results-card-title {
  font-family: var(--font-family-title);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-text-primary);
  line-height: 1.38;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f4f7f9;
  border-radius: 12px;
  padding: 8px 12px 8px 8px;
  font-family: var(--font-family-body);
  font-size: 14px;
  color: var(--color-text-primary);
}

.chip-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
}

.chip-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.results-footnote {
  font-family: var(--font-family-body);
  font-size: 14px;
  color: #7a8096;
}

.chart-legend {
  display: flex;
  gap: 16px;
}

.chart-legend-label {
  font-family: var(--font-family-title);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text-secondary);
}

/* Comparison table */
.compare-head {
  display: flex;
  align-items: center;
  gap: 4px;
}

.compare-head-label {
  width: 160px;
  font-family: var(--font-family-body);
  font-size: 14px;
  color: var(--color-text-primary);
}

.compare-head-col {
  flex: 1;
  text-align: center;
  font-family: var(--font-family-body);
  font-size: 14px;
  color: var(--color-text-primary);
}

.compare-head-col.premium {
  background: linear-gradient(90deg, #fd5860 0%, #e976d5 34%, #ffb14a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
}

.compare-divider {
  height: 1px;
  background: var(--color-border-secondary);
  border: none;
  margin: 0;
}

.compare-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.compare-row-label {
  width: 160px;
  font-family: var(--font-family-body);
  font-size: 14px;
  color: var(--color-text-secondary);
}

.compare-row-col {
  flex: 1;
  display: flex;
  justify-content: center;
}

.compare-check {
  width: 32px;
  height: 32px;
  border-radius: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
}

.compare-check--basic { background: #08c408; }
.compare-check--premium { background: linear-gradient(10deg, #ce8aff 3%, #ffca84 99%); }

.compare-check img {
  width: 24px;
  height: 24px;
  display: block;
}

.compare-check--none {
  width: 32px;
  height: 32px;
  display: block;
}

/* Value items ("990 ₽ = ") */

/* Social proof */
.social-proof-transparent {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.social-proof-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.social-proof-icon {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}

.social-proof-title {
  font-family: var(--font-family-title);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-text-primary);
}

.social-proof-desc {
  font-family: var(--font-family-body);
  font-size: 14px;
  color: var(--color-text-secondary);
}

.avatar-stack {
  display: flex;
  align-items: center;
  margin-top: 12px;
  /* Own stacking context so the explicit z-index below (leftmost avatar
     on top, count pill behind everything) can't be disturbed by ancestors. */
  isolation: isolate;
}

.avatar-stack img {
  width: 32px;
  height: 32px;
  border-radius: 32px;
  border: 1px solid #fff;
  object-fit: cover;
  margin-right: -6px;
  box-shadow: 0px 1px 3px 1px rgba(49, 24, 31, 0.06), 0px 4px 15px 2px rgba(49, 24, 31, 0.06);
}

/* Each avatar stacks on top of the one after it (leftmost highest), and
   the count pill sits behind all of them — matching the Figma layer order
   instead of the plain DOM order (which would put the pill on top). */
.avatar-stack img:nth-child(1) { z-index: 11; }
.avatar-stack img:nth-child(2) { z-index: 10; }
.avatar-stack img:nth-child(3) { z-index: 9; }
.avatar-stack img:nth-child(4) { z-index: 5; }
.avatar-stack img:nth-child(5) { z-index: 4; }
.avatar-stack img:nth-child(6) { z-index: 3; }
.avatar-stack img:nth-child(7) { z-index: 2; }

/* The 4th and 5th avatars sit plain (border only, no drop shadow) in the
   Figma stack — only the front/back groups of three get the shadow. */
.avatar-stack img:nth-child(4),
.avatar-stack img:nth-child(5) {
  box-shadow: none;
}

.avatar-stack-count {
  /* Same -6px pull as the avatars before it, so the pill sits snug against
     the last avatar instead of leaving a gap; height matches the 32px
     avatar circles instead of being padding-driven. Behind every avatar
     (z-index below the last avatar's) so the overlap reads correctly. */
  z-index: 1;
  margin-left: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 90px;
  padding: 0 16px;
  font-family: var(--font-family-title);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text-primary);
  box-shadow: 0px 1px 1.5px rgba(49, 24, 31, 0.06), 0px 4px 7.5px rgba(49, 24, 31, 0.06);
}

/* Rating card */
.rating-card {
  display: flex;
  flex-direction: row;
  gap: 17px;
  align-items: center;
  border-radius: 20px;
  padding: 20px;
}

.rating-number {
  display: block;
  width: 82px;
  height: 46px;
  flex-shrink: 0;
}

.rating-card-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}

.rating-stars {
  display: block;
  width: 124px;
  height: 18.889px;
}

.rating-caption {
  font-family: 'Proxima Nova', var(--font-family-body);
  font-size: 13px;
  color: var(--color-text-primary);
}

.rating-caption b { font-weight: 800; }

/* Hide the horizontal scroll indicator in all carousels (scrolling still works) */
.meditation-carousel,
.meditation-carousel-v2,
.review-carousel,
.premium-cards {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.meditation-carousel::-webkit-scrollbar,
.meditation-carousel-v2::-webkit-scrollbar,
.review-carousel::-webkit-scrollbar,
.premium-cards::-webkit-scrollbar {
  display: none;
}

/* Reviews */
.review-carousel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -16px;
  padding: 0 16px;
}

.review-card {
  background: #f8f8f8;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  width: 264px;
}

.review-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.review-avatar {
  width: 36px;
  height: 36px;
  border-radius: 90px;
  object-fit: cover;
}

.review-name {
  font-family: var(--font-family-title);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text-primary);
}

.review-text {
  font-family: var(--font-family-body);
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.55;
}

.review-rating {
  display: flex;
  align-items: center;
  gap: 8px;
}

.review-stars {
  display: block;
  width: 74px;
  height: 11px;
}

.review-rating span {
  font-family: var(--font-family-title);
  font-weight: 700;
  font-size: 12px;
  color: var(--color-text-primary);
}

/* Timeline */
.timeline-card {
  /* Rows manage their own spacing (padding-bottom) so the connector line
     inside each icon column can stretch across the full gap to the next
     icon — a shared parent gap would leave it short. */
  gap: 0;
}

.timeline-step {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

/* The gap before the next step lives here (not on .timeline-step) so it
   counts toward this row's stretched height — otherwise align-items:stretch
   only matches .timeline-icon-col to the text's own height, and the
   connector line stops short of the next icon instead of reaching it.
   Because it's inside .timeline-text, though, it's 20px of blank space
   that isn't part of the visible title+desc content — see
   .timeline-text--centered below, which corrects for exactly this. */
.timeline-text {
  padding-bottom: 20px;
}

.timeline-step:last-child .timeline-text {
  padding-bottom: 0;
}

/* Plain flex column: the icon is a fixed-size item, the connector line
   below it is flex:1 and grows to fill the rest of the stretched column
   (height == .timeline-text's full box, trailing 20px gap included) —
   deliberately no position:absolute here, and the icon always stays at
   the column's top. Both matter for the SAME reason: the line feeding
   into this icon lives in the *previous* row's column, which only knows
   where its own row ends — not where an icon inside this row might have
   moved to. Keeping every icon pinned to its column's top is what keeps
   every line's endpoint (this column's top) actually meeting the icon,
   with no per-row content-height coupling required. */
.timeline-icon-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

/* Reverted: nudging this block up with a transform to visually center the
   bell icon made the spacing between text blocks uneven (transform moves
   the painted content without moving the layout gap around it, so it ate
   into the gap above and inflated the one below). All three steps now
   stay uniformly top-aligned with equal spacing between blocks; see
   .timeline-icon-col above. */

.timeline-icon {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.timeline-icon--gift { background: #ead7ff; }
.timeline-icon--bell { background: #fff595; }
.timeline-icon--check { background: #d3ffd3; }

.timeline-title {
  font-family: var(--font-family-title);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-text-primary);
}

.timeline-desc {
  font-family: var(--font-family-body);
  font-size: 14px;
  color: var(--color-text-secondary);
}

.timeline-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* Gradient line filling the rest of the icon column (the column is
   stretched to the row's full height), so it visually touches the icon
   above it and the next step's icon below it — no floating gap. */
.timeline-connector-line {
  width: 4px;
  flex: 1;
  min-height: 0;
}

.timeline-connector-line--1 { background: linear-gradient(180deg, #ead7ff 0%, #fff595 100%); }
.timeline-connector-line--2 { background: linear-gradient(180deg, #fff595 0%, #d3ffd3 100%); }

/* Screen 13 · "Можно начинать" (soft paywall teaser) */

.premium-slider {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  margin: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.premium-slider-title {
  font-family: var(--font-family-title);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-text-primary);
}

.premium-cards {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -16px;
  padding: 0 16px;
}

.premium-card {
  flex-shrink: 0;
  width: 100px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.premium-card-img {
  width: 100px;
  height: 100px;
  border-radius: 16px;
  background: #ece6fe;
  object-fit: cover;
  display: block;
}

.premium-card-label {
  font-family: var(--font-family-body);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.2;
  color: var(--color-text-primary);
  text-align: center;
}

.link-button {
  background: none;
  border: none;
  width: 100%;
  text-align: center;
  font-family: var(--font-family-title);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-text-primary);
  cursor: pointer;
  padding: 4px;
}

/* Screenshot carousel (real app screenshots, screens 02 / 02-1 / 02-2) */

/* "Динамика занятий за 30 дней" chart card — real Figma SVG curves,
   ported verbatim from the "fixes" branch (known-good on real WKWebView). */
.chart-30-card {
  background: var(--color-surface-primary);
  border-radius: 16px;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  overflow: hidden;
}

/* .content (branch screens) has no horizontal padding of its own — unlike
   .results-body, which already insets its children — so this card needs
   its own side margin to match .offer-card's inset above it. */
.content .chart-30-card {
  width: auto;
  margin: 0 16px;
}

.chart-30-header {
  padding: 0 16px;
  font-family: var(--font-family-title);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-text-primary);
  letter-spacing: 0.1px;
}

.chart-30-graph {
  position: relative;
  width: 343px;
  max-width: 100%;
  margin: 0 auto;
  height: 204px;
  overflow: hidden;
}

.chart-30-graph .grid-line {
  position: absolute;
  left: 50%;
  width: 386px;
  transform: translate(-50%, -50%);
}

.chart-30-graph .curve {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
}

.chart-30-axis {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 16px;
  font-family: var(--font-family-body);
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  color: #7a8096;
}

.chart-30-legend {
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 0 16px;
}

.chart-30-legend-item {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
}

.chart-legend-label {
  font-family: var(--font-family-title);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: var(--letter-spacing-broad);
  color: var(--color-text-secondary);
}

.chart-30-legend-line-advantage, .chart-30-legend-line-dash {
  --height: 4px;
  height: var(--height);
  margin-top: 4px;
  width: 100%;
}

.chart-30-legend-line-advantage {
  background: linear-gradient(90deg, #CE8AFF 0%, #E29ED6 34%, #FFCA84 100%);
  border-radius: calc(var(--height) / 2);
}

.chart-30-legend-line-dash {
  --color: #91C8FF;
  --rounding-gradient: var(--height) top 50%, var(--color) 100%, #0000;

  background: 0 / calc(4 * var(--height)) space no-repeat;
  background-image:
   radial-gradient(circle closest-side at left var(--rounding-gradient)),
   radial-gradient(circle closest-side at right var(--rounding-gradient)),
   linear-gradient(90deg, #0000 25%, var(--color) 0 75%, #0000 0);
}

/* "Разбор рациона" offer card (screen 11) — ported from Figma node 19450:9273. */
.food-diary-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160.2deg, #d4f2d9 10.9%, #fff 97.5%);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.content .food-diary-card {
  margin: 0 16px;
}

.food-diary-card-swirl {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 555px;
  height: 282px;
  transform: translate(-50%, -50%) rotate(62.39deg) scaleY(-1);
  pointer-events: none;
}

.food-diary-card-swirl img {
  display: block;
  width: 100%;
  height: 100%;
}

.food-diary-card-mascot {
  position: relative;
  z-index: 1;
  width: 71px;
  height: 87px;
  overflow: hidden;
}

.food-diary-card-mascot img {
  position: absolute;
  top: -7.25%;
  left: -23.21%;
  width: 142.86%;
  height: 115.94%;
  max-width: none;
}

.food-diary-card-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-family-subheader);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.38;
  color: var(--color-text-primary);
}

.food-diary-card-text {
  position: relative;
  z-index: 1;
  font-family: var(--font-family-header);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-primary);
}

/* Program cards, filmstrip crop (screen 02-3) */

.cta-pill--primary {
  background: var(--general-positive, #08c408);
  color: #fff;
}

/* Screens 13 / 14 — final premium offer screens */
.reminder-cards {
  display: flex;
  gap: 8px;
  padding: 0 16px;
}

.reminder-card {
  flex: 1;
  background: var(--color-surface-primary);
  border-radius: 24px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.reminder-card-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.reminder-card p {
  font-family: var(--font-family-title);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-text-primary);
  letter-spacing: 0.15px;
}

.footer-price-note {
  font-family: var(--font-family-title);
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  color: var(--color-text-primary);
}

.warning-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--color-surface-primary);
  border-radius: 24px;
  padding: 12px 16px 16px;
  margin: 0 16px;
}

.warning-card-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
}

.warning-card p {
  font-family: var(--font-family-title);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text-primary);
  line-height: 1.45;
  letter-spacing: 0.15px;
}

/* Wraps just the photo (not the name label below it), so the lock badge's
   position is relative to the photo's own circle, not the taller column
   that includes the name. */
.family-avatar-photo {
  position: relative;
  width: 100%;
}

.family-avatar.locked img {
  filter: grayscale(1);
}

/* The lock badge itself should stay full-color, not grayed out along with
   the photo underneath it. */
.family-avatar.locked .lock-badge {
  filter: none;
}

.family-avatar .lock-badge {
  /* Flush against the photo's own bottom-right corner (its bounding box
     is a square matching the circle's diameter), sized to the reference's
     fixed 24x24 spec rather than scaling with the avatar. */
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24px;
  height: 24px;
  border-radius: 0;
  object-fit: contain;
}

/* Single marathon photo card + stat card (screens 02 / 02-1 / 02-2 / 02-3, updated design) */
.marathon-single {
  position: relative;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
}

.marathon-single img {
  width: 100%;
  height: auto;
  display: block;
}

.stat-card {
  background: var(--color-surface-primary);
  border-radius: 24px;
  padding: 12px 16px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
}

.stat-card-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.stat-card-text {
  font-family: var(--font-family-title);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0.15px;
  color: var(--color-text-primary);
}

/* Meditation cards v2 (screens 04 / 04-1 / 04-2 / 04-3, updated design) */
.meditation-carousel-v2 {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -16px;
  padding: 0 16px;
}

.meditation-card-v2 {
  position: relative;
  width: 160px;
  height: 188px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(100deg, #f8f8f8 1.3%, #ece4f6 101.45%);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
}

.meditation-card-v2-icon-decor {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 80px;
  height: 80px;
  z-index: 1;
}

.meditation-card-v2-title {
  font-family: var(--font-family-title);
  font-weight: 700;
  font-size: 24px;
  color: var(--color-text-primary);
  position: relative;
  z-index: 2;
}

.meditation-card-v2-headphone {
  width: 20px;
  height: 20px;
  position: relative;
  z-index: 2;
}

/* Screens 11.x updated design */