/* Ampena.
   ART DIRECTION: THE DRIVE MOVES FORWARD. COMPLEXITY APPEARS.
   AMPENA HANDLES IT. ONE ACTION REMAINS.

   Reconstruction of the approved art direction in the Ampena codebase.
   Premium European mobility: a full-bleed graded drive, Archivo editorial
   headlines, generous space, Night / Paper / White / Ampena Blue. Blue is
   spent only where Ampena acts: the eyebrow that names an Ampena act, the
   decision plate, the one button, the strike through a chore. The hero is
   real footage; every other visual world is drawn, so nothing repeats. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('fonts/archivo-var-latin.woff2') format('woff2-variations');
  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: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('fonts/archivo-var-latin-ext.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================ TOKENS */
:root {
  --blue:      #1b4fe0;
  --blue-700:  #1642c4;
  --blue-300:  #8fb2ff;
  --blue-100:  #e7edfd;

  --night:     #070b13;
  --night-2:   #0b1220;
  --night-3:   #131c2b;
  --ink:       #0b1220;
  --paper:     #eceff5;
  --white:     #ffffff;
  --ghost:     #e4e8f1;

  --muted:     #5d6880;
  --dim:       #8c9bb2;
  --signal:    #f2ab90;

  --on-1:      rgba(255, 255, 255, 0.92);
  --on-2:      rgba(255, 255, 255, 0.72);
  --on-3:      rgba(255, 255, 255, 0.52);
  --n-line:    rgba(255, 255, 255, 0.14);
  --l-line:    rgba(11, 18, 32, 0.12);

  --gut: clamp(20px, 8.2vw, 118px);
  --shell: 1204px;

  --h-xl: clamp(2.875rem, 5.97vw, 5.375rem);
  --h-lg: clamp(2.25rem, 4.6vw, 4.125rem);
  --h-md: clamp(2rem, 3.61vw, 3.25rem);
  --lead: clamp(1.0625rem, 0.42vw + 0.94rem, 1.1875rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);

  --mast-h: 84px;
}

@media (max-width: 767px) {
  :root {
    --gut: 20px;
    --h-xl: clamp(2rem, 9.5vw, 2.5rem);
    --h-lg: clamp(1.75rem, 8.2vw, 2.125rem);
    --h-md: clamp(1.5rem, 7.44vw, 1.875rem);
    --mast-h: 68px;
  }
}

/* ============================================================ BASE */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }

.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--white); color: var(--ink);
  padding: 12px 18px; border-radius: 6px; font-weight: 600;
}
.skip:focus { left: 16px; top: 16px; }

:focus-visible {
  outline: 2px solid var(--blue-300);
  outline-offset: 3px;
  border-radius: 4px;
}
[data-ground='paper'] :focus-visible,
[data-ground='white'] :focus-visible { outline-color: var(--blue); }

.shell {
  width: min(100% - var(--gut) * 2, var(--shell));
  margin-inline: auto;
}

/* ============================================================ TYPE */
.display {
  margin: 0;
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: -0.035em;
  line-height: 1.01;
}
.display--xl { font-size: var(--h-xl); }
.display--lg { font-size: var(--h-lg); line-height: 1.03; }
.display--md { font-size: var(--h-md); letter-spacing: -0.028em; line-height: 1.06; }
/* a line break that only earns its keep while the line is long enough */
@media (max-width: 767px) { br.nb { display: none; } }

.eyebrow {
  margin: 0 0 clamp(14px, 1.5vw, 22px);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--muted);
}
.eyebrow--blue  { color: var(--blue); }
.eyebrow--dim   { color: var(--on-2); }
.eyebrow--muted { color: var(--muted); }
.eyebrow--faint { color: rgba(255, 255, 255, 0.56); }
[data-ground='night'] .eyebrow--blue,
[data-ground='blue']  .eyebrow--blue,
.ea .eyebrow--blue { color: var(--blue-300); }

.lead {
  margin: clamp(18px, 2vw, 26px) 0 0;
  max-width: 57ch;
  font-size: var(--lead);
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--muted);
}
.lead--onnight { color: var(--on-2); }
.lead--onblue  { color: rgba(255, 255, 255, 0.86); }

.fineprint {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
}
[data-ground='night'] .fineprint { color: var(--on-3); }

/* ============================================================ BUTTONS
   One interaction system. Lift on hover, arrow steps 3 px, press settles
   to .985, focus is a ring that survives every ground. No glow. */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; cursor: pointer;
  padding: 17px 26px;
  min-height: 48px;
  border-radius: 6px;
  font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em;
  text-decoration: none;
  transition:
    transform 200ms var(--ease),
    background-color 200ms var(--ease),
    color 200ms var(--ease),
    box-shadow 200ms var(--ease);
}
.btn__arrow {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 200ms var(--ease);
}
.btn--go { padding-right: 22px; }

.btn--light { background: var(--white); color: var(--ink); box-shadow: 0 10px 28px rgba(7, 11, 19, 0.28); }
.btn--blue  { background: var(--blue); color: #fff; border-radius: 10px; box-shadow: 0 6px 18px rgba(11, 18, 32, 0.18); }
.btn--sm { padding: 11px 18px; min-height: 40px; font-size: 0.8125rem; border-radius: 5px; box-shadow: none; }
.btn--lg { padding: 19px 28px; min-height: 56px; font-size: 1rem; }

@media (hover: hover) {
  .btn--light:hover { background: var(--blue); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(7, 11, 19, 0.36); }
  .btn--blue:hover  { background: var(--blue-700); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(11, 18, 32, 0.24); }
  .btn:hover .btn__arrow { transform: translateX(3px); }
}
.btn:active { transform: translateY(0) scale(0.985); }
.btn[disabled], .btn[aria-busy='true'] { cursor: progress; opacity: 0.72; transform: none; }
.btn:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 3px; }
[data-ground='paper'] .btn:focus-visible,
[data-ground='white'] .btn:focus-visible { outline-color: var(--blue); }
@media (hover: hover) {
  .btn--light.btn--sm:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(7, 11, 19, 0.30); }
}

/* links get the same considered treatment */
.foot__nav a, .mast__link, .close__ns a, .foot__say a {
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 180ms var(--ease), text-decoration-color 180ms var(--ease);
}

/* ============================================================ MAST */
.mast {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  height: var(--mast-h);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--gut);
  color: #fff;
  transition: background-color 300ms var(--ease), backdrop-filter 300ms var(--ease), color 300ms var(--ease);
}
.mast[data-stuck='1'] {
  background: rgba(7, 11, 19, 0.82);
  backdrop-filter: saturate(1.3) blur(14px);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07);
}
.mast__brand {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none;
  padding-block: 9px; margin-block: -9px;
}
.mast__mark { width: 23px; height: 27px; fill: currentColor; flex: none; }
.mast__word {
  font-size: 1.5rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1;
}
.mast__nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); }
.mast__link {
  font-size: 0.8125rem; font-weight: 600; text-decoration: none;
  color: rgba(255, 255, 255, 0.82);
}
.mast__link:hover { color: #fff; }

@media (max-width: 559px) {
  .mast__link { display: none; }
  .mast__word { font-size: 1.25rem; }
  .mast__mark { width: 19px; height: 22px; }
}

/* ============================================================ 1 · HERO */
.hero {
  position: relative;
  background: var(--night);
  color: #fff;
  min-height: min(100svh, 940px);
  display: flex; align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 52% 50%;
  /* the graded master already carries the look; this only seats it on Night */
  filter: saturate(0.96) contrast(1.02);
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(7,11,19,.92) 0%, rgba(7,11,19,.80) 26%, rgba(7,11,19,.42) 52%, rgba(7,11,19,.24) 74%, rgba(7,11,19,.46) 100%),
    linear-gradient(180deg, rgba(7,11,19,.72) 0%, rgba(7,11,19,.12) 26%, rgba(7,11,19,.10) 58%, rgba(7,11,19,.78) 100%);
}
/* not positioned on purpose: the HMI lives inside the copy column in the DOM
   but is placed against the hero itself on wide screens */
.hero__inner { width: min(100% - var(--gut) * 2, var(--shell)); }
.hero__copy { max-width: min(62%, 762px); padding-block: calc(var(--mast-h) + 34px) 40px; }

/* the trip, said as one journey sentence. No columns, no labels, no cards and
   no rules: the run of the drive on one line, the arrival on the next, and the
   arrival is the larger of the two because the arrival is the point. */
.trip {
  display: grid;
  gap: clamp(9px, 0.9vw, 13px);
  margin: clamp(30px, 3.6vw, 48px) 0 0;
}
.trip__run {
  display: flex; flex-wrap: wrap; align-items: baseline;
  font-size: clamp(0.9375rem, 0.36vw + 0.87rem, 1.0625rem);
  line-height: 1.4;
  letter-spacing: -0.006em;
  color: var(--on-2);
}
.trip__run b { font-weight: 600; color: #fff; }
.trip__run i {
  font-style: normal;
  margin-inline: clamp(8px, 0.9vw, 13px);
  color: rgba(255, 255, 255, 0.34);
}
.trip__out {
  font-size: clamp(1.375rem, 1.5vw + 0.88rem, 1.9375rem);
  font-weight: 600; letter-spacing: -0.032em; line-height: 1.1;
  color: #fff;
}

.hero__cta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px;
  margin: clamp(26px, 3vw, 38px) 0 0;
}
.hero__note { font-size: 0.8125rem; color: var(--on-3); }
.hero__sim {
  position: absolute; z-index: 3; right: var(--gut); bottom: 22px; margin: 0;
  font-size: 0.75rem; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.52);
}

/* --- the HMI: an instrument state, not a pin on the landscape -------------
   It lives in its own right-hand track, is centred vertically, and does not
   drift with the footage. The camera moves; the instrument does not. */
.hmi {
  position: absolute; z-index: 2;
  left: 63.5%; right: var(--gut); top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  max-width: 340px;
}
.hmi__plate {
  position: relative;
  padding: 14px 20px 15px 20px;
  border-radius: 12px;
  background: rgba(7, 11, 19, 0.80);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 20px 48px rgba(7, 11, 19, 0.44), inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}
.hmi__plate::before {
  content: ''; position: absolute; left: 0; top: 13px; bottom: 13px; width: 3px;
  border-radius: 3px; background: var(--blue-300);
}
.hmi__label {
  display: block;
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.17em;
  text-transform: uppercase; color: var(--blue-300); line-height: 1.2;
}
.hmi__vals { display: flex; align-items: baseline; gap: 18px; margin-top: 7px; }
.hmi__v {
  font-size: 1.5rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: #fff;
}
.hmi__v + .hmi__v { position: relative; padding-left: 18px; }
.hmi__v + .hmi__v::before {
  content: ''; position: absolute; left: 0; top: 1px; bottom: 1px; width: 1px;
  background: rgba(255, 255, 255, 0.18);
}
.hmi__v i {
  font-style: normal; font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0; color: var(--on-3); margin-left: 5px;
}

/* the one line that separates Ampena from a charger directory: the stop was
   chosen for this car and this tariff. One line, inside the plate, no KPIs. */
.hmi__why {
  display: flex; align-items: center; gap: 7px;
  margin-top: 12px; padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  font-size: 0.75rem; font-weight: 500; letter-spacing: -0.006em; line-height: 1.3;
  color: rgba(255, 255, 255, 0.82);
}
.hmi__tick {
  width: 13px; height: 13px; flex: none;
  fill: none; stroke: var(--blue-300); stroke-width: 2.1;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0;
  animation: hmiTick 420ms 1680ms var(--ease) forwards;
}
@keyframes hmiTick { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: none; } }

