/* ==========================================================================
   MetersBoard — metersboard.com
   A product of Enercon Digital.

   This stylesheet is a static-HTML port of the Enercon Digital design system.
   Nothing here is invented: the tokens, the type roles and the page blocks are
   lifted from styles/tokens.css, styles/type-system.css, styles/site-surface.css
   and styles/site.css in the enercon.digital build, flattened into one file so
   this site can ship as plain HTML with no build step.

   THE NAVY FENCE. #131A3D is MetersBoard's surface and nothing else's. On the
   parent site it is scoped to /metersboard's own root so it cannot leak into a
   default dark page by inheritance. Here the whole site IS MetersBoard, so it
   is set on :root — but the ramp is identical, token for token.

   THREE FACES, THREE JOBS.
     Archivo      display  — every heading and display figure. Variable on BOTH
                             axes (wdth 62..125, wght 100..900): expanded and
                             heavy it reads as engineered plate lettering,
                             condensed it sets a spec table.
     Figtree      text     — all running copy, labels and small text.
     Roboto Mono  data     — every number, unit, timestamp and identifier.

   THE PHYSICS PALETTE. A colour is never used for a thing it does not mean.
   measure = the platform and its data. energy = load. saving = recovered.
   loss = waste, out of policy. baseline = the neutral reference. The moment
   one of them appears on something it does not name, the system is decoration.
   ========================================================================== */

/* ── TYPE ───────────────────────────────────────────────────────────────────
   The same three families the parent site loads, from the same source, so a
   heading here and a heading on enercon.digital are the same object. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&family=Figtree:ital,wght@0,300..900;1,300..900&family=Roboto+Mono:wght@400;500;600&display=swap');

:root {
  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-text:    "Figtree", system-ui, -apple-system, sans-serif;
  --font-data:    "Roboto Mono", ui-monospace, Menlo, monospace;

  /* Archivo's width axis — four stops. This is the axis that lets one family
     cover a 66px page title and a 12px spec label without a second face. */
  --wd-wide: 122;  /* h1, display figures */
  --wd-mid:  112;  /* h2, h3 */
  --wd-norm: 100;  /* running heads */
  --wd-cond: 87;   /* spec tables, dense labels */

  --w-text: 450; --w-text-dark: 500; --w-display: 800; --w-display-2: 700;
  --track-tight: -.018em; --track-wide: .12em;

  /* Density — .d-web from tokens.css. Fluid typography for a modern frontend feel. */
  --fs-kicker: clamp(0.6875rem, 1vw + 0.5rem, 0.75rem); /* 11px to 12px */
  --fs-h1: clamp(2.5rem, 5vw + 1rem, 4.125rem); /* ~40px to 66px */
  --fs-h2: clamp(1.625rem, 3vw + 0.5rem, 2.25rem); /* ~26px to 36px */
  --fs-h3: clamp(1.1875rem, 2vw + 0.5rem, 1.5rem); /* ~19px to 24px */
  --fs-deck: clamp(1.125rem, 2vw + 0.5rem, 1.25rem); /* ~18px to 20px */
  --fs-body: 1rem; /* 16px */
  --fs-small: 0.875rem; /* 14px */
  --fs-micro: 0.75rem; /* 12px */
  --fs-stat: clamp(2.5rem, 5vw + 1rem, 3.5rem); /* 40px to 56px */
  --lh-body: 1.6; --band: 96px;

  /* ── THE NAVY FENCE ───────────────────────────────────────────────────── */
  --surface:         #131A3D;
  --surface-raised:  #1B2450;
  --surface-sunken:  #0E1430;
  --hairline:        #26315C;
  --hairline-strong: #38457A;

  --ink:       #EAEEFF;
  --ink-muted: #A8B2D8;
  --ink-faint: #7B85AE;

  --brand:       #4FA8FF;
  --brand-quiet: #1B2450;
  --brand-hi:    #9CCBFF;
  --cta:         #005BE2;
  --cta-deep:    #0048B4;

  /* The physics palette. */
  --measure:  #4FA8FF;
  --energy:   #F2A93B;
  --saving:   #23C7B0;
  --loss:     #FF7A85;
  --baseline: #C9B89A;

  --positive: var(--saving);
  --negative: var(--loss);
  --data:     #8E9AC6;

  /* The live-site signature ramp. Primary control and one hero accent only —
     never a text fill, which is where it read as generated.

     RETUNED FOR THE LABEL. The parent's ramp runs #2563EB → #14B8A6 across
     the whole control, and white on that mint terminus is 2.49:1 — the button
     label failed AA over its trailing third. The blue now holds to 55% and
     the teal is deepened to #0F9082, which keeps the sweep and its two hues
     but puts the worst point under the label at 4.67:1 and the trailing edge
     at 3.94:1. Worth porting back to styles/site-surface.css. */
  --grad-brand: linear-gradient(100deg, #2563EB 0%, #2563EB 55%, #0F9082 100%);

  /* CONTROL EDGES, separate from --hairline-strong on purpose.
     --hairline-strong is a decorative section rule and is exempt from the
     3:1 non-text minimum. The same token was also drawing the boundary of
     every outline button, chip and slider track, where it is NOT exempt and
     measured 1.85:1. Splitting the two keeps the section rules quiet and
     brings the controls up to 3.76:1 without brightening the whole page. */
  --control-edge: #6274B4;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; width: 100%; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
[hidden] { display: none !important; }

body {
  min-height: 100%;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: var(--w-text-dark);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Premium UI Touches */
::selection { background: rgba(79, 168, 255, 0.3); color: #fff; }
::-moz-selection { background: rgba(79, 168, 255, 0.3); color: #fff; }

/* Custom Dark Scrollbar */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--surface-sunken); border-left: 1px solid var(--hairline); }
::-webkit-scrollbar-thumb { background: var(--control-edge); border-radius: 6px; border: 3px solid var(--surface-sunken); }
::-webkit-scrollbar-thumb:hover { background: var(--brand); }

/* Hover moves TOWARD the brand, not away to white. */
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hi); }

