/* ==========================================================================
   Best Weight Loss Meds — design system
   --------------------------------------------------------------------------
   Sharp editorial: white page, near-black ink, hairline rules instead of soft
   cards, 3px corners, display type set big and tight, prices in a monospace
   face so every column lines up on the decimal.

   Neutrals carry a cool clinical undertone; colour is a signal, never
   decoration:
     deep blue     = interactive (chips, tabs, brand mark)
     teal-green    = cheapest price / cheapest year
     amber         = subscription caveat
   Everything else is ink on white.

   Layers: 1. Tokens · 2. Primitives · 3. Components · 4. Mobile
   ========================================================================== */

/* Self-hosted so no third party sees a visitor's IP — the privacy policy says
   we don't share data, and a webfont CDN would quietly break that promise. */
@font-face {
	font-family: "Inter Tight";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("fonts/inter-tight-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 1. TOKENS ============================================================== */

:root {
	/* Paper + ink — neutrals carry a cool clinical cast rather than a warm one.
	   You should feel the temperature, not see a colour. */
	--paper: #ffffff;
	--paper-2: #f7f9fb;
	--paper-3: #edf1f6;
	--ink: #0b1117;
	--ink-2: #46535f;
	--ink-3: #5f6c76;
	--ink-4: #68747f;
	/* Glyphs only (arrows, plus/minus, em dashes) — never words. */
	--ink-faint: #9fabb7;
	--rule: #e1e7ed;
	--rule-2: #c3ccd6;
	--rule-ink: #0b1117;
	/* Interactive fill: active chips, tabs, the brand mark. Deep clinical blue —
	   it marks what you can press, and never appears on a price. */
	--ui: #14548c;
	--ui-hover: #0f4372;

	/* Data signals. Colour here is meaning, not decoration. */
	--accent: #0a6b56;
	--accent-ink: #085642;
	--accent-wash: #e9f4f0;
	--accent-rule: #b0dccd;
	--ochre: #9a5a0c;
	--ochre-wash: #fcf3e6;
	--ochre-rule: #ecd6b0;

	/* Type */
	--font: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--fs-micro: .625rem;
	--fs-xs: .75rem;
	--fs-sm: .8125rem;
	--fs-md: .875rem;
	--fs-base: .9375rem;
	--fs-lg: 1.0625rem;

	/* Space */
	--s1: .25rem;
	--s2: .5rem;
	--s3: .75rem;
	--s4: 1rem;
	--s5: 1.5rem;
	--s6: 2.25rem;
	--s7: 3.5rem;

	/* Shape */
	--r: 3px;
	--max: 1340px;
	--header-h: 58px;
}

/* 2. BASE + PRIMITIVES =================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* `hidden` must win over the display values components set on themselves. */
.bwm-compare-page [hidden] { display: none !important; }

body.bwm-compare-page {
	margin: 0;
	background: var(--paper);
	color: var(--ink-2);
	font-family: var(--font);
	font-size: var(--fs-base);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
}

.bwm-compare-page h1,
.bwm-compare-page h2,
.bwm-compare-page h3,
.bwm-compare-page h4 {
	font-family: var(--font);
	color: var(--ink);
	font-weight: 750;
	letter-spacing: -.03em;
	line-height: 1.08;
	margin: 0;
}

.bwm-compare-page :where(a) { color: inherit; }
.bwm-compare-page img { max-width: 100%; }
.bwm-compare-page p { margin: 0; }

.bwm-compare-page :focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
	border-radius: 0;
}

.shell {
	width: 100%;
	max-width: var(--max);
	margin-inline: auto;
	padding-inline: var(--s4);
}

/* The micro-label: uppercase, letterspaced, mono. Used for every label that
   is metadata rather than content — column heads, eyebrows, tags. */
.eyebrow,
.control-label,
.ptable thead th,
.tag,
.c-dose::before,
.c-year::before,
.c-trust::before,
.c-gphc::before,
.flag {
	font-family: var(--mono);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.eyebrow { display: inline-block; color: var(--ink-3); }
.muted { color: var(--ink-3); }
.small { font-size: var(--fs-sm); }

/* Buttons ---------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s2);
	padding: .55rem .95rem;
	border: 1px solid transparent;
	border-radius: var(--r);
	font: inherit;
	font-size: var(--fs-md);
	font-weight: 640;
	line-height: 1.2;
	letter-spacing: -.01em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .1s linear, border-color .1s linear, color .1s linear;
}

.btn-solid { background: var(--accent); color: #fff; }
.btn-solid:hover { background: var(--accent-ink); }

.btn-ink { background: var(--ui); color: #fff; }
.btn-ink:hover { background: var(--ui-hover); }

.btn-outline { background: var(--paper); color: var(--ink); border-color: var(--rule-2); }
.btn-outline:hover { border-color: var(--ink); }

.btn-sm { padding: .38rem .6rem; font-size: var(--fs-sm); }

/* Tags ------------------------------------------------------------------- */

.tag {
	display: inline-flex;
	align-items: center;
	padding: .14rem .38rem;
	border: 1px solid var(--rule-2);
	border-radius: 2px;
	color: var(--ink-3);
	white-space: nowrap;
	line-height: 1.25;
}
.tag-sub { background: var(--ochre-wash); border-color: var(--ochre-rule); color: var(--ochre); }
.tag-offer { background: var(--paper); border-color: var(--ink); color: var(--ink); text-transform: none; letter-spacing: .01em; font-size: var(--fs-xs); }

/* Chips / segmented controls --------------------------------------------- */

.chips {
	display: flex;
	gap: 0;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-snap-type: x proximity;
	border: 1px solid var(--rule-2);
	border-radius: var(--r);
	background: var(--paper);
	width: max-content;
	max-width: 100%;
}
.chips::-webkit-scrollbar { display: none; }

.chip {
	flex: 0 0 auto;
	scroll-snap-align: start;
	padding: .34rem .72rem;
	border: 0;
	border-right: 1px solid var(--rule);
	background: transparent;
	color: var(--ink-2);
	font: inherit;
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: -.005em;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .1s linear, color .1s linear;
}
.chip:last-child { border-right: 0; }
.chip:hover { background: var(--paper-3); color: var(--ink); }
.chip.is-on { background: var(--ui); color: #fff; }

/* Standalone toggle chips (subscription / offer filters) sit on their own. */
.toolbar .chip {
	border: 1px solid var(--rule-2);
	border-radius: var(--r);
}
.toolbar .chip[aria-pressed="true"] { background: var(--ui); border-color: var(--ui); color: #fff; }

.seg {
	display: inline-flex;
	border: 1px solid var(--ui);
	border-radius: var(--r);
	background: var(--paper);
	overflow-x: auto;
	scrollbar-width: none;
	max-width: 100%;
}
.seg::-webkit-scrollbar { display: none; }

.seg-item {
	flex: 0 0 auto;
	padding: .38rem .9rem;
	border: 0;
	border-right: 1px solid var(--rule-2);
	background: transparent;
	color: var(--ink-2);
	font: inherit;
	font-size: var(--fs-md);
	font-weight: 650;
	letter-spacing: -.012em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
.seg-item:last-child { border-right: 0; }
.seg-item:hover { background: var(--paper-3); color: var(--ink); }
.seg-item.is-on { background: var(--ui); color: #fff; }

/* Inputs ----------------------------------------------------------------- */

.field-search { position: relative; flex: 1 1 200px; min-width: 0; }
.field-search svg {
	position: absolute;
	left: .55rem;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	color: var(--ink-4);
	pointer-events: none;
}
.input, .select, .textarea {
	width: 100%;
	padding: .42rem .65rem;
	border: 1px solid var(--rule-2);
	border-radius: var(--r);
	background: var(--paper);
	color: var(--ink);
	font: inherit;
	font-size: var(--fs-md);
}
.input::placeholder { color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid var(--ink); outline-offset: -1px; border-color: var(--ink); }
.field-search .input { padding-left: 1.75rem; }
.textarea { min-height: 5rem; resize: vertical; }

/* 3. COMPONENTS ========================================================== */

/* Header ----------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--paper);
	border-bottom: 1px solid var(--rule-ink);
}

.header-row { display: flex; align-items: center; gap: var(--s4); min-height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; min-width: 0; }
.brand-mark {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 2px;
	background: var(--ui);
	color: #fff;
	font-family: var(--mono);
	font-size: .8rem;
	font-weight: 700;
}
.brand-name {
	font-size: var(--fs-md);
	font-weight: 750;
	color: var(--ink);
	letter-spacing: -.03em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.header-nav { display: flex; gap: var(--s4); margin-left: var(--s5); }
.header-nav a {
	position: relative;
	padding: .2rem 0;
	color: var(--ink-2);
	font-size: var(--fs-md);
	font-weight: 600;
	letter-spacing: -.012em;
	text-decoration: none;
}
.header-nav a:hover { color: var(--ink); }
.header-nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }

.header-actions { display: flex; align-items: center; gap: var(--s3); margin-left: auto; }
.lang-switch { display: inline-flex; border: 1px solid var(--rule-2); border-radius: var(--r); overflow: hidden; }
.lang-switch a {
	padding: .2rem .45rem;
	font-family: var(--mono);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: .08em;
	color: var(--ink-3);
	text-decoration: none;
	background: var(--paper);
}
.lang-switch a + a { border-left: 1px solid var(--rule-2); }
.lang-switch a.is-on { background: var(--ui); color: #fff; }

/* Hero ------------------------------------------------------------------- */

.hero { padding: var(--s6) 0 var(--s5); }
.hero-inner { max-width: var(--max); }
.hero h1 {
	margin: .5rem 0 .7rem;
	max-width: 21ch;
	font-size: clamp(2rem, 1.2rem + 3.3vw, 3.4rem);
	font-weight: 780;
	letter-spacing: -.042em;
	line-height: .98;
	text-wrap: balance;
}
.hero-sub { max-width: 44rem; font-size: var(--fs-lg); color: var(--ink-2); line-height: 1.45; }

.hero-facts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s2) var(--s4);
	margin-top: var(--s5);
	padding-top: var(--s3);
	border-top: 1px solid var(--rule);
	font-size: var(--fs-sm);
	color: var(--ink-3);
}
.hero-facts span { display: inline-flex; align-items: center; gap: .35rem; }
.hero-facts strong { color: var(--ink); font-weight: 680; }

.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }

/* Comparison board ------------------------------------------------------- */

.board { padding-bottom: var(--s6); scroll-margin-top: var(--header-h); }

.board-bar {
	position: sticky;
	top: var(--header-h);
	z-index: 30;
	background: var(--paper);
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule-ink);
	padding: var(--s2) 0;
}
.board-bar-inner { display: flex; flex-direction: column; gap: var(--s2); }

.control-row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.control-label { flex: 0 0 auto; color: var(--ink-4); }

.board-tools { display: flex; margin: var(--s4) auto 0; }
.board-tools .control-row { flex: 1 1 auto; }
.toolbar { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.toolbar .field-search { max-width: 240px; }
.sort-field { display: inline-flex; align-items: center; gap: var(--s2); margin-left: auto; }
.sort-field .select { width: auto; padding-block: .34rem; }
.sort-field .control-label { white-space: nowrap; }

/* Meta line above the table */
.board-meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s3);
	flex-wrap: wrap;
	margin: var(--s5) 0 var(--s3);
}
.board-count { font-size: var(--fs-md); color: var(--ink-3); }
.board-count strong {
	color: var(--ink);
	font-family: var(--mono);
	font-size: 1.05rem;
	font-weight: 700;
}
.board-fresh {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-family: var(--mono);
	font-size: var(--fs-xs);
	color: var(--ink-3);
}
.board-fresh strong { color: var(--ink); font-weight: 600; }

/* The table -------------------------------------------------------------- */

.tablewrap { overflow: visible; }

@media (min-width: 901px) and (max-width: 1379px) {
	.tablewrap { overflow: auto; overscroll-behavior-x: contain; }
}

.ptable {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--fs-md);
}

