/* Stars of Bedtime Stories — shared theme
   Palette lifted from the iOS app (AppColors.swift + launch/shell/end-card).
   Reusable bits (tokens, header, footer, button, prose) are shared by every
   page; the LANDING section near the bottom styles index.html only. */

:root {
  --bg-top: #140f26;
  --bg-mid: #1a142e;
  --bg-bottom: #241740;

  --amber: #d9a666;
  --brass: #c79457;
  --gold: #ffd666;
  --lavender: #d1bdff;

  --text: rgba(255, 255, 255, 0.95);
  --text-muted: rgba(255, 255, 255, 0.7);
  --text-faint: rgba(255, 255, 255, 0.5);

  --card: rgba(255, 255, 255, 0.05);
  --card-2: rgba(255, 255, 255, 0.08);
  --card-border: rgba(255, 255, 255, 0.12);
  --violet-panel: rgba(98, 74, 158, 0.22);

  --font: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont,
    "Segoe UI", system-ui, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
    "Times New Roman", serif;

  --content-width: 680px;
  --wide-width: 1160px;
}

/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  color: var(--text);
  line-height: 1.65;
  font-size: 17px;
  letter-spacing: 0.1px;
  /* Base middle gradient — tuned to the inner edges of the two artwork bands
     (top image bottom ≈ #24134b, bottom image top ≈ #110a44) so they blend
     seamlessly. A few faint stars keep the mid band from feeling empty. */
  background-color: #1b1146;
  background-image:
    radial-gradient(1.5px 1.5px at 30% 47%, rgba(255, 255, 255, 0.22), transparent),
    radial-gradient(1px 1px at 68% 53%, rgba(255, 214, 102, 0.32), transparent),
    radial-gradient(1px 1px at 50% 44%, rgba(255, 255, 255, 0.18), transparent),
    radial-gradient(1px 1px at 80% 46%, rgba(209, 189, 255, 0.3), transparent),
    linear-gradient(180deg, #170d3c 0%, #211147 32%, #1c1146 50%, #170f40 68%, #110a44 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Artwork bands: night sky (with moon + stars) fixed to the top, glowing
   clouds fixed to the bottom. Masks fade each inner edge into the base
   gradient so there's no seam at any viewport height. Shown on every page. */
body::before,
body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

body::before {
  top: 0;
  height: 46vh;
  background-image: url(/assets/bg-top.webp);
  background-position: top center;
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
}

body::after {
  bottom: 0;
  height: 44vh;
  background-image: url(/assets/bg-bottom.webp);
  background-position: bottom center;
  -webkit-mask-image: linear-gradient(to top, #000 55%, transparent 100%);
  mask-image: linear-gradient(to top, #000 55%, transparent 100%);
}

/* Layout */
.container {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 24px;
}

.container--wide {
  max-width: var(--wide-width);
}

main {
  flex: 1 0 auto;
  width: 100%;
}

/* ===== Header (reusable, sticky) ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(18, 13, 38, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 26px;
  flex-wrap: wrap;
  padding-top: 16px;
  padding-bottom: 16px;
}

/* Keep the nav tucked next to the logo; push the CTA to the far right. */
.site-header .appstore-btn {
  margin-left: auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text);
}

.brand img {
  height: 56px;
  width: auto;
  display: block;
}

.brand:hover {
  color: #fff;
}

.brand--sm img {
  height: 46px;
}

.site-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 22px;
}

.site-nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
}

.site-nav a:hover {
  color: #fff;
}

/* ===== App Store button (reusable) ===== */
.appstore-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #211733;
  background: linear-gradient(180deg, var(--gold) 0%, var(--amber) 100%);
  font-weight: 700;
  font-size: 17px;
  padding: 14px 26px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(255, 214, 102, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.appstore-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(255, 214, 102, 0.28);
}

.appstore-btn svg {
  width: 26px;
  height: 26px;
}

.appstore-btn--sm {
  font-size: 15px;
  padding: 11px 18px;
}

.appstore-btn--sm svg {
  width: 17px;
  height: 17px;
}

/* ===== Prose (legal/support pages) ===== */
.prose {
  padding: 16px 0 56px;
  overflow-wrap: anywhere;
}

.prose h1 {
  font-size: clamp(28px, 5vw, 38px);
  font-weight: 700;
  letter-spacing: -0.3px;
  margin-bottom: 8px;
}

.prose .updated {
  color: var(--text-faint);
  font-size: 15px;
  margin-bottom: 32px;
}

.prose h2 {
  font-size: 22px;
  font-weight: 600;
  color: var(--lavender);
  margin: 34px 0 12px;
}

.prose h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 24px 0 10px;
}

.prose p,
.prose li {
  color: var(--text-muted);
}

.prose p {
  margin-bottom: 16px;
}

.prose ul,
.prose ol {
  margin: 0 0 16px 22px;
}

.prose li {
  margin-bottom: 8px;
}

.prose a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose a:hover {
  color: var(--amber);
}

.prose strong {
  color: var(--text);
}

/* ===== Support page ===== */
.support {
  text-align: center;
  padding: 56px 0 80px;
}

.support-title {
  font-size: clamp(40px, 8vw, 72px);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.04;
  margin-bottom: 22px;
}

.support-sub {
  color: var(--text-muted);
  font-size: clamp(17px, 2.4vw, 21px);
  line-height: 1.5;
  margin-bottom: 48px;
}

.support-card {
  max-width: 920px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--card-border);
  border-radius: 24px;
  padding: 48px 30px;
}