img, video, svg, picture { max-width: 100%; height: auto; object-fit: contain; }
:focus-visible { 
  outline: none; 
  box-shadow: 0 0 0 3px rgba(79, 168, 255, 0.4); 
  border-radius: 2px;
  transition: box-shadow 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--cta); color: #fff;
  font-family: var(--font-text); font-weight: 600; font-size: 14px;
  padding: 12px 20px; border-radius: 0 0 4px 0;
}
.skip:focus { left: 0; color: #fff; }

/* ── TYPE ROLES ─────────────────────────────────────────────────────────────
   Display roles ride Archivo's width axis. Text roles take Figtree. Values
   take Roboto Mono. There is no fourth case.
   ─────────────────────────────────────────────────────────────────────────── */

.h1 {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--wd-wide), 'wght' var(--w-display);
  font-size: var(--fs-h1); line-height: 1.0;
  letter-spacing: var(--track-tight); color: var(--ink);
  margin: 0; text-wrap: balance;
}
.h2 {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--wd-mid), 'wght' var(--w-display-2);
  font-size: var(--fs-h2); line-height: 1.14;
  letter-spacing: var(--track-tight); color: var(--ink);
  margin: 0; text-wrap: balance;
}
.h3 {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--wd-norm), 'wght' var(--w-display-2);
  font-size: var(--fs-h3); line-height: 1.2; color: var(--ink);
  margin: 0; text-wrap: balance;
}
.deck  { font-size: var(--fs-deck);  line-height: 1.5;  color: var(--ink-muted); margin: 0; text-wrap: pretty; }
.body  { font-size: var(--fs-body);  line-height: 1.6;  color: var(--ink-muted); margin: 0; text-wrap: pretty; }
.small { font-size: var(--fs-small); line-height: 1.55; color: var(--ink-muted); margin: 0; }
.micro { font-size: var(--fs-micro); line-height: 1.5;  color: var(--ink-muted); margin: 0; font-weight: var(--w-text); }
.deck, .body, .small { font-family: var(--font-text); font-weight: var(--w-text-dark); }
.micro { font-family: var(--font-text); }

.mono { font-family: var(--font-data); font-style: normal; font-variant-numeric: tabular-nums; }
.cond {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--wd-cond), 'wght' 600;
  letter-spacing: .01em;
}

/* THE TAG — uppercase mono label. Tone is a modifier, never an inline colour. */
.tag {
  font-family: var(--font-data); font-size: var(--fs-micro);
  letter-spacing: .11em; text-transform: uppercase;
  font-style: normal; font-weight: 500;
  color: var(--ink-faint); display: inline-block;
}
.tag--brand { color: var(--brand); }
.tag--data  { color: var(--data); }
.tag--loss  { color: var(--loss); }
.tag--ink   { color: var(--ink); }

/* THE INDEX NUMBER — 01 / 02 / 03. Not uppercased: these are digits. */
.idx {
  font-family: var(--font-data); font-size: var(--fs-micro);
  letter-spacing: .1em; font-style: normal; font-weight: 500;
  color: var(--brand); font-variant-numeric: tabular-nums;
}

.eyebrow {
  font-family: var(--font-data); font-size: var(--fs-kicker);
  letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--ink-faint); font-weight: 500; font-style: normal;
  /* inline-flex without wrap made a long kicker a single unbreakable run,
     which on a 390px screen reached the trim exactly. */
  display: inline-flex; align-items: center; gap: .7em; flex-wrap: wrap;
}
.eyebrow--muted { color: var(--ink-muted); }

/* ── SECTIONS AND MEASURE ───────────────────────────────────────────────── */

.section { border-top: 1px solid var(--hairline); }
.section--sunken { background: var(--surface-sunken); }
.section--raised { background: var(--surface-raised); }

.wrap { max-width: 1320px; margin: 0 auto; padding: var(--band) 40px; }
.wrap--half { padding: calc(var(--band) * .55) 40px; }

/* Columns come from --split so a breakpoint collapses the layout by resetting
   one variable — no !important, no fight with inline styles. */
.split {
  display: grid;
  grid-template-columns: var(--split, minmax(0, 1fr) minmax(0, 1fr));
  gap: var(--split-gap, 56px);
  align-items: var(--split-align, start);
}

/* ── SECTION HEAD ───────────────────────────────────────────────────────── */

.head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 30px; flex-wrap: wrap; margin-bottom: 26px;
}
.head__title { margin-top: 14px; }
.head__aside { max-width: 30em; }
.head--ruled {
  align-items: baseline; gap: 24px; padding-bottom: 12px;
  border-bottom: 2px solid var(--hairline-strong); margin-bottom: 30px;
}

/* ── NAV ────────────────────────────────────────────────────────────────────
   The parent site's bar, ported. Pill links, a rule under the current page
   rather than a filled chip — position, not a selected control.
   ─────────────────────────────────────────────────────────────────────────── */

