/* The website's espresso look (index.html), shared by its sections and the spa pages (for-spas, pricing). */
:root{
  --espresso:#15100C; --umber:#211913; --sandal:#D9B98D; --bone:#EFE7DB; --ember:#C2643A; --dim:#A39684; --hair:rgba(239,231,219,.11);
  --soft:#CFC4B4; --ok:#9FD7A8;
  --display:"Marcellus",Georgia,serif; --sans:"Jost",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  --spring:cubic-bezier(.32,.72,0,1);
}

/* logo: two palms holding a point of warmth, and the name */
.logo{display:inline-flex;align-items:center;gap:12px;flex-shrink:0;text-decoration:none;color:var(--bone)}
.logo svg{width:38px;height:38px;flex:none}
.logo .lname{display:grid;gap:5px}
.logo .lname b{font:400 25px/1 var(--display);letter-spacing:.03em}
.logo .lname small{font:400 9.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--sandal)}
.mark-st{stroke:var(--sandal)}.mark-em{fill:var(--ember)}

/* page bones, for pages without the home page's inline styles */
.site{margin:0;background:var(--espresso);color:var(--bone);font:300 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
.site a{color:inherit}
.site :focus-visible{outline:1.5px solid var(--sandal);outline-offset:4px;border-radius:4px}
.site .wrap{max-width:1240px;margin:0 auto;padding:0 clamp(16px,4vw,48px)}
.site header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:26px 0;flex-wrap:wrap}
.site nav{display:flex;align-items:center;gap:clamp(10px,2.4vw,30px);font-size:15px;flex-wrap:wrap}
.site nav a{white-space:nowrap;text-decoration:none;color:var(--dim);transition:color .4s var(--spring)}
.site nav a:hover,.site nav a[aria-current]{color:var(--bone)}
.site nav .pill{color:var(--espresso);background:var(--sandal);padding:9px 18px;border-radius:999px;font-weight:400}
.site .tag{font:400 11px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--sandal);margin:0 0 24px;display:flex;align-items:center;gap:14px}
.site .tag::before{content:"";width:36px;height:1px;background:var(--sandal)}
.site h1{font:400 clamp(40px,5.2vw,74px)/1.04 var(--display);letter-spacing:-.01em;margin:0 0 24px;text-wrap:balance}
.site h1 span{color:var(--sandal)}
.site h2{font:400 clamp(32px,4vw,54px)/1.06 var(--display);margin:0 0 16px;max-width:22ch;text-wrap:balance}
.site .lede{max-width:46ch;color:var(--soft);font-size:clamp(17px,1.4vw,19px);margin:0 0 34px}
.site section{padding:clamp(80px,12vh,140px) 0}
.site footer{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:72px 0 48px;font-size:14px;color:#8E8170;border-top:1px solid var(--hair)}
.site footer a{text-decoration:none}.site footer a:hover{color:var(--bone)}
.btn{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-weight:400;font-size:16px;padding:7px 7px 7px 22px;border-radius:999px;transition:transform .5s var(--spring)}
.btn i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;transition:transform .5s var(--spring);font-style:normal}
.btn:hover i{transform:translate(3px,-1px) scale(1.06)}
.btn.solid{background:var(--bone);color:var(--espresso)}.btn.solid i{background:var(--espresso);color:var(--bone)}
.btn.ghost{box-shadow:inset 0 0 0 1px var(--hair);color:var(--bone)}.btn.ghost i{background:rgba(239,231,219,.08)}
.ctas{display:flex;gap:12px;flex-wrap:wrap}

.k{font:400 11px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--sandal);margin:0 0 22px}
.sub{color:var(--soft);max-width:52ch;margin:0}
.panel{background:var(--umber);border-radius:26px;box-shadow:inset 0 0 0 1px var(--hair)}