.hmi__route { margin-top: 16px; padding-inline: 2px; }
.hmi__rail {
  position: relative; display: block; height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.20);
}
.hmi__fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 62%;
  border-radius: 3px; background: var(--blue-300);
  transform: scaleX(0); transform-origin: left;
  animation: hmiDraw 1100ms 420ms var(--ease) forwards;
}
.hmi__stop {
  position: absolute; left: 62%; top: 50%;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%; background: var(--blue-300);
  box-shadow: 0 0 0 3px rgba(7, 11, 19, 0.8);
  opacity: 0;
  animation: hmiPop 420ms 1380ms var(--ease) forwards;
}
@keyframes hmiDraw { to { transform: scaleX(1); } }
@keyframes hmiPop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }

.hmi__ends { display: flex; justify-content: space-between; margin-top: 9px; }
.hmi__ends i {
  font-style: normal; font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.58);
  text-shadow: 0 1px 6px rgba(7, 11, 19, 0.9);
}

/* ============================================ 2 · WAS AMPENA DIR ABNIMMT
   Flat night and nothing else. No sky, no horizon, no light field, no rail
   and no cards: the empty space is the argument, so the space is left empty.
   Thirteen thoughts are set at display size in an art-directed field — eight
   uneven bands on a twenty-four column grid, four sizes, two thoughts
   standing alone in the middle of the width, one reaching out into the
   gutter — because they are a driver's mental load and not interface labels.
   Zones, not coordinates: two thoughts that share a band never share a
   column, so the field is irregular by composition and cannot collide or
   leave the page at any width.

   Ampena takes them one at a time in three closely related ways — a blue
   rule under the words, a lift out of the field, a contraction into a blue
   tick — never in one direction and never in the order they are read. */
.load { position: relative; background: var(--night); color: #fff; }
/* long enough that the complete field stands for roughly a screen and a half
   of scrolling before Ampena starts taking it apart */
.load__track { height: 480vh; }
.load__stage {
  position: sticky; top: 0;
  height: 100svh; min-height: 620px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.load__inner {
  position: relative; z-index: 2;
  flex: 1; display: flex; flex-direction: column;
  padding-block: calc(var(--mast-h) + clamp(20px, 3vh, 44px)) clamp(22px, 3.6vh, 48px);
}
.load__head { max-width: 680px; flex: none; }

/* the field owns everything below the head, so the answer can never reach it.
   Four sizes: 54 / 41 / 31 / 24.5 px at 1440, stepped down on short screens
   so the composition survives a laptop instead of being cropped. */
.load__field {
  --q-xl: clamp(1.9375rem, min(4vw, 5.8vh), 3.5rem);
  --q-lg: clamp(1.5rem, min(3.05vw, 4.55vh), 2.6875rem);
  --q-md: clamp(1.1875rem, min(2.3vw, 3.45vh), 2.0625rem);
  --q-sm: clamp(1rem, min(1.82vw, 2.72vh), 1.625rem);
  position: relative; flex: 1; min-height: 260px;
  /* the breathing zone: the first thought never starts under the headline */
  margin-top: clamp(18px, 4.2vh, 58px);
}

/* eight bands of deliberately unequal height — the three that carry a
   dominant thought are the tall ones — over a twenty-four column grid. The
   first row is the breathing zone and scales with the field. */
.load__grid {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  /* the three bands that carry a dominant thought are the tall ones; the
     band that carries the smallest is the shortest. Nothing is even. */
  grid-template-rows:
    minmax(0, 0.68fr) minmax(0, 1.38fr) minmax(0, 1.38fr) minmax(0, 1.15fr)
    minmax(0, 1.15fr) minmax(0, 1.38fr) minmax(0, 1.08fr) minmax(0, 0.87fr)
    minmax(0, 1.15fr);
  column-gap: 0;
}
.q {
  --a: 0;   /* arrival    0 … 1 */
  --p: 0;   /* resolution 0 … 1 */
  --q-live: rgba(255, 255, 255, 0.93);
  --q-dim:  rgba(140, 176, 255, 0.32);
  position: relative; margin: 0;
  grid-column: var(--c, 1 / span 8); grid-row: var(--r, auto);
  justify-self: start; align-self: var(--al, center);
  max-width: 100%;
  font-size: var(--fs, var(--q-md));
  font-weight: 600; letter-spacing: -0.032em; line-height: 1.05;
  transform-origin: 0% 50%;
  opacity: calc(var(--a) * (1 - var(--out, 0)));
  transform:
    translate3d(0, calc(var(--dy, 0em) + var(--ty, 0px) + (1 - var(--a)) * 20px), 0)
    scale(var(--sc, 1));
  will-change: transform, opacity;
}
.q--xl { --fs: var(--q-xl); }
.q--lg { --fs: var(--q-lg); }
.q--md { --fs: var(--q-md); }
.q--sm { --fs: var(--q-sm); }
/* a thought that hangs off the column and into the gutter: the one at the
   edge of the field is the one at the edge of attention */
.q--bleed { margin-inline-start: calc(var(--gut) * -0.46); }
/* anchored to the right of its own zone, so the field has right edges that
   are set and not only ragged ones */
.q--end { justify-self: end; transform-origin: 100% 50%; }

.q__t { position: relative; display: block; color: var(--q-live); }
/* the words lose their contrast as a whole, never from one side to the other */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .q__t { color: color-mix(in srgb, var(--q-dim) calc(var(--h, 0) * 100%), var(--q-live)); }
}
@media (forced-colors: active) { .q__t { color: CanvasText; } }

/* one 2 px Ampena mark, drawn two ways */
.q__m { position: absolute; background: var(--blue-300); border-radius: 2px; }

/* A · quittiert — a blue rule runs under the words, then both go */
.q--rule { --h: clamp(0, calc(var(--p) / 0.36), 1); --out: clamp(0, calc((var(--p) - 0.46) / 0.54), 1); }
.q--rule .q__m {
  left: 0; right: 0; bottom: -0.1em; height: 2px;
  transform: scaleX(clamp(0, calc(var(--p) / 0.32), 1));
  transform-origin: 0 50%;
  opacity: clamp(0, calc(var(--p) * 14), 1);
}
.q--end.q--rule .q__m { transform-origin: 100% 50%; }

/* B · abgezogen — the thought lifts out of the field and dims away */
.q--lift { --h: clamp(0, calc(var(--p) / 0.44), 1); --out: clamp(0, calc((var(--p) - 0.14) / 0.86), 1); --ty: calc(var(--p) * -16px); }
.q--lift .q__m { display: none; }

/* C · eingesammelt — the thought contracts into a blue tick at its anchor */
.q--draw { --h: clamp(0, calc(var(--p) / 0.3), 1); --out: clamp(0, calc((var(--p) - 0.28) / 0.72), 1); --sc: calc(1 - var(--p) * 0.09); }
.q--draw .q__m {
  left: -0.32em; top: 0.08em; bottom: 0.08em; width: 2px;
  transform: scaleY(clamp(0, calc(var(--p) / 0.22), 1));
  transform-origin: 50% 0;
  opacity: min(calc(var(--p) * 11), calc((0.64 - var(--p)) * 5), 1);
}
.q--end.q--draw .q__m { left: auto; right: -0.32em; }

/* what is left once the field is empty. It stands on the same blue bar the
   Ladestopp carries in the next section, so the blue opens with the object
   this line has just become. */
.load__done {
  --ans: 0;
  position: absolute; left: 0; right: 0; top: 47%; z-index: 3;
  padding-left: clamp(17px, 1.5vw, 23px);
  transform: translate3d(0, calc(-50% + (1 - var(--ans)) * 16px), 0);
  opacity: var(--ans);
  pointer-events: none;
}
.load__done::before {
  content: ''; position: absolute; left: 0; top: 3px; bottom: 5px; width: 3px;
  border-radius: 3px; background: var(--blue-300);
  transform: scaleY(clamp(0, calc((var(--ans) - 0.18) / 0.5), 1));
  transform-origin: 50% 0;
}
.load__doneK {
  margin: 0 0 clamp(11px, 1.3vw, 17px);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--blue-300);
}
.load__doneV {
  margin: 0;
  font-size: clamp(1.75rem, 3.4vw, 3rem); font-weight: 700;
  letter-spacing: -0.034em; line-height: 1.04; color: #fff;
}

/* the dark HMI plate, one grammar everywhere Ampena answers */
.plate {
  position: relative; display: inline-grid; gap: 4px;
  padding: 15px 22px 16px 24px;
  border-radius: 12px;
  background: var(--night);
  box-shadow: 0 22px 50px rgba(7, 11, 19, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  text-align: left;
}
.plate::before {
  content: ''; position: absolute; left: 0; top: 13px; bottom: 13px; width: 3px;
  border-radius: 3px; background: var(--blue-300);
}
.plate__label {
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--blue-300); line-height: 1.2;
}
.plate__value { font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.015em; color: #fff; line-height: 1.2; }
.plate--lg { padding: 17px 26px 18px 28px; }

/* ============================================ 3 · AUS ALL DEM
   The payoff, not another explanation. One route crosses the whole blue
   field; the decided part of it is bright, the rest is faint, and the single
   event on it stands exactly above the decision, joined to it by one
   hairline. The claim hangs under the left half of the route, the decision
   under the right half, and both start on the same line. On arrival a few
   traces run in along the route and collapse into that one point, the
   decision rises, and the three things it was checked against land. Then the
   blue is calm on purpose, not by accident. */
.resolve {
  background: var(--blue); color: #fff;
  padding-block: clamp(62px, 8vw, 106px) clamp(76px, 10vw, 134px);
}
.resolve__inner {
  --cgap: clamp(40px, 6vw, 92px);
  --rgap: clamp(40px, 4.8vw, 70px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.88fr);
  column-gap: var(--cgap);
  row-gap: var(--rgap);
  align-items: start;
}

/* the route. Its own grid repeats the section's, so the event on it lands on
   the exact edge the decision stands on — not near it. */
.rroute {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: inherit;
  column-gap: inherit;
  grid-template-rows: 2px;
  height: 2px;
}
.rroute > * { grid-row: 1; align-self: start; }
.rroute__rail {
  grid-column: 1 / -1;
  height: 2px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
}
.rroute__run {
  /* the decided part of the route runs all the way to the event, gap
     included, so the bright line ends where the decision stands */
  grid-column: 1; margin-right: calc(var(--cgap) * -1);
  height: 2px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.9);
  transform: scaleX(0); transform-origin: left center;
}
/* the event: the only point on the route that has been decided */
.rroute__stop {
  grid-column: 2; justify-self: start;
  width: 11px; height: 11px; margin: -4.5px 0 0 -5.5px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 4px var(--blue);
  opacity: 0; transform: scale(0.4);
}
/* and the one line that says the event and the decision are the same thing */
.rroute__drop {
  grid-column: 2; justify-self: start;
  width: 1px; height: calc(var(--rgap) + 2px);
  background: rgba(255, 255, 255, 0.26);
  transform: scaleY(0); transform-origin: 50% 0;
}
.resolve__inner[data-in='1'] .rroute__run { animation: rrDraw 1150ms 120ms var(--ease) forwards; }
.resolve__inner[data-in='1'] .rroute__stop { animation: rrPop 440ms 1120ms var(--ease) forwards; }
.resolve__inner[data-in='1'] .rroute__drop { animation: rrDrop 620ms 1380ms var(--ease) forwards; }
@keyframes rrDraw { to { transform: scaleX(1); } }
@keyframes rrPop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@keyframes rrDrop { to { transform: scaleY(1); } }