.nav {
  border-bottom: 1px solid var(--hairline);
  position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 60;
  background: rgba(19, 26, 61, .88);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
body { padding-top: 73px; }
.nav.is-scrolled {
  background: rgba(19, 26, 61, .96);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}
.nav__bar {
  max-width: 1320px; margin: 0 auto; padding: 16px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
}

/* The lockup. MetersBoard's own wordmark, with the parent's mark beside it —
   the product is never presented without the company that makes it. */
.brand { display: flex; align-items: center; gap: 16px; flex: none; text-decoration: none; }
.brand:hover { color: inherit; }
.brand__wm {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--wd-mid), 'wght' var(--w-display);
  font-size: 21px; letter-spacing: var(--track-tight); color: var(--ink);
  line-height: 1;
}
.brand__wm b { color: var(--brand); font-weight: inherit; }
.brand__by {
  display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
  padding-left: 16px; border-left: 1px solid var(--hairline-strong);
}
.brand__by img { height: 22px; width: 71px; display: block; }
.brand__by span {
  font-family: var(--font-data); font-size: 9px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-faint); line-height: 1;
}
@media (max-width: 620px) { .brand__by { display: none; } }

.nav__links {
  display: flex; gap: 2px; align-items: center; flex-wrap: wrap;
  justify-content: flex-end; flex: 1;
}
.nav__link {
  font-family: var(--font-text); font-size: 13.5px; font-weight: 500;
  color: var(--ink-muted); text-decoration: none;
  padding: 9px 13px; border-radius: 9999px; position: relative;
}
.nav__link:hover { color: var(--ink); background: var(--brand-quiet); }
.nav__link.is-current { color: var(--ink); }
.nav__link.is-current::after {
  content: ''; position: absolute;
  left: 13px; right: 13px; bottom: 2px; height: 2px;
  background: var(--brand); border-radius: 1px;
}
.nav__cta { margin-left: 8px; }
/* The demo page's own CTA. A filled pill already reads as a destination, so
   it takes the brand edge rather than the position underline — which inside a
   rounded control looked like a rendering fault. aria-current still carries
   the fact for anything that is not looking at it. */
.nav__cta.is-current { border-color: var(--brand); color: var(--brand); background: var(--brand-quiet); }
.nav__cta.is-current::after { content: none; }

.nav__burger {
  display: none; background: transparent; border: 1px solid var(--control-edge);
  color: var(--ink); border-radius: 9999px; width: 44px; height: 40px;
  cursor: pointer; align-items: center; justify-content: center; flex: none;
}
.nav__burger svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: butt; }

/* The parent site collapses at 1180. This bar is shorter, so it holds to 940
   — but it COLLAPSES, which the old MetersBoard site never did: below its
   breakpoint the links were display:none with nothing in their place. */
@media (max-width: 940px) {
  .nav__bar { padding: 14px 28px; }
  .nav__burger { display: flex; }
  .nav__links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--surface-raised);
    border-bottom: 1px solid var(--hairline-strong);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding: 12px 28px 22px; gap: 2px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
  }
  .nav__links.is-open { display: flex; }
  .nav__link { padding: 12px 14px; font-size: 15px; }
  .nav__link.is-current::after { left: 14px; right: auto; width: 22px; }
  .nav__cta { margin: 10px 0 0; justify-content: center; }
}

/* ── CONTROLS ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--font-text); font-weight: 600;
  border-radius: 9999px; white-space: nowrap; cursor: pointer;
  text-decoration: none;
  transition: background-color 140ms ease, border-color 140ms ease,
              color 140ms ease, box-shadow 140ms ease;
}
/* The one saturated element on the page. */
.btn--primary {
  background-color: var(--cta); background-image: var(--grad-brand);
  color: #fff; border: 0; height: 54px; padding: 0 32px; font-size: 15px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 4px 14px rgba(0, 91, 226, 0.3);
}
.btn--primary:hover {
  background-image: none; background-color: var(--cta-deep); color: #fff;
  box-shadow: 0 6px 20px rgba(0, 91, 226, 0.5), 0 0 0 3px var(--brand-quiet);
  transform: translateY(-2px);
}
.btn--primary:active {
  transform: translateY(1px);
}
.btn--secondary {
  height: 48px; padding: 0 24px; font-size: 14px;
  border: 1px solid var(--control-edge); background: transparent; color: var(--ink);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.btn--secondary:hover { 
  border-color: var(--brand); color: var(--brand); background: var(--brand-quiet);
  transform: translateY(-2px);
}
.btn--secondary:active {
  transform: translateY(1px);
}
.btn--small { height: 44px; padding: 0 22px; font-size: 13.5px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.link-mark {
  font-family: var(--font-data); font-size: var(--fs-micro);
  letter-spacing: .08em; text-transform: uppercase; color: var(--brand);
  display: inline-flex; align-items: center; gap: .6em; font-style: normal;
  transition: color 140ms ease, gap 300ms cubic-bezier(0.25, 0.8, 0.25, 1);
}
.link-mark:hover { color: var(--brand-hi); gap: 1em; }

/* ── HERO ───────────────────────────────────────────────────────────────────
   The scrim is directional — dark where the type sits, open on the media side
   — over the Figma ramp, so the footage reads and the hero is unmistakably the
   brand's blue. A flat wash made the video invisible and left the page with no
   saturated colour anywhere.
   ─────────────────────────────────────────────────────────────────────────── */

.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--hairline); }
.hero__media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 62%; opacity: .5;
  /* A slow drift, so the band is alive without anything moving fast enough to
     read as motion. 26 seconds and 6% of travel — under reduced motion it
     holds still at the mid-point rather than being removed. */
  animation: heroDrift 26s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.4%, -1%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__media { animation: none; transform: scale(1.08); }
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(97deg,
      rgba(19, 26, 61, .96) 0%, rgba(19, 26, 61, .91) 34%,
      rgba(19, 26, 61, .55) 68%, rgba(19, 26, 61, .70) 100%),
    linear-gradient(-74.647deg,
      rgba(0, 180, 255, .22) 1.8%, rgba(0, 91, 226, .30) 56.35%, rgba(2, 21, 77, .62) 100%);
}
.hero__inner {
  position: relative; max-width: 1320px; margin: 0 auto;
  padding: calc(var(--band) * 1.25) 40px;
}
.hero__actions {
  margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
}

