/* Commonwatt · landing page styles */

@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap;
  src: url(https://demo.uichemy.com/wp-content/uploads/2026/09/commonwatt__fonts-instrument-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap;
  src: url(https://demo.uichemy.com/wp-content/uploads/2026/09/commonwatt__fonts-instrument-sans-arrows.woff2) format('woff2'); unicode-range: U+2192, U+2197, U+2248; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url(https://demo.uichemy.com/wp-content/uploads/2026/09/commonwatt__fonts-hanken-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url(https://demo.uichemy.com/wp-content/uploads/2026/09/commonwatt__fonts-hanken-grotesk-arrows.woff2) format('woff2'); unicode-range: U+2192, U+2197, U+2248; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(https://demo.uichemy.com/wp-content/uploads/2026/09/commonwatt__fonts-jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(https://demo.uichemy.com/wp-content/uploads/2026/09/commonwatt__fonts-jetbrains-mono-arrows.woff2) format('woff2'); unicode-range: U+2192, U+2197, U+2248; }

:root {
  /* palette: the only four colours on the page */
  --volt: #19F59A;
  --cobalt: #0038FF;
  --white: #FFFFFF;
  --black: #000000;

  /* transparencies of the tokens */
  --ink-04: rgba(0, 0, 0, .04);
  --ink-08: rgba(0, 0, 0, .08);
  --ink-12: rgba(0, 0, 0, .12);
  --ink-22: rgba(0, 0, 0, .22);
  --ink-60: rgba(0, 0, 0, .6);
  --ink-72: rgba(0, 0, 0, .72);
  --paper-10: rgba(255, 255, 255, .1);
  --paper-18: rgba(255, 255, 255, .18);
  --paper-50: rgba(255, 255, 255, .5);
  --paper-72: rgba(255, 255, 255, .72);
  --cobalt-08: rgba(0, 56, 255, .08);
  --cobalt-16: rgba(0, 56, 255, .16);

  --f-title: 'Instrument Sans', 'Arial Narrow', sans-serif;
  --f-ui: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --ease: cubic-bezier(.25, 1, .5, 1);       /* cw */
  --ease-io: cubic-bezier(.76, 0, .24, 1);   /* cwInOut */

  --gut: clamp(16px, 2.2vw, 32px);
  --nav-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; background: var(--white); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--white); color: var(--black); font-family: var(--f-ui); font-weight: 400; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img { display: block; max-width: 100%; color: transparent; }
img.is-broken { visibility: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
p, h1, h2, h3, h4, ol, ul, figure, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }

.t-title { font-family: var(--f-title); font-stretch: 75%; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; line-height: .86; }
.t-num { font-family: var(--f-title); font-stretch: 100%; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mono { font-family: var(--f-mono); font-weight: 400; text-transform: uppercase; letter-spacing: .04em; font-size: 12px; line-height: 1.5; }

/* reveal: blur-in on enter (filter blur 20px, opacity 0 → clear) */
html.motion .reveal { opacity: 0; filter: blur(20px); }

/* ---------- char roll ---------- */
.roll { display: inline-block; }
.roll__in { position: relative; display: inline-block; overflow: hidden; vertical-align: top; line-height: 1.2; padding-bottom: .04em; }
.roll__row { display: block; white-space: pre; }
.roll__row--b { position: absolute; left: 0; top: 0; }
.roll__row--b { visibility: hidden; }
.roll.is-ready .roll__row--b { visibility: visible; }
.roll__c { display: inline-block; will-change: transform; }

/* ---------- buttons, fields ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 999px; font-family: var(--f-ui); font-weight: 500; font-size: 15px; letter-spacing: 0; white-space: nowrap; transition: background-color .3s var(--ease), color .3s var(--ease); }
.btn--cobalt { background: var(--cobalt); color: var(--white); }
.btn--cobalt:hover { background: var(--black); }
.btn--volt { background: var(--volt); color: var(--black); }
.btn--volt:hover { background: var(--white); }
.field { height: 48px; border-radius: 999px; border: 1px solid var(--paper-50); background: transparent; padding: 0 20px; color: var(--white); font-size: 15px; min-width: 0; }
.field::placeholder { color: var(--paper-72); }
.field:focus { outline: none; border-color: var(--volt); }

/* ---------- loader ---------- */
.loader { display: none; }
html.has-intro .loader { display: flex; position: fixed; inset: 0; z-index: 100; background: var(--white); align-items: center; justify-content: center; }
.loader__inner { width: min(560px, 80vw); }
.loader__label { color: var(--ink-60); }
.loader__count { font-family: var(--f-title); font-stretch: 100%; font-weight: 600; font-size: clamp(88px, 14vw, 200px); line-height: .9; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin: 12px 0 18px; }
.loader__pct { font-size: .4em; margin-left: .06em; vertical-align: .9em; }
.loader__bar { position: relative; height: 12px; border: 1.5px solid var(--black); padding: 2px; }
.loader__bar::after { content: ''; position: absolute; right: -6px; top: 2px; bottom: 2px; width: 3px; background: var(--black); }
.loader__bar i { display: block; height: 100%; width: 100%; background: var(--volt); transform: scaleX(0); transform-origin: 0 50%; }

/* ---------- nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; pointer-events: none; padding: 12px var(--gut) 0; }
.nav__bar { pointer-events: auto; margin: 0 auto; width: 100%; height: 56px; display: flex; align-items: center; gap: 18px; padding: 0 6px 0 14px; border-radius: 999px; background: rgba(255, 255, 255, 0); border: 1px solid rgba(0, 0, 0, 0); transition: background-color .4s var(--ease), border-color .4s var(--ease); overflow: hidden; }
.nav[data-state="compact"] .nav__bar { background: var(--white); border-color: var(--ink-12); }
.nav__logo { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.nav__mark { width: 15px; height: 21px; color: var(--black); }
.nav__markfill { fill: var(--volt); }
.nav__word { font-family: var(--f-title); font-stretch: 75%; font-weight: 700; text-transform: uppercase; font-size: 22px; letter-spacing: .01em; line-height: 1; }
.nav__links { display: flex; gap: 26px; margin: 0 auto; font-size: 15px; font-weight: 500; }
.nav__links a, .nav__drop a { padding: 4px 0; }
.meter { display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 14px 0 10px; border-radius: 999px; background: var(--volt); color: var(--black); transition: background-color .6s var(--ease), color .6s var(--ease); flex: 0 0 auto; }
.meter[data-mode="demand"] { background: var(--cobalt); color: var(--white); }
.meter__gauge { width: 34px; height: 21px; overflow: visible; }
.meter__arc, .meter__ticks { stroke: currentColor; }
.meter__ticks { opacity: .55; }
.meter__needle { stroke: currentColor; transform-origin: 20px 21px; }
.meter__hub { fill: currentColor; }
.meter__read { display: flex; flex-direction: column; line-height: 1.05; }
.meter__hz { font-family: var(--f-mono); font-size: 13px; letter-spacing: 0; white-space: nowrap; }
.meter__val { font-weight: 400; font-variant-numeric: tabular-nums; }
.meter__state { font-family: var(--f-mono); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; opacity: .8; white-space: nowrap; margin-top: 2px; }
.nav__menu { display: none; height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--ink-22); font-size: 14px; font-weight: 500; flex: 0 0 auto; }
.nav__cta { height: 42px; padding: 0 20px; flex: 0 0 auto; }
.nav[data-state="compact"] .nav__links,
.nav[data-state="compact"] .nav__cta { display: none; }
.nav[data-state="compact"] .nav__menu { display: inline-flex; align-items: center; }
.nav[data-state="compact"] .nav__bar { justify-content: space-between; }
.nav__drop { pointer-events: auto; width: 29.45rem; max-width: 100%; margin: 8px auto 0; background: var(--white); border: 1px solid var(--ink-12); border-radius: 22px; padding: 14px 20px; display: grid; gap: 2px; font-size: 18px; font-weight: 500; }
.nav__drop[hidden] { display: none; }

/* ---------- 1 · hero ---------- */
.hero { position: relative; background: var(--white); }
.hero__stage { position: relative; height: 100vh; height: 100svh; min-height: 680px; overflow: hidden; }
.hero__layer { position: absolute; inset: 0; }
.hero__layer--xray { pointer-events: none; background: var(--white); clip-path: circle(80px at var(--x, -200px) var(--y, -200px)); z-index: 2; }
.hero__photo { position: absolute; top: 0; right: 0; bottom: 0; left: 24vw; overflow: hidden; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; opacity: .2; }
/* top fades to white so nothing in the photo sits behind the nav; bottom fades under the headline */
.hero__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--white) 0, var(--white) 11%, rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, 0) 32%, var(--white) 82%); }
.hero__grid { position: absolute; inset: 0; display: grid; grid-template-columns: 24vw 1px 1fr; }
.hero__meta { grid-column: 1; padding: calc(var(--nav-h) + 12vh) 2.4vw 5.2vh var(--gut); display: flex; flex-direction: column; }
.hero__kicker { color: var(--ink-60); }
.hero__lede { margin-top: 14px; font-size: 16px; line-height: 1.45; max-width: 30ch; font-weight: 400; }
.hero__cta { margin-top: 26px; align-self: flex-start; }
.hero__place { margin-top: auto; font-weight: 500; font-size: 15px; line-height: 1.3; }
.hero__homes { font-weight: 400; color: var(--ink-72); }
.hero__rule { grid-column: 2; background: var(--black); margin-top: calc(var(--nav-h) + 8px); }
.hero__title { grid-column: 3; align-self: end; padding: 0 var(--gut) 4.6vh 2.2vw; font-size: 10.4vw; display: flex; flex-direction: column; }
.hero__block { display: block; will-change: filter, opacity; }
.hero__block--step { padding-left: 15.4vw; }
html.motion .hero__layer--base .hero__block { opacity: 0; filter: blur(20px); }
.xr-only { display: none; }
.hero__layer--xray .xr-only { display: block; }
.hero__layer--xray .hero__photo { display: none; }
.hero__layer--xray .hero__block { color: transparent; -webkit-text-stroke: 1.5px var(--cobalt); }
.hero__layer--xray .hero__rule { background: var(--cobalt); }
.hero__layer--xray .hero__meta { color: var(--cobalt); }
.hero__layer--xray .hero__homes, .hero__layer--xray .hero__kicker { color: var(--cobalt); }
.hero__layer--xray .btn--cobalt { background: transparent; color: var(--cobalt); box-shadow: inset 0 0 0 1.5px var(--cobalt); }
.xr-grid { position: absolute; inset: 0; background-color: var(--ink-04);
  background-image: linear-gradient(var(--cobalt-08) 1px, transparent 1px), linear-gradient(90deg, var(--cobalt-08) 1px, transparent 1px);
  background-size: 24px 24px; }
