/* ============================================================
 * AEW · Answer-Engine Widget Canon
 * Implements the 31-widget canon floor (TP + NP) for all
 * answer-engine doors at /marketing-atlas/answer-engine/*.
 *
 * Canon source: SC_BUILD_CANON.md §6, §7, §8
 * Locked: LL-2026-05-15-007 + LL-2026-05-15-011
 *
 * Required tokens (set on :root or .ae-page-root in each door):
 *   --navy, --navy-d, --accent (= --gold),
 *   --paper, --stone, --stone-2, --rule, --ink, --ink-500,
 *   --accent-bg, --mauve-100
 * ============================================================ */

:root {
  --accent: var(--gold, #C9A96E);
  --accent-bg: rgba(201, 169, 110, 0.10);
  --ink-500: var(--ink-2, #4A4A4A);
  --mauve-100: rgba(255, 255, 255, 0.78);
}

/* 01 · Section-jump TOC (sticky) */
.aew-toc { position: sticky; top: 0; z-index: 50; background: var(--navy); color: #fff; padding: 10px 24px; border-bottom: 2px solid var(--accent); font-family: 'Barlow Condensed', sans-serif; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.aew-toc-inner { max-width: 1200px; margin: 0 auto; display: flex; gap: 24px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; align-items: center; }
.aew-toc-inner::-webkit-scrollbar { display: none; }
.aew-toc a { color: rgba(255,255,255,0.78); font-weight: 700; letter-spacing: 0.08em; padding: 4px 0; border-bottom: 2px solid transparent; transition: border-color 200ms, color 200ms; text-decoration: none; }
.aew-toc a:hover { color: #fff; border-bottom-color: var(--accent); }
.aew-toc-label { color: var(--accent); font-weight: 700; }

/* 02 · Visible breadcrumb */
.aew-crumb { padding: 18px 24px; background: var(--stone); border-bottom: 1px solid var(--rule); }
.aew-crumb-inner { max-width: 1200px; margin: 0 auto; font-family: 'Barlow Condensed', sans-serif; font-size: 12.5px; letter-spacing: 0.06em; color: var(--ink-500); }
.aew-crumb a { color: var(--navy); text-decoration: none; }
.aew-crumb a:hover { color: var(--accent); }
.aew-crumb .sep { color: var(--accent); margin: 0 8px; }

/* 03 · Margin glyph system */
.aew-glyph { display: inline-block; width: 28px; height: 28px; background: var(--accent); color: #fff; font-family: 'Bebas Neue', sans-serif; font-size: 16px; text-align: center; line-height: 28px; letter-spacing: 0; margin-right: 14px; vertical-align: middle; clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%); }

/* 05 · Display moment (Bebas 180px) */
.aew-display { font-family: 'Bebas Neue', 'Oswald', Impact, sans-serif; font-weight: 400; font-size: clamp(72px, 15vw, 180px); line-height: 0.88; letter-spacing: -0.02em; color: var(--navy); text-transform: uppercase; margin: 0 0 28px 0; display: block; word-break: break-word; }
.aew-display em { font-style: normal; color: var(--accent); }
.aew-display.on-dark { color: #fff; }

/* 07 · Italic Fraunces dek (override hero-dek where used) */
.aew-italic-dek { font-family: 'Fraunces', 'DM Serif Display', Georgia, serif; font-style: italic; font-size: clamp(19px, 2vw, 23px); line-height: 1.55; color: var(--ink-500); max-width: 640px; margin: 0 0 36px 0; }
.aew-italic-dek.on-dark { color: rgba(255, 255, 255, 0.88); }

/* 08 · Big-stat block */
.aew-stat { background: var(--paper); border: 1px solid var(--rule); border-left: 4px solid var(--accent); padding: 32px 28px; max-width: 460px; }
.aew-stat-num { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(72px, 9vw, 128px); line-height: 0.95; letter-spacing: -0.02em; color: var(--accent); margin: 0 0 10px 0; }
.aew-stat-num small { font-size: 0.4em; color: var(--navy); font-weight: 700; letter-spacing: 0; margin-left: 4px; }
.aew-stat-label { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); margin: 0 0 12px 0; }
.aew-stat-cap { font-size: 14.5px; line-height: 1.55; color: var(--ink-500); margin: 0; }

/* 10 · LOUD counter-manifesto */
.aew-loud { background: var(--navy); color: #fff; padding: 96px 24px; position: relative; overflow: hidden; }
.aew-loud::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--accent); }
.aew-loud-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.aew-loud-tag { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin: 0 0 28px 0; }
.aew-loud-h { font-family: 'Bebas Neue', 'Oswald', Impact, sans-serif; font-weight: 400; font-size: clamp(40px, 7vw, 96px); line-height: 0.92; letter-spacing: -0.015em; color: #fff; margin: 0 0 28px 0; text-transform: uppercase; }
.aew-loud-h em { font-style: normal; color: var(--accent); }
.aew-loud-sub { font-family: 'Fraunces', 'DM Serif Display', Georgia, serif; font-style: italic; font-size: clamp(18px, 2vw, 22px); line-height: 1.5; color: rgba(255, 255, 255, 0.78); max-width: 680px; margin: 0 auto; }

/* 11 · Pull-quote with accent rule */
.aew-pull { font-family: 'Fraunces', 'DM Serif Display', Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.4; color: var(--navy); border-left: 4px solid var(--accent); padding: 8px 0 8px 28px; margin: 48px auto; max-width: 780px; }
.aew-pull-attr { display: block; margin-top: 18px; font-family: 'Barlow Condensed', sans-serif; font-style: normal; font-weight: 700; font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }

/* 12 · Stan-take inverted panel */
.aew-take { background: var(--navy); color: #fff; padding: 96px 24px; }
.aew-take-inner { max-width: 880px; margin: 0 auto; }
.aew-take-tag { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin: 0 0 24px 0; }
.aew-take h2 { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(32px, 4vw, 56px); line-height: 1.04; color: #fff; margin: 0 0 36px 0; }
.aew-take h2 em { font-family: 'Fraunces', 'DM Serif Display', Georgia, serif; font-style: italic; color: var(--accent); font-weight: 500; }
.aew-take p { font-size: 18px; line-height: 1.72; color: rgba(230, 219, 200, 0.92); margin: 0 0 20px 0; max-width: 760px; }
.aew-take .sig { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.15); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }

/* 13 · Custom SVG diagram wrapper */
.aew-diagram { padding: 64px 24px; background: var(--paper); border-bottom: 1px solid var(--rule); }
.aew-diagram-inner { max-width: 1100px; margin: 0 auto; }
.aew-diagram-eye { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px 0; }
.aew-diagram h2 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(28px, 3.4vw, 42px); color: var(--navy); margin: 0 0 32px 0; }
.aew-diagram svg { display: block; width: 100%; max-width: 920px; height: auto; margin: 0 auto; }
.aew-diagram-cap { font-family: 'Fraunces', 'DM Serif Display', Georgia, serif; font-style: italic; font-size: 14.5px; color: var(--ink-500); margin-top: 18px; text-align: center; }

/* 16 · Pull-moment callout */
.aew-moment { background: var(--accent-bg); padding: 36px 28px; margin: 40px auto; border-left: 6px solid var(--accent); display: grid; grid-template-columns: 1fr; gap: 14px; align-items: center; max-width: 1100px; }
@media (min-width: 760px) { .aew-moment { grid-template-columns: 200px 1fr; gap: 32px; } }
.aew-moment-num { font-family: 'Bebas Neue', sans-serif; font-size: clamp(72px, 10vw, 128px); line-height: 0.88; color: var(--accent); letter-spacing: -0.025em; margin: 0; }
.aew-moment-num small { font-size: 0.22em; color: var(--navy); display: block; letter-spacing: 0.12em; margin-top: 6px; font-weight: 700; text-transform: uppercase; }
.aew-moment-body { font-family: 'Fraunces', 'DM Serif Display', Georgia, serif; font-style: italic; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.5; color: var(--navy); margin: 0; }
.aew-moment-body p { margin: 0 0 10px 0; }
.aew-moment-body p:last-of-type { margin-bottom: 0; }
.aew-moment-body strong { font-family: 'Barlow Condensed', sans-serif; font-style: normal; font-weight: 700; display: block; margin-top: 14px; font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }

/* 17 · "What's inside" widget */
.aew-inside { background: var(--stone); padding: 64px 24px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.aew-inside-inner { max-width: 1100px; margin: 0 auto; }
.aew-inside-label { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px 0; }
.aew-inside-h { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(28px, 3.4vw, 40px); color: var(--navy); margin: 0 0 28px 0; letter-spacing: 0.005em; }
.aew-inside-list { display: grid; grid-template-columns: 1fr; gap: 14px; list-style: none; padding: 0; margin: 0; counter-reset: inside; }
@media (min-width: 760px) { .aew-inside-list { grid-template-columns: 1fr 1fr; } }
.aew-inside-list li { counter-increment: inside; padding: 16px 18px 16px 56px; background: var(--paper); border-left: 2px solid var(--accent); position: relative; font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.aew-inside-list li::before { content: "0" counter(inside); position: absolute; left: 18px; top: 14px; font-family: 'Bebas Neue', sans-serif; font-size: 22px; line-height: 1; color: var(--accent); letter-spacing: 0; }
.aew-inside-list a { color: var(--navy); text-decoration: none; border-bottom: 1px dotted var(--accent); }
.aew-inside-list a:hover { border-bottom-style: solid; }

/* 18 · 4-card grid (numerals first) */
.aew-why { padding: 64px 24px; background: var(--paper); border-bottom: 1px solid var(--rule); }
.aew-why-inner { max-width: 1200px; margin: 0 auto; }
.aew-why-label { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px 0; }
.aew-why-h { font-family: 'Bebas Neue', sans-serif; font-size: clamp(28px, 3.4vw, 40px); color: var(--navy); margin: 0 0 32px 0; }
.aew-why-grid { display: grid; grid-template-columns: 1fr; gap: 18px; counter-reset: why; }
@media (min-width: 760px) { .aew-why-grid { grid-template-columns: repeat(2, 1fr); } }
.aew-why-card { counter-increment: why; background: var(--stone); padding: 32px 28px 28px 28px; border-left: 3px solid var(--accent); position: relative; }
.aew-why-card::before { content: "0" counter(why); position: absolute; top: -14px; left: 20px; font-family: 'Bebas Neue', sans-serif; font-size: 56px; line-height: 1; color: var(--accent); letter-spacing: -0.02em; opacity: 0.6; }
.aew-why-card h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px; color: var(--navy); margin: 16px 0 12px 0; line-height: 1.25; letter-spacing: 0.01em; }
.aew-why-card p { font-size: 15px; line-height: 1.6; color: var(--ink); margin: 0; }

/* 15 · Split Q/A wall */
.aew-qa-wall { display: grid; grid-template-columns: 1fr; gap: 0; margin: 32px auto; max-width: 1100px; border-top: 1px solid var(--rule); }
.aew-qa-row { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 28px 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 760px) { .aew-qa-row { grid-template-columns: 1fr 1.4fr; gap: 32px; } }
.aew-qa-q { font-family: 'Fraunces', 'DM Serif Display', Georgia, serif; font-style: italic; font-size: clamp(17px, 1.8vw, 21px); line-height: 1.3; color: var(--navy); margin: 0; padding-left: 14px; border-left: 2px solid var(--accent); }
.aew-qa-a { font-size: 15.5px; line-height: 1.6; color: var(--ink); margin: 0; }
.aew-qa-a strong { color: var(--navy); }

/* 21 · Bot-nav 3-card grid */
.aew-botnav { padding: 64px 24px; background: var(--stone-2); border-top: 4px solid var(--accent); }
.aew-botnav-inner { max-width: 1200px; margin: 0 auto; }
.aew-botnav-eye { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px 0; }
.aew-botnav-h { font-family: 'Bebas Neue', sans-serif; font-size: clamp(28px, 3.4vw, 42px); color: var(--navy); margin: 0 0 28px 0; }
.aew-botnav-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 760px) { .aew-botnav-grid { grid-template-columns: repeat(3, 1fr); } }
.aew-botnav-card { display: block; background: var(--paper); padding: 28px 24px; border-top: 3px solid var(--accent); transition: transform 220ms; text-decoration: none; color: inherit; }
.aew-botnav-card:hover { transform: translateY(-3px); }
.aew-botnav-card .tag { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px 0; }
.aew-botnav-card h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 19px; color: var(--navy); margin: 0 0 8px 0; }
.aew-botnav-card .body { font-size: 14.5px; line-height: 1.55; color: var(--ink-500); margin: 0; }

/* 26 · Peters interrupt */
.aew-peters { padding: 64px 24px; background: var(--paper); text-align: center; border-top: 4px solid var(--accent); border-bottom: 4px solid var(--accent); margin: 0; }
.aew-peters-inner { max-width: 1100px; margin: 0 auto; }
.aew-peters-tag { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px 0; }
.aew-peters-h { font-family: 'Bebas Neue', 'Oswald', Impact, sans-serif; font-weight: 400; font-size: clamp(48px, 8vw, 110px); line-height: 0.9; letter-spacing: -0.02em; color: var(--navy); text-transform: uppercase; margin: 0; }
.aew-peters-h em { font-style: italic; color: var(--accent); font-family: 'Fraunces', 'DM Serif Display', Georgia, serif; font-weight: 500; }
.aew-peters-attr { font-family: 'Fraunces', 'DM Serif Display', Georgia, serif; font-style: italic; font-size: 18px; color: var(--ink-500); margin: 18px 0 0 0; }

/* 27 · Bar-chart data viz */
.aew-chart { padding: 64px 24px; background: var(--stone); border-bottom: 1px solid var(--rule); }
.aew-chart-inner { max-width: 1100px; margin: 0 auto; }
.aew-chart-eye { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px 0; }
.aew-chart h2 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(28px, 3.4vw, 42px); color: var(--navy); margin: 0 0 24px 0; }
.aew-chart-bars { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 24px; }
.aew-chart-bar { display: grid; grid-template-columns: 200px 1fr 80px; gap: 18px; align-items: center; font-family: 'Barlow', sans-serif; font-size: 14px; }
@media (max-width: 760px) { .aew-chart-bar { grid-template-columns: 1fr; gap: 6px; } }
.aew-chart-bar-label { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.04em; color: var(--navy); text-transform: uppercase; }
.aew-chart-bar-track { background: #fff; height: 32px; border: 1px solid var(--rule); position: relative; }
.aew-chart-bar-fill { height: 100%; background: var(--accent); transition: width 600ms ease; }
.aew-chart-bar-fill.dim { background: #C4B89E; }
.aew-chart-bar-fill.alt { background: var(--navy); }
.aew-chart-bar-val { font-family: 'Bebas Neue', sans-serif; font-size: 28px; color: var(--accent); letter-spacing: -0.02em; text-align: right; }
.aew-chart-cap { font-family: 'Fraunces', 'DM Serif Display', Georgia, serif; font-style: italic; font-size: 14.5px; color: var(--ink-500); margin-top: 18px; }

/* 28 · Icon-driven step row */
.aew-steprow-wrap { padding: 64px 24px; background: var(--paper); border-bottom: 1px solid var(--rule); }
.aew-steprow-inner { max-width: 1200px; margin: 0 auto; }
.aew-steprow-eye { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px 0; }
.aew-steprow h2 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(28px, 3.4vw, 42px); color: var(--navy); margin: 0 0 32px 0; }
.aew-steprow { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 32px; }
@media (min-width: 760px) { .aew-steprow { grid-template-columns: repeat(4, 1fr); } }
.aew-step { background: var(--stone); padding: 28px 22px; border-top: 3px solid var(--accent); display: flex; flex-direction: column; align-items: center; text-align: center; }
.aew-step-icon { width: 64px; height: 64px; background: var(--accent); color: #fff; font-family: 'Bebas Neue', sans-serif; font-size: 36px; line-height: 64px; text-align: center; letter-spacing: -0.01em; margin: 0 auto 18px; clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%); }
.aew-step h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 16px; color: var(--navy); margin: 0 0 10px 0; line-height: 1.25; }
.aew-step p { font-size: 13.5px; line-height: 1.55; color: var(--ink-500); margin: 0; }

/* 29 · Secondary display moment */
.aew-display2 { padding: 48px 24px; background: var(--paper); border-bottom: 1px solid var(--rule); }
.aew-display2-inner { max-width: 1200px; margin: 0 auto; }
.aew-display2-line { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(56px, 11vw, 120px); line-height: 0.92; letter-spacing: -0.02em; color: var(--navy); text-transform: uppercase; margin: 0; }
.aew-display2-line em { font-style: italic; color: var(--accent); font-family: 'Fraunces', 'DM Serif Display', Georgia, serif; font-weight: 500; }
.aew-display2-rule { display: block; height: 4px; width: 80px; background: var(--accent); margin: 24px 0; }
.aew-display2-cap { font-family: 'Fraunces', 'DM Serif Display', Georgia, serif; font-style: italic; font-size: 17px; line-height: 1.5; color: var(--ink-500); max-width: 720px; margin: 0; }

/* 30 · Annotated callout flags */
.aew-flags { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 32px auto; max-width: 1100px; }
@media (min-width: 760px) { .aew-flags { grid-template-columns: repeat(3, 1fr); } }
.aew-flag { background: var(--accent-bg); padding: 18px 22px; border-left: 6px solid var(--accent); position: relative; }
.aew-flag-num { font-family: 'Bebas Neue', sans-serif; font-size: 48px; line-height: 1; color: var(--accent); letter-spacing: -0.02em; margin: 0 0 6px 0; }
.aew-flag-text { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 14px; line-height: 1.35; color: var(--navy); text-transform: uppercase; letter-spacing: 0.04em; margin: 0; }

/* 31 · Quote card */
.aew-quotecard { background: var(--paper); border: 1px solid var(--rule); padding: 36px 32px; margin: 40px auto; display: grid; grid-template-columns: 1fr; gap: 24px; max-width: 1000px; }
@media (min-width: 760px) { .aew-quotecard { grid-template-columns: 100px 1fr; gap: 32px; } }
.aew-quotecard-mark { font-family: 'Fraunces', 'DM Serif Display', Georgia, serif; font-size: 120px; line-height: 0.8; color: var(--accent); }
.aew-quotecard-body { font-family: 'Fraunces', 'DM Serif Display', Georgia, serif; font-style: italic; font-size: clamp(19px, 2.2vw, 24px); line-height: 1.45; color: var(--navy); }
.aew-quotecard-attr { display: block; margin-top: 18px; font-family: 'Barlow Condensed', sans-serif; font-style: normal; font-weight: 700; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }

/* MOBILE breakouts */
@media (max-width: 760px) {
  .aew-loud { padding: 64px 18px; }
  .aew-loud-h { font-size: clamp(36px, 10vw, 64px); }
  .aew-take { padding: 64px 18px; }
  .aew-peters { padding: 48px 18px; }
  .aew-peters-h { font-size: clamp(36px, 12vw, 64px); }
  .aew-chart { padding: 48px 18px; }
  .aew-display2 { padding: 32px 18px; }
  .aew-display2-line { font-size: clamp(44px, 12vw, 72px); }
  .aew-display { font-size: clamp(56px, 14vw, 96px); }
  .aew-botnav { padding: 48px 18px; }
}