/* ==========================================================================
   Simmer & Set — design system
   Direction: cast-iron & slow-braise. Warm cream over charcoal, ember accent,
   sage secondary. One idea: the dial — scores render as control-knob arcs.
   ========================================================================== */

:root{
  /* ink & surface */
  --ink:#14100d;
  --ink-2:#221b16;
  --ink-3:#332a22;
  --surface:#faf6f0;
  --surface-2:#f3ece2;
  --panel:#ffffff;
  --panel-warm:#fbf5ec;
  --line:#e6dccd;
  --line-2:#d3c6b2;

  /* accents */
  --ember:#c8471c;
  --ember-soft:#e8734a;
  --ember-tint:#fbe9e1;
  --sage:#4c6b53;
  --sage-soft:#7d9a83;
  --sage-tint:#e7eee8;

  /* text tiers */
  --t1:#1a1410;
  --t2:#554a41;
  --t3:#8b7d70;
  --t-on-dark-1:#fbf7f1;
  --t-on-dark-2:#cbbfb1;
  --t-on-dark-3:#9c9083;

  /* type */
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --text:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --fs-xs:clamp(.72rem,.70rem + .08vw,.78rem);
  --fs-sm:clamp(.82rem,.79rem + .12vw,.9rem);
  --fs-base:clamp(.95rem,.92rem + .16vw,1.05rem);
  --fs-lg:clamp(1.08rem,1.02rem + .3vw,1.24rem);
  --fs-xl:clamp(1.3rem,1.16rem + .62vw,1.72rem);
  --fs-2xl:clamp(1.6rem,1.32rem + 1.25vw,2.5rem);
  --fs-3xl:clamp(2.1rem,1.6rem + 2.3vw,3.6rem);
  --fs-4xl:clamp(2.4rem,1.75rem + 3.2vw,4.4rem);

  /* space scale */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem;

  /* radii, shadow, easing */
  --r-sm:6px; --r-md:12px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(20,16,13,.06),0 2px 8px rgba(20,16,13,.05);
  --sh-2:0 2px 6px rgba(20,16,13,.07),0 12px 28px rgba(20,16,13,.09);
  --sh-3:0 8px 20px rgba(20,16,13,.1),0 28px 64px rgba(20,16,13,.14);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* layout */
  --wrap:1200px;
  --header-h:68px;
}

/* --------------------------------------------------------------- reset/base */
*,*::before,*::after{box-sizing:border-box}
html{
  overflow-x:clip;               /* off-canvas drawer must not widen the page */
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  background:var(--surface);
  color:var(--t1);
  font-family:var(--text);
  font-size:var(--fs-base);
  line-height:1.65;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.1;margin:0;letter-spacing:-.015em}