/* Hero content GPU acceleration */
.hero .h1, .hero .deck, .hero .eyebrow {
  will-change: transform, opacity;
}

/* The figure strip along the foot of the hero. Every figure carries its basis
   — that rule is not relaxed because the figure is in a hero. */
.hero__figs {
  position: relative; max-width: 1320px; margin: 0 auto;
  padding: 0 40px calc(var(--band) * .55);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 36px;
}
.hero__figs > div {
  display: flex; flex-direction: column; gap: 7px;
  padding-top: 20px; border-top: 2px solid var(--hairline-strong);
}

/* ── FIGURES AND THEIR BASIS ────────────────────────────────────────────────
   Every figure on the site carries one. A figure whose source cannot be given
   is removed, not published with a confession attached.
   ─────────────────────────────────────────────────────────────────────────── */

.stat__fig {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--wd-wide), 'wght' var(--w-display);
  font-size: var(--fs-stat); line-height: .92;
  letter-spacing: var(--track-tight); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat__fig u {
  font-size: .32em; font-variation-settings: 'wdth' 100, 'wght' 600;
  color: var(--ink-faint); text-decoration: none; margin-left: .12em;
}
.stat__fig--brand   { color: var(--brand); }
.stat__fig--loss    { color: var(--loss); }
.stat__fig--saving  { color: var(--saving); }
.stat__fig--energy  { color: var(--energy); }
.stat__lab  { font-family: var(--font-text); font-weight: 600; font-size: var(--fs-small); line-height: 1.35; color: var(--ink); }
.stat__qual { font-family: var(--font-text); font-weight: 450; font-size: var(--fs-small); line-height: 1.45; color: var(--ink-muted); }

.src {
  margin-top: auto; padding-top: 11px; border-top: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 3px;
}
.src__label {
  font-family: var(--font-data); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint); font-style: normal;
}
.src__text {
  font-family: var(--font-text); font-weight: 450; font-size: var(--fs-micro);
  line-height: 1.45; color: var(--ink-muted);
}

.basis {
  margin: 22px 0 0; max-width: 62em; padding-top: 11px;
  border-top: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 3px;
}

/* ── SETS OF PEERS ──────────────────────────────────────────────────────────
   Three components where the old MetersBoard site had one divided grid. Pick
   by what the content IS, not by how many of them there are. None of them
   draws a vertical rule: vertical rules separate REGIONS that differ in kind,
   never items of the same kind.
   ─────────────────────────────────────────────────────────────────────────── */

/* FIGURES — a set of figures. No rules at all; the display numeral separates
   itself and the basis slot already carries a hairline. */
.figs { display: grid; gap: 44px; }
.figs > * { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.figs--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); max-width: 880px; }
.figs--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.figs--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* PEERS — genuinely unordered items. A rule ABOVE each one rather than between
   them: rhythm without division. */
.peers { display: grid; gap: 34px 44px; }
.peers > * {
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0; padding-top: 16px;
  border-top: 2px solid var(--hairline-strong);
}
.peers--quiet > * { border-top: 1px solid var(--hairline); }
.peers--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.peers--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.peers--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* THE STEP RAIL — an ORDERED sequence. Each cell draws its own connector into
   the gap ahead of it, so the line is built from the items rather than
   positioned over them, and the count can change freely. */
.steprail { display: grid; gap: 0 36px; }
.steprail__cell {
  position: relative; padding-top: 32px;
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.steprail__cell::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--brand); background: var(--surface);
}
.steprail__cell::after {
  content: ''; position: absolute; top: 6px; left: 17px; right: -36px;
  height: 1.5px; background: var(--hairline-strong);
}
.steprail__cell:last-child::after { content: none; }
/* The first node is filled: an unfilled row of identical dots says nothing
   about direction. */
.steprail__cell:first-child::before { background: var(--brand); }
.steprail--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.steprail--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.steprail--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* ── THE INDEX ──────────────────────────────────────────────────────────────
   A ruled ledger row per item, replacing a card grid. Reads DOWN the page like
   an index rather than across it like a gallery, and each row gets the full
   measure instead of a third of it.
   ─────────────────────────────────────────────────────────────────────────── */

