/* AZBill landing page (self-contained; the app itself uses style.css) */
:root{--ink:#0b1222;--text:#47546a;--mut:#6b7a90;--line:#e7ebf3;--bg:#fff;--soft:#f5f8ff;--pri:#2f5bea;--pri2:#6d4df2;--ok:#12a150;--warn:#f5a524;--bad:#d93a3a;--r:16px;--shadow:0 10px 30px rgba(20,35,90,.10)}
*{box-sizing:border-box}[hidden]{display:none!important}html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}a{color:inherit;text-decoration:none}h1,h2,h3,h4,p{margin:0}ul{margin:0;padding:0;list-style:none}
.wrap{width:min(1160px,100% - 40px);margin:0 auto}.ico{width:20px;height:20px;flex:none}
h1,h2,h3{color:var(--ink);letter-spacing:-.02em}h2{font-size:clamp(28px,4vw,40px);line-height:1.15}h3{font-size:19px;line-height:1.3}
.grad{background:linear-gradient(90deg, #025ec3, #003aff);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pri);background:var(--soft);padding:6px 14px;border-radius:99px;margin-bottom:14px}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:600;font-size:15px;padding:12px 22px;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s;white-space:nowrap}
.btn-primary{background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;box-shadow:0 8px 20px rgba(47,91,234,.35)}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(47,91,234,.42)}
.btn-light{background:#fff;color:var(--ink);border-color:var(--line)}.btn-light:hover{border-color:#c9d3e6;transform:translateY(-1px)}
.btn-login{background:var(--ink);color:#fff;padding:10px 20px}.btn-login:hover{background:#1b2740}.btn-lg{padding:15px 28px;font-size:16px;border-radius:14px}
/* header */
.site-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.site-head.scrolled{border-color:var(--line);box-shadow:0 4px 18px rgba(15,23,42,.05)}
.nav{display:flex;align-items:center;gap:20px;height:70px}.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:var(--ink);letter-spacing:-.02em}
.brand .mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#5b7cfa,var(--pri2));display:grid;place-items:center;color:#fff;font-size:18px;box-shadow:0 6px 14px rgba(91,124,250,.45)}
.nav-links{display:flex;gap:6px;margin-left:28px}.nav-links a{padding:8px 14px;border-radius:10px;font-weight:500;color:var(--text)}.nav-links a:hover{background:var(--soft);color:var(--ink)}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:10px}.nav-toggle{display:none;background:none;border:0;padding:8px;color:var(--ink);cursor:pointer}.nav-toggle .ico{width:26px;height:26px}
/* hero */
.hero{position:relative;overflow:hidden;padding:64px 0 90px;background:radial-gradient(900px 500px at 85% -10%,rgba(109,77,242,.16),transparent 60%),radial-gradient(800px 500px at -10% 10%,rgba(47,91,234,.14),transparent 60%),linear-gradient(#fff,#f6f9ff)}
.hero-grid{display:grid;grid-template-columns:1.02fr 1fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(38px,5.4vw,62px);line-height:1.06;margin-bottom:20px}.hero p.lead{font-size:19px;max-width:560px;margin-bottom:30px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px}.fine{font-size:14px;color:var(--mut);display:flex;gap:18px;flex-wrap:wrap}.fine>span{display:inline-flex;align-items:center;gap:6px}.fine .ico{width:16px;height:16px;color:var(--ok)}
/* product mockup (pure HTML/CSS) */
.stage{position:relative}.mock{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 70px rgba(30,50,120,.22),0 6px 18px rgba(30,50,120,.08);overflow:hidden}
.mock .bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#f3f6fc;border-bottom:1px solid var(--line)}.mock .bar i{width:10px;height:10px;border-radius:50%;background:#d5dbe8}.mock .bar i:nth-child(1){background:#ff6b6b}.mock .bar i:nth-child(2){background:#ffd166}.mock .bar i:nth-child(3){background:#4cd38a}
.mock .bar span{margin-left:10px;font-size:12px;color:var(--mut);background:#fff;padding:3px 12px;border-radius:99px;border:1px solid var(--line)}
.m-body{display:grid;grid-template-columns:120px 1fr;min-height:340px}.m-side{background:#0f172a;padding:14px 12px;display:grid;gap:9px;align-content:start}
.m-side b{color:#fff;font-size:13px;margin-bottom:6px;display:flex;gap:7px;align-items:center}.m-side b:before{content:"";width:16px;height:16px;border-radius:5px;background:linear-gradient(135deg,#5b7cfa,#6d4df2)}
.m-side i{display:block;height:9px;border-radius:5px;background:rgba(255,255,255,.14)}.m-side i.on{background:var(--pri);height:22px;border-radius:7px}
.m-main{padding:16px;background:#f7f9fd}.m-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.m-kpi{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px}.m-kpi small{display:block;font-size:10px;color:var(--mut)}.m-kpi b{font-size:16px;color:var(--ink)}.m-kpi b.r{color:var(--bad)}.m-kpi em{display:block;font-style:normal;font-size:10px;color:var(--ok);font-weight:700}
.m-chart{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:12px}.m-chart small{font-size:10px;color:var(--mut);display:block;margin-bottom:8px}
.bars{display:flex;align-items:flex-end;gap:9px;height:96px}.bars div{flex:1;display:flex;gap:3px;align-items:flex-end;height:100%}.bars i{flex:1;border-radius:4px 4px 0 0;background:var(--pri)}.bars i+i{background:var(--ok)}
.m-rows{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}.m-row{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;font-size:11px;border-top:1px solid var(--line)}.m-row:first-child{border-top:0}.m-row b{color:var(--ink)}
.pill{font-size:10px;font-weight:700;padding:2px 9px;border-radius:99px}.pill.g{background:#e6f6ec;color:var(--ok)}.pill.r{background:#fde8e8;color:var(--bad)}.pill.a{background:#fff3d6;color:#b26a00}.pill.b{background:#eaf0ff;color:var(--pri)}.pill.x{background:#eceff5;color:var(--mut)}
.float{position:absolute;background:#fff;border-radius:14px;padding:12px 16px;box-shadow:var(--shadow);border:1px solid var(--line);display:flex;align-items:center;gap:12px;font-size:13px;animation:bob 6s ease-in-out infinite}
.float .dot{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff}.float b{display:block;color:var(--ink);font-size:14px}.float small{color:var(--mut)}
.float.a{left:-34px;bottom:-30px}.float.a .dot{background:var(--ok)}.float.b{right:-14px;top:-30px;animation-delay:-3s}.float.b .dot{background:#0253d4}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* strip */
.strip{padding:34px 0;border-bottom:1px solid var(--line)}.strip-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.strip-item{display:flex;align-items:center;gap:12px;font-weight:600;color:var(--ink);font-size:15px}.strip-item .ico{width:38px;height:38px;padding:9px;border-radius:11px;background:var(--soft);color:var(--pri)}
/* sections */
section{padding:92px 0}.sec-head{text-align:center;max-width:720px;margin:0 auto 52px}.sec-head p{font-size:18px;margin-top:14px}.alt{background:var(--soft)}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:transform .2s,box-shadow .2s,border-color .2s}.feat:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#cfd9f5}
.feat .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#fff;margin-bottom:16px;background:linear-gradient(135deg,var(--pri),var(--pri2))}.feat .ic .ico{width:22px;height:22px}
.feat:nth-child(3n+2) .ic{background:linear-gradient(135deg,#12a150,#37c97a)}.feat:nth-child(3n) .ic{background:linear-gradient(135deg,#f59e0b,#f97316)}
.feat h3{margin-bottom:8px}.feat p{font-size:15px}
/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:s}.step{position:relative;padding:30px 26px;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.step:before{counter-increment:s;content:counter(s);position:absolute;top:-18px;left:24px;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;font-weight:800;display:grid;place-items:center;box-shadow:0 6px 14px rgba(47,91,234,.4)}
.step h3{margin:6px 0 8px}.step p{font-size:15px}
/* spotlight */
.spot{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:center;margin-bottom:96px}.spot:last-child{margin-bottom:0}.spot.flip .spot-text{order:2}
.spot-text h2{margin-bottom:14px}.spot-text>p{font-size:18px;margin-bottom:22px}.ticks{display:grid;gap:12px}.ticks li{display:flex;gap:12px;align-items:flex-start}.ticks .ico{width:22px;height:22px;padding:4px;border-radius:50%;background:#e6f6ec;color:var(--ok);margin-top:2px}
.paper{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:26px;max-width:470px;margin:auto;position:relative}
.paper-top{display:flex;justify-content:space-between;border-bottom:3px solid var(--pri);padding-bottom:14px;margin-bottom:14px}.p-logo{display:flex;gap:10px;align-items:center;font-weight:800;color:var(--ink)}.p-logo i{width:34px;height:34px;border-radius:9px;background:var(--pri)}
.p-title{text-align:right;color:var(--pri);font-weight:800;letter-spacing:2px;font-size:20px}.p-title small{display:block;letter-spacing:0;color:var(--mut);font-weight:500;font-size:11px}
.p-lines{font-size:12px;width:100%;border-collapse:collapse}.p-lines th{background:#f1f4fb;text-align:left;padding:7px;font-size:11px;color:var(--mut)}.p-lines td{padding:7px;border-bottom:1px solid var(--line)}.p-lines .n{text-align:right}
.p-tot{margin:12px 0 0 auto;width:62%;font-size:12px}.p-tot div{display:flex;justify-content:space-between;padding:3px 0}.p-tot .due{border-top:1px solid var(--line);margin-top:4px;padding-top:8px;font-weight:800;font-size:15px;color:var(--pri)}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}.chip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);padding:7px 14px;border-radius:99px;font-size:13px;font-weight:600;color:var(--ink);box-shadow:0 2px 8px rgba(20,35,90,.06)}.chip .ico{width:15px;height:15px;color:var(--pri)}
.dash-mock{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:20px}.dm-top{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.dm-top .m-kpi b{font-size:20px}.dm-two{display:grid;grid-template-columns:1.5fr 1fr;gap:14px}.donut{width:104px;height:104px;border-radius:50%;margin:6px auto 10px;background:conic-gradient(var(--ok) 0 62%,var(--bad) 0 80%,#b8bfd0 0);display:grid;place-items:center}
.donut:after{content:"";width:62px;height:62px;border-radius:50%;background:#fff}.legend{font-size:11px;display:grid;gap:4px;color:var(--mut)}.legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px}
.hb{display:grid;grid-template-columns:70px 1fr auto;gap:8px;align-items:center;font-size:11px;margin:8px 0}.hb div{background:#eef1f8;border-radius:5px;height:8px}.hb i{display:block;height:100%;border-radius:5px}
/* pricing */
.toggle{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:99px;padding:4px;margin-top:24px}.toggle button{border:0;background:none;font:inherit;font-weight:600;padding:8px 20px;border-radius:99px;cursor:pointer;color:var(--text)}.toggle button.on{background:var(--ink);color:#fff}.toggle em{font-style:normal;color:var(--ok);font-size:12px;margin-left:4px}
.toggle button.on em{color:#7ff0ae}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}.plan{background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px 28px;display:flex;flex-direction:column;position:relative}
.plan.pop{border:2px solid var(--pri);box-shadow:0 20px 50px rgba(47,91,234,.2);transform:translateY(-8px)}.plan .badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;font-size:12px;font-weight:700;padding:5px 14px;border-radius:99px}
.plan h3{font-size:20px}.plan .for{font-size:14px;color:var(--mut);margin:4px 0 18px}.price{display:flex;align-items:baseline;gap:6px;margin-bottom:6px}.price .amt{font-size:44px;font-weight:800;color:var(--ink);letter-spacing:-.03em}.price .per{color:var(--mut)}
.plan .note{font-size:13px;color:var(--mut);margin-bottom:20px;min-height:20px}.plan ul{display:grid;gap:11px;margin:6px 0 28px;flex:1}.plan li{display:flex;gap:10px;font-size:15px}.plan li .ico{width:18px;height:18px;color:var(--ok);margin-top:3px}
.plan .btn{width:100%}.trial-band{margin-top:34px;background:linear-gradient(135deg,#eaf0ff,#f1ecff);border-radius:var(--r);padding:20px 26px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;text-align:center;color:var(--ink);font-weight:600}
.roadmap{margin-top:26px;text-align:center;color:var(--mut);font-size:14px}.roadmap span{display:inline-block;margin:6px 4px;padding:5px 13px;border-radius:99px;border:1px dashed #c3cde3;color:var(--text);background:#fff}
/* operator band */
.ops{background:linear-gradient(135deg,#0f172a,#1e1b4b);color:#c8d3ea;border-radius:24px;padding:48px;display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:center}.ops h2{color:#fff;font-size:clamp(26px,3.4vw,34px);margin-bottom:12px}.ops p{color:#aab7d4}
.ops-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.ops-grid div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:14px 16px;font-size:14px;display:flex;gap:10px;align-items:flex-start;color:#e6ecfb}.ops-grid .ico{color:#8aa0ff;margin-top:2px;width:18px;height:18px}
/* faq */
.faq{max-width:820px;margin:auto;display:grid;gap:12px}.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:4px 22px}.faq summary{cursor:pointer;list-style:none;font-weight:600;color:var(--ink);padding:16px 0;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";font-size:24px;color:var(--pri);line-height:1;transition:transform .2s}.faq details[open] summary:after{transform:rotate(45deg)}.faq details p{padding:0 0 18px;font-size:15px}
/* cta + footer */
.cta{background:linear-gradient(135deg,#2347c4,#6d4df2);border-radius:28px;padding:64px 28px;text-align:center;color:#dbe4ff;position:relative;overflow:hidden}.cta h2{color:#fff;margin-bottom:12px}.cta p{font-size:18px;max-width:560px;margin:0 auto 28px}
.cta:before,.cta:after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.08)}.cta:before{width:320px;height:320px;left:-80px;top:-120px}.cta:after{width:260px;height:260px;right:-60px;bottom:-110px}
.cta .btn{position:relative}.cta .btn-light{border-color:transparent}.site-foot{padding:44px 0;border-top:1px solid var(--line);margin-top:92px}.foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}.foot .links{display:flex;gap:22px;flex-wrap:wrap;font-weight:500}.foot .links a:hover{color:var(--pri)}.foot small{color:var(--mut);display:block;margin-top:6px}
/* motion */
html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}html.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.float{animation:none}html.js .reveal{opacity:1;transform:none;transition:none}}
/* responsive */
@media(max-width:1000px){.hero-grid,.spot,.ops{grid-template-columns:1fr}.spot.flip .spot-text{order:0}.feat-grid,.plans{grid-template-columns:1fr 1fr}.strip-grid{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:1fr;gap:34px}.plan.pop{transform:none}.float.a{left:8px}.float.b{right:8px}.hero{padding-top:40px}}
@media(max-width:820px){.nav-links{position:absolute;left:0;right:0;top:70px;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;padding:10px 20px 18px;margin:0;display:none;box-shadow:0 18px 30px rgba(15,23,42,.08)}.nav-links.open{display:flex}.nav-toggle{display:inline-flex;order:1;margin-left:auto}.nav-actions{margin-left:0;order:2}.nav-actions .btn-primary{display:none}}
@media(max-width:640px){section{padding:64px 0}.feat-grid,.plans,.ops-grid{grid-template-columns:1fr}.m-body{grid-template-columns:1fr}.m-side{display:none}.cta-row .btn{width:100%}.ops{padding:30px 22px}.dm-two{grid-template-columns:1fr}.float{display:none}.dm-top{grid-template-columns:1fr 1fr 1fr}.paper{padding:18px}}

/* header spans the full width so the Log in button sits in the true top-right corner */
.site-head .wrap{width:100%;max-width:none;padding:0 28px}.spot>*,.hero-grid>*,.ops>*{min-width:0}.paper,.dash-mock,.mock{max-width:100%}
@media(max-width:820px){.nav-actions .btn-light{display:none}.site-head .wrap{padding:0 16px}}