h1{font-size:var(--fs-3xl)}
h2{font-size:var(--fs-2xl)}
h3{font-size:var(--fs-lg)}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--ember);outline-offset:2px;border-radius:4px}
::selection{background:var(--ember);color:#fff}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s5)}
@media (max-width:560px){.wrap{padding-inline:var(--s4)}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ------------------------------------------------------------------ buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font:inherit;font-weight:600;font-size:var(--fs-sm);text-align:center;color:inherit;
  border:1px solid transparent;border-radius:var(--r-pill);
  padding:.72em 1.35em;cursor:pointer;white-space:nowrap;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--ember);color:#fff;box-shadow:0 6px 18px rgba(200,71,28,.28)}
.btn-primary:hover{background:#b23d16;box-shadow:0 10px 26px rgba(200,71,28,.34)}
.btn-ghost{background:transparent;color:var(--t1);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink);background:var(--panel)}
.btn-dark{background:var(--ink);color:var(--t-on-dark-1)}
.btn-dark:hover{background:#000}
.btn-on-dark{background:rgba(255,255,255,.08);color:var(--t-on-dark-1);border-color:rgba(255,255,255,.22)}
.btn-on-dark:hover{background:rgba(255,255,255,.15)}
.btn-sm{padding:.5em 1em;font-size:var(--fs-xs)}
.btn-block{display:flex;width:100%}

/* --------------------------------------------------------------------- chip */
.chip{
  display:inline-flex;align-items:center;gap:.4em;
  font:inherit;font-size:var(--fs-xs);font-weight:600;letter-spacing:.02em;
  padding:.3em .75em;border-radius:var(--r-pill);
  background:var(--surface-2);color:var(--t2);border:1px solid var(--line);
  white-space:nowrap;                 /* pill chips must never wrap into a blob */
  max-width:100%;overflow:hidden;text-overflow:ellipsis;
}
.chip-accent{background:var(--ember-tint);color:#9c3714;border-color:#f2cdbd}
.chip-sage{background:var(--sage-tint);color:#3b5540;border-color:#cadbcf}
.chip-mono{font-family:var(--mono)}
.chip-on-dark{background:rgba(255,255,255,.1);color:var(--t-on-dark-1);border-color:rgba(255,255,255,.2)}

/* ------------------------------------------------------------- image frames */
/* §9: fixed-height flex box, image constrained by max-* — never height:100% */
.frame{
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:var(--panel-warm);border-radius:var(--r-md);
  position:relative;
}
/* aspect-ratio keeps the intrinsic size known after width/height are set to auto,
   which is what Chrome's "lazy-loaded images should have explicit dimensions" wants */
/* square frame + square photo: fill it. The max-* pair alone left the image
   short of its box, which reads as cream bars either side. */
.frame img{width:100%;height:100%;max-width:100%;max-height:100%;aspect-ratio:1;object-fit:contain}
.frame-xs{height:64px}
.frame-sm{height:120px}
.frame-md{height:200px}
.frame-lg{height:280px}
.frame-xl{height:420px}

/* ------------------------------------------------------------------- header */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(250,246,240,.9);backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:var(--wrap);margin-inline:auto;padding:0 var(--s5);
  height:var(--header-h);display:flex;align-items:center;gap:var(--s5);
}
@media (max-width:560px){.header-inner{padding:0 var(--s4);gap:var(--s3)}}
.brand{display:flex;align-items:center;gap:.6rem;flex-shrink:0}
.brand-mark{width:34px;height:34px;flex:none}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-name{font-family:var(--display);font-weight:600;font-size:1.05rem;letter-spacing:-.02em}
.brand-tag{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t3);font-weight:600}
@media (max-width:420px){.brand-tag{display:none}}

.nav{display:flex;align-items:center;gap:var(--s2);margin-left:auto}
.nav-link{
  display:inline-flex;align-items:center;gap:.35em;font:inherit;font-size:var(--fs-sm);
  font-weight:500;color:var(--t2);padding:.5em .8em;border-radius:var(--r-sm);
  background:none;border:0;cursor:pointer;text-align:left;white-space:nowrap;
  transition:color .16s var(--ease),background .16s var(--ease);
}
.nav-link:hover,.nav-link[aria-current="page"]{color:var(--t1);background:var(--surface-2)}
.nav-caret{width:.5em;height:.5em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s var(--ease)}
.nav-link[aria-expanded="true"] .nav-caret{transform:rotate(-135deg) translateY(1px)}

/* mega panel */
.mega{
  position:absolute;left:0;right:0;top:100%;
  background:var(--panel);color:var(--t1);
  border-bottom:1px solid var(--line);box-shadow:var(--sh-2);
  padding:var(--s6) 0;display:none;
}
.mega[data-open="true"]{display:block;animation:megaIn .22s var(--ease-out)}
@keyframes megaIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mega-inner{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s5);display:grid;grid-template-columns:1.4fr 1fr;gap:var(--s7)}
.mega-cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);align-content:start}
.mega-cat{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  font:inherit;color:inherit;text-align:left;
  padding:.8rem 1rem;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel-warm);
  transition:border-color .16s var(--ease),transform .16s var(--ease),background .16s var(--ease);
}
.mega-cat:hover{border-color:var(--ember);transform:translateX(3px);background:var(--ember-tint)}
.mega-cat-name{font-weight:600;font-size:var(--fs-sm);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mega-cat-count{font-family:var(--mono);font-size:var(--fs-xs);color:var(--t3);flex:none}
.mega-side{border-left:1px solid var(--line);padding-left:var(--s6);min-width:0}
.mega-side h3{font-size:var(--fs-base);margin-bottom:var(--s3)}
.mega-top{display:flex;flex-direction:column;gap:var(--s2)}
.mega-top-row{display:flex;align-items:center;gap:var(--s3);font:inherit;color:inherit;text-align:left;padding:.4rem;border-radius:var(--r-sm);transition:background .16s var(--ease);min-width:0}
.mega-top-row:hover{background:var(--surface-2)}
.mega-top-rank{font-family:var(--mono);font-size:var(--fs-xs);color:var(--ember);font-weight:700;width:1.6em;flex:none}
.mega-top-name{font-size:var(--fs-sm);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
@media (max-width:900px){.mega{display:none!important}}

/* mobile drawer */
.nav-toggle{display:none}
.drawer{
  position:fixed;inset:0 0 0 auto;width:min(86vw,340px);
  background:var(--panel);color:var(--t1);z-index:100;
  transform:translateX(102%);transition:transform .3s var(--ease-out),visibility .3s;
  padding:var(--s5);overflow-y:auto;box-shadow:var(--sh-3);visibility:hidden;
}
.drawer[data-open="true"]{transform:none;visibility:visible}
.drawer-scrim{position:fixed;inset:0;background:rgba(20,16,13,.45);z-index:90;opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
.drawer-scrim[data-open="true"]{opacity:1;visibility:visible}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s5)}
.drawer-close{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--panel);font:inherit;font-size:1.1rem;color:inherit;cursor:pointer;flex:none}
.drawer-section{margin-bottom:var(--s5)}
.drawer-label{font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--t3);font-weight:700;margin-bottom:var(--s2)}
.drawer-link{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);font:inherit;color:inherit;text-align:left;width:100%;background:none;border:0;border-bottom:1px solid var(--line);padding:.8rem .2rem;font-size:var(--fs-base);cursor:pointer}
.drawer-link-count{font-family:var(--mono);font-size:var(--fs-xs);color:var(--t3)}
@media (max-width:900px){
  .nav .nav-link:not(.nav-cta){display:none}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--panel);cursor:pointer;flex-direction:column;gap:4px;padding:0}
  .nav-toggle span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px}
}
@media (max-width:560px){.nav-cta{display:none}}