/* what is left of everything that was weighed: a few traces running in along
   the route and collapsing into the one point. No arrows, no nodes, no
   labels — the four named contexts belong to the convergence, not here. */
.funnel {
  grid-column: 1; align-self: center;
  position: relative; height: 0;
}
.funnel i {
  position: absolute; right: calc(var(--cgap) * -1); top: var(--t);
  display: block; height: 2px; width: var(--w); border-radius: 2px;
  background: rgba(255, 255, 255, 0.34);
  transform: scaleX(0); transform-origin: 0% 50%; opacity: 0;
}
.resolve__inner[data-in='1'] .funnel i {
  animation: trace 1560ms var(--ease) forwards;
  animation-delay: calc(var(--i) * 105ms);
}
/* run in from behind, stand for a beat, then collapse into the event */
@keyframes trace {
  0%   { transform-origin: 0% 50%;   transform: scaleX(0); opacity: 0; }
  24%  { transform-origin: 0% 50%;   transform: scaleX(1); opacity: 1; }
  25%  { transform-origin: 100% 50%; transform: scaleX(1); opacity: 1; }
  54%  { transform-origin: 100% 50%; transform: scaleX(1); opacity: 1; }
  100% { transform-origin: 100% 50%; transform: scaleX(0); opacity: 0; }
}

.resolve .lead { max-width: 46ch; }
.resolve__out { position: relative; min-width: 0; }

/* the decision, as an object. Same grammar as the plate, one level up: it
   answers first, and then it says what it answered for. */
.verdict {
  position: relative;
  padding: clamp(22px, 2.3vw, 30px) clamp(24px, 2.6vw, 34px) clamp(20px, 2.1vw, 27px) clamp(26px, 2.9vw, 37px);
  border-radius: 14px;
  background: var(--night);
  box-shadow: 0 26px 62px rgba(7, 11, 19, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  opacity: 0; transform: translate3d(0, 14px, 0);
  transition: opacity 720ms 1500ms var(--ease), transform 720ms 1500ms var(--ease);
}
.resolve__inner[data-in='1'] .verdict { opacity: 1; transform: none; }
.verdict::before {
  content: ''; position: absolute; left: 0; top: 17px; bottom: 17px; width: 3px;
  border-radius: 3px; background: var(--blue-300);
}
.verdict__k {
  display: block;
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--blue-300); line-height: 1.2;
}
.verdict__v {
  display: block; margin-top: 8px;
  font-size: clamp(1.25rem, 1.86vw, 1.75rem); font-weight: 600;
  letter-spacing: -0.02em; color: #fff; line-height: 1.22;
}
.verdict__list {
  margin: clamp(16px, 1.7vw, 21px) 0 0;
  padding: clamp(14px, 1.5vw, 18px) 0 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
  display: grid; gap: 10px;
}
.verdict__list li {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.8125rem; font-weight: 500; letter-spacing: -0.004em;
  line-height: 1.3; color: rgba(255, 255, 255, 0.78);
}
.verdict__list svg {
  width: 13px; height: 13px; flex: none;
  fill: none; stroke: var(--blue-300); stroke-width: 2.1;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0;
}
.resolve__inner[data-in='1'] .verdict__list svg {
  animation: vTick 380ms var(--ease) forwards;
  animation-delay: calc(2080ms + var(--n) * 130ms);
}
@keyframes vTick { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: none; } }

/* ============================================ 4 · SO ARBEITET AMPENA */
.product {
  --dev-w: 340px;
  position: relative; background: var(--paper); color: var(--ink);
  padding-block: clamp(72px, 9vw, 130px);
  overflow: hidden;
}
/* Background typography, not a watermark behind the device: the word is
   anchored to the device column so its A always starts just short of the
   phone's edge. The phone overlaps a quarter of the A and no more, which is
   why AMPENA reads as AMPENA at every width and never as MPENA. */
.ghost {
  position: absolute; z-index: 0; margin: 0;
  left: calc(100% - 0.2em);
  /* sits with the headline, never across the lead: the device column and the
     copy column share a centre, and the headline is a fixed step above it */
  top: calc(50% - clamp(250px, 20vw, 285px)); transform: translateY(-50%);
  font-size: clamp(4rem, 12.4vw, 11.125rem);
  font-weight: 700; letter-spacing: 0.06em; line-height: 1;
  color: var(--ghost);
  user-select: none; pointer-events: none; white-space: nowrap;
}
.product__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: var(--dev-w) 1fr; gap: clamp(36px, 6vw, 96px);
  align-items: center;
}
.product__device { position: relative; display: flex; justify-content: flex-start; perspective: 1500px; }

/* --- the device: real phone proportions, thin bezel, seated screen --- */
.phone {
  --pw: var(--dev-w, 340px); --bez: 9px;
  position: relative; z-index: 1;
  width: var(--pw);
  aspect-ratio: 340 / 690;
  transform:
    translate3d(0, var(--rise, 0px), 0)
    rotateY(var(--ry, -1.6deg))
    rotateX(var(--rx, 0.6deg));
  transform-style: preserve-3d;
  transition: transform 900ms var(--ease);
}
.phone[data-tilt='1'] { transition: transform 260ms var(--ease); }
.phone__body {
  position: absolute; inset: 0;
  border-radius: 46px;
  background:
    linear-gradient(148deg, #46536c 0%, #1b2536 14%, #0b1220 34%, #0b1220 66%, #1b2536 86%, #46536c 100%);
  box-shadow:
    0 60px 110px rgba(11, 18, 32, 0.34),
    0 26px 52px rgba(11, 18, 32, 0.22),
    0 8px 18px rgba(11, 18, 32, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 1px 1px rgba(255, 255, 255, 0.34);
  padding: var(--bez);
}
.phone__screen {
  position: relative; height: 100%;
  border-radius: 38px;
  background: var(--white);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.52);
}
.island {
  position: absolute; left: 50%; top: 9px; transform: translateX(-50%);
  width: 86px; height: 23px; border-radius: 12px;
  background: #05080f; z-index: 4;
}
.phone__rail {
  position: absolute; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, #55617a, #2a3446);
  z-index: 0;
}
.phone__rail--vol { left: -2px; top: 21%; height: 7%; }
.phone__rail--vol::after {
  content: ''; position: absolute; left: 0; top: calc(100% + 16px); width: 2px; height: 100%;
  border-radius: 2px; background: linear-gradient(180deg, #55617a, #2a3446);
}
.phone__rail--pwr { right: -2px; top: 29%; height: 13%; }

/* --- the app: one screen, one next action --- */
.app {
  position: relative; z-index: 3; height: 100%;
  display: flex; flex-direction: column;
  padding: 44px 20px 20px;
  color: var(--ink);
}
.app__bar { display: flex; align-items: center; gap: 8px; flex: none; }
.app__mark { width: 13px; height: 15px; fill: var(--ink); flex: none; }
.app__name { font-size: 0.8125rem; font-weight: 700; letter-spacing: -0.01em; }
.app__time { margin-left: auto; font-size: 0.75rem; font-weight: 600; color: var(--dim); }

.app__goal { margin-top: 26px; display: grid; gap: 3px; flex: none; }
.app__k {
  font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--dim);
}
.app__k--blue { color: var(--blue-300); }

/* the product state: three moments, one line, one at a time */
.app__states { position: relative; display: block; height: 1.45em; }
.app__v {
  position: absolute; left: 0; top: 0; right: 0;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.45;
  white-space: nowrap;
  opacity: 0; transform: translateY(6px);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.phone[data-state='0'] .app__v[data-s='0'],
.phone[data-state='1'] .app__v[data-s='1'],
.phone[data-state='2'] .app__v[data-s='2'] { opacity: 1; transform: none; }
.phone[data-state='1'] .app__v[data-s='1'] { color: var(--blue); }

.app__route {
  position: relative; margin-top: 18px; height: 9px; display: flex; align-items: center; flex: none;
}
.app__from, .app__to, .app__stop { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); flex: none; }
.app__stop {
  background: var(--blue); box-shadow: 0 0 0 3px rgba(27, 79, 224, 0.18);
  position: absolute; left: 57%;
  opacity: 0; transform: scale(0.4);
  transition: opacity 360ms var(--ease), transform 360ms var(--ease);
}
.phone[data-state='2'] .app__stop { opacity: 1; transform: none; }
.app__track { position: relative; flex: 1; height: 1px; background: var(--l-line); }
.app__track b {
  position: absolute; left: 0; top: 0; height: 1px; width: 57%;
  background: var(--blue); transform: scaleX(var(--prog, 0)); transform-origin: left;
  transition: transform 1100ms var(--ease);
  display: block;
}

/* --- one restrained status between the route and the answer. It says what
   Ampena weighed, and it finishes weighing the moment the stop is decided:
   the rail fills with the route, the verdict swaps when the card arrives. --- */
.ctxbar { margin-top: auto; margin-bottom: auto; flex: none; padding-block: 4px; }
.ctxbar__k {
  margin: 0;
  font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--dim);
}
/* one segment per context, filling in the order the words are read */
.ctxbar__rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 12px 0 11px; }
.ctxbar__rail i {
  display: block; height: 2px; border-radius: 2px; background: rgba(11, 18, 32, 0.10);
  position: relative; overflow: hidden;
}
.ctxbar__rail i::after {
  content: ''; position: absolute; inset: 0; border-radius: 2px; background: var(--blue);
  transform: scaleX(var(--prog, 0)); transform-origin: left;
  transition: transform 420ms var(--ease);
  transition-delay: calc(var(--i) * 300ms);
}
.ctxbar__states { position: relative; display: block; margin: 0; height: 1.4em; }
.ctxbar__v {
  position: absolute; left: 0; top: 0;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.008em; line-height: 1.4;
  color: var(--muted);
  opacity: 0; transform: translateY(5px);
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.ctxbar__v[data-s='1'] { color: var(--blue); }
.phone[data-state='0'] .ctxbar__v[data-s='0'],
.phone[data-state='1'] .ctxbar__v[data-s='0'],
.phone[data-state='2'] .ctxbar__v[data-s='1'] { opacity: 1; transform: none; }
.ctxbar__tick {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: var(--blue); stroke-width: 2.1;
  stroke-linecap: round; stroke-linejoin: round;
}

.app__card {
  margin-top: 0; flex: none;
  /* the answer's place is held, quietly, until there is an answer */
  background: rgba(11, 18, 32, 0.05); color: #fff;
  border-radius: 16px; padding: 15px 15px 13px;
  transition: background-color 520ms var(--ease);
}
.app__card > * {
  opacity: 0; transform: translateY(8px);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.phone[data-state='2'] .app__card { background: var(--night); }
.phone[data-state='2'] .app__card > * { opacity: 1; transform: none; }
.phone[data-state='2'] .app__card > *:nth-child(2) { transition-delay: 70ms; }
.phone[data-state='2'] .app__card > *:nth-child(3) { transition-delay: 140ms; }
.phone[data-state='2'] .app__card > *:nth-child(4) { transition-delay: 210ms; }
.app__cardTop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.app__chip {
  background: var(--blue); color: #fff; border-radius: 6px;
  padding: 4px 9px; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.02em;
}
.app__dist { margin: 8px 0 0; font-size: 1.875rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.app__sum {
  margin: 12px 0 0;
  font-size: 0.75rem; font-weight: 500; letter-spacing: -0.005em; line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
}

/* --- Warum dieser Stopp? a small premium disclosure, not a drawer --- */
.why {
  margin-top: 13px; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 0 10px; margin-bottom: -10px;
  background: none; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.13);
  cursor: pointer; text-align: left;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.75rem; font-weight: 600; letter-spacing: -0.005em;
  transition: color 180ms var(--ease);
}
.why:hover { color: #fff; }
.why:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 2px; }
.why__chev {
  width: 13px; height: 13px; flex: none;
  fill: none; stroke: var(--blue-300); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 260ms var(--ease);
}
.why[aria-expanded='true'] .why__chev { transform: rotate(180deg); }
.why__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 320ms var(--ease);
}
.why[aria-expanded='true'] + .why__panel { grid-template-rows: 1fr; }
.why__list {
  overflow: hidden; margin: 0; padding: 0; list-style: none;
  display: grid; gap: 7px;
  font-size: 0.6875rem; line-height: 1.4; color: rgba(255, 255, 255, 0.7);
}
.why[aria-expanded='true'] + .why__panel .why__list { padding-top: 10px; }
.why__list li { position: relative; padding-left: 13px; }
.why__list li::before {
  content: ''; position: absolute; left: 0; top: 0.52em; width: 6px; height: 1.5px;
  border-radius: 1px; background: var(--blue-300);
}

.app__action {
  margin: 13px 0 0; flex: none;
  background: var(--blue); color: #fff; border-radius: 12px;
  text-align: center; padding: 14px 10px;
  font-size: 0.9375rem; font-weight: 600;
  /* there is nothing to plan until Ampena has decided */
  opacity: 0.16; filter: grayscale(1);
  transition: opacity 460ms var(--ease), filter 460ms var(--ease);
}
.phone[data-state='2'] .app__action { opacity: 1; filter: none; }
.app__foot { margin: 11px 0 0; flex: none; font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--dim); text-align: center; }

