/* ═══════════════════════════════════════════════════════════════
   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.
   Colors are CSS custom properties set at runtime.
   This file NEVER needs editing when forking.
   ═══════════════════════════════════════════════════════════════ */

/* ── TOKENS ── */
:root{
  --accent:#1e40af;--accent-light:#eff6ff;--accent-hover:#1e3a8a;
  --secondary:#b45309;--secondary-light:#fef3c7;--secondary-hover:#92400e;
  --paper:#fafaf9;--dark:#0c0a09;--dark-mid:#1c1917;--muted:#74706d;
  --text:#44403c;--text-light:#78716c;--text-muted:var(--text-light);--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-fill,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-fill,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:#f62b2b}
.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:#f62b2b}
@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:#f62b2b}
.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-fill,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-fill,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:#f62b2b;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-fill,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-fill,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-fill,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-fill,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:#74706d;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-fill,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-fill,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}}

/* BLUF answer-box (AIO citation) added 2026-06-13 */
.bluf{background:var(--accent-light,#f7f7fb);border:1px solid var(--border,#e5e5ea);border-left:4px solid var(--accent,#e11d48);border-radius:10px;padding:1.05rem 1.3rem;margin:1.5rem 0}
.bluf-title{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent,#e11d48);font-weight:700;margin-bottom:.5rem}
.bluf-list{margin:0;padding-left:1.1rem;line-height:1.6}
.bluf-list li{margin:.35rem 0}


/* === RESPONSIVE TABLES (network heal 2026-07-30) === */
/* Wide comparison tables were pushing article pages into horizontal scroll on mobile (measured at
   390px by lattice-core/scripts/render-audit.mjs). Give the table its own scroll container so the
   PAGE never scrolls sideways, while thead/tbody stay display:table so the columns do not collapse
   and the table remains readable. Both rules are required; the first alone destroys the layout. */
table.data-table, table.pricing-table, table.capability-matrix, table.comparison-table,
.article-body table, main table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table.data-table > thead, table.data-table > tbody,
table.pricing-table > thead, table.pricing-table > tbody,
table.capability-matrix > thead, table.capability-matrix > tbody,
table.comparison-table > thead, table.comparison-table > tbody,
.article-body table > thead, .article-body table > tbody,
main table > thead, main table > tbody {
  display: table;
  width: 100%;
}
/* Scoped to narrow viewports 2026-09-16. `min-width:max-content` here forced EVERY table to its
   intrinsic width at ALL viewports, so a table whose content is wider than its column scrolled
   sideways inside its own box and the right-hand columns were invisible without a horizontal drag.
   Measured in the live DOM on rxgrab/articles/goodrx-alternatives: an 8-column table forced into
   that case hid 1089px of columns; with this scoping it hides 0 and the 8th column is visible.
   It also zeroes <col> widths and defeats table-layout:fixed, because a display:block table has
   no table box for a colgroup to size. Tables whose max-content already fitted are UNCHANGED:
   the declaration was not binding for them. The mobile branch below is byte-identical to the
   2026-07-30 heal, so narrow rendering does not change; only the desktop case is corrected, and
   the table keeps display:block + overflow-x:auto at every width so the PAGE can never scroll. */
@media (max-width: 700px) {
  table.data-table > thead, table.data-table > tbody,
  table.pricing-table > thead, table.pricing-table > tbody,
  table.capability-matrix > thead, table.capability-matrix > tbody,
  table.comparison-table > thead, table.comparison-table > tbody,
  .article-body table > thead, .article-body table > tbody,
  main table > thead, main table > tbody {
    min-width: max-content;
  }
}


/* === RESPONSIVE TABLES v2 (network heal 2026-07-30) === */
/* Wide comparison tables push article pages into horizontal scroll on mobile (measured at 390px by
   lattice-core/scripts/render-audit.mjs). Give every table its own scroll container so the PAGE
   never scrolls sideways, while thead/tbody stay display:table so the columns do not collapse and
   the table stays readable. BOTH rules are required; the first alone destroys the layout.
   Deliberately generic: the network uses 15+ distinct table class names and an explicit list has
   already been 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%;
}
/* Scoped to narrow viewports 2026-09-16. `min-width:max-content` here forced EVERY table to its
   intrinsic width at ALL viewports, so a table whose content is wider than its column scrolled
   sideways inside its own box and the right-hand columns were invisible without a horizontal drag.
   Measured in the live DOM on rxgrab/articles/goodrx-alternatives: an 8-column table forced into
   that case hid 1089px of columns; with this scoping it hides 0 and the 8th column is visible.
   It also zeroes <col> widths and defeats table-layout:fixed, because a display:block table has
   no table box for a colgroup to size. Tables whose max-content already fitted are UNCHANGED:
   the declaration was not binding for them. The mobile branch below is byte-identical to the
   2026-07-30 heal, so narrow rendering does not change; only the desktop case is corrected, and
   the table keeps display:block + overflow-x:auto at every width so the PAGE can never scroll. */
@media (max-width: 700px) {
  table > thead, table > tbody, table > tfoot {
    min-width: max-content;
  }
}


/* === RESPONSIVE TABLES v3 (network heal 2026-07-30) === */
/* Wide comparison tables push article pages into horizontal scroll on mobile (measured at 390px by
   lattice-core/scripts/render-audit.mjs). Give every table its own scroll container so the PAGE
   never scrolls sideways, while thead/tbody stay display:table so the columns do not collapse and
   the table stays readable. BOTH rules are required; the first alone destroys the layout.
   Deliberately generic: the network uses 15+ distinct table class names and an explicit list has
   already been 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%;
}
/* Scoped to narrow viewports 2026-09-16. `min-width:max-content` here forced EVERY table to its
   intrinsic width at ALL viewports, so a table whose content is wider than its column scrolled
   sideways inside its own box and the right-hand columns were invisible without a horizontal drag.
   Measured in the live DOM on rxgrab/articles/goodrx-alternatives: an 8-column table forced into
   that case hid 1089px of columns; with this scoping it hides 0 and the 8th column is visible.
   It also zeroes <col> widths and defeats table-layout:fixed, because a display:block table has
   no table box for a colgroup to size. Tables whose max-content already fitted are UNCHANGED:
   the declaration was not binding for them. The mobile branch below is byte-identical to the
   2026-07-30 heal, so narrow rendering does not change; only the desktop case is corrected, and
   the table keeps display:block + overflow-x:auto at every width so the PAGE can never scroll. */
@media (max-width: 700px) {
  table > thead, table > tbody, table > tfoot {
    min-width: max-content;
  }
}

/* Form controls must not outgrow their container either. The newsletter capture ships an email
   input with an inline `min-width:200px`, which together with its padding and the Subscribe button
   pushed three nesyona article pages 5px past a 390px viewport. A hard min-width on a flex child is
   the classic cause, and it is inline on the element, so only a max-width guard reaches it. */
input, select, textarea, button, img, video, iframe, pre {
  max-width: 100%;
}


/* === RESPONSIVE TABLES v4 (network heal 2026-07-30) === */
/* Wide comparison tables push article pages into horizontal scroll on mobile (measured at 390px by
   lattice-core/scripts/render-audit.mjs). Give every table its own scroll container so the PAGE
   never scrolls sideways, while thead/tbody stay display:table so the columns do not collapse and
   the table stays readable. BOTH rules are required; the first alone destroys the layout.
   Deliberately generic: the network uses 15+ distinct table class names and an explicit list has
   already been 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%;
}
/* Scoped to narrow viewports 2026-09-16. `min-width:max-content` here forced EVERY table to its
   intrinsic width at ALL viewports, so a table whose content is wider than its column scrolled
   sideways inside its own box and the right-hand columns were invisible without a horizontal drag.
   Measured in the live DOM on rxgrab/articles/goodrx-alternatives: an 8-column table forced into
   that case hid 1089px of columns; with this scoping it hides 0 and the 8th column is visible.
   It also zeroes <col> widths and defeats table-layout:fixed, because a display:block table has
   no table box for a colgroup to size. Tables whose max-content already fitted are UNCHANGED:
   the declaration was not binding for them. The mobile branch below is byte-identical to the
   2026-07-30 heal, so narrow rendering does not change; only the desktop case is corrected, and
   the table keeps display:block + overflow-x:auto at every width so the PAGE can never scroll. */
@media (max-width: 700px) {
  table > thead, table > tbody, table > tfoot {
    min-width: max-content;
  }
}

/* Form controls must not outgrow their container either. The newsletter capture ships an email
   input with an inline `min-width:200px`, which together with its padding and the Subscribe button
   pushed three nesyona article pages 5px past a 390px viewport. A hard min-width on a flex child is
   the classic cause, and it is inline on the element, so only a max-width guard reaches it. */
input, select, textarea, button, img, video, iframe, pre {
  max-width: 100%;
}

/* max-width alone does not reach this one. The email input carries an INLINE `min-width:200px`, and
   an inline style beats a stylesheet rule, so the flex row stays wider than its parent and the page
   keeps scrolling 5px. A min-width floor on a flex child is the standard cause of exactly this, and
   `!important` is the only lever that reaches an inline declaration  - used deliberately here and
   scoped to one control rather than sprayed across the sheet. */
form input[type="email"] {
  min-width: 0 !important;
}


/* === RESPONSIVE TABLES v5 (network heal 2026-07-30) === */
/* Wide comparison tables push article pages into horizontal scroll on mobile (measured at 390px by
   lattice-core/scripts/render-audit.mjs). Give every table its own scroll container so the PAGE
   never scrolls sideways, while thead/tbody stay display:table so the columns do not collapse and
   the table stays readable. BOTH rules are required; the first alone destroys the layout.
   Deliberately generic: the network uses 15+ distinct table class names and an explicit list has
   already been 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%;
}
/* Scoped to narrow viewports 2026-09-16. `min-width:max-content` here forced EVERY table to its
   intrinsic width at ALL viewports, so a table whose content is wider than its column scrolled
   sideways inside its own box and the right-hand columns were invisible without a horizontal drag.
   Measured in the live DOM on rxgrab/articles/goodrx-alternatives: an 8-column table forced into
   that case hid 1089px of columns; with this scoping it hides 0 and the 8th column is visible.
   It also zeroes <col> widths and defeats table-layout:fixed, because a display:block table has
   no table box for a colgroup to size. Tables whose max-content already fitted are UNCHANGED:
   the declaration was not binding for them. The mobile branch below is byte-identical to the
   2026-07-30 heal, so narrow rendering does not change; only the desktop case is corrected, and
   the table keeps display:block + overflow-x:auto at every width so the PAGE can never scroll. */
@media (max-width: 700px) {
  table > thead, table > tbody, table > tfoot {
    min-width: max-content;
  }
}

/* Form controls must not outgrow their container either. The newsletter capture ships an email
   input with an inline `min-width:200px`, which together with its padding and the Subscribe button
   pushed three nesyona article pages 5px past a 390px viewport. A hard min-width on a flex child is
   the classic cause, and it is inline on the element, so only a max-width guard reaches it. */
input, select, textarea, button, img, video, iframe, pre {
  max-width: 100%;
}

/* max-width alone does not reach this one. The email input carries an INLINE `min-width:200px`, and
   an inline style beats a stylesheet rule, so the flex row stays wider than its parent and the page
   keeps scrolling 5px. A min-width floor on a flex child is the standard cause of exactly this, and
   `!important` is the only lever that reaches an inline declaration  - used deliberately here and
   scoped to one control rather than sprayed across the sheet. */
form input[type="email"] {
  min-width: 0 !important;
}

/* Long unbroken links. On LensPOV the widest element on four pages was an <a> at 547-678px against
   a 390px viewport: raw URLs used as citation link text, which have no spaces to wrap at, so the
   browser lets them run past the edge and the whole page scrolls sideways. The U3 citation campaign
   adds MORE external links, so this gets worse as the network gets better sourced unless it is
   fixed at the stylesheet. */
a, code, kbd, samp {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ── WCAG AA CONTRAST REPAIR (2026-08-25) ────────────────────────────────────────────────────
   ⛔ THE NAV CTA WAS RENDERING INVISIBLE: rgb(220,38,38) text on rgb(220,38,38) background, i.e.
   the button's label was the same colour as the button. Measured on live article pages.

   Cause is a specificity collision, not a colour choice. `.nav-cta{color:#fff}` is (0,1,0);
   `.article-wrap a{color:var(--accent)}` is (0,1,1) and wins. It applies at all because on THIS
   property the engine-injected header lands INSIDE `.article-wrap`  - verified live: lenspov
   inWrap=true, while nesyona, rinzara and ceocult all place it outside and are unaffected.
   ⭐ The same class as rxgrab's "Find cheapest" CTA a few hours earlier: a correct `color`
     declaration that never applied. The declaration is not the bug; the cascade is. Neither is
     visible by reading the rule or grepping for a bad hex \u2014 only the computed style shows it.
   Fixed by raising specificity, so the token stays the source of truth. */
nav.nav .nav-cta, nav .nav-cta, a.nav-cta { color: #fff; }

/* Breadcrumbs measured 2.41:1 (#74706d on #fafaf9). Darkened along the same hue with margin
   above the floor, because targeting exactly 4.5 leaves the verdict to rounding. */
.breadcrumbs, .breadcrumbs a { color: #6c6763; }

/* The accent used as TEXT on near-black. ⛔ The token itself cannot move: --accent is a FILL on 162
   elements here, and a value that fixes text-on-dark makes white-on-fill worse. So the two failing
   roles get an explicit lifted value instead.
   #f62b2b: 4.83 on #0f0f12, 4.55 on #16161b  - the same value already adopted for lenspov's other
   accent-as-text uses, so the property does not now carry two different "accent text" colours.
   ⚠️ `.skip-to-content` is injected by site_engine with its own <style id="skip-to-content-style">,
   so this is written at a specificity that beats a bare class selector. It is an accessibility
   affordance that was itself failing contrast, which is worth stating plainly. */
/* ⛔⛔ `.nav-brand` WAS REMOVED FROM THIS RULE: IT IS NOT ACCENT-ON-NEAR-BLACK, IT IS A CHIP.
   The rule above reasons about the accent used as TEXT on the page's near-black ground, and that
   reasoning is right for `.skip-to-content`. It was never true of the brand: line 39 gives
   `.nav-brand` its OWN background (var(--dark), measured rgb(12,10,9)) together with color:#fff,
   so the pair was already decided and already correct.
   ⭐⭐ MEASURED LIVE ON THE CHIP, THE "FIX" COST 4x: white #fff = 19.76:1, the red #f62b2b = 4.98:1.
     Both clear 4.5, so no gate objected, and the wordmark shipped reading "Lens" in red beside
     "POV" in blue on black - a colour combination nobody designed.
   ⭐⭐⭐ A THRESHOLD ASKS "IS THIS ABOVE 4.5?" AND NEVER "DID YOU MAKE IT WORSE?" A remediation pass
     driven by a pass/fail list will happily trade 19.76 for 4.98 and report success, because the
     element it was reasoning about and the element it edited were not the same thing.
   ⚠️ The lesson generalises past colour: BEFORE APPLYING A ROLE-BASED FIX, CHECK THE ELEMENT
     ACTUALLY PLAYS THAT ROLE. `.nav-brand` sets its own background unconditionally (line 39; the
     768px media query at line 48 changes only size and padding), so it is never bare text. */
a.skip-to-content, body > a.skip-to-content { color: #f62b2b; }


/* === TABLE COLUMN ALIGNMENT (2026-09-23) === */
/* Overrides the RESPONSIVE TABLES heal above: it made thead and tbody two independent tables, so
   headers drifted off their columns. One table on desktop; on phones the table scrolls in its own
   box and thead/tbody share one anonymous table. See scripts/fix-table-column-alignment.mjs. */
table { display: table !important; width: 100% !important; }
table > thead, table > tbody, table > tfoot { display: table-row-group !important; width: auto !important; min-width: 0 !important; }
@media (max-width: 700px) {
  table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
}