/* ==================================================================
   LifeHacksUpdate — shared stylesheet
   Layout modelled on wowgadgetsgo.com/trending.html and
   smartdailyshoppersguide.com/sh/deal/ ; styling follows
   Material Design 3 (m3.material.io) — blue tonal scheme.

   REBRAND ...... edit the --md-* tokens in this file only
   All pages load this file, so a change here reaches every page.
   ================================================================== */

/* ---------- M3 COLOR ROLES · LIGHT (seed: blue 40 = #0B57D0) ---------- */
:root {
  color-scheme: light;

  --md-primary:#0B57D0;            --md-on-primary:#FFFFFF;
  --md-primary-container:#D3E3FD;  --md-on-primary-container:#041E49;
  --md-secondary:#4A6382;          --md-on-secondary:#FFFFFF;
  --md-secondary-container:#DAE5F7;--md-on-secondary-container:#091D34;
  --md-tertiary:#8B5000;           --md-on-tertiary:#FFFFFF;
  --md-tertiary-container:#FFDDB6; --md-on-tertiary-container:#2C1600;
  --md-error:#BA1A1A;              --md-on-error:#FFFFFF;
  --md-error-container:#FFDAD6;    --md-on-error-container:#410002;

  /* neutrals carry a blue bias so they read as chosen, not default grey */
  --md-surface:#FAFAFE;            --md-on-surface:#191C20;
  --md-surface-variant:#DFE2EB;    --md-on-surface-variant:#43474E;
  --md-surface-c-lowest:#FFFFFF;   --md-surface-c-low:#F3F5FC;
  --md-surface-c:#EDF0F9;          --md-surface-c-high:#E7EBF4;
  --md-surface-c-highest:#E1E6F0;
  --md-outline:#73777F;            --md-outline-variant:#C3C6CF;
  --md-inverse-surface:#2E3036;    --md-inverse-on-surface:#F0F0F7;
  --md-inverse-primary:#A8C7FA;

  /* flat illustration palette for the generated placeholder art */
  --art-1:#0B57D0; --art-2:#A8C7FA; --art-3:#7CACF8;
  --art-4:#FFB95C; --art-5:#00639B; --art-6:#D3E3FD;

  --mark:#FFE08A; --mark-ink:#2C1600;

  /* The three accents that are deliberately NOT part of the M3 ramp:
     the badge on a product image, the red campaign pill, and the
     rating gold. They are fixed hex on purpose — they must read the
     same in light and dark, and on top of a photograph. */
  --badge:#ff5721;   --badge-ink:#FFFFFF;
  --pill-red:#DC2626; --pill-red-ink:#FFFFFF;
  --star:#FFC400;    --star-empty:#C9CEDA;

  --shadow-1:0 1px 2px rgba(11,35,80,.24), 0 1px 3px 1px rgba(11,35,80,.08);
  --shadow-2:0 1px 2px rgba(11,35,80,.24), 0 2px 6px 2px rgba(11,35,80,.08);
  --shadow-3:0 1px 3px rgba(11,35,80,.24), 0 4px 8px 3px rgba(11,35,80,.08);

  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px;
  --r-xl:28px; --r-xxl:36px; --r-full:999px;

  --ease-emph:cubic-bezier(.34,1.42,.58,1);
  --ease-std:cubic-bezier(.2,0,0,1);
  --ease-spring:cubic-bezier(.2,1.5,.4,1);

  /* ONE alignment grid. Every block on every page uses this width, so
     the headline, the hero, the filter row, the entries, the panels and
     the footer all share the same left and right edges. */
  --col:900px;
  --wide:900px;

  /* ---------------------------------------------------------------
     TYPEFACES — change these two lines and every page follows.
     Remember to update the Google Fonts <link> in the HTML to match.

     Montserrat is a geometric display face: superb at 600-800 for
     headlines, tiring for long prose because its letterforms are wide
     and near-circular. So it carries the headings, UI and labels, and
     a reading face carries the body copy underneath it.

     PRESET A (active) — editorial. Montserrat + Source Serif 4.
       The serif body makes the advertorial read as an article rather
       than an ad, which is the whole mechanic of the format.
       family=Montserrat:wght@500..800&family=Source+Serif+4:opsz,wght@8..60,400..600

     PRESET B — all sans. Swap --font-body to:
       'Source Sans 3', system-ui, sans-serif
       family=Montserrat:wght@500..800&family=Source+Sans+3:wght@400..600

     PRESET C — Montserrat everywhere. Set --font-body to var(--font-display)
       and drop the second family from the link. Then also set
       --body-size-desktop to 17px: Montserrat runs wide, so the same
       measure holds fewer words and wants a slightly smaller size.
     --------------------------------------------------------------- */
  --font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono:    var(--font-display);   /* labels use tracked-out Montserrat */
  --body-size-desktop: 18px;
}

