:root {
  color-scheme: light dark;
  --accent: #5c50f2;
  --accent-strong: #4639dd;
  --accent-soft: #eeecff;
  --background: #f7f7fb;
  --surface: #ffffff;
  --surface-subtle: #f0eff7;
  --text: #15141a;
  --muted: #676572;
  --border: rgba(26, 25, 37, 0.11);
  --shadow: 0 20px 50px rgba(30, 26, 73, 0.12);
  --radius-lg: 32px;
  --radius-md: 24px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #8e87ff;
    --accent-strong: #a09bff;
    --accent-soft: #262348;
    --background: #0a0a0e;
    --surface: #16161d;
    --surface-subtle: #202027;
    --text: #f8f8fc;
    --muted: #adaab7;
    --border: rgba(255, 255, 255, 0.10);
    --shadow: 0 24px 64px rgba(0, 0, 0, 0.34);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 77% -12%, rgba(112, 95, 255, 0.20), transparent 34rem),
    var(--background);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", sans-serif;
  line-height: 1.5;
}

a { color: inherit; }
.site-header, main, .site-footer { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }

.site-header { min-height: 84px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-size: 1.05rem; font-weight: 760; letter-spacing: -0.03em; text-decoration: none; }
.brand-icon { width: 32px; height: 32px; display: block; flex: 0 0 auto; border-radius: 10px; box-shadow: 0 8px 18px rgba(79, 63, 224, 0.20); }
.site-nav, .footer-links { display: flex; flex-wrap: wrap; gap: 22px; }
.site-nav a, .footer-links a { color: var(--muted); font-size: 0.92rem; font-weight: 590; text-decoration: none; }
.site-nav a:hover, .site-nav a:focus-visible, .footer-links a:hover, .footer-links a:focus-visible, .text-action:hover, .text-action:focus-visible { color: var(--accent); }

