/* Pages that bring their own stylesheet (the imported Loadcheck tool) still get the brand faces. */
@import url("/customer-platform/assets/fonts.css");
/* Shared CyberNative components. Values come from brand/tokens.css (Object Atlas, 2026-10-23). */
:root {
  font-family: var(--wp-font-body);
  background: var(--wp-paper);
  color: var(--wp-ink);

  /* Geometry aliases keep the pages that migrate in later rows legible. */
  --cn-font-display: var(--wp-font-display);
  --cn-font-body: var(--wp-font-body);
  --cn-font-mono: var(--wp-font-mono);
  --cn-space-1: var(--wp-1);
  --cn-space-2: var(--wp-2);
  --cn-space-3: var(--wp-3);
  --cn-space-4: var(--wp-4);
  --cn-space-5: var(--wp-6);
  --cn-space-6: var(--wp-6);
  --cn-space-8: var(--wp-8);
  --cn-space-12: var(--wp-12);
  --cn-space-16: var(--wp-16);
  --cn-space-24: var(--wp-24);
  --cn-space-32: var(--wp-32);
  --cn-radius-rule: var(--wp-radius);
  --cn-radius-control: var(--wp-radius);
  --cn-page-max: var(--wp-page);
  --cn-reading-max: var(--wp-measure);
  --cn-figure-max: var(--wp-page);
  --cn-stroke: var(--wp-rule-strong);
  --cn-stroke-small: var(--wp-rule);
}
/* Headings take the display cut: heavy, condensed, tight. Page rules can still set their own family. */
/* Object Atlas: Syne at 500 with tight tracking. A long word breaks rather than crossing a phone screen. */
:where(h1, h2) { font-family: var(--wp-font-display); font-weight: 500; letter-spacing: -0.035em; line-height: 1.02; overflow-wrap: break-word; text-wrap: balance; }

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; }
/* body is the size container `page`, and every layout switch is a container query in rem, not a media query in px:
   rem follows the reader's text size, so at 200% text a page takes its phone layout instead of scrolling sideways.
   body has no margin or padding, so N px is N/16 rem and 100% text switches at the same widths as before. */
body { container: page / inline-size; margin: 0; min-width: 0; font-size: var(--wp-text-body); line-height: 1.6; }
/* Links are ink with a blue-deep rule under them (paper with a pale-blue rule on the field). */
a { color: var(--wp-link); text-decoration-color: var(--oa-blue-deep); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--wp-focus);
  outline-offset: 3px;
}
/* Scrollable code and table panels and disclosures take the same ring instead of the thin browser default. */
summary:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible { outline: 3px solid var(--wp-focus); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--wp-page); margin: 0 auto; padding: 0 var(--wp-gutter); }
.sr-only { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.skip-link {
  background: var(--wp-paper);
  border: var(--wp-rule-strong) solid var(--wp-ink);
  border-radius: var(--wp-radius);
  color: var(--wp-ink);
  font-weight: 600;
  left: var(--wp-4);
  min-height: var(--wp-tap);
  padding: var(--wp-2) var(--wp-4);
  position: absolute;
  text-decoration: none;
  top: -4rem;
  z-index: 1;
}
.skip-link:focus { top: var(--wp-4); }

/* The header is the field: graphite, the paper C/N and the lowercase Syne wordmark. It reads only the
   --oa-* values, so a page palette (the W2.1 flagships re-point the --wp-* names) cannot recolour it. */
.site-header { background: var(--oa-ground); border-bottom: 1px solid var(--oa-line); color: var(--oa-paper); position: relative; }
.site-header :focus-visible, .site-footer :focus-visible, .field :focus-visible { outline-color: var(--oa-blue); }
.site-header .wrap, .site-footer .wrap { padding-left: var(--wp-gutter); padding-right: var(--wp-gutter); }
.site-header .wrap { align-items: center; display: flex; gap: var(--wp-8); min-height: 76px; }
.brand { align-items: center; color: var(--oa-paper); display: inline-flex; flex: 0 0 auto; gap: 10px; min-height: var(--wp-tap); text-decoration: none; }
.brand img, .brand-mark { display: block; height: 32px; width: 32px; }
/* The wordmark is lowercase; the accessible name keeps its capitals ("CyberNative home"). */
.brand-name, .brand > span { font: 600 1.5rem/1 var(--oa-font-display); letter-spacing: -0.054em; text-transform: lowercase; }
.site-header .brand .brand-name { color: var(--oa-paper); font-family: var(--oa-font-display); font-stretch: normal; font-weight: 600; }
.site-nav, .site-header .nav { align-items: center; display: flex; flex-wrap: wrap; gap: var(--wp-2); margin-left: auto; margin-right: calc(-1 * var(--wp-3)); }
.site-nav a, .site-header .nav a {
  align-items: center;
  color: var(--oa-paper);
  display: inline-flex;
  font-family: var(--oa-font-body);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  min-height: var(--wp-tap);
  padding-inline: var(--wp-3);
  text-decoration: none;
  text-transform: none;
}
.site-nav a:hover, .site-header .nav a:hover { color: var(--oa-blue); text-decoration: underline; text-decoration-color: var(--oa-blue); text-decoration-thickness: 1px; text-underline-offset: 6px; }
/* The current-page rule is a pseudo-element, not a background gradient, so
   contrast checkers can read the link text against the plain field behind it. */
.site-nav a[aria-current="page"], .site-header .nav a[aria-current="page"] { position: relative; }
.site-nav a[aria-current="page"]::after, .site-header .nav a[aria-current="page"]::after {
  background: var(--oa-blue);
  bottom: 6px;
  content: "";
  height: var(--wp-rule-strong);
  left: var(--wp-3);
  position: absolute;
  right: var(--wp-3);
}
.header-action { flex: 0 0 auto; }
.site-header .btn, .site-header .button { background: var(--oa-blue); border-color: var(--oa-blue); color: var(--oa-ground); }
.site-header .btn:hover, .site-header .button:hover { background: var(--oa-paper); border-color: var(--oa-paper); color: var(--oa-ground); }

/* The seeded drawing under the navigation (build.mjs inlines it). It stretches to the viewport;
   the strokes keep their width. It is retired from the header and footer, which are plain graphite. */
.field-band { color: var(--wp-on-bio); display: block; height: 56px; overflow: hidden; width: 100%; }
.site-header .field-band, .site-footer .field-band { display: none; }
.field-band svg { display: block; height: 100%; width: 100%; }
@container page (max-width: 37.5rem) { .field-band { height: 40px; } }
.field-band--close { transform: scaleX(-1); }

main { max-width: var(--wp-page); margin: 0 auto; padding: 0 var(--wp-gutter); }
.home-main { max-width: none; padding: 0; }
main > .wrap { padding-left: 0; padding-right: 0; }
.account-main { padding-bottom: var(--wp-16); padding-top: var(--wp-16); }
.account-main h1, .account-main h2, .account-main h3, .legal-page h1, .legal-page h2, .legal-page h3 {
  font-family: var(--wp-font-display);
  line-height: 1.1;
}
.account-main h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); margin: 0 0 var(--wp-4); max-width: 14ch; }
.account-main h2 { font-size: 2rem; margin: 0 0 var(--wp-4); }
.account-main h3 { font-size: 1.25rem; margin: 0 0 var(--wp-2); }
.account-intro { color: var(--wp-muted); font-size: 1.125rem; margin: 0 0 var(--wp-8); max-width: 60ch; }
.account-grid { display: grid; gap: var(--wp-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }

.legal-page { padding-bottom: var(--wp-16); padding-top: var(--wp-16); }
.legal-page h1 { font-size: clamp(2.75rem, 7vw, 5.5rem); margin: 0 0 var(--wp-4); max-width: 12ch; }
.legal-page h2 { border-top: var(--wp-rule-strong) solid var(--wp-ink); font-size: clamp(1.75rem, 4vw, 2.75rem); margin: var(--wp-16) 0 var(--wp-6); padding-top: var(--wp-6); }
.legal-page h3 { font-family: var(--wp-font-body); font-size: 1.125rem; margin: var(--wp-8) 0 var(--wp-3); }
.legal-page p, .legal-page ul, .legal-page ol { max-width: var(--wp-measure); }
.legal-page li + li { margin-top: var(--wp-3); }
.legal-page .lede { margin-bottom: var(--wp-4); }
.legal-page .legal-date { color: var(--wp-muted); font-size: var(--wp-text-meta); }
.legal-page .legal-address { background: var(--wp-cited); border-left: var(--wp-rule-strong) solid var(--wp-ink); font-size: 1.25rem; font-weight: 600; padding: var(--wp-4); }
.legal-page .legal-table { margin: var(--wp-6) 0; max-width: 100%; overflow-x: auto; }
.legal-page table { min-width: min(34rem, 100%); }
.legal-page th { background: var(--wp-cited); }

.button, .btn, button:not(.secondary):not(.text-button):not(.download-link) {
  align-items: center;
  background: var(--wp-bio);
  border: var(--wp-rule-strong) solid var(--wp-bio);
  border-radius: var(--wp-pill);
  color: var(--wp-on-bio);
  cursor: pointer;
  display: inline-flex;
  font: 600 1rem/1.2 var(--wp-font-body);
  justify-content: center;
  min-height: var(--wp-tap);
  padding: var(--wp-2) var(--wp-6);
  text-decoration: none;
}
.button:hover, .btn:hover, button:not(.secondary):not(.text-button):not(.download-link):hover { background: var(--oa-blue-deep); border-color: var(--oa-blue-deep); color: var(--oa-paper); text-decoration: none; }
.button-secondary, .more, .text-button, .download-link, button.secondary {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--wp-ink);
  cursor: pointer;
  display: inline-flex;
  font: 600 1rem/1.25 var(--wp-font-body);
  justify-content: center;
  min-height: var(--wp-tap);
  padding: 0;
  text-decoration: underline;
  text-decoration-thickness: var(--wp-rule-strong);
  text-underline-offset: 5px;
}
.button-secondary:hover, .more:hover, .text-button:hover, .download-link:hover, button.secondary:hover { background: transparent; color: var(--wp-ink); text-decoration: underline; }
.more, .download-link { padding-right: var(--wp-4); position: relative; }
.more::after, .download-link::after { display: inline-block; position: absolute; right: 0; text-decoration: none; top: 50%; transform: translateY(-50%); }
.more::after, .download-link::after { content: "→"; }
button.btn-quiet:not(.secondary):not(.text-button):not(.download-link), .btn-quiet {
  align-items: center;
  background: var(--wp-panel);
  border: var(--wp-rule-strong) solid var(--wp-ink);
  border-radius: var(--wp-pill);
  color: var(--wp-ink);
  cursor: pointer;
  display: inline-flex;
  font: 600 1rem/1.2 var(--wp-font-body);
  justify-content: center;
  min-height: var(--wp-tap);
  padding: var(--wp-2) var(--wp-6);
  text-decoration: none;
}
button.btn-quiet:not(.secondary):not(.text-button):not(.download-link):hover, .btn-quiet:hover { background: var(--wp-paper); color: var(--wp-ink); }