.xr-flow { position: absolute; inset: 0; width: 100%; height: 100%; }
.xr-flow__line { fill: none; stroke: var(--cobalt); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 6 9; animation: xrflow 1.4s linear infinite; }
.xr-flow__line--thick { stroke-width: 3; }
.xr-flow__bus { fill: none; stroke: var(--cobalt); stroke-width: 1; vector-effect: non-scaling-stroke; }
@keyframes xrflow { to { stroke-dashoffset: -30; } }
html.rm .xr-flow__line { animation: none; }
.xr-node { position: absolute; transform: translate(-6px, -6px); font-family: var(--f-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--cobalt); white-space: nowrap; }
.xr-node i { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--cobalt); background: var(--white); border-radius: 50%; vertical-align: -2px; margin-right: 6px; }
.xr-node--batt i { background: var(--volt); }

.hero__lens { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; width: 0; height: 0; opacity: 0; will-change: transform; }
.lens__disc { position: absolute; left: -80px; top: -80px; width: 160px; height: 160px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--cobalt-16); transform: scale(var(--s, 1)); }
.lens__h, .lens__v { position: absolute; background: var(--volt); }
.lens__h { left: -170px; top: -.75px; width: 340px; height: 1.5px; }
.lens__v { top: -170px; left: -.75px; height: 340px; width: 1.5px; }
.lens__note { position: absolute; left: 12px; top: -64px; font-size: 9.5px; line-height: 1.35; color: var(--cobalt); white-space: nowrap; background: var(--white); padding: 2px 5px; box-shadow: inset 0 0 0 1px var(--cobalt); }
.hero__hint { position: absolute; right: var(--gut); top: calc(var(--nav-h) + 20px); color: var(--ink-60); z-index: 4; }

