/* Eva's Log · Pricing page layout
   Laid out to _design-export/pricing.dc.html. Shared pieces (header,
   footer, cards, paper, polaroids, washi) live in site.css. The copy is
   build 70's model, not the canvas's, which predates it. */

/* The small print (labels, per-period words, footnotes, the plus icons).
   Night keeps the token, which reads at about 6:1 on the sheets. On the
   paper the token measures 4.44:1 on a sheet and 4.08:1 on the ground,
   under the 4.5:1 that text this size needs, so Daybreak moves it 35
   percent of the way toward the secondary ink (about #706758: 5.38:1 and
   4.95:1). */
#main { --quiet-ink: var(--text-tertiary); }
:root[data-theme="daybreak"] #main { --quiet-ink: color-mix(in srgb, var(--text-tertiary) 65%, var(--text-secondary)); }

/* ---------- Hero ---------- */
.hero { max-width: 720px; margin: 0 auto; padding: 80px 16px 40px; text-align: center; }
@media (max-width: 600px) { .hero { padding-top: 56px; } }
.hero-badge {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
  animation: elReveal .8s .05s cubic-bezier(.22, 1, .36, 1) both;
}
/* A hairline on every side and a light fill, never one accented edge. */
.hero-badge span {
  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;
}
.hero h1 {
  font: 400 clamp(38px, 8vw, 58px)/1.08 var(--font-serif-display);
  margin: 0 0 14px;
  text-wrap: balance;
  animation: elReveal .8s .12s 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 .2s cubic-bezier(.22, 1, .36, 1) both;
}

/* ---------- The two plans ----------
   Two across from 720 px, one below, so the row is never short. */
.plans { max-width: 880px; margin: 0 auto; padding: 0 16px; }
.plans-grid { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: stretch; }
@media (min-width: 720px) { .plans-grid { grid-template-columns: repeat(2, 1fr); } }

.plan { height: 100%; }
/* A column, so the closing note sits on the bottom edge of both sheets
   side by side; the Premium sheet is the shorter list and used to end in
   a blank strip under its note. Flex margins don't collapse, so the
   gaps below are set as the sums the block layout used to give. */
.plan-sheet { padding: 30px 28px; height: 100%; display: flex; flex-direction: column; }
.plan-name { font: 400 34px/1.1 var(--font-serif-display); margin: 0 0 10px; }
.plan-lede { font: var(--type-subheadline); color: var(--text-secondary); margin: 0; text-wrap: pretty; }
.plan-subhead {
  font: var(--type-caption);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--quiet-ink);
  margin: 20px 0 10px;
}
.plan-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font: var(--type-subheadline);
  color: var(--text-secondary);
}
/* "pretty" keeps a single word ("months", "data") off the last line. */
.plan-list li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: baseline; text-wrap: pretty; }
/* The check mark is decoration, so screen readers get an empty alt text.
   The plain declaration first is the fallback for engines without it. */
.plan-list li::before { content: "\2713"; content: "\2713" / ""; color: var(--success); font-weight: 600; }
/* Readable on both palettes, because the renewal sentence is the one a
   reader most needs. The auto margin pushes it to the sheet's foot; the
   padding keeps at least the old 18 px above it. */
.plan-foot { font: var(--type-footnote); color: var(--quiet-ink); margin: auto 0 0; padding-top: 18px; text-wrap: pretty; }

.prices { display: flex; flex-direction: column; gap: 12px; margin: 0 0 14px; }
.price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.price-label {
  flex: 0 0 76px;
  font: var(--type-caption);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--quiet-ink);
}
.price { font: 400 44px/1 var(--font-serif-display); font-variant-numeric: tabular-nums; color: var(--text-primary); }
.price-per { font: var(--type-subheadline); color: var(--quiet-ink); }

.plans-note {
  font: var(--type-footnote);
  color: var(--quiet-ink);
  text-align: center;
  max-width: 560px;
  margin: 28px auto 0;
  text-wrap: pretty;
}

/* ---------- A family, between the plans and the questions ----------
   The site's wide-video paper (the home page's opener and quiet sheets):
   deckled sheet, 12 px of paper round the clip, tape at both shoulders.
   The family sits in the open back of a car; 2:1 keeps all three in
   frame, held a little high so the father's head never meets the edge. */
