/* 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: #7c6af7;
  --accent-light: #f0edff;
  --accent-hover: #6955e0;
  --partner: #0891b2;
  --partner-light: #ecfeff;
  --partner-hover: #0e7490;
  --paper: #fafaf9;
  --dark: #18181b;
  --dark-mid: #27272a;
  --muted: #a1a1aa;
  --text: #3f3f46;
  --text-light: #7d7d87;  /* 4.97/4.85/4.70 on this property's dark surfaces (2026-08-25) */
  --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;
}

*, *::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 */
/* ⛔ THIS SELECTOR IS BARE `nav`, SO IT ALSO CATCHES THE FOOTER NAV. The header nav has three
   children and fits; the static Lattice footer block is `<nav aria-label="Footer">` with NINE links,
   and a non-wrapping flex row of nine links is wider than a phone. Measured 2026-08-25 by
   `mobile-check.mjs` at 390px: 162px of horizontal overflow on a new article and 303px on existing
   ones, with the offenders reported as `<a>` elements whose parent is `nav`.
   ⭐ THE MISREAD WORTH RECORDING: the obvious suspect was `.nav-links`, which ALREADY hides at
   768px and was doing its job correctly the whole time. The rule that needed fixing was the one
   that never mentioned navigation links at all. `flex-wrap` costs nothing on the header. */
nav { display: flex; flex-wrap: wrap; 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: var(--accent); 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: #71717a; 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(124,106,247,0.10); 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: var(--muted); }
.breadcrumbs a { color: var(--text-light); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); }
.article-wrap { max-width: min(720px, 100%); min-width: 0; 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
   ⛔ 2026-08-26: this sheet carried ONLY `min-height:90px`, so every UNFILLED slot reserved 90px of
   blank space. Measured live: 304 empty `.ad-zone` divs across 81 articles, ~27,000px of dead
   scroll. The correct three-rule pattern already existed in `styles.css` (lines 220-222)  - but
   ARTICLES DO NOT LOAD `styles.css`, they load this file. The fix was written once, in the wrong
   sheet, and was invisible because the rule that was missing renders as empty space, not as an error.
   ★ Lifted verbatim from the property's own standard rather than reinvented. Same defect shape as
   OTR-691 (`.data-table` cell defaults) and OTR-698: a rule can exist on the property and still not
   reach the page. Reserve height only when a slot is actually filled. */
.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; }

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

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   INFORMATION-DESIGN COMPONENT SET  - ported to BagEngine 2026-08-26
   Doctrine: lattice-core/LATTICE-INFORMATION-DESIGN-STANDARD.md
   ⭐ THE RULE: any quantity that exists to be compared against another quantity must be rendered
      SPATIALLY, not in a sentence. Prose is serial; length, position and colour are pre-attentive.
   ⛔ PORTED VERBATIM from nesyona-digest.css (the reference implementation, 49 rules) rather than
      reinvented. Only the SIX missing tokens below are new, and each resolves to BagEngine's own
      palette  - Rule 1 forbids a component shipping its own colours, because that is what makes a
      component un-adoptable by a second property.
   ⚠️ `.ix-step` / `.ix-tool` / `.ix-month` already exist on this property and are UNRELATED to this
      set. No selector here collides with them; this block is purely additive.
   ⛔ The GROUND layer (§5) is deliberately NOT ported. BagEngine declares --paper:#fafaf9 and body
      copy sits directly on it; §5 records that deepening the base broke AA on twelve elements at
      once. Depth here comes from --lift-1/--lift-2 and the hairline, not from toning the ground.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
