/* ============================================================
   BoilerGreen — page styles
   Built on tokens from colors_and_type.css. Page-specific layout
   only. Component shapes follow the design system.
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body { background: var(--bg-page); color: var(--fg-default); }

img, svg { display: block; max-width: 100%; }

/* fade-up enter helper — JS adds .is-in once scrolltrigger fires.
   Only hide pre-animation when JS has marked itself as available; otherwise
   content stays visible (progressive enhancement: blank-page fallback would
   strand readers if GSAP/the CDN/JS itself fails to load). */
.js-on .fu { opacity: 0; transform: translate3d(0, 16px, 0); transition: none; }
.js-on .fu.is-in { opacity: 1; transform: translate3d(0, 0, 0); }

/* ============================================================
   LAYOUT — page container, sections, grid
   ============================================================ */
.page { max-width: var(--grid-max); margin: 0 auto; padding: 0 var(--space-9); }
@media (max-width: 900px) { .page { padding: 0 var(--space-6); } }
@media (max-width: 600px) { .page { padding: 0 var(--space-4); } }

section { padding: var(--space-13) 0; }
section.tight { padding: var(--space-10) 0; }
section.full { padding: 0; }
@media (max-width: 900px) {
  section { padding: var(--space-10) 0; }
  section.tight { padding: var(--space-8) 0; }
}

.section-head { margin-bottom: var(--space-9); }
.section-head .eyebrow { display: block; margin-bottom: var(--space-4); }
.section-head h2 { max-width: 22ch; }

/* ============================================================
   NAV  — matches Boiler Green design system
   Frosted/transparent over hero, solid paper once scrolled.
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 50;
  background: rgb(14 20 17 / 0.2);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 1px solid rgb(244 241 234 / 0.1);
  transition: background var(--dur-slow) var(--ease-out),
              border-color var(--dur-slow) var(--ease-out);
}
.nav.is-scrolled {
  background: var(--color-paper);
  border-bottom-color: var(--border-default);
}
.nav-inner {
  max-width: var(--grid-max); margin: 0 auto;
  padding: 0 var(--space-9);
  height: 72px;
  display: flex; align-items: center; gap: var(--space-9);
}
@media (max-width: 900px) { .nav-inner { padding: 0 var(--space-6); gap: var(--space-6); height: 64px; } }
.nav-brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--color-paper);
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  font-size: 14px;
  transition: color var(--dur-slow) var(--ease-out);
}
.nav.is-scrolled .nav-brand { color: var(--color-ink); }
/* Invert logo mark to white over dark frosted bg */
.nav-brand img { filter: brightness(0) invert(1); transition: filter var(--dur-slow) var(--ease-out); }
.nav-brand .nav-wordmark { width: auto; height: 28px; }
.nav.is-scrolled .nav-brand img { filter: none; }
.nav-links { display: flex; gap: var(--space-8); flex: 1; margin-left: var(--space-9); align-items: center; }
.nav-links a {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px;
  text-decoration: none;
  color: rgb(244 241 234 / 0.6);
  transition: color var(--dur-base) var(--ease-out);
}
.nav-links a:hover { color: var(--color-paper); }
.nav-links a.is-active { color: var(--color-paper); }
.nav.is-scrolled .nav-links a { color: var(--color-steel-300); }
.nav.is-scrolled .nav-links a:hover { color: var(--color-ink); }
.nav.is-scrolled .nav-links a.is-active { color: var(--color-ink); }
.nav-links a .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-signal);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.nav-links a.is-active .dot { opacity: 1; transform: scale(1); }
@media (max-width: 1100px) { .nav-links { display: none; } }
.nav-end { display: flex; align-items: center; gap: var(--space-6); margin-left: auto; }
.nav-signin {
  font-size: 14px; text-decoration: none; color: rgb(244 241 234 / 0.75);
  transition: color var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.nav-signin:hover { opacity: 0.7; }
.nav.is-scrolled .nav-signin { color: var(--color-ink); }
@media (max-width: 700px) { .nav-signin { display: none; } }
.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 20px;
  background: var(--color-signal); color: var(--color-paper);
  font-size: 13px; font-weight: var(--fw-medium);
  text-decoration: none;
  border-radius: var(--radius-1);
  transition: background var(--dur-base) var(--ease-out);
}
.nav-cta:hover { background: var(--color-signal-2); }

