/* Eva's Log · Features page layout
   Laid out to _design-export/features.dc.html. Shared pieces (header,
   footer, cards, paper, notes, polaroids) live in site.css. */

/* ---------- Hero ---------- */
.hero { max-width: 720px; margin: 0 auto; padding: 72px 16px 32px; text-align: center; }
.hero h1 {
  font: 400 clamp(38px, 8vw, 56px)/1.08 var(--font-serif-display);
  margin: 0 0 14px;
  animation: elReveal .8s .05s cubic-bezier(.22, 1, .36, 1) both;
}
.hero p {
  font: var(--type-title3);
  font-weight: 400;
  color: var(--text-secondary);
  margin: 0;
  text-wrap: pretty;
  animation: elReveal .8s .15s cubic-bezier(.22, 1, .36, 1) both;
}

/* The opening says what the app is before anything else (owner,
   2026-10-03: "lead with ... it's an all-in-one app ... and it's privacy
   focused"): a kicker, the promise, four points, then the stage switch.
   The avatars follow. */
.hero--all { padding-bottom: 20px; }
.hero--all .kicker { letter-spacing: .14em; margin-bottom: 14px; animation: elReveal .8s 0s cubic-bezier(.22, 1, .36, 1) both; }
.hero--all p { max-width: 620px; margin: 0 auto; }

.pillars {
  max-width: 980px;
  margin: 0 auto;
  padding: 16px 16px 8px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 560px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .pillars { grid-template-columns: repeat(4, 1fr); } }
.pillar {
  padding: 20px 20px 18px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--outline) 40%, transparent);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow: var(--shadow-card);
}
.pillar-dot { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); margin-bottom: 12px; }
.pillar-title { font: 400 22px/1.2 var(--font-serif-display); margin: 0 0 6px; color: var(--text-primary); }
.pillar p { font: var(--type-subheadline); line-height: 1.5; color: var(--text-secondary); margin: 0; text-wrap: pretty; }

/* Shorter on a phone (owner, 2026-10-03): the trying and pregnancy notes
   run as one row you swipe, the next card peeking in at the edge, and the
   Outfits screenshot beside the growing-up row stays off the phone, since
   the same screen is in the strip of app screens above it. */
@media (max-width: 600px) {
  .stack--chapter .notes {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    margin: 0 -16px;
    padding: 6px 16px 14px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .stack--chapter .notes::-webkit-scrollbar { display: none; }
  .stack--chapter .notes > .note { flex: 0 0 78%; scroll-snap-align: center; }
  .grows-phone { display: none; }
}

/* On a phone the four points sit in one card, a row each, so they read
   in a glance instead of filling three screens. */
@media (max-width: 559px) {
  .pillars {
    margin: 0 16px;
    padding: 2px 18px;
    gap: 0;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--outline) 40%, transparent);
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    box-shadow: var(--shadow-card);
  }
  .pillar {
    display: grid;
    grid-template-columns: 10px 1fr;
    column-gap: 10px;
    align-items: center;
    padding: 14px 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .pillar + .pillar { border-top: 1px solid color-mix(in srgb, var(--outline) 28%, transparent); }
  .pillar-dot { margin: 0; }
  .pillar-title { font-size: 20px; margin: 0; }
  .pillar p { grid-column: 2; margin-top: 4px; }
  .stages { padding-top: 40px; }
  .stages .arc-screen { --screen-w: 160px; }
}

.stages { max-width: 880px; margin: 0 auto; padding: 48px 16px 40px; text-align: center; }
.stages .h2-serif { margin-bottom: 8px; }
.stages-sub { font: var(--type-subheadline); color: var(--text-secondary); margin: 0 auto 22px; max-width: 560px; text-wrap: pretty; }
.stages .arc-panels { text-align: left; }
.stages .footnote { color: color-mix(in srgb, var(--text-tertiary) 75%, var(--text-secondary)); }
.stage-more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; font: var(--type-subheadline-emphasized); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Headings break into even lines, so no word sits alone on the last
   line ("one / thumb", "with / you", "report / cards"); the feature
   lines avoid a one-word last line the same way. */
