/* ============ PAWVERDICT — SHARED DESIGN SYSTEM ============ */
:root{
  --ink:#0f1e2e;
  --ink-soft:#1d3148;
  --ink-mute:#56657a;
  --paper:#fbf8f3;
  --paper-2:#f3ede2;
  --rule:#e3dccd;
  --accent:#c8451f;
  --accent-2:#e8703f;
  --gold:#b8893a;
  /* CTA + accents = brand-on green matching the logo's checkmark.
     Lifted from the dark forest #2f7a4d to a brighter, friendlier mid-
     green that reads as the same family as the logo. Hover keeps the
     darker shade for press feedback. */
  --green:#22c55e;
  --green-dark:#16a34a;
  --green-soft:#e6f7ed;
  /* Rome theming refactor (P5) — token defaults so themed pages can
     override them from :root via paletteStyleBlock. Unset projects
     inherit these Editorial values. Split from ink-soft/ink-mute
     because some themes want body text a different hue from the
     dark structural ink. Overridden per-project when config.palette
     sets the matching key (see paletteStyleBlock in lib/build.ts). */
  --text:#2c3e54;
  --text-mute:#6b7a8c;
  --success:#2f7a4d;
  --star:#00b67a;
  --surface:#ffffff;
  --on-accent:#ffffff;
  --shadow-sm: 0 1px 2px rgba(15,30,46,.06), 0 1px 1px rgba(15,30,46,.04);
  --shadow-md: 0 4px 14px rgba(15,30,46,.08), 0 2px 4px rgba(15,30,46,.05);
  --shadow-lg: 0 24px 48px -12px rgba(15,30,46,.18), 0 6px 12px rgba(15,30,46,.06);
  --radius:14px;
  --radius-sm:8px;
  --maxw:1120px;
  --serif:'Fraunces','Times New Roman',Georgia,serif;
  --sans:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);
  font-size:18px;line-height:1.65;
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit}

/* Skip link */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:1000;font-size:13px}
.skip:focus{left:10px;top:10px}

/* ============ HEADER ============ */
.topbar{background:#fff;border-bottom:1px solid var(--rule);position:static;z-index:50;backdrop-filter:saturate(1.2)}
.topbar-inner{max-width:var(--maxw);margin:0 auto;padding:var(--topbar-py,14px) var(--topbar-px,20px);display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-weight:700;color:var(--ink);font-size:18px;letter-spacing:-.005em}
.brand:hover{text-decoration:none;color:var(--accent)}
/* Horizontal nudge for the brand lockup (Logos card). translateX so it
   shifts without reflowing the nav. Default 0 = no movement. */
.topbar .brand{transform:translateX(var(--logo-ox,0))}
.brand-mark{
  width:var(--logo-h-d,38px);height:var(--logo-h-d,38px);border-radius:9px;
  background:linear-gradient(135deg,var(--ink) 0%,var(--ink-soft) 100%);
  display:grid;place-items:center;color:var(--paper);
  position:relative;flex-shrink:0;
  box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.08);
}
/* Mark-mode logo icon scales with the header height slider. svg keeps a
   proportional inset; a raster/PNG mark fills the badge (overrides any
   legacy inline width/height attributes on the <img>). */
.brand-mark svg{width:58%;height:58%}
.brand-mark img{width:100%;height:100%;object-fit:contain;border-radius:inherit}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-text small{font-family:var(--sans);font-weight:500;color:var(--ink-mute);font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;margin-top:2px}
/* Full-logo lockup — uploaded logo replaces the mark+text (no box, no gradient) */
.brand-logo-full{display:inline-flex;align-items:center}
/* Per-device logo heights driven by CSS variables (set per project by the
   Logos card / palette block). Each cascades up: tablet→desktop, mobile→its own
   default. object-fit:contain guarantees no squashing when the width cap engages. */
.brand-logo-full img{display:block;width:auto;max-width:var(--logo-mw,1000px);object-fit:contain}
.topbar .brand-logo-full img{height:var(--logo-h-d,40px) !important}
.foot-brand .brand-logo-full img{height:var(--footer-logo-h-d,34px) !important}
.nav{display:flex;gap:26px;align-items:center}
.nav a{color:var(--ink-soft);font-size:14px;font-weight:500;padding:6px 14px;border-radius:999px;border:1px solid transparent;transition:background .15s ease,border-color .15s ease,color .15s ease}
.nav a:hover{color:var(--ink);text-decoration:none;background:rgba(15,30,46,.05)}
/* Active state = subtle pill outline matching the page ink, NOT a red text
   override. Reads as a quiet "you are here" badge rather than a CTA. */
.nav a.active{color:var(--ink);background:rgba(15,30,46,.06);border-color:rgba(15,30,46,.18);font-weight:600}
@media (max-width:780px){
  /* On phones the header scrolls away with the page — the sticky bar was eating
     viewport real estate and "hanging" with the logo follow on. */
  .topbar{position:static}
  .nav{display:none}
  .topbar-inner{padding:12px 16px}
  .brand{font-size:16px}
  .brand-mark{width:34px;height:34px}
  .brand-mark svg{width:20px;height:20px}
  /* Mobile logo size + max width — both driven by the editor's "Mobile" slider.
     max-width falls back to 90vw so a wide wordmark can't physically overflow
     the viewport, but the user's --logo-mw-m wins when set. */
  .topbar .brand-logo-full img{height:var(--logo-h-m,44px) !important;max-width:var(--logo-mw-m,90vw) !important}
  .foot-brand .brand-logo-full img{height:var(--footer-logo-h-m,36px) !important;max-width:var(--logo-mw-m,90vw) !important}
}
/* Tablet — falls back to desktop values when the user hasn't set tablet-specific ones. */
@media (min-width:781px) and (max-width:1023px){
  .topbar .brand-logo-full img{height:var(--logo-h-t,var(--logo-h-d,40px)) !important;max-width:var(--logo-mw-t,var(--logo-mw,1000px)) !important}
  .foot-brand .brand-logo-full img{height:var(--footer-logo-h-t,var(--footer-logo-h-d,34px)) !important;max-width:var(--logo-mw-t,var(--logo-mw,1000px)) !important}
}