/* ============================================================
   HERO (section 2)
   ============================================================ */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex; align-items: flex-end;
  background: var(--color-ink);
  color: var(--color-paper);
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg svg { width: 100%; height: 100%; object-fit: cover; }
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: brightness(0.5);
}
.hero-vignette {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgb(14 20 17 / 0) 40%, rgb(14 20 17 / 0.85) 100%);
}
.hero-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--grid-max);
  margin: 0 auto;
  padding: var(--space-13) var(--space-9) var(--space-11);
}
@media (max-width: 900px) { .hero-inner { padding: var(--space-11) var(--space-6) var(--space-9); } }
.hero h1 {
  font-size: var(--fs-display-1);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-tightest);
  line-height: var(--leading-display);
  max-width: 16ch; margin: 0 0 var(--space-7);
}
.hero p.lead {
  font-size: var(--fs-body-lg);
  max-width: 56ch;
  color: rgb(244 241 234 / 0.80);
  margin: 0 0 var(--space-9);
  padding-top: var(--space-7);
  border-top: 1px solid rgb(244 241 234 / 0.18);
}
.hero-ctas { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.btn-primary {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 14px 22px;
  background: var(--color-signal); color: var(--color-paper);
  font-size: var(--fs-body-sm); font-weight: var(--fw-medium);
  text-decoration: none;
  border-radius: var(--radius-1);
  transition: background var(--dur-base) var(--ease-out);
}
.btn-primary:hover { background: var(--color-signal-2); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 14px 22px;
  background: transparent; color: var(--color-paper);
  font-size: var(--fs-body-sm); font-weight: var(--fw-medium);
  text-decoration: none;
  border: 1px solid var(--color-paper-24);
  border-radius: var(--radius-1);
  transition: border-color var(--dur-base) var(--ease-out);
}
.btn-ghost:hover { border-color: var(--color-paper-60); }

/* ============================================================
   STAT BAR (section 3)
   ============================================================ */
.statbar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
}
.statbar > * {
  padding: var(--space-7) var(--space-5);
  border-right: 1px solid var(--border-default);
}
.statbar > *:first-child { padding-left: 0; }
.statbar > *:last-child { border-right: 0; padding-right: 0; }
.stat-num {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: var(--fw-medium);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}
.stat-num .live { color: var(--color-signal); }
.stat-label { font-size: var(--fs-body-sm); color: var(--fg-muted); }
@media (max-width: 900px) {
  .statbar { grid-template-columns: repeat(2, 1fr); }
  .statbar > *:nth-child(2) { border-right: 0; }
  .statbar > *:nth-child(1), .statbar > *:nth-child(2) { border-bottom: 1px solid var(--border-default); }
}

/* ============================================================
   TRANSFER BLOCK (section 4) — what changes
   ============================================================ */
.transfer { max-width: 1040px; }
.transfer-h {
  font-size: clamp(36px, 4.4vw, 56px);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-tighter);
  line-height: 1.05;
  max-width: 22ch;
  margin: var(--space-5) 0 var(--space-9);
}
.transfer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
}
.transfer-col {
  padding: var(--space-7) var(--space-6) var(--space-7) 0;
  position: relative;
}
.transfer-col + .transfer-col {
  padding-left: var(--space-6);
  border-left: 1px solid var(--border-subtle);
}
.transfer-col-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: var(--space-5);
}
.transfer-list {
  list-style: none;
  margin: 0; padding: 0;
}
.transfer-list li {
  font-size: var(--fs-body-lg);
  color: var(--color-ink);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
  transition: color 0.18s, font-weight 0.18s;
}
.transfer-list li:hover { font-weight: var(--fw-medium); color: var(--color-signal); }
.transfer-list li:last-child { border-bottom: 0; }
.transfer-yours .transfer-keep { font-weight: var(--fw-regular); }

/* Initial state: ours items held back behind the divider */
.transfer-ours .transfer-list li {
  opacity: 0;
  transform: translateX(-12%);
  transition:
    transform 0.55s var(--ease-out),
    opacity 0.4s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 0.1s);
}
.transfer-ours.is-moved .transfer-list li {
  opacity: 1;
  transform: translateX(0);
}
.transfer-yours .transfer-keep {
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
.transfer-yours.is-moved .transfer-keep { opacity: 1; }

/* Price strip beneath the transfer */
.transfer-price { margin-top: var(--space-9); }
.transfer-price-lead {
  font-size: var(--fs-body-lg);
  color: var(--fg-default);
  margin: 0 0 var(--space-6);
  max-width: 36ch;
}
.price-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
}
.price-strip-cell {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-6) var(--space-5);
  border-right: 1px solid var(--border-subtle);
}
.price-strip-cell:last-child { border-right: 0; }
.price-strip-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.price-strip-val {
  font-family: var(--font-mono);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: var(--fw-medium);
  letter-spacing: -0.02em;
  color: var(--color-ink);
  font-feature-settings: "tnum";
}
.price-strip-sub {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--fg-muted);
  letter-spacing: 0.02em;
}
.price-strip-delta {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--color-signal);
  letter-spacing: 0.02em;
}
.ps-bench .price-strip-val { color: var(--fg-muted); text-decoration: line-through; }
.ps-now .price-strip-val { color: var(--color-signal); }

