/* VastuIQ — /vastu-on-whatsapp/ page styles (Oct 2026). Uses the site tokens from includes/header.php. */
.vow{--wa:#25D366;--wa2:#128C7E;--wad:#075E54;--bub:#fff;--bubu:#D9FDD3;--chat:#EFE7DD;overflow-x:clip;}
.vow-wrap{max-width:1160px;margin:0 auto;padding:0 20px;}
.vow-narrow{max-width:820px;}
.vow-sec{padding:72px 0;}
.vow-h2{font-family:'Cormorant Garamond',serif;font-size:clamp(1.9rem,4.2vw,2.7rem);line-height:1.12;color:var(--mn);text-align:center;margin-bottom:.6rem;}
.vow-sub{text-align:center;color:var(--tm);max-width:640px;margin:0 auto 2rem;font-size:1.03rem;line-height:1.6;}
.vow-left{text-align:left;margin-left:0;}
.vow-note{font-size:.84rem;color:var(--tl);margin-top:1rem;}
.vow-note a,.vow-policy a{color:var(--sf);text-decoration:underline;}

/* buttons */
.vow-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;font-weight:600;font-size:1.02rem;border-radius:14px;padding:.95rem 1.4rem;transition:transform .15s,box-shadow .2s,background .2s;cursor:pointer;border:0;text-align:center;line-height:1.25;}
.vow-btn svg{width:24px;height:24px;flex:none;}
.vow-btn-wa{background:var(--wa);color:#05331A;box-shadow:0 10px 26px rgba(37,211,102,.35);}
.vow-btn-wa:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(37,211,102,.45);}
.vow-btn-ghost{background:#fff;color:var(--mn);border:1.5px solid rgba(107,26,26,.22);}
.vow-btn-ghost:hover{border-color:var(--mn);}
.vow-btn-sm{font-size:.94rem;padding:.75rem 1.1rem;border-radius:12px;}
.vow-link{background:none;border:0;padding:0;font:inherit;color:var(--sf);text-decoration:underline;cursor:pointer;}
.vow-btn:focus-visible,.vow-tab:focus-visible,.vow-ask:focus-visible,.vow-link:focus-visible{outline:3px solid var(--gd2);outline-offset:3px;}

/* hero */
.vow-hero{background:radial-gradient(1200px 520px at 85% 10%,rgba(37,211,102,.12),transparent 60%),radial-gradient(900px 500px at 0% 100%,rgba(200,150,10,.10),transparent 60%),var(--cr);padding:56px 0 64px;}
.vow-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;}
.vow-eyebrow{display:inline-flex;align-items:center;gap:.5rem;background:#fff;border:1px solid rgba(37,211,102,.35);color:var(--wad);font-weight:600;font-size:.86rem;padding:.4rem .8rem;border-radius:99px;margin-bottom:1.1rem;}
.vow-live{width:8px;height:8px;border-radius:50%;background:var(--wa);box-shadow:0 0 0 0 rgba(37,211,102,.6);animation:vowPulse 2s infinite;}
@keyframes vowPulse{70%{box-shadow:0 0 0 8px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.vow h1{font-family:'Cormorant Garamond',serif;font-size:clamp(2.4rem,5.6vw,3.9rem);line-height:1.04;color:var(--mn);margin-bottom:1rem;letter-spacing:-.01em;}
.vow h1 em{font-style:italic;color:var(--sf);}
.vow-lead{font-size:1.12rem;line-height:1.65;color:var(--tm);max-width:560px;margin-bottom:1.6rem;}
.vow-lead b{color:var(--td);white-space:nowrap;}
.vow-cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.3rem;}
.vow-chips{display:flex;flex-wrap:wrap;gap:.5rem .9rem;list-style:none;padding:0;font-size:.9rem;color:var(--tm);}
.vow-desk-hint{margin-top:1rem;font-size:.9rem;color:var(--tl);}
.vow-hero-phone{position:relative;display:flex;justify-content:center;}
.vow-float{position:absolute;background:#fff;border-radius:16px;box-shadow:0 14px 40px rgba(74,16,16,.18);padding:.7rem 1rem;font-size:.9rem;color:var(--td);animation:vowBob 5s ease-in-out infinite;}
.vow-float-1{left:-8px;top:58%;display:grid;grid-template-columns:auto auto;align-items:baseline;column-gap:.15rem;}
.vow-float-1 b{font-family:'Cormorant Garamond',serif;font-size:2rem;color:#1F7A3D;line-height:1;}
.vow-float-1 small{grid-column:1/3;color:var(--tl);font-size:.78rem;}
.vow-float-2{right:0;bottom:16%;font-weight:600;animation-delay:-2.5s;}
@keyframes vowBob{50%{transform:translateY(-8px)}}

/* phone */
.vow-phone{width:min(360px,100%);background:#111;border-radius:42px;padding:10px;box-shadow:0 30px 70px rgba(30,18,6,.28),inset 0 0 0 2px #333;}
.vow-ph-top{display:flex;align-items:center;gap:.6rem;background:var(--wad);color:#fff;border-radius:32px 32px 0 0;padding:.9rem 1rem .75rem;}
.vow-ph-top b{display:block;font-size:.98rem;}
.vow-ph-top small{display:block;font-size:.74rem;opacity:.85;min-height:1em;}
.vow-ph-av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--mn),var(--sf));display:grid;place-items:center;font-family:'Cormorant Garamond',serif;font-weight:700;font-size:1.2rem;flex:none;}
.vow-ph-ctrl{margin-left:auto;display:flex;gap:.3rem;}
.vow-ph-ctrl button{width:32px;height:32px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;font-size:.85rem;}
.vow-ph-ctrl button:hover{background:rgba(255,255,255,.26);}
.vow-ph-chat{background:var(--chat);background-image:radial-gradient(rgba(107,26,26,.05) 1px,transparent 1px);background-size:18px 18px;height:520px;overflow-y:auto;padding:.9rem .7rem 1.2rem;display:flex;flex-direction:column;gap:.45rem;scroll-behavior:smooth;overscroll-behavior:contain;}
.vow-ph-static{height:auto;max-height:560px;border-radius:0 0 32px 32px;}
.vow-phone-hero .vm-img img{max-height:250px;object-fit:cover;object-position:top;}
.vow-ph-bar{display:flex;align-items:center;gap:.5rem;background:#F0F0F0;border-radius:0 0 32px 32px;padding:.6rem .8rem .8rem;}
.vow-ph-bar span{flex:1;background:#fff;border-radius:20px;padding:.5rem .9rem;color:#999;font-size:.85rem;}
.vow-ph-bar i{width:36px;height:36px;border-radius:50%;background:var(--wa2);flex:none;}

/* messages */
.vm{max-width:86%;padding:.5rem .65rem .55rem;border-radius:10px;font-size:.86rem;line-height:1.42;color:#111B21;box-shadow:0 1px .5px rgba(0,0,0,.13);white-space:pre-line;word-wrap:break-word;animation:vmIn .28s ease-out both;}
@keyframes vmIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.vm-b{background:var(--bub);align-self:flex-start;border-top-left-radius:2px;}
.vm-u{background:var(--bubu);align-self:flex-end;border-top-right-radius:2px;}
.vm b{font-weight:700;}
.vm-img{background:#fff;padding:4px;align-self:flex-start;max-width:72%;}
.vm-img img,.vm-img svg{display:block;width:100%;height:auto;border-radius:7px;}
.vm-img .vm-cap{padding:.35rem .3rem .1rem;font-size:.8rem;white-space:normal;}
.vm-u.vm-img{align-self:flex-end;background:var(--bubu);}
.vm-btns{display:flex;flex-direction:column;gap:2px;margin:.5rem -.65rem -.55rem;border-top:1px solid #E9EDEF;}
.vm-btns>span,.vm-btns>button{display:block;width:100%;background:none;border:0;border-top:1px solid #E9EDEF;padding:.5rem;color:#027EB5;font:500 .86rem 'DM Sans',sans-serif;text-align:center;cursor:default;}
.vm-btns>:first-child{border-top:0;}
.vm-list{margin:.5rem -.65rem -.55rem;border-top:1px solid #E9EDEF;}
.vm-list-h{display:block;text-align:center;color:#027EB5;font-weight:500;padding:.45rem;font-size:.86rem;}
.vm-opts{display:flex;flex-wrap:wrap;gap:.3rem;padding:.2rem .5rem .55rem;}
.vm-opts button,.vm-btns button{cursor:pointer;}
.vm-opts button{background:#F5F6F6;border:1px solid #E1E5E7;border-radius:16px;padding:.32rem .65rem;font:500 .8rem 'DM Sans',sans-serif;color:#2F3B43;}
.vm-opts button[disabled],.vm-btns button[disabled]{opacity:.45;cursor:default;}
.vm .pick{position:relative;background:#E8FBEF;border-color:var(--wa);color:var(--wad);opacity:1!important;animation:vmGlow 1.4s ease-in-out infinite;}
.vm-btns .pick{background:#E8FBEF;}
@keyframes vmGlow{50%{box-shadow:0 0 0 4px rgba(37,211,102,.25)}}
.vm-sep{align-self:center;background:#FFF5C4;color:#54656F;font-size:.74rem;padding:.25rem .7rem;border-radius:8px;box-shadow:0 1px .5px rgba(0,0,0,.1);animation:vmIn .3s both;}
.vm-typing{align-self:flex-start;background:#fff;border-radius:10px;padding:.55rem .75rem;display:flex;gap:4px;box-shadow:0 1px .5px rgba(0,0,0,.13);}
.vm-typing i{width:7px;height:7px;border-radius:50%;background:#8696A0;animation:vmDot 1.2s infinite;}
.vm-typing i:nth-child(2){animation-delay:.15s}.vm-typing i:nth-child(3){animation-delay:.3s}
@keyframes vmDot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}

/* demo layout */
.vow-demo-sec{background:linear-gradient(180deg,#fff,var(--cr));}
.vow-tabs{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-bottom:2rem;}
.vow-tab{display:inline-flex;align-items:center;gap:.45rem;background:#fff;border:1.5px solid rgba(107,26,26,.15);border-radius:99px;padding:.6rem 1rem;font:600 .92rem 'DM Sans',sans-serif;color:var(--tm);cursor:pointer;transition:.2s;}
.vow-tab .ic{font-size:1.1rem;font-style:normal;}
.vow-tab:hover{border-color:var(--sf);}
.vow-tab.on{background:var(--mn);color:#fff;border-color:var(--mn);box-shadow:0 8px 20px rgba(107,26,26,.25);}
.vow-demo-grid{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:start;justify-content:center;}
.vow-panel{position:sticky;top:96px;max-width:480px;}
.vow-tool{display:none;background:#fff;border:1px solid rgba(107,26,26,.12);border-radius:var(--rl);padding:1.6rem;box-shadow:0 18px 50px rgba(74,16,16,.08);}
.vow-tool.on{display:block;animation:vmIn .3s both;}
.vow-tool-name{font-family:'Cormorant Garamond',serif;font-size:1.9rem;color:var(--mn);font-weight:700;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem;}
.vow-tool-name .ic{font-style:normal;}
.vow-tool-name em{font:500 .8rem 'DM Sans',sans-serif;font-style:normal;background:var(--iv);color:var(--tm);padding:.25rem .6rem;border-radius:99px;}
.vow-tool dl{display:grid;gap:.25rem;margin-bottom:1.3rem;}
.vow-tool dt{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tl);font-weight:600;margin-top:.6rem;}
.vow-tool dd{font-size:.98rem;line-height:1.55;color:var(--td);}

/* steps */
.vow-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;list-style:none;padding:0;margin-top:2rem;counter-reset:none;}
.vow-steps li{background:#fff;border-radius:var(--rl);padding:1.6rem;border:1px solid rgba(107,26,26,.1);position:relative;}
.vow-step-n{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--wa);color:#05331A;font-weight:700;font-size:1.1rem;margin-bottom:.9rem;}
.vow-steps h3{font-size:1.15rem;color:var(--mn);margin-bottom:.35rem;}
.vow-steps p{color:var(--tm);line-height:1.6;font-size:.96rem;}

/* score card */
.vow-card-sec{background:var(--iv);}
.vow-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.vow-card-stack{position:relative;height:460px;}
.vow-card-stack img{position:absolute;width:300px;height:auto;border-radius:14px;box-shadow:0 20px 50px rgba(74,16,16,.22);left:50%;top:10px;transition:transform .5s;}
.vow-card-stack img:nth-child(1){transform:translateX(-95%) rotate(-9deg) scale(.88);}
.vow-card-stack img:nth-child(2){transform:translateX(-5%) rotate(8deg) scale(.88);}
.vow-card-stack img:nth-child(3){transform:translateX(-50%);z-index:2;}
.vow-card-stack:hover img:nth-child(1){transform:translateX(-110%) rotate(-12deg) scale(.88);}
.vow-card-stack:hover img:nth-child(2){transform:translateX(10%) rotate(11deg) scale(.88);}
.vow-ticks{list-style:none;padding:0;display:grid;gap:.7rem;margin-top:1.2rem;}
.vow-ticks li{padding-left:2rem;position:relative;line-height:1.55;color:var(--tm);}
.vow-ticks li::before{content:'✓';position:absolute;left:0;top:0;width:1.4rem;height:1.4rem;border-radius:50%;background:var(--wa);color:#05331A;display:grid;place-items:center;font-size:.8rem;font-weight:700;}
.vow-card-sec .vow-h2{text-align:left;}

/* DishaAI asks */
.vow-asks{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;max-width:900px;margin:0 auto;}
.vow-ask{display:inline-flex;align-items:center;gap:.5rem;background:#fff;border:1.5px solid rgba(37,211,102,.4);border-radius:99px;padding:.7rem 1.1rem;font-weight:500;color:var(--td);transition:.2s;}
.vow-ask .ic{color:var(--wa2);font-weight:700;font-style:normal;}
.vow-ask:hover{background:#E8FBEF;transform:translateY(-2px);}

/* compare */
.vow-compare{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:2rem;}
.vow-cmp{background:#fff;border-radius:var(--rl);padding:1.8rem;border:1px solid rgba(107,26,26,.12);}
.vow-cmp-wa{border:2px solid var(--wa);box-shadow:0 18px 40px rgba(37,211,102,.14);}
.vow-cmp h3{font-size:1.25rem;color:var(--mn);margin-bottom:.8rem;}
.vow-cmp ul{list-style:none;padding:0;display:grid;gap:.55rem;margin-bottom:1.3rem;}
.vow-cmp li{padding-left:1.5rem;position:relative;color:var(--tm);line-height:1.5;}
.vow-cmp li::before{content:'•';position:absolute;left:.3rem;color:var(--sf);font-weight:700;}

/* safety */
.vow-safe-sec{background:#fff;}
.vow-safe{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:2rem;}
.vow-safe>div{background:var(--cr);border-radius:var(--rl);padding:1.4rem;border:1px solid rgba(107,26,26,.08);}
.vow-safe .ic{font-size:1.7rem;display:block;margin-bottom:.5rem;font-style:normal;}
.vow-safe h3{font-size:1.02rem;color:var(--mn);margin-bottom:.35rem;}
.vow-safe p{font-size:.92rem;line-height:1.55;color:var(--tm);}
.vow-policy{text-align:center;font-size:.88rem;color:var(--tl);margin-top:1.6rem;}

/* reviews */
.vow-revs{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-top:1.6rem;}
.vow-rev{background:#fff;border-radius:var(--rl);padding:1.3rem;border:1px solid rgba(107,26,26,.1);}
.vow-rev .st{color:#E8A317;letter-spacing:2px;}
.vow-rev p{margin:.5rem 0 .8rem;line-height:1.55;color:var(--td);font-size:.95rem;}
.vow-rev small{color:var(--tl);font-size:.82rem;}
.vow-rev .vf{display:inline-block;margin-left:.4rem;color:#1F7A3D;font-weight:600;}

/* faq */
.vow-faq{background:#fff;border:1px solid rgba(107,26,26,.12);border-radius:14px;margin-bottom:.7rem;overflow:hidden;}
.vow-faq summary{cursor:pointer;list-style:none;padding:1.05rem 3rem 1.05rem 1.2rem;font-weight:600;color:var(--mn);position:relative;}
.vow-faq summary::-webkit-details-marker{display:none;}
.vow-faq summary::after{content:'+';position:absolute;right:1.2rem;top:50%;transform:translateY(-50%);font-size:1.4rem;color:var(--sf);transition:transform .2s;}
.vow-faq[open] summary::after{transform:translateY(-50%) rotate(45deg);}
.vow-faq p{padding:0 1.2rem 1.1rem;line-height:1.65;color:var(--tm);}

/* final */
.vow-final{background:linear-gradient(135deg,#4A1010,#6B1A1A 60%,#7d2a14);color:#fff;padding:64px 0;}
.vow-final-grid{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;}
.vow-final h2{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,4.4vw,2.9rem);line-height:1.1;margin-bottom:.6rem;}
.vow-final p{color:rgba(255,255,255,.82);margin-bottom:1.3rem;font-size:1.05rem;}
.vow-num{font-weight:700;letter-spacing:.02em;margin-top:.9rem;}
.vow-final .vow-num{color:var(--gd2);}
.vow-qr{background:#fff;border-radius:18px;padding:14px 14px 10px;text-align:center;color:var(--tm);font-size:.82rem;}
.vow-qr img{display:block;margin:0 auto .3rem;}

/* sticky bar, dialog */
.vow-sticky{display:none;}
.vow-dlg{border:0;border-radius:22px;padding:2rem 2rem 1.6rem;max-width:380px;width:calc(100% - 32px);text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.35);}
.vow-dlg::backdrop{background:rgba(30,18,6,.55);backdrop-filter:blur(3px);}
.vow-dlg h2{font-family:'Cormorant Garamond',serif;color:var(--mn);font-size:1.8rem;margin-bottom:.4rem;}
.vow-dlg p{color:var(--tm);font-size:.95rem;line-height:1.5;}
.vow-dlg img{margin:1rem auto .4rem;display:block;}
.vow-dlg .vow-num{color:var(--td);}
.vow-dlg-alt a{color:var(--sf);text-decoration:underline;font-size:.9rem;}
.vow-dlg-x{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:0;background:var(--iv);cursor:pointer;font-size:.9rem;}

/* responsive */
@media(max-width:980px){
  .vow-hero-grid,.vow-card-grid{grid-template-columns:1fr;gap:36px;}
  .vow-hero-phone{order:2;}
  .vow-demo-grid{grid-template-columns:1fr;justify-items:center;gap:28px;}
  .vow-panel{position:static;max-width:560px;width:100%;}
  .vow-safe{grid-template-columns:1fr 1fr;}
  .vow-card-sec .vow-h2,.vow-card-sec .vow-sub{text-align:center;margin-left:auto;}
  .vow-card-stack{height:420px;}
}
@media(max-width:700px){
  .vow-sec{padding:52px 0;}
  .vow-hero{padding:32px 0 44px;}
  .vow-steps,.vow-compare,.vow-safe{grid-template-columns:1fr;}
  .vow-final-grid{grid-template-columns:1fr;text-align:center;}
  .vow-qr{display:none;}
  .vow-tabs{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:0 2px 6px;margin:0 -20px 1.6rem;padding-left:20px;scrollbar-width:none;}
  .vow-tabs::-webkit-scrollbar{display:none;}
  .vow-tab{flex:none;}
  .vow-ph-chat{height:470px;}
  .vow-float{display:none;}
  .vow-card-stack{height:360px;}
  .vow-card-stack img{width:220px;}
  .vow-card-stack img:nth-child(1){transform:translateX(-82%) rotate(-8deg) scale(.82);}
  .vow-card-stack img:nth-child(2){transform:translateX(-18%) rotate(8deg) scale(.82);}
  .vow-desk-hint{display:none;}
  .vow-btn{width:100%;}
  .vow-cta-row .vow-btn-ghost{width:100%;}
  .vow-sticky{display:block;position:fixed;left:0;right:0;bottom:0;z-index:90;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(250,246,238,.96);backdrop-filter:blur(8px);border-top:1px solid rgba(107,26,26,.1);transform:translateY(110%);transition:transform .3s;}
  .vow-sticky.show{transform:none;}
  .vow-sticky .vow-btn{padding:.85rem;}
  body{padding-bottom:0;}
}
@media(prefers-reduced-motion:reduce){
  .vow *,.vow *::before,.vow *::after{animation:none!important;transition:none!important;}
}
