/* /pricing, the sell page (Jeff 2026-09-10: "this page is fuuuuugly. Can you
   bury the details below the sign up buttons like most sites do... This is our
   sell page. Make it look good.").

   Scoped rules only. guardian.css carries every token, the .btn pill, the
   .card box and the native <details> `.folded` pattern this page reuses for
   the "More about the price" disclosure, so nothing here invents a colour, a
   font or a radius. The whole ruled price copy still ships on the page, moved
   below the buttons rather than rewritten: check-pricing-copy.mjs pins it.

   Design review 2026-09-10, second pass. One rhythm variable (--stack) so
   every section break is the same multiple instead of the 24/16/32/16/32 the
   first pass shipped; the price, not the headline, is the largest thing on
   the page; "then $99 a year" moved above the button so the whole deal reads
   before the click instead of as fine print under it; the promise given a
   panel; the seller line lifted out of the disclosure. */

:root { --stack: var(--space-7); }
@media (min-width: 40rem) { :root { --stack: var(--space-8); } }

/* Wider than the 34rem prose column: two price cards sitting side by side is
   the one thing this page's layout has to do, and 34rem makes each card
   narrower than its own button. 52rem gives each card ~24rem, enough for a
   40px price and a 17px button to look deliberate rather than squeezed into
   a document. Prose is capped back to a readable measure below, so the wider
   main widens the OFFER only. */
main { max-width: 52rem; }

/* --ink-faint is 3.0:1 on white: fine for a hairline, under 4.5:1 for 13.5px
   text. Scoped to this page's masthead only. */
.masthead .where { color: var(--ink-soft); }
.masthead .mark { color: var(--ink); text-decoration: none; }
.masthead .mark:hover, .masthead .mark:focus-visible { text-decoration: underline; }

.hero { margin-bottom: var(--space-6); }
.hero h1 { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.hero .lede { font-size: var(--text-l); color: var(--ink-soft); margin-bottom: 0; max-width: 34rem; }
@media (min-width: 40rem) {
  .hero h1 { font-size: 32px; }
}

.plans2 { display: grid; gap: var(--space-4); grid-template-columns: 1fr; margin-bottom: var(--space-4); }
@media (min-width: 34rem) { .plans2 { grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: stretch; } }

.plan {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
/* The yearly card is the one we lead with, so it carries the brand border,
   the deeper shadow and the only brand-tinted header. Two solid brand fills
   side by side would read as two primaries; the monthly card keeps the plain
   box, the sunken header and a ghost button of the same size. */
.plan.pick { border: 2px solid var(--brand-fill); box-shadow: var(--shadow-2); }

/* Both cards get a header strip so the two prices sit on the same baseline
   however the label wraps; the strip is where the orange earns its keep. */
.plan .tag {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--line);
  /* Equal strip height in both cards whether or not the label carries a
     badge, so the two prices sit on one baseline across the pair. */
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-s); font-weight: 700; color: var(--ink-soft);
  margin: 0;
}
.plan.pick .tag {
  background: var(--brand-soft);
  border-bottom-color: var(--brand-soft);
  color: var(--brand-text);
}
.plan .badge {
  background: var(--surface); color: var(--ink-soft);
  border-radius: var(--radius-pill); padding: 2px var(--space-3);
  font-size: var(--text-xs); font-weight: 700;
}
.plan.pick .badge { background: var(--brand-fill); color: var(--brand-fill-ink); }

.plan .body { display: flex; flex-direction: column; flex: 1 1 auto; padding: var(--space-5); }

.plan .amount {
  font: 700 var(--text-num)/1.05 var(--font-display);
  color: var(--ink); margin-bottom: var(--space-2);
}
@media (min-width: 40rem) { .plan .amount { font-size: 40px; } }
.plan .amount .per { font: 400 var(--text-m)/1 var(--font-body); color: var(--ink-soft); }
/* "for the first 250 families" and "then $99 a year" are one thought: what
   you pay now and what you pay later. Both sit ABOVE the button at the same
   size and the same ink, so the whole deal is read before the click. Under
   the button in --ink-faint they read as the thing a page hopes you miss. */
