/* MechPeptides shared design language.
   ------------------------------------------------------------------
   Direction: a technical spec sheet. The audience distrusts vendor
   theatre, so the site is styled as instrumentation around real values
   rather than as marketing around a laboratory that does not exist.

   Four rules hold the look together:

   1. Archivo Black, uppercase, tight, carries every heading. Nothing
      else on the site is set in it, so display weight always means
      "this is a heading" and never "this is important".
   2. Mono is the metadata voice: eyebrows, labels, tags, buttons,
      table headers, and every machine-checkable value (task numbers,
      unique keys, prices, counts). Never set running prose in mono.
   3. Crimson marks the machine-relevant bit and nothing else: section
      labels, pulled-out figures, the data column of a table, active
      nav. It is not a call-to-action colour; primary buttons stay ink,
      so the accent never competes with them.
   4. Because crimson is now the brand, hue can no longer be the only
      carrier of status. Every status in the UI prints a word or a
      glyph as well: OK / CHECK in the checker, a tick or a cross in
      the proof columns, the tag's own text. Green and amber survive
      as reinforcement, never as the sole signal.

   Every figure on the site is checkable: ledger counts come from
   scripts/refresh_ledger.py against public.janoshik.com, prices are
   Janoshik's published list. Do not add purity guarantees,
   certifications, institutional partners, house assay data or
   clinical-phase labels. Those are regulated claims and this site is not
   the entity that could make them.
   ------------------------------------------------------------------ */

