/* =========================================================
   MarginAffiliates - shared starfield
   Reusable night-sky effect for dark surfaces (interior page
   heroes + footer). Mirrors the home hero starfield exactly.
   Drop a <div class="starfield" aria-hidden="true"> with the
   three .sf layers + .sf-milkyway into any positioned dark
   parent. The .starfield fills its parent and clips.
   ========================================================= */

.starfield{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.starfield .sf{position:absolute;inset:-60px;background-repeat:repeat;will-change:opacity,background-position;}

/* distant dust of stars */
.starfield .sf--far{
  background-image:
    radial-gradient(1.4px 1.4px at 18% 22%,rgba(255,255,255,.92),transparent),
    radial-gradient(1.4px 1.4px at 62% 14%,rgba(255,255,255,.85),transparent),
    radial-gradient(1.3px 1.3px at 84% 36%,rgba(214,228,255,.9),transparent),
    radial-gradient(1.3px 1.3px at 35% 48%,rgba(255,255,255,.8),transparent),
    radial-gradient(1.4px 1.4px at 9% 64%,rgba(255,255,255,.85),transparent),
    radial-gradient(1.3px 1.3px at 71% 58%,rgba(255,255,255,.8),transparent),
    radial-gradient(1.4px 1.4px at 48% 30%,rgba(255,255,255,.9),transparent),
    radial-gradient(1.3px 1.3px at 92% 72%,rgba(214,228,255,.8),transparent),
    radial-gradient(1.3px 1.3px at 26% 82%,rgba(255,255,255,.75),transparent),
    radial-gradient(1.3px 1.3px at 56% 88%,rgba(255,255,255,.78),transparent),
    radial-gradient(1.3px 1.3px at 5% 38%,rgba(255,255,255,.7),transparent),
    radial-gradient(1.3px 1.3px at 44% 70%,rgba(214,228,255,.75),transparent),
    radial-gradient(1.4px 1.4px at 78% 88%,rgba(255,255,255,.8),transparent),
    radial-gradient(1.3px 1.3px at 30% 6%,rgba(255,255,255,.72),transparent);
  background-size:250px 250px;opacity:.9;
  animation:sf-twk-far 6.5s ease-in-out infinite,sf-drift-far 90s linear infinite;}

/* mid-bright scattered stars */
.starfield .sf--mid{
  background-image:
    radial-gradient(2.2px 2.2px at 22% 28%,#ffffff,transparent),
    radial-gradient(2px 2px at 67% 18%,rgba(224,236,255,1),transparent),
    radial-gradient(2.3px 2.3px at 88% 42%,#ffffff,transparent),
    radial-gradient(2px 2px at 41% 40%,rgba(255,248,237,1),transparent),
    radial-gradient(2.2px 2.2px at 12% 54%,#ffffff,transparent),
    radial-gradient(2px 2px at 78% 64%,rgba(214,228,255,1),transparent),
    radial-gradient(2.3px 2.3px at 53% 74%,#ffffff,transparent),
    radial-gradient(2px 2px at 33% 90%,rgba(255,255,255,.95),transparent),
    radial-gradient(2.1px 2.1px at 8% 12%,#ffffff,transparent),
    radial-gradient(2px 2px at 95% 18%,rgba(224,236,255,1),transparent);
  background-size:340px 340px;opacity:1;
  animation:sf-twk-mid 4.8s ease-in-out infinite,sf-drift-mid 70s linear infinite;animation-delay:-1.4s,0s;}

/* bright foreground stars with glow */
.starfield .sf--near{
  background-image:
    radial-gradient(2.6px 2.6px at 30% 30%,#ffffff,transparent 62%),
    radial-gradient(2.4px 2.4px at 74% 22%,#fff7ea,transparent 62%),
    radial-gradient(2.7px 2.7px at 58% 52%,#eaf2ff,transparent 62%),
    radial-gradient(2.4px 2.4px at 16% 70%,#ffffff,transparent 62%),
    radial-gradient(2.6px 2.6px at 88% 80%,#eaf2ff,transparent 62%);
  background-size:460px 460px;opacity:1;
  animation:sf-twk-near 3.6s ease-in-out infinite,sf-drift-near 120s linear infinite;animation-delay:-.8s,0s;}

/* soft milky-way band drifting across the upper sky */
.starfield .sf-milkyway{position:absolute;inset:-20% -10% auto -10%;height:90%;
  background:
    radial-gradient(60% 38% at 30% 30%,rgba(150,180,255,.14),transparent 70%),
    radial-gradient(46% 30% at 72% 22%,rgba(120,150,235,.11),transparent 72%);
  transform:rotate(-12deg);filter:blur(8px);pointer-events:none;}

@keyframes sf-twk-far{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes sf-twk-mid{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes sf-twk-near{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes sf-drift-far{from{background-position:0 0}to{background-position:250px 0}}
@keyframes sf-drift-mid{from{background-position:0 0}to{background-position:340px 0}}
@keyframes sf-drift-near{from{background-position:0 0}to{background-position:460px 0}}
@media (prefers-reduced-motion:reduce){.starfield .sf{animation:none!important;}}

/* ---- interior page hero: place stars on the navy frame, behind the blue panel ---- */
.page-hero{position:relative;}
.page-hero>.starfield{z-index:0;}
.page-hero__inner{position:relative;z-index:1;}

/* ---- footer: stars on the dark navy, content above ---- */
.site-footer{position:relative;overflow:hidden;}
.site-footer>.starfield{z-index:0;opacity:.85;}
.site-footer__top,.site-footer__bottom{position:relative;z-index:1;}

/* ---- phones: trim the generous interior-hero padding so small screens use more width
        (mirrors the home hero, which already tightens on mobile). Loaded last, so this
        wins over each page's own .page-hero / .page-hero__inner padding by source order. ---- */
@media (max-width:600px){
  .page-hero{padding-left:14px;padding-right:14px;}
  .page-hero__inner{padding:32px 20px;}
  body[data-page="deals"] .page-hero__inner{padding:32px 20px;}
}


/* ===================================================================
   Glass border treatment for cards (site-wide) — identical to the
   homepage hero (.hdcard) glass frame. Loaded on every page.
   =================================================================== */
.card,
.fcard,
.sa-card,
.sa-herocard,
.sa-chatcard,
.bdh-card,
.bd-wantcard,
.bd-brokercard,
.fa-morecard,
.mk-herocard,
.spend-card,
.cont-card,
.pp-card,
.form-card,
.team-card,
.quote-card,
.setupcard,
.earncard,
.fwg__card,
.bento__card,
.pcard{
  position:relative;
  overflow:visible !important;
}
.card::before,
.fcard::before,
.sa-card::before,
.sa-herocard::before,
.sa-chatcard::before,
.bdh-card::before,
.bd-wantcard::before,
.bd-brokercard::before,
.fa-morecard::before,
.mk-herocard::before,
.spend-card::before,
.cont-card::before,
.pp-card::before,
.form-card::before,
.team-card::before,
.quote-card::before,
.setupcard::before,
.earncard::before,
.fwg__card::before,
.bento__card::before,
.pcard::before{
  content:"";position:absolute;inset:-15px;border-radius:34px;
  background:linear-gradient(160deg,rgba(255,255,255,.3),rgba(255,255,255,.08));
  border:0.75px solid rgba(255,255,255,.75);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.9),inset 0 0 0 6px rgba(255,255,255,.08),0 0 34px rgba(255,255,255,.45),0 0 0 1px rgba(15,23,42,.05),0 20px 44px -22px rgba(20,40,100,.16);
  z-index:-1;pointer-events:none;
}


/* ===== illustrative dashboard mockups (replace confidential screenshots) ===== */
.mockdash{display:flex;flex-direction:column;height:300px;background:#fff;color:#0b1020;overflow:hidden;}
.mockdash__row{display:flex;border-bottom:1px solid #eef1f6;}
.mockdash__stat{flex:1;padding:13px 16px;border-right:1px solid #eef1f6;}
.mockdash__stat:last-child{border-right:none;}
.mockdash__stat.is-active{background:#eff5ff;box-shadow:inset 0 -2px 0 #0062ff;}
.mockdash__k{display:block;font-size:12px;color:#7c8aa0;letter-spacing:.01em;}
.mockdash__v{display:block;font-size:clamp(19px,2.2vw,25px);font-weight:800;color:#0b1020;letter-spacing:-.02em;margin-top:5px;font-variant-numeric:tabular-nums;}
.mockdash__chart{flex:1;min-height:90px;display:flex;align-items:flex-end;gap:2px;padding:16px;}
.mockdash__chart i{flex:1;background:linear-gradient(180deg,#6fa0ff,#0062ff);border-radius:2px 2px 0 0;min-height:2px;}
.mocktg{display:flex;flex-direction:column;height:300px;background:#0e1117;color:#fff;padding:16px 18px;overflow:hidden;}
.mocktg__head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.mocktg__big{font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:-.02em;color:#3ee089;font-variant-numeric:tabular-nums;line-height:1;}
.mocktg__lbl{font-size:11px;letter-spacing:.04em;color:#8b97ad;margin-top:5px;}
.mocktg__legend{font-size:10.5px;color:#8b97ad;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.mocktg__legend i{width:9px;height:9px;border-radius:2px;background:#3ee089;display:inline-block;}
.mocktg__chart{flex:1;min-height:90px;display:flex;align-items:flex-end;gap:3px;margin-top:14px;}
.mocktg__chart i{flex:1;background:linear-gradient(180deg,#4ff09a,#16b56a);border-radius:3px 3px 0 0;min-height:3px;}
.mocktg__foot{display:flex;justify-content:space-between;margin-top:10px;font-size:10.5px;color:#8b97ad;font-variant-numeric:tabular-nums;}
/* index bento context heights */
.b-showpiece .shot .mockdash,.b-showpiece .shot .mocktg{height:clamp(170px,15vw,228px);}
.b-shot .shot .mockdash,.b-shot .shot .mocktg{height:clamp(132px,12vw,158px);}
.b-shot .shot .mocktg{padding:11px 13px;}
.b-shot .shot .mocktg__foot{display:none;}
.b-shot .shot .mocktg__big{font-size:24px;}
.b-shot .shot .mockdash__chart,.b-showpiece .shot .mockdash__chart{padding:11px 13px;min-height:50px;}
.b-shot .shot .mockdash__stat{padding:9px 12px;}
.b-shot .shot .mockdash__v{font-size:18px;}

/* ===== site-wide hover easing: every interactive element eases its state changes (never snaps) ===== */
a, button, summary,
.bento__card, .card, .card--hover, .fcard, .sa-card, .sa-herocard, .pcard, .pp-card, .cont-card, .setupcard, .earncard, .quote-card, .form-card,
.bd-supcard, .bd-wantcard, .bd-wantpill, .bd-wantarrow, .bd-brokercard, .bd-brokercol, .bd-accitem,
.fa-morecard, .mk-herocard, .broker-tile, .brokerwall__logo, .team-card,
.fwg__card, .b-cta, .feature, .edge-icard, .eacc, .step, .pill, .proofshot .shot,
.nav__login, .nav__cta, .nav__drop-link, .lang, .footer-social a, .footer-col__links a, .fa-logo, .bd-brokercard__logo {
  transition: transform .32s cubic-bezier(.22,.61,.36,1),
              box-shadow .32s cubic-bezier(.22,.61,.36,1),
              background-color .32s cubic-bezier(.22,.61,.36,1),
              border-color .32s cubic-bezier(.22,.61,.36,1),
              color .32s cubic-bezier(.22,.61,.36,1),
              opacity .5s cubic-bezier(.22,.61,.36,1) !important;
}
@media (prefers-reduced-motion:reduce){
  a, button, summary, .bento__card, .card, .fcard, .sa-card, .bd-supcard, .bd-wantcard, .bd-wantpill, .bd-wantarrow, .broker-tile, .team-card, .fwg__card, .b-cta, .feature, .edge-icard, .eacc, .step, .pill, .nav__login, .nav__cta { transition: none !important; }
}