/* VelBooks site styles. Mobile-first. Brand: indigo #1E2A78, saffron #F59E0B, text #0F172A */
:root{--pri:#1E2A78;--pri-d:#151E5A;--pri-l:#E8EAF6;--acc:#F59E0B;--acc-d:#B45309;--txt:#0F172A;--mut:#475569;--bg:#fff;--bg2:#F5F6FA;--line:#E2E8F0;--r:14px;--sh:0 1px 2px rgba(15,23,42,.06),0 6px 24px rgba(15,23,42,.06);
--font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-size:1rem;line-height:1.65;color:var(--txt);background:var(--bg);text-rendering:optimizeLegibility}
img,svg{max-width:100%;height:auto}
a{color:var(--pri)}a:hover{color:var(--acc-d)}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4{line-height:1.2;margin:0 0 .6em;letter-spacing:-.01em;color:var(--txt)}
h1{font-size:clamp(1.9rem,5.2vw,3rem);font-weight:800}
h2{font-size:clamp(1.45rem,3.4vw,2.1rem);font-weight:750}
h3,.h3{font-size:1.15rem;font-weight:700}
p{margin:0 0 1em}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--pri);color:#fff;padding:8px 14px;z-index:100}.skip:focus{left:8px;top:8px}
.small{font-size:.875rem}.lead{font-size:1.1rem;color:var(--mut);max-width:760px}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;padding:.8em 1.3em;border-radius:10px;font-weight:700;text-decoration:none;border:2px solid transparent;line-height:1.2;text-align:center;transition:background .15s,transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--acc);color:#0F172A}.btn-primary:hover{background:#FBBF24;color:#0F172A}
.btn-ghost{border-color:var(--pri);color:var(--pri);background:#fff}.btn-ghost:hover{background:var(--pri-l);color:var(--pri)}
.btn-ghost-light{border-color:#fff;color:#fff}.btn-ghost-light:hover{background:rgba(255,255,255,.12);color:#fff}
.btn-sm{padding:.55em 1em;font-size:.92rem}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin:1.2em 0 .4em}.cta-row.center{justify-content:center}
/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line)}
.hdr{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:16px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--txt)}
.logo .mark{flex:none;display:block;width:40px;height:40px}.wm{font-weight:800;font-size:1.35rem;letter-spacing:-.02em;color:var(--txt)}.wm-vel{color:var(--pri)}
.nav-toggle{display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.bars,.bars::before,.bars::after{display:block;width:20px;height:2px;background:var(--txt);position:relative;content:""}
.bars::before{position:absolute;top:-6px}.bars::after{position:absolute;top:6px}
.site-nav{display:none;position:absolute;left:0;right:0;top:64px;background:#fff;border-bottom:1px solid var(--line);padding:8px 20px 20px;box-shadow:var(--sh)}
.site-nav.open{display:block}
.site-nav ul{list-style:none;margin:0;padding:0}
.site-nav li a{display:block;padding:12px 4px;text-decoration:none;color:var(--txt);font-weight:600;border-bottom:1px solid var(--line)}
.site-nav a[aria-current]{color:var(--pri)}
.nav-cta{margin-top:14px;width:100%}
@media(min-width:1000px){.nav-toggle{display:none}.site-nav{display:flex!important;position:static;padding:0;border:0;box-shadow:none;align-items:center;gap:18px;background:none}
.site-nav ul{display:flex;gap:4px}.site-nav li a{border:0;padding:8px 10px;border-radius:8px;font-size:.95rem}.site-nav li a:hover{background:var(--bg2)}.nav-cta{margin:0;width:auto}}
/* breadcrumbs */
.crumbs{background:var(--bg2);font-size:.85rem;border-bottom:1px solid var(--line)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;margin:0;padding:10px 0;gap:6px}
.crumbs li+li::before{content:"›";margin-right:6px;color:var(--mut)}.crumbs a{color:var(--mut)}
/* hero */
.hero{background:linear-gradient(160deg,#1E2A78 0%,#26338F 55%,#1E2A78 100%);color:#fff;padding:48px 0 56px;overflow:hidden}
.hero h1{color:#fff}.hero .sub{font-size:1.15rem;color:#E0E7FF;max-width:640px}
.hero .eyebrow{display:inline-block;background:rgba(245,158,11,.16);color:#FCD34D;border:1px solid rgba(245,158,11,.45);border-radius:999px;padding:4px 12px;font-size:.85rem;font-weight:700;margin-bottom:14px}
.hero-grid{display:grid;gap:32px;align-items:center}
.hero-img{border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.35);background:#fff}
.trust{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;padding:0;margin:18px 0 0;color:#C7D2FE;font-size:.92rem}
.trust li::before{content:"✓ ";color:var(--acc);font-weight:800}
.hero .btn-ghost{background:transparent;border-color:#fff;color:#fff}
@media(min-width:900px){.hero{padding:72px 0 80px}.hero-grid{grid-template-columns:1.05fr .95fr}}
.page-hero{background:linear-gradient(180deg,var(--pri-l),#fff);padding:40px 0 28px;border-bottom:1px solid var(--line)}
.page-hero .sub{font-size:1.12rem;color:var(--mut);max-width:780px}.updated{font-size:.85rem;color:var(--mut)}
/* sections */
.section{padding:48px 0}.section.alt{background:var(--bg2)}
@media(min-width:900px){.section{padding:64px 0}}
.grid{display:grid;gap:18px;margin-top:20px}
@media(min-width:640px){.g2,.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--sh);color:var(--txt);display:flex;flex-direction:column}
.card p{color:var(--mut);margin-bottom:.4em}.card h3{margin-bottom:.4em}
.card-link{text-decoration:none;transition:border-color .15s,transform .15s}.card-link:hover{border-color:var(--pri);transform:translateY(-2px);color:var(--txt)}
.card .more{margin-top:auto;padding-top:8px;color:var(--pri);font-weight:700;font-size:.92rem}
.card-ic{display:inline-flex;width:44px;height:44px;border-radius:12px;background:var(--pri-l);color:var(--pri);align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:12px}
.split{display:grid;gap:28px;align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}.split.rev>:first-child{order:2}}
.ticks{list-style:none;padding:0;margin:0 0 1em}.ticks li{position:relative;padding-left:28px;margin:.45em 0}
.ticks li::before{content:"";position:absolute;left:0;top:.45em;width:16px;height:16px;border-radius:50%;background:var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' stroke='%230F172A' stroke-width='2' fill='none'/%3E%3C/svg%3E") center/12px no-repeat}
.steps{counter-reset:s;list-style:none;padding:0}.steps li{counter-increment:s;position:relative;padding:0 0 1em 48px;min-height:36px}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;background:var(--pri);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
.note{background:#FFFBEB;border:1px solid #FDE68A;border-left:4px solid var(--acc);border-radius:10px;padding:14px 16px;margin:18px 0;font-size:.95rem}
.info{background:var(--pri-l);border-left:4px solid var(--pri);border-radius:10px;padding:14px 16px;margin:18px 0}
.pill{display:inline-block;background:var(--pri-l);color:var(--pri);border-radius:999px;padding:2px 10px;font-size:.8rem;font-weight:700}
/* tables */
.table-wrap{overflow-x:auto;margin:18px 0;border:1px solid var(--line);border-radius:12px;background:#fff}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:.95rem}
caption{text-align:left;padding:12px 14px;font-weight:700}
th,td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
thead th{background:var(--pri);color:#fff;font-weight:700}tbody th{font-weight:600;background:#FAFBFF}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
/* pricing */
.price-toggle{display:flex;align-items:center;gap:10px;margin:8px 0 4px;font-weight:600}
.plans{display:grid;gap:20px;margin-top:20px}
@media(min-width:900px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:var(--sh);display:flex;flex-direction:column}
.plan.hl{border:2px solid var(--pri)}.plan .badge{position:absolute;top:-12px;left:24px;background:var(--acc);color:#0F172A;font-size:.78rem;font-weight:800;padding:3px 10px;border-radius:999px}
.plan h3{font-size:1.35rem}.amt{font-size:2.4rem;font-weight:800;color:var(--pri);line-height:1}.per{color:var(--mut);font-weight:600}
.gstnote{font-size:.85rem;color:var(--mut);margin:.4em 0 1em}.plan .btn{margin-top:auto}
/* faq */
.faqs{max-width:860px}
.faq{border:1px solid var(--line);border-radius:12px;margin:10px 0;background:#fff}
.faq summary{cursor:pointer;padding:16px 44px 16px 18px;font-weight:700;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:18px;top:12px;font-size:1.4rem;color:var(--pri)}
.faq[open] summary::after{content:"–"}.faq-a{padding:0 18px 14px;color:#334155}
/* article */
.prose{max-width:780px}.prose h2{margin-top:1.6em}.prose h3{margin-top:1.3em}.prose li{margin:.3em 0}
.prose table{min-width:480px}
.toc{background:var(--bg2);border-radius:12px;padding:16px 20px;margin:0 0 24px}.toc h2{font-size:1rem;margin:0 0 .4em}.toc ol{margin:0;padding-left:20px}
.layout-2{display:grid;gap:32px}@media(min-width:1000px){.layout-2{grid-template-columns:minmax(0,1fr) 300px}}
.aside-box{position:sticky;top:84px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--sh)}
.related{margin-top:28px;padding:18px 20px;background:var(--bg2);border-radius:12px}.related ul{margin:0;padding-left:18px}.related li{margin:.3em 0}
.sources{font-size:.9rem;color:var(--mut)}
/* CTA band */
.cta-band{background:var(--pri);color:#fff;padding:56px 0;text-align:center}
.cta-band h2{color:#fff}.cta-band p{color:#E0E7FF}.cta-band a:not(.btn){color:#FCD34D}
/* footer */
.site-footer{background:#0F172A;color:#CBD5E1;padding:48px 0 0;font-size:.93rem}
.site-footer a{color:#E2E8F0;text-decoration:none}.site-footer a:hover{color:var(--acc)}
.site-footer .mark{background:#fff;border-radius:10px;padding:4px;box-sizing:border-box}.site-footer .wm{color:#fff}.site-footer .wm-vel{color:#A5B4FC}.site-footer .btn-primary{color:#0F172A}
.site-footer>.wrap{display:grid;gap:32px}
@media(min-width:900px){.site-footer>.wrap:first-child{grid-template-columns:300px 1fr}}
.fcols{display:grid;gap:24px;grid-template-columns:repeat(2,1fr)}@media(min-width:760px){.fcols{grid-template-columns:repeat(4,1fr)}}
.fh{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:#94A3B8;margin-bottom:.8em}
.fcol ul{list-style:none;padding:0;margin:0}.fcol li{margin:.45em 0}
.tagline{color:var(--acc);font-weight:700}
.fbottom{border-top:1px solid #1E293B;margin-top:32px;padding:18px 20px;font-size:.85rem;color:#94A3B8}
/* tools */
.tool{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--sh)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
label,.lbl{font-weight:600;font-size:.93rem}
input,select,textarea{font:inherit;padding:.65em .75em;border:1px solid #CBD5E1;border-radius:10px;background:#fff;color:var(--txt);width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--pri);outline:2px solid var(--pri-l)}
.seg{display:flex;flex-wrap:wrap;gap:8px}.seg label{display:inline-flex;align-items:center;gap:6px;border:1px solid #CBD5E1;border-radius:10px;padding:.5em .8em;cursor:pointer;font-weight:600}
.seg input{width:auto}
.result{background:var(--pri-l);border-radius:14px;padding:18px;margin-top:10px}
.result dl{display:grid;grid-template-columns:1fr auto;gap:6px 16px;margin:0}.result dt{color:var(--mut)}.result dd{margin:0;font-weight:700;text-align:right}
.result .tot{font-size:1.3rem;color:var(--pri)}
.form-grid{display:grid;gap:0 16px}@media(min-width:700px){.form-grid{grid-template-columns:1fr 1fr}}
.items-table input{min-width:70px;padding:.45em .5em}.items-table td{padding:6px}.items-table table{min-width:820px}
.btn-link{background:none;border:0;color:var(--pri);font-weight:700;cursor:pointer;padding:6px}
fieldset{border:1px solid var(--line);border-radius:14px;padding:16px;margin:0 0 16px}legend{font-weight:700;padding:0 6px}
/* invoice preview */
.inv{background:#fff;border:1px solid #CBD5E1;padding:24px;font-size:.9rem;color:#000}
.inv h2{font-size:1.3rem;text-align:center;margin-bottom:.2em}.inv table{min-width:0;font-size:.85rem}.inv th,.inv td{border:1px solid #94A3B8;padding:5px 7px}
.inv thead th{background:#EEF0F8;color:#000}.inv .r{text-align:right}.inv-parties{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
.inv-parties div{border:1px solid #94A3B8;padding:8px}
@media print{
 body *{visibility:hidden}.print-area,.print-area *{visibility:visible}
 .print-area{position:absolute;left:0;top:0;width:100%;border:0;padding:0}
 .site-header,.site-footer,.crumbs,.cta-band{display:none}
 @page{size:A4;margin:12mm}
}
/* prevent grid/fieldset children from forcing horizontal overflow on small screens */
.split>*,.grid>*,.layout-2>*,.hero-grid>*{min-width:0}
fieldset{min-width:0}
.inv{overflow-x:auto}
.table-wrap{position:relative}
input[type=checkbox],input[type=radio]{width:auto;padding:0;accent-color:var(--pri)}
.price-toggle input{width:20px;height:20px}
/* round 1: HSN finder, e-way bill checker, templates */
.chips{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.chip{font:inherit;font-size:.9rem;text-align:left;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer;color:var(--txt);line-height:1.35}
.chip:hover{border-color:var(--pri);background:var(--pri-l)}.chip b{color:var(--pri);margin-right:4px}
.chip-sm{font-size:.82rem;padding:3px 10px;margin:2px 2px 2px 0}
.hsn-searchrow{display:flex;gap:8px}.hsn-searchrow input{flex:1;min-width:0}
#hsn-out{margin-top:14px}#hsn-out:empty{display:none}
.hsn-list{list-style:none;padding:0;margin:8px 0 0;border-top:1px solid var(--line)}
.hsn-row{display:grid;grid-template-columns:1fr;gap:4px;padding:12px 0;border-bottom:1px solid var(--line)}
.hsn-code span{font-weight:800;font-size:1.05rem;color:var(--pri);font-variant-numeric:tabular-nums;margin-right:8px}.hsn-code small{color:var(--mut)}
.hsn-desc{overflow-wrap:anywhere}.hsn-act{display:flex;gap:14px}
@media(min-width:760px){.hsn-row{grid-template-columns:170px 1fr auto;align-items:start;gap:16px}}
.ewb-verdict{font-size:1.2rem;font-weight:800;margin:0 0 6px;padding:8px 12px;border-radius:10px}
.ewb-verdict.yes{background:#FEF3C7;color:#7C2D12}.ewb-verdict.no{background:#DCFCE7;color:#14532D}
.result ul{padding-left:1.2em;margin:8px 0}.result .info{margin-top:12px}
label.chk{display:flex;gap:8px;align-items:flex-start;font-weight:400}
.doc-bar{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.doc [contenteditable]{outline:1px dashed transparent;border-radius:3px}.doc [contenteditable]:hover,.doc [contenteditable]:focus{outline-color:#94A3B8;background:#FFFBEB}
.doc .doc-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-bottom:2px solid #0F172A;padding-bottom:8px;margin-bottom:10px}
.doc .doc-title{font-size:1.25rem;font-weight:800;text-align:center;letter-spacing:.04em;margin:4px 0 10px}
.doc .doc-meta{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;font-size:.85rem;margin-bottom:10px}
.doc .doc-foot{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px;font-size:.85rem}
.doc .sign{text-align:right;padding-top:36px}
.doc .tag{display:block;text-align:center;font-weight:700;font-size:.8rem;margin-bottom:4px}
.fields-table td:first-child{font-weight:600;white-space:nowrap}
@media print{body:has(.print-area) main *:not(.print-area):not(:has(.print-area)):not(.print-area *){display:none!important}}
@media print{.doc [contenteditable]{outline:0!important;background:none!important}.doc-bar{display:none}}
/* round 2: barcode generator */
.bc-print{display:none}
.bc-result{display:flex;flex-direction:column;align-items:center;gap:10px}
.bc-label-wrap{background:#fff;border:1px dashed #94A3B8;box-sizing:border-box;max-width:100%}
.bc-label{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;padding:1mm 1.5mm;box-sizing:border-box;overflow:hidden;color:#000;font-family:Arial,Helvetica,sans-serif;text-align:center}
.bc-name{font-size:7pt;line-height:1.15;max-height:2.3em;overflow:hidden;width:100%}
.bc-price{font-size:7.5pt;font-weight:700;line-height:1.2}
.bc-svg{flex:1 1 auto;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
.bc-svg svg{width:100%;height:100%;max-height:100%}
#bc-msg.err{color:#B91C1C}
@media print{
 .bc-print{display:block}
 .bc-sheet{display:grid;width:210mm;height:297mm;box-sizing:border-box;page-break-after:always;break-after:page;align-content:start}
 .bc-sheet:last-child{page-break-after:auto;break-after:auto}
 .bc-cell{overflow:hidden}
 .bc-roll{page-break-after:always;break-after:page;overflow:hidden}
 .bc-roll:last-child{page-break-after:auto;break-after:auto}
}

/* round 2: larger on-screen barcode preview */
#bc-preview .bc-label-wrap{zoom:1.3}
@media (min-width:700px){#bc-preview .bc-label-wrap{zoom:2}}
/* POS screenshots */
.shot{margin:0}.shot picture,.shot img{display:block;width:100%;height:auto}
.shot img{border-radius:12px;border:1px solid var(--line);box-shadow:var(--sh);background:#fff}
.shot figcaption{font-size:.85rem;color:var(--mut);margin-top:8px;line-height:1.45}
.hero .shot figcaption{color:#C7D2FE}.hero .shot img{border:0;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.shots{display:grid;gap:22px;margin-top:20px}@media(min-width:760px){.shots{grid-template-columns:repeat(2,1fr)}}
.pos-price{border:2px dashed var(--acc);border-radius:var(--r);padding:18px 20px;background:#FFFBEB}
.pos-price strong{color:var(--acc-d)}
.kv{display:grid;gap:10px;margin:0;padding:0;list-style:none}.kv li{padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:#fff}