/* how it works: two lanes that meet */
.lanes{display:grid;grid-template-columns:1fr 64px 1fr;margin-top:56px}
.lane-h{padding:0 0 16px;border-bottom:1px solid var(--hair);margin-bottom:4px}
.lane-h b{font:400 28px/1 var(--display)}
.step{display:grid;grid-template-columns:38px 1fr;gap:14px;padding:20px 0;border-bottom:1px solid var(--hair)}
.step .n{font:400 13px var(--mono);color:var(--sandal);padding-top:5px}
.step h3{font:400 23px/1.2 var(--display);margin:0 0 4px}.step p{margin:0;color:var(--dim);font-size:16px}
.seam{position:relative;display:flex;justify-content:center}
.seam::before{content:"";position:absolute;top:52px;bottom:110px;width:1px;background:linear-gradient(var(--hair),var(--sandal) 70%,var(--sandal))}
.meet{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 20px;padding:24px 28px;border-radius:0 0 26px 26px;background:linear-gradient(180deg,rgba(217,185,141,.12),rgba(217,185,141,.04));box-shadow:inset 0 0 0 1px rgba(217,185,141,.25)}
.meet svg{width:32px;height:32px}.meet p{margin:0;font:400 clamp(19px,2vw,23px)/1.3 var(--display);text-align:center}

/* a feature row: a few words beside a picture */
.fr{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(28px,6vw,96px);align-items:center;margin-top:clamp(48px,8vh,88px)}
.fr.flip{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}.fr.flip .txt{order:2}
.fr .lbl{font:400 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin:0 0 14px}
.fr h3{font:400 clamp(26px,2.6vw,36px)/1.15 var(--display);margin:0 0 12px}
.fr p{margin:0;color:var(--soft);max-width:40ch}
.fr ul{list-style:none;margin:20px 0 0;padding:0;max-width:40ch}
.fr li{padding:10px 0;border-top:1px solid var(--hair);color:var(--soft);font-size:16px}