/* ---------- DARK ---------- */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  color-scheme: dark;
  --md-primary:#A8C7FA;            --md-on-primary:#062E6F;
  --md-primary-container:#0842A0;  --md-on-primary-container:#D3E3FD;
  --md-secondary:#B1C8E8;          --md-on-secondary:#1B334F;
  --md-secondary-container:#33496A;--md-on-secondary-container:#DAE5F7;
  --md-tertiary:#FFB95C;           --md-on-tertiary:#4A2800;
  --md-tertiary-container:#6A3C00; --md-on-tertiary-container:#FFDDB6;
  --md-error:#FFB4AB;              --md-on-error:#690005;
  --md-error-container:#93000A;    --md-on-error-container:#FFDAD6;
  --md-surface:#101318;            --md-on-surface:#E1E6F0;
  --md-surface-variant:#43474E;    --md-on-surface-variant:#C3C6CF;
  --md-surface-c-lowest:#0B0E13;   --md-surface-c-low:#181C22;
  --md-surface-c:#1C2027;          --md-surface-c-high:#262A31;
  --md-surface-c-highest:#31353C;
  --md-outline:#8D9199;            --md-outline-variant:#43474E;
  --md-inverse-surface:#E1E6F0;    --md-inverse-on-surface:#2E3138;
  --md-inverse-primary:#0B57D0;
  --art-1:#A8C7FA; --art-2:#0842A0; --art-3:#4C8DF6;
  --art-4:#FFB95C; --art-5:#7FCFFF; --art-6:#062E6F;
  --mark:#7A5A00; --mark-ink:#FFE9BC;
  /* the badge, the red pill and the gold stay put; only the empty
     half of a star has to follow the surface underneath it */
  --star-empty:#3C424E;
  --shadow-1:0 1px 2px rgba(0,0,0,.6), 0 1px 3px 1px rgba(0,0,0,.35);
  --shadow-2:0 1px 2px rgba(0,0,0,.6), 0 2px 6px 2px rgba(0,0,0,.35);
  --shadow-3:0 1px 3px rgba(0,0,0,.6), 0 4px 8px 3px rgba(0,0,0,.35);
} }
:root[data-theme="dark"] {
  color-scheme: dark;
  --md-primary:#A8C7FA;            --md-on-primary:#062E6F;
  --md-primary-container:#0842A0;  --md-on-primary-container:#D3E3FD;
  --md-secondary:#B1C8E8;          --md-on-secondary:#1B334F;
  --md-secondary-container:#33496A;--md-on-secondary-container:#DAE5F7;
  --md-tertiary:#FFB95C;           --md-on-tertiary:#4A2800;
  --md-tertiary-container:#6A3C00; --md-on-tertiary-container:#FFDDB6;
  --md-error:#FFB4AB;              --md-on-error:#690005;
  --md-error-container:#93000A;    --md-on-error-container:#FFDAD6;
  --md-surface:#101318;            --md-on-surface:#E1E6F0;
  --md-surface-variant:#43474E;    --md-on-surface-variant:#C3C6CF;
  --md-surface-c-lowest:#0B0E13;   --md-surface-c-low:#181C22;
  --md-surface-c:#1C2027;          --md-surface-c-high:#262A31;
  --md-surface-c-highest:#31353C;
  --md-outline:#8D9199;            --md-outline-variant:#43474E;
  --md-inverse-surface:#E1E6F0;    --md-inverse-on-surface:#2E3138;
  --md-inverse-primary:#0B57D0;
  --art-1:#A8C7FA; --art-2:#0842A0; --art-3:#4C8DF6;
  --art-4:#FFB95C; --art-5:#7FCFFF; --art-6:#062E6F;
  --mark:#7A5A00; --mark-ink:#FFE9BC;
  /* the badge, the red pill and the gold stay put; only the empty
     half of a star has to follow the surface underneath it */
  --star-empty:#3C424E;
  --shadow-1:0 1px 2px rgba(0,0,0,.6), 0 1px 3px 1px rgba(0,0,0,.35);
  --shadow-2:0 1px 2px rgba(0,0,0,.6), 0 2px 6px 2px rgba(0,0,0,.35);
  --shadow-3:0 1px 3px rgba(0,0,0,.6), 0 4px 8px 3px rgba(0,0,0,.35);
}

