/* Batch CS (the owner's report 2026-10-28: "several pages on the site still contain the old style"): the READING PAGES on the dark
   shell. Until CS these pages rendered on the light reading sheet (customer.css: main.legacy-sheet, an off-white sheet, and .card, a white
   box inside it) with the browser's own link colours. They now render as the quote flow's pages do (t4_page: main.t4): the title block
   (.t4c-title / .t4c-sub) and the glass card (.holo.brackets.t4c-card) from quote-t4c.css, the links from site-pages.css (.t4 a). This file
   only makes the pages' EXISTING HTML read on the glass: the census-pinned blocks (webapp/tests/n103_census_index.json) keep their bytes,
   inline styles included, as customer/pay.html's did with static/pay.css. Loaded after site-pages.css and quote-t4c.css by the CS pages
   only, never with customer.css. Tokens only (webapp/static/tokens.css): no colour literal. No text: no content: property anywhere. */

/* ------------------------------------------------------------------ the column */
.rd { padding-block: var(--s-6) var(--s-8); }
.rd-col { max-width: var(--w-prose); margin-inline: auto;
  --muted: var(--c-on-glass-muted);   /* the inline color:var(--muted) of the light sheet (customer.css, not loaded here) */
  --line: var(--c-holo-rule); }       /* the legal page's own table rule reads var(--line, ...) */
.t4 .rd-col > * + * { margin-top: var(--s-5); }       /* the title, the cards and the lines between them (.t4 resets p margins) */
.t4 .rd .t4c-card > * + *:not(blockquote) { margin-top: var(--s-4); }   /* the sheet's paragraph rhythm inside a card (a quote box keeps its own) */
@media (max-width: 480px) { .rd { padding-top: var(--s-4); } }

/* ------------------------------------------------------------------ small parts of the old HTML, on the glass */
.rd .center { text-align: center; }
.rd .muted, .rd .why { color: var(--c-on-glass-muted); }
.t4 .rd .helper { font-size: var(--fs-small); color: var(--c-on-glass-2); }
.t4 .rd .note, .t4 .rd .err { padding: var(--s-2) var(--s-3); border-left: var(--bw-3) solid var(--c-orange-tint);
  font-size: var(--fs-small); color: var(--c-on-glass-2); }
.t4 .rd .note strong, .t4 .rd .err strong { color: inherit; }
.rd .opt { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-small); color: var(--c-on-glass-2); }
.rd .opt input { margin-top: var(--s-1); accent-color: var(--c-orange); }
.t4 .rd .t4c-label { margin-top: var(--s-4); }
.rd table td { padding: var(--s-1) var(--s-2); }

/* ------------------------------------------------------------------ the old buttons (button.cta / button.ghost) as the dark pages' .btn /
   .btn--ghost (site-pages.css): the class names stay (the e2e suites select button.cta), the look is the shared button's */
.rd button.cta, .rd button.ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap-min); min-width: var(--tap-min); padding: var(--s-3) var(--s-5);
  font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-semibold); line-height: var(--lh-snug);
  color: var(--c-white); background: var(--c-orange-text); border: var(--bw-1) solid var(--c-holo-edge-strong); border-radius: var(--r-1);
  box-shadow: var(--glow-1); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--d-fast) var(--ease-standard), border-color var(--d-fast) var(--ease-standard),
    transform var(--d-spring-snap) var(--ease-spring-snap), box-shadow var(--d-spring-base) var(--ease-spring-base);
}
.rd button.cta:hover { box-shadow: var(--glow-2); border-color: var(--c-orange-on-glass); transform: translateY(var(--lift-hover)); }
.rd button.cta:active { background: var(--c-orange-text-press); box-shadow: var(--glow-1); transform: translateY(var(--press-shift)) scale(var(--press-scale)); }
.rd button.ghost { color: var(--c-on-glass); background: transparent; border-color: var(--c-holo-edge); box-shadow: none; }
.rd button.ghost:hover { background: var(--c-glass-hover); border-color: var(--c-holo-edge-strong); box-shadow: var(--glow-1); }
.rd button.ghost:active { background: var(--c-glass-press); box-shadow: none; }
.rd button.cta .btn-arrow { transition: transform var(--d-spring-base) var(--ease-spring-base); }
.rd button.cta:hover .btn-arrow { transform: translateX(var(--s-1)); }
.rd button.cta:focus-visible, .rd button.ghost:focus-visible { outline: var(--focus-width) solid var(--c-focus-on-dark); outline-offset: var(--focus-offset); }

