/*
 * Jobeyze personal website landing page: styles.
 * Everything is scoped to names starting with "pwl-" so nothing here touches the rest of the site.
 * Desktop first; one switch to the phone layout at 900px and below.
 * Sections of this file: 1 base, 2 motion, 3 parts that change state, 4 sample website previews,
 * 5 layout (generated from the approved design: do not hand-edit values), 6 reduced motion.
 */

/* 1. base */
.pwl-page{box-sizing:border-box;background:#FFFFFF;color:#17151B;font-family:Inter,'Helvetica Neue',Arial,sans-serif;line-height:normal;-webkit-text-size-adjust:100%}
:where(.pwl-page) h1,:where(.pwl-page) h2,:where(.pwl-page) h3,.pwl-h{font-family:Manrope,Inter,'Helvetica Neue',Arial,sans-serif}
:where(.pwl-page) a{color:#2E1934}
:where(.pwl-page) a:hover{color:#17151B}
:where(.pwl-page) button{font-family:inherit;cursor:pointer}
.pwl-page button:focus-visible,.pwl-page a:focus-visible{outline:3px solid #A32071;outline-offset:3px}
.pwl-page [hidden]{display:none!important}
.pwl-if{display:contents}

/* 2. motion */
.pwl-ghost{transition:background .18s ease,border-color .18s ease,transform .18s ease}
.pwl-ghost:hover{background:#F5F3F6;border-color:#D6D0DA}
.pwl-ghost:active{transform:scale(.97)}
.pwl-solid{transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease}
.pwl-solid:hover{transform:translateY(-2px);box-shadow:0 16px 28px -14px rgba(163,32,113,.7)}
.pwl-solid:active{transform:scale(.98)}
.pwl-row{transition:background .18s ease}
.pwl-row:hover{background:#FAF9FB}
.pwl-card{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,border-color .25s ease}
.pwl-card:hover{transform:translateY(-3px);border-color:#D6D0DA;box-shadow:0 22px 44px -30px rgba(46,25,52,.4)}
@keyframes pwl-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes pwl-open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes pwl-bar{0%,100%{transform:scaleY(.18)}50%{transform:scaleY(1)}}
@keyframes pwl-caret{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes pwl-pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes pwl-float{from{transform:translateZ(0)}to{transform:translateZ(18px)}}
@keyframes pwl-sway{from{transform:rotateX(57deg) rotateZ(-35deg)}to{transform:rotateX(54deg) rotateZ(-30deg)}}
@keyframes pwl-back-a{0%{transform:translate3d(var(--fx),var(--fy),var(--fz));opacity:1}38%{transform:translate3d(calc(var(--fx) - 90px),calc(var(--fy) + 60px),0);opacity:0}40%{transform:translate3d(var(--bx),var(--by),-150px);opacity:0}100%{transform:translate3d(var(--bx),var(--by),0);opacity:1}}
@keyframes pwl-back-b{0%{transform:translate3d(var(--fx),var(--fy),var(--fz));opacity:1}38%{transform:translate3d(calc(var(--fx) - 90px),calc(var(--fy) + 60px),0);opacity:0}40%{transform:translate3d(var(--bx),var(--by),-150px);opacity:0}100%{transform:translate3d(var(--bx),var(--by),0);opacity:1}}
@keyframes pwl-turn{from{transform:perspective(900px) rotateY(16deg)}to{transform:perspective(900px) rotateY(4deg)}}
.pwl-in{animation:pwl-in .7s cubic-bezier(.2,.8,.2,1) both}
.pwl-open{animation:pwl-open .35s cubic-bezier(.2,.8,.2,1) both}
.pwl-pop{animation:pwl-pop .5s cubic-bezier(.2,.8,.2,1) both}
.pwl-wait{opacity:0}
.pwl-in .pwl-card,.pwl-in .pwl-rise{animation:pwl-in .7s cubic-bezier(.2,.8,.2,1) backwards}
.pwl-in .pwl-card:nth-child(2),.pwl-in .pwl-rise:nth-child(2){animation-delay:.08s}
.pwl-in .pwl-card:nth-child(3),.pwl-in .pwl-rise:nth-child(3){animation-delay:.16s}
.pwl-in .pwl-card:nth-child(4){animation-delay:.24s}
.pwl-in .pwl-card:nth-child(5){animation-delay:.32s}
.pwl-in .pwl-card:nth-child(6){animation-delay:.4s}

/* 3. parts that change state (the script adds is-on, is-done, is-press, is-open) */
.pwl-sheet{position:absolute;padding:0;border:none;background:transparent;transform-style:preserve-3d;cursor:pointer}
.pwl-float{line-height:0;animation:pwl-float 5.5s ease-in-out infinite alternate}
.pwl-pill{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px 0 12px;border-radius:999px;font-size:14px;font-weight:600;box-sizing:border-box;border:1px solid #E5CCD7;background:#FFFFFF;color:#2E1934;transition:background .2s ease,color .2s ease,border-color .2s ease}
.pwl-pill.is-on{border-color:#2E1934;background:#2E1934;color:#FFFFFF}
.pwl-way{height:44px;padding:0 14px;border-radius:9px;border:none;font-size:14px;font-weight:600;white-space:nowrap;background:transparent;color:#625B68;transition:background .2s ease,color .2s ease}
.pwl-way.is-on{background:#FFFFFF;color:#2E1934;box-shadow:0 6px 14px -10px rgba(46,25,52,0.6)}
.pwl-bar{display:inline-block;width:3px;height:22px;border-radius:2px;background:#A32071}
.pwl-built-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;background:#FFFFFF;border:1px solid #E5CCD7;transition:border-color .3s ease}
.pwl-built-row.is-done{border-color:#D6D0DA}
.pwl-built-num{flex-shrink:0;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;background:#F5F3F6;color:#3D3644;transition:all .35s ease}
.is-done .pwl-built-num{background:#2E1934;color:#FFFFFF}
.pwl-built-note{font-size:13px;color:#625B68;white-space:nowrap;opacity:0;transition:opacity .35s ease}
.is-done .pwl-built-note{opacity:1}
.pwl-cv-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:#FBF3F8;border:1px solid #E5CCD7;opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.pwl-cv-row.is-on{opacity:1;transform:none}
.pwl-mini{border-radius:10px;line-height:0;box-shadow:0 0 0 1px #E5CCD7;transition:box-shadow .35s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.pwl-mini.is-on{box-shadow:0 0 0 3px #FFFFFF,0 0 0 5px #A32071;transform:scale(1.03)}
.pwl-publish{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border-radius:9px;background:linear-gradient(120deg,#2E1934,#A32071);color:#FFFFFF;font-size:15px;font-weight:600;white-space:nowrap;cursor:default;box-shadow:0 12px 24px -14px rgba(163,32,113,0.75);transition:transform .18s ease,box-shadow .18s ease}
.pwl-publish.is-press{transform:scale(.94);box-shadow:0 4px 10px -8px rgba(163,32,113,0.75)}
.pwl-live{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;background:#FFFFFF;border:1px solid #E5CCD7;font-size:14px;font-weight:500;color:#2E1934;opacity:0;transform:scale(.8);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.pwl-live.is-on{opacity:1;transform:none}
.pwl-qr-cell{background:transparent}
.pwl-qr-cell.is-on{background:#2E1934}
.pwl-faq-card{border-radius:18px;background:#FFFFFF;border:1px solid #E5CCD7;transition:box-shadow .3s ease,border-color .3s ease}
.pwl-faq-card.is-open{border-color:#D6D0DA;box-shadow:0 22px 44px -34px rgba(23,21,27,0.4)}
.pwl-faq-chev{flex-shrink:0;transition:transform .3s ease}
.is-open .pwl-faq-chev{transform:rotate(180deg)}

/* 4. sample website previews (drawn by site-preview.js) */
.pwl-site{position:relative;overflow:hidden;width:100%;aspect-ratio:8/5;border-radius:14px}
.pwl-site canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.pwl-site--mini{border-radius:8px}
.pwl-site--big{border-radius:0}
.pwl-site--cta{width:230px;border-radius:12px}

@media (max-width: 900px){
.pwl-way{padding:0 10px;font-size:13px}
.pwl-site--deck{border-radius:9px}
.pwl-site--cta{width:250px}
}

/* 5. layout, generated from the approved design (desktop values, then the phone overrides) */
.pwl-s1{position:absolute;width:0px;height:0px;overflow:hidden}
.pwl-s2{width:2px;height:2px}
.pwl-s3{border-bottom:1px solid rgb(239, 237, 241);padding:0px 24px}
.pwl-bar-style{max-width:1140px;margin:0px auto;min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.pwl-s4{font-size:22px;font-weight:700;letter-spacing:-0.02em;color:rgb(46, 25, 52)}
.pwl-s5{display:flex;align-items:center;gap:16px}
.pwl-s6{font-size:14px;font-weight:600;text-decoration:none}
.pwl-s7{display:inline-flex;align-items:center;height:44px;padding:0px 16px;border-radius:9px;border:1px solid rgb(229, 204, 215);background:rgb(255, 255, 255);color:rgb(46, 25, 52);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;box-sizing:border-box}
.pwl-hero-style{padding:40px 24px 96px}
.pwl-hero-inner{max-width:1140px;margin:0px auto;display:flex;flex-direction:column;gap:30px}
.pwl-hero-text-style{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.pwl-lab-style{font-size:12px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:rgb(163, 32, 113)}
.pwl-s8{margin:0px;font-weight:700;letter-spacing:-0.03em;color:rgb(46, 25, 52);line-height:1.1;text-wrap:balance;max-width:960px;font-size:62px}
.pwl-s9{background:linear-gradient(120deg, rgb(46, 25, 52), rgb(163, 32, 113)) text;color:transparent}
.pwl-lead-style{margin:0px;line-height:1.55;color:rgb(61, 54, 68);max-width:40em;text-wrap:balance;font-size:19px}
.pwl-s10{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding-top:4px}
.pwl-btn-main{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0px 20px;border-radius:9px;background:linear-gradient(120deg, rgb(46, 25, 52), rgb(163, 32, 113));color:rgb(255, 255, 255);font-size:15px;font-weight:600;text-decoration:none;box-shadow:rgba(163, 32, 113, 0.75) 0px 12px 24px -14px;white-space:nowrap}
.pwl-btn-second{display:inline-flex;align-items:center;height:44px;padding:0px 18px;border-radius:9px;border:1px solid rgb(229, 204, 215);background:rgb(255, 255, 255);color:rgb(46, 25, 52);font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap;box-sizing:border-box}
.pwl-assure-style{list-style:none;margin:0px;width:100%;box-sizing:border-box;padding:8px 0px 0px;max-width:1020px;display:grid;gap:12px;grid-template-columns:repeat(3, minmax(0px, 1fr))}
.pwl-assure-card{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;border:1px solid rgb(229, 204, 215);background:rgb(255, 255, 255);box-shadow:rgba(46, 25, 52, 0.4) 0px 18px 30px -28px}
.pwl-s11{flex-shrink:0;width:30px;height:30px;border-radius:10px;background:rgb(251, 243, 248);color:rgb(123, 18, 70);display:flex;align-items:center;justify-content:center}
.pwl-s12{display:flex;flex-direction:column;gap:2px;min-width:0px;text-align:left}
.pwl-s13{font-size:15px;line-height:1.3;font-weight:700;letter-spacing:-0.01em;color:rgb(46, 25, 52)}
.pwl-s14{font-size:14px;line-height:1.45;color:rgb(61, 54, 68);text-wrap:pretty}
.pwl-stage-card-style{animation-delay:0.15s;position:relative;overflow:hidden;border:1px solid rgb(229, 204, 215);border-radius:20px;background:linear-gradient(rgb(250, 249, 251) 0%, rgb(255, 255, 255) 62%);box-shadow:rgba(46, 25, 52, 0.5) 0px 48px 64px -48px}
.pwl-sample-tag-style{position:absolute;z-index:6;left:22px;top:18px;font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:rgb(98, 91, 104)}
.pwl-deck-style{position:relative;height:580px;perspective:2200px;perspective-origin:50% 40%}
.pwl-s15{position:absolute;left:0px;top:0px;width:100%;height:100%;transform-style:preserve-3d;transition:transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);transform:rotateX(calc(var(--py, 0) * -5deg)) rotateY(calc(var(--px, 0) * 7deg))}
.pwl-plane-style{position:absolute;left:50%;top:54%;width:0px;height:0px;transform-style:preserve-3d;transform:rotateX(57deg) rotateZ(-33deg);animation:9s ease-in-out 0s infinite alternate none running pwl-sway}
.pwl-s16{position:relative;width:440px;height:275px;border-radius:14px;overflow:hidden;background:rgb(16, 24, 32)}
.pwl-s17{position:absolute;left:0px;top:0px;width:100%;height:100%;display:block}
.pwl-s18{position:absolute;left:0px;top:0px;width:2px;height:2px;opacity:0;pointer-events:none}
.pwl-s19{position:relative;width:440px;height:275px;border-radius:14px;overflow:hidden;background:rgb(255, 255, 255)}
.pwl-s20{position:relative;width:440px;height:275px;border-radius:14px;overflow:hidden;background:rgb(245, 247, 247)}
.pwl-picker-style{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;gap:14px;padding:0px 40px 36px}
.pwl-s21{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pwl-d-dot-style{width:18px;height:18px;border-radius:50%;box-sizing:border-box;border:2px solid rgb(255, 255, 255);box-shadow:rgb(214, 208, 218) 0px 0px 0px 1px;background:linear-gradient(135deg, rgb(16, 24, 32) 50%, rgb(217, 164, 65) 50%)}
.pwl-d-dot-style-2{width:18px;height:18px;border-radius:50%;box-sizing:border-box;border:2px solid rgb(255, 255, 255);box-shadow:rgb(214, 208, 218) 0px 0px 0px 1px;background:linear-gradient(135deg, rgb(31, 84, 184) 50%, rgb(211, 223, 239) 50%)}
.pwl-d-dot-style-3{width:18px;height:18px;border-radius:50%;box-sizing:border-box;border:2px solid rgb(255, 255, 255);box-shadow:rgb(214, 208, 218) 0px 0px 0px 1px;background:linear-gradient(135deg, rgb(14, 111, 104) 50%, rgb(214, 236, 233) 50%)}
.pwl-d-dot-style-4{width:18px;height:18px;border-radius:50%;box-sizing:border-box;border:2px solid rgb(255, 255, 255);box-shadow:rgb(214, 208, 218) 0px 0px 0px 1px;background:linear-gradient(135deg, rgb(138, 28, 63) 50%, rgb(243, 228, 233) 50%)}
.pwl-pick-line{margin:0px;text-align:center;line-height:1.5;color:rgb(61, 54, 68);text-wrap:balance;font-size:17px}
.pwl-s22{font-weight:600;color:rgb(23, 21, 27)}
.pwl-s23{font-size:13px;line-height:1.5;color:rgb(98, 91, 104);text-align:center}
.pwl-band-style{background:rgb(250, 249, 251);border-top:1px solid rgb(239, 237, 241);border-bottom:1px solid rgb(239, 237, 241);padding:96px 24px}
.pwl-inner-style{max-width:1140px;margin:0px auto;display:flex;flex-direction:column;gap:48px}
.pwl-split-wide-left{display:grid;grid-template-columns:500px minmax(0px, 1fr);gap:72px;align-items:center}
.pwl-s24{display:flex;flex-direction:column;gap:16px}
.pwl-s25{margin:0px;font-weight:700;letter-spacing:-0.025em;color:rgb(46, 25, 52);line-height:1.15;text-wrap:balance;font-size:40px}
.pwl-p-style{margin:0px;line-height:1.65;color:rgb(61, 54, 68);max-width:32em;text-wrap:pretty;font-size:17px}
.pwl-pull-style{margin-top:6px;padding-left:16px;border-left:3px solid rgb(163, 32, 113);font-weight:700;letter-spacing:-0.01em;line-height:1.35;color:rgb(46, 25, 52);text-wrap:balance;font-size:20px}
.pwl-s26{display:grid;grid-template-columns:repeat(2, minmax(0px, 1fr));gap:16px}
.pwl-card-style{border:1px solid rgb(229, 204, 215);border-radius:20px;background:rgb(255, 255, 255);box-shadow:rgba(46, 25, 52, 0.35) 0px 24px 40px -36px;padding:24px;display:flex;flex-direction:column;gap:14px}
.pwl-ico-style{flex-shrink:0;width:40px;height:40px;border-radius:12px;background:rgb(251, 243, 248);color:rgb(123, 18, 70);display:flex;align-items:center;justify-content:center}
.pwl-card-text{display:flex;flex-direction:column;min-width:0px;gap:8px}
.pwl-card-title{margin:0px;font-size:18px;line-height:1.3;font-weight:700;letter-spacing:-0.01em;color:rgb(23, 21, 27)}
.pwl-card-note{font-size:15px;line-height:1.55;color:rgb(98, 91, 104);text-wrap:pretty}
.pwl-plain-style{padding:96px 24px}
.pwl-head-style{display:flex;flex-direction:column;gap:12px;max-width:760px}
.pwl-sub-style{margin:0px;line-height:1.6;color:rgb(98, 91, 104);max-width:36em;text-wrap:pretty;font-size:18px}
.pwl-rows-style{display:flex;flex-direction:column;gap:56px}
.pwl-step-row-style{display:grid;grid-template-columns:minmax(0px, 1fr) minmax(0px, 1fr);gap:72px;align-items:center}
.pwl-step-text-a{display:flex;flex-direction:column;gap:14px;align-items:flex-start;order:0}
.pwl-step-num-style{width:40px;height:40px;border-radius:50%;background:rgb(251, 243, 248);border:1px solid rgb(229, 204, 215);box-sizing:border-box;color:rgb(163, 32, 113);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;letter-spacing:0.02em}
.pwl-s27{margin:0px;font-weight:700;letter-spacing:-0.02em;color:rgb(23, 21, 27);line-height:1.2;text-wrap:balance;font-size:30px}
.pwl-step-vis-a{position:relative;border:1px solid rgb(229, 204, 215);border-radius:20px;background:rgb(250, 249, 251);box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-height:320px;padding:44px 32px 36px;order:1}
.pwl-vis-tag{position:absolute;z-index:2;left:20px;top:16px;font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:rgb(98, 91, 104)}
.pwl-s28{display:flex;flex-direction:column;gap:14px;width:100%;max-width:440px}
.pwl-s29{display:flex;gap:6px;padding:4px;border-radius:12px;background:rgb(245, 243, 246);align-self:flex-start}
.pwl-s30{display:flex;flex-direction:column;gap:12px;min-height:152px}
.pwl-s31{font-size:15px;font-weight:600;color:rgb(23, 21, 27)}
.pwl-s32{display:flex;align-items:center;gap:12px;min-height:62px;padding:10px 16px;border-radius:12px;border:1px solid rgb(214, 208, 218);background:rgb(255, 255, 255);box-shadow:rgba(46, 25, 52, 0.4) 0px 18px 40px -30px;box-sizing:border-box}
.pwl-s33{display:flex;align-items:center;gap:3px;height:22px;flex-shrink:0}
.pwl-s34{font-size:16px;line-height:1.4;color:rgb(23, 21, 27)}
.pwl-s35{display:inline-block;width:2px;height:18px;margin-left:2px;vertical-align:-3px;background:rgb(163, 32, 113);animation:1s steps(1) 0s infinite normal none running pwl-caret}
.pwl-s36{display:flex;gap:8px;flex-wrap:wrap}
.pwl-s37{display:inline-flex;align-items:center;height:34px;padding:0px 14px;border-radius:999px;background:rgb(46, 25, 52);color:rgb(255, 255, 255);font-size:13px;font-weight:600}
.pwl-s38{display:inline-flex;align-items:center;height:34px;padding:0px 14px;border-radius:999px;background:rgb(245, 243, 246);color:rgb(61, 54, 68);font-size:13px;font-weight:500}
.pwl-s39{display:flex;align-items:center;gap:12px;min-height:62px;padding:10px 16px;border-radius:12px;border:1px dashed rgb(214, 208, 218);background:rgb(255, 255, 255);box-sizing:border-box}
.pwl-s40{flex-shrink:0;width:34px;height:34px;border-radius:10px;background:rgb(251, 243, 248);color:rgb(123, 18, 70);display:flex;align-items:center;justify-content:center}
.pwl-s41{flex:1 1 auto;min-width:0px;font-size:16px;color:rgb(23, 21, 27)}
.pwl-sample-pill-dark{display:inline-flex;align-items:center;height:28px;padding:0px 12px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap;box-sizing:border-box;background:rgb(46, 25, 52);color:rgb(255, 255, 255)}
.pwl-s42{display:flex;gap:8px;flex-wrap:wrap;min-height:32px}
.pwl-chip-style{display:inline-flex;align-items:center;height:32px;padding:0px 13px;border-radius:999px;border:1px solid rgb(229, 204, 215);background:rgb(255, 255, 255);color:rgb(61, 54, 68);font-size:13px;font-weight:500;white-space:nowrap;box-sizing:border-box}
.pwl-s43{height:1px;background:rgb(239, 237, 241)}
.pwl-step-text-b{display:flex;flex-direction:column;gap:14px;align-items:flex-start;order:1}
.pwl-step-vis-b{position:relative;border:1px solid rgb(229, 204, 215);border-radius:20px;background:rgb(250, 249, 251);box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-height:320px;padding:44px 32px 36px;order:0}
.pwl-s44{display:flex;flex-direction:column;gap:10px;width:100%;max-width:440px}
.pwl-s45{list-style:none;margin:0px;padding:0px;display:flex;flex-direction:column;gap:8px}
.pwl-s46{flex:1 1 auto;min-width:0px;font-size:15px;line-height:1.35;font-weight:500;color:rgb(23, 21, 27)}
.pwl-s47{flex-shrink:0;width:34px;height:34px;border-radius:10px;background:rgb(255, 255, 255);border:1px solid rgb(229, 204, 215);box-sizing:border-box;color:rgb(123, 18, 70);display:flex;align-items:center;justify-content:center}
.pwl-s48{flex:1 1 auto;font-size:15px;font-weight:600;color:rgb(46, 25, 52)}
.pwl-s49{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}
.pwl-mini-grid{display:grid;grid-template-columns:repeat(2, 190px);gap:12px}
.pwl-s50{position:relative;width:190px;height:119px;border-radius:8px;overflow:hidden;background:rgb(16, 24, 32)}
.pwl-s51{position:relative;width:190px;height:119px;border-radius:8px;overflow:hidden;background:rgb(255, 255, 255)}
.pwl-s52{position:relative;width:190px;height:119px;border-radius:8px;overflow:hidden;background:rgb(245, 247, 247)}
.pwl-s53{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
.pwl-s54{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center;width:100%}
.pwl-qr-box{flex-shrink:0;width:148px;height:148px;padding:12px;box-sizing:border-box;border-radius:16px;background:rgb(255, 255, 255);border:1px solid rgb(229, 204, 215);box-shadow:rgba(46, 25, 52, 0.4) 0px 18px 40px -30px;display:grid;grid-template-columns:repeat(21, minmax(0px, 1fr));grid-auto-rows:1fr}
.pwl-s55{display:flex;flex-direction:column;gap:10px;flex:1 1 200px;min-width:0px;max-width:240px}
.pwl-s56{border:1px solid rgb(229, 204, 215);border-radius:12px;background:rgb(255, 255, 255);padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.pwl-mini-lab{font-size:12px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:rgb(23, 21, 27)}
.pwl-s57{font-size:15px;line-height:1.4;color:rgb(61, 54, 68)}
.pwl-s58{display:flex;align-items:center;gap:10px;border:1px solid rgb(229, 204, 215);border-radius:12px;background:rgb(251, 243, 248);padding:12px 14px}
.pwl-s59{flex-shrink:0}
.pwl-s60{font-size:15px;font-weight:600;color:rgb(46, 25, 52)}
.pwl-split-kit{display:grid;grid-template-columns:400px minmax(0px, 1fr);gap:72px;align-items:start}
.pwl-told-card{border:1px solid rgb(229, 204, 215);border-radius:20px;background:rgb(255, 255, 255);box-shadow:rgba(46, 25, 52, 0.35) 0px 24px 40px -36px;padding:22px;display:flex;flex-direction:column;gap:12px;margin-top:8px}
.pwl-s61{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pwl-sample-pill{display:inline-flex;align-items:center;height:28px;padding:0px 12px;border-radius:999px;background:rgb(251, 243, 248);border:1px solid rgb(229, 204, 215);color:rgb(123, 18, 70);font-size:12px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;white-space:nowrap;box-sizing:border-box}
.pwl-s62{display:flex;flex-direction:column;gap:4px;padding-top:12px;border-top:1px solid rgb(239, 237, 241)}
.pwl-s63{font-size:13px;font-weight:600;color:rgb(98, 91, 104)}
.pwl-s64{font-size:16px;line-height:1.45;min-height:46px;color:rgb(23, 21, 27);font-style:italic}
.pwl-s65{display:flex;flex-direction:column;gap:12px;min-width:0px}
.pwl-browser-style{border:1px solid rgb(229, 204, 215);border-radius:20px;background:rgb(255, 255, 255);box-shadow:rgba(46, 25, 52, 0.35) 0px 24px 40px -36px;overflow:hidden}
.pwl-s66{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid rgb(239, 237, 241);background:rgb(250, 249, 251)}
.pwl-s67{width:9px;height:9px;border-radius:50%;background:rgb(214, 208, 218)}
.pwl-s68{margin-left:10px;font-size:12px;font-weight:500;color:rgb(98, 91, 104)}
.pwl-s69{display:flex;justify-content:center;background:rgb(245, 247, 247)}
.pwl-s70{position:relative;width:666px;height:416px;border-radius:0px;overflow:hidden;background:rgb(245, 247, 247)}
.pwl-s71{font-size:13px;line-height:1.5;color:rgb(98, 91, 104)}
.pwl-s72{display:grid;grid-template-columns:repeat(3, minmax(0px, 1fr));gap:16px}
.pwl-fear-card{border:1px solid rgb(229, 204, 215);border-radius:20px;background:rgb(255, 255, 255);box-shadow:rgba(46, 25, 52, 0.35) 0px 24px 40px -36px;padding:24px;display:flex;flex-direction:column;gap:14px}
.pwl-fear-q{font-size:19px;line-height:1.35;font-weight:700;letter-spacing:-0.01em;color:rgb(46, 25, 52);text-wrap:balance}
.pwl-s73{display:flex;gap:12px;align-items:flex-start}
.pwl-s74{flex-shrink:0;width:32px;height:32px;border-radius:10px;background:rgb(251, 243, 248);color:rgb(123, 18, 70);display:flex;align-items:center;justify-content:center}
.pwl-s75{font-size:16px;line-height:1.55;color:rgb(23, 21, 27);text-wrap:pretty}
.pwl-split-even{display:grid;grid-template-columns:minmax(0px, 1fr) minmax(0px, 1fr);gap:72px;align-items:center}
.pwl-s76{list-style:none;margin:0px;padding:8px 0px 0px;display:flex;flex-direction:column;gap:14px}
.pwl-s77{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:rgb(46, 25, 52);color:rgb(255, 255, 255);display:flex;align-items:center;justify-content:center}
.pwl-priv-line{line-height:1.5;color:rgb(23, 21, 27);text-wrap:pretty;font-size:17px}
.pwl-ctrl-card{border:1px solid rgb(229, 204, 215);border-radius:20px;background:rgb(255, 255, 255);box-shadow:rgba(46, 25, 52, 0.35) 0px 24px 40px -36px;padding:24px;display:flex;flex-direction:column;gap:12px}
.pwl-s78{font-size:17px;font-weight:700;color:rgb(23, 21, 27)}
.pwl-s79{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid rgb(239, 237, 241);background:rgb(255, 255, 255)}
.pwl-s80{font-size:15px;font-weight:500;color:rgb(23, 21, 27)}
.pwl-r-style{display:inline-flex;align-items:center;height:28px;padding:0px 12px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap;box-sizing:border-box;background:rgb(46, 25, 52);color:rgb(255, 255, 255)}
.pwl-r-style-2{display:inline-flex;align-items:center;height:28px;padding:0px 12px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap;box-sizing:border-box;background:rgb(245, 243, 246);color:rgb(61, 54, 68)}
.pwl-s81{display:flex;gap:10px;flex-wrap:wrap}
.pwl-btn-second-static{display:inline-flex;align-items:center;height:40px;padding:0px 18px;border-radius:9px;border:1px solid rgb(229, 204, 215);background:rgb(255, 255, 255);color:rgb(46, 25, 52);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;box-sizing:border-box}
.pwl-split-faq{display:grid;grid-template-columns:380px minmax(0px, 1fr);gap:72px;align-items:start}
.pwl-s82{display:flex;flex-direction:column;gap:12px}
.pwl-s83{display:flex;flex-direction:column;gap:10px;min-width:0px}
.pwl-s84{width:100%;box-sizing:border-box;border:none;background:transparent;text-align:left;padding:16px 20px;display:flex;align-items:center;gap:16px;border-radius:18px;min-height:58px}
.pwl-s85{flex-grow:1;font-size:17px;line-height:1.35;font-weight:600;color:rgb(23, 21, 27)}
.pwl-s86{padding:0px 20px 20px;font-size:16px;line-height:1.6;color:rgb(61, 54, 68);text-wrap:pretty}
.pwl-cta-wrap{padding:96px 24px}
.pwl-cta-band{max-width:1140px;margin:0px auto;box-sizing:border-box;border:1px solid rgb(229, 204, 215);border-radius:20px;background:linear-gradient(120deg, rgb(251, 243, 248) 0%, rgb(250, 249, 251) 55%, rgb(255, 255, 255) 100%);display:flex;align-items:center;gap:32px;padding:28px 56px 28px 32px}
.pwl-cta-pic{flex-shrink:0;line-height:0;border-radius:12px;box-shadow:rgba(46, 25, 52, 0.6) 0px 26px 40px -30px, rgba(46, 25, 52, 0.08) 0px 0px 0px 1px;transform:perspective(900px) rotateY(14deg);animation:7s ease-in-out 0s infinite alternate none running pwl-turn}
.pwl-s87{position:relative;width:230px;height:144px;border-radius:12px;overflow:hidden;background:rgb(255, 255, 255)}
.pwl-cta-text{display:flex;flex-direction:column;gap:8px;min-width:0px;flex:1 1 auto}
@media (max-width: 900px){
.pwl-bar-style{min-height:60px}
.pwl-hero-style{padding:32px 16px 56px}
.pwl-hero-inner{gap:24px}
.pwl-hero-text-style{gap:14px}
.pwl-s8{max-width:100%;font-size:36px}
.pwl-lead-style{font-size:17px}
.pwl-assure-style{max-width:unset;gap:unset;grid-template-columns:unset;padding:0px;display:flex;flex-direction:column;border:1px solid rgb(229, 204, 215);border-radius:14px;background:rgb(255, 255, 255);overflow:hidden;box-shadow:rgba(46, 25, 52, 0.4) 0px 18px 30px -28px}
.pwl-assure-card{border-radius:unset;border:unset;background:unset;box-shadow:unset;padding:11px 14px;border-top:1px solid rgb(239, 237, 241);margin-top:-1px}
.pwl-stage-card-style{border-radius:18px}
.pwl-sample-tag-style{left:16px;top:14px}
.pwl-deck-style{height:262px;perspective:1500px}
.pwl-plane-style{top:56%}
.pwl-s16{width:196px;height:123px;border-radius:9px}
.pwl-s19{width:196px;height:123px;border-radius:9px}
.pwl-s20{width:196px;height:123px;border-radius:9px}
.pwl-picker-style{padding:4px 16px 28px}
.pwl-pick-line{font-size:16px}
.pwl-band-style{padding:56px 16px}
.pwl-inner-style{gap:28px}
.pwl-split-wide-left{grid-template-columns:minmax(0px, 1fr);gap:28px;align-items:start}
.pwl-s25{font-size:28px}
.pwl-p-style{font-size:16px}
.pwl-pull-style{font-size:18px}
.pwl-s26{grid-template-columns:minmax(0px, 1fr);gap:12px}
.pwl-card-style{flex-direction:unset;border-radius:18px;padding:18px;align-items:flex-start}
.pwl-card-text{gap:4px}
.pwl-card-title{font-size:17px}
.pwl-plain-style{padding:56px 16px}
.pwl-sub-style{font-size:16px}
.pwl-rows-style{gap:36px}
.pwl-step-row-style{grid-template-columns:minmax(0px, 1fr);gap:28px;align-items:start}
.pwl-s27{font-size:23px}
.pwl-step-vis-a{border-radius:18px;min-height:240px;padding:40px 16px 24px}
.pwl-vis-tag{left:16px;top:12px}
.pwl-step-text-b{order:0}
.pwl-step-vis-b{border-radius:18px;min-height:240px;padding:40px 16px 24px;order:1}
.pwl-mini-grid{grid-template-columns:repeat(2, 150px)}
.pwl-s50{width:150px;height:94px}
.pwl-s51{width:150px;height:94px}
.pwl-s52{width:150px;height:94px}
.pwl-qr-box{width:132px;height:132px}
.pwl-split-kit{grid-template-columns:minmax(0px, 1fr);gap:28px}
.pwl-told-card{border-radius:18px;padding:18px}
.pwl-browser-style{border-radius:18px}
.pwl-s70{width:356px;height:223px}
.pwl-s72{grid-template-columns:minmax(0px, 1fr);gap:12px}
.pwl-fear-card{border-radius:18px;padding:20px}
.pwl-fear-q{font-size:18px}
.pwl-split-even{grid-template-columns:minmax(0px, 1fr);gap:28px;align-items:start}
.pwl-priv-line{font-size:16px}
.pwl-ctrl-card{border-radius:18px;padding:20px 16px}
.pwl-split-faq{grid-template-columns:minmax(0px, 1fr);gap:28px}
.pwl-cta-wrap{padding:56px 16px}
.pwl-cta-band{border-radius:18px;flex-direction:column;text-align:center;gap:16px;padding:24px 20px 32px}
.pwl-cta-pic{transform:unset;animation:unset}
.pwl-s87{width:250px;height:156px}
.pwl-cta-text{flex:unset;align-items:center}
}

/* 6. reduced motion: no animation or transition anywhere on this page; the script also shows finished pictures */
@media (prefers-reduced-motion: reduce){
.pwl-page *,.pwl-page *::before,.pwl-page *::after{animation:none!important;transition:none!important}
.pwl-wait{opacity:1}
}