/* ---------- BASE ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
body {
  margin:0; background:var(--md-surface); color:var(--md-on-surface);
  font-family:var(--font-body);
  font-size:16px; line-height:1.62; font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}
/* the desktop bump that keeps a 900px measure comfortable */
@media (min-width:900px) { body { font-size:var(--body-size-desktop); } }
img { max-width:100%; display:block; }
svg { display:block; }
[hidden] { display:none !important; }
a { color:var(--md-primary); }
button { font:inherit; color:inherit; }
:focus-visible { outline:3px solid var(--md-primary); outline-offset:2px; border-radius:var(--r-xs); }
::selection { background:var(--md-primary-container); color:var(--md-on-primary-container); }
/* `pretty` avoids a one-word last line WITHOUT shortening the others.
   `balance` was making every line stop short of the column — do not use it here. */
h1,h2,h3,h4 { font-family:var(--font-display); margin:0; text-wrap:pretty; }
p { margin:0 0 1.15em; } p:last-child { margin-bottom:0; }

mark { background:linear-gradient(var(--mark),var(--mark)); background-size:100% 78%;
       background-position:0 82%; background-repeat:no-repeat; color:inherit; padding:0 2px; }
:root[data-theme="dark"] mark { color:var(--mark-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) mark { color:var(--mark-ink); } }

/* ---------- TYPE SCALE ---------- */
.display  { font-size:clamp(1.95rem,1.15rem + 3.3vw,3rem); line-height:1.12; font-weight:800; letter-spacing:-.03em; }
.headline { font-size:clamp(1.55rem,1.18rem + 1.6vw,2.15rem); line-height:1.18; font-weight:700; letter-spacing:-.022em; }
.title    { font-size:clamp(1.22rem,1.03rem + .78vw,1.55rem); line-height:1.26; font-weight:700; letter-spacing:-.018em; }
.title-s  { font-size:1.0625rem; line-height:1.4; font-weight:600; }
.body-m   { font-size:.9375rem; line-height:1.5; }
.body-s   { font-size:.8125rem; line-height:1.45; }
.label    { font-family:var(--font-mono); font-size:.75rem; line-height:1.3;
            font-weight:500; letter-spacing:.09em; text-transform:uppercase; }
.label-s  { font-family:var(--font-mono); font-size:.6875rem; line-height:1.4;
            font-weight:500; letter-spacing:.11em; text-transform:uppercase; }
.muted { color:var(--md-on-surface-variant); }
.tnum  { font-variant-numeric:tabular-nums; }

/* ---------- LAYOUT ---------- */
.col  { width:100%; max-width:var(--col);  margin-inline:auto; padding-inline:20px; }
.wide { width:100%; max-width:var(--wide); margin-inline:auto; padding-inline:20px; }

/* ---------- STATE LAYER + RIPPLE ---------- */
.state { position:relative; overflow:hidden; isolation:isolate; }
.state::before { content:""; position:absolute; inset:0; background:currentColor; opacity:0;
                 transition:opacity .12s linear; pointer-events:none; z-index:0; }
.state:hover::before { opacity:.08; }
.state:active::before { opacity:.12; }
.state > * { position:relative; z-index:1; }
.ripple { position:absolute; border-radius:50%; transform:scale(0); background:currentColor;
          opacity:.22; pointer-events:none; z-index:0; animation:ripple .5s var(--ease-std) forwards; }
@keyframes ripple { to { transform:scale(2.4); opacity:0; } }