/* --------------------------------------------------------------------- hero */
.hero{
  position:relative;overflow:hidden;
  background:var(--ink);color:var(--t-on-dark-1);
  padding:var(--s9) 0 var(--s8);
}
.hero-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none}
.hero-blob-1{width:520px;height:520px;background:#8a2f0f;top:-180px;right:-120px;animation:drift1 22s var(--ease) infinite alternate}
.hero-blob-2{width:420px;height:420px;background:#2f4a36;bottom:-200px;left:-100px;animation:drift2 26s var(--ease) infinite alternate}
@keyframes drift1{to{transform:translate3d(-60px,50px,0) scale(1.12)}}
@keyframes drift2{to{transform:translate3d(70px,-40px,0) scale(1.08)}}
.hero-inner{position:relative;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s5);display:grid;grid-template-columns:1.08fr .92fr;gap:var(--s8);align-items:center}
@media (max-width:560px){.hero-inner{padding-inline:var(--s4)}}
.hero-copy{min-width:0}
.hero-kicker{display:inline-flex;align-items:center;gap:.5em;font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--t-on-dark-2);margin-bottom:var(--s4)}
.hero-kicker::before{content:"";width:28px;height:1px;background:var(--ember-soft);flex:none}
.hero-title{font-size:var(--fs-4xl);color:#fff;margin-bottom:var(--s4);min-width:0}
.hero-underline{position:relative;display:inline-block}
.hero-underline svg{position:absolute;left:0;bottom:-.12em;width:100%;height:.3em;overflow:visible}
.hero-underline path{
  fill:none;stroke:var(--ember-soft);stroke-width:8;stroke-linecap:round;
  stroke-dasharray:420;stroke-dashoffset:var(--dash,0);
  transition:stroke-dashoffset 1.2s var(--ease-out) .3s;
}
.hero-sub{font-size:var(--fs-lg);color:var(--t-on-dark-2);max-width:54ch;margin-bottom:var(--s5)}
.hero-sub b{color:#fff;font-weight:600;font-family:var(--mono);font-size:.92em}

.searchbox{position:relative;max-width:520px;margin-bottom:var(--s4)}
.searchbox-field{display:flex;align-items:center;gap:.6rem;background:var(--panel);border-radius:var(--r-pill);padding:.4rem .45rem .4rem 1.1rem;box-shadow:var(--sh-2)}
.searchbox input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:var(--fs-base);color:var(--t1);padding:.5rem 0}
.searchbox input::placeholder{color:var(--t3)}
.searchbox input:focus{outline:none}
.searchbox-icon{width:18px;height:18px;flex:none;color:var(--t3)}
.suggestions{
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:40;
  background:var(--panel);color:var(--t1);       /* light panel in a dark section: own colour */
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-3);
  display:none;max-height:340px;overflow-y:auto;
}
.suggestions[data-open="true"]{display:block}
.sugg{
  display:flex;align-items:center;gap:var(--s3);width:100%;
  font:inherit;color:var(--t1);text-align:left;background:none;border:0;
  padding:.6rem .8rem;cursor:pointer;border-bottom:1px solid var(--line);
}
.sugg:last-child{border-bottom:0}
.sugg:hover,.sugg[data-active="true"]{background:var(--ember-tint)}
.sugg .frame{width:44px;height:44px;flex:none;border-radius:var(--r-sm)}
.sugg-body{min-width:0;flex:1}
.sugg-name{display:block;font-size:var(--fs-sm);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--t1)}
.sugg-meta{display:block;font-size:var(--fs-xs);color:var(--t3);font-family:var(--mono)}
.sugg-empty{padding:.9rem;font-size:var(--fs-sm);color:var(--t2)}

.quickchips{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:var(--s5)}
.quickchip{
  font:inherit;font-size:var(--fs-xs);font-weight:600;cursor:pointer;white-space:nowrap;
  padding:.4em .9em;border-radius:var(--r-pill);
  background:rgba(255,255,255,.08);color:var(--t-on-dark-1);border:1px solid rgba(255,255,255,.2);
  transition:background .16s var(--ease),border-color .16s var(--ease);
}
.quickchip:hover{background:rgba(255,255,255,.18);border-color:var(--ember-soft)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s6)}
.hero-metrics{display:flex;flex-wrap:wrap;gap:var(--s6)}
.hero-metric{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.hero-metric-val{display:block;font-family:var(--mono);font-size:var(--fs-xl);font-weight:700;color:#fff;line-height:1}
.hero-metric-label{display:block;font-size:var(--fs-xs);color:var(--t-on-dark-3);letter-spacing:.06em}

/* hero stage */
.stage{position:relative;display:flex;align-items:center;justify-content:center;min-width:0}
.stage-rings{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.stage-ring{position:absolute;border:1px solid rgba(255,255,255,.12);border-radius:50%}
.stage-ring-1{width:300px;height:300px;animation:spin 46s linear infinite}
.stage-ring-2{width:400px;height:400px;border-style:dashed;animation:spin 70s linear infinite reverse}
.stage-ring-3{width:500px;height:500px;opacity:.5}
@keyframes spin{to{transform:rotate(360deg)}}
.stage-card{
  position:relative;z-index:2;width:min(100%,330px);
  background:var(--panel);color:var(--t1);      /* light card in dark hero: own colour */
  border-radius:var(--r-xl);padding:var(--s5);box-shadow:var(--sh-3);
}
.stage-card .frame{height:auto;aspect-ratio:1;margin-bottom:var(--s4)}
.stage-card .frame img{width:100%;height:100%;object-fit:contain}
.stage-card-rank{display:inline-flex;align-items:center;gap:.4em;font-family:var(--mono);font-size:var(--fs-xs);
  font-weight:700;color:var(--ember);margin-bottom:.4rem;white-space:nowrap}
.stage-card-rank svg{width:14px;height:14px;flex:none}
.stage-card-name{display:block;font-family:var(--display);font-size:var(--fs-lg);color:var(--t1);margin-bottom:.5rem;line-height:1.2}
.stage-card-meta{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.stage-chip{
  position:absolute;z-index:3;
  background:var(--panel);color:var(--t1);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:.45rem .9rem;box-shadow:var(--sh-2);
  font-family:var(--mono);font-size:var(--fs-xs);font-weight:600;white-space:nowrap;
}
.stage-chip b{color:var(--ember);font-weight:700}
/* parked outside the card box so they can never sit on a title or a price */
.stage-chip-1{top:-2%;right:2%;animation:float1 7s var(--ease) infinite alternate}
.stage-chip-2{top:44%;right:-13%;animation:float2 8.5s var(--ease) infinite alternate}
.stage-chip-3{bottom:2%;right:-9%;animation:float1 9s var(--ease) infinite alternate-reverse}
@keyframes float1{to{transform:translateY(-12px)}}
@keyframes float2{to{transform:translateY(14px)}}
/* decorative chips must never sit on top of real content at narrow widths */
@media (max-width:1180px){.stage-chip{display:none}}

@media (max-width:980px){
  .hero{padding:var(--s7) 0}
  .hero-inner{grid-template-columns:1fr;gap:var(--s7)}
  .stage-ring-3{display:none}
  .stage-card{width:min(100%,360px)}
}

/* ---------------------------------------------------------------- dial/ring */
.dial{position:relative;flex:none;display:grid;place-items:center}
.dial svg{transform:rotate(-90deg);display:block;width:100%;height:100%}
.dial-track{fill:none;stroke:var(--line);stroke-width:7}
.dial-fill{
  fill:none;stroke:var(--ember);stroke-width:7;stroke-linecap:round;
  stroke-dasharray:var(--circ);stroke-dashoffset:var(--off);
  transition:stroke-dashoffset 1.1s var(--ease-out);
}
.dial-sage .dial-fill{stroke:var(--sage)}
.dial-on-dark .dial-track{stroke:rgba(255,255,255,.16)}
.dial-value{
  position:absolute;inset:0;display:grid;place-items:center;align-content:center;
  font-family:var(--mono);font-weight:700;line-height:1;color:var(--t1);
}
.dial-on-dark .dial-value{color:#fff}
.dial-64{width:64px;height:64px}.dial-64 .dial-value{font-size:.95rem}
.dial-88{width:88px;height:88px}.dial-88 .dial-value{font-size:1.25rem}
.dial-128{width:128px;height:128px}.dial-128 .dial-value{font-size:1.9rem}
.dial-sub{display:block;font-size:.46em;color:var(--t3);font-weight:500;letter-spacing:.08em;margin-top:.2em}
.dial-on-dark .dial-sub{color:var(--t-on-dark-3)}

/* meters */
.meter{display:block;height:8px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden}
.meter-fill{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--ember-soft),var(--ember));width:var(--w,0%);transition:width 1s var(--ease-out)}
.meter-sage .meter-fill{background:linear-gradient(90deg,var(--sage-soft),var(--sage))}
/* label column sized to its own text: a fixed em width lets "PRECISION" spill over
   the bar and leaves the meter looking stunted */
.meter-row{display:grid;grid-template-columns:max-content minmax(0,1fr) 2.4em;gap:var(--s3);align-items:center;margin-bottom:.55rem}
.meter-row:last-child{margin-bottom:0}
.meter-label{font-size:var(--fs-xs);letter-spacing:.04em;text-transform:uppercase;color:var(--t3);font-weight:700}
.meter-num{font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;text-align:right}
@media (max-width:420px){.meter-row{gap:var(--s2)}.meter-label{font-size:.68rem}}

/* --------------------------------------------------------------- trust strip */
.trust{background:var(--ink-2);color:var(--t-on-dark-2);padding:var(--s4) 0;border-top:1px solid rgba(255,255,255,.07)}
.trust-inner{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s5);display:flex;flex-wrap:wrap;gap:var(--s5) var(--s6);justify-content:space-between;align-items:center}
.trust-item{display:flex;align-items:center;gap:.6rem;font-size:var(--fs-sm);min-width:0}
.trust-dot{width:7px;height:7px;border-radius:50%;background:var(--ember-soft);flex:none}
.marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--surface-2);padding:var(--s3) 0}
.marquee-track{display:flex;gap:var(--s7);width:max-content;animation:marq 38s linear infinite}
.marquee-item{font-family:var(--display);font-size:var(--fs-base);color:var(--t3);white-space:nowrap;font-weight:600;letter-spacing:.02em}
@keyframes marq{to{transform:translateX(-50%)}}

