/*
 * Home page section styling: hero, problem/solution blocks, feature
 * sections, testimonials, pricing, FAQ accordion, final CTA.
 */

/* --- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-4xl) 0;
  background-color: var(--color-canvas);
}

/* A slow-orbiting solar system drawn on <canvas> -- see hero-solar-system.js.
   Pure decoration (aria-hidden, pointer-events: none): a sun and five
   planets gliding around elliptical orbits at realistic differential
   speeds, periodically sweeping into alignment. The script clips its own
   drawing around the phone mockup's rect every frame, so nothing can ever
   render on top of the device. Purely additive -- if JS fails to run, the
   canvas paints nothing and the hero looks exactly as it did before. */
.hero-cosmos {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-3xl);
  align-items: center;
}

.hero__eyebrow-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs);
  padding-right: var(--space-lg);
  margin: 0 0 var(--space-lg);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  background-color: var(--color-canvas);
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
}

.hero__eyebrow-badge__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.hero__eyebrow-badge__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__highlight {
  color: var(--color-primary);
}

.hero__tagline {
  margin-top: var(--space-lg);
  color: var(--color-body-mid);
  max-width: 56ch;
}

.hero__subheadline {
  margin-top: var(--space-lg);
  max-width: 56ch;
}

.hero-highlights {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-lg);
}

.hero-highlights__item {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.hero-highlights__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
}

.hero-highlights__icon svg {
  width: 20px;
  height: 20px;
}

.hero-highlights__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  color: var(--color-ink);
  margin-bottom: 2px;
}

.hero-highlights__desc {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-body-mid);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.hero__visual {
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  background-color: var(--color-canvas-card);
  padding: var(--space-xl);
}

/* Stylised chat mock used across hero/feature visuals -- no external
   image assets, pure CSS + markup per DESIGN.md's "sparse illustration,
   no photography" guidance. Bubble colors mirror the app's MessageBubble:
   user = solid primary fill, AI = canvas-soft fill, both hairline-bordered. */
.chat-mock {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.chat-mock__bubble {
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  font-size: 14px;
  line-height: 20px;
  max-width: 90%;
}

.chat-mock__bubble--astrologer {
  align-self: flex-start;
  background-color: var(--color-canvas-soft);
  color: var(--color-ink);
}

.chat-mock__bubble--user {
  align-self: flex-end;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}

.chat-mock__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-body-mid);
  margin-bottom: var(--space-xs);
  display: block;
}

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

/* Trust bar closing out the hero -- plain numbers rather than photography,
   consistent with DESIGN.md's "sparse illustration" guidance. The only
   inline SVG on the page: a trust bar reads better as recognizable
   pictograms than as the site's usual text/glyph badges.

   Rendered as a card floating over the hero/next-section seam: negative
   margin-top pulls it up into the hero's own bottom padding, and negative
   margin-bottom pulls the following section back up to close the gap that
   would otherwise leave. The card's own border/shadow is the only visual
   divider here -- .hero deliberately has no border-bottom of its own,
   since a background hairline would cut across the card at whatever
   height the margins happen to land it (it isn't vertically centered in
   the card) rather than sitting cleanly at either edge. `position:
   relative` (no z-index needed) is enough for the card to paint over both
   sections' plain backgrounds: positioned boxes always paint above
   non-positioned block content per CSS painting order. This is the same
   "device needs to read as a physical/lifted object" exception the phone
   mockup uses -- the system otherwise has no shadows.

   margin-top/margin-bottom are asymmetric, each tuned against a real
   collision, not just guessed -- measured via getBoundingClientRect at
   1400px: -20px leaves ~45px headroom before the phone mockup's own
   drop-shadow (which bleeds past its box), and -24px leaves ~45px before
   the "Проблема" section's eyebrow label, which sits much closer above
   its h2 than the h2's own line-height suggests. */
.hero__stats {
  position: relative;
  margin-top: -20px;
  margin-bottom: -24px;
  padding: var(--space-2xl) var(--space-xl);
  background-color: var(--color-canvas-card);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 48px -28px rgba(23, 21, 31, 0.22), 0 10px 20px -12px rgba(23, 21, 31, 0.1);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
}

.hero__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}

.hero__stat-icon {
  width: 24px;
  height: 24px;
  margin-bottom: var(--space-sm);
  color: var(--color-body-mid);
}

.hero__stat-icon svg {
  width: 100%;
  height: 100%;
}

.hero__stat-number {
  color: var(--color-ink);
}

.hero__stat-label {
  font-weight: 600;
  color: var(--color-ink-secondary);
}

.hero__stat-caption {
  color: var(--color-body-mid);
}

@media (max-width: 768px) {
  .hero__stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl) var(--space-lg);
    margin-top: -40px;
    margin-bottom: -40px;
    padding: var(--space-xl) var(--space-lg);
  }
}

/* --- Hero phone mockup (live app demo) -----------------------------------
   The hero's showpiece: the actual product, logged into the shared demo
   account, running inside an iframe framed as a phone. A few deliberate
   exceptions to this system's usual rules live here and nowhere else -- a
   drop shadow (a device mockup needs to read as a physical object) and a
   soft blurred-color aura (solid fills blurred via `filter`, never a CSS
   gradient) -- both scoped tightly to this one component. */

.phone-mockup-stage {
  position: relative;
  display: flex;
  justify-content: center;
}

.phone-mockup__aura {
  position: absolute;
  inset: -40px;
  z-index: 0;
  pointer-events: none;
}

.phone-mockup__aura-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.18;
  animation: phone-aura-pulse 7s ease-in-out infinite;
}

.phone-mockup__aura-blob--primary {
  top: 6%;
  left: 2%;
  width: 260px;
  height: 260px;
  background-color: var(--color-primary);
}