/* ---------- BUTTONS (M3 + Expressive shape morph) ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
       min-height:44px; padding:0 24px; border:0; border-radius:var(--r-full);
       font-family:var(--font-display); font-size:.9375rem; font-weight:500; letter-spacing:.01em;
       cursor:pointer; text-decoration:none; white-space:nowrap;
       transition:box-shadow .2s var(--ease-std), border-radius .32s var(--ease-spring), transform .1s; }
.btn:hover  { border-radius:var(--r-lg); }
.btn:active { border-radius:var(--r-md); transform:translateY(1px); }
.btn > span { display:inline-flex; align-items:center; gap:8px; }
.btn svg, .chip svg, .feats svg, .dealbar svg, .prose li svg { display:inline-block; flex-shrink:0; }
.btn-filled  { background:var(--md-primary); color:var(--md-on-primary); }
.btn-filled:hover { box-shadow:var(--shadow-1); }
.btn-tonal   { background:var(--md-secondary-container); color:var(--md-on-secondary-container); }
.btn-outline { background:transparent; color:var(--md-primary); box-shadow:inset 0 0 0 1px var(--md-outline); }
.btn-text    { background:transparent; color:var(--md-primary); padding:0 12px; }
.btn-cta { display:flex; width:100%; min-height:58px; font-size:1.0625rem; font-weight:600;
           background:var(--md-primary); color:var(--md-on-primary); border-radius:var(--r-lg);
           box-shadow:var(--shadow-1); }
.btn-cta:hover { border-radius:var(--r-xl); box-shadow:var(--shadow-3); }
.btn-cta:active { border-radius:var(--r-lg); }
.btn-icon { display:inline-grid; place-items:center; width:40px; height:40px; padding:0; border:0;
            border-radius:var(--r-full); background:transparent;
            color:var(--md-on-surface-variant); cursor:pointer; }

/* ---------- CHIPS ---------- */
.chip { display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:0 15px;
        border-radius:var(--r-sm); background:transparent; color:var(--md-on-surface-variant);
        box-shadow:inset 0 0 0 1px var(--md-outline-variant);
        font-family:var(--font-display); font-size:.8125rem; font-weight:500;
        cursor:pointer; white-space:nowrap; flex:0 0 auto; text-decoration:none;
        transition:background .16s var(--ease-std), color .16s var(--ease-std),
                   box-shadow .16s var(--ease-std), border-radius .3s var(--ease-spring); }
.chip:hover { border-radius:var(--r-full); }
.chip[aria-pressed="true"] { background:var(--md-secondary-container); color:var(--md-on-secondary-container);
        box-shadow:inset 0 0 0 1px transparent; border-radius:var(--r-full); }

/* ---------- MASTHEAD (injected by site.js) ---------- */
.masthead { background:var(--md-surface); position:relative; z-index:45; }
.masthead-in { display:flex; align-items:center; gap:14px; min-height:58px; }
.wordmark { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--md-on-surface); }
.wordmark-mark { width:34px; height:34px; border-radius:12px; background:var(--md-primary);
                 color:var(--md-on-primary); display:grid; place-items:center; flex-shrink:0;
                 transition:border-radius .34s var(--ease-spring); }
.wordmark:hover .wordmark-mark { border-radius:var(--r-full); }
.wordmark-name { font-family:var(--font-display); font-weight:700; font-size:1.0625rem;
                 letter-spacing:-.02em; line-height:1.05; }
.wordmark-sub { display:block; color:var(--md-on-surface-variant); }
.mast-right { margin-left:auto; display:flex; align-items:center; gap:6px; }

/* ---------- PAGE HEAD (sub-pages) ---------- */
.pagehead { padding-block:clamp(28px,4vw,52px) clamp(20px,2.6vw,30px);
            border-bottom:1px solid var(--md-outline-variant); }
.crumbs { display:flex; align-items:center; gap:8px; margin-bottom:14px; color:var(--md-on-surface-variant); }
.crumbs a { color:var(--md-on-surface-variant); text-decoration:none; }
.crumbs a:hover { color:var(--md-primary); text-decoration:underline; }
.pagehead p.lede-s { margin-top:14px; max-width:62ch; color:var(--md-on-surface-variant);
                     font-size:1.0625rem; line-height:1.6; }

/* ---------- PROSE (sub-page body copy) ---------- */
.prose { padding-block:clamp(28px,3.4vw,44px); }
.prose h2 { font-size:clamp(1.3rem,1.1rem + .9vw,1.7rem); font-weight:600; letter-spacing:-.014em;
            margin:2em 0 .6em; }