.hero h1, .demo-title, .week-num, .h2-serif, .kicker, .cta h2, .cta p { text-wrap: balance; }
.lines li { text-wrap: pretty; }

/* ---------- The two demos ---------- */
/* The weeks sheet keeps 32 px above and below, half of the 64 px the
   feature stack keeps between its sections; the dial at the end of the
   tour keeps 24 above and 32 below. */
.demo { max-width: 880px; margin: 0 auto; padding: 24px 16px 32px; }
.demo--weeks { padding: 32px 16px; }
.demo-title { font: 400 clamp(28px, 5.5vw, 34px)/1.15 var(--font-serif-display); margin-bottom: 16px; }
/* Wide enough that the longest line ("Written for the other parent too...")
   holds on one line at desktop; centered lines that do wrap break evenly. */
.demo-lines { max-width: 600px; margin: 24px auto 0; text-align: center; }
.demo-lines li { text-wrap: balance; }

.dial-sheet { padding: 32px 24px; text-align: center; }
.dial { width: min(290px, 74vw); height: auto; margin: 0 auto; }
.dial .ring { fill: none; stroke: color-mix(in srgb, var(--outline) 60%, transparent); stroke-width: 1.5px; }
.dial .arc { fill: none; stroke-width: 24px; stroke-linecap: round; opacity: .22; }
/* The app's cycle colors since build 67, the same on every palette. */
.dial .arc--period { stroke: #CC4530; }
.dial .arc--fertile { stroke: #9ED0F5; opacity: .45; }
.dial .arc--predicted { stroke: #E0523A; stroke-width: 2px; stroke-dasharray: 4 4; stroke-linecap: butt; opacity: .7; }
.dial .label { text-anchor: middle; font: var(--type-caption); fill: var(--text-tertiary); letter-spacing: .12em; }
.dial .day { text-anchor: middle; font: 600 44px var(--font-serif); fill: var(--text-primary); }
.dial .of { text-anchor: middle; font: 600 11px -apple-system, sans-serif; fill: var(--text-tertiary); letter-spacing: .12em; }
.dial .dot { cursor: pointer; transition: r .15s ease; }
.dial-phase { font: italic 500 20px/1.3 var(--font-serif); margin-top: 14px; }
.dial-line { font: var(--type-caption); color: var(--text-tertiary); margin-top: 4px; }
.dial-controls { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.round-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: .5px solid var(--outline);
  background: color-mix(in srgb, var(--surface-elevated) 80%, transparent);
  color: var(--text-primary);
  font-size: 20px;
  cursor: pointer;
  transition: transform var(--dur-quick) var(--ease-spring);
}
.round-btn:hover { transform: scale(1.08); }
.legend { display: inline-flex; align-items: center; gap: 6px; font: var(--type-caption); color: var(--text-tertiary); }
.legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--c); }
.legend--dashed i { width: 12px; height: 12px; background: transparent; border: 1.5px dashed var(--c); }
.dial-key { display: grid; grid-template-columns: auto auto; gap: 6px 16px; justify-items: start; }
/* On a phone the two arrows stay side by side and the key sits under them. */
@media (max-width: 480px) {
  .dial-key { order: 3; flex-basis: 100%; justify-content: center; }
}

.weeks-sheet { padding: 30px; }
/* One column (the painting over the text) until the text column is wide
   enough to hold all nine weeks on one row; then the painting takes only
   its own width and the text gets the rest. The strip is 492 px wide. */
.weeks-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: center; }
@media (min-width: 880px) {
  .weeks-grid { grid-template-columns: auto minmax(0, 1fr); gap: 36px; padding-left: 12px; }
}
.weeks-text { text-align: center; }
.week-num { font: 400 34px/1.15 var(--font-serif-display); margin-bottom: 4px; }
.week-size { font: var(--type-editorial-accent); color: var(--text-secondary); min-height: 32px; }
.week-measure { font: var(--type-caption); color: var(--text-tertiary); margin-top: 6px; }
/* Every week stays in view. The strip used to scroll inside its column,
   which hid W23 and W24 at desktop and W21 to W24 on a phone with no sign
   they were there. It now wraps instead: one row of nine where there is
   room, two even rows (five over four) on a phone. Each week is a full
   44 px target. */
