@font-face { font-family: 'Archivo'; src: url('fonts/Archivo-Text-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-stretch: 100%; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('fonts/Archivo-Text-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-stretch: 100%; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('fonts/Archivo-Text-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-stretch: 100%; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('fonts/Archivo-Text-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-stretch: 100%; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('fonts/Archivo-Text-SemiBoldItalic.woff2') format('woff2'); font-weight: 600; font-style: italic; font-stretch: 100%; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('fonts/Archivo-Display-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-stretch: 112.5%; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('fonts/Archivo-Display-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-stretch: 112.5%; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('fonts/Archivo-Compact-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-stretch: 87.5%; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('fonts/Archivo-Compact-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-stretch: 87.5%; font-display: swap; }

/* Praxa website base, Brand Guide 2.0. Shared by all five style directions.
   Layout: 12-column page, rail (cols 1-3), text (4-9), margin (10-12). Onyx for the footer, the home page header, and one band on the home page. */
:root {
  --onyx: #0C0C10;
  --graphite: #2A2A31;
  --iron: #55555E;
  --ash: #9A9AA3;
  --argent: #CBCBD1;
  --mist: #C8C8CC;
  --argent-light: #F2F2F6;
  --paper: #FFFFFF;
  --gunmetal: #5A7A96;
  --gunmetal-deep: #324A62;
  --gunmetal-light: #7A96AC;
  --steel-tint: #E3E9EE;

  --font: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --w-display: 112.5%;
  --w-compact: 87.5%;

  --t-title: 3.75rem;
  --t-statement: 1.875rem;
  --t-section: 1.75rem;
  --t-body: 1.0625rem;
  --t-table: 0.9375rem;
  --t-note: 0.8125rem;

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 48px; --s5: 96px;
  --gutter: 24px;
  --edge: 80px;
  --measure: 32em;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--onyx);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.55;
  font-kerning: normal;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;  /* keeps the footer at the bottom of short pages */
}

.g {
  display: grid;
  grid-template-columns:
    [full-start rail-start] repeat(3, minmax(0, 1fr))
    [rail-end text-start wide-start] repeat(6, minmax(0, 1fr))
    [text-end margin-start] repeat(3, minmax(0, 1fr))
    [margin-end wide-end full-end];
  column-gap: var(--gutter);
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--edge);
}
.rail { grid-column: rail; min-width: 0; }
.text { grid-column: text; min-width: 0; }
.margin { grid-column: margin; min-width: 0; }
.wide { grid-column: wide; min-width: 0; }
.full { grid-column: full; min-width: 0; }
.railtext { grid-column: rail-start / text-end; min-width: 0; }

h1, h2, h3 { text-wrap: balance; margin: 0; overflow-wrap: break-word; }
p { margin: 0 0 1em; max-width: var(--measure); text-wrap: pretty; }
p, li, td, th { overflow-wrap: break-word; }
em { font-style: italic; }

.title {
  font-stretch: var(--w-display);
  font-weight: 300;
  font-size: var(--t-title);
  line-height: 1.04;
  letter-spacing: -0.02em;
  max-width: 15em;
}
.statement {
  font-stretch: var(--w-display);
  font-weight: 300;
  font-size: var(--t-statement);
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: 22em;
  text-wrap: balance;
}
h2 {
  font-size: var(--t-section);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: var(--s3);
  max-width: 21em;
}
h3 { font-size: var(--t-body); font-weight: 600; line-height: 1.4; margin-bottom: 6px; }
.lead { max-width: var(--measure); }
.note { font-size: var(--t-note); line-height: 1.45; color: var(--iron); margin: 0 0 1em; padding-top: 0.25em; overflow-wrap: anywhere; }
.num { font-feature-settings: "tnum"; }
.code { font-feature-settings: "tnum", "zero"; white-space: nowrap; }

a { color: inherit; text-decoration: underline; text-decoration-color: var(--gunmetal-deep); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--gunmetal-deep); outline-offset: 3px; }
.btn {
  display: inline-block;
  background: var(--onyx);
  color: var(--paper);
  font: inherit;
  font-size: var(--t-table);
  font-weight: 500;
  padding: 13px 22px;
  border-radius: 2px;
  text-decoration: none;
}
.btn:hover { background: var(--graphite); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: var(--s3); }

/* Sections */
.sec { padding-top: var(--s5); }
.sec::before { content: ""; grid-column: full; border-top: 1px solid var(--onyx); margin-bottom: var(--s3); }
.secno { grid-column: rail; margin: 0; padding-top: 0.4em; color: var(--iron); font-feature-settings: "tnum"; }
.secno b { font-weight: 600; color: var(--onyx); margin-right: 0.6em; }

/* Rail rows */
.rows { grid-column: full; display: grid; grid-template-columns: subgrid; margin-block: var(--s3) var(--s2); }
.row { grid-column: full; display: grid; grid-template-columns: subgrid; border-top: 1px solid var(--argent); padding-block: var(--s2); }
.row:last-child { border-bottom: 1px solid var(--argent); }
.row > * { margin: 0; }
.r-rail { grid-column: rail; min-width: 0; }
.r-text { grid-column: text; min-width: 0; }
.r-margin { grid-column: margin; min-width: 0; }
.r-wide { grid-column: wide; min-width: 0; }
.term { font-weight: 600; }
.fig { font-stretch: var(--w-display); font-weight: 300; font-size: var(--t-statement); line-height: 1.05; letter-spacing: -0.01em; font-feature-settings: "tnum"; }

/* Tables */
.tbl { overflow-x: auto; margin: var(--s2) 0 var(--s3); }
table { border-collapse: collapse; width: 100%; font-size: var(--t-table); line-height: 1.4; font-feature-settings: "tnum"; border-top: 2px solid var(--onyx); }
th { text-align: left; font-weight: 600; font-size: var(--t-note); padding: 9px 16px 8px 0; border-bottom: 1px solid var(--onyx); vertical-align: bottom; }
td { padding: 10px 16px 10px 0; border-bottom: 1px solid var(--argent); vertical-align: top; }
td.r, th.r { text-align: right; white-space: nowrap; }
tr.hi td { background: var(--steel-tint); }
tr.hi td:first-child { padding-left: 8px; }
.compact table { font-stretch: var(--w-compact); }
.source { font-size: var(--t-note); color: var(--iron); margin: var(--s1) 0 0; line-height: 1.45; }
.st { white-space: nowrap; }
.st svg { width: 11px; height: 11px; margin-right: 7px; vertical-align: -1px; }

.list { margin: 0 0 1.2em; padding: 0; list-style: none; max-width: var(--measure); }
.list li { border-top: 1px solid var(--argent); padding: 10px 0; }
.list li:last-child { border-bottom: 1px solid var(--argent); }

.slash { display: block; width: 15px; height: 26px; background: var(--gunmetal); clip-path: polygon(7px 0, 15px 0, 8px 26px, 0 26px); }

figure { margin: 0; }
figure img { display: block; width: 100%; height: auto; }
figcaption { font-size: var(--t-note); color: var(--iron); line-height: 1.45; margin-top: var(--s1); }

/* Site header and footer */
.band { background: var(--onyx); color: var(--mist); will-change: transform; }  /* own compositor layer, so Chrome fills any not-yet-drawn patch with Onyx instead of the page's white; otherwise a page-wipe snapshot taken right after scrolling can catch the band as white */
.band a { text-decoration-color: var(--gunmetal-light); }
.site-head { padding-block: 14px; }
.site-head .g { align-items: center; }
.brand { grid-column: rail; display: block; width: 150px; line-height: 0; margin-left: -15px; }
.brand svg { width: 100%; height: auto; }
.nav { grid-column: text-start / margin-end; display: flex; flex-wrap: wrap; gap: 6px 28px; font-size: var(--t-table); }
.nav a { color: var(--mist); text-decoration: none; padding-block: 4px; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--argent-light); text-decoration: underline; text-decoration-color: var(--gunmetal-light); text-decoration-thickness: 1px; text-underline-offset: 0.35em; }
.site-foot { margin-top: var(--s5); padding-block: var(--s4) 56px; font-size: var(--t-note); line-height: 1.55; }
.site-foot .brand { width: 132px; margin: -12px 0 0 -13px; }
.site-foot p { margin: 0 0 0.5em; color: var(--ash); }
.site-foot .text p:first-child { color: var(--mist); }
.site-foot a { color: var(--mist); }
.site-foot .links { display: flex; flex-wrap: wrap; gap: 2px 20px; }
.site-foot .links a { padding-block: 3px; }

