/*
  destinysync.com app page (app.html) — the DestinySync consumer app.

  Loaded after css/tokens.css, css/style.css and css/home.css (all three
  untouched; see CLAUDE.md — never edit js/, config.js, or those three
  files). This file does two things, both scoped to body.page-app so it
  never leaks onto the Kundali homepage or any other page that happens to
  share these class names:

  1. Redefines the same colour custom properties css/home.css and
     css/tokens.css declare, to the app's own "Dusk lavender" palette
     instead of the Kundali homepage's sage/eucalyptus one. Every class
     reused from home.css (.ds-sec, .ds-bg-tint, .ds-bg-mist, .ds-stage,
     .mk-panel, .mk-close, .ds-faq, .ds-foot, ...) reads its colour from
     these custom properties, so redeclaring them here is enough to retint
     the whole page without touching a single rule in home.css.

  2. A handful of new, app-only rules for the two things home.css has no
     equivalent for: the hero's own background wash (home.css's .ds-dawn
     hardcodes sage greens with no custom property to hook), the app
     store badges (previously from shared/base.css, now dropped), and the
     "how it works" numbered list reusing home.css's .ds-steps shell.

  Derivation note: the tint/mist steps below follow the same lightening
  pattern css/home.css documents for the sage palette (ground #C4D0BE ->
  tint #D7DFD2 -> mist #EBEFE8, i.e. two +6-7% lightness steps at roughly
  constant hue/saturation). Applied to the app's own ground (#C2C3E0,
  HSL 238/33/82) that gives tint #D8D9EC (HSL 238/33/88) and mist #EDEDF7
  (HSL 238/33/94). The hairline (#AEB0D8) is the same ground darkened by
  about 8% lightness, mirroring sage's --hair versus --sage-ground.
*/

body.page-app {
  /* tokens.css */
  --ink: #262756;
  --ink-muted: #55578A;
  --bg: #ffffff;
  --bg-raised: #D8D9EC;
  --border: #AEB0D8;
  --border-strong: #9698C7;
  --accent: #3D4180;
  --accent-ink: #D8D9EC;
  --accent-strong: #2E3166;
  --focus-ring: #3D4180;

  /* css/home.css */
  --sage-ground: #C2C3E0;
  --lavender: #D8D9EC; /* tint */
  --sky: #EDEDF7;       /* mist */
  --muted: #55578A;
  --hair: #AEB0D8;
  --hair-2: #C2C3E0;
  /* --paper / --paper-ink / --paper-grey stay the Kundali document
     colours (#F2EEE6 etc.) — this page has no PDF-style document surface
     to recolour, and CLAUDE.md keeps --paper shared across products. */
}

/* ---------------------------------------------------------------------
   Hero wash — app's own answer to home.css's .ds-dawn, which hardcodes
   sage-green radial gradients with no custom property to override.
--------------------------------------------------------------------- */
.ds-dusk {
  position: relative;
  background:
    radial-gradient(60% 70% at 10% 8%, #D4D5EC 0%, rgba(194, 195, 224, 0) 75%),
    radial-gradient(55% 75% at 88% 30%, #CDCEE6 0%, rgba(194, 195, 224, 0) 75%),
    linear-gradient(to bottom, #C2C3E0 0%, #EDEDF7 100%);
}

/* home.css's .ds-btn:hover hardcodes a sage-green hover fill (#354A2B)
   with no custom property; override it at the same specificity level,
   scoped to this page. */
body.page-app .ds-btn:hover,
body.page-app .btn-primary:hover {
  background: #1B1C3D;
}

/* ---------------------------------------------------------------------
   App store badges (previously shared/base.css, dropped on this page —
   see CLAUDE.md: Fraunces/Inter Tight and the shared/ base styles are
   not used on the Kundali-style pages).
--------------------------------------------------------------------- */
.store-badges {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.store-badge {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.store-badge img {
  width: auto;
  max-width: none;
}

.store-badge--app-store img {
  height: 40px;
}

.store-badge--google-play img {
  width: 103px;
  height: 40px;
  object-fit: contain;
  margin: 0;
}

@media (max-width: 640px) {
  .store-badge--app-store img {
    height: 38px;
  }
  .store-badge--google-play img {
    width: 98px;
    height: 38px;
    margin: 0;
  }
}

/* ---------------------------------------------------------------------
   Price and trial panel — a plain full-width card reusing .mk-panel's
   chrome (border, radius, --lavender background) without the Kundali
   live price-block JS, which belongs to js/ and is off-limits here.
--------------------------------------------------------------------- */
.app-price {
  border: 1px solid var(--hair);
  border-radius: 8px;
  background: var(--lavender);
  padding: 40px;
}

.app-price__figure {
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}

.app-price__period {
  font-size: 16px;
  font-weight: 400;
  color: var(--ink-muted);
}

.app-price__unit {
  margin: 8px 0 0;
  font-size: 15px;
  color: var(--ink-muted);
}

.app-price__note {
  margin: 20px 0 0;
  font-size: 13px;
  color: var(--ink-muted);
  max-width: 60ch;
}

.app-price__act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 28px;
}

@media (max-width: 640px) {
  .app-price {
    padding: 28px 20px;
  }
}

/* ---------------------------------------------------------------------
   Stage screenshots (#surfaces) — cap height so 7 tall phone screenshots
   don't blow the page out to ~12,500px. home.css's .ds-stage__fig img is
   width:100%/height:auto, which at this column width renders ~700px
   tall per screenshot; override to a height cap instead, centered.
--------------------------------------------------------------------- */
body.page-app .ds-stage__fig picture,
body.page-app .ds-stage__fig img {
  width: auto;
  height: auto;
}
body.page-app .ds-stage__fig img {
  max-height: 520px;
  border-radius: 16px;
  border: 1px solid var(--hair);
  display: block;
  margin: 0 auto;
}
@media (max-width: 780px) {
  body.page-app .ds-stage__fig img {
    max-height: 70vh;
  }
}

/* ---------------------------------------------------------------------
   Hero screenshot — home.css's object-fit:cover at a fixed height crops
   the top of the phone screenshot (the ring graphic). Show the full
   screenshot on desktop instead; the existing home.css mobile block
   (max-width:980px) already handles face-framing for mobile and is left
   untouched.
--------------------------------------------------------------------- */
body.page-app .ds-hero__photo,
body.page-app .ds-hero__photo picture {
  height: auto;
  max-height: none;
  display: flex;
  justify-content: center;
  background: none;
}
body.page-app .ds-hero__photo img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 600px;
  object-fit: contain;
  border-radius: 16px;
  border: 1px solid var(--hair);
}
@media (max-width: 980px) {
  body.page-app .ds-hero__photo img { max-height: 62vh; }
}
@media (max-width: 480px) {
  body.page-app .ds-head .ds-btn { white-space: nowrap; padding-left: 12px; padding-right: 12px; font-size: 14px; }
}