:root{
  color-scheme:light;

  --ground:#fafaf9;
  --surface:#ffffff;
  --raise:#f1f5f9;

  --ink:#090c15;
  --ink-body:#4b5563;
  --ink-muted:#64748b;

  --line:#e2e8f0;
  --line-strong:#cbd5e1;
  --line-ctrl:#94a3b8;

  /* Brand accent. Crimson: labels, pulled-out figures, the data column,
     active nav, one clause of the h1. Nothing else, and never a button. */
  --accent:#e11d48;
  --accent-deep:#be123c;
  --accent-wash:#ffe4e6;

  /* semantic reinforcement: always accompanied by a word or a glyph */
  --ok:#15803d;
  --ok-wash:#dcfce7;
  --warn:#b45309;
  --warn-wash:#fef3c7;
  --danger:#9f1239;
  --danger-wash:#ffe4e6;

  --chrome:rgba(250,250,249,.88);
  --gutter:clamp(20px, 5.5vw, 80px);
  --maxw:1440px;
  --measure:68ch;

  --display:"Archivo Black", "Archivo", ui-sans-serif, system-ui, sans-serif;
  --sans:"Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-reduced-transparency: reduce){ :root{ --chrome:var(--ground); } }

*{ box-sizing:border-box; }
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:1.0625rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
:where(a){ color:inherit; }
:where(button,input,select){ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.band{ border-top:1px solid var(--line); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- type ---------- */
h1,h2,h3,h4{ font-family:var(--sans); font-weight:600; color:var(--ink); margin:0; }

/* Display is Archivo Black set uppercase on 0.88 leading. The h1 stays a
   full sentence rather than the three-word stack a product comp can afford,
   so the size clamps down far enough for four lines to sit in the column. */
.display{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(2.125rem, 4.9vw, 3.625rem); line-height:.88;
  letter-spacing:-.012em; max-width:17ch;
  /* the ­ in "reconstitution" exists for phone widths only; without
     this, display type hyphenates mid-word in the desktop hero column */
  hyphens:none;
}
@media (max-width:480px){ .display{ hyphens:manual; } }
.h2{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.625rem, 3.1vw, 2.375rem); line-height:.95; letter-spacing:-.01em;
}
.h3{ font-size:1.1875rem; line-height:1.35; letter-spacing:-.008em; font-weight:600; }
.h4{ font-size:1.0625rem; line-height:1.4; letter-spacing:-.004em; font-weight:600; }

/* The one clause of a headline that carries the accent. */
.hot{ color:var(--accent); }

.lede{
  font-size:clamp(1.0625rem,1.35vw,1.125rem); line-height:1.55;
  color:var(--ink-body); margin:0; max-width:58ch;
}
.prose{ margin:0; color:var(--ink-body); max-width:var(--measure); }
.prose + .prose{ margin-top:1em; }
.small{ font-size:.9375rem; line-height:1.55; color:var(--ink-muted); margin:0; max-width:var(--measure); }

/* Eyebrows are the metadata voice: mono, muted, uppercase. Crimson is
   reserved for the hero clause, danger states, and machine-relevant values;
   painting every label with it made the accent decoration. Section eyebrows
   are bracketed by CSS so no page has to spell the brackets out; labels
   reused inside components opt out below. */
.eyebrow{
  font-family:var(--mono); font-size:.75rem; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-muted); margin:0;
}
.sec__head > .eyebrow::before{ content:"["; }
.sec__head > .eyebrow::after{ content:"]"; }
.eyebrow--mute{ color:var(--ink-muted); font-weight:400; }

/* mono is reserved for machine-checkable values */
.val{ font-family:var(--mono); font-weight:500; letter-spacing:.02em; font-variant-numeric:tabular-nums; }

.tag{
  font-family:var(--mono); font-size:.6875rem; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; padding:4px 8px; background:var(--raise);
  color:var(--ink-muted); white-space:nowrap; border:1px solid var(--line); border-radius:2px;
}
.tag--warn{ color:var(--warn); background:var(--warn-wash); border-color:#fde68a; }
.tag--hot{ color:var(--accent); background:var(--accent-wash); border-color:#fecdd3; }

/* ---------- links ---------- */
.link{
  color:var(--accent); text-decoration:underline;
  text-decoration-color:rgba(225,29,72,.38); text-underline-offset:3px;
  text-decoration-thickness:1px; transition:text-decoration-color 120ms;
}
.link:hover{ text-decoration-color:var(--accent); }

/* Outbound links carry a mark. When a link starts earning a commission,
   add .out--paid and the label renders inline, on the link itself, which
   is what the FAQ on the homepage promises. No links are paid today. */
.out::after{ content:"\2197"; margin-left:.3em; color:var(--ink-muted); font-family:var(--mono); }
.out--paid::after{
  content:"\2197 COMMISSION"; margin-left:.35em; font-family:var(--mono); font-size:.6875rem;
  font-weight:600; letter-spacing:.05em;
  color:var(--warn); white-space:nowrap;
}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--mono); font-size:.8125rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:49px; padding:0 24px; border:1px solid var(--ink); border-radius:2px;
  background:transparent; color:var(--ink); text-decoration:none; cursor:pointer;
  white-space:nowrap; transition:background-color 130ms, color 130ms, border-color 130ms;
}
.btn:hover{ background:var(--ink); color:var(--ground); }
.btn--solid{ background:var(--ink); color:var(--ground); font-weight:700; }
.btn--solid:hover{ background:#000; border-color:#000; }
.btn--sm{ min-height:40px; padding:0 14px; font-size:.75rem; border-color:var(--line-strong); }
.btn--sm:hover{ border-color:var(--ink); }

/* ---------- masthead ---------- */
.masthead{
  position:sticky; top:0; z-index:40; background:var(--chrome);
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line);
}
@media (prefers-reduced-transparency: reduce){
  .masthead{ backdrop-filter:none; -webkit-backdrop-filter:none; }
}
.masthead__in{ display:flex; align-items:center; gap:16px; min-height:78px; }
/* The logo is a lockup: hexagon mark plus the wordmark set in the display
   face. The mark is inline SVG rather than an <img> so it inherits the
   surrounding ink and stays legible wherever the lockup lands. */
.brand{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--display); font-weight:400; font-size:1.0625rem;
  text-transform:uppercase; letter-spacing:-.01em;
  white-space:nowrap; text-decoration:none; color:var(--ink);
}
.brand__mark{ width:20px; height:20px; flex:none; }
/* A hairline rule separates the wordmark from the descriptor, as on a
   nameplate. The rule is drawn by the descriptor so the markup stays flat. */
