/* ============================================================
WMS Endpoint - Site V2 stylesheet
One shared stylesheet for the whole public site.
Light paper theme, Barlow Condensed + Inter, navy and red brand.
Edit this one file to restyle the entire site.
============================================================ */
:root{
--paper:#E7EDF5; --paper2:#F2F6FB; --white:#FFFFFF;
--navy:#1B2438; --ink:#11161F; --slate:#46566B; --muted:#7C8AA0;
--red:#CC2200; --red2:#E8431F; --red-dark:#A81600;
--blue:#2E86C1; --green:#45A045; --orange:#F5A623; --purple:#7E57C2; --teal:#1FA8A0;
--line:#D6DFEC;
--shell:#FFFFFF; --dark:#F2F6FB;
--display:'Barlow Condensed',sans-serif; --body:'Inter',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--paper);color:var(--navy);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
.wrap{max-width:1140px;margin:0 auto;padding:0 26px}
.redbar{height:7px;background:var(--red)}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.04;letter-spacing:-.01em}
/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.01em;padding:15px 30px;border-radius:10px;cursor:pointer;border:none;transition:transform .15s,box-shadow .15s,background .15s,filter .15s}
.btn-red{background:var(--red);color:#fff;box-shadow:0 14px 30px -12px rgba(204,34,0,.6)}
.btn-red:hover{background:var(--red2);transform:translateY(-2px)}
.btn-navy{background:var(--navy);color:#fff}.btn-navy:hover{background:#0f1622;transform:translateY(-2px)}
.btn-green{background:var(--green);color:#fff;box-shadow:0 14px 30px -12px rgba(69,160,69,.6)}.btn-green:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn-ghost{background:var(--white);color:var(--navy);border:1.5px solid var(--line)}.btn-ghost:hover{border-color:var(--navy);transform:translateY(-2px)}
.btn-sm{font-size:15px;padding:10px 20px}
.btn-block{width:100%;justify-content:center}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none!important}
/* ---- Header / nav ---- */
.hdr{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60}
.hdr-in{display:flex;align-items:center;justify-content:space-between;height:66px;gap:16px}
.brand{display:flex;align-items:center;gap:11px}
.brand img{height:38px;width:auto;background:#fff;border-radius:6px;padding:3px 7px}
.brand-txt{font-family:var(--display);font-weight:700;font-size:20px;color:var(--navy);letter-spacing:.02em;line-height:1}
.brand-txt small{display:block;font-family:var(--body);font-size:8px;letter-spacing:.2em;color:var(--muted);font-weight:600;margin-top:2px}
.nav-links{list-style:none;display:flex;align-items:center;gap:1px;flex-wrap:nowrap}
.nav-links a{font-size:13.5px;font-weight:500;color:var(--slate);padding:8px 9px;border-radius:8px;white-space:nowrap;transition:background .15s,color .15s}
.nav-links a:hover{background:rgba(27,36,56,.06);color:var(--navy)}
.nav-links a.nav-cta{background:var(--red);color:#fff;font-weight:600;padding:9px 16px;margin-left:6px;white-space:nowrap}
.nav-links a.nav-cta:hover{background:var(--red2)}
.nav-burger{display:none;background:none;border:none;cursor:pointer;padding:8px}
.nav-burger span{display:block;width:23px;height:2px;background:var(--navy);border-radius:2px;margin:5px 0;transition:.25s}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-ovl{display:none;position:fixed;inset:0;background:rgba(17,22,31,.5);z-index:70;opacity:0;transition:opacity .25s}
.nav-ovl.open{display:block;opacity:1}
.nav-panel{position:fixed;top:0;right:-320px;width:300px;max-width:84vw;height:100%;background:var(--white);z-index:71;transition:right .3s;overflow-y:auto;box-shadow:-20px 0 50px -20px rgba(17,22,31,.4)}
.nav-panel.open{right:0}
.nav-panel-top{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}
.nav-panel-close{background:none;border:none;font-size:22px;cursor:pointer;color:var(--slate)}
.nav-panel a{display:block;padding:13px 22px;font-size:15px;font-weight:500;color:var(--navy);border-bottom:1px solid var(--paper2)}
.nav-panel a:hover{background:var(--paper2)}
.nav-panel .nav-panel-cta{margin:16px 22px;background:var(--red);color:#fff;text-align:center;border-radius:9px;font-weight:600;border:none}
/* ---- Page hero (inner pages) ---- */
.phero{background:radial-gradient(120% 100% at 80% 0%,#F4F8FD 0%,var(--paper) 55%);padding:62px 0 54px;text-align:center}
.phero .kicker{color:var(--red)}
.phero h1{font-size:clamp(40px,6vw,72px);color:var(--navy);margin:10px 0 0}
.phero p{font-size:18px;color:var(--slate);max-width:640px;margin:16px auto 0}
.phero .divider{margin-left:auto;margin-right:auto}
/* ---- Home hero ---- */
.hero{background:radial-gradient(120% 100% at 80% 0%,#F4F8FD 0%,var(--paper) 55%);padding:60px 0 66px;position:relative;overflow:hidden}
.hero-in{display:grid;grid-template-columns:1.08fr .92fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(46px,6.4vw,88px);color:var(--navy);margin:16px 0 0}
.hero h1 .accent{color:var(--red)}
.hero-lead{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.4vw,28px);color:var(--red);margin:8px 0 0}
.hero-sub{font-size:18px;color:var(--slate);max-width:500px;margin:16px 0 26px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-stats{display:flex;gap:28px;flex-wrap:wrap;margin-top:30px}
.hero-stats .stat .stat-num{font-family:var(--display);font-weight:800;font-size:40px;color:var(--navy);line-height:1}
.hero-stats .stat .stat-num span{font-size:20px;color:var(--red)}
.hero-stats .stat .stat-label{font-size:13px;color:var(--slate);margin-top:2px}
.hero-visual{position:relative;display:flex;justify-content:center;align-items:center}
/* Device demo card (home hero) */
.device-card{position:relative;background:var(--navy);color:#fff;border-radius:22px;padding:26px;width:300px;box-shadow:0 40px 70px -24px rgba(27,36,56,.55);border:1px solid rgba(255,255,255,.06)}
.device-card .device-logo{text-align:center;margin-bottom:14px}
.device-card .device-logo img{height:46px;margin:0 auto;background:#fff;border-radius:8px;padding:6px 10px}
.status-badge{display:flex;align-items:center;gap:8px;background:rgba(69,160,69,.14);border:1px solid rgba(69,160,69,.4);border-radius:999px;padding:7px 13px;font-size:11px;font-weight:600;letter-spacing:.04em;color:#9be29b;justify-content:center;margin-bottom:16px}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(69,160,69,.6);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(69,160,69,.5)}70%{box-shadow:0 0 0 8px rgba(69,160,69,0)}100%{box-shadow:0 0 0 0 rgba(69,160,69,0)}}
.info-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:13px}
.info-label{color:#9aa7bb}.info-value{font-weight:600;color:#fff}.info-value.active{color:#7fd17f}
/* ---- Urgency strip ---- */
.urgency{background:var(--red);color:#fff;text-align:center;font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:.01em;padding:14px}
.urgency b{font-weight:800}
/* ---- Sections ---- */
.sec{padding:74px 0}
.sec.tight{padding:54px 0}
.sec-head{text-align:center;max-width:730px;margin:0 auto}
.kicker{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.sec-head h2{font-size:clamp(32px,4.4vw,50px);color:var(--navy);margin:8px 0 0}
.divider{width:64px;height:4px;background:var(--red);border-radius:2px;margin:16px auto 0}
.sec-head p{font-size:17px;color:var(--slate);margin-top:16px}
.alt{background:var(--paper2)}
/* ---- Generic card grid ---- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:46px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;gap:16px;align-items:flex-start;box-shadow:0 18px 40px -28px rgba(27,36,56,.5);transition:transform .15s,box-shadow .15s}
.card.col{flex-direction:column}
.card:hover{transform:translateY(-4px);box-shadow:0 26px 50px -26px rgba(27,36,56,.5)}
.badge{flex:none;width:50px;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:15px;color:#fff;letter-spacing:.02em}
.card h3{font-size:21px;color:var(--navy)}
.card p{font-size:14.5px;color:var(--slate);margin-top:4px;line-height:1.5}
/* ---- Steps ---- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:46px}
.step{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:24px;position:relative;box-shadow:0 18px 40px -28px rgba(27,36,56,.5)}
.step .step-num{font-family:var(--display);font-weight:800;font-size:42px;color:var(--paper);-webkit-text-stroke:1.5px var(--line);position:absolute;top:14px;right:18px;line-height:1}
.step .step-ic{width:48px;height:48px;border-radius:12px;background:var(--paper2);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:14px}
.step h3{font-size:20px;color:var(--navy)}
.step p{font-size:14px;color:var(--slate);margin-top:6px}
/* ---- Why band (navy) ---- */
.band{background:var(--navy);color:#fff}
.band .sec-head h2{color:#fff}
.band .kicker{color:var(--orange)}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:46px}
.why-item{text-align:center;padding:10px}
.why-item .big{font-family:var(--display);font-weight:800;font-size:54px;color:var(--orange);line-height:1}
.why-item h3{font-size:24px;margin:8px 0 6px}
.why-item p{color:#AEBBCE;font-size:15px}
/* ---- Preview split ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-top:40px}
.split h3{font-size:30px;color:var(--navy)}
.split p{color:var(--slate);font-size:16px;margin:12px 0 18px}
.tick{list-style:none;display:grid;gap:11px}
.tick li{display:flex;gap:11px;align-items:flex-start;color:var(--slate);font-size:15.5px}
.tick li::before{content:"";flex:none;width:22px;height:22px;border-radius:6px;background:var(--green);margin-top:2px;
-webkit-mask:url("data:image/svg+xml;utf8,") center/15px no-repeat;
mask:url("data:image/svg+xml;utf8,") center/15px no-repeat}
.frame{background:var(--white);border:1px solid var(--line);border-radius:24px;padding:14px;box-shadow:0 30px 60px -28px rgba(27,36,56,.5);display:inline-block}
.frame img{border-radius:14px;max-width:330px}
.split-pic{display:flex;justify-content:center}
/* ---- Forms ---- */
.form-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px;box-shadow:0 40px 70px -30px rgba(27,36,56,.5)}
.form-card h3{font-size:26px;color:var(--navy)}
.form-card .fsub{color:var(--slate);font-size:14px;margin:4px 0 18px}
.field{margin-bottom:13px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--slate);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:9px;font-size:15px;font-family:var(--body);color:var(--navy);background:#F7F9FC;transition:border .15s}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);background:#fff}
.consent{display:flex;gap:9px;align-items:flex-start;margin:6px 0 16px;color:var(--muted);font-size:12.5px;cursor:pointer}
.consent input{margin-top:2px;flex:none}
.fineprint{font-size:11.5px;color:var(--muted);text-align:center;margin-top:12px}
/* ---- Alerts ---- */
.alert{border-radius:10px;padding:13px 16px;font-size:14px;margin-bottom:14px}
.alert-err{background:rgba(204,34,0,.08);border:1px solid rgba(204,34,0,.3);color:var(--red-dark)}
.alert-ok{background:rgba(69,160,69,.1);border:1px solid rgba(69,160,69,.35);color:#2f7a2f}
.alert-warn{background:rgba(245,166,35,.12);border:1px solid rgba(245,166,35,.4);color:#B5760B}
.alert-info{background:rgba(46,134,193,.08);border:1px solid rgba(46,134,193,.3);color:#1f6699}
/* ---- Tables ---- */
.tbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 18px 40px -30px rgba(27,36,56,.5)}
.tbl th{background:var(--navy);color:#fff;font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.03em;text-align:left;padding:13px 16px}
.tbl td{padding:12px 16px;border-top:1px solid var(--line);font-size:14px;color:var(--slate)}
.tbl tr:nth-child(even) td{background:var(--paper2)}
/* ---- FAQ accordion ---- */
.faq-list{max-width:820px;margin:40px auto 0;display:grid;gap:12px}
.faq-cat{font-family:var(--display);font-weight:700;font-size:22px;color:var(--navy);margin:26px 0 4px}
.qa{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 14px 34px -28px rgba(27,36,56,.5)}
.qa summary{list-style:none;cursor:pointer;padding:17px 20px;font-weight:600;font-size:16px;color:var(--navy);display:flex;justify-content:space-between;align-items:center;gap:14px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-family:var(--display);font-size:24px;color:var(--red);font-weight:700;flex:none;transition:transform .2s}
.qa[open] summary::after{transform:rotate(45deg)}
.qa .qa-body{padding:0 20px 18px;color:var(--slate);font-size:14.5px;line-height:1.6}
/* ---- Pricing (cards + tabs + plans, JS targets these names) ---- */
.product-selector,#product-selector{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:34px 0 6px}
.prod-btn{font-family:var(--display);font-weight:600;font-size:16px;background:#fff;border:1.5px solid var(--line);color:var(--slate);padding:10px 20px;border-radius:999px;cursor:pointer;transition:.15s}
.prod-btn:hover{border-color:var(--navy);color:var(--navy)}
.prod-btn.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.trial-banner{max-width:760px;margin:30px auto 0;background:linear-gradient(135deg,#1B2438,#2E86C1);color:#fff;border-radius:16px;padding:24px 28px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.trial-banner h3{font-size:24px}
.trial-banner p{color:#cfe0f1;font-size:14px;margin-top:4px}
.plan-divider{text-align:center;color:var(--muted);font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin:40px 0 0;font-weight:600}
.pricing-grid,#pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px;margin-top:30px}
.pricing-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 22px;text-align:center;position:relative;box-shadow:0 18px 40px -28px rgba(27,36,56,.5);transition:transform .15s,box-shadow .15s}
.pricing-card:hover{transform:translateY(-4px);box-shadow:0 26px 50px -26px rgba(27,36,56,.5)}
.pricing-card.featured{border:2px solid var(--red);box-shadow:0 26px 54px -24px rgba(204,34,0,.4)}
.pricing-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--red);color:#fff;font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.08em;padding:5px 14px;border-radius:999px;white-space:nowrap}
.plan-name{font-family:var(--display);font-weight:700;font-size:24px;color:var(--navy)}
.plan-period{font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.price-wrap{margin:16px 0;display:flex;align-items:flex-start;justify-content:center;gap:2px}
.price-currency{font-family:var(--display);font-weight:700;font-size:20px;color:var(--navy);margin-top:6px}
.price-amount{font-family:var(--display);font-weight:800;font-size:46px;color:var(--navy);line-height:1}
.plan-features{list-style:none;display:grid;gap:8px;margin:16px 0;text-align:left}
.plan-features li{font-size:13.5px;color:var(--slate);display:flex;gap:8px;align-items:flex-start}
.plan-features li::before{content:"\2713";color:var(--green);font-weight:700;flex:none}
.btn-plan{display:block;text-align:center;background:var(--red);color:#fff;font-family:var(--display);font-weight:700;font-size:16px;padding:12px;border-radius:9px;margin-top:6px;transition:.15s}
.btn-plan:hover{background:var(--red2)}
.pricing-card.featured .btn-plan{background:var(--red)}
/* products page tabs/panels */
.product-tabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:34px 0 0}
.product-tab{font-family:var(--display);font-weight:600;font-size:17px;background:#fff;border:1.5px solid var(--line);color:var(--slate);padding:11px 24px;border-radius:999px;cursor:pointer;transition:.15s}
.product-tab:hover{border-color:var(--navy);color:var(--navy)}
.product-tab.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.product-panel{display:none;margin-top:40px}
.product-panel.active{display:block}
.plan{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;text-align:center;box-shadow:0 16px 38px -28px rgba(27,36,56,.5)}
.pricing-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:8px}
/* ---- Video grid ---- */
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px}
.video-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 18px 40px -28px rgba(27,36,56,.5);transition:transform .15s}
.video-card:hover{transform:translateY(-4px)}
.video-thumb{aspect-ratio:16/9;background:var(--navy);display:flex;align-items:center;justify-content:center;position:relative}
.video-thumb .play{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;color:var(--red);font-size:22px;padding-left:4px}
.video-card .vbody{padding:18px 20px}
.video-card h3{font-size:18px;color:var(--navy)}
.video-card p{font-size:13.5px;color:var(--slate);margin-top:5px}
/* ---- Chat ---- */
.chat-shell{max-width:760px;margin:34px auto 0;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 60px -34px rgba(27,36,56,.55);overflow:hidden;display:flex;flex-direction:column;height:560px}
.chat-top{background:var(--navy);color:#fff;padding:16px 20px;display:flex;align-items:center;gap:11px}
.chat-top .status-dot{position:static}
.chat-body{flex:1;overflow-y:auto;padding:20px;background:var(--paper2);display:flex;flex-direction:column;gap:12px}
.msg{max-width:78%;padding:12px 15px;border-radius:14px;font-size:14.5px;line-height:1.5}
.msg.bot{background:#fff;border:1px solid var(--line);color:var(--navy);align-self:flex-start;border-bottom-left-radius:4px}
.msg.user{background:var(--blue);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.chat-input{display:flex;gap:10px;padding:14px;border-top:1px solid var(--line);background:#fff}
.chat-input input{flex:1;padding:13px 15px;border:1.5px solid var(--line);border-radius:10px;font-size:15px;font-family:var(--body);background:#F7F9FC}
.chat-input input:focus{outline:none;border-color:var(--blue);background:#fff}
/* ---- Centered card pages (success / activate / retrieve) ---- */
.center-wrap{max-width:560px;margin:0 auto;padding:60px 0}
.panel{background:#fff;border:1px solid var(--line);border-radius:20px;padding:34px;box-shadow:0 40px 70px -30px rgba(27,36,56,.5)}
.icon-circle{width:74px;height:74px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:38px;margin:0 auto 18px}
.icon-circle.ok{background:rgba(69,160,69,.12);color:var(--green)}
.icon-circle.info{background:rgba(46,134,193,.12);color:var(--blue)}
.icon-circle.warn{background:rgba(245,166,35,.14);color:var(--orange)}
.keybox{font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--navy);color:#7fd17f;font-size:18px;letter-spacing:.06em;padding:16px;border-radius:10px;text-align:center;word-break:break-all;margin:14px 0}
/* ---- Upsell ---- */
.upsell-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.up-card{background:var(--white);border:1px solid var(--line);border-top:4px solid var(--blue);border-radius:14px;padding:22px 28px;min-width:200px;transition:transform .15s}
.up-card:hover{transform:translateY(-4px)}
.up-card.green{border-top-color:var(--green)}.up-card.orange{border-top-color:var(--orange)}
.up-card h4{font-family:var(--display);font-size:23px;color:var(--navy)}
.up-card p{font-size:13.5px;color:var(--slate);margin:6px 0 0}
/* ---- CTA band ---- */
.cta-band{background:linear-gradient(135deg,#1B2438 0%,#3a1410 70%,var(--red) 150%);color:#fff;text-align:center;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;right:-90px;top:-90px;width:380px;height:380px;border:2px solid rgba(255,255,255,.1);border-radius:50%}
.cta-band .sec-head h2{color:#fff}
.cta-band .sec-head p{color:#D7C3BD}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px}
/* ---- Footer ---- */
.foot{background:var(--navy);color:#fff;padding:54px 0 26px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}
.foot-brand-desc{color:#9aa7bb;font-size:14px;margin-top:14px;max-width:300px;line-height:1.6}
.foot-brand-desc + p{margin-top:8px;font-size:12px;color:#6f7d92}
.foot-col-title{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:#fff;margin-bottom:12px}
.foot-col a{display:block;color:#9aa7bb;font-size:14px;padding:5px 0;transition:color .15s}
.foot-col a:hover{color:#fff}
.foot-tag{font-family:var(--display);font-weight:700;color:var(--red2);font-size:16px;letter-spacing:.02em;margin-top:14px}
.foot-bot{border-top:1px solid rgba(255,255,255,.1);margin-top:34px;padding-top:18px;color:#7C8AA0;font-size:13px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
/* ---- Responsive ---- */
@media(max-width:1100px){
.nav-links{display:none}
.nav-burger{display:block}
.foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:880px){
.hero-in,.split,.cards,.cards.two,.why-grid,.steps,.video-grid{grid-template-columns:1fr}
.steps{gap:16px}
.hero h1{font-size:clamp(44px,12vw,68px)}
.frame img{max-width:280px}
.trial-banner{flex-direction:column;text-align:center}
}
@media(max-width:560px){
.foot-grid{grid-template-columns:1fr}
.hero-stats{gap:20px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}
/* ============================================================
LEGACY COMPATIBILITY LAYER
Re-themes the existing page classes to the V2 light look,
so pages keep their markup and scripts while matching free.html.
============================================================ */
/* layout containers */
.section-inner,.hero-inner{max-width:1140px;margin:0 auto;padding:0 26px}
section{padding:0}
.section-inner{padding-top:74px;padding-bottom:74px}
.page-hero{background:radial-gradient(120% 100% at 80% 0%,#F4F8FD 0%,var(--paper) 55%)!important;border-bottom:1px solid var(--line)!important;padding:62px 0 54px!important;text-align:center}
.page-hero .hero-inner{display:block}
.page-hero .section-tag{color:var(--red)}
.page-title{font-family:var(--display);font-size:clamp(38px,5.4vw,68px)!important;font-weight:700!important;color:var(--navy);letter-spacing:-.01em!important;margin:6px auto 0!important}
.page-sub{font-size:18px!important;color:var(--slate)!important;font-weight:400!important;max-width:640px;margin:14px auto 0!important}
/* section tags / titles */
.section-tag{display:inline-block;font-family:var(--display);font-weight:700;font-size:14px!important;letter-spacing:.14em!important;text-transform:uppercase;color:var(--red);margin-bottom:6px!important}
.section-title{font-family:var(--display);font-size:clamp(30px,4.2vw,48px)!important;font-weight:700!important;color:var(--navy);letter-spacing:-.01em!important;margin-bottom:10px!important}
.section-sub{font-size:17px!important;color:var(--slate)!important;font-weight:400!important;line-height:1.6!important;max-width:620px}
/* buttons (legacy names) */
.btn-primary{background:var(--red)!important;color:#fff!important;border:none!important;font-family:var(--display);font-weight:700;font-size:16px!important;padding:13px 26px!important;border-radius:10px!important;letter-spacing:.01em!important;box-shadow:0 14px 30px -14px rgba(204,34,0,.6);display:inline-flex;align-items:center;gap:8px;transition:transform .15s,background .15s}
.btn-primary:hover{background:var(--red2)!important;transform:translateY(-2px)}
.btn-secondary{background:var(--white)!important;color:var(--navy)!important;border:1.5px solid var(--line)!important;font-family:var(--display);font-weight:700;font-size:16px;padding:12px 24px;border-radius:10px;display:inline-flex;align-items:center;gap:8px;transition:transform .15s,border-color .15s}
.btn-secondary:hover{border-color:var(--navy)!important;transform:translateY(-2px)}
.btn-trial{background:var(--green)!important;color:#fff!important;border:none!important;font-family:var(--display);font-weight:700;font-size:15px;padding:13px 22px;border-radius:10px;display:inline-flex;align-items:center;gap:8px;box-shadow:0 14px 30px -14px rgba(69,160,69,.6);transition:transform .15s,filter .15s}
.btn-trial:hover{filter:brightness(1.05);transform:translateY(-2px)}
/* home hero (legacy) */
.hero{background:radial-gradient(120% 100% at 80% 0%,#F4F8FD 0%,var(--paper) 55%)!important;color:var(--navy)!important;padding:60px 0 66px}
.hero .hero-inner{display:grid;grid-template-columns:1.08fr .92fr;gap:40px;align-items:center}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:#FCEAD0;border:1.5px solid var(--orange);color:var(--red-dark);font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase;padding:7px 15px;border-radius:999px}
.hero-eyebrow span{color:var(--red)}
.hero-title{font-family:var(--display);font-size:clamp(46px,6.2vw,84px)!important;font-weight:700!important;color:var(--navy)!important;letter-spacing:-.01em!important;margin:16px 0 0!important;line-height:1.04}
.hero-title span{color:var(--red)!important;display:block}
.hero-subtitle{font-size:18px!important;color:var(--slate)!important;max-width:500px;margin:16px 0 0!important;font-weight:400!important}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.hero-stats{display:flex;gap:0;flex-wrap:wrap;margin-top:32px}
.hero-stats .stat{flex:1;padding-right:28px;border-right:1px solid var(--line)!important}
.hero-stats .stat:last-child{border-right:none!important;padding-left:28px}
.hero-stats .stat:not(:first-child){padding-left:28px}
.stat-num{font-family:var(--display);font-weight:800;font-size:40px;color:var(--navy);line-height:1}
.stat-num span{color:var(--red)}
.stat-label{font-size:12.5px;color:var(--slate);margin-top:2px}
/* steps (legacy steps-grid) */
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:46px}
.steps-grid .step{background:var(--white)!important;border:1px solid var(--line)!important;border-radius:16px!important;padding:24px!important;position:relative;box-shadow:0 18px 40px -28px rgba(27,36,56,.5)}
.steps-grid .step:hover{border-color:var(--line)!important;transform:translateY(-4px)}
.step-num{font-family:var(--display);font-weight:800;font-size:14px;color:var(--red);letter-spacing:.1em;display:flex;align-items:center;gap:10px}
.step-icon{font-size:30px;margin:10px 0 12px;display:block}
.step h3{font-family:var(--display);font-size:20px;color:var(--navy)}
.step p{font-size:14px;color:var(--slate)!important;line-height:1.55}
/* feature cards (legacy) */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:46px}
.feature-card{background:var(--white)!important;border:1px solid var(--line)!important;border-radius:16px!important;padding:26px!important;box-shadow:0 18px 40px -28px rgba(27,36,56,.5);transition:transform .15s,box-shadow .15s}
.feature-card:hover{transform:translateY(-4px)!important;border-color:var(--line)!important;box-shadow:0 26px 50px -26px rgba(27,36,56,.5)}
.feature-icon{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:14px;background:var(--paper2)}
.fi-blue{background:rgba(46,134,193,.12)}.fi-green{background:rgba(69,160,69,.12)}.fi-orange{background:rgba(245,166,35,.14)}.fi-red{background:rgba(204,34,0,.1)}.fi-slate{background:rgba(70,86,107,.12)}.fi-navy{background:rgba(27,36,56,.1)}
.feature-card h3{font-family:var(--display);font-size:20px;color:var(--navy);margin-bottom:8px}
.feature-card p{font-size:14px;color:var(--slate)!important;line-height:1.6}
/* device card (legacy home visual) keeps dark, already fine */
.device-card{background:var(--navy)!important;color:#fff}
.device-logo img{background:#fff;border-radius:8px;padding:5px 9px}
/* sections that were dark bands -> light, except explicit navy bands */
.how-section,.pricing-section,#features,.cta-section{background:var(--paper)!important;color:var(--navy)!important}
.how-section .section-sub,.pricing-section .section-sub,#features .section-sub{margin-left:auto;margin-right:auto}
.cta-section{background:linear-gradient(135deg,#1B2438 0%,#3a1410 70%,var(--red) 150%)!important;color:#fff!important;text-align:center}
.cta-section .section-title{color:#fff}
.cta-section .section-sub{color:#D7C3BD!important}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.cta-section .btn-secondary{background:transparent!important;color:#fff!important;border-color:rgba(255,255,255,.3)!important}
/* products page */
.product-grid{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start;margin-bottom:56px}
.product-name{font-family:var(--display);font-size:clamp(30px,3.4vw,44px);font-weight:700;color:var(--navy);margin:10px 0 0}
.product-desc{font-size:16px;color:var(--slate)!important;line-height:1.7;margin:12px 0 22px}
.product-badge{display:inline-block;background:rgba(204,34,0,.1);border:1px solid rgba(204,34,0,.3);color:var(--red);font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:5px 13px;border-radius:999px}
.feature-list{list-style:none;margin-bottom:28px;display:grid;gap:10px}
.feature-list li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--slate)}
.feature-list .tick{color:var(--green);font-weight:700;flex:none}
.product-img-main{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 60px -30px rgba(27,36,56,.5);overflow:hidden}
.pricing-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-top:8px;align-items:end}
.pricing-strip .plan{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 12px;text-align:center;box-shadow:0 14px 34px -30px rgba(27,36,56,.5)}
.pricing-strip .plan-name{font-size:12px!important;color:var(--muted)!important;margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em}
.pricing-strip .plan-price{font-family:var(--display);font-size:24px!important;font-weight:800!important;color:var(--navy)!important}
.pricing-ctas{grid-column:1/-1;display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:8px}
.pricing-ctas a[style]{background:#fff!important;color:var(--navy)!important;border:1.5px solid var(--line)!important}
.spec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:46px}
.spec-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 24px;box-shadow:0 16px 38px -30px rgba(27,36,56,.5)}
.spec-card h4{font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.spec-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--slate)}
.spec-row:last-child{border:none}
.spec-val{color:var(--navy)!important;font-weight:600}
/* FAQ (JS toggles .open on .faq-q and .faq-a) */
.faq-group{margin-bottom:44px;scroll-margin-top:96px}
.faq-group-header{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding-bottom:12px;border-bottom:2px solid var(--line)}
.faq-group-title{font-family:var(--display);font-size:26px;font-weight:700;color:var(--navy);flex:1}
.group-icon{font-size:22px}
.group-count{font-size:12px;color:var(--slate);background:var(--paper2);border:1px solid var(--line);padding:3px 10px;border-radius:999px}
.subcat-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin:20px 0 10px}
.faq-item{background:#fff;border:1px solid var(--line)!important;border-radius:12px;margin-bottom:9px;overflow:hidden;transition:border-color .15s;box-shadow:0 12px 30px -28px rgba(27,36,56,.5)}
.faq-item:hover{border-color:var(--blue)!important}
.faq-q{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:16px 20px;cursor:pointer;font-size:15px;font-weight:600;color:var(--navy);line-height:1.5;transition:background .15s;user-select:none}
.faq-q:hover{background:var(--paper2)!important}
.faq-q.open{background:rgba(204,34,0,.06)!important;color:var(--red-dark)}
.faq-chevron{font-size:12px;transition:transform .2s;color:var(--muted)!important;flex:none;margin-top:3px}
.faq-q.open .faq-chevron{transform:rotate(180deg);color:var(--red)!important}
.faq-a{display:none;padding:0 20px 18px;font-size:14.5px;color:var(--slate)!important;line-height:1.7;border-top:1px solid var(--line)!important}
.faq-a.open{display:block}
.faq-card{background:#fff;border:1px solid var(--line);border-radius:14px}
.cat-label{flex:1}.cat-icon{font-size:14px}
.cat-count{font-size:11px;background:var(--paper2);border:1px solid var(--line);padding:1px 8px;border-radius:10px;color:var(--slate)}
.cat-count.active,.faq-cat-btn.active .cat-count{background:rgba(204,34,0,.12);color:var(--red)}
.topic-btn,.filter-btn{background:#fff;border:1.5px solid var(--line);color:var(--slate);border-radius:999px;padding:8px 16px;font-size:13px;font-weight:500;cursor:pointer;transition:.15s}
.topic-btn:hover,.filter-btn:hover,.filter-btn.active{background:var(--red);color:#fff;border-color:var(--red)}
/* Support docs */
.support-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:0 18px 40px -28px rgba(27,36,56,.5);transition:transform .15s,border-color .15s}
.support-card:hover{transform:translateY(-4px);border-color:var(--blue)}
.support-icon{font-size:30px;margin-bottom:12px}
.support-card h3{font-family:var(--display);font-size:22px;color:var(--navy);margin-bottom:8px}
.support-card p{font-size:14px;color:var(--slate)!important;line-height:1.6;margin-bottom:14px}
.doc-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.doc-item:last-child{border:none}
.doc-info{display:flex;align-items:center;gap:14px}
.doc-icon{font-size:22px}
.doc-name{font-size:15px;font-weight:600;color:var(--navy);margin-bottom:2px}
.doc-desc{font-size:12.5px;color:var(--slate)!important}
.doc-badge{font-size:11px;padding:4px 10px;border-radius:6px;font-weight:600;white-space:nowrap;background:var(--paper2);color:var(--slate);border:1px solid var(--line)}
.dl-btn{background:var(--navy);color:#fff;border:none;border-radius:8px;padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--display)}
/* Videos */
.video-card{background:#fff!important;border:1px solid var(--line)!important;border-radius:16px;overflow:hidden;transition:transform .15s,border-color .15s;color:inherit;display:block}
.video-card:hover{transform:translateY(-4px);border-color:var(--blue)!important}
.video-thumb{position:relative;padding-bottom:56.25%;background:var(--navy)!important;overflow:hidden}
.placeholder-video,.video-thumb-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.play-btn{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;color:var(--red);font-size:22px}
.video-info{padding:18px 20px}
.video-title{font-family:var(--display);font-size:18px;font-weight:600;color:var(--navy);margin-bottom:6px;line-height:1.3}
.video-desc{font-size:13.5px;color:var(--slate)!important;line-height:1.55}
.video-tag{display:inline-block;font-size:11px;font-weight:600;color:var(--blue);background:rgba(46,134,193,.1);padding:3px 10px;border-radius:999px;margin-top:8px}
/* Forms (legacy) */
.form-group{margin-bottom:18px}
.form-label{display:block;font-size:13px;font-weight:600;color:var(--slate);margin-bottom:6px}
.form-input{width:100%;padding:13px 14px;border:1.5px solid var(--line)!important;border-radius:9px;font-size:15px;font-family:var(--body);color:var(--navy)!important;background:#F7F9FC!important;transition:border .15s}
.form-input:focus{outline:none;border-color:var(--blue)!important;background:#fff!important}
.form-input::placeholder{color:var(--muted)!important}
.form-input option{background:#fff!important;color:var(--navy)}
textarea.form-input{height:140px;resize:vertical}
.input-hint{font-size:12px;color:var(--muted);margin-top:5px}
/* Info cards (contact) */
.info-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:0 18px 40px -28px rgba(27,36,56,.5)}
.info-card h3{font-family:var(--display);font-size:20px;color:var(--navy);margin-bottom:8px}
.info-card p,.info-card a{font-size:14px;color:var(--slate)!important;line-height:1.6;text-decoration:none}
.info-card a:hover{color:var(--blue)!important}
/* terms clauses */
.clause{margin-bottom:22px}
.clause h2,.clause h3{font-family:var(--display);color:var(--navy)}
.clause p,.clause li{color:var(--slate)!important;font-size:14.5px;line-height:1.7}
/* app-card (download page) light card */
.app-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 26px;box-shadow:0 18px 40px -28px rgba(27,36,56,.5)}
.app-card h2{font-family:var(--display);font-size:24px;color:var(--navy);margin-bottom:2px}
.app-card p{font-size:14.5px;color:var(--slate);margin:6px 0 16px;line-height:1.55}
.version-badge{font-size:12.5px;font-weight:600;color:var(--slate)}
.dl-btn{display:inline-flex;align-items:center;gap:8px;background:var(--navy);color:#fff;font-family:var(--display);font-weight:600;font-size:15px;padding:11px 20px;border-radius:9px;margin-right:10px;margin-top:4px;transition:background .15s,transform .15s}
.dl-btn:hover{background:#0f1622;transform:translateY(-1px)}
.dl-btn.secondary{background:#fff;color:var(--navy);border:1.5px solid var(--line)}
.dl-btn.secondary:hover{border-color:var(--navy);background:#fff}
.qr-placeholder{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:140px;height:140px;margin:0 auto;border:2px dashed var(--line);border-radius:12px;color:var(--muted);font-size:12px;text-align:center;background:#fff}
.req-list{list-style:none;display:grid;gap:8px}
.req-list li{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--slate)}
.req-list .dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
/* generic dark surfaces remap (catch-all for old shells) */
.info-row{border-bottom:1px solid var(--line)}
/* neutralise legacy mobile nav markup (replaced by V2 header) */
.nav-mobile-overlay,.nav-mobile-panel{display:none!important}
/* hide any leftover legacy top nav if present */
body > nav:not(.hdr){display:none!important}
/* neutralise leftover inline dark-button styles carried from the old theme */
a[style*="#3D5A80"],a[style*="rgba(255,255,255,0.15)"],a[style*="rgba(255,255,255,0.05)"]{
background:#fff!important;color:var(--navy)!important;border:1.5px solid var(--line)!important;
}
/* Mobile hero fix: stack the two-column hero so it does not overflow on narrow screens */
@media(max-width:880px){.hero .hero-inner{grid-template-columns:1fr;gap:30px}.hero-visual{width:100%;justify-content:center}.hero-visual>div{max-width:100%}}
/* Activation steps banner */
.activate-steps-band{background:linear-gradient(180deg,#F4F8FD,#EAF1FA);border-bottom:1px solid #D9E1EC}
.as-inner{max-width:1140px;margin:0 auto;padding:22px 26px}
.as-title{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:800;color:#1B2438;text-align:center;margin-bottom:16px;letter-spacing:.3px}
.as-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.as-step{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid #D9E1EC;border-radius:12px;padding:14px 16px}
.as-num{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:#CC2200;color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif}
.as-txt{display:flex;flex-direction:column;gap:3px}
.as-txt strong{font-family:'Barlow Condensed',sans-serif;font-size:15px;color:#1B2438;font-weight:700}
.as-txt span{font-size:12.5px;color:#5B6675;line-height:1.45}
@media(max-width:820px){.as-grid{grid-template-columns:1fr;gap:12px}.as-inner{padding:18px}}
/* Licence key box with copy button */
.key-box{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid #D9E1EC;border-radius:10px;padding:10px 12px;margin-top:6px;flex-wrap:wrap}
.key-value{font-family:monospace;font-size:17px;letter-spacing:2px;color:#1B2438;font-weight:700}
.key-copy{background:#1B2438;color:#fff;border:none;border-radius:8px;padding:8px 14px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Barlow',sans-serif}
.key-copy:hover{background:#2D3047}
.key-copy.copied{background:#2E7D32}