/* ═══════════════════════════════════════════════════════════════
   STYLES.CSS — Dual-mode design system
   
   EDITORIAL MODE: Clean cream paper, typography-driven, no imagery
   MAGAZINE MODE:  Blurred hero images, gradient body overlay, atmospheric
   
   Mode is set by site_engine.js reading site.config.js visualStyle.
   (Filename corrected 2026-08-29: this read "site.engine.js" with a dot, which matches no file in
   the template. The same typo was in CLAUDE-INSTRUCTIONS.md. A wrong filename in a comment is a
   dead end for whoever goes looking, and it survives every gate because comments are not executed.)

   Colors are CSS custom properties set at runtime by the engine, which sets them via
   documentElement.style.setProperty — an INLINE root property that silently outranks every
   stylesheet, including this one. That is why forking needs no edits here, and also why anything
   the engine injects is held to a STRICTER standard than authored CSS, not a looser one.
   This file NEVER needs editing when forking.
   ═══════════════════════════════════════════════════════════════ */

/* ── TOKENS ── */
:root{
/* ⚠️ SIX OF THESE TOKENS ARE NAMED FOR A VALUE, NOT A ROLE — noted 2026-08-29, NOT refactored.
   --dark (32 uses) · --text-light (25) · --muted (10) · --cream (6) · --accent-light (5) ·
   --secondary-light (2). Eighty consumptions across this file.

   ⭐ A TOKEN NAMED FOR ITS VALUE BREAKS WHEN THE THEME FLIPS. --dark names a COLOUR; --text names a
   ROLE. Measured on rinzara, which inherited this light-theme set and overrode only --paper and
   --text for dark mode: --dark (#0c0a09) ended up DARKER than its own ground (#1c1a1f), so a nav
   hover set to it made links invisible.

   ⛔ THE BINDING RULE IS ABOUT CONSUMPTION, NOT DECLARATION. A property declaring its own vocabulary
   is legitimate (§6: a property is entitled to its own dialect). The defect is SHARED code reaching
   into it by name. Shared code may assume ONLY the five contract roles, which this file declares and
   `scripts/token-contract-gate.mjs` enforces: --paper --text --accent --border --radius.
   ⭐ A COMPONENT MAY CONSUME A ROLE, NEVER A NAME.

   ⚠️ WHY THIS IS A NOTE AND NOT A FIX. Retokening 80 consumptions in the base stylesheet cannot be
   verified without rendering, and this pass has rendered nothing. The Bible's own record is that four
   consecutive CSS hypotheses on a live page returned byte-identical geometry because the real fault
   was structural. ★ A SWEEPING CHANGE TO A SHARED STYLESHEET, UNRENDERED, IS HOW THE DEFECT THIS NOTE
   DESCRIBES SHIPPED IN THE FIRST PLACE. Do it in a session that can open a browser, on one property,
   measured before and after. */
  --accent:#1e40af;--accent-light:#eff6ff;--accent-hover:#1e3a8a;
  --secondary:#b45309;--secondary-light:#fef3c7;--secondary-hover:#92400e;
  --paper:#fafaf9;--dark:#0c0a09;--dark-mid:#1c1917;--muted:#a8a29e;
  --text:#44403c;--text-light:#78716c;--border:#e7e5e4;--cream:#f5f0eb;
  --display:'Fraunces',Georgia,serif;--body:'Satoshi',system-ui,sans-serif;
  --mono:'IBM Plex Mono','Fira Code',monospace;
  --max-w:1080px;--content-w:720px;--radius:8px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06);--shadow-md:0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:0 12px 40px rgba(0,0,0,.12)
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:var(--body);color:var(--text);background:var(--paper);font-size:1rem;line-height:1.7;
  background-size:cover;background-attachment:fixed;background-position:center}
img{max-width:100%;display:block}

/* ── CROSS-SITE BAR (removed — network links now in footer only) ── */

