/* ==========================================================================
   SOCIAL MEDIA CAMPAIGN  ·  /social-campaign  ·  design pass v2
   Replaces the module's first stylesheet. Scoped to .smp, loaded last so it
   wins the cascade.

   Palette — the site's three colours, nothing else:
     #1E3A8A deep blue   #374151 dark gray   #06B6D4 bright cyan
   Cyan never carries body text on white (2.43:1): it is a fill with dark ink
   (#062B33 on cyan = 6.05:1) or the darker #0E6E85 for icons and small labels
   on white/tint (5.35:1). Element selectors are wrapped in :where() so they
   carry zero specificity and can never out-rank a component class.
   ========================================================================== */

.smp{
  --smp-blue:#1E3A8A;
  --smp-blue-dk:#16306F;
  --smp-gray:#374151;
  --smp-cyan:#06B6D4;
  --smp-cyan-dk:#0E6E85;
  --smp-ink:#1F2937;
  --smp-mute:#5B6472;
  --smp-line:#E4E8EF;
  --smp-line2:#EDF1F6;
  --smp-soft:#F6F8FB;
  --smp-tint:#E6F8FC;
  --smp-r:16px;
  font-variant-numeric:tabular-nums;
  color:var(--smp-ink);
}

.smp *{ box-sizing:border-box; }
.smp-wrap{ width:100%; max-width:1200px; margin:0 auto; padding:0 20px; }

/* ============================================================ HERO ======= */
.smp-hero{
  position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(1100px 460px at 12% -10%, rgba(6,182,212,.30), transparent 62%),
    radial-gradient(900px 420px at 92% 8%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(155deg, #2450AE 0%, var(--smp-blue) 46%, var(--smp-blue-dk) 100%);
  padding:64px 0 72px;
}
.smp-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.6), transparent 78%);
}
.smp-hero-in{ position:relative; z-index:1; max-width:760px; }

.smp-eyebrow{
  display:inline-flex; align-items:center; gap:9px; height:34px; padding:0 15px;
  border-radius:999px; background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.24);
  font-size:11.5px; font-weight:750; letter-spacing:.10em; text-transform:uppercase;
  color:#67E8F9;
}
.smp-eyebrow::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--smp-cyan);
  box-shadow:0 0 0 4px rgba(6,182,212,.24);
}
.smp-hero h1, .smp-hero h2{
  margin:20px 0 0; font-size:clamp(30px, 5.2vw, 52px); line-height:1.06;
  font-weight:800; letter-spacing:-.028em; color:#fff;
}
.smp-hero-lede{
  margin:18px 0 0; max-width:660px; font-size:clamp(15.5px, 1.9vw, 18px);
  line-height:1.65; color:rgba(255,255,255,.90);
}
.smp-hero-facts{
  display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 0; padding:0; list-style:none;
}
.smp-hero-facts li{
  display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 15px;
  border-radius:11px; background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);
  font-size:13px; font-weight:600; color:#fff;
}
.smp-hero-facts li svg{ width:16px; height:16px; color:#67E8F9; flex:none; }
.smp-hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin:32px 0 0; }

/* ============================================================ BUTTONS ==== */
.smp-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:0 22px; border-radius:12px; border:1px solid transparent;
  font-size:14px; font-weight:700; letter-spacing:.005em; text-decoration:none;
  cursor:pointer; white-space:nowrap; font-family:inherit;
  transition:background .16s, border-color .16s, color .16s, transform .16s, box-shadow .16s;
}
.smp-btn svg{ width:18px; height:18px; flex:none; }
.smp-btn:focus-visible{ outline:2px solid var(--smp-cyan); outline-offset:3px; }
.smp-btn:active{ transform:translateY(1px); }

.smp-btn-cyan{ background:var(--smp-cyan); border-color:var(--smp-cyan); color:#062B33;
  box-shadow:0 16px 34px -18px rgba(6,182,212,.95); }