.phone-mockup__aura-blob--blue {
  bottom: 10%;
  right: 0;
  width: 220px;
  height: 220px;
  background-color: var(--color-accent-blue);
  animation-duration: 8.5s;
  animation-delay: -3s;
}

.phone-mockup__aura-blob--gold {
  top: 40%;
  left: 38%;
  width: 170px;
  height: 170px;
  background-color: var(--color-accent-gold);
  animation-duration: 9.5s;
  animation-delay: -6s;
  opacity: 0.14;
}

@keyframes phone-aura-pulse {
  0%,
  100% {
    opacity: 0.14;
    transform: scale(0.88);
  }
  50% {
    opacity: 0.32;
    transform: scale(1.12);
  }
}

.phone-mockup__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  white-space: nowrap;
  background-color: var(--color-canvas-card);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
  box-shadow: 0 8px 20px rgba(23, 21, 31, 0.08);
  z-index: 2;
}

.phone-mockup__badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-success);
}

/* Hero-only nudge under the badge (see hero.html) -- a plain sibling
   positioned just below the badge's own ~28px height, so it doesn't need
   its own box/border like the badge itself. */
.phone-mockup__badge-hint {
  position: absolute;
  top: 34px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-mute);
  z-index: 2;
}

/* Hero's stage carries the badge-hint above, so its top caption needs more
   clearance than the plain margin-top: 40px every other section uses. */
#hero .phone-mockup-caption--top {
  margin-top: 58px;
}

.phone-mockup {
  position: relative;
  z-index: 1;
  width: 344px;
  padding: 12px;
  border-radius: 40px;
  background-color: var(--color-ink);
  box-shadow: 0 30px 60px -20px rgba(23, 21, 31, 0.35), 0 12px 24px -10px rgba(23, 21, 31, 0.22);
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.phone-mockup.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.phone-mockup__notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 22px;
  background-color: var(--color-ink);
  border-radius: var(--radius-pill);
  z-index: 3;
}

.phone-mockup__screen {
  position: relative;
  width: 320px;
  height: 688px;
  background-color: var(--color-canvas);
  border-radius: 28px;
  overflow: hidden;
}

/* Native phone width -- see the comment in hero.html for why this isn't
   just 320px. Scaled down as a unit so the app's own layout never sees a
   viewport narrower than it's built for. */
.phone-mockup__scaler {
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 860px;
  transform: scale(0.8);
  transform-origin: top left;
}

.phone-mockup__iframe {
  width: 400px;
  height: 860px;
  border: 0;
  display: block;
}

.phone-mockup__loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  background-color: var(--color-canvas);
  transition: opacity 0.4s ease;
}

.phone-mockup__loading .eyebrow-mono {
  margin: 0;
}

.phone-mockup__loading.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.phone-mockup__spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid var(--color-hairline);
  border-top-color: var(--color-primary);
  animation: phone-mockup-spin 0.8s linear infinite;
}

@keyframes phone-mockup-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .phone-mockup {
    transition: opacity 0.4s ease;
  }
  .phone-mockup__spinner {
    animation: none;
  }
  .phone-mockup__aura-blob {
    animation: none;
    opacity: 0.16;
  }
}

@media (max-width: 768px) {
  .phone-mockup-stage {
    margin-top: var(--space-xl);
  }
  .phone-mockup {
    width: 284px;
  }
  .phone-mockup__screen {
    width: 260px;
    height: 559px;
  }
  .phone-mockup__scaler {
    transform: scale(0.65);
  }
}

/* --- Forecast tablet mockup (live app demo, gold bezel) --------------------
   A `.tablet-mockup` modifier on the same element as `.phone-mockup` --
   reuses that component's structure and its reveal/loading-spinner behavior
   (phone-mockup.js selects generically by `.phone-mockup`) rather than
   duplicating either. Only what a tablet actually differs on is overridden:
   a wider, less-elongated frame with a thinner bezel (6px vs. the phone's
   12px, for a sleeker "premium tablet" edge) with a shimmering gold gradient
   instead of the phone's flat dark fill, and a small centered camera dot
   instead of the notch (tablets don't have one). The gradient is a
   deliberate, tightly-scoped exception to this system's flat-fill-only rule
   (DESIGN.md) -- same spirit as the phone mockup's own shadow/aura
   exceptions above. Screen corner radius (34px) is outer radius (40px)
   minus the new 6px border, so the ring reads as an even thickness at the
   rounded corners too, not just the straight edges. Same native 400px-wide
   app canvas as the hero/solution phones -- it's the same app -- just
   scaled down a little less (0.9 vs. 0.8) since this frame is wider.

   The canvas HEIGHT, though, is deliberately shorter than the phones' 860px
   (560px here) rather than just cropping a taller one: the app's bottom tab
   bar pins to the bottom of whatever height the iframe actually reports as
   its viewport, so a canvas taller than the visible screen would push the
   tab bar below the visible area entirely (as happened when this first
   shipped reusing 860px) instead of just showing less scrollable content
   above it. 560px is chosen so it scales to exactly this screen's height
   at both breakpoints (560*0.9=504, 560*0.74=414.4), so the tab bar always
   lands right at the visible bottom edge. */
.tablet-mockup {
  width: 372px;
  padding: 6px;
  background: linear-gradient(
    135deg,
    #9c6b12 0%,
    #f5b942 22%,
    #fdf3dc 45%,
    #f5b942 68%,
    #b8860b 100%
  );
}

.tablet-mockup__camera {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(23, 21, 31, 0.35);
  z-index: 3;
}

.tablet-mockup .phone-mockup__screen {
  width: 360px;
  height: 504px;
  border-radius: 34px;
}

.tablet-mockup .phone-mockup__scaler {
  height: 560px;
  transform: scale(0.9);
}

.tablet-mockup .phone-mockup__iframe {
  height: 560px;
}