.index { border-top: 2px solid var(--hairline-strong); }
.index__row {
  display: grid; grid-template-columns: 4.5em minmax(0, 1fr) auto;
  gap: 0 28px; align-items: baseline;
  padding: 24px 20px 24px 4px;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none; color: inherit;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
}
a.index__row:hover { 
  background: var(--brand-quiet); 
  padding-left: 20px; 
  color: inherit; 
}
a.index__row:hover::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--brand);
  border-radius: 0 2px 2px 0;
}
a.index__row:hover .index__go,
a.index__row:hover .index__n { color: var(--brand-hi); }
.index__n {
  font-family: var(--font-data); font-size: 15px; font-weight: 500;
  font-variant-numeric: tabular-nums; letter-spacing: .06em;
  color: var(--brand); font-style: normal; transition: color 160ms ease;
}
.index__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.index__t {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--wd-norm), 'wght' var(--w-display-2);
  font-size: 21px; line-height: 1.15; color: var(--ink);
}
.index__d {
  font-family: var(--font-text); font-weight: var(--w-text-dark);
  font-size: var(--fs-small); line-height: 1.5; color: var(--ink-muted);
}
.index__go {
  font-family: var(--font-data); font-size: var(--fs-micro);
  letter-spacing: .08em; text-transform: uppercase; color: var(--brand);
  font-style: normal; white-space: nowrap; align-self: center;
  transition: color 160ms ease;
}
@media (max-width: 640px) {
  .index__row { grid-template-columns: 3.2em minmax(0, 1fr); padding: 20px 0; }
  a.index__row:hover { padding-left: 8px; }
  .index__go { grid-column: 2; margin-top: 10px; align-self: start; }
}

/* ── THE THREE WORDS ────────────────────────────────────────────────────────
   Ported from the parent site's .ccs band. The words ARE the point, so they
   are the largest thing in the band and each carries one sentence. Colour is
   the physics palette doing real work: what you see is measurement, what you
   locate is the loss, what you recover is the saving.
   ─────────────────────────────────────────────────────────────────────────── */

.ccs {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 0 40px;
}
.ccs li {
  display: flex; flex-direction: column; gap: 14px;
  padding-top: 22px; border-top: 2px solid var(--hairline-strong);
}
.ccs__w {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--wd-wide), 'wght' var(--w-display);
  font-size: clamp(38px, 4.6vw, 62px); line-height: 1;
  letter-spacing: var(--track-tight);
}
.ccs__w--measure { color: var(--measure); }
.ccs__w--loss    { color: var(--loss); }
.ccs__w--saving  { color: var(--saving); }
.ccs__d {
  font-family: var(--font-text); font-weight: var(--w-text-dark);
  font-size: var(--fs-deck); line-height: 1.45; color: var(--ink); max-width: 15em;
}
@media (max-width: 820px) {
  .ccs { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ccs li { padding: 20px 0 26px; }
  .ccs__d { max-width: none; }
}

/* ── SCREENSHOT GRID ────────────────────────────────────────────────────────
   Product captures, sized so a reader can actually read the numbers in them.
   A screenshot at a third of the measure is decoration; at half or full it is
   evidence. `shot--wide` spans both columns for the dashboards that need it.
   ─────────────────────────────────────────────────────────────────────────── */

.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 40px 32px; }
.shot { margin: 0; grid-column: span 1; }
.shot--wide { grid-column: 1 / -1; }
.shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--hairline);
  border-top: 2px solid var(--hairline-strong);
  background: var(--surface-sunken);
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease;
}
button.zoomable:hover img, .shot img:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  border-color: var(--brand);
}
.shot figcaption { margin-top: 12px; color: var(--ink-muted); max-width: 46em; }
.shot figcaption b { color: var(--ink); font-weight: 600; }

/* PHOTOGRAPHIC PLATES — real photographs, as opposed to .shot (product
   captures). The caption always says what the picture is EVIDENCE of rather
   than describing what is visible in it. */
.plate { margin: 0 0 40px; }
.plate img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--hairline);
  border-top: 2px solid var(--hairline-strong);
}
.plate figcaption { margin-top: 12px; color: var(--ink-muted); max-width: 52em; }
.plate figcaption b { color: var(--ink); font-weight: 600; }

.zoomable { cursor: zoom-in; }

/* ── THE FLAGSHIP BAND ──────────────────────────────────────────────────────
   One band gets to be bigger than the others, and it is the screen that makes
   the whole argument. It runs its title above h2 scale and puts a real product
   screen beside it.
   ─────────────────────────────────────────────────────────────────────────── */

.flagship {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 56px; align-items: center;
}
.flagship__title { font-size: clamp(34px, 3.8vw, 48px); line-height: 1.04; margin-top: 16px; }
.flagship__figs {
  display: flex; flex-wrap: wrap; gap: 34px;
  margin-top: 34px; padding-top: 26px;
  border-top: 2px solid var(--hairline-strong);
}
.flagship__figs > span { display: flex; flex-direction: column; gap: 6px; max-width: 15em; }
.flagship__fig {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--wd-wide), 'wght' var(--w-display);
  font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-tight);
}
.flagship__fig u {
  font-size: .42em; text-decoration: none; margin-left: .08em;
  font-variation-settings: 'wdth' 100, 'wght' 600; color: var(--ink-faint);
}
.flagship__figs i {
  font-family: var(--font-text); font-style: normal; font-weight: 450;
  font-size: var(--fs-small); line-height: 1.45; color: var(--ink-muted);
}
.flagship__shot { margin: 0; }
.flagship__shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--hairline);
  border-top: 2px solid var(--hairline-strong);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease;
}
.flagship__shot:hover img {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .6);
}
.flagship__shot figcaption { margin-top: 12px; color: var(--ink-faint); }
@media (max-width: 980px) {
  .flagship { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .flagship__figs { gap: 24px; }
}

/* ── FEATURE GROUPS ─────────────────────────────────────────────────────────
   A long feature list that stays scannable: grouped under a heading, one ruled
   row per feature, name and explanation on the same line.
   ─────────────────────────────────────────────────────────────────────────── */

.groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 44px 56px; }
.group__h { color: var(--brand); margin-bottom: 4px; }
.group__row {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 5px; padding: 15px 0; border-bottom: 1px solid var(--hairline);
}
.group__n { font-family: var(--font-text); font-weight: 600; font-size: var(--fs-body); color: var(--ink); }

