/* VHALT Energy Desk tariff tracker. The look is the Energy Desk's (VTool/DESIGN.md): the near-black frame with its sidebar, warm paper, white cards on one soft shadow,
   Montserrat for titles, labels and figures, Inter for everything else, shades of green, no monospace and no black blocks on the paper. Unlike the Desk it is
   made to be read on a phone as well, because it is opened from a post. */

:root {
  color-scheme: light;
  --paper: #faf8f4;
  --panel: #ffffff;
  --ink: #1a1917;
  --muted: #6b6a62;
  --border: #e8e5dd;
  --green: #40d284;          /* VHALT green */
  --green-deep: #1f9d5c;     /* primary actions, the figure to notice */
  --green-text: #167a46;     /* green that must be read as text */
  --green-wash: rgba(64, 210, 132, 0.10);
  --green-edge: rgba(64, 210, 132, 0.30);
  --red: #c4423a;            /* the costly thing to watch, and errors */
  --red-wash: rgba(196, 66, 58, 0.09);
  --tile: rgba(18, 18, 16, 0.03);
  --sidebar: #121210;
  --sidebar-text: #a8a79e;
  --sidebar-text-active: #f5f4f0;
  --shadow: 0 1px 2px rgba(18, 18, 16, 0.03), 0 8px 22px -16px rgba(18, 18, 16, 0.12);
  --display: "Montserrat", Arial, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sidebar);
  color: var(--ink);
  font-family: var(--body);
  font-size: 0.95rem;
  line-height: 1.6;
}
[hidden] { display: none !important; }
a { color: var(--green-text); }
b, strong { font-weight: 600; }
img { max-width: 100%; }

/* the Desk's frame: near-black ground, a rounded frame with the sidebar inside it, warm paper beside it.
   On a phone the sidebar is a slim top bar and the page scrolls normally. */
.desk { padding: 0; }
.frame { background: transparent; }
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 30; display: flex; align-items: center; justify-content: space-between;
  padding: 12px max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); background: var(--sidebar);
}
.side { display: none; }
.paper { padding-top: 56px; background: var(--paper); min-height: 100vh; }