/* ── NAV ── */
nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;max-width:var(--max-w);margin:0 auto;padding:1rem 1.5rem;border-bottom:1px solid var(--border)}
.nav-left{display:flex;align-items:center;gap:1.5rem}
.nav-left a{text-decoration:none;color:var(--text-light);font-size:.875rem;font-weight:500;transition:color .2s}
.nav-left a:hover{color:var(--dark)}
.nav-brand{font-family:var(--display);font-size:1.4rem;font-weight:600;background:var(--dark);color:#fff;padding:.35rem 1.1rem;border-radius:6px;text-decoration:none;letter-spacing:-.02em;justify-self:center}
.nav-brand span{color:#60a5fa}
.nav-brand:hover{text-decoration:none;opacity:.92}
.nav-right{display:flex;align-items:center;justify-content:flex-end;gap:1rem}
.nav-links{list-style:none;display:flex;gap:1.75rem}
.nav-links a{text-decoration:none;color:var(--text-light);font-size:.875rem;font-weight:500;transition:color .2s}
.nav-links a:hover{color:var(--dark)}
.nav-cta{font-size:.8125rem;font-weight:700;color:#fff;text-decoration:none;background:var(--accent);padding:.5rem 1.25rem;border-radius:6px;transition:all .2s;white-space:nowrap}
.nav-cta:hover{background:var(--accent-hover);transform:translateY(-1px)}
@media(max-width:768px){.nav-left{gap:.6rem}.nav-left a{font-size:.75rem}.nav-brand{font-size:1.1rem;padding:.3rem .8rem}.nav-cta{font-size:.75rem;padding:.4rem 1rem}}

/* ── FOOTER DISCLOSURE ── */
.footer-disclosure{background:var(--accent-light);border:1px solid var(--border);border-radius:6px;padding:.6rem 1rem;font-size:.75rem;color:var(--text-light);line-height:1.5;margin:1rem 0;text-align:center;flex-basis:100%}
.footer-disclosure a{color:var(--accent);font-weight:500}

/* ── BREADCRUMBS ── */
.breadcrumbs{max-width:var(--max-w);margin:0 auto;padding:.875rem 1.5rem;font-size:.75rem;color:var(--muted)}
.breadcrumbs a{color:var(--text-light);text-decoration:none}.breadcrumbs a:hover{color:var(--accent)}

/* ═══════════════════════════════════════════════════════════════
   HERO — Two modes
   Editorial: Clean text on cream, no background image
   Magazine:  Blurred background image with dark overlay (set by engine.js)
   ═══════════════════════════════════════════════════════════════ */
.hero{max-width:var(--max-w);margin:0 auto;padding:4rem 1.5rem 3rem;text-align:center}
.hero-tag{font-family:var(--mono);font-size:.75rem;color:var(--accent);text-transform:uppercase;letter-spacing:.1em;margin-bottom:1rem;display:block}
.hero h1{font-family:var(--display);font-size:clamp(2.5rem,6vw,3.5rem);font-weight:500;line-height:1.1;letter-spacing:-.03em;color:var(--dark);margin-bottom:1.25rem}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero p{font-size:1.125rem;color:var(--text-light);max-width:600px;margin:0 auto 2rem;line-height:1.6}
.hero-cta{display:inline-block;padding:.875rem 2rem;background:var(--accent);color:#fff;font-weight:700;font-size:1rem;text-decoration:none;border-radius:6px;transition:all .2s;box-shadow:var(--shadow-sm)}
.hero-cta:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}

/* Magazine hero overrides (applied by engine.js inline styles + these classes) */
.hero--magazine{background-size:cover;background-position:center;border-radius:var(--radius);margin:0 1.5rem;padding:5rem 2rem 4rem;position:relative}
.hero--magazine::before{content:'';position:absolute;inset:0;border-radius:var(--radius);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hero--magazine>*{position:relative;z-index:1}
.hero--magazine .hero-tag{color:rgba(255,255,255,.7)}
.hero--magazine h1{color:#fff}
.hero--magazine p{color:rgba(255,255,255,.85)}
.hero--magazine .hero-cta{background:var(--secondary);box-shadow:0 4px 20px rgba(0,0,0,.3)}
.hero--magazine .hero-cta:hover{background:var(--secondary-hover)}

/* ═══════════════════════════════════════════════════════════════
   ARTICLE
   ═══════════════════════════════════════════════════════════════ */
.article-wrap{max-width:var(--content-w);margin:0 auto;padding:0 1.5rem 4rem}
.article-meta-bar{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-bottom:1.5rem;font-size:.8125rem;color:var(--text-light)}
.article-tag{font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}
.article-wrap h1{font-family:var(--display);font-size:clamp(2rem,5vw,2.75rem);font-weight:500;line-height:1.15;letter-spacing:-.02em;margin-bottom:1.25rem;color:var(--dark)}
.article-intro{font-size:1.0625rem;color:var(--text-light);line-height:1.7;margin-bottom:2.5rem}
.article-intro strong{color:var(--dark)}
.article-wrap h2{font-family:var(--display);font-size:1.375rem;font-weight:500;margin-top:2.75rem;margin-bottom:1rem;color:var(--dark);letter-spacing:-.01em}
.article-wrap h3{font-family:var(--display);font-size:1.125rem;font-weight:400;margin-top:2rem;margin-bottom:.75rem;color:var(--dark)}
.article-wrap p{margin-bottom:1.25rem}
.article-wrap ul,.article-wrap ol{margin-bottom:1.25rem;padding-left:1.5rem}
.article-wrap li{margin-bottom:.5rem}
.article-wrap a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.article-wrap a:hover{color:var(--accent-hover)}

/* ── SCORE CARD (BagEngine pattern: rating + pros/cons at top) ── */
.score-card{display:grid;grid-template-columns:120px 1fr 1fr;gap:1.5rem;background:#fff;border:2px solid var(--accent);border-radius:var(--radius);padding:1.75rem;margin:2rem 0;box-shadow:var(--shadow-md)}
.score-card-rating{display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px solid var(--border);padding-right:1.5rem}
.score-card-number{font-family:var(--display);font-size:2.5rem;font-weight:600;color:var(--accent);line-height:1}
.score-card-label{font-family:var(--mono);font-size:.6875rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-top:.375rem}
.score-card-stars{color:var(--secondary);font-size:1rem;margin-top:.25rem}
.score-card-pros,.score-card-cons{font-size:.8125rem;line-height:1.7}
.score-card-pros li::marker{color:#16a34a}.score-card-cons li::marker{color:#dc2626}
.score-card-pros strong,.score-card-cons strong{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:.375rem}
.score-card-pros strong{color:#16a34a}.score-card-cons strong{color:#dc2626}
@media(max-width:600px){.score-card{grid-template-columns:1fr;text-align:center}.score-card-rating{border-right:none;border-bottom:1px solid var(--border);padding-right:0;padding-bottom:1rem}}

/* ── QUICK VERDICT (Nesyona pattern) ── */
.quick-verdict{background:var(--accent-light);border-left:3px solid var(--accent);padding:1.25rem 1.5rem;border-radius:0 var(--radius) var(--radius) 0;margin:1.5rem 0;font-size:.9375rem}
.quick-verdict strong{display:block;font-family:var(--display);margin-bottom:.5rem;color:var(--dark);font-size:1rem}

/* ── CALLOUT ── */
.callout{background:var(--accent-light);border-left:3px solid var(--accent);padding:1.25rem 1.5rem;border-radius:0 var(--radius) var(--radius) 0;margin-bottom:1.5rem;font-size:.9375rem}
.callout strong{display:block;font-family:var(--display);margin-bottom:.375rem;color:var(--dark)}
.callout.warning{background:#fef2f2;border-color:#ef4444}.callout.warning strong{color:#dc2626}
.callout.success{background:#f0fdf4;border-color:#16a34a}.callout.success strong{color:#16a34a}
.callout.tip{background:var(--secondary-light);border-color:var(--secondary)}.callout.tip strong{color:var(--secondary)}

/* ── CTA BLOCK (BagEngine: action boxes with links) ── */
.cta-block{background:var(--cream);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;margin:2rem 0;display:flex;gap:1.25rem;align-items:center}
.cta-block-icon{font-size:2rem;flex-shrink:0}
.cta-block-body{flex:1}
.cta-block-title{font-family:var(--display);font-weight:500;font-size:1rem;color:var(--dark);margin-bottom:.25rem}
.cta-block-desc{font-size:.8125rem;color:var(--text-light);line-height:1.5;margin-bottom:.5rem}
.cta-block .btn-deal{font-size:.8125rem;padding:.5rem 1.25rem}
@media(max-width:600px){.cta-block{flex-direction:column;text-align:center}}

/* ── PRODUCT CARD ── */
.product-card{background:#fff;border:2px solid var(--accent);border-radius:var(--radius);padding:1.75rem;margin:2rem 0;position:relative;box-shadow:var(--shadow-md)}
.product-card-badge{position:absolute;top:-10px;left:16px;background:var(--accent);color:#fff;font-family:var(--mono);font-size:.6875rem;font-weight:700;padding:.3rem .875rem;border-radius:100px;text-transform:uppercase;letter-spacing:.05em}
.product-card-name{font-family:var(--display);font-size:1.25rem;color:var(--dark);margin-bottom:.25rem;margin-top:.5rem}
.product-card-price{font-family:var(--mono);font-size:.9375rem;color:var(--accent);font-weight:700;margin-bottom:.75rem}
.product-card-body{font-size:.875rem;color:var(--text-light);line-height:1.6;margin-bottom:1rem}
.product-card-body a{color:var(--accent)}

/* ── PROP GRID (scoring badges) ── */
.prop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:1rem 0}
@media(max-width:600px){.prop-grid{grid-template-columns:repeat(2,1fr)}}
.prop-badge{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--cream);border-radius:6px;font-size:.75rem}
.prop-badge-icon{font-size:.875rem;flex-shrink:0}
.prop-badge-label{font-weight:600;color:var(--text-light);text-transform:uppercase;letter-spacing:.04em;font-size:.625rem}
.prop-badge-score{font-family:var(--mono);font-weight:700;font-size:.8125rem;margin-left:auto}
.prop-badge-score.high{color:var(--accent)}.prop-badge-score.mid{color:var(--secondary)}.prop-badge-score.low{color:#ef4444}

/* ── BUTTONS ── */
.btn-deal{display:inline-block;padding:.7rem 1.75rem;background:var(--secondary);color:#fff;font-weight:700;font-size:.875rem;text-decoration:none;border-radius:6px;transition:all .2s;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.btn-deal:hover{background:var(--secondary-hover);transform:translateY(-1px);text-decoration:none;box-shadow:0 4px 16px rgba(0,0,0,.2)}
.btn-secondary{display:inline-block;padding:.6rem 1.5rem;background:transparent;color:var(--accent);font-weight:600;font-size:.875rem;text-decoration:none;border:2px solid var(--accent);border-radius:6px;transition:all .2s}
.btn-secondary:hover{background:var(--accent);color:#fff}

/* ── DATA TABLE ── */
.data-table{width:100%;border-collapse:collapse;margin-bottom:1.5rem;font-size:.875rem;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.data-table th{background:var(--dark);color:#fff;padding:.75rem 1rem;text-align:left;font-family:var(--display);font-weight:400;font-size:.8125rem;text-transform:uppercase;letter-spacing:.04em}
.data-table td{padding:.75rem 1rem;border-bottom:1px solid var(--border)}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:nth-child(even) td{background:var(--cream)}

/* ── WHO SHOULD / SHOULD NOT (BagEngine pattern) ── */
.who-block{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin:2rem 0}
.who-block-header{padding:1rem 1.5rem;font-family:var(--display);font-weight:500;font-size:1rem}
.who-block-header.good{background:#f0fdf4;color:#16a34a;border-bottom:1px solid #bbf7d0}
.who-block-header.bad{background:#fef2f2;color:#dc2626;border-bottom:1px solid #fecaca}
.who-block-body{padding:1rem 1.5rem;font-size:.875rem;line-height:1.7}
.who-block-body li{margin-bottom:.375rem}

/* ── FAQ (BagEngine pattern) ── */
.faq{margin:2.5rem 0}
.faq-title{font-family:var(--display);font-size:1.25rem;margin-bottom:1.25rem;color:var(--dark)}
.faq-item{border-bottom:1px solid var(--border);padding:1rem 0}
.faq-item summary{font-weight:600;font-size:.9375rem;cursor:pointer;color:var(--dark);list-style:none;display:flex;align-items:center;gap:.75rem}
.faq-item summary::before{content:'+';font-family:var(--mono);font-size:1.25rem;color:var(--accent);font-weight:700;width:1.5rem;text-align:center;flex-shrink:0;transition:transform .2s}
.faq-item[open] summary::before{content:'\2212'}
.faq-item .faq-answer{padding:.75rem 0 .25rem 2.25rem;font-size:.875rem;color:var(--text-light);line-height:1.7}

/* ── COMPARISON GRID (Nesyona pattern: side-by-side) ── */
.vs-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:1.5rem;margin:2rem 0;align-items:center}
.vs-grid-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;text-align:center;box-shadow:var(--shadow-sm)}
.vs-grid-card-name{font-family:var(--display);font-size:1.125rem;color:var(--dark);margin-bottom:.5rem}
.vs-grid-card-price{font-family:var(--mono);font-size:.8125rem;color:var(--accent)}
.vs-grid-divider{font-family:var(--display);font-size:1.5rem;color:var(--muted);font-weight:600}
@media(max-width:600px){.vs-grid{grid-template-columns:1fr;gap:1rem}.vs-grid-divider{text-align:center}}

/* ── EMAIL MICRO-CAPTURE (inline, non-intrusive) ── */
.email-micro{display:flex;align-items:center;gap:.75rem;padding:.875rem 1.25rem;background:var(--cream);border:1px solid var(--border);border-radius:var(--radius);margin:2rem 0;flex-wrap:wrap}
.email-micro-icon{font-size:1.25rem;flex-shrink:0}
.email-micro-text{font-size:.8125rem;color:var(--text);flex:1;min-width:150px}
.email-micro-text strong{color:var(--accent)}
.email-micro-input{padding:.5rem .75rem;border:1px solid var(--border);border-radius:6px;font-size:.8125rem;font-family:var(--body);flex:1;min-width:160px;max-width:220px;transition:border-color .2s}
.email-micro-input:focus{outline:none;border-color:var(--accent)}
.email-micro-btn{padding:.5rem 1rem;background:var(--accent);color:#fff;border:none;border-radius:6px;font-size:.8125rem;font-weight:700;font-family:var(--body);cursor:pointer;white-space:nowrap;transition:all .2s}
.email-micro-btn:hover{background:var(--accent-hover)}
@media(max-width:600px){.email-micro{flex-direction:column;text-align:center}.email-micro-input,.email-micro-btn{width:100%;max-width:100%}}

/* ── STICKY EMAIL STRIP (bottom of viewport, scroll-triggered) ── */
.email-strip{position:fixed;bottom:0;left:0;right:0;background:var(--dark);border-top:1px solid #333;padding:.625rem 1.5rem;z-index:1000;transform:translateY(100%);transition:transform .3s ease;box-shadow:0 -4px 20px rgba(0,0,0,.2)}
.email-strip.visible{transform:translateY(0)}
.email-strip-inner{max-width:var(--max-w);margin:0 auto;display:flex;align-items:center;gap:.75rem}
.email-strip-text{font-size:.8125rem;color:#e5e5e5;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.email-strip-text strong{color:#fff}
.email-strip-input{padding:.4rem .75rem;border:1px solid #444;border-radius:4px;background:#1c1917;color:#fff;font-size:.8125rem;font-family:var(--body);width:180px}
.email-strip-btn{padding:.4rem 1rem;background:var(--accent);color:#fff;border:none;border-radius:4px;font-size:.8125rem;font-weight:700;font-family:var(--body);cursor:pointer;white-space:nowrap;transition:background .2s}
.email-strip-btn:hover{background:var(--accent-hover)}
.email-strip-close{background:none;border:none;color:#666;font-size:1.125rem;cursor:pointer;padding:.25rem .5rem;margin-left:.25rem;transition:color .2s}
.email-strip-close:hover{color:#fff}
@media(max-width:600px){.email-strip-text{display:none}.email-strip-inner{justify-content:center}}

/* ── RELATED GRID ── */
.related{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border)}
.related-title{font-family:var(--display);font-size:1.125rem;margin-bottom:1.25rem;color:var(--dark)}
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media(max-width:600px){.related-grid{grid-template-columns:1fr}}
.related-card{display:block;text-decoration:none;color:inherit;padding:1.25rem;background:var(--cream);border-radius:var(--radius);transition:all .2s;border:1px solid transparent}
.related-card:hover{border-color:var(--accent);background:var(--accent-light);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.related-card-tag{font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin-bottom:.375rem}
.related-card-title{font-family:var(--display);font-weight:400;font-size:.9375rem;line-height:1.3;color:var(--dark)}

/* ── AD ZONE ── */
.ad-zone{max-width:var(--max-w);margin:2rem auto;min-height:0}
.ad-zone:empty{display:none}
.ad-zone:has(.adsbygoogle){min-height:90px;padding:0.5rem 0}

/* ── HOMEPAGE SECTIONS ── */
.section{max-width:var(--max-w);margin:0 auto;padding:3rem 1.5rem}
.section-title{font-family:var(--display);font-size:1.75rem;font-weight:500;color:var(--dark);margin-bottom:.5rem;letter-spacing:-.01em}
.section-sub{font-size:.9375rem;color:var(--text-light);margin-bottom:2rem}

/* ── CARD GRID (homepage) ── */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.25rem}
.guide-card{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;transition:all .2s}
.guide-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.guide-card-cat{font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.5rem}
.guide-card-title{font-family:var(--display);font-size:1.0625rem;font-weight:500;color:var(--dark);margin-bottom:.375rem;line-height:1.3}
.guide-card-desc{font-size:.8125rem;color:var(--text-light);line-height:1.5}
.guide-card-tag{font-family:var(--mono);font-size:.625rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-top:.5rem}

/* ── STATS ROW (homepage) ── */
.stats-row{display:flex;justify-content:center;gap:3rem;margin:2rem 0;flex-wrap:wrap}
.stat{text-align:center}
.stat-number{font-family:var(--display);font-size:2rem;font-weight:600;color:var(--accent);line-height:1}
.stat-label{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:.25rem}

/* ── FOOTER ── */
footer{max-width:var(--max-w);margin:0 auto;padding:2.5rem 1.5rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;border-top:1px solid var(--border)}
.footer-logo{font-family:var(--display);font-size:1.25rem;text-decoration:none;color:var(--dark)}
.footer-logo span{color:var(--accent)}
.footer-links{list-style:none;display:flex;gap:1.5rem;flex-wrap:wrap}
.footer-links a{font-size:.8125rem;color:var(--text-light);text-decoration:none;transition:color .2s}
.footer-links a:hover{color:var(--dark)}
.footer-note{font-size:.6875rem;color:var(--muted);max-width:560px;flex-basis:100%;line-height:1.6}
.footer-network{font-size:.7rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;flex-basis:100%;margin-top:.5rem}
.footer-network span{font-weight:700;color:var(--text-light);margin-right:.25rem}
.footer-network a{color:var(--muted);font-family:var(--mono);font-size:.65rem;text-decoration:none}
.footer-network a:hover{color:var(--accent)}

/* ── IMAGE COMPONENT (inline article images, optional) ── */
.article-img{width:100%;border-radius:var(--radius);margin:1.5rem 0;box-shadow:var(--shadow-sm)}
.article-img-caption{font-size:.75rem;color:var(--muted);text-align:center;margin-top:.375rem;font-style:italic}

/* ── TIER LIST (BagEngine pattern) ── */
.tier{margin:2rem 0}
.tier-header{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.25rem;background:var(--dark);color:#fff;border-radius:var(--radius) var(--radius) 0 0;font-family:var(--display);font-size:.9375rem;font-weight:500}
.tier-header .tier-badge{font-family:var(--mono);font-size:.6875rem;padding:.2rem .5rem;border-radius:4px;text-transform:uppercase;letter-spacing:.04em}
.tier-header .tier-badge.t1{background:#16a34a}.tier-header .tier-badge.t2{background:var(--secondary)}.tier-header .tier-badge.t3{background:var(--muted)}
.tier-body{border:1px solid var(--border);border-top:none;border-radius:0 0 var(--radius) var(--radius);padding:1.25rem 1.5rem}
.tier-body ul{margin:0;padding-left:1.25rem;font-size:.875rem;line-height:1.8}

/* ═══════════════════════════════════════════════════════════════
   ENTERPRISE-GRADE COMPONENTS — 10-pattern bar
   Added 2026-05-16 (session 8) from GrantProbe homepage overhaul.
   Maps to ENTERPRISE-GRADE-STANDARD.md patterns 2-8 + 10.
   Use these instead of hand-rolling per-site overrides.
   ═══════════════════════════════════════════════════════════════ */

/* Pattern 2 + 10 — Eyebrow labels (hairline-flanked universal signature) */
.eyebrow{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-light);display:inline-flex;align-items:center;gap:.6rem}
.eyebrow::before,.eyebrow::after{content:'';width:24px;height:1px;background:var(--border)}
.eyebrow-solo{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);display:inline-block;margin-bottom:8px}
.section-head{max-width:var(--max-w);margin:0 auto;padding:0 1.5rem;text-align:center;margin-bottom:1.5rem}
.section-head .eyebrow{margin-bottom:.6rem}
.section-head h2{font-family:var(--display);font-size:1.75rem;font-weight:500;color:var(--dark);letter-spacing:-.01em;margin:0}
.section-head p{font-size:.9375rem;color:var(--text-light);margin-top:.5rem;max-width:560px;margin-left:auto;margin-right:auto}
.eg-section{padding:2.5rem 0}
.eg-section.tight{padding:1.5rem 0 2rem}

/* Pattern 4 — Cred-strip (iconified trust metrics under hero) */
.cred-strip{max-width:var(--max-w);margin:1.5rem auto 0;padding:0 1.5rem;display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
.cred-cell{display:flex;align-items:center;gap:.75rem;padding:.95rem 1.1rem;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-sm)}
.cred-cell svg{flex-shrink:0;width:22px;height:22px;color:var(--accent)}
.cred-text{display:flex;flex-direction:column;line-height:1.3}
.cred-label{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-light)}
.cred-value{font-size:.8125rem;font-weight:600;color:var(--dark);margin-top:2px}
@media(max-width:768px){.cred-strip{grid-template-columns:repeat(2,1fr)}}

/* Pattern 3 — Numbered methodology grid (01-06 framework) */
.method-grid{max-width:var(--max-w);margin:0 auto;padding:0 1.5rem;display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.method-cell{background:#fff;border:1px solid var(--border);border-radius:10px;padding:1.1rem 1.2rem;position:relative;transition:all .2s}
.method-cell:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.method-num{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--accent);letter-spacing:.06em;margin-bottom:.45rem}
.method-name{font-family:var(--display);font-size:1rem;font-weight:600;color:var(--dark);margin-bottom:.35rem;line-height:1.25}
.method-desc{font-size:.78rem;color:var(--text-light);line-height:1.55}
@media(max-width:760px){.method-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.method-grid{grid-template-columns:1fr}}

/* Pattern 5 — Anchor + mock-output card (CTA paired with sample-output) */
.anchor-mock{max-width:var(--max-w);margin:0 auto;padding:0 1.5rem;display:grid;grid-template-columns:1fr 1.05fr;gap:1.25rem;align-items:stretch}
.am-pitch{background:#fff;border:1px solid var(--border);border-radius:12px;padding:1.75rem 1.85rem;display:flex;flex-direction:column;justify-content:center}
.am-pitch h3{font-family:var(--display);font-size:1.5rem;font-weight:600;line-height:1.15;color:var(--dark);margin:.5rem 0 .65rem;letter-spacing:-.01em}
.am-pitch p{font-size:.92rem;color:var(--text);line-height:1.6;margin-bottom:1.1rem}
.am-pitch ul{list-style:none;padding:0;margin:0 0 1.25rem;font-size:.86rem;color:var(--text);line-height:1.7}
.am-pitch ul li{padding-left:1.4rem;position:relative}
.am-pitch ul li::before{content:'✓';position:absolute;left:0;color:var(--accent);font-weight:800}
.am-cta{display:inline-block;align-self:flex-start;padding:.75rem 1.4rem;background:var(--accent);color:#fff;font-weight:700;font-size:.875rem;text-decoration:none;border-radius:8px;transition:all .2s;box-shadow:0 2px 8px rgba(15,118,110,.22)}
.am-cta:hover{background:var(--accent-hover);transform:translateY(-1px)}
.am-mock{background:linear-gradient(180deg,#f8fafc 0%,#fff 100%);border:1px solid var(--border);border-radius:12px;padding:1.25rem 1.4rem;box-shadow:var(--shadow-sm)}
.am-mock-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:.7rem;border-bottom:1px solid var(--border);margin-bottom:.6rem}
.am-mock-label{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-light)}
.am-mock-pill{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--accent);padding:3px 8px;border-radius:4px}
.am-mock-input{font-family:var(--mono);font-size:.75rem;color:var(--text-light);padding:.5rem .65rem;background:var(--cream);border-radius:6px;margin-bottom:.8rem}
.am-mock-input strong{color:var(--dark);font-weight:700}
.am-row{display:grid;grid-template-columns:1fr auto;gap:.4rem .8rem;padding:.7rem 0;border-bottom:1px dashed var(--border);align-items:center}
.am-row:last-child{border-bottom:none}
.am-row-name{font-size:.85rem;font-weight:600;color:var(--dark);line-height:1.25}
.am-row-meta{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-light);margin-top:3px}
.am-row-amount{font-family:var(--display);font-size:1rem;font-weight:600;color:var(--accent);text-align:right;line-height:1}
.am-row-score{font-family:var(--mono);font-size:.66rem;font-weight:700;color:var(--accent);text-align:right;margin-top:3px}
.am-mock-foot{margin-top:.75rem;padding-top:.7rem;border-top:1px solid var(--border);font-size:.72rem;color:var(--text-light);font-style:italic;text-align:center}
@media(max-width:820px){.anchor-mock{grid-template-columns:1fr}}

/* Pattern 7 — Named advisory / editorial section */
.advisory{max-width:var(--max-w);margin:0 auto;padding:0 1.5rem}
.advisory-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:1.75rem 2rem;box-shadow:var(--shadow-sm)}
.advisory-grid{display:grid;grid-template-columns:240px 1fr;gap:1.5rem;align-items:start}
.advisory-author{display:flex;flex-direction:column;align-items:center;text-align:center;padding-right:1.25rem;border-right:1px solid var(--border)}
.advisory-avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-hover));color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:1.4rem;font-weight:600;margin-bottom:.65rem}
.advisory-name{font-family:var(--display);font-size:1.05rem;font-weight:600;color:var(--dark);line-height:1.2}
.advisory-role{font-size:.75rem;color:var(--text-light);margin-top:.2rem;margin-bottom:.55rem}
.advisory-cred{font-family:var(--mono);font-size:.65rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);font-weight:700;line-height:1.55}
.advisory-body h4{font-family:var(--display);font-size:1.15rem;font-weight:600;color:var(--dark);margin:0 0 .65rem;letter-spacing:-.01em}
.advisory-body p{font-size:.88rem;color:var(--text);line-height:1.65;margin-bottom:.7rem}
.advisory-body p:last-child{margin-bottom:0}
.advisory-links{display:flex;gap:1rem;margin-top:.85rem;flex-wrap:wrap}
.advisory-links a{font-family:var(--mono);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);text-decoration:none}
.advisory-links a:hover{text-decoration:underline}
@media(max-width:720px){.advisory-grid{grid-template-columns:1fr}.advisory-author{padding-right:0;border-right:none;padding-bottom:1.25rem;border-bottom:1px solid var(--border);flex-direction:row;text-align:left;gap:1rem;align-items:center}.advisory-avatar{margin-bottom:0}}

/* Pattern 8 — Newsletter social-proof line */
.email-proof{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-light);text-align:center;margin-top:.6rem;flex-basis:100%;line-height:1.5}
.email-proof strong{color:var(--accent);font-weight:700}
.email-strip-proof{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#a8a29e;margin-left:.6rem}

/* Pattern 6 — Type-badges + score-pills */
.tb{display:inline-block;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2.5px 7px;border-radius:3px;line-height:1.3;margin-right:.4rem;vertical-align:middle}
.tb-pillar{background:var(--accent);color:#fff}
.tb-roundup{background:var(--secondary-light);color:var(--secondary-hover);border:1px solid rgba(180,83,9,.25)}
.tb-guide{background:var(--accent-light);color:var(--accent-hover);border:1px solid rgba(30,64,175,.25)}
.tb-state{background:#fdf2f8;color:#9d174d;border:1px solid rgba(219,39,119,.25)}
.tb-tool{background:#f3e8ff;color:#6b21a8;border:1px solid rgba(124,58,237,.25)}
.tb-review{background:#e0e7ff;color:#3730a3;border:1px solid rgba(67,56,202,.25)}
.tb-comparison{background:#fef3c7;color:#92400e;border:1px solid rgba(180,83,9,.25)}
.score-pill{font-family:var(--mono);font-size:9.5px;font-weight:800;letter-spacing:.04em;background:var(--accent);color:#fff;padding:2px 6px;border-radius:3px;margin-left:.35rem}

/* ── PRINT STYLES ── */
@media print{.nav-cta,.email-micro,.email-strip,.ad-zone,.cred-strip,.method-grid,.anchor-mock,.advisory{display:none}body{background:#fff}}


/* === RESPONSIVE TABLES (seed standard, codified 2026-07-30) === */
/* Wide comparison tables pushed article pages into horizontal scroll on mobile across 15 properties
   (measured at 390px). Give every table its own scroll container so the PAGE never scrolls sideways,
   while thead/tbody stay display:table so columns do not collapse. BOTH rules are required.
   Deliberately generic: the network uses 15+ table class names and an explicit list was outrun once. */
table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table > thead, table > tbody, table > tfoot { display: table; width: 100%; min-width: max-content; }

/* Form controls and long links must not outgrow their container either. A hard min-width on a flex
   child, and raw URLs used as citation link text, were the two other causes of mobile overflow. */
input, select, textarea, button, img, video, iframe, pre { max-width: 100%; }
form input[type="email"] { min-width: 0 !important; }
a, code, kbd, samp { overflow-wrap: anywhere; word-break: break-word; }

/* ═══════════════════════════════════════════════════════════════════════════
   ENTITY LAYER — ported into the seed 2026-08-29 (seed parity audit)
   Doctrine: LATTICE-CONTENT-STACK.md §ENTITY · LATTICE-CONTENT-OS.md §5b
             LATTICE-INFORMATION-DESIGN-STANDARD.md §10 / §10.4 / §10.5

   WHY IT IS HERE: any page naming companies in a position (roundup entries,
   comparison rows, leaderboards, per-entity report cards) must render each one
   with its REAL BRAND MARK and a DESTINATION ON OUR OWN PROPERTY.
   Operator, 2026-08-27: "companies that look at these articles need to
   understand the real estate they're buying isn't thin placement on a dense row
   80% of human beings won't read through."
   One change, five vectors: V3 scannable variance · V4 a destination carrying
   its own commerce · V7 internal link equity per entity · V8 the buyer sees a
   surface rather than a mention · MANUFACTURED SUPPLY turns "we mentioned you"
   into inventory with a visible footprint.

   ⛔ THE SEED CARRIES ONLY THE SHARED HALF. Each property supplies three
   adapter functions and inherits everything else:
     names()        where entity names come from on this property
     entDest(e)     the best REAL destination, best first, null if none
     configured()   which commerce destinations work — READ from the thing that
                    decides (e.g. the worker's affiliate map), never restated
   Mark acquisition is ALREADY SHARED and must never be re-implemented:
     node scripts/fetch-vendor-marks.mjs --names=<file.json> --field=<key>
   It owns fetching, identity verification, parked-domain rejection, md5
   collision demotion, contrast computation and the provenance manifest.

   ⛔ THREE HARD LINES, each learned by getting it wrong:
   1. Never hotlink. Self-host under assets/vendor-marks/ or every article
      carries a third-party request and a CSP hazard.
   2. Never attach an unverified mark. jasper.io served a perfectly valid icon
      for a company that is not Jasper. The domain must prove identity via
      <title>/og:site_name before its icon is used. Resolving is not
      identifying, and a logo is an identity claim.
   3. Never link a destination that does not exist. Entities without a page
      render as plain text (.no-dest). The absence is honest signal.
   ═══════════════════════════════════════════════════════════════════════════ */

.ent{display:inline-flex;align-items:center;gap:.5rem;min-width:0;vertical-align:-.1em}
/* ⛔ vertical-align:-.1em IS MEASURED, NOT CHOSEN. An inline-flex box takes its baseline from its
   first flex item, which here is the 22px mark, not the name. In prose lists ("A, B and C") that
   put every separating comma 1.59px BELOW the entity name it follows: subtle, and it made a
   deliberately enterprise-grade row look mis-set. Candidates measured live against the comma's own
   text-range box: baseline +1.59, middle -2.41, -.1em 0.00, -.2em -1.59, -.3em -3.20.
   ⭐ A typographic offset is a quantity. Measure the thing you are aligning TO. */
.ent-logo{flex:none;width:22px;height:22px;border-radius:6px;background:#fff;border:1px solid var(--border,#e4e4e7);
  display:inline-flex;align-items:center;justify-content:center;overflow:hidden}
.ent-logo img{width:16px;height:16px;object-fit:contain;display:block}
.ent-mark{flex:none;width:22px;height:22px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.62rem;font-weight:700;letter-spacing:.02em}
.ent-name{font-weight:600;color:var(--text,#3f3f46);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
a.ent-name{color:var(--accent);text-decoration:none}
a.ent-name:hover{text-decoration:underline}
/* ⚠️ On the first property to ship this, 42 of 54 entities had neither a review article nor an
   approved affiliate programme, so they render as PLAIN TEXT. Before that, all 53 unconfigured ones
   linked to /go/<slug>, which the worker answers with 410 Gone, and every gate passed because the
   link sweep checks that a link RESOLVES and /go/x is internal and served.
   ⭐ A LINK TO AN ERROR IS WORSE THAN NO LINK. */
.ent-name.no-dest{color:var(--text,#3f3f46)}
.ent-sub{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.7rem;color:var(--text-light,#6e6e76);white-space:nowrap}
/* Lead-row tint derives from the property's own accent; do NOT hardcode a hex here. */
td.ent-lead{background:linear-gradient(90deg,color-mix(in srgb, var(--accent) 6%, transparent),transparent)}

/* ⛔ REDUCED MOTION — added 2026-08-29. Standing requirement for every property built after that
   date: honour it for every transform, transition, keyframe AND smooth scroll. scroll-behavior is
   motion too, and it is the one that gets forgotten. This block is additive and overrides nothing. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}