@media (max-width: 768px) {
  .tablet-mockup {
    width: 308px;
  }
  .tablet-mockup .phone-mockup__screen {
    width: 296px;
    height: 414px;
  }
  .tablet-mockup .phone-mockup__scaler {
    transform: scale(0.74);
  }
}

/* --- Generic content section -------------------------------------------- */

.content-section {
  padding: var(--space-4xl) 0;
  border-bottom: 1px solid var(--color-hairline);
  /* Several of these sections' .phone-mockup-illustration deliberately
     bleeds past its column for a bleed effect (see home.css's comment on
     that class) -- clip it at the section edge so it can't hand the whole
     page a horizontal scrollbar, same containment .hero already has via
     its own `overflow: hidden`. Scoped to just this section (not html/body)
     so it doesn't break `position: sticky` for anything on the page. */
  overflow-x: hidden;
}

.content-section__header {
  max-width: 70ch;
  margin-bottom: var(--space-2xl);
}

.content-section--alt {
  background-color: var(--color-canvas-soft);
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
}

@media (max-width: 768px) {
  .two-col {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
}

/* --- Problem section redesign -----------------------------------------------
   No background photo for this one (unlike the four "topic" sections) --
   the right-side visual is built entirely from flat shapes/cards: a big
   soft panel with blurred aura-blobs (same solid-color-blurred-via-filter
   technique the phone mockup's own aura uses) and dashed orbit rings behind
   two overlapping cards -- a generic zodiac horoscope vs. NatalQai's actual
   per-user checklist -- joined by an arrow. */

.process-steps {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.process-steps__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-xs);
  padding: var(--space-lg) var(--space-sm);
  background-color: var(--color-canvas-card);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
}

.process-steps__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-purple);
  background-color: var(--color-accent-purple-soft);
}

.process-steps__icon svg {
  width: 18px;
  height: 18px;
}

.process-steps__icon--gold {
  color: var(--color-accent-gold);
  background-color: var(--color-accent-gold-soft);
}

.process-steps__icon--blue {
  color: var(--color-accent-blue);
  background-color: var(--color-accent-blue-soft);
}

.process-steps__icon--solid {
  color: var(--color-on-primary);
  background-color: var(--color-primary);
}

.process-steps__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--color-ink);
}

.process-steps__caption {
  font-size: 11.5px;
  color: var(--color-mute);
}

@media (max-width: 640px) {
  .process-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

.stat-bar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-lg);
  background-color: var(--color-primary-soft);
}

.stat-bar__sparkle {
  flex-shrink: 0;
  font-size: 18px;
}

.stat-bar__text {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--color-ink);
}

.problem-visual {
  position: relative;
  align-self: start;
  min-height: 780px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-hairline);
  background-color: var(--color-canvas-soft);
  overflow: hidden;
}

.problem-visual__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}

.problem-visual__blob--primary {
  right: -70px;
  bottom: -70px;
  width: 300px;
  height: 300px;
  background-color: var(--color-primary);
  opacity: 0.22;
}

.problem-visual__blob--gold {
  left: 8%;
  top: 6%;
  width: 190px;
  height: 190px;
  background-color: var(--color-accent-gold);
  opacity: 0.18;
}

/* Four concentric rings (same center point) instead of two -- bigger and
   more of them read as an actual orbit system behind the cards rather than
   a couple of faint circles. The outermost two deliberately run past the
   panel's own edge (negative offsets); .problem-visual's overflow:hidden
   trims them, the same "let it run off the edge" move the hero's own
   solar-system canvas uses. */
.problem-visual__ring {
  position: absolute;
  border: 1px dashed rgba(93, 79, 224, 0.24);
  border-radius: 50%;
  pointer-events: none;
}

.problem-visual__ring--xl {
  width: 620px;
  height: 620px;
  top: -6%;
  right: -14%;
}

.problem-visual__ring--lg {
  width: 460px;
  height: 460px;
  top: 4%;
  right: 0%;
}

.problem-visual__ring--md {
  width: 320px;
  height: 320px;
  top: 13%;
  right: 12%;
}

.problem-visual__ring--sm {
  width: 200px;
  height: 200px;
  top: 21%;
  right: 22%;
}

.horoscope-card {
  position: absolute;
  z-index: 1;
  left: 6%;
  top: 10%;
  width: 270px;
  transform: rotate(-4deg);
  background-color: var(--color-accent-gold-soft);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: 0 24px 48px -24px rgba(23, 21, 31, 0.25);
}

.horoscope-card__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink-secondary);
  margin-bottom: var(--space-lg);
}

.horoscope-card__badge-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--color-danger-soft);
  color: var(--color-danger);
}

.horoscope-card__badge-icon svg {
  width: 11px;
  height: 11px;
}

.horoscope-card__sign {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0 0 var(--space-lg);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-ink);
}

.horoscope-card__sign span {
  font-size: 26px;
  color: var(--color-mute);
}

.horoscope-card__lines p {
  margin: 0 0 var(--space-md);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-ink-secondary);
}

.horoscope-card__footer {
  display: block;
  margin-top: var(--space-lg);
  font-size: 12px;
  color: var(--color-mute);
}

.transform-arrow {
  /* Centered on the actual seam between .horoscope-card's right edge and
     .app-card's left edge (measured, not guessed), vertically parked in
     the gap .app-card__checklist's top padding opens up above "Асцендент"
     -- so it reads as sitting cleanly between the two cards rather than
     over either one's text. */
  position: absolute;
  z-index: 3;
  left: 46%;
  top: 27%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: 0 12px 28px -10px rgba(93, 79, 224, 0.55);
}

.transform-arrow svg {
  width: 19px;
  height: 19px;
}

