/* Eva's Log · Home page layout
   Laid out to _design-export/index.dc.html. Shared pieces (header,
   footer, cards, paper, notes, polaroids, washi) live in site.css.
   Nothing here draws a stripe along one edge of a box: borders are
   hairlines on all four sides or none. */

/* ---------- Quiet ink ----------
   On paper, the tertiary ink (#7E7464) reads at about 4.1 to 1 against
   the ground and the quaternary (#A99C87) at about 2.4 to 1, both under
   the 4.5 to 1 that small text needs. This page's quiet lines (kickers,
   captions, footnotes) use a step between tertiary and secondary on
   paper, about 5 to 1, and keep the tertiary ink at night, where it
   already reads at about 6 to 1. */
:root { --home-quiet-ink: var(--text-tertiary); }
:root[data-theme="daybreak"] { --home-quiet-ink: color-mix(in srgb, var(--text-tertiary) 60%, var(--text-secondary)); }

/* ---------- Shared headings on this page ---------- */
.home-h2 {
  font: 400 clamp(31px, 6vw, 42px)/1.15 var(--font-serif-display);
  text-align: center;
  margin: 0 0 8px;
  text-wrap: balance;
}
.home-sub {
  font: var(--type-editorial-caption);
  color: var(--home-quiet-ink);
  text-align: center;
  max-width: 560px;
  margin: 0 auto 28px;
  text-wrap: pretty;
}
/* The text links are 44 pixels tall to the touch; the margin above
   gives back the 11 pixels the taller box adds over the words. */
.more-link { text-align: center; margin-top: 15px; font: var(--type-subheadline-emphasized); }
.more-link a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Family opener ---------- */
.opener {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 16px 24px;
}
.opener-paper { filter: drop-shadow(0 2px 3px rgba(31, 24, 54, .12)) drop-shadow(0 18px 28px rgba(31, 24, 54, .13)); }
.opener-sheet { padding: 12px; }
.opener-sheet video { width: 100%; aspect-ratio: 5 / 2; object-fit: cover; }
@media (max-width: 600px) { .opener-sheet video { aspect-ratio: 16 / 9; } }
.opener .washi { top: -11px; width: 84px; }

/* ---------- Hero ---------- */
.home-hero { position: relative; max-width: 1100px; margin: 0 auto; padding: 48px 16px; }
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
}
.hero-orb--a {
  top: -40px; left: -80px; width: 420px; height: 420px;
  background: radial-gradient(circle, color-mix(in srgb, var(--secondary) 16%, transparent), transparent 70%);
  animation: homeDriftA 16s ease-in-out infinite alternate;
}
.hero-orb--b {
  bottom: -60px; right: -60px; width: 380px; height: 380px;
  background: radial-gradient(circle, color-mix(in srgb, var(--sleep-accent) 14%, transparent), transparent 70%);
  animation: homeDriftB 18s ease-in-out infinite alternate;
}
@keyframes homeDriftA { from { transform: translate(0, 0); } to { transform: translate(60px, 40px); } }
@keyframes homeDriftB { from { transform: translate(0, 0); } to { transform: translate(-50px, -30px); } }

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 48px;
  align-items: center;
}
.hero-kicker {
  font: var(--type-caption);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--home-quiet-ink);
  margin-bottom: 18px;
  /* At phone width the line breaks in two even halves, not with one word left over. */
  text-wrap: balance;
  animation: elReveal .8s .05s cubic-bezier(.22, 1, .36, 1) both;
}
.hero-title {
  font: 400 clamp(42px, 9vw, 68px)/1.05 var(--font-serif-display);
  margin: 0 0 18px;
  text-wrap: balance;
  animation: elReveal .8s .12s cubic-bezier(.22, 1, .36, 1) both;
}
.hero-sub {
  font: var(--type-title3);
  font-weight: 400;
  color: var(--text-secondary);
  margin: 0 0 30px;
  max-width: 420px;
  text-wrap: pretty;
  animation: elReveal .8s .2s cubic-bezier(.22, 1, .36, 1) both;
}
.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  animation: elReveal .8s .28s cubic-bezier(.22, 1, .36, 1) both;
}
.hero-actions .ds-button { padding: 15px 30px; font-size: 17px; }
.hero-fine {
  font: var(--type-caption);
  color: var(--home-quiet-ink);
  margin-top: 20px;
  animation: elReveal .8s .34s cubic-bezier(.22, 1, .36, 1) both;
}
/* The top of Home: the real Timeline, tipped slightly, with two waving
   avatars sitting against its lower corners. */