.family { max-width: 792px; margin: 0 auto; padding: 64px 16px 0; }
.family-paper { filter: drop-shadow(0 2px 3px rgba(31, 24, 54, .12)) drop-shadow(0 18px 28px rgba(31, 24, 54, .13)); }
.family-sheet { padding: 12px; }
.family-sheet video { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 15%; }
@media (max-width: 600px) {
  .family { padding-top: 52px; }
  .family-sheet { padding: 9px; }
  .family-sheet video { aspect-ratio: 16 / 9; }
}
.family .washi { top: -11px; width: 84px; }
.family .washi--left { left: 10%; transform: rotate(var(--washi-rot)); }
.family .washi--right { left: auto; right: 10%; transform: rotate(var(--washi-rot)); }

/* ---------- Fair questions ---------- */
.faq { max-width: 720px; margin: 0 auto; padding: 64px 16px 48px; }
.faq-title { font: 400 clamp(31px, 6vw, 42px)/1.15 var(--font-serif-display); text-align: center; margin: 0 0 30px; }
/* The folding rows themselves are shared and live in site.css. */

/* ---------- Take your time ----------
   Two keepsakes, the way the features page pairs a picture with its
   words: a polaroid of the clip, and the envelope polaroid laid over its
   corner. One column, centered, on a phone; side by side from 860 px.
   The cluster keeps a margin on its right and bottom for the envelope's
   overhang, so the pair centers as a pair and never runs past the page. */
.take-time { max-width: 880px; margin: 0 auto; padding: 32px 16px 24px; text-align: center; }
.take-time-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; justify-items: center; align-items: center; }
.keepsakes { position: relative; margin: 0 36px 26px 0; }
.take-photo video { width: min(280px, 68vw); aspect-ratio: 1; object-position: 60% 50%; }
.polaroid--envelope { position: absolute; right: -40px; bottom: -28px; }
.polaroid--envelope .frame { padding: 8px 8px 10px; box-shadow: 0 4px 12px rgba(31, 24, 54, .22); }
/* The painting is mostly paper with the envelope at its middle, so the
   crop holds the middle three fifths: shown whole at 110 px, the
   envelope was a speck about 45 px wide. */
.envelope-crop { width: 104px; height: 104px; overflow: hidden; }
.envelope-crop img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.6); }
@media (max-width: 480px) {
  .keepsakes { margin: 0 30px 22px 0; }
  .polaroid--envelope { right: -34px; bottom: -24px; }
  .envelope-crop { width: 86px; height: 86px; }
}
.take-time h2 { font: 400 clamp(31px, 6vw, 42px)/1.12 var(--font-serif-display); margin: 0 0 10px; text-wrap: balance; }
.take-time p { font: var(--type-subheadline); color: var(--text-secondary); margin: 0 auto; max-width: 560px; text-wrap: pretty; }
@media (min-width: 860px) {
  .take-time { padding-top: 40px; text-align: left; }
  .take-time-grid { grid-template-columns: auto minmax(0, 1fr); gap: 56px; justify-items: start; }
  /* Sized so the heading holds on one line beside the picture. */
  .take-time h2 { font-size: clamp(31px, 3.2vw, 40px); }
  .take-time p { margin: 0; max-width: 460px; }
}

/* ---------- Closing ---------- */
.cta { max-width: 720px; margin: 0 auto; padding: 48px 16px 96px; text-align: center; }
.cta h2 { font: 400 clamp(28px, 5vw, 36px)/1.12 var(--font-serif-display); margin: 0 0 12px; text-wrap: balance; }
/* Even lines, so "the full tour." doesn't trail on a line of its own. */
.cta p { font: var(--type-subheadline); color: var(--text-secondary); margin: 0; text-wrap: balance; }
.cta a { text-decoration: underline; text-underline-offset: 2px; }
/* Kept for launch, when the "Get Eva's Log" button returns to the closing section. */
.cta .ds-button { margin-top: 26px; padding: 16px 34px; font-size: 17px; text-decoration: none; }