.product__line {
  margin: clamp(24px, 3vw, 34px) 0 0;
  max-width: 22ch;
  font-size: clamp(1.25rem, 1.2vw + 0.9rem, 1.625rem);
  font-weight: 600; letter-spacing: -0.028em; line-height: 1.16;
  color: var(--ink);
}

.product .fineprint { margin-top: clamp(20px, 2.4vw, 30px); }

/* ============================================ 5 · DIESELBE SÄULE
   The one measured fact on the page, told as a conclusion and not as a chart:
   two tariffs at one real charging point, what one charge costs under each,
   and the difference between them as the largest number in the section. Every
   figure is read from data/ladepreise-wenden-2026-09-06.json and every figure
   also stands in the DOM as plain text, so the claim survives the layout.

   The device sits on the RIGHT here. The product section has it on the left,
   so the page alternates: world, product, proof, world. */
.proof {
  position: relative;
  background: var(--white); color: var(--ink);
  padding-block: clamp(80px, 10vw, 138px) 0;
  overflow: hidden;
}
.proof__inner {
  --dev-w: 340px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--dev-w);
  gap: clamp(30px, 5vw, 78px);
  align-items: start;
}
.proof__copy { padding-bottom: clamp(70px, 8vw, 116px); min-width: 0; }
.proof__copy .display { max-width: 16ch; }
.proof__copy .lead { max-width: 46ch; }

.rate { margin: clamp(32px, 4.2vw, 54px) 0 0; }
.rate__pair {
  --pair-gap: clamp(18px, 3.4vw, 52px);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--pair-gap);
  padding-bottom: clamp(26px, 3.2vw, 40px);
}
.rate__one { position: relative; min-width: 0; }
.rate__one--hi::before {
  content: ''; position: absolute; top: 2px; bottom: 2px; width: 1px;
  left: calc(var(--pair-gap) / -2);
  background: var(--l-line);
}
.rate__k {
  margin: 0 0 clamp(10px, 1.2vw, 16px);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--muted);
}
.rate__v {
  margin: 0;
  font-size: clamp(1.5rem, 3.1vw, 2.5rem);
  font-weight: 700; letter-spacing: -0.042em; line-height: 1; color: var(--ink);
}
.rate__v i {
  font-style: normal; font-size: 0.4em; font-weight: 500;
  letter-spacing: -0.01em; color: var(--muted); margin-left: 3px;
}
.rate__s { margin: clamp(9px, 1vw, 13px) 0 0; font-size: 0.875rem; color: var(--muted); }
.rate__s .num { font-weight: 600; color: var(--ink); }

/* the conclusion: the only number that has to be remembered, and the one
   sentence that says what it is. The blue rule is Ampena drawing the line. */
.rate__delta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 22px;
  margin: 0; padding-top: clamp(24px, 3vw, 36px);
  border-top: 2px solid var(--blue);
}
.rate__delta b {
  font-size: clamp(2.375rem, 5.2vw, 4.25rem); font-weight: 700;
  letter-spacing: -0.046em; line-height: 0.96; color: var(--blue);
}
.rate__delta span {
  font-size: clamp(1rem, 0.42vw + 0.9rem, 1.1875rem);
  letter-spacing: -0.01em; line-height: 1.45; max-width: 24ch;
}
.rate__src {
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  font-size: 0.8125rem; font-weight: 500; letter-spacing: -0.005em; color: var(--muted);
}
.rate__src .num { font-weight: 700; color: var(--ink); }
.rate__note { margin-top: 9px; max-width: 64ch; font-size: 0.75rem; color: #66718a; }

/* one restrained entrance: the two tariffs arrive, the difference lands last */
.rate__one, .rate__delta {
  opacity: 0; transform: translate3d(0, 14px, 0);
  transition: opacity 660ms var(--ease), transform 660ms var(--ease);
}
.rate[data-in='1'] .rate__one { opacity: 1; transform: none; }
.rate[data-in='1'] .rate__one--hi { transition-delay: 130ms; }
.rate[data-in='1'] .rate__delta { opacity: 1; transform: none; transition-delay: 320ms; }

/* --- the second device: the same hardware at the same size as the first one,
   tilted the other way and standing whole in its column. It is the same
   product seen again, so it is not suddenly a third larger and not cropped. --- */
.proof__device {
  position: relative;
  padding-bottom: clamp(70px, 8vw, 116px);
  perspective: 1600px;
  opacity: 0; transform: translate3d(0, 28px, 0);
  transition: opacity 820ms var(--ease), transform 820ms var(--ease);
}
.proof__device[data-in='1'] { opacity: 1; transform: none; }
.phone--b {
  --pw: var(--dev-w, 340px);
  --ry: 2.4deg; --rx: -0.8deg;
  --prog: 1;
}
.app--b { padding: 44px 19px 18px; }
.app--b .app__route { margin-top: 18px; }
.app__k--ink { color: var(--muted); }
.appb__head { margin-top: 26px; flex: none; display: grid; gap: 3px; }
.appb__dist { margin: 5px 0 0; font-size: 2rem; font-weight: 700; letter-spacing: -0.036em; line-height: 1; }
.appb__sum { margin: 3px 0 0; font-size: 0.8125rem; letter-spacing: -0.005em; color: var(--muted); }

/* the price, inside the product: the range that is really on offer at this
   charging point, and the reason it is a range. Never a personal price. */
.appb__price {
  margin-top: auto; flex: none;
  padding: 14px 14px 15px; border-radius: 13px;
  background: rgba(11, 18, 32, 0.05);
}
.appb__price .app__k { display: block; }
.appb__priceV {
  margin: 9px 0 0;
  font-size: 1.375rem; font-weight: 700; letter-spacing: -0.034em; line-height: 1; color: var(--ink);
}
.appb__priceV i {
  font-style: normal; font-size: 0.5em; font-weight: 500;
  letter-spacing: -0.01em; color: var(--muted); margin-left: 3px;
}
.appb__priceS { margin: 8px 0 0; font-size: 0.6875rem; letter-spacing: 0.01em; color: var(--muted); }

.appb__tarif {
  margin: 11px 0 0; flex: none;
  display: flex; align-items: center; gap: 9px;
  padding: 11px 13px; border-radius: 11px;
  background: var(--blue-100);
  font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.008em; color: var(--blue-700);
}
.appb__tick {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: var(--blue); stroke-width: 2.1;
  stroke-linecap: round; stroke-linejoin: round;
}
.appb__why {
  margin-top: 11px; flex: none;
  background: var(--night); color: #fff;
  border-radius: 16px; padding: 15px 15px 14px;
}
.app--b .app__action { margin-top: 12px; }
.appb__whyK { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: -0.005em; color: rgba(255, 255, 255, 0.82); }
.appb__list {
  margin: 11px 0 0; padding: 0; list-style: none;
  display: grid; gap: 7px;
  font-size: 0.6875rem; line-height: 1.4; color: rgba(255, 255, 255, 0.7);
}
.appb__list li { position: relative; padding-left: 13px; }
.appb__list li::before {
  content: ''; position: absolute; left: 0; top: 0.52em; width: 6px; height: 1.5px;
  border-radius: 1px; background: var(--blue-300);
}

/* ============================================ 6 · AUCH OHNE ZIEL
   The one product direction on the page. Every section before it starts with
   a destination; this one says what Ampena is being built to do when there is
   none.

   It is laid out as one column of argument beside one product moment: the
   eyebrow, the claim, the example and the standing note run down the left,
   and the ambient state stands beside all of it, level with the eyebrow. That
   is what keeps the two columns near the same height and the section free of
   a hole above the rail; nothing here is centred, stretched or padded to fill.

   It is deliberately not a third device. The ambient state has no chrome at
   all, a status line, the car, the situation the car stands in, because that
   is what ambient means; only the offer arrives as an object, with the blue
   bar every Ampena answer on this page stands on. And the offer leads with
   its reason: the standing time is the one thing a charging map cannot know,
   so it is the headline and the price is the footnote.

   Motion is four beats: the car is read, the situation resolves, one offer
   arrives, and further down the rail draws once. Beobachten, verstehen, erst
   dann vorschlagen. The dot is a standby light, 0,34 of an opacity step over
   3,2 s, and it stops the moment Ampena speaks. Nothing loops after that. */
.amb {
  background: var(--night); color: #fff;
  padding-block: clamp(76px, 10vw, 130px);
}
.amb__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(320px, 30vw, 420px);
  column-gap: clamp(36px, 4.6vw, 72px);
  row-gap: clamp(20px, 2.4vw, 30px);
  align-items: start;
}
.amb__head  { grid-column: 1; grid-row: 1; }
.amb__lead  { grid-column: 1; grid-row: 2; margin: 0; max-width: 48ch; }
.amb__side  { grid-column: 1; grid-row: 3; min-width: 0; }
/* the product moment starts level with the eyebrow, so Ampena's own label and
   the section's label read as one line across the page */
.amb__stage { grid-column: 2; grid-row: 1 / 4; min-width: 0; }
.amb__base  { grid-column: 1 / -1; grid-row: 4; margin-top: clamp(18px, 2.2vw, 32px); }

/* the headline breaks where it is written only while the left column is wide
   enough to hold the longer half; below that it wraps on its own */
@media (min-width: 900px) and (max-width: 1099px) {
  .amb__head br { display: none; }
}

/* today and next, at readable size and in the page's own voice. This is the
   paragraph an answer engine should find, so it is plain prose in the DOM. */
.amb__note {
  margin: 0; padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid var(--n-line);
  max-width: 50ch;
  font-size: 0.9375rem; line-height: 1.62; letter-spacing: -0.003em;
  color: var(--on-2);
}
.amb__grant {
  display: flex; align-items: flex-start; gap: 10px;
  margin: clamp(18px, 2vw, 24px) 0 0; max-width: 46ch;
  font-size: 0.875rem; line-height: 1.55; color: var(--on-2);
}
.amb__grant b { color: #fff; font-weight: 600; }
.amb__tick {
  width: 15px; height: 15px; flex: none; margin-top: 3px;
  fill: none; stroke: var(--blue-300); stroke-width: 2.1;
  stroke-linecap: round; stroke-linejoin: round;
}

/* --- the ambient state: nothing to dismiss and nothing to read, until
   there is something worth saying --- */
.agent { position: relative; }
.agent__who {
  display: flex; align-items: center; gap: 9px; margin: 0;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--on-3); line-height: 1.2;
}
.agent__dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--blue-300);
  animation: standby 3200ms var(--ease-io) infinite;
}
.agent[data-state='3'] .agent__dot { animation: none; opacity: 1; }
@keyframes standby { 0%, 100% { opacity: 1; } 50% { opacity: 0.34; } }

