/* ==========================================================================
   mcprush — pricing.css
   Page styles for pricing.html only. Everything is prefixed .pr- so it cannot
   reach into a page owned by somebody else, and every colour is a core.css
   token, so the dark theme comes free.

   THE STRUCTURAL DECISION ON THIS PAGE: nothing has a width it cannot give up.
   The five-column worked example and its 760px minimum are gone, and with them
   the only real horizontal scroller on the page. The comparison table that
   replaced it is three columns — a label that wraps and two tick columns that
   narrow from 176px to 70px — so it fits 320px without a second, phone-only
   copy of its own content. .pr-scroll keeps overflow-x:auto as a floor rather
   than as a layout.
   ========================================================================== */

/* grid children must be allowed to shrink, or a wide table inside one pushes
   the page sideways — the same guard core.css already applies to .grid */
.pr-plans > *, .pr-ceil > *, .pr-anchor > *, .pr-side > *, .pr-rule > * { min-width: 0; }

/* a floor rather than a layout: nothing on this page reaches it above 320px */
.pr-scroll { overflow-x: auto; }

/* ---------- section rhythm ----------------------------------------------- */
/* every section head on this page is a spec label, one h2 and a two-line
   paragraph, so 26px under it reads as a gap rather than a rhythm */
.pr-sec .section-head { margin-bottom: 22px; }
.pr-sec { padding-block: 52px; }
/* the label-to-heading step. It lives here rather than in a style attribute on
   each h2 because a media query cannot reach an inline declaration, and on a
   phone this gap has to come in with everything else. */
.pr-sec .section-head h2 { margin-top: 12px; }
/* the alternating band is a surface change and a hairline, never a wash; cards
   inside it stay on --surface so they still read as raised.

   Half a step, the same as .fp-sec-alt on the publisher page. --surface-2 is
   the token for a panel sitting ON the page, and a whole section painted in it
   lands seventeen levels above the background on the dark schemes — the band
   stopped reading as a band and started reading as a second page stitched into
   this one. Mixed back halfway it still marks where a section begins, and on
   the light schemes the two tones were close enough that nothing moves. */
.pr-sec-alt {
  background: color-mix(in srgb, var(--surface-2) 50%, var(--paper));
  border-block: 1px solid var(--line);
}
/* a second heading inside a section, for the ceiling under the rules */
.pr-sub { margin: 10px 0 14px; }

/* ---------- 1 · masthead --------------------------------------------------
   One sentence and three numbers. The whole price list is 12 / 0 / 8, so the
   strip prints those three and nothing else — the six-line breakdown of what
   the 12% pays for is one clause of the lead, where a reader who is not paying
   it can skip it. */
.pr-mast { padding-block: 0 40px; }
.pr-mast h1 { margin: 16px 0 20px; max-width: 21ch; }
.pr-mast h1 em { font-style: normal; color: var(--accent); }
.pr-mast .lead { max-width: 84ch; }
.pr-mast-act { gap: 10px; margin-top: 24px; flex-wrap: wrap; }

.pr-anchor {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r3);
  margin-top: 30px; overflow: hidden;
}
.pr-anchor-c { background: var(--paper); padding: 18px 20px; }
.pr-anchor-c b {
  display: block; font: 600 46px/1 var(--mono);
  letter-spacing: -.05em; color: var(--accent);
}
.pr-anchor-c span {
  display: block; margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--ink-2);
}

.pr-checked { margin-top: 14px; max-width: 104ch; }
.pr-checked b { color: var(--ink-2); font-family: var(--mono); font-weight: 500; }

/* the disambiguating note — a hairline box, not a callout with a colour wash */
.pr-note {
  margin-top: 32px; padding: 15px 18px;
  border: 1px solid var(--line-2); border-left: 3px solid var(--ink-3);
  border-radius: var(--r2); background: var(--surface);
}
.pr-note p { margin-top: 9px; font-size: 14px; line-height: 1.6; color: var(--ink-2); max-width: 100ch; }
.pr-note b { color: var(--ink); font-weight: 600; }
.pr-note em { font-style: italic; }

/* ---------- 2 · the plan cards --------------------------------------------
   Two plans, not three, and three lines each rather than eleven: the row-by-row
   detail is in the comparison table below, where both columns are visible at
   once. Half of 1400px is a card with more padding in it than list, so the row
   is capped rather than stretched — 1140px keeps each card at about the width it
   had when there were three of them, and it starts at the page gutter because
   every other block on this page does. */