.ptable thead th {
	position: sticky;
	/* --stick-top is the live height of the header + control bar (set in app.js). */
	top: var(--stick-top, 0px);
	z-index: 2;
	padding: .5rem .6rem;
	background: var(--paper);
	border-bottom: 1.5px solid var(--rule-ink);
	color: var(--ink-3);
	text-align: right;
	white-space: nowrap;
}
.ptable thead th.c-name { text-align: left; z-index: 3; left: 0; }
.ptable thead th.c-go { text-align: left; }

/* In the band where .tablewrap is overflow:auto, the WRAP is the sticky
   scrollport — so --stick-top would be measured from the wrap's own top and
   shove the header row down over the second row of prices. Stick to the wrap.
   This has to sit after the base rule above to win the cascade. */
@media (min-width: 901px) and (max-width: 1379px) {
	.ptable thead th { top: 0; }
}

.ptable tbody td {
	padding: .62rem .6rem;
	border-bottom: 1px solid var(--rule);
	text-align: right;
	vertical-align: middle;
	white-space: nowrap;
}
.ptable tbody tr:last-child td { border-bottom: 1.5px solid var(--rule-ink); }
.ptable tbody tr:hover td { background: var(--paper-2); }
.ptable tbody tr.is-hidden { display: none; }

/* Sticky pharmacy column keeps the row identifiable while scanning doses. */
.ptable .c-name {
	position: sticky;
	left: 0;
	z-index: 1;
	text-align: left;
	background: var(--paper);
	min-width: 200px;
	white-space: normal;
}
.ptable tbody tr:hover .c-name { background: var(--paper-2); }