.masthead__tag{
  white-space:nowrap; color:var(--ink-muted); font-weight:400;
  display:inline-flex; align-items:center; gap:16px;
}
.masthead__tag::before{ content:""; width:1px; height:16px; background:var(--line-strong); }
@media (max-width:1080px){ .masthead__tag{ display:none; } }
.masthead__nav{ display:flex; gap:2px; margin-inline:auto; }
.masthead__nav a{
  font-family:var(--mono); font-size:.75rem; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none;
  color:var(--ink-muted); display:inline-flex; align-items:center; min-height:44px;
  padding-inline:15px; white-space:nowrap; border-radius:2px;
}
.masthead__nav a:hover{ color:var(--ink); }
.masthead__nav a[aria-current]{ color:var(--accent); font-weight:600; }
.masthead__cta{ margin-left:auto; }

/* Narrow: the nav drops to its own row and scrolls sideways rather than
   disappearing. Hiding it stranded the calculator, ledger and labs pages
   on phones, which is most of the traffic. The bar also stops sticking,
   because two rows of chrome is too much of a small viewport to spend. */
@media (max-width:900px){
  .masthead{ position:static; }
  .masthead__in{ flex-wrap:wrap; row-gap:2px; padding-block:8px; min-height:0; }
  /* wrap, never scroll: a hidden-scrollbar overflow reads as an amputated
     nav, and two links were unreachable-looking at phone widths */
  .masthead__nav{
    order:3; width:100%; margin-inline:0; flex-wrap:wrap;
  }
  .masthead__nav a{ padding-inline:10px; min-height:40px; }
}

/* ---------- hero ---------- */
.hero{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,4.5vw,64px); align-items:center;
  padding-block:clamp(48px,6.5vw,96px);
}
@media (max-width:1000px){ .hero{ grid-template-columns:minmax(0,1fr); gap:40px; } }
.hero__L{ display:flex; flex-direction:column; gap:clamp(22px,3vw,36px); }
.cta-row{ display:flex; gap:16px; flex-wrap:wrap; }
@media (max-width:540px){
  .cta-row{ flex-direction:column; align-items:stretch; }
  .cta-row .btn{ width:100%; }
}

/* The status line above the h1: a live figure and a dateline, in the two
   mono registers. Both values are real; do not put a claim here. */
.meta-line{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.meta-line .dot{
  width:6px; height:6px; border-radius:50%; background:var(--accent);
  display:inline-block; margin-right:7px; vertical-align:middle;
}

/* ---------- metrics bar ----------
   Four figures under the hero, divided by hairlines. Every one is lifted
   from the ledger block further down the page or from Janoshik's published
   price list, so the bar cannot drift away from the body of the page. */
.metrics{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border-block:1px solid var(--line); background:var(--surface);
}
@media (max-width:900px){ .metrics{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:480px){ .metrics{ grid-template-columns:minmax(0,1fr); } }
.metric{
  padding:28px clamp(18px,2.2vw,32px); display:flex; flex-direction:column; gap:9px;
  border-left:1px solid var(--line);
}
.metric:first-child{ border-left:0; }
@media (max-width:900px){
  .metric:nth-child(odd){ border-left:0; }
  .metric:nth-child(n+3){ border-top:1px solid var(--line); }
}
@media (max-width:480px){
  .metric{ border-left:0; }
  .metric + .metric{ border-top:1px solid var(--line); }
}
.metric__n{
  font-family:var(--display); font-weight:400; font-size:clamp(1.5rem,2.3vw,1.9rem);
  line-height:1; letter-spacing:-.015em; font-variant-numeric:tabular-nums;
}
.metric__l{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-muted); margin:0;
}

/* ---------- the checker (hero tool) ---------- */
.checker{ background:var(--surface); border:1px solid var(--line); border-radius:2px; }
.checker__head{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:16px 20px; border-bottom:1px solid var(--line);
}
.checker__body{ padding:clamp(20px,2.4vw,28px); display:flex; flex-direction:column; gap:20px; }
.checker__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:14px; }
@media (max-width:420px){ .checker__grid{ grid-template-columns:minmax(0,1fr); } }
.checker__foot{ display:flex; gap:10px; flex-wrap:wrap; }

