*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f8fafc; color: #1e293b; min-height: 100vh; }

/* ── Header ── */
.header { background: #fff; border-bottom: 1px solid #e2e8f0; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 10; }
.header-left h1 { font-size: 17px; font-weight: 700; color: #0f172a; }
.header-left p { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.btn { padding: 8px 16px; font-size: 13px; font-weight: 500; border-radius: 8px; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.btn-primary { background: #2563eb; color: #fff; }
.btn-primary:hover { background: #1d4ed8; }
.btn-primary:disabled { opacity: 0.55; cursor: default; }

/* ── Login overlay ── */
#login-screen { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #f8fafc; }
.login-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 40px 36px; width: 340px; box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.login-card h2 { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.login-card p { font-size: 13px; color: #64748b; margin-bottom: 24px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 12px; font-weight: 500; color: #475569; margin-bottom: 6px; }
.form-group input { width: 100%; padding: 9px 12px; font-size: 14px; border: 1px solid #cbd5e1; border-radius: 8px; outline: none; }
.form-group input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.login-error { font-size: 12px; color: #ef4444; margin-top: 10px; min-height: 18px; }
#login-screen.hidden, #dashboard-screen.hidden { display: none !important; }
.hidden { display: none !important; }

/* ── Main body ── */
#dashboard-screen { display: block; }
.body { max-width: 960px; margin: 0 auto; padding: 0 24px 64px; }

/* ── States ── */
.state-center { display: flex; align-items: center; justify-content: center; min-height: 60vh; }
.spinner { width: 32px; height: 32px; border: 3px solid #e2e8f0; border-top-color: #2563eb; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.error-box { text-align: center; }
.error-box p { color: #ef4444; font-weight: 500; }
.error-box span { font-size: 13px; color: #94a3b8; }

/* ── Section headers ── */
.section-head { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #64748b; border-bottom: 1px solid #e2e8f0; padding-bottom: 6px; margin: 32px 0 12px; }

/* ── Cards ── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
/* Acquisition carries six cards; a slightly tighter track keeps them on one
   row at full width while still reflowing on narrow screens. */
.grid.six { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px 16px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.card-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; }
.card-value { font-size: 26px; font-weight: 700; color: #0f172a; margin-top: 4px; line-height: 1; }
.card-sub { font-size: 11px; color: #94a3b8; margin-top: 3px; }

/* ── Sparkline panel ── */
.chart-panel { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px 16px; margin-top: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.chart-panel .chart-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; margin-bottom: 10px; }
.chart-panel svg { display: block; }
.chart-dates { display: flex; justify-content: space-between; font-size: 10px; color: #94a3b8; margin-top: 4px; }

/* ── Tier / plan distribution ── */
.dist-panel { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px 16px; margin-top: 10px; }
.dist-panel .chart-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; margin-bottom: 12px; }
.dist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; text-align: center; }
.dist-item .dist-val { font-size: 22px; font-weight: 700; color: #0f172a; }
.dist-item .dist-lbl { font-size: 10px; color: #94a3b8; margin-top: 2px; }

/* ── Period-over-period delta ──
   Direction is carried by the arrow glyph and the sign; colour only
   reinforces it, so the card still reads in greyscale. */
.delta { display: inline-flex; align-items: baseline; gap: 5px; }
.delta .arw { font-size: 17px; line-height: 1; }
.card-value.up   { color: #0a6b0a; }
.card-value.down { color: #a32020; }
.card-value.flat { color: #475569; }
/* Two label lines are reserved on every card so a longer label never
   pushes its value out of line with the rest of the row. */
.card-label { line-height: 1.3; min-height: 2.6em; }

/* ── Demo funnel: horizontal bars on a common baseline ──
   Length from a shared origin is the most accurately read encoding, and
   it lets stage names sit unwrapped beside their bars. Colour is one
   ordered 5-step blue ramp, not five categories. */
.fnl { display: flex; flex-direction: column; gap: 7px; }
.fnl-head, .fnl-row { display: grid; grid-template-columns: 150px 1fr 30px 46px 44px; gap: 12px; align-items: center; }
.fnl-head { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #cbd5e1; margin-bottom: 8px; }
.fnl-head span:nth-child(n+3) { text-align: right; }
.fnl-lbl { font-size: 12px; color: #475569; white-space: nowrap; }
.fnl-lbl b { color: #94a3b8; font-weight: 600; font-size: 10.5px; margin-right: 5px; }
.fnl-track { background: #eef3fa; border-radius: 4px; height: 22px; overflow: hidden; }
.fnl-bar { height: 100%; border-radius: 0 4px 4px 0; }
/* Validated 5-step ordinal blue ramp — monotone lightness, single hue,
   light end clears 2:1 on white. Shared by both funnel sizes. */
.fnl-bar.s1, .sm-bar.s1 { background: #0d366b; }
.fnl-bar.s2, .sm-bar.s2 { background: #184f95; }
.fnl-bar.s3, .sm-bar.s3 { background: #256abf; }
.fnl-bar.s4, .sm-bar.s4 { background: #3987e5; }
.fnl-bar.s5, .sm-bar.s5 { background: #6da7ec; }
.fnl-n { font-size: 14px; font-weight: 700; color: #0f172a; text-align: right; font-variant-numeric: tabular-nums; }
.fnl-n.zero { color: #94a3b8; font-weight: 600; }
.fnl-pct { font-size: 11.5px; color: #94a3b8; text-align: right; font-variant-numeric: tabular-nums; }
.fnl-lost { font-size: 11.5px; text-align: right; font-variant-numeric: tabular-nums; color: #cbd5e1; }
.fnl-lost.hit { color: #b4530f; font-weight: 600; }

/* Small multiples: same form, order and ramp as the overall funnel, so a
   reading transfers straight across. Bars are % of each demo's own leads
   so shapes compare; absolute counts are direct-labelled on every bar. */
.sm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px 22px; }
.sm { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 8px; }
.sm.quiet { background: #fbfcfe; }
.sm-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 3px; }
.sm-nm { font-size: 13px; font-weight: 700; color: #0f172a; }
.sm.quiet .sm-nm { color: #94a3b8; font-weight: 600; }
.sm-n { font-size: 11px; color: #94a3b8; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sm-row { display: grid; grid-template-columns: 62px 1fr 16px; align-items: center; gap: 8px; }
.sm-lbl { font-size: 10.5px; color: #94a3b8; white-space: nowrap; }
.sm-track { background: #eef3fa; border-radius: 3px; height: 13px; overflow: hidden; }
.sm-bar { height: 100%; border-radius: 0 3px 3px 0; }
.sm-v { font-size: 11px; color: #475569; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.sm-v.zero { color: #cbd5e1; font-weight: 500; }
.sm-ft { margin-top: 5px; padding-top: 7px; border-top: 1px solid #f1f5f9; display: flex; flex-wrap: wrap; gap: 5px; }
.sm-empty { font-size: 11.5px; color: #cbd5e1; padding: 6px 0 2px; }

.pill { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .03em; padding: 1px 7px; border-radius: 10px; white-space: nowrap; }
.pill.pre   { background: #fdf4e0; color: #8a5a08; border: 1px solid #eccf8e; }
.pill.led   { background: #e6f4e6; color: #0a6b0a; border: 1px solid #a9d9a9; }
.pill.no    { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; }
.pill.stall { background: #fbeaea; color: #962929; border: 1px solid #eab6b6; }

.note { display: grid; grid-template-columns: 16px 1fr; gap: 10px; border-radius: 8px; padding: 11px 14px; margin-top: 10px; font-size: 12.5px; line-height: 1.5; background: #fdf4e0; border: 1px solid #eccf8e; color: #6b4708; }
.note.ok { background: #eef7ee; border-color: #b6dcb6; color: #2c5c2c; }
.note svg { width: 15px; height: 15px; margin-top: 2px; }
.note b { color: #4a3105; }
.note.ok b { color: #143d14; }

.lead-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.lead-tbl th { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; text-align: left; padding: 0 10px 8px; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
.lead-tbl th.r, .lead-tbl td.r { text-align: right; }
.lead-tbl td { padding: 9px 10px; border-bottom: 1px solid #f1f5f9; color: #475569; font-variant-numeric: tabular-nums; }
.lead-tbl tr:last-child td { border-bottom: none; }
.lead-tbl td.name { color: #0f172a; font-weight: 600; }
.table-scroll { overflow-x: auto; }

/* ── Monetization placeholder ── */
.mono-note { font-style: italic; color: #94a3b8; font-size: 13px; margin-bottom: 12px; }
.mono-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; text-align: center; }
.mono-item .mono-val { font-size: 22px; font-weight: 700; color: #e2e8f0; }
.mono-item .mono-lbl { font-size: 10px; color: #cbd5e1; margin-top: 2px; }

/* ══════════════ Web Analytics sections ══════════════
   Token block is additive — the existing rules keep their literal hex; these
   tokens back the web-analytics classes below and the inline var() styles the
   render emits (bar widths carry a colour via style="…;background:var(--warn)").
   The dashboard is light-only, matching the rest of app.css. */
:root {
  --bg:#f8fafc; --surface:#fff; --border:#e2e8f0; --hair:#f1f5f9;
  --ink:#0f172a; --ink2:#1e293b; --muted:#64748b; --muted2:#94a3b8; --faint:#cbd5e1;
  --track:#eef3fa; --accent:#2563eb;
  --s1:#0d366b; --s2:#184f95; --s3:#256abf; --s4:#3987e5; --s5:#6da7ec;
  --up:#0a6b0a; --upbg:#eef7ee; --upbd:#b6dcb6; --uptx:#143d14;
  --down:#a32020; --flat:#475569;
  --warn:#8a5a08; --warnbg:#fdf4e0; --warnbd:#eccf8e;
  --wa-shadow:0 1px 3px rgba(0,0,0,.04);
}

/* Controls */
.wa-controls { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:8px 0 4px; }
.wa-controls .cap { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--muted2); }
.wa-selwrap { position:relative; display:inline-flex; }
.wa-select { appearance:none; -webkit-appearance:none; font:inherit; font-size:12px; font-weight:600; color:var(--ink2); background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:6px 30px 6px 12px; cursor:pointer; }
.wa-select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.wa-selwrap::after { content:"▾"; position:absolute; right:11px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--muted2); font-size:11px; }
.wa-seg { display:inline-flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; background:var(--surface); }
.wa-seg button { font:inherit; font-size:12px; font-weight:600; padding:6px 12px; border:none; background:transparent; color:var(--muted); cursor:pointer; }
.wa-seg button + button { border-left:1px solid var(--border); }
.wa-seg button.on { background:var(--accent); color:#fff; }
#web-loading { font-size:12px; color:var(--muted2); padding:8px 0; }

/* Overview */
.overview { position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--wa-shadow); padding:20px 24px 22px; margin-top:16px; }
.overview::before { content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--accent); }
.ov-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.ov-title { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink); }
.ov-title em { color:var(--muted2); font-weight:600; text-transform:none; letter-spacing:0; font-size:11px; font-style:normal; margin-left:8px; }
.ov-verdict { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:5px 13px; border-radius:20px; background:var(--upbg); color:var(--uptx); border:1px solid var(--upbd); }
.ov-verdict.down { background:#fbeaea; color:#7a1f1f; border-color:#eab6b6; }
.ov-verdict.flat { background:var(--track); color:var(--flat); border-color:var(--border); }
.ov-hero { display:grid; grid-template-columns:minmax(200px,.8fr) 1.6fr; gap:24px; align-items:center; padding-top:14px; }
.ov-k { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted2); }
.ov-num { font-size:56px; font-weight:800; line-height:.95; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.02em; margin:6px 0 8px; }
.ov-endnote { font-size:11px; color:var(--muted2); margin-top:10px; }
.movers { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.mover { display:inline-flex; align-items:center; gap:9px; font-size:12px; border:1px solid var(--border); border-radius:8px; padding:8px 13px; background:var(--bg); }
.mover .mtag { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted2); }
.mover b { color:var(--ink); }

/* Module */
.module { background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--wa-shadow); padding:20px 22px; margin-top:16px; }
.module.ref { background:transparent; box-shadow:none; border-style:dashed; }
.module-top { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.module-q { font-size:18px; font-weight:700; color:var(--ink); letter-spacing:-.01em; }
.module-sub { font-size:11.5px; color:var(--muted2); margin-top:3px; }
.module-stage { font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); border:1px solid var(--border); border-radius:20px; padding:4px 11px; white-space:nowrap; }

.hero { display:grid; grid-template-columns:minmax(190px,.85fr) 1.6fr; gap:24px; align-items:center; }
.hero-k { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted2); }
.hero-num { font-size:52px; font-weight:800; line-height:.95; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.02em; margin:6px 0 10px; }
.hero-take { font-size:12.5px; line-height:1.5; color:var(--muted); margin-top:12px; max-width:60ch; }
.hero-take b { color:var(--ink2); }
.hero-viz { min-width:0; }
.viz-cap { font-size:9.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--muted2); margin-bottom:8px; }
.wa-empty { font-size:12px; color:var(--muted2); padding:10px 0; }

/* Deltas: existing .delta sets layout; these add colour + sizing */
.delta { font-weight:700; font-variant-numeric:tabular-nums; }
.delta.up, .delta.good { color:var(--up); }
.delta.down, .delta.bad { color:var(--down); }
.delta.flat { color:var(--flat); }
.delta .cmp { color:var(--muted2); font-weight:500; font-size:10px; }
.hero .delta, .ov-hero .delta { font-size:15px; margin-top:4px; }
.hero .delta .arw, .ov-hero .delta .arw { font-size:19px; }

/* Detail tier */
.detail { margin-top:20px; border-top:1px solid var(--hair); padding-top:16px; }
.detail-cap { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--muted2); margin-bottom:12px; }
.chips { display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:14px 18px; }
.chip { min-width:0; }
.chip-k { font-size:10px; color:var(--muted2); font-weight:600; line-height:1.3; }
.chip-v { font-size:20px; font-weight:700; color:var(--ink2); font-variant-numeric:tabular-nums; margin-top:3px; line-height:1; }
.chip .delta { font-size:10.5px; margin-top:4px; }

/* Source tags */
.src { font-size:9px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:1px 5px; border-radius:4px; border:1px solid var(--border); color:var(--muted2); }
.src.ga { color:var(--s3); border-color:var(--s4); }
.src.sc { color:var(--warn); border-color:var(--warnbd); }
.src.db { color:var(--up); border-color:var(--upbd); }

/* Horizontal bars */
.bars { display:flex; flex-direction:column; gap:8px; }
.bar-row { display:grid; grid-template-columns:150px 1fr 150px; gap:12px; align-items:center; }
.bar-lbl { font-size:12px; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar-track { background:var(--track); border-radius:4px; height:20px; overflow:hidden; }
.bar-fill { height:100%; border-radius:0 4px 4px 0; }
.bar-fill.s1 { background:var(--s1); } .bar-fill.s2 { background:var(--s2); } .bar-fill.s3 { background:var(--s3); }
.bar-fill.s4 { background:var(--s4); } .bar-fill.s5 { background:var(--s5); }
.bar-val { font-size:12px; color:var(--muted); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.bar-val b { color:var(--ink); font-weight:700; }

/* Engaged split bar */
.splitbar { display:flex; height:38px; border-radius:8px; overflow:hidden; border:1px solid var(--border); background:var(--surface); }
.sb-seg { display:flex; align-items:center; padding:0 13px; font-size:12px; font-weight:700; white-space:nowrap; }
.sb-seg.eng { background:var(--s3); color:#fff; }
.sb-seg.left { background:var(--track); color:var(--muted); border-left:2px solid var(--surface); }

/* Funnel variants (base .fnl / .fnl-bar.sN already defined above) */
.fnl.leave .fnl-row { grid-template-columns:150px 1fr 52px 56px 70px; }
.fnl.mini .fnl-row { grid-template-columns:130px 1fr 52px 52px; }
.fnl-left { font-size:11.5px; font-weight:600; text-align:right; font-variant-numeric:tabular-nums; color:var(--faint); }
.fnl-left.hit { color:var(--warn); }

/* Sparkline */
.spark { width:100%; height:56px; display:block; overflow:visible; }
.spark-area { fill:var(--accent); fill-opacity:.09; stroke:none; }
.spark-line { fill:none; stroke:var(--accent); stroke-width:2.5; }
.spark-dot { fill:var(--accent); }

/* Module tables (bare <table>, distinct from .lead-tbl) */
.module table { width:100%; border-collapse:collapse; font-size:13px; }
.module th { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--muted2); text-align:left; padding:0 10px 8px; border-bottom:1px solid var(--border); white-space:nowrap; }
.module th.r, .module td.r { text-align:right; }
.module td { padding:9px 10px; border-bottom:1px solid var(--hair); color:var(--muted); font-variant-numeric:tabular-nums; }
.module tr:last-child td { border-bottom:none; }
.module td.name { color:var(--ink); font-weight:600; }

.foot { font-size:11px; color:var(--muted2); margin-top:12px; line-height:1.5; }
.foot b { color:var(--muted); }
code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em; background:var(--track); padding:1px 4px; border-radius:4px; }

@media (max-width:720px) {
  .ov-hero, .hero { grid-template-columns:1fr; gap:16px; }
}

/* ══════════════ Go-to-market sections ══════════════
   Built on the web-analytics tokens above and the existing card, chart-panel,
   lead-tbl and note styles, so the new group reads as part of the same page. */
#range-bar { margin-top: 28px; }
.wa-note { text-transform: none; letter-spacing: 0; font-weight: 500; }
.gtm-group { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 26px 0 4px; }
.gtm-group h2 { font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.gtm-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gtm-status { font-size: 12px; color: var(--muted); }
.btn.gtm-btn { background: var(--surface); color: var(--ink2); border: 1px solid var(--border); font-size: 12px; padding: 6px 12px; }
.btn.gtm-btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.gtm-btn:disabled { opacity: .55; cursor: default; }
.gtm-file { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#gtm-loading { font-size: 12px; color: var(--muted2); padding: 8px 0; }

.section-head.gtm-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.gtm-q { font-size: 14px; font-weight: 700; color: var(--ink); text-transform: none; letter-spacing: 0; }
.gtm-tags { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.gtm-pill { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .02em; padding: 1px 8px; border-radius: 10px; white-space: nowrap; text-transform: none; border: 1px solid var(--border); background: var(--hair); color: var(--muted); }
.gtm-pill.new  { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.gtm-pill.ok   { background: var(--upbg); color: var(--up); border-color: var(--upbd); }
.gtm-pill.warn { background: var(--warnbg); color: var(--warn); border-color: var(--warnbd); }
.gtm-pill.bad  { background: #fbeaea; color: #962929; border-color: #eab6b6; }

.gtm-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 10px; align-items: start; }
.gtm-hero > .chart-panel { margin-top: 0; }
.gtm-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.gtm-two > .chart-panel { min-width: 0; }
.gtm-of { font-size: 15px; color: var(--muted2); font-weight: 600; }
.gtm-lbl { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.gtm-lbl span:last-child { text-transform: none; letter-spacing: 0; font-weight: 500; }
.gtm-lbl a, .gtm-lbl label { text-transform: none; }
.gtm-up { color: var(--up); font-weight: 600; }
.gtm-down { color: var(--down); font-weight: 600; }
.gtm-flat { color: var(--flat); font-weight: 600; }
.gtm-empty { font-size: 13px; color: var(--muted); line-height: 1.6; }
.gtm-empty b { color: var(--ink2); }
.gtm-empty .gtm-btn { margin-left: 6px; }
.gtm-none, .gtm-foot { font-size: 12px; color: var(--muted2); margin-top: 8px; }
.faint { color: var(--muted2); font-size: 11px; }
.chart-panel a { color: var(--accent); text-decoration: none; }
.chart-panel a:hover { text-decoration: underline; }
.chart-panel code, .note code { font-size: 11.5px; background: var(--hair); padding: 1px 5px; border-radius: 4px; }

/* Bars on a common baseline — same encoding as the demo funnel. */
.gbar { display: flex; flex-direction: column; gap: 7px; }
.gbar-row { display: grid; grid-template-columns: minmax(96px, 170px) minmax(0, 1fr) 44px; gap: 10px; align-items: center; font-size: 12px; color: var(--flat); }
.gbar-track { background: var(--track); border-radius: 4px; height: 14px; overflow: hidden; }
.gbar-fill { height: 100%; border-radius: 0 4px 4px 0; background: var(--s2); }
.gbar-fill.s1 { background: var(--s1); } .gbar-fill.s2 { background: var(--s2); } .gbar-fill.s3 { background: var(--s3); }
.gbar-fill.s4 { background: var(--s4); } .gbar-fill.s5 { background: var(--s5); }
.gbar-fill.muted { background: var(--faint); }
.gbar-n { text-align: right; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

.gcols { display: flex; align-items: flex-end; gap: 6px; height: 90px; border-bottom: 1px solid var(--border); }
.gcol { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.gcol-bar { width: 100%; min-height: 2px; background: var(--s3); border-radius: 3px 3px 0 0; }
.gcols-x { display: flex; gap: 6px; font-size: 10px; color: var(--muted2); margin-top: 4px; }
.gcols-x span { flex: 1; text-align: center; white-space: nowrap; overflow: hidden; }

.gtm-comments { display: flex; flex-direction: column; gap: 10px; }
.gtm-cm { font-size: 12.5px; border-left: 2px solid var(--border); padding-left: 10px; color: var(--ink2); overflow-wrap: anywhere; }
.gtm-cm b { color: var(--ink); }
.gtm-hide { font: inherit; font-size: 11px; color: var(--muted); background: transparent; border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; cursor: pointer; }
.gtm-hide:hover { color: var(--down); border-color: #eab6b6; }
.lead-tbl td { overflow-wrap: anywhere; }

.gtm-tiles { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; }
.gtm-tile { aspect-ratio: 1; border: 1px dashed var(--faint); border-radius: 5px; display: grid; place-items: center; font-size: 10px; color: var(--muted2); font-variant-numeric: tabular-nums; }
.gtm-tile.on { border-style: solid; border-color: transparent; color: #fff; font-weight: 600; }
.gtm-tile.on.s1 { background: var(--s1); } .gtm-tile.on.s2 { background: var(--s2); } .gtm-tile.on.s3 { background: var(--s3); }
.gtm-tile.on.s4 { background: var(--s4); } .gtm-tile.on.s5 { background: var(--s5); color: var(--ink); }

.gtm-sources { margin-top: 12px; font-size: 12px; color: var(--muted); }
.gtm-sources summary { cursor: pointer; font-weight: 600; color: var(--ink2); padding: 4px 0; }
.gtm-sources .table-scroll { margin-top: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }

@media (max-width: 720px) {
  .gtm-hero, .gtm-two { grid-template-columns: minmax(0, 1fr); }
  .gtm-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .gbar-row { grid-template-columns: 96px minmax(0, 1fr) 36px; }
}