.row-name { display: flex; align-items: baseline; gap: .5rem; }
.rank {
	flex: 0 0 auto;
	font-family: var(--mono);
	font-size: var(--fs-xs);
	font-weight: 500;
	color: var(--ink-4);
	font-variant-numeric: tabular-nums;
}
.pname {
	color: var(--ink);
	font-weight: 670;
	font-size: var(--fs-base);
	letter-spacing: -.02em;
	text-decoration: none;
}
a.pname:hover { box-shadow: inset 0 -1px 0 var(--ink); }
.row-tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; padding-left: 1.85rem; }

/* Prices ----------------------------------------------------------------- */

.price {
	font-family: var(--mono);
	font-size: var(--fs-md);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
	letter-spacing: -.02em;
}
.c-dose.is-empty { color: var(--ink-faint); }
.c-dose.is-best { background: var(--accent-wash); box-shadow: inset 0 -2px 0 var(--accent); }
.c-dose.is-best .price { color: var(--accent); font-weight: 700; }
.c-dose .flag { display: block; margin-top: 2px; color: var(--accent); letter-spacing: .12em; }

/* Emphasise the dose the visitor picked, de-emphasise the rest. */
.ptable[data-dose-focus] .c-dose:not(.is-focus) .price { color: var(--ink-4); font-weight: 400; }
.ptable[data-dose-focus] thead th.c-dose:not(.is-focus) { color: var(--ink-4); }
.ptable thead th.c-dose.is-focus { color: var(--ink); background: var(--paper-3); }
.c-dose.is-focus { background: var(--paper-2); }
.c-dose.is-focus.is-best { background: var(--accent-wash); }
/* With one dose in focus, only that column's winner is flagged — otherwise the
   green from five other columns competes with the answer you asked for. */