/* ------------------------------------------------------------------ section */
.section{padding:var(--s9) 0}
.section-tight{padding:var(--s8) 0}
.section-dark{background:var(--ink);color:var(--t-on-dark-1)}
.section-warm{background:var(--surface-2)}
.section-head{max-width:64ch;margin-bottom:var(--s7)}
.section-head-center{margin-inline:auto;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:.5em;font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ember);margin-bottom:var(--s3)}
.section-dark .eyebrow{color:var(--ember-soft)}
.section-title{margin-bottom:var(--s3)}
.section-lede{color:var(--t2);font-size:var(--fs-lg)}
.section-dark .section-lede{color:var(--t-on-dark-2)}

/* ------------------------------------------------------------- category rail */
.rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--s4)}
/* one grid per card, so icon / name / blurb / count sit on the same baselines
   across all five regardless of how long each blurb is */
.rail-card{
  display:grid;grid-template-rows:auto auto 1fr auto;gap:var(--s3);justify-items:start;
  font:inherit;color:inherit;text-align:left;cursor:pointer;height:100%;
  padding:var(--s5);border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--panel);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);
}
.rail-card:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--ember)}
.rail-card:hover .rail-count{color:var(--ember)}
.rail-icon{width:40px;height:40px;border-radius:var(--r-md);background:var(--ember-tint);display:grid;place-items:center;color:var(--ember);flex:none}
.rail-icon svg{width:22px;height:22px}
.rail-name{display:block;font-family:var(--display);font-size:var(--fs-lg);font-weight:600;line-height:1.2}
.rail-desc{font-size:var(--fs-sm);color:var(--t2)}
.rail-count{display:flex;align-items:center;gap:.4em;font-family:var(--mono);font-size:var(--fs-xs);
  color:var(--t3);padding-top:var(--s3);border-top:1px solid var(--line);width:100%;
  transition:color .16s var(--ease)}

/* --------------------------------------------------------- editor's picks */
.picks{display:grid;grid-template-columns:1.62fr 1fr;gap:var(--s5);align-items:start}
.pick-main{
  display:flex;flex-direction:column;gap:var(--s5);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:var(--s6);box-shadow:var(--sh-1);position:relative;overflow:hidden;color:inherit;
}
.pick-main::after{content:"";position:absolute;inset:auto -90px -110px auto;width:220px;height:220px;border-radius:50%;
  background:var(--ember-tint);opacity:.4;pointer-events:none;z-index:0}
/* explicit two-column grid: a flex row with wrap kept collapsing to a stack and
   left the meters squeezed into ~180px */
.pick-main-top{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:var(--s5);
  align-items:start;position:relative;z-index:1}
.pick-main .frame{height:260px;min-width:0}
.pick-main-info{min-width:0;display:flex;flex-direction:column;gap:var(--s3);height:100%}
@media (max-width:760px){.pick-main-top{grid-template-columns:minmax(0,1fr)}}
.pick-badges{display:flex;flex-wrap:wrap;gap:.4rem}
.pick-name{font-size:var(--fs-xl);line-height:1.15;min-width:0}
.pick-sum{font-size:var(--fs-sm);color:var(--t2)}
/* dial above, meters full width: side by side the bars were squeezed to ~100px */
.pick-score{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4);
  margin-top:auto;padding-top:var(--s4);border-top:1px solid var(--line)}
