/* ==========================================================================
   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,
.th-sort,
.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; }
}

/* One fixed row height for every row. Nothing inside a row is allowed to add
   a second line — offers sit beside the name, the "Best" flag is taken out of
   flow — so a row with a discount is exactly as tall as one without. */
.ptable tbody td {
	height: 3.35rem;
	padding: .35rem .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: 220px;
	white-space: nowrap;
}
.ptable tbody tr:hover .c-name { background: var(--paper-2); }

.row-name { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.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); }
/* Tags ride on the name's own line. Long offer copy truncates rather than
   wrapping; the full text stays in the tag's title and on the mobile card. */
.row-tags { display: flex; align-items: center; flex-wrap: nowrap; gap: .25rem; min-width: 0; }
.row-tags .tag-offer {
	display: block;
	max-width: 24ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* In the band where the table already scrolls sideways, a long offer costs
   dose columns. Trim it harder there; the full text stays in the tooltip. */
@media (min-width: 901px) and (max-width: 1379px) {
	.row-tags .tag-offer { max-width: 18ch; }
}

/* 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; }
.ptable tbody td.c-dose { position: relative; }
.c-dose .flag {
	position: absolute;
	display: block;
	right: .6rem;
	bottom: .22rem;
	margin: 0;
	line-height: 1;
	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; }

/* Sortable headers ------------------------------------------------------- */
/* Each header you can order by is a real button filling its cell: click to
   sort, click again to reverse. The arrow only shows on the live column and
   on hover, so the header row stays quiet. */
.th-sort {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: .3rem;
	width: calc(100% + 1.2rem);
	margin: -.5rem -.6rem;
	padding: .5rem .6rem;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
}
.ptable thead th.c-name .th-sort { justify-content: flex-start; }
.th-sort:hover { color: var(--ink); }
.th-sort:focus-visible { outline: 2px solid var(--ui); outline-offset: -2px; }

.sort-ind {
	flex: 0 0 auto;
	width: .8em;
	text-align: center;
	color: var(--ink-4);
	opacity: 0;
}
.sort-ind::after { content: "\2195"; }
.th-sort:hover .sort-ind, .th-sort:focus-visible .sort-ind { opacity: 1; }

.ptable thead th.is-sorted { color: var(--ink); background: var(--paper-3); }
.ptable thead th.is-sorted .sort-ind { opacity: 1; color: var(--accent); }
.ptable thead th[aria-sort="ascending"] .sort-ind::after { content: "\2191"; }
.ptable thead th[aria-sort="descending"] .sort-ind::after { content: "\2193"; }
/* A sorted header stays legible even when another dose column has focus. */
.ptable[data-dose-focus] thead th.c-dose.is-sorted { color: var(--ink); }

.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;
		height: auto;
		padding: 0;
		border: 0;
		text-align: left;
		white-space: normal;
	}

	.ptable .c-name {
		position: static;
		grid-column: 1 / -1;
		min-width: 0;
		background: transparent;
		white-space: normal;
	}
	.pname { font-size: 1.05rem; white-space: normal; }
	/* Cards have the vertical room the table does not, so the tags drop to
	   their own line — on every card, so they all read the same way — and the
	   offer shows in full. */
	.row-name { flex-wrap: wrap; row-gap: .3rem; }
	.row-tags { flex: 1 0 100%; flex-wrap: wrap; padding-left: 1.95rem; }
	.row-tags .tag-offer { max-width: none; white-space: normal; overflow: visible; }

	/* 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 tbody td.c-dose { position: static; }
	.ptable td.c-dose .flag { position: static; display: block; 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;
}