/* Full content width. The 1140px cap was written when there were two cards and
   half of 1400 was a card with more padding in it than list; three cards divide
   the same width into thirds, which is the proportion the cap existed to
   protect in the first place. */
.pr-plans {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px; align-items: stretch;
}
/* Enterprise has no figure to set in the price slot, so the slot carries the
   word at body weight rather than a number at poster size. A 30px "By quote"
   would be the loudest thing on the page and would be saying the least. */
.pr-plan[data-tier="enterprise"] .price { font-size: 19px; letter-spacing: -.02em; }
/* the billing-period control sits above the row and is centred on it, so it
   reads as a property of all three cards rather than a heading for the first */
.pr-cycle { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.pr-cycle .seg button { padding: 6px 14px; font-size: 13.5px; }
/* the saving rides inside the Annual button rather than sitting beside it: it
   is a property of that choice, not a third thing to read */
.pr-save {
  font-style: normal; margin-left: 7px; padding: 1px 6px; border-radius: 999px;
  font: 500 11.5px/1.5 var(--mono); letter-spacing: .02em;
  background: var(--accent-soft); color: var(--accent);
}
.seg button.on .pr-save { background: var(--accent); color: var(--on-accent, #fff); }

.pr-plan-n { font-size: 15px; }
.pr-plan .price { margin-top: -2px; }
.pr-plan-note { font-size: 13px; line-height: 1.55; color: var(--ink-3); margin-top: -4px; }
.pr-plan li b { color: var(--ink); font-weight: 600; }
.pr-plan-cta { margin-top: auto; padding-top: 4px; }
.pr-plan-foot { font-size: 12px; color: var(--ink-3); margin-top: 10px; text-align: center; }

/* The current-plan mark is decided by roles.js, which loads after every page
   script — so it is switched in CSS, where load order cannot matter.

   It used to key off data-role alone, which put "Your plan" on the Pro card for
   every signed-in buyer including the ones on Free. With two cards that was a
   small lie; with three it is a card claiming to be the reader's while two
   others sit beside it. roles.js stamps data-plan on <html>, so the mark keys
   off the plan the reader is actually on. */
.pr-cur { display: none; }
[data-role="customer"][data-plan="workspace"] .pr-plan[data-tier="workspace"] .pr-cur { display: inline-flex; }
[data-role="customer"][data-plan="workspace"] .pr-plan[data-tier="workspace"] .pr-notcur { display: none; }
/* a signed-in buyer should be able to find their own card without reading all
   three: the ring is already on .best, so this is the second, quieter mark */
[data-role="customer"][data-plan="workspace"] .pr-plan[data-tier="workspace"] { background: var(--accent-soft); }



/* ---------- the quote sheet ------------------------------------------------
   Seven fields is taller than a modal that only ever held a paragraph, so the
   sheet caps its own height and scrolls its middle. Without this the phone
   sheet — 100dvh with overflow hidden, from views.css — simply cut the last
   148px off, and the button that sends the thing was the part it cut. */
.pr-q-sheet { display: flex; flex-direction: column; max-height: calc(100vh - 64px); }
.pr-q-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
.pr-q-foot { flex: none; }

@media (max-width: 620px) {
  /* the sheet is the viewport here; the middle takes what is left between the
     sticky bar and the footer, and the footer clears the role switcher the way
     every other sheet on the site does */
  .cmp-back:has(> .cmp) > .pr-q-sheet { max-height: none; }
  .cmp-back:has(> .cmp) > .pr-q-sheet > .pr-q-body { flex: 1 1 0; }
  .cmp-back:has(> .cmp) > .pr-q-sheet > .pr-q-foot { margin-top: auto; padding-bottom: 60px; }
}

/* the receipt inside the quote sheet: it replaces a seven-field form, so it
   gets the height the form had rather than collapsing the sheet to a sentence */
.pr-quote-done { padding: 18px 0 26px; }

/* ---------- the band that replaced the fair-use essay ----------------------
   Two cards, equal weight: what it costs at your size, and what a limit does
   when you meet one. Neither is prose, which is the whole reason they are
   here instead of what was. */
.pr-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.pr-calc { margin-top: 14px; }
.pr-calc input[type="range"] { flex: 1 1 auto; accent-color: var(--accent); }
.pr-calc-out { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 18px; }
.pr-calc-fig b { display: block; font-size: 26px; letter-spacing: -.03em; color: var(--ink); }
.pr-calc-fig span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-3); }
.pr-calc-sum { flex: 1 0 100%; margin: 4px 0 0; }

.pr-lim { padding: 11px 0; border-top: 1px solid var(--line); }
.pr-lim:first-child { border-top: 0; padding-top: 14px; }
.pr-lim b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.pr-lim span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }

@media (max-width: 860px) { .pr-two { grid-template-columns: 1fr; gap: 12px; } }

.pr-smallprint {
  margin-top: 18px; font-size: 12.5px; line-height: 1.65; color: var(--ink-3); max-width: 110ch;
}

/* ---------- shared table shell -------------------------------------------- */
.pr-tblcard { overflow: hidden; }
.pr-tblfoot {
  /* the foot sits on a card, not on the page, so it mixes against the card's
     own surface — the same half step, measured from the right starting tone */
  padding: 13px 18px; border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 55%, var(--surface));
  font-size: 12.5px; line-height: 1.6; color: var(--ink-3);
}

/* ---------- 3 · free against workspace ------------------------------------
   Three columns: a label that wraps, and two 108px columns that hold a tick, a
   dash or a short mono value. The two plan columns are fixed and equal, because
   a comparison in which one column is wider than the other is already arguing.

   The identical group is marked twice — once in words on its own band row, and
   once by tinting both value cells, so the pair reads as one answer rather than
   two that happen to match. */
.pr-cmp { width: 100%; table-layout: fixed; }
.pr-cmp th:first-child, .pr-cmp td:first-child { padding-left: 18px; }
.pr-cmp th:last-child, .pr-cmp td:last-child { padding-right: 18px; }
.pr-cmp td { vertical-align: top; padding-block: 8px; }

/* three plan columns now, so each is narrower than it was when there were two */
.pr-cmp th.pr-c-hp { width: 150px; text-align: center; white-space: normal; }
.pr-c-hp span {
  display: block; margin-top: 4px;
  font: 400 10.5px/1.2 var(--mono); letter-spacing: .04em;
  text-transform: none; color: var(--ink-3);
}
.pr-c-k b { display: block; font-size: 14px; font-weight: 550; letter-spacing: -.012em; color: var(--ink); }
.pr-c-k span {
  display: block; margin-top: 4px;
  font-size: 12.5px; line-height: 1.5; color: var(--ink-3); max-width: 92ch;
}
.pr-cmp th.pr-c-hp, .pr-cmp td.pr-c-c { border-left: 1px solid var(--line); }
.pr-c-c { text-align: center; }
.pr-c-y { display: inline-flex; color: var(--accent); }
.pr-c-y svg { width: 16px; height: 16px; }
.pr-c-n { color: var(--ink-3); font-family: var(--mono); }
.pr-c-v {
  display: inline-block; font: 500 12px/1.35 var(--mono);
  letter-spacing: -.01em; color: var(--ink-2);
}

/* the group bands */
.pr-c-g td {
  background: color-mix(in srgb, var(--surface-2) 55%, var(--surface));
  border-bottom: 1px solid var(--line);
  padding-block: 10px;
}
.pr-c-g .spec { color: var(--ink); }
.pr-c-gn {
  display: block; margin-top: 5px;
  font-size: 12.5px; line-height: 1.5; color: var(--ink-3); max-width: 104ch;
}
/* the identical band gets the accent square that .spec.plain drops, and the
   rows under it get both value cells tinted as one field */
.pr-c-g.is-same td { background: var(--accent-soft); border-bottom-color: var(--accent-line); }
.pr-c-g.is-same .spec { color: var(--accent); }
.pr-cmp tbody tr.is-same .pr-c-c { background: var(--accent-soft); }

/* ---------- 4 · the rules -------------------------------------------------
   An uncolumned list: a mono key on the left, the rule and the practice it
   replaces on the right. No plan columns, because none of these six differs by
   plan — that is the section's whole argument, and printing two identical ticks
   beside each one would have contradicted it in the layout. */