.ptable[data-dose-focus] .c-dose.is-best:not(.is-focus) { background: transparent; box-shadow: none; }
.ptable[data-dose-focus] .c-dose.is-best:not(.is-focus) .flag { display: none; }

.c-year strong {
	font-family: var(--mono);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
	letter-spacing: -.02em;
}
.c-year.is-best strong { color: var(--accent); }

.c-trust a, .c-trust span {
	font-family: var(--mono);
	font-size: var(--fs-xs);
	font-weight: 500;
	color: var(--ink-2);
	text-decoration: none;
}
.c-trust a:hover { box-shadow: inset 0 -1px 0 var(--ink-3); }
.star { font-family: var(--font); font-size: .9rem; color: var(--ink-3); }
.c-gphc {
	font-family: var(--mono);
	font-size: var(--fs-xs);
	font-weight: 500;
	color: var(--ink-3);
	font-variant-numeric: tabular-nums;
}
.c-go { text-align: left; }
.c-go .btn { width: 100%; max-width: 8.5rem; }
.c-go .btn-solid { background: var(--paper); color: var(--ink); border-color: var(--rule-2); }
.c-go .btn-solid:hover { background: var(--ui); border-color: var(--ui); color: #fff; }

.na { color: var(--ink-faint); }

/* Footnote + empty state */
.board-note {
	margin-top: var(--s3);
	max-width: 70ch;
	font-size: var(--fs-sm);
	color: var(--ink-3);
	line-height: 1.5;
}
.board-note strong { color: var(--ink-2); }
.board-empty {
	margin-top: var(--s4);
	padding: var(--s5);
	border: 1px dashed var(--rule-2);
	text-align: center;
	color: var(--ink-3);
}

/* Not-yet-tracked providers */
.soon { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--rule); }
.soon-head { display: flex; align-items: baseline; gap: var(--s2); }
.soon h3 { font-size: var(--fs-base); font-weight: 700; letter-spacing: -.02em; }
.soon-count { font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-4); }
.soon p { margin-top: .25rem; font-size: var(--fs-sm); color: var(--ink-3); max-width: 62ch; }
.soon-list { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: var(--s3); }
.soon-list span {
	padding: .16rem .4rem;
	border: 1px solid var(--rule);
	border-radius: 2px;
	font-size: var(--fs-xs);
	color: var(--ink-3);
}

