/* ===========================================================================
   bighand.in — "LEDGER LIGHT"
   Brand: Bighand99 (Bansal Exchange). Domain is bighand.in; the brand is not.
   Light cool-grey surface, wine accent, sticky login dock on desktop.
   Written from scratch for this domain — no class, token or block is carried
   over from any other site in the network (CLAUDE.md: template hard ban).
   =========================================================================== */

:root{
  /* ---- ORIGINAL BIGHAND99 PANEL PALETTE ----
     Taken from the live panel login screen: petrol-teal at the top fading to
     night navy, a white login card, solid teal chrome bars.
     The variable NAMES are kept from the first build so every page's own
     <style> block (all of which paint inside white cards) keeps working. */

  /* page ground + chrome */
  --paper:#13283B;      /* night navy, bottom of the gradient */
  --deep:#0E5878;       /* panel teal */
  --bar:#0C4A66;        /* header + footer bars */
  --edge:#1B5E7E;

  /* white cards */
  --sheet:#FFFFFF;
  --sheet-2:#F4F7FA;
  --rule:#D7DFE6;
  --rule-2:#BCC9D4;

  /* text INSIDE white cards (this is what page styles use) */
  --ink:#153B4F;
  --ink-2:#3E5F72;
  --ink-3:#54748A;

  /* text ON the teal ground */
  --onteal:#FFFFFF;
  --onteal-2:#D4E5EE;
  --onteal-3:#A9C6D6;

  /* accent — the panel's own teal replaces the old wine */
  --wine:#0E5878;
  --wine-2:#0B4763;
  --wine-pale:#E9F1F6;

  --wa:#25D366;
  --wa-ink:#04250F;
  --gold:#E8A400;
  --gold-ink:#2A1A00;

  --r:6px;
  --r-lg:8px;
  --hold:1120px;
  --lift:0 2px 6px rgba(4,20,30,.18), 0 12px 30px rgba(4,20,30,.22);
}

html{overflow-x:clip}
body{overflow-x:clip;max-width:100%}
main{max-width:100%;overflow-x:clip}
*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;color:var(--onteal);
  background:#13283B;
  background:linear-gradient(180deg,#0E5878 0%,#0C4A66 26%,#16334A 68%,#13283B 100%);
  background-attachment:fixed;
  font:16px/1.68 "IBM Plex Sans","Segoe UI",Roboto,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}

h1,h2,h3{font-family:"Manrope","Segoe UI",Roboto,system-ui,sans-serif;
  line-height:1.22;margin:0 0 11px;letter-spacing:-.015em;color:var(--ink)}
h1{color:var(--onteal)}   /* the page H1 sits on the teal ground, not in a card */
h1{font-size:clamp(1.45rem,3.2vw,2.05rem);font-weight:800}
h2{font-size:clamp(1.16rem,2.2vw,1.42rem);font-weight:800}
h3{font-size:1.02rem;font-weight:700}
p{margin:0 0 13px}
a{color:var(--wine)}
a:hover{color:var(--wine-2)}
.mainc a,.solo a,.tail a{color:var(--wine)}

a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}

.jump{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold);color:var(--gold-ink)!important;
  color:#fff;padding:10px 16px;font-weight:700;text-decoration:none}
.jump:focus{left:0}

.hold{width:100%;max-width:var(--hold);margin:0 auto;padding:0 18px}

/* ======================= HEADER — two rows, no burger =======================
   Row 1: wordmark + CTA.  Row 2: a horizontally scrollable nav strip.
   Deliberately NOT a hamburger dropdown — different structure from the rest
   of the network, and it removes that whole class of layout bug. */
.bar{position:sticky;top:0;z-index:60;width:100%;max-width:100vw;
  background:rgba(12,74,102,.97);border-bottom:1px solid rgba(255,255,255,.10);
  backdrop-filter:saturate(140%) blur(6px)}
.bar-top{max-width:var(--hold);margin:0 auto;padding:10px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:14px}
.mark{display:inline-flex;align-items:center;text-decoration:none;flex:0 0 auto}
.mark img{width:150px;height:48px;display:block}
.go{background:var(--wa)!important;color:var(--wa-ink)!important;text-decoration:none;
  font-weight:800;font-size:.83rem;padding:11px 16px;border-radius:8px;white-space:nowrap;
  min-height:44px;display:inline-flex;align-items:center}
