/* Product world — the valley by day, the software over it: one colour per source (content.json palette), Geist for
   everything (V3 preferred list, OFL). The product's own surfaces (panel, plans, header) are glass that follows the
   theme; the words that stand on the valley itself (the features, the proof, the questions, the sign-up) have no box
   behind them (23/10: no plate or glass on text boxes), are light in both themes, and the kit's text grade
   (core/text-grade.js) lays the valley's own shadow under them where it is bright. */
:root {
  --night: #070b12; --deep: #0d1520;
  --page: #dfe5ea; --slate: #b9c3cc;
  /* surfaces (light glass, dark ink) */
  --ink: #0f1620; --ink-2: #3a4655; --mute: #45505f; --line: rgba(15, 22, 32, 0.12); --line-2: rgba(15, 22, 32, 0.24);
  --glass: rgba(246, 248, 250, 0.9); --glass-strong: rgba(246, 248, 250, 0.95); --sheet: #eef2f5; --lift: 0 30px 80px -34px rgba(16, 28, 40, 0.5);
  /* 23/10: the inks clear 4.5:1 on the glass over the darkest valley it crosses («0 MW» in gas ink read 4.49) */
  --solar-ink: #8a4300; --wind-ink: #0d5f70; --storage-ink: #5240c8; --gas-ink: #a2300a;
  /* words on the valley */
  --w-ink: #f5f7f9; --w-2: rgba(245, 247, 249, 0.86); --w-3: rgba(245, 247, 249, 0.74); --w-line: rgba(245, 247, 249, 0.42);
  --solar: #f5b83d; --wind: #7fd6e8; --storage: #a99bff; --load: #eef2f6; --gas: #ff6a3d;
  --face: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --display: clamp(44px, 6.6vw, 108px);
  --gutter: clamp(16px, 2.2vw, 32px);
  --ease: cubic-bezier(0.215, 0.61, 0.355, 1);
}
:root[data-theme='dark'] {
  --page: #070b12; --slate: #1a2430;
  --ink: #eef2f6; --ink-2: rgba(238, 242, 246, 0.86); --mute: #a3afbe; --line: rgba(238, 242, 246, 0.12); --line-2: rgba(238, 242, 246, 0.22);
  /* the valley keeps the hour in both themes, so dark glass sits over a day sky: at 0.72 the mute words read 2.7:1 (23/10) */
  --glass: rgba(10, 16, 25, 0.86); --glass-strong: rgba(7, 11, 18, 0.9); --sheet: #0d1520; --lift: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
  --solar-ink: var(--solar); --wind-ink: var(--wind); --storage-ink: var(--storage); --gas-ink: var(--gas);
}
html { background: var(--page); color-scheme: light; }
html[data-theme='dark'] { color-scheme: dark; }
body { margin: 0; color: var(--w-ink); font-family: var(--face); font-weight: 400; font-size: 16px; -webkit-font-smoothing: antialiased; background: transparent; font-feature-settings: 'ss01'; }
#world { position: fixed; inset: 0; width: 100vw; height: 100svh; z-index: 0; display: block; pointer-events: none; }
main { position: relative; z-index: 2; pointer-events: none; }
main a, main button, main input, main summary, main details, .panel, .card, .plan, .faq, .signup, .period { pointer-events: auto; }
body.is-reading { cursor: pointer; }
button { font: inherit; color: inherit; }

.loader { position: fixed; inset: 0; z-index: 30; background: var(--page); display: flex; align-items: flex-end; justify-content: flex-end; padding: var(--gutter); transition: opacity 0.8s var(--ease), visibility 0s linear 0.8s; }
.loader__n { font-size: var(--display); font-weight: 600; line-height: 0.8; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; color: var(--slate); }
body:not(.is-loading) .loader { opacity: 0; visibility: hidden; }

/* sections: tall for scroll, their words held on screen while the valley moves behind them */
.ch { position: relative; }
.ch__hold { position: sticky; top: 0; height: 100svh; display: grid; padding: calc(var(--edge-h) + 34px) var(--gutter) calc(var(--gutter) * 1.4); box-sizing: border-box; }
.pos-l .ch__hold { align-content: center; justify-items: start; }
.pos-r .ch__hold { align-content: center; justify-items: end; }

.kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; font-size: 15px; color: var(--w-2); }
.kicker::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--solar); box-shadow: 0 0 12px var(--solar); }
.big { font-size: var(--display); font-weight: 600; line-height: 0.94; letter-spacing: -0.045em; margin: 0; max-width: 11ch; text-wrap: balance; }
.mid { font-size: clamp(30px, 4vw, 60px); font-weight: 600; line-height: 1; letter-spacing: -0.035em; margin: 0; max-width: 20ch; }
.head { font-size: clamp(28px, 2.9vw, 44px); font-weight: 600; line-height: 1.02; letter-spacing: -0.035em; margin: 0; max-width: 16ch; }
.lede { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; margin: 24px 0 0; max-width: 44ch; color: var(--w-2); }
.body { font-size: 16px; line-height: 1.55; margin: 16px 0 0; max-width: 42ch; color: var(--w-2); }
.note { font-size: 13.5px; line-height: 1.45; margin: 26px 0 0; max-width: 56ch; color: var(--w-3); }

.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 20px; border-radius: 10px; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform 0.3s var(--ease), background-color 0.3s, border-color 0.3s; white-space: nowrap; }
.btn--solid { background: var(--solar); color: var(--night); }
.btn--solid:hover { background: #ffc85c; transform: translate3d(0, -1px, 0); }
.btn--line { color: var(--w-ink); border-color: var(--w-line); background: rgba(7, 11, 18, 0.32); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn--line:hover { border-color: var(--w-ink); }
.plan .btn--line { color: var(--ink); border-color: var(--line-2); background: transparent; }
.plan .btn--line:hover { border-color: var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--solar); outline-offset: 3px; }

/* ---------------- hero: the words and the product, side by side ---------------- */
.ch--hero .ch__hold { grid-template-columns: minmax(0, 1fr) minmax(360px, 410px); align-items: end; gap: clamp(28px, 4vw, 72px); padding-bottom: clamp(28px, 6vh, 64px); }
.ch--hero .ch__inner { display: contents; }
.hero__copy { align-self: end; padding-bottom: 4px; }

/* the panel: a slice of the software, the same model as the valley */
.panel { position: relative; align-self: end; color: var(--ink); background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px 18px;
  box-shadow: var(--lift), inset 0 1px 0 rgba(255, 255, 255, 0.04); font-size: 14px; }
.panel__top { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.panel__title { font-weight: 600; font-size: 14px; }
.panel__status { display: inline-flex; align-items: center; gap: 7px; height: 22px; padding: 0 9px; border-radius: 999px; background: color-mix(in srgb, var(--wind) 16%, transparent); color: var(--wind-ink); font-size: 12px; }
.panel__status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.3; } }
.panel__clock { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 500; color: var(--ink); font-size: 14px; }
.panel__big { display: grid; padding: 14px 0 8px; }
.panel__k { font-size: 12.5px; color: var(--mute); }
.panel__n { font-size: 60px; font-weight: 600; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; margin-top: 6px; }
.panel__n small { font-size: 0.42em; letter-spacing: -0.02em; margin-left: 4px; color: var(--mute); font-weight: 500; }
.panel__sub { margin: 8px 0 0; color: var(--mute); font-size: 13px; }
.panel__hint { margin: 10px 0 4px; font-size: 12.5px; line-height: 1.45; color: var(--mute); text-wrap: pretty; }
.panel__sub b { color: var(--gas-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.panel__chart { position: relative; margin: 6px 0 2px; }
.panel__chart svg { display: block; width: 100%; height: 112px; overflow: visible; }
.panel__chart path { transition: opacity 0.4s; }
.c-gen { fill: color-mix(in srgb, var(--ink) 7%, transparent); }
.c-solar { fill: var(--solar); opacity: 0.9; }
.c-wind { fill: var(--wind); opacity: 0.85; }
.c-storage { fill: var(--storage); opacity: 0.95; }
.c-gas { fill: var(--gas); opacity: 0.9; }
.c-load { fill: none; stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.c-head { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; opacity: 0.7; }
.c-dot { fill: var(--ink); stroke: var(--sheet); stroke-width: 2; vector-effect: non-scaling-stroke; }
svg.no-solar .c-solar, svg.no-wind .c-wind, svg.no-storage .c-storage, svg.no-gas .c-gas { opacity: 0.14; }
svg.no-load .c-load { opacity: 0.25; }
.panel__range { position: absolute; left: 0; right: 0; top: 0; height: 112px; width: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: none; }
.panel__range:focus-visible + .panel__ticks { color: var(--ink); }
.panel__ticks { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--mute); font-variant-numeric: tabular-nums; }
.panel__row { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-top: 14px; }
.panel__label { display: block; font-size: 12px; color: var(--mute); margin-bottom: 7px; }
.panel__play { height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-2); background: none; color: var(--ink); cursor: pointer; font-size: 13px; white-space: nowrap; }
.panel__play:hover { border-color: color-mix(in srgb, var(--ink) 45%, transparent); }
.seg { display: inline-flex; padding: 3px; gap: 2px; background: color-mix(in srgb, var(--ink) 6%, transparent); border: 1px solid var(--line); border-radius: 9px; }
.seg__opt { height: 26px; padding: 0 12px; border: 0; border-radius: 6px; background: none; cursor: pointer; font-size: 13px; color: var(--mute); transition: background-color 0.25s, color 0.25s; }
.seg__opt.is-on { background: color-mix(in srgb, var(--ink) 14%, transparent); color: var(--ink); }
.seg--period { background: var(--glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.panel__chips { margin-top: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { --c: var(--ink); display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px 0 9px; border-radius: 999px; border: 1px solid var(--line); background: none; cursor: pointer; font-size: 13px; color: var(--mute); transition: color 0.25s, border-color 0.25s, background-color 0.25s; }
.chip i { width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid var(--c); transition: background-color 0.25s; }
.chip.is-on { color: var(--ink); border-color: var(--line-2); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.chip.is-on i { background: var(--c); }
.chip--solar { --c: var(--solar); } .chip--wind { --c: var(--wind); } .chip--storage { --c: var(--storage); } .chip--load { --c: var(--load); } .chip--gas { --c: var(--gas); }
.panel__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.panel__stats dt { font-size: 12px; color: var(--mute); line-height: 1.25; }
.panel__stats dd { margin: 6px 0 0; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.panel__stats dd small { display: block; font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--storage-ink); margin-top: 3px; }

/* ---------------- features: the words beside the place they talk about, on the valley itself ---------------- */
.ch--feature .ch__hold { padding-left: calc(var(--gutter) * 1.5); padding-right: calc(var(--gutter) * 1.5); }
.card { width: min(440px, 100%); box-sizing: border-box; }
.card__live { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 8px 12px; margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--w-line); font-size: 14px; color: var(--w-2); }
.card__live b { color: var(--w-ink); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.card__meter { grid-column: 1 / -1; height: 3px; border-radius: 2px; background: var(--w-line); overflow: hidden; }
.card__meter i { display: block; height: 100%; background: var(--c, var(--ink)); transform-origin: left; transform: scaleX(var(--k, 0)); transition: transform 0.4s var(--ease); }
#town { --c: var(--load); } #wind { --c: var(--wind); } #solar { --c: var(--solar); } #storage { --c: var(--storage); }
#flows { --c: linear-gradient(90deg, var(--solar), var(--wind)); }
#flows .card__meter i { background: linear-gradient(90deg, var(--solar), var(--wind)); }
.card .head::before { content: ''; display: block; width: 26px; height: 3px; border-radius: 2px; background: var(--c, var(--solar)); margin-bottom: 18px; }
#flows .card .head::before { background: linear-gradient(90deg, var(--solar), var(--wind)); }

/* ---------------- proof: three numbers the page computed ---------------- */
.ch--proof .ch__hold { align-content: end; }
.proof { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px clamp(20px, 3vw, 48px); }
.proof li { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--w-line); }
.proof li:nth-child(1) { border-top-color: var(--storage); } .proof li:nth-child(2) { border-top-color: var(--gas); } .proof li:nth-child(3) { border-top-color: var(--wind); }
.proof strong { font-size: clamp(44px, 5.6vw, 92px); font-weight: 600; letter-spacing: -0.05em; line-height: 0.95; font-variant-numeric: tabular-nums; white-space: nowrap; }
.proof span { font-size: 15px; line-height: 1.45; color: var(--w-2); max-width: 26ch; }

/* ---------------- pricing and questions: in the flow of the page, over the map ---------------- */
.ch--flow .ch__hold { position: relative; height: auto; min-height: 100svh; align-content: center; padding-top: calc(var(--edge-h) + 70px); padding-bottom: 90px; }
.flow__head { display: grid; justify-items: start; margin-bottom: 36px; }
.flow__head .body { max-width: 52ch; }
.period { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.period__save { font-size: 13.5px; color: var(--solar); }
.seg--period .seg__opt { height: 32px; padding: 0 16px; font-size: 14px; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.plan { display: flex; flex-direction: column; color: var(--ink); background: var(--glass); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border: 1px solid var(--line); border-radius: 16px; padding: 24px 24px 22px; }
/* the amber is a tint on the glass, not instead of it: as a gradient into the glass its top 40 % had no surface and the
   plan's name read 3.4:1 over the valley (23/10) */
/* the pick card is drawn in ink: the amber as a hairline over pale glass blends to beige (29/10); it stays solid on the badge and the button */
.plan--pick { --pick-line: var(--ink); border-color: var(--pick-line); box-shadow: inset 0 0 0 1px var(--pick-line); }
:root[data-theme='dark'] .plan--pick { --pick-line: var(--solar); }
.plan__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan__name { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.03em; }
.plan__badge { font-size: 12px; font-weight: 500; color: var(--night); background: var(--solar); padding: 4px 9px; border-radius: 999px; }
.plan__for { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--mute); min-height: 2.9em; }
.plan__price { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 0; }
.plan__price strong { font-size: 44px; font-weight: 600; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan__unit { font-size: 14px; color: var(--mute); }
.plan__billed { margin: 6px 0 0; min-height: 1.4em; font-size: 13px; color: var(--mute); }
.plan__list { list-style: none; margin: 20px 0 26px; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; font-size: 14.5px; line-height: 1.4; }
.plan__list li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; }
.plan__list li::before { content: ''; width: 9px; height: 5px; margin-top: 5px; border: solid var(--ink); border-width: 0 0 1.5px 1.5px; transform: rotate(-45deg); }
:root[data-theme='dark'] .plan__list li::before { border-color: var(--solar); }
.plan .btn { margin-top: auto; }
.faq { width: min(860px, 100%); box-sizing: border-box; border-top: 1px solid var(--w-line); border-bottom: 1px solid var(--w-line); }
.faq__item + .faq__item { border-top: 1px solid var(--w-line); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; font-size: 18px; font-weight: 500; letter-spacing: -0.015em; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary i { position: relative; flex: none; width: 14px; height: 14px; }
.faq__item summary i::before, .faq__item summary i::after { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 1.5px; background: var(--solar); transition: transform 0.35s var(--ease); }
.faq__item summary i::after { transform: rotate(90deg); }
.faq__item[open] summary i::after { transform: rotate(0deg); }
.faq__item p { margin: -6px 0 22px; max-width: 64ch; font-size: 16px; line-height: 1.6; color: var(--w-2); }
.faq__item:not([open]) > p { display: none; } /* a closed answer takes no place on the page (it was laid out under the next question) */

/* ---------------- sign-up ---------------- */
.ch--signup .ch__hold { align-content: center; justify-items: start; }
.ch--signup .big { max-width: 13ch; }
.signup { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.signup input { height: 50px; width: min(340px, 100%); box-sizing: border-box; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--glass-strong); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ink); font: inherit; font-size: 16px; }
.signup input::placeholder { color: var(--mute); }
.signup.is-bad input { border-color: var(--gas); }
.signup .btn { height: 50px; }
.signup__done { margin: 14px 0 0; min-height: 1.4em; font-size: 14px; color: var(--w-ink); max-width: 52ch; }

/* ---------------- tags on the map ---------------- */
.tags { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.tag { --c: var(--ink); position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 0.4s; will-change: transform; }
.tag.is-on { opacity: 1; }
.tag--solar { --c: var(--solar); --c-ink: var(--solar-ink); } .tag--wind { --c: var(--wind); --c-ink: var(--wind-ink); } .tag--storage { --c: var(--storage); --c-ink: var(--storage-ink); } .tag--load { --c: var(--load); --c-ink: var(--ink-2); } .tag--gas { --c: var(--gas); --c-ink: var(--gas-ink); }
.tag__dot { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent); }
.tag__body { position: absolute; left: 12px; bottom: 8px; display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: baseline; padding: 7px 11px 8px; white-space: nowrap; color: var(--ink); background: var(--glass-strong); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line); border-left: 2px solid var(--c); border-radius: 8px; font-size: 12px; transition: transform 0.35s var(--ease), border-color 0.3s; transform-origin: left bottom; }
.tag__name { grid-column: 1 / -1; color: var(--mute); font-size: 11.5px; margin-bottom: 3px; }
.tag__body b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tag__body small { font-size: 11.5px; color: var(--c-ink, var(--c)); }
.tag.is-hot .tag__body { transform: scale(1.08); border-color: color-mix(in srgb, var(--c) 60%, transparent); }

.reticle { position: fixed; left: 0; top: 0; z-index: 25; pointer-events: none; width: 0; height: 0; }
.reticle span { position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--w-ink); opacity: 0; transform: scale(0.6); transition: opacity 0.25s, transform 0.35s var(--ease), border-color 0.25s; box-sizing: border-box; }
.reticle.is-on span { opacity: 0.9; transform: none; }
.reticle[data-layer='solar'] span { border-color: var(--solar); } .reticle[data-layer='wind'] span { border-color: var(--wind); } .reticle[data-layer='storage'] span { border-color: var(--storage); } .reticle[data-layer='gas'] span { border-color: var(--gas); }

/* ---------------- the words enter (core/page-motion.js): each block rises and fades in on its own, its lines after it ---------------- */
.line { display: block; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.line > span { display: inline-block; }

/* ---------------- the edges: an app window's chrome ----------------
   The header is the software's own top bar, floating inset over the valley: rounded glass, the parts of the page as a
   segmented control (the bar fills the segment being read), the readout a status chip that says how green the valley
   is at the hour on screen. The footer is the night the valley ends in, with the name solid at the bottom. */
:root {
  --edge-ink: var(--ink); --edge-accent: var(--solar); --edge-accent-ink: var(--night); --edge-face: var(--face); --edge-text: var(--face);
  --edge-backdrop: var(--glass); --edge-line: var(--line); --edge-sheet-bg: var(--sheet); --edge-sheet-ink: var(--ink);
  --edge-foot-bg: var(--deep); --edge-foot-ink: #eef2f6; --edge-radius: 8px; --edge-h: 58px;
}
.edge-head { top: 10px; left: 10px; right: 10px; height: var(--edge-h); padding: 0 8px 0 16px; border-radius: 13px; background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  color: var(--ink); border: 1px solid var(--line); box-shadow: 0 16px 40px -22px rgba(10, 20, 30, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04); gap: 14px; }
.edge-head[data-state='pinned'] { background: var(--glass); border: 1px solid var(--line); }
.edge-head[data-state='hidden'] { transform: none; }
body.edge-open .edge-head { border-color: transparent; box-shadow: none; }
body.edge-open .edge-progress { opacity: 0; }
.edge-progress { left: 16px; right: 16px; bottom: -1px; background: linear-gradient(90deg, var(--solar), var(--wind)); }
.edge-brand svg { height: 20px; color: var(--ink); }
.edge-brand__word { font-weight: 600; font-size: 17px; letter-spacing: -0.03em; }
.edge-mark__sun { fill: var(--solar); opacity: calc(0.35 + var(--k, 0) * 0.65); filter: drop-shadow(0 0 calc(var(--k, 0) * 4px) var(--solar)); transition: opacity 0.4s; }
.edge-nav { justify-self: center; gap: 2px; padding: 3px; background: color-mix(in srgb, var(--ink) 5%, transparent); border: 1px solid var(--line); border-radius: 10px; }
.edge-nav__link { padding: 9px 14px; border-radius: 7px; font-size: 13.5px; opacity: 0.7; z-index: 1; }
.edge-nav__bar { top: 3px; bottom: 3px; height: auto; border-radius: 7px; background: color-mix(in srgb, var(--ink) 12%, transparent); z-index: 0; }
.edge-nav__detail { top: calc(100% + 14px); padding: 7px 11px; border-radius: 8px; background: var(--glass-strong); border: 1px solid var(--line); color: var(--ink); }
.edge-live { padding: 7px 12px 8px; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb, var(--ink) 4%, transparent); }
.edge-live__k { color: var(--mute); opacity: 1; }
.edge-live__meter { border-radius: 2px; }
.edge-live__meter i { background: linear-gradient(90deg, var(--solar), var(--wind)); }
.edge-cta { height: 40px; border-radius: 9px; padding: 0 16px; }
.edge-menu { height: 40px; border-radius: 9px; padding: 0 4px 0 12px; }
.edge-menu__icon { border-radius: 7px; }
.edge-sheet { background-image: radial-gradient(90% 70% at 100% 100%, rgba(245, 184, 61, 0.12), transparent 60%), radial-gradient(70% 60% at 0% 0%, rgba(127, 214, 232, 0.08), transparent 60%); }
.edge-sheet__inner { padding-top: calc(var(--edge-h) + 10px + 6vh); }
.edge-sheet__label, .edge-foot__statement, .edge-tile__label { font-weight: 600; letter-spacing: -0.04em; }
.edge-sheet .edge-live { border: 0; background: none; padding: 0; }
.edge-foot { --ink: var(--edge-foot-ink); --mute: color-mix(in srgb, var(--edge-foot-ink) 64%, transparent); --line: color-mix(in srgb, var(--edge-foot-ink) 14%, transparent); --line-2: color-mix(in srgb, var(--edge-foot-ink) 30%, transparent); }
.edge-foot__statement { max-width: 13ch; }
.edge-tile__label { letter-spacing: -0.03em; }
.edge-form__row input, .edge-form__row textarea { border-bottom-color: var(--line-2); }
.edge-foot__mark { font-weight: 600; letter-spacing: -0.055em; color: var(--ink); border-bottom-color: var(--line); }
.edge-up { border-radius: 9px; }

/* ---------------- the footer: the day it plans ---------------- */
.edge-foot--day { padding-top: calc(var(--edge-h) + 34px); display: grid; align-content: end; box-sizing: border-box; min-height: 100svh; }
.ef-day__ask { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 34ch); align-items: end; column-gap: clamp(32px, 5vw, 96px); }
.ef-day__ask .edge-foot__statement { font-size: clamp(44px, 5.2vw, 92px); line-height: 0.94; max-width: 12ch; }
.ef-day__ask .edge-foot__text { max-width: 34ch; }
.ef-day { display: grid; margin-top: clamp(20px, 2.8vh, 56px); }
.ef-day__chart { position: relative; height: clamp(150px, 19vh, 270px); }
.ef-day__chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.d-gen { fill: color-mix(in srgb, currentColor 9%, transparent); }
.d-solar { fill: var(--solar); opacity: 0.92; }
.d-wind { fill: var(--wind); opacity: 0.88; }
.d-storage { fill: var(--storage); opacity: 0.95; }
.d-gas { fill: var(--gas); opacity: 0.9; }
.d-load { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ef-day__dot { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); bottom: 0; width: 0; border-left: 1px dashed color-mix(in srgb, currentColor 45%, transparent); pointer-events: none; transition: border-color 0.3s var(--ease); }
.ef-day__dot::before { content: ''; position: absolute; left: -6px; top: -5.5px; width: 11px; height: 11px; border-radius: 50%; background: currentColor; transition: transform 0.3s var(--ease); }
.ef-day__dot.is-hot { border-left-color: currentColor; }
.ef-day__dot.is-hot::before { transform: scale(1.5); }
.ef-day__hours { position: relative; height: 26px; border-top: 1px solid currentColor; font-size: 12px; font-variant-numeric: tabular-nums; }
.ef-day__hours span { position: absolute; top: 8px; left: calc(var(--at) * 100%); transform: translateX(-50%); opacity: 0.72; }
.ef-day__hours span:first-child { transform: none; }
.ef-day__hours span:last-child { transform: translateX(-100%); }
.ef-day__fan svg { display: block; width: 100%; height: clamp(52px, 7vh, 88px); overflow: visible; }
.ef-day__lead { fill: none; stroke-linejoin: miter; stroke: currentColor; stroke-width: 1; opacity: 0.4; vector-effect: non-scaling-stroke; transition: opacity 0.3s var(--ease); }
.ef-day__lead.is-hot { opacity: 1; stroke-width: 1.6; }
.ef-day__names { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); column-gap: 12px; }
.ef-day__pin { display: grid; align-content: start; justify-items: center; gap: 4px; padding-top: 10px; text-align: center; color: inherit; text-decoration: none; }
.ef-day__t { font-size: 12px; font-variant-numeric: tabular-nums; opacity: 0.72; }
.ef-day__label { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.ef-day__detail { font-size: 13px; line-height: 1.35; opacity: 0.74; max-width: 15ch; }
.ef-day__pin:hover .ef-day__label, .ef-day__pin:focus-visible .ef-day__label { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.ef-day__chart svg { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s var(--ease); }
.ef-day__dot { opacity: 0; transition: opacity 0.4s var(--ease) calc(0.25s + var(--x) * 1s), border-color 0.3s var(--ease); }
.ef-day.is-drawn .ef-day__chart svg { clip-path: inset(0); }
.ef-day.is-drawn .ef-day__dot { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ef-day__chart svg, .ef-day__dot { transition: none; } }
.edge-form--dispatch { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 22px; margin-top: clamp(24px, 3.5vh, 60px); }
.edge-form--dispatch > .edge-foot__title { grid-column: 1 / -1; margin: 0; font-size: 15px; opacity: 0.86; }
.edge-form--dispatch > .edge-form__done { grid-column: 1 / -1; }
.edge-form--dispatch .edge-form__rows { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.6fr); gap: 14px 24px; align-items: end; }
.edge-form--dispatch .edge-form__row textarea { box-sizing: border-box; height: 40px; overflow: hidden; } /* one line, as tall as the fields beside it */
.edge-form--dispatch .edge-cta { margin: 0; }
@media (max-width: 1000px) {
  .ef-day__detail { display: none; } /* nine names on a narrow day: the hour and the name */
}
@media (max-width: 720px) {
  .ef-day__ask { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .ef-day__ask .edge-foot__statement { font-size: clamp(40px, 12vw, 56px); }
  .edge-foot--day { min-height: 0; }
  .ef-day__chart { height: 190px; }
  .ef-day__fan { display: none; }
  .ef-day__names { grid-template-columns: minmax(0, 1fr); margin-top: 22px; }
  .ef-day__pin { grid-template-columns: 56px minmax(0, 1fr); justify-items: start; align-items: baseline; column-gap: 12px; row-gap: 2px; padding: 12px 0; text-align: left; border-top: 1px solid var(--edge-line); }
  .ef-day__t { grid-row: span 2; }
  .ef-day__detail { display: block; max-width: none; }
  .edge-form--dispatch { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .edge-form--dispatch .edge-form__rows { grid-template-columns: minmax(0, 1fr); }
  .edge-form--dispatch .edge-cta { justify-self: start; }
}

/* ---------------- narrower ---------------- */
@media (max-width: 1100px) {
  .ch--hero .ch__hold { grid-template-columns: minmax(0, 1fr) minmax(330px, 370px); }
  .panel__n { font-size: 52px; }
}
@media (max-width: 900px) {
  :root { --edge-h: 54px; }
  .edge-head { top: 8px; left: 8px; right: 8px; padding-left: 12px; }
  .edge-head[data-state='hidden'] { transform: translate3d(0, calc(-100% - 12px), 0); } /* a phone gives the screen back while reading */
  .ch--hero .ch__hold { position: relative; height: auto; min-height: 100svh; grid-template-columns: minmax(0, 1fr); align-content: end; gap: 34px; padding-top: calc(var(--edge-h) + 70px); }
  .panel { width: min(460px, 100%); box-sizing: border-box; }
  .plans { gap: 10px; }
  .plan { padding: 20px 18px 18px; }
  .plan__price strong { font-size: 34px; }
  .plan__list { font-size: 13.5px; }
  .ch--feature .ch__hold { align-content: end; justify-items: start; padding-bottom: calc(var(--gutter) * 2); }
}
@media (max-width: 720px) {
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  .plan__price strong { font-size: 40px; }
  .proof { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .big { font-size: clamp(42px, 12vw, 64px); }
  .panel { padding: 14px 14px 16px; }
  /* a phone's chart stands taller, so the hour axis under it falls below the first screen's foot and not under the
     «Built with VULK» badge (its 18 and 24 sat under it at 390×844, 23/10) */
  .panel__chart svg, .panel__range { height: 132px; }
  .panel__n { font-size: 48px; }
  .ch--feature .ch__hold { padding-left: var(--gutter); padding-right: var(--gutter); }
  /* the «Built with VULK» badge holds the bottom right corner (core/badge.js): the words that rest at the foot of a phone
     screen stop above it */
  .ch--feature .ch__hold, .ch--proof .ch__hold { padding-bottom: 68px; }
  .faq__item summary { font-size: 16.5px; padding: 18px 0; }
  .signup input, .signup .btn { width: 100%; }
  .tag__body { padding: 5px 8px 6px; }
  .tag__body b { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .panel__status i { animation: none; }
}