/* ---------- 2 · what the grid sees ---------- */
.sees { position: relative; background: var(--cobalt); color: var(--white); }
.sees__stage { position: relative; height: 100vh; overflow: hidden; }
.sees__kicker { position: absolute; left: 0; right: 0; top: calc(var(--nav-h) + 18px); text-align: center; color: var(--paper-72); z-index: 3; }
.sees__list { position: absolute; left: 0; right: 0; top: calc(var(--nav-h) + 52px); text-align: center; z-index: 3; font-family: var(--f-ui); font-weight: 500; font-size: clamp(20px, 2.35vw, 36px); line-height: 1.22; letter-spacing: -0.015em; }
.sees__item { will-change: transform, opacity; }
.sees__item span { opacity: .5; transition: opacity .4s var(--ease); }
.sees__item.is-on span { opacity: 1; }
.sees__space { position: absolute; inset: 0; perspective: 17.36vw; perspective-origin: 50% 50%; transform-style: preserve-3d; z-index: 2; pointer-events: none; }
.sees__floor { position: absolute; left: 50%; top: 50%; transform-origin: 50% 0; pointer-events: none;
  background-image: linear-gradient(var(--paper-18) 1px, transparent 1px), linear-gradient(90deg, var(--paper-10) 1px, transparent 1px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 80%, transparent 100%); }
html.rm .sees__floor { display: none; }
.sees__card { position: absolute; left: 50%; top: 50%; width: 33.68vw; margin-left: -16.84vw; margin-top: -12.63vw; aspect-ratio: 4 / 3; opacity: 0; visibility: hidden; will-change: transform, opacity; backface-visibility: hidden; }
.sees__card img { width: 100%; height: 100%; object-fit: cover; }
.tag { position: absolute; bottom: 100%; left: 0; font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .04em; font-size: 10px; line-height: 1; padding: 5px 7px; background: var(--volt); color: var(--black); white-space: nowrap; }
.sees__card:nth-child(even) .tag { left: auto; right: 0; }
.sees__outro { position: absolute; left: 50%; bottom: 11vh; width: min(860px, 86vw); transform: translateX(-50%); text-align: center; font-family: var(--f-ui); font-weight: 500; font-size: clamp(26px, 3.3vw, 50px); line-height: 1.12; letter-spacing: -0.02em; z-index: 3; }
.sees__outro .ln { display: block; will-change: transform, opacity; }
html.motion .sees__outro .ln { opacity: 0; }
/* reduced motion: cards as a grid */
html.rm .sees__stage { height: auto; overflow: visible; padding: calc(var(--nav-h) + 40px) var(--gut) 90px; }
html.rm .sees__kicker, html.rm .sees__list, html.rm .sees__outro { position: static; transform: none; width: auto; }
html.rm .sees__list { margin-top: 16px; }
html.rm .sees__item span { opacity: 1; }
html.rm .sees__space { position: static; perspective: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 18px; margin: 56px 0; }
html.rm .sees__card { position: relative; left: auto; top: auto; margin: 0; width: auto; opacity: 1; visibility: visible; }
html.rm .sees__card:nth-child(even) .tag { left: 0; right: auto; }
html.rm .sees__outro { max-width: 860px; margin: 0 auto; }