.pick-score .dial{justify-self:start}
.pick-score-meters{min-width:0}
.pick-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);position:relative;z-index:1}
.stat-box{background:var(--panel-warm);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3) var(--s4);min-width:0}
.stat-val{display:block;font-family:var(--mono);font-size:var(--fs-lg);font-weight:700;line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat-lab{display:block;font-size:var(--fs-xs);color:var(--t3);margin-top:.15rem}
.pick-side{display:grid;gap:var(--s5);align-content:start}
.pick-card{
  display:grid;grid-template-columns:96px 1fr;gap:var(--s4);align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s4);color:inherit;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);
}
.pick-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--ember)}
.pick-card .frame{height:96px}
.pick-card-body{min-width:0;display:flex;flex-direction:column;gap:.5rem}
.pick-card-head{display:flex;align-items:baseline;gap:.6rem;min-width:0}
.pick-numeral{font-family:var(--display);font-size:1.5rem;font-weight:700;color:var(--ember);line-height:1;flex:none}
.pick-card-name{font-family:var(--display);font-size:var(--fs-base);font-weight:600;line-height:1.25;min-width:0}
.pick-card-meta{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.pick-card-feats{display:flex;flex-direction:column;gap:.2rem}
.pick-feat{font-size:var(--fs-xs);color:var(--t2);display:flex;gap:.4em;align-items:flex-start}
.pick-feat::before{content:"—";color:var(--ember);flex:none}
@media (max-width:1000px){.picks{grid-template-columns:1fr}}
@media (max-width:560px){.pick-main{padding:var(--s5)}.pick-main .frame{height:220px}.pick-stats{grid-template-columns:1fr}}

/* --------------------------------------------------------------- rank table */
.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel)}
.rank-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.rank-table th{
  text-align:left;font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--t3);font-weight:700;padding:var(--s4);border-bottom:1px solid var(--line);white-space:nowrap;
}
.rank-table td{padding:var(--s4);border-bottom:1px solid var(--line);vertical-align:middle}
.rank-table tr:last-child td{border-bottom:0}
.rank-row{cursor:pointer;transition:background .16s var(--ease)}
.rank-row:hover,.rank-row:focus-visible{background:var(--panel-warm)}
.rank-num{display:block;font-family:var(--display);font-size:1.5rem;font-weight:700;color:var(--ember);line-height:1}
.rank-prod{display:flex;align-items:center;gap:var(--s3);min-width:0}
.rank-prod .frame{width:56px;height:56px;flex:none}
.rank-prod-body{min-width:0}
.rank-prod-name{display:block;font-weight:600;line-height:1.25}
.rank-prod-brand{display:block;font-size:var(--fs-xs);color:var(--t3)}
.rank-score{display:flex;align-items:center;gap:var(--s3);min-width:132px}
.rank-score .meter{flex:1;min-width:56px}
.rank-score-num{font-family:var(--mono);font-weight:700;flex:none}
.rank-num-cell{font-family:var(--mono);white-space:nowrap}
.rank-link{color:var(--ember);font-weight:600;white-space:nowrap}
/* per-breakpoint column drops — never leave a column sliced at the container edge */
@media (max-width:1100px){.col-noise{display:none}}
@media (max-width:900px){.col-preheat{display:none}}
@media (max-width:768px){.col-cat{display:none}}
@media (max-width:600px){.col-link{display:none}.rank-table th,.rank-table td{padding:var(--s3)}.rank-prod .frame{width:44px;height:44px}}
@media (max-width:520px){.col-cap{display:none}}
/* last drop: the thumbnail and the meter's floor, so the scroller measures zero
   residual overflow at 375 instead of slicing the score column */
@media (max-width:430px){
  .rank-prod .frame{display:none}
  .rank-score{min-width:84px}
  .rank-score .meter{min-width:36px}
  .rank-table th,.rank-table td{padding:.6rem .5rem}
}

/* ------------------------------------------------------------------ filters */
.filterbar{
  position:sticky;top:var(--header-h);z-index:40;
  background:rgba(250,246,240,.95);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s3) var(--s4);margin-bottom:var(--s6);
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
}
.filter-chips{display:flex;gap:.4rem;flex-wrap:wrap;min-width:0}
.filter-chip{
  font:inherit;font-size:var(--fs-xs);font-weight:600;cursor:pointer;white-space:nowrap;
  padding:.45em .9em;border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--panel);color:var(--t2);transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease);
}
.filter-chip:hover{border-color:var(--ink);color:var(--t1)}
.filter-chip[aria-pressed="true"]{background:var(--ink);color:var(--t-on-dark-1);border-color:var(--ink)}
.filter-chip-count{font-family:var(--mono);opacity:.65;margin-left:.3em}
.filter-spacer{flex:1 1 auto;min-width:0}
.filter-field{display:flex;align-items:center;gap:.4rem;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-pill);padding:.3rem .8rem}
.filter-field input,.filter-field select{border:0;background:none;font:inherit;font-size:var(--fs-xs);color:var(--t1);padding:.35rem 0;min-width:0}
.filter-field input{width:8.5rem}
.filter-field input:focus,.filter-field select:focus{outline:none}
.filter-count{font-family:var(--mono);font-size:var(--fs-xs);color:var(--t3);white-space:nowrap}
.filter-reset{font:inherit;font-size:var(--fs-xs);font-weight:600;color:var(--ember);background:none;border:0;cursor:pointer;padding:.4rem .2rem;white-space:nowrap}
@media (max-width:900px){.filterbar{position:static}}

/* --------------------------------------------------------------- prod cards */
.grid{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:var(--s5);align-items:start}
@media (max-width:1180px){.grid{--cols:3}}
@media (max-width:880px){.grid{--cols:2}}
@media (max-width:560px){.grid{--cols:1}}
.card{
  display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;color:inherit;height:100%;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--line-2)}