.pr-rules {
  border: 1px solid var(--line); border-radius: var(--r3);
  background: var(--surface); overflow: hidden;
}
.pr-rule {
  display: grid; grid-template-columns: 176px minmax(0, 1fr);
  gap: 0 28px; padding: 14px 22px;
  border-top: 1px solid var(--line);
}
.pr-rule:first-child { border-top: 0; }
.pr-rule-k {
  font-size: 14.5px; font-weight: 600; letter-spacing: -.014em; color: var(--ink);
  display: flex; gap: 10px; align-items: baseline;
}
.pr-rule-n {
  font: 500 12px/1 var(--mono); letter-spacing: .1em; color: var(--accent);
  flex: none; padding-top: 1px;
}
.pr-rule-r { font-size: 14.5px; line-height: 1.55; color: var(--ink); max-width: 88ch; }
.pr-rule-u {
  margin-top: 8px; font-size: 13px; line-height: 1.55; color: var(--ink-3); max-width: 88ch;
}
.pr-rule-u span {
  display: inline-block; margin-right: 8px;
  font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .11em;
  color: var(--ink-3);
}

/* ---------- 5 · the ceiling ------------------------------------------------ */
.pr-ceil {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 24px; align-items: start; margin-top: 34px;
}
.pr-side { display: grid; gap: 16px; align-content: start; }
.pr-side .card-body { padding-block: 12px; }
.pr-side .kv .v { max-width: 30ch; }

.pr-prose p { font-size: 15px; line-height: 1.65; color: var(--ink-2); margin-bottom: 14px; max-width: 82ch; }
.pr-prose p b { color: var(--ink); font-weight: 600; }
/* the one sentence on the page that concedes something. It is set apart
   because a concession buried mid-paragraph reads as a hedge. */
.pr-concede {
  margin-top: 4px; padding: 15px 18px;
  border: 1px solid var(--line-2); border-left: 3px solid var(--accent);
  border-radius: var(--r2); background: var(--surface);
  font-size: 14.5px; line-height: 1.6; color: var(--ink); max-width: 82ch;
}
#ceilRef { line-height: 1.6; }
#ceilRef b { color: var(--ink-2); font-family: var(--mono); font-weight: 500; }

/* ---------- 6 · faq -------------------------------------------------------- */
#faqList .faq-a { max-width: 96ch; }

/* ---------- 7 · cta --------------------------------------------------------
   Left-aligned rather than centred: every other block on this page starts at
   the page gutter, and a centred measure at the end reads as a different site. */
.pr-cta { text-align: left; padding: 32px; }
.pr-cta .lead { max-width: 72ch; }
/* both of these were style attributes on the markup, where a media query could
   not reach them; the phone needs the heading step and the button row tighter */
.pr-cta h2 { margin: 14px 0 12px; }
.pr-cta-act { gap: 10px; margin-top: 24px; }

/* ==========================================================================
   RESPONSIVE
   Every block on this page loses a column and keeps its content. The one that
   used to need a 760px minimum and a phone-only second layout is gone, so
   there is no reflow left to maintain — the comparison table narrows its two
   plan columns and its labels wrap.
   ========================================================================== */

