/* ==========================================================================
   Pricing page (/pricing). Linked from pricing.html only, after styles.css.

   WEBSITE_CLARITY_PLAN.md section 14.2, on top of section 13: the prices and
   what a pack includes sit side by side, so a reader sees what they buy and
   what it costs together. Section 14.7: each price and its count of photos
   are one block, "$49" over "for 500 photos", and no row says what one
   photo costs. The reader is 55 or older: nothing a visitor has
   to read is under 16px (the root is 18px on a laptop and 17px on a phone,
   so the floor here is 0.95rem), supporting lines are 1rem, and every
   control is at least 44px tall. Colors come from the custom properties in
   styles.css only, so the light and dark themes both follow.

   Hooks the page's scripts and tests rely on, kept whatever the look:
   [data-tier], .pricing-cta, .pricing-card__amount, .pricing-card__capacity,
   .pricing-start__trial-cta, [data-live-label], [data-start-cta], and
   data-posthog-view="pricing_table_viewed".
   ========================================================================== */

/* ---------- Header ---------- */
/* Shorter than the site default, so the price list starts on the first
   laptop screen. */
.page-header { padding: 2.75rem 0 1.4rem; }
.page-header .ornament { margin: 0.6rem 0 0.8rem; }
.page-header__subtitle { max-width: 48rem; }

/* Only for visitors who came from a free app or the scanning page. */
.pricing-from {
  max-width: 40rem;
  margin: 1.3rem auto 0;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  font-family: var(--font-ui);
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--text-primary);
  text-align: left;
}
.pricing-from p { margin: 0; color: var(--text-primary); }
.pricing-from[hidden],
.pricing-from p[hidden] { display: none; }

/* Twenty pages link /pricing#timeline-scan: land below the sticky nav. */
#timeline-scan,
#family-library { scroll-margin-top: 6.5rem; }

/* ---------- Timeline Scan: the rows and what every pack includes ---------- */
.pscan { padding: 0.4rem 0 3rem; }
/* As wide as the header row (1200px), so a row's name, price and button
   share one line beside the includes card on a laptop. */
.pscan > .container { max-width: 1200px; }

.pscan__title {
  margin: 0 0 0.3rem;
  font-size: 1.8rem;
  line-height: 1.25;
  text-align: center;
}
.pscan__lead {
  margin: 0 auto 1.4rem;
  font-family: var(--font-ui);
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--text-secondary);
  text-align: center;
}

/* Short lines that wrap on a phone break into even halves, not an orphan. */
.pscan__title,
.pscan__lead,
.plist__bulk,
.pknow__line,
.pfam__title,
.pother__line { text-wrap: balance; }

/* One column (the rows first, so a phone shows the prices first), then two
   from 960px: the rows on the left, the includes card on the right. */
.pscan__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.6rem;
  max-width: 860px;
  margin: 0 auto;
}

/* The five rows. */
.plist {
  --pic: 2.6rem;
  --gap: 0.8rem;
  --pad-x: 0.9rem;
  --btn-w: 10.4rem;
  /* The price column on the one-line row: "for 10,000 photos" is 9.1rem. */
  --price-w: 9.5rem;
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A row, stacked (tablets, large phones, and the narrow two-column band):
   the picture beside the name and what the pack is like, which get the
   whole width; under them the price and its count on the left and the
   button on the right. Phones under 480px have their own shape, below. */
.plist__row {
  position: relative;
  display: grid;
  grid-template-columns: var(--pic) minmax(0, 1fr) var(--btn-w);
  grid-template-areas:
    "pic   what  what"
    "price price btn";
  align-items: center;
  column-gap: var(--gap);
  row-gap: 0.8rem;
  padding: 0.95rem var(--pad-x) 1rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

/* The one recommendation: an accent frame, a tinted ground and the pill,
   which sits on the frame's top edge so it costs the row no height. */
.plist__row--pick {
  margin-top: 0.6rem;
  background: var(--accent-light);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.plist__pic {
  grid-area: pic;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--pic);
  height: var(--pic);
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent);
}
.plist__row--pick .plist__pic { background: var(--card-bg); }
.plist__pic svg { width: 66%; height: 66%; }

.plist__what { grid-area: what; min-width: 0; }

.plist__name {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
  color: var(--text-primary);
}

.plist__pill {
  position: absolute;
  top: 0;
  left: calc(var(--pad-x) + var(--pic) + var(--gap));
  transform: translateY(-50%);
  padding: 0.12rem 0.75rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg-secondary);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
/* The dark theme's accent is a light gold: dark words on it. */
[data-theme="dark"] .plist__pill { color: var(--bg-primary); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .plist__pill { color: var(--bg-primary); }
}

.plist__covers {
  margin: 0.15rem 0 0;
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--text-secondary);
  text-wrap: balance;
}
/* What the pack is like ("About one box of prints"). The hook keeps its old
   name for the tests; its rules live here. */
