/* AQI TradeWorks – website styles. The three products are keyed to the three line conductors of a UK supply:
   L1 brown = Asset Manager, L2 black = Construction Suite, L3 grey = AQI Accounts (blue neutral, green/yellow earth). */
@font-face{font-family:Barlow;font-weight:400;font-display:swap;src:url(fonts/barlow-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Barlow;font-weight:500;font-display:swap;src:url(fonts/barlow-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:Barlow;font-weight:600;font-display:swap;src:url(fonts/barlow-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-latin-700-normal.woff2) format('woff2')}
:root{
  --paper:#f3f4f1;--white:#fff;--ink:#1d2125;--ink2:#4a5056;--rule:#d8dbd4;
  --l1:#8a5a2e;--l2:#23272b;--l3:#8d9399;--n:#2d64a8;--eg:#3b8f3a;--ey:#efc31a;--copper:#c27a3e;
  --red:#c8102e;--red-d:#a10c24;--focus:#2d64a8;
  --wrap:1180px;--r:6px;
  --display:'Barlow Condensed',Arial Narrow,sans-serif;--body:Barlow,system-ui,-apple-system,Segoe UI,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--body)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--red)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:3px}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.02;letter-spacing:-.005em;margin:0 0 .4em}
h1{font-size:clamp(44px,7vw,84px)}
h2{font-size:clamp(32px,4.2vw,50px)}
h3{font-size:26px;font-weight:600;line-height:1.1}
p{margin:0 0 1em;max-width:68ch}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:9}