.app-card {
  position: absolute;
  z-index: 2;
  right: 4%;
  top: 6%;
  width: 300px;
  background-color: var(--color-canvas-card);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: 0 30px 60px -20px rgba(23, 21, 31, 0.28);
}

.app-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
}

.app-card__sparkle {
  color: var(--color-primary);
  font-size: 18px;
}

.app-card__profile {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-bottom: var(--space-lg);
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-hairline);
}

.app-card__avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
}

.app-card__avatar svg {
  width: 20px;
  height: 20px;
}

.app-card__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-ink);
}

.app-card__meta {
  display: block;
  font-size: 13px;
  color: var(--color-body-mid);
}

.app-card__checklist {
  list-style: none;
  margin: 0;
  /* Top padding clears room for .transform-arrow, which sits right on the
     seam between this card and .horoscope-card, overlapping the divider
     above rather than the checklist text below it. */
  padding: var(--space-lg) 0 0;
  display: grid;
  gap: var(--space-sm);
}

.app-card__checklist li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 14px;
  color: var(--color-ink-secondary);
}

/* Most checklist items link to their Atlas entity/category page --
   "Транзиты"/"Управители" have no dedicated page yet, so those two stay
   plain text (no <a> in the template for them). */
.app-card__checklist a {
  color: inherit;
  text-decoration: none;
}

.app-card__checklist a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.app-card__check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
}

.app-card__check svg {
  width: 11px;
  height: 11px;
}

.insight-card {
  position: absolute;
  z-index: 2;
  right: 3%;
  top: 66%;
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background-color: var(--color-canvas-card);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
  box-shadow: 0 24px 48px -24px rgba(23, 21, 31, 0.22);
}

.insight-card__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.insight-card__icon {
  flex-shrink: 0;
  color: var(--color-primary);
  font-size: 15px;
  line-height: 20px;
}

.insight-card__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 19px;
  color: var(--color-ink-secondary);
}

@media (max-width: 900px) {
  .problem-visual {
    display: none;
  }
}

/* --- Solution section redesign -----------------------------------------------
   Stat row becomes four individually-bordered cards (unlike .hero__stats'
   one shared card), plus a vertical 3-step chain layered over the phone's
   illustration -- the icons themselves are baked into solution-planet.webp
   (see bg-reshenie.png), so this only positions the text labels beside
   them, measured against the actual rendered image rather than guessed. */

.solution-stats {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.solution-stats__item {
  /* 1fr grid tracks still default to a min-width of "auto" (the item's own
     min-content) -- the long word "конфиденциально" in one caption was
     forcing its track wider than the others, which then had to shrink
     to fit, unevenly. min-width:0 lets every track actually share the
     row equally instead. */
  min-width: 0;
  list-style: none;
  padding: var(--space-lg);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  background-color: var(--color-canvas-card);
}

.solution-stats__icon {
  display: block;
  width: 22px;
  height: 22px;
  margin-bottom: var(--space-md);
  color: var(--color-primary);
}

.solution-stats__icon svg {
  width: 100%;
  height: 100%;
}

.solution-stats__icon--pink {
  color: var(--color-accent-pink);
}

.solution-stats__icon--filled {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.solution-stats__icon--filled svg {
  width: 14px;
  height: 14px;
}

.solution-stats__number {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--color-ink);
  margin-bottom: 2px;
}

.solution-stats__caption {
  display: block;
  font-size: 12.5px;
  line-height: 16px;
  color: var(--color-body-mid);
  overflow-wrap: break-word;
}

@media (max-width: 640px) {
  .solution-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* A self-contained UI element (its own icon circles, card background) laid
   over the illustration, rather than text labels aimed at specific pixels
   in the background art -- more predictable than trying to line text up
   with icons baked into a generated image (the other icons already baked
   into this section's illustration just read as general atmosphere, same
   as every other section's background art). Sits to the left of the phone,
   which this section pushes toward the stage's right edge (see
   .phone-mockup-stage--phone-right) to leave it room. */
.solution-steps {
  position: absolute;
  z-index: 2;
  left: 2%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  width: 230px;
}

.solution-steps__item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-canvas-card);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 32px -20px rgba(23, 21, 31, 0.2);
}

.solution-steps__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
}

.solution-steps__icon svg {
  width: 17px;
  height: 17px;
}

.solution-steps__icon--solid {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.solution-steps__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  line-height: 17px;
  color: var(--color-ink);
}

.solution-steps__caption {
  display: block;
  font-size: 11.5px;
  line-height: 15px;
  color: var(--color-body-mid);
}

.solution-steps__connector {
  color: var(--color-primary);
  opacity: 0.55;
}

.solution-steps__connector svg {
  width: 15px;
  height: 15px;
}

@media (max-width: 1180px) {
  .solution-steps {
    display: none;
  }
}

/* This illustration's own baked-in icons sit close to its right edge, so
   the shared bleed/width would push them off past the stage's visible
   area -- a smaller, more contained crop keeps the atmosphere without that. */
.phone-mockup-illustration--solution {
  top: 42%;
  right: -40px;
  width: 760px;
  transform: translateY(-42%);
}

/* Phone pinned to the stage's right edge (instead of the usual centered
   flex) so .solution-steps has real room to its left without overlapping
   it. The badge, normally centered on the whole stage, is repositioned to
   stay centered over the phone specifically now that the two no longer
   coincide. */
.phone-mockup-stage--phone-right {
  justify-content: flex-end;
}

.phone-mockup-stage--phone-right .phone-mockup__badge {
  left: auto;
  right: 172px;
  transform: translateX(50%);
}

@media (max-width: 1180px) {
  .phone-mockup-stage--phone-right {
    justify-content: center;
  }
  .phone-mockup-stage--phone-right .phone-mockup__badge {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

/* --- Feature list (Венера/Луна/7 дом etc.) -------------------------------- */

.feature-list {
  list-style: none;
  margin: var(--space-lg) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-md);
}

.feature-list__item {
  display: flex;
  gap: var(--space-md);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  background-color: var(--color-canvas-card);
}

.feature-list__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--color-accent-purple);
  background-color: var(--color-accent-purple-soft);
}

