/* Current Pockly 3.0 interface and responsive public site. */
:root{--t2:#A5B8AB;--t3:#879C8E;--border:rgba(210,239,220,.13)}
html{scroll-padding-top:80px}button,input{font:inherit}button,a,input{touch-action:manipulation}a,button,input{caret-color:var(--g)}:focus-visible{outline:2px solid var(--g);outline-offset:5px}[hidden]{display:none!important}
.skip-link{position:fixed;left:16px;top:12px;transform:translateY(-180%);padding:12px 18px;background:var(--g);color:var(--bg);z-index:1000;border-radius:8px}.skip-link:focus{transform:none}
nav{height:68px;padding-inline:max(24px,calc((100vw - 1120px)/2))}.nav-tab{padding:10px 15px}.nav-logo{font-size:20px}.nav-tab.active{color:var(--g)}#app{padding-top:0}
.s-hero{height:auto;min-height:680px;padding:66px 32px 60px}.hero-layout{max-width:1120px;width:100%;display:grid;grid-template-columns:1.2fr 1fr;gap:50px;align-items:center;text-align:left}.hero-content{padding:0}.hero-badge{margin-bottom:24px;font-size:11px;letter-spacing:1px;animation:none}.hero-title{font-size:clamp(48px,6.5vw,78px);line-height:1.13;letter-spacing:-2.5px;margin-bottom:24px;animation:none}.hero-sub{margin:0 0 30px;font-size:16px;line-height:1.9;max-width:450px;animation:none}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.hero-cta{animation:none;border-radius:12px;box-shadow:none;font-size:13px;gap:25px;padding:14px 24px}.hero-cta:hover{transform:none;box-shadow:none;background:#76F2CE}.secondary-cta{display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.025);color:var(--t1);font-size:13px;text-decoration:none;cursor:pointer;min-height:44px}.secondary-cta:hover{background:rgba(255,255,255,.07)}.secondary-cta:disabled{opacity:.4;cursor:default}.hero-facts{display:flex;gap:22px;margin-top:24px;color:var(--t3);font-size:11px}.hero-facts span::before{content:'✓';color:var(--g);margin-right:7px}
.hero-visual{display:flex;flex-direction:column;align-items:center;position:relative;isolation:isolate}.hero-visual .phone-frame{width:230px;transform:rotate(4deg);border-width:7px;border-color:#253C2B;border-radius:38px}.hero-orbit{position:absolute;width:430px;height:430px;max-width:112%;top:50%;transform:translateY(-50%);border:1px solid rgba(0,229,160,.12);border-radius:50%;background:radial-gradient(circle,rgba(0,229,160,.11),transparent 70%);z-index:-1}.hero-orbit::after{content:'';position:absolute;inset:30px;border:1px solid rgba(0,229,160,.08);border-radius:50%}.hero-note{position:absolute;left:0;bottom:70px;border:1px solid #2d553a;border-radius:15px;background:#112719;padding:16px 20px;font-size:12px;box-shadow:0 10px 35px #0005}.hero-note span{display:block;color:var(--t3);font-size:10px;margin-top:6px}.screen-caption{font-size:10px;color:var(--t3);letter-spacing:1px;margin-top:22px}
.feat-section{min-height:0;padding:60px max(32px,calc((100vw - 1000px)/2));gap:80px}.feat-section.center{padding:65px 32px;min-height:0}.feat-h{font-size:clamp(32px,4vw,44px);line-height:1.2}.feat-p{font-size:14px}.feat-detail{margin-top:20px;gap:10px}.feat-detail li{font-size:12px}.feat-visual{max-width:340px}.phone-frame{width:194px;border-width:6px;border-radius:34px;box-shadow:0 20px 50px #0005}.feat-section.center .feat-h br{display:none}.mini-grid{margin-top:30px;gap:14px}.mini-card{padding:22px}.mini-card-icon{font-size:22px}.from-left,.from-right,.from-bottom{opacity:1;transform:none;transition:none}
footer{padding:30px 24px;line-height:1.8}
@media(max-width:900px){.hero-layout{gap:24px;grid-template-columns:1.1fr 1fr}.hero-title{font-size:58px}.hero-note{left:-10px;font-size:11px}.feat-section{gap:40px;padding-inline:32px}.feat-visual{max-width:280px}}
@media(max-width:680px){nav{height:62px;padding:0 16px;gap:10px}.nav-logo{font-size:17px;gap:7px}.logo-box{width:25px;height:25px}.nav-tabs{gap:0}.nav-tab{padding:12px 10px;font-size:11px}.s-hero{min-height:0;padding:42px 24px}.hero-layout{grid-template-columns:1fr;gap:42px}.hero-title{font-size:clamp(48px,12vw,65px);letter-spacing:-2px}.hero-sub{font-size:14px;margin-bottom:25px}.hero-badge{margin-bottom:20px;font-size:10px}.hero-visual{width:min(330px,100%);margin-inline:auto}.hero-visual .phone-frame{width:194px;border-radius:33px}.hero-orbit{width:320px;height:320px;max-width:100%}.hero-note{left:0;bottom:65px;padding:12px 15px}.hero-facts{gap:16px;font-size:10px}.feat-section,.feat-section.reverse{padding:42px 24px;flex-direction:column;gap:24px}.feat-text{width:100%;max-width:420px}.feat-visual{order:0;margin-bottom:0}.feat-section .phone-frame{width:172px;border-radius:29px}.feat-h{font-size:32px}.feat-p{font-size:13px}.feat-detail{gap:8px}.feat-section.center{padding:42px 24px}.mini-grid{grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}.mini-card{padding:17px}.mini-card h3{font-size:12px}.mini-card p{font-size:11px}.mini-card-icon{font-size:20px;margin-bottom:10px}.nav-extra{display:none}}
@media(max-width:360px){.nav-tab{padding:12px 7px;font-size:10px}.hero-facts{gap:10px}.hero-cta,.secondary-cta{padding:12px 16px}.mini-card{padding:14px}.hero-title{font-size:47px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* Fixed navigation and explicit image dimensions must not obscure or stretch content. */
#app{padding-top:68px}.phone-frame img{height:auto}
@media(max-width:680px){#app{padding-top:62px}}

/* Match the current app surfaces; keep Pockly’s green accent. */
:root{--bg:#0A0C0F;--t2:#AEB6C1;--t3:#909AA7;--border:rgba(220,230,245,.13)}nav{background:rgba(10,12,15,.92)}.hero-visual .phone-frame{border-color:#2A303A}.hero-note{background:#141E21;border-color:#34504A}.feature-note{font-size:11px;color:var(--t3);margin-top:16px}.mini-card-icon{color:var(--g);font-weight:600}