/* ── THE LOSS BARS ──────────────────────────────────────────────────────────
   The comparison that opens the argument. Recoloured onto the physics palette:
   the loss bars are --loss because they are loss, and the world average is
   --baseline because that is the reference being measured against. Under the
   old palette both were the same orange and the comparison said nothing.
   ─────────────────────────────────────────────────────────────────────────── */

.bars { border-top: 2px solid var(--hairline-strong); }
.bars__row {
  display: grid; grid-template-columns: 210px 1fr 92px;
  gap: 20px; align-items: center;
  padding: 16px 0; border-bottom: 1px solid var(--hairline);
}
.bars__name { font-family: var(--font-text); font-weight: var(--w-text-dark); font-size: var(--fs-small); color: var(--ink); }
.bars__track { height: 14px; background: var(--surface-sunken); border: 1px solid var(--hairline); }
.bars__fill {
  display: block; height: 100%; width: 0; background: var(--loss);
  transition: width 900ms cubic-bezier(.2, .7, .3, 1);
}
.bars__fill--baseline { background: var(--baseline); }
.bars__val {
  font-family: var(--font-data); font-weight: 500; font-size: var(--fs-small);
  font-variant-numeric: tabular-nums; text-align: right; color: var(--ink);
}
@media (prefers-reduced-motion: reduce) { .bars__fill { transition: none; } }
@media (max-width: 640px) {
  .bars__row { grid-template-columns: 120px 1fr 68px; gap: 12px; }
}

/* ── THE DRILL-DOWN EXPLORER ────────────────────────────────────────────────
   A tab set over a screenshot, with the region under discussion outlined. The
   old build declared role="tablist" with no aria-controls, no tabpanel and no
   arrow keys — a menu that did not behave like one. This is the real pattern.
   ─────────────────────────────────────────────────────────────────────────── */

.explorer { border: 1px solid var(--hairline); border-top: 2px solid var(--hairline-strong); background: var(--surface-raised); }
.steps { display: flex; border-bottom: 1px solid var(--hairline); flex-wrap: wrap; }
.steps button {
  flex: 1; min-width: 200px; background: transparent; border: 0;
  border-right: 1px solid var(--hairline); text-align: left;
  padding: 20px 22px; cursor: pointer;
  font-family: var(--font-text); font-weight: var(--w-text-dark);
  font-size: var(--fs-small); color: var(--ink-muted);
  transition: background-color 150ms ease, color 150ms ease;
}
.steps button:last-child { border-right: 0; }
.steps button:hover { color: var(--ink); background: var(--brand-quiet); }
.steps button .sn {
  display: block; font-family: var(--font-data); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 6px; font-style: normal;
}
.steps button[aria-selected="true"] { background: var(--surface-sunken); color: var(--ink); box-shadow: inset 0 -2px 0 var(--brand); }
.steps button[aria-selected="true"] .sn { color: var(--brand); }

.stage { padding: 26px; }
.shotwrap {
  position: relative; background: var(--surface-sunken);
  border: 1px solid var(--hairline); padding: 8px;
}
.shotwrap img { width: 100%; display: block; }
.hl {
  position: absolute; border: 2px solid var(--brand);
  background: rgba(79, 168, 255, .13);
  box-shadow: 0 0 0 1px rgba(19, 26, 61, .6);
  opacity: 0; transition: opacity .45s ease .3s; pointer-events: none;
}
.hl.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hl { transition: none; } }

.readout {
  display: grid; grid-template-columns: 1fr auto; gap: 28px;
  align-items: end; margin-top: 22px;
}
.readout p { margin: 0; max-width: 760px; }
.readout .fig {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--wd-wide), 'wght' var(--w-display);
  font-size: 42px; line-height: 1; color: var(--loss);
  font-variant-numeric: tabular-nums; letter-spacing: var(--track-tight);
  white-space: nowrap;
}
.exnav { display: flex; gap: 10px; margin-top: 22px; }
@media (max-width: 700px) {
  .stage { padding: 18px; }
  .readout { grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
}

/* ── THE HIERARCHY WALKER ───────────────────────────────────────────────── */

.chain { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.chain button {
  background: transparent; border: 1px solid var(--control-edge);
  border-radius: 9999px; padding: 10px 18px; cursor: pointer;
  font-family: var(--font-text); font-weight: var(--w-text-dark);
  font-size: 14px; color: var(--ink-muted);
  display: flex; align-items: baseline; gap: 9px;
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}
.chain button .cn {
  font-family: var(--font-data); font-size: 10px; letter-spacing: .12em;
  color: var(--ink-faint); font-style: normal;
}
.chain button:hover { border-color: var(--brand); color: var(--ink); background: var(--brand-quiet); }
.chain button[aria-pressed="true"] { background: var(--cta); border-color: var(--cta); color: #fff; }
.chain button[aria-pressed="true"] .cn { color: rgba(255, 255, 255, .72); }

.hpanel {
  border-left: 3px solid var(--brand); background: var(--surface-sunken);
  padding: 24px 28px; min-height: 128px;
}
.hpanel h3 { margin: 0 0 8px; }

/* ── THE ESTIMATOR ──────────────────────────────────────────────────────── */

.calc { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: start; }
@media (max-width: 900px) { .calc { grid-template-columns: minmax(0, 1fr); gap: 40px; } }

.field { margin-bottom: 26px; }
.field label {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  font-family: var(--font-text); font-weight: var(--w-text-dark);
  font-size: var(--fs-small); color: var(--ink-muted); margin-bottom: 10px;
}
.field label b {
  font-family: var(--font-data); font-weight: 500; font-size: var(--fs-small);
  color: var(--ink); font-variant-numeric: tabular-nums;
}
input[type=range] {
  width: 100%; -webkit-appearance: none; appearance: none;
  height: 3px; background: var(--control-edge); outline: none; cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand); cursor: pointer; border: 3px solid var(--surface);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
input[type=range]::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 5px rgba(79, 168, 255, 0.2);
  transform: scale(1.15);
}
input[type=range]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand); border: 3px solid var(--surface); cursor: pointer;
}
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--brand-quiet); }