/* Per-section semantic accent, matching DESIGN.md's icon-badge convention:
   purple/relationships, gold/purpose. Money's cards use the plain default
   purple too now (its reference mockup dropped the older blue accent to
   match the section's own purple/gold illustration palette). */
#purpose .feature-list__icon {
  color: var(--color-accent-gold);
  background-color: var(--color-accent-gold-soft);
}

.feature-list__body p {
  margin: 0;
}

/* --- Relationships section redesign ----------------------------------------
   Feature-list items gain an optional title/description split (instead of
   the single inline "<strong>X</strong> — text" paragraph money/purpose
   still use) plus a trailing chevron -- purely additive classes, so those
   other sections' markup and look are untouched. */

.relationships-heading__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-left: var(--space-sm);
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  font-size: 15px;
  vertical-align: middle;
  transform: translateY(-4px);
}

.feature-list__icon--pink {
  color: var(--color-accent-pink);
  background-color: var(--color-accent-pink-soft);
}

.feature-list__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
  color: var(--color-ink);
  margin: 0 0 3px;
}

/* Inline links to Atlas entity/category pages (Венера, 7 дом, etc.) --
   `a { color: inherit }` would otherwise make these indistinguishable
   from the surrounding non-linked title text. */
.feature-list__title a {
  color: inherit;
  text-decoration: none;
}

.feature-list__title a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.feature-list__desc {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-body-mid);
}

.feature-list__chevron {
  align-self: center;
  flex-shrink: 0;
  color: var(--color-mute);
  margin-left: var(--space-sm);
}

.feature-list__chevron svg {
  display: block;
  width: 18px;
  height: 18px;
}

.quote-card {
  position: relative;
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
  background-color: var(--color-canvas-soft);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-top: var(--space-xl);
}

/* Optional decorative flourish (purpose section's reference mockup) tying
   the quote card back to the illustration's own sparkle accents. */
.quote-card__sparkle {
  position: absolute;
  right: -10px;
  bottom: -10px;
  color: var(--color-accent-gold);
  font-size: 20px;
  line-height: 1;
}

.quote-card__mark {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}

.quote-card__text {
  margin: 0;
  font-style: italic;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-ink-secondary);
}

.quote-card__text a {
  color: var(--color-primary);
  font-style: normal;
}

.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  list-style: none;
  margin: var(--space-lg) 0 0;
  padding: 0;
}

.trust-badges__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 13px;
  color: var(--color-body-mid);
}

.trust-badges__icon {
  display: inline-flex;
  color: var(--color-mute);
}

.trust-badges__icon svg {
  width: 16px;
  height: 16px;
}

.feature-list__icon--gold {
  color: var(--color-accent-gold);
  background-color: var(--color-accent-gold-soft);
}

.quote-card__mark svg {
  width: 22px;
  height: 22px;
}

/* --- Forecast section redesign ---------------------------------------------
   Standard two-col + wide-right-column layout (`.two-col--illustrated`,
   shared with the other rewritten sections). The right column stacks the
   illustrated tablet on top and the supporting quote cards + mini-list
   below it, rather than putting them in their own third grid column. */
.forecast-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.forecast-tagline {
  margin: var(--space-lg) 0;
}

.forecast-tagline__accent,
.forecast-tagline__bold {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
}

.forecast-tagline__accent {
  color: var(--color-primary);
}

.forecast-tagline__bold {
  color: var(--color-ink);
}

.forecast-middle {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.mini-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background-color: var(--color-canvas-card);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
}

.mini-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: 14px;
  color: var(--color-ink-secondary);
}

.mini-list__icon {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--color-mute);
}

.mini-list__icon svg {
  width: 18px;
  height: 18px;
}

/* The reference mockup's tablet gets a soft gold glow on top of its
   existing metallic-gradient bezel (the dark drop shadow is repeated here
   since box-shadow's shorthand doesn't merge across declarations). */
#forecast .tablet-mockup {
  box-shadow:
    0 0 0 1px rgba(245, 185, 66, 0.45),
    0 0 48px 10px rgba(245, 185, 66, 0.35),
    0 30px 60px -20px rgba(23, 21, 31, 0.35),
    0 12px 24px -10px rgba(23, 21, 31, 0.22);
}

/* Moon/girl illustration bleeding out behind the phone -- positioned
   absolutely within the same `.phone-mockup-stage` the other sections use
   (so the "Живое приложение" badge, which centers on the stage, keeps
   the exact position/look it already has elsewhere) rather than resizing
   or re-centering the stage itself. */
/* Wider right column so the illustration has real room beside the phone
   instead of relying on bleeding past the container (unreliable -- there's
   zero page margin outside `.container` once the viewport gets down near
   1200px wide). Left column still comfortably fits this section's copy. */
.two-col--illustrated {
  grid-template-columns: 1fr 1.15fr;
}

/* The illustration is position:absolute (z-index:0) and often bleeds well
   past its own column to reach behind the phone -- a positioned element
   still paints over non-positioned siblings it visually overlaps,
   regardless of DOM order, so without this the art can end up on top of
   the copy column's text once it bleeds far enough. Pulling the copy
   column into its own stacking context above it guarantees the opposite. */
.two-col--illustrated > div:first-child,
.hero__copy {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .two-col--illustrated {
    grid-template-columns: 1fr;
  }
}

.phone-mockup-stage--illustrated {
  overflow: visible;
}

.phone-mockup-illustration {
  position: absolute;
  z-index: 0;
  top: 40%;
  right: -200px;
  width: 1000px;
  max-width: none;
  height: auto;
  transform: translateY(-42%);
  pointer-events: none;
  user-select: none;
}

