/* FIX_APPSHELL_COLLAPSE_S2A_2026_06_19 — the in-flow .crm-sidenav.crm-railnav collapse/sticky/
   hover-expand blocks (collapse 68px, sticky top:60px full-height, 68<->236 hover expand) for the
   11 specialist surfaces are DELETED (not suppressed). The 11 surfaces now mount the SHARED
   .viq-app-shell .vdd-qa-rail fixed-overlay rail (via mountAppShell), so this in-flow rail
   mechanism has no consumer (no element carries .crm-sidenav.crm-railnav anymore — the page nav
   hosts are bare <nav id="*-sidenav"> holding the shared aside; verified grep-zero on
   crm-railnav class emission in any render fn). The shared-rail collapse/sticky/hover form-factor
   lives at the .viq-app-shell .vdd-qa-rail block (L20057+). DELETE, not suppress (arc constraint). */

/* ═══════════════════════════════════════════════════════════════════════════
   FIX_ULTRAMARATHON_S0_MARKETING_2026_06_19 — Marketing Command Centre scoped CSS.
   The arc Step 0 representative-surface CSS, ported from
   design_samples/marketing/marketing_landing_command.html (.kpis / .panel / cal /
   att / popover idiom) and SCOPED under #page-marketing so it cannot leak into the
   shipped CRM/Financial/Risk/Sales surfaces. The shell tokens (--gold/--page/--card/
   --border/--green/--amber/--red/--blue/--text/--dim/--head/--inner-hi/--ease) are
   inherited from the portal :root — NOT re-declared. Everything renders HONEST-EMPTY
   by default (the marketing engine does not exist yet); the action affordances carry a
   .mkt-coming disabled treatment (HONEST-COMING, never wired to fire).
   ASCII-only comments throughout (a non-ASCII char silently drops the rule from the
   CSSOM — the established .crm-layout hazard). */
/* FIX_APPSHELL_COLLAPSE_S2C_2026_06_19 - content-offset uniformity: DELETE the legacy
   marketing-id-scoped crm-content padding:0 override (it zeroed the shared rail-budget offset
   -> content-start 0); the outer crm-content/vdd-page-railed now supplies the horizontal
   inset like sales. Inner mkt-scroll keeps ONLY vertical rhythm (horizontal dropped) so the
   restored outer offset is not doubled. Marketing now inherits the shared viq-app-shell
   vdd-page-railed offset (76 after the -28 content-frame bleed, see L19944). ASCII-only. */
#page-marketing .mkt-scroll { padding: 18px 0 26px; }

/* header block */
#page-marketing .mkt-head-row { display: flex; align-items: flex-end; gap: 16px; }
#page-marketing .mkt-head-row .mkt-when { font-size: 11.5px; color: var(--text-dim); padding-bottom: 2px; }
#page-marketing .mkt-statusline { display: flex; align-items: center; gap: 10px; margin: 10px 0 18px; font-size: 13.5px; color: var(--text); }
#page-marketing .mkt-statusline .mkt-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-dim); flex: none; }

/* KPI band */
#page-marketing .mkt-kpis { display: grid; grid-template-columns: repeat(6,1fr); gap: 13px; margin-bottom: 18px; }
#page-marketing .mkt-kpi {
  position: relative; overflow: hidden;
  background: linear-gradient(165deg,#262320,#1f1c19);
  border: 1px solid var(--border); border-radius: 14px; padding: 15px 16px 14px;
  box-shadow: 0 16px 34px -28px #000, var(--inner-hi);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
  cursor: pointer; outline: none;
}
#page-marketing .mkt-kpi:hover, #page-marketing .mkt-kpi:focus-visible { transform: translateY(-3px); border-color: rgba(255,255,255,0.13); box-shadow: 0 22px 44px -26px #000, 0 0 0 1px rgba(201,168,76,0.14), 0 0 26px -12px rgba(201,168,76,0.45); }
#page-marketing .mkt-kpi .mkt-lbl { font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-dim); font-weight: 700; margin-bottom: 7px; }
#page-marketing .mkt-kpi .mkt-val { font-family: 'Montserrat', sans-serif; font-size: 23px; font-weight: 800; color: var(--text-bright); line-height: 1; font-variant-numeric: tabular-nums; }
#page-marketing .mkt-kpi .mkt-val.empty { color: var(--text-dim); }
#page-marketing .mkt-kpi .mkt-sub { font-size: 11px; margin-top: 7px; color: var(--text-dim); }
#page-marketing .mkt-kpi .mkt-expand { position: absolute; right: 11px; bottom: 11px; width: 16px; height: 16px; opacity: .4; transition: opacity .2s var(--ease), transform .2s var(--ease); }
#page-marketing .mkt-kpi:hover .mkt-expand, #page-marketing .mkt-kpi:focus-visible .mkt-expand { opacity: .85; }
#page-marketing .mkt-kpi.open .mkt-expand { opacity: 1; transform: rotate(180deg); }

/* calendar + attention layout */
#page-marketing .mkt-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; }
#page-marketing .mkt-panel {
  background: linear-gradient(170deg,#252220,#1e1b19);
  border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px;
  box-shadow: 0 22px 50px -36px #000, var(--inner-hi);
}
#page-marketing .mkt-panel-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
#page-marketing .mkt-panel-h .mkt-hint { font-size: 11px; color: var(--text-dim); }
#page-marketing .mkt-panel-sub { font-size: 11.5px; color: var(--text-dim); margin: 2px 0 14px; }

/* content calendar */
#page-marketing .mkt-cal-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 9px; }
#page-marketing .mkt-cal-day { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
#page-marketing .mkt-cal-dh { display: flex; flex-direction: column; gap: 1px; padding: 0 2px 2px; }
#page-marketing .mkt-cal-dh .dow { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
#page-marketing .mkt-cal-dh .dnum { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 800; color: var(--text-bright); line-height: 1; }
#page-marketing .mkt-cal-dh.today .dnum, #page-marketing .mkt-cal-dh.today .dow { color: var(--gold); }
/* HONEST-COMING empty slot — present but non-firing (publishing/scheduling would FIRE) */
#page-marketing .mkt-cal-slot {
  border: 1px dashed rgba(255,255,255,0.14); border-radius: 10px; min-height: 62px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.012); color: var(--text-dim);
}
#page-marketing .mkt-cal-slot.mkt-coming { cursor: not-allowed; opacity: .6; }
#page-marketing .mkt-cal-legend { display: flex; gap: 16px; margin-top: 13px; font-size: 10.5px; color: var(--text-dim); flex-wrap: wrap; }
#page-marketing .mkt-cal-legend .sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
#page-marketing .mkt-cal-legend .sw.dash { border: 1px dashed rgba(255,255,255,0.3); background: transparent; }

/* needs-attention */
#page-marketing .mkt-att-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
#page-marketing .mkt-att-head h3 .glyph { width: 24px; height: 24px; border-radius: 8px; background: linear-gradient(150deg,rgba(232,148,58,0.24),rgba(201,168,76,0.10)); display: grid; place-items: center; }

/* FIX_CROSS_SPECIALIST_S1_DEADSTOCK_MKTG_2026_09_21 -- Marketing's first populated
   needs-attention row (the shared kit .vk .att / .att-body / .att-top / .tt / .desc /
   .att-actwrap / .att-act do the rest; these are the two the kit does not model, mirroring the
   Sales/Operations precedent of a page-scoped amount badge + action-button row). Property
   values ported from #page-sales .sa-att-top .sa-amt / .sa-att .sa-att-act (index.html
   L18563-18576 region), not invented. */
/* FIX_CROSS_SPECIALIST_S1_DEADSTOCK_MKTG_2026_09_21 -- fidelity-gate F1b, REVISED after live
   loopback measurement (see src/render_marketing.js's own FIX comment at the same marker for the
   full before/after numbers). A narrow SIDE column (stacked or not) could not clear 60% of panel
   width in this panel's real dimensions -- .mkt-att-act is now a BLOCK CHILD of .att-body (a
   full-width button row below .desc), so it no longer competes for horizontal space at all;
   --mkt-att-gap is a spacing TOKEN (not a literal) for the vertical gap above the row. */
#page-marketing { --mkt-att-gap: 10px; }
#page-marketing .mkt-att-amt { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 12.5px; color: var(--amber); }
#page-marketing .mkt-att-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--mkt-att-gap); }
#page-marketing .mkt-att-dismiss-reason { width: 100%; min-height: 54px; resize: vertical; font-family: inherit; font-size: 12px; color: var(--text); background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 9px; }

/* honest-empty state (calendar + attention share it) */
#page-marketing .mkt-empty {
  border: 1px dashed var(--border); border-radius: 12px; padding: 26px 20px;
  text-align: center; color: var(--text-dim); font-size: 12.5px; line-height: 1.5;
  background: rgba(255,255,255,0.012);
}
#page-marketing .mkt-empty .mkt-empty-ic { font-size: 22px; opacity: .55; margin-bottom: 8px; }

/* HONEST-COMING action affordance — visibly present, disabled, never wired */
#page-marketing .mkt-coming {
  position: relative; cursor: not-allowed; opacity: .62;
}
#page-marketing .mkt-coming-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--gold);
  background: rgba(201,168,76,0.12); border: 1px solid rgba(201,168,76,0.32);
  border-radius: 999px; padding: 2px 8px;
}
#page-marketing .mkt-act-btn {
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600;
  border-radius: 8px; padding: 7px 14px; border: 1px solid var(--border);
  background: rgba(255,255,255,0.04); color: var(--text-dim);
  cursor: not-allowed; opacity: .62; white-space: nowrap;
}

/* click-reveal popover (scoped, ported from sample popover machinery) */
#page-marketing .mkt-pop-scrim { position: fixed; inset: 0; z-index: 90; background: transparent; display: none; }
#page-marketing .mkt-pop-scrim.show { display: block; }
#page-marketing .mkt-popover {
  position: fixed; z-index: 100; display: none;
  width: 320px; max-width: calc(100vw - 28px);
  background: linear-gradient(170deg,rgba(38,35,32,0.98),rgba(28,25,22,0.98));
  border: 1px solid rgba(201,168,76,0.32); border-radius: 16px; padding: 18px 20px;
  box-shadow: 0 36px 80px -30px #000, 0 0 0 1px rgba(201,168,76,0.1), 0 0 40px -14px rgba(201,168,76,0.4);
  transform-origin: top center; transform: scale(.92) translateY(-8px); opacity: 0;
  transition: transform .22s var(--ease), opacity .22s var(--ease);
}
#page-marketing .mkt-popover.show { display: block; }
#page-marketing .mkt-popover.show.in { transform: scale(1) translateY(0); opacity: 1; }
#page-marketing .mkt-pop-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
#page-marketing .mkt-pop-h .ph-hint { font-size: 10.5px; color: var(--text-dim); }
#page-marketing .mkt-pop-sub { font-size: 11px; color: var(--text-dim); margin: 2px 0 14px; }
#page-marketing .mkt-pop-close { position: absolute; top: 13px; right: 14px; width: 22px; height: 22px; border-radius: 7px; border: 1px solid var(--border); background: rgba(255,255,255,0.03); color: var(--text-dim); cursor: pointer; display: grid; place-items: center; }
#page-marketing .mkt-pop-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 22px 10px; text-align: center; color: var(--text-dim); font-size: 11.5px; line-height: 1.5;
}
#page-marketing .mkt-pop-empty .mkt-ring {
  width: 96px; height: 96px; border-radius: 50%;
  border: 11px solid rgba(255,255,255,0.06); flex: none;
}

#page-marketing .mkt-footnote { font-size: 10px; color: var(--text-dim); margin-top: 18px; text-align: center; opacity: .7; }

@media (max-width: 1100px) {
  #page-marketing .mkt-kpis { grid-template-columns: repeat(3,1fr); }
  #page-marketing .mkt-grid { grid-template-columns: 1fr; }
}
/* FIX_ULTRAMARATHON_S0_MARKETING_2026_06_19 — end Marketing Command Centre scoped CSS. */

/* FIX_KPI_MARKETING_ENGINE_2026_06_29 (v1.25) — Marketing Overview KPI band rolled onto the shared
   __wireKpiSurface engine (symbol anchor: function __wireKpiSurface). The engine drives a body-level
   hover-PEEK layer (#mkoPeekLayer) + a body-level click-MODAL layer (#mkoModalLayer), giving Marketing
   the SAME hover-peek-then-click-modal interaction every other specialist Overview now has (People /
   Legal / Financial / CRM / Risk). Pre-this the Marketing band was a bespoke single click-popover
   (.mkt-popover, bound by __marketingBindPopovers). The .mkt-popover family is LEFT INTACT (it is
   reused by 4 OTHER marketing sub-surfaces — post-detail / audience / content-calendar / brand — that
   still call __marketingBindPopovers); this is an ADD-only mko- family, NOT a rename. Mechanical
   co-->mko prefix clone of the CRM S4 co- block (L20053+), retinted to the Marketing teal/gold palette.
   Body-level (#mkoPeekLayer/#mkoModalLayer position:fixed) rules are TOP-LEVEL, NOT nested under
   #page-marketing; only the tile-side hint/expand rules are #page-marketing-scoped. HONEST-EMPTY is
   load-bearing: Marketing has NO live data store, so every peek/modal renders an honest "not connected /
   no data yet" panel and ctaMode 'dest' + omitted per-tile dest HIDES the "View full" CTA (no dead CTA,
   no fabricated figure). ASCII-only comments (a non-ASCII char silently drops the rule from the CSSOM
   — the established .crm-layout hazard). */
/* tile-side: hover-preview hint strip + chevron (engine binds '.mko-kpi[data-pop]'; the mkt-kpi shell
   keeps all its existing visual styling — mko-kpi is the engine hook class only). */
#page-marketing .mko-kpi .mko-hint-i {
  position: absolute; left: 16px; bottom: 11px; font-size: 8.5px; letter-spacing: .04em;
  text-transform: uppercase; color: #6E6960; opacity: 0; transition: opacity .2s var(--ease);
  pointer-events: none;
}
#page-marketing .mko-kpi[data-pop]:hover .mko-hint-i { opacity: .75; }
#page-marketing .mko-kpi.mko-pop-open { border-color: rgba(201,168,76,0.45); box-shadow: 0 22px 44px -26px #000, 0 0 0 1px rgba(201,168,76,0.4), 0 0 30px -10px rgba(201,168,76,0.6); }
#page-marketing .mko-kpi.mko-pop-open .mkt-expand { opacity: 1; transform: rotate(180deg); }
/* FIX_KPI_MARKETING_ENGINE_2026_06_29 — end Marketing KPI-engine (mko-) clone. */

/* ═══════════════════════════════════════════════════════════════════════════
   FIX_ULTRAMARATHON_MKT_ANALYTICS_2026_06_19 — Marketing Analytics scoped CSS.
   ULTRAMARATHON surface 3, ported from design_samples/marketing/marketing_analytics.html
   (.sec-h / .trend-wrap / .trend-canvas-shell / .aud-wrap / .tbl / .chan-cmp / cmp-donut /
   .funnel / .cpl-card / .conf / .seam idioms) and SCOPED under #page-marketing so the
   analytics-specific rules cannot leak into the shipped Overview. The shell tokens
   (--gold/--page/--card/--border/--green/--amber/--red/--blue/--text/--dim/--head/
   --inner-hi/--ease) are inherited from the portal :root - NOT re-declared. Everything
   renders HONEST-EMPTY by construction (no marketing engine yet): every CHART keeps its
   container + axes/gridlines/legend/labels with ZERO data series (refinement 1 - a dropped
   chart is a FAIL), the leaderboard + channel-comparison tables render header + empty
   row-skeletons (refinement 2 - NOT one generic block), the funnel keeps all 3 stages as
   empty labeled bars, and the donut keeps its ring with no segments. Toggles/sort buttons
   are inert (.mkt-coming). The seed arrays (SERIES/FOLLOW/CONTENT/cmpMix/mix/HEALTH) and the
   draw-in/count-up animation engines are NOT carried into production. ASCII-only comments
   throughout (a non-ASCII char silently drops the rule from the CSSOM - the established
   .crm-layout hazard). Reuses the shipped .mkt-scroll / .mkt-head-row / .mkt-statusline /
   .mkt-kpis / .mkt-kpi / .mkt-empty / .mkt-coming / .mkt-coming-tag / .mkt-pop-* idioms. */

/* section header (sec-h) used between each analytics section */
#page-marketing .mkt-an-sec-h { display: flex; align-items: flex-end; gap: 12px; margin: 22px 0 13px; }
#page-marketing .mkt-an-sec-h .sh-sub { font-size: 11.5px; color: var(--text-dim); padding-bottom: 1px; }
#page-marketing .mkt-an-sec-h .sh-tag { margin-left: auto; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-family: 'Montserrat', sans-serif; border-radius: 999px; padding: 3px 9px; border: 1px solid transparent; }
#page-marketing .mkt-an-sec-h .sh-tag.measured { color: #3FB6A8; background: rgba(63,182,168,0.12); border-color: rgba(63,182,168,0.34); }
/* "measured / descriptive" inline pill (social variant for audience growth) */
#page-marketing .mkt-an-obs { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-family: 'Montserrat', sans-serif; color: #a98fe6; background: rgba(139,111,214,0.12); border: 1px solid rgba(139,111,214,0.3); border-radius: 999px; padding: 2px 8px; margin-left: auto; align-self: center; }
#page-marketing .mkt-an-obs .obs-dot { width: 5px; height: 5px; border-radius: 50%; background: #8B6FD6; }
/* confidence pill (high/med/low) - kept on funnel header + attribution rows */
#page-marketing .mkt-an-conf { display: inline-flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-family: 'Montserrat', sans-serif; border-radius: 999px; padding: 2px 8px; }
#page-marketing .mkt-an-conf.high { color: #6fd0a0; background: rgba(76,175,125,0.12); border: 1px solid rgba(76,175,125,0.32); }
#page-marketing .mkt-an-conf.med { color: #f2b06a; background: rgba(232,148,58,0.12); border: 1px solid rgba(232,148,58,0.32); }
#page-marketing .mkt-an-conf.low { color: #8fc0ec; background: rgba(91,155,213,0.12); border: 1px solid rgba(91,155,213,0.32); }
#page-marketing .mkt-an-conf .cf-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* wide analytics panel (reuses .mkt-panel base; .wide spans full width) */
#page-marketing .mkt-panel.mkt-an-wide { width: 100%; }
#page-marketing .mkt-an-panel-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }

/* segmented toggle + channel legend toggles (present but INERT in no-data state) */
#page-marketing .mkt-an-seg { display: inline-flex; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 9px; padding: 2px; }