/* one cell, two states: a grid stack keeps the taller line's height at every
   width, so a wrapped line can neither collapse nor overflow */
.agent__says { display: grid; margin: 12px 0 0; }
.agent__v {
  grid-area: 1 / 1;
  margin: 0;
  font-size: clamp(1.125rem, 1.15vw + 0.84rem, 1.4375rem);
  font-weight: 600; letter-spacing: -0.022em; line-height: 1.28; color: #fff;
  opacity: 0; transform: translateY(6px);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.agent[data-state='0'] .agent__v[data-s='0'],
.agent[data-state='1'] .agent__v[data-s='0'],
.agent[data-state='2'] .agent__v[data-s='0'],
.agent[data-state='3'] .agent__v[data-s='1'] { opacity: 1; transform: none; }
.agent__sub { margin: 6px 0 0; font-size: 0.875rem; line-height: 1.4; color: var(--on-3); }

/* the car, as an instrument: the fill is the level it is at, the ghost the
   level this offer would reach, and the short mark the reserve Ampena never
   plans below. The number the ghost reaches is named once, in the offer. */
.soc {
  margin-top: clamp(20px, 2.2vw, 28px);
  padding-top: clamp(15px, 1.7vw, 20px);
  border-top: 1px solid var(--n-line);
}
.soc__k {
  margin: 0;
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--on-3); line-height: 1.2;
}
.soc__v { display: flex; align-items: baseline; gap: 4px; margin: 9px 0 0; }
.soc__v b {
  font-size: clamp(1.5rem, 1.9vw, 1.875rem); font-weight: 700;
  letter-spacing: -0.034em; line-height: 1; color: #fff;
}
.soc__v i { font-style: normal; font-size: 1rem; font-weight: 600; color: var(--on-2); }
.soc__bar {
  position: relative; display: block; margin-top: 12px;
  height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.09);
}
.soc__ghost, .soc__fill {
  position: absolute; left: 0; top: 0; height: 100%; border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
}
.soc__ghost { width: 67%; background: var(--blue-300); opacity: 0.34; transition: transform 900ms 200ms var(--ease); }
.soc__fill  { width: 31%; background: var(--blue); transition: transform 820ms var(--ease); }
.agent[data-state='1'] .soc__fill,
.agent[data-state='2'] .soc__fill,
.agent[data-state='3'] .soc__fill { transform: scaleX(1); }
.agent[data-state='3'] .soc__ghost { transform: scaleX(1); }
.soc__res { position: absolute; left: 12%; top: -2px; width: 1px; height: 8px; background: var(--n-line); }

/* the situation Ampena reads, and the only thing between the car and the
   offer. It is what is measurable; the routine behind it is the offer's job. */
.agent__ctx {
  display: flex; align-items: center; gap: 9px;
  margin: clamp(14px, 1.6vw, 20px) 0 0;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.004em;
  line-height: 1.35; color: var(--on-2);
  opacity: 0; transform: translateY(5px);
  transition: opacity 460ms var(--ease), transform 460ms var(--ease);
}
.agent[data-state='2'] .agent__ctx,
.agent[data-state='3'] .agent__ctx { opacity: 1; transform: none; }
.agent__tick {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: var(--blue-300); stroke-width: 2.1;
  stroke-linecap: round; stroke-linejoin: round;
}

/* the offer: one plate, two answers, no third. The same grammar as every
   other Ampena answer on this page, and the reason stands where the price
   normally would. */
.opp {
  position: relative;
  margin-top: clamp(16px, 1.8vw, 22px);
  padding: clamp(16px, 1.8vw, 21px) clamp(16px, 1.8vw, 21px) clamp(14px, 1.6vw, 18px) clamp(20px, 2.2vw, 25px);
  border-radius: 14px;
  background: var(--night-3);
  box-shadow: 0 26px 62px rgba(7, 11, 19, 0.38), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  opacity: 0; transform: translate3d(0, 14px, 0);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}