/* the picture: a coloured panel with documents set on it */
.vis{position:relative;border-radius:30px;min-height:460px;display:grid;place-items:center;padding:40px 28px;overflow:hidden}
.vis.ember{background:linear-gradient(140deg,#C9774C,#8F4426)}
.vis.slate{background:linear-gradient(140deg,#4E7686,#2C4853)}
.vis.olive{background:linear-gradient(140deg,#8A8A4A,#565A2A)}
.vis.sand{background:linear-gradient(140deg,#D9B98D,#A9865A)}
.stack{position:relative;width:min(100%,540px);height:400px}
.stack>.s1,.stack>.s2{position:absolute}
.stack>.s1{left:0;top:0;width:76%}
.stack>.s2{right:0;bottom:0;width:56%}
.chipr{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;background:#fff;color:#1d4d2a;border-radius:10px;padding:8px 12px;font:500 12.5px var(--sans);box-shadow:0 12px 26px -10px rgba(0,0,0,.45)}
.chipr i{width:18px;height:18px;border-radius:5px;background:#e3f1e5;color:#2f7a42;display:grid;place-items:center;font-style:normal;font-size:11px}
.chipr svg{width:12px;height:12px}

/* the identity "desk": a dark panel with drifting guilloché, a pointer-following light, documents that settle,
   float, get swept by a checking light, and a check that pops in. */
.vis.desk{background:radial-gradient(120% 100% at 25% 15%,#2E2219 0%,#1B140F 58%,#120D0A 100%);box-shadow:inset 0 0 0 1px var(--hair);perspective:1200px}
.vis.desk .bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
/* contours */
.bg-topo{width:100%;height:100%;opacity:.34;animation:breathe 30s ease-in-out infinite alternate;transform-origin:22% 82%}
.bg-topo path{stroke:#D9B98D}.vis.desk.warm .bg-topo path{stroke:#D08A5E}
/* ledger grid and a scanner line */
.bg-ledger{background-image:linear-gradient(rgba(217,185,141,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(217,185,141,.06) 1px,transparent 1px);background-size:100% 26px,26px 100%;mask-image:radial-gradient(120% 90% at 50% 50%,#000 40%,transparent 85%)}
.bg-ledger i{position:absolute;left:0;right:0;height:90px;top:-90px;background:linear-gradient(transparent,rgba(217,185,141,.07) 70%,rgba(255,236,206,.22) 98%,transparent);animation:scan 12s cubic-bezier(.45,0,.55,1) infinite}
/* frosted colour */
.bg-aurora i{position:absolute;width:60%;aspect-ratio:1;border-radius:50%;filter:blur(70px);opacity:.35;animation:roam 40s ease-in-out infinite alternate}
.bg-aurora i:nth-child(1){background:#C2643A;left:-10%;top:-20%}
.bg-aurora i:nth-child(2){background:#D9B98D;right:-15%;top:20%;animation-duration:27s;animation-direction:alternate-reverse;opacity:.4}
.bg-aurora i:nth-child(3){background:#6E4A33;left:25%;bottom:-35%;animation-duration:31s}
/* dot field, a few dots lit */
.bg-dots{background-image:radial-gradient(rgba(217,185,141,.22) 1.2px,transparent 1.6px);background-size:20px 20px;mask-image:radial-gradient(110% 90% at 50% 50%,#000 45%,transparent 90%)}
.bg-dots svg{width:100%;height:100%}.bg-dots circle{fill:#D9B98D;opacity:.15;animation:lit 4s ease-in-out infinite}
/* job-board columns with a light travelling down */
.bg-lanes i{position:absolute;top:0;bottom:0;width:1px;background:rgba(217,185,141,.12);overflow:hidden}
.bg-lanes i::after{content:"";position:absolute;left:-1px;width:3px;height:120px;top:-120px;border-radius:2px;background:linear-gradient(transparent,rgba(255,226,186,.75));animation:fall 7s linear infinite;animation-delay:inherit}
/* ripples from a corner */
.bg-waves i{position:absolute;left:-30%;bottom:-60%;width:100%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(217,185,141,.4);animation:ripple 8s ease-out infinite}
.vis.desk::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--mx,70%) var(--my,30%),rgba(217,185,141,.08),transparent 60%);transition:background .2s}
.vis.desk .stack{transform-style:preserve-3d;transform:rotateX(var(--rx,4deg)) rotateY(var(--ry,-6deg));transition:transform .9s var(--spring)}
.vis.desk .s1>*,.vis.desk .s2>*{animation:float 8s ease-in-out infinite}
.vis.desk .s2>*{animation-delay:-3s;animation-duration:9s}
.sweepbox{position:relative;border-radius:16px;overflow:hidden}
.sweepbox::after{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:30%;background:linear-gradient(90deg,transparent,rgba(255,244,222,.28),transparent);transform:translateX(-140%) skewX(-14deg);pointer-events:none}
.js .vis.desk.rv .s1,.js .vis.desk.rv .s2{opacity:0;transition:opacity 1s var(--spring),transform 1.2s var(--spring)}
.js .vis.desk.rv .s1{transform:translate3d(-12px,18px,0) rotate(-2deg)}
.js .vis.desk.rv .s2{transform:translate3d(14px,22px,0) rotate(2deg);transition-delay:.2s}
.js .vis.desk.rv.in .s1,.js .vis.desk.rv.in .s2{opacity:1;transform:none}
.js .vis.desk.rv.in .s2.tilt{transform:rotate(-3deg)}
.js .vis.desk.rv.in .sweepbox::after{animation:sweep 1.7s 1.1s cubic-bezier(.4,0,.2,1) forwards}
.js .vis.desk.rv .chipr{opacity:0;transform:translateY(6px)}
.js .vis.desk.rv.in .chipr{animation:pop .6s 2.1s ease-out forwards}
.chipr svg path{stroke-dasharray:14;stroke-dashoffset:14}
.js .vis.desk.rv.in .chipr svg path{animation:draw .5s 2.7s ease-out forwards}
.vis.desk>.shot,.vis.desk>.ph{position:relative;z-index:1}
.plain{display:grid;place-items:center}
.js .vis.desk.rv>.shot{opacity:0;transform:translateY(30px);transition:opacity 1s var(--spring),transform 1.2s var(--spring)}
.js .vis.desk.rv.in>.shot{opacity:1;transform:none}
@keyframes breathe{from{transform:scale(1)}to{transform:scale(1.03)}}
@keyframes scan{0%{top:-90px}70%,100%{top:100%}}
@keyframes roam{from{transform:translate3d(0,0,0)}to{transform:translate3d(8%,6%,0)}}
@keyframes lit{0%,100%{opacity:.12}50%{opacity:.9}}
@keyframes fall{to{top:110%}}
@keyframes ripple{from{transform:scale(.2);opacity:.9}to{transform:scale(1.6);opacity:0}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes sweep{to{transform:translateX(360%) skewX(-14deg)}}
@keyframes pop{to{opacity:1;transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .vis.desk .bg,.vis.desk .bg *,.vis.desk .bg *::after,.vis.desk .s1>*,.vis.desk .s2>*{animation:none}
  .js .vis.desk.rv .s1,.js .vis.desk.rv .s2,.js .vis.desk.rv .chipr{opacity:1;transform:none;transition:none;animation:none}
  .js .vis.desk.rv.in .sweepbox::after{animation:none}.chipr svg path{stroke-dashoffset:0}
}

/* DigiLocker's own mark (its icon and name, without the emblem beside them), on light grounds only */
.dlmark{display:inline-block;overflow:hidden;height:22px;width:84px;vertical-align:middle}
.dlmark img{height:22px;width:110px;margin-left:-26px;display:block}
.dlbadge{display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:7px 14px 7px 12px;font:400 13px var(--sans);color:#3b3346;box-shadow:0 10px 24px -14px rgba(0,0,0,.6)}

/* Aadhaar */
.idc{width:100%;max-width:380px;border-radius:16px;box-shadow:0 28px 50px -22px rgba(0,0,0,.6);overflow:hidden;font-family:Arial,Helvetica,sans-serif;color:#222}
.aadhaar{background:#fff}
.aadhaar .stripe{height:6px;background:linear-gradient(90deg,#F29D38 0 33%,#fff 33% 66%,#3F9B46 66%)}
.aadhaar .a-top{display:flex;align-items:center;gap:10px;padding:10px 14px 8px;border-bottom:1px solid #eee}
.aadhaar .a-top .a-seal{width:26px;height:26px;border-radius:50%;border:1.5px solid #c9c9c9;flex:none}
.aadhaar .a-top b{display:block;font:700 13px Arial,sans-serif;color:#b11e1e}
.aadhaar .a-top span{font-size:11px;color:#444;font-weight:700}
.aadhaar .a-body{display:grid;grid-template-columns:70px 1fr 62px;gap:12px;align-items:center;padding:12px 14px}
.aadhaar img{width:70px;height:84px;object-fit:cover;border-radius:4px}
.aadhaar dl{margin:0;display:grid;gap:3px;font-size:11.5px}
.aadhaar dt{color:#777;font-size:9.5px}.aadhaar dd{margin:0 0 3px;font-weight:700}
.qr{width:62px;height:62px;display:block}
.aadhaar .a-num{text-align:center;font:700 19px/1 Arial,sans-serif;letter-spacing:.14em;padding:6px 0 8px}
.aadhaar .a-line{height:3px;background:#C8262E;margin:0 14px}
.aadhaar .a-foot{text-align:center;font-size:11.5px;color:#C8262E;font-weight:700;padding:6px 0 9px}

/* PAN */
.pan{background:linear-gradient(118deg,#E8F1F6 0%,#CFE2EE 42%,#DDE7F3 70%,#C9DCEB 100%);position:relative}
.pan .p-top{display:flex;justify-content:space-between;padding:10px 14px 6px;font-weight:700}
.pan .p-top span{display:block;font-size:12px;color:#1a2b4a}.pan .p-top small{display:block;font-size:10px;color:#1a2b4a}
.pan .p-top .r{text-align:right}
.pan .p-body{display:grid;grid-template-columns:66px 1fr 58px;gap:12px;align-items:center;padding:4px 14px 12px}
.pan img{width:66px;height:78px;object-fit:cover;border-radius:4px}
.pan .p-mid{display:grid;gap:3px;font-size:10px;color:#333}
.pan .p-mid .h{font-size:10px;text-align:center;color:#333}
.pan .p-mid .no{font:700 16px Arial,sans-serif;letter-spacing:.1em;text-align:center;color:#111;margin:2px 0 6px}
.pan .p-mid b{font-size:11px;color:#111}
.pan .sig{position:absolute;right:76px;bottom:12px;width:70px;height:22px}

/* GST certificate */
.gstc{width:100%;max-width:400px;background:#FBF8F1;border-radius:6px;box-shadow:0 28px 50px -22px rgba(0,0,0,.6);padding:16px 18px 18px;font-family:Arial,Helvetica,sans-serif;color:#222;position:relative}
.gstc .g-h{text-align:center;border-bottom:1px solid #d9d2c3;padding-bottom:8px;margin-bottom:8px}
.gstc .g-h b{display:block;font-size:12.5px}.gstc .g-h span{font-size:10px;color:#555}
.gstc table{width:100%;border-collapse:collapse;font-size:10.5px}
.gstc td{padding:5px 4px;border-bottom:1px solid #ece6d8;vertical-align:top}.gstc td:first-child{color:#666;width:44%}.gstc td:last-child{font-weight:700}
.gstc .stamp{position:absolute;right:18px;bottom:16px;transform:rotate(-8deg);border:2px solid #2f7a42;color:#2f7a42;border-radius:6px;padding:3px 9px;font:700 12px Arial,sans-serif;letter-spacing:.12em;background:rgba(251,248,241,.8)}

/* DigiLocker consent */
.dl{width:100%;max-width:330px;background:#fff;border-radius:18px;box-shadow:0 28px 50px -22px rgba(0,0,0,.6);padding:14px 16px 16px;font-family:Arial,Helvetica,sans-serif;color:#222;display:grid;gap:10px}
.dl .d-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;border-bottom:1px solid #eee}
.dl .d-brand{display:flex;align-items:center;gap:6px;font:700 15px Arial,sans-serif;color:#5B3FD0}
.dl .d-brand i{width:20px;height:20px;border-radius:6px;background:linear-gradient(140deg,#7B5CF0,#4C35C2);display:block}
.dl .d-ok{width:22px;height:22px;border-radius:50%;background:#3E9B57;color:#fff;display:grid;place-items:center;font-size:12px}
.dl p{margin:0;font-size:11.5px;color:#333}
.dl .d-row{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;padding:6px 0;border-bottom:1px solid #f1f1f1}
.dl .d-row span:first-child{color:#333}.dl .box{width:15px;height:15px;border-radius:3px;background:#3D5AE0;color:#fff;display:grid;place-items:center;font-size:10px}
.dl .d-sub{color:#888;font-size:10.5px}
.dl .d-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.dl .d-btns span{border-radius:7px;padding:8px 0;text-align:center;font-size:12px;font-weight:700}
.dl .deny{border:1px solid #3D5AE0;color:#3D5AE0}.dl .allow{background:#3D5AE0;color:#fff}

/* a phone inbox, for privacy */
.ph{width:min(100%,300px);border-radius:38px;padding:10px;background:#0d0a07;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 34px 60px -24px rgba(0,0,0,.7)}
.ph .scr{border-radius:30px;background:var(--espresso);padding:20px 14px 18px;display:grid;gap:10px;font-family:var(--sans);color:var(--bone)}
.ph .h{display:flex;justify-content:space-between;font:400 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding:0 4px}
.ph .msg{background:var(--umber);border-radius:16px;padding:11px 12px;font-size:13.5px;line-height:1.45;color:var(--soft)}
.ph .msg b{display:flex;align-items:center;gap:6px;font-weight:400;color:var(--bone);font-size:13px;margin-bottom:3px}
.ph .msg b em{font-style:normal;font:400 9px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ok);border:1px solid rgba(159,215,168,.35);border-radius:999px;padding:2px 6px}
.ph .mine{background:rgba(217,185,141,.16);color:var(--bone);justify-self:end;max-width:86%}
.ph .mine small{display:block;font:400 9.5px var(--mono);letter-spacing:.06em;color:var(--dim);margin-top:4px}
.ph .hidden{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--dim);padding:9px 12px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--hair)}
.ph .hidden span:last-child{font:400 11px var(--mono);letter-spacing:.08em;color:var(--sandal)}

/* spa band */
.spa-band{padding:clamp(34px,5vw,60px);border-radius:32px;background:var(--bone);color:var(--espresso)}
.spa-band .k{color:#8a6a3e}.spa-band h2{color:var(--espresso)}
.feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:32px 0 32px;border-top:1px solid rgba(127,110,90,.28)}
.feats div{padding:18px 22px 0 0;font-size:16px;color:#4d4034}
.feats b{display:block;font:400 21px/1.2 var(--display);color:var(--espresso);margin-bottom:6px}
.spa-band .btn.solid{background:var(--espresso);color:var(--bone)}.spa-band .btn.solid i{background:var(--sandal);color:var(--espresso)}

@media (max-width:980px){.fr,.fr.flip{grid-template-columns:1fr}.fr.flip .txt{order:0}.feats{grid-template-columns:1fr 1fr;row-gap:12px}}
@media (max-width:720px){
  .lanes{grid-template-columns:1fr}.seam{display:none}.lane+.lane{margin-top:36px}
  .meet{border-radius:22px;margin-top:24px}
  .vis{min-height:0;padding:28px 14px}.stack{height:330px}.stack>.s1{width:88%}.stack>.s2{width:70%}
  .feats{grid-template-columns:1fr}
  .site nav .hide{display:none}
}
/* The document and screen mock-ups size to their column, padding included, so none is wider than a phone. */
.gstc,.shot,.ph,.msg{box-sizing:border-box;max-width:100%}