/* ═══════════════════════════════════════════════════════════════════
   MetricsLens.AI — homepage sections
   ═══════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════ HERO */
.hero {
  position: relative; overflow: hidden;
  padding: 64px 0 0;
  background:
    radial-gradient(circle at 1px 1px, var(--grid-dot) 1px, transparent 0) 0 0 / 28px 28px,
    linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 62%);
}
.hero::before {
  content: ""; position: absolute; left: 50%; top: -10%;
  width: 1100px; height: 560px; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(11,13,16,.05), transparent 62%);
  pointer-events: none;
}
.hero-inner { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 8px 6px 14px;
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  box-shadow: 0 1px 2px rgba(11,13,16,.04); margin-bottom: 30px;
}
.hero-pill .tag--ink { padding: 3px 8px; }
.hero-h1 { margin-bottom: 22px; max-width: 16ch; }
.hero-h1 .stroke {
  -webkit-text-stroke: 1.4px var(--ink); color: transparent;
}
.hero-sub { max-width: 600px; margin-bottom: 34px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 26px; }
.hero-meta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center; margin-bottom: 56px; font-size: 13px; color: var(--muted); }
.hero-meta .sep { width: 1px; height: 14px; background: var(--line-3); }
.hero-meta b { color: var(--ink); font-weight: 600; }
.hero-meta-item { display: inline-flex; align-items: center; gap: 8px; }

/* Demo frame caption */
.demo-wrap { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; padding-bottom: 8px; }
.demo-tablabel {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 18px; display: inline-flex; align-items: center; gap: 9px;
}

/* ═══════════════════════════════════════════ INTEGRATION STRIP */
.strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); }
.strip-inner { display: flex; align-items: center; gap: 30px; padding: 22px 0; flex-wrap: wrap; }
.strip-label { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); flex: none; }
.strip-logos { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.strip-logo { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 500; color: var(--ink-2); }
.strip-logo svg, .strip-logo .lglyph { flex: none; }
.lglyph { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; }
.lglyph-img { width: 22px; height: 22px; object-fit: contain; flex: none; }

/* ════════════════════════════════════════════════ HOW IT WORKS */
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--paper);
}
.step { padding: 36px 32px 40px; position: relative; }
.step + .step { border-left: 1px solid var(--line); }
.step-no { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--faint); margin-bottom: 26px; display: flex; align-items: center; justify-content: space-between; }
.step-no .of { color: var(--ghost); }
.step-glyph { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 11px; display: grid; place-items: center; color: var(--ink); margin-bottom: 22px; }
.step h3 { margin-bottom: 10px; }
.step p { font-size: 14.5px; color: var(--muted); line-height: 1.6; }
.step-line { margin-top: 22px; height: 1px; background: var(--line-2); position: relative; }
.step-line::before { content: ""; position: absolute; left: 0; top: -1px; height: 3px; width: 34%; background: var(--ink); }
.step:nth-child(2) .step-line::before { width: 66%; }
.step:nth-child(3) .step-line::before { width: 100%; }

