/* ============================================================
   Pure Dropshipper LP — page-specific components.
   Loaded AFTER css/style.css; reuses the same tokens & base
   components (btn-primary, hero, trust, card-dark, faq, final-cta…).
   ============================================================ */

/* Match yakkyofy.com: the live site uses Poppins for everything (body + headings),
   so override the base --ff-b (Inter) to Poppins for this page only. */
:root{--ff-b:'Poppins',sans-serif}

/* ---- generic section scaffolding ---- */
.psec{padding:88px 48px;display:flex;flex-direction:column;gap:34px;align-items:center}
.psec .sec-head{max-width:820px}
.shell.deep{background:var(--blu-900)}
.sec-head.light .pre{color:var(--orange-400)}
.sec-head.light h2{color:var(--blu-25)}
.sec-head h2 .or{color:var(--orange-500)}
.sec-sub{font:400 17px/28px var(--ff-d);color:var(--blu-700);text-align:center;max-width:640px;margin:-8px auto 0}
.sec-sub.light{color:var(--blu-300)}
.sec-sub b{font-weight:700;color:inherit}
.section-cta{display:flex;flex-direction:column;gap:12px;align-items:center;margin-top:6px}
.cta-micro{font:600 13px/1.6 var(--ff-b);color:var(--blu-400);text-align:center}
.shell.white .cta-micro{color:var(--blu-700)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- hero additions ---- */
.hero-claim{display:flex;align-items:center;gap:8px;font:400 14px/1.5 var(--ff-d);color:#9FB0CE;margin-top:-4px}
.hero-claim b{color:#EEF3FB;font-weight:700}
.hero-claim svg{width:16px;height:16px;color:var(--green);flex-shrink:0}
.hero-cta-row{display:flex;align-items:center;gap:8px 20px;flex-wrap:wrap;padding:14px 0 6px}
.hero-cta-row .ghost-link{display:inline-flex;align-items:center;gap:7px;font:600 15px/1 var(--ff-d);color:#fff;opacity:.9;cursor:pointer;padding:11px 4px;border-bottom:2px solid transparent;border-radius:0;user-select:none;-webkit-tap-highlight-color:transparent;transition:color .2s,border-color .2s,opacity .2s}
.hero-cta-row .ghost-link::after{content:"→";font-size:16px;transition:transform .2s}
.hero-cta-row .ghost-link:hover{opacity:1;color:var(--orange-400);border-bottom-color:var(--orange-400)}
.hero-cta-row .ghost-link:hover::after{transform:translateX(3px)}
.hero-micro{font:600 13px/1.6 var(--ff-b);color:#8FA1C0}

/* ---- hero 3-row price ladder (variant of .quote-card) ---- */
.qc-ladder{display:flex;flex-direction:column;gap:9px}
.pl-row{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--blu-700);border-radius:12px;padding:13px 18px}
.pl-name{display:flex;flex-direction:column;gap:2px;font:700 15px/1.2 var(--ff-d);color:#fff}
.pl-name small{font:400 11px/1.4 var(--ff-b);color:var(--blu-300)}
.pl-val{font:700 30px/1 var(--ff-d);color:#fff;white-space:nowrap}
.pl-row.win{border-color:var(--orange-600);background:rgba(241,75,0,.08)}
.pl-row.win .pl-name{color:#fff}
.pl-row.win .pl-val{color:var(--green);text-shadow:0 4px 4px rgba(0,0,0,.25)}

/* ---- stat band (1B+ / 1700+ / 10M+) ---- */
.stat-band{display:flex;gap:0;align-items:stretch;justify-content:center;flex-wrap:wrap;width:100%;max-width:760px}
.stat{flex:1;min-width:150px;text-align:center;padding:6px 18px;position:relative}
.stat + .stat::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;background:linear-gradient(180deg,transparent,var(--blu-700),transparent)}
.stat .num{font:700 38px/1 var(--ff-d);letter-spacing:-1px;color:var(--orange-acc)}
.stat .lbl{font:400 13px/1.5 var(--ff-b);color:var(--blu-300);margin-top:8px}
.stat{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.stat.stat-in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.stat{opacity:1;transform:none;transition:none}}

/* ---- price-they-hid: 3 price cards (section 3, white) ---- */
.price-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;width:100%;max-width:980px}
.pcard{background:#fff;border:1px solid #E5E7EB;border-radius:16px;padding:26px 24px;display:flex;flex-direction:column;gap:7px;position:relative}
.pcard .pc-src{font:700 11px/1.5 var(--ff-b);letter-spacing:1px;text-transform:uppercase;color:var(--blu-400)}
.pcard .pc-val{font:700 46px/0.95 var(--ff-d);letter-spacing:-1.5px;color:var(--blu-900);margin-top:4px}
.pcard .pc-note{font:400 13px/1.5 var(--ff-b);color:#6B7280}
.pcard.win{border:2px solid var(--orange-600);background:var(--orange-25);box-shadow:0 30px 60px -30px rgba(241,75,0,.45)}
.pcard.win .pc-src{color:var(--orange-700)}
.pcard.win .pc-val{color:var(--orange-600)}
.pcard.win .pc-note b{color:#0B7A33;font-weight:700}
.pc-badge{position:absolute;top:-12px;left:24px;background:var(--orange-600);color:#fff;font:700 11px/1 var(--ff-d);letter-spacing:.4px;text-transform:uppercase;border-radius:100px;padding:6px 12px}
.mech{font:400 16px/26px var(--ff-b);color:var(--blu-700);max-width:760px;text-align:center}
.mech b{font-weight:700;color:var(--blu-900)}
.pullquote{font:600 20px/30px var(--ff-d);color:var(--orange-700);text-align:center;max-width:620px}
.pullquote span{color:var(--blu-700);font-weight:400}

/* ---- feature grid (section 4) ---- */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;width:100%;max-width:1100px}
.guarantee{display:flex;gap:11px;align-items:center;justify-content:center;max-width:820px;text-align:center;
  font:500 15px/24px var(--ff-d);color:#EEF3FB;background:rgba(14,216,88,.08);border:1px solid rgba(14,216,88,.3);border-radius:14px;padding:16px 22px}
.guarantee svg{width:22px;height:22px;color:var(--green);flex-shrink:0}
.guarantee b{font-weight:700;color:#fff}

/* ---- speed (section 5, white) ---- */
.speed-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center}
.speed-old{font:700 56px/1 var(--ff-d);letter-spacing:-1px;color:#6B7280;text-decoration:line-through;text-decoration-thickness:3px}
.speed-arr{font:400 38px/1 var(--ff-b);color:var(--orange-500)}
.speed-new{font:700 64px/1 var(--ff-d);letter-spacing:-2px;background:linear-gradient(98deg,#FF7538 0%,#F14B00 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- flow strip (sections 6 & 7) ---- */
.flow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;max-width:900px}
.flow-step{font:700 15px/1.3 var(--ff-d);border-radius:12px;padding:14px 20px;text-align:center}
.flow-arr{font:400 22px/1 var(--ff-b);color:var(--blu-400)}
.flow.dark .flow-step{background:var(--blu-800);color:#EEF3FB;border:1px solid var(--blu-700)}
.flow.dark .flow-step.done{background:var(--orange-600);color:#fff;border-color:var(--orange-600)}
.flow.light .flow-step{background:var(--orange-25);color:var(--blu-900);border:1px solid rgba(241,75,0,.25)}
.flow.light .flow-step.done{background:var(--orange-600);color:#fff;border-color:var(--orange-600)}

.media-frame{width:100%;max-width:760px;border-radius:16px;overflow:hidden;border:1px solid var(--blu-200);background:#fff}
.media-frame img{width:100%;height:auto;display:block}

/* ---- proof photo (real warehouse, section 4) ---- */
.proof-photo{width:100%;max-width:880px;margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--blu-700)}
.proof-photo img{width:100%;height:300px;object-fit:cover;object-position:50% 52%;display:block}
.proof-photo figcaption{font:500 13px/1.5 var(--ff-b);color:var(--blu-300);text-align:center;padding:12px 16px;background:var(--blu-900)}
@media (max-width:760px){.proof-photo img{height:210px}}

/* ---- testimonials (peer proof) ---- */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;width:100%;max-width:1040px}
.tcard{background:var(--blu-800);border:1px solid var(--blu-700);border-radius:16px;padding:26px 24px;display:flex;flex-direction:column;gap:14px}
.tcard .stars{color:var(--orange-400);font-size:15px;letter-spacing:3px}
.tcard blockquote{font:400 16px/25px var(--ff-b);color:#EEF3FB;margin:0;flex:1}
.tcard figcaption{display:flex;align-items:center;gap:12px}
.tcard .av{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid var(--orange-600);background:var(--blu-900)}
.tcard .who{display:flex;flex-direction:column}
.tcard .who b{font:600 15px/1.3 var(--ff-d);color:#fff}
.tcard .who small{font:400 13px/1.4 var(--ff-b);color:var(--blu-300)}

/* ---- comparison (section 8, deep) ---- */
.cmp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%;max-width:1000px}
.cmp-col{background:var(--blu-800);border:1px solid var(--blu-700);border-radius:16px;padding:26px 22px;display:flex;flex-direction:column;gap:6px}
.cmp-col.win{background:radial-gradient(140% 120% at 50% 0%,rgba(241,75,0,.22) 0%,var(--blu-800) 60%);border-color:var(--orange-600)}
.cmp-h{font:700 18px/1.2 var(--ff-d);color:#fff;padding-bottom:14px;margin-bottom:8px;border-bottom:1px solid var(--blu-700);display:flex;align-items:center;gap:8px}
.cmp-col.win .cmp-h{color:var(--orange-400)}
.cmp-row{display:flex;gap:9px;align-items:flex-start;font:400 13.5px/1.45 var(--ff-b);color:var(--blu-200);padding:8px 0}
.cmp-row svg{width:17px;height:17px;flex-shrink:0;margin-top:1px}
.cmp-row .yes{color:var(--green)}
.cmp-row .no{color:#8794B5}
.cmp-row .mid{color:var(--orange-400)}
.cmp-col.win .cmp-row{color:#EEF3FB}

/* ---- responsive ---- */
@media (max-width:1100px){
  .price-cards,.feat-grid,.cmp-grid,.tgrid{grid-template-columns:1fr;max-width:560px}
  .stat-band{max-width:560px}
}
@media (max-width:760px){
  .psec{padding:56px 20px;gap:26px}
  .pl-val{font-size:24px}
  .pcard .pc-val{font-size:38px}
  .speed-old{font-size:40px}
  .speed-new{font-size:46px}
  .stat .num{font-size:30px}
  .flow-step{padding:11px 15px;font-size:13px}
  .flow-arr{font-size:18px}
  .hero-cta-row{justify-content:center;width:100%}
  .stat + .stat::before{display:none}
}

/* ---- persistent desktop CTA: slim floating pill (bottom-right), toggled by the existing .visible JS ---- */
@media (min-width:761px){
  .sticky-cta{display:block;left:auto;right:24px;bottom:24px;padding:0;background:transparent;border:none;backdrop-filter:none;transform:translateY(calc(100% + 40px))}
  .sticky-cta.visible{transform:translateY(0)}
  .sticky-cta .btn-primary{width:auto;min-width:0;height:56px;font-size:16px;box-shadow:0 16px 36px -10px rgba(0,0,0,.55)}
}

/* ============================================================
   AUDIT FIXES — responsive, hover/active, attractiveness, animation
   ============================================================ */
/* Press logos: normalize by optical HEIGHT (not width), uniform monochrome bar */
.press-row{gap:46px}
.press-row .plogo img{height:30px;width:auto;filter:brightness(0) invert(1);opacity:.8;transition:opacity .2s}
.press-row .plogo:hover img{opacity:1}

/* Hero proof copy: lift readability (was too dim) */
.hero-bullets .item{color:var(--blu-200)}
.hero-claim{color:var(--blu-200)}

/* Button press (:active) + nav ghost hover — clicks now feel alive */
.btn-primary:active{transform:translateY(0);background:#B02400}
.nav-actions .cta{transition:background .2s,transform .15s}
.nav-actions .cta:active{transform:translateY(1px)}
.nav-actions .ghost{transition:color .2s}
.nav-actions .ghost:hover{color:var(--orange-400)}
.final-cta .btn-wide:active{transform:translateY(1px);background:#B02400}
.ck-btn{transition:background .2s,border-color .2s,color .2s}
.ck-btn.reject:active,.ck-btn.accept:active{transform:translateY(1px)}

/* FAQ row hover */
.faq-item{transition:border-color .2s,box-shadow .2s}
.faq-item:hover{border-color:var(--blu-300)}
.faq-q span{transition:color .2s}
.faq-q:hover span{color:var(--orange-700)}

/* Card hover lift (they look interactive — make them respond) */
.pcard,.cmp-col,.tcard{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.pcard:hover,.cmp-col:hover,.tcard:hover{transform:translateY(-3px)}

/* Testimonials: premium lift (were nearly flat on the deep bg) */
.tcard{background:linear-gradient(160deg,#1A2540,#121C34);box-shadow:0 24px 50px -30px rgba(0,0,0,.6);border-color:rgba(255,255,255,.10)}
.tcard:hover{box-shadow:0 28px 56px -28px rgba(0,0,0,.7)}

/* Light flow pills: visible on white + orange arrows so the eye tracks the flow */
.flow.light .flow-step{background:#fff;border:1.5px solid rgba(241,75,0,.5);box-shadow:0 2px 6px rgba(17,28,52,.08)}
.flow.light .flow-arr{color:var(--orange-500)}

/* Guarantee bar: navy scrim so the green reads on the orange gradient */
.guarantee{background:rgba(1,16,42,.55);border-color:rgba(14,216,88,.45)}

/* Footer brand text: on-palette (was off-brand lavender) */
.f-brand .addr{color:var(--blu-300)}

/* Tablet 2-up intermediate (was a hard 3 -> 1 jump at 1100px) */
@media (min-width:761px) and (max-width:1100px){
  .price-cards,.feat-grid,.tgrid{grid-template-columns:1fr 1fr;max-width:700px}
}

/* Mobile tidy-ups (were missing) */
@media (max-width:760px){
  .press-row{gap:20px 26px}
  .press-row .plogo img{height:23px}
  .flow{flex-direction:column;gap:8px;width:100%}
  .flow-step{width:100%}
  .flow-arr{transform:rotate(90deg)}
  .hero-bullets{flex-direction:column;align-items:flex-start;gap:9px}
  .pl-name{min-width:0}
  .pl-name,.pl-name small{overflow-wrap:anywhere}
  .stat{min-width:0;flex:1 0 28%;padding:6px 6px}
  .stat .num{font-size:25px}
  .stat .lbl{font-size:12px}
  .f-cols{flex-direction:column;gap:22px}
}

/* What-is-1688 explainer + profit line (newbie clarity) */
.whatis{font:400 14px/1.6 var(--ff-d);color:var(--blu-300);text-align:center;max-width:660px;margin:8px auto 0}
.whatis b{color:#fff;font-weight:700}
.profit-line{font:500 15px/24px var(--ff-d);color:var(--blu-700);text-align:center;max-width:640px}
.profit-line b{color:var(--orange-700);font-weight:700}

/* Final-CTA: center the sub paragraph (had max-width but no auto-margins -> left-aligned block) */
.final-cta .sub{margin-left:auto;margin-right:auto}
.final-cta h2{margin-left:auto;margin-right:auto}