/* square product shots: a fixed-height box leaves cream bars either side, so the
   media box takes the photo's ratio and the photo fills it */
.card-media{position:relative;height:auto;aspect-ratio:1;background:var(--panel-warm);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.card-media img{width:100%;height:100%;max-width:100%;max-height:100%;aspect-ratio:1;object-fit:contain}
.card-badge{
  position:absolute;top:10px;right:10px;z-index:2;
  display:inline-flex;align-items:center;gap:.25em;
  background:var(--ink);color:#fff;border-radius:var(--r-pill);
  padding:.28em .7em;font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;white-space:nowrap;
}
.card-body{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3);flex:1}
.card-brand{display:block;font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--t3);font-weight:700}
.card-name{display:block;font-family:var(--display);font-size:var(--fs-base);font-weight:600;line-height:1.25;
  margin-top:.15rem}
/* multi-column only: reserve two lines so neighbouring cards share a baseline.
   At one column there is no neighbour, so the reserve would just be a gap. */
@media (min-width:561px){.card-name{min-height:2.5em}}
.card-feats{display:flex;flex-direction:column;gap:.35rem}
.card-feat{display:flex;gap:.5em;align-items:flex-start;font-size:var(--fs-xs);color:var(--t2);line-height:1.4}
.card-feat svg{width:14px;height:14px;flex:none;color:var(--sage);margin-top:.18em}
/* three equal columns, one line each: a long capacity string must not wrap and
   shove this card's footer out of line with the card beside it (§11) */
.card-specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);
  padding:var(--s3) 0;border-block:1px solid var(--line)}
.card-spec{min-width:0}
.card-spec-val{display:block;font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-spec-lab{display:block;font-size:.65rem;color:var(--t3);letter-spacing:.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:auto;flex-wrap:nowrap}
.card-foot .chip{min-width:0;flex:0 1 auto}
.card-tail{background:var(--panel-warm);border-style:dashed}
.card-tail .card-body{align-items:center;justify-content:center;text-align:center;gap:var(--s2)}
.card-cta{display:inline-flex;align-items:center;gap:.35em;font:inherit;font-size:var(--fs-xs);font-weight:700;color:var(--ember);white-space:nowrap}
.card:hover .card-cta{gap:.6em}

/* pagination */
.pager{display:flex;align-items:center;justify-content:center;gap:.35rem;margin-top:var(--s7);flex-wrap:wrap}
.pager-btn{
  font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;color:var(--t2);
  min-width:40px;height:40px;padding:0 .7rem;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--panel);
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .16s var(--ease),color .16s var(--ease),background .16s var(--ease);
}
.pager-btn:hover:not(:disabled){border-color:var(--ink);color:var(--t1)}
.pager-btn[aria-current="page"]{background:var(--ink);color:var(--t-on-dark-1);border-color:var(--ink)}
.pager-btn:disabled{opacity:.4;cursor:not-allowed}
.pager-gap{padding:0 .3rem;color:var(--t3)}

/* empty state */
.empty{
  display:none;flex-direction:column;align-items:center;gap:var(--s4);text-align:center;
  padding:var(--s8) var(--s5);border:1px dashed var(--line-2);border-radius:var(--r-lg);background:var(--panel-warm);
}
.empty[data-show="true"]{display:flex}
.empty-icon{width:56px;height:56px;border-radius:var(--r-pill);background:var(--surface-2);display:grid;place-items:center;color:var(--t3)}
.empty-title{font-family:var(--display);font-size:var(--fs-lg);font-weight:600}
.empty-text{color:var(--t2);font-size:var(--fs-sm);max-width:44ch}

/* ------------------------------------------------------------------- matcher */
.matcher{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);align-items:center}
.matcher-q{margin-bottom:var(--s5)}
.matcher-label{display:block;font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--t-on-dark-3);font-weight:700;margin-bottom:var(--s3)}
.matcher-opts{display:flex;flex-wrap:wrap;gap:.5rem}
.matcher-opt{
  font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;white-space:nowrap;
  padding:.55em 1.1em;border-radius:var(--r-pill);
  background:rgba(255,255,255,.07);color:var(--t-on-dark-1);border:1px solid rgba(255,255,255,.18);
  transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease);
}
.matcher-opt:hover{background:rgba(255,255,255,.16)}
.matcher-opt[aria-pressed="true"]{background:var(--ember);border-color:var(--ember);color:#fff}
.matcher-result{
  background:var(--panel);color:var(--t1);        /* light panel inside dark section */
  border-radius:var(--r-xl);padding:var(--s5);box-shadow:var(--sh-3);
}
.matcher-result-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4);flex-wrap:wrap}
.matcher-result-title{font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--t3);font-weight:700}
.matcher-list{display:flex;flex-direction:column;gap:var(--s3)}
.matcher-item{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:var(--s3);align-items:center;color:inherit;padding:.4rem;border-radius:var(--r-md);transition:background .16s var(--ease)}
.matcher-item:hover{background:var(--panel-warm)}
.matcher-item .frame{height:64px}
.matcher-item-name{display:block;font-size:var(--fs-sm);font-weight:600;line-height:1.25}
.matcher-item-meta{display:block;font-size:var(--fs-xs);color:var(--t3);font-family:var(--mono)}
@media (max-width:900px){.matcher{grid-template-columns:1fr;gap:var(--s6)}}

