/* ============================================================
   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-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}

/* ---- 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-block{display:flex;flex-direction:column;gap:6px;max-width:760px;text-align:center;font:400 16px/26px var(--ff-b);color:var(--blu-700)}
.mech-block p{margin:0}
.mech-block 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}
  .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)}

/* 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)}
/* Cookie banner: clean dark card. Drop the orange inset glow ring AND the
   orange focus-visible outline. The JS auto-focuses this container for a11y
   (tabindex="-1" region), which fires :focus-visible in keyboard mode and drew
   an orange line. Container is a focus target, not a control, so no ring needed.
   The buttons/links INSIDE keep their focus rings (we only target the container). */
.cookie-banner{border:1px solid rgba(255,255,255,.10);box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.cookie-banner:focus,.cookie-banner:focus-visible{outline:none}

/* 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: single column for these grids, see consolidated CSS-1 rule below
   (was a 2-up here, but the 2-up orphaned the highlighted 3rd card). */

/* 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}
  .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}


/* ============================================================
   HERO LAYOUT, copy left, branded supply-chain graphic right
   The .hero-figure (inline SVG: 1688 factory -> Dongguan QC -> your FC,
   with the green "real price" truth-signal) is the right-rail visual.
   Stacks below the copy <=1200px so the CTA stays above the fold.
   ============================================================ */
.hero-grid{align-items:center;justify-content:space-between;gap:40px;margin-top:56px}
.hero-copy{max-width:600px;width:100%;flex:1 1 540px;gap:20px}
.hero-figure{flex:0 1 460px;max-width:460px;width:100%;align-self:center}
.hero-figure .hero-svg{display:block;width:100%;height:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.35))}

/* topo recedes to a faint ambient backdrop now that the figure owns the right */
.hero-topo{right:-5%;top:-12%;width:38%;opacity:.25}

/* tighten vertical rhythm so the CTA sits higher in the fold */
.hero-copy .label-top{margin-bottom:2px}
.hero-cta-row{padding:16px 0 8px}
.hero-bullets{margin-top:10px}

/* stack: copy first (CTA above the fold), graphic below, centered */
@media (max-width:1200px){
  .hero-grid{flex-direction:column;align-items:flex-start;gap:28px}
  .hero-copy{max-width:100%;flex-basis:auto}
  .hero-figure{flex-basis:auto;max-width:440px;align-self:center;margin-top:2px}
  .hero-topo{width:60%;opacity:.22}
}

@media (max-width:760px){
  .hero-grid{margin-top:36px;gap:22px}
  .hero-figure{max-width:330px}
  .hero-topo{width:90%;top:-4%;opacity:.18}
}

/* ============================================================
   UI/UX + RESPONSIVE POLISH PASS (append-only overrides; wins cascade)
   All fixes live here per the partition, style.css stays untouched.
   ============================================================ */

/* CSS-1 [HIGH] Tablet grids -> 1-col so the highlighted 3rd card
   never wraps alone to a second row (kills the orphan). */
@media (min-width:761px) and (max-width:1100px){
  .price-cards,.feat-grid,.tgrid{grid-template-columns:1fr;max-width:560px}
}
@media (min-width:761px) and (max-width:1200px){
  .deal-grid{grid-template-columns:1fr}
}

/* CSS-2 [HIGH] Reset style.css .btn-primary min-width:292px on mobile
   so the CTA can't force horizontal overflow at 320px. */
@media (max-width:760px){ .btn-primary{min-width:0} }

/* CSS-4 [HIGH] H1 fluid scale on tablet/narrow so it doesn't wrap heavy. */
@media (max-width:1200px){ h1.hero-title{font-size:clamp(34px,5vw,54px);line-height:1.12} }

/* CSS-6 [HIGH/a11y] Ghost-link focus ring (transparent tap-highlight +
   0 radius were swallowing the default ring). */
.hero-cta-row .ghost-link:focus-visible{outline:2px solid var(--orange-400);outline-offset:3px;border-radius:4px;opacity:1;color:var(--orange-400)}

