/* ProfitPal — scroll-controlled iPhone film (homepage). Always dark, whatever the site theme. */
.pf{position:relative;height:100vh;height:100svh;min-height:600px;background:#040507;color:#F4F6FA;isolation:isolate}
.pf-pin{position:relative;height:100%;overflow:hidden}
.pf-bg,.pf-glow,.pf-gl,.pf-fx,.pf-poster{position:absolute;inset:0;width:100%;height:100%;display:block}
.pf-bg{background:radial-gradient(70% 75% at 50% 45%,#10141B 0%,#07090D 58%,#030405 100%)}
.pf-poster{object-fit:cover;transition:opacity .6s ease}
.pf.ready .pf-poster{opacity:0;pointer-events:none}
.pf::before,.pf::after{content:"";position:absolute;left:0;right:0;height:7vh;z-index:3;pointer-events:none}
.pf::before{top:0;background:linear-gradient(var(--bg,#070A10),rgba(4,5,7,0))}
.pf::after{bottom:0;background:linear-gradient(rgba(4,5,7,0),var(--bg,#070A10))}
.pf-ui{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;pointer-events:none}
.pf .pf-t{position:absolute;opacity:0;will-change:opacity,transform}
.pf .pf-c{text-align:center}
.pf .pf-eb{font-size:15px;font-weight:600;letter-spacing:.24em;color:#34D399;text-transform:uppercase}
.pf .pf-h1{font-size:68px;font-weight:750;letter-spacing:-.03em;line-height:1.04;color:#F4F6FA;margin:0}
.pf .pf-h2{font-size:30px;font-weight:500;letter-spacing:-.012em;line-height:1.3;color:#98A3B6;margin:0}
.pf .pf-chips{display:flex;flex-wrap:wrap;gap:12px}
.pf .pf-chip{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 18px;border-radius:20px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035);font-size:17px;font-weight:500;color:#C7CFDC}
.pf .pf-chip i{width:7px;height:7px;border-radius:4px;background:#2BD886;display:inline-block}
.pf .pf-stat .pf-k{font-size:22px;font-weight:700;letter-spacing:.14em}
.pf .pf-stat .pf-v{font-size:19px;color:#98A3B6;margin-top:10px;line-height:1.4;max-width:330px}
.pf .pf-stat .pf-bar{width:36px;height:2px;background:#2BD886;margin-bottom:18px;border-radius:1px}
.pf .pf-logo{display:flex;align-items:center;gap:14px}
.pf .pf-logo img{width:44px;height:44px;border-radius:11px}
.pf .pf-logo span{font-size:26px;font-weight:750;letter-spacing:-.02em}
.pf .pf-logo.pf-lg img{width:64px;height:64px;border-radius:15px}
.pf .pf-logo.pf-lg span{font-size:36px}
.pf .pf-ctas{display:flex;gap:16px}
.pf .pf-btn{display:inline-flex;align-items:center;justify-content:center;height:60px;padding:0 34px;border-radius:30px;font:inherit;font-size:17px;font-weight:700;letter-spacing:.12em;text-decoration:none;cursor:pointer;border:0}
.pf .pf-btn.pf-p{background:#F4F6FA;color:#06080D}
.pf .pf-btn.pf-s{background:transparent;border:1px solid rgba(255,255,255,.22);color:#F4F6FA}
.pf .pf-btn:hover{transform:translateY(-1px)}
.pf .pf-fl{position:absolute;left:0;top:0;transform-origin:0 0;opacity:0;will-change:transform,opacity}

/* desktop layout (1920×1080 frame) */
.pf [data-k=logo1]{left:150px;top:290px}
.pf [data-k=s1e]{left:150px;top:380px}.pf [data-k=s1a]{left:150px;top:420px;width:760px}.pf [data-k=s1b]{left:150px;top:590px}
.pf [data-k=s2e]{left:1090px;top:350px}.pf [data-k=s2a]{left:1090px;top:390px;width:760px}.pf [data-k=s2c]{left:1090px;top:610px;width:640px}
.pf [data-k=s3e]{left:150px;top:370px}.pf [data-k=s3a]{left:150px;top:410px;width:720px}.pf [data-k=s3b]{left:150px;top:580px;width:640px}
.pf [data-k=s4e]{left:150px;top:400px}.pf [data-k=s4a]{left:150px;top:440px;width:640px}.pf [data-k=s4b]{left:150px;top:610px;width:560px}
.pf [data-k=s5e]{left:960px;top:110px}
.pf [data-k=st1]{left:230px;top:360px}.pf [data-k=st2]{left:1340px;top:490px}.pf [data-k=st3]{left:230px;top:620px}
.pf [data-k=flogo]{left:1060px;top:330px}.pf [data-k=ftag]{left:1060px;top:430px;width:720px}
.pf [data-k=fcta]{left:1060px;top:640px}.pf [data-k=furl]{left:1060px;top:740px;font-size:20px;color:#6E7890}

/* phone layout (1080×1920 frame) */
.pf.m .pf-eb{font-size:30px;letter-spacing:.18em}
.pf.m .pf-h1{font-size:84px}
.pf.m .pf-h2{font-size:44px}
.pf.m .pf-chip{font-size:32px;height:70px;padding:0 30px;border-radius:35px}
.pf.m .pf-chip:nth-child(n+5){display:none}
.pf.m .pf-chips{gap:18px}
.pf.m .pf-stat .pf-k{font-size:38px}.pf.m .pf-stat .pf-v{font-size:34px;max-width:900px}
.pf.m .pf-logo img{width:72px;height:72px;border-radius:17px}.pf.m .pf-logo span{font-size:44px}
.pf.m .pf-logo.pf-lg img{width:96px;height:96px;border-radius:22px}.pf.m .pf-logo.pf-lg span{font-size:58px}
.pf.m .pf-btn{height:110px;padding:0 54px;border-radius:55px;font-size:30px}
.pf.m [data-k=logo1]{left:540px;top:200px}
.pf.m [data-k=s1e]{left:90px;top:330px}.pf.m [data-k=s1a]{left:90px;top:385px;width:900px}.pf.m [data-k=s1b]{left:90px;top:590px;width:900px}
.pf.m [data-k=s2e]{left:90px;top:250px}.pf.m [data-k=s2a]{left:90px;top:305px;width:900px}.pf.m [data-k=s2c]{left:90px;top:520px;width:900px}
.pf.m [data-k=s3e]{left:90px;top:250px}.pf.m [data-k=s3a]{left:90px;top:305px;width:900px}.pf.m [data-k=s3b]{left:90px;top:510px;width:900px}
.pf.m [data-k=s4e]{left:90px;top:250px}.pf.m [data-k=s4a]{left:90px;top:305px;width:900px}.pf.m [data-k=s4b]{left:90px;top:510px;width:900px}
.pf.m [data-k=s5e]{left:540px;top:200px;width:900px}
.pf.m [data-k=st1]{left:90px;top:350px}.pf.m [data-k=st2]{left:90px;top:510px}.pf.m [data-k=st3]{left:90px;top:670px}
.pf.m .pf-stat .pf-bar{margin-bottom:14px}
.pf.m [data-k=flogo]{left:90px;top:250px}.pf.m [data-k=ftag]{left:90px;top:380px;width:900px}
.pf.m [data-k=fcta]{left:90px;top:600px}.pf.m [data-k=furl]{left:90px;top:745px;font-size:30px}

/* no WebGL or reduced motion: a plain, readable sequence of stills */
.pf-static{display:none}
.pf.off{height:auto;min-height:0}
.pf.off .pf-pin{display:none}
.pf.off .pf-nav{display:none}
.pf.off::before,.pf.off::after{display:none}
.pf.off .pf-static{display:grid;gap:56px;max-width:1100px;margin:0 auto;padding:110px 24px}
.pf-static figure{margin:0}
.pf-static img{width:100%;height:auto;border-radius:18px;display:block}
.pf-static figcaption{margin-top:16px}
.pf-static .pf-eb{font-size:13px}
.pf-static b{display:block;font-size:clamp(24px,3.2vw,38px);letter-spacing:-.02em;margin-top:6px}
.pf-static .pf-ctas{margin-top:8px}

/* chapter headings: click one and the phone plays its way to that scene */
.pf-nav{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:5;display:flex;gap:8px;padding:6px;border-radius:999px;background:rgba(10,13,19,.72);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);max-width:calc(100% - 24px)}
.pf-ch{--p:0;position:relative;display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 18px;border-radius:999px;border:0;background:transparent;color:#8D97AA;font:inherit;font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap;overflow:hidden;transition:color .25s,background .25s}
.pf-ch .n{font-size:12px;font-weight:700;letter-spacing:.08em;color:#5C6679;transition:color .25s}
.pf-ch:hover{color:#F4F6FA;background:rgba(255,255,255,.05)}
.pf-ch.on{color:#F4F6FA;background:rgba(43,216,134,.13)}
.pf-ch.on .n{color:#34D399}
.pf-ch::after{content:"";position:absolute;left:18px;right:18px;bottom:7px;height:2px;border-radius:1px;background:#2BD886;transform-origin:0 50%;transform:scaleX(var(--p));opacity:.85}
.pf.user .pf-ch::after{display:none}
.pf-ch:focus-visible{outline:2px solid #34D399;outline-offset:2px}
.pf-hint{position:absolute;left:50%;bottom:90px;transform:translateX(-50%);z-index:5;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#5C6679;transition:opacity .4s;pointer-events:none}
.pf.user .pf-hint{opacity:0}
@media (max-width:700px){
  .pf-nav{left:10px;right:10px;transform:none;bottom:14px;overflow-x:auto;scrollbar-width:none;gap:2px;padding:4px;justify-content:space-between}
  .pf-nav::-webkit-scrollbar{display:none}
  .pf-ch{height:40px;padding:0 8px;font-size:12px;flex-shrink:0}
  .pf-ch .n{display:none}
  .pf-ch::after{left:8px;right:8px;bottom:6px}
  .pf-hint{bottom:66px}
  .pf::before,.pf::after{height:5vh}
}