.go:hover{background:#1FBE59!important;color:var(--wa-ink)!important}

.strip{border-top:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.16)}
.strip-in{max-width:var(--hold);margin:0 auto;display:flex;gap:2px;
  overflow-x:auto;scrollbar-width:thin;padding:0 10px;
  -webkit-overflow-scrolling:touch}
.strip-in a{flex:0 0 auto;color:var(--onteal-2);text-decoration:none;font-size:.84rem;
  font-weight:600;padding:13px 12px;min-height:44px;display:inline-flex;align-items:center;
  border-bottom:3px solid transparent;white-space:nowrap}
.strip-in a:hover{color:#fff;background:rgba(255,255,255,.08)}
.strip-in a[aria-current="page"]{color:#fff;border-bottom-color:var(--gold)}

/* ======================= LAYOUT — content + sticky dock ======================= */
.trail{font-size:.79rem;color:var(--onteal-3);padding:16px 0 2px}
.trail a{color:var(--onteal-3);text-decoration:none}
.trail a:hover{color:var(--onteal)}

/* DOM order is dock-first so a phone sees the sign-in card before any prose;
   on desktop explicit grid placement moves it back to the right column. */
.split{display:grid;gap:22px;align-items:start;padding-bottom:8px}
@media(min-width:940px){
  .split{grid-template-columns:minmax(0,1fr) 370px}
  .mainc{grid-column:1;grid-row:1}
  .dock{grid-column:2;grid-row:1}
}

.slab{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:20px 22px 8px;margin:0 0 18px;box-shadow:var(--lift);color:var(--ink-2)}
.slab h2,.slab h3{color:var(--ink)}
.slab:last-child{margin-bottom:0}

.lede{background:var(--sheet);border:1px solid var(--rule);border-left:5px solid var(--gold);
  border-radius:var(--r);padding:15px 17px;margin:0 0 18px;color:var(--ink);font-size:1.01rem;
  box-shadow:var(--lift)}
.lede p:last-child{margin-bottom:0}

/* utility pages carry no sign-in dock, so they run as one narrow column */
.solo{max-width:760px;padding-bottom:8px}

/* the login/signup dock — sticks beside the content on desktop */
.dock{position:static}
@media(min-width:940px){.dock{position:sticky;top:112px}}

/* ======================= SMALL PARTS ======================= */
.walk{counter-reset:w;list-style:none;margin:14px 0;padding:0}
.walk li{counter-increment:w;position:relative;padding:0 0 13px 38px}
.walk li::before{content:counter(w);position:absolute;left:0;top:1px;width:26px;height:26px;
  border-radius:5px;background:var(--wine);color:#fff;font-weight:700;font-size:.8rem;
  display:flex;align-items:center;justify-content:center}
.walk b{display:block}

.rows > div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;
  border-bottom:1px solid var(--rule);font-size:.93rem}
.rows > div:last-child{border-bottom:0}
.rows span{color:var(--ink-3)}
.rows b{color:var(--ink)}
.rows b{text-align:right}

.flag{border-left:4px solid var(--gold);background:#FFF8E6;border-radius:0 var(--r) var(--r) 0;
  padding:13px 16px;margin:14px 0}
.flag p:last-child{margin-bottom:0}

.grid2{display:grid;gap:12px;margin:14px 0}
@media(min-width:640px){.grid2{grid-template-columns:1fr 1fr}}
.grid2 > div{background:var(--sheet-2);border:1px solid var(--rule);
  border-radius:var(--r);padding:13px 15px;color:var(--ink-2)}
.grid2 h3{color:var(--ink)}
.grid2 h3{font-size:.93rem;margin-bottom:6px}
.grid2 ul{margin:0;padding-left:17px;font-size:.92rem;color:var(--ink-2)}
.grid2 li{margin-bottom:5px}

.qs details{border:1px solid var(--rule);border-radius:var(--r);margin:0 0 9px;background:var(--sheet-2)}
.qs summary{cursor:pointer;padding:13px 15px;font-weight:700;list-style:none;
  min-height:44px;display:flex;align-items:center;color:var(--ink)}
.qs summary::-webkit-details-marker{display:none}
.qs summary::after{content:"›";margin-left:auto;color:var(--wine);font-size:1.4rem;
  line-height:1;transform:rotate(90deg)}
.qs details[open] summary::after{transform:rotate(-90deg)}
.qs .ans{padding:0 15px 13px;color:var(--ink-2)}
.qs .ans p:last-child{margin-bottom:0}

/* ======================= TAIL (bottom box) + TERM CLOUD ======================= */
.tail{background:var(--sheet);border:1px solid var(--rule);border-top:4px solid var(--wine);
  border-radius:var(--r-lg);padding:18px 20px 8px;margin:22px 0 16px;
  max-height:340px;overflow-y:auto;font-size:.93rem;color:var(--ink-2);box-shadow:var(--lift)}
.tail h2{font-size:1.08rem}
.tail h3{font-size:.95rem}
.tail ul,.tail ol{margin:9px 0 13px;padding-left:19px}
.tail li{margin-bottom:6px}
.tail dl{margin:9px 0 13px}
.tail dt{font-weight:700;color:var(--ink);margin-top:10px}
.tail dt:first-child{margin-top:0}
.tail dd{margin:2px 0 0}
.tail table{border-collapse:collapse;width:100%;font-size:.88rem}
.tail th,.tail td{padding:8px 10px;border-bottom:1px solid var(--rule);text-align:left}
.tail tr:last-child td{border-bottom:0}
.tail .sc{overflow-x:auto;margin:9px 0 13px}
.tail .kvr{display:flex;justify-content:space-between;gap:14px;padding:7px 0;
  border-bottom:1px solid var(--rule)}
.tail .kvr:last-of-type{border-bottom:0}
.tail .kvr b{color:var(--ink);text-align:right}
.tail .qp p{margin:0 0 10px}
.tail .qp b{display:block;color:var(--wine)}
.tail h2,.tail h3,.tail dt,.tail b{color:var(--ink)}

.terms{margin:16px 0 24px}
.terms h2{font-size:1rem;color:var(--onteal-2)}
.terms ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.terms li{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  color:var(--onteal-2);border-radius:5px;padding:9px 13px;font-size:.82rem;min-height:38px;
  display:flex;align-items:center}

/* ======================= FOOTER ======================= */
.foot{background:var(--bar);border-top:1px solid rgba(255,255,255,.12);margin-top:26px;
  padding:26px 0 84px;font-size:.9rem;color:var(--onteal-3)}
.foot-in{max-width:var(--hold);margin:0 auto;padding:0 18px}
.foot .plaque{display:inline-block}
.foot img{width:142px;height:45px;display:block}
.blurb{max-width:540px;margin-top:10px;font-size:.88rem;color:var(--onteal-2)}
.links{display:flex;flex-wrap:wrap;gap:6px 18px;margin:16px 0 0;padding:0;list-style:none}
.links a{color:var(--onteal-2);text-decoration:none;padding:10px 0;min-height:44px;
  display:inline-flex;align-items:center}
.links a:hover{color:#fff}
.soc{display:flex;flex-wrap:wrap;gap:9px;margin:15px 0 0}
.soc a{width:44px;height:44px;border-radius:6px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);display:inline-flex;align-items:center;justify-content:center}
.soc a:hover{border-color:var(--gold);background:rgba(255,255,255,.14)}
.soc svg{width:19px;height:19px;fill:var(--onteal-2)}
.soc a:hover svg{fill:var(--gold)}
.tp{display:inline-flex;align-items:center;gap:9px;margin-top:15px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);border-radius:6px;padding:10px 14px;text-decoration:none;
  color:var(--onteal-2);font-size:.85rem;font-weight:700;min-height:44px}
.tp:hover{border-color:#00B67A;color:#fff}
.tp svg{width:17px;height:17px;fill:#00B67A;flex:0 0 auto}
.fine{margin-top:19px;padding-top:15px;border-top:1px solid rgba(255,255,255,.14);
  font-size:.81rem;color:var(--onteal-3)}

/* ======================= WHATSAPP FLOAT ======================= */
.float{position:fixed;right:18px;bottom:18px;z-index:90;width:60px;height:60px;
  border-radius:50%;background:var(--wa)!important;display:flex;align-items:center;
  justify-content:center;box-shadow:0 6px 20px rgba(37,211,102,.45);
  animation:beat 2.6s ease-in-out infinite}
.float svg{width:33px;height:33px;fill:#fff}
@keyframes beat{0%,100%{box-shadow:0 6px 20px rgba(37,211,102,.45)}
  50%{box-shadow:0 6px 20px rgba(37,211,102,.45),0 0 0 13px rgba(37,211,102,0)}}

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