/* bighand.pro — PITCH WHITE shell
   white ground · green chrome · logo-yellow CTA · red micro-accent
   prefix: bh-   fonts: Figtree (headings) + Atkinson Hyperlegible (body) */

:root{
  --bh-bg:#FFFFFF;
  --bh-band:#EAF5EC;
  --bh-ink:#10241A;
  --bh-dim:#4F6459;
  --bh-line:#D6E6DA;
  --bh-green:#1E7B34;
  --bh-green-deep:#155A26;
  --bh-green-ink:#FFFFFF;
  --bh-yellow:#FFD400;
  --bh-yellow-ink:#2A1A00;
  --bh-red:#D7263D;
  --bh-wa:#25D366;
  --bh-wa-ink:#04250F;
  --bh-radius:12px;
  --bh-head:"Figtree","Segoe UI",Arial,Helvetica,sans-serif;
  --bh-body:"Atkinson Hyperlegible","Verdana","Segoe UI",Arial,sans-serif;
  --bh-wrap:1120px;
  --bh-hdr-h:68px;
}

/* ---------- reset + overflow guards ---------- */
*,*::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(--bh-bg);color:var(--bh-ink);
  font-family:var(--bh-body);font-size:1.02rem;line-height:1.65}
main{max-width:100%;overflow-x:clip;display:block}
img{max-width:100%;height:auto;display:inline-block}
a{color:var(--bh-green);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--bh-green-deep)}
h1,h2,h3,h4{font-family:var(--bh-head);line-height:1.2;margin:0 0 .55em;color:var(--bh-ink);font-weight:800}
h1{font-size:clamp(1.65rem,3.6vw,2.45rem);letter-spacing:-.01em}
h2{font-size:clamp(1.35rem,2.6vw,1.8rem);font-weight:800}
h3{font-size:1.15rem;font-weight:700}
p{margin:0 0 1em}
ul,ol{padding-left:1.35em;margin:0 0 1.1em}
li{margin:.25em 0}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:.6em .7em;border-bottom:1px solid var(--bh-line);vertical-align:top}
th{font-family:var(--bh-head);font-weight:700;background:var(--bh-band)}
strong{font-weight:700}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- focus + skip link ---------- */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--bh-red);outline-offset:3px;border-radius:4px}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--bh-yellow);color:var(--bh-yellow-ink);
  padding:.6em 1em;border-radius:8px;font-family:var(--bh-head);font-weight:700}
.skip-link:focus{left:8px}

/* ---------- layout helpers ---------- */
.bh-wrap{width:100%;max-width:var(--bh-wrap);margin:0 auto;padding:0 20px}
.bh-band{background:var(--bh-band)}
.bh-sec{padding:44px 0}
.bh-sec-tight{padding:26px 0}
.bh-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 1.2em}
.bh-scroll table{min-width:520px}
.bh-callout{border-left:3px solid var(--bh-red);background:var(--bh-band);padding:14px 18px;border-radius:0 var(--bh-radius) var(--bh-radius) 0;margin:18px 0}
.bh-callout p:last-child{margin:0}
.bh-suits{list-style:none;padding-left:0}
.bh-suits li{padding-left:1.5em;position:relative}
.bh-suits li::before{position:absolute;left:0;top:0;color:var(--bh-green);font-weight:700}
.bh-suits li:nth-child(4n+1)::before{content:"\2660"}
.bh-suits li:nth-child(4n+2)::before{content:"\2665";color:var(--bh-red)}
.bh-suits li:nth-child(4n+3)::before{content:"\2663"}
.bh-suits li:nth-child(4n+4)::before{content:"\2666";color:var(--bh-red)}
.bh-answer{font-size:1.08rem;border:1px solid var(--bh-line);border-radius:var(--bh-radius);padding:16px 20px;margin:0 0 22px;background:#fff}
.bh-answer p:last-child{margin:0}

/* ---------- header ---------- */
.bh-hdr{position:sticky;top:0;z-index:100;width:100%;max-width:100vw;background:var(--bh-green);
  color:var(--bh-green-ink);border-bottom:3px solid var(--bh-yellow)}
.bh-hdr-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:var(--bh-hdr-h);max-width:var(--bh-wrap);margin:0 auto;padding:0 16px}
.bh-logo{display:flex;align-items:center;min-height:44px;flex:0 0 auto}
.bh-logo img{display:block;height:44px;width:auto}
.bh-nav{display:none;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
.bh-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:#fff;text-decoration:none;
  font-family:var(--bh-head);font-weight:700;font-size:.95rem;border-radius:8px}
