/* iPOS.NET Wazirabad - store stylesheet */
:root{
--navy:#1B3A5C; --navy-dk:#12293F; --navy-lt:#24507C;
--copper:#B85A2A; --copper-lt:#D97A45; --copper-pale:#FDF1E8; --copper-ink:#A94F23;
--ink:#16202B; --muted:#4A5C70;
/* THE PAGE IS NOT WHITE. 7 Oct 2026, Ali's call after a day of looking at it: a white
page with white cards on it has nothing separating the two, so the page reads as flat
however good the cards are. The page is now a light cool slate and the CARDS are
white, which is what makes them lift. Text stays navy on white inside every card, so
nothing gets harder to read.
Change --page and --bg here and the whole site follows. Do NOT paint a full-width
section #fff to "clean it up" - that is the fault this replaced. */
--line:#DEE6EF; --bg:#E9EEF5; --page:#F3F6FA; --card:#fff;
--ok:#137A4B; --warn:#9A6B00; --bad:#B23B3B;
--radius:14px; --shadow:0 1px 2px rgba(16,37,58,.05),0 10px 26px rgba(16,37,58,.08);
--wrap:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);
font:16px/1.55 "Inter",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
img{max-width:100%;display:block}
a{color:var(--navy);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.2;letter-spacing:-.015em;margin:0 0 .5em}
/* A landing page leads with a bigger heading than a product page did at 2rem flat, and
it scales with the viewport instead of jumping at one breakpoint. */
h1{font-size:clamp(1.8rem,3.1vw,2.45rem);letter-spacing:-.03em}
h2{font-size:clamp(1.35rem,2vw,1.6rem)}
h3{font-size:1.12rem}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}
.small{font-size:.875rem}
.center{text-align:center}
.hide{display:none!important}
/* Spam honeypot. This class had NO rule in the stylesheet, so the decoy "Company website"
field was visible to real people on the contact form, the software trial form and the
lead box - and anyone who helpfully filled it in had their enquiry silently thrown away
as spam (routes/public.js and routes/lead.js drop the submission when it is non-empty).
Found and fixed 7 Oct 2026. Moved off-screen rather than display:none, which some bots
check for; the input already carries tabindex="-1" so a keyboard never reaches it. */
.hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;
overflow:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ---------- header ----------------------------------------------------------------
Two bars, on Ali's instruction (7 Oct 2026): a thin strip with the account controls on
the right, and the logo and the menu on their own line underneath. They had been merged
into a single bar earlier the same day.
What did NOT come back is the contact row. The phone number, the email address and the
city used to fill the left of the top strip; Ali asked for the number out of the menu,
and all three are in the footer, on Contact and on Support. The strip is half the height
it used to be as a result. */
.topbar{background:var(--navy-dk);color:#CFE0EE;font-size:.82rem}
.topbar .wrap{display:flex;gap:14px;align-items:center;justify-content:space-between;
padding-top:6px;padding-bottom:6px}
.tb-tag{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-util{display:flex;align-items:center;gap:8px;flex:none}
/* Search in the top strip, so the menu below stays only pages. */
.tb-search{display:flex;align-items:center;gap:7px;flex:0 1 300px;min-width:0;margin-left:auto;
background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:999px;
padding:3px 12px;transition:background .15s,border-color .15s}
.tb-search:focus-within{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.45)}
.tb-search svg{width:14px;height:14px;flex:none;fill:none;stroke:#9FB8CC;stroke-width:2;
stroke-linecap:round}
/* input[type=search] has its own global rule with the same specificity and it comes
first in this file, so it won the white box and the 10px padding. Hence the attribute
in the selector. */
.tb-search input[type=search]{flex:1;min-width:0;width:auto;border:0;outline:0;background:none;
font:inherit;font-size:.82rem;color:#fff;padding:4px 0;border-radius:0}
.tb-search input[type=search]:focus{outline:0;border-color:transparent}
.tb-search input::placeholder{color:#8FA7BC}
/* The tagline gives way to the search box, not the other way round. */
@media(max-width:900px){.tb-tag{display:none}}
.tbu{display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:999px;
color:#fff;border:1px solid rgba(255,255,255,.24);font-weight:600;line-height:1.5;
white-space:nowrap}
.tbu:hover{background:rgba(255,255,255,.12);text-decoration:none}
.tbu svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;
stroke-linecap:round;stroke-linejoin:round}
.tbu.cart{background:var(--copper);border-color:var(--copper);font-weight:700}
.tbu.cart:hover{background:var(--copper-ink)}
.tbu .n{background:#fff;color:var(--copper);border-radius:999px;font-size:.78rem;padding:0 6px;
font-weight:800}
header.site{background:var(--navy);color:#fff;position:sticky;top:0;z-index:40;
box-shadow:0 6px 18px rgba(7,20,34,.1)}
header.site .wrap{display:flex;align-items:center;gap:18px;padding-top:11px;padding-bottom:11px}
.logo{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;letter-spacing:-.02em;
font-size:1.12rem;flex:0 1 auto;min-width:0}
.logo:hover{text-decoration:none}
/* The mark sits straight on the navy - the white chip it used to sit inside made it look
like a button and cost it a third of its size. */
.logo .mk{width:40px;height:40px;display:grid;place-items:center;flex:0 0 auto}
.logo .mk svg{width:40px;height:40px}
.logo small{display:block;font-size:.78rem;font-weight:600;letter-spacing:.13em;color:#F0C9A8;
text-transform:uppercase;margin-top:2px}
nav.main{margin-left:auto;display:flex;align-items:center;gap:2px}
nav.main a{color:#D5E3EF;padding:9px 12px;border-radius:9px;font-size:.93rem;font-weight:500}
nav.main a:hover{background:rgba(255,255,255,.1);color:#fff;text-decoration:none}
nav.main a.on{background:rgba(255,255,255,.15);color:#fff;font-weight:600}
.burger{display:none;margin-left:auto;background:none;border:1px solid rgba(255,255,255,.3);
color:#fff;border-radius:9px;padding:8px 10px;font-size:1rem;line-height:1;cursor:pointer}
/* ---------- buttons / forms ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
background:var(--navy);color:#fff;border:1px solid var(--navy);padding:11px 20px;border-radius:10px;
font:inherit;font-weight:600;font-size:.95rem;text-decoration:none;transition:.15s}
.btn:hover{background:var(--navy-lt);border-color:var(--navy-lt);text-decoration:none;color:#fff}
.btn.copper{background:var(--copper);border-color:var(--copper)}
.btn.copper:hover{background:var(--copper-lt);border-color:var(--copper-lt)}
.btn.ghost{background:#fff;color:var(--navy);border-color:var(--line)}
.btn.ghost:hover{background:#F2F6FA;color:var(--navy);border-color:#B9C7D4}
.btn.wa{background:#167A43;border-color:#167A43;color:#fff}
.btn.wa:hover{background:#1B9553;border-color:#1B9553;color:#fff}
.btn.sm{padding:7px 13px;font-size:.85rem}
.btn.block{width:100%}
.btn[disabled],.btn.off{opacity:.5;pointer-events:none}
label{display:block;font-weight:600;font-size:.87rem;margin-bottom:5px}
/* input:not([type]) matters: an with no type attribute defaults to text but is
NOT matched by input[type=text], so several real fields - "Which system" on Support,
Name and City on the account page, and most of the admin forms - were rendering with
the raw browser style next to properly styled ones. The .qty inputs have no type
either; their own rules below still override this. */
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],
input[type=search],input:not([type]),select,textarea{
width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:#fff;
font:inherit;font-size:.95rem;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--navy-lt);outline-offset:1px;border-color:var(--navy-lt)}
textarea{min-height:110px;resize:vertical}
.field{margin-bottom:14px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.err{color:var(--bad);font-size:.85rem;margin-top:5px}
.flash{padding:12px 16px;border-radius:10px;margin:0 0 18px;font-size:.93rem;border:1px solid}
.flash.ok{background:#EAF7F0;border-color:#BEE4D0;color:#0F5E3A}
.flash.bad{background:#FDEDED;border-color:#F3C9C9;color:#8E2C2C}
.flash.info{background:#EDF4FB;border-color:#C9DDF1;color:#1B4870}
/* ---------- layout blocks ---------- */
main{min-height:60vh;padding:26px 0 56px}
/* A full-bleed banner has to start at the header, with no strip of page showing above it.
Not :first-child - the icon sprite partial is emitted before it.
:has() is what lets this stay a property of the banner rather than of every page. */
main:has(>.ed){padding-top:0}
/* A full-bleed dark band at the top of a page sits straight under the header.
The page gutter was showing as a pale strip between the two and wasting 26px.
(.hero went with the old home page; .abt-hero is About, Development and the like.) */
main>section.abt-hero{margin-top:-26px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.pad{padding:22px}
.crumbs{font-size:.83rem;color:var(--muted);margin-bottom:14px}
.crumbs a{color:var(--muted)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.section-head h2{margin:0}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.pgrid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
/* align-self: inside a flex-column card (.scard) an inline-block stretches to the full
width, which turned every "GUIDE" pill into a bar across the card. align-self alone is
enough - a width:fit-content here as well stopped the badge shrinking inside a flex
ROW, and "ON SITE OR ONLINE" then pushed Services, Support and Brochures off the side
of a phone. */
.badge{display:inline-block;align-self:flex-start;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
padding:4px 9px;border-radius:999px;background:var(--copper-pale);color:var(--copper-ink)}
.badge.grey{background:#EDF1F5;color:var(--muted)}
.badge.green{background:#E8F6EF;color:var(--ok)}
.badge.red{background:#FCECEC;color:var(--bad)}
.badge.amber{background:#FDF3E0;color:var(--warn)}
/* ---------- hero ---------- */
.hero{background:
radial-gradient(900px 520px at 88% -20%,rgba(184,90,42,.42),transparent 60%),
linear-gradient(160deg,var(--navy-lt) 0%,var(--navy) 45%,var(--navy-dk) 100%);
color:#fff;padding:38px 0 40px}
.hero h1,.hero .h1{font-size:clamp(1.8rem,3.9vw,2.6rem);margin-bottom:11px;line-height:1.08}
.hero h1 em,.hero .h1 em{font-style:normal;color:#F7A86B}
.hero p.lede{font-size:1.02rem;line-height:1.5;color:#CFE0EE;max-width:600px}
.hero .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.hero .stats{display:flex;gap:28px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.18)}
.hero .stats b{display:block;font-size:1.32rem;letter-spacing:-.02em}
.hero .stats span{font-size:.82rem;color:#AFC8DD}
/* ---------- software cards ---------- */
.scard{color:inherit;display:flex;flex-direction:column;gap:8px;
transition:box-shadow .2s,transform .2s,border-color .2s}
.scard:hover{text-decoration:none;transform:translateY(-3px);border-color:#C7D2DD;
box-shadow:0 16px 36px rgba(16,37,58,.12)}
.scard h3{transition:color .15s}
.scard:hover h3{color:var(--copper)}
.sicon{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
background:var(--copper-pale);border:1px solid #F3DFCF;color:var(--copper);flex:0 0 auto}
.sicon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
.sicon.lg{width:54px;height:54px;border-radius:14px}
.sicon.lg svg{width:30px;height:30px}
/* ---------- services ---------- */
.svc{display:flex;gap:14px;align-items:flex-start}
.svc-bd{flex:1;min-width:0}
.svc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.svc-head h3{margin:0;font-size:1.05rem}
.svc-head .badge{white-space:nowrap}
.svc p{margin:0}
.svc:hover{box-shadow:var(--shadow)}
.remote-band{margin-top:26px;display:flex;gap:20px;align-items:flex-start;padding:24px;
border-radius:var(--radius);color:#fff;
background:radial-gradient(620px 320px at 92% -30%,rgba(184,90,42,.45),transparent 62%),
linear-gradient(150deg,var(--navy-lt),var(--navy) 55%,var(--navy-dk));}
.remote-band h3{margin:0;color:#fff}
.remote-band .muted{color:#CFE0EE}
.remote-band .badge{background:rgba(255,255,255,.16);color:#F7A86B}
.remote-art{flex:0 0 auto;width:62px;height:62px;border-radius:16px;display:grid;place-items:center;
background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22)}
.remote-art svg{width:34px;height:34px;fill:none;stroke:#F7A86B;stroke-width:1.5;
stroke-linecap:round;stroke-linejoin:round}
.remote-band .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.remote-band .chip{display:inline-flex;font-size:.82rem;font-weight:600;padding:6px 12px;border-radius:999px;
background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff}
@media (max-width:640px){.remote-band{flex-direction:column;gap:14px;padding:20px}}
.svc-compact .svc-head{margin-bottom:2px}
.svc-compact .svc-head h3{font-size:1rem}
.svc-compact .badge.tiny{font-size:.78rem;padding:3px 8px}
.svc-compact p{margin:7px 0 0}
.remote-strip{display:flex;align-items:center;gap:16px;margin-top:18px;padding:16px 20px;
border-radius:var(--radius);color:#fff;text-decoration:none;
background:radial-gradient(520px 260px at 96% -40%,rgba(184,90,42,.45),transparent 62%),
linear-gradient(150deg,var(--navy-lt),var(--navy) 60%,var(--navy-dk));}
.remote-strip:hover{text-decoration:none;box-shadow:var(--shadow)}
.remote-strip-ic{flex:0 0 auto;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22)}
.remote-strip-ic svg{width:25px;height:25px;fill:none;stroke:#F7A86B;stroke-width:1.5;
stroke-linecap:round;stroke-linejoin:round}
.remote-strip-tx{flex:1;font-size:.92rem;color:#CFE0EE;line-height:1.5}
.remote-strip-tx b{color:#fff}
.remote-strip-go{flex:0 0 auto;font-weight:700;color:#F7A86B;font-size:.9rem;white-space:nowrap}
@media (max-width:720px){.remote-strip{flex-direction:column;align-items:flex-start;gap:10px}}
.field input[list]{width:100%}
.demo-card{margin-bottom:18px;border-left:4px solid var(--copper)}
/* ---------- downloads (compact) ---------- */
.dl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.dl-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.dl-head{font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
margin:0;padding:10px 14px;background:#F8FAFC;border-bottom:1px solid var(--line)}
.dl-row{display:flex;align-items:center;gap:10px;padding:9px 14px;border-top:1px solid var(--line);color:inherit}
.dl-head + .dl-row{border-top:0}
.dl-row:hover{background:#FBF6F2;text-decoration:none}
.dl-bd{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.dl-bd b{font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-note{font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-size{font-size:.78rem;color:var(--muted);white-space:nowrap}
.dl-go{font-size:.8rem;font-weight:700;color:var(--copper);white-space:nowrap}
@media (max-width:760px){.dl-grid{grid-template-columns:1fr}}
/* ---------- guides ---------- */
.guide{max-width:720px}
.guide h1{margin-bottom:8px}
.guide .lede-sm{font-size:1.08rem;margin-bottom:18px}
.guide h2{font-size:1.2rem;margin:28px 0 10px}
.guide p{margin:0 0 14px;line-height:1.7}
.guide ul.ticks{margin:0 0 16px}
.faq{border:1px solid var(--line);border-radius:10px;background:#fff;padding:12px 14px;margin-bottom:9px}
.faq summary{cursor:pointer;font-weight:700}
.faq p{margin:9px 0 0}
.linklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.linklist a{font-size:.92rem}
/* ---------- trade cards + rail (home) ---------- */
.tcard{color:inherit;display:flex;flex-direction:column;gap:9px;position:relative;overflow:hidden}
.tcard::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
background:linear-gradient(90deg,var(--copper),var(--copper-lt));opacity:0;transition:.15s}
.tcard:hover{text-decoration:none;box-shadow:var(--shadow);transform:translateY(-2px)}
.tcard:hover::before{opacity:1}
.tcard h3{font-size:1rem;margin:0}
.tcard p{margin:0;flex:1}
.tcard-go{font-size:.82rem;font-weight:700;color:var(--copper);opacity:.85}
.trade-rail{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:16px}
.trade-rail-lb{font-size:.82rem;color:var(--muted);font-weight:700;letter-spacing:.03em;
text-transform:uppercase;margin-right:2px}
.trade-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
background:#fff;border:1px solid var(--line);color:var(--ink);font-size:.86rem;font-weight:600}
.trade-pill svg{width:17px;height:17px;fill:none;stroke:var(--copper);stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
.trade-pill:hover{text-decoration:none;border-color:var(--copper);color:var(--copper);
box-shadow:0 2px 8px rgba(184,90,42,.12)}
.trade-pill.more{background:var(--copper-pale);border-color:#F1D9C8;color:var(--copper-ink)}
/* ---------- category cards (home) ---------- */
.ccard{display:flex;gap:14px;align-items:flex-start;color:inherit;position:relative}
.ccard:hover{text-decoration:none;box-shadow:var(--shadow);transform:translateY(-2px);border-color:#D6E0EA}
.ccard-bd{flex:1;min-width:0}
.ccard h3{margin:0 0 4px;font-size:1.06rem}
.ccard p{margin:0 0 10px}
.ccard-go{position:absolute;right:14px;top:14px;color:var(--copper);font-size:1.1rem;opacity:0;transition:.15s}
.ccard:hover .ccard-go{opacity:1;transform:translateX(2px)}
.cicon{flex:0 0 auto;width:48px;height:48px;border-radius:13px;display:grid;place-items:center;
background:linear-gradient(150deg,#22486F,var(--navy));color:#F7A86B}
.cicon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round}
ol.steps{padding-left:20px;margin:0 0 16px}
ol.steps li{margin-bottom:9px;line-height:1.6}
.center{text-align:center}
/* ---------- product cards ---------- */
.pcard{display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid var(--line);
border-radius:var(--radius);transition:.15s}
.pcard:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.pcard .ph{position:relative;display:block;aspect-ratio:1/1;background:#fff;overflow:hidden;
border-bottom:1px solid var(--line)}
.pcard .ph img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;
padding:3%;transition:transform .25s ease}
.pcard:hover .ph img{transform:scale(1.04)}
.pcard .ph .none{position:absolute;inset:0;display:grid;place-items:center;color:#A9B8C6;font-size:.8rem;
background:#F4F7FA}
/* product page: photo wider than the details column */
.pdp{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)!important}
.pdp h1{font-size:1.55rem;margin-bottom:6px!important}
.pdp .pdp-info p,.pdp .pdp-info li{font-size:.93rem}
/* ---- the buy box (7 Oct 2026) -----------------------------------------------------
The price, the quantity, the buttons, the compare link, the notify box and the three
promises used to be six loose things stacked down the right-hand column with nothing
holding them together. One panel. */
.buybox{margin-top:18px;border:1px solid var(--line);border-radius:16px;padding:18px;
background:#fff;box-shadow:0 6px 20px rgba(16,37,58,.06)}
.bb-price{font-size:2rem;font-weight:800;color:var(--navy);letter-spacing:-.025em;
line-height:1.1;margin-bottom:16px}
.bb-price.has-offer{margin-bottom:10px}
.buybox form{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.buybox .btn{flex:1 1 auto;min-width:140px}
.bb-trust{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.bb-trust li{font-size:.88rem}
@media(max-width:620px){
.buybox{padding:15px}
.bb-price{font-size:1.75rem}
.buybox .btn{flex:1 1 100%}
}
@media (max-width:860px){.pdp{grid-template-columns:1fr!important}}
.offer-box{border:1px dashed #E7B48F;background:var(--copper-pale);border-radius:10px;padding:12px 14px;margin:0 0 16px}
.offer-box p{margin:4px 0 0}
.offer-tag{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
color:#fff;background:var(--copper);padding:3px 8px;border-radius:999px}
.pcard .offer-chip{align-self:flex-start;max-width:100%;font-size:.78rem;font-weight:800;color:var(--copper-ink);
background:var(--copper-pale);border:1px solid #F1D5C0;padding:2px 8px;border-radius:999px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* product page main photo */
/* 4:3, not 1:1. A square frame on a 700px column made the photograph panel half as tall
again as the column of text beside it, and product photographs already arrive with
their own white margin, so the product looked small inside all that room. */
.pmedia{position:relative;aspect-ratio:4/3;background:#fff}
.pmedia img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;padding:2%}
.pmedia .none{position:absolute;inset:0;display:grid;place-items:center;color:#A9B8C6;background:#F4F7FA}
.pcard .bd{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.pcard h3{font-size:.86rem;line-height:1.3;margin:0;display:-webkit-box;-webkit-line-clamp:2;
-webkit-box-orient:vertical;overflow:hidden}
.pcard h3 a{color:var(--ink)}
.pcard .price{font-weight:800;color:var(--navy);font-size:.92rem;margin-top:auto;padding-top:2px}
.pcard .cat{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.pcard .btn.sm{padding:6px 10px;font-size:.78rem;margin-top:4px}
.pcard form{margin:0}
/* ---------- shop layout ---------- */
.shop{display:grid;grid-template-columns:236px minmax(0,1fr);gap:28px;align-items:start}
/* The rail lost its card on 7 Oct 2026. On a white page a bordered, shadowed box around
a list of categories is one frame too many - the little capitalised group headings and
their rules already do the separating. It becomes a card again below 980px, where it
collapses behind a button and a panel is the right shape. */
.filters{position:sticky;top:72px;padding-right:6px}
.fbtn{display:none;width:100%;background:#F3F6F9;border:1px solid var(--line);border-radius:9px;
padding:11px 14px;font:inherit;font-weight:700;font-size:.93rem;cursor:pointer;text-align:left;color:var(--ink)}
.filters .fbody{display:block}
.filters h4{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);
margin:20px 0 9px;display:flex;align-items:center;gap:8px}
.filters h4::after{content:"";flex:1;height:1px;background:var(--line)}
.filters h4:first-child{margin-top:0}
.filters ul{list-style:none;margin:0;padding:0}
.fcats{display:flex;flex-direction:column;gap:3px}
.fcats a{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:10px;font-size:.9rem;
color:var(--ink);border:1px solid transparent;transition:background .15s,border-color .15s}
.fcats a:hover{background:#F3F6FA;text-decoration:none}
.fcats a.on{background:var(--copper-pale);border-color:#F1D5C0;color:var(--copper);font-weight:700}
.fic{flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#EEF2F7;color:var(--navy)}
.fic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fcats a.on .fic{background:var(--copper);color:#fff}
.fname{flex:1;min-width:0}
.fcount{font-size:.78rem;font-weight:700;color:var(--muted);background:#EEF2F7;border-radius:999px;padding:2px 8px}
.fcats a.on .fcount{background:#fff;color:var(--copper)}
.frange{display:flex;align-items:center;gap:6px}
.fin{flex:1;min-width:0;display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;
background:#fff;padding:0 9px;transition:border-color .15s,box-shadow .15s}
.fin:focus-within{border-color:var(--copper);box-shadow:0 0 0 3px rgba(184,90,42,.12)}
.fin span{font-size:.78rem;font-weight:700;color:var(--muted)}
.fin input{border:0!important;box-shadow:none!important;padding:9px 6px!important;min-width:0;width:100%;
font-size:.88rem;background:transparent}
.fdash{color:var(--muted)}
.fswitch{display:flex;align-items:center;gap:10px;font-size:.9rem;font-weight:500;cursor:pointer;user-select:none}
.fswitch input{position:absolute;opacity:0;width:1px;height:1px}
.ftrack{flex:0 0 auto;width:38px;height:22px;border-radius:999px;background:#D5DDE6;position:relative;transition:background .2s}
.fknob{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;
box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s}
.fswitch input:checked + .ftrack{background:var(--copper)}
.fswitch input:checked + .ftrack .fknob{transform:translateX(16px)}
.fswitch input:focus-visible + .ftrack{box-shadow:0 0 0 3px rgba(184,90,42,.25)}
.fapply{margin-top:16px;border-radius:10px}
.fclear{display:block;text-align:center;font-size:.82rem;margin-top:9px;color:var(--muted)}
.fadvice{display:flex;flex-direction:column;gap:10px;margin-top:22px;padding:14px;border-radius:12px;color:#fff;
background:radial-gradient(260px 160px at 100% 0,rgba(184,90,42,.5),transparent 70%),
linear-gradient(150deg,var(--navy-lt),var(--navy) 60%,var(--navy-dk))}
.fadvice-ic{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
background:rgba(255,255,255,.12);color:#F7A86B}
.fadvice-ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fadvice b{display:block;font-size:.92rem;margin-bottom:3px}
.fadvice p{font-size:.8rem;color:#CFE0EE;margin:0 0 10px;line-height:1.45}
.searchbar{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.searchbar input[type=search]{flex:1;min-width:200px}
.searchbar select{width:auto;min-width:170px}
.resultline{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.chip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);
border-radius:999px;padding:5px 12px;font-size:.83rem}
.chip a{color:var(--muted);font-weight:700;text-decoration:none}
.pager{display:flex;gap:6px;justify-content:center;margin-top:28px;flex-wrap:wrap}
.pager a,.pager span{padding:8px 13px;border-radius:8px;border:1px solid var(--line);background:#fff;font-size:.9rem}
.pager .on{background:var(--navy);color:#fff;border-color:var(--navy)}
.empty{text-align:center;padding:56px 20px;color:var(--muted)}
/* ---------- tables ---------- */
table.data{width:100%;border-collapse:collapse;background:#fff;font-size:.92rem}
table.data th,table.data td{padding:11px 13px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
table.data th{background:#F3F6F9;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
table.data tr:last-child td{border-bottom:0}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
/* ---------- misc components ---------- */
.feature{display:flex;gap:13px;align-items:flex-start}
.feature .ic{width:38px;height:38px;border-radius:10px;background:var(--copper-pale);display:grid;place-items:center;flex:0 0 auto}
.feature .ic svg{width:20px;height:20px;stroke:var(--copper);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ticks{list-style:none;margin:0;padding:0}
.ticks li{position:relative;padding-left:26px;margin-bottom:9px}
.ticks li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:8px;border-left:2.5px solid var(--copper);
border-bottom:2.5px solid var(--copper);transform:rotate(-45deg)}
.cta-band{background:var(--navy);color:#fff;border-radius:var(--radius);padding:30px;display:flex;
align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.cta-band h3{margin:0 0 4px;color:#fff}
.cta-band p{margin:0;color:#BFD4E6}
.qty{display:flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;width:max-content;background:#fff}
.qty button{background:#F3F6F9;border:0;width:34px;height:34px;font-size:1.1rem;cursor:pointer;color:var(--ink)}
.qty input{width:48px;border:0;text-align:center;padding:0;height:34px}
.summary{position:sticky;top:78px}
.sumrow{display:flex;justify-content:space-between;padding:7px 0;font-size:.95rem}
.sumrow.total{border-top:1px solid var(--line);margin-top:8px;padding-top:12px;font-weight:800;font-size:1.1rem}
.steps{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.step{flex:1;min-width:130px;padding:12px 14px;border-radius:10px;background:#fff;border:1px solid var(--line);font-size:.88rem}
.step b{display:block;color:var(--navy)}
.paylist label{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--line);
border-radius:10px;margin-bottom:10px;cursor:pointer;font-weight:500}
.paylist label:has(input:checked){border-color:var(--navy);background:#F4F8FC;box-shadow:inset 0 0 0 1px var(--navy)}
.paylist input{margin-top:3px;width:auto}
.paylist .soon{opacity:.55;cursor:not-allowed}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{position:relative;padding:0 0 18px 26px;border-left:2px solid var(--line);margin-left:6px}
.timeline li:last-child{border-left-color:transparent;padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-7px;top:3px;width:12px;height:12px;border-radius:50%;
background:#fff;border:2px solid var(--line)}
.timeline li.done::before{background:var(--copper);border-color:var(--copper)}
.timeline b{display:block;font-size:.95rem}
.faq details{background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:10px;padding:14px 16px}
.faq summary{font-weight:600;cursor:pointer}
.faq p{margin:10px 0 0;color:var(--muted)}
.videobox{position:relative;width:100%;aspect-ratio:16/9;margin:18px 0 14px;border-radius:12px;
overflow:hidden;background:#0F1A24;border:1px solid var(--line)}
.videobox iframe,.videobox video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* ---------- footer ---------- */
footer.site{background:var(--navy-dk);color:#A9C1D6;padding:44px 0 26px;font-size:.9rem}
footer.site h4{color:#fff;font-size:.8rem;text-transform:uppercase;letter-spacing:.09em;margin-bottom:14px}
footer.site a{color:#CFE0EE}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin-bottom:7px}
.footgrid{display:grid;grid-template-columns:1.5fr 1fr 1.15fr 1.05fr 1.1fr;gap:26px;align-items:start}
/* Every column holds about the same number of links, so the footer is the same
height on every page instead of running to twice the depth of the others. */
.footlinks{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px;padding-top:16px;
border-top:1px solid rgba(255,255,255,.13);font-size:.86rem}
.footbot{margin-top:16px!important;border-top:0!important;padding-top:0!important}
.footbot{border-top:1px solid rgba(255,255,255,.13);margin-top:32px;padding-top:18px;display:flex;
justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.82rem}
.wa-float{position:fixed;right:18px;bottom:18px;z-index:50;width:54px;height:54px;border-radius:50%;
background:#1FA855;display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.wa-float svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:2}
/* ---------- admin ---------- */
/* ---- Admin panel menu -------------------------------------------------------------
Until 6 Oct 2026 this was one horizontal strip of fifteen links under the site header.
It wrapped to three rows on a laptop and ran off the side of a phone. Now: a sidebar
on a desktop, a bottom bar on a phone. Same markup, two layouts. */
.adminshell{display:flex;align-items:flex-start;gap:0}
.adminshell>main{flex:1 1 auto;min-width:0}
.adminside{flex:0 0 226px;width:226px;align-self:stretch;background:#0F1A24;color:#fff}
/* Sticky on an inner box, not on the column itself: a stretched flex item cannot stick. */
.as-inner{position:sticky;top:0;max-height:100vh;overflow-y:auto;padding:14px 10px 18px;
scrollbar-width:thin}
.as-top{display:flex;align-items:center;justify-content:space-between;gap:8px;
font-weight:800;letter-spacing:-.01em;padding:4px 12px 12px;font-size:1.05rem}
/* Narrower than a menu row and in the brand copper, so it reads as an action rather than
as another section of the panel. */
.adminside a.as-view{width:auto;padding:5px 9px;font-size:.78rem;font-weight:700;
color:#F0C9A8;background:rgba(255,255,255,.09);border-radius:7px;gap:6px}
.adminside a.as-view svg{width:15px;height:15px}
.adminside a.as-view:hover{background:var(--copper);color:#fff}
.as-head{margin:14px 12px 6px;font-size:.78rem;font-weight:700;letter-spacing:.12em;
text-transform:uppercase;color:#6F8699}
.as-list{display:flex;flex-direction:column;gap:2px}
.adminside a,.adminside button{display:flex;align-items:center;gap:10px;width:100%;
padding:9px 12px;border-radius:9px;font-size:.92rem;color:#BCCEDD;background:transparent;
border:0;font:inherit;font-size:.92rem;text-align:left;cursor:pointer}
.adminside svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;
stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.adminside a:hover,.adminside button:hover{background:rgba(255,255,255,.1);color:#fff;text-decoration:none}
.adminside a.on{background:var(--copper);color:#fff;font-weight:600}
.as-foot{margin-top:16px;padding-top:12px;border-top:1px solid rgba(255,255,255,.14)}
.adminbot{display:none}
@media(max-width:900px){
.adminshell{display:block}
.adminside{display:none}
/* Room for the bar, plus the phone's own home indicator. */
body:has(.adminbot){padding-bottom:calc(64px + env(safe-area-inset-bottom))}
.adminbot{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
background:#0F1A24;border-top:1px solid rgba(255,255,255,.14);
padding-bottom:env(safe-area-inset-bottom);
box-shadow:0 -6px 22px rgba(3,12,22,.4)}
.adminbot>a,.ab-more>summary{flex:1 1 0;display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:3px;min-width:0;padding:9px 2px 8px;color:#9FB4C6;
font-size:.78rem;font-weight:600;list-style:none;cursor:pointer}
.ab-more>summary::-webkit-details-marker{display:none}
.adminbot svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
.adminbot>a.on,.ab-more>summary.on{color:var(--copper-lt)}
.adminbot>a:hover{text-decoration:none}
.ab-more{flex:1 1 0;min-width:0}
/* The sheet opens upward out of the bar. Two columns, so fifteen sections do not
need a scroll on a short phone. */
.ab-sheet{position:fixed;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));
background:#132130;border-top:1px solid rgba(255,255,255,.14);
max-height:62vh;overflow-y:auto;padding:10px;
display:grid;grid-template-columns:1fr 1fr;gap:4px;
box-shadow:0 -14px 34px rgba(3,12,22,.5)}
.ab-sheet a,.ab-sheet button{display:flex;align-items:center;gap:9px;padding:11px 10px;
border-radius:9px;color:#C7D6E3;font-size:.88rem;background:transparent;border:0;
font:inherit;font-size:.88rem;width:100%;text-align:left;cursor:pointer}
.ab-sheet svg{width:18px;height:18px}
.ab-sheet a.on{background:var(--copper);color:#fff}
.ab-sheet a:hover,.ab-sheet button:hover{background:rgba(255,255,255,.1);text-decoration:none}
.ab-sheet form{grid-column:span 1}
}
/* Safari on older iOS has no :has(). The bar would then sit over the last few rows of a
table, so give every admin page the same bottom gap unconditionally. */
@media(max-width:900px){
.adminshell>main{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
body:has(.adminbot){padding-bottom:0}
}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.stat b{display:block;font-size:1.8rem;letter-spacing:-.02em;color:var(--navy)}
.stat span{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
/* ---------- responsive ---------- */
@media(max-width:980px){
.g4{grid-template-columns:repeat(3,1fr)}
.pgrid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.shop{grid-template-columns:1fr}
/* Collapsed behind a button here, so it is a panel again. */
.filters{position:static;padding:12px;background:var(--card);border:1px solid var(--line);
border-radius:var(--radius);box-shadow:var(--shadow)}
.fbtn{display:block}
.filters .fbody{display:none;padding-top:14px}
.filters .fbody.open{display:block}
.footgrid{grid-template-columns:1fr 1fr 1fr}
}
/* The menu has its own full-width line again, so it fits further down than it did when
it shared the bar with the account buttons. */
@media(max-width:980px){
nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:var(--navy-dk);
flex-direction:column;align-items:stretch;padding:10px;gap:2px;z-index:60;
box-shadow:0 12px 28px rgba(0,0,0,.28)}
nav.main.open{display:flex}
nav.main a{padding:11px 12px}
.burger{display:block}
header.site .wrap{position:relative}
}
/* On a phone the strip is just the two buttons; the tagline is the first thing to go. */
@media(max-width:720px){
.tb-tag{display:none}
.topbar .wrap{justify-content:flex-end}
}
@media(max-width:430px){
/* Icons only: the logo wordmark plus two labelled buttons was wider than a 320px
screen. The cart keeps its count, which is the one thing worth reading. */
.tbu span:not(.n){display:none}
.tbu{padding:5px 10px}
.logo{font-size:.98rem;gap:8px}
.logo>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logo .mk,.logo .mk svg{width:34px;height:34px}
}
@media(max-width:720px){
.g2{grid-template-columns:1fr}
.g3,.g4{grid-template-columns:repeat(2,1fr)}
.row2{grid-template-columns:1fr}
h1{font-size:1.6rem}
main{padding:18px 0 40px}
main:has(>.ed){padding-top:0}
.pad{padding:16px}
}
@media(max-width:460px){
.g3,.g4{grid-template-columns:1fr}
.pgrid{grid-template-columns:repeat(2,1fr);gap:11px}
.pcard .bd{padding:9px 10px 10px}
.pcard h3{font-size:.82rem}
.pcard .price{font-size:.88rem}
/* Two columns on a phone: one column made the footer twice as long as it needed to be. */
.footgrid{grid-template-columns:1fr 1fr;gap:20px}
.footgrid>div:first-child{grid-column:1/-1}
}
/* ---- the customer's own systems, on their account page --------------------------- */
.sysgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.sys{display:flex;flex-direction:column}
.sys-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sys h3 a{color:inherit}
.sys-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:14px}
.sys-links a{font-size:.82rem;font-weight:600;color:var(--copper);background:var(--copper-pale);
border-radius:999px;padding:5px 11px}
.sys-links a:hover{background:var(--copper);color:#fff;text-decoration:none}
.sup-row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
border-bottom:1px solid var(--line)}
.sup-row:last-child{border-bottom:0}
@media(max-width:620px){
.sysgrid{grid-template-columns:1fr}
.sup-row{flex-direction:column;gap:2px}
}
/* The sign-in code Ali reads out to a customer. Big, spaced and monospaced, because it
gets said down a phone line one character at a time. */
.signin-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1.7rem;
font-weight:700;letter-spacing:.22em;text-align:center;margin:12px 0 6px;padding:12px;
background:var(--copper-pale);color:var(--copper-ink);border-radius:10px;
border:1px dashed #E8C4A8}
/* ---- dealer toolkit ---------------------------------------------------------------
A working page, not a sales page: dense, scannable, every row one tap from the thing
the dealer needs in front of a customer. */
.dt-cta{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
margin-top:22px;padding:18px 20px;border-radius:var(--radius);
border:1px solid var(--line);background:var(--bg)}
.dt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.dt-item{display:flex;flex-direction:column;gap:6px}
.dt-item h3{font-size:1rem;margin:0}
.dt-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:10px}
.dt-links a{font-size:.82rem;font-weight:600;color:var(--copper);background:var(--copper-pale);
border-radius:999px;padding:5px 11px}
.dt-links a:hover{background:var(--copper);color:#fff;text-decoration:none}
/* Follow-ups: two lists behind two tabs. */
.fu-tabs{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.fu-tabs a{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;
border:1px solid var(--line);background:#fff;font-size:.9rem;font-weight:600;color:var(--ink)}
.fu-tabs a b{background:var(--bg);border-radius:999px;padding:1px 8px;font-size:.78rem}
.fu-tabs a:hover{border-color:#C0CCD8;text-decoration:none}
.fu-tabs a.on{background:var(--navy);border-color:var(--navy);color:#fff}
.fu-tabs a.on b{background:rgba(255,255,255,.2)}
/* Quick prices: a dense two-column list of name + one input, so a whole catalogue can be
priced in one sitting. */
/* min() so the track can go narrower than 330px on a 320px phone - a bare minmax(330px)
makes the grid wider than the screen and scrolls the whole page sideways. */
.pricegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));gap:8px}
.pricerow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;
padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;font-weight:400}
.pr-name{min-width:0;font-size:.9rem;font-weight:600}
.pr-name em{display:block;font-style:normal;font-size:.78rem;font-weight:400;color:var(--muted)}
.pr-in{display:flex;align-items:center;gap:6px;flex:none}
.pr-in b{font-size:.78rem;color:var(--muted)}
.pr-in input{width:clamp(78px,22vw,110px);padding:7px 9px!important;text-align:right}
/* admin visitors */
.an-range{display:flex;gap:6px}
.an-wa b{color:#128C7E}
.an-chart-card{margin-top:18px}
.an-chart{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:2px;align-items:end;height:160px;margin-top:10px;border-bottom:1px solid var(--line)}
.an-col{position:relative;height:100%}
.an-col i{position:absolute;bottom:0;left:0;right:0;border-radius:3px 3px 0 0}
.an-col i.v{background:#d8e2ee}
.an-col i.u{background:var(--copper);left:22%;right:22%}
.an-axis{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);margin-top:4px}
.an-key{display:flex;gap:16px;font-size:.8rem;color:var(--muted);margin-top:6px}
.an-key i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.an-key i.u{background:var(--copper)}.an-key i.v{background:#d8e2ee}
.an-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin-top:18px}
.an-grid h3{margin-top:0}
.an-t{width:100%;border-collapse:collapse;font-size:.9rem}
.an-t td{padding:6px 0;border-bottom:1px solid var(--line)}
.an-t td:last-child{text-align:right;font-weight:700;color:var(--navy);width:60px}
.an-t a{color:inherit}
.an-mini{display:flex;flex-wrap:wrap;gap:22px;align-items:center;margin-top:16px;color:inherit;text-decoration:none}.an-mini b{color:var(--navy);font-size:1.2rem}.an-mini .muted{margin-left:auto}
.an-verify{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end}.an-verify label{display:flex;flex-direction:column;gap:4px;font-size:.85rem;font-weight:600}.an-verify input{padding:9px 11px;border:1px solid var(--line);border-radius:8px;font:inherit;font-weight:400}@media(max-width:760px){.an-verify{grid-template-columns:1fr}}
/* training videos */
.vhead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.vhead h1{margin-bottom:4px}
.vtopics{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 8px}
.vtopics a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--navy);font-weight:600;font-size:.9rem;text-decoration:none}
.vtopics a:hover{border-color:var(--copper);color:var(--copper)}
.vtopics b{background:var(--navy);color:#fff;border-radius:999px;font-size:.78rem;padding:1px 8px}
.vgroup{margin-top:30px;scroll-margin-top:90px}
.vgroup h2{font-size:1.3rem;margin:0 0 14px}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.vcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;scroll-margin-top:90px}
.vcard.vhi{border-color:var(--copper);box-shadow:0 0 0 3px rgba(184,90,42,.18)}
.vthumb{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;background:#0f1a26;cursor:pointer;overflow:hidden}
.vthumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.vthumb:hover img{transform:scale(1.04)}
.vthumb:focus-visible{outline:3px solid var(--copper);outline-offset:-3px}
.vplay{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:rgba(184,90,42,.95);display:grid;place-items:center;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.vplay svg{width:26px;height:26px;fill:#fff;margin-left:3px}
.vframe{width:100%;aspect-ratio:16/9;border:0;display:block;background:#000}
.vbody{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;flex:1}
.vbody h3{font-size:1rem;line-height:1.35;margin:0;flex:1}
.vact{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:.85rem;font-weight:700}
.vact a{color:var(--copper);text-decoration:none}
.vact .vwa{color:#128C7E}
/* free tools */
.tl-tabs{display:inline-flex;gap:4px;background:#e9eef4;padding:4px;border-radius:12px;margin:18px 0 14px}
.tl-tabs button{border:0;background:transparent;padding:9px 16px;border-radius:9px;font:inherit;font-weight:700;color:var(--muted);cursor:pointer}
.tl-tabs button.on{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.tl-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:start;margin-top:14px}
.tl-btns{display:flex;flex-wrap:wrap;gap:10px}
.tl-preview{position:sticky;top:90px}
.tl-ph{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.tl-ph h3{margin:0}
.tl-labelwrap{display:grid;place-items:center;background:repeating-conic-gradient(#eef2f6 0 25%,#f8fafc 0 50%) 0 0/16px 16px;border-radius:10px;padding:26px 12px;margin-top:12px;overflow-x:auto}
.tl-label .bl{box-shadow:0 6px 20px rgba(15,30,50,.18);transform:scale(1.6);transform-origin:center;margin:30px}
.bl{background:#fff;color:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4mm;padding:1mm 1.5mm;box-sizing:border-box;overflow:hidden;font-family:Arial,Helvetica,sans-serif;border-radius:1mm}
.bl-shop{font-size:2.2mm;font-weight:700;line-height:1;text-transform:uppercase;letter-spacing:.1mm}
.bl-name{font-size:2.8mm;font-weight:700;line-height:1.05;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bl-code svg{display:block}
.bl-price{font-size:3.6mm;font-weight:800;line-height:1}
.bc-sheet{display:none}
.tl-info{margin-top:36px;gap:34px}
.tl-info h2{font-size:1.2rem;margin-top:0}
.cta-card{background:var(--navy);color:#fff;border-radius:var(--radius);padding:22px;margin-bottom:16px}
.cta-card h3{margin:0 0 6px;color:#fff}.cta-card p{color:#c9d6e5}.cta-card a:not(.btn){color:#f0b48f}
/* .btn.ghost is white-on-navy everywhere else, but its own rule sets a white
BACKGROUND - so on this navy card it was white text on a white pill, i.e. invisible.
Found by the contrast sweep on 7 Oct 2026. */
.cta-card .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.cta-card .btn.ghost:hover{background:rgba(255,255,255,.12);color:#fff;
border-color:rgba(255,255,255,.8)}
.tl-more{margin-top:40px}.tl-more h2{font-size:1.2rem}
.tl-mini{display:flex;flex-direction:column;gap:4px;color:inherit;text-decoration:none}
.tl-mini:hover{border-color:var(--copper)}
.tl-h{font-size:1.05rem;margin:0 0 14px}
.tl-out{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tl-out div{background:#f4f7fa;border-radius:10px;padding:12px}
.tl-out span{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.tl-out b{display:block;font-size:1.3rem;color:var(--navy);margin-top:2px;font-variant-numeric:tabular-nums}
.tl-out b.neg{color:#b42318}
.tl-out3 div:last-child{background:var(--navy)}.tl-out3 div:last-child span{color:#c9d6e5}.tl-out3 div:last-child b{color:#fff}
.tl-table td,.tl-table th{font-variant-numeric:tabular-nums}
.tl-seg{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.tl-seg label{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:9px 13px;margin:0;cursor:pointer;font-weight:600}
.tl-seg label:has(input:checked){border-color:var(--copper);background:#fdf3ec}
.tl-rates{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.85rem;color:var(--muted)}
.tl-rates button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:4px 11px;font:inherit;font-weight:700;color:var(--navy);cursor:pointer}
.tl-rates button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.tl-card{display:flex;flex-direction:column;gap:8px;color:inherit;text-decoration:none}
.tl-card:hover{border-color:var(--copper)}
.tl-card h2{font-size:1.1rem;margin:4px 0 0}
.tl-ico{width:46px;height:46px;border-radius:12px;background:#fdf3ec;display:grid;place-items:center}
.tl-ico svg{width:26px;height:26px;fill:none;stroke:var(--copper);stroke-linecap:round;stroke-linejoin:round}
.tl-go{color:var(--copper);font-weight:700;margin-top:auto}
@media (max-width:900px){.tl-grid{grid-template-columns:1fr}.tl-preview{position:static}.tl-out{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:480px){.tl-out{grid-template-columns:1fr}}
@media print{
body.tl-printing>*:not(.bc-sheet){display:none!important}
body.tl-printing{background:#fff!important;margin:0!important;padding:0!important}
body.tl-printing .bc-sheet{display:block}
.bc-sheet.roll .bl{page-break-after:always;break-after:page;border-radius:0}
.bc-sheet.a4{display:flex!important;flex-wrap:wrap;gap:2mm;width:194mm}
.bc-sheet.a4 .bl{outline:0.2mm dashed #bbb;break-inside:avoid}
}
/* free tools highlights */
.tools-strip{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:26px;padding:14px 18px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.ts-tag{background:#fdf3ec;color:var(--copper-ink);font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;padding:6px 11px;border-radius:999px}
.ts-links{display:flex;flex-wrap:wrap;gap:8px 20px;flex:1}
.ts-links a{display:inline-flex;align-items:center;gap:8px;color:var(--navy);font-weight:700;text-decoration:none}
.ts-links a:hover{color:var(--copper)}
.ts-links svg,.tt-ic svg,.ftools svg{width:18px;height:18px;fill:none;stroke:var(--copper);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ts-all{color:var(--copper);font-weight:700;font-size:.9rem;text-decoration:none;white-space:nowrap}
.tool-tip{display:flex;align-items:center;gap:14px;margin-top:20px;padding:14px 16px;border:1px dashed var(--copper);border-radius:12px;background:#fdf8f4;color:inherit;text-decoration:none}
.tool-tip:hover{background:#fbefe5}
.tt-ic{width:40px;height:40px;border-radius:10px;background:#fff;display:grid;place-items:center;flex:none}
.tt-ic svg{width:22px;height:22px}
.tool-tip b{display:block;color:var(--navy)}
.tool-tip small{display:block;color:var(--muted);font-size:.85rem;line-height:1.35;margin-top:2px}
.tt-go{margin-left:auto;color:var(--copper);font-weight:800;font-size:1.2rem}
.ftools{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--muted);font-size:.82rem;line-height:1.35;text-decoration:none}
.ftools:hover{border-color:var(--copper)}
.ftools b{display:block;color:var(--navy);font-size:.9rem}
.ftools svg{margin-top:2px}
@media (max-width:640px){.ts-links{flex:1 1 100%;flex-direction:column;gap:10px}.ts-all{width:100%}}
/* trade x city pages */
.ticks.tc-pain li::before{content:"";width:9px;height:9px;border:0;border-radius:50%;background:#c1cbd6;transform:none;top:9px}
.ticks.tc-pain li{color:var(--muted)}
/* customer reviews */
.rv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:18px}
.rv{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin:0;display:flex;flex-direction:column;gap:12px}
.rv-stars{color:#d8dee6;font-size:1.05rem;letter-spacing:2px}
.rv-stars .on{color:#E8A33D}
.rv blockquote{margin:0;font-size:1rem;line-height:1.55;color:var(--ink)}
.rv blockquote::before{content:"\201C"}
.rv blockquote::after{content:"\201D"}
.rv figcaption{margin-top:auto;font-size:.88rem}
.rv figcaption b{display:block;color:var(--navy)}
.rv figcaption span{color:var(--muted)}
/* sticky call + WhatsApp bar (phones only) */
.mbar{display:none}
@media (max-width:760px){
.mbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:60;
padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.96);
backdrop-filter:blur(6px);border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(15,30,50,.08)}
.mbar a{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 10px;border-radius:12px;
font-weight:800;font-size:1rem;text-decoration:none;color:#fff}
.mbar a:active{transform:translateY(1px)}
.mbar svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mbar-call{background:var(--navy)}
/* #1FA855 under white text is 3.09:1 - the same failure already fixed on .btn.wa.
This bar is on every phone page, so it was the most-seen instance of it. */
.mbar-wa{background:#167A43}
.wa-float{display:none}
body{padding-bottom:76px}
}
/* packages */
.pk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px;margin-top:20px}
.pk{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;gap:10px;position:relative}
.pk.pop{border-color:var(--copper);box-shadow:0 10px 30px rgba(184,90,42,.12)}
.pk-tag{position:absolute;top:-11px;left:22px;background:var(--copper);color:#fff;font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.pk h2{font-size:1.25rem;margin:0}
.pk-line{color:var(--muted);margin:0}
.pk-price{margin:4px 0 2px}
.pk-price b{display:block;font-size:1.5rem;color:var(--navy)}
.pk-price b.ask{font-size:1.1rem;color:var(--copper)}
.pk-price span{font-size:.8rem;color:var(--muted)}
.pk .ticks li{font-size:.92rem}
.pk-kit summary{cursor:pointer;font-weight:700;color:var(--copper);font-size:.9rem}
.pk-btns{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:8px}
/* find my system */
.fm{margin-top:20px}
.fm-steps{display:flex;gap:6px;margin-bottom:16px}
.fm-steps i{height:5px;flex:1;border-radius:99px;background:var(--line)}
.fm-steps i.on{background:var(--copper)}
.fm-q h2{font-size:1.2rem;margin:0 0 14px}
.fm-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.fm-opts button{text-align:left;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;font:inherit;font-weight:700;color:var(--navy);cursor:pointer;display:flex;flex-direction:column;gap:4px}
.fm-opts button span{font-weight:500;font-size:.85rem;color:var(--muted)}
.fm-opts button:hover{border-color:var(--copper)}
.fm-opts button.on{border-color:var(--copper);background:#fdf3ec;box-shadow:inset 0 0 0 1px var(--copper)}
.fm-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.fm-card{background:#fff;border:2px solid var(--copper);border-radius:var(--radius);padding:24px;margin-top:6px}
.fm-badge{display:inline-block;background:#fdf3ec;color:var(--copper);font-weight:800;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.fm-card h2{margin:12px 0 4px}
.fm-sw{margin:8px 0 0;font-weight:600}
.fm-price{margin:12px 0 0;color:var(--muted)}
/* demo booking */
.bd-fs{border:0;padding:0;margin:0 0 16px}
.bd-fs legend{font-weight:700;font-size:.87rem;margin-bottom:8px;padding:0}
.bd-days{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}
.bd-days label{display:block;margin:0;cursor:pointer}
.bd-days input{position:absolute;opacity:0;width:0;height:0}
.bd-days span{display:block;text-align:center;border:1px solid var(--line);border-radius:10px;padding:10px 6px;font-weight:600;font-size:.88rem;background:#fff}
.bd-days input:checked+span{border-color:var(--copper);background:#fdf3ec;color:var(--copper);box-shadow:inset 0 0 0 1px var(--copper)}
.bd-days input:focus-visible+span{outline:2px solid var(--copper);outline-offset:2px}
.bd-done{border-color:#128C7E;border-left-width:4px}
/* numbered steps in admin help boxes */
.steps-num{margin:0;padding-left:20px;font-size:.9rem;line-height:1.5}
.steps-num li{margin-bottom:8px}
/* consumables reorder */
.ro-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:20px}
.ro{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.ro-img{flex:none;width:92px;height:92px;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;position:relative}
.ro-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:4%}
.ro-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.ro-body h2{font-size:1rem;margin:0;line-height:1.3}
.ro-body h2 a{color:var(--navy)}
.ro-price{margin:0;font-weight:800;color:var(--navy)}
.ro-price.ask{color:var(--copper);font-weight:700;font-size:.95rem}
.ro-form{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto}
.ro-qty{display:flex;gap:6px}
/* stock + bulk rates */
.badge.amber{background:#FDF3E3;color:#9A6212}
.bulk{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:0 0 16px;background:#fff}
.bulk b{display:block;margin-bottom:6px;color:var(--navy)}
.bulk table{width:100%;border-collapse:collapse;font-size:.93rem}
.bulk td{padding:5px 0;border-top:1px solid var(--line)}
.bulk tr:first-child td{border-top:0}
.bulk td:last-child{text-align:right;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}
/* counter cost calculator */
.cc{display:grid;grid-template-columns:1.3fr .7fr;gap:20px;align-items:start;margin-top:18px}
.cc-group{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:14px}
.cc-group h2{font-size:1.05rem;margin:0 0 8px}
.cc-row{display:grid;grid-template-columns:22px 1fr auto auto;gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--line);margin:0;cursor:pointer}
.cc-group .cc-row:first-of-type{border-top:0}
.cc-row.on{background:#fdf8f4}
.cc-tick{width:20px;height:20px;accent-color:var(--copper)}
.cc-name a{color:var(--navy);font-weight:600}
.cc-name .badge{margin-left:6px;font-size:.78rem}
.cc-qty{transform:scale(.85);transform-origin:right center}
.cc-price{font-weight:700;color:var(--navy);min-width:96px;text-align:right;font-variant-numeric:tabular-nums}
.cc-total{position:sticky;top:90px}
.cc-picked{list-style:none;margin:10px 0;padding:0;font-size:.92rem}
.cc-picked li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line)}
.cc-picked li b{white-space:nowrap;font-variant-numeric:tabular-nums}
.cc-sum{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:12px 0 6px;padding-top:10px;border-top:2px solid var(--navy)}
.cc-sum b{font-size:1.5rem;color:var(--navy);font-variant-numeric:tabular-nums}
@media (max-width:900px){.cc{grid-template-columns:1fr}.cc-total{position:static}
.cc-row{grid-template-columns:22px 1fr auto;row-gap:4px}
.cc-price{grid-column:2/4;text-align:left;min-width:0}}
/* comparison table */
.cmp-wrap{overflow-x:auto;margin-top:20px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.cmp{border-collapse:collapse;width:100%;min-width:680px;font-size:.93rem}
.cmp th,.cmp td{padding:12px 14px;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.cmp thead th{border-top:0;font-size:1rem;color:var(--navy);vertical-align:bottom}
.cmp thead th a{color:var(--navy)}
.cmp tbody th{width:150px;color:var(--muted);font-weight:700;font-size:.85rem;background:#f8fafc}
.cmp-img{display:block;width:78px;height:78px;position:relative;margin-bottom:8px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.cmp-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:4%}
.cmp-price td{font-weight:800;color:var(--navy);font-size:1.05rem;font-variant-numeric:tabular-nums}
.cmp-btns td{white-space:nowrap}
/* notify-me box */
.notify-box{border:1px dashed var(--line);border-radius:12px;padding:12px 14px;margin-top:18px;background:#fff}
.notify-box summary{cursor:pointer;font-weight:700;color:var(--navy)}
.nb-row{display:flex;flex-wrap:wrap;gap:8px}
.nb-row input{flex:1 1 150px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font:inherit}
/* contact form: reasons, spam trap, sent state */
/* ---- Contact page (7 Oct 2026) ----------------------------------------------------
Rebuilt. It used to open with a form and keep the phone number in a list beside it.
Almost nobody fills in a form when a WhatsApp number is on the page, so the three real
ways of reaching the shop come first and large, and the form is the alternative. */
.ct-head{max-width:46em}
.ct-head .lede{font-size:1.04rem;line-height:1.55;color:var(--muted);margin:10px 0 0}
.ct-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:26px}
.ct-way{display:flex;align-items:center;gap:13px;padding:16px 18px;border-radius:14px;
border:1px solid var(--line);background:#fff;color:var(--ink);
box-shadow:0 6px 18px rgba(16,37,58,.06);
transition:transform .2s,box-shadow .2s,border-color .2s}
.ct-way:hover{text-decoration:none;transform:translateY(-3px);border-color:#C7D2DD;
box-shadow:0 18px 40px rgba(16,37,58,.13)}
.ct-way:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
.ct-ic{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:13px}
.ct-ic svg{width:23px;height:23px;fill:none;stroke:#fff;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
.ct-way.wa .ct-ic{background:#1FA855}
.ct-way.call .ct-ic{background:var(--navy)}
.ct-way.mail .ct-ic{background:var(--copper)}
.ct-t{min-width:0}
.ct-t b{display:block;font-size:1rem;letter-spacing:-.01em}
.ct-t em{display:block;font-style:normal;font-size:.82rem;color:var(--muted);margin-top:2px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-go{margin-left:auto;color:var(--muted);font-size:1.1rem;transition:transform .2s}
.ct-way:hover .ct-go{transform:translateX(3px);color:var(--copper)}
.ct-grid{display:grid;grid-template-columns:1.35fr .9fr;gap:22px;align-items:start;margin-top:26px}
.ct-form{padding:24px}
.ct-form h2{font-size:1.3rem;margin-bottom:4px}
.ct-form form{margin-top:16px}
/* Chips rather than four outlined boxes, which read as four empty form fields. */
.ct-chips{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.ct-chip{margin:0;cursor:pointer}
.ct-chip input{position:absolute;opacity:0;width:0;height:0}
.ct-chip span{display:block;height:100%;border:1px solid var(--line);border-radius:12px;
padding:11px 13px;background:var(--bg);transition:.15s}
.ct-chip b{display:block;color:var(--ink);font-size:.92rem;font-weight:700}
.ct-chip em{display:block;font-style:normal;font-size:.78rem;color:var(--muted);margin-top:2px;
line-height:1.3}
.ct-chip:hover span{border-color:#C0CCD8;background:#fff}
.ct-chip input:checked+span{border-color:var(--copper);background:var(--copper-pale)}
.ct-chip input:checked+span b{color:var(--copper-ink)}
.ct-chip input:focus-visible+span{outline:2px solid var(--copper);outline-offset:2px}
/* The thank-you state. */
.ct-sent{text-align:center;padding:10px 4px}
.ct-tick{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 14px;
border-radius:50%;background:#E8F6EF}
.ct-tick svg{width:28px;height:28px;fill:none;stroke:#128C7E;stroke-width:2.6;
stroke-linecap:round;stroke-linejoin:round}
.ct-sent h2{margin:0 0 8px}
.ct-sent-cta{display:flex;flex-direction:column;gap:9px;margin-top:18px;max-width:340px;
margin-left:auto;margin-right:auto}
.ct-side{display:flex;flex-direction:column;gap:14px}
.ct-side h3{font-size:1rem;margin-bottom:8px}
.ct-big{font-size:1rem;font-weight:600;margin:0 0 8px;line-height:1.45}
.ct-areas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.ct-areas li{display:flex;flex-direction:column;gap:1px;padding-left:15px;position:relative}
.ct-areas li::before{content:"";position:absolute;left:0;top:.52em;width:6px;height:6px;
border-radius:50%;background:var(--copper-lt)}
.ct-areas a{font-weight:600}
.ct-areas span{font-size:.82rem;color:var(--muted);line-height:1.35}
@media(max-width:900px){
.ct-grid{grid-template-columns:minmax(0,1fr)}
/* minmax(0,1fr), not 1fr: a plain 1fr track will not shrink below its content and the
row ran half a pixel past the edge on a 320px screen. */
.ct-ways{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:620px){
.ct-form{padding:18px}
.ct-chips{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
.ct-way,.ct-go{transition:none}
.ct-way:hover,.ct-way:hover .ct-go{transform:none}
}
/* ---------- lead capture (price list, call back, dealer) ---------- */
.leadgrab{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
padding:20px;box-shadow:var(--shadow)}
.leadgrab h3{margin:0 0 6px;font-size:1.15rem}
.leadgrab .lg-copy p{margin:0 0 4px;color:var(--muted);font-size:.93rem}
.leadgrab .lg-trust{font-size:.8rem !important;color:var(--muted)}
.leadgrab .field{margin-bottom:10px}
.leadgrab .lg-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.leadgrab .btn{margin-top:4px}
.leadgrab.band{margin-top:38px;display:grid;grid-template-columns:1.05fr 1fr;gap:26px;align-items:center;
background:linear-gradient(135deg,var(--navy) 0%,var(--navy-dk) 100%);border-color:var(--navy-dk);color:#fff;padding:26px 28px}
.leadgrab.band h3{color:#fff;font-size:1.35rem}
.leadgrab.band .lg-copy p{color:#C9D6E5}
.leadgrab.band .lg-trust{color:#9FB4CA}
.leadgrab.band label{color:#C9D6E5}
.leadgrab.band input,.leadgrab.band textarea{background:rgba(255,255,255,.96);border-color:transparent}
@media (max-width:820px){
.leadgrab.band{grid-template-columns:1fr;gap:16px;padding:20px}
.leadgrab .lg-row{grid-template-columns:1fr}
}
.sticky-col{position:sticky;top:16px}
@media (max-width:900px){.sticky-col{position:static}}
.wrap.narrow{max-width:720px}
/* ---------- admin lead inbox ---------- */
.stat.hot{border-color:var(--copper);background:var(--copper-pale)}
.stat.hot b{color:var(--copper)}
.chip.hot{background:var(--copper-pale);border-color:var(--copper);color:var(--copper);font-weight:700}
.lead-warn{margin-top:14px;background:var(--copper-pale);border:1px solid var(--copper);
border-radius:10px;padding:11px 14px;font-size:.92rem}
.lead-nudge{border-color:var(--copper) !important}
.card.lead.due{border-color:var(--copper)}
.lead-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.lead-top .chip{font-size:.78rem;padding:3px 10px}
.lead-body{display:grid;grid-template-columns:1fr 160px;gap:16px;align-items:start;margin-top:6px}
.lead-actions{display:flex;flex-direction:column;gap:7px}
.lead-msg{white-space:pre-wrap;background:var(--bg);border-radius:8px;padding:8px 11px;margin:8px 0 0}
.lead-form{margin-top:12px;border-top:1px solid var(--line);padding-top:12px;display:flex;
flex-direction:column;gap:9px}
.lead-status{display:flex;gap:6px;flex-wrap:wrap}
.lead-inputs{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lead-inputs input[type=text]{flex:1 1 240px;min-width:0}
.lead-inputs input[type=date]{flex:0 0 auto}
.lead-notes{list-style:none;margin:10px 0 0;padding:10px 0 0;border-top:1px dashed var(--line);font-size:.9rem}
.lead-notes li{margin-bottom:5px}
@media (max-width:720px){
.lead-body{grid-template-columns:1fr}
.lead-actions{flex-direction:row}
.lead-actions .btn{flex:1}
}
/* ---------- numbered steps ---------- */
ol.steps{margin:0;padding-left:20px}
ol.steps li{margin-bottom:8px}
.lead-filters{display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;gap:12px;align-items:end}
.lead-filters .field{margin:0}
@media (max-width:860px){.lead-filters{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.lead-filters{grid-template-columns:1fr}}
/* ---------- app demo clips (portrait phone recordings) ---------- */
.cliprow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:620px}
.clip{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
overflow:hidden;box-shadow:var(--shadow)}
.clip video{width:100%;aspect-ratio:9/16;display:block;background:#17110D;object-fit:cover}
.clip figcaption{padding:11px 13px 13px;display:flex;flex-direction:column;gap:3px}
.clip figcaption b{font-size:.95rem}
.clip figcaption .muted{line-height:1.4}
.cliptime{align-self:flex-start;margin-top:5px;font-size:.78rem;font-weight:700;letter-spacing:.05em;
text-transform:uppercase;color:var(--copper);background:var(--copper-pale);border-radius:999px;padding:3px 9px}
@media (max-width:860px){.cliprow{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cliprow{grid-template-columns:1fr;max-width:340px}}
/* ---------- price table on an app page ---------- */
.pricetable td{padding:10px 14px}
.pricetable td.right{text-align:right;white-space:nowrap}
.pricetable td.strong{font-weight:800;color:var(--navy)}
.pricetable tr:last-child td{border-bottom:0}
/* ---------- brochure card ---------- */
.broc-card{margin-top:18px;border-color:var(--copper)}
.broc-card.first{margin-top:0}
.vnote{background:var(--copper-pale);border:1px solid var(--copper);border-radius:10px;
padding:10px 14px;font-size:.93rem;margin:0 0 14px}
/* ---------- news & alerts ---------- */
.newsstrip{display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap;
background:var(--copper);color:#fff;padding:9px 20px;font-size:.93rem;font-weight:600;
text-decoration:none}
.newsstrip:hover{background:var(--copper-lt);color:#fff;text-decoration:none}
.newsstrip .ns-tag{background:rgba(255,255,255,.22);border-radius:999px;padding:2px 11px;
font-size:.78rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.newsstrip .ns-go{opacity:.85;font-weight:700}
@media (max-width:560px){.newsstrip .ns-go{display:none}}
.newslist{display:grid;gap:14px;margin-top:18px}
.nitem h2{font-size:1.25rem;margin:8px 0 6px}
.nitem h2 a{color:var(--navy)}
.nmeta{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.nuntil{color:var(--copper);font-weight:700;margin:0 0 10px}
.nitem.notice{border-left:4px solid var(--bad)}
.nitem.offer{border-left:4px solid var(--warn)}
.nitem.launch{border-left:4px solid var(--ok)}
.nitem.update{border-left:4px solid var(--navy-lt)}
.npost h1{margin:10px 0 12px}
.npost p{line-height:1.65}
.nshare{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);
display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.nmini{color:inherit;display:block}
.nmini:hover{text-decoration:none;border-color:var(--copper)}
.nmini h3{font-size:1rem;margin:9px 0 5px;color:var(--navy)}
/* ---------- news share / banner maker ---------- */
.sharebox{width:100%;font:13px/1.55 ui-monospace,Menlo,Consolas,monospace;
background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px;resize:vertical}
.bnr-tabs{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 14px}
.bnr-wrap{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:14px;
display:flex;justify-content:center}
.bnr-wrap canvas{max-width:100%;max-height:520px;height:auto;border-radius:6px;
box-shadow:0 6px 22px rgba(16,32,48,.18)}
.checkline{display:flex;gap:10px;align-items:flex-start;margin-bottom:9px;font-size:.93rem}
.checkline input{margin-top:3px;flex:0 0 auto}
/* ---------- app page: wide reading column, narrow action column ---------- */
.applayout{grid-template-columns:minmax(0,1fr) 358px}
.applayout > div:first-child h1{font-size:2.15rem}
.applayout > div:first-child > p:first-of-type{font-size:1.12rem;max-width:66ch}
.applayout .summary .card.pad{padding:18px}
.applayout .summary h3{font-size:1.05rem}
@media (max-width:1080px){.applayout{grid-template-columns:minmax(0,1fr) 320px;gap:26px}}
@media (max-width:900px){
.applayout{grid-template-columns:1fr}
.applayout > div:first-child h1{font-size:1.75rem}
}
/* ---- customer reviews on a product or app page (7 Oct 2026) ---------------------- */
.rv-avg{display:flex;align-items:baseline;gap:8px}
.rv-avg b{font-size:1.3rem;letter-spacing:-.02em}
.rv-stars{color:#E0A33E;letter-spacing:.08em;line-height:1}
/* This rule arrived later than the one at the top of the reviews block and overrode its
grey, so EVERY star was gold: a 3-star review was drawn as five. Found 8 Oct 2026 while
putting reviews on /review - it was wrong on the home page, /reviews and /about too.
The templates mark the filled ones with .on; the rest are empty and must look it. */
.rv-stars span:not(.on){color:#D3DBE4}
.rv-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.rv{display:flex;flex-direction:column;gap:8px}
.rv-text{margin:0;font-size:.93rem;line-height:1.5}
.rv-who{margin:0;font-size:.84rem;color:var(--muted)}
.rv-write{margin-top:18px;border:1px solid var(--line);border-radius:var(--radius);
padding:14px 16px;background:#fff}
.rv-write summary{cursor:pointer;font-weight:700;color:var(--navy)}
.rv-write form{margin-top:12px;max-width:620px}
.rv-pick{display:flex;flex-wrap:wrap;gap:8px}
.rv-pick label{margin:0;cursor:pointer}
.rv-pick input{position:absolute;opacity:0;width:0;height:0}
.rv-pick span{display:inline-block;padding:7px 12px;border:1px solid var(--line);border-radius:999px;
background:var(--bg);color:#E0A33E;letter-spacing:.08em;line-height:1.2;font-size:.95rem}
.rv-pick input:checked + span{border-color:var(--copper);background:var(--copper-pale)}
.rv-pick input:focus-visible + span{outline:2px solid var(--copper);outline-offset:2px}
@media(max-width:620px){.rv-list{grid-template-columns:1fr}}
/* Save for later. A heart over the top-right of the picture - the place every shopper
already looks for one. */
.savebtn{position:absolute;right:8px;top:8px;z-index:2;margin:0}
.savebtn button{display:grid;place-items:center;width:32px;height:32px;padding:0;cursor:pointer;
border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.92);
backdrop-filter:blur(3px);transition:background .15s,border-color .15s,transform .15s}
.savebtn button svg{width:17px;height:17px;fill:none;stroke:var(--muted);stroke-width:1.9;
stroke-linejoin:round}
.savebtn button:hover{border-color:var(--copper);transform:scale(1.07)}
.savebtn button:hover svg{stroke:var(--copper)}
.savebtn button.on{background:var(--copper);border-color:var(--copper)}
.savebtn button.on svg{fill:#fff;stroke:#fff}
.pcard{position:relative}
/* The same action on the product page, as a plain button under the buy row. */
.bb-save{margin-top:12px}
.bb-save button{display:inline-flex;align-items:center;gap:8px;cursor:pointer;background:none;
border:0;padding:0;font:inherit;font-size:.88rem;font-weight:600;color:var(--muted)}
.bb-save button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;
stroke-linejoin:round}
.bb-save button:hover{color:var(--copper)}
.bb-save button.on{color:var(--copper)}
.bb-save button.on svg{fill:var(--copper)}
.bb-inst{margin:-10px 0 14px;font-size:.92rem;color:var(--ink)}
.bb-inst b{color:var(--copper-ink)}
.bb-ship{margin:14px 0 0;font-size:.84rem;line-height:1.45;color:var(--muted);
padding-top:12px;border-top:1px solid var(--line)}
/* ---------- shop: slimmer filter column, bigger product cards ---------- */
.filters h4{margin:16px 0 7px;font-size:.78rem}
.fcats a{gap:7px;padding:7px 9px;font-size:.84rem}
/* The icons went: in a column this narrow they cost more room than they earn, and they
pushed "Stainless Steel Racks" onto two lines. The names are what people read. */
.fcats .fic{display:none}
.fname{line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fcount{font-size:.78rem;padding:2px 6px}
/* the price boxes are narrow now - shrink the Rs label so the word Min still fits */
.fin{padding:0 6px}
.fin span{font-size:.78rem}
.fin input{padding:8px 4px!important;font-size:.84rem}
.filters .card.pad,.filters > .pad{padding:14px}
.filters .btn{font-size:.88rem}
.pcard h3{font-size:.95rem}
.pcard .price{font-size:1.05rem}
.pcard .bd{padding:12px 14px 14px;gap:5px}
.pcard .cat{font-size:.78rem}
.pcard .btn{padding:10px 14px}
/* Scoped with a lower bound: these sit AFTER the phone rules in this file, so without it
they would override them and push the product grid off the side of a phone screen. */
@media(min-width:981px) and (max-width:1080px){
.shop{grid-template-columns:206px minmax(0,1fr);gap:22px}
.pgrid{grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
}
/* ---------- shop: hide and show the filter column ---------- */
.resultline{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fcollapse{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);
border-radius:9px;padding:7px 12px;font:inherit;font-size:.85rem;font-weight:600;color:var(--navy);
cursor:pointer;transition:background .15s,border-color .15s}
.fcollapse:hover{background:#EEF3F8;border-color:#CBD8E4}
.fcollapse svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.shop.nofilters{grid-template-columns:minmax(0,1fr)}
.shop.nofilters > .filters{display:none}
@media(max-width:980px){
/* On a phone the filter panel already has its own open/close button at the top. */
.fcollapse{display:none}
.shop.nofilters > .filters{display:block}
}
/* ---------- news thumbnails ---------- */
.nthumb,.nhero{position:relative;display:block;overflow:hidden;background:var(--navy)}
.nthumb img,.nhero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Drawn in CSS when a post has no photo, so a card never looks half-finished. */
.nthumb.gen,.nhero.gen{display:flex;flex-direction:column;justify-content:center;gap:7px;
padding:16px 18px;color:#fff;
background:linear-gradient(135deg,var(--navy) 0%,var(--navy-dk) 100%)}
.nthumb.gen::before,.nhero.gen::before{content:"";position:absolute;inset:0;
background:radial-gradient(circle at 88% 14%,rgba(184,90,42,.55),transparent 55%)}
.nthumb.gen::after,.nhero.gen::after{content:"";position:absolute;inset:0;
background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
background-size:34px 34px}
.nthumb.gen > *,.nhero.gen > *{position:relative;z-index:1}
.nt-kind{align-self:flex-start;background:var(--copper);border-radius:999px;padding:3px 11px;
font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.nt-title{font-weight:800;line-height:1.2;letter-spacing:-.01em;font-size:1rem;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nt-mark{margin-top:auto;font-size:.78rem;font-weight:700;color:#f0b48f;letter-spacing:.04em}
.nthumb.offer.gen::before,.nhero.offer.gen::before{background:radial-gradient(circle at 88% 14%,rgba(240,165,0,.5),transparent 55%)}
.nthumb.notice.gen::before,.nhero.notice.gen::before{background:radial-gradient(circle at 88% 14%,rgba(178,59,59,.55),transparent 55%)}
.nthumb.launch.gen::before,.nhero.launch.gen::before{background:radial-gradient(circle at 88% 14%,rgba(19,122,75,.5),transparent 55%)}
/* news list: picture beside the words */
.nitem{display:grid;grid-template-columns:232px minmax(0,1fr);overflow:hidden}
.nthumb-link{display:block;height:100%;min-height:172px}
.nitem .nthumb{height:100%;min-height:172px}
.nitem .nbody{padding:18px 20px 20px}
.nitem h2{margin-top:6px}
@media (max-width:680px){
.nitem{grid-template-columns:1fr}
.nthumb-link,.nitem .nthumb{min-height:150px}
.nitem .nbody{padding:15px 16px 17px}
}
/* one post: a banner across the top */
.nhero{aspect-ratio:1200/520;width:100%}
.nhero.gen{padding:26px 28px}
.nhero .nt-title{font-size:1.5rem;-webkit-line-clamp:3}
.nhero .nt-kind{font-size:.78rem;padding:4px 13px}
.npost .npad{padding:22px 24px 24px}
@media (max-width:680px){.npost .npad{padding:16px}.nhero .nt-title{font-size:1.15rem}}
/* small cards on the home page and under a post */
.nmini{padding:0;overflow:hidden;display:flex;flex-direction:column}
.nmini .nthumb.wide{aspect-ratio:16/9;width:100%}
.nmini .nthumb.gen{padding:13px 14px;gap:5px}
.nmini .nt-title{font-size:.9rem;-webkit-line-clamp:2}
.nmini-bd{display:block;padding:14px 16px 16px}
.nmini-bd h3{margin:8px 0 5px}
/* ---------- polish pass: let one thing be loud at a time ---------- */
/* On the dark hero the second action was a solid white block competing with the copper
one. Outlined, it reads as "the other option" instead of a second shout. */
.hero .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.hero .btn.ghost:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}
/* A quiet secondary button for pages that need two actions but only one decision. */
.btn.quiet{background:transparent;color:var(--navy);border-color:var(--line)}
.btn.quiet:hover{background:#EFEDE8;color:var(--navy);border-color:#D8D4CC}
/* Cards: the border already separates them from the warm background, so the shadow
only needs to appear when something is interactive and hovered. */
.card{box-shadow:none}
.card.pad{box-shadow:none}
a.card:hover,.pcard:hover,.nmini:hover{box-shadow:var(--shadow)}
.leadgrab,.clip{box-shadow:none}
.leadgrab.band{box-shadow:var(--shadow)}
/* Consistent rhythm: every section heading sits the same distance from what came before. */
.section-head{margin-top:38px}
.section-head:first-child{margin-top:0}
/* The free-tools strip and the stats row were the same weight as real content. */
.tools-strip{background:var(--card)}
/* Copper on the pale copper background was 4.17:1 - just under the readable minimum.
A slightly darker copper is used wherever it is text on that background. */
.fcats a.on{color:var(--copper-ink)}
.fcats a.on .fcount{color:var(--copper-ink)}
.chip.hot{color:var(--copper-ink)}
.cliptime{color:var(--copper-ink)}
.badge.amber{color:var(--copper-ink)}
/* ---------- about page ---------- */
.abt-hero{background:
radial-gradient(860px 480px at 92% -18%,rgba(184,90,42,.40),transparent 62%),
linear-gradient(160deg,var(--navy-lt) 0%,var(--navy) 46%,var(--navy-dk) 100%);
color:#fff;padding:26px 0 46px;margin-bottom:34px}
.abt-hero .crumbs.light,.abt-hero .crumbs.light a{color:#9FB4CA}
.abt-hero .crumbs.light a:hover{color:#fff}
.abt-eyebrow{display:inline-block;background:rgba(255,255,255,.14);color:#F0B48F;border-radius:999px;
padding:5px 14px;font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.abt-hero h1{margin:16px 0 12px;max-width:17ch;font-size:clamp(1.9rem,4.2vw,2.9rem)}
.abt-hero .lede{color:#CFE0EE;font-size:1.08rem;max-width:62ch}
.abt-hero .actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:22px}
.abt-hero .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.abt-hero .btn.ghost:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}
.abt-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:34px;padding-top:24px;
border-top:1px solid rgba(255,255,255,.18)}
.abt-stats b{display:block;font-size:1.75rem;letter-spacing:-.02em}
.abt-stats span{font-size:.8rem;color:#AFC8DD;line-height:1.35;display:block;margin-top:2px}
@media (max-width:760px){.abt-stats{grid-template-columns:repeat(2,1fr);gap:18px}}
.abt-quote{position:relative;background:var(--card);border:1px solid var(--line);
border-left:4px solid var(--copper);border-radius:var(--radius);padding:26px 30px 26px 34px}
.abt-quote p{margin:0;font-size:1.22rem;line-height:1.5;font-weight:500;color:var(--ink);max-width:62ch}
.abt-quote em{font-style:normal;color:var(--copper-ink);font-weight:700}
.abt-mark{position:absolute;top:2px;right:22px;font-size:5rem;line-height:1;color:var(--copper);
opacity:.14;font-family:Georgia,serif}
@media (max-width:620px){.abt-quote{padding:20px 20px 20px 22px}.abt-quote p{font-size:1.05rem}}
.abt-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.abt-step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.abt-step .n{display:block;font-size:.95rem;font-weight:800;color:var(--copper);letter-spacing:.06em}
.abt-step h3{font-size:1.02rem;margin:8px 0 7px}
.abt-step p{margin:0;font-size:.9rem;color:var(--muted);line-height:1.55}
@media (max-width:920px){.abt-steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.abt-steps{grid-template-columns:1fr}}
.abt-where{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.abt-where h3{font-size:1.05rem;margin:12px 0 6px}
.abt-where .chips{margin:10px 0 0}
.abt-where .chip{font-size:.78rem;padding:4px 11px}
.abt-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
background:var(--copper-pale);color:var(--copper-ink)}
.abt-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
@media (max-width:860px){.abt-where{grid-template-columns:1fr}}
.abt-straight{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:30px;
align-items:start;margin-top:40px;background:var(--card);border:1px solid var(--line);
border-radius:var(--radius);padding:28px 30px}
.abt-straight h2{margin-top:0}
.abt-straight .ticks{margin:0}
.abt-straight .ticks li{margin-bottom:11px}
@media (max-width:860px){.abt-straight{grid-template-columns:1fr;gap:16px;padding:22px}}
/* ---------- development page ---------- */
.dev-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:6px}
/* The home page tiles link straight to a service, so the heading must clear the sticky bar. */
.dev-card{scroll-margin-top:90px}
.dev-card h2{font-size:1.2rem;margin:12px 0 4px}
.dev-tag{font-weight:600;color:var(--copper-ink);margin:0 0 8px}
.dev-card .ticks{margin-top:12px}
.dev-card .ticks li{font-size:.9rem}
@media (max-width:820px){.dev-grid{grid-template-columns:1fr}}
.dev-bands{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:16px}
.dev-band .db-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.dev-band h3{margin:0;font-size:1.15rem}
.db-price{font-weight:800;color:var(--navy);font-size:1rem;text-align:right}
.db-price.ask{color:var(--muted);font-weight:600;font-size:.86rem}
.db-eg{font-size:.84rem;color:var(--copper-ink);background:var(--copper-pale);border-radius:8px;
padding:8px 11px;margin:10px 0 0}
.dev-band .ticks{margin-top:12px}
.dev-band .ticks li{font-size:.88rem}
@media (max-width:900px){.dev-bands{grid-template-columns:1fr}}
.dev-proof{color:inherit;display:block}
.dev-proof:hover{text-decoration:none;border-color:var(--copper)}
.dev-proof h3{font-size:1rem;margin:0 0 6px;color:var(--navy)}
.dev-go{color:var(--copper-ink);font-weight:700}
.dev-others{margin-top:18px;border-color:var(--copper)}
.dev-others h3{margin-top:0}
.dev-band-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
margin-top:26px;background:linear-gradient(135deg,var(--navy) 0%,var(--navy-dk) 100%);
color:#fff;border-radius:var(--radius);padding:24px 28px}
.dev-band-cta:hover{text-decoration:none;color:#fff}
.dev-band-cta h3{color:#fff;margin:10px 0 6px}
.dev-band-cta p{color:#C9D6E5;margin:0;max-width:62ch;font-size:.95rem}
.dev-band-cta .badge{background:rgba(255,255,255,.16);color:#F0B48F}
.dev-band-go{font-weight:800;color:#F0B48F;white-space:nowrap}
/* ---------- free trial ---------- */
.trial-flag{display:inline-block;background:var(--ok);color:#fff;border-radius:999px;padding:4px 12px;
font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.trial-card{border-color:var(--ok);margin-bottom:18px}
.trial-card h3{margin:11px 0 6px;font-size:1.1rem}
.trial-card .field{margin-bottom:9px}
.trial-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;align-items:center;
background:linear-gradient(135deg,var(--navy) 0%,var(--navy-dk) 100%);color:#fff;
border-radius:var(--radius);padding:26px 28px;margin:22px 0 30px}
.trial-band h2{color:#fff;margin:11px 0 8px;font-size:1.5rem}
.trial-band p{color:#C9D6E5;margin:0;max-width:56ch}
.trial-band .ticks li{color:#DCE8F2;font-size:.92rem}
.trial-band .ticks li::before{border-color:#F0B48F}
@media (max-width:820px){.trial-band{grid-template-columns:1fr;gap:16px;padding:20px}}
/* The brochure banner at the top of a software page. The brochure is the strongest
thing we can put in front of someone who is deciding, so it sits above the fold. */
.brotop{margin:18px 0 8px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;
background:linear-gradient(180deg,#FFF9F4,#FFFFFF)}
.brotop-t{display:flex;gap:13px;align-items:flex-start}
.brotop-ic{flex:none;width:38px;height:38px;border-radius:10px;background:var(--copper-pale);
display:grid;place-items:center}
.brotop-ic svg{width:21px;height:21px;fill:none;stroke:var(--copper-ink);stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
.brotop-t b{display:block;font-size:1.02rem}
.brotop-t span{display:block;color:var(--muted);font-size:.9rem;line-height:1.45;margin-top:2px}
.brotop-a{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.brotop-n{margin:10px 0 0;color:var(--muted);font-size:.85rem}
@media (max-width:560px){
.brotop{padding:14px}
.brotop-a .btn{flex:1 1 100%;text-align:center}
}
/* Home page: the city x trade, guide and "more" link blocks. These pages existed but the
home page linked to none of them, so nothing outside the menu pointed at them.
The city block is a CSS-only tab strip: all 40 trade x city links are in the HTML for
search engines, but the visitor sees one city at a time, so the page stays calm. */
.citytabs{border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden}
.citytabs>input{position:absolute;opacity:0;pointer-events:none}
.ct-row{display:flex;flex-wrap:wrap;gap:4px;padding:10px 12px;background:var(--bg);
border-bottom:1px solid var(--line)}
.ct-row label{font-size:.92rem;font-weight:600;color:var(--muted);padding:7px 15px;
border-radius:999px;cursor:pointer;white-space:nowrap}
.ct-row label:hover{background:rgba(0,0,0,.05);color:var(--ink)}
.ct-panel{display:none;padding:16px 16px 14px}
.ct-note{margin:0 0 11px}
.ct-links{display:flex;flex-wrap:wrap;gap:8px}
.ct-links a{font-size:.92rem;font-weight:500;color:var(--ink);background:var(--bg);
border:1px solid var(--line);border-radius:999px;padding:8px 15px}
.ct-links a:hover{text-decoration:none;border-color:var(--copper);color:var(--copper-ink)}
.ct-all{display:inline-block;margin-top:13px;font-size:.9rem;font-weight:600;color:var(--copper-ink)}
#ct-wazirabad:checked ~ .ct-row label[for="ct-wazirabad"]{background:var(--navy);color:#fff}
#ct-wazirabad:checked ~ #cp-wazirabad{display:block}
#ct-gujranwala:checked ~ .ct-row label[for="ct-gujranwala"]{background:var(--navy);color:#fff}
#ct-gujranwala:checked ~ #cp-gujranwala{display:block}
#ct-gujrat:checked ~ .ct-row label[for="ct-gujrat"]{background:var(--navy);color:#fff}
#ct-gujrat:checked ~ #cp-gujrat{display:block}
#ct-sialkot:checked ~ .ct-row label[for="ct-sialkot"]{background:var(--navy);color:#fff}
#ct-sialkot:checked ~ #cp-sialkot{display:block}
#ct-lahore:checked ~ .ct-row label[for="ct-lahore"]{background:var(--navy);color:#fff}
#ct-lahore:checked ~ #cp-lahore{display:block}
.guidegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.guidecard h3{font-size:.98rem;line-height:1.3;margin:0 0 6px}
.guidecard p{margin:0 0 10px;line-height:1.45}
.morelinks{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:30px}
.morelinks a{display:block;border:1px solid var(--line);border-radius:12px;padding:14px 15px;
background:var(--copper-pale)}
.morelinks a:hover{text-decoration:none;border-color:var(--copper)}
.morelinks b{display:block;color:var(--ink)}
.morelinks span{display:block;font-size:.85rem;color:var(--muted);margin-top:2px}
@media(max-width:1000px){
.guidegrid{grid-template-columns:repeat(2,1fr)}
.morelinks{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
.ct-row{padding:8px}
.ct-row label{padding:6px 12px;font-size:.88rem}
.guidegrid,.morelinks{grid-template-columns:1fr}
}
/* "What kind of shop do you have?" - the chooser under the hero. */
.picker{margin-top:26px;padding:20px 20px 18px;border:1px solid var(--line);border-radius:16px;
background:var(--card)}
.pk-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px;
margin-bottom:14px}
.pk-head h2{font-size:1.18rem;margin:0}
.pk-head a{color:var(--copper-ink);font-weight:600}
.pk-links{display:flex;flex-wrap:wrap;gap:9px}
.pk-links a{display:inline-flex;align-items:center;gap:9px;font-size:.94rem;font-weight:600;
color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:999px;
padding:9px 16px 9px 10px}
.pk-links a:hover{text-decoration:none;border-color:var(--copper);color:var(--copper-ink);
background:var(--copper-pale)}
.pk-links .sicon{width:26px;height:26px;border-radius:8px;flex:none}
.pk-links .sicon svg{width:15px;height:15px}
.pk-links a.pk-more{background:var(--navy);border-color:var(--navy);color:#fff;padding:9px 17px}
.pk-links a.pk-more:hover{background:var(--navy-dk);color:#fff}
@media(max-width:560px){
.picker{padding:16px 14px 14px}
.pk-head h2{font-size:1.06rem}
.pk-links a{font-size:.88rem;padding:8px 13px 8px 8px}
}
/* Hero search: the shortest path for a visitor who already knows what they want. */
.herosearch{display:flex;align-items:center;gap:8px;margin-top:16px;max-width:500px;
background:#fff;border-radius:12px;padding:6px 6px 6px 14px}
.herosearch svg{width:19px;height:19px;flex:none;fill:none;stroke:#5C7185;stroke-width:2;
stroke-linecap:round}
.herosearch input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:.98rem;color:var(--ink);
background:transparent;padding:8px 0}
.herosearch input::placeholder{color:#8A9AA8}
.herosearch button{flex:none;border:0;cursor:pointer;font:inherit;font-weight:700;color:#fff;
background:var(--copper);border-radius:9px;padding:11px 20px}
.herosearch button:hover{background:#A94F23}
.hero-wa{margin-top:10px;font-size:.9rem;color:#C9D6E5}
.hero-wa a{color:#fff;font-weight:600;border-bottom:1px solid rgba(255,255,255,.4)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* "What will your counter cost?" - two ways into the same question. */
.costgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.costcard h3{font-size:1.06rem;margin:0 0 6px}
.costcard p{margin:0 0 12px;line-height:1.5}
@media(max-width:760px){.costgrid{grid-template-columns:1fr}}
@media(max-width:560px){
.herosearch{flex-wrap:wrap;padding:10px}
.herosearch input{width:100%;padding:6px 0}
.herosearch button{width:100%}
}
/* ---- Home page: light editorial (6 Oct 2026) --------------------------------------
Chosen from three drawn options. The page used to open with a rotating dark banner;
it now opens white, with one large screen of our own software beside the headline and
the four things we do as equal picture cards underneath.
Light rather than navy on purpose: the brand navy is still the header, the footer and
every picture inside the cards, so the page reads as the same company - but the words
a visitor has to read are black on white, which is the easiest thing to read there is. */
/* Transparent, not white: the page tint runs under the hero. */
.ed{background:transparent;padding-bottom:6px}
.ed-hero{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:44px;align-items:center;
padding-top:46px}
.ed-eyebrow{font-size:.78rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
color:var(--copper-ink)}
.ed-hero h1{margin-top:13px;font-size:clamp(2rem,4.2vw,3.25rem);line-height:1.04;
letter-spacing:-.035em}
.ed-lede{margin-top:16px;font-size:1.04rem;line-height:1.55;color:var(--muted);max-width:30em}
.ed-cta{display:flex;gap:11px;flex-wrap:wrap;margin-top:24px}
.btn.dark{background:#0E1B27;color:#fff;border-color:#0E1B27}
.btn.dark:hover{background:#1B2E40;color:#fff}
.btn.line{background:#fff;color:#0E1B27;border:1px solid var(--line)}
.btn.line:hover{border-color:#9FB0BF;color:#0E1B27}
/* The search box was designed to sit on the old navy banner, where white alone was enough
to separate it. On a white page it needs an edge of its own. */
.ed-hero .herosearch{margin-top:20px;max-width:460px;border:1px solid var(--line);
box-shadow:0 2px 10px rgba(16,37,58,.05)}
.ed-hero .herosearch:focus-within{border-color:#9FB0BF;box-shadow:0 2px 16px rgba(16,37,58,.1)}
.ed-wa{margin-top:10px;font-size:.9rem;color:var(--muted)}
.ed-wa a{color:#0E1B27;font-weight:600;border-bottom:1px solid var(--line)}
/* The screen gets a real frame and a real shadow - floated flat on white it looked like a
stray screenshot rather than the product. */
/* min-width:0 - a grid item defaults to min-width:auto, so the slider's flex track sized
itself to six slides side by side and dragged the whole page sideways below 860px. */
.ed-art{min-width:0;border-radius:20px;overflow:hidden;border:1px solid var(--line);
box-shadow:0 30px 64px rgba(16,37,58,.16);background:#fff;line-height:0}
.ed-art img{width:100%;height:auto;display:block}
/* ---- hero slider (7 Oct 2026) ------------------------------------------------------
A scroll-snap row, not a stack of absolutely positioned slides. That way it swipes on a
phone with no script at all, every slide stays a real link a search engine can follow,
and the browser does the easing. The script only adds the dots and the auto-advance. */
.hslider{position:relative}
.hs-track{display:flex;min-width:0;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
scrollbar-width:none;-ms-overflow-style:none}
.hs-track::-webkit-scrollbar{display:none}
.hs-s{position:relative;flex:0 0 100%;min-width:0;scroll-snap-align:center;display:block;line-height:0;
color:#fff}
.hs-s:hover{text-decoration:none}
.hs-s img{width:100%;height:auto;display:block}
/* The caption sits on a gradient of its own, so a pale screenshot underneath can never
make the words hard to read. */
.hs-cap{position:absolute;left:0;right:0;bottom:0;padding:46px 20px 18px;line-height:1.4;
background:linear-gradient(180deg,transparent,rgba(6,16,26,.62) 38%,rgba(6,16,26,.92) 100%)}
.hs-k{display:block;font-size:.78rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
color:#F0C9A8}
.hs-cap b{display:block;font-size:1.15rem;letter-spacing:-.015em;margin-top:3px}
.hs-cap em{display:block;font-style:normal;font-size:.85rem;color:#D4E2EE;margin-top:3px}
.hs-dots{position:absolute;right:14px;top:14px;display:flex;gap:6px;padding:6px 8px;
border-radius:999px;background:rgba(6,16,26,.42);backdrop-filter:blur(4px)}
.hs-dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
background:rgba(255,255,255,.45);transition:background .2s,transform .2s}
.hs-dots button:hover{background:rgba(255,255,255,.8)}
.hs-dots button.on{background:var(--copper-lt);transform:scale(1.3)}
.hs-dots button:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(max-width:620px){
.hs-cap{padding:38px 14px 14px}
.hs-cap b{font-size:1.02rem}
.hs-cap em{font-size:.8rem}
}
@media (prefers-reduced-motion: reduce){
.hs-track{scroll-behavior:auto}
.hs-dots button{transition:none}
}
.ed-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:46px}
.ed-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;
overflow:hidden;background:#fff;color:var(--ink);box-shadow:0 8px 22px rgba(16,37,58,.06);
transition:box-shadow .2s,transform .2s,border-color .2s}
.ed-card:hover{box-shadow:0 22px 48px rgba(16,37,58,.16);transform:translateY(-4px);
border-color:#C7D2DD;text-decoration:none}
.ed-card:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
/* 16:10 reserved before the picture arrives, so nothing below it jumps on load. */
.ed-shot{display:block;aspect-ratio:16/10;overflow:hidden;background:#0F2238}
.ed-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.ed-card:hover .ed-shot img{transform:scale(1.045)}
.ed-v{display:flex;flex-direction:column;flex:1;padding:15px 16px 17px}
.ed-badge{display:block;font-size:.78rem;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;color:var(--copper)}
.ed-card h2{font-size:1.1rem;line-height:1.2;margin-top:5px;letter-spacing:-.01em}
.ed-text{display:block;margin-top:7px;font-size:.87rem;line-height:1.45;color:var(--muted)}
/* Pushed down so the four links line up however much text each card carries. */
.ed-go{margin-top:auto;padding-top:12px;font-size:.86rem;font-weight:700;color:var(--copper)}
.ed-go b{display:inline-block;transition:transform .2s}
.ed-card:hover .ed-go b{transform:translateX(3px)}
/* The figures, their own quiet strip under the cards. */
.statsband{padding:26px 0 4px}
.statsband .stats{display:flex;gap:28px;flex-wrap:wrap;padding-top:18px;
border-top:1px solid var(--line)}
.statsband .stats b{display:block;font-size:1.3rem;letter-spacing:-.02em}
.statsband .stats span{font-size:.82rem;color:var(--muted)}
@media(max-width:1000px){
.ed-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:860px){
/* The screen goes under the words rather than beside them - side by side it was too
narrow to read anything on. */
.ed-hero{grid-template-columns:1fr;gap:28px;padding-top:30px}
.ed-lede{max-width:none}
.ed-hero .herosearch{max-width:none}
}
@media(max-width:620px){
.ed-cards{gap:10px;margin-top:28px}
.ed-v{padding:11px 12px 13px}
/* Picture and name are enough to choose from on a phone; the selling text waits for the
page it belongs to, so all four cards fit on one screen. */
.ed-text,.ed-badge{display:none}
.ed-card h2{font-size:.98rem;margin-top:0}
.ed-go{padding-top:7px;font-size:.78rem}
.statsband .stats{gap:14px 26px}
.statsband .stats>div{flex:1 1 40%}
.statsband .stats b{font-size:1.1rem}
.statsband .stats span{font-size:.78rem}
}
@media (prefers-reduced-motion: reduce){
.ed-card,.ed-shot img,.ed-go b{transition:none}
.ed-card:hover,.ed-card:hover .ed-shot img,.ed-card:hover .ed-go b{transform:none}
}
/* ---------- software page: one filterable grid of picture cards (Oct 2026) ----------
The old page was four headed sections of text cards; a customer had to scroll past
three trades to reach their own. Now: a search box, type chips, and a grid where each
app has its own banner so the eye can pick it out before reading. */
.apphero{display:flex;gap:28px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;margin:6px 0 22px}
.apphero h1{margin:0 0 8px}
.apphero .lead{margin:0;max-width:62ch;color:var(--muted);font-size:1.05rem;line-height:1.5}
.apphero-k{display:flex;gap:26px;flex:none}
.apphero-k div{text-align:right}
.apphero-k b{display:block;font-size:1.5rem;color:var(--navy);line-height:1.1}
.apphero-k span{font-size:.78rem;color:var(--muted)}
/* The one photo card on the page - see the HTML comment above it in software-index.html
for why it is alone here. */
.flagcard{display:flex;gap:0;align-items:stretch;background:var(--navy);border-radius:16px;
overflow:hidden;margin-bottom:26px;box-shadow:0 14px 30px -14px rgba(18,41,63,.4);transition:transform .15s,box-shadow .15s}
.flagcard:hover{transform:translateY(-2px);box-shadow:0 18px 36px -14px rgba(18,41,63,.5);text-decoration:none}
.flagcard img{width:46%;flex:none;object-fit:cover;display:block;background:var(--navy-dk)}
.flagcard-bd{flex:1;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:30px 36px;color:#fff;min-width:0}
.flagcard-tag{display:inline-block;align-self:flex-start;background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.3);color:var(--copper-lt);font-size:.78rem;font-weight:700;
letter-spacing:.3px;padding:4px 12px;border-radius:999px}
.flagcard-ln{font-size:1.05rem;line-height:1.5;color:#E3ECF5;max-width:52ch}
.flagcard-cta{font-weight:700;color:var(--copper-lt)}
@media (max-width:760px){
.flagcard{flex-direction:column}
.flagcard img{width:100%;max-height:260px;object-position:top}
.flagcard-bd{padding:20px 20px 24px}
}
.appbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:22px}
.appsearch{display:flex;align-items:center;gap:9px;background:#fff;border:1.5px solid var(--line);
border-radius:999px;padding:9px 16px;min-width:292px;flex:1 1 292px;max-width:420px;transition:border-color .15s,box-shadow .15s}
.appsearch:focus-within{border-color:var(--copper);box-shadow:0 0 0 4px rgba(184,90,42,.1)}
.appsearch svg{width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;flex:none}
.appsearch input{border:0;outline:0;font:inherit;font-size:.95rem;background:none;width:100%;color:var(--navy)}
.appchips{display:flex;gap:8px;flex-wrap:wrap}
.appchips .chip{background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:8px 15px;
font:inherit;font-size:.9rem;font-weight:600;color:var(--navy);cursor:pointer;transition:all .15s}
.appchips .chip i{font-style:normal;color:var(--muted);font-weight:600;margin-left:3px;font-size:.82rem}
.appchips .chip:hover{border-color:var(--copper);color:var(--copper)}
.appchips .chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.appchips .chip.on i{color:#9FB6CC}
.appgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(282px,1fr));gap:20px}
.appcard{display:flex;flex-direction:column;background:#fff;border:1.5px solid var(--line);border-radius:18px;
overflow:hidden;color:inherit;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.appcard:hover{text-decoration:none;transform:translateY(-4px);border-color:rgba(184,90,42,.45);
box-shadow:0 14px 34px rgba(16,32,48,.14)}
.appshot{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--navy)}
.appshot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.appcard:hover .appshot img{transform:scale(1.045)}
/* a thin sheen that sweeps across on hover - the only "futuristic" flourish, kept cheap */
.appglow{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;
background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.17) 50%,transparent 62%)}
.appcard:hover .appglow{opacity:1}
.applive{position:absolute;right:10px;bottom:10px;background:rgba(31,168,85,.95);color:#fff;
font-size:.78rem;font-weight:800;letter-spacing:.04em;padding:4px 9px;border-radius:999px}
.appbody{display:flex;flex-direction:column;gap:7px;padding:15px 16px 16px;flex:1}
.appname{font-weight:800;font-size:1.02rem;line-height:1.25;color:var(--navy);letter-spacing:-.01em}
.appcard:hover .appname{color:var(--copper)}
.appsum{font-size:.88rem;line-height:1.45;color:var(--muted);flex:1}
.appfoot{display:flex;align-items:center;gap:7px;margin-top:3px}
.tagx{font-size:.78rem;font-weight:700;padding:3px 9px;border-radius:999px;border:1px solid transparent}
.tagx.bro{background:var(--copper-pale);color:var(--copper-ink);border-color:#F3DFCF}
.tagx.price{background:#EAF4EC;color:#1F7A45;border-color:#CDE6D6}
.tagx.quote{background:#EEF3F8;color:#44617C;border-color:#DCE6EF}
.appgo{margin-left:auto;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
background:#F2F5F8;transition:background .18s,transform .18s}
.appgo svg{width:15px;height:15px;fill:none;stroke:var(--navy);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.appcard:hover .appgo{background:var(--copper);transform:translateX(2px)}
.appcard:hover .appgo svg{stroke:#fff}
.appnone{margin:26px 0;color:var(--muted)}
@media(max-width:620px){
.apphero{gap:16px}
.apphero-k{gap:18px}
.apphero-k div{text-align:left}
.apphero-k b{font-size:1.25rem}
.appsearch{min-width:0;max-width:none}
/* Four stacked chip rows pushed the first card below the fold. One swipeable row
instead - the scrollbar is hidden but the row still scrolls by thumb. */
.appchips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
margin:0 -16px;padding:2px 16px;width:calc(100% + 32px)}
.appchips::-webkit-scrollbar{display:none}
.appchips .chip{flex:none}
/* A full-width banner meant one app per screen and 32 screens of scrolling. On a phone
the banner becomes a thumbnail beside the name, so six apps fit at a glance. */
.appgrid{grid-template-columns:1fr;gap:12px}
.appcard{flex-direction:row;align-items:stretch;border-radius:14px}
.appshot{width:106px;flex:none;aspect-ratio:auto;align-self:stretch}
.applive{right:5px;bottom:5px;font-size:.78rem;padding:3px 6px}
.appbody{padding:12px 13px;gap:5px;min-width:0}
.appname{font-size:.97rem}
.appsum{font-size:.83rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;flex:0 1 auto}
.appfoot{margin-top:6px}
.appgo{width:24px;height:24px}
}
/* ---- licence keys and cover (7 Oct 2026) ----
Cover state is colour-coded in three places - the customer's record, Follow-ups and the
account page - so the colours live here once. */
.cov{display:inline-block;font-weight:700;font-size:.78rem;padding:1px 8px;border-radius:999px}
.cov-active{background:#e7f6ec;color:#176b33}
.cov-soon{background:#fff4e0;color:#8a5a00}
.cov-expired{background:#fdeaea;color:#a11c1c}
.cov-form{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:7px}
.cov-form select,.cov-form input{padding:5px 7px;font-size:.82rem;min-width:0;max-width:140px}
.sys-cov{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.cov-renew{font-weight:700}
.lic-row td{background:var(--tint,#f7f8fa);border-top:0}
.lic-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.lic-form input{flex:1 1 220px;min-width:0}
.lic-have{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.lic-key{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;letter-spacing:.04em;
background:#fff;border:1px solid var(--line);border-radius:7px;padding:3px 9px}
/* ---- page-with-a-sidebar: cart, checkout, account ----
These three carried `grid-template-columns:1fr 330px` as an inline style, which has no
media query to collapse it and - worse - a `1fr` track will not shrink below its own
content, so on a phone the page was 550-800px wide inside a 390px screen. One class,
minmax(0,1fr), and a single breakpoint. */
.sidecol{grid-template-columns:minmax(0,1fr) 330px;gap:26px;align-items:start}
.sidecol > *{min-width:0}
@media(max-width:900px){ .sidecol{grid-template-columns:minmax(0,1fr);gap:20px} }
/* A customer's systems table has six columns; on a phone it scrolls sideways inside its
card rather than widening the whole page. */
.cust-grid > *{min-width:0}
/* ---- proforma quotation (7 Oct 2026) ----
The customer's copy is meant to be printed, so the print rules are as much of this as
the screen rules: no header, no footer, no buttons, black on white. */
.qlines{display:grid;gap:8px}
.qline{display:grid;grid-template-columns:minmax(0,1fr) 70px 110px;gap:8px}
.qdoc{padding:26px}
.qdoc-head{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
border-bottom:2px solid var(--navy);padding-bottom:14px}
.qdoc-head h1{margin:0;font-size:1.5rem;letter-spacing:.02em}
.qdoc-no{margin:2px 0 0;font-weight:700;color:var(--copper)}
.qdoc-co{font-size:.86rem;line-height:1.55;text-align:right}
.qdoc-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:18px 0}
.qdoc-lines{width:100%;border-collapse:collapse;font-size:.92rem}
.qdoc-lines th{text-align:left;background:#f4f6f9;padding:9px 10px;font-size:.78rem;
letter-spacing:.06em;text-transform:uppercase;color:#5b6675}
.qdoc-lines td{padding:9px 10px;border-bottom:1px solid var(--line)}
.qdoc-lines th:last-child,.qdoc-lines td:last-child,
.qdoc-lines th:nth-child(2),.qdoc-lines td:nth-child(2),
.qdoc-lines th:nth-child(3),.qdoc-lines td:nth-child(3){text-align:right;white-space:nowrap}
.qdoc-lines tfoot td{font-weight:800;font-size:1.05rem;border-top:2px solid var(--navy);border-bottom:0}
.qdoc-note{margin-top:16px;font-size:.92rem;white-space:pre-line}
.qdoc-small{margin-top:14px;font-size:.78rem;color:#5b6675}
.qdoc-act{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:18px}
@media(max-width:600px){
.qline{grid-template-columns:minmax(0,1fr);}
.qdoc-co{text-align:left}
.qdoc-meta{grid-template-columns:minmax(0,1fr)}
}
@media print{
body.quotepage .topbar,body.quotepage header.site,body.quotepage footer,
body.quotepage .qdoc-act,body.quotepage .crumbs,body.quotepage .wa-float,
body.quotepage .mbar,body.quotepage .mbar-wa{display:none !important}
body.quotepage{background:#fff}
body.quotepage .qdoc{border:0;box-shadow:none;padding:0}
body.quotepage .wrap{max-width:none;padding:0}
}
.trk-cn{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px;
padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#f7f9fb}
.disp-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:12px;align-items:end}
@media(max-width:700px){ .disp-form{grid-template-columns:minmax(0,1fr)} }
.stk-in{width:86px;padding:6px 8px;text-align:right}
/* Narrow phones: the quotation table and a long link must not widen the page. */
@media(max-width:420px){
.qdoc-lines{font-size:.82rem}
.qdoc-lines th,.qdoc-lines td{padding:7px 5px}
.qdoc{padding:16px}
}
.lic-key{overflow-wrap:anywhere;word-break:break-all}
/* The Urdu link in the top bar. Urdu script, so it needs a little more height than the
Latin labels beside it and must not be squeezed out on a phone. */
.tb-ur{font-size:1rem;line-height:1.1;padding:2px 9px;border-radius:999px;
border:1px solid rgba(255,255,255,.28)}
.tb-ur:hover{border-color:rgba(255,255,255,.6)}
/* ---- dealer strip (home page, above the hero) ----
A quiet pulse rather than a flashing colour: it has to catch the eye of a shop owner
scanning the page without looking like an advertisement on somebody else's site. */
.dealstrip{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
padding:11px 20px;background:var(--navy-dk);color:#DCE9F5;font-size:.92rem;
border-bottom:1px solid rgba(255,255,255,.08)}
.dealstrip b{color:#fff}
.ds-tag{background:var(--copper);color:#fff;font-weight:800;font-size:.78rem;
letter-spacing:.09em;text-transform:uppercase;padding:3px 10px;border-radius:999px;
animation:dspulse 2.4s ease-in-out infinite}
.ds-tx{flex:0 1 auto}
.ds-go{font-weight:800;color:#F0A978;white-space:nowrap}
.dealstrip:hover .ds-go{color:#fff;text-decoration:underline}
@keyframes dspulse{
0%,100%{box-shadow:0 0 0 0 rgba(217,122,69,.55)}
70%{box-shadow:0 0 0 10px rgba(217,122,69,0)}
}
@media(prefers-reduced-motion:reduce){ .ds-tag{animation:none} }
@media(max-width:620px){
.dealstrip{font-size:.85rem;gap:9px;padding:10px 14px}
.ds-tx{flex:1 1 100%;text-align:center}
}
/* ---- software section: every system a tile, grouped by trade (7 Oct 2026) ----
Each section still carries its own --acc/--acc2 inline (set in lib/softshelves.js) - that
colour drives only the section header's dot and count pill now. The tile itself carries
its own --badge (one colour per APP, lib/softshelves.js APP_TINTS), used on its small icon
badge only; the card stays white with navy text, so the page is colourful without
becoming hard to read.
Restyled 21 Oct 2026 from the old full-width coloured picture band to a small rounded
icon badge, to match a reference photo Ali sent of a catalogue of coloured app-icon
cards. */
.tsec{margin-top:38px}
.tsec-h{display:flex;align-items:center;gap:13px}
.tsec-h h2{font-size:1.3rem;margin:0;line-height:1.2}
.tsec-h p{margin:2px 0 0}
.tsec-dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto;
background:linear-gradient(135deg,var(--acc),var(--acc2));
box-shadow:0 0 0 4px color-mix(in srgb, var(--acc) 14%, transparent)}
.tsec-n{margin-left:auto;font-weight:800;font-size:.8rem;letter-spacing:.06em;
padding:4px 11px;border-radius:999px;color:var(--acc);
background:color-mix(in srgb, var(--acc) 10%, #fff);
border:1px solid color-mix(in srgb, var(--acc) 22%, #fff)}
.tilegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));
gap:16px;margin-top:16px}
.tile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;
position:relative;min-width:0;
border:1px solid var(--line);border-radius:15px;padding:18px 16px 17px;
background:#fff;color:inherit;
transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease}
.tile:hover{transform:translateY(-3px);border-color:color-mix(in srgb, var(--badge) 40%, #fff);
box-shadow:0 14px 30px color-mix(in srgb, var(--badge) 16%, transparent)}
/* The icon badge: each app's own colour (--badge), not the section's. A flat tint reads
as a sticker; the soft diagonal gradient and matching shadow give it a little lift.
21 Oct 2026: badge and text both centred on the card, to Ali's instruction - the
left-aligned layout read like a list row, centred reads like the app-icon cards in his
reference photo. */
.tl-badge{width:48px;height:48px;border-radius:13px;flex:0 0 auto;display:grid;place-items:center;
background:linear-gradient(145deg, var(--badge) 0%, color-mix(in srgb, var(--badge) 70%, #000) 100%);
box-shadow:0 5px 12px color-mix(in srgb, var(--badge) 38%, transparent)}
.tl-ic{width:25px;height:25px;fill:none;stroke:#fff;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round}
/* A smaller badge for a denser list (the /brochures cards, 26 Oct 2026) - same colours and
gradient as the /software tile badge, just 36px instead of 48px, with its icon to match. */
.tl-badge.sm{width:36px;height:36px;border-radius:10px}
.tl-badge.sm .tl-ic{width:19px;height:19px}
.bro-head{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.tl-rib{position:absolute;top:13px;right:13px;background:var(--copper-pale);color:var(--copper-ink);
font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
padding:3px 8px;border-radius:999px;border:1px solid #F3DFCF}
.tl-bd{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;min-width:0;width:100%}
.tl-n{font-weight:800;font-size:.98rem;line-height:1.28}
/* 21 Oct 2026: Ali asked for bigger cards so the description is never cut off - no more
clamp/fade here, the card itself just grows to fit (rows in the grid line up to
whichever card in that row is tallest). */
.tl-s{color:var(--muted);font-size:.88rem;line-height:1.5;flex:1;max-width:30em}
.tl-f{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:2px}
.tagx.live{background:#E7F6EC;color:#176B33}
@media(max-width:560px){
.tilegrid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.tile{padding:13px 13px 14px;gap:10px}
.tl-badge{width:40px;height:40px;border-radius:11px}
.tl-ic{width:21px;height:21px}
.tl-n{font-size:.92rem}
.tl-s{font-size:.8rem}
.tsec-h h2{font-size:1.15rem}
}
/* ---------- the review page (/review) ----------
8 Oct 2026. The old page was a form: six boxes, a star DROPDOWN, and a blank textarea.
Every one of those is a reason to close the tab, and the people being asked are
shopkeepers filling it on a phone between customers. Three changes:
- the stars are tappable, with no JavaScript. Radios in reverse DOM order inside a
row-reverse flex row, so `:checked ~ label` paints the stars to its left. Rating
is the one thing everybody answers, so it is the first thing on the page.
- only the name and the words are required. Shop and city are asked for because they
are what make a review believable, not because the form needs them.
- nobody faces a blank box: four starter chips write the first few words for them.
They are