/* --------------------------------------------------------------------- stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5)}
.stat{text-align:center;padding:var(--s5) var(--s3);border-right:1px solid var(--line);min-width:0}
.stat:last-child{border-right:0}
.stat-num{display:block;font-family:var(--mono);font-size:var(--fs-2xl);font-weight:700;color:var(--t1);line-height:1;margin-bottom:.4rem}
.stat-label{display:block;font-size:var(--fs-sm);color:var(--t2)}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat:nth-child(2){border-right:0}.stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line)}}

/* ----------------------------------------------------------------------- faq */
.guide{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);align-items:start}
.guide-prose p{color:var(--t2);margin-bottom:var(--s4)}
.guide-prose h3{margin-bottom:var(--s3);margin-top:var(--s5)}
.guide-prose h3:first-child{margin-top:0}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);width:100%;
  font:inherit;font-family:var(--display);font-size:var(--fs-base);font-weight:600;color:var(--t1);
  text-align:left;background:none;border:0;padding:var(--s4) 0;cursor:pointer;
}
.faq-icon{width:20px;height:20px;flex:none;position:relative}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;top:50%;left:0;right:0;height:2px;margin-top:-1px;background:var(--ember);transition:transform .22s var(--ease)}
.faq-icon::after{transform:rotate(90deg)}
.faq-q[aria-expanded="true"] .faq-icon::after{transform:rotate(0)}
.faq-a{display:none;padding:0 0 var(--s4);color:var(--t2);font-size:var(--fs-sm);max-width:62ch}
.faq-q[aria-expanded="true"]+.faq-a{display:block}
@media (max-width:900px){.guide{grid-template-columns:1fr;gap:var(--s6)}}

/* ------------------------------------------------------------- product page */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:var(--fs-xs);color:var(--t3);padding:var(--s5) 0 0}
.crumbs a{color:var(--t2)}
.crumbs a:hover{color:var(--ember)}
.crumb-sep{color:var(--t3)}

.prod-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--s7);align-items:start;padding:var(--s5) 0 var(--s7)}
.prod-badges{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:var(--s4)}
.prod-title{font-size:var(--fs-2xl);margin-bottom:var(--s3);min-width:0}
.prod-brandline{font-size:var(--fs-sm);color:var(--t3);margin-bottom:var(--s4)}
.prod-intro{font-size:var(--fs-lg);color:var(--t2);max-width:60ch;margin-bottom:var(--s5)}
.prod-scorebar{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;padding:var(--s5) 0;border-block:1px solid var(--line)}
.prod-scorebar-meters{flex:1 1 240px;min-width:0}

/* product shots are square: a fixed-height letterbox left wide empty bars either
   side, so the frame takes the image's own ratio and the photo fills it */
.gallery-main{height:auto;aspect-ratio:1;width:100%;max-width:560px;margin:0 auto var(--s3);
  background:var(--panel-warm);border:1px solid var(--line)}
.gallery-main img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
.gallery-thumbs{display:flex;gap:var(--s3);flex-wrap:wrap;justify-content:center;max-width:560px;margin-inline:auto}
.thumb{
  width:84px;height:84px;padding:0;cursor:pointer;background:var(--panel);
  border:2px solid var(--line);border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  transition:border-color .16s var(--ease);
}
.thumb img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}
.thumb[aria-current="true"]{border-color:var(--ember)}
@media (max-width:900px){.prod-hero{grid-template-columns:1fr;gap:var(--s6)}.gallery-main{max-width:420px}}

.prod-body{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s7);align-items:start;padding-bottom:var(--s8)}
.prod-main{min-width:0;display:flex;flex-direction:column;gap:var(--s7)}
.prod-section{scroll-margin-top:calc(var(--header-h) + 24px)}
.prod-section h2{font-size:var(--fs-xl);margin-bottom:var(--s4)}
.prod-section p{color:var(--t2);margin-bottom:var(--s4)}
.prod-section p:last-child{margin-bottom:0}

.spec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--s3)}
.spec-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s4);min-width:0}
.spec-lab{display:flex;align-items:center;gap:.4em;font-size:var(--fs-xs);color:var(--t3);letter-spacing:.06em;margin-bottom:.3rem;flex-wrap:wrap}
.spec-src{font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;padding:.1em .45em;border-radius:var(--r-pill);white-space:nowrap;font-weight:700}
.spec-src-measured{background:var(--ember-tint);color:#9c3714}
.spec-src-maker{background:var(--sage-tint);color:#3b5540}
.spec-val{display:block;font-family:var(--mono);font-size:var(--fs-base);font-weight:600;line-height:1.35;overflow-wrap:anywhere}

.pc-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.pc-col{border-radius:var(--r-lg);padding:var(--s5);border:1px solid var(--line);min-width:0}
.pc-pros{background:var(--sage-tint);border-color:#cadbcf;color:#23331f}
.pc-cons{background:var(--ember-tint);border-color:#f2cdbd;color:#4d1f0c}
.pc-col h3{font-size:var(--fs-base);margin-bottom:var(--s3);color:inherit}
.pc-list{display:flex;flex-direction:column;gap:.6rem}
.pc-item{display:flex;gap:.6em;align-items:flex-start;font-size:var(--fs-sm);line-height:1.5}
.pc-item svg{width:16px;height:16px;flex:none;margin-top:.2em}
@media (max-width:640px){.pc-cols{grid-template-columns:1fr}}

.feat-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s3)}
.feat-item{display:flex;gap:var(--s3);align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s4);font-size:var(--fs-sm);color:var(--t2);min-width:0}
.feat-item svg{width:18px;height:18px;flex:none;color:var(--ember);margin-top:.1em}

.gallery-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--s3)}
.gallery-strip .frame{height:auto;aspect-ratio:1;border:1px solid var(--line)}

.verdict{background:var(--ink);color:var(--t-on-dark-1);border-radius:var(--r-xl);padding:var(--s6)}
/* dark panel inside a light section: state the colour with enough specificity to
   beat `.prod-section p`, or the verdict renders dark-on-dark */
.verdict .verdict-label{display:inline-flex;align-items:center;gap:.5em;font-size:var(--fs-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ember-soft);font-weight:700;margin-bottom:var(--s3)}
.verdict .verdict-text{font-family:var(--display);font-size:var(--fs-lg);line-height:1.5;color:#fff;margin-bottom:0}
.verdict .verdict-label svg{width:14px;height:14px;flex:none}
.verdict-foot{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s5);flex-wrap:wrap}