/* CSS-7 [MED/a11y] Lift muted text below 4.5:1 on navy; keep dark-on-white legible. */
.cta-micro{color:var(--blu-300)}
.shell.white .cta-micro{color:#4B5563}
.ck-cat .d{color:var(--blu-300)}
.hero-micro{color:var(--blu-300)}

/* CSS-9 [LOW] deal-cell number balance (8-12 is the widest at 76px). */
.deal-cell .num{white-space:nowrap}
@media (max-width:760px){ .deal-cell .num{font-size:54px;line-height:50px} }

/* CSS-10 [HIGH] Footer columns: kill the 300px min-width on the
   narrowest phones so .f-cols can't force 4px horizontal overflow at 320. */
@media (max-width:360px){
  .f-cols{min-width:0}
  .f-col{min-width:0}
}

/* CSS-11 [MED] Hero eyebrow: base pill is width:max-content (571px) and
   overflows/clips the whale-qualifier copy on ALL phones (375/390/430),
   not just 320. Wrap it inside the viewport across the mobile breakpoint. */
@media (max-width:760px){
  .hero-copy .label-top{width:auto;max-width:100%;height:auto;white-space:normal;
    align-items:flex-start;padding-top:6px;padding-bottom:6px}
}

/* ============================================================
   FIX-CSS PASS, whale-grade rhythm, hero presence, image treatment
   (append-only; later cascade wins over earlier rules above)
   ============================================================ */

/* C1. Hero grid, close the desktop gutter, scale figure */
.hero-grid{align-items:center;justify-content:flex-start;gap:clamp(32px,5vw,72px);margin-top:56px}
.hero-copy{max-width:620px;width:100%;flex:1 1 520px;gap:20px}
.hero-figure{flex:1 1 540px;max-width:620px;width:100%;align-self:center}

/* C2. Hero figure: no boxed frame (it read as an empty container); the graphic
   breathes on the navy, lifted by a soft ambient glow instead of a border. */
.hero-figure{border:0;background:none;padding:0;position:relative}
.hero-figure::before{content:"";position:absolute;inset:-4% -2% -8% -2%;z-index:0;pointer-events:none;
  background:radial-gradient(58% 52% at 58% 42%,rgba(255,79,0,.16),transparent 72%);filter:blur(24px)}
.hero-figure .hero-svg{position:relative;z-index:1;filter:drop-shadow(0 30px 60px rgba(0,0,0,.45))}

/* C3. .hero-proof fold strip (NEW) */
.hero-proof{font:500 13px/1.6 var(--ff-b);color:var(--blu-200);margin:10px 0 0;max-width:560px}
.hero-proof b{color:#fff;font-weight:700}
.hero-proof span{color:var(--blu-400)}

/* C4. Break the 3-deep slab, lighten #bridge + square the touching corners */
#bridge{background:linear-gradient(180deg,#16223f 0%,var(--blu-900) 60%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
#margin{border-radius:24px 24px 0 0}
#bridge{border-radius:0}
#bridge + .shell.deep{border-radius:0 0 24px 24px}

/* C5. Press strip, stop blanket invert, let Euronext show color, normalize optical weight */
.press-row .plogo img{height:26px;width:auto;max-width:150px;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.85}
.press-row .plogo:last-child img{filter:none;height:34px;opacity:1}   /* Euronext keeps native color */
@media (max-width:760px){.press-row .plogo img{height:22px}.press-row .plogo:last-child img{height:28px}}

/* C6. Warehouse photo, taller crop + gradient caption overlay */
.proof-photo img{height:380px;object-position:50% 42%}
.proof-photo{position:relative}
.proof-photo figcaption{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,transparent,rgba(1,16,42,.85));color:#EEF3FB;text-align:left;padding:28px 20px 14px}
@media (max-width:760px){.proof-photo img{height:260px}}

/* C7. Spacing hierarchy, give the LOSS beat more air, calm the tail */
#margin .psec{padding-top:104px;padding-bottom:104px}
.faq{padding-top:64px}

/* C9. No-JS stat fallback */
@media (scripting:none){.stat{opacity:1;transform:none}}

/* ===== LOSS PROOF BAND (the $2.4M reptilian punch, its own small section) ===== */
.loss-band{margin-top:0}
.loss-inner{max-width:1120px;margin:0 auto;padding:48px;display:flex;align-items:center;gap:40px}
.loss-fig{font:700 96px/0.86 var(--ff-d);letter-spacing:-3px;flex-shrink:0;
  background:linear-gradient(200deg,#FF7135 0%,#F14B00 55%,#8B2B00 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 8px 30px rgba(241,75,0,.25))}
.loss-copy{display:flex;flex-direction:column;gap:10px;border-left:2px solid rgba(241,75,0,.45);padding-left:34px}
.loss-lead{font:400 22px/33px var(--ff-d);color:#EEF3FB;max-width:640px}
.loss-lead b{font-weight:700;color:#fff}
.loss-src{font:600 12.5px/1.5 var(--ff-b);letter-spacing:.4px;color:var(--blu-400);text-transform:uppercase}
@media (max-width:760px){
  .loss-inner{flex-direction:column;align-items:flex-start;gap:16px;padding:34px 24px}
  .loss-fig{font-size:68px;letter-spacing:-2px}
  .loss-copy{border-left:0;border-top:2px solid rgba(241,75,0,.45);padding-left:0;padding-top:18px}
  .loss-lead{font-size:18px;line-height:28px}
}

/* Source links (loss band + pullquote): subtle, verifiable, on-brand */
.loss-src a, .pullquote span a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(127,132,181,.55);transition:color .2s,text-decoration-color .2s}
.loss-src a:hover, .pullquote span a:hover{color:var(--orange-400);text-decoration-color:var(--orange-400)}