/* ---------- 3 · map ---------- */
.map { position: relative; background: var(--black); color: var(--white); z-index: 1; }
.map__stage { position: relative; height: 100vh; overflow: hidden; background: var(--black); }
.map__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.map__head { position: absolute; left: var(--gut); top: calc(var(--nav-h) + 22px); z-index: 2; pointer-events: none; }
.map__kicker { color: var(--paper-72); }
.map__titles { position: relative; margin-top: 10px; height: 7.4vw; min-height: 64px; }
.map__title { position: absolute; left: 0; top: 0; font-size: max(64px, 8.4vw); white-space: nowrap; opacity: 0; }
.map__title.is-on { opacity: 1; }
.map__foot { position: absolute; left: var(--gut); bottom: 30px; z-index: 2; width: min(420px, 36vw); pointer-events: none; }
.map__caps { position: relative; min-height: 5.6em; }
.map__cap { position: absolute; left: 0; bottom: 0; font-size: 17px; line-height: 1.4; opacity: 0; }
.map__cap.is-on { opacity: 1; }
.map__steps { display: flex; gap: 4px; margin-top: 18px; font-size: 10px; }
.map__steps li { flex: 1; padding-top: 8px; border-top: 2px solid var(--paper-18); color: var(--paper-50); transition: border-color .4s var(--ease), color .4s var(--ease); }
.map__steps li.is-on { border-color: var(--volt); color: var(--white); }
.map__steps li.is-done { border-color: var(--paper-72); }
.map__hud { position: absolute; right: var(--gut); bottom: 22px; z-index: 2; height: 96px; overflow: hidden; text-align: right; font-size: 12px; pointer-events: none; }
.map__log { will-change: transform; }
.map__log p { height: 24px; line-height: 24px; white-space: nowrap; opacity: 0; transition: opacity .45s var(--ease); }
.map__log p b { font-weight: 400; color: var(--volt); }
.map__log p em { font-style: normal; color: var(--white); background: var(--cobalt); padding: 1px 4px; }

/* ---------- 4 · feature tour ---------- */
.tour { position: relative; z-index: 3; background: var(--white); border-radius: 28px 28px 0 0; margin-top: -100vh; padding-bottom: 10vh; }
html.rm .tour { margin-top: -28px; }
/* rail starts below the fixed nav pill (12 px offset + 56 px bar + 24 px) */
.tour__rail { overflow: hidden; padding: 92px 0 30px; border-bottom: 1px solid var(--ink-12); }
.tour__track { display: flex; gap: 46px; width: max-content; padding-left: var(--gut); will-change: transform; font-family: var(--f-title); font-stretch: 75%; font-weight: 700; text-transform: uppercase; font-size: 30px; line-height: 1; color: var(--ink-22); }
.tour__track span { display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.tour__track b { font-family: var(--f-mono); font-weight: 400; font-size: 12px; color: var(--black); background: var(--volt); padding: 3px 6px; letter-spacing: .04em; transform: translateY(-4px); }
.tour__grid { display: grid; grid-template-columns: 44% 1fr; padding: 0 var(--gut); }
.tour__side { position: sticky; top: 0; height: 100vh; padding-top: calc(var(--nav-h) + 60px); align-self: start; display: flex; flex-direction: column; }
.tour__kicker { color: var(--ink-60); }
.tour__titles { margin-top: 22px; font-size: 5.2vw; line-height: .9; }
.tour__titles li { color: var(--ink-22); transition: color .3s var(--ease); }
.tour__titles li.is-on { color: var(--black); }
.tour__titles a { display: inline-block; }
.tour__aside { margin-top: auto; margin-bottom: 9vh; max-width: 34ch; font-size: 15px; color: var(--ink-72); }
.tour__panels { padding-top: 7vh; }
.tour__panel { padding: 7vh 0 11vh; min-height: 100vh; }
.tour__inline { display: none; }
.tour__frame { position: relative; width: 100%; aspect-ratio: 670 / 560; overflow: hidden; border-radius: 16px; background: var(--cobalt); }
.tour__img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; will-change: transform; }
.tour__cap { margin-top: 30px; font-family: var(--f-ui); font-weight: 500; font-size: 28px; line-height: 1.15; letter-spacing: -0.015em; }
.tour__body { margin-top: 14px; max-width: 54ch; font-size: 16px; line-height: 1.55; color: var(--ink-72); }

.ui { position: absolute; left: 9%; right: 9%; top: 50%; transform: translateY(-50%); background: var(--white); border-radius: 12px; padding: 20px 22px; color: var(--black); }
.ui__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ui__head .mono { font-size: 11px; }
.ui__chip { padding: 3px 7px; background: var(--black); color: var(--white); font-size: 10px !important; }
.ui__chip--cobalt { background: var(--cobalt); }
.ui__foot { margin-top: 12px; font-size: 11px; color: var(--ink-60); }
.ui__foot b { color: var(--black); font-weight: 400; background: var(--volt); padding: 1px 4px; }