/* Content sections ------------------------------------------------------- */

.section { padding: var(--s7) 0; border-top: 1px solid var(--rule-ink); scroll-margin-top: calc(var(--header-h) + 8px); }
.section-head { max-width: 46rem; margin-bottom: var(--s5); }
.section-head h2 { margin-top: .4rem; font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2rem); }
.section-head p { margin-top: .6rem; color: var(--ink-3); }

.prose { max-width: 42rem; font-size: var(--fs-base); line-height: 1.62; }
.prose > * + * { margin-top: var(--s4); }
.prose h3 { margin-top: var(--s6); font-size: 1.15rem; }
.prose strong { color: var(--ink); font-weight: 680; }
.prose a { color: var(--ink); text-decoration: none; box-shadow: inset 0 -1px 0 var(--rule-2); }
.prose a:hover { box-shadow: inset 0 -1px 0 var(--ink); }
.prose ul { margin: 0; padding-left: 1.1rem; }
.prose li + li { margin-top: var(--s2); }

.link-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.link-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s3);
	padding: .8rem 0;
	border-bottom: 1px solid var(--rule);
	color: var(--ink);
	font-weight: 650;
	letter-spacing: -.015em;
	text-decoration: none;
	box-shadow: none;
}
.link-list a:hover { color: var(--accent); box-shadow: none; }
.link-list a::after { content: "→"; color: var(--ink-faint); font-family: var(--mono); }
.link-list a:hover::after { color: var(--accent); }

.steps { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); border-top: 1px solid var(--rule-ink); }
.step { padding: var(--s4) var(--s4) var(--s5) 0; border-right: 1px solid var(--rule); }
.step:last-child { border-right: 0; }
.step-n { font-family: var(--mono); font-size: var(--fs-xs); font-weight: 600; color: var(--ink-4); }
.step h3 { margin: var(--s3) 0 .35rem; font-size: var(--fs-base); }
.step p { font-size: var(--fs-sm); color: var(--ink-3); padding-right: var(--s4); }

.faq { max-width: 46rem; border-top: 1px solid var(--rule-ink); }
.faq-item { border-bottom: 1px solid var(--rule); padding: var(--s4) 0; }
.faq-item summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s3);
	color: var(--ink);
	font-weight: 660;
	letter-spacing: -.018em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--mono); color: var(--ink-faint); }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { margin-top: var(--s3); color: var(--ink-3); max-width: 62ch; }

