/* ============================================================
   Wattvia — brand stylesheet v3
   Navy surfaces · Signal Blue structure · Amber action
   (v2 cream/mono language retired — cool neutrals only)
   ============================================================ */

@font-face {
  font-display: swap;
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 700;
  src: url("/fonts/BricolageGrotesque-700.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 800;
  src: url("/fonts/BricolageGrotesque-800.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/HankenGrotesk-400.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 600;
  src: url("/fonts/HankenGrotesk-600.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 700;
  src: url("/fonts/HankenGrotesk-700.woff2") format("woff2");
}

:root {
  --wv-navy:        #0E1633;   /* surfaces: hero, nav, CTA bands, feature cards */
  --wv-navy-deep:   #0A0F24;   /* footer */

  --wv-primary:     #2954E8;   /* structure: links, eyebrows, data, product buttons */
  --wv-primary-700: #1D3CB0;   /* hover / active */
  --wv-primary-50:  #E3E9FA;   /* tints, focus rings, blue highlight bg */
  --wv-sky:         #2F8FD0;   /* bargain-overnight chart data */
  --wv-periwinkle:  #A8BBEF;   /* always-on chart segments */

  --wv-amber:       #FB7E1E;   /* action: THE conversion CTA, peak bars, logo mark. <=10% of any view */
  --wv-amber-50:    #FDEEDF;   /* amber highlight/callout bg */
  --wv-amber-ink:   #B4600F;   /* text on amber-50 */

  --wv-success:     #177A4C;   --wv-success-50: #E4F4EB;
  --wv-alert:       #C2352B;   --wv-alert-50:   #FDF0EF;

  --wv-panel:       #F5F7FC;   /* tinted section / card panel */
  --wv-white:       #FFFFFF;
  --wv-line:        #ECEFF6;   /* borders, dividers */
  --wv-chart-base:  #DDE5F6;   /* off-peak / neutral bars */

  --wv-ink:         #101733;   /* headings, primary text */
  --wv-ink-soft:    #4A5476;   /* body copy */
  --wv-ink-muted:   #9AA3BF;   /* captions, placeholders */
  --wv-on-navy:     #B9C3E4;   /* body text on navy */
  --wv-on-navy-dim: #8391BE;   /* labels on navy */

  --wv-font-display: 'Bricolage Grotesque', sans-serif;  /* 700-800 */
  --wv-font-body:    'Hanken Grotesk', sans-serif;       /* 400-800; also labels (800 caps) */

  --wv-radius-card:  22px;
  --wv-radius-input: 12px;
  --wv-radius-pill:  100px;
}

/* ---------- Base ---------- */
body.wv {
  margin: 0;
  background: var(--wv-white);
  color: var(--wv-ink);
  font-family: var(--wv-font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.wv h1, .wv h2, .wv h3 {
  font-family: var(--wv-font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 0.5em;
}
.wv h1 { font-size: 56px; letter-spacing: -0.03em; }
.wv h2 { font-size: 38px; }
.wv h3 { font-size: 26px; letter-spacing: -0.02em; }
.wv a  { color: var(--wv-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.wv a:hover { color: var(--wv-primary-700); }

/* Eyebrow label — Hanken 800 caps (Space Mono retired) */
.wv-eyebrow {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wv-primary);
}

/* ---------- Buttons ---------- */
.wv-btn {
  display: inline-block;
  font-family: var(--wv-font-body);
  font-weight: 700;
  font-size: 15px;
  padding: 12px 26px;
  border-radius: var(--wv-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
/* THE conversion action — one per view */
.wv-btn-cta {
  background: var(--wv-amber);
  color: var(--wv-navy);
  font-weight: 800;
  box-shadow: 0 10px 26px -10px rgba(251,126,30,0.5);
}
.wv-btn-cta:hover { filter: brightness(1.05); }
/* Product actions */
.wv-btn-primary   { background: var(--wv-primary); color: #fff; }
.wv-btn-primary:hover { background: var(--wv-primary-700); }
.wv-btn-outline   { background: transparent; color: var(--wv-primary); border: 1.5px solid var(--wv-primary); }
.wv-btn-outline:hover { background: var(--wv-primary-50); }
.wv-btn-ghost-dark{ background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.3); font-weight: 600; } /* navy surfaces */
.wv-btn-ghost-dark:hover { background: rgba(255,255,255,0.08); }
.wv-btn-link      { background: transparent; color: var(--wv-primary); text-decoration: underline; text-underline-offset: 4px; padding: 12px 8px; border-radius: 10px; }
.wv-btn:disabled, .wv-btn[aria-disabled="true"] { background: #E4E8F2; color: var(--wv-ink-muted); cursor: not-allowed; box-shadow: none; }
.wv-btn-lg { font-size: 17px; padding: 17px 34px; }
.wv-btn-sm { font-size: 13px; padding: 9px 18px; }
.wv-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--wv-primary-50), 0 0 0 5px var(--wv-primary); }

/* ---------- Inline text highlights (web + email) ----------
   Amber = money & actions · Green = progress · Blue = timing.
   One family per sentence; max two highlights per email. */
.wv-hl-amber { background: var(--wv-amber-50);   color: var(--wv-amber-ink); font-weight: 700; padding: 1px 6px; border-radius: 6px; }
.wv-hl-green { background: var(--wv-success-50); color: var(--wv-success);   font-weight: 700; padding: 1px 6px; border-radius: 6px; }
.wv-hl-blue  { background: var(--wv-primary-50); color: var(--wv-primary);   font-weight: 700; padding: 1px 6px; border-radius: 6px; }

/* ---------- Badges ---------- */
.wv-badge {
  display: inline-block;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 6px 14px;
  border-radius: var(--wv-radius-pill);
  white-space: nowrap;
}
.wv-badge-peak    { background: var(--wv-amber-50);   color: var(--wv-amber-ink); }
.wv-badge-offpeak { background: var(--wv-success-50); color: var(--wv-success); }
.wv-badge-super   { background: var(--wv-primary-50); color: var(--wv-primary); }
.wv-badge-navy    { background: var(--wv-navy);       color: #fff; }
.wv-badge-outline { background: #fff; color: var(--wv-ink-soft); border: 1px solid #DCE1EC; }

/* ---------- Callout strips ---------- */
.wv-callout { border-radius: 14px; padding: 14px 18px; font-weight: 600; font-size: 14px; line-height: 1.6; }
.wv-callout-amber { background: var(--wv-amber-50);   color: #8A4B0C; }
.wv-callout-blue  { background: var(--wv-primary-50); color: var(--wv-primary-700); }
.wv-callout-green { background: var(--wv-success-50); color: var(--wv-success); }

/* ---------- Cards & panels ---------- */
.wv-card       { background: #fff; border: 1px solid var(--wv-line); border-radius: var(--wv-radius-card); padding: 32px; }
.wv-card-float { background: #fff; border-radius: var(--wv-radius-card); padding: 32px; box-shadow: 0 24px 60px -34px rgba(16,23,51,0.35); }
.wv-card-panel { background: var(--wv-panel); border-radius: var(--wv-radius-card); padding: 32px; }
.wv-card-navy  { background: var(--wv-navy); color: #fff; border-radius: var(--wv-radius-card); padding: 32px; }
/* Floating notification (hero / social proof) */
.wv-notif { background: #fff; border-radius: 18px; padding: 16px 18px; box-shadow: 0 24px 50px -20px rgba(5,10,28,0.55); }

/* ---------- Stat ---------- */
.wv-stat      { font-family: var(--wv-font-display); font-weight: 800; font-size: 30px; letter-spacing: -0.02em; color: var(--wv-primary); }
.wv-stat-label{ font-size: 12.5px; color: var(--wv-ink-soft); }

/* ---------- Forms ---------- */
.wv-input {
  font-family: var(--wv-font-body);
  font-size: 15px;
  color: var(--wv-ink);
  background: #fff;
  border: 1.5px solid #DCE1EC;
  border-radius: var(--wv-radius-input);
  padding: 13px 16px;
  width: 100%;
}
.wv-input::placeholder { color: var(--wv-ink-muted); }
.wv-input:focus { outline: none; border-color: var(--wv-primary); box-shadow: 0 0 0 3px var(--wv-primary-50); }
.wv-input-error { border-color: var(--wv-alert); background: var(--wv-alert-50); }
.wv-field-label { font-weight: 600; font-size: 14px; margin-bottom: 6px; display: block; }
.wv-field-hint  { font-size: 12.5px; color: var(--wv-ink-muted); margin-top: 6px; }
.wv-field-error { font-size: 12.5px; color: var(--wv-alert); margin-top: 6px; font-weight: 600; }

/* ---------- Charts ----------
   Bars: neutral #DDE5F6 baseline · blue = named windows ·
   amber ONLY peak/expensive. Rounded 4px tops, 5-8px gaps. */
.wv-bar       { background: var(--wv-chart-base); border-radius: 4px; }
.wv-bar-blue  { background: var(--wv-primary); border-radius: 4px; }
.wv-bar-peak  { background: var(--wv-amber); border-radius: 4px; }

/* ---------- Email (inline-style guidance) ----------
   Header band: navy #0E1633 (+ optional radial blue glow), logo + label
   Lead stat:   in header, Bricolage 800 white, amber accent phrase
   Body:        #FFFFFF, panels #F5F7FC, radius 14-16
   CTA:         amber pill (.wv-btn-cta equivalent), ONE per email
   Footer:      #F5F7FC, 11.5px #9AA3BF, verbatim compliance copy:
                "We are not a utility, broker, or marketer — no rate
                changes, no enrollment, no guaranteed savings." +
                Manage preferences / Unsubscribe / Privacy / SMS terms +
                "Not affiliated with, sponsored by, or endorsed by any
                utility company."
   SMS:         <=160 chars, "Wattvia:" prefix, STOP/HELP honored */