.card {
  background: var(--wp-panel);
  border: var(--wp-rule-strong) solid var(--wp-ink);
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: var(--wp-6);
}
.form-field { display: grid; gap: var(--wp-2); margin-top: var(--wp-4); }
.form-field label { font-weight: 600; }
.form-field input, input, select, textarea {
  background: var(--wp-panel);
  border: var(--wp-rule-strong) solid var(--wp-ink);
  border-radius: var(--wp-radius);
  color: var(--wp-ink);
  font: 400 1rem/1.4 var(--wp-font-body);
  min-height: var(--wp-tap);
  min-width: 0;
  padding: var(--wp-2) var(--wp-3);
  width: 100%;
}
.actions { align-items: center; display: flex; flex-wrap: wrap; gap: var(--wp-4); margin-top: var(--wp-6); }
.muted { color: var(--wp-muted); }
.notice { margin: var(--wp-4) 0 0; min-height: 1.5rem; }
.state-empty, .state-loading, .state-error, .state-success { border-left: var(--wp-rule-strong) solid var(--wp-bio); padding-left: var(--wp-4); }
.state-loading { border-left-color: var(--wp-muted); }
.state-error { border-left-color: var(--wp-rust); color: var(--wp-rust); }
.state-success { border-left-color: var(--wp-deep); }
.pill { background: var(--wp-cited); border: var(--wp-rule) solid var(--wp-ink); border-radius: var(--wp-radius); display: inline-block; font-size: var(--wp-text-meta); font-weight: 600; padding: var(--wp-1) var(--wp-2); }
.job-list { list-style: none; margin: 0; padding: 0; }
.job-list li { border-top: var(--wp-rule) solid var(--wp-hair); padding: var(--wp-4) 0; }
.job-list li:first-child { border-top: 0; padding-top: 0; }

.label, .item-label {
  color: var(--wp-muted);
  font: 500 var(--wp-text-cite)/1.2 var(--wp-font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.label b, .item-label b { color: var(--wp-ink); font-weight: 500; }
mark { background: var(--wp-cited); color: inherit; padding: 0 .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
mark.flag { background: var(--wp-flag); }
.cite { align-items: center; color: var(--wp-ink); display: inline-flex; font: 500 var(--wp-text-cite)/1 var(--wp-font-mono); min-height: var(--wp-tap); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; white-space: nowrap; }
a.cite { justify-content: center; min-width: var(--wp-tap); }
.cite.flag { color: var(--wp-rust); }
.limit { border-left: var(--wp-rule-strong) solid var(--wp-rust); padding: var(--wp-1) 0 var(--wp-1) var(--wp-4); }
.limit .label { color: var(--wp-rust); display: block; margin-bottom: var(--wp-2); }
.index { border-top: var(--wp-rule) solid var(--wp-ink); list-style: none; margin: 0; padding: 0; }
.index li, .index-row { align-items: baseline; border-bottom: var(--wp-rule) solid var(--wp-ink); display: grid; gap: var(--wp-8); grid-template-columns: 11rem minmax(0, 1fr) minmax(0, 1.2fr) 7rem; padding: var(--wp-6) 0; }
.index h3 a, .index-row h3 a { color: var(--wp-ink); text-decoration: none; }
.index h3 a:hover, .index-row h3 a:hover { text-decoration: underline; }
.index p, .index-row p { color: var(--wp-muted); }
.index .num, .index-row .num { color: var(--wp-ink); font: 500 1rem/1.3 var(--wp-font-mono); text-align: right; white-space: nowrap; }
.big { font: 600 clamp(4rem, 9vw, 7.5rem)/.9 var(--wp-font-display); letter-spacing: -.03em; }
.big small { color: var(--wp-muted); font-size: .35em; letter-spacing: 0; }
.deep-field, .closing { background: var(--wp-deep); color: var(--wp-paper); }
.deep-field a, .closing a { color: var(--wp-paper); text-decoration-color: var(--wp-focus-field); }
/* On the field the action is a pale-blue plate with graphite type (10.77:1). */
.deep-field .btn, .closing .btn, .deep-field .button, .closing .button { background: var(--oa-blue); border-color: var(--oa-blue); color: var(--oa-ground); }
.deep-field .btn:hover, .closing .btn:hover, .deep-field .button:hover, .closing .button:hover { background: var(--oa-paper); border-color: var(--oa-paper); color: var(--oa-ground); }
.deep-field :focus-visible, .closing :focus-visible { outline-color: var(--wp-focus-field); }

/* The footer returns to the field: graphite, a hairline, the identity line and the links. */
.site-footer { background: var(--oa-ground); color: var(--oa-muted); width: 100%; }
.site-footer > .wrap { position: relative; }
.site-footer > .wrap::before { background: var(--oa-line); content: ""; height: 1px; left: var(--wp-gutter); position: absolute; right: var(--wp-gutter); top: 0; }
.site-footer .wrap { align-items: baseline; display: flex; flex-wrap: wrap; gap: var(--wp-6); justify-content: space-between; padding-bottom: var(--wp-12); padding-top: var(--wp-12); }
.site-footer p { font-family: var(--oa-font-body); font-size: 1rem; margin: 0; }
.site-footer a { color: var(--oa-paper); font-family: var(--oa-font-body); text-decoration-color: var(--oa-blue); }
.site-footer nav { column-gap: 0; display: flex; flex-wrap: wrap; margin-inline: calc(-1 * (var(--wp-4) + var(--wp-1))); row-gap: var(--wp-6); }
.site-footer nav a {
  align-items: center;
  border-bottom: 0;
  color: var(--oa-paper);
  display: inline-flex;
  min-height: var(--wp-tap);
  padding-inline: calc(var(--wp-4) + var(--wp-1));
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

@container page (max-width: 56.25rem) {
  .index li, .index-row { gap: var(--wp-2) var(--wp-6); grid-template-columns: minmax(0, 1fr) auto; }
  .index li .label, .index-row .label, .index li p, .index-row p { grid-column: 1 / -1; }
  .index li .num, .index-row .num { grid-column: 2; grid-row: 2; }
}
@container page (max-width: 37.5rem) {
  .site-header .wrap { flex-wrap: wrap; gap: 0 var(--wp-4); padding-bottom: var(--wp-2); padding-top: var(--wp-2); }
  .site-header .nav, .site-header .site-nav { gap: 0; margin-left: calc(-1 * var(--wp-2)); margin-right: 0; order: 3; width: 100%; }
  .site-header .header-action { margin-left: auto; padding-left: var(--wp-4); padding-right: var(--wp-4); }
}
@container page (max-width: 37.5rem) {
  main { padding-left: var(--wp-gutter); padding-right: var(--wp-gutter); }
  .home-main { padding: 0; }
  .account-main { padding-bottom: var(--wp-12); padding-top: var(--wp-12); }
  .account-main .actions { align-items: stretch; flex-direction: column; }
  .account-main .actions .button, .account-main .actions button { width: 100%; }
  .site-footer .wrap { align-items: flex-start; flex-direction: column; gap: var(--wp-4); }
  .site-footer nav { column-gap: 0; row-gap: var(--wp-2); }
  .legal-page { padding-bottom: var(--wp-12); padding-top: var(--wp-12); }
  .legal-page h2 { margin-top: var(--wp-12); }
}
/* below 360px the mark, the name and a 15-character action still share one row: without this the
   action wrapped onto a row of its own at 320 and the header grew by a full tap height */
@container page (max-width: 22.4375rem) {
  .site-header .wrap { column-gap: var(--wp-2); }
  .brand { gap: var(--wp-2); }
  .brand-name { font-size: 1rem; }
  .site-header .header-action { font-size: 0.9375rem; padding-left: var(--wp-3); padding-right: var(--wp-3); }
}

/* Shared source receipt and its tabular output. */
.receipt { background: var(--wp-panel); border: var(--wp-rule-strong) solid var(--wp-ink); margin: 0; }
.receipt-head { display: flex; justify-content: space-between; gap: var(--wp-4); padding: var(--wp-3) var(--wp-4); border-bottom: var(--wp-rule) solid var(--wp-ink); }
.src { margin: 0; padding: var(--wp-3) 0; list-style: none; counter-reset: none; }
.src li { display: grid; grid-template-columns: 3.25rem 1fr auto; align-items: baseline; gap: var(--wp-3); padding: 3px var(--wp-4); font-size: var(--wp-text-ledger); line-height: 1.5; }
.src li .n { font: 500 var(--wp-text-cite)/1.5 var(--wp-font-mono); color: var(--wp-muted); text-align: right; }
.src li.k { color: var(--wp-muted); }
.src li.hit { font-weight: 600; }
.src li .tag { font: 600 var(--wp-text-cite)/1 var(--wp-font-mono); color: var(--wp-ink); }
.row-head { display: flex; justify-content: space-between; padding: var(--wp-3) var(--wp-4); border-top: var(--wp-rule-strong) solid var(--wp-ink); border-bottom: var(--wp-rule) solid var(--wp-ink); background: var(--wp-paper); }
.row { width: 100%; border-collapse: collapse; font-size: var(--wp-text-ledger); }
.row th, .row td { text-align: left; padding: 0 var(--wp-4); height: var(--wp-tap); border-bottom: var(--wp-rule) solid var(--wp-hair); vertical-align: middle; }
.row tr:last-child th, .row tr:last-child td { border-bottom: 0; }
.row th { font-weight: 500; color: var(--wp-muted); width: 34%; }
@container page (min-width: 68.75rem) { .row th { white-space: nowrap; } }
.row td:last-child { text-align: right; width: 1%; white-space: nowrap; }
.figcap { padding: var(--wp-3) var(--wp-4); border-top: var(--wp-rule) solid var(--wp-ink); color: var(--wp-muted); font-size: var(--wp-text-meta); line-height: 1.45; }

/* Shared Working Paper page structure. */
.home-main .hero, .offer-main .hero { padding: var(--wp-16) 0 var(--wp-24); }
.home-main .hero .wrap, .offer-main .hero .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--wp-16); align-items: start; }
.home-main .hero-copy, .offer-main .hero-copy { display: grid; gap: var(--wp-6); padding-top: var(--wp-4); }
.home-main .hero-copy h1, .offer-main .hero-copy h1 { max-width: 13ch; }
.home-main .lede, .offer-main .lede { font-size: var(--wp-text-lede); line-height: 1.5; max-width: 34em; }
.home-main .actions, .offer-main .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp-4) var(--wp-8); margin-top: var(--wp-2); }
.home-main .terms, .offer-main .terms { display: flex; flex-wrap: wrap; gap: var(--wp-2) var(--wp-6); margin: var(--wp-2) 0 0; padding: var(--wp-4) 0 0; border-top: var(--wp-rule) solid var(--wp-hair); list-style: none; color: var(--wp-muted); font-size: var(--wp-text-meta); font-weight: 500; }
.home-main .terms b, .offer-main .terms b { color: var(--wp-ink); font-weight: 600; }
.home-main .section, .offer-main .section { border-top: var(--wp-rule-strong) solid var(--wp-ink); padding: var(--wp-16) 0 var(--wp-24); }
.home-main .section-head, .offer-main .section-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--wp-16); align-items: end; margin-bottom: var(--wp-12); }
.home-main .section-head .label, .offer-main .section-head .label { grid-column: 1 / -1; margin-bottom: calc(-1 * var(--wp-8)); }
.home-main .section-head p, .offer-main .section-head p { color: var(--wp-muted); max-width: 32em; }
.home-main .ledger, .offer-main .ledger { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--wp-16); align-items: start; }
.home-main .aside, .offer-main .aside { display: grid; gap: var(--wp-6); }
.home-main .aside > .more, .offer-main .aside > .more { justify-self: start; width: max-content; }
.home-main .legend, .offer-main .legend { display: flex; flex-wrap: wrap; gap: var(--wp-2) var(--wp-6); font-size: var(--wp-text-meta); color: var(--wp-muted); }
.home-main .legend i, .offer-main .legend i { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; background: var(--wp-cited); border: 1px solid var(--wp-ink); }
.home-main .legend i.b, .offer-main .legend i.b { background: var(--wp-flag); border: 1px dashed var(--wp-rust); }
.home-main .closing .wrap, .offer-main .closing .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--wp-16); align-items: center; padding-top: var(--wp-16); padding-bottom: var(--wp-16); }
.home-main .closing p, .offer-main .closing p { font-size: var(--wp-text-lede); line-height: 1.5; margin-bottom: var(--wp-6); }
.home-main .closing .label { color: var(--wp-paper); }
.offer-main .closing .label { color: var(--wp-deep-label); }
.offer-main .limit p + p { margin-top: var(--wp-3); }

