/* ============================================================
   SHELF — marketing site v2
   Design language: "the measurement bureau's journal."
   Broadsheet grid, paper + ink + one bottle-green accent,
   hairline rules instead of cards, tabular numerals, near-flat.
   Since 2026-09-17 (US155, Matias) a second colour, a soft gold, with ONE job: it is the site's main-button colour
   (Check your brand, See plans, Book a call, Get my full brand audit, Ask us to check by hand). The label says what a
   button does; the colour only says "this is the thing to press here". Second-rank buttons are outlined. Gold never
   decorates (no gold text, strokes, icons or backgrounds): a colour that is everywhere stops pointing anywhere.
   The one deliberate exception is the pricing page, whose buying buttons stay green (Matias, 2026-09-11 and 2026-09-17).
   Type: Newsreader (display serif) · Archivo (UI/body grotesque)
         · IBM Plex Mono (instrument annotations).
   Light-only by design (print does not have a dark mode).
   ============================================================ */

/* ---------- fallback faces with matched widths (2026-09-13, US138) ----------
   Until the web fonts arrive the browser paints Georgia, Arial and Menlo. These local faces are the same fonts
   scaled so text wraps in the same places as the real ones, so nothing reflows when the web fonts land.
   Ratios measured in the browser at the sizes used (Newsreader's width changes with its optical size, hence two). */
@font-face { font-family: 'Newsreader Fallback'; src: local('Georgia'); size-adjust: 91.3%; }          /* running text, opsz 18 to 30 */
@font-face { font-family: 'Newsreader Display Fallback'; src: local('Georgia'); size-adjust: 101.1%; } /* headlines and figures, opsz 44 to 60 */
@font-face { font-family: 'Archivo Fallback'; src: local('Arial'); size-adjust: 98.85%; }
@font-face { font-family: 'Plex Mono Fallback'; src: local('Menlo'), local('Courier New'); size-adjust: 99.7%; }

:root {
  --paper: #FAF8F1;          /* ivory stock */
  --paper-deep: #F1EEE4;     /* recessed panels, table heads */
  --paper-card: #FFFFFF;     /* instrument panels */
  --ink: #14100B;            /* near-black, warm */
  --ink-2: #4F4B42;          /* secondary text */
  --ink-3: #8A857A;          /* muted, captions */
  --hairline: rgba(20, 16, 11, 0.16);
  --hairline-soft: rgba(20, 16, 11, 0.09);
  --rule-strong: #14100B;    /* 2px section rules */
  --green: #175A3C;          /* bottle green — brand + positive data */
  --green-mid: #3C8B68;      /* a lighter green for big figures on paper (the checker's shelves tile: the bottle green read as black there; Matias, 2026-09-19, US162). 3.8:1 on white, fine for large type only */
  --green-deep: #0E4630;
  --green-wash: #E7EFE6;
  --gold: #F8D580;           /* the main-button colour (US155); Matias's own soft gold, first used on the pricing page's featured row (US137) */
  --green-mark: #A9DDBF;     /* highlighter green: the stroke under the homepage guarantee (US155). Good news is green; gold is for buttons only */
  --gold-hover: #F5C246;     /* a gold button under the mouse: the same gold twelve points darker (US155; it turned BLACK until Matias's eye, 2026-09-17: the colour that drew the click should not vanish at the moment of the click) */
  --gold-press: #EFB935;     /* and while it is being pressed */
  --gold-deep: #946F1A;      /* the same gold, darkened, for a mark drawn ON the gold (the pricing page's tick) */
  --alarm: #E0240A;          /* the site's one red (US155, Matias: a more alarming red for the checker's "Not recommended on any shelf" band, even if less
                                on brand; it was brick #A63A2B). His example was #FF1F00; white text on that is 3.9 to 1 and fails the reading standard for
                                small type, this one is 4.7 to 1 and a hair deeper. Checked the same day: that band is the ONLY place a visitor sees red. */
  --alarm-wash: #F6E9E4;
  --sel: #175A3C;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-family: 'Archivo', 'Archivo Fallback', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--ink);
  background-color: var(--paper);
  /* faint print grain — one inline SVG, no request */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0 0.04 0 0 0 0.024 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--sel); color: #FBF9F3; }

/* ---------- type scale ---------- */
.display {
  font-family: 'Newsreader', 'Newsreader Display Fallback', Georgia, serif;
  font-weight: 500;
  font-variation-settings: 'opsz' 60;
  letter-spacing: -0.015em;
  line-height: 1.04;
}
h1, h2, h3, h4 { line-height: 1.15; }
h1.display { font-size: clamp(2.6rem, 5.8vw, 4.3rem); }
h2.display { font-size: clamp(1.9rem, 3.4vw, 2.7rem); letter-spacing: -0.01em; }
h3 { font-family: 'Archivo', 'Archivo Fallback', sans-serif; font-size: 1.02rem; font-weight: 600; }
.serif-lead {
  font-family: 'Newsreader', 'Newsreader Fallback', Georgia, serif;
  font-size: 1.28rem; line-height: 1.5; font-weight: 400;
  color: var(--ink-2);
  font-variation-settings: 'opsz' 18;
}
.lead { font-size: 1.08rem; color: var(--ink-2); line-height: 1.65; }
p { color: var(--ink-2); }
strong { font-weight: 600; color: var(--ink); }
em.accent { font-style: italic; color: inherit; }

a { color: var(--green); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(23, 90, 60, 0.4); }
a:hover { text-decoration-color: var(--green); }
/* One hover rhythm for the whole site (Matias's question, 2026-09-17, US155). Buttons always faded between states in 140 ms while menu items,
   the Public Index chip, text links, footer links, the checker's suggestions and the Index's tabs snapped instantly. Today's convention is a
   short fade, roughly 100 to 200 ms: under 100 ms reads as instant anyway, over 250 ms starts to feel slow. Only colours fade; nothing moves
   or changes size under the mouse. Visitors who ask their system for less motion get instant changes (the rule near the top of this file). */
