/* Gear Spec Finder: generated by theme/scope_css.py from page/gsf.css. Do not edit by hand.
   Every rule is scoped to .gsf, so the rest of the site is untouched. */
@font-face { font-family: "GSF Inter Tight"; src: url(fonts/inter-tight-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "GSF Inter Tight"; src: url(fonts/inter-tight-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "GSF Inter Tight"; src: url(fonts/inter-tight-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "GSF JetBrains Mono"; src: url(fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "GSF JetBrains Mono"; src: url(fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
.gsf h1, .gsf h2, .gsf h3, .gsf h4, .gsf h5, .gsf p, .gsf ul, .gsf ol, .gsf dl, .gsf li, .gsf summary { font-family: inherit; color: inherit; letter-spacing: inherit; text-transform: none; }
.gsf table, .gsf th, .gsf td { border: 0; background: none; }
.gsf label, .gsf legend, .gsf textarea { font-family: inherit; letter-spacing: inherit; text-transform: none; }  /* the theme sets Montserrat on form labels (Sean spotted it, 1 Nov) */
.gsf button, .gsf select, .gsf input { font-family: inherit; letter-spacing: inherit; border-radius: 0; box-shadow: none; text-shadow: none; }
.gsf a { box-shadow: none; }
/* The site's Additional CSS pins the menu row at 1000px+ ([data-row="bottom:boxed"] .ct-container { position: fixed });
   on the tool page it scrolls away with the header, so it never covers the tool (same fix as the tool-page template). */
body.gsf-page [data-row="bottom:boxed"] .ct-container { position: static; }
/* The FAQ (ordinary WordPress content) sits below the tool, outside .gsf, at the tool's width. */
.gsf-after { max-width: 1280px; margin: 0 auto; padding: 24px 16px 60px; }
/* Gear Spec Finder design build (R1 revision of "Brutal G"), signed off by Sean on 31 Oct 2026.
   Square edges and hairline grids, one photo tile style, mono for every measured value.
   Colour rules: orange = selected / yours (and headline numbers); green = good status ("Prices checked", "In stock").
   Tokens below are dark; light overrides them under data-mode="light". Readers get light by default, with a dark mode
   toggle in the hero. Organised by component; media queries for each component sit at the end of the file.
   Every visual decision is in DESIGN-TOKENS.md for M6. */

/* ---- Tokens ---------------------------------------------------------------------------------------------- */
.gsf {
  --bg: #0a0a0a; --panel: #111111; --rule: #2b2b29; --line: #34342f; --text: #ecebe6; --muted: #8f8e88; --soft: #c9c8c2;
  --orange: #f7a42a; --on-orange: #141006; --accent-ink: #f7a42a; --glow: rgba(247,164,42,.2);
  --tile: #e6e5df; --zone: rgba(247,164,42,.10); --dot: #5a5955;
  --ok: #4cc38a; --ok-glow: rgba(76,195,138,.22);
  --sans: "GSF Inter Tight", "Helvetica Neue", Arial, sans-serif; --mono: "GSF JetBrains Mono", Consolas, monospace;
  --t-xs: 11px; --t-s: 14px; --t-m: 18px; --t-l: 28px; --t-xl: 48px; --t-display: clamp(52px, 11vw, 168px);
  color-scheme: dark;
}
.gsf[data-mode="light"] {
  --bg: #e4e3dd; --panel: #fbfbf9; --rule: #1a1a18; --line: #c9c7bf; --text: #141414; --muted: #5c5b56; --soft: #33322f;
  --accent-ink: #a35600; --glow: rgba(247,164,42,.28); --tile: #eeede8; --zone: rgba(247,164,42,.16); --dot: #a9a79f;
  --ok: #1d8a52; --ok-glow: rgba(29,138,82,.2);
  color-scheme: light;
}

/* ---- Base ------------------------------------------------------------------------------------------------ */
.gsf * { box-sizing: border-box; }
.gsf [hidden] { display: none !important; }
.gsf { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: var(--t-s); transition: background .2s, color .2s; }
.gsf .gsf-wrap { max-width: 1280px; margin: 0 auto; padding-block: 20px 60px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: grid; gap: 12px; }
.gsf .panel { background: var(--panel); border: 1px solid var(--rule); overflow: hidden; }
.gsf .mono { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.gsf .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gsf .nw { white-space: nowrap; }  /* the US unit and its "?" stay together */
.gsf :focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
/* The LED dot: orange = selected / live; .ok = green status. */
.gsf .led, .gsf .chip.on::before { content: ""; display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--orange); box-shadow: 0 0 0 3px var(--glow); margin-right: 10px; }
.gsf .led.ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-glow); }

/* ---- Buttons and links ----------------------------------------------------------------------------------- */
.gsf .chip { display: inline-flex; align-items: center; font: 500 var(--t-xs) var(--mono); letter-spacing: .05em; text-transform: uppercase;
  border: 1px solid var(--line); background: transparent; color: var(--soft); padding: 8px 10px; cursor: pointer; }
.gsf .chip:hover, .gsf .chip.on { border-color: var(--text); color: var(--text); }
.gsf .buy { font: 500 var(--t-xs) var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text); background: transparent;
  border: 1px solid var(--text); padding: 9px 12px; cursor: pointer; }
.gsf .buy:hover { background: var(--orange); border-color: var(--orange); color: var(--on-orange); }
.gsf .link { justify-self: start; background: none; border: 0; padding: 0; color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
  font: var(--t-xs) var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.gsf .empty { padding: 28px 20px; color: var(--muted); }

/* ---- Hero ------------------------------------------------------------------------------------------------ */
.gsf .hero { padding: 32px 32px 28px; display: grid; gap: 28px; }
.gsf .hero-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: start; }
.gsf .hero h1 { font-size: var(--t-display); line-height: .84; letter-spacing: -.05em; margin: 0; font-weight: 600; text-transform: uppercase; }
.gsf .nums { display: grid; gap: 20px; justify-items: end; text-align: right; padding-top: 6px; }
.gsf .num b { display: block; font: 400 var(--t-xl)/1 var(--mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.gsf .num .mono { display: block; margin-top: 6px; }
.gsf .num .mono .led { margin-right: 8px; vertical-align: 1px; }
.gsf .num.hot b { color: var(--accent-ink); }
.gsf .stats { border-top: 1px solid var(--rule); padding-top: 24px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; }
.gsf .stats p { margin: 0; max-width: 30em; font-size: var(--t-l); line-height: 1.2; letter-spacing: -.015em; color: var(--muted); text-wrap: balance; }
.gsf .stats p strong { color: var(--text); font-weight: 500; }
.gsf .hero-link { color: var(--text); text-decoration: none; white-space: nowrap; font-weight: 500; padding: 0 2px; margin: 0 -2px;
  /* An orange underline always (phones have no hover), and a highlighter strip that sweeps in from the left on hover
     (Sean, 2 Nov: makes it clearer the link jumps to another part of the page). */
  background-image: linear-gradient(var(--orange), var(--orange)), linear-gradient(color-mix(in srgb, var(--orange) 38%, transparent), color-mix(in srgb, var(--orange) 38%, transparent));
  background-repeat: no-repeat; background-size: 100% 1px, 0% 100%; background-position: 0 100%, 0 100%; transition: background-size .35s ease; }
.gsf .hero-link:hover, .gsf .hero-link:focus-visible { background-size: 100% 1px, 100% 100%; outline: none; }
/* Dark mode toggle: the switch knob is orange when dark is on. */
.gsf .theme-tg { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; padding: 8px 12px; border: 1px solid var(--line);
  font: 500 var(--t-xs) var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.gsf .theme-tg:hover, .gsf .theme-tg:focus-visible { border-color: var(--text); color: var(--text); }
.gsf .tg-sw { position: relative; width: 26px; height: 14px; border: 1px solid currentColor; border-radius: 7px; flex: none; }
.gsf .tg-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; border-radius: 50%; background: currentColor; transition: transform .15s; }
.gsf .theme-tg[aria-pressed="true"] { color: var(--text); }
.gsf .theme-tg[aria-pressed="true"] .tg-sw::after { transform: translateX(12px); background: var(--orange); }

/* ---- Section heads --------------------------------------------------------------------------------------- */
.gsf .sec-head { display: flex; justify-content: space-between; align-items: end; padding: 26px 24px 20px; border-bottom: 1px solid var(--rule); gap: 12px 24px; flex-wrap: wrap; }
.gsf .sec-head h2 { margin: 0; font-size: var(--t-xl); line-height: .92; letter-spacing: -.04em; font-weight: 600; text-transform: uppercase; text-wrap: balance; }
.gsf .board-note { color: var(--muted); font-size: var(--t-s); padding: 16px 24px; margin: 0; }

/* ---- Start here (the onboarding module uses the opposite colour set to the page, so it stands apart) ----- */
.gsf .ask-panel { --ok: #1d8a52; --ok-glow: rgba(29,138,82,.2); --bg: #e4e3dd; --panel: #fbfbf9; --rule: #1a1a18; --line: #c9c7bf; --text: #141414; --muted: #5c5b56; --soft: #33322f;
  --accent-ink: #a35600; --glow: rgba(247,164,42,.28); color-scheme: light; background: var(--panel); color: var(--text); }
.gsf[data-mode="light"] .ask-panel { --ok: #4cc38a; --ok-glow: rgba(76,195,138,.22); --bg: #0a0a0a; --panel: #111111; --rule: #2b2b29; --line: #34342f; --text: #ecebe6; --muted: #8f8e88; --soft: #c9c8c2;
  --accent-ink: #f7a42a; --glow: rgba(247,164,42,.2); color-scheme: dark; }
.gsf .ask { display: grid; gap: 18px; padding: 28px 32px 30px; }
.gsf .ask-eyebrow { margin: 0; display: flex; align-items: center; }
/* The sentence wraps between phrases, never inside one. */
.gsf .ask-q { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; font-size: var(--t-l); line-height: 1.3; letter-spacing: -.015em; color: var(--soft); }
.gsf .phrase { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.gsf .step { display: inline-flex; align-items: center; border: 1px solid var(--line); vertical-align: middle; margin: 0; }
.gsf .step button { width: 40px; height: 40px; border: 0; background: transparent; color: var(--text); font: 500 var(--t-m) var(--mono); cursor: pointer; }
.gsf .step button:hover:not(:disabled) { color: var(--accent-ink); }
.gsf .step button:disabled { color: var(--line); cursor: default; }
/* The control you press (+) is orange from the start; a value turns orange once the reader sets it ("yours"). */
.gsf .step button:last-child { color: var(--accent-ink); font-weight: 600; }
.gsf .step button:last-child:hover { color: var(--text); }
.gsf .step b { min-width: 48px; text-align: center; font: 500 var(--t-m) var(--mono); color: var(--muted); }
.gsf .step b.set { color: var(--accent-ink); }
.gsf .ask select { -webkit-appearance: none; appearance: none; font: 500 var(--t-s) var(--mono); letter-spacing: .04em; color: var(--muted); height: 42px; vertical-align: middle;
  border: 1px solid var(--line); border-radius: 0; padding: 0 34px 0 12px; margin: 0; cursor: pointer; background-color: var(--panel);
  background-image: linear-gradient(45deg, transparent 50%, var(--accent-ink) 50%), linear-gradient(135deg, var(--accent-ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.gsf .ask select:hover { border-color: var(--text); }
.gsf .ask select.set { color: var(--accent-ink); border-color: var(--accent-ink); }
.gsf .ask select option { color: var(--text); }
/* Must-have tiles: an empty orange checkbox from the start, ticked and washed orange once picked; the hint lines up with the title. */
.gsf .ask-must { display: grid; gap: 10px; }
.gsf .must-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.gsf .must { display: grid; gap: 4px; align-content: start; text-align: left; padding: 12px 14px; border: 1px solid var(--line);
  background: transparent; color: var(--text); cursor: pointer; font: inherit; }
.gsf .must b { display: flex; align-items: center; font: 500 var(--t-xs) var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.gsf .must span { font-size: var(--t-xs); line-height: 1.4; color: var(--muted); padding-left: 24px; }
.gsf .must:hover { border-color: var(--text); }
.gsf .must.on { border-color: var(--accent-ink); background: var(--zone, var(--glow)); }
.gsf .must b::before { content: ""; display: inline-grid; place-items: center; flex: none; width: 14px; height: 14px; margin-right: 10px;
  border: 1.5px solid var(--accent-ink); border-radius: 2px; background: transparent; font: 700 11px/1 var(--mono); color: var(--on-orange); box-sizing: border-box; }
.gsf .must.on b::before { content: "\2713"; background: var(--orange); border-color: var(--orange); }
.gsf .must:hover b::before { box-shadow: 0 0 0 3px var(--glow); }
.gsf .ask-go { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.gsf .row-l { display: none; }  /* phones: the sentence becomes labelled rows */
.gsf #h-count { font: var(--t-s) var(--mono); color: var(--muted); }
.gsf #h-count b { font: 500 var(--t-l)/1 var(--mono); color: var(--text); margin-right: 6px; }
.gsf #h-all { font-size: var(--t-xs); }

/* ---- One photo tile everywhere: warm off-white, same padding. Multiply melts the photos' white backgrounds into it. */
.gsf .lc-photo, .gsf .photo, .gsf .nm-photo, .gsf .cmp-photo { background: var(--tile); display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; max-width: 100%; overflow: hidden; }
/* The one-cell grid makes the photo's height:100% mean "the tile's height", so wide tiles shrink the photo instead of cropping it. */
.gsf .lc-photo img, .gsf .photo img, .gsf .nm-photo img, .gsf .cmp-photo img { width: 100%; height: 100%; object-fit: contain; display: block; mix-blend-mode: multiply; }
/* Front / Rear (Sean, 1 Nov, item 83): a small switch on the tile, only where the maker has a rear photo. The pressed side is
   inked, not orange: every card has one, and orange stays for the reader's own choices in the finder. */
.gsf .photo { position: relative; }
.gsf .photo img[hidden], .gsf .cmp-photo img[hidden] { display: none; }  /* the tile's display:block would otherwise beat [hidden] */
.gsf .flip { position: absolute; top: 8px; right: 8px; display: flex; border: 1px solid var(--line); background: var(--panel); }
.gsf .flip button { font: 500 var(--t-xs)/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; padding: 7px 9px; min-height: 30px;
  border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.gsf .flip button + button { border-left: 1px solid var(--line); }
.gsf .flip button:hover { color: var(--text); }
.gsf .flip button[aria-pressed="true"] { background: var(--text); color: var(--panel); }
.gsf .flip button:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
.gsf .cmp-opts { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.gsf .ph { width: 100%; height: 100%; display: grid; place-items: center; color: #8a8984; font: var(--t-xs) var(--mono); text-transform: uppercase; letter-spacing: .08em; }

/* ---- Store rows (leader cards, product cards, compare): bordered like buttons, cheapest in stock first ---- */
.gsf .lc-buy { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; align-content: start; }
.gsf .lc-shop { display: grid; grid-template-columns: minmax(0, 1fr) auto 92px 14px; gap: 10px; align-items: center; padding: 8px 10px;
  border: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: var(--t-s); }
.gsf .lc-shop:hover { border-color: var(--text); background: color-mix(in srgb, var(--text) 4%, transparent); }
.gsf .lc-shop.low { border-color: var(--text); }
.gsf .lc-shop.oos { opacity: .55; border-style: dashed; }
.gsf .lc-shop.oos:hover { opacity: .8; }
.gsf .lc-shop .s-name { min-width: 0; overflow-wrap: break-word; }
.gsf .s-name em { font: normal 500 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); margin-left: 6px; }
.gsf .s-price { font: 500 var(--t-s) var(--mono); }
.gsf .s-stock { font: var(--t-xs) var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); text-align: right; white-space: nowrap; }
.gsf .s-stock .led { margin-right: 6px; }
.gsf .s-go { font: 500 var(--t-s) var(--mono); color: var(--muted); text-align: right; transition: transform .15s; }
.gsf .lc-shop:hover .s-go, .gsf .lc-shop:focus-visible .s-go { color: var(--text); transform: translateX(2px); }
.gsf .shop-none { min-height: 39px; visibility: hidden; }
/* Two-line rows (stock under the name) on product cards. */
.gsf .lc-buy.compact .lc-shop { grid-template-columns: minmax(0, 1fr) auto 14px; grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; padding: 7px 10px; }
.gsf .lc-buy.compact .s-name { grid-column: 1; grid-row: 1; }
.gsf .lc-buy.compact .s-stock { grid-column: 1; grid-row: 2; text-align: left; font-size: 10px; }
.gsf .lc-buy.compact .s-price { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.gsf .lc-buy.compact .s-go { grid-column: 3; grid-row: 1 / 3; align-self: center; }

/* ---- Leader boards: the number leads, the photo supports; rows line up across a board (subgrid) ---------- */
.gsf .leads { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); margin: 0 -1px -1px 0; }
.gsf .lead-scope { margin: 0; padding: 12px 24px; border-bottom: 1px solid var(--rule); font-size: var(--t-s); color: var(--muted);
  display: flex; justify-content: space-between; align-items: center; gap: 4px 20px; flex-wrap: wrap; }
.gsf .lead-scope .led { vertical-align: 1px; }
.gsf .lead-scope .link { margin-left: 12px; }
.gsf .scope-r { font: var(--t-xs) var(--mono); letter-spacing: .06em; text-transform: uppercase; }
/* The card sets the width; its parts shrink rather than push it wider. */
.gsf .lc { padding: 22px 22px 24px; display: grid; grid-row: span 6; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 12px; align-content: start; min-width: 0;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.gsf .lc > *, .gsf .lc-name, .gsf .lc-buy, .gsf .lc-buy li { min-width: 0; }
.gsf .lc-head { order: 1; display: grid; gap: 4px; align-content: start; }
.gsf .lc-val, .gsf .stk-val { order: 2; } .gsf .lc-name, .gsf .stk-name { order: 3; } .gsf .lc-photo, .gsf .stk-photo { order: 4; } .gsf .lc-buy, .gsf .stk-buy { order: 5; } .gsf .lc-rest { order: 6; }
.gsf .lc-label { margin: 0; font-size: var(--t-l); line-height: 1.05; font-weight: 600; letter-spacing: -.025em; color: var(--text); text-wrap: balance; overflow-wrap: anywhere; }
.gsf .lead-note { margin: 0; color: var(--muted); font-size: var(--t-xs); }
.gsf .lc-val { margin: 0; display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.gsf .lc-val b { font: 400 var(--t-xl)/1 var(--mono); color: var(--accent-ink); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.gsf .lc-val b small { font-size: .55em; margin-left: .08em; letter-spacing: 0; }  /* the unit hugs the number: 54g */
.gsf .lc-val span { font-size: var(--t-s); color: var(--soft); }
.gsf .lc-name { margin: 0; font-size: var(--t-m); line-height: 1.2; text-wrap: balance; overflow-wrap: anywhere; }
.gsf .lc-photo { aspect-ratio: 5/2; padding: 12px 12%; }
.gsf .card-buy .lc-buy { order: 0; }  /* the leader-card ordering rule must not move a product card's store list below its footer */
/* Ticks on the tailored board: up to two lines, always reserved, so the board keeps its height. */
.gsf .why { margin: -4px 0 0; flex-wrap: wrap; gap: 4px 12px; font: var(--t-xs) var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--soft); }
.gsf p.why { display: flex; }
.gsf .why b { color: var(--accent-ink); font-weight: 500; }
.gsf #leaders-mine .lc-why { display: flex; flex-wrap: wrap; overflow: hidden; margin-top: 8px; min-height: 2.9em; max-height: 2.9em; line-height: 1.45; }
.gsf .wins { display: inline-block; margin-left: 8px; vertical-align: 2px; font: 500 10px var(--mono); letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-ink); border: 1px solid var(--accent-ink); padding: 2px 6px; white-space: nowrap; }
.gsf .wins.ru { color: var(--muted); border-color: var(--line); }
/* Runner-ups shown in place: each card row stacks the winner and runners-up in one grid cell; only the shown one is
   visible, so the card keeps its height when it swaps. */
.gsf .stk { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.gsf .stk > .alt { grid-area: 1 / 1; min-width: 0; display: grid; }
.gsf .stk > .alt.off { visibility: hidden; }
.gsf .stk-buy { container: buy / inline-size; }
.gsf .lc-rest { border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 6px; }
.gsf .lc-rest ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.gsf .lc-rest li { display: grid; grid-template-columns: 1fr auto; gap: 10px; font-size: var(--t-s); color: var(--soft); }
.gsf .lc-rest li[data-i] { display: block; }
.gsf .lc-rest li[hidden] { display: none; }
.gsf .lc-rest li span:last-child { font-family: var(--mono); font-size: var(--t-xs); align-self: center; font-variant-numeric: tabular-nums; }
.gsf .lc-rest .no-runner { color: var(--muted); }
.gsf .lc-pick { all: unset; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; width: 100%; cursor: pointer; }
/* One line each, so a swap never changes the height. */
.gsf .lc-pick span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.gsf .lc-pick:hover span:first-child { color: var(--text); text-decoration-color: var(--accent-ink); }
.gsf .lc-pick:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
/* A card with no winner inside the reader's filters keeps its place (no jumping) and says so. */
.gsf .lc-empty .lc-val b { color: var(--muted); }
.gsf .lc-empty .lc-name { color: var(--muted); font-size: var(--t-s); }
.gsf .lc-empty .lc-photo { background: transparent; border: 1px dashed var(--line); }

/* ---- Finder: filters ------------------------------------------------------------------------------------- */
.gsf .finder { display: grid; grid-template-columns: 280px minmax(0, 1fr); }
.gsf .finder > .sec-head { grid-column: 1 / -1; }
.gsf .filters { border-right: 1px solid var(--rule); padding: 20px; display: grid; gap: 24px; align-content: start; }
/* Phones: the filters open in a full-screen panel (Filters button in the results bar); wide screens keep the sidebar. */
.gsf .f-top, .gsf .f-open, .gsf .f-show { display: none; }
.gsf .f-foot { display: contents; }
.gsf .filters h5 { margin: 0 0 10px; font: 500 var(--t-s)/1.25 var(--sans); letter-spacing: -.005em; color: var(--text); }
.gsf .presets { display: flex; flex-wrap: wrap; gap: 6px; }
.gsf .range { display: grid; gap: 6px; }
.gsf .range label { font: 500 var(--t-s) var(--mono); }
.gsf .range input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 20px; margin: 0; background: transparent; cursor: pointer; }
.gsf .range input[type=range]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right, var(--orange) 0 var(--p, 0%), var(--line) var(--p, 0%)); }
.gsf .range input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -6px; background: var(--orange); border: 0; border-radius: 0; }
.gsf .range input[type=range]::-moz-range-track { height: 2px; background: var(--line); }
.gsf .range input[type=range]::-moz-range-progress { height: 2px; background: var(--orange); }
.gsf .range input[type=range]::-moz-range-thumb { width: 14px; height: 14px; background: var(--orange); border: 0; border-radius: 0; }
.gsf .check { display: flex; gap: 10px; align-items: center; font-size: var(--t-s); margin: 7px 0; cursor: pointer; }
.gsf .check input { -webkit-appearance: none; appearance: none; flex: none; width: 16px; height: 16px; margin: 0; border: 1px solid var(--muted); background: transparent; cursor: pointer; }
.gsf .check input:checked { border-color: var(--orange); background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3' fill='none' stroke='%23141006' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E") center / 12px no-repeat; }
.gsf .check-note { margin: 8px 0 0; font-size: var(--t-xs); line-height: 1.45; color: var(--muted); }

/* ---- Finder: results head, near misses ------------------------------------------------------------------- */
.gsf .results { min-width: 0; overflow: hidden; }
.gsf .res-head { display: flex; justify-content: space-between; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--rule); flex-wrap: wrap; align-items: center; }
.gsf .res-l { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.gsf #count { font: 500 var(--t-s) var(--mono); }
.gsf .cmp-msg { font-size: var(--t-xs); color: var(--accent-ink); }
.gsf .res-head select { -webkit-appearance: none; appearance: none; font: 500 var(--t-xs) var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--text); border: 1px solid var(--line); border-radius: 0; padding: 8px 34px 8px 10px; margin-left: 8px; cursor: pointer;
  background-color: var(--panel);
  background-image: linear-gradient(45deg, transparent 50%, var(--text) 50%), linear-gradient(135deg, var(--text) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.gsf .res-head select:hover { border-color: var(--text); }
.gsf .res-head select option { text-transform: none; }
.gsf .near { padding: 18px 20px; display: grid; gap: 12px; border-bottom: 1px solid var(--rule); }
.gsf .near ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gsf .near li { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: center; }
.gsf .near li > div:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.gsf .near b { font-weight: 500; }
.gsf .nm-photo { width: 72px; aspect-ratio: 4/3; padding: 6px; }
.gsf .nm-why { font-size: var(--t-s); color: var(--muted); }

/* ---- Finder: product cards (hairline grid; everything on the card, stores and footer at the bottom) ------- */
.gsf .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin: 0 -1px -1px 0; }
/* The card's column is sized by the card, not by the photo's natural width, so nothing spills into the next card. */
.gsf .card { display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); container-type: inline-size; min-width: 0;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.gsf .card > *, .gsf .card .body > *, .gsf .photo { min-width: 0; }
.gsf .photo { aspect-ratio: 4/3; margin: 18px 18px 0; padding: 18px; }
.gsf .body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 14px; }
.gsf .body h4 { margin: 0; font-size: var(--t-m); font-weight: 500; line-height: 1.2; text-wrap: balance; overflow-wrap: anywhere; }
.gsf .io { display: grid; gap: 8px; }
.gsf .io-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; row-gap: 4px; white-space: nowrap; }
.gsf .io-main b { font: 500 var(--t-l)/1 var(--mono); letter-spacing: -.04em; }
.gsf .io-main span { font: var(--t-xs) var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.gsf .io-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.gsf .tag { font: var(--t-xs) var(--mono); text-transform: uppercase; letter-spacing: .04em; border: 1px solid var(--line); padding: 2px 6px; color: var(--soft); }
.gsf dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.gsf dl .wide { grid-column: 1 / -1; }
.gsf dl div { display: grid; gap: 3px; min-width: 0; }
.gsf dt { font: var(--t-xs) var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.gsf dd { margin: 0; font: var(--t-s) var(--mono); overflow-wrap: anywhere; }
/* A missing spec is a quiet dash, explained on hover. */
.gsf .nc { color: var(--muted); font-family: var(--sans); font-style: italic; }
.gsf .nc[title] { cursor: help; font-style: normal; }
.gsf .card-note { margin: 0; font-size: var(--t-xs); line-height: 1.45; color: var(--muted); border-left: 2px solid var(--line); padding-left: 10px; }
.gsf .card-buy { margin-top: auto; display: grid; gap: 12px; }
.gsf .foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.gsf .foot-r { display: flex; gap: 6px; flex-wrap: wrap; }
.gsf .foot-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.gsf .foot-meta .link { justify-self: end; }
.gsf .card .link { white-space: normal; text-align: left; }
.gsf .cmp-tog.full { color: var(--muted); border-style: dashed; }
.gsf .more { display: grid; place-items: center; padding: 18px; }
/* Tooltip marker: a tiny circled "?" after a value; the note shows on hover, keyboard focus or tap. */
.gsf .tip { position: relative; display: inline-grid; place-items: center; width: 14px; height: 14px; margin-left: 6px; vertical-align: 1px;
  border: 1px solid var(--muted); border-radius: 50%; font: 600 9px/1 var(--sans, inherit); color: var(--muted); cursor: help; }
.gsf .tip:hover, .gsf .tip:focus-visible { color: var(--text); border-color: var(--text); outline: none; }
.gsf .tip::after { content: attr(data-tip); position: absolute; z-index: 5; bottom: calc(100% + 8px); left: -40px;
  width: max-content; max-width: 200px; padding: 7px 9px; background: var(--text); color: var(--panel); font: 400 var(--t-xs)/1.4 var(--sans, inherit);
  letter-spacing: 0; text-transform: none; white-space: normal; text-align: left; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .12s; }
.gsf .tip:hover::after, .gsf .tip:focus::after { opacity: 1; visibility: visible; }

/* ---- Compare --------------------------------------------------------------------------------------------- */
.gsf .cmp-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px 20px; flex-wrap: wrap; padding: 12px 24px; border-bottom: 1px solid var(--rule); font-size: var(--t-s); color: var(--muted); }
.gsf .cmp-bar b { color: var(--text); font-weight: 500; }
.gsf .cmp-diff { margin: 0; color: var(--text); }
.gsf .cmp-wrap { overflow-x: auto; }
.gsf .cmp { border-collapse: collapse; width: 100%; min-width: 620px; font-size: var(--t-s); table-layout: fixed; }
.gsf .cmp th, .gsf .cmp td { border-top: 1px solid var(--line); padding: 12px 16px; text-align: left; vertical-align: top; }
.gsf .cmp td { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.gsf .cmp thead th { font-weight: 500; border-top: 0; padding-top: 20px; position: relative; }
.gsf .cmp thead th:first-child { width: 180px; }
.gsf .cmp tbody th { font: var(--t-xs) var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 400; width: 180px; }
/* Row labels stay pinned on the left while the columns scroll sideways. */
.gsf .cmp tbody th, .gsf .cmp thead th:first-child { position: sticky; left: 0; z-index: 2; background: var(--panel); }
.gsf .cmp td.best { font-weight: 700; color: var(--text); }
.gsf .cmp td .muted { color: var(--muted); font-size: var(--t-xs); }
.gsf .cmp-photo { width: 120px; aspect-ratio: 4/3; padding: 10px; margin-bottom: 10px; }
.gsf .cmp-x { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font: 500 var(--t-m)/1 var(--mono); cursor: pointer; }
.gsf .cmp-x:hover { color: var(--text); border-color: var(--text); }
.gsf .cmp-buy td { font-family: var(--sans); }
/* Store rows in narrow table cells: no arrow, the price may wrap, stock on its own line. */
.gsf .cmp-shops { font-family: var(--sans); }
.gsf .cmp-shops .lc-buy, .gsf .cmp-shops li, .gsf .cmp-shops .lc-shop { min-width: 0; }
.gsf .cmp-shops .lc-shop { grid-template-columns: minmax(0, 1fr) auto; padding: 8px; }
.gsf .cmp-shops .s-stock { grid-column: 1 / -1; text-align: left; }
.gsf .cmp-shops .s-go { display: none; }
.gsf .cmp-shops .s-price { white-space: normal; text-align: right; }
/* Compare tray: what's picked and how many slots are left, always in view after the first pick. */
.gsf .cmp-tray { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: min(1280px, 100%); z-index: 30;
  display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding: 12px 20px;
  background: var(--panel); border: 1px solid var(--rule); border-bottom: 0; box-shadow: 0 -8px 24px rgba(0,0,0,.25); }
.gsf .cmp-tray[hidden], .gsf .cmp-tray [hidden] { display: none !important; }
.gsf .tray-n { display: inline-flex; align-items: center; font: 500 var(--t-xs) var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.gsf .tray-picks { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.gsf .tray-pick { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); padding: 4px 4px 4px 10px; font-size: var(--t-xs); max-width: 220px; }
.gsf .tray-pick button { border: 0; background: transparent; color: var(--muted); font: 500 var(--t-m)/1 var(--mono); cursor: pointer; padding: 0 6px; }
.gsf .tray-pick button:hover { color: var(--text); }
.gsf .cmp-tray.flash { animation: tray-flash .9s ease 2; }
@keyframes tray-flash{ 50% { border-color: var(--orange); box-shadow: 0 0 0 3px var(--glow), 0 -8px 24px rgba(0,0,0,.25); } }
.gsf.has-tray .gsf-wrap { padding-bottom: 120px; }

/* ---- What the data says: heatmap in ink shades (orange only for the reader's budget band) and four cards -- */
.gsf .ds { display: grid; }
.gsf .ds-hm { padding: 22px 24px 24px; border-bottom: 1px solid var(--rule); display: grid; gap: 10px; min-width: 0; }
.gsf .ds-h { margin: 0; font-size: var(--t-l); line-height: 1; letter-spacing: -.03em; font-weight: 600; }
.gsf .ds-sub { margin: 0; font-size: var(--t-s); color: var(--soft); }
.gsf #ds-you b { color: var(--accent-ink); font-weight: 500; }
.gsf .hm-wrap { min-width: 0; }
.gsf .hm { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; font: var(--t-xs) var(--mono); }
.gsf .hm thead th { font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 6px 2px; text-align: center; }
.gsf .hm tbody th { text-align: left; font: var(--t-s) var(--sans); color: var(--text); padding-right: 10px; width: 30%; }
.gsf .hm td { padding: 0; height: 40px; text-align: center; color: var(--muted); }
.gsf .hm-c { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 100%; height: 100%; cursor: pointer; font: 500 var(--t-s) var(--mono);
  color: var(--text); background: color-mix(in srgb, var(--text) calc(6% + var(--v) * .7%), transparent); }
.gsf .hm-c.dk { color: var(--panel); }
.gsf .hm-c:hover, .gsf .hm-c:focus-visible, .gsf .hm-c.sel { outline: 2px solid var(--text); outline-offset: -2px; }
.gsf .hm-s { display: none; }
.gsf .hm th.you { color: var(--accent-ink); }
.gsf .hm td.you .hm-c { box-shadow: inset 0 0 0 2px var(--orange); }
.gsf .ds-note { margin: 0; font: var(--t-xs) var(--mono); letter-spacing: .04em; color: var(--muted); min-height: 1.5em; }
.gsf .ds-foot { margin: 0; font-size: var(--t-xs); color: var(--muted); }
.gsf .ds-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gsf .ds-card { padding: 22px 24px 24px; display: grid; gap: 10px; align-content: start; min-width: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.gsf .ds-card:nth-child(2n) { border-right: 0; }
.gsf .ds-k { margin: 0; font-size: var(--t-m); line-height: 1.15; letter-spacing: -.02em; font-weight: 600; }
.gsf .ds-big { margin: 0; font: 400 var(--t-xl)/1 var(--mono); color: var(--accent-ink); letter-spacing: -.03em; }
.gsf .ds-txt { margin: 0; font-size: var(--t-s); line-height: 1.5; color: var(--soft); }
.gsf .box-stack { display: grid; }
.gsf .box-ex { grid-area: 1 / 1; min-width: 0; }
.gsf .box-ex.off { visibility: hidden; }
.gsf .box-name { margin: 0 0 4px; font-size: var(--t-s); }
.gsf .box-num { margin: 0; display: flex; align-items: baseline; gap: 14px; font: 400 var(--t-xl)/1 var(--mono); letter-spacing: -.03em; }
.gsf .box-num s { color: var(--muted); text-decoration-thickness: 3px; }
.gsf .box-num b { font-weight: 400; color: var(--accent-ink); }
.gsf .box-cap { margin: 6px 0 0; font: var(--t-xs) var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.gsf .box-nav { display: flex; align-items: center; gap: 10px; }
.gsf .box-go { all: unset; cursor: pointer; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); font: 18px/1 var(--mono); color: var(--text); }
.gsf .box-go:hover, .gsf .box-go:focus-visible { border-color: var(--text); }
.gsf .box-pos { font: var(--t-xs) var(--mono); color: var(--muted); }
.gsf .few-bar { display: flex; gap: 3px; height: 12px; }
.gsf .few-bar i { background: var(--accent-ink); }
.gsf .few-bar i + i { flex: 1; background: var(--line); }
.gsf .few-list summary { cursor: pointer; font: var(--t-xs) var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.gsf .few-list ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 3px; font-size: var(--t-xs); color: var(--soft); }
.gsf .few-list li span:last-child { color: var(--muted); font-family: var(--mono); margin-left: 8px; }
.gsf .waffle { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; max-width: 320px; }
.gsf .waffle i { aspect-ratio: 1; background: var(--line); }
.gsf .waffle i.on { background: var(--soft); }
.gsf .sweet { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; height: 140px; }
.gsf .sw-col { display: grid; grid-template-rows: 1fr auto; gap: 4px; text-align: center; min-width: 0; }
.gsf .sw-bar { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-height: 0; }
.gsf .sw-bar i { display: block; width: 100%; background: var(--line); max-height: calc(100% - 20px); }
.gsf .sw-col.best .sw-bar i { background: var(--text); }
.gsf .sw-v, .gsf .sw-l { font: var(--t-xs) var(--mono); color: var(--muted); }
.gsf .sw-col.best .sw-v { color: var(--text); font-weight: 600; }
.gsf .sw-axis { margin: 0; font: var(--t-xs) var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

/* ---- Added for the real page (M6): disclosure, trust markers, How we count / choose, forms ------------------ */
.gsf .disclose { margin: 0; font-size: var(--t-xs); line-height: 1.45; color: var(--muted); max-width: 70em; }
.gsf .marks { margin: -6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.gsf .mark { display: inline-flex; align-items: center; font: var(--t-xs) var(--mono); letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); border: 1px dashed var(--line); padding: 2px 6px; }
.gsf .mark .tip { margin-left: 6px; }
.gsf .prose-body { padding: 22px 24px 26px; display: grid; gap: 12px; max-width: 46em; }
.gsf .prose-body p { margin: 0; font-size: var(--t-s); line-height: 1.6; color: var(--soft); }
.gsf .prose-body .link { font-size: var(--t-xs); }
.gsf .gsf-form { border: 1px solid var(--rule); background: var(--panel); color: var(--text); padding: 0; width: min(520px, calc(100% - 32px)); }
.gsf .gsf-form::backdrop { background: rgba(0,0,0,.5); }
.gsf .gsf-form form { display: grid; gap: 14px; padding: 22px 24px 24px; }
.gsf .gsf-form h3 { margin: 0; font-size: var(--t-m); font-weight: 600; letter-spacing: -.02em; }
.gsf .gsf-form label { display: grid; gap: 6px; font: 500 var(--t-xs) var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.gsf .gsf-form input, .gsf .gsf-form textarea { font: var(--t-s) var(--sans); color: var(--text); background: var(--bg); border: 1px solid var(--line); padding: 10px 12px; text-transform: none; letter-spacing: 0; }
.gsf .gsf-form input:focus, .gsf .gsf-form textarea:focus { border-color: var(--text); outline: none; }
.gsf .form-product { margin: 0; font-size: var(--t-s); }
.gsf .form-help { margin: 0; font-size: var(--t-xs); line-height: 1.45; color: var(--muted); }
.gsf .form-msg { margin: 0; font-size: var(--t-s); color: var(--accent-ink); min-height: 1.2em; }
.gsf .form-go { display: flex; align-items: center; gap: 16px; }
.gsf .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Find a model (Sean, 1 Nov): a search above the results; a found card is pinned first with an orange outline (yours). */
.gsf .find { padding: 16px 20px; border-bottom: 1px solid var(--rule); display: grid; gap: 8px; }
.gsf .find-box { position: relative; max-width: 520px; }
.gsf .find input { width: 100%; font: var(--t-s) var(--sans); color: var(--text); background: var(--bg); border: 1px solid var(--line); padding: 10px 12px; }
.gsf .find input:focus { border-color: var(--text); outline: none; }
.gsf .find ul { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 0; padding: 0; list-style: none; background: var(--panel); border: 1px solid var(--text); border-top: 0; }
.gsf .find li { padding: 10px 12px; font-size: var(--t-s); cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
.gsf .find li.sel, .gsf .find li:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.gsf .find li.find-none { cursor: default; color: var(--muted); }
.gsf .find-tag { font: var(--t-xs) var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.gsf .find-msg { margin: 0; font-size: var(--t-s); line-height: 1.5; color: var(--soft); }
.gsf .find-msg b { color: var(--text); font-weight: 500; }
.gsf .find-msg .link { margin-left: 6px; }
.gsf .card.pinned { outline: 2px solid var(--orange); outline-offset: -2px; }

/* How we count: the text and a figure that tells the same story for readers who skip the text (Sean, 1 Nov). */
.gsf .prose-grid { display: grid; grid-template-columns: minmax(0, 46em) minmax(0, 1fr); align-items: start; }
.gsf .hwc-fig { margin: 0; padding: 26px 24px 26px 8px; }
.gsf .hwc-fig svg { display: block; width: 100%; max-width: 560px; height: auto; overflow: visible; }
.gsf .hwc-k { font: 500 13px var(--mono); letter-spacing: .08em; text-transform: uppercase; fill: var(--muted); }
.gsf .hwc-big { font: 400 52px var(--mono); letter-spacing: -.03em; fill: var(--text); }
.gsf .hwc-mid { font: 400 26px var(--mono); fill: var(--soft); }
.gsf .hwc-num { font: 500 22px var(--mono); fill: var(--text); }
.gsf .hwc-note { font: 400 15px var(--sans); fill: var(--soft); }
.gsf .hwc-port { font: 500 12px var(--mono); letter-spacing: .06em; fill: var(--muted); text-anchor: middle; }
.gsf .hwc-muted { fill: var(--muted); }
.gsf .hwc-hot-text { fill: var(--accent-ink); }
.gsf .hwc-strike { stroke: var(--text); stroke-width: 3; }
.gsf .hwc-panel, .gsf .hwc-line-only { fill: none; stroke: var(--text); stroke-width: 1.5; }
.gsf .hwc-hot circle { fill: none; stroke: var(--orange); stroke-width: 3; }
.gsf .hwc-ghost { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 4; }
.gsf .hwc-lead { stroke: var(--text); stroke-width: 1.5; }
.gsf .hwc-hot-line { stroke: var(--orange); stroke-width: 2; }
.gsf .hwc-ghost-line { stroke: var(--muted); stroke-dasharray: 4 4; }
.gsf .hwc-rule { stroke: var(--line); stroke-width: 1; }

/* How we choose (Sean, 1 Nov): five numbered rules in ruled cells, like the leader boards; the number leads. */
.gsf .choose { list-style: none; margin: 0 -1px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.gsf .choose li { display: grid; align-content: start; gap: 8px; padding: 22px 22px 24px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); min-width: 0; }
.gsf .choose-n { font: 400 var(--t-l)/1 var(--mono); letter-spacing: -.02em; color: var(--muted); }
.gsf .choose b { font-size: var(--t-m); line-height: 1.2; font-weight: 600; letter-spacing: -.015em; text-wrap: balance; }
.gsf .choose li > span:last-child { font-size: var(--t-s); line-height: 1.45; color: var(--soft); }
.gsf .choose-foot { margin: 0; padding: 14px 24px 18px; font-size: var(--t-xs); line-height: 1.5; color: var(--muted); }
.gsf .choose-foot .link { margin-left: 4px; }

/* FAQ (Sean, 2 Nov): the page's WordPress text as ruled question cells, two across, like How we choose. */
.gsf .faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 -1px -1px 0; }
.gsf .qa { padding: 22px 24px 24px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); min-width: 0; }
.gsf .qa h3 { margin: 0 0 8px; font-size: var(--t-m); line-height: 1.25; font-weight: 600; letter-spacing: -.015em; text-wrap: balance; }
.gsf .qa p { margin: 0 0 8px; font-size: var(--t-s); line-height: 1.55; color: var(--soft); }
.gsf .qa p:last-child { margin-bottom: 0; }
.gsf .qa a { color: var(--text); }

/* ---- Narrow containers ----------------------------------------------------------------------------------- */
/* Product cards: the in/out line shrinks in narrow cards. */
@container (max-width: 300px) { .gsf .io-main b { font-size: 22px; } }
@container (max-width: 250px) { .gsf .io-main b { font-size: 19px; } }
/* Leader-card store rows: when the card is too narrow for one line, stock moves under the store name. */
@container buy (max-width: 420px) {
  .gsf .lc-shop { grid-template-columns: minmax(0, 1fr) auto 14px; grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; }
  .gsf .lc-shop .s-name { grid-column: 1; grid-row: 1; }
  .gsf .lc-shop .s-stock { grid-column: 1; grid-row: 2; text-align: left; font-size: 10px; }
  .gsf .lc-shop .s-price { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .gsf .lc-shop .s-go { grid-column: 3; grid-row: 1 / 3; align-self: center; }
}

/* ---- Phones and touch screens: every control at least 44px tall ----------------------------------------- */
@media (pointer: coarse), (max-width: 860px) {
  .gsf .chip, .gsf .buy, .gsf .res-head select { min-height: 44px; }
  .gsf .chip { padding: 0 14px; }
  .gsf .buy { padding: 0 16px; }
  .gsf .check { min-height: 44px; margin: 0; }
  .gsf .check input { width: 20px; height: 20px; }
  .gsf .link { min-height: 44px; display: inline-flex; align-items: center; }
  .gsf .range input[type=range] { height: 44px; }
  .gsf .step button { width: 44px; height: 44px; }
  .gsf .ask select { height: 44px; }
  .gsf .lc-shop { min-height: 44px; }
  .gsf .shop-none { min-height: 44px; }
  .gsf .near li { grid-template-columns: 56px minmax(0, 1fr); }
  .gsf .near li .chip { grid-column: 2; justify-self: start; }
  .gsf .nm-photo { width: 56px; }
  .gsf .cmp-x { width: 44px; height: 44px; top: 6px; right: 6px; }
  .gsf .cmp-bar .check { min-height: 44px; }
  .gsf .flip button { min-height: 44px; min-width: 44px; }
  .gsf .tray-pick button { min-width: 44px; min-height: 44px; }
  .gsf .find li { min-height: 44px; align-items: center; }
  .gsf .find input { min-height: 44px; }
  /* iPhone Safari zooms the whole page into any text box or dropdown under 16px and stays zoomed (2 Nov). */
  .gsf .find input, .gsf .gsf-form input, .gsf .gsf-form textarea, .gsf .ask select, .gsf .res-head select { font-size: 16px; }
  .gsf .lc-pick { min-height: 44px; align-items: center; }
  .gsf .box-go { width: 44px; height: 44px; }
  .gsf .theme-tg { min-height: 44px; }
  .gsf .hm td { height: 44px; }
}

/* ---- Narrow screens -------------------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .gsf .hero { padding: 26px 20px 22px; }
  .gsf .hero-top { grid-template-columns: 1fr; }
  .gsf .nums { grid-auto-flow: column; justify-content: start; justify-items: start; text-align: left; gap: 28px; }
  .gsf .num b { font-size: var(--t-l); }
  .gsf .stats p { font-size: var(--t-m); }
  .gsf .sec-head h2 { font-size: var(--t-l); }
  .gsf .ask { padding: 22px 20px 24px; }
  /* Start here as tidy rows: label left, control right; the sentence words are for wide screens (Sean, 2 Nov). */
  .gsf .ask-q { display: grid; gap: 8px; font-size: var(--t-s); letter-spacing: 0; color: var(--text); }
  .gsf .phrase.ph-lead, .gsf .ph-w { display: none; }
  .gsf .phrase { display: flex; justify-content: space-between; gap: 12px; }
  .gsf .row-l { display: inline; }
  .gsf .step b { min-width: 64px; }
  .gsf .ask select { width: 154px; }  /* the steppers are 44 + 64 + 44 plus their border */
  .gsf .must-grid { grid-template-columns: 1fr 1fr; }
  .gsf .must { padding: 10px 12px; }
  .gsf .must span { display: none; padding-left: 0; }
  .gsf .must.on span { display: block; }  /* the hint confirms what was ticked */
  .gsf .leads { grid-template-columns: 1fr; }
  .gsf .lc-photo { aspect-ratio: 3/1; }
  .gsf .finder { grid-template-columns: 1fr; }
  .gsf .choose { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gsf .prose-grid { grid-template-columns: minmax(0, 1fr); }
  .gsf .hwc-fig { order: -1; padding: 20px 12px 4px; }  /* on phones the picture comes first, for readers who skim */
  .gsf .filters { display: none; position: fixed; inset: 0; z-index: 1000; border: 0; padding: 0 20px; overflow-y: auto; overscroll-behavior: contain; background: var(--panel); }
  .gsf .filters.open { display: grid; }
  .gsf .f-top { display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 1; padding: 8px 0; background: var(--panel); border-bottom: 1px solid var(--rule); }
  .gsf .f-top .mono { font: 500 var(--t-xs) var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
  .gsf .f-x { width: 44px; height: 44px; border: 1px solid var(--line); background: transparent; color: var(--text); font: 500 var(--t-m)/1 var(--mono); cursor: pointer; }
  .gsf .f-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; position: sticky; bottom: 0; z-index: 1; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); background: var(--panel); border-top: 1px solid var(--rule); }
  .gsf .f-show { display: inline-flex; align-items: center; justify-content: center; background: var(--text); border-color: var(--text); color: var(--panel); }
  .gsf .f-open { display: inline-flex; align-items: center; gap: 8px; }
  .gsf .f-n:empty { display: none; }
  .gsf .f-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; background: var(--orange); color: var(--on-orange); font: 600 var(--t-xs)/1 var(--mono); letter-spacing: 0; }
  .gsf .cmp { min-width: calc(120px + var(--n, 2) * 200px); }  /* about 200px a model: one fits the screen, three or four scroll sideways instead of squeezing the store boxes */
  .gsf .cmp thead th:first-child, .gsf .cmp tbody th { width: 120px; }
  .gsf .tray-picks { display: none; }
  .gsf .cmp-tray { justify-content: space-between; padding: 10px 16px; }
}
@media (max-width: 760px) {
  .gsf .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .gsf .ds-cards { grid-template-columns: minmax(0, 1fr); }
  .gsf .ds-card { border-right: 0; }
  .gsf .hm-l { display: none; } .gsf .hm-s { display: inline; }
  .gsf .hm tbody th { font-size: var(--t-xs); width: 34%; }
  .gsf .hm-c { font-size: var(--t-xs); }
  .gsf .ds-hm, .gsf .ds-card { padding: 18px 16px 20px; }
}
@media (max-width: 560px) { .gsf .choose { grid-template-columns: minmax(0, 1fr); } }

/* ---- Reduced motion -------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .gsf .hero-link { transition: none; }
  .gsf, .gsf .s-go { transition: none; }
  .gsf .cmp-tray.flash { animation: none; border-color: var(--orange); }
}

.gsf .gsf-wrap { max-width: none; width: min(var(--theme-container-edge-spacing, 90vw), var(--theme-normal-container-max-width, 1290px));
  padding-left: 0; padding-right: 0; }