@media (max-width: 720px) {
  .transfer-grid { grid-template-columns: 1fr; }
  .transfer-col { padding: var(--space-6) 0; }
  .transfer-col + .transfer-col {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--border-subtle);
  }
  .transfer-ours .transfer-list li {
    transform: translateY(8px);
  }
  .price-strip { grid-template-columns: 1fr; }
  .price-strip-cell {
    border-right: 0;
    border-bottom: 1px solid var(--border-subtle);
  }
  .price-strip-cell:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .transfer-ours .transfer-list li,
  .transfer-yours .transfer-keep {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   THREE REASONS (section 5)
   ============================================================ */
.reasons {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border-default);
}
.reasons > * {
  padding: var(--space-9) var(--space-7);
  border-right: 1px solid var(--border-default);
}
.reasons > *:first-child { padding-left: var(--space-7); }
.reasons > *:last-child { border-right: 0; padding-right: 0; }
.reason-icon { display: block; color: var(--fg-muted); margin-bottom: var(--space-5); width: 24px; height: 24px; }
.reason-num {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--fg-muted);
  letter-spacing: var(--tracking-eyebrow);
  margin-bottom: var(--space-6);
}
.reason h3 { margin-bottom: var(--space-4); max-width: 16ch; }
.reason p { color: var(--fg-default); }
.reason { transition: background 0.18s; }
.reason:hover { background: var(--color-paper-2); }
.reason:hover .reason-icon { color: var(--color-signal); transition: color 0.18s; }
@media (max-width: 900px) {
  .reasons { grid-template-columns: 1fr; }
  .reasons > * { border-right: 0; border-bottom: 1px solid var(--border-default); padding: var(--space-7) 0; }
  .reasons > *:last-child { border-bottom: 0; }
}

/* ============================================================
   HOW IT WORKS (section 6)
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--border-default); }
.step { padding: var(--space-7) var(--space-5); border-right: 1px solid var(--border-default); }
.step:first-child { padding-left: 0; }
.step:last-child { border-right: 0; padding-right: 0; }
.step-num { font-family: var(--font-mono); font-size: 28px; font-weight: var(--fw-medium); margin-bottom: var(--space-5); display: block; }
.step h4 { margin-bottom: var(--space-3); }
.step p { font-size: var(--fs-body-sm); color: var(--fg-muted); }
@media (max-width: 900px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step:nth-child(2) { border-right: 0; }
  .step:nth-child(1), .step:nth-child(2) { border-bottom: 1px solid var(--border-default); }
}

/* ============================================================
   WHY NOW (section 7)
   ============================================================ */
.why-now { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-11); align-items: start; }
.why-now-list { display: grid; gap: var(--space-7); }
.why-now-item { display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); align-items: start; padding-bottom: var(--space-7); border-bottom: 1px solid var(--border-subtle); }
.why-now-item:last-child { border-bottom: 0; padding-bottom: 0; }
.why-now-num { font-family: var(--font-mono); color: var(--fg-muted); font-size: var(--fs-mono-sm); letter-spacing: var(--tracking-eyebrow); padding-top: 4px; }
.why-now-item h4 { margin-bottom: var(--space-2); }
.why-now-item p { color: var(--fg-default); }
@media (max-width: 900px) { .why-now { grid-template-columns: 1fr; gap: var(--space-7); } }

/* ============================================================
   SECTORS (section 8)
   ============================================================ */
.sectors { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); }
.sector {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-7) var(--space-7) var(--space-6);
  font-family: var(--font-mono); font-size: var(--fs-mono-sm); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--fg-muted);
  border-right: 1px solid var(--border-default);
  flex: 1 1 auto;
}
.sector:first-child { padding-left: 0; }
.sector:last-child { border-right: 0; padding-right: 0; }
.sector svg { width: 20px; height: 20px; flex-shrink: 0; }
.sector { transition: color 0.18s; }
.sector:hover { color: var(--color-signal); font-weight: var(--fw-semibold); }
@media (max-width: 900px) {
  .sector { flex: 1 1 50%; padding: var(--space-6) var(--space-4) var(--space-5) 0; }
}

/* ============================================================
   ENVIRONMENT & COMPLIANCE (section 8)
   ============================================================ */
.section-head--eu { display: flex; align-items: center; justify-content: space-between; gap: var(--space-9); }
.eu-stars-mark { flex-shrink: 0; width: 110px; height: 110px; fill: var(--fg-muted); opacity: 0.3; }
@media (max-width: 700px) { .section-head--eu { display: block; } .eu-stars-mark { display: none; } }

