/* Nesyona — Design System
   Accent: #e11d48 (rose-600)
   Paper:  #fafaf9 (stone-50)
   Dark:   #18181b (zinc-900)
   Muted:  #a1a1aa (zinc-400)
   Fonts:  Bricolage Grotesque (display) + Outfit (body)
*/

:root {
  --accent: #da1c46;
  --accent-light: #fff1f2;
  --accent-hover: #be123c;
  --paper: #fafaf9;
  --dark: #18181b;
  --dark-mid: #27272a;
  --muted: #727279;
  --text: #3f3f46;
  --text-light: #71717a;
  --border: #e4e4e7;
  --cream: #f4f4f5;
  --display: 'Bricolage Grotesque', Georgia, serif;
  --body: 'Outfit', system-ui, sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', monospace;
  --max-w: 1080px;
  --radius: 10px;
}
.hero,.stats,.hero *,.stats *{--muted:#a1a1aa}


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: var(--body); color: var(--text); background: var(--paper); font-size: 1rem; line-height: 1.7; }

/* NAV */
nav { display: flex; align-items: center; justify-content: space-between; max-width: var(--max-w); margin: 0 auto; padding: 1.25rem 1.5rem; }
.nav-logo { font-family: var(--display); font-size: 1.5rem; font-weight: 700; text-decoration: none; color: var(--dark); letter-spacing: -0.03em; }
.nav-logo span { color: var(--accent); }
.nav-links { list-style: none; display: flex; gap: 1.75rem; }
.nav-links a { text-decoration: none; color: var(--text-light); font-size: 0.875rem; font-weight: 500; transition: color 0.2s; }
.nav-links a:hover { color: var(--dark); }
.nav-cta { font-size: 0.8125rem; font-weight: 600; color: var(--accent); text-decoration: none; border: 1.5px solid var(--accent); padding: 0.5rem 1rem; border-radius: 6px; transition: all 0.2s; white-space: nowrap; }
.nav-cta:hover { background:var(--accent-fill,var(--accent)); color: #fff; }
@media (max-width: 768px) { .nav-links { display: none; } }

/* HERO — dark editorial */
.hero { background: var(--dark); color: #fff; padding: 5rem 1.5rem 4.5rem; text-align: center; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 20%, rgba(225,29,72,0.12) 0%, transparent 60%), radial-gradient(ellipse at 70% 80%, rgba(225,29,72,0.06) 0%, transparent 50%); pointer-events: none; }
.hero-eyebrow { font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; color: #fa2050; margin-bottom: 1.25rem; position: relative; }
.hero h1 { font-family: var(--display); font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 1.25rem; position: relative; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-sub { font-size: 1.125rem; color: #a1a1aa; max-width: 600px; margin: 0 auto 2.5rem; line-height: 1.6; position: relative; font-weight: 300; }
.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; position: relative; }
.btn-primary { display: inline-block; padding: 0.85rem 2rem; background:var(--accent-fill,var(--accent)); color: #fff; font-weight: 600; font-size: 0.9375rem; text-decoration: none; border-radius: 8px; transition: background 0.2s; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { display: inline-block; padding: 0.85rem 2rem; border: 1.5px solid #52525b; color: #d4d4d8; font-weight: 500; font-size: 0.9375rem; text-decoration: none; border-radius: 8px; transition: all 0.2s; }
.btn-ghost:hover { border-color: #a1a1aa; color: #fff; }

/* STATS BAR */
.stats { background: var(--dark); border-top: 1px solid #27272a; }
.stats-inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; padding: 1.75rem 1.5rem; }
.stat-val { font-family: var(--display); font-size: 1.625rem; font-weight: 700; color: var(--accent); letter-spacing: -0.02em; }
.stat-label { font-size: 0.75rem; color: #80808a; margin-top: 0.25rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }
@media (max-width: 600px) { .stats-inner { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }

/* SECTIONS */
section { max-width: var(--max-w); margin: 0 auto; padding: 3.5rem 1.5rem; }
.section-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 2rem; }
.section-title { font-family: var(--display); font-size: 1.625rem; font-weight: 700; letter-spacing: -0.02em; }
.section-link { font-size: 0.875rem; color: var(--accent); text-decoration: none; font-weight: 600; }
.divider { border: none; height: 1px; background: var(--border); max-width: var(--max-w); margin: 0 auto; }

/* ARTICLE CARDS */
.article-grid { display: grid; gap: 1.25rem; }
.article-grid.three { grid-template-columns: repeat(3, 1fr); }
.article-grid.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 768px) { .article-grid.three, .article-grid.two { grid-template-columns: 1fr; } }
.article-card { display: block; text-decoration: none; color: inherit; padding: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius); transition: all 0.2s; background: #fff; }
.article-card:hover { border-color: var(--accent); box-shadow: 0 4px 20px rgba(225,29,72,0.08); transform: translateY(-2px); }
.article-card.featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; border-width: 2px; border-color: var(--accent); background: var(--accent-light); }
@media (max-width: 768px) { .article-card.featured { grid-template-columns: 1fr; } }
.article-tag { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 0.625rem; }
.article-title { font-family: var(--display); font-size: 1.125rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 0.5rem; }
.article-excerpt { font-size: 0.875rem; color: var(--text-light); line-height: 1.6; margin-bottom: 0.75rem; }
.article-meta { font-size: 0.75rem; color: var(--muted); }

/* TOPIC / CATEGORY CARDS */
.topics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 768px) { .topics-grid { grid-template-columns: repeat(2, 1fr); } }
.topic-card { display: block; text-decoration: none; color: inherit; padding: 1.25rem; background: var(--cream); border-radius: var(--radius); transition: all 0.2s; border: 1px solid transparent; }
.topic-card:hover { border-color: var(--accent); background: var(--accent-light); }
.topic-icon { font-size: 1.5rem; margin-bottom: 0.5rem; }
.topic-name { font-family: var(--display); font-weight: 700; font-size: 0.9375rem; margin-bottom: 0.25rem; }
.topic-count { font-size: 0.75rem; color: var(--text-light); }

/* NEWSLETTER */
.newsletter { background: var(--dark); padding: 3.5rem 1.5rem; text-align: center; margin-top: 2rem; }
.newsletter h2 { font-family: var(--display); color: #fff; font-size: 1.75rem; margin-bottom: 0.75rem; letter-spacing: -0.02em; }
.newsletter p { color: #a1a1aa; margin-bottom: 1.5rem; max-width: 480px; margin-left: auto; margin-right: auto; font-size: 0.9375rem; }
.newsletter-form { display: flex; gap: 0.5rem; max-width: 420px; margin: 0 auto; }
.newsletter-form input { flex: 1; padding: 0.75rem 1rem; border: 1px solid #3f3f46; border-radius: 6px; background: #27272a; color: #fff; font-size: 0.875rem; }
.newsletter-form input::placeholder { color: #71717a; }
.newsletter-form button { padding: 0.75rem 1.5rem; background:var(--accent-fill,var(--accent)); color: #fff; border: none; border-radius: 6px; font-weight: 600; font-size: 0.875rem; cursor: pointer; transition: background 0.2s; white-space: nowrap; }
.newsletter-form button:hover { background: var(--accent-hover); }

/* 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; }
.footer-logo { font-family: var(--display); font-size: 1.25rem; font-weight: 700; text-decoration: none; color: var(--dark); }
.footer-logo span { color: var(--accent); }
.footer-links { list-style: none; display: flex; gap: 1.5rem; }
.footer-links a { font-size: 0.8125rem; color: var(--text-light); text-decoration: none; }
.footer-links a:hover { color: var(--dark); }
.footer-note { font-size: 0.75rem; color: var(--muted); max-width: 480px; flex-basis: 100%; }

/* ARTICLE PAGE */
.breadcrumbs { max-width: var(--max-w); margin: 0 auto; padding: 1rem 1.5rem; font-size: 0.75rem; color: #727279; }
.breadcrumbs a { color: var(--text-light); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); }
.article-wrap { max-width: 720px; margin: 0 auto; padding: 0 1.5rem 4rem; }
.article-wrap .article-meta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 1.5rem; font-size: 0.8125rem; color: var(--text-light); }
.article-reviewer { font-weight: 500; }
.article-reviewer strong { color: var(--dark); }
.article-wrap h1 { font-family: var(--display); font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; margin-bottom: 1.25rem; }
.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: 700; margin-top: 2.75rem; margin-bottom: 1rem; letter-spacing: -0.02em; }
.article-wrap h3 { font-family: var(--display); font-size: 1.125rem; font-weight: 700; margin-top: 2rem; margin-bottom: 0.75rem; }
.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: 0.5rem; }
.article-wrap a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.article-wrap a:hover { color: var(--accent-hover); }

/* ARTICLE IMAGES */
.article-img { width: 100%; height: auto; border-radius: var(--radius); margin-bottom: 2rem; }
.article-img.hero-img { margin-bottom: 2.5rem; }

/* TOC */
.toc { background: var(--cream); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin-bottom: 2.5rem; }
.toc-title { font-family: var(--display); font-weight: 700; font-size: 0.875rem; margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dark); }

/* 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: 0.9375rem; }
.callout strong { display: block; font-family: var(--display); margin-bottom: 0.375rem; color: var(--dark); }

/* CTA BLOCKS */
.cta-block { background: var(--cream); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; margin: 2rem 0; }
.cta-block-title { font-family: var(--display); font-weight: 700; font-size: 1rem; margin-bottom: 0.5rem; }
.cta-block-body { font-size: 0.875rem; color: var(--text-light); margin-bottom: 0.75rem; line-height: 1.6; }
.cta-link { font-size: 0.875rem; font-weight: 600; color: var(--accent); text-decoration: none; }
.cta-link:hover { text-decoration: underline; }

/* TOOL / COMPARISON CARDS */
.tool-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.25rem; }
.tool-card-name { font-family: var(--display); font-weight: 700; font-size: 1.125rem; margin-bottom: 0.25rem; }
.tool-card-price { font-family: var(--mono); font-size: 0.8125rem; color: var(--accent); margin-bottom: 0.75rem; }
.tool-card-body { font-size: 0.875rem; color: var(--text-light); line-height: 1.6; }

/* DATA TABLE */
.data-table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: 0.875rem; }
.data-table th { background: var(--dark); color: #fff; padding: 0.75rem 1rem; text-align: left; font-family: var(--display); font-weight: 700; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; }
.data-table td { padding: 0.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); }

/* EMAIL CAPTURE */
.email-capture { background: var(--dark); border-radius: var(--radius); padding: 2rem; margin: 2.5rem 0; color: #fff; text-align: center; }
.email-capture h3 { font-family: var(--display); font-size: 1.25rem; margin-bottom: 0.5rem; }
.email-capture p { color: #a1a1aa; font-size: 0.875rem; margin-bottom: 1.25rem; }
.email-capture-form { display: flex; gap: 0.5rem; max-width: 380px; margin: 0 auto; }
.email-capture-form input { flex: 1; padding: 0.625rem 1rem; border: 1px solid #3f3f46; border-radius: 6px; background: #27272a; color: #fff; font-size: 0.875rem; }
.email-capture-form input::placeholder { color: #71717a; }
.email-capture-form button { padding: 0.625rem 1.25rem; background:var(--accent-fill,var(--accent)); border: none; border-radius: 6px; color: #fff; font-weight: 600; font-size: 0.8125rem; cursor: pointer; white-space: nowrap; }

/* 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; font-weight: 700; margin-bottom: 1.25rem; }
.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 0.2s; border: 1px solid transparent; }
.related-card:hover { border-color: var(--accent); background: var(--accent-light); }
.related-card-tag { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 0.375rem; }
.related-card-title { font-family: var(--display); font-weight: 700; font-size: 0.9375rem; line-height: 1.3; }

/* AD ZONES */
.ad-zone { max-width: var(--max-w); margin: 2rem auto; min-height: 90px; }

/* CAPABILITY FLAG PILLS */
.cap-flags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0.375rem 0 0.625rem; }
.cap-flag {
  display: inline-block;
  font-family: var(--body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.1875rem 0.5rem;
  border-radius: 100px;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
  line-height: 1.4;
  color: inherit;
}
.cap-flag:hover { opacity: 0.75; }
.cap-flag[data-cap="image"]        { background: #fff1f2; color: #da1c46; border: 1px solid #fecdd3; }
.cap-flag[data-cap="video"]        { background: #f5f3ff; color: #7c3aed; border: 1px solid #ddd6fe; }
.cap-flag[data-cap="coding"]       { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.cap-flag[data-cap="chatbot"]      { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.cap-flag[data-cap="writing"]      { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
.cap-flag[data-cap="music"]        { background: #fff7ed; color: #ea580c; border: 1px solid #fed7aa; }
.cap-flag[data-cap="research"]     { background: #f0fdfa; color: #0d9488; border: 1px solid #99f6e4; }
.cap-flag[data-cap="productivity"] { background: #f8fafc; color: #475569; border: 1px solid #cbd5e1; }

/* VERSUS BADGE — unique to Nesyona */
.vs-badge { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 0.75rem; font-weight: 600; background: var(--dark); color: #fff; padding: 0.375rem 0.875rem; border-radius: 100px; }
.vs-badge .vs { color: var(--accent); font-weight: 800; }


/* ═══════════════════════════════════════════════════════════════
   ENTERPRISE-GRADE COMPONENTS — appended 2026-05-16 from seed-template/styles.css.
   Maps to ENTERPRISE-GRADE-STANDARD.md patterns 2-8 + 10.
   Site-local :root fallbacks defined below for variables this site lacks.
   ═══════════════════════════════════════════════════════════════ */
:root{--secondary:#b45309;--secondary-light:#fef3c7;--secondary-hover:#92400e;--shadow-sm:0 1px 3px rgba(0,0,0,.06)}
/* ═══════════════════════════════════════════════════════════════
   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}}
@media print{.cred-strip,.method-grid,.anchor-mock,.advisory,.eyebrow{display:none}}

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


/* ══════════════════════════════════════════════════════════════════════
   VISUAL DIGESTIBILITY LAYER (.article-wrap, canonized 2026-06-30)
   Nesyona-palette port of the light system: rose #e11d48 + amber #f59e0b
   on paper. Same component class vocabulary network-wide. Per-article
   bespoke graphics add CONTENT; this provides STYLE + motion + grids.
   ══════════════════════════════════════════════════════════════════════ */
.article-wrap .lc-illus{max-width:560px;margin:1.7rem auto .7rem;display:block}
.article-wrap .lc-illus svg{width:100%;height:auto;display:block;filter:drop-shadow(0 12px 26px rgba(225,29,72,.16))}
.article-wrap h2{position:relative;padding-left:1.05rem}
.article-wrap h2::before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:5px;border-radius:3px;background:linear-gradient(180deg,#e11d48,#f59e0b)}
.article-wrap .article-intro,.article-wrap p.lede{font-size:1.14rem;line-height:1.75;color:var(--text)}
.article-wrap .pq{margin:2.2rem 0;padding:.3rem 0 .3rem 1.5rem;border-left:4px solid #e11d48;font-family:var(--display),Georgia,serif;font-weight:700;font-size:clamp(1.2rem,2.5vw,1.6rem);line-height:1.38;color:var(--dark);letter-spacing:-.01em}
.article-wrap .pq .hl{background:linear-gradient(90deg,#e11d48,#f59e0b);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.article-wrap .pq .src{display:block;margin-top:.55rem;font-family:var(--mono),monospace;font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.article-wrap .lc-split{display:grid;grid-template-columns:1fr 1fr;margin:1.7rem 0;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#fff}
.article-wrap .lc-split figcaption{grid-column:1/-1;order:2;font-size:.79rem;color:var(--text-light);line-height:1.55;padding:.85rem 1.2rem;background:var(--paper);border-top:1px solid var(--border)}
.article-wrap .lc-split .pane{padding:1.3rem 1.35rem}
.article-wrap .lc-split .a{background:linear-gradient(160deg,#fff1f2,#fff)}
.article-wrap .lc-split .b{background:linear-gradient(160deg,#fffbeb,#fff);border-left:1px solid var(--border)}
.article-wrap .lc-split .ph{font-family:var(--mono),monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 .2rem;font-weight:700}
.article-wrap .lc-split .a .ph{color:#be123c}
.article-wrap .lc-split .b .ph{color:#b45309}
.article-wrap .lc-split .sub{font-size:.76rem;color:var(--text-light);margin:0 0 .85rem}
.article-wrap .lc-split .chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.85rem}
.article-wrap .lc-split .chip{font-family:var(--mono),monospace;font-size:10px;color:var(--text);background:#fff;border:1px solid var(--border);border-radius:5px;padding:.22rem .52rem}
.article-wrap .lc-split .big{font-family:var(--display),Georgia,serif;font-weight:800;font-size:1.16rem;margin:.1rem 0 .55rem;letter-spacing:-.02em}
.article-wrap .lc-split .a .big{color:#be123c}
.article-wrap .lc-split .b .big{color:#b45309}
.article-wrap .lc-split .tags{margin:0;font-size:.84rem;color:var(--text);line-height:1.85}
.article-wrap .lc-split .tags .t{display:flex;align-items:flex-start;gap:.45rem}
.article-wrap .lc-split .tags .t::before{content:"";width:5px;height:5px;border-radius:50%;flex:none;margin-top:.5em}
.article-wrap .lc-split .a .tags .t::before{background:#e11d48}
.article-wrap .lc-split .b .tags .t::before{background:#f59e0b}
.article-wrap .key{display:flex;gap:.9rem;align-items:flex-start;margin:1.8rem 0;padding:1.05rem 1.2rem;background:linear-gradient(135deg,#fff1f2,#fffbeb);border:1px solid #fecdd3;border-radius:13px}
.article-wrap .key .ic{flex:none;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#e11d48,#f59e0b);font-family:var(--display),Georgia,serif;font-weight:800;color:#fff;font-size:1rem}
.article-wrap .key .kt{margin:0;color:var(--text);font-size:.94rem;line-height:1.62}
.article-wrap .key .kt b{color:var(--dark)}
.article-wrap .shot{margin:1.8rem 0;border:1px solid var(--border);border-radius:13px;overflow:hidden;background:#fff;box-shadow:0 8px 28px rgba(24,24,27,.08)}
.article-wrap .shot .bar{display:flex;align-items:center;gap:.5rem;padding:.55rem .85rem;background:var(--paper);border-bottom:1px solid var(--border)}
.article-wrap .shot .bar i{width:9px;height:9px;border-radius:50%;background:#d4d4d8;display:inline-block}
.article-wrap .shot .bar .u{margin-left:.6rem;font-family:var(--mono),monospace;font-size:11px;color:var(--muted)}
.article-wrap .shot img{display:block;width:100%;height:auto}
.article-wrap .shot figcaption{font-size:.8rem;color:var(--text-light);line-height:1.5;padding:.7rem .95rem;border-top:1px solid var(--border)}
.article-wrap .crm-dash{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin:1.9rem 0 .6rem}
.article-wrap .crm-dash .dcard{background:#fff;border:1px solid var(--border);border-radius:14px;padding:1.05rem 1.1rem 1.15rem;box-shadow:0 8px 24px rgba(24,24,27,.06);display:flex;flex-direction:column}
.article-wrap .crm-dash .dh{font-family:var(--mono),monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 .7rem}
.article-wrap .crm-dash .dsub{font-size:.73rem;color:var(--text-light);margin:.7rem 0 0;line-height:1.4}
.article-wrap .gauge{position:relative;width:104px;height:104px;margin:.1rem auto .1rem}
.article-wrap .gauge svg{transform:rotate(-90deg)}
.article-wrap .gauge .ring{fill:none;stroke:#fde7ea;stroke-width:10}
.article-wrap .gauge .prog{fill:none;stroke:url(#gaugeg);stroke-width:10;stroke-linecap:round;stroke-dasharray:283;stroke-dashoffset:283;animation:gFill 1.9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes gFill{to{stroke-dashoffset:23}}
.article-wrap .gauge .num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.article-wrap .gauge .num b{font-family:var(--display),Georgia,serif;font-size:1.75rem;font-weight:800;color:#be123c;line-height:1}
.article-wrap .gauge .num em{font-family:var(--mono),monospace;font-size:7.5px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;font-style:normal;margin-top:.15rem}
.article-wrap .pbars{display:flex;flex-direction:column;gap:.5rem;padding:.55rem 0;flex:1;justify-content:center}
.article-wrap .pbar{height:13px;border-radius:7px;background:linear-gradient(90deg,#e11d48,#f59e0b);transform-origin:left;transform:scaleX(0);animation:pGrow 1.3s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes pGrow{to{transform:scaleX(1)}}
.article-wrap .echips{display:flex;flex-wrap:wrap;gap:.4rem;padding:.5rem 0;flex:1;align-content:center}
.article-wrap .echip{font-family:var(--mono),monospace;font-size:10px;color:#15803d;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:6px;padding:.26rem .55rem;display:flex;align-items:center;gap:.32rem;opacity:0;animation:eIn .5s ease forwards}
.article-wrap .echip::before{content:"";width:5px;height:5px;border-radius:50%;background:#22c55e;flex:none}
@keyframes eIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.article-wrap .verdict-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin:1.9rem 0}
.article-wrap .vcard{background:#fff;border:1px solid var(--border);border-radius:13px;padding:1.1rem 1.15rem;border-top:3px solid #e11d48;transition:transform .2s,box-shadow .2s}
.article-wrap .vcard:hover{transform:translateY(-4px);box-shadow:0 16px 34px -14px rgba(225,29,72,.4)}
.article-wrap .vcard.top{background:linear-gradient(160deg,#fff1f2,#fff)}
.article-wrap .vcard .vt{font-family:var(--mono),monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.article-wrap .vcard .vn{font-family:var(--display),Georgia,serif;font-weight:800;font-size:1.18rem;color:#be123c;letter-spacing:-.02em;margin-bottom:.35rem}
.article-wrap .vcard .vd{font-size:.85rem;color:var(--text);line-height:1.5}
.article-wrap .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.article-wrap .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.article-wrap .reveal{opacity:1;transform:none;transition:none}}
@media(max-width:760px){.article-wrap .crm-dash,.article-wrap .verdict-grid{grid-template-columns:1fr}}
@media(max-width:680px){.article-wrap .lc-split{grid-template-columns:1fr}.article-wrap .lc-split .b{border-left:0;border-top:1px solid var(--border)}}


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

/* ── WCAG AA CONTRAST, CONTEXT-SCOPED (2026-08-25) ───────────────────────────────────────────
   ⛔ A SINGLE COLOUR TOKEN CANNOT SATISFY AA AGAINST TWO OPPOSITE BACKGROUNDS, and measuring
   before editing is what caught it. Every "obvious" global fix here trades one failure for
   another, verified numerically:
     --text-light #71717a : 3.67 on the dark hero. Lighten to #80808a and the dark passes (4.53)
                            but LIGHT drops 4.63 -> 3.74.
     --accent     #e11d48 : 3.77 on the dark hero. Lighten and light drops 4.50 -> 3.73.
     --muted      #a1a1aa : 2.45 on paper. Darken to #727279 and paper passes (4.57) but the
                            dark sections drop 6.91 -> 3.71.
   ⭐ So the fix is per-ROLE, not per-token. These rules name the exact text roles that were
     measured failing, and none of them can touch a background: overriding the tokens themselves
     would also have restyled anything using --accent as a fill.
   Measured on nesyona.com/ and /articles/cursor-vs-github-copilot. */
.hero .stat-label, .stats .stat-label { color: #80808a; }   /* on #18181b: 3.67 -> 4.53 */
.hero .hero-eyebrow { color: #fa2050; }                      /* on #18181b: 3.77 -> 4.54 */
.breadcrumbs, .breadcrumbs a { color: #727279; }             /* on #fafaf9: 2.45 -> 4.57 */