.field{ display:flex; flex-direction:column; gap:8px; }
.field label{
  font-family:var(--mono); font-size:.6875rem; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-muted);
}
.field input{
  font-family:var(--mono); font-size:.9375rem; letter-spacing:.04em; padding:12px 13px;
  background:var(--ground); border:1px solid var(--line-strong); border-radius:2px;
  width:100%; min-height:46px;
}
.field input::placeholder{ color:#a8b1bd; }
.field input:focus-visible{ border-color:var(--accent); outline-offset:1px; }

.checker__out{
  list-style:none; margin:0; padding:16px 0 0; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:10px;
}
.checker__out li{
  font-size:.9375rem; line-height:1.5; color:var(--ink-body);
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:start;
}
.checker__out li::before{
  font-family:var(--mono); font-size:.6875rem; font-weight:600; letter-spacing:.06em;
  padding-top:3px; content:"NOTE"; color:var(--ink-muted);
}
.checker__out li.ok{ color:var(--ok); } .checker__out li.ok::before{ content:"OK"; color:var(--ok); }
.checker__out li.warn{ color:var(--warn); } .checker__out li.warn::before{ content:"CHECK"; color:var(--warn); }

/* ---------- sections ---------- */
.sec{
  padding-block:clamp(56px,7vw,120px);
  display:flex; flex-direction:column; gap:clamp(28px,3.4vw,44px);
}
.sec__head{ display:flex; flex-direction:column; gap:16px; max-width:min(760px,100%); }
.two{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);
  gap:clamp(26px,3.4vw,64px); align-items:start;
}
@media (max-width:940px){ .two{ grid-template-columns:minmax(0,1fr); gap:24px; } }
.split{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4.2vw,64px); align-items:center;
}
@media (max-width:980px){ .split{ grid-template-columns:minmax(0,1fr); gap:32px; } }
.stack{ display:flex; flex-direction:column; gap:clamp(22px,2.8vw,32px); }

/* The direct answer to the page's core question, written to be liftable
   by an AI Overview. Keep it short, plain and self-contained. */
.answer{
  border-left:3px solid var(--accent); padding:2px 0 2px 22px;
  display:flex; flex-direction:column; gap:14px;
}
.answer p{ font-size:1.0625rem; line-height:1.65; margin:0; max-width:64ch; color:var(--ink-body); }

/* ---------- numbered steps ---------- */
.steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:24px; counter-reset:step; }
.steps li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px 16px; align-items:start; counter-increment:step; }
.steps li::before{
  content:"[" counter(step,decimal-leading-zero) "]";
  font-family:var(--mono); font-size:.75rem; font-weight:500; letter-spacing:.04em;
  color:var(--accent); margin-top:3px;
}
.steps p{ font-size:.9375rem; line-height:1.6; color:var(--ink-body); margin:6px 0 0; max-width:60ch; }

/* ---------- cards ---------- */
.cards{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
@media (max-width:1120px){ .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){ .cards{ grid-template-columns:minmax(0,1fr); } }
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:2px; padding:24px;
  display:flex; flex-direction:column; gap:14px; text-decoration:none;
  transition:border-color 130ms;
}
.card:hover{ border-color:var(--accent); }
.card > .tag{ align-self:flex-start; }
.card p{ font-size:.9375rem; line-height:1.55; color:var(--ink-body); margin:0; }
.card__go{
  font-family:var(--mono); font-size:.75rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink);
  margin-top:auto; padding-top:14px;
}
.card__go::after{ content:" \003E_"; color:var(--accent); }
.card:hover .card__go{ text-decoration:underline; text-underline-offset:3px; }

/* ---------- does / does not ---------- */
.proof{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
@media (max-width:860px){ .proof{ grid-template-columns:minmax(0,1fr); } }
.proof__col{
  border:1px solid var(--line); background:var(--surface); border-radius:2px;
  padding:28px; display:flex; flex-direction:column; gap:16px;
}
.proof__col h3{ font-size:1rem; }
.proof__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.proof__col li{
  font-size:.9375rem; line-height:1.55; color:var(--ink-body);
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:start;
}
.proof__col li::before{ font-family:var(--mono); font-size:.875rem; font-weight:700; padding-top:2px; }
.proof--does li::before{ content:"\2713"; color:var(--ok); }
.proof--not li::before{ content:"\2717"; color:var(--accent); }

/* ---------- tables ---------- */
.tablewrap{ overflow-x:auto; min-width:0; border:1px solid var(--line); border-radius:2px; background:var(--surface); }
table{ border-collapse:collapse; width:100%; min-width:520px; }
caption{
  text-align:left; font-family:var(--mono); font-size:.75rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-muted); padding:16px 20px;
}
th{
  font-family:var(--mono); font-size:.6875rem; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--ink-muted); text-align:left; padding:15px 20px;
  background:var(--raise); border-bottom:1px solid var(--line); white-space:nowrap;
}
td{
  font-size:.9375rem; padding:16px 20px; color:var(--ink);
  border-bottom:1px solid var(--line);
}
/* The data column carries the accent: it is the machine value the row exists
   to report, and crimson is what marks those everywhere else on the site. */