.regs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.reg-card {
  padding: var(--space-8);
  background: var(--color-paper-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-1);
}
.reg-tag {
  display: inline-block;
  font-family: var(--font-mono); font-size: var(--fs-mono-sm);
  color: var(--fg-muted); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; margin-bottom: var(--space-4);
}
.reg-card h4 { margin-bottom: var(--space-3); }
.reg-card p { font-size: var(--fs-body-sm); color: var(--fg-default); max-width: 52ch; }
.reg-card { transition: border-color 0.18s, box-shadow 0.18s; }
.reg-card:hover { border-color: var(--border-default); box-shadow: 0 4px 16px rgb(0 0 0 / 0.07); }
.reg-card:hover h4 { color: var(--color-signal); }
@media (max-width: 900px) { .regs-grid { grid-template-columns: 1fr; } }

/* ============================================================
   BOILER HERO BREAK (section 9) — tighter, with data ticker
   ============================================================ */
.boiler-hero {
  background: var(--color-ink); color: var(--color-paper);
  position: relative; overflow: hidden;
}
.boiler-hero-inner { padding: var(--space-11) var(--space-9) var(--space-9); max-width: var(--grid-max); margin: 0 auto; position: relative; z-index: 2; }
.boiler-hero h2 { color: var(--color-paper); font-size: clamp(56px, 6vw, 88px); max-width: 16ch; margin: 0 0 var(--space-5); letter-spacing: -0.035em; line-height: 0.98; }
.boiler-hero p.lead { color: var(--fg-on-inverse-muted); margin: 0; font-size: var(--fs-body-lg); }
.boiler-hero .grid-bg-overlay {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgb(244 241 234 / 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(244 241 234 / 0.04) 1px, transparent 1px);
  background-size: 88px 88px;
  z-index: 1;
}
@media (max-width: 900px) { .boiler-hero-inner { padding: var(--space-9) var(--space-6) var(--space-7); } }


/* signal-num: monospace inline highlight in regular copy */
.signal-num { font-family: var(--font-mono); color: var(--color-signal); letter-spacing: -0.01em; white-space: nowrap; }

/* ============================================================
   DIAGRAM BLOCK (section 10)
   ============================================================ */
.diagram { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-11); align-items: center; }
.diagram-img { background: var(--color-paper-2); padding: var(--space-7); border: 1px solid var(--border-subtle); border-radius: var(--radius-1); }
.diagram-copy h3 { margin-bottom: var(--space-5); }
.diagram-fuels { display: grid; gap: var(--space-3); margin-top: var(--space-7); }
.fuel-row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle); transition: color 0.18s; }
.fuel-row:last-child { border-bottom: 0; }
.fuel-row:hover .fuel-name { font-weight: var(--fw-semibold); }
.fuel-row:hover .fuel-meta { color: var(--fg-default); }
.fuel-dot { width: 10px; height: 10px; border-radius: 50%; }
.fuel-dot.arc { background: var(--color-arc); }
.fuel-dot.ember { background: var(--color-ember); }
.fuel-dot.ink { background: var(--color-ink); }
.fuel-name { font-weight: var(--fw-medium); }
.fuel-meta { font-family: var(--font-mono); font-size: var(--fs-mono-sm); color: var(--fg-muted); }
@media (max-width: 900px) { .diagram { grid-template-columns: 1fr; gap: var(--space-7); } }

/* ============================================================
   CONFIGURATIONS TABLE (section 11)
   ============================================================ */
.configs { width: 100%; border-collapse: collapse; }
.configs caption { display: none; }
.configs th, .configs td {
  padding: var(--space-5) var(--space-5) var(--space-5) 0;
  text-align: left;
  border-bottom: 1px solid var(--border-default);
  font-family: var(--font-mono); font-size: var(--fs-body-sm);
  vertical-align: top;
}
.configs th {
  font-weight: var(--fw-medium); color: var(--fg-muted);
  font-size: var(--fs-mono-sm); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  border-bottom: 1px solid var(--border-strong);
}
.configs .model { font-weight: var(--fw-medium); color: var(--color-ink); }

/* ============================================================
   VALVE CALLOUT (section 12)
   ============================================================ */
.valve {
  padding: var(--space-9);
  background: var(--color-paper-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2);
}
.valve .eyebrow { margin-bottom: var(--space-4); }
.valve h3 { margin-bottom: var(--space-5); max-width: 20ch; }
.valve p { font-size: var(--fs-body-lg); max-width: 64ch; }

/* ============================================================
   BOILOPTIMIZER (section 13)
   ============================================================ */