.hero-shot {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 8px 0 24px;
  animation: elReveal 1s .25s cubic-bezier(.22, 1, .36, 1) both;
}
.hero-screen { --screen-w: 268px; margin: 0; transform: rotate(var(--rot)); }
.hero-wave {
  position: absolute; bottom: 0; height: min(230px, 34vw);
  aspect-ratio: var(--frame-w) / var(--frame-h);
  overflow: hidden;
  filter: drop-shadow(0 10px 14px rgba(31, 24, 54, .18));
}
/* The picture holds four poses from the app's wave, side by side; the box
   shows one at a time. They play in the order of the forearm's swing (the
   app renders them at 1.0, 0.6, 0.4 and 0.8 seconds into the wave, from
   one side to the other), twice, then the hand rests. */
.hero-wave img {
  display: block; width: 400%; max-width: none; height: 100%;
  transform: translateX(-50%);
  animation: heroWave 3.28s steps(1, end) infinite;
}
.hero-wave--right img { animation-delay: -1.6s; }
@keyframes heroWave {
  0.0% { transform: translateX(-50%); }
  2.74% { transform: translateX(0%); }
  5.49% { transform: translateX(-25%); }
  8.23% { transform: translateX(-75%); }
  10.98% { transform: translateX(-25%); }
  13.72% { transform: translateX(0%); }
  16.46% { transform: translateX(-50%); }
  19.21% { transform: translateX(0%); }
  21.95% { transform: translateX(-25%); }
  24.7% { transform: translateX(-75%); }
  27.44% { transform: translateX(-25%); }
  30.18% { transform: translateX(0%); }
  32.93% { transform: translateX(-50%); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) { .hero-wave img { animation: none; } }
.hero-wave--left { left: max(0px, calc(50% - 250px)); }
.hero-wave--right { right: max(0px, calc(50% - 250px)); }
@media (max-width: 420px) {
  .hero-screen { --screen-w: 230px; }
}

/* The working slice, in "Made for 2am". */
.slice-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

/* ---------- The working slice (a phone) ---------- */
.phone {
  position: relative;
  width: min(312px, 100%);
  height: 636px;
  border-radius: 52px;
  background: #1A1530;
  /* A hairline ring on every side keeps the frame visible on the night ground. */
  box-shadow: var(--shadow-overlay), inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 1px rgba(255, 255, 255, .08);
  padding: 10px;
}
/* At night the frame's #1A1530 is the ground's own color, so the phone
   had no outline. A deeper body and a brighter hairline let it read. */
:root:not([data-theme="daybreak"]) .phone {
  background: #0D0A18;
  box-shadow: var(--shadow-overlay), inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 1px rgba(255, 255, 255, .18);
}
.phone [hidden] { display: none !important; }
.phone-screen {
  position: relative;
  height: 100%;
  border-radius: 42px;
  background: var(--bg);
  overflow: hidden;
  padding: 18px 16px 14px;
  display: flex;
  flex-direction: column;
  transition: background .5s ease;
}
.phone-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 6px;
  color: var(--text-tertiary);
  font: var(--type-caption);
}
.phone-clock { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.phone-day { letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.phone-greeting { margin-top: 24px; padding: 0 4px; }
.phone-hello { font: italic 500 21px/1.35 var(--font-serif); color: var(--text-primary); text-wrap: pretty; min-height: 57px; }
.phone-baby { font: var(--type-caption); color: var(--text-tertiary); margin-top: 6px; }

.phone-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.demo-card { padding: 14px 16px; border-radius: 14px; }
.demo-label {
  font: var(--type-caption);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}
.demo-value {
  font: var(--type-timer-medium);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  margin-top: 4px;
  white-space: nowrap;
}

.demo-feed-top { display: flex; align-items: center; gap: 12px; }
.demo-feed-text { flex: 1; min-width: 0; }
.demo-breath {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--secondary);
  box-shadow: 0 0 10px var(--secondary);
  flex: none;
  animation: homeBreathe var(--dur-breath, 1.4s) ease-in-out infinite;
}
@keyframes homeBreathe { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.25); opacity: 1; } }
.demo-side-chip {
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--secondary);
  padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--secondary) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--secondary) 35%, transparent);
}
.demo-timer { font: var(--type-timer-medium); font-variant-numeric: tabular-nums; color: var(--text-primary); margin-top: 2px; }
.demo-done {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 8px 13px;
  border-radius: 999px;
  border: none;
  background: var(--secondary);
  color: var(--bg);
  font: var(--type-subheadline-emphasized);
  cursor: pointer;
  flex: none;
  transition: transform var(--dur-quick) var(--ease-press);
}
.demo-done svg { width: 16px; height: 16px; fill: currentColor; }
.demo-done:active { transform: scale(var(--press-scale)); }
.demo-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.demo-sides button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  min-height: 52px;
  padding: 6px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  color: var(--secondary);
  background: color-mix(in srgb, var(--secondary) 15%, transparent);
  transition: transform var(--dur-quick) var(--ease-press), background var(--dur-quick);
}
.demo-sides button b { font: 700 20px/1.1 var(--font-sans); }
.demo-sides button span { font: 500 12px/1.2 var(--font-sans); }
.demo-sides button[aria-pressed="true"] { background: var(--secondary); color: var(--bg); }
.demo-sides button:active { transform: scale(.97); }
.demo-switches { font: var(--type-caption); color: var(--text-tertiary); text-align: center; margin-top: 8px; min-height: 18px; }

