/* outreach-explainer.css — the shell around the three copied animations.
 *
 * ⚠️ THIS FILE STYLES THE SHELL ONLY. Everything inside a panel is
 * `css/flagship-anim.css`, copied verbatim from the sales page and scoped
 * under `.fa-scope`. If a panel looks wrong, the fix is a re-copy, not a rule
 * added here — two divergent copies of one animation is the fault both files
 * exist to avoid.
 *
 * Tokens are the app shell's, not the marketing page's: this renders inside
 * app.html. `.fa-scope` re-declares the warm marketing set for its own subtree
 * (it is copied along with the rules that use it), so the two do not fight.
 */
.oxp-overlay{
  position:fixed; inset:0; z-index:9500;
  background:rgba(20,12,30,.55); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.oxp-overlay[hidden]{display:none;}
body.oxp-open{overflow:hidden;}

.oxp-panel{
  background:#fff; border-radius:18px; width:100%; max-width:1040px;
  max-height:calc(100vh - 40px);
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 40px 100px -30px rgba(42,32,48,.55);
}
.oxp-load{margin:60px auto; color:#8b7e92; font-size:14px;}

.oxp-bar{
  display:flex; align-items:center; gap:10px; flex:0 0 auto;
  padding:11px 16px; border-bottom:1px solid #ebe1c9; background:#faf6ec; font-size:12.5px;
}
.oxp-back{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-family:inherit;
  border:1px solid #d8cdaf; background:#fff; border-radius:7px; padding:4px 9px;
  font-size:11.5px; color:#5a4d62;
}
.oxp-back:hover{color:#2a2030;}
.oxp-ttl{font-weight:650; color:#2a2030;}
.oxp-count{
  margin-left:auto; font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11px; color:#8b7e92; font-variant-numeric:tabular-nums;
}

/* ⚠️ THE DECK SCROLLS, THE FOOTER DOES NOT. The copied panels are tall — the
   influencer one is five steps plus a stage — and on a laptop the whole thing
   does not fit. Only this scrolls, so Start now is always where it was. */
.oxp-deck{position:relative; flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain;}
.oxp-slide{padding:6px 18px 18px;}
/* The copied `.flagship` carries a 60px top margin and a 28px radius, both
   right on a marketing page and wrong inside a dialog that already has both. */
.oxp-slide .flagship{margin-top:14px; border-radius:16px; box-shadow:none;}

.oxp-arrow{
  position:absolute; top:calc(50% - 19px); width:38px; height:38px; border-radius:50%;
  border:1px solid #ebe1c9; background:#fff; color:#5a4d62; cursor:pointer;
  display:flex; align-items:center; justify-content:center; z-index:4;
  box-shadow:0 4px 14px -6px rgba(42,32,48,.4);
  transition:color .15s, border-color .15s;
}
.oxp-arrow:hover{color:#2a2030; border-color:#d8cdaf;}
.oxp-arrow[disabled]{opacity:.32; cursor:default;}
.oxp-arrow.prev{left:10px;} .oxp-arrow.next{right:10px;}

.oxp-foot{
  flex:0 0 auto; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:13px 20px; border-top:1px solid #ebe1c9; background:#faf6ec;
}
.oxp-dots{display:flex; gap:7px;}
.oxp-dot{
  width:8px; height:8px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:#d8cdaf; transition:background .2s, width .2s;
}
.oxp-dot.on{background:#6a4cf1; width:22px; border-radius:4px;}
.oxp-skip{
  background:none; border:0; cursor:pointer; font-family:inherit; font-size:12px;
  color:#8b7e92; text-decoration:underline; text-decoration-color:#d8cdaf;
}
.oxp-skip:hover{color:#2a2030;}
/* §RISK-LINE — the strongest true thing we can say about the offer, beside the
   button rather than in a paragraph nobody reaches. `margin-left:auto` moves
   from the CTA to here, so the risk line and the button travel together on the
   right rather than the line floating in the middle of the footer. */
.oxp-risk{
  margin:0 0 0 auto; text-align:right; font-size:11px; line-height:1.35;
  color:#8b7e92; letter-spacing:.01em;
}
.oxp-risk span{display:block;}

.oxp-cta{
  display:inline-flex; align-items:center; gap:8px;
  background:#6a4cf1; color:#fff; border:0; cursor:pointer; font-family:inherit;
  border-radius:999px; padding:11px 22px; font-size:14px; font-weight:700;
  box-shadow:0 12px 26px -12px #6a4cf1;
}
.oxp-cta:hover{background:#4a32b8;}

/* ── Phones ───────────────────────────────────────────────────────────
   No arrows: a 38px target on the edge of a phone is a miss-tap, and swipe
   plus the dots already say where you are. The CTA goes full width and the
   footer stays pinned, so the way forward is never something you scroll for. */
@media (max-width:640px){
  .oxp-overlay{padding:0;}
  .oxp-panel{max-width:none; max-height:100vh; height:100vh; border-radius:0;}
  .oxp-arrow{display:none;}
  .oxp-slide{padding:4px 12px 14px;}
  .oxp-foot{gap:10px;}
  .oxp-risk{margin:0 auto; text-align:center; order:98;}
  .oxp-risk span{display:inline;}
  .oxp-risk span::before{content:" \00b7  ";}
  .oxp-cta{margin-left:0; width:100%; justify-content:center; order:99;}
  .oxp-dots{margin:0 auto;}
  .oxp-skip{margin:0 auto;}
}

@media (prefers-reduced-motion:reduce){
  .oxp-dot, .oxp-arrow, .oxp-cta{transition:none;}
}