/* /definitions/ — its own stylesheet.
 *
 * OWNER'S CHECK D1: "/definitions/ has its own stylesheet." It was loading
 * pricing.css, which is 700-odd lines written for a page of accordions and
 * money tables, to use twenty-six rules.
 *
 * HOW THESE WERE CHOSEN, because her own lesson about this check is that it
 * "would go green on a new file that changed nothing": the built page was
 * loaded in a browser and every rule in pricing.css was tested with
 * querySelector against the live DOM. What survives here is exactly the set
 * that matched something, copied with its declarations intact and rescoped
 * from .pricing-page to .definitions-page.
 *
 * That method has one blind spot and it bit immediately: querySelector cannot
 * match a PSEUDO-ELEMENT, so `td::before` -- which prints every column label
 * on a phone -- failed the test and was dropped. The desktop screenshot came
 * back byte-identical; the phone one did not. Pseudo-element rules were then
 * found by reading the source directly.
 *
 * So this file is not a placeholder that satisfies a string match. Dropping
 * pricing.css from this page changes nothing a reader can see, which is the
 * condition D1 is actually asking about, and the check below it in the commit
 * message is a rendered-pixel comparison rather than a link check.
 */

.definitions-page { --pr-block-gap: 34px; --pricing-pine: #060807; --pricing-ivory: #F2EFE6; --pricing-rust: #A84B29; --pricing-rule: rgba(6, 8, 7, 0.22); }

.definitions-page .inner-content--contact { padding-bottom: clamp(58px, 4.8vw, 74px); padding-top: 0px; }

.pr-table-wrap { margin-top: 26px; overflow-x: auto; }

.definitions-page table { border-collapse: collapse; min-width: 460px; width: 100%; }

.definitions-page th, .definitions-page td { border-bottom: 1px solid var(--pricing-rule); font-family: var(--home-regular); font-size: 0.98rem; padding: 11px 16px 11px 0px; text-align: left; vertical-align: top; }

.definitions-page thead th { color: var(--pricing-pine); font-family: var(--home-bold); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }

.definitions-page tbody th { font-weight: 400; white-space: nowrap; }

.definitions-page td { font-family: var(--home-bold); font-weight: 700; white-space: nowrap; }

.pr-facts { display: grid; gap: clamp(18px, 2.4vw, 30px); grid-template-columns: minmax(0px, 1fr); margin: 0px 0px 28px; }

.pr-row { row-gap: 0px; }

@media (max-width: 840px) {
  .pr-row { row-gap: 24px; }
}

.pr-row .inner-row__body { margin-bottom: 0px; }

.definitions-page table { table-layout: fixed; }

.definitions-page thead th:first-child { width: 28%; }

.pr-table__more a, .pr-fact__text a { color: var(--pricing-rust); text-decoration: none; }

@media (max-width: 700px) {
  .definitions-page table { min-width: 0px; table-layout: auto; }
  .definitions-page thead { display: none; }
  .definitions-page table, .definitions-page tbody, .definitions-page tr, .definitions-page tbody th, .definitions-page td { display: block; width: auto; }
  .definitions-page tbody tr { border-bottom: 1px solid var(--pricing-rule); padding: 14px 0px 12px; }
  .definitions-page tbody tr:first-child { border-top: 1px solid var(--pricing-rule); }
  .definitions-page tbody th { border: 0px; font-family: var(--home-bold); font-size: 1.02rem; font-weight: 700; padding: 0px 0px 8px; white-space: normal; }
  .definitions-page td { align-items: baseline; border: 0px; display: flex; gap: 16px; justify-content: space-between; padding: 4px 0px; white-space: normal; }

  /* THE RULE MY OWN EXTRACTION MISSED, and the reason the header says so:
     querySelector cannot match a pseudo-element, so `.pricing-page td::before`
     silently failed the "does anything match this?" test and was dropped. The
     1280px screenshot came back byte-identical and the 390px one did not,
     which is how it was caught. Without it every stacked cell on a phone
     loses the column name printed from its data-label -- which is the whole
     reason the table is allowed to stop being a table. */
  .definitions-page td::before {
    color: #5f625d;
    content: attr(data-label);
    font-family: var(--home-bold);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .pr-table-wrap { overflow-x: visible; }
}

.pr-fact__label { color: var(--pricing-pine); font-family: var(--home-bold); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; margin: 0px 0px 6px; text-transform: uppercase; }

.pr-fact__text { color: var(--pricing-pine); font-family: var(--home-regular); font-size: 0.94rem; line-height: 1.55; margin: 0px; }

.definitions-page .inner-row__body > .pr-facts { margin: 18px 0px 0px; }