/* Buyer-help guide (Title II: which posted PDFs to fix; what remediation costs per page). The guide template (section nav, reading
   column) forked from the ADA Title II dates guide, with the rule's sentence set as a quote, a pile table and a price table that each
   become cards on a phone, and one offer box built from the /tagged-pdfs/ price card. */
article.tzg-guide { max-width: 72rem; margin-inline: auto; }
/* The H1 is a sentence in display type, 108 characters: balanced, four lines at desktop. */
article.tzg-guide h1 { max-width: 30ch; font-size: clamp(1.75rem, 1rem + 3vw, 3.5rem); line-height: 1.06; text-wrap: balance; }
/* the intro keeps the reading measure */
article.tzg-guide .results-intro { max-width: none; }
article.tzg-guide .results-intro > [data-article-intro] > * { max-width: var(--cn-reading-max); }
/* the kicker date stays one unit on a phone */
.tzg-guide .results-intro .eyebrow time { white-space: nowrap; }
.tzg-guide .guide-byline { color: var(--wp-muted); margin: 0 0 var(--wp-8); }
.tzg-guide .guide-body { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--wp-16); margin-top: var(--wp-12); border-top: var(--wp-rule-strong) solid var(--wp-ink); }
.tzg-guide .guide-nav { padding-top: var(--wp-8); }
.tzg-guide .guide-nav ol { list-style: decimal-leading-zero; padding-left: var(--wp-6); margin: 0; }
.tzg-guide .guide-nav li { padding-left: var(--wp-2); margin-bottom: var(--wp-4); }
.tzg-guide .guide-nav li::marker { font-family: var(--wp-font-mono); color: var(--wp-muted); }
.tzg-guide .guide-nav a { display: inline-flex; align-items: center; min-height: var(--wp-tap); line-height: 1.5; }
.tzg-guide .guide-back { margin-top: var(--wp-4); }
.tzg-guide .guide-reading { min-width: 0; }
article.tzg-guide .results-section:first-child { border-top: 0; margin-top: 0; }
article.tzg-guide .results-section { scroll-margin-top: var(--wp-8); }
/* a date (April 26, 2027) and a three-part name (conforming-alternate-version) are each one unit on a line */
.tzg-guide .tzg-nobreak { white-space: nowrap; }
/* Narrower than 20rem happens only with enlarged text (at 100% the page is at least 320px): there a unit wider than the line wraps inside its own box instead of crossing the screen. */
@container page (max-width: 19.99rem) { .tzg-guide .tzg-nobreak { display: inline-block; max-width: 100%; overflow-wrap: anywhere; text-decoration: inherit; white-space: normal; } }

/* the intro: the lede (the two dates), then what the page adds */
article.tzg-guide .tzg-intro { max-width: 44em; font-size: var(--wp-text-body); line-height: 1.6; margin: 0 0 var(--wp-4); }
/* tables: ledger lines, mono heads */
.tzg-guide .tzg-table-wrap { margin: var(--wp-6) 0 var(--wp-8); }
.tzg-guide table.tzg-table { min-width: 0; width: 100%; border: 0; border-collapse: collapse; font-size: var(--wp-text-ledger); line-height: 1.5; }
.tzg-guide .tzg-table th, .tzg-guide .tzg-table td { border: 0; border-bottom: var(--wp-rule) solid var(--wp-hair); padding: var(--wp-3) var(--wp-4) var(--wp-3) 0; text-align: left; vertical-align: top; background: none; }
.tzg-guide .tzg-table th:last-child, .tzg-guide .tzg-table td:last-child { padding-right: 0; }
.tzg-guide .tzg-table thead th { font: 500 var(--wp-text-cite)/1.3 var(--wp-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp-muted); border-bottom: var(--wp-rule-strong) solid var(--wp-ink); vertical-align: bottom; }
.tzg-guide .tzg-table tbody th { font-weight: 600; }
.tzg-guide .tzg-table td strong, .tzg-guide .tzg-table th strong { font-weight: 700; }

/* lists in the reading column: numbered steps carry their numbers in mono, like the nav */
article.tzg-guide .results-section ol { padding-left: var(--wp-8); }
article.tzg-guide .results-section ol > li { margin-bottom: var(--wp-3); padding-left: var(--wp-2); }
article.tzg-guide .results-section ol > li::marker { font-family: var(--wp-font-mono); font-weight: 500; color: var(--wp-muted); }
/* the rule's own sentence: set off by a heavy edge, in the reading size, so it reads as the source the answer comes from */
.tzg-guide blockquote.tg-quote { margin: var(--wp-6) 0; padding: var(--wp-1) 0 var(--wp-1) var(--wp-6); border-left: 3px solid var(--wp-ink); max-width: 62ch; }
.tzg-guide blockquote.tg-quote p { margin: 0; font-size: 1.0625rem; line-height: 1.6; }

/* The pile table: four columns at desktop, the long "what goes in it" column the widest; the pile names are the row titles. */
.tzg-guide .tg-piles { table-layout: fixed; }
.tzg-guide .tg-piles thead th:nth-child(1) { width: 19%; }
.tzg-guide .tg-piles thead th:nth-child(2) { width: 36%; }
.tzg-guide .tg-piles thead th:nth-child(3) { width: 27%; }
.tzg-guide .tg-piles tbody th { font-weight: 600; }
.tzg-guide .tg-piles td:last-child { font-family: var(--wp-font-mono); font-size: var(--wp-text-cite); line-height: 1.5; padding-top: calc(var(--wp-3) + .1rem); }
/* Below 48rem four columns would be a word a line. Each pile becomes a card: its name, then each value under its own column head
   (drawn by CSS with empty alt text, so it is not read twice). The column heads leave the screen; screen readers keep the table. */