td.num{
  font-family:var(--mono); font-size:.875rem; font-weight:500; white-space:nowrap;
  font-variant-numeric:tabular-nums; color:var(--accent);
}
tr:last-child td{ border-bottom:0; }

/* ---------- faq ---------- */
details{ border-bottom:1px solid var(--line); }
details:first-of-type{ border-top:1px solid var(--line); }
summary{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px; align-items:baseline;
  padding:22px 0; cursor:pointer; list-style:none; min-height:44px;
}
summary::-webkit-details-marker{ display:none; }
.faq__q{ font-weight:600; font-size:1.0625rem; line-height:1.4; letter-spacing:-.008em; }
summary:hover .faq__q{ text-decoration:underline; text-underline-offset:3px; }
.faq__i{ font-family:var(--mono); color:var(--accent); font-size:1rem; line-height:1; }
details[open] .faq__i{ color:var(--ink); }
.faq__a{
  font-size:.9375rem; line-height:1.7; color:var(--ink-body);
  margin:0; padding:0 0 28px; max-width:var(--measure);
}

/* ---------- footer ---------- */
.foot{ padding-block:64px 32px; display:flex; flex-direction:column; gap:48px; }
.foot__cols{ display:grid; grid-template-columns:minmax(0,2fr) repeat(4,minmax(0,1fr)); gap:clamp(24px,4vw,52px); }
@media (max-width:1000px){
  .foot__cols{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .foot__col:first-child{ grid-column:1/-1; }
}
@media (max-width:760px){ .foot__cols{ grid-template-columns:minmax(0,1fr); } }
.foot__col{ display:flex; flex-direction:column; gap:5px; }
.foot__col a{
  font-family:var(--mono); font-size:.8125rem; letter-spacing:.05em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-muted);
  min-height:30px; display:inline-flex; align-items:center;
}
.foot__col a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.foot__base{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-top:28px; border-top:1px solid var(--line);
}
.foot__note{
  font-size:.9375rem; line-height:1.6; color:var(--ink-muted);
  margin:0; max-width:52ch;
}

/* ---------- one restrained entrance, hero only ---------- */
@media (prefers-reduced-motion: no-preference){
  .rise{ animation:rise 560ms cubic-bezier(.16,.84,.44,1) backwards; }
  .rise:nth-child(1){ animation-delay:30ms; }
  .rise:nth-child(2){ animation-delay:100ms; }
  .rise:nth-child(3){ animation-delay:170ms; }
  .hero__fig{ animation:rise 640ms cubic-bezier(.16,.84,.44,1) 170ms backwards; }
  @keyframes rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
}

/* ---------- inverted section ----------
   Redefining the tokens inside the block inverts every component that
   already uses them, so nothing needs a dark-mode variant of its own.
   Used once, on the limits section, to anchor the page. Crimson survives
   the inversion, so the accent does not change identity halfway down. */
.inverted{
  --ground:#090c15;
  --surface:#111621;
  --raise:#1a2130;
  --ink:#fafaf9;
  --ink-body:#b6bdc9;
  --ink-muted:#8a94a3;
  --line:#232b3a;
  --line-strong:#333d4e;
  --accent:#fb5c7d;
  --accent-wash:rgba(251,92,125,.12);
  --ok:#4ade80;
  --ok-wash:rgba(74,222,128,.12);
  --danger:#fb7185;
  --danger-wash:rgba(251,113,133,.12);
  background:var(--ground); color:var(--ink); border-top:0;
}
.inverted .h2, .inverted h1, .inverted h2, .inverted h3{ color:var(--ink); }

/* ---------- the finding ----------
   One number pulled out at display scale, with the claim beside it. */