/* Shared proof strip: one square for each filled or blank cell. */
.grid100 { margin: 0; --reference-job-documents: 10; }
.grid100 table { width: 100%; border-collapse: collapse; }
.grid100 th { text-align: left; font: 500 var(--wp-text-ledger)/1.3 var(--wp-font-mono); padding: 6px var(--wp-3) 6px 0; white-space: nowrap; }
.grid100 td.cells { padding: 6px 0; width: 100%; }
.grid100 .strip { display: grid; grid-template-columns: repeat(var(--reference-job-documents), minmax(0, 1fr)); gap: 4px; }
.grid100 .strip span { height: 22px; background: var(--wp-cited); border: var(--wp-rule) solid var(--wp-ink); }
.grid100 .strip span.b { background: var(--wp-flag); border-style: dashed; border-color: var(--wp-rust); }
.grid100 td.count { font: 500 var(--wp-text-ledger)/1.3 var(--wp-font-mono); padding-left: var(--wp-3); white-space: nowrap; text-align: right; }
.grid100 figcaption { margin-top: var(--wp-6); padding-top: var(--wp-4); border-top: var(--wp-rule) solid var(--wp-ink); color: var(--wp-muted); font-size: var(--wp-text-meta); line-height: 1.5; }

h1 mark { padding: 0 .08em; background: linear-gradient(to bottom, transparent 34%, var(--wp-cited) 34%, var(--wp-cited) 92%, transparent 92%); }
.closing .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--wp-16); align-items: center; padding-top: var(--wp-16); padding-bottom: var(--wp-16); }
.closing p { font-size: var(--wp-text-lede); line-height: 1.5; margin-bottom: var(--wp-6); }
.closing .label { color: var(--wp-paper); }
@container page (max-width: 37.5rem) {
  .src li { grid-template-columns: 2.25rem 1fr auto; padding: 3px var(--wp-3); }
  .row th, .row td { padding: 0 var(--wp-3); }
  .grid100 .strip { gap: 3px; }
  .grid100 .strip span { height: 18px; }
  .grid100 th { font-size: var(--wp-text-cite); }
  .home-main .hero, .offer-main .hero { padding: var(--wp-8) 0 var(--wp-16); }
  .home-main .section, .offer-main .section { padding: var(--wp-12) 0 var(--wp-16); }
  .home-main .actions .btn, .offer-main .actions .btn { width: 100%; }
}
@container page (max-width: 56.25rem) {
  .home-main .hero .wrap, .offer-main .hero .wrap,
  .home-main .section-head, .offer-main .section-head,
  .home-main .ledger, .offer-main .ledger,
  .home-main .closing .wrap, .offer-main .closing .wrap { grid-template-columns: minmax(0, 1fr); gap: var(--wp-8); }
  .home-main .section-head .label, .offer-main .section-head .label { margin-bottom: 0; }
}

/* On a phone the three-column output row wraps or overflows: the field name takes its own
 * line and the value and its evidence cite share the next, each cite still a full tap target. */
@container page (max-width: 27.5rem) {
  .receipt-head .label:last-child { white-space: nowrap; }
  .home-main .receipt .row, .offer-main .receipt .row,
  .home-main .receipt .row tbody, .offer-main .receipt .row tbody { display: block; }
  .home-main .receipt .row tr, .offer-main .receipt .row tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--wp-3); align-items: center; padding: var(--wp-2) var(--wp-3) 0; border-bottom: var(--wp-rule) solid var(--wp-hair); }
  .home-main .receipt .row tr:last-child, .offer-main .receipt .row tr:last-child { border-bottom: 0; }
  .home-main .receipt .row th, .offer-main .receipt .row th { grid-column: 1 / -1; width: auto; height: auto; padding: 0; border: 0; line-height: 1.4; }
  .home-main .receipt .row td, .offer-main .receipt .row td { width: auto; height: var(--wp-tap); padding: 0; border: 0; display: flex; align-items: center; }
  .home-main .receipt .row td:last-child, .offer-main .receipt .row td:last-child { justify-content: flex-end; }
}