.out {
  border: 1px solid var(--hairline); border-top: 2px solid var(--hairline-strong);
  background: var(--surface-raised); padding: 32px;
}
.out__big {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--wd-wide), 'wght' var(--w-display);
  font-size: clamp(32px, 4.4vw, 52px); line-height: 1.05;
  letter-spacing: var(--track-tight); color: var(--saving);
  font-variant-numeric: tabular-nums; word-break: break-word;
}
.out dl {
  display: grid; grid-template-columns: 1fr auto; gap: 12px 16px;
  margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--hairline);
}
.out dt { font-family: var(--font-text); font-weight: var(--w-text-dark); font-size: var(--fs-small); color: var(--ink-muted); }
.out dd {
  margin: 0; font-family: var(--font-data); font-size: var(--fs-small);
  text-align: right; color: var(--ink); font-variant-numeric: tabular-nums;
}

/* ── FORM ───────────────────────────────────────────────────────────────── */

.form label.fl {
  display: block; font-family: var(--font-data); font-size: 11px;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink-faint);
  margin: 18px 0 7px; font-style: normal;
}
.form input, .form select, .form textarea {
  width: 100%; font-family: var(--font-text); font-size: 14.5px;
  background: var(--surface-sunken); border: 1px solid transparent;
  border-radius: 10px; color: var(--ink); padding: 12px 13px;
  transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}
.form textarea { resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: 0; border-color: var(--brand); background: var(--surface);
  box-shadow: 0 0 0 4px rgba(79, 168, 255, 0.12);
}
.form input::placeholder, .form textarea::placeholder { color: var(--ink-faint); }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .f2 { grid-template-columns: minmax(0, 1fr); } }

/* ── VIDEO ──────────────────────────────────────────────────────────────── */

.video {
  border: 1px solid var(--hairline); border-top: 2px solid var(--hairline-strong);
  background: #000; padding: 8px;
}
.video video { width: 100%; display: block; }

/* ── DISCLOSURE ─────────────────────────────────────────────────────────────
   A material fact a buyer is entitled to before they act. Not a build note: if
   the sentence is addressed to us rather than to the reader, it does not
   belong on the page at all.
   ─────────────────────────────────────────────────────────────────────────── */

.flag {
  border-left: 3px solid var(--negative); background: var(--surface-sunken);
  padding: 20px 24px; margin: 26px 0 0;
  display: flex; flex-direction: column; gap: 6px;
}
.flag__label {
  font-family: var(--font-data); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--negative); font-style: normal;
}

/* ── THE PARENT BAND ────────────────────────────────────────────────────────
   MetersBoard is a product of Enercon Digital, and the page says so with the
   company's own lockup rather than a line of text. The band is deliberately
   quiet: it is provenance, not a second pitch.
   ─────────────────────────────────────────────────────────────────────────── */