.prose h2:first-child { margin-top:0; }
.prose h3 { font-size:1.125rem; font-weight:600; margin:1.6em 0 .4em; }
.prose p, .prose li { color:var(--md-on-surface); }
.prose ul, .prose ol { margin:0 0 1.15em; padding-left:0; list-style:none; display:grid; gap:9px; }
.prose ol { counter-reset:n; }
/* markers are positioned, not flex items — a <strong> at the start of an
   item must not become a flex item of its own and break onto a column */
.prose ul > li { position:relative; padding-left:19px; }
.prose ul > li::before { content:""; position:absolute; left:0; top:.62em;
                         width:7px; height:7px; border-radius:50%; background:var(--md-primary); }
.prose ol > li { position:relative; padding-left:38px; counter-increment:n; }
.prose ol > li::before { content:counter(n); position:absolute; left:0; top:.1em;
                         width:26px; height:26px; border-radius:var(--r-sm);
                         background:var(--md-primary-container); color:var(--md-on-primary-container);
                         display:grid; place-items:center; font-family:var(--font-mono);
                         font-size:.75rem; font-weight:500; }
.prose blockquote { margin:1.4em 0; padding:18px 22px; border-radius:var(--r-lg);
                    background:var(--md-surface-c-low); border-left:4px solid var(--md-primary); }
.prose blockquote p { color:var(--md-on-surface-variant); }
.prose hr { border:0; height:1px; background:var(--md-outline-variant); margin:2.2em 0; }
.prose table { width:100%; border-collapse:collapse; margin:1.2em 0; font-size:.9375rem; }
.prose th, .prose td { text-align:left; padding:11px 14px; border-bottom:1px solid var(--md-outline-variant); }
.prose th { font-family:var(--font-display); font-weight:600; color:var(--md-on-surface-variant);
            font-size:.8125rem; text-transform:uppercase; letter-spacing:.05em; }
.tablewrap { overflow-x:auto; }

