/* StoryTime app palette: the same deep navy sky, elevated blue surfaces and soft gold accent. */
:root {
  --ink: #f7f8ff;
  --muted: #b8c8e8;
  --cream: #05091a;
  --lavender: #081631;
  --indigo: #081631;
  --soft: #0a1935;
  --gold: #ffd166;
  --line: rgba(190, 214, 255, .16);
}

body {
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
  background:
    radial-gradient(circle at 78% 16%, rgba(22, 54, 106, .30), transparent 28rem),
    radial-gradient(circle at 14% 43%, rgba(30, 62, 125, .20), transparent 23rem),
    #05091a;
}

h1, h2, h3, .brand, .feature-overlay b {
  font-family: ui-rounded, "SF Pro Rounded", Comfortaa, "Avenir Next Rounded", -apple-system, sans-serif;
}

.sky {
  height: 740px;
  background:
    radial-gradient(circle at 74% 27%, rgba(37, 88, 163, .27), transparent 20%),
    radial-gradient(circle at 15% 21%, rgba(24, 52, 111, .30), transparent 26%),
    linear-gradient(142deg, #05091a 0%, #08112a 48%, #0d2450 100%);
}

.glow-one { background: rgba(255, 209, 102, .08); }
.glow-two { background: rgba(69, 127, 221, .14); }
.star { background: #fff7d1; box-shadow: 0 0 11px 2px rgba(255, 230, 154, .42); }
.main-nav .nav-cta { background: var(--gold); color: #241704; }
.button-primary { background: linear-gradient(135deg, #ffe39a, #ffd166); color: #241704; }
.button-light { background: #ffe39a; color: #241704; }
.hero-text, .availability { color: #d2dcef; }
.phone { border-color: #dce6f6; background: #dce6f6; box-shadow: 0 28px 42px rgba(0, 0, 0, .46), inset 0 0 0 2px rgba(255, 255, 255, .38); }
.speaker { background: #dce6f6; }
.phone-screen { background: linear-gradient(165deg, #16366a, #081631 62%, #05091a); }
.floating-card { background: rgba(232, 241, 255, .96); color: #071632; border-color: rgba(255,255,255,.72); }

.intro-strip {
  color: #f7f8ff;
  background: linear-gradient(90deg, #0b1c3d, #102852, #0b1c3d);
  border-top: 1px solid rgba(203, 220, 255, .10);
  border-bottom: 1px solid rgba(203, 220, 255, .10);
}
.intro-strip strong { color: #ffe39a; }
.sparkle { color: var(--gold); }

.reason-section, .feature-section { background: transparent; }
.section-intro h2, .how-copy h2, .feature-copy h2 { color: #f7f8ff; }
.section-intro>p:last-child, .how-copy>p:not(.eyebrow), .feature-copy>p:not(.eyebrow), .feature-copy li p, .steps p { color: var(--muted); }
.eyebrow-dark, .how-copy>.eyebrow, .feature-copy .eyebrow { color: #ffe39a; }

.benefit-card {
  background: linear-gradient(145deg, rgba(13, 36, 80, .94), rgba(8, 22, 49, .94)) !important;
  border: 1px solid rgba(181, 211, 255, .15);
  box-shadow: 0 16px 35px rgba(0, 0, 0, .17);
}
.benefit-card h3 { color: #f7f8ff; }
.benefit-card p { color: #b8c8e8; }
.card-icon { background: rgba(255, 209, 102, .15); color: #ffe39a !important; }

.how-section {
  background:
    linear-gradient(rgba(5, 9, 26, .42), rgba(5, 9, 26, .42)),
    radial-gradient(circle at 88% 18%, rgba(30, 73, 145, .25), transparent 25rem),
    #081631;
  border-block: 1px solid rgba(182, 214, 255, .10);
}
.steps li { border-color: rgba(181, 211, 255, .14); }
.steps li>span { color: #ffe39a; }
.steps h3 { color: #f7f8ff; }
.story-card { box-shadow: 0 25px 41px rgba(0, 0, 0, .36); border: 1px solid rgba(238, 245, 255, .18); }

.feature-section { padding-top: 134px; }
.feature-visual {
  background: #16366a;
  border-color: rgba(171, 207, 255, .42);
  box-shadow: 0 25px 48px rgba(0, 0, 0, .27);
}
.feature-cover { object-position: 51% center; }
.feature-visual::after { background: linear-gradient(0deg, rgba(3, 9, 26, .88), rgba(3, 9, 26, .05) 67%); }
.feature-copy li>span { background: rgba(255, 209, 102, .18); color: #ffe39a; }
.feature-copy b { color: #f7f8ff; }
.privacy-note { border-color: rgba(181, 211, 255, .16); color: #9db2d9 !important; }

.download-card {
  background:
    radial-gradient(circle at 76% 20%, rgba(255, 209, 102, .12), transparent 21rem),
    linear-gradient(118deg, #071632, #0d2450);
  border: 1px solid rgba(181, 211, 255, .16);
  box-shadow: 0 25px 55px rgba(0, 0, 0, .28);
}
.download-copy>p:not(.eyebrow), .download-copy small { color: #c4d2ec; }
.download-art { background: #081631; }
.download-art::after { background: linear-gradient(90deg, #0d2450 0%, rgba(8, 22, 49, .18) 100%), linear-gradient(0deg, rgba(3, 9, 26, .58), transparent 62%); }
.download-cover { opacity: .39; object-position: 50% 55%; }

.site-footer { color: #e5edfb; }
.site-footer>p, .site-footer small, .footer-links a { color: #aebfdd; }
.site-footer .brand { color: #f7f8ff; }

@media (max-width: 800px) {
  .sky { height: 820px; }
  .feature-section { padding-top: 84px; }
}

/* Real StoryTime pre-story setup screen, not an illustrative phone mockup. */
.phone {
  border: 0;
  background: url("assets/storytime-pre-story-mermaid.png") center / cover no-repeat;
  box-shadow: 0 28px 42px rgba(0, 0, 0, .46);
  overflow: hidden;
}
.phone > * { display: none; }
.feature-cover { object-position: center; }

.theme-picker { display: inline-flex; align-items: center; }
.theme-picker select {
  appearance: none;
  min-width: 92px;
  border: 1px solid rgba(255, 255, 255, .30);
  border-radius: 999px;
  padding: 8px 28px 8px 13px;
  color: #fff;
  background: rgba(255, 255, 255, .10) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' d='m1 1 4.5 4L10 1'/%3E%3C/svg%3E") right 11px center / 10px no-repeat;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.theme-picker select option { color: #142047; }

/* Light appearance follows StoryTime's native iOS semantic surfaces. */
html[data-theme-effective="light"] {
  --ink: #10264b;
  --muted: #60718e;
  --cream: #f8fbff;
  --lavender: #eef6ff;
  --indigo: #0b1f43;
  --soft: #f3f8ff;
  --gold: #0b1f43;
  --line: rgba(11, 31, 67, .14);
}

html[data-theme-effective="light"] body {
  color: #10264b;
  background:
    radial-gradient(circle at 78% 16%, rgba(220, 233, 250, .95), transparent 28rem),
    radial-gradient(circle at 14% 43%, rgba(232, 241, 255, .9), transparent 23rem),
    #f8fbff;
}
html[data-theme-effective="light"] .sky {
  background:
    radial-gradient(circle at 74% 27%, rgba(208, 229, 250, .85), transparent 20%),
    radial-gradient(circle at 15% 21%, rgba(231, 243, 255, .95), transparent 26%),
    linear-gradient(142deg, #f6fbff 0%, #e8f4ff 50%, #dce9fa 100%);
}
html[data-theme-effective="light"] .glow-one { background: rgba(255, 209, 102, .20); }
html[data-theme-effective="light"] .glow-two { background: rgba(151, 194, 238, .28); }
html[data-theme-effective="light"] .star { background: #315681; box-shadow: 0 0 10px 1px rgba(48, 88, 133, .25); }
html[data-theme-effective="light"] .site-header,
html[data-theme-effective="light"] .hero,
html[data-theme-effective="light"] .main-nav a,
html[data-theme-effective="light"] .text-link { color: #0b1f43; }
html[data-theme-effective="light"] .main-nav .nav-cta { background: #0b1f43; color: #fff; }
html[data-theme-effective="light"] .hero-text,
html[data-theme-effective="light"] .availability { color: #526987; }
html[data-theme-effective="light"] .button-primary { background: linear-gradient(135deg, #0b1f43, #254a7c); color: #fff; }
html[data-theme-effective="light"] .intro-strip { color: #0b1f43; background: linear-gradient(90deg, #dce9fa, #eef6ff, #dce9fa); border-color: rgba(11, 31, 67, .08); }
html[data-theme-effective="light"] .intro-strip strong { color: #254a7c; }
html[data-theme-effective="light"] .section-intro h2,
html[data-theme-effective="light"] .how-copy h2,
html[data-theme-effective="light"] .feature-copy h2,
html[data-theme-effective="light"] .benefit-card h3,
html[data-theme-effective="light"] .steps h3,
html[data-theme-effective="light"] .feature-copy b { color: #10264b; }
html[data-theme-effective="light"] .section-intro > p:last-child,
html[data-theme-effective="light"] .how-copy > p:not(.eyebrow),
html[data-theme-effective="light"] .feature-copy > p:not(.eyebrow),
html[data-theme-effective="light"] .feature-copy li p,
html[data-theme-effective="light"] .steps p,
html[data-theme-effective="light"] .benefit-card p { color: #60718e; }
html[data-theme-effective="light"] .eyebrow-dark,
html[data-theme-effective="light"] .how-copy > .eyebrow,
html[data-theme-effective="light"] .feature-copy .eyebrow { color: #254a7c; }
html[data-theme-effective="light"] .benefit-card {
  background: linear-gradient(145deg, #fff, #f3f8ff) !important;
  border-color: rgba(11, 31, 67, .10);
  box-shadow: 0 16px 35px rgba(30, 67, 113, .10);
}
html[data-theme-effective="light"] .card-icon { background: #dce9fa; color: #0b1f43 !important; }
html[data-theme-effective="light"] .how-section { background: linear-gradient(rgba(238, 246, 255, .84), rgba(238, 246, 255, .84)), #dce9fa; border-color: rgba(11, 31, 67, .08); }
html[data-theme-effective="light"] .steps li { border-color: rgba(11, 31, 67, .12); }
html[data-theme-effective="light"] .steps li > span { color: #254a7c; }
html[data-theme-effective="light"] .feature-visual { background: #dce9fa; border-color: #c6daf4; box-shadow: 0 25px 48px rgba(30, 67, 113, .16); }
html[data-theme-effective="light"] .feature-visual::after { background: linear-gradient(0deg, rgba(11, 31, 67, .72), rgba(11, 31, 67, .03) 67%); }
html[data-theme-effective="light"] .feature-copy li > span { background: #dce9fa; color: #0b1f43; }
html[data-theme-effective="light"] .privacy-note { border-color: rgba(11, 31, 67, .12); color: #60718e !important; }
html[data-theme-effective="light"] .download-card { background: linear-gradient(118deg, #0b1f43, #254a7c); border-color: rgba(11, 31, 67, .08); }
html[data-theme-effective="light"] .download-art { background: #0b1f43; }
html[data-theme-effective="light"] .theme-picker select { border-color: rgba(11, 31, 67, .20); color: #0b1f43; background-color: rgba(255, 255, 255, .58); }
html[data-theme-effective="light"] .site-footer { color: #10264b; }
html[data-theme-effective="light"] .site-footer .brand { color: #10264b; }
html[data-theme-effective="light"] .site-footer > p,
html[data-theme-effective="light"] .site-footer small,
html[data-theme-effective="light"] .footer-links a { color: #60718e; }

/* Crawlable product context and FAQ content. Kept as visible editorial content,
   so people and answer engines receive the same information. */
.seo-section {
  padding: 112px 0;
  background:
    radial-gradient(circle at 11% 9%, rgba(30, 73, 145, .18), transparent 23rem),
    linear-gradient(180deg, rgba(8, 22, 49, .92), #05091a);
  border-block: 1px solid rgba(181, 211, 255, .12);
}

.seo-section .section-intro { max-width: 760px; }
.seo-section .section-intro h2,
.faq-block h2,
.topic-grid h3 { color: #f7f8ff; }
.seo-section .section-intro > p:last-child,
.topic-grid p,
.faq-block p { color: #b8c8e8; }

.topic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 48px;
}

.topic-grid article {
  padding: 28px;
  border: 1px solid rgba(181, 211, 255, .16);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(16, 43, 92, .7), rgba(7, 19, 43, .82));
}

.topic-grid h3 { margin-bottom: 9px; font-size: 18px; letter-spacing: -.45px; }
.topic-grid p { margin: 0; font-size: 14px; line-height: 1.65; }

.faq-block {
  max-width: 850px;
  margin: 78px auto 0;
}

.faq-block h2 {
  margin-bottom: 20px;
  font-size: clamp(1.75rem, 3vw, 2.45rem);
  letter-spacing: -1.2px;
}

.faq-block details {
  border-top: 1px solid rgba(181, 211, 255, .18);
  padding: 19px 0;
}

.faq-block details:last-child { border-bottom: 1px solid rgba(181, 211, 255, .18); }
.faq-block summary { cursor: pointer; color: #f7f8ff; font-weight: 760; line-height: 1.45; }
.faq-block summary::marker { color: #ffe39a; }
.faq-block p { max-width: 720px; margin: 12px 28px 0 0; font-size: 14px; line-height: 1.7; }

html[data-theme-effective="light"] .seo-section {
  background:
    radial-gradient(circle at 11% 9%, rgba(198, 222, 249, .8), transparent 23rem),
    linear-gradient(180deg, #eef6ff, #f8fbff);
  border-color: rgba(11, 31, 67, .1);
}
html[data-theme-effective="light"] .seo-section .section-intro h2,
html[data-theme-effective="light"] .faq-block h2,
html[data-theme-effective="light"] .topic-grid h3,
html[data-theme-effective="light"] .faq-block summary { color: #10264b; }
html[data-theme-effective="light"] .seo-section .section-intro > p:last-child,
html[data-theme-effective="light"] .topic-grid p,
html[data-theme-effective="light"] .faq-block p { color: #60718e; }
html[data-theme-effective="light"] .topic-grid article { background: linear-gradient(145deg, #fff, #f2f8ff); border-color: rgba(11, 31, 67, .1); }
html[data-theme-effective="light"] .faq-block details { border-color: rgba(11, 31, 67, .12); }

@media (max-width: 800px) {
  .seo-section { padding: 82px 0; }
  .topic-grid { grid-template-columns: 1fr; margin-top: 34px; }
  .topic-grid article { padding: 23px; }
  .faq-block { margin-top: 58px; }
}

@media (max-width: 800px) {
  .theme-picker { margin: 6px 8px; }
  .theme-picker select { width: 100%; }
}