/* ==========================================================================
   HomeEqual — component repairs
   Shared by every static marketing page in public/*.html.

   Why this file exists
   --------------------
   theme-light.css owns light mode. This file is for components the design
   export ships broken in BOTH themes, so the fix cannot live behind a
   [data-theme] prefix. Keep it that way: anything light-specific belongs in
   theme-light.css.

   Cascade note
   ------------
   Each page's <style> is injected into <head> by the dc-runtime AFTER these
   files load, so equal-specificity rules there would win. Selectors are
   written `html:root …` to out-rank both the page's own rules and the generic
   range styling. This file is linked after theme-light.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Equity terminal (index)
   The page's other instrument — the coverage matrix — has a plotted grid, a
   scan sweep and a live indicator. This one had none of it: a flat black
   rectangle with two hairline sliders whose square handles sat pinned at the
   left with no fill behind them, so the controls read as broken rather than
   set. Same instrument treatment, and the sliders get a real filled range.

   WebKit has no track-fill pseudo-element, so the fill is painted by a wide
   box-shadow on the thumb, clipped by overflow:hidden on the input — it
   follows the value with no JS. Firefox uses ::-moz-range-progress natively.
   -------------------------------------------------------------------------- */
html:root .equity-terminal {
  position: relative;
  overflow: hidden;
  /* split, not the shorthand: the shorthand resets background-color to
     transparent, which leaves the card with no opaque base under the gradient */
  background-color: #05080D !important;
  background-image: linear-gradient(150deg, #08131C, #05080D 55%, #061520) !important;
  border-color: rgba(127, 211, 238, .22) !important;
}
/* plotted grid, fading out toward the bottom */
html:root .equity-terminal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(127, 211, 238, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127, 211, 238, .05) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 88%);
  mask-image: linear-gradient(to bottom, black, transparent 88%);
}
/* No scan sweep on either instrument. The export animates one down the coverage
   matrix (`.coverage-terminal::after`, keyframes still in the page); it is
   switched off here rather than deleted from index.html so a re-export cannot
   bring it back. The equity terminal deliberately never got one. */
html:root .coverage-terminal::after {
  content: none;
  display: none;
  animation: none;
}
html:root .equity-terminal-head,
html:root .equity-terminal-body {
  position: relative;
  z-index: 1;
}
html:root .equity-terminal-head > span:last-child {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
html:root .equity-terminal-head > span:last-child::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--green);
  box-shadow: 0 0 14px rgba(65, 224, 167, .85);
}
html:root .equity-terminal-output {
  letter-spacing: -.03em !important;
  text-shadow: 0 0 34px rgba(59, 193, 232, .35);
}
html:root .equity-detail-row span:last-child {
  font-variant-numeric: tabular-nums;
}
/* the CTA's style-hover is stripped by the runtime without being implemented,
   like the other 73 on the site — give it a real one */
html:root .equity-terminal-body > a[href="/heloc"] {
  transition: background .2s ease, transform .25s ease, box-shadow .25s ease;
}
html:root .equity-terminal-body > a[href="/heloc"]:hover,
html:root .equity-terminal-body > a[href="/heloc"]:focus-visible {
  background: var(--accent-hov) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -14px rgba(59, 193, 232, .7);
}

/* sliders */
html:root input.equity-range {
  overflow: hidden;
  border-radius: 999px;
}
/* the 44px height below 561px is the touch target — leave it alone */
@media (min-width: 561px) {
  html:root input.equity-range { height: 16px; }
}
html:root input.equity-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(237, 242, 247, .14);
}
html:root input.equity-range::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid #06121A;
  box-shadow: -1000px 0 0 990px rgba(59, 193, 232, .42);
}
html:root input.equity-range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(237, 242, 247, .16);
}
html:root input.equity-range::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
}
html:root input.equity-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid #06121A;
  background: var(--accent);
}

/* ==========================================================================
   Hero live card · proof strip · type rebalance
   ==========================================================================
   Three fixes to the same complaint: against a serious fintech reference the
   fold read flat and defensive. Everything here applies to BOTH themes —
   theme-light.css only recolours what these rules lay out.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 — Hero live card
   The page had no element on a raised layer. Every reference site in this
   category floats one object over the hero art; it is the cheapest depth cue
   there is, and it doubles as the low-commitment entry point for someone not
   ready to click "GET PRE-APPROVED". Target is #equity, an estimator already
   on this page that carries its own "not an application, approval, or offer of
   credit" note — so the card promises an interaction, never a number.
   -------------------------------------------------------------------------- */