.agent[data-state='3'] .opp { opacity: 1; transform: none; }
.opp::before {
  content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px;
  border-radius: 3px; background: var(--blue-300);
}
.opp__k {
  margin: 0;
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--blue-300); line-height: 1.2;
}
.opp__h {
  margin: 8px 0 0;
  font-size: clamp(1.0625rem, 0.95vw + 0.82rem, 1.3125rem); font-weight: 600;
  letter-spacing: -0.022em; line-height: 1.24; color: #fff;
}
.opp__facts { margin: clamp(12px, 1.4vw, 15px) 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.opp__facts li {
  position: relative; padding-left: 14px;
  font-size: 0.8125rem; line-height: 1.42; letter-spacing: -0.004em;
  color: rgba(255, 255, 255, 0.76);
  opacity: 0; transform: translateY(6px);
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
  transition-delay: calc(240ms + var(--n) * 90ms);
}
.agent[data-state='3'] .opp__facts li { opacity: 1; transform: none; }
.opp__facts li::before {
  content: ''; position: absolute; left: 0; top: 0.3em; width: 3px; height: 0.86em;
  border-radius: 2px; background: rgba(143, 178, 255, 0.45);
}
.opp__facts li.opp__hi { color: #fff; font-weight: 600; }
.opp__facts li.opp__hi::before { background: var(--blue); }

/* what the stop leaves behind: the charge it reaches and what it costs, on
   one line, because they are one answer */
.opp__sum {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 4px 12px;
  margin: clamp(12px, 1.4vw, 15px) 0 0;
  padding-top: clamp(11px, 1.3vw, 14px);
  border-top: 1px solid rgba(255, 255, 255, 0.11);
  opacity: 0; transform: translateY(6px);
  transition: opacity 400ms 540ms var(--ease), transform 400ms 540ms var(--ease);
}
.agent[data-state='3'] .opp__sum { opacity: 1; transform: none; }
.opp__gain {
  display: inline-flex; align-items: baseline; gap: 7px; min-width: 0;
  font-size: 0.9375rem; letter-spacing: -0.012em; color: var(--on-2);
}
.opp__gain b { font-weight: 600; color: #fff; }
.opp__arw {
  position: relative; align-self: center; flex: none;
  display: block; width: 13px; height: 1.5px; border-radius: 1px;
  background: var(--blue-300);
}
.opp__arw::after {
  content: ''; position: absolute; right: 0; top: 50%; width: 5px; height: 5px;
  border-top: 1.5px solid var(--blue-300); border-right: 1.5px solid var(--blue-300);
  transform: translateY(-50%) rotate(45deg); transform-origin: 75% 25%;
}
.opp__kwh { font-size: 0.8125rem; color: var(--on-3); }
.opp__eur { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.018em; color: #fff; white-space: nowrap; margin-left: auto; }
.opp__do {
  display: flex; gap: 9px; margin: clamp(12px, 1.4vw, 15px) 0 0;
  opacity: 0; transform: translateY(6px);
  transition: opacity 400ms 640ms var(--ease), transform 400ms 640ms var(--ease);
}
.agent[data-state='3'] .opp__do { opacity: 1; transform: none; }
.opp__go, .opp__no {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding-inline: 10px; border-radius: 11px;
  font-size: 0.875rem; font-weight: 600; letter-spacing: -0.008em;
}
/* the one answer that moves. Declining stays quiet on purpose: it is a
   signal too, and it should never look like the thing to press. */
.opp__go {
  flex: 1.35; background: var(--blue); color: #fff;
  transition: background-color 220ms var(--ease), transform 180ms var(--ease),
              box-shadow 220ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  /* the same lift every other Ampena answer gets, one step quieter */
  .opp__go:hover {
    background: var(--blue-700); transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(7, 11, 19, 0.42);
  }
}
.opp__go:active { transform: scale(0.985); box-shadow: none; }
.opp__no { flex: 1; color: var(--on-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.agent__foot {
  margin: clamp(11px, 1.3vw, 14px) 0 0;
  font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--on-3);
  opacity: 0;
  transition: opacity 400ms 720ms var(--ease);
}
.agent[data-state="3"] .agent__foot { opacity: 1; }

/* --- how it gets there: one line, taken once. The same gesture as the route
   in the hero and the context rail in the phone, and deliberately not four
   cards: setting up, driving, answering and getting more relevant are one
   continuous thing, so they sit on one continuous line. The line is drawn
   left to right on entry, each stage lights as the line reaches it, and both
   the track and the blue fade out at the right rather than stopping, because
   the last stage is the one that never finishes. --- */
.lrail {
  position: relative; margin: 0; padding: 26px 0 0; list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(20px, 2.6vw, 44px);
}
.lrail::before, .lrail::after {
  content: ''; position: absolute; left: 0; right: 0; top: 4px; height: 1px;
}
.lrail::before {
  background: linear-gradient(90deg, var(--n-line) 0 76%, rgba(255, 255, 255, 0) 100%);
}
.lrail::after {
  top: 3px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--blue-300) 0 76%, rgba(143, 178, 255, 0) 100%);
  transform: scaleX(0); transform-origin: left;
  /* a drawn line wants an even speed, not the page's arrival ease: with
     --ease the head would be at three quarters before the second stage lit.
     This is that ease softened to near-linear at both ends, so the nodes
     light in step with the line rather than behind it. */
  transition: transform 1400ms cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
.lrail.is-drawn::after { transform: scaleX(1); }

.lst { position: relative; min-width: 0; }
/* the node sits on the rail, unlit as a ring cut out of the night and lit as
   one Ampena point, in the order the line reaches it */
.lst::before {
  content: ''; position: absolute; left: 0; top: -26px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--night); box-shadow: inset 0 0 0 1.5px var(--n-line);
  transform: scale(0.72);
  transition: background-color 320ms var(--ease), box-shadow 320ms var(--ease), transform 320ms var(--ease);
  transition-delay: calc(var(--i) * 300ms + 100ms);
}
.lrail.is-drawn .lst::before {
  background: var(--blue-300); box-shadow: 0 0 0 3.5px rgba(143, 178, 255, 0.15);
  transform: none;
}
.lst__k { margin: 0 0 8px; color: #fff; }
.lst__t { margin: 0; font-size: 0.875rem; line-height: 1.55; letter-spacing: -0.003em; color: var(--on-2); }

/* ============================================ 7 · WAS ZUSAMMENLÄUFT
   Four contexts stand at the four corners of the full width. Each becomes live,
   then a single Ampena hairline leaves it, turns once and disappears into the
   passage inside the mark. Each arrival draws half of one piece of the approved
   F1-B mark along its real centreline: Auto and Fahrt build the upper-left
   turn, Ladewelt and Tarife build the lower-right one. When the fourth has
   landed the drawn geometry hands over to the master outlines, so what stands
   at the end is the approved mark itself, and only then does the Ladestopp
   appear. Nothing else is drawn: no connectors, no nodes, no arrows. */
.converge { background: var(--night); color: #fff; }
.converge__track { height: 250vh; }
.converge__stage {
  position: sticky; top: 0;
  height: 100svh; min-height: 640px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.converge__inner {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  padding-block: calc(var(--mast-h) + clamp(16px, 3vh, 44px)) clamp(20px, 4vh, 50px);
}
.converge__copy { flex: none; }
.converge__copy .display { max-width: 34ch; }

.cv {
  --ans: 0; --solid: 0;
  position: relative; flex: 1; min-height: 280px;
  margin-top: clamp(20px, 3.4vh, 50px);
}
/* the streams live under the composition: they arrive in the passage and are
   gone. Nothing they travelled along is left on the page. */
.cv__flow {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
.cv__stream {
  fill: none; stroke: var(--blue-300); stroke-width: 2;
  stroke-linecap: round;
  opacity: var(--so, 0);
}

.cv__grid {
  position: relative; z-index: 2;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(238px, 24vw, 322px) minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: clamp(16px, 3vh, 38px) clamp(18px, 3.2vw, 54px);
}
.ctx { position: relative; max-width: 27ch; opacity: var(--co, 1); }
.ctx[data-c='0'] { grid-area: 1 / 1; align-self: start; justify-self: start; }
.ctx[data-c='1'] { grid-area: 1 / 3; align-self: start; justify-self: end; text-align: right; }
.ctx[data-c='2'] { grid-area: 2 / 1; align-self: end;   justify-self: start; }
.ctx[data-c='3'] { grid-area: 2 / 3; align-self: end;   justify-self: end; text-align: right; }

/* the rule is the context becoming live, and the point the hairline leaves from */
.ctx__rule {
  display: block; width: 44px; height: 2px;
  margin-bottom: clamp(12px, 1.5vw, 18px);
  background: rgba(255, 255, 255, 0.14);
}
.ctx__rule::after {
  content: ''; display: block; height: 2px;
  background: var(--blue);
  transform: scaleX(var(--cr, 0)); transform-origin: left;
}
.ctx[data-c='1'] .ctx__rule,
.ctx[data-c='3'] .ctx__rule { margin-left: auto; }
.ctx[data-c='1'] .ctx__rule::after,
.ctx[data-c='3'] .ctx__rule::after { transform-origin: right; }

.ctx__t {
  margin: 0;
  font-size: clamp(1.0625rem, 1.35vw, 1.5rem); font-weight: 700;
  letter-spacing: -0.028em; line-height: 1.1; color: #fff;
}
.ctx__d {
  margin: 9px 0 0;
  font-size: clamp(0.8125rem, 0.5vw + 0.7rem, 0.9375rem);
  letter-spacing: -0.005em; line-height: 1.5;
  color: var(--on-3);
  opacity: var(--cd, 1);
}

/* the centre: the mark builds here, the decision arrives under it */
.cv__core {
  grid-area: 1 / 2 / 3 / 3;
  align-self: center; justify-self: center;
  display: grid; justify-items: center;
  gap: clamp(16px, 2.4vh, 32px);
}
.cv__mark {
  display: block;
  height: clamp(126px, 17.2vh, 200px);
  width: auto;
  overflow: visible;
}
/* the drawn geometry: the exact centrelines of the master outlines at the
   locked stroke of 15, so the construction is the mark and not a redrawing */
/* The gap is deliberately longer than the path. With a symmetric `100` the
   pattern repeats exactly at the end of the path, and the browser renders a
   hairline of the final butt cap there — two stray white slivers sitting in
   the middle of the section before anything has been built. A 300-long gap
   moves that repeat well past the end, and the opacity gate makes the empty
   state empty even if a browser rounds the offset the other way. */
.cv__seg {
  fill: none; stroke: #fff; stroke-width: 15;
  stroke-linecap: butt; stroke-linejoin: miter;
  stroke-dasharray: 100 300;
  stroke-dashoffset: calc(100 * (1 - var(--da, 0)));
  opacity: calc(clamp(0, calc(var(--da, 0) * 60), 1) * (1 - var(--solid, 0)));
}
/* and the approved master outlines, which take over the instant it is whole */
.cv__solid path { fill: #fff; opacity: var(--solid); }

.cv__out {
  transform: translate3d(0, calc((1 - var(--ans)) * 10px), 0);
  opacity: var(--ans);
}
/* on night the plate needs a value step, not a shadow */
.converge .plate {
  padding: 17px 26px 18px 28px;
  background: var(--night-3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.11);
}
.converge .plate__value { font-size: 1.1875rem; }
/* and on the blue ground it needs a shadow that belongs there */
.resolve .plate { box-shadow: 0 14px 30px rgba(11, 18, 32, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.07); }

/* the invitation comes after the installation, never inside it */
.converge__after {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px;
  margin-block: 0;
  padding-block: clamp(46px, 6vw, 84px) clamp(58px, 7.4vw, 100px);
}
.converge__note { font-size: 0.8125rem; color: var(--on-3); }

/* ============================================ 8 · UNTERSCHIED */
.diff {
  background: var(--night); color: #fff;
  padding-block: clamp(76px, 10vw, 130px);
  --old: 1; --new: 0.88;
}
.diff__head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: start; }
.diff__head .display { max-width: 17ch; }
.diff__lead { margin-top: 6px; max-width: 46ch; font-size: clamp(1rem, 0.4vw + 0.9rem, 1.125rem); }

.diff__cols {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px);
  margin-top: clamp(46px, 6vw, 84px);
}
/* No separator between the columns. The only rule on this section is the one
   over the Ampena side, and it fills blue as the section is read. */
.diff__col { position: relative; padding-top: 22px; border-top: 1px solid var(--n-line); }
.diff__col--new::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--blue);
  transform: scaleX(var(--dp, 0)); transform-origin: left;
}

.chore, .does { list-style: none; margin: 0; padding: 0; display: grid; }
/* each chore loses its emphasis on its own beat, one after another */
.chore { gap: clamp(7px, 0.9vw, 11px); }
.chore li {
  --k: clamp(0, calc((var(--dp, 0) - var(--i) * 0.13) * 5), 1);
  position: relative; padding-left: 20px;
  font-size: 1.125rem; font-weight: 400; letter-spacing: -0.01em;
  color: rgba(255, 255, 255, calc(0.86 - 0.36 * var(--k)));
}
.chore li::before {
  content: ''; position: absolute; left: 0; top: 0.72em; width: 10px; height: 1px;
  background: rgba(255, 255, 255, calc(0.40 - 0.26 * var(--k)));
  transform: scaleX(calc(1 - 0.55 * var(--k))); transform-origin: left;
}
/* and each Ampena responsibility gains its own on the same beat, half a step
   later, with one short blue rule that grows under the words */
.does { gap: clamp(11px, 1.4vw, 17px); }
.does li {
  --k: clamp(0, calc((var(--dp, 0) - 0.16 - var(--i) * 0.15) * 5), 1);
  position: relative; padding-left: 22px;
  font-size: clamp(1.1875rem, 1.1vw + 0.9rem, 1.4375rem); font-weight: 600; letter-spacing: -0.018em;
  color: rgba(255, 255, 255, calc(0.52 + 0.48 * var(--k)));
}
.does li::before {
  content: ''; position: absolute; left: 0; top: 0.6em; width: 11px; height: 2px;
  border-radius: 2px; background: var(--blue-300);
  transform: scaleX(var(--k)); transform-origin: left;
}
.does li span { position: relative; display: inline-block; }
.does li span::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px;
  border-radius: 2px; background: var(--blue);
  transform: scaleX(var(--k)); transform-origin: left;
  opacity: calc(var(--k) * 0.62);
}
.diff__who {
  margin: clamp(20px, 2.6vw, 30px) 0 0;
  font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em;
  color: rgba(255, 255, 255, calc(0.28 + 0.31 * var(--old)));
  transition: color 420ms var(--ease);
}
/* the one line the section ends on, and the largest thing in it */
.diff__final {
  margin: clamp(28px, 3vw, 36px) 0 0;
  font-size: clamp(1.875rem, 3.7vw, 3.25rem); font-weight: 700; letter-spacing: -0.038em;
  line-height: 1.02;
  color: rgba(255, 255, 255, calc(0.52 + 0.48 * var(--dp, 0)));
}

/* ============================================ 9 · FRÜHZUGANG */
.close {
  position: relative; background: var(--night); color: #fff;
  min-height: min(84svh, 760px);
  display: flex; align-items: center;
  padding-block: clamp(80px, 10vw, 130px);
  overflow: hidden;
}
.close__media { position: absolute; inset: 0; z-index: 0; }
.close__media img { width: 100%; height: 100%; object-fit: cover; object-position: 54% 52%; }
.close__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(7,11,19,.80) 0%, rgba(7,11,19,.56) 36%, rgba(7,11,19,.14) 68%, rgba(7,11,19,.28) 100%),
    linear-gradient(180deg, rgba(7,11,19,.52) 0%, rgba(7,11,19,0) 32%, rgba(7,11,19,.10) 58%, rgba(7,11,19,.46) 100%);
}
.close__inner { position: relative; z-index: 2; }
.close .lead { max-width: 48ch; }
.close__cta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin: clamp(30px, 3.4vw, 44px) 0 0; }
.close__note { font-size: 0.875rem; color: rgba(255, 255, 255, 0.62); }
.close__ns { margin-top: 20px; }
.close__ns a { color: var(--blue-300); }
/* the product status: small, honest, and never a section of its own */
.close__status {
  margin: clamp(18px, 2.2vw, 26px) 0 0;
  font-size: 0.8125rem; color: rgba(255, 255, 255, 0.52);
}