.disclaimer {
	margin-top: var(--s6);
	padding-left: var(--s4);
	border-left: 2px solid var(--ink);
	font-size: var(--fs-sm);
	color: var(--ink-3);
	max-width: 62ch;
}

/* Submit form ------------------------------------------------------------ */

.form-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.form-grid .full { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: .3rem; font-size: var(--fs-sm); font-weight: 650; color: var(--ink); }
.field .hint { margin-top: .3rem; font-size: var(--fs-xs); color: var(--ink-4); }
.req { font-family: var(--mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-4); font-weight: 500; }
.form-actions { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s5); }
.check { display: flex; align-items: flex-start; gap: var(--s2); margin-top: var(--s4); font-size: var(--fs-sm); color: var(--ink-3); }
.success {
	display: none;
	margin-top: var(--s4);
	padding: var(--s3) var(--s4);
	border-left: 2px solid var(--accent);
	background: var(--accent-wash);
	color: var(--accent-ink);
	font-size: var(--fs-md);
	max-width: 46rem;
}
.success.show { display: block; }

/* Footer ----------------------------------------------------------------- */

.site-footer {
	border-top: 1.5px solid var(--rule-ink);
	padding: var(--s6) 0 var(--s5);
	font-size: var(--fs-sm);
	color: var(--ink-3);
}
.footer-grid { display: flex; flex-wrap: wrap; gap: var(--s5) var(--s7); justify-content: space-between; }
.site-footer strong { color: var(--ink); font-weight: 680; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; font-family: var(--mono); }
.site-footer a { color: var(--ink-2); text-decoration: none; box-shadow: inset 0 -1px 0 var(--rule-2); }
.site-footer a:hover { box-shadow: inset 0 -1px 0 var(--ink); }
.site-footer p + p { margin-top: var(--s2); }
.footer-legal { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--rule); font-size: var(--fs-xs); color: var(--ink-4); max-width: 80ch; }

/* ==========================================================================
   4. MOBILE — the table re-flows into cards. Same markup, no duplicate DOM:
   each <tr> becomes a grid card and the dose cells auto-flow into it.
   ========================================================================== */