.optimizer { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--border-default); }
.opt-col { padding: var(--space-9) var(--space-7) var(--space-9) 0; border-right: 1px solid var(--border-default); }
.opt-col:last-child { border-right: 0; padding-right: 0; padding-left: var(--space-7); }
.opt-col .eyebrow { margin-bottom: var(--space-5); }
.opt-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.opt-list li {
  font-family: var(--font-mono); font-size: var(--fs-body-sm);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.opt-list li:last-child { border-bottom: 0; }
.opt-foot { padding: var(--space-6) 0; border-top: 1px solid var(--border-default); margin-top: var(--space-9); font-family: var(--font-mono); font-size: var(--fs-body-sm); color: var(--fg-muted); }
@media (max-width: 900px) {
  .optimizer { grid-template-columns: 1fr; }
  .opt-col { border-right: 0; border-bottom: 1px solid var(--border-default); padding: var(--space-7) 0; }
  .opt-col:last-child { padding-left: 0; border-bottom: 0; }
}

/* ============================================================
   DASHBOARD PREVIEW (section 14) — portal-style
   ============================================================ */
.dash-caption {
  font-family: var(--font-mono); font-size: var(--fs-mono-sm);
  color: var(--fg-muted); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; margin-bottom: var(--space-5);
}
.dash-frame {
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-2);
  overflow: hidden;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  box-shadow: 0 12px 40px rgba(14,20,17,0.10), 0 2px 8px rgba(14,20,17,0.06);
}

/* Window chrome */
.portal-chrome {
  display: flex; align-items: center; gap: var(--space-4);
  padding: 11px var(--space-6);
  background: #F7F8F7;
  border-bottom: 1px solid rgba(14,20,17,0.09);
}
.portal-chrome-dots { display: flex; gap: 6px; flex-shrink: 0; }
.portal-chrome-dots span { width: 12px; height: 12px; border-radius: 50%; }
.pcd-red { background: #FF5F57; }
.pcd-yellow { background: #FFBD2E; }
.pcd-green { background: #28C840; }
.portal-chrome-label { flex: 1; text-align: center; font-size: 12px; color: rgba(14,20,17,0.35); letter-spacing: 0.04em; }
.portal-chrome-live {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--color-signal);
}
.live-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--color-signal);
  animation: pulse 1.6s var(--ease-in-out) infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Portal layout */
.portal-layout { display: flex; }
.portal-sidebar {
  width: 52px; flex-shrink: 0;
  background: #F7F8F7;
  border-right: 1px solid rgba(14,20,17,0.08);
  display: flex; flex-direction: column; align-items: center;
  padding: var(--space-5) 0; gap: var(--space-2);
}
.portal-nav-item {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(14,20,17,0.22); cursor: default;
}
.portal-nav-item svg { width: 16px; height: 16px; }
.portal-nav-item--active { background: rgba(31,138,91,0.12); color: var(--color-signal); }
.portal-nav-item--end { margin-top: auto; }
.portal-main { flex: 1; overflow: hidden; display: flex; flex-direction: column; }

/* In-app topbar */
.portal-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding: var(--space-3) var(--space-6);
  border-bottom: 1px solid rgba(14,20,17,0.08);
  flex-wrap: wrap;
}
.portal-breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; color: rgba(14,20,17,0.38); letter-spacing: 0.02em; }
.portal-bc-sep { color: rgba(14,20,17,0.2); }
.portal-bc-active { color: rgba(14,20,17,0.7); }
.portal-topbar-end { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.portal-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 4px;
  border: 1px solid rgba(14,20,17,0.12);
  font-size: 10px; color: rgba(14,20,17,0.45);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
}
.portal-chip--green { border-color: rgba(31,138,91,0.35); color: var(--color-signal); background: rgba(31,138,91,0.07); }

/* Primary KPI row */
.portal-kpis { display: grid; grid-template-columns: 1.5fr 1fr 1fr; border-bottom: 1px solid rgba(14,20,17,0.08); }
.portal-kpi { padding: var(--space-7); border-right: 1px solid rgba(14,20,17,0.08); }
.portal-kpi:last-child { border-right: none; }
.portal-kpi--hero { background: rgba(31,138,91,0.04); }
.portal-kpi-label {
  font-size: 10px; font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: rgba(14,20,17,0.42); margin-bottom: var(--space-3);
}
.portal-kpi-val {
  font-size: clamp(22px, 3vw, 32px); font-weight: var(--fw-medium);
  font-family: var(--font-mono);
  letter-spacing: -0.025em; line-height: 1;
  color: rgba(14,20,17,0.85); margin-bottom: var(--space-2);
}
.portal-kpi--hero .portal-kpi-val { font-size: clamp(32px, 4.5vw, 52px); color: var(--color-signal); }
.portal-kpi-val--earn { color: var(--color-signal); }
.portal-kpi-unit { font-size: 12px; font-weight: var(--fw-regular); color: rgba(14,20,17,0.3); letter-spacing: 0; margin-left: 4px; }
.portal-kpi-delta { font-size: 11px; font-weight: var(--fw-medium); letter-spacing: 0.01em; margin-bottom: var(--space-2); }
.portal-kpi-delta--good { color: var(--color-signal); }
.portal-kpi-delta--neutral { color: rgba(14,20,17,0.4); }
.portal-kpi-meta { font-size: 10px; color: rgba(14,20,17,0.32); letter-spacing: 0.02em; line-height: 1.6; }