/* Documents to CSV offer layout; external CSS is allowed by the production CSP. */
.offer-main { max-width: none; padding: 0; }
.offer-main h1, .offer-main h2 { font-family: var(--wp-font-display); font-weight: 600; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
.offer-main h1 { font-size: var(--wp-text-hero); line-height: 1.02; }
.offer-main h2 { font-size: var(--wp-text-title); line-height: 1.08; }
.offer-main h3 { font: 600 var(--wp-text-h3)/1.3 var(--wp-font-body); margin: 0; }
.offer-main p { margin: 0; }
.offer-main *, .offer-main *::before, .offer-main *::after { box-sizing: border-box; }
.offer-main .site-footer nav a { padding: 0 var(--wp-3); }
@container page (max-width: 37.5rem) {
.offer-main .site-header .btn { margin-left: auto; padding: 0 var(--wp-4); }
}
.offer-main .ways { list-style: none; margin: 0; padding: 0; border-top: var(--wp-rule-strong) solid var(--wp-ink); }
.offer-main .ways li { display: grid; grid-template-columns: 10rem minmax(0, 1fr) minmax(0, 1fr) 6rem 13rem; gap: var(--wp-8); align-items: center; padding: var(--wp-6) 0; border-bottom: var(--wp-rule) solid var(--wp-ink); }
.offer-main .ways li.pick { background: var(--wp-panel); margin: 0 calc(-1 * var(--wp-4)); padding-left: var(--wp-4); padding-right: var(--wp-4); border-top: var(--wp-rule-strong) solid var(--wp-ink); border-bottom-width: var(--wp-rule-strong); }
.offer-main .ways h3 { font-size: var(--wp-text-h3); }
.offer-main .ways .k { display: block; margin-bottom: var(--wp-1); }
.offer-main .ways p { color: var(--wp-ink); }
.offer-main .ways .price { font: 600 var(--wp-text-price)/1 var(--wp-font-display); letter-spacing: -0.02em; text-align: right; white-space: nowrap; }
.offer-main .ways .price small { display: block; margin-top: var(--wp-2); font: 500 var(--wp-text-cite)/1.2 var(--wp-font-mono); color: var(--wp-muted); letter-spacing: 0; }
.offer-main .ways .go { justify-self: end; }
.offer-main .before { max-width: 44rem; margin-bottom: var(--wp-12); }
.offer-main .dated { margin-top: var(--wp-8); color: var(--wp-muted); }
.offer-main .ways-free + .before { margin-top: var(--wp-12); }
.offer-main .ways-free { border-top: 0; }
.offer-main .ways .paynote { grid-column: 2 / -1; max-width: 40em; color: var(--wp-muted); font-size: 1rem; line-height: 1.5; }
.offer-main .files { list-style: none; margin: 0; padding: 0; border-top: var(--wp-rule) solid var(--wp-ink); }
.offer-main .ledger > .files { grid-column: 1; grid-row: 2; }
.offer-main .ledger > .aside { grid-column: 2; grid-row: 1 / span 2; }
.offer-main .files li { display: flex; justify-content: space-between; align-items: center; gap: var(--wp-4); min-height: var(--wp-tap); border-bottom: var(--wp-rule) solid var(--wp-hair); font-size: var(--wp-text-meta); }
.offer-main .files a { font-family: var(--wp-font-mono); min-height: var(--wp-tap); display: inline-flex; align-items: center; }
.offer-main .files span { color: var(--wp-muted); text-align: right; }
.offer-main .scroll { overflow-x: auto; border: var(--wp-rule-strong) solid var(--wp-ink); background: var(--wp-panel); }
.offer-main .ledger-table { width: 100%; border-collapse: collapse; font-size: var(--wp-text-ledger); }
.offer-main .ledger-table th, .offer-main .ledger-table td { text-align: left; vertical-align: top; padding: var(--wp-3) var(--wp-4); border-bottom: var(--wp-rule) solid var(--wp-hair); white-space: nowrap; }
.offer-main .ledger-table thead th { font: 500 var(--wp-text-cite)/1.2 var(--wp-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp-muted); border-bottom: var(--wp-rule) solid var(--wp-ink); }
.offer-main .ledger-table tbody tr:last-child > * { border-bottom: 0; }
.offer-main .ledger-table tbody th a { display: inline-flex; align-items: center; min-height: var(--wp-tap); margin: calc(-1 * var(--wp-3)) 0; }
.offer-main .ledger-table tbody th { font-weight: 600; position: sticky; left: 0; background: var(--wp-panel); }
.offer-main .ledger-table td .v { display: block; font-variant-numeric: tabular-nums; }
.offer-main .ledger-table td .cite { display: block; min-height: 0; margin-top: 2px; font-weight: 400; }
.offer-main .hint { display: none; margin-top: var(--wp-2); color: var(--wp-muted); font-size: var(--wp-text-meta); }
.offer-main .below { margin-top: var(--wp-12); }
.offer-main .bundle.files5 li { grid-template-columns: 11rem minmax(0, 1fr) 16rem; }
.offer-main .bundle.files5 a { font: 400 var(--wp-text-meta)/1.3 var(--wp-font-mono); min-height: var(--wp-tap); display: inline-flex; align-items: center; justify-self: end; }
.offer-main .bundle.files5 i { font-style: normal; font-size: var(--wp-text-meta); color: var(--wp-muted); justify-self: end; }
.offer-main .bundle.files5 li { align-items: center; padding: 0; min-height: var(--wp-tap); }
.offer-main .below h3 { margin-bottom: var(--wp-4); }
.offer-main .bundle { list-style: none; margin: 0; padding: 0; border-top: var(--wp-rule) solid var(--wp-ink); }
.offer-main .bundle li { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--wp-4); align-items: baseline; padding: var(--wp-3) 0; border-bottom: var(--wp-rule) solid var(--wp-hair); }
.offer-main .bundle b { font: 500 var(--wp-text-ledger)/1.3 var(--wp-font-mono); }
.offer-main .aside .bundle li { grid-template-columns: 12.5rem minmax(0, 1fr); }
.offer-main .aside .bundle b { white-space: nowrap; }
.offer-main .closing .more { color: var(--wp-paper); margin-left: var(--wp-6); }
/* A mail link names where it goes, so a webmail visitor still has the address. */
.offer-main .ways .act { justify-self: end; display: grid; justify-items: end; gap: var(--wp-1); }
.offer-main .ways .via { color: var(--wp-muted); font-size: var(--wp-text-meta); line-height: 1.4; text-align: right; }
.offer-main .closing .via { margin: var(--wp-6) 0 0; font-size: 1rem; line-height: 1.5; color: var(--wp-deep-label); }
/* Versus table: our column is framed like the picked row; a missing capability reads as a flagged blank. */
.offer-main .vs { margin: 0; }
.offer-main .vs table { width: 100%; border-collapse: collapse; font-size: var(--wp-text-ledger); }
.offer-main .vs th, .offer-main .vs td { padding: var(--wp-3) var(--wp-4); text-align: left; vertical-align: baseline; border-bottom: var(--wp-rule) solid var(--wp-hair); }
.offer-main .vs 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); vertical-align: bottom; border-bottom: var(--wp-rule-strong) solid var(--wp-ink); }
.offer-main .vs thead th small { display: block; margin-top: 2px; letter-spacing: 0; text-transform: none; }
.offer-main .vs thead th > span { white-space: nowrap; }
.offer-main .vs thead th.ours { color: var(--wp-ink); }
.offer-main .vs tbody th { font-weight: 500; padding-left: 0; width: 46%; }
.offer-main .vs td { font-weight: 600; font-variant-numeric: tabular-nums; }
.offer-main .vs .ours { background: var(--wp-panel); border-left: var(--wp-rule-strong) solid var(--wp-ink); border-right: var(--wp-rule-strong) solid var(--wp-ink); }
.offer-main .vs tbody:last-child tr:last-child .ours { border-bottom: var(--wp-rule-strong) solid var(--wp-ink); }
.offer-main .vs thead th.ours { border-top: var(--wp-rule-strong) solid var(--wp-ink); }
.offer-main .vs tbody:not(.est) tr:last-child > * { border-bottom: var(--wp-rule-strong) solid var(--wp-ink); }
.offer-main .vs .no { display: inline-block; padding: 0 var(--wp-2); background: var(--wp-flag); border: var(--wp-rule) dashed var(--wp-rust); color: var(--wp-rust); font-weight: 600; }
.offer-main .vs figcaption { margin-top: var(--wp-6); padding-top: var(--wp-4); border-top: var(--wp-rule) solid var(--wp-ink); color: var(--wp-muted); line-height: 1.5; }
.offer-main .versus .reading { font-size: var(--wp-text-lede); line-height: 1.45; }
@container page (max-width: 68.75rem) {
.offer-main .ways li { grid-template-columns: minmax(0, 1fr) auto; gap: var(--wp-3) var(--wp-6); align-items: start; }
.offer-main .ways li > div:first-child { grid-column: 1; }
.offer-main .ways .price { grid-column: 2; grid-row: 1; }
.offer-main .ways li > p, .offer-main .ways li > div.what { grid-column: 1 / -1; }
.offer-main .ways .go { grid-column: 1 / -1; justify-self: start; }
.offer-main .ways .act { grid-column: 1 / -1; justify-self: start; justify-items: start; }
.offer-main .ways .via { text-align: left; }
.offer-main .ways .via br { display: none; }
.offer-main .ways .paynote { grid-column: 1 / -1; }
}
@container page (max-width: 56.25rem) {
.offer-main .ledger > .files, .offer-main .ledger > .aside { grid-column: 1; grid-row: auto; }
.offer-main .hint { display: block; }
.offer-main .bundle.files5 li { grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--wp-4); padding: var(--wp-3) 0; }
.offer-main .bundle.files5 li span { grid-column: 1 / -1; grid-row: 2; }
}
@container page (max-width: 37.5rem) {
.offer-main .vs thead tr, .offer-main .vs tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.offer-main .vs thead th:first-child { display: none; }
.offer-main .vs tbody th { grid-column: 1 / -1; width: auto; padding: var(--wp-3) 0 var(--wp-1); border-bottom: 0; }
.offer-main .vs th, .offer-main .vs td { padding-left: var(--wp-3); padding-right: var(--wp-3); }
.offer-main .vs td:not(.ours) { padding-left: 0; }
.offer-main .vs thead th:nth-child(2) { padding-left: 0; }
.offer-main .vs tbody.est tr:first-child > td { border-top: 0; }
.offer-main .ways li.pick { margin: 0 calc(-1 * var(--wp-3)); padding-left: var(--wp-3); padding-right: var(--wp-3); }
.offer-main .ways .go.btn, .offer-main .ways .go.btn-quiet { width: 100%; }
.offer-main .ways .act:has(> .btn) { justify-self: stretch; }
.offer-main .ledger-table th, .offer-main .ledger-table td { padding: var(--wp-3); }
.offer-main .closing .btn { width: 100%; }
.offer-main .closing .more { margin: var(--wp-4) 0 0; }
.offer-main .bundle li, .offer-main .bundle.files5 li, .offer-main .aside .bundle li { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: var(--wp-3) 0; }
.offer-main .bundle.files5 li span { grid-row: auto; }
.offer-main .bundle.files5 a { justify-self: start; }
.offer-main .bundle.files5 i { justify-self: start; }
.offer-main .files li { flex-direction: column; align-items: flex-start; gap: 0; padding-bottom: var(--wp-2); }
.offer-main .files span { text-align: left; }
}
/* Sample output below 900px: one document at a time, each value under its column
 * name with its page and line (records.js). Without the script the table scrolls. */
.offer-main .doc-picker { display: none; }
/* Between 901px and 1279px text values wrap so all seven columns fit; dates and amounts do not break. */
@container page (max-width: 79.9375rem) {
.offer-main .ledger-table th, .offer-main .ledger-table td { white-space: normal; }
.offer-main .ledger-table td:nth-child(3), .offer-main .ledger-table td:nth-child(4) { white-space: nowrap; }
}
@container page (max-width: 56.25rem) {
.offer-main .has-records .hint { display: none; }
.offer-main .has-records .doc-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: calc(-1 * var(--wp-rule-strong)); }
.offer-main .doc-picker button { min-height: var(--wp-tap); padding: var(--wp-2) var(--wp-3); border: var(--wp-rule-strong) solid var(--wp-ink); border-left-width: 0; background: var(--wp-paper); color: var(--wp-ink); font: 600 var(--wp-text-meta)/1.25 var(--wp-font-body); text-decoration: none; }
.offer-main .doc-picker button:first-child { border-left-width: var(--wp-rule-strong); }
.offer-main .doc-picker button:hover { background: var(--wp-panel); color: var(--wp-ink); text-decoration: underline; text-decoration-thickness: var(--wp-rule); }
.offer-main .doc-picker button[aria-pressed="true"] { background: var(--wp-ink); color: var(--wp-paper); text-decoration: none; }
.offer-main .has-records .scroll { overflow: visible; }
.offer-main .has-records .ledger-table, .offer-main .has-records .ledger-table tbody, .offer-main .has-records .ledger-table tr { display: block; }
.offer-main .has-records .ledger-table thead { clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.offer-main .has-records .ledger-table tr.is-off { display: none; }
.offer-main .has-records .ledger-table tbody th { display: flex; align-items: baseline; gap: 1ch; position: static; padding: 0 var(--wp-4); background: var(--wp-panel); border-bottom: var(--wp-rule) solid var(--wp-ink); font: 500 var(--wp-text-cite)/1.2 var(--wp-font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.offer-main .has-records .ledger-table tbody th::before { content: "Source ·" / ""; flex: none; white-space: nowrap; color: var(--wp-muted); }
.offer-main .has-records .ledger-table tbody th a { margin: 0; }
.offer-main .has-records .ledger-table td { display: grid; grid-template-columns: 11rem minmax(0, 1fr) auto; column-gap: var(--wp-4); align-items: baseline; padding: var(--wp-3) var(--wp-4); white-space: normal; }
.offer-main .has-records .ledger-table td::before { content: attr(data-label) / ""; font: 500 var(--wp-text-cite)/1.3 var(--wp-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp-muted); }
.offer-main .has-records .ledger-table td .cite { margin-top: 0; }
.offer-main .has-records .ledger-table tbody tr > td:last-child { border-bottom: 0; }
}
@container page (max-width: 37.5rem) {
.offer-main .has-records .ledger-table td { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--wp-1); }
.offer-main .has-records .ledger-table td::before { grid-column: 1 / -1; }
}


/* article: labs and guides
 * One article template on the classes those pages already use (.results-page and its
 * children). Scoped under article.results-page so it outranks the older rules in
 * styles.css at equal selector weight and touches no other page. Tokens only; no
 * shadows; no motion. Load order on every lab and guide: tokens.css, fonts.css,
 * components.css, styles.css (the order home and the service pages already use). */

article.results-page { color: var(--wp-ink); font-family: var(--wp-font-body); }
article.results-page code { font-family: var(--wp-font-mono); font-size: .92em; }

/* the label: mono caps, Muted, no Bio chip */
article.results-page .eyebrow, article.results-page .item-label {
  background: none; border: 0; border-radius: 0; padding: 0; display: block;
  font: 500 var(--wp-text-cite)/1.2 var(--wp-font-mono); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--wp-muted); margin: 0 0 var(--wp-4);
}

