:root {
  color-scheme: light;
  /* Palette mirrors the app's "Calm Utility" design system (Cashmere Indigo
     brand + neutral surfaces + restrained green/amber status colors). */
  --paper: #f4f5f6;
  --paper-deep: #e8edf3;
  --white: #ffffff;
  --ink: #212a35;
  --ink-soft: #3b4756;
  --muted: #667085;
  --brand: #3d4a5e;
  --brand-dark: #2c3646;
  --brand-soft: #e8edf3;
  --on-brand: #ffffff;
  --taken: #267a4b;
  --taken-soft: #e5f6ec;
  --due: #985b00;
  --due-soft: #fff0d6;
  --header-bg: rgba(244, 245, 246, 0.88);
  --hairline: rgba(33, 42, 53, 0.08);
  --hairline-strong: rgba(33, 42, 53, 0.1);
  --nav-hover: rgba(255, 255, 255, 0.7);
  --phone-outline: #2c3646;
  --scrollbar-thumb: rgba(33, 42, 53, 0.16);
  --orbit-brand: rgba(61, 74, 94, 0.16);
  --orbit-taken: rgba(38, 122, 75, 0.12);
  --shadow: 0 24px 64px rgba(33, 42, 53, 0.10), 0 6px 18px rgba(33, 42, 53, 0.06);
  --shadow-soft: 0 10px 30px rgba(33, 42, 53, 0.07), 0 2px 8px rgba(33, 42, 53, 0.04);
  --content: 1180px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  overflow-x: clip;
}

body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
img { display: block; max-width: 100%; }

.container { width: min(calc(100% - 40px), var(--content)); margin-inline: auto; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--hairline);
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.nav { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 0.95rem; font-weight: 760; letter-spacing: -0.015em; text-decoration: none; }
.brand img { width: 36px; height: 36px; border-radius: 10px; box-shadow: 0 4px 14px rgba(33, 42, 53, 0.16); outline: 1px solid rgba(0, 0, 0, 0.08); }

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  min-height: 42px; display: inline-flex; align-items: center; padding: 0 13px;
  border-radius: 12px; color: var(--muted); font-size: 0.88rem; font-weight: 650;
  text-decoration: none; transition: color 180ms ease, background-color 180ms ease;
}
.nav-links a:hover { color: var(--ink); background: var(--nav-hover); }

.nav-download {
  margin-left: 7px; background: var(--brand); color: var(--on-brand) !important;
  padding: 0 18px !important; border-radius: 12px;
}
.nav-download:hover { background: var(--brand-dark); }
.nav-download.is-disabled { background: var(--paper-deep); color: var(--muted) !important; cursor: default; }
.nav-download.is-disabled:hover { background: var(--paper-deep); }

/* Theme toggle — only useful with JS, so it stays hidden until script.js runs */
.theme-toggle { display: none; }
.js .theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-left: 4px; padding: 0;
  border: none; border-radius: 12px; background: transparent; color: var(--muted);
  cursor: pointer; transition: color 180ms ease, background-color 180ms ease;
}
.theme-toggle:hover { color: var(--ink); background: var(--nav-hover); }
.theme-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.theme-toggle svg { width: 19px; height: 19px; display: block; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

/* Buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; border-radius: 16px; font-weight: 700; font-size: 0.98rem;
  text-decoration: none; border: none; cursor: pointer; transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}
.button-primary { background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-soft); }
.button-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow); background: var(--brand-dark); }
.button-light { background: var(--white); color: var(--brand); }
.button-light:hover { transform: translateY(-2px); }
.button-disabled { background: var(--paper-deep); color: var(--muted); cursor: default; box-shadow: none; }
.button-disabled:hover { transform: none; box-shadow: none; background: var(--paper-deep); }

.store-kicker { display: block; font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.75; }
.store-name { display: block; font-size: 1.05rem; font-weight: 780; letter-spacing: -0.01em; margin-top: 1px; }

/* Hero */
.hero { padding: 64px 0 56px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }

.eyebrow { display: inline-block; font-size: 0.8rem; font-weight: 700; color: var(--brand); letter-spacing: 0.02em; margin: 0 0 14px; }
.hero-copy h1 { font-size: clamp(2.1rem, 4vw, 3.1rem); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 18px; }
.hero-lede { font-size: 1.08rem; color: var(--muted); max-width: 46ch; margin: 0 0 30px; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 12px; }
.store-note { font-size: 0.85rem; color: var(--muted); margin: 0 0 24px; }

.hero-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 0; margin: 0; }
.hero-trust li { font-size: 0.85rem; font-weight: 650; color: var(--ink-soft); padding-left: 18px; position: relative; }
.hero-trust li::before { content: ""; position: absolute; left: 0; top: 50%; translate: 0 -50%; width: 7px; height: 7px; border-radius: 50%; background: var(--taken); }