/* ============================================ FOOTER */
.foot { background: var(--night); color: #fff; padding-block: 34px 44px; }
.foot__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-top: 30px; border-top: 1px solid var(--n-line);
}
.foot .mast__word { font-size: 1.1875rem; }
.foot .mast__mark { width: 19px; height: 22px; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 10px clamp(16px, 2vw, 28px); }
.foot__nav a { font-size: 0.875rem; color: rgba(255, 255, 255, 0.56); text-decoration: none; padding-block: 9px; margin-block: -9px; }
.foot__nav a:hover { color: #fff; }
.foot__say {
  margin: 26px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--n-line);
  font-size: 0.75rem; line-height: 1.65; color: rgba(255, 255, 255, 0.50);
}
.foot__say a { color: rgba(255, 255, 255, 0.60); text-underline-offset: 3px; padding-block: 14px; }
.foot__say a:hover { color: #fff; }

/* ============================================ EARLY ACCESS DIALOG */
.ea {
  width: min(100% - 32px, 520px);
  max-height: min(92svh, 760px);
  padding: 0; border: 0;
  background: transparent;
  color: #fff;
  overflow: visible;
}
.ea::backdrop {
  background: rgba(4, 7, 13, 0.76);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ea__panel {
  position: relative;
  background: var(--night-2);
  border-radius: 18px;
  padding: clamp(26px, 4vw, 38px);
  max-height: min(92svh, 760px);
  overflow-y: auto;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.ea__x {
  position: absolute; right: 14px; top: 14px; z-index: 2;
  width: 36px; height: 36px; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 8px; cursor: pointer;
  color: var(--on-3);
  transition: color 180ms var(--ease), background-color 180ms var(--ease);
}
.ea__x:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.ea__x svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

.ea__h {
  margin: 0;
  font-size: clamp(1.625rem, 3vw, 2rem); font-weight: 700;
  letter-spacing: -0.035em; line-height: 1.05;
}
.ea__lead { margin: 12px 0 0; font-size: 0.9375rem; line-height: 1.55; color: var(--on-2); }
.ea form { margin-top: clamp(22px, 3vw, 28px); display: grid; gap: 16px; }

.f { display: grid; gap: 6px; min-width: 0; }
.f__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.f__l {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--on-2);
}
.f__req { color: var(--blue-300); margin-left: 3px; }
.f__opt { font-weight: 500; letter-spacing: 0.08em; color: var(--on-3); text-transform: none; }
.f__i {
  width: 100%; min-width: 0;
  height: 52px; padding: 0 15px;
  background: #141e31; color: #fff;
  border: 1px solid #2a3852; border-radius: 10px;
  font: inherit; font-size: 0.9375rem;
  transition: border-color 180ms var(--ease), background-color 180ms var(--ease);
}
.f__i::placeholder { color: #6e7d97; }
.f__i:hover { border-color: #3a4c6d; }
.f__i:focus { outline: none; border-color: var(--blue-300); background: #16223a; box-shadow: 0 0 0 3px rgba(27, 79, 224, 0.28); }
/* pointer focus gets the glow; keyboard focus gets an unmistakable ring too */
.f__i:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 2px; }
.f__i--sel {
  appearance: none; cursor: pointer;
  padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, #8fb2ff 50%), linear-gradient(135deg, #8fb2ff 50%, transparent 50%);
  background-position: calc(100% - 19px) 24px, calc(100% - 14px) 24px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.f__i[aria-invalid='true'] { border-color: var(--signal); }
.f__h { margin: 0; font-size: 0.75rem; line-height: 1.4; color: var(--on-3); }
.f__e { margin: 0; font-size: 0.75rem; line-height: 1.4; color: var(--signal); }
.f__err {
  margin: 0; padding: 11px 14px; border-radius: 9px;
  background: rgba(242, 171, 144, 0.10);
  box-shadow: inset 0 0 0 1px rgba(242, 171, 144, 0.3);
  font-size: 0.8125rem; line-height: 1.45; color: var(--signal);
}

.f--check { margin-top: 2px; }
.f__c { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start; cursor: pointer; }
.f__c input {
  appearance: none; -webkit-appearance: none;
  width: 19px; height: 19px; margin: 1px 0 0; flex: none;
  background: #141e31; border: 1px solid #2a3852; border-radius: 5px;
  cursor: pointer;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease);
}
.f__c input:hover { border-color: #3a4c6d; }
.f__c input:checked { background: var(--blue); border-color: var(--blue); }
.f__c input:checked::after {
  content: ''; position: absolute;
  width: 10px; height: 5px; margin: 5px 0 0 4px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}
.f__c input { position: relative; }
.f__c input[aria-invalid='true'] { border-color: var(--signal); }
.f__c span { font-size: 0.8125rem; line-height: 1.5; color: var(--on-2); }
.f__c a { color: var(--blue-300); text-underline-offset: 3px; }

.f__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ea__submit { width: 100%; margin-top: 4px; }
.ea__fine { margin: 0; font-size: 0.75rem; letter-spacing: 0.02em; color: var(--on-3); text-align: center; }

.ea__done { text-align: center; padding-block: clamp(18px, 3vw, 30px); }
.ea__mark { width: 30px; height: 35px; fill: var(--blue-300); margin: 0 auto clamp(20px, 3vw, 28px); }
.ea__done .ea__h { outline: none; }
.ea__done .ea__lead { max-width: 34ch; margin-inline: auto; }
.ea__back { margin-top: clamp(24px, 3.4vw, 32px); }

/* ============================================ REVEAL */
[data-rise] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity 760ms var(--ease), transform 760ms var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-rise='in'] { opacity: 1; transform: none; }

/* ============================================ RESPONSIVE */
@media (max-width: 1100px) {
  .product, .proof__inner { --dev-w: 300px; }
  .phone { --bez: 8px; }
  .phone__body { border-radius: 42px; }
  .phone__screen { border-radius: 35px; }
  .ctx { max-width: 24ch; }
}

@media (max-width: 1023px) {
  .hero__copy { max-width: min(66%, 640px); }
  .hmi { left: 68%; max-width: 280px; }
  .hmi__v { font-size: 1.3125rem; }
  .diff__head { grid-template-columns: 1fr; gap: 20px; }
  .diff__head .display { max-width: 22ch; }
}

@media (max-width: 899px) {
  .product__inner { grid-template-columns: 1fr; gap: clamp(40px, 6vw, 64px); justify-items: start; }
  .product__device { justify-content: center; width: 100%; }
  .product__copy { order: -1; }
  .phone { --ry: 0deg !important; --rx: 0deg !important; }

  /* the proof stacks: the conclusion first, the same device whole under it */
  .proof__inner { grid-template-columns: 1fr; gap: clamp(34px, 6vw, 52px); }
  .proof__copy { padding-bottom: 0; }
  .proof__device {
    width: 100%; padding-bottom: clamp(64px, 9vw, 96px);
    display: flex; justify-content: center; align-items: flex-start;
  }

  /* Below this width the device is centred and takes the middle of the
     section, so a word this size can only ever show its first and last letter
     and reads as an accident. Background typography that cannot be read as
     AMPENA does not belong on the page, so here there is none. */
  .ghost { display: none; }

  /* the blue section stacks: the route, the argument, the result under it.
     With one column the event has no column edge to stand on, so it takes
     its place on the route itself and the hairline down to the decision is
     not drawn — a line that long would be a diagram, not an instrument. */
  .resolve__inner { grid-template-columns: minmax(0, 1fr); --rgap: clamp(30px, 4vw, 44px); }
  .rroute { display: block; position: relative; }
  .rroute__rail { display: block; width: 100%; }
  .rroute__run { position: absolute; left: 0; top: 0; width: 61%; }
  .rroute__stop { position: absolute; left: 61%; top: 0; margin-left: -5.5px; }
  .rroute__drop { display: none; }
  .funnel { position: absolute; left: 0; right: 0; top: 1px; height: 0; }
  .funnel i { right: auto; left: 0; width: calc(var(--w) * 0.61); transform-origin: 0% 50%; }
  @keyframes trace {
    0%   { transform-origin: 0% 50%;   transform: scaleX(0); opacity: 0; }
    24%  { transform-origin: 0% 50%;   transform: scaleX(1); opacity: 1; }
    25%  { transform-origin: 100% 50%; transform: scaleX(1); opacity: 1; }
    54%  { transform-origin: 100% 50%; transform: scaleX(1); opacity: 1; }
    100% { transform-origin: 100% 50%; transform: scaleX(0); opacity: 0; }
  }

  /* the convergence keeps its four corners, compressed around the mark: two
     contexts above, the mark between them, two below. Never a checklist. */
  .converge__track { height: 280vh; }
  .converge__stage { min-height: 580px; }
  .cv { min-height: 0; }
  .cv__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: clamp(14px, 2.4vh, 26px) clamp(14px, 4vw, 30px);
  }
  .ctx { max-width: none; }
  .ctx[data-c='0'] { grid-area: 1 / 1; align-self: start; justify-self: start; }
  .ctx[data-c='1'] { grid-area: 1 / 2; align-self: start; justify-self: end; text-align: right; }
  .ctx[data-c='2'] { grid-area: 3 / 1; align-self: end;   justify-self: start; }
  .ctx[data-c='3'] { grid-area: 3 / 2; align-self: end;   justify-self: end; text-align: right; }
  .ctx__rule { width: 34px; margin-bottom: 10px; }
  .ctx__t { font-size: 1.0625rem; }
  .ctx__d { margin-top: 6px; font-size: 0.75rem; line-height: 1.45; }
  .cv__core { grid-area: 2 / 1 / 3 / 3; align-self: center; justify-self: center; }

  /* the direction section stacks: the claim, the moment it describes, the
     standing note, the way there. The product moment moves up with it so a
     reader meets the offer before the small print. */
  .amb__inner { grid-template-columns: minmax(0, 1fr); row-gap: clamp(30px, 4.4vw, 44px); }
  .amb__head, .amb__lead, .amb__stage, .amb__side, .amb__base { grid-column: 1; grid-row: auto; }
  .amb__stage { justify-self: center; width: 100%; max-width: 460px; }
  .amb__side { align-self: start; }
  .amb__base { margin-top: clamp(6px, 1.4vw, 14px); }

  /* the learning rail turns: four thin columns under 200 px would be four
     paragraphs pretending to be columns, so the one line stands up and runs
     down the side instead. It is the same line, the same nodes, the same
     single draw, and it keeps a reading measure rather than the full width. */
  .lrail {
    grid-template-columns: minmax(0, 1fr); column-gap: 0;
    padding: 0 0 0 26px; max-width: 560px;
  }
  .lrail::before, .lrail::after {
    left: 8px; right: auto; top: 0; bottom: 0; width: 1px; height: auto;
  }
  .lrail::before {
    background: linear-gradient(180deg, var(--n-line) 0 78%, rgba(255, 255, 255, 0) 100%);
  }
  .lrail::after {
    left: 7px; top: 0; width: 3px; height: auto;
    background: linear-gradient(180deg, var(--blue-300) 0 78%, rgba(143, 178, 255, 0) 100%);
    transform: scaleY(0); transform-origin: top;
  }
  .lrail.is-drawn::after { transform: scaleY(1); }
  .lst { padding-bottom: clamp(20px, 3.2vw, 28px); }
  .lst:last-child { padding-bottom: 0; }
  .lst::before { left: -22px; top: 2px; }
  .lst__t { max-width: 46ch; }
}

@media (max-width: 767px) {
  .hero { min-height: 100svh; }
  .hero__copy { max-width: 100%; padding-block: calc(var(--mast-h) + 28px) 40px; }
  .hero__video { object-position: 52% 50%; transform: scale(1.3) translateY(-11%); transform-origin: 50% 50%; }
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(7,11,19,.78) 0%, rgba(7,11,19,.24) 18%, rgba(7,11,19,.30) 34%, rgba(7,11,19,.90) 62%, rgba(7,11,19,.97) 100%);
  }
  .hero__sim { right: var(--gut); bottom: 14px; font-size: 0.6875rem; }

  /* phone: the HMI stands in the flow, directly under the lead, as the proof
     of the sentence above it; slightly more compact, still an instrument */
  .hmi {
    position: static; transform: none; max-width: none;
    margin: clamp(22px, 5.5vw, 30px) 0 0;
  }
  .hmi__plate { padding: 11px 16px 12px 16px; }
  .hmi__vals { gap: 14px; margin-top: 5px; }
  .hmi__v { font-size: 1.25rem; }
  .hmi__why { margin-top: 10px; padding-top: 9px; }
  .hmi__route { margin-top: 11px; }
  .hmi__ends { margin-top: 6px; }

  /* header CTA as a secondary control, the hero button stays the primary one */
  .mast .btn--sm { padding: 9px 13px; min-height: 40px; }

  .trip { margin-top: clamp(22px, 5.5vw, 28px); gap: 7px; }
  .trip__run { font-size: 0.9375rem; }
  .trip__run i { margin-inline: 8px; }
  .trip__out { font-size: clamp(1.25rem, 6.2vw, 1.5rem); }
  .hero__cta { gap: 12px 18px; margin-top: clamp(22px, 5.5vw, 30px); }
  /* content-width CTAs on a phone: a deliberate button, not a submit bar */
  .hero__cta .btn { flex: 0 0 auto; white-space: nowrap; padding-block: 13px; }

  /* mental load on a phone: nine of the thirteen thoughts in a field built
     for this width — twelve columns, nine uneven bands, the same four sizes
     one step down, the same irregular walk. Never a vertical list, and the
     four longest thoughts are the ones that stand down. */
  .load__track { height: 340vh; }
  .load__stage { min-height: 560px; }
  .load__field {
    --q-xl: clamp(1.75rem, 8.6vw, 2.375rem);
    --q-lg: clamp(1.5rem, 6.7vw, 1.9375rem);
    --q-md: clamp(1.1875rem, 5.3vw, 1.4375rem);
    --q-sm: clamp(1.0625rem, 4.6vw, 1.25rem);
    min-height: 240px;
    margin-top: clamp(18px, 3.6vh, 40px);
  }
  .load__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    /* tall band, short band, tall band: the walk down a phone is as uneven
       as the walk across a desktop, so two thoughts sit close and the next
       one stands alone */
    grid-template-rows:
      minmax(0, 0.55fr) minmax(0, 1.28fr) minmax(0, 0.8fr) minmax(0, 1.18fr)
      minmax(0, 0.74fr) minmax(0, 1.3fr) minmax(0, 0.82fr) minmax(0, 1.22fr)
      minmax(0, 0.78fr) minmax(0, 1.18fr);
  }
  .q--bleed { margin-inline-start: calc(var(--gut) * -0.4); }
  .q[data-i="3"], .q[data-i="5"], .q[data-i="7"], .q[data-i="10"] { display: none; }
  .q[data-i="0"]  { grid-column: 1 / span 7;  grid-row: 2;  align-self: center; --dy: 0.15em; }
  .q[data-i="1"]  { grid-column: 2 / span 11; grid-row: 3;  align-self: start;  --dy: 0em; }
  .q[data-i="2"]  { grid-column: 4 / span 9;  grid-row: 4;  align-self: center; --dy: -0.2em; }
  .q[data-i="4"]  { grid-column: 6 / span 7;  grid-row: 5;  align-self: center; --dy: 0.25em; }
  .q[data-i="6"]  { grid-column: 1 / span 9;  grid-row: 6;  align-self: center; --dy: -0.15em; justify-self: start; transform-origin: 0% 50%; }
  .q[data-i="9"]  { grid-column: 1 / span 12; grid-row: 7;  align-self: start;  --dy: 0.2em; }
  .q[data-i="8"]  { grid-column: 4 / span 8;  grid-row: 8;  align-self: center; --dy: -0.1em; }
  .q[data-i="12"] { grid-column: 3 / span 10; grid-row: 9;  align-self: center; --dy: 0.25em; }
  .q[data-i="11"] { grid-column: 2 / span 9;  grid-row: 10; align-self: center; --dy: -0.15em; }

  .product__line { font-size: clamp(1.1875rem, 5.4vw, 1.375rem); max-width: none; }

  .rate__pair { --pair-gap: 16px; }
  .rate__delta span { max-width: none; }
  .rate__note { max-width: none; }

  .converge__after .btn { flex: 0 0 auto; white-space: nowrap; }

  .diff__cols { grid-template-columns: 1fr; gap: 34px; }
  .close { min-height: 92svh; }
  .close__cta .btn { flex: 0 0 auto; white-space: nowrap; }
  .foot__inner { flex-direction: column; align-items: flex-start; gap: 22px; }
  .foot__say { font-size: 0.6875rem; }

  .f__row { grid-template-columns: 1fr; gap: 14px; }
  .ea__panel { padding: 24px 22px 22px; }
  .ea form { margin-top: 20px; gap: 13px; }
  .ea__lead { font-size: 0.875rem; }
  .f__i { height: 48px; }
  .f__h { font-size: 0.6875rem; }
}