.demo-pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sleep-accent) 14%, transparent);
  border: .5px solid color-mix(in srgb, var(--sleep-accent) 35%, transparent);
  font: var(--type-caption);
  font-weight: 500;
  color: var(--text-primary);
}
.demo-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sleep-accent); animation: homeBreathe 1.4s ease-in-out infinite; }
.demo-pill-time { color: var(--sleep-accent); font-variant-numeric: tabular-nums; }

.demo-diaper { padding: 12px; }
.demo-diaper-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.demo-diaper-buttons button {
  min-height: 64px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  font: var(--type-subheadline-emphasized);
  color: var(--text-primary);
  background: var(--surface-elevated);
  transition: transform var(--dur-quick) var(--ease-press), background var(--dur-quick);
}
.demo-diaper-buttons button:hover { background: color-mix(in srgb, var(--diaper-accent) 22%, var(--surface-elevated)); }
.demo-diaper-buttons button:active { transform: scale(.96); }

.phone-spacer { flex: 1; }
/* The toast floats just above the dock, so it never pushes the dock down. */
.demo-toast-wrap {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 124px;
  z-index: 2;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.demo-toast {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 10px 14px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: .5px solid color-mix(in srgb, var(--outline) 40%, transparent);
  box-shadow: var(--shadow-floating);
  animation: homeRise .35s cubic-bezier(.22, 1, .36, 1) both;
}
.demo-toast-tick {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--bg);
  background: var(--toast-accent, var(--success));
}
.demo-toast [data-demo-toast-msg] { font: 500 14px/1.3 var(--font-sans); color: var(--text-primary); text-wrap: balance; }

.phone-dock {
  border-radius: 24px;
  padding: 12px 8px 10px;
  display: flex;
  justify-content: space-around;
}
.qa {
  --qa: var(--primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  min-width: 64px;
}
.qa-circle {
  position: relative;
  width: var(--tap-target-xl, 56px);
  height: var(--tap-target-xl, 56px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--qa);
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--qa) 20%, transparent), color-mix(in srgb, var(--qa) 8%, transparent));
  border: 1.5px solid color-mix(in srgb, var(--qa) 45%, transparent);
  transition: transform var(--dur-quick) var(--ease-press), box-shadow var(--dur-quick), background var(--dur-quick);
}
.qa-circle svg { width: 22px; height: 22px; fill: currentColor; }
.qa:active .qa-circle { transform: scale(var(--press-scale)); }
.qa[aria-pressed="true"] .qa-circle,
.qa[aria-expanded="true"] .qa-circle,
.qa.is-on .qa-circle {
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--qa) 32%, transparent), color-mix(in srgb, var(--qa) 14%, transparent));
  border-color: color-mix(in srgb, var(--qa) 85%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--qa) 40%, transparent);
}
.qa-label { font: var(--type-caption); color: var(--text-secondary); }

