/* =========================================================================
   MSL CTA SYSTEM — kit primitive + variants (Design-Ops, 2026-05-31)
   Layer ON TOP of msl-kit.css. Tokens only · RTL · 0 inline · 0 new !important.
   Tracking hook: every CTA root carries data-cta-type + data-cta-variant + data-cta-slot.
   ========================================================================= */

/* ---------- base banner ---------- */
.msl-cta{
  display:grid; grid-template-columns:1fr auto; gap:var(--msl-sp-5); align-items:center;
  background:#fff; border:1px solid var(--msl-line); border-right:4px solid var(--msl-amber);
  border-radius:var(--msl-r-md); padding:var(--msl-sp-5) var(--msl-sp-6); margin:var(--msl-sp-6) 0;
}
.msl-cta-main{ display:flex; flex-direction:column; gap:var(--msl-sp-2); min-width:0; }
.msl-cta-tag{
  align-self:flex-start; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--msl-font); font-size:var(--msl-size-tiny); font-weight:var(--msl-w-bold);
  letter-spacing:var(--msl-ls-label); text-transform:uppercase;
  background:var(--msl-amber-soft); color:var(--msl-warn);
  padding:3px 12px; border-radius:var(--msl-r-pill);
}
.msl-cta-title{
  font-family:var(--msl-font); font-size:var(--msl-size-h4); font-weight:var(--msl-w-heavy);
  color:var(--msl-ink-strong); letter-spacing:var(--msl-ls-tight); line-height:var(--msl-lh-snug); margin:0;
}
.msl-cta-text{ font-size:var(--msl-size-small); color:var(--msl-muted); line-height:var(--msl-lh-normal); margin:0; max-width:60ch; }
.msl-cta-text b{ color:var(--msl-ink-strong); font-weight:var(--msl-w-bold); }
.msl-cta-action{ flex-shrink:0; }
@media (max-width:600px){
  .msl-cta{ grid-template-columns:1fr; }
  .msl-cta-action .msl-btn{ width:100%; justify-content:center; }
}

/* ---------- type modifiers ---------- */
.msl-cta--tool{ border-right-color:var(--msl-amber); }
.msl-cta--tool .msl-cta-tag{ background:var(--msl-amber-soft); color:var(--msl-warn); }
.msl-cta--quiz{ border-right-color:var(--msl-info); }
.msl-cta--quiz .msl-cta-tag{ background:#e8f2fc; color:var(--msl-info); }
.msl-cta--research{ border-right-color:var(--msl-ink-strong); }
.msl-cta--research .msl-cta-tag{ background:var(--msl-cream-2); color:var(--msl-ink-strong); }
.msl-cta--guide{ border-right-color:var(--msl-amber-deep); }
.msl-cta--guide .msl-cta-tag{ background:var(--msl-amber-soft); color:var(--msl-amber-deep); }
.msl-cta--market{ border-right-color:var(--msl-up); }
.msl-cta--market .msl-cta-tag{ background:var(--msl-up-soft); color:var(--msl-up); }

/* ---------- high-emphasis navy ---------- */
.msl-cta--navy{ background:var(--msl-navy); border-color:rgba(255,255,255,.12); }
.msl-cta--navy .msl-cta-title{ color:#fff; }
.msl-cta--navy .msl-cta-text{ color:rgba(255,255,255,.72); }
.msl-cta--navy .msl-cta-text b{ color:#fff; }

/* ---------- "choice" — related-content chooser (3 cards) ---------- */
.msl-cta--choice{ display:block; background:none; border:0; border-right:0; padding:0; margin:var(--msl-sp-6) 0; }
.msl-cta--choice .msl-cta-title{ font-size:var(--msl-size-h3); margin:0 0 var(--msl-sp-4); }
.msl-cta-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--msl-sp-3); }
@media (max-width:680px){ .msl-cta-cards{ grid-template-columns:1fr; } }
.msl-cta-card{
  display:flex; flex-direction:column; gap:var(--msl-sp-2);
  background:#fff; border:1px solid var(--msl-line); border-radius:var(--msl-r-md);
  padding:var(--msl-sp-4) var(--msl-sp-5); text-decoration:none; transition:border-color .15s, transform .15s;
}
.msl-cta-card:hover{ border-color:var(--msl-amber); transform:translateY(-1px); }
.msl-cta-card .msl-cta-tag{ margin:0; }
.msl-cta-card-title{ font-family:var(--msl-font); font-size:var(--msl-size-small); font-weight:var(--msl-w-heavy); color:var(--msl-ink-strong); line-height:var(--msl-lh-snug); }
.msl-cta-card-go{ margin-top:auto; font-family:var(--msl-font); font-size:var(--msl-size-meta); font-weight:var(--msl-w-bold); color:var(--msl-ink-strong); }
.msl-cta-card-go::after{ content:" ←"; color:var(--msl-amber); font-weight:var(--msl-w-black); }

/* ---------- PLACEMENT VARIANTS (added per Omer — beyond end-of-content) ---------- */
/* inline mid-article — compact, sits between paragraphs */
.msl-cta--inline{ margin:var(--msl-sp-5) 0; padding:var(--msl-sp-4) var(--msl-sp-5); }
.msl-cta--inline .msl-cta-title{ font-size:var(--msl-size-small); }
.msl-cta--inline .msl-cta-text{ display:none; }            /* inline = tighter, title+button only */
/* text-link CTA — a single in-sentence styled link (lightest touch) */
.msl-cta-link{ font-weight:var(--msl-w-bold); color:var(--msl-amber-deep); text-decoration:underline; text-underline-offset:3px; }
.msl-cta-link::after{ content:" ←"; color:var(--msl-amber); }
/* sticky mobile bar — thin bottom strip, mobile only */
.msl-cta--sticky{ display:none; }
@media (max-width:600px){
  .msl-cta--sticky{ display:flex; position:fixed; inset-inline:0; bottom:0; z-index:40;
    align-items:center; justify-content:space-between; gap:var(--msl-sp-3);
    background:var(--msl-navy); color:#fff; padding:var(--msl-sp-3) var(--msl-sp-4); margin:0; border:0; border-radius:0; }
  .msl-cta--sticky .msl-cta-title{ color:#fff; font-size:var(--msl-size-small); }
  .msl-cta--sticky .msl-cta-text{ display:none; }
}

/* ---------- demo scaffolding (mockup only) ---------- */
.cta-demo-doc{ background:#fff; border:1px solid var(--msl-line); border-radius:var(--msl-r-md); padding:var(--msl-sp-6) var(--msl-sp-7); }
.cta-demo-label{ display:inline-block; font-family:var(--msl-font); font-size:var(--msl-size-tiny); font-weight:var(--msl-w-bold); letter-spacing:var(--msl-ls-label); text-transform:uppercase; color:var(--msl-amber-deep); background:var(--msl-cream-2); padding:3px 10px; border-radius:var(--msl-r-sm); margin:var(--msl-sp-6) 0 var(--msl-sp-2); }
.cta-section{ padding:var(--msl-sp-8) 0; }