/* plans page, 0208 ---------------------------------------------------------

   WHY THIS IS ITS OWN FILE, AND NOT A BLOCK AT THE END OF style.css.
   The card asked for style.css unless that file is over 60 KB. It is 23 KB, so
   the block belonged there - except that style.css carries two CSS escape
   sequences, the tick and the cross drawn before the attested control lines,
   and each one is written with a backslash. The rule on every push in this
   repository is that no file pushed contains a backslash, because this
   connector has been seen to double one in transit, and a doubled escape would
   turn that tick and that cross into visible junk on the token page. So the
   stylesheet this release needs is a new file with no backslash in it, linked
   only from plans.html, and style.css is not retyped or pushed at all.

   RELEASE 0268 removed that reason: those two escapes are now the literal
   glyphs and style.css carries no backslash at all. The file stays separate
   anyway, because it is linked from one page and nothing else reads it.

   Nothing here is imported from anywhere: it reads the site's own tokens from
   the block at the top of style.css, so the page is the same site rather than
   a stranger bolted on.

   RELEASE 0270. THE ACCENT IS GONE FROM THIS PAGE. Amber now marks the single
   primary action and the underline under the home page headline, and nothing
   else anywhere on the site, so the Pro border and the Pro tag give it up and
   every line on this page is drawn in the site's one line colour.

   AND THE DEFAULT IS THE FREE TIER, not the recommended upgrade. The two
   class names below are now older than what they do: `.plan-quietest` is on
   the Free card and is what marks the default, and `.plan-featured` is on the
   Pro card and no longer features it. Renaming them means retyping
   plans.html, 13.5 KB of transport through a connector with no patch call,
   for two words that no test and no reader outside this file depends on. The
   rename is recorded rather than spent; what the rules do is written here.

   DARK MODE IS NOT ADDED HERE. This site has exactly one scheme and it is
   dark; a `prefers-color-scheme: light` block would be a second scheme that no
   other page on the site has. -------------------------------------------- */

/* THE WIDER COLUMN. `main` is capped at 860px site-wide, which is right for a
   page of prose and too narrow for three cards side by side. `:has()` widens
   it for this page only, without touching base.html or any other page. Where
   `:has()` is not supported the page simply keeps the site's 860px column and
   the cards are narrower - a smaller version of the same layout, never a
   broken one. */
main:has(.plans-page) { max-width: 1040px; }
.plans-page { max-width: 1040px; margin: 0 auto; }

.plans-hero { padding: 26px 0 4px; }
.plans-hero h1 { margin: 0 0 8px; }
.plans-hero p { color: var(--muted); max-width: 46em; margin: 0;
  font-size: 1.05rem; }

/* THE THREE CARDS, AT EQUAL WIDTH. Equal height comes from the grid, not from
   a measured height, so a longer sentence in one card lengthens all three
   boxes and leaves none of them short. */
.plan-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; margin: 28px 0 22px; align-items: stretch; }
.plan-card { display: flex; flex-direction: column; min-width: 0;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 20px; }
/* THE DEFAULT. This rule is on the Free card. Free is not the cheapest option
   on a list of options - it is what this site is, and what a reader gets
   without paying anything or signing anything - so it is the card that is
   marked, in the quiet link colour rather than in the accent, and it is the
   first card a phone meets because it is first in the markup. */
/*  RELEASE 0273. IT IS A PANE NOW, not a hole. `background: transparent`
    made Free the lightest card on the page while the ground was flat; with
    the Obsidian ground and the texture drifting behind it, transparent
    meant this card's words sat directly on moving line-work with no pane
    between them. Measured at 1280px before the change: the brightest point
    inside the card reached rgb(48,51,58). It takes `--panel` like every
    other surface and keeps its marking from the border and the inset rule,
    which is what marked it as the default in the first place. */
.plan-quietest { background: var(--panel); border-color: var(--link);
  box-shadow: inset 3px 0 0 0 var(--link); }
/* This rule is on the Pro card and no longer marks it out: the page has one
   marked card and it is the default above. */
.plan-featured { border-color: var(--line); }

/* THE TIER NAME AT THE H2 STEP, in the site's own scale rather than a 13px
   tracked label. A reader comparing three cards is reading three headings. */
.plan-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 12px; color: var(--text); font-weight: 700;
  font-size: var(--t-h2); line-height: 1.2; letter-spacing: 0; }
