/* ScreenNap homepage. Fonts, header, footer, links and the button come from legal.css. */
:root { --sky-pale: #eaf6fb; --sky-top: #b0dbed; --sky-mid: #96cbe1; --sky-low: #7cbcd6; --cobalt-deep: #2f38a3; }

body.home { background: #fff; }
.home .site-header { background: var(--sky-pale); color: var(--ink); }
.home .brand, .home .header-nav a { color: var(--ink); }
.home .brand:focus-visible, .home .header-nav a:focus-visible { outline-color: var(--cobalt); }

.home-main { width: 100%; padding: 0; }
.wrap { width: min(1120px, 100%); margin-inline: auto; padding-inline: 32px; }

/* The page opens on the same sky as the App Store screenshots: pale under the header, deepest under the last row of frames. */
.sky { background: linear-gradient(180deg, var(--sky-pale) 0%, var(--sky-top) 42%, var(--sky-mid) 74%, var(--sky-low) 100%); }

.intro { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 56px; align-items: center; padding-block: 56px 72px; }
.intro h1 { font-size: clamp(42px, 6.2vw, 76px); line-height: 1.04; letter-spacing: -.045em; margin: 0 0 24px; max-width: 13ch; }
.intro-lede { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.62; max-width: 44ch; margin: 0; }
.intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 32px; }
.intro-fine { margin: 0; font-size: 15px; color: var(--muted); }
.intro-mochi { justify-self: center; display: block; width: min(100%, 340px); height: auto; border-radius: 23%; box-shadow: 0 32px 56px -30px rgba(36, 41, 81, .6); animation: mochi-breathe 8s ease-in-out infinite; }

/* One slow breath, four seconds in and four out, like the app's box breathing. */
@keyframes mochi-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }

.shots-band { padding-bottom: 72px; }
.shots-band h2 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -.03em; margin: 0 0 24px; }
.shots-scroller { border-radius: 26px; }
.shots-scroller:focus-visible { outline: 3px solid var(--ink); outline-offset: 8px; }
.shots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 22px; }
.shots li + li { margin-top: 0; }
.shot picture, .shot img { display: block; }
.shot img { width: 100%; height: auto; border-radius: 22px; outline: 1px solid rgba(255, 255, 255, .6); outline-offset: -1px; box-shadow: 0 26px 44px -30px rgba(36, 41, 81, .7); }

.ritual { padding-block: 96px 32px; }
.ritual h2, .features h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.12; letter-spacing: -.035em; margin: 0 0 40px; max-width: 20ch; }
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; }
.steps li { counter-increment: step; margin: 0; padding-top: 18px; border-top: 2px solid var(--ink); }
.steps li::before { content: counter(step); display: block; font-weight: 700; font-size: 60px; line-height: 1; letter-spacing: -.05em; color: var(--cobalt); margin-bottom: 18px; }
.steps h3 { margin: 0 0 10px; font-size: 21px; line-height: 1.3; }
.steps p { margin: 0; max-width: 34ch; }
.steps .step-quote { font-size: 20px; line-height: 1.5; font-weight: 700; color: var(--cobalt-deep); }

.features { padding-block: 72px 88px; }
.feature-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 10px 56px; padding-block: 28px; border-top: 1px solid var(--line); }
.feature-row:last-child { border-bottom: 1px solid var(--line); }
.feature-row h3 { margin: 0; font-size: 22px; line-height: 1.3; letter-spacing: -.02em; }
.feature-row p { margin: 0; max-width: 60ch; }

.panel { background: var(--apricot); border-radius: 30px 30px 30px 6px; padding: 44px 48px; }
.panel h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.15; letter-spacing: -.03em; margin: 0 0 18px; }
.panel p { max-width: 72ch; }
.panel a { color: var(--ink); font-weight: 700; }
.panel a:focus-visible { outline-color: var(--ink); }

.closing { padding-block: 96px 104px; }
.closing h2 { font-size: clamp(36px, 5vw, 62px); line-height: 1.05; letter-spacing: -.045em; margin: 0 0 28px; max-width: 13ch; }
.closing .button { margin: 0; padding: 16px 26px; font-size: 18px; }
.closing .button:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }

@media (max-width: 900px) {
  .intro { grid-template-columns: 1fr; gap: 28px; padding-block: 36px 48px; }
  .intro-mochi { order: -1; justify-self: start; width: 132px; border-radius: 23%; }
  .shots-scroller { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 32px; margin-inline: -32px; border-radius: 0; }
  .shots { display: flex; gap: 14px; padding-inline: 32px; width: max-content; }
  .shot { flex: 0 0 auto; width: min(64vw, 300px); scroll-snap-align: start; }
  .steps { grid-template-columns: 1fr; gap: 32px; }
  .feature-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .wrap { padding-inline: 20px; }
  .intro h1 { font-size: 40px; }
  .shots-scroller { margin-inline: -20px; scroll-padding-inline: 20px; }
  .shots { padding-inline: 20px; }
  .ritual { padding-block: 64px 16px; }
  .features { padding-block: 48px 64px; }
  .panel { padding: 28px 22px; border-radius: 24px 24px 24px 6px; }
  .closing { padding-block: 64px 72px; }
}
@media (prefers-reduced-motion: reduce) { .intro-mochi { animation: none; } }
@media print { .sky { background: none; } .intro-mochi { animation: none; box-shadow: none; } .shots { grid-template-columns: repeat(4, 1fr); } .closing { display: none; } }