.hero-visual { position: relative; display: flex; justify-content: center; }
.hero-orbit {
  position: absolute; inset: -6% 8%; border-radius: 48% 52% 55% 45% / 55% 45% 55% 45%;
  background: radial-gradient(circle at 30% 20%, var(--orbit-brand), transparent 60%),
              radial-gradient(circle at 75% 80%, var(--orbit-taken), transparent 55%);
  filter: blur(2px);
}
.hero-phone {
  position: relative; width: min(320px, 78vw); height: auto; border-radius: 34px; box-shadow: var(--shadow);
  outline: 8px solid var(--phone-outline); outline-offset: -1px;
}

/* Proof strip */
.proof-strip { padding: 8px 0 48px; }
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.proof-item {
  background: var(--white); border-radius: 18px; padding: 20px 20px 22px; box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column; gap: 6px;
}
.proof-item strong { font-size: 1rem; letter-spacing: -0.01em; }
.proof-item span { font-size: 0.86rem; color: var(--muted); }

/* Sections */
.section { padding: 76px 0; }
.section-heading { max-width: 640px; margin: 0 0 44px; }
.section-heading h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -0.015em; margin: 0 0 14px; }
.section-heading p { color: var(--muted); font-size: 1.02rem; margin: 0; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-card {
  background: var(--white); border-radius: 20px; padding: 28px 26px; box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column; gap: 10px;
}
.feature-number { font-size: 0.78rem; font-weight: 800; color: var(--brand); letter-spacing: 0.04em; }
.feature-card h3 { margin: 0; font-size: 1.08rem; letter-spacing: -0.01em; }
.feature-card p { margin: 0; color: var(--muted); font-size: 0.94rem; }

/* Gallery */
.gallery-section { padding-top: 0; }
.gallery-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 32px; flex-wrap: wrap; }
.gallery-heading h2 { margin: 0 0 8px; font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -0.015em; }
.gallery-heading p { margin: 0; color: var(--muted); max-width: 36ch; }

/* The panels are two different shapes — the lead one is a wide composition,
   the rest are single portrait screens. Sizing by width would leave them
   ragged along the bottom, so fix the height instead and let each card's
   width follow its own aspect ratio. */
.story-gallery {
  --story-card-height: 589px;
  display: flex; align-items: flex-start; gap: 20px; overflow-x: auto; padding: 6px 20px 24px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.story-gallery::-webkit-scrollbar { height: 8px; }
.story-gallery::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 8px; }

.story-card {
  flex: 0 0 auto; height: var(--story-card-height); width: auto; margin: 0; scroll-snap-align: start;
  border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-soft); background: var(--white);
}
.story-card img { height: 100%; width: auto; display: block; }

/* Privacy */
.privacy-section { background: var(--white); }
.privacy-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.privacy-copy h2 { font-size: clamp(1.6rem, 2.6vw, 2.15rem); letter-spacing: -0.015em; margin: 0 0 16px; }
.privacy-copy p { color: var(--muted); max-width: 50ch; margin: 0 0 26px; }

.assurance-list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; margin-bottom: 28px; }
.assurance-list div { display: flex; flex-direction: column; gap: 4px; }
.assurance-list strong { font-size: 0.98rem; }
.assurance-list span { font-size: 0.86rem; color: var(--muted); }

.text-link { font-weight: 700; color: var(--brand); text-decoration: none; }
.text-link:hover { text-decoration: underline; }

.privacy-phone-wrap { display: flex; justify-content: center; }
.privacy-phone { width: min(300px, 74vw); height: auto; border-radius: 32px; box-shadow: var(--shadow); outline: 8px solid var(--phone-outline); outline-offset: -1px; }

/* CTA */
.cta-section { padding: 20px 0 76px; }
.cta-card {
  background: var(--brand-soft); color: var(--ink); border-radius: 28px; padding: 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.cta-card .eyebrow { color: var(--brand); }
.cta-card h2 { margin: 0 0 10px; font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.015em; }
.cta-card p { margin: 0; color: var(--ink-soft); max-width: 44ch; }

/* Support */
.support-section { background: var(--white); }
.support-inline-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 24px; align-items: start; }
.support-card { background: var(--paper); border-radius: 20px; padding: 28px; }
.support-card h3 { margin: 8px 0 12px; font-size: 1.15rem; }
.support-card p { color: var(--muted); font-size: 0.94rem; }
.support-email { font-weight: 650; color: var(--ink); margin-top: 14px; }

.faq details { border-top: 1px solid var(--hairline-strong); padding: 14px 0; }
.faq details:first-of-type { border-top: none; }
.faq summary { cursor: pointer; font-weight: 660; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.2rem; color: var(--muted); margin-left: 12px; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 12px 0 0; }

/* Footer */
.site-footer { padding: 48px 0 32px; border-top: 1px solid var(--hairline); }
.footer-grid { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 28px; }
.footer-copy { color: var(--muted); max-width: 40ch; margin: 12px 0 0; font-size: 0.92rem; }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; align-self: center; }
.footer-links a { color: var(--muted); text-decoration: none; font-size: 0.9rem; font-weight: 620; }
.footer-links a:hover { color: var(--ink); }
.copyright { color: var(--muted); font-size: 0.82rem; margin: 0; }