a, .site-nav a, .suggestions button, .surface-tabs button, .check-ac li, summary {
  transition: color 0.14s ease, background-color 0.14s ease, border-color 0.14s ease, text-decoration-color 0.14s ease;
}
/* The finger on everything clickable (Matias, 2026-09-17, US155). Browsers give it to links only; buttons, dropdowns and
   FAQ summaries keep the arrow unless a site says otherwise. Every button class here already set it; this one rule is
   the safety net, so nothing clickable added later can forget it. Measured the same day: all 12 pages already showed
   the finger everywhere except the category dropdown in the brand checker. */
a[href], button, summary, select, label[for], [role="button"], [onclick], input[type="submit"], input[type="button"] { cursor: pointer; }
button[disabled] { cursor: not-allowed; }
a:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.mono {
  font-family: 'IBM Plex Mono', 'Plex Mono Fallback', ui-monospace, monospace;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
/* a quiet underline in the text's own colour (US162, 2026-09-19: "in the US" on the pricing page must not draw the eye).
   The green stroke was tried on the plans' guarantee lines the same day and dropped: sober beats highlighted there (Matias). */
.u-plain { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.smallcaps {
  font-family: 'IBM Plex Mono', 'Plex Mono Fallback', monospace;
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-2);
}
.num, .tnum { font-variant-numeric: tabular-nums; }

.shell { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.shell-narrow { max-width: 860px; margin: 0 auto; padding: 0 28px; }

/* ---------- masthead / nav ---------- */
.masthead {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: 2px solid var(--rule-strong);
}
.masthead .shell {
  display: flex; align-items: center; gap: 30px; height: 62px;
}
.wordmark {
  display: flex; align-items: center; gap: 11px;
  font-family: 'Archivo', 'Archivo Fallback', sans-serif; font-weight: 700;
  font-size: 0.94rem; letter-spacing: 0.12em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.wordmark:hover { text-decoration: none; }
.wordmark svg { display: block; }
.wordmark .mark-rail { stroke: var(--ink); }
.wordmark .mark-dot { fill: var(--green); }
/* Menu decided by Matias 2026-09-05 (US103): wordmark, then Method · Index · About · Pricing left-justified,
   the one action ("Check my brand") as a button on the right. Sample lives on the pricing page, not in the menu. */
.site-nav { display: flex; gap: 26px; margin-left: 6px; flex: 1; align-items: center; }
.site-nav a {
  font-family: 'IBM Plex Mono', 'Plex Mono Fallback', monospace;
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none;
  padding: 4px 0; border-bottom: 1px solid transparent;
}
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.site-nav a.active { color: var(--ink); border-bottom-color: var(--green); }
/* The one button. The generic menu-link rule above zeroes side padding on anything in the menu, so the button
   sets its own, in the Public Index chip's proportions (Matias, 2026-09-05: "just like the public index"). Green and
   black on hover from 2026-09-05; GOLD with ink text since 2026-09-17 (US155), still black on hover. */
.site-nav .btn { border-bottom: none; margin-left: auto; padding: 5px 12px; }
.site-nav .btn.btn-primary, .site-nav a.btn.btn-primary.active { background: var(--gold); border: 1px solid var(--ink); color: var(--ink) !important; }   /* all four sides: the menu rule above drops the bottom one, which never showed while the border was the fill's own green */
.site-nav .btn.btn-primary:hover { background: var(--gold-hover); border-color: var(--ink); color: var(--ink) !important; }
.site-nav .btn.btn-primary:active { background: var(--gold-press); }
.site-nav a.btn.active { border-bottom: none; }
/* The header button stays out of sight while the page's own brand box is still ahead of the reader or on screen, and fades in once
   they have scrolled past it (Matias's pick, 2026-09-17, US155): the first screen reads top to bottom, hero then box, with nothing
   competing top right. Only pages that carry a box (body.has-check: the homepage and the check page) do this; every other page always
   shows the button. From 881px up only: below that the menu is folded and the button lives inside it. Without JavaScript it simply stays visible.
   Click numbers behind the decision (2026-09-14 to 17, small sample): 1 header click on the homepage against 50 checks typed into the box. */
@media (min-width: 881px) {
  html.js body.has-check .site-nav .btn.btn-primary { transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease, opacity 0.22s ease, visibility 0s linear 0s; }
  html.js body.has-check:not(.past-check) .site-nav .btn.btn-primary { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.22s ease, visibility 0s linear 0.22s; }
}
/* "Public Index" is the fourth item and stands out from the other menu items (Matias, 2026-09-05, US103): a
   green-bordered chip on the green wash; solid green on the Index page itself. */
.site-nav a.nav-index { color: var(--green-deep); background: var(--green-wash); border: 1px solid var(--green); padding: 5px 10px; }
.site-nav a.nav-index:hover { color: var(--paper); background: var(--green); border-color: var(--green); }
.site-nav a.nav-index.active { color: var(--paper); background: var(--green); border-color: var(--green-deep); }
.nav-burger {
  display: none; background: none; border: none; cursor: pointer;
  width: 40px; height: 40px; color: var(--ink); margin-left: auto;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 2px;
  font-family: 'Archivo', 'Archivo Fallback', sans-serif; font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
  cursor: pointer; border: 1px solid var(--ink);
  text-decoration: none; white-space: nowrap;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.btn:active { transform: none; }
.btn-primary { background: var(--ink); color: var(--paper) !important; }
.btn-primary:hover { background: var(--green-deep); border-color: var(--green-deep); }
.btn-primary.btn-green { background: var(--green); border-color: var(--green); }
.btn-primary.btn-green:hover { background: var(--green-deep); border-color: var(--green-deep); }
/* the main-button colour (US155). Ink text on gold (about 13 to 1); a darker gold under the mouse, darker again while pressed */
.btn-primary.btn-gold, .check-form .btn-primary { background: var(--gold); border-color: var(--ink); color: var(--ink) !important; }
.btn-primary.btn-gold:hover, .check-form .btn-primary:hover { background: var(--gold-hover); border-color: var(--ink); color: var(--ink) !important; }
.btn-primary.btn-gold:active, .check-form .btn-primary:active { background: var(--gold-press); }
.btn-line { background: transparent; color: var(--ink) !important; }
.btn-line:hover { background: var(--ink); color: var(--paper) !important; }
.btn-lg { padding: 15px 28px; font-size: 0.88rem; }
.btn-sm { padding: 8px 14px; font-size: 0.72rem; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ---------- sections & rubrics ---------- */
.section { padding: 76px 0; }
.section-tight { padding: 48px 0; }
.rubric {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  border-top: 2px solid var(--rule-strong);
  padding-top: 12px; margin-bottom: 34px;
}
.rubric .label {
  font-family: 'IBM Plex Mono', 'Plex Mono Fallback', monospace;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink);
}
.rubric .folio {
  font-family: 'IBM Plex Mono', 'Plex Mono Fallback', monospace; font-size: 0.68rem;
  letter-spacing: 0.1em; color: var(--ink-3); text-transform: uppercase;
}
.rubric-minor { border-top-width: 1px; border-top-color: var(--hairline); }

/* ---------- broadsheet columns ---------- */
.cols { display: grid; gap: 44px; align-items: start; }
.cols-7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.cols-5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.cols-8-4 { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.cols-4-8 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }

/* ---------- hero ---------- */
.hero { padding: 64px 0 56px; }
.hero .kicker { margin-bottom: 20px; }
.kicker {
  display: block;
  font-family: 'IBM Plex Mono', 'Plex Mono Fallback', monospace;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--green);
}
.hero h1 { margin-bottom: 22px; max-width: 13.5em; }
.hero .serif-lead { margin-bottom: 30px; max-width: 30em; }

/* the hero picture (US124): four jars on a stone shelf; the edges fade into the paper so the photo has no frame */
.hero-art { align-self: center; }
.hero-art img { display: block; width: 100%; height: auto; -webkit-mask-image: radial-gradient(ellipse 74% 88% at 50% 52%, #000 66%, transparent 100%); mask-image: radial-gradient(ellipse 74% 88% at 50% 52%, #000 66%, transparent 100%); }
.hero .cols { align-items: center; }

/* the instrument: checker embedded in hero */
.checkbox-unit { max-width: 560px; }
.check-form { display: flex; border: 1px solid var(--ink); background: var(--paper-card); }
.check-form:focus-within { outline: 2px solid var(--green); outline-offset: 2px; }
.check-input {
  flex: 1; min-width: 0; border: none; background: transparent;
  font-family: 'Archivo', 'Archivo Fallback', sans-serif; font-size: 1.02rem; color: var(--ink);
  padding: 15px 16px;
}
.check-input::placeholder { color: var(--ink-3); }
.check-input:focus { outline: none; }
.check-form .btn { border: none; border-left: 1px solid var(--ink); border-radius: 0; }
.check-note { margin-top: 10px; }

/* ---------- the shelf panel (data instrument) ---------- */
.panel {
  background: var(--paper-card);
  border: 1px solid var(--ink);
}
.panel-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--hairline);
  background: var(--paper-deep);
}
.panel-head .t {
  font-family: 'IBM Plex Mono', 'Plex Mono Fallback', monospace; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
}
.panel-head .s { font-family: 'IBM Plex Mono', 'Plex Mono Fallback', monospace; font-size: 0.66rem; color: var(--ink-3); letter-spacing: 0.06em; }
.panel-body { padding: 18px 16px 14px; }
.panel-foot {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 9px 16px; border-top: 1px solid var(--hairline-soft);
}

/* shelf motif — printed planogram */
.shelf-row { position: relative; padding-bottom: 10px; }
.shelf-items { display: flex; gap: 10px; align-items: flex-end; }
.shelf-rail { height: 4px; background: var(--ink); margin-top: 10px; }
.tile {
  flex: 1; min-width: 0; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  animation: settle 0.45s ease backwards;
}
.tile:nth-child(1) { animation-delay: 0.05s; }
.tile:nth-child(2) { animation-delay: 0.14s; }
.tile:nth-child(3) { animation-delay: 0.23s; }
.tile:nth-child(4) { animation-delay: 0.32s; }
.tile:nth-child(5) { animation-delay: 0.41s; }
@keyframes settle {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tile-box {
  width: 100%; aspect-ratio: 3 / 4;
  border: 1px solid var(--ink);
  background: var(--paper-card);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Archivo', 'Archivo Fallback', sans-serif; font-weight: 700; font-size: 1rem;
  color: var(--ink); position: relative;
}
.tile:first-child .tile-box { background: var(--green); border-color: var(--green-deep); color: #F6FAF4; }
.tile-rank {
  position: absolute; top: -8px; left: -1px;
  background: var(--ink); color: var(--paper);
  font-family: 'IBM Plex Mono', 'Plex Mono Fallback', monospace; font-size: 0.62rem; font-weight: 600;
  padding: 1px 6px;
}
.tile:first-child .tile-rank { background: var(--green-deep); }
.tile-vis { width: 100%; height: 3px; background: var(--hairline-soft); overflow: hidden; }
.tile-vis span { display: block; height: 100%; background: var(--green); }
.tile-label {
  font-size: 0.66rem; font-weight: 600; color: var(--ink-2);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tile-alert {
  position: absolute; top: -26px; right: -4px; z-index: 2; white-space: nowrap;
  background: var(--alarm); color: #FBF4F1;
  font-family: 'IBM Plex Mono', 'Plex Mono Fallback', monospace; font-size: 0.6rem; font-weight: 600;
  padding: 2px 7px; letter-spacing: 0.04em;
}

/* ---------- figures row (credibility strip as a ruled table) ---------- */
.figures {
  border-top: 2px solid var(--rule-strong);
  border-bottom: 1px solid var(--hairline);
  display: grid; grid-template-columns: repeat(2, 1fr) auto repeat(2, 1fr);
  align-items: stretch;
}
.figures .figures-link { padding-right: 22px; }
.figures .figures-link .v { display: flex; align-items: center; }
.figures > div {
  padding: 18px 22px 16px 0; margin-right: 22px;
  border-right: 1px solid var(--hairline-soft);
  display: grid; grid-template-rows: 48px auto; align-content: start;
}
.figures > div:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.figures .v {
  font-family: 'Newsreader', 'Newsreader Display Fallback', Georgia, serif; font-weight: 500;
  font-size: 2rem; line-height: 1.1; font-variant-numeric: tabular-nums;
  font-variation-settings: 'opsz' 44;
  align-self: center;
}
.figures .k {
  font-family: 'IBM Plex Mono', 'Plex Mono Fallback', monospace; font-size: 0.64rem;
  letter-spacing: 0.02em; text-transform: none; color: var(--ink-3); margin-top: 4px; white-space: nowrap;
}

/* ---------- ruled list (replaces card grids) ---------- */
.ruled { border-top: 1px solid var(--hairline); }
.ruled-row {
  display: grid; grid-template-columns: minmax(150px, 3fr) minmax(0, 9fr);
  gap: 26px; padding: 20px 0;
  border-bottom: 1px solid var(--hairline);
}
.ruled-row .rr-label {
  font-family: 'IBM Plex Mono', 'Plex Mono Fallback', monospace; font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
  padding-top: 3px;
}
.ruled-row .rr-label .no { color: var(--green); display: block; margin-bottom: 4px; }
.ruled-row h3 { margin-bottom: 6px; }
.ruled-row p { font-size: 0.97rem; }

/* ---------- pull quote (replaces dark band) ---------- */
.pullquote {
  border-top: 2px solid var(--rule-strong);
  border-bottom: 1px solid var(--hairline);
  padding: 44px 0 38px;
}
.pullquote blockquote {
  font-family: 'Newsreader', 'Newsreader Display Fallback', Georgia, serif; font-weight: 500; font-style: italic;
  font-size: clamp(1.7rem, 3.6vw, 2.7rem); line-height: 1.2; letter-spacing: -0.01em;
  color: var(--ink); max-width: 21em;
  font-variation-settings: 'opsz' 55;
}
.pullquote .attrib { margin-top: 18px; max-width: 46em; }

/* ---------- data tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--ink); background: var(--paper-card); }
table.data { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 540px; }
table.data th {
  text-align: left; font-family: 'IBM Plex Mono', 'Plex Mono Fallback', monospace; font-size: 0.66rem;
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-2); padding: 11px 16px; border-bottom: 1px solid var(--ink);
  background: var(--paper-deep); white-space: nowrap;
}
table.data td { padding: 11px 16px; border-bottom: 1px solid var(--hairline-soft); vertical-align: middle; color: var(--ink-2); }
table.data tr:last-child td { border-bottom: none; }
table.data td.num { font-family: 'IBM Plex Mono', 'Plex Mono Fallback', monospace; font-size: 0.84rem; font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); }
.vis-bar {
  display: inline-block; vertical-align: middle;
  width: 110px; height: 5px; background: var(--hairline-soft);
  overflow: hidden; margin-right: 10px;
}
.vis-bar span { display: block; height: 100%; background: var(--green); }
.rank-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 22px; padding: 0 6px;
  background: transparent; border: 1px solid var(--hairline);
  font-family: 'IBM Plex Mono', 'Plex Mono Fallback', monospace; font-size: 0.76rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
tr.top-1 .rank-chip, .ix-row.top-1 .rank-chip, .ix-lead-row.top-1 .rank-chip { background: var(--green); border-color: var(--green-deep); color: #F6FAF4; }

/* ---------- pricing: the rate card ---------- */
.billing-toggle {
  display: inline-flex; border: 1px solid var(--ink);
  background: var(--paper-card); margin: 10px 0 4px;
}
.billing-toggle button {
  border: none; background: transparent; padding: 9px 20px;
  font-family: 'Archivo', 'Archivo Fallback', sans-serif; font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-2); cursor: pointer;
}
.billing-toggle button + button { border-left: 1px solid var(--hairline); }
.billing-toggle button.active { background: var(--ink); color: var(--paper); }
.billing-toggle button:focus-visible { outline: 2px solid var(--green); outline-offset: -3px; }

.ratecard-wrap { overflow-x: auto; border: 1px solid var(--ink); background: var(--paper-card); }
table.ratecard { width: 100%; border-collapse: collapse; min-width: 720px; }
table.ratecard th, table.ratecard td { padding: 13px 18px; text-align: left; }
table.ratecard thead th {
  border-bottom: 1px solid var(--ink); vertical-align: top; padding-top: 20px; padding-bottom: 16px;
}
table.ratecard thead th.feature-col { width: 27%; }
table.ratecard .plan-name {
  font-family: 'IBM Plex Mono', 'Plex Mono Fallback', monospace; font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); display: block; margin-bottom: 8px;
}
table.ratecard .plan-price {
  font-family: 'Newsreader', 'Newsreader Fallback', Georgia, serif; font-weight: 500; font-size: 2.2rem;
  line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink);
  font-variation-settings: 'opsz' 44;
}
table.ratecard .plan-per { font-family: 'IBM Plex Mono', 'Plex Mono Fallback', monospace; font-size: 0.68rem; color: var(--ink-3); display: block; margin-top: 5px; letter-spacing: 0.04em; }
table.ratecard .plan-save { font-family: 'IBM Plex Mono', 'Plex Mono Fallback', monospace; font-size: 0.66rem; color: var(--green); display: block; margin-top: 3px; min-height: 1em; }
table.ratecard tbody th {
  font-family: 'Archivo', 'Archivo Fallback', sans-serif; font-size: 0.86rem; font-weight: 500; color: var(--ink-2);
  border-bottom: 1px solid var(--hairline-soft); text-align: left;
}
table.ratecard tbody td {
  font-family: 'IBM Plex Mono', 'Plex Mono Fallback', monospace; font-size: 0.82rem; color: var(--ink);
  border-bottom: 1px solid var(--hairline-soft); font-variant-numeric: tabular-nums;
}
table.ratecard tbody tr:last-child th, table.ratecard tbody tr:last-child td { border-bottom: none; }
table.ratecard .cta-row td { padding: 16px 18px 20px; border-bottom: none; }
table.ratecard .cta-row .btn { width: 100%; }
/* the recommended column — center-stage without the floating badge */
table.ratecard .rec { background: var(--green-wash); border-left: 1px solid var(--green); border-right: 1px solid var(--green); }
table.ratecard thead th.rec { border-top: 3px solid var(--green); padding-top: 17px; }
table.ratecard .rec-flag {
  font-family: 'IBM Plex Mono', 'Plex Mono Fallback', monospace; font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--green);
  display: block; margin-bottom: 6px;
}
.guarantee-note {
  display: flex; gap: 10px; align-items: baseline;
  margin-top: 16px; padding: 13px 16px;
  border: 1px solid var(--hairline); background: var(--paper-card);
  font-size: 0.9rem; color: var(--ink-2);
}
.guarantee-note .g-mark { font-family: 'IBM Plex Mono', 'Plex Mono Fallback', monospace; font-weight: 600; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); white-space: nowrap; }

/* ---------- notice (editorial-policy box) ---------- */
.notice {
  border: 1px solid var(--ink); background: var(--paper-card);
  padding: 26px 28px;
}
.notice .smallcaps { display: block; margin-bottom: 12px; color: var(--green); }
.notice p { font-size: 1rem; }

/* ---------- FAQ (ruled, no cards) ---------- */
.faq-list { border-top: 1px solid var(--hairline); }
details.faq-item { border-bottom: 1px solid var(--hairline); }
details.faq-item summary {
  cursor: pointer; list-style: none;
  font-family: 'Archivo', 'Archivo Fallback', sans-serif; font-weight: 600; font-size: 0.98rem;
  padding: 16px 34px 16px 0; position: relative; color: var(--ink);
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after {
  content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: 'IBM Plex Mono', 'Plex Mono Fallback', monospace; font-size: 1.05rem; color: var(--green);
}
details.faq-item[open] summary::after { content: '\2212'; }
details.faq-item summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
details.faq-item .faq-body { padding: 0 0 18px; color: var(--ink-2); font-size: 0.95rem; max-width: 62em; text-wrap: pretty; }   /* pretty: no single word left alone on an answer's last line (US158) */

/* ---------- checker result ---------- */
.check-hero { padding: 70px 0 40px; }
.check-hero .check-form { margin-top: 26px; }
.check-result { margin-top: 30px; }
.result-facts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); margin: 18px 0; }
.result-facts.four { grid-template-columns: repeat(4, 1fr); }   /* leading brands get a fourth tile (US158) */
.result-fact.good .v { color: var(--green-mid); }                     /* the shelves tile is green on every view, the absent-shortlists tile red (Matias, 2026-09-18) */
.result-fact.bad .v { color: var(--alarm); }
.result-fact { padding: 14px 16px 12px 0; margin-right: 16px; border-right: 1px solid var(--hairline-soft); }
.result-fact:last-child { border-right: none; margin-right: 0; }
.result-fact .v { font-family: 'Newsreader', 'Newsreader Display Fallback', Georgia, serif; font-weight: 500; font-size: 1.75rem; font-variant-numeric: tabular-nums; font-variation-settings: 'opsz' 40; }
.result-fact .k { font-family: 'IBM Plex Mono', 'Plex Mono Fallback', monospace; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-top: 3px; }
.result-headline { font-family: 'Newsreader', 'Newsreader Fallback', Georgia, serif; font-size: 1.4rem; line-height: 1.35; font-weight: 500; margin-bottom: 10px; font-variation-settings: 'opsz' 30; color: var(--ink); }
.locked-rows { margin: 16px 0; border: 1px dashed var(--hairline); }
.locked-row {
  display: flex; justify-content: space-between; gap: 14px; padding: 10px 14px;
  font-size: 0.88rem; color: var(--ink-3);
  border-bottom: 1px dashed var(--hairline-soft);
}
.locked-row:last-child { border-bottom: none; }
.locked-row .blurred { filter: blur(5px); user-select: none; font-family: 'IBM Plex Mono', 'Plex Mono Fallback', monospace; font-size: 0.8rem; }
.suggestions button {
  background: var(--paper-deep); border: 1px solid var(--hairline);
  padding: 6px 13px; margin: 6px 6px 0 0; cursor: pointer;
  font-family: 'Archivo', 'Archivo Fallback', sans-serif; font-size: 0.85rem; color: var(--ink);
}
.suggestions button:hover { border-color: var(--ink); }
.capture-line { display: flex; gap: 8px; margin-top: 14px; max-width: 460px; }
.capture-line input[type="email"] {
  flex: 1; min-width: 0; border: 1px solid var(--hairline); background: var(--paper-card);
  font-family: 'Archivo', 'Archivo Fallback', sans-serif; font-size: 0.9rem; color: var(--ink); padding: 10px 12px;
}
.capture-line input[type="email"]:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }

/* ---------- index page controls ---------- */
.index-controls { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 26px 0 16px; position: relative; z-index: 5; }
.index-controls select, .index-controls input[type="search"] {
  font-family: 'Archivo', 'Archivo Fallback', sans-serif; font-size: 0.95rem; font-weight: 500;
  padding: 11px 14px; border: 1px solid var(--ink); border-radius: 0;
  background: var(--paper-card); color: var(--ink); min-width: 230px;
}
.index-controls select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.index-controls select:focus-visible, .index-controls input:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.surface-tabs { display: flex; flex-wrap: wrap; border: 1px solid var(--hairline); width: fit-content; max-width: 100%; }
.surface-tabs button {
  border: none; border-right: 1px solid var(--hairline);
  background: var(--paper-card); color: var(--ink-2);
  font-family: 'IBM Plex Mono', 'Plex Mono Fallback', monospace; font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 8px 13px; cursor: pointer;
}
.surface-tabs button:last-child { border-right: none; }
.surface-tabs button:hover { color: var(--ink); }
.surface-tabs button.active { background: var(--ink); color: var(--paper); }
.surface-tabs button:focus-visible { outline: 2px solid var(--green); outline-offset: -3px; }
.cycle-flag {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--green); color: var(--green);
  font-family: 'IBM Plex Mono', 'Plex Mono Fallback', monospace; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 12px;
}

