/* Home page. Everything reads as a calm static page; ambient.js adds the .amb class on <html>
   and the page then moves on its own: a short entrance on load, protein chips that drift,
   a day that adds itself up, a slow photo reel and the food ticker. Nothing is tied to scrolling. */

.home { font-size: 18px; }
.home p { line-height: 1.6; }

/* ---------- header: logo + one action ---------- */
@media (max-width: 859px) { .announce .nyd { display: none; } .home .top { top: 36px; padding-top: 14px; } }
.top-buy { font-size: 15px; font-weight: 600; text-decoration: none; padding: 10px 18px; border-radius: 40px; background: rgba(251,248,243,.86); border: 1.5px solid rgba(34,41,29,.16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); white-space: nowrap; }
.top-buy:hover { background: var(--paper); border-color: var(--ink); }

/* ---------- hero ---------- */
.home .hero { position: relative; display: block; padding: 0; min-height: 0; background: var(--cream); overflow: hidden; }
.hero-ph { display: block; }
.hero-ph img { width: 100%; height: 100%; object-fit: cover; }
.hero-copy { position: relative; z-index: 2; }
.hero h1 { font-size: clamp(50px, 13.4vw, 120px); line-height: .92; max-width: none; letter-spacing: -0.02em; }
.hero h1 .ln { display: inline-block; }
.make { font-family: var(--serif); font-size: clamp(38px, 9.4vw, 66px); line-height: 1; margin: 0 0 16px; color: var(--clay-deep); }
.home .hero-sub { font-size: 18px; color: var(--soft); max-width: 30ch; margin: 0 0 24px; }
.micro { font-size: 14.5px; color: var(--soft); margin: 14px 0 0; }
.chips { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.chip { position: absolute; display: grid; gap: 1px; padding: 11px 16px 10px; border-radius: 18px; background: rgba(251,248,243,.92); box-shadow: 0 14px 34px rgba(34,41,29,.16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.chip span { font-size: 12.5px; line-height: 1.25; color: var(--soft); white-space: nowrap; }
.chip b { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1; color: var(--ink); }
.chip.c3 { background: var(--olive); }
.chip.c3 span { color: rgba(251,248,243,.78); }
.chip.c3 b { color: var(--butter); }
.chip b span { font: inherit; color: inherit; white-space: normal; }

/* phone: full-height photo, her face clear up top, all the words on a soft cream wash below */
@media (max-width: 859px) {
  .home .hero { height: calc(100svh - 36px); min-height: 660px; max-height: 920px; }
  .hero-ph, .hero-ph img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .hero-ph img { object-position: 50% 8%; }
  .home .hero::before, .home .hero::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
  .home .hero::before { top: 0; height: 18%; background: linear-gradient(180deg, rgba(243,237,228,.75) 0%, rgba(243,237,228,0) 100%); }
  .home .hero::after { bottom: 0; height: 60%; background: linear-gradient(0deg, rgba(243,237,228,1) 0%, rgba(243,237,228,.98) 60%, rgba(243,237,228,.7) 80%, rgba(243,237,228,0) 100%); }
  .hero-copy { position: absolute; inset: 0; padding: 96px var(--gutter) 24px; display: flex; flex-direction: column; justify-content: flex-end; }
  .hero h1 { font-size: clamp(44px, 12.4vw, 64px); margin-bottom: 4px; }
  .hero-low { max-width: 30rem; }
  .make { font-size: 34px; margin-bottom: 12px; }
  .home .hero-sub { font-size: 16.5px; margin-bottom: 18px; }
  .hero .actions { flex-wrap: nowrap; gap: 10px; }
  .hero .actions .btn { min-height: 50px; padding: 0 18px; font-size: 15.5px; }
  .chip { padding: 8px 12px 7px; border-radius: 14px; }
  .chip span { font-size: 11px; }
  .chip b { font-size: 24px; }
  .chip.c1 { right: 4%; top: 30%; }
  .chip.c2 { left: 4%; top: 22%; }
  .chip.c3 { display: none; }
}
@media (max-width: 859px) and (max-height: 760px) { .home .hero-sub { display: none; } }

/* desktop: wide photo, words on the calm wall to her left */
@media (min-width: 860px) {
  .home .hero { min-height: 640px; height: min(56.25vw, calc(100vh - 38px)); max-height: 900px; }
  .hero-ph, .hero-ph img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .hero-ph img { object-position: 60% 40%; }
  .home .hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(243,237,228,.95) 0%, rgba(243,237,228,.88) 42%, rgba(243,237,228,.62) 51%, rgba(243,237,228,.16) 58%, rgba(243,237,228,0) 64%); }
  .hero-copy { position: absolute; inset: 0; padding: 0 max(var(--gutter), calc((100% - var(--wrap)) / 2)); display: flex; flex-direction: column; justify-content: center; }
  .hero-copy > * { max-width: 520px; }
  .hero h1 { font-size: clamp(72px, 7.4vw, 120px); margin-bottom: 22px; max-width: 5.6em; }
  .chip.c1 { left: 76%; top: 58%; }
  .chip.c2 { left: 57%; top: 66%; }
  .chip.c3 { left: 80%; top: 22%; }
}

/* ---------- sound familiar ---------- */
.said { background: var(--olive); color: var(--paper); display: grid; gap: 34px; }
.said h2 { color: var(--paper); }
.said-ph img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 22px; }
.said-lines { list-style: none; padding: 0; margin: 0 0 22px; }
.said-lines li { font-family: var(--serif); font-size: clamp(25px, 6.6vw, 38px); line-height: 1.12; padding: 14px 0; border-top: 1px solid rgba(251,248,243,.18); }
.said-turn { font-family: var(--serif); font-size: clamp(29px, 7.4vw, 46px); line-height: 1.06; color: var(--butter); margin: 18px 0 18px; }
.said-note { font-size: 15.5px; color: rgba(251,248,243,.76); max-width: 40em; margin: 0; }
.said-note sup a { color: var(--butter); }
@media (max-width: 859px) { .said-ph { max-width: 420px; } }
@media (min-width: 860px) {
  .said { grid-template-columns: .82fr 1.18fr; gap: 80px; align-items: center; }
  .said-ph img { aspect-ratio: 4 / 5.2; }
}

