/* Eva's Log · Privacy page layout
   Short on purpose (owner, 2026-10-03: "make the things expandable so it
   doesn't look like a wall of words"): the promise, seven points that
   open on a tap beside the app's own promise screen, one comparison
   line, then the full policy with one folding row per section. Shared
   pieces (header, footer, paper, labels, the folding rows) live in
   site.css. */

/* ---------- Hero ---------- */
.pv-hero { max-width: 720px; margin: 0 auto; padding: 88px 16px 8px; text-align: center; }
.pv-hero .kicker { letter-spacing: .14em; margin-bottom: 16px; animation: elReveal .8s .05s cubic-bezier(.22, 1, .36, 1) both; }
.pv-hero h1 {
  font: 400 clamp(38px, 8vw, 58px)/1.08 var(--font-serif-display);
  margin: 0 0 18px;
  text-wrap: balance;
  animation: elReveal .8s .12s cubic-bezier(.22, 1, .36, 1) both;
}
.pv-lede {
  font: var(--type-title3);
  font-weight: 400;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
  text-wrap: pretty;
  animation: elReveal .8s .2s cubic-bezier(.22, 1, .36, 1) both;
}
.pv-jump { font: var(--type-subheadline-emphasized); margin: 10px 0 0; animation: elReveal .8s .28s cubic-bezier(.22, 1, .36, 1) both; }
/* The link looks the same, but its tap area is a full 44 points tall. */
.pv-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; }

/* ---------- The short version ----------
   The points first and the phone after them on a phone; side by side,
   the phone on the left, from 820 px. */
.pv-short { max-width: 940px; margin: 0 auto; padding: 40px 16px 32px; }
.pv-short-grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: start; }
.pv-short-screen { --screen-w: 250px; order: 2; }
@media (min-width: 820px) {
  .pv-short-grid { grid-template-columns: 270px minmax(0, 1fr); gap: 48px; }
  .pv-short-screen { order: 0; position: sticky; top: 112px; }
}
.pv-short-body .h2-serif { margin-bottom: 18px; }
.pv-compare { font: var(--type-subheadline); color: var(--text-secondary); max-width: 640px; margin: 22px 0 0; text-wrap: pretty; }
/* Caption size, secondary ink: tertiary on the paper ground sits near
   4:1 at 13px. */
.pv-footnote { max-width: 640px; color: var(--text-secondary); }

/* ---------- The formal policy ---------- */
.pv-policy { max-width: 880px; margin: 0 auto; padding: 48px 16px 24px; }
.pv-policy-head { margin-bottom: 8px; }
.pv-intro { font: var(--type-subheadline); color: var(--text-secondary); margin: 0 0 22px; max-width: 640px; text-wrap: pretty; }
#policy { scroll-margin-top: 104px; }

/* The document and its folding rows are shared with Terms (site.css). */

/* ---------- Closing ---------- */
.pv-cta { max-width: 720px; margin: 0 auto; padding: 56px 16px 96px; text-align: center; }
.pv-cta h2 { font: 400 clamp(31px, 6vw, 42px)/1.12 var(--font-serif-display); margin: 0 0 12px; }
.pv-cta p { font: var(--type-subheadline); color: var(--text-secondary); margin: 0; }

@media (max-width: 480px) {
  .pv-hero { padding-top: 64px; }
}