/* ---- PDRN landing page (scoped) ---- */
.pdrn-lp{--gold-1:#f7eccb;--gold-2:#e7d29a;--gold-3:#d4b062;--bronze:#b08a3c;--ink:#4a3a1c;--ink-soft:#6b5832;font-family:inherit;color:var(--ink);line-height:1.8}
.pdrn-lp *{box-sizing:border-box}
/* <picture> is transparent: the inner <img> keeps all its own layout rules */
.pdrn-lp picture{display:contents}
.pdrn-lp .wrap{max-width:1000px;margin:0 auto;padding:0 24px}
.pdrn-lp section{padding:64px 0}
.pdrn-lp h2{font-size:30px;line-height:1.4;margin:0 0 8px;color:var(--ink);font-weight:700;letter-spacing:.5px}
.pdrn-lp h3{font-size:19px;margin:0 0 10px;color:var(--bronze);font-weight:700}
.pdrn-lp p{margin:0 0 14px;font-size:15px;color:var(--ink-soft)}
.pdrn-lp .eyebrow{font-size:15px;letter-spacing:3px;color:var(--bronze);margin:0 0 6px}
.pdrn-lp .center{text-align:center}
.pdrn-lp .gold{background:linear-gradient(135deg,var(--gold-1) 0%,var(--gold-2) 55%,var(--gold-3) 100%)}
.pdrn-lp .gold-soft{background:linear-gradient(180deg,#fdf8ec 0%,#f4e8c8 100%)}
/* image placeholder slots — drop real assets in pdrn-mask/images/ and swap to <img> or background-image */
.pdrn-lp .ph{border:1px dashed var(--bronze);border-radius:14px;background:rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;color:var(--bronze);font-size:13px;letter-spacing:2px;min-height:220px;text-align:center}
/* hero */
.pdrn-lp .hero{position:relative;left:50%;transform:translateX(-50%);width:100vw;max-width:1920px;padding:128px 0;background:#e7d29a url(images/block1-bg.jpg) center/cover no-repeat}
.pdrn-lp .hero .wrap{display:flex;gap:96px;align-items:center;justify-content:center;flex-wrap:wrap;max-width:1000px;padding:0 24px}
.pdrn-lp .hero .copy{flex:0 1 440px}
.pdrn-lp .hero .art{flex:0 0 auto;text-align:center}
.pdrn-lp .hero .hero-text{display:block;width:100%;max-width:500px;height:auto}
.pdrn-lp .hero .hero-btn{display:inline-block;margin-top:22px;transition:transform .15s}
.pdrn-lp .hero .hero-btn:hover{transform:translateY(-2px)}
.pdrn-lp .hero .hero-btn img{display:block;width:226px;height:auto}
.pdrn-lp .hero .hero-photo{display:block;width:300px;max-width:85vw;height:auto;margin:0 auto;filter:drop-shadow(0 22px 40px rgba(120,88,20,.28))}
/* block 2 — 一膜雙效 (full-width image section) */
.pdrn-lp .dual{position:relative;left:50%;transform:translateX(-50%);width:100vw;max-width:1920px;padding:64px 0;background:#f4e8c8 url(images/block2-bg.jpg) center/cover no-repeat}
.pdrn-lp .dual .wrap{max-width:1000px;margin:0 auto;padding:0 24px;text-align:center}
.pdrn-lp .dual-title{display:block;width:100%;max-width:620px;height:auto;margin:0 auto 44px}
.pdrn-lp .dual-cards{display:flex;justify-content:center;align-items:stretch;gap:28px;flex-wrap:wrap;max-width:920px;margin:0 auto}
.pdrn-lp .dual-card{display:block;flex:1 1 380px;width:100%;max-width:446px;height:auto}
/* block 3 — 昇華面膜護理 (full-width image section) */
.pdrn-lp .luxe{position:relative;left:50%;transform:translateX(-50%);width:100vw;max-width:1920px;padding:64px 0;background:#e9cfa0 url(images/block3-bg.jpg) center/cover no-repeat}
.pdrn-lp .luxe .wrap{max-width:1040px;margin:0 auto;padding:0 24px;text-align:center}
.pdrn-lp .luxe-title{display:block;width:100%;max-width:600px;height:auto;margin:0 auto 24px}
.pdrn-lp .luxe-photo{display:block;width:100%;max-width:1000px;height:auto;margin:0 auto}
/* block 4 — 5大醫美級修護成分 + 臨床實證效果 (full-width image section) */
.pdrn-lp .science{position:relative;left:50%;transform:translateX(-50%);width:100vw;max-width:1920px;padding:56px 0;background:#f7eeda url(images/block4-bg.jpg) center top/cover no-repeat}
.pdrn-lp .science .wrap{max-width:1080px;margin:0 auto;padding:0 24px;text-align:center}
.pdrn-lp .science-title{display:block;width:100%;max-width:720px;height:auto;margin:0 auto 40px}
.pdrn-lp .science-arc{display:block;width:100%;max-width:1040px;height:auto;margin:0 auto;padding-left:30px;}
/* block 4b — 臨床實證效果 on white bg; crop only photo1 top (dup heading), keep bottom heading */
.pdrn-lp .results-img{position:relative;left:50%;transform:translateX(-50%);width:100vw;max-width:1920px;background:#fff url(images/block5-bg.jpg) center bottom/cover no-repeat;padding:24px 0}
.pdrn-lp .results-img .wrap{max-width:1040px;margin:0 auto;padding:0 24px;position: relative;min-height: 540px;}
.pdrn-lp .results-photo{position: absolute;}
.pdrn-lp .results-photo img{display:block;width:90%;height:auto;margin-top:-17%}
/* block 6 — 4天節奏 timeline (white textured bg) */
.pdrn-lp .rhythm{position:relative;left:50%;transform:translateX(-50%);width:100vw;max-width:1920px;margin-top:-15px;background:#fff url(images/block6-bg.jpg) center/cover no-repeat;padding:0 0 64px;text-align:center}
.pdrn-lp .rhythm-line{display:block;width:100%;max-width:1400px;height:auto;margin:0 auto}
.pdrn-lp .rhythm .wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.pdrn-lp .rhythm-steps{display:block;width:100%;height:auto;margin-top:-14px}
.pdrn-lp .rhythm-cta{margin-top:44px}
/* block 7 — final CTA (dark) */
.pdrn-lp .cta{position:relative;left:50%;transform:translateX(-50%);width:100vw;max-width:1920px;background:#333333;padding:72px 0 80px;text-align:center}
.pdrn-lp .cta .wrap{max-width:1000px;margin:0 auto;padding:0 24px}
.pdrn-lp .cta-text{display:block;width:100%;max-width:760px;height:auto;margin:0 auto}
.pdrn-lp .cta-btn{display:inline-block;margin-top:30px;transition:transform .15s,opacity .2s}
.pdrn-lp .cta-btn img{display:block;width:228px;max-width:62vw;height:auto}
.pdrn-lp .cta-btn:hover{transform:translateY(-2px);opacity:.9}
/* buttons temporarily hidden (desktop + mobile) */
.pdrn-lp .hero .hero-btn,.pdrn-lp .cta-btn{display:none}
/* references — dark continuation below the CTA */
.pdrn-lp .refs{position:relative;left:50%;transform:translateX(-50%);width:100vw;max-width:1920px;background:#333333;padding:24px 0 72px}
.pdrn-lp .refs .wrap{max-width:1000px;margin:0 auto;padding:0 24px}
.pdrn-lp .refs-title{color:#cfcfcf;font-size:15px;font-weight:700;letter-spacing:.5px;margin:0 0 14px}
.pdrn-lp .refs-list{margin:0;padding-left:20px;font-size:12px;line-height:1.7;color:#8d8d8d}
.pdrn-lp .refs-list li{margin-bottom:7px;padding-left:4px;word-break:break-word}
.pdrn-lp .btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;text-decoration:none;padding:13px 26px;border-radius:40px;font-size:15px;letter-spacing:1px;transition:transform .15s,background .2s}
.pdrn-lp .btn:hover{background:var(--bronze);transform:translateY(-2px);color:#fff}
/* dual-effect cards */
.pdrn-lp .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:32px}
.pdrn-lp .card{background:#fff;border:1px solid #ecdcb4;border-radius:16px;padding:30px;box-shadow:0 10px 30px rgba(176,138,60,.08)}
.pdrn-lp .card .ico{width:54px;height:54px;border-radius:50%;background:var(--gold-2);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.pdrn-lp .card .ico svg{width:28px;height:28px;fill:var(--ink)}
/* luxury feature list */
.pdrn-lp .feat{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;margin-top:30px}
.pdrn-lp .feat .points>div{margin-bottom:22px}
/* ingredients arc */
.pdrn-lp .ingredients{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:28px;margin-top:40px}
.pdrn-lp .ing{text-align:center}
.pdrn-lp .ing .badge{width:84px;height:84px;border-radius:50%;margin:0 auto 14px;background:linear-gradient(135deg,#fff,var(--gold-1));border:2px solid var(--gold-3);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(176,138,60,.18)}
.pdrn-lp .ing .badge svg{width:40px;height:40px;fill:var(--bronze)}
.pdrn-lp .ing h4{margin:0 0 8px;font-size:16px;color:var(--ink);font-weight:700}
.pdrn-lp .ing p{font-size:13px;line-height:1.7}
/* clinical results */
.pdrn-lp .results{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-top:34px}
.pdrn-lp .statgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.pdrn-lp .stat{background:#fff;border-radius:14px;padding:18px;border:1px solid #ecdcb4;text-align:center}
.pdrn-lp .stat .num{font-size:30px;font-weight:800;color:var(--bronze);line-height:1}
.pdrn-lp .stat .lbl{font-size:13px;color:var(--ink-soft);margin-top:6px}
/* rhythm steps */
.pdrn-lp .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;margin-top:36px}
.pdrn-lp .step{position:relative;background:rgba(255,255,255,.55);border-radius:16px;padding:28px 22px}
.pdrn-lp .step .n{font-size:46px;font-weight:800;color:var(--bronze);line-height:1;opacity:.85}
.pdrn-lp .step h4{margin:8px 0 6px;font-size:17px;color:var(--ink)}
@media(max-width:768px){.pdrn-lp .feat,.pdrn-lp .results{grid-template-columns:1fr}.pdrn-lp h2{font-size:24px}.pdrn-lp .hero .art{order:-1}}
/* mobile/tablet — reflowed image variants are swapped in via <picture>; undo the
   desktop-only layout hacks that only make sense for the wide desktop images */
@media(max-width:1024px){
  .pdrn-lp .hero{padding:64px 0}
  .pdrn-lp .hero .wrap{gap:48px}
  .pdrn-lp .dual-title{width:80%}
  .pdrn-lp .luxe-title{width:60%}
  .pdrn-lp .dual,.pdrn-lp .luxe{padding-top:32px;padding-bottom:32px}
  .pdrn-lp .science{padding-top:32px;padding-bottom:120px}
  .pdrn-lp .science{background-image:url(images/mobile/block4-bg-m.png)}
  .pdrn-lp .science-arc{padding-left:0}
  .pdrn-lp .science-title{width:80%;}
  .pdrn-lp .science .wrap{padding: 0;}
  .pdrn-lp .results-img .wrap{position:static;min-height:0}
  .pdrn-lp .results-photo{position:static}
  .pdrn-lp .results-photo img{width:100%;margin-top:-32%}
  .pdrn-lp .rhythm .wrap{padding: 0;}
  .pdrn-lp .rhythm{margin-top:0;background-image:none;padding-bottom:0}
  .pdrn-lp .rhythm-line{display:none}
  .pdrn-lp .rhythm-steps{margin-top:0}
}