/* ---------- prose pages ---------- */
.prose { max-width: 700px; }
.prose h2 { font-family: 'Newsreader', 'Newsreader Fallback', Georgia, serif; font-weight: 500; font-size: 1.55rem; margin: 44px 0 12px; letter-spacing: -0.01em; }
.prose h2 .sec-no {
  font-family: 'IBM Plex Mono', 'Plex Mono Fallback', monospace; font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.14em; color: var(--green); display: block; margin-bottom: 6px;
}
.prose h3 { font-size: 1.05rem; margin: 26px 0 8px; }
.prose p { margin: 0 0 15px; }
.prose ul, .prose ol { margin: 0 0 15px 20px; color: var(--ink-2); }
.prose li { margin-bottom: 7px; }
.prose .callout {
  border: 1px solid var(--hairline); border-left: 3px solid var(--green);
  background: var(--paper-card); padding: 15px 19px; margin: 20px 0;
}
.prose .callout p { margin: 0; }
code.inline {
  font-family: 'IBM Plex Mono', 'Plex Mono Fallback', monospace; font-size: 0.85em;
  background: var(--paper-deep); padding: 2px 6px;
}

/* ---------- modal (placeholder checkout) ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(20, 16, 11, 0.5); z-index: 300;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal { background: var(--paper); border: 1px solid var(--ink); padding: 30px; max-width: 440px; }
.modal h3 { font-family: 'Newsreader', 'Newsreader Fallback', Georgia, serif; font-weight: 500; font-size: 1.4rem; margin-bottom: 10px; }
.modal p { font-size: 0.94rem; margin-bottom: 18px; }

/* ---------- footer: the colophon ---------- */
.colophon {
  margin-top: 56px;
  border-top: 2px solid var(--rule-strong);
  padding: 36px 0 30px;
  font-size: 0.88rem; color: var(--ink-2);
}
.colophon-grid { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: 34px; }
.colophon h4 {
  font-family: 'IBM Plex Mono', 'Plex Mono Fallback', monospace; font-size: 0.64rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; font-weight: 600;
}
.colophon ul { list-style: none; }
.colophon li { margin-bottom: 7px; }
.colophon a { color: var(--ink-2); text-decoration: none; }
.colophon a:hover { color: var(--ink); text-decoration: underline; }
.colophon .wordmark { margin-bottom: 12px; }
.colophon-bottom {
  margin-top: 30px; padding-top: 14px; border-top: 1px solid var(--hairline);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: 'IBM Plex Mono', 'Plex Mono Fallback', monospace; font-size: 0.66rem; letter-spacing: 0.04em; color: var(--ink-3);
}

