/*
Theme Name: Check People Online Landing
Theme URI: https://example.com/
Author: Custom Theme
Description: Responsive editable landing page with WordPress Customizer controls.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: cpo-landing
*/
:root{--navy:#092b59;--blue:#1682d5;--green:#20c65a;--yellow:#ffc51b;--ink:#101f3e}*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#f7faff}.hero{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);overflow:hidden;position:relative;isolation:isolate;background:#f3faff}.hero:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.94) 40%,rgba(255,255,255,.55) 56%,rgba(255,255,255,.04) 75%,transparent 100%),var(--hero-image) var(--hero-position, right center)/cover no-repeat}.content{position:relative;z-index:2;padding:clamp(28px,5vw,68px) clamp(24px,4.7vw,70px) 46px;display:flex;flex-direction:column;align-items:flex-start}.brand{display:flex;align-items:center;gap:16px;margin-bottom:clamp(24px,3vw,42px);color:var(--navy);font-size:clamp(14px,1.8vw,24px);font-weight:800;letter-spacing:.13em;line-height:1.2}.brand-mark{width:64px;height:70px;flex:0 0 auto;display:grid;place-items:center;color:white;background:var(--blue);clip-path:polygon(50% 0,94% 17%,91% 61%,75% 83%,50% 100%,25% 83%,9% 61%,6% 17%)}.brand-mark svg{width:33px;height:33px}.brand-logo{max-height:75px;max-width:160px;width:auto}h1{margin:0;max-width:760px;font-size:clamp(38px,4.3vw,66px);line-height:1.02;letter-spacing:-.045em;font-weight:800;color:#081a3c}.intro{max-width:620px;margin:26px 0 30px;font-size:clamp(18px,2.15vw,29px);line-height:1.4;color:#444b58}.benefits{display:grid;gap:15px;margin:4px 0 32px;padding:0;list-style:none;font-size:clamp(17px,1.85vw,25px);font-weight:700;color:var(--navy)}.benefits li{display:flex;align-items:center;gap:16px}.check{width:36px;height:36px;flex:0 0 36px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:white;font-size:24px;font-weight:900;box-shadow:0 2px 5px #20c65a30}.trust-panel{width:calc(100% + clamp(24px,4.7vw,70px));margin-top:auto;margin-left:calc(-1 * clamp(24px,4.7vw,70px));padding:28px 30px 26px clamp(24px,4.7vw,70px);background:linear-gradient(120deg,#073d78,#062653);color:white;border-radius:0 95px 0 0}.trust-copy{display:flex;align-items:center;gap:18px;margin-bottom:24px}.trust-icon{flex:0 0 60px;width:60px;height:60px}.trust-copy p{margin:0;font-size:clamp(18px,2vw,27px);line-height:1.25;font-weight:700}.trust-copy strong{color:var(--green)}.cta{display:inline-flex;justify-content:center;align-items:center;gap:18px;min-height:68px;padding:18px 34px;border-radius:999px;background:var(--yellow);color:#061a3b;text-decoration:none;font-size:clamp(20px,2.25vw,31px);font-weight:800;box-shadow:0 5px 0 #dca50035;transition:transform .18s ease,filter .18s ease}.cta:hover{transform:translateY(-2px);filter:brightness(1.03)}.cta:focus-visible{outline:3px solid #061a3b;outline-offset:4px}.cta span{font-size:1.2em}.visual{min-height:780px;position:relative;background:transparent}.visual:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.06),transparent 25%,rgba(5,20,42,.04));pointer-events:none}.score-card{position:absolute;z-index:10;left:-7%;top:43%;width:min(310px,67%);padding:20px 24px 22px;border-radius:20px;background:rgba(255,255,255,.96);box-shadow:0 16px 40px #142c4b28;transform:rotate(-5deg)}.score-title{margin:0 0 8px;font-size:18px;font-weight:800;color:var(--navy)}.gauge{display:block;width:100%;max-height:145px}.score-number{margin-top:-10px;text-align:center;font-size:42px;font-weight:800;color:var(--navy)}.score-status{text-align:center;color:#19a65a;font-weight:800;font-size:18px}.tagline{position:absolute;z-index:1;right:7%;bottom:22%;color:white;font-size:clamp(21px,2.2vw,30px);line-height:1.12;font-style:italic;font-weight:700;text-align:right;text-shadow:0 2px 8px #0007;transform:rotate(-5deg)}.tagline:after{content:"";display:block;width:145px;height:5px;margin:10px 0 0 auto;background:var(--yellow);border-radius:10px;transform:rotate(-3deg)}.features{position:absolute;z-index:1;bottom:7%;left:10%;right:8%;display:flex;justify-content:space-around;color:white;text-shadow:0 2px 5px #0008}.feature{flex:1;text-align:center;padding:0 8px}.feature+.feature{border-left:1px solid #ffffffa6}.feature svg{display:block;width:38px;height:38px;margin:0 auto 8px}.feature span{font-size:17px;font-weight:700}.disclaimer{padding:18px 24px;text-align:center;color:#667085;font-size:12px;line-height:1.5}@media(min-width:1500px){.hero{max-width:1800px;margin:0 auto}}@media(max-width:900px){.hero{grid-template-columns:1fr}.hero:before{background:linear-gradient(180deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.93) 40%,rgba(255,255,255,.20) 68%,rgba(255,255,255,.02) 100%),var(--hero-image) var(--hero-mobile-position,72% center)/cover no-repeat}.content{padding-bottom:0}.brand{margin-bottom:26px}h1{max-width:720px}.trust-panel{width:calc(100% + 2 * clamp(24px,4.7vw,70px));margin-right:calc(-1 * clamp(24px,4.7vw,70px))}.visual{min-height:680px}.score-card{left:5%;top:25%;width:270px}.tagline{bottom:20%}}@media(max-width:520px){.content{padding:26px 22px 0}.brand{gap:11px;font-size:12px;letter-spacing:.1em;margin-bottom:25px}.brand-mark{width:48px;height:54px}.brand-mark svg{width:26px;height:26px}.brand-logo{max-height:54px;max-width:110px}h1{font-size:clamp(35px,10vw,48px)}.intro{margin:18px 0 22px;font-size:18px}.benefits{gap:12px;margin-bottom:26px;font-size:17px}.check{width:30px;height:30px;flex-basis:30px;font-size:20px}.trust-panel{width:calc(100% + 44px);margin-left:-22px;margin-right:-22px;padding:23px 22px 25px;border-radius:0 55px 0 0}.trust-copy{gap:12px;margin-bottom:20px}.trust-icon{width:48px;height:48px;flex-basis:48px}.trust-copy p{font-size:19px}.cta{width:100%;min-height:60px;padding:16px 18px;font-size:21px;gap:10px}.visual{min-height:520px}.hero:before{background:linear-gradient(180deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.92) 42%,rgba(255,255,255,.18) 70%,rgba(255,255,255,.02) 100%),var(--hero-image) var(--hero-mobile-position,72% center)/cover no-repeat}.score-card{width:220px;top:20%;left:4%;padding:14px 16px;border-radius:14px}.score-number{font-size:34px}.score-title{font-size:15px}.tagline{right:5%;bottom:20%;font-size:21px}.features{left:4%;right:4%;bottom:6%}.feature svg{width:30px;height:30px}.feature span{font-size:14px}}
