/* ============================================================
   BINOBAN — Retail Media Platform module page + playground shell
   Layered on binoban.css / binoban-pages.css design tokens.
   ============================================================ */

/* ---- Hero stat card (replaces generic schematic) ---- */
.rmp-hero-card{ position:relative; width:100%; max-width:460px; margin-left:auto;
  background:linear-gradient(180deg,#13284b,#0e1c36); border:1px solid var(--hairline-dark);
  border-radius:14px; overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.4); }
.rhc-bar{ display:flex; align-items:center; gap:10px; padding:12px 16px;
  border-bottom:1px solid var(--hairline-dark2); background:rgba(243,241,234,.03); }
.rhc-dots{ display:flex; gap:5px; }
.rhc-dots i{ width:9px; height:9px; border-radius:50%; background:rgba(243,241,234,.18); }
.rhc-title{ font-size:12.5px; font-weight:700; color:var(--on-dark-soft); letter-spacing:.01em; }
.rhc-live{ margin-left:auto; font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:#7cab5e; display:inline-flex; align-items:center; gap:6px; }
.rhc-live::before{ content:""; width:7px; height:7px; border-radius:50%; background:#7cab5e; box-shadow:0 0 0 3px rgba(124,171,94,.2); }
.rhc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--hairline-dark2); }
.rhc-cell{ background:#0e1c36; padding:18px 16px; display:flex; flex-direction:column; gap:4px; }
.rhc-k{ font-size:11.5px; color:var(--on-dark-mute); letter-spacing:.02em; }
.rhc-v{ font-size:24px; font-weight:900; color:var(--on-dark); letter-spacing:-.02em; }
.rhc-d{ font-size:11px; color:var(--on-dark-mute); }
.rhc-d.up{ color:#7cab5e; }
.rhc-foot{ display:flex; flex-wrap:wrap; gap:6px; padding:14px 16px; border-top:1px solid var(--hairline-dark2); }
.rhc-tag{ font-size:10.5px; font-weight:700; letter-spacing:.04em; padding:5px 10px; border-radius:20px;
  background:rgba(216,185,136,.08); border:1px solid var(--hairline-dark2); color:var(--on-dark-soft); }
.rhc-sim{ position:absolute; top:12px; right:90px; font-size:9.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--on-dark-mute); }

.rmp-sim-note{ font-size:12.5px; color:var(--on-dark-mute); margin-top:22px; line-height:1.5; max-width:46ch; }
.rmp-sim-note a{ color:var(--gold-bright); text-decoration:underline; text-underline-offset:2px; }

/* ---- Revenue loop ---- */
.rmp-loop{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:8px; }
.rl-node{ position:relative; padding:22px 18px; border-radius:10px; background:rgba(243,241,234,.03);
  border:1px solid var(--hairline-dark2); display:flex; flex-direction:column; gap:8px; }
.rl-node .rl-i{ font-size:11px; font-weight:700; letter-spacing:.12em; color:var(--gold); }
.rl-node b{ font-size:15px; color:var(--on-dark); letter-spacing:-.01em; }
.rl-node span:last-child{ font-size:12px; color:var(--on-dark-mute); line-height:1.45; }
.rl-node.is-accent{ background:linear-gradient(180deg,#1a2c4d,#13243f); border-color:var(--hairline-dark); }
.rl-node.is-accent .rl-i{ color:var(--gold-bright); }

/* ---- Roles ---- */
.rmp-roles{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.rmp-role{ padding:26px 22px; border-radius:12px; background:#fff; border:1px solid var(--paper-line);
  display:flex; flex-direction:column; gap:10px; }
.rr-ico{ width:38px; height:38px; color:var(--gold-deep); }
.rr-ico svg{ width:100%; height:100%; }
.rmp-role h3{ font-size:17px; font-weight:900; letter-spacing:-.01em; margin:4px 0 0; color:var(--ink); }
.rr-q{ font-size:13.5px; font-style:italic; color:var(--gold-deep); margin:0; line-height:1.4; }
.rmp-role p:last-child{ font-size:13px; color:var(--ink-mute); margin:0; line-height:1.5; }

/* ---- Campaign types ---- */
.rmp-types{ grid-template-columns:repeat(4,1fr); }
.rmp-mode{ margin-top:14px; padding-top:12px; border-top:1px solid var(--hairline-dark2);
  font-size:11.5px; font-weight:700; letter-spacing:.04em; color:var(--gold-bright); }

/* ---- Surfaces ---- */
.rmp-surfaces{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.rmp-surface{ padding:28px 26px; border-radius:12px; background:#fff; border:1px solid var(--paper-line); }
.rs-num{ font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:10px; }
.rmp-surface h3{ font-size:19px; font-weight:900; letter-spacing:-.015em; margin:0 0 8px; color:var(--ink); }
.rmp-surface > p{ font-size:13.5px; color:var(--ink-mute); line-height:1.55; margin:0 0 14px; }
.rmp-ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:7px; }
.rmp-ul li{ position:relative; padding-left:20px; font-size:13px; color:var(--ink); line-height:1.45; }
.rmp-ul li::before{ content:""; position:absolute; left:2px; top:7px; width:7px; height:7px; border-radius:50%;
  background:var(--gold); }

/* ---- Metrics ---- */
.rmp-metrics{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.rm-stat{ padding:24px 18px; border-radius:10px; background:rgba(243,241,234,.03);
  border:1px solid var(--hairline-dark2); display:flex; flex-direction:column; gap:6px; }
.rm-v{ font-size:26px; font-weight:900; letter-spacing:-.025em; color:var(--on-dark); }
.rm-k{ font-size:12px; color:var(--on-dark-mute); }
.rm-stat.is-accent{ background:linear-gradient(180deg,#1a2c4d,#13243f); border-color:var(--hairline-dark); }
.rm-stat.is-accent .rm-v{ color:var(--gold-bright); }
.rmp-metrics-note{ margin-top:26px; font-size:13px; color:var(--on-dark-mute); line-height:1.5; max-width:64ch; }

/* ---- Final CTA ---- */
.rmp-final-inner{ text-align:center; max-width:680px; margin:0 auto; }
.rmp-final-cta{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:30px; }
.rmp-final-alt{ display:flex; gap:8px 28px; flex-wrap:wrap; justify-content:center; margin-top:30px; }
.rmp-final-alt a{ font-size:13.5px; font-weight:600; color:var(--on-dark-soft); transition:color .2s; }
.rmp-final-alt a:hover{ color:var(--gold-bright); }

/* ---- Disclaimer ---- */
.rmp-disclaimer{ padding-top:0; }
.rmp-note{ display:flex; gap:16px; align-items:flex-start; max-width:880px; padding:22px 24px;
  border:1px solid var(--hairline-dark2); border-radius:10px; background:rgba(243,241,234,.02); }
.rmp-note-tag{ flex:none; font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-bright); padding-top:2px; }
.rmp-note p{ margin:0; font-size:12.5px; line-height:1.6; color:var(--on-dark-mute); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1080px){
  .rmp-loop{ grid-template-columns:repeat(3,1fr); }
  .rmp-roles{ grid-template-columns:repeat(2,1fr); }
  .rmp-types{ grid-template-columns:repeat(2,1fr); }
  .rmp-metrics{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:760px){
  .rmp-hero-card{ max-width:none; margin:0 auto; }
  .rmp-loop{ grid-template-columns:1fr 1fr; }
  .rmp-roles{ grid-template-columns:1fr; }
  .rmp-types{ grid-template-columns:1fr; }
  .rmp-surfaces{ grid-template-columns:1fr; }
  .rmp-metrics{ grid-template-columns:1fr 1fr; }
  .rmp-note{ flex-direction:column; gap:8px; }
}
@media (max-width:440px){
  .rmp-loop{ grid-template-columns:1fr; }
  .rhc-grid{ grid-template-columns:1fr 1fr; }
}