/* Lunami pages on top of /appshift.css: the app's own soft-pink palette and Nunito headings,
   real app screenshots inside the phone frames. Shared by /lunami/ and its sub-pages. */

:root {
  --accent: #ec5b84;
  --accent-deep: #c93d66;
  --accent-soft: #ffe1ea;
  --accent-glow: rgba(236, 91, 132, 0.35);
  --background: #fff6f8;
  --elevated: #fff0f4;
  --ink: #3b2340;
  --lilac-bg: #eee5ff; --lilac-fg: #6a4bb0;
  --teal-bg: #d6f2ef;  --teal-fg: #1f8a84;
  --butter-bg: #fff1c9; --butter-fg: #9a6b00;
  --display: 'Nunito', var(--font);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --accent: #ff7ea2; --accent-deep: #ff9bb7; --accent-soft: rgba(255, 126, 162, 0.18);
    --accent-glow: rgba(255, 126, 162, 0.4);
    --background: #1b141c; --surface: #261c28; --elevated: #2e2230; --ink: #2e2230;
    --lilac-bg: rgba(106, 75, 176, 0.28); --lilac-fg: #c8b3ff;
    --teal-bg: rgba(31, 138, 132, 0.26); --teal-fg: #6fd6cd;
    --butter-bg: rgba(154, 107, 0, 0.26); --butter-fg: #f2c452;
  }
}
/* Dark chosen in the footer, whatever the system says */
:root[data-theme='dark'] {
  --accent: #ff7ea2; --accent-deep: #ff9bb7; --accent-soft: rgba(255, 126, 162, 0.18);
  --accent-glow: rgba(255, 126, 162, 0.4);
  --background: #1b141c; --surface: #261c28; --elevated: #2e2230; --ink: #2e2230;
  --lilac-bg: rgba(106, 75, 176, 0.28); --lilac-fg: #c8b3ff;
  --teal-bg: rgba(31, 138, 132, 0.26); --teal-fg: #6fd6cd;
  --butter-bg: rgba(154, 107, 0, 0.26); --butter-fg: #f2c452;
}


h1, h2, h3, .brand, .stat strong { font-family: var(--display); letter-spacing: -0.02em; }
h1, h2 { font-weight: 800; }
h3 { font-weight: 800; }

/* Flat, like the app: no gradient on the primary button */
.button.primary { background: var(--accent); }
.button.primary:hover { background: var(--accent-deep); }
.button .i { font-size: 20px; }
.float-tag .i { color: var(--accent); }

/* Tones from the app */
.tone-rose { background: var(--accent-soft); } .tone-rose .num, .tone-rose .step-ic, .tone-rose .eyebrow { color: var(--accent-deep); }
.tone-lilac { background: var(--lilac-bg); } .tone-lilac .num, .tone-lilac .step-ic, .tone-lilac .eyebrow { color: var(--lilac-fg); }
.tone-teal { background: var(--teal-bg); } .tone-teal .num, .tone-teal .step-ic, .tone-teal .eyebrow { color: var(--teal-fg); }
.tone-butter { background: var(--butter-bg); } .tone-butter .num, .tone-butter .step-ic, .tone-butter .eyebrow { color: var(--butter-fg); }

/* Real screenshots (1320 × 2868) fill the screen exactly */
.screen.shotted { aspect-ratio: 1320 / 2868; background: #fff6f8; }
.screen.shotted img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature .mock { display: grid; place-items: center; }

.problem .stat small a { color: inherit; }
.problem.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .problem.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .problem.four { grid-template-columns: 1fr; } }

.promise { background: #3b2340; }
.promise li i { background: rgba(255, 126, 162, 0.2); color: #ff9bb7; }
.promise-link { margin-top: 18px; }
.promise-link a { color: #ff9bb7; font-weight: 600; }

.disclaimer { max-width: 640px; margin: 14px auto 0; color: var(--muted); font-size: 14px; }
.nav-links a { white-space: nowrap; }
.problem.facts .stat strong { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; }