/* ==================================================================
   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;

  /* Typography: Open Sans for body copy; Montserrat for headings,
     buttons and interface labels. Keep the HTML Google Fonts link aligned. */
  --font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-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; font-family:var(--font-display); 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; }
h5,h6 { font-family:var(--font-display); }
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; } }

/* Body prose, features, disclosures and table cells use the reading face.
   Heading and control families remain Montserrat. Specific selectors also
   cover later list/home styles without changing those component files. */
input, select, textarea,
.feats li, .entry-meta, .dealproof,
.footer-base, .disclosures, .subnote, .formnote,
.role-meta, table, .prose td,
body .field label, body .home-category .body-s,
body .entry-media .vsl-preview .vsl-preview-label {
  font-family:var(--font-body);
}
button, input[type="button"], input[type="submit"], input[type="reset"],
[role="button"], .btn, a.deallink,
.dealbar, .scorepill, .crumbs,
.art-tag, .medialabel, .badge, .art-badge, .price-off,
.role-band, .c-tag, .c-flag,
.entry .num, .byline .byline-av {
  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; }