.plan-tag { background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); font-weight: 700;
  font-size: 12px; letter-spacing: 0; text-transform: none;
  border-radius: 99px; padding: 1px 10px; }

/* The price is the largest thing on the card, at the size this site's h1
   uses, and everything else on it is body text. Tabular figures, because
   three prices in a row are read down the row. */
.plan-price { font-size: var(--t-h1); font-weight: 700; line-height: 1.15;
  margin: 0; font-variant-numeric: tabular-nums; }
.plan-per { margin: 2px 0 0; color: var(--muted); font-size: .85rem; }
.plan-stars { margin: 4px 0 0; color: var(--muted); font-size: .85rem;
  font-variant-numeric: tabular-nums; }

.plan-facts { list-style: none; margin: 20px 0 0; padding: 0;
  display: grid; gap: 12px; }
.plan-facts li { min-width: 0; overflow-wrap: anywhere;
  border-top: 1px solid var(--line); padding-top: 12px; line-height: 1.5; }
.plan-off { color: var(--muted); }

/* `margin-top: auto` is what keeps the two buttons on one line across cards
   of different content lengths. */
.plan-cta { margin: 22px 0 0; padding-top: 2px; margin-top: auto; }
.plan-cta button { width: 100%; }
/* THE BUTTON THAT IS NOT A LINK. While the checkout is off there is nothing to
   click, so this is a span and not an anchor or a button: a control that looks
   live and answers 404 is worse than a label that says when it opens. */
.plan-soon { display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: var(--tap); padding: 12px 20px;
  border: 1px dashed var(--line); border-radius: var(--radius);
  color: var(--muted); font-weight: 700; }

.plan-notes { margin: 0 0 30px; }
.plan-notes p { max-width: 72ch; margin: 10px 0; }

/* ONE CARD SINCE 0210, so one column: Desk is the only arrangement offered
   here, and a lone card in a two-column grid reads as a missing card. */
.quiet-cards { display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 16px; margin: 0 0 34px; }
.quiet-card { border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; min-width: 0; }
.quiet-card p { margin: 0; color: var(--muted); }
.quiet-card strong { color: var(--text); }

.packs { margin: 0 0 8px; }
.packs p { max-width: 72ch; }

/* FREE FOREVER, FOLDED. Same construction as the report page's own expanders,
   so an opened section looks like the rest of the site. */
.free-details { border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); padding: 0 16px; margin: 34px 0 0; }
.free-details > summary { cursor: pointer; font-weight: 700;
  color: var(--link); padding: 14px 0; list-style-position: outside;
  min-height: var(--tap); }
.free-details[open] > summary { border-bottom: 1px solid var(--line);
  margin-bottom: 10px; }
.free-details > *:last-child { margin-bottom: 18px; }
.free-details h2 { margin-top: 1.4em; }

/* PHONES. One column, in the order the markup is written: the default first,
   because on a phone the reader scrolls and the first card is the one they
   meet. Release 0270 removed the rule that pulled Pro above it. */
@media (max-width: 720px) {
  .plan-cards { grid-template-columns: 1fr; gap: 14px; }
  .plans-hero { padding: 18px 0 2px; }
  .plans-hero p { font-size: 1rem; }
  .plan-card { padding: 18px 16px; }
  .free-details { padding: 0 12px; }
}

/* RELEASE 0277. THE LAST HOLE IN THE PAGE.

   `.quiet-card` was the one surface on this page with no background at all.
   It carries the blur from the pane recipe in style.css, so the texture
   behind it is softened, but without the four-per-cent wash every other
   pane has it reads as a gap in a row of panes rather than as one of them.
   It is the same fault 0273 found on the Free card and fixed there, in the
   one place that was missed, and the fix is the same word. Measured at
   1280px against the Obsidian ground before and after.

   THE REST OF THIS PAGE IS ALREADY THROUGH BOTH PASSES, which is why this
   block is four lines and not forty: the three columns are equal width from
   the grid, the tier name is at the H2 step, the price is at the H1 step in
   the monospaced face with tabular figures, the default is the Free tier and
   is the only marked card, and no amber appears anywhere on the page. Those
   were 0270, 0272 and 0273 and none of them is retyped here. */
.quiet-card { background: var(--panel); }