.ui-health__bars { position: relative; display: flex; align-items: flex-end; gap: 6px; height: 170px; margin-top: 22px; }
.ui-health__bars i { position: relative; flex: 1; height: calc((var(--h) - 60%) * 2.5); background: var(--cobalt); transform-origin: 50% 100%; }
.ui-health__bars i.is-hi { background: var(--volt); }
.ui-health__bars b { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 6px; font-family: var(--f-mono); font-weight: 400; font-size: 9px; color: var(--ink-60); }
.ui-health__floor { position: absolute; left: -4px; right: -4px; bottom: 25%; height: 0; border-top: 1.5px dashed var(--black); pointer-events: none; }
.ui-health__floor span { position: absolute; right: 0; top: -20px; font-size: 9px; color: var(--black); background: var(--white); padding: 1px 4px; }
.ui-health .ui__foot { margin-top: 34px; }

.ui-earn__total { font-size: 34px; line-height: 1; }
.ui-earn__chart { display: flex; align-items: flex-end; gap: 7px; height: 190px; margin-top: 18px; border-bottom: 1px solid var(--ink-22); }
.ui-earn__chart i { position: relative; flex: 1; height: var(--h); background: var(--black); transform-origin: 50% 100%; }
.ui-earn__chart i.is-hi { background: var(--volt); box-shadow: inset 0 0 0 1px var(--black); }
.ui-earn__chart i.is-future { height: 4px; background: var(--ink-12); }
.ui-earn__chart em { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 6px; font-style: normal; font-size: 10px; background: var(--black); color: var(--white); padding: 2px 5px; }
.ui-earn__months { display: flex; gap: 7px; margin-top: 8px; font-size: 10px; color: var(--ink-60); }
.ui-earn__months span { flex: 1; text-align: center; }

.ui-outage { padding-right: 104px; }
.ui-outage__track { margin-top: 22px; display: grid; gap: 14px; }
.ui-outage__lane { position: relative; height: 34px; display: flex; align-items: center; }
.ui-outage__lane > .mono { position: absolute; left: 0; top: -15px; font-size: 9px; color: var(--ink-60); }
.ui-outage__grid, .ui-outage__home { position: absolute; left: 0; right: 0; top: 6px; bottom: 6px; }
.ui-outage__grid { background: var(--ink-22); }
.ui-outage__home { background: var(--volt); transform-origin: 0 50%; }
.ui-outage__down { position: absolute; left: 34%; width: 44%; top: 0; bottom: 0; background: var(--black); transform-origin: 0 50%; }
.ui-outage__down em { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 9px; color: var(--white); white-space: nowrap; }
.ui-outage__axis { display: flex; justify-content: space-between; margin-top: 12px; font-size: 9px; color: var(--ink-60); }
.ui-outage__house { position: absolute; right: 22px; top: 50%; width: 64px; height: 56px; transform: translateY(-40%); color: var(--black); }
.ui-outage__house .win { fill: var(--volt); }

.phone { position: absolute; left: 50%; top: 50%; width: 38%; aspect-ratio: 9 / 18.5; transform: translate(-50%, -50%); background: var(--black); border-radius: 30px; padding: 8px; }
.phone__screen { position: relative; height: 100%; border-radius: 23px; background: var(--white); padding: 14px 14px 12px; display: flex; flex-direction: column; align-items: center; overflow: hidden; }
.phone__top { align-self: stretch; display: flex; justify-content: space-between; font-size: 9px; }
.phone__ring { width: 68%; margin-top: 12%; transform: rotate(-90deg); }
.phone__ringbg { fill: none; stroke: var(--ink-08); stroke-width: 10; }
.phone__ringfg { fill: none; stroke: var(--volt); stroke-width: 10; stroke-dasharray: 78 100; stroke-linecap: butt; }
.phone__pct { position: absolute; top: 22%; left: 0; right: 0; text-align: center; font-size: clamp(22px, 2.5vw, 36px); line-height: 1; margin-top: 8%; }
.phone__pct small { font-size: .5em; }
.phone__lbl { margin-top: 8px; font-size: 8.5px; color: var(--ink-60); text-align: center; }
.phone__today { align-self: stretch; margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--ink-12); padding-top: 9px; }
.phone__today .mono { font-size: 8.5px; color: var(--ink-60); }
.phone__earn { font-size: clamp(16px, 1.6vw, 22px); }
.phone__toggle { align-self: stretch; margin-top: 10px; display: flex; align-items: center; gap: 9px; height: 34px; border-radius: 999px; background: var(--black); color: var(--white); padding: 4px; font-size: 12px; font-weight: 500; transition: background-color .3s var(--ease); }
.phone__knob { width: 26px; height: 26px; border-radius: 50%; background: var(--volt); transition: transform .35s var(--ease-io), background-color .3s; }
.phone__toggle[aria-checked="false"] { background: var(--ink-22); color: var(--black); }
.phone__toggle[aria-checked="false"] .phone__knob { background: var(--white); }
.phone__foot { margin-top: 8px; font-size: 8px; color: var(--ink-60); text-align: center; }