.finding{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(20px,3vw,48px); align-items:center; }
@media (max-width:700px){ .finding{ grid-template-columns:minmax(0,1fr); gap:14px; } }
.finding__n{
  font-family:var(--display); font-weight:400; font-size:clamp(3.5rem,8vw,6rem);
  line-height:.85; letter-spacing:-.03em; font-variant-numeric:tabular-nums;
  color:var(--accent);
}
.finding__t{ font-size:clamp(1rem,1.4vw,1.125rem); line-height:1.6; color:var(--ink-body); margin:0; max-width:46ch; }

/* ---------- ranking ----------
   The ledger's top names. A ranked list rather than a bar chart: the counts
   are small integers and read faster as figures than as lengths, and a filled
   track would be dashboard furniture on a page that is otherwise a document. */
.rank{
  list-style:none; margin:0; padding:0;
  border-top:1px solid var(--line-strong);
  columns:2; column-gap:clamp(28px,4vw,64px);
}
@media (max-width:760px){ .rank{ columns:1; } }
.rank__row{
  display:grid; grid-template-columns:2.5rem minmax(0,1fr) auto; gap:14px;
  align-items:baseline; padding-block:14px;
  border-bottom:1px solid var(--line); break-inside:avoid;
}
.rank__i{ font-size:.75rem; color:var(--ink-muted); }
.rank__n{ font-size:.9375rem; line-height:1.4; color:var(--ink); overflow-wrap:anywhere; }
.rank__c{ font-size:1rem; font-weight:600; color:var(--ink); }

/* ---------- report anatomy ----------
   A labelled diagram of the two fields that matter, not a mock-up of a
   report. The earlier version drew grey bars in place of body text, which
   made it read as a screenshot of a document that does not exist. On a page
   about forged certificates that was the wrong thing to be showing. */
.anat{
  border:1px solid var(--line); border-radius:2px; background:var(--surface);
  padding:clamp(20px,2.4vw,32px); margin:0;
  display:flex; flex-direction:column; gap:20px;
}
.anat__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
/* Field labels inside the diagram are labels, not section eyebrows: they take
   the mono register but stay muted and unbracketed. */
.anat__f .eyebrow, .checker__head .eyebrow{ color:var(--ink-muted); font-weight:400; }
.anat__fields{ display:flex; flex-direction:column; gap:14px; }
.anat__f{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 16px;
  align-items:baseline; padding:16px;
  border:1px solid var(--line); border-radius:2px; background:var(--ground);
}
.anat__f b{
  font-family:var(--mono); font-size:1rem; font-weight:600; letter-spacing:.04em;
  color:var(--accent);
}
.anat__f .anat__rule{
  grid-column:1/-1; font-size:.9375rem; line-height:1.55; color:var(--ink-muted);
}
.anat figcaption{ font-size:.9375rem; line-height:1.6; color:var(--ink-muted); }

/* ---------- where to go next ----------
   Two tools carry more weight than two reference pages, so they are not all
   dealt the same tile. Four identical cards in a row said everything was
   equally important, which was not true and read as filler. */
.pair{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
@media (max-width:720px){ .pair{ grid-template-columns:minmax(0,1fr); } }
.card--lead{ padding:clamp(24px,2.8vw,32px); gap:16px; }
.card--lead .h3{ font-size:1.1875rem; letter-spacing:-.012em; }

.refs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(28px,4vw,64px);
       border-top:1px solid var(--line-strong); }
@media (max-width:720px){ .refs{ grid-template-columns:minmax(0,1fr); } }
.ref{
  display:flex; flex-direction:column; gap:8px; padding-block:22px;
  text-decoration:none; border-bottom:1px solid var(--line);
}
.ref p{ font-size:.9375rem; line-height:1.55; color:var(--ink-muted); margin:0; }
.ref:hover h3{ text-decoration:underline; text-underline-offset:3px; }

/* Footnotes track the ranking's two columns, so the band does not end with a
   full-width list above a half-empty paragraph. */
.notes{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,4vw,64px); }
@media (max-width:760px){ .notes{ grid-template-columns:minmax(0,1fr); gap:14px; } }
.cta-row--ledger{ margin-top:4px; }

/* ---------- cross-link ----------
   A wide call-forward to another page, used at the end of a guide section.
   Wider and quieter than a card, because it is a continuation rather than a
   choice between options. */
