/* ═══════════════════════════════════════════════════════════════
   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{
  /* GTM Stack voice (engine also injects accent/secondary at runtime from site.config.js;
     fonts are NOT engine-injected, so the type system is codified here + loaded per-page) */
  --accent:#4f46e5;--accent-light:#eef2ff;--accent-hover:#4338ca;
  --secondary:#0891b2;--secondary-light:#ecfeff;--secondary-hover:#0e7490;
  --paper:#f7f7fa;--dark:#0b0d12;--dark-mid:#11141c;--muted:#6f6f75;
  --text:#2a2c35;--text-light:#71717a;--border:#e6e6ee;--cream:#f4f4f8;
  --display:'Bricolage Grotesque',Georgia,serif;--body:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono','SFMono-Regular',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 (Lucreya: logo-left, glossy mark, glowing gradient CTA; single-tone wordmark) ── */
nav.nav{display:flex;align-items:center;gap:1.25rem;max-width:1180px;margin:0 auto;padding:1.05rem 1.5rem;border-bottom:1px solid var(--border)}
.nav-brand{order:-1;margin-right:auto;display:inline-flex;align-items:center;gap:.62rem;font-family:var(--display);font-size:1.42rem;font-weight:700;letter-spacing:-.03em;color:var(--dark);text-decoration:none}
.nav-brand span{color:inherit}
.nav-brand:hover{opacity:.86}
/* ── Lucreya split mark (two diagonal halves, staggered + breathing) ── */
.luc-mark{position:relative;width:27px;height:27px;flex:none;display:inline-block;vertical-align:middle}
.luc-mark i{position:absolute;inset:0;border-radius:7px}
.luc-mark i:nth-child(1){background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.5),transparent 46%),linear-gradient(135deg,#6366f1,#4f46e5);clip-path:polygon(0 0,100% 0,0 100%);box-shadow:0 4px 13px rgba(79,70,229,.5);animation:luc-a 4.6s ease-in-out infinite}
.luc-mark i:nth-child(2){background:radial-gradient(circle at 70% 74%,rgba(255,255,255,.32),transparent 50%),linear-gradient(135deg,#8b5cf6,#7c3aed);clip-path:polygon(100% 0,100% 100%,0 100%);box-shadow:0 6px 15px rgba(124,58,237,.45);animation:luc-b 4.6s ease-in-out infinite}
.nav-brand:hover .luc-mark i:nth-child(1){transform:translate(-3.5px,-3.5px)}
.nav-brand:hover .luc-mark i:nth-child(2){transform:translate(3.5px,3.5px)}
@keyframes luc-a{0%,100%{transform:translate(-1.5px,-1.5px)}50%{transform:translate(-3px,-3px)}}
@keyframes luc-b{0%,100%{transform:translate(1.5px,1.5px)}50%{transform:translate(3px,3px)}}
@media(prefers-reduced-motion:reduce){.luc-mark i{animation:none}.luc-mark i:nth-child(1){transform:translate(-1.5px,-1.5px)}.luc-mark i:nth-child(2){transform:translate(1.5px,1.5px)}}
.nav-left{order:0;display:flex;align-items:center;gap:1.6rem}
.nav-left a{position:relative;text-decoration:none;color:var(--text-light);font-size:.9rem;font-weight:500;transition:color .18s}
.nav-left a:hover{color:var(--dark)}
.nav-left a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--secondary));transition:right .24s ease}
.nav-left a:hover::after{right:0}
.nav-right{order:1;display:flex;align-items:center}
.nav-cta{display:inline-flex;align-items:center;gap:.42rem;font-family:var(--mono);font-size:.76rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#fff;text-decoration:none;background:linear-gradient(135deg,var(--accent),#7c3aed);padding:.64rem 1.15rem;border-radius:9px;box-shadow:0 7px 22px rgba(79,70,229,.42);transition:transform .18s ease,box-shadow .18s ease;white-space:nowrap}
.nav-cta::after{content:"\2192";font-family:var(--body)}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 11px 30px rgba(79,70,229,.58)}
@media(max-width:768px){.nav-left{display:none}.nav-brand{font-size:1.2rem}.nav-cta{font-size:.68rem;padding:.5rem .9rem}}

/* ── 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}
.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-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;font-weight:700;text-decoration:none;color:var(--dark);display:inline-flex;align-items:center;gap:.5rem}
.footer-logo span{color:inherit}
.footer-logo .luc-mark{width:22px;height:22px}
.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) */
/* `min-width:0` + child clamp added 2026-08-14. This is the SAME defect that pushed edubracket's
   `.article` wide: a grid container with `max-width: var(--max-w)` and no lower bound. A grid item's
   default `min-width:auto` refuses to shrink below its content, so the mock-output rows (nowrap
   price spans) forced lucreya.com to 427px at a 390px viewport.
   The `.anchor-mock *` clamp is what actually fixes it — clipping the container alone left the rows
   at 397px, because the overflow originates in the grid CHILDREN, not the wrapper.
   NOTE: `.anchor-mock` carries this pattern on 13 properties; 243 unbounded max-width container
   rules exist network-wide. This fixes the one with measured live overflow. */
.anchor-mock{max-width:min(var(--max-w),100%);min-width:0;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}
/* ★ THE RESPONSIVE STACK NAMED THE WRONG ELEMENT AND SO NEVER RAN. `grid-template-columns` was set
   on `.anchor-mock`, which is not a grid — it is a flex CHILD. The grid is `.anchor-cta`
   (`grid-template-columns:1.05fr 0.95fr`), and it stayed two-column at every width. The rule looked
   correct in review, applied cleanly, cascaded fine, and did nothing at all.

       ★ A DECLARATION APPLIED TO AN ELEMENT THAT CANNOT USE IT FAILS SILENTLY. CSS HAS NO ERROR
         FOR "grid-template-columns ON A FLEX ITEM" — it is simply ignored, so a broken responsive
         rule is indistinguishable from a working one until something is measured.

   `.anchor-mock` also carries `margin-left:-3.5rem` and a rotation as a deliberate overlap flourish;
   at 390px that pushed lucreya.com to 427px. The negative offset is reset with the stack, since
   there is no adjacent column left to overlap.
   Measured: 427 -> 390 at 390px. Unchanged at 768 and 1440, which were already clean. */
@media(max-width:820px){.anchor-cta{grid-template-columns:1fr}
.anchor-mock{margin-left:0;min-width:0;max-width:100%}

/* The overflow originates in the grid CHILDREN (nowrap price spans), so the clamp has to reach them. */
.anchor-mock *{min-width:0;max-width:100%}}

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