/* ---------- PANELS (the m3.material.io pattern) ---------- */
.panels { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.panel { background:var(--md-surface-c-low); border-radius:var(--r-xl); padding:clamp(24px,3.2vw,42px);
         transition:border-radius .4s var(--ease-spring); }
.panel:hover { border-radius:var(--r-xxl); }
.panel--art { padding:0; overflow:hidden; background:var(--art-2); display:grid; }
.panel--art svg { width:100%; height:100%; min-height:230px; }
.panel--accent { background:var(--md-primary-container); color:var(--md-on-primary-container); }
.panel p { color:var(--md-on-surface-variant); }
.panel--accent p { color:color-mix(in srgb,var(--md-on-primary-container) 86%,transparent); }
.panel-grid { display:grid; gap:22px; margin-top:24px; }
.panel-grid > div { display:grid; grid-template-columns:46px 1fr; gap:16px; align-items:start; }
.pico { width:46px; height:46px; border-radius:var(--r-md); display:grid; place-items:center;
        background:var(--md-primary-container); color:var(--md-on-primary-container);
        transition:border-radius .34s var(--ease-spring); }
.panel-grid > div:hover .pico { border-radius:var(--r-full); }
.panel-grid h3 { font-size:1.0625rem; font-weight:600; margin-bottom:4px; }
.panel-grid p { margin:0; }

/* ---------- SIGNUP ---------- */
.signup form { display:flex; gap:9px; flex-wrap:wrap; margin-top:20px; }
/* scope this to the email field only — a bare `.signup input` also matches
   the consent checkbox and inflates it into a 180x52 white slab */
.signup input[type="email"] {
                flex:1; min-width:180px; min-height:52px; padding:0 20px; font:inherit; font-size:1rem;
                border-radius:var(--r-full); border:1px solid var(--md-outline);
                background:var(--md-surface-c-lowest); color:var(--md-on-surface); }
.signup .btn { min-height:52px; }

/* ---------- FAQ / ACCORDION ---------- */
.faq details { border-bottom:1px solid var(--md-outline-variant); }
.faq details:first-of-type { border-top:1px solid var(--md-outline-variant); }
.faq summary { list-style:none; cursor:pointer; padding:20px 44px 20px 0; position:relative;
               font-family:var(--font-display); font-size:1.0625rem; font-weight:600; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:""; position:absolute; right:12px; top:27px; width:9px; height:9px;
      border-right:2px solid var(--md-on-surface-variant); border-bottom:2px solid var(--md-on-surface-variant);
      transform:rotate(45deg); transition:transform .24s var(--ease-emph); }
.faq details[open] summary::after { transform:rotate(-135deg); top:31px; }
.faq details > p, .faq details > ul { margin:0 0 20px; color:var(--md-on-surface-variant); }

/* ---------- FOOTER (injected by site.js) ---------- */
/* ---------- SECTION NAV ----------
   Four destinations under the masthead, on every page that is part of
   the site proper. Landing pages — the Top 5 reviews, the advertorials
   and the four seasonal campaigns — leave it off on purpose: they are
   entered from an ad and should not offer a way out above the fold. */
.sitenav { border-block:1px solid var(--md-outline-variant); }
.sitenav .wide { display:flex; align-items:center; gap:28px; min-height:49px; }
.sitenav a { color:var(--md-on-surface-variant); font-family:var(--font-display);
             font-size:.75rem; font-weight:600; text-decoration:none; padding-block:15px; }
.sitenav a:first-child, .sitenav a:hover { color:var(--md-primary); }
.sitenav a:hover { text-decoration:underline; text-underline-offset:5px; }
.sitenav a[aria-current="page"] { color:var(--md-primary); }
@media (max-width:560px) {
  .sitenav .wide { gap:0; justify-content:space-between; }
  .sitenav a { font-size:.625rem; }
}

.footer { background:var(--md-surface-c-low); margin-top:clamp(40px,5vw,72px);
          padding-block:clamp(36px,4.5vw,56px) 26px; }
/* Center the identity and keep the legal links on their own balanced row. */
.footer-head { display:grid; justify-items:center; gap:24px; text-align:center; }
.footer-brand { width:100%; }
.footer-brand .wordmark { justify-content:center; }
.footer-intro { max-width:54ch; margin:16px auto 0; text-wrap:pretty; }
.footer-legal { display:flex; align-items:center; justify-content:center; gap:10px 28px; flex-wrap:wrap;
                font-family:var(--font-display); font-size:.875rem; }
.footer-legal a { padding-block:6px; color:var(--md-on-surface-variant); text-decoration:none;
                  text-underline-offset:4px; }
.footer-legal a:hover { color:var(--md-primary); text-decoration:underline; }
.disclosures a { color:var(--md-on-surface); text-decoration:underline;
                 text-underline-offset:2px; }
.disclosures a:hover { color:var(--md-primary); }
.disclosures { margin-top:36px; padding-top:24px; border-top:1px solid var(--md-outline-variant);
               display:grid; gap:13px; color:var(--md-on-surface-variant); font-size:.8125rem; line-height:1.6; }
.disclosures strong { color:var(--md-on-surface); font-weight:600; }
.footer-base { margin-top:24px; display:flex; justify-content:center; text-align:center; gap:8px 14px; flex-wrap:wrap;
               color:var(--md-on-surface-variant); font-size:.8125rem; }

/* ---------- FAB (icon only) ---------- */
.fab { position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom,0px)); z-index:50;
       display:grid; place-items:center; width:56px; height:56px; border:0;
       border-radius:var(--r-lg); cursor:pointer; background:var(--md-primary-container);
       color:var(--md-on-primary-container); box-shadow:var(--shadow-3);
       opacity:0; transform:translateY(16px) scale(.9); pointer-events:none;
       transition:opacity .24s var(--ease-std), transform .24s var(--ease-emph),
                  border-radius .34s var(--ease-spring); }
.fab.is-on { opacity:1; transform:none; pointer-events:auto; }
.fab:hover { border-radius:var(--r-full); }

/* Fractional stars: the filled width follows the 0–10 product score,
   quantised to quarter stars in catalog.js so the difference between two
   products is a visible step rather than a two-pixel sliver. */
.rating-stars { display:inline-flex; align-items:center; gap:2px; flex-shrink:0;
                color:var(--star); line-height:0; vertical-align:middle; }
.rating-star { display:block; position:relative; width:18px; height:18px; flex:0 0 18px; }
.rating-star > svg { color:var(--star-empty); }
.rating-star svg { display:block; width:18px; height:18px; max-width:none; }
.rating-star-fill { position:absolute; top:0; left:0; height:100%; width:var(--star-fill);
                    overflow:hidden; }