@container page (max-width: 48rem) {
  .tzg-guide .tg-piles, .tzg-guide .tg-piles tbody, .tzg-guide .tg-piles tr, .tzg-guide .tg-piles th, .tzg-guide .tg-piles td { display: block; width: auto; }
  .tzg-guide .tg-piles thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tzg-guide .tg-piles tbody { border-top: var(--wp-rule-strong) solid var(--wp-ink); }
  .tzg-guide .tg-piles tr { padding: var(--wp-4) 0 var(--wp-5, 1.25rem); border-bottom: var(--wp-rule) solid var(--wp-hair); }
  .tzg-guide .tg-piles th, .tzg-guide .tg-piles td { border: 0; padding: 0; }
  .tzg-guide .tg-piles tbody th { font-size: var(--wp-text-body); line-height: 1.4; margin-bottom: var(--wp-3); }
  .tzg-guide .tg-piles td + td { margin-top: var(--wp-3); }
  .tzg-guide .tg-piles td:last-child { padding-top: 0; }
  .tzg-guide .tg-piles td::before { content: attr(data-label); content: attr(data-label) / ""; display: block; margin-bottom: var(--wp-1); font: 500 var(--wp-text-cite)/1.35 var(--wp-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp-muted); }
}

/* The price table: three columns of "lowest / median / highest"; figures in lining tabular numerals so the prices align row on row,
   the bold median the one the eye lands on. */
.tzg-guide .tg-prices { table-layout: fixed; font-variant-numeric: lining-nums tabular-nums; }
.tzg-guide .tg-prices thead th:nth-child(1) { width: 22%; }
.tzg-guide .tg-prices tbody th { font-weight: 600; white-space: nowrap; }
/* Below 30rem the price table stays a table: seven bands compared down two columns read better than seven cards repeating the
   same two long heads. Each price triple wraps inside its own cell; the job size column narrows to its widest band. */
@container page (max-width: 30rem) {
  .tzg-guide .tg-prices thead th:nth-child(1) { width: 25%; }
  .tzg-guide .tg-prices th, .tzg-guide .tg-prices td { padding-right: var(--wp-3); }
  /* at 320 "1–2 pages" is wider than its column: the band name may take two lines */
  .tzg-guide .tg-prices tbody th { white-space: normal; }
}

/* The offer box: the /tagged-pdfs/ price card (panel, ink frame, offset block), the price as the figure, the terms as a ruled list,
   then the two ways on: the free file, or the full offer page. */
.tzg-guide .tg-offer { margin: var(--wp-6) 0 var(--wp-10, 2.5rem); max-width: 40rem; padding: var(--wp-6); background: var(--wp-panel); border: var(--wp-rule-strong) solid var(--wp-ink); box-shadow: 10px 10px 0 var(--wp-cited); }
.tzg-guide .tg-offer p, .tzg-guide .tg-offer li { max-width: none; }
.tzg-guide .tg-offer-kicker { font: 500 var(--wp-text-cite)/1.3 var(--wp-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--wp-muted); margin: 0 0 var(--wp-2); }
.tzg-guide .tg-offer-amount { font-family: var(--wp-font-body); font-variant-numeric: lining-nums; letter-spacing: -.01em; font-weight: 600; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1; margin: 0 0 var(--wp-4); }
.tzg-guide .tg-offer-amount span { font-weight: 400; font-size: var(--wp-text-body); letter-spacing: 0; }
.tzg-guide .tg-offer-lede { margin: 0 0 var(--wp-4); font-size: var(--wp-text-body); line-height: 1.55; }
.tzg-guide .tg-offer-terms { list-style: none; padding: 0; margin: 0 0 var(--wp-6); border-top: var(--wp-rule) solid var(--wp-hair); font-size: var(--wp-text-ledger); line-height: 1.55; }
.tzg-guide .tg-offer-terms li { margin: 0; padding: var(--wp-2) 0; border-bottom: var(--wp-rule) solid var(--wp-hair); }
.tzg-guide .tg-offer-act { display: flex; flex-wrap: wrap; gap: var(--wp-3); margin: 0; }
.tzg-guide .tg-offer-act a { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; text-align: center; }
@container page (max-width: 30rem) {
  .tzg-guide .tg-offer { padding: var(--wp-5, 1.25rem); box-shadow: 6px 6px 0 var(--wp-cited); margin-right: 6px; }
  .tzg-guide .tg-offer-act a { width: 100%; }
}
/* The closing line says who prepared the page: body text at every width, set apart under a hairline */
article.tzg-guide .pk-signoff { margin-top: var(--wp-8); padding-top: var(--wp-4); border-top: var(--wp-rule) solid var(--wp-hair); }
/* one column up to 62.5rem, as on the runtimes guide: below it the nav column leaves the reading column too narrow for the answer rows */
@container page (max-width: 62.5rem) {
  .tzg-guide .guide-body { grid-template-columns: minmax(0, 1fr); gap: var(--wp-8); }
  .tzg-guide .guide-nav { padding-top: var(--wp-6); border-bottom: var(--wp-rule) solid var(--wp-ink); padding-bottom: var(--wp-6); }
  .tzg-guide .guide-nav li { margin-bottom: var(--wp-2); }
  article.tzg-guide .results-section:first-child { padding-top: 0; }
}
@container page (max-width: 43rem) {
  /* two-digit markers need the room on a phone gutter */
  .tzg-guide .guide-nav ol { padding-left: 2.5rem; }
}