/* ---------- 5 · stats on volt ---------- */
.stats { position: relative; background: var(--volt); color: var(--black); overflow: hidden; padding: 16vh 0 12vh; }
.stats__word { position: absolute; left: 0; top: 7vh; white-space: nowrap; font-family: var(--f-title); font-stretch: 75%; font-weight: 700; text-transform: uppercase; font-size: 24vw; line-height: .8; letter-spacing: -0.01em; color: transparent; -webkit-text-stroke: 1px rgba(0, 0, 0, .12); pointer-events: none; will-change: transform; }
.stats__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4vw; padding: 0 var(--gut); }
.stats__kicker { color: var(--ink-72); }
.stats__title { margin-top: 16px; font-size: 7.4vw; }
.stats__body { margin-top: 26px; max-width: 40ch; font-size: 17px; line-height: 1.5; }
.stats__img { margin-top: 44px; aspect-ratio: 2 / 1; overflow: hidden; }
.stats__img img { width: 100%; height: 100%; object-fit: cover; }
.stats__list { padding-top: 6vh; }
.stats__item { display: block; padding: 22px 0 26px; border-bottom: 1px solid var(--black); }
.stats__item:first-child { border-top: 1px solid var(--black); }
.stats__num { display: block; font-size: 9.3vw; line-height: .92; }
.stats__num small { font-size: .3em; margin-left: .12em; letter-spacing: 0; }
.stats__cap { display: block; margin-top: 12px; font-size: 16px; font-weight: 500; }
.stats__members { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4vw; padding: 13vh var(--gut) 0; }
.member { display: grid; grid-template-columns: 38% 1fr; gap: 26px; align-items: end; }
.member img { width: 100%; height: auto; aspect-ratio: 9 / 11; object-fit: cover; }
.member blockquote p { font-family: var(--f-ui); font-weight: 500; font-size: clamp(20px, 1.85vw, 28px); line-height: 1.2; letter-spacing: -0.015em; }
.member footer { margin-top: 18px; }

/* ---------- 5b · calculator ---------- */
.calc { position: relative; background: var(--white); padding: 16vh var(--gut) 14vh; }
.calc__kicker { color: var(--ink-60); }
.calc__title { margin-top: 14px; font-size: 7.4vw; }
.calc__intro { margin-top: 20px; font-size: 17px; color: var(--ink-72); }
.calc__body { margin-top: 8vh; display: grid; grid-template-columns: 1.05fr 1.2fr .9fr; gap: 3vw; align-items: stretch; }
.calc__controls { display: flex; flex-direction: column; gap: 42px; padding-top: 8px; }
.calc__field { border: 0; margin: 0; padding: 0; min-width: 0; }
.calc__row { display: flex; justify-content: space-between; align-items: baseline; }
.calc__row label, .calc__region legend { font-size: 16px; font-weight: 500; }
.calc__out { font-size: 30px; line-height: 1; }
.calc__ticks { display: flex; justify-content: space-between; margin-top: 8px; font-size: 10px; color: var(--ink-60); }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; margin: 12px 0 0; background: transparent; cursor: pointer; --p: 40%; }
.range::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--volt) 0 var(--p), var(--ink-08) var(--p) 100%); box-shadow: inset 0 0 0 1px var(--ink-22); }
.range::-moz-range-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--volt) 0 var(--p), var(--ink-08) var(--p) 100%); box-shadow: inset 0 0 0 1px var(--ink-22); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%; background: var(--black); border: 5px solid var(--white); box-shadow: 0 0 0 1px var(--black); }
.range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--black); border: 5px solid var(--white); box-shadow: 0 0 0 1px var(--black); }
.calc__region legend { margin-bottom: 14px; padding: 0; }
.seg { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--black); border-radius: 999px; padding: 3px; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 999px; font-size: 14px; font-weight: 500; transition: background-color .3s var(--ease), color .3s var(--ease); }
.seg input:checked + span { background: var(--black); color: var(--white); }
.seg input:focus-visible + span { outline: 2px solid var(--cobalt); outline-offset: 1px; }
.calc__result { background: var(--black); color: var(--white); border-radius: 18px; padding: 30px; display: grid; grid-template-columns: 96px 1fr; gap: 28px; align-items: start; }
.calc__batt { text-align: center; }
.batt { width: 80px; height: 132px; }
.batt__cap { fill: var(--white); }
.batt__body { fill: none; stroke: var(--white); stroke-width: 3; }
.batt__fill { fill: var(--volt); transform-box: fill-box; transform-origin: 50% 100%; }
.batt__cells line { stroke: var(--black); stroke-width: 3; }
.calc__battlbl { margin-top: 10px; font-size: 10px; color: var(--paper-72); }
.calc__lbl { color: var(--paper-72); font-size: 11px; }
.calc__sum { position: relative; display: flex; align-items: flex-start; margin-top: 10px; font-size: clamp(56px, 6.4vw, 96px); line-height: 1; }
.calc__cur { font-size: .56em; margin-top: .08em; margin-right: .04em; }
.calc__per { font-family: var(--f-mono); font-size: 13px; font-weight: 400; letter-spacing: .04em; align-self: flex-end; margin: 0 0 .5em .4em; color: var(--paper-72); }
.calc__digits { display: inline-flex; height: 1em; overflow: hidden; }
.cw-d { position: relative; display: inline-block; height: 1em; overflow: hidden; }
.cw-d__strip { display: flex; flex-direction: column; transition: transform .9s var(--ease); }
.cw-d__strip span { display: block; height: 1em; line-height: 1; }
.cw-d--sep { width: .26em; }
.calc__split { margin-top: 26px; }
.calc__bar { display: flex; height: 14px; gap: 2px; }
.calc__bar i { display: block; height: 100%; transition: flex-grow .9s var(--ease); }
.calc__self { background: var(--white); flex: 32 1 0; }
.calc__sold { background: var(--volt); flex: 68 1 0; }
.calc__legend { display: flex; justify-content: space-between; margin-top: 10px; font-size: 10px; }
.calc__legend b { font-weight: 400; }
.k { display: inline-block; width: 8px; height: 8px; margin-right: 6px; }
.k--self { background: var(--white); }
.k--sold { background: var(--volt); }
.calc__note { margin-top: 22px; font-size: 13px; line-height: 1.45; color: var(--paper-72); }
.calc__img { overflow: hidden; border-radius: 18px; min-height: 320px; }
.calc__img img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- CTA + footer on cobalt ---------- */
.cta { background: var(--cobalt); color: var(--white); padding: 15vh var(--gut) 12vh; }
.cta__grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 4vw; align-items: end; }
.cta__kicker { color: var(--paper-72); }
.cta__title { margin-top: 16px; font-size: 11.5vw; }
.cta__body { margin-top: 28px; max-width: 44ch; font-size: 17px; line-height: 1.5; }
.cta__form { margin-top: 34px; display: flex; gap: 10px; max-width: 460px; }
.cta__form .field { flex: 1; }
.cta__msg, .foot__msg { margin-top: 12px; min-height: 18px; color: var(--volt); }
.cta__img { aspect-ratio: 16 / 10; overflow: hidden; }
.cta__img img { width: 100%; height: 100%; object-fit: cover; }