/* ---------- utilities ---------- */
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 28px; }
.mt-4 { margin-top: 44px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 28px; }
.muted { color: var(--ink-3); }
.small { font-size: 0.86rem; }
.flex-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.reveal { animation: settle 0.5s ease backwards; }

/* ---------- responsive ---------- */
@media (max-width: 940px) {
  .cols-7-5, .cols-5-7, .cols-8-4, .cols-4-8 { grid-template-columns: minmax(0, 1fr); }
  .figures { grid-template-columns: 1fr 1fr; }
  .figures .figures-link { grid-column: 1 / -1; padding-right: 0; }
  .figures > div { border-right: none; padding: 14px 0 12px; }
  .colophon-grid { grid-template-columns: 1fr 1fr; }
  .ruled-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 18px 0; }
}
/* The menu folds into the three-line button below 880px (US158, 2026-09-17). It used to wait until 680px, but the full menu
   only fits from about 820px: between the two, the Public Index chip broke onto two lines (an iPad held upright) and under
   740px the gold button ran off the screen. 880 leaves room for a longer first label. To go back: change 880 to 680 here
   and 881 to 681 in the header-button block near the top. */
@media (max-width: 880px) {
  .site-nav {
    display: none; position: absolute; top: 62px; left: 0; right: 0;
    background: var(--paper); border-bottom: 2px solid var(--rule-strong);
    flex-direction: column; padding: 18px 28px 22px; gap: 16px; align-items: flex-start;
    margin-left: 0; flex: none;
  }
  .site-nav.open { display: flex; }
  .site-nav .btn { margin-left: 0; }
  .nav-burger { display: inline-flex; align-items: center; justify-content: center; }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .section { padding: 54px 0; }
  .hero { padding: 44px 0 40px; }
  .check-form { flex-direction: column; }
  .check-form .btn { border-left: none; border-top: 1px solid var(--ink); padding: 14px; }
  .result-facts, .result-facts.four { grid-template-columns: 1fr; }
  .result-fact { border-right: none; margin-right: 0; padding: 10px 0; border-bottom: 1px solid var(--hairline-soft); }
  .result-fact:last-child { border-bottom: none; }
  .colophon-grid { grid-template-columns: 1fr; }
  .capture-line { flex-direction: column; }
}

