/* fitmyflat.com — a drafting sheet, not a shopfront.

   The site's claim is that it measured things, so the interface is built from
   the vocabulary of measurement: hairline rules, dimension ticks, tabular
   numerals, line drawings. There are no photographs and no AI art anywhere
   here, because an image that implies we handled the product would be a claim
   we cannot support.

   Both themes are designed, not derived. An earlier version defined the
   palette for dark and remapped only two accents for light, which left the
   verdict chips — the single most important thing the site outputs — at
   1.5:1 in daylight. Every colour pair below is checked against WCAG AA and
   the check runs in qa_site.py, so it cannot rot again. */

@font-face{font-family:"Bricolage";src:url("/fonts/BricolageDisplay.woff2") format("woff2");
  font-weight:200 800;font-display:swap}

/* ── palette ─────────────────────────────────────────────
   --on-accent is the reason the light theme works: the accents are bright in
   dark mode (so they take near-black text) and deep in light mode (so they
   take white). One variable, and every gradient button is legible in both. */
:root{
  --bg:#f6f7f9; --bg-2:#eef0f4; --panel:#fff; --panel-2:#f1f3f7;
  --ink:#0c0f16; --ink-2:#454d5f; --ink-3:#616a80;
  --line:#e2e6ee; --line-2:#ccd3e0;
  --a1:#2f7d17; --a2:#0a6f87; --on-accent:#fff;
  --good:#0c6b34; --ok:#1b5fb0; --warn:#8a5300; --bad:#b8332a;
  --tint:14%;
  --grad:linear-gradient(115deg,var(--a1),var(--a2));
  --r:14px; --maxw:1120px;
  --shadow:0 1px 2px rgb(12 15 22/.04),0 8px 24px -12px rgb(12 15 22/.10);
  --grid-ink:rgb(12 15 22/.045);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0b0c10; --bg-2:#101219; --panel:#14161d; --panel-2:#1a1d26;
  --ink:#f2f4f8; --ink-2:#aab2c2; --ink-3:#8a93a8;
  --line:#232733; --line-2:#2f3543;
  --a1:#a3ff12; --a2:#22d3ee; --on-accent:#06121a;
  --good:#5ee08a; --ok:#7cc4ff; --warn:#ffc44d; --bad:#ff7b7b;
  --tint:16%;
  --shadow:0 1px 2px rgb(0 0 0/.4),0 12px 32px -16px rgb(0 0 0/.7);
  --grid-ink:rgb(255 255 255/.035);
  color-scheme:dark;
}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.6 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:99;background:var(--panel);padding:10px 16px;border-radius:8px;
  box-shadow:var(--shadow)}
:focus-visible{outline:2px solid var(--a2);outline-offset:3px;border-radius:6px}

/* ── header ─────────────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 84%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;height:62px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:700;letter-spacing:-.02em}
.logo-mark{width:16px;height:16px;border-radius:5px;background:var(--grad);flex:none}
.logo-text{font-family:"Bricolage",sans-serif;font-size:18px;font-weight:500}
.logo-text b{font-weight:800}
.site-nav{display:flex;gap:4px;flex-wrap:wrap}
.site-nav a{text-decoration:none;color:var(--ink-2);font-size:14px;font-weight:500;
  padding:7px 12px;border-radius:8px;transition:color .15s,background .15s}
.site-nav a:hover{color:var(--ink);background:var(--panel-2)}
.site-nav a[aria-current]{color:var(--ink);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line-2)}

/* ── hero ────────────────────────────────────────────────
   The backdrop is a 1 cm drafting grid fading out downwards. It is the only
   decoration on the page and it earns its place by saying, before a word is
   read, what kind of site this is. */