/* Medium screens */
@media (max-width: 1100px) { :root { --edge: 48px; } }
@media (max-width: 1000px) {
  .g {
    grid-template-columns:
      [full-start rail-start] repeat(3, minmax(0, 1fr))
      [rail-end text-start wide-start margin-start] repeat(9, minmax(0, 1fr))
      [text-end margin-end wide-end full-end];
  }
}
/* Narrow screens */
@media (max-width: 720px) {
  :root { --edge: 20px; --t-title: 2.5rem; --t-section: 1.45rem; --t-statement: 1.45rem; --s5: 72px; }
  .g { grid-template-columns: [full-start rail-start text-start wide-start margin-start] minmax(0, 1fr) [rail-end text-end wide-end margin-end full-end]; }
  .secno { padding-top: 0; margin-bottom: var(--s1); }
  .nav { gap: 0 20px; margin-top: 4px; }
  .nav a { padding-block: 10px; }
  .site-foot .links { gap: 0 22px; }
  .site-foot .links a { padding-block: 9px; }
  .brand { width: 128px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

.span3 { grid-row: span 3; align-self: start; }

/* ===== praxa.partners: Onyx editorial direction (chosen 2026-10-08) ===== */
main { font-size: 1.125rem; flex: 1 0 auto; }
.skip-link { position: absolute; left: 16px; top: -48px; background: var(--paper); color: var(--onyx); padding: 8px 12px; z-index: 10; }
.skip-link:focus { top: 12px; }

/* Hero band: nav plus page title on Onyx */
.hero { padding-block: 14px 0; }
.band.hero { padding-bottom: 96px; }
.hero .g { align-items: start; }
.site-row { grid-column: full; display: grid; grid-template-columns: subgrid; align-items: center; }
.hero .xl, .hero .xlp, .hero .ttl {
  grid-column: text-start / margin-end;
  font-stretch: var(--w-display);
  font-weight: 300;
  text-wrap: balance;
}
.hero .xl { margin-top: 136px; font-size: 4.25rem; line-height: 1.02; letter-spacing: -0.022em; max-width: 16em; }
.hero .xlp { margin-top: 112px; font-size: 4rem; line-height: 1.03; letter-spacing: -0.02em; max-width: 15em; }
.hero .ttl { margin-top: 88px; font-size: 3.75rem; line-height: 1.04; letter-spacing: -0.02em; max-width: 15em; }
.hero .lead { grid-column: text; font-size: 1.1875rem; margin-top: 36px; margin-bottom: 0; }
.hero .actions { grid-column: text; margin-top: 32px; }
.hero .hmeta { grid-column: rail; grid-row: 2; align-self: end; margin: 0; font-size: var(--t-note); line-height: 1.5; padding-bottom: 0.6em; }
.hero .figs { grid-column: margin; grid-row: 3 / span 2; align-self: start; margin: 40px 0 0; }
.hero .figs dt { font-size: var(--t-note); }
.hero .figs dd { margin: 0 0 18px; font-stretch: var(--w-display); font-weight: 300; font-size: 2.25rem; line-height: 1.1; font-feature-settings: "tnum"; }
.hero .figs dd.sm { font-size: 1.5rem; }
/* Hero colors. Every page opens on Paper with Onyx type except the home page, whose hero is an Onyx band,
   so the wipe from the home page turns the screen white. */
.hero h1, .hero .figs dd, .hero .lead a, .hero .actions a:not(.btn) { color: var(--onyx); }
.hero .lead { color: var(--graphite); }
.hero .hmeta, .hero .figs dt, .hero .nav a { color: var(--iron); }
.hero .nav a:hover, .hero .nav a[aria-current="page"] { color: var(--onyx); text-decoration-color: var(--gunmetal); }
.band.hero h1, .band.hero .figs dd, .band.hero .lead a, .band.hero .actions a:not(.btn) { color: var(--argent-light); }
.band.hero .lead, .band.hero .nav a { color: var(--mist); }
.band.hero .hmeta, .band.hero .figs dt { color: var(--ash); }
.band.hero .nav a:hover, .band.hero .nav a[aria-current="page"] { color: var(--argent-light); text-decoration-color: var(--gunmetal-light); }
.btn.inv { background: var(--paper); color: var(--onyx); }
.btn.inv:hover { background: var(--argent-light); }

/* Sections on paper */
.sec { padding-top: 128px; }
h2 { font-stretch: var(--w-display); font-weight: 300; font-size: 2.5rem; line-height: 1.1; letter-spacing: -0.015em; max-width: 17em; margin-bottom: 32px; }
.q { font-stretch: var(--w-display); font-weight: 300; font-size: 1.875rem; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 12px; max-width: 20em; }
.q.sm { font-size: 1.375rem; }
.row { padding-block: 28px 30px; }
.r-text p + p { margin-top: 0.8em; }
.pname { font-stretch: var(--w-display); font-weight: 300; font-size: 1.875rem; line-height: 1.15; margin: 0 0 8px; }
.price { font-stretch: var(--w-display); font-weight: 300; font-size: 1.5rem; line-height: 1.2; font-feature-settings: "tnum"; }
.price small { display: block; font-stretch: 100%; font-size: var(--t-note); color: var(--iron); margin-top: 4px; line-height: 1.4; }
.list { font-size: 1.0625rem; }
.links-row { display: flex; flex-wrap: wrap; gap: 8px 28px; }

/* Documentary photo across the grid */
.photo { padding-top: 128px; }
.photo figure { grid-column: full; }
.photo figcaption { max-width: 44em; }

/* The one Onyx band between header and footer */
.quote { margin-top: 128px; padding-block: 112px; }
.quote .slash { grid-column: rail; margin-top: 10px; }
.quote .statement { grid-column: text-start / margin-end; color: var(--argent-light); font-size: 2.5rem; max-width: 18em; margin: 0 0 32px; }
.quote .who { grid-column: text; color: var(--mist); margin: 0; font-size: 1rem; }
.photo + .quote { margin-top: 96px; }
/* Founder portrait. Beside the letter on wide screens; above the signature once the
   grid has no margin column (1000px and below). */
.quote .portrait { grid-column: margin; grid-row: 2 / span 3; align-self: start; margin: 6px 0 0 32px; }
.quote .portrait img { display: block; width: 100%; max-width: 240px; height: auto; }
@media (max-width: 1000px) {
  .quote .portrait { grid-column: text; grid-row: auto; margin: 8px 0 16px; }
  .quote .portrait img { max-width: 180px; }
}
@media (max-width: 720px) { .quote .portrait img { max-width: 150px; } }

/* Closing invitation */
.close { padding-top: 128px; }
.close .xl2 { grid-column: text-start / margin-end; font-stretch: var(--w-display); font-weight: 300; font-size: 3.75rem; line-height: 1.04; letter-spacing: -0.02em; max-width: 14em; margin: 0 0 24px; text-wrap: balance; }
.close p, .close .actions { grid-column: text; }

/* Letter (About) */
.letter { padding-top: 104px; }
.letter .meta { grid-column: rail; grid-row: 1 / span 2; margin: 0; font-size: var(--t-note); color: var(--iron); line-height: 1.5; padding-top: 0.35em; }
.letter .meta b { display: block; color: var(--onyx); font-weight: 600; font-size: 1.0625rem; margin-bottom: 2px; }
.letter p.body { grid-column: text; font-size: 1.1875rem; line-height: 1.62; margin-bottom: 1.05em; max-width: 31em; }
.letter figure { grid-column: margin; grid-row: 1 / span 4; align-self: start; }
.letter .mnote { grid-column: margin; }
.letter .sig { grid-column: text; margin: 18px 0 0; font-stretch: var(--w-display); font-weight: 300; font-size: var(--t-statement); line-height: 1.1; }
.letter .sigline { grid-column: text; margin: 6px 0 0; font-size: var(--t-note); color: var(--iron); }

/* Briefs: controlled-document format */
.tb { grid-column: full; margin-top: 96px; }
.tb table { border-top: 2px solid var(--onyx); border-bottom: 1px solid var(--onyx); table-layout: fixed; margin: 0; }
.tb td { border-bottom: 0; padding: 10px 16px 12px 0; vertical-align: top; }
.tb .k { display: block; font-size: var(--t-note); color: var(--iron); margin-bottom: 2px; }
.tb .v { font-feature-settings: "tnum"; }
.brief .sec { padding-top: 72px; }
.brief h2 { font-stretch: 100%; font-weight: 500; font-size: var(--t-section); line-height: 1.15; letter-spacing: -0.015em; max-width: 21em; margin-bottom: 20px; }
.brief .secno b { margin-right: 0.7em; }
.brief .text p, .brief p.text { max-width: 33em; }
.refs { list-style: none; margin: 0; padding: 0; max-width: var(--measure); }
.refs li { border-top: 1px solid var(--argent); padding: 10px 0 10px 2.4em; text-indent: -2.4em; font-size: 1rem; }
.refs li:last-child { border-bottom: 1px solid var(--argent); }
.reg td:first-child { white-space: nowrap; }

/* Forms */
.form { grid-column: text; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; margin-top: 8px; }
.form .full { grid-column: 1 / -1; }
.form label { display: block; font-size: var(--t-note); font-weight: 600; margin-bottom: 6px; }
.form label span { font-weight: 400; color: var(--iron); }
.form input, .form select, .form textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--onyx); background: var(--paper);
  border: 1px solid var(--iron); border-radius: 2px; padding: 11px 12px;
}
.form textarea { min-height: 132px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--gunmetal-deep); outline-offset: 1px; }
.form button { border: 0; cursor: pointer; }
.hp { position: absolute; left: -9999px; }

