/* VastuIQ — Family Room calculator redesign (Oct 2026). Personality: "Ghar", a warm family home seen from above.
   Light sand and white, warm charcoal ink, a terracotta accent and a pastel colour for each family member.
   Loaded before the page's own <style>; rules that must win are prefixed with .frv. */
.frv.frv{--ink:#2B2522;--terra:#C2603F;--terra2:#A84F33;--sand:#FAF6F0;
  --pa:#F6D7C8;--pb:#F3E6C2;--pc:#D5E8DB;--pd:#D7E6F0;--pc-ink:#3A322E;
  /* the page's own tokens, re-pointed to this palette */
  --maroon:#2B2522;--maroon2:#1E1916;--saffron:#C2603F;--gold:#C9A063;--gold-lt:#E7C58E;
  --ivory:#FAF6F0;--cream:#FCFAF7;--cream-d:#F1EBE3;--dark:#211C19;--mid:#5C524C;--light:#8C817A;
  --border:#E6DDD3;--border-l:#EFE8E0;--sh:rgba(60,40,25,.09);
  --b-strong:#4E8B67;--b-good:#3F8188;--b-attention:#B98B44;--b-priority:#B8603F;}

/* ── hero ── */
.frv .frv-hero.fr-hero{position:relative;overflow:hidden;color:var(--ink);padding:54px 0 104px;
  background:radial-gradient(circle at 80% 40%,rgba(246,215,200,.65),transparent 42%),
             radial-gradient(circle at 62% 85%,rgba(213,232,219,.6),transparent 40%),
             linear-gradient(170deg,#FFFEFB,#FAF5EE 65%,#F5EEE6);}
.frv .fr-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(194,96,63,.35),transparent);}
.frv .fr-hero .frv-hero-in{grid-template-columns:1.05fr .95fr;gap:36px;}
.frv .fr-hero .frv-kicker{background:#fff;border-color:rgba(194,96,63,.3);color:var(--terra2);font-weight:500;box-shadow:0 2px 10px rgba(60,40,25,.05);}
.frv .fr-hero h1{color:var(--ink);font-weight:600;letter-spacing:-.01em;}
.frv .fr-hero h1 em{color:var(--terra);font-style:italic;}
.frv .fr-hero p{color:var(--mid);}
.frv .fr-hero .frv-trust{color:#6E625B;}
.frv .fr-hero .frv-trust > span::before{color:var(--terra);}
.fr-ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:22px;}
.fr-cta{display:inline-flex;align-items:center;gap:.5rem;background:var(--terra);color:#fff!important;font-weight:700;text-decoration:none;padding:.9rem 1.5rem;border-radius:999px;box-shadow:0 10px 26px rgba(194,96,63,.28);transition:transform .15s,background .15s;}
.fr-cta:hover{transform:translateY(-2px);background:var(--terra2);}
.fr-cta-2{color:var(--ink)!important;font-weight:600;border-bottom:1px solid rgba(43,37,34,.3);text-decoration:none;}
.fr-art{display:flex;justify-content:center;}
.fr-svg{width:min(100%,420px);height:auto;filter:drop-shadow(0 22px 36px rgba(90,60,40,.13));}
.fr-shell{fill:#fff;stroke:#E2D7CC;stroke-width:2;}
.fr-room{fill:#F7F2EB;stroke:#EDE4DA;stroke-width:1.5;}
.fr-c{fill:#FFFDF9;stroke-dasharray:4 4;}
.fr-z{font:600 10.5px 'DM Sans',sans-serif;fill:#A1958C;letter-spacing:.06em;}
.fr-north path{fill:var(--terra);} .fr-north text{font:700 11px 'DM Sans',sans-serif;fill:var(--terra);text-anchor:middle;}
.fr-door{fill:#E7C58E;}
.fr-cdot{fill:none;stroke:#E2D7CC;stroke-width:1.5;stroke-dasharray:3 4;}
.fr-p .h{stroke:#fff;stroke-width:2;} .fr-p .b{stroke:#fff;stroke-width:2;}
.fr-ka .h,.fr-ka .b{fill:#C2603F;} .fr-kb .h,.fr-kb .b{fill:#B98B44;}
.fr-kc .h,.fr-kc .b{fill:#4E8B67;} .fr-kd .h,.fr-kd .b{fill:#4A7FA0;}
.fr-lbl{font:600 10.5px 'DM Sans',sans-serif;fill:var(--pc-ink);text-anchor:middle;}
/* the family walks in from the front door and settles; each room warms to that person's pastel */
.fr-p{animation:frWalk 9s cubic-bezier(.55,0,.25,1) infinite both;}
.fr-p2{animation-delay:.45s;} .fr-p3{animation-delay:.9s;} .fr-p4{animation-delay:1.35s;}
@keyframes frWalk{0%{transform:translate(var(--dx),var(--dy));opacity:0}6%{opacity:1;transform:translate(var(--dx),var(--dy))}24%,84%{transform:translate(0,0);opacity:1}94%,100%{transform:translate(0,0);opacity:0}}
.fr-sw{animation:frWarmA 9s infinite both;} .fr-s{animation:frWarmB 9s .45s infinite both;}
.fr-w{animation:frWarmC 9s .9s infinite both;} .fr-nw{animation:frWarmD 9s 1.35s infinite both;}
@keyframes frWarmA{0%,20%{fill:#F7F2EB}26%,86%{fill:var(--pa)}96%,100%{fill:#F7F2EB}}
@keyframes frWarmB{0%,20%{fill:#F7F2EB}26%,86%{fill:var(--pb)}96%,100%{fill:#F7F2EB}}
@keyframes frWarmC{0%,20%{fill:#F7F2EB}26%,86%{fill:var(--pc)}96%,100%{fill:#F7F2EB}}
@keyframes frWarmD{0%,20%{fill:#F7F2EB}26%,86%{fill:var(--pd)}96%,100%{fill:#F7F2EB}}
@media (prefers-reduced-motion:reduce){
  .fr-p{animation:none;} .fr-sw,.fr-s,.fr-w,.fr-nw{animation:none;}
  .fr-sw{fill:var(--pa);} .fr-s{fill:var(--pb);} .fr-w{fill:var(--pc);} .fr-nw{fill:var(--pd);}
}

/* ── steps as pills ── */
.frv .frv-progress.fr-steps{gap:6px;margin-bottom:20px;}
.frv .fr-steps i{height:auto;display:flex;align-items:center;justify-content:center;gap:.45rem;padding:.5rem .7rem;border-radius:999px;background:#F3EEE8;color:#8C817A;font-style:normal;}
.frv .fr-steps i b{flex:0 0 22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;background:#fff;}
.frv .fr-steps i span{font-size:12.5px;font-weight:600;white-space:nowrap;}
.frv .fr-steps i.done{background:#FBEDE5;color:var(--terra2);} .frv .fr-steps i.done b{background:var(--terra);color:#fff;}
.frv .fr-steps i.now{background:var(--ink);color:#fff;} .frv .fr-steps i.now b{background:#F6D7C8;color:var(--ink);}

/* ── the rest of the page in this palette ── */
.frv .frv-btn{border-radius:999px;}
.frv .frv-btn:hover{background:var(--terra2);}
.frv .frv-btn.ghost:hover{background:#FBF4EF;}
.frv .frv-zones{border-width:2px;border-radius:18px;background:#FBF8F4;}
.frv .frv-zone{border-radius:12px;}
.frv .frv-zone.has{background:#FBEDE5;}
.frv .frv-pgrid{border-width:2px;border-radius:18px;background:#FBF8F4;}
.frv .frv-pcell .nm{background:#FBEDE5;}
.frv .frv-chip{border-radius:999px;}
.frv .frv-fix{background:#FBF6EE;border-color:#EEDCC4;}
.frv-faq.fr-faq-cut details.fr-more{display:none;}
.fr-faq-btn{margin-top:8px;background:none;border:1.5px solid var(--border);border-radius:999px;padding:.55rem 1.1rem;font-weight:600;color:var(--ink);}

@media (max-width:820px){
  .frv .frv-hero.fr-hero{padding:30px 0 96px;}
  .frv .fr-hero .frv-hero-in{grid-template-columns:1fr;gap:6px;}
  .fr-art{order:-1;}
  .fr-svg{width:min(70vw,290px);}
  .frv .fr-hero .frv-trust{display:none;}
  .frv .fr-steps i span{display:none;}
  .frv .fr-steps i.now span{display:inline;}
}