.hero{padding:80px 0 58px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--grid-ink) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-ink) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:linear-gradient(180deg,#000 0,transparent 88%);
          mask-image:linear-gradient(180deg,#000 0,transparent 88%)}
.hero::after{content:"";position:absolute;inset:-45% 25% auto -12%;height:520px;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--a2) 13%,transparent),transparent)}
.hero-inner{position:relative;max-width:830px}
.hero-eyebrow{margin:0 0 16px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700}
.hero-title{font-family:"Bricolage",sans-serif;font-weight:800;letter-spacing:-.035em;
  font-size:clamp(38px,7vw,72px);line-height:1.02;margin:0 0 20px}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{font-size:clamp(16px,2vw,18.5px);color:var(--ink-2);max-width:62ch;margin:0 0 30px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}

/* ── buttons ────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:600;
  font-size:15px;padding:12px 20px;border-radius:11px;border:1px solid var(--line-2);
  background:var(--panel);color:var(--ink);
  transition:transform .12s,border-color .15s,background .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px);border-color:var(--ink-3);box-shadow:var(--shadow)}
.btn--primary,.btn--buy{background:var(--grad);color:var(--on-accent);border-color:transparent;
  font-weight:700}
.btn--primary:hover,.btn--buy:hover{filter:brightness(1.08)}
.btn--ghost{background:transparent}
/* compact variant for table rows: same colours as .btn--buy, sized for a cell */
.btn--sm{font-size:13px;padding:6px 12px;border-radius:8px;gap:6px;white-space:nowrap}
.arr{transition:transform .15s}
.btn:hover .arr{transform:translateX(3px)}

/* ── generic page ───────────────────────────────────────── */
.page{padding:44px 0 80px}
.page h1{font-family:"Bricolage",sans-serif;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(28px,4.6vw,46px);line-height:1.08;margin:0 0 18px;text-wrap:balance}
.page h2{font-family:"Bricolage",sans-serif;font-weight:700;letter-spacing:-.02em;
  font-size:clamp(20px,2.6vw,27px);margin:42px 0 12px;text-wrap:balance}
.page h3{font-size:17px;margin:26px 0 8px;font-weight:650}
.page p{color:var(--ink-2);max-width:74ch}
/* Scoped to prose deliberately. A bare `.page a` outranks every component
   rule inside it — .btn, .card-cta, .link-grid a — because it carries a class
   and they carry only their own. That is why the buy button read as dark teal
   text on a dark teal gradient: the link colour was winning over the button
   colour on every page wrapped in .page. */
.page :is(p,.lede,dd,.guide li) a:not(.btn){color:var(--a2);text-underline-offset:3px}
.lede{font-size:17px;color:var(--ink-2)}
.crumbs{font-size:13px;color:var(--ink-3);margin:0 0 20px}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--ink-2)}
.meta{color:var(--ink-3);font-size:13px}

/* ── answer box: the passage engines lift ─────────────────
   Kept visually quiet and structurally first on every page, because this is
   the block an assistant quotes. */
.answer-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px 20px 25px;margin:0 0 26px;position:relative;overflow:hidden;
  box-shadow:var(--shadow)}
.answer-box::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad)}
.answer-box p{margin:0;color:var(--ink);font-size:16.5px;max-width:78ch}

/* ── data tables ────────────────────────────────────────── */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:14px 0 8px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);box-shadow:var(--shadow)}
table.data{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
table.data th{text-align:left;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;padding:12px 14px;border-bottom:1px solid var(--line);
  background:var(--panel-2);white-space:nowrap}
table.data td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
table.data tbody tr:last-child td{border-bottom:0}
table.data tbody tr:hover td{background:var(--panel-2)}
table.data td:first-child{color:var(--ink);font-weight:550}
table.data a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2)}
table.data a:hover{border-color:var(--a2);color:var(--a2)}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.compare th:first-child{width:120px}
/* Columns the data does not fill should not reserve space for themselves. */
table.data th:empty,table.data td:empty{padding-left:0;padding-right:0}

/* ── verdict chips ───────────────────────────────────────
   A verdict is the site's output, so it gets a colour *and* a dot: colour
   alone fails anyone who cannot separate green from amber. */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  padding:4px 10px;border-radius:999px;white-space:nowrap;letter-spacing:.01em;
  border:1px solid transparent}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.chip--good{background:color-mix(in srgb,var(--good) var(--tint),var(--panel));color:var(--good);
  border-color:color-mix(in srgb,var(--good) 26%,transparent)}
