/* ============================================================================
   Metallic gold treatment for Lease IQ.

   The old palette read yellow for two reasons:
     --gold  #D6A92E  hue 44, high lightness
     --gold2 #E9C766  hue 45, VERY high lightness  <- the real culprit; this is
                      the colour on "director.", the hero metrics and the pills
   Flat fills can never look like metal. Real gold reads metallic because light
   runs across it: pale highlight -> core -> shadow -> bounce. Below, the large
   type and the primary buttons carry that ramp as a gradient; everything small
   falls back to a deepened flat gold, because gradients mush at small sizes.
   ========================================================================== */

:root{
  /* deepened flats — hue pulled from 44-45 down to ~40, lightness cut */
  --gold:  #B8912F;          /* core gold — borders, small caps, step numbers */
  --gold2: #D4AF37;          /* classic metallic gold — replaces pale #E9C766 */
  --goldsoft: rgba(184,145,47,.12);
  --gold-hi: #F2E3A6;        /* specular highlight */
  --gold-sh: #7E5F16;        /* shadow */
}

/* ---- ONE gold. The "Book a demo" button ramp is the brand gold; gold text
   uses the identical stops so nothing on the page reads as a second gold. ---- */
.gold,
h1 .gold,
h2 .gold,
.metal{
  /* wider highlight-to-shadow range = more metallic depth */
  background:linear-gradient(180deg,#F0DB93 0%,#DDBB4E 34%,#C9A431 68%,#B8912F 100%);
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  /* a faint warm glow sells the reflectivity without washing the type out */
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.35)) drop-shadow(0 0 18px rgba(212,175,55,.20));
}

/* ---- primary button: brushed-gold fill with a top specular edge ----
   Applies on EVERY page, including the main site where "Book a demo" was blue.
   Gold is the brand CTA colour; blue was competing with it. ---- */
.btn.p,
a.btn.p,
.hero .btn.p,
.ctaband .btn.p{
  background:linear-gradient(180deg,#F5E7B0 0%,#D9B644 24%,#B8912F 55%,#8A6A1C 80%,#6E5212 100%);
  color:#16203a;
  border:1px solid rgba(255,240,190,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,248,220,.62),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 6px 22px rgba(184,145,47,.30);
  text-shadow:0 1px 0 rgba(255,245,205,.35);
}
.btn.p:hover,
a.btn.p:hover{
  background:linear-gradient(180deg,#FBF0C4 0%,#E4C255 24%,#C39B32 55%,#9A7620 80%,#7E5F16 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,250,230,.7),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 10px 28px rgba(184,145,47,.40);
  transform:translateY(-1px);
}

/* ---- ghost button: gold edge, no yellow wash ---- */
.btn.g{ border-color:rgba(184,145,47,.5); color:var(--gold2) }
.btn.g:hover{ background:var(--goldsoft); border-color:var(--gold2) }

/* ---- small type stays FLAT — gradients turn to mud under ~18px ----
   SCOPED to Lease IQ. This sheet loads on every page, so an unscoped rule
   here turned every eyebrow and step number on the main site gold —
   "// Capabilities", "01 / INGEST", "02 / DELIBERATE". Those belong to the
   green-blue accent, not to gold. */
body[data-brand="leaseiq"] .eyebrow,
body[data-brand="leaseiq"] .step .n,
body[data-brand="leaseiq"] .chk,
body[data-brand="leaseiq"] .pill{ color:var(--gold2) }

/* hero metrics and stat values are large enough to take the ramp — same stops */
.hero-meta b,
.v.gold{
  background:linear-gradient(180deg,#F0DB93 0%,#DDBB4E 34%,#C9A431 68%,#B8912F 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.3));
}

/* ---- hairline rules read as polished edge, not flat paint ---- */
.pill,
.chk{ border-color:rgba(212,175,55,.42) }

/* ---- vault dot field ----------------------------------------------------
   The dotted backdrop now sits behind EVERY page, not just the homepage hero.
   Fixed + behind all content, masked toward the edges so it reads as texture
   on the navy rather than a visible grid. ---- */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(170,198,255,.16) 1.3px, transparent 2px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(130% 100% at 50% 30%, #000 55%, transparent 100%);
          mask-image:radial-gradient(130% 100% at 50% 30%, #000 55%, transparent 100%);
}
/* keep real content above the dot field */
body > *{ position:relative; z-index:1 }

/* Windows high-contrast / forced-colors: drop the gradients so text stays visible */
@media (forced-colors: active){
  .gold,h1 .gold,h2 .gold,.metal,.hero-meta b,.v.gold{
    background:none;color:GoldenRod;-webkit-text-fill-color:GoldenRod;filter:none}
}

/* ---- body copy face -------------------------------------------------------
   Set on <body> so ALL running text inherits it. Elements that declare their
   own family are untouched: headings stay Sora, .mono stays JetBrains Mono,
   .orb stays Orbitron, .redef-txt stays Kalam.

   This lives here rather than in site.css because Pricing, Industries and
   Enterprise load their inline <style> AFTER site.css — so a rule there loses
   to their own declarations. metallic-gold.css is the last sheet on every
   page, which is the only place a sitewide body face reliably wins. ---- */
body{
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}