/* Find your Bangalore area — scoped to .t-area (on <main>) and .t-area~.mobile-action */
.t-area{--a-navy:#102b46;--a-navy2:#0a1f33;--a-lime:#8fdc68;--a-mute:#c9d6e2}
.t-area .btn.wa,.t-area~.mobile-action .btn.wa{background:#25d366;border-color:#128c3e;color:#0b3b22}
.t-area .btn.wa:hover{background:#1ebe5b}

/* hero: short, tool right under it */
.t-area .fa-hero{padding:34px 0 26px;border-bottom:1px solid var(--line)}
.t-area .fa-hero .crumb{margin-bottom:18px}
.t-area .fa-hero h1{font-size:clamp(2.4rem,4.4vw,4rem);line-height:1.05;max-width:900px;color:var(--a-navy)}
.t-area .fa-sub{margin-top:12px;font-size:1.1rem;color:var(--muted)}

/* layout */
.t-area .fa-tool{padding:34px 0 48px}
.t-area .fa-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:36px;align-items:start}
.t-area .fa-card{background:var(--paper);border:1px solid var(--line);padding:4px 30px 10px;margin:0}
.t-area .fa-side{position:sticky;top:124px}

/* progress */
.t-area .fa-progress{display:flex;align-items:center;gap:16px;padding:18px 0 14px;border-bottom:1px solid var(--line)}
.t-area .fa-bar{flex:1;height:6px;background:var(--soft);overflow:hidden}
.t-area .fa-fill{display:block;height:100%;width:0;background:var(--a-navy);transition:width .25s}
.t-area .fa-ptext{font-size:.85rem;color:var(--muted);white-space:nowrap}
.t-area .fa-ptext b{font-family:var(--serif);font-weight:600;font-size:1.25rem;color:var(--a-navy)}

/* questions */
.t-area .fa-qs{list-style:none;margin:0;padding:0}
.t-area .fa-q{padding:14px 0 15px 14px;margin-left:-18px;border-bottom:1px solid var(--line);border-left:4px solid transparent;transition:border-color .2s}
.t-area .fa-q:last-child{border-bottom:0}
.t-area .fa-q.is-done{border-left-color:var(--a-lime)}
.t-area .fa-qt{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;margin:0 0 12px;font-weight:600;font-size:1.04rem;line-height:1.35;color:var(--a-navy)}
.t-area .fa-n{font-family:var(--serif);font-weight:600;font-size:1.05rem;color:var(--muted);min-width:24px}
.t-area .fa-q.is-done .fa-n{color:var(--a-navy)}
.t-area .fa-qt small{font-weight:500;font-size:.84rem;color:var(--muted)}

/* tap chips: same look as the red-flag check's Yes / No / Don't know (inputs under the hood) */
.t-area .fa-chips{display:flex;flex-wrap:wrap;gap:8px;padding-left:38px}
.t-area .fa-chips input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.t-area .fa-chips label{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:46px;padding:0 18px;border:1.5px solid #c9cfc8;border-radius:999px;background:var(--paper);font-weight:600;font-size:.93rem;color:var(--a-navy);cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s,transform .15s;user-select:none}
.t-area .fa-chips label:hover{border-color:var(--a-navy);transform:translateY(-1px)}
.t-area .fa-chips input:focus-visible+label{outline:3px solid var(--bright);outline-offset:3px}
.t-area .fa-chips input:checked+label{background:var(--a-navy);border-color:var(--a-navy);color:#fff}
.t-area .fa-chips input[type=checkbox]+label:before{content:'+';font-weight:400;font-size:1.05rem;line-height:1;color:#8a9aa6}
.t-area .fa-chips input[type=checkbox]:checked+label:before{content:'✓';color:var(--a-lime);font-weight:700}

/* navy result panel */
.t-area .fa-panel{position:relative;overflow:hidden;background:var(--a-navy);color:#fff;padding:26px 28px 22px;border-radius:6px;box-shadow:0 24px 60px -30px #102b4699}
.t-area .fa-panel:before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 80% 26%,#8fdc6822,transparent 52%)}
.t-area .fa-panel>*{position:relative}
.t-area .fa-top{display:grid;grid-template-columns:minmax(0,1fr) 218px;gap:10px;align-items:center}
.t-area .fa-eyebrow{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;font-weight:650;color:#b9c8d6}
.t-area .fa-zone{margin:10px 0 0;font-family:var(--serif);font-weight:600;line-height:.95;letter-spacing:-.01em;color:var(--a-lime)}
.t-area .fa-zname{display:block;font-size:4.2rem}
.t-area .fa-zone small{display:block;margin-top:8px;font-size:1.45rem;letter-spacing:-.02em;color:#fff}
.t-area .fa-zone.is-multi .fa-zname{font-size:2.3rem;line-height:1.05}
.t-area .fa-type{margin-top:16px;display:inline-block;padding:5px 11px;border:1px solid #ffffff33;border-radius:40px;font-size:.84rem;font-weight:600;color:#e6eef5}

/* the zone compass: matched zone lit lime, needle swings to it */
.t-area .fa-compass{display:block;width:100%;height:auto;overflow:visible}
.t-area .fa-ring{fill:none;stroke:#ffffff26;stroke-width:1}
.t-area .fa-ring2{fill:none;stroke:#ffffff1f;stroke-width:1;stroke-dasharray:2 7}
.t-area .fa-t rect{fill:#ffffff0d;stroke:#ffffff38;stroke-width:1.2;transition:fill .35s,stroke .35s}
.t-area .fa-tn{fill:#c9d6e2;font-family:inherit;font-size:13.5px;font-weight:700;transition:fill .35s}
.t-area .fa-t.is-lit rect{fill:var(--a-lime);stroke:var(--a-lime);filter:drop-shadow(0 0 14px #8fdc6899)}
.t-area .fa-t.is-lit .fa-tn{fill:var(--a-navy)}
.t-area .fa-dot circle{fill:var(--a-navy)}
.t-area .fa-dot text{fill:var(--a-lime);font-family:var(--serif);font-size:11.5px}
.t-area .fa-dial{fill:var(--a-navy2);stroke:#ffffff47;stroke-width:1.2}
.t-area .fa-needle{transform-origin:110px 110px;transition:transform .8s cubic-bezier(.34,1.45,.64,1)}
.t-area .fa-compass[data-dir=east] .fa-needle{transform:rotate(90deg)}
.t-area .fa-compass[data-dir=south] .fa-needle{transform:rotate(180deg)}
.t-area .fa-compass[data-dir=west] .fa-needle{transform:rotate(-90deg)}
.t-area .fa-tip{fill:var(--a-lime)}
.t-area .fa-tail{fill:#ffffff52}
.t-area .fa-pin{fill:var(--a-navy2);stroke:#fff;stroke-width:1.2}

/* 3 areas to visit */
.t-area .fa-lab{margin:20px 0 0;padding-top:16px;border-top:1px solid #ffffff1f;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:650;color:#b9c8d6}
.t-area .fa-areas{list-style:none;margin:6px 0 0;padding:0;counter-reset:fa}
.t-area .fa-areas li{counter-increment:fa}
.t-area .fa-areas a{display:grid;grid-template-columns:30px minmax(0,1fr) auto;column-gap:14px;row-gap:2px;align-items:center;padding:11px 0;border-bottom:1px solid #ffffff14;color:#fff;transition:background .15s}
.t-area .fa-areas li:last-child a{border-bottom:0}
.t-area .fa-areas a:before{content:counter(fa);grid-column:1;grid-row:1/3;width:30px;height:30px;border-radius:50%;background:var(--a-lime);color:var(--a-navy);font-family:var(--serif);font-size:1.05rem;display:flex;align-items:center;justify-content:center}
.t-area .fa-areas b{grid-column:2;grid-row:1;font-size:1.06rem;font-weight:650;line-height:1.25}
.t-area .fa-areas span{grid-column:2;grid-row:2;font-size:.85rem;line-height:1.4;color:var(--a-mute)}
.t-area .fa-areas i{grid-column:3;grid-row:1/3;font-style:normal;color:var(--a-lime);transition:transform .15s}
.t-area .fa-areas a:hover b{color:var(--a-lime)}
.t-area .fa-areas a:hover i{transform:translateX(3px)}
.t-area .fa-note{margin-top:10px;font-size:.8rem;color:#9fb2c4}
.t-area .fa-panel .tk-act{margin-top:14px}

/* CTA + lead form: see tools-kit.css (.tk-cta) */
.t-area .fa-ctasec{padding:0 0 20px}
.t-area .tk-proof{gap:26px}

/* fold + faq */
.t-area .fa-faqsec{padding:28px 0 64px}
.t-area .fa-read p{margin-top:10px}
.t-area .fa-guides{display:flex;flex-wrap:wrap;gap:8px 22px}
.t-area .faq details p a{border-bottom:1px solid currentColor}
.t-area .fa-guides .textlink{border-bottom:0}

@media(prefers-reduced-motion:reduce){
  .t-area .fa-needle,.t-area .fa-t rect,.t-area .fa-tn{transition:none}
}
@media(max-width:900px){
  .t-area .fa-grid{grid-template-columns:1fr;gap:22px}
  .t-area .fa-side{position:static;scroll-margin-top:84px}
  .t-area .fa-panel{scroll-margin-top:84px}
}
@media(max-width:600px){
  .t-area .fa-hero{padding:22px 0 18px}
  .t-area .fa-hero .crumb{margin-bottom:12px}
  .t-area .fa-hero h1{font-size:2.3rem}
  .t-area .fa-sub{font-size:1rem}
  .t-area .fa-tool{padding:18px 0 40px}
  .t-area .fa-card{padding:2px 16px 6px}
  .t-area .fa-q{padding:14px 0 16px 10px;margin-left:-14px}
  .t-area .fa-qt{margin-bottom:10px}
  .t-area .fa-chips{display:grid;grid-template-columns:1fr 1fr;padding-left:0}
  .t-area .fa-chips label{min-height:48px;padding:0 8px;white-space:normal;text-align:center;line-height:1.2}
  .t-area .fa-panel{padding:22px 18px 18px}
  .t-area .fa-top{grid-template-columns:1fr;gap:4px}
  .t-area .fa-zone{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
  .t-area .fa-zname{font-size:3.2rem}
  .t-area .fa-zone small{margin:0;font-size:1.3rem}
  .t-area .fa-zone.is-multi .fa-zname{font-size:2.1rem}
  .t-area .fa-type{margin-top:12px}
  .t-area .fa-compass{max-width:250px;margin:6px auto 0}
  .t-area .fa-type{font-size:.78rem;padding:4px 9px}
  .t-area .tk-proof{gap:18px}
  .t-area~.mobile-action{display:flex;gap:8px}
  .t-area~.mobile-action .btn{width:auto;flex:1;gap:8px;padding:12px 6px;font-size:.8rem}
}