/* Home page. Design idea: the shopkeeper's red bahi-khata ledger, brought to life by voice.
   Signature: the hero ledger that writes itself as the voice line plays. Everything else stays quiet. */
:root{
  --ink:#16201C; --muted:#56655E; --green:#0D5C46; --dark:#0B2E24; --mari:#E8A317;
  --bahi:#A3282B;            /* red cloth cover / margin rule of a bahi-khata */
  --page:#FFFDF7;            /* ledger page */
  --rule:#E9E1CC;            /* ruled lines */
  --ground:#F6F3EC;          /* site background */
}
body{background:var(--ground)}
.wrap{max-width:1180px}
:focus-visible{outline:3px solid var(--mari);outline-offset:3px;border-radius:6px}

/* header */
header.top{background:rgba(246,243,236,.9)}
.logo i{background:var(--bahi);color:#FFE7B0}
nav a:not(.btn):hover{color:var(--dark)}

/* hero */
.hx{position:relative;background:var(--dark);color:#EAF1EC;overflow:hidden}
.hx:before{content:"";position:absolute;inset:0;background:
  radial-gradient(700px 420px at 78% 38%,rgba(232,163,23,.16),transparent 70%),
  radial-gradient(600px 400px at 10% 110%,rgba(30,120,90,.35),transparent 70%)}
.hx .wrap{position:relative;display:grid;grid-template-columns:1fr 520px;gap:56px;align-items:center;padding-block:72px 84px}
.hx h1{font-size:clamp(46px,6.4vw,84px);font-weight:800;line-height:1.02;color:#fff;letter-spacing:-.5px}
.hx h1 span{display:block;color:var(--mari)}
.hx .lead{font-size:clamp(18px,2vw,21px);color:#C5D6CD;max-width:31em;margin:22px 0 30px}
.hx .cta{display:flex;flex-wrap:wrap;gap:12px}
.hx .btn{background:var(--mari);color:var(--dark)!important;padding:15px 26px;border-radius:12px;font-size:19px}
.hx .btn.ghost{background:transparent;color:#EAF1EC!important;border:1.5px solid rgba(234,241,236,.45)}
.hx .btn.ghost:hover{border-color:#EAF1EC}
.hx .fine{margin-top:18px;font-size:15.5px;color:#9FB6AB}
.hx .fine b{color:#fff;font-weight:700}
@media (max-width:1000px){.hx .wrap{grid-template-columns:1fr;gap:40px;padding-block:44px 56px}}

/* the ledger that writes itself */
.voice{display:flex;align-items:center;gap:14px;margin:0 0 16px 28px}
.mic{flex:none;width:56px;height:56px;border-radius:50%;background:var(--bahi);display:grid;place-items:center;position:relative;box-shadow:0 10px 26px rgba(163,40,43,.45)}
.mic svg{width:26px;height:26px}
.mic:after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(163,40,43,.55);opacity:0}
.listening .mic:after{animation:ring 1.2s ease-out infinite}
@keyframes ring{from{transform:scale(.85);opacity:.9}to{transform:scale(1.35);opacity:0}}
.said{background:#fff;color:var(--ink);border-radius:18px 18px 18px 4px;padding:12px 18px;font-size:18px;font-weight:600;min-height:52px;box-shadow:0 12px 30px rgba(0,0,0,.25);max-width:400px}
.said .caret{display:inline-block;width:2px;height:1.1em;background:var(--bahi);vertical-align:-3px;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.ledger{position:relative;background:var(--page);color:var(--ink);border-radius:6px 16px 16px 6px;padding:18px 26px 20px 58px;box-shadow:0 30px 70px rgba(0,0,0,.4),inset 10px 0 0 var(--bahi)}
.ledger:before{content:"";position:absolute;left:44px;top:0;bottom:0;border-left:1.5px solid rgba(163,40,43,.45);box-shadow:3px 0 0 rgba(163,40,43,.25)}
.lhead{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:6px}
.lhead b{font-family:'Baloo 2';font-size:24px;color:var(--dark)}
.lhead small{color:var(--muted);font-size:15px}
.lrow{display:grid;grid-template-columns:1fr 90px 90px;align-items:center;min-height:50px;border-bottom:1px solid var(--rule);font-size:19px;font-variant-numeric:tabular-nums}
.lrow .q{color:var(--muted)}
.lrow .r{text-align:right;font-weight:700}
.lrow.h{font-size:13px;color:var(--muted);min-height:26px}
.lrow.h .r{font-weight:600}
.lrow.item{opacity:0;transform:translateX(-8px);transition:opacity .35s,transform .35s}
.lrow.item.on{opacity:1;transform:none}
.lrow .fix{display:block;font-size:12.5px;color:#9A6500;font-weight:600;line-height:1}
.ltotal{display:grid;grid-template-columns:1fr auto;align-items:center;min-height:58px;font-size:20px;font-weight:700}
.ltotal .r{font-family:'Mukta';font-weight:800;font-size:30px;color:var(--dark);border-bottom:4px double var(--dark);line-height:1.1;font-variant-numeric:tabular-nums}
.stamp{position:absolute;right:112px;bottom:78px;transform:rotate(-8deg) scale(1.4);opacity:0;border:3px solid var(--green);color:var(--green);border-radius:10px;padding:4px 12px;font-weight:800;font-size:17px;transition:opacity .25s,transform .25s;background:rgba(255,253,247,.85)}
.stamp.on{opacity:1;transform:rotate(-8deg) scale(1)}
.bal{margin-top:14px;display:flex;justify-content:space-between;align-items:center;background:#FBEFEF;border-radius:10px;padding:10px 14px;font-size:16px}
.bal b{color:var(--bahi);font-size:19px}
@media (max-width:520px){.stamp{display:none}.ledger{padding:18px 16px 16px 46px}.ledger:before{left:34px}.voice{margin-left:0}.said{font-size:16px}.lrow{grid-template-columns:1fr 70px 76px;font-size:17px}}

/* proof strip */
.proof{background:#fff;border-bottom:1px solid var(--rule)}
.proof .wrap{display:flex;flex-wrap:wrap;gap:12px 36px;justify-content:space-between;padding-block:20px;color:var(--muted);font-size:16.5px}
.proof b{color:var(--dark);font-size:19px;display:block;font-family:'Baloo 2';line-height:1.1}

/* sections */
.sec{padding:88px 0}
.sec h2{font-size:clamp(32px,4vw,48px);color:var(--dark);font-weight:800;max-width:18em}
.sec .intro{color:var(--muted);font-size:19px;max-width:38em;margin:12px 0 0}

/* diary vs app */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:44px;border-radius:18px;overflow:hidden;box-shadow:0 20px 50px rgba(11,46,36,.12)}
.vs > div{padding:30px 34px}
.diary{background:#FFFDF2;background-image:repeating-linear-gradient(to bottom,transparent 0 37px,#DCE6F0 37px 38px);font-family:'Kalam',cursive;color:#2E3E7A}
.diary h3,.app h3{font-family:'Baloo 2';font-size:24px;margin-bottom:12px}
.diary h3{color:#2E3E7A}
.diary li{font-size:20px;line-height:38px;list-style:none}
.diary li s{text-decoration-color:var(--bahi);text-decoration-thickness:2px}
.diary ul,.app ul{padding:0;margin:0}
.app{background:var(--dark);color:#DCE8E2}
.app h3{color:var(--mari)}
.app li{list-style:none;font-size:18px;line-height:1.5;padding:7px 0 7px 30px;position:relative;border-bottom:1px solid rgba(255,255,255,.08)}
.app li:before{content:"";position:absolute;left:2px;top:15px;width:14px;height:8px;border-left:3px solid var(--mari);border-bottom:3px solid var(--mari);transform:rotate(-45deg)}
@media (max-width:820px){.vs{grid-template-columns:1fr}}

/* how it works */
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px;counter-reset:st}
.how li{list-style:none;counter-increment:st}
.how li:before{content:counter(st);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--mari);color:var(--dark);font-weight:800;font-size:20px;margin-bottom:14px}
.how h3{font-size:24px;color:var(--dark);margin-bottom:6px}
.how p{margin:0;color:var(--muted)}
.how{padding:0}
@media (max-width:820px){.how{grid-template-columns:1fr}}

/* feature rows */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-top:72px}
.frow h3{font-size:clamp(28px,3vw,36px);color:var(--dark);margin-bottom:10px}
.frow p{color:#33423C;font-size:18.5px;margin:0 0 12px;max-width:30em}
.frow ul{padding-left:20px;color:var(--muted);margin:0}
.stage{position:relative;min-height:440px;display:grid;place-items:center;border-radius:24px;background:#EDE7D9}
.stage.dark{background:var(--dark)}
.dev{width:230px;border:8px solid #111915;border-radius:32px;overflow:hidden;background:#111915;box-shadow:0 24px 50px rgba(0,0,0,.25)}
.dev img{border-radius:24px;width:100%;height:auto}
.wa{position:absolute;right:6%;bottom:10%;width:min(300px,62%);background:#E7FFDB;border-radius:14px 14px 4px 14px;padding:12px 14px 8px;font-size:15.5px;line-height:1.45;color:#111;box-shadow:0 18px 40px rgba(0,0,0,.25)}
.wa small{display:block;text-align:right;color:#667;font-size:12px}
.slip{position:absolute;left:6%;bottom:8%;width:min(270px,62%);background:#fff;color:var(--ink);padding:16px 18px 18px;font-size:15.5px;box-shadow:0 18px 40px rgba(0,0,0,.2);
  -webkit-mask:radial-gradient(circle 6px at 50% 100%,transparent 98%,#000) 0 0/16px 100%;mask:radial-gradient(circle 6px at 50% 100%,transparent 98%,#000) 0 0/16px 100%}
.slip b.t{display:block;font-family:'Baloo 2';font-size:19px;color:var(--dark);border-bottom:1.5px dashed #bbb;padding-bottom:6px;margin-bottom:6px}
.slip div{display:flex;justify-content:space-between;padding:3px 0;font-variant-numeric:tabular-nums}
.slip div.k{border-top:1.5px dashed #bbb;margin-top:6px;padding-top:8px;font-weight:800}
.frow.flip .stage{order:2}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.badges span{background:#fff;border:1px solid var(--rule);border-radius:10px;padding:8px 14px;font-weight:600;color:var(--dark)}
@media (max-width:900px){.frow{grid-template-columns:1fr;gap:28px;margin-top:56px}.frow.flip .stage{order:0}.stage{min-height:380px}.dev{width:200px}}

/* videos */
.vband{background:var(--dark);color:#DCE8E2}
.vband h2{color:#fff}
.vband .intro{color:#A9BFB4}
.vrow{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
.vrow figure{margin:0}
.vrow video{width:100%;aspect-ratio:9/16;border-radius:16px;background:#000;display:block;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.vrow figcaption{margin-top:10px;font-weight:700;color:#fff;font-size:17px}
.vrow figcaption small{display:block;color:#8FA99D;font-weight:400;font-size:14.5px}
@media (max-width:900px){.vrow{grid-template-columns:repeat(2,1fr)}}

/* price: a bill slip */
.pgrid{display:grid;grid-template-columns:1fr 420px;gap:56px;align-items:center}
.bill{background:#fff;padding:30px 30px 40px;box-shadow:0 24px 60px rgba(11,46,36,.15);position:relative;
  -webkit-mask:radial-gradient(circle 9px at 50% 100%,transparent 98%,#000) 0 0/24px 100%;mask:radial-gradient(circle 9px at 50% 100%,transparent 98%,#000) 0 0/24px 100%}
.bill .t{font-family:'Baloo 2';font-weight:800;font-size:22px;color:var(--dark);text-align:center;border-bottom:1.5px dashed #c9c2b3;padding-bottom:10px}
.bill .ln{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dotted #d8d1c2;font-size:17px}
.bill .ln span:last-child{font-weight:700;color:var(--green)}
.bill .sum{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px}
.bill .sum b{font-family:'Mukta';font-weight:800;font-size:46px;color:var(--dark);line-height:1}
.bill .sum small{color:var(--muted)}
.bill .btn{width:100%;margin-top:20px;background:var(--green)}
.never{margin-top:22px;border-left:4px solid var(--bahi);background:#FBEFEF;padding:14px 18px;border-radius:0 12px 12px 0;color:#5C1F17;font-size:17px}
@media (max-width:900px){.pgrid{grid-template-columns:1fr;gap:32px}}

/* faq */
.faq{max-width:820px}
.faq details{background:#fff;border:1px solid var(--rule);border-radius:14px;padding:16px 20px;margin-bottom:10px}
.faq summary{font-size:18.5px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font-size:24px;line-height:1;color:var(--green);transition:transform .2s}
.faq details[open] summary:after{transform:rotate(45deg)}

/* closing call */
.close{background:var(--bahi);color:#FFF3E0;text-align:center;padding:72px 0}
.close h2{color:#fff;font-size:clamp(34px,4.6vw,54px);margin:0 auto 12px}
.close p{color:#FFD9C2;font-size:19px;margin:0 0 26px}
.close .btn{background:#fff;color:var(--bahi)!important;font-size:19px;padding:15px 30px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* shop types */
.shops{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:40px;border-top:2px solid var(--dark)}
.shops div{padding:24px 26px 26px 0;border-bottom:1px solid var(--rule)}
.shops div:not(:nth-child(3n+1)){padding-left:26px;border-left:1px solid var(--rule)}
.shops h3{font-size:23px;color:var(--dark);margin-bottom:6px}
.shops p{margin:0;color:var(--muted)}
@media (max-width:900px){.shops{grid-template-columns:1fr 1fr}.shops div:not(:nth-child(3n+1)){padding-left:0;border-left:0}.shops div:nth-child(even){padding-left:22px;border-left:1px solid var(--rule)}}
@media (max-width:600px){.shops{grid-template-columns:1fr}.shops div:nth-child(even){padding-left:0;border-left:0}}

/* a day: timeline */
.dayband{background:#fff;border-block:1px solid var(--rule)}
.tl{list-style:none;padding:0;margin:44px 0 0;position:relative}
.tl:before{content:"";position:absolute;left:150px;top:8px;bottom:8px;border-left:2px dashed #D9CFB8}
.tl li{display:grid;grid-template-columns:150px 1fr;gap:0 40px;padding:0 0 34px;position:relative}
.tl li:after{content:"";position:absolute;left:144px;top:8px;width:14px;height:14px;border-radius:50%;background:var(--mari);box-shadow:0 0 0 4px #fff}
.tl b{color:#9A6500;font-size:17px;padding-top:2px}
.tl h3{font-size:24px;color:var(--dark);margin-bottom:4px;grid-column:2}
.tl p{grid-column:2;margin:0;color:#33423C;max-width:40em}
@media (max-width:700px){.tl:before{left:6px}.tl li{grid-template-columns:1fr;padding-left:34px}.tl li:after{left:0}.tl h3,.tl p{grid-column:1}}

/* comparison */
.cmpwrap{overflow-x:auto;margin-top:36px;border-radius:16px;box-shadow:0 16px 40px rgba(11,46,36,.1)}
.cmp{width:100%;border-collapse:collapse;background:#fff;min-width:640px;font-size:17px}
.cmp th,.cmp td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top}
.cmp thead th{background:#EFEADF;font-family:'Baloo 2';font-size:19px;color:var(--muted)}
.cmp thead th:last-child{background:var(--dark);color:var(--mari)}
.cmp td:first-child{font-weight:700;color:var(--dark);width:18%}
.cmp td:nth-child(2){color:var(--muted)}
.cmp td:last-child{background:#F1F7F3;color:var(--dark);font-weight:600}

/* safety */
.safeband{background:var(--dark);color:#DCE8E2}
.safeband h2{color:#fff}.safeband .intro{color:#A9BFB4}
.safeband a{color:var(--mari)}
.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 40px;margin-top:40px}
.rules h3{font-size:22px;color:#fff;margin-bottom:6px;padding-top:14px;border-top:2px solid var(--mari)}
.rules p{margin:0;color:#B7CABF}
@media (max-width:900px){.rules{grid-template-columns:1fr 1fr}}@media (max-width:600px){.rules{grid-template-columns:1fr}}

/* udhaar rules (reading material) */
.tipwrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.tipwrap > div{position:sticky;top:90px}
.tips{list-style:none;padding:0;margin:0;counter-reset:tp}
.tips li{counter-increment:tp;position:relative;padding:0 0 26px 64px;border-bottom:1px solid var(--rule);margin-bottom:24px}
.tips li:before{content:counter(tp);position:absolute;left:0;top:-4px;font-family:'Baloo 2';font-weight:800;font-size:42px;color:var(--bahi);line-height:1}
.tips h3{font-size:23px;color:var(--dark);margin-bottom:4px}
.tips p{margin:0;color:#33423C}
@media (max-width:900px){.tipwrap{grid-template-columns:1fr;gap:28px}.tipwrap > div{position:static}}

/* in-app help */
.helpwrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.hv{list-style:none;padding:24px;margin:0;background:var(--dark);border-radius:20px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hv li{color:#E4EDE8;font-weight:600;padding:10px 12px 10px 38px;position:relative;background:rgba(255,255,255,.06);border-radius:10px;font-size:16px}
.hv li:before{content:"";position:absolute;left:12px;top:50%;margin-top:-9px;width:18px;height:18px;border-radius:50%;background:var(--mari);clip-path:polygon(30% 20%,30% 80%,80% 50%);}
@media (max-width:900px){.helpwrap{grid-template-columns:1fr;gap:28px}}
@media (max-width:480px){.hv{grid-template-columns:1fr}}

/* about */
.aboutband{background:#EFEADF}
.aboutwrap{display:grid;grid-template-columns:.7fr 1.3fr;gap:56px}
.aboutwrap p{font-size:19px;color:#2B3934;margin:0 0 16px;max-width:36em}
@media (max-width:900px){.aboutwrap{grid-template-columns:1fr;gap:16px}}