.phone-mockup-illustration-card {
  position: absolute;
  z-index: 2;
  /* Nested inside .phone-mockup (344px wide), not the wider stage, so
     right must clear the phone's own edge -- -200px puts the card's left
     edge ~12px past it instead of ~108px inside it. */
  right: -200px;
  bottom: 0px;
  width: 188px;
  background-color: var(--color-canvas-card);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: 0 20px 40px -22px rgba(23, 21, 31, 0.22);
}

.phone-mockup-illustration-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-bottom: var(--space-sm);
  border-radius: 50%;
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 13px;
}

.phone-mockup-illustration-card__text {
  margin: 0;
  font-size: 12.5px;
  line-height: 18px;
  color: var(--color-body-mid);
}

@media (max-width: 900px) {
  .phone-mockup-illustration,
  .phone-mockup-illustration-card {
    display: none;
  }
}

/* --- Advantage cards (Преимущества) ---------------------------------------
   44px rounded-square icon badge matches DESIGN.md's icon-badge spec
   exactly (feature-list's pill badge is this site's own variant, used for
   the per-topic sections). One consistent accent across all four cards --
   unlike money/purpose's per-section colors, these four are one argument,
   not four separate topics, so they stay visually unified. Tag chips are
   pinned to the bottom of each card (margin-top: auto) so the four cards'
   footers line up even though the body copy lengths vary slightly. */
.advantages-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xl);
}

.advantages-header .content-section__header {
  flex: 1 1 480px;
  margin-bottom: 0;
}

.advantages-illustration {
  flex: 0 1 480px;
  width: 100%;
  max-width: 480px;
  height: auto;
}

@media (max-width: 900px) {
  .advantages-header {
    flex-direction: column;
    align-items: stretch;
  }
  .advantages-illustration {
    display: none;
  }
}

.advantage-grid {
  margin-top: var(--space-2xl);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
}

.advantage-card {
  display: flex;
  flex-direction: column;
}

.advantage-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.advantage-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
}

.advantage-card__icon svg {
  width: 22px;
  height: 22px;
}

.advantage-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: var(--color-ink);
}

.advantage-card__number {
  flex-shrink: 0;
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--color-hairline);
}

.advantage-card__body {
  margin: 0 0 var(--space-lg);
  color: var(--color-body);
}

.advantage-card__body a {
  color: var(--color-primary);
  text-decoration: none;
}

.advantage-card__body a:hover {
  text-decoration: underline;
}

.advantage-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  list-style: none;
  margin: auto 0 0;
  padding: 0;
}

.advantage-card__tags li {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-primary);
  background-color: var(--color-primary-soft);
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-md);
}

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

.advantages-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
  padding: var(--space-xl) var(--space-2xl);
  border-radius: var(--radius-lg);
  background-color: var(--color-primary-soft);
}

.advantages-footer__intro {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex: 1 1 360px;
}

.advantages-footer__avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  font-size: 22px;
}

.advantages-footer__title {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: var(--color-ink);
}

.advantages-footer__desc {
  margin: 0;
  font-size: 14px;
  color: var(--color-body-mid);
}

.advantages-footer__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
  list-style: none;
  margin: 0;
  padding: 0;
}

.advantages-footer__stats li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.advantages-footer__stat-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-canvas-card);
  color: var(--color-primary);
}

.advantages-footer__stat-icon svg {
  width: 16px;
  height: 16px;
}

.advantages-footer__stat-body {
  display: flex;
  flex-direction: column;
}

.advantages-footer__stat-body strong {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-ink);
}

.advantages-footer__stat-body span {
  font-size: 12px;
  color: var(--color-body-mid);
}

@media (max-width: 768px) {
  .advantages-footer {
    padding: var(--space-xl);
  }
  .advantages-footer__stats {
    gap: var(--space-lg);
  }
}

/* --- Testimonials ---------------------------------------------------------- */

.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

.testimonials--extra {
  margin-top: var(--space-xl);
}

/* Author-stylesheet `display: grid` above otherwise beats the user-agent
   default `[hidden] { display: none }` in the cascade -- this attribute
   selector's higher specificity restores the expected "hidden means
   actually hidden" behavior without needing a JS-toggled class instead. */
.testimonials--extra[hidden] {
  display: none;
}

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

.testimonial-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.testimonial-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.testimonial-card__avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.testimonial-card__identity {
  display: flex;
  flex-direction: column;
}

.testimonial-card__author {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-ink);
}

.testimonial-card__role {
  font-size: 12.5px;
  color: var(--color-body-mid);
}

.testimonial-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
}

.testimonial-card__stars {
  color: var(--color-accent-gold);
  font-size: 14px;
  letter-spacing: 2px;
}

.testimonial-card__quote {
  margin: 0;
  color: var(--color-body);
  font-size: 15px;
  line-height: 22px;
}

.testimonials__toggle-row {
  display: flex;
  justify-content: center;
  margin-top: var(--space-2xl);
}

/* --- Pricing ---------------------------------------------------------------
   Mirrors the app's Profile > Subscription screen: Free / Basic / Pro, same
   copy and conditions (subscription-tiers.const.ts), kept in sync manually.
   Basic is the one real purchasable plan, so it's visually promoted (solid
   primary background, badge, elevation) the same way PricingTierCard.tsx
   promotes it in-app. */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
  align-items: stretch;
}

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

.pricing-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--color-canvas-card);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: 0 20px 40px -28px rgba(23, 21, 31, 0.22);
}

.pricing-tier--featured {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 28px 48px -20px rgba(93, 79, 224, 0.4);
}

.pricing-tier__badge {
  position: absolute;
  top: -12px;
  right: var(--space-lg);
  background-color: var(--color-accent-gold);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: var(--space-xxs) var(--space-sm);
  border-radius: var(--radius-pill);
}