.chip--ok{background:color-mix(in srgb,var(--ok) var(--tint),var(--panel));color:var(--ok);
  border-color:color-mix(in srgb,var(--ok) 26%,transparent)}
.chip--warn{background:color-mix(in srgb,var(--warn) var(--tint),var(--panel));color:var(--warn);
  border-color:color-mix(in srgb,var(--warn) 26%,transparent)}
.chip--bad{background:color-mix(in srgb,var(--bad) var(--tint),var(--panel));color:var(--bad);
  border-color:color-mix(in srgb,var(--bad) 26%,transparent)}
.chip--none{background:var(--panel-2);color:var(--ink-3);border-color:var(--line)}
.conf{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:3px 8px;border-radius:6px;background:var(--panel-2);color:var(--ink-3);
  border:1px solid var(--line)}
.conf--high{color:var(--good);border-color:color-mix(in srgb,var(--good) 30%,transparent)}
.conf--medium{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.conf--low{color:var(--ink-3)}

/* ── spec grid ──────────────────────────────────────────── */
.spec-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin:22px 0}
.spec{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  box-shadow:var(--shadow)}
.spec-k{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  font-weight:700;margin-bottom:5px}
.spec-v{display:block;font-size:19px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* ── method note ────────────────────────────────────────── */
.method{background:var(--panel-2);border:1px dashed var(--line-2);border-radius:var(--r);
  padding:18px 20px;margin:26px 0}
.method h3{margin:0 0 8px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.method p{margin:0;font-size:14.5px}

/* ── line drawings ───────────────────────────────────────
   The sprite strokes with currentColor, so the card sets the colour and the
   drawing follows it. .eq-dim is the dimension rule under every machine —
   held back so it reads as annotation, not as part of the object. */
/* An inline <svg> whose only size is a viewBox falls back to the CSS default
   300x150. Under `place-items:center` that default wins, so the drawings sat
   at a fixed 300px in every card regardless of the card's width. Stretch them
   instead, and cap the width so a double-width card does not blow one up. */
.eq{width:100%;max-width:330px;height:auto;display:block;color:inherit}
.eq-dim{opacity:.45}
.eq-soft{opacity:.4}
.eq-label{opacity:1}
.eq-caption{opacity:.65}
.fig{width:100%;height:auto;display:block;color:var(--a2)}

/* ── product grid ───────────────────────────────────────── */
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));margin:24px 0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .15s,border-color .15s,box-shadow .15s}
.card:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:var(--shadow)}
.card-art{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;
  font-size:44px;position:relative;padding:16px 22px 32px;border-bottom:1px solid var(--line);
  background:var(--panel-2);color:var(--a1)}
.card-art>*{position:relative;z-index:1}
/* The category tint is a compound selector: the builder puts cat-* on the same
   element as card-art, so a descendant selector — which is what this file used
   to carry — matched nothing and every category looked identical. */