/* The caption under the phone. Without JavaScript the phone is a
   picture, so the invitation to tap it is not shown. */
.demo-note { max-width: 320px; }
.demo-note .sheet { padding: 14px 22px 12px; text-align: center; font: var(--type-editorial-caption); color: var(--text-secondary); }
.no-js .demo-note-tap { display: none; }

/* ---------- One app, the whole arc ---------- */
.arc { max-width: 880px; margin: 0 auto; padding: 72px 16px; }
/* The pill and its panels are shared with Features (site.css). */
@keyframes homeRise { from { transform: translateY(12px); } to { transform: none; } }
/* The contraceptive line is a safety line, so it reads, not whispers. */
.arc .footnote { color: var(--home-quiet-ink); }

/* ---------- Made for 2am ----------
   The working slice beside eight notes. On a wide screen the notes run
   two across beside the phone, four rows deep; narrower, the phone sits
   above them and they run two across or one. No row is ever short. */
.twoam { max-width: 1100px; margin: 0 auto; padding: 48px 16px; }
.twoam .home-h2 { margin-bottom: 36px; }
.twoam-layout { display: grid; gap: 36px; align-items: center; }
/* The tour link sits under the notes it follows, centered on them. */
.twoam-notes { min-width: 0; }
@media (min-width: 960px) {
  .twoam-layout { grid-template-columns: 330px minmax(0, 1fr); gap: 48px; }
}
.home-notes { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 560px) { .home-notes { grid-template-columns: repeat(2, 1fr); } }
.home-notes .sheet { padding: 22px; }
.note-head { --accent: var(--primary); display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.note-head .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); flex: none; }
.note-head .title { font: var(--type-headline); margin: 0; }
.home-notes .body { font: var(--type-subheadline); color: var(--text-secondary); text-wrap: pretty; }

/* ---------- It goes so fast ---------- */
.moments { max-width: 1100px; margin: 0 auto; padding: 72px 16px 8px; }
.moments .home-sub { margin-bottom: 40px; }
/* Three across, or one per row, never two and one. 992 is three 300px
   cards, two 30px gaps and the section's 32px of padding. The columns may
   give up a few pixels so a desktop scrollbar never pushes the row wider
   than the page. */
.moments-row { display: grid; grid-template-columns: min(300px, 100%); justify-content: center; align-items: start; gap: 30px; }
.moment-wrap { width: 100%; }
.moment { width: 100%; }
.moment video { width: 100%; aspect-ratio: 4 / 5; }
@media (min-width: 992px) {
  .moments-row { grid-template-columns: repeat(3, minmax(0, 300px)); }
  .moment--low { margin-top: 26px; }
  .moment--mid { margin-top: 10px; }
}

/* ---------- The avatar ---------- */
.avatar-promise { font: italic 500 19px/1.4 var(--font-serif); color: var(--text-primary); margin: 0 auto 6px; max-width: 520px; text-wrap: balance; }

/* ---------- Privacy ---------- */
.privacy-block { max-width: 800px; margin: 0 auto; padding: 96px 16px; text-align: center; }
.privacy-display { font: 400 clamp(34px, 7vw, 52px)/1.15 var(--font-serif-display); margin: 0; text-wrap: balance; }
.privacy-display span { display: block; }
.privacy-display .privacy-hl { color: var(--primary); }
.privacy-accent { font: var(--type-editorial-accent); color: var(--text-secondary); margin: 26px 0 14px; }
.privacy-body { font: var(--type-body); color: var(--text-secondary); max-width: 520px; margin: 0 auto; text-wrap: pretty; }
.privacy-kicker { font: var(--type-caption); letter-spacing: .14em; text-transform: uppercase; color: var(--home-quiet-ink); margin-bottom: 14px; }
.privacy-compare { font: var(--type-subheadline); color: var(--text-secondary); max-width: 560px; margin: 18px auto 0; text-wrap: pretty; }