.xlink{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:2px;
  padding:26px clamp(20px,2.4vw,28px); text-decoration:none;
  transition:border-color 130ms;
}
.xlink:hover{ border-color:var(--accent); }
.xlink__t{ display:flex; flex-direction:column; gap:8px; }
.xlink__t p{ font-size:.9375rem; line-height:1.55; color:var(--ink-body); margin:0; max-width:60ch; }
.xlink__go{
  font-family:var(--mono); font-size:.75rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink); white-space:nowrap;
}
.xlink__go::after{ content:" \003E_"; color:var(--accent); }
.xlink:hover .xlink__go{ text-decoration:underline; text-underline-offset:3px; }

/* ---------- article prose ----------
   Running body copy on the guide pages. Measure-limited, links on the accent.
   Each guide page used to define its own version of this against its own token
   set; there is one definition now. */
.art{ display:flex; flex-direction:column; gap:1.15em; max-width:var(--measure); }
/* prose that stands alone in a full-width band: flow it in two columns so
   the right half of the viewport carries content instead of vacancy */
@media (min-width:900px){
  .art--cols{ display:block; max-width:none; columns:2; column-gap:56px; }
  .art--cols p{ break-inside:avoid; margin-bottom:1.15em; }
}
.art p{ font-size:.9375rem; line-height:1.75; color:var(--ink-body); margin:0; }
.art p.muted{ color:var(--ink-muted); }
.art strong{ color:var(--ink); font-weight:600; }
.art a{
  color:var(--accent); text-decoration:underline; text-decoration-color:rgba(225,29,72,.38);
  text-underline-offset:3px; text-decoration-thickness:1px; transition:text-decoration-color 120ms;
}
.art a:hover{ text-decoration-color:var(--accent); }

/* Row-label column in a comparison table: the question, not the answer. */
td.dim{ color:var(--ink-muted); font-size:.9375rem; }

/* ---------- section grounds ----------
   The page was a single flat field from masthead to footer, which read as
   unfinished however good the type was. Sections now alternate between the
   page ground and a raised surface so the eye gets a boundary to rest on,
   and the change is a background only: no section flips theme (see 4.11). */
.band--raise{ background:var(--surface); }
.band--tint{ background:var(--raise); }

/* ---------- pulled-out figure ----------
   Sits beside a section headline and carries the accent. One per section at
   most, otherwise it stops being a pull-out. */
.stat{ display:flex; flex-direction:column; gap:8px; }
.stat__n{
  font-family:var(--display); font-weight:400; font-size:clamp(2.25rem,4vw,3.25rem);
  line-height:.9; letter-spacing:-.025em; color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.stat__l{ font-size:.9375rem; line-height:1.5; color:var(--ink-muted); margin:0; }

/* Leader row in a ranking earns the accent; the rest stay ink. */
.rank__row:first-child .rank__n{ font-weight:600; }
.rank__row:first-child .rank__c{ color:var(--accent); }

/* ---------- photography ----------
   The site ran with no images at all, which read as unfinished rather than
   austere. What it does NOT do is illustrate itself with anything that could
   be mistaken for evidence: no mock certificates, no laboratory interiors, no
   branded vials. These are illustrations, and the alt text says so. */
.shot{ margin:0; display:flex; flex-direction:column; gap:14px; }
.shot img{
  display:block; width:100%; height:auto; border-radius:2px;
  background:var(--raise);
}
/* A technical diagram rather than a photograph: held to a width that keeps its
   labels readable, and floated straight on the band instead of on a panel. */
.shot--diagram{ width:100%; max-width:880px; }
.shot--diagram img{ background:none; }
.shot figcaption{
  font-size:.9375rem; line-height:1.6;
  color:var(--ink-muted); max-width:56ch; margin:0;
}
/* A band that runs the image the full width of the container, used once per
   page at most so it stays an event rather than a texture. */
.shot--band img{ aspect-ratio:3/1.35; object-fit:cover; }
@media (max-width:760px){ .shot--band img{ aspect-ratio:4/3; } }

/* The strip along the bottom of the hero tool, mirroring the one at its head.
   Both carry provenance rather than decoration: where the answer comes from,
   and what does not leave the browser. */
.checker__hud{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  padding:14px 20px; border-top:1px solid var(--line); background:var(--ground);
}