.plan .who { font-size: var(--text-s); color: var(--ink-soft); margin-bottom: var(--space-1); }
.plan .then { font-size: var(--text-s); color: var(--ink-soft); margin-bottom: var(--space-5); }
/* Pushes the button to the bottom edge of both cards whatever the copy above
   it measures, so the two Subscribe pills line up across the pair. */
.plan .buy { margin-top: auto; margin-bottom: 0; }
/* This is the click the page exists for: 17px, not 15, and taller than the
   44px floor. Both cards keep the same size so there is one primary by
   colour, not by area. */
.plan .btn { min-height: 48px; font-size: var(--text-l); }
@media (min-width: 34rem) { .plan .btn { min-height: 52px; } }
/* --line-strong is 2.1:1 on white; a button's own boundary wants 3:1. */
.plan .btn.ghost { border-color: var(--ink-faint); }

.checkoutnote { margin-top: 0; margin-bottom: var(--stack); max-width: 34rem; }

.buys { margin: 0 0 var(--space-4); padding-left: var(--space-5); max-width: 34rem; }
.buys li { margin-bottom: var(--space-2); }
.buys li::marker { color: var(--brand-fill); }

/* The one sentence that answers the fear behind the question ("if I stop
   paying, does my child lose what she has?"). At body size with a hairline
   rule it read as one more bullet; it is the close. */
.promise {
  max-width: 34rem;
  background: var(--brand-soft);
  border-left: 4px solid var(--brand-fill);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-l); font-weight: 600; line-height: var(--leading-tight);
  margin-bottom: var(--stack);
}

/* The disclosure. `.folded` (guardian.css) is the estate's native
   <details>/<summary> box: keyboard and screen-reader friendly, no JS, works
   with scripts blocked. This lifts the summary from a small grey row to a
   full-width control a parent reads as an invitation: white like the cards
   rather than a dead grey bar, the label in ink, the chevron in brand. */
.more { margin-bottom: var(--space-6); background: var(--surface); }
.more > summary {
  font-size: var(--text-m); font-weight: 700; color: var(--ink);
  padding: var(--space-3) var(--space-5);
}
.more > summary::after { color: var(--brand-text); }
.more[open] > summary { background: var(--surface-sunken); }
/* guardian.css rings inputs, buttons and links; a <summary> is none of the
   three, so the keyboard path through the disclosure had no visible stop. */
.more > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.more .inner { padding: var(--space-5); }
.more .inner > section { margin-bottom: var(--space-6); max-width: 34rem; }
.more .inner > section:last-child { margin-bottom: 0; }
.more .inner h3 { margin-bottom: var(--space-2); }
.more .plans { padding-left: var(--space-5); }
.more .plans li, .more .always li { margin-bottom: var(--space-2); }
.more .always { padding-left: var(--space-5); }
.more .updated { font-size: var(--text-s); color: var(--ink-soft); }

/* Who is taking the money, out of the disclosure and onto the page. A parent
   deciding whether to hand a card to a name they have not heard of should
   not have to open a fold to find the company behind it. */
.seller { max-width: 34rem; margin-bottom: var(--space-6); }
.seller h3 { font-size: var(--text-m); margin-bottom: var(--space-2); }
.seller .updated { font-size: var(--text-s); color: var(--ink-soft); margin-bottom: 0; }

/* The footer links are the smallest tap targets on a page read on a phone. */
footer .foot a { display: inline-block; padding: var(--space-2) 0; }

/* The one line that says what Lantern is, in the landing page's own words, before the page asks for money. */
.hero .eyebrow { font-size: var(--text-m); color: var(--ink-soft); margin: 0 0 var(--space-2); }