/* ---------- Pricing teaser ---------- */
.pricing-teaser { max-width: 880px; margin: 0 auto; padding: 24px 16px 72px; }
.badge-wrap { display: flex; justify-content: center; margin-bottom: 14px; }
.price-badge {
  font: var(--type-caption);
  color: var(--primary);
  border: 1px dashed color-mix(in srgb, var(--primary) 40%, transparent);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border-radius: 999px;
  padding: 6px 14px;
  white-space: nowrap;
}
.pricing-teaser .home-h2 { margin-bottom: 10px; }
.pricing-lead {
  font: var(--type-subheadline);
  color: var(--text-secondary);
  text-align: center;
  max-width: 580px;
  margin: 0 auto 32px;
  text-wrap: pretty;
}
/* Two cards: side by side, or one above the other. */
.price-cards { display: grid; grid-template-columns: 1fr; gap: 24px; max-width: 660px; margin: 0 auto; }
@media (min-width: 600px) { .price-cards { grid-template-columns: repeat(2, 1fr); } }
.price-card .sheet { padding: 28px; height: 100%; }
.price-name { font: var(--type-caption); letter-spacing: .12em; text-transform: uppercase; color: var(--home-quiet-ink); margin-bottom: 10px; }
.price-line { display: flex; align-items: baseline; gap: 8px; }
.price { font: 400 42px/1 var(--font-serif-display); }
.per { font: var(--type-subheadline); color: var(--home-quiet-ink); }
.price-note { font: var(--type-footnote); color: var(--text-secondary); margin-top: 12px; }
/* The currency and Family Sharing line is part of the price, so it takes
   the quiet ink rather than the footnote's fainter one. */
.pricing-foot { text-align: center; max-width: 560px; margin: 22px auto 0; color: var(--home-quiet-ink); }

/* ---------- The quiet weeks ---------- */
.quiet { max-width: 960px; margin: 0 auto; padding: 24px 16px 48px; }
.quiet-paper { filter: drop-shadow(0 2px 3px rgba(31, 24, 54, .12)) drop-shadow(0 18px 28px rgba(31, 24, 54, .13)); }
.quiet-sheet { padding: 12px; }
.quiet-sheet video { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
@media (max-width: 600px) { .quiet-sheet video { aspect-ratio: 16 / 9; } }
.quiet .washi { top: -11px; width: 84px; }
.quiet-caption { font: var(--type-editorial-caption); color: var(--home-quiet-ink); text-align: center; margin: 16px 0 0; }

/* ---------- Closing ---------- */
.home-cta { max-width: 760px; margin: 0 auto; padding: 48px 16px 96px; text-align: center; }
.cta-polaroid { display: inline-block; margin-bottom: 26px; }
.cta-polaroid img { width: 132px; height: 132px; }
.home-cta h2 { font: 400 clamp(33px, 6.5vw, 46px)/1.12 var(--font-serif-display); margin: 0 0 12px; text-wrap: balance; }
.home-cta p { font: var(--type-subheadline); color: var(--text-secondary); margin: 0; }

/* ---------- What you gain ----------
   Four cards: four across, two across or one, never a short row. */
.gain { max-width: 1100px; margin: 0 auto; padding: 48px 16px 0; }
.gain-cards { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 560px) { .gain-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .gain-cards { grid-template-columns: repeat(4, 1fr); } }
.gain-cards .sheet { padding: 22px; }
.gain-cards .title { font: var(--type-headline); margin-bottom: 6px; }
.gain-cards .body { font: var(--type-subheadline); color: var(--text-secondary); text-wrap: pretty; }
.gain-compare { font: var(--type-editorial-caption); color: var(--home-quiet-ink); text-align: center; max-width: 620px; margin: 26px auto 0; text-wrap: pretty; }