/* Video */
video { display: block; width: 100%; height: auto; background: var(--onyx); }

@media (max-width: 1000px) {
  .letter .meta, .letter figure { grid-row: auto; }
  .letter figure { margin-block: 20px 36px; max-width: 420px; }
  figure.margin { margin-block: 8px 32px; max-width: 420px; }
  .hero .figs { grid-row: auto; }
  .hero .xl { font-size: min(4.25rem, 6.5vw); }
  .hero .xlp { font-size: min(4rem, calc((75vw - 78px) / 7.8)); }  /* the longest title word, "reimbursement", is 7.6em wide */
}
@media (max-width: 720px) {
  .hero .xl { font-size: 2.25rem; margin-top: 72px; }
  .hero .xlp { font-size: min(2.25rem, calc((100vw - 40px) / 7.8)); margin-top: 64px; }
  .hero .ttl { font-size: 2.25rem; margin-top: 56px; }
  .hero .hmeta { grid-row: auto; margin-top: 20px; }
  .hero .figs { margin-top: 24px; }
  h2, .quote .statement { font-size: 1.75rem; }
  .close .xl2 { font-size: 2.25rem; }
  .sec, .photo, .close { padding-top: 80px; }
  .quote { margin-top: 80px; padding-block: 72px; }
  .form { grid-template-columns: 1fr; }
  .tb table, .tb tbody, .tb tr { display: block; }
  .tb tr { display: grid; grid-template-columns: 1fr 1fr; }
}