/* ------------------------------------------------------------------ the notice and the thank-you cards (centred) */
.rd .notice-card { text-align: center; padding: var(--s-7) var(--s-5); }
.t4 .rd .notice-card .notice-msg { max-width: var(--w-lead); margin: var(--s-3) auto var(--s-5); color: var(--c-on-glass-2); }

/* ------------------------------------------------------------------ the guides list and the breadcrumb line */
.t4 .rd .glist.t4c-card > * + * { margin-top: var(--s-2); }
.t4 .rd .glist h2 { font-size: var(--fs-h3); }
.t4 .rd .glist .desc { color: var(--c-on-glass-2); }
.t4 .rd .glist .date { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--c-on-glass-muted); }

/* ------------------------------------------------------------------ markdown bodies (/faq, /how-it-works, /what-we-make, a guide) */
.t4 .rd .prose, .t4 .rd .guide { line-height: var(--lh-body); }
.t4 .rd .prose h2, .t4 .rd .guide h2 { font-size: var(--fs-h2); margin-top: var(--s-6); }
.t4 .rd .prose h3, .t4 .rd .guide h3 { font-size: var(--fs-h3); margin-top: var(--s-5); }
.t4 .rd .prose > :first-child, .t4 .rd .guide > :first-child { margin-top: 0; }
.t4 .rd .prose ul, .t4 .rd .prose ol, .t4 .rd .guide ul, .t4 .rd .guide ol { padding-left: var(--s-5); }
.t4 .rd .prose li + li, .t4 .rd .guide li + li { margin-top: var(--s-1); }
.rd .prose table, .rd .guide table { border-collapse: collapse; width: 100%; font-size: var(--fs-small); }
.rd .prose th, .rd .prose td, .rd .guide th, .rd .guide td { border: var(--bw-1) solid var(--c-holo-rule); padding: var(--s-2) var(--s-3); text-align: left; vertical-align: top; }
.rd .prose th, .rd .guide th { background: var(--c-glass-raised); color: var(--c-on-glass); font-weight: var(--fw-semibold); }
.rd .prose tr:nth-child(even) td, .rd .guide tr:nth-child(even) td { background: var(--c-glass-disabled); }
.rd .guide img { max-width: 100%; height: auto; border-radius: var(--r-2); border: var(--bw-1) solid var(--c-holo-edge-soft); }
.rd .prose blockquote, .rd .guide blockquote { margin-inline: 0; padding: var(--s-1) var(--s-4); border-left: var(--bw-3) solid var(--c-orange-tint); color: var(--c-on-glass-2); }
.rd .prose hr, .rd .guide hr, .rd .legal-doc hr { border: 0; border-top: var(--bw-1) solid var(--c-holo-rule); }
.rd .page-cta { margin-block: var(--s-5); }
@media (max-width: 640px) { .rd .prose table, .rd .guide table { display: block; overflow-x: auto; } }

/* ------------------------------------------------------------------ the legal documents (/terms, /privacy, /shipping)
   customer/legal_page.html's own <style> block is LEGALLY LOAD-BEARING and keeps its bytes: the disclaimer box keeps its 2 px border, its
   light fill and its weight at every width. On the dark page the box's text takes the light-surface ink (it inherited the sheet's ink
   before), so the box stays the most conspicuous thing on the page. Only the cosmetic table fills (NOT load-bearing) move to the glass. */
.t4 .rd .legal-doc h1, .t4 .rd .legal-doc h2, .t4 .rd .legal-doc h3 { margin-top: var(--s-6); }
.t4 .rd .legal-doc > :first-child { margin-top: 0; }
.t4 .rd .legal-doc h1 { font-size: var(--fs-h1); }
.t4 .rd .legal-doc h2 { font-size: var(--fs-h2); }
.t4 .rd .legal-doc h3 { font-size: var(--fs-h3); }
.t4 .rd .legal-doc ul, .t4 .rd .legal-doc ol { padding-left: var(--s-5); }
.t4 .rd .legal-doc li + li { margin-top: var(--s-1); }
.rd .legal-doc blockquote { color: var(--c-ink); }
.t4 .rd .legal-doc blockquote strong { color: inherit; }
.t4 .rd .legal-doc blockquote a { color: var(--c-link); }
.t4 .rd .legal-doc th { background: var(--c-glass-raised); color: var(--c-on-glass); }
.t4 .rd .legal-doc tr:nth-child(even) td { background: var(--c-glass-disabled); }