/* Secondary row */
.portal-secondary { display: grid; grid-template-columns: 1fr 1.4fr; }
.portal-sec-cell { padding: var(--space-7); border-right: 1px solid rgba(14,20,17,0.08); }
.portal-sec-cell:last-child { border-right: none; }
.portal-steam-val {
  font-size: clamp(26px, 3.5vw, 40px); font-weight: var(--fw-medium);
  font-family: var(--font-mono);
  letter-spacing: -0.02em; line-height: 1;
  color: rgba(14,20,17,0.85);
  margin: var(--space-3) 0 var(--space-2);
}

/* Mix bar */
.dash-mix { display: flex; height: 8px; border-radius: 2px; overflow: hidden; margin-top: var(--space-4); }
.dash-mix span { display: block; height: 100%; }
.dash-mix .e { background: var(--color-arc); }
.dash-mix .b { background: var(--color-signal); }
.dash-mix .g { background: var(--color-ember); }
.dash-mix-legend { display: flex; gap: var(--space-5); margin-top: var(--space-3); font-size: 11px; color: rgba(14,20,17,0.45); }
.dash-mix-legend .swatch { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }

/* Responsive */
@media (max-width: 900px) {
  .portal-sidebar { display: none; }
  .portal-kpis { grid-template-columns: 1fr; }
  .portal-kpi { border-right: none; border-bottom: 1px solid rgba(244,241,234,0.07); }
  .portal-secondary { grid-template-columns: 1fr; }
  .portal-sec-cell { border-right: none; border-bottom: 1px solid rgba(244,241,234,0.07); }
}

/* ============================================================
   RELIABILITY (section 15)
   ============================================================ */
.reliability { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); }
.reliability > div {
  padding: var(--space-7) var(--space-5) var(--space-7) 0;
  border-right: 1px solid var(--border-default);
  font-family: var(--font-mono); font-size: var(--fs-body-sm);
}
.reliability > div:last-child { border-right: 0; }
.reliability strong { display: block; font-size: var(--fs-h3); font-weight: var(--fw-medium); margin-bottom: var(--space-2); }
@media (max-width: 900px) {
  .reliability { grid-template-columns: 1fr; }
  .reliability > div { border-right: 0; border-bottom: 1px solid var(--border-default); padding: var(--space-5) 0; }
  .reliability > div:last-child { border-bottom: 0; }
}

/* ============================================================
   LINDGÅRDEN HERO (section 16) — kept as fallback selectors
   ============================================================ */
.lind-hero { padding: var(--space-13) 0 var(--space-10); }
.lind-hero h2 { font-size: var(--fs-display-2); max-width: 22ch; }
.lind-hero p.lead { margin-top: var(--space-7); max-width: 68ch; }

/* ============================================================
   PINNED SCROLL-SCRUB VIDEO
   - Section is taller than the viewport (data-video-runway = vh × 1)
   - Stage is sticky to viewport while in range
   - <video> fills the stage; JS maps scroll progress → currentTime
   - Caption overlays via z-index + protection gradient
   ============================================================ */
.video-pin {
  position: relative;
  background: var(--color-ink);
  padding: 0;
  /* Runway tuned to roughly: ~40vh of scroll per second of video.
     - 5s boiler video → 200vh
     - 10s Lindgården aerial → 300vh */
  height: 200vh;
}
.video-pin--boiler { height: 500vh; }
.video-pin--lind { height: 500vh; }

.video-pin-stage {
  position: sticky; top: 72px;
  width: 100%;
  height: calc(100vh - 72px);
  overflow: hidden;
  display: flex; align-items: flex-end; justify-content: flex-start;
}
@media (max-width: 900px) {
  .video-pin-stage { top: 64px; height: calc(100vh - 64px); }
}
.video-pin-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  background: var(--color-ink); /* prevents flash before frames load */
}
.video-pin-overlay {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Mild bottom protection so caption stays legible regardless of frame */
  background: linear-gradient(180deg,
    rgb(14 20 17 / 0) 0%,
    rgb(14 20 17 / 0) 50%,
    rgb(14 20 17 / 0.75) 100%);
}
.video-pin-overlay--lind {
  /* Stronger protection for the heading sitting bottom-left */
  background:
    linear-gradient(180deg, rgb(14 20 17 / 0.25) 0%, rgb(14 20 17 / 0) 30%, rgb(14 20 17 / 0) 50%, rgb(14 20 17 / 0.85) 100%),
    linear-gradient(90deg, rgb(14 20 17 / 0.55) 0%, rgb(14 20 17 / 0) 60%);
}
.video-pin-caption {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: var(--space-9);
  color: var(--color-paper);
}
.video-pin-caption .eyebrow { display: block; margin-bottom: var(--space-4); color: var(--fg-on-inverse-muted); }
.video-pin-caption p {
  font-size: var(--fs-body-lg);
  max-width: 48ch;
  margin: 0;
  color: var(--fg-on-inverse-muted);
}
.video-pin-caption--lind {
  padding: 0 var(--space-9) var(--space-13);
}
.video-pin-caption--lind h2 {
  font-size: clamp(48px, 5.4vw, 80px);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-tighter);
  line-height: 1.02;
  max-width: 22ch;
  margin: 0;
  color: var(--color-paper);
  text-wrap: balance;
}