:root{
  --surface:#fff;
  --hairline:rgba(24,24,27,.11);
  --lift-1:0 1px 3px rgba(24,24,27,.06);
  --lift-2:0 4px 16px rgba(24,24,27,.09);
  --measure:68ch;
  --measure-tight:60ch;
}
.ix-box,.ix-door,.ix-dead,.ix-note{background:var(--surface)}
.ix-box{box-shadow:var(--lift-2);border-color:var(--hairline)}
.ix-door,.ix-note{box-shadow:var(--lift-1);border-color:var(--hairline)}
.ix-dead{background:linear-gradient(180deg,#fff,#f7f6f4);box-shadow:var(--lift-1)}
.ix-note{border:1px solid var(--hairline);border-radius:12px;padding:1.25rem 1.4rem;margin:1.4rem 0}
.ix-note h3{margin:0 0 .5rem;font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--dark)}
.ix-note p{margin:0;font-size:.93rem;line-height:1.72;color:var(--text);max-width:66ch}
.ix-note p + p{margin-top:.7rem}
.ix-tag{display:inline-block;margin-bottom:.55rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;color:var(--text);background:var(--cream);border:1px solid var(--hairline);border-radius:4px;padding:.18rem .45rem}
.ix-dek{max-width:var(--measure-tight);font-size:.95rem;line-height:1.6;color:var(--text);margin:0 0 1.2rem}
.ix-src{font-family:var(--mono);font-size:.67rem;letter-spacing:.03em;color:var(--text);opacity:.7;margin:.7rem 0 0}
/* ── .ix-ladder  - position IS the quantity ── */
.ix-ladder{margin:.5rem 0 1rem;font-variant-numeric:tabular-nums;max-width:730px}
.ix-row{display:grid;grid-template-columns:172px 1fr 96px;align-items:center;gap:.85rem;padding:.28rem 0}
.ix-row .lbl{text-align:right;font-size:.875rem;font-weight:500;color:var(--dark);line-height:1.22;letter-spacing:-.005em}
.ix-row .lbl i{display:block;font-style:normal;font-weight:400;font-size:.7rem;line-height:1.3;margin-top:.12rem;color:var(--text);opacity:.72;font-variant-numeric:tabular-nums}
.ix-row .bar{height:24px;border-radius:4px;background:var(--accent-fill,var(--accent));min-width:3px}
/* ⛔ ZERO MUST LOOK LIKE ZERO. A free tier drawn full-width made the CHEAPEST plan the LONGEST bar
   on a chart where length encodes price  - an INVERTED encoding the reader must consciously override. */
.ix-row .bar.free{background:transparent;border:0;min-width:0;display:flex;align-items:center;gap:.4rem}
.ix-row .bar.free::before{content:"";width:3px;height:24px;border-radius:2px;background:var(--accent-fill,var(--accent))}
.ix-row .bar.free::after{content:"free";font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink,var(--accent))}
.ix-row .amt{font-family:var(--mono);font-size:.85rem;font-weight:600;color:var(--dark);font-variant-numeric:tabular-nums;text-align:right;padding-right:.15rem;letter-spacing:-.01em}
.ix-row.alt .bar{background:color-mix(in srgb,var(--accent) 55%,transparent)}
/* ── .ix-box  - two-panel contrast, one side drawn as UNKNOWN ── */
.ix-box{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:12px;overflow:hidden;margin:1.5rem 0}
.ix-box>div{background:var(--surface);padding:1.25rem 1.35rem}
.ix-box h3,.ix-box h4{margin:0 0 .15rem;font-family:var(--display);font-size:1.02rem;color:var(--dark)}
.ix-box .sub{font-family:var(--mono);font-size:.655rem;letter-spacing:.085em;text-transform:uppercase;color:var(--text);opacity:.78;margin-bottom:.9rem}
.ix-box .unit{font-family:var(--display);font-weight:800;font-size:1.55rem;line-height:1;color:var(--dark);letter-spacing:-.025em}
.ix-box .eq{margin-top:.75rem;font-family:var(--mono);font-size:.8rem;color:var(--text);line-height:1.9;font-variant-numeric:tabular-nums;padding:.55rem .7rem;background:var(--cream);border:1px solid var(--hairline);border-radius:7px}
.ix-box .note{margin-top:.8rem;font-size:.82rem;line-height:1.55;color:var(--text)}
.ix-box .q{border-left:3px solid var(--accent);padding-left:.7rem;margin-top:.75rem;font-size:.8rem;line-height:1.5;color:var(--text)}
/* ⛔ THE UNKNOWN IS DRAWN AS UNKNOWN  - never omitted, never guessed, never blank. */
.ix-box .unknown{background-image:repeating-linear-gradient(45deg,var(--hairline) 0 1px,transparent 1px 9px);border-style:dashed}
.ix-box .unknown .unit{color:var(--text);opacity:.85}
/* ── .ix-triage  - N doors, each labelled by the DECIDING attribute ── */
.ix-triage{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:.9rem;margin:1.5rem 0}
.ix-door{border:1px solid var(--hairline);border-top:3px solid var(--accent);border-radius:10px;padding:1.05rem 1.15rem}
.ix-door .if{font-family:var(--mono);font-size:.655rem;letter-spacing:.085em;text-transform:uppercase;color:var(--text);opacity:.78}
.ix-door .then{font-family:var(--display);font-weight:800;font-size:1.12rem;color:var(--dark);margin:.35rem 0 .1rem}
.ix-door .price{font-family:var(--mono);font-size:.86rem;color:var(--accent-ink,var(--accent));font-weight:600;font-variant-numeric:tabular-nums}
.ix-door p{margin:.55rem 0 0;font-size:.85rem;line-height:1.6;color:var(--text)}
/* ── .ix-more  - depth on demand ── */
.ix-more{border:0;border-top:1px solid var(--hairline);margin:1.1rem 0 0;padding:0}
.ix-more>summary{cursor:pointer;list-style:none;padding:.7rem 0 0;font-family:var(--mono);font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-ink,var(--accent))}
.ix-more>summary::-webkit-details-marker{display:none}
.ix-more>summary::after{content:" +"}
.ix-more[open]>summary::after{content:" \2212"}
.ix-more p{font-size:.94rem;line-height:1.75;color:var(--text);max-width:var(--measure)}
@media(max-width:760px){
  .ix-box{grid-template-columns:1fr}
  .ix-row{grid-template-columns:100px 1fr 76px;gap:.5rem}
  .ix-row .lbl{font-size:.76rem}
  .ix-row .lbl i{font-size:.66rem}
}
/* ⛔ Rule 4: nothing that carries information animates. */
@media(prefers-reduced-motion:reduce){.ix-row .bar{transition:none}}

/* ── .chips / .chip promoted to an UNSCOPED component, 2026-08-26 ──────────────────────────────
   ⛔ These rules already existed on this property but ONLY as `.article-wrap .lc-split .chip`.
   Used outside an `.lc-split` container they matched NOTHING: the spans rendered unstyled and
   inline, and a 390px viewport overflowed by 73px because nothing was telling them to wrap.
   ★ THIRD TIME THIS SESSION THE SAME SHAPE BIT: a rule can exist on the property and still not
     reach the page. Grepping for `.chip` proves the string exists; it does not prove the SELECTOR
     matches your markup. Read the whole selector, not the class you were looking for.
   Values lifted verbatim from the scoped original so the two render identically; the only
   additions are the wrap guards that stop a long label overflowing a phone. */
.chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.85rem;max-width:100%}
.chip{font-family:var(--mono,monospace),monospace;font-size:10px;color:var(--text,#44403c);background:#fff;border:1px solid var(--border,#e7e5e4);border-radius:5px;padding:.22rem .52rem;max-width:100%;overflow-wrap:anywhere}