/* ---------- pricing: the two launch cards (2026-09-05, US82) ---------- */
.draft-banner {
  background: #FBEFD9; color: #6B3F00; border-bottom: 1px solid #E0B46A;
  font-family: 'IBM Plex Mono', 'Plex Mono Fallback', monospace; font-size: 0.72rem; letter-spacing: 0.04em;
  padding: 8px 20px; text-align: center;
}
.ph {
  display: inline-block; font-family: 'IBM Plex Mono', 'Plex Mono Fallback', monospace; font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: #6B3F00; background: #FBEFD9;
  border: 1px solid #E0B46A; border-radius: 999px; padding: 1px 8px; margin-left: 6px; vertical-align: middle;
}
.offer-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; align-items: stretch; }
.offer-card {
  border: 1px solid var(--ink); background: var(--paper-card); padding: 26px 28px 24px;
  display: flex; flex-direction: column;
}
.offer-card.rec { border-top: 3px solid var(--green); background: var(--green-wash); }
.offer-badge {
  font-family: 'IBM Plex Mono', 'Plex Mono Fallback', monospace; font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); margin-bottom: 12px;
}
.offer-price {
  font-family: 'Newsreader', 'Newsreader Display Fallback', Georgia, serif; font-weight: 500; font-size: 2.6rem; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--ink); font-variation-settings: 'opsz' 44;
}
.offer-price small { font-family: 'IBM Plex Mono', 'Plex Mono Fallback', monospace; font-size: 0.7rem; font-weight: 400; letter-spacing: 0.04em; color: var(--ink-3); margin-left: 6px; }
.offer-name { font-family: 'Newsreader', 'Newsreader Fallback', Georgia, serif; font-weight: 600; font-size: 1.45rem; margin: 10px 0 6px; line-height: 1.15; }
.offer-lead { font-family: 'Newsreader', 'Newsreader Fallback', Georgia, serif; font-size: 1.06rem; line-height: 1.5; color: var(--ink-2); margin: 0 0 14px; }
.offer-list { list-style: none; margin: 0 0 14px; padding: 0; border-top: 1px solid var(--hairline); }
.offer-list li {
  font-family: 'Archivo', 'Archivo Fallback', sans-serif; font-size: 0.9rem; line-height: 1.5; color: var(--ink);
  padding: 10px 0; border-bottom: 1px solid var(--hairline-soft);
}
ol.offer-list { counter-reset: offer; }
ol.offer-list li { padding-left: 28px; position: relative; }
ol.offer-list li::before {
  counter-increment: offer; content: counter(offer);
  position: absolute; left: 0; top: 11px;
  font-family: 'IBM Plex Mono', 'Plex Mono Fallback', monospace; font-size: 0.7rem; font-weight: 600; color: var(--green);
}
.offer-guarantee {
  font-family: 'Newsreader', 'Newsreader Fallback', Georgia, serif; font-style: italic; font-size: 1.02rem; color: var(--ink);
  border-left: 3px solid var(--green); padding: 4px 12px; margin: 4px 0 16px;
}
.offer-cta { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.offer-cta .btn { min-width: 170px; text-align: center; }
.offer-next { font-family: 'IBM Plex Mono', 'Plex Mono Fallback', monospace; font-size: 0.68rem; color: var(--ink-3); letter-spacing: 0.03em; }
.offer-cards-teaser .offer-card { padding: 22px 24px 20px; }
.offer-cards-teaser .offer-lead { font-size: 0.98rem; }

/* ---------- about: the founder block (2026-09-05, US82) ---------- */
.founder { margin: 8px 0 15px; }
.founder::after { content: ""; display: block; clear: both; }
.founder-photo { float: left; width: 220px; margin: 6px 30px 8px 0; }
.founder-photo img { display: block; width: 100%; height: auto; background: var(--paper-card); }
.founder-photo figcaption { font-family: 'IBM Plex Mono', 'Plex Mono Fallback', monospace; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-top: 8px; }
.founder-note p { margin: 0 0 14px; }
.founder-note p:last-child { margin-bottom: 0; }
@media (max-width: 640px) { .founder-photo { float: none; width: 100%; max-width: 240px; margin: 0 0 16px; } }

/* ---------- pricing: the founder's note beside the cards (2026-09-05, US103; Matias: yes to the byline and the note) ---------- */
.founder-aside { display: flex; gap: 20px; align-items: flex-start; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--hairline); }
.founder-aside img { width: 72px; height: auto; flex: none; border: 1px solid var(--ink); background: var(--paper-card); }
.founder-aside p { margin: 0 0 8px; max-width: 58em; }
.founder-aside .smallcaps { display: block; margin-bottom: 6px; }
.founder-aside .mono { font-size: 0.7rem; color: var(--ink-3); }
@media (max-width: 640px) { .founder-aside { gap: 14px; } .founder-aside img { width: 56px; } }