/* ===== HERO TREND CHART (structured-empty, refinement 1) ===== */
#page-marketing .mkt-an-trend-wrap { display: grid; grid-template-columns: 1fr 200px; gap: 20px; align-items: stretch; }
#page-marketing .mkt-an-trend-box { position: relative; }
#page-marketing .mkt-an-trend-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
#page-marketing .mkt-an-chan-toggles { display: flex; align-items: center; gap: 7px; margin-left: auto; flex-wrap: wrap; }
#page-marketing .mkt-an-chan-tog { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; user-select: none; }
#page-marketing .mkt-an-chan-tog.mkt-coming { cursor: not-allowed; }
#page-marketing .mkt-an-chan-tog .ct-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
/* chart shell (the empty plot box - axes + gridlines drawn as an inline SVG, NO canvas) */
#page-marketing .mkt-an-chart-shell { position: relative; width: 100%; }
#page-marketing .mkt-an-chart-svg { width: 100%; display: block; overflow: visible; }
#page-marketing .mkt-an-trend-shell { height: 280px; }
#page-marketing .mkt-an-trend-shell .mkt-an-chart-svg { height: 280px; }
/* honest empty caption overlaid on the kept axes/gridlines (no series) */
#page-marketing .mkt-an-chart-empty {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%,-50%);
  text-align: center; color: var(--text-dim); font-size: 12px; line-height: 1.5;
  max-width: 260px; pointer-events: none;
}
#page-marketing .mkt-an-chart-empty .ce-ic { font-size: 22px; opacity: .5; margin-bottom: 7px; }

/* mix side rail beside the hero trend (label + "-" value + empty bar track) */
#page-marketing .mkt-an-trend-mix { display: flex; flex-direction: column; gap: 13px; border-left: 1px solid var(--border); padding-left: 18px; }
#page-marketing .mkt-an-tm-h { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); font-family: 'Montserrat', sans-serif; }
#page-marketing .mkt-an-tm-item { display: flex; flex-direction: column; gap: 5px; }
#page-marketing .mkt-an-tm-top { display: flex; align-items: center; gap: 8px; }
#page-marketing .mkt-an-tm-top .tm-sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
#page-marketing .mkt-an-tm-top .tm-name { flex: 1; font-size: 11.5px; color: var(--text); }
#page-marketing .mkt-an-tm-top .tm-val { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px; color: var(--text-dim); }
#page-marketing .mkt-an-tm-bar { height: 6px; border-radius: 4px; background: rgba(255,255,255,0.06); overflow: hidden; }
#page-marketing .mkt-an-tm-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); font-size: 10.5px; color: var(--text-dim); line-height: 1.5; }

/* ===== AUDIENCE GROWTH (structured-empty, refinement 1) ===== */
#page-marketing .mkt-an-aud-wrap { display: grid; grid-template-columns: 1.55fr 1fr; gap: 20px; align-items: stretch; }
#page-marketing .mkt-an-aud-shell { height: 210px; }
#page-marketing .mkt-an-aud-shell .mkt-an-chart-svg { height: 210px; }
#page-marketing .mkt-an-aud-cap { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--text-dim); padding: 6px 2px 0; }
#page-marketing .mkt-an-aud-stats { display: flex; flex-direction: column; gap: 11px; }
#page-marketing .mkt-an-netnew { display: flex; align-items: center; gap: 10px; }
#page-marketing .mkt-an-netnew .nn-mo { width: 34px; font-size: 10px; color: var(--text-dim); font-family: 'Montserrat', sans-serif; font-weight: 600; flex: none; }
#page-marketing .mkt-an-netnew .nn-bar { flex: 1; height: 9px; border-radius: 5px; background: rgba(255,255,255,0.05); overflow: hidden; }
#page-marketing .mkt-an-netnew .nn-v { width: 40px; text-align: right; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11px; color: var(--text-dim); }
#page-marketing .mkt-an-chan-split { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--border); }
#page-marketing .mkt-an-chan-split .cs-row { display: flex; align-items: center; gap: 9px; font-size: 11.5px; }
#page-marketing .mkt-an-chan-split .cs-sw { width: 9px; height: 9px; border-radius: 50%; flex: none; }
#page-marketing .mkt-an-chan-split .cs-n { flex: 1; color: var(--text); }
#page-marketing .mkt-an-chan-split .cs-v { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--text-dim); }

/* ===== DATA TABLES (leaderboard + channel comparison) ===== */
#page-marketing .mkt-an-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
/* FIX_MOBILE_PERCOMPONENT_OVERFLOW_2026_08_02 — phone arm; see the head-of-block at the
   #page-sales .sq-board arm. Seven columns give a min-content width that width:100%
   cannot go below, so the document scrolled to 665 at 375px. table-layout: fixed is the
   ONLY thing that worked: overflow-x:auto on the table alone measured 665 -> 665, because
   a table cannot scroll itself, and a table's min-content is not addressable the way a
   grid's is. FOUNDER RULING (Option A now, Option B queued): this fixes LAYOUT, NOT
   READABILITY — seven columns inside 375px is roughly 53px each and the sibling
   thead th rule sets white-space: nowrap, so headers will spill or clip rather than wrap.
   Option B, a horizontally-scrollable wrapper, is the better phone UX but is an EMISSION
   change at two render sites and is UNMEASURED; it is queued, not shipped here. */