.plist .pricing-card__anchor {
  margin: 0;
  font-size: inherit;
  font-style: normal;
  color: var(--text-secondary);
}

/* The price, and directly under it how many photos it buys, one block that
   reads as one phrase: "$49" over "for 500 photos". Left-aligned while the
   row is stacked, right-aligned against the button when it is on one line;
   both lines keep the same edge. */
.plist__price {
  grid-area: price;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  margin: 0;
  text-align: left;
}
.plist__amount,
.plist .pricing-card__amount {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
}
/* "for 500 photos" on one line: the word quiet, the count in the primary
   colour at regular weight. The price above is the one bold slab; the count
   answers "for" by colour alone, so the row does not carry two (the owner:
   both bold was too heavy). The sync script writes the count into
   .pricing-card__capacity. */
.plist__for {
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--text-secondary);
  white-space: nowrap;
}
.plist .pricing-card__capacity {
  margin: 0;
  font-family: var(--font-ui);
  font-size: inherit;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--text-primary);
}

.plist__btn { grid-area: btn; }
.plist .plist__btn.btn {
  width: 100%;
  min-height: 48px;
  padding: 0.6rem 0.7rem;
  font-size: 0.95rem;
  white-space: nowrap;
}

/* A row on one line (a single column from 800px, and beside the includes
   card from 1180px): picture, name and what it is like, price and count,
   button. The price column grows past --price-w rather than clip a longer
   count. The trial's price is one word, so its column shrinks and the line
   beside it grows. */
@media (min-width: 800px) and (max-width: 959.98px), (min-width: 1180px) {
  .plist__row {
    grid-template-columns: var(--pic) minmax(0, 1fr) minmax(var(--price-w), max-content) var(--btn-w);
    grid-template-areas: "pic what price btn";
    padding: 0.8rem var(--pad-x);
  }
  .plist__row--trial {
    grid-template-columns: var(--pic) minmax(0, 1fr) auto var(--btn-w);
  }
  .plist__price { align-items: flex-end; text-align: right; }
}

/* What every pack includes: one card, an icon and a short label a line. */
.pincl {
  padding: 1.2rem 1rem 1.1rem 1.1rem;
  background: var(--bg-warm);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
}
.pincl__title {
  margin: 0 0 0.55rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--text-primary);
}
.pincl__list { margin: 0; padding: 0; list-style: none; }
.pincl__list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.3rem 0;
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.35;
  color: var(--text-primary);
}
.pincl__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--accent);
}
.pincl__icon svg { width: 1.25rem; height: 1.25rem; }

@media (min-width: 960px) {
  .pscan__cols {
    grid-template-columns: minmax(0, 1fr) 20rem;
    column-gap: 1.3rem;
    align-items: start;
    max-width: none;
  }
}

/* Under the columns: the bulk line and the folded cost estimator. */
.plist__bulk {
  max-width: 860px;
  margin: 1.5rem auto 0;
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-secondary);
  text-align: center;
}