.support-icon {
  width: 84px;
  height: 84px;
  margin: 0 auto 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--card-border);
  color: var(--gold);
}

.support-icon svg {
  width: 42px;
  height: 42px;
}

.support-card-label {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 14px;
}

.support-email {
  display: inline-block;
  color: var(--gold);
  font-size: clamp(18px, 3.6vw, 33px);
  font-weight: 800;
  letter-spacing: -0.5px;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.support-email:hover {
  color: var(--amber);
}

/* ============================================================
   LANDING PAGE (index.html only)
   ============================================================ */

/* Hero */
.hero {
  padding: 24px 0 40px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.12fr);
  gap: 40px;
  align-items: center;
}

.hero-copy h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 20px;
}

.hero-copy h1 .accent {
  color: var(--gold);
}

.hero-copy .lede {
  font-size: 18px;
  color: var(--text-muted);
  max-width: 520px;
  margin-bottom: 30px;
}

.hero-copy .lede strong {
  color: var(--gold);
  font-weight: 600;
}

.hero-cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  max-width: 320px;
}

/* Both buttons share the same size; the Android one is just disabled.
   Left-align content so the two icons line up vertically. */
.hero-cta .appstore-btn {
  justify-content: flex-start;
}

.appstore-btn--disabled {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  box-shadow: none;
  cursor: default;
}

.appstore-btn--disabled:hover {
  transform: none;
  box-shadow: none;
}

.appstore-btn--disabled svg {
  opacity: 0.85;
}

.hero-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--text-faint);
  font-size: 14px;
  margin-top: 18px;
}

.hero-note svg {
  width: 14px;
  height: 14px;
}

/* Hero visual: phone mockup + floating photo cards */
.hero-visual {
  position: relative;
}

/* iPad + iPhone shown bottom-aligned at their real relative proportions.
   Widths are in the devices' true physical ratio (iPad ~2.29× the iPhone);
   aspect-ratio gives each its own height, so the iPhone stands ~65% as tall
   as the iPad — just like in real life. Percent widths keep it responsive. */
.devices {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
}

.device {
  position: relative;
  background: #0c0918;
  border: 2px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  line-height: 0;
}

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

/* iPhone sits in front, slightly overlapping the iPad to its right. */
.device--iphone {
  width: 27.5%;
  aspect-ratio: 152 / 320;
  border-radius: 26px;
  padding: 6px;
  z-index: 2;
  margin-right: -5%;
}

.device--ipad {
  width: 63%;
  aspect-ratio: 348 / 489;
  border-radius: 20px;
  padding: 8px;
  z-index: 1;
}

/* Sections */
.section {
  padding: 38px 0;
}

.section-title {
  font-family: var(--font-display);
  text-align: center;
  font-size: clamp(26px, 3.5vw, 34px);
  font-weight: 700;
  margin-bottom: 36px;
}

.section-title .spark {
  color: var(--gold);
  margin: 0 14px;
  font-size: 0.7em;
  vertical-align: middle;
}

/* How it works */
.how-visual {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
  margin: -8px auto 40px;
  /* Fade the bottom of the image into the background. */
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 98%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 98%);
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.step-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 25%, rgba(255, 214, 102, 0.18), transparent 60%),
    var(--violet-panel);
  border: 1px solid var(--card-border);
  color: var(--gold);
}

.step-icon svg {
  width: 30px;
  height: 30px;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold);
  color: #211733;
  font-size: 12px;
  font-weight: 700;
  margin-right: 8px;
  vertical-align: 2px;
}

.step h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 6px;
}

.step p {
  color: var(--text-muted);
  font-size: 15px;
}

/* Feature highlights ("sells") */
.sells {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.sell {
  background: var(--violet-panel);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 30px 26px;
  text-align: center;
}

.sell-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 18px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 25%, rgba(255, 214, 102, 0.18), transparent 60%),
    rgba(255, 255, 255, 0.05);
  border: 1px solid var(--card-border);
  color: var(--gold);
}

.sell-icon svg {
  width: 28px;
  height: 28px;
}

.sell h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 9px;
}

.sell p {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.5;
}

/* ===== Footer (reusable) ===== */
.site-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--card-border);
  margin-top: 40px;
  padding: 22px 0 26px;
  background: rgba(18, 13, 38, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.footer-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 36px;
}

.footer-grid nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}

.footer-grid nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 15px;
}

.footer-grid nav a:hover {
  color: #fff;
}

.footer-grid .meta {
  color: var(--text-faint);
  font-size: 14px;
  text-align: right;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.footer-grid .meta a {
  color: var(--text-faint);
}

/* ===== Responsive ===== */
@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    text-align: center;
  }
  .hero-copy .lede {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-cta {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-visual {
    min-height: 0;
    margin-top: 24px;
  }
  .steps {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin: 0 auto;
    gap: 22px;
  }
  .sells {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin: 0 auto;
  }
}

@media (max-width: 620px) {
  .site-header .container {
    justify-content: center;
    gap: 12px 16px;
  }
  .site-header .appstore-btn {
    margin-left: 0;
  }
  .site-header .brand img {
    height: 44px;
  }
  .appstore-btn--sm {
    font-size: 13px;
    padding: 9px 14px;
  }
  .site-nav {
    order: 3;
    width: 100%;
    justify-content: center;
    gap: 10px 18px;
    font-size: 15px;
  }
  .footer-grid {
    justify-content: center;
    text-align: center;
  }
  .footer-grid .meta {
    text-align: center;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 16px;
  }
}