.foot { position: relative; background: var(--cobalt); color: var(--white); padding: 9vh var(--gut) 28px; border-top: 1px solid var(--paper-18); overflow: hidden; }
.foot__cols { display: grid; grid-template-columns: repeat(3, 1fr) 1.6fr; gap: 3vw; }
.foot__col { display: flex; flex-direction: column; gap: 6px; font-size: 16px; font-weight: 500; }
.foot__col a { align-self: flex-start; }
.foot__h { color: var(--paper-72); margin-bottom: 10px; }
.foot__newsp { font-size: 15px; max-width: 40ch; color: var(--paper-72); }
.foot__newsrow { display: flex; gap: 10px; margin-top: 16px; }
.foot__newsrow .field { flex: 1; }
.foot__mark { position: relative; margin-top: 12vh; line-height: .8; font-size: calc((100vw - 2 * var(--gut)) / 5.3); }
.foot__outline, .foot__fill { display: block; white-space: nowrap; }
.foot__outline { color: transparent; -webkit-text-stroke: 1.5px var(--white); }
.foot__fill { position: absolute; left: 0; top: 0; color: var(--volt); clip-path: inset(100% 0 0 0); }
.foot__legal { display: flex; justify-content: space-between; gap: 20px; margin-top: 30px; font-size: 11px; color: var(--paper-72); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .nav__links { gap: 18px; font-size: 14px; }
  .calc__body { grid-template-columns: 1fr 1.2fr; }
  .calc__img { display: none; }
}
@media (max-width: 991px) {
  .nav__links { display: none; }
  .nav__menu { display: inline-flex; align-items: center; margin-left: auto; }
  .nav__cta { display: none; }
  .hero__grid { grid-template-columns: 30vw 1px 1fr; }
  .hero__photo { left: 30vw; }
  .hero__title { font-size: 11vw; }
  .hero__block--step { padding-left: 8vw; }
  .tour__grid { grid-template-columns: 40% 1fr; }
  .map__foot { width: 46vw; }
  .stats__grid, .stats__members { grid-template-columns: 1fr; }
  .stats__num { font-size: 13vw; }
  .member { grid-template-columns: 30% 1fr; }
  .calc__body { grid-template-columns: 1fr; }
  .calc__result { max-width: 640px; }
  .cta__grid { grid-template-columns: 1fr; }
  .foot__cols { grid-template-columns: repeat(3, 1fr); }
  .foot__news { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  :root { --nav-h: 64px; }
  .nav { padding: 10px 12px 0; }
  .nav__bar { height: 52px; gap: 8px; padding: 0 5px 0 12px; background: var(--white); border-color: var(--ink-12); justify-content: space-between; }
  .nav__word { font-size: 19px; }
  .nav__menu { margin-left: 0; height: 40px; padding: 0 14px; }
  .meter { height: 40px; padding: 0 11px 0 8px; gap: 7px; }
  .meter__gauge { width: 28px; height: 18px; }
  .meter__hz { font-size: 12px; }
  .nav__drop { width: auto; }

  .hero__stage { min-height: 660px; }
  .hero__grid { grid-template-columns: 34vw 1px 1fr; grid-template-rows: 1fr auto auto auto; }
  .hero__photo { left: 34vw; bottom: auto; height: 58%; }
  .hero__meta { display: contents; }
  .hero__kicker { grid-column: 1; grid-row: 1; align-self: start; padding: calc(var(--nav-h) + 26px) 12px 0 var(--gut); font-size: 10px; }
  .hero__place { grid-column: 1; grid-row: 1; align-self: end; margin: 0; padding: 0 12px 16px var(--gut); font-size: 13px; }
  .hero__rule { grid-row: 1; }
  .hero__title { grid-column: 1 / -1; grid-row: 2; font-size: 15.2vw; padding: 14px var(--gut) 0; }
  .hero__block--step { padding-left: 34vw; }
  .hero__lede { grid-column: 1 / -1; grid-row: 3; margin: 0; padding: 18px var(--gut) 0; font-size: 15px; max-width: none; }
  .hero__cta { grid-column: 1 / -1; grid-row: 4; justify-self: start; margin: 16px 0 5vh var(--gut); height: 46px; padding: 0 18px; font-size: 14px; }
  .hero__hint { display: none; }

  .sees__list { font-size: 19px; line-height: 1.25; padding: 0 16px; top: calc(var(--nav-h) + 44px); }
  .sees__kicker { top: calc(var(--nav-h) + 14px); font-size: 10px; }
  .sees__space { top: 24%; }
  .sees__card { width: 50vw; margin-left: -25vw; margin-top: -18.75vw; }
  .sees__outro { font-size: 25px; bottom: 9vh; }
  html.rm .sees__space { grid-template-columns: 1fr 1fr; }

  .map__stage { display: flex; flex-direction: column; }
  .map__head { position: relative; left: auto; top: auto; padding: calc(var(--nav-h) + 18px) var(--gut) 0; }
  .map__titles { height: 15vw; min-height: 0; }
  .map__title { font-size: 16vw; }
  .map__canvas { position: absolute; top: auto; bottom: 0; height: 70vh; }
  .map__foot { position: relative; left: auto; bottom: auto; width: auto; padding: 10px var(--gut) 0; }
  .map__caps { min-height: 4.4em; }
  .map__cap { font-size: 15px; top: 0; bottom: auto; }
  .map__steps { margin-top: 12px; font-size: 8.5px; }
  .map__hud { height: 72px; font-size: 10px; bottom: 14px; }
  .map__log p { height: 24px; line-height: 24px; }

  .tour { border-radius: 22px 22px 0 0; }
  .tour__rail { padding: 86px 0 20px; }
  .tour__track { font-size: 22px; gap: 30px; }
  .tour__grid { grid-template-columns: 1fr; }
  .tour__side { position: relative; height: auto; padding-top: 48px; }
  .tour__titles { display: none; }
  .tour__aside { margin: 16px 0 0; }
  .tour__panels { padding-top: 10px; }
  .tour__panel { min-height: 0; padding: 44px 0 20px; }
  .tour__inline { display: block; font-size: 13vw; margin-bottom: 18px; }
  .tour__frame { aspect-ratio: 4 / 4.2; border-radius: 14px; }
  .ui { left: 5%; right: 5%; padding: 16px; }
  .ui-health__bars { height: 130px; gap: 4px; }
  .ui-earn__chart { height: 150px; gap: 4px; }
  .ui-earn__months { gap: 4px; }
  .ui-outage { padding-right: 16px; padding-bottom: 76px; }
  .ui-outage__house { right: 50%; top: auto; bottom: 12px; transform: translateX(50%); width: 52px; height: 46px; }
  .phone { width: 58%; }
  .tour__cap { font-size: 23px; margin-top: 22px; }
  .tour__body { font-size: 15px; }

  .stats { padding: 12vh 0 10vh; }
  .stats__word { font-size: 38vw; top: 4vh; }
  .stats__title { font-size: 15vw; }
  .stats__num { font-size: 16vw; }
  .stats__list { padding-top: 0; }
  .member { grid-template-columns: 40% 1fr; gap: 16px; }
  .stats__members { gap: 44px; padding-top: 9vh; }

  .calc { padding: 12vh var(--gut) 10vh; }
  .calc__title { font-size: 15vw; }
  .calc__result { grid-template-columns: 1fr; padding: 24px; gap: 18px; }
  .calc__batt { display: flex; align-items: center; gap: 16px; text-align: left; }
  .batt { width: 44px; height: 72px; }
  .calc__battlbl { margin-top: 0; }
  .seg span { font-size: 13px; }

  .cta { padding: 12vh var(--gut) 10vh; }
  .cta__title { font-size: 21vw; }
  .cta__form { flex-direction: column; }
  .foot__cols { grid-template-columns: 1fr 1fr; gap: 34px 20px; }
  .foot__newsrow { flex-direction: column; }
  .foot__legal { flex-direction: column; gap: 6px; }
}


/* ===== WordPress / Elementor compatibility ===== */
/* Elementor's frontend.min.css ships
     .elementor .elementor-widget:not(.elementor-widget-text-editor):not(.elementor-widget-theme-post-content) figure{margin:0}
   at specificity (0,4,1), which silently flattens every <figure> margin in this
   design: the fly-through cards lose the negative margins that centre them, and
   the stats plate loses its 44px lead. Repeating Elementor's own prefix lands
   these at (0,5,1) so they win on specificity rather than on load order.
   Verified by diffing getComputedStyle margins against the original at 1440. */
.elementor .elementor-widget:not(.elementor-widget-text-editor):not(.elementor-widget-theme-post-content) .sees__card { margin-left: -16.84vw; margin-top: -12.63vw; }
.elementor .elementor-widget:not(.elementor-widget-text-editor):not(.elementor-widget-theme-post-content) .stats__img { margin-top: 44px; }
html.rm .elementor .elementor-widget:not(.elementor-widget-text-editor):not(.elementor-widget-theme-post-content) .sees__card { margin: 0; }

@media (max-width: 767px) {
  .elementor .elementor-widget:not(.elementor-widget-text-editor):not(.elementor-widget-theme-post-content) .sees__card { margin-left: -25vw; margin-top: -18.75vw; }
}