/* TheLowPrice Sales Floor — the "Shelf tag" design (approved 2026-09-27).
   Tokens first, then components, then pages. Page-specific rules live here too, grouped, so
   the design system is one file to read. Light only at launch; dark mode is a later change. */

:root {
  --paper: #F6F4EF;       /* ground */
  --card: #FFFFFF;
  --ink: #15171C;         /* text, primary buttons */
  --ink-2: #4A4F5A;       /* secondary text */
  --ink-3: #62666F;       /* captions — 5:1 on paper */
  --line: #E4E0D6;
  --line-2: #EEEAE2;
  --field: #D8D3C8;
  --tag: #FFD84D;         /* the shelf tag */
  --good: #0E6B45;        /* green only ever means a good price */
  --good-bg: #E3F2EA;
  --wait: #8A4B00;        /* amber means wait */
  --wait-bg: #FFF1DB;
  --img: #EDEAE3;
  --radius: 14px;
  --radius-lg: 18px;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Instrument Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --wrap: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.5 var(--body); }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--good); }
img { max-width: 100%; display: block; }
button, input, select { font: inherit; }
:focus-visible { outline: 3px solid var(--good); outline-offset: 2px; border-radius: 6px; }

.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eyebrow { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.mono { font-family: var(--mono); }
.muted { color: var(--ink-3); }
.h1 { margin: 0; font: 800 52px/1.05 var(--display); letter-spacing: -.03em; }
.h2 { margin: 0; font: 700 30px/1.15 var(--display); letter-spacing: -.02em; }
.h3 { margin: 0; font: 700 22px/1.2 var(--display); letter-spacing: -.015em; }
.lede { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink-2); max-width: 820px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); }

