@import url("/pagesrc/_partners.css");
@import url("/assets/shane-widget.css");

/* =====================================================================
   /partners2 — EDITORIAL REDESIGN v3
   Paper-white split hero with a framed film card, numbered chapters with a
   sticky index, navy statement band, bento benefits, elevated tiers.
   ===================================================================== */

/* ---- hero: split editorial ---- */
.p2hero{position:relative;background:#fff;padding:clamp(40px,7vh,90px) 0 0}
.p3grid{max-width:1180px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,70px);align-items:center}
.p2eye{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#0071E3;background:rgba(0,113,227,.08);border:1px solid rgba(0,113,227,.18);border-radius:999px;padding:7px 14px;margin:0 0 22px}
.p2h1{font-size:clamp(46px,6.4vw,92px);font-weight:650;letter-spacing:-.035em;line-height:.98;margin:0;color:#0a0f1e;text-wrap:balance}
.p2sub{margin:24px 0 0;font-size:clamp(16px,1.5vw,19.5px);line-height:1.55;color:#4b4f58;max-width:56ch}
.p2cta{display:flex;align-items:center;gap:24px;margin-top:32px;flex-wrap:wrap}
.p2cta .btn{font-size:16px;padding:15px 30px;border-radius:14px}
.p2ghost{color:#0a0f1e;font-weight:600;font-size:15.5px;text-decoration:none;border-bottom:2px solid #C6E600;padding-bottom:2px}
.p2ghost:hover{border-color:#0071E3;text-decoration:none}
.p3media{position:relative;margin:0;border-radius:28px;overflow:hidden;box-shadow:0 40px 90px -40px rgba(10,15,30,.5);aspect-ratio:4/5;background:#0a0f1e url("https://epgttdsqvuztdsnrdimm.supabase.co/storage/v1/object/public/sitemedia/mb2bposter1784848323.jpg") center/cover no-repeat}
.p2vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.p3cap{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;background:rgba(8,11,18,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-size:11.5px;font-weight:600;border-radius:999px;padding:6px 12px}
.p3cap em{font-style:normal;color:#C6E600}

/* stats: hairline editorial row under the hero */
.p2stats{max-width:1180px;margin:clamp(40px,6vh,64px) auto 0;padding:26px 24px 30px;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid #E8E8ED}
.p2stat{padding:0 22px;border-left:1px solid #E8E8ED}
.p2stat:first-child{border-left:0;padding-left:0}
.p2stat b{display:block;font-size:clamp(26px,3vw,40px);font-weight:650;letter-spacing:-.02em;color:#0a0f1e}
.p2stat span{display:block;margin-top:5px;font-size:12.5px;color:#7d818c;line-height:1.35}
.p2src{grid-column:1/-1;margin:14px 0 0;font-size:10.5px;color:#a3a7b0;font-style:italic}

/* ---- ribbon: acid divider ---- */
.p2ribbon{background:#0a0f1e;padding:13px 0}
.p2rib-win{max-width:1180px;margin:0 auto;padding:0 24px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 70px,#000 calc(100% - 70px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 70px,#000 calc(100% - 70px),transparent 100%)}
.p2rib-track{display:inline-flex;align-items:center;gap:24px;white-space:nowrap;will-change:transform;animation:p2rib 36s linear infinite;padding-left:24px}
.p2rib-track span{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.p2rib-track i{font-style:normal;font-size:7px;color:#C6E600}
@keyframes p2rib{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.p2rib-track{animation:none}}

/* ---- chapters: numbered, ruled ---- */
body:has(.p2hero){counter-reset:p2ch}
body:has(.p2hero) .sec{counter-increment:p2ch;position:relative;max-width:1180px;margin:clamp(84px,12vh,130px) auto 0;padding:26px 24px 0;font-size:clamp(32px,4.2vw,50px);font-weight:650;letter-spacing:-.03em;line-height:1.03;color:#0a0f1e;border-top:1px solid #E8E8ED}
body:has(.p2hero) .sec-sub{max-width:1180px;margin:14px auto 0;padding:0 24px;font-size:clamp(15.5px,1.5vw,18px);line-height:1.55;color:#4b4f58}

/* 01 — why now: navy statement band */
body:has(.p2hero) .waveband{max-width:none;margin:0;padding:0}
body:has(.p2hero) .waveband .wb{background:#0a0f1e;border-radius:0;color:#fff;padding:clamp(70px,11vh,120px) 24px}
body:has(.p2hero) .waveband .wb>*{max-width:1000px;margin-left:auto;margin-right:auto}
body:has(.p2hero) .waveband .k{color:#C6E600;text-transform:uppercase;letter-spacing:.15em;font-size:12px;font-weight:700}
body:has(.p2hero) .waveband h2{font-size:clamp(30px,4.4vw,52px);letter-spacing:-.03em;line-height:1.05;margin-top:16px;color:#fff}
body:has(.p2hero) .waveband .lead{color:rgba(255,255,255,.72);font-size:clamp(15.5px,1.5vw,18px);margin-top:20px;line-height:1.6}

/* 02 — category cards */
body:has(.p2hero) .pcards{max-width:1180px;margin:34px auto 0;padding:0 24px;gap:18px}
body:has(.p2hero) .pcard{background:#F7F7F9;border:1px solid transparent;border-radius:20px;padding:30px 26px;transition:background .25s,border-color .25s,transform .35s cubic-bezier(.22,.8,.3,1)}
body:has(.p2hero) .pcard:hover{background:#fff;border-color:#0071E3;transform:translateY(-5px)}
body:has(.p2hero) .pcard .pic{width:40px;height:40px;color:#0071E3}

/* 03 — rails/reach/referrals flow: connected steps */
body:has(.p2hero) .flow{max-width:1180px;margin:34px auto 0;padding:0 24px}

/* ROI band: contained navy panel with glass card */
body:has(.p2hero) .ptools{max-width:1180px;margin:clamp(84px,12vh,130px) auto 0;padding:0 24px}
body:has(.p2hero) .ptools-in{border-radius:32px;overflow:hidden;background:radial-gradient(120% 100% at 12% 0%,rgba(0,113,227,.3),transparent 55%),#0a0f1e;color:#fff;padding:clamp(50px,7vw,80px);display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,60px);align-items:center}
body:has(.p2hero) .ptools .reyebrow{color:#C6E600;text-transform:uppercase;letter-spacing:.15em;font-size:12px;font-weight:700}
body:has(.p2hero) .ptools h2{color:#fff;font-size:clamp(28px,3.6vw,42px);letter-spacing:-.025em}
body:has(.p2hero) .ptools-txt>p{color:rgba(255,255,255,.72)}
body:has(.p2hero) .ptools-src{color:rgba(255,255,255,.38)}
body:has(.p2hero) .ptv-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:22px;backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);color:#fff;box-shadow:0 40px 90px -40px rgba(0,0,0,.7)}
body:has(.p2hero) .ptv-card .ptv-l,body:has(.p2hero) .ptv-card .ptv-row span{color:rgba(255,255,255,.6)}
body:has(.p2hero) .ptv-foot{color:rgba(255,255,255,.4)}

/* 04 — benefits: bento */
body:has(.p2hero) .bens{max-width:1180px;margin:34px auto 0;padding:0 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
body:has(.p2hero) .ben{display:block;background:#F7F7F9;border-radius:20px;padding:26px 24px;transition:background .25s}
body:has(.p2hero) .ben:first-child{grid-column:span 2;background:#0a0f1e;color:#fff}
body:has(.p2hero) .ben:first-child h4{color:#fff;font-size:22px}
body:has(.p2hero) .ben:first-child p{color:rgba(255,255,255,.72)}
body:has(.p2hero) .ben:first-child .bic{color:#C6E600}
body:has(.p2hero) .ben .bic{display:block;width:30px;height:30px;margin-bottom:12px}
body:has(.p2hero) .ben .bic svg{width:100%;height:100%;display:block}
body:has(.p2hero) .ben:first-child .bic{width:36px;height:36px}
body:has(.p2hero) .ben:hover{background:#F0F1F4}
body:has(.p2hero) .ben:first-child:hover{background:#0a0f1e}

/* 05 — tiers */
body:has(.p2hero) .tiers{max-width:1180px;margin:34px auto 0;padding:0 24px;gap:18px}
body:has(.p2hero) .tier{border:1px solid #E8E8ED;border-radius:24px;padding:32px 28px;background:#fff;transition:transform .35s cubic-bezier(.22,.8,.3,1),box-shadow .35s}
body:has(.p2hero) .tier:hover{transform:translateY(-6px);box-shadow:0 26px 60px -30px rgba(10,15,30,.3)}
body:has(.p2hero) .tier.feat{background:#0a0f1e;color:#fff;border-color:#0a0f1e;box-shadow:0 30px 80px -34px rgba(10,15,30,.6)}
body:has(.p2hero) .tier.feat h3{color:#fff}
body:has(.p2hero) .tier.feat p,body:has(.p2hero) .tier.feat li{color:rgba(255,255,255,.75)}
body:has(.p2hero) .tier .tk{color:#0071E3;text-transform:uppercase;letter-spacing:.15em;font-size:11.5px;font-weight:700}
body:has(.p2hero) .tier.feat .tk{color:#C6E600}
body:has(.p2hero) .tier h3{font-size:26px;letter-spacing:-.02em}

/* closer: navy, acid underline */
body:has(.p2hero) .ctaband{max-width:1180px;margin:clamp(84px,12vh,130px) auto 0;padding:0 24px}
body:has(.p2hero) .ctaband .in2{position:relative;border-radius:32px;overflow:hidden;background:radial-gradient(120% 100% at 88% 0%,rgba(0,113,227,.3),transparent 55%),#0a0f1e;color:#fff;padding:clamp(50px,7vw,80px);text-align:left}
body:has(.p2hero) .ctaband h2{font-size:clamp(36px,5.4vw,64px);letter-spacing:-.03em;color:#fff;display:block}
body:has(.p2hero) .ctaband h2::after{content:"";display:block;width:84px;height:5px;background:#C6E600;border-radius:3px;margin-top:20px}
body:has(.p2hero) .ctaband p{color:rgba(255,255,255,.75);margin:20px auto 0}
body:has(.p2hero) .ctaband .btn{margin-top:28px;font-size:16px;padding:15px 30px}

/* ---- reveals ---- */
.p2rv{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.22,.8,.3,1),transform .7s cubic-bezier(.22,.8,.3,1)}
.p2rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.p2rv{opacity:1;transform:none;transition:none}}

/* ---- tablet & mobile ---- */
@media (max-width:960px){
  .p3grid{grid-template-columns:1fr;gap:34px}
  .p3media{aspect-ratio:16/10;max-height:420px}
  body:has(.p2hero) .pcards{grid-template-columns:1fr 1fr;gap:12px}
  body:has(.p2hero) .bens{grid-template-columns:1fr 1fr}
  body:has(.p2hero) .ben:first-child{grid-column:span 2}
  body:has(.p2hero) .tiers{grid-template-columns:1fr}
  body:has(.p2hero) .ptools-in{grid-template-columns:1fr;padding:clamp(36px,6vw,60px)}
}
@media (max-width:700px){
  .p2hero{padding-top:34px}
  .p2h1{font-size:clamp(40px,12vw,52px)}
  .p2cta{flex-direction:column;align-items:stretch;gap:14px}
  .p2cta .btn{width:100%;display:flex;justify-content:center}
  .p2ghost{text-align:center;padding:10px 0}
  .p3media{aspect-ratio:16/11;border-radius:20px}
  .p2stats{display:block;padding:18px 24px 24px}
  .p2stat{display:flex;align-items:baseline;gap:10px;border-left:0;padding:10px 0;border-top:1px solid #ECECF0}
  .p2stat:first-child{border-top:0}
  .p2stat b{font-size:22px;min-width:96px}
  body:has(.p2hero) .sec{font-size:clamp(27px,8.4vw,33px)}
  body:has(.p2hero) .pcards{grid-template-columns:1fr}
  body:has(.p2hero) .pcard:hover{transform:none}
  body:has(.p2hero) .bens{grid-template-columns:1fr}
  body:has(.p2hero) .ben:first-child{grid-column:auto}
  body:has(.p2hero) .tier:hover{transform:none}
  body:has(.p2hero) .waveband h2{font-size:clamp(26px,7.6vw,32px)}
  body:has(.p2hero) .ctaband .btn{width:100%;display:flex;justify-content:center}
  body:has(.p2hero) .ctaband .in2{border-radius:20px}
}