@media (max-width: 479px) {
  .product, .proof__inner { --dev-w: min(280px, 78vw); }
  .phone { --bez: 7px; }
  .phone__body { border-radius: 38px; }
  .phone__screen { border-radius: 32px; }
  .app { padding: 38px 16px 16px; }
  .app--b { padding: 38px 16px 15px; }
  .app__dist { font-size: 1.625rem; }
  .appb__dist { font-size: 1.75rem; }
  .appb__priceV { font-size: 1.25rem; }
  .app__v { font-size: 1rem; }
  .rate__k { letter-spacing: 0.1em; }
  .rate__s { font-size: 0.8125rem; }
  .cv__grid { column-gap: 12px; }
  .ctx__t { font-size: 1rem; }
}

/* laptop heights: the head keeps its space, the field keeps the answer */
@media (min-width: 768px) and (max-height: 860px) {
  .load__field { margin-top: clamp(18px, 4vh, 44px); }
}

/* ============================================ REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 180ms !important;
  }
  .hmi__fill { transform: scaleX(1); }
  .hmi__stop { opacity: 1; transform: none; }

  /* the sticky stage collapses; every thought stays readable at its own size
     and the answer stands under them, which is the meaningful end state */
  .load__track { height: auto; }
  .load__stage { position: static; height: auto; min-height: 0; overflow: visible; }
  .load__inner { padding-block: 90px 80px; }
  .load__field { min-height: 0; }
  .load__grid {
    height: auto; grid-template-columns: 1fr; grid-template-rows: none;
    row-gap: clamp(14px, 2.2vw, 22px);
  }
  .q {
    display: block !important;
    grid-column: 1 !important; grid-row: auto !important;
    align-self: start !important; justify-self: start !important;
    text-align: left !important;
    margin-inline-start: 0 !important; max-width: 100% !important;
    opacity: 1 !important; transform: none !important;
  }
  .q__t { color: var(--q-live) !important; }
  .q__m { display: none; }
  /* relative, not static: the blue bar is drawn on the answer and would
     otherwise anchor to the field and run its whole height */
  .load__done {
    position: relative; left: auto; right: auto; top: auto;
    margin-top: 44px;
    opacity: 1 !important; transform: none !important;
  }
  .load__done::before { transform: none !important; }

  .rate__one, .rate__delta { opacity: 1 !important; transform: none !important; }
  .proof__device { opacity: 1 !important; transform: none !important; }

  /* the traces are a transient, and the end state is the calm one: without
     motion there is nothing for them to say, so they are not drawn */
  .funnel { display: none; }
  .rroute__run { transform: none !important; }
  .rroute__stop { opacity: 1 !important; transform: none !important; }
  .rroute__drop { transform: none !important; }
  .verdict { opacity: 1 !important; transform: none !important; }
  .verdict__list svg { opacity: 1 !important; }

  /* the convergence collapses to its end state: the four contexts, the
     approved mark whole, and the Ladestopp under it */
  .converge__track { height: auto; }
  .converge__stage { position: static; height: auto; min-height: 0; overflow: visible; }
  .converge__inner { padding-block: 90px 0; }
  .cv { --ans: 1 !important; --solid: 1 !important; min-height: 0; }
  .cv__flow { display: none; }
  .cv__grid { height: auto; grid-template-rows: auto auto; row-gap: clamp(26px, 4vw, 44px); }
  .ctx { opacity: 1 !important; }
  .ctx__d { opacity: 1 !important; }
  .ctx__rule::after { transform: scaleX(1) !important; }
  .cv__out { transform: none !important; opacity: 1 !important; }

  [data-rise] { opacity: 1; transform: none; }
  .phone { transform: none; }
  .app__track b { transform: scaleX(1); }
  .app__card > *, .app__stop { opacity: 1 !important; transform: none !important; }
  .app__card { background: var(--night) !important; }
  .app__action { opacity: 1 !important; filter: none !important; }
  .app__v { transition: none; }
  .ctxbar__rail i::after { transform: scaleX(1) !important; }

  /* the ambient sequence collapses to what it is for: the car, the context
     it stands in, and the one offer that follows from both */
  .agent__dot { animation: none; }
  .agent .agent__v[data-s="0"] { opacity: 0 !important; }
  .agent .agent__v[data-s="1"] { opacity: 1 !important; transform: none !important; }
  .agent__ctx, .opp, .opp__facts li, .opp__sum, .opp__do, .agent__foot {
    opacity: 1 !important; transform: none !important;
  }
  .soc__fill, .soc__ghost { transform: scaleX(1) !important; }
  .opp__go:active { transform: none !important; }

  /* the rail stands complete: the line whole, every node lit */
  .lrail::after { transform: none !important; }
  .lst::before {
    transform: none !important; transition: none !important;
    background: var(--blue-300); box-shadow: 0 0 0 3.5px rgba(143, 178, 255, 0.15);
  }
}

/* no JavaScript: nothing is hidden behind a scroll driver */
.no-js .load__track { height: auto; }
.no-js .load__stage { position: static; height: auto; min-height: 0; overflow: visible; }
.no-js .load__inner { padding-block: 90px 80px; }
.no-js .load__field { min-height: 0; }
.no-js .load__grid { height: auto; grid-template-columns: 1fr; grid-template-rows: none; row-gap: clamp(14px, 2.2vw, 22px); }
.no-js .q {
  display: block !important;
  grid-column: 1 !important; grid-row: auto !important;
  align-self: start !important; justify-self: start !important;
  text-align: left !important;
  margin-inline-start: 0 !important; max-width: 100% !important;
  opacity: 1; transform: none;
}
.no-js .q__t { color: var(--q-live); }
.no-js .q__m { display: none; }
.no-js .load__done { position: relative; left: auto; right: auto; top: auto; margin-top: 44px; opacity: 1; transform: none; }
.no-js .load__done::before { transform: none; }
.no-js .rate__one, .no-js .rate__delta { opacity: 1; transform: none; }
.no-js .proof__device { opacity: 1; transform: none; }
.no-js .funnel { display: none; }
.no-js .rroute__run { transform: none; }
.no-js .rroute__stop { opacity: 1; transform: none; }
.no-js .rroute__drop { transform: none; }
.no-js .verdict { opacity: 1; transform: none; }
.no-js .verdict__list svg { opacity: 1; }
.no-js .diff { --dp: 1; --old: 0.58; --new: 1; }
.no-js .converge__track { height: auto; }
.no-js .converge__stage { position: static; height: auto; min-height: 0; overflow: visible; }
.no-js .converge__inner { padding-block: 90px 0; }
.no-js .cv { --ans: 1; --solid: 1; min-height: 0; }
.no-js .cv__flow { display: none; }
.no-js .cv__grid { height: auto; grid-template-rows: auto auto; row-gap: clamp(26px, 4vw, 44px); }
.no-js .ctx__rule::after { transform: scaleX(1); }
.no-js [data-rise] { opacity: 1; transform: none; }
.no-js .app__track b { transform: scaleX(1); }
.no-js .app__card > *, .no-js .app__stop { opacity: 1; transform: none; }
.no-js .app__card { background: var(--night); }
.no-js .app__action { opacity: 1; filter: none; }
.no-js .ctxbar__rail i::after { transform: scaleX(1); }
/* the device markup starts in state 0, so without JavaScript every state of
   every swap would stack on top of the next one. Only the last one stands. */
.no-js .phone .ctxbar__v[data-s="0"] { opacity: 0; }
.no-js .phone .ctxbar__v[data-s="1"] { opacity: 1; transform: none; }
.no-js .phone .app__v[data-s="0"],
.no-js .phone .app__v[data-s="1"] { opacity: 0; }
.no-js .phone .app__v[data-s="2"] { opacity: 1; transform: none; }
.no-js .why__panel { grid-template-rows: 1fr; }
.no-js .why__list { padding-top: 10px; }
.no-js .why { display: none; }
.no-js .ea { display: none; }
.no-js .agent__dot { animation: none; }
.no-js .agent .agent__v[data-s="0"] { opacity: 0; }
.no-js .agent .agent__v[data-s="1"] { opacity: 1; transform: none; }
.no-js .agent__ctx, .no-js .opp,
.no-js .opp__facts li, .no-js .opp__sum, .no-js .opp__do,
.no-js .agent__foot { opacity: 1; transform: none; }
.no-js .soc__fill, .no-js .soc__ghost { transform: scaleX(1); }
.no-js .lrail::after { transform: none; }
.no-js .lst::before {
  transform: none; background: var(--blue-300);
  box-shadow: 0 0 0 3.5px rgba(143, 178, 255, 0.15);
}