/* ============================================================
zotaki.com — design system (Zotaki v1)
Palette sampled directly from the Zotaki logo gradient:
#1C277F (dark end) -> #343F8C (mid) -> #485396 (light end)
Accent: Amber #F2A81D — the warm complement of the indigo,
used only for CTAs and plan headers so they stand out against
an otherwise monochrome indigo brand.
Type: Bricolage Grotesque (display) · Public Sans (body)
IBM Plex Mono (numbers / receipts)
============================================================ */
:root{
--ink:#1C277F; /* logo dark end — headings, footer */
--ink-soft:#2A3585;
--violet:#343F8C; /* logo mid — buttons, links, tables */
--violet-dark:#232E82;
--magenta:#BA5904; /* bronze — prices, offers, badges */
--saffron:#F2A81D; /* amber accent — CTAs, plan headers */
--emerald:#0E8A5F;
/* logo gradient endpoints — use for brand washes and hero backgrounds */
--grad-a:#1C277F;
--grad-b:#485396;
--brand-grad:linear-gradient(120deg,#1C277F 0%,#343F8C 55%,#485396 100%);
--accent-soft:#FDF3DE;
--paper:#F6F7FC;
--card:#FFFFFF;
--line:#E1E4F1;
--text:#3B3F57;
--muted:#6A6F8D;
--radius:14px;
--maxw:1120px;
--font-display:"Bricolage Grotesque",system-ui,sans-serif;
--font-body:"Public Sans",system-ui,sans-serif;
--font-mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition:none!important}
}
body{
font-family:var(--font-body);
color:var(--text);
background:var(--paper);
line-height:1.65;
font-size:16.5px;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--violet)}
:focus-visible{outline:3px solid var(--saffron);outline-offset:2px;border-radius:4px}
h1,h2,h3{font-family:var(--font-display);color:var(--ink);line-height:1.15;letter-spacing:-0.015em}
h1{font-size:clamp(2rem,4.5vw,3.3rem);font-weight:700}
h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700;margin-bottom:.6rem}
h3{font-size:1.15rem;font-weight:600;margin-bottom:.35rem}
p{margin-bottom:1rem}
strong{color:var(--ink)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
section{padding:72px 0}
section.tight{padding:44px 0}
.lead{font-size:1.12rem;max-width:62ch}
/* Barcode eyebrow — the signature structural device */
.eyebrow{
display:inline-flex;align-items:center;gap:10px;
font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--violet);margin-bottom:14px;
}
.eyebrow::before{
content:"";width:34px;height:14px;flex:none;
background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 7px,transparent 7px 9px,var(--ink) 9px 10px,transparent 10px 13px);
}
/* Header */
header.site{
position:sticky;top:0;z-index:50;background:rgba(250,249,246,.92);
backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;gap:26px;padding:14px 22px;max-width:var(--maxw);margin:0 auto}
.logo{font-family:var(--font-display);font-weight:800;font-size:1.35rem;color:var(--ink);text-decoration:none;letter-spacing:-0.02em}
.logo span{color:var(--saffron)}
.nav nav{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap}
.nav nav a{font-size:.92rem;text-decoration:none;color:var(--text);font-weight:500}
.nav nav a:hover,.nav nav a[aria-current="page"]{color:var(--ink);border-bottom:2px solid var(--saffron)}
.btn{
display:inline-block;background:var(--violet);color:#fff;border:0;cursor:pointer;
font-family:var(--font-body);font-weight:600;font-size:.95rem;
padding:12px 22px;border-radius:999px;text-decoration:none;transition:background .15s;
}
.btn:hover{background:var(--violet-dark);color:#fff;transform:translateY(-2px);box-shadow:0 10px 22px rgba(52,63,140,.28)}
.btn.gold{background:var(--saffron);color:var(--ink)}
.btn.gold:hover{background:#FFBE45}
.btn.ghost{background:transparent;color:var(--violet);border:1.5px solid var(--violet)}
/* Hero */
.hero{padding:76px 0 68px;background:radial-gradient(1100px 500px at 85% -10%,rgba(52,63,140,.10),transparent 60%),linear-gradient(180deg,#FFFFFF 0%,var(--paper) 100%);border-bottom:1px solid var(--line)}
.hero .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--ink),var(--grad-b));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .actions{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap}
.hero .proof{margin-top:26px;font-family:var(--font-mono);font-size:.8rem;color:var(--muted)}
/* Receipt card — hero signature */
.receipt{
background:#fff;border:1px solid var(--line);max-width:340px;margin-left:auto;
font-family:var(--font-mono);font-size:.78rem;color:var(--ink);
box-shadow:0 18px 40px rgba(28,39,127,.12);
padding:22px 20px 30px;position:relative;
}
.receipt::after{
content:"";position:absolute;left:0;right:0;bottom:-1px;height:12px;
background:radial-gradient(circle at 8px -4px,transparent 8px,#fff 8.5px);
background-size:16px 12px;background-repeat:repeat-x;
filter:drop-shadow(0 2px 2px rgba(28,39,127,.06));
}
.receipt h4{font-family:var(--font-mono);text-align:center;letter-spacing:.12em;font-size:.8rem;margin-bottom:2px}
.receipt .sub{text-align:center;color:var(--muted);font-size:.68rem;margin-bottom:12px}
.receipt table{width:100%;border-collapse:collapse}
.receipt td{padding:3px 0;border:0}
.receipt td:last-child{text-align:right}
.receipt .rule{border-top:1px dashed var(--line);margin:10px 0}
.receipt .total td{font-weight:700}
.receipt .bar{
margin:14px auto 0;height:34px;width:78%;
background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 5px,var(--ink) 5px 6px,transparent 6px 8px,var(--ink) 8px 12px,transparent 12px 14px);
}
.receipt .gst{display:inline-block;background:var(--emerald);color:#fff;font-size:.62rem;padding:2px 8px;border-radius:3px;letter-spacing:.08em}
/* Cards & grids */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:20px;margin-top:28px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px}
.card h3{display:flex;align-items:center;gap:9px}
.tick::before{content:"✓";color:var(--emerald);font-weight:800}
/* Stats strip */
.stats{background:linear-gradient(120deg,var(--ink) 0%,var(--violet) 100%);color:#fff;padding:46px 0}
.stats .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:26px;text-align:center}
.stats b{display:block;font-family:var(--font-mono);font-size:2rem;color:var(--saffron)}
.stats span{font-size:.88rem;opacity:.85}
/* Tables (pricing / comparison) */
.tablewrap{overflow-x:auto;margin-top:24px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
table.data{width:100%;border-collapse:collapse;font-size:.93rem;min-width:640px}
table.data th{background:var(--violet);color:#fff;text-align:left;padding:13px 16px;font-weight:600}
table.data td{padding:12px 16px;border-top:1px solid var(--line);vertical-align:top}
table.data tr:nth-child(even) td{background:#F8F9FD}
table.data td.yes{color:var(--emerald);font-weight:700}
table.data td.no{color:#B4462F;font-weight:600}
.price{font-family:var(--font-mono);font-weight:700;color:var(--magenta);white-space:nowrap}
/* FAQ */
details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 22px;margin-bottom:12px}
details summary{cursor:pointer;font-weight:600;color:var(--ink);font-size:1.02rem;list-style:none;position:relative;padding-right:28px}
details summary::after{content:"+";position:absolute;right:0;top:0;font-family:var(--font-mono);color:var(--saffron);font-size:1.2rem}
details[open] summary::after{content:"–"}
details p{margin:12px 0 0}
/* Answer box — citable definition block */
.answer{
background:#fff;border-left:5px solid var(--saffron);
padding:20px 24px;border-radius:0 12px 12px 0;margin:20px 0;
box-shadow:0 2px 10px rgba(28,39,127,.05);
}
/* CTA band */
.cta{background:linear-gradient(120deg,var(--ink) 0%,var(--violet) 60%,var(--grad-b) 100%);color:#fff;text-align:center}
.cta h2{color:#fff}
.cta p{opacity:.92;max-width:60ch;margin:0 auto 22px}
.cta .actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.cta .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.cta .btn.ghost:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}
/* Footer */
footer.site{background:var(--ink);color:#C2C8DF;padding:56px 0 34px;font-size:.9rem}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:34px}
footer h4{color:#fff;font-family:var(--font-display);margin-bottom:12px;font-size:1rem}
footer a{color:#C2C8DF;text-decoration:none;display:block;margin-bottom:8px}
footer a:hover{color:var(--saffron)}
footer .base{border-top:1px solid rgba(255,255,255,.14);margin-top:40px;padding-top:20px;font-size:.8rem;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
/* Breadcrumbs */
.crumbs{font-size:.82rem;color:var(--muted);padding:18px 0 0}
.crumbs a{color:var(--muted)}
/* Page hero (interior pages) */
.pagehead{padding:54px 0 46px;background:#fff;border-bottom:1px solid var(--line)}
/* Changelog */
.log{border-left:2px solid var(--line);padding-left:26px;margin-top:28px}
.log article{position:relative;margin-bottom:34px}
.log article::before{content:"";position:absolute;left:-33px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--saffron);border:2px solid #fff;box-shadow:0 0 0 2px var(--saffron)}
.log time{font-family:var(--font-mono);font-size:.78rem;color:var(--violet);letter-spacing:.06em}
@media (max-width:860px){
.hero .grid{grid-template-columns:1fr}
.receipt{margin:10px auto 0}
footer .cols{grid-template-columns:1fr 1fr}
.nav nav{gap:14px;font-size:.85rem}
section{padding:52px 0}
}
/* ---- Phase 2: forms, WhatsApp float, articles ---- */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:60;width:56px;height:56px;
border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;
box-shadow:0 8px 24px rgba(0,0,0,.28);transition:transform .15s}
.wa-float svg{width:30px;height:30px;fill:#fff}
.wa-float:hover{transform:scale(1.07)}
.form{display:grid;gap:14px;max-width:540px;background:#fff;border:1px solid var(--line);
border-radius:var(--radius);padding:26px}
.form label{display:flex;flex-direction:column;gap:6px;font-weight:600;color:var(--ink);font-size:.9rem}
.form input,.form select,.form textarea{padding:12px 14px;border:1px solid var(--line);
border-radius:10px;font-family:var(--font-body);font-size:1rem;background:var(--paper)}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--saffron);outline:none}
.article{max-width:72ch}
.article h2{margin-top:40px}
.article ul,.article ol{margin:0 0 1rem 1.4rem}
.article li{margin-bottom:.4rem}
.badge{display:inline-block;background:var(--paper);border:1px solid var(--line);border-radius:999px;
padding:4px 14px;font-family:var(--font-mono);font-size:.75rem;color:var(--emerald);margin:0 6px 8px 0}
/* ---- Phase 3: full responsive pass (desktop / laptop / tablet / mobile) ---- */
.menu-t{display:none}
.menu-btn{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;margin-left:6px}
.menu-btn span{width:24px;height:3px;background:var(--ink);border-radius:2px;transition:.2s}
@media (max-width:1024px){
.wrap{padding:0 18px}
h1{font-size:clamp(1.8rem,4.2vw,2.6rem)}
.hero .grid{gap:36px}
}
@media (max-width:860px){
.menu-btn{display:flex}
.nav{flex-wrap:wrap;position:relative}
.nav nav{
display:none;flex-direction:column;gap:0;width:100%;order:5;
border-top:1px solid var(--line);margin-top:10px;padding-top:6px
}
.nav nav a{padding:11px 4px;border-bottom:1px solid var(--line);font-size:1rem}
.nav nav a:hover,.nav nav a[aria-current="page"]{border-bottom:1px solid var(--saffron)}
.menu-t:checked ~ nav{display:flex}
.navcta{margin-left:auto!important;padding:10px 16px;font-size:.85rem}
.stats .row{grid-template-columns:1fr 1fr}
.stats b{font-size:1.5rem}
footer .cols{grid-template-columns:1fr 1fr;gap:24px}
}
@media (max-width:640px){
body{font-size:15.5px}
section{padding:44px 0}
.hero{padding:44px 0}
.receipt{max-width:300px;font-size:.72rem}
.cards{grid-template-columns:1fr}
table.data{font-size:.85rem;min-width:560px}
.form{padding:20px 16px}
.wa-float{width:52px;height:52px;right:14px;bottom:14px}
.cta .btn{width:100%;max-width:340px}
}
@media (max-width:480px){
.logo{font-size:1.2rem}
.navcta{padding:9px 13px;font-size:.8rem}
footer .cols{grid-template-columns:1fr}
.stats .row{grid-template-columns:1fr 1fr;gap:18px}
h1{font-size:1.65rem}
.pagehead{padding:36px 0 30px}
details{padding:14px 16px}
}
/* pricing plan cards */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:26px}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 20px;position:relative}
.plan.hot{border:2px solid var(--saffron)}
.plan .tag{position:absolute;top:-12px;left:20px;background:var(--magenta);color:#fff;font-family:var(--font-mono);font-size:.68rem;padding:3px 10px;border-radius:999px;letter-spacing:.06em}
.plan h3{font-size:1.02rem;letter-spacing:.04em;color:var(--violet)}
.plan .was{color:var(--muted);text-decoration:line-through;font-size:.9rem;font-family:var(--font-mono)}
.plan .now{font-family:var(--font-mono);font-size:1.6rem;font-weight:700;color:var(--magenta)}
.plan .now small{font-size:.7rem;color:var(--muted);font-weight:400}
.plan ul{list-style:none;margin:14px 0 0;padding:0;font-size:.88rem}
.plan li{padding:5px 0;border-top:1px dashed var(--line)}
.offer{background:linear-gradient(100deg,var(--magenta),#E0912E);color:#fff;font-weight:700;text-align:center;padding:12px 16px;border-radius:10px;margin:18px 0;font-size:.95rem;position:relative;overflow:hidden}
/* ================= Phase 4: motion & interactivity ================= */
/* scroll-reveal (elements tagged by site.js; no-JS users unaffected) */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .65s cubic-bezier(.2,.7,.3,1),transform .65s cubic-bezier(.2,.7,.3,1)}
.js .reveal.in{opacity:1;transform:none}
/* card & plan hover lift */
.card,.plan{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card:hover,.plan:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(28,39,127,.12);border-color:#B9C0DE}
.plan.hot:hover{box-shadow:0 18px 38px rgba(186,89,4,.16)}
/* buttons already lift; ghost fill on hover */
.btn{transition:transform .16s ease,box-shadow .2s ease,background .16s ease,color .16s ease}
.btn.ghost:hover{background:var(--violet);color:#fff}
.btn.gold:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(255,176,32,.4)}
/* nav links underline slide */
.nav nav a{position:relative}
@media (min-width:861px){
.nav nav a::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:2px;background:var(--saffron);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.nav nav a:hover::after,.nav nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav nav a:hover,.nav nav a[aria-current="page"]{border-bottom:none;color:var(--violet)}
}
/* sticky header shadow once scrolled */
header.site{transition:box-shadow .25s ease}
header.site.scrolled{box-shadow:0 6px 22px rgba(28,39,127,.10)}
/* hero receipt: gentle float + hover tilt */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.receipt{animation:floaty 6s ease-in-out infinite;transition:transform .3s ease,box-shadow .3s ease}
.receipt:hover{animation-play-state:paused;transform:rotate(-1.2deg) scale(1.02);box-shadow:0 26px 54px rgba(52,63,140,.20)}
/* offer banner shimmer sweep */
.offer::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
animation:shimmer 3.2s ease-in-out infinite}
@keyframes shimmer{0%{left:-60%}55%,100%{left:120%}}
/* FAQ accordion: rotate marker + fade content */
details summary::after{transition:transform .25s ease;transform-origin:center}
details[open] summary::after{content:"+";transform:rotate(45deg)}
details[open] summary ~ *{animation:fadeUp .32s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
details{transition:border-color .2s ease,box-shadow .2s ease}
details:hover{border-color:#B9C0DE}
details[open]{border-color:var(--violet);box-shadow:0 6px 18px rgba(52,63,140,.08)}
/* table row hover */
table.data tbody td{transition:background .15s ease}
table.data tbody tr:hover td{background:#EFF1F9!important}
/* WhatsApp pulse ring */
.wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;background:#25D366;opacity:.5;z-index:-1;animation:ping 2.6s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.5}75%,100%{transform:scale(1.65);opacity:0}}
.wa-float{transition:transform .18s ease,box-shadow .2s ease}
.wa-float:hover{transform:scale(1.1);box-shadow:0 12px 28px rgba(37,211,102,.45)}
/* back-to-top */
#toTop{position:fixed;right:20px;bottom:88px;z-index:59;width:44px;height:44px;border-radius:50%;
background:var(--ink);color:#fff;border:0;cursor:pointer;font-size:1.1rem;
opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .25s ease,transform .25s ease,background .2s ease}
#toTop.show{opacity:1;pointer-events:auto;transform:none}
#toTop:hover{background:var(--violet)}
@media (max-width:640px){#toTop{right:14px;bottom:78px;width:40px;height:40px}}
/* stat number pop */
.stats b{transition:transform .3s ease}
.stats .row>div:hover b{transform:scale(1.08)}
/* barcode eyebrow draws in on reveal */
.js .reveal .eyebrow::before,.js .reveal.eyebrow::before{transform:scaleX(0);transform-origin:left;transition:transform .7s ease .25s}
.js .reveal.in .eyebrow::before,.js .reveal.in.eyebrow::before{transform:scaleX(1)}
/* menu button morph to X */
.menu-t:checked ~ .menu-btn span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu-t:checked ~ .menu-btn span:nth-child(2){opacity:0}
.menu-t:checked ~ .menu-btn span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.menu-btn span{transition:transform .22s ease,opacity .18s ease}
/* mobile menu slide-down */
@media (max-width:860px){
.nav nav{overflow:hidden}
.menu-t:checked ~ nav{animation:menuDown .28s ease both}
@keyframes menuDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
}
/* ============ Phase 5: pricing tabs (Online / Offline / e-Comm Connect) ============ */
.ptabs{position:relative}
.ptabs>input{position:absolute;opacity:0;pointer-events:none}
.tabbar{display:flex;background:var(--ink);border-radius:999px;padding:6px;gap:6px;max-width:600px;margin:6px 0 4px}
.tabbar label{flex:1;text-align:center;color:#C6CBE4;padding:11px 10px;border-radius:999px;cursor:pointer;font-weight:600;font-size:.92rem;transition:background .2s ease,color .2s ease;white-space:nowrap}
.tabbar label:hover{color:#fff}
#t-on:checked~.tabbar label[for="t-on"],
#t-off:checked~.tabbar label[for="t-off"],
#t-ec:checked~.tabbar label[for="t-ec"]{background:#fff;color:var(--ink)}
.durbar{display:inline-flex;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:5px;gap:5px;margin:20px 0 4px}
.durbar label{padding:9px 26px;border-radius:999px;cursor:pointer;font-weight:700;font-size:.9rem;color:var(--muted);transition:background .2s ease,color .2s ease}
#d-on-1:checked~.pon label[for="d-on-1"],#d-on-10:checked~.pon label[for="d-on-10"],
#d-off-1:checked~.poff label[for="d-off-1"],#d-off-10:checked~.poff label[for="d-off-10"]{background:var(--saffron);color:var(--ink)}
.panel{display:none}
#t-on:checked~.pon,#t-off:checked~.poff,#t-ec:checked~.pec{display:block;animation:fadeUp .35s ease both}
.pon .plans,.poff .plans{display:none}
#d-on-1:checked~.pon .plans.d1,#d-on-10:checked~.pon .plans.d10,
#d-off-1:checked~.poff .plans.d1,#d-off-10:checked~.poff .plans.d10{display:grid;animation:fadeUp .35s ease both}
/* plan card headers like live site */
.plan{padding-top:0;overflow:visible}
.phead{margin:0 -20px 16px;padding:12px 10px;text-align:center;font-family:var(--font-display);font-weight:800;letter-spacing:.06em;font-size:1rem;background:linear-gradient(100deg,#F2A81D,#FFC85A);color:var(--ink);border-radius:12px 12px 0 0}
.phead.pink{background:linear-gradient(100deg,var(--magenta),#E0912E);color:#fff}
.phead.violet{background:linear-gradient(100deg,var(--violet),#485396);color:#fff}
.off-badge{position:absolute;top:44px;right:12px;background:var(--magenta);color:#fff;border-radius:50%;width:46px;height:46px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.58rem;font-weight:700;line-height:1.15;text-align:center;box-shadow:0 4px 10px rgba(186,89,4,.35);transform:rotate(8deg)}
.renew{display:inline-block;background:#EBEEF8;color:var(--violet);font-family:var(--font-mono);font-size:.72rem;padding:6px 10px;border-radius:8px;margin-top:12px;line-height:1.4}
.plan .body{padding:0 0 4px}
@media (max-width:640px){
.tabbar{max-width:100%}
.tabbar label{font-size:.78rem;padding:10px 6px}
.durbar label{padding:8px 18px}
}
.plan{padding:0 20px 22px}
.plan .tag{top:-12px}
/* ============ Phase 6: imagery & illustrations ============ */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center;margin-top:30px}
.split .ill{width:100%;height:auto}
.ill{filter:drop-shadow(0 20px 34px rgba(28,39,127,.13))}
.heroart{position:relative}
.heroart>.ill{width:100%;height:auto}
.heroart .receipt{position:absolute;left:-16px;bottom:-14px;transform-origin:bottom left;animation:floatyS 6s ease-in-out infinite}
@keyframes floatyS{0%,100%{transform:scale(.56) translateY(0)}50%{transform:scale(.56) translateY(-14px)}}
.heroart .receipt:hover{animation-play-state:paused;transform:scale(.58) rotate(-1.2deg)}
@media (max-width:860px){
.heroart .receipt{position:static;margin:14px auto 0;animation:floaty 6s ease-in-out infinite}
}
.cico{width:54px;height:54px;border-radius:15px;background:#EBEEF8;display:flex;align-items:center;justify-content:center;margin-bottom:12px;transition:transform .25s ease,background .25s ease}
.cico img{width:32px;height:32px}
.card:hover .cico{transform:scale(1.1) rotate(-4deg);background:#DCE1F0}
.iemoji{font-size:2.1rem;line-height:1;margin-bottom:10px}
.devgrid .card{text-align:center}
.devgrid img{height:88px;margin:0 auto 12px}
.avatar{width:46px;height:46px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-family:var(--font-display);font-size:1rem;margin-bottom:12px}
img.cover{width:100%;height:auto;border-radius:10px;margin-bottom:14px;display:block}
.pagehead .split{margin-top:10px}
@media (max-width:860px){
.split{grid-template-columns:1fr;gap:28px}
.heroart .receipt{position:static;margin:14px auto 0;max-width:300px;font-size:.72rem}
}
/* ============ Phase 7: eCommerce showcase ============ */
.subnav{position:sticky;top:77px;z-index:45;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:10px 0;box-shadow:0 4px 14px rgba(28,39,127,.05)}
.subnav .wrap{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none}
.subnav a{flex:none;font-size:.85rem;font-weight:700;text-decoration:none;color:var(--violet);border:1.5px solid #D7DCEE;border-radius:999px;padding:8px 16px;background:#F1F3FA;transition:.2s;white-space:nowrap}
.subnav a:hover{background:var(--violet);border-color:var(--violet);color:#fff}
[id]{scroll-margin-top:130px}
.pfil{position:relative}
.pfil>input{position:absolute;opacity:0;pointer-events:none}
.filbar{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 6px}
.filbar label{cursor:pointer;font-weight:700;font-size:.86rem;border:1.5px solid #D7DCEE;border-radius:999px;padding:8px 18px;background:#EBEEF8;transition:.2s;color:var(--ink)}
.filbar label:hover{background:var(--violet);border-color:var(--violet);color:#fff}
#pf-all:checked~.filbar label[for="pf-all"],#pf-sup:checked~.filbar label[for="pf-sup"],
#pf-app:checked~.filbar label[for="pf-app"],#pf-foo:checked~.filbar label[for="pf-foo"],
#pf-per:checked~.filbar label[for="pf-per"],#pf-toy:checked~.filbar label[for="pf-toy"],
#pf-pla:checked~.filbar label[for="pf-pla"]{background:var(--ink);color:#fff;border-color:var(--ink)}
#pf-sup:checked~.pgrid .pcard:not(.c-sup),#pf-app:checked~.pgrid .pcard:not(.c-app),
#pf-foo:checked~.pgrid .pcard:not(.c-foo),#pf-per:checked~.pgrid .pcard:not(.c-per),
#pf-toy:checked~.pgrid .pcard:not(.c-toy),#pf-pla:checked~.pgrid .pcard:not(.c-pla){display:none}
.pgrid{display:grid;gap:18px;margin-top:22px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.pcard:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(28,39,127,.13)}
.pcard .thumb{height:110px;display:flex;align-items:center;justify-content:center;font-size:2.6rem;position:relative}
.pcard .thumb::after{content:"";position:absolute;left:14px;right:14px;bottom:10px;height:7px;border-radius:4px;background:rgba(255,255,255,.5)}
.pcard .pbody{padding:14px 16px 16px}
.pcard h3{font-size:.98rem;margin-bottom:2px}
.pcard p{font-size:.8rem;color:var(--muted);margin-bottom:10px}
.pcard .visit{font-family:var(--font-mono);font-size:.75rem;font-weight:700;color:var(--violet);text-decoration:none}
.pcard .visit:hover{color:var(--magenta)}
.appcard{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px}
.appcard .ai{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.7rem;flex:none}
.storechip{display:inline-block;background:var(--ink);color:#fff;font-family:var(--font-mono);font-size:.66rem;padding:6px 12px;border-radius:8px;letter-spacing:.04em}
@media (max-width:860px){.subnav{top:67px}}
/* ============ Phase 8: clients page ============ */
.statebar{position:sticky;top:77px;z-index:40;background:rgba(250,249,254,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:10px 0}
.statebar .wrap{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.statebar a{flex:none;font-size:.8rem;font-weight:700;text-decoration:none;color:var(--ink);border:1.5px solid var(--line);border-radius:999px;padding:7px 14px;background:#fff;transition:.2s;font-family:var(--font-mono)}
.statebar a:hover{border-color:var(--violet);color:var(--violet)}
.statehead{display:flex;align-items:center;gap:14px;margin:54px 0 6px}
.statehead .snum{font-family:var(--font-mono);font-weight:700;font-size:.8rem;background:var(--ink);color:var(--saffron);border-radius:10px;padding:8px 12px}
.statehead h2{margin:0}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:16px;margin-top:18px}
.ccard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;text-align:center;position:relative;transition:transform .25s ease,box-shadow .25s ease}
.ccard:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(28,39,127,.12)}
.clogo{width:74px;height:74px;border-radius:18px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:1.35rem;color:#fff}
.ccard img.clogo{object-fit:contain;background:#fff;border:1px solid var(--line)}
.ccard h3{font-size:.95rem;margin-bottom:3px}
.ctype{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;color:var(--magenta);text-transform:uppercase;display:block;margin-bottom:5px}
.cloc{font-size:.78rem;color:var(--muted);margin-bottom:10px}
.outbadge{display:inline-block;font-family:var(--font-mono);font-size:.66rem;font-weight:700;background:#EBEEF8;color:var(--violet);border-radius:999px;padding:4px 12px}
.outbadge.multi{background:var(--saffron);color:var(--ink)}
.statecta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;background:linear-gradient(100deg,#EBEEF8,#FEF7EA);border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin-top:20px}
.statecta p{margin:0;font-weight:600;color:var(--ink)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-top:22px}
.gtile{aspect-ratio:4/3;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-family:var(--font-mono);font-size:.7rem;color:var(--ink);background:linear-gradient(135deg,#EBEEF8,#DCE1F0);border:1.5px dashed #B4BCDB;text-align:center;padding:10px}
.gtile span{font-size:2rem}
.gtile img,.gtile video{width:100%;height:100%;object-fit:cover;border-radius:12px}
.vidgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-top:22px}
.vidcard{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.vidcard .vph{aspect-ratio:16/9;background:linear-gradient(120deg,var(--ink),var(--violet));display:flex;align-items:center;justify-content:center;color:#fff;flex-direction:column;gap:8px;font-family:var(--font-mono);font-size:.72rem}
.vidcard .vph .play{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:1.4rem;border:2px solid #fff}
.vidcard iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.vidcard .vmeta{padding:12px 16px}
@media (max-width:860px){.statebar{top:67px}}
/* ============ Phase 9: reviews page ============ */
.stars{color:var(--saffron);letter-spacing:2px;font-size:.95rem}
.srcchip{display:inline-block;font-family:var(--font-mono);font-size:.64rem;font-weight:700;border:1px solid var(--line);border-radius:999px;padding:3px 10px;color:var(--muted);margin-left:8px;vertical-align:2px}
.igtile{aspect-ratio:4/5;border-radius:16px;padding:3px;background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF,#515BD4)}
.igtile>div{width:100%;height:100%;border-radius:13px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-family:var(--font-mono);font-size:.68rem;color:var(--ink);text-align:center;padding:12px}
.igtile img{width:100%;height:100%;object-fit:cover;border-radius:13px}
.igtile span{font-size:1.9rem}
.watile{aspect-ratio:4/5;border-radius:16px;border:1.5px dashed #25D366;background:#E9FBF0 url('data:image/svg+xml;utf8,');display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-family:var(--font-mono);font-size:.68rem;color:#0B5C36;text-align:center;padding:12px}
.watile img{width:100%;height:100%;object-fit:cover;border-radius:14px}
.watile span{font-size:1.9rem}
.wabubble{background:#DCF8C6;border-radius:12px 12px 12px 2px;padding:12px 14px;font-size:.86rem;color:#1B2B20;max-width:420px;box-shadow:0 2px 6px rgba(0,0,0,.06);margin-top:14px}
.wabubble small{display:block;text-align:right;color:#7A8B7F;font-size:.66rem;margin-top:6px}
.revgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-top:22px}
/* ============ Phase 10: demo videos ============ */
.langwrap{position:relative}
.langwrap>input{position:absolute;opacity:0;pointer-events:none}
.langbar{display:inline-flex;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:5px;gap:5px;margin:18px 0 4px}
.langbar label{padding:12px 36px;border-radius:999px;cursor:pointer;font-weight:800;font-size:1.05rem;color:var(--muted);transition:.2s}
#lang-hi:checked~.langbar label[for="lang-hi"],#lang-en:checked~.langbar label[for="lang-en"]{background:var(--saffron);color:var(--ink)}
#lang-hi:checked~.vsections .v-en{display:none}
#lang-en:checked~.vsections .v-hi{display:none}
.langchip{position:absolute;top:10px;right:10px;z-index:2;font-family:var(--font-mono);font-size:.62rem;font-weight:700;background:#fff;color:var(--ink);border-radius:999px;padding:4px 10px;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.vidcard{position:relative}
.vcount{font-family:var(--font-mono);font-size:.88rem;color:var(--muted);margin-left:12px}
.ticklist{list-style:none;padding:0;margin:10px 0 0}
.ticklist li{padding-left:26px;position:relative;margin-bottom:7px;font-size:.92rem}
.ticklist li::before{content:"✓";position:absolute;left:0;color:var(--emerald);font-weight:700}
.featgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;margin-top:22px}
.featgrid .pcard .thumb{height:150px;background:#EBEEF8;overflow:hidden}
.featgrid .pcard .thumb img{width:100%;height:100%;object-fit:cover}
#bf-all:checked~.filbar label[for="bf-all"],#bf-gar:checked~.filbar label[for="bf-gar"],
#bf-sup:checked~.filbar label[for="bf-sup"],#bf-bil:checked~.filbar label[for="bf-bil"],
#bf-gst:checked~.filbar label[for="bf-gst"],#bf-cmp:checked~.filbar label[for="bf-cmp"],
#bf-gui:checked~.filbar label[for="bf-gui"]{background:var(--ink);color:#fff;border-color:var(--ink)}
#bf-gar:checked~.pgrid .pcard:not(.c-gar),#bf-sup:checked~.pgrid .pcard:not(.c-sup),
#bf-bil:checked~.pgrid .pcard:not(.c-bil),#bf-gst:checked~.pgrid .pcard:not(.c-gst),
#bf-cmp:checked~.pgrid .pcard:not(.c-cmp),#bf-gui:checked~.pgrid .pcard:not(.c-gui){display:none}
/* ===== Mobile plan-picker for comparison tables (no horizontal scrolling) ===== */
.planpick{display:none;gap:8px;flex-wrap:wrap;margin:14px 0 10px}
.planpick button{font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.03em;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}
.planpick button[aria-pressed="true"]{background:var(--violet);border-color:var(--violet);color:#fff}
@media (max-width:719px){
.planpick{display:flex}
.tablewrap.pick{overflow-x:hidden}
.tablewrap.pick table.data{min-width:0;width:100%}
.tablewrap.pick th,.tablewrap.pick td{display:none}
.tablewrap.pick th:first-child,.tablewrap.pick td:first-child{display:table-cell;width:62%}
.tablewrap.pick[data-col="1"] th:nth-child(2),.tablewrap.pick[data-col="1"] td:nth-child(2),
.tablewrap.pick[data-col="2"] th:nth-child(3),.tablewrap.pick[data-col="2"] td:nth-child(3),
.tablewrap.pick[data-col="3"] th:nth-child(4),.tablewrap.pick[data-col="3"] td:nth-child(4),
.tablewrap.pick[data-col="4"] th:nth-child(5),.tablewrap.pick[data-col="4"] td:nth-child(5),
.tablewrap.pick[data-col="5"] th:nth-child(6),.tablewrap.pick[data-col="5"] td:nth-child(6){display:table-cell;text-align:right}
}
/* ===== Add-on cards with images (pricing digest + addons page) ===== */
.addon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:20px;margin-top:24px}
.addon{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.addon:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(28,39,127,.12);border-color:#B9C0DE}
.addon img{width:100%;aspect-ratio:16/10;object-fit:contain;display:block;background:linear-gradient(135deg,#F1F3FA,#FDF3DE);padding:6px}
.addon .pad{padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.addon h3{font-size:.98rem;margin:0}
.addon .aprice{font-family:var(--font-mono);font-weight:700;color:var(--magenta);font-size:.95rem}
.addon .aprice .was{color:var(--muted);text-decoration:line-through;font-weight:400;font-size:.8rem;margin-right:6px}
.addon .anote{font-size:.82rem;color:var(--muted);margin:0}
.addon .free{display:inline-block;background:#E8F7EF;color:var(--emerald,#0B7A4B);font-family:var(--font-mono);font-size:.68rem;font-weight:700;border-radius:999px;padding:3px 9px;margin-top:auto;align-self:flex-start}
/* ===== Compact hardware strip on pricing page ===== */
.hwstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-top:22px}
.hwstrip .hw{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 14px;text-align:center}
.hwstrip .hw b{display:block;font-size:.88rem;margin-bottom:4px}
.hwstrip .hw .price{font-size:.85rem}
a.storechip{color:#fff;text-decoration:none}
a.storechip:hover{background:var(--violet);color:#fff}
a.visit[target]{cursor:pointer}
/* ===== Footer contact with call / WhatsApp icons ===== */
.fcontact{font-family:var(--font-mono);font-size:.8rem;display:flex;flex-direction:column;gap:7px;margin-top:10px}
.fcontact a{display:inline-flex;align-items:center;gap:8px;color:inherit}
.fcontact svg{width:15px;height:15px;flex:none}
/* ===== Contact page: hero grid with registration form ===== */
.cgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:start}
.formcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;box-shadow:0 18px 40px rgba(28,39,127,.10)}
.formcard .form{display:flex;flex-direction:column;gap:14px;background:none;border:0;padding:0;max-width:none;box-shadow:none}
.phonewrap{display:flex;align-items:stretch;margin-top:6px}
.phonewrap .cc{display:flex;align-items:center;gap:4px;padding:0 12px;border:1px solid var(--line);border-right:0;border-radius:10px 0 0 10px;background:#F2F4FA;font-family:var(--font-mono);font-size:.85rem;white-space:nowrap}
.phonewrap input{border-radius:0 10px 10px 0!important;flex:1;margin-top:0!important}
.offices-lg .card h3{font-size:1.35rem}
.offices-lg .card p{font-size:.98rem;line-height:1.75}
.offices-lg .ctype{font-size:.78rem}
@media (max-width:900px){.cgrid{grid-template-columns:1fr}}
/* footer base links in one row */
footer .base a{display:inline;margin-bottom:0}
/* ===== About page: explore-the-ecosystem button row ===== */
.explore-btns{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:28px;padding:20px 22px;background:#F2F4FA;border:1px solid var(--line);border-radius:var(--radius)}
.explore-label{font-family:var(--font-mono);font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);flex-basis:100%}
.explore-btns .btn{font-size:.88rem;padding:10px 18px}
@media (max-width:600px){.explore-btns .btn{flex:1 1 calc(50% - 12px);text-align:center}}
/* ===== Clients page: India/Overseas toggle + state navigation + logo card walls ===== */
.regionswitch{display:flex;gap:12px;margin-bottom:14px}
.regionswitch label{cursor:pointer;font-family:var(--font-display);font-weight:800;font-size:1rem;padding:12px 30px;border-radius:999px;border:2px solid var(--violet);background:#fff;color:var(--violet);transition:.2s;flex:none}
.regionswitch label:hover{background:#EBEEF8}
#r-india:checked ~ .statebar label[for="r-india"],
#r-overseas:checked ~ .statebar label[for="r-overseas"]{background:var(--violet);color:#fff;box-shadow:0 8px 18px rgba(52,63,140,.28)}
.statebar{position:static;background:#fff;border-bottom:1px solid var(--line);padding:18px 0 16px}
.stateselect-wrap{display:none}
.stateselect{width:100%;padding:15px 16px;border:2px solid var(--violet);border-radius:12px;background:#fff;color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:1.15rem;appearance:auto}
.stateselect option{font-size:1.15rem;padding:8px}
.stategrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:9px}
.stategrid a{font-size:.84rem;font-weight:700;text-decoration:none;color:var(--ink);background:#EBEEF8;border:1.5px solid transparent;border-radius:999px;padding:9px 12px;transition:.2s;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stategrid a:hover{background:var(--violet);color:#fff}
#r-overseas:checked ~ .statebar .stategrid,
#r-overseas:checked ~ .statebar .stateselect-wrap{display:none}
#r-overseas:checked ~ #india-view{display:none}
#r-india:checked ~ #overseas-view{display:none}
/* logo card walls: each image is a designed client card (logo + outlet info), keep it large & readable */
.logowall{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;margin-top:22px}
.logowall .lcard{display:block;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#fff;transition:transform .25s ease,box-shadow .25s ease}
.logowall .lcard:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(28,39,127,.16)}
.logowall .lcard img{display:block;width:100%;height:auto;aspect-ratio:500/733;object-fit:cover}
.logoslot{width:100%;aspect-ratio:500/733;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:800;color:#C6CBE4;font-size:.9rem;background:#fff;border:1px dashed var(--line);border-radius:16px}
@media (max-width:900px){
.stategrid{display:none}
.stateselect-wrap{display:block}
#r-overseas:checked ~ .statebar .stateselect-wrap{display:none}
.regionswitch label{flex:1;text-align:center;padding:12px 10px}
.logowall{grid-template-columns:repeat(2,1fr);gap:12px}
}
@media (min-width:901px) and (max-width:1100px){.logowall{grid-template-columns:repeat(3,1fr)}}
/* ===== Demo videos: sticky Jump-to-topic bar (scales with topic count, mobile friendly) ===== */
.topicjump{position:sticky;top:78px;z-index:40;background:#fff;border-bottom:1px solid var(--line);padding:12px 0;box-shadow:0 6px 18px rgba(28,39,127,.06)}
.topicjump .wrap{display:flex;align-items:center;gap:14px}
.tj-label{font-family:var(--font-display);font-weight:800;font-size:1rem;color:var(--ink);white-space:nowrap}
.tj-select{flex:1;max-width:420px;padding:12px 16px;border:2px solid var(--violet);border-radius:12px;background:#fff;color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:1.05rem;cursor:pointer}
.tj-select option{font-size:1.05rem}
@media (max-width:860px){
.topicjump{top:58px}
.topicjump .wrap{flex-direction:column;align-items:stretch;gap:8px}
.tj-select{max-width:none}
}
/* demo videos: topics that exist in one language only */
#lang-en:checked~.vsections .only-hi{display:none}
#lang-hi:checked~.vsections .only-en{display:none}
/* lite youtube embeds */
.ytlite{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;cursor:pointer;background:#000;overflow:hidden}
.ytlite img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92;transition:opacity .2s,transform .3s}
.ytlite:hover img{opacity:1;transform:scale(1.03)}
.ytplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:rgba(186,89,4,.92);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.3rem;pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.ytlite:hover .ytplay{background:var(--magenta)}
.vidcard iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
/* ============ FAQ page tweaks: hide hero on mobile + bold accordion toggles ============ */
@media (max-width:860px){
.faq-head h1,.faq-head .lead{display:none}
.faq-head{padding-bottom:10px}
}
details summary{padding-right:52px;min-height:36px;display:flex;align-items:center}
details summary::after{
content:"+";width:36px;height:36px;line-height:36px;text-align:center;
background:var(--saffron);color:var(--ink);font-weight:700;font-size:1.45rem;
border-radius:50%;box-shadow:0 3px 10px rgba(255,176,32,.45);
top:50%;transform:translateY(-50%);transition:transform .25s ease,box-shadow .2s ease;
}
details summary:hover::after{box-shadow:0 4px 14px rgba(255,176,32,.65)}
details[open] summary::after{content:"+";transform:translateY(-50%) rotate(45deg)}
@media (max-width:640px){
details summary::after{width:32px;height:32px;line-height:32px;font-size:1.3rem}
details summary{padding-right:46px}
}
/* ============ Fix: center card headings inside centered cards (h3 is flex, so text-align alone doesn't center it) ============ */
.card[style*="text-align:center"] h3{justify-content:center;text-align:center}
.card[style*="text-align:center"] ul,.card[style*="text-align:center"] .ticklist{text-align:left}
/* ============ Phase 19: hardware page redesign ============ */
.hw-cat{margin-top:48px}
.hw-cat:first-child{margin-top:8px}
.hw-cathead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;border-bottom:2px solid var(--line);padding-bottom:12px;margin-bottom:22px}
.hw-cathead h2{margin:0}
.hw-count{font-family:var(--font-mono);font-size:.72rem;font-weight:700;color:var(--violet);background:#EBEEF8;border-radius:999px;padding:5px 12px;white-space:nowrap}
.hwgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.hwcard{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease}
.hwcard.hw-clickable{cursor:pointer}
.hwcard.hw-clickable:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(28,39,127,.13);border-color:var(--violet)}
.hw-thumb{position:relative;aspect-ratio:4/3;background:linear-gradient(135deg,#fafafa,#eef0f8);display:flex;align-items:center;justify-content:center;padding:14px}
.hw-thumb img{max-width:100%;max-height:100%;object-fit:contain}
.hw-zoom{position:absolute;bottom:8px;right:8px;font-family:var(--font-mono);font-size:.62rem;font-weight:700;background:rgba(28,39,127,.86);color:#fff;border-radius:999px;padding:4px 10px;opacity:0;transition:opacity .2s}
.hwcard:hover .hw-zoom{opacity:1}
.hw-body{padding:14px 16px;display:flex;flex-direction:column;gap:4px;flex:1}
.hw-body h3{font-size:.98rem;margin:0}
.hw-spec{font-size:.82rem;color:var(--muted);margin:0;flex:1}
.hw-body .price{font-size:1.05rem;font-weight:700;color:var(--ink);margin:6px 0 0}
.hw-body .price.ask{font-size:.88rem;font-weight:600;color:var(--violet)}
/* list view */
.hwgrid.list{grid-template-columns:1fr;gap:10px}
.hwgrid.list .hwcard{flex-direction:row;align-items:center}
.hwgrid.list .hw-thumb{width:120px;flex:none;aspect-ratio:1;padding:10px}
.hwgrid.list .hw-body{flex-direction:row;align-items:center;gap:18px;width:100%}
.hwgrid.list .hw-body h3{flex:0 0 210px}
.hwgrid.list .hw-spec{flex:1}
.hwgrid.list .hw-body .price{margin:0;flex:0 0 130px;text-align:right}
.hwgrid.list .hw-zoom{opacity:1}
/* view toggle */
.hw-viewtoggle{display:inline-flex;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;background:#fff}
.hw-viewtoggle button{border:0;background:none;padding:7px 16px;font-weight:700;font-size:.82rem;color:var(--muted);cursor:pointer;font-family:var(--font-mono)}
.hw-viewtoggle button.active{background:var(--saffron);color:var(--ink)}
/* lightbox */
.hw-lightbox{position:fixed;inset:0;z-index:1000;background:rgba(20,12,45,.86);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:24px}
.hw-lightbox[hidden]{display:none}
.hw-lightbox figure{margin:0;max-width:920px;max-height:90vh;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5);display:flex;flex-direction:column}
.hw-lightbox img{max-width:100%;max-height:80vh;object-fit:contain;display:block}
.hw-lightbox figcaption{font-family:var(--font-mono);font-weight:700;text-align:center;padding:12px;color:var(--ink);border-top:1px solid var(--line)}
.hw-lb-close{position:fixed;top:20px;right:24px;z-index:1001;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:var(--ink);font-size:1.2rem;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.3)}
@media (max-width:640px){
.hwgrid.list .hw-body{flex-direction:column;align-items:flex-start;gap:2px}
.hwgrid.list .hw-body h3,.hwgrid.list .hw-body .price{flex:none;text-align:left}
.hw-cathead{flex-direction:column;align-items:flex-start;gap:8px}
}
/* ============ Phase 20b: hardware readability + tags ============ */
.hw-spec{font-size:.95rem !important;line-height:1.45}
.hw-body .price small{font-size:.72rem;font-weight:600;color:var(--muted);white-space:nowrap}
.hw-tag{position:absolute;top:8px;left:8px;z-index:2;font-family:var(--font-mono);font-size:.6rem;font-weight:700;letter-spacing:.02em;background:var(--saffron);color:var(--ink);border-radius:999px;padding:4px 10px;box-shadow:0 2px 8px rgba(255,176,32,.5)}
@media (max-width:640px){.hw-spec{font-size:.9rem !important}}
/* ============ Phase 21: changelog timeline ============ */
.cl-wrap>input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
.cl-filbar{margin-bottom:10px}
.cl-yhead{font-family:var(--font-display);color:var(--ink);margin:38px 0 4px;font-size:1.6rem}
.cl-year:first-of-type .cl-yhead{margin-top:20px}
.cl-tag{display:inline-block;font-family:var(--font-mono);font-size:.6rem;font-weight:700;letter-spacing:.04em;border-radius:999px;padding:3px 9px;margin-left:10px;vertical-align:2px}
.cl-feature{background:#EBEEF8;color:var(--violet)}
.cl-integration{background:#E7F5EF;color:var(--emerald)}
.cl-compliance,.cl-GST{background:#FDF0C8;color:#9a6a00}
.cl-improve{background:#EBEEF8;color:#343F8C}
.cl-launch{background:#FBEBCE;color:var(--magenta)}
.log h3{margin:6px 0 4px;font-size:1.05rem}
/* year filtering */
#cl-2017:checked~.cl-year:not([data-year="2017"]),#cl-2018:checked~.cl-year:not([data-year="2018"]),
#cl-2019:checked~.cl-year:not([data-year="2019"]),#cl-2020:checked~.cl-year:not([data-year="2020"]),
#cl-2021:checked~.cl-year:not([data-year="2021"]),#cl-2022:checked~.cl-year:not([data-year="2022"]),
#cl-2023:checked~.cl-year:not([data-year="2023"]),#cl-2024:checked~.cl-year:not([data-year="2024"]),
#cl-2025:checked~.cl-year:not([data-year="2025"]),#cl-2026:checked~.cl-year:not([data-year="2026"]){display:none}
#cl-2017:checked~.cl-filbar label[for="cl-2017"],#cl-2018:checked~.cl-filbar label[for="cl-2018"],
#cl-2019:checked~.cl-filbar label[for="cl-2019"],#cl-2020:checked~.cl-filbar label[for="cl-2020"],
#cl-2021:checked~.cl-filbar label[for="cl-2021"],#cl-2022:checked~.cl-filbar label[for="cl-2022"],
#cl-2023:checked~.cl-filbar label[for="cl-2023"],#cl-2024:checked~.cl-filbar label[for="cl-2024"],
#cl-2025:checked~.cl-filbar label[for="cl-2025"],#cl-2026:checked~.cl-filbar label[for="cl-2026"],
#cl-all:checked~.cl-filbar label[for="cl-all"]{background:var(--ink);color:#fff;border-color:var(--ink)}
/* ============ hardware subnav row — mobile alignment ============ */
.hw-subnav-row{display:flex;gap:8px;align-items:center;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.hw-subnav-row::-webkit-scrollbar{display:none}
.hw-subnav-row .hw-viewtoggle{margin-left:auto;flex:none}
@media (max-width:640px){
.hw-subnav-row{flex-wrap:wrap;overflow:visible}
.hw-subnav-row a{flex:none}
.hw-subnav-row .hw-viewtoggle{margin-left:0;width:100%;justify-content:center;margin-top:4px}
.hw-subnav-row .hw-viewtoggle button{flex:1}
}
.hw-viewtoggle{border-color:#D7DCEE}
.hw-viewtoggle button{color:var(--violet)}
.hw-viewtoggle button.active{background:var(--violet);color:#fff}
/* ============ ecommerce sector icon scroller ============ */
.sect-scroller{margin-top:26px;overflow-x:auto;scrollbar-width:thin;padding-bottom:12px;-webkit-overflow-scrolling:touch}
.sect-track{display:flex;gap:14px;min-width:min-content}
.sect-tile{flex:none;width:132px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s}
.sect-tile:hover{transform:translateY(-5px);box-shadow:0 14px 30px rgba(28,39,127,.13);border-color:var(--violet)}
.sect-ico{width:70px;height:70px;display:flex;align-items:center;justify-content:center;font-size:2rem}
.sect-ico img{width:70px;height:70px;object-fit:contain}
.sect-tile span{font-size:.86rem;font-weight:700;color:var(--ink);line-height:1.25}
.sect-more{background:linear-gradient(135deg,#F1F3FA,#FDF3DE);border-style:dashed}
.sect-more .sect-ico{color:var(--violet)}
@media (max-width:640px){.sect-tile{width:118px;padding:16px 10px}.sect-ico,.sect-ico img{width:60px;height:60px}}
/* ============ ecommerce website cards — real screenshots (470x356 → 4:3) ============ */
.pcard .thumb-img{height:150px;aspect-ratio:auto;padding:0;overflow:hidden;background:#eef0f8}
.pcard .thumb-img::after{display:none}
.pcard .thumb-img img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
/* ============ ecommerce PRO badge + screenshot placeholder ============ */
.pcard .thumb-img{position:relative}
.pro-badge{position:absolute;top:0;right:0;z-index:2;background:var(--magenta);color:#fff;font-family:var(--font-mono);font-weight:800;font-size:.72rem;letter-spacing:.04em;padding:8px 14px;border-bottom-left-radius:14px;box-shadow:0 3px 10px rgba(186,89,4,.4)}
.thumb-ph{display:flex;align-items:center;justify-content:center;text-align:center;background:linear-gradient(135deg,#F1F3FA,#FDF3DE);border-bottom:1px dashed #B4BCDB}
.thumb-ph span{font-family:var(--font-mono);font-size:.8rem;font-weight:700;color:var(--violet)}
.thumb-ph small{font-size:.66rem;font-weight:400;color:var(--muted)}
/* ============ ecommerce Android app cards (real screenshots) ============ */
.appgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;margin-top:22px}
.appcard-img{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.appcard-img:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(28,39,127,.13)}
.appcard-img .thumb-img{aspect-ratio:370/400;overflow:hidden;background:#eef0f8}
.appcard-img .thumb-img img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.appcard-img .pbody{padding:14px 16px 16px}
.appcard-img h3{font-size:.98rem;margin-bottom:2px}
.appcard-img p{font-size:.8rem;color:var(--muted);margin-bottom:10px}
.appcard-img .storechip{display:inline-block;font-family:var(--font-mono);font-size:.72rem;font-weight:700;color:#fff;background:var(--ink);border-radius:999px;padding:7px 14px;text-decoration:none}
.appcard-img .storechip:hover{background:var(--violet)}
/* ============ eCommerce plans: force all 5 cards in one row on desktop/laptop ============ */
@media (min-width:901px){
.ecom-plans{grid-template-columns:repeat(5,1fr) !important}
.ecom-plans .plan{min-width:0;padding:0 22px 26px}
/* header band — larger, bolder */
.ecom-plans .phead{font-size:.92rem;padding:15px 12px;letter-spacing:.05em;margin:0 -22px 20px}
/* price — big and confident */
.ecom-plans .was{font-size:1rem}
.ecom-plans .now{font-size:1.85rem;font-weight:800}
.ecom-plans .now small{font-size:.72rem;font-weight:500}
/* feature list — readable, more air, darker text */
.ecom-plans ul{font-size:.95rem;margin-top:18px}
.ecom-plans li{padding:11px 0;color:var(--ink);font-weight:500}
/* renew chip — bigger */
.ecom-plans .renew{font-size:.8rem;padding:10px 14px;margin-top:16px;line-height:1.55}
}
@media (min-width:1200px){
.ecom-plans .phead{font-size:1rem}
.ecom-plans .now{font-size:2rem}
.ecom-plans ul{font-size:1rem}
.ecom-plans li{padding:12px 0}
}
/* ============ eCommerce plans: widen section to reduce side gaps (scoped) ============ */
@media (min-width:1200px){
#plans .wrap{max-width:1320px}
}
/* ============ eCommerce plan cards — redesigned (v63) ============ */
/* Price block: centered, big struck price, price, GST on its own centered line */
.ecom-plans .pprice,.pricing-plans .pprice{text-align:center;margin:10px 0 4px}
.ecom-plans .pprice .was,.pricing-plans .pprice .was{display:block;color:var(--muted);text-decoration:line-through;font-family:var(--font-mono);font-size:1.15rem;margin-bottom:2px}
.ecom-plans .pprice .now,.pricing-plans .pprice .now{display:block;font-family:var(--font-mono);font-weight:800;color:var(--magenta);font-size:2.15rem;line-height:1.1}
.ecom-plans .pprice .gst,.pricing-plans .pprice .gst{display:block;font-family:var(--font-mono);font-size:.78rem;font-weight:600;color:var(--muted);margin-top:4px}
@media (max-width:1199px){.ecom-plans .pprice .now,.pricing-plans .pprice .now{font-size:1.9rem}.ecom-plans .pprice .was,.pricing-plans .pprice .was{font-size:1.05rem}}
/* Pro Theme — blinking highlight on the word "Pro" */
.ecom-plans .pro-theme{font-weight:700}
.ecom-plans .pro-word{color:var(--magenta);font-weight:800;animation:proBlink 1.1s ease-in-out infinite}
@keyframes proBlink{0%,100%{opacity:1;color:var(--magenta)}50%{opacity:.55;color:var(--violet)}}
@media (prefers-reduced-motion:reduce){.ecom-plans .pro-word{animation:none}}
/* Razorpay icon inline */
.ecom-plans .rzp-ic{display:inline-block;width:18px;height:18px;vertical-align:-4px;margin-right:2px}
/* POPULAR tag — brighter, higher-contrast, on Plus-PRO */
.ecom-plans .plan .tag{background:linear-gradient(100deg,#0E8A5F,#12A06B);color:#fff;font-weight:800;font-size:.72rem;padding:5px 16px;box-shadow:0 4px 12px rgba(14,138,95,.5);letter-spacing:.08em;top:-13px;left:50%;transform:translateX(-50%);z-index:3}
/* Renew card — pill design matching reference */
.ecom-plans .renew2,.pricing-plans .renew2{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.ecom-plans .renew-top,.pricing-plans .renew-top{font-family:var(--font-display);font-weight:800;color:var(--ink);font-size:1.02rem}
.ecom-plans .renew-pill,.pricing-plans .renew-pill{background:#5A64A4;color:#fff;font-family:var(--font-mono);font-weight:800;font-size:1.15rem;padding:9px 18px;border-radius:12px;box-shadow:0 4px 12px rgba(139,123,240,.4)}
.ecom-plans .renew-pill small,.pricing-plans .renew-pill small{font-size:.72rem;font-weight:600;margin-left:2px}
.ecom-plans .renew-bot,.pricing-plans .renew-bot{font-family:var(--font-display);font-weight:700;color:var(--ink);font-size:.92rem}
.ecom-plans .renew-bot sup,.pricing-plans .renew-bot sup{font-size:.62em}
/* ============ eCommerce comparison table — enlarged & redesigned (v64) ============ */
.ecom-table{font-size:1.02rem}
.ecom-table th{font-size:1.02rem;padding:16px 18px}
.ecom-table td{padding:15px 18px;font-size:1rem}
.ecom-table td:first-child:not(.yes):not(.no){font-weight:600;color:var(--ink)}
/* bigger ticks & crosses */
.ecom-table .yes,.ecom-table td.yes{color:var(--emerald);font-weight:800;font-size:1.5rem;line-height:1}
.ecom-table .no,.ecom-table td.no{color:#D6403B;font-weight:800;font-size:1.5rem;line-height:1}
/* blinking Pro in the theme row */
.ecom-table .pro-theme2 .pro-word{color:var(--magenta);font-weight:800;animation:proBlink 1.1s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.ecom-table .pro-theme2 .pro-word{animation:none}}
/* Add-ons heading — centered & enlarged */
.ecom-table .addon-head{text-align:center;background:linear-gradient(100deg,#EBEEF8,#FBEBCE);font-family:var(--font-display);font-weight:800;font-size:1.6rem;color:var(--ink);padding:20px;letter-spacing:.01em}
.ecom-table .addon-head span{font-family:var(--font-mono);font-weight:500;font-size:.82rem;color:var(--muted)}
/* add-on prices — NOT pink, dark ink instead */
.ecom-table .aprice{display:block;font-family:var(--font-mono);font-weight:700;color:var(--ink);font-size:1.02rem}
.ecom-table .afor{display:block;font-size:.86rem;color:var(--muted);margin-top:2px}
.ecom-table .arenew{display:block;font-size:.85rem;color:var(--violet);margin-top:6px;line-height:1.35;font-weight:500}
/* CTA row */
.ecom-table .cta-row td{background:#F6F7FC;padding:16px 18px;text-align:left;vertical-align:middle}
.ecom-table .tbtn{display:inline-block;font-family:var(--font-mono);font-weight:700;font-size:.82rem;color:#fff;background:var(--violet);border-radius:999px;padding:9px 16px;text-decoration:none;transition:.2s;line-height:1.3}
.ecom-table .tbtn:hover{background:var(--ink)}
.ecom-table .tbtn-hot{background:linear-gradient(100deg,var(--magenta),#E0912E);box-shadow:0 6px 18px rgba(186,89,4,.4);font-size:.88rem;padding:11px 18px;animation:hotPulse 1.6s ease-in-out infinite}
@keyframes hotPulse{0%,100%{box-shadow:0 6px 18px rgba(186,89,4,.4)}50%{box-shadow:0 6px 26px rgba(186,89,4,.7)}}
@media (prefers-reduced-motion:reduce){.ecom-table .tbtn-hot{animation:none}}
.ecom-table .same-note{font-size:.9rem;color:#000;font-weight:600;font-style:italic;line-height:1.35;display:inline-block}
/* emphasize the Ecomm Silver column a touch */
/* ============ ecommerce: wide sections, 4-up cards, selling CTA, sector marquee (v66) ============ */
@media (min-width:1200px){
.wide-wrap{max-width:1320px}
}
/* website cards: exactly 4 per row on desktop, bigger */
@media (min-width:981px){
.pgrid-4{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:641px) and (max-width:980px){
.pgrid-4{grid-template-columns:repeat(2,1fr)}
}
.pgrid-4 .pcard .thumb-img{height:190px}
/* "Already selling" CTA — enlarged + highlighted button */
.sell-cta{margin-top:36px;background:linear-gradient(120deg,#F1F3FA,#FDF3DE);border:1px solid var(--line);border-radius:18px;padding:30px 32px;text-align:center}
.sell-lead{font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--ink);margin:0 0 8px}
.sell-body{font-size:1.08rem;color:var(--ink);max-width:820px;margin:0 auto 20px;line-height:1.6}
.sell-body b{color:var(--magenta)}
.btn-ecomm{display:inline-block;font-family:var(--font-display);font-weight:800;font-size:1.15rem;color:#fff;background:linear-gradient(100deg,var(--violet),var(--magenta));border-radius:999px;padding:16px 36px;text-decoration:none;box-shadow:0 10px 26px rgba(52,63,140,.35);transition:transform .2s ease,box-shadow .2s ease}
.btn-ecomm:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(186,89,4,.45)}
/* Sector auto-scroll marquee */
.sect-scroller{overflow:hidden}
.sect-marquee{width:max-content;animation:sectScroll 42s linear infinite}
.sect-marquee:hover{animation-play-state:paused}
@keyframes sectScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.sect-marquee{animation:none}.sect-scroller{overflow-x:auto}}
/* ============ ecommerce app cards: 4-per-row like website cards + heading highlights (v67) ============ */
@media (min-width:981px){
.appgrid{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:641px) and (max-width:980px){
.appgrid{grid-template-columns:repeat(2,1fr)}
}
/* bigger app screenshots so cards match website card scale */
.appcard-img .thumb-img{aspect-ratio:370/430}
.appcard-img h3{font-size:1.05rem}
.appcard-img .storechip{font-size:.78rem;padding:8px 15px}
/* highlighted word (Android / iOS) */
.hl-word{color:var(--magenta);font-weight:800}
/* iOS section heading — enlarged, highlighted */
.ios-head{margin-top:46px;font-size:1.9rem}
.ios-head .ios-sub{font-size:1.15rem;font-weight:700;color:var(--muted);font-family:var(--font-display)}
@media (max-width:640px){.ios-head{font-size:1.5rem}.ios-head .ios-sub{display:block;font-size:1rem;margin-top:2px}}
/* ============ addons: stacked GST / period lines (v68) ============ */
.addon .aprice small{display:inline-block}
.addon .aprice .gst-line{display:block;font-size:.78rem;font-weight:600;color:var(--muted);margin-top:2px}
.addon .aprice .yr-line{display:block;font-size:.72rem;font-weight:500;color:var(--violet);margin-top:1px}
/* ============ addons: single-outlet note (v69) ============ */
.addon-note{background:#EBEEF8;border:1px solid #D7DCEE;border-radius:12px;padding:12px 18px;font-size:.95rem;color:var(--ink);font-weight:500;margin:0 0 22px}
.addon-note a{color:var(--violet);font-weight:700}
/* ============ Billing feature page — full layout (v70) ============ */
/* Hero grid */
.bl-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.bl-hero-card img{width:100%;height:auto;aspect-ratio:16/9!important;object-fit:cover;border-radius:20px;box-shadow:0 24px 60px rgba(28,39,127,.22);border:1px solid var(--line);display:block}
.bl-hero-grid{align-items:start}
.bl-hero .badge{background:#EBEEF8;color:var(--violet);border:none;font-weight:600}
/* section head */
.bl-head{max-width:720px;margin-bottom:30px}
.bl-head h2{margin:0}
/* rounded image + content splits (alternating) */
.bl-split{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center;margin-top:30px}
.bl-split:first-of-type{margin-top:0}
.bl-reverse{direction:rtl}
.bl-reverse>*{direction:ltr}
.bl-media img{width:100%;border-radius:18px;box-shadow:0 16px 40px rgba(28,39,127,.14);border:1px solid var(--line);background:#EFF1F9;display:block}
.bl-content h2,.bl-content h3{margin:0 0 8px}
.bl-content h3{font-size:1.35rem}
.bl-content>p{color:var(--muted);font-size:1rem;margin:0 0 12px}
.bl-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.bl-list li{position:relative;padding-left:28px;font-size:.96rem;color:var(--ink);font-weight:500}
.bl-list li::before{content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;line-height:20px;text-align:center;background:var(--emerald,#0E8A5F);color:#fff;border-radius:50%;font-size:.72rem;font-weight:800}
/* glance cards */
.bl-glance{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bl-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s}
.bl-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(28,39,127,.12);border-color:var(--violet)}
.bl-tag{display:inline-block;font-family:var(--font-mono);font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--violet);background:#EBEEF8;border-radius:999px;padding:4px 11px;margin-bottom:10px}
.bl-card h3{margin:0 0 6px;font-size:1.12rem}
.bl-card p{margin:0;font-size:.9rem;color:var(--muted)}
/* why-choose 3-up */
.bl-why3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bl-why3 .bl-card h3{font-size:1.15rem}
/* CTA band */
.bl-band{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:linear-gradient(120deg,var(--ink),var(--violet));color:#fff;border-radius:18px;padding:26px 30px;margin-top:34px}
.bl-band h3{margin:0 0 4px;color:#fff;font-size:1.3rem}
.bl-band p{margin:0;opacity:.9}
.bl-band .actions{margin:0;display:flex;gap:12px;flex-wrap:wrap}
.bl-band .btn.ghost{border-color:rgba(255,255,255,.6);color:#fff}
.bl-band .btn.ghost:hover{background:rgba(255,255,255,.15)}
/* FAQ */
.bl-faq{display:flex;flex-direction:column;gap:12px;max-width:860px;margin-left:auto;margin-right:auto}
/* responsive */
@media (max-width:900px){
.bl-hero-grid{grid-template-columns:1fr;gap:26px}
.bl-split{grid-template-columns:1fr;gap:20px}
.bl-reverse{direction:ltr}
.bl-media{order:-1}
.bl-glance,.bl-why3{grid-template-columns:1fr}
.bl-band{flex-direction:column;align-items:flex-start}
}
@media (min-width:641px) and (max-width:900px){
.bl-glance,.bl-why3{grid-template-columns:repeat(2,1fr)}
}
/* ============ feature hero square (1:1) variant (v73) ============ */
.bl-hero-square{max-width:520px;margin-left:auto}
.bl-hero-square img{aspect-ratio:1/1!important;object-fit:cover}
@media (max-width:900px){.bl-hero-square{max-width:100%;margin:0}}
/* ============ feature hero 9:16 (portrait) variant (v74) ============ */
.bl-hero-916{max-width:340px;margin-left:auto}
.bl-hero-916 img{aspect-ratio:9/16!important;object-fit:cover;width:100%}
@media (max-width:900px){.bl-hero-916{max-width:280px;margin:0 auto}}
/* ============ index2 homepage redesign (v75) ============ */
.ix-hero{padding:70px 0 60px;background:radial-gradient(1100px 520px at 82% -12%,rgba(52,63,140,.12),transparent 60%),radial-gradient(800px 400px at 10% 110%,rgba(186,89,4,.08),transparent 60%),linear-gradient(180deg,#fff,var(--paper));border-bottom:1px solid var(--line)}
.ix-hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:center}
.ix-hero-copy h1{font-size:2.9rem;line-height:1.08;margin:12px 0 0}
.ix-hero-copy h1 em{color:var(--violet);font-style:normal}
.ix-hero-copy .lead{margin-top:18px}
.ix-hero .actions{margin-top:24px}
.ix-hero-badges{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px}
.ix-hero-badges span{font-family:var(--font-mono);font-size:.78rem;font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 14px}
.ix-hero-art img{width:100%;height:auto}
/* stats */
.ix-stats{background:linear-gradient(120deg,var(--ink),var(--violet));color:#fff;padding:38px 0}
.ix-stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.ix-stats b{display:block;font-family:var(--font-display);font-size:2.1rem;line-height:1}
.ix-stats span{font-size:.86rem;opacity:.9;margin-top:6px;display:block}
/* section head */
.ix-head{max-width:760px;margin:0 auto 34px;text-align:center}
.ix-head h2{margin:6px 0 10px}
.ix-head .lead{margin:0 auto}
/* feature grid */
.ix-fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ix-fcard{display:block;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 24px;text-decoration:none;color:inherit;transition:transform .2s ease,box-shadow .2s ease,border-color .2s}
.ix-fcard:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(28,39,127,.13);border-color:var(--violet)}
.ix-fico{width:52px;height:52px;border-radius:12px;background:#EBEEF8;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.ix-fcard h3{margin:0 0 8px;font-size:1.15rem}
.ix-fcard p{margin:0 0 12px;color:var(--muted);font-size:.95rem}
.ix-flink{font-family:var(--font-mono);font-size:.8rem;font-weight:700;color:var(--violet)}
/* sectors strip */
.ix-sectors{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.ix-sector{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px;background:#fff;border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--ink);font-size:.82rem;font-weight:600;transition:transform .2s,border-color .2s}
.ix-sector:hover{transform:translateY(-4px);border-color:var(--violet)}
.ix-sector img{width:56px;height:56px;object-fit:contain}
/* ecommerce highlight */
.ix-ecom{background:linear-gradient(120deg,#F1F3FA,#FDF3DE)}
.ix-ecom-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.ix-stores{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ix-store{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s}
.ix-store:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(28,39,127,.14)}
.ix-store-img{aspect-ratio:4/3;overflow:hidden;background:#eef0f8}
.ix-store-img img{width:100%;height:100%;object-fit:cover;object-position:top center}
.ix-store-b{padding:9px 11px}
.ix-store-b b{display:block;font-size:.82rem}
.ix-store-b span{font-size:.72rem;color:var(--muted)}
/* integrations */
.ix-integ{text-align:center}
.ix-chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.ix-chip{font-family:var(--font-mono);font-weight:700;font-size:.9rem;color:var(--violet);background:#F1F3FA;border:1px solid #D7DCEE;border-radius:999px;padding:12px 22px;text-decoration:none;transition:.2s}
.ix-chip:hover{background:var(--violet);color:#fff;border-color:var(--violet)}
/* reviews */
.ix-reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ix-review{margin:0;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px}
.ix-review p{margin:0 0 16px;font-size:1rem;line-height:1.55;color:var(--ink)}
.ix-review figcaption b{display:block;font-size:.92rem}
.ix-review figcaption span{font-size:.8rem;color:var(--muted)}
/* responsive */
@media (max-width:980px){
.ix-hero-grid,.ix-ecom-grid{grid-template-columns:1fr;gap:30px}
.ix-fgrid,.ix-reviews{grid-template-columns:1fr 1fr}
.ix-sectors{grid-template-columns:repeat(4,1fr)}
.ix-stores{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:640px){
.ix-hero-copy h1{font-size:2.1rem}
.ix-stats .wrap{grid-template-columns:repeat(2,1fr);gap:24px}
.ix-fgrid,.ix-reviews{grid-template-columns:1fr}
.ix-sectors{grid-template-columns:repeat(3,1fr)}
.ix-stores{grid-template-columns:repeat(2,1fr)}
}
/* ============ index2: banner, logo marquee, video reviews (v76) ============ */
/* banner */
.ix-banner{padding:24px 0}
.ix-banner img{width:100%;height:auto;border-radius:18px;box-shadow:0 18px 44px rgba(28,39,127,.16);border:1px solid var(--line);display:block}
/* logo marquee */
.ix-logostrip{overflow:hidden;margin-top:24px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ix-logotrack{display:flex;gap:20px;width:max-content;animation:ixLogoScroll 60s linear infinite}
.ix-logostrip:hover .ix-logotrack{animation-play-state:paused}
.ix-logo{flex:none;width:130px;height:130px;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.ix-logo img{width:100%;height:100%;object-fit:contain;padding:8px}
.ix-logo{background:#fff}
@keyframes ixLogoScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ix-logotrack{animation:none}.ix-logostrip{overflow-x:auto}}
/* video reviews */
.ix-videos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ix-vcard{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.ix-vthumb{position:relative;display:block;width:100%;border:none;padding:0;cursor:pointer;background:#000;aspect-ratio:16/9;overflow:hidden}
.ix-vthumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.ix-vthumb:hover img{transform:scale(1.05)}
.ix-play{position:absolute;inset:0;margin:auto;width:60px;height:60px;background:rgba(186,89,4,.92);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.ix-vcard iframe{border:none;display:block}
.ix-vmeta{padding:14px 16px}
.ix-vmeta b{display:block;font-size:.95rem}
.ix-vmeta span{font-size:.82rem;color:var(--muted)}
@media (max-width:980px){.ix-videos{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.ix-videos{grid-template-columns:1fr}.ix-logo{width:100px;height:100px}}
/* ============ index2: integration logo tiles (v77) ============ */
.ix-ilogos{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:1200px;margin:0 auto}
.ix-ilogo{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:18px;height:130px;padding:26px;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,border-color .2s;position:relative}
.ix-ilogo:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(28,39,127,.12);border-color:var(--violet)}
.ix-ilogo img{max-width:100%;max-height:74px;object-fit:contain}
.ix-ilogo-fallback{display:none;font-family:var(--font-mono);font-weight:700;font-size:.72rem;color:var(--ink);text-align:center}
@media (max-width:980px){.ix-ilogos{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.ix-ilogos{grid-template-columns:repeat(2,1fr)}.ix-ilogo{height:104px;padding:18px}}
/* ============ index2: ecosystem band + built-for tiles + bigger integrations (v80) ============ */
.ix-ecosys{background:var(--brand-grad);color:#fff;text-align:center;padding:64px 0}
.ix-ecosys h2{color:#fff;font-size:2.2rem;line-height:1.18;max-width:900px;margin:6px auto 0}
.ix-ecosys h2 span{color:var(--saffron)}
@media (max-width:640px){.ix-ecosys h2{font-size:1.6rem}}
/* built-for big bold tiles */
.ix-bfor-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.ix-bfor{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:34px 16px;text-align:center;transition:transform .2s ease,box-shadow .2s ease,border-color .2s,background .2s}
.ix-bfor:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(28,39,127,.16);border-color:var(--violet);background:linear-gradient(160deg,#fff,#F1F3FA)}
.ix-bfor-ic{width:52px;height:52px;color:var(--violet);display:flex;align-items:center;justify-content:center}
.ix-bfor-ic svg{width:52px;height:52px}
.ix-bfor:hover .ix-bfor-ic{color:var(--magenta)}
.ix-bfor b{font-family:var(--font-display);font-size:1.5rem;font-weight:800;color:var(--ink);letter-spacing:-.01em}
@media (max-width:980px){.ix-bfor-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.ix-bfor-grid{grid-template-columns:repeat(2,1fr)}.ix-bfor b{font-size:1.25rem}.ix-bfor{padding:26px 12px}}
/* ============ pricing.html — same visual treatment as ecommerce plans (v82) ============ */
/* widen the whole pricing tab area (plans + comparison tables) to reduce side gaps */
@media (min-width:1200px){
.pricing-wide{max-width:1320px}
}
/* 5 plan cards in one row on desktop/laptop */
@media (min-width:901px){
.pricing-plans{grid-template-columns:repeat(5,1fr) !important}
.pricing-plans .plan{min-width:0;padding:0 22px 26px}
/* enlarged header band */
.pricing-plans .phead{font-size:.92rem;padding:15px 12px;letter-spacing:.05em;margin:0 -22px 20px}
/* big confident price */
.pricing-plans .was{font-size:1rem}
.pricing-plans .now{font-size:1.85rem;font-weight:800}
.pricing-plans .now small{font-size:.72rem;font-weight:500}
/* readable feature list */
.pricing-plans ul{font-size:.95rem;margin-top:18px}
.pricing-plans li{padding:11px 0;color:var(--ink);font-weight:500}
/* renew line */
.pricing-plans .renew{font-size:.8rem;padding:10px 14px;margin-top:16px;line-height:1.55;display:block}
}
@media (min-width:1200px){
.pricing-plans .phead{font-size:1rem}
.pricing-plans .now{font-size:2rem}
.pricing-plans ul{font-size:1rem}
.pricing-plans li{padding:12px 0}
}
/* enlarged comparison tables */
.pricing-wide table.data{font-size:1.02rem}
.pricing-wide table.data th{font-size:1.02rem;padding:16px 18px}
.pricing-wide table.data td{padding:15px 18px;font-size:1rem}
.pricing-wide table.data td:first-child{font-weight:600;color:var(--ink)}
.pricing-wide table.data td.yes{font-size:1.5rem}
.pricing-wide table.data td.no{font-size:1.5rem}
/* pricing: ensure old .renew box styling doesn't fight the new pill card */
.pricing-plans .renew2{background:none;border:none}
.pricing-plans .off-badge{top:6px;right:6px}
/* ============ pricing: plan icons, sender id, comparison heading (v84) ============ */
.pico{width:18px;height:18px;vertical-align:-3px;margin-right:7px;color:var(--violet);display:inline-block}
.pricing-plans li{display:flex;align-items:flex-start;gap:2px}
.pricing-plans li .pico{flex:none;margin-top:2px}
.sender-id{display:block;font-size:.76rem;color:var(--muted);font-family:var(--font-mono);margin-top:3px}
.cmp-head{text-align:center;font-size:2rem;margin:46px auto 26px;max-width:900px}
@media (max-width:640px){.cmp-head{font-size:1.45rem}}
/* ============ pricing comparison: two-line row labels (v85) ============ */
.ecom-table .rlabel{display:block;font-weight:600;color:var(--ink)}
.ecom-table .rsub{display:block;font-size:.78rem;font-weight:400;color:var(--muted);margin-top:2px;line-height:1.3}
/* ============ pricing: BEST SELLER badge + equal card heights (v86) ============ */
/* green "BEST SELLER" badge, centered on the card top */
.pricing-plans .plan .tag-seller{background:linear-gradient(100deg,#0E8A5F,#12A06B);color:#fff;font-weight:800;font-size:.68rem;letter-spacing:.07em;padding:5px 14px;box-shadow:0 4px 12px rgba(14,138,95,.5);left:50%;transform:translateX(-50%);top:-12px;z-index:3;white-space:nowrap}
/* equal-height cards: stretch grid items and push the renew block to the bottom */
.pricing-plans{align-items:stretch}
.pricing-plans .plan{display:flex;flex-direction:column}
.pricing-plans .plan .body{display:flex;flex-direction:column;flex:1}
.pricing-plans .plan .renew2{margin-top:auto}
/* ============ pricing: lifetime benefits box + money-back badge (v87) ============ */
/* Lifetime benefits — visible only when the Lifetime toggle is active */
.pon .lifebox,.poff .lifebox{display:none}
#d-on-10:checked~.pon .lifebox.d10,#d-off-10:checked~.poff .lifebox.d10{display:block;animation:fadeUp .35s ease both}
.lifebox{background:linear-gradient(135deg,#343F8C,#485396);color:#fff;border-radius:18px;padding:22px 26px;margin:18px 0 22px;box-shadow:0 14px 34px rgba(52,63,140,.28);max-width:560px}
.lifebox ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.lifebox li{position:relative;padding-left:32px;font-size:1.02rem;font-weight:700;line-height:1.35}
.lifebox li::before{content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;line-height:20px;text-align:center;color:#fff;font-weight:800;font-size:1rem}
.lifebox sup{color:#F6DCA9;font-size:.8em}
@media (max-width:640px){.lifebox{padding:18px 20px}.lifebox li{font-size:.95rem}}
/* 30 Days Money Back Guarantee — blinking */
.mbg-wrap{padding:6px 0 0}
.mbg{display:flex;align-items:center;gap:16px;animation:mbgBlink 1.6s ease-in-out infinite}
.mbg svg{flex:none}
.mbg-text{margin:0;font-family:var(--font-display);font-weight:800;font-size:1.25rem;color:var(--ink)}
.mbg-text sup{color:var(--magenta)}
@keyframes mbgBlink{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.mbg{animation:none}}
@media (max-width:640px){.mbg{gap:12px}.mbg svg{width:92px;height:92px}.mbg-text{font-size:1rem}}
/* ============ pricing v88: compact badge, inline lifetime box, hw cards ============ */
/* money-back badge — compact pill instead of a big block */
.mbg-wrap{padding:0}
.mbg{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid #D7DCEE;border-radius:999px;padding:6px 18px 6px 6px;box-shadow:0 4px 14px rgba(17,85,245,.12)}
.mbg svg{width:52px;height:52px}
.mbg-text{font-size:.95rem}
@media (max-width:640px){.mbg svg{width:44px;height:44px}.mbg-text{font-size:.85rem}}
/* lifetime benefits — single horizontal line */
.lifebox{max-width:none;padding:14px 22px}
.lifebox ul{flex-direction:row;flex-wrap:nowrap;gap:8px 22px;align-items:center;justify-content:space-between}
.lifebox li{font-size:.9rem;padding-left:24px;white-space:nowrap}
@media (max-width:1100px){.lifebox ul{flex-direction:column;flex-wrap:wrap;gap:10px;justify-content:flex-start}.lifebox li{white-space:normal}}
/* hardware strip cards */
.hwstrip .hw-sp{display:block;font-size:.78rem;color:var(--muted);margin:3px 0 6px;line-height:1.35}
.hw-cats{font-size:.95rem}
/* ============ pricing v89: inline money-back line + hardware card images ============ */
.mbg-line{display:inline-flex;align-items:center;gap:9px;margin:14px 0 0;font-family:var(--font-display);font-size:1rem;color:var(--ink);animation:mbgBlink 1.7s ease-in-out infinite}
.mbg-line .mbg-mini{display:inline-flex;flex:none}
.mbg-line sup{color:var(--magenta)}
@media (prefers-reduced-motion:reduce){.mbg-line{animation:none}}
/* hardware strip cards with images */
.hwstrip .hw img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:10px;margin-bottom:10px;background:#EFF1F9;display:block}
/* ============ pricing v90: extra-outlet heads, multi-branch features, chain CTA ============ */
.xs-head{font-size:1.15rem;margin:30px 0 12px;color:var(--ink)}
/* Multi Branch / Franchisee features */
.mbf{margin-top:46px}
.mbf-title{text-align:center;font-size:1.9rem;margin:0 0 22px}
.mbf-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px 30px;box-shadow:0 10px 30px rgba(28,39,127,.07)}
.mbf-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 40px}
.mbf-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.mbf-list li,.mbf-splist li{position:relative;padding-left:28px;font-size:.98rem;color:var(--ink);line-height:1.4}
.mbf-list li::before,.mbf-splist li::before{content:"☛";position:absolute;left:0;top:0;color:var(--violet);font-size:1rem}
.mbf-special{margin-top:24px;background:#FDF3E3;border-radius:14px;padding:18px 22px}
.mbf-special h4{text-align:center;margin:0 0 12px;font-family:var(--font-display);font-size:1.05rem;color:var(--ink)}
.mbf-splist{list-style:none;margin:0;padding:14px 0 0;border-top:1px dashed #D7DCEE;display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:center}
.mbf-splist li{font-size:.92rem}
@media (max-width:820px){.mbf-grid{grid-template-columns:1fr}.mbf-title{font-size:1.45rem}.mbf-splist{flex-direction:column;gap:10px}}
/* Chain of outlets CTA banner */
.chain-cta{margin-top:34px;background:var(--brand-grad);border-radius:18px;padding:30px 28px;text-align:center;color:#fff;box-shadow:0 14px 34px rgba(52,63,140,.3)}
.chain-cta p{margin:0 0 16px;font-family:var(--font-display);font-weight:800;font-size:1.35rem;line-height:1.45;color:#fff}
.chain-cta strong{color:#FFD84D}
.chain-cta .btn{background:#fff;color:var(--ink);border-color:#fff;font-weight:800}
.chain-cta .btn:hover{background:var(--saffron);border-color:var(--saffron)}
@media (max-width:640px){.chain-cta p{font-size:1.05rem}}
/* ============ pricing: extra-outlet struck + actual price (v91) ============ */
.ecom-table .xs-was{display:block;font-family:var(--font-mono);font-size:.88rem;color:var(--muted);text-decoration:line-through;line-height:1.2}
.ecom-table .xs-now{display:block;font-family:var(--font-mono);font-weight:700;color:var(--magenta);font-size:1.05rem;line-height:1.3}
/* ============ pricing v92: lock add-on grid to 4 per row on desktop ============ */
@media (min-width:1100px){
.pricing-wide .addon-grid,#addons ~ .addon-grid,.addon-grid{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:700px) and (max-width:1099px){
.addon-grid{grid-template-columns:repeat(2,1fr)}
}
/* ============ pricing v93: extra-outlet block switches with the Lifetime toggle ============ */
.xs-10y{display:none}
body:has(#d-on-10:checked) .xs-1y{display:none}
body:has(#d-on-10:checked) .xs-10y{display:block}
/* ============ pricing v94: offline extra-outlet block (scoped, online untouched) ============ */
.xs-off-1y{display:none}
/* Offline tab + 1-Year -> show offline block, hide the online ones */
body:has(#t-off:checked) .xs-1y,
body:has(#t-off:checked) .xs-10y{display:none}
body:has(#t-off:checked):has(#d-off-1:checked) .xs-off-1y{display:block}
/* ============ pricing v95: offline LIFETIME (10-year) extra-outlet block ============ */
.xs-off-10y{display:none}
body:has(#t-off:checked):has(#d-off-10:checked) .xs-off-10y{display:block}
/* ============ pricing v99: highlight multi-outlet / multi-company lines on offline plan cards ============ */
.pricing-plans .plan .hl{color:var(--magenta);font-weight:700}
/* ============ pricing v103: e-Comm Connect tab gets its own lifetime block ============ */
/* Hide ONLY the multi-branch pieces on the e-Comm tab — add-ons, hardware and the rest of the section stay. */
.xs-ec{display:none}
body:has(#t-ec:checked) .xs-1y,
body:has(#t-ec:checked) .xs-10y,
body:has(#t-ec:checked) .mb-intro,
body:has(#t-ec:checked) .mbf{display:none}
body:has(#t-ec:checked) .xs-ec{display:block}
/* ============ v105: image logo in the header ============ */
.logo{display:inline-flex;align-items:center;line-height:0}
.logo img{display:block;height:34px;width:auto}
@media (max-width:900px){.logo img{height:30px}}
@media (max-width:560px){.logo img{height:27px}}
/* ============ v106: footer social icons ============ */
.fsocial{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.fsocial a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin:0;border-radius:50%;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);color:#C2C8DF;transition:background .2s ease,color .2s ease,transform .2s ease,border-color .2s ease}
.fsocial a:hover{background:var(--saffron);border-color:var(--saffron);color:var(--ink);transform:translateY(-2px)}
.fsocial svg{width:16px;height:16px;fill:currentColor;display:block}
@media (prefers-reduced-motion:reduce){.fsocial a:hover{transform:none}}
/* ===== eCommerce plan cards: pin the renewal block to a common baseline ===== */
.ecom-plans{align-items:stretch}
.ecom-plans .plan{display:flex;flex-direction:column;height:100%}
.ecom-plans .plan .body{display:flex;flex-direction:column;flex:1}
.ecom-plans .plan .body ul{flex:1 0 auto} /* list grows, so renewal drops to the bottom */
.ecom-plans .plan .renew2{margin-top:auto} /* renewal block always sits on the same line */
.ecom-plans .renew2 .renew-top{min-height:1.2em}
.ecom-plans .renew2 .renew-bot{min-height:1.2em}
/* repeated PLANS header inside the comparison table (after the Add-ons divider) */
.data.ecom-table tr.plans-repeat th{background:var(--violet);color:#fff;font-family:var(--font-mono);
font-size:.82rem;font-weight:700;letter-spacing:.04em;text-align:left;padding:14px 16px;
border:0;position:static;white-space:nowrap}
/* ============ Zotaki v1: brand marks ============ */
/* Header wordmark — the new logo is 760x211, so size by height. */
.nav .logo img{height:38px;width:auto;display:block}
@media (max-width:880px){ .nav .logo img{height:32px} }
@media (max-width:520px){ .nav .logo img{height:28px} }
/* Footer wordmark, knocked out to white for the indigo footer */
footer.site .flogo{display:block;margin-bottom:16px}
footer.site .flogo img{height:40px;width:auto;display:block}
footer.site .ftag{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;
text-transform:uppercase;color:#9098C6;margin:-8px 0 14px}
/* Brand gradient utility — matches the logo exactly */
.brandwash{background:var(--brand-grad);color:#fff}
/* ============ Zotaki v1: icon sizing ============ */
/* The card thumbs used to hold photos; they now hold 48x48 brand icons. */
.pcard .thumb{height:112px;background:#EBEEF8}
.pcard .thumb img{width:52px;height:52px;object-fit:contain}
.pcard .thumb::after{display:none}
.ix-fico img{width:30px;height:30px;object-fit:contain}
.ix-sector img{width:48px;height:48px;object-fit:contain}
/* Icon inside the soft tile on module and add-on cards */
.cards .card > img[src*="/icons/"]{width:52px;height:52px;object-fit:contain;
background:#EBEEF8;border-radius:12px;padding:8px;box-sizing:content-box}
/* ============================================================
Booking engine page (be-*)
Centred hero with a live booking-flow mock, an interactive
commission calculator, and a 9-card capability grid.
============================================================ */
.be-hero{padding:64px 0 0;background:radial-gradient(900px 420px at 50% -10%,rgba(52,63,140,.10),transparent 62%),linear-gradient(180deg,#fff,var(--paper));border-bottom:1px solid var(--line);text-align:center}
.be-hero .pill{display:inline-block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--violet);background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 16px}
.be-hero h1{font-size:clamp(2.1rem,5.4vw,3.5rem);line-height:1.06;margin:20px auto 0;max-width:16ch}
.be-hero .lead{max-width:60ch;margin:18px auto 0}
.be-hero .actions{justify-content:center;margin-top:26px}
.be-badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px;font-family:var(--font-mono);font-size:.72rem;color:var(--muted)}
.be-badges span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px}
/* browser mock */
.be-mock{max-width:900px;margin:44px auto -70px;background:#fff;border:1px solid var(--line);border-radius:18px 18px 0 0;box-shadow:0 -2px 60px rgba(28,39,127,.13);overflow:hidden;text-align:left}
.be-mock-bar{display:flex;align-items:center;gap:7px;padding:13px 18px;border-bottom:1px solid var(--line);background:var(--paper)}
.be-mock-bar i{width:10px;height:10px;border-radius:50%;background:var(--line);display:block}
.be-mock-bar i:first-child{background:#E9AFAF}.be-mock-bar i:nth-child(2){background:#F0D9A8}.be-mock-bar i:nth-child(3){background:#B4D6BE}
.be-mock-url{margin-left:12px;font-family:var(--font-mono);font-size:.72rem;color:var(--muted)}
.be-steps{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:18px;border-bottom:1px solid var(--line)}
.be-step{font-family:var(--font-mono);font-size:.72rem;padding:6px 13px;border-radius:999px;background:var(--paper);color:var(--muted);border:1px solid var(--line)}
.be-step.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.be-steps b{color:var(--line);font-weight:400}
.be-rooms{padding:8px 18px 18px}
.be-room{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px 16px;border:1px solid var(--line);border-radius:12px;margin-top:10px}
.be-room.pick{border:2px solid var(--saffron);background:#FFFCF4}
.be-room h4{font-size:.98rem;margin:0 0 3px;display:flex;align-items:center;gap:9px}
.be-room .tag{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;background:var(--saffron);color:var(--ink);border-radius:999px;padding:3px 9px}
.be-room p{font-size:.8rem;color:var(--muted);margin:0}
.be-room .amt{text-align:right;font-family:var(--font-mono);white-space:nowrap}
.be-room .amt b{font-size:1.15rem;color:var(--ink);display:block}
.be-room .amt span{font-size:.68rem;color:var(--muted)}
.be-mock-foot{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);background:var(--paper)}
.be-mock-foot div{padding:15px 10px;text-align:center;border-right:1px solid var(--line)}
.be-mock-foot div:last-child{border-right:0}
.be-mock-foot b{display:block;font-family:var(--font-mono);font-size:1.02rem;color:var(--ink)}
.be-mock-foot span{font-size:.7rem;color:var(--muted)}
/* stat strip */
.be-stats{background:#fff;border-bottom:1px solid var(--line);padding:96px 0 30px}
.be-stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}
.be-stats b{display:block;font-family:var(--font-display);font-size:1.9rem;color:var(--ink);line-height:1.1}
.be-stats span{font-size:.82rem;color:var(--muted)}
/* calculator */
.be-calc{display:grid;grid-template-columns:1fr .92fr;gap:34px;align-items:start;margin-top:26px}
.be-calc-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px}
.be-field{margin-bottom:18px}
.be-field label{display:flex;justify-content:space-between;align-items:baseline;font-size:.88rem;margin-bottom:9px}
.be-field label b{font-family:var(--font-mono);color:var(--ink)}
.be-field input[type=range]{width:100%;accent-color:var(--violet)}
.be-out{background:var(--brand-grad);color:#fff;border-radius:16px;padding:28px 26px}
.be-out .k{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.be-out .big{font-family:var(--font-display);font-size:clamp(2rem,5vw,2.9rem);line-height:1.05;margin:8px 0 4px}
.be-out .sub{opacity:.9;font-size:.88rem}
.be-out hr{border:0;border-top:1px solid rgba(255,255,255,.22);margin:20px 0}
.be-out dl{display:grid;grid-template-columns:1fr auto;gap:9px 12px;font-size:.86rem;margin:0}
.be-out dt{opacity:.88}
.be-out dd{margin:0;font-family:var(--font-mono);text-align:right}
/* 9-card capability grid */
.be-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.be-cap{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;transition:transform .22s ease,box-shadow .22s ease}
.be-cap:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(28,39,127,.10)}
.be-cap img{width:34px;height:34px;margin-bottom:12px}
.be-cap h3{font-size:1rem;margin-bottom:6px}
.be-cap p{font-size:.86rem;color:var(--text);margin:0}
/* numbered how-it-works */
.be-how{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:30px;text-align:center}
.be-how .n{width:42px;height:42px;border-radius:12px;background:var(--ink);color:#fff;font-family:var(--font-mono);font-size:1rem;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.be-how h3{font-size:1.02rem;margin-bottom:7px}
.be-how p{font-size:.88rem;color:var(--muted)}
/* dark closing card */
.be-final{background:var(--brand-grad);border-radius:22px;padding:52px 40px;text-align:center;color:#fff;margin-top:10px}
.be-final h2{color:#fff;font-size:clamp(1.5rem,3.6vw,2.2rem)}
.be-final p{opacity:.92;max-width:56ch;margin:12px auto 24px}
@media (max-width:900px){
.be-calc{grid-template-columns:1fr}
.be-grid{grid-template-columns:repeat(2,1fr)!important} /* beats inline column counts */
.be-stats .wrap{grid-template-columns:repeat(2,1fr)}
.be-how{grid-template-columns:1fr;gap:30px}
}
@media (max-width:560px){
.be-grid{grid-template-columns:1fr!important}
.be-mock{margin-left:-6px;margin-right:-6px;border-radius:14px 14px 0 0}
.be-room{flex-direction:column;align-items:flex-start}
.be-room .amt{text-align:left}
}
/* ============================================================
Channel manager page (cm-*)
Reuses the be-* hero, calculator and grid classes; adds the
live-sync dashboard mock and the two-way sync diagram.
============================================================ */
.cm-mock{max-width:900px;margin:44px auto -70px;background:#fff;border:1px solid var(--line);border-radius:18px 18px 0 0;box-shadow:0 -2px 60px rgba(28,39,127,.13);overflow:hidden;text-align:left}
.cm-mock-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 18px;border-bottom:1px solid var(--line);background:var(--paper)}
.cm-mock-bar b{font-size:.82rem;color:var(--ink);font-weight:600}
.cm-live{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:.7rem;color:var(--emerald)}
.cm-live i{width:8px;height:8px;border-radius:50%;background:var(--emerald);display:block;animation:cmpulse 1.8s ease-in-out infinite}
@keyframes cmpulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.cm-live i{animation:none}}
.cm-hub{display:flex;justify-content:center;padding:22px 18px 4px}
.cm-hub span{background:var(--ink);color:#fff;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.06em;padding:11px 20px;border-radius:12px}
.cm-chans{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px 18px 18px}
.cm-chan{border:1px solid var(--line);border-radius:11px;padding:13px 14px}
.cm-chan.sync{border:2px solid var(--emerald);background:#F3FBF7}
.cm-chan .hd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.cm-chan .hd b{font-size:.84rem;color:var(--ink)}
.cm-chan .ok{color:var(--emerald);font-size:.82rem}
.cm-chan dl{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:0;text-align:center}
.cm-chan dt{font-size:.6rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.cm-chan dd{margin:0;font-family:var(--font-mono);font-size:.84rem;color:var(--ink)}
.cm-mock-foot{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);background:var(--paper)}
.cm-mock-foot div{padding:15px 10px;text-align:center;border-right:1px solid var(--line)}
.cm-mock-foot div:last-child{border-right:0}
.cm-mock-foot b{display:block;font-family:var(--font-mono);font-size:1.02rem;color:var(--ink)}
.cm-mock-foot b.good{color:var(--emerald)}
.cm-mock-foot span{font-size:.7rem;color:var(--muted)}
/* channel wall */
.cm-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:24px}
.cm-ch{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:13px 15px;font-size:.88rem;color:var(--ink)}
.cm-ch i{width:9px;height:9px;border-radius:50%;background:var(--violet);display:block;flex:none}
/* before / after strip */
.cm-ba{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.cm-ba > div{border-radius:16px;padding:24px}
.cm-ba .before{background:var(--paper);border:1px solid var(--line)}
.cm-ba .after{background:var(--brand-grad);color:#fff}
.cm-ba h3{font-size:1.05rem;margin-bottom:14px}
.cm-ba .after h3{color:#fff}
.cm-ba ul{list-style:none;padding:0;margin:0;font-size:.9rem}
.cm-ba li{padding:8px 0 8px 26px;position:relative;line-height:1.5}
.cm-ba .before li::before{content:"×";position:absolute;left:4px;color:var(--magenta);font-weight:700}
.cm-ba .after li::before{content:"✓";position:absolute;left:4px}
.cm-ba .after li{border-bottom:1px solid rgba(255,255,255,.15)}
.cm-ba .before li{border-bottom:1px solid var(--line)}
.cm-ba li:last-child{border-bottom:0}
@media (max-width:900px){
.cm-chans{grid-template-columns:repeat(2,1fr)}
.cm-ba{grid-template-columns:1fr}
}
@media (max-width:560px){
.cm-chans{grid-template-columns:1fr}
.cm-mock{margin-left:-6px;margin-right:-6px;border-radius:14px 14px 0 0}
}
/* ============================================================
In-room dining page (rq-*)
Phone mock of the guest's QR ordering flow, plus the
scan-to-folio journey strip. Reuses be-* hero/calc/grid.
============================================================ */
.rq-stage{display:flex;justify-content:center;gap:26px;align-items:flex-end;margin:44px auto -70px;max-width:900px}
.rq-phone{width:290px;background:#fff;border:1px solid var(--line);border-radius:26px 26px 0 0;box-shadow:0 -2px 60px rgba(28,39,127,.13);overflow:hidden;text-align:left;flex:none}
.rq-notch{height:26px;background:var(--paper);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.rq-notch span{width:64px;height:6px;border-radius:3px;background:var(--line);display:block}
.rq-head{padding:16px 18px 12px;border-bottom:1px solid var(--line)}
.rq-head b{display:block;font-size:.95rem;color:var(--ink)}
.rq-head span{font-family:var(--font-mono);font-size:.68rem;color:var(--muted)}
.rq-cat{display:flex;gap:6px;padding:12px 18px 6px;flex-wrap:wrap}
.rq-cat i{font-style:normal;font-family:var(--font-mono);font-size:.62rem;padding:5px 11px;border-radius:999px;background:var(--paper);color:var(--muted);border:1px solid var(--line)}
.rq-cat i.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.rq-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 18px;border-bottom:1px solid var(--line)}
.rq-item b{display:block;font-size:.85rem;color:var(--ink);font-weight:600}
.rq-item span{font-size:.7rem;color:var(--muted)}
.rq-item .p{font-family:var(--font-mono);font-size:.85rem;color:var(--ink);white-space:nowrap}
.rq-item .add{width:26px;height:26px;border-radius:8px;background:var(--saffron);color:var(--ink);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;flex:none}
.rq-bar{background:var(--ink);color:#fff;padding:13px 18px;display:flex;justify-content:space-between;align-items:center;font-size:.82rem}
.rq-bar b{font-family:var(--font-mono)}
.rq-side{flex:1;max-width:270px;padding-bottom:34px}
.rq-qr{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;text-align:center;box-shadow:0 10px 40px rgba(28,39,127,.08)}
.rq-qr svg{width:112px;height:112px;margin:0 auto 12px;display:block}
.rq-qr b{display:block;font-size:.88rem;color:var(--ink)}
.rq-qr span{font-size:.74rem;color:var(--muted)}
.rq-note{margin-top:14px;background:var(--brand-grad);color:#fff;border-radius:14px;padding:16px 18px}
.rq-note b{display:block;font-family:var(--font-mono);font-size:1.25rem}
.rq-note span{font-size:.76rem;opacity:.92}
/* scan-to-folio journey */
.rq-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:28px;counter-reset:rq}
.rq-step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 16px;position:relative}
.rq-step::before{counter-increment:rq;content:counter(rq);position:absolute;top:-11px;left:16px;width:24px;height:24px;border-radius:8px;background:var(--ink);color:#fff;font-family:var(--font-mono);font-size:.72rem;display:flex;align-items:center;justify-content:center}
.rq-step h3{font-size:.94rem;margin:8px 0 6px}
.rq-step p{font-size:.82rem;color:var(--muted);margin:0}
@media (max-width:900px){
.rq-flow{grid-template-columns:repeat(2,1fr)}
.rq-stage{flex-direction:column;align-items:center;gap:20px}
.rq-side{max-width:290px;padding-bottom:0;width:100%}
}
@media (max-width:560px){
.rq-flow{grid-template-columns:1fr}
.rq-phone{width:100%;max-width:300px}
}
/* ============================================================
Table QR ordering page (tq-*)
Phone mock ends on the settlement fork — charge to room, or
pay at the table. Reuses be-* hero / calculator / grid.
============================================================ */
.tq-tag{display:inline-block;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:4px 10px;color:var(--muted)}
.tq-bill{padding:4px 18px 0}
.tq-line{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:.84rem}
.tq-line span{color:var(--text)}
.tq-line b{font-family:var(--font-mono);color:var(--ink);white-space:nowrap}
.tq-line.tot{border-bottom:0;border-top:2px solid var(--ink);margin-top:4px;padding-top:11px;font-size:.95rem}
.tq-line.sub{font-size:.76rem;color:var(--muted);border-bottom:0;padding:4px 0}
.tq-fork{padding:14px 18px 18px;display:grid;gap:9px}
.tq-btn{display:block;text-align:center;border-radius:11px;padding:12px 10px;font-size:.86rem;font-weight:600;line-height:1.3}
.tq-btn.room{background:var(--saffron);color:var(--ink)}
.tq-btn.pay{background:#fff;color:var(--ink);border:2px solid var(--ink)}
.tq-btn small{display:block;font-weight:400;font-size:.68rem;opacity:.72;margin-top:2px}
/* settlement fork diagram */
.tq-paths{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.tq-path{border-radius:16px;padding:26px 24px}
.tq-path.a{background:var(--brand-grad);color:#fff}
.tq-path.b{background:#fff;border:1px solid var(--line)}
.tq-path h3{font-size:1.08rem;margin-bottom:6px}
.tq-path.a h3{color:#fff}
.tq-path .who{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;opacity:.85;margin-bottom:12px}
.tq-path ol{margin:16px 0 0;padding-left:20px;font-size:.88rem;line-height:1.6}
.tq-path li{margin-bottom:9px}
.tq-path.a li::marker{color:var(--saffron);font-weight:700}
.tq-path.b li::marker{color:var(--violet);font-weight:700}
/* table status strip */
.tq-tables{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:9px;margin-top:24px}
.tq-t{border:1px solid var(--line);border-radius:11px;padding:13px 10px;text-align:center;background:#fff}
.tq-t b{display:block;font-family:var(--font-mono);font-size:.92rem;color:var(--ink)}
.tq-t span{font-size:.68rem;color:var(--muted)}
.tq-t.busy{background:var(--paper)}
.tq-t.bill{border:2px solid var(--saffron);background:#FFFCF4}
.tq-t.free{border-style:dashed}
@media (max-width:900px){ .tq-paths{grid-template-columns:1fr} }
/* OTP verification block on the table QR page */
.tq-otp{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;margin-top:12px}
.tq-otp .who{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:14px}
.tq-otp .who b{font-size:.9rem;color:var(--ink)}
.tq-otp .who span{font-family:var(--font-mono);font-size:.68rem;color:var(--muted)}
.tq-otp p{font-size:.8rem;color:var(--muted);margin:0 0 12px}
.tq-digits{display:flex;gap:7px;justify-content:center}
.tq-digits i{font-style:normal;width:38px;height:46px;border:2px solid var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:1.15rem;color:var(--ink)}
.tq-digits i.f{border-color:var(--ink);background:var(--paper)}
.tq-digits i.cur{border-color:var(--saffron)}
/* ============================================================
Restaurant POS page (rp-*)
The hero is the billing screen itself — category rail, item
grid and the running bill — because that is what a POS is.
============================================================ */
.rp-pos{max-width:940px;margin:44px auto -70px;background:#fff;border:1px solid var(--line);border-radius:18px 18px 0 0;box-shadow:0 -2px 60px rgba(28,39,127,.13);overflow:hidden;text-align:left}
.rp-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px;border-bottom:1px solid var(--line);background:var(--paper)}
.rp-top b{font-size:.84rem;color:var(--ink)}
.rp-top .tabs{display:flex;gap:6px;flex-wrap:wrap}
.rp-top .tabs i{font-style:normal;font-family:var(--font-mono);font-size:.66rem;padding:5px 11px;border-radius:8px;background:#fff;border:1px solid var(--line);color:var(--muted)}
.rp-top .tabs i.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.rp-body{display:grid;grid-template-columns:1fr 300px}
.rp-menu{padding:14px 16px;border-right:1px solid var(--line)}
.rp-cats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.rp-cats i{font-style:normal;font-family:var(--font-mono);font-size:.64rem;padding:5px 10px;border-radius:999px;background:var(--paper);border:1px solid var(--line);color:var(--muted)}
.rp-cats i.on{background:var(--violet);color:#fff;border-color:var(--violet)}
.rp-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.rp-tile{border:1px solid var(--line);border-radius:10px;padding:11px 10px;min-height:64px;display:flex;flex-direction:column;justify-content:space-between}
.rp-tile b{font-size:.76rem;color:var(--ink);line-height:1.3;font-weight:600}
.rp-tile span{font-family:var(--font-mono);font-size:.72rem;color:var(--muted)}
.rp-tile.hot{border-color:var(--saffron);background:#FFFCF4}
.rp-tile.off{opacity:.45}
.rp-tile.off span{text-decoration:line-through}
.rp-bill{display:flex;flex-direction:column}
.rp-bhd{padding:13px 15px;border-bottom:1px solid var(--line)}
.rp-bhd b{display:block;font-size:.86rem;color:var(--ink)}
.rp-bhd span{font-family:var(--font-mono);font-size:.68rem;color:var(--muted)}
.rp-lines{flex:1;padding:8px 15px}
.rp-ln{display:flex;justify-content:space-between;gap:10px;padding:7px 0;font-size:.79rem;border-bottom:1px dashed var(--line)}
.rp-ln em{font-style:normal;display:block;font-size:.68rem;color:var(--muted)}
.rp-ln b{font-family:var(--font-mono);color:var(--ink);white-space:nowrap}
.rp-ln.sent b::after{content:" ✓";color:var(--emerald)}
.rp-sum{padding:10px 15px;border-top:1px solid var(--line);font-size:.76rem;color:var(--muted)}
.rp-sum div{display:flex;justify-content:space-between;padding:3px 0}
.rp-sum .tot{border-top:2px solid var(--ink);margin-top:6px;padding-top:8px;font-size:.98rem;color:var(--ink);font-family:var(--font-mono)}
.rp-acts{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:12px 15px}
.rp-acts span{text-align:center;border-radius:9px;padding:10px 6px;font-size:.76rem;font-weight:600}
.rp-acts .k{background:var(--ink);color:#fff}
.rp-acts .s{background:var(--saffron);color:var(--ink)}
.rp-acts .g{background:#fff;border:1px solid var(--line);color:var(--ink);font-weight:400}
/* order lifecycle rail */
.rp-life{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:28px;counter-reset:rp}
.rp-st{background:#fff;border:1px solid var(--line);border-radius:13px;padding:18px 14px;position:relative}
.rp-st::before{counter-increment:rp;content:counter(rp);position:absolute;top:-10px;left:14px;width:22px;height:22px;border-radius:7px;background:var(--ink);color:#fff;font-family:var(--font-mono);font-size:.68rem;display:flex;align-items:center;justify-content:center}
.rp-st h3{font-size:.88rem;margin:6px 0 5px}
.rp-st p{font-size:.78rem;color:var(--muted);margin:0;line-height:1.5}
@media (max-width:900px){
.rp-body{grid-template-columns:1fr}
.rp-menu{border-right:0;border-bottom:1px solid var(--line)}
.rp-tiles{grid-template-columns:repeat(3,1fr)}
.rp-life{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:560px){
.rp-tiles{grid-template-columns:repeat(2,1fr)}
.rp-life{grid-template-columns:1fr}
.rp-pos{margin-left:-6px;margin-right:-6px;border-radius:14px 14px 0 0}
}
/* POS page: audit log + report tiles */
.rp-log{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.rp-log .h{display:flex;justify-content:space-between;padding:12px 15px;border-bottom:1px solid var(--line);background:var(--paper);font-size:.8rem;color:var(--ink);font-weight:600}
.rp-row{display:grid;grid-template-columns:1fr auto;gap:10px;padding:11px 15px;border-bottom:1px solid var(--line);font-size:.82rem}
.rp-row:last-child{border-bottom:0}
.rp-row b{display:block;color:var(--ink);font-weight:600}
.rp-row span{font-size:.74rem;color:var(--muted)}
.rp-row .amt{font-family:var(--font-mono);color:var(--magenta);white-space:nowrap;align-self:center}
.rp-rep{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:24px}
.rp-rc{background:#fff;border:1px solid var(--line);border-radius:13px;padding:16px}
.rp-rc img{width:26px;height:26px;margin-bottom:9px}
.rp-rc b{display:block;font-size:.87rem;color:var(--ink);margin-bottom:3px}
.rp-rc span{font-size:.78rem;color:var(--muted);line-height:1.45}
/* ===== Guest self check-in page ===== */
.sc-stage{display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:start;max-width:900px;margin:44px auto 0;text-align:left}
.sc-phone{background:var(--ink);border-radius:34px;padding:10px;box-shadow:0 26px 60px rgba(28,39,127,.30)}
.sc-scr{background:#fff;border-radius:26px;overflow:hidden}
.sc-hd{background:var(--brand-grad);color:#fff;padding:20px 18px 16px}
.sc-hd b{display:block;font-size:.95rem}
.sc-hd span{font-size:.72rem;opacity:.82}
.sc-prog{display:flex;gap:5px;margin-top:14px}
.sc-prog i{height:4px;flex:1;border-radius:2px;background:rgba(255,255,255,.32)}
.sc-prog i.on{background:var(--saffron)}
.sc-form{padding:16px 18px 20px}
.sc-fl{margin-bottom:13px}
.sc-fl label{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:5px}
.sc-fl div{border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-size:.82rem;color:var(--ink);background:var(--paper)}
.sc-fl div.done{border-color:var(--emerald);background:#F0FAF6}
.sc-fl div.done::after{content:"✓";float:right;color:var(--emerald);font-weight:700}
.sc-up{border:1.5px dashed var(--violet);border-radius:11px;padding:14px;text-align:center;background:#F6F7FC;margin-bottom:13px}
.sc-up img{width:26px;height:26px;margin-bottom:5px}
.sc-up b{display:block;font-size:.78rem;color:var(--ink)}
.sc-up span{font-size:.68rem;color:var(--muted)}
.sc-go{background:var(--saffron);color:var(--ink);text-align:center;padding:11px;border-radius:10px;font-weight:700;font-size:.85rem}
.sc-side{padding-top:8px}
.sc-side h3{font-size:1.02rem;color:var(--ink);margin:0 0 6px}
.sc-side p{font-size:.87rem;color:var(--muted);margin:0 0 20px;line-height:1.6}
.sc-chip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-size:.78rem;color:var(--ink);margin:0 7px 7px 0}
.sc-chip img{width:16px;height:16px}
/* arrivals board */
.sc-board{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden}
.sc-bh{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;background:var(--paper);border-bottom:1px solid var(--line)}
.sc-bh b{font-size:.87rem;color:var(--ink)}
.sc-bh span{font-size:.74rem;color:var(--muted);font-family:var(--font-mono)}
.sc-br{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:13px 16px;border-bottom:1px solid var(--line)}
.sc-br:last-child{border-bottom:0}
.sc-br b{display:block;font-size:.86rem;color:var(--ink);font-weight:600}
.sc-br em{display:block;font-style:normal;font-size:.73rem;color:var(--muted)}
.sc-br .rm{font-family:var(--font-mono);font-size:.8rem;color:var(--violet)}
.sc-tag{font-size:.68rem;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap}
.sc-tag.ok{background:#E7F6F0;color:#0B6E4C}
.sc-tag.wait{background:#FDF3DE;color:#8A5A05}
.sc-tag.no{background:#F1F2F7;color:var(--muted)}
/* horizontal step rail */
.sc-rail{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:34px;counter-reset:sc}
.sc-rail>div{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 16px 18px}
.sc-rail>div::before{counter-increment:sc;content:counter(sc);position:absolute;top:-13px;left:16px;width:27px;height:27px;border-radius:50%;background:var(--brand-grad);color:#fff;font-size:.78rem;font-weight:700;display:grid;place-items:center}
.sc-rail img{width:30px;height:30px;margin-bottom:9px}
.sc-rail h3{font-size:.9rem;color:var(--ink);margin:0 0 5px}
.sc-rail p{font-size:.8rem;color:var(--muted);margin:0;line-height:1.5}
@media(max-width:960px){.sc-stage{grid-template-columns:1fr!important}.sc-rail{grid-template-columns:repeat(2,1fr)!important}} /* beat inline column counts */
@media(max-width:560px){.sc-rail{grid-template-columns:1fr}.sc-br{grid-template-columns:1fr auto}}
/* ===== Housekeeping page ===== */
.hk-rack{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:9px}
.hk-r{border-radius:11px;padding:11px 10px;border:1px solid var(--line);background:#fff;text-align:left}
.hk-r b{display:block;font-family:var(--font-mono);font-size:.9rem;color:var(--ink);line-height:1.1}
.hk-r span{display:block;font-size:.67rem;margin-top:4px;line-height:1.3}
.hk-r.ready{background:#EAF7F1;border-color:#B6E2D0}.hk-r.ready span{color:#0B6E4C}
.hk-r.dirty{background:#FDF3DE;border-color:#F3DDB0}.hk-r.dirty span{color:#8A5A05}
.hk-r.busy{background:#EDEFF8;border-color:#CBD2EA}.hk-r.busy span{color:var(--violet)}
.hk-r.prog{background:#E8F1FB;border-color:#BDD5EF}.hk-r.prog span{color:#12558F}
.hk-r.ooo{background:#F3F4F7;border-color:#DEE0E8}.hk-r.ooo span{color:var(--muted)}
.hk-r.ooo b{color:var(--muted)}
.hk-key{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.hk-key i{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:.75rem;color:var(--muted)}
.hk-key i::before{content:"";width:11px;height:11px;border-radius:3px;background:var(--line)}
.hk-key i.ready::before{background:#7CCFAC}.hk-key i.dirty::before{background:#F0BE63}
.hk-key i.busy::before{background:#9CA8D8}.hk-key i.prog::before{background:#7FB0DF}
.hk-key i.ooo::before{background:#C9CCD6}
/* attendant workload */
.hk-load{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden}
.hk-lh{padding:13px 16px;background:var(--paper);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.hk-lh b{font-size:.87rem;color:var(--ink)}
.hk-lh span{font-size:.74rem;color:var(--muted);font-family:var(--font-mono)}
.hk-lr{padding:13px 16px;border-bottom:1px solid var(--line)}
.hk-lr:last-child{border-bottom:0}
.hk-lr .t{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.hk-lr .t b{font-size:.86rem;color:var(--ink);font-weight:600}
.hk-lr .t span{font-size:.75rem;color:var(--muted);font-family:var(--font-mono)}
.hk-bar{height:8px;border-radius:4px;background:var(--paper);overflow:hidden}
.hk-bar i{display:block;height:100%;border-radius:4px;background:var(--brand-grad)}
.hk-bar i.done{background:var(--emerald)}
/* housekeeping phone */
.hk-stage{display:grid;grid-template-columns:290px 1fr;gap:30px;align-items:center;max-width:900px;margin:40px auto 0;text-align:left}
.hk-phone{background:var(--ink);border-radius:34px;padding:10px;box-shadow:0 26px 60px rgba(28,39,127,.30)}
.hk-scr{background:#fff;border-radius:26px;overflow:hidden}
.hk-ph{background:var(--brand-grad);color:#fff;padding:18px}
.hk-ph b{display:block;font-size:.95rem}.hk-ph span{font-size:.72rem;opacity:.82}
.hk-list{padding:12px 14px 18px}
.hk-it{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--line);border-radius:11px;padding:11px 12px;margin-bottom:9px}
.hk-it b{font-family:var(--font-mono);font-size:.88rem;color:var(--ink)}
.hk-it em{display:block;font-style:normal;font-size:.68rem;color:var(--muted);margin-top:2px}
.hk-it .a{font-size:.7rem;font-weight:700;padding:5px 11px;border-radius:999px;background:var(--saffron);color:var(--ink);white-space:nowrap}
.hk-it.ok{border-color:#B6E2D0;background:#F3FBF7}
.hk-it.ok .a{background:#DCF2E8;color:#0B6E4C}
@media(max-width:900px){.hk-stage{grid-template-columns:1fr}}
/* ===== Front desk: booking chart + folio ===== */
.fd-rack{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden}
.fd-hd{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;background:var(--paper);border-bottom:1px solid var(--line)}
.fd-hd b{font-size:.87rem;color:var(--ink)}
.fd-hd span{font-size:.74rem;color:var(--muted);font-family:var(--font-mono)}
.fd-days{display:grid;grid-template-columns:74px repeat(7,1fr);border-bottom:1px solid var(--line);background:var(--paper)}
.fd-days span{padding:8px 4px;text-align:center;font-size:.7rem;color:var(--muted);font-family:var(--font-mono);border-left:1px solid var(--line)}
.fd-days span:first-child{border-left:0;text-align:left;padding-left:16px}
.fd-row{display:grid;grid-template-columns:74px repeat(7,1fr);border-bottom:1px solid var(--line);position:relative;min-height:36px}
.fd-row:last-child{border-bottom:0}
.fd-row>i{border-left:1px solid var(--line)}
.fd-row>b{padding:10px 0 10px 16px;font-family:var(--font-mono);font-size:.78rem;color:var(--ink);font-weight:600;display:flex;align-items:center}
.fd-bk{position:absolute;top:6px;height:24px;border-radius:6px;display:flex;align-items:center;padding:0 9px;font-size:.7rem;font-weight:600;color:#fff;background:var(--violet);white-space:nowrap;overflow:hidden}
.fd-bk.ota{background:var(--ink)}
.fd-bk.dir{background:var(--saffron);color:var(--ink)}
.fd-bk.blk{background:#C9CCD6;color:var(--ink)}
.fd-fol{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden}
.fd-fh{padding:14px 16px;background:var(--brand-grad);color:#fff}
.fd-fh b{display:block;font-size:.92rem}.fd-fh span{font-size:.73rem;opacity:.85}
.fd-fl{display:grid;grid-template-columns:1fr auto;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);font-size:.83rem}
.fd-fl span{color:var(--text)}.fd-fl em{display:block;font-style:normal;font-size:.71rem;color:var(--muted)}
.fd-fl b{font-family:var(--font-mono);color:var(--ink);white-space:nowrap}
.fd-fl.pay b{color:var(--emerald)}
.fd-fl.tot{background:var(--paper);border-bottom:0;font-weight:700}
.fd-fl.tot span,.fd-fl.tot b{color:var(--ink);font-size:.95rem}
/* ===== CRM: profile card + segments ===== */
.crm-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;max-width:420px}
.crm-top{background:var(--brand-grad);color:#fff;padding:20px;display:flex;gap:14px;align-items:center}
.crm-av{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:1.15rem;font-weight:700;flex:none}
.crm-top b{display:block;font-size:1.02rem}
.crm-top span{font-size:.75rem;opacity:.85}
.crm-kpi{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.crm-kpi div{padding:14px 10px;text-align:center;border-left:1px solid var(--line)}
.crm-kpi div:first-child{border-left:0}
.crm-kpi b{display:block;font-size:1.05rem;color:var(--ink);font-family:var(--font-mono)}
.crm-kpi span{font-size:.68rem;color:var(--muted)}
.crm-body{padding:15px 18px 18px}
.crm-body dl{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;margin:0 0 14px;font-size:.82rem}
.crm-body dt{color:var(--muted)}.crm-body dd{margin:0;color:var(--ink);text-align:right}
.crm-tags span{display:inline-block;font-size:.71rem;padding:4px 10px;border-radius:999px;background:var(--accent-soft);color:#8A5A05;margin:0 6px 6px 0;font-weight:600}
.crm-tags span.v{background:var(--paper);color:var(--violet)}
.crm-segs{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin-top:26px}
.crm-seg{background:#fff;border:1px solid var(--line);border-radius:13px;padding:16px}
.crm-seg b{display:block;font-family:var(--font-mono);font-size:1.35rem;color:var(--violet);line-height:1}
.crm-seg strong{display:block;font-size:.86rem;color:var(--ink);margin:7px 0 3px}
.crm-seg span{font-size:.77rem;color:var(--muted);line-height:1.45}
/* ===== Multi-property: group board ===== */
.mp-board{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden}
.mp-hd{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:var(--ink);color:#fff}
.mp-hd b{font-size:.9rem}.mp-hd span{font-size:.75rem;opacity:.8;font-family:var(--font-mono)}
.mp-tot{display:grid;grid-template-columns:repeat(3,1fr);background:var(--paper);border-bottom:1px solid var(--line)}
.mp-tot div{padding:14px 12px;text-align:center;border-left:1px solid var(--line)}
.mp-tot div:first-child{border-left:0}
.mp-tot b{display:block;font-size:1.15rem;color:var(--ink);font-family:var(--font-mono)}
.mp-tot span{font-size:.68rem;color:var(--muted)}
.mp-r{display:grid;grid-template-columns:1fr 62px 78px 92px;gap:8px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);font-size:.82rem}
.mp-r:last-child{border-bottom:0}
.mp-r b{color:var(--ink);font-weight:600}
.mp-r em{display:block;font-style:normal;font-size:.71rem;color:var(--muted)}
.mp-r i{font-style:normal;font-family:var(--font-mono);text-align:right;color:var(--text)}
.mp-r i.hi{color:var(--emerald);font-weight:600}
.mp-r i.lo{color:var(--magenta)}
@media(max-width:640px){.mp-r{grid-template-columns:1fr 54px 70px}.mp-r i:last-child{display:none}
.fd-days,.fd-row{grid-template-columns:60px repeat(7,1fr)}.fd-bk{font-size:0;padding:0 4px}}
/* ===== Hotel website page ===== */
.hw-site{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 22px 54px rgba(28,39,127,.14)}
.hw-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--paper);border-bottom:1px solid var(--line)}
.hw-bar i{width:9px;height:9px;border-radius:50%;background:var(--line);flex:none}
.hw-bar span{flex:1;background:#fff;border:1px solid var(--line);border-radius:6px;padding:4px 10px;font-family:var(--font-mono);font-size:.72rem;color:var(--muted);margin-left:6px}
.hw-nav{display:flex;align-items:center;gap:18px;padding:13px 20px;border-bottom:1px solid var(--line);font-size:.76rem}
.hw-nav b{color:var(--ink);font-size:.92rem;letter-spacing:-.01em}
.hw-nav i{font-style:normal;color:var(--muted)}
.hw-nav .bk{margin-left:auto;background:var(--saffron);color:var(--ink);font-weight:700;padding:6px 14px;border-radius:7px;font-size:.74rem}
.hw-hero{background:var(--brand-grad);color:#fff;padding:34px 20px;text-align:center}
.hw-hero b{display:block;font-size:1.25rem;letter-spacing:-.02em}
.hw-hero span{font-size:.8rem;opacity:.86}
.hw-srch{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:8px;background:#fff;border-radius:9px;padding:8px;margin:16px auto 0;max-width:460px}
.hw-srch div{border:1px solid var(--line);border-radius:6px;padding:6px 9px;font-size:.7rem;color:var(--muted);text-align:left}
.hw-srch em{font-style:normal;background:var(--ink);color:#fff;border-radius:6px;padding:6px 13px;font-size:.72rem;font-weight:600;display:grid;place-items:center}
.hw-rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:18px 20px}
.hw-rm{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.hw-rm .ph{height:56px;background:linear-gradient(135deg,#EBEEF8,#D7DCEE)}
.hw-rm .tx{padding:9px 11px}
.hw-rm b{display:block;font-size:.79rem;color:var(--ink)}
.hw-rm span{font-size:.72rem;color:var(--magenta);font-family:var(--font-mono)}
.hw-map{display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:10px;margin-top:26px}
.hw-pg{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 15px}
.hw-pg b{display:block;font-size:.85rem;color:var(--ink);margin-bottom:3px}
.hw-pg span{font-size:.76rem;color:var(--muted);line-height:1.45}
.hw-pg.key{background:var(--accent-soft);border-color:#F3DDB0}
@media(max-width:640px){.hw-rooms{grid-template-columns:1fr}.hw-srch{grid-template-columns:1fr 1fr}.hw-nav i{display:none}}
/* ===== Food delivery website page ===== */
.fw-shop{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 22px 54px rgba(28,39,127,.14)}
.fw-nav{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--line);font-size:.76rem}
.fw-nav b{color:var(--ink);font-size:.9rem}
.fw-nav i{font-style:normal;color:var(--muted)}
.fw-nav .ct{margin-left:auto;background:var(--ink);color:#fff;padding:5px 12px;border-radius:7px;font-size:.72rem;font-weight:600}
.fw-mode{display:flex;gap:8px;padding:14px 18px 0}
.fw-mode span{flex:1;text-align:center;padding:9px;border:1.5px solid var(--line);border-radius:9px;font-size:.78rem;color:var(--muted);font-weight:600}
.fw-mode span.on{border-color:var(--saffron);background:var(--accent-soft);color:var(--ink)}
.fw-body{display:grid;grid-template-columns:1fr 232px;gap:16px;padding:16px 18px 18px}
.fw-items{display:grid;gap:9px}
.fw-it{display:grid;grid-template-columns:44px 1fr auto;gap:11px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.fw-it .ph{width:44px;height:44px;border-radius:7px;background:linear-gradient(135deg,#EBEEF8,#D7DCEE)}
.fw-it b{display:block;font-size:.81rem;color:var(--ink)}
.fw-it em{display:block;font-style:normal;font-size:.71rem;color:var(--muted)}
.fw-it .pr{font-family:var(--font-mono);font-size:.79rem;color:var(--ink);text-align:right}
.fw-it .pr span{display:block;margin-top:4px;background:var(--saffron);color:var(--ink);border-radius:6px;padding:2px 9px;font-size:.68rem;font-weight:700;font-family:var(--font-sans)}
.fw-cart{background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:14px}
.fw-cart>b{display:block;font-size:.82rem;color:var(--ink);margin-bottom:10px}
.fw-cl{display:flex;justify-content:space-between;font-size:.75rem;color:var(--text);margin-bottom:7px}
.fw-cl b{font-family:var(--font-mono);font-weight:500}
.fw-cart hr{border:0;border-top:1px solid var(--line);margin:10px 0}
.fw-cl.tot{font-weight:700;color:var(--ink);font-size:.85rem}
.fw-pay{display:grid;gap:7px;margin-top:12px}
.fw-pay span{border:1.5px solid var(--line);border-radius:8px;padding:7px 10px;font-size:.73rem;color:var(--muted);text-align:center}
.fw-pay span.on{border-color:var(--violet);background:#fff;color:var(--ink);font-weight:600}
.fw-go{margin-top:11px;background:var(--saffron);color:var(--ink);text-align:center;padding:9px;border-radius:8px;font-weight:700;font-size:.8rem}
@media(max-width:720px){.fw-body{grid-template-columns:1fr}.fw-nav i{display:none}}
/* ===== Banquet management page ===== */
.bq-cal{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden}
.bq-ch{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;background:var(--paper);border-bottom:1px solid var(--line)}
.bq-ch b{font-size:.87rem;color:var(--ink)}
.bq-ch span{font-size:.74rem;color:var(--muted);font-family:var(--font-mono)}
.bq-days{display:grid;grid-template-columns:104px repeat(5,1fr);background:var(--paper);border-bottom:1px solid var(--line)}
.bq-days span{padding:8px 4px;text-align:center;font-size:.7rem;color:var(--muted);font-family:var(--font-mono);border-left:1px solid var(--line)}
.bq-days span:first-child{border-left:0;text-align:left;padding-left:16px}
.bq-row{display:grid;grid-template-columns:104px repeat(5,1fr);border-bottom:1px solid var(--line)}
.bq-row:last-child{border-bottom:0}
.bq-row>b{padding:11px 0 11px 16px;font-size:.8rem;color:var(--ink);font-weight:600;display:flex;flex-direction:column;justify-content:center}
.bq-row>b em{font-style:normal;font-size:.68rem;color:var(--muted);font-weight:400}
.bq-cell{border-left:1px solid var(--line);padding:6px 5px;display:flex;flex-direction:column;gap:4px;min-height:52px}
.bq-sl{border-radius:5px;padding:3px 6px;font-size:.63rem;font-weight:600;line-height:1.25;background:var(--paper);color:var(--muted)}
.bq-sl.l{background:#FDF3DE;color:#8A5A05}
.bq-sl.d{background:#EDEFF8;color:var(--violet)}
.bq-sl.b{background:#E7F6F0;color:#0B6E4C}
.bq-key{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.bq-key i{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:.75rem;color:var(--muted)}
.bq-key i::before{content:"";width:11px;height:11px;border-radius:3px;background:var(--line)}
.bq-key i.l::before{background:#F0BE63}.bq-key i.d::before{background:#9CA8D8}.bq-key i.b::before{background:#7CCFAC}
/* menu packages */
.bq-packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:30px}
.bq-pack{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden}
.bq-pack.hi{border-color:var(--saffron);box-shadow:0 14px 34px rgba(242,168,29,.16)}
.bq-ph{padding:18px 20px;background:var(--brand-grad);color:#fff}
.bq-pack.hi .bq-ph{background:linear-gradient(120deg,#8A5A05 0%,#BA5904 60%,#F2A81D 100%)}
.bq-ph b{display:block;font-size:1.05rem}
.bq-ph i{font-style:normal;font-size:.74rem;opacity:.85}
.bq-ph .pr{display:block;font-family:var(--font-mono);font-size:1.6rem;margin-top:8px;line-height:1}
.bq-ph .pr sub{font-size:.66rem;font-family:var(--font-sans);opacity:.85;vertical-align:baseline}
.bq-rules{padding:6px 0 12px}
.bq-rule{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:10px 20px;border-bottom:1px solid var(--line);font-size:.82rem}
.bq-rule:last-child{border-bottom:0}
.bq-rule span{color:var(--text)}
.bq-rule em{display:block;font-style:normal;font-size:.71rem;color:var(--muted);margin-top:2px}
.bq-rule b{font-family:var(--font-mono);font-size:.76rem;color:#fff;background:var(--violet);border-radius:999px;padding:3px 10px;white-space:nowrap}
.bq-pack.hi .bq-rule b{background:var(--magenta)}
/* inclusions */
.bq-inc{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden}
.bq-ih{padding:13px 16px;background:var(--paper);border-bottom:1px solid var(--line);display:flex;justify-content:space-between}
.bq-ih b{font-size:.87rem;color:var(--ink)}
.bq-ih span{font-size:.74rem;color:var(--muted)}
.bq-ir{display:grid;grid-template-columns:24px 1fr auto;gap:11px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--line);font-size:.83rem}
.bq-ir:last-child{border-bottom:0}
.bq-ir .bx{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line);position:relative}
.bq-ir.on .bx{background:var(--saffron);border-color:var(--saffron)}
.bq-ir.on .bx::after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.bq-ir b{font-family:var(--font-mono);color:var(--ink);font-weight:500;white-space:nowrap}
.bq-ir em{display:block;font-style:normal;font-size:.71rem;color:var(--muted)}
.bq-ir.tot{background:var(--paper);font-weight:700}
.bq-ir.tot b,.bq-ir.tot span{color:var(--ink);font-size:.92rem}
@media(max-width:720px){.bq-days,.bq-row{grid-template-columns:78px repeat(5,1fr)}.bq-sl{font-size:0;padding:6px 3px}}
/* ===== Stores + accounting tables ===== */
.mm-stock{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden}
.mm-h{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;background:var(--paper);border-bottom:1px solid var(--line)}
.mm-h b{font-size:.87rem;color:var(--ink)}
.mm-h span{font-size:.74rem;color:var(--muted);font-family:var(--font-mono)}
.mm-r{display:grid;grid-template-columns:1fr 78px 74px 96px;gap:10px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);font-size:.82rem}
.mm-r:last-child{border-bottom:0}
.mm-r b{color:var(--ink);font-weight:600}
.mm-r em{display:block;font-style:normal;font-size:.71rem;color:var(--muted)}
.mm-r i{font-style:normal;font-family:var(--font-mono);text-align:right;color:var(--text)}
.mm-tag{font-size:.68rem;font-weight:700;padding:4px 9px;border-radius:999px;text-align:center;white-space:nowrap}
.mm-tag.ok{background:#E7F6F0;color:#0B6E4C}
.mm-tag.low{background:#FDF3DE;color:#8A5A05}
.mm-tag.out{background:#FBEDE8;color:#A2400B}
.mm-tag.exp{background:#F1F2F7;color:var(--muted)}
.ac-pl{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden}
.ac-ph{padding:14px 16px;background:var(--brand-grad);color:#fff}
.ac-ph b{display:block;font-size:.92rem}.ac-ph span{font-size:.73rem;opacity:.85}
.ac-l{display:grid;grid-template-columns:1fr auto;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);font-size:.83rem}
.ac-l span{color:var(--text)}
.ac-l em{display:block;font-style:normal;font-size:.71rem;color:var(--muted)}
.ac-l b{font-family:var(--font-mono);color:var(--ink);white-space:nowrap}
.ac-l.neg b{color:var(--magenta)}
.ac-l.sub{background:var(--paper);font-weight:600}
.ac-l.tot{background:var(--ink);color:#fff;border-bottom:0}
.ac-l.tot span,.ac-l.tot b{color:#fff;font-size:.95rem;font-weight:700}
@media(max-width:640px){.mm-r{grid-template-columns:1fr 64px 88px}.mm-r i:nth-of-type(2){display:none}}
/* ===== Kitchen display system ===== */
.kd-screen{background:#141a3d;border-radius:16px;padding:16px;box-shadow:0 26px 60px rgba(28,39,127,.32)}
.kd-top{display:flex;justify-content:space-between;align-items:center;padding:0 4px 14px;color:#fff}
.kd-top b{font-size:.92rem}
.kd-top .st{display:flex;gap:7px}
.kd-top .st i{font-style:normal;font-size:.7rem;padding:4px 11px;border-radius:999px;background:rgba(255,255,255,.13);color:#C9D0EE}
.kd-top .st i.on{background:var(--saffron);color:var(--ink);font-weight:700}
.kd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:11px}
.kd-t{background:#fff;border-radius:11px;overflow:hidden;border-top:5px solid var(--violet)}
.kd-t.warn{border-top-color:var(--saffron)}
.kd-t.late{border-top-color:#C0400B}
.kd-t.done{border-top-color:#0E8A5F;opacity:.66}
.kd-th{display:flex;justify-content:space-between;align-items:baseline;padding:9px 11px 7px;border-bottom:1px solid var(--line)}
.kd-th b{font-size:.82rem;color:var(--ink);font-weight:700}
.kd-th span{font-family:var(--font-mono);font-size:.76rem;color:var(--violet)}
.kd-t.warn .kd-th span{color:#8A5A05}
.kd-t.late .kd-th span{color:#A2400B;font-weight:700}
.kd-t.done .kd-th span{color:#0B6E4C}
.kd-src{padding:4px 11px;font-size:.66rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);background:var(--paper)}
.kd-it{padding:7px 11px;font-size:.79rem;color:var(--ink);border-bottom:1px solid var(--line)}
.kd-it:last-of-type{border-bottom:0}
.kd-it b{font-family:var(--font-mono);margin-right:5px;color:var(--violet)}
.kd-it em{display:block;font-style:normal;font-size:.69rem;color:var(--magenta);margin-top:2px}
.kd-bump{padding:8px;text-align:center;font-size:.73rem;font-weight:700;background:var(--paper);color:var(--ink);border-top:1px solid var(--line)}
.kd-t.done .kd-bump{background:#E7F6F0;color:#0B6E4C}
.kd-key{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;justify-content:center}
.kd-key i{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:.75rem;color:var(--muted)}
.kd-key i::before{content:"";width:11px;height:11px;border-radius:3px;background:var(--violet)}
.kd-key i.warn::before{background:var(--saffron)}
.kd-key i.late::before{background:#C0400B}
.kd-key i.done::before{background:#0E8A5F}
/* all-day counts */
.kd-all{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.kd-ah{padding:12px 15px;background:var(--paper);border-bottom:1px solid var(--line);display:flex;justify-content:space-between}
.kd-ah b{font-size:.85rem;color:var(--ink)}
.kd-ah span{font-size:.73rem;color:var(--muted)}
.kd-ar{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:10px 15px;border-bottom:1px solid var(--line);font-size:.83rem}
.kd-ar:last-child{border-bottom:0}
.kd-ar em{display:block;font-style:normal;font-size:.71rem;color:var(--muted)}
.kd-ar b{font-family:var(--font-mono);font-size:1.05rem;color:var(--violet);min-width:34px;text-align:right}
.kd-ar.hot b{color:var(--magenta)}
/* ===== Product updates timeline ===== */
.up-filter{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:34px 0 8px}
.up-filter button{font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;border:1px solid var(--line);
background:#fff;color:var(--muted);border-radius:999px;padding:7px 16px;transition:.15s}
.up-filter button:hover{border-color:var(--violet);color:var(--violet)}
.up-filter button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.up-year{margin-top:44px}
.up-year>h2{font-size:1.6rem;color:var(--ink);margin:0 0 4px;letter-spacing:-.02em}
.up-year>h2::after{content:"";display:block;width:52px;height:4px;border-radius:2px;background:var(--brand-grad);margin-top:10px}
.up-list{position:relative;margin-top:26px;padding-left:30px}
.up-list::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--line)}
.up-item{position:relative;padding-bottom:28px}
.up-item:last-child{padding-bottom:0}
.up-item::before{content:"";position:absolute;left:-30px;top:5px;width:14px;height:14px;border-radius:50%;
background:#fff;border:3px solid var(--violet)}
.up-item.hi::before{border-color:var(--saffron);background:var(--saffron)}
.up-meta{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:6px}
.up-meta time{font-family:var(--font-mono);font-size:.78rem;color:var(--muted)}
.up-tag{font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
padding:3px 9px;border-radius:999px;background:var(--paper);color:var(--violet)}
.up-tag.new{background:#EDEFF8;color:var(--violet)}
.up-tag.imp{background:#E7F6F0;color:#0B6E4C}
.up-tag.int{background:#E8F1FB;color:#12558F}
.up-tag.comp{background:#FBEDE8;color:#A2400B}
.up-tag.mile{background:var(--accent-soft);color:#8A5A05}
.up-item h3{font-size:1.02rem;color:var(--ink);margin:0 0 5px;letter-spacing:-.01em}
.up-item p{font-size:.89rem;color:var(--muted);margin:0;line-height:1.62;max-width:66ch}
.up-note{margin-top:44px;padding:18px 20px;background:var(--paper);border:1px solid var(--line);
border-radius:12px;font-size:.82rem;color:var(--muted);line-height:1.6}
@media(max-width:560px){.up-year>h2{font-size:1.35rem}.up-list{padding-left:24px}.up-item::before{left:-24px;width:12px;height:12px}}
/* ===== Hardware product cards + spec lightbox ===== */
.hw-shot{display:block;width:100%;max-width:280px;margin:0 auto 14px;border:1px solid var(--line);
border-radius:10px;background:#fff;padding:10px;cursor:zoom-in;transition:.18s}
.hw-shot:hover{border-color:var(--violet);box-shadow:0 10px 26px rgba(28,39,127,.14);transform:translateY(-2px)}
.hw-shot img{display:block;width:100%;height:auto;border-radius:6px}
.hw-more{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;color:var(--violet);
background:none;border:0;padding:0;cursor:pointer;font-family:inherit}
.hw-more:hover{color:var(--ink);text-decoration:underline}
.hw-more::after{content:"↗";font-size:.9em}
#hw-lb{position:fixed;inset:0;z-index:9999;display:none;place-items:center;padding:24px;
background:rgba(15,20,50,.82);backdrop-filter:blur(3px)}
#hw-lb.on{display:grid}
#hw-lb .box{background:#fff;border-radius:14px;max-width:1100px;width:100%;max-height:92vh;
overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.4)}
#hw-lb .bar{display:flex;justify-content:space-between;align-items:center;gap:14px;
padding:14px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;border-radius:14px 14px 0 0}
#hw-lb .bar b{font-size:.98rem;color:var(--ink)}
#hw-lb .bar span{font-size:.78rem;color:var(--muted);display:block;font-weight:400;margin-top:2px}
#hw-lb .x{font:inherit;font-size:1.5rem;line-height:1;border:0;background:var(--paper);color:var(--ink);
width:38px;height:38px;border-radius:9px;cursor:pointer;flex:none}
#hw-lb .x:hover{background:var(--ink);color:#fff}
#hw-lb img{display:block;width:100%;height:auto}
#hw-lb .foot{padding:14px 18px;border-top:1px solid var(--line);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
#hw-lb .foot p{margin:0;font-size:.8rem;color:var(--muted);flex:1;min-width:220px}
@media(max-width:560px){#hw-lb{padding:10px}#hw-lb .bar b{font-size:.9rem}}
/* ===== Long-form guide/article toolkit ===== */
.ar-meta{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-family:var(--font-mono);
font-size:.76rem;color:var(--muted);margin-top:14px}
.ar-meta span{display:inline-flex;align-items:center;gap:6px}
.ar-meta span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--line)}
.ar-meta span:first-child::before{display:none}
/* table of contents */
.ar-toc{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:20px 24px;margin:0 0 34px}
.ar-toc b{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:12px}
.ar-toc ol{margin:0;padding-left:20px;columns:2;column-gap:34px}
.ar-toc li{margin-bottom:7px;font-size:.88rem;break-inside:avoid}
.ar-toc a{color:var(--ink);text-decoration:none}
.ar-toc a:hover{color:var(--violet);text-decoration:underline}
@media(max-width:640px){.ar-toc ol{columns:1}}
/* key takeaways */
.ar-key{background:linear-gradient(180deg,#FDF8EC,#FFFDF8);border:1px solid #F0DCAE;border-left:5px solid var(--saffron);
border-radius:12px;padding:20px 24px;margin:0 0 34px}
.ar-key b{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:#8A5A05;margin-bottom:10px}
.ar-key ul{margin:0;padding-left:18px}
.ar-key li{margin-bottom:7px;font-size:.9rem;color:var(--text);line-height:1.6}
.ar-key li:last-child{margin-bottom:0}
/* callouts */
.ar-note{border-left:4px solid var(--violet);background:var(--paper);border-radius:0 10px 10px 0;
padding:16px 20px;margin:28px 0;font-size:.9rem;color:var(--text);line-height:1.65}
.ar-note b{color:var(--ink)}
.ar-note.warn{border-left-color:var(--magenta);background:#FDF6F2}
.ar-note.tip{border-left-color:var(--emerald);background:#F2FAF7}
/* figures */
.ar-fig{margin:32px 0}
.ar-fig img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:12px;background:#fff}
.ar-fig figcaption{margin-top:10px;font-size:.8rem;color:var(--muted);text-align:center;line-height:1.5}
/* stat row */
.ar-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:30px 0}
.ar-stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 16px;text-align:center}
.ar-stat b{display:block;font-size:1.5rem;font-family:var(--font-mono);color:var(--violet);line-height:1}
.ar-stat span{display:block;font-size:.78rem;color:var(--muted);margin-top:7px;line-height:1.4}
/* pull quote */
.ar-quote{border:0;border-top:2px solid var(--line);border-bottom:2px solid var(--line);margin:34px 0;padding:22px 0;
font-size:1.12rem;line-height:1.6;color:var(--ink);font-weight:500;text-align:center}
/* numbered steps */
.ar-steps{counter-reset:ars;list-style:none;padding:0;margin:28px 0}
.ar-steps li{counter-increment:ars;position:relative;padding-left:52px;margin-bottom:22px}
.ar-steps li::before{content:counter(ars);position:absolute;left:0;top:-2px;width:34px;height:34px;border-radius:50%;
background:var(--brand-grad);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.9rem}
.ar-steps li b{display:block;color:var(--ink);margin-bottom:3px}
/* checklist / do-dont */
.ar-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:30px 0}
.ar-col{border:1px solid var(--line);border-radius:12px;padding:18px 20px;background:#fff}
.ar-col h4{margin:0 0 10px;font-size:.95rem;color:var(--ink)}
.ar-col.good{border-color:#B6E2D0;background:#F5FCF9}
.ar-col.good h4{color:#0B6E4C}
.ar-col.bad{border-color:#F3D6C6;background:#FEF8F5}
.ar-col.bad h4{color:#A2400B}
.ar-col ul{margin:0;padding-left:17px}
.ar-col li{font-size:.86rem;margin-bottom:7px;line-height:1.55}
@media(max-width:640px){.ar-cols{grid-template-columns:1fr}}
/* data table upgrades */
table.data th{background:var(--ink);color:#fff;font-weight:600}
table.data tr:nth-child(even) td{background:var(--paper)}
table.data td.yes{color:#0B6E4C;font-weight:600}
table.data td.no{color:var(--magenta)}
/* related guides */
.ar-rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:16px}
.ar-rel a{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;
text-decoration:none;transition:.15s}
.ar-rel a:hover{border-color:var(--violet);box-shadow:0 8px 22px rgba(28,39,127,.10);transform:translateY(-2px)}
.ar-rel b{display:block;font-size:.9rem;color:var(--ink);margin-bottom:4px}
.ar-rel span{font-size:.8rem;color:var(--muted);line-height:1.45}
/* blog hub cards */
.bl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-top:30px}
.bl-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:15px;
overflow:hidden;text-decoration:none;transition:.18s}
.bl-card:hover{border-color:var(--violet);box-shadow:0 14px 34px rgba(28,39,127,.12);transform:translateY(-3px)}
.bl-card .th{background:var(--paper);border-bottom:1px solid var(--line);padding:18px;display:grid;place-items:center}
.bl-card .th img{width:100%;max-width:230px;height:auto}
.bl-card .bd{padding:18px 20px 20px;flex:1;display:flex;flex-direction:column}
.bl-card .tag{font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--violet);margin-bottom:7px}
.bl-card h3{font-size:1.02rem;color:var(--ink);margin:0 0 7px;line-height:1.35}
.bl-card p{font-size:.86rem;color:var(--muted);margin:0 0 14px;line-height:1.55;flex:1}
.bl-card .rd{font-size:.78rem;font-weight:700;color:var(--violet)}
/* ============ pricing v2: six feature-based plans (pages/pricing.html, .zp-*) ============ */
.zp section[id]{scroll-margin-top:84px}
.zp-wide{max-width:1440px}
/* page head */
.zp-head{background:radial-gradient(900px 420px at 92% -10%,rgba(52,63,140,.10),transparent 60%),#fff}
.zp-ribbon{display:inline-flex;flex-wrap:wrap;gap:4px 10px;align-items:center;background:var(--ink);color:#fff;
font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
padding:6px 14px;border-radius:999px;margin:16px 0 26px}
.zp-ribbon i{font-style:normal;color:var(--saffron)}
.zp-hero{display:grid;grid-template-columns:1.4fr .6fr;gap:48px;align-items:center}
.zp-head h1 em{font-style:normal;background:linear-gradient(100deg,var(--ink),var(--grad-b));-webkit-background-clip:text;background-clip:text;color:transparent}
.zp-head .lead{margin:16px 0 0}
.zp-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.zp-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.zp-chips li{font-family:var(--font-mono);font-size:.74rem;color:var(--ink);background:#EBEEF8;border-radius:999px;padding:6px 12px}
.zp-chips li::before{content:"✓ ";color:var(--emerald);font-weight:700}
.zp-receipt{max-width:320px}
.zp-receipt dl{margin:0}
.zp-receipt dl div{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;gap:14px;
padding:10px 0;border-bottom:1px dashed var(--line)}
.zp-receipt dl div:last-child{border-bottom:0}
.zp-receipt dt{font-size:1.55rem;font-weight:700;color:var(--magenta);line-height:1}
.zp-receipt dd{margin:0;font-size:.74rem;color:var(--text);line-height:1.4}
.zp-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px;padding-top:18px;border-top:1px solid var(--line)}
.zp-jump a{font-size:.88rem;font-weight:600;text-decoration:none;color:var(--text);background:#fff;
border:1px solid var(--line);border-radius:999px;padding:7px 15px;transition:border-color .15s,color .15s}
.zp-jump a:hover{border-color:var(--violet);color:var(--ink)}
.zp-jump a.zp-jump-cta{margin-left:auto;background:var(--ink);border-color:var(--ink);color:#fff}
.zp-jump a.zp-jump-cta:hover{background:var(--violet);color:#fff}
/* billing switch (needs JS; without it every card also shows its 3-year price) */
.zp-term{display:none;width:max-content;max-width:100%;margin:0 auto 34px;border:1.5px solid var(--line);
background:#fff;border-radius:999px;padding:5px;gap:5px}
.js .zp-term{display:flex}
.zp-term button{border:0;background:transparent;font-family:var(--font-body);font-weight:700;font-size:.9rem;
color:var(--muted);padding:9px 22px;border-radius:999px;cursor:pointer}
.zp-term button[aria-pressed="true"]{background:var(--saffron);color:var(--ink)}
/* plan cards */
.zp-cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;align-items:stretch}
.zp-plan{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 18px 18px;
display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.zp-plan:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(28,39,127,.12);border-color:#B9C0DE}
.zp-plan.peer{background:linear-gradient(180deg,#F1F3FA 0,#fff 150px)}
.zp-plan.featured{border:2px solid var(--saffron);background:linear-gradient(180deg,#FFF8EA 0,#fff 150px);
box-shadow:0 18px 40px rgba(242,168,29,.18)}
.zp-plan.featured:hover{border-color:var(--saffron);box-shadow:0 20px 44px rgba(186,89,4,.18)}
.zp-plan-top{display:flex;flex-wrap:wrap;align-items:center;align-content:flex-start;gap:6px;min-height:46px}
.zp-plan-label{font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--violet)}
.zp-badge{font-family:var(--font-mono);font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
border-radius:999px;padding:3px 8px;white-space:nowrap}
.zp-badge.hot{background:var(--magenta);color:#fff}
.zp-badge.value{background:#E8F7EF;color:#0B6E4C}
.zp-badge.track{background:#E3E7F5;color:var(--violet)}
.zp-badge.track.food{background:var(--accent-soft);color:#8A4A06}
.zp-plan h3{font-size:1.18rem;margin:12px 0 6px;min-height:2.4em}
.zp-plan-desc{font-size:.84rem;line-height:1.5;color:var(--muted);margin:0 0 12px;min-height:7.5em}
.zp-price{display:flex;align-items:baseline;gap:3px;margin:0;font-family:var(--font-mono);white-space:nowrap}
.zp-amt{font-size:1.75rem;font-weight:700;color:var(--magenta);letter-spacing:-.02em;line-height:1.15}
.zp-per{font-size:.78rem;color:var(--muted)}
.zp-cap{font-size:.76rem;color:var(--muted);margin:3px 0 0;line-height:1.45}
.zp-alt{font-size:.76rem;font-weight:600;color:var(--violet);margin:2px 0 14px}
.zp-plan .zp-cta{display:block;text-align:center;padding:11px 8px;font-size:.88rem;margin:0 0 14px;white-space:nowrap}
.zp-plan .zp-cta:not(.gold){background:#E3E7F5;color:var(--ink)}
.zp-plan .zp-cta:not(.gold):hover{background:var(--violet);color:#fff}
.zp-feats{margin:0}
.zp-feats li{font-size:.84rem;line-height:1.45;margin:0;padding:8px 0 8px 22px;border-top:1px dashed var(--line)}
.zp-feats li::before{top:8px}
.zp-feats li:first-child{font-weight:600;color:var(--ink)}
.zp-path{display:flex;gap:16px;align-items:center;margin-top:26px;background:#fff;border:1px solid var(--line);
border-left:5px solid var(--violet);border-radius:0 14px 14px 0;padding:16px 22px}
.zp-path-sym{flex:none;width:50px;height:50px;border-radius:50%;background:#E3E7F5;color:var(--violet);
display:grid;place-items:center;font-size:1.5rem;font-weight:800}
.zp-path strong{font-size:1rem}
.zp-path p{margin:3px 0 0;font-size:.9rem}
.zp-values{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px}
.zp-values div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 14px;text-align:center}
.zp-values b{display:block;font-family:var(--font-display);font-size:1.35rem;color:var(--ink)}
.zp-values span{font-size:.82rem;color:var(--muted)}
.zp-fine{font-size:.78rem;line-height:1.6;color:var(--muted);margin:16px 0 0}
/* comparison matrix */
.zp-compare,.zp-addons,.zp-faq{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.zp-note{margin:0 0 22px;font-size:.95rem}
.zp-tools{display:none;flex-wrap:wrap;align-items:center;gap:12px 22px;background:var(--paper);border:1px solid var(--line);
border-radius:12px;padding:12px 16px;margin-bottom:12px}
.js .zp-tools{display:flex}
.zp-tools label{display:flex;align-items:center;gap:9px;font-size:.88rem;font-weight:600;color:var(--ink)}
.zp-tools select{font:inherit;font-weight:500;color:var(--ink);background:#fff;border:1px solid #CDD2E6;border-radius:8px;padding:7px 10px}
.zp-tools input{width:17px;height:17px;accent-color:var(--violet)}
.zp-reset{margin-left:auto;background:none;border:0;font:inherit;font-size:.88rem;font-weight:700;color:var(--violet);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.zp-hint{display:none;font-size:.82rem;color:var(--muted);margin:0 0 10px}
.zp-scroller{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:#fff}
/* desktop: the table scrolls with the page (no box-in-a-page), and the plan names pin just under the site menu */
@media (min-width:1100px){
.zp-scroller{overflow:visible}
.zp-scroller .zp-matrix thead th{top:var(--hdr-h,76px)} /* beats the table's own top:0 further down */
.zp-scroller .zp-matrix thead th:first-child{border-top-left-radius:13px}
.zp-scroller .zp-matrix thead th:last-child{border-top-right-radius:13px}
}
.zp-matrix{width:100%;min-width:980px;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:.88rem}
.zp-matrix th,.zp-matrix td{padding:10px 8px;border-top:1px solid var(--line);text-align:center;vertical-align:middle}
.zp-matrix thead th{position:sticky;top:0;z-index:3;border-top:0;background:var(--ink);color:#fff;
font-family:var(--font-mono);font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:14px 8px}
.zp-matrix thead th:first-child{left:0;z-index:4;width:30%;text-align:left;padding-left:16px}
.zp-matrix thead th.hot{background:var(--saffron);color:var(--ink)}
.zp-matrix tbody th[scope="row"]{position:sticky;left:0;z-index:2;background:#fff;text-align:left;font-weight:500;
color:var(--ink);padding:10px 14px 10px 16px;border-right:1px solid var(--line);line-height:1.4}
.zp-matrix tbody tr:nth-child(even)>*{background:var(--paper)}
.zp-matrix tbody td:nth-child(3){background:#FFF8EA}
.zp-matrix tbody tr:nth-child(even)>td:nth-child(3){background:#FCF1DC}
.zp-matrix tbody tr:not(.zp-group):hover>*{background:#EBEEF8}
.zp-matrix .zp-group th{background:#E3E7F5!important;color:var(--ink);text-align:left;padding:11px 16px;
font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.zp-matrix .zp-group span{position:sticky;left:16px}
.zp-matrix .y span:first-child{color:#0B6E4C;font-weight:800;font-size:1.15rem}
.zp-matrix .n span{color:#B7BCD3;font-size:1.05rem}
.zp-wa{display:block;font-family:var(--font-mono);font-size:.66rem;font-weight:600;color:var(--violet);line-height:1.25;margin-top:2px}
.zp-addon{display:inline-block;background:var(--accent-soft);color:#8A4A06;font-family:var(--font-mono);font-size:.68rem;
font-weight:700;border-radius:6px;padding:3px 8px}
.zp-legend{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;margin:16px 0 0;font-size:.8rem;color:var(--muted)}
.zp-legend b{color:var(--ink)}
.zp-legend b.y{color:#0B6E4C}
.zp-legend b.n{color:#9AA0BC}
/* OTA connect */
.zp-ota-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
.zp-panel{padding:28px}
.zp-panel h3{font-size:1.3rem}
.zp-panel>p:not(.zp-fine):not(.zp-from){color:var(--muted);font-size:.95rem}
.zp-slabs{margin-top:6px}
.zp-slabs table.data{min-width:0}
.zp-slabs td:first-child{font-weight:600;color:var(--ink)}
.zp-from{display:inline-block;background:var(--accent-soft);border:1px solid #F5D9A0;border-radius:10px;padding:9px 14px;
margin:12px 0 0;font-weight:600;color:var(--ink)}
.zp-from strong{font-family:var(--font-mono);color:var(--magenta)}
/* benefits & add-ons */
.cards.zp-3{grid-template-columns:repeat(3,1fr);margin-top:0}
.zp-benefits .card img{margin-bottom:14px}
.zp-benefits .card p,.zp-addon-card p{font-size:.92rem;margin:0}
.zp-addon-card{display:flex;flex-direction:column;gap:6px}
.zp-addon-card p{flex:1}
/* add-on cards: picture on top, then title, struck "was" price, price, term, description */
.zp-addon-card.ao{padding:0;gap:0;overflow:hidden;border-radius:18px;transition:transform .2s ease,box-shadow .2s ease}
.zp-addon-card.ao:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(28,39,127,.12)}
.ao-vis{aspect-ratio:4/3;background:var(--ink)}
.ao-vis img{display:block;width:100%;height:100%;object-fit:cover}
.ao-vis.has-logo{position:relative}
.ao-logo{position:absolute;top:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;
height:44px;min-width:120px;padding:0 18px;background:#fff;border-radius:12px;box-shadow:0 8px 20px rgba(11,18,64,.25)}
.ao-vis .ao-logo img{width:auto;height:26px;max-width:140px;object-fit:contain}
.ao-logo b{font-family:var(--font-display);font-size:1.25rem;font-weight:800;color:#111;letter-spacing:-.01em}
.zp-addon-card.ao p.ao-hl{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:5px 11px 5px 9px;
border-radius:999px;background:#E8F7EF;color:#0B6E4C;font-size:.78rem;font-weight:700;line-height:1.25}
.ao-hl::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;background:#0E8A5F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.ao-chip{align-self:flex-start;margin-top:12px;font-family:var(--font-mono);font-size:.72rem;font-weight:700;color:#0B6E4C;background:#E8F7EF;border-radius:999px;padding:4px 10px}
.ao-desc a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.ao-vis.photo{position:relative;overflow:hidden}
.ao-vis.photo img{position:absolute;inset:0;object-fit:contain;padding:10px;box-sizing:border-box} /* supplied product photos: whole device inside the 4:3 frame */
.ao-body{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px}
.ao-body h3{font-size:1.05rem;line-height:1.3;margin:0}
.zp-addon-card.ao p{flex:none;margin:0}
.ao-sub{margin-top:4px!important;font-family:var(--font-mono);font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--magenta)}
.ao-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin-top:12px!important}
.ao-price s{font-family:var(--font-mono);font-size:.9rem;color:var(--muted)}
.ao-price b{font-family:var(--font-mono);font-size:1.45rem;font-weight:800;color:var(--magenta);letter-spacing:-.02em}
.ao-price b.quote{font-family:var(--font-display);font-size:1.2rem;color:var(--ink)}
.ao-price em{font-style:normal;font-size:.82rem;color:var(--muted)}
.ao-price span{font-family:var(--font-mono);font-size:.78rem;font-weight:700;color:var(--ink)}
.ao-term{align-self:flex-start;margin-top:8px;font-family:var(--font-mono);font-size:.74rem;font-weight:700;color:var(--violet);background:#EBEEF8;border-radius:999px;padding:3px 10px}
.zp-addon-card.ao p.ao-desc{flex:1;margin-top:12px;font-size:.9rem;color:var(--text)}
.ao-note{margin-top:14px!important;padding-top:12px;border-top:1px solid var(--line);font-size:.78rem;font-weight:600;color:var(--muted)}
.zp-tag{align-self:flex-start;margin-top:10px;font-family:var(--font-mono);font-size:.68rem;font-weight:700;color:var(--violet);
background:#E3E7F5;border-radius:999px;padding:4px 10px}
.zp-faq .bl-faq{margin:0 auto}
/* closing CTA */
.zp-cta-band .eyebrow{color:#F7D58F}
.zp-cta-band .eyebrow::before{background:repeating-linear-gradient(90deg,#F7D58F 0 2px,transparent 2px 4px,#F7D58F 4px 7px,transparent 7px 9px,#F7D58F 9px 10px,transparent 10px 13px)}
@media(max-width:1279px){
.zp-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.zp-plan{padding:24px 22px 20px}
.zp-plan h3,.zp-plan-desc{min-height:0}
.zp-plan-top{min-height:24px}
}
@media(max-width:900px){
.zp-hero{grid-template-columns:1fr;gap:30px}
.zp-receipt{margin:0 auto}
.zp-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.zp-values{grid-template-columns:repeat(2,1fr)}
.zp-hint{display:block}
.zp-ota-grid{grid-template-columns:1fr}
.cards.zp-3{grid-template-columns:repeat(2,1fr)}
.zp-matrix{min-width:860px}
.zp-matrix thead th:first-child{width:230px}
}
@media(max-width:640px){
.zp-jump{flex-wrap:nowrap;overflow-x:auto;margin-right:-18px;padding-right:18px;padding-bottom:4px} /* bleed = the 18px gutter */
.zp-jump a{white-space:nowrap}
.zp-jump a.zp-jump-cta{margin-left:0}
.zp-term button{padding:9px 14px;font-size:.85rem}
.zp-cards{grid-template-columns:1fr}
.zp-path{align-items:flex-start;padding:14px 16px}
.zp-path-sym{width:40px;height:40px;font-size:1.2rem}
.zp-tools{flex-direction:column;align-items:stretch}
.zp-tools label{min-width:0}
.zp-tools select{flex:1;min-width:0;width:100%}
.zp-ribbon{border-radius:12px}
.zp-reset{margin-left:0;align-self:flex-start;padding:0}
.zp-matrix{min-width:780px;font-size:.84rem}
.zp-matrix thead th:first-child{width:170px}
.zp-panel{padding:22px 18px}
.cards.zp-3{grid-template-columns:1fr}
}
/* add-ons page: plan-inclusion badge and partner-fee note */
.zp-inc{margin:-2px 0 10px}
.zp-note-sm{font-size:.8rem;color:var(--muted);margin-top:10px}
/* pricing: "Most popular" tag in the Reach column header of the comparison grid */
.zp-th-tag{display:block;width:max-content;margin:5px auto 0;background:var(--magenta);color:#fff;
font-size:.56rem;letter-spacing:.06em;line-height:1.3;padding:2px 8px;border-radius:999px}
/* pricing: 1-year strikethrough price + discount badge */
.zp-was-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 2px}
.zp-was-row[hidden]{display:none}
.zp-was{font-family:var(--font-mono);font-size:.95rem;color:var(--muted)}
.zp-off{font-family:var(--font-mono);font-size:.62rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
background:var(--emerald);color:#fff;border-radius:999px;padding:3px 8px}
.zp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* 3-year view: per-term label on its own line so 6-digit prices fit the six-column cards */
.zp-price{flex-wrap:wrap}
@media(min-width:1280px){.zp-cards.three .zp-per{flex-basis:100%}.zp-cards.three .zp-amt{font-size:1.6rem}}
/* home: booking band clips 3D/laptop overflow */
.ix-ecom{overflow-x:clip}
/* ============ home: laptop booking walkthrough (.lt-*) ============
Four scenes play on a 600x375 canvas scaled to the screen (--k is set by the
page script). Each scene's animations restart when its data-step becomes
active; with reduced motion the scenes show their finished state and the
step buttons switch between them. */
.lt{position:relative;min-width:0;--dur:4.2s}
.lt-device{position:relative;padding:0 3%}
.lt-lid{position:relative;padding:3.4% 3.2% 3.6%;border-radius:16px 16px 5px 5px;
background:linear-gradient(160deg,#30355A 0%,#171A2E 55%,#0E1020 100%);
box-shadow:inset 0 0 0 1px #3B4166,inset 0 2px 0 rgba(255,255,255,.08),0 30px 50px -18px rgba(28,39,127,.45)}
.lt-lid::before{content:"";position:absolute;top:1.4%;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#090B16;box-shadow:inset 0 0 0 1.5px #2C3150}
.lt-screen{position:relative;aspect-ratio:16/10;border-radius:4px;overflow:hidden;background:#fff}
.lt-screen::after{content:"";position:absolute;inset:0;z-index:20;pointer-events:none;
background:linear-gradient(118deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 18%,transparent 30%)}
.lt-base{position:relative;height:15px;margin:0 -3%;border-radius:2px 2px 18px 18px;
background:linear-gradient(180deg,#F5F6FB 0%,#DADDE9 50%,#A9AEC4 100%);box-shadow:inset 0 1px 0 #fff,0 10px 18px -8px rgba(14,16,32,.35)}
.lt-base i{position:absolute;top:0;left:50%;width:15%;height:5px;transform:translateX(-50%);border-radius:0 0 8px 8px;background:linear-gradient(#BCC1D4,#D8DBE7)}
.lt-floor{height:26px;margin:-4px 6% 0;background:radial-gradient(50% 50% at 50% 40%,rgba(28,39,127,.30),transparent 72%);filter:blur(5px);animation:lt-breathe 7s ease-in-out infinite}
@keyframes lt-breathe{50%{opacity:.6;transform:scaleX(.92)}}
.lt-canvas{position:absolute;left:0;top:0;width:600px;height:375px;zoom:var(--k,.86);
background:#fff;font-family:var(--font-body);color:var(--text);line-height:1.35}
.lt-chrome{position:absolute;inset:0 0 auto;height:30px;display:flex;align-items:center;padding:0 12px;background:#ECEEF6;border-bottom:1px solid #DDE0EC}
.lt-dots{display:flex;gap:6px}
.lt-dots i{width:9px;height:9px;border-radius:50%;background:#F0695B}
.lt-dots i:nth-child(2){background:#F2B33D}.lt-dots i:nth-child(3){background:#4CC264}
.lt-url{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;width:290px;height:19px;padding:0 10px;
background:#fff;border-radius:6px;font-size:10px;color:var(--muted)}
.lt-url b{display:none;font-weight:500}
.lt[data-step="1"] .u1,.lt[data-step="2"] .u2,.lt[data-step="3"] .u3,.lt[data-step="4"] .u4{display:inline}
.lt-view{position:absolute;top:30px;left:0;right:0;bottom:0;overflow:hidden;background:#fff}
.lt-scene{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(12px) scale(.985);
transition:opacity .5s ease,transform .7s cubic-bezier(.2,.7,.3,1),visibility 0s linear .5s}
.lt[data-step="1"] .lt-s1,.lt[data-step="2"] .lt-s2,.lt[data-step="3"] .lt-s3,.lt[data-step="4"] .lt-s4{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.lt-btn{display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--saffron);color:var(--ink);font-weight:700;font-size:11px}
/* scene 1: hotel website search */
.lt-nav{height:36px;display:flex;align-items:center;gap:16px;padding:0 22px;font-size:10px;color:var(--muted)}
.lt-nav b{margin-right:auto;font-family:var(--font-display);font-size:14px;color:var(--ink)}
.lt-nav em{font-style:normal;font-weight:700;color:var(--ink);border:1px solid var(--ink);border-radius:999px;padding:3px 10px}
.lt-hero{position:absolute;top:36px;left:0;right:0;height:222px;overflow:hidden;
background:linear-gradient(165deg,#1C277F 0%,#343F8C 45%,#8E6FA8 78%,#F2A81D 120%)}
.lt-sun{position:absolute;right:90px;top:58px;width:58px;height:58px;border-radius:50%;background:radial-gradient(circle,#FFE2A3,#F2A81D 70%);box-shadow:0 0 40px 12px rgba(242,168,29,.45)}
.lt-hill{position:absolute;bottom:-60px;border-radius:50%}
.lt-hill.h1{left:-60px;width:420px;height:150px;background:#232E82}
.lt-hill.h2{right:-80px;width:460px;height:130px;background:#1A2266}
.lt-h{position:absolute;left:24px;top:46px;margin:0;font-family:var(--font-display);font-size:24px;font-weight:700;color:#fff;letter-spacing:-.01em}
.lt-sub{position:absolute;left:24px;top:82px;margin:0;font-size:11px;color:#E1E4F1}
.lt-search{position:absolute;left:24px;right:24px;top:220px;height:68px;display:grid;grid-template-columns:1fr 1fr 1fr 150px;gap:8px;padding:10px;
background:#fff;border-radius:12px;box-shadow:0 14px 30px rgba(28,39,127,.18)}
.lt-f{display:flex;flex-direction:column;justify-content:center;padding:0 10px;border-radius:8px;background:var(--paper);font-size:11.5px;font-weight:700;color:var(--ink)}
.lt-f small{font-size:9px;font-weight:500;color:var(--muted)}
.lt-go{font-size:12px}
.lt-perks{position:absolute;left:24px;right:24px;top:304px;display:flex;justify-content:center;gap:22px;margin:0;font-size:10px;font-weight:600;color:var(--violet)}
.lt-perks span::before{content:"✓ ";color:var(--emerald)}
/* scene 2: room selection */
.lt-crumb{position:absolute;left:22px;top:12px;margin:0;font-size:10px;color:var(--muted)}
.lt-crumb b{font-family:var(--font-display);font-size:13px;color:var(--ink);margin-right:4px}
.lt-rooms{position:absolute;left:22px;top:42px;width:370px;display:flex;flex-direction:column;gap:9px}
.lt-room{height:88px;display:grid;grid-template-columns:92px 1fr 92px;gap:10px;padding:9px;border:1.5px solid var(--line);border-radius:10px;background:#fff}
.lt-room.r1{border-color:var(--saffron);background:#FFF8EA;box-shadow:0 8px 20px rgba(242,168,29,.18)}
.lt-ph{border-radius:7px;background:linear-gradient(140deg,#485396,#1C277F)}
.lt-ph.p2{background:linear-gradient(140deg,#7FA7C9,#343F8C)}.lt-ph.p3{background:linear-gradient(140deg,#F2C46D,#BA5904)}
.lt-room>div:not(.lt-rp){display:flex;flex-direction:column;gap:3px;min-width:0}
.lt-room b{font-size:12px;color:var(--ink)}
.lt-room small{font-size:9px;color:var(--muted)}
.lt-chips{display:flex;gap:4px;margin-top:2px}
.lt-chips em{font-style:normal;font-size:8px;color:var(--violet);background:#EBEEF8;border-radius:999px;padding:2px 6px}
.lt-rp{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;text-align:right}
.lt-rp b{font-family:var(--font-mono);font-size:13px;color:var(--magenta)}
.lt-rp small{margin-top:-14px}
.lt-sel,.lt-ghost{width:70px;height:24px;font-size:10px}
.lt-ghost{background:#fff;border:1px solid var(--line);color:var(--violet)}
.lt-sum{position:absolute;top:42px;right:22px;bottom:21px;width:170px;display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:10px;background:var(--paper);border:1px solid var(--line)}
.lt-sum b{font-size:12px;color:var(--ink)}
.lt-sum>small{font-size:9px;color:var(--muted)}
.lt-pick{display:flex;justify-content:space-between;gap:8px;font-size:9.5px;color:var(--text);padding:6px 0;border-bottom:1px solid var(--line)}
.lt-tot{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;padding-top:4px}
.lt-tot b{font-family:var(--font-mono);font-size:15px;color:var(--magenta)}
.lt-cont{margin-top:auto;height:30px}
/* scene 3: guest details and payment */
.lt-form,.lt-pay{position:absolute;top:18px;bottom:18px;padding:14px;border:1px solid var(--line);border-radius:12px;background:#fff}
.lt-form{left:22px;width:330px}
.lt-pay{right:22px;width:220px;display:flex;flex-direction:column;gap:4px;background:var(--paper);overflow:hidden}
.lt-form>b,.lt-pay>b{font-size:13px;color:var(--ink)}
.lt-form label{display:block;margin-top:12px;font-size:9.5px;color:var(--muted)}
.lt-in{display:flex;align-items:center;height:30px;margin-top:4px;padding:0 10px;border:1.5px solid var(--line);border-radius:7px;font-size:12px;font-weight:600;color:var(--ink)}
.lt-type{white-space:nowrap}
.lt-secure{position:absolute;left:14px;bottom:14px;font-size:9px;color:var(--muted)}
.lt-paybtn{position:absolute;left:14px;right:14px;bottom:42px;height:34px;font-size:12px}
.lt-rzp{position:absolute;left:0;right:0;bottom:18px;text-align:center;font-size:8.5px;color:var(--muted)}
.lt-done{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:#fff;text-align:center}
.lt-spin{position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border:3px solid #E1E4F1;border-top-color:var(--violet);border-radius:50%;opacity:0}
.lt-tick{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--emerald);color:#fff;font-size:22px;font-weight:700;box-shadow:0 10px 22px rgba(14,138,95,.35)}
.lt-done b{font-size:13px;color:var(--ink)}
.lt-done small{font-size:9.5px;color:var(--muted)}
/* scene 4: Zotaki room rack */
.lt-side{position:absolute;left:0;top:0;bottom:0;width:46px;display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:12px;background:var(--ink)}
.lt-z{display:grid;place-items:center;width:28px;height:28px;margin-bottom:6px;border-radius:8px;background:var(--saffron);color:var(--ink);font-family:var(--font-display);font-weight:800;font-size:16px}
.lt-side i{width:18px;height:18px;border-radius:5px;background:rgba(255,255,255,.14)}
.lt-side i.on{background:rgba(242,168,29,.85)}
.lt-app{position:absolute;left:46px;right:0;top:0;bottom:0;background:var(--paper)}
.lt-top{height:40px;display:flex;align-items:center;gap:10px;padding:0 16px;background:#fff;border-bottom:1px solid var(--line)}
.lt-top b{font-family:var(--font-display);font-size:13px;color:var(--ink)}
.lt-top span{font-size:10px;color:var(--muted)}
.lt-top em{margin-left:auto;font-style:normal;font-size:9px;font-weight:700;color:var(--violet);background:#EBEEF8;border-radius:999px;padding:3px 9px}
.lt-rack{margin:12px 14px;padding:6px 10px 8px;border:1px solid var(--line);border-radius:10px;background:#fff}
.lt-rh{display:grid;grid-template-columns:34px repeat(5,1fr);height:22px;align-items:center;font-family:var(--font-mono);font-size:8.5px;color:var(--muted)}
.lt-rr{display:grid;grid-template-columns:34px 1fr;height:36px;align-items:center;border-top:1px solid var(--line)}
.lt-rr>span{font-family:var(--font-mono);font-size:10px;color:var(--muted)}
.lt-tr{position:relative;height:100%;background:repeating-linear-gradient(90deg,transparent 0 calc(20% - 1px),#EEF0F7 calc(20% - 1px) 20%)}
.lt-tr em{position:absolute;top:6px;bottom:6px;display:flex;align-items:center;padding:0 8px;border-radius:6px;font-style:normal;font-size:9px;font-weight:600;white-space:nowrap;overflow:hidden}
.b-walk{background:#D5DAEE;color:var(--ink)}.b-ota{background:#E7E3F4;color:#4B3F8C}.b-grp{background:#D9EEE5;color:#0B6E4C}
.b-new{background:linear-gradient(90deg,#F2A81D,#F7C25C);color:var(--ink);font-weight:700!important;transform-origin:left center}
.lt-toast{position:absolute;right:14px;width:236px;display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;background:#fff;
box-shadow:0 12px 28px rgba(28,39,127,.20);border-left:4px solid var(--saffron)}
.lt-toast.k1{bottom:66px}.lt-toast.k2{bottom:14px;border-left-color:var(--emerald)}
.lt-toast i{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--magenta);font-style:normal;font-weight:700;font-size:12px}
.lt-toast.k2 i{background:#E8F7EF;color:var(--emerald)}
.lt-toast b{display:block;font-size:10.5px;color:var(--ink)}
.lt-toast small{font-size:9px;color:var(--muted)}
/* cursor */
.lt-cursor{position:absolute;left:0;top:0;z-index:10;opacity:0;pointer-events:none;transform:translate(300px,360px);filter:drop-shadow(0 2px 3px rgba(14,16,32,.3))}
.lt-cursor svg{display:block}
.lt-click{position:absolute;left:-6px;top:-5px;width:16px;height:16px;border-radius:50%;border:2px solid var(--saffron);opacity:0}
@keyframes lt-rip{from{opacity:1;transform:scale(.4)}to{opacity:0;transform:scale(2.6)}}
@keyframes lt-press{50%{transform:scale(.93);filter:brightness(.9)}}
/* scene timelines (4.2s each) */
.lt[data-step="1"] .lt-cursor{animation:lt-c1 var(--dur) cubic-bezier(.45,.05,.25,1) both}
@keyframes lt-c1{0%{opacity:0;transform:translate(300px,362px)}12%{opacity:1;transform:translate(300px,342px)}44%,100%{opacity:1;transform:translate(486px,279px)}}
.lt[data-step="1"] .lt-go{animation:lt-press .4s ease 1.95s}
.lt[data-step="2"] .lt-cursor{animation:lt-c2 var(--dur) cubic-bezier(.45,.05,.25,1) both}
@keyframes lt-c2{0%{opacity:1;transform:translate(486px,279px)}44%,100%{opacity:1;transform:translate(344px,135px)}}
.lt[data-step="2"] .lt-sel{animation:lt-press .4s ease 1.95s}
.lt[data-step="2"] .r1{animation:lt-pickcard var(--dur) ease both}
@keyframes lt-pickcard{0%,49%{border-color:var(--line);background:#fff;box-shadow:none}56%,100%{border-color:var(--saffron);background:#FFF8EA;box-shadow:0 8px 20px rgba(242,168,29,.18)}}
.lt[data-step="2"] .lt-sum .lt-pick{animation:lt-appear var(--dur) ease both}
@keyframes lt-appear{0%,50%{opacity:0;transform:translateY(6px)}60%,100%{opacity:1;transform:none}}
.lt[data-step="2"] .lt-cont{animation:lt-enable var(--dur) ease both}
@keyframes lt-enable{0%,50%{background:#E1E4F1;color:var(--muted)}58%,100%{background:var(--saffron);color:var(--ink)}}
.lt[data-step="1"] .lt-click,.lt[data-step="2"] .lt-click{animation:lt-rip .6s ease-out 1.95s}
.lt[data-step="3"] .lt-cursor{animation:lt-c3 var(--dur) cubic-bezier(.45,.05,.25,1) both}
@keyframes lt-c3{0%{opacity:1;transform:translate(344px,135px)}18%,42%{opacity:1;transform:translate(250px,125px)}58%,100%{opacity:1;transform:translate(466px,290px)}}
.lt[data-step="3"] .t1{animation:lt-type .9s steps(13) .35s both}
.lt[data-step="3"] .t2{animation:lt-type .7s steps(15) 1.25s both}
.lt[data-step="3"] .t3{animation:lt-type .8s steps(15) 1.95s both}
@keyframes lt-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.lt[data-step="3"] .lt-paybtn{animation:lt-press .4s ease 2.6s}
.lt[data-step="3"] .lt-click{animation:lt-rip .6s ease-out 2.6s}
.lt[data-step="3"] .lt-done{animation:lt-done var(--dur) ease both}
@keyframes lt-done{0%,64%{opacity:0;visibility:hidden}68%,100%{opacity:1;visibility:visible}}
.lt[data-step="3"] .lt-spin{animation:lt-spinshow var(--dur) linear both,lt-rot .7s linear infinite}
@keyframes lt-spinshow{0%,64%{opacity:0}67%,78%{opacity:1}82%,100%{opacity:0}}
@keyframes lt-rot{to{transform:rotate(360deg)}}
.lt[data-step="3"] .lt-tick,.lt[data-step="3"] .lt-done b,.lt[data-step="3"] .lt-done small{animation:lt-tickin var(--dur) ease both}
@keyframes lt-tickin{0%,78%{opacity:0;transform:scale(.7)}86%{opacity:1;transform:scale(1.08)}92%,100%{opacity:1;transform:none}}
.lt[data-step="4"] .lt-cursor{animation:lt-c4 var(--dur) ease both}
@keyframes lt-c4{0%{opacity:1;transform:translate(466px,290px)}22%,100%{opacity:0;transform:translate(520px,330px)}}
.lt[data-step="4"] .b-new{animation:lt-slot var(--dur) cubic-bezier(.2,.8,.2,1) both}
@keyframes lt-slot{0%,8%{opacity:0;transform:translateX(-40px) scaleX(.3)}24%{opacity:1;transform:none;box-shadow:0 0 0 0 rgba(242,168,29,.5)}34%{box-shadow:0 0 0 6px rgba(242,168,29,.3)}46%,100%{opacity:1;transform:none;box-shadow:0 0 0 0 rgba(242,168,29,0)}}
.lt[data-step="4"] .k1{animation:lt-toast .55s cubic-bezier(.2,.8,.2,1) 1s both}
.lt[data-step="4"] .k2{animation:lt-toast .55s cubic-bezier(.2,.8,.2,1) 2s both}
@keyframes lt-toast{from{opacity:0;transform:translateX(34px)}}
/* step bar */
.lt-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0 0;padding:0}
.lt-steps button{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:10px 11px 13px;overflow:hidden;
background:#fff;border:1px solid var(--line);border-radius:12px;cursor:pointer;text-align:left;font:inherit;font-size:.78rem;font-weight:500;line-height:1.35;color:var(--ink)}
.lt-steps button:hover{border-color:#B9C0DE}
.lt-steps b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#E3E7F5;color:var(--violet);font-family:var(--font-mono);font-size:.7rem}
.lt-bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--saffron)}
.lt[data-step="1"] [data-go="1"],.lt[data-step="2"] [data-go="2"],.lt[data-step="3"] [data-go="3"],.lt[data-step="4"] [data-go="4"]{border-color:var(--saffron);box-shadow:0 8px 20px rgba(242,168,29,.18)}
.lt[data-step="1"] [data-go="1"] b,.lt[data-step="2"] [data-go="2"] b,.lt[data-step="3"] [data-go="3"] b,.lt[data-step="4"] [data-go="4"] b{background:var(--saffron);color:var(--ink)}
.lt[data-step="1"] [data-go="1"] .lt-bar,.lt[data-step="2"] [data-go="2"] .lt-bar,.lt[data-step="3"] [data-go="3"] .lt-bar,.lt[data-step="4"] [data-go="4"] .lt-bar{animation:lt-prog var(--dur) linear both}
@keyframes lt-prog{to{width:100%}}
.lt.paused *,.lt.paused{animation-play-state:paused!important}
.lt.still .lt-cursor,.lt.still .lt-bar{display:none}
@media(max-width:640px){
.lt-device{padding:0 5%}
.lt-base{margin:0 -5%;height:11px}
.lt-steps{grid-template-columns:1fr 1fr}
}
/* ============ home: owner dashboard laptop (.od-*) ============
Reuses the .lt-device laptop. Figures, bars, trend line and donut build in
once when the scene enters view (.on); the live toast and revenue tick loop.
Without .on (JS present, not yet seen) the build-in parts wait hidden. */
.od{position:relative;min-width:0;width:100%}
.od-main{position:absolute;left:46px;right:0;top:0;bottom:0;padding:0 12px;background:var(--paper)}
.od-top{height:40px;display:flex;align-items:center;justify-content:space-between}
.od-top b{display:block;font-family:var(--font-display);font-size:13px;color:var(--ink)}
.od-top small{font-size:9px;color:var(--muted)}
.od-live{display:flex;align-items:center;gap:5px;font-size:9px;font-weight:700;color:#0B6E4C;background:#E8F7EF;border-radius:999px;padding:3px 9px}
.od-live i,.hk-dh span i{width:6px;height:6px;border-radius:50%;background:var(--emerald);animation:od-pulse 1.6s ease-in-out infinite}
@keyframes od-pulse{50%{box-shadow:0 0 0 4px rgba(14,138,95,.25)}}
.od-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.od-kpi{position:relative;height:60px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:#fff}
.od-kpi small{display:block;font-size:8.5px;color:var(--muted)}
.od-kpi b{position:relative;display:block;height:22px;margin-top:2px;font-family:var(--font-mono);font-size:17px;color:var(--ink)}
.od-kpi em{display:block;line-height:1.3;font-style:normal;font-size:8px;font-weight:600;color:#0B6E4C;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.od-row{display:grid;grid-template-columns:1fr 178px;gap:8px;margin-top:8px;height:152px}
.od-card{padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:#fff}
.od-ch{display:flex;justify-content:space-between;align-items:center}
.od-ch b,.od-src>b{font-size:10px;color:var(--ink)}
.od-ch span{display:flex;align-items:center;gap:4px;font-size:8px;color:var(--muted)}
.od-ch i{width:8px;height:8px;border-radius:2px;background:var(--violet)}
.od-ch i.k2{height:2px;margin-left:6px;background:var(--magenta)}
.od-plot{position:relative;height:92px;margin-top:8px}
.od-bars{position:absolute;inset:0;display:flex;align-items:flex-end;gap:10px;padding:0 6px;border-bottom:1px solid var(--line)}
.od-bars span{flex:1;height:var(--h);border-radius:4px 4px 0 0;background:linear-gradient(180deg,#5A64A4,#343F8C);transform-origin:bottom}
.od-bars .today{background:linear-gradient(180deg,#F7C25C,#F2A81D)}
.od-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.od-line polyline{fill:none;stroke:var(--magenta);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:100}
.od-dot{position:absolute;left:92.6%;top:13.3%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--magenta);box-shadow:0 0 0 3px #fff,0 0 0 5px rgba(186,89,4,.25)}
.od-days{display:flex;gap:10px;padding:0 6px;margin-top:4px}
.od-days span{flex:1;text-align:center;font-size:7.5px;color:var(--muted)}
.od-days span:last-child{color:var(--magenta);font-weight:700}
.od-donut{position:relative;width:76px;height:76px;margin:7px auto 6px}
.od-donut svg{width:100%;height:100%;transform:rotate(-90deg)}
.od-donut circle{fill:none;stroke-width:13}
.od-donut .bg{stroke:#EEF0F7}
.od-donut .s1{stroke:var(--saffron)}.od-donut .s2{stroke:var(--violet)}.od-donut .s3{stroke:#9AA3D6}.od-donut .s4{stroke:var(--emerald)}
.od-donut>span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.od-donut>span b{font-family:var(--font-mono);font-size:14px;color:var(--ink)}
.od-donut>span small{font-size:7px;color:var(--muted)}
.od-leg{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:3px 8px;margin:0;padding:0}
.od-leg li{display:flex;align-items:center;gap:4px;font-size:8px;color:var(--text)}
.od-leg i{width:7px;height:7px;border-radius:50%}
.od-leg .c1{background:var(--saffron)}.od-leg .c2{background:var(--violet)}.od-leg .c3{background:#9AA3D6}.od-leg .c4{background:var(--emerald)}
.od-leg b{margin-left:auto;font-family:var(--font-mono);color:var(--ink)}
.od-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.od-mini .od-kpi{height:52px}
.od-mini .od-kpi b{font-size:14px}
/* waiting state before the scene is seen */
.js .od:not(.on) .od-kpi,.js .od:not(.on) .od-card{opacity:0}
.js .od:not(.on) .od-bars span{transform:scaleY(0)}
.js .od:not(.on) .od-line polyline{stroke-dashoffset:100}
.js .od:not(.on) .od-dot{opacity:0}
.js .od:not(.on) .od-donut .seg{stroke-dasharray:0 100}
/* build-in */
.od.on .od-kpi{animation:od-up .6s cubic-bezier(.2,.7,.3,1) both}
.od.on .od-kpis .od-kpi:nth-child(2){animation-delay:.08s}.od.on .od-kpis .od-kpi:nth-child(3){animation-delay:.16s}.od.on .od-kpis .od-kpi:nth-child(4){animation-delay:.24s}
.od.on .od-mini .od-kpi{animation-delay:.9s}.od.on .od-mini .od-kpi:nth-child(2){animation-delay:1s}.od.on .od-mini .od-kpi:nth-child(3){animation-delay:1.1s}
.od.on .od-card{animation:od-up .6s cubic-bezier(.2,.7,.3,1) .3s both}
@keyframes od-up{from{opacity:0;transform:translateY(10px)}}
.od.on .od-bars span{animation:od-grow .8s cubic-bezier(.2,.8,.2,1) both}
.od.on .od-bars span:nth-child(1){animation-delay:.45s}.od.on .od-bars span:nth-child(2){animation-delay:.52s}.od.on .od-bars span:nth-child(3){animation-delay:.59s}
.od.on .od-bars span:nth-child(4){animation-delay:.66s}.od.on .od-bars span:nth-child(5){animation-delay:.73s}.od.on .od-bars span:nth-child(6){animation-delay:.8s}
.od.on .od-bars .today{animation-delay:.87s}
@keyframes od-grow{from{transform:scaleY(0)}}
.od.on .od-line polyline{animation:od-draw 1.3s ease-in-out 1s both}
@keyframes od-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.od.on .od-dot{animation:od-pop .4s ease 2.2s both}
@keyframes od-pop{from{opacity:0;transform:scale(0)}}
.od.on .od-donut .seg{animation:od-seg .9s ease-out both}
.od.on .od-donut .s1{animation-delay:.5s}.od.on .od-donut .s2{animation-delay:.75s}.od.on .od-donut .s3{animation-delay:1s}.od.on .od-donut .s4{animation-delay:1.2s}
@keyframes od-seg{from{stroke-dasharray:0 100}}
/* change lines and legend fade in once their figures have counted up */
.js .od:not(.on) .od-kpi em,.js .od:not(.on) .od-leg li{opacity:0}
.od.on .od-kpi em{animation:od-fade .5s ease 1.3s both}
.od.on .od-leg li{animation:od-fade .5s ease 1.2s both}
@keyframes od-fade{from{opacity:0;transform:translateY(4px)}}
/* ============ home: housekeeping phone (.hk-*) ============
Room 204 loops Dirty -> Cleaning -> Ready every 9s while the front-desk card
flips the same room to ready. With reduced motion everything rests on the
finished "Ready" state. */
.hk{position:relative;min-width:0;width:100%}
.hk-plane{position:relative;height:500px;perspective:1500px;transform-style:preserve-3d}
.hk .hk-phone{position:absolute;top:6px;right:14%;width:226px;padding:9px;border-radius:42px;
background:linear-gradient(150deg,#3A4068 0%,#161930 55%,#0C0E1E 100%);
box-shadow:inset 0 0 0 2px #4C5380,inset 0 0 0 4px #0C0E1E,0 46px 70px -22px rgba(28,39,127,.55);
}
.hk .hk-phone::before,.hk .hk-phone::after{content:"";position:absolute;right:-3px;width:3px;border-radius:0 3px 3px 0;background:#2A2F50}
.hk .hk-phone::before{top:96px;height:44px}.hk .hk-phone::after{top:152px;height:28px}
.hk-screen{position:relative;aspect-ratio:260/563;border-radius:33px;overflow:hidden;background:var(--paper)}
.hk-screen::before{content:"";position:absolute;top:9px;left:50%;z-index:4;width:72px;height:20px;transform:translateX(-50%);border-radius:999px;background:#0C0E1E}
.hk-screen::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 20%,transparent 32%)}
.hk-canvas{position:absolute;left:0;top:0;width:260px;height:563px;zoom:var(--k,.83);font-family:var(--font-body);line-height:1.3;color:var(--text)}
.hk .hk-bar{height:38px;display:flex;justify-content:space-between;align-items:center;padding:4px 24px 0;font-size:11px;color:var(--ink)}
.hk .hk-bar span{display:flex;align-items:flex-end;gap:2px}
.hk .hk-bar span i{width:3px;height:5px;border-radius:1px;background:var(--ink)}
.hk .hk-bar span i:nth-child(2){height:7px}.hk .hk-bar span i:nth-child(3){height:9px}
.hk .hk-bar em{width:18px;height:9px;margin-left:5px;border:1.5px solid var(--ink);border-radius:3px;background:linear-gradient(90deg,var(--ink) 70%,transparent 70%);background-clip:content-box;padding:1px}
.hk-head{display:flex;align-items:center;justify-content:space-between;margin:4px 12px 0;padding:12px 14px;border-radius:16px;background:var(--brand-grad);color:#fff}
.hk-head b{display:block;font-family:var(--font-display);font-size:15px;color:#fff}
.hk-head small{font-size:9.5px;color:#C9CFE6}
.hk-av{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--saffron);color:var(--ink);font-size:10px;font-weight:800}
.hk-filter{display:flex;gap:6px;margin:10px 12px}
.hk-filter span{font-size:9.5px;font-weight:600;color:var(--muted);background:#E9ECF5;border-radius:999px;padding:4px 10px}
.hk-filter .on{background:var(--ink);color:#fff}
.hk .hk-list{display:flex;flex-direction:column;gap:8px;margin:0 12px}
.hk-room,.hk-row{display:flex;align-items:center;gap:10px}
.hk-room{padding:9px 11px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 2px 6px rgba(28,39,127,.05)}
.hk-room b{flex:none;width:30px;font-family:var(--font-mono);font-size:14px;color:var(--ink)}
.hk-room span{flex:1;min-width:0;font-size:9px;color:var(--muted)}
.hk-room span small{display:block;font-size:10.5px;font-weight:600;color:var(--ink)}
.hk-room em{flex:none;font-style:normal;font-size:8.5px;font-weight:700;border-radius:999px;padding:3px 8px}
.c-ready,.st-ready,.t-ready{background:#E8F7EF;color:#0B6E4C}
.c-occ,.t-occ{background:#EBEEF8;color:var(--violet)}
.c-dirty,.st-dirty,.t-dirty{background:#FBEBD9;color:#A2400B}
.c-ooo,.t-ooo{background:#EEF0F7;color:var(--muted)}
.st-clean{background:var(--accent-soft);color:#8A4A06}
.hk-live{display:block;border:1.5px solid var(--emerald);box-shadow:0 10px 24px rgba(14,138,95,.15)}
.hk-room .hk-chip{position:relative;width:62px;height:18px;padding:0;background:none}
.hk-chip i{position:absolute;inset:0;border-radius:999px;font-style:normal;line-height:18px;text-align:center}
.hk-chip .st-dirty,.hk-chip .st-clean{opacity:0}
.hk-check{list-style:none;display:flex;flex-direction:column;gap:6px;margin:10px 0 0;padding:0}
.hk-check li{display:flex;align-items:center;gap:7px;font-size:9.5px;color:var(--text)}
.hk-check i{position:relative;flex:none;width:13px;height:13px;border:1.5px solid var(--emerald);border-radius:4px;background:var(--emerald)}
.hk-check i::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;font-size:9px;font-weight:800;color:#fff;line-height:1}
.hk-prog{height:5px;margin-top:10px;border-radius:999px;background:#EEF0F7;overflow:hidden}
.hk-prog i{display:block;width:100%;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--saffron),var(--emerald))}
.hk-btn{position:relative;height:30px;margin-top:10px;border-radius:9px;background:var(--emerald);font-size:10.5px;font-weight:700}
.hk-btn i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal}
.hk-btn .bt-start,.hk-btn .bt-mark{opacity:0;color:var(--ink)}
.hk-btn .bt-done{color:#fff}
.hk-tap{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:rgba(28,39,127,.28);opacity:0}
.hk-desk{position:absolute;left:0;bottom:46px;width:214px;padding:12px;border:1px solid var(--line);border-radius:14px;background:#fff;
box-shadow:0 26px 50px -14px rgba(28,39,127,.35)}
.hk-dh{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hk-dh b{font-size:11px;color:var(--ink)}
.hk-dh span{display:flex;align-items:center;gap:5px;font-size:9px;font-weight:700;color:#0B6E4C}
.hk-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0}
.hk-tiles span{display:grid;place-items:center;height:34px;border-radius:8px;font-family:var(--font-mono);font-size:11px;font-weight:700}
.t-204{background:#E8F7EF;color:#0B6E4C}
.hk-ok{font-size:9.5px;font-weight:700;color:#0B6E4C;background:#E8F7EF;border-radius:8px;padding:6px 8px}
/* 9s room-status loop */
.hk-chip .st-dirty,.hk-btn .bt-start{animation:hk-a 9s linear infinite}
.hk-chip .st-clean,.hk-btn .bt-mark{animation:hk-b 9s linear infinite}
.hk-chip .st-ready,.hk-btn .bt-done{animation:hk-c 9s linear infinite}
@keyframes hk-a{0%,11%{opacity:1}12%,96%{opacity:0}98%,100%{opacity:1}}
@keyframes hk-b{0%,11%{opacity:0}12%,53%{opacity:1}54%,100%{opacity:0}}
@keyframes hk-c{0%,53%{opacity:0}54%,95%{opacity:1}97%,100%{opacity:0}}
.hk-btn{animation:hk-btn 9s linear infinite}
@keyframes hk-btn{0%,11%{background:var(--saffron)}12%,44%{background:#E1E4F1}46%,53%{background:var(--saffron)}54%,95%{background:var(--emerald)}97%,100%{background:var(--saffron)}}
.hk-prog i{animation:hk-prog 9s linear infinite}
@keyframes hk-prog{0%,12%{width:0}45%,95%{width:100%}97%,100%{width:0}}
.hk-check .k1{animation:hk-k1 9s linear infinite}.hk-check .k2{animation:hk-k2 9s linear infinite}.hk-check .k3{animation:hk-k3 9s linear infinite}
@keyframes hk-k1{0%,21%{background:#fff;border-color:var(--line)}23%,95%{background:var(--emerald);border-color:var(--emerald)}97%,100%{background:#fff;border-color:var(--line)}}
@keyframes hk-k2{0%,31%{background:#fff;border-color:var(--line)}33%,95%{background:var(--emerald);border-color:var(--emerald)}97%,100%{background:#fff;border-color:var(--line)}}
@keyframes hk-k3{0%,41%{background:#fff;border-color:var(--line)}43%,95%{background:var(--emerald);border-color:var(--emerald)}97%,100%{background:#fff;border-color:var(--line)}}
.hk-tap{animation:hk-tap 9s ease-out infinite}
@keyframes hk-tap{0%,9%{opacity:0;transform:scale(.3)}10%{opacity:1;transform:scale(.3)}15%{opacity:0;transform:scale(2.6)}50%{opacity:0;transform:scale(.3)}51%{opacity:1;transform:scale(.3)}56%{opacity:0;transform:scale(2.6)}100%{opacity:0}}
.hk-live{animation:hk-glow 9s ease infinite}
@keyframes hk-glow{0%,53%{border-color:var(--saffron);box-shadow:0 10px 24px rgba(242,168,29,.18)}57%{border-color:var(--emerald);box-shadow:0 0 0 6px rgba(14,138,95,.2)}62%,95%{border-color:var(--emerald);box-shadow:0 10px 24px rgba(14,138,95,.15)}98%,100%{border-color:var(--saffron);box-shadow:0 10px 24px rgba(242,168,29,.18)}}
.t-204{animation:hk-tile 9s ease infinite}
@keyframes hk-tile{0%,59%{background:#FBEBD9;color:#A2400B;transform:none}62%{transform:scale(1.16)}66%,95%{background:#E8F7EF;color:#0B6E4C;transform:none}97%,100%{background:#FBEBD9;color:#A2400B}}
.hk-ok{animation:hk-ok 9s ease infinite}
@keyframes hk-ok{0%,60%{opacity:0;transform:translateY(6px)}64%,92%{opacity:1;transform:none}96%,100%{opacity:0}}
.hk:hover *{animation-play-state:paused}
@media(max-width:640px){
.hk-plane{height:440px}
.hk .hk-phone{right:4%;width:196px}
.hk-desk{width:150px;bottom:16px;padding:9px}
.hk-dh b{font-size:9.5px}
.hk-tiles{gap:4px;margin:8px 0}
.hk-tiles span{height:26px;font-size:10px}
.hk-ok{font-size:8.5px;padding:5px 6px}
}
/* screen canvases: CSS zoom keeps text crisp; scaled transform only where zoom is unsupported */
@supports not (zoom:1){
.lt-canvas,.hk-canvas{transform:scale(var(--k,.85));transform-origin:0 0}
}
/* home: give the two laptop scenes the wider column so screen text renders near full size */
@media(min-width:981px){.ix-ecom-grid{grid-template-columns:.82fr 1.18fr;gap:36px}}
@media(min-width:861px){.split.ops-dash{grid-template-columns:.8fr 1.2fr;gap:36px}}
/* ============ demo videos: Hindi / English toggle (.vd-*) ============
Without JS both language sets show stacked; with JS the toggle picks one. */
.vd{text-align:center}
.vd-toggle{display:none;margin:0 auto 22px;padding:5px;gap:5px;border:1.5px solid var(--line);border-radius:999px;background:#fff}
.js .vd-toggle{display:inline-flex}
.vd-toggle button{border:0;background:transparent;cursor:pointer;font:inherit;font-size:.92rem;font-weight:700;color:var(--muted);padding:9px 24px;border-radius:999px}
.vd-toggle button[aria-pressed="true"]{background:var(--saffron);color:var(--ink)}
.vd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:left}
.vd-grid+.vd-grid{margin-top:18px}
.js .vd[data-lang="hi"] [data-set="en"],.js .vd[data-lang="en"] [data-set="hi"]{display:none}
.vd-grid .ix-vcard:first-child{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column}
.vd-grid .ix-vcard:first-child .ix-vthumb{flex:1;aspect-ratio:auto;min-height:220px}
.vd-grid .ix-vcard:first-child .ix-vmeta b{font-size:1.1rem}
.vd-grid .ix-vcard:first-child .ix-play{width:76px;height:76px;font-size:1.7rem}
.vd-grid .ix-vmeta b{font-size:.9rem;line-height:1.35}
@media (max-width:980px){
.vd-grid{grid-template-columns:1fr 1fr}
.vd-grid .ix-vcard:first-child{grid-row:auto}
.vd-grid .ix-vcard:first-child .ix-vthumb{flex:none;aspect-ratio:16/9;min-height:0}
}
@media (max-width:640px){
.vd-grid{grid-template-columns:1fr}
.vd-grid .ix-vcard:first-child{grid-column:auto}
.vd-toggle button{padding:9px 16px;font-size:.86rem}
}
/* ============ home hero: front desk connected to every module (.hx-*) ============
10s loop, 2.5s per module. A module card lights up, then the matching change
lands on the front-desk screen. Reduced motion shows the finished screen. */
.hx{position:relative;isolation:isolate;padding:66px 0 74px}
.hx::before{content:"";position:absolute;inset:6% 0;z-index:-1;border-radius:50%;
background:radial-gradient(closest-side,rgba(52,63,140,.14),transparent 75%),radial-gradient(40% 40% at 70% 80%,rgba(242,168,29,.14),transparent 70%)}
.hx-laptop{position:relative;z-index:1}
.hx-card{position:absolute;z-index:2;width:49%;display:flex;align-items:flex-start;gap:10px;padding:10px 12px 12px;overflow:hidden;
background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 28px rgba(28,39,127,.12);text-align:left}
.hx-card.c1{left:0;top:0}.hx-card.c2{right:0;top:10px}.hx-card.c3{left:0;bottom:12px}.hx-card.c4{right:0;bottom:0}
.hx-card img{flex:none;width:30px;height:30px;padding:5px;border-radius:8px;background:#EBEEF8;box-sizing:content-box}
.hx-card span{min-width:0;line-height:1.3}
.hx-card small{display:block;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--violet)}
.hx-card b{display:block;margin-top:2px;font-size:.8rem;color:var(--ink)}
.hx-card em{display:block;font-style:normal;font-size:.72rem;color:var(--muted)}
.hx-bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--saffron)}
.hx-card{animation:hx-card 10s ease infinite}
.hx-card .hx-bar{animation:hx-bar 10s linear infinite}
.hx-card.c2,.hx-card.c2 .hx-bar{animation-delay:2.5s}
.hx-card.c3,.hx-card.c3 .hx-bar{animation-delay:5s}
.hx-card.c4,.hx-card.c4 .hx-bar{animation-delay:7.5s}
@keyframes hx-card{0%,23%{border-color:var(--saffron);box-shadow:0 14px 32px rgba(242,168,29,.28)}26%,100%{border-color:var(--line);box-shadow:0 12px 28px rgba(28,39,127,.12)}}
@keyframes hx-bar{0%{width:0}23%{width:100%}24%,100%{width:0}}
/* front-desk screen (500x312 canvas) */
.lt-canvas.hx-canvas{width:500px;height:312px}
.hx-main{position:absolute;left:46px;right:0;top:0;bottom:0;padding:0 10px;background:var(--paper)}
.hx-top{height:34px;display:flex;align-items:center;justify-content:space-between}
.hx-top b{display:block;font-family:var(--font-display);font-size:12px;color:var(--ink)}
.hx-top small{font-size:8.5px;color:var(--muted)}
.hx-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.hx-kpis>div{height:42px;padding:6px 9px;border:1px solid var(--line);border-radius:8px;background:#fff}
.hx-kpis small{display:block;font-size:8.5px;line-height:1.2;color:var(--muted)}
.hx-flip{position:relative;display:block;height:19px;margin-top:2px;font-family:var(--font-mono);font-size:15px;color:var(--ink)}
.hx-flip span{position:absolute;left:0;top:0}
.hx-flip .f0{opacity:0}
.hx-rack{margin-top:7px;padding:3px 8px 5px;border:1px solid var(--line);border-radius:8px;background:#fff}
.hx-rh{display:grid;grid-template-columns:34px repeat(5,1fr);height:16px;align-items:center;font-family:var(--font-mono);font-size:7.5px;color:var(--muted)}
.hx-rr{display:grid;grid-template-columns:34px 1fr;height:28px;align-items:center;border-top:1px solid var(--line)}
.hx-rr>span{display:flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:9px;color:var(--muted)}
.hx-rr>span i{width:6px;height:6px;border-radius:50%;background:#F2A81D}
.hx-rr>span i.ok,.hx-dot{background:var(--emerald)!important}
.hx-tr{position:relative;height:100%;background:repeating-linear-gradient(90deg,transparent 0 calc(20% - 1px),#EEF0F7 calc(20% - 1px) 20%)}
.hx-tr em{position:absolute;top:5px;bottom:5px;display:flex;align-items:center;padding:0 7px;border-radius:5px;font-style:normal;font-size:8.5px;font-weight:600;white-space:nowrap;overflow:hidden}
.hx-fb{position:absolute;left:66%;top:5px;bottom:5px;display:flex;align-items:center;padding:0 6px;border-radius:5px;background:#E8F7EF;color:#0B6E4C;font-size:8px;font-weight:700;white-space:nowrap}
/* screen events, in step with the cards */
.hx-n1{transform-origin:left center;animation:hx-n1 10s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes hx-n1{0%,5%{opacity:0;transform:translateX(-24px) scaleX(.4)}13%{opacity:1;transform:none;box-shadow:0 0 0 0 rgba(242,168,29,.5)}19%{box-shadow:0 0 0 5px rgba(242,168,29,.3)}26%,96%{opacity:1;transform:none;box-shadow:none}100%{opacity:0}}
.hx-n2{transform-origin:left center;animation:hx-n2 10s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes hx-n2{0%,30%{opacity:0;transform:translateX(-24px) scaleX(.4)}38%{opacity:1;transform:none;box-shadow:0 0 0 0 rgba(52,63,140,.4)}44%{box-shadow:0 0 0 5px rgba(52,63,140,.22)}51%,96%{opacity:1;transform:none;box-shadow:none}100%{opacity:0}}
.hx-dot{animation:hx-dot 10s ease infinite}
@keyframes hx-dot{0%,55%{background:#F2A81D;box-shadow:none}58%{box-shadow:0 0 0 4px rgba(14,138,95,.3)}61%,96%{background:var(--emerald);box-shadow:none}98%,100%{background:#F2A81D}}
.hx-fb{animation:hx-fb 10s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes hx-fb{0%,80%{opacity:0;transform:translateY(5px)}86%,96%{opacity:1;transform:none}100%{opacity:0}}
.hx-flip .f0{animation:hx-out 10s linear infinite}
.hx-flip .f1{animation:hx-in 10s linear infinite}
.hx-flip .k-rev,.hx-kpis>div:nth-child(3) .f0{animation-delay:0s}
.hx-kpis>div:nth-child(1) .f0,.hx-kpis>div:nth-child(1) .f1{animation-delay:2.5s}
.hx-kpis>div:nth-child(2) .f0,.hx-kpis>div:nth-child(2) .f1{animation-delay:5.3s}
@keyframes hx-out{0%,10%{opacity:1}12%,94%{opacity:0}96%,100%{opacity:1}}
@keyframes hx-in{0%,10%{opacity:0;color:var(--ink)}12%{opacity:1;color:#0B6E4C}24%,94%{opacity:1;color:var(--ink)}96%,100%{opacity:0}}
.hx:hover *{animation-play-state:paused}
@media(max-width:640px){
.hx{padding:88px 0 92px}
.hx-card{gap:7px;padding:8px 9px 10px}
.hx-card img{width:22px;height:22px;padding:4px}
.hx-card b{font-size:.72rem}
.hx-card em{font-size:.66rem}
.hx-card small{font-size:.56rem}
}
.hx-flip .f0,.hx-flip .f1{animation-fill-mode:backwards}
/* ============ home: integrations by category (.igx / .ig-*) ============
CSS-only filter: radio inputs before the grid hide the other categories.
Tiles show the partner name; an ![]()
logo can replace the later. */
.igx{max-width:1120px;margin:0 auto}
.igx>input{position:absolute;opacity:0;pointer-events:none}
.igx>label{display:inline-flex;align-items:center;gap:7px;margin:0 3px 10px;padding:8px 16px;border:1.5px solid var(--line);border-radius:999px;background:#fff;
font-size:.88rem;font-weight:600;color:var(--text);cursor:pointer;transition:border-color .15s,background .15s}
.igx>label span{font-family:var(--font-mono);font-size:.72rem;font-weight:700;color:var(--violet);background:#EBEEF8;border-radius:999px;padding:1px 7px}
.igx>label:hover{border-color:var(--violet)}
.igx>input:checked+label{background:var(--ink);border-color:var(--ink);color:#fff}
.igx>input:checked+label span{background:var(--saffron);color:var(--ink)}
.igx>input:focus-visible+label{outline:3px solid var(--saffron);outline-offset:2px}
.ig-grid{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:18px 0 0;padding:0}
.ig{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:100px;padding:12px 10px;overflow:hidden;
background:#fff;border:1px solid var(--line);border-radius:14px;text-align:center;transition:transform .2s,box-shadow .2s,border-color .2s}
.ig:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(28,39,127,.10);border-color:#D5D9E8}
.ig b{font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--ink);line-height:1.15}
.ig img{width:auto;max-width:92%;object-fit:contain}
.ig img.plate{padding:6px 10px;border-radius:8px;background:#223B8D;box-sizing:content-box}
.ig img.rounded{border-radius:7px}
.ig small{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
#ig-ota:checked~.ig-grid .ig:not(.ota),#ig-pay:checked~.ig-grid .ig:not(.pay),
#ig-wa:checked~.ig-grid .ig:not(.wa),#ig-acc:checked~.ig-grid .ig:not(.acc){display:none}
@media(max-width:980px){.ig-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:640px){
.ig-grid{grid-template-columns:repeat(2,1fr);gap:10px}
.igx>label{padding:7px 12px;font-size:.82rem}
.ig{height:92px}
}
/* partner logo strips on module pages (same .ig tiles as the homepage grid) */
.ps-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:4px}
.ps-grid .ig{width:178px}
@media(max-width:640px){.ps-grid .ig{width:calc(50% - 6px)}}
/* demo video grids with one or three videos */
.vd-grid.one{grid-template-columns:1fr;max-width:760px;margin-left:auto;margin-right:auto}
.vd-grid.one .ix-vcard:first-child{grid-column:auto;grid-row:auto}
.vd-grid.one .ix-vcard:first-child .ix-vthumb{flex:none;aspect-ratio:16/9;min-height:0}
.vd-grid.three{grid-template-columns:2fr 1fr}
.vd-grid.three .ix-vcard:first-child{grid-column:auto;grid-row:span 2}
@media(max-width:640px){
.vd-grid.three{grid-template-columns:1fr}
.vd-grid.three .ix-vcard:first-child{grid-row:auto}
.vd-grid.three .ix-vcard:first-child .ix-vthumb{flex:none;aspect-ratio:16/9;min-height:0}
}
/* ============ client spotlight (.cs-*) — homepage + Clients page ============
Lead card is horizontal; later clients form a grid. Photos scroll-snap
(swipe / trackpad); arrows and dots are added by site.js. */
.cs{display:flex;flex-direction:column;gap:22px;text-align:left}
.cs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.cs-card{display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:18px;
box-shadow:0 14px 34px rgba(28,39,127,.08)}
.cs-card.cs-lead{display:grid;grid-template-columns:1.3fr 1fr}
.cs-media{position:relative;aspect-ratio:3/2;background:#0E1020;overflow:hidden}
.cs-card.cs-lead .cs-media{aspect-ratio:auto;min-height:420px}
.cs-slides{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.cs-slides::-webkit-scrollbar{display:none}
.cs-slides img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:start}
.cs-nav{display:none;position:absolute;top:50%;width:38px;height:38px;margin-top:-19px;border:0;border-radius:50%;cursor:pointer;
background:rgba(255,255,255,.88);color:var(--ink);font-size:1.5rem;line-height:1;box-shadow:0 6px 16px rgba(14,16,32,.25);transition:background .15s}
.cs-nav:hover{background:#fff}
.cs-nav.prev{left:12px}.cs-nav.next{right:12px}
.js .cs-nav{display:grid;place-items:center}
.cs-dots{position:absolute;right:16px;bottom:18px;display:flex;gap:6px}
.cs-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5);transition:width .2s,background .2s}
.cs-dots i.on{width:18px;border-radius:999px;background:#fff}
.cs-logo{position:absolute;left:16px;bottom:16px;display:flex;align-items:center;padding:9px 14px;border-radius:12px;background:#fff;box-shadow:0 8px 20px rgba(14,16,32,.25)}
.cs-logo.dark{background:rgba(14,16,32,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cs-logo img{height:var(--lh,26px);width:auto;max-width:170px}
.cs-body{display:flex;flex-direction:column;padding:28px 30px}
.cs-loc{display:flex;align-items:center;gap:6px;margin:0;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--magenta)}
.cs-body h3{margin:10px 0 4px;font-size:1.6rem}
.cs-type{margin:0 0 14px;font-weight:600;color:var(--violet)}
.cs-brief{margin:0 0 18px;color:var(--text)}
.cs-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:auto 0 0;padding:0}
.cs-tags li{font-size:.8rem;font-weight:600;color:var(--ink);background:#EBEEF8;border-radius:999px;padding:5px 12px}
.cs-grid .cs-body{padding:22px}
.cs-grid .cs-body h3{font-size:1.25rem}
@media(max-width:900px){
.cs-card.cs-lead{display:flex}
.cs-card.cs-lead .cs-media{min-height:0;aspect-ratio:3/2}
.cs-body{padding:22px}
.cs-body h3{font-size:1.35rem}
}
/* spotlight: alternate the photo side on full-width cards */
.cs-card.cs-lead.cs-flip{grid-template-columns:1fr 1.3fr}
.cs-card.cs-flip .cs-media{order:2}
@media(max-width:900px){.cs-card.cs-flip .cs-media{order:0}}
@media(max-width:640px){.cs-logo{padding:7px 10px}.cs-logo img{height:calc(var(--lh,26px) * .72)}}
.cs-grid .cs-logo{left:12px;bottom:12px;padding:7px 10px}
.cs-grid .cs-logo img{height:calc(var(--lh,26px) * .75)}
/* About page: eight module cards in rows of four */
.cards.ab-4{grid-template-columns:repeat(4,1fr)}
.cards.ab-4 .card h3 a{color:inherit;text-decoration:none}
.cards.ab-4 .card h3 a:hover{color:var(--violet);text-decoration:underline}
@media (max-width:1000px){.cards.ab-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.cards.ab-4{grid-template-columns:1fr}}
/* ============ desktop heroes: copy left, product right (feature + property-type pages) ============
.be-split = feature-page hero, .be-visual = its mockup; .ph-split / .ph-visual = property-type pages.
Below 1100px both fall back to the stacked, centred layout. */
@media (min-width:1100px){
.be-hero.be-split{text-align:left;padding-bottom:64px}
.be-split > .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:56px;align-items:center}
.be-split > .wrap > *{grid-column:1;min-width:0}
.be-split > .wrap > .crumbs{justify-content:flex-start!important}
.be-split h1{margin:18px 0 0;max-width:14ch}
.be-split .lead{margin:16px 0 0;max-width:46ch}
.be-split .actions,.be-split .be-badges{justify-content:flex-start}
.be-split > .wrap > .be-visual{grid-column:2;grid-row:1 / span 7;align-self:center;max-width:none!important;margin:0!important;width:100%}
/* POS mockup normally sits flush on the hero's bottom edge; in a column it is a free-standing card */
.be-split .rp-pos{border-radius:18px}
.be-split .rp-body{grid-template-columns:minmax(0,1fr) 250px}
/* phone/card + side notes: the device takes the right column, the notes run full width below */
.be-split > .wrap > .sc-stage.be-visual{display:contents}
.be-split .sc-stage > :first-child{grid-column:2;grid-row:1 / span 7;align-self:center;justify-self:center;width:100%;max-width:420px}
.be-split .sc-stage > .sc-phone:first-child{max-width:320px}
.be-split .sc-stage > .sc-side{grid-column:1 / -1;margin-top:44px;padding-top:28px;border-top:1px solid var(--line)}
.be-split .sc-side p{max-width:80ch}
.pagehead.ph-split > .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);column-gap:48px;align-items:center}
.ph-split > .wrap > *{grid-column:1;min-width:0}
.ph-split > .wrap > .ph-visual{grid-column:2;grid-row:1 / span 6;margin:0!important;max-width:none!important;width:100%!important}
}
/* KDS hero: let the station chips wrap on phones */
@media (max-width:560px){.kd-top{flex-wrap:wrap;gap:8px}.kd-top .st{flex-wrap:wrap}}
/* OTA slab table: tax label sits with each price */
.zp-slabs td .zp-gst{font-family:var(--font-body);font-size:.72rem;font-weight:500;color:var(--muted);white-space:nowrap;margin-left:2px}
.zp-ota-grid > *{min-width:0} /* let the slab table scroll inside its card instead of widening the page */
@media (max-width:560px){.zp-slabs td .zp-gst{display:block;margin:2px 0 0}}
/* ============ demo / contact lead form: phone dial-code picker + marketing consent (same as er4u.in) ============ */
.form .iti{width:100%;margin-top:6px;display:block}
.form .iti__flag-container{z-index:3}
.form .iti input.iti__tel-input,.form .iti input[type=tel]{width:100%;padding-left:90px!important;border-radius:10px!important;margin-top:0!important}
.form .iti--separate-dial-code input.iti__tel-input,.form .iti--separate-dial-code input[type=tel]{padding-left:96px!important}
.form .iti__selected-flag{border-radius:10px 0 0 10px;background:#F2F4FA}
.form .iti__country-list{z-index:20;border-radius:10px;border:1px solid var(--line);box-shadow:0 12px 28px rgba(28,39,127,.12);max-height:220px;font-weight:500}
.consent{display:flex;flex-direction:column;gap:4px;margin-top:2px}
.consent .consent-head{font-family:var(--font-display);font-weight:800;font-size:1.02rem;color:var(--ink);margin:0}
.consent .consent-sub{font-size:.85rem;color:var(--muted);margin:0 0 8px;line-height:1.5}
.consent-card{border:1px solid var(--line);border-radius:12px;padding:13px 14px;background:#fff}
.form label.consent-check{display:flex;flex-direction:row;align-items:flex-start;gap:11px;cursor:pointer;font-weight:500;font-size:.88rem;color:var(--ink);line-height:1.5;margin:0}
.form label.consent-check input[type=checkbox]{flex:none;width:18px;height:18px;margin:2px 0 0;padding:0;accent-color:var(--violet);cursor:pointer}
.consent-card .consent-fine{font-size:.76rem;color:var(--muted);margin:10px 0 0;line-height:1.5}
.consent-card .consent-fine a{color:var(--violet);font-weight:600}