/* We Deliver It Logistics - design system (navy + yellow, mobile-first) */
:root{--navy:#0a1f4d;--navy2:#12336f;--navy3:#07153a;--yellow:#f6b800;--yellow2:#ffcf3f;--ink:#101828;--muted:#5d6b88;--line:#e2e8f3;--bg:#f3f6fb;--card:#fff;--green:#12a150;--red:#d92d20;--blue:#2563eb;--orange:#ea7a12;--r:14px;--shadow:0 6px 24px rgba(10,31,77,.08);--font:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;--safe-b:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.55;font-size:15px;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
img,svg,video{max-width:100%}
a{color:var(--navy2)}
h1,h2,h3,h4{line-height:1.2;margin:0 0 .5em;color:var(--navy);font-weight:700}
h1{font-size:clamp(1.35rem,3.4vw,1.8rem)}h2{font-size:clamp(1.4rem,3.6vw,2rem)}h3{font-size:1.1rem}h4{font-size:1rem}
p{margin:0 0 1em}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 clamp(14px,4vw,28px)}
.i{width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.2em}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.muted{color:var(--muted)}.small{font-size:.85rem}.center{text-align:center}.nowrap{white-space:nowrap}.right{text-align:right}
.mt{margin-top:1rem}.mb{margin-bottom:1rem}.hide{display:none!important}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:.6rem 1.15rem;border:2px solid transparent;border-radius:10px;font:600 .95rem var(--font);text-decoration:none;cursor:pointer;transition:transform .15s,background .15s,box-shadow .15s;text-align:center;line-height:1.2}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--yellow);color:var(--navy);box-shadow:0 4px 14px rgba(246,184,0,.35)}.btn-primary:hover{background:var(--yellow2)}
.btn-dark{background:var(--navy);color:#fff}.btn-dark:hover{background:var(--navy2)}
.btn-outline{background:#fff;border-color:var(--line);color:var(--navy)}.btn-outline:hover{border-color:var(--navy)}
.btn-outline-light{border-color:rgba(255,255,255,.4);color:#fff;background:transparent}.btn-outline-light:hover{background:rgba(255,255,255,.12)}
.btn-success{background:var(--green);color:#fff}.btn-danger{background:var(--red);color:#fff}
.btn-sm{min-height:38px;padding:.35rem .8rem;font-size:.85rem;border-radius:8px}
.btn-block{width:100%}
.btn-lg{min-height:52px;font-size:1.05rem;padding:.8rem 1.5rem}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* ---------- Site header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--navy);color:#fff;box-shadow:0 2px 12px rgba(0,0,0,.2)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px}
.brand{display:flex;align-items:center;gap:.6rem;color:#fff;text-decoration:none;font-weight:800;line-height:1.05;min-width:0}
.brand span{display:flex;flex-direction:column;font-size:1.05rem;text-transform:uppercase;letter-spacing:.02em}
.brand small{color:var(--yellow);font-size:.72rem;font-weight:700;letter-spacing:.14em}
.brand-i{width:32px;height:32px;color:var(--yellow)}
.nav-toggle{display:none;background:transparent;border:2px solid rgba(255,255,255,.35);color:#fff;border-radius:10px;width:46px;height:44px;cursor:pointer;align-items:center;justify-content:center}
.nav-toggle .i{width:24px;height:24px}
.main-nav{display:flex;align-items:center;gap:.3rem}
.main-nav>a{color:#dbe4ff;text-decoration:none;padding:.55rem .8rem;border-radius:8px;font-weight:500;font-size:.93rem}
.main-nav>a:hover,.main-nav>a.on{color:#fff;background:rgba(255,255,255,.1)}
.nav-cta{display:flex;gap:.5rem;margin-left:.6rem}

/* ---------- Hero ---------- */
.hero{background:radial-gradient(1200px 500px at 85% -10%,#1d4a9c 0,transparent 60%),linear-gradient(160deg,var(--navy3),var(--navy) 55%,var(--navy2));color:#fff;padding:clamp(28px,6vw,64px) 0 clamp(70px,9vw,110px);position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,4vw,48px);align-items:center}
.hero h1{color:#fff;font-size:clamp(2.1rem,7vw,4.4rem);font-weight:800;text-transform:uppercase;line-height:1.02;margin:0 0 .35em;letter-spacing:-.01em}
.hero h1 em{display:block;font-style:normal;color:var(--yellow)}
.hero p.lead{font-size:clamp(1rem,2.4vw,1.15rem);color:#d5deff;max-width:34rem}
.hero .truck{width:100%;max-width:520px;margin-top:1rem;opacity:.95}
.trust{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin:1.2rem 0 0;padding:0;list-style:none}
.trust li{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:.9rem}
.trust .i{color:var(--yellow);width:26px;height:26px}
.search-card{background:#fff;color:var(--ink);border-radius:18px;padding:clamp(16px,3vw,26px);box-shadow:0 20px 50px rgba(0,0,0,.35)}
.search-card h2{font-size:1.3rem;margin-bottom:.2rem}
.search-card .sub{color:var(--muted);font-size:.9rem;margin-bottom:1rem}
.call-strip{margin-top:1rem;padding:.8rem 1rem;border-radius:12px;background:var(--navy);color:#fff;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;justify-content:space-between}
.call-strip strong{color:var(--yellow)}

/* ---------- Sections ---------- */
.section{padding:clamp(38px,7vw,76px) 0}
.section.alt{background:#fff}
.section.dark{background:var(--navy);color:#fff}
.sec-title{display:flex;align-items:center;gap:1rem;justify-content:center;text-align:center;margin-bottom:clamp(20px,4vw,38px);text-transform:uppercase;letter-spacing:.06em}
.sec-title::before,.sec-title::after{content:"";height:2px;background:var(--line);flex:1;max-width:160px}
.section.dark .sec-title,.section.dark h2{color:#fff}.section.dark .sec-title::before,.section.dark .sec-title::after{background:rgba(255,255,255,.25)}
.sec-title h2{margin:0;font-size:clamp(1.15rem,3vw,1.6rem)}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:-52px;position:relative;z-index:5}
.feature{background:#fff;border-radius:var(--r);padding:1.1rem;box-shadow:var(--shadow);display:flex;gap:.8rem;align-items:flex-start}
.feature .ic{background:var(--navy);color:var(--yellow);width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none}
.feature h3{font-size:.95rem;margin:0 0 .15rem}.feature p{margin:0;color:var(--muted);font-size:.85rem}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:1rem}
.svc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.3rem;text-align:center}
.svc .ic{width:64px;height:64px;margin:0 auto .8rem;border-radius:16px;background:#fff7dc;color:var(--navy);display:grid;place-items:center}
.svc .ic .i{width:32px;height:32px}
.svc h3{font-size:.95rem;text-transform:uppercase;letter-spacing:.03em}
.svc p{color:var(--muted);font-size:.87rem;margin:0}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;counter-reset:s}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.2rem;position:relative}
.step .n{width:40px;height:40px;border-radius:50%;background:var(--yellow);color:var(--navy);font-weight:800;display:grid;place-items:center;margin-bottom:.7rem}
.step h3{font-size:.95rem}.step p{margin:0;color:var(--muted);font-size:.85rem}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.chip{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;padding:.45rem .9rem;border-radius:99px;font-size:.9rem}
.chip .i{color:var(--yellow)}
.cta-band{background:linear-gradient(135deg,var(--yellow),var(--yellow2));color:var(--navy);border-radius:20px;padding:clamp(20px,4vw,36px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.cta-band h2{margin:0;color:var(--navy)}
.pay-row{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:1.2rem}
.pill{background:#fff;border:1px solid var(--line);border-radius:99px;padding:.4rem 1rem;font-weight:600;font-size:.88rem}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy3);color:#c5d0f0;padding-top:2.2rem;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:1.6rem;padding-bottom:1.5rem}
.site-footer h4{color:#fff}.site-footer a{color:#c5d0f0;text-decoration:none;display:block;margin-bottom:.4rem}.site-footer a:hover{color:var(--yellow)}
.site-footer span{display:block;margin-bottom:.4rem}
.copy{border-top:1px solid rgba(255,255,255,.1);padding:1rem clamp(14px,4vw,28px) calc(1rem + var(--safe-b));font-size:.85rem}
.wa-float{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + var(--safe-b));width:54px;height:54px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 8px 20px rgba(0,0,0,.3);z-index:40}
.wa-float .i{width:28px;height:28px}

/* ---------- Forms ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(14px,3vw,24px);box-shadow:var(--shadow)}
.card+.card{margin-top:1rem}
.card h2,.card h3{margin-bottom:.8rem}
.form-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:.9rem}
.f{grid-column:span 12;min-width:0}
.f.c2{grid-column:span 6}.f.c3{grid-column:span 4}.f.c4{grid-column:span 3}
label{display:block;font-weight:600;font-size:.85rem;margin-bottom:.3rem;color:var(--navy)}
.req::after{content:" *";color:var(--red)}
input,select,textarea{width:100%;min-height:46px;padding:.6rem .8rem;border:1.5px solid #cfd8ea;border-radius:10px;font:16px var(--font);color:var(--ink);background:#fff;appearance:none;-webkit-appearance:none}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230a1f4d' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center;padding-right:2.2rem}
textarea{min-height:90px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--navy2);outline:3px solid rgba(246,184,0,.45);outline-offset:0}
input[type=checkbox],input[type=radio]{width:auto;min-height:0;appearance:auto;-webkit-appearance:auto;accent-color:var(--navy)}
input[type=file]{padding:.5rem;min-height:0}
.hint{font-size:.8rem;color:var(--muted);margin-top:.25rem}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.opt{position:relative;border:2px solid var(--line);border-radius:12px;padding:.8rem .9rem;cursor:pointer;background:#fff;display:block;margin:0}
.opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer}
.opt b{display:block;color:var(--navy)}.opt span{display:block;font-size:.82rem;color:var(--muted);font-weight:400}
.opt:has(input:checked){border-color:var(--yellow);background:#fff9e5;box-shadow:0 0 0 3px rgba(246,184,0,.3)}
.opt.sel{border-color:var(--yellow);background:#fff9e5;box-shadow:0 0 0 3px rgba(246,184,0,.3)}
.form-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem}
.alert{padding:.8rem 1rem;border-radius:10px;margin:0 0 1rem;font-size:.92rem;border:1px solid;border-left-width:5px}
.alert-success{background:#e9f8f0;border-color:#a8e3c1;color:#0b6b39}.alert-danger{background:#fdeceb;border-color:#f5b5b0;color:#93221a}
.alert-info{background:#eaf1ff;border-color:#b4ccff;color:#1b4aa8}.alert-warning{background:#fff6e0;border-color:#f6d98a;color:#7a5600}
.flash-wrap{padding-top:.8rem}.flash-wrap:empty{display:none}
.auth-wrap{min-height:calc(100dvh - 130px);display:grid;place-items:center;padding:clamp(18px,5vw,48px) 14px}
.auth-card{width:100%;max-width:440px}

/* ---------- Route results ---------- */
.result{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center}
.route-line{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;font-weight:700;color:var(--navy);font-size:1.15rem}
.route-line .i{color:var(--yellow)}
.fare{font-size:1.8rem;font-weight:800;color:var(--navy);line-height:1}
.meta{display:flex;gap:.4rem 1.2rem;flex-wrap:wrap;color:var(--muted);font-size:.88rem;margin-top:.4rem}
.meta span{display:inline-flex;align-items:center;gap:.35rem}

/* ---------- Badges ---------- */
.badge{display:inline-block;padding:.22rem .65rem;border-radius:99px;font-size:.75rem;font-weight:700;white-space:nowrap;background:#e6ebf5;color:#33415c}
.st-booked{background:#e6ebf5;color:#33415c}.st-confirmed{background:#dbeafe;color:#1d4ed8}.st-driver-assigned{background:#e0e7ff;color:#4338ca}
.st-dispatched{background:#fef3c7;color:#92400e}.st-goods-picked-up{background:#ffedd5;color:#9a3412}.st-in-transit{background:#fde68a;color:#78350f}
.st-delivered{background:#d1fae5;color:#065f46}.st-completed{background:#12a150;color:#fff}.st-cancelled{background:#fee2e2;color:#991b1b}
.pay-paid{background:#d1fae5;color:#065f46}.pay-part{background:#fef3c7;color:#92400e}.pay-unpaid{background:#fee2e2;color:#991b1b}
.pay-pending{background:#fef3c7;color:#92400e}.pay-verified{background:#d1fae5;color:#065f46}.pay-rejected{background:#fee2e2;color:#991b1b}

/* ---------- Timeline ---------- */
.timeline{list-style:none;margin:0;padding:0;display:flex;gap:0;counter-reset:t}
.timeline li{flex:1;text-align:center;position:relative;font-size:.78rem;color:var(--muted);min-width:0;padding:0 2px}
.timeline li::before{content:"";position:absolute;top:16px;left:-50%;width:100%;height:3px;background:var(--line)}
.timeline li:first-child::before{display:none}
.timeline .dot{position:relative;z-index:1;width:34px;height:34px;border-radius:50%;background:#fff;border:3px solid var(--line);display:grid;place-items:center;margin:0 auto .4rem;font-weight:700;font-size:.8rem}
.timeline .dot .i{width:16px;height:16px;stroke-width:3}
.timeline li.done::before,.timeline li.now::before{background:var(--green)}
.timeline li.done .dot{background:var(--green);border-color:var(--green);color:#fff}
.timeline li.now .dot{background:var(--yellow);border-color:var(--yellow);color:var(--navy);box-shadow:0 0 0 5px rgba(246,184,0,.3)}
.timeline li.now .lbl{color:var(--navy);font-weight:700}.timeline .lbl{display:block;line-height:1.25}

/* ---------- Panel layout ---------- */
body.panel{background:var(--bg)}
.p-top{position:sticky;top:0;z-index:60;height:60px;background:var(--navy);color:#fff;display:flex;align-items:center;gap:.8rem;padding:0 clamp(12px,3vw,24px)}
.p-top .brand{flex:1}.p-user{display:flex;align-items:center;gap:.4rem;font-size:.88rem;color:#dbe4ff;min-width:0}.p-user span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px}
.side-toggle{display:none;background:transparent;border:2px solid rgba(255,255,255,.35);color:#fff;border-radius:10px;width:44px;height:42px;cursor:pointer;align-items:center;justify-content:center}
.p-wrap{display:flex;min-height:calc(100dvh - 60px)}
.p-side{width:240px;flex:none;background:#fff;border-right:1px solid var(--line);padding:1rem .7rem;position:sticky;top:60px;height:calc(100dvh - 60px);overflow-y:auto}
.p-side nav{display:flex;flex-direction:column;gap:.15rem}
.p-side a{display:flex;align-items:center;gap:.7rem;padding:.7rem .85rem;border-radius:10px;color:#33415c;text-decoration:none;font-weight:500;min-height:44px}
.p-side a:hover{background:#f0f4fb}.p-side a.on{background:var(--navy);color:#fff}.p-side a.on .i{color:var(--yellow)}
.p-side a.out{margin-top:.8rem;color:var(--red)}
.p-main{flex:1;min-width:0;padding:clamp(14px,3vw,28px) clamp(12px,3vw,28px) calc(28px + var(--safe-b))}
.p-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;margin-bottom:1rem}.p-head h1{margin:0}
.p-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.p-overlay{display:none}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:.9rem;margin-bottom:1rem}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1rem;box-shadow:var(--shadow)}
.stat .v{font-size:1.6rem;font-weight:800;color:var(--navy);line-height:1.1}.stat .l{color:var(--muted);font-size:.83rem}
.stat.hl{background:var(--navy);color:#fff}.stat.hl .v{color:var(--yellow)}.stat.hl .l{color:#c5d0f0}
.two{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:1rem;align-items:start}.two.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.two>*,.charts>*,.hero-grid>*,.result>*,.foot-grid>*{min-width:0}
.charts{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:1rem;margin-bottom:1rem}
.chart-box{position:relative;height:260px}
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:.6rem;margin-bottom:1rem;align-items:end}
.kv{display:grid;grid-template-columns:150px 1fr;gap:.45rem .8rem;margin:0}.kv dt{color:var(--muted);font-size:.86rem}.kv dd{margin:0;font-weight:500;min-width:0;overflow-wrap:anywhere}
.sum{display:flex;justify-content:space-between;padding:.45rem 0;border-bottom:1px dashed var(--line)}.sum.total{font-weight:800;font-size:1.1rem;border-bottom:0;color:var(--navy)}
.qr{max-width:240px;width:100%;border:1px solid var(--line);border-radius:12px;padding:8px;background:#fff;display:block;margin:0 auto .6rem}
.empty{text-align:center;padding:2rem 1rem;color:var(--muted)}

/* ---------- Tables (stack into cards on phones) ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.t{width:100%;border-collapse:collapse;font-size:.9rem}
.t th{text-align:left;font-size:.78rem;color:var(--muted);font-weight:600;padding:.65rem .7rem;border-bottom:2px solid var(--line);white-space:nowrap;background:#f8fafd}
.t td{padding:.7rem;border-bottom:1px solid var(--line);vertical-align:middle}
.t tr:hover td{background:#fafcff}
.t .acts{display:flex;gap:.35rem;flex-wrap:wrap}
.inline{display:inline}

/* ---------- Invoice ---------- */
.inv-bar{max-width:820px;margin:0 auto 1rem;display:flex;gap:.6rem;flex-wrap:wrap}
.invoice{background:#fff;max-width:820px;margin:0 auto;padding:clamp(18px,4vw,40px);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.inv-top{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-bottom:4px solid var(--yellow);padding-bottom:1rem;margin-bottom:1rem}
.inv-top h2{margin:0;font-size:1.5rem}.inv-top .r{text-align:right}
.inv-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.inv-grid h4{font-size:.8rem;color:var(--muted);text-transform:none;margin-bottom:.2rem}
.inv-t{width:100%;border-collapse:collapse;margin:1rem 0}.inv-t th{background:var(--navy);color:#fff;text-align:left;padding:.6rem;font-size:.85rem}.inv-t td{padding:.6rem;border-bottom:1px solid var(--line)}
.inv-tot{margin-left:auto;max-width:320px}
.stamp{display:inline-block;border:3px solid var(--green);color:var(--green);font-weight:800;padding:.2rem .8rem;border-radius:8px;transform:rotate(-4deg);letter-spacing:.08em}

/* =============== Responsive =============== */
@media (max-width:1100px){.steps{grid-template-columns:repeat(3,1fr)}.two,.charts{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}.hero .truck{display:none}
  .nav-toggle{display:inline-flex}
  .main-nav{position:fixed;inset:64px 0 0 0;background:var(--navy);flex-direction:column;align-items:stretch;padding:1rem clamp(14px,4vw,28px) calc(1.5rem + var(--safe-b));gap:.2rem;transform:translateX(100%);visibility:hidden;transition:transform .25s,visibility .25s;overflow-y:auto;height:calc(100dvh - 64px)}
  .main-nav.open{transform:none;visibility:visible}
  .main-nav>a{padding:.9rem 1rem;font-size:1.05rem}
  .nav-cta{flex-direction:column;margin:1rem 0 0}.nav-cta .btn{min-height:48px;font-size:1rem}
  .foot-grid{grid-template-columns:1fr 1fr}.foot-grid>div:first-child{grid-column:1/-1}
  /* panel: off-canvas sidebar */
  .side-toggle{display:inline-flex}
  .p-side{position:fixed;left:0;top:60px;bottom:0;height:auto;z-index:70;transform:translateX(-102%);transition:transform .25s;box-shadow:8px 0 30px rgba(0,0,0,.2);width:min(80vw,280px)}
  body.side-open .p-side{transform:none}
  .p-overlay{display:block;position:fixed;inset:60px 0 0 0;background:rgba(7,21,58,.5);z-index:65;opacity:0;visibility:hidden;transition:opacity .25s}
  body.side-open .p-overlay{opacity:1;visibility:visible}
  .two.even{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .steps{grid-template-columns:1fr 1fr}.opts{grid-template-columns:1fr}
  .f.c2,.f.c3,.f.c4{grid-column:span 12}.f.c4.half,.f.c2.half{grid-column:span 6}
  .result{grid-template-columns:minmax(0,1fr)}.result .btn{width:100%}
  .kv{grid-template-columns:1fr}.kv dt{margin-top:.4rem}
  .inv-grid{grid-template-columns:1fr}.inv-top .r{text-align:left}
  /* timeline goes vertical */
  .timeline{flex-direction:column;gap:.1rem}
  .timeline li{display:flex;align-items:center;gap:.8rem;text-align:left;padding:.35rem 0;font-size:.9rem}
  .timeline li::before{top:auto;bottom:50%;left:16px;width:3px;height:100%;transform:none}
  .timeline .dot{margin:0}
  /* tables -> cards */
  table.t.stack,table.t.stack tbody,table.t.stack tr,table.t.stack td{display:block;width:100%}
  table.t.stack thead{display:none}
  table.t.stack tr{border:1px solid var(--line);border-radius:12px;margin-bottom:.8rem;padding:.4rem .2rem;background:#fff}
  table.t.stack td{border:0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.2rem 1rem;padding:.4rem .8rem;text-align:right;align-items:center;overflow-wrap:anywhere}
  table.t.stack td::before{content:attr(data-label);font-weight:600;color:var(--muted);font-size:.8rem;text-align:left;flex:none}
  table.t.stack td.acts-td{justify-content:flex-end;flex-wrap:wrap}
  table.t.stack td.acts-td::before{display:none}
  .inv-t th,.inv-t td{padding:.5rem .4rem;font-size:.8rem}
  .cta-band{flex-direction:column;align-items:stretch;text-align:center}
  .p-user span{display:none}
}
@media (max-width:520px){
  .steps{grid-template-columns:1fr}.foot-grid{grid-template-columns:1fr}
  .features{margin-top:-40px;grid-template-columns:1fr 1fr;gap:.6rem}.feature{flex-direction:column;padding:.9rem}
  .call-strip{flex-direction:column;align-items:stretch;text-align:center}.call-strip .btn{width:100%}
  .brand span{font-size:.92rem}.stat .v{font-size:1.35rem}
  .section .sec-title::before,.section .sec-title::after{max-width:30px}
}
@media (max-width:360px){.features{grid-template-columns:1fr}.brand small{letter-spacing:.08em}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ---------- Print (invoice) ---------- */
@media print{
  @page{size:A4;margin:12mm}
  body{background:#fff}.no-print,.site-header,.site-footer,.wa-float,.p-top,.p-side,.p-overlay,.p-head,.inv-bar,.flash-wrap{display:none!important}
  .p-wrap{display:block}.p-main{padding:0}.invoice{border:0;box-shadow:none;max-width:none;padding:0}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
.chart-box canvas{max-width:100%!important}

.site-footer .brand span{display:flex;margin:0}
.cards.six{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1100px){.cards.six{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.cards.six{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.cards.six{grid-template-columns:minmax(0,1fr)}}