.plist-count {
  max-width: 860px;
  margin: 1.1rem auto 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card-bg);
}
.plist-count__summary {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 0.5rem;
  min-height: 52px;
  padding: 0.8rem 1.2rem;
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--text-secondary);
  text-align: center;
  cursor: pointer;
}
.plist-count__summary::-webkit-details-marker { display: none; }
.plist-count__summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}
.plist-count__action {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.plist-count__action::after {
  content: " \25BE";
  display: inline-block;
  margin-left: 0.2rem;
  text-decoration: none;
}
.plist-count[open] .plist-count__action::after { content: " \25B4"; }
.plist-count .quote-tool {
  max-width: 640px;
  margin: 0 auto;
  padding: 0.4rem 1.2rem 1.8rem;
  border: none;
  box-shadow: none;
  background: none;
}
.plist-count .quote-tool::before { display: none; }
/* The estimator's own labels were set small for a card of their own;
   opened here they are read, so none is under the floor. */
.plist-count .quote-tool__desc { font-size: 1rem; }
.plist-count .quote-tool__label,
.plist-count .quote-tool__suffix-label,
.plist-count .quote-tool__example,
.plist-count .quote-tool__example code,
.plist-count .quote-tool__folder-name,
.plist-count .quote-tool__loading-text,
.plist-count .quote-tool__stat-label,
.plist-count .quote-tool__dates-note,
.plist-count .quote-tool__price-label,
.plist-count .quote-tool__price-breakdown,
.plist-count .quote-tool__error { font-size: 0.95rem; }
.plist-count .quote-tool__input { font-size: 1rem; }

/* The waitlist fallback (shown only while checkout is off). */
.pscan .early-access__desc,
.pscan .early-access__note { font-size: 1rem; }
.pscan .early-access__badge { font-size: 0.95rem; }

/* ---------- Good to know: four tiles ---------- */
.pknow { padding: 3rem 0; }
/* The same width as the rows and the card above, so the edges line up. */
.pknow > .container,
.pother > .container { max-width: 1200px; }
.pknow__title {
  margin: 0 0 1.4rem;
  font-size: 1.6rem;
  text-align: center;
}
.pknow__tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* --bg-secondary and --border, so a tile stands off the warm band in the
   dark theme too (--card-bg there is within a shade of --bg-warm). */
.pknow__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  padding: 1.3rem 1rem 1.2rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: center;
}
/* The homepage's 58px outlined circle (.ho-field__icon). */
.pknow__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  color: var(--accent);
}
.pknow__icon svg { width: 32px; height: 32px; }
.pknow__line {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--text-primary);
}
/* The refund link on a line of its own under the sentence, 44px tall. */
.pknow__line a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 44px;
  margin: 0 auto -0.4rem;
  font-weight: 600;
  color: var(--accent);
}

/* ---------- Family Library: one offer, yearly first ---------- */
.pfam { padding: 3.25rem 0 0.5rem; }
.pfam__card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 15.5rem;
  grid-template-areas: "icon text offer";
  align-items: center;
  gap: 1.2rem 1.6rem;
  max-width: 860px;
  margin: 0 auto;
  padding: 1.6rem 1.7rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.pfam__icon { grid-area: icon; width: 64px; height: 64px; border-radius: 14px; }
.pfam__text { grid-area: text; min-width: 0; }
.pfam__title {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1.25;
}
.pfam__line {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.pfam__offer { grid-area: offer; text-align: center; }
.pfam__price {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1.05rem;
  color: var(--text-secondary);
}
.pfam__amount {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
}
/* The price is a peek (css/family-archive.css): "$19 the first year" opens
   onto the rest of the deal. The shared trigger centres its items; here the
   2rem amount and the 1.05rem words sit on one baseline instead, as they
   did as plain text, and the mark drops to sit level with the words. */
.pfam__price .peek__trigger { align-items: baseline; }
.pfam__price .peek__mark { transform: translateY(0.14em); }
.pfam__alt {
  margin: 0.3rem 0 0.9rem;
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--text-secondary);
}
.pfam__offer .btn {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 1rem;
  font-size: 1rem;
}