/* Fixes from the full-site build */
th:last-child, td:last-child { padding-right: 0; }
td .sub { display: block; font-size: var(--t-note); color: var(--iron); line-height: 1.45; padding-top: 4px; }
td a.sub { padding-block: 4px; }
.q.sm.gap { margin-top: 36px; }

/* Verbatim port additions (2026-10-08) */
.figs-sec { padding-top: 96px; }
.figs-sec .rows { margin-top: 0; }
.quote .secno { color: var(--ash); padding-top: 0.9em; }
.quote p.text { color: var(--mist); }
.quote .who { margin: 8px 0 1em; }
.statement.callout { margin: 12px 0 8px; }
.statement.callout a { text-decoration-thickness: 1px; }
.note .nm { font-weight: 600; color: var(--onyx); }

/* Page transitions (2026-10-09). Each link is a normal page load; the new page wipes down over the old one
   (cross-document View Transitions, modeled on bexley.framer.ai). Firefox swaps pages instantly. */
@view-transition { navigation: auto; }
@property --praxa-wipe { syntax: '<number>'; initial-value: 0; inherits: false; }
@keyframes praxa-wipe { from { --praxa-wipe: 0; } to { --praxa-wipe: 1; } }
::view-transition-old(root),
::view-transition-new(root) { mix-blend-mode: normal; backface-visibility: hidden; }
::view-transition-old(root) { animation: none; }
::view-transition-new(root) {
  animation: praxa-wipe 1s cubic-bezier(0.88, 0.05, 0.43, 0.91) both;
  -webkit-mask-image: linear-gradient(180deg, black calc(100% * var(--praxa-wipe)), transparent calc(100% * var(--praxa-wipe)));
  mask-image: linear-gradient(180deg, black calc(100% * var(--praxa-wipe)), transparent calc(100% * var(--praxa-wipe)));
}

