/* Marketing (cat 7) - V15: 5 blocks with KPI dashboard + TREND ARROWS (May 1 2026) */
:root {
  --mktg-camp: #dc2626;
  --mktg-camp-bg: hsl(0, 78%, 97%);
  --mktg-funnel: #16a34a;
  --mktg-funnel-bg: hsl(143, 64%, 96%);
  --mktg-kpi: #2563eb;
  --mktg-kpi-bg: hsl(225, 78%, 96%);
  --mktg-persona: #a16207;
  --mktg-persona-bg: hsl(35, 78%, 96%);
  --mktg-channel: #1e3a8a;
  --mktg-channel-bg: hsl(225, 64%, 97%);
}

.campaign-case,.funnel-stage,.kpi-dashboard,.persona,.channel-spec{
  margin-block:18px;border-radius:8px;padding:clamp(14px,3vw,18px);
  font-size:15px;line-height:1.6;
}
.campaign-case .content-block-header,
.funnel-stage .content-block-header,
.kpi-dashboard .content-block-header,
.persona .content-block-header,
.channel-spec .content-block-header{
  font-weight:600;margin-block-end:12px;display:flex;align-items:center;gap:8px;
}

/* 1. campaign-case (BRAND RED with subtle gradient) */
.campaign-case{
  background:linear-gradient(135deg,var(--mktg-camp-bg) 0%,#fff 100%);
  border-left:4px solid var(--mktg-camp);
}
.campaign-case .content-block-header{color:var(--mktg-camp)}
.campaign-case strong{color:color-mix(in srgb,var(--mktg-camp) 80%,black)}
.campaign-case p{margin-block:6px}

/* 2. funnel-stage (CONVERSION GREEN with funnel indicator) */
.funnel-stage{
  background:var(--mktg-funnel-bg);
  border-left:4px solid var(--mktg-funnel);
  position:relative;
}
.funnel-stage .content-block-header{color:var(--mktg-funnel)}
.funnel-stage .funnel-step{
  display:inline-block;background:var(--mktg-funnel);color:#fff;
  padding:4px 14px;border-radius:20px;
  font-weight:700;font-size:12px;letter-spacing:1px;
  margin-block-end:10px;
}
.funnel-stage strong{color:color-mix(in srgb,var(--mktg-funnel) 80%,black)}
.funnel-stage ul{margin-block:6px;padding-inline-start:24px}

/* 3. kpi-dashboard (GROWTH BLUE with TREND ARROWS) */
.kpi-dashboard{
  background:var(--mktg-kpi-bg);
  border-left:4px solid var(--mktg-kpi);
}
.kpi-dashboard .content-block-header{color:var(--mktg-kpi)}
.kpi-dashboard .kpi-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:10px;margin-block:12px;
}
.kpi-dashboard .kpi-tile{
  background:#fff;padding:14px;border-radius:6px;
  box-shadow:0 1px 3px hsla(225,30%,30%,0.08);
  position:relative;
}
.kpi-dashboard .kpi-up{border-top:3px solid #16a34a}
.kpi-dashboard .kpi-down{border-top:3px solid #dc2626}
.kpi-dashboard .kpi-flat{border-top:3px solid #6b7280}
.kpi-dashboard .kpi-label{
  font-size:12px;color:#666;text-transform:uppercase;
  letter-spacing:0.5px;margin-block-end:4px;font-weight:600;
}
.kpi-dashboard .kpi-value{
  font-size:24px;font-weight:700;color:#0f172a;
}
.kpi-dashboard .kpi-trend{
  font-size:13px;font-weight:600;margin-block-start:4px;
  display:flex;align-items:center;gap:4px;
}
.kpi-dashboard .kpi-up .kpi-trend{color:#16a34a}
.kpi-dashboard .kpi-up .kpi-trend::before{content:'\2191';font-weight:bold}
.kpi-dashboard .kpi-down .kpi-trend{color:#dc2626}
.kpi-dashboard .kpi-down .kpi-trend::before{content:'\2193';font-weight:bold}
.kpi-dashboard .kpi-flat .kpi-trend{color:#6b7280}
.kpi-dashboard .kpi-flat .kpi-trend::before{content:'\2192';font-weight:bold}

/* 4. persona (PREMIUM GOLD with avatar-style card) */
.persona{
  background:linear-gradient(135deg,var(--mktg-persona-bg) 0%,#fff 60%);
  border-left:4px solid var(--mktg-persona);
}
.persona .content-block-header{color:var(--mktg-persona)}
.persona .persona-name{
  font-size:18px;font-weight:600;color:var(--mktg-persona);
  margin-block-end:10px;
}
.persona dl{
  display:grid;grid-template-columns:auto 1fr;gap:6px 14px;
  margin-block:8px;background:#fff;padding:14px;border-radius:4px;
}
.persona dt{font-weight:600;color:var(--mktg-persona)}
.persona dd{margin:0;color:#1f2937}

/* 5. channel-spec (TRUST NAVY) */
.channel-spec{
  background:var(--mktg-channel-bg);
  border-left:4px solid var(--mktg-channel);
  border-radius:6px;
}
.channel-spec .content-block-header{color:var(--mktg-channel)}
.channel-spec strong{color:color-mix(in srgb,var(--mktg-channel) 80%,black)}
.channel-spec p{margin-block:6px}

/* Phase 5 mask-image icons */
.campaign-case .content-block-header::before,
.funnel-stage .content-block-header::before,
.kpi-dashboard .content-block-header::before,
.persona .content-block-header::before,
.channel-spec .content-block-header::before{
  content:'';display:inline-block;width:18px;height:18px;
  background-color:currentColor;mask-size:contain;
  mask-repeat:no-repeat;mask-position:center;flex-shrink:0;
}
.campaign-case .content-block-header::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z'/%3E%3C/svg%3E")}
.funnel-stage .content-block-header::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z'/%3E%3C/svg%3E")}
.kpi-dashboard .content-block-header::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z'/%3E%3C/svg%3E")}
.persona .content-block-header::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z'/%3E%3C/svg%3E")}
.channel-spec .content-block-header::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0'/%3E%3C/svg%3E")}

@media (prefers-reduced-motion:reduce){
  .campaign-case,.persona{transition:none}
}
@media (max-width:768px){
  .persona dl{grid-template-columns:1fr}
  .persona dt{margin-block-start:8px}
}