/* the logo mark (US118, 2026-09-09): the bottles-on-a-shelf SVG in place of the inline bars */
.wordmark img.mark { display:block; height:26px; width:auto; }
.colophon .wordmark img.mark { height:22px; }

/* ---------- the press line (US150, 2026-09-14): one quoted sentence from a named outlet. No box, no logo wall. ---------- */
/* AS FEATURED IN (US161): the outlets that have covered us, every logo in one green and a link to its article.
   The link carries the green and the logo as a mask; the <img> inside is transparent (it sizes the link and keeps the alt text).
   The homepage sets the logos inside the hero (.press-hero, in index.html); the pricing page uses the centered .press-band. */
.press-label { font-family: 'IBM Plex Mono', 'Plex Mono Fallback', monospace; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.press-logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.press-logos li { display: block; }
.press-logos a { display: block; background: var(--green); opacity: 0.78; -webkit-mask: var(--m) no-repeat center / contain; mask: var(--m) no-repeat center / contain; }
.press-logos a:hover { opacity: 1; }
.press-logos a img { display: block; width: auto; opacity: 0; }
.press-logos a.nh { --m: url("/img/press/new-hope-network.svg"); } .press-logos a.nh img { height: 38px; }
.press-logos a.ni { --m: url("/img/press/nutraingredients.svg"); } .press-logos a.ni img { height: 28px; }
.press-logos a.vr { --m: url("/img/press/vitamin-retailer-mask.png"); opacity: 0.64; } .press-logos a.vr img { height: 26px; }
.press-logos a.nw { --m: url("/img/press/nutraceuticals-world-mask.png"); } .press-logos a.nw img { height: 19px; }   /* the fourth outlet (2026-09-20): a long name, so a little shorter than the others */   /* a heavy face: a touch lighter so it weighs the same as the other two */
.press-band { border-top: 1px solid var(--hairline); padding: 26px 0 28px; }
.press-band-inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 30px; }
.press-band .press-logos { justify-content: center; }
.press-band .press-logos a { opacity: 1; }   /* the strip shows the logos in the full green (Matias, 2026-09-20: "richer"); the hover-only full green stays for other placements */
.press-band .press-logos a.vr { opacity: 0.88; }
@media (max-width: 600px) { .press-logos { gap: 10px 20px; } .press-logos a.nh img { height: 30px; } .press-logos a.ni img { height: 23px; } .press-logos a.vr img { height: 22px; } .press-logos a.nw img { height: 17px; } .press-band { padding: 22px 0 24px; } }