@media (max-width: 1180px) {
  /* stacked, the ceiling card is no longer a column of one beside the prose */
  .pr-ceil { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 1040px) {
  .pr-anchor { grid-template-columns: 1fr; }
  .pr-anchor-c { padding: 16px 20px; }
  .pr-anchor-c b { font-size: 38px; }
  .pr-anchor-c span { margin-top: 6px; }
}

@media (max-width: 940px) {
  /* a 176px key column beside an 88ch rule stops being a row somewhere here */
  .pr-rule { grid-template-columns: 1fr; gap: 8px 0; }
  .pr-cmp th.pr-c-hp { width: 104px; }
}

@media (max-width: 860px) {
  .pr-sec { padding-block: 44px; }
  .pr-mast h1 { max-width: none; }
  .pr-cta { padding: 30px 22px; }

  /* core.css turns any .tbl that is a direct child of a .card into its own
     horizontal scroller with white-space:nowrap below this width. The
     comparison table is not a direct child — it is inside .pr-scroll — so it
     never inherits that, and the label column keeps wrapping. */
  .pr-cmp { font-size: 13px; }
  .pr-cmp th.pr-c-hp { width: 88px; }
}

/* The plans hold their row while a card is still wider than ~320px: this page
   exists to be read across, and stacking is the last thing to try. Two cards
   reach that floor far later than three did, and 720 — the site's own rung,
   where core.css, views.css and roles.css all turn — is within a few pixels of
   it, so this page breaks with the rest of the site rather than on a width of
   its own. Below it a three-item tick list stops being a column and starts
   being a hyphenated one. */
/* Three cards reach the floor two did not: at 720 each is 228px, which is
   narrower than the tick list inside it. Two abreast first, then one. */
@media (max-width: 960px) {
  .pr-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the odd card out takes the full row rather than half of it beside a gap */
  .pr-plan[data-tier="enterprise"] { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .pr-plans { grid-template-columns: 1fr; }
  .pr-plan[data-tier="enterprise"] { grid-column: auto; }
}

/* ==========================================================================
   THE PHONE
   Below 620px core.css section 18b sets one scale for the whole site: 26–32px
   displays, a 21px h2, a 14.5px lead, 15px body, 12px micro labels, controls
   between 34 and 46, 26px section padding and a 16px gutter. Nothing here
   repeats any of that. What is here is the part of this page the shared scale
   cannot reach: a section class of its own (.pr-sec, not .section), three mono
   figures drawn at poster size, a comparison table that has already folded out
   of a table into a stack, six question rows carrying the longest labels on the
   site, and one desktop sidebar that on a phone lands directly underneath the
   paragraph it was built to summarise beside.

   The whole page was measured at 320, 360, 390 and 414 before and after: the
   document ran 11,941px at 390 and runs 9,351 now, and the masthead alone came
   down from 1,164 to 957. The argument for every number below is the same one:
   a 358px column is a third of the width this page was drawn for, so the desk's
   proportions land as a poster rather than as a datasheet.
   ========================================================================== */
@media (max-width: 620px) {

  /* ---- section rhythm -----------------------------------------------------
     .pr-sec is this page's own section class, so the .section rule in core.css
     never reaches it. 52px each side became 44 at 860 and would have stayed
     there on a phone: five sections of it is 440px of nothing. 26px is what
     the shared scale gives .section, and this page has no reason to differ. */
  .pr-sec { padding-block: 26px; }
  .pr-sec .section-head { margin-bottom: 14px; }
  .pr-sec .section-head h2 { margin-top: 8px; }

  /* ---- 1 · masthead -------------------------------------------------------
     The three figures were a stack of three blocks, each a 36px numeral above
     its own sentence: 363px of a 390px screen for what is meant to read as one
     line of three numbers. Side by side inside each row instead, the figure
     keeps a fixed 56px column — wide enough for "12%" at 26px — and its
     sentence sits beside it rather than under it. 26px is the low end of the
     display clamp, so the number still outranks the body and stops short of
     competing with the headline above it. */
  .pr-mast { padding-bottom: 26px; }
  .pr-mast h1 { margin: 12px 0 14px; }
  .pr-anchor { margin-top: 18px; }
  .pr-anchor-c {
    display: grid; grid-template-columns: 56px minmax(0, 1fr);
    gap: 12px; align-items: baseline; padding: 12px 14px;
  }
  .pr-anchor-c b { font-size: 26px; letter-spacing: -.04em; }
  .pr-anchor-c span { margin-top: 0; font-size: 12.5px; line-height: 1.45; }

  /* the counted line is evidence rather than copy, so it goes to the micro
     size the rest of the page's small print uses on a phone */
  .pr-checked { margin-top: 10px; font-size: 12.5px; }
  .pr-mast-act { margin-top: 16px; gap: 8px; }

  /* ---- the two hairline notes --------------------------------------------
     One under the masthead and one under the plans. Both are a spec label and
     a paragraph, and 15px/18px of padding on a 358px column gives away a tenth
     of the width on each side. */
  .pr-note { margin-top: 20px; padding: 12px 14px; }
  .pr-note p { margin-top: 7px; font-size: 13px; line-height: 1.5; }

  /* ---- 2 · the plan cards -------------------------------------------------
     A $8 set in 30px mono is the second-largest thing on the page after the
     headline, and it is not the argument — the argument is the table below it.
     24px keeps it the largest thing inside its own card and no larger. The
     card's own 18px padding and 14px gaps are a desk's card seen at a third of
     the width, so both come in a notch. */
  .pr-plan { padding: 14px; gap: 10px; }
  .pr-plan .price { font-size: 24px; }
  .pr-plan .price small { font-size: 12.5px; }
  .pr-plan-note { font-size: 12.5px; line-height: 1.45; }
  .pr-plan ul { gap: 7px; font-size: 13px; }
  .pr-plan li svg { margin-top: 2px; }
  .pr-plan-foot { font-size: 12px; margin-top: 8px; }
  .pr-smallprint { margin-top: 14px; font-size: 12px; line-height: 1.55; }

  /* ---- 3 · the comparison, folded ----------------------------------------
     Three columns stop fitting well before the phone. Measured at 320: two
     70px plan columns left the label 129px, which is fifteen characters a
     line — the longest row ran to seven lines of ladder — and the plan headers
     had been cut to 9.5px to make even that fit.

     So below 620px the row stops being a row. The label takes the full column
     (about 38 characters a line, three lines instead of seven) and the two
     answers sit under it side by side, each carrying its own plan name. Both
     plans stay visible together, which is the one thing a comparison may not
     give up — this is a fold, not a pinned column and not a scroller. The
     header row goes because every label it carried now travels with its value.

     The plan name is set on the same line as its value rather than above it.
     Stacked, a four-letter word cost its own 17px line in all fifty-four answer
     cells: a row saying nothing but yes against no measured 115px at 390 when
     its label fitted one line and 135px when it took two. Inline they are 83px
     and 102px. Where the value is too long to share the line — "As many as you
     need" — it drops under the name exactly as it did before, so a long answer
     loses nothing by the attempt. */
  .pr-cmp { display: block; font-size: 14px; }
  .pr-cmp thead { display: none; }
  .pr-cmp tbody { display: block; }

  /* Two answers fitted side by side on a phone; three do not. At 390 a third
     column leaves 104px a cell, and the plan name alone takes 38 of it — so
     the answers stack instead, each keeping the full width and its own name.
     The row gets taller and every cell stays readable, which is the trade the
     rest of this stylesheet makes everywhere else. */
  .pr-cmp tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: 6px; padding: 11px 14px;
    border-bottom: 1px solid var(--line);
  }
  .pr-cmp tbody tr:last-child { border-bottom: 0; }
  .pr-cmp tbody td { display: block; border: 0; padding: 0; width: auto; }
  /* the 18px first/last-child gutters are more specific than the reset above,
     and the row's own padding replaces them now */
  .pr-cmp tbody td:first-child, .pr-cmp tbody td:last-child { padding: 0; }

  .pr-c-k { grid-column: 1 / -1; }
  .pr-c-k b { font-size: 14px; line-height: 1.35; }
  .pr-c-k span { font-size: 12.5px; line-height: 1.45; margin-top: 4px; }

  /* the answer keeps the tint that marks an identical pair, so it still reads
     as one field rather than two cells that happen to agree. Both boxes take
     the height of the taller one: as many as five of the twenty-seven rows,
     depending on the width, put an answer that wraps beside one that does not,
     and a tinted box a whole line shorter than the box next to it reads as a
     mistake rather than as a shorter answer. Stretching is free — the row is
     already as tall as its taller cell. */
  .pr-cmp tbody td.pr-c-c {
    text-align: left; align-self: stretch; line-height: 1.4;
    padding: 7px 9px; border-radius: var(--r1);
    background: color-mix(in srgb, var(--surface-2) 55%, var(--surface));
  }
  .pr-cmp tbody td.pr-c-c::before {
    content: attr(data-pm); display: inline; margin-right: 6px;
    font: 500 12px/1.4 var(--mono); letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink-3);
  }
  /* The folded duplicates. pricing.js marks a row with which of its three
     answers repeat; the cell that survives already carries the names of the
     plans it speaks for, so nothing on screen loses an answer — the row just
     stops saying the same thing twice underneath itself. */
  .pr-cmp tbody tr[data-eq="all"] td.pr-c-c[data-i="1"],
  .pr-cmp tbody tr[data-eq="all"] td.pr-c-c[data-i="2"],
  .pr-cmp tbody tr[data-eq="fw"] td.pr-c-c[data-i="1"],
  .pr-cmp tbody tr[data-eq="we"] td.pr-c-c[data-i="2"] { display: none; }
  .pr-cmp tbody tr.is-same td.pr-c-c { background: var(--accent-soft); }
  .pr-cmp tbody tr.is-same td.pr-c-c::before { color: var(--accent); }
  .pr-c-v { font-size: 12px; line-height: 1.4; }
  /* the tick sits on the text baseline by default, which made a cell answering
     with a tick a pixel taller than the cell beside it answering with a dash —
     two boxes side by side that do not line up read as a mistake */
  .pr-c-y { vertical-align: middle; }

  /* the group bands are already full-width blocks; they only lose the grid */
  .pr-cmp tbody tr.pr-c-g { display: block; padding: 12px 14px; }
  .pr-c-g td { background: none; }
  .pr-cmp tbody tr.pr-c-g td { padding: 0; }
  .pr-c-gn { margin-top: 4px; font-size: 12.5px; line-height: 1.45; }

  /* The foot under the table says two things and this page has already said
     both: "it does not expire, it is not time-boxed" is the Free card's "no
     expiry date, nothing time-boxed" one section up, and "support is the one
     line where Free is deliberately worse" points at the response-time row
     inside the table it is printed under. On a desk it costs one line beside a
     wide table; on a phone it measured 107px of repetition. */
  .pr-tblfoot { display: none; }

  /* ---- 4 · the rules ------------------------------------------------------
     Six rows, each a heading, a rule and the practice it replaces. Nothing is
     dropped; the type steps down to the phone's measure and the row's padding
     stops being a desk's. */
  .pr-rule { padding: 12px 14px; gap: 6px 0; }
  .pr-rule-k { font-size: 14px; }
  .pr-rule-r { font-size: 13.5px; line-height: 1.5; }
  .pr-rule-u { margin-top: 6px; font-size: 12.5px; line-height: 1.45; }

  /* ---- 5 · the ceiling ----------------------------------------------------
     .pr-side is a desktop sidebar: seven spec rows printed beside the two
     paragraphs that argue the ceiling, so a reader can take the numbers
     without reading the argument. Stacked, it lands directly underneath that
     argument, and every one of the seven rows has just been read as a
     sentence — the two million calls, both warnings, the 5 rps at the line,
     the $0 charged, the calendar-month reset, and paid traffic never counted.
     The 60/20 rate limit is the odd one out, and it is stated twice more on
     this page: rule 04 above and a row of the table. Hiding a block is only
     honest while the paragraph still carries what the block said, so the
     second warning is named in the prose rather than left to this card —
     changing that sentence changes what this rule is allowed to hide.

     So on a phone the card keeps only its foot, which is the one thing in it
     that is not a restatement — the published ceiling divided into the traffic
     of the reference account, which is arithmetic nothing else here does. */
  .pr-ceil { margin-top: 18px; gap: 14px; }
  .pr-sub { margin: 8px 0 10px; }
  .pr-prose p { font-size: 14px; line-height: 1.55; margin-bottom: 10px; }
  .pr-concede { padding: 12px 14px; font-size: 13.5px; line-height: 1.5; }
  .pr-side .card-head, .pr-side .card-body { display: none; }
  .pr-side .card-foot { border-top: 0; border-radius: var(--r3); }
  /* paintCeilRef() removes its own host when dashboard-data.js is missing, and
     with the head and the body hidden that would leave an empty bordered box */
  .pr-side .card:not(:has(.card-foot)) { display: none; }
  #ceilRef .small { font-size: 12.5px; }

  /* ---- 6 · faq ------------------------------------------------------------
     These six questions are the longest on the site — whole sentences with
     clauses, not three-word labels — so the shared 15px .faq-q ran the longest
     of them to three lines and a 100px row at 320px, and four of the six to
     two. At 13.5px, with the chevron's gap in to 10px to give the sentence the
     width, every one of them is at most two lines at 320: the longest is 62px
     there and a one-line question lands at 43px, inside the control band. */
  #faqList .faq-q { padding: 12px 0; gap: 10px; font-size: 13.5px; line-height: 1.4; }
  #faqList .faq-a { padding-bottom: 14px; font-size: 13.5px; line-height: 1.55; }

  /* ---- 7 · cta ------------------------------------------------------------
     30px of padding on a 358px column is a sixth of the width. */
  .pr-cta { padding: 22px 16px; }
  .pr-cta h2 { margin: 10px 0 8px; }
  .pr-cta-act { margin-top: 16px; gap: 8px; }
}