/* Ajwaaz Customer Guide â pure HTML + CSS, no JavaScript */
:root{
--brand:#6d3b63; --brand-2:#8a5580; --brand-dark:#552d4d; --brand-soft:#f4ecf2; --brand-line:#e2cfdc; --lime:#ffd166;
--ink:#0f1a14; --ink-soft:#5b6b62; --line:#e4ebe6; --paper:#f6f8f5; --panel:#fff;
--gold:#8ac926; --gold-soft:#f2fbd9;
--warn:#b7791f; --warn-bg:#fff6e0; --danger:#c0392b; --danger-bg:#fdeceb;
--info:#1f6b45; --info-bg:#eaf5ee; --ok:#0f9d58; --ok-bg:#e6f7ed;
--radius:14px; --shadow:0 1px 2px rgba(15,26,20,.04),0 6px 24px rgba(15,26,20,.05);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font-family:Inter,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--paper);color:var(--ink);font-size:16.5px;line-height:1.65;-webkit-text-size-adjust:100%}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
h1,h2,h3,h4{line-height:1.25;margin:0 0 .5em;letter-spacing:-.01em}
p{margin:0 0 1em}
/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.site-header .in{max-width:1180px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;color:var(--ink);letter-spacing:-.02em}
.brand:hover{text-decoration:none}
.brand .mark{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,#6d3b63,#8a5580);color:#ffd166;display:grid;place-items:center;font-weight:800;font-size:18px;font-style:normal;box-shadow:0 6px 16px rgba(20,83,45,.25)}
.site-nav a.home-site{color:var(--ink);border:1px solid var(--line);background:var(--panel, #fff)}
.brand small{display:block;font-weight:600;color:var(--ink-soft);font-size:11.5px;letter-spacing:.02em;margin-top:-3px}
.site-nav{display:flex;gap:4px;margin-inline-start:auto;align-items:center;flex-wrap:wrap}
.site-nav a{padding:8px 11px;border-radius:9px;color:var(--ink-soft);font-weight:600;font-size:14.5px}
.site-nav a:hover{background:var(--brand-soft);color:var(--brand);text-decoration:none}
.site-nav a.cur{background:var(--brand-soft);color:var(--brand)}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff!important;padding:10px 18px;border-radius:10px;font-weight:700;font-size:14.5px;border:0}
.btn:hover{opacity:.93;text-decoration:none}
.btn.ghost{background:transparent;color:var(--brand)!important;border:1.5px solid var(--brand-line)}
.btn.light{background:#fff;color:var(--brand)!important}
/* ---------- hero ---------- */
.hero{background:radial-gradient(1200px 400px at 85% -10%,rgba(198,244,50,.30),transparent 60%),radial-gradient(900px 500px at 0% 110%,rgba(255,255,255,.08),transparent 60%),linear-gradient(135deg,#552d4d,var(--brand) 55%,#8a5580);color:#fff}
.hero .in{max-width:1180px;margin:0 auto;padding:54px 20px 60px}
.hero .crumb{font-size:13.5px;opacity:.8;margin-bottom:14px}
.hero .crumb a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.hero .ico{width:64px;height:64px;border-radius:18px;background:rgba(255,255,255,.14);display:grid;place-items:center;font-size:32px;margin-bottom:16px}
.hero h1{font-size:clamp(28px,4.4vw,44px);margin-bottom:.35em;font-weight:800}
.hero p.lead{font-size:clamp(16.5px,2vw,19px);max-width:720px;opacity:.94;margin-bottom:22px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);padding:5px 13px;border-radius:99px;font-size:13px;font-weight:600}
.hero .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
/* ---------- doc layout ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.doc{display:grid;grid-template-columns:250px minmax(0,1fr);gap:34px;padding:34px 0 60px;align-items:start}
.toc{position:sticky;top:86px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 12px;box-shadow:var(--shadow);max-height:calc(100vh - 110px);overflow:auto}
.toc h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin:2px 10px 8px}
.toc a{display:block;padding:7px 10px;border-radius:8px;color:var(--ink-soft);font-size:14.5px;font-weight:600;line-height:1.35}
.toc a:hover{background:var(--brand-soft);color:var(--brand);text-decoration:none}
main{min-width:0}
section.blk{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:28px 30px;margin-bottom:22px;box-shadow:var(--shadow)}
section.blk>h2{font-size:24px;display:flex;align-items:center;gap:12px;margin-bottom:.6em}
section.blk>h2 .n{flex:none;width:34px;height:34px;border-radius:10px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:16px;font-weight:800}
section.blk>p.sub{color:var(--ink-soft);margin-top:-.3em}
h3{font-size:18px;margin-top:1.3em}
/* ---------- cards ---------- */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);transition:transform .15s,border-color .15s,box-shadow .15s;color:var(--ink);display:block}
a.card:hover{transform:translateY(-2px);border-color:var(--brand-line);box-shadow:0 10px 30px rgba(20,83,45,.14);text-decoration:none}
.card .ci{width:46px;height:46px;border-radius:13px;background:var(--brand-soft);display:grid;place-items:center;font-size:24px;margin-bottom:12px}
.card h3{margin:0 0 .3em;font-size:17.5px}
.card p{margin:0;color:var(--ink-soft);font-size:14.5px;line-height:1.5}
.card .go{display:inline-block;margin-top:12px;color:var(--brand);font-weight:700;font-size:14px}
.mini{background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:12px;padding:16px 18px}
.mini b{display:block;color:var(--brand);margin-bottom:2px}
.mini span{color:var(--ink-soft);font-size:14.5px;line-height:1.5;display:block}
/* ---------- flow strip ---------- */
.flow{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 4px;padding:0;list-style:none;counter-reset:f}
.flow li{counter-increment:f;flex:1 1 150px;background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:12px;padding:12px 14px 12px 46px;position:relative;font-weight:600;font-size:14.5px;line-height:1.35;min-width:150px}
.flow li::before{content:counter(f);position:absolute;left:12px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800}
.flow li small{display:block;font-weight:500;color:var(--ink-soft);font-size:12.5px}
/* ---------- steps ---------- */
ol.steps{list-style:none;counter-reset:s;margin:14px 0;padding:0}
ol.steps>li{counter-increment:s;position:relative;padding:2px 0 16px 34px;border-left:2px solid var(--brand-line);margin-left:15px}
ol.steps>li:last-child{border-left-color:transparent;padding-bottom:4px}
ol.steps>li::before{content:counter(s);position:absolute;left:-16px;top:0;width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:800;box-shadow:0 0 0 4px #fff}
ol.steps>li b.t{display:block;margin-bottom:1px}
.ui{display:inline-block;background:#eef3ef;border:1px solid #dbe5de;border-bottom-width:2px;border-radius:7px;padding:0 8px;font-weight:700;font-size:.9em;color:#14241a;white-space:nowrap;line-height:1.6;direction:ltr;unicode-bidi:isolate}
.ui.g{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand)}
ul.tick{list-style:none;padding:0;margin:10px 0}
ul.tick li{position:relative;padding-left:30px;margin-bottom:9px}
ul.tick li::before{content:"â";position:absolute;left:0;top:1px;width:21px;height:21px;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:grid;place-items:center;font-size:12px;font-weight:800}
ul.dot{padding-left:20px;margin:10px 0}
ul.dot li{margin-bottom:6px}
/* ---------- callouts ---------- */
.note,.tip,.warn{border-radius:12px;padding:13px 16px 13px 50px;margin:16px 0;position:relative;font-size:15.5px;line-height:1.55}
.note::before,.tip::before,.warn::before{position:absolute;left:15px;top:12px;font-size:20px}
.tip{background:var(--ok-bg);border:1px solid #bfe6cf}.tip::before{content:"đĄ"}
.note{background:var(--info-bg);border:1px solid #c5e3cf}.note::before{content:"âšī¸"}
.warn{background:var(--warn-bg);border:1px solid #f1dca8}.warn::before{content:"â ī¸"}
.note b,.tip b,.warn b{margin-right:4px}
/* ---------- accordion ---------- */
details.task,details.faq{border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:12px;overflow:hidden}
details.task>summary,details.faq>summary{cursor:pointer;list-style:none;padding:15px 52px 15px 18px;font-weight:700;font-size:16.5px;position:relative;background:#fbfdfb}
details>summary::-webkit-details-marker{display:none}
details>summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:8px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:20px;font-weight:700;line-height:1}
details[open]>summary::after{content:"â"}
details[open]>summary{border-bottom:1px solid var(--line);background:var(--brand-soft);color:var(--brand)}
details .body{padding:8px 20px 14px}
details.task>summary .k{display:inline-block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;background:var(--gold-soft);color:#3f6212;border:1px solid #d9f0a3;padding:1px 8px;border-radius:99px;margin-right:9px;vertical-align:2px}
/* ---------- table ---------- */
.tw{overflow-x:auto;margin:14px 0;border:1px solid var(--line);border-radius:12px}
table{border-collapse:collapse;width:100%;font-size:15px;background:#fff}
th,td{text-align:start;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:#f6f9f6;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)}
tr:last-child td{border-bottom:0}
.badge{display:inline-block;padding:3px 11px;border-radius:99px;font-size:12.5px;font-weight:700;white-space:nowrap}
.b-ok{background:var(--ok-bg);color:var(--ok)}.b-warn{background:var(--warn-bg);color:var(--warn)}.b-bad{background:var(--danger-bg);color:var(--danger)}.b-info{background:var(--info-bg);color:var(--info)}.b-grey{background:#eceef5;color:#4a5068}
/* ---------- menu mockup ---------- */
.mock{display:grid;grid-template-columns:230px minmax(0,1fr);gap:22px;align-items:start}
.sb{direction:ltr;text-align:left;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:var(--shadow);font-size:14.5px}
.sb .top{font-weight:800;padding:4px 8px 10px;border-bottom:1px solid var(--line);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.sb .top i{width:22px;height:22px;border-radius:7px;background:var(--brand);display:inline-block}
.sb div.l{padding:8px 10px;border-radius:9px;color:var(--ink-soft);font-weight:600;display:flex;justify-content:space-between}
.sb div.l::after{content:"âē";opacity:.5}
.sb div.l.plain::after{content:""}
.sb div.l.act{background:var(--brand-soft);color:var(--brand)}
.sb .grp{margin-top:8px;padding:10px 10px 6px;border-top:1px dashed var(--brand-line);font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--brand);font-weight:800}
.sb .sub{padding:7px 10px 7px 20px;border-radius:9px;color:var(--ink);font-weight:600;background:#f8fbf9;margin:3px 0;border-left:3px solid var(--brand)}
.mock .expl h3{margin-top:0}
/* ---------- misc ---------- */
.helpbox{background:linear-gradient(135deg,#552d4d,var(--brand));color:#fff;border-radius:var(--radius);padding:26px 28px;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:8px}
.helpbox h3{color:#fff;margin:0 0 4px;font-size:20px}
.helpbox p{margin:0;opacity:.9}
.helpbox a{color:var(--lime);font-weight:700}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
.pager a{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 18px;color:var(--ink)}
.pager a small{display:block;color:var(--ink-soft);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.pager a.r{text-align:right}
.pager a:hover{border-color:var(--brand-line);text-decoration:none}
.site-footer{background:#0c2416;color:#c9dccf;margin-top:20px}
.site-footer .in{max-width:1180px;margin:0 auto;padding:34px 20px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:14.5px}
.site-footer a{color:#fff}
.site-footer b{color:#fff}
.pilllist{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.pilllist span{background:#eef4f0;border:1px solid var(--line);padding:4px 12px;border-radius:99px;font-size:13.5px;font-weight:600;color:#33463a}
.sect-title{display:flex;align-items:end;justify-content:space-between;gap:10px;margin:30px 0 14px}
.sect-title h2{margin:0;font-size:24px}
.sect-title span{color:var(--ink-soft);font-size:14.5px}
/* ---------- responsive ---------- */
@media (max-width:1000px){
.doc{grid-template-columns:1fr}
.toc{position:static;max-height:none;display:flex;flex-wrap:wrap;gap:6px;padding:12px}
.toc h4{width:100%}
.toc a{background:#eef4f0;padding:6px 12px;border-radius:99px;font-size:13.5px}
.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
body{font-size:16px}
.g2,.g3,.g4{grid-template-columns:1fr}
.mock{grid-template-columns:1fr}
section.blk{padding:20px 16px}
.site-nav{margin-inline-start:0;width:100%}
.hero .in{padding:36px 16px 40px}
.pager{grid-template-columns:1fr}
details .body{padding:6px 14px 12px}
.ui{white-space:normal}
}
/* ---------- print (customers can "Save as PDF") ---------- */
@media print{
body{background:#fff;font-size:12pt}
.site-header,.toc,.helpbox .btn,.pager,.cta{display:none!important}
.hero{background:#fff!important;color:#000}
.hero .in{padding:10px 0}.chip{border-color:#999;color:#000;background:#fff}
.doc{display:block;padding:0}
section.blk,.card,details{box-shadow:none;break-inside:avoid}
a{color:#000}
}
/* ---------- language switcher ---------- */
.lang{display:inline-flex;border:1.5px solid var(--brand-line);border-radius:10px;overflow:hidden;margin-inline-start:6px}
.lang a{padding:7px 12px;font-size:13.5px;font-weight:700;color:var(--ink-soft);border-inline-end:1px solid var(--brand-line)}
.lang a:last-child{border-inline-end:0}
.lang a:hover{background:var(--brand-soft);text-decoration:none}
.lang a.on{background:var(--brand);color:#fff}
.badge-en{display:inline-block;background:var(--gold-soft);color:#3f6212;border:1px solid #d9f0a3;border-radius:99px;padding:1px 9px;font-size:11.5px;font-weight:800;margin-inline-start:8px;vertical-align:middle}
.langpick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:8px 0 30px}
.langpick a{background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px 20px;text-align:center;color:var(--ink);box-shadow:var(--shadow);transition:.15s}
.langpick a:hover{border-color:var(--brand-line);transform:translateY(-3px);text-decoration:none;box-shadow:0 12px 34px rgba(20,83,45,.16)}
.langpick b{display:block;font-size:26px;margin-bottom:6px}
.langpick span{color:var(--ink-soft);font-size:14.5px}
@media (max-width:680px){.langpick{grid-template-columns:1fr}}
/* ---------- Malayalam / Arabic typography ---------- */
html[lang="ml"] body{font-family:"Noto Sans Malayalam","Nirmala UI","Kartika","Manjari",Inter,-apple-system,"Segoe UI",sans-serif;line-height:1.85}
html[lang="ar"] body{font-family:"Noto Sans Arabic","Segoe UI",Tahoma,"Geeza Pro",Arial,sans-serif;line-height:1.9}
html[lang="ml"] *,html[lang="ar"] *{letter-spacing:0!important}
html[lang="ml"] h1,html[lang="ml"] h2,html[lang="ml"] h3{line-height:1.45}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{line-height:1.5}
html[lang="ml"] .toc h4,html[lang="ar"] .toc h4,html[lang="ar"] th,html[lang="ml"] th{text-transform:none}
/* ---------- RTL (Arabic) ---------- */
html[dir="rtl"] .note,html[dir="rtl"] .tip,html[dir="rtl"] .warn{padding:13px 50px 13px 16px}
html[dir="rtl"] .note::before,html[dir="rtl"] .tip::before,html[dir="rtl"] .warn::before{left:auto;right:15px}
html[dir="rtl"] ol.steps>li{padding:2px 34px 16px 0;border-left:0;border-right:2px solid var(--brand-line);margin-left:0;margin-right:15px}
html[dir="rtl"] ol.steps>li:last-child{border-right-color:transparent}
html[dir="rtl"] ol.steps>li::before{left:auto;right:-16px}
html[dir="rtl"] ul.tick li{padding-left:0;padding-right:30px}
html[dir="rtl"] ul.tick li::before{left:auto;right:0}
html[dir="rtl"] ul.dot{padding-left:0;padding-right:20px}
html[dir="rtl"] .flow li{padding:12px 46px 12px 14px}
html[dir="rtl"] .flow li::before{left:auto;right:12px}
html[dir="rtl"] details.task>summary,html[dir="rtl"] details.faq>summary{padding:15px 18px 15px 52px}
html[dir="rtl"] details>summary::after{right:auto;left:16px}
html[dir="rtl"] details.task>summary .k{margin-right:0;margin-left:9px}
html[dir="rtl"] .pager a.r{text-align:left}
html[dir="rtl"] .pager a{text-align:right}
html[dir="rtl"] .pager a.r{text-align:left}
html[dir="rtl"] .note b,html[dir="rtl"] .tip b,html[dir="rtl"] .warn b{margin-right:0;margin-left:4px}