/* ═══════════════════════════════════════════════════════════════
   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:#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-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:#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-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}
/* ZEBRA STRIPE, SURFACE-RELATIVE. Was var(--cream) (#f5efe2), a colour named for its VALUE. filmfont-extras.js injects td{color:#e6dec9} for the DARK article theme, so a cream stripe met cream text at 1.17:1 and 12 rows of the licence table were invisible. Two stylesheets, two theme assumptions, one table. currentColor at 6% is a MODULATION OF THE SURFACE: it darkens a light ground and lightens a dark one, and can never equal the text colour it is derived from. */
.data-table tr:nth-child(even) td{background:color-mix(in srgb,currentColor 6%,transparent)}

/* ── 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-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:#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-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}}


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

/* ⛔⛔ THE CTA LABEL WAS WHITE ON THE BRAND GOLD AT 2.24:1, ON 8 PAGES — "Check a font license",
   the most clickable control in the header and the least readable text in it. Measured live:
   fill rgb(201,169,110), text #fff, 13px/700.
   ⭐ THE FILL IS THE BRAND SIGNAL AND MUST NOT MOVE. Both repairs were measured before choosing:
       keep the gold, darken the ink → #3d2f14 = 5.81:1   (chosen)
       keep white, darken the gold  → #8a6d2f = 4.87:1
     The second reaches AA by turning a warm gold muddy, which on a TYPOGRAPHY property spends the
     brand to satisfy a checker. Dark ink on gold is the letterpress convention, so it reads as a
     decision rather than a contrast patch — and it scores higher besides.
   ⛔⛔ WHY THIS IS WRITTEN AS `a.nav-cta` AND NOT ON THE RULE ABOVE. `.nav-cta` IS DECLARED TWICE:
     once in this file and once inside an embedded stylesheet in `site_engine.js`, which injects it
     at RUNTIME. Editing the rule above changed nothing on screen and the live CSS still proved the
     new value — the fix was real, in the copy that does not render. The injected sheet lands after
     this one, so at equal specificity it wins on source order; `a.nav-cta` (0,1,1) beats a bare
     `.nav-cta` (0,1,0) and settles it by WEIGHT instead of position.
   ⭐⭐ A RULE THAT EXISTS IN TWO PLACES HAS ONE PLACE THAT RENDERS, and the stylesheet is the
     obvious place to look and the wrong one. 11 of 15 properties embed a .nav-cta colour in their
     engine bundle, so ANY nav fix on this network must be verified in the BROWSER, never from the
     stylesheet. `site_engine.js` also carries "Never edit this file" in its own header, which is
     why the value is not simply corrected there. This is the same technique already used for
     `.skip-to-content` on a sibling property, for exactly the same reason.
   ⚠️ Only the LABEL colour is set. --accent-fill is untouched, so no other accent use ripples. */
a.nav-cta, header a.nav-cta { color: #3d2f14; }