.pricing-tier__name {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: var(--color-ink);
}

.pricing-tier--featured .pricing-tier__name {
  color: var(--color-on-primary);
}

.pricing-tier__tagline {
  margin: var(--space-xs) 0 var(--space-lg);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-body-mid);
}

.pricing-tier--featured .pricing-tier__tagline {
  color: rgba(255, 255, 255, 0.75);
}

.pricing-tier__price-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-xs);
}

.pricing-tier__price {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 38px;
  font-weight: 600;
  letter-spacing: -0.6px;
  color: var(--color-ink);
}

.pricing-tier--featured .pricing-tier__price {
  color: var(--color-on-primary);
}

.pricing-tier__period {
  font-size: 15px;
  padding-bottom: 5px;
  color: var(--color-body-mid);
}

.pricing-tier--featured .pricing-tier__period {
  color: rgba(255, 255, 255, 0.75);
}

.pricing-tier__note {
  margin: var(--space-xs) 0 0;
  font-size: 13px;
  color: var(--color-success);
}

.pricing-tier--featured .pricing-tier__note {
  color: rgba(255, 255, 255, 0.85);
}

.pricing-tier__features {
  list-style: none;
  margin: var(--space-lg) 0 var(--space-xl);
  padding: 0;
  display: grid;
  gap: var(--space-sm);
  flex-grow: 1;
}

.pricing-tier__features li {
  position: relative;
  padding-left: 28px;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-body);
}

.pricing-tier--featured .pricing-tier__features li {
  color: rgba(255, 255, 255, 0.92);
}

.pricing-tier__features li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-hairline);
  color: var(--color-primary);
  font-size: 11px;
  line-height: 16px;
  text-align: center;
}

.pricing-tier--featured .pricing-tier__features li::before {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--color-on-primary);
}

.pricing-tier__features li.is-new {
  font-weight: 600;
  color: var(--color-ink);
}

.pricing-tier--featured .pricing-tier__features li.is-new {
  color: var(--color-on-primary);
}

.pricing-tier__features li.is-new::before {
  background-color: var(--color-accent-gold);
  border-color: var(--color-accent-gold);
  color: var(--color-ink);
}

.pricing-tier--featured .pricing-tier__features li.is-new::before {
  background-color: var(--color-on-primary);
  border-color: var(--color-on-primary);
  color: var(--color-primary);
}

.pricing-tier__cta {
  margin-top: auto;
  width: 100%;
}

.pricing-tier--featured .pricing-tier__cta {
  background-color: var(--color-on-primary);
  color: var(--color-primary);
  border-color: var(--color-on-primary);
}

.pricing-tier--featured .pricing-tier__cta:hover {
  background-color: rgba(255, 255, 255, 0.88);
}

.pricing-tier__coming-soon {
  margin-top: auto;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-body-mid);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
}

.pricing-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

.pricing-cta-row__note {
  font-size: 13px;
  color: var(--color-body-mid);
  text-decoration: underline;
}

/* --- FAQ accordion ----------------------------------------------------------- */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 80ch;
}

.faq-item {
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  background-color: var(--color-canvas-card);
  overflow: hidden;
}

.faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  background: none;
  border: none;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  text-align: left;
  padding: var(--space-lg) var(--space-xl);
  cursor: pointer;
}

.faq-item__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-hairline);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: transform 0.2s ease;
}

.faq-item[data-open="true"] .faq-item__icon {
  transform: rotate(45deg);
}

.faq-item__answer {
  padding: 0 var(--space-xl);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, padding 0.25s ease;
}

.faq-item[data-open="true"] .faq-item__answer {
  padding: 0 var(--space-xl) var(--space-lg);
  /* Generous headroom above what any current answer needs -- multi-paragraph
     answers (see faq.html) run longer than the original single-<p> design,
     this only caps the open/close transition, not layout, so slack is free. */
  max-height: 900px;
}

.faq-item__answer p {
  margin: 0;
}

/* Lobotomized-owl spacing: covers p-after-p and p-after-ul alike, so any
   mix of paragraphs/lists in a longer answer gets even rhythm without
   pairwise selectors for every combination. `:not(:first-child)` (rather
   than `* + *`) is deliberate -- it out-specifies `.faq-item__answer p`
   above, which a same-or-lower-specificity `margin-top` would otherwise
   lose to regardless of source order. */
.faq-item__answer > *:not(:first-child) {
  margin-top: var(--space-md);
}

.faq-item__answer ul {
  padding-left: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* --- Final CTA ------------------------------------------------------------- */

.final-cta {
  padding: var(--space-4xl) 0;
  text-align: center;
  background-color: var(--color-canvas-soft);
}

.final-cta__subheadline {
  max-width: 56ch;
  margin: var(--space-lg) auto 0;
  color: var(--color-body);
}

.final-cta__actions {
  display: flex;
  justify-content: center;
  margin-top: var(--space-xl);
}

/* CSS-built iPad frame wrapping the registration iframe -- no device
   photo/PNG, same flat-fill + padding-bezel technique .phone-mockup/
   .tablet-mockup use, just fluid-width (like the old .imac-frame it
   replaces) instead of their two fixed breakpoint sizes. Landscape on
   tablet/desktop; flips to portrait below 640px (see that media query),
   camera and buttons repositioned to the edges that are actually "short"
   in each orientation. Drop shadow is this component's own instance of the
   same "device needs to read as a physical object" exception the phone
   mockup uses elsewhere. */
.ipad-mockup {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: var(--space-4xl) auto 0;
  aspect-ratio: 4 / 3;
  padding: 20px;
  border-radius: 34px;
  background-color: #1d1d1f;
  box-shadow: 0 40px 80px -30px rgba(23, 21, 31, 0.4), 0 16px 32px -16px rgba(23, 21, 31, 0.25);
}

.ipad-mockup__camera {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #0a0a0c;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  z-index: 2;
}

.ipad-mockup__button {
  position: absolute;
  right: -2px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background-color: #3a3a3e;
}

.ipad-mockup__button--power {
  top: 22%;
  height: 34px;
}

.ipad-mockup__button--volume-up {
  top: calc(22% + 54px);
  height: 26px;
}

.ipad-mockup__button--volume-down {
  top: calc(22% + 90px);
  height: 26px;
}

.ipad-mockup__screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 16px;
  background-color: #000;
}