.hero-live-card {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 34px;
  padding: 13px 16px 13px 14px;
  max-width: 460px;
  border-radius: 4px;
  text-decoration: none;
  background: rgba(9, 17, 28, .58);
  border: 1px solid rgba(237, 242, 247, .16);
  backdrop-filter: saturate(1.4) blur(16px);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .07) inset,
    0 18px 44px -22px rgba(0, 0, 0, .85);
  transition: transform .22s cubic-bezier(.16, 1, .3, 1), border-color .22s ease, box-shadow .22s ease;
}
.hero-live-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb), .5);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .09) inset,
    0 24px 54px -22px rgba(0, 0, 0, .9);
}
.hero-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 5px 9px;
  border-radius: 2px;
  background: rgba(var(--accent-rgb), .16);
  color: var(--accent);
  font-family: 'Spline Sans Mono', monospace;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .18em;
}
.hero-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .65);
  animation: he-live-pulse 2.4s ease-out infinite;
}
@keyframes he-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .6); }
  70%  { box-shadow: 0 0 0 7px rgba(var(--accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-live-dot { animation: none; }
  .hero-live-card { transition: none; }
}
.hero-live-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.hero-live-copy strong {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: #EDF2F7;
}
.hero-live-copy span {
  font-family: 'Spline Sans Mono', monospace;
  font-size: 10px;
  letter-spacing: .07em;
  color: rgba(237, 242, 247, .62);
}
.hero-live-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--accent);
  color: #04121A;
}

/* --------------------------------------------------------------------------
   2 — Proof strip
   The fold used to end on the liability disclosure. It still appears, directly
   below — but the last thing read before it is now what the firm is licensed
   to do. Every item restates a fact already established elsewhere on this page
   (disclosure line, hero kicker, stat 01, footer, language switcher); nothing
   here is a new claim.
   -------------------------------------------------------------------------- */
.hero-proof-wrap {
  border-bottom: 1px solid rgba(var(--ink-rgb), .08);
  background: var(--panel);
}
.hero-proof {
  max-width: 1560px;
  margin: 0 auto;
  padding: 15px 72px;
  display: flex;
  align-items: center;
  gap: 12px 26px;
  flex-wrap: wrap;
  font-family: 'Spline Sans Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .15em;
}
.hero-proof-lead {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--accent);
  font-weight: 500;
}
.hero-proof-lead::before {
  content: '';
  width: 22px;
  height: 1px;
  background: currentColor;
}
.hero-proof-item {
  position: relative;
  color: rgba(var(--ink-rgb), .74);
  white-space: nowrap;
}
.hero-proof-item + .hero-proof-item::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 50%;
  width: 3px;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 50%;
  background: rgba(var(--ink-rgb), .26);
}

/* --------------------------------------------------------------------------
   3 — Type rebalance
   104 of the 106 font-family declarations on this page were monospace. With no
   family contrast the hierarchy had only size to work with, and tracked mono at
   button and headline sizes reads terminal, not lender. Mono keeps the work it
   is genuinely good at — small tracked labels, the kicker, the disclosure — and
   hands back the two places it was hurting: interactive controls and the big
   figures. `!important` because every one of these is an inline style.
   -------------------------------------------------------------------------- */
.hero-actions a,
header nav a,
header a[href="/apply"],
.hero-proof-wrap ~ div [data-mq="g2"] > div > div:first-child {
  font-family: 'Instrument Sans', sans-serif !important;
}
.hero-actions a {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
}
/* Stat figures: display sans, but keep tabular numerals so the row still
   aligns column-to-column. */
.hero-proof-wrap ~ div [data-mq="g2"] > div > div:first-child {
  font-weight: 600 !important;
  letter-spacing: -.025em !important;
  font-variant-numeric: tabular-nums;
}

/* Mobile: the hero stacks and .hero-actions becomes a 1-col grid, so the card
   goes full-width and its copy wraps to two lines — pin the badge to the top
   of that block instead of letting it float against the taller text. */
@media (max-width: 860px) {
  .hero-live-card {
    display: flex;
    align-items: flex-start;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
    margin-top: 22px;
  }
  .hero-live-go { align-self: center; }
  .hero-proof { padding: 14px 16px; gap: 10px 18px; font-size: 9.5px; }
  .hero-proof-item + .hero-proof-item::before { left: -10px; }
}

/* --------------------------------------------------------------------------
   4 — Concierge dock exclusion zone
   .concierge-dock is position:fixed bottom-right, z-index 70, and 171px wide
   because it carries a label rather than being an icon bubble. Nothing on the
   page reserved space for it, so it sat on top of live controls:

     · عربي / HT / TL — three of the six language buttons in the disclosure
       strip. The switcher is how a non-English reader changes the page, and
       half of it was unclickable.
     · Licensing and Privacy in the footer, which had padding-bottom:0.

   Only the footer case is actually broken, and the distinction matters:

     A fixed dock passes over EVERY mid-document control at some scroll offset
     — a sweep at three widths caught the language chips, "REVIEW HELOC
     DETAILS", "About", a form input. All of those are recoverable by scrolling
     a few pixels, which is true of any page with a fixed dock and is not worth
     contorting a layout over. (An earlier pass here reserved a 206px gutter
     beside the language switcher; that was over-fitting a transient overlap
     and has been removed.)

     The footer is the one place where scrolling cannot save you. At the bottom
     of the document there is nothing left to scroll, so Licensing and Privacy
     were permanently unreachable — with padding-bottom:0 under a dock that is
     26px off the bottom edge and 42px tall.

   The 480x356 "Multilingual by design" card also loses a corner; it stays
   clickable across the rest of its area and is left alone.
   -------------------------------------------------------------------------- */

/* Dock is bottom:26px + ~42px tall. 104px clears it with room to breathe.
   Verified against footer links at 1440 / 1280 / 390px scrolled fully down. */
footer {
  padding-bottom: 104px !important;
}
