:root{
  --navy:#062f63;
  --navy2:#031d42;
  --gold:#f8c62d;
  --white:#fff;
  --green:#138808;
  --saffron:#f77f00;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;background:var(--navy2);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;overflow-x:hidden}
body{min-width:100%}
.landing{width:100%;min-height:100vh;background:var(--navy2)}
.hero-frame{width:100%;background:var(--navy2);overflow:hidden;line-height:0}

/* FIX21: the old selector remains in the source artwork, so the artwork is
   physically cropped before that footer. The live controls are rendered in
   their own normal-flow panel below it. There is no absolute overlay. */
.hero-picture{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1920/795;
  overflow:hidden;
  background:var(--navy2);
}
.hero-art{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  border:0;
}

.controls-panel{
  position:relative;
  width:100%;
  margin:0;
  padding:16px clamp(18px,4vw,64px) 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:11px;
  background:linear-gradient(180deg,#07396f 0%,#062f63 34%,#04244e 100%);
  box-shadow:inset 0 1px 0 rgba(248,198,45,.22);
  line-height:normal;
}
.selector-overlay{
  position:relative;
  width:min(720px,80vw);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}
/* 70.21.13: invisible hit halo around the community picker.
   This enlarges the pointer/touch target without changing any visible geometry. */
.state-select-hit-target{
  position:absolute;
  z-index:1;
  top:-10px;
  right:84px;
  bottom:-10px;
  left:-10px;
  display:block;
  margin:0;
  padding:0;
  background:transparent;
  border:0;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
#stateSelect{
  position:relative;
  z-index:2;
  flex:1 1 auto;
  width:100%;
  min-width:0;
  height:52px;
  margin:0;
  padding:0 48px 0 24px;
  border:2px solid var(--gold);
  border-radius:999px;
  background:#052b5a;
  color:var(--white);
  font:600 16px/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  box-shadow:0 4px 16px rgba(0,0,0,.22);
  outline:none;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  text-align:left;
  text-align-last:left;
  background-color:#052b5a;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23f8c62d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 18px center;
  background-size:14px 8px;
}
#stateSelect::-ms-expand{display:none}
#stateSelect:focus{box-shadow:0 0 0 3px rgba(248,198,45,.28),0 4px 16px rgba(0,0,0,.22)}
#stateSelect option{background:#082d5a;color:#fff;text-align:left}
.community-go{
  position:relative;
  z-index:3;
  flex:0 0 78px;
  width:78px;
  height:52px;
  min-width:78px;
  margin:0;
  padding:0;
  border:2px solid var(--gold);
  border-radius:999px;
  background:linear-gradient(90deg,var(--saffron),var(--green));
  color:#fff;
  font:800 16px/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  box-shadow:0 4px 16px rgba(0,0,0,.22);
  cursor:pointer;
}
.community-go:disabled{opacity:.48;cursor:not-allowed;filter:none}
.community-go:not(:disabled):hover{filter:brightness(1.05)}
.community-go:focus{outline:3px solid rgba(248,198,45,.32);outline-offset:2px}
.connecting-line{
  width:min(900px,92vw);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(8px,1.2vw,18px);
  color:#f4bd32;
  font-size:clamp(9px,.9vw,14px);
  font-weight:700;
  letter-spacing:clamp(1px,.16vw,2.4px);
  white-space:nowrap;
  text-transform:uppercase;
}
.connecting-line::before,.connecting-line::after{
  content:"";
  height:1px;
  flex:1 1 80px;
  max-width:210px;
  background:linear-gradient(90deg,transparent,#d9a52d 38%,#d9a52d 62%,transparent);
}
.connecting-line b{font-weight:800}
.install-area{
  width:100%;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  background:transparent;
}
.install-button{
  display:block;
  min-width:178px;
  height:44px;
  margin:0;
  padding:0 28px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:linear-gradient(90deg,var(--saffron),var(--green));
  color:#fff;
  font:800 16px/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.24);
}
.install-button[hidden]{display:none}
.install-button:hover{filter:brightness(1.04)}
.install-button:focus{outline:3px solid rgba(248,198,45,.32);outline-offset:2px}
.install-help{margin:0;max-width:680px;text-align:center;color:#fff;font-size:13px;line-height:1.45;white-space:pre-line}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:780px){
  html,body,.landing{width:100%;min-width:100%;min-height:100svh;background:var(--navy2)}
  .hero-frame{
    width:100vw;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    margin:0;
    overflow:hidden;
    background:var(--navy2);
  }
  .hero-picture{
    flex:1 1 auto;
    width:100vw;
    height:calc(100svh - 164px);
    min-height:0;
    aspect-ratio:auto;
    margin:0;
    overflow:hidden;
  }
  .hero-art{
    width:100vw;
    height:100%;
    object-fit:cover;
    object-position:center top;
    margin:0;
  }
  .controls-panel{
    flex:0 0 164px;
    width:100vw;
    min-height:164px;
    margin:0;
    padding:10px 14px max(10px,env(safe-area-inset-bottom));
    gap:8px;
    justify-content:center;
    background:linear-gradient(180deg,#07396f 0%,#062f63 34%,#04244e 100%);
  }
  .selector-overlay{
    width:min(100%,620px);
    margin:0 auto;
    gap:8px;
  }
  .state-select-hit-target{top:-8px;right:64px;bottom:-8px;left:-8px}
  #stateSelect{
    flex:1 1 auto;
    width:100%;
    min-width:0;
    height:46px;
    padding:0 38px;
    font-size:14px;
    background-position:right 14px center;
  }
  .community-go{
    flex:0 0 60px;
    width:60px;
    height:46px;
    min-width:60px;
    font-size:14px;
  }
  .connecting-line{
    /* On mobile, align this line to the dropdown only (exclude the Go button). */
    width:min(calc(100% - 68px),552px);
    align-self:flex-start;
    margin:0;
    gap:5px;
    justify-content:center;
    text-align:center;
    font-size:clamp(6.8px,2.1vw,9.5px);
    letter-spacing:clamp(.35px,.16vw,.75px);
  }
  .connecting-line::before,.connecting-line::after{display:none}
  .install-area{width:100%;margin:0 auto}
  .install-button{min-width:154px;height:40px;padding:0 20px;font-size:14px}
  .install-help{
    position:absolute;
    left:14px;
    right:14px;
    bottom:max(5px,env(safe-area-inset-bottom));
    max-width:none;
    padding:6px 9px;
    border-radius:10px;
    background:rgba(3,29,66,.96);
    font-size:11px;
  }
}
@media(max-width:420px){
  .controls-panel{flex-basis:158px;min-height:158px;padding-left:10px;padding-right:10px;gap:7px}
  .hero-picture{height:calc(100svh - 158px)}
  .selector-overlay{gap:6px}
  .state-select-hit-target{top:-7px;right:59px;bottom:-7px;left:-7px}
  #stateSelect{height:44px;padding-left:36px;padding-right:36px;font-size:13.5px;background-position:right 12px center}
  .community-go{flex-basis:56px;width:56px;min-width:56px;height:44px;font-size:13.5px}
  .connecting-line{width:calc(100% - 62px);font-size:6.8px;gap:4px;letter-spacing:.28px}
  .install-button{height:38px;min-width:148px;font-size:13.5px}
}


/* FIX48: live service-listing coverage, aligned with the existing visitor counter. */
.service-listing-stats{
  margin:18px auto 0;
  width:max-content;
  max-width:calc(100% - 32px);
  box-sizing:border-box;
  min-height:48px;
  padding:9px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:5px 10px;
  border:1px solid rgba(255,255,255,.78);
  border-radius:16px;
  background:#07396f;
  color:#fff;
  font-size:clamp(12px,1.05vw,15px);
  font-weight:500;
  line-height:1.3;
  text-align:center;
}
.service-listing-stats strong{font-size:1.55em;line-height:1;color:#fff;font-weight:850}
.service-listing-stats span:nth-of-type(2) strong{color:#54b8ff}
.service-listing-stats span:nth-of-type(3) strong{color:#9ce65f}
.service-listing-stats span:nth-of-type(5) strong{color:#ff9c45}
.service-listing-stats span:nth-of-type(7) strong{color:#b78cff}
.service-listing-stats span:nth-of-type(8) strong{color:#ff5c8a}
.stats-icon{font-size:24px;line-height:1;color:#7ec8ff}
.stats-separator{opacity:.65}

/* FIX38: wrapper total is intentionally styled like community-page visitor pills. */
.total-community-visitors{
  margin:12px auto 18px;
  width:max-content;
  max-width:calc(100% - 24px);
  padding:7px 11px;
  border-radius:999px;
  background:#fff;
  border:1px solid #d9dde6;
  color:#24324a;
  font-size:12px;
  font-weight:700;
  line-height:1.25;
  text-align:center;
}

/* FIX40: mobile uses the selector artwork already present in the approved hero.
   The real select remains interactive but invisible over that artwork. The
   visitor pill gets its own viewport strip, so it is always visible without
   covering any hero text/design. Install App is independent and may overlap
   only the visitor pill while it is present. */
@media(max-width:780px){
  html,body{height:100%;min-height:100%;}
  body{overflow:hidden;}
  .landing{
    height:100svh;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:var(--navy2);
  }
  .hero-frame{
    position:relative;
    flex:1 1 auto;
    width:100%;
    min-height:0;
    height:auto;
    overflow:hidden;
  }
  .hero-picture{
    width:100%;
    height:100%;
    min-height:0;
    flex:none;
    overflow:hidden;
  }
  .hero-art{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
  }

  /* Convert the former lower controls panel into a non-visual interaction layer. */
  .controls-panel{
    position:absolute;
    inset:0;
    width:100%;
    min-height:0;
    height:100%;
    margin:0;
    padding:0;
    display:block;
    background:transparent;
    box-shadow:none;
    pointer-events:none;
  }
  .selector-overlay{
    position:absolute;
    /* Broad hit area covering the selector drawn into the mobile artwork.
       It intentionally adapts to side-cropping on taller phone screens. */
    left:4%;
    right:4%;
    top:85.4%;
    width:auto;
    height:7.2%;
    min-height:42px;
    margin:0;
    display:block;
    pointer-events:auto;
    z-index:5;
  }
  #stateSelect{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    min-height:42px;
    margin:0;
    padding:0;
    border:0;
    border-radius:999px;
    background:transparent;
    background-image:none;
    box-shadow:none;
    color:transparent;
    opacity:.01;
    cursor:pointer;
    -webkit-appearance:auto;
    appearance:auto;
  }
  #stateSelect:focus{box-shadow:none;outline:none;}
  .community-go,.connecting-line{display:none!important;}

  .install-area{
    position:fixed;
    right:10px;
    bottom:max(8px,env(safe-area-inset-bottom));
    width:auto;
    margin:0;
    padding:0;
    display:block;
    pointer-events:auto;
    z-index:30;
  }
  .install-button{
    min-width:138px;
    height:38px;
    padding:0 18px;
    font-size:13.5px;
  }
  .install-help{
    position:fixed;
    left:12px;
    right:12px;
    bottom:calc(58px + env(safe-area-inset-bottom));
    max-width:none;
    margin:0 auto;
    padding:9px 11px;
    border-radius:10px;
    background:rgba(3,29,66,.97);
    font-size:11px;
    line-height:1.4;
    z-index:40;
  }

  .total-community-visitors{
    position:relative;
    flex:0 0 auto;
    align-self:center;
    margin:7px auto max(7px,env(safe-area-inset-bottom));
    max-width:calc(100% - 24px);
    padding:7px 11px;
    z-index:20;
    white-space:nowrap;
  }
}

@media(max-width:780px){
  .service-listing-stats{
    position:relative;
    flex:0 0 auto;
    align-self:center;
    margin:6px auto 0;
    width:max-content;
    max-width:calc(100% - 24px);
    min-height:0;
    padding:6px 8px;
    gap:3px 6px;
    border-radius:12px;
    font-size:10px;
    line-height:1.22;
    z-index:20;
  }
  .service-listing-stats strong{font-size:1.45em}
  .stats-icon{font-size:19px}
  .stats-separator{display:none}
  .total-community-visitors{margin-top:6px;}
}

@media(max-width:420px){
  .selector-overlay{left:3%;right:3%;top:85.1%;height:7.7%;min-height:40px;}
  #stateSelect{min-height:40px;}
  .install-area{right:7px;}
  .install-button{min-width:124px;height:36px;padding:0 14px;font-size:12.5px;}
  .service-listing-stats{width:max-content;max-width:calc(100% - 16px);font-size:9.2px;padding:5px 6px;gap:2px 5px;}
  .service-listing-stats strong{font-size:1.4em}
  .stats-icon{font-size:17px}
  .total-community-visitors{font-size:11px;padding:6px 9px;}
}


/* 70.21.2: Sahaya is the single public search + assistance entry; Anveshana search logic remains underneath. */
.setu-entry-group{
  margin:12px auto 0;
  width:max-content;
  max-width:calc(100% - 24px);
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}
.search-beta-entry{
  margin:0;
  width:max-content;
  max-width:100%;
  display:flex;
  justify-content:center;
}
.search-beta-button{
  min-height:40px;
  padding:9px 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid #073b74;
  border-radius:9px;
  background:#073b74;
  color:#fff;
  text-decoration:none;
  font-size:13px;
  font-weight:800;
  line-height:1.1;
  box-shadow:none;
}
.search-beta-button:hover{filter:brightness(1.06)}
.search-beta-button:focus-visible{outline:3px solid rgba(7,59,116,.20);outline-offset:2px}
.search-beta-icon{font-size:18px;line-height:1;color:#fff}
.search-beta-badge{
  padding:3px 6px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.70);
  background:#fff;
  color:#073b74;
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
}
@media(max-width:780px){
  .setu-entry-group{position:relative;flex:0 0 auto;align-self:center;margin:5px auto 0;z-index:20;gap:5px}
  .search-beta-entry{position:relative;flex:0 0 auto;align-self:center;margin:0;z-index:20}
  .search-beta-button{min-height:34px;padding:6px 10px;font-size:11px;gap:6px}
  .search-beta-icon{font-size:15px}
  .search-beta-badge{font-size:8px;padding:2px 5px}
}
@media(max-width:420px){
  .setu-entry-group{margin-top:4px;gap:4px;max-width:calc(100% - 12px)}
  .search-beta-button{min-height:32px;padding:5px 8px;font-size:10px;gap:5px}
  .search-beta-badge{font-size:7.5px}
}

/* FIX63 temporary Search Beta launch animation; wrapper.js only enables it until 18 Sep 2026. */
.search-beta-button.search-new-animation{animation:bsSearchNudge 4.4s ease-in-out infinite;position:relative;overflow:hidden}
.search-beta-button.search-new-animation::after{content:"";position:absolute;top:-35%;bottom:-35%;left:-45%;width:24%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:bsSearchSheen 4.4s ease-in-out infinite;pointer-events:none}
@keyframes bsSearchNudge{0%,76%,100%{transform:translateY(0) scale(1)}82%{transform:translateY(-2px) scale(1.02)}88%{transform:translateY(0) scale(1)}}
@keyframes bsSearchSheen{0%,70%{left:-45%;opacity:0}76%{opacity:1}92%{left:125%;opacity:0}100%{left:125%;opacity:0}}
@media(prefers-reduced-motion:reduce){.search-beta-button.search-new-animation,.search-beta-button.search-new-animation::after{animation:none!important}}