/* Scroll-driven caption panels for the Lindgården video */
.vpc-stack {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  pointer-events: none;
  padding: 0 var(--space-9) var(--space-13);
}
.vpc {
  position: absolute;
  bottom: 0; left: var(--space-9); right: var(--space-9);
  color: var(--color-paper);
  opacity: 0;
  will-change: opacity, transform;
}
.vpc--intro { opacity: 1; }
.vpc--intro h2 {
  font-size: clamp(48px, 5.4vw, 80px);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-tighter);
  line-height: 1.02;
  max-width: 22ch;
  margin: 0;
  text-wrap: balance;
}
.vpc--intro .eyebrow { display: block; margin-bottom: var(--space-4); color: var(--fg-on-inverse-muted); }
.vpc--quote blockquote {
  font-size: clamp(28px, 3.4vw, 52px);
  font-weight: var(--fw-medium);
  line-height: 1.18;
  letter-spacing: var(--tracking-tight);
  max-width: 28ch;
  margin: 0 0 var(--space-5);
  quotes: none;
}
.vpc--quote cite {
  display: block;
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--fg-on-inverse-muted);
}
.vpc--savings .eyebrow { display: block; margin-bottom: var(--space-4); color: var(--fg-on-inverse-muted); }
.vpc-num {
  font-size: clamp(52px, 7vw, 96px);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tighter);
  line-height: 1.0;
  margin: 0 0 var(--space-4);
}
.vpc-sub {
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--fg-on-inverse-muted);
  margin: 0;
}

@media (max-width: 900px) {
  .video-pin { height: 180vh; }
  .video-pin--lind { height: 350vh; }
  .video-pin-caption { padding: var(--space-7); }
  .video-pin-caption--lind { padding: 0 var(--space-6) var(--space-11); }
  .vpc-stack { padding: 0 var(--space-6) var(--space-11); }
  .vpc { left: var(--space-6); right: var(--space-6); }
}

/* Loading state: dim the section slightly until video metadata is ready */
.video-pin:not(.is-ready) .video-pin-media { opacity: 0.4; }
.video-pin.is-ready .video-pin-media { opacity: 1; transition: opacity 600ms var(--ease-out); }

/* When videos can't load (no file present) just present the poster fallback */
.video-pin.is-error .video-pin-media { display: none; }
.video-pin.is-error .video-pin-stage { background:
  radial-gradient(ellipse at top, #1A211D, #0E1411 70%); }

/* setup grid (section 17) */
.setup { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border-default); }
.setup > div {
  padding: var(--space-7) var(--space-5) var(--space-7) 0;
  border-right: 1px solid var(--border-default);
}
.setup > div:last-child { border-right: 0; }
.setup .label { font-family: var(--font-mono); font-size: var(--fs-mono-sm); color: var(--fg-muted); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; margin-bottom: var(--space-3); }
.setup .value { font-family: var(--font-mono); font-size: var(--fs-body); }
@media (max-width: 900px) {
  .setup { grid-template-columns: repeat(2, 1fr); }
  .setup > *:nth-child(2) { border-right: 0; }
  .setup > *:nth-child(1), .setup > *:nth-child(2) { border-bottom: 1px solid var(--border-default); }
}

/* ============================================================
   CHART (section 18) — the second peak moment
   ============================================================ */
.chart-wrap { padding: 0; }
.chart-frame {
  background: var(--color-paper-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2);
  padding: var(--space-9);
}
.chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-7); margin-bottom: var(--space-7); flex-wrap: wrap; }
.chart-head .eyebrow { margin: 0; }
.chart-legend { display: flex; gap: var(--space-7); flex-wrap: wrap; }
.chart-legend span { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--fs-body-sm); color: var(--fg-muted); }
.chart-legend .swatch { width: 14px; height: 2px; }
.chart-legend .gas .swatch { background: var(--color-steel-400); }
.chart-legend .bg .swatch { background: var(--color-signal); }
#chart-svg { width: 100%; height: auto; }

/* ============================================================
   OUTCOMES (section 19)
   ============================================================ */