/* ── Header ─────────────────────────────────────────────────────────────── */
.hdr { background: var(--card); border-bottom: 1px solid var(--line); }
.hdr-row { height: 76px; display: flex; align-items: center; gap: 32px; }
.logo { display: flex; align-items: center; gap: 10px; font: 800 22px var(--display); letter-spacing: -.02em; white-space: nowrap; }
.logo small { font-weight: 600; color: var(--ink-3); font-size: inherit; }
.logo:hover { color: var(--ink); }
.search { flex-grow: 1; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px; border: 1.5px solid var(--field); border-radius: 999px; background: #FBFAF7; }
.search:focus-within { border-color: var(--ink); }
.search input { border: 0; background: transparent; font: 500 16px var(--body); flex-grow: 1; min-width: 0; color: var(--ink); outline: none; }
.nav { display: flex; gap: 26px; font-weight: 600; font-size: 15px; }
.nav a { padding: 12px 0; white-space: nowrap; }
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
/* Between the phone layout and a full desktop window the five header items do not fit beside the
   search box: measured 2026-10-16 at 870px the row was 192px too wide and the page scrolled sideways.
   "How we judge prices" is the longest and is in the footer on every page, so it goes first. */
@media (max-width: 1100px) { .nav .nav-wide { display: none; } }
.menu-btn { display: none; }
.chips { display: none; }

/* ── Tags, evidence, buttons ────────────────────────────────────────────── */
.tag { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; height: 28px; padding: 0 10px 0 18px; background: var(--tag); color: var(--ink); font: 700 14px var(--display); clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%); }
.tag::before { content: ""; position: absolute; left: 8px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: #FFFFFF; }
.deal-tag { position: absolute; top: 12px; right: 12px; height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 6px; background: #CC0C39; color: #FFFFFF; font-weight: 600; font-size: 12px; }
.ev { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--good); }
.ev::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.ev.wait { color: var(--wait); }
.pill { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pill.good { background: var(--good-bg); color: var(--good); }
.pill.wait { background: var(--wait-bg); color: var(--wait); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font-weight: 700; font-size: 15px; cursor: pointer; }
.btn:hover { background: var(--ink); color: #FFFFFF; }
.btn-primary { background: var(--ink); color: #FFFFFF; }
.btn-primary:hover { background: #2B2E36; color: #FFFFFF; }
.btn-big { min-height: 60px; font-size: 18px; width: 100%; }
.more { font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; padding: 10px 0; white-space: nowrap; }

/* ── Product card ───────────────────────────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.card { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.card:hover { border-color: var(--ink); color: var(--ink); }
.card-img { height: 190px; background: #FFFFFF; display: flex; align-items: center; justify-content: center; padding: 16px; border-bottom: 1px solid var(--line-2); }
.card-img img { max-height: 100%; width: auto; object-fit: contain; }
.card-img .ph { width: 100%; height: 100%; background: var(--img); border-radius: 8px; }
.card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex-grow: 1; }
.brand { font-weight: 600; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.card-title { font-weight: 600; font-size: 15px; line-height: 1.35; height: 40px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.prices { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.now { font: 700 26px var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.was { font-size: 14px; color: var(--ink-3); text-decoration: line-through; }
.store { font: 400 12px var(--mono); color: var(--ink-3); margin-top: auto; padding-top: 2px; }
.oos { font-weight: 600; font-size: 13px; color: var(--ink-3); }

/* ── Sections ───────────────────────────────────────────────────────────── */
.section { display: flex; flex-direction: column; gap: 20px; padding-bottom: 56px; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.section-head .sub { color: var(--ink-2); font-size: 15px; margin-top: 6px; }

/* ── Home ───────────────────────────────────────────────────────────────── */
.hero { display: grid; grid-template-columns: 1fr 460px; gap: 56px; padding: 64px 0 40px; align-items: center; }
.hero h1 { margin: 0; font: 800 68px/1.02 var(--display); letter-spacing: -.035em; }
.hero h1 mark { background: linear-gradient(transparent 58%, var(--tag) 58%); color: inherit; }
.hero p { margin: 0; font-size: 20px; line-height: 1.5; color: var(--ink-2); max-width: 620px; }
.hero-stats { display: flex; gap: 28px; font: 400 14px var(--mono); color: var(--ink-2); flex-wrap: wrap; }
.hero-stats strong { color: var(--ink); }
.proof { display: flex; flex-direction: column; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; }
.proof:hover { border-color: var(--ink); color: var(--ink); }
.legend { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 48px; }
.legend .eyebrow { white-space: nowrap; }
.endcap { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; background: var(--ink); color: #FFFFFF; border-radius: var(--radius-lg); padding: 32px 40px; }
.endcap:hover { color: #FFFFFF; }
.endcap .t { font: 800 36px var(--display); letter-spacing: -.02em; }
.endcap .d { color: #C9C5BC; font-size: 16px; }
.endcap .go { display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px; border-radius: 999px; background: var(--tag); color: var(--ink); font-weight: 700; }
.coll { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.coll:hover { border-color: var(--ink); color: var(--ink); }
.coll .strip { height: 92px; background: var(--img); display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px; }
.coll .strip img { height: 68px; width: 68px; object-fit: contain; background: #FFFFFF; border-radius: 8px; padding: 4px; }
.coll .cb { padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.coll .name { font: 700 18px var(--display); }
.coll .count { font: 500 12px var(--mono); color: var(--ink-3); white-space: nowrap; }

/* ── Listing pages ──────────────────────────────────────────────────────── */
.page-head { padding: 44px 0 0; display: flex; flex-direction: column; gap: 18px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs a { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 18px; font-weight: 600; font-size: 16px; color: var(--ink-2); border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.tabs .n { font: 500 12px var(--mono); color: var(--ink-3); }
.filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0 4px; }
.filters select { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--field); background: var(--card); font-weight: 600; font-size: 16px; color: var(--ink); }
.filters label { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); }
.filters .push { margin-left: auto; }
.chip-on { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--ink); color: #FFFFFF; font-weight: 600; font-size: 14px; }
.chip-on:hover { color: var(--tag); }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--field); background: var(--card); font-weight: 600; font-size: 14px; }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.pager { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 40px 0 0; }
.empty { padding: 48px; text-align: center; color: var(--ink-2); }
.js .sort-go { display: none; }
.index-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.index-list a { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 52px; padding: 0 18px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; font-weight: 600; }
.index-list a:hover { border-color: var(--ink); color: var(--ink); }

/* ── Product page ───────────────────────────────────────────────────────── */
.crumbs { padding: 22px 0; font-size: 14px; color: var(--ink-3); display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a { color: var(--ink-3); }
.pdp { display: grid; grid-template-columns: 520px 1fr; gap: 48px; align-items: start; }
.pdp-img { height: 520px; border-radius: var(--radius-lg); background: #FFFFFF; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; padding: 32px; }
.pdp-img img { max-height: 100%; width: auto; object-fit: contain; }
.pdp-img .ph { width: 100%; height: 100%; background: var(--img); border-radius: 12px; }
.pdp-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.pdp-title { margin: 0; font: 700 40px/1.1 var(--display); letter-spacing: -.025em; }
.verdict { display: flex; align-items: center; gap: 14px; border-radius: var(--radius); padding: 16px 20px; }
.verdict.good { background: var(--good-bg); color: var(--good); }
.verdict.wait { background: var(--wait-bg); color: var(--wait); }
.verdict.neutral { background: var(--line-2); color: var(--ink); }
.verdict.poor { background: var(--wait-bg); color: var(--wait); }
.verdict strong { display: block; font-size: 18px; }
.verdict span { font-size: 15px; }
.pdp-price { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.pdp-price .big { font: 800 72px/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pdp-price .side { display: flex; flex-direction: column; gap: 2px; font-size: 16px; color: var(--ink-2); }
.small-print { font: 400 13px var(--mono); color: var(--ink-3); margin-top: -10px; }
.stores { padding: 20px 24px 8px; }
.store-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr auto; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line-2); font-size: 15px; }
.store-row .p { font: 700 18px var(--display); }
.in { color: var(--good); font-weight: 600; }
.out { color: var(--ink-3); font-weight: 600; }
.history { margin-top: 48px; padding: 32px 36px; display: flex; flex-direction: column; gap: 24px; }
.figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.fig { display: flex; flex-direction: column; gap: 4px; }
.fig .k { font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.fig .v { font: 700 26px var(--display); font-variant-numeric: tabular-nums; }
.fig .s { font-size: 13px; color: var(--ink-2); }
.chart { width: 100%; height: auto; }
.note { display: flex; gap: 14px; align-items: flex-start; border-radius: var(--radius); padding: 18px 22px; }
.note b { white-space: nowrap; }
.note.good { background: var(--good-bg); } .note.good b { color: var(--good); }
.note.wait { background: var(--wait-bg); } .note.wait b { color: var(--wait); }
.note.poor { background: var(--line-2); }
.two { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; margin-top: 24px; }
.two > .panel { padding: 28px 32px; display: flex; flex-direction: column; gap: 14px; }
.about ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.about details summary { font-weight: 600; cursor: pointer; padding: 8px 0; }
.about details p { color: var(--ink-2); font-size: 15px; }
.dl { display: grid; grid-template-columns: 160px 1fr; row-gap: 12px; column-gap: 16px; font-size: 15px; margin: 0; }
.dl dt { color: var(--ink-3); } .dl dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.dl a { text-decoration: underline; }
.buybar { display: none; }

/* Several stores: the spread under the buy button, then every store compared, cheapest first. */
.pdp-price .side .at { color: var(--ink); font-weight: 600; }
.spread { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.spread-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.spread-head .h3 { font-size: 20px; }
.track { position: relative; height: 10px; margin: 8px 10px; border-radius: 999px; background: var(--line); }
.track .gap { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--good-bg); }
.track .dot { position: absolute; top: 50%; width: 16px; height: 16px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--card); border: 2.5px solid var(--ink); box-sizing: border-box; }
.track .dot.lo { width: 20px; height: 20px; background: var(--good); border: 3px solid var(--card); box-shadow: 0 0 0 1px var(--good); }
.ends { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--ink-2); }
.ends span:last-child { text-align: right; }
.ends b { display: block; font: 700 17px var(--display); color: var(--ink); }
.ends .lo b { color: var(--good); }
.compare { margin-top: 48px; padding: 28px 36px 20px; display: flex; flex-direction: column; gap: 16px; }
.compare-head { display: flex; flex-direction: column; gap: 4px; }
.compare-head .muted { font-size: 15px; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.compare-table thead th { text-align: left; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 0 12px 12px 0; }
.compare-table tbody th, .compare-table td { border-top: 1px solid var(--line-2); padding: 16px 12px 16px 0; vertical-align: middle; text-align: left; }
.compare-table tbody th { font-weight: 700; padding-left: 12px; }
.compare-table tr.cheapest { background: #F3FAF6; }
.compare-table .p { font: 700 20px var(--display); font-variant-numeric: tabular-nums; }
.compare-table tr.cheapest .p { color: var(--good); }
.compare-table .sub { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.compare-table .sub.good { color: var(--good); font-weight: 600; }
.compare-table .sub.wait { color: var(--wait); font-weight: 600; }
.compare-table td:last-child { text-align: right; white-space: nowrap; }
.compare-table td.mono { font-size: 13px; white-space: nowrap; }
.compare-table tr.group th { padding: 22px 0 8px; border-top: 0; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.compare-table .sub.cond { color: var(--ink-2); font-weight: 600; }
.compare-note { margin: 0; padding-top: 14px; border-top: 1px solid var(--line-2); font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.request-form { display: flex; flex-direction: column; gap: 14px; margin: 18px 0 10px; max-width: 620px; }
.request-form label { display: flex; flex-direction: column; gap: 6px; }
.request-form input { min-height: 48px; padding: 0 14px; border: 1.5px solid var(--field); border-radius: 12px; background: var(--card); font: 500 16px var(--body); color: var(--ink); }
.request-form input:focus { border-color: var(--ink); outline: none; }
.request-form .btn { align-self: flex-start; }
.request .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.request .note { margin: 0 0 24px; }
.ad-slot { margin-top: 24px; display: flex; flex-direction: column; gap: 6px; }
.ad-slot .eyebrow { font-size: 11px; }
.ad-slot ins { min-height: 120px; }
.chart-key { display: flex; gap: 24px; flex-wrap: wrap; font-size: 14px; color: var(--ink-2); }
.chart-key span { display: flex; align-items: center; gap: 8px; }

/* ── Prose (static pages) ───────────────────────────────────────────────── */
.prose { max-width: 760px; padding: 44px 0 72px; font-size: 17px; line-height: 1.65; }
.prose h1 { margin: 0 0 18px; font: 800 44px/1.1 var(--display); letter-spacing: -.03em; }
.prose h2 { margin: 36px 0 10px; font: 700 26px var(--display); letter-spacing: -.015em; }
.prose p, .prose li { color: var(--ink-2); }
.prose a { text-decoration: underline; color: var(--ink); }
.bands { display: flex; flex-direction: column; gap: 12px; padding: 0; list-style: none; }
.bands li { display: flex; gap: 14px; align-items: baseline; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; }
.bands b { min-width: 170px; color: var(--ink); }

/* ── Price alert (product page, when signups are on) ────────────────────── */
.alert-box { margin-top: 24px; padding: 22px 28px; display: flex; flex-direction: column; gap: 16px; }
.alert-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.alert-form label { display: flex; flex-direction: column; gap: 6px; flex: 1 1 200px; }
/* 16px, never less: below it iOS Safari zooms the page on focus and never zooms back. */
.alert-form input { min-height: 44px; padding: 0 14px; border: 1px solid var(--field); border-radius: 10px; background: var(--card); font-size: 16px; }
.alert-form .btn { min-height: 44px; }

/* ── Banner endcap (an Owner's promotion, from the Endcaps table) ───────── */
.endcap.banner { grid-template-columns: minmax(0, 280px) 1fr auto; }
.endcap.banner:not(:has(.art)) { grid-template-columns: 1fr auto; }
.endcap .art img { width: 100%; max-height: 180px; object-fit: contain; border-radius: 10px; }
.endcap .art.crop img { aspect-ratio: 16 / 9; object-fit: cover; }
.endcap .fine { color: #A7A39A; font-size: 13px; }

/* ── Sign in ────────────────────────────────────────────────────────────── */
.login-box { max-width: 420px; margin: 0 auto; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-form label, .office-form label { display: flex; flex-direction: column; gap: 6px; }
.office-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--field); border-radius: 10px; background: var(--card); font: 16px/1.5 var(--body); resize: vertical; }
.office-form select { min-height: 44px; padding: 0 10px; border: 1px solid var(--field); border-radius: 10px; background: var(--card); font-size: 16px; }
.login-form input, .office-form input, .token-box input {
  min-height: 44px; padding: 0 12px; border: 1px solid var(--field); border-radius: 10px; background: var(--card); font-size: 16px; }

/* ── Manager's Office ───────────────────────────────────────────────────── */
/* The same tokens as the Sales Floor; a dark bar so an admin screen is never mistaken for the shop. */
.office-bar { background: var(--ink); color: #FFFFFF; }
.office-row { display: flex; align-items: center; gap: 24px; min-height: 60px; flex-wrap: wrap; padding: 8px 0; }
.office-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.office-navrow { display: flex; gap: 2px; flex-wrap: wrap; align-items: center; }
.office-nav a { color: #C9C5BC; padding: 6px 10px; border-radius: 8px; font-size: 15px; }
.office-nav a:hover { color: #FFFFFF; }
.office-nav a[aria-current="page"] { background: #2E3139; color: #FFFFFF; }
.office-group { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #8A8E97; width: 104px; flex: 0 0 auto; }
.office-me { display: flex; align-items: center; gap: 14px; font-size: 14px; }
.office-me .btn { min-height: 34px; background: transparent; color: #FFFFFF; border-color: #6B6F78; }
.office-me .btn:hover { border-color: #FFFFFF; color: #FFFFFF; }
.office-main { padding: 32px 0 72px; display: flex; flex-direction: column; gap: 18px; }
.office-section { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.office-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.office-tiles .tile { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.office-tiles a.tile:hover { border-color: var(--ink); color: var(--ink); }
.office-tiles .tile.warn { background: var(--wait-bg); border-color: #F0D9B0; }
.office-tiles .k { font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.office-tiles .v { font: 800 30px var(--display); }
.office-tiles .v small { font: 500 15px var(--body); color: var(--ink-3); }
.office-tiles .v.small { font-size: 18px; }
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.office-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.office-table th { text-align: left; font: 500 12px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3);
  padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.office-table td { padding: 10px 14px; border-top: 1px solid var(--line-2); vertical-align: top; }
.office-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.office-table .actions { text-align: right; white-space: nowrap; }
.office-table .actions .btn { min-height: 34px; margin-left: 6px; }
.nowrap { white-space: nowrap; }
.warn-text { color: var(--wait); font-weight: 700; }
.pill-s { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--line-2); color: var(--ink-2); margin-right: 4px; }
.pill-s.ok { background: var(--good-bg); color: var(--good); }
.pill-s.warn { background: var(--wait-bg); color: var(--wait); }
.pill-s.bad { background: #FBE3E6; color: #9B1C2E; }
.office-card { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.office-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.office-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.office-form label { flex: 0 1 170px; }
.office-form .btn { min-height: 44px; }
.office-history { margin: 0; padding: 10px 0 0; list-style: none; border-top: 1px solid var(--line-2); font-size: 13px; color: var(--ink-2); display: flex; flex-direction: column; gap: 4px; }
.office-dl { display: grid; grid-template-columns: 140px 1fr; gap: 6px 16px; margin: 0; font-size: 15px; }
.office-dl dt { color: var(--ink-3); }
.office-dl dd { margin: 0; }
.office-filter { display: flex; gap: 8px; flex-wrap: wrap; }
.token-box { padding: 18px 20px; border-color: var(--tag); background: #FFF8D6; }
.token-box input { width: 100%; font-size: 15px; }
.facet-input { min-height: 34px; padding: 0 8px; border: 1px solid var(--field); border-radius: 8px; font-size: 16px; width: 150px; }

/* ── Article body (blog posts; also the editor's preview) ─────────────── */
.post-body { font-size: 18px; line-height: 1.72; }
.post-body p { margin: 0 0 1.1em; color: var(--ink-2); }
.post-body > p:first-child { color: var(--ink); font-size: 19px; }
.post-body h2 { margin: 2.4em 0 .5em; font: 700 28px/1.2 var(--display); letter-spacing: -.015em; }
.post-body h3 { margin: 2em 0 .45em; font: 700 23px/1.25 var(--display); letter-spacing: -.01em; }
.post-body h4 { margin: 1.6em 0 .35em; font: 700 19px/1.3 var(--display); }
.post-body h2:first-child, .post-body h3:first-child, .post-body h4:first-child { margin-top: 0; }
.post-body ul, .post-body ol { margin: 0 0 1.1em; padding-left: 1.3em; color: var(--ink-2); }
.post-body li { margin-bottom: .45em; }
.post-body blockquote { margin: 1.6em 0; padding: 2px 0 2px 18px; border-left: 4px solid var(--tag); font-size: 19px; }
.post-body blockquote p { color: var(--ink); }
.post-body a { text-decoration: underline; text-underline-offset: .18em; }
.post-body strong { color: var(--ink); font-weight: 650; }
.post-body code { font: 500 .88em var(--mono); background: var(--line-2); padding: 1px 6px; border-radius: 5px; }
.post-body hr { border: 0; height: 1px; background: var(--line); width: 40%; margin: 2.6em auto; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.ftr { background: var(--ink); color: #E9E6DF; margin-top: 72px; }
.ftr a { color: #E9E6DF; } .ftr a:hover { color: var(--tag); }
.ftr-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding: 56px 0 40px; }
.ftr h4 { font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #A7A39A; margin: 0 0 12px; }
.ftr ul { margin: 0; padding: 0; list-style: none; }
.ftr li { margin: 0 0 4px; } .ftr li a { display: inline-block; padding: 6px 0; font-size: 15px; }
.ftr .blurb { margin: 0; color: #A7A39A; font-size: 14px; line-height: 1.55; max-width: 320px; }
.ftr .ftr-tagline { margin: 0; color: #FFFFFF; font: 700 18px/1.3 var(--display); letter-spacing: -.01em; }
.ftr-sub { display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.ftr-sub div { display: flex; gap: 8px; }
.ftr-sub input { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; font-size: 16px; }
.ftr-sub .btn { min-height: 44px; background: var(--tag); color: var(--ink); }
.ftr .legal { border-top: 1px solid #2E3139; padding: 20px 0 28px; font-size: 13px; color: #A7A39A; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1240px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero { grid-template-columns: 1fr 400px; gap: 40px; }
  .hero h1 { font-size: 56px; }
  .pdp { grid-template-columns: 420px 1fr; gap: 36px; }
  .pdp-img { height: 420px; }
}
@media (max-width: 980px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero, .pdp, .two { grid-template-columns: 1fr; }
  .pdp-img { height: 360px; }
  .index-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr-cols { grid-template-columns: 1fr 1fr; }
}
/* Phone. The header can never overflow: the menu is a row of chips that scrolls inside
   itself, inputs are 16px so iOS does not zoom, and every tap target is at least 44px. */
@media (max-width: 860px) {
  .hdr-row { height: auto; flex-wrap: wrap; gap: 12px; padding: 12px 0; }
  .logo { font-size: 19px; }
  .nav { display: none; }
  .menu-btn { display: flex; margin-left: auto; width: 44px; height: 44px; align-items: center; justify-content: center; }
  .search { order: 3; flex-basis: 100%; }
  .chips { order: 4; flex-basis: 100%; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--field); background: var(--card); font-weight: 600; font-size: 15px; white-space: nowrap; }
  .chips a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
}
@media (max-width: 720px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .card-img { height: 150px; padding: 10px; }
  .card-body { padding: 10px 12px 12px; }
  .card-title { font-size: 14px; height: 36px; }
  .now { font-size: 22px; }
  .tag { top: 10px; left: 10px; height: 24px; font-size: 13px; padding: 0 8px 0 15px; }
  .tag::before { left: 6px; top: 9px; width: 5px; height: 5px; }
  .h1 { font-size: 40px; } .h2 { font-size: 24px; }
  .hero { padding: 28px 0 24px; gap: 20px; }
  .hero h1 { font-size: 40px; }
  .hero p { font-size: 17px; }
  .legend { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 32px; }
  .legend .pill { white-space: nowrap; }
  .section { padding-bottom: 36px; }
  .endcap, .endcap.banner, .endcap.banner:not(:has(.art)) { grid-template-columns: 1fr; padding: 20px; }
  .alert-box { padding: 18px 16px; }
  .office-dl { grid-template-columns: 1fr; gap: 2px; }
  .office-dl dd { margin-bottom: 8px; }
  .office-me { width: 100%; justify-content: space-between; }
  .endcap .t { font-size: 24px; }
  .pdp-title { font-size: 28px; }
  .pdp-price .big { font-size: 52px; }
  .history { padding: 18px 16px; margin-top: 24px; }
  .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .store-row { grid-template-columns: 1fr auto; row-gap: 4px; }
  .store-row .d { display: none; }
  /* The compare table becomes one card per store: a six-column table cannot fit a phone, and
     overflowing it is the "page wiggles" bug Phase 1 measured on its offer table. */
  .compare { margin-top: 24px; padding: 18px 16px; }
  .compare-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table tbody th, .compare-table td { display: block; }
  .compare-table tr { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; border-top: 1px solid var(--line-2); padding: 12px 0; }
  .compare-table tr.cheapest { margin: 0 -16px; padding: 12px 16px; }
  .compare-table tbody th, .compare-table td { border: 0; padding: 0; }
  .compare-table tbody th { grid-column: 1; }
  .compare-table td[data-label="Price"] { grid-column: 2; grid-row: 1 / span 2; text-align: right; }
  .compare-table td[data-label="vs cheapest"], .compare-table td[data-label="What we know"], .compare-table td[data-label="Checked"] { grid-column: 1; font-size: 14px; }
  .compare-table td[data-label="Checked"] { font-size: 12px; }
  .compare-table tr.group { display: block; padding: 18px 0 4px; }
  .compare-table td:last-child { grid-column: 2; grid-row: 3 / span 2; align-self: end; }
  .compare-table td:last-child .btn { padding: 0 14px; font-size: 14px; }
  .two > .panel { padding: 18px 16px; }
  .dl { grid-template-columns: 130px 1fr; }
  .filters .push { margin-left: 0; }
  .prose h1 { font-size: 34px; }
  .index-list { grid-template-columns: 1fr; }
  .ftr-cols { grid-template-columns: 1fr; gap: 24px; }
  /* The buy button stays in reach while the history is read. */
  .buybar { display: flex; position: sticky; bottom: 0; z-index: 5; align-items: center; gap: 12px; padding: 12px 16px; background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(21, 23, 28, .08); }
  .buybar .p { font: 800 22px var(--display); }
  .buybar .grow { flex-grow: 1; }
}
.office-discovery { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.office-discovery > summary { cursor: pointer; }
.office-discovery textarea { width: 100%; font: 13px/1.4 var(--mono, ui-monospace, monospace); }