/* head: one hero headline, one lede, one provenance line */
/* Reading pages stay calm: Syne at 500, a size that keeps a long guide title to three or four lines. */
article.results-page h1 { font: 500 clamp(2.25rem, 4.4vw, 3.75rem)/1.04 var(--wp-font-display); letter-spacing: -0.04em; max-width: 20ch; margin: 0 0 var(--wp-6); text-wrap: balance; }
article.results-page .lede { font-size: var(--wp-text-lede); line-height: 1.5; max-width: 36em; margin: 0 0 var(--wp-6); }
article.results-page .method-note {
  border: 0; border-top: var(--wp-rule) solid var(--wp-ink); padding: var(--wp-3) 0 0;
  margin: var(--wp-6) 0 0; max-width: 44em; color: var(--wp-muted); font-size: 1rem; line-height: 1.5;
}
article.results-page .method-note code { color: var(--wp-ink); }

/* "what a pass does not show": the Limit, beside the claim it limits */
article.results-page .guide-callout, article.results-page .limit-section {
  background: none; border: 0; border-left: var(--wp-rule-strong) solid var(--wp-rust);
  box-shadow: none; border-radius: 0; margin: var(--wp-8) 0 0; padding: var(--wp-1) 0 var(--wp-1) var(--wp-4); max-width: 44em;
}
article.results-page .guide-callout > p:first-child strong, article.results-page .limit-section h2 {
  display: block; font: 500 var(--wp-text-cite)/1.2 var(--wp-font-mono); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--wp-rust); margin: 0 0 var(--wp-3);
}
article.results-page .guide-callout p + p, article.results-page .limit-section p + p { margin-top: var(--wp-3); }