/* ---------- SHARED SMALL BITS ---------- */
.eyebrow { color:var(--md-primary); margin-bottom:12px; }
.section { padding-block:clamp(36px,4.5vw,64px); }

/* ---------- RESPONSIVE (phone layout deliberately left as it was) ---------- */
@media (max-width:900px) {
  .panels { grid-template-columns:1fr; }
  .footer-head { gap:20px; }
}
@media (max-width:640px) {
  .masthead-in { min-height:56px; }
  .footer-legal { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 20px; width:100%; max-width:380px; font-size:.8125rem; }
  .footer-brand .wordmark { flex-direction:column; gap:12px; }
  .footer-intro { max-width:34ch; }
  .footer-base { flex-direction:column; gap:6px; }
  .footer-base > span:nth-child(even) { display:none; }
}
@media (max-width:420px) {
  .col, .wide { padding-inline:16px; }
  .fab { right:16px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important;
                         transition-duration:.001ms !important; }
}
@media print { .masthead,.fab,.signup,.notice { display:none !important; } }

/* =====================================================================
   WHICH FONT GOES WHERE
   ---------------------------------------------------------------------
   The body default is the reading serif, because long prose is what this
   site is mostly made of. Everything that is NOT prose — controls, data,
   short fragments, legal small print — takes the display sans back.
   Serif is for reading; sans is for scanning.
   ===================================================================== */
input, select, textarea, button,
.feats li, .entry-meta, .dealbar, .dealproof, .scorepill,
.crumbs, .footer-base, .disclosures, .subnote, .formnote,
.art-tag, .medialabel, .badge, .art-badge, .price-off,
.role-meta, .role-band, table, .c-tag, .c-flag {
  font-family: var(--font-display);
}
/* numerals that sit in columns or tick over line up properly */
.tnum, .scorepill, .c-cd i, .cd i, time { font-variant-numeric: tabular-nums; }


/* =====================================================================
   NEWSLETTER FORM — shared by the guide and all four campaign pages
   ---------------------------------------------------------------------
   The checkbox is drawn rather than left native. Two reasons: the native
   control ignores the design system entirely, and its height never lines
   up with the label's line box, so alignment ends up depending on a magic
   margin that breaks the moment the typeface or size changes.

   Here the numbers are tied together instead:
       line box = 14px x 1.5 = 21px
       box      = 18px
       offset   = (21 - 18) / 2 = 1.5px
   Change one and the comment tells you what the others become.
   ===================================================================== */
.hp { position:absolute !important; left:-9999px !important; width:1px; height:1px;
      overflow:hidden; border:0; }

.consent { display:flex; align-items:flex-start; gap:11px; flex:1 1 100%;
           margin-top:6px; cursor:pointer; }
.consent > span { font-size:.875rem; line-height:1.5; opacity:.88; }

.consent input[type="checkbox"] {
  appearance:none; -webkit-appearance:none;
  flex:0 0 auto; width:18px; height:18px; margin:1.5px 0 0; padding:0;
  min-width:0; min-height:0;
  border:2px solid var(--md-outline); border-radius:var(--r-xs);
  background:transparent; cursor:pointer;
  display:grid; place-content:center;
  transition:background .15s var(--ease-std), border-color .15s var(--ease-std);
}
.consent input[type="checkbox"]::before {
  content:""; width:11px; height:11px; background:var(--md-on-primary);
  clip-path:polygon(14% 44%, 0 60%, 39% 100%, 100% 18%, 84% 0, 39% 68%);
  transform:scale(0); transition:transform .12s var(--ease-emph);
}
.consent input[type="checkbox"]:checked {
  background:var(--md-primary); border-color:var(--md-primary);
}
.consent input[type="checkbox"]:checked::before { transform:scale(1); }
.consent input[type="checkbox"]:focus-visible { outline:3px solid var(--md-primary); outline-offset:3px; }
.consent:hover input[type="checkbox"]:not(:checked) { border-color:var(--md-on-surface); }

.subnote { margin-top:14px; padding:11px 15px; border-radius:var(--r-md); font-size:.9375rem; }
.subnote.is-ok  { background:var(--md-surface-c-lowest); color:var(--md-on-surface); }
.subnote.is-bad { background:var(--md-error-container);  color:var(--md-on-error-container); }
#subBtn[disabled] { opacity:.6; cursor:progress; }