@media (max-width: 900px) {
	:root { --header-h: 52px; }

	.hero { padding: var(--s5) 0 var(--s4); }
	.hero-facts { margin-top: var(--s4); }

	.board-bar { padding: var(--s2) 0; }
	.board-bar-inner { gap: var(--s2); }
	.control-row { gap: var(--s2); }
	.control-row .control-label { display: none; }
	/* Let the chip rails bleed to the screen edge so they read as scrollable. */
	.board-bar .chips, .board-bar .seg {
		margin-inline: calc(var(--s4) * -1);
		padding-inline: 0;
		border-inline: 0;
		border-radius: 0;
		width: auto;
		max-width: none;
		scroll-padding-inline: var(--s4);
	}
	.board-bar .chips .chip:first-child, .board-bar .seg .seg-item:first-child { margin-left: var(--s4); }
	.board-bar .chips .chip:last-child, .board-bar .seg .seg-item:last-child { margin-right: var(--s4); }
	.board-bar .chips .chip, .board-bar .seg .seg-item {
		border: 1px solid var(--rule-2);
		border-radius: var(--r);
		margin-right: .35rem;
	}
	.board-bar .chips .chip.is-on, .board-bar .seg .seg-item.is-on { border-color: var(--ink); }
	.board-bar .seg { border: 0; }

	.toolbar .field-search { max-width: none; flex: 1 1 100%; }
	.sort-field { margin-left: 0; flex: 1 1 100%; }
	.sort-field .select { flex: 1 1 auto; }

	.board-meta { margin-top: var(--s4); }

	.ptable { display: block; }
	.ptable thead { display: none; }
	.ptable tbody { display: grid; gap: var(--s3); }

	.ptable tbody tr {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: .4rem var(--s2);
		align-items: center;
		padding: var(--s3);
		border: 1px solid var(--rule-2);
		border-radius: var(--r);
		background: var(--paper);
	}
	.ptable tbody tr:last-child td { border-bottom: 0; }
	.ptable tbody tr:hover td,
	.ptable tbody tr:hover .c-name { background: transparent; }

	.ptable tbody td {
		display: block;
		padding: 0;
		border: 0;
		text-align: left;
		white-space: normal;
	}

	.ptable .c-name {
		position: static;
		grid-column: 1 / -1;
		min-width: 0;
		background: transparent;
	}
	.pname { font-size: 1.05rem; }
	.row-tags { padding-left: 1.95rem; }

	/* Dose cells: a tidy 3-up price grid when every dose is shown… */
	.ptable td.c-dose {
		padding: .32rem .35rem;
		border: 1px solid var(--rule);
		border-radius: 2px;
		text-align: center;
	}
	.ptable td.c-dose::before {
		content: attr(data-dose);
		display: block;
		color: var(--ink-4);
		line-height: 1.6;
	}
	.ptable td.c-dose.is-best { border-color: var(--accent-rule); box-shadow: none; }
	.ptable td.c-dose .flag { margin-top: 0; }

	/* …and one big headline price when a single dose is selected. */
	.ptable[data-dose-mode="single"] td.c-dose { display: none; }
	.ptable[data-dose-mode="single"] td.c-dose.is-focus {
		display: flex;
		align-items: baseline;
		gap: .45rem;
		grid-column: 1 / -1;
		padding: .4rem .6rem;
		text-align: left;
		background: var(--paper-2);
	}
	.ptable[data-dose-mode="single"] td.c-dose.is-focus::before { display: inline; }
	.ptable[data-dose-mode="single"] td.c-dose.is-focus .price { font-size: 1.5rem; font-weight: 600; }
	.ptable[data-dose-mode="single"] td.c-dose.is-focus .flag { display: inline; }
	.ptable[data-dose-focus] td.c-dose:not(.is-focus) .price { color: var(--ink-2); font-weight: 500; }

	/* Meta row: 12-month cost, rating and GPhC share one three-up row, each
	   with its label stacked above the value so nothing wraps into a neighbour. */
	.ptable td.c-year,
	.ptable td.c-trust,
	.ptable td.c-gphc {
		grid-column: span 1;
		align-self: start;
		margin-top: .35rem;
		padding-top: .5rem;
		border-top: 1px solid var(--rule);
		font-size: var(--fs-sm);
		color: var(--ink-3);
	}
	.ptable td.c-year::before,
	.ptable td.c-trust::before,
	.ptable td.c-gphc::before {
		content: attr(data-label);
		display: block;
		margin-bottom: .1rem;
		color: var(--ink-4);
		line-height: 1.5;
	}
	.ptable td.c-year strong { font-size: var(--fs-base); }

	.ptable td.c-go { grid-column: 1 / -1; padding-top: .3rem; }
	.ptable td.c-go .btn { max-width: none; padding-block: .6rem; }

	.soon { margin-top: var(--s4); }
	.section { padding: var(--s6) 0; }
	.steps { grid-template-columns: 1fr; }
	.step { border-right: 0; border-bottom: 1px solid var(--rule); padding-bottom: var(--s4); }
	.step:last-child { border-bottom: 0; }
	.form-grid { grid-template-columns: 1fr; }
	.footer-grid { flex-direction: column; gap: var(--s4); }
}

@media (max-width: 640px) {
	/* Phone header: brand + language only. The nav lives in the footer and the
	   submit form has its own section, so nothing is lost. */
	.header-nav { display: none; }
	.header-actions .btn { display: none; }
	.brand-name { font-size: var(--fs-sm); }
	.board-tools { margin-top: var(--s3); }
	.sort-field .select { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.bwm-compare-page *, .bwm-compare-page *::before, .bwm-compare-page *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.site-header, .board-bar, .board-tools, .site-footer, .c-go { display: none !important; }
}

/* Visually hidden, still read by assistive tech. */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}