/* actions: one Bio button, secondary actions are more-links */
article.results-page .results-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp-3) var(--wp-8); margin: var(--wp-8) 0 0; }
article.results-page .results-actions + .method-note { border-top: 0; padding-top: 0; margin-top: var(--wp-3); }
article.results-page .button-secondary { background: none; border: 0; border-radius: 0; padding: 0; min-height: var(--wp-tap); color: var(--wp-ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
article.results-page .button-secondary::after { content: "→"; margin-left: .4em; }

/* sections under a 2px Ink rule */
article.results-page .results-section { border-top: var(--wp-rule-strong) solid var(--wp-ink); margin-top: var(--wp-16); padding-top: var(--wp-8); }
article.results-page .results-section h2 { font: 600 var(--wp-text-title)/1.08 var(--wp-font-display); letter-spacing: -0.02em; margin: 0 0 var(--wp-6); max-width: 22ch; text-wrap: balance; }
article.results-page .results-section h3 { font: 600 var(--wp-text-h3)/1.3 var(--wp-font-body); margin: var(--wp-8) 0 var(--wp-3); }
article.results-page .results-section > p, article.results-page .results-section > ul, article.results-page .results-section > ol { max-width: 44em; }
article.results-page .results-section > p + p { margin-top: var(--wp-4); }
article.results-page .results-section li + li { margin-top: var(--wp-2); }

/* a section that is only a limit ("Limit") becomes the Limit component */
article.results-page .results-section.limit-section { border-top: 0; margin-top: var(--wp-12); padding-top: var(--wp-1); }
article.results-page .results-section.limit-section h2 { font: 500 var(--wp-text-cite)/1.2 var(--wp-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp-rust); margin: 0 0 var(--wp-3); max-width: none; }

/* code and output: a figure panel, square, 2px Ink, no shadow */
article.results-page .check-block { background: var(--wp-panel); border: var(--wp-rule-strong) solid var(--wp-ink); border-radius: 0; box-shadow: none; padding: var(--wp-4); margin: var(--wp-6) 0; font: 400 .8125rem/1.6 var(--wp-font-mono); color: var(--wp-ink); }
article.results-page .check-block code { font-size: inherit; }
/* a code block wider than its frame shows an ink edge on each side where code continues. The Panel
   covers scroll with the code (local) and hide an edge once that side is reached, so a block that fits shows none */
article.results-page .check-block { background: linear-gradient(var(--wp-panel), var(--wp-panel)) left / 1rem 100% no-repeat local, linear-gradient(var(--wp-panel), var(--wp-panel)) right / 1rem 100% no-repeat local, linear-gradient(var(--wp-ink), var(--wp-ink)) left / 4px 100% no-repeat scroll, linear-gradient(var(--wp-ink), var(--wp-ink)) right / 4px 100% no-repeat scroll, var(--wp-panel); }

/* the ledger table: Hair rows, 1px Ink head rule, mono tabular numbers, no boxes */
article.results-page .table-wrap { border: 0; margin: var(--wp-6) 0; }
article.results-page .table-wrap table { width: 100%; border-collapse: collapse; background: none; border: 0; }
article.results-page .table-wrap th, article.results-page .table-wrap 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; background: none; }
article.results-page .table-wrap thead th { font: 500 var(--wp-text-cite)/1.2 var(--wp-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp-muted); border-bottom: var(--wp-rule) solid var(--wp-ink); }
article.results-page .table-wrap tbody th { font-weight: 600; }
article.results-page .table-wrap td { font-family: var(--wp-font-mono); font-size: .9375rem; font-variant-numeric: tabular-nums; }
article.results-page .table-scroll-hint { color: var(--wp-muted); font: 500 var(--wp-text-meta)/1.45 var(--wp-font-body); }

/* charts: a figure panel; series Deep then Rust with the Ink outline; caption = source, sample, date, limit */
article.results-page .quant-chart { background: var(--wp-panel); border: var(--wp-rule-strong) solid var(--wp-ink); border-radius: 0; box-shadow: none; padding: var(--wp-6); }
article.results-page .quant-chart h3 { margin: 0 0 var(--wp-2); }
article.results-page .chart-bar-leaf { background: var(--wp-deep); }
article.results-page .chart-bar-amber { background: var(--wp-rust); }
article.results-page .chart-bar { border: var(--wp-rule-strong) solid var(--wp-ink); }
article.results-page .chart-gridline { background: var(--wp-hair); }
article.results-page .chart-value, article.results-page .chart-axis { font-family: var(--wp-font-mono); }
article.results-page .figure-source, article.results-page .figure-limit { color: var(--wp-muted); font-size: var(--wp-text-meta); line-height: 1.45; }
article.results-page .figure-source { border-top: var(--wp-rule) solid var(--wp-ink); padding-top: var(--wp-3); margin-top: var(--wp-6); }
article.results-page .figure-limit::before { content: "Limit"; font: 500 var(--wp-text-cite)/1 var(--wp-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--wp-rust); margin-right: var(--wp-2); }
/* narrow charts: values drop "/50" once a bar is too thin for it (the 0-25-50 axis carries the scale);
 * quant names are identifiers, so mono, and they never break mid-name */
article.results-page .chart-area { container-type: inline-size; }
@container (max-width: 24rem) { article.results-page .chart-of { display: none; } }
article.results-page .chart-category { font-family: var(--wp-font-mono); font-weight: 400; overflow-wrap: normal; }
/* the swipe hint only shows where a results table can scroll; every results table fits from 43rem */
@container page (min-width: 43rem) { article.results-page .table-scroll-hint { display: none; } }

@container page (max-width: 37.5rem) {
  /* captions and hints read at body size on a phone */
  article.results-page .figure-source, article.results-page .figure-limit, article.results-page .table-scroll-hint { font-size: 1rem; line-height: 1.5; }
  article.results-page .results-section { margin-top: var(--wp-12); padding-top: var(--wp-6); }
  article.results-page .quant-chart { padding: var(--wp-4); }
  article.results-page .check-block { padding: var(--wp-3); }
}


/* project pages: projects index, Breach Clock, PDF accessibility service.
 * Scoped under each page's article so it outranks the older rules in styles.css.
 * Reuses the offer page's hero, section, receipt, row, limit and closing devices. Tokens only. */

/* shared label on project pages: mono caps, Muted, no Bio chip */
article.projects-index .item-label, article.projects-index .label, article.breach-clock .eyebrow, article.service-page .label {
  background: none; border: 0; border-radius: 0; padding: 0; display: block; box-shadow: none;
  font: 500 var(--wp-text-cite)/1.2 var(--wp-font-mono); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--wp-muted); margin: 0;
}
article.projects-index h1, article.breach-clock h1, article.service-page h1 { font: 600 var(--wp-text-hero)/1.02 var(--wp-font-display); letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
article.projects-index .lede, article.breach-clock .lede, article.service-page .lede { font-size: var(--wp-text-lede); line-height: 1.5; max-width: 34em; margin: 0; }

/* projects: one ruled index, section name in the margin */
article.projects-index { padding: var(--wp-16) 0 var(--wp-24); }
article.projects-index .projects-head { display: grid; gap: var(--wp-6); margin-bottom: var(--wp-16); }
article.projects-index .project-section { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: var(--wp-8); border-top: var(--wp-rule-strong) solid var(--wp-ink); margin: 0; padding: var(--wp-6) 0 var(--wp-12); }
article.projects-index .project-section h2 { font: 600 var(--wp-text-h3)/1.3 var(--wp-font-body); letter-spacing: 0; margin: 0; padding-top: var(--wp-1); word-spacing: normal; }
article.projects-index .project-list { max-width: none; margin: 0; padding: 0; list-style: none; }
article.projects-index .project-item { display: grid; grid-template-columns: 16rem minmax(0, 1fr) 7rem; grid-template-areas: "label head num" "label body num" "label act num"; column-gap: var(--wp-8); align-items: baseline; border: 0; border-bottom: var(--wp-rule) solid var(--wp-hair); padding: var(--wp-6) 0; }
article.projects-index .project-item:first-child { padding-top: var(--wp-1); }
article.projects-index .project-item:last-child { border-bottom: 0; }
article.projects-index .project-item > .item-label { grid-area: label; padding-top: 3px; }
article.projects-index .project-item > .item-heading { grid-area: head; margin: 0; font: 600 var(--wp-text-h3)/1.3 var(--wp-font-body); }
article.projects-index .item-heading a { color: var(--wp-ink); text-decoration: underline; text-decoration-color: var(--wp-hair); text-decoration-thickness: 2px; text-underline-offset: 5px; }
article.projects-index .item-heading a:hover { text-decoration-color: var(--wp-ink); }
article.projects-index .project-item > p:not(.item-label):not(.num) { grid-column: 2; margin: var(--wp-2) 0 0; max-width: 40em; color: var(--wp-muted); }
article.projects-index .project-item > .num { grid-area: num; margin: 0; text-align: right; font: 500 1rem/1.3 var(--wp-font-mono); color: var(--wp-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
article.projects-index .project-item > .actions { grid-area: act; display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp-4) var(--wp-8); margin-top: var(--wp-6); }
article.projects-index .project-item code { font-family: var(--wp-font-mono); font-size: .92em; }
article.projects-index .about-note { margin: var(--wp-6) 0 0; max-width: 40em; }
article.projects-index .project-section > p { margin: 0; padding-top: var(--wp-1); max-width: 40em; }
article.projects-index .offer-panel .project-item { background: var(--wp-panel); border: var(--wp-rule-strong) solid var(--wp-ink); padding: var(--wp-6); }
article.projects-index .offer-panel .project-item { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "head" "body" "act"; row-gap: var(--wp-2); }
article.projects-index .offer-panel .project-item > .item-label { color: var(--wp-ink); padding-top: 0; }
article.projects-index .offer-panel .project-item > p:not(.item-label) { grid-column: 1; max-width: 34em; margin: 0; }
article.projects-index .offer-panel .project-item > .actions { margin-top: var(--wp-2); }
article.projects-index .offer-panel .item-heading { font: 600 var(--wp-text-title)/1.08 var(--wp-font-display); letter-spacing: -0.02em; }
article.projects-index .offer-panel .project-item > p:not(.item-label) { color: var(--wp-ink); font-size: var(--wp-text-lede); line-height: 1.5; }
@container page (max-width: 56.25rem) {
  article.projects-index .project-section { grid-template-columns: 1fr; gap: var(--wp-4); }
  article.projects-index .project-item { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label num" "head head" "body body" "act act"; row-gap: var(--wp-2); }
  article.projects-index .project-item > p:not(.item-label):not(.num) { grid-column: 1 / -1; margin-top: 0; }
  article.projects-index .project-item:first-child { padding-top: calc(var(--wp-4) + var(--wp-rule-strong)); }
  article.projects-index .project-item > .num { align-self: end; }
  article.projects-index .offer-panel .project-item { padding: var(--wp-4); }
}
@container page (max-width: 37.5rem) {
  article.projects-index { padding: var(--wp-8) 0 var(--wp-16); }
  article.projects-index .projects-head { margin-bottom: var(--wp-12); }
  article.projects-index .offer-panel .project-item { padding: var(--wp-4); }
  article.projects-index .project-item > .actions .btn { width: 100%; }
}

/* Breach Clock: search on the left, the tally of what the filings say on the right */
article.breach-clock { max-width: none; padding: var(--wp-16) 0 var(--wp-24); }
article.breach-clock .bc-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--wp-16); align-items: start; }
article.breach-clock .bc-copy { display: grid; gap: var(--wp-6); padding-top: var(--wp-4); }
article.breach-clock .eyebrow { margin: 0; }
article.breach-clock h1 { max-width: 14ch; }
article.breach-clock .search-panel { background: var(--wp-panel); border: var(--wp-rule-strong) solid var(--wp-ink); border-radius: 0; box-shadow: none; margin: var(--wp-2) 0 0; padding: var(--wp-6); }
article.breach-clock .search-panel label { font: 600 1rem/1.3 var(--wp-font-body); margin-bottom: var(--wp-3); }
article.breach-clock .search-panel input { width: 100%; min-height: var(--wp-tap); border: var(--wp-rule-strong) solid var(--wp-ink); border-radius: var(--wp-radius); background: var(--wp-paper); font: 400 1.125rem/1.3 var(--wp-font-body); padding: 0 var(--wp-4); }
article.breach-clock .search-panel input:focus-visible { outline: 3px solid var(--wp-focus); outline-offset: 3px; }
article.breach-clock .privacy-line { color: var(--wp-muted); font-size: 1rem; font-weight: 400; margin: var(--wp-3) 0 0; }
article.breach-clock .tally .strip { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; padding: var(--wp-4); }
article.breach-clock .tally .strip i, article.breach-clock .tally .key { display: block; aspect-ratio: 1; background: var(--wp-cited); border: var(--wp-rule) solid var(--wp-ink); }
article.breach-clock .tally .strip i.b, article.breach-clock .tally .key.b { background: var(--wp-flag); border-style: dashed; border-color: var(--wp-rust); }
article.breach-clock .tally .row { border: 0; border-top: var(--wp-rule) solid var(--wp-ink); min-width: 0; }
article.service-page .defect-map .row { border: 0; min-width: 0; }
article.breach-clock .tally .row th { width: auto; white-space: normal; }
article.breach-clock .tally .row td { font: 500 1rem/1 var(--wp-font-mono); color: var(--wp-ink); font-variant-numeric: tabular-nums; }
article.breach-clock .tally .key { display: inline-block; width: 12px; margin-right: var(--wp-3); vertical-align: -1px; }
article.breach-clock .offer-results { display: block; margin: var(--wp-12) 0 0; padding: 0; list-style: none; border-top: var(--wp-rule-strong) solid var(--wp-ink); }
article.breach-clock .offer-results:empty { display: none; }
/* Hold a screen for the notice list while it loads, so the tally and notes below do not jump when 137 rows arrive. */
@media (scripting: enabled) { article.breach-clock .offer-results[aria-busy="true"] { display: block; min-height: 100vh; } }
article.breach-clock .offer { background: none; border: 0; border-bottom: var(--wp-rule) solid var(--wp-hair); border-radius: 0; box-shadow: none; padding: var(--wp-6) 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--wp-8); }
article.breach-clock .offer h2 { grid-row: 1 / span 3; font: 600 var(--wp-text-h3)/1.3 var(--wp-font-body); margin: 0; word-spacing: normal; }
article.breach-clock .offer p { margin: 0 0 var(--wp-2); }
article.breach-clock .offer .status-open { color: var(--wp-ink); font-weight: 600; }
article.breach-clock .offer .status-expired { color: var(--wp-rust); font-weight: 600; }
article.breach-clock .offer .status-unknown, article.breach-clock .offer [class^="status-"]:not(.status-open):not(.status-expired) { color: var(--wp-muted); font-weight: 600; }
article.breach-clock .empty-result { margin: var(--wp-12) 0 0; max-width: 40em; }
article.breach-clock .bc-notes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--wp-16); border-top: var(--wp-rule-strong) solid var(--wp-ink); margin-top: var(--wp-16); padding-top: var(--wp-6); }
article.breach-clock .bc-notes .coverage-line { margin: 0; max-width: none; color: var(--wp-ink); }
article.breach-clock .bc-limits { margin-top: var(--wp-12); max-width: 44em; }
article.breach-clock .bc-limits p { border: 0; margin: 0; padding: 0; max-width: none; color: var(--wp-ink); }
article.breach-clock .bc-limits p + p { margin-top: var(--wp-3); }
article.breach-clock .source-footer { color: var(--wp-muted); font-size: 1rem; font-weight: 400; margin: var(--wp-8) 0 0; padding-top: var(--wp-4); border-top: var(--wp-rule) solid var(--wp-hair); }
@container page (max-width: 56.25rem) {
  article.breach-clock { display: flex; flex-direction: column; }
  article.breach-clock .bc-head { display: contents; }
  article.breach-clock .bc-copy { order: 1; padding-top: 0; }
  article.breach-clock .empty-result, article.breach-clock .offer-results { order: 2; }
  article.breach-clock .tally { order: 3; margin-top: var(--wp-12); }
  article.breach-clock .bc-notes, article.breach-clock .bc-limits, article.breach-clock .source-footer { order: 4; }
  article.breach-clock .bc-notes { grid-template-columns: 1fr; gap: var(--wp-6); }
  article.breach-clock .offer { grid-template-columns: 1fr; }
  article.breach-clock .offer h2 { grid-row: auto; margin-bottom: var(--wp-2); }
}
@container page (max-width: 37.5rem) {
  article.breach-clock { padding: var(--wp-8) 0 var(--wp-16); }
  article.breach-clock .search-panel { padding: var(--wp-4); }
  article.breach-clock .tally .strip { grid-template-columns: repeat(14, minmax(0, 1fr)); padding: var(--wp-3); }
}