.weeks-strip-wrap { margin-top: 18px; padding: 4px 2px; }
.weeks-strip-wrap .ds-weekstrip { justify-content: center; flex-wrap: wrap; overflow: visible; margin: 0 auto; }
.weeks-strip-wrap .ds-weekstrip button { flex: 0 0 44px; min-height: 44px; justify-content: center; padding: 8px 4px; }
@media (max-width: 599.98px) {
  .weeks-strip-wrap .ds-weekstrip { max-width: 286px; }
}
.weeks-note { font: var(--type-caption); color: var(--text-tertiary); margin-top: 10px; text-wrap: balance; }
.polaroid--weeks .frame { padding: 8px 8px 10px; }
.polaroid--weeks img { display: block; width: 200px; height: 200px; object-fit: cover; }

/* ---------- The feature stack ---------- */
.stack { max-width: 880px; margin: 0 auto; padding: 40px 16px; display: flex; flex-direction: column; gap: 64px; }
/* Two columns from 640 px, one below. On a phone the picture or card
   follows its own heading and lines: in source order the wake-window card,
   the first-smile painting and the avatar came first, so on one column
   each sat under the section before it and read as part of it. */
.two-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
@media (min-width: 640px) {
  .two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639.98px) {
  .two-col > .polaroid, .two-col > .nap-card, .two-col > .screen { order: 2; }
}
/* Four across, two across or one: every notes group has four or eight
   cards, so no row is ever left short. */
.notes { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 480px) { .notes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .notes { grid-template-columns: repeat(4, 1fr); } }

.polaroid--feeding video { width: 100%; max-width: 300px; aspect-ratio: 4 / 5; }
/* 200 px rather than the canvas's 170: at 170 the paintings sat small in
   a column twice their width. Both sources are 400 px or more, so they
   stay sharp on a 2x screen. */
.polaroid--square img { width: 200px; height: 200px; }
.polaroid--square .caption { margin-top: 8px; }
.polaroid--selfie .frame { padding: 9px 9px 11px; }
.polaroid--selfie video { width: 200px; aspect-ratio: 1; }

.nap-card { --card-shadow: var(--shadow-card); border-radius: 20px; padding: 24px; }
.nap-label { font: var(--type-caption); letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 12px; }
.nap-time { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-bottom: 12px; }
.nap-time b { font: var(--type-timer-large); font-variant-numeric: tabular-nums; }
.nap-time span { font: var(--type-caption); color: var(--text-tertiary); }
.nap-card .caption { font: var(--type-caption); color: var(--text-tertiary); margin-top: 10px; }

/* The photo takes its own width and the words take the rest. On two equal
   columns the photo floated in empty space while the lines broke into
   one-word tails ("window", "handoff"). */
.share-sheet { padding: 24px 20px; }
.share-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; }
@media (min-width: 640px) {
  .share-sheet { padding: 34px 34px 34px 44px; }
  .share-grid { grid-template-columns: auto minmax(0, 1fr); gap: 40px; }
}
.share-text .h2-serif { margin-bottom: 12px; }
.share-text .kicker { margin-bottom: 8px; }

/* The small print, raised from the quaternary gray (2.4 to 2.6 to 1 on
   the paper, 3.5 to 1 at night) to the tertiary one the captions use. */
.dial-sheet .footnote, .stack .footnote { color: var(--ink-quiet); }

/* ---------- Closing ---------- */
.cta { max-width: 720px; margin: 0 auto; padding: 48px 16px 96px; text-align: center; }
.cta h2 { font: 400 clamp(31px, 6vw, 42px)/1.12 var(--font-serif-display); margin: 0 0 12px; }
.cta p { font: var(--type-subheadline); color: var(--text-secondary); margin: 0 0 26px; }
/* Kept for launch, when the "Get Eva's Log" button returns to the closing section. */
.cta .ds-button { padding: 16px 34px; font-size: 17px; }