.logo { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; background: #000; border-radius: 8px; text-decoration: none; flex: none; }
.logo svg { flex: none; }
.logo .word { display: flex; align-items: center; gap: 6px; white-space: nowrap; text-transform: uppercase; font-family: var(--display); font-weight: 600; letter-spacing: 0.1em; color: #fff; }
.logo .word > span:first-child { font-size: 0.72rem; }
.logo .word .bar { display: block; width: 1px; height: 10px; background: #fff; flex: none; }
.logo .word .g { font-size: 0.6rem; color: var(--green); }

.nav { display: flex; flex-direction: column; gap: 4px; margin-top: 24px; }
.navhead {
  display: block; padding: 8px 12px; border-radius: 6px; text-decoration: none; font-family: var(--display); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--sidebar-text); border-left: 2px solid transparent; transition: background-color 0.15s;
}
.navhead:hover { background: rgba(255, 255, 255, 0.05); }
.navhead.active { color: var(--sidebar-text-active); background: rgba(64, 210, 132, 0.14); border-left-color: var(--green); }
.side-foot { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 16px; }
.about { font-size: 0.8rem; color: var(--sidebar-text); text-decoration: none; padding: 0 12px; }
.about:hover { color: var(--sidebar-text-active); text-decoration: underline; text-underline-offset: 2px; }
.side a:focus-visible, .topbar a:focus-visible { outline-color: var(--green); }

.page { max-width: 840px; margin: 0 auto; padding: 20px max(16px, env(safe-area-inset-right)) 48px max(16px, env(safe-area-inset-left)); }

@media (min-width: 768px) {
  html { font-size: 90%; }   /* the Desk reads a little smaller, so the whole of it is scaled to 90% */
  body { height: 100vh; overflow: hidden; }
  .desk { height: 100%; padding: 20px; }
  .frame { display: flex; height: 100%; overflow: hidden; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08); }
  .topbar { display: none; }
  .side { display: flex; flex-direction: column; justify-content: space-between; flex: none; width: 16rem; padding: 24px 20px; background: var(--sidebar); }
  .paper { flex: 1; min-width: 0; padding-top: 0; min-height: 0; }
  .scroll {
    height: 100%; overflow-y: auto; margin: 0 16px; scrollbar-gutter: stable both-edges;
  }
  .scroll::-webkit-scrollbar { width: 8px; }
  .scroll::-webkit-scrollbar-track { background: transparent; }
  .scroll::-webkit-scrollbar-button { display: none; height: 0; }
  .scroll::-webkit-scrollbar-thumb { min-height: 60px; border-left: 3px solid transparent; border-right: 3px solid transparent; background: linear-gradient(to bottom, transparent, var(--green) 25%, var(--green) 75%, transparent); background-clip: padding-box; }
  .page { padding: 40px 0 56px; }
}

/* the title, as the Desk's PageHeader */
.head { margin-bottom: 40px; }
.titlerow { display: flex; align-items: center; gap: 14px; }
.tile { flex: none; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(64, 210, 132, 0.16); border: 1px solid rgba(64, 210, 132, 0.4); }
h1 { margin: 0; font-family: var(--display); font-size: 1.9rem; line-height: 1.2; font-weight: 700; text-wrap: balance; }
.framing { margin: 8px 0 0; color: var(--muted); font-size: 0.95rem; }

/* a module: its title 12px above its content, modules 40px apart */
.module { margin-bottom: 40px; scroll-margin-top: 20px; }
h2 { margin: 0 0 12px; font-family: var(--display); font-size: 1.1rem; font-weight: 700; color: var(--ink); }
.guide { margin: 0 0 12px; font-size: 0.9rem; line-height: 1.6; color: var(--muted); }
.guide b { color: var(--ink); }
.rise { animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.label, .eyebrow { margin: 0; font-family: var(--display); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-text); }

/* cards */
.card { background: var(--panel); border: 1px solid rgba(232, 229, 221, 0.8); border-radius: 16px; box-shadow: var(--shadow); padding: 24px; }
.hint { margin: 0; font-size: 0.88rem; color: var(--muted); line-height: 1.6; }
#many-msg { margin-top: 12px; }

/* the Key Finding card: ring, sentence, then the three figures divided by hairlines */
.hero.card { padding: 20px 24px 18px; }
.finding { margin: 6px 0 0; font-family: var(--display); font-size: 1.5rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; color: var(--ink); }
.finding .g { color: var(--green-deep); }
#finding:not([hidden]) ~ .empty { display: none; }
.finding.empty { font-weight: 500; color: var(--muted); }
.hero-figs { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.hero-figs:empty { display: none; }
.hero-figs .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hero-figs .stat { display: flex; flex-direction: column; min-width: 0; padding-left: 20px; border-left: 1px solid var(--border); }
.hero-figs .stat:first-child { padding-left: 0; border-left: 0; }
.hero-figs .stat .v { order: 1; font-family: var(--display); font-size: 1.08rem; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; color: var(--ink); }
.hero-figs .stat .k { order: 2; margin-top: 4px; font-size: 0.84rem; font-weight: 400; line-height: 1.35; color: var(--muted); }
.hero-figs .stat .s { order: 3; font-size: 0.84rem; line-height: 1.35; color: var(--muted); }
.hero-figs .stat:nth-child(2) .v { color: var(--green-text); }
.hero-figs .stat.change.down .v { color: var(--green-deep); }
.hero-figs .stat.change.up .v { color: var(--red); }

/* VHALT's green box, signed with the V mark */
.intel { display: flex; gap: 14px; align-items: flex-start; margin-top: 16px; padding: 16px 20px; background: var(--green-wash); border: 1px solid var(--green-edge); border-radius: 16px; }
.intel:has(#cta[hidden]) { display: none; }
.intel img { flex: none; margin-top: 2px; }
.intel > div { min-width: 0; }
.intel .eyebrow { font-weight: 700; letter-spacing: 0.14em; font-size: 0.66rem; margin-bottom: 4px; }
.intel .callout { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; font-size: 0.92rem; }

/* form */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
label, .lbl { font-size: 0.82rem; font-weight: 600; color: var(--ink); }
input, select {
  font: inherit; font-size: 0.92rem; color: var(--ink); background: #fff;
  border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; width: 100%; min-width: 0;
  font-variant-numeric: tabular-nums; transition: border-color 0.15s, box-shadow 0.15s;
}
input:hover, select:hover { border-color: #d6d2c6; }
input:focus-visible, select:focus-visible { outline: none; border-color: var(--green-deep); box-shadow: 0 0 0 3px rgba(64, 210, 132, 0.25); }
button:focus-visible, a:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; border-radius: 8px; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.fields.pair { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.fields.trio { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin-top: 12px; }
.fields.usage { margin-top: 18px; }
.group-line { margin: 14px 0 0; padding: 10px 14px; background: var(--green-wash); border-radius: 12px; font-size: 0.88rem; }

.site { border: 1px solid var(--border); border-radius: 16px; padding: 18px; margin-bottom: 16px; background: #fff; }
.site-head { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 16px; }
.site-head .grow { flex: 1; min-width: 0; }
.park-msg { margin: 0 0 14px; }
.park-msg ul { margin: 8px 0; padding-left: 18px; }

/* buttons: deep green pills, never black */
.btn { font: inherit; font-family: var(--display); font-size: 0.78rem; font-weight: 700; padding: 10px 20px; border: 0; border-radius: 9999px; background: var(--green-deep); color: #fff; cursor: pointer; transition: background-color 0.15s; letter-spacing: 0.01em; }
.btn:hover { background: #188049; }
.btn[disabled] { opacity: 0.6; cursor: default; }
.btn.ghost { background: #fff; color: var(--ink); border: 1px solid var(--border); font-weight: 600; }
.btn.ghost:hover { background: var(--green-wash); border-color: var(--green); }
.btn[hidden] { display: none; }

/* the two changes: the Before and After rows are the Key Finding's figures, so they are not shown a second time */
.tablewrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: right; padding: 12px 10px; border-bottom: 1px solid var(--border); }
th:first-child, td:first-child { text-align: left; }
th { font-family: var(--display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
td { font-size: 0.9rem; font-weight: 500; }
td:first-child { font-weight: 600; }
td.pct, .pct { font-weight: 600; }
td.pct.down, .pct.down { color: var(--green-deep); }
td.pct.up, .pct.up { color: var(--red); }
.tot td { font-weight: 700; border-top: 2px solid var(--border); border-bottom: 0; }
.sub-hint { display: block; margin-top: 2px; font-size: 0.84rem; font-weight: 400; color: var(--muted); max-width: 44ch; line-height: 1.5; }
.bridge td:first-child { white-space: normal; }
.bridge .bv { display: block; }
.bridge td .pct { display: block; font-size: 0.84rem; }
.bridge tbody tr:first-child, .bridge tbody tr.tot { display: none; }
.bridge tbody tr:nth-child(2) td { border-top: 0; }
.bridge tbody tr:last-of-type td, .bridge tbody tr:nth-last-child(2):not(:first-child) td { border-bottom: 0; }
.why { margin: 14px 0 0; font-size: 0.9rem; }
.blend { margin: 12px 0 0; font-size: 0.82rem; color: var(--muted); }
details.sd { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 12px; }
details.sd summary { cursor: pointer; font-family: var(--display); font-weight: 600; font-size: 0.86rem; }

/* callouts: VHALT's green box, without the mark */
.callout { margin: 16px 0 0; padding: 14px 18px; background: var(--green-wash); border: 1px solid var(--green-edge); border-radius: 16px; font-size: 0.86rem; line-height: 1.6; }
.callout p { margin: 0; }
.err { padding: 12px 14px; background: var(--red-wash); color: var(--red); border-radius: 12px; }

.share { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin-top: 16px; }
.share-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.share .hint { margin: 0; flex: 1; min-width: 220px; }
#link-text { flex-basis: 100%; }

/* notes */
.notes ul { margin: 0 0 16px; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 0.9rem; }
.notes ul.sub { margin: 6px 0 0; }
.notes p { margin: 0 0 10px; font-size: 0.88rem; color: var(--muted); }
.notes p:last-child { margin-bottom: 0; }
.notes p b { color: var(--ink); }

/* sign-up (hidden until it is connected) */
.signup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 0 40px; align-items: start; padding: 28px; }
.signup h2 { margin: 0 0 8px; }
.signup .pitch { margin: 0; font-size: 0.95rem; font-weight: 500; color: var(--muted); }
.signup form { grid-column: 2; }
.signup .row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
.consent { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; font-size: 0.8rem; font-weight: 400; color: var(--muted); }
.consent input { width: auto; margin-top: 4px; flex: none; accent-color: var(--green-deep); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
#signup-msg { margin-top: 10px; min-height: 1.4em; }
#signup-msg.bad { color: var(--red); }
#signup-msg.ok { color: var(--green-text); font-weight: 600; }

.foot { text-align: center; font-size: 0.84rem; color: var(--muted); line-height: 1.7; }
.foot p { margin: 0; }
.foot b { font-family: var(--display); color: var(--ink); }

/* a phone: one column, comfortable targets, inputs at 16px so they do not zoom */
@media (max-width: 767px) {
  .head { margin-bottom: 28px; }
  .module { margin-bottom: 32px; }
  h1 { font-size: 1.5rem; }
  .tile { width: 40px; height: 40px; }
  .card, .hero.card { padding: 16px; }

  .finding { font-size: 1.3rem; }
  .hero-figs .stats { grid-template-columns: 1fr; }
  .hero-figs .stat { padding: 12px 0 0; margin-top: 12px; border-left: 0; border-top: 1px solid var(--border); }
  .hero-figs .stat:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
  .site { padding: 14px; }
  input, select { font-size: 16px; padding: 12px; }
  select { padding-left: 10px; padding-right: 6px; }
  /* the per-site table scrolls sideways: keep its columns readable and show soft edge shadows while more is hidden */
  .tablewrap:has(table:not(.bridge)) {
    background:
      linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) 0 0 / 40px 100% no-repeat local,
      linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) 100% 0 / 40px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(26, 25, 23, 0.14), rgba(26, 25, 23, 0)) 0 0 / 12px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(26, 25, 23, 0.14), rgba(26, 25, 23, 0)) 100% 0 / 12px 100% no-repeat scroll;
  }
  table:not(.bridge) { min-width: 560px; }
  table:not(.bridge) td { white-space: nowrap; }
  table:not(.bridge) td:nth-child(2), table:not(.bridge) th:nth-child(2) { text-align: left; }
  table:not(.bridge) td:nth-child(2) { white-space: normal; min-width: 120px; max-width: 140px; }
  .fields.trio { grid-template-columns: 1fr 1fr; }
  .fields.trio > :first-child { grid-column: 1 / -1; }
  .signup .row { grid-template-columns: 1fr; }
  .btn { width: 100%; padding: 13px 20px; }
  .site-head .btn { width: auto; flex: none; padding: 12px 16px; }
  .intel { padding: 14px 16px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print {
  body { height: auto; overflow: visible; background: #fff; }
  .desk { height: auto; padding: 0; }
  .frame { display: block; height: auto; border: 0; border-radius: 0; overflow: visible; }
  .side, .topbar, .btn, .signup, .share { display: none !important; }
  .paper { padding-top: 0; }
  .scroll { height: auto; overflow: visible; margin: 0; }
  .card { box-shadow: none; }
}

/* What This Covers: a closed dropdown, opened by its title */
.covers { padding: 0; }
.covers summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; cursor: pointer; list-style: none; font-family: var(--display); font-size: 1.1rem; font-weight: 700; color: var(--ink); border-radius: 16px; }
.covers summary::-webkit-details-marker { display: none; }
.covers summary:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }
.covers .chev { flex: none; width: 8px; height: 8px; border-right: 2px solid var(--green-deep); border-bottom: 2px solid var(--green-deep); transform: rotate(45deg); margin-top: -4px; transition: transform 0.2s; }
.covers[open] .chev { transform: rotate(-135deg); margin-top: 4px; }
.covers-body { padding: 4px 24px 24px; border-top: 1px solid var(--border); padding-top: 18px; }
@media (max-width: 767px) { .covers summary { padding: 16px; } .covers-body { padding: 16px; } }
@media print { .covers:not([open]) .covers-body { display: block; } }

/* the two steps */
body[data-view="1"] [data-step="2"], body[data-view="2"] [data-step="1"] { display: none; }
.steps { display: flex; align-items: center; gap: 12px; margin: -12px 0 32px; }
.step { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border: 1px solid var(--border); border-radius: 9999px; background: #fff; font-family: var(--display); font-size: 0.8rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.step .n { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(18, 18, 16, 0.06); font-size: 0.72rem; font-weight: 700; }
.step.on { background: var(--green-deep); border-color: var(--green-deep); color: #fff; }
.step.on .n { background: rgba(255, 255, 255, 0.22); color: #fff; }
.stepline { flex: none; width: 28px; height: 1px; background: var(--border); }
.nextrow { margin-top: 20px; display: flex; }
.nextrow.back { margin: 0 0 40px; }
@media (max-width: 767px) { .nextrow .btn { width: 100%; } .steps { margin: -8px 0 24px; } }
@media print { body[data-view="1"] [data-step="2"] { display: block; } .steps, .nextrow { display: none !important; } }

/* Firefox cannot fade the thumb, so it gets a thin green one (as in the Desk) */
@supports not selector(::-webkit-scrollbar) {
  @media (min-width: 768px) { .scroll { scrollbar-width: thin; scrollbar-color: var(--green) transparent; } }
}

/* fewer fields at first: a single site needs no name, and the days and hours only appear for "My own hours" */
#sites:not(:has(.site + .site)) .site-head { display: none; }
.site:not(.custom-hours) .fields.trio { display: none; }
.site:not(.has-lunch) .lunchmore { display: none; }
.fields.lunchmore { margin-top: 12px; }

/* what was entered, above the result */
.recap { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.recap p { margin: 2px 0 0; font-size: 0.9rem; color: var(--ink); }
.recap .btn { flex: none; padding: 8px 18px; }

/* See My Result waits for a monthly usage */
.nextrow { align-items: center; gap: 16px; }
.nextrow .need { margin: 0; }
.btn[aria-disabled="true"] { opacity: 0.5; cursor: default; }
.btn[aria-disabled="true"]:hover { background: var(--green-deep); }
.step[aria-disabled="true"]:not(.on) { opacity: 0.6; }
@media (max-width: 767px) { .nextrow { flex-direction: column; align-items: stretch; gap: 10px; } .recap .btn { width: auto; } }

@media (max-width: 767px) { .signup { display: block; padding: 20px 16px; } .signup .pitch { margin-bottom: 16px; } }

/* Stay Updated: the one call to action after the result, so it gets the Desk's soft green panel, an icon, a larger title and a larger button */
.signup { background: linear-gradient(135deg, rgba(64, 210, 132, 0.18), rgba(64, 210, 132, 0.06)); border: 2px solid var(--green); padding: 31px; gap: 0 48px; align-items: center; }
.signup .tile { margin-bottom: 16px; width: 48px; height: 48px; }
.signup h2 { font-size: 1.45rem; margin-bottom: 10px; }
.signup .pitch { font-size: 1.02rem; font-weight: 500; color: var(--ink); line-height: 1.55; }
.signup input[type="email"] { background: #fff; border-color: var(--green-edge); padding: 14px 16px; font-size: 1rem; }
.signup .btn { padding: 15px 30px; font-size: 0.95rem; }
.signup .consent { color: var(--ink); opacity: 0.8; }
@media (max-width: 767px) { .signup { padding: 24px 18px; } .signup h2 { font-size: 1.3rem; } }

/* Stay Updated, a size down: the icon sits beside the title and everything is tighter */
.signup { padding: 20px 24px; gap: 0 36px; }
.signup-text { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; }
.signup .tile { width: 40px; height: 40px; margin: 0; }
.signup .tile svg { width: 20px; height: 20px; }
.signup h2 { font-size: 1.15rem; margin: 0; }
.signup .pitch { grid-column: 1 / -1; font-size: 0.92rem; }
.signup input[type="email"] { padding: 11px 14px; font-size: 0.95rem; }
.signup .btn { padding: 11px 22px; font-size: 0.85rem; }
.signup .consent { margin-top: 12px; }
@media (max-width: 767px) { .signup { padding: 18px 16px; } .signup .pitch { margin-bottom: 14px; } }

/* The result page, improved */
/* the answer is the Change figure: bigger, in a soft tint */
.hero-figs .stat.change { background: var(--green-wash); border-left: 0; border-radius: 12px; padding: 12px 16px; margin-left: 12px; }
.hero-figs .stat.change.up { background: var(--red-wash); }
.hero-figs .stat.change .v { font-size: 1.5rem; font-weight: 700; }
.hero-figs .stat .yearly { order: 1; margin-top: 2px; font-family: var(--display); font-size: 0.9rem; font-weight: 600; color: var(--green-deep); }
.hero-figs .stat.change.up .yearly { color: var(--red); }
.hero-figs .stat.change .k { margin-top: 6px; }
/* sharing sits in the Key Finding card's foot */
.hero .share { display: flex; align-items: center; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--border); }
.hero .share .hint { flex: 1; min-width: 220px; font-size: 0.84rem; }
.hero .share .btn { padding: 9px 18px; }
#link-text { flex-basis: 100%; }
/* the two changes: a tag and a bar on each line */
.tag { display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 9999px; font-family: var(--display); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: 2px; }
.tag.exact { background: rgba(64, 210, 132, 0.16); color: var(--green-text); }
.tag.est { background: rgba(18, 18, 16, 0.06); color: var(--muted); }
.bar { display: block; height: 8px; max-width: 320px; margin-top: 10px; border-radius: 4px; background: rgba(18, 18, 16, 0.05); overflow: hidden; }
.bar .fill { display: block; height: 100%; border-radius: 4px; background: var(--green-deep); }
.bar .fill.up { background: var(--red); }
/* VHALT's one call to action is a button */
.intel .cta a { display: table; margin-top: 12px; padding: 9px 20px; border-radius: 9999px; background: var(--green-deep); color: #fff; text-decoration: none; font-family: var(--display); font-size: 0.85rem; }
.intel .cta a b { font-weight: 700; }
.intel .cta a:hover { background: #188049; }
/* a shorter top on a phone */
@media (max-width: 767px) {
  .recap { margin-bottom: 16px; gap: 10px; }
  .recap .eyebrow { display: none; }
  .recap p { font-size: 0.84rem; margin: 0; }
  .recap .btn { padding: 6px 14px; font-size: 0.75rem; }
  .hero-figs .stat.change { margin: 12px 0 0; padding: 12px 14px; }
  .hero .share { align-items: stretch; }
  .hero .share .btn { width: 100%; }
}

/* the all-sites table fits the card: headings may wrap, site names do not */
table:not(.bridge) th { white-space: normal; line-height: 1.35; vertical-align: bottom; }
table:not(.bridge) td:first-child { white-space: nowrap; }
@media (min-width: 768px) { table:not(.bridge) th, table:not(.bridge) td { padding-left: 8px; padding-right: 8px; } }

/* Stay Updated, compact: a slim bar, not a panel */
.signup { padding: 14px 18px; gap: 0 24px; align-items: start; border-width: 1.5px; }
.signup-text { gap: 6px 10px; }
.signup .tile { width: 32px; height: 32px; border-radius: 10px; }
.signup .tile svg { width: 16px; height: 16px; }
.signup h2 { font-size: 1rem; }
.signup .pitch { font-size: 0.85rem; line-height: 1.5; }
.signup label[for="email"] { font-size: 0.75rem; }
.signup .field { gap: 4px; }
.signup .row { gap: 8px; }
.signup input[type="email"] { padding: 9px 12px; font-size: 0.88rem; }
.signup .btn { padding: 9px 18px; font-size: 0.8rem; }
.signup .consent { margin-top: 8px; font-size: 0.74rem; line-height: 1.45; }
.signup #signup-msg { margin-top: 6px; min-height: 0; font-size: 0.8rem; }
@media (max-width: 767px) { .signup { padding: 14px 14px; } .signup .pitch { margin-bottom: 10px; } }

/* the About page, and the link to it */
.about.active { color: var(--sidebar-text-active); }
a.btn { display: inline-block; text-decoration: none; text-align: center; }
.prose p { margin: 0 0 12px; font-size: 0.95rem; }
.prose p:last-child { margin-bottom: 0; }
.foot .about-link { margin-top: 4px; }
@media (min-width: 768px) { .foot .about-link { display: none; } }

/* the two ways to reach VHALT: book a call (main), or connect on LinkedIn (quieter) */
.intel .cta-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0 !important; }
.intel .cta .cta-actions a { display: inline-block; margin: 0; }
.intel .cta a.alt { background: #fff; color: var(--green-text); border: 1px solid var(--green); padding: 8px 19px; }
.intel .cta a.alt:hover { background: var(--green-wash); }
@media (max-width: 767px) { .intel .cta .cta-actions a { flex: 1 1 100%; text-align: center; } }

/* the LinkedIn mark, in VHALT green, on the Connect button */
.intel .cta a.alt { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.intel .cta a.alt .li { flex: none; }

/* "About the Energy Desk" in the sidebar: a real button, not a quiet link */
.side .about {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06); color: var(--sidebar-text-active); font-family: var(--display); font-size: 0.78rem; font-weight: 600; text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s;
}
.side .about::before {
  content: ""; flex: none; width: 16px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2340D284' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.side .about::after {
  content: ""; flex: none; width: 14px; height: 14px; margin-left: auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8a79e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.side .about:hover { background: rgba(64, 210, 132, 0.14); border-color: var(--green); text-decoration: none; color: var(--sidebar-text-active); }
.side .about.active { background: rgba(64, 210, 132, 0.14); border-color: var(--green); }
.side .about { padding: 10px 12px; gap: 8px; font-size: 0.72rem; white-space: nowrap; }

/* the lockup's divider sits on the centre of the capitals, and the About button carries the VHALT V in its circle */
.logo .word { line-height: 1; }
.logo .word .bar { height: 12px; transform: translateY(-1px); }
.side .about::before { width: 20px; height: 20px; background: url("assets/vhalt-logo.svg") center / contain no-repeat; }
.side .about { padding-left: 10px; }
.logo .word { align-items: center; }
.logo .word .bar { align-self: center; margin: 0; transform: none; height: 11px; }

/* the disclaimer under the Key Finding figures: shown only with a result */
.hero .disclaimer { margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; background: rgba(18, 18, 16, 0.04); font-size: 0.84rem; line-height: 1.55; color: var(--muted); }
.hero .disclaimer b { color: var(--ink); }
#finding[hidden] ~ .disclaimer { display: none; }

/* Stay Updated, calmer: a white card so the green button and the green border are the only green on it */
.signup { background: #fff; align-items: center; }
.signup-text { align-self: center; }
.signup .tile { background: var(--green-wash); border-color: var(--green-edge); }
.signup input[type="email"] { background: #fff; border-color: var(--border); }
.signup input[type="email"]:focus-visible { border-color: var(--green-deep); }
.signup .btn { background: var(--green-deep); color: #fff; opacity: 1; }
.signup .consent { color: var(--muted); opacity: 1; }

/* Stay Updated lives inside the Energy Intelligence box: one green block, the buttons first, then a hairline and the sign-up */
.intel .signup-inline { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--green-edge); }
.intel .signup-inline .pitch { margin: 4px 0 12px; font-size: 0.92rem; font-weight: 400; color: var(--ink); }
.intel .signup-inline .row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.intel .signup-inline input[type="email"] { background: #fff; border: 1px solid var(--green-edge); padding: 10px 14px; font-size: 0.92rem; }
.intel .signup-inline .btn { padding: 10px 22px; font-size: 0.85rem; }
.intel .signup-inline .consent { margin-top: 10px; font-size: 0.78rem; line-height: 1.45; color: var(--muted); }
.intel .signup-inline #signup-msg { margin-top: 6px; min-height: 0; font-size: 0.82rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 767px) { .intel .signup-inline .row { grid-template-columns: 1fr; } }

/* What This Covers: a button at the foot of the bill table's card, opening downwards inside it */
.covers.inline { margin-top: 18px; padding-top: 14px; background: none; border: 0; border-top: 1px solid var(--border); border-radius: 0; box-shadow: none; }
.covers.inline summary { display: inline-flex; gap: 10px; padding: 8px 16px; border: 1px solid var(--border); border-radius: 9999px; background: #fff; font-size: 0.85rem; transition: border-color 0.15s, background-color 0.15s; }
.covers.inline summary:hover { border-color: var(--green); background: var(--green-wash); }
.covers.inline[open] summary { border-color: var(--green); }
.covers.inline .covers-body { border-top: 0; padding: 16px 0 0; }
@media (max-width: 767px) { .covers.inline summary { padding: 8px 14px; } .covers.inline .covers-body { padding: 14px 0 0; } }

/* What This Covers: a small button under the numbers of the last line; the text opens at the foot of the card. Without that button (several
   sites) the dropdown keeps its own heading, at the right. */
.covers.inline { text-align: right; }
.covers.inline .covers-body { text-align: left; }
.covers.has-btn > summary { display: none; }
.covers.has-btn { margin-top: 0; padding-top: 0; border-top: 0; }
.covers.has-btn[open] { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.covers.has-btn[open] .covers-body { padding-top: 4px; }
.covers-btn { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 4px 11px; border: 1px solid var(--border); border-radius: 9999px; background: #fff; color: var(--ink); font-family: var(--display); font-size: 0.7rem; font-weight: 600; cursor: pointer; transition: border-color 0.15s, background-color 0.15s; }
.covers-btn::after { content: ""; width: 5px; height: 5px; margin-top: -2px; border-right: 1.6px solid var(--green-deep); border-bottom: 1.6px solid var(--green-deep); transform: rotate(45deg); transition: transform 0.2s; }
.covers-btn[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 2px; }
.covers-btn:hover, .covers-btn[aria-expanded="true"] { border-color: var(--green); background: var(--green-wash); }
.covers-btn { white-space: nowrap; }
@media (max-width: 767px) { .covers-btn { font-size: 0.66rem; padding: 4px 9px; gap: 5px; } }

/* the button shares a row with the closing sentence, at the right; on a phone it drops under the sentence */
.why-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; margin-top: 14px; }
.why-row .why { margin: 0; flex: 1; min-width: 220px; }
.why-row .covers-btn { margin: 0; flex: none; }

/* What This Covers: small print, muted, with the lead-in words in ink; it is reference, not the headline */
.covers-body { color: var(--muted); }
.covers-body ul { margin: 0 0 12px; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 0.8rem; line-height: 1.55; }
.covers-body ul.sub { margin: 4px 0 0; }
.covers-body li b, .covers-body p b { color: var(--ink); font-weight: 600; }
.covers-body p { margin: 0 0 8px; font-size: 0.76rem; line-height: 1.55; color: var(--muted); max-width: none; }
.covers-body p:last-child { margin-bottom: 0; }
.covers.has-btn[open] .covers-body { padding-top: 0; }

/* the About page's title carries the VHALT V in its circle, with no tile behind it */
.tile.vtile { background: none; border: 0; width: 44px; height: 44px; }
.tile.vtile img { width: 44px; height: 44px; display: block; }
@media (max-width: 767px) { .tile.vtile, .tile.vtile img { width: 40px; height: 40px; } }