@media (max-width: 720px) { #page-marketing .mkt-an-tbl { table-layout: fixed; } }
#page-marketing .mkt-an-tbl tbody tr:last-child td { border-bottom: none; }
/* empty row-skeleton (refinement 2) - preserves the rank + content + value-cell shape */
#page-marketing .mkt-an-tbl tbody tr.mkt-an-skel td { color: var(--text-dim); }
#page-marketing .mkt-an-skel-rank { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 12px; color: var(--text-dim); opacity: .45; }
#page-marketing .mkt-an-skel-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
#page-marketing .mkt-an-skel-ico { width: 26px; height: 26px; border-radius: 8px; flex: none; background: rgba(255,255,255,0.03); border: 1px solid var(--border); }
#page-marketing .mkt-an-skel-line { height: 9px; border-radius: 5px; background: rgba(255,255,255,0.05); width: 150px; max-width: 60%; }
#page-marketing .mkt-an-dash { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--text-dim); opacity: .7; }

/* observed-facts strip (Best format / Best time / Posts measured) - values "-" */
#page-marketing .mkt-an-facts { display: flex; gap: 13px; margin-top: 14px; flex-wrap: wrap; }
#page-marketing .mkt-an-fact { flex: 1; min-width: 160px; display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,0.018); border: 1px solid var(--border); }
#page-marketing .mkt-an-fact .f-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: rgba(63,182,168,0.12); }
#page-marketing .mkt-an-fact .f-l { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; font-family: 'Montserrat', sans-serif; }
#page-marketing .mkt-an-fact .f-v { font-size: 13px; color: var(--text-dim); font-weight: 700; font-family: 'Montserrat', sans-serif; margin-top: 2px; }
#page-marketing .mkt-an-fact .f-d { font-size: 10.5px; color: var(--text-dim); margin-top: 1px; }

/* attribution honesty note (kept verbatim - the measurement-vs-interpretation seam copy) */
#page-marketing .mkt-an-attr-note { display: flex; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(63,182,168,0.04); border: 1px solid var(--border); }
#page-marketing .mkt-an-attr-note .an-ic { flex: none; width: 18px; height: 18px; }

/* ===== CHANNEL COMPARISON (table + empty donut) ===== */
#page-marketing .mkt-an-chan-cmp { display: grid; grid-template-columns: 1.7fr 1fr; gap: 20px; align-items: center; }
#page-marketing .mkt-an-donut-box { display: flex; flex-direction: column; align-items: center; gap: 14px; }
#page-marketing .mkt-an-donut-wrap { position: relative; width: 172px; height: 172px; }
/* structured-empty donut ring (refinement 1) - ring outline kept, NO segment fills */
#page-marketing .mkt-an-donut-ring { width: 172px; height: 172px; border-radius: 50%; border: 22px solid rgba(255,255,255,0.06); box-sizing: border-box; }
#page-marketing .mkt-an-donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
#page-marketing .mkt-an-donut-c .cd-l { font-size: 8.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); }
#page-marketing .mkt-an-donut-c .cd-v { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 24px; color: var(--text-dim); }
#page-marketing .mkt-an-donut-c .cd-d { font-size: 9.5px; color: var(--text-dim); margin-top: 2px; }
#page-marketing .mkt-an-cmp-legend { display: flex; flex-direction: column; gap: 9px; width: 100%; }
#page-marketing .mkt-an-cmp-legend .cl-row { display: flex; align-items: center; gap: 9px; font-size: 11.5px; }
#page-marketing .mkt-an-cmp-legend .cl-sw { width: 11px; height: 11px; border-radius: 4px; flex: none; }
#page-marketing .mkt-an-cmp-legend .cl-n { flex: 1; color: var(--text); }
#page-marketing .mkt-an-cmp-legend .cl-v { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--text-dim); }
#page-marketing .mkt-an-cmp-legend .cl-p { width: 34px; text-align: right; color: var(--text-dim); font-size: 10.5px; }

/* ===== FUNNEL (structured-empty, refinement 1 - all 3 stages KEPT) ===== */
#page-marketing .mkt-an-funnel-wrap { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items: center; }
#page-marketing .mkt-an-funnel { display: flex; flex-direction: column; gap: 4px; }
#page-marketing .mkt-an-fn-stage { position: relative; display: flex; align-items: center; }
/* empty stage bar - the labeled bar shape kept, neutral fill (no data width) */
#page-marketing .mkt-an-fn-bar { position: relative; height: 58px; border-radius: 11px; display: flex; align-items: center; padding: 0 18px; width: 100%; background: rgba(255,255,255,0.03); border: 1px dashed var(--border); }
#page-marketing .mkt-an-fn-bar .fb-l { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12.5px; color: var(--text); letter-spacing: .02em; }
#page-marketing .mkt-an-fn-bar .fb-v { margin-left: auto; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 15px; color: var(--text-dim); }
#page-marketing .mkt-an-fn-conv { font-size: 10px; color: var(--text-dim); font-family: 'Montserrat', sans-serif; font-weight: 600; padding: 3px 0 3px 18px; display: flex; align-items: center; gap: 6px; }
#page-marketing .mkt-an-fn-conv .fc-pct { color: var(--text-dim); font-weight: 700; }

/* cost-per-join + attribution side-card (confidence pills KEPT, counts "-") */
#page-marketing .mkt-an-cpl-card { display: flex; flex-direction: column; gap: 0; }
#page-marketing .mkt-an-cpl-big { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
#page-marketing .mkt-an-cpl-big .cb-v { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 30px; color: var(--text-dim); line-height: 1; }
#page-marketing .mkt-an-cpl-big .cb-u { font-size: 10.5px; color: var(--text-dim); }
#page-marketing .mkt-an-cpl-sub { font-size: 11px; color: var(--text-dim); margin: 4px 0 12px; }
#page-marketing .mkt-an-attr-src { display: flex; flex-direction: column; gap: 0; }
#page-marketing .mkt-an-attr-row { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--border); }
#page-marketing .mkt-an-attr-row .ar-n { flex: 1; font-size: 11.5px; color: var(--text); }
#page-marketing .mkt-an-attr-row .ar-v { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--text-dim); }

/* seam pointer to Intelligence (violet) - the "Open Intelligence" affordance is INERT */
#page-marketing .mkt-an-seam { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 13px 16px; border-radius: 13px; background: linear-gradient(120deg,rgba(139,111,214,0.10),rgba(139,111,214,0.02)); border: 1px solid rgba(139,111,214,0.26); }
#page-marketing .mkt-an-seam .sm-ic { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; background: rgba(139,111,214,0.16); }
#page-marketing .mkt-an-seam .sm-body { flex: 1; }
#page-marketing .mkt-an-seam .sm-go { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; color: #a98fe6; background: rgba(139,111,214,0.14); border: 1px solid rgba(139,111,214,0.3); border-radius: 8px; padding: 7px 13px; white-space: nowrap; }
#page-marketing .mkt-an-seam .sm-go.mkt-coming { cursor: not-allowed; opacity: .62; }

@media (max-width: 1100px) {
  #page-marketing .mkt-an-trend-wrap, #page-marketing .mkt-an-aud-wrap, #page-marketing .mkt-an-chan-cmp, #page-marketing .mkt-an-funnel-wrap { grid-template-columns: 1fr; }
  #page-marketing .mkt-an-trend-mix { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 16px; }
}
/* FIX_ULTRAMARATHON_MKT_ANALYTICS_2026_06_19 — end Marketing Analytics scoped CSS. */

/* ===========================================================================
   FIX_ULTRAMARATHON_MKT_BRAND_2026_06_19 - Marketing Brand scoped CSS.
   ULTRAMARATHON surface 4 (Brand), rail-selectable sub-view of the shipped
   #page-marketing shell, ported section-by-section from
   design_samples/marketing/marketing_brand.html (L223-555) and SCOPED under
   #page-marketing so it cannot leak into other specialist surfaces. The shell
   tokens (--gold/--gold-soft/--gold-glow/--card/--border/--border-strong/--green/
   --amber/--red/--blue/--text/--dim/--head/--inner-hi/--ease) are inherited from
   the portal :root - NOT re-declared. Everything renders HONEST-EMPTY by default
   (no brand kit exists yet): the swatch grid keeps its 3-col STRUCTURE as empty
   swatch slots (refinement 1), the photo strip keeps its 4-tile STRUCTURE as empty
   tiles (refinement 1), the asset grid keeps its 4-col STRUCTURE as empty asset
   cards (refinement 1), the messaging pillars keep their 3-col STRUCTURE as empty
   pillar cards (refinement 2), the type rows / source list / lockups all render
   their shape as structured-empty (refinement 2). ZERO fabrication - NONE of the
   sample's placeholder brand tokens (Ember/Charcoal swatches, THE YARD logomarks,
   warm/plain-spoken tone chips, Belong-here pillars, 47-posts/23-edits/18-files
   counts, owner-voice snippet copy) are carried into production; they render as
   "not set up" structural placeholders. Every generate/connect/apply/download
   action is HONEST-COMING (.mkt-coming, visibly disabled, never wired). ASCII-only
   (CSSOM-drop hazard - matches the shipped Marketing CSS convention). */

  /* section scaffolding */
  #page-marketing .bk-sec { margin-bottom: 22px; }
  #page-marketing .bk-sec-h { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
  #page-marketing .bk-sec-h .sh-no { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 11px; color: #1a160c; background: linear-gradient(150deg, var(--gold), var(--gold-soft)); width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; flex: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3); }
  #page-marketing .bk-sec-h .sh-tag { font-size: 9px; font-weight: 700; font-family: 'Montserrat', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); background: rgba(201,168,76,0.13); border: 1px solid rgba(201,168,76,0.32); border-radius: 999px; padding: 3px 9px; }
  #page-marketing .bk-sec-h .sh-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--border-strong), transparent); }
  #page-marketing .bk-sec-h .sh-note { font-size: 10.5px; color: var(--text-dim); }

  /* hero summary card - honest-empty (empty logo tile + name slot + "-" meta) */
  #page-marketing .bk-hero { position: relative; overflow: hidden; background: linear-gradient(150deg, rgba(201,168,76,0.10), rgba(255,255,255,0.018) 52%); border: 1px solid rgba(201,168,76,0.24); border-radius: 18px; padding: 20px 22px; display: flex; align-items: center; gap: 20px; box-shadow: 0 22px 50px -36px #000, var(--inner-hi); margin-bottom: 20px; }
  #page-marketing .bk-hero .h-logo { width: 78px; height: 78px; border-radius: 16px; flex: none; display: grid; place-items: center; background: linear-gradient(150deg, #252220, #181614); border: 1px solid var(--border-strong); box-shadow: var(--inner-hi); position: relative; z-index: 1; }
  #page-marketing .bk-hero .h-logo .logomark-empty { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 9px; letter-spacing: .04em; color: var(--text-dim); text-align: center; line-height: 1.3; }
  #page-marketing .bk-hero .h-body { flex: 1; min-width: 0; position: relative; z-index: 1; }
  #page-marketing .bk-hero .h-body .hb-name { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 18px; color: var(--text-bright); letter-spacing: -.01em; }
  #page-marketing .bk-hero .h-body .hb-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 4px; }
  #page-marketing .bk-hero .h-meta { display: flex; gap: 18px; margin-top: 11px; flex-wrap: wrap; }
  #page-marketing .bk-hero .h-meta .hm { font-size: 10.5px; color: var(--text-dim); }
  #page-marketing .bk-hero .h-act { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; }

  /* generic pill buttons (brand surface) */
  #page-marketing .bk-pill { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; border-radius: 8px; padding: 7px 14px; border: 1px solid var(--border-strong); background: rgba(255,255,255,0.04); color: var(--text); white-space: nowrap; box-shadow: var(--inner-hi); display: inline-flex; align-items: center; gap: 7px; }
  #page-marketing .bk-pill.mkt-coming { cursor: not-allowed; opacity: .55; }

  /* connect strips (top + how-it-connects) */
  #page-marketing .bk-connect { display: flex; align-items: center; gap: 13px; padding: 13px 16px; border-radius: 13px; background: linear-gradient(120deg, rgba(91,155,213,0.08), rgba(201,168,76,0.06) 70%); border: 1px solid rgba(201,168,76,0.2); box-shadow: var(--inner-hi); }
  #page-marketing .bk-connect .c-ic { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; background: rgba(201,168,76,0.14); box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); }
  #page-marketing .bk-connect .c-body { flex: 1; min-width: 0; }
  #page-marketing .bk-connect .c-body p .lk { color: var(--gold); font-weight: 600; }

  /* learned-profile lead-in + shared-strip (narration strips) */
  #page-marketing .bk-learn-lead { display: flex; align-items: flex-start; gap: 12px; border-radius: 13px; padding: 13px 16px; margin-bottom: 16px; background: linear-gradient(120deg, rgba(91,155,213,0.08), rgba(201,168,76,0.05) 72%); border: 1px solid rgba(201,168,76,0.2); box-shadow: var(--inner-hi); }
  #page-marketing .bk-learn-lead .ll-ic { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; background: rgba(201,168,76,0.14); box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); }
  #page-marketing .bk-learn-lead .ll-body { flex: 1; min-width: 0; }
  #page-marketing .bk-learn-lead .ll-body p .lk { color: var(--gold); font-weight: 600; }

  #page-marketing .bk-learn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 20px; }
  #page-marketing .bk-learn-card { background: linear-gradient(170deg, #262320, #1e1b19); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; box-shadow: 0 16px 34px -30px #000, var(--inner-hi); display: flex; flex-direction: column; }
  #page-marketing .bk-learn-card .lc-title { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
  #page-marketing .bk-learn-card .lc-title h4 { font-size: 12.5px; letter-spacing: .3px; font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--text-bright); }
  #page-marketing .bk-learn-card .lc-title .lc-ic { width: 24px; height: 24px; border-radius: 7px; background: rgba(201,168,76,0.13); display: grid; place-items: center; flex: none; }
  #page-marketing .bk-learn-card .lc-title .lc-tag { margin-left: auto; font-size: 8.5px; font-weight: 700; font-family: 'Montserrat', sans-serif; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 2px 8px; color: var(--text-dim); background: rgba(255,255,255,0.04); border: 1px solid var(--border); }
  #page-marketing .bk-learn-card .lc-sub { font-size: 11px; color: var(--text-dim); margin-bottom: 13px; line-height: 1.45; }

  /* connected sources list (honest "Not connected" rows) */
  #page-marketing .bk-src-list { display: flex; flex-direction: column; gap: 9px; }
  #page-marketing .bk-src { display: flex; align-items: center; gap: 12px; border-radius: 11px; padding: 11px 12px; border: 1px solid var(--border); background: rgba(255,255,255,0.015); }
  #page-marketing .bk-src .s-ic { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); }
  #page-marketing .bk-src .s-body { flex: 1; min-width: 0; }
  #page-marketing .bk-src .s-body .s-name { font-size: 12px; font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--text-bright); display: flex; align-items: center; gap: 7px; }
  #page-marketing .bk-src .s-body .s-name .s-state { font-size: 8.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; color: var(--text-dim); background: rgba(255,255,255,0.04); border: 1px solid var(--border); }
  #page-marketing .bk-src .s-body .s-learn { font-size: 11px; color: var(--text-dim); margin-top: 3px; line-height: 1.4; }
  #page-marketing .bk-src .s-act { flex: none; display: flex; align-items: center; gap: 7px; }
  #page-marketing .bk-src-priv { display: flex; align-items: flex-start; gap: 7px; margin-top: 12px; font-size: 10px; color: var(--text-dim); line-height: 1.45; }

  /* learns-from-edits (honest-empty learned-rules) */
  #page-marketing .bk-edit-banner { display: flex; align-items: center; gap: 11px; border-radius: 11px; padding: 11px 13px; margin-bottom: 13px; background: rgba(255,255,255,0.015); border: 1px solid var(--border); }
  #page-marketing .bk-edit-banner .eb-ic { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; background: rgba(255,255,255,0.04); }
  #page-marketing .bk-edit-banner .eb-body { flex: 1; min-width: 0; }
  #page-marketing .bk-learned-label { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 9px; display: flex; align-items: center; gap: 6px; }
  #page-marketing .bk-learn-foot { font-size: 10px; color: var(--text-dim); margin-top: 12px; display: flex; align-items: center; gap: 6px; line-height: 1.4; }

  /* shared-profile tie strip */
  #page-marketing .bk-shared-strip { display: flex; align-items: center; gap: 13px; padding: 13px 16px; border-radius: 13px; margin-bottom: 20px; background: linear-gradient(120deg, rgba(139,111,214,0.08), rgba(201,168,76,0.05) 70%); border: 1px solid rgba(139,111,214,0.24); box-shadow: var(--inner-hi); }
  #page-marketing .bk-shared-strip .ss-ic { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; background: rgba(139,111,214,0.16); }
  #page-marketing .bk-shared-strip .ss-body { flex: 1; min-width: 0; }
  #page-marketing .bk-shared-strip .ss-targets { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
  #page-marketing .bk-shared-strip .ss-t { font-size: 10px; font-family: 'Montserrat', sans-serif; font-weight: 600; color: var(--text); background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 7px; padding: 4px 10px; display: inline-flex; align-items: center; gap: 6px; }

  /* voice grid + voice cards */
  #page-marketing .bk-voice-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; }
  #page-marketing .bk-tone-wrap { display: flex; flex-direction: column; gap: 14px; }
  #page-marketing .bk-voice-col { display: flex; flex-direction: column; gap: 18px; }
  #page-marketing .bk-voice-card { background: linear-gradient(170deg, #262320, #1e1b19); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; box-shadow: 0 16px 34px -30px #000, var(--inner-hi); }
  #page-marketing .bk-voice-card .vc-title { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
  #page-marketing .bk-voice-card .vc-title h4 { font-size: 12.5px; letter-spacing: .3px; font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--text-bright); }
  #page-marketing .bk-voice-card .vc-title .vt-ic { width: 24px; height: 24px; border-radius: 7px; background: rgba(201,168,76,0.13); display: grid; place-items: center; flex: none; }
  #page-marketing .bk-voice-card .vc-sub { font-size: 11px; color: var(--text-dim); margin-bottom: 13px; }

  /* honest-empty inner block (a structured "appears here once set up" slot) */
  #page-marketing .bk-empty-slot { border-radius: 11px; border: 1px dashed var(--border-strong); background: rgba(255,255,255,0.012); padding: 16px 14px; font-size: 11.5px; color: var(--text-dim); line-height: 1.5; text-align: center; }
  #page-marketing .bk-empty-slot .es-ic { font-size: 19px; opacity: .5; margin-bottom: 6px; }

  /* preview shell (honest-empty) */
  #page-marketing .bk-preview { background: linear-gradient(150deg, rgba(91,155,213,0.07), rgba(255,255,255,0.012) 60%); border: 1px solid rgba(91,155,213,0.22); border-radius: 14px; padding: 16px 18px; box-shadow: var(--inner-hi); }
  #page-marketing .bk-preview .pv-h { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
  #page-marketing .bk-preview .pv-h .pv-ic { width: 26px; height: 26px; border-radius: 8px; background: rgba(91,155,213,0.16); display: grid; place-items: center; flex: none; }
  #page-marketing .bk-preview .pv-h h4 { font-size: 12.5px; letter-spacing: .3px; font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--text-bright); }
  #page-marketing .bk-preview .pv-h .pv-tag { margin-left: auto; font-size: 9px; font-weight: 700; font-family: 'Montserrat', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #8fc0ec; background: rgba(91,155,213,0.12); border: 1px solid rgba(91,155,213,0.32); border-radius: 999px; padding: 2px 8px; }

  /* visual identity grid */
  #page-marketing .bk-vis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  #page-marketing .bk-panel { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; box-shadow: 0 16px 34px -30px #000, var(--inner-hi); }
  #page-marketing .bk-panel-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
  #page-marketing .bk-panel-h .hint { font-size: 11px; color: var(--text-dim); }
  #page-marketing .bk-panel-sub { font-size: 11.5px; color: var(--text-dim); margin: 2px 0 14px; }

  /* logo lockups - empty placeholder tiles (refinement 2) */
  #page-marketing .bk-locks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  #page-marketing .bk-lock { border-radius: 12px; border: 1px dashed var(--border-strong); padding: 18px 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 104px; justify-content: center; position: relative; background: rgba(255,255,255,0.012); }
  #page-marketing .bk-lock .lk-name { position: absolute; top: 8px; left: 11px; font-size: 8.5px; font-weight: 700; font-family: 'Montserrat', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
  #page-marketing .bk-lock .lk-empty { font-size: 10.5px; color: var(--text-dim); text-align: center; }

  /* colour palette - empty swatch slots (refinement 1, STRUCTURE preserved) */
  #page-marketing .bk-palette { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
  #page-marketing .bk-sw-card { border-radius: 12px; overflow: hidden; border: 1px dashed var(--border-strong); background: rgba(255,255,255,0.012); }
  #page-marketing .bk-sw-chip { height: 64px; position: relative; display: grid; place-items: center; background: repeating-linear-gradient(45deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02) 6px, rgba(255,255,255,0.04) 6px, rgba(255,255,255,0.04) 12px); }
  #page-marketing .bk-sw-meta { padding: 9px 11px 11px; }
  #page-marketing .bk-sw-meta .sw-name { font-size: 11px; font-weight: 700; font-family: 'Montserrat', sans-serif; color: var(--text-dim); }
  #page-marketing .bk-sw-meta .sw-hex { font-size: 10px; color: var(--text-dim); font-family: 'Montserrat', sans-serif; letter-spacing: .04em; margin-top: 1px; }

  /* typography - empty type rows (refinement 2) */
  #page-marketing .bk-type-rows { display: flex; flex-direction: column; gap: 13px; }
  #page-marketing .bk-type-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 11px; border: 1px dashed var(--border-strong); background: rgba(255,255,255,0.012); }
  #page-marketing .bk-type-row .tr-spec { width: 118px; flex: none; }
  #page-marketing .bk-type-row .tr-spec .trn { font-size: 11.5px; font-weight: 700; font-family: 'Montserrat', sans-serif; color: var(--text-dim); }
  #page-marketing .bk-type-row .tr-spec .trm { font-size: 10px; color: var(--text-dim); margin-top: 2px; }
  #page-marketing .bk-type-row .tr-empty { flex: 1; min-width: 0; font-size: 11.5px; color: var(--text-dim); }

  /* photography - empty photo strip (refinement 1) + do/don't empty cards */
  #page-marketing .bk-photo-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 13px; }
  #page-marketing .bk-photo-tile { aspect-ratio: 1/1; border-radius: 11px; position: relative; overflow: hidden; border: 1px dashed var(--border-strong); background: rgba(255,255,255,0.012); display: grid; place-items: center; }
  #page-marketing .bk-photo-do { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
  #page-marketing .bk-pd-card { border-radius: 11px; padding: 11px 13px; border: 1px solid var(--border); font-size: 11px; line-height: 1.5; background: rgba(255,255,255,0.012); }
  #page-marketing .bk-pd-card .pd-l { font-size: 8.5px; font-weight: 800; font-family: 'Montserrat', sans-serif; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; display: flex; align-items: center; gap: 5px; color: var(--text-dim); }
  #page-marketing .bk-pd-card .pd-empty { color: var(--text-dim); }

  /* messaging pillars - empty pillar cards (refinement 2, STRUCTURE preserved) */
  #page-marketing .bk-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  #page-marketing .bk-pillar { position: relative; overflow: hidden; border-radius: 14px; border: 1px dashed var(--border-strong); padding: 16px 17px; background: rgba(255,255,255,0.012); }
  #page-marketing .bk-pillar .pl-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 11px; background: rgba(255,255,255,0.04); box-shadow: inset 0 1px 0 rgba(255,255,255,0.07); }
  #page-marketing .bk-pillar .pl-empty { font-size: 11.5px; color: var(--text-dim); line-height: 1.5; }

  /* asset library - empty asset cards (refinement 1, STRUCTURE preserved) */
  #page-marketing .bk-assets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
  #page-marketing .bk-asset { border-radius: 13px; border: 1px dashed var(--border-strong); overflow: hidden; background: rgba(255,255,255,0.012); }
  #page-marketing .bk-asset .a-thumb { height: 108px; position: relative; display: grid; place-items: center; }
  #page-marketing .bk-asset .a-meta { padding: 11px 12px; }
  #page-marketing .bk-asset .a-meta .am-name { font-size: 11.5px; font-weight: 700; font-family: 'Montserrat', sans-serif; color: var(--text-dim); }
  #page-marketing .bk-asset .a-meta .am-sub { font-size: 10px; color: var(--text-dim); margin-top: 2px; }
  #page-marketing .bk-asset .a-act { display: flex; gap: 7px; margin-top: 10px; }
  #page-marketing .bk-asset .a-act .ab { flex: 1; text-align: center; font-size: 10px; font-weight: 700; font-family: 'Montserrat', sans-serif; border-radius: 7px; padding: 6px 0; border: 1px solid var(--border-strong); background: rgba(255,255,255,0.03); color: var(--text-dim); }
  #page-marketing .bk-asset .a-act .ab.mkt-coming { cursor: not-allowed; opacity: .7; }

  @media (max-width: 1080px) {
    #page-marketing .bk-voice-grid, #page-marketing .bk-vis-grid, #page-marketing .bk-learn-grid, #page-marketing .bk-pillars { grid-template-columns: 1fr; }
    #page-marketing .bk-assets { grid-template-columns: repeat(2, 1fr); }
  }
/* FIX_ULTRAMARATHON_MKT_BRAND_2026_06_19 - end Marketing Brand scoped CSS. */

/* ═══════════════════════════════════════════════════════════════════════════
   FIX_ULTRAMARATHON_MKT_INTEL_2026_06_19 — Marketing Intelligence scoped CSS.
   ULTRAMARATHON surface (rail-selectable sub-view of #page-marketing), ported
   section-by-section from design_samples/marketing/marketing_intelligence.html
   ("NEW CSS - MARKETING INTELLIGENCE SURFACE" block, sample L371-606), re-scoped
   under #page-marketing and re-prefixed .mkt-i-* per the shipped convention. The
   confidence chips reuse the shipped .mkt-an-conf family (L7506+); the section
   heads reuse the shipped .mkt-an-sec-h family (L7497+); the .mkt-panel / .mkt-
   empty / .mkt-coming / .mkt-ring / .mkt-pop-* idioms are reused verbatim. Only
   the Intelligence-specific idioms are NEW here. All chart/track fills are
   width:0 (structured-empty, refinement 1) - no seed-data widths, no count-up,
   no animators. ASCII-only.
   ═══════════════════════════════════════════════════════════════════════════ */

/* attribution legend strip + "how we know this" source line */
#page-marketing .mkt-i-attr-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 10.5px; color: var(--text-dim); background: rgba(255,255,255,0.018); border: 1px solid var(--border); border-radius: 11px; padding: 9px 14px; margin-bottom: 16px; }
#page-marketing .mkt-i-attr-legend .al-t { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 7px; }
#page-marketing .mkt-i-attr-legend .ali { display: inline-flex; align-items: center; gap: 6px; }
#page-marketing .mkt-i-src-line { display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: var(--text-dim); margin-top: 9px; }
#page-marketing .mkt-i-panel-sub { font-size: 11.5px; color: var(--text-dim); line-height: 1.5; margin-bottom: 12px; }

/* ROI / CAC funnel */
#page-marketing .mkt-i-roi-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; }
#page-marketing .mkt-i-funnel { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
#page-marketing .mkt-i-fstage { position: relative; display: flex; align-items: center; gap: 13px; }
#page-marketing .mkt-i-fstage .f-bar { position: relative; height: 46px; border-radius: 11px; flex: 1; display: flex; align-items: center; padding: 0 15px; background: linear-gradient(110deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02)); border: 1px solid var(--border); overflow: hidden; }
#page-marketing .mkt-i-fstage .f-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 11px; opacity: .92; }
#page-marketing .mkt-i-fstage .f-in { position: relative; z-index: 2; display: flex; align-items: center; gap: 11px; width: 100%; }
#page-marketing .mkt-i-fstage .f-name { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px; color: var(--text-bright); min-width: 96px; }
#page-marketing .mkt-i-fstage .f-val { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 16px; color: var(--text-dim); margin-left: auto; }
#page-marketing .mkt-i-fstage .f-drop { font-size: 10px; color: var(--text-dim); width: 78px; text-align: right; flex: none; }

/* verdict card (honest-empty inside the card shell) */
#page-marketing .mkt-i-verdict { background: linear-gradient(150deg,rgba(255,255,255,0.03),rgba(255,255,255,0.012) 62%); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }
#page-marketing .mkt-i-verdict .vh { display: flex; align-items: center; gap: 9px; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 10px; }
#page-marketing .mkt-i-verdict .vrow { display: flex; align-items: baseline; gap: 7px; margin-bottom: 10px; }
#page-marketing .mkt-i-verdict .vbig { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 30px; color: var(--text-dim); line-height: 1; }
#page-marketing .mkt-i-verdict .vunit { font-size: 11.5px; color: var(--text-dim); }
#page-marketing .mkt-i-verdict .vsep { height: 1px; background: var(--border); margin: 12px 0; }
#page-marketing .mkt-i-verdict .vmini { display: flex; justify-content: space-between; align-items: baseline; font-size: 11.5px; padding: 5px 0; }
#page-marketing .mkt-i-verdict .vmini .vm-l { color: var(--text-dim); }
#page-marketing .mkt-i-verdict .vmini .vm-v { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--text-bright); }

/* per-channel CAC table */
#page-marketing .mkt-i-cac-table { display: flex; flex-direction: column; gap: 7px; margin-top: 5px; }
#page-marketing .mkt-i-cac-row { display: grid; grid-template-columns: 118px 1fr 64px 60px; align-items: center; gap: 12px; padding: 10px 13px; border-radius: 11px; background: rgba(255,255,255,0.018); border: 1px solid var(--border); position: relative; overflow: hidden; }
#page-marketing .mkt-i-cac-ch { display: flex; align-items: center; gap: 9px; min-width: 0; }
#page-marketing .mkt-i-cac-ch .cc-n { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 11.5px; color: var(--text-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#page-marketing .mkt-i-cac-bar { height: 8px; border-radius: 5px; background: rgba(255,255,255,0.06); overflow: hidden; }
#page-marketing .mkt-i-cac-sub { font-size: 10px; color: var(--text-dim); margin-top: 5px; }
#page-marketing .mkt-i-cac-cost { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 14px; color: var(--text-dim); text-align: right; }
#page-marketing .mkt-i-cac-roas { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11.5px; text-align: right; color: var(--text-dim); }
#page-marketing .mkt-i-cac-cap { font-size: 8.5px; color: var(--text-dim); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-top: 2px; }

/* peer benchmarks */
#page-marketing .mkt-i-bench-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
#page-marketing .mkt-i-bench { background: linear-gradient(170deg,rgba(255,255,255,0.022),rgba(255,255,255,0.01)); border: 1px solid var(--border); border-radius: 14px; padding: 15px 17px 16px; }
#page-marketing .mkt-i-bench .b-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
#page-marketing .mkt-i-bench .b-name { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--text-bright); text-transform: uppercase; }
#page-marketing .mkt-i-bench .b-verdict { font-family: 'Montserrat', sans-serif; font-size: 8.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; border-radius: 999px; padding: 2px 8px; color: var(--text-dim); background: rgba(255,255,255,0.04); border: 1px solid var(--border-strong); }
#page-marketing .mkt-i-bench .b-you { display: flex; align-items: baseline; gap: 6px; margin: 8px 0 3px; }
#page-marketing .mkt-i-bench .b-you .by-v { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 24px; color: var(--text-dim); line-height: 1; }
#page-marketing .mkt-i-bench .b-you .by-l { font-size: 10px; color: var(--text-dim); letter-spacing: .04em; text-transform: uppercase; font-weight: 700; }
#page-marketing .mkt-i-b-track { position: relative; height: 34px; margin: 14px 0 6px; }
#page-marketing .mkt-i-b-axis { position: absolute; left: 0; right: 0; top: 18px; height: 8px; border-radius: 5px; background: rgba(255,255,255,0.06); overflow: hidden; }
#page-marketing .mkt-i-b-med { position: absolute; top: 8px; width: 2px; height: 28px; background: var(--text-dim); border-radius: 2px; transform: translateX(-50%); box-shadow: 0 0 0 3px rgba(22,20,15,0.85); opacity: .5; }
#page-marketing .mkt-i-b-foot { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-dim); margin-top: 8px; }
#page-marketing .mkt-i-bench .b-src { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border); font-size: 10px; color: var(--text-dim); display: flex; align-items: center; gap: 6px; }
#page-marketing .mkt-i-moat-note { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 11px 15px; border-radius: 12px; background: linear-gradient(100deg,rgba(139,111,214,0.12),rgba(255,255,255,0.015) 60%); border: 1px solid rgba(139,111,214,0.3); font-size: 11.5px; color: var(--text); }

/* spend recommendation + autonomy */
#page-marketing .mkt-i-spend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
#page-marketing .mkt-i-reco-card { background: linear-gradient(150deg,rgba(255,255,255,0.03),rgba(255,255,255,0.012) 60%); border: 1px solid var(--border); border-radius: 13px; padding: 15px 17px; margin-bottom: 15px; }
#page-marketing .mkt-i-reco-card .rc-h { display: flex; align-items: center; gap: 8px; font-family: 'Montserrat', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 9px; }
#page-marketing .mkt-i-reco-card .rc-body { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
#page-marketing .mkt-i-realloc { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
#page-marketing .mkt-i-ra-row { display: grid; grid-template-columns: 118px 1fr 86px; align-items: center; gap: 13px; }
#page-marketing .mkt-i-ra-row .ra-n { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 11.5px; color: var(--text-bright); }
#page-marketing .mkt-i-ra-track { position: relative; height: 26px; border-radius: 7px; background: rgba(255,255,255,0.04); overflow: hidden; border: 1px solid var(--border); }
#page-marketing .mkt-i-ra-track .ra-cur { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255,255,255,0.14); }
#page-marketing .mkt-i-ra-track .ra-rec { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 7px; opacity: .9; background: rgba(255,255,255,0.1); }
#page-marketing .mkt-i-ra-delta { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 12.5px; text-align: right; color: var(--text-dim); }
#page-marketing .mkt-i-realloc-legend { display: flex; gap: 16px; font-size: 10px; color: var(--text-dim); margin-top: 12px; flex-wrap: wrap; }

/* autonomy dial */
#page-marketing .mkt-i-auton-h { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
#page-marketing .mkt-i-auton-h .ah-ic { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(150deg,rgba(201,168,76,0.22),rgba(201,168,76,0.06)); display: grid; place-items: center; flex: none; }
#page-marketing .mkt-i-auton-h .ah-tag { margin-left: auto; font-family: 'Montserrat', sans-serif; font-size: 8.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); background: rgba(201,168,76,0.13); border: 1px solid rgba(201,168,76,0.32); border-radius: 999px; padding: 2px 9px; }
#page-marketing .mkt-i-auton-sub { font-size: 11px; color: var(--text-dim); margin: 2px 0 15px; }
#page-marketing .mkt-i-dial { display: flex; flex-direction: column; gap: 0; position: relative; }
#page-marketing .mkt-i-dial-stop { display: flex; align-items: flex-start; gap: 13px; padding: 11px 13px; border-radius: 12px; position: relative; border: 1px solid transparent; }
#page-marketing .mkt-i-dial-stop .ds-dot { width: 18px; height: 18px; border-radius: 50%; flex: none; margin-top: 1px; border: 2px solid var(--border-strong); background: var(--surface); display: grid; place-items: center; }
#page-marketing .mkt-i-dial-stop.on .ds-dot { border-color: var(--gold); }
#page-marketing .mkt-i-dial-stop .ds-body { flex: 1; min-width: 0; }
#page-marketing .mkt-i-dial-stop .ds-t { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12.5px; color: var(--text); display: flex; align-items: center; gap: 8px; }
#page-marketing .mkt-i-dial-stop.on .ds-t { color: var(--text-bright); }
#page-marketing .mkt-i-dial-stop .ds-t .ds-def { font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); background: rgba(201,168,76,0.14); border: 1px solid rgba(201,168,76,0.32); border-radius: 999px; padding: 1px 6px; }
#page-marketing .mkt-i-dial-stop .ds-d { font-size: 11px; color: var(--text-dim); margin-top: 3px; line-height: 1.4; }
#page-marketing .mkt-i-dial-stop .ds-line { position: absolute; left: 21px; top: 34px; bottom: -9px; width: 2px; background: var(--border); z-index: 0; }
#page-marketing .mkt-i-dial-stop:last-child .ds-line { display: none; }

/* budget cap meter */
#page-marketing .mkt-i-cap-meter { margin-top: 13px; }
#page-marketing .mkt-i-cap-meter .cm-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; color: var(--text-dim); margin-bottom: 7px; }
#page-marketing .mkt-i-cap-bar { height: 11px; border-radius: 6px; background: rgba(255,255,255,0.06); overflow: hidden; position: relative; border: 1px solid var(--border); }
#page-marketing .mkt-i-cap-bar .cap-line { position: absolute; top: -3px; bottom: -3px; width: 2px; background: rgba(224,85,85,0.55); right: 0; }
#page-marketing .mkt-i-cap-foot { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-dim); margin-top: 7px; }

/* guardrails strip */
#page-marketing .mkt-i-guards { margin-top: 15px; padding: 13px 15px; border-radius: 12px; background: rgba(255,255,255,0.018); border: 1px solid var(--border); }
#page-marketing .mkt-i-guards-h { display: flex; align-items: center; gap: 8px; font-family: 'Montserrat', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 11px; }
#page-marketing .mkt-i-guard { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--text); padding: 6px 0; }
#page-marketing .mkt-i-guard .g-cap { margin-left: auto; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 12.5px; color: var(--text-dim); }
/* FIX_NO_FAKE_GUARDRAIL_PROMISE_S1_2026_08_04 — ADDITIVE ONLY; no rule above is changed or retired.
   Marketing needs its OWN #page-marketing-scoped deferral rule: the procurement deferral tag is
   scoped under a #page-procurement ID host, so borrowing that class here would match no rule at all
   and render as unstyled text. Attribute selector gives (1,2,0)/(1,2,1), beating the (1,1,0)/(1,1,1)
   base rules in this same host. */
#page-marketing .mkt-i-guard[data-defer] { opacity: .5; pointer-events: none; }
#page-marketing .mkt-i-cap-meter[data-defer] { opacity: .5; }
#page-marketing .mkt-i-g-defer { font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); font-family: 'Montserrat', sans-serif; font-weight: 700; opacity: .8; white-space: nowrap; }
#page-marketing .mkt-i-gfoot { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 10px; color: var(--text-dim); line-height: 1.45; }

/* cross-specialist boundary - one event, three lenses */
#page-marketing .mkt-i-one-source { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 11.5px; color: var(--text-dim); background: rgba(255,255,255,0.018); border: 1px solid var(--border); border-radius: 11px; padding: 10px 15px; }
#page-marketing .mkt-i-lens-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; margin-top: 4px; }
#page-marketing .mkt-i-lens { border-radius: 13px; padding: 15px 16px; border: 1px solid var(--border); background: rgba(255,255,255,0.018); position: relative; overflow: hidden; }
#page-marketing .mkt-i-lens.owns { background: linear-gradient(160deg,rgba(201,168,76,0.1),rgba(255,255,255,0.015) 60%); border-color: rgba(201,168,76,0.32); }
#page-marketing .mkt-i-lens .l-tag { font-family: 'Montserrat', sans-serif; font-size: 8.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--lc,var(--gold)); margin-bottom: 9px; display: flex; align-items: center; gap: 7px; }
#page-marketing .mkt-i-lens .l-tag .l-ic { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: rgba(255,255,255,0.05); flex: none; }
#page-marketing .mkt-i-lens .l-tag .owns-pill { margin-left: auto; font-size: 7.5px; color: var(--gold); background: rgba(201,168,76,0.16); border: 1px solid rgba(201,168,76,0.36); border-radius: 999px; padding: 1px 6px; }
#page-marketing .mkt-i-lens .l-metric { margin-top: 10px; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 18px; color: var(--text-dim); }
#page-marketing .mkt-i-lens.cm { --lc: #3FB6A8; }
#page-marketing .mkt-i-lens.fin { --lc: var(--blue); }

@media (max-width: 1080px) {
  #page-marketing .mkt-i-roi-grid, #page-marketing .mkt-i-spend-grid { grid-template-columns: 1fr; }
  #page-marketing .mkt-i-bench-grid { grid-template-columns: 1fr; }
  #page-marketing .mkt-i-lens-grid { grid-template-columns: 1fr; }
}
/* FIX_ULTRAMARATHON_MKT_INTEL_2026_06_19 - end Marketing Intelligence scoped CSS. */

/* ══════════════════════════════════════════════════════════════════════════
   FIX_ULTRAMARATHON_MKT_STUDIO_2026_06_19 - Content Studio scoped CSS.
   Uniquely-prefixed .mkt-cs-* (NOT colliding with .mkt-* / .mkt-an-* / .mkt-i-*),
   scoped under #page-marketing, ASCII-only. Mirrors the sample
   design_samples/marketing/marketing_content_studio.html style block (L155-417) for
   the studio-grid + create-rail + composer + queue/log shapes, REUSING the shipped
   shell idioms (.mkt-scroll / .mkt-head-row / .mkt-when / .mkt-statusline / .mkt-dot /
   .mkt-panel / .mkt-panel-h / .mkt-panel-sub / .mkt-hint / .mkt-empty / .mkt-coming /
   .mkt-coming-tag / .mkt-footnote) rather than re-authoring them. The sample's
   .toast / .copy-area / .casl / .visual-block / .draft-head / .comp-gen draft-and-fire
   surfaces are NOT shipped this run (HONEST-COMING - only the empty composer state
   ships). The dial + Draft-it button render INERT (display-only / disabled). */

/* autonomy posture bar */
#page-marketing .mkt-cs-posture { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 14px 0 18px; padding: 13px 16px; border-radius: 14px; background: linear-gradient(150deg,rgba(201,168,76,0.10),rgba(255,255,255,0.018) 60%); border: 1px solid rgba(201,168,76,0.26); box-shadow: var(--inner-hi); }
#page-marketing .mkt-cs-posture .pb-ic { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; background: rgba(201,168,76,0.16); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); }
#page-marketing .mkt-cs-posture .pb-txt { flex: 1; min-width: 220px; }
#page-marketing .mkt-cs-posture .pb-sub { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
#page-marketing .mkt-cs-posture .posture-note { font-size: 10.5px; color: var(--text-dim); flex-basis: 100%; margin-top: 2px; }
/* the dial renders DISPLAY-ONLY this run - no .step is click-wired; non-active steps are .mkt-coming */
#page-marketing .mkt-cs-dial { display: flex; align-items: center; gap: 0; border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; background: rgba(0,0,0,0.18); }
#page-marketing .mkt-cs-dial .step { font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; color: var(--text-dim); padding: 8px 13px; position: relative; white-space: nowrap; border-right: 1px solid var(--border); }
#page-marketing .mkt-cs-dial .step.mkt-coming { cursor: not-allowed; opacity: .55; }

/* studio layout: create rail + composer canvas */
#page-marketing .mkt-cs-grid { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: start; }
@media (max-width: 1180px) { #page-marketing .mkt-cs-grid { grid-template-columns: 1fr; } }
#page-marketing .mkt-cs-rail { display: flex; flex-direction: column; gap: 16px; }
#page-marketing .mkt-cs-field-label { font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 9px; display: flex; align-items: center; gap: 7px; }
#page-marketing .mkt-cs-field-label .step-n { width: 16px; height: 16px; border-radius: 5px; background: rgba(201,168,76,0.18); color: var(--gold); font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 800; display: grid; place-items: center; letter-spacing: 0; }

/* type picker */
#page-marketing .mkt-cs-pick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#page-marketing .mkt-cs-pick { display: flex; flex-direction: column; gap: 6px; padding: 11px 11px 10px; border-radius: 11px; border: 1px solid var(--border); background: rgba(255,255,255,0.018); position: relative; }
#page-marketing .mkt-cs-pick .pk-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; }
#page-marketing .mkt-cs-pick .pk-n { font-size: 11px; font-weight: 600; color: var(--text); line-height: 1.25; font-family: 'Montserrat', sans-serif; }
#page-marketing .mkt-cs-pick .pk-m { font-size: 9.5px; color: var(--text-dim); }
#page-marketing .mkt-cs-pick.on .pk-n { color: var(--text-bright); }
#page-marketing .mkt-cs-pick .pk-ic.ig { background: rgba(225,48,108,0.16); }
#page-marketing .mkt-cs-pick .pk-ic.gb { background: rgba(91,155,213,0.16); }
#page-marketing .mkt-cs-pick .pk-ic.em { background: rgba(76,175,125,0.16); }
#page-marketing .mkt-cs-pick .pk-ic.story { background: rgba(139,111,214,0.16); }
#page-marketing .mkt-cs-pick .pk-ic.rev { background: rgba(232,148,58,0.16); }
#page-marketing .mkt-cs-pick .pk-ic.camp { background: rgba(201,168,76,0.16); }

/* occasion list */
#page-marketing .mkt-cs-occ-list { display: flex; flex-direction: column; gap: 7px; }
#page-marketing .mkt-cs-occ { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: rgba(255,255,255,0.018); position: relative; }
#page-marketing .mkt-cs-occ .oc-ic { width: 24px; height: 24px; border-radius: 7px; flex: none; display: grid; place-items: center; background: rgba(255,255,255,0.05); }
#page-marketing .mkt-cs-occ .oc-body { flex: 1; min-width: 0; }
#page-marketing .mkt-cs-occ .oc-n { font-size: 11.5px; font-weight: 600; color: var(--text); line-height: 1.2; }
#page-marketing .mkt-cs-occ .oc-m { font-size: 10px; color: var(--text-dim); margin-top: 1px; }
#page-marketing .mkt-cs-occ.on .oc-n { color: var(--text-bright); }
#page-marketing .mkt-cs-occ.on .oc-ic { background: rgba(201,168,76,0.2); }
/* honest sales-seam hint (NO fabricated offer name - renders the coming hint, not a real offer) */
#page-marketing .mkt-cs-occ .oc-seam { margin-top: 5px; display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 600; color: var(--text-dim); background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; font-family: 'Montserrat', sans-serif; }

/* Draft-it button - HONEST-COMING-DISABLED (the primary fire action; NEVER wired) */
#page-marketing .mkt-cs-draft-btn { width: 100%; margin-top: 2px; display: flex; align-items: center; justify-content: center; gap: 9px; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: #1a160c; border: none; border-radius: 12px; padding: 13px; background: linear-gradient(180deg,var(--gold),var(--gold-soft)); box-shadow: 0 8px 24px -8px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,0.3); }
#page-marketing .mkt-cs-draft-btn[disabled], #page-marketing .mkt-cs-draft-btn.mkt-coming { opacity: .5; cursor: not-allowed; }
#page-marketing .mkt-cs-draft-coming { margin-top: 7px; display: flex; align-items: center; justify-content: center; }

#page-marketing .mkt-cs-engine-cue { font-size: 10px; color: var(--text-dim); line-height: 1.45; margin-top: 2px; padding: 9px 11px; border-radius: 9px; background: rgba(255,255,255,0.018); border: 1px solid var(--border); }
#page-marketing .mkt-cs-engine-cue .eng-pill { color: var(--gold); font-weight: 600; }

/* composer canvas - only the EMPTY state ships this run */
#page-marketing .mkt-cs-composer { min-height: 420px; display: flex; flex-direction: column; }
#page-marketing .mkt-cs-comp-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; color: var(--text-dim); padding: 40px 20px; }
#page-marketing .mkt-cs-comp-empty .ce-ic { width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(150deg,rgba(201,168,76,0.14),rgba(255,255,255,0.02)); border: 1px solid rgba(201,168,76,0.22); }

/* approval queue + scheduled/published log row (both structured-empty this run) */
#page-marketing .mkt-cs-queue-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
@media (max-width: 1180px) { #page-marketing .mkt-cs-queue-grid { grid-template-columns: 1fr; } }

/* FIX_ULTRAMARATHON_MKT_STUDIO_2026_06_19 - end Content Studio scoped CSS. */

/* ═══════════════════════════════════════════════════════════════════════════
   FIX_ULTRAMARATHON_MKT_CAMPAIGNS_2026_06_19 — Campaigns scoped CSS. ULTRAMARATHON
   marketing surface 5 (the ACTION surface), ported from
   design_samples/marketing/marketing_campaigns.html (.kpis / .toolbar / .seg /
   .btn-new / campaign board grp+camp+perf-funnel / 5-step builder wizard idiom) and
   SCOPED under #page-marketing so it cannot leak. Uniquely prefixed .mkt-cmp-* so no
   name collides with the shipped .mkt-* / .mkt-an-* / .mkt-cs-* idioms. The shell
   tokens (--gold/--green/--blue/--amber/--text/--text-bright/--text-dim/--border/
   --border-strong etc.) are inherited from the portal :root - NOT re-declared.
   Everything renders HONEST-EMPTY by default (the campaign engine does not exist yet):
   the campaign board keeps its 3 status-group headers + an empty card-skeleton per
   group (structured-empty, refinement 2), each skeleton's 4-cell performance funnel
   keeps its container + cells "-" (structured-empty CHART, refinement 1), the builder
   wizard keeps its full 5-step structure with every control inert. Action affordances
   (New campaign, Draft in Studio, Save as draft, every builder option) carry a
   .mkt-coming disabled treatment (HONEST-COMING, NEVER wired to fire). ASCII-only
   comments + path data throughout (a non-ASCII char silently drops the rule from the
   CSSOM - the established .crm-layout hazard). */

/* toolbar: status filter + new-campaign button */
#page-marketing .mkt-cmp-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
#page-marketing .mkt-cmp-toolbar .mkt-cmp-spacer { flex: 1; }
#page-marketing .mkt-cmp-seg { display: inline-flex; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; }
#page-marketing .mkt-cmp-seg .mkt-cmp-segbtn { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; color: var(--text-dim); background: transparent; border: none; border-radius: 8px; padding: 7px 12px; display: inline-flex; align-items: center; gap: 6px; cursor: default; }
#page-marketing .mkt-cmp-seg .mkt-cmp-segbtn .mkt-cmp-cnt { font-size: 9.5px; font-weight: 700; color: var(--text-dim); background: rgba(255,255,255,0.06); border-radius: 999px; padding: 0 6px; line-height: 16px; }
#page-marketing .mkt-cmp-seg .mkt-cmp-segbtn.on .mkt-cmp-cnt { color: var(--gold); background: rgba(201,168,76,0.16); }
#page-marketing .mkt-cmp-newbtn { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; color: var(--text-dim); cursor: not-allowed; border: 1px solid var(--border); border-radius: 9px; padding: 9px 16px; background: rgba(255,255,255,0.03); display: inline-flex; align-items: center; gap: 8px; opacity: .7; }

/* campaign board status-group header (mirror of sample .grp-h) */
#page-marketing .mkt-cmp-grp { margin-bottom: 8px; }
#page-marketing .mkt-cmp-grp-h { display: flex; align-items: center; gap: 10px; margin: 22px 0 12px; }
#page-marketing .mkt-cmp-grp-h:first-of-type { margin-top: 4px; }
#page-marketing .mkt-cmp-grp-h .mkt-cmp-gdot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--text-dim); }
#page-marketing .mkt-cmp-grp-h.running .mkt-cmp-gdot { background: var(--green); box-shadow: 0 0 10px var(--green); }
#page-marketing .mkt-cmp-grp-h.scheduled .mkt-cmp-gdot { background: var(--blue); box-shadow: 0 0 10px var(--blue); }
#page-marketing .mkt-cmp-grp-h.ended .mkt-cmp-gdot { background: var(--text-dim); }
#page-marketing .mkt-cmp-grp-h .mkt-cmp-gcount { font-size: 10px; font-weight: 700; font-family: 'Montserrat', sans-serif; color: var(--text-dim); background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; }
#page-marketing .mkt-cmp-grp-h .mkt-cmp-gline { flex: 1; height: 1px; background: linear-gradient(90deg,var(--border-strong),transparent); }

/* empty campaign-card skeleton (structured-empty per group, refinement 2) */
#page-marketing .mkt-cmp-skel { position: relative; overflow: hidden; border: 1px dashed var(--border-strong); border-radius: 15px; padding: 16px 17px 15px; background: rgba(255,255,255,0.012); }
#page-marketing .mkt-cmp-skel .mkt-cmp-skel-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
#page-marketing .mkt-cmp-skel .mkt-cmp-skel-name { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13.5px; color: var(--text-dim); }
#page-marketing .mkt-cmp-skel .mkt-cmp-skel-pill { font-size: 9px; font-weight: 700; font-family: 'Montserrat', sans-serif; letter-spacing: .05em; text-transform: uppercase; border-radius: 999px; padding: 2px 8px; color: var(--text-dim); background: rgba(255,255,255,0.04); border: 1px solid var(--border); margin-left: auto; }
#page-marketing .mkt-cmp-skel .mkt-cmp-skel-sub { font-size: 10.5px; color: var(--text-dim); line-height: 1.45; margin-bottom: 11px; }
/* 4-cell performance mini funnel inside the skeleton (structured-empty CHART, refinement 1) */
#page-marketing .mkt-cmp-perf { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: rgba(0,0,0,0.14); opacity: .7; }
#page-marketing .mkt-cmp-perf .mkt-cmp-pf { padding: 8px 6px; text-align: center; }
#page-marketing .mkt-cmp-perf .mkt-cmp-pf .mkt-cmp-pfn { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 14px; color: var(--text-dim); line-height: 1; }
#page-marketing .mkt-cmp-perf .mkt-cmp-pf .mkt-cmp-pfl { font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); margin-top: 4px; font-weight: 700; }

/* the structured-empty builder wizard preview (full 5-step structure, inert) */
#page-marketing .mkt-cmp-wiz { margin-top: 22px; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(170deg,rgba(255,255,255,0.02),rgba(255,255,255,0.008)); padding: 20px 22px 22px; }
#page-marketing .mkt-cmp-wiz-h { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
#page-marketing .mkt-cmp-wiz-sub { font-size: 11.5px; color: var(--text-dim); line-height: 1.5; margin-bottom: 16px; max-width: 640px; }
#page-marketing .mkt-cmp-steprail { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; flex-wrap: wrap; }
#page-marketing .mkt-cmp-bs { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700; font-family: 'Montserrat', sans-serif; color: var(--text-dim); }
#page-marketing .mkt-cmp-bs .mkt-cmp-bn { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border-strong); display: grid; place-items: center; font-size: 10px; flex: none; }
#page-marketing .mkt-cmp-barrow { color: var(--text-dim); opacity: .5; }
#page-marketing .mkt-cmp-wsec { margin-bottom: 16px; }
#page-marketing .mkt-cmp-wsec-h { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
#page-marketing .mkt-cmp-wsec-h .mkt-cmp-dn { font-family: 'Montserrat', sans-serif; font-size: 11.5px; font-weight: 700; color: var(--text); }
#page-marketing .mkt-cmp-wsec-h .mkt-cmp-dline { flex: 1; height: 1px; background: linear-gradient(90deg,var(--border-strong),transparent); }
#page-marketing .mkt-cmp-optgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
#page-marketing .mkt-cmp-opt { border: 1px dashed var(--border); border-radius: 11px; padding: 13px 12px; background: rgba(255,255,255,0.012); text-align: center; opacity: .65; cursor: not-allowed; }
#page-marketing .mkt-cmp-opt .mkt-cmp-ot { font-size: 11.5px; font-weight: 700; font-family: 'Montserrat', sans-serif; color: var(--text); }
#page-marketing .mkt-cmp-opt .mkt-cmp-ox { font-size: 9.5px; color: var(--text-dim); margin-top: 3px; line-height: 1.35; }
#page-marketing .mkt-cmp-offerempty { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 12px; background: rgba(91,155,213,0.05); border: 1px dashed rgba(91,155,213,0.3); font-size: 11px; color: var(--text-dim); line-height: 1.45; }
#page-marketing .mkt-cmp-wnote { font-size: 11px; color: var(--text-dim); line-height: 1.5; background: rgba(255,255,255,0.02); border: 1px dashed var(--border-strong); border-radius: 10px; padding: 11px 13px; margin-top: 14px; }
#page-marketing .mkt-cmp-wactions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
#page-marketing .mkt-cmp-wbtn { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; color: var(--text-dim); cursor: not-allowed; border: 1px solid var(--border); border-radius: 9px; padding: 9px 16px; background: rgba(255,255,255,0.03); display: inline-flex; align-items: center; gap: 8px; opacity: .7; }

@media (max-width: 980px) {
  #page-marketing .mkt-cmp-optgrid { grid-template-columns: 1fr; }
}

/* FIX_ULTRAMARATHON_MKT_CAMPAIGNS_2026_06_19 - end Campaigns scoped CSS. */

/* ═══════════════════════════════════════════════════════════════════════════
   FIX_MARKETING_CONTENT_CALENDAR_S1_2026_06_22 — Marketing Content Calendar scoped CSS.
   Marketing rail tool, ported section-by-section from
   design_samples/marketing/marketing_content_calendar.html (.toolbar / .seg / .period /
   .chan-filter / .cal-legend / .month / .week / .up-list / .popover idioms) and SCOPED
   under #page-marketing. NEW .mkt-cc-* idioms for the month grid + week grid + filter
   toolbar + upcoming rail + read-only post popover; REUSES the shipped shell idioms
   (.mkt-scroll / .mkt-head-row / .mkt-when / .mkt-statusline / .mkt-dot / .mkt-panel /
   .mkt-panel-h / .mkt-panel-sub / .mkt-hint / .mkt-empty / .mkt-coming / .mkt-coming-tag /
   .mkt-footnote) rather than re-authoring them. FULL-WIDTH by construction — the .mkt-scroll
   envelope has no max-width cap; the month/week grids use repeat(N,1fr); the two-column
   .mkt-cc-grid is 1fr + fixed rail so the calendar takes ALL remaining width. ASCII-only
   comment body (CSSOM-drop hazard). Sample CSS vars remapped to the shipped token names
   (--head -> --text-bright, --dim -> --text-dim, --ig channel colour inlined). */

/* toolbar — month/week toggle + period stepper + channel filter */
#page-marketing .mkt-cc-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
#page-marketing .mkt-cc-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: rgba(255,255,255,0.02); }
#page-marketing .mkt-cc-period { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--text); border: 1px solid var(--border); border-radius: 9px; padding: 5px 7px; }
#page-marketing .mkt-cc-period .step { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; border: 1px solid var(--border); background: rgba(255,255,255,0.03); color: var(--text-dim); }
#page-marketing .mkt-cc-period .step.mkt-coming { cursor: not-allowed; opacity: .6; }
#page-marketing .mkt-cc-period .plabel { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--text-bright); min-width: 120px; text-align: center; }
#page-marketing .mkt-cc-chan-filter { display: flex; align-items: center; gap: 7px; margin-left: auto; }
#page-marketing .mkt-cc-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; font-family: 'Montserrat', sans-serif; color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px; cursor: pointer; transition: .16s var(--ease); background: rgba(255,255,255,0.02); }
#page-marketing .mkt-cc-chip .swc { width: 9px; height: 9px; border-radius: 3px; }

/* legend (channel + status) */
#page-marketing .mkt-cc-legend { display: flex; gap: 16px; margin: 0 0 13px; font-size: 10.5px; color: var(--text-dim); flex-wrap: wrap; }
#page-marketing .mkt-cc-legend .sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
#page-marketing .mkt-cc-legend .sw.dash { border: 1px dashed rgba(255,255,255,0.3); background: transparent; }
#page-marketing .mkt-cc-stpill { font-family: 'Montserrat', sans-serif; font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-radius: 999px; padding: 1px 7px; }
#page-marketing .mkt-cc-stpill.draft { color: var(--gold); background: rgba(201,168,76,0.14); border: 1px solid rgba(201,168,76,0.34); }
#page-marketing .mkt-cc-stpill.sched { color: var(--blue); background: rgba(91,155,213,0.14); border: 1px solid rgba(91,155,213,0.34); }
#page-marketing .mkt-cc-stpill.pub { color: var(--green); background: rgba(76,175,125,0.14); border: 1px solid rgba(76,175,125,0.34); }

/* layout: calendar (full remaining width) + upcoming rail */
#page-marketing .mkt-cc-grid { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }

/* MONTH grid — 7 equal cols, FULL-WIDTH */
#page-marketing .mkt-cc-month { display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; }
#page-marketing .mkt-cc-dowh { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); text-align: center; padding: 2px 0 4px; }
#page-marketing .mkt-cc-mcell { border: 1px solid var(--border); border-radius: 9px; min-height: 92px; padding: 6px 6px 5px; background: rgba(255,255,255,0.015); box-shadow: var(--inner-hi); display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
#page-marketing .mkt-cc-mcell .dnum { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; color: var(--text); align-self: flex-start; }
#page-marketing .mkt-cc-mcell.today .dnum { color: var(--gold); }
#page-marketing .mkt-cc-mchip { position: relative; border-radius: 7px; padding: 4px 7px 4px 11px; font-size: 9.5px; line-height: 1.25; color: var(--text); background: rgba(255,255,255,0.03); border: 1px solid var(--border); cursor: pointer; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: .16s var(--ease); }
#page-marketing .mkt-cc-mchip.is-draft { border-color: rgba(201,168,76,0.4); background: linear-gradient(150deg,rgba(201,168,76,0.12),rgba(255,255,255,0.02) 70%); color: var(--text-bright); }
#page-marketing .mkt-cc-mchip.is-pub { opacity: .78; }
#page-marketing .mkt-cc-mslot { border: 1px dashed rgba(255,255,255,0.13); border-radius: 7px; min-height: 22px; display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
#page-marketing .mkt-cc-mslot.mkt-coming { cursor: not-allowed; opacity: .6; }
#page-marketing .mkt-cc-mcell .more { font-size: 8.5px; color: var(--text-dim); font-family: 'Montserrat', sans-serif; font-weight: 600; padding-left: 2px; }

/* WEEK grid — 5 working days, FULL-WIDTH */
#page-marketing .mkt-cc-week { display: grid; grid-template-columns: repeat(5,1fr); gap: 9px; }
#page-marketing .mkt-cc-wday { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
#page-marketing .mkt-cc-wdh { display: flex; flex-direction: column; gap: 1px; padding: 0 2px 2px; }
#page-marketing .mkt-cc-wdh .dow { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
#page-marketing .mkt-cc-wdh .dnum { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 800; color: var(--text-bright); line-height: 1; }
#page-marketing .mkt-cc-wdh.today .dnum, #page-marketing .mkt-cc-wdh.today .dow { color: var(--gold); }
#page-marketing .mkt-cc-wtile { position: relative; border-radius: 10px; padding: 9px 9px 8px; min-height: 64px; overflow: hidden; border: 1px solid var(--border); background: rgba(255,255,255,0.02); box-shadow: var(--inner-hi); cursor: pointer; transition: .18s var(--ease); }
#page-marketing .mkt-cc-wtile.is-draft { --cc-c: var(--gold); border-color: rgba(201,168,76,0.42); background: linear-gradient(150deg,rgba(201,168,76,0.12),rgba(255,255,255,0.02) 60%); }
#page-marketing .mkt-cc-wtile.is-draft .cap { color: var(--text-bright); }
#page-marketing .mkt-cc-wtile .ch-row { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; }
#page-marketing .mkt-cc-wtile .ch-ic { width: 16px; height: 16px; border-radius: 5px; display: grid; place-items: center; flex: none; }
#page-marketing .mkt-cc-wtile.ig .ch-ic { background: rgba(225,48,108,0.16); }
#page-marketing .mkt-cc-wtile.gb .ch-ic { background: rgba(91,155,213,0.16); }
#page-marketing .mkt-cc-wtile.em .ch-ic { background: rgba(76,175,125,0.16); }
#page-marketing .mkt-cc-wtile .ch-time { font-family: 'Montserrat', sans-serif; font-size: 8.5px; color: var(--text-dim); font-weight: 600; letter-spacing: .03em; margin-left: auto; }
#page-marketing .mkt-cc-wtile .st-dot { width: 7px; height: 7px; border-radius: 50%; margin-left: 5px; }
#page-marketing .mkt-cc-wtile .st-dot.pub { background: var(--green); }
#page-marketing .mkt-cc-wtile .cap { font-size: 10.5px; line-height: 1.32; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#page-marketing .mkt-cc-wtile .badge-d { position: absolute; top: 7px; right: 8px; font-family: 'Montserrat', sans-serif; font-size: 7.5px; font-weight: 800; letter-spacing: .06em; color: var(--gold); background: rgba(201,168,76,0.18); border: 1px solid rgba(201,168,76,0.4); border-radius: 999px; padding: 1px 6px; text-transform: uppercase; }
#page-marketing .mkt-cc-wslot { border: 1px dashed rgba(255,255,255,0.14); border-radius: 10px; min-height: 64px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.012); color: var(--text-dim); }
#page-marketing .mkt-cc-wslot.mkt-coming { cursor: not-allowed; opacity: .6; }

/* UPCOMING / QUEUE rail */
#page-marketing .mkt-cc-uphead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
#page-marketing .mkt-cc-upcount { font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 700; color: var(--text-bright); background: rgba(201,168,76,0.16); border: 1px solid rgba(201,168,76,0.36); border-radius: 999px; padding: 3px 11px; }
#page-marketing .mkt-cc-uplist { display: flex; flex-direction: column; gap: 9px; }
#page-marketing .mkt-cc-up { position: relative; display: flex; gap: 11px; padding: 11px 13px; border-radius: 12px; background: rgba(255,255,255,0.018); border: 1px solid var(--border); overflow: hidden; cursor: pointer; transition: .16s var(--ease); }
#page-marketing .mkt-cc-up .uic { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; }
#page-marketing .mkt-cc-up.ig .uic { background: rgba(225,48,108,0.14); }
#page-marketing .mkt-cc-up.gb .uic { background: rgba(91,155,213,0.14); }
#page-marketing .mkt-cc-up.em .uic { background: rgba(76,175,125,0.14); }
#page-marketing .mkt-cc-up .up-body { flex: 1; min-width: 0; }
#page-marketing .mkt-cc-up .up-top { display: flex; align-items: center; gap: 7px; }
#page-marketing .mkt-cc-up .up-top .ut { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11.5px; color: var(--text-bright); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
#page-marketing .mkt-cc-up .um { font-size: 10px; color: var(--text-dim); margin-top: 2px; }
#page-marketing .mkt-cc-up .area { font-size: 9px; color: var(--gold); margin-top: 3px; display: inline-flex; align-items: center; gap: 4px; }

/* read-only post detail popover (reuses the shipped .mkt-popover machinery + scrim) */
#page-marketing .mkt-cc-pop-cap { font-size: 12px; color: var(--text); margin: 6px 0 10px; line-height: 1.5; }
#page-marketing .mkt-cc-pop-row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 11.5px; }
#page-marketing .mkt-cc-pop-row .l { color: var(--text-dim); }
#page-marketing .mkt-cc-pop-act { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
#page-marketing .mkt-cc-pop-act .b.mkt-coming { cursor: not-allowed; opacity: .62; }

@media (max-width: 1100px) {
  #page-marketing .mkt-cc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  #page-marketing .mkt-cc-week { grid-template-columns: 1fr; }
}
/* FIX_MARKETING_CONTENT_CALENDAR_S1_2026_06_22 — end Marketing Content Calendar scoped CSS. */


/* ===========================================================================
   FIX_MARKETING_CHANNELS_S1_2026_06_22 - Marketing Channels scoped CSS.
   NEW COMING surface, rail-selectable sub-view of the shipped #page-marketing
   shell, built section-by-section from design_samples/marketing/marketing_channels.html
   (L154-435) and SCOPED under #page-marketing with the .mch-* prefix so it cannot
   leak into other specialist surfaces. The shell tokens (--gold/--gold-soft/
   --gold-glow/--card/--border/--border-strong/--green/--amber/--red/--blue/--text/
   --text-dim/--text-bright/--inner-hi/--ease) are inherited from the portal :root -
   NOT re-declared (the sample's standalone :root --dim/--head map to portal
   --text-dim/--text-bright). Everything renders HONEST-EMPTY for a real account: the
   5-tile KPI band renders "-", the 6 channel cards render "Not connected" + every
   metric "-", the per-channel comparison table renders skeleton rows all "-", the
   ranking column renders empty rank rows, the share-of-reach donut renders the empty
   ring + "-%" legend, and the per-channel reach-trend chart keeps its axes/gridlines/
   month-labels with a centred "appears once channels connect" overlay - NO plotted
   series. Every Connect / toggle / Open-Analytics action is HONEST-COMING (.mkt-coming,
   visibly disabled, NEVER wired to fire a connect/publish/store-write). FULL-WIDTH by
   construction: the wrapper has no max-width cap; grids use repeat(N,1fr). ZERO
   fabrication on real - the sample's placeholder seed (channel data, splits, rankings)
   is NOT carried; a demo-gated (__isDemoAccount) illustrative seed fills the SAME
   structure for demo only and never leaks to a real account. ASCII-only in CSS
   (CSSOM-drop hazard - matches the shipped Marketing CSS convention). */

  /* section heading rows (mirror sample .sec-h) */
  #page-marketing .mch-sec-h { display: flex; align-items: baseline; gap: 11px; margin: 6px 0 11px; }
  #page-marketing .mch-sec-h .sh-sub { font-size: 11px; color: var(--text-dim); }
  #page-marketing .mch-sh-tag { margin-left: auto; align-self: center; font-size: 9px; font-weight: 700; font-family: 'Montserrat', sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
  #page-marketing .mch-sh-tag.measured { color: #3FB6A8; background: rgba(63,182,168,0.12); border: 1px solid rgba(63,182,168,0.3); }
  #page-marketing .mch-sh-tag.manage { color: var(--gold); background: rgba(201,168,76,0.12); border: 1px solid rgba(201,168,76,0.32); }

  /* KPI band - 5 channel-summary tiles, FULL-WIDTH repeat(5,1fr) */
  #page-marketing .mch-kpis { display: grid; grid-template-columns: repeat(5,1fr); gap: 13px; margin-bottom: 18px; }
  #page-marketing .mch-kpi { position: relative; overflow: hidden; background: linear-gradient(165deg,#262320,#1f1c19); border: 1px solid var(--border); border-radius: 14px; padding: 15px 16px 14px; box-shadow: 0 16px 34px -28px #000, var(--inner-hi); }
  #page-marketing .mch-kpi .lbl { font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-dim); font-weight: 700; margin-bottom: 7px; font-family: 'Montserrat', sans-serif; }
  #page-marketing .mch-kpi .val { font-size: 23px; font-weight: 800; color: var(--text-bright); line-height: 1; font-family: 'Montserrat', sans-serif; }
  #page-marketing .mch-kpi .val.empty { color: var(--text-dim); font-weight: 700; }
  #page-marketing .mch-kpi .sub { font-size: 11.5px; margin-top: 7px; color: var(--text-dim); }

  /* reuse the shipped .mkt-panel for panel chrome; channel-specific panel header */
  #page-marketing .mch-panel-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; gap: 12px; }
  #page-marketing .mch-panel-h .hint { font-size: 11px; color: var(--text-dim); }
  #page-marketing .mch-panel-sub { font-size: 11.5px; color: var(--text-dim); margin: 2px 0 16px; }

  /* SECTION 1 - per-channel connection / management cards, FULL-WIDTH repeat(3,1fr) */
  #page-marketing .mch-chan-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
  #page-marketing .mch-chan-card { position: relative; border: 1px solid var(--border); border-radius: 14px; padding: 15px 16px 14px; background: rgba(255,255,255,0.018); box-shadow: var(--inner-hi); display: flex; flex-direction: column; gap: 11px; min-height: 168px; }
  #page-marketing .mch-cc-head { display: flex; align-items: center; gap: 11px; }
  #page-marketing .mch-cc-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; background: var(--cbg,rgba(201,168,76,0.14)); }
  #page-marketing .mch-cc-title { flex: 1; min-width: 0; }
  #page-marketing .mch-cc-title .cn { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13.5px; color: var(--text-bright); line-height: 1.1; }
  #page-marketing .mch-cc-title .ck { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; }
  #page-marketing .mch-cc-status { font-size: 9px; font-weight: 700; font-family: 'Montserrat', sans-serif; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; flex: none; color: var(--text-dim); background: rgba(255,255,255,0.04); border: 1px solid var(--border); }
  #page-marketing .mch-cc-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 14px; }
  #page-marketing .mch-cc-m { display: flex; flex-direction: column; gap: 1px; }
  #page-marketing .mch-cc-m .m-l { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; font-family: 'Montserrat', sans-serif; }
  #page-marketing .mch-cc-m .m-v { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 14px; color: var(--text-bright); }
  #page-marketing .mch-cc-m .m-v.empty { color: var(--text-dim); }
  #page-marketing .mch-cc-foot { margin-top: auto; display: flex; align-items: center; gap: 9px; }
  #page-marketing .mch-cc-btn { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; border-radius: 8px; padding: 7px 13px; border: 1px solid var(--border-strong); background: rgba(255,255,255,0.04); color: var(--text); white-space: nowrap; box-shadow: var(--inner-hi); }
  #page-marketing .mch-cc-btn.mkt-coming { cursor: not-allowed; opacity: .5; }
  #page-marketing .mch-cc-note { font-size: 10.5px; color: var(--text-dim); }

  /* SECTION 2 - per-channel performance comparison table + ranking */
  #page-marketing .mch-cmp-wrap { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; align-items: start; }
  #page-marketing .mch-perf-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
  #page-marketing .mch-perf-tbl tbody tr:last-child td { border-bottom: none; }
  #page-marketing .mch-perf-tbl .ch-name { display: flex; align-items: center; gap: 9px; }
  #page-marketing .mch-perf-tbl .ch-sw { width: 11px; height: 11px; border-radius: 4px; flex: none; }
  #page-marketing .mch-perf-tbl .dash { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--text-dim); }
  #page-marketing .mch-perf-tbl .num { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--text); }

  /* ranking column (right) */
  #page-marketing .mch-rank-box { border-left: 1px solid var(--border); padding-left: 16px; }
  #page-marketing .mch-rank-h { font-size: 11px; font-weight: 700; color: var(--text-bright); font-family: 'Montserrat', sans-serif; letter-spacing: .3px; margin-bottom: 12px; }
  #page-marketing .mch-rank-row { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--border); }
  #page-marketing .mch-rank-n { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 13px; color: var(--text-dim); width: 18px; text-align: center; flex: none; }
  #page-marketing .mch-rank-sw { width: 9px; height: 9px; border-radius: 50%; flex: none; }
  #page-marketing .mch-rank-name { flex: 1; font-size: 11.5px; color: var(--text); }
  #page-marketing .mch-rank-v { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px; color: var(--text-dim); }
  #page-marketing .mch-rank-v.set { color: var(--text); }

  /* segmented toggle (present but INERT in no-data state) */
  #page-marketing .mch-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }

  /* SECTION 3 - share-of-reach donut (empty ring) */
  #page-marketing .mch-donut-box { display: flex; flex-direction: column; align-items: center; gap: 14px; }
  #page-marketing .mch-donut-wrap { position: relative; width: 140px; height: 140px; }
  #page-marketing .mch-donut-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(rgba(255,255,255,0.05) 0 100%); -webkit-mask: radial-gradient(transparent 56%, #000 57%); mask: radial-gradient(transparent 56%, #000 57%); }
  #page-marketing .mch-donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
  #page-marketing .mch-donut-c .dc-l { font-size: 8.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); }
  #page-marketing .mch-donut-c .dc-v { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 20px; color: var(--text-dim); }
  #page-marketing .mch-donut-c .dc-d { font-size: 9.5px; color: var(--text-dim); margin-top: 2px; }
  #page-marketing .mch-don-legend { display: flex; flex-direction: column; gap: 8px; width: 100%; }
  #page-marketing .mch-dl-row { display: flex; align-items: center; gap: 9px; font-size: 11.5px; }
  #page-marketing .mch-dl-sw { width: 11px; height: 11px; border-radius: 4px; flex: none; }
  #page-marketing .mch-dl-n { flex: 1; color: var(--text); }
  #page-marketing .mch-dl-v { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--text-dim); }
  #page-marketing .mch-dl-v.set { color: var(--text); }

  /* SECTION 4 - per-channel reach-trend chart (structured-empty, axes kept) */
  #page-marketing .mch-chart-shell { position: relative; border-radius: 12px; overflow: hidden; margin-top: 6px; }
  #page-marketing .mch-chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
  #page-marketing .mch-chart-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; font-size: 11.5px; color: var(--text-dim); padding: 0 24px; line-height: 1.5; pointer-events: none; }
  #page-marketing .mch-chart-empty .ce-ic { font-size: 24px; opacity: .7; }

  /* attribution / honesty note (mirror of the live mkt-an-attr-note) */
  #page-marketing .mch-attr-note { display: flex; gap: 11px; align-items: flex-start; margin-top: 16px; padding: 12px 14px; border-radius: 11px; background: rgba(91,155,213,0.05); border: 1px solid rgba(91,155,213,0.16); }
  #page-marketing .mch-attr-note .an-ic { width: 24px; height: 24px; flex: none; }

  /* seam to Analytics (non-duplication pointer; Open-Analytics affordance INERT) */
  #page-marketing .mch-seam { display: flex; align-items: center; gap: 14px; margin-top: 4px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(120deg,rgba(63,182,168,0.07),rgba(255,255,255,0.018)); border: 1px solid var(--border); }
  #page-marketing .mch-seam .sm-ic { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: rgba(63,182,168,0.14); }
  #page-marketing .mch-seam .sm-body { flex: 1; }
  #page-marketing .mch-seam .sm-go { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; color: #3FB6A8; background: rgba(63,182,168,0.12); border: 1px solid rgba(63,182,168,0.3); border-radius: 8px; padding: 8px 14px; white-space: nowrap; }
  #page-marketing .mch-seam .sm-go.mkt-coming { cursor: not-allowed; opacity: .62; }

  /* FULL-WIDTH guarantee - no max-width cap on the channels scroll wrapper or panels */
  #page-marketing .mch-wrap { width: 100%; max-width: none; }

  @media (max-width: 1100px) {
    #page-marketing .mch-cmp-wrap { grid-template-columns: 1fr; }
    #page-marketing .mch-rank-box { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 14px; }
    #page-marketing .mch-chan-grid { grid-template-columns: repeat(2,1fr); }
  }
  @media (max-width: 720px) {
    #page-marketing .mch-kpis { grid-template-columns: repeat(2,1fr); }
    #page-marketing .mch-chan-grid { grid-template-columns: 1fr; }
  }
/* FIX_MARKETING_CHANNELS_S1_2026_06_22 - end Marketing Channels scoped CSS. */


/* ═══════════════════════════════════════════════════════════════════════════
   FIX_MARKETING_AUDIENCE_S1_2026_06_22 — Marketing -> Audience scoped CSS (.maud-*).
   The marketing-lens segmentation surface over aiv_customers, built section-by-section
   from design_samples/marketing/marketing_audience.html. SCOPED under #page-marketing so
   it cannot leak into the other specialist surfaces. The shell tokens
   (--gold/--page/--card/--border/--green/--amber/--red/--blue/--text/--text-dim/
   --text-bright/--inner-hi/--ease) are inherited from the portal :root - NOT re-declared.

   REUSES the already-shipped #page-marketing .mkt-* shell classes verbatim where the
   sample reuses them (.mkt-scroll / .mkt-kpi shell + .mkt-lbl/.mkt-val/.mkt-val.empty/
   .mkt-sub / .mkt-panel + .mkt-panel-h/.mkt-hint/.mkt-panel-sub / .mkt-empty /
   .mkt-coming-tag / .mkt-act-btn / .mkt-statusline / .mkt-footnote). NEW audience-only
   structure (the 4-up audience KPI grid + per-KPI accent, the breadcrumb, the section
   headers, the two-axis segment-breakdown bar rows, the per-segment engagement / segment-
   roster cards, the unmeasured note) is authored here under the .maud-* prefix.

   FULL-WIDTH by construction: .maud-kpis / .maud-seg-grid / .maud-seg-cards use
   repeat(N,1fr) with NO max-width cap; the surface inherits the full-width
   #page-marketing host. ASCII-only comments throughout (a non-ASCII char silently drops
   the rule from the CSSOM - the established .crm-layout hazard). */

/* breadcrumb + status accent */
#page-marketing .maud-crumb { font-size: 11.5px; color: var(--text-dim); margin-bottom: 12px; }
#page-marketing .maud-crumb .spec { color: var(--gold); font-weight: 600; font-family: 'Montserrat', sans-serif; }
#page-marketing .maud-statusline.live .mkt-dot { background: var(--green); box-shadow: 0 0 11px rgba(76,175,125,0.7); }
#page-marketing .maud-statusline .pos { color: var(--green); font-weight: 700; }

/* audience KPI band - 4-up (full-width, repeat(4,1fr)); reuses the .mkt-kpi tile shell */
#page-marketing .maud-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; margin-bottom: 18px; max-width: none; }
#page-marketing .maud-kpis .mkt-kpi.k-size::before { background: #3FB6A8; }
#page-marketing .maud-kpis .mkt-kpi.k-growth::before { background: var(--green); }
#page-marketing .maud-kpis .mkt-kpi.k-active::before { background: var(--blue); }
#page-marketing .maud-kpis .mkt-kpi.k-segs::before { background: #8B6FD6; }
#page-marketing .maud-kpis .mkt-kpi .mkt-sub .pos { color: var(--green); font-weight: 700; }
#page-marketing .maud-kpis .mkt-kpi .mkt-sub .warn { color: var(--amber); font-weight: 700; }

/* section header (mirror of analytics .mkt-an-sec-h) */
#page-marketing .maud-sec-h { display: flex; align-items: center; gap: 11px; margin: 22px 0 12px; }
#page-marketing .maud-sec-h .sh-sub { font-size: 11px; color: var(--text-dim); }
#page-marketing .maud-sec-h .sh-tag { margin-left: auto; font-family: 'Montserrat', sans-serif; font-size: 8.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; }
#page-marketing .maud-sec-h .sh-tag.derived { color: var(--green); border: 1px solid rgba(76,175,125,0.4); background: rgba(76,175,125,0.1); }
#page-marketing .maud-sec-h .sh-tag.readonly { color: var(--blue); border: 1px solid rgba(91,155,213,0.4); background: rgba(91,155,213,0.1); }

/* segment breakdown - two-axis grid of horizontal bar rows (read-only deterministic shares) */
#page-marketing .maud-seg-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; max-width: none; }
@media (max-width: 900px) { #page-marketing .maud-seg-grid { grid-template-columns: 1fr; } }
#page-marketing .maud-seg-bar { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
#page-marketing .maud-seg-bar .sb-sw { width: 11px; height: 11px; border-radius: 4px; flex: none; }
#page-marketing .maud-seg-bar .sb-n { flex: none; width: 118px; font-size: 11.5px; color: var(--text); }
#page-marketing .maud-seg-bar .sb-track { flex: 1; height: 7px; border-radius: 4px; background: rgba(255,255,255,0.06); overflow: hidden; }
#page-marketing .maud-seg-bar .sb-v { flex: none; width: 64px; text-align: right; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11.5px; color: var(--text-bright); font-variant-numeric: tabular-nums; }
#page-marketing .maud-seg-bar .sb-pct { flex: none; width: 38px; text-align: right; font-size: 10.5px; color: var(--text-dim); }
#page-marketing .maud-seg-bar.unmeasured .sb-v, #page-marketing .maud-seg-bar.unmeasured .sb-pct { color: var(--text-dim); }

/* segment cards - per-segment engagement + the named segment roster (full-width repeat(3,1fr)) */
#page-marketing .maud-seg-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; max-width: none; }
@media (max-width: 900px) { #page-marketing .maud-seg-cards { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px) { #page-marketing .maud-seg-cards { grid-template-columns: 1fr; } }
#page-marketing .maud-seg-card { position: relative; background: linear-gradient(165deg,#262320,#1f1c19); border: 1px solid var(--border); border-radius: 13px; padding: 14px 15px; overflow: hidden; }
#page-marketing .maud-seg-card .sc-name { font-family: 'Montserrat', sans-serif; font-size: 12.5px; font-weight: 700; color: var(--text-bright); }
#page-marketing .maud-seg-card .sc-size { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; }
#page-marketing .maud-seg-card .sc-metrics { display: flex; gap: 16px; margin-top: 11px; }
#page-marketing .maud-seg-card .scm .scm-l { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; }
#page-marketing .maud-seg-card .scm .scm-v { font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 800; color: var(--text-bright); line-height: 1.1; margin-top: 2px; font-variant-numeric: tabular-nums; }
#page-marketing .maud-seg-card .scm .scm-v.unmeasured { color: var(--text-dim); font-size: 13px; }

/* unmeasured note (an attribute absent on records) */
#page-marketing .maud-unmeas-note { display: flex; align-items: flex-start; gap: 9px; font-size: 11px; color: var(--text-dim); background: rgba(232,148,58,0.06); border: 1px solid rgba(232,148,58,0.18); border-radius: 10px; padding: 10px 13px; margin-top: 13px; }
#page-marketing .maud-unmeas-note .un-ic { color: var(--amber); flex: none; }

/* segment-roster action row + inline note */
#page-marketing .maud-seg-actions { margin-top: 14px; display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
#page-marketing .maud-note { font-size: 10.5px; color: var(--text-dim); font-style: italic; margin: 4px 0 0; }

/* FIX_MARKETING_AUDIENCE_S1_2026_06_22 - end Audience scoped CSS. */


/* ═══════════════════════════════════════════════════════════════════════════
   FIX_MKT_PLAN_S1_2026_06_22 — Marketing Plan scoped CSS.
   Ported from design_samples/marketing/marketing_plan.html (goal banner / objective
   rows / roadmap timeline / budget bars / spend-vs-plan donut / progress cards /
   templated-narrative card) and SCOPED under #page-marketing so it cannot leak into
   any other specialist surface. The shell idioms (.mkt-scroll / .mkt-head-row /
   .mkt-when / .mkt-statusline / .mkt-dot / .mkt-panel / .mkt-panel-h / .mkt-panel-sub /
   .mkt-hint / .mkt-empty / .mkt-coming / .mkt-footnote) and the section-heading idiom
   (.mkt-an-sec-h / .sh-sub / .sh-tag) are REUSED verbatim from the shipped marketing
   blocks above — only the five plan-specific layout idioms below are NEW (prefix
   mkt-pl- to avoid collision). All accent tokens are inherited from the portal :root.
   FULL-WIDTH by construction: every grid is repeat(N,1fr) / fr-fractional, every
   wrapper inherits the host width, no max-width cap anywhere. Everything renders
   HONEST-EMPTY (the plan engine does not exist yet): bars are 0% width, every figure
   slot is "—", every action is .mkt-coming (visibly disabled, never wired). */

/* two new .sh-tag color variants the plan section heads use (only .measured exists above) */
#page-marketing .mkt-an-sec-h .sh-tag.deterministic { color: var(--teal); background: rgba(63,182,168,0.12); border-color: rgba(63,182,168,0.34); }
#page-marketing .mkt-an-sec-h .sh-tag.templated { color: var(--violet); background: rgba(139,111,214,0.12); border-color: rgba(139,111,214,0.34); }

/* ── SECTION 1 — plan summary banner (goal card + objective rows) ── */
#page-marketing .mkt-pl-banner { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; margin-bottom: 6px; }
#page-marketing .mkt-pl-goal { background: linear-gradient(150deg,rgba(201,168,76,0.10),#211e1b 58%); border: 1px solid rgba(201,168,76,0.30); border-radius: 16px; padding: 18px 20px; box-shadow: 0 22px 50px -36px #000, var(--inner-hi); position: relative; overflow: hidden; }
#page-marketing .mkt-pl-goal .eyebrow { font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; font-family: 'Montserrat', sans-serif; }
#page-marketing .mkt-pl-goal .goal { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--text-bright); font-size: 18px; line-height: 1.3; }
#page-marketing .mkt-pl-goal .horizon { font-size: 11.5px; color: var(--text-dim); margin-top: 9px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#page-marketing .mkt-pl-goal .horizon .pill { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 10px; color: var(--gold); background: rgba(201,168,76,0.14); border: 1px solid rgba(201,168,76,0.32); border-radius: 999px; padding: 2px 9px; }
#page-marketing .mkt-pl-objs { display: flex; flex-direction: column; gap: 9px; }
#page-marketing .mkt-pl-obj { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 12px; background: rgba(255,255,255,0.018); border: 1px solid var(--border); position: relative; overflow: hidden; }
#page-marketing .mkt-pl-obj .oico { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; background: rgba(255,255,255,0.04); }
#page-marketing .mkt-pl-obj .obody { flex: 1; min-width: 0; }
#page-marketing .mkt-pl-obj .obody .ot { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px; color: var(--text-bright); }
#page-marketing .mkt-pl-obj .obody .od { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
#page-marketing .mkt-pl-obj .otrack { width: 84px; flex: none; text-align: right; }
#page-marketing .mkt-pl-obj .otrack .ov { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 14px; color: var(--text-bright); }
#page-marketing .mkt-pl-obj .obar { height: 5px; border-radius: 3px; background: rgba(255,255,255,0.07); overflow: hidden; margin-top: 5px; }

/* ── SECTION 2 — campaign roadmap timeline ── */
#page-marketing .mkt-pl-road { position: relative; }
#page-marketing .mkt-pl-road-months { display: grid; grid-template-columns: repeat(6,1fr); gap: 0; border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: 12px; }
#page-marketing .mkt-pl-road-months .rm { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); font-family: 'Montserrat', sans-serif; text-align: center; }
#page-marketing .mkt-pl-road-lane { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
#page-marketing .mkt-pl-road-lane .ln { width: 108px; flex: none; font-size: 11px; color: var(--text); display: flex; align-items: center; gap: 7px; }
#page-marketing .mkt-pl-road-lane .ln .ld { width: 9px; height: 9px; border-radius: 3px; flex: none; }
#page-marketing .mkt-pl-road-track { position: relative; flex: 1; height: 26px; background: rgba(255,255,255,0.02); border-radius: 8px; overflow: hidden; }

/* ── SECTION 3 — budget allocation + spend-vs-plan ── */
#page-marketing .mkt-pl-bud-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
#page-marketing .mkt-pl-bud-bars { display: flex; flex-direction: column; gap: 11px; }
#page-marketing .mkt-pl-budrow { display: flex; align-items: center; gap: 11px; }
#page-marketing .mkt-pl-budrow .bn { width: 120px; flex: none; font-size: 11.5px; color: var(--text); display: flex; align-items: center; gap: 7px; }
#page-marketing .mkt-pl-budrow .bn .bd { width: 9px; height: 9px; border-radius: 50%; flex: none; }
#page-marketing .mkt-pl-budrow .btrack { flex: 1; height: 18px; border-radius: 6px; background: rgba(255,255,255,0.05); overflow: hidden; position: relative; }
#page-marketing .mkt-pl-budrow .bplan { position: absolute; inset: 0; border-radius: 6px; }
#page-marketing .mkt-pl-budrow .bspent { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 6px; background: rgba(255,255,255,0.22); }
#page-marketing .mkt-pl-budrow .bnum { width: 118px; flex: none; text-align: right; font-size: 11px; color: var(--text-dim); }

/* ── SECTION 4 — spend-vs-plan donut + stat rows ── */
#page-marketing .mkt-pl-pvp-wrap { display: flex; align-items: center; gap: 18px; margin-top: 4px; flex-wrap: wrap; }
#page-marketing .mkt-pl-ring { width: 120px; height: 120px; flex: none; border-radius: 50%; background: conic-gradient(rgba(255,255,255,0.07) 0deg 360deg); position: relative; display: grid; place-items: center; }
#page-marketing .mkt-pl-ring .rc { position: relative; z-index: 1; text-align: center; }
#page-marketing .mkt-pl-ring .rc .dv { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 18px; color: var(--text-bright); }
#page-marketing .mkt-pl-ring .rc .dl { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); }
#page-marketing .mkt-pl-pvp { flex: 1; min-width: 180px; }
#page-marketing .mkt-pl-pvp-row { display: flex; align-items: baseline; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
#page-marketing .mkt-pl-pvp-row .pl { color: var(--text-dim); }
#page-marketing .mkt-pl-pvp-row .pv { font-family: 'Montserrat', sans-serif; font-weight: 800; color: var(--text-bright); font-size: 16px; }

/* ── SECTION 5 — progress against plan (3 cards) ── */
#page-marketing .mkt-pl-prog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
#page-marketing .mkt-pl-progcard { background: linear-gradient(165deg,#262320,#1f1c19); border: 1px solid var(--border); border-radius: 14px; padding: 15px 16px; box-shadow: 0 16px 34px -28px #000, var(--inner-hi); position: relative; overflow: hidden; }
#page-marketing .mkt-pl-progcard .pclbl { font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); font-weight: 700; margin-bottom: 7px; }
#page-marketing .mkt-pl-progcard .pcval { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 22px; color: var(--text-bright); line-height: 1; }
#page-marketing .mkt-pl-progcard .pctarget { font-size: 11px; color: var(--text-dim); margin-top: 5px; }
#page-marketing .mkt-pl-progcard .pcbar { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.07); overflow: hidden; margin-top: 10px; }
#page-marketing .mkt-pl-progcard .pcverdict { font-size: 10.5px; font-weight: 700; margin-top: 8px; font-family: 'Montserrat', sans-serif; color: var(--text-dim); }

/* ── SECTION 6 — templated narrative read (GM card) ── */
#page-marketing .mkt-pl-narr { background: linear-gradient(150deg,rgba(139,111,214,0.07),#211e1b 60%); border: 1px solid rgba(139,111,214,0.24); border-radius: 16px; padding: 18px 20px; }
#page-marketing .mkt-pl-narr .nh { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
#page-marketing .mkt-pl-narr .nh .gm { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 38% 32%,#e8cf86,var(--gold) 60%,#9c7e2f); display: grid; place-items: center; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 13px; color: #16140F; flex: none; }
#page-marketing .mkt-pl-narr .nh .nt { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; color: var(--text-bright); }
#page-marketing .mkt-pl-narr .nh .ns { font-size: 10.5px; color: var(--text-dim); }
#page-marketing .mkt-pl-narr .tnote { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--violet); font-weight: 700; font-family: 'Montserrat', sans-serif; margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; }
/* FIX_MKT_PLAN_S1_2026_06_22 — end Marketing Plan scoped CSS. */


/* ═══════════════════════════════════════════════════════════════════════════
   FIX_MARKETING_LEAD_SOURCES_S1_2026_06_22 — Marketing / Lead Sources scoped CSS.
   Built section-by-section from design_samples/marketing/marketing_lead_sources.html
   (.cov / .kpis / .filtbar / .grid donut+ranked / .lower conversion+roi idioms) and
   SCOPED under #page-marketing with the disjoint .mlsrc-* prefix so the lead-sources
   rules cannot leak into the shipped Overview / Analytics / Campaigns surfaces. Shell
   tokens (--gold/--page/--card/--border/--green/--amber/--red/--blue/--text/--dim/
   --head/--inner-hi/--ease) are inherited from the portal :root - NOT re-declared.
   FULL-WIDTH BY CONSTRUCTION: the wrapper carries NO max-width cap (max-width:none) and
   every grid is repeat(N,1fr); the surface inherits the shared full-width rail host.
   HONEST-EMPTY by construction: on a real account the donut collapses to the dashed
   empty-ring, the ranked list + conversion bars + ROI rows render their STRUCTURE with
   null-not-0 placeholders, no fabricated channel data. The demo seed (THE YARD May 2026)
   renders ONLY under __isDemoAccount(). ASCII-only comments throughout (a non-ASCII char
   silently drops the rule from the CSSOM - the established .crm-layout hazard). */
#page-marketing .mlsrc-wrap { max-width: none; width: 100%; }

/* status line uses an AMBER pulse dot (Marketing convention vs Sales gold) */
#page-marketing .mlsrc-statusline { display: flex; align-items: center; gap: 10px; margin: 10px 0 18px; font-size: 13.5px; color: var(--text); }
#page-marketing .mlsrc-statusline .fix { color: var(--amber); font-weight: 600; }

/* attribution-coverage ribbon (the honest-unmeasured banner) */
#page-marketing .mlsrc-cov { display: flex; align-items: center; gap: 11px; background: linear-gradient(120deg,rgba(232,148,58,0.10),rgba(255,255,255,0.015)); border: 1px solid rgba(232,148,58,0.26); border-radius: 13px; padding: 13px 16px; margin-bottom: 18px; }
#page-marketing .mlsrc-cov .ci { width: 30px; height: 30px; border-radius: 9px; background: rgba(232,148,58,0.14); display: grid; place-items: center; flex: none; box-shadow: var(--inner-hi); }
#page-marketing .mlsrc-cov .ctext { font-size: 11.5px; color: var(--text); line-height: 1.45; }
#page-marketing .mlsrc-cov .cbadge { margin-left: auto; font-family: 'Montserrat', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--amber); border: 1px solid rgba(232,148,58,0.4); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
/* FIX_DENSITY_MARKETING_LEADSOURCES_2026_09_16 */
#page-marketing .mlsrc-info-row { margin: 0 0 18px; }
#page-marketing .mlsrc-info-pill { display: inline-flex; align-items: center; gap: 7px; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; padding: 5px 11px; border-radius: 8px; color: #C9A84C; background: rgba(201,168,76,0.10); border: 1px solid rgba(201,168,76,0.3); }

/* FIX_KITHOST_MLSRC_2026_08_09 - Lead Sources opts into the shared UI kit.
   WHAT: the surface container now carries the `vk` kit opt-in class, and the five KPI
   tiles adopt the kit slot vocabulary (k-lbl / k-val / k-sub) beside their legacy tile
   class. The legacy type rules that used to live here are retired accordingly: the kit
   now supplies the label, value and empty-value treatment for this band.
   CONSUMES, DOES NOT EXTEND: every kit rule this surface relies on already shipped under
   `#page-marketing .vk` via FIX_KITHOST_MIRROR_LEGAL_2026_08_08. This build adds NO rule
   to that mirror - extending it would touch six host surfaces and is a separate build.
   WHY FIVE RE-ANCHORED TYPE/CHIP RULES REMAIN: the mirror carries no `k-val small` and no
   `k-val.unmeasured`, and its delta chip uses an up/down/warn/flat modifier vocabulary
   while this renderer emits `pos` and `warn`. Left on their old selectors these rules go
   dead silently and the `pos` chips lose their green. Retirement path: fold the missing
   slot rules into the ambient kit in a later pass. The accent-rail rules below are NOT
   retirable that way - a per-host semantic rail does not belong in a shared six-host kit.
   WHY THE FIVE ACCENT-RAIL RULES ARE ID-ESCALATED TO (1,3,1): deliberate and load-bearing.
   The mirror declares a neutral grey rail on the kit tile's before-pseudo at (1,2,1). The
   legacy semantic rails were also (1,2,1), and the kit block sits later in document order,
   so on a straight port the mirror would win that tie and paint all five status rails the
   same neutral token. Anchoring them one class higher wins outright with no order
   dependency: the kit supplies the rail GEOMETRY, this surface keeps its status COLOUR.
   WHY THE KPI CONTAINER IS DELIBERATELY NOT DUAL-CLASSED: the kit's KPI grid is 3-up and
   this band has five tiles. Adding the kit container class would collapse the band to
   3 + 2 for the sole gain of a full-width declaration. The kit tile rule contains no
   container term, so the tiles get full kit treatment through the wrapper regardless.
   Do NOT "complete" this port by adding the kit container class - it re-breaks the layout. */
/* KPI band (5 tiles) */
#page-marketing .mlsrc-kpis { display: grid; grid-template-columns: repeat(5,1fr); gap: 13px; margin-bottom: 18px; }
#page-marketing .mlsrc-kpi { position: relative; overflow: hidden; background: linear-gradient(165deg,#262320,#1f1c19); border: 1px solid var(--border); border-radius: 14px; padding: 15px 16px 14px; box-shadow: 0 16px 34px -28px #000, var(--inner-hi); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
#page-marketing .vk .kpi.k-leads::before { background: #3FB6A8; }
#page-marketing .vk .kpi.k-top::before { background: var(--green); }
#page-marketing .vk .kpi.k-conv::before { background: var(--blue); }
#page-marketing .vk .kpi.k-coverage::before { background: var(--amber); }
#page-marketing .vk .kpi.k-cost::before { background: #8B6FD6; }
#page-marketing .vk .kpi .k-val small { font-size: 13px; color: var(--text-dim); font-weight: 600; }
#page-marketing .vk .kpi .k-val.unmeasured { color: var(--text-dim); font-size: 18px; }
#page-marketing .vk .kpi .k-sub .delta { font-weight: 700; }
#page-marketing .vk .kpi .k-sub .delta.pos { color: var(--green); }
#page-marketing .vk .kpi .k-sub .delta.warn { color: var(--amber); }

/* filter bar */
#page-marketing .mlsrc-filtbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
#page-marketing .mlsrc-filt-group { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.025); border: 1px solid var(--border); border-radius: 10px; padding: 5px 6px; }
#page-marketing .mlsrc-filt-lbl { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; padding: 0 6px; }
#page-marketing .mlsrc-chip { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; padding: 5px 11px; border-radius: 8px; border: 1px solid var(--border); background: rgba(255,255,255,0.02); color: var(--text); cursor: not-allowed; }
#page-marketing .mlsrc-filt-spacer { flex: 1; }
#page-marketing .mlsrc-toggle { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-dim); border: 1px solid var(--border); border-radius: 10px; padding: 6px 12px; cursor: not-allowed; }
#page-marketing .mlsrc-toggle .tk { width: 30px; height: 16px; border-radius: 999px; background: rgba(255,255,255,0.08); position: relative; }
#page-marketing .mlsrc-toggle.on .tk { background: rgba(201,168,76,0.4); }

/* layout: mix donut (1fr) + ranked sources (1.5fr) */
#page-marketing .mlsrc-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 18px; margin-bottom: 18px; align-items: start; }
#page-marketing .mlsrc-panel { background: linear-gradient(170deg,#252220,#1e1b19); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; box-shadow: 0 22px 50px -36px #000, var(--inner-hi); }
#page-marketing .mlsrc-panel-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
#page-marketing .mlsrc-panel-h .hint { font-size: 11px; color: var(--text-dim); }
#page-marketing .mlsrc-panel-sub { font-size: 11.5px; color: var(--text-dim); margin: 2px 0 14px; }

/* mix donut */
#page-marketing .mlsrc-donut-row { display: flex; flex-direction: column; align-items: center; gap: 14px; }
#page-marketing .mlsrc-donut-wrap { position: relative; width: 170px; height: 170px; flex: none; }
#page-marketing .mlsrc-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
#page-marketing .mlsrc-donut-center .dc-lbl { font-size: 8.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); }
#page-marketing .mlsrc-donut-center .dc-val { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 30px; color: var(--text-bright); line-height: 1; }
#page-marketing .mlsrc-donut-center .dc-d { font-size: 9px; color: var(--text-dim); font-weight: 600; margin-top: 3px; }
#page-marketing .mlsrc-mix-list { width: 100%; display: flex; flex-direction: column; gap: 9px; }
#page-marketing .mlsrc-mix-item { display: flex; align-items: center; gap: 9px; font-size: 11.5px; }
#page-marketing .mlsrc-mix-item .swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }
#page-marketing .mlsrc-mix-item .mname { color: var(--text); flex: 1; }
#page-marketing .mlsrc-mix-item .mcount { color: var(--text-dim); font-family: 'Montserrat', sans-serif; font-size: 10.5px; margin-right: 6px; }
#page-marketing .mlsrc-mix-item .mval { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--text-bright); }
#page-marketing .mlsrc-mix-note { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 10.5px; color: var(--text-dim); display: flex; align-items: flex-start; gap: 7px; line-height: 1.45; }

/* empty-donut ring (honest-empty whole-surface state) */
#page-marketing .mlsrc-donut-empty-ring { width: 170px; height: 170px; border-radius: 50%; border: 2px dashed rgba(255,255,255,0.10); display: grid; place-items: center; }

/* ranked sources list */
#page-marketing .mlsrc-src-list { display: flex; flex-direction: column; gap: 8px; }
#page-marketing .mlsrc-src { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 13px; padding: 12px 14px; border-radius: 12px; position: relative; overflow: hidden; background: rgba(255,255,255,0.018); border: 1px solid var(--border); }
#page-marketing .mlsrc-src.top1 { border-color: rgba(201,168,76,0.32); background: linear-gradient(108deg,rgba(201,168,76,0.08),rgba(255,255,255,0.018) 50%); }
#page-marketing .mlsrc-src .s-rank { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 13px; color: var(--text-dim); text-align: center; }
#page-marketing .mlsrc-src.top1 .s-rank { color: var(--gold); font-size: 16px; }
#page-marketing .mlsrc-src .s-body { min-width: 0; }
#page-marketing .mlsrc-src .s-top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
#page-marketing .mlsrc-src .s-name { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; color: var(--text-bright); display: flex; align-items: center; gap: 8px; }
#page-marketing .mlsrc-src .s-share { margin-left: auto; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 13px; color: var(--text-bright); }
#page-marketing .mlsrc-src .s-bar { height: 7px; border-radius: 4px; background: rgba(255,255,255,0.06); overflow: hidden; margin-top: 8px; }
#page-marketing .mlsrc-src .s-meta { display: flex; align-items: center; gap: 14px; margin-top: 8px; font-size: 10.5px; color: var(--text-dim); flex-wrap: wrap; }
#page-marketing .mlsrc-src .s-meta .mq { display: inline-flex; align-items: center; gap: 5px; }
#page-marketing .mlsrc-src .s-meta .mq .q-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
#page-marketing .mlsrc-src .s-meta .conv-strong { color: var(--green); }
#page-marketing .mlsrc-src .s-meta .conv-mid { color: var(--amber); }
#page-marketing .mlsrc-src .s-meta .conv-low { color: var(--red); }
#page-marketing .mlsrc-src .s-cost { font-size: 10.5px; color: var(--text-dim); }
#page-marketing .mlsrc-src .s-cost.unm { font-style: italic; opacity: .8; }
#page-marketing .mlsrc-src.unattributed { background: repeating-linear-gradient(45deg,rgba(255,255,255,0.012),rgba(255,255,255,0.012) 8px,rgba(255,255,255,0.028) 8px,rgba(255,255,255,0.028) 16px); border-style: dashed; border-color: rgba(255,255,255,0.13); }
#page-marketing .mlsrc-src.unattributed .s-name { color: var(--text-dim); }
#page-marketing .mlsrc-src.unattributed .s-share { color: var(--text-dim); }

/* lower: conversion-by-source (1.5fr) + cost/ROI (1fr) */
#page-marketing .mlsrc-lower { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; }
#page-marketing .mlsrc-cbar { display: flex; align-items: center; gap: 12px; font-size: 12px; margin-bottom: 12px; }
#page-marketing .mlsrc-cbar .cb-l { width: 118px; color: var(--text); flex: none; display: flex; align-items: center; gap: 7px; }
#page-marketing .mlsrc-cbar .cb-track { flex: 1; height: 11px; border-radius: 6px; background: rgba(255,255,255,0.06); overflow: hidden; }
#page-marketing .mlsrc-cbar .cb-v { width: 96px; text-align: right; font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--text-bright); font-size: 12px; }
#page-marketing .mlsrc-cb-note { margin-top: 6px; font-size: 10.5px; color: var(--text-dim); display: flex; align-items: flex-start; gap: 7px; line-height: 1.45; }

/* cost-per-lead / ROI panel (honest-empty, structure preserved) */
#page-marketing .mlsrc-roi-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 14px 8px; gap: 11px; }
#page-marketing .mlsrc-roi-empty .re-ic { width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(150deg,rgba(91,155,213,0.18),rgba(91,155,213,0.04)); display: grid; place-items: center; box-shadow: var(--inner-hi); }
#page-marketing .mlsrc-roi-empty .re-t { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; color: var(--text-bright); }
#page-marketing .mlsrc-roi-empty .re-d { font-size: 11.5px; color: var(--text-dim); line-height: 1.5; max-width: 280px; }
#page-marketing .mlsrc-roi-rows { margin-top: 6px; width: 100%; display: flex; flex-direction: column; }
#page-marketing .mlsrc-roi-row { display: flex; align-items: baseline; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
#page-marketing .mlsrc-roi-row .rr-l { color: var(--text-dim); }
#page-marketing .mlsrc-roi-row .rr-v { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--text-dim); font-size: 11.5px; font-style: italic; }
#page-marketing .mlsrc-roi-cta { margin-top: 12px; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; color: var(--blue); border: 1px solid rgba(91,155,213,0.32); background: rgba(91,155,213,0.08); border-radius: 9px; padding: 9px 14px; cursor: not-allowed; opacity: .75; }
#page-marketing .mlsrc-footnote { font-size: 10px; color: var(--text-dim); margin-top: 18px; text-align: center; opacity: .7; line-height: 1.6; }

@media (max-width: 1100px) {
  #page-marketing .mlsrc-kpis { grid-template-columns: repeat(3,1fr); }
  #page-marketing .mlsrc-grid { grid-template-columns: 1fr; }
  #page-marketing .mlsrc-lower { grid-template-columns: 1fr; }
}
/* FIX_MARKETING_LEAD_SOURCES_S1_2026_06_22 — end Marketing / Lead Sources scoped CSS. */


/* ═══════════════════════════════════════════════════════════════════════════
   FIX_MARKETING_SURFACE_REAL_2026_07_21 — REAL Marketing write-surface CSS (.mktr-*).
   The working create/edit layer over the shipped honest-coming shell: campaign form +
   real campaign cards, brand-kit editor, channel-connect, calendar add-form. SCOPED under
   #page-marketing so it cannot leak. Reuses the shell tokens from :root. .mktr- prefix
   avoids collision with the shipped .mkt-* read-side idioms. ASCII-only (CSSOM-drop hazard). */
/* active primary button (replaces the .mkt-coming disabled new-campaign btn) */
#page-marketing .mktr-newbtn { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; color: #14110a; cursor: pointer; border: 1px solid rgba(201,168,76,0.5); border-radius: 9px; padding: 9px 16px; background: linear-gradient(180deg,var(--gold),#a9863a); display: inline-flex; align-items: center; gap: 8px; transition: .16s var(--ease); }
#page-marketing .mktr-newbtn.ghost { color: var(--text); background: rgba(255,255,255,0.03); border-color: var(--border-strong); }
/* generic form card (campaign / calendar-item / brand) */
#page-marketing .mktr-form { background: linear-gradient(160deg,rgba(255,255,255,0.03),rgba(255,255,255,0.012) 62%); border: 1px solid var(--border-strong); border-radius: 15px; padding: 20px 22px; margin: 4px 0 20px; }
#page-marketing .mktr-form-h { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
#page-marketing .mktr-form-sub { font-size: 12px; color: var(--text-dim); margin-bottom: 16px; line-height: 1.5; }
#page-marketing .mktr-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
#page-marketing .mktr-fgrid.one { grid-template-columns: 1fr; }
@media (max-width: 780px) { #page-marketing .mktr-fgrid { grid-template-columns: 1fr; } }
#page-marketing .mktr-field { display: flex; flex-direction: column; gap: 6px; }
#page-marketing .mktr-field input, #page-marketing .mktr-field select, #page-marketing .mktr-field textarea {
  font-family: 'Open Sans', sans-serif; font-size: 13px; color: var(--text-bright); background: rgba(0,0,0,0.22);
  border: 1px solid var(--border-strong); border-radius: 9px; padding: 9px 11px; width: 100%; box-sizing: border-box; transition: .14s var(--ease); }
#page-marketing .mktr-field textarea { resize: vertical; min-height: 62px; line-height: 1.5; }
#page-marketing .mktr-field input:focus, #page-marketing .mktr-field select:focus, #page-marketing .mktr-field textarea:focus { outline: none; border-color: rgba(201,168,76,0.55); background: rgba(0,0,0,0.3); }
#page-marketing .mktr-field .hint { font-size: 10px; color: var(--text-dim); opacity: .8; }
#page-marketing .mktr-form-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; align-items: center; }
#page-marketing .mktr-form-err { font-size: 11.5px; color: var(--red,#e05555); margin-right: auto; align-self: center; min-height: 14px; }
/* real campaign card */
#page-marketing .mktr-cmp-card { border: 1px solid var(--border-strong); border-radius: 13px; padding: 14px 16px; background: rgba(255,255,255,0.02); margin-bottom: 11px; position: relative; overflow: hidden; transition: .16s var(--ease); }
#page-marketing .mktr-cmp-card.running { --cc: var(--green); }
#page-marketing .mktr-cmp-card.scheduled { --cc: var(--blue); }
#page-marketing .mktr-cmp-card.draft { --cc: var(--amber); }
#page-marketing .mktr-cmp-card.ended { --cc: var(--text-dim); }
#page-marketing .mktr-cc-top { display: flex; align-items: flex-start; gap: 12px; }
#page-marketing .mktr-cc-name { font-family: 'Montserrat', sans-serif; font-size: 14.5px; font-weight: 700; color: var(--text-bright); flex: 1; min-width: 0; }
#page-marketing .mktr-cc-pill { font-family: 'Montserrat', sans-serif; font-size: 8.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 3px 9px; color: var(--cc, var(--gold)); background: rgba(255,255,255,0.05); border: 1px solid var(--border-strong); white-space: nowrap; }
#page-marketing .mktr-cc-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 7px; font-size: 11.5px; color: var(--text-dim); }
#page-marketing .mktr-cc-perf { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 12px; }
#page-marketing .mktr-cc-pf { background: rgba(0,0,0,0.16); border: 1px solid var(--border); border-radius: 9px; padding: 8px 6px; text-align: center; }
#page-marketing .mktr-cc-pfn { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 14px; color: var(--text-bright); }
#page-marketing .mktr-cc-pfl { font-size: 9px; color: var(--text-dim); letter-spacing: .04em; text-transform: uppercase; margin-top: 2px; }
#page-marketing .mktr-cc-actions { display: flex; gap: 8px; margin-top: 12px; }
#page-marketing .mktr-linkbtn { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; color: var(--text-dim); background: transparent; border: 1px solid var(--border); border-radius: 8px; padding: 5px 12px; cursor: pointer; transition: .14s var(--ease); }
/* ad-spend real breakdown */
#page-marketing .mktr-spend { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; margin: 14px 0 20px; }
@media (max-width: 900px) { #page-marketing .mktr-spend { grid-template-columns: 1fr; } }
#page-marketing .mktr-spend-card { border: 1px solid var(--border-strong); border-radius: 14px; padding: 16px 18px; background: rgba(255,255,255,0.018); }
#page-marketing .mktr-spend-h { font-family: 'Montserrat', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
#page-marketing .mktr-spend-big { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 30px; color: var(--gold); line-height: 1; }
#page-marketing .mktr-spend-cap { font-size: 11px; color: var(--text-dim); margin-top: 6px; }
#page-marketing .mktr-spend-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
#page-marketing .mktr-spend-row .m-l { font-size: 12px; color: var(--text); min-width: 78px; }
#page-marketing .mktr-spend-row .m-bar { flex: 1; height: 8px; border-radius: 5px; background: rgba(255,255,255,0.06); overflow: hidden; }
#page-marketing .mktr-spend-row .m-v { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12.5px; color: var(--text-bright); min-width: 74px; text-align: right; }
/* FIX_BRANDLAYOUT_S1_2026_09_18 -- density fix for M1-174 (founder direction, 2026-09-18): the
   Light/Dark-logo + Colour-palette panels no longer stretch to fill a fixed 1fr track; see
   #page-marketing .mktr-brand-grid and the scoped .bk-panel max-width rule immediately below.
   Never touches the shared unscoped #page-marketing .bk-panel rule (used by Sections 1/3/4 of
   the same renderer) or the full-width-by-construction content host. */
#page-marketing .mktr-brand-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; align-items: start; }
#page-marketing .mktr-brand-grid .bk-panel { max-width: 420px; }
#page-marketing .mktr-swatches { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 6px; }
#page-marketing .mktr-swatch { display: flex; flex-direction: column; align-items: center; gap: 5px; }
#page-marketing .mktr-swatch .sw-chip { width: 52px; height: 52px; border-radius: 11px; border: 1px solid var(--border-strong); position: relative; }
#page-marketing .mktr-swatch .sw-hex { font-family: 'Montserrat', sans-serif; font-size: 10px; color: var(--text-dim); }
#page-marketing .mktr-swatch .sw-x { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface,#1a1a1a); border: 1px solid var(--border-strong); color: var(--text-dim); font-size: 12px; line-height: 15px; text-align: center; cursor: pointer; }
/* FIX_BRANDKIT_S2_COLOR_EXTRACT_2026_09_17 -- logo-derived colour-candidate suggestion row +
   chip; visually a sibling of .mktr-swatch (same sw-chip/sw-hex parts) but with a source-tag
   pill, an optional low-contrast advisory badge, and a two-button action row instead of a
   single (x) remove control. No JavaScript, no markup change in this file -- the main script
   body is untouched, so this edit does not interact with the partition system or P17 at all.
   FIX_B63_CSSCOMMENT_SCRIPTTOKEN_2026_09_18 -- the two words above deliberately read "main
   script body" in PROSE and are NOT written in tag-shaped form. ⛔ Do not "restore" the angle
   brackets. Written tag-shaped, that token inside this CSS comment is read as an OPENING SCRIPT
   TAG by the deploy gate's own boundary scanner (test_system/harnesses/fullcheck.js, which finds
   blocks textually rather than by parsing HTML). The scanner then treats everything from here to
   the next closing tag as ONE JavaScript block -- 38141 lines of CSS and markup -- and reports
   `SyntaxError: Unexpected identifier 'is'`, which is simply the next two prose words of this
   very comment ("body is"). Measured, not inferred: the pre-b63 index.html carried 12
   occurrences of the tag-shaped token and this compose took it to 13; that single added
   occurrence was the entire defect, and a session-unique dead control read 0. ⚠ NOTE THE CLASS:
   a comment asserting "no JavaScript change here" broke a JavaScript integrity gate BY SAYING SO
   -- the same shape as documenting a retired string recreating its grep signature. `build.js`
   cannot catch it: it covers the marker-anchored main script plus src/*.js and explicitly NOT
   the other inline blocks, so it passed green while this gate blocked the push. */
#page-marketing .mktr-suggest-row { border: 1px dashed rgba(201,168,76,0.35); border-radius: 12px; padding: 14px; margin: 0 0 14px; background: rgba(201,168,76,0.04); }
#page-marketing .mktr-swatch-cand { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 92px; }
#page-marketing .mktr-swatch-cand .sw-chip { width: 52px; height: 52px; border-radius: 11px; border: 1px solid var(--border-strong); }
#page-marketing .mktr-swatch-cand .sw-hex { font-family: 'Montserrat', sans-serif; font-size: 10px; color: var(--text-dim); }
#page-marketing .mktr-cand-src { font-size: 9.5px; font-weight: 600; color: var(--text-dim); background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; text-align: center; white-space: nowrap; }
#page-marketing .mktr-cand-contrast-warn { font-size: 9px; font-weight: 700; color: var(--amber,#d9a441); background: rgba(217,164,65,0.12); border: 1px solid rgba(217,164,65,0.35); border-radius: 999px; padding: 2px 7px; text-align: center; white-space: nowrap; }
#page-marketing .mktr-cand-actions { display: flex; gap: 5px; margin-top: 2px; }
#page-marketing .mktr-cand-actions .mktr-newbtn { font-size: 10.5px; padding: 5px 10px; }
#page-marketing .mktr-cand-actions .mktr-linkbtn { font-size: 10.5px; padding: 5px 9px; }
#page-marketing .mktr-logo-drop { border: 1px dashed var(--border-strong); border-radius: 12px; padding: 20px; text-align: center; color: var(--text-dim); font-size: 12px; cursor: pointer; transition: .14s var(--ease); }
#page-marketing .mktr-logo-preview { display: flex; align-items: center; gap: 14px; }
#page-marketing .mktr-logo-preview img { max-height: 64px; max-width: 180px; border-radius: 9px; border: 1px solid var(--border); background: rgba(255,255,255,0.04); padding: 6px; }
#page-marketing .mktr-asset-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(96px,1fr)); gap: 10px; margin-top: 8px; }
#page-marketing .mktr-asset { position: relative; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; aspect-ratio: 1; background: rgba(0,0,0,0.2); }
#page-marketing .mktr-asset img { width: 100%; height: 100%; object-fit: cover; }
#page-marketing .mktr-asset .as-x { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff; font-size: 13px; line-height: 19px; text-align: center; cursor: pointer; }
/* channel connect */
#page-marketing .mktr-chan-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: 14px; margin: 6px 0 18px; }
#page-marketing .mktr-chan { border: 1px solid var(--border-strong); border-radius: 14px; padding: 16px 17px; background: rgba(255,255,255,0.018); position: relative; }
#page-marketing .mktr-chan-top { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
#page-marketing .mktr-chan-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,0.05); flex: none; }
#page-marketing .mktr-chan-nm { font-family: 'Montserrat', sans-serif; font-size: 13.5px; font-weight: 700; color: var(--text-bright); }
#page-marketing .mktr-chan-st { font-size: 10.5px; color: var(--text-dim); margin-top: 1px; }
#page-marketing .mktr-chan.on .mktr-chan-st { color: var(--green); }
#page-marketing .mktr-chan-body { font-size: 11.5px; color: var(--text-dim); line-height: 1.5; margin-bottom: 12px; }
#page-marketing .mktr-chan-btn { width: 100%; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; border-radius: 9px; padding: 9px; border: 1px solid rgba(201,168,76,0.45); background: linear-gradient(180deg,rgba(201,168,76,0.22),rgba(201,168,76,0.08)); color: var(--text-bright); transition: .14s var(--ease); }
#page-marketing .mktr-chan-btn.dis { border-color: var(--border-strong); background: rgba(255,255,255,0.03); color: var(--text-dim); cursor: pointer; }
/* real empty state within a real surface */
#page-marketing .mktr-empty { text-align: center; padding: 30px 20px; color: var(--text-dim); font-size: 12.5px; line-height: 1.55; border: 1px dashed var(--border-strong); border-radius: 13px; }
/* FIX_STORE_DESIGNER_S1_2026_09_18 — Store / "Professional Graphic Designer" specialist,
   Session 1 CSS. Reuses existing tokens (--gold/--green/--text/--border) exactly as the
   surrounding Brand page already does; no new colour tokens. */
#page-marketing .bk-store-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; box-shadow: 0 16px 34px -30px #000, var(--inner-hi); margin-bottom: 20px; }
#page-marketing .bk-store-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
#page-marketing .bk-store-badge { font-size: 10.5px; font-weight: 700; color: var(--green); background: rgba(76,175,125,0.12); border: 1px solid rgba(76,175,125,0.35); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
#page-marketing .bk-store-price { font-size: 10.5px; color: var(--text-dim); text-align: right; max-width: 220px; }
#page-marketing .bk-store-sub { font-size: 11.5px; color: var(--text-dim); margin: 2px 0 14px; }
#page-marketing .bk-store-tasks { display: flex; flex-wrap: wrap; gap: 10px; }
#page-marketing .bk-font-picker { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
#page-marketing .bk-font-pair { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: rgba(255,255,255,0.02); flex: 1 1 220px; }
/* FIX_STORE_DESIGNER_S1_2026_09_18 — same pill-badge visual language as .mktr-cand-contrast-warn
   (S2's own low-contrast badge, above in this file). */
#page-marketing .mktr-shape-chip { display: flex; }
#page-marketing .mktr-shape-pill { font-size: 9.5px; font-weight: 700; color: var(--amber,#d9a441); background: rgba(217,164,65,0.12); border: 1px solid rgba(217,164,65,0.35); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
/* FIX_MARKETING_PLAN_HEADER_2026_09_12 (§3.4) -- same reachability problem as the
   #page-financial re-enable above (symbol anchor: #page-financial .vk .pghead .ph-actions),
   for the same reason: the header button is the Marketing Plan surface's only control, and the
   kit hides .ph-actions below 600px app-wide. Keep it reachable here (new selector, sited
   beside the precedent; the kit rule itself -- .vk .pghead .ph-actions inside the media query
   above -- is untouched). */
@media (max-width: 600px) {
  #page-marketing .vk .pghead .ph-actions { display: flex; }
}