/* Hero entrance: title, label, lead, figures, and buttons rise 20px into place on load, 70ms apart */
@keyframes praxa-rise { from { opacity: 0; transform: translateY(20px); } }
@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero .hmeta, .hero .lead, .hero .figs, .hero .actions { animation: praxa-rise 600ms cubic-bezier(0.22, 1, 0.36, 1) 200ms backwards; }
  .hero .hmeta { animation-delay: 270ms; }
  .hero .lead { animation-delay: 340ms; }
  .hero .figs { animation-delay: 410ms; }
  .hero .actions { animation-delay: 480ms; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Questions as drawers (services). Hairline between items; the marker is text, nothing moves. */
.faq details { border-top: 1px solid var(--argent); }
.faq details:last-child { border-bottom: 1px solid var(--argent); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-block: 18px 20px;
  font-stretch: var(--w-display); font-weight: 300; font-size: 1.375rem; line-height: 1.2; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-stretch: 100%; font-weight: 300; font-size: 1.5rem; line-height: 1; color: var(--iron); }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { text-decoration: underline; text-decoration-color: var(--gunmetal); text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.faq summary:focus-visible { outline: 2px solid var(--gunmetal-deep); outline-offset: 3px; }
.faq details p { margin: 0 0 24px; }

/* Highlighted callout (home page FDA brief): Gunmetal Light at 32% behind the words, like a highlighter pen. Used once on the site. */
.statement.callout a { --hl: color-mix(in srgb, var(--gunmetal-light) 32%, var(--paper)); text-decoration: none; background: linear-gradient(transparent 14%, var(--hl) 14%, var(--hl) 94%, transparent 94%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-inline: 0.08em; }
.statement.callout a:hover { text-decoration: underline; text-decoration-color: var(--gunmetal); text-decoration-thickness: 1px; }

/* Phones: tables of four or more columns, and brief registers, stack into labeled rows.
   build.py adds class "stack" and a data-label (the column heading) to every cell. */
@media (max-width: 720px) {
  .tbl.stack { overflow-x: visible; }
  .tbl.stack table, .tbl.stack tbody, .tbl.stack tr, .tbl.stack td { display: block; }
  .tbl.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tbl.stack tr { border-bottom: 1px solid var(--argent); padding-block: 14px 16px; }
  .tbl.stack td { border: 0; padding: 0; text-align: left; white-space: normal; }
  .tbl.stack td + td { margin-top: 8px; }
  .tbl.stack td:nth-child(n+3) { position: relative; padding-left: 7rem; }
  .tbl.stack td:nth-child(n+3)::before { content: attr(data-label); position: absolute; left: 0; top: 0.15em; width: 6.5rem; font-size: var(--t-note); color: var(--iron); }
  .tbl.stack tr.hi { background: var(--steel-tint); padding-inline: 10px; }
  .tbl.stack tr.hi td { background: none; padding-left: 0; }
  .tbl.stack tr.hi td:nth-child(n+3) { padding-left: 7rem; }
}

/* Tinted sections (2026-10-12). One per page, marking what the buyer gets: a sample of the work, the deliverables, the bundles,
   or the expert panel. The home page also tints its briefs. Never two tinted sections in a row. */
.tint { margin-top: 112px; background: var(--steel-tint); }
.tint > .sec { padding-block: 96px 104px; }
.tint > .sec::before { display: none; }
@media (max-width: 720px) { .tint { margin-top: 80px; } .tint > .sec { padding-block: 64px 72px; } }

/* Samples of the work sit on a sheet: Paper, a 1px Argent edge, and a document header, so they read as output and not page text.
   The one exception to the no-card rule. Samples use the fictional Northwind device and say their figures are illustrative. */
.sheet { grid-column: text-start / margin-end; min-width: 0; background: var(--paper); border: 1px solid var(--argent); padding: 24px 32px 30px; margin-top: 14px; }
.sheet + p { margin-top: 24px; }
.sheet-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; font-size: var(--t-note); color: var(--iron); border-bottom: 2px solid var(--onyx); padding-bottom: 10px; margin-bottom: 22px; }
.sheet-head b { color: var(--onyx); font-weight: 600; }
.sheet-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); gap: 40px; }
.sheet .tbl { margin: 0; }
.sheet .tbl table { border-top: 0; }
.sheet .source { margin-top: 14px; }
@media (max-width: 1000px) { .sheet-body { grid-template-columns: 1fr; gap: 20px; } }
@media (max-width: 720px) { .sheet { padding: 18px 16px 22px; } }