.card-art.cat-cardio      { color:#0a6f87 }
.card-art.cat-compact     { color:#2f7d17 }
.card-art.cat-strength    { color:#6d4aa8 }
.card-art.cat-recovery    { color:#b8562a }
.card-art.cat-accessories { color:#1b5fb0 }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .card-art.cat-cardio      { color:#22d3ee }
  :root:not([data-theme="light"]) .card-art.cat-compact     { color:#a3ff12 }
  :root:not([data-theme="light"]) .card-art.cat-strength    { color:#c4a6ff }
  :root:not([data-theme="light"]) .card-art.cat-recovery    { color:#ffb27c }
  :root:not([data-theme="light"]) .card-art.cat-accessories { color:#7cc4ff }
}
.card--big .card-art{aspect-ratio:21/9;padding:18px 26px 34px}
.card--big .eq{max-width:400px}
.badge{position:absolute;top:10px;left:10px;z-index:2;font-size:10.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:6px;
  background:var(--grad);color:var(--on-accent)}
/* The one fact on the card that is true of this listing and no other. Sits on
   the drawing rather than in the body copy, so the eye gets shape and size in
   the same glance. */
.card-spec{position:absolute;right:12px;bottom:10px;z-index:2;font-size:11.5px;font-weight:650;
  letter-spacing:.01em;color:var(--ink-3);font-variant-numeric:tabular-nums;
  background:color-mix(in srgb,var(--panel) 78%,transparent);backdrop-filter:blur(3px);
  padding:3px 8px;border-radius:6px;border:1px solid var(--line)}
.card-body{padding:15px 16px 17px;display:flex;flex-direction:column;gap:8px;flex:1}
.card-cat{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.card-title{font-size:15px;line-height:1.35;margin:0;font-weight:600}
.card-cta{margin-top:auto;display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-size:14px;font-weight:700;color:var(--ink);padding-top:6px}
.card-cta:hover{color:var(--a2)}
.card-ours{font-size:13px;color:var(--a2);text-decoration:none;border-bottom:1px solid transparent;
  align-self:flex-start}
.card-ours:hover{border-color:var(--a2)}
.grid-note{color:var(--ink-3);font-size:14px;max-width:70ch}
.grid-section,.category-page{padding:10px 0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:38px 0 6px}
.section-head h2{margin:0}
.section-head a{color:var(--a2);text-decoration:none;font-size:14px;font-weight:600}
.empty{color:var(--ink-3)}

/* ── toolbar / filters ───────────────────────────────────
   .toolbar is a full-bleed section whose only child is .wrap, so the flex row
   has to be declared on .wrap. Declaring it on .toolbar — which is what this
   file used to do — laid out a single item and left the search field and the
   filter pills stacked. */
.toolbar{padding:10px 0 4px}
.toolbar .wrap{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.search{flex:1 1 260px;position:relative;display:flex;align-items:center}
/* Sizing this SVG is not cosmetic: an inline <svg> with a viewBox and no
   intrinsic size renders at the CSS-default 300x150, which is exactly what
   this page shipped — a 450px empty box where the search field should be. */
.search .icon{position:absolute;left:14px;width:17px;height:17px;pointer-events:none;
  stroke:var(--ink-3);fill:none}
.search input{width:100%;background:var(--panel);border:1px solid var(--line);color:var(--ink);
  padding:12px 14px 12px 41px;border-radius:11px;font:inherit;font-size:14.5px;
  transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.search input::placeholder{color:var(--ink-3)}
.search input:focus{outline:none;border-color:var(--a2);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--a2) 18%,transparent)}
.search:focus-within .icon{stroke:var(--a2)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips .chip,.chips a{background:var(--panel);border:1px solid var(--line);color:var(--ink-2);
  padding:8px 14px;border-radius:999px;font-size:13.5px;font-weight:600;text-decoration:none;
  cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.chips .chip::before{display:none}
.chips .chip:hover,.chips a:hover{border-color:var(--ink-3);color:var(--ink)}
.chips .chip[aria-pressed="true"],.chips a[aria-current]{background:var(--grad);color:var(--on-accent);
  border-color:transparent}

/* ── trust bar ───────────────────────────────────────────
   The builder emits <dl><div><dt>n</dt><dd>label</dd></div></dl> inside a
   .wrap. The previous rules styled `.trust-bar > *` and `.trust-bar strong`,
   neither of which exists here, so four headline figures rendered as an
   indented browser-default definition list. */
.trust-bar{background:var(--bg-2);border-block:1px solid var(--line);margin:10px 0 0}
.trust-bar dl{display:grid;gap:26px 34px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  margin:0;padding:30px 0}
.trust-bar dl>div{position:relative;padding-left:16px}
.trust-bar dl>div::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;
  background:var(--grad);border-radius:2px;opacity:.75}
.trust-bar dt{font-family:"Bricolage",sans-serif;font-size:30px;font-weight:800;
  letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.trust-bar dd{margin:6px 0 0;font-size:13.5px;line-height:1.45;color:var(--ink-3);max-width:30ch}

/* ── feature card ───────────────────────────────────────── */
.feature{margin:54px auto}
.feature-card{display:grid;gap:30px;grid-template-columns:1.05fr .95fr;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:32px;
  overflow:hidden;box-shadow:var(--shadow)}
.feature-body h2{font-family:"Bricolage",sans-serif;font-weight:800;letter-spacing:-.025em;
  font-size:clamp(22px,3vw,31px);margin:8px 0 12px;text-wrap:balance}
.feature-body p{color:var(--ink-2);max-width:56ch;margin:0 0 20px}
/* Was a bare gradient rectangle — a coloured hole where the argument should
   be. It now carries the room section the whole site is about. */
.feature-art{background:var(--panel-2);border:1px solid var(--line);border-radius:14px;
  padding:18px;display:grid;place-items:center;align-self:stretch}
.feature-art:empty{display:none}

.method-strip{margin:54px auto;padding:28px;border:1px dashed var(--line-2);border-radius:var(--r);
  background:var(--panel-2)}
.method-strip h2{font-family:"Bricolage",sans-serif;font-weight:700;letter-spacing:-.02em;
  font-size:clamp(20px,2.6vw,27px);margin:6px 0 10px}
.method-strip p{color:var(--ink-2);max-width:74ch}
.method-strip a{color:var(--a2);text-decoration:none;font-weight:600}
.guides-strip{margin:54px auto}
.guide-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:16px}
.guide-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px;
  text-decoration:none;display:flex;flex-direction:column;gap:9px;
  transition:transform .15s,border-color .15s,box-shadow .15s}
.guide-card:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:var(--shadow)}
.guide-card h3{margin:0;font-size:16.5px;line-height:1.35;color:var(--ink);text-wrap:balance}
.guide-desc{margin:0;font-size:14px;color:var(--ink-2)}
.eyebrow{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.guide-more{margin-top:auto;font-size:13.5px;font-weight:700;color:var(--a2);display:inline-flex;gap:6px}

/* ── the fit tool ───────────────────────────────────────── */
.tool{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px;margin:24px 0;
  box-shadow:var(--shadow)}
.tool-controls{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.tool-controls label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.tool-controls select{background:var(--panel-2);border:1px solid var(--line-2);color:var(--ink);
  padding:11px 12px;border-radius:10px;font:inherit;font-size:14.5px;font-weight:500;
  letter-spacing:0;text-transform:none}
.tool-controls select:focus-visible{border-color:var(--a2)}
.tool-result{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.verdict-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.verdict-num{font-family:"Bricolage",sans-serif;font-size:clamp(34px,6vw,54px);font-weight:800;
  letter-spacing:-.035em;line-height:1;background:var(--grad);-webkit-background-clip:text;
  background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.verdict-note{font-size:14.5px;color:var(--ink-2);max-width:70ch}
.bars{display:grid;gap:10px;margin-top:18px}
.bar-row{display:grid;grid-template-columns:130px 1fr auto;gap:12px;align-items:center;font-size:13.5px}
.bar{height:8px;border-radius:999px;background:var(--panel-2);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line)}
.bar>i{display:block;height:100%;border-radius:999px;background:var(--grad)}

/* ── link + answer lists ────────────────────────────────── */
.link-grid{list-style:none;padding:0;margin:14px 0;display:grid;gap:9px;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.link-grid a{display:block;background:var(--panel);border:1px solid var(--line);border-radius:11px;
  padding:12px 15px;text-decoration:none;color:var(--ink);font-size:14px;font-weight:550;
  transition:border-color .15s,transform .15s}
.link-grid a:hover{border-color:var(--a2);transform:translateY(-2px)}
.answer-list{list-style:none;padding:0;margin:18px 0;display:grid;gap:11px}
.answer-list a{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:17px 19px;text-decoration:none;transition:border-color .15s,box-shadow .15s}
.answer-list a:hover{border-color:var(--a2);box-shadow:var(--shadow)}
.answer-list strong{display:block;color:var(--ink);font-size:15.5px;margin-bottom:5px;font-weight:650}
.answer-list span{color:var(--ink-2);font-size:14px}

/* ── footer ─────────────────────────────────────────────── */
.site-footer{border-top:1px solid var(--line);background:var(--bg-2);margin-top:70px;padding:44px 0 34px}
.footer-top{display:flex;gap:34px;justify-content:space-between;flex-wrap:wrap;margin-bottom:26px}
.footer-brand p{margin:8px 0 0;color:var(--ink-3);font-size:14px;max-width:34ch}
.footer-nav{display:grid;gap:9px 30px;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));flex:1 1 260px;min-width:0;max-width:560px}
.footer-nav a{color:var(--ink-2);text-decoration:none;font-size:14px}
.footer-nav a:hover{color:var(--a2)}
.disclosure{color:var(--ink-3);font-size:12.5px;line-height:1.6;margin:0;padding-top:22px;
  border-top:1px solid var(--line);max-width:none}
.disclosure-inline{color:var(--ink-3);font-size:13px;margin-top:34px;padding-top:16px;border-top:1px solid var(--line)}

@media(max-width:860px){
  .feature-card{grid-template-columns:1fr;padding:26px}
  .trust-bar dl{gap:22px 26px;padding:26px 0}
  .trust-bar dt{font-size:26px}
}
@media(max-width:760px){
  .bar-row{grid-template-columns:100px 1fr auto;font-size:12.5px}
  .hero{padding:54px 0 40px}
  .site-nav a{padding:6px 9px;font-size:13.5px}
  .card--big{grid-column:span 1}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── remaining components ───────────────────────────────── */
.byline{font-size:13px;color:var(--ink-3);margin:-8px 0 22px}
.guide{max-width:none}
.guide h2{margin-top:38px}
.guide ul,.guide ol{color:var(--ink-2);max-width:74ch;padding-left:22px}
.guide li{margin:7px 0}
.guide li strong{color:var(--ink)}
.wrap-grid{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.card--big{grid-column:span 2}
@media(max-width:620px){.card--big{grid-column:span 1}}
.display{font-family:"Bricolage",sans-serif;font-weight:800;letter-spacing:-.03em}

/* open-data page */
.dataset{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 24px;margin:16px 0;box-shadow:var(--shadow)}
.dataset h2{margin:0 0 8px;font-size:19px}
.dataset p{margin:0 0 12px}
.dataset-meta{font-size:13px;color:var(--ink-3)}
.dataset-meta code{background:var(--panel-2);padding:2px 7px;border-radius:5px;font-size:12px;
  color:var(--ink-2);border:1px solid var(--line)}

/* FAQ blocks */
.faq{margin:38px 0}
.faq-item{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:16px 19px;margin:10px 0}
.faq-item h3{margin:0 0 6px;font-size:15.5px;color:var(--ink);font-weight:650}
.faq-item p{margin:0;font-size:14.5px}

/* Two buy controls side by side on comparison pages; wraps to a column on a
   phone rather than forcing a horizontal scroll. */
.buy-row{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 6px}
.buy-row .btn{flex:1 1 240px;min-width:0;justify-content:center}

/* The verdict's buy control. Full width under the result so it is a real tap
   target on a phone — as a bare .card-cta text link it measured 28 px tall,
   under every mobile minimum, on the one control the tool exists to produce. */
.fit-cta{display:flex;width:100%;justify-content:center;margin-top:16px;min-height:48px}

/* Below ~400px the doorway rows could not fit: a 100px label plus a chip whose
   longest verdict ("Fits, with room to spare") measures 152px leaves nothing
   for the bar, and the `auto` chip column cannot shrink — so the page scrolled
   sideways. Here the bar-row stacks: label and verdict on one line, the bar
   spanning the row beneath. */
@media(max-width:400px){
  .bar-row{grid-template-columns:1fr auto;gap:6px 10px}
  .bar-row > :nth-child(1){grid-area:1/1/2/2}
  .bar-row > :nth-child(2){grid-area:2/1/3/3}
  .bar-row > :nth-child(3){grid-area:1/2/2/3}
}