/* PDF accessibility service: the offer page's structure without a price ledger */
main:has(> article.service-page) { max-width: none; padding: 0; }
article.service-page .wrap { width: 100%; max-width: var(--wp-page); margin: 0 auto; padding: 0 var(--wp-gutter); }
article.service-page p { margin: 0; }
article.service-page h2 { font: 600 var(--wp-text-title)/1.08 var(--wp-font-display); letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
article.service-page .hero { display: block; padding: var(--wp-16) 0 var(--wp-24); }
article.service-page .hero::after { content: none; }
article.service-page .hero-copy h1 { font: 600 var(--wp-text-hero)/1.02 var(--wp-font-display); letter-spacing: -0.02em; }
article.service-page .closing h2 { font: 600 var(--wp-text-title)/1.08 var(--wp-font-display); letter-spacing: -0.02em; max-width: 14ch; }
article.service-page .hero .wrap, article.service-page .section-head, article.service-page .ledger, article.service-page .closing .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--wp-16); }
article.service-page .hero-copy { display: grid; gap: var(--wp-6); padding-top: var(--wp-4); }
article.service-page .hero-copy h1 { max-width: 14ch; }
article.service-page .label b { color: var(--wp-ink); font-weight: 500; }
article.service-page .actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--wp-4) var(--wp-8); margin-top: var(--wp-2); }
article.service-page .terms { padding-top: var(--wp-4); border-top: var(--wp-rule) solid var(--wp-hair); color: var(--wp-muted); max-width: 34em; }
article.service-page .defect-map { align-self: start; margin-top: var(--wp-4); }
article.service-page .defect-map .row th { width: 58%; white-space: normal; color: var(--wp-ink); }
article.service-page .defect-map .row td { text-align: left; width: auto; white-space: normal; color: var(--wp-muted); }
article.service-page .section { border-top: var(--wp-rule-strong) solid var(--wp-ink); padding: var(--wp-16) 0 var(--wp-24); }
article.service-page .section-head { align-items: end; margin-bottom: var(--wp-12); }
article.service-page .section-head .label { grid-column: 1 / -1; margin-bottom: calc(-1 * var(--wp-8)); }
article.service-page .ledger { align-items: start; }
article.service-page .service-list, article.service-page .service-steps { display: block; max-width: 44em; margin: 0; padding: 0; list-style: none; border-top: var(--wp-rule) solid var(--wp-ink); }
article.service-page .service-list li, article.service-page .service-steps li { border: 0; border-bottom: var(--wp-rule) solid var(--wp-hair); padding: var(--wp-4) 0; }
article.service-page .service-list strong { font-weight: 600; }
article.service-page .service-steps { counter-reset: step; }
article.service-page .service-steps li { counter-increment: step; position: relative; padding-left: var(--wp-12); }
article.service-page .service-steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; font: 500 1rem/1.6 var(--wp-font-mono); color: var(--wp-muted); }
article.service-page .limit { margin: 0; max-width: 32em; }
article.service-page .limit .label { color: var(--wp-rust); margin-bottom: var(--wp-2); }
article.service-page .dates { list-style: none; margin: 0; padding: 0; border-top: var(--wp-rule) solid var(--wp-ink); }
article.service-page .dates li { display: grid; gap: var(--wp-1); padding: var(--wp-4) 0; border-bottom: var(--wp-rule) solid var(--wp-hair); }
article.service-page .dates time { font: 600 var(--wp-text-price)/1 var(--wp-font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
article.service-page .dates span { color: var(--wp-muted); }
article.service-page .closing { display: block; padding: 0; background: var(--wp-deep); color: var(--wp-paper); }
article.service-page .closing .wrap { align-items: center; padding-top: var(--wp-16); padding-bottom: var(--wp-16); }
article.service-page .closing .label { color: var(--wp-deep-label); margin-bottom: var(--wp-4); }
article.service-page .closing p:not(.label) { font-size: var(--wp-text-lede); line-height: 1.5; margin-bottom: var(--wp-6); }
/* the webmail start under a mail button: a quiet line, never a second button */
article.service-page p.via { margin: var(--wp-3) 0 0; max-width: 34em; color: var(--wp-muted); font: 400 1rem/1.5 var(--wp-font-body); }
article.service-page .closing p.via { margin: var(--wp-4) 0 0; font-size: 1rem; color: var(--wp-deep-label); }
/* Email authentication fix: record lookups and the PASS condition */
article.email-fix code { font: 400 var(--wp-text-cite)/1.4 var(--wp-font-mono); overflow-wrap: anywhere; }
article.email-fix .lookup, article.email-fix .pass-check { align-self: start; min-width: 0; }
article.email-fix .row { border: 0; min-width: 0; }
article.email-fix .defect-map .row th, article.email-fix .defect-map .row td { height: auto; min-height: var(--wp-tap); padding-top: var(--wp-3); padding-bottom: var(--wp-3); line-height: 1.4; }
article.email-fix .defect-map .row th { width: 50%; }
article.email-fix .lookup .row th { width: 58%; white-space: normal; color: var(--wp-ink); height: auto; padding-top: var(--wp-3); padding-bottom: var(--wp-3); line-height: 1.5; }
article.email-fix .lookup .row td { text-align: left; width: auto; white-space: normal; color: var(--wp-muted); height: auto; padding-top: var(--wp-3); padding-bottom: var(--wp-3); line-height: 1.5; }
article.email-fix .lookup .rec { display: block; font-weight: 600; margin-bottom: var(--wp-1); }
article.email-fix .lookup-notes { display: grid; gap: var(--wp-4); max-width: 32em; }
article.email-fix .pass-check .row th { font-weight: 600; color: var(--wp-ink); width: auto; }
article.email-fix .pass { display: inline-block; font: 500 var(--wp-text-cite)/1 var(--wp-font-mono); letter-spacing: 0.08em; color: var(--wp-ink); background: var(--wp-cited); padding: var(--wp-2) var(--wp-3); }
/* the domain check: form on the right, the receipt on the left fills in with what DNS says */
article.email-fix .check-ledger { row-gap: var(--wp-6); }
article.email-fix .check-ledger > .lookup { grid-column: 1; grid-row: 1 / span 3; }
article.email-fix .check-ledger > :not(.lookup) { grid-column: 2; min-width: 0; }
article.email-fix .domain-check { display: grid; gap: var(--wp-3); background: var(--wp-panel); border: var(--wp-rule-strong) solid var(--wp-ink); padding: var(--wp-6); }
article.email-fix .domain-check[hidden] { display: none; }
article.email-fix .domain-check label { font: 600 1rem/1.3 var(--wp-font-body); }
article.email-fix .check-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--wp-3); }
article.email-fix .check-row input { background: var(--wp-paper); font: 400 1.125rem/1.3 var(--wp-font-body); padding: 0 var(--wp-4); }
article.email-fix .check-row input[aria-invalid="true"] { border-color: var(--wp-rust); }
article.email-fix .check-row button[aria-disabled="true"] { cursor: progress; color: var(--wp-muted); }
article.email-fix .lookup .row tr[hidden] { display: none; }
article.email-fix .check-error { margin: 0; color: var(--wp-rust); font-weight: 600; }
article.email-fix .check-privacy { margin: 0; color: var(--wp-muted); font-size: 1rem; line-height: 1.5; }
article.email-fix .check-status { margin: 0; }
article.email-fix .check-status:empty { display: none; }
article.email-fix .check-status.state-error { color: var(--wp-ink); }
article.email-fix .check-summary { display: grid; gap: var(--wp-4); border-top: var(--wp-rule-strong) solid var(--wp-ink); padding-top: var(--wp-4); max-width: 32em; }
article.email-fix .check-summary[hidden] { display: none; }
article.email-fix .check-summary p, article.email-fix .check-summary ul { margin: 0; }
article.email-fix .check-headline { font: 600 var(--wp-text-h3)/1.3 var(--wp-font-body); }
article.email-fix .check-summary ul { padding-left: 1.25em; display: grid; gap: var(--wp-2); }
article.email-fix .check-summary .actions { margin: 0; }
article.email-fix .check-summary p.via { margin: 0; }
article.email-fix .lookup[aria-busy="true"] td { color: var(--wp-muted); }
@container page (min-width: 37.5625rem) { article.email-fix .lookup.is-live .row th { width: 36%; } }
article.email-fix .lookup.is-live .row td { color: var(--wp-ink); }
article.email-fix .lookup.is-live .row th, article.email-fix .lookup.is-live .row td { vertical-align: top; }
article.email-fix .lookup .state { display: inline-block; min-width: 3.25rem; margin: 0 var(--wp-3) var(--wp-1) 0; padding: var(--wp-1) var(--wp-2); font: 500 var(--wp-text-cite)/1.4 var(--wp-font-mono); letter-spacing: 0.08em; text-align: center; text-transform: uppercase; border: var(--wp-rule) solid var(--wp-ink); }
article.email-fix .lookup .state-ok { background: var(--wp-cited); }
article.email-fix .lookup .state-fix { background: var(--wp-flag); border-style: dashed; border-color: var(--wp-rust); color: var(--wp-rust); }
article.email-fix .lookup .state-note { background: var(--wp-paper); }
article.email-fix .lookup .state-unknown { background: transparent; border-style: dashed; border-color: var(--wp-muted); color: var(--wp-muted); }
/* the state chip hangs in its own column, so a finding that wraps stays beside it */
article.email-fix .lookup .found { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--wp-3); row-gap: var(--wp-2); align-items: baseline; }
article.email-fix .lookup .found .state { margin: 0; }
article.email-fix .lookup .found-records { display: grid; gap: var(--wp-1); grid-column: 2; min-width: 0; }
article.email-fix .lookup .found-records code { display: block; color: var(--wp-muted); }
@container page (max-width: 56.25rem) {
  article.service-page .hero .wrap, article.service-page .section-head, article.service-page .ledger, article.service-page .closing .wrap { grid-template-columns: minmax(0, 1fr); gap: var(--wp-8); }
  article.service-page .section-head .label { margin-bottom: 0; }
}
@container page (max-width: 37.5rem) {
  article.service-page .hero { padding: var(--wp-8) 0 var(--wp-16); }
  article.service-page .section { padding: var(--wp-12) 0 var(--wp-16); }
  article.service-page .actions .btn, article.service-page .closing .btn { width: 100%; }
  article.email-fix .lookup .row, article.email-fix .lookup .row tbody, article.email-fix .lookup .row tr, article.email-fix .lookup .row th, article.email-fix .lookup .row td { display: block; width: auto; }
  article.email-fix .lookup .row th { padding-bottom: 0; border-bottom: 0; }
  article.email-fix .lookup .row td { padding-top: var(--wp-1); }
}
@container page (max-width: 56.25rem) {
  article.email-fix .check-ledger > .lookup, article.email-fix .check-ledger > :not(.lookup) { grid-column: 1; grid-row: auto; }
}

/* ---------- v3 "One and Many": company pages (work, about, contact, archive, 404, brand) ---------- */
.page { padding-bottom: var(--wp-24); }
.page h2, .page h3 { margin: 0; }
.page p { margin: 0; }
/* One shrinkable track, and the title capped at 15cqi so its longest word fits the column at 200% text.
   At 100% the hero is at most 14.3cqi (40px on a 280px column at 320), so the cap never changes it. */
.page-head { container-type: inline-size; display: grid; gap: var(--wp-6); grid-template-columns: minmax(0, 1fr); padding: var(--wp-16) 0 var(--wp-12); }
.page-head .label { margin: 0; }
.page-head h1 { font: 700 min(var(--wp-text-hero), 15cqi)/.95 var(--wp-font-display); letter-spacing: -0.03em; margin: 0; max-width: 14em; }
.page-head .lede { font-size: var(--wp-text-lede); line-height: 1.5; max-width: 38em; }
.page-section { border-top: var(--wp-rule-strong) solid var(--wp-ink); display: grid; gap: var(--wp-6) var(--wp-16); grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); padding: var(--wp-8) 0 var(--wp-16); }
.page-section > h2 { font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 1.05; }
.page-section > .intro { color: var(--wp-muted); grid-column: 1; margin-top: calc(-1 * var(--wp-2)); }
/* One shrinkable track: an auto track grew to the email address and pushed /contact/ past a 320 screen. */
.prose { container-type: inline-size; display: grid; gap: var(--wp-4); grid-template-columns: minmax(0, 1fr); max-width: var(--wp-measure); }
.prose p, .prose li { font-size: 1.0625rem; line-height: 1.6; }
.prose ul { display: grid; gap: var(--wp-3); margin: 0; padding-left: 1.2em; }

