/* === 42hz.ai — ON.energy-style system port (injected, no bundle edits) ===
   Takes the editorial system from the ON.energy clone — Univers Next Pro,
   weight 300 display type, airy vw spacing, full-bleed 4vw gutters — but
   keeps 42hz GOLD (#FFB320), not ON's yellow. Loads last so it wins.
   To revert: remove the <link> for this file in index.html. */

/* ---- 1. Univers Next Pro (licensed) -------------------------------- */
@font-face{
  font-family:"Univers Next Pro";font-style:normal;font-weight:200;font-display:swap;
  src:url("./fonts/UniversNextPro-Thin.woff2") format("woff2"),
      url("./fonts/UniversNextPro-Thin.woff") format("woff");
}
@font-face{
  font-family:"Univers Next Pro";font-style:normal;font-weight:300;font-display:swap;
  src:url("./fonts/UniversNextPro-Light.woff2") format("woff2"),
      url("./fonts/UniversNextPro-Light.woff") format("woff");
}
@font-face{
  font-family:"Univers Next Pro";font-style:normal;font-weight:400;font-display:swap;
  src:url("./fonts/UniversNextPro-Regular.woff2") format("woff2"),
      url("./fonts/UniversNextPro-Regular.woff") format("woff");
}

/* ---- 2. Tokens ----------------------------------------------------- */
:root{
  --on-gold:#FFB320;
  /* 4vw side gutters, floored on phones, capped on ultrawide so it never
     gets silly. This is the "remove container" + "4vw gutter" ask. */
  --on-gutter:clamp(20px, 4vw, 96px);
  --on-ease:cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- 3. Display typography: Univers Next Pro, thin (300) ----------- */
/* Every heading/eyebrow on the site uses .font-display. Redefining it here
   (class selector + !important, loaded after enhance.css) flips the whole
   site to the thin Univers register in one move. Body copy is untouched. */
.font-display{
  font-family:"Univers Next Pro","Inter",system-ui,-apple-system,sans-serif!important;
  font-weight:300!important;
  letter-spacing:-0.03em;
}
/* Accent words inside a heading take the gold (matches the clone's <em>). */
.font-display em,.font-display .accent{font-style:normal;color:var(--on-gold);}

/* Fluid scaling for the largest display sizes so they breathe on big
   screens and stay readable on phones — clamp(), not raw vw. */
.font-display.lg\:text-\[80px\]{font-size:clamp(2.5rem, 7vw, 5rem)!important;line-height:1.05!important;}
.font-display.lg\:text-\[64px\]{font-size:clamp(2.1rem, 5.6vw, 4rem)!important;line-height:1.08!important;}
.font-display.lg\:text-\[56px\]{font-size:clamp(1.9rem, 4.8vw, 3.5rem)!important;line-height:1.12!important;}

/* ---- 4. De-container + full-bleed 4vw gutters --------------------- */
/* The site's two containers cap at 1200/1280px. Release them to full width
   and replace the fixed px-8 padding with the fluid gutter. Inner blocks
   keep their own max-w-* caps, so text measure stays readable. */
.max-w-\[1200px\],.max-w-\[1280px\]{
  max-width:none!important;
  padding-left:var(--on-gutter)!important;
  padding-right:var(--on-gutter)!important;
}

/* ---- 5. SLD: drop the status legend strip ------------------------- */
/* Removes the Energized / Healthy / Alarm key. Per-node statuses (incl.
   the "DGA Alarm" fault beat on T2) are kept — that's the story. */
.hz-sld-legend{display:none!important;}

/* ---- 6. Body font: Univers everywhere ----------------------------- */
/* The bundle sets body{font-family:Inter}. Point it at Univers so card
   and body text match the headings. Mono labels stay mono on purpose. */
body{
  font-family:"Univers Next Pro","Inter",system-ui,-apple-system,sans-serif!important;
}

/* ---- 7. Injected copy blocks (stakes / pillars / who / trust / cta) */
.hzc-band{
  width:100%;
  padding:7rem var(--on-gutter); /* matches the site's 7rem section rhythm */
  border-top:1px solid rgba(255,255,255,.06);
}
.hzc-inner{max-width:1280px;margin:0 auto;}
.hzc-eyebrow{
  font-family:"JetBrains Mono","SF Mono",monospace;
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--on-gold);opacity:.7;margin:0 0 1.4rem;
}
.hzc-h2{
  font-family:"Univers Next Pro",sans-serif;font-weight:300;
  font-size:clamp(1.9rem, 4.6vw, 3.25rem);line-height:1.1;
  letter-spacing:-0.03em;color:#fff;margin:0 0 1.6rem;max-width:20ch;
}
.hzc-h2 .accent{color:var(--on-gold);}
.hzc-lead{
  font-family:"Univers Next Pro",sans-serif;font-weight:300;
  font-size:clamp(1.15rem, 2.4vw, 1.6rem);line-height:1.5;
  color:rgba(255,255,255,.72);max-width:64ch;margin:0 0 1.2rem;
}
.hzc-lead strong{color:#fff;font-weight:400;}

/* Editorial numbered columns (pillars + who-it's-for). Borderless, hairline
   rule on top, big thin Univers heading, gold mono index — the ON.energy
   register, not boxy cards. */
.hzc-grid{display:grid;gap:0;margin-top:clamp(2.5rem,5vw,4.5rem);}
@media(min-width:880px){
  .hzc-grid.is-3{grid-template-columns:repeat(3,1fr);}
  .hzc-grid.is-2{grid-template-columns:repeat(2,1fr);max-width:60rem;}
}
.hzc-grid.is-num{counter-reset:hzc;}
.hzc-card{
  position:relative;background:none;border:0;border-radius:0;
  border-top:1px solid rgba(255,255,255,.14);
  counter-increment:hzc;
  padding:1.7rem 0 0;
}
@media(min-width:880px){
  .hzc-grid.is-num .hzc-card{padding-right:clamp(1.4rem,2.4vw,2.8rem);}
}
.hzc-grid.is-num .hzc-card::before{
  content:"0" counter(hzc);
  display:block;font-family:"JetBrains Mono","SF Mono",monospace;
  font-size:12px;letter-spacing:.12em;color:var(--on-gold);opacity:.65;
  margin-bottom:1.3rem;
}
.hzc-card .k{
  font-family:"Univers Next Pro",sans-serif;font-weight:300;
  font-size:clamp(1.35rem,2vw,1.75rem);letter-spacing:-0.025em;line-height:1.15;
  color:#fff;margin:0 0 .95rem;transition:color .4s var(--on-ease);
}
.hzc-card .k em{font-style:normal;color:var(--on-gold);}
.hzc-card:hover .k{color:var(--on-gold);}
.hzc-card p{
  font-size:1rem;line-height:1.6;color:rgba(255,255,255,.5);margin:0;max-width:42ch;
}

/* Consistency pass: the injected bundle sections (Return on signal = .hz-calc,
   Why it matters = .hz-tf, the single-line diagram = .hz-sld) hardcode Inter in
   their own CSS. Pull their display headings onto Univers 300 to match. */
.hz-calc h2,.hz-tf h2,.hz-sld h2,.hz-result-hero .big{
  font-family:"Univers Next Pro","Inter",sans-serif!important;
  font-weight:300!important;letter-spacing:-0.03em!important;
}
.hz-calc .hz-calc-sub,.hz-tf-intro,.hz-sld .hz-sld-sub{
  font-family:"Univers Next Pro","Inter",sans-serif!important;font-weight:300!important;
}

/* Width consistency: these injected sections cap at 74rem and center, while
   the bundle sections are full-bleed. Release them to full width with the
   shared 4vw gutter so the layout stops jumping wide -> narrow -> wide. */
.hz-calc,.hz-tf,.hz-sld{
  max-width:none!important;
  padding-left:var(--on-gutter)!important;
  padding-right:var(--on-gutter)!important;
}

/* Trust strip */
.hzc-trust{display:flex;flex-wrap:wrap;gap:1.4rem 2.4rem;align-items:center;}
.hzc-trust span{
  display:flex;align-items:center;gap:.7rem;
  font-size:.95rem;color:rgba(255,255,255,.62);
}
.hzc-trust span::before{
  content:"";width:7px;height:7px;border-radius:2px;background:var(--on-gold);flex:none;
}

/* Closing CTA + buttons */
.hzc-cta{text-align:center;}
.hzc-cta .hzc-h2{margin-inline:auto;max-width:24ch;}
.hzc-cta .hzc-lead{margin:0 auto 2.2rem;text-align:center;}
.hzc-actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:2rem;}
.hzc-btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.95rem 2rem;border-radius:999px;font-size:15px;font-weight:500;
  letter-spacing:-0.01em;cursor:pointer;border:1px solid transparent;
  background:var(--on-gold);color:#050505;text-decoration:none;
  transition:background .3s, border-color .3s, color .3s;
}
.hzc-btn:hover{background:#FF9B2F;}
.hzc-btn.ghost{background:transparent;border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.7);}
.hzc-btn.ghost:hover{border-color:rgba(255,255,255,.3);color:#fff;}

/* reveal */
.hzc-rev{opacity:0;transform:translateY(22px);transition:opacity .8s var(--on-ease), transform .8s var(--on-ease);}
.hzc-rev.in{opacity:1;transform:none;}