.hero { min-height: 640px; display: grid; grid-template-columns: minmax(0, 0.98fr) minmax(360px, 0.82fr); align-items: center; gap: clamp(36px, 8vw, 108px); padding: clamp(52px, 9vw, 116px) clamp(24px, 6vw, 78px); border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--surface) 76%, var(--accent-soft))); box-shadow: var(--shadow); overflow: hidden; }
.eyebrow { margin: 0 0 16px; color: var(--accent); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -0.052em; line-height: 1.04; }
h1 { max-width: 640px; margin-bottom: 24px; font-size: clamp(2.8rem, 4.9vw, 4.5rem); }
h2 { max-width: 700px; margin-bottom: 20px; font-size: clamp(2.1rem, 4vw, 3.75rem); }
h3 { margin-bottom: 12px; font-size: 1.35rem; }
.hero-lede, .export-copy > p, .privacy-copy p { max-width: 590px; color: var(--muted); font-size: clamp(1.06rem, 1.5vw, 1.22rem); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 34px; }
.app-store-button { min-width: 164px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 17px 11px; border-radius: 13px; color: #fff; background: #16161a; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); }
.app-store-button.unavailable { opacity: 0.76; cursor: default; }
.app-store-glyph { font-size: 1.85rem; line-height: 1; }
.app-store-button small, .app-store-button strong { display: block; line-height: 1.05; }
.app-store-button small { font-size: 0.58rem; letter-spacing: 0.02em; }
.app-store-button strong { margin-top: 2px; font-size: 1.14rem; font-weight: 650; }
.text-action { color: var(--accent); font-size: 0.98rem; font-weight: 720; text-underline-offset: 4px; }
.availability-note { margin: 16px 0 0; color: var(--muted); font-size: 0.87rem; }

.hero-visual { --hero-screen-height: 540px; min-height: 540px; display: grid; place-items: center; margin: 0; }
.hero-screen { width: auto; height: var(--hero-screen-height); max-width: 100%; display: block; aspect-ratio: 1260 / 2736; object-fit: contain; border-radius: 30px; box-shadow: 0 32px 58px rgba(32, 26, 87, 0.30); transform: none; }

.section { padding: 0 0 122px; }
#how-it-works { padding-top: 88px; padding-bottom: 100px; }
.section-heading { display: block; margin-bottom: 38px; }
.section-heading h2 { max-width: 660px; }
.feature-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr); align-items: stretch; gap: clamp(26px, 4vw, 54px); }
.feature-grid { display: grid; grid-template-columns: 1fr; align-content: center; gap: 16px; }
.feature-card { min-height: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: start; gap: 18px; padding: 25px 26px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 10px 28px rgba(33, 29, 72, 0.045); }
.feature-card p { margin: 0; color: var(--muted); }
.feature-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; font-size: 0.68rem; font-weight: 820; letter-spacing: 0.02em; }
.feature-icon-purple { color: #5c50f2; background: #e8e5ff; }.feature-icon-blue { color: #267bbb; background: #e0f1ff; }.feature-icon-green { color: #178151; background: #dff7e9; }
.feature-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; }
.feature-gallery figure { height: 372px; display: grid; place-items: center; margin: 0; padding: 16px; overflow: visible; border-radius: var(--radius-md); background: linear-gradient(180deg, #eef0fa, #e8eaf5); box-shadow: 0 10px 28px rgba(33, 29, 72, 0.08); }
.feature-gallery img { width: auto; height: 100%; max-width: 100%; display: block; object-fit: contain; border-radius: 18px; box-shadow: 0 12px 28px rgba(33, 29, 72, 0.14); }

.privacy-band { display: grid; grid-template-columns: minmax(0, 0.96fr) minmax(0, 0.85fr); gap: clamp(42px, 10vw, 138px); margin-bottom: 140px; padding: clamp(38px, 6vw, 74px); border-radius: var(--radius-lg); color: #fff; background: linear-gradient(135deg, #302985, #5d50ee 58%, #7d73ff); box-shadow: 0 24px 60px rgba(63, 51, 192, 0.25); }
.privacy-band .eyebrow { color: #d8d4ff; }.privacy-band h2 { margin: 0; }.privacy-copy p { color: rgba(255, 255, 255, 0.82); }.privacy-copy .text-action { color: #fff; }

.export-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 0.7fr); align-items: center; gap: clamp(44px, 9vw, 120px); }
.export-copy { max-width: 610px; }.disclaimer { margin-top: 28px !important; font-size: 0.9rem !important; }
.export-preview { min-height: 510px; display: grid; place-items: center; margin: 0; }
.export-preview img { width: auto; height: 510px; max-width: 100%; display: block; aspect-ratio: 1260 / 2736; object-fit: contain; border-radius: 28px; box-shadow: 0 24px 48px rgba(31, 25, 76, 0.20); transform: none; }
.site-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 0 0 42px; color: var(--muted); font-size: 0.84rem; }.site-footer > p { justify-self: end; margin: 0; }.footer-brand { justify-self: start; }

/* Legal and support pages share this stylesheet with the landing page. */
main > header,
main > article,
main > footer {
  width: min(780px, 100%);
  margin-inline: auto;
}

main > header,
main > article {
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

main > header { padding: clamp(24px, 5vw, 44px); }
main > article { margin-top: 20px; padding: clamp(24px, 5vw, 44px); }
main > header h1 { margin-bottom: 12px; font-size: clamp(2rem, 8vw, 3.5rem); }
main > article h2 { margin: 2rem 0 0.5rem; font-size: 1.25rem; }
main > header .muted { color: var(--muted); }
main > header nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
main > header nav a { display: inline-flex; padding: 9px 14px; border: 1px solid var(--border); border-radius: 999px; color: var(--accent); font-weight: 650; text-decoration: none; }
main > article p,
main > article ul { margin: 0.65rem 0; }
main > article ul { padding-left: 1.25rem; }
main > footer { margin-top: 24px; color: var(--muted); font-size: 0.92rem; text-align: center; }

@media (max-width: 850px) {
  .hero { grid-template-columns: 1fr; text-align: center; }.hero-copy { display: grid; justify-items: center; }.hero-actions { justify-content: center; }.hero-visual { --hero-screen-height: 460px; min-height: 460px; }
  #how-it-works { padding-top: 72px; padding-bottom: 88px; }.privacy-band, .export-section, .feature-layout { grid-template-columns: 1fr; }.feature-gallery { grid-template-columns: repeat(2, 1fr); }.feature-gallery figure { height: 350px; padding: 16px; }.privacy-band { gap: 26px; margin-bottom: 110px; }.export-preview { min-height: 430px; }.export-preview img { height: 430px; }
  .site-footer { grid-template-columns: 1fr; justify-items: center; text-align: center; }.site-footer > p, .footer-brand { justify-self: center; }
}

@media (max-width: 560px) {
  .site-header, main, .site-footer { width: min(100% - 32px, 1160px); }.site-header { min-height: 72px; }.site-nav { gap: 13px; }.site-nav a { font-size: 0.8rem; }
  .hero { min-height: 0; padding: 56px 20px 42px; border-radius: 25px; }.hero-visual { --hero-screen-height: 390px; min-height: 390px; }h1 { font-size: clamp(2.7rem, 12vw, 3.6rem); }.hero-lede { font-size: 1.03rem; }
  .feature-gallery { grid-template-columns: 1fr; }.feature-gallery figure { height: 400px; padding: 18px; }.feature-card { padding: 22px; }.export-preview { min-height: 390px; }.export-preview img { height: 390px; }
  .section { padding-bottom: 78px; }#how-it-works { padding-top: 58px; padding-bottom: 72px; }.privacy-band { margin-bottom: 96px; border-radius: 25px; }.export-section { padding-bottom: 78px; }.site-footer { padding-bottom: 30px; }.footer-links { justify-content: center; gap: 14px; }
}

/* Store artwork includes its own phone frame and headline. Keep the full image visible. */
.app-store-button { text-decoration: none; }
.hero-screen, .export-preview img { border-radius: 18px; }
.feature-gallery figure { height: auto; padding: 0; align-self: center; }
.feature-gallery img { width: 100%; height: auto; }
.privacy-preview { margin: 28px 0 0; }
.privacy-preview img { display: block; width: min(100%, 240px); height: auto; border-radius: 18px; box-shadow: var(--shadow); }
.privacy-copy { align-self: center; }
@media (max-width: 850px) {
  .privacy-preview img { margin-inline: auto; }
}