.outcomes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); }
.outcome { padding: var(--space-7) var(--space-5); border-right: 1px solid var(--border-default); transition: background 0.18s; }
.outcome:hover { background: var(--color-paper-2); }
.outcome:hover .outcome-num { color: var(--color-signal); }
.outcome:first-child { padding-left: 0; }
.outcome:last-child { border-right: 0; padding-right: 0; }
.outcome-num {
  font-family: var(--font-mono);
  font-size: clamp(28px, 2.6vw, 36px);
  font-weight: var(--fw-medium); letter-spacing: -0.02em;
  margin-bottom: var(--space-3); display: block;
}
.outcome:first-child .outcome-num { color: var(--color-signal); }
.outcome-label { font-size: var(--fs-body-sm); color: var(--fg-muted); }
@media (max-width: 900px) {
  .outcomes { grid-template-columns: 1fr 1fr; }
  .outcome:nth-child(2n) { border-right: 0; }
  .outcome:not(:nth-last-child(-n+2)) { border-bottom: 1px solid var(--border-default); }
  .outcome:nth-child(5) { grid-column: 1 / -1; border-bottom: 0; }
}

/* ============================================================
   PULL QUOTE (section 20)
   ============================================================ */
.pullquote {
  background: var(--color-ink); color: var(--color-paper);
}
.pullquote-inner { max-width: var(--grid-max); margin: 0 auto; padding: var(--space-13) var(--space-9); }
.pullquote blockquote {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-tighter);
  line-height: 1.18;
  max-width: 26ch;
}
.pullquote-attr {
  margin-top: var(--space-9);
  display: flex; align-items: center; gap: var(--space-5);
  font-family: var(--font-mono); font-size: var(--fs-mono-sm);
  color: var(--fg-on-inverse-muted);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
}
.pullquote-attr .rule { width: 32px; height: 1px; background: var(--color-paper-24); }
@media (max-width: 900px) { .pullquote-inner { padding: var(--space-11) var(--space-6); } }

/* ============================================================
   FIT (section 21)
   ============================================================ */
.fit { max-width: 70ch; }
.fit p { font-size: var(--fs-body-lg); }
.fit p + p { margin-top: var(--space-6); }
.fit .closing { font-weight: var(--fw-medium); }

/* ============================================================
   PRICING (section 22)
   ============================================================ */
.pricing { padding: var(--space-11) 0; border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); }
.pricing-grid { display: grid; grid-template-columns: 1fr auto; gap: var(--space-9); align-items: center; }
.pricing h3 { font-size: var(--fs-h2); max-width: 18ch; }
.pricing p { margin-top: var(--space-4); color: var(--fg-muted); }
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } }

/* ============================================================
   LOGO STRIP — infinite horizontal ticker
   ============================================================ */
.logos { padding: var(--space-9) 0 var(--space-8); }
.logos-eyebrow { font-family: var(--font-mono); font-size: var(--fs-mono-sm); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg-muted); margin-bottom: var(--space-7); display: block; padding: 0 var(--space-9); }
@media (max-width: 900px) { .logos-eyebrow { padding: 0 var(--space-6); } }

.logos-ticker { overflow: hidden; }
.logos-ticker-track {
  display: flex;
  width: max-content;
  animation: logos-scroll 38s linear infinite;
}
.logos-ticker-set {
  display: flex;
  align-items: center;
  gap: var(--space-13);
  padding-right: var(--space-13);
  flex-shrink: 0;
}
.logos-ticker-set img {
  height: 28px;
  width: auto;
  opacity: 0.5;
  filter: grayscale(1);
  flex-shrink: 0;
  transition: opacity var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out);
}
.logos-ticker-set img:hover { opacity: 0.85; filter: grayscale(0); }
@keyframes logos-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logos-ticker-track { animation: none; }
}

/* ============================================================
   FOOTER (section 24)
   ============================================================ */
.footer { background: var(--color-ink); color: var(--color-paper); }
.footer-inner { max-width: var(--grid-max); margin: 0 auto; padding: var(--space-11) var(--space-9) var(--space-9); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--space-9); padding-bottom: var(--space-11); border-bottom: 1px solid var(--color-paper-12); }
.footer-grid h5 { font-family: var(--font-mono); font-size: var(--fs-mono-sm); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg-on-inverse-muted); font-weight: var(--fw-medium); margin: 0 0 var(--space-5); }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.footer-grid a { color: var(--color-paper); text-decoration: none; opacity: 0.85; transition: opacity var(--dur-base) var(--ease-out); font-size: var(--fs-body-sm); }
.footer-grid a:hover { opacity: 1; }
.footer-mark svg { height: 28px; width: auto; margin-bottom: var(--space-5); }
.footer-mark p { color: var(--fg-on-inverse-muted); max-width: 36ch; font-size: var(--fs-body-sm); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-7); font-family: var(--font-mono); font-size: var(--fs-mono-sm); color: var(--fg-on-inverse-muted); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; flex-wrap: wrap; gap: var(--space-4); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-7); } .footer-inner { padding: var(--space-9) var(--space-6) var(--space-7); } }

/* ============================================================
   reduced motion fallback
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .fu { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
  .live-dot { animation: none; }
}