html:has(body.landing) { overscroll-behavior-y: none; }
.landing {
  --cream: #f5efe6; --paper: #fefcf8; --cocoa: #1c1007; --navy: #0e1a3c;
  --slate: #465b76; --amber: #d16d04; --amber-deep: #b44c06; --peach: #fef1e0;
  --rule: #efe7dc; --mint: #e9f5f0; --pine: #0b5e4e;
  --font: "Nunito", ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--cream); color: var(--navy); font-family: var(--font); font-weight: 600; line-height: 1.6; color-scheme: light; overscroll-behavior-y: none;
}
.landing :is(h1,h2,h3,p,figure) { margin: 0; }
.landing :is(h1,h2,h3) { font-family: var(--font); font-weight: 800; }
.landing :is(h1,h2) { letter-spacing: -.045em; line-height: 1.08; }
.landing em { color: var(--amber-deep); font-style: normal; font-weight: 800; }
.landing a { text-decoration: none; }
.landing button { font: inherit; }
.landing :is(a,button):focus-visible { outline: 3px solid var(--amber); outline-offset: 5px; }
.landing ::selection { color: var(--cocoa); background: #fde7c8; }
.landing .skip-link { position: fixed; z-index: 100; color: var(--navy); }
.page-width { width: min(calc(100% - 128px),1400px); margin-inline: auto; }
.icon { width: 24px; height: 24px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.landing-header { position: fixed; z-index: 20; inset: 0 0 auto; height: 112px; transition: background .25s,transform .25s; }
.landing-header.is-scrolled { background: #f5efe6f2; backdrop-filter: blur(16px); border-bottom: 1px solid var(--rule); }
.landing-header.is-story { transform: translateY(-100%); visibility: hidden; }
.header-inner { height: 100%; display: flex; align-items: center; gap: 40px; }
.landing-brand { display: inline-flex; align-items: center; gap: 14px; font-size: 38px; font-weight: 800; line-height: 1; letter-spacing: -.05em; }
.landing-brand img { width: 52px; height: 52px; border-radius: 14px; }
.primary-nav { display: flex; gap: 34px; margin-left: auto; font-size: 17px; color: var(--slate); }
.primary-nav a { padding-block: 12px; }
.primary-nav a:hover { color: var(--amber-deep); }
.pill { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; border: 1px solid transparent; border-radius: 100px; color: var(--paper); background: var(--amber); font-size: 17px; font-weight: 800; line-height: 1.3; transition: background .2s,transform .2s; }
.pill:hover { background: var(--amber-deep); transform: translateY(-2px); }
.header-download { padding: 13px 28px; white-space: nowrap; }
.reading-progress { position: fixed; z-index: 21; top: 0; height: 3px; width: 100%; background: var(--amber); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.page-jumps { position: fixed; z-index: 30; right: max(24px,env(safe-area-inset-right)); bottom: max(24px,env(safe-area-inset-bottom)); display: flex; gap: 4px; padding: 6px; border: 1px solid var(--rule); border-radius: 100px; background: var(--paper); color: var(--navy); box-shadow: 0 6px 24px #1c10071a; }
.page-jumps button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; transition: background .2s,color .2s; }
.page-jumps button:hover { background: var(--peach); color: var(--amber-deep); }
.page-jumps button:active { background: #fde7c8; }
.page-jumps .icon { width: 22px; height: 22px; }
.opening { display: flex; flex-direction: column; min-height: 720px; height: 100svh; max-height: 1080px; padding-top: 112px; }
.opening-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; flex: 1; min-height: 0; padding-block: 36px 24px; }
.opening-copy { position: relative; z-index: 2; }
.opening h1 { font-size: clamp(48px,6.65vw,102px); white-space: nowrap; color: var(--navy); }
.opening-description { margin-top: 28px !important; max-width: 650px; font-size: clamp(18px,1.85vw,28px); line-height: 1.5; color: var(--slate); }
.store-button { min-height: 60px; padding: 16px 26px; white-space: nowrap; font-size: clamp(15px,1.6vw,24px); box-shadow: 0 6px 18px #b44c061a; }
.opening .store-button { margin-top: 32px; }
.apple-icon { width: 24px; height: 26px; filter: brightness(0) invert(1); }
.quiet-note { color: var(--slate); font-size: clamp(12px,1.1vw,17px); margin-top: 14px !important; }
.bedside-scene { position: relative; width: min(100%,calc((max(100svh,720px) - 405px) * 1.38)); justify-self: center; padding-bottom: 145px; }
.bedside-art { width: 100%; aspect-ratio: 1.38; object-fit: cover; object-position: center; border-radius: 32px; }
.bedside-art { animation: bedroom-float 7.5s ease-in-out infinite; animation-play-state: paused; }
.bedtime-card { position: absolute; bottom: 0; left: 5%; width: 90%; padding: 24px 28px 20px; border: 1px solid var(--rule); border-radius: 24px; background: var(--paper); box-shadow: 0 10px 30px #1c10070d; }
.bedtime-label { display: block; color: var(--navy); font-size: 21px; line-height: 1.3; font-weight: 800; }
.bedtime-clock { display: block; color: var(--amber-deep); font-size: clamp(54px,5.5vw,84px); font-weight: 800; letter-spacing: -.04em; line-height: 1.1; margin-block: 5px 16px; }
.clock-tile { position: absolute; right: 28px; top: 24px; width: 72px; height: 72px; border-radius: 20px; background: var(--peach); display: grid; place-items: center; color: var(--cocoa); }
.clock-tile .icon { width: 46px; height: 46px; stroke-width: 1.7; }
.bedtime-until { display: flex; align-items: center; gap: 13px; color: var(--pine); font-size: clamp(15px,1.3vw,20px); padding-top: 15px; border-top: 1px solid var(--rule); }
.scroll-ribbon { display: flex; align-items: center; min-height: 86px; border-top: 1px solid var(--rule); gap: 30px; font-size: 15px; color: var(--slate); }
.scroll-ribbon a { display: inline-flex; align-items: center; gap: 16px; padding-block: 16px; }
.scroll-ribbon .icon { padding: 10px; height: 44px; width: 44px; border-radius: 50%; background: #fde7c8; color: var(--navy); }
.scroll-ribbon p { margin-left: auto; }
.night-story { position: relative; overflow-x: clip; background: var(--cream); --story-ink: var(--navy); --story-muted: var(--slate); --story-accent: var(--amber-deep); --story-rule: #d5cabb; transition: background .55s,color .55s; }
.night-story[data-active="1"] { background: #141d34; --story-ink: #f6f3f9; --story-muted: #b8c3de; --story-accent: #ffd57b; --story-rule: #2a3756; color-scheme: dark; }
.story-grid { display: grid; grid-template-columns: 1.15fr 1fr; column-gap: 40px; position: relative; }
.story-chapters { min-width: 0; }
.story-chapter { position: relative; z-index: 2; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 84px 0; scroll-margin-top: 0; color: var(--story-ink); }
.chapter-label { display: flex; align-items: center; gap: 14px; text-transform: uppercase; letter-spacing: .15em; font-size: 13px; font-weight: 800; color: var(--story-accent,var(--amber-deep)); line-height: 1.5; margin-bottom: 24px !important; }
.chapter-label span:first-child { padding-right: 14px; border-right: 1px solid currentColor; }
.story-chapter h2 { font-size: clamp(42px,4.9vw,76px); white-space: nowrap; }
.story-chapter em { color: var(--story-accent); }
.chapter-copy > p:not(.chapter-label) { font-size: clamp(18px,1.65vw,25px); line-height: 1.5; max-width: 600px; margin-top: 28px; color: var(--story-muted); }
.chapter-copy > .chapter-aside { margin-top: 16px !important; font-size: clamp(16px,1.4vw,21px) !important; }
.chapter-nav { display: grid; align-self: start; margin-top: 28px; font-size: 17px; }
.chapter-nav a { position: relative; min-height: 48px; padding-left: 38px; display: flex; align-items: center; color: var(--story-muted); }
.chapter-nav a::before { content: ""; position: absolute; left: 1px; top: 16px; width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--story-muted); background: transparent; }
.chapter-nav a:not(:last-child)::after { content: ""; position: absolute; left: 8px; top: 33px; width: 2px; height: 31px; background: var(--story-rule); }
.chapter-nav a[aria-current] { color: var(--story-accent); font-weight: 800; }
.chapter-nav a[aria-current]::before { background: var(--story-accent); border-color: var(--story-accent); }
.chapter-nav a:hover { color: var(--story-ink); }
.story-chapter,.chapter-label,.chapter-copy > p,.story-chapter em,.chapter-nav a,.chapter-nav a::before,.chapter-nav a::after,.scene-caption,.film-link { transition: color .55s,border-color .55s,background-color .55s; }
.story-visual { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding-block: 40px; min-width: 0; }
.story-visual::before { content: ""; position: absolute; inset: 0 -80px 0 -25%; background: url("/assets/companion-bedroom-night.webp") 50% center / cover; mask-image: linear-gradient(to right,transparent,#000 60%); opacity: 0; transition: opacity .5s; pointer-events: none; }
.story-visual[data-state="1"]::before { opacity: 1; }
.mobile-story-visual { display: none; }
.phone-stack { position: relative; isolation: isolate; width: min(340px,calc((100svh - 125px) * .46)); aspect-ratio: 1320 / 2868; }
.phone { position: absolute; inset: 0; width: 100%; height: 100%; border: 8px solid #211b19; border-radius: 42px; background: #211b19; box-shadow: 0 0 0 2px #8a7770,0 24px 50px #1c100728; overflow: hidden; transform-origin: 50% 100%; opacity: 0; transform: translate3d(90%,24px,0) rotate(5deg); pointer-events: none; }
.screen-motion:not(.is-visible) .phone-stack { opacity: 0; }
.app-screen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-visual[data-state="0"] .phone[data-screen="0"],.story-visual[data-state="1"] .phone[data-screen="1"],.story-visual[data-state="2"] .phone[data-screen="2"] { opacity: 1; transform: none; z-index: 3; }
.phone.is-background { opacity: .3; transform: translate3d(46%,64px,0) rotate(10deg) scale(.88); z-index: 1; }
.scene-caption { position: relative; color: var(--story-ink); font-size: 17px; font-weight: 800; text-align: center; }
.film-link { align-self: start; display: inline-flex; align-items: center; gap: 14px; margin-top: 24px; padding: 4px 0; border: 0; background: transparent; color: var(--story-accent); cursor: pointer; font-size: 17px !important; font-weight: 800 !important; }
.film-link .icon { width: 44px; height: 44px; padding: 11px; border: 1px solid currentColor; border-radius: 50%; fill: currentColor; }
.morning-section { position: relative; min-height: max(0px,calc(100svh - var(--footer-height,200px))); overflow: clip; background: var(--cream); color: var(--navy); }
.morning-art { position: absolute; width: min(43%,620px); height: auto; right: max(64px,calc((100% - 1400px) / 2)); top: 50%; transform: translateY(-50%); }
.companion-art { display: block; width: 100%; height: auto; transform-origin: 50% 85%; animation: companion-bob 6s ease-in-out infinite; animation-play-state: paused; }
.bedside-art.art-is-visible,.companion-art.art-is-visible { animation-play-state: running; }
.art-motion-paused .bedside-art,.art-motion-paused .companion-art { animation-play-state: paused; }
@keyframes bedroom-float {
  0%,100% { transform: translate3d(0,0,0) rotate(0deg); }
  50% { transform: translate3d(0,-6px,0) rotate(-.35deg); }
}
@keyframes companion-bob {
  0%,55%,100% { transform: translate3d(0,0,0) rotate(0deg); }
  18% { transform: translate3d(0,-7px,0) rotate(-1deg); }
  32% { transform: translate3d(0,-3px,0) rotate(.75deg); }
  43% { transform: translate3d(0,-5px,0) rotate(-.25deg); }
}
.morning-content { position: relative; padding-block: 80px 36px; }
.morning-content .chapter-label { margin-bottom: 20px !important; }
.morning-content h2 { font-size: clamp(56px,5.5vw,84px); }
.morning-description { margin-top: 20px !important; font-size: clamp(20px,1.7vw,26px); color: var(--slate); line-height: 1.5; }
.promise-list { width: 49%; margin: 28px 0 0; display: grid; gap: 14px; }
.promise-list > div { position: relative; padding: 21px 20px 21px 96px; border: 1px solid var(--rule); border-radius: 24px; background: var(--paper); box-shadow: 0 5px 12px #1c100709; }
.promise-list .icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); padding: 14px; width: 60px; height: 60px; border-radius: 20px; background: var(--peach); color: var(--amber-deep); }
.promise-list > div:last-child .icon { color: var(--pine); background: var(--mint); }
.promise-list dt { font-size: clamp(18px,1.6vw,24px); line-height: 1.3; font-weight: 800; }
.promise-list dd { margin: 6px 0 0; color: var(--slate); font-size: clamp(14px,1.15vw,17px); line-height: 1.5; }
.landing-footer { padding: 20px 0 14px; background: var(--cream); }
.final-invitation { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-block: 24px; border-top: 1px solid #dcccb8; }
.final-invitation > p { font: 800 clamp(28px,3vw,44px)/1.2 var(--font); letter-spacing: -.04em; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-right: 104px; color: var(--slate); font-size: 15px; min-height: 52px; }
.footer-bottom nav { display: flex; gap: 28px; }
.footer-bottom a { display: flex; align-items: center; min-height: 44px; }
.footer-bottom a:hover { color: var(--amber-deep); }
.film-dialog { padding: 18px; border: 1px solid var(--rule); border-radius: 24px; color: var(--navy); background: var(--paper); max-width: calc(100vw - 32px); box-shadow: 0 20px 80px #0008; }
.film-dialog::backdrop { background: #0c1222d9; backdrop-filter: blur(12px); }
.film-header { display: flex; align-items: center; gap: 24px; justify-content: space-between; margin-bottom: 12px; }
.film-header h2 { font-size: 20px; letter-spacing: -.02em; }
.film-header button { display: grid; place-items: center; width: 44px; height: 44px; background: var(--peach); color: var(--navy); border: 0; border-radius: 50%; cursor: pointer; }
.film-dialog video { display: block; height: min(70svh,660px); width: auto; max-width: 100%; margin-inline: auto; border-radius: 12px; }
html:has(.film-dialog[open]) { overflow: hidden; }
@media (min-width: 761px) and (max-height: 1000px) {
  .morning-content { padding-block: 20px 16px; }
  .morning-content .chapter-label { margin-bottom: 8px !important; }
  .morning-content h2 { font-size: 56px; }
  .morning-description { margin-top: 12px !important; font-size: 17px; }
  .promise-list { margin-top: 18px; gap: 8px; }
  .promise-list > div { padding-block: 14px; }
  .promise-list .icon { width: 48px; height: 48px; padding: 11px; }
  .promise-list dt { font-size: 18px; }
  .promise-list dd { font-size: 14px; }
  .morning-art { width: min(43%,480px); }
}
@media (max-width: 1100px) {
  .page-width { width: calc(100% - 80px); }
  .header-inner { gap: 24px; }
  .primary-nav { gap: 22px; font-size: 14px; }
  .landing-brand { font-size: 32px; }
  .landing-brand img { width: 44px; height: 44px; }
  .opening-grid { gap: 28px; }
  .opening h1 { font-size: 5.65vw; }
  .bedtime-card { padding: 20px; }
  .clock-tile { width: 58px; height: 58px; right: 20px; top: 20px; }
  .clock-tile .icon { width: 38px; height: 38px; }
  .bedtime-label { font-size: 18px; }
  .scroll-ribbon { font-size: 13px; }
  .story-grid { gap: 26px; }
  .chapter-copy > p:not(.chapter-label) { font-size: 18px; }
  .chapter-nav { font-size: 15px; }
  .film-link { font-size: 14px !important; }
  .promise-list > div { padding-left: 82px; }
  .promise-list .icon { width: 52px; height: 52px; padding: 12px; left: 14px; }
  .morning-art { right: 40px; }
}
@media (max-width: 760px) {
  .page-width { width: calc(100% - 40px); }
  .page-jumps { right: max(12px,env(safe-area-inset-right)); bottom: max(12px,env(safe-area-inset-bottom)); }
  .landing-header { height: 80px; }
  .header-inner { gap: 12px; justify-content: space-between; }
  .landing-brand { font-size: 28px; gap: 9px; }
  .landing-brand img { width: 36px; height: 36px; border-radius: 10px; }
  .primary-nav { display: none; }
  .header-download { min-height: 44px; padding: 11px 17px; font-size: 13px; }
  .opening { height: auto; min-height: 100svh; max-height: none; padding-top: 100px; }
  .opening-grid { grid-template-columns: minmax(0,1fr); padding-block: 14px 28px; gap: 32px; }
  .opening h1 { font-size: clamp(36px,10.5vw,70px); }
  .opening-description { margin-top: 20px !important; font-size: 16px; }
  .desktop-break { display: none; }
  .opening .store-button { margin-top: 24px; }
  .store-button { min-height: 52px; font-size: 14px; gap: 12px; padding: 13px 20px; }
  .apple-icon { width: 21px; height: 23px; }
  .quiet-note { font-size: 12px; }
  .bedside-scene { width: min(100%,480px); justify-self: center; padding-bottom: 115px; }
  .bedside-art { aspect-ratio: 1.5; border-radius: 24px; }
  .bedtime-card { padding: 16px 20px; }
  .bedtime-label { font-size: 17px; }
  .bedtime-clock { font-size: 48px; margin-bottom: 10px; }
  .clock-tile { width: 54px; height: 54px; right: 20px; top: 16px; border-radius: 16px; }
  .clock-tile .icon { width: 34px; height: 34px; }
  .bedtime-until { font-size: 13px; padding-top: 11px; gap: 10px; }
  .bedtime-until .icon { width: 20px; height: 20px; }
  .scroll-ribbon { min-height: 72px; font-size: 12px; gap: 12px; }
  .scroll-ribbon a { gap: 12px; }
  .scroll-ribbon p { display: none; }
  .story-grid { display: block; }
  .story-chapter { min-height: auto; padding: 64px 0 34px; }
  .chapter-label { font-size: 11px; margin-bottom: 22px !important; }
  .story-chapter h2 { font-size: clamp(33px,8.7vw,61px); }
  .chapter-copy > p:not(.chapter-label) { margin-top: 22px; font-size: 16px; max-width: 520px; }
  .chapter-copy > .chapter-aside { margin-top: 12px !important; font-size: 15px !important; }
  .chapter-nav { display: flex; flex-wrap: wrap; align-self: stretch; gap: 4px 18px; margin-top: 18px; font-size: 12px; }
  .chapter-nav a { padding-left: 16px; min-height: 44px; }
  .chapter-nav a::before { width: 8px; height: 8px; top: 18px; border-width: 1.5px; }
  .chapter-nav a::after { display: none; }
  .film-link { margin-top: 14px; min-height: 44px; font-size: 14px !important; }
  .film-link .icon { width: 36px; height: 36px; padding: 9px; }
  .story-visual { display: none; }
  .mobile-story-visual { display: flex; position: relative; top: auto; height: auto; width: 100%; gap: 18px; justify-content: flex-start; padding-block: 40px 22px; }
  .mobile-story-visual::before { display: none; }
  .phone-stack { width: min(260px,72%); }
  .phone { border-width: 6px; border-radius: 32px; }
  .scene-caption { font-size: 14px; }
  .night-story { background: var(--cream) !important; }
  .story-chapter { --story-ink: var(--navy); --story-muted: var(--slate); --story-accent: var(--amber-deep); --story-rule: #d5cabb; }
  .story-chapter[data-chapter="1"] { --story-ink: #f6f3f9; --story-muted: #b8c3de; --story-accent: #ffd57b; --story-rule: #2a3756; background: #141d34; margin-inline: -20px; padding-inline: 20px; }
  .morning-section { min-height: 0; display: flex; flex-direction: column; }
  .morning-content { padding-block: 60px 0; order: 0; }
  .morning-content h2 { font-size: clamp(49px,13.5vw,76px); }
  .morning-description { font-size: 19px; margin-top: 20px !important; }
  .promise-list { width: 100%; margin-top: 25px; gap: 12px; }
  .promise-list > div { padding: 18px 15px 18px 77px; }
  .promise-list .icon { width: 46px; height: 46px; left: 14px; padding: 11px; border-radius: 15px; }
  .promise-list dt { font-size: 17px; }
  .promise-list dd { font-size: 13px; }
  .morning-art { position: relative; order: 1; width: min(76%,380px); height: auto; right: auto; top: auto; transform: none; margin: 36px auto 0; }
  .landing-footer { padding-top: 10px; padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
  .final-invitation { flex-direction: column; align-items: flex-start; gap: 22px; padding-block: 28px; }
  .final-invitation > p { font-size: 30px; }
  .footer-bottom { padding-right: 0; flex-wrap: wrap; gap: 0 16px; font-size: 12px; min-height: 64px; }
  .footer-bottom nav { gap: 20px; }
  .film-header { gap: 12px; }
  .film-header h2 { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .landing *,.landing *::before,.landing *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  .screen-motion .phone-stack { opacity: 1; }
  .phone.is-background { opacity: 0; }
}