/* ---------- App screens ----------
   The widgets lead the notes about life around the iPhone. */
.eco-screen { margin-bottom: 28px; }

/* ---------- The three stages ----------
   Three links under the screens, then a chapter for each stage: a short
   heading, its demo, and its notes. */
.chapters { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 32px 16px 0; }
.chapters a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
  border-radius: 999px; border: 1px solid var(--outline);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  font: var(--type-subheadline-emphasized); color: var(--text-primary); text-decoration: none;
}
.chapters a:hover { background: var(--surface); }
.chapter-head { max-width: 720px; margin: 0 auto; padding: 72px 16px 8px; text-align: center; scroll-margin-top: 96px; }
.chapter-head--compare { padding-top: 40px; }
.chapter-head .section-label { justify-content: center; }
.chapter-sub { font: var(--type-subheadline); color: var(--text-secondary); margin: 10px auto 0; max-width: 600px; text-wrap: pretty; }
.stack--chapter { padding-top: 24px; padding-bottom: 8px; }
.chapter-lines { margin-top: 22px; }

/* ---------- Compared with the apps around it ---------- */
.compare { max-width: 880px; margin: 0 auto; padding: 24px 16px 8px; }
.compare-rows { display: grid; gap: 12px; margin-top: 24px; }
.compare-row {
  display: grid; grid-template-columns: 1fr; gap: 8px 22px;
  padding: 16px 18px; border: 1px solid var(--outline); border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
}
@media (min-width: 720px) { .compare-row { grid-template-columns: 120px 1fr 1fr; align-items: baseline; } }
.compare-topic { font: var(--type-caption); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-quiet); }
.compare-who { display: block; font: var(--type-caption); color: var(--ink-quiet); margin-bottom: 2px; }
.compare-ours { font: var(--type-subheadline-emphasized); color: var(--text-primary); text-wrap: pretty; }
.compare-theirs { font: var(--type-subheadline); color: var(--text-secondary); text-wrap: pretty; }
.compare-note { margin-top: 14px; text-align: center; }
.compare .more-link { text-align: center; margin-top: 10px; }
.compare .more-link a { display: inline-flex; align-items: center; min-height: 44px; font: var(--type-subheadline-emphasized); }

/* ---------- Apple Watch ----------
   Owner, 2026-10-03: "include a portion about the apple watch on the
   features page". Real screens of the Watch app (assets/screens/watch-*,
   made by tools/build_watch_screens.py) in a drawn watch face: a dark
   rounded frame, no Apple product art. Two across on a phone, four on a
   wide screen, so no row is left short. */
.watch { max-width: 880px; margin: 0 auto; padding: 8px 16px 24px; }
.chapter-head--watch { padding: 48px 0 8px; }
.watch-row {
  list-style: none; margin: 30px auto 34px; padding: 0; max-width: 760px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px;
}
@media (min-width: 720px) { .watch-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
.watch-screen {
  --watch-w: 156px;
  --watch-pad: calc(var(--watch-w) * .055);
  --watch-r: calc(var(--watch-w) * .2);
  width: min(var(--watch-w), 100%);
  margin: 0 auto;
  transform: rotate(var(--rot, 0deg));
}
.watch-screen .device {
  padding: var(--watch-pad);
  border-radius: calc(var(--watch-r) + var(--watch-pad));
  background: linear-gradient(160deg, #36333d, #151419 55%, #1d1b22);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .10),
    0 1px 2px rgba(0, 0, 0, .16),
    0 16px 30px -14px rgba(0, 0, 0, .42),
    0 36px 56px -36px rgba(0, 0, 0, .36);
}
.watch-screen img { display: block; width: 100%; height: auto; border-radius: var(--watch-r); }
.watch-screen figcaption { font: var(--type-editorial-caption); color: var(--text-secondary); text-align: center; margin-top: 12px; text-wrap: balance; }
.watch .footnote { color: var(--ink-quiet); text-align: center; }