.ipad-mockup__iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Portrait below 640px -- phones hold tablets upright, tablets/desktops
   keep the landscape frame above. Camera moves to the top (short) edge,
   centered; volume buttons stay on the right edge (still physically a
   long edge in portrait) but power moves to the new top edge instead.
   The scaler's aspect ratio (780:1060) is re-derived the same way the
   landscape one was: this breakpoint's typical frame width minus the
   12px bezel, matched so the canvas fills the portrait screen exactly. */
@media (max-width: 640px) {
  .ipad-mockup {
    aspect-ratio: 3 / 4;
    padding: 12px;
    border-radius: 24px;
  }

  .ipad-mockup__screen {
    border-radius: 10px;
  }

  .ipad-mockup__camera {
    left: 50%;
    top: 6px;
    transform: translateX(-50%);
  }

  /* Power moves to the new top edge; volume stays on the right edge
     (still a long edge in portrait, just like on a real device) --
     only its top% shifts to fit the taller frame. */
  .ipad-mockup__button--power {
    top: -1px;
    left: 26%;
    right: auto;
    width: 34px;
    height: 3px;
    border-radius: 2px 2px 0 0;
  }

  .ipad-mockup__button--volume-up {
    top: 14%;
    height: 26px;
  }

  .ipad-mockup__button--volume-down {
    top: calc(14% + 36px);
    height: 26px;
  }
}

/* --- Homepage "Блог / Новости" strip (bottom of page) --------------------- */

.blog-news-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-3xl);
}

.blog-news-col {
  min-width: 0;
}

.blog-news-col__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-hairline);
}

.blog-news-col__all {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
}

.blog-news-col__all:hover {
  text-decoration: underline;
}

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

.blog-news-list__item {
  border-bottom: 1px solid var(--color-hairline-soft);
}

.blog-news-list__item:last-child {
  border-bottom: none;
}

.blog-news-list__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-md) 0;
  color: var(--color-ink-secondary);
  text-decoration: none;
}

.blog-news-list__link:hover .blog-news-list__title {
  color: var(--color-primary);
}

.blog-news-list__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}

.blog-news-list__date {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-mute);
}

@media (max-width: 768px) {
  .blog-news-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
}

/* --- Natal chart intro block (natal_chart_intro.html) -------------------- */

.mini-process {
  margin: var(--space-xl) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
}

.mini-process__item {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink);
  background-color: var(--color-canvas-soft);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-md);
  white-space: nowrap;
}

.mini-process__item--accent {
  color: var(--color-on-primary);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.mini-process__arrow {
  color: var(--color-mute);
  font-size: 16px;
}

@media (max-width: 768px) {
  .mini-process {
    justify-content: flex-start;
  }
}

/* --- "What can you learn from a natal chart" topics grid (topics.html) --- */

.topic-grid {
  margin-top: var(--space-2xl);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

.topic-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.topic-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}

.topic-card__icon svg {
  width: 22px;
  height: 22px;
}

.topic-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: var(--color-ink);
}

.topic-card__body {
  margin: 0;
  color: var(--color-body);
}

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

/* --- Text context wrapped around each live iframe demo (spec: every demo
   needs a caption above/below it) ------------------------------------------ */

/* Wraps just the phone + its two captions (NOT the whole .phone-mockup-stage
   -- illustration/badge/solution-steps stay direct children of the stage,
   unaffected by this). That scoping matters: .phone-mockup-stage--phone-
   right relies on .phone-mockup-stage stretching to its parent's full
   column width and pushing its one real flex participant to the right
   edge via justify-content: flex-end, leaving room to the left for
   .solution-steps (positioned absolutely at left: 2% of the stage's own
   width). If this wrapper enclosed the whole stage, align-items: center
   here would shrink the stage down to just the phone's width instead,
   collapsing that reserved space. Scoped to only the phone, this wrapper
   becomes the thing flex-end pushes to the edge, and centers the
   captions over the phone specifically -- correct whether the phone
   itself ends up centered (hero.html) or pinned right (solution.html). */
.phone-mockup-caption-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.phone-mockup-caption {
  text-align: center;
  max-width: 320px;
  margin: 0;
}

.phone-mockup-caption--top {
  color: var(--color-primary);
  /* .phone-mockup__badge floats at top: 0 of the stage (or right: 172px for
     --phone-right), which is the same corner .phone-mockup-caption-wrap's
     content starts from since the wrap is the stage's only in-flow child --
     without this clearance the two sit exactly on top of each other. ~26px
     badge height (padding + line-height) plus a bit of breathing room. */
  margin-top: 40px;
}

.phone-mockup-caption--bottom {
  color: var(--color-body-mid);
}

/* final_cta.html's .ipad-mockup isn't wrapped in .phone-mockup-caption-wrap
   (see that template for why) -- these captions center themselves as plain
   block elements instead. */
.phone-mockup-caption--standalone {
  margin: 0 auto;
}

.phone-mockup-caption--standalone.phone-mockup-caption--top {
  margin-top: var(--space-3xl);
  margin-bottom: var(--space-lg);
}

.phone-mockup-caption--standalone.phone-mockup-caption--bottom {
  margin-top: var(--space-lg);
}