@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap");
html,body,body *:not(svg):not(svg *){font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html,body{overflow-x:hidden;width:100%;}
.pt-page{font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#2D3748;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
.pt-page img{max-width:100%;height:auto;display:block;}
.pt-page a{text-decoration:none;color:inherit;transition:color 0.2s;}
.pt-page ul{list-style:none;}
.pt-container{max-width:1200px;margin:0 auto;padding:0 24px;}

/* NAV */
.pt-nav{position:fixed;top:0;left:0;right:0;z-index:9999;background:#fff;border-bottom:1px solid #F0F0F0;}
.pt-nav .pt-container{display:flex;align-items:center;justify-content:space-between;height:72px;}
.pt-nav-logo{flex-shrink:0;}
.pt-nav-links{display:flex;align-items:center;gap:4px;}
.pt-nav-item{position:relative;}
.pt-nav-item>a{display:flex;align-items:center;gap:6px;padding:8px 16px;font-size:15px;font-weight:600;color:#4A5568;border-radius:6px;transition:all 0.2s;}
.pt-nav-item>a:hover{color:#303133;background:#F7F7F8;}
.pt-nav-item>a svg{transition:transform 0.2s;}
.pt-nav-item.active>a svg,.pt-nav-item:hover>a svg{transform:rotate(180deg);}
.pt-nav-actions{display:flex;align-items:center;gap:12px;}
.pt-login{font-size:15px;font-weight:500;color:#4A5568;padding:10px 20px;border:1.5px solid #D1D5DB;border-radius:8px;transition:all 0.2s;}
.pt-login:hover{border-color:#303133;color:#303133;}
.pt-hamburger{display:none;background:none;border:none;cursor:pointer;padding:8px;}
.pt-hamburger svg{display:block;}
.pt-hamburger.active .pt-ham-open{display:none !important;}
.pt-hamburger.active .pt-ham-close{display:block !important;}

/* MEGA MENU */
.pt-mega{position:absolute;top:calc(100% + 12px);left:0;transform:translateY(8px);width:780px;background:#fff;border:1px solid #E8E8ED;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,0.12),0 0 0 1px rgba(0,0,0,0.03);padding:0;opacity:0;visibility:hidden;transition:all 0.25s cubic-bezier(0.16,1,0.3,1);z-index:100;pointer-events:none;}
.pt-mega::before{content:'';position:absolute;top:-8px;left:32px;width:16px;height:16px;background:#fff;border-top:1px solid #E8E8ED;border-left:1px solid #E8E8ED;transform:rotate(45deg);border-radius:3px 0 0 0;z-index:1;}
.pt-mega.pt-mega-sm{width:560px;}
.pt-nav-item:nth-child(n+3) .pt-mega{left:auto;right:0;}
.pt-nav-item:nth-child(n+3) .pt-mega::before{left:auto;right:32px;}
.pt-nav-item.active .pt-mega{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
.pt-nav-item.active>a{color:#303133;background:#F7F7F8;}
.pt-mega-inner{display:flex;padding:8px;}
.pt-mega-col{padding:20px;}
.pt-mega-col.pt-mega-products{flex:1;border-right:1px solid #F0F0F0;}
.pt-mega-col.pt-mega-promo{width:240px;display:flex;flex-direction:column;}
.pt-mega-heading{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#9CA3AF;margin-bottom:16px;padding:0 8px;}
.pt-mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;}
.pt-mega-grid.pt-mega-grid-2{grid-template-columns:1fr 1fr;}
.pt-mega-link{display:flex;align-items:flex-start;gap:12px;padding:12px;border-radius:10px;transition:all 0.15s;}
.pt-mega-link:hover{background:#F7F8FA;}
.pt-mega-icon{width:40px;height:40px;background:#EEFAF7;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.15s;}
.pt-mega-link:hover .pt-mega-icon{background:#D5F5EE;transform:scale(1.05);}
.pt-mega-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.pt-mega-text span{font-size:14px;font-weight:600;color:#303133;white-space:nowrap;}
.pt-mega-text small{font-size:12px;color:#64748B;line-height:1.4;}
.pt-mega-promo-card{background:#F7F8FA;border-radius:12px;padding:24px;flex:1;display:flex;flex-direction:column;gap:12px;}
.pt-mega-promo-card .pt-mega-promo-icon{width:48px;height:48px;background:#EEFAF7;border-radius:12px;display:flex;align-items:center;justify-content:center;}
.pt-mega-promo-card h4{font-size:16px;font-weight:700;color:#303133;margin:0;}
.pt-mega-promo-card p{font-size:13px;color:#64748B;line-height:1.6;margin:0;flex:1;}
.pt-mega-promo-card .pt-btn{margin-top:4px;align-self:flex-start;}
.pt-btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 32px;border-radius:8px;font-size:16px;font-weight:600;border:2px solid transparent;transition:all 0.25s;cursor:pointer;font-family:'Nunito',sans-serif;}
.pt-btn-sm{padding:10px 24px;font-size:14px;}
.pt-btn-primary{background:#22A58E;color:#fff;border-color:#22A58E;}
.pt-btn-primary:hover{background:#1B8F7A;border-color:#1B8F7A;transform:translateY(-1px);box-shadow:0 4px 12px rgba(34,165,142,0.3);}
.pt-btn-secondary{background:#fff;color:#303133;border-color:#D1D5DB;}
.pt-btn-secondary:hover{border-color:#303133;transform:translateY(-1px);}
.pt-btn-dark{background:#303133;color:#fff;border-color:#303133;}
.pt-btn-dark:hover{background:#2D2D44;transform:translateY(-1px);box-shadow:0 4px 12px rgba(26,26,46,0.3);}
.pt-btn-ghost{background:transparent;color:#22A58E;border-color:transparent;padding:14px 8px;}
.pt-btn-ghost:hover{color:#1B8F7A;}
.pt-btn-white{background:#fff;color:#303133 !important;border-color:#fff;}
.pt-btn-white:hover{background:#F7F7F8;transform:translateY(-1px);color:#303133 !important;}

/* HERO (homepage) */
.pt-hero{padding:120px 0 80px;background:linear-gradient(180deg,#FAFAFA 0%,#FFFFFF 100%);overflow:hidden;}
.pt-hero .pt-container{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.pt-hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;background:#EEFAF7;border:1px solid #B2E5D9;border-radius:100px;font-size:14px;font-weight:500;color:#22A58E;margin-bottom:24px;}
.pt-hero h1{font-size:52px;font-weight:800;line-height:1.1;color:#303133;margin-bottom:20px;letter-spacing:-0.5px;}
.pt-hero-sub{font-size:19px;color:#64748B;margin-bottom:36px;line-height:1.7;}
.pt-hero-ctas{display:flex;gap:16px;margin-bottom:32px;flex-wrap:wrap;}
.pt-hero-switch{display:flex;align-items:center;gap:8px;font-size:14px;color:#64748B;}
.pt-hero-switch a{color:#22A58E;font-weight:600;}
.pt-device{position:relative;}
.pt-device-frame{background:#303133;border-radius:20px;padding:16px;box-shadow:0 30px 80px rgba(26,26,46,0.25);transform:perspective(1000px) rotateY(-5deg) rotateX(2deg);}
.pt-screen{background:#F0F2F5;border-radius:12px;overflow:hidden;}
.pt-topbar{background:#22A58E;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;}
.pt-topbar span{color:#fff;font-size:12px;font-weight:600;}
.pt-screen-body{display:grid;grid-template-columns:1fr 200px;min-height:280px;}
.pt-cats{padding:16px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:10px;}
.pt-cat{background:#fff;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 8px;box-shadow:0 1px 3px rgba(0,0,0,0.06);gap:6px;}
.pt-cat-e{font-size:24px;}
.pt-cat-n{font-size:10px;font-weight:600;color:#4A5568;}
.pt-sb{background:#fff;border-left:1px solid #E5E7EB;padding:12px;display:flex;flex-direction:column;gap:8px;}
.pt-sb-item{display:flex;justify-content:space-between;font-size:11px;padding:8px;background:#F9FAFB;border-radius:6px;}
.pt-sb-name{color:#4A5568;font-weight:500;}
.pt-sb-price{color:#303133;font-weight:700;}
.pt-sb-total{margin-top:auto;padding:10px;background:#22A58E;border-radius:8px;color:#fff;font-size:13px;font-weight:700;text-align:center;}
.pt-floating{position:absolute;bottom:-30px;left:-20px;background:#fff;border-radius:16px;padding:16px 20px;box-shadow:0 12px 40px rgba(0,0,0,0.12);display:flex;align-items:center;gap:14px;z-index:10;}
.pt-fl-icon{width:48px;height:48px;background:#ECFDF5;border-radius:12px;display:flex;align-items:center;justify-content:center;}
.pt-fl-val{font-size:20px;font-weight:800;color:#303133;}
.pt-fl-label{font-size:12px;color:#64748B;}

/* TRUST */
.pt-trust{padding:64px 0;background:#fff;border-top:1px solid #F0F0F0;}
.pt-trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;}
.pt-trust-item{text-align:center;padding:24px 16px;}
.pt-trust-icon{width:56px;height:56px;margin:0 auto 16px;background:#EEFAF7;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:28px;}
.pt-trust-item h3{font-size:17px;font-weight:700;color:#303133;margin-bottom:6px;}
.pt-trust-item p{font-size:14px;color:#64748B;}

/* INDUSTRY */
.pt-industry{padding:100px 0;background:#1A1A2E;color:#fff;text-align:center;}
.pt-industry h2{font-size:40px;font-weight:800;margin-bottom:12px;letter-spacing:-0.5px;}
.pt-industry-sub{font-size:18px;color:rgba(255,255,255,0.7);margin-bottom:40px;}
.pt-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:60px;}
.pt-pill{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:100px;font-size:15px;font-weight:500;color:#fff;cursor:pointer;transition:all 0.25s;outline:none;font-family:inherit;}
.pt-pill:hover,.pt-pill.active{background:#22A58E;border-color:#22A58E;}
.pt-showcase{display:grid;grid-template-columns:280px 1fr;gap:40px;text-align:left;max-width:960px;margin:0 auto;}
.pt-tabs{display:flex;flex-direction:column;gap:4px;}
.pt-tab{padding:14px 20px;border-radius:10px;font-size:15px;font-weight:500;color:rgba(255,255,255,0.6);cursor:pointer;transition:all 0.2s;border-left:3px solid transparent;}
.pt-tab:hover{color:#fff;background:rgba(255,255,255,0.05);}
.pt-tab.active{color:#fff;background:rgba(255,255,255,0.08);border-left-color:#22A58E;}
.pt-preview{background:rgba(255,255,255,0.05);border-radius:16px;padding:32px;}
.pt-prev-header{display:flex;align-items:center;gap:16px;margin-bottom:20px;}
.pt-prev-icon{width:52px;height:52px;background:rgba(34,165,142,0.15);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;}
.pt-prev-header h3{font-size:20px;font-weight:700;margin:0;}
.pt-prev-header p{font-size:14px;color:rgba(255,255,255,0.6);margin:0;}
.pt-prev-feats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px;}
.pt-prev-feat{display:flex;align-items:center;gap:10px;padding:12px 16px;background:rgba(255,255,255,0.05);border-radius:8px;font-size:14px;color:rgba(255,255,255,0.8);}

/* FEATURES */
.pt-features{padding:100px 0;background:#fff;}
.pt-features .pt-container{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.pt-features h2{font-size:40px;font-weight:800;color:#303133;line-height:1.15;margin-bottom:40px;letter-spacing:-0.5px;word-wrap:break-word;overflow-wrap:break-word;}
.pt-feat-block{margin-bottom:32px;padding-left:24px;border-left:3px solid #E5E7EB;transition:border-color 0.3s;}
.pt-feat-block:first-child{border-left-color:#22A58E;}
.pt-feat-block:hover{border-left-color:#22A58E;}
.pt-feat-block h3{font-size:18px;font-weight:700;color:#303133;margin-bottom:6px;}
.pt-feat-block p{font-size:15px;color:#64748B;line-height:1.7;}
.pt-feat-ctas{display:flex;gap:16px;margin-top:40px;flex-wrap:wrap;}
.pt-dash{background:#F8FAFC;border-radius:20px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.08);padding:32px;}
.pt-dash-inner{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.08);}
.pt-dash-hd{background:#303133;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;}
.pt-dash-dots{display:flex;gap:6px;}
.pt-dash-dots span{width:10px;height:10px;border-radius:50%;display:inline-block;}
.pt-dash-dots span:nth-child(1){background:#EF4444;}
.pt-dash-dots span:nth-child(2){background:#F59E0B;}
.pt-dash-dots span:nth-child(3){background:#22C55E;}
.pt-dash-title{color:#fff;font-size:13px;font-weight:600;}
.pt-dash-body{padding:24px;}
.pt-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px;}
.pt-stat{padding:16px;background:#F9FAFB;border-radius:10px;}
.pt-stat-label{font-size:11px;color:#64748B;font-weight:500;text-transform:uppercase;letter-spacing:0.5px;}
.pt-stat-val{font-size:22px;font-weight:800;color:#303133;margin-top:4px;}
.pt-stat-chg{font-size:11px;color:#059669;font-weight:600;margin-top:2px;}
.pt-chart{height:120px;background:linear-gradient(180deg,#EEFAF7,#fff);border-radius:10px;position:relative;overflow:hidden;}
.pt-chart svg{position:absolute;bottom:0;left:0;width:100%;}

/* PRODUCTS SECTION */
.pt-products{padding:100px 0;background:#FAFAFA;}
.pt-sec-hd{text-align:center;max-width:640px;margin:0 auto 60px;}
.pt-sec-hd h2{font-size:40px;font-weight:800;color:#303133;margin-bottom:16px;letter-spacing:-0.5px;}
.pt-sec-hd p{font-size:18px;color:#64748B;}
.pt-prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.pt-prod-card{background:#fff;border-radius:16px;padding:36px 28px;border:1px solid #F0F0F0;display:flex;flex-direction:column;transition:all 0.3s;}
.pt-prod-card:hover{border-color:#22A58E;box-shadow:0 12px 40px rgba(34,165,142,0.08);transform:translateY(-4px);}
.pt-prod-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;font-size:24px;}
.pt-prod-card h3{font-size:19px;font-weight:700;color:#303133;margin-bottom:10px;}
.pt-prod-card p{font-size:14px;color:#64748B;line-height:1.7;flex:1;}
.pt-prod-link{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:#22A58E;margin-top:20px;transition:gap 0.2s;}
.pt-prod-link:hover{gap:10px;}

/* TESTIMONIAL */
.pt-testi{padding:100px 0;background:#fff;}
.pt-testi .pt-container{display:grid;grid-template-columns:300px 1fr;gap:60px;align-items:center;}
.pt-testi-img{width:100%;height:360px;border-radius:24px;overflow:hidden;background:linear-gradient(135deg,#EEFAF7,#B2E5D9);display:flex;align-items:center;justify-content:center;}
.pt-testi-img img{width:100%;height:100%;object-fit:cover;}
.pt-testi-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:#ECFDF5;border:1px solid #A7F3D0;border-radius:100px;font-size:13px;font-weight:600;color:#059669;margin-bottom:24px;}
.pt-testi blockquote{font-size:28px;font-weight:700;color:#303133;line-height:1.35;margin:0 0 32px;letter-spacing:-0.2px;}
.pt-author{display:flex;align-items:center;gap:16px;}
.pt-avatar{width:52px;height:52px;background:#F0F0F0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:#64748B;}
.pt-author-name{font-size:16px;font-weight:700;color:#303133;}
.pt-author-role{font-size:14px;color:#64748B;}

/* CTA */
.pt-cta{padding:100px 0;background:radial-gradient(circle at 0% 0%,#0CB4CE 9%,#006CFF 48%,#6442FF 91%);position:relative;overflow:hidden;}
.pt-cta::before{content:'';position:absolute;top:-50%;right:-20%;width:600px;height:600px;background:rgba(255,255,255,0.05);border-radius:50%;}
.pt-cta::after{content:'';position:absolute;bottom:-30%;left:-10%;width:400px;height:400px;background:rgba(255,255,255,0.03);border-radius:50%;}
.pt-cta .pt-container{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:1;}
.pt-cta-text{color:#fff;}
.pt-cta-text h2{font-size:40px;font-weight:800;margin-bottom:16px;letter-spacing:-0.5px;}
.pt-cta-text p{font-size:18px;color:rgba(255,255,255,0.85);margin-bottom:32px;line-height:1.7;}
.pt-cta-badges{display:flex;gap:16px;flex-wrap:wrap;}
.pt-cta-bdg{background:rgba(255,255,255,0.15);border-radius:12px;padding:12px 16px;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#fff;}
.pt-form{background:#fff;border-radius:20px;padding:40px;box-shadow:0 20px 60px rgba(0,0,0,0.15);}
.pt-form h3{font-size:24px;font-weight:700;color:#303133;margin-bottom:28px;}
.pt-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;}
.pt-form-group{margin-bottom:16px;}
.pt-form input,.pt-form select{width:100%;padding:14px 16px;border:1.5px solid #E5E7EB;border-radius:10px;font-size:15px;font-family:'Nunito',sans-serif;color:#303133;background:#fff;outline:none;box-sizing:border-box;}
.pt-form input:focus,.pt-form select:focus{border-color:#22A58E;box-shadow:0 0 0 3px rgba(34,165,142,0.1);}
.pt-form input::placeholder{color:#9CA3AF;}
.pt-form select{color:#9CA3AF;}
.pt-form-note{text-align:center;font-size:12px;color:#9CA3AF;margin-top:12px;}
.pt-form-note a{color:#22A58E;text-decoration:underline;}

/* Ninja Forms Styling */
.nf-form-cont .nf-form-title h3{display:none;}
.nf-form-cont .nf-before-form-content{display:none;}
.nf-form-cont .nf-field-label label{font-size:15px;font-weight:600;color:#303133;margin-bottom:6px;}
.nf-form-cont input[type="text"],.nf-form-cont input[type="email"],.nf-form-cont input[type="tel"],.nf-form-cont select,.nf-form-cont textarea{width:100%;padding:14px 16px !important;border:1.5px solid #E5E7EB !important;border-radius:10px !important;font-size:15px !important;font-family:'Nunito',sans-serif !important;color:#303133 !important;background:#fff !important;outline:none;box-sizing:border-box;}
.nf-form-cont input:focus,.nf-form-cont select:focus,.nf-form-cont textarea:focus{border-color:#22A58E !important;box-shadow:0 0 0 3px rgba(34,165,142,0.1) !important;}
.nf-form-cont input::placeholder,.nf-form-cont textarea::placeholder{color:#9CA3AF !important;}
.nf-form-cont .submit-wrap input[type="button"],.nf-form-cont .submit-wrap input[type="submit"],.nf-form-cont input.ninja-forms-field[type="submit"]{display:inline-flex;align-items:center;justify-content:center;padding:16px 40px !important;background:#22A58E !important;color:#fff !important;border:none !important;border-radius:12px !important;font-size:16px !important;font-weight:700 !important;font-family:'Nunito',sans-serif !important;cursor:pointer;transition:background 0.2s,transform 0.2s;width:100%;}
.nf-form-cont .submit-wrap input:hover,.nf-form-cont input.ninja-forms-field[type="submit"]:hover{background:#1B8A76 !important;transform:translateY(-1px);}
.nf-form-cont .nf-error-msg{color:#EF4444;font-size:13px;}
.nf-form-cont .nf-field-element{margin-bottom:4px;}
.nf-form-cont .nf-pass.field-wrap .nf-field-element:after{display:none;}

/* SOCIAL PROOF */
.pt-social{padding:80px 0;background:#FAFAFA;text-align:center;}
.pt-social h2{font-size:32px;font-weight:800;color:#303133;margin-bottom:12px;}
.pt-social-sub{font-size:16px;color:#64748B;margin-bottom:48px;}
.pt-proof-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:64px;}
.pt-proof-card{background:#fff;border-radius:16px;overflow:hidden;border:1px solid #F0F0F0;text-align:left;}
.pt-proof-img{height:200px;background:linear-gradient(135deg,#F0F2F5,#E5E7EB);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.pt-proof-img img{width:100%;height:100%;object-fit:cover;}
.pt-proof-body{padding:24px;}
.pt-proof-body h3{font-size:18px;font-weight:700;color:#303133;margin-bottom:8px;}
.pt-proof-body p{font-size:14px;color:#64748B;line-height:1.7;}
.pt-logos{padding:48px 0 0;border-top:1px solid #E5E7EB;}
.pt-logos-label{font-size:13px;text-transform:uppercase;letter-spacing:1px;color:#9CA3AF;font-weight:600;margin-bottom:32px;}
.pt-logos-row{display:flex;justify-content:center;align-items:center;gap:48px;flex-wrap:wrap;}
.pt-logo-ph{width:120px;height:48px;background:#E5E7EB;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#9CA3AF;opacity:0.6;}

/* FOOTER */
.pt-footer{padding:72px 0 0;background:#303133;color:#fff;}
.pt-footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,0.1);}
.pt-footer-brand p{font-size:14px;color:rgba(255,255,255,0.6);line-height:1.7;margin-bottom:16px;}
.pt-footer-addr{font-size:13px;color:rgba(255,255,255,0.5);line-height:1.8;}
.pt-footer-col h4{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:20px;color:rgba(255,255,255,0.9);}
.pt-footer-col a{display:block;font-size:14px;color:rgba(255,255,255,0.55);padding:6px 0;transition:color 0.2s;}
.pt-footer-col a:hover{color:#fff;}
.pt-footer-bottom{padding:24px 0;display:flex;align-items:center;justify-content:space-between;}
.pt-footer-bottom p{font-size:12px;color:rgba(255,255,255,0.4);}
.pt-footer-links{display:flex;gap:24px;}
.pt-footer-links a{font-size:12px;color:rgba(255,255,255,0.4);}
.pt-footer-links a:hover{color:rgba(255,255,255,0.7);}

/* ===================== PAGE-LEVEL STYLES ===================== */

/* PAGE HERO (used on all subpages) */
.pt-page-hero{padding:140px 0 80px;background:linear-gradient(180deg,#FAFAFA 0%,#FFFFFF 100%);overflow:hidden;}
.pt-page-hero .pt-container{max-width:800px;text-align:center;}
.pt-page-hero .pt-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;background:#EEFAF7;border:1px solid #B2E5D9;border-radius:100px;font-size:13px;font-weight:600;color:#22A58E;margin-bottom:20px;}
.pt-page-hero h1{font-size:48px;font-weight:800;line-height:1.1;color:#303133;margin-bottom:20px;letter-spacing:-0.5px;}
.pt-page-hero p{font-size:19px;color:#64748B;margin-bottom:32px;line-height:1.7;}
.pt-page-hero-ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
.pt-page-hero-split .pt-container{max-width:1200px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;text-align:left;}
.pt-hero-media img{width:100%;height:auto;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,0.08);display:block;}

/* FEATURE HIGHLIGHTS (icon cards row) */
.pt-highlights{padding:80px 0;background:#fff;}
.pt-highlights-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;}
.pt-highlight{text-align:center;padding:32px 20px;}
.pt-highlight-icon{width:64px;height:64px;margin:0 auto 16px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:28px;}
.pt-highlight h3{font-size:17px;font-weight:700;color:#303133;margin-bottom:8px;}
.pt-highlight p{font-size:14px;color:#64748B;line-height:1.6;}

/* FEATURE ROWS (alternating image+text) */
.pt-feature-row{padding:80px 0;}
.pt-feature-row:nth-child(even){background:#FAFAFA;}
.pt-feature-row .pt-container{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.pt-feature-row.reverse .pt-container{direction:rtl;}
.pt-feature-row.reverse .pt-container>*{direction:ltr;}
.pt-feature-img{background:#F0F2F5;border-radius:20px;height:360px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
/* product screengrabs: never crop a UI — letterbox it onto a soft panel instead */
.pt-feature-img.pt-shot{height:auto;aspect-ratio:16/10;padding:20px;background:linear-gradient(165deg,#F5F8FA 0%,#E7EDF3 100%);border:1px solid rgba(16,24,40,.06);}
.pt-feature-img.pt-shot img{object-fit:contain;border-radius:10px;filter:drop-shadow(0 12px 26px rgba(16,24,40,.16));}
.pt-feature-img svg{opacity:0.3;}
.pt-feature-img img{width:100%;height:100%;object-fit:cover;}
.pt-feature-text h2{font-size:32px;font-weight:800;color:#303133;margin-bottom:16px;letter-spacing:-0.3px;}
.pt-feature-text p{font-size:16px;color:#64748B;line-height:1.7;margin-bottom:16px;}
.pt-feature-list{margin-top:20px;}
.pt-feature-list li{display:flex;align-items:flex-start;gap:12px;padding:8px 0;font-size:15px;color:#4A5568;}
.pt-feature-list li::before{content:"\2713";color:#22A58E;font-weight:700;flex-shrink:0;}
.pt-check{color:#22A58E;font-weight:700;margin-right:8px;}

/* CTA BAND (simpler version for subpages) */
.pt-cta-band{padding:80px 0;background:radial-gradient(circle at 0% 0%,#0CB4CE 9%,#006CFF 48%,#6442FF 91%);text-align:center;color:#fff;position:relative;overflow:hidden;}
.pt-cta-band::before{content:'';position:absolute;top:-40%;right:-15%;width:500px;height:500px;background:rgba(255,255,255,0.04);border-radius:50%;}
.pt-cta-band h2{font-size:36px;font-weight:800;margin-bottom:16px;position:relative;z-index:1;}
.pt-cta-band p{font-size:18px;color:#fff;margin-bottom:32px;max-width:520px;margin-left:auto;margin-right:auto;position:relative;z-index:1;}
.pt-cta-band .pt-btn{position:relative;z-index:1;}

/* PRICING */
.pt-pricing{padding:80px 0;background:#fff;}
.pt-pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1100px;margin:0 auto;}
.pt-pricing-card{background:#fff;border-radius:20px;padding:40px 32px;border:2px solid #F0F0F0;display:flex;flex-direction:column;}
.pt-pricing-card.featured{border-color:#22A58E;box-shadow:0 12px 40px rgba(34,165,142,0.12);position:relative;}
.pt-pricing-card.featured::before{content:'Most Popular';position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:#22A58E;color:#fff;font-size:13px;font-weight:700;padding:6px 20px;border-radius:100px;}
.pt-pricing-name{font-size:20px;font-weight:700;color:#303133;margin-bottom:8px;}
.pt-pricing-desc{font-size:14px;color:#64748B;margin-bottom:24px;line-height:1.6;}
.pt-pricing-price{font-size:48px;font-weight:800;color:#303133;margin-bottom:4px;}
.pt-pricing-price span{font-size:16px;font-weight:500;color:#64748B;}
.pt-pricing-period{font-size:14px;color:#64748B;margin-bottom:32px;}
.pt-pricing-features{list-style:none;margin-bottom:32px;flex:1;}
.pt-pricing-features li{display:flex;align-items:flex-start;gap:10px;padding:10px 0;font-size:14px;color:#4A5568;border-bottom:1px solid #F7F7F8;}
.pt-pricing-features li::before{content:"\2713";color:#22A58E;font-weight:700;flex-shrink:0;}
.pt-addon-card:hover{border-color:#22A58E;box-shadow:0 12px 40px rgba(34,165,142,0.08);transform:translateY(-4px);}

/* CONTACT FORM */
.pt-contact-section{padding:80px 0;background:#fff;}
.pt-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;}
.pt-contact-info h2{font-size:32px;font-weight:800;color:#303133;margin-bottom:16px;}
.pt-contact-info p{font-size:16px;color:#64748B;line-height:1.7;margin-bottom:32px;}
.pt-contact-detail{display:flex;align-items:flex-start;gap:16px;margin-bottom:24px;}
.pt-contact-detail-icon{width:48px;height:48px;background:#EEFAF7;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
.pt-contact-detail h4{font-size:15px;font-weight:700;color:#303133;margin-bottom:4px;}
.pt-contact-detail p{font-size:14px;color:#64748B;margin:0;}

/* FAQ */
.pt-faq{padding:80px 0;background:#FAFAFA;}
.pt-faq .pt-sec-hd{margin-bottom:40px;}
.pt-faq-list{max-width:800px;margin:0 auto;}
.pt-faq-item{background:#fff;border:1px solid #E5E7EB;border-radius:12px;margin-bottom:12px;overflow:hidden;}
.pt-faq-q{padding:20px 24px;font-size:16px;font-weight:700;color:#303133;cursor:pointer;display:flex;align-items:center;justify-content:space-between;}
.pt-faq-q::after{content:"\002B";font-size:20px;color:#64748B;transition:transform 0.2s;}
.pt-faq-item.open .pt-faq-q::after{transform:rotate(45deg);}
.pt-faq-a{padding:0 24px 20px;font-size:15px;color:#64748B;line-height:1.7;display:none;}
.pt-faq-item.open .pt-faq-a{display:block;}

/* INTEGRATIONS GRID */
.pt-integrations-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:48px;}
.pt-integration-card{background:#fff;border:1px solid #F0F0F0;border-radius:16px;padding:32px;text-align:center;transition:all 0.3s;}
.pt-integration-card:hover{border-color:#22A58E;box-shadow:0 8px 30px rgba(34,165,142,0.08);transform:translateY(-2px);}
.pt-integration-icon{width:64px;height:64px;margin:0 auto 16px;background:#F9FAFB;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:28px;}
.pt-integration-card h3{font-size:16px;font-weight:700;color:#303133;margin-bottom:6px;}
.pt-integration-card p{font-size:13px;color:#64748B;}

/* BLOG GRID */
.pt-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;}
.pt-blog-card{background:#fff;border:1px solid #F0F0F0;border-radius:16px;overflow:hidden;transition:all 0.3s;}
.pt-blog-card:hover{box-shadow:0 12px 40px rgba(0,0,0,0.06);transform:translateY(-2px);}
.pt-blog-thumb{height:200px;background:linear-gradient(135deg,#F0F2F5,#E5E7EB);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.pt-blog-thumb img{width:100%;height:100%;object-fit:cover;}
.pt-blog-body{padding:24px;}
.pt-blog-tag{display:inline-block;font-size:12px;font-weight:600;color:#22A58E;background:#EEFAF7;padding:4px 12px;border-radius:100px;margin-bottom:12px;}
.pt-blog-body h3{font-size:18px;font-weight:700;color:#303133;margin-bottom:8px;line-height:1.4;}
.pt-blog-body p{font-size:14px;color:#64748B;line-height:1.6;margin-bottom:12px;}
.pt-blog-meta{font-size:13px;color:#9CA3AF;}

/* LEGAL PAGES */
.pt-legal{padding:60px 0 100px;background:#fff;}
.pt-legal .pt-container{max-width:800px;}
.pt-legal h2{font-size:24px;font-weight:700;color:#303133;margin:40px 0 16px;}
.pt-legal h3{font-size:18px;font-weight:700;color:#303133;margin:24px 0 12px;}
.pt-legal p{font-size:15px;color:#4A5568;line-height:1.8;margin-bottom:16px;}
.pt-legal ul{margin:12px 0 20px 20px;}
.pt-legal ul li{font-size:15px;color:#4A5568;line-height:1.8;list-style:disc;margin-bottom:8px;}

/* ABOUT SECTION */
.pt-about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding:60px 0;text-align:center;}
.pt-about-stat-val{font-size:48px;font-weight:800;color:#22A58E;}
.pt-about-stat-label{font-size:14px;color:#64748B;margin-top:4px;}
.pt-team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:48px;}
.pt-team-card{text-align:center;padding:32px 24px;background:#fff;border-radius:16px;border:1px solid #F0F0F0;}
.pt-team-avatar{width:80px;height:80px;margin:0 auto 16px;background:#EEFAF7;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;color:#22A58E;}
.pt-team-card h3{font-size:16px;font-weight:700;color:#303133;margin-bottom:4px;}
.pt-team-card p{font-size:14px;color:#64748B;}

/* RESPONSIVE */
@media(max-width:1024px){
.pt-hero .pt-container,.pt-features .pt-container,.pt-testi .pt-container,.pt-cta .pt-container,.pt-feature-row .pt-container,.pt-contact-grid,.pt-page-hero-split .pt-container{grid-template-columns:1fr;gap:48px;}
.pt-hero h1{font-size:40px;}
.pt-page-hero h1{font-size:38px;}
.pt-device-frame{transform:none;max-width:500px;margin:0 auto;}
.pt-showcase{grid-template-columns:1fr;}
.pt-footer-grid{grid-template-columns:1fr 1fr;gap:32px;}
.pt-footer-brand{grid-column:1/-1;}
.pt-pricing-grid{grid-template-columns:1fr;}
.pt-pricing-card{max-width:400px;margin:0 auto;width:100%;}
.pt-highlights-grid{grid-template-columns:repeat(2,1fr);}
.pt-integrations-grid{grid-template-columns:repeat(2,1fr);}
.pt-feature-row.reverse .pt-container{direction:ltr;}
.pt-about-stats{grid-template-columns:repeat(2,1fr);}
.pt-addons-grid{grid-template-columns:repeat(2,1fr) !important;}
}
@media(max-width:768px){
.pt-nav-links,.pt-login{display:none;}
.pt-nav-links.open{display:flex;flex-direction:column;position:absolute;top:72px;left:0;right:0;background:#fff;border-bottom:1px solid #E8E8ED;box-shadow:0 12px 40px rgba(0,0,0,0.1);padding:16px 24px;gap:4px;max-height:calc(100vh - 72px);overflow-y:auto;}
.pt-nav-links.open .pt-nav-item{width:100%;}
.pt-nav-links.open .pt-nav-item>a{padding:12px 8px;font-size:16px;}
.pt-nav-links.open .pt-mega{position:static;width:100% !important;transform:none !important;opacity:1 !important;visibility:visible !important;pointer-events:auto !important;box-shadow:none;border:none;border-radius:8px;background:#F7F8FA;margin-top:4px;display:none;}
.pt-nav-links.open .pt-nav-item.open .pt-mega{display:block;}
.pt-nav-links.open .pt-mega::before{display:none;}
.pt-nav-links.open .pt-mega-inner{flex-direction:column;padding:0;}
.pt-nav-links.open .pt-mega-col{padding:12px 16px;}
.pt-nav-links.open .pt-mega-col.pt-mega-products{border-right:none;border-bottom:1px solid #E5E7EB;}
.pt-nav-links.open .pt-mega-col.pt-mega-promo{width:100%;}
.pt-nav-links.open .pt-mega-grid{grid-template-columns:1fr;}
.pt-hamburger{display:block;}
.pt-nav .pt-container{padding:0 16px;}
.pt-btn-sm{padding:8px 16px;font-size:13px;}
.pt-features h2{font-size:28px;}
.pt-feat-block h3{font-size:16px;}
.pt-feat-block p{font-size:14px;}
.pt-feat-ctas{flex-direction:column;}
.pt-hero{padding:100px 0 60px;}.pt-hero h1{font-size:32px;}
.pt-hero-sub{font-size:16px;}
.pt-addons-grid{grid-template-columns:1fr !important;}
.pt-online-features{grid-template-columns:1fr !important;}
.pt-hero .pt-container>*,.pt-features .pt-container>*,.pt-cta .pt-container>*,.pt-testi .pt-container>*{min-width:0;overflow:hidden;}
.pt-device-frame{max-width:100%;}
.pt-page-hero{padding:110px 0 60px;}.pt-page-hero h1{font-size:30px;}
.pt-hero-ctas,.pt-page-hero-ctas{flex-direction:column;}
.pt-trust-grid{grid-template-columns:repeat(2,1fr);gap:20px;}
.pt-prod-grid,.pt-proof-cards,.pt-blog-grid{grid-template-columns:1fr;}
.pt-industry h2,.pt-features h2,.pt-cta-text h2,.pt-sec-hd h2,.pt-cta-band h2{font-size:30px;}
.pt-testi blockquote{font-size:20px;}
.pt-footer-grid{grid-template-columns:1fr;}
.pt-footer-bottom{flex-direction:column;gap:12px;text-align:center;}
.pt-logos-row{gap:24px;}.pt-logo-ph{width:100px;}
.pt-prev-feats{grid-template-columns:1fr;}
.pt-testi-img{height:280px;}
.pt-highlights-grid{grid-template-columns:1fr;}
.pt-integrations-grid{grid-template-columns:1fr;}
.pt-about-stats{grid-template-columns:1fr;}
.pt-team-grid{grid-template-columns:1fr;}
.pt-form-row{grid-template-columns:1fr;}
}

/* === Trendy primary button: pill + gradient glow (added) === */
.pt-btn{border-radius:999px;letter-spacing:0.2px;transition:transform .25s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease;}
.pt-btn-primary{background:linear-gradient(135deg,#28BBA0 0%,#1B8F7A 100%);color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(34,165,142,.35);}
.pt-btn-primary:hover{background:linear-gradient(135deg,#31C9AC 0%,#1F9E86 100%);border-color:transparent;transform:translateY(-2px);box-shadow:0 12px 30px rgba(34,165,142,.45);}
.pt-btn-primary:active{transform:translateY(0);box-shadow:0 4px 12px rgba(34,165,142,.35);}
.pt-btn-primary:focus-visible{outline:3px solid rgba(34,165,142,.35);outline-offset:2px;}
/* keep the light CTA-band button consistent with the new pill shape */
.pt-btn-white{box-shadow:0 6px 18px rgba(0,0,0,.12);}
.pt-btn-white:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.18);}

/* ============================================================
   MODERN REFRESH — depth, gradients, motion (added, revertible)
   ============================================================ */
:root{
  --ptm-grad:linear-gradient(135deg,#2BC0A4 0%,#1B8F7A 100%);
  --ptm-card-sh:0 10px 30px rgba(16,24,40,.06),0 2px 8px rgba(16,24,40,.04);
  --ptm-card-sh-hover:0 22px 48px rgba(34,165,142,.16);
  --ptm-radius:22px;
}
html{scroll-behavior:smooth;}
.pt-page ::selection{background:rgba(34,165,142,.22);color:#0f3d34;}

/* Display font for headings + big numbers */
.pt-hero h1,.pt-page-hero h1,.pt-features h2,.pt-sec-hd h2,.pt-industry h2,
.pt-cta-text h2,.pt-cta-band h2,.pt-feature-text h2,.pt-testi blockquote,
.pt-contact-info h2,.pt-prod-card h3,.pt-highlight h3,.pt-pricing-price,
.pt-pricing-name,.pt-about-stat-val,.pt-fl-val,.pt-stat-val,.pt-hero-badge,
.pt-page-hero .pt-badge{font-family:'Plus Jakarta Sans','Nunito',sans-serif !important;}

/* Glass nav */
.pt-nav{background:rgba(255,255,255,.72)!important;backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid rgba(16,24,40,.06);transition:box-shadow .3s,background .3s;}
.pt-nav.pt-scrolled{box-shadow:0 8px 30px rgba(16,24,40,.08);background:rgba(255,255,255,.86)!important;}

/* HERO — mesh + grid backdrop, bigger type */
.pt-hero{position:relative;background:
  radial-gradient(1100px 520px at 88% -12%,rgba(34,165,142,.12),transparent 60%),
  radial-gradient(820px 480px at -5% 10%,rgba(99,102,241,.08),transparent 55%),
  linear-gradient(180deg,#FBFDFC 0%,#FFFFFF 100%);}
.pt-hero::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(16,24,40,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(16,24,40,.04) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(680px 420px at 72% 26%,#000,transparent 72%);
  mask-image:radial-gradient(680px 420px at 72% 26%,#000,transparent 72%);}
.pt-hero .pt-container{position:relative;z-index:1;}
.pt-hero h1{font-size:58px;line-height:1.04;letter-spacing:-.03em;}

/* soft gradient badge/pill */
.pt-hero-badge,.pt-page-hero .pt-badge{background:linear-gradient(135deg,rgba(43,192,164,.16),rgba(27,143,122,.14))!important;border:1px solid rgba(34,165,142,.28)!important;color:#0f7d68!important;box-shadow:0 6px 16px rgba(34,165,142,.12);}

/* floating device — richer shadow + gentle float (desktop only) */
@media(min-width:1025px){
  .pt-device-frame{box-shadow:0 44px 100px rgba(16,24,40,.30),0 10px 30px rgba(16,24,40,.14);animation:ptFloat 6.5s ease-in-out infinite;}
  @keyframes ptFloat{0%,100%{transform:perspective(1000px) rotateY(-5deg) rotateX(2deg) translateY(0)}50%{transform:perspective(1000px) rotateY(-5deg) rotateX(2deg) translateY(-14px)}}
}
.pt-floating{box-shadow:0 18px 50px rgba(16,24,40,.16);border:1px solid rgba(16,24,40,.05);backdrop-filter:blur(6px);background:rgba(255,255,255,.9);}

/* gradient metric numbers */
.pt-about-stat-val,.pt-fl-val{background:var(--ptm-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}

/* CARDS — unified depth + smooth lift */
.pt-prod-card,.pt-integration-card,.pt-blog-card,.pt-team-card,.pt-highlight,.pt-pricing-card{
  border-radius:var(--ptm-radius)!important;border:1px solid rgba(16,24,40,.06);
  box-shadow:var(--ptm-card-sh);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,border-color .35s;}
.pt-highlight{background:#fff;padding:30px 24px;}
.pt-prod-card:hover,.pt-integration-card:hover,.pt-blog-card:hover,.pt-team-card:hover,.pt-highlight:hover{
  transform:translateY(-6px);box-shadow:var(--ptm-card-sh-hover);border-color:rgba(34,165,142,.32);}
.pt-pricing-card.featured{box-shadow:0 24px 60px rgba(34,165,142,.18)!important;}

/* icon chips — gradient tint + soft glow */
.pt-highlight-icon,.pt-trust-icon,.pt-integration-icon,.pt-contact-detail-icon{
  background:linear-gradient(135deg,#EAFBF6,#D3F2E8)!important;box-shadow:0 10px 24px rgba(34,165,142,.16);}

/* media + images */
.pt-feature-img,.pt-hero-media img,.pt-testi-img{border-radius:24px!important;box-shadow:0 30px 70px rgba(16,24,40,.14);}

/* pretty section tints */
.pt-products,.pt-faq{background:linear-gradient(180deg,#F5FAF9 0%,#FBFDFC 100%)!important;}
.pt-highlights{background:#fff;}

/* section headings a touch larger/tighter */
.pt-sec-hd h2,.pt-features h2,.pt-feature-text h2,.pt-contact-info h2{letter-spacing:-.03em;}
.pt-sec-hd h2{font-size:44px;}

/* blog tag gradient */
.pt-blog-tag{background:linear-gradient(135deg,#EAFBF6,#D3F2E8)!important;color:#0f7d68!important;}

/* FAQ soften */
.pt-faq-item{border:1px solid rgba(16,24,40,.07)!important;border-radius:16px!important;box-shadow:0 2px 10px rgba(16,24,40,.03);transition:box-shadow .3s;}
.pt-faq-item.open,.pt-faq-item[open]{box-shadow:0 14px 34px rgba(16,24,40,.08);}

/* footer subtle gradient + top accent */
.pt-footer{background:linear-gradient(180deg,#2A2B3A 0%,#1E1F29 100%);position:relative;}
.pt-footer::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--ptm-grad);opacity:.9;}

/* scroll reveal (only active once JS adds html.pt-js) */
.pt-js .pt-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}
.pt-js .pt-reveal.pt-in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.pt-js .pt-reveal{opacity:1!important;transform:none!important;}.pt-device-frame{animation:none!important;}}

/* === POS screenshot showcase (real app screengrabs) === */
.pt-shots{padding:90px 0;background:linear-gradient(180deg,#0E1116 0%,#151A23 100%);position:relative;overflow:hidden;}
.pt-shots::before{content:'';position:absolute;top:-20%;left:50%;transform:translateX(-50%);width:900px;height:500px;background:radial-gradient(circle,rgba(43,192,164,.14),transparent 65%);pointer-events:none;}
.pt-shots .pt-container{position:relative;z-index:1;}
.pt-shots .pt-sec-hd h2{color:#fff;}
.pt-shots .pt-sec-hd p{color:rgba(255,255,255,.66);}
.pt-shots .pt-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border-radius:100px;font-size:13px;font-weight:700;margin-bottom:18px;background:rgba(43,192,164,.16);border:1px solid rgba(43,192,164,.35);color:#5DE0C4;}
.pt-shots-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;max-width:1180px;margin:0 auto;}
.pt-shot{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:18px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.45);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s;}
.pt-shot:hover{transform:translateY(-6px);box-shadow:0 42px 92px rgba(0,0,0,.6);}
.pt-shot-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.06);}
.pt-shot-bar i{width:11px;height:11px;border-radius:50%;display:inline-block;}
.pt-shot-bar i:nth-child(1){background:#FF5F57;}
.pt-shot-bar i:nth-child(2){background:#FEBC2E;}
.pt-shot-bar i:nth-child(3){background:#28C840;}
.pt-shot-bar small{margin-left:8px;font-size:12px;color:rgba(255,255,255,.5);font-weight:600;letter-spacing:.3px;}
.pt-shot-img{background:#0B0E13;overflow:hidden;}
.pt-shot-img img{width:100%;height:auto;display:block;}
.pt-shot-cap{padding:20px 22px;}
.pt-shot-cap h3{font-size:18px;font-weight:700;color:#fff;margin-bottom:6px;font-family:'Plus Jakarta Sans','Nunito',sans-serif;}
.pt-shot-cap p{font-size:14px;color:rgba(255,255,255,.62);line-height:1.6;}
@media(max-width:900px){.pt-shots-grid{grid-template-columns:1fr;}}

/* === Online ordering platform showcase (browser + phone) === */
.pt-ofo{padding:90px 0;background:linear-gradient(180deg,#F5FAF9 0%,#FFFFFF 100%);overflow:hidden;}
.pt-ofo .pt-container{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:center;}
.pt-ofo-copy .pt-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border-radius:100px;font-size:13px;font-weight:700;margin-bottom:18px;background:linear-gradient(135deg,rgba(43,192,164,.16),rgba(27,143,122,.14));border:1px solid rgba(34,165,142,.3);color:#0f7d68;}
.pt-ofo-copy h2{font-size:40px;font-weight:800;color:#303133;letter-spacing:-.03em;line-height:1.12;margin-bottom:16px;font-family:'Plus Jakarta Sans','Nunito',sans-serif;}
.pt-ofo-copy p{font-size:17px;color:#64748B;line-height:1.7;margin-bottom:22px;}
.pt-ofo-list{margin-bottom:30px;}
.pt-ofo-list li{display:flex;align-items:flex-start;gap:10px;padding:7px 0;font-size:15px;color:#4A5568;}
.pt-ofo-list li svg{flex-shrink:0;margin-top:1px;color:#22A58E;}
.pt-ofo-stage{position:relative;}
.pt-ofo-browser{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 30px 70px rgba(16,24,40,.16);border:1px solid rgba(16,24,40,.07);}
.pt-ofo-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;background:#F3F4F6;border-bottom:1px solid rgba(16,24,40,.06);}
.pt-ofo-bar i{width:11px;height:11px;border-radius:50%;display:inline-block;}
.pt-ofo-bar i:nth-child(1){background:#FF5F57;}.pt-ofo-bar i:nth-child(2){background:#FEBC2E;}.pt-ofo-bar i:nth-child(3){background:#28C840;}
.pt-ofo-url{flex:1;margin-left:6px;background:#fff;border-radius:8px;padding:6px 12px;font-size:12px;color:#6B7280;border:1px solid rgba(16,24,40,.07);display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;}
.pt-ofo-browser img{width:100%;display:block;}
.pt-ofo-phone{position:absolute;right:-14px;bottom:-26px;width:168px;background:#111827;border-radius:26px;padding:7px;box-shadow:0 26px 60px rgba(16,24,40,.32);border:1px solid rgba(255,255,255,.08);}
.pt-ofo-phone::before{content:'';position:absolute;top:15px;left:50%;transform:translateX(-50%);width:44px;height:5px;border-radius:3px;background:rgba(255,255,255,.28);z-index:2;}
.pt-ofo-phone img{width:100%;display:block;border-radius:20px;}
@media(max-width:1024px){
  .pt-ofo .pt-container{grid-template-columns:1fr;gap:40px;}
  .pt-ofo-stage{max-width:620px;margin:0 auto;width:100%;}
}
@media(max-width:520px){
  .pt-ofo-phone{width:118px;right:0;bottom:-16px;}
  .pt-ofo-copy h2{font-size:30px;}
}

/* === Gift voucher showcase (design + personalise, browser frames) === */
.pt-vch{padding:90px 0;background:linear-gradient(180deg,#F7F5F1 0%,#FFFFFF 100%);overflow:hidden;}
.pt-vch .pt-sec-hd{margin-bottom:52px;}
.pt-vch .pt-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border-radius:100px;font-size:13px;font-weight:700;margin-bottom:16px;background:linear-gradient(135deg,rgba(43,192,164,.16),rgba(27,143,122,.14));border:1px solid rgba(34,165,142,.3);color:#0f7d68;}
.pt-vch-row{display:grid;grid-template-columns:1fr 1fr;gap:30px;max-width:1040px;margin:0 auto;}
.pt-vch-card{background:#fff;border-radius:16px;overflow:hidden;border:1px solid rgba(16,24,40,.07);box-shadow:0 24px 60px rgba(16,24,40,.12);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s;}
.pt-vch-card:hover{transform:translateY(-6px);box-shadow:0 34px 78px rgba(16,24,40,.18);}
.pt-vch-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#F3F4F6;border-bottom:1px solid rgba(16,24,40,.06);}
.pt-vch-bar i{width:10px;height:10px;border-radius:50%;display:inline-block;}
.pt-vch-bar i:nth-child(1){background:#FF5F57;}.pt-vch-bar i:nth-child(2){background:#FEBC2E;}.pt-vch-bar i:nth-child(3){background:#28C840;}
.pt-vch-bar small{margin-left:6px;font-size:12px;color:#6B7280;font-weight:600;}
.pt-vch-card>img{width:100%;display:block;}
.pt-vch-cap{padding:16px 20px 20px;}
.pt-vch-step{display:inline-block;font-size:12px;font-weight:800;color:#22A58E;letter-spacing:.5px;margin-bottom:4px;}
.pt-vch-cap h3{font-size:17px;font-weight:700;color:#303133;margin-bottom:4px;font-family:'Plus Jakarta Sans','Nunito',sans-serif;}
.pt-vch-cap p{font-size:14px;color:#64748B;line-height:1.6;}
@media(max-width:900px){ .pt-vch-row{grid-template-columns:1fr;max-width:520px;} }
.pt-vch-mob{max-width:156px;margin:44px auto 0;background:#111827;border-radius:26px;padding:7px;box-shadow:0 26px 58px rgba(16,24,40,.28);border:1px solid rgba(255,255,255,.08);position:relative;}
.pt-vch-mob::before{content:'';position:absolute;top:14px;left:50%;transform:translateX(-50%);width:42px;height:4px;border-radius:3px;background:rgba(255,255,255,.3);z-index:2;}
.pt-vch-mob img{width:100%;display:block;border-radius:20px;}
.pt-vch-mobcap{text-align:center;font-size:13px;color:#64748B;margin-top:14px;}

/* === Table booking showcase (reuses .pt-ofo device frames) === */
.pt-tbk{padding:90px 0;background:linear-gradient(180deg,#FFFFFF 0%,#F5FAF9 100%);overflow:hidden;}
.pt-tbk .pt-sec-hd{margin-bottom:50px;}
.pt-tbk .pt-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border-radius:100px;font-size:13px;font-weight:700;margin-bottom:16px;background:linear-gradient(135deg,rgba(43,192,164,.16),rgba(27,143,122,.14));border:1px solid rgba(34,165,142,.3);color:#0f7d68;}
.pt-tbk-stage{max-width:800px;margin:0 auto;}

/* === OneView manager app (App Store screenshots) === */
.pt-ovapp{padding:92px 0;background:linear-gradient(180deg,#0E1116 0%,#15201D 100%);overflow:hidden;position:relative;}
.pt-ovapp::before{content:'';position:absolute;top:-15%;left:50%;transform:translateX(-50%);width:900px;height:520px;background:radial-gradient(circle,rgba(43,192,164,.16),transparent 66%);pointer-events:none;}
.pt-ovapp .pt-container{position:relative;z-index:1;}
.pt-ovapp .pt-sec-hd{margin-bottom:54px;}
.pt-ovapp .pt-sec-hd h2{color:#fff;}
.pt-ovapp .pt-sec-hd p{color:#fff;}
.pt-ovapp .pt-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border-radius:100px;font-size:13px;font-weight:700;margin-bottom:16px;background:rgba(43,192,164,.16);border:1px solid rgba(43,192,164,.35);color:#5DE0C4;}
.pt-ovapp-row{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;max-width:920px;margin:0 auto;justify-items:center;}
.pt-ovapp-row.pt-ovapp-2{grid-template-columns:repeat(2,1fr);gap:60px;max-width:720px;}
.pt-ovapp-item{width:100%;max-width:248px;}
.pt-ovapp-2 .pt-ovapp-item{max-width:288px;}
.pt-ovapp-2 .pt-ovapp-cap p{max-width:268px;}
.pt-ovapp-frame{background:#0B0E13;border-radius:32px;padding:8px;box-shadow:0 30px 70px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.1);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s;}
.pt-ovapp-frame:hover{transform:translateY(-8px);box-shadow:0 42px 90px rgba(0,0,0,.6);}
.pt-ovapp-frame img{width:100%;display:block;border-radius:25px;}
.pt-ovapp-cap{text-align:center;padding-top:20px;}
.pt-ovapp-cap h3{font-size:16px;font-weight:700;color:#fff;margin-bottom:5px;font-family:'Plus Jakarta Sans','Nunito',sans-serif;}
.pt-ovapp-cap p{font-size:13.5px;color:rgba(255,255,255,.92);line-height:1.55;max-width:230px;margin:0 auto;}
.pt-ovapp-store{display:flex;justify-content:center;margin-top:46px;}
.pt-ovapp-store a{display:inline-flex;align-items:center;gap:10px;background:#fff;color:#111827;border-radius:14px;padding:13px 24px;font-weight:700;font-size:15px;box-shadow:0 14px 34px rgba(0,0,0,.35);transition:transform .25s,box-shadow .25s;}
.pt-ovapp-store a:hover{transform:translateY(-2px);box-shadow:0 20px 44px rgba(0,0,0,.45);color:#111827;}
@media(max-width:860px){.pt-ovapp-row,.pt-ovapp-row.pt-ovapp-2{grid-template-columns:1fr;max-width:280px;gap:46px;}}

/* === POS built-in capabilities === */
.pt-caps{padding:90px 0;background:#fff;}
.pt-caps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1140px;margin:0 auto;}
.pt-cap{background:#fff;border:1px solid rgba(16,24,40,.08);border-radius:18px;padding:28px 26px;box-shadow:0 10px 30px rgba(16,24,40,.05);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,border-color .35s;}
.pt-cap:hover{transform:translateY(-5px);box-shadow:0 22px 48px rgba(34,165,142,.14);border-color:rgba(34,165,142,.3);}
.pt-cap-ic{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;background:linear-gradient(135deg,#EAFBF6,#D3F2E8);color:#1B8F7A;box-shadow:0 8px 20px rgba(34,165,142,.15);}
.pt-cap h3{font-size:17px;font-weight:700;color:#303133;margin-bottom:8px;font-family:'Plus Jakarta Sans','Nunito',sans-serif;}
.pt-cap p{font-size:14px;color:#64748B;line-height:1.65;}
.pt-cap a{color:#22A58E;font-weight:600;font-size:13.5px;display:inline-flex;align-items:center;gap:5px;margin-top:12px;}
.pt-cap a:hover{gap:9px;}
@media(min-width:901px) and (max-width:1120px){.pt-caps-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:900px){.pt-caps-grid{grid-template-columns:1fr;max-width:460px;}}

/* === Integration logo strips (payments + delivery) === */
.pt-intg{padding:84px 0;background:linear-gradient(180deg,#F7FBFA 0%,#FFFFFF 100%);}
.pt-intg-block{max-width:1080px;margin:0 auto;}
.pt-intg-block + .pt-intg-block{margin-top:52px;}
.pt-intg-lead{text-align:center;margin-bottom:26px;}
.pt-intg-lead h3{font-size:22px;font-weight:700;color:#303133;font-family:'Plus Jakarta Sans','Nunito',sans-serif;margin-bottom:6px;}
.pt-intg-lead p{font-size:15px;color:#64748B;}
.pt-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;}
.pt-logo{background:#fff;border:1px solid rgba(16,24,40,.08);border-radius:14px;height:86px;min-width:158px;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;box-shadow:0 8px 22px rgba(16,24,40,.05);transition:transform .3s,box-shadow .3s;}
.pt-logo:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(16,24,40,.1);}
.pt-logo img{max-height:46px;max-width:110px;width:auto;object-fit:contain;display:block;}
.pt-logo-txt{font-size:20px;font-weight:800;letter-spacing:-.02em;font-family:'Plus Jakarta Sans','Nunito',sans-serif;white-space:nowrap;}
.pl-viva{color:#16205C;} .pl-dojo{color:#0A0A0A;} .pl-boipa{color:#00843D;} .pl-global{color:#002D72;} .pl-worldpay{color:#CD1041;}
@media(max-width:520px){.pt-logo{min-width:132px;height:76px;padding:12px 18px;}.pt-logo-txt{font-size:17px;}}

/* === Table ordering journey (mobile phones: Menu -> Cart -> Checkout) === */
.pt-tord{padding:90px 0;background:linear-gradient(180deg,#F5FAF9 0%,#FFFFFF 100%);overflow:hidden;}
.pt-tord .pt-sec-hd{margin-bottom:52px;}
.pt-tord .pt-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border-radius:100px;font-size:13px;font-weight:700;margin-bottom:16px;background:linear-gradient(135deg,rgba(43,192,164,.16),rgba(27,143,122,.14));border:1px solid rgba(34,165,142,.3);color:#0f7d68;}
.pt-tord-row{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;max-width:920px;margin:0 auto;justify-items:center;}
.pt-tordp{width:100%;max-width:268px;}
.pt-tordp-frame{background:#111827;border-radius:34px;padding:9px;box-shadow:0 30px 66px rgba(16,24,40,.26);border:1px solid rgba(255,255,255,.08);position:relative;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s;}
.pt-tordp-frame:hover{transform:translateY(-8px);box-shadow:0 42px 84px rgba(16,24,40,.32);}
.pt-tordp-frame::before{content:'';position:absolute;top:18px;left:50%;transform:translateX(-50%);width:46px;height:5px;border-radius:3px;background:rgba(255,255,255,.28);z-index:2;}
.pt-tordp-frame img{width:100%;display:block;border-radius:26px;}
.pt-tordp-pad{aspect-ratio:508/1100;background:#fff;border-radius:26px;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:14px 12px;box-sizing:border-box;}
.pt-tordp-pad img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:8px;display:block;}
.pt-tordp-cap{text-align:center;padding-top:22px;}
.pt-tordp-step{display:inline-block;font-size:11.5px;font-weight:800;color:#22A58E;letter-spacing:.5px;margin-bottom:5px;}
.pt-tordp-cap h3{font-size:17px;font-weight:700;color:#303133;margin-bottom:5px;font-family:'Plus Jakarta Sans','Nunito',sans-serif;}
.pt-tordp-cap p{font-size:13.5px;color:#64748B;line-height:1.55;max-width:248px;margin:0 auto;}
.pt-tord-note{text-align:center;font-size:14px;color:#4A5568;margin-top:46px;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;}
.pt-tord-note svg{color:#22A58E;flex-shrink:0;}
@media(max-width:820px){.pt-tord-row{grid-template-columns:1fr;max-width:300px;gap:48px;}}

/* === OFO: mobile-app phone cluster (menu + cart) === */
.pt-ofo-mob{position:relative;display:flex;justify-content:center;align-items:flex-end;padding:10px 20px 20px 0;}
.pt-ofo-mob .pt-ph{background:#111827;border-radius:30px;padding:8px;box-shadow:0 30px 66px rgba(16,24,40,.28);border:1px solid rgba(255,255,255,.08);position:relative;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s;}
.pt-ofo-mob .pt-ph::before{content:'';position:absolute;top:15px;left:50%;transform:translateX(-50%);width:42px;height:5px;border-radius:3px;background:rgba(255,255,255,.28);z-index:3;}
.pt-ofo-mob .pt-ph img{display:block;border-radius:23px;width:100%;}
.pt-ofo-mob .pt-ph-front{width:248px;z-index:2;transform:translateY(-12px);}
.pt-ofo-mob .pt-ph-front:hover{transform:translateY(-20px);}
.pt-ofo-mob .pt-ph-back{width:196px;margin-left:-72px;z-index:1;transform:translateY(30px);}
.pt-ofo-mob .pt-ph-back:hover{transform:translateY(22px);}
@media(max-width:520px){.pt-ofo-mob{padding:0;}.pt-ofo-mob .pt-ph-front{width:188px;}.pt-ofo-mob .pt-ph-back{width:150px;margin-left:-52px;}}

/* === Catering ordering workflow (Home -> Checkout -> Payment) === */
.pt-cwf{padding:90px 0;background:linear-gradient(180deg,#F5FAF9 0%,#FFFFFF 100%);overflow:hidden;}
.pt-cwf .pt-sec-hd{margin-bottom:56px;}
.pt-cwf .pt-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border-radius:100px;font-size:13px;font-weight:700;margin-bottom:16px;background:linear-gradient(135deg,rgba(43,192,164,.16),rgba(27,143,122,.14));border:1px solid rgba(34,165,142,.3);color:#0f7d68;}
.pt-cwf-row{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;max-width:1160px;margin:0 auto;}
.pt-cwf-card{position:relative;}
.pt-cwf-frame{background:#fff;border:1px solid rgba(16,24,40,.08);border-radius:14px;overflow:hidden;box-shadow:0 20px 50px rgba(16,24,40,.1);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s;}
.pt-cwf-card:hover .pt-cwf-frame{transform:translateY(-6px);box-shadow:0 30px 66px rgba(16,24,40,.16);}
.pt-cwf-bar{display:flex;align-items:center;gap:7px;padding:9px 13px;background:#F3F4F6;border-bottom:1px solid rgba(16,24,40,.06);}
.pt-cwf-bar i{width:9px;height:9px;border-radius:50%;display:inline-block;}
.pt-cwf-bar i:nth-child(1){background:#FF5F57;}.pt-cwf-bar i:nth-child(2){background:#FEBC2E;}.pt-cwf-bar i:nth-child(3){background:#28C840;}
.pt-cwf-bar small{margin-left:6px;font-size:11px;color:#6B7280;font-weight:600;}
.pt-cwf-shot{aspect-ratio:16/10;overflow:hidden;background:#fff;}
.pt-cwf-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}
.pt-cwf-shot.pt-cwf-bottom img{object-position:bottom center;}
.pt-cwf-num{position:absolute;top:-14px;left:-14px;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#2BC0A4,#1B8F7A);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;box-shadow:0 8px 20px rgba(34,165,142,.35);z-index:2;font-family:'Plus Jakarta Sans','Nunito',sans-serif;}
.pt-cwf-cap{padding-top:18px;text-align:center;}
.pt-cwf-cap h3{font-size:17px;font-weight:700;color:#303133;margin-bottom:5px;font-family:'Plus Jakarta Sans','Nunito',sans-serif;}
.pt-cwf-cap p{font-size:13.5px;color:#64748B;line-height:1.55;max-width:290px;margin:0 auto;}
@media(max-width:900px){.pt-cwf-row{grid-template-columns:1fr;max-width:440px;gap:44px;}}

/* === Loyalty program section (online + POS) === */
.pt-loy{padding:96px 0;background:linear-gradient(180deg,#FFFFFF 0%,#F5FAF9 100%);overflow:hidden;}
.pt-loy .pt-container{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.pt-loy-copy .pt-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border-radius:100px;font-size:13px;font-weight:700;margin-bottom:18px;background:linear-gradient(135deg,rgba(43,192,164,.16),rgba(27,143,122,.14));border:1px solid rgba(34,165,142,.3);color:#0f7d68;}
.pt-loy-copy h2{font-size:40px;font-weight:800;color:#303133;letter-spacing:-.03em;line-height:1.12;margin-bottom:16px;font-family:'Plus Jakarta Sans','Nunito',sans-serif;}
.pt-loy-copy p{font-size:17px;color:#64748B;line-height:1.7;margin-bottom:22px;}
.pt-loy-list{margin-bottom:30px;}
.pt-loy-list li{display:flex;align-items:flex-start;gap:10px;padding:7px 0;font-size:15px;color:#4A5568;}
.pt-loy-list li svg{color:#22A58E;flex-shrink:0;margin-top:1px;}
.pt-loy-visual{position:relative;display:flex;justify-content:center;}
.pt-loy-card{width:100%;max-width:400px;background:linear-gradient(135deg,#0E1116 0%,#17322B 55%,#0F6E56 135%);border-radius:22px;padding:30px 28px;color:#fff;box-shadow:0 34px 80px rgba(16,24,40,.30);border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden;}
.pt-loy-card::before{content:'';position:absolute;top:-45%;right:-25%;width:320px;height:320px;background:radial-gradient(circle,rgba(43,192,164,.4),transparent 65%);pointer-events:none;}
.pt-loy-card>*{position:relative;}
.pt-loy-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;}
.pt-loy-brand{font-size:14px;font-weight:600;color:rgba(255,255,255,.85);}
.pt-loy-chip{font-size:11px;font-weight:800;letter-spacing:1px;padding:5px 13px;border-radius:100px;background:linear-gradient(135deg,#F5CF6B,#E0A93B);color:#3a2c00;}
.pt-loy-points{font-size:15px;color:rgba(255,255,255,.7);margin-bottom:14px;}
.pt-loy-points strong{font-size:46px;font-weight:800;color:#fff;font-family:'Plus Jakarta Sans','Nunito',sans-serif;margin-right:7px;letter-spacing:-.02em;}
.pt-loy-bar{height:9px;border-radius:100px;background:rgba(255,255,255,.14);overflow:hidden;margin-bottom:10px;}
.pt-loy-bar span{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,#2BC0A4,#5DE0C4);}
.pt-loy-next{font-size:13px;color:rgba(255,255,255,.7);margin-bottom:24px;}
.pt-loy-ways{display:flex;gap:10px;}
.pt-loy-way{flex:1;display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.92);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px 14px;}
.pt-loy-way svg{color:#5DE0C4;flex-shrink:0;}
.pt-loy-float{position:absolute;background:#fff;border-radius:14px;padding:9px 15px;font-size:14px;font-weight:800;color:#0f7d68;box-shadow:0 16px 40px rgba(16,24,40,.18);display:flex;align-items:center;gap:8px;z-index:3;font-family:'Plus Jakarta Sans','Nunito',sans-serif;}
.pt-loy-float svg{color:#22A58E;}
.pt-loy-float small{font-weight:500;color:#64748B;font-size:12px;}
.pt-loy-float-1{top:-6px;left:-6px;}
.pt-loy-float-2{bottom:24px;right:-10px;}
@media(max-width:1024px){.pt-loy .pt-container{grid-template-columns:1fr;gap:44px;}}
@media(max-width:520px){.pt-loy-float{display:none;}.pt-loy-copy h2{font-size:30px;}}

/* ============================================================
   POS-BY-INDUSTRY SHOWCASE + LIVE ANALYTICS (added, revertible)
   ============================================================ */
.pt-posx{padding:90px 0;background:linear-gradient(180deg,#0E1116 0%,#141A24 100%);color:#fff;position:relative;overflow:hidden;}
.pt-posx::before{content:'';position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(720px 360px at 12% -5%,rgba(43,192,164,.20),transparent 60%),
  radial-gradient(680px 400px at 105% 105%,rgba(99,102,241,.16),transparent 55%);}
.pt-posx .pt-container{position:relative;z-index:1;}
.pt-posx-head{text-align:center;max-width:680px;margin:0 auto 34px;}
.pt-posx-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:100px;background:rgba(43,192,164,.14);border:1px solid rgba(43,192,164,.32);color:#7fe9d0;font-size:13px;font-weight:700;letter-spacing:.3px;margin-bottom:16px;}
.pt-posx-head h2{font-size:40px;line-height:1.08;letter-spacing:-.03em;margin-bottom:12px;color:#fff;font-family:'Plus Jakarta Sans','Nunito',sans-serif !important;}
.pt-posx-head p{font-size:17px;color:rgba(255,255,255,.66);line-height:1.6;}
.pt-posx-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:32px;}
.pt-posx-tab{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:100px;font-size:14px;font-weight:700;color:rgba(255,255,255,.7);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);cursor:pointer;transition:all .25s;font-family:inherit;}
.pt-posx-tab:hover{color:#fff;background:rgba(255,255,255,.1);}
.pt-posx-tab.active{color:#062b23;background:linear-gradient(135deg,#31C9AC,#1B9C84);border-color:transparent;box-shadow:0 8px 22px rgba(34,165,142,.4);}
.pt-posx-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:stretch;}
.pt-posx-screen-wrap{display:flex;}
.pt-posx .pt-device-frame{transform:none !important;animation:none !important;width:100%;box-shadow:0 34px 74px rgba(0,0,0,.5);}
.pt-posx .pt-screen-body{min-height:330px;}
.pt-posx .pt-cat{cursor:default;transition:transform .2s,box-shadow .2s;}
.pt-posx .pt-cat:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.12);}
/* live-analytics card */
.pt-anlx{background:#fff;border-radius:20px;padding:22px 22px 24px;color:#303133;box-shadow:0 30px 66px rgba(0,0,0,.4);display:flex;flex-direction:column;gap:16px;}
.pt-anlx-head{display:flex;align-items:center;justify-content:space-between;}
.pt-anlx-head h3{font-size:18px;font-weight:800;color:#303133;font-family:'Plus Jakarta Sans','Nunito',sans-serif !important;}
.pt-anlx-live{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:#0f9e84;background:#E7F8F3;padding:5px 11px;border-radius:100px;}
.pt-anlx-live::before{content:'';width:7px;height:7px;border-radius:50%;background:#16b897;animation:ptPulse 1.8s infinite;}
@keyframes ptPulse{0%{box-shadow:0 0 0 0 rgba(22,184,151,.5)}70%{box-shadow:0 0 0 7px rgba(22,184,151,0)}100%{box-shadow:0 0 0 0 rgba(22,184,151,0)}}
.pt-anlx-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;}
.pt-anlx-kpi{background:#F6FAF9;border-radius:13px;padding:12px 13px;}
.pt-anlx-kpi .k-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#8b95a3;}
.pt-anlx-kpi .k-val{font-size:22px;font-weight:800;color:#1c2530;margin-top:3px;font-family:'Plus Jakarta Sans','Nunito',sans-serif !important;}
.pt-anlx-kpi .k-delta{font-size:11px;font-weight:700;color:#0f9e84;margin-top:2px;}
.pt-anlx-chart{background:linear-gradient(180deg,#F2FBF8,#fff);border:1px solid #EAF3F0;border-radius:13px;padding:13px 14px 10px;}
.pt-anlx-chart .c-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;}
.pt-anlx-chart .c-hd span{font-size:12px;font-weight:700;color:#64748B;}
.pt-anlx-bars{display:flex;align-items:flex-end;gap:5px;height:92px;}
.pt-anlx-bars i{flex:1;background:linear-gradient(180deg,#2BC0A4,#12977c);border-radius:5px 5px 0 0;min-height:5px;transition:height .6s cubic-bezier(.16,1,.3,1);}
.pt-anlx-top{display:flex;flex-direction:column;gap:10px;}
.pt-anlx-top .t-item{display:flex;flex-direction:column;gap:5px;}
.pt-anlx-top .t-top{display:flex;justify-content:space-between;font-size:13px;}
.pt-anlx-top .t-name{font-weight:600;color:#3a4149;}
.pt-anlx-top .t-qty{font-weight:800;color:#12977c;}
.pt-anlx-top .t-bar{height:8px;border-radius:6px;background:#EAF6F2;overflow:hidden;}
.pt-anlx-top .t-bar i{display:block;height:100%;background:linear-gradient(90deg,#2BC0A4,#12977c);border-radius:6px;transition:width .6s cubic-bezier(.16,1,.3,1);}
@media(max-width:900px){.pt-posx{padding:64px 0;}.pt-posx-grid{grid-template-columns:1fr;gap:22px;}.pt-posx-head h2{font-size:29px;}.pt-posx .pt-device-frame{max-width:520px;margin:0 auto;}}

/* === Backend: manage reservations (OneView dashboard) === */
.pt-bko{padding:90px 0;background:linear-gradient(180deg,#FFFFFF 0%,#F1F5F7 100%);overflow:hidden;}
.pt-bko .pt-sec-hd{margin-bottom:50px;}
.pt-bko .pt-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border-radius:100px;font-size:13px;font-weight:700;margin-bottom:16px;background:linear-gradient(135deg,rgba(43,192,164,.16),rgba(27,143,122,.14));border:1px solid rgba(34,165,142,.3);color:#0f7d68;}
.pt-bko-stage{max-width:840px;margin:0 auto;}
.pt-bko-list{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:40px;}
.pt-bko-list span{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid rgba(16,24,40,.08);border-radius:100px;padding:10px 18px;font-size:14px;font-weight:600;color:#3f4a5a;box-shadow:0 6px 18px rgba(16,24,40,.05);}
.pt-bko-list span svg{color:#22A58E;flex-shrink:0;}

/* === Solid buttons: force white label (beats .pt-page a{color:inherit}) === */
.pt-btn-primary,.pt-btn-dark,
.pt-page a.pt-btn-primary,.pt-page a.pt-btn-dark,
a.pt-btn-primary:hover,a.pt-btn-dark:hover{color:#fff !important;}

/* ===== Screen-frame device mockup (home "connected" section) — added 2026-08-06 ===== */
.pt-sframe{position:relative;width:100%;max-width:520px;margin:0 auto;aspect-ratio:955/676;border-radius:26px;padding:13px;background:linear-gradient(155deg,#2b322e,#0c110f 70%);box-shadow:inset 0 0 0 1px rgba(55,216,158,.14),inset 0 1px 0 rgba(255,255,255,.08),0 0 48px 4px rgba(25,185,129,.20),0 26px 55px -22px rgba(16,44,34,.42),0 8px 20px -12px rgba(0,0,0,.22);}
.pt-sframe-screen{position:absolute;inset:13px;border-radius:15px;overflow:hidden;background:#0f1714;box-shadow:inset 0 0 0 1px rgba(0,0,0,.5);}
.pt-sframe-screen img{width:100%;height:100%;object-fit:cover;display:block;}
/* blur-in reveal for the screen frame */
.pt-sframe.pt-reveal{opacity:0;transform:translateY(26px) scale(.965);filter:blur(10px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1),filter .9s ease;}
.pt-sframe.pt-reveal.pt-in{opacity:1;transform:none;filter:blur(0);}
/* real client logos in the Trusted-by row */
.pt-logos-row .pt-logo-img{height:50px;width:auto;max-width:150px;object-fit:contain;opacity:.88;transition:opacity .3s ease, transform .3s ease;}
.pt-logos-row .pt-logo-img:hover{opacity:1;transform:translateY(-2px);}
/* keep Trusted-by heading above the logos row, both centred (was relying on flex-wrap) */
.pt-logos{flex-direction:column;align-items:center;}
/* portrait branded voucher shown fully (contain) with a soft shadow */
.pt-feature-img.pt-voucher{background:none;height:auto;overflow:visible;padding:0;}
.pt-feature-img.pt-voucher img{width:auto;max-width:100%;max-height:480px;height:auto;object-fit:contain;border-radius:14px;box-shadow:0 26px 54px -20px rgba(16,24,40,.4);margin:0 auto;}

/* integration cards — real brand logos: neutral chip so brand colours read true */
.pt-integration-icon.pt-logo-chip{
  background:#FFFFFF!important;border:1px solid rgba(16,24,40,.08);
  box-shadow:0 6px 16px rgba(16,24,40,.06)!important;}
.pt-integration-icon.pt-logo-chip img{
  width:44px;height:44px;object-fit:contain;border-radius:10px;display:block;}
/* integrations page — the card sections had no padding at all, so the second heading
   butted against the first grid and the last card row butted against the CTA band.
   One rule spaces all three: hero->heading, grid->heading, grid->CTA band. */
.pt-integrations-section{padding-bottom:80px;}
@media(max-width:768px){.pt-integrations-section{padding-bottom:56px;}}
/* wide (landscape) product screenshots — the default 16:10 shot frame letterboxes
   them heavily; 16:9 lets them fill the column width with a little air. */
.pt-feature-img.pt-shot.pt-shot-wide{aspect-ratio:16/9;}

/* hero device: the real app recording, looping in place of the CSS mockup.
   The clip is 1280x800, so the screen box is pinned to 16:10 and the video
   fills it exactly — no crop, no letterbox. */
.pt-screen--video{aspect-ratio:1280/800;background:#fff;}
.pt-screen--video .pt-screen-video{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;}

/* connected section: same treatment as the hero device above. The clip is
   1280x720, so the frame is re-pinned from the old screenshot ratio (955:676)
   to 16:9 and the video fills it exactly — no crop, no letterbox. */
.pt-features .pt-sframe{aspect-ratio:16/9;}
.pt-sframe-screen video{display:block;width:100%;height:100%;object-fit:cover;}

/* ============================================================================
   PTX — redesigned "Tools that fit any restaurant" section (test page).
   Namespaced .ptx-* so it cannot affect .pt-industry or any existing page.
   ========================================================================= */
.ptx-ind{position:relative;overflow:hidden;padding:96px 0 104px;color:#fff;
  background:
    radial-gradient(1100px 520px at 50% -8%, rgba(43,192,164,.22), transparent 62%),
    radial-gradient(760px 420px at 88% 108%, rgba(56,110,190,.16), transparent 68%),
    linear-gradient(180deg,#151830 0%,#10131F 55%,#0C0F1A 100%);}
/* faint technical grid, masked so it fades out rather than tiling edge to edge */
.ptx-ind::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(circle at 50% 32%,#000 0%,transparent 72%);
          mask-image:radial-gradient(circle at 50% 32%,#000 0%,transparent 72%);}
/* soften the slab edge into the white section below */
.ptx-ind::after{content:'';position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.045));}
.ptx-wrap{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 32px;text-align:center;}

.ptx-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;
  font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;color:#5EE0C0;
  background:rgba(43,192,164,.1);border:1px solid rgba(43,192,164,.26);
  padding:7px 14px;border-radius:100px;margin-bottom:22px;}
.ptx-eyebrow i{width:6px;height:6px;border-radius:50%;background:#2BC0A4;box-shadow:0 0 10px 2px rgba(43,192,164,.7);font-style:normal;}
.ptx-title{font-size:47px;line-height:1.1;font-weight:800;letter-spacing:-1.1px;margin:0 auto 16px;max-width:22ch;color:#fff;}
.ptx-title em{font-style:normal;background:linear-gradient(135deg,#5EE0C0,#2BC0A4 55%,#7FB8FF);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.ptx-lede{font-size:17px;line-height:1.6;color:rgba(255,255,255,.62);margin:0 auto 36px;max-width:56ch;}

/* ---- single segmented control (replaces the duplicated pills + left rail) ---- */
.ptx-segwrap{display:flex;justify-content:center;margin-bottom:44px;}
.ptx-seg{position:relative;display:inline-flex;gap:2px;padding:5px;border-radius:100px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px -22px rgba(0,0,0,.9);
  max-width:100%;overflow-x:auto;scrollbar-width:none;}
.ptx-seg::-webkit-scrollbar{display:none;}
.ptx-seg-thumb{position:absolute;top:5px;left:0;height:calc(100% - 10px);width:0;border-radius:100px;
  background:linear-gradient(135deg,#2BC0A4,#17907A);
  box-shadow:0 8px 22px -6px rgba(43,192,164,.7),inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .45s cubic-bezier(.16,1,.3,1),width .45s cubic-bezier(.16,1,.3,1);}
.ptx-seg button{position:relative;z-index:2;border:0;background:none;cursor:pointer;color:rgba(255,255,255,.62);
  font-family:inherit;font-size:14.5px;font-weight:600;padding:11px 20px;border-radius:100px;
  white-space:nowrap;transition:color .3s;outline:none;}
.ptx-seg button:hover{color:#fff;}
.ptx-seg button[aria-selected="true"]{color:#04120E;}
.ptx-seg button:focus-visible{box-shadow:0 0 0 2px #5EE0C0;}

/* ---- glass panel ---- */
.ptx-panel{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:44px;align-items:center;
  padding:40px;border-radius:26px;text-align:left;
  background:linear-gradient(150deg,rgba(255,255,255,.085),rgba(255,255,255,.028));
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:0 40px 90px -38px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.13);}
.ptx-panel::before{content:'';position:absolute;inset:0;border-radius:26px;padding:1px;pointer-events:none;
  background:linear-gradient(145deg,rgba(94,224,192,.75),rgba(255,255,255,.1) 38%,rgba(255,255,255,.03) 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;}

.ptx-idx{font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;font-size:12px;letter-spacing:1.4px;
  color:rgba(94,224,192,.85);margin-bottom:14px;}
.ptx-idx b{color:#fff;font-weight:500;}
.ptx-name{font-size:33px;font-weight:800;letter-spacing:-.7px;margin:0 0 12px;color:#fff;}
.ptx-desc{font-size:15.5px;line-height:1.68;color:rgba(255,255,255,.66);margin:0 0 26px;}
.ptx-feats{display:grid;gap:11px;margin:0 0 30px;padding:0;list-style:none;}
.ptx-feats li{display:flex;align-items:center;gap:13px;font-size:14.5px;font-weight:500;color:rgba(255,255,255,.9);
  padding:12px 15px;border-radius:13px;background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.07);border-left:2px solid rgba(43,192,164,.85);}
.ptx-feats svg{flex:none;width:17px;height:17px;stroke:#5EE0C0;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.ptx-cta{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:100px;
  font-size:15px;font-weight:700;color:#04120E;text-decoration:none;
  background:linear-gradient(135deg,#5EE0C0,#2BC0A4);
  box-shadow:0 16px 34px -14px rgba(43,192,164,.9);
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s;}
.ptx-cta:hover{transform:translateY(-2px);box-shadow:0 22px 42px -14px rgba(43,192,164,1);color:#04120E;}

/* ---- visual slot ---- */
.ptx-device{position:relative;border-radius:20px;padding:11px;
  background:linear-gradient(155deg,#2b322e,#0c110f 72%);
  box-shadow:inset 0 0 0 1px rgba(55,216,158,.16),0 0 56px 2px rgba(25,185,129,.16),0 30px 60px -28px rgba(0,0,0,.9);}
.ptx-screen{position:relative;border-radius:12px;overflow:hidden;background:#0f1714;aspect-ratio:16/10;}
.ptx-screen img{width:100%;height:100%;object-fit:cover;display:block;}
.ptx-badge{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:7px;
  font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;
  color:#CFFDEF;background:rgba(6,20,16,.72);border:1px solid rgba(94,224,192,.32);
  padding:6px 11px;border-radius:100px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.ptx-badge i{width:5px;height:5px;border-radius:50%;background:#2BC0A4;box-shadow:0 0 8px 2px rgba(43,192,164,.8);font-style:normal;}

/* ---- swap motion: content lifts and fades in, staggered ---- */
.ptx-anim{opacity:0;transform:translateY(10px);}
.ptx-in{opacity:1;transform:none;transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1);}

@media(max-width:900px){
  .ptx-ind{padding:72px 0 80px;}
  .ptx-wrap{padding:0 20px;}
  .ptx-title{font-size:32px;}
  .ptx-lede{font-size:15.5px;}
  .ptx-segwrap{justify-content:flex-start;margin-left:-20px;margin-right:-20px;padding:0 20px;}
  .ptx-seg{justify-content:flex-start;}
  .ptx-panel{grid-template-columns:1fr;gap:30px;padding:26px;}
  .ptx-name{font-size:26px;}
  .ptx-device{order:-1;}
}
@media(prefers-reduced-motion:reduce){
  .ptx-seg-thumb{transition:none;}
  .ptx-anim,.ptx-in{opacity:1!important;transform:none!important;transition:none!important;}
  .ptx-cta{transition:none;}
}

/* "One platform. Every kind of venue." — phone fix.
   The till mock had a hard minimum width: .pt-screen-body is `1fr 200px`, and a grid
   item's default min-width:auto means the 1fr column can never shrink below the
   category tiles' min-content. That floor varies per tab with the label lengths —
   ~429px on Restaurant but ~479px on Cafe & Bakery — so the card needed a ~520px
   viewport to fit. The existing max-width:520px could not help: max-width cannot
   shrink a box below its min-content. Under that width the card overflowed and
   .pt-posx{overflow:hidden} clipped it. Both cards share one grid column, so the
   till's minimum dragged .pt-anlx to the same width and clipped that too.
   Below 600px: stack the till (tiles above, order list below) and let the grid items
   actually shrink. 600 is chosen above the widest tab's ~479px floor, not at it. */
@media(max-width:600px){
  .pt-posx-grid,.pt-posx-grid>*,.pt-posx-screen-wrap,
  .pt-posx .pt-device-frame,.pt-posx .pt-screen,
  .pt-posx .pt-screen-body,.pt-posx .pt-screen-body>*,
  .pt-anlx,.pt-anlx-kpis,.pt-anlx-kpi{min-width:0;}
  .pt-posx .pt-screen-body{grid-template-columns:1fr;min-height:0;}
  .pt-posx-screen{flex:1 1 auto;min-width:0;}
  .pt-posx .pt-cats{grid-template-rows:auto;}
  .pt-posx .pt-sb{border-left:0;border-top:1px solid #E5E7EB;}
  /* KPI numbers stay on one line in the narrower card */
  .pt-anlx-kpis{gap:8px;}
  .pt-anlx-kpi{padding:10px 9px;}
  .pt-anlx-kpi .k-val{font-size:18px;}
  .pt-anlx-kpi .k-label{font-size:9.5px;letter-spacing:.3px;}
}

/* Highlight cards ("Contactless ordering" etc, 17 pages).
   The theme styles `.pt-highlight`, but every page's markup uses `.pt-highlight-card`
   — so `.pt-highlight{text-align:center}` never matched and the copy fell back to the
   default left, while `.pt-highlight-icon{margin:0 auto}` DID match and centred the
   icon. Hence centred icon over left-aligned text. Align the two deliberately: both
   left while the grid is multi-column, both centred once it collapses to one column
   at 768px (matching .pt-highlights-grid's own breakpoint).
   Note .pt-trust-item and .pt-integration-card centre their text to match their
   centred icons already, so they are intentionally left alone. */
.pt-highlight-card{text-align:left;}
.pt-highlight-card .pt-highlight-icon{margin-left:0;margin-right:0;}
@media(max-width:768px){
  .pt-highlight-card{text-align:center;}
  .pt-highlight-card .pt-highlight-icon{margin-left:auto;margin-right:auto;}
}

/* Logo rows on /pos/ ("Take payments through..." / "Connected to the apps...").
   `.pt-logos` serves two different structures. On the homepage it wraps a label plus
   a `.pt-logos-row`, so the earlier `.pt-logos{flex-direction:column}` is correct
   there. But in the `.pt-intg` blocks the logo tiles ARE the direct children, so that
   same rule stacked them one per row — a ~1390px-tall section of near-empty space at
   1280px wide, with 160px tiles. Restore the wrapping row for those blocks only
   (leaving the homepage rule untouched), and pin phones to exactly two per row. */
.pt-intg .pt-logos{flex-direction:row;flex-wrap:wrap;align-items:stretch;}
@media(max-width:600px){
  .pt-intg .pt-logos{gap:12px;}
  .pt-intg .pt-logo{flex:0 1 calc(50% - 6px);min-width:0;padding:12px 14px;}
  /* names like "Global Payments" are nowrap by default and would overflow a half-width
     tile, so let them wrap onto a second line inside the fixed-height tile */
  .pt-intg .pt-logo-txt{white-space:normal;text-align:center;font-size:15px;line-height:1.25;}
  .pt-intg .pt-logo img{max-width:100%;}
}

/* FAQ — the <details> variant (pos, clock-in-clock-out).
   Two FAQ markups exist on the site. The older one (help, pricing, catering,
   gift-vouchers, table-reservation) is `.pt-faq-list` + `.pt-faq-q`/`.pt-faq-a`, which
   is what the theme CSS targets, and it looks right. The newer one is native
   `<details class="pt-faq-item"><summary>` inside `.pt-faq-grid` — none of those
   selectors matched it, so the summary and answer got ZERO padding, the list ran the
   full 1152px container instead of 800px, and the browser's native ▶ marker showed
   instead of the styled +. Bring it up to parity with the older one. */
.pt-faq-grid{max-width:800px;margin:0 auto;}
/* these pages put a bare <h2> where the others use .pt-sec-hd */
.pt-faq > .pt-container > h2{text-align:center;max-width:640px;margin:0 auto 40px;
  font-size:44px;font-weight:800;color:#303133;letter-spacing:-.03em;}
.pt-faq-item > summary{padding:20px 24px;font-size:16px;font-weight:700;color:#303133;
  cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;
  list-style:none;}
.pt-faq-item > summary::-webkit-details-marker{display:none;}
.pt-faq-item > summary::after{content:"\002B";font-size:20px;font-weight:400;color:#64748B;
  flex:none;transition:transform .2s;}
.pt-faq-item[open] > summary::after{transform:rotate(45deg);}
.pt-faq-item > p{padding:0 24px 20px;margin:0;font-size:15px;color:#64748B;line-height:1.7;}
@media(max-width:600px){
  .pt-faq > .pt-container > h2{font-size:28px;margin-bottom:28px;}
  .pt-faq-item > summary{padding:16px 18px;font-size:15px;}
  .pt-faq-item > p{padding:0 18px 16px;font-size:14.5px;}
}

/* ============================================================================
   PTV — venue-type section, VARIATION 2 (test page only).
   Composition borrowed from the premiercs.com "Built for every role" section:
   bracketed eyebrow pill, large LIGHT-weight heading, very light body copy, and a
   three-column band [name | image | copy] with the image in the middle, all
   vertically centred, driven by prev/next arrows + a dot rail + a label strip.
   Namespaced .ptv-* so it cannot touch .ptx-* (variation 1) or anything else.
   ========================================================================= */
.ptv{position:relative;overflow:hidden;padding:104px 0 96px;color:#fff;
  background:
    radial-gradient(900px 460px at 50% -6%, rgba(43,192,164,.20), transparent 62%),
    radial-gradient(700px 400px at 12% 104%, rgba(56,110,190,.14), transparent 66%),
    linear-gradient(180deg,#0C0F1A 0%,#10131F 48%,#0C0F1A 100%);}
.ptv::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 70%);
          mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 70%);}
.ptv-wrap{position:relative;z-index:2;max-width:1400px;margin:0 auto;padding:0 32px;text-align:center;}

/* ---- header ---- */
.ptv-eyebrow{display:inline-flex;align-items:center;font-size:12px;font-weight:400;
  letter-spacing:.4px;color:#fff;background:rgba(255,255,255,.1);
  padding:8px 16px;border-radius:100px;}
.ptv-title{font-size:56px;font-weight:300;line-height:1.28;letter-spacing:-.02em;
  margin:24px auto 0;max-width:24ch;color:#fff;text-wrap:balance;}
.ptv-title em{font-style:normal;font-weight:500;
  background:linear-gradient(120deg,#7FF0D6,#2BC0A4 60%,#8FC4FF);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.ptv-lede{font-size:16px;font-weight:300;line-height:1.55;color:rgba(228,231,242,.72);
  max-width:62ch;margin:20px auto 0;}
.ptv-top-cta{display:inline-flex;align-items:center;gap:9px;margin-top:26px;
  padding:12px 14px 12px 22px;border-radius:100px;font-size:14.5px;font-weight:500;
  color:#04120E;text-decoration:none;background:linear-gradient(135deg,#5EE0C0,#2BC0A4);
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s;}
.ptv-top-cta span.ptv-arrow{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:rgba(4,18,14,.16);font-size:13px;}
.ptv-top-cta:hover{transform:translateY(-2px);box-shadow:0 18px 34px -16px rgba(43,192,164,.95);color:#04120E;}

/* ---- stage ---- */
.ptv-stage{position:relative;margin-top:66px;}
.ptv-band{display:grid;grid-template-columns:387fr 331fr 387fr;gap:48px;align-items:center;
  max-width:1201px;margin:0 auto;text-align:left;}
.ptv-name{font-size:32px;font-weight:300;line-height:1.3;letter-spacing:-.01em;margin:0;color:#fff;}
.ptv-kicker{display:block;font-size:11.5px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;
  color:rgba(94,224,192,.9);margin-bottom:12px;}
.ptv-shot{position:relative;margin:0;width:100%;height:320px;border-radius:16px;overflow:hidden;
  background:#0f1714;box-shadow:0 26px 56px -26px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.08);}
.ptv-shot img{width:100%;height:100%;object-fit:cover;display:block;}
.ptv-shot figcaption{position:absolute;left:12px;bottom:12px;font-size:10.5px;font-weight:500;
  letter-spacing:1px;text-transform:uppercase;color:#CFFDEF;background:rgba(6,20,16,.72);
  border:1px solid rgba(94,224,192,.3);padding:5px 10px;border-radius:100px;}
.ptv-copy p{font-size:16px;font-weight:300;line-height:1.55;color:rgba(255,255,255,.82);margin:0 0 18px;}
.ptv-feats{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:9px;}
.ptv-feats li{position:relative;padding-left:20px;font-size:14px;font-weight:300;color:rgba(255,255,255,.68);}
.ptv-feats li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;
  background:#2BC0A4;box-shadow:0 0 8px 1px rgba(43,192,164,.6);}
.ptv-more{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;
  color:#7FF0D6;text-decoration:none;border-bottom:1px solid rgba(127,240,214,.35);padding-bottom:2px;
  transition:gap .25s,border-color .25s;}
.ptv-more:hover{gap:12px;border-color:#7FF0D6;color:#7FF0D6;}

/* ---- controls ---- */
.ptv-rail{position:absolute;left:6px;top:50%;transform:translateY(-50%);display:grid;gap:14px;}
.ptv-rail button{width:22px;height:22px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center;}
.ptv-rail i{display:block;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.28);transition:background .3s,transform .3s;}
.ptv-rail button[aria-current="true"] i{background:#2BC0A4;transform:scale(1.35);box-shadow:0 0 10px 2px rgba(43,192,164,.6);}
.ptv-arrows{display:flex;gap:10px;justify-content:flex-end;max-width:1201px;margin:26px auto 0;}
.ptv-arrows button{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);color:#fff;
  transition:background .3s,border-color .3s,transform .3s;}
.ptv-arrows button:hover{background:rgba(43,192,164,.16);border-color:rgba(43,192,164,.5);transform:translateY(-2px);}
.ptv-arrows svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.ptv-strip{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin:34px auto 0;max-width:1201px;
  border-top:1px solid rgba(255,255,255,.08);padding-top:20px;}
.ptv-strip button{border:0;background:none;cursor:pointer;font-family:inherit;font-size:13px;font-weight:400;
  color:rgba(255,255,255,.42);padding:8px 14px;border-radius:100px;transition:color .3s,background .3s;}
.ptv-strip button:hover{color:#fff;}
.ptv-strip button[aria-current="true"]{color:#04120E;background:linear-gradient(135deg,#5EE0C0,#2BC0A4);font-weight:600;}

/* ---- swap motion ---- */
.ptv-anim{opacity:0;transform:translateY(12px);}
.ptv-in{opacity:1;transform:none;transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1);}

@media(max-width:1080px){
  .ptv-band{grid-template-columns:1fr 1fr;gap:34px;max-width:760px;}
  .ptv-shot{grid-row:span 2;height:100%;min-height:300px;}
  .ptv-rail{display:none;}
}
@media(max-width:760px){
  .ptv{padding:72px 0 68px;}
  .ptv-wrap{padding:0 20px;}
  .ptv-title{font-size:32px;}
  .ptv-lede{font-size:15px;}
  .ptv-stage{margin-top:42px;}
  .ptv-band{grid-template-columns:1fr;gap:22px;text-align:center;}
  .ptv-shot{grid-row:auto;height:220px;min-height:0;order:-1;}
  .ptv-name{font-size:26px;}
  .ptv-feats li{text-align:left;}
  .ptv-arrows{justify-content:center;margin-top:22px;}
  .ptv-strip{gap:4px;padding-top:16px;margin-top:24px;}
  .ptv-strip button{font-size:12px;padding:7px 11px;}
}
@media(prefers-reduced-motion:reduce){
  .ptv-anim,.ptv-in{opacity:1!important;transform:none!important;transition:none!important;}
  .ptv-arrows button,.ptv-top-cta,.ptv-more,.ptv-rail i{transition:none!important;}
}

/* "Your restaurant, connected." — give the video more room.
   The section was a flat `1fr 1fr` with an 80px gap and the frame capped at 520px, so
   the video sat at 520x293 beside a 504px-tall text block. Widen the media column and
   lift the cap for this section only (.pt-features exists on the homepage alone).
   Scoped to min-width:1025px so it cannot override the 1-column stacking that
   @media(max-width:1024px) sets further up the file. */
@media(min-width:1025px){
  .pt-features .pt-container{grid-template-columns:1fr 1.1fr;gap:40px;}
  .pt-features .pt-sframe{max-width:680px;}
}


/* ============================================================================
   Logo marquee — "Trusted by leading restaurants".
   Same structure premiercs.com uses: row (viewport) > track > two IDENTICAL
   groups, the track sliding exactly one group width so the wrap is invisible.
   Motion lives in JS (rAF) rather than a CSS animation, because the rows have
   to speed up with scroll velocity — which a keyframe animation cannot do.
   Rows alternate direction: 1 and 3 travel left->right, 2 travels right->left.
   ========================================================================= */
.pt-mq{width:100%;}
.pt-mq-row{position:relative;overflow:hidden;}
.pt-mq-row + .pt-mq-row{margin-top:28px;}
/* Premier lets logos run to the viewport edge; Postree's container is 1200px, so a
   hard clip would read as a cut. Fade the ends instead. */
.pt-mq-row{-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
                   mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);}
.pt-mq-track{display:flex;flex-wrap:nowrap;width:max-content;will-change:transform;
  backface-visibility:hidden;}
.pt-mq-group{display:flex;flex:0 0 auto;align-items:center;}
.pt-mq-cell{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:200px;height:56px;}
.pt-mq-cell img{max-height:50px;max-width:150px;width:auto;height:auto;object-fit:contain;
  opacity:.85;transition:opacity .3s ease,transform .3s ease;}
.pt-mq-cell img:hover{opacity:1;transform:translateY(-2px);}
@media(max-width:600px){
  .pt-mq-cell{width:150px;height:48px;}
  .pt-mq-cell img{max-height:40px;max-width:118px;}
  .pt-mq-row + .pt-mq-row{margin-top:18px;}
}
/* no JS / reduced motion: the strip just sits still, centred and wrapped */
@media(prefers-reduced-motion:reduce){
  .pt-mq-row{-webkit-mask-image:none;mask-image:none;}
  .pt-mq-track{justify-content:center;flex-wrap:wrap;width:100%;transform:none!important;}
}

/* ============================================================================
   PTR — venue types as a printed ticket (test page, variation 3).
   The venue config is rendered as a Postree docket: capabilities become line
   items with ON flags. Switching venue re-prints the ticket — the paper's
   height animates 0 -> full, which reveals the lines top-to-bottom on its own,
   the way a thermal printer feeds. Needs no photography.
   Namespaced .ptr-* so it cannot touch .ptx-* or .ptv-*.
   ========================================================================= */
.ptr{position:relative;overflow:hidden;padding:100px 0 108px;color:#fff;
  background:
    radial-gradient(900px 460px at 50% -6%, rgba(43,192,164,.18), transparent 62%),
    radial-gradient(680px 380px at 88% 108%, rgba(56,110,190,.13), transparent 66%),
    linear-gradient(180deg,#0C0F1A 0%,#10131F 50%,#0C0F1A 100%);}
.ptr-wrap{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 32px;text-align:center;}
.ptr-eyebrow{display:inline-flex;align-items:center;font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;
  font-size:12px;letter-spacing:.4px;color:#fff;background:rgba(255,255,255,.1);padding:8px 16px;border-radius:100px;}
.ptr-title{font-size:52px;font-weight:300;line-height:1.24;letter-spacing:-.02em;
  margin:22px auto 0;max-width:20ch;color:#fff;text-wrap:balance;}
.ptr-title em{font-style:normal;font-weight:500;background:linear-gradient(120deg,#7FF0D6,#2BC0A4 60%,#8FC4FF);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.ptr-lede{font-size:16px;font-weight:300;line-height:1.55;color:rgba(228,231,242,.7);max-width:58ch;margin:18px auto 0;}

/* ---- venue picker ---- */
.ptr-pick{display:inline-flex;gap:2px;padding:5px;border-radius:100px;margin-top:34px;max-width:100%;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);overflow-x:auto;scrollbar-width:none;}
.ptr-pick::-webkit-scrollbar{display:none;}
.ptr-pick button{border:0;background:none;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:500;
  color:rgba(255,255,255,.55);padding:10px 17px;border-radius:100px;white-space:nowrap;
  transition:color .3s,background .3s;}
.ptr-pick button:hover{color:#fff;}
.ptr-pick button[aria-selected="true"]{color:#04120E;background:linear-gradient(135deg,#5EE0C0,#2BC0A4);font-weight:600;}
.ptr-pick button:focus-visible{box-shadow:0 0 0 2px #5EE0C0;}

/* ---- stage: stable height so switching never reflows the page ---- */
.ptr-stage{position:relative;display:flex;justify-content:center;align-items:flex-start;margin-top:50px;}
.ptr-stack{position:absolute;top:0;width:340px;height:100%;border-radius:3px;background:#E8E6E0;
  transform-origin:top center;pointer-events:none;}
.ptr-stack.a{transform:rotate(-3.5deg);opacity:.16;}
.ptr-stack.b{transform:rotate(2.6deg);opacity:.24;}

/* drop-shadow (not box-shadow) so the shadow follows the torn edge through the mask */
.ptr-sheet{position:relative;filter:drop-shadow(0 26px 44px rgba(0,0,0,.6));}
.ptr-paper{position:relative;width:340px;background:#FBFAF7;color:#1c2530;text-align:left;overflow:hidden;
  font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;border-radius:3px 3px 0 0;
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 13px) no-repeat,
    conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) bottom/18px 13px repeat-x;
          mask:linear-gradient(#000 0 0) top/100% calc(100% - 13px) no-repeat,
    conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) bottom/18px 13px repeat-x;}
.ptr-inner{padding:26px 26px 34px;}

.ptr-brand{display:flex;align-items:center;justify-content:center;gap:7px;}
.ptr-brand i{width:17px;height:17px;border-radius:50%;background:linear-gradient(135deg,#5EE0C0,#1B8F7A);}
.ptr-brand span{font-size:12px;font-weight:700;letter-spacing:2px;}
.ptr-tag{text-align:center;font-size:9.5px;letter-spacing:1.6px;color:#8b95a3;margin-top:4px;}
.ptr-rule{border-top:1px dashed #c9cdd4;margin:12px 0;}
.ptr-name{text-align:center;font-size:20px;font-weight:700;letter-spacing:.5px;margin:2px 0 3px;}
.ptr-sub{text-align:center;font-size:10.5px;color:#6b7480;letter-spacing:.4px;line-height:1.55;}
.ptr-meta{display:flex;justify-content:space-between;font-size:10px;color:#8b95a3;letter-spacing:.5px;}
.ptr-li{display:flex;align-items:baseline;font-size:11.5px;margin:9px 0;color:#28313c;}
.ptr-li .n{white-space:nowrap;}
.ptr-li .d{flex:1;border-bottom:1px dotted #c2c7cf;margin:0 6px;transform:translateY(-3px);}
.ptr-li .v{color:#12977c;font-weight:700;}
.ptr-tot{display:flex;justify-content:space-between;font-size:12.5px;font-weight:700;margin-top:6px;}
.ptr-cta{display:block;margin-top:18px;text-align:center;font-size:11px;font-weight:700;letter-spacing:1.2px;
  border:1px dashed #9aa2ac;padding:11px;color:#1c2530;text-decoration:none;transition:background .25s,border-color .25s;}
.ptr-cta:hover{background:#1c2530;border-color:#1c2530;color:#FBFAF7;}
.ptr-code{display:flex;gap:2px;justify-content:center;align-items:flex-end;height:34px;margin-top:16px;}
.ptr-code i{display:block;background:#1c2530;}
.ptr-foot{text-align:center;font-size:9px;color:#9aa2ac;letter-spacing:1px;margin-top:9px;}

@media(max-width:760px){
  .ptr{padding:72px 0 76px;}
  .ptr-wrap{padding:0 20px;}
  .ptr-title{font-size:31px;}
  .ptr-lede{font-size:15px;}
  .ptr-pick{justify-content:flex-start;}
  .ptr-stage{margin-top:38px;}
  .ptr-paper,.ptr-stack{width:300px;}
  .ptr-inner{padding:22px 20px 30px;}
}
@media(prefers-reduced-motion:reduce){
  .ptr-paper{height:auto!important;transition:none!important;}
  .ptr-cta{transition:none;}
}

/* stack refinement: give the sheets behind the same torn edge and a paper tone so
   they read as a stack of tickets rather than grey slabs */
.ptr-stack{background:#DCD9D1;
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 13px) no-repeat,
    conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) bottom/18px 13px repeat-x;
          mask:linear-gradient(#000 0 0) top/100% calc(100% - 13px) no-repeat,
    conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) bottom/18px 13px repeat-x;}
.ptr-stack.a{transform:rotate(-2.2deg) translateY(5px);opacity:.30;}
.ptr-stack.b{transform:rotate(1.7deg) translateY(2px);opacity:.19;}

/* ============================================================================
   PTP — "The room reshapes" (test page, variation 4).
   A floor plan that rearranges itself between venue types. Rather than morphing
   one complex path (which needs matched node counts and breaks easily), a fixed
   pool of 14 units transitions x/y/width/height/rx between layouts — tables
   slide apart into a bar rail, a counter stretches across the front, a hotel
   splits into zones. Units a layout does not need collapse to zero at centre.
   Needs no photography. Namespaced .ptp-*.
   ========================================================================= */
.ptp{position:relative;overflow:hidden;padding:100px 0 104px;color:#fff;
  background:
    radial-gradient(900px 460px at 50% -6%, rgba(43,192,164,.17), transparent 62%),
    radial-gradient(680px 380px at 10% 106%, rgba(56,110,190,.13), transparent 66%),
    linear-gradient(180deg,#0C0F1A 0%,#10131F 50%,#0C0F1A 100%);}
.ptp-wrap{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 32px;text-align:center;}
.ptp-eyebrow{display:inline-flex;align-items:center;font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;
  font-size:12px;letter-spacing:.4px;color:#fff;background:rgba(255,255,255,.1);padding:8px 16px;border-radius:100px;}
.ptp-title{font-size:52px;font-weight:300;line-height:1.24;letter-spacing:-.02em;
  margin:22px auto 0;max-width:20ch;color:#fff;}
.ptp-title em{font-style:normal;font-weight:500;background:linear-gradient(120deg,#7FF0D6,#2BC0A4 60%,#8FC4FF);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.ptp-lede{font-size:16px;font-weight:300;line-height:1.55;color:rgba(228,231,242,.7);max-width:58ch;margin:18px auto 0;}

.ptp-pick{display:inline-flex;gap:2px;padding:5px;border-radius:100px;margin-top:34px;max-width:100%;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);overflow-x:auto;scrollbar-width:none;}
.ptp-pick::-webkit-scrollbar{display:none;}
.ptp-pick button{border:0;background:none;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:500;
  color:rgba(255,255,255,.55);padding:10px 17px;border-radius:100px;white-space:nowrap;transition:color .3s,background .3s;}
.ptp-pick button:hover{color:#fff;}
.ptp-pick button[aria-selected="true"]{color:#04120E;background:linear-gradient(135deg,#5EE0C0,#2BC0A4);font-weight:600;}
.ptp-pick button:focus-visible{box-shadow:0 0 0 2px #5EE0C0;}

/* ---- stage: plan left, copy right ---- */
.ptp-stage{display:grid;grid-template-columns:1.35fr .65fr;gap:48px;align-items:center;
  margin-top:48px;text-align:left;}
.ptp-room{position:relative;border-radius:20px;padding:14px;
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 30px 60px -30px rgba(0,0,0,.9);}
.ptp-room svg{display:block;width:100%;height:auto;}
.ptp-floor{fill:none;stroke:rgba(255,255,255,.13);stroke-width:1.5;}
.ptp-dots{fill:rgba(255,255,255,.07);}
/* the units. geometry props are CSS-animatable in modern browsers; if a browser
   refuses, the layout still lands correctly, just without the tween */
.ptp-u{transition:x .72s cubic-bezier(.5,0,.15,1),y .72s cubic-bezier(.5,0,.15,1),
  width .72s cubic-bezier(.5,0,.15,1),height .72s cubic-bezier(.5,0,.15,1),
  rx .72s cubic-bezier(.5,0,.15,1),opacity .45s ease,fill .55s ease;}
.ptp-u.seat{fill:rgba(255,255,255,.26);}
.ptp-u.fix{fill:rgba(43,192,164,.62);}
.ptp-tag{position:absolute;left:26px;bottom:26px;display:inline-flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;font-size:10.5px;letter-spacing:1.2px;
  text-transform:uppercase;color:#CFFDEF;background:rgba(6,20,16,.7);border:1px solid rgba(94,224,192,.3);
  padding:6px 12px;border-radius:100px;}
.ptp-tag i{width:5px;height:5px;border-radius:50%;background:#2BC0A4;box-shadow:0 0 8px 2px rgba(43,192,164,.8);}

.ptp-kicker{display:block;font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(94,224,192,.9);margin-bottom:12px;}
.ptp-name{font-size:30px;font-weight:300;line-height:1.25;letter-spacing:-.01em;margin:0 0 14px;color:#fff;}
.ptp-desc{font-size:15.5px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.75);margin:0 0 20px;}
.ptp-feats{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px;}
.ptp-feats li{position:relative;padding-left:20px;font-size:14px;font-weight:300;color:rgba(255,255,255,.7);}
.ptp-feats li::before{content:'';position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:2px;
  background:#2BC0A4;box-shadow:0 0 8px 1px rgba(43,192,164,.55);}
.ptp-more{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;color:#7FF0D6;
  text-decoration:none;border-bottom:1px solid rgba(127,240,214,.35);padding-bottom:2px;transition:gap .25s,border-color .25s;}
.ptp-more:hover{gap:12px;border-color:#7FF0D6;color:#7FF0D6;}

.ptp-anim{opacity:0;transform:translateY(10px);}
.ptp-in{opacity:1;transform:none;transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1);}

@media(max-width:900px){
  .ptp-stage{grid-template-columns:1fr;gap:28px;}
}
@media(max-width:760px){
  .ptp{padding:72px 0 76px;}
  .ptp-wrap{padding:0 20px;}
  .ptp-title{font-size:31px;}
  .ptp-lede{font-size:15px;}
  .ptp-pick{justify-content:flex-start;}
  .ptp-stage{margin-top:34px;}
  .ptp-room{padding:10px;border-radius:16px;}
  .ptp-name{font-size:25px;}
  .ptp-tag{left:18px;bottom:18px;}
}
@media(prefers-reduced-motion:reduce){
  .ptp-u{transition:none!important;}
  .ptp-anim,.ptp-in{opacity:1!important;transform:none!important;transition:none!important;}
}

/* ============================================================================
   PTC — "The service day" (test page, variation 5).
   A 24-hour scale. Selecting a venue lights its trading window and slides four
   capability markers to the moment each one matters — course firing at dinner
   peak, happy-hour pricing at 17:00, room charging across a hotel's morning.
   Windows and marker times are DEMO DATA and need replacing with real hours.
   Needs no photography. Namespaced .ptc-*.
   ========================================================================= */
.ptc{position:relative;overflow:hidden;padding:100px 0 104px;color:#fff;
  background:
    radial-gradient(900px 460px at 50% -6%, rgba(43,192,164,.16), transparent 62%),
    radial-gradient(700px 380px at 92% 106%, rgba(56,110,190,.13), transparent 66%),
    linear-gradient(180deg,#0C0F1A 0%,#10131F 50%,#0C0F1A 100%);}
.ptc-wrap{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 32px;text-align:center;}
.ptc-eyebrow{display:inline-flex;align-items:center;font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;
  font-size:12px;letter-spacing:.4px;color:#fff;background:rgba(255,255,255,.1);padding:8px 16px;border-radius:100px;}
.ptc-title{font-size:52px;font-weight:300;line-height:1.24;letter-spacing:-.02em;margin:22px auto 0;max-width:20ch;color:#fff;}
.ptc-title em{font-style:normal;font-weight:500;background:linear-gradient(120deg,#7FF0D6,#2BC0A4 60%,#8FC4FF);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.ptc-lede{font-size:16px;font-weight:300;line-height:1.55;color:rgba(228,231,242,.7);max-width:58ch;margin:18px auto 0;}

.ptc-pick{display:inline-flex;gap:2px;padding:5px;border-radius:100px;margin-top:34px;max-width:100%;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);overflow-x:auto;scrollbar-width:none;}
.ptc-pick::-webkit-scrollbar{display:none;}
.ptc-pick button{border:0;background:none;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:500;
  color:rgba(255,255,255,.55);padding:10px 17px;border-radius:100px;white-space:nowrap;transition:color .3s,background .3s;}
.ptc-pick button:hover{color:#fff;}
.ptc-pick button[aria-selected="true"]{color:#04120E;background:linear-gradient(135deg,#5EE0C0,#2BC0A4);font-weight:600;}
.ptc-pick button:focus-visible{box-shadow:0 0 0 2px #5EE0C0;}

/* ---- the day ---- */
.ptc-day{margin-top:46px;text-align:left;border-radius:20px;padding:30px 32px 26px;
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 30px 60px -30px rgba(0,0,0,.9);}
.ptc-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:22px;flex-wrap:wrap;}
.ptc-name{font-size:26px;font-weight:300;letter-spacing:-.01em;margin:0;color:#fff;}
.ptc-hours{font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;font-size:12px;letter-spacing:1px;
  color:rgba(94,224,192,.9);}

.ptc-row{display:grid;grid-template-columns:172px 1fr;align-items:center;gap:16px;min-height:38px;}
.ptc-rl{font-size:13px;font-weight:300;color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:opacity .3s ease;}
.ptc-rt{position:relative;height:38px;}
/* the shared time scale: gridlines every 6h */
.ptc-rt::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 25%);}
.ptc-track{position:absolute;left:0;right:0;top:50%;height:2px;transform:translateY(-50%);
  background:rgba(255,255,255,.08);border-radius:2px;}

/* trading window */
.ptc-win{position:absolute;top:50%;height:14px;transform:translateY(-50%);border-radius:100px;
  background:linear-gradient(90deg,#2BC0A4,#5EE0C0);box-shadow:0 0 18px 2px rgba(43,192,164,.35);
  transition:left .7s cubic-bezier(.5,0,.15,1),width .7s cubic-bezier(.5,0,.15,1),opacity .4s ease;}
.ptc-peak{position:absolute;top:50%;width:10px;height:10px;margin-left:-5px;transform:translateY(-50%) rotate(45deg);
  background:#EAFFF8;box-shadow:0 0 12px 3px rgba(94,224,192,.75);
  transition:left .7s cubic-bezier(.5,0,.15,1);}

/* capability markers */
.ptc-pin{position:absolute;top:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;
  transform:translateY(-50%);background:#2BC0A4;box-shadow:0 0 0 4px rgba(43,192,164,.18),0 0 12px 2px rgba(43,192,164,.5);
  transition:left .7s cubic-bezier(.5,0,.15,1);}
.ptc-pin b{position:absolute;left:50%;top:-24px;transform:translateX(-50%);
  font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;font-size:10px;font-weight:500;
  letter-spacing:.6px;color:rgba(207,253,239,.92);background:rgba(6,20,16,.72);border:1px solid rgba(94,224,192,.28);
  padding:2px 7px;border-radius:100px;white-space:nowrap;}

/* hour axis */
.ptc-axis{position:relative;height:26px;}
.ptc-axis span{position:absolute;top:6px;transform:translateX(-50%);
  font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;font-size:10.5px;letter-spacing:1px;
  color:rgba(255,255,255,.34);}
.ptc-note{margin-top:16px;font-size:12px;font-weight:300;color:rgba(255,255,255,.4);}

@media(max-width:760px){
  .ptc{padding:72px 0 76px;}
  .ptc-wrap{padding:0 20px;}
  .ptc-title{font-size:31px;}
  .ptc-lede{font-size:15px;}
  .ptc-pick{justify-content:flex-start;}
  .ptc-day{padding:22px 18px 20px;border-radius:16px;}
  .ptc-row{grid-template-columns:1fr;gap:2px;min-height:0;margin-bottom:10px;}
  .ptc-rl{font-size:12.5px;}
  .ptc-rt{height:30px;}
  .ptc-name{font-size:22px;}
}
@media(prefers-reduced-motion:reduce){
  .ptc-win,.ptc-pin,.ptc-peak,.ptc-rl{transition:none!important;}
}

/* ---- PTR polish: fan the six tickets across the stage ----
   The single centred ticket left ~420px of dead space either side on a 1180px
   container. All six now sit on the stage; neighbours are offset, rotated,
   scaled and blurred, which fills the width and says "six configurations"
   without making the neighbouring content readable (so the print still reveals). */
.ptr-stage{display:block;position:relative;}
.ptr-sheet{position:absolute;top:0;left:50%;width:360px;margin-left:-180px;
  transform-origin:50% 12%;
  transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .5s ease,filter .5s ease;
  filter:drop-shadow(0 26px 44px rgba(0,0,0,.6));}
.ptr-sheet:not([aria-hidden="false"]){cursor:pointer;}
.ptr-paper{width:360px;
  /* a touch warmer, with a very faint paper tooth */
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.014) 0 1px,transparent 1px 3px),
    #FCFBF8;}
.ptr-stack{display:none;}
@media(max-width:1100px){
  .ptr-sheet{width:330px;margin-left:-165px;}
  .ptr-paper{width:330px;}
}
@media(max-width:760px){
  .ptr-sheet{width:300px;margin-left:-150px;}
  .ptr-paper{width:300px;}
}

/* ---- PTR: make the module lines carry weight, and type them ----
   The reveal read as a card appearing rather than content printing, so the four
   module lines were being skipped. They now type character by character with a
   caret, and sit heavier so they hold the eye once printed. */
.ptr-li{font-size:12px;font-weight:500;color:#1c2530;margin:11px 0;}
.ptr-li .n{font-weight:500;letter-spacing:.1px;}
.ptr-li .d{border-bottom-color:#cfd4db;}
.ptr-li .v{font-weight:700;color:#0f9e84;opacity:1;transition:opacity .3s ease;}
/* printer caret, only present while a line is being typed */
.ptr-li .n.ptr-typing::after{content:'';display:inline-block;width:5px;height:11px;
  background:#1c2530;margin-left:2px;vertical-align:-1px;animation:ptrCaret .55s steps(1,end) infinite;}
@keyframes ptrCaret{50%{opacity:0;}}
@media(prefers-reduced-motion:reduce){
  .ptr-li .n.ptr-typing::after{display:none;}
  .ptr-li .v{transition:none;}
}

/* ============================================================================
   PTK — the ticket, variation 2 (test page).
   Same docket as .ptr, different staging: instead of a centred fan of six, the
   ticket feeds out of a printer on the right while a vertical venue list runs
   down the left. Reuses the .ptr-* ticket internals so both variations stay
   visually identical inside the paper — only the composition differs.
   ========================================================================= */
.ptk{position:relative;overflow:hidden;padding:100px 0 104px;color:#fff;
  background:
    radial-gradient(820px 420px at 78% -4%, rgba(43,192,164,.16), transparent 62%),
    radial-gradient(640px 360px at 8% 104%, rgba(56,110,190,.12), transparent 66%),
    linear-gradient(180deg,#0C0F1A 0%,#10131F 52%,#0C0F1A 100%);}
.ptk-wrap{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 32px;}
.ptk-stage{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}

.ptk-eyebrow{display:inline-flex;align-items:center;font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;
  font-size:12px;letter-spacing:.4px;color:#fff;background:rgba(255,255,255,.1);padding:8px 16px;border-radius:100px;}
.ptk-title{font-size:48px;font-weight:300;line-height:1.2;letter-spacing:-.02em;margin:22px 0 0;color:#fff;max-width:14ch;}
.ptk-title em{font-style:normal;font-weight:500;background:linear-gradient(120deg,#7FF0D6,#2BC0A4 60%,#8FC4FF);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.ptk-lede{font-size:16px;font-weight:300;line-height:1.55;color:rgba(228,231,242,.7);margin:16px 0 0;max-width:44ch;}

/* vertical venue list replaces the pill picker */
.ptk-list{display:grid;gap:2px;margin-top:30px;}
.ptk-list button{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  padding:13px 16px;border:0;border-left:2px solid transparent;border-radius:0 12px 12px 0;cursor:pointer;
  background:transparent;font-family:inherit;font-size:15px;font-weight:400;color:rgba(255,255,255,.58);
  text-align:left;transition:background .3s,color .3s,border-color .3s;}
.ptk-list button:hover{color:#fff;background:rgba(255,255,255,.04);}
.ptk-list button[aria-selected="true"]{color:#fff;background:rgba(255,255,255,.07);border-left-color:#2BC0A4;font-weight:500;}
.ptk-list .ix{font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;font-size:11px;letter-spacing:1px;
  color:rgba(94,224,192,.65);}
.ptk-list button[aria-selected="true"] .ix{color:#5EE0C0;}
.ptk-list button:focus-visible{outline:2px solid #5EE0C0;outline-offset:-2px;}

/* the printer the docket feeds out of */
.ptk-rig{display:flex;flex-direction:column;align-items:center;}
.ptk-printer{position:relative;width:392px;max-width:100%;height:74px;border-radius:18px 18px 8px 8px;
  background:linear-gradient(180deg,#2B313A 0%,#1A1F26 62%,#12161B 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(0,0,0,.6),
    0 24px 46px -22px rgba(0,0,0,.95);z-index:3;}
.ptk-printer .mark{position:absolute;left:22px;top:15px;font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;
  font-size:10px;letter-spacing:2.2px;color:rgba(255,255,255,.42);}
.ptk-printer .led{position:absolute;right:22px;top:17px;width:7px;height:7px;border-radius:50%;
  background:#2BC0A4;box-shadow:0 0 10px 2px rgba(43,192,164,.75);}
.ptk-printer .slot{position:absolute;left:26px;right:26px;bottom:11px;height:9px;border-radius:5px;
  background:#080B0E;box-shadow:inset 0 2px 5px rgba(0,0,0,.95),0 1px 0 rgba(255,255,255,.05);}
.ptk-out{position:relative;margin-top:-5px;z-index:2;filter:drop-shadow(0 26px 44px rgba(0,0,0,.75));}
.ptk-out .ptr-paper{width:320px;}
.ptk-cap{margin-top:22px;font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;
  font-size:11px;letter-spacing:1px;color:rgba(255,255,255,.34);text-align:center;}

@media(max-width:900px){
  .ptk-stage{grid-template-columns:1fr;gap:38px;}
  .ptk-title{max-width:none;}
  .ptk-lede{max-width:none;}
  .ptk-list{grid-template-columns:1fr 1fr;}
}
@media(max-width:760px){
  .ptk{padding:72px 0 76px;}
  .ptk-wrap{padding:0 20px;}
  .ptk-title{font-size:30px;}
  .ptk-lede{font-size:15px;}
  .ptk-list{grid-template-columns:1fr;}
  .ptk-printer{width:330px;height:64px;}
  .ptk-out .ptr-paper{width:300px;}
}

/* ============================================================================
   Thermal realism pass — applies to the docket in BOTH ticket variations
   (.ptr and .ptk share the paper internals) plus the printer hardware in .ptk.
   Three things were giving it away: crisp vector text at uniform density, a
   perfectly repeating triangular tear, and a printer that was a flat slab.
   ========================================================================= */

/* ---- paper: warm thermal stock, fibre grain, print-head banding ---- */
.ptr-paper{
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.021) 0 1px, transparent 1px 4px),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='160'%20height='160'%20filter='url(%23n)'%20opacity='0.055'/%3E%3C/svg%3E"),
    #F7F5EF;
  background-size:auto, 160px 160px, auto;
}
/* the tear is torn, not cut — irregular teeth from a seeded path, not a repeat */
.ptr-paper{
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 15px) no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20360%2015'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,0%20H360%20V5%20L3.5,12.1%20L7.0,2.9%20L12.0,10.3%20L17.0,3.4%20L22.5,11.9%20L28.0,4.4%20L32.5,11.5%20L37.0,5.1%20L42.0,14.1%20L47.0,4.8%20L51.5,10.4%20L56.0,3.4%20L59.5,11.6%20L63.0,4.9%20L69.0,10.6%20L75.0,2.7%20L80.0,10.8%20L85.0,5.1%20L90.5,12.0%20L96.0,5.6%20L102.5,12.0%20L109.0,2.6%20L115.5,10.7%20L122.0,4.9%20L128.0,14.7%20L134.0,2.3%20L137.5,12.3%20L141.0,4.0%20L145.5,14.1%20L150.0,5.9%20L155.0,13.5%20L160.0,3.1%20L166.0,11.2%20L172.0,4.8%20L176.5,10.8%20L181.0,4.9%20L187.5,12.8%20L194.0,3.6%20L200.5,13.6%20L207.0,4.6%20L212.0,14.9%20L217.0,3.8%20L222.0,10.8%20L227.0,3.2%20L232.0,12.1%20L237.0,3.5%20L241.5,14.4%20L246.0,2.1%20L251.0,13.4%20L256.0,3.3%20L260.5,11.6%20L265.0,3.7%20L268.5,14.3%20L272.0,3.6%20L278.5,14.0%20L285.0,6.0%20L291.0,12.3%20L297.0,5.5%20L300.5,15.0%20L304.0,3.1%20L308.0,13.8%20L312.0,2.6%20L316.5,11.0%20L321.0,2.3%20L326.0,12.2%20L331.0,5.1%20L336.5,13.3%20L342.0,5.2%20L348.5,14.5%20L355.0,2.2%20L358.5,12.5%20L360.0,3.5%20L360,0%20Z'%20fill='%23000'/%3E%3C/svg%3E") bottom/100% 15px no-repeat;
          mask:linear-gradient(#000 0 0) top/100% calc(100% - 15px) no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20360%2015'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,0%20H360%20V5%20L3.5,12.1%20L7.0,2.9%20L12.0,10.3%20L17.0,3.4%20L22.5,11.9%20L28.0,4.4%20L32.5,11.5%20L37.0,5.1%20L42.0,14.1%20L47.0,4.8%20L51.5,10.4%20L56.0,3.4%20L59.5,11.6%20L63.0,4.9%20L69.0,10.6%20L75.0,2.7%20L80.0,10.8%20L85.0,5.1%20L90.5,12.0%20L96.0,5.6%20L102.5,12.0%20L109.0,2.6%20L115.5,10.7%20L122.0,4.9%20L128.0,14.7%20L134.0,2.3%20L137.5,12.3%20L141.0,4.0%20L145.5,14.1%20L150.0,5.9%20L155.0,13.5%20L160.0,3.1%20L166.0,11.2%20L172.0,4.8%20L176.5,10.8%20L181.0,4.9%20L187.5,12.8%20L194.0,3.6%20L200.5,13.6%20L207.0,4.6%20L212.0,14.9%20L217.0,3.8%20L222.0,10.8%20L227.0,3.2%20L232.0,12.1%20L237.0,3.5%20L241.5,14.4%20L246.0,2.1%20L251.0,13.4%20L256.0,3.3%20L260.5,11.6%20L265.0,3.7%20L268.5,14.3%20L272.0,3.6%20L278.5,14.0%20L285.0,6.0%20L291.0,12.3%20L297.0,5.5%20L300.5,15.0%20L304.0,3.1%20L308.0,13.8%20L312.0,2.6%20L316.5,11.0%20L321.0,2.3%20L326.0,12.2%20L331.0,5.1%20L336.5,13.3%20L342.0,5.2%20L348.5,14.5%20L355.0,2.2%20L358.5,12.5%20L360.0,3.5%20L360,0%20Z'%20fill='%23000'/%3E%3C/svg%3E") bottom/100% 15px no-repeat;
}
/* paper curling away at the torn end */
.ptr-paper::after{content:'';position:absolute;left:0;right:0;bottom:0;height:38px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(72,64,50,.11));}

/* ---- thermal ink: warm near-black, never pure, with a touch of bleed ---- */
.ptr-inner{color:#23211E;}
.ptr-name,.ptr-tot,.ptr-brand span{color:#23211E;}
.ptr-li{color:#2A2724;}
.ptr-sub{color:#6A645C;}
.ptr-tag,.ptr-foot{color:#8E877D;}
.ptr-meta span{color:#7C766C;}
.ptr-rule{border-top-color:#C9C3B7;}
.ptr-li .d{border-bottom-color:#CBC5B9;}
.ptr-cta{border-color:#9E978B;color:#23211E;}
.ptr-code i{background:#23211E;}
/* thermal heads bleed slightly — a hairline same-colour shadow thickens strokes */
.ptr-inner .ptr-name,.ptr-inner .ptr-li,.ptr-inner .ptr-tot,
.ptr-inner .ptr-tag,.ptr-inner .ptr-sub,.ptr-inner .ptr-meta,
.ptr-inner .ptr-cta,.ptr-inner .ptr-foot,.ptr-inner .ptr-brand span{
  text-shadow:0 0 .45px currentColor;}

/* ---- printer hardware ---- */
.ptk-printer{height:96px;border-radius:20px 20px 7px 7px;
  background:linear-gradient(180deg,#3B434D 0%,#28303A 32%,#1A2027 68%,#0E1318 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),inset 0 -2px 0 rgba(0,0,0,.75),
    0 30px 54px -24px rgba(0,0,0,.95);}
.ptk-printer::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(104deg,transparent 16%,rgba(255,255,255,.06) 33%,transparent 51%);}
.ptk-printer .mark{top:18px;color:rgba(255,255,255,.38);}
.ptk-printer .seam{position:absolute;left:0;right:0;top:47px;height:1px;
  background:rgba(0,0,0,.6);box-shadow:0 1px 0 rgba(255,255,255,.055);}
.ptk-printer .led{position:absolute;top:19px;width:6px;height:6px;border-radius:50%;}
.ptk-printer .led-a{right:24px;background:#2BC0A4;box-shadow:0 0 9px 2px rgba(43,192,164,.75);}
.ptk-printer .led-b{right:40px;background:#C9A227;box-shadow:0 0 7px 1px rgba(201,162,39,.45);}
.ptk-printer .btn{position:absolute;right:22px;top:60px;width:36px;height:13px;border-radius:7px;
  background:linear-gradient(180deg,#4B535D,#2B323A);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.65);}
/* the exit slot, with depth so you can see the paper path */
.ptk-printer .slot{left:24px;right:24px;bottom:19px;height:13px;border-radius:3px;
  background:linear-gradient(180deg,#04070A 0%,#0B1015 60%,#141A20 100%);
  box-shadow:inset 0 4px 7px rgba(0,0,0,.95),inset 0 -1px 0 rgba(255,255,255,.07);}
/* machined tear bar — regular teeth here, because a metal bar IS regular */
.ptk-printer .tear{position:absolute;left:24px;right:24px;bottom:9px;height:9px;
  background:linear-gradient(180deg,#A7B0BA 0%,#6B747E 48%,#3C444D 100%);
  -webkit-mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) bottom/7px 9px repeat-x;
          mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) bottom/7px 9px repeat-x;}
/* tuck the docket up behind the tear bar so it reads as coming out of the slot */
.ptk-out{margin-top:-16px;}
@media(max-width:760px){ .ptk-printer{height:84px;} }

/* ---- realism corrections ----
   1. tear teeth were too deep for a bar-torn edge: shallower and asymmetric now
   2. the feed button was overlapping the exit slot (both sat at 60-77px)
   3. paper needs a shadow where it leaves the slot, or it looks stuck on top */
.ptr-paper{
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20360%2010'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,0%20H360%20V2.5%20L2.1,5.4%20L4.0,2.8%20L9.2,7.1%20L13.0,2.8%20L17.9,7.5%20L21.0,2.3%20L23.3,8.7%20L26.0,2.8%20L29.9,7.9%20L35.0,1.9%20L37.5,6.9%20L39.0,2.9%20L41.6,8.7%20L45.0,2.8%20L49.5,5.0%20L53.0,1.6%20L55.2,7.7%20L58.0,2.8%20L62.8,6.6%20L66.0,1.8%20L71.4,8.7%20L75.0,1.0%20L77.3,6.9%20L79.0,2.0%20L80.8,5.9%20L83.0,2.2%20L87.5,7.6%20L91.0,2.1%20L95.3,5.8%20L100.0,2.1%20L104.5,6.1%20L107.0,1.1%20L112.6,5.2%20L116.0,2.5%20L118.9,7.1%20L121.0,1.5%20L123.0,8.8%20L126.0,0.8%20L128.7,5.4%20L131.0,2.1%20L134.1,6.1%20L138.0,1.9%20L140.1,6.3%20L143.0,0.7%20L145.4,6.0%20L148.0,1.5%20L150.6,8.6%20L153.0,2.4%20L155.3,7.5%20L157.0,2.8%20L160.8,8.8%20L165.0,1.9%20L169.4,5.4%20L174.0,2.9%20L178.8,7.3%20L183.0,0.7%20L186.3,6.4%20L192.0,2.3%20L194.4,7.2%20L197.0,2.2%20L199.0,8.6%20L202.0,1.8%20L205.0,6.2%20L208.0,2.6%20L210.8,8.0%20L213.0,2.1%20L214.7,7.2%20L217.0,0.6%20L221.3,5.7%20L225.0,2.8%20L228.5,8.7%20L233.0,2.5%20L237.6,8.3%20L242.0,2.9%20L246.0,6.3%20L249.0,2.4%20L253.3,6.1%20L256.0,2.6%20L257.8,8.4%20L261.0,1.8%20L263.3,5.1%20L266.0,1.5%20L270.0,8.1%20L274.0,2.3%20L277.7,8.0%20L283.0,2.8%20L286.4,8.7%20L292.0,1.6%20L296.9,6.7%20L301.0,1.3%20L305.4,6.5%20L308.0,1.0%20L310.7,7.4%20L313.0,2.7%20L318.7,5.1%20L322.0,2.3%20L323.8,7.0%20L326.0,2.0%20L329.7,7.8%20L332.0,0.6%20L336.2,5.4%20L339.0,1.1%20L341.2,6.2%20L343.0,1.9%20L346.5,7.6%20L349.0,0.9%20L354.4,8.7%20L358.0,2.8%20L360.6,8.4%20L360.0,2.4%20L360,0%20Z'%20fill='%23000'/%3E%3C/svg%3E") bottom/100% 10px no-repeat;
          mask:linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20360%2010'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,0%20H360%20V2.5%20L2.1,5.4%20L4.0,2.8%20L9.2,7.1%20L13.0,2.8%20L17.9,7.5%20L21.0,2.3%20L23.3,8.7%20L26.0,2.8%20L29.9,7.9%20L35.0,1.9%20L37.5,6.9%20L39.0,2.9%20L41.6,8.7%20L45.0,2.8%20L49.5,5.0%20L53.0,1.6%20L55.2,7.7%20L58.0,2.8%20L62.8,6.6%20L66.0,1.8%20L71.4,8.7%20L75.0,1.0%20L77.3,6.9%20L79.0,2.0%20L80.8,5.9%20L83.0,2.2%20L87.5,7.6%20L91.0,2.1%20L95.3,5.8%20L100.0,2.1%20L104.5,6.1%20L107.0,1.1%20L112.6,5.2%20L116.0,2.5%20L118.9,7.1%20L121.0,1.5%20L123.0,8.8%20L126.0,0.8%20L128.7,5.4%20L131.0,2.1%20L134.1,6.1%20L138.0,1.9%20L140.1,6.3%20L143.0,0.7%20L145.4,6.0%20L148.0,1.5%20L150.6,8.6%20L153.0,2.4%20L155.3,7.5%20L157.0,2.8%20L160.8,8.8%20L165.0,1.9%20L169.4,5.4%20L174.0,2.9%20L178.8,7.3%20L183.0,0.7%20L186.3,6.4%20L192.0,2.3%20L194.4,7.2%20L197.0,2.2%20L199.0,8.6%20L202.0,1.8%20L205.0,6.2%20L208.0,2.6%20L210.8,8.0%20L213.0,2.1%20L214.7,7.2%20L217.0,0.6%20L221.3,5.7%20L225.0,2.8%20L228.5,8.7%20L233.0,2.5%20L237.6,8.3%20L242.0,2.9%20L246.0,6.3%20L249.0,2.4%20L253.3,6.1%20L256.0,2.6%20L257.8,8.4%20L261.0,1.8%20L263.3,5.1%20L266.0,1.5%20L270.0,8.1%20L274.0,2.3%20L277.7,8.0%20L283.0,2.8%20L286.4,8.7%20L292.0,1.6%20L296.9,6.7%20L301.0,1.3%20L305.4,6.5%20L308.0,1.0%20L310.7,7.4%20L313.0,2.7%20L318.7,5.1%20L322.0,2.3%20L323.8,7.0%20L326.0,2.0%20L329.7,7.8%20L332.0,0.6%20L336.2,5.4%20L339.0,1.1%20L341.2,6.2%20L343.0,1.9%20L346.5,7.6%20L349.0,0.9%20L354.4,8.7%20L358.0,2.8%20L360.6,8.4%20L360.0,2.4%20L360,0%20Z'%20fill='%23000'/%3E%3C/svg%3E") bottom/100% 10px no-repeat;
}
/* feed button moves onto the lower panel, clear of the slot */
.ptk-printer .btn{top:51px;right:24px;width:32px;height:10px;border-radius:5px;}
/* tear bar sits tighter and darker — it should not out-shout the paper */
.ptk-printer .tear{bottom:11px;height:7px;
  background:linear-gradient(180deg,#79828C 0%,#4E565F 50%,#2E353C 100%);
  -webkit-mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) bottom/6px 7px repeat-x;
          mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) bottom/6px 7px repeat-x;}
/* shadow cast onto the docket as it leaves the slot */
.ptk-out{position:relative;}
.ptk-out::before{content:'';position:absolute;top:0;left:0;right:0;height:16px;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.16) 55%,transparent);}

/* ---- revert the thermal print appearance (kept: ragged tear, printer hardware) ---- */
.ptr-paper{background:repeating-linear-gradient(0deg,rgba(0,0,0,.014) 0 1px,transparent 1px 3px),#FCFBF8;
  background-size:auto,auto;}
.ptr-paper::after{background:none;}
.ptr-inner{color:#1c2530;}
.ptr-name,.ptr-tot,.ptr-brand span{color:#1c2530;}
.ptr-li{color:#1c2530;}
.ptr-sub{color:#6b7480;}
.ptr-tag,.ptr-foot{color:#9aa2ac;}
.ptr-meta span{color:#8b95a3;}
.ptr-rule{border-top-color:#c9cdd4;}
.ptr-li .d{border-bottom-color:#cfd4db;}
.ptr-cta{border-color:#9aa2ac;color:#1c2530;}
.ptr-code i{background:#1c2530;}
.ptr-inner .ptr-name,.ptr-inner .ptr-li,.ptr-inner .ptr-tot,
.ptr-inner .ptr-tag,.ptr-inner .ptr-sub,.ptr-inner .ptr-meta,
.ptr-inner .ptr-cta,.ptr-inner .ptr-foot,.ptr-inner .ptr-brand span{text-shadow:none;}

/* ============================================================================
   PTN — the ticket, variation 3. Hardware modelled on the Epson TM-T88 form
   factor from the supplied reference shots, drawn in CSS rather than photographed:
     - paper exits a recessed well in the TOP cover and drapes forward over the
       front face (the reference shows exactly this), not a front slot
     - fine serrated tear bar along the front lip of the well
     - vertical control column on the right: Power / Error / Paper LEDs stacked
       above a round Feed button
     - sloped top cover, seam, wordmark low-left, recessed rocker switch low-right
   Branding is Postree's, not Epson's — the industrial form is referenced, the
   trademark is not reproduced. Reuses the .ptr-* docket internals.
   ========================================================================= */
.ptn{position:relative;overflow:hidden;padding:100px 0 104px;color:#fff;
  background:
    radial-gradient(820px 420px at 24% -4%, rgba(43,192,164,.15), transparent 62%),
    radial-gradient(640px 360px at 92% 104%, rgba(56,110,190,.12), transparent 66%),
    linear-gradient(180deg,#0C0F1A 0%,#10131F 52%,#0C0F1A 100%);}
.ptn-wrap{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 32px;}
.ptn-stage{display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:center;}

.ptn-eyebrow{display:inline-flex;align-items:center;font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;
  font-size:12px;letter-spacing:.4px;color:#fff;background:rgba(255,255,255,.1);padding:8px 16px;border-radius:100px;}
.ptn-title{font-size:46px;font-weight:300;line-height:1.2;letter-spacing:-.02em;margin:22px 0 0;color:#fff;max-width:15ch;}
.ptn-title em{font-style:normal;font-weight:500;background:linear-gradient(120deg,#7FF0D6,#2BC0A4 60%,#8FC4FF);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.ptn-lede{font-size:16px;font-weight:300;line-height:1.55;color:rgba(228,231,242,.7);margin:16px 0 0;max-width:44ch;}
.ptn-list{display:grid;gap:2px;margin-top:28px;}
.ptn-list button{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  padding:13px 16px;border:0;border-left:2px solid transparent;border-radius:0 12px 12px 0;cursor:pointer;
  background:transparent;font-family:inherit;font-size:15px;font-weight:400;color:rgba(255,255,255,.58);
  text-align:left;transition:background .3s,color .3s,border-color .3s;}
.ptn-list button:hover{color:#fff;background:rgba(255,255,255,.04);}
.ptn-list button[aria-selected="true"]{color:#fff;background:rgba(255,255,255,.07);border-left-color:#2BC0A4;font-weight:500;}
.ptn-list .ix{font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;font-size:11px;letter-spacing:1px;color:rgba(94,224,192,.65);}
.ptn-list button[aria-selected="true"] .ix{color:#5EE0C0;}
.ptn-list button:focus-visible{outline:2px solid #5EE0C0;outline-offset:-2px;}

/* ---- the unit ---- */
.ptn-rig{position:relative;display:flex;justify-content:center;}
.ptn-printer{position:relative;width:392px;max-width:100%;height:296px;border-radius:16px 16px 5px 5px;
  background:linear-gradient(178deg,#5A6068 0%,#474D55 26%,#3A4048 62%,#2B3037 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -2px 0 rgba(0,0,0,.65),
    0 40px 70px -30px rgba(0,0,0,.95);}
/* sloped top cover */
.ptn-printer .cover{position:absolute;left:0;right:0;top:0;height:150px;border-radius:16px 16px 0 0;
  background:linear-gradient(176deg,#666C74 0%,#525860 40%,#434951 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);}
.ptn-printer .cover::after{content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(102deg,transparent 20%,rgba(255,255,255,.07) 36%,transparent 54%);}
/* recessed paper well with the tear bar along its front lip */
.ptn-printer .well{position:absolute;left:46px;right:88px;top:96px;height:52px;border-radius:9px;
  background:linear-gradient(180deg,#15181C 0%,#1E2228 55%,#282D34 100%);
  box-shadow:inset 0 5px 9px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.13);}
.ptn-printer .tear{position:absolute;left:6px;right:6px;bottom:5px;height:7px;
  background:linear-gradient(180deg,#E4E7EA 0%,#AAB1B8 45%,#767D85 100%);
  -webkit-mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) bottom/5px 7px repeat-x;
          mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) bottom/5px 7px repeat-x;}
/* vertical control column, right */
.ptn-printer .panel{position:absolute;right:14px;top:26px;width:56px;height:128px;border-radius:9px;
  background:linear-gradient(180deg,#5E646C,#464C54);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 5px rgba(0,0,0,.45);}
.ptn-printer .panel i{position:absolute;left:50%;transform:translateX(-50%);width:9px;height:4px;border-radius:2px;
  background:#2A2E34;box-shadow:inset 0 1px 1px rgba(0,0,0,.7);}
.ptn-printer .panel i.p{top:14px;background:#4FD8BC;box-shadow:0 0 8px 2px rgba(43,192,164,.7);}
.ptn-printer .panel i.e{top:34px;}
.ptn-printer .panel i.r{top:54px;}
.ptn-printer .panel .feed{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;width:30px;height:30px;
  border-radius:50%;background:linear-gradient(180deg,#6E747C,#4A5058);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 2px 4px rgba(0,0,0,.55);}
/* seam between cover and body, then the front face */
.ptn-printer .seam{position:absolute;left:0;right:0;top:150px;height:1px;background:rgba(0,0,0,.55);
  box-shadow:0 1px 0 rgba(255,255,255,.07);}
.ptn-printer .mark{position:absolute;left:26px;bottom:44px;font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;
  font-size:15px;letter-spacing:3px;font-weight:500;color:rgba(255,255,255,.5);}
.ptn-printer .rocker{position:absolute;right:34px;bottom:38px;width:44px;height:26px;border-radius:4px;
  background:linear-gradient(180deg,#23272C,#171A1E);box-shadow:inset 0 2px 4px rgba(0,0,0,.85);}
.ptn-printer .rocker::after{content:'';position:absolute;left:5px;top:5px;width:34px;height:16px;border-radius:3px;
  background:linear-gradient(180deg,#4A5058,#31363C);box-shadow:0 1px 2px rgba(0,0,0,.6);}
.ptn-printer .plinth{position:absolute;left:0;right:0;bottom:0;height:18px;border-radius:0 0 5px 5px;
  background:linear-gradient(180deg,#23272C,#15181B);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);}

/* the docket comes up out of the well and drapes down over the front */
.ptn-out{position:absolute;top:120px;left:50%;transform:translateX(-50%);z-index:6;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.75));}
.ptn-out .ptr-paper{width:296px;}
.ptn-out::before{content:'';position:absolute;top:0;left:0;right:0;height:18px;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.18) 55%,transparent);}
.ptn-cap{margin-top:20px;font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;
  font-size:11px;letter-spacing:1px;color:rgba(255,255,255,.32);text-align:center;}

@media(max-width:900px){
  .ptn-stage{grid-template-columns:1fr;gap:40px;}
  .ptn-title,.ptn-lede{max-width:none;}
  .ptn-list{grid-template-columns:1fr 1fr;}
}
@media(max-width:760px){
  .ptn{padding:72px 0 76px;}
  .ptn-wrap{padding:0 20px;}
  .ptn-title{font-size:30px;}
  .ptn-lede{font-size:15px;}
  .ptn-list{grid-template-columns:1fr;}
  .ptn-printer{width:330px;height:262px;}
  .ptn-printer .cover{height:132px;}
  .ptn-printer .well{left:34px;right:78px;top:84px;height:46px;}
  .ptn-printer .seam{top:132px;}
  .ptn-printer .panel{width:50px;height:112px;right:12px;}
  .ptn-out{top:106px;}
  .ptn-out .ptr-paper{width:262px;}
}

/* ---- PTN correction, per the reference shots ----
   The docket rises UP out of the well (a printer feeds paper out), it does not
   drape down over the front — draping hid the whole unit. Bottom-anchored in the
   well so the print animation grows it upward, tear at the TOP (the free end),
   and the well's front lip sits IN FRONT of the paper so it disappears into the
   slot. Offset slightly left so the control column stays visible, as in the photo. */
.ptn-rig{position:relative;width:392px;max-width:100%;margin:0 auto;display:block;}
.ptn-printer{position:absolute;left:0;bottom:0;width:392px;height:296px;}
.ptn-printer .cover,.ptn-printer .seam,.ptn-printer .mark,
.ptn-printer .rocker,.ptn-printer .plinth{z-index:1;}
.ptn-printer .well,.ptn-printer .panel{z-index:3;}
.ptn-printer .well{left:34px;right:76px;}
.ptn-out{position:absolute;left:44px;bottom:176px;width:262px;margin:0;transform:none;z-index:2;
  filter:drop-shadow(0 -6px 16px rgba(0,0,0,.55));}
.ptn-out .ptr-paper{width:262px;
  -webkit-mask:linear-gradient(#000 0 0) bottom/100% calc(100% - 10px) no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20360%2010'%20preserveAspectRatio='none'%3E%3Cg%20transform='translate(0,10)%20scale(1,-1)'%3E%3Cpath%20d='M0,0%20H360%20V2.5%20L2.1,5.4%20L4.0,2.8%20L9.2,7.1%20L13.0,2.8%20L17.9,7.5%20L21.0,2.3%20L23.3,8.7%20L26.0,2.8%20L29.9,7.9%20L35.0,1.9%20L37.5,6.9%20L39.0,2.9%20L41.6,8.7%20L45.0,2.8%20L49.5,5.0%20L53.0,1.6%20L55.2,7.7%20L58.0,2.8%20L62.8,6.6%20L66.0,1.8%20L71.4,8.7%20L75.0,1.0%20L77.3,6.9%20L79.0,2.0%20L80.8,5.9%20L83.0,2.2%20L87.5,7.6%20L91.0,2.1%20L95.3,5.8%20L100.0,2.1%20L104.5,6.1%20L107.0,1.1%20L112.6,5.2%20L116.0,2.5%20L118.9,7.1%20L121.0,1.5%20L123.0,8.8%20L126.0,0.8%20L128.7,5.4%20L131.0,2.1%20L134.1,6.1%20L138.0,1.9%20L140.1,6.3%20L143.0,0.7%20L145.4,6.0%20L148.0,1.5%20L150.6,8.6%20L153.0,2.4%20L155.3,7.5%20L157.0,2.8%20L160.8,8.8%20L165.0,1.9%20L169.4,5.4%20L174.0,2.9%20L178.8,7.3%20L183.0,0.7%20L186.3,6.4%20L192.0,2.3%20L194.4,7.2%20L197.0,2.2%20L199.0,8.6%20L202.0,1.8%20L205.0,6.2%20L208.0,2.6%20L210.8,8.0%20L213.0,2.1%20L214.7,7.2%20L217.0,0.6%20L221.3,5.7%20L225.0,2.8%20L228.5,8.7%20L233.0,2.5%20L237.6,8.3%20L242.0,2.9%20L246.0,6.3%20L249.0,2.4%20L253.3,6.1%20L256.0,2.6%20L257.8,8.4%20L261.0,1.8%20L263.3,5.1%20L266.0,1.5%20L270.0,8.1%20L274.0,2.3%20L277.7,8.0%20L283.0,2.8%20L286.4,8.7%20L292.0,1.6%20L296.9,6.7%20L301.0,1.3%20L305.4,6.5%20L308.0,1.0%20L310.7,7.4%20L313.0,2.7%20L318.7,5.1%20L322.0,2.3%20L323.8,7.0%20L326.0,2.0%20L329.7,7.8%20L332.0,0.6%20L336.2,5.4%20L339.0,1.1%20L341.2,6.2%20L343.0,1.9%20L346.5,7.6%20L349.0,0.9%20L354.4,8.7%20L358.0,2.8%20L360.6,8.4%20L360.0,2.4%20L360,0%20Z'%20fill='%23000'/%3E%3C/g%3E%3C/svg%3E") top/100% 10px no-repeat;
          mask:linear-gradient(#000 0 0) bottom/100% calc(100% - 10px) no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20360%2010'%20preserveAspectRatio='none'%3E%3Cg%20transform='translate(0,10)%20scale(1,-1)'%3E%3Cpath%20d='M0,0%20H360%20V2.5%20L2.1,5.4%20L4.0,2.8%20L9.2,7.1%20L13.0,2.8%20L17.9,7.5%20L21.0,2.3%20L23.3,8.7%20L26.0,2.8%20L29.9,7.9%20L35.0,1.9%20L37.5,6.9%20L39.0,2.9%20L41.6,8.7%20L45.0,2.8%20L49.5,5.0%20L53.0,1.6%20L55.2,7.7%20L58.0,2.8%20L62.8,6.6%20L66.0,1.8%20L71.4,8.7%20L75.0,1.0%20L77.3,6.9%20L79.0,2.0%20L80.8,5.9%20L83.0,2.2%20L87.5,7.6%20L91.0,2.1%20L95.3,5.8%20L100.0,2.1%20L104.5,6.1%20L107.0,1.1%20L112.6,5.2%20L116.0,2.5%20L118.9,7.1%20L121.0,1.5%20L123.0,8.8%20L126.0,0.8%20L128.7,5.4%20L131.0,2.1%20L134.1,6.1%20L138.0,1.9%20L140.1,6.3%20L143.0,0.7%20L145.4,6.0%20L148.0,1.5%20L150.6,8.6%20L153.0,2.4%20L155.3,7.5%20L157.0,2.8%20L160.8,8.8%20L165.0,1.9%20L169.4,5.4%20L174.0,2.9%20L178.8,7.3%20L183.0,0.7%20L186.3,6.4%20L192.0,2.3%20L194.4,7.2%20L197.0,2.2%20L199.0,8.6%20L202.0,1.8%20L205.0,6.2%20L208.0,2.6%20L210.8,8.0%20L213.0,2.1%20L214.7,7.2%20L217.0,0.6%20L221.3,5.7%20L225.0,2.8%20L228.5,8.7%20L233.0,2.5%20L237.6,8.3%20L242.0,2.9%20L246.0,6.3%20L249.0,2.4%20L253.3,6.1%20L256.0,2.6%20L257.8,8.4%20L261.0,1.8%20L263.3,5.1%20L266.0,1.5%20L270.0,8.1%20L274.0,2.3%20L277.7,8.0%20L283.0,2.8%20L286.4,8.7%20L292.0,1.6%20L296.9,6.7%20L301.0,1.3%20L305.4,6.5%20L308.0,1.0%20L310.7,7.4%20L313.0,2.7%20L318.7,5.1%20L322.0,2.3%20L323.8,7.0%20L326.0,2.0%20L329.7,7.8%20L332.0,0.6%20L336.2,5.4%20L339.0,1.1%20L341.2,6.2%20L343.0,1.9%20L346.5,7.6%20L349.0,0.9%20L354.4,8.7%20L358.0,2.8%20L360.6,8.4%20L360.0,2.4%20L360,0%20Z'%20fill='%23000'/%3E%3C/g%3E%3C/svg%3E") top/100% 10px no-repeat;}
/* shadow where it enters the slot is now at the foot of the docket */
.ptn-out::before{top:auto;bottom:0;height:22px;
  background:linear-gradient(0deg,rgba(0,0,0,.6),rgba(0,0,0,.2) 55%,transparent);}
.ptn-cap{position:absolute;left:0;right:0;bottom:-30px;margin:0;}
@media(max-width:760px){
  .ptn-rig{width:330px;}
  .ptn-printer{width:330px;height:262px;}
  .ptn-printer .well{left:28px;right:66px;}
  .ptn-out{left:38px;bottom:156px;width:226px;}
  .ptn-out .ptr-paper{width:226px;}
}

/* the original rule still set top:120px, which beats bottom when height is auto */
.ptn-out{top:auto;}

/* ---- PTN polish: height + column sync ----------------------------------------
   The section ran 925px because the right column was a 545px docket floating
   176px above the printer's base (721px rig) against a 517px text column. Under
   align-items:center that pushed the list 333px below the docket, so the two
   halves never shared a horizontal band.
   Fix in three parts: trim the docket's whitespace (no font sizes touched),
   shorten the machine so the paper starts lower, and start both columns on the
   same line. Scoped to .ptn so variations 1 and 2 are untouched.             */
.ptn{padding:88px 0 92px;}
.ptn-stage{align-items:start;}
.ptn-list button{padding:16px 16px;}

/* squatter body, per the reference — the TM-T88's cover is shallow */
.ptn-printer{height:248px;}
.ptn-printer .cover{height:124px;}
.ptn-printer .well{top:72px;height:44px;}
.ptn-printer .seam{top:124px;}
.ptn-printer .panel{top:22px;height:104px;}
.ptn-printer .panel i.p{top:13px;}
.ptn-printer .panel i.e{top:31px;}
.ptn-printer .panel i.r{top:49px;}
.ptn-printer .panel .feed{bottom:12px;}
.ptn-printer .mark{bottom:36px;}
.ptn-printer .rocker{bottom:30px;height:24px;}
.ptn-printer .rocker::after{top:4px;height:15px;}
.ptn-printer .plinth{height:16px;}
/* well centre moved up 22px, so the paper's base follows it */
.ptn-out{bottom:154px;}

/* docket: ~105px of pure whitespace removed, every font size left alone */
.ptn-out .ptr-inner{padding:20px 22px 24px;}
.ptn-out .ptr-rule{margin:8px 0;}
.ptn-out .ptr-li{margin:7px 0;}
.ptn-out .ptr-name{line-height:27px;}
.ptn-out .ptr-sub{line-height:1.4;}
.ptn-out .ptr-tot{margin-top:4px;}
.ptn-out .ptr-cta{margin-top:12px;padding-top:9px;padding-bottom:9px;}
.ptn-out .ptr-code{height:26px;margin-top:11px;}
.ptn-out .ptr-code i{max-height:26px;}
.ptn-out .ptr-foot{margin-top:7px;}

@media(max-width:760px){
  .ptn{padding:64px 0 68px;}
  .ptn-printer{height:212px;}
  .ptn-printer .cover{height:106px;}
  .ptn-printer .well{top:56px;height:40px;}
  .ptn-printer .seam{top:106px;}
  .ptn-printer .panel{width:50px;height:88px;right:12px;top:18px;}
  .ptn-printer .panel i.p{top:11px;}
  .ptn-printer .panel i.e{top:27px;}
  .ptn-printer .panel i.r{top:43px;}
  .ptn-printer .panel .feed{width:26px;height:26px;bottom:10px;}
  .ptn-printer .mark{bottom:28px;font-size:13px;letter-spacing:2.4px;}
  .ptn-printer .rocker{bottom:24px;width:38px;height:22px;right:28px;}
  .ptn-printer .rocker::after{width:28px;height:13px;}
  .ptn-printer .plinth{height:14px;}
  .ptn-out{bottom:136px;}
}

/* Pull the list up into the docket's module band without shortening the column:
   22px comes off the header's stacked margins, and goes back into the rows as
   height. The list now starts opposite the ticket's body rather than its foot,
   and the two columns still finish within ~50px of each other. */
.ptn-title{margin-top:16px;}
.ptn-lede{margin-top:12px;}
.ptn-list{margin-top:16px;}
.ptn-list button{padding:18px 16px;}

/* Mobile paper is 226px, so the tag and the CTA both wrapped and orphaned the
   arrow onto its own line. Tighten those two lines only — the longest CTA is
   "EXPLORE CAFE & BAKERY", which is what the size is set against. */
@media(max-width:760px){
  .ptn-out .ptr-tag{font-size:8.5px;letter-spacing:.6px;}
  .ptn-out .ptr-cta{font-size:9px;letter-spacing:.8px;padding-left:6px;padding-right:6px;}
}

/* ============================================================================
   PTQ — the ticket, variation 4. Same staging as .ptn, reweighted: the docket
   was 262px wide, which made the module lines read as texture rather than copy.
   Here the paper is 340px and the ticket type is set ~1.2x larger, paid for by
   a narrower picker column (.72fr vs .92fr) — the list is only a control, the
   ticket is the content. Printer widens to 480px to carry the wider paper.
   Written as a self-contained block rather than layered over .ptn, so v3 stays
   exactly as approved. Reuses the .ptr-* docket internals.
   ========================================================================= */
.ptq{position:relative;overflow:hidden;padding:88px 0 92px;color:#fff;
  background:
    radial-gradient(820px 420px at 24% -4%, rgba(43,192,164,.15), transparent 62%),
    radial-gradient(640px 360px at 92% 104%, rgba(56,110,190,.12), transparent 66%),
    linear-gradient(180deg,#0C0F1A 0%,#10131F 52%,#0C0F1A 100%);}
.ptq-wrap{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 32px;}
.ptq-stage{display:grid;grid-template-columns:.72fr 1.28fr;gap:48px;align-items:start;}

.ptq-eyebrow{display:inline-flex;align-items:center;font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;
  font-size:12px;letter-spacing:.4px;color:#fff;background:rgba(255,255,255,.1);padding:8px 16px;border-radius:100px;}
.ptq-title{font-size:40px;font-weight:300;line-height:1.18;letter-spacing:-.02em;margin:16px 0 0;color:#fff;max-width:12ch;}
.ptq-title em{font-style:normal;font-weight:500;background:linear-gradient(120deg,#7FF0D6,#2BC0A4 60%,#8FC4FF);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.ptq-lede{font-size:15px;font-weight:300;line-height:1.55;color:rgba(228,231,242,.7);margin:12px 0 0;}
/* taller rows: the column is narrower, so the list needs presence to stay
   balanced against a 690px rig, and a bigger hit target costs nothing */
.ptq-list{display:grid;gap:2px;margin-top:18px;}
.ptq-list button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:23px 16px;border:0;border-left:2px solid transparent;border-radius:0 12px 12px 0;cursor:pointer;
  background:transparent;font-family:inherit;font-size:15px;font-weight:400;color:rgba(255,255,255,.58);
  text-align:left;transition:background .3s,color .3s,border-color .3s;}
.ptq-list button:hover{color:#fff;background:rgba(255,255,255,.04);}
.ptq-list button[aria-selected="true"]{color:#fff;background:rgba(255,255,255,.07);border-left-color:#2BC0A4;font-weight:500;}
.ptq-list .ix{font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;font-size:11px;letter-spacing:1px;color:rgba(94,224,192,.65);}
.ptq-list button[aria-selected="true"] .ix{color:#5EE0C0;}
.ptq-list button:focus-visible{outline:2px solid #5EE0C0;outline-offset:-2px;}

/* ---- the unit: 480 x 260, same TM-T88 proportions scaled up ---- */
.ptq-rig{position:relative;width:480px;max-width:100%;margin:0 auto;display:block;}
.ptq-printer{position:absolute;left:0;bottom:0;width:480px;height:260px;border-radius:18px 18px 6px 6px;
  background:linear-gradient(178deg,#5A6068 0%,#474D55 26%,#3A4048 62%,#2B3037 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -2px 0 rgba(0,0,0,.65),
    0 44px 78px -32px rgba(0,0,0,.95);}
.ptq-printer .cover{position:absolute;left:0;right:0;top:0;height:130px;border-radius:18px 18px 0 0;
  background:linear-gradient(176deg,#666C74 0%,#525860 40%,#434951 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);z-index:1;}
.ptq-printer .cover::after{content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(102deg,transparent 20%,rgba(255,255,255,.07) 36%,transparent 54%);}
/* recessed well; its front lip sits in front of the paper so the docket
   terminates inside the slot instead of resting on top of it */
.ptq-printer .well{position:absolute;left:42px;right:92px;top:76px;height:46px;border-radius:9px;
  background:linear-gradient(180deg,#15181C 0%,#1E2228 55%,#282D34 100%);
  box-shadow:inset 0 5px 9px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.13);z-index:3;}
.ptq-printer .tear{position:absolute;left:6px;right:6px;bottom:5px;height:7px;
  background:linear-gradient(180deg,#E4E7EA 0%,#AAB1B8 45%,#767D85 100%);
  -webkit-mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) bottom/5px 7px repeat-x;
          mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) bottom/5px 7px repeat-x;}
.ptq-printer .panel{position:absolute;right:16px;top:22px;width:60px;height:100px;border-radius:10px;
  background:linear-gradient(180deg,#5E646C,#464C54);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 5px rgba(0,0,0,.45);z-index:3;}
.ptq-printer .panel i{position:absolute;left:50%;transform:translateX(-50%);width:10px;height:4px;border-radius:2px;
  background:#2A2E34;box-shadow:inset 0 1px 1px rgba(0,0,0,.7);}
.ptq-printer .panel i.p{top:12px;background:#4FD8BC;box-shadow:0 0 8px 2px rgba(43,192,164,.7);}
.ptq-printer .panel i.e{top:30px;}
.ptq-printer .panel i.r{top:48px;}
.ptq-printer .panel .feed{position:absolute;left:50%;transform:translateX(-50%);bottom:10px;width:30px;height:30px;
  border-radius:50%;background:linear-gradient(180deg,#6E747C,#4A5058);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 2px 4px rgba(0,0,0,.55);}
.ptq-printer .seam{position:absolute;left:0;right:0;top:130px;height:1px;background:rgba(0,0,0,.55);
  box-shadow:0 1px 0 rgba(255,255,255,.07);z-index:1;}
.ptq-printer .mark{position:absolute;left:30px;bottom:38px;font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;
  font-size:17px;letter-spacing:3.4px;font-weight:500;color:rgba(255,255,255,.5);z-index:1;}
.ptq-printer .rocker{position:absolute;right:40px;bottom:32px;width:50px;height:27px;border-radius:4px;
  background:linear-gradient(180deg,#23272C,#171A1E);box-shadow:inset 0 2px 4px rgba(0,0,0,.85);z-index:1;}
.ptq-printer .rocker::after{content:'';position:absolute;left:6px;top:5px;width:38px;height:16px;border-radius:3px;
  background:linear-gradient(180deg,#4A5058,#31363C);box-shadow:0 1px 2px rgba(0,0,0,.6);}
.ptq-printer .plinth{position:absolute;left:0;right:0;bottom:0;height:17px;border-radius:0 0 6px 6px;
  background:linear-gradient(180deg,#23272C,#15181B);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);z-index:1;}

/* docket rises out of the well; bottom-anchored so the feed grows it upward.
   bottom = printer height - well centre = 260 - (76 + 23) = 161 */
.ptq-out{position:absolute;left:45px;bottom:161px;width:340px;margin:0;z-index:2;
  filter:drop-shadow(0 -7px 18px rgba(0,0,0,.55));}
.ptq-out::before{content:'';position:absolute;left:0;right:0;top:auto;bottom:0;height:24px;z-index:4;pointer-events:none;
  background:linear-gradient(0deg,rgba(0,0,0,.6),rgba(0,0,0,.2) 55%,transparent);}
.ptq-cap{position:absolute;left:0;right:0;bottom:-30px;margin:0;
  font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;
  font-size:11px;letter-spacing:1px;color:rgba(255,255,255,.32);text-align:center;}

/* ---- the point of this variation: the ticket copy is set to be read ---- */
.ptq-out .ptr-inner{padding:24px 28px 28px;}
.ptq-out .ptr-brand{font-size:19px;}
.ptq-out .ptr-tag{font-size:11px;margin-top:5px;}
.ptq-out .ptr-rule{margin:10px 0;}
.ptq-out .ptr-name{font-size:24px;line-height:32px;}
.ptq-out .ptr-sub{font-size:12.5px;line-height:1.45;}
.ptq-out .ptr-meta{font-size:12px;}
.ptq-out .ptr-li{font-size:14px;margin:9px 0;}
.ptq-out .ptr-tot{font-size:15px;margin-top:5px;}
.ptq-out .ptr-cta{font-size:12.5px;margin-top:14px;padding-top:11px;padding-bottom:11px;}
.ptq-out .ptr-code{height:30px;margin-top:13px;}
.ptq-out .ptr-code i{max-height:30px;}
.ptq-out .ptr-foot{font-size:10.5px;margin-top:8px;}

.ptq-out .ptr-paper{width:340px;
  -webkit-mask:linear-gradient(#000 0 0) bottom/100% calc(100% - 10px) no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20360%2010'%20preserveAspectRatio='none'%3E%3Cg%20transform='translate(0,10)%20scale(1,-1)'%3E%3Cpath%20d='M0,0%20H360%20V2.5%20L2.1,5.4%20L4.0,2.8%20L9.2,7.1%20L13.0,2.8%20L17.9,7.5%20L21.0,2.3%20L23.3,8.7%20L26.0,2.8%20L29.9,7.9%20L35.0,1.9%20L37.5,6.9%20L39.0,2.9%20L41.6,8.7%20L45.0,2.8%20L49.5,5.0%20L53.0,1.6%20L55.2,7.7%20L58.0,2.8%20L62.8,6.6%20L66.0,1.8%20L71.4,8.7%20L75.0,1.0%20L77.3,6.9%20L79.0,2.0%20L80.8,5.9%20L83.0,2.2%20L87.5,7.6%20L91.0,2.1%20L95.3,5.8%20L100.0,2.1%20L104.5,6.1%20L107.0,1.1%20L112.6,5.2%20L116.0,2.5%20L118.9,7.1%20L121.0,1.5%20L123.0,8.8%20L126.0,0.8%20L128.7,5.4%20L131.0,2.1%20L134.1,6.1%20L138.0,1.9%20L140.1,6.3%20L143.0,0.7%20L145.4,6.0%20L148.0,1.5%20L150.6,8.6%20L153.0,2.4%20L155.3,7.5%20L157.0,2.8%20L160.8,8.8%20L165.0,1.9%20L169.4,5.4%20L174.0,2.9%20L178.8,7.3%20L183.0,0.7%20L186.3,6.4%20L192.0,2.3%20L194.4,7.2%20L197.0,2.2%20L199.0,8.6%20L202.0,1.8%20L205.0,6.2%20L208.0,2.6%20L210.8,8.0%20L213.0,2.1%20L214.7,7.2%20L217.0,0.6%20L221.3,5.7%20L225.0,2.8%20L228.5,8.7%20L233.0,2.5%20L237.6,8.3%20L242.0,2.9%20L246.0,6.3%20L249.0,2.4%20L253.3,6.1%20L256.0,2.6%20L257.8,8.4%20L261.0,1.8%20L263.3,5.1%20L266.0,1.5%20L270.0,8.1%20L274.0,2.3%20L277.7,8.0%20L283.0,2.8%20L286.4,8.7%20L292.0,1.6%20L296.9,6.7%20L301.0,1.3%20L305.4,6.5%20L308.0,1.0%20L310.7,7.4%20L313.0,2.7%20L318.7,5.1%20L322.0,2.3%20L323.8,7.0%20L326.0,2.0%20L329.7,7.8%20L332.0,0.6%20L336.2,5.4%20L339.0,1.1%20L341.2,6.2%20L343.0,1.9%20L346.5,7.6%20L349.0,0.9%20L354.4,8.7%20L358.0,2.8%20L360.6,8.4%20L360.0,2.4%20L360,0%20Z'%20fill='%23000'/%3E%3C/g%3E%3C/svg%3E") top/100% 10px no-repeat;
          mask:linear-gradient(#000 0 0) bottom/100% calc(100% - 10px) no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20360%2010'%20preserveAspectRatio='none'%3E%3Cg%20transform='translate(0,10)%20scale(1,-1)'%3E%3Cpath%20d='M0,0%20H360%20V2.5%20L2.1,5.4%20L4.0,2.8%20L9.2,7.1%20L13.0,2.8%20L17.9,7.5%20L21.0,2.3%20L23.3,8.7%20L26.0,2.8%20L29.9,7.9%20L35.0,1.9%20L37.5,6.9%20L39.0,2.9%20L41.6,8.7%20L45.0,2.8%20L49.5,5.0%20L53.0,1.6%20L55.2,7.7%20L58.0,2.8%20L62.8,6.6%20L66.0,1.8%20L71.4,8.7%20L75.0,1.0%20L77.3,6.9%20L79.0,2.0%20L80.8,5.9%20L83.0,2.2%20L87.5,7.6%20L91.0,2.1%20L95.3,5.8%20L100.0,2.1%20L104.5,6.1%20L107.0,1.1%20L112.6,5.2%20L116.0,2.5%20L118.9,7.1%20L121.0,1.5%20L123.0,8.8%20L126.0,0.8%20L128.7,5.4%20L131.0,2.1%20L134.1,6.1%20L138.0,1.9%20L140.1,6.3%20L143.0,0.7%20L145.4,6.0%20L148.0,1.5%20L150.6,8.6%20L153.0,2.4%20L155.3,7.5%20L157.0,2.8%20L160.8,8.8%20L165.0,1.9%20L169.4,5.4%20L174.0,2.9%20L178.8,7.3%20L183.0,0.7%20L186.3,6.4%20L192.0,2.3%20L194.4,7.2%20L197.0,2.2%20L199.0,8.6%20L202.0,1.8%20L205.0,6.2%20L208.0,2.6%20L210.8,8.0%20L213.0,2.1%20L214.7,7.2%20L217.0,0.6%20L221.3,5.7%20L225.0,2.8%20L228.5,8.7%20L233.0,2.5%20L237.6,8.3%20L242.0,2.9%20L246.0,6.3%20L249.0,2.4%20L253.3,6.1%20L256.0,2.6%20L257.8,8.4%20L261.0,1.8%20L263.3,5.1%20L266.0,1.5%20L270.0,8.1%20L274.0,2.3%20L277.7,8.0%20L283.0,2.8%20L286.4,8.7%20L292.0,1.6%20L296.9,6.7%20L301.0,1.3%20L305.4,6.5%20L308.0,1.0%20L310.7,7.4%20L313.0,2.7%20L318.7,5.1%20L322.0,2.3%20L323.8,7.0%20L326.0,2.0%20L329.7,7.8%20L332.0,0.6%20L336.2,5.4%20L339.0,1.1%20L341.2,6.2%20L343.0,1.9%20L346.5,7.6%20L349.0,0.9%20L354.4,8.7%20L358.0,2.8%20L360.6,8.4%20L360.0,2.4%20L360,0%20Z'%20fill='%23000'/%3E%3C/g%3E%3C/svg%3E") top/100% 10px no-repeat;}
@media(max-width:900px){
  .ptq-stage{grid-template-columns:1fr;gap:40px;}
  .ptq-title{max-width:none;}
  .ptq-list{grid-template-columns:1fr 1fr;}
  .ptq-list button{padding:16px;}
}
@media(max-width:760px){
  .ptq{padding:64px 0 68px;}
  .ptq-wrap{padding:0 20px;}
  .ptq-title{font-size:30px;}
  .ptq-lede{font-size:15px;}
  .ptq-list{grid-template-columns:1fr;}
  .ptq-list button{padding:18px 16px;}
  .ptq-rig{width:330px;}
  .ptq-printer{width:330px;height:212px;}
  .ptq-printer .cover{height:106px;}
  .ptq-printer .well{left:26px;right:64px;top:56px;height:40px;}
  .ptq-printer .seam{top:106px;}
  .ptq-printer .panel{width:50px;height:88px;right:12px;top:18px;}
  .ptq-printer .panel i.p{top:11px;}
  .ptq-printer .panel i.e{top:27px;}
  .ptq-printer .panel i.r{top:43px;}
  .ptq-printer .panel .feed{width:26px;height:26px;bottom:10px;}
  .ptq-printer .mark{bottom:28px;left:22px;font-size:13px;letter-spacing:2.4px;}
  .ptq-printer .rocker{bottom:24px;right:26px;width:38px;height:22px;}
  .ptq-printer .rocker::after{width:28px;height:13px;}
  .ptq-printer .plinth{height:14px;}
  /* 330 - (56 + 20) = 136 */
  .ptq-out{left:28px;width:236px;bottom:136px;}
  .ptq-out .ptr-paper{width:236px;}
  /* paper is narrow again here, so drop back to the v3 ticket sizes */
  .ptq-out .ptr-inner{padding:20px 22px 24px;}
  .ptq-out .ptr-brand{font-size:16px;}
  .ptq-out .ptr-tag{font-size:8.5px;letter-spacing:.6px;}
  .ptq-out .ptr-name{font-size:20px;line-height:27px;}
  .ptq-out .ptr-sub{font-size:10.5px;}
  .ptq-out .ptr-meta{font-size:10px;}
  .ptq-out .ptr-li{font-size:12px;margin:7px 0;}
  .ptq-out .ptr-tot{font-size:12.5px;}
  .ptq-out .ptr-cta{font-size:9px;letter-spacing:.8px;padding-left:6px;padding-right:6px;}
  .ptq-out .ptr-code{height:26px;}
  .ptq-out .ptr-code i{max-height:26px;}
  .ptq-out .ptr-foot{font-size:9px;}
}

/* The barcode bars are fixed 2-4px widths set inline, so widening the paper from
   262 to 340 left them as a small cluster mid-sheet. Stretch the row to match. */
.ptq-out .ptr-code{transform:scaleX(1.3);}
.ptq-title{max-width:14ch;}
@media(max-width:760px){ .ptq-out .ptr-code{transform:none;} }

/* ============================================================================
   PTS — the ticket, variation 5. Restructured so the ticket COPY is the hero.
     - header is V1's treatment: centred, 52px, text-wrap:balance, 58ch lede
     - below it two columns, printer left / picker right, both top-aligned
     - the unit is mirrored (control column on the LEFT, well offset right) so
       the docket sits toward the picker instead of at the far page edge
     - the printer's base is flush with the section's bottom edge: no bottom
       padding, so the machine reads as sitting on the counter the section ends at
   Weighting: module lines go to 16px/600 and the ticket chrome (tag, barcode,
   footer) is pushed back, so the eye lands on the four product lines. The
   printer's contrast is dropped for the same reason — it is a stage, not the
   subject. Reuses the .ptr-* docket internals.
   ========================================================================= */
.pts{position:relative;overflow:hidden;padding:84px 0 0;color:#fff;
  background:
    radial-gradient(900px 460px at 50% -6%, rgba(43,192,164,.17), transparent 62%),
    radial-gradient(680px 380px at 88% 108%, rgba(56,110,190,.12), transparent 66%),
    linear-gradient(180deg,#0C0F1A 0%,#10131F 50%,#0C0F1A 100%);}
.pts-wrap{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 32px;}

/* ---- header: V1's treatment verbatim ---- */
.pts-head{text-align:center;}
.pts-eyebrow{display:inline-flex;align-items:center;font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;
  font-size:12px;letter-spacing:.4px;color:#fff;background:rgba(255,255,255,.1);padding:8px 16px;border-radius:100px;}
.pts-title{font-size:52px;font-weight:300;line-height:1.24;letter-spacing:-.02em;
  margin:22px auto 0;max-width:20ch;color:#fff;text-wrap:balance;}
.pts-title em{font-style:normal;font-weight:500;background:linear-gradient(120deg,#7FF0D6,#2BC0A4 60%,#8FC4FF);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.pts-lede{font-size:16px;font-weight:300;line-height:1.55;color:rgba(228,231,242,.7);max-width:58ch;margin:18px auto 0;}

/* ---- two columns, both starting on the same line ---- */
.pts-stage{display:grid;grid-template-columns:1.3fr .7fr;gap:48px;align-items:start;margin-top:52px;}

/* the picker is a control, not the message: quieter than in v3/v4 */
.pts-list{display:grid;gap:2px;}
.pts-list button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:20px 16px;border:0;border-left:2px solid transparent;border-radius:0 12px 12px 0;cursor:pointer;
  background:transparent;font-family:inherit;font-size:15px;font-weight:400;color:rgba(255,255,255,.5);
  text-align:left;transition:background .3s,color .3s,border-color .3s;}
.pts-list button:hover{color:#fff;background:rgba(255,255,255,.035);}
.pts-list button[aria-selected="true"]{color:#fff;background:rgba(255,255,255,.055);border-left-color:#2BC0A4;font-weight:500;}
.pts-list .ix{font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;font-size:11px;letter-spacing:1px;color:rgba(94,224,192,.5);}
.pts-list button[aria-selected="true"] .ix{color:#5EE0C0;}
.pts-list button:focus-visible{outline:2px solid #5EE0C0;outline-offset:-2px;}

/* ---- the unit: 520 x 240, MIRRORED (panel left, well right) ---- */
.pts-rig{position:relative;width:520px;max-width:100%;margin:0 auto;display:block;}
.pts-printer{position:absolute;left:0;bottom:0;width:520px;height:240px;border-radius:18px 18px 6px 6px;
  background:linear-gradient(178deg,#4C525A 0%,#3E444C 26%,#333941 62%,#262B32 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -2px 0 rgba(0,0,0,.65),
    0 44px 78px -32px rgba(0,0,0,.95);}
.pts-printer .cover{position:absolute;left:0;right:0;top:0;height:124px;border-radius:18px 18px 0 0;
  background:linear-gradient(176deg,#565C64 0%,#474D55 40%,#3B4149 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15);z-index:1;}
.pts-printer .cover::after{content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(102deg,transparent 20%,rgba(255,255,255,.05) 36%,transparent 54%);}
/* well offset RIGHT — the docket lands nearer the picker */
.pts-printer .well{position:absolute;left:96px;right:44px;top:72px;height:46px;border-radius:9px;
  background:linear-gradient(180deg,#121519 0%,#1A1E24 55%,#242930 100%);
  box-shadow:inset 0 5px 9px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.11);z-index:3;}
.pts-printer .tear{position:absolute;left:6px;right:6px;bottom:5px;height:7px;
  background:linear-gradient(180deg,#D8DBDE 0%,#9CA3AA 45%,#6B727A 100%);
  -webkit-mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) bottom/5px 7px repeat-x;
          mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) bottom/5px 7px repeat-x;}
/* control column now on the LEFT */
.pts-printer .panel{position:absolute;left:18px;top:22px;width:60px;height:98px;border-radius:10px;
  background:linear-gradient(180deg,#525860,#3E444C);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 2px 5px rgba(0,0,0,.45);z-index:3;}
.pts-printer .panel i{position:absolute;left:50%;transform:translateX(-50%);width:10px;height:4px;border-radius:2px;
  background:#22262B;box-shadow:inset 0 1px 1px rgba(0,0,0,.7);}
.pts-printer .panel i.p{top:12px;background:#4FD8BC;box-shadow:0 0 8px 2px rgba(43,192,164,.62);}
.pts-printer .panel i.e{top:29px;}
.pts-printer .panel i.r{top:46px;}
.pts-printer .panel .feed{position:absolute;left:50%;transform:translateX(-50%);bottom:10px;width:30px;height:30px;
  border-radius:50%;background:linear-gradient(180deg,#61676F,#42484F);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 4px rgba(0,0,0,.55);}
.pts-printer .seam{position:absolute;left:0;right:0;top:124px;height:1px;background:rgba(0,0,0,.55);
  box-shadow:0 1px 0 rgba(255,255,255,.06);z-index:1;}
/* wordmark moves right, rocker left — mirrored with the panel */
.pts-printer .mark{position:absolute;right:32px;bottom:36px;font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;
  font-size:17px;letter-spacing:3.4px;font-weight:500;color:rgba(255,255,255,.38);z-index:1;}
.pts-printer .rocker{position:absolute;left:40px;bottom:30px;width:50px;height:27px;border-radius:4px;
  background:linear-gradient(180deg,#1F2328,#141719);box-shadow:inset 0 2px 4px rgba(0,0,0,.85);z-index:1;}
.pts-printer .rocker::after{content:'';position:absolute;left:6px;top:5px;width:38px;height:16px;border-radius:3px;
  background:linear-gradient(180deg,#42484F,#2C3137);box-shadow:0 1px 2px rgba(0,0,0,.6);}
.pts-printer .plinth{position:absolute;left:0;right:0;bottom:0;height:17px;border-radius:0 0 6px 6px;
  background:linear-gradient(180deg,#1F2328,#121517);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);z-index:1;}

/* bottom = printer height - well centre = 240 - (72 + 23) = 145 */
.pts-out{position:absolute;left:96px;bottom:145px;width:380px;margin:0;z-index:2;
  filter:drop-shadow(0 -8px 20px rgba(0,0,0,.55));}
.pts-out::before{content:'';position:absolute;left:0;right:0;top:auto;bottom:0;height:26px;z-index:4;pointer-events:none;
  background:linear-gradient(0deg,rgba(0,0,0,.6),rgba(0,0,0,.2) 55%,transparent);}

/* ---- the point of this version: the four module lines carry the section ---- */
.pts-out .ptr-inner{padding:26px 32px 30px;}
.pts-out .ptr-brand i{width:19px;height:19px;}
.pts-out .ptr-brand span{font-size:13px;}
.pts-out .ptr-tag{font-size:11.5px;letter-spacing:1.8px;margin-top:6px;color:#a7aeb8;}
.pts-out .ptr-rule{margin:12px 0;}
.pts-out .ptr-name{font-size:27px;line-height:34px;letter-spacing:.6px;margin:3px 0 4px;}
.pts-out .ptr-sub{font-size:13px;line-height:1.5;}
.pts-out .ptr-meta{font-size:12.5px;}
.pts-out .ptr-li{font-size:16px;font-weight:600;margin:13px 0;color:#141c25;}
.pts-out .ptr-li .n{font-weight:600;letter-spacing:.1px;}
.pts-out .ptr-li .d{margin:0 9px;transform:translateY(-4px);}
.pts-out .ptr-li .v{font-size:14px;font-weight:800;color:#0d8f77;}
.pts-out .ptr-tot{font-size:16px;margin-top:6px;}
.pts-out .ptr-cta{font-size:13px;margin-top:18px;padding-top:13px;padding-bottom:13px;letter-spacing:1.3px;}
.pts-out .ptr-code{height:32px;margin-top:15px;transform:scaleX(1.35);opacity:.6;}
.pts-out .ptr-code i{max-height:32px;}
.pts-out .ptr-foot{font-size:11px;margin-top:10px;color:#b2b8c1;}
/* the caret is the cue that these lines are being written — make it read */
.pts-out .ptr-li .n.ptr-typing::after{width:7px;height:15px;}

.pts-out .ptr-paper{width:380px;
  -webkit-mask:linear-gradient(#000 0 0) bottom/100% calc(100% - 10px) no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20360%2010'%20preserveAspectRatio='none'%3E%3Cg%20transform='translate(0,10)%20scale(1,-1)'%3E%3Cpath%20d='M0,0%20H360%20V2.5%20L2.1,5.4%20L4.0,2.8%20L9.2,7.1%20L13.0,2.8%20L17.9,7.5%20L21.0,2.3%20L23.3,8.7%20L26.0,2.8%20L29.9,7.9%20L35.0,1.9%20L37.5,6.9%20L39.0,2.9%20L41.6,8.7%20L45.0,2.8%20L49.5,5.0%20L53.0,1.6%20L55.2,7.7%20L58.0,2.8%20L62.8,6.6%20L66.0,1.8%20L71.4,8.7%20L75.0,1.0%20L77.3,6.9%20L79.0,2.0%20L80.8,5.9%20L83.0,2.2%20L87.5,7.6%20L91.0,2.1%20L95.3,5.8%20L100.0,2.1%20L104.5,6.1%20L107.0,1.1%20L112.6,5.2%20L116.0,2.5%20L118.9,7.1%20L121.0,1.5%20L123.0,8.8%20L126.0,0.8%20L128.7,5.4%20L131.0,2.1%20L134.1,6.1%20L138.0,1.9%20L140.1,6.3%20L143.0,0.7%20L145.4,6.0%20L148.0,1.5%20L150.6,8.6%20L153.0,2.4%20L155.3,7.5%20L157.0,2.8%20L160.8,8.8%20L165.0,1.9%20L169.4,5.4%20L174.0,2.9%20L178.8,7.3%20L183.0,0.7%20L186.3,6.4%20L192.0,2.3%20L194.4,7.2%20L197.0,2.2%20L199.0,8.6%20L202.0,1.8%20L205.0,6.2%20L208.0,2.6%20L210.8,8.0%20L213.0,2.1%20L214.7,7.2%20L217.0,0.6%20L221.3,5.7%20L225.0,2.8%20L228.5,8.7%20L233.0,2.5%20L237.6,8.3%20L242.0,2.9%20L246.0,6.3%20L249.0,2.4%20L253.3,6.1%20L256.0,2.6%20L257.8,8.4%20L261.0,1.8%20L263.3,5.1%20L266.0,1.5%20L270.0,8.1%20L274.0,2.3%20L277.7,8.0%20L283.0,2.8%20L286.4,8.7%20L292.0,1.6%20L296.9,6.7%20L301.0,1.3%20L305.4,6.5%20L308.0,1.0%20L310.7,7.4%20L313.0,2.7%20L318.7,5.1%20L322.0,2.3%20L323.8,7.0%20L326.0,2.0%20L329.7,7.8%20L332.0,0.6%20L336.2,5.4%20L339.0,1.1%20L341.2,6.2%20L343.0,1.9%20L346.5,7.6%20L349.0,0.9%20L354.4,8.7%20L358.0,2.8%20L360.6,8.4%20L360.0,2.4%20L360,0%20Z'%20fill='%23000'/%3E%3C/g%3E%3C/svg%3E") top/100% 10px no-repeat;
          mask:linear-gradient(#000 0 0) bottom/100% calc(100% - 10px) no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20360%2010'%20preserveAspectRatio='none'%3E%3Cg%20transform='translate(0,10)%20scale(1,-1)'%3E%3Cpath%20d='M0,0%20H360%20V2.5%20L2.1,5.4%20L4.0,2.8%20L9.2,7.1%20L13.0,2.8%20L17.9,7.5%20L21.0,2.3%20L23.3,8.7%20L26.0,2.8%20L29.9,7.9%20L35.0,1.9%20L37.5,6.9%20L39.0,2.9%20L41.6,8.7%20L45.0,2.8%20L49.5,5.0%20L53.0,1.6%20L55.2,7.7%20L58.0,2.8%20L62.8,6.6%20L66.0,1.8%20L71.4,8.7%20L75.0,1.0%20L77.3,6.9%20L79.0,2.0%20L80.8,5.9%20L83.0,2.2%20L87.5,7.6%20L91.0,2.1%20L95.3,5.8%20L100.0,2.1%20L104.5,6.1%20L107.0,1.1%20L112.6,5.2%20L116.0,2.5%20L118.9,7.1%20L121.0,1.5%20L123.0,8.8%20L126.0,0.8%20L128.7,5.4%20L131.0,2.1%20L134.1,6.1%20L138.0,1.9%20L140.1,6.3%20L143.0,0.7%20L145.4,6.0%20L148.0,1.5%20L150.6,8.6%20L153.0,2.4%20L155.3,7.5%20L157.0,2.8%20L160.8,8.8%20L165.0,1.9%20L169.4,5.4%20L174.0,2.9%20L178.8,7.3%20L183.0,0.7%20L186.3,6.4%20L192.0,2.3%20L194.4,7.2%20L197.0,2.2%20L199.0,8.6%20L202.0,1.8%20L205.0,6.2%20L208.0,2.6%20L210.8,8.0%20L213.0,2.1%20L214.7,7.2%20L217.0,0.6%20L221.3,5.7%20L225.0,2.8%20L228.5,8.7%20L233.0,2.5%20L237.6,8.3%20L242.0,2.9%20L246.0,6.3%20L249.0,2.4%20L253.3,6.1%20L256.0,2.6%20L257.8,8.4%20L261.0,1.8%20L263.3,5.1%20L266.0,1.5%20L270.0,8.1%20L274.0,2.3%20L277.7,8.0%20L283.0,2.8%20L286.4,8.7%20L292.0,1.6%20L296.9,6.7%20L301.0,1.3%20L305.4,6.5%20L308.0,1.0%20L310.7,7.4%20L313.0,2.7%20L318.7,5.1%20L322.0,2.3%20L323.8,7.0%20L326.0,2.0%20L329.7,7.8%20L332.0,0.6%20L336.2,5.4%20L339.0,1.1%20L341.2,6.2%20L343.0,1.9%20L346.5,7.6%20L349.0,0.9%20L354.4,8.7%20L358.0,2.8%20L360.6,8.4%20L360.0,2.4%20L360,0%20Z'%20fill='%23000'/%3E%3C/g%3E%3C/svg%3E") top/100% 10px no-repeat;}
@media(max-width:1080px){
  .pts-stage{grid-template-columns:1fr;gap:44px;}
  /* control before output once stacked */
  .pts-left{order:2;}
  .pts-right{order:1;}
  .pts-list{grid-template-columns:1fr 1fr;}
}
@media(max-width:760px){
  .pts{padding:64px 0 0;}
  .pts-wrap{padding:0 20px;}
  .pts-title{font-size:32px;}
  .pts-lede{font-size:15px;}
  .pts-stage{margin-top:36px;gap:36px;}
  .pts-list{grid-template-columns:1fr;}
  .pts-list button{padding:16px;}
  .pts-rig{width:330px;}
  .pts-printer{width:330px;height:212px;}
  .pts-printer .cover{height:106px;}
  .pts-printer .well{left:64px;right:26px;top:56px;height:40px;}
  .pts-printer .seam{top:106px;}
  .pts-printer .panel{left:12px;width:44px;height:86px;top:16px;}
  .pts-printer .panel i.p{top:11px;}
  .pts-printer .panel i.e{top:27px;}
  .pts-printer .panel i.r{top:43px;}
  .pts-printer .panel .feed{width:26px;height:26px;bottom:9px;}
  .pts-printer .mark{right:20px;bottom:26px;font-size:13px;letter-spacing:2.4px;}
  .pts-printer .rocker{left:22px;bottom:22px;width:38px;height:22px;}
  .pts-printer .rocker::after{width:28px;height:13px;}
  .pts-printer .plinth{height:14px;}
  /* 212 - (56 + 20) = 136 */
  .pts-out{left:66px;width:240px;bottom:136px;}
  .pts-out .ptr-paper{width:240px;}
  .pts-out .ptr-inner{padding:20px 22px 24px;}
  .pts-out .ptr-brand i{width:17px;height:17px;}
  .pts-out .ptr-brand span{font-size:12px;}
  .pts-out .ptr-tag{font-size:8.5px;letter-spacing:.6px;}
  .pts-out .ptr-name{font-size:20px;line-height:27px;}
  .pts-out .ptr-sub{font-size:10.5px;}
  .pts-out .ptr-meta{font-size:10px;}
  .pts-out .ptr-li{font-size:12.5px;margin:8px 0;}
  .pts-out .ptr-li .d{margin:0 6px;transform:translateY(-3px);}
  .pts-out .ptr-li .v{font-size:11.5px;}
  .pts-out .ptr-tot{font-size:12.5px;}
  .pts-out .ptr-cta{font-size:9px;letter-spacing:.8px;padding:9px 6px;}
  .pts-out .ptr-code{height:26px;transform:none;}
  .pts-out .ptr-code i{max-height:26px;}
  .pts-out .ptr-foot{font-size:9px;}
}

/* The rig was centred in its column, which left a 179px trench between the
   docket and the picker — they read as two separate things rather than a pair.
   Right-align the unit so the paper sits against the gutter. The empty space
   moves to the section's left edge, under the centred header, where it reads as
   deliberate rather than as a gap between two related elements. */
.pts-rig{margin-left:auto;margin-right:0;}
.pts-stage{gap:44px;margin-top:46px;}
.pts{padding-top:76px;}
@media(max-width:1080px){
  .pts-rig{margin-left:auto;margin-right:auto;}
}

/* Right-aligning the rig left 178px dead at the section's left edge and none at
   the right, so the pair sat ~89px right of the centred header. Narrow the left
   column (moves the right-aligned printer left) and cap the picker so it stops
   stretching to the container edge: 86px inset on both sides, and the printer +
   picker together now centre on the same axis as the heading. */
.pts-stage{grid-template-columns:1.13fr .87fr;}
.pts-list{max-width:380px;}
@media(max-width:1080px){
  .pts-list{max-width:none;}
}

/* The two un-mediated .pts-stage rules above (grid-template-columns, gap,
   margin-top) were appended after the responsive blocks, so at equal specificity
   they won at every width and the columns never stacked — the section's
   overflow:hidden then clipped the printer instead of reporting overflow.
   Re-assert the responsive values last. */
@media(max-width:1080px){
  .pts-stage{grid-template-columns:1fr;gap:44px;}
}
@media(max-width:760px){
  .pts-stage{grid-template-columns:1fr;gap:36px;margin-top:36px;}
}

/* ---- v5 header: V1's (.ptx-ind) header verbatim ---------------------------
   I had matched .ptr's header, but "V1" is the first section on the page. Its
   heading is a different thing entirely — weight 800 at 47px with -1.1px
   tracking, and a bordered teal pill with a glowing dot, not a plain grey pill.
   Values copied from .ptx-eyebrow / .ptx-title / .ptx-lede, including the
   900px breakpoint. Overrides the .pts-* header rules above.               */
.pts-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;
  font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;color:#5EE0C0;
  background:rgba(43,192,164,.1);border:1px solid rgba(43,192,164,.26);
  padding:7px 14px;border-radius:100px;margin-bottom:22px;}
.pts-eyebrow i{width:6px;height:6px;border-radius:50%;background:#2BC0A4;box-shadow:0 0 10px 2px rgba(43,192,164,.7);font-style:normal;}
.pts-title{font-size:47px;line-height:1.1;font-weight:800;letter-spacing:-1.1px;margin:0 auto 16px;max-width:22ch;color:#fff;text-wrap:wrap;}
.pts-title em{font-style:normal;font-weight:800;background:linear-gradient(135deg,#5EE0C0,#2BC0A4 55%,#7FB8FF);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.pts-lede{font-size:17px;font-weight:400;line-height:1.6;color:rgba(255,255,255,.62);margin:0 auto 36px;max-width:56ch;}
/* the lede's own 36px bottom margin now sets the gap to the stage, as in V1 */
.pts-stage{margin-top:0;}
@media(max-width:900px){
  .pts-title{font-size:32px;}
  .pts-lede{font-size:15.5px;}
}

/* ============================================================================
   PTU — the venue picker, variation 6. v5's layout exactly (V1 header, device
   left / picker right, both top-aligned, device base flush with the section's
   bottom edge) with the printer replaced by a CSS-crafted iPhone. The picker
   swaps the app screen, and the screen LOADS: a progress hairline, skeleton
   bars, then the real rows staggering in — the analogue of v5's paper feed.
   Hardware is drawn, not photographed: no Apple asset ships with the site.
   Proportions follow a 15/16 Pro — 360x748 body (ratio 2.08), 3px frame rim,
   11px bezel, 58px body radius, Dynamic Island at 29% of screen width.
   ========================================================================= */
.ptu{position:relative;overflow:hidden;padding:76px 0 0;color:#fff;
  background:
    radial-gradient(900px 460px at 50% -6%, rgba(43,192,164,.17), transparent 62%),
    radial-gradient(680px 380px at 88% 108%, rgba(56,110,190,.12), transparent 66%),
    linear-gradient(180deg,#0C0F1A 0%,#10131F 50%,#0C0F1A 100%);}
.ptu-wrap{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 32px;}

/* ---- header: V1's (.ptx-ind) treatment, same as v5 ---- */
.ptu-head{text-align:center;}
.ptu-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;
  font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;color:#5EE0C0;
  background:rgba(43,192,164,.1);border:1px solid rgba(43,192,164,.26);
  padding:7px 14px;border-radius:100px;margin-bottom:22px;}
.ptu-eyebrow i{width:6px;height:6px;border-radius:50%;background:#2BC0A4;box-shadow:0 0 10px 2px rgba(43,192,164,.7);font-style:normal;}
.ptu-title{font-size:47px;line-height:1.1;font-weight:800;letter-spacing:-1.1px;margin:0 auto 16px;max-width:22ch;color:#fff;}
.ptu-title em{font-style:normal;font-weight:800;background:linear-gradient(135deg,#5EE0C0,#2BC0A4 55%,#7FB8FF);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.ptu-lede{font-size:17px;font-weight:400;line-height:1.6;color:rgba(255,255,255,.62);margin:0 auto 36px;max-width:56ch;}

/* ---- two columns, both starting on the same line ----
   518 / 538 with a 60px gutter puts 158px of air on each outer edge, so the
   phone + picker pair centres on the same axis as the heading. */
.ptu-stage{display:grid;grid-template-columns:.98fr 1.02fr;gap:60px;align-items:start;}

.ptu-list{display:grid;gap:2px;max-width:380px;}
.ptu-list button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:20px 16px;border:0;border-left:2px solid transparent;border-radius:0 12px 12px 0;cursor:pointer;
  background:transparent;font-family:inherit;font-size:15px;font-weight:400;color:rgba(255,255,255,.5);
  text-align:left;transition:background .3s,color .3s,border-color .3s;}
.ptu-list button:hover{color:#fff;background:rgba(255,255,255,.035);}
.ptu-list button[aria-selected="true"]{color:#fff;background:rgba(255,255,255,.055);border-left-color:#2BC0A4;font-weight:500;}
.ptu-list .ix{font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;font-size:11px;letter-spacing:1px;color:rgba(94,224,192,.5);}
.ptu-list button[aria-selected="true"] .ix{color:#5EE0C0;}
.ptu-list button:focus-visible{outline:2px solid #5EE0C0;outline-offset:-2px;}

/* ================= the device ================= */
.ptu-rig{position:relative;width:360px;max-width:100%;margin-left:auto;margin-right:0;}
.ptu-phone{position:relative;width:360px;height:748px;border-radius:58px;
  background:linear-gradient(145deg,#C7CBD0 0%,#8D9299 14%,#6F747B 30%,#8A8F96 52%,#5E636A 74%,#9BA0A7 92%,#70757C 100%);
  box-shadow:0 2px 3px rgba(255,255,255,.32) inset, 0 -2px 3px rgba(0,0,0,.4) inset,
    0 60px 90px -34px rgba(0,0,0,.95), 0 18px 40px -18px rgba(0,0,0,.7);}
/* black bezel inside the titanium rim */
.ptu-phone::before{content:'';position:absolute;inset:3px;border-radius:55px;
  background:#08090B;box-shadow:inset 0 0 2px 1px rgba(0,0,0,.9);}
/* side buttons, 15 Pro placement: action + volumes left, power right */
.ptu-phone .btn{position:absolute;width:3px;border-radius:2px;
  background:linear-gradient(180deg,#A9AEB4,#787D84 40%,#5E636A);}
.ptu-phone .btn.act{left:-3px;top:124px;height:30px;}
.ptu-phone .btn.vu{left:-3px;top:180px;height:62px;}
.ptu-phone .btn.vd{left:-3px;top:258px;height:62px;}
.ptu-phone .btn.pwr{right:-3px;top:198px;height:92px;}
/* glass sheen across the whole face */
.ptu-phone .gloss{position:absolute;inset:0;border-radius:58px;pointer-events:none;z-index:8;
  background:linear-gradient(122deg,rgba(255,255,255,.14) 0 16%,rgba(255,255,255,.03) 32%,rgba(255,255,255,0) 46%);}

.ptu-screen{position:absolute;inset:14px;border-radius:46px;overflow:hidden;z-index:2;
  background:#F4F6F8;color:#0E1620;text-align:left;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',system-ui,sans-serif;}
.ptu-island{position:absolute;left:50%;transform:translateX(-50%);top:12px;width:104px;height:30px;
  border-radius:16px;background:#07080A;z-index:6;}
.ptu-island::after{content:'';position:absolute;right:9px;top:50%;transform:translateY(-50%);
  width:9px;height:9px;border-radius:50%;background:#15181D;box-shadow:inset 0 0 2px rgba(90,140,160,.55);}
.ptu-home{position:absolute;left:50%;transform:translateX(-50%);bottom:8px;width:118px;height:5px;
  border-radius:3px;background:rgba(14,22,32,.26);z-index:6;}

/* status bar */
.ptu-status{position:absolute;left:0;right:0;top:0;height:52px;z-index:5;
  display:flex;align-items:center;justify-content:space-between;padding:0 27px;
  font-size:13.5px;font-weight:600;letter-spacing:.1px;color:#0E1620;}
.ptu-status .sig{display:inline-flex;align-items:flex-end;gap:1.5px;height:10px;}
.ptu-status .sig i{width:3px;background:#0E1620;border-radius:1px;}
.ptu-status .sig i:nth-child(1){height:4px;}
.ptu-status .sig i:nth-child(2){height:6px;}
.ptu-status .sig i:nth-child(3){height:8px;}
.ptu-status .sig i:nth-child(4){height:10px;}
.ptu-status .right{display:inline-flex;align-items:center;gap:6px;}
.ptu-status .bat{position:relative;width:23px;height:11.5px;border-radius:3.5px;border:1px solid rgba(14,22,32,.42);}
.ptu-status .bat::before{content:'';position:absolute;left:1.5px;top:1.5px;bottom:1.5px;width:14px;border-radius:2px;background:#0E1620;}
.ptu-status .bat::after{content:'';position:absolute;right:-3px;top:50%;transform:translateY(-50%);
  width:1.6px;height:4px;border-radius:0 1px 1px 0;background:rgba(14,22,32,.42);}

/* app chrome */
.ptu-app{position:absolute;left:0;right:0;top:52px;bottom:26px;z-index:4;overflow:hidden;padding:0 18px;}
.ptu-bar{position:absolute;left:0;right:0;top:0;height:2px;background:rgba(14,22,32,.07);overflow:hidden;}
.ptu-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2BC0A4,#5EE0C0);
  border-radius:2px;transition:width .52s cubic-bezier(.4,0,.2,1);}
.ptu-nav{display:flex;align-items:center;justify-content:space-between;height:46px;margin:0 -18px;padding:0 18px;
  border-bottom:1px solid rgba(14,22,32,.07);}
.ptu-nav .b{font-size:22px;line-height:1;color:#2BC0A4;font-weight:300;}
.ptu-nav .t{font-size:15px;font-weight:600;letter-spacing:-.2px;}
.ptu-nav .g{width:17px;height:17px;border-radius:50%;border:1.5px solid rgba(14,22,32,.3);}

.ptu-hero{padding:18px 0 4px;}
.ptu-vname{font-size:26px;font-weight:700;letter-spacing:-.7px;line-height:1.15;}
.ptu-vsvc{display:inline-flex;align-items:center;gap:6px;margin-top:9px;padding:5px 11px;border-radius:100px;
  background:rgba(43,192,164,.13);color:#0B7F69;font-size:12px;font-weight:600;letter-spacing:.2px;}
.ptu-vsvc i{width:6px;height:6px;border-radius:50%;background:#2BC0A4;}
.ptu-vsub{margin-top:11px;font-size:13px;line-height:1.45;color:#5C6672;}

.ptu-lbl{margin:18px 0 9px;font-size:11px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:#8A94A0;}
.ptu-mods{display:grid;gap:8px;}
.ptu-mod{display:flex;align-items:center;gap:11px;padding:13px 14px;border-radius:14px;background:#fff;
  box-shadow:0 1px 2px rgba(14,22,32,.06),0 1px 0 rgba(14,22,32,.03);}
.ptu-mod .ic{flex:none;width:22px;height:22px;border-radius:50%;background:rgba(43,192,164,.15);
  display:flex;align-items:center;justify-content:center;}
.ptu-mod .ic::after{content:'';width:9px;height:5px;border-left:2px solid #0B9E84;border-bottom:2px solid #0B9E84;
  transform:rotate(-45deg) translate(1px,-1px);}
.ptu-mod .n{flex:1;font-size:14px;font-weight:500;letter-spacing:-.1px;}
.ptu-mod .on{font-size:11.5px;font-weight:700;color:#0B9E84;letter-spacing:.3px;}

.ptu-sum{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding:0 3px;
  font-size:13px;color:#5C6672;}
.ptu-sum b{font-size:14px;font-weight:700;color:#0E1620;}
.ptu-cta{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:14px;height:46px;
  border-radius:14px;background:linear-gradient(135deg,#2BC0A4,#1FA98F);color:#fff;
  font-size:14px;font-weight:600;letter-spacing:.1px;text-decoration:none;
  box-shadow:0 6px 14px -5px rgba(43,192,164,.75);}
.ptu-cta:hover{color:#fff;}

/* ---- load-in: skeleton, then the real rows stagger up ---- */
.ptu-sk{border-radius:8px;background:linear-gradient(90deg,#E4E8ED 0%,#EFF2F5 42%,#E4E8ED 84%);
  background-size:280% 100%;animation:ptu-shim 1.15s linear infinite;}
@keyframes ptu-shim{0%{background-position:120% 0;}100%{background-position:-120% 0;}}
.ptu-skmod{height:48px;border-radius:14px;}
.ptu-app [data-r]{opacity:0;transform:translateY(9px);
  transition:opacity .42s cubic-bezier(.4,0,.2,1),transform .42s cubic-bezier(.4,0,.2,1);}
.ptu-app [data-r].in{opacity:1;transform:none;}

@media(prefers-reduced-motion:reduce){
  .ptu-sk{animation:none;}
  .ptu-app [data-r]{opacity:1;transform:none;transition:none;}
  .ptu-bar i{transition:none;}
}

@media(max-width:1080px){
  .ptu-stage{grid-template-columns:1fr;gap:44px;}
  .ptu-left{order:2;}
  .ptu-right{order:1;}
  .ptu-list{max-width:none;grid-template-columns:1fr 1fr;}
  .ptu-rig{margin-left:auto;margin-right:auto;}
}
@media(max-width:760px){
  .ptu{padding:64px 0 0;}
  .ptu-wrap{padding:0 20px;}
  .ptu-stage{grid-template-columns:1fr;gap:36px;}
  .ptu-list{grid-template-columns:1fr;}
  .ptu-list button{padding:16px;}
}
@media(max-width:900px){
  .ptu-title{font-size:32px;}
  .ptu-lede{font-size:15.5px;}
}

/* The screen had ~120px of dead space under the CTA. A real app has a tab bar
   there, so it fills the gap and buys authenticity instead of just padding.
   Decorative only — spans, not links, and aria-hidden. */
.ptu-app{bottom:84px;}
.ptu-tabs{position:absolute;left:0;right:0;bottom:26px;height:58px;z-index:5;
  display:flex;align-items:center;justify-content:space-around;padding:0 4px;
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1px solid rgba(14,22,32,.08);}
.ptu-tabs span{display:flex;flex-direction:column;align-items:center;gap:4px;
  font-size:9.5px;font-weight:500;letter-spacing:.1px;color:#98A1AC;}
.ptu-tabs span.on{color:#0B9E84;}
.ptu-tabs .i{position:relative;width:20px;height:20px;}
.ptu-tabs .ic-till{border:1.8px solid currentColor;border-radius:4px;}
.ptu-tabs .ic-till::after{content:'';position:absolute;left:2px;right:2px;top:4px;height:1.8px;background:currentColor;}
.ptu-tabs .ic-list::before{content:'';position:absolute;left:1px;right:1px;top:4px;height:1.8px;border-radius:1px;
  background:currentColor;box-shadow:0 5.5px 0 currentColor,0 11px 0 currentColor;}
.ptu-tabs .ic-grid::before{content:'';position:absolute;left:2px;top:2px;width:6.5px;height:6.5px;border-radius:2px;
  background:currentColor;box-shadow:9px 0 0 currentColor,0 9px 0 currentColor,9px 9px 0 currentColor;}
.ptu-tabs .ic-bars::before{content:'';position:absolute;bottom:3px;left:2px;width:3px;height:7px;border-radius:1px;
  background:currentColor;box-shadow:5.5px -3px 0 currentColor;}
.ptu-tabs .ic-bars::after{content:'';position:absolute;bottom:3px;left:13px;width:3px;height:13px;border-radius:1px;background:currentColor;}
.ptu-tabs .ic-cog::before{content:'';position:absolute;inset:2px;border:1.8px solid currentColor;border-radius:50%;}
.ptu-tabs .ic-cog::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:5px;height:5px;border-radius:50%;background:currentColor;}

/* The phone is a fixed 360px box, so below ~400px viewport it overflowed and the
   section's overflow:hidden clipped it silently (scrollWidth stayed 0). Scale the
   whole rig rather than re-deriving every internal px value — proportions, radii
   and the island stay exact. transform-origin:top with a negative margin-bottom
   gives back the height the transform no longer occupies, so the phone's base
   stays flush with the section's bottom edge.
   A fluid scale isn't expressible here: CSS can't divide a length by a length to
   get the unitless factor scale() needs, so these are stepped. */
@media(max-width:404px){
  .ptu-rig{transform:scale(.9);transform-origin:top center;margin-bottom:-75px;}
}
@media(max-width:364px){
  .ptu-rig{transform:scale(.78);margin-bottom:-165px;}
}

/* Correction to the block above: max-width:100% had already capped the rig
   narrower than the 360px phone inside it, so transform-origin:center scaled
   about the RIG's centre rather than the phone's and the device still ran off
   the right edge (40px at 320px wide). Keep the rig's box at the phone's true
   360px and centre it with a negative margin, so the origin is the phone's own
   centre and the scaled result lands centred. */
@media(max-width:404px){
  .ptu-rig{width:360px;max-width:none;margin-left:calc((100% - 360px)/2);margin-right:0;
    transform:scale(.9);transform-origin:top center;margin-bottom:-75px;}
}
@media(max-width:364px){
  .ptu-rig{transform:scale(.76);margin-bottom:-180px;}
}
/* ============================================================================
   PTW — the venue picker, variation 6. v5's layout exactly (V1 header, device
   left / picker right, both top-aligned, device base flush with the section's
   bottom edge) with the printer replaced by a CSS-crafted iPhone. The picker
   swaps the app screen, and the screen LOADS: a progress hairline, skeleton
   bars, then the real rows staggering in — the analogue of v5's paper feed.
   Hardware is drawn, not photographed: no Apple asset ships with the site.
   Proportions follow a 15/16 Pro — 360x748 body (ratio 2.08), 3px frame rim,
   11px bezel, 58px body radius, Dynamic Island at 29% of screen width.
   ========================================================================= */
.ptw{position:relative;overflow:hidden;padding:76px 0 0;color:#fff;
  background:
    radial-gradient(900px 460px at 50% -6%, rgba(43,192,164,.17), transparent 62%),
    radial-gradient(680px 380px at 88% 108%, rgba(56,110,190,.12), transparent 66%),
    linear-gradient(180deg,#0C0F1A 0%,#10131F 50%,#0C0F1A 100%);}
.ptw-wrap{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 32px;}

/* ---- header: V1's (.ptx-ind) treatment, same as v5 ---- */
.ptw-head{text-align:center;}
.ptw-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;
  font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;color:#5EE0C0;
  background:rgba(43,192,164,.1);border:1px solid rgba(43,192,164,.26);
  padding:7px 14px;border-radius:100px;margin-bottom:22px;}
.ptw-eyebrow i{width:6px;height:6px;border-radius:50%;background:#2BC0A4;box-shadow:0 0 10px 2px rgba(43,192,164,.7);font-style:normal;}
.ptw-title{font-size:47px;line-height:1.1;font-weight:800;letter-spacing:-1.1px;margin:0 auto 16px;max-width:22ch;color:#fff;}
.ptw-title em{font-style:normal;font-weight:800;background:linear-gradient(135deg,#5EE0C0,#2BC0A4 55%,#7FB8FF);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.ptw-lede{font-size:17px;font-weight:400;line-height:1.6;color:rgba(255,255,255,.62);margin:0 auto 36px;max-width:56ch;}

/* ---- two columns, both starting on the same line ----
   518 / 538 with a 60px gutter puts 158px of air on each outer edge, so the
   phone + picker pair centres on the same axis as the heading. */
.ptw-stage{display:grid;grid-template-columns:.98fr 1.02fr;gap:60px;align-items:start;}

.ptw-list{display:grid;gap:2px;max-width:380px;}
.ptw-list button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:20px 16px;border:0;border-left:2px solid transparent;border-radius:0 12px 12px 0;cursor:pointer;
  background:transparent;font-family:inherit;font-size:15px;font-weight:400;color:rgba(255,255,255,.5);
  text-align:left;transition:background .3s,color .3s,border-color .3s;}
.ptw-list button:hover{color:#fff;background:rgba(255,255,255,.035);}
.ptw-list button[aria-selected="true"]{color:#fff;background:rgba(255,255,255,.055);border-left-color:#2BC0A4;font-weight:500;}
.ptw-list .ix{font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;font-size:11px;letter-spacing:1px;color:rgba(94,224,192,.5);}
.ptw-list button[aria-selected="true"] .ix{color:#5EE0C0;}
.ptw-list button:focus-visible{outline:2px solid #5EE0C0;outline-offset:-2px;}

/* ================= the device ================= */
.ptw-rig{position:relative;width:360px;max-width:100%;margin-left:auto;margin-right:0;}
.ptw-phone{position:relative;width:360px;height:748px;border-radius:58px;
  background:linear-gradient(145deg,#C7CBD0 0%,#8D9299 14%,#6F747B 30%,#8A8F96 52%,#5E636A 74%,#9BA0A7 92%,#70757C 100%);
  box-shadow:0 2px 3px rgba(255,255,255,.32) inset, 0 -2px 3px rgba(0,0,0,.4) inset,
    0 60px 90px -34px rgba(0,0,0,.95), 0 18px 40px -18px rgba(0,0,0,.7);}
/* black bezel inside the titanium rim */
.ptw-phone::before{content:'';position:absolute;inset:3px;border-radius:55px;
  background:#08090B;box-shadow:inset 0 0 2px 1px rgba(0,0,0,.9);}
/* side buttons, 15 Pro placement: action + volumes left, power right */
.ptw-phone .btn{position:absolute;width:3px;border-radius:2px;
  background:linear-gradient(180deg,#A9AEB4,#787D84 40%,#5E636A);}
.ptw-phone .btn.act{left:-3px;top:124px;height:30px;}
.ptw-phone .btn.vu{left:-3px;top:180px;height:62px;}
.ptw-phone .btn.vd{left:-3px;top:258px;height:62px;}
.ptw-phone .btn.pwr{right:-3px;top:198px;height:92px;}
/* glass sheen across the whole face */
.ptw-phone .gloss{position:absolute;inset:0;border-radius:58px;pointer-events:none;z-index:8;
  background:linear-gradient(122deg,rgba(255,255,255,.14) 0 16%,rgba(255,255,255,.03) 32%,rgba(255,255,255,0) 46%);}

.ptw-screen{position:absolute;inset:14px;border-radius:46px;overflow:hidden;z-index:2;
  background:#F4F6F8;color:#0E1620;text-align:left;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',system-ui,sans-serif;}
.ptw-island{position:absolute;left:50%;transform:translateX(-50%);top:12px;width:104px;height:30px;
  border-radius:16px;background:#07080A;z-index:6;}
.ptw-island::after{content:'';position:absolute;right:9px;top:50%;transform:translateY(-50%);
  width:9px;height:9px;border-radius:50%;background:#15181D;box-shadow:inset 0 0 2px rgba(90,140,160,.55);}
.ptw-home{position:absolute;left:50%;transform:translateX(-50%);bottom:8px;width:118px;height:5px;
  border-radius:3px;background:rgba(14,22,32,.26);z-index:6;}

/* status bar */
.ptw-status{position:absolute;left:0;right:0;top:0;height:52px;z-index:5;
  display:flex;align-items:center;justify-content:space-between;padding:0 27px;
  font-size:13.5px;font-weight:600;letter-spacing:.1px;color:#0E1620;}
.ptw-status .sig{display:inline-flex;align-items:flex-end;gap:1.5px;height:10px;}
.ptw-status .sig i{width:3px;background:#0E1620;border-radius:1px;}
.ptw-status .sig i:nth-child(1){height:4px;}
.ptw-status .sig i:nth-child(2){height:6px;}
.ptw-status .sig i:nth-child(3){height:8px;}
.ptw-status .sig i:nth-child(4){height:10px;}
.ptw-status .right{display:inline-flex;align-items:center;gap:6px;}
.ptw-status .bat{position:relative;width:23px;height:11.5px;border-radius:3.5px;border:1px solid rgba(14,22,32,.42);}
.ptw-status .bat::before{content:'';position:absolute;left:1.5px;top:1.5px;bottom:1.5px;width:14px;border-radius:2px;background:#0E1620;}
.ptw-status .bat::after{content:'';position:absolute;right:-3px;top:50%;transform:translateY(-50%);
  width:1.6px;height:4px;border-radius:0 1px 1px 0;background:rgba(14,22,32,.42);}

/* app chrome */
.ptw-app{position:absolute;left:0;right:0;top:52px;bottom:26px;z-index:4;overflow:hidden;padding:0 18px;}
.ptw-bar{position:absolute;left:0;right:0;top:0;height:2px;background:rgba(14,22,32,.07);overflow:hidden;}
.ptw-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2BC0A4,#5EE0C0);
  border-radius:2px;transition:width .52s cubic-bezier(.4,0,.2,1);}
.ptw-nav{display:flex;align-items:center;justify-content:space-between;height:46px;margin:0 -18px;padding:0 18px;
  border-bottom:1px solid rgba(14,22,32,.07);}
.ptw-nav .b{font-size:22px;line-height:1;color:#2BC0A4;font-weight:300;}
.ptw-nav .t{font-size:15px;font-weight:600;letter-spacing:-.2px;}
.ptw-nav .g{width:17px;height:17px;border-radius:50%;border:1.5px solid rgba(14,22,32,.3);}

.ptw-hero{padding:18px 0 4px;}
.ptw-vname{font-size:26px;font-weight:700;letter-spacing:-.7px;line-height:1.15;}
.ptw-vsvc{display:inline-flex;align-items:center;gap:6px;margin-top:9px;padding:5px 11px;border-radius:100px;
  background:rgba(43,192,164,.13);color:#0B7F69;font-size:12px;font-weight:600;letter-spacing:.2px;}
.ptw-vsvc i{width:6px;height:6px;border-radius:50%;background:#2BC0A4;}
.ptw-vsub{margin-top:11px;font-size:13px;line-height:1.45;color:#5C6672;}

.ptw-lbl{margin:18px 0 9px;font-size:11px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:#8A94A0;}
.ptw-mods{display:grid;gap:8px;}
.ptw-mod{display:flex;align-items:center;gap:11px;padding:13px 14px;border-radius:14px;background:#fff;
  box-shadow:0 1px 2px rgba(14,22,32,.06),0 1px 0 rgba(14,22,32,.03);}
.ptw-mod .ic{flex:none;width:22px;height:22px;border-radius:50%;background:rgba(43,192,164,.15);
  display:flex;align-items:center;justify-content:center;}
.ptw-mod .ic::after{content:'';width:9px;height:5px;border-left:2px solid #0B9E84;border-bottom:2px solid #0B9E84;
  transform:rotate(-45deg) translate(1px,-1px);}
.ptw-mod .n{flex:1;font-size:14px;font-weight:500;letter-spacing:-.1px;}
.ptw-mod .on{font-size:11.5px;font-weight:700;color:#0B9E84;letter-spacing:.3px;}

.ptw-sum{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding:0 3px;
  font-size:13px;color:#5C6672;}
.ptw-sum b{font-size:14px;font-weight:700;color:#0E1620;}
.ptw-cta{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:14px;height:46px;
  border-radius:14px;background:linear-gradient(135deg,#2BC0A4,#1FA98F);color:#fff;
  font-size:14px;font-weight:600;letter-spacing:.1px;text-decoration:none;
  box-shadow:0 6px 14px -5px rgba(43,192,164,.75);}
.ptw-cta:hover{color:#fff;}

/* ---- load-in: skeleton, then the real rows stagger up ---- */
.ptw-sk{border-radius:8px;background:linear-gradient(90deg,#E4E8ED 0%,#EFF2F5 42%,#E4E8ED 84%);
  background-size:280% 100%;animation:ptw-shim 1.15s linear infinite;}
@keyframes ptw-shim{0%{background-position:120% 0;}100%{background-position:-120% 0;}}
.ptw-skmod{height:48px;border-radius:14px;}
.ptw-app [data-r]{opacity:0;transform:translateY(9px);
  transition:opacity .42s cubic-bezier(.4,0,.2,1),transform .42s cubic-bezier(.4,0,.2,1);}
.ptw-app [data-r].in{opacity:1;transform:none;}

@media(prefers-reduced-motion:reduce){
  .ptw-sk{animation:none;}
  .ptw-app [data-r]{opacity:1;transform:none;transition:none;}
  .ptw-bar i{transition:none;}
}

@media(max-width:1080px){
  .ptw-stage{grid-template-columns:1fr;gap:44px;}
  .ptw-left{order:2;}
  .ptw-right{order:1;}
  .ptw-list{max-width:none;grid-template-columns:1fr 1fr;}
  .ptw-rig{margin-left:auto;margin-right:auto;}
}
@media(max-width:760px){
  .ptw{padding:64px 0 0;}
  .ptw-wrap{padding:0 20px;}
  .ptw-stage{grid-template-columns:1fr;gap:36px;}
  .ptw-list{grid-template-columns:1fr;}
  .ptw-list button{padding:16px;}
}
@media(max-width:900px){
  .ptw-title{font-size:32px;}
  .ptw-lede{font-size:15.5px;}
}

/* The screen had ~120px of dead space under the CTA. A real app has a tab bar
   there, so it fills the gap and buys authenticity instead of just padding.
   Decorative only — spans, not links, and aria-hidden. */
.ptw-app{bottom:84px;}
.ptw-tabs{position:absolute;left:0;right:0;bottom:26px;height:58px;z-index:5;
  display:flex;align-items:center;justify-content:space-around;padding:0 4px;
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1px solid rgba(14,22,32,.08);}
.ptw-tabs span{display:flex;flex-direction:column;align-items:center;gap:4px;
  font-size:9.5px;font-weight:500;letter-spacing:.1px;color:#98A1AC;}
.ptw-tabs span.on{color:#0B9E84;}
.ptw-tabs .i{position:relative;width:20px;height:20px;}
.ptw-tabs .ic-till{border:1.8px solid currentColor;border-radius:4px;}
.ptw-tabs .ic-till::after{content:'';position:absolute;left:2px;right:2px;top:4px;height:1.8px;background:currentColor;}
.ptw-tabs .ic-list::before{content:'';position:absolute;left:1px;right:1px;top:4px;height:1.8px;border-radius:1px;
  background:currentColor;box-shadow:0 5.5px 0 currentColor,0 11px 0 currentColor;}
.ptw-tabs .ic-grid::before{content:'';position:absolute;left:2px;top:2px;width:6.5px;height:6.5px;border-radius:2px;
  background:currentColor;box-shadow:9px 0 0 currentColor,0 9px 0 currentColor,9px 9px 0 currentColor;}
.ptw-tabs .ic-bars::before{content:'';position:absolute;bottom:3px;left:2px;width:3px;height:7px;border-radius:1px;
  background:currentColor;box-shadow:5.5px -3px 0 currentColor;}
.ptw-tabs .ic-bars::after{content:'';position:absolute;bottom:3px;left:13px;width:3px;height:13px;border-radius:1px;background:currentColor;}
.ptw-tabs .ic-cog::before{content:'';position:absolute;inset:2px;border:1.8px solid currentColor;border-radius:50%;}
.ptw-tabs .ic-cog::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:5px;height:5px;border-radius:50%;background:currentColor;}

/* The phone is a fixed 360px box, so below ~400px viewport it overflowed and the
   section's overflow:hidden clipped it silently (scrollWidth stayed 0). Scale the
   whole rig rather than re-deriving every internal px value — proportions, radii
   and the island stay exact. transform-origin:top with a negative margin-bottom
   gives back the height the transform no longer occupies, so the phone's base
   stays flush with the section's bottom edge.
   A fluid scale isn't expressible here: CSS can't divide a length by a length to
   get the unitless factor scale() needs, so these are stepped. */
@media(max-width:404px){
  .ptw-rig{transform:scale(.9);transform-origin:top center;margin-bottom:-75px;}
}
@media(max-width:364px){
  .ptw-rig{transform:scale(.78);margin-bottom:-165px;}
}

/* Correction to the block above: max-width:100% had already capped the rig
   narrower than the 360px phone inside it, so transform-origin:center scaled
   about the RIG's centre rather than the phone's and the device still ran off
   the right edge (40px at 320px wide). Keep the rig's box at the phone's true
   360px and centre it with a negative margin, so the origin is the phone's own
   centre and the scaled result lands centred. */
@media(max-width:404px){
  .ptw-rig{width:360px;max-width:none;margin-left:calc((100% - 360px)/2);margin-right:0;
    transform:scale(.9);transform-origin:top center;margin-bottom:-75px;}
}
@media(max-width:364px){
  .ptw-rig{transform:scale(.76);margin-bottom:-180px;}
}

/* ---- v7 changes on top of the v6 clone ----------------------------------
   1. Heading and picker share the LEFT column, left-aligned; phone on the right.
      v6's full-width centred header owned a ~250px band nothing else used; here
      it sits alongside the phone's 748px, which has the room. ~1090 -> ~825.
   2. The screen now pushes like an iOS navigation transition instead of just
      fading: the incoming view slides in from the edge with its skeleton
      showing, the outgoing one parallaxes out at 26% and dims. Direction
      follows the picker — later venue pushes from the right, earlier from the
      left — so the motion matches the gesture.                              */
.ptw-head{text-align:left;}
.ptw-title{margin:0 0 16px;max-width:18ch;}
.ptw-lede{margin:0 0 32px;max-width:52ch;}
.ptw-stage{grid-template-columns:1.2fr .8fr;gap:56px;align-items:start;}
.ptw-list{max-width:480px;}
.ptw-list button{padding:24px 16px;}
/* phone moved to the right column; centre it there */
.ptw-rig{margin-left:auto;margin-right:auto;}

/* ---- app-screen push transition ---- */
.ptw-app{padding:0;display:flex;flex-direction:column;}
.ptw-bar{position:relative;top:auto;left:auto;right:auto;flex:none;}
.ptw-nav{margin:0;flex:none;}
.ptw-stack{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;}
.ptw-view{position:absolute;left:0;right:0;top:0;bottom:0;padding:0 18px;overflow:hidden;
  background:#F4F6F8;
  transition:transform .44s cubic-bezier(.32,.72,0,1),opacity .44s ease;}
/* the leading-edge shadow an iOS push casts on the screen beneath it */
.ptw-view::before{content:'';position:absolute;top:0;bottom:0;width:18px;pointer-events:none;}
.ptw-view.from-right::before{left:-18px;background:linear-gradient(90deg,transparent,rgba(14,22,32,.14));}
.ptw-view.from-left::before{right:-18px;background:linear-gradient(270deg,transparent,rgba(14,22,32,.14));}

@media(prefers-reduced-motion:reduce){
  .ptw-view{transition:none;}
}
@media(max-width:1080px){
  /* left column is the copy now, so it leads on mobile */
  .ptw-left{order:1;}
  .ptw-right{order:2;}
  .ptw-title{max-width:none;}
  .ptw-lede{max-width:none;}
  .ptw-list{max-width:none;}
}
@media(max-width:760px){
  .ptw-list button{padding:16px;}
}

/* 18ch was my own guess and it split the gradient across "big or / small.".
   V1's 22ch / 56ch fit the 636px column and give V1's own break —
   "Tools that fit any restaurant," / "big or small." */
.ptw-title{max-width:22ch;}
.ptw-lede{max-width:56ch;}

/* ---- v7 responsive re-assert -------------------------------------------
   Same mistake as v5: the un-mediated .ptw-stage and .ptw-rig overrides above
   were appended AFTER the cloned media blocks, so at equal specificity they won
   at every width — the columns never stacked and the phone lost the negative
   margin that centres it, ending up clipped off the right edge below 404px.
   Everything width-dependent is re-declared here, last, so source order agrees
   with intent. Any future .ptw rule must go above this block or repeat it.  */
@media(max-width:1080px){
  .ptw-stage{grid-template-columns:1fr;gap:44px;}
  .ptw-left{order:1;}
  .ptw-right{order:2;}
  .ptw-title{max-width:none;}
  .ptw-lede{max-width:none;}
  .ptw-list{max-width:none;grid-template-columns:1fr 1fr;}
  .ptw-rig{margin-left:auto;margin-right:auto;}
}
@media(max-width:760px){
  .ptw-stage{grid-template-columns:1fr;gap:36px;}
  .ptw-list{grid-template-columns:1fr;}
  .ptw-list button{padding:16px;}
}
@media(max-width:404px){
  .ptw-rig{width:360px;max-width:none;margin-left:calc((100% - 360px)/2);margin-right:0;
    transform:scale(.9);transform-origin:top center;margin-bottom:-75px;}
}
@media(max-width:364px){
  .ptw-rig{transform:scale(.76);margin-bottom:-180px;}
}

/* ---- v7 width trim -------------------------------------------------------
   244px of dead air sat between the picker and the phone. Container 1180 -> 1100
   and the gutter 56 -> 40; the picker also stops at 480 while its column is 630,
   which was half the gap, so it goes to 560.
   Floor on this: the title needs ~620px to keep "Tools that fit any restaurant,"
   on one line and the phone is a fixed 360, so content can't go below
   620 + 40 + 360 = 1020 (container 1084) without re-breaking the heading.
   Gap lands at ~113px.                                                      */
.ptw-wrap{max-width:1100px;}
.ptw-stage{grid-template-columns:1.265fr .735fr;gap:40px;}
.ptw-list{max-width:560px;}

/* re-assert AFTER the un-mediated rules above — see the v7 responsive note */
@media(max-width:1080px){
  .ptw-stage{grid-template-columns:1fr;gap:44px;}
  .ptw-left{order:1;}
  .ptw-right{order:2;}
  .ptw-title{max-width:none;}
  .ptw-lede{max-width:none;}
  .ptw-list{max-width:none;grid-template-columns:1fr 1fr;}
  .ptw-rig{margin-left:auto;margin-right:auto;}
}
@media(max-width:760px){
  .ptw-stage{grid-template-columns:1fr;gap:36px;}
  .ptw-list{grid-template-columns:1fr;}
  .ptw-list button{padding:16px;}
}
@media(max-width:404px){
  .ptw-rig{width:360px;max-width:none;margin-left:calc((100% - 360px)/2);margin-right:0;
    transform:scale(.9);transform-origin:top center;margin-bottom:-75px;}
}
@media(max-width:364px){
  .ptw-rig{transform:scale(.76);margin-bottom:-180px;}
}

/* ============================================================================
   PTD — reusable device frame. The iPhone hardware from .ptw (titanium rim,
   black bezel, side buttons, glass sheen) pulled out as a component that wraps
   ANY media. The frame conforms to whatever is inside: the media keeps its own
   aspect ratio and resolution, and the bezel simply surrounds it. Nothing is
   cropped or letterboxed.

   Use:
     <div class="ptd ptd--land">
       <span class="ptd-b act"></span><span class="ptd-b vu"></span>
       <span class="ptd-b vd"></span><span class="ptd-b pwr"></span>
       <div class="ptd-scr"><video …> or <img …></div>
       <span class="ptd-gloss"></span>
     </div>

   Modifiers: --land (buttons on the top edge, for landscape media)
              --port (buttons on the left/right edges, for portrait media)
              --tilt (the perspective tilt .pt-device-frame already used)
   Tunables:  --ptd-rim, --ptd-bezel, --ptd-r  — override per instance.
   Width comes from the parent; height follows the media. Buttons are placed in
   %, so they stay proportional at any size.
   ========================================================================= */
.ptd{
  --ptd-rim:3px;
  --ptd-bezel:13px;
  --ptd-r:38px;
  position:relative;display:block;
  padding:var(--ptd-bezel);
  border-radius:var(--ptd-r);
  background:linear-gradient(145deg,#C7CBD0 0%,#8D9299 14%,#6F747B 30%,#8A8F96 52%,#5E636A 74%,#9BA0A7 92%,#70757C 100%);
  box-shadow:0 2px 3px rgba(255,255,255,.32) inset,0 -2px 3px rgba(0,0,0,.4) inset,
    0 44px 78px -34px rgba(0,0,0,.55),0 14px 32px -14px rgba(0,0,0,.3);}
/* black bezel inside the titanium rim */
.ptd::before{content:'';position:absolute;inset:var(--ptd-rim);border-radius:calc(var(--ptd-r) - var(--ptd-rim));
  background:#08090B;box-shadow:inset 0 0 2px 1px rgba(0,0,0,.9);}
.ptd-scr{position:relative;z-index:2;overflow:hidden;line-height:0;background:#08090B;
  border-radius:calc(var(--ptd-r) - var(--ptd-bezel));}
/* the media governs the height — no fixed ratio imposed by the frame */
.ptd-scr>img,.ptd-scr>video,.ptd-scr>iframe,.ptd-scr>picture>img{display:block;width:100%;height:auto;border:0;}
.ptd-gloss{position:absolute;inset:0;border-radius:var(--ptd-r);pointer-events:none;z-index:3;
  background:linear-gradient(122deg,rgba(255,255,255,.13) 0 16%,rgba(255,255,255,.03) 32%,rgba(255,255,255,0) 46%);}

.ptd-b{position:absolute;border-radius:2px;
  background:linear-gradient(180deg,#A9AEB4,#787D84 40%,#5E636A);}
/* landscape: all four on the top edge — grouped left, power right. Percentages
   are the 15 Pro's own button ratios, so they read at any frame size. */
.ptd--land .ptd-b{top:calc(var(--ptd-rim) * -1);height:3px;
  background:linear-gradient(90deg,#A9AEB4,#787D84 40%,#5E636A);}
.ptd--land .ptd-b.act{left:16.5%;width:4%;}
.ptd--land .ptd-b.vu{left:24%;width:8.3%;}
.ptd--land .ptd-b.vd{left:34.5%;width:8.3%;}
.ptd--land .ptd-b.pwr{right:16%;width:12.3%;}
/* portrait: action + volumes left, power right, as on the handset */
.ptd--port .ptd-b{width:3px;}
.ptd--port .ptd-b.act{left:calc(var(--ptd-rim) * -1);top:16.5%;height:4%;}
.ptd--port .ptd-b.vu{left:calc(var(--ptd-rim) * -1);top:24%;height:8.3%;}
.ptd--port .ptd-b.vd{left:calc(var(--ptd-rim) * -1);top:34.5%;height:8.3%;}
.ptd--port .ptd-b.pwr{right:calc(var(--ptd-rim) * -1);top:26.5%;height:12.3%;}

.ptd--tilt{transform:perspective(1000px) rotateY(-5deg) rotateX(2deg);}

/* ---- v8: the homepage hero rebuilt with the frame -------------------------
   Reuses the live .pt-hero / .pt-container / .pt-btn / .pt-floating rules
   verbatim so this is a true recreation — only .pt-device-frame + .pt-screen
   are swapped for .ptd. Overrides are scoped to .pty so the real homepage is
   untouched. Breakpoints mirror the ones .pt-device-frame already had.     */
.pty .ptd{max-width:100%;}
@media(max-width:1024px){
  .pty .ptd{max-width:500px;margin:0 auto;}
  .pty .ptd--tilt{transform:none;}
}
@media(max-width:640px){
  .pty .ptd{max-width:100%;--ptd-bezel:10px;--ptd-r:30px;}
}

/* ============================================================================
   PTZ — the 45s Postree promo, storyboarded as a scrubable animation.
   Built the way a motion-graphics timeline works rather than the way a web
   page usually animates: one master clock in JS writes --st (seconds elapsed
   inside the current scene) onto the scene root, and every moving element is
   a PAUSED css animation whose delay is derived from it. Nothing runs on its
   own, so any frame can be seeked to exactly — which is what makes a clean
   screen-capture to MP4 possible, and what lets the scrubber work at all.
   Each animated element carries .ptza, an animation-name modifier, --o (its
   start offset inside the scene, in seconds) and --dur.
   ========================================================================= */

.ptz{background:#07100E;padding:110px 0 120px;position:relative;overflow:hidden;}
.ptz::before{content:'';position:absolute;top:-10%;left:50%;width:900px;height:520px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(34,165,142,.16),transparent 68%);pointer-events:none;}
.ptz-wrap{max-width:1200px;margin:0 auto;padding:0 24px;position:relative;z-index:1;}
.ptz-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:1.6px;
  text-transform:uppercase;color:#5FD9C0;margin-bottom:18px;}
.ptz-eyebrow i{width:6px;height:6px;border-radius:50%;background:#22A58E;box-shadow:0 0 0 4px rgba(34,165,142,.18);}
.ptz-title{font-size:44px;line-height:1.14;font-weight:800;color:#fff;letter-spacing:-.8px;max-width:16ch;margin-bottom:16px;}
.ptz-title em{font-style:normal;color:#5FD9C0;}
.ptz-lede{font-size:17px;line-height:1.65;color:#9AA8A4;max-width:60ch;margin-bottom:40px;}

/* ---- the stage ---------------------------------------------------------- */
.ptz-stage{position:relative;border-radius:18px;overflow:hidden;background:#050B0A;
  box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.07);}
.ptz-frame{position:relative;aspect-ratio:16/9;width:100%;
  /* every measurement inside a scene is expressed in cqw so the whole film
     scales as one piece instead of reflowing at each breakpoint */
  container-type:size;background:#050B0A;}
.ptz-scene{position:absolute;inset:0;display:none;}
.ptz-scene.is-on{display:block;}
.ptz-frame .ptza{animation-duration:calc(var(--dur,.8) * 1s);animation-timing-function:cubic-bezier(.16,1,.3,1);
  animation-fill-mode:both;animation-play-state:paused;animation-delay:calc((var(--o,0) - var(--st,0)) * 1s);}
.ptz-vig{position:absolute;inset:0;pointer-events:none;z-index:6;
  background:radial-gradient(ellipse at 50% 45%,transparent 52%,rgba(0,0,0,.55) 100%);}
.ptz-grain{position:absolute;inset:0;pointer-events:none;z-index:5;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:3px 3px;}

@keyframes ptzIn{from{opacity:0}to{opacity:1}}
@keyframes ptzOut{from{opacity:1}to{opacity:0}}
@keyframes ptzUp{from{opacity:0;transform:translateY(3.4cqw)}to{opacity:1;transform:translateY(0)}}
@keyframes ptzUpOut{0%{opacity:0;transform:translateY(3.4cqw)}22%,78%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-1.6cqw)}}
@keyframes ptzPop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}
@keyframes ptzTear{0%{opacity:1;transform:translate(0,0) rotate(0)}
  100%{opacity:0;transform:translate(58cqw,-14cqw) rotate(26deg)}}
@keyframes ptzSlideL{from{opacity:0;transform:translateX(-3cqw)}to{opacity:1;transform:translateX(0)}}
@keyframes ptzWipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes ptzGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ptzPush{from{opacity:0;transform:translateY(6cqw) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes ptzTick{0%{opacity:0;transform:translateY(1.6cqw)}100%{opacity:1;transform:translateY(0)}}
@keyframes ptzGlow{0%,100%{opacity:.35}50%{opacity:.9}}

/* ---- shared type inside the film ---------------------------------------- */
.ptz-line{position:absolute;left:7cqw;font-weight:800;color:#fff;letter-spacing:-.04em;line-height:1.05;}
.ptz-line.big{font-size:7.4cqw;}
.ptz-line.mid{font-size:5.2cqw;}
.ptz-line em{font-style:normal;color:#5FD9C0;}
.ptz-sub{position:absolute;left:7cqw;font-size:2.2cqw;font-weight:600;color:#8E9C98;letter-spacing:.02em;
  /* kept off the artwork on the right of the frame */
  max-width:34cqw;line-height:1.4;}

/* ---- scene 1 + 2 : the ticket ------------------------------------------- */
.ptz-ticket{position:absolute;right:9cqw;top:50%;width:25cqw;translate:0 -50%;
  background:#fff;border-radius:1.4cqw;padding:2.6cqw 2.4cqw;box-shadow:0 3cqw 6cqw rgba(0,0,0,.5);}
.ptz-tk-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.8cqw;}
.ptz-tk-h b{font-size:1.6cqw;font-weight:800;color:#303133;letter-spacing:.06em;text-transform:uppercase;}
.ptz-tk-h span{font-size:1.25cqw;color:#9CA3AF;font-weight:600;}
.ptz-tk-r{display:flex;justify-content:space-between;font-size:1.4cqw;color:#4A5568;font-weight:600;margin-bottom:1cqw;}
.ptz-tk-r span:last-child{color:#303133;font-weight:700;}
.ptz-tk-rule{height:1px;background:#E8E8ED;margin:1.6cqw 0;}
.ptz-tk-tot{display:flex;justify-content:space-between;align-items:baseline;}
.ptz-tk-tot span{white-space:nowrap;font-size:1.4cqw;font-weight:700;color:#64748B;text-transform:uppercase;letter-spacing:.08em;}
.ptz-tk-tot b{font-size:4.2cqw;font-weight:800;color:#22A58E;letter-spacing:-.03em;}
.ptz-tk-tot b.cut{color:#E05252;}
/* the slice that tears away — a clipped duplicate of the ticket's lower half */
.ptz-slice{position:absolute;right:9cqw;top:50%;width:25cqw;translate:0 -50%;
  background:#F3F4F6;border-radius:1.4cqw;padding:2.6cqw 2.4cqw;box-shadow:0 2cqw 4cqw rgba(0,0,0,.45);
  clip-path:polygon(0 58%,100% 50%,100% 100%,0 100%);}
.ptz-take{position:absolute;left:7cqw;bottom:11cqw;display:flex;align-items:center;gap:1.2cqw;}
.ptz-take i{width:3.4cqw;height:3.4cqw;border-radius:.9cqw;background:#2A3130;display:block;}
.ptz-take span{font-size:1.7cqw;font-weight:700;color:#6B7A76;}
.ptz-take b{font-size:2.4cqw;font-weight:800;color:#E05252;}

/* ---- scene 3 : the mark ------------------------------------------------- */
.ptz-mark{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.4cqw;}
.ptz-word{display:flex;gap:.2cqw;}
.ptz-word b{font-size:8.6cqw;font-weight:800;color:#fff;letter-spacing:-.05em;line-height:1;}
.ptz-word b:first-child{color:#22A58E;}
.ptz-mark p{font-size:2.6cqw;font-weight:600;color:#9AA8A4;letter-spacing:.01em;}
.ptz-ring{position:absolute;width:34cqw;height:34cqw;border-radius:50%;border:1px solid rgba(34,165,142,.35);}

/* ---- scene 4 : three phones --------------------------------------------- */
.ptz-phones{position:absolute;right:7cqw;top:50%;translate:0 -50%;width:39cqw;height:78cqh;}
.ptz-ph{position:absolute;width:19cqw;aspect-ratio:9/19;background:#12100F;border-radius:2.2cqw;
  padding:.55cqw;box-shadow:0 3cqw 6cqw rgba(0,0,0,.55),0 0 0 .12cqw rgba(255,255,255,.1);}
.ptz-ph i{position:absolute;top:.95cqw;left:50%;transform:translateX(-50%);width:4.4cqw;height:.75cqw;
  border-radius:.6cqw;background:#12100F;z-index:2;}
.ptz-ph-s{width:100%;height:100%;background:#fff;border-radius:1.75cqw;overflow:hidden;padding:2cqw .95cqw .95cqw;}
.ptz-ph:nth-child(1){left:0;top:7%;rotate:-6deg;}
.ptz-ph:nth-child(2){left:20cqw;top:0;z-index:2;rotate:4deg;}
.ptz-ph:nth-child(3){left:36cqw;top:9%;rotate:7deg;}
.ptz-ph-top{display:flex;align-items:center;gap:.5cqw;margin-bottom:.9cqw;padding:0 .3cqw;}
.ptz-ph-top u{width:1.7cqw;height:1.7cqw;border-radius:.45cqw;background:#22A58E;display:block;}
.ptz-ph-top s{flex:1;height:.62cqw;border-radius:.4cqw;background:#E8E8ED;display:block;text-decoration:none;}
.ptz-row{display:flex;align-items:center;gap:.6cqw;padding:.55cqw .3cqw;border-bottom:1px solid #F2F3F5;}
.ptz-row u{width:2.3cqw;height:2.3cqw;border-radius:.5cqw;background:#EDF0EF;display:block;flex-shrink:0;}
.ptz-row s{flex:1;height:.55cqw;border-radius:.4cqw;background:#E4E7E9;display:block;text-decoration:none;}
.ptz-row s.sm{flex:0 0 40%;}
.ptz-row em{font-size:.95cqw;font-weight:800;color:#22A58E;font-style:normal;}
.ptz-cta{margin:.9cqw .3cqw 0;height:2.1cqw;border-radius:.6cqw;background:#22A58E;display:flex;
  align-items:center;justify-content:center;font-size:.92cqw;font-weight:800;color:#fff;}
.ptz-done{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:.9cqw;}
.ptz-done u{width:4.2cqw;height:4.2cqw;border-radius:50%;background:#22A58E;display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:2.2cqw;font-weight:800;}
.ptz-done b{font-size:1.15cqw;font-weight:800;color:#303133;}
.ptz-done span{font-size:.92cqw;color:#9CA3AF;font-weight:600;}

/* ---- scene 5 : the pass ------------------------------------------------- */
.ptz-pos{position:absolute;right:4cqw;top:50%;translate:0 -50%;width:50cqw;aspect-ratio:960/433;
  background:#12100F;border-radius:1.6cqw;padding:.7cqw;box-shadow:0 3cqw 6cqw rgba(0,0,0,.55),0 0 0 .12cqw rgba(255,255,255,.1);}
.ptz-pos-s{width:100%;height:100%;background:#0F1513;border-radius:1.1cqw;overflow:hidden;display:flex;flex-direction:column;}
.ptz-pos-h{display:flex;align-items:center;justify-content:space-between;padding:1cqw 1.3cqw;border-bottom:1px solid rgba(255,255,255,.08);}
.ptz-pos-h b{font-size:1.15cqw;font-weight:800;color:#fff;letter-spacing:.1em;text-transform:uppercase;}
.ptz-pos-h span{font-size:1cqw;font-weight:700;color:#5FD9C0;}
.ptz-kds{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:.8cqw;padding:1cqw;}
.ptz-card{background:#18211E;border-radius:.8cqw;border-top:.25cqw solid #22A58E;padding:.9cqw;display:flex;flex-direction:column;gap:.5cqw;}
.ptz-card.new{border-top-color:#5FD9C0;box-shadow:0 0 0 .12cqw rgba(95,217,192,.45);}
.ptz-card b{font-size:.98cqw;font-weight:800;color:#fff;}
.ptz-card s{height:.42cqw;border-radius:.3cqw;background:rgba(255,255,255,.16);display:block;text-decoration:none;}
.ptz-card s.sm{width:60%;}
.ptz-card em{margin-top:auto;font-size:.85cqw;font-weight:700;color:#5FD9C0;font-style:normal;}
.ptz-bell{position:absolute;left:7cqw;bottom:12cqw;display:flex;align-items:center;gap:1cqw;}
.ptz-bell i{width:1.1cqw;height:1.1cqw;border-radius:50%;background:#5FD9C0;display:block;}
.ptz-bell span{font-size:1.6cqw;font-weight:700;color:#8E9C98;}

/* ---- scene 6 : the proof grid ------------------------------------------- */
.ptz-grid{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);width:74cqw;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.2cqw;}
.ptz-cell{aspect-ratio:16/10;border-radius:1cqw;background:linear-gradient(160deg,#182320,#0E1614);
  border:1px solid rgba(255,255,255,.09);display:flex;align-items:center;justify-content:center;
  font-size:1.35cqw;font-weight:800;color:#CFDBD7;letter-spacing:.02em;text-align:center;padding:.8cqw;}
.ptz-cell.on{background:linear-gradient(160deg,#1D3A33,#12211D);border-color:rgba(34,165,142,.4);color:#8FE8D3;}

/* ---- scene 7 : the end card --------------------------------------------- */
.ptz-end{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.8cqw;}
.ptz-end .ptz-word b{font-size:7cqw;}
.ptz-end p{font-size:2.4cqw;font-weight:700;color:#5FD9C0;}
.ptz-end u{font-size:1.7cqw;font-weight:600;color:#7C8C88;text-decoration:none;letter-spacing:.14em;text-transform:uppercase;}

/* ---- transport ---------------------------------------------------------- */
.ptz-big{position:absolute;inset:0;z-index:8;border:0;background:rgba(5,11,10,.55);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:opacity .3s;padding:0;}
.ptz-big span{width:80px;height:80px;border-radius:50%;background:#22A58E;display:flex;align-items:center;
  justify-content:center;box-shadow:0 12px 40px rgba(34,165,142,.5);transition:transform .25s;}
.ptz-big span::after{content:'';border-left:22px solid #fff;border-top:14px solid transparent;
  border-bottom:14px solid transparent;margin-left:6px;}
.ptz-big:hover span{transform:scale(1.08);}
.ptz-stage.playing .ptz-big,.ptz-stage.started .ptz-big{opacity:0;pointer-events:none;}

.ptz-ui{position:absolute;left:0;right:0;bottom:0;z-index:9;display:flex;align-items:center;gap:16px;
  padding:16px 20px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.8));
  opacity:0;transition:opacity .25s;}
.ptz-stage:hover .ptz-ui,.ptz-stage.paused .ptz-ui{opacity:1;}
.ptz-pp{width:38px;height:38px;flex-shrink:0;border-radius:50%;border:0;background:rgba(255,255,255,.14);
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;transition:background .2s;}
.ptz-pp:hover{background:rgba(255,255,255,.26);}
.ptz-track{flex:1;height:22px;position:relative;cursor:pointer;display:flex;align-items:center;}
.ptz-track::before{content:'';position:absolute;left:0;right:0;height:4px;border-radius:3px;background:rgba(255,255,255,.2);}
.ptz-fill{position:relative;height:4px;border-radius:3px;background:#22A58E;width:0;}
.ptz-marks{position:absolute;left:0;right:0;height:22px;pointer-events:none;}
.ptz-marks i{position:absolute;top:9px;width:2px;height:4px;background:rgba(255,255,255,.5);}
.ptz-time{font-size:12px;font-weight:700;color:#CFDBD7;font-variant-numeric:tabular-nums;flex-shrink:0;letter-spacing:.04em;}

/* ---- the shot list under the film --------------------------------------- */
.ptz-shots{margin-top:34px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;list-style:none;}
.ptz-shots li{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;
  padding:16px;cursor:pointer;transition:background .2s,border-color .2s,transform .2s;}
.ptz-shots li:hover{background:rgba(255,255,255,.08);transform:translateY(-2px);}
.ptz-shots li.on{background:rgba(34,165,142,.14);border-color:rgba(34,165,142,.5);}
.ptz-shots b{display:block;font-size:11px;font-weight:800;color:#5FD9C0;letter-spacing:.1em;margin-bottom:6px;}
.ptz-shots span{display:block;font-size:13.5px;font-weight:700;color:#E4EAE8;line-height:1.45;}
.ptz-note{margin-top:26px;font-size:13.5px;color:#71807C;line-height:1.7;max-width:76ch;}
.ptz-note b{color:#9AA8A4;font-weight:700;}

@media(max-width:900px){
  .ptz{padding:80px 0 90px;}
  .ptz-title{font-size:32px;}
  .ptz-lede{font-size:15.5px;margin-bottom:28px;}
  .ptz-shots{grid-template-columns:repeat(2,1fr);}
  .ptz-ui{opacity:1;padding:12px 14px;gap:12px;}
}
@media(max-width:560px){
  .ptz-shots{grid-template-columns:1fr;}
  .ptz-big span{width:56px;height:56px;}
  .ptz-big span::after{border-left-width:16px;border-top-width:10px;border-bottom-width:10px;}
}
@media(prefers-reduced-motion:reduce){
  .ptz-big{display:none;}
}

/* ---- real product captures ------------------------------------------------
   Scenes 4 and 5 show actual Postree screens rather than greyed-out mockups.
   The screenshot is the whole screen — anything drawn over it (the new-order
   pill) is deliberately styled as an overlay so it never reads as invented UI.
   -------------------------------------------------------------------------- */
.ptz-ph-s.real{padding:0;}
.ptz-shot{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;}
.ptz-ph-s.real .ptz-shot{border-radius:1.75cqw;}
.ptz-pos-s{position:relative;}
.ptz-pos-s .ptz-shot{border-radius:1.1cqw;}
.ptz-newpill{position:absolute;left:50%;bottom:6%;translate:-50% 0;display:flex;align-items:center;gap:.7cqw;
  padding:.75cqw 1.4cqw;border-radius:99px;background:rgba(7,16,14,.9);color:#fff;font-size:1.05cqw;font-weight:800;
  letter-spacing:.03em;white-space:nowrap;box-shadow:0 1cqw 2.4cqw rgba(0,0,0,.5),0 0 0 .1cqw rgba(95,217,192,.5);}
.ptz-newpill i{width:.75cqw;height:.75cqw;border-radius:50%;background:#5FD9C0;display:block;
  box-shadow:0 0 0 .3cqw rgba(95,217,192,.25);}

/* ---- parked ---------------------------------------------------------------
   The storyboard is internal review material, not part of the marketing page,
   so it stays out of the document unless the URL explicitly asks for it
   (any #ptz… hash, e.g. #ptz or #ptzt=27.5). Removing these two rules and the
   guard in the footer script puts it back on the page.
   -------------------------------------------------------------------------- */
.ptz{display:none;}
.ptz.ptz-reveal{display:block;}

/* ============================================================================
   PTM — the hero block, built to the Worldpay reference.
   Their composition, measured off the live page at 1440px: a 691x531 rounded
   panel (ratio 1.30), a hand-held phone centred in it and cropped by the panel
   floor, and a stack of UI cards floating over the screen at 15% / 27% / 43% /
   69% of the panel height, with a "powered by" line at 90%. Everything below
   is expressed as a percentage of the panel so the whole thing scales as one
   piece; the panel is a container so the type scales with it too.
   Theirs is a static illustration. Ours plays: the cards arrive in sequence,
   hold, then the loop restarts — "features keep popping up".
   No product screenshots here on purpose; these are drawn cards, like the
   reference.
   ========================================================================= */

.ptm{background:#fff;padding:64px 0 88px;overflow:hidden;}
.ptm-wrap{max-width:1300px;margin:0 auto;padding:0 24px;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:44px;align-items:center;}

/* ---- the copy, to the reference's proportions ---------------------------- */
.ptm-title{font-size:52px;line-height:1.02;font-weight:800;color:#1B2A4E;letter-spacing:-1.4px;margin-bottom:26px;}
.ptm-title em{font-style:normal;color:#22A58E;}
.ptm-lede{font-size:18px;line-height:1.62;color:#3F4A57;margin-bottom:30px;max-width:44ch;}
.ptm-cta .pt-btn{gap:10px;}
.ptm-cta .pt-btn svg{transition:transform .25s;}
.ptm-cta .pt-btn:hover svg{transform:translateX(3px);}

/* ---- the panel ----------------------------------------------------------- */
.ptm-stage{position:relative;aspect-ratio:691/531;border-radius:28px;overflow:hidden;
  background:linear-gradient(155deg,#38C6A9 0%,#22A58E 55%,#17836F 100%);
  container-type:inline-size;}

/* the hand sits so the phone lands where the reference's does: phone width
   41.2% of the panel, top at 2.4%, centre at 50.3% — solved back through the
   asset's own geometry (the handset is 53% of the image width, centred at 63%) */
.ptm-hand{position:absolute;top:2.4%;left:2%;width:77.2%;z-index:2;
  filter:drop-shadow(0 2.5cqw 3.5cqw rgba(4,38,31,.42));}
.ptm-hand img{display:block;width:100%;height:auto;}
/* the reference tints the handset screen rather than leaving it white */
.ptm-screen{position:absolute;z-index:1;top:2.9%;left:31.4%;width:38.6%;height:97%;
  border-radius:3.4cqw 3.4cqw 0 0;background:linear-gradient(180deg,#F4FBF9,#DCF0EB);}

/* ---- the cards ----------------------------------------------------------- */
.ptm-card{position:absolute;z-index:3;opacity:0;
  animation:ptmIn 14s cubic-bezier(.16,1,.3,1) infinite;}

/* 01 — the prompt pill */
.ptm-pill{top:15.1%;left:22.9%;width:54%;display:flex;align-items:center;gap:1.5cqw;
  background:#fff;border-radius:99px;padding:1.35cqw 2cqw;
  box-shadow:0 1.4cqw 3cqw rgba(4,38,31,.18);animation-delay:.2s;}
.ptm-pill b{font-size:2.45cqw;font-weight:600;color:#22303F;letter-spacing:-.01em;white-space:nowrap;}
.ptm-wave{display:flex;align-items:center;gap:.28cqw;flex-shrink:0;}
.ptm-wave i{width:.45cqw;border-radius:.3cqw;background:#22A58E;display:block;}
.ptm-wave i:nth-child(1){height:.9cqw}.ptm-wave i:nth-child(2){height:1.7cqw}
.ptm-wave i:nth-child(3){height:2.4cqw}.ptm-wave i:nth-child(4){height:1.3cqw}
.ptm-wave i:nth-child(5){height:2cqw}.ptm-wave i:nth-child(6){height:.8cqw}

/* 02 — the answer card */
.ptm-answer{top:27.3%;left:46.9%;width:33.3%;display:flex;gap:1.3cqw;
  background:#14806C;border-radius:2cqw;padding:1.7cqw 1.8cqw;
  box-shadow:0 1.6cqw 3.4cqw rgba(4,38,31,.28);animation-delay:2.4s;}
.ptm-answer p{font-size:2.15cqw;line-height:1.34;font-weight:600;color:#fff;}
.ptm-spark{width:4.2cqw;height:4.2cqw;border-radius:50%;flex-shrink:0;background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;}
.ptm-spark svg{width:2.4cqw;height:2.4cqw;}

/* 03 — the line that got added to the bill */
.ptm-item{top:42.6%;left:24.5%;width:50.8%;display:flex;align-items:center;gap:1.5cqw;
  background:#fff;border-radius:2cqw;padding:1.5cqw;
  box-shadow:0 1.8cqw 3.6cqw rgba(4,38,31,.22);animation-delay:4.6s;}
.ptm-item img{width:15cqw;height:15cqw;border-radius:1.6cqw;object-fit:cover;flex-shrink:0;display:block;}
.ptm-item-t{flex:1;min-width:0;}
.ptm-item-t b{display:block;font-size:2.05cqw;font-weight:700;color:#22303F;}
.ptm-item-t span{display:block;font-size:1.85cqw;color:#7C8894;margin-top:.2cqw;}
.ptm-item-t em{display:inline-block;font-style:normal;font-size:1.6cqw;font-weight:700;color:#14806C;
  background:#E4F6F1;border-radius:99px;padding:.35cqw 1cqw;margin-top:.7cqw;}
.ptm-item-p{text-align:right;flex-shrink:0;}
.ptm-item-p b{display:block;font-size:2.15cqw;font-weight:700;color:#22303F;}
.ptm-item-p u{display:inline-block;text-decoration:none;margin-top:.7cqw;font-size:1.6cqw;font-weight:700;
  color:#fff;background:#22A58E;border-radius:.9cqw;padding:.55cqw 1.3cqw;white-space:nowrap;}

/* 04 — the one behind it, half out of frame like the reference's */
.ptm-item2{top:68.9%;left:32.4%;width:34.7%;z-index:2;display:flex;align-items:center;gap:1.2cqw;
  background:#fff;border-radius:2cqw 2cqw 0 0;padding:1.3cqw;
  box-shadow:0 -0.4cqw 3cqw rgba(4,38,31,.16);animation-delay:6.6s;}
.ptm-item2 img{width:11cqw;height:11cqw;border-radius:1.3cqw;object-fit:cover;flex-shrink:0;display:block;}
.ptm-item2 b{display:block;font-size:1.9cqw;font-weight:700;color:#22303F;}
.ptm-item2 span{display:block;font-size:1.7cqw;color:#7C8894;white-space:nowrap;}
.ptm-item2 strong{margin-left:auto;font-size:1.9cqw;font-weight:700;color:#22303F;}

/* 05 — the endorsement line */
.ptm-by{top:88.5%;left:0;width:100%;text-align:center;animation-delay:8.4s;}
.ptm-by span{display:block;font-size:1.75cqw;font-weight:600;color:#6B7B86;}
.ptm-by b{display:block;font-size:3.8cqw;font-weight:800;color:#14806C;letter-spacing:-.04em;margin-top:.3cqw;}

@keyframes ptmIn{
  0%  {opacity:0;transform:translateY(2.2cqw) scale(.96);}
  4%  {opacity:1;transform:translateY(0) scale(1);}
  76% {opacity:1;transform:translateY(0) scale(1);}
  84% {opacity:0;transform:translateY(-1.4cqw) scale(.985);}
  100%{opacity:0;transform:translateY(-1.4cqw) scale(.985);}
}

@media(max-width:1024px){
  .ptm-wrap{grid-template-columns:1fr;gap:36px;}
  .ptm-title{font-size:40px;letter-spacing:-1px;}
  .ptm-stage{max-width:560px;margin:0 auto;width:100%;}
}
@media(max-width:640px){
  .ptm{padding:48px 0 64px;}
  .ptm-title{font-size:30px;letter-spacing:-.5px;}
  .ptm-lede{font-size:15.5px;}
}
@media(prefers-reduced-motion:reduce){
  .ptm-card{animation:none;opacity:1;transform:none;}
}

/* ============================================================================
   PTP2 - "The room reshapes" ENHANCED MOCKUP (test-2 only, 2026-09-11).
   Proposals 1-4 layered on top of the PTP engine:
     (1) service pulse  - flow dots trace the venue's actual operation
     (2) vocabulary     - 5 unit types (counter / seat / screen / wall / hero)
                          plus a fading icon annotation layer over key fixtures
     (3) cascade        - per-unit transition-delay, left-to-right sweep
     (4) full pool      - every venue uses all 14 units, nothing implodes
   Namespaced .ptp2-* so it cannot touch .ptp. No-ops without .ptp2.
   ========================================================================= */
.ptp2{position:relative;overflow:hidden;padding:100px 0 104px;color:#fff;
  background:
    radial-gradient(900px 460px at 50% -6%, rgba(43,192,164,.17), transparent 62%),
    radial-gradient(680px 380px at 10% 106%, rgba(56,110,190,.13), transparent 66%),
    linear-gradient(180deg,#0C0F1A 0%,#10131F 50%,#0C0F1A 100%);}
.ptp2-wrap{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 32px;text-align:center;}
.ptp2-eyebrow{display:inline-flex;align-items:center;font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;
  font-size:12px;letter-spacing:.4px;color:#fff;background:rgba(255,255,255,.1);padding:8px 16px;border-radius:100px;}
.ptp2-title{font-size:52px;font-weight:300;line-height:1.24;letter-spacing:-.02em;margin:22px auto 0;max-width:20ch;color:#fff;}
.ptp2-title em{font-style:normal;font-weight:500;background:linear-gradient(120deg,#7FF0D6,#2BC0A4 60%,#8FC4FF);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.ptp2-lede{font-size:16px;font-weight:300;line-height:1.55;color:rgba(228,231,242,.7);max-width:58ch;margin:18px auto 0;}

.ptp2-pick{display:inline-flex;gap:2px;padding:5px;border-radius:100px;margin-top:34px;max-width:100%;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);overflow-x:auto;scrollbar-width:none;}
.ptp2-pick::-webkit-scrollbar{display:none;}
.ptp2-pick button{position:relative;border:0;background:none;cursor:pointer;font-family:inherit;font-size:13.5px;
  font-weight:500;color:rgba(255,255,255,.55);padding:10px 17px;border-radius:100px;white-space:nowrap;
  transition:color .3s,background .3s;}
.ptp2-pick button:hover{color:#fff;}
.ptp2-pick button[aria-selected="true"]{color:#04120E;background:linear-gradient(135deg,#5EE0C0,#2BC0A4);font-weight:600;}
.ptp2-pick button:focus-visible{box-shadow:0 0 0 2px #5EE0C0;}

.ptp2-stage{display:grid;grid-template-columns:1.35fr .65fr;gap:48px;align-items:center;margin-top:48px;text-align:left;}
.ptp2-room{position:relative;border-radius:20px;padding:14px;
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 30px 60px -30px rgba(0,0,0,.9);}
.ptp2-room svg{display:block;width:100%;height:auto;}
.ptp2-floor{fill:none;stroke:rgba(255,255,255,.13);stroke-width:1.5;}
.ptp2-dots{fill:rgba(255,255,255,.07);}

/* ---- (3) cascade: every unit carries its own --d delay ---- */
.ptp2-u{
  transition:
    x .72s cubic-bezier(.5,0,.15,1) var(--d,0ms),
    y .72s cubic-bezier(.5,0,.15,1) var(--d,0ms),
    width .72s cubic-bezier(.5,0,.15,1) var(--d,0ms),
    height .72s cubic-bezier(.5,0,.15,1) var(--d,0ms),
    rx .72s cubic-bezier(.5,0,.15,1) var(--d,0ms),
    fill .55s ease var(--d,0ms),
    stroke .55s ease var(--d,0ms),
    stroke-width .55s ease var(--d,0ms),
    opacity .45s ease var(--d,0ms);
  fill:rgba(255,255,255,.26);stroke:rgba(255,255,255,0);stroke-width:0;}

/* ---- (2) the vocabulary ---- */
.ptp2-u.t-counter{fill:rgba(43,192,164,.62);stroke:rgba(255,255,255,0);stroke-width:0;}
.ptp2-u.t-seat{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.38);stroke-width:2;}
.ptp2-u.t-screen{fill:rgba(43,192,164,.16);stroke:rgba(94,224,192,.8);stroke-width:2;}
.ptp2-u.t-wall{fill:rgba(255,255,255,.15);stroke:rgba(255,255,255,0);stroke-width:0;}
.ptp2-u.t-hero{fill:rgba(94,224,192,.9);stroke:rgba(255,255,255,0);stroke-width:0;
  filter:drop-shadow(0 0 7px rgba(94,224,192,.65));}

/* ---- (1) service pulse ---- */
.ptp2-flow{opacity:0;transition:opacity .5s ease;}
.ptp2-flow.on{opacity:1;}
.ptp2-dot{fill:#7FF0D6;filter:drop-shadow(0 0 6px rgba(127,240,214,.9));
  animation:ptp2move var(--dur,4.2s) linear infinite;animation-delay:var(--ad,0s);}
@keyframes ptp2move{
  0%{offset-distance:0%;opacity:0}
  10%{opacity:1}
  84%{opacity:1}
  100%{offset-distance:100%;opacity:0}
}

/* ---- (2b) icon annotation layer: fades in AFTER the morph settles ---- */
.ptp2-ico{opacity:0;transition:opacity .45s ease;}
.ptp2-ico.on{opacity:1;}
.ptp2-ico path,.ptp2-ico circle,.ptp2-ico rect,.ptp2-ico line,.ptp2-ico polyline{
  fill:none;stroke:rgba(210,255,244,.72);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.ptp2-ico .ink path,.ptp2-ico .ink circle,.ptp2-ico .ink rect,.ptp2-ico .ink line,.ptp2-ico .ink polyline{
  stroke:rgba(4,18,14,.82);}
.ptp2-lbl{font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;font-size:9.5px;
  letter-spacing:.9px;text-transform:uppercase;fill:rgba(255,255,255,.4);stroke:none;}

.ptp2-tag{position:absolute;left:26px;bottom:26px;display:inline-flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;font-size:10.5px;letter-spacing:1.2px;
  text-transform:uppercase;color:#CFFDEF;background:rgba(6,20,16,.7);border:1px solid rgba(94,224,192,.3);
  padding:6px 12px;border-radius:100px;}
.ptp2-tag i{width:5px;height:5px;border-radius:50%;background:#2BC0A4;box-shadow:0 0 8px 2px rgba(43,192,164,.8);}

.ptp2-kicker{display:block;font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(94,224,192,.9);margin-bottom:12px;}
.ptp2-name{font-size:30px;font-weight:300;line-height:1.25;letter-spacing:-.01em;margin:0 0 14px;color:#fff;}
.ptp2-desc{font-size:15.5px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.75);margin:0 0 20px;}
.ptp2-feats{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px;}
.ptp2-feats li{position:relative;padding-left:20px;font-size:14px;font-weight:300;color:rgba(255,255,255,.7);}
.ptp2-feats li::before{content:'';position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:2px;
  background:#2BC0A4;box-shadow:0 0 8px 1px rgba(43,192,164,.55);}
.ptp2-more{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;color:#7FF0D6;
  text-decoration:none;border-bottom:1px solid rgba(127,240,214,.35);padding-bottom:2px;transition:gap .25s,border-color .25s;}
.ptp2-more:hover{gap:12px;border-color:#7FF0D6;}
.ptp2-anim{opacity:0;transform:translateY(10px);}
.ptp2-in{opacity:1;transform:none;transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1);}

/* review-only chrome so BEFORE / AFTER are tellable apart. Strip before ship. */
.ptp2-ab{font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;font-size:11px;letter-spacing:1.6px;
  text-transform:uppercase;text-align:center;padding:14px 20px;color:#0C0F1A;background:#5EE0C0;font-weight:700;}
.ptp2-ab.is-before{background:rgba(255,255,255,.16);color:rgba(255,255,255,.75);}

@media(max-width:900px){ .ptp2-stage{grid-template-columns:1fr;gap:28px;} }
@media(max-width:760px){
  .ptp2{padding:72px 0 76px;}
  .ptp2-wrap{padding:0 20px;}
  .ptp2-title{font-size:31px;}
  .ptp2-lede{font-size:15px;}
  .ptp2-pick{justify-content:flex-start;}
  .ptp2-stage{margin-top:34px;}
  .ptp2-room{padding:10px;border-radius:16px;}
  .ptp2-name{font-size:25px;}
  .ptp2-tag{left:18px;bottom:18px;}
}
@media(prefers-reduced-motion:reduce){
  .ptp2-u{transition:none!important;}
  .ptp2-dot{animation:none!important;}
  .ptp2-flow{opacity:0!important;}
  .ptp2-anim,.ptp2-in{opacity:1!important;transform:none!important;transition:none!important;}
}

/* ============================================================================
   PTI - "The room rebuilds itself", ISOMETRIC variation (test-2 only, 2026-09-11).
   True 30-degree iso. Each unit is an extruded box: top face lightest, +x face
   mid, +y face darkest, plus a flat contact shadow on the floor. Faces are
   recomputed per frame by a rAF tween (polygon points are not CSS-animatable),
   so colour is the only thing CSS transitions here.
   Namespaced .pti-* so it cannot touch .ptp or .ptp2. No-ops without .pti.
   ========================================================================= */
.pti{position:relative;overflow:hidden;padding:100px 0 104px;color:#fff;
  background:
    radial-gradient(900px 460px at 50% -6%, rgba(43,192,164,.17), transparent 62%),
    radial-gradient(680px 380px at 12% 108%, rgba(56,110,190,.15), transparent 66%),
    linear-gradient(180deg,#0B0E18 0%,#10131F 52%,#0B0E18 100%);}
.pti-wrap{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 32px;text-align:center;}
.pti-eyebrow{display:inline-flex;align-items:center;font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;
  font-size:12px;letter-spacing:.4px;color:#fff;background:rgba(255,255,255,.1);padding:8px 16px;border-radius:100px;}
.pti-title{font-size:52px;font-weight:300;line-height:1.24;letter-spacing:-.02em;margin:22px auto 0;max-width:20ch;color:#fff;}
.pti-title em{font-style:normal;font-weight:500;background:linear-gradient(120deg,#7FF0D6,#2BC0A4 60%,#8FC4FF);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.pti-lede{font-size:16px;font-weight:300;line-height:1.55;color:rgba(228,231,242,.7);max-width:58ch;margin:18px auto 0;}

.pti-pick{display:inline-flex;gap:2px;padding:5px;border-radius:100px;margin-top:34px;max-width:100%;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);overflow-x:auto;scrollbar-width:none;}
.pti-pick::-webkit-scrollbar{display:none;}
.pti-pick button{border:0;background:none;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:500;
  color:rgba(255,255,255,.55);padding:10px 17px;border-radius:100px;white-space:nowrap;transition:color .3s,background .3s;}
.pti-pick button:hover{color:#fff;}
.pti-pick button[aria-selected="true"]{color:#04120E;background:linear-gradient(135deg,#5EE0C0,#2BC0A4);font-weight:600;}
.pti-pick button:focus-visible{box-shadow:0 0 0 2px #5EE0C0;}

.pti-stage{display:grid;grid-template-columns:1.42fr .58fr;gap:44px;align-items:center;margin-top:46px;text-align:left;}
.pti-room{position:relative;border-radius:20px;padding:10px 14px;
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 40px 70px -34px rgba(0,0,0,.95);}
.pti-room svg{display:block;width:100%;height:auto;}

/* ---- floor ---- */
.pti-slab{fill:rgba(255,255,255,.045);}
.pti-grid{stroke:rgba(255,255,255,.10);stroke-width:1;}
.pti-edge{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1.5;stroke-linejoin:round;}

/* ---- units: three shaded faces + contact shadow ---- */
.pti-u polygon{transition:fill .5s ease;}
.pti-sh{fill:rgba(0,0,0,.42);}
/* seating - pale, matte */
.pti-u.t-seat .pti-tp{fill:#8E97AE;}
.pti-u.t-seat .pti-fx{fill:#5C6478;}
.pti-u.t-seat .pti-fy{fill:#434A5C;}
/* counters / fixtures - brand green */
.pti-u.t-counter .pti-tp{fill:#3FD3B2;}
.pti-u.t-counter .pti-fx{fill:#219E85;}
.pti-u.t-counter .pti-fy{fill:#17705F;}
/* screens & kiosks - darker body, lit top */
.pti-u.t-screen .pti-tp{fill:#9BF3DF;}
.pti-u.t-screen .pti-fx{fill:#1D5F52;}
.pti-u.t-screen .pti-fy{fill:#123F37;}
/* walls & dividers - recessive */
.pti-u.t-wall .pti-tp{fill:#4A5268;}
.pti-u.t-wall .pti-fx{fill:#333a4b;}
.pti-u.t-wall .pti-fy{fill:#262C3A;}
/* hero - the signature piece, lit */
.pti-u.t-hero .pti-tp{fill:#9DFFE6;}
.pti-u.t-hero .pti-fx{fill:#35C7A7;}
.pti-u.t-hero .pti-fy{fill:#1E8C75;}
.pti-u.t-hero{filter:drop-shadow(0 0 12px rgba(94,224,192,.35));}

.pti-tag{position:absolute;left:26px;bottom:22px;display:inline-flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;font-size:10.5px;letter-spacing:1.2px;
  text-transform:uppercase;color:#CFFDEF;background:rgba(6,20,16,.7);border:1px solid rgba(94,224,192,.3);
  padding:6px 12px;border-radius:100px;}
.pti-tag i{width:5px;height:5px;border-radius:50%;background:#2BC0A4;box-shadow:0 0 8px 2px rgba(43,192,164,.8);}

.pti-kicker{display:block;font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(94,224,192,.9);margin-bottom:12px;}
.pti-name{font-size:30px;font-weight:300;line-height:1.25;letter-spacing:-.01em;margin:0 0 14px;color:#fff;}
.pti-desc{font-size:15.5px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.75);margin:0 0 20px;}
.pti-feats{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px;}
.pti-feats li{position:relative;padding-left:20px;font-size:14px;font-weight:300;color:rgba(255,255,255,.7);}
.pti-feats li::before{content:'';position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:2px;
  background:#2BC0A4;box-shadow:0 0 8px 1px rgba(43,192,164,.55);}
.pti-more{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;color:#7FF0D6;
  text-decoration:none;border-bottom:1px solid rgba(127,240,214,.35);padding-bottom:2px;transition:gap .25s,border-color .25s;}
.pti-more:hover{gap:12px;border-color:#7FF0D6;}
.pti-anim{opacity:0;transform:translateY(10px);}
.pti-in{opacity:1;transform:none;transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1);}

@media(max-width:900px){ .pti-stage{grid-template-columns:1fr;gap:26px;} }
@media(max-width:760px){
  .pti{padding:72px 0 76px;}
  .pti-wrap{padding:0 14px;}
  .pti-title{font-size:31px;}
  .pti-lede{font-size:15px;}
  .pti-pick{justify-content:flex-start;}
  .pti-stage{margin-top:34px;}
  .pti-room{padding:6px 7px;border-radius:14px;}
  .pti-name{font-size:25px;}
  .pti-tag{left:13px;bottom:11px;font-size:9px;padding:5px 9px;letter-spacing:1px;}
  .pti-stage{gap:22px;}
  .pti-desc{font-size:15px;}
  .pti-feats{grid-template-columns:1fr 1fr;gap:8px 14px;}
}
@media(prefers-reduced-motion:reduce){
  .pti-anim,.pti-in{opacity:1!important;transform:none!important;transition:none!important;}
}

/* ---- annotation callouts (added 2026-09-13). Whole feature switches off via
   the LABELS flag in the PTI script; these rules then simply never apply. ---- */
.pti-lbl{opacity:0;transition:opacity .5s ease;pointer-events:none;}
.pti-lbl.on{opacity:1;}
.pti-leader{stroke:rgba(255,255,255,.3);stroke-width:1;}
.pti-ldot{fill:rgba(127,240,214,.9);r:2;}
.pti-ltx{font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;font-size:10px;
  letter-spacing:1.1px;text-transform:uppercase;fill:rgba(255,255,255,.78);
  paint-order:stroke fill;stroke:rgba(7,11,19,.9);stroke-width:3px;stroke-linejoin:round;}
/* SVG text is measured in VIEWBOX units, so it shrinks with the room. On a
   375px screen ~347px of room renders a 690-unit viewBox at ~0.50 scale, so a
   10px label would land at 5px on glass. These values are pre-divided. */
@media(max-width:760px){
  .pti-ltx{font-size:22px;letter-spacing:2.2px;stroke-width:6px;}
  .pti-leader{stroke-width:2.2;}
  .pti-ldot{r:4;}
}

/* =========================================================================
   POSTREE SITE ADDITIONS - device-frame + responsive helpers
   Keep this block when editing this file; removing it breaks the KDS,
   POS, table-ordering and catering image layouts.
   ========================================================================= */

/* Mobile: centre-align split page hero (text, badge and CTAs) */
@media(max-width:768px){
  .pt-page-hero-split .pt-container{text-align:center;}
  .pt-page-hero-split .pt-hero-ctas{align-items:center;justify-content:center;}
}

/* Phone frame: portrait app screenshot inside a feature row */
.pt-feature-img.pt-phone{background:none!important;height:auto;overflow:visible;padding:0;border-radius:0!important;box-shadow:none!important;}
.pt-feature-img.pt-phone .pt-phone-body{max-width:300px;margin:0 auto;background:#0B0E13;border-radius:46px;padding:10px;border:1px solid rgba(255,255,255,.10);box-shadow:0 30px 64px rgba(16,24,40,.30);}
.pt-feature-img.pt-phone img{width:100%;height:auto;object-fit:contain;display:block;border-radius:36px;}
@media(max-width:768px){.pt-feature-img.pt-phone .pt-phone-body{max-width:260px;}}

/* Device shot: product photo that already carries its own frame/background */
.pt-feature-img.pt-devshot{background:none!important;border:0!important;height:auto;aspect-ratio:16/9;padding:0;overflow:visible;border-radius:0!important;box-shadow:none!important;display:flex;align-items:center;justify-content:center;}
.pt-feature-img.pt-devshot img{width:100%;height:100%;object-fit:contain;border-radius:0;filter:none;}

/* Table ordering strip: images that already carry their own device frame */
.pt-tordp-frame.pt-tordp-plain{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;border-radius:0!important;}
.pt-tordp-frame.pt-tordp-plain::before{display:none!important;}
.pt-tordp-frame.pt-tordp-plain:hover{transform:none;box-shadow:none!important;}
.pt-tordp-frame.pt-tordp-plain img{width:100%;height:430px;object-fit:contain;object-position:center bottom;border-radius:0!important;display:block;}
@media(max-width:820px){.pt-tordp-frame.pt-tordp-plain img{height:400px;}}

/* Catering steps: images that already carry their own device frame */
.pt-cwf-frame.pt-cwf-plain{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;overflow:visible;}
.pt-cwf-card:hover .pt-cwf-frame.pt-cwf-plain{transform:none;box-shadow:none!important;}
.pt-cwf-frame.pt-cwf-plain .pt-cwf-bar{display:none!important;}
.pt-cwf-frame.pt-cwf-plain .pt-cwf-shot{aspect-ratio:3/2;background:none;overflow:visible;}
.pt-cwf-frame.pt-cwf-plain .pt-cwf-shot img{object-fit:contain;object-position:center;}

/* Mobile/tablet: never crop a wide image into the fixed-height boxes.
   Modifier variants (pt-shot, pt-devshot, pt-phone, pt-voucher) manage
   their own aspect ratios and are deliberately excluded. */
@media(max-width:1024px){
  .pt-feature-img:not(.pt-shot):not(.pt-devshot):not(.pt-phone):not(.pt-voucher){height:auto;min-height:0;}
  .pt-feature-img:not(.pt-shot):not(.pt-devshot):not(.pt-phone):not(.pt-voucher) img{height:auto;object-fit:contain;}
  .pt-testi-img{height:auto;min-height:0;}
  .pt-testi-img img{height:auto;object-fit:contain;}
}

/* Mobile: collapse inline-styled grids. These are set via style attributes in
   page content, so the responsive rules above never reach them and the columns
   stay side by side, squashing images and overflowing the viewport. */
@media(max-width:768px){
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:repeat(2,1fr)"]{grid-template-columns:1fr!important;gap:28px!important;}
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr)!important;gap:20px!important;}
}
@media(min-width:769px) and (max-width:1024px){
  [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr)!important;}
}

/* "Built into the till you already use." (Clock In / Clock Out) — these cards are
   inline-styled with no class, so they never matched the shared card-hover rule
   above. Same lift, same easing. !important is needed only because box-shadow and
   border are set inline on the element and would otherwise win. */
.pt-lift{transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,border-color .35s;}
.pt-lift:hover{transform:translateY(-6px);
  box-shadow:var(--ptm-card-sh-hover)!important;border-color:rgba(34,165,142,.32)!important;}
@media(prefers-reduced-motion:reduce){.pt-lift{transition:none;}.pt-lift:hover{transform:none;}}

/* Hero media that already carries its own device frame and shadow (the Clock In /
   Clock Out POS render) - show it plainly, no card treatment. Same intent as the
   existing .pt-feature-img.pt-devshot rule, extended to the hero container.
   !important is needed because .pt-hero-media img sets border-radius !important above. */
.pt-hero-media.pt-devshot img{border-radius:0!important;box-shadow:none!important;filter:none;}

/* 3:2 device renders. The default .pt-devshot box is 16/9, so a 3:2 image is
   constrained by height and sits ~16% narrower than its column with slack either
   side. Match the box to the image so it fills the column width. */
.pt-feature-img.pt-devshot.pt-ar-3x2{aspect-ratio:3/2;}

/* Feature-list steps with a bold lead-in. The base rule makes each <li> a flex
   container, so the <strong> becomes its own flex item and the description a
   second one - the two end up as ragged side-by-side columns with an uneven gap.
   When a bold lead-in is present, flow them as one paragraph instead and hang the
   tick in the gutter. Plain (text-only) items keep the original flex layout. */
.pt-feature-list li:has(strong){display:block;position:relative;padding-left:26px;line-height:1.7;}
.pt-feature-list li:has(strong)::before{position:absolute;left:0;top:8px;}

/* 8:5 device renders (1586x992). Same cause as the 3:2 case above - the default
   .pt-devshot box is 16/9, so these sit ~10% narrower than their column. */
.pt-feature-img.pt-devshot.pt-ar-8x5{aspect-ratio:8/5;}

/* Renders shot on a near-white backdrop (#FEFEFE). Multiply blends that backdrop
   into whatever colour the section is, so they stop reading as a white rectangle on
   the tinted rows and their drop shadow tints with the background. This matters
   because .pt-feature-row:nth-child(even) tints by POSITION - insert or remove a
   section and a different row becomes the tinted one. On white rows it is a no-op. */
.pt-feature-img.pt-devshot.pt-on-white img{mix-blend-mode:multiply;}
/* Same for the hero render, which sits on the .pt-page-hero gradient. */
.pt-hero-media.pt-on-white img{mix-blend-mode:multiply;}

/* ---- .pt-feature-content alignment (revert = delete this block) --------------
   The page markup uses .pt-feature-content, but the theme only ever styled
   .pt-feature-text. 44 blocks across 15 pages therefore fell back to browser
   defaults (24px pure-black Nunito headings, black body copy at default leading),
   while 9 blocks on 3 pages that do use .pt-feature-text rendered as designed.
   This matches the two, using the same values as .pt-feature-text once the
   display-font and letter-spacing rules above have applied. */
.pt-feature-content h2{font-size:32px;font-weight:800;color:#303133;margin-bottom:16px;
  letter-spacing:-.03em;font-family:'Plus Jakarta Sans','Nunito',sans-serif!important;}
.pt-feature-content p{font-size:16px;color:#64748B;line-height:1.7;margin-bottom:16px;}

/* Product renders on a FLAT white backdrop that sit on a tinted band - multiply
   blends the white away into the section colour. Only correct for FLAT white: on a
   render whose backdrop is a soft gradient this darkens it into a visible rectangle
   instead, which is why those keep the framed-card treatment. */
.pt-blend-white img{mix-blend-mode:multiply;}

/* Screenshots that carry their own dark canvas. They have no white backdrop to blend,
   so the tinted .pt-shot panel just boxes them in and shrinks them. Sit them plainly at
   full column width, no crop, with a soft rounded edge of their own. */
.pt-feature-img.pt-devshot.pt-ar-4x3{aspect-ratio:4/3;}
.pt-feature-img.pt-devshot.pt-rounded img{border-radius:14px;
  filter:drop-shadow(0 18px 40px rgba(16,24,40,.16));}
.pt-feature-img.pt-devshot.pt-ar-5x4{aspect-ratio:5/4;}

/* The catering "three steps" shots are already frameless via .pt-cwf-plain, but they
   sit on a gradient band, so their white backdrop has to blend rather than match one
   fixed colour. Their backdrops are flattened to true white, so multiply tracks the
   gradient at every point. */
.pt-cwf-frame.pt-cwf-plain .pt-cwf-shot img{mix-blend-mode:multiply;}

/* Window frame: wraps a raw UI screenshot in the theme's browser chrome
   (.pt-ofo-browser + .pt-ofo-bar) inside a feature row. */
.pt-feature-img.pt-winshot{background:none!important;border:0!important;height:auto;min-height:0;padding:0;overflow:visible;border-radius:0!important;box-shadow:none!important;display:block;}
.pt-feature-img.pt-winshot .pt-ofo-browser{width:100%;}
.pt-feature-img.pt-winshot img{width:100%!important;height:auto!important;object-fit:contain;border-radius:0!important;display:block;}

/* =========================================================================
   Footer: demo strip, contact rows and livelier link behaviour
   ========================================================================= */
.pt-footer-cta{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;padding:30px 34px;margin-bottom:54px;border-radius:18px;background:linear-gradient(135deg,rgba(34,165,142,.18),rgba(34,165,142,.04));border:1px solid rgba(34,165,142,.30);}
.pt-footer-cta h3{font-size:22px;font-weight:800;color:#fff;margin:0 0 6px;letter-spacing:-.01em;line-height:1.3;}
.pt-footer-cta p{font-size:14.5px;color:rgba(255,255,255,.62);margin:0;line-height:1.6;}
.pt-footer-cta .pt-btn{flex-shrink:0;}

.pt-footer-col h4{position:relative;padding-bottom:12px;}
.pt-footer-col h4::after{content:'';position:absolute;left:0;bottom:0;width:22px;height:2px;border-radius:2px;background:#22A58E;}
.pt-footer-col a{transition:color .2s ease,transform .2s ease;}
.pt-footer-col a:hover{color:#fff;transform:translateX(3px);}

.pt-footer-contact{margin-top:18px;display:grid;gap:11px;}
.pt-footer-contact a,.pt-footer-contact span{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:rgba(255,255,255,.58);line-height:1.65;transition:color .2s ease;}
.pt-footer-contact a:hover{color:#fff;}
.pt-footer-contact svg{flex-shrink:0;margin-top:3px;color:#22A58E;}

.pt-footer-made{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:rgba(255,255,255,.42);}
.pt-footer-made svg{color:#22A58E;flex-shrink:0;}

@media(max-width:768px){
  .pt-footer-cta{padding:26px 22px;justify-content:center;text-align:center;}
  .pt-footer-contact a,.pt-footer-contact span{justify-content:flex-start;}
}

/* =========================================================================
   Gift voucher "three screens" step cards: numbered, staggered entrance
   sweeping left to right, and a zoom on the screenshot when hovered.
   ========================================================================= */
.pt-vstep-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px;max-width:1120px;margin:0 auto;}
.pt-vstep{background:#fff;border:1px solid rgba(16,24,40,.07);border-radius:16px;overflow:hidden;box-shadow:0 8px 24px rgba(16,24,40,.05);transition:transform .38s cubic-bezier(.16,1,.3,1),box-shadow .38s ease;}
.pt-vstep:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(16,24,40,.13);}

.pt-vstep-shot{overflow:hidden;aspect-ratio:16/11;background:#F7FAF9;}
.pt-vstep-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s cubic-bezier(.16,1,.3,1);}
.pt-vstep:hover .pt-vstep-shot img{transform:scale(1.08);}

.pt-vstep-body{padding:24px 24px 28px;}
.pt-vstep-num{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 7px;border-radius:100px;background:#EEFAF7;border:1px solid rgba(34,165,142,.22);margin-bottom:14px;}
.pt-vstep-num b{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#22A58E;color:#fff;font-size:12px;font-weight:800;line-height:1;}
.pt-vstep-num span{font-size:12px;font-weight:800;color:#0f7d68;letter-spacing:.07em;text-transform:uppercase;}
.pt-vstep-body h3{font-size:17px;font-weight:700;color:#303133;margin:0 0 8px;}
.pt-vstep-body p{font-size:14.5px;color:#64748B;line-height:1.7;margin:0;}

/* entrance: slide in from the left, staggered so the row reads 1 -> 2 -> 3 */
.pt-js .pt-vstep.pt-reveal{opacity:0;transform:translateX(-42px);transition:opacity .72s cubic-bezier(.16,1,.3,1),transform .72s cubic-bezier(.16,1,.3,1);}
.pt-js .pt-vstep.pt-reveal.pt-in{opacity:1;transform:none;}
.pt-js .pt-vstep-grid>.pt-vstep:nth-child(1){transition-delay:0ms;}
.pt-js .pt-vstep-grid>.pt-vstep:nth-child(2){transition-delay:130ms;}
.pt-js .pt-vstep-grid>.pt-vstep:nth-child(3){transition-delay:260ms;}

@media(prefers-reduced-motion:reduce){
  .pt-vstep,.pt-vstep-shot img{transition:none!important;}
  .pt-vstep:hover{transform:none;}
  .pt-vstep:hover .pt-vstep-shot img{transform:none;}
}
.pt-vstep-num{padding:7px 15px;}

/* HERO HARDWARE — the hero device mockup was replaced by the hardware render.
   The render carries its own flat-white backdrop (.pt-blend-white multiplies it
   away), so it needs no bezel. It gets its OWN float keyframes: the device's
   ptFloat bakes in perspective/rotateY, which would tilt a product photo.
   Remove this block and the hero image sits flat and static. */
.pt-hero-hardware{position:relative;}
.pt-hero-hardware img{width:100%;display:block;}
@media(min-width:1025px){
  .pt-hero-hardware{animation:ptHeroHwFloat 6.5s ease-in-out infinite;}
  @keyframes ptHeroHwFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
}
@media(prefers-reduced-motion:reduce){
  .pt-hero-hardware{animation:none!important;}
}
/* The +32% card was tuned to overlap the old device bezel. Against the hardware
   render it landed on the tablet at bottom-left, so drop it clear of the product
   and let it overlap only the render's empty white margin. Scoped with :has so
   the other .pt-floating card (post 74) is untouched. */
@media(min-width:1025px){
  .pt-device:has(.pt-hero-hardware) .pt-floating{bottom:-58px;left:-10px;}
}

/* VENUE SWITCHER — replaced the emoji till + invented analytics panel with one
   generated scene per venue. The scenes carry their own label and feature chips,
   so the old two-column grid (.pt-posx-grid / .pt-posx-screen-wrap) is gone and
   this is a single centred figure. The .pt-posx rules above that target
   .pt-device-frame / .pt-screen are now only used by other sections. */
.pt-posx-figure{margin:0 auto;max-width:1040px;border-radius:20px;overflow:hidden;
  box-shadow:0 34px 80px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.08);
  background:#0B0E13;}
.pt-posx-img{display:block;width:100%;height:auto;
  transition:opacity .28s ease;}
.pt-posx-img.is-swapping{opacity:.35;}
@media(prefers-reduced-motion:reduce){.pt-posx-img{transition:none;}}
@media(max-width:900px){.pt-posx-figure{border-radius:14px;}}

/* PRODUCT CARD ICONS — each card carried its own pastel tile as an inline
   background, set in page content across all 8 .pt-products grids (home plus
   the venue pages). Unified to one brand tile; !important because those inline
   styles are still in the content of the venue pages. The homepage SVGs were
   redrawn to match their cards (QR for table ordering, chef hat for KDS,
   browser for web design); the venue pages keep their own glyphs. */
.pt-products .pt-prod-icon{background:#EEFAF7!important;color:#22A58E;
  transition:background .25s ease;}
.pt-products .pt-prod-card:hover .pt-prod-icon{background:#D8F1EA!important;}

/* VENUE PRODUCT CARDS — the five service pages now lead each product card with a
   real photo instead of a 56px icon tile (.pt-prod-icon). The card keeps its own
   border, radius and hover lift; padding moves onto the inner elements so the
   shot can bleed to the card edge. Home, Restaurants and Catering still use the
   icon-tile variant, which is why both live side by side. */
.pt-prod-card-img{padding:0;overflow:hidden;}
.pt-prod-shot{aspect-ratio:16/10;background:#F2F6F5;overflow:hidden;}
.pt-prod-shot img{width:100%;height:100%;object-fit:cover;display:block;}
/* Portrait phone renders would be destroyed by a 16/10 cover crop. */
.pt-prod-shot-fit{background:#F2F6F5;}
.pt-prod-shot-fit img{object-fit:contain;}
.pt-prod-card-img h3{margin:24px 26px 10px;}
.pt-prod-card-img p{margin:0 26px;}
.pt-prod-card-img .pt-prod-link{margin:18px 26px 26px;}
@media(max-width:768px){
  .pt-prod-card-img h3{margin:20px 20px 8px;}
  .pt-prod-card-img p{margin:0 20px;}
  .pt-prod-card-img .pt-prod-link{margin:16px 20px 20px;}
}

/* =====================================================================
   FORMS — demo request + partner application. The markup comes from the
   [pt_demo_form] / [pt_partner_form] shortcodes in functions.php, which
   also hold the handler. The product picker is a <details> element so it
   still works with JS off; footer.php only updates the summary text.
   ===================================================================== */
.pt-form-group{margin-bottom:18px;}
.pt-form label{display:block;font-size:14.5px;font-weight:600;color:#303133;margin-bottom:7px;}
.pt-req{color:#D14343;font-weight:700;}
.pt-form input[type=text],.pt-form input[type=email],.pt-form input[type=tel],
.pt-form input[type=url],.pt-form select,.pt-form textarea{
  width:100%;padding:13px 15px;border:1.5px solid #E5E7EB;border-radius:10px;
  font-size:15px;font-family:inherit;color:#303133;background:#fff;box-sizing:border-box;
  transition:border-color .18s,box-shadow .18s;}
.pt-form input:focus,.pt-form select:focus,.pt-form textarea:focus{
  outline:none;border-color:#22A58E;box-shadow:0 0 0 3px rgba(34,165,142,.12);}
.pt-form textarea{resize:vertical;min-height:110px;}
.pt-form-hint{font-size:13px;color:#7A8A85;margin:7px 0 0;}
/* honeypot: off-screen rather than display:none, which some bots skip */
.pt-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* product picker */
.pt-multi{position:relative;border:1.5px solid #E5E7EB;border-radius:10px;background:#fff;}
.pt-multi[open]{border-color:#22A58E;box-shadow:0 0 0 3px rgba(34,165,142,.12);}
.pt-multi>summary{list-style:none;cursor:pointer;padding:13px 15px;display:flex;align-items:center;
  justify-content:space-between;gap:10px;font-size:15px;color:#303133;border-radius:9px;}
.pt-multi>summary::-webkit-details-marker{display:none;}
.pt-multi>summary:focus-visible{outline:2px solid #22A58E;outline-offset:2px;}
.pt-multi-chev{width:9px;height:9px;border-right:2px solid #7A8A85;border-bottom:2px solid #7A8A85;
  transform:rotate(45deg);margin-top:-4px;flex:0 0 auto;transition:transform .2s;}
.pt-multi[open] .pt-multi-chev{transform:rotate(-135deg);margin-top:2px;}
.pt-multi-panel{max-height:262px;overflow-y:auto;padding:6px;border-top:1px solid #EDF2F0;}
.pt-multi-opt{display:flex!important;align-items:center;gap:10px;margin:0;padding:9px 10px;
  border-radius:8px;font-weight:500!important;font-size:14.5px;cursor:pointer;}
.pt-multi-opt:hover{background:#F3FAF8;}
.pt-multi-opt input{width:17px;height:17px;accent-color:#22A58E;flex:0 0 auto;margin:0;}
.pt-multi-opt span{color:#3A4A45;}
.pt-multi-text{font-weight:500;}
.pt-multi-text.is-set{color:#17806C;font-weight:700;}

/* result banner */
.pt-form-note{padding:14px 16px;border-radius:10px;font-size:14.5px;margin-bottom:20px;border:1px solid;}
.pt-form-note-ok{background:#ECFDF5;border-color:#A7F3D0;color:#0B6B53;}
.pt-form-note-bad{background:#FEF2F2;border-color:#FECACA;color:#9B1C1C;}

/* partner form section */
.pt-partner-form-sec{padding:84px 0;background:#F7FAF9;}
.pt-partner-form-wrap{max-width:660px;margin:0 auto;background:#fff;border:1px solid #EDF2F0;
  border-radius:20px;padding:40px;box-shadow:0 24px 60px rgba(16,24,40,.07);}
.pt-partner-form-wrap .pt-sec-hd{text-align:center;margin-bottom:28px;}
@media(max-width:600px){.pt-partner-form-wrap{padding:26px 20px;border-radius:16px;}}

/* The credibility strip reuses .pt-about-stats inside the homepage "Proven in
   Irish hospitality" band, so it needs tighter vertical padding than the
   standalone version on /about/. */
.pt-social-stats{padding:30px 0 10px!important;}
.pt-social-stats .pt-about-stat-label{max-width:150px;margin-left:auto;margin-right:auto;line-height:1.45;}
@media(max-width:768px){.pt-social-stats{padding:22px 0 4px!important;}}

/* Trust strips rendered by [pt_trusted_logos] / [pt_payment_logos]. */
.pt-trustbar{padding:56px 0 64px;background:#fff;}
.pt-trustbar .pt-logos{padding-top:0;border-top:0;}
.pt-trustbar .pt-logos-label{text-align:center;}
.pt-paybar{padding:56px 0;background:#F7FAF9;border-top:1px solid #EDF2F0;}
.pt-pay-block + .pt-pay-block{margin-top:40px;}
.pt-paybar .pt-logos-label{text-align:center;margin-bottom:24px;}
.pt-pay-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:14px;}
.pt-pay-cell{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid #E8EEEC;
  border-radius:100px;padding:10px 20px 10px 12px;box-shadow:0 2px 8px rgba(16,24,40,.04);
  transition:transform .2s ease,box-shadow .2s ease;}
.pt-pay-cell:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(16,24,40,.09);}
.pt-pay-cell img{width:34px;height:34px;object-fit:contain;display:block;flex:0 0 auto;}
.pt-pay-cell span{font-size:14.5px;font-weight:600;color:#3A4A45;white-space:nowrap;}
@media(max-width:768px){
  .pt-trustbar{padding:40px 0 46px;}
  .pt-paybar{padding:42px 0;}
  .pt-pay-cell{padding:8px 15px 8px 9px;gap:9px;}
  .pt-pay-cell img{width:28px;height:28px;}
  .pt-pay-cell span{font-size:13px;}
}

/* Asian Restaurant Awards sponsor section (About page). */
.pt-awards{padding:84px 0;background:#F7FAF9;}
.pt-awards .pt-posx-eyebrow{background:rgba(34,165,142,.12);border:1px solid rgba(34,165,142,.3);color:#17806C;}
.pt-awards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.pt-award-shot{margin:0;border-radius:14px;overflow:hidden;background:#E9EFED;aspect-ratio:3/2;
  box-shadow:0 12px 30px rgba(16,24,40,.10);}
.pt-award-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.16,1,.3,1);}
.pt-award-shot:hover img{transform:scale(1.05);}
.pt-awards-credit{text-align:center;font-size:13px;color:#8A9A95;margin:18px 0 0;}
.pt-awards-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:22px;}
.pt-awards-links a{display:inline-flex;align-items:center;padding:10px 18px;border-radius:100px;
  background:#fff;border:1px solid #E1EAE7;color:#17806C;font-size:14.5px;font-weight:600;
  text-decoration:none;transition:transform .2s ease,box-shadow .2s ease;}
.pt-awards-links a:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(16,24,40,.09);}
@media(max-width:900px){.pt-awards-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.pt-awards{padding:56px 0;}.pt-awards-grid{grid-template-columns:1fr;gap:14px;}}

/* COMPANY TIMELINE — markup from [pt_timeline], behaviour from footer.php.
   Without JS every stage stays visible and stacked; .pt-js turns it into tabs. */
.pt-tl{padding:88px 0;background:linear-gradient(180deg,#FFFFFF 0%,#F4FAF8 100%);}
.pt-tl-head{text-align:center;max-width:720px;margin:0 auto 38px;}
.pt-tl-head h2{font-size:clamp(28px,4vw,40px);font-weight:800;color:#0F5C4A;margin:14px 0 14px;letter-spacing:-.02em;line-height:1.14;}
.pt-tl-head p{color:#5A6B66;font-size:16.5px;line-height:1.75;margin:0;}
.pt-tl-badge{display:inline-block;margin-top:18px;padding:8px 18px;border-radius:100px;
  background:#EEFAF7;border:1px solid rgba(34,165,142,.32);color:#17806C;font-size:13.5px;font-weight:700;}

/* rail */
.pt-tl-rail{position:relative;display:flex;justify-content:space-between;gap:6px;
  max-width:840px;margin:0 auto 34px;padding-top:16px;}
.pt-tl-rail::before{content:'';position:absolute;left:6%;right:6%;top:23px;height:2px;
  background:linear-gradient(90deg,rgba(34,165,142,.18),rgba(34,165,142,.5),rgba(34,165,142,.18));}
.pt-tl-dot{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;
  background:none;border:0;padding:0 2px;cursor:pointer;font-family:inherit;}
.pt-tl-tick{width:15px;height:15px;border-radius:50%;background:#fff;border:2.5px solid #A9D9CD;
  transition:background .25s,border-color .25s,transform .25s,box-shadow .25s;}
.pt-tl-year{font-size:13.5px;font-weight:700;color:#7A8A85;transition:color .25s;white-space:nowrap;}
.pt-tl-dot:hover .pt-tl-tick{border-color:#22A58E;transform:scale(1.12);}
.pt-tl-dot:hover .pt-tl-year{color:#17806C;}
.pt-tl-dot.is-on .pt-tl-tick{background:#22A58E;border-color:#22A58E;transform:scale(1.25);
  box-shadow:0 0 0 6px rgba(34,165,142,.15);}
.pt-tl-dot.is-on .pt-tl-year{color:#0F5C4A;}
.pt-tl-dot:focus-visible{outline:2px solid #22A58E;outline-offset:4px;border-radius:8px;}

/* panels */
.pt-tl-panels{max-width:840px;margin:0 auto;}
.pt-tl-stage{background:#fff;border:1px solid #E4EDEA;border-radius:20px;padding:36px 38px;
  box-shadow:0 20px 50px rgba(16,24,40,.07);}
.pt-js .pt-tl-stage{display:none;}
.pt-js .pt-tl-stage.is-on{display:block;animation:ptTlIn .4s cubic-bezier(.16,1,.3,1) both;}
.pt-tl-stage + .pt-tl-stage{margin-top:18px;}
.pt-js .pt-tl-stage + .pt-tl-stage{margin-top:0;}
@keyframes ptTlIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pt-tl-stage-year{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:#22A58E;margin-bottom:10px;}
.pt-tl-stage h3{font-size:23px;font-weight:800;color:#0F5C4A;margin:0 0 12px;letter-spacing:-.01em;}
.pt-tl-stage p{font-size:16px;line-height:1.78;color:#4A5A55;margin:0;}
.pt-tl-stats{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px;}
.pt-tl-stat{flex:1 1 150px;background:#F4FAF8;border:1px solid #E1EFEA;border-radius:14px;padding:18px 20px;}
.pt-tl-num{font-size:34px;font-weight:800;color:#22A58E;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.pt-tl-lab{font-size:13px;color:#6B7B76;margin-top:5px;line-height:1.45;}
.pt-tl-note{margin:20px 0 0;font-size:13.5px;color:#8A9A95;font-style:italic;}
@media(max-width:700px){
  .pt-tl{padding:60px 0;}
  .pt-tl-rail{overflow-x:auto;justify-content:flex-start;gap:24px;padding-bottom:6px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .pt-tl-rail::-webkit-scrollbar{display:none;}
  .pt-tl-rail::before{display:none;}
  .pt-tl-dot{flex:0 0 auto;}
  .pt-tl-stage{padding:26px 22px;border-radius:16px;}
  .pt-tl-stat{flex:1 1 100%;}
}
@media(prefers-reduced-motion:reduce){
  .pt-js .pt-tl-stage.is-on{animation:none;}
  .pt-tl-tick,.pt-tl-year{transition:none;}
}

/* Press clippings: real screenshots of the articles, each one a link out. */
.pt-press{margin-top:44px;}
.pt-press-hd{text-align:center;font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#8A9A95;margin:0 0 20px;}
.pt-press-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.pt-press-card{display:block;background:#fff;border:1px solid #E4EDEA;border-radius:16px;overflow:hidden;
  text-decoration:none;box-shadow:0 12px 30px rgba(16,24,40,.07);
  transition:transform .22s ease,box-shadow .22s ease;}
.pt-press-card:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(16,24,40,.13);}
.pt-press-shot{display:block;aspect-ratio:4/3;overflow:hidden;background:#F2F6F5;border-bottom:1px solid #EDF2F0;}
.pt-press-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}
.pt-press-meta{display:block;padding:18px 20px 20px;}
.pt-press-meta strong{display:block;font-size:12.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#22A58E;margin-bottom:7px;}
.pt-press-meta span{display:block;font-size:16px;font-weight:700;color:#0F5C4A;line-height:1.4;}
.pt-press-meta em{display:block;font-style:normal;font-size:13.5px;color:#7A8A85;margin-top:8px;}
@media(max-width:700px){.pt-press-grid{grid-template-columns:1fr;}}

/* Community thank-you */
.pt-thanks{padding:72px 0;background:#0F5C4A;}
.pt-thanks-card{max-width:780px;margin:0 auto;text-align:center;}
.pt-thanks-card h2{font-size:clamp(26px,3.4vw,36px);font-weight:800;color:#fff;margin:0 0 18px;letter-spacing:-.02em;}
.pt-thanks-card p{font-size:17px;line-height:1.8;color:rgba(255,255,255,.82);margin:0 0 14px;}
.pt-thanks-sign{font-weight:700;color:#7FE9D0!important;}
@media(max-width:700px){.pt-thanks{padding:52px 0;}.pt-thanks-card p{font-size:15.5px;}}

/* Real team photo on the About page */
.pt-team-photo{margin:0 auto 38px;max-width:900px;}
.pt-team-photo img{width:100%;height:auto;display:block;border-radius:18px;
  box-shadow:0 24px 56px rgba(16,24,40,.16);}
.pt-team-photo figcaption{text-align:center;font-size:13.5px;color:#7A8A85;margin-top:14px;line-height:1.6;}

/* Timeline motion: the rail fills up to the active stage as it walks left to
   right, and the live tick breathes. Both stop under reduced-motion. */
.pt-tl-rail::after{content:'';position:absolute;left:6%;top:23px;height:2px;
  width:var(--tl-p,0%);border-radius:2px;
  background:linear-gradient(90deg,#22A58E,#31C9AC);
  transition:width .7s cubic-bezier(.16,1,.3,1);}
.pt-tl-dot{z-index:1;}
.pt-tl-dot.is-on .pt-tl-tick{animation:ptTickPulse 2.6s ease-in-out infinite;}
@keyframes ptTickPulse{
  0%,100%{box-shadow:0 0 0 6px rgba(34,165,142,.16);}
  50%{box-shadow:0 0 0 11px rgba(34,165,142,.07);}
}
@media(max-width:700px){.pt-tl-rail::after{display:none;}}
@media(prefers-reduced-motion:reduce){
  .pt-tl-rail::after{transition:none;}
  .pt-tl-dot.is-on .pt-tl-tick{animation:none;}
}

/* Careers page apply band */
.pt-careers-apply{padding:80px 0;background:#0F5C4A;}
.pt-careers-card{max-width:720px;margin:0 auto;text-align:center;}
.pt-careers-card h2{font-size:clamp(26px,3.4vw,36px);font-weight:800;color:#fff;margin:0 0 16px;letter-spacing:-.02em;}
.pt-careers-card p{font-size:16.5px;line-height:1.75;color:rgba(255,255,255,.82);margin:0 0 26px;}
.pt-careers-card .pt-btn{background:#fff!important;color:#0F5C4A!important;}
.pt-careers-note{font-size:14px!important;color:rgba(255,255,255,.62)!important;margin:22px 0 0!important;}
.pt-careers-note a{color:#7FE9D0;text-decoration:underline;}
@media(max-width:700px){.pt-careers-apply{padding:56px 0;}}

/* MOBILE AUDIT FIXES
   1. Pricing add-ons: the global phone rule turns repeat(3,1fr) into two
      columns, which is too tight for these text-heavy cards - they ran to
      428px inside a 375px screen and were clipped on the right.
   2. "Learn more" links were 22px tall; the pseudo-element enlarges the
      tap area to ~44px without moving anything visually.
   3. Contact/careers/partners buttons get a comfortable minimum height. */
@media(max-width:768px){
  .pt-addons-grid{grid-template-columns:1fr!important;}
}
.pt-prod-link{position:relative;}
.pt-prod-link::after{content:'';position:absolute;left:-8px;right:-8px;top:-11px;bottom:-11px;}
@media(max-width:768px){
  .pt-btn{min-height:46px;}
}

/* When the timeline follows the page hero directly (About), the two sections' paddings
   stacked into a large empty band; pull the timeline up. */
.pt-page-hero + .pt-tl{padding-top:36px;}
@media(max-width:700px){.pt-page-hero + .pt-tl{padding-top:20px;}}

/* Footer: "Become a Partner" beside "Book a Demo" on every page. */
.pt-footer-cta-btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.pt-footer-partner{background:transparent!important;color:#fff!important;border:1.5px solid rgba(255,255,255,.55)!important;box-shadow:none!important;}
.pt-footer-partner:hover{background:rgba(255,255,255,.1)!important;border-color:#fff!important;}
@media(max-width:700px){.pt-footer-cta-btns{width:100%;}.pt-footer-cta-btns .pt-btn{flex:1 1 100%;justify-content:center;}}

/* Price callout ([pt_price_callout]) */
.pt-callout{padding:28px 0 36px;}
.pt-callout-card{max-width:1000px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:28px;
  background:linear-gradient(135deg,#0F5C4A 0%,#157A63 100%);border-radius:20px;padding:30px 36px;
  box-shadow:0 20px 48px rgba(15,92,74,.22);}
.pt-callout-text h3{font-size:24px;font-weight:800;color:#fff;margin:0 0 8px;letter-spacing:-.01em;}
.pt-callout-text p{font-size:15.5px;line-height:1.65;color:rgba(255,255,255,.84);margin:0;max-width:560px;}
.pt-callout-actions{display:flex;flex-direction:column;align-items:center;gap:10px;flex:0 0 auto;}
.pt-callout-call{background:#fff!important;color:#0F5C4A!important;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;}
.pt-callout-link{color:#9FEBD8;font-size:14.5px;font-weight:600;text-decoration:none;}
.pt-callout-link:hover{color:#fff;text-decoration:underline;}
@media(max-width:768px){
  .pt-callout-card{flex-direction:column;align-items:flex-start;padding:26px 22px;border-radius:16px;}
  .pt-callout-actions{align-items:stretch;width:100%;}
  .pt-callout-call{justify-content:center;}
  .pt-callout-link{text-align:center;}
}

.pt-footer-tel{color:#7FE9D0;font-weight:700;text-decoration:none;white-space:nowrap;}
.pt-footer-tel:hover{color:#fff;text-decoration:underline;}

/* White buttons on dark bands. The theme forces white text on every primary
   button via ".pt-page a.pt-btn-primary{color:#fff!important}" (0,2,1), which
   beat the lighter selectors and left these as blank white pills. */
.pt-callout .pt-callout-card a.pt-btn.pt-callout-call,
.pt-careers-apply .pt-careers-card a.pt-btn.pt-btn-primary{color:#0F5C4A!important;-webkit-text-fill-color:#0F5C4A!important;background:#fff!important;}
.pt-callout .pt-callout-card a.pt-btn.pt-callout-call svg{color:#0F5C4A;}
.pt-callout .pt-callout-card a.pt-btn.pt-callout-call:hover,
.pt-careers-apply .pt-careers-card a.pt-btn.pt-btn-primary:hover{background:#EEFAF7!important;color:#0F5C4A!important;-webkit-text-fill-color:#0F5C4A!important;}

.pt-callout .pt-callout-card a.pt-callout-link{color:#9FEBD8!important;-webkit-text-fill-color:#9FEBD8!important;}
.pt-callout .pt-callout-card a.pt-callout-link:hover{color:#fff!important;-webkit-text-fill-color:#fff!important;}

/* Caller ID block on /integrations/ */
.pt-callerid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;max-width:1040px;margin:0 auto;}
.pt-callerid-text p{font-size:16.5px;line-height:1.75;color:#4A5A55;margin:0 0 8px;}
.pt-callerid-img img{width:100%;height:auto;display:block;border-radius:16px;box-shadow:0 18px 44px rgba(16,24,40,.10);}
@media(max-width:768px){.pt-callerid{grid-template-columns:1fr;gap:24px;}}

/* Compatible devices grid: four cards */
.pt-dev-grid{grid-template-columns:repeat(2,1fr);}
@media(max-width:700px){.pt-dev-grid{grid-template-columns:1fr;}}

/* AUDIT FIXES (26 Sep 2026)
   Homepage H1: an unconditional ".pt-hero h1{font-size:58px}" sits after the
   theme's phone breakpoint and overrode it, so at 320px the last word ran off
   screen. Scale it with the viewport instead of hiding the overflow. */
.pt-hero h1{font-size:clamp(30px,8.2vw,58px);}
.pt-page-hero h1{overflow-wrap:break-word;}
@media(max-width:360px){.pt-page-hero h1{font-size:clamp(26px,8vw,34px);}}
.pt-faq-q:focus-visible{outline:2px solid #22A58E;outline-offset:4px;border-radius:8px;}
.pt-vat-note{text-align:center;font-size:13px;color:#7A8A85;margin:0 0 12px;}
.pt-form-consent{font-size:12.5px;color:#7A8A85;margin:12px 0 0;line-height:1.55;}
.pt-form-consent a{color:#17806C;text-decoration:underline;}

/* HERO STAT CARD: below 1024px the overflow guard on .pt-hero grid children
   (.pt-hero .pt-container>*{overflow:hidden}) clipped the bottom 30px of the
   stat card, hiding most of its label. The hardware render is width:100%, so
   the device box cannot cause sideways scroll; let the card hang below it as
   it does on desktop. .pt-hero itself still clips at the section edge. */
.pt-hero .pt-container>.pt-device:has(.pt-hero-hardware){overflow:visible;}

/* GOOGLE RATING: the homepage quote block carries the Google Business Profile
   rating (5.0 from 55 reviews, checked 26 Sep 2026) and one short excerpt from
   a review, linking to the full reviews on Google Maps. Update the count in
   post 5 when it changes. */
.pt-testi a.pt-grating,.pt-trustbar a.pt-grating{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:9px 18px 9px 12px;margin-bottom:24px;
  background:#fff;border:1px solid rgba(16,24,40,.1);border-radius:100px;box-shadow:0 6px 18px rgba(16,24,40,.06);
  color:#303133;text-decoration:none;font-size:14px;font-weight:600;line-height:1.2;transition:box-shadow .2s ease,transform .2s ease;}
.pt-testi a.pt-grating:hover,.pt-trustbar a.pt-grating:hover{box-shadow:0 10px 26px rgba(16,24,40,.1);transform:translateY(-1px);}
.pt-grating svg{flex-shrink:0;}
.pt-grating-score{font-size:17px;font-weight:800;color:#303133;}
.pt-grating-stars{display:inline-flex;gap:2px;color:#FBBC04;}
.pt-grating-count{color:#64748B;font-weight:500;}
.pt-testi a.pt-testi-more{display:inline-flex;align-items:center;gap:6px;margin-top:24px;font-size:15px;font-weight:600;color:#22A58E;text-decoration:none;}
.pt-testi a.pt-testi-more:hover{text-decoration:underline;}
@media(prefers-reduced-motion:reduce){.pt-testi a.pt-grating,.pt-trustbar a.pt-grating{transition:none;}.pt-testi a.pt-grating:hover,.pt-trustbar a.pt-grating:hover{transform:none;}}
.pt-trust-google{display:flex;justify-content:center;margin-top:30px;}
.pt-trustbar a.pt-grating{margin-bottom:0;}
/* Google chip on narrow phones: compact sizes keep it on one line down to 320px. */
@media(max-width:400px){
  .pt-testi a.pt-grating,.pt-trustbar a.pt-grating{gap:6px;padding:8px 14px 8px 10px;font-size:13px;}
  .pt-grating>svg:first-child{width:18px;height:18px;}
  .pt-grating-score{font-size:15px;}
  .pt-grating-stars{gap:1px;}
  .pt-grating-stars svg{width:13px;height:13px;}
}