/* sidebar */
.prod-side{position:sticky;top:calc(var(--header-h) + 16px);display:flex;flex-direction:column;gap:var(--s5);min-width:0}
.buybox{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--sh-1)}
.buybox .frame{height:auto;aspect-ratio:1;width:100%;max-width:220px;margin:0 auto var(--s4)}
.buybox-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4);flex-wrap:wrap}
.buybox-name{font-family:var(--display);font-size:var(--fs-base);font-weight:600;line-height:1.25;min-width:0}
.buybox-trust{display:flex;flex-direction:column;gap:.5rem;margin:var(--s4) 0}
.buybox-trust li{display:flex;gap:.55em;align-items:flex-start;font-size:var(--fs-xs);color:var(--t2);line-height:1.45}
.buybox-trust svg{width:14px;height:14px;flex:none;color:var(--sage);margin-top:.15em}
.buybox-disc{font-size:.68rem;color:var(--t3);line-height:1.5;margin-top:var(--s3)}

.toc{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4)}
.toc-title{font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--t3);font-weight:700;padding:0 var(--s3) var(--s3)}
.toc-link{
  display:flex;align-items:center;gap:.6em;width:100%;
  font:inherit;font-size:var(--fs-sm);color:var(--t2);text-align:left;
  padding:.55rem var(--s3);border-radius:var(--r-sm);border-left:2px solid transparent;
  transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease);
}
.toc-link:hover{background:var(--panel-warm);color:var(--t1)}
.toc-link[aria-current="true"]{color:var(--ember);border-left-color:var(--ember);background:var(--ember-tint);font-weight:600}
@media (max-width:1000px){
  .prod-body{grid-template-columns:1fr}
  .prod-side{position:static;order:-1}
}

/* sticky mobile CTA — offset against the cookie banner, never over 25% of vh */
.mobile-cta{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--ink);color:var(--t-on-dark-1);
  padding:.55rem var(--s4);align-items:center;gap:var(--s3);
  border-top:1px solid rgba(255,255,255,.12);
  transform:translateY(calc(-1 * var(--cookie-h,0px)));transition:transform .25s var(--ease);
}
.mobile-cta-body{min-width:0;flex:1}
.mobile-cta-name{display:block;font-size:var(--fs-xs);font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mobile-cta-score{display:block;font-family:var(--mono);font-size:.65rem;color:var(--t-on-dark-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1000px){.mobile-cta{display:flex}}

/* ------------------------------------------------------------------- footer */
.site-footer{background:var(--ink);color:var(--t-on-dark-2);padding:var(--s8) 0 var(--s5);margin-top:var(--s8)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--s7)}
.footer-brand{max-width:36ch}
.footer-brand .brand{margin-bottom:var(--s4)}
.footer-brand .brand-name{color:#fff}
.footer-desc{font-size:var(--fs-sm);color:var(--t-on-dark-3);line-height:1.7}
.footer-col h3{font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--t-on-dark-1);font-family:var(--text);font-weight:700;margin-bottom:var(--s4)}
.footer-links{display:flex;flex-direction:column;gap:.6rem}
.footer-link{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);font-size:var(--fs-sm);color:var(--t-on-dark-2);transition:color .16s var(--ease);min-width:0}
.footer-link:hover{color:#fff}
.footer-link-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.footer-link-count{font-family:var(--mono);font-size:var(--fs-xs);color:var(--t-on-dark-3);flex:none}
.footer-disc{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.1);font-size:var(--fs-xs);color:var(--t-on-dark-3);line-height:1.7;max-width:80ch}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid rgba(255,255,255,.1);flex-wrap:wrap;font-size:var(--fs-xs);color:var(--t-on-dark-3)}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:var(--s6)}.footer-brand{grid-column:1/-1}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}

/* ------------------------------------------------------------ cookie banner */
.cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;
  background:var(--panel);color:var(--t1);border-top:1px solid var(--line-2);
  box-shadow:0 -8px 30px rgba(20,16,13,.12);padding:var(--s4);
}
body[data-cookie="ask"] .cookie{display:block}
.cookie-inner{max-width:var(--wrap);margin-inline:auto;display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.cookie-text{flex:1 1 300px;font-size:var(--fs-sm);color:var(--t2);min-width:0}
.cookie-text a{color:var(--ember);font-weight:600}
.cookie-btns{display:flex;gap:.5rem;flex-wrap:wrap}

/* back to top — parks above the cookie banner and the mobile CTA */
.to-top{
  position:fixed;right:16px;bottom:calc(16px + var(--cookie-h,0px) + var(--cta-h,0px));
  z-index:65;width:44px;height:44px;border-radius:var(--r-pill);
  background:var(--panel);border:1px solid var(--line-2);color:var(--t1);
  display:grid;place-items:center;cursor:pointer;box-shadow:var(--sh-2);
  opacity:0;visibility:hidden;transition:opacity .2s var(--ease),visibility .2s var(--ease),bottom .25s var(--ease);
}
.to-top[data-show="true"]{opacity:1;visibility:visible}

/* ------------------------------------------------------------------- legal */
.legal{max-width:76ch;padding:var(--s8) 0}
.legal h1{margin-bottom:var(--s4)}
.legal h2{font-size:var(--fs-xl);margin:var(--s6) 0 var(--s3)}
.legal h3{margin:var(--s5) 0 var(--s2)}
.legal p,.legal li{color:var(--t2);margin-bottom:var(--s3)}
.legal ul{list-style:disc;padding-left:1.3rem;margin-bottom:var(--s4)}
.legal-meta{font-size:var(--fs-sm);color:var(--t3);margin-bottom:var(--s6)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);align-items:start}
.about-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5)}
@media (max-width:820px){.about-grid{grid-template-columns:1fr}}

/* ------------------------------------------------------------------ reveals */
/* JS-blocked default is the true, visible state (§7) — JS rewinds, CSS plays back */
.reveal{transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.js .reveal{opacity:0;transform:translateY(18px)}
.js .reveal[data-shown="true"]{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1!important;transform:none!important}
  .hero-blob,.stage-ring,.stage-chip,.marquee-track{animation:none!important}
}