.bh-nav a:hover{background:rgba(255,255,255,.14);color:#fff}
.bh-nav a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--bh-yellow)}
.bh-hdr .bh-hdr-cta{display:none}
.bh-burger{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border:2px solid rgba(255,255,255,.55);
  background:transparent;border-radius:9px;cursor:pointer;padding:0;color:#fff}
.bh-burger span{display:block;width:22px;height:2px;background:#fff;position:relative}
.bh-burger span::before,.bh-burger span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:#fff}
.bh-burger span::before{top:-7px}
.bh-burger span::after{top:7px}
/* mobile dropdown: absolute, full width, BELOW the header — toggled with .open */
.bh-mnav{position:absolute;top:100%;left:0;right:0;display:flex;flex-direction:column;background:var(--bh-green-deep);
  border-top:1px solid rgba(255,255,255,.2);border-bottom:3px solid var(--bh-yellow);padding:8px 12px 14px;
  max-height:0;overflow:hidden;visibility:hidden;transition:max-height .25s ease,visibility 0s .25s;z-index:99}
.bh-mnav.open{max-height:480px;visibility:visible;transition:max-height .25s ease}
.bh-mnav a{display:flex;align-items:center;min-height:46px;padding:0 12px;color:#fff;text-decoration:none;
  font-family:var(--bh-head);font-weight:700;border-bottom:1px solid rgba(255,255,255,.12)}
.bh-mnav a[aria-current="page"]{color:var(--bh-yellow)}
.bh-mnav .bh-btn{margin-top:12px;justify-content:center;border-bottom:0}
@media (min-width:900px){
  .bh-nav{display:flex}
  .bh-hdr .bh-hdr-cta{display:inline-flex}
  .bh-burger,.bh-mnav{display:none}
}

/* ---------- buttons (only yellow or WhatsApp green) ---------- */
.bh-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;
  border-radius:999px;font-family:var(--bh-head);font-weight:800;font-size:1rem;text-decoration:none;
  border:0;cursor:pointer;background:var(--bh-yellow)!important;color:var(--bh-yellow-ink)!important;
  box-shadow:0 2px 0 #C9A800}
.bh-btn:hover{filter:brightness(1.04);transform:translateY(-1px)}
.bh-btn-wa{background:var(--bh-wa)!important;color:var(--bh-wa-ink)!important;box-shadow:0 2px 0 #169C48}
.bh-btn-wide{width:100%}
.bh-btn-lg{min-height:54px;font-size:1.08rem;padding:0 30px}

/* ---------- breadcrumb ---------- */
.bh-crumb{font-size:.9rem;color:var(--bh-dim);margin:18px 0 10px}
.bh-crumb ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.bh-crumb li+li::before{content:"\2666";color:var(--bh-red);font-size:.7em;margin-right:6px}
.bh-crumb a{color:var(--bh-dim)}

/* ---------- WhatsApp float ---------- */
.bh-wa{position:fixed;right:18px;bottom:18px;width:60px;height:60px;border-radius:50%;background:var(--bh-wa);
  display:flex;align-items:center;justify-content:center;z-index:120;box-shadow:0 6px 18px rgba(0,0,0,.25);
  animation:bh-pulse 2.2s infinite}
.bh-wa svg{width:34px;height:34px;fill:#fff}
@keyframes bh-pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@media (prefers-reduced-motion:reduce){.bh-wa{animation:none}}

/* ---------- FAQ ---------- */
.bh-faq details{border:1px solid var(--bh-line);border-radius:var(--bh-radius);margin:0 0 10px;background:#fff}
.bh-faq summary{cursor:pointer;padding:14px 18px;font-family:var(--bh-head);font-weight:700;list-style:none;
  display:flex;justify-content:space-between;gap:12px;min-height:48px;align-items:center}
.bh-faq summary::-webkit-details-marker{display:none}
.bh-faq summary::after{content:"+";color:var(--bh-green);font-size:1.4rem;font-weight:800;flex:0 0 auto}
.bh-faq details[open] summary::after{content:"\2013"}
.bh-faq details p{padding:0 18px 16px;margin:0}

/* ---------- SEO brief box ---------- */
.bh-brief{max-height:260px;overflow-y:auto;border:1px solid var(--bh-line);border-left:3px solid var(--bh-red);
  border-radius:var(--bh-radius);padding:18px 20px;margin:26px 0;font-size:.95rem;background:#fff}
.bh-brief h2{font-size:1.15rem;margin-bottom:.6em}
.bh-brief h3{font-size:1rem;margin:.9em 0 .35em}
.bh-brief p{margin:0 0 .75em}
.bh-brief ul,.bh-brief ol{margin:0 0 .75em;padding-left:1.2em}
.bh-brief li{margin:.15em 0}
.bh-brief dl{margin:0 0 .75em}
.bh-brief dt{font-weight:700;font-family:var(--bh-head);margin-top:.5em}
.bh-brief dd{margin:0 0 .3em 1em}
.bh-brief table{font-size:.92rem}
.bh-brief th,.bh-brief td{padding:.4em .55em}
.bh-brief .bh-kv{display:grid;grid-template-columns:minmax(120px,38%) 1fr;gap:4px 14px;margin:0 0 .75em}
.bh-brief .bh-kv b{font-family:var(--bh-head)}
.bh-brief .bh-qa p{margin:0 0 .5em}
.bh-brief .bh-qa b{display:block;font-family:var(--bh-head);margin-top:.6em}
.bh-brief .bh-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.bh-brief .bh-two{grid-template-columns:1fr}}

/* ---------- People also search for chips ---------- */
.bh-pasf{margin:22px 0 34px}
.bh-pasf h2{font-size:1.1rem;color:var(--bh-dim);margin-bottom:.6em}
.bh-pasf ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.bh-pasf li{margin:0}
.bh-pasf a,.bh-pasf span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--bh-line);
  border-radius:999px;background:var(--bh-band);color:var(--bh-ink);text-decoration:none;font-size:.92rem}
.bh-pasf a:hover{border-color:var(--bh-green);color:var(--bh-green-deep)}

/* ---------- footer ---------- */
.bh-ftr{background:var(--bh-green-deep);color:#E4F2E8;margin-top:30px;border-top:4px solid var(--bh-yellow)}
.bh-ftr-in{max-width:var(--bh-wrap);margin:0 auto;padding:40px 20px 28px}
.bh-ftr-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:28px 22px}
@media (max-width:900px){.bh-ftr-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.bh-ftr-grid{grid-template-columns:1fr}}
.bh-ftr h2{color:#fff;font-size:.95rem;text-transform:uppercase;letter-spacing:.08em;margin:0 0 .8em}
.bh-ftr ul{list-style:none;padding:0;margin:0}
.bh-ftr ul li{margin:0}
.bh-ftr ul a{display:inline-flex;align-items:center;min-height:44px;color:#E4F2E8;text-decoration:none;padding:0 2px}
.bh-ftr ul a:hover{color:var(--bh-yellow)}
.bh-ftr-logo img{display:block;height:40px;width:auto;margin-bottom:12px}
.bh-ftr-blurb{font-size:.92rem;color:#C7DCCD;margin:0 0 14px}
.bh-social{display:flex;gap:10px;margin:0 0 14px}
.bh-social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;
  background:rgba(255,255,255,.1)}
.bh-social a:hover{background:rgba(255,255,255,.2)}
.bh-social svg{width:24px;height:24px;fill:#fff}
.bh-tp{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:8px;
  background:#fff;color:#191919;text-decoration:none;font-family:var(--bh-head);font-weight:700;font-size:.88rem}
.bh-tp svg{width:20px;height:20px;fill:#00B67A}
.bh-ftr-bot{border-top:1px solid rgba(255,255,255,.15);margin-top:28px;padding-top:16px;font-size:.85rem;color:#C7DCCD;
  display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
.bh-ftr-bot p{margin:0}

/* =====================================================================
   CARD STYLES — page agents pick one per page. Fields are plain <a>.
   ===================================================================== */
.bh-field{display:flex;align-items:center;min-height:48px;padding:0 14px;border:1px solid var(--bh-line);border-radius:9px;
  background:#fff;color:var(--bh-dim);text-decoration:none;font-size:.98rem;margin:0 0 12px}
.bh-field:hover{border-color:var(--bh-green);color:var(--bh-ink)}
.bh-field small{margin-left:auto;font-size:.78rem;color:var(--bh-green);font-family:var(--bh-head);font-weight:700}
.bh-label{display:block;font-family:var(--bh-head);font-weight:700;font-size:.85rem;color:var(--bh-dim);margin:0 0 5px}
.bh-cardnote{font-size:.85rem;color:var(--bh-dim);text-align:center;margin:12px 0 0}

/* 1. classic white centred card with green top band (home) */
.bh-card-classic{max-width:460px;margin:30px auto;background:#fff;border:1px solid var(--bh-line);border-radius:var(--bh-radius);
  box-shadow:0 10px 30px rgba(16,36,26,.08);overflow:hidden}
.bh-card-classic .bh-cardhead{background:var(--bh-green);color:#fff;padding:14px 22px;font-family:var(--bh-head);font-weight:800;
  font-size:1.1rem;display:flex;align-items:center;justify-content:space-between}
.bh-card-classic .bh-cardhead em{font-style:normal;font-size:.75rem;background:var(--bh-yellow);color:var(--bh-yellow-ink);
  padding:3px 9px;border-radius:999px}
.bh-card-classic .bh-cardbody{padding:22px 22px 20px}

/* 2. deep-green glass card with yellow top border */
.bh-card-glass{max-width:480px;margin:30px auto;padding:24px;border-radius:var(--bh-radius);border-top:4px solid var(--bh-yellow);
  background:linear-gradient(160deg,#17602A,#0F4A1F);color:#fff;box-shadow:0 12px 34px rgba(16,36,26,.25)}
.bh-card-glass .bh-label{color:#D3E9D9}
.bh-card-glass .bh-field{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#F1FAF3}
.bh-card-glass .bh-field small{color:var(--bh-yellow)}
.bh-card-glass .bh-cardnote{color:#D3E9D9}

/* 3. phone frame with notch */
.bh-card-phone{width:320px;max-width:100%;margin:30px auto;border:10px solid var(--bh-ink);border-radius:34px;background:#fff;
  padding:40px 16px 22px;position:relative;box-shadow:0 14px 34px rgba(16,36,26,.2)}
.bh-card-phone::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:120px;height:24px;
  background:var(--bh-ink);border-radius:0 0 14px 14px}
.bh-card-phone .bh-field{min-height:46px}

/* 4. split two-tone card */
.bh-card-split{display:grid;grid-template-columns:1fr 1fr;max-width:760px;margin:30px auto;border-radius:var(--bh-radius);
  overflow:hidden;border:1px solid var(--bh-line);box-shadow:0 10px 30px rgba(16,36,26,.1)}
.bh-card-split .bh-splitleft{background:var(--bh-green);color:#fff;padding:26px}
.bh-card-split .bh-splitleft h2,.bh-card-split .bh-splitleft h3{color:#fff}
.bh-card-split .bh-splitleft ul{list-style:none;padding:0;margin:0}
.bh-card-split .bh-splitleft li{padding-left:1.4em;position:relative;margin:.4em 0}
.bh-card-split .bh-splitleft li::before{content:"\2660";position:absolute;left:0;color:var(--bh-yellow)}
.bh-card-split .bh-splitright{background:#fff;padding:26px}
@media (max-width:640px){.bh-card-split{grid-template-columns:1fr}}

/* 5. dashed practice-mode card with corner ribbon */
.bh-card-practice{max-width:460px;margin:30px auto;border:2px dashed var(--bh-green);border-radius:var(--bh-radius);
  background:#fff;padding:26px 22px 20px;position:relative;overflow:hidden}
.bh-card-practice .bh-ribbon{position:absolute;top:18px;right:-38px;transform:rotate(38deg);background:var(--bh-red);color:#fff;
  font-family:var(--bh-head);font-weight:800;font-size:.72rem;letter-spacing:.1em;padding:5px 46px}
.bh-card-practice .bh-balance{display:flex;justify-content:space-between;background:var(--bh-band);border-radius:9px;
  padding:10px 14px;margin:0 0 14px;font-family:var(--bh-head);font-weight:700}

/* 6. stepper card with progress bar */
.bh-card-stepper{max-width:480px;margin:30px auto;background:#fff;border:1px solid var(--bh-line);border-radius:var(--bh-radius);
  padding:20px 22px 22px;box-shadow:0 10px 30px rgba(16,36,26,.08)}
.bh-card-stepper .bh-steps{display:flex;gap:6px;margin:0 0 6px;padding:0;list-style:none}
.bh-card-stepper .bh-steps li{flex:1;height:6px;border-radius:3px;background:var(--bh-line)}
.bh-card-stepper .bh-steps li.on{background:var(--bh-green)}
.bh-card-stepper .bh-stepnote{font-size:.82rem;color:var(--bh-dim);font-family:var(--bh-head);font-weight:700;margin:0 0 16px}

/* 7. tabbed Login | Register card */
.bh-card-tabs{max-width:460px;margin:30px auto;background:#fff;border:1px solid var(--bh-line);border-radius:var(--bh-radius);overflow:hidden;
  box-shadow:0 10px 30px rgba(16,36,26,.08)}
.bh-card-tabs .bh-tabrow{display:flex}
.bh-card-tabs .bh-tabrow a{flex:1;display:flex;align-items:center;justify-content:center;min-height:48px;text-decoration:none;
  font-family:var(--bh-head);font-weight:800;color:var(--bh-dim);background:var(--bh-band);border-bottom:3px solid transparent}
.bh-card-tabs .bh-tabrow a.on{background:#fff;color:var(--bh-ink);border-bottom-color:var(--bh-yellow)}
.bh-card-tabs .bh-tabbody{padding:22px}

/* 8. address-bar mock */
.bh-card-addr{max-width:560px;margin:30px auto;border:1px solid var(--bh-line);border-radius:var(--bh-radius);overflow:hidden;
  box-shadow:0 10px 30px rgba(16,36,26,.08);background:#fff}
.bh-card-addr .bh-addrbar{display:flex;align-items:center;gap:10px;background:var(--bh-band);padding:10px 14px;border-bottom:1px solid var(--bh-line)}
.bh-card-addr .bh-dots{display:flex;gap:5px}
.bh-card-addr .bh-dots i{width:10px;height:10px;border-radius:50%;background:var(--bh-line);display:block}
.bh-card-addr .bh-dots i:first-child{background:var(--bh-red)}
.bh-card-addr .bh-url{flex:1;background:#fff;border:1px solid var(--bh-line);border-radius:999px;padding:6px 14px;font-size:.9rem;
  font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--bh-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bh-card-addr .bh-url::before{content:"\1F512";margin-right:6px;font-size:.8em}
.bh-card-addr .bh-addrbody{padding:22px}

/* content banner */
.bh-photo{margin:26px 0;max-width:860px;width:100%;border-left:4px solid var(--bh-red);padding-left:12px}.bh-photo img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--bh-line)}.bh-photo figcaption{margin-top:8px;font-size:.84rem;color:var(--bh-dim)}