.smp-btn-cyan:hover{ background:#22D3EE; border-color:#22D3EE; color:#062B33; }

.smp-btn-ghost{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.34); color:#fff; }
.smp-btn-ghost:hover{ background:#fff; border-color:#fff; color:var(--smp-blue); }

.smp-btn-primary{ background:var(--smp-blue); border-color:var(--smp-blue); color:#fff;
  box-shadow:0 14px 28px -18px rgba(30,58,138,.95); }
.smp-btn-primary:hover{ background:var(--smp-blue-dk); border-color:var(--smp-blue-dk); }

.smp-btn-line{ background:#fff; border-color:var(--smp-line); color:var(--smp-gray); }
.smp-btn-line:hover{ background:var(--smp-blue); border-color:var(--smp-blue); color:#fff; }

/* ================================================================= TABS == */
.smp-tabs-band{ background:#fff; border-bottom:1px solid var(--smp-line);
  box-shadow:0 12px 28px -26px rgba(16,24,40,.45); }
.smp-tabs{ display:flex; gap:10px; padding:14px 0; overflow-x:auto;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.smp-tabs::-webkit-scrollbar{ display:none; }
.smp-tab{ display:inline-flex; align-items:center; gap:12px; flex:none;
  min-height:58px; padding:0 18px; border-radius:14px;
  background:#fff; border:1px solid var(--smp-line); text-decoration:none;
  transition:background .16s, border-color .16s, box-shadow .16s, transform .16s; }
.smp-tab:hover{ border-color:var(--smp-cyan); transform:translateY(-1px); }
.smp-tab:focus-visible{ outline:2px solid var(--smp-cyan); outline-offset:2px; }
.smp-tab-ic{ width:38px; height:38px; flex:none; display:grid; place-items:center;
  border-radius:11px; background:var(--smp-tint); color:var(--smp-cyan-dk); }
.smp-tab-ic svg{ width:20px; height:20px; }
.smp-tab-txt{ display:grid; gap:1px; line-height:1.2; }
.smp-tab-txt b{ font-size:14px; font-weight:750; color:var(--smp-ink); }
.smp-tab-rate{ font-size:11.5px; font-weight:650; color:var(--smp-mute); }
.smp-tab.on{ background:var(--smp-blue); border-color:var(--smp-blue);
  box-shadow:0 16px 32px -20px rgba(30,58,138,.95); }
.smp-tab.on .smp-tab-ic{ background:rgba(255,255,255,.16); color:#fff; }
.smp-tab.on .smp-tab-txt b{ color:#fff; }
.smp-tab.on .smp-tab-rate{ color:#A9E9F6; }

/* ============================================================= SECTIONS == */
.smp-section{ padding:64px 0; }
.smp-section + .smp-section{ border-top:1px solid var(--smp-line2); }
.smp-sec-head{ max-width:720px; margin:0 0 32px; }
.smp-sec-head h2{ margin:0; font-size:clamp(22px, 3.2vw, 32px); line-height:1.15;
  font-weight:800; letter-spacing:-.022em; color:#111827; }
.smp-sec-head p{ margin:12px 0 0; font-size:15.5px; line-height:1.65; color:var(--smp-mute); }

/* ============================================================= PACKAGES == */
.smp-packs{ display:grid; gap:20px; align-items:start; grid-template-columns:repeat(auto-fill, minmax(272px, 1fr)); }
.smp-card{ position:relative; display:flex; flex-direction:column; padding-top:28px;
  background:#fff; border:1px solid var(--smp-line); border-radius:var(--smp-r);
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 20px 44px -38px rgba(16,24,40,.4);
  transition:transform .18s, box-shadow .18s, border-color .18s; }
.smp-card:hover{ transform:translateY(-3px); border-color:#CFE6F2;
  box-shadow:0 2px 4px rgba(16,24,40,.05), 0 30px 60px -40px rgba(30,58,138,.5); }
.smp-card.is-featured{ border-color:var(--smp-cyan);
  box-shadow:0 0 0 1px var(--smp-cyan), 0 30px 60px -40px rgba(6,182,212,.6); }

/* in-flow ribbon: the flag used to overhang the card's top edge and was clipped
   by an ancestor. Sitting in the flow it can never clip and never collide. */
.smp-flag{ position:absolute; top:0; left:0; right:0; z-index:2;
  display:flex; align-items:center; justify-content:center; gap:7px;
  height:28px; padding:0 14px; background:var(--smp-cyan); color:#062B33;
  border-radius:calc(var(--smp-r) - 1px) calc(var(--smp-r) - 1px) 0 0;
  font-size:10.5px; font-weight:800; letter-spacing:.10em; text-transform:uppercase; }
.smp-flag::before{ content:""; width:6px; height:6px; border-radius:50%; background:#062B33; opacity:.55; }

.smp-give{ margin:14px 20px 0; padding:0; list-style:none; display:grid; gap:8px;
  font-size:13.6px; color:var(--smp-mute); }
.smp-give li{ display:flex; gap:9px; line-height:1.5; }
.smp-give li::before{ content:""; flex:none; width:16px; height:16px; margin-top:3px;
  border-radius:50%;
  background:var(--smp-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E6E85' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat; }

.smp-meta{ display:flex; flex-wrap:wrap; gap:7px; margin:16px 20px 0;
  font-size:11.8px; font-weight:650; color:var(--smp-cyan-dk); }
.smp-meta span{ display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px;
  border-radius:8px; background:var(--smp-tint); border:1px solid #BEEAF4; }
.smp-meta svg{ width:14px; height:14px; }

.smp-card-top{ display:flex; align-items:center; gap:11px; padding:4px 20px 0; }
.smp-card-ic{
  width:36px; height:36px; flex:none; display:grid; place-items:center;
  border-radius:11px; background:var(--smp-tint); color:var(--smp-cyan-dk);
}
.smp-card-ic svg{ width:18px; height:18px; }
.smp-card h3{ margin:0; font-size:17.5px; font-weight:750;
  letter-spacing:-.016em; line-height:1.3; color:#111827; }

/* order + view counts */
.smp-stats{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 15px; }
.smp-stats span{
  display:inline-flex; align-items:center; gap:6px; height:27px; padding:0 10px;
  border-radius:8px; background:var(--smp-soft); border:1px solid var(--smp-line2);
  font-size:11.8px; font-weight:650; color:var(--smp-mute);
}
.smp-stats b{ font-weight:800; color:var(--smp-ink); }
.smp-stats svg{ width:14px; height:14px; color:var(--smp-cyan-dk); }
.smp-card-foot{ padding:0 20px 20px; }
/* price reads as a currency stack: USD first, BDT under it */
.smp-price{ display:grid; gap:3px; margin:15px 0 17px; }
.smp-price .smp-usd{ font-size:30px; font-weight:800; letter-spacing:-.024em; color:#111827; line-height:1.05; }
.smp-price .smp-bdt{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px;
  font-size:14px; font-weight:700; color:var(--smp-ink); }
.smp-price .smp-bdt em{ font-style:normal; font-size:11.8px; font-weight:600; color:var(--smp-mute); }
.smp-price s{ font-size:14px; font-weight:600; color:#98A2B3; }

/* Order boost takes the row; the WhatsApp control sits beside it as a square,
   never stretched into a wide empty pill. */
.smp-card-actions{ display:grid; grid-template-columns:1fr auto; gap:9px; align-items:stretch; }
.smp-card-actions .smp-btn{ width:100%; }
.smp-card-actions .smp-icon-btn{
  width:auto; min-width:52px; height:auto; min-height:48px; border-radius:12px;
}
@media (max-width:400px){
  .smp-card-actions .smp-icon-btn{ min-width:48px; }
}

.smp-icon-btn{ display:grid; place-items:center; width:44px; height:44px; flex:none;
  border-radius:11px; border:1px solid #BEEAF4; background:var(--smp-tint);
  color:var(--smp-cyan-dk); text-decoration:none; transition:background .16s, color .16s; }
.smp-icon-btn:hover{ background:var(--smp-cyan); color:#062B33; }
.smp-icon-btn svg{ width:19px; height:19px; }
.smp-icon-btn:focus-visible{ outline:2px solid var(--smp-cyan); outline-offset:2px; }

/* =============================================================== PANELS == */
.smp-panels{ display:grid; gap:22px; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); align-items:start; }
.smp-panel{ background:#fff; border:1px solid var(--smp-line); border-radius:var(--smp-r);
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 22px 50px -40px rgba(16,24,40,.42); overflow:hidden; }
.smp-panel-head{ display:flex; align-items:center; gap:12px; padding:17px 20px;
  border-bottom:1px solid var(--smp-line2); background:var(--smp-soft); }
.smp-panel-ic{ width:38px; height:38px; flex:none; display:grid; place-items:center;
  border-radius:11px; background:var(--smp-blue); color:#fff; }
.smp-panel-ic svg{ width:19px; height:19px; }
.smp-panel-head h3{ margin:0; font-size:15px; font-weight:750; letter-spacing:-.01em; color:#111827; }
.smp-panel-head p{ margin:3px 0 0; font-size:12.5px; color:var(--smp-mute); }
.smp-panel-body{ padding:20px; }

/* ================================================================ FORMS == */
.smp-form{ display:grid; gap:15px; }
.smp-row2{ display:grid; gap:15px; grid-template-columns:1fr 1fr; }
.smp-fld{ display:grid; gap:7px; }
.smp-fld > span{ font-size:11.5px; font-weight:750; letter-spacing:.06em;
  text-transform:uppercase; color:var(--smp-mute); }
:where(.smp) .smp-input, :where(.smp) .smp-select, :where(.smp) .smp-textarea{
  width:100%; padding:12px 14px; border:1px solid var(--smp-line); border-radius:11px;
  background:#fff; font-size:14.5px; color:var(--smp-ink); font-family:inherit;
  transition:border-color .16s, box-shadow .16s; }
:where(.smp) .smp-textarea{ line-height:1.6; resize:vertical; min-height:92px; }
:where(.smp) .smp-input:focus, :where(.smp) .smp-select:focus, :where(.smp) .smp-textarea:focus{
  outline:none; border-color:var(--smp-cyan); box-shadow:0 0 0 3px rgba(6,182,212,.20); }
:where(.smp) .smp-input::placeholder, :where(.smp) .smp-textarea::placeholder{ color:#9AA3B0; }
:where(.smp) .smp-select{ appearance:none; padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6472' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; background-size:17px; }

.smp-rate-badge{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 15px; border-radius:12px; background:var(--smp-tint); border:1px solid #BEEAF4; }
.smp-rate-badge span{ font-size:12.8px; font-weight:650; color:var(--smp-cyan-dk); }
.smp-rate-badge b{ font-size:16px; font-weight:800; color:#062B33; letter-spacing:-.01em; }

.smp-calc{ margin-top:18px; padding-top:16px; border-top:1px dashed var(--smp-line); display:grid; gap:10px; }
.smp-calc-row{ display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  font-size:13.8px; color:var(--smp-mute); }
.smp-calc-row b{ font-size:14.5px; font-weight:750; color:var(--smp-ink); }
.smp-total{ display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  margin-top:4px; padding:15px 16px; border-radius:12px; background:var(--smp-blue); color:#fff; }
.smp-total span{ font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#BFD3F5; }
.smp-total b{ font-size:24px; font-weight:800; letter-spacing:-.02em; color:#fff; }
.smp-hint{ margin:14px 0 0; font-size:12.4px; line-height:1.6; color:var(--smp-mute); }

/* ================================================================ STEPS == */
.smp-steps-band{ background:var(--smp-soft); border-top:1px solid var(--smp-line2); border-bottom:1px solid var(--smp-line2); }
.smp-steps{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); margin:34px 0 0; }
.smp-step{ position:relative; padding:24px; background:#fff; border:1px solid var(--smp-line); border-radius:var(--smp-r); }
.smp-step-n{ position:absolute; top:18px; right:20px; font-size:13px; font-weight:800;
  color:#C7D2E4; letter-spacing:.04em; }
.smp-step-ic{ width:44px; height:44px; display:grid; place-items:center; margin-bottom:14px;
  border-radius:13px; background:var(--smp-tint); color:var(--smp-cyan-dk); }
.smp-step-ic svg{ width:22px; height:22px; }
.smp-step h3{ margin:0; font-size:15.5px; font-weight:750; color:#111827; letter-spacing:-.01em; }
.smp-step p{ margin:9px 0 0; font-size:13.8px; line-height:1.62; color:var(--smp-mute); }

/* ================================================================== CTA == */
.smp-cta{ position:relative; overflow:hidden; border-radius:22px; padding:52px 32px; text-align:center;
  background:
    radial-gradient(760px 320px at 50% 0%, rgba(6,182,212,.28), transparent 66%),
    linear-gradient(150deg, #2450AE 0%, var(--smp-blue) 52%, var(--smp-blue-dk) 100%);
  color:#fff; }
.smp-cta h2{ margin:0; font-size:clamp(22px, 3.4vw, 34px); font-weight:800; letter-spacing:-.024em; color:#fff; }
.smp-cta p{ margin:14px auto 0; max-width:620px; font-size:15.5px; line-height:1.68; color:rgba(255,255,255,.9); }
.smp-cta-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:28px 0 0; }

/* ============================================================ RESPONSIVE = */
@media (max-width:760px){
  .smp-hero{ padding:46px 0 52px; }
  .smp-section{ padding:46px 0; }
  .smp-wrap{ padding:0 16px; }
  .smp-hero-cta .smp-btn{ width:100%; }
  .smp-cta{ padding:38px 20px; border-radius:16px; }
  .smp-cta-actions .smp-btn{ width:100%; }
  .smp-row2{ grid-template-columns:1fr; }
  .smp-packs{ grid-template-columns:1fr; }
  .smp-total{ flex-direction:column; align-items:flex-start; gap:4px; }
  .smp-panel-body{ padding:16px; }
  .smp-card-desc{ font-size:15px; }
}
@media (max-width:400px){
  .smp-tab{ min-height:54px; padding:0 14px; }
  .smp-tab-ic{ width:34px; height:34px; }
  .smp-price{ font-size:25px; }
}

/* =============================================== PACKAGE PICKER (smart cards) ==
   Radios dressed as cards: state is driven by :has(input:checked) so it updates
   the instant you tap without a byte of JavaScript. The input stays focusable
   (visually hidden, not display:none) so keyboard and screen readers work. */
.smp-pick{ border:0; margin:0; padding:0; min-width:0; }
.smp-pick legend{
  padding:0 0 9px; font-size:11.5px; font-weight:750; letter-spacing:.06em;
  text-transform:uppercase; color:var(--smp-mute);
}
.smp-pick-grid{ display:grid; gap:10px; grid-template-columns:1fr 1fr; }
@media (max-width:560px){ .smp-pick-grid{ grid-template-columns:1fr; } }

.smp-pick-card{
  position:relative; display:flex; align-items:center; gap:12px; cursor:pointer;
  min-height:68px; padding:12px 14px; border:1px solid var(--smp-line);
  border-radius:13px; background:#fff;
  transition:border-color .16s, box-shadow .16s, background .16s;
}
.smp-pick-card:hover{ border-color:#BEEAF4; background:#FBFDFE; }
.smp-pick-card input{
  position:absolute; width:1px; height:1px; opacity:0; margin:0; pointer-events:none;
}
.smp-pick-card:has(input:focus-visible){ outline:2px solid var(--smp-cyan); outline-offset:2px; }
.smp-pick-card:has(input:checked){
  border-color:var(--smp-cyan); background:var(--smp-tint);
  box-shadow:0 0 0 1px var(--smp-cyan), 0 12px 26px -20px rgba(6,182,212,.9);
}

.smp-pick-ic{
  width:36px; height:36px; flex:none; display:grid; place-items:center;
  border-radius:11px; background:var(--smp-tint); color:var(--smp-cyan-dk);
  transition:background .16s, color .16s;
}
.smp-pick-ic svg{ width:18px; height:18px; }
.smp-pick-card:has(input:checked) .smp-pick-ic{ background:var(--smp-blue); color:#fff; }
.smp-pick-in{ display:grid; gap:1px; min-width:0; }
.smp-pick-name{
  font-size:13.8px; font-weight:750; color:#111827; letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.smp-pick-usd{ font-size:14.5px; font-weight:800; color:var(--smp-ink); letter-spacing:-.01em; }
.smp-pick-bdt{ font-size:11.8px; font-weight:650; color:var(--smp-mute); }

.smp-pick-tick{
  margin-left:auto; flex:none; width:20px; height:20px; border-radius:50%;
  border:2px solid #C7D2E4; background:#fff;
  transition:border-color .16s, background .16s;
}
.smp-pick-card:has(input:checked) .smp-pick-tick{
  border-color:var(--smp-blue);
  background:var(--smp-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* ==========================================================================
   DEPOSIT PANEL FINISH  ·  /social-campaign#deposit
   A premium pass over the "Fund your ad account" card and its calculator.
   Same three colours; the cyan stays a fill or the darker #0E6E85 on white.
   ========================================================================== */
.smp-panel{ position:relative; }
.smp-panel::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px; border-radius:var(--smp-r) var(--smp-r) 0 0;
  background:linear-gradient(90deg, var(--smp-blue), var(--smp-cyan) 55%, var(--smp-blue));
  opacity:.9;
}
.smp-panel-head{ background:linear-gradient(180deg, #FBFDFE, var(--smp-soft)); }
.smp-panel-ic{
  background:linear-gradient(150deg, #2450AE, var(--smp-blue));
  box-shadow:0 10px 22px -14px rgba(30,58,138,.95), inset 0 1px 0 rgba(255,255,255,.18);
}

/* the rate, treated as the headline number it is */
.smp-rate-badge{
  position:relative; padding:15px 17px; gap:11px; justify-content:flex-start;
  background:linear-gradient(140deg, #F2FBFE, var(--smp-tint));
  border:1px solid #BEEAF4; box-shadow:inset 0 1px 0 #fff;
}
/* the icon is decorative: keep it glued to its label, never a flex end */
.smp-rate-badge > svg{ flex:none; width:18px; height:18px; color:var(--smp-cyan-dk); }
.smp-rate-badge{ font-size:13.8px; }
.smp-rate-badge .smp-rate-val{ font-weight:800; }
.smp-rate-badge b{ font-size:19px; }

/* inputs: roomier, with an unmistakable focus ring */
:where(.smp) .smp-input, :where(.smp) .smp-select, :where(.smp) .smp-textarea{
  padding:13px 15px; border-radius:12px; font-size:15px;
}
:where(.smp) .smp-input:hover, :where(.smp) .smp-select:hover, :where(.smp) .smp-textarea:hover{
  border-color:#CFE6F2;
}

/* the calculator reads as a receipt */
.smp-calc{ gap:0; margin-top:20px; padding-top:0; border-top:0; }
.smp-calc-row{ padding:11px 2px; border-bottom:1px dashed var(--smp-line2); }
.smp-calc-row:last-of-type{ border-bottom:0; }
.smp-calc-row b{ font-variant-numeric:tabular-nums; }

/* the total: the one element that should feel decisive */
.smp-total{
  position:relative; overflow:hidden; margin-top:12px; padding:18px 18px 19px;
  border-radius:14px; align-items:flex-end;
  background:linear-gradient(150deg, #2450AE 0%, var(--smp-blue) 55%, var(--smp-blue-dk) 100%);
  box-shadow:0 18px 40px -26px rgba(30,58,138,.95), inset 0 1px 0 rgba(255,255,255,.14);
}
.smp-total::after{
  content:""; position:absolute; inset:auto -20% -70% auto; width:220px; height:220px;
  border-radius:50%; background:radial-gradient(circle, rgba(6,182,212,.42), transparent 66%);
  pointer-events:none;
}
.smp-total span{ position:relative; z-index:1; letter-spacing:.08em; }
.smp-total b{ position:relative; z-index:1; font-size:27px; letter-spacing:-.024em; }

.smp-hint{
  display:flex; gap:9px; align-items:flex-start; margin-top:16px; padding:12px 14px;
  border-radius:11px; background:var(--smp-soft); border:1px solid var(--smp-line2);
  font-size:12.6px; line-height:1.6;
}
.smp-hint svg{ width:16px; height:16px; flex:none; margin-top:1px; color:var(--smp-cyan-dk); }

/* the submit reads as the panel's primary act */
.smp-panel-body .smp-btn-primary{
  width:100%; min-height:52px; font-size:14.5px; letter-spacing:.01em;
}
@media (max-width:760px){
  .smp-total{ padding:16px; align-items:flex-start; }
  .smp-total b{ font-size:23px; }
  .smp-rate-badge{ padding:14px; }
}

/* ======================================== AD-ACCOUNT ACCESS STEPS (deposit) ==
   Granting access is a Facebook-side task; numbered steps read better than prose. */
.smp-howto{
  margin:0 0 18px; padding:16px 17px; border-radius:13px;
  background:var(--smp-soft); border:1px solid var(--smp-line2);
}
.smp-howto h4{
  display:flex; align-items:center; gap:9px; margin:0 0 11px;
  font-size:13.6px; font-weight:800; letter-spacing:-.012em; color:#111827;
}
.smp-howto h4 svg{ width:17px; height:17px; flex:none; color:var(--smp-cyan-dk); }
.smp-howto ol{ margin:0; padding:0; list-style:none; counter-reset:howto; display:grid; gap:10px; }
.smp-howto li{
  position:relative; padding-left:33px; counter-increment:howto;
  font-size:13.2px; line-height:1.6; color:var(--smp-mute);
}
.smp-howto li::before{
  content:counter(howto); position:absolute; left:0; top:1px;
  width:21px; height:21px; border-radius:50%; display:grid; place-items:center;
  background:var(--smp-blue); color:#fff; font-size:11px; font-weight:800;
}
.smp-howto b{ color:var(--smp-ink); font-weight:750; }
@media (max-width:760px){ .smp-howto{ padding:14px; } .smp-howto li{ font-size:12.8px; } }

/* ==========================================================================
   STRENGTHENING PASS
   A tighter, more deliberate type/space rhythm across the two panels and the
   calculator, so the module reads as one system rather than stacked blocks.
   ========================================================================== */
.smp-panel-body{ padding:22px 20px 24px; }
.smp-panel-head{ padding:18px 20px; }
.smp-panel-head h3{ font-size:15.5px; letter-spacing:-.014em; }
.smp-panel-head p{ font-size:12.8px; margin-top:4px; }

.smp-fld{ gap:8px; }
.smp-fld > span{ letter-spacing:.075em; font-size:11.2px; }

.smp-form{ gap:16px; }
.smp-form .smp-btn{ margin-top:2px; }

.smp-price .smp-usd{ font-size:31px; }
.smp-stats span{ height:28px; font-size:12px; }
.smp-stats{ gap:7px; margin-bottom:16px; }

@media (max-width:760px){
  .smp-panel-body{ padding:18px 15px 20px; }
  .smp-panel-head{ padding:15px 15px; }
  .smp-panel-head h3{ font-size:14.8px; }
  .smp-price .smp-usd{ font-size:27px; }
  .smp-rate-badge{ padding:13px 14px; gap:9px; }
  .smp-form{ gap:14px; }
}

/* ==========================================================================
   FUNDING PANEL IDENTITY  ·  #deposit
   The owner asked for something more distinctive. The palette is fixed at
   three colours, so the character comes from gradients, glows and layered
   surfaces rather than new hues. Every text/background pair below clears 4.5:1
   (white on #1E3A8A is 10.4:1; on #0E6E85 5.6:1; the CTA gradient stays in the
   blue family so white never lands on cyan, which would be 2.4:1).
   ========================================================================== */
#deposit{ border-color:#CFE6F2; }
#deposit::before{
  height:5px;
  background:linear-gradient(90deg, var(--smp-cyan), var(--smp-blue) 46%, var(--smp-cyan-dk) 100%);
}
#deposit .smp-panel-head{
  background:linear-gradient(135deg, #1E3A8A 0%, #2450AE 54%, #0E6E85 100%);
  border-bottom:0;
}
#deposit .smp-panel-head h3{ color:#fff; font-size:16px; }
#deposit .smp-panel-head p{ color:#BFE7F2; margin-top:5px; }
#deposit .smp-panel-ic{
  background:rgba(255,255,255,.17); color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.30);
}

/* the rate, treated as the hero figure of the panel */
#deposit .smp-rate-badge{
  flex-wrap:wrap; gap:4px 11px; padding:18px 18px 17px; border-radius:15px;
  background:
    radial-gradient(430px 190px at 0% 0%, rgba(6,182,212,.30), transparent 64%),
    linear-gradient(140deg, #F2FBFE 0%, #FFFFFF 52%, #E6F8FC 100%);
  border:1px solid #BEEAF4;
  box-shadow:0 18px 38px -32px rgba(6,182,212,.95), inset 0 1px 0 #fff;
}
#deposit .smp-rate-badge > svg{ width:20px; height:20px; }
#deposit .smp-rate-badge b{ font-size:22px; letter-spacing:-.02em; }
#deposit .smp-rate-badge .smp-rate-val{ display:inline-block; }

/* a gradient CTA — blue family throughout, so white text stays legible */
#deposit .smp-btn-primary{
  background:linear-gradient(118deg, #1E3A8A 0%, #2B5CC4 58%, #17307A 100%);
  border-color:transparent; color:#fff;
  box-shadow:0 22px 44px -26px rgba(30,58,138,.98), 0 0 0 1px rgba(6,182,212,.28) inset;
}
#deposit .smp-btn-primary:hover{ background:linear-gradient(118deg, #24479B 0%, #3568D6 58%, #1B3A8C 100%); }

/* labels pick up the cyan ink, tying the panel to the rate */
#deposit .smp-fld > span{ color:var(--smp-cyan-dk); }
#deposit .smp-panel-body{ background:linear-gradient(180deg, #FCFEFF, #FFFFFF 30%); }
#deposit :where(.smp) .smp-input:focus,
#deposit :where(.smp) .smp-select:focus,
#deposit :where(.smp) .smp-textarea:focus{ box-shadow:0 0 0 3px rgba(6,182,212,.22); }

/* ==========================================================================
   /social-campaign/pay  ·  PAYMENT CARD SYSTEM
   The page uses these 14 classes but no stylesheet ever defined them — the
   payment page has been rendering unstyled. This block defines every one of
   them as a complete, professional card system.

   Palette — the site's three colours only:
     #1E3A8A deep blue   #374151 dark gray   #06B6D4 bright cyan
   Cyan never carries body text on white (2.43:1): it is a fill with dark ink
   (#062B33 on cyan = 6.05:1) or the darker #0E6E85 for small text on white
   (5.35:1). Element selectors are zero-specificity-safe.
   ========================================================================== */

/* ---------------------------------------------------------- page wrapper -- */
.smp-pay{ background:#F4F6F9; }
.smp-pay .smp-section{ padding:34px 0 56px; }

/* the two-column shell: main column + the funding-details aside */
.smp-pay-grid{ display:grid; gap:24px; grid-template-columns:1fr; align-items:start; }
.smp-pay-main{ display:grid; gap:22px; }
.smp-pay-side{ display:grid; gap:22px; }

/* --------------------------------------------------------- state banner --- */
.smp-state{
  display:flex; align-items:flex-start; gap:16px;
  background:#fff; border:1px solid #E5E7EB; border-left:6px solid #06B6D4;
  border-radius:16px; padding:20px 24px;
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 18px 40px -32px rgba(30,58,138,.32);
}
.smp-state.is-ok{ border-left-color:#1E3A8A; }
.smp-state.is-wait{ border-left-color:#0E6E85; }
.smp-state.is-open{ border-left-color:#06B6D4; }
.smp-state-ic{
  flex:none; width:48px; height:48px; border-radius:14px;
  background:#E6F8FC; color:#0E6E85; display:grid; place-items:center;
}
.smp-state.is-ok .smp-state-ic{ background:#E8EDF8; color:#1E3A8A; }
.smp-state.is-wait .smp-state-ic{ background:#E6F8FC; color:#0E6E85; }
.smp-state-ic .ic{ width:23px; height:23px; }
.smp-state b{ display:block; font-size:19px; font-weight:800; color:#374151; letter-spacing:-.02em; }
.smp-state p{ margin:7px 0 0; font-size:14.6px; line-height:1.65; color:#4B5563; }
.smp-state code{
  display:inline-block; background:#0E6E85; color:#062B33; padding:3px 10px;
  border-radius:8px; font-size:12.6px; font-weight:800; letter-spacing:.05em;
}

/* --------------------------------------------- key/value funding details -- */
.smp-kv{ display:grid; gap:0; margin:0; }
.smp-kv>div{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:11px 0; border-bottom:1px solid #EEF1F6;
}
.smp-kv>div:last-child{ border-bottom:0; }
.smp-kv dt{ font-size:12.6px; font-weight:700; color:#6B7280; text-transform:uppercase; letter-spacing:.07em; }
.smp-kv dd{ margin:0; font-size:14.6px; font-weight:700; color:#374151; text-align:right; word-break:break-word; }
.smp-kv dd a{ color:#0E6E85; text-decoration:none; font-weight:700; }
.smp-kv dd a:hover{ color:#1E3A8A; text-decoration:underline; }
.smp-kv dd code{ background:#E6F8FC; color:#0E6E85; padding:2px 9px; border-radius:7px;
  font-size:12.6px; font-weight:800; letter-spacing:.05em; }

/* ------------------------------------------------------- reference panel -- */
.smp-ref{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  margin:0 0 20px; padding:16px 18px;
  background:linear-gradient(135deg,#E6F8FC 0%,#EEF7FB 100%);
  border:1px solid #BFEAF4; border-radius:14px;
}
.smp-ref>span{
  font-size:11.6px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:#0E6E85; width:100%;
}
.smp-ref code{
  background:#0E6E85; color:#062B33; padding:8px 14px; border-radius:9px;
  font-size:14.5px; font-weight:800; letter-spacing:.06em;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; word-break:break-all;
}
.smp-ref .smp-pay-amt{
  font-size:14px; font-weight:800; color:#1E3A8A; margin-left:auto;
}

/* --------------------------------------------- method picker (radio rows) - */
.smp-methods{ display:grid; gap:12px; grid-template-columns:1fr; margin-top:4px; }
.smp-method{
  position:relative; display:flex; align-items:flex-start; gap:13px;
  padding:15px 16px; background:#fff; border:1.5px solid #E5E7EB; border-radius:13px;
  cursor:pointer; transition:border-color .15s, box-shadow .15s, background .15s;
}
.smp-method:hover{ border-color:#BFEAF4; background:#F8FDFE; }
.smp-method input{
  flex:none; width:20px; height:20px; margin:2px 0 0; accent-color:#06B6D4; cursor:pointer;
}
.smp-method>span{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.smp-method b{ font-size:15.4px; font-weight:800; color:#374151; }
.smp-method small{ font-size:13.3px; line-height:1.55; color:#4B5563; }
/* selected state — :has() where supported, with a sibling fallback */
.smp-method:has(input:checked){ border-color:#06B6D4; background:#F0FBFE;
  box-shadow:0 0 0 3px rgba(6,182,212,.14); }
.smp-method input:checked+span b{ color:#0E6E85; }

/* the small print under a payment option */
.smp-method-note{
  display:flex; align-items:flex-start; gap:10px; margin:12px 0 0;
  padding:13px 15px; background:#F4F6F9; border:1px solid #E5E7EB; border-radius:11px;
  font-size:13.4px; line-height:1.6; color:#4B5563;
}
.smp-method-note .ic{ flex:none; width:17px; height:17px; color:#0E6E85; margin-top:1px; }
.smp-method-note a{ color:#0E6E85; font-weight:700; }

/* --------------------------------------------------- section + lede -------- */
.smp-pay-sec{
  background:#fff; border:1px solid #E5E7EB; border-radius:18px;
  padding:26px 26px 24px;
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 20px 44px -34px rgba(16,24,40,.36);
}
.smp-pay-sec>h3{
  display:flex; align-items:center; gap:11px;
  font-size:19px; font-weight:800; color:#374151; letter-spacing:-.021em; margin:0 0 6px;
}
.smp-pay-sec>h3 .ic{ width:21px; height:21px; color:#0E6E85; flex:none; }
.smp-pay-lede{ margin:0 0 18px; font-size:15px; line-height:1.7; color:#4B5563; }

/* ------------------------------------------------------- responsive ------- */
@media (min-width:560px){
  .smp-methods{ grid-template-columns:1fr 1fr; }
}
@media (min-width:901px){
  .smp-pay-grid{ grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:28px; }
  .smp-pay-side{ position:sticky; top:18px; }
}
@media (max-width:560px){
  .smp-ref{ flex-direction:column; align-items:flex-start; }
  .smp-ref .smp-pay-amt{ margin-left:0; }
  .smp-kv>div{ flex-direction:column; gap:4px; }
  .smp-kv dd{ text-align:left; }
  .smp-state{ padding:18px; gap:13px; }
  .smp-state-ic{ width:42px; height:42px; }
}

/* ==========================================================================
   /social-campaign/pay  ·  PREMIUM DESIGN PASS
   Scoped entirely to .smp-pay so the /social-campaign listing page is
   untouched. Palette — the site's three colours only:
     Deep Blue #1E3A8A   Dark Gray #374151   Bright Cyan #06B6D4
   (plus white / near-white surfaces and near-black body text, which are page
   defaults, not branding). Cyan never carries body text on white (2.43:1):
   it is a fill with dark ink, or #0E6E85 for small text on white (5.35:1).
   Typography follows the site's system stack; all money uses tabular figures.
   ========================================================================== */

/* =============================================================== hero ===== */
.smp-pay .smp-hero{ padding:62px 0 68px; }
.smp-pay .smp-hero-in{ max-width:880px; }
.smp-pay .smp-hero .smp-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  height:35px; padding:0 16px; margin:0 0 20px;
  border-radius:999px; background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.24);
  color:#67E8F9; font-size:11.4px; font-weight:800;
  letter-spacing:.13em; text-transform:uppercase;
}
.smp-pay .smp-hero .smp-eyebrow::before{
  content:""; width:7px; height:7px; border-radius:50%; background:#06B6D4;
  box-shadow:0 0 0 4px rgba(6,182,212,.26); flex:none;
}
.smp-pay .smp-hero h1{
  color:#fff; font-size:clamp(30px,4.6vw,50px); line-height:1.05;
  letter-spacing:-.03em; font-weight:800; margin:0;
}
.smp-pay .smp-hero-lede{
  margin:20px 0 0; max-width:46em; font-size:17px; line-height:1.68; color:rgba(255,255,255,.92);
}
.smp-pay .smp-hero-lede b{
  color:#fff; font-weight:800; background:rgba(6,182,212,.20);
  border-radius:6px; padding:2px 6px; letter-spacing:.02em;
}

/* the hero facts, restyled as a payment summary strip */
.smp-pay .smp-hero-facts{
  display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  margin:30px 0 0; padding:0; list-style:none;
}
.smp-pay .smp-hero-facts li{
  display:flex; align-items:center; gap:11px;
  padding:13px 16px; border-radius:13px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.17);
  color:#fff; font-size:13.8px; font-weight:650; letter-spacing:-.005em;
}
.smp-pay .smp-hero-facts li .ic{ flex:none; width:17px; height:17px; color:#67E8F9; }
.smp-pay .smp-hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin:32px 0 0; }
.smp-pay .smp-hero-cta .smp-btn-ghost{
  border-color:rgba(255,255,255,.5); color:#fff; background:rgba(255,255,255,.06);
}
.smp-pay .smp-hero-cta .smp-btn-ghost:hover{ background:rgba(255,255,255,.16); border-color:#fff; }

/* ========================================================== page ground ===== */
.smp-pay{ background:#F4F6F9; }
.smp-pay .smp-section{ padding:38px 0 60px; }
.smp-pay-grid{ display:grid; gap:26px; grid-template-columns:1fr; align-items:start; }
.smp-pay-main{ display:grid; gap:24px; min-width:0; }
.smp-pay-side{ display:grid; gap:24px; min-width:0; }

/* ========================================================= state banner ==== */
.smp-pay .smp-state{
  position:relative; display:flex; align-items:flex-start; gap:16px;
  padding:22px 24px 22px 26px;
  background:#fff; border:1px solid #E4E8EF; border-radius:16px;
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 20px 44px -36px rgba(30,58,138,.34);
}
.smp-pay .smp-state::before{
  content:""; position:absolute; left:0; top:14px; bottom:14px; width:5px;
  border-radius:0 4px 4px 0; background:#06B6D4;
}
.smp-pay .smp-state.is-ok::before{ background:#1E3A8A; }
.smp-pay .smp-state.is-wait::before{ background:#0E6E85; }
.smp-pay .smp-state-ic{
  flex:none; width:50px; height:50px; border-radius:15px;
  background:#E6F8FC; color:#0E6E85; display:grid; place-items:center;
}
.smp-pay .smp-state.is-ok .smp-state-ic{ background:#E8EDF8; color:#1E3A8A; }
.smp-pay .smp-state-ic .ic{ width:24px; height:24px; }
.smp-pay .smp-state b{
  display:block; font-size:19.5px; font-weight:800; color:#374151; letter-spacing:-.022em;
}
.smp-pay .smp-state p{ margin:8px 0 0; font-size:14.6px; line-height:1.68; color:#4B5563; }
.smp-pay .smp-state code{
  display:inline-block; background:#0E6E85; color:#062B33;
  padding:3px 10px; border-radius:8px; font-size:12.6px; font-weight:800; letter-spacing:.05em;
  font-variant-numeric:tabular-nums;
}

/* ============================================================== panels ==== */
.smp-pay .smp-panel{
  position:relative; background:#fff; border:1px solid #E4E8EF; border-radius:18px; overflow:hidden;
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 24px 52px -42px rgba(16,24,40,.44);
  transition:box-shadow .2s ease, transform .2s ease;
}
.smp-pay .smp-panel:hover{
  box-shadow:0 2px 4px rgba(16,24,40,.05), 0 30px 60px -42px rgba(30,58,138,.46);
}
.smp-pay .smp-panel::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,#1E3A8A 0%,#06B6D4 55%,#1E3A8A 100%);
  opacity:.9;
}
.smp-pay .smp-panel-head{
  display:flex; align-items:center; gap:14px;
  padding:20px 24px; border-bottom:1px solid #EDF1F6;
  background:linear-gradient(180deg,#FBFDFE 0%,#F6F8FB 100%);
}
.smp-pay .smp-panel-head .smp-panel-ic{
  flex:none; width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(150deg,#E6F8FC 0%,#D6F1F9 100%);
  color:#0E6E85; border:1px solid #BEEAF4;
}
.smp-pay .smp-panel-head .smp-panel-ic .ic{ width:23px; height:23px; }
.smp-pay .smp-panel-head h3{ margin:0; font-size:18.5px; font-weight:800; color:#374151; letter-spacing:-.022em; }
.smp-pay .smp-panel-head p{ margin:4px 0 0; font-size:13.5px; color:#5B6472; }
.smp-pay .smp-panel-body{ padding:24px; }
.smp-pay .smp-panel-body > * + *{ margin-top:18px; }

/* ==================================================== pickers & fields ==== */
.smp-pay .smp-methods{ display:grid; gap:12px; grid-template-columns:1fr; }
.smp-pay .smp-method{
  position:relative; display:flex; align-items:flex-start; gap:13px;
  padding:16px 17px; background:#fff;
  border:1.5px solid #E4E8EF; border-radius:14px; cursor:pointer;
  transition:border-color .16s, box-shadow .16s, background .16s, transform .16s;
}
.smp-pay .smp-method:hover{ border-color:#BEEAF4; background:#F8FDFE; transform:translateY(-1px); }
.smp-pay .smp-method input{ flex:none; width:20px; height:20px; margin:2px 0 0; accent-color:#06B6D4; cursor:pointer; }
.smp-pay .smp-method > span{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.smp-pay .smp-method b{ font-size:15.6px; font-weight:800; color:#374151; }
.smp-pay .smp-method small{ font-size:13.3px; line-height:1.55; color:#5B6472; }
.smp-pay .smp-method:has(input:checked){
  border-color:#06B6D4; background:#F0FBFE;
  box-shadow:0 0 0 3px rgba(6,182,212,.15);
}
.smp-pay .smp-method input:checked + span b{ color:#0E6E85; }

.smp-pay .smp-form{ display:grid; gap:16px; }
.smp-pay .smp-fld{ display:flex; flex-direction:column; gap:8px; }
.smp-pay .smp-fld > span{ font-size:13.4px; font-weight:750; color:#374151; letter-spacing:-.005em; }
.smp-pay .smp-fld > span em{ font-style:normal; font-weight:700; font-size:11.6px; color:#0E6E85;
  letter-spacing:.06em; text-transform:uppercase; margin-left:6px; }
.smp-pay .smp-input, .smp-pay .smp-select, .smp-pay .smp-textarea{
  width:100%; min-height:50px; padding:12px 15px; font:inherit; font-size:15.4px;
  color:#374151; background:#fff; border:1.5px solid #D3DBE6; border-radius:12px;
  transition:border-color .16s, box-shadow .16s, background .16s;
}
.smp-pay .smp-input::placeholder{ color:#8A94A3; }
.smp-pay .smp-input:hover, .smp-pay .smp-textarea:hover{ border-color:#BEEAF4; }
.smp-pay .smp-input:focus, .smp-pay .smp-select:focus, .smp-pay .smp-textarea:focus{
  outline:none; background:#FCFEFF; border-color:#06B6D4; box-shadow:0 0 0 4px rgba(6,182,212,.15);
}
.smp-pay .smp-hint{
  display:flex; align-items:flex-start; gap:10px; margin:0;
  font-size:12.9px; line-height:1.6; color:#5B6472;
}
.smp-pay .smp-hint .ic{ flex:none; width:16px; height:16px; color:#0E6E85; margin-top:1px; }
.smp-pay .smp-hint a{ color:#0E6E85; font-weight:700; text-decoration:none; }
.smp-pay .smp-hint a:hover{ color:#1E3A8A; text-decoration:underline; }

/* ==================================================== reference + totals === */
.smp-pay .smp-ref{
  display:flex; flex-wrap:wrap; align-items:center; gap:13px;
  margin:0; padding:17px 19px;
  background:linear-gradient(135deg,#E6F8FC 0%,#F2FAFD 100%);
  border:1px solid #BEEAF4; border-radius:14px;
}
.smp-pay .smp-ref > span{
  flex:0 0 100%; font-size:11.4px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:#0E6E85;
}
.smp-pay .smp-ref code{
  background:#0E6E85; color:#062B33; padding:9px 15px; border-radius:10px;
  font-size:14.6px; font-weight:800; letter-spacing:.07em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; word-break:break-all;
}
.smp-pay .smp-ref .smp-pay-amt{ margin-left:auto; font-size:14.4px; font-weight:800; color:#1E3A8A; }
.smp-pay .smp-total{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  margin:0; padding:16px 18px; border-radius:13px;
  background:linear-gradient(150deg,#1E3A8A 0%,#16306F 100%);
}
.smp-pay .smp-total span{
  font-size:11.8px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#BFD3F5;
}
.smp-pay .smp-total b{
  font-size:27px; font-weight:800; letter-spacing:-.025em; color:#fff; font-variant-numeric:tabular-nums;
}

/* ===================================== the funding aside — a payment slip === */
.smp-pay .smp-pay-side .smp-panel{ position:relative; }
.smp-pay .smp-pay-side .smp-panel::before{
  background:linear-gradient(90deg,#06B6D4 0%,#1E3A8A 100%);
}
.smp-pay .smp-kv{ display:grid; gap:0; margin:0; }
.smp-pay .smp-kv > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:12px 0; border-bottom:1px dashed #DCE3EF;
}
.smp-pay .smp-kv > div:last-child{ border-bottom:0; }
.smp-pay .smp-kv dt{
  flex:none; font-size:12.2px; font-weight:750; letter-spacing:.09em;
  text-transform:uppercase; color:#6B7280;
}
.smp-pay .smp-kv dd{ margin:0; font-size:14.6px; font-weight:750; color:#374151; text-align:right; word-break:break-word; }
.smp-pay .smp-kv dd code{
  background:#E6F8FC; color:#0E6E85; padding:2px 9px; border-radius:7px;
  font-size:12.6px; font-weight:800; letter-spacing:.05em;
}
.smp-pay .smp-kv dd a{ color:#0E6E85; font-weight:750; text-decoration:none; }
.smp-pay .smp-kv dd a:hover{ color:#1E3A8A; text-decoration:underline; }

/* ============================================ how-to steps (Meta access) == */
.smp-pay .smp-pay-sec{
  padding:26px 26px 24px; background:#fff;
  border:1px solid #E4E8EF; border-radius:18px;
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 24px 52px -42px rgba(16,24,40,.44);
}
.smp-pay .smp-pay-sec > h3{
  display:flex; align-items:center; gap:12px; margin:0 0 10px;
  font-size:19px; font-weight:800; color:#374151; letter-spacing:-.022em;
}
.smp-pay .smp-pay-sec > h3 .ic{ flex:none; width:34px; height:34px; padding:8px; border-radius:11px;
  background:#E6F8FC; color:#0E6E85; }
.smp-pay .smp-pay-lede{ margin:0 0 20px; font-size:15.2px; line-height:1.7; color:#4B5563; }

.smp-pay .smp-howto{ margin:0; }
.smp-pay .smp-howto > ol{ list-style:none; counter-reset:smpstep; margin:0; padding:0; display:grid; gap:0; }
.smp-pay .smp-howto > ol > li{
  counter-increment:smpstep; position:relative;
  display:flex; align-items:flex-start; gap:16px;
  padding:16px 0 16px 0; border-bottom:1px dashed #DCE3EF;
  font-size:15px; line-height:1.6; color:#4B5563;
}
.smp-pay .smp-howto > ol > li:last-child{ border-bottom:0; padding-bottom:4px; }
.smp-pay .smp-howto > ol > li::before{
  content:counter(smpstep,decimal-leading-zero); flex:none;
  width:30px; height:30px; border-radius:10px; display:grid; place-items:center;
  background:#1E3A8A; color:#fff; font-size:12.2px; font-weight:800; letter-spacing:.04em;
}
.smp-pay .smp-howto b{ color:#374151; font-weight:800; }
.smp-pay .smp-howto code, .smp-pay .smp-howto li code{
  display:inline-block; background:#E6F8FC; color:#0E6E85;
  padding:2px 9px; border-radius:7px; font-size:13px; font-weight:800;
  word-break:break-all;
}

/* ==================================== steps band — a numbered timeline ===== */
.smp-pay .smp-steps{
  display:grid; gap:18px; grid-template-columns:1fr;
  margin:0; padding:0; list-style:none;
  background:linear-gradient(150deg,#1E3A8A 0%,#16306F 100%);
  border-radius:18px; padding:28px 26px;
  box-shadow:0 20px 46px -36px rgba(30,58,138,.5);
}
.smp-pay .smp-step{
  position:relative; padding:0 0 0 0; background:transparent; border:0; border-radius:0;
  display:grid; gap:11px; align-content:start;
}
.smp-pay .smp-step-n{
  font-size:12.4px; font-weight:800; letter-spacing:.18em; color:#93B4E8;
  font-variant-numeric:tabular-nums;
}
.smp-pay .smp-step-ic{
  flex:none; width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  background:#06B6D4; color:#062B33; box-shadow:0 8px 18px -10px rgba(6,182,212,.7);
}
.smp-pay .smp-step-ic .ic{ width:22px; height:22px; }
.smp-pay .smp-step h3{ margin:0; font-size:17.5px; font-weight:800; color:#fff; letter-spacing:-.02em; }
.smp-pay .smp-step p{ margin:7px 0 0; font-size:14.2px; line-height:1.62; color:rgba(255,255,255,.86); }

/* ================================================== buttons (page-wide) === */
.smp-pay .smp-btn{
  min-height:50px; padding:0 24px; border-radius:12px; font-size:15.4px; font-weight:750;
  letter-spacing:-.005em; transition:background .16s, border-color .16s, color .16s, transform .16s, box-shadow .16s;
}
.smp-pay .smp-btn:active{ transform:translateY(1px); }
.smp-pay .smp-btn-primary{
  background:linear-gradient(150deg,#2450AE 0%,#1E3A8A 100%); color:#fff;
  box-shadow:0 12px 26px -18px rgba(30,58,138,.7);
}
.smp-pay .smp-btn-primary:hover{
  background:linear-gradient(150deg,#1E3A8A 0%,#16306F 100%);
  box-shadow:0 16px 30px -18px rgba(30,58,138,.8);
}
.smp-pay .smp-btn-cyan{ background:#06B6D4; color:#062B33; }
.smp-pay .smp-btn-cyan:hover{ background:#0E6E85; color:#fff; }
.smp-pay .smp-btn.block{ width:100%; }

/* ================================================ motion + focus rings ==== */
.smp-pay .smp-btn, .smp-pay .smp-method, .smp-pay .smp-input{ will-change:auto; }
.smp-pay a:focus-visible, .smp-pay button:focus-visible,
.smp-pay input:focus-visible, .smp-pay select:focus-visible, .smp-pay textarea:focus-visible{
  outline:3px solid #06B6D4; outline-offset:2px; border-radius:9px;
}

/* ============================================================ desktop ===== */
@media (min-width:901px){
  .smp-pay .smp-hero{ padding:72px 0 80px; }
  .smp-pay-grid{ grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:28px; }
  .smp-pay-side{ position:sticky; top:20px; }
  .smp-pay .smp-methods{ grid-template-columns:1fr 1fr; }
  .smp-pay .smp-steps{ grid-template-columns:repeat(3,1fr); gap:24px; padding:32px 30px; }
  .smp-pay .smp-panel-body{ padding:26px; }
}
@media (min-width:561px) and (max-width:900px){
  .smp-pay .smp-methods{ grid-template-columns:1fr 1fr; }
  .smp-pay .smp-steps{ grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
}

/* ============================================================= mobile ===== */
@media (max-width:560px){
  .smp-pay .smp-hero{ padding:46px 0 52px; }
  .smp-pay .smp-hero-lede{ font-size:15.6px; }
  .smp-pay .smp-hero-facts{ grid-template-columns:1fr; }
  .smp-pay .smp-hero-cta{ flex-direction:column; }
  .smp-pay .smp-hero-cta .smp-btn{ width:100%; }
  .smp-pay .smp-section{ padding:26px 0 44px; }
  .smp-pay .smp-panel-head{ padding:17px 18px; gap:12px; }
  .smp-pay .smp-panel-head .smp-panel-ic{ width:42px; height:42px; }
  .smp-pay .smp-panel-body{ padding:18px; }
  .smp-pay .smp-state{ padding:18px; gap:13px; }
  .smp-pay .smp-state-ic{ width:44px; height:44px; }
  .smp-pay .smp-state b{ font-size:17.5px; }
  .smp-pay .smp-ref{ flex-direction:column; align-items:flex-start; }
  .smp-pay .smp-ref > span{ flex:0 0 auto; }
  .smp-pay .smp-ref .smp-pay-amt{ margin-left:0; }
  .smp-pay .smp-kv > div{ flex-direction:column; gap:4px; align-items:flex-start; }
  .smp-pay .smp-kv dd{ text-align:left; }
  .smp-pay .smp-total{ flex-direction:column; align-items:flex-start; gap:6px; }
  .smp-pay .smp-total b{ font-size:24px; }
  .smp-pay .smp-pay-sec{ padding:20px 18px; }
  .smp-pay .smp-steps{ padding:22px 18px; }
  .smp-pay .smp-btn{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
  .smp-pay *, .smp-pay *::before, .smp-pay *::after{
    transition:none !important; animation:none !important;
  }
}

/* ==========================================================================
   /social-campaign/pay  ·  LAYOUT FIXES for the premium pass
   Three real defects, each from a rule fighting an existing one:
     1. the numbered badge kept `position:absolute` from the base sheet while
        the new `li` dropped its `padding-left`, so the badge sat ON the text;
     2. `display:flex` on the step `li` turned each text node and every <b>
        into a separate flex item, so the base `gap` opened wide word gaps;
     3. three method cards in a two-column grid orphaned the third cell.
   ========================================================================== */

/* ---- 3. odd method card fills the row instead of orphaning a cell ---- */
.smp-pay .smp-methods > .smp-method:last-child:nth-child(odd){ grid-column:1 / -1; }

/* ---- 1+2. the Meta access steps: block layout, badge reserves its space --- */
.smp-pay .smp-howto{ margin:0; padding:0; background:transparent; border:0; border-radius:0; }
.smp-pay .smp-howto > ol{
  list-style:none; counter-reset:smpstep; margin:0; padding:0; display:grid; gap:0;
}
.smp-pay .smp-howto > ol > li{
  display:block;              /* NOT flex — keeps inline <b> and text in one flow */
  position:relative;
  counter-increment:smpstep;
  padding:16px 0 16px 46px;   /* left space reserved for the badge */
  border-bottom:1px dashed #DCE3EF;
  font-size:15px; line-height:1.62; color:#4B5563;
}
.smp-pay .smp-howto > ol > li:last-child{ border-bottom:0; padding-bottom:4px; }
.smp-pay .smp-howto > ol > li::before{
  content:counter(smpstep,decimal-leading-zero);
  position:absolute; left:0; top:15px;        /* aligned to the first line */
  width:32px; height:32px; border-radius:10px;
  display:grid; place-items:center;
  background:#1E3A8A; color:#fff;
  font-size:12.2px; font-weight:800; letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}
.smp-pay .smp-howto b{ color:#374151; font-weight:800; }
.smp-pay .smp-howto code{
  display:inline-block; background:#E6F8FC; color:#0E6E85;
  padding:2px 9px; border-radius:7px; font-size:13px; font-weight:800;
  word-break:break-all;
}
@media (max-width:560px){
  .smp-pay .smp-howto > ol > li{ padding:14px 0 14px 42px; font-size:14.2px; }
  .smp-pay .smp-howto > ol > li::before{ width:29px; height:29px; top:13px; font-size:11.4px; }
}

/* ---- the hero summary strip: one segmented bar, never ragged pills ------- */
.smp-pay .smp-hero-facts{
  display:grid; grid-template-columns:1fr; gap:0;
  margin:30px 0 0; padding:0; list-style:none;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.17);
  border-radius:14px; overflow:hidden;
  max-width:760px;
}
.smp-pay .smp-hero-facts li{
  display:flex; align-items:center; gap:11px;
  padding:14px 18px;
  background:transparent; border:0; border-radius:0;
  border-bottom:1px solid rgba(255,255,255,.13);
  color:#fff; font-size:13.4px; font-weight:650; letter-spacing:-.005em;
  line-height:1.45;
}
.smp-pay .smp-hero-facts li:last-child{ border-bottom:0; }
.smp-pay .smp-hero-facts li .ic{ flex:none; width:17px; height:17px; color:#67E8F9; }
.smp-pay .smp-hero-facts li b{ font-weight:800; }
@media (min-width:700px){
  .smp-pay .smp-hero-facts{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .smp-pay .smp-hero-facts li{
    border-bottom:0; border-right:1px solid rgba(255,255,255,.13);
    padding:15px 18px;
  }
  .smp-pay .smp-hero-facts li:last-child{ border-right:0; }
}

/* ==========================================================================
   /social-campaign/pay  ·  FIT FIXES
   The summary strip's middle cell wrapped to two lines because three equal
   cells leave ~196px for "Reference SMPD-88A5F34BE3" (~228px). Give the
   reference cell more room, drop the strip to stacked rows below 900px so it
   can never wrap, and keep the reference token whole in the hero lede.
   ========================================================================== */

.smp-pay .smp-hero-lede b{ white-space:nowrap; }

/* the reference must never break across lines */
.smp-pay .smp-hero-facts li{ min-width:0; }
.smp-pay .smp-hero-facts li b,
.smp-pay .smp-hero-facts li code{ white-space:nowrap; }

/* stacked by default (short viewports have no room for three cells) */
.smp-pay .smp-hero-facts{ grid-template-columns:1fr; }

@media (min-width:900px){
  /* three cells, the reference cell wider so its value stays on one line */
  .smp-pay .smp-hero-facts{
    grid-template-columns:minmax(0,1fr) minmax(0,1.42fr) minmax(0,1fr);
  }
  .smp-pay .smp-hero-facts li{ font-size:13.2px; padding:15px 16px; gap:10px; }
}

/* the highlighted reference left a visible gap before the sentence's period:
   the chip's right padding pushes punctuation away. Tighten it so the stop
   reads as part of the sentence. */
.smp-pay .smp-hero-lede b{ padding:2px 4px; margin:0 -3px 0 0; }