/* ══════════════════════════════════════════ FEATURES (tab switcher) */
.feat-shell { display: grid; grid-template-columns: 300px 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--paper); }
.feat-tabs { border-right: 1px solid var(--line); background: var(--paper-3); padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.feat-tab {
  display: flex; align-items: flex-start; gap: 13px; text-align: left;
  padding: 15px 14px; border-radius: 11px; border: 1px solid transparent; background: transparent;
  cursor: pointer; font-family: var(--sans); transition: background .15s ease, border-color .15s ease;
}
.feat-tab:hover { background: var(--paper); }
.feat-tab.active { background: var(--paper); border-color: var(--line); box-shadow: 0 1px 2px rgba(11,13,16,.04); }
.feat-tab-no { font-family: var(--mono); font-size: 11px; color: var(--faint); padding-top: 3px; flex: none; }
.feat-tab.active .feat-tab-no { color: var(--ink); }
.feat-tab > span:last-child { display: flex; flex-direction: column; }
.feat-tab-t { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.feat-tab-d { display: block; font-size: 12.5px; color: var(--muted); margin-top: 5px; line-height: 1.45; }
.feat-tab.active .feat-tab-t { color: var(--ink); }

.feat-stage { position: relative; padding: 0; min-height: 440px; display: flex; flex-direction: column; }
.feat-panel { display: none; flex-direction: column; height: 100%; animation: fadeUp .35s ease; }
.feat-panel.active { display: flex; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.feat-panel-head { padding: 26px 30px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.feat-panel-head h3 { font-size: 19px; }
.feat-panel-head p { font-size: 13.5px; color: var(--muted); margin-top: 5px; max-width: 52ch; }
.feat-canvas { flex: 1; padding: 28px 30px; background:
  radial-gradient(circle at 1px 1px, var(--grid-dot) 1px, transparent 0) 0 0 / 22px 22px, var(--paper-3); }

/* Mini dashboard widgets inside the feature stage */
.mini { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.mini-row { display: grid; gap: 14px; }
.mini-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mkpi { background: var(--paper); border: 1px solid var(--line); border-radius: 11px; padding: 14px 14px; }
.mkpi-l { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.mkpi-v { font-family: var(--mono); font-size: 24px; font-weight: 600; letter-spacing: -.03em; margin-top: 8px; font-variant-numeric: tabular-nums; }
.mkpi-d { font-size: 11.5px; font-weight: 600; margin-top: 4px; display: inline-flex; align-items: center; gap: 4px; }
.mkpi-d.up { color: var(--pos); }
.mkpi-d.dn { color: var(--neg); }

/* Bar chart widget */
.mchart { padding: 18px 18px 14px; }
.mchart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.mchart-title { font-size: 13px; font-weight: 600; }
.mbars { display: flex; align-items: flex-end; gap: 10px; height: 132px; }
.mbar-g { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.mbar { width: 100%; background: var(--ink); border-radius: 3px 3px 0 0; height: 0; transition: height .7s cubic-bezier(.22,.68,0,1.12); }
.mbar.muted { background: var(--ghost); }
.mbar-l { font-family: var(--mono); font-size: 9.5px; color: var(--faint); letter-spacing: .02em; }

/* Insight list widget */
.mins { padding: 6px; }
.mins-item { display: flex; gap: 12px; padding: 14px; border-radius: 10px; }
.mins-item + .mins-item { border-top: 1px solid var(--line-2); border-radius: 0; }
.mins-no { font-family: var(--mono); font-size: 11px; color: #fff; background: var(--ink); width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; flex: none; }
.mins-tx { font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.mins-tx b { color: var(--ink); font-weight: 600; }

/* "New" badge on feature tabs */
.feat-new {
  display: inline-block; vertical-align: middle; margin-left: 7px;
  font-family: var(--mono); font-size: 9px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: var(--ink); border-radius: 5px; padding: 2px 6px;
}

/* ── Edit-insights marketing widget ─────────────────────────────── */
.mins-item { position: relative; }
.mins-tx { flex: 1; }
.mins-editbtn {
  flex: none; width: 26px; height: 26px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--paper);
  display: grid; place-items: center; color: var(--muted);
  opacity: 0; transition: opacity .15s ease, border-color .15s ease, color .15s ease;
}
.mins-item:hover .mins-editbtn { opacity: 1; }
.mins-editbtn:hover { border-color: var(--ink); color: var(--ink); }
.mins-item--editing { background: var(--paper); border: 1px solid var(--ink); border-radius: 10px; }
.mins-item--editing + .mins-item { border-top: 0; }
.mins-editbox { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.mins-area {
  border: 1px solid var(--line-3); border-radius: 8px; padding: 10px 12px;
  font-size: 13px; line-height: 1.55; color: var(--ink-2); background: var(--paper-3);
}
.mins-area b { color: var(--ink); font-weight: 600; }
.mins-caret {
  display: inline-block; width: 1.5px; height: 14px; vertical-align: -2px;
  background: var(--ink); margin-left: 1px; animation: minsCaret 1.05s step-end infinite;
}
@keyframes minsCaret { 50% { opacity: 0; } }
.mins-editrow { display: flex; gap: 8px; }
.mins-save, .mins-cancel {
  font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  border-radius: 8px; padding: 7px 16px; cursor: pointer; border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.mins-save { background: var(--ink); color: #fff; }
.mins-save:hover { background: #23262c; }
.mins-cancel { background: var(--paper); color: var(--muted); border-color: var(--line); }
.mins-cancel:hover { border-color: var(--ink); color: var(--ink); }
.mins-add {
  margin-top: 14px; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink-2);
  background: var(--paper); border: 1px dashed var(--line-3); border-radius: 9px;
  padding: 9px 15px; cursor: pointer; transition: border-color .15s ease, color .15s ease;
}
.mins-add:hover { border-color: var(--ink); color: var(--ink); border-style: solid; }
.mins-add span { font-size: 16px; line-height: 1; font-weight: 600; }

/* ── Secure-share marketing widget ──────────────────────────────── */
.mshare { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 22px; max-width: 460px; width: 100%; margin: 0 auto; }
.mshare-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.mshare-ic { flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--ink); color: #fff; display: grid; place-items: center; }
.mshare-title { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.mshare-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.mshare-lab { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: 7px; }
.mshare-field { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.mshare-val { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 13px; color: var(--ink); background: var(--paper-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mshare-val.mono { font-family: var(--mono); letter-spacing: .02em; }
.mshare-copy { flex: none; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 600; border-radius: 8px; padding: 10px 16px; }
.mshare-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-3); margin-bottom: 18px; }
.mshare-tt { font-size: 13px; font-weight: 600; }
.mshare-td { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.mshare-switch { flex: none; width: 42px; height: 24px; border-radius: 999px; background: var(--ghost); position: relative; }
.mshare-switch span { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s ease; }
.mshare-switch.is-on { background: var(--pos); }
.mshare-switch.is-on span { transform: translateX(18px); }
.mshare-foot { padding-top: 14px; border-top: 1px solid var(--line-2); }
.mshare-exp { font-size: 12.5px; color: var(--muted); }
.mshare-exp b { color: var(--ink); font-weight: 600; }

/* Export options widget */
.mexports { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mexport { border: 1px solid var(--line); border-radius: 12px; padding: 18px; background: var(--paper); transition: border-color .15s ease, transform .15s ease; }
.mexport:hover { border-color: var(--ink); transform: translateY(-2px); }
.mexport-ic { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 10px; display: grid; place-items: center; margin-bottom: 14px; }
.mexport-t { font-size: 14px; font-weight: 600; }
.mexport-d { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* Cover preview widget */
.mcover-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mcover-field { margin-bottom: 12px; }
.mcover-lab { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); display: block; margin-bottom: 6px; }
.mcover-input { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; font-family: var(--sans); font-size: 13px; color: var(--ink); background: var(--paper); }
.mcover-sw { display: flex; gap: 8px; }
.mcover-sw button { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.mcover-sw button.on { border-color: var(--ink); }
.mcover-upload { display: flex; align-items: center; gap: 10px; width: 100%; border: 1px dashed var(--line-3); border-radius: 8px; padding: 9px 11px; cursor: pointer; background: var(--paper); transition: border-color .15s ease, background .15s ease; }
.mcover-upload:hover { border-color: var(--ink); background: var(--paper-2); }
.mcover-upload-ic { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; background: var(--paper-4); color: var(--ink); flex: none; }
.mcover-upload-tx { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcover-upload.has-file { border-style: solid; border-color: var(--line); }
.mcover-upload.has-file .mcover-upload-ic { background: var(--pos-bg); color: var(--pos); }
.mcover-dates { display: flex; align-items: center; gap: 8px; }
.mcover-date { padding: 8px 10px; font-size: 12.5px; color: var(--ink); }
.mcover-dash { color: var(--faint); font-size: 13px; flex: none; }
.mcover-prev { border-radius: 12px; padding: 20px; min-height: 150px; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; color: #fff; }
.mcover-prev .pe { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; opacity: .6; }
.mcover-prev .pt { font-size: 16px; font-weight: 700; line-height: 1.2; }
.mcover-prev .pp { font-size: 11px; opacity: .65; }

/* Mini sortable table widget */
.mtable { width: 100%; border-collapse: collapse; }
.mtable th { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); text-align: right; padding: 13px 16px; border-bottom: 1px solid var(--line); background: var(--paper-3); }
.mtable th:first-child { text-align: left; }
.mtable td { font-size: 13px; color: var(--ink-2); text-align: right; padding: 12px 16px; border-bottom: 1px solid var(--line-2); }
.mtable td:first-child { text-align: left; font-weight: 500; color: var(--ink); }
.mtable tr:last-child td { border-bottom: 0; }
.mtable .good { color: var(--pos); font-weight: 600; }
.mtable .low { color: var(--neg); }

/* ════════════════════════════════════════════════════ PERSONAS */
.personas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.persona { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 28px 28px; background: var(--paper); position: relative; overflow: hidden; transition: border-color .2s ease; }
.persona:hover { border-color: var(--line-3); }
.persona-ix { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; color: var(--faint); }
.persona-glyph { width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 12px; display: grid; place-items: center; margin: 22px 0 20px; color: var(--ink); }
.persona h3 { margin-bottom: 10px; }
.persona p { font-size: 14px; color: var(--muted); line-height: 1.6; margin-bottom: 20px; }
.persona-stat { display: flex; align-items: baseline; gap: 8px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.persona-stat .v { font-family: var(--mono); font-size: 26px; font-weight: 600; letter-spacing: -.03em; }
.persona-stat .l { font-size: 12.5px; color: var(--muted); }

/* ════════════════════════════════════════════ INTEGRATIONS (reveal) */
.integ-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.channels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.channel {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
  padding: 22px 20px; position: relative; overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.channel--live:hover { border-color: var(--ink); box-shadow: 0 18px 40px -24px rgba(11,13,16,.45); transform: translateY(-3px); }
.channel-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.channel-logo { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px; }
.channel-logo--img { background: none; border-radius: 0; object-fit: contain; }
.channel-name { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.channel-desc { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
/* hover-reveal report list */
.channel-reports {
  list-style: none; margin-top: 16px; padding-top: 0; max-height: 0; overflow: hidden;
  opacity: 0; transition: max-height .35s ease, opacity .3s ease, padding-top .35s ease;
}
.channel--live:hover .channel-reports { max-height: 240px; opacity: 1; padding-top: 16px; border-top: 1px solid var(--line-2); margin-top: 16px; }
.channel-reports li { font-family: var(--mono); font-size: 11.5px; color: var(--muted); padding: 4px 0 4px 16px; position: relative; }
.channel-reports li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 5px; height: 5px; background: var(--ink); transform: rotate(45deg); }
.channel-soon { opacity: .58; }
.channel-soon .channel-logo { filter: grayscale(1); }

.lg-google   { background: #4285F4; }
.lg-meta     { background: #1877F2; }
.lg-linkedin { background: #0A66C2; }
.lg-ga4      { background: #E37400; font-size: 11px; }
.lg-tiktok   { background: #111; }
.lg-pinterest{ background: #E60023; }
.lg-microsoft{ background: #00A4EF; }
.lg-snap     { background: #FFFC00; color: #111; }

/* ════════════════════════════════════════ STAT BAND (dark) */
.statband { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--d-line); border-radius: var(--radius-lg); overflow: hidden; }
.statcell { padding: 38px 30px; }
.statcell + .statcell { border-left: 1px solid var(--d-line); }
.statcell .v { font-family: var(--mono); font-size: clamp(34px, 4vw, 46px); font-weight: 600; letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; }
.statcell .l { font-size: 13.5px; color: var(--d-text); margin-top: 8px; }
.statcell .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--d-faint); margin-bottom: 16px; }

/* ════════════════════════════════════════════════════════════ FAQ */
.faq { max-width: 800px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 24px 6px; background: none; border: 0; cursor: pointer; font-family: var(--sans); font-size: 17px; font-weight: 500; letter-spacing: -.01em; color: var(--ink); text-align: left; transition: color .15s ease; }
.faq-q:hover { color: var(--muted); }
.faq-sign { flex: none; width: 18px; height: 18px; position: relative; }
.faq-sign::before, .faq-sign::after { content: ""; position: absolute; background: var(--ink); transition: transform .25s ease, opacity .2s ease; }
.faq-sign::before { left: 0; top: 8px; width: 18px; height: 2px; }
.faq-sign::after { left: 8px; top: 0; width: 2px; height: 18px; }
.faq-q[aria-expanded="true"] .faq-sign::after { transform: scaleY(0); opacity: 0; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s ease; }
.faq-a-in { padding: 0 6px 26px; font-size: 15px; color: var(--muted); line-height: 1.7; max-width: 64ch; }
.faq-a.open { max-height: 360px; }

/* ════════════════════════════════════════════════════════════ CTA */
.cta { text-align: center; }
.cta .h2 { color: #fff; margin: 0 auto 16px; max-width: 18ch; }
.cta .lede { margin: 0 auto 32px; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 22px; }
.cta-fine { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: rgba(255,255,255,.78); }

/* ════════════════════════════════════════════════════════ RESPONSIVE */
@media (max-width: 920px) {
  .steps { grid-template-columns: 1fr; }
  .step + .step { border-left: 0; border-top: 1px solid var(--line); }
  .feat-shell { grid-template-columns: 1fr; }
  .feat-tabs { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .feat-tab { min-width: 200px; }
  .feat-tab-d { display: none; }
  .personas { grid-template-columns: 1fr; }
  .channels { grid-template-columns: repeat(2, 1fr); }
  .channel-reports { max-height: 240px; opacity: 1; padding-top: 16px; border-top: 1px solid var(--line-2); margin-top: 16px; } /* always open on touch */
  .statband { grid-template-columns: repeat(2, 1fr); }
  .statcell:nth-child(3) { border-left: 0; }
  .statcell:nth-child(n+3) { border-top: 1px solid var(--d-line); }
}
@media (max-width: 560px) {
  .channels { grid-template-columns: 1fr; }
  .mini-kpis, .mexports { grid-template-columns: repeat(2, 1fr); }
  .mcover-row { grid-template-columns: 1fr; }
  .statband { grid-template-columns: 1fr; }
  .statcell + .statcell { border-left: 0; border-top: 1px solid var(--d-line); }
}

/* ════════════════════════════════════════════ WITH / WITHOUT (dark) */
.cmp {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
  max-width: 1000px;
  margin: 0 auto;
}
.cmp-card {
  border-radius: var(--radius-lg);
  padding: 34px 32px;
}
/* "Before" — present, but clearly the lesser option */
.cmp-card--without {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
}
/* "After" — lights up: a bright panel on the dark band */
.cmp-card--with {
  background: var(--paper);
  border: 1px solid var(--paper);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.6);
}

.cmp-versus {
  align-self: center;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--d-faint);
  padding: 0 20px;
}

.cmp-head { margin-bottom: 24px; }
.cmp-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .02em; padding: 7px 13px; border-radius: 999px;
}
.cmp-badge--without { color: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.22); }
.cmp-badge--without svg { color: #E8938A; }
.cmp-badge--with { color: #fff; background: var(--ink); }
.cmp-sub {
  display: block; margin-top: 12px;
  font-size: 13px; letter-spacing: .01em;
}
.cmp-card--without .cmp-sub { color: rgba(255,255,255,.60); }
.cmp-card--with .cmp-sub { color: var(--muted); }

.cmp-list { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.cmp-list li {
  display: flex; align-items: flex-start; gap: 13px;
  font-size: 15px; line-height: 1.5;
}
.cmp-card--without .cmp-list li { color: rgba(255,255,255,.94); }
.cmp-card--with .cmp-list li { color: var(--ink-2); }

.cmp-mark {
  flex: none; width: 22px; height: 22px; margin-top: 1px;
  border-radius: 50%; display: grid; place-items: center;
}
.cmp-mark--x { background: rgba(224,139,130,.20); color: #F0A49C; }
.cmp-mark--check { background: var(--pos-bg); color: var(--pos); }

@media (max-width: 820px) {
  .cmp { grid-template-columns: 1fr; gap: 16px; max-width: 460px; }
  .cmp-versus { padding: 2px 0; }
  .cmp-card { padding: 28px 24px; }
}