/* Home sample: a finding whose numbered facts light up their ledger entries */
:root { --hi: color-mix(in srgb, var(--gunmetal-light) 34%, transparent); }
.annot-cap { font-size: var(--t-note); color: var(--iron); margin: 36px 0 6px; }
.annot { font-size: 1.1875rem; line-height: 1.75; max-width: none; margin: 0; }
.annot .cl { text-decoration: underline dotted var(--gunmetal); text-decoration-thickness: 1px; text-underline-offset: 0.28em; cursor: help; }
.annot .cl:is(:hover, :focus-visible) { background: var(--hi); outline: none; }
.annot sup { font-size: 0.62em; font-weight: 600; color: var(--gunmetal-deep); margin-left: 1px; }
.lnotes { display: grid; gap: 10px; align-self: start; }
.lnote { font-size: var(--t-note); line-height: 1.45; color: var(--iron); margin: 0; padding: 6px 8px; }
.lnote b { display: block; color: var(--onyx); font-weight: 600; font-feature-settings: "tnum"; margin-bottom: 1px; }
.g:has(.cl[data-n="1"]:is(:hover, :focus-visible)) .lnote[data-n="1"],
.g:has(.cl[data-n="2"]:is(:hover, :focus-visible)) .lnote[data-n="2"],
.g:has(.cl[data-n="3"]:is(:hover, :focus-visible)) .lnote[data-n="3"],
.g:has(.cl[data-n="4"]:is(:hover, :focus-visible)) .lnote[data-n="4"] { background: var(--hi); color: var(--onyx); }

