/* VastuIQ — Compare Properties redesign (Oct 2026). Personality: "Tula", the balance.
   Light and crisp: warm off-white, slate ink, Property A in teal and Property B in indigo.
   html:root beats the page's own :root, which is printed later; only the page's tokens are re-pointed
   (the shared header uses its own --mn / --sf / --cr tokens, which stay as they are). */
html:root{
  --maroon:#1F2A37;--maroon2:#334155;--maroon3:#111827;
  --gold:#C29A5B;--gold2:#E3BE7A;--gold-lt:#F6EEDC;
  --saffron:#2A8C86;--saffron2:#3AA59E;
  --cream:#F8F7F4;--cream2:#EEF1F2;--cream3:#DFE5E8;
  --ink:#17202B;--ink2:#334155;--ink3:#64748B;
  --green:#3E8A64;--green-lt:#E7F4EC;--red:#B4533F;--red-lt:#FBEDE9;
  --blue:#5A5BC4;--blue-lt:#ECEBFB;
  --shadow:0 2px 16px rgba(23,32,43,.06);--shadow-md:0 6px 30px rgba(23,32,43,.10);--shadow-lg:0 12px 50px rgba(23,32,43,.14);
  --ta:#2A8C86;--tb:#5A5BC4;--ta-lt:#DDF0EE;--tb-lt:#E6E6FA;
}