/* Mobile nav toggle */
.mnav-toggle{display:none;background:none;border:1px solid var(--rule);width:40px;height:40px;border-radius:8px;cursor:pointer;align-items:center;justify-content:center}
.mnav-toggle svg{width:20px;height:20px;color:var(--ink)}
@media (max-width:780px){.mnav-toggle{display:inline-flex}}
.mnav{display:none;background:#fff;border-bottom:1px solid var(--rule);padding:8px 16px}
.mnav.open{display:block}
.mnav a{display:block;padding:11px 6px;color:var(--ink-soft);font-size:15px;font-weight:500;border-bottom:1px solid var(--rule)}
.mnav a:last-child{border-bottom:none}
.mnav a:hover{color:var(--accent);text-decoration:none}

/* ============ FOOTER ============ */
footer{background:var(--ink);color:#b8c2cf;padding:48px 0 24px;margin-top:auto}
.foot-inner{max-width:var(--maxw);margin:0 auto;padding:0 20px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
@media (max-width:780px){.foot-inner{grid-template-columns:1fr 1fr;gap:28px}}
@media (max-width:520px){.foot-inner{grid-template-columns:1fr}}
.foot-brand{font-family:var(--serif);font-weight:700;font-size:20px;color:var(--paper);margin-bottom:10px;display:flex;align-items:center;gap:10px;transform:translateX(var(--footer-logo-ox,0))}
.foot-brand .brand-mark{width:var(--footer-logo-h-d,32px);height:var(--footer-logo-h-d,32px)}
.foot-brand .brand-mark svg{width:56%;height:56%}
.foot-disclaimer{font-size:13px;line-height:1.65;color:#8b97a8}
.foot-inner h5{font-family:var(--sans);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--paper);margin:0 0 14px}
.foot-inner ul{list-style:none;padding:0;margin:0}
.foot-inner ul li{margin-bottom:9px;font-size:13.5px}
.foot-inner ul a{color:#b8c2cf}
.foot-inner ul a:hover{color:var(--accent-2);text-decoration:none}
.foot-contact{font-size:13px;line-height:1.7;color:#b8c2cf}
.foot-contact strong{color:var(--paper);font-weight:600}
.foot-contact a{color:#b8c2cf}
.foot-contact a:hover{color:var(--accent-2)}
.foot-bottom{max-width:var(--maxw);margin:32px auto 0;padding:20px 20px 0;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;font-size:12px;color:#8b97a8}

/* ============ COMMON COMPONENTS ============ */
.section-eyebrow{display:inline-block;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--accent);margin-bottom:10px}
.section-title{font-family:var(--serif);font-weight:600;font-size:clamp(26px,4vw,38px);line-height:1.15;letter-spacing:-.015em;margin:0;color:var(--ink)}
.section-title em{font-style:italic;color:var(--accent);font-weight:500}
.section-head{text-align:center;margin-bottom:36px}

/* CTA buttons */
.cta-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;background:var(--accent);color:#fff;
  font-family:var(--sans);font-weight:700;font-size:14px;letter-spacing:.02em;
  text-transform:uppercase;border:none;border-radius:8px;cursor:pointer;
  transition:all .2s ease;
  box-shadow:0 4px 12px rgba(200,69,31,.25),inset 0 -2px 0 rgba(0,0,0,.12);
  text-decoration:none;min-height:48px;
}
.cta-btn:hover{background:var(--accent-2);transform:translateY(-1px);box-shadow:0 6px 18px rgba(200,69,31,.35),inset 0 -2px 0 rgba(0,0,0,.12);text-decoration:none;color:#fff}
.cta-btn:active{transform:translateY(0)}
.cta-btn.secondary{background:#fff;color:var(--ink);border:1.5px solid var(--ink);box-shadow:var(--shadow-sm)}
.cta-btn.secondary:hover{background:var(--ink);color:#fff}
.cta-btn .arrow{transition:transform .2s ease}
.cta-btn:hover .arrow{transform:translateX(3px)}

/* ============ STANDARD PAGE LAYOUT (about/contact/legal) ============ */
.page-hero{
  background:radial-gradient(ellipse at top right,rgba(184,137,58,.08),transparent 60%),radial-gradient(ellipse at bottom left,rgba(200,69,31,.06),transparent 55%),var(--paper);
  border-bottom:1px solid var(--rule);
  padding:48px 0 36px;position:relative;overflow:hidden;
}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(0deg,transparent 0,transparent 39px,rgba(15,30,46,.03) 39px,rgba(15,30,46,.03) 40px);
  pointer-events:none;
}
.page-hero-inner{max-width:var(--maxw);margin:0 auto;padding:0 20px;position:relative}
.breadcrumb{font-size:13px;color:var(--ink-mute);margin-bottom:14px}
.breadcrumb a{color:var(--ink-mute)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb .sep{margin:0 8px;opacity:.5}
h1.page-h1{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(30px,5.4vw,52px);line-height:1.05;letter-spacing:-.02em;
  margin:0 0 14px;color:var(--ink);max-width:22ch;
  font-variation-settings:"opsz" 144;
}
h1.page-h1 em{font-style:italic;color:var(--accent);font-weight:600}
.page-sub{font-size:clamp(17px,2.2vw,20px);color:var(--ink-soft);max-width:62ch;margin:0;line-height:1.6}

.content{max-width:760px;margin:0 auto;padding:48px 20px}
.content h2{font-family:var(--serif);font-weight:600;font-size:30px;line-height:1.2;margin:36px 0 14px;color:var(--ink);letter-spacing:-.01em}
.content h2:first-child{margin-top:0}
.content h3{font-family:var(--serif);font-weight:600;font-size:23px;margin:26px 0 10px;color:var(--ink)}
.content p{font-size:18px;line-height:1.7;color:var(--ink-soft);margin:0 0 18px}
.content ul,.content ol{font-size:18px;line-height:1.7;color:var(--ink-soft);padding-left:24px;margin:0 0 20px}
.content ul li,.content ol li{margin-bottom:8px}
.content strong{color:var(--ink);font-weight:600}
.content a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.content a:hover{color:var(--accent-2)}
.content blockquote{
  border-left:3px solid var(--accent);
  padding:6px 0 6px 22px;margin:24px 0;
  font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.55;color:var(--ink);
}

/* Reduce motion */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}html{scroll-behavior:auto}}

/* ============ BLOG ARTICLE STYLES ============ */
.article-hero{background:radial-gradient(ellipse at top right,rgba(184,137,58,.08),transparent 60%),var(--paper);border-bottom:1px solid var(--rule);padding:36px 0}
.article-hero-inner{max-width:760px;margin:0 auto;padding:0 20px}
.article-hero .breadcrumb{font-size:13px;color:var(--ink-mute);margin-bottom:16px}
.article-hero .breadcrumb a{color:var(--ink-mute)}
.article-hero .breadcrumb a:hover{color:var(--accent)}
.article-eyebrow{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--accent);background:rgba(200,69,31,.08);border:1px solid rgba(200,69,31,.18);padding:5px 11px;border-radius:100px;margin-bottom:14px}
h1.article-h1{font-family:var(--serif);font-weight:700;font-size:clamp(28px,4.5vw,42px);line-height:1.1;letter-spacing:-.02em;margin:0 0 16px;color:var(--ink)}
h1.article-h1 em{font-style:italic;color:var(--accent);font-weight:600}
.article-dek{font-size:18px;color:var(--ink-soft);line-height:1.55;margin:0 0 22px;font-family:var(--serif);font-style:italic}
.article-byline{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:13px;color:var(--ink-mute);padding-top:16px;border-top:1px dashed var(--rule)}
.article-byline strong{color:var(--ink);font-weight:600}
.article-feat-img{aspect-ratio:16/8;overflow:hidden;background:#f3ede2;border-bottom:1px solid var(--rule)}
.article-feat-img svg{width:100%;height:100%;display:block}
.article-body{max-width:680px;margin:0 auto;padding:48px 20px}
.article-body h2{font-family:var(--serif);font-weight:600;font-size:28px;line-height:1.2;margin:36px 0 14px;color:var(--ink);letter-spacing:-.01em;scroll-margin-top:80px}
.article-body h2:first-child{margin-top:0}
.article-body h3{font-family:var(--serif);font-weight:600;font-size:21px;margin:26px 0 10px;color:var(--ink)}
.article-body p{font-size:17px;line-height:1.75;color:var(--ink-soft);margin:0 0 18px;font-family:var(--serif);font-weight:400}
.article-body ul,.article-body ol{font-size:17px;line-height:1.75;color:var(--ink-soft);padding-left:24px;margin:0 0 20px;font-family:var(--serif)}
.article-body li{margin-bottom:8px}
.article-body strong{color:var(--ink);font-weight:600}
.article-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.article-body a:hover{color:var(--accent-2)}
.article-body blockquote{border-left:3px solid var(--accent);padding:8px 0 8px 24px;margin:28px 0;font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.55;color:var(--ink)}

.callout-box{background:var(--paper-2);border:1px solid var(--rule);border-left:4px solid var(--accent);border-radius:var(--radius-sm);padding:20px 24px;margin:24px 0}
.callout-box h4{font-family:var(--sans);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--accent);margin:0 0 8px}
.callout-box p{font-family:var(--sans) !important;font-size:15px !important;line-height:1.6 !important;color:var(--ink) !important;margin:0 !important}

.compare-table{width:100%;border-collapse:collapse;margin:24px 0;background:#fff;border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;font-family:var(--sans)}
.compare-table th,.compare-table td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--rule);font-size:14px;line-height:1.5;vertical-align:top}
.compare-table th{background:var(--ink);color:var(--paper);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.compare-table tr:last-child td{border-bottom:none}
.compare-table td:first-child{font-weight:600;color:var(--ink)}

.tip-box{background:#fff;border:1px solid var(--rule);border-radius:var(--radius);padding:20px 24px;margin:24px 0;display:flex;gap:16px;align-items:flex-start}
.tip-box .tip-icon{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:var(--green-soft);color:var(--green);display:grid;place-items:center}
.tip-box h4{font-family:var(--serif);font-weight:600;font-size:17px;margin:0 0 6px;color:var(--ink)}
.tip-box p{font-family:var(--sans) !important;font-size:14px !important;line-height:1.6 !important;color:var(--ink-soft) !important;margin:0 !important}

.cta-card{background:linear-gradient(135deg,var(--ink),var(--ink-soft));color:var(--paper);border-radius:var(--radius);padding:32px;margin:32px 0;text-align:center;position:relative;overflow:hidden}
.cta-card::before{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(200,69,31,.2),transparent 70%)}
.cta-card h3{font-family:var(--serif);font-weight:600;font-size:22px;margin:0 0 8px;color:var(--paper);position:relative}
.cta-card p{font-family:var(--sans) !important;font-size:15px !important;color:#b8c2cf !important;margin:0 0 18px !important;position:relative;line-height:1.55 !important}

.author-section{background:#fff;border:1px solid var(--rule);border-radius:var(--radius);padding:24px;margin:36px 0;display:flex;gap:18px;align-items:flex-start}
@media (max-width:560px){.author-section{flex-direction:column}}
.author-section .author-pic{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--gold));display:grid;place-items:center;color:#fff;font-family:var(--serif);font-weight:600;font-size:22px;flex-shrink:0;box-shadow:var(--shadow-sm)}
.author-section h4{font-family:var(--serif);font-weight:600;font-size:16px;margin:0 0 4px;color:var(--ink)}
.author-section .role{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin-bottom:8px}
.author-section p{font-family:var(--sans) !important;font-size:14px !important;line-height:1.6 !important;color:var(--ink-soft) !important;margin:0 !important}

.related{padding:48px 0;background:var(--paper-2);border-top:1px solid var(--rule)}
.related-inner{max-width:1080px;margin:0 auto;padding:0 20px}
.related h2{font-family:var(--serif);font-weight:600;font-size:24px;margin:0 0 20px;color:var(--ink)}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:780px){.related-grid{grid-template-columns:1fr}}
.related-card{background:#fff;border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .25s ease,box-shadow .25s ease}
.related-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);text-decoration:none}
.related-card .thumb{aspect-ratio:16/9;background:#f3ede2}
.related-card .thumb svg{width:100%;height:100%;display:block}
.related-card .body{padding:18px}
.related-card .cat{font-size:10.5px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}
.related-card h3{font-family:var(--serif);font-weight:600;font-size:16px;line-height:1.3;margin:0;color:var(--ink)}

/* ============ BLOG ARTICLE STYLES ============ */
.article-hero{
  background:radial-gradient(ellipse at top right,rgba(184,137,58,.08),transparent 60%),radial-gradient(ellipse at bottom left,rgba(200,69,31,.06),transparent 55%),var(--paper);
  border-bottom:1px solid var(--rule);
  padding:44px 0 32px;position:relative;overflow:hidden;
}
.article-hero::before{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(0deg,transparent 0,transparent 39px,rgba(15,30,46,.03) 39px,rgba(15,30,46,.03) 40px);
  pointer-events:none;
}
.article-hero-inner{max-width:760px;margin:0 auto;padding:0 20px;position:relative}
.article-eyebrow{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--accent);background:rgba(200,69,31,.08);border:1px solid rgba(200,69,31,.2);padding:5px 11px;border-radius:100px;margin-bottom:18px}
h1.article-h1{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(28px,5vw,44px);line-height:1.1;letter-spacing:-.018em;
  margin:0 0 14px;color:var(--ink);
  font-variation-settings:"opsz" 144;
}
h1.article-h1 em{font-style:italic;color:var(--accent);font-weight:600}
.article-dek{font-size:clamp(17px,2.2vw,20px);color:var(--ink-soft);line-height:1.6;margin:0 0 22px;max-width:62ch}
.article-byline{display:flex;flex-wrap:wrap;gap:8px 12px;font-size:13px;color:var(--ink-mute);padding-top:14px;border-top:1px dashed var(--rule)}
.article-byline strong{color:var(--ink);font-weight:600}

.article-feat-img{max-width:760px;margin:24px auto 0;padding:0 20px}
.article-feat-img img,.article-feat-img svg{width:100%;height:auto;display:block;border-radius:var(--radius);box-shadow:var(--shadow-md);aspect-ratio:16/10;object-fit:cover}

.article-body{max-width:680px;margin:0 auto;padding:36px 20px 48px}
.article-body p{font-size:19px;line-height:1.75;color:var(--ink-soft);margin:0 0 22px}
.article-body h2{font-family:var(--serif);font-weight:600;font-size:30px;line-height:1.2;margin:38px 0 16px;color:var(--ink);letter-spacing:-.012em}
.article-body h3{font-family:var(--serif);font-weight:600;font-size:23px;line-height:1.25;margin:28px 0 10px;color:var(--ink)}
.article-body h4{font-family:var(--sans);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);margin:0 0 10px}
.article-body strong{color:var(--ink);font-weight:600}
.article-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.article-body a:hover{color:var(--accent-2)}
.article-body ul,.article-body ol{font-size:19px;line-height:1.7;color:var(--ink-soft);padding-left:26px;margin:0 0 24px}
.article-body ul li,.article-body ol li{margin-bottom:10px}
.article-body em{font-style:italic}

.compare-table{width:100%;border-collapse:collapse;margin:20px 0 28px;background:#fff;border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;font-size:14.5px}
.compare-table th,.compare-table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top}
.compare-table th{background:var(--ink);color:var(--paper);font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em}
.compare-table tr:last-child td{border-bottom:none}
.compare-table td:first-child{font-weight:600;color:var(--ink)}

.callout-box{background:var(--paper-2);border-left:3px solid var(--gold);border-radius:var(--radius-sm);padding:18px 22px;margin:24px 0;font-size:15px;line-height:1.6}
.callout-box h4{margin:0 0 6px;font-size:11px;letter-spacing:.12em;color:var(--gold)}
.callout-box p{margin:0;color:var(--ink-soft);font-size:15px}

.tip-box{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:flex-start;background:var(--ink);color:var(--paper);padding:24px;border-radius:var(--radius);margin:28px 0;position:relative;overflow:hidden}
.tip-box::before{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(200,69,31,.18),transparent 70%);pointer-events:none}
.tip-icon{width:42px;height:42px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:grid;place-items:center;color:#fff;flex-shrink:0;position:relative;box-shadow:0 6px 14px rgba(200,69,31,.3)}
.tip-box h4{font-family:var(--serif);font-size:16px;font-weight:600;color:var(--paper);margin:0 0 6px;text-transform:none;letter-spacing:0}
.tip-box p{margin:0;color:#b8c2cf;font-size:15px;line-height:1.6}

.cta-card{background:#fff;border:1px solid var(--rule);border-radius:var(--radius);padding:28px;text-align:center;margin:36px 0;box-shadow:var(--shadow-md)}
.cta-card h3{font-family:var(--serif);font-weight:600;font-size:22px;margin:0 0 8px;color:var(--ink)}
.cta-card p{margin:0 0 16px;font-size:15px;color:var(--ink-soft)}

.author-section{background:var(--paper-2);border-radius:var(--radius);padding:24px;margin-top:36px;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:flex-start;border:1px solid var(--rule)}
.author-section .author-pic{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--gold));display:grid;place-items:center;color:#fff;font-family:var(--serif);font-weight:600;font-size:22px;flex-shrink:0;box-shadow:var(--shadow-md)}
.author-section h4{font-family:var(--serif);font-weight:600;font-size:17px;margin:0 0 2px;color:var(--ink)}
.author-section .role{font-size:11px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
.author-section p{font-size:14px;color:var(--ink-soft);margin:0;line-height:1.6}
@media (max-width:560px){.author-section{grid-template-columns:1fr}}

.related{background:var(--paper-2);border-top:1px solid var(--rule);padding:48px 0}
.related-inner{max-width:1080px;margin:0 auto;padding:0 20px}
.related-inner h2{font-family:var(--serif);font-weight:600;font-size:24px;margin:0 0 24px;color:var(--ink);text-align:center}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:780px){.related-grid{grid-template-columns:1fr}}
.related-card{background:#fff;border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--ink);transition:all .2s ease;box-shadow:var(--shadow-sm)}
.related-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);text-decoration:none}
.related-card .thumb{aspect-ratio:16/10;background:#f3ede2;overflow:hidden}
.related-card .thumb img,.related-card .thumb svg{width:100%;height:100%;display:block;object-fit:cover}
.related-card .body{padding:16px 18px 18px}
.related-card .cat{font-size:11px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px;display:block}
.related-card h3{font-family:var(--serif);font-weight:600;font-size:16px;line-height:1.3;margin:0;color:var(--ink)}

/* ════════════════════════════════════════════════════════════════════
   Comparison-page (v2) styles — moved here from the inline <style> block
   in the comparison template so CSS tweaks apply to all generated pages
   on rebuild, no per-page regeneration needed.
   ════════════════════════════════════════════════════════════════════ */
/* Comparison-page styles (v2) — conversion-optimized: rank badges, pros/cons
   icon lists, trust signals row, credentials stack, long-form narrative, mega-CTA. */
.compare-hero{background:radial-gradient(ellipse at 18% 28%,rgba(232,112,63,.18) 0%,transparent 55%),radial-gradient(ellipse at 85% 80%,rgba(60,100,180,.22) 0%,transparent 60%),linear-gradient(180deg,#0f1828 0%,#1a2540 100%);color:#fbf8f3;padding:50px 0 36px;position:relative;overflow:hidden}
.compare-hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.compare-hero>*{position:relative;z-index:1}
/* Title + seal sit as a centered pair. Title column shrinks to its natural
   width (capped via h1 max-width below), seal column is its natural size,
   gap controls space between, and the whole pair centers in the hero so the
   seal sits next to the title's right edge — not pinned to the page edge. */
/* Hero slightly wider than the body so the seal has room to be bigger and more
   prominent, while still keeping the title + seal as a tight pair. */
.compare-hero-inner{max-width:1000px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:1fr auto;gap:36px;align-items:center}
.compare-hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(28px,4.4vw,40px);line-height:1.12;margin:0 0 10px;letter-spacing:-.015em}
.compare-hero h1 em{color:#f4cf91;font-style:italic;font-weight:600}
.compare-hero .hero-sub{font-size:clamp(17px,2vw,19px);opacity:.92;margin:0;max-width:60ch;line-height:1.6}

.hero-seal{width:184px;height:184px;flex-shrink:0;border-radius:50%;background:radial-gradient(circle at 50% 35%,rgba(244,207,145,.20) 0%,rgba(244,207,145,0) 65%),rgba(255,255,255,.04);border:2px solid rgba(244,207,145,.55);box-shadow:0 0 0 5px rgba(244,207,145,.10),inset 0 0 0 1px rgba(244,207,145,.25);display:grid;place-items:center;text-align:center;padding:10px;position:relative}
.hero-seal::before{content:"";position:absolute;inset:9px;border-radius:50%;border:1px dashed rgba(244,207,145,.35);pointer-events:none}
.hero-seal .seal-top{font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#f4cf91;line-height:1.2}
.hero-seal .seal-main{font-family:var(--serif);font-weight:600;font-size:21px;color:#fbf8f3;line-height:1.05;margin:7px 0 5px}
.hero-seal .stars{color:#f4cf91;font-size:16px;letter-spacing:3px;margin:3px 0 5px}
.hero-seal .seal-bottom{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#d6c3a3;line-height:1.2}

.compare-hero-meta{max-width:1000px;margin:18px auto 0;padding:0 20px;font-size:11.5px;opacity:.82;display:flex;gap:18px;flex-wrap:wrap}
.compare-hero-meta-item{display:inline-flex;align-items:center;gap:6px}
.compare-hero-meta-item svg{width:13px;height:13px;opacity:.85;flex-shrink:0}

.compare-wrap{max-width:920px;margin:0 auto;padding:0 20px}

.compare-intro{padding:28px 0 20px}
.compare-intro p{font-size:18px;line-height:1.65;color:var(--ink-soft);margin:0 0 16px}
.compare-intro p strong{color:var(--ink);font-weight:600}

.disclosure-callout{background:#fff4dc;border:1px solid #f1d68a;border-radius:var(--radius);padding:14px 18px;margin:18px 0;font-size:12.5px;color:#6a521a;line-height:1.55}
.disclosure-callout strong{color:#4a3a13}
.disclosure-callout a{color:#6a521a;text-decoration:underline}

/* Product card border switched to ink (near-black) — matches the new
   brand direction. Subtle but defined edge; pairs with the winner
   double-ring below. */
.product-card{background:#fff;border:1px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-sm);margin:22px 0;position:relative;cursor:pointer;transition:box-shadow .15s ease,transform .15s ease}
.product-card:hover{box-shadow:0 8px 28px rgba(0,0,0,.14);transform:translateY(-2px)}
/* Click-through fix: overlay anchor that makes the whole card clickable.
   z-index 1 covers everything; the real CTA + rank badge stay above at z-2. */
.product-card-link{position:absolute;inset:0;z-index:1;overflow:hidden;text-indent:-9999px;color:transparent}
.product-card .cta-btn,.product-card .rank-badge{position:relative;z-index:2}
.product-card .product-middle h3{transition:color .15s ease}
.product-card:hover .product-middle h3{color:var(--accent);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
/* Winner ring: black instead of gold so the #1 card stands out via
   ring weight (2px effective) without competing with the warm logo
   green. */
.product-card.winner{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink),var(--shadow-md)}
.product-card .rank-badge{position:absolute;top:-12px;left:18px;background:var(--ink);color:#fbf8f3;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
/* Winner #1 badge: black like the default badge so the entire card's
   ink language stays consistent (was gold which clashed). */
.product-card.winner .rank-badge{background:var(--ink);color:#fbf8f3}
.product-card .product-body{display:grid;grid-template-columns:180px 1fr 220px;gap:22px;padding:26px 22px 20px}
.product-card .product-thumb{background:var(--paper-2);border-radius:var(--radius-sm);aspect-ratio:1/1;display:grid;place-items:center;padding:14px}
.product-card .product-thumb img{width:100%;height:100%;object-fit:contain}
.product-card .product-middle h3{font-family:var(--serif);font-weight:600;font-size:22px;margin:0 0 4px;color:var(--ink);line-height:1.2}
.product-card .product-middle .brand{font-size:12px;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.08em;margin:0 0 12px}
.product-card .feature-list{list-style:none;margin:0;padding:0}
.product-card .feature-list li{padding-left:26px;position:relative;margin-bottom:9px;font-size:16px;line-height:1.55;color:var(--ink-soft)}
.product-card .feature-list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--green);font-weight:800;font-size:17px}
.product-card .feature-list li strong{color:var(--ink);font-weight:700}
.product-card .cons-list{list-style:none;margin:14px 0 0;padding:12px 0 0 0;border-top:1px dashed var(--rule)}
.product-card .cons-list li{padding-left:26px;position:relative;margin-bottom:7px;font-size:15px;line-height:1.55;color:var(--ink-mute)}
.product-card .cons-list li::before{content:"✕";position:absolute;left:0;top:0;color:#c63b3b;font-weight:800;font-size:16px}
.product-card .score-panel{background:var(--paper-2);border-radius:var(--radius-sm);padding:18px 14px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.product-card .score-panel .label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute)}
.product-card .score-panel .score-num{font-family:var(--serif);font-size:64px;font-weight:600;color:var(--ink);line-height:1}
.product-card .score-panel .stars{color:var(--gold);letter-spacing:3px;font-size:22px}
.product-card .score-panel .reviews{font-size:14px;color:var(--ink-mute);margin-bottom:4px;font-weight:500}
.product-card .promo-banner{background:#c63b3b;color:#fff;font-size:10px;font-weight:700;padding:4px 8px;border-radius:4px;text-transform:uppercase;letter-spacing:.04em;width:100%;text-align:center}
.product-card .promo-banner span{display:block;font-size:8.5px;font-weight:500;margin-top:1px;opacity:.85;text-transform:none;letter-spacing:.02em}
/* Price + CTA + shipping sit visually disconnected from the score block:
   margin gap + top border give them their own "panel within a panel". */
.product-card .score-panel .price{font-size:18px;font-weight:700;color:var(--ink);margin-top:14px;padding-top:14px;border-top:1px solid var(--rule);width:100%}
.product-card .score-panel .price-was{font-size:13px;color:var(--ink-mute);text-decoration:line-through;margin-left:8px;font-weight:500}
.product-card .cta-btn{display:block;background:var(--green);color:#fff !important;font-weight:700;font-size:18px;padding:14px 18px;border-radius:var(--radius-sm);text-align:center;width:100%;text-decoration:none !important;transition:background .15s;margin-top:4px}
.product-card .cta-btn:hover{background:var(--green-dark)}
/* Shipping time — sits directly under the Visit Site CTA, soft-emphasised
   so it reads as a trust signal rather than a heavy promo line. */
.product-card .score-panel .shipping-time{font-size:12.5px;color:var(--ink-mute);margin-top:8px;display:flex;align-items:center;justify-content:center;gap:6px;font-weight:500;letter-spacing:.01em}
.product-card .score-panel .shipping-time::before{content:"🚚";font-size:13px}
.product-card .product-tags{display:flex;gap:8px;flex-wrap:wrap;padding:14px 22px 18px;border-top:1px solid var(--rule)}
.product-card .product-tag{background:var(--paper-2);border:1px solid var(--rule);color:var(--ink-soft);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:5px 10px;border-radius:999px}
.product-card .product-tag .tag-label{color:var(--ink-mute);font-weight:500;margin-right:3px}
.product-card .product-tag.highlight{background:#e7f3eb;border-color:#a8d4b8;color:#2a4d2a}

.evaluation{background:#fff;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:36px 0;padding:36px 0}
.evaluation h2{font-family:var(--serif);font-size:26px;font-weight:600;text-align:center;margin:0 0 24px;color:var(--ink)}
.criteria-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:920px;margin:0 auto;padding:0 20px}
.criterion{text-align:center;padding:0 12px}
.criterion-icon{width:48px;height:48px;border-radius:50%;background:#e7f3eb;color:var(--green);display:grid;place-items:center;margin:0 auto 12px;font-size:22px;font-weight:700}
.criterion h3{font-size:15px;font-weight:700;margin:0 0 6px;color:var(--ink)}
.criterion p{font-size:13px;line-height:1.55;color:var(--ink-mute);margin:0}

/* Recommends callout — matched to the product cards' ink border so the
   #1-recommends + product-card row reads as one visual family. */
.recommends{background:#fff;border:1px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-md);padding:26px;margin:32px 0;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:30px;position:relative;cursor:pointer;transition:box-shadow .15s ease,transform .15s ease}
.recommends:hover{box-shadow:0 10px 32px rgba(0,0,0,.14);transform:translateY(-2px)}
.recommends-link{position:absolute;inset:0;z-index:1;overflow:hidden;text-indent:-9999px;color:transparent}
.recommends-main,.recommends-side{position:relative;z-index:2}
.recommends:hover .recommends-cta{text-decoration-thickness:3px}
.recommends-main{display:flex;flex-direction:column;gap:18px}
.recommends-eyebrow{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0}
.recommends h2{font-family:var(--serif);font-size:26px;font-weight:600;margin:4px 0 0;line-height:1.2}
/* Content-sized frame: the image's own height (set per-image in the editor)
   drives the box, so it grows/shrinks with the size slider and never crops a
   logo by default. Per-image inline styles override the defaults below. */
.recommends-img{background:var(--paper-2);border-radius:var(--radius-sm);min-height:120px;display:grid;place-items:center;overflow:hidden;border:1px solid var(--rule);padding:10px}
.recommends-img img{max-width:100%;max-height:280px;width:auto;height:auto;object-fit:contain;display:block}
/* Recommends-features bullet list — hidden by default. Build-time
   migration moves the bottom "Why X Came Out On Top" narrative into
   this same column (as .narrative-in-recommends) so the box reads
   Name → Editorial review → CTA instead of bullets that duplicated
   the product card. */
.recommends-features{display:none}

/* Narrative moved into the recommends box. Typography matches the
   editorial guidelines (~16-18px body, 22px serif heading) so the
   review reads as the main content of the box, not supporting text.
   Top divider hints that this is the editorial section under the
   brand image. */
.narrative-in-recommends{margin:18px 0 22px;padding-top:18px;border-top:1px solid var(--rule)}
.narrative-in-recommends h3{font-family:var(--serif);font-size:22px;font-weight:600;margin:0 0 14px;color:var(--ink);line-height:1.3}
.narrative-in-recommends p{font-size:17px;line-height:1.7;color:var(--ink-soft);margin:0 0 14px}
.narrative-in-recommends p:last-child{margin-bottom:0}

/* Author bio nested inside the recommends box (after the CTA) —
   "box-in-a-box". Softer paper-2 background + thinner border so it
   reads as nested supporting content rather than a peer to the
   parent box. Tighter typography than the original full-page
   .author-section since space is constrained inside the column. */
.author-in-recommends{margin:22px 0 0}
.author-in-recommends .author-card,
.author-in-recommends .author-section{background:var(--paper-2);border:1px solid var(--rule);border-radius:8px;padding:14px 16px;margin:0;display:flex;gap:14px;align-items:flex-start}
.author-in-recommends .author-card .pic,
.author-in-recommends .author-section .pic,
.author-in-recommends .author-card .author-pic,
.author-in-recommends .author-section .author-pic{width:46px;height:46px;flex-shrink:0;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,var(--accent),var(--gold));display:grid;place-items:center}
.author-in-recommends .author-card .pic img,
.author-in-recommends .author-section .pic img{width:100%;height:100%;object-fit:cover;display:block}
.author-in-recommends .author-card .who,
.author-in-recommends .author-section .who{font-size:12.5px;line-height:1.55;color:var(--ink-soft)}
.author-in-recommends .author-card .who strong,
.author-in-recommends .author-section .who strong,
.author-in-recommends .author-section h4{display:block;font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--ink);margin:0 0 4px}
.author-in-recommends .author-section .role{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin-bottom:6px}
.author-in-recommends .author-section p{font-size:12.5px;line-height:1.55;margin:0;color:var(--ink-soft)}

/* When the narrative lives in the recommends box, keep the existing
   2-column grid (left = main with image + narrative; right = trust
   cards). align-items:start so the side column doesn't stretch to
   match the (now tall) narrative. The trust cards stay neatly
   inside the box on the right; image + narrative + CTA stack on the
   left. Earlier attempts at float:right collapsed the layout — the
   floated cards escaped the container; this grid approach is
   bulletproof and reads cleanly. */
.recommends:has(.narrative-in-recommends){align-items:start}
.recommends:has(.narrative-in-recommends) .recommends-side{align-self:start;position:sticky;top:18px}
/* Image hero at top of the main column — full width of the column,
   max 320px tall so a portrait product photo doesn't dominate. */
.recommends:has(.narrative-in-recommends) .recommends-img{margin:14px 0 0;text-align:center}
.recommends:has(.narrative-in-recommends) .recommends-img img,
.recommends:has(.narrative-in-recommends) .recommends-img svg{max-width:100%;max-height:320px;height:auto;border-radius:6px;object-fit:contain}

@media (max-width:780px){
  /* On mobile the grid already collapses to single column via the
     existing .recommends responsive rule. Side cards stack below the
     narrative naturally — no extra rules needed here. */
}
.recommends-features li{padding-left:26px;position:relative;margin-bottom:8px;font-size:13.5px;line-height:1.55;color:var(--ink-soft)}
.recommends-features li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:800}
/* Recommends CTA — now matches the bottom .final-cta .check-btn so
   the two main "Check Availability" calls-to-action on the page read
   as one consistent action style instead of "underlined link" vs
   "block button". Green block, white text, wide-block layout. */
.recommends-cta{display:block;width:100%;max-width:480px;margin:18px auto 0;background:var(--green);color:#fff !important;font-family:var(--sans);font-size:18px;font-weight:700;padding:18px 24px;border-radius:var(--radius-sm);text-decoration:none !important;box-shadow:var(--shadow-md);text-align:center;box-sizing:border-box;transition:background .15s}
.recommends-cta:hover{background:var(--green-dark);text-decoration:none}
.recommends-cta .arrow{display:inline-block;margin-left:4px;transition:transform .2s ease}
.recommends-cta:hover .arrow{transform:translateX(3px)}
.recommends-cta-sub{text-align:center;margin-top:8px}
.recommends-cta-sub{font-size:12px;color:var(--ink-mute);margin:2px 0 0}
.recommends-side{display:flex;flex-direction:column;gap:12px}
.cred-stamp{background:#fff;border:1.5px solid rgba(184,137,58,.50);border-radius:var(--radius-sm);padding:14px 14px 12px;text-align:center;position:relative;box-shadow:0 1px 2px rgba(184,137,58,.06)}
.cred-stamp::before{content:"";position:absolute;inset:4px;border:1px dashed rgba(184,137,58,.28);border-radius:4px;pointer-events:none}
.cred-stamp>*{position:relative;z-index:1}
.cred-stamp .cred-eyebrow{font-size:9px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);line-height:1.2}
.cred-stamp .cred-main{font-family:var(--serif);font-weight:600;font-size:22px;color:var(--ink);margin:6px 0 2px;line-height:1.05}
.cred-stamp .cred-sub{font-size:11px;color:var(--ink-soft);line-height:1.4;margin-top:2px}
.cred-stamp .cred-icon{width:22px;height:22px;margin:0 auto 4px;display:block;color:var(--gold)}
.how-we-rate{background:var(--paper-2);border-radius:var(--radius-sm);padding:12px 14px;margin-top:4px}
.how-we-rate h4{font-size:11px;font-weight:700;margin:0 0 4px;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.08em}
.how-we-rate p{font-size:11.5px;line-height:1.55;color:var(--ink-mute);margin:0}

.trust-row{background:var(--paper-3);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:32px 0 0;padding:26px 0}
.trust-grid{max-width:920px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.trust-item{text-align:center}
.trust-item .num{font-family:var(--serif);font-size:26px;font-weight:600;color:var(--ink);line-height:1;letter-spacing:-.01em}
.trust-item .label{font-size:12px;color:var(--ink-soft);margin-top:6px;line-height:1.4}
.trust-item svg{width:26px;height:26px;color:var(--accent);margin:0 auto 6px;display:block}

.narrative{padding:28px 0}
.narrative p{font-size:18px;line-height:1.7;color:var(--ink-soft);margin:0 0 16px}
.narrative h3{font-family:var(--serif);font-size:22px;font-weight:600;margin:28px 0 12px;color:var(--ink)}

.faq-list{padding:14px 0 30px}
.faq-item{background:#fff;border:1px solid var(--rule);border-radius:var(--radius-sm);margin-bottom:10px;padding:0}
.faq-item summary{cursor:pointer;padding:16px 18px;font-weight:600;font-size:18px;color:var(--ink);list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;line-height:1.4}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:22px;font-weight:400;color:var(--ink-mute);transition:transform .15s ease}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .faq-a{padding:0 18px 18px;font-size:17px;line-height:1.65;color:var(--ink-soft)}

.buy-pushes{background:#fff;border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:22px 24px;margin:24px 0;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.buy-push{text-align:center}
.buy-push svg{width:26px;height:26px;color:var(--green);margin:0 auto 6px;display:block}
.buy-push .lead{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.3}
.buy-push .sub{font-size:11.5px;color:var(--ink-mute);margin-top:2px;line-height:1.4}

.final-cta{text-align:center;padding:30px 20px}
/* Final CTA — wide centered block button so it doesn't get lost in
   the white space at the bottom of the page. Caps at 480px so it
   stays readable on wide screens but fills available width on mobile. */
.final-cta .check-btn{display:block;width:100%;max-width:480px;margin:0 auto;background:var(--green);color:#fff !important;font-size:18px;font-weight:700;padding:18px 24px;border-radius:var(--radius-sm);text-decoration:none !important;box-shadow:var(--shadow-md);text-align:center;box-sizing:border-box}
.final-cta .check-btn:hover{background:var(--green-dark)}

/* Auto-linked brand mentions inside FAQ answers (.brand-link gets
   wrapped at build time around each FAQ answer's first product-name
   occurrence — see lib/link-faq-brands.ts). Blue + bold + underline
   so readers recognise it as a click target. */
.faq-a .brand-link{color:#2563eb;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.faq-a .brand-link:hover{color:#1d4ed8;text-decoration-thickness:2px}
.final-cta .micro{font-size:11px;color:var(--ink-mute);margin-top:10px}

.author-card{background:#fff;border:1px solid var(--rule);border-radius:var(--radius);padding:18px 20px;margin:24px 0;display:flex;gap:14px;align-items:center}
.author-card .pic{width:52px;height:52px;border-radius:50%;overflow:hidden;flex-shrink:0;background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.author-card .pic img{width:100%;height:100%;object-fit:cover;display:block}
.author-card .who{font-size:13.5px;color:var(--ink-soft)}
.author-card .who strong{display:block;color:var(--ink);font-size:14.5px;margin-bottom:2px}

@media (max-width:780px){
  /* Mobile type scale for 45+ readers — body stays at 17px floor.
     The clamp() functions on .compare-hero h1, .hero-sub, .article-dek
     etc. already handle responsive shrinking; mobile-only overrides only
     fire for the values that need a different floor. */
  body{font-size:17px;line-height:1.6}
  .compare-hero h1{font-size:30px;line-height:1.15}
  .compare-intro p{font-size:17px;line-height:1.6}
  .narrative p{font-size:17px;line-height:1.65}
  .narrative h3{font-size:20px}
  .content h2{font-size:26px}
  .content h3{font-size:21px}
  .content p,.content ul,.content ol{font-size:17px;line-height:1.6}
  .article-body p,.article-body ul,.article-body ol{font-size:18px;line-height:1.7}
  .article-body h2{font-size:26px}
  .article-body h3{font-size:21px}
  .product-card .product-middle h3{font-size:21px}
  .product-card .feature-list li{font-size:15.5px;line-height:1.55}
  .product-card .cons-list li{font-size:14.5px;line-height:1.55}
  .product-card .cta-btn{font-size:17px;padding:13px 16px}
  .faq-item summary{font-size:17px;padding:14px 16px}
  .faq-item .faq-a{font-size:16.5px;padding:0 16px 16px}
  /* Stack: title on top, seal centered below */
  .compare-hero-inner{grid-template-columns:1fr;justify-items:center}
  /* Seal sizing for mobile is set in the later trust-signals @media block —
     order:-1 puts it above the H1, width:160px matches the mockup. */
  .product-card .product-body{grid-template-columns:1fr}
  .product-card .product-thumb{max-width:200px;margin:0 auto}
  .criteria-grid{grid-template-columns:1fr;gap:18px}
  .recommends{grid-template-columns:1fr}
  .recommends-cta{font-size:20px}
  .trust-grid{grid-template-columns:1fr;gap:22px}
  .buy-pushes{grid-template-columns:repeat(2,1fr)}
  .buy-pushes .buy-push:nth-child(5){grid-column:1 / -1}
}

/* ════════════════════════════════════════════════════════════════════
   Trust signals (v3) — hero trust stats bar, editorial independence
   disclosure, expanded credibility row, curved-text seal, multi-dim
   product score breakdown, corner promo ribbon. Added in pass C.
   ════════════════════════════════════════════════════════════════════ */

/* Hero trust stats bar — solid background so it visually attaches to the
   menu bar above it. Defaults to ink-dark; the build's brand-overrides block
   pairs this with the topbar background when topbarBg is set, keeping them
   continuous regardless of hero colour. Negative margin-top cancels the hero
   section's padding-top (50px) so the bar sits flush against the topbar. */
.hero-trust{display:flex;align-items:center;justify-content:center;gap:24px;padding:11px 18px;margin:-50px 0 36px;background:var(--ink,#0f1828);border-bottom:1px solid rgba(244,207,145,.12);font-size:11.5px;letter-spacing:.03em;color:#e7d7ad;flex-wrap:wrap;text-align:center}
.hero-trust > span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.hero-trust b{font-weight:700;color:#fff;letter-spacing:.02em}
.hero-trust .sep{opacity:.35}
.hero-trust svg{width:13px;height:13px;opacity:.85;color:#f4cf91;flex-shrink:0}

/* Editorial independence disclosure — soft rounded callout, max-width capped
   so it doesn't stretch into a long bar. Sits with a touch of breathing room
   above and below to separate it from the dek and the credibility row line. */
.editorial-disclosure{display:inline-flex;align-items:flex-start;gap:9px;font-size:12.5px;line-height:1.55;color:#d6c3a3;background:rgba(244,207,145,.06);border:1px solid rgba(244,207,145,.22);border-radius:14px;padding:10px 16px;margin:6px 0 0;max-width:640px}
.editorial-disclosure svg{width:14px;height:14px;flex-shrink:0;color:#f4cf91;margin-top:2px}

/* Curved-text seal */
.hero-seal .seal-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-seal .seal-svg text{fill:#f4cf91;font-family:var(--sans);font-size:9.5px;font-weight:800;letter-spacing:3.5px;text-transform:uppercase}
.hero-seal .seal-center{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.hero-seal .seal-center .seal-main{font-family:var(--serif);font-weight:600;font-size:21px;color:#fbf8f3;line-height:1.05;margin:0 0 5px}
.hero-seal .seal-center .stars{color:#f4cf91;font-size:17px;letter-spacing:3px}

/* v3 credibility row (legacy). v4 layout strips this — the row is empty
   after applyV4HeroLayout migrates author + dates out, so we hide the
   wrapper to avoid the extra top-border + spacing. */
.hero-credibility[data-layout="v4"]{display:none}
.hero-credibility{max-width:1100px;margin:20px auto 0;padding:22px 22px 36px;display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr) minmax(0,200px);gap:36px;align-items:start;border-top:1px solid rgba(244,207,145,.18)}

/* v4 right column — wraps .hero-seal + .hero-author-under-seal in a
   single grid child so .compare-hero-inner's align-items:center centers
   the WHOLE stack (rather than putting the author at row 2 below the
   tall headline column). Flex column with a fixed gap stacks seal on
   top, author directly underneath. */
.hero-right-col{display:flex;flex-direction:column;align-items:center;gap:18px}
.hero-author-under-seal{display:flex;justify-content:center}
.hero-author-under-seal .hero-author{width:184px;padding:12px 14px;background:rgba(244,207,145,.04);border:1px solid rgba(244,207,145,.14);border-radius:10px;flex-direction:column;align-items:center;text-align:center;gap:8px}
.hero-author-under-seal .hero-author .pic{width:42px;height:42px;font-size:16px}
.hero-author-under-seal .hero-author .who{text-align:center}
.hero-author-under-seal .hero-author .who strong{font-size:13px;margin-bottom:2px}
.hero-author-under-seal .hero-author .cred{font-size:11px;display:block;margin-top:2px}
.hero-author-under-seal .hero-author .stats{font-size:11px;margin-top:3px;display:block}

/* Disclosure-area date checklist. Mirrors the "✓" style of the methodology
   list but sits inline with the editorial-disclosure block on the left so
   the dates read as additional rank-credibility signals. */
.disclosure-dates{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12px;color:#d6c3a3;max-width:640px}
.disclosure-dates li{display:inline-flex;align-items:center;gap:6px}
.disclosure-dates svg{width:13px;height:13px;flex-shrink:0;color:#7ed8a3}
.disclosure-dates b{color:#fbf8f3;font-weight:600;font-size:12px;margin-right:2px}
.hero-author{display:flex;gap:13px;align-items:flex-start}
.hero-author .pic{width:62px;height:62px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,#d6a86a,#8a5a2a);border:2px solid rgba(244,207,145,.45);display:grid;place-items:center;color:#fbf8f3;font-family:var(--serif);font-size:24px;font-weight:600;overflow:hidden}
.hero-author .pic img{width:100%;height:100%;object-fit:cover}
.hero-author .who{font-size:12px;line-height:1.45;color:#d6c3a3}
.hero-author .who strong{display:block;color:#fbf8f3;font-size:14.5px;margin-bottom:2px;font-weight:600;letter-spacing:.01em}
.hero-author .cred{display:block;color:#f4cf91;font-size:11.5px;font-weight:600;margin-top:1px;letter-spacing:.02em}
.hero-author .stats{display:block;color:#d6c3a3;font-size:11.5px;margin-top:4px}

/* Methodology heading — gold uppercase serif eyebrow, mirrors mockup. */
.how-we-tested h3{font-family:var(--serif);font-size:13px;font-weight:600;color:#f4cf91;letter-spacing:.08em;text-transform:uppercase;margin:0 0 10px}
.how-we-tested ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 22px}
.how-we-tested li{font-size:12.5px;color:#e7d7ad;padding-left:18px;position:relative}
.how-we-tested li::before{content:"✓";position:absolute;left:0;color:#7ed8a3;font-weight:800}

/* Dates — plain bold white labels (NOT the eyebrow style); softer line-height
   so Published/date/Last updated/date stack reads as a list, matching mockup. */
.hero-dates{font-size:11.5px;color:#d6c3a3;line-height:1.7}
.hero-dates b{display:block;color:#fbf8f3;font-weight:600;font-size:12px}

/* Multi-dimensional score panel — overall + 4 sub-score bars */
.score-panel .overall-label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);margin-top:4px}
.score-panel .score-row{display:flex;align-items:baseline;justify-content:center;gap:4px}
.score-panel .score-row .out-of{font-size:14px;color:var(--ink-mute);font-weight:500;font-family:var(--sans)}

/* Score breakdown — fixed-width label column so EVERY bar starts at the same
   x-position. Track is grey; fill is green and proportional to the score
   (e.g. 9.6/10 = 96% green / 4% grey). width:100% + align-self:stretch are
   load-bearing: the parent .score-panel is a flex column with align-items:
   center, which collapses any grid child without an explicit width so the
   1fr bar column would shrink to zero. */
.score-breakdown{box-sizing:border-box;width:100%;align-self:stretch;border-top:1px solid var(--rule);padding-top:12px;margin-top:6px;display:grid;grid-template-columns:100px 1fr 36px;gap:8px 10px;align-items:center;text-align:left}
.sb-row{display:contents}
.sb-label{color:var(--ink-mute);text-transform:uppercase;font-size:10.5px;letter-spacing:.06em;font-weight:700;white-space:nowrap}
.sb-bar{display:block;height:9px;width:100%;background:#d4ccb6;border-radius:99px;overflow:hidden;position:relative}
.sb-fill{display:block;height:100%;background:linear-gradient(90deg,#2f7a4d 0%,#3d9060 100%);border-radius:99px;box-shadow:inset 0 -1px 0 rgba(0,0,0,.12)}
.sb-val{font-family:var(--serif);font-weight:600;color:var(--ink);font-size:14.5px;text-align:right;letter-spacing:-.01em}

/* Corner promo ribbon — pinned to top-right of product card */
.product-card .promo{position:absolute;top:18px;right:-6px;background:#d94a3d;color:#fff;font-size:12.5px;font-weight:700;padding:6px 13px;letter-spacing:.02em;z-index:5;border-radius:3px 0 0 3px;box-shadow:0 3px 8px rgba(0,0,0,.18);text-transform:none;line-height:1.2}
.product-card .promo::after{content:"";position:absolute;top:100%;right:0;border-style:solid;border-width:6px 6px 0 0;border-color:#8a2e22 transparent transparent transparent}
.product-card .promo span{display:none}

/* ════════════════════════════════════════════════════════════════════
   Hero variant — ?hero=card
   Inline #1 pick card next to the headline, replacing the seal on the
   right of the hero. Default (no param) is hidden; URL switcher sets
   body[data-hero="card"] which reveals the card and hides the seal +
   credibility row to match the mockup.
   ════════════════════════════════════════════════════════════════════ */
.hero-pick-card{position:relative;background:#faf6ec;border-radius:14px;padding:18px 18px 16px;color:#2c2a24;max-width:380px;justify-self:end;width:100%;box-shadow:0 12px 32px rgba(0,0,0,.18)}
.hero-pick-badge{position:absolute;top:-12px;left:18px;background:#d4543d;color:#fff;font-size:10.5px;font-weight:800;padding:5px 12px;border-radius:4px;letter-spacing:1.2px}
.hero-pick-tested{position:absolute;top:14px;right:14px;background:rgba(15,30,46,.92);color:#f4cf91;font-size:9.5px;font-weight:700;padding:4px 9px;border-radius:12px;letter-spacing:.08em;border:1px solid rgba(244,207,145,.45);text-transform:uppercase}
.hero-pick-head{display:flex;align-items:center;gap:12px;margin:14px 0 12px}
.hero-pick-img{width:60px;height:60px;background:#fff;border:1px solid #d8cfb8;border-radius:6px;display:grid;place-items:center;flex-shrink:0;overflow:hidden}
.hero-pick-img img{width:100%;height:100%;object-fit:cover}
.hero-pick-meta{flex:1;min-width:0}
.hero-pick-name{font-family:var(--serif);font-size:16px;font-weight:600;color:#1a2e2b;margin:0;line-height:1.2}
.hero-pick-rating{font-size:11.5px;color:#5c5a50;margin-top:3px;letter-spacing:.01em}
.hero-pick-score{font-family:var(--serif);font-size:34px;font-weight:600;color:var(--ink);line-height:1;letter-spacing:-.01em}
.hero-pick-why{font-size:13px;color:#4a4a42;line-height:1.5;margin:0 0 14px}
/* Pick card features — 3 bullets auto-synced from product-1-pros. Edit
   the pros once in the editor and the card-hero updates on next build. */
.hero-pick-features{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:6px}
.hero-pick-features li{font-size:13px;color:#1a2e2b;line-height:1.4;padding-left:20px;position:relative;font-weight:600;letter-spacing:.005em}
.hero-pick-features li::before{content:"";position:absolute;left:0;top:6px;width:12px;height:12px;background:var(--green,#2f7a4d);border-radius:50%;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 4px var(--green,#2f7a4d)}
.hero-pick-cta{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:#fff;font-weight:800;font-size:14.5px;padding:13px 18px;border-radius:8px;text-decoration:none;letter-spacing:.04em;text-transform:uppercase;transition:all .15s ease;box-shadow:0 4px 14px rgba(200,69,31,.30)}
.hero-pick-cta:hover{background:var(--accent-2);text-decoration:none;color:#fff;transform:translateY(-1px)}
.hero-pick-secondary{display:block;text-align:center;margin-top:10px;font-size:11.5px;color:#5c5a50;text-decoration:none;letter-spacing:.02em}
.hero-pick-secondary:hover{color:var(--accent);text-decoration:none}

/* Card-variant eyebrow + inline byline — hidden by default; revealed only
   when ?hero=card. The structure mirrors mockups/hpg_mosquito_hero_redesign:
   eyebrow line above the H1, byline (pic + name + role + methodology link)
   below the dek. Uses the existing site palette (accent, gold, ink-soft)
   rather than the mockup's dark-teal/cream so it stays brand-consistent. */
.hero-card-eyebrow{display:none;font-size:11px;letter-spacing:.14em;color:#f4cf91;text-transform:uppercase;font-weight:700;margin:0 0 12px}
.hero-card-byline{display:none;align-items:center;gap:11px;margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14)}
.hero-card-byline-pic{width:34px;height:34px;background:linear-gradient(135deg,#d6a86a,#8a5a2a);border:1.5px solid rgba(244,207,145,.45);border-radius:50%;display:grid;place-items:center;color:#fbf8f3;font-family:var(--serif);font-size:13px;font-weight:600;flex-shrink:0;letter-spacing:.02em;overflow:hidden}
.hero-card-byline-pic img{width:100%;height:100%;object-fit:cover;display:block}
.hero-card-byline-text{font-size:12px;color:#b6ac93;line-height:1.5}
.hero-card-byline-name{color:#e8e0cc;font-weight:600}
.hero-card-method-link{color:#f4cf91;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;text-decoration-color:rgba(244,207,145,.45)}
.hero-card-method-link:hover{color:#fbf8f3;text-decoration-color:#fbf8f3}

/* The toggle: card variant hides the seal + credibility row + editorial
   disclosure pill, shows the pick card + eyebrow + inline byline. Default
   (no body attribute) keeps all the alt elements hidden. */
body[data-hero="card"] .compare-hero-inner{grid-template-columns:1.15fr 1fr;align-items:center}
body[data-hero="card"] .hero-seal{display:none}
body[data-hero="card"] .hero-credibility{display:none}
body[data-hero="card"] .editorial-disclosure{display:none}
body[data-hero="card"] .hero-pick-card{display:block}
body[data-hero="card"] .hero-card-eyebrow{display:block}
body[data-hero="card"] .hero-card-byline{display:flex}

/* ?hero=image — Big winner product photo on the right replaces the seal. */
.hero-big-image{display:none;position:relative;justify-self:end;max-width:440px;width:100%}
.hero-big-image-frame{aspect-ratio:1/1;background:rgba(255,255,255,.04);border:1px solid rgba(244,207,145,.18);border-radius:14px;overflow:hidden;display:grid;place-items:center;padding:18px;box-shadow:0 16px 48px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.04)}
.hero-big-image-frame img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 24px rgba(0,0,0,.25))}
.hero-big-image-fallback{font-family:var(--serif);font-size:96px;font-weight:600;color:#f4cf91;opacity:.7}
body[data-hero="image"] .compare-hero-inner{grid-template-columns:1fr 1fr;align-items:center}
body[data-hero="image"] .hero-seal{display:none}
body[data-hero="image"] .hero-credibility{display:none}
body[data-hero="image"] .editorial-disclosure{display:none}
body[data-hero="image"] .hero-big-image{display:block}

/* ?hero=minimal — Strip to essentials. Tests whether less hero copy /
   no badges / no credibility shifts CTR by getting users to the products
   faster. CSS-only, no extra block injected. */
body[data-hero="minimal"] .compare-hero-inner{grid-template-columns:1fr;max-width:780px;margin-left:auto;margin-right:auto;text-align:center;justify-items:center}
body[data-hero="minimal"] .compare-hero-inner > div{text-align:center}
body[data-hero="minimal"] .hero-seal{display:none}
body[data-hero="minimal"] .hero-credibility{display:none}
body[data-hero="minimal"] .editorial-disclosure{display:none}
body[data-hero="minimal"] .compare-hero{padding:32px 0 28px}
body[data-hero="minimal"] .compare-hero h1{font-size:clamp(26px,3.6vw,38px);margin:0 auto 14px;max-width:22ch}
body[data-hero="minimal"] .compare-hero .hero-sub{font-size:15px;max-width:58ch;margin-left:auto;margin-right:auto}
/* Trust bar pulls itself up by -50px to attach to the topbar; the
   minimal variant cuts hero padding-top to 32px so the default -50px
   overshoots and overlaps the topbar. Match it to the new padding. */
body[data-hero="minimal"] .hero-trust{margin-top:-32px}

/* Disclosure-dates centered on the minimal hero (it's a centered
   single-column layout; the dates flex defaults to flex-start).
   Tight top margin (6px) — sits close to the dek above, with the
   author card following directly underneath. */
body[data-hero="minimal"] .disclosure-dates{justify-content:center;margin:6px auto 0}

/* Minimal hero — author card stretches wider AND lays out as a
   horizontal row: [headshot]  [name + role]  [experience stats]
   Replaces the default vertical 184px-narrow stack from the v4
   "under the seal" layout (which doesn't apply on minimal since
   the seal is hidden). */
body[data-hero="minimal"] .hero-right-col{width:100%;align-items:center}
body[data-hero="minimal"] .hero-author-under-seal{width:100%;display:flex;justify-content:center;margin-top:10px}
body[data-hero="minimal"] .hero-author-under-seal .hero-author{
  width:100%;
  max-width:640px;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  text-align:left;
  gap:16px;
  padding:14px 20px;
}
body[data-hero="minimal"] .hero-author-under-seal .hero-author .pic{
  width:54px;
  height:54px;
  font-size:20px;
  flex-shrink:0;
}
/* The .who element contains 3 inline-block children (strong, .cred,
   .stats). Make .who a 2-col grid: left column = name + role stacked,
   right column = stats spanning both rows. */
body[data-hero="minimal"] .hero-author-under-seal .hero-author .who{
  flex:1;
  display:grid;
  grid-template-columns:1fr auto;
  gap:2px 24px;
  align-items:center;
  text-align:left;
}
body[data-hero="minimal"] .hero-author-under-seal .hero-author .who strong{
  grid-column:1;grid-row:1;
  font-size:14.5px;margin:0;
}
body[data-hero="minimal"] .hero-author-under-seal .hero-author .who .cred{
  grid-column:1;grid-row:2;
  font-size:12px;margin:0;
}
body[data-hero="minimal"] .hero-author-under-seal .hero-author .who .stats{
  grid-column:2;grid-row:1 / 3;
  align-self:center;
  text-align:right;
  font-size:12px;
  margin:0;
  color:var(--ink-mute);
  line-height:1.4;
}
@media (max-width:600px){
  /* On phones the 3-col layout cramps; collapse back to a tighter
     vertical stack so name + role + stats stay readable. */
  body[data-hero="minimal"] .hero-author-under-seal .hero-author{flex-direction:column;text-align:center;gap:6px;padding:14px 16px}
  body[data-hero="minimal"] .hero-author-under-seal .hero-author .who{display:block;text-align:center}
  body[data-hero="minimal"] .hero-author-under-seal .hero-author .who .stats{text-align:center;margin-top:4px}
}

/* ?hero=offer — Discount-led above the fold. Replaces seal with a big
   offer block (discount % headline, winner image, CTA). Visual + sales
   leverage; tests urgency framing for paid traffic. */
.hero-offer-banner{display:none;background:linear-gradient(135deg,#1a2540 0%,#2d3b5a 100%);border:1.5px solid rgba(244,207,145,.32);border-radius:14px;padding:22px;color:#fbf8f3;max-width:520px;justify-self:end;width:100%;box-shadow:0 16px 48px rgba(0,0,0,.40)}
.hero-offer-discount{font-family:var(--serif);font-size:42px;font-weight:700;line-height:1;color:#f4cf91;letter-spacing:-.02em;margin:0 0 14px}
.hero-offer-body{display:flex;align-items:center;gap:14px}
.hero-offer-img{width:84px;height:84px;background:rgba(255,255,255,.06);border-radius:10px;display:grid;place-items:center;flex-shrink:0;overflow:hidden;border:1px solid rgba(244,207,145,.2)}
.hero-offer-img img{width:100%;height:100%;object-fit:contain}
.hero-offer-text{flex:1;min-width:0}
.hero-offer-headline{font-family:var(--serif);font-size:17px;font-weight:600;color:#fbf8f3;line-height:1.3;margin:0 0 4px}
.hero-offer-sub{font-size:12px;color:#d6c3a3;line-height:1.5;margin:0 0 10px}
.hero-offer-cta{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:#fff;font-weight:800;font-size:14px;padding:11px 18px;border-radius:8px;text-decoration:none;letter-spacing:.04em;text-transform:uppercase;transition:all .15s ease;box-shadow:0 4px 14px rgba(200,69,31,.35)}
.hero-offer-cta:hover{background:var(--accent-2);text-decoration:none;color:#fff;transform:translateY(-1px)}
body[data-hero="offer"] .compare-hero-inner{grid-template-columns:1fr 1fr;align-items:center}
body[data-hero="offer"] .hero-seal{display:none}
body[data-hero="offer"] .hero-credibility{display:none}
body[data-hero="offer"] .hero-offer-banner{display:block}

/* Sticky mobile CTA bar — hidden on desktop, fixed bottom on mobile but
   initially out-of-view; the runtime script adds .is-visible once the
   user has scrolled past 50% of the document so it shows when readers
   are genuinely engaged (not on first paint). */
/* Mobile sticky CTA — bottom-pinned button on phones. Now uses the
   brand green to match every other CTA on the page (was --accent
   terracotta, which conflicted with the green primary CTAs in the
   recommends + final-cta blocks). Reduced visual weight: 14px text
   (was 15), normal-case (not UPPERCASE), 700 weight (was 800),
   softer green shadow. Reads as "primary action" not "alarm". */
.mobile-sticky-cta{display:none;position:fixed;left:12px;right:12px;bottom:12px;z-index:60;background:var(--green);color:#fff;font-size:14px;font-weight:700;padding:14px 18px;border-radius:10px;text-decoration:none;text-align:center;letter-spacing:.02em;box-shadow:0 6px 18px rgba(34,197,94,.32),0 1px 2px rgba(0,0,0,.08);transform:translateY(140%);opacity:0;transition:transform .35s cubic-bezier(.2,.7,.3,1),opacity .25s ease-out;pointer-events:none}
.mobile-sticky-cta.is-visible{transform:translateY(0);opacity:1;pointer-events:auto}
.mobile-sticky-cta:hover{background:var(--green-dark);color:#fff;text-decoration:none}
.mobile-sticky-cta span{display:inline-block;margin-left:6px}

@media (max-width:780px){
  /* Hero trust signals — mobile. The bar is sticky to the topbar via the
     same -50px margin-top trick; topbar is static on mobile so this still
     works (it just attaches to whatever sits above the hero section). */
  .hero-trust{gap:10px 18px;padding:10px 14px;margin:-50px 0 24px;font-size:10.5px}
  .hero-trust > span{gap:5px}
  .hero-trust svg{width:11px;height:11px}
  .hero-trust .sep{display:none}
  /* Editorial disclosure pill — more padding + horizontal breathing room so it
     doesn't hug the viewport edges, and a touch of space below before the seal. */
  .editorial-disclosure{margin:10px 4px 4px;padding:12px 18px;font-size:12px;line-height:1.55}
  .hero-seal .seal-svg text{font-size:9px;letter-spacing:3px}
  .hero-seal .seal-center .seal-main{font-size:19px}
  /* Mobile credibility layout (per user redline):
       Row 1: author block (centered, spans both columns)
       Row 2: methodology heading (centered, spans both columns)
       Row 3: bullet list (left) │ dates (right, with vertical divider)
     display:contents on .how-we-tested lifts the h3 + ul into the
     .hero-credibility grid so the heading can span both columns while
     the list and dates sit side-by-side underneath it. */
  .hero-credibility{grid-template-columns:1fr auto;gap:18px 18px;padding:22px 18px 28px;text-align:left}
  .hero-author{grid-column:1/-1;justify-content:center;text-align:left}
  .how-we-tested{display:contents}
  .how-we-tested h3{grid-column:1/-1;text-align:center;margin:2px 0 6px;font-size:12px;letter-spacing:.07em}
  .how-we-tested ul{grid-column:1;grid-template-columns:1fr;max-width:none;margin:0;text-align:left}
  .hero-dates{grid-column:2;align-self:start;text-align:left;border-left:1px solid rgba(244,207,145,.22);padding-left:16px;line-height:1.55}
  /* Seal jumps to the top on mobile so it sits above the H1, like the mockup.
     160×160 matches the mockup's mobile size — 150 felt undersized next to
     the H1; 160 is the sweet spot between presence and not dominating. */
  .hero-seal{order:-1;margin:0 auto;width:160px;height:160px}
  /* Score breakdown — narrower label column on small screens */
  .score-breakdown{grid-template-columns:88px 1fr 34px}
  /* Ribbon stays roughly same; tuck slightly */
  .product-card .promo{top:14px;right:-4px;font-size:11.5px;padding:5px 10px}
  /* Hero variants on mobile — collapse 2-col layouts to single column.
     Each alt block stretches to full width. */
  body[data-hero="card"] .compare-hero-inner{grid-template-columns:1fr}
  body[data-hero="image"] .compare-hero-inner{grid-template-columns:1fr}
  body[data-hero="offer"] .compare-hero-inner{grid-template-columns:1fr}
  .hero-pick-card,.hero-big-image,.hero-offer-banner{max-width:none;justify-self:stretch}
  .hero-big-image-frame{padding:14px}
  .hero-offer-discount{font-size:34px}
  /* Sticky mobile CTA — visible only on mobile, leaves room above the
     iOS home-indicator. */
  .mobile-sticky-cta{display:block;padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px))}
  /* Add bottom padding to body so the sticky bar doesn't cover content
     at the very bottom of the page. */
  body{padding-bottom:74px}
}