/* Vantage sample: payer-by-payer coverage, each row opens like a drawer */
.payers .ph, .payers summary { display: grid; grid-template-columns: minmax(0, 1fr) 10rem 6.5rem 1.4rem; column-gap: 20px; align-items: baseline; }
.payers .ph { font-size: var(--t-note); font-weight: 600; border-bottom: 1px solid var(--onyx); padding-bottom: 8px; }
.payers .r { text-align: right; font-feature-settings: "tnum"; }
.payers details { border-bottom: 1px solid var(--argent); }
.payers summary { list-style: none; cursor: pointer; padding-block: 14px; font-size: 1.0625rem; }
.payers summary::-webkit-details-marker { display: none; }
.payers summary::after { content: "+"; color: var(--iron); text-align: right; font-size: 1.25rem; line-height: 1; }
.payers details[open] summary::after { content: "\2212"; }
.payers summary:hover .pn { text-decoration: underline; text-decoration-color: var(--gunmetal); text-underline-offset: 0.25em; }
.payers summary:focus-visible { outline: 2px solid var(--gunmetal-deep); outline-offset: 2px; }
.payers .pn { font-weight: 500; min-width: 0; }
.payers .pd { font-stretch: var(--w-display); font-size: 1.25rem; }
.payers dl { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 6px 20px; margin: 0 0 20px; max-width: 48em; font-size: 1rem; line-height: 1.5; }
.payers dt { font-size: var(--t-note); color: var(--iron); padding-top: 0.2em; }
.payers dd { margin: 0; }
@media (max-width: 720px) {
  .payers .ph { display: none; }
  .payers summary { grid-template-columns: minmax(0, 1fr) auto 1.2em; grid-template-areas: "pn pn mk" "st pd mk"; row-gap: 4px; }
  .payers .pn { grid-area: pn; }
  .payers .st { grid-area: st; }
  .payers .pd { grid-area: pd; font-size: 1rem; }
  .payers .pd::after { content: " paid"; font-stretch: 100%; color: var(--iron); font-size: var(--t-note); }
  .payers summary::after { grid-area: mk; }
  .payers dl { grid-template-columns: 1fr; gap: 2px; }
  .payers dd + dt { margin-top: 8px; }
}