/* header */
.top{background:var(--white);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:5}
.top .wrap{display:flex;align-items:center;gap:20px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-weight:700;font-size:25px;letter-spacing:.01em;white-space:nowrap}
.brand-mark{display:flex;gap:3px}.brand-mark i{display:block;width:6px;height:26px;border-radius:3px}
.brand-mark i:nth-child(1){background:var(--l1)}.brand-mark i:nth-child(2){background:var(--l2)}.brand-mark i:nth-child(3){background:var(--l3)}
.nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav a{text-decoration:none;padding:8px 10px;border-radius:var(--r);font-weight:500;font-size:16px;white-space:nowrap}
.nav a[aria-current=page]{box-shadow:inset 0 -3px 0 var(--red);border-radius:0}
.nav .btn{margin-left:6px}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--rule);border-radius:var(--r);padding:8px 12px;font:600 15px var(--body)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 20px;border-radius:var(--r);border:2px solid var(--ink);background:transparent;color:var(--ink);font:600 17px var(--body);text-decoration:none;cursor:pointer}
.btn:hover{background:var(--ink);color:#fff}
.btn.buy{background:var(--red);border-color:var(--red);color:#fff}
.btn.buy:hover{background:var(--red-d);border-color:var(--red-d)}
.btn.small{min-height:38px;padding:6px 14px;font-size:15px}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}

/* hero with the three conductors */
.hero{padding:56px 0 40px;background:var(--white);border-bottom:1px solid var(--rule)}
.hero .lead{font-size:20px;color:var(--ink2);max-width:58ch}
.cores{margin-top:44px;display:grid;gap:14px}
.core{display:grid;grid-template-columns:minmax(80px,1fr) 34px minmax(280px,1.35fr);align-items:center;text-decoration:none;color:var(--ink)}
.core .ins{height:22px;border-radius:11px 0 0 11px;background:var(--c);box-shadow:inset 0 5px 0 rgba(255,255,255,.18),inset 0 -5px 0 rgba(0,0,0,.14)}
.core .cu{height:10px;background:linear-gradient(180deg,#e2a46c,var(--copper) 55%,#94582a);border-radius:0 2px 2px 0}
.core .term{display:flex;align-items:center;gap:14px;border:2px solid var(--ink);border-radius:var(--r);background:var(--white);padding:10px 16px;min-height:62px}
.core .term .lbl{font-family:var(--display);font-weight:700;font-size:20px;color:#fff;background:var(--c);border-radius:4px;min-width:40px;text-align:center;padding:2px 6px}
.core .term b{font-family:var(--display);font-size:26px;font-weight:700;display:block;line-height:1}
.core .term span.t{color:var(--ink2);font-size:15px;line-height:1.35}
a.core:hover .term{border-color:var(--red)}
a.core:hover .ins{filter:brightness(1.12)}
.core.l1{--c:var(--l1)}.core.l2{--c:var(--l2)}.core.l3{--c:var(--l3)}.core.n{--c:var(--n)}
.core.e .ins{background:repeating-linear-gradient(-55deg,var(--eg) 0 14px,var(--ey) 14px 28px)}
.core.e .term .lbl{background:repeating-linear-gradient(-55deg,var(--eg) 0 8px,var(--ey) 8px 16px);color:#111;text-shadow:0 0 3px #fff}
.core.n .term,.core.e .term{border-style:dashed;border-color:var(--rule)}
@media (prefers-reduced-motion:no-preference){
  .cores .ins{transform-origin:left;animation:run .9s cubic-bezier(.2,.7,.2,1) both}
  .cores .core:nth-child(2) .ins{animation-delay:.08s}.cores .core:nth-child(3) .ins{animation-delay:.16s}.cores .core:nth-child(4) .ins{animation-delay:.24s}.cores .core:nth-child(5) .ins{animation-delay:.32s}
  @keyframes run{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

/* sections */
.sec{padding:72px 0;border-bottom:1px solid var(--rule)}
.sec.white{background:var(--white)}
.sec .intro{font-size:19px;color:var(--ink2)}
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:30px;counter-reset:step}
.flow li{list-style:none;padding:22px 22px 24px;border-top:8px solid var(--c);background:var(--white);border-right:1px solid var(--rule)}
.flow li:last-child{border-right:0}
.flow li::before{counter-increment:step;content:counter(step);font-family:var(--display);font-weight:700;font-size:44px;line-height:1;color:var(--c);display:block;margin-bottom:6px}
.flow li h3{margin-bottom:.3em}.flow li p{font-size:16px;color:var(--ink2);margin:0}
.flow .tag{font-weight:600;font-size:14px;color:var(--c)}
ol.flow{padding:0;margin-left:0}

.prod{display:grid;grid-template-columns:1fr 1.25fr;gap:44px;align-items:center}
.prod.flip{grid-template-columns:1.25fr 1fr}.prod.flip .shot{order:-1}
.prod .phase{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--c)}
.prod .phase::before{content:'';width:34px;height:12px;border-radius:6px;background:var(--c)}
.prod ul{padding:0;margin:0 0 20px;list-style:none}
.prod li{padding:7px 0 7px 22px;position:relative;border-bottom:1px solid var(--rule)}
.prod li::before{content:'';position:absolute;left:0;top:16px;width:10px;height:4px;border-radius:2px;background:var(--c)}
.shot{border:1px solid var(--rule);border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 18px 40px -24px rgba(29,33,37,.45)}
.p-asset{--c:var(--l1)}.p-suite{--c:var(--l2)}.p-acc{--c:var(--l3)}

.trades{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;padding:0;list-style:none}
.trades li{border:1px solid var(--rule);background:var(--white);border-radius:999px;padding:8px 16px;font-weight:500}
.trades small{color:var(--ink2);font-weight:400}

/* product pages */
.phead{padding:48px 0 0;background:var(--white);border-bottom:8px solid var(--c)}
.phead .grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end}
.phead .shot{border-bottom:0;border-radius:8px 8px 0 0;box-shadow:none}
.phead .price-line{font-size:18px;color:var(--ink2)}
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 34px;margin-top:28px}
.feat h3{font-size:23px;border-top:4px solid var(--c);padding-top:12px}
.feat p{font-size:16px;color:var(--ink2);margin:0}
.duo{display:grid;grid-template-columns:2fr 1fr;gap:28px;align-items:start;margin-top:30px}
.phone{max-width:300px;border:10px solid var(--ink);border-radius:30px;overflow:hidden;background:#fff}

/* pricing and buying */
.plans{display:inline-flex;border:2px solid var(--ink);border-radius:var(--r);overflow:hidden;margin:6px 0 8px}
.plans button{border:0;background:#fff;padding:10px 18px;font:600 16px var(--body);cursor:pointer;color:var(--ink)}
.plans button[aria-pressed=true]{background:var(--ink);color:#fff}
.plan-note{color:var(--ink2);margin-bottom:24px}
.basket{display:grid;grid-template-columns:1.6fr 1fr;gap:30px;align-items:start}
.line{display:grid;grid-template-columns:14px 1fr auto auto;gap:16px;align-items:center;padding:18px 18px;background:var(--white);border:1px solid var(--rule);border-radius:var(--r);margin-bottom:10px}
.line .bar{align-self:stretch;border-radius:4px;background:var(--c)}
.line h3{font-size:22px;margin:0}.line p{margin:2px 0 0;font-size:15px;color:var(--ink2)}
.line .each{font-weight:600;white-space:nowrap;text-align:right}
.qty{display:flex;align-items:center;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.qty button{width:40px;height:42px;border:0;background:#f0f1ee;font:600 20px var(--body);cursor:pointer;color:var(--ink)}
.qty input{width:52px;height:42px;border:0;text-align:center;font:600 17px var(--body);-moz-appearance:textfield}
.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.total{position:sticky;top:84px;background:var(--white);border:2px solid var(--ink);border-radius:var(--r);padding:22px}
.total table{width:100%;border-collapse:collapse;font-size:16px}
.total td{padding:6px 0;border-bottom:1px solid var(--rule)}.total td:last-child{text-align:right;white-space:nowrap}
.total tr.sum td{font-weight:600;font-size:20px;border-bottom:0;padding-top:12px}
.total .fine{font-size:14px;color:var(--ink2);margin:12px 0 0}
.check{display:flex;gap:8px;align-items:flex-start;font-size:15px;margin:10px 0}
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--red)}
.notice{border-left:6px solid var(--n);background:#eef3fa;padding:14px 18px;border-radius:0 var(--r) var(--r) 0;margin:16px 0}
.notice.warn{border-color:var(--ey);background:#fdf6dc}
.notice.ok{border-color:var(--eg);background:#ecf6ec}
.notice.err{border-color:var(--red);background:#fbeaec}

/* how licensing works / faq / contact */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:40px}
details{border-bottom:1px solid var(--rule);padding:14px 0}
summary{cursor:pointer;font-weight:600;font-size:18px;list-style-position:outside}
details p{margin:10px 0 0;color:var(--ink2)}
form.contact{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;max-width:760px}
form.contact .full{grid-column:1/-1}
label{display:block;font-weight:600;font-size:15px;margin-bottom:4px}
input,select,textarea{width:100%;font:400 17px var(--body);padding:10px 12px;border:1px solid #b9beb6;border-radius:var(--r);background:#fff;color:var(--ink)}
textarea{min-height:130px;resize:vertical}
.hp{position:absolute;left:-5000px}
.foot{background:var(--ink);color:#d9dcd6;padding:44px 0 30px;font-size:15px}
.foot .wrap{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}
.foot a{color:#fff}.foot h3{color:#fff;font-size:20px}
.foot ul{list-style:none;padding:0;margin:0}.foot li{padding:3px 0}
.foot .legal{grid-column:1/-1;border-top:1px solid #3a4046;padding-top:16px;color:#9aa0a5}

@media (max-width:980px){
  .prod,.prod.flip,.phead .grid,.basket,.cols2,.duo{grid-template-columns:1fr}
  .prod.flip .shot{order:0}
  .feat{grid-template-columns:1fr 1fr}
  .flow{grid-template-columns:1fr}.flow li{border-right:0;margin-bottom:12px}
  .total{position:static}
}
@media (max-width:860px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;top:64px;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:8px 16px 16px;border-bottom:1px solid var(--rule)}
  .nav.open{display:flex}.nav a{padding:12px 8px}.nav .btn{margin:8px 0 0}
  .nav a[aria-current=page]{box-shadow:inset 4px 0 0 var(--red)}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  .hero{padding-top:36px}
  .core{grid-template-columns:44px 18px 1fr}
  .core .term{padding:8px 12px;gap:10px}.core .term b{font-size:22px}
  .feat{grid-template-columns:1fr}
  .line{grid-template-columns:10px 1fr;grid-template-rows:auto auto}
  .line .bar{grid-row:1/3}.line .each{text-align:left}
  .line .qty,.line .each{grid-column:2}
  form.contact{grid-template-columns:1fr}
  .foot .wrap{grid-template-columns:1fr}
  .sec{padding:52px 0}
}

/* helpers (no inline styles: the site's security policy blocks them) */
figure.shot,figure.phone{margin:0}.phone{margin:0 auto}
.lead{font-size:20px;color:var(--ink2)}
.phead .phase{font-weight:600}.phead .phase::before{content:'';width:34px;height:12px;border-radius:6px;background:var(--c);display:inline-block;margin-right:8px;vertical-align:middle}
.phead .phase{color:var(--c)}
.pad-b{padding-bottom:40px}.tight{padding-top:48px}.narrow{max-width:820px}
.h-sm{font-size:32px;margin-top:30px}.steps{max-width:68ch;padding-left:22px}.steps li{margin-bottom:8px}
.btn.wide{width:100%;margin-top:14px}form.contact.one{grid-template-columns:1fr}
.fine{color:var(--ink2);font-size:15px}
.price-line{color:var(--ink2);font-size:17px;align-self:center}
[hidden]{display:none!important}
.line{grid-template-columns:14px 1fr auto 118px}
.total td.none{text-align:left;color:var(--ink2)}
.foot .legal{max-width:none}
@media (max-width:640px){.line{grid-template-columns:10px 1fr}}
.p-other{--c:var(--n)}