.parent {
  display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 56px; align-items: center;
}
.parent__mark { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.parent__mark img { height: 62px; width: 201px; display: block; }
.parent__tag {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--wd-mid), 'wght' var(--w-display-2);
  font-size: 21px; line-height: 1.1; letter-spacing: var(--track-tight);
  color: var(--brand); margin: 0;
}
@media (max-width: 820px) { .parent { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* ── CALLOUT BAND ───────────────────────────────────────────────────────── */

.band {
  border: 1px solid var(--hairline); border-left: 3px solid var(--brand);
  background: var(--surface-raised); padding: 34px 38px;
}

/* ── FOOTER ─────────────────────────────────────────────────────────────── */

footer { border-top: 1px solid var(--hairline); background: var(--surface-sunken); }
.foot__cols {
  max-width: 1320px; margin: 0 auto; padding: 56px 40px 34px;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 48px 40px;
}
.foot__brand { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.foot__brand img { height: 52px; width: 169px; display: block; }
.foot__tag {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--wd-mid), 'wght' var(--w-display-2);
  font-size: 21px; line-height: 1.1; letter-spacing: var(--track-tight);
  color: var(--brand); margin: 0;
}
.foot__col { display: flex; flex-direction: column; gap: 9px; }
.foot__h {
  font-family: var(--font-data); font-size: var(--fs-micro); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint); font-style: normal;
}
.foot__col a {
  font-family: var(--font-text); font-size: var(--fs-small);
  color: var(--ink-muted); text-decoration: none;
  transition: color 200ms ease, padding-left 200ms ease;
}
.foot__col a:hover { color: var(--brand-hi); padding-left: 4px; }
.foot__legal { max-width: 1320px; margin: 0 auto; padding: 18px 40px 40px; }
.foot__legal-inner {
  border-top: 1px solid var(--hairline); padding-top: 16px;
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.foot__legal-inner span {
  font-family: var(--font-data); font-size: var(--fs-micro);
  color: var(--ink-faint); font-style: normal;
}
@media (max-width: 1000px) {
  .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 44px 28px 26px; }
  .foot__brand { grid-column: 1 / -1; }
  .foot__legal { padding: 16px 28px 36px; }
}
@media (max-width: 560px) { 
  .foot__cols { grid-template-columns: minmax(0, 1fr); gap: 28px; } 
}

/* ── LIGHTBOX ───────────────────────────────────────────────────────────── */

.lb {
  position: fixed; inset: 0; background: rgba(8, 11, 26, .0);
  z-index: 100; display: none; align-items: center; justify-content: center; padding: 30px;
  transition: background-color 0.4s ease;
}
.lb.open { display: flex; background: rgba(8, 11, 26, .95); }
.lb img { 
  max-width: 96vw; max-height: 88vh; border: 1px solid var(--control-edge); 
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
.lb.open img { transform: scale(1); opacity: 1; }
.lb__close { 
  position: absolute; top: 20px; right: 24px;
  transition: all 0.2s ease;
}
.lb__close:hover { transform: scale(1.05); }

/* ── SCROLL REVEAL ──────────────────────────────────────────────────────────
   The transform is small and the duration short on purpose: a long travel
   reads as a page that has not finished loading. Reveals apply to BANDS, never
   to the cells inside them — a stagger across nine list items reads as a
   loading spinner.

   prefers-reduced-motion removes the movement but NOT the element: opacity
   goes straight to 1, so content is never withheld from someone who asked for
   less motion. The <noscript> rule in each page does the same if script never
   arrives.
   ─────────────────────────────────────────────────────────────────────────── */

.reveal {
  opacity: 0; 
  transform: translateY(24px) scale(0.98);
  filter: blur(4px);
  transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 800ms cubic-bezier(0.16, 1, 0.3, 1),
              filter 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-in { 
  opacity: 1; 
  transform: none; 
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; filter: none; }
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────────
   Collapse only. A ruled row that folds keeps its top rule and moves its
   dividers from vertical to horizontal, so the rhythm survives the fold.
   ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) { .figs--4, .peers--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 900px) {
  .wrap { padding: calc(var(--band) * .72) 28px; }
  .hero__inner { padding: calc(var(--band) * .95) 28px; }
  .hero__figs { padding: 0 28px calc(var(--band) * .4); }
  .hero__scrim {
    background:
      linear-gradient(to bottom, rgba(19, 26, 61, .88), rgba(19, 26, 61, .95)),
      linear-gradient(-74.647deg,
        rgba(0, 180, 255, .22) 1.8%, rgba(0, 91, 226, .30) 56.35%, rgba(2, 21, 77, .62) 100%);
  }
  .figs, .peers { grid-template-columns: minmax(0, 1fr); }
  .figs { gap: 34px; }
  /* A sequence that loses its connector stops being a sequence, so the rail
     turns vertical rather than collapsing into a list. */
  .steprail { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .steprail__cell { padding: 0 0 26px 34px; }
  .steprail__cell::before { top: 3px; }
  .steprail__cell::after { top: 19px; left: 6px; right: auto; width: 1.5px; height: calc(100% - 16px); }
  .split { --split: minmax(0, 1fr); --split-gap: 34px; }
}

@media (max-width: 720px) {
  :root { --band: 64px; }
  .btn--primary { height: 50px; padding: 0 26px; }
  /* The hero's hard break is a desktop decision. Kept on a phone it forced
     "See every / unit." across two lines; dropped, text-wrap:balance sets the
     whole line properly. */
  .hero .h1 br { display: none; }
}

@media (max-width: 480px) {
  .wrap { padding: calc(var(--band) * .6) 20px; }
  .wrap--half { padding: calc(var(--band) * .4) 20px; }
  .hero__inner { padding: calc(var(--band) * .8) 20px; }
  .hero__figs { padding: 0 20px calc(var(--band) * .3); }
  .nav__bar { padding: 12px 20px; }
  .head { gap: 16px; margin-bottom: 20px; }
  .split { --split-gap: 24px; }
  .shots { gap: 24px; }
  .foot__cols { padding: 32px 20px 20px; gap: 24px; }
  .foot__legal { padding: 16px 20px 24px; }
}

@media (max-width: 520px) {
  .figs--4, .figs--3, .peers--4, .peers--3 { grid-template-columns: minmax(0, 1fr); }
}

/* Ultra-narrow phones (Galaxy S series, iPhone SE) */
@media (max-width: 360px) {
  .wrap { padding: calc(var(--band) * .5) 16px; }
  .wrap--half { padding: calc(var(--band) * .35) 16px; }
  .hero__inner { padding: calc(var(--band) * .7) 16px; }
  .hero__figs { padding: 0 16px calc(var(--band) * .25); gap: 24px; }
  .nav__bar { padding: 10px 16px; }
  .btn--primary { height: 48px; padding: 0 22px; font-size: 14px; }
  .btn--secondary { height: 44px; padding: 0 18px; font-size: 13px; }
  .foot__cols { padding: 28px 16px 16px; gap: 20px; }
  .foot__legal { padding: 14px 16px 20px; }
  .bars__row { grid-template-columns: 100px 1fr 56px; gap: 8px; }
  .bars__name { font-size: 12px; }
  .stage { padding: 12px; }
  .band { padding: 24px 22px; }
}

/* Touch-friendly tap targets on mobile */
@media (pointer: coarse) {
  .nav__link { min-height: 44px; display: flex; align-items: center; }
  .foot__col a { min-height: 44px; display: flex; align-items: center; }
  .chain button { min-height: 44px; }
  .steps button { min-height: 48px; }
}

@media print {
  .nav, .lb, .hero__media, .skip { display: none !important; }
  body { background: #fff; color: #000; }
}