.press-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--hairline); }
.press-list li { padding: 14px 0; border-bottom: 1px solid var(--hairline); display: grid; grid-template-columns: 10em 1fr; gap: 12px 20px; align-items: baseline; }
.press-list .when { font-family: 'IBM Plex Mono', 'Plex Mono Fallback', monospace; font-size: 0.74rem; color: var(--ink-3); }
.press-list .outlet { display: block; font-weight: 600; }
.press-list a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) { .press-list li { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- the brand checker, rebuilt (US151, 2026-09-14) ---------- */
.check-form.has-ac { position: relative; }
.check-ac { position: absolute; left: -1px; right: -1px; top: 100%; z-index: 30; margin: 0; padding: 0; list-style: none;
  background: var(--paper-card); border: 1px solid var(--ink); border-top: none; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.check-ac li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 14px; cursor: pointer;
  border-bottom: 1px solid var(--hairline-soft); font-family: 'Archivo', 'Archivo Fallback', sans-serif; font-size: 0.95rem; }
.check-ac li:last-child { border-bottom: none; }
.check-ac li.sel, .check-ac li:hover { background: var(--paper); }
.check-ac li .s { font-size: 0.68rem; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; }
.alias-note { margin: 0 0 10px; color: var(--ink-3); }
.result-more .k, .audit-adds .k, .shelf-pick .k { font-family: 'IBM Plex Mono', 'Plex Mono Fallback', monospace; font-size: 0.62rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3); margin: 14px 0 6px; }
.result-more .k:first-child { margin-top: 0; }
.result-more p.small { margin: 0 0 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-family: 'IBM Plex Mono', 'Plex Mono Fallback', monospace; font-size: 0.72rem; padding: 3px 9px; border: 1px solid var(--hairline); border-radius: 2px; }
/* Every assistant shows, with a green tick or a red cross (Matias, 2026-09-18, US158): all seven or none of them is plain to see. */
.chip .mark { display: inline-block; vertical-align: -2px; margin-right: 7px; }
.chip.on { background: var(--green-soft, #e7efe9); border-color: var(--green); color: var(--ink); }
.chip.on .mark { color: var(--green); }
.chip.off { border-color: var(--alarm); color: var(--ink-3); }
.chip.off .mark { color: var(--alarm); }
.audit-adds { margin: 16px 0; border-top: 1px solid var(--hairline); padding-top: 4px; }
.audit-adds ul { margin: 0; padding-left: 1.2em; }
.audit-adds li { margin: 3px 0; }
.shelf-pick { display: block; margin-top: 8px; }
.shelf-pick select { display: block; width: 100%; max-width: 420px; padding: 9px 12px; font-family: 'Archivo', 'Archivo Fallback', sans-serif; font-size: 0.95rem;
  border: 1px solid var(--ink); background: var(--paper-card); color: var(--ink); border-radius: 0; }
.shelf-top5 { margin: 6px 0 8px; padding-left: 1.4em; font-family: 'Newsreader', 'Newsreader Fallback', Georgia, serif; font-size: 1.1rem; }
.shelf-top5 li { margin: 2px 0; }
.shelf-top5 li.you { font-weight: 600; }
.muted { color: var(--ink-3); }
.check-result .flex-row .btn { white-space: normal; text-align: center; max-width: 100%; }
@media (max-width: 640px) {
  .check-result .flex-row { flex-direction: column; align-items: stretch; }
  .check-result .flex-row .btn { width: 100%; }
}
/* the not-recommended verdict: a plain warning band, white on the palette's alarm red (negative data, not decoration) */
.panel-head.alarm { background: var(--alarm); color: #FFFFFF; border-bottom-color: var(--alarm); }
.panel-head.alarm .t { color: #FFFFFF; }
.check-result .flex-row.flex-end { justify-content: flex-end; }