/* ===========================================================================
   bighand.co.in — "ACCESS COUNTER"
   Brand: Bighand99. Login + sign-up reference only.

   COLOUR is the Bighand99 panel palette (brand identity — same teal on every
   Bighand99 domain, by instruction). EVERYTHING STRUCTURAL IS NEW:
   no class name, token name, layout block or component below exists on any
   other site in this network. Layout idea: a full-bleed teal "counter" band
   under the header with the access card straddling its lower edge, then a
   banded rhythm of alternating teal shelves and white sheets down a single
   narrow measure. Navigation is an always-visible scroll-snap tab rail —
   no toggle, no disclosure, no JavaScript anywhere on the site.
   =========================================================================== */

@font-face{font-family:"FSC fallback";src:local("Arial"),local("Helvetica"),local("Liberation Sans");size-adjust:82%;ascent-override:104%;descent-override:26%;line-gap-override:0%}
@font-face{font-family:"Cabin fallback";src:local("Arial"),local("Helvetica"),local("Liberation Sans");size-adjust:96%;ascent-override:96%;descent-override:26%;line-gap-override:0%}
@font-face{font-family:"Cabin";src:url(/fonts/cabin-var.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Fira Sans Condensed";src:url(/fonts/fsc-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Fira Sans Condensed";src:url(/fonts/fsc-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  /* panel ground + chrome */
  --night:#13283B;
  --teal:#0E5878;
  --teal-d:#0C4A66;
  --teal-l:#1B5E7E;

  /* white surfaces */
  --white:#FFFFFF;
  --white-2:#F4F7FA;
  --hair:#D7DFE6;
  --hair-2:#BCC9D4;

  /* type on white */
  --txt:#153B4F;
  --txt-2:#3E5F72;
  --txt-3:#54748A;

  /* type on teal */
  --ont:#FFFFFF;
  --ont-2:#D4E5EE;
  --ont-3:#A9C6D6;

  /* actions */
  --wa:#25D366;
  --wa-txt:#04250F;
  --amber:#F5C542;
  --amber-txt:#2A1A00;

  --measure:1060px;
  --read:700px;
  --rad:12px;
  --rad-s:8px;
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{overflow-x:clip;max-width:100%;margin:0;background:var(--night);color:var(--ont);
  font-family:"Cabin","Cabin fallback","Segoe UI",Roboto,system-ui,-apple-system,sans-serif;
  font-size:16.5px;line-height:1.66;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:#8FD3F4}
h1,h2,h3{font-family:"Fira Sans Condensed","FSC fallback","Arial Narrow",Arial,system-ui,sans-serif;
  font-weight:700;letter-spacing:.005em;line-height:1.2;margin:0 0 12px}
h1{font-size:clamp(1.62rem,4.6vw,2.36rem)}
h2{font-size:clamp(1.24rem,3.1vw,1.56rem);margin-top:0}
h3{font-size:1.06rem;margin-bottom:8px}
p{margin:0 0 14px}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:3px}

.skipto{position:absolute;left:-9999px;top:0;z-index:300;background:var(--amber);
  color:var(--amber-txt)!important;padding:11px 17px;font-weight:700;text-decoration:none}
.skipto:focus{left:8px;top:8px}

.gut{width:100%;max-width:var(--measure);margin:0 auto;padding:0 17px}

/* ---- header: logo bar + always-open tab rail ------------------------------ */
.crown{position:sticky;top:0;z-index:70;width:100%;max-width:100vw;
  background:var(--teal-d);border-bottom:1px solid rgba(255,255,255,.13)}
.crown-a{max-width:var(--measure);margin:0 auto;padding:9px 17px;
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.sigil{display:inline-flex;align-items:center;text-decoration:none;flex:0 0 auto}
.sigil img{width:138px;height:44px;object-fit:contain}
.tap{background:var(--wa)!important;color:var(--wa-txt)!important;font-weight:700;
  text-decoration:none;border-radius:999px;padding:11px 17px;font-size:.88rem;
  line-height:1.1;min-height:44px;display:inline-flex;align-items:center;flex:0 0 auto}
.tap:hover{filter:brightness(1.07)}

.rail{background:#0A4058;border-top:1px solid rgba(255,255,255,.08);max-width:100%}
.rail ul{max-width:var(--measure);margin:0 auto;padding:0 9px;list-style:none;
  display:flex;gap:0;overflow-x:auto;scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none}
.rail ul::-webkit-scrollbar{display:none}
.rail li{flex:0 0 auto;scroll-snap-align:start}
.rail a{display:flex;align-items:center;min-height:44px;padding:10px 13px;
  color:#EAF3F8;text-decoration:none;font-size:.845rem;white-space:nowrap;
  border-bottom:3px solid transparent}
.rail a:hover{background:rgba(255,255,255,.07)}
.rail a[aria-current="page"]{color:#FFFFFF;font-weight:700;border-bottom-color:var(--amber)}

/* ---- panel-replica login card, directly under the header ----------------- */
.lobby{background:linear-gradient(180deg,var(--teal) 0%,#0C5070 100%);padding:32px 0 14px}
.gate{background:var(--white);color:var(--txt);border-radius:6px;max-width:440px;
  margin:0 auto;padding:22px 20px 22px;box-shadow:0 3px 14px rgba(0,0,0,.30)}
.gate-h{display:flex;align-items:center;justify-content:center;gap:9px;margin:0 0 18px;
  font-family:"Fira Sans Condensed","FSC fallback","Arial Narrow",Arial,sans-serif;
  font-size:1.5rem;font-weight:700;color:#0C4A66;line-height:1.1}
.gate-h svg{width:22px;height:22px;fill:#0C4A66;flex:0 0 auto}
.fld{display:flex;align-items:stretch;border:1px solid #CFD6DC;border-radius:4px;
  overflow:hidden;margin:0 0 14px;min-height:48px;background:#FFFFFF;text-decoration:none;color:#5C6B7A}
.fld span{flex:1;display:flex;align-items:center;padding:0 13px;color:#5C6B7A;font-size:1rem}
.fld i{width:52px;display:flex;align-items:center;justify-content:center;
  background:#EFF2F5;border-left:1px solid #CFD6DC;flex:0 0 auto}
.fld i svg{width:19px;height:19px;fill:#2E3A44}
.fld:hover{border-color:#0E5878}
.pbtn{position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;min-height:50px;padding:13px 48px;margin:0 0 12px;border-radius:4px;
  background:#0C4A66!important;color:#FFFFFF!important;text-decoration:none;
  font-weight:700;font-size:1.03rem;line-height:1.15;text-align:center}
.pbtn svg{position:absolute;right:16px;width:20px;height:20px;fill:#FFFFFF}
.pbtn:hover{background:#0E5878!important}
.pbtn:last-of-type{margin-bottom:0}
.tiny{font-size:.79rem;color:var(--txt-3);margin:12px 0 0;text-align:center}

/* ---- the heading band, under the card ------------------------------------ */
.counter{background:linear-gradient(180deg,#0C5070 0%,#0B4763 100%);
  padding:16px 0 26px;border-bottom:1px solid rgba(255,255,255,.10)}
.crumb{font-size:.79rem;color:var(--ont-3);margin:0 0 12px}
.crumb a{color:var(--ont-2);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.stand{max-width:var(--read)}
.stand p{color:var(--ont-2);margin-bottom:0}
.stand p strong{color:#FFFFFF}

/* ---- the banded body ----------------------------------------------------- */
main{max-width:100%;overflow-x:clip;display:block}
.shelf{background:var(--teal-d);border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(0,0,0,.18);padding:24px 0}
.sheet{background:var(--white);color:var(--txt);padding:26px 0}
.sheet h2,.sheet h3{color:var(--txt)}
.sheet p{color:var(--txt-2)}
.hold{max-width:var(--read);margin:0 auto}
.hold-w{max-width:840px;margin:0 auto}

.reply{border-left:5px solid var(--amber);background:var(--white-2);
  border-radius:0 var(--rad-s) var(--rad-s) 0;padding:14px 16px;margin:0 0 18px}
.reply p{margin:0;color:var(--txt);font-size:1.02rem}

.mark{list-style:none;counter-reset:mk;margin:14px 0;padding:0}
.mark li{counter-increment:mk;position:relative;padding:0 0 12px 40px;color:var(--txt-2)}
.mark li::before{content:counter(mk);position:absolute;left:0;top:1px;width:27px;height:27px;
  border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;
  justify-content:center;font-size:.83rem;font-weight:700}
.mark b{color:var(--txt)}

.tick{list-style:none;margin:12px 0;padding:0}
.tick li{position:relative;padding:0 0 9px 24px;color:var(--txt-2)}
.tick li::before{content:"";position:absolute;left:2px;top:9px;width:8px;height:8px;
  border-radius:2px;background:var(--amber)}

.slate{width:100%;border-collapse:collapse;margin:14px 0;font-size:.93rem}
.slate th,.slate td{border:1px solid var(--hair);padding:9px 11px;text-align:left;
  vertical-align:top;color:var(--txt-2)}
.slate th{background:var(--white-2);color:var(--txt);font-weight:700}
.scroller{overflow-x:auto;max-width:100%}

.pairs{display:grid;gap:10px;margin:14px 0}
@media(min-width:660px){.pairs{grid-template-columns:1fr 1fr}}
.pairs>div{border:1px solid var(--hair);border-radius:var(--rad-s);padding:13px 14px;
  background:var(--white-2)}
.pairs h3{margin-bottom:5px;font-size:.99rem}
.pairs p{margin:0;font-size:.9rem}

.q{border-bottom:1px solid var(--hair);padding:13px 0}
.q:last-of-type{border-bottom:0}
.q h3{margin-bottom:5px}
.q p{margin:0;font-size:.95rem}

/* ---- closing box + chip cloud ------------------------------------------- */
.close{background:var(--white);color:var(--txt);border:1px solid var(--hair);
  border-top:4px solid var(--teal);border-radius:var(--rad);padding:17px 18px;
  max-height:280px;overflow-y:auto}
.close h2{font-size:1.1rem}
.close p,.close li,.close dd,.close td{color:var(--txt-2);font-size:.9rem}
.close h3{font-size:.97rem;margin:12px 0 5px}
.close ul,.close ol{margin:10px 0;padding-left:20px}
.close li{margin-bottom:6px}
.close dl{margin:11px 0}
.close dt{font-weight:700;color:var(--txt);margin-top:9px}
.close dd{margin:2px 0 0}
.close table{width:100%;border-collapse:collapse;font-size:.88rem;margin:11px 0}
.close th,.close td{border:1px solid var(--hair);padding:7px 9px;text-align:left}
.close th{background:var(--white-2);color:var(--txt)}
.close .kv{display:grid;grid-template-columns:auto 1fr;gap:5px 13px;margin:11px 0;font-size:.9rem}
.close .kv b{color:var(--txt)}
.close .qq{margin:10px 0}
.close .qq b{display:block;color:var(--txt)}
.close .duo{display:grid;gap:11px;margin:11px 0}
@media(min-width:600px){.close .duo{grid-template-columns:1fr 1fr}}

.cloud{margin:20px 0 6px}
.cloud h2{font-size:.98rem;color:var(--ont-2);text-transform:uppercase;
  letter-spacing:.08em;margin-bottom:11px}
.cloud ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.cloud li{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.15);
  border-radius:999px;padding:9px 14px;font-size:.82rem;color:var(--ont-2);
  min-height:36px;display:flex;align-items:center}

/* ---- footer -------------------------------------------------------------- */
.base{background:var(--teal-d);border-top:1px solid rgba(255,255,255,.12);padding:24px 0 26px}
.base img{width:126px;height:40px;object-fit:contain}
.say{max-width:560px;margin:11px 0 0;font-size:.88rem;color:var(--ont-2)}
.ways{display:flex;flex-wrap:wrap;gap:7px 19px;list-style:none;margin:17px 0 0;padding:0}
.ways a{color:var(--ont-2);text-decoration:none;font-size:.88rem;
  min-height:44px;display:inline-flex;align-items:center}
.ways a:hover{color:#fff;text-decoration:underline}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0}
.badges a{width:44px;height:44px;border-radius:9px;background:rgba(255,255,255,.09);
  display:flex;align-items:center;justify-content:center;color:var(--ont-2)}
.badges a:hover{background:rgba(255,255,255,.17);color:#fff}
.badges svg{width:21px;height:21px;fill:currentColor}
.tpil{display:inline-flex;align-items:center;gap:9px;margin-top:15px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  border-radius:999px;padding:9px 15px;color:var(--ont-2);text-decoration:none;
  font-size:.85rem;min-height:44px}
.tpil:hover{color:#fff}
.tpil svg{width:17px;height:17px;fill:#00B67A}
.legal{margin-top:19px;padding-top:15px;border-top:1px solid rgba(255,255,255,.14);
  font-size:.81rem;color:var(--ont-3)}

.floatwa{position:fixed;right:17px;bottom:17px;z-index:90;width:60px;height:60px;
  border-radius:50%;background:var(--wa);display:flex;align-items:center;
  justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.4);
  animation:beat 2.4s ease-in-out infinite}
.floatwa svg{width:33px;height:33px;fill:#fff}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---- the same blocks, repainted for a teal shelf -------------------------- */
.shelf h2,.shelf h3,.shelf b,.shelf strong{color:#FFFFFF}
.shelf p,.shelf li,.shelf dd,.shelf td{color:var(--ont-2)}
.shelf .mark li::before{background:var(--amber);color:var(--amber-txt)}
.shelf .tick li::before{background:var(--amber)}
.shelf .reply{background:rgba(255,255,255,.07);border-left-color:var(--amber);border-radius:0 8px 8px 0}
.shelf .reply p{color:#FFFFFF}
.shelf .slate th,.shelf .slate td{border-color:rgba(255,255,255,.22)}
.shelf .slate th{background:rgba(255,255,255,.08);color:#FFFFFF}
.shelf .pairs>div{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.shelf .q{border-bottom-color:rgba(255,255,255,.16)}