/* ---------- Also from Timeline Scan: four quiet tiles ---------- */
.pother { padding: 3rem 0 0.5rem; }
.pother__title {
  margin: 0 0 1.1rem;
  font-size: 1.35rem;
  text-align: center;
  color: var(--text-primary);
}
.pother__tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Flex, not a grid: two by two, then one row from 1,200px, the first width
   where "FrontBack Scanner" fits a quarter of the row on one line (with the
   tighter inset below). Never three and a lone fourth. With the scanning
   kill switch thrown the three left share the width instead of leaving a
   hole. */
.pother__item { flex: 1 1 calc(50% - 0.45rem); max-width: 24rem; }
.pother__tile {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  height: 100%;
  min-height: 44px;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
@media (min-width: 1200px) {
  .pother__item { flex-basis: 0; }
  .pother__tile { gap: 0.75rem; padding: 0.9rem 0.8rem; }
}
.pother__tile:hover,
.pother__tile:focus-visible {
  border-color: var(--accent);
  background: var(--card-bg);
  color: var(--text-primary);
  text-decoration: none;
}
.pother__tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pother__icon {
  flex: 0 0 auto;
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 11px;
}
.pother__text { display: flex; flex-direction: column; min-width: 0; }
.pother__name {
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
}
.pother__line {
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--text-secondary);
}
.pother__price {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--accent);
}

.pother__ask {
  max-width: 46rem;
  margin: 1.6rem auto 0;
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
  text-align: center;
}

/* The closing CTA's quiet line, at the reading floor on a phone too. */
.cta .pricing__note {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-secondary);
  text-align: center;
}

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  .pscan { padding-bottom: 2.5rem; }
  .pscan__title { font-size: 1.6rem; }
  .pscan__lead { font-size: 1.05rem; margin-bottom: 1.3rem; }
  .plist { --pic: 2.4rem; --gap: 0.75rem; --pad-x: 0.9rem; --btn-w: 10.2rem; }
  .pincl { padding: 1.15rem 1.1rem 1rem; }

  .pknow { padding: 2.5rem 0; }
  .pknow__title { font-size: 1.45rem; margin-bottom: 1.1rem; }
  .pknow__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
  .pknow__tile { padding: 1rem 0.7rem 0.9rem; gap: 0.6rem; }
  .pknow__icon { width: 50px; height: 50px; }
  .pknow__icon svg { width: 28px; height: 28px; }

  .pfam { padding-top: 2.5rem; }
  .pfam__card {
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-areas:
      "icon  text"
      "offer offer";
    padding: 1.3rem 1.1rem;
  }
  .pfam__icon { width: 52px; height: 52px; border-radius: 12px; align-self: start; }
  .pfam__title { font-size: 1.3rem; }
  .pfam__offer { text-align: left; }

  .pother { padding-top: 2.5rem; }
  .pother__item { flex-basis: 100%; max-width: none; }
}

/* Phones: beside a button there is no room for "for 10,000 photos" on one
   line (the price gets 130px at 390px wide, the line needs 154px). So the
   price and its count sit under the name, on the same left edge as every
   word of the row, and the button takes the row's whole width under them.
   Every row has this shape on a phone, the trial's too. */
@media (max-width: 479.98px) {
  .plist__row {
    grid-template-columns: var(--pic) minmax(0, 1fr);
    grid-template-areas:
      "pic what"
      ".   price"
      "btn btn";
    row-gap: 0.55rem;
  }
  .plist__btn { margin-top: 0.3rem; }
}

/* The narrowest phones (360px): a little less padding, so the words keep
   their room. */
@media (max-width: 380px) {
  .plist { --pad-x: 0.75rem; --gap: 0.65rem; }
}