/* ---------- five small moments ---------- */
.day { background: var(--butter); display: grid; gap: 34px; }
.day h2 { max-width: 14ch; }
.tally { font-family: var(--serif); font-size: clamp(104px, 28vw, 220px); line-height: .8; margin: 10px 0 8px; letter-spacing: -.04em; }
.tally small { font-size: .28em; letter-spacing: 0; }
.tally-label { color: #4F5548; margin: 0; font-size: 16px; }
.moments { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 12px; }
.moments li { display: grid; justify-items: center; text-align: center; gap: 3px; transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .5s; }
.moments img { width: 100%; max-width: 150px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; margin-bottom: 8px; box-shadow: 0 14px 30px rgba(34,41,29,.16); outline: 3px solid transparent; outline-offset: 4px; transition: outline-color .4s, transform .5s cubic-bezier(.2,.7,.2,1); }
.moments .when { font-size: 13px; color: var(--clay-deep); font-weight: 600; }
.moments .what { font-size: 14.5px; line-height: 1.3; }
.moments b { font-family: var(--serif); font-weight: 400; font-size: 27px; line-height: 1; }
/* playing: past moments stay, the current one glows, upcoming ones wait softly */
.amb .day.playing .moments li { opacity: .38; }
.amb .day.playing .moments li.done { opacity: 1; }
.amb .day.playing .moments li.now { opacity: 1; transform: translateY(-6px); }
.amb .day.playing .moments li.now img { outline-color: var(--clay); transform: scale(1.05); }
@media (min-width: 860px) {
  .day { grid-template-columns: .9fr 1.1fr; align-items: center; gap: 70px; }
  .moments { grid-template-columns: repeat(6, 1fr); gap: 34px 22px; }
  .moments li { grid-column: span 2; }
  .moments li:nth-child(4) { grid-column: 2 / span 2; }
  .moments img { max-width: 170px; }
}

/* ---------- a month from now ---------- */
.home .dream { background: var(--sage); padding-bottom: 56px; }
.home .wish li { font-size: 18.5px; }

/* ---------- photo reel: drifts slowly on its own, swipeable when motion is off ---------- */
.reel { background: var(--sage); padding: 0 0 88px; overflow: hidden; }
.reel-track { display: flex; gap: 16px; width: max-content; padding: 0 var(--gutter); }
.reel figure { margin: 0; width: 230px; flex: none; }
.reel img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; }
.reel figcaption { font-size: 14.5px; line-height: 1.35; margin-top: 10px; color: #3F4538; }
.reel figcaption b { display: block; font-family: var(--serif); font-weight: 400; font-size: 24px; color: var(--ink); }
@media (min-width: 860px) { .reel figure { width: 280px; } }
.reel:not(.moving) { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.reel:not(.moving)::-webkit-scrollbar { display: none; }
.reel:not(.moving) figure { scroll-snap-align: start; }
.reel.moving .reel-track { animation: qa-reel 70s linear infinite; }
.reel.moving:hover .reel-track, .reel.moving.paused .reel-track { animation-play-state: paused; }
@keyframes qa-reel { to { transform: translate3d(-50%, 0, 0); } }

/* ---------- what's inside: a swipe-through of real pages ---------- */
.inside-head { max-width: 640px; }
.peek { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 8px calc(-1 * var(--gutter)) 0; padding: 4px var(--gutter) 18px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.peek:focus-visible { outline-offset: -3px; }
.pg { flex: none; width: min(78vw, 330px); scroll-snap-align: start; border-radius: 22px; padding: 22px 22px 24px; display: flex; flex-direction: column; }
.pg img { width: 100%; border-radius: 6px; box-shadow: 0 16px 36px rgba(34,41,29,.18); margin-bottom: 20px; background: var(--paper); }
.pg h3 { font-size: 30px; margin-bottom: 8px; }
.pg p { font-size: 16px; margin: 0; opacity: .86; }
.c-butter { background: var(--butter); }
.c-sage { background: var(--sage); }
.c-cream { background: var(--paper); }
.c-olive { background: var(--olive); color: var(--paper); }
.c-clay { background: var(--clay); color: var(--paper); }
.swipe-hint { font-size: 14px; color: var(--soft); margin: 4px 0 30px; }
.also { list-style: none; padding: 0; margin: 0; display: grid; border-top: 1px solid var(--line); }
.also li { display: grid; gap: 3px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.also b { font-weight: 600; font-size: 17.5px; }
.also span { color: var(--soft); font-size: 16px; }
@media (min-width: 860px) {
  .peek { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; overflow: visible; margin: 8px 0 0; padding: 4px 0 18px; }
  .pg { width: auto; padding: 16px 16px 20px; }
  .pg h3 { font-size: 26px; }
  .pg p { font-size: 15px; }
  .swipe-hint { display: none; }
  .also { margin-top: 30px; }
  .also { grid-template-columns: repeat(3, 1fr); column-gap: 40px; }
}

/* ---------- how it works ---------- */
.how { background: var(--paper); padding-bottom: 40px; }
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.steps li { counter-increment: s; display: grid; grid-template-columns: 56px 1fr; column-gap: 14px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(s); grid-row: span 2; font-family: var(--serif); font-size: 46px; line-height: .9; color: var(--clay); }
.steps b { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.05; margin-bottom: 6px; }
.steps span { color: var(--soft); font-size: 16.5px; }
@media (min-width: 860px) {
  .steps { grid-template-columns: repeat(3, 1fr); column-gap: 40px; border-top: 0; }
  .steps li { border-top: 1px solid var(--line); }
}
.home .fit { padding-top: 48px; }

/* ---------- pricing ---------- */
.plan .micro { text-align: center; font-size: 13.5px; }
.plan.featured .micro { color: rgba(251,248,243,.74); }
.home .plan { border-radius: 22px; overflow: hidden; }
.plan-ph { width: calc(100% + 52px); max-width: none; margin: -30px -26px 22px; aspect-ratio: 16 / 9; object-fit: cover; }
@media (min-width: 860px) { .plan-ph { width: calc(100% + 80px); margin: -40px -40px 26px; } }
.home .flag { z-index: 2; }

/* ---------- final + free ---------- */
.final .micro { color: rgba(251,248,243,.76); }
@media (max-width: 859px) {
  .home .final { min-height: 0; display: grid; }
  .home .final img { position: static; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; object-position: 60% 40%; }
  .home .final-copy { padding: 44px var(--gutter) 64px; }
}
@media (min-width: 860px) { .home .final img { object-position: 60% 40%; } }
.home .free-photo img { aspect-ratio: 1; border-radius: 22px; object-position: 72% 40%; }

/* ---------- ambient motion (only with .amb, never with reduced motion) ---------- */
.amb .ticker-track { animation: qa-tick 56s linear infinite; }
.amb .ticker:hover .ticker-track { animation-play-state: paused; }

/* one entrance on load */
.amb .hero-ph img { animation: qa-zoom 2.4s cubic-bezier(.2,.7,.2,1) both; }
.amb .hero h1 .ln { animation: qa-rise 1s cubic-bezier(.2,.7,.2,1) both; }
.amb .hero h1 .ln:nth-child(2) { animation-delay: .12s; }
.amb .hero .make { animation: qa-rise 1s cubic-bezier(.2,.7,.2,1) .35s both; }
.amb .hero .hero-sub, .amb .hero .actions, .amb .hero .micro { animation: qa-rise .9s cubic-bezier(.2,.7,.2,1) .55s both; }
/* chips pop in, then drift gently forever */
.amb .chip { animation: qa-pop .7s cubic-bezier(.3,1.4,.5,1) both, qa-float 6s ease-in-out infinite; }
.amb .chip.c1 { animation-delay: 1.1s, 1.8s; }
.amb .chip.c2 { animation-delay: 1.35s, 2.6s; animation-duration: .7s, 7s; }
.amb .chip.c3 { animation-delay: 1.6s, 3.2s; animation-duration: .7s, 6.6s; }
@keyframes qa-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes qa-zoom { from { transform: scale(1.07); } to { transform: none; } }
@keyframes qa-pop { from { opacity: 0; transform: translateY(14px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes qa-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) {
  .amb .chip, .amb .hero *, .amb .ticker-track, .reel.moving .reel-track { animation: none !important; }
}