/* ============================================================
   HBIMS-NAF&SA — Universal Footer · "Evening Watch"
   Ledger & Horizon system · dark ground bookend to the header
   Reuses header button system (.hb-btn / -gold / -primary / -bronze)
   Preserved hooks: <footer> element (fix-link), .footer-apply-btn,
   .tooltip / .tooltip__item
   ============================================================ */

:root{
  --hb-cream:#FCF7EA; --hb-white:#FFFFFF; --hb-editorial:#F5EAD8;
  --hb-ink:#1D161C; --hb-body:#2D2926; --hb-muted:#543C2C;
  --hb-bronze:#6E5327; --hb-gold:#E2B15D; --hb-gold-hi:#EBB93F;
  --hb-gold-dot:#F3D58C; --hb-burg:#7B2D26; --hb-green:#2C6A47;
  --hb-border:#ECD093;
  --hb-burg-hi:color-mix(in srgb,var(--hb-burg) 86%,#FFFFFF);
  --hb-burg-lo:color-mix(in srgb,var(--hb-burg) 82%,#000000);
  --hb-gold-lo:color-mix(in srgb,var(--hb-gold) 84%,#000000);
  --hb-display:'Sora','Sora Fallback',ui-sans-serif,system-ui,sans-serif;
  --hb-text:'Inter','Inter Fallback',ui-sans-serif,system-ui,sans-serif;
  --hb-max:1520px; --hb-pad:clamp(16px,2.5vw,32px);
  --ft-hair:rgba(236,208,147,.18);
  --ft-cream-hi:rgba(252,247,234,.92);
  --ft-cream:rgba(252,247,234,.8);
  --ft-cream-lo:rgba(252,247,234,.62);
  --ft-cream-dim:rgba(252,247,234,.5);
}

/* ---------- ground ---------- */
.hb-ft{position:relative;overflow:hidden;color:var(--ft-cream);
  font-family:var(--hb-text);
  background:linear-gradient(180deg,#271D23 0%,#1D161C 44%,#15100F 100%)}
.hb-ft::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,rgba(226,177,93,0) 0%,var(--hb-gold) 14%,var(--hb-gold) 86%,rgba(226,177,93,0) 100%)}
.hb-ft *,.hb-ft *::before,.hb-ft *::after{box-sizing:border-box;margin:0;padding:0}
.hb-ft svg{display:block;flex:none}
.hb-ft-wrap{position:relative;max-width:var(--hb-max);margin:0 auto;padding:0 var(--hb-pad)}
.hb-ft-mark{position:absolute;right:-80px;top:110px;width:360px;height:360px;
  opacity:.05;pointer-events:none}
.hb-ft-mark svg{width:100%;height:100%;stroke:var(--hb-cream)}

/* ============================================================
   Z1 · LEAD BAND — the three lead sources, in sequence
   ============================================================ */
.hb-ft-lead{display:flex;align-items:center;justify-content:space-between;gap:22px;
  flex-wrap:wrap;padding:30px 0 26px;border-bottom:1px solid var(--ft-hair)}
.hb-ft-kicker{font:700 10.5px/1 var(--hb-text);letter-spacing:.18em;
  text-transform:uppercase;color:var(--hb-gold)}
.hb-ft-lead-title{font:700 clamp(20px,2.3vw,26px)/1.25 var(--hb-display);
  color:var(--ft-cream-hi);margin-top:8px}
.hb-ft-ctas{display:flex;gap:10px;flex-wrap:wrap}
.hb-ft .hb-btn{display:inline-flex;height:46px;font-size:14px;padding:0 18px;gap:9px}
.hb-ft .hb-btn .hb-coin{width:26px;height:26px}
.hb-ft .hb-btn .hb-coin svg{width:15px;height:15px}

/* ============================================================
   Z2 · MAIN GRID — brand column + categorical sitemap
   ============================================================ */
.hb-ft-grid{display:grid;grid-template-columns:minmax(270px,1.15fr) 2.9fr;gap:44px;
  padding:36px 0 32px;align-items:start}

/* ---- brand column ---- */
.hb-ft-id{display:flex;align-items:center;gap:13px;text-decoration:none}
.hb-ft-seal{position:relative;width:56px;height:56px;flex:none;border-radius:50%;
  background:#fff;display:grid;place-items:center;
  box-shadow:0 0 0 3px rgba(226,177,93,.85),0 0 0 8px rgba(226,177,93,.18),
    0 16px 30px -14px rgba(0,0,0,.85)}
.hb-ft-seal img{width:49px;height:49px;border-radius:50%}
.hb-ft-name{font:700 19px/1.15 var(--hb-display);color:var(--ft-cream-hi);
  letter-spacing:.01em;display:flex;gap:2px}
.hb-ft-name .tm{font:700 9.5px/1 var(--hb-text);color:var(--hb-gold);margin-top:2px}
.hb-ft-tagline{display:block;font:500 11.5px/1.35 var(--hb-text);
  color:var(--ft-cream-lo);letter-spacing:.02em;margin-top:4px}
.hb-ft-about{font:500 13.5px/1.66 var(--hb-text);color:var(--ft-cream);
  margin:15px 0 0;max-width:44ch}
















/* ---- link columns ---- */
.hb-ft-cols{display:grid;grid-template-columns:repeat(4,1fr);
  gap:26px 20px;align-content:start}
.hb-ft-h{display:flex;align-items:center;gap:9px;margin-bottom:13px;
  font:700 11px/1 var(--hb-text);letter-spacing:.15em;text-transform:uppercase;
  color:var(--hb-gold)}
.hb-ft-hic{width:25px;height:25px;flex:none;border-radius:8px;display:grid;place-items:center;
  background:linear-gradient(180deg,#8A6A38 0%,var(--hb-bronze) 58%,#4A3714 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.45),
    0 6px 12px -6px rgba(0,0,0,.7)}
.hb-ft-hic svg{width:14px;height:14px;color:var(--hb-gold-dot)}
.hb-ft-col a{position:relative;display:flex;align-items:center;gap:9px;
  padding:5px 0 5px 2px;font:500 13.5px/1.4 var(--hb-text);
  color:var(--ft-cream);text-decoration:none;transition:color .15s ease}
.hb-ft-col a::before{content:"";width:5px;height:5px;flex:none;
  border-top:1.7px solid var(--hb-gold);border-right:1.7px solid var(--hb-gold);
  transform:rotate(45deg);opacity:.65;transition:transform .18s ease,opacity .15s ease}
.hb-ft-col a:hover{color:var(--hb-gold-dot)}
.hb-ft-col a:hover::before{transform:rotate(45deg) translate(2px,-2px);opacity:1}
.hb-ft-badge{margin-left:6px;font:700 8.5px/1 var(--hb-text);letter-spacing:.08em;
  color:var(--hb-gold);background:rgba(226,177,93,.14);
  border:1px solid rgba(226,177,93,.4);padding:3px 6px;border-radius:999px}

/* ============================================================
   Z3 · CONNECT — social presence + app
   ============================================================ */
.hb-ft-connect{display:flex;align-items:center;justify-content:space-between;gap:26px;
  flex-wrap:wrap;padding:20px 0;border-top:1px solid var(--ft-hair)}
.hb-ft-lbl{font:700 10.5px/1 var(--hb-text);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ft-cream-lo);margin-bottom:11px}
.hb-ft-socials{display:flex;gap:10px;flex-wrap:wrap}
.hb-ft-soc{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  color:#fff;text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 0 rgba(0,0,0,.32),
    0 10px 18px -9px rgba(0,0,0,.75);
  transition:transform .16s ease,box-shadow .16s ease}
.hb-ft-soc:hover{transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -2px 0 rgba(0,0,0,.3),
    0 15px 26px -10px rgba(0,0,0,.8)}
.hb-ft-soc svg{width:20px;height:20px;fill:#fff}
.hb-ft-soc--fb{background:linear-gradient(180deg,#3F92FF 0%,#1877F2 55%,#0E56C4 100%)}
.hb-ft-soc--ig{background:linear-gradient(135deg,#F9A13A 0%,#F55D3E 28%,#DD2A7B 55%,#8134AF 80%,#515BD4 100%)}
.hb-ft-soc--yt{background:linear-gradient(180deg,#FF4A5C 0%,#FF0033 55%,#C20026 100%)}
.hb-ft-soc--wa{background:linear-gradient(180deg,#3DDB70 0%,#25D366 55%,#189B4B 100%)}

.hb-ft-stores{display:flex;gap:10px;flex-wrap:wrap}
.hb-ft-store{display:flex;align-items:center;justify-content:center;gap:10px;height:52px;
  padding:0 18px;border-radius:13px;color:#fff;text-decoration:none;text-align:left;
  transition:transform .16s ease,box-shadow .16s ease}
.hb-ft-store:hover{transform:translateY(-2px)}
.hb-ft-store svg{width:21px;height:21px;fill:#fff}
.hb-ft-store small{display:block;font:600 8.5px/1 var(--hb-text);letter-spacing:.09em;
  text-transform:uppercase;opacity:.8;margin-bottom:3px}
.hb-ft-store b{display:block;font:700 13.5px/1 var(--hb-text)}
.hb-ft-store--play{background:linear-gradient(180deg,#35815B 0%,var(--hb-green) 55%,#224F38 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -2px 0 rgba(0,0,0,.3),
    0 11px 20px -9px rgba(0,0,0,.7)}
.hb-ft-store--ios{
  /* White icon + label, as requested. White on the earlier brass (#E2B15D)
     measured 1.97:1 — an outright accessibility fail — so the fill is
     deepened to the bronze token. White now reads at 7.17:1 (WCAG AA), and
     bronze still separates from the near-black footer at 2.47:1, comparable
     to the green Play badge's 2.75:1. */
  background:linear-gradient(180deg,#8A6A38 0%,var(--hb-bronze,#6E5327) 55%,#4A3714 100%);
  color:#FFFFFF;
  border:1px solid rgba(243,213,140,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -2px 0 rgba(0,0,0,.3),
    0 11px 20px -9px rgba(0,0,0,.7)}
.hb-ft-store--ios svg{fill:#FFFFFF}
.hb-ft-store--ios small{color:#FFFFFF;opacity:.82}
.hb-ft-store--ios strong{color:#FFFFFF}
.hb-ft-store--ios:hover{border-color:rgba(243,213,140,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 0 rgba(0,0,0,.28),
    0 16px 28px -10px rgba(0,0,0,.8)}

/* ============================================================
   Z4 · LEGAL
   ============================================================ */
.hb-ft-legal{border-top:1px solid var(--ft-hair);padding:16px 0 24px}
.hb-ft-legalrow{display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap}
.hb-ft-copy{font:500 12.5px/1.5 var(--hb-text);color:var(--ft-cream-lo)}
.hb-ft-law{display:flex;gap:18px;flex-wrap:wrap}
.hb-ft-law a{display:inline-flex;align-items:center;gap:7px;
  font:600 13px/1 var(--hb-text);color:var(--ft-cream);text-decoration:none;
  transition:color .15s ease}
.hb-ft-law a svg{width:15px;height:15px;color:var(--hb-gold-dot)}
.hb-ft-law a:hover{color:var(--hb-gold-dot)}
.hb-ft-top{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  color:var(--hb-body);cursor:pointer;border:0;text-decoration:none;
  background:linear-gradient(180deg,#EFC97E 0%,var(--hb-gold) 55%,var(--hb-gold-lo) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(110,83,39,.35),
    0 10px 18px -9px rgba(0,0,0,.7);
  transition:transform .16s ease}
.hb-ft-top:hover{transform:translateY(-2px)}
.hb-ft-top svg{width:17px;height:17px}
.hb-ft-note{margin:14px auto 0;max-width:1000px;text-align:center;
  font:500 11.5px/1.75 var(--hb-text);color:var(--ft-cream-dim)}
.hb-ft-note a{color:var(--ft-cream-lo);text-decoration:underline;text-underline-offset:2px}
.hb-ft-note a:hover{color:var(--hb-gold-dot)}

/* ============================================================
   FLOATING ELIGIBILITY FAB (legacy hooks preserved)
   ============================================================ */
.tooltip{position:fixed;right:18px;bottom:18px;z-index:1100}
.footer-apply-btn{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  text-decoration:none;position:relative;padding:0;
  /* Burgundy well with a polished gold rim — the primary-CTA colour, so the
     floating action reads as the same promise as every "Apply Now" button.
     Gold-on-parchment was too low-contrast against the page background. */
  background:radial-gradient(120% 120% at 32% 22%,#9A4038 0%,#7B2D26 42%,#4E1A16 100%);
  box-shadow:
    inset 0 0 0 2.5px rgba(226,177,93,.92),
    inset 0 2px 0 rgba(255,255,255,.22),
    inset 0 -3px 6px rgba(0,0,0,.42),
    0 6px 14px -4px rgba(78,26,22,.55),
    0 18px 34px -12px rgba(78,26,22,.75);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease}
.footer-apply-btn::after{content:"";position:absolute;inset:-5px;border-radius:50%;
  background:radial-gradient(circle,rgba(226,177,93,.42) 0%,rgba(226,177,93,0) 68%);
  opacity:0;transition:opacity .22s ease;pointer-events:none}
.footer-apply-btn img{width:44px;height:44px;display:block;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
.footer-apply-btn:hover{transform:translateY(-3px) scale(1.04);
  box-shadow:
    inset 0 0 0 2.5px rgba(243,213,140,1),
    inset 0 2px 0 rgba(255,255,255,.28),
    inset 0 -3px 6px rgba(0,0,0,.4),
    0 8px 18px -4px rgba(78,26,22,.6),
    0 26px 46px -14px rgba(78,26,22,.85)}
.footer-apply-btn:hover::after{opacity:1}
.footer-apply-btn svg{width:25px;height:25px}
.tooltip__item{position:absolute;right:calc(100% + 12px);top:50%;
  transform:translateY(-50%) translateX(6px);white-space:nowrap;
  background:#FFFDF6;color:var(--hb-ink);font:600 12.5px/1 var(--hb-text);
  padding:9px 13px;border-radius:10px;border:1px solid var(--hb-border);
  box-shadow:0 14px 26px -12px rgba(29,22,28,.5);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility .18s}
.tooltip:hover .tooltip__item,.tooltip:focus-within .tooltip__item{
  opacity:1;visibility:visible;transform:translateY(-50%) translateX(0)}

/* ============================================================
   FOCUS · MOTION · RESPONSIVE
   ============================================================ */
.hb-ft :focus-visible{outline:2px solid var(--hb-gold-dot);outline-offset:2px}
.footer-apply-btn:focus-visible{outline:2px solid var(--hb-burg);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .hb-ft *,.hb-ft *::before,.hb-ft *::after,.tooltip *{
    transition-duration:.01ms!important;animation:none!important}
}

@media (max-width:1140px){
  .hb-ft-grid{grid-template-columns:1fr;gap:30px}
  .hb-ft-cols{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
  .hb-ft-mark{width:260px;height:260px;top:auto;bottom:200px}
}
@media (max-width:760px){
  .hb-ft-mark{display:none}
  /* lead — centred stack */
  .hb-ft-lead{flex-direction:column;align-items:center;text-align:center;gap:16px}
  .hb-ft-ctas{width:100%;display:grid;grid-template-columns:1fr;gap:9px}
  .hb-ft-ctas .hb-btn{width:100%}
  /* brand — centred */
  .hb-ft-brand{text-align:center}
  .hb-ft-id{justify-content:center}
  .hb-ft-about{margin-inline:auto}
  /* links — strict two-up, both halves filled */
  .hb-ft-cols{grid-template-columns:repeat(2,1fr);gap:22px 16px}
  /* connect — centred */
  .hb-ft-connect{flex-direction:column;align-items:center;gap:20px;text-align:center}
  .hb-ft-lbl{margin-bottom:9px}
  .hb-ft-socials{justify-content:center}
  .hb-ft-stores{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .hb-ft-store{width:100%}
  /* legal — centred */
  .hb-ft-legalrow{flex-direction:column;align-items:center;gap:12px}
  .hb-ft-law{justify-content:center}
  .hb-ft-note{text-align:center}
}
@media (max-width:400px){
  .hb-ft-stores{grid-template-columns:1fr}
  .tooltip{right:14px;bottom:14px}
  .footer-apply-btn{width:50px;height:50px}
}
@media print{.tooltip{display:none}}

/* ── policy links relocated beneath the compliance note ──────────────
   The three policy links previously sat in the legal row beside the
   copyright. They now close the footer, directly under the trademark
   and compliance paragraph. */
.hb-ft-law--under{
  display:flex;
  gap:18px 26px;
  flex-wrap:wrap;
  justify-content:center;
  margin:16px auto 0;
  padding-top:16px;
  border-top:1px solid rgba(226,177,93,.22);
  max-width:760px;
}
.hb-ft-law--under a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font:600 12.4px/1 var(--hb-text);
  letter-spacing:.02em;
  text-decoration:none;
}
@media (max-width:560px){
  .hb-ft-law--under{gap:12px 18px;padding-top:14px}
  .hb-ft-law--under a{font-size:11.8px}
}