/* ── hero ── */
.hero.cb-hero{text-align:left;padding:3.4rem 1.5rem 3.2rem;color:var(--ink);
  background:radial-gradient(circle at 70% 38%,rgba(42,140,134,.13),transparent 34%),
             radial-gradient(circle at 92% 50%,rgba(90,91,196,.12),transparent 30%),
             linear-gradient(170deg,#FFFFFF,#F6F7F5 70%,#F1F3F2);border-bottom:1px solid var(--cream3);}
.hero.cb-hero::before{display:none;}
.cb-hero-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;position:relative;}
.cb-hero .hero-badge{background:#fff;border:1px solid var(--cream3);color:var(--ta);box-shadow:0 2px 10px rgba(23,32,43,.05);margin-bottom:1rem;}
.hero.cb-hero h1{color:var(--ink);font-size:clamp(2.2rem,4.6vw,3.2rem);font-weight:600;letter-spacing:-.01em;}
.hero.cb-hero h1 em{color:var(--ta);}
.hero.cb-hero p{color:var(--ink3);margin:0 0 1.3rem;max-width:560px;}
.cb-hero .hero-pills{justify-content:flex-start;}
.cb-hero .hero-pills span{background:#fff;border:1px solid var(--cream3);color:var(--ink2);display:inline-block!important;}
body.hindi .cb-hero .hero-pills span.en,body:not(.hindi) .cb-hero .hero-pills span.hi{display:none!important;}
.cb-hero .hero-steps{justify-content:flex-start;margin-top:.4rem;flex-wrap:wrap;}
.cb-hero .hs{padding:.4rem .7rem .4rem 0;display:flex;align-items:center;gap:.45rem;text-align:left;}
.cb-hero .hs-num{background:var(--ta-lt);border-color:transparent;color:var(--ta);margin:0;flex:0 0 26px;width:26px;height:26px;}
.hero.cb-hero .hs-txt{color:var(--ink2);font-size:.74rem;line-height:1.25;}
.cb-hero .hs-arr{color:var(--cream3);margin:0 .2rem 0 0;}
.cb-ctas{margin-top:1.3rem;}
.cb-cta{display:inline-flex;align-items:center;gap:.5rem;background:var(--ink);color:#fff!important;font-weight:700;padding:.9rem 1.6rem;border-radius:999px;box-shadow:0 10px 26px rgba(23,32,43,.2);transition:transform .15s;}
.cb-cta:hover{transform:translateY(-2px);}
.cb-cta span.en,.cb-cta span.hi{display:inline!important;}
body.hindi .cb-cta span.en,body:not(.hindi) .cb-cta span.hi{display:none!important;}
.cb-art{display:flex;justify-content:center;}
.cb-svg{width:min(100%,430px);height:auto;filter:drop-shadow(0 20px 30px rgba(23,32,43,.10));}
.cb-post{stroke:#9AA7B2;stroke-width:5;stroke-linecap:round;}
.cb-base{fill:#C7D0D6;}
.cb-pivot{fill:var(--ink);}
.cb-beam rect{fill:var(--ink);}
.cb-str{stroke:#A9B5BF;stroke-width:1.3;fill:none;}
.cb-pan{fill:#E4E9EC;stroke:#C7D0D6;stroke-width:1.2;}
.cb-a .cb-roof{fill:var(--ta);} .cb-b .cb-roof{fill:var(--tb);}
.cb-a .cb-wall{fill:var(--ta-lt);} .cb-b .cb-wall{fill:var(--tb-lt);}
.cb-wall{stroke:#fff;stroke-width:2;}
.cb-win{fill:#fff;opacity:.9;}
.cb-a .cb-dr{fill:#1F6E69;} .cb-b .cb-dr{fill:#4243A3;}
.cb-tag{fill:#fff;stroke-width:2;} .cb-a .cb-tag{stroke:var(--ta);} .cb-b .cb-tag{stroke:var(--tb);}
.cb-l{font:700 12px 'DM Sans',sans-serif;text-anchor:middle;} .cb-a .cb-l{fill:var(--ta);} .cb-b .cb-l{fill:var(--tb);}
.cb-track{fill:#E7ECEF;}
.cb-a .cb-fill{fill:var(--ta);} .cb-b .cb-fill{fill:var(--tb);}
.cb-win-tag rect{fill:var(--ta);} .cb-win-tag text{font:700 11.5px 'DM Sans',sans-serif;fill:#fff;text-anchor:middle;}
/* the balance: level, tips to A, tips to B, then settles on A ("Better fit" appears); bars fill as it weighs */
.cb-beam{transform-box:view-box;transform-origin:220px 70px;animation:cbBeam 9s cubic-bezier(.5,0,.3,1) infinite;}
.cb-a{animation:cbA 9s cubic-bezier(.5,0,.3,1) infinite;} .cb-b{animation:cbB 9s cubic-bezier(.5,0,.3,1) infinite;}
@keyframes cbBeam{0%,8%{transform:rotate(0)}20%,28%{transform:rotate(-5deg)}40%,48%{transform:rotate(4deg)}64%,92%{transform:rotate(-5deg)}100%{transform:rotate(0)}}
@keyframes cbA{0%,8%{transform:translateY(0)}20%,28%{transform:translateY(11px)}40%,48%{transform:translateY(-9px)}64%,92%{transform:translateY(11px)}100%{transform:translateY(0)}}
@keyframes cbB{0%,8%{transform:translateY(0)}20%,28%{transform:translateY(-11px)}40%,48%{transform:translateY(9px)}64%,92%{transform:translateY(-11px)}100%{transform:translateY(0)}}
.cb-fill{transform-box:fill-box;transform-origin:0 50%;animation:cbFill 9s ease-out infinite;}
.cb-f1{animation-delay:.25s;} .cb-f2{animation-delay:.5s;}
@keyframes cbFill{0%,6%{transform:scaleX(0)}30%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.cb-win-tag{opacity:0;animation:cbTag 9s ease infinite;}
@keyframes cbTag{0%,64%{opacity:0;transform:translateY(6px)}70%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .cb-beam,.cb-a,.cb-b,.cb-fill,.cb-win-tag{animation:none;}
  .cb-beam{transform:rotate(-5deg);} .cb-a{transform:translateY(11px);} .cb-b{transform:translateY(-11px);} .cb-win-tag{opacity:1;}
}

/* the page's old rule ".logo span" reaches the shared header logo: keep the brand orange there */
header .logo span,header .logo-s{color:#D4601A!important;}

/* ── the rest of the page: softer corners, pill buttons ── */
.trust-bar{background:#fff!important;border-bottom-color:var(--cream3)!important;}
.trust-item{color:var(--ink3)!important;border-right-color:var(--cream3)!important;}
.prop-card.prop-a{border-top-color:var(--ta)!important;}
.prop-card.prop-b{border-top-color:var(--tb)!important;}
.prop-a .prop-badge{background:var(--ta-lt)!important;color:var(--ta)!important;}
.prop-b .prop-badge{background:var(--tb-lt)!important;color:var(--tb)!important;}
.compare-btn{background:var(--ink)!important;}
.goal-pill.active{background:var(--ink)!important;border-color:var(--ink)!important;}

@media (max-width:860px){
  .hero.cb-hero{padding:1.8rem 1rem 2.2rem;}
  .cb-hero-grid{grid-template-columns:1fr;gap:6px;}
  .cb-art{order:-1;}
  .cb-svg{width:min(78vw,320px);}
  .cb-hero .hero-steps{display:none;}
}