/* A list of work: what it is, what it is called, why you might open it, and the action. */
.work-list { list-style: none; margin: 0; padding: 0; }
.work-list li { border-bottom: var(--wp-rule) solid var(--wp-hair); display: grid; gap: var(--wp-1) var(--wp-8); grid-template-columns: minmax(0, 1fr) auto; padding: var(--wp-4) 0 var(--wp-6); }
.work-list li:first-child { padding-top: 0; }
.work-list .kind { color: var(--wp-muted); font: 500 var(--wp-text-cite)/1.2 var(--wp-font-mono); grid-column: 1 / -1; letter-spacing: .08em; padding-top: var(--wp-2); text-transform: uppercase; }
.work-list h3 { font: 700 clamp(1.375rem, 2vw, 1.75rem)/1.1 var(--wp-font-display); letter-spacing: -0.01em; text-wrap: pretty; }
.work-list h3 a { color: var(--wp-ink); display: inline-block; padding-block: 7px; text-decoration: none; }
/* A one-line title gets a 48px target; matching negative margins keep every row where it was, and the
   ring is drawn inside the larger box where it sat before, clear of the label above. */
@supports (height: 1lh) {
  .work-list h3 a { margin: min(0px, calc(1lh / 2 + 7px - var(--wp-tap) / 2)) -5px; padding: max(7px, calc(var(--wp-tap) / 2 - 1lh / 2)) 5px; }
  .work-list h3 a:focus-visible { outline-offset: -2px; }
}
.work-list h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.work-list p { color: var(--wp-ink); grid-column: 1; max-width: 40em; }
.work-list .go { align-self: end; grid-column: 2; grid-row: 2 / span 3; white-space: nowrap; }
.work-list .scope { border-left: var(--wp-rule-strong) solid var(--wp-rust); color: var(--wp-muted); font-size: 1rem; grid-column: 1; margin-top: var(--wp-1); padding-left: var(--wp-3); }
.work-list .status { color: var(--wp-muted); font-size: var(--wp-text-meta); }
.ext::after { content: " ↗"; }

/* Facts: a two-column ledger of short, checkable statements. */
.facts { border-top: var(--wp-rule) solid var(--wp-ink); display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); margin: 0; }
.facts dt, .facts dd { border-bottom: var(--wp-rule) solid var(--wp-hair); margin: 0; padding: var(--wp-3) 0; }
.facts dt { color: var(--wp-muted); font: 500 var(--wp-text-cite)/1.6 var(--wp-font-mono); letter-spacing: .06em; text-transform: uppercase; }

/* The mark and its colours shown as specimens on the brand page (Object Atlas). The chips state their
   colours as literal values, so a token change cannot silently change what the page documents. */
.specimens { display: grid; gap: var(--wp-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); list-style: none; margin: 0; padding: 0; }
.specimens li { border: var(--wp-rule-strong) solid var(--wp-ink); display: grid; grid-template-rows: 11rem auto; }
.specimens .plate { align-items: center; display: flex; gap: var(--wp-4); justify-content: center; padding: var(--wp-6); }
.specimens .plate.on-field { background: #151518; color: #e8e9e7; } /* the C/N paper mark sits on graphite */
.specimens .plate.on-white { background: #fff; }
.specimens .plate img { display: block; }
.specimens .cap { border-top: var(--wp-rule) solid var(--wp-ink); display: grid; gap: var(--wp-1); padding: var(--wp-3) var(--wp-4); }
.specimens .cap a { font-family: var(--wp-font-mono); font-size: var(--wp-text-meta); }
.brand-notice { border-left: 4px solid var(--wp-rust); font-size: 1rem; max-width: 40rem; padding-left: var(--wp-4); }
.swatches { display: grid; gap: var(--wp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); list-style: none; margin: 0; padding: 0; }
.swatches li { border: var(--wp-rule) solid var(--wp-ink); }
.swatches .chip { display: block; height: 6rem; }
.swatches .chip.graphite { background: #151518; }
.swatches .chip.paper { background: #e8e9e7; }
.swatches .chip.blue { background: #b2c8f0; }
.swatches .chip.muted { background: #b2b4bd; }
.swatches .chip.sheet { background: #eff0ec; }
.swatches .chip.bluedeep { background: #2d4f93; }
.swatches p { font: 500 1rem/1.5 var(--wp-font-mono); padding: var(--wp-2) var(--wp-3); }
.type-sample { display: grid; gap: var(--wp-4); }
.type-sample .display { font: 500 clamp(2.75rem, 6.4vw, 5rem)/.95 var(--wp-font-display); letter-spacing: -0.055em; }
.type-sample .display span { display: block; }
.type-sample .display .oa { color: var(--oa-blue-deep); }
.type-sample .mono { font: 500 var(--wp-text-cite)/1.4 var(--wp-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.field-sample { background: #1d2bc4; color: #f4efe3; display: block; height: auto; width: 100%; }

@container page (max-width: 53.75rem) {
  .page-section { grid-template-columns: minmax(0, 1fr); padding: var(--wp-6) 0 var(--wp-12); }
  .page-head { padding: var(--wp-12) 0 var(--wp-8); }
}
@container page (max-width: 37.5rem) {
  .work-list li { grid-template-columns: minmax(0, 1fr); }
  .work-list .go { grid-column: 1; grid-row: auto; justify-self: start; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts dt { border-bottom: 0; padding-bottom: 0; }
  .page { padding-bottom: var(--wp-16); }
}
.page-foot { border-top: var(--wp-rule-strong) solid var(--wp-ink); color: var(--wp-muted); padding-top: var(--wp-6); }
/* The address stays on one line: it is 11.2em wide, so 8.8cqi always fits (only phones under 360px reach the cap). */
.prose .address { font: 700 min(clamp(1.75rem, 3.4vw, 2.75rem), 8.8cqi)/1.1 var(--wp-font-display); letter-spacing: -0.02em; }
.prose .address a { text-decoration-thickness: 3px; text-underline-offset: 6px; }
.prose .actions { align-items: center; display: flex; flex-wrap: wrap; gap: var(--wp-3) var(--wp-8); margin-top: var(--wp-2); }
.page-section > .specimens { grid-column: 1 / -1; }
/* Phones: with no header action, the wordmark and three links share one row when they fit. */
@container page (max-width: 37.5rem) {
  .site-header .wrap:not(:has(.header-action)) { min-height: 64px; }
  .site-header .wrap:not(:has(.header-action)) .site-nav { margin-left: auto; margin-right: calc(-1 * var(--wp-2)); order: 0; width: auto; }
  .site-header .site-nav a { font-size: 0.9375rem; padding-inline: 7px; }
  /* mark, wordmark and the three links share one 390 row */
  .brand-name, .brand > span, .site-header .brand .brand-name { font-size: 1.3125rem; }
  .brand { gap: 7px; }
  .brand img, .brand-mark { height: 30px; width: 30px; }
}

/* Loadcheck is imported from its own repository with its own stylesheet. These rules put its shell
   on the system without editing the imported bytes. */
.shell { max-width: none; padding: 0; }
.shell > .site-header { border: 0; display: block; padding: 0; }
.shell > .site-header nav { font-size: inherit; gap: var(--wp-2); }
.shell .brand img { content: url("/customer-platform/assets/mark-header.svg"); height: 32px; width: 32px; }
.shell, .shell input, .shell select, .shell button, .shell .intro { font-family: var(--wp-font-body); }
.shell h1, .shell h2 { font-family: var(--wp-font-display); font-weight: 700; letter-spacing: -0.03em; }
.shell > main { margin: 0 auto; max-width: var(--wp-page); padding: var(--wp-16) var(--wp-gutter) var(--wp-24); }
.shell > main > h1, .shell > main > .intro { max-width: 22em; }
.shell .panel { border: var(--wp-rule-strong) solid var(--wp-ink); border-radius: 0; max-width: 52rem; }
.shell input, .shell select { border: var(--wp-rule-strong) solid var(--wp-ink); border-radius: var(--wp-radius); min-height: var(--wp-tap); }
.shell button { min-height: var(--wp-tap); }
.shell .site-footer nav { font-size: 1rem; gap: 0; }

/* Enlarged text only. At 100% the page is at least 320px (20rem) wide, so a page narrower than 20rem means the
   reader has enlarged the text. There nothing refuses to wrap and an overlong word breaks instead of pushing the
   page sideways; code blocks keep their lines and scroll. !important because page rules set nowrap with higher
   specificity; this block can never apply at 100% text. */
@container page (max-width: 19.99rem) {
  main *:not(pre, pre *, textarea) { overflow-wrap: anywhere !important; text-wrap-mode: wrap !important; }
  /* Display type steps down to the screen (vw: here the page is the viewport). A page title is at most 13% of the
     width, 51px on a 390 screen and still above the 34px body text, so most display words fit whole; a heading word
     that still cannot fit is hyphenated (lang="en"). Body text is not hyphenated, and code never is: a reader may
     copy or retype it. */
  main { --wp-text-hero: min(2.5rem, 13vw); --wp-text-title: min(1.875rem, 11vw); }
  main h1, main .nb-hero h1 :is(.l-many, .l-one) { font-size: min(2.5rem, 13vw) !important; }
  main .fc-num { font-size: min(6rem, 22vw) !important; }
  main :is(h1, h2, h3) { hyphens: auto; }
  main :is(h1, h2, h3) :is(code, kbd, samp) { hyphens: manual; }
  /* the text column gets the room: gutters 5vw (16-20px on a phone) instead of 40px a side, the forecast frame's
     inset halved, and the skip link (two lines tall here) kept fully above the page until it is focused */
  :is(main, .site-header, .site-footer) { --wp-gutter: 5vw; }
  /* the footer links reach the screen edge with the gutter as their padding, so their text lines up with the footer's */
  .site-footer nav { margin-inline: calc(-1 * var(--wp-gutter)) !important; }
  .site-footer nav a { padding-inline: var(--wp-gutter) !important; }
  /* panels that bleed into the gutter bleed exactly to the screen edge, never past it */
  .offer-main .ways li.pick, .repair-main .checks .control { margin-inline: calc(-1 * var(--wp-gutter)) !important; padding-inline: var(--wp-gutter) !important; }
  main .fc-head h1 { padding: var(--wp-4) var(--wp-3) var(--wp-6) !important; }
  .skip-link:not(:focus) { top: -100vh; }
  /* a signup button keeps its own width (flex: none) on every page: here it may shrink and wrap its words */
  main .mq-signup-row > * { flex-shrink: 1 !important; min-width: 0 !important; }
}