/* Legal pages */
.legal-hero { padding: 56px 0 28px; }
.legal-hero h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); letter-spacing: -0.02em; margin: 0 0 12px; }
.legal-hero p { color: var(--muted); max-width: 60ch; margin: 0 0 8px; }
.legal-meta { font-size: 0.85rem; color: var(--muted); }

.legal-layout { display: grid; grid-template-columns: 220px 1fr; gap: 48px; padding-bottom: 80px; align-items: start; }
.legal-toc { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 4px; }
.legal-toc strong { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 8px; }
.legal-toc a { font-size: 0.9rem; color: var(--muted); text-decoration: none; padding: 5px 0; }
.legal-toc a:hover { color: var(--ink); }

.legal-content { background: var(--white); border-radius: 24px; padding: 44px 48px; box-shadow: var(--shadow-soft); }
.legal-content h2 { font-size: 1.2rem; letter-spacing: -0.01em; margin: 0 0 12px; }
.legal-content h3 { font-size: 1rem; margin: 20px 0 8px; }
.legal-content section { margin-bottom: 32px; }
.legal-content section:last-child { margin-bottom: 0; }
.legal-content p, .legal-content li { color: var(--ink-soft); font-size: 0.96rem; }
.legal-content ul { padding-left: 22px; }
.legal-content a { color: var(--brand); font-weight: 650; }
.legal-callout {
  background: var(--due-soft); border-left: 3px solid var(--due); border-radius: 10px;
  padding: 16px 18px; font-size: 0.95rem;
}
.legal-callout strong { color: var(--ink); }

/* 404 */
.not-found { padding: 120px 0; text-align: center; }
.not-found h1 { font-size: 2.6rem; margin-bottom: 12px; }
.not-found p { color: var(--muted); margin-bottom: 26px; }

@media (max-width: 880px) {
  .story-gallery { --story-card-height: 520px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { order: -1; }
  .proof-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: 1fr; }
  .privacy-grid { grid-template-columns: 1fr; }
  .privacy-phone-wrap { order: -1; }
  .support-inline-grid { grid-template-columns: 1fr; }
  .legal-layout { grid-template-columns: 1fr; }
  .legal-toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 10px 16px; }
  .legal-toc strong { display: none; }
  .legal-content { padding: 32px 24px; }
  .cta-card { flex-direction: column; align-items: flex-start; }
  .nav-links a:not(.nav-download) { display: none; }
}

/* Dark theme.
   Every dark value lives in variables, so it can be applied two ways:
   1. :root[data-theme="dark"] — an explicit choice from the header toggle.
   2. The OS preference, but only when the visitor has not explicitly
      chosen light (so the toggle can win in both directions).
   The toggle's inline head script always stamps data-theme, so path 2
   only matters when JavaScript is unavailable. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #181a1d;
  --paper-deep: #303846;
  --white: #24272b;
  --ink: #eef1f5;
  --ink-soft: #cdd4dd;
  --muted: #93a0b2;
  --brand: #bbc7db;
  --brand-dark: #d6dfec;
  --brand-soft: #303846;
  --on-brand: #181a1d;
  --taken: #69d69a;
  --taken-soft: rgba(105, 214, 154, 0.14);
  --due: #ffba52;
  --due-soft: rgba(255, 186, 82, 0.14);
  --header-bg: rgba(24, 26, 29, 0.86);
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.1);
  --nav-hover: rgba(255, 255, 255, 0.07);
  --phone-outline: rgba(255, 255, 255, 0.16);
  --scrollbar-thumb: rgba(255, 255, 255, 0.18);
  --orbit-brand: rgba(187, 199, 219, 0.12);
  --orbit-taken: rgba(105, 214, 154, 0.10);
  --shadow: 0 24px 64px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.26);
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.16);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #181a1d;
    --paper-deep: #303846;
    --white: #24272b;
    --ink: #eef1f5;
    --ink-soft: #cdd4dd;
    --muted: #93a0b2;
    --brand: #bbc7db;
    --brand-dark: #d6dfec;
    --brand-soft: #303846;
    --on-brand: #181a1d;
    --taken: #69d69a;
    --taken-soft: rgba(105, 214, 154, 0.14);
    --due: #ffba52;
    --due-soft: rgba(255, 186, 82, 0.14);
    --header-bg: rgba(24, 26, 29, 0.86);
    --hairline: rgba(255, 255, 255, 0.08);
    --hairline-strong: rgba(255, 255, 255, 0.1);
    --nav-hover: rgba(255, 255, 255, 0.07);
    --phone-outline: rgba(255, 255, 255, 0.16);
    --scrollbar-thumb: rgba(255, 255, 255, 0.18);
    --orbit-brand: rgba(187, 199, 219, 0.12);
    --orbit-taken: rgba(105, 214, 154, 0.10);
    --shadow: 0 24px 64px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.26);
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.16);
  }
}

/* The disabled "Coming soon" states must not inherit the light-on-dark
   brand treatment in either theme. */
.nav-download.is-disabled,
.button-disabled { background: var(--paper-deep); color: var(--muted) !important; }