/* ============================================================
   iONE EnergieZentrale — page styles, gtlab.org language.

   Structure only. Colour, type, radius, shadow and motion all come
   from tokens; tokens/theme-gtlab.css maps them onto the gtlab.org
   system (Helvetica Neue, monochrome zinc, cyan for interaction).

   Rule applied throughout: cyan appears on hover, active, focus and
   live states only. Everything decorative is zinc.
   ============================================================ */

body {
  background: var(--white);
}

/* Sections respond to their own width, not the viewport: the reading column is
   narrow both on a phone and next to the desktop configurator rail. */
.ez-page > section {
  container-type: inline-size;
}

/* ---------- utilities ------------------------------------------------ */
.ez-skip {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--white);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  font-weight: var(--fw-medium);
  transition: top var(--dur-fast) var(--ease-standard);
}
.ez-skip:focus {
  top: var(--space-4);
  box-shadow: var(--shadow-md), 0 0 0 2px var(--ink-900);
}

.ez-footnote {
  font: var(--text-body-sm);
  color: var(--text-subtle);
  max-width: 62ch;
}

.ez-note {
  margin-top: var(--space-6);
  padding-left: var(--space-4);
  border-left: 2px solid var(--ink-900);
  font: var(--text-body-lg);
  color: var(--ink-800);
  max-width: 56ch;
}

.ez-promise {
  font: var(--text-body-sm);
  color: var(--text-muted);
  margin-top: var(--space-4);
  max-width: 46ch;
}

/* Section heads: grey caps label, poster title.
   The kit caps the whole head at 640 px, which puts every title on two lines.
   The title gets room to hold one line; the paragraph keeps the 640 px
   measure, because a 900 px line of body copy is hard to read. */
.mk-section__head {
  max-width: 920px;
}
.mk-section__head h2 {
  letter-spacing: var(--tracking-display);
}
/* The paragraph is not held to a narrower measure than the title: forcing an
   extra line break where the column has room reads as a mistake. */
.ez-configurator .mk-section__head {
  /* The full column, and a container so the lead can be sized against it. */
  max-width: none;
  container-type: inline-size;
}
.ez-configurator .mk-section__head h2 {
  text-transform: uppercase;
}
/* One line. The size is a fraction of the column, so it keeps holding one line
   at every window width rather than fitting at one and breaking at the next. */
@container (min-width: 950px) {
  .ez-configurator .mk-section__head p {
    /* One line. The size is measured at run time by ez/fit.js against the
       column — a value tuned by hand to one string overflowed as soon as the
       page was translated. */
    white-space: nowrap;
  }
}

/* ---------- 1. header ------------------------------------------------- */
.ez-header {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  transition: background var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard);
}
.ez-header.is-solid {
  background: color-mix(in srgb, var(--white) 88%, transparent);
  backdrop-filter: saturate(120%) blur(14px);
  border-bottom-color: var(--border-subtle);
}

.ez-logo {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  line-height: 1;
  color: var(--ink-900);
}
.ez-logo__mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
}
.ez-logo__mark .i {
  color: inherit;
}
.ez-logo__product {
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.ez-nav {
  margin-left: var(--space-7);
  gap: var(--space-6);
}
.ez-nav a {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.ez-nav a:hover {
  color: var(--ink-900);
}

/* Two letters, quiet until needed — the language is not the point of the page. */
.ez-lang {
  display: inline-flex;
  gap: var(--space-2);
  margin-right: var(--space-4);
}
.ez-lang a {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  /* ink-400 on white is 3.4:1 — under AA for text this size. */
  color: var(--ink-500);
  padding: 2px 0;
}
.ez-lang a:hover {
  color: var(--ink-900);
}
.ez-lang a.is-current {
  color: var(--ink-900);
  border-bottom: 1.5px solid var(--ink-900);
}

.ez-burger {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--white);
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.ez-burger span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--ink-800);
}

.ez-mobilenav {
  display: none;
  border-top: 1px solid var(--border-subtle);
  background: var(--white);
  padding-block: var(--space-4);
}
.ez-mobilenav.is-open {
  display: block;
}
.ez-mobilenav .mk-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.ez-mobilenav a {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-700);
}

/* ---------- 2. hero --------------------------------------------------- */
.ez-hero {
  position: relative;
  overflow: hidden;
  background: var(--white);
  /* The poster line is the top of the page; it should sit just under the
     header, not float in the middle of an empty band. */
  padding-block: clamp(2rem, 3.5vw, 3rem) clamp(3.5rem, 8vw, 6rem);
}
.ez-hero__inner {
  position: relative;
  display: grid;
  /* One column: the statement on top, the schematic across the full width
     underneath, where it has room to be read rather than squinted at. */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 3.5rem);
}
/* In the hero the kicker is not an eyebrow but the poster line above the
   statement: heavy uppercase against the light display type under it. */
.ez-hero .mk-kicker {
  /* The upper bound only; ez/fit.js brings it down where a longer translation
     would run past the column. */
  white-space: nowrap;
  font-size: clamp(2.75rem, 5.8vw, 5rem);
  /* Heavier than bold. Helvetica Neue Black exists on macOS and iOS; where the
     family stops at bold the stroke supplies the extra weight, so the line
     lands at the same density everywhere. */
  font-weight: 900;
  /* 900 is the heaviest weight CSS has, so further thickening is the stroke's
     job. It is centred on the outline, which also eats into the counters —
     hence the size floor on this line. */
  -webkit-text-stroke: 0.05em currentColor;
  letter-spacing: 0.00975em;
  color: var(--ink-900);
  line-height: 1.1;
}

.ez-hero__title {
  /* Capitals are a styling decision, so they live here: the copy stays in
     ordinary sentence case and a translation can drop this one rule. */
  text-transform: uppercase;
  font: var(--text-display-2xl);
  /* Held one step under the poster line above it. All three stops are the
     original values less 10 %, so the line shrinks the same amount at every
     window width instead of only at one of them. */
  font-size: clamp(1.9125rem, 3.06vw, 3.15rem);
  letter-spacing: var(--tracking-display);
  color: var(--text-strong);
  margin: var(--space-5) 0 var(--space-5);
}
.ez-hero__title span {
  /* The written line breaks are a suggestion; on a wide hero the statement
     reads as one line. */
  display: inline;
}
.ez-hero__lead {
  text-transform: uppercase;
  font: var(--text-lead);
  /* Capitals read heavier than lower case at the same size and tracking, so
     the line is opened up and set one step back in weight of colour. */
  letter-spacing: 0.04em;
  color: var(--ink-500);
}
/* The column is the yardstick, so the line can be sized against it. */
.ez-hero__col {
  container-type: inline-size;
}
/* One line, never wider than the heading above it. The size is a fraction of
   the column rather than a fixed value, so the line keeps filling the same
   share of it at every window width instead of fitting at one and breaking at
   the next. 1.52 cqi is the measured fit (the string needs 1286 px at 20 px in
   a 1258 px column) with a little under 3 % held back. Below a 900 px column
   the size it would ask for is too small to read, so the line wraps instead. */
@container (min-width: 950px) {
  .ez-hero__lead {
    /* One line, never wider than the poster line above it. ez/fit.js measures
       both and sets the size; hand-tuning it to the English string is what
       broke on the German one. */
    white-space: nowrap;
  }
}
/* Narrower than that the line has to wrap, and the block is held to a share of
   the column so the wrapped lines stay inside the heading too. */
@container (max-width: 949px) {
  .ez-hero__lead {
    max-width: 78cqi;
  }
}

/* ---------- hero diagram ---------------------------------------------- */
.ez-hero__visual {
  /* No frame: the schematic sits on the page, not inside a card. The hairline
     ring and its padding are gone with it. */
  margin: 0;
  padding: 0;
}
.ez-dg {
  width: 100%;
  height: auto;
  /* The schematic is the one place on the page that carries colour: three
     flows have to be told apart at a glance. Set here rather than taken from
     the ramps — the gtlab theme retires the blue ramp to zinc, and the token
     set has no violet at all. */
  --ez-power: #2563eb;
  --ez-heat: #dc2626;
  --ez-signal: #7c3aed;
}
.ez-dg__node {
  fill: var(--white);
  stroke: var(--ink-200);
  stroke-width: 1;
}
.ez-dg__node--rooms {
  fill: var(--ink-75);
}
.ez-dg__roomline {
  stroke: var(--ink-200);
  stroke-width: 1;
}
.ez-dg__label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  fill: var(--ink-800);
  text-anchor: middle;
}
.ez-dg__sub {
  font-family: var(--font-display);
  font-size: 12px;
  fill: var(--ink-500);
  text-anchor: middle;
}
/* the iONE Core caption lists four functions — it needs the extra room */
.ez-dg__sub--sm {
  font-size: 10px;
}
.ez-dg__temp {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  fill: var(--ink-900);
  text-anchor: middle;
}
.ez-dg__brain {
  fill: var(--white);
  stroke: var(--ink-200);
  stroke-width: 1;
}
.ez-dg__live {
  fill: var(--ion-mint-500);
}
.ez-dg__brainlabel {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  fill: var(--ink-900);
}
.ez-dg__brainsub {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.06em;
  fill: var(--ink-500);
}
/* Data runs both ways — the cloud reads the house and the house is told what
   to do — so the dashes travel out and back rather than in one direction. */
.ez-dg__control path {
  fill: none;
  stroke: var(--ez-signal);
  stroke-width: 1.2;
  stroke-dasharray: 2 4;
  animation: ez-signal 2.8s linear infinite alternate;
}
.ez-dg__flow path {
  fill: none;
  stroke-width: 1.5;
  stroke-dasharray: 6 6;
  animation: ez-dash 2.4s linear infinite;
}
.ez-dg__flow--electric path {
  stroke: var(--ez-power);
}
.ez-dg__flow--thermal path {
  stroke: var(--ez-heat);
}
@keyframes ez-dash {
  to {
    stroke-dashoffset: -24;
  }
}
@keyframes ez-signal {
  to {
    stroke-dashoffset: -18;
  }
}

.ez-hero__rooms {
  font: var(--text-body-sm);
  color: var(--ink-500);
  margin-top: var(--space-3);
}
.ez-hero__legend {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}
.ez-legend {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.ez-legend::before {
  content: '';
  width: 18px;
  height: 2px;
  background: var(--ink-300);
}
.ez-legend--electric::before {
  background: #2563eb;
}
.ez-legend--thermal::before {
  background: #dc2626;
}
.ez-legend--signal::before {
  background: repeating-linear-gradient(90deg, #7c3aed 0 3px, transparent 3px 6px);
}

/* ---------- 3. category ------------------------------------------------ */
/* With the section title removed, the sentence carries the section: set as a
   light statement in the gtlab manner rather than as muted body copy. */
.ez-category__head {
  max-width: 720px;
}
.ez-category__head p {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  line-height: 1.25;
  letter-spacing: var(--tracking-tight);
  color: var(--ink-800);
  margin-top: var(--space-4);
}

.ez-compare {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
.ez-compare__col {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--white);
  box-shadow: var(--ring-hairline), var(--shadow-sm);
}
.ez-compare__col--ione {
  background: var(--ink-75);
}
.ez-compare__label {
  font: var(--text-kicker);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: var(--space-5);
}
.ez-compare__col--ione .ez-compare__label {
  color: var(--ink-900);
}
.ez-compare ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.ez-compare li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-subtle);
  font: var(--text-body-lg);
  color: var(--ink-700);
}
.ez-compare__col--ione li {
  color: var(--ink-900);
  border-bottom-color: var(--ink-200);
}
.ez-compare li:last-child {
  border-bottom: none;
}
.ez-compare__icon {
  display: inline-flex;
  color: var(--ink-300);
}
.ez-compare__col--ione .ez-compare__icon {
  color: var(--ink-900);
}

/* ---------- 4. system: the photograph, then the layers ------------------- */
.ez-orbit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
/* One column, in the order the energy travels — a wrapping cloud of pills
   gave no reading order at all. */
.ez-layers {
  display: grid;
  gap: var(--space-2);
  align-content: start;
}
.ez-layer {
  display: flex;
  width: 100%;
  text-align: left;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--ink-75);
  cursor: pointer;
  border: none;
  font-family: var(--font-display);
  transition: background var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.ez-layer:hover {
  background: var(--ink-100);
}
.ez-layer.is-active {
  background: var(--ink-900);
  box-shadow: var(--glow-mint);
}
.ez-layer__icon {
  display: inline-flex;
  color: var(--ink-500);
  flex: 0 0 auto;
}
.ez-layer.is-active .ez-layer__icon {
  color: var(--ion-mint-400);
}
.ez-layer__name {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-800);
  line-height: 1.2;
}
.ez-layer.is-active .ez-layer__name {
  color: var(--white);
}
.ez-orbit__detail {
  border-left: 1px solid var(--border-default);
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
}
.ez-orbit__detail-kicker {
  font: var(--text-kicker);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--ink-500);
}
.ez-orbit__detail h3 {
  font: var(--text-h2);
  letter-spacing: var(--tracking-display);
  color: var(--ink-900);
  margin: var(--space-3) 0;
}
.ez-orbit__detail p {
  font: var(--text-body-lg);
  color: var(--ink-600);
}
/* The one-line claim carries the layer; the paragraph explains it. */
.ez-orbit__claim {
  font: var(--text-body-lg);
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: var(--space-3);
}
.ez-orbit__specs-label {
  display: block;
  margin-top: var(--space-5);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.ez-orbit__inputs {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.ez-orbit__inputs li {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-600);
  padding: 0.5em 0.85em;
  background: var(--ink-100);
  border-radius: var(--radius-pill);
}

/* ---------- 5. value grid ----------------------------------------------- */
/* ---------- 6. configurator --------------------------------------------- */
.ez-conf {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
.ez-conf__stage {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  min-height: 420px;
  display: flex;
  flex-direction: column;
}
.ez-conf__progress {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.ez-conf__step-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
  white-space: nowrap;
}
.ez-conf__bar {
  display: block;
  flex: 1;
  height: 2px;
  background: var(--ink-200);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.ez-conf__bar > span {
  display: block;
  height: 100%;
  background: var(--ink-900);
  transition: width var(--dur-slow) var(--ease-standard);
}
.ez-conf__question {
  border: none;
  margin: 0;
  padding: 0;
  flex: 1;
}
.ez-conf__question legend {
  font: var(--text-display-md);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: var(--tracking-display);
  color: var(--text-strong);
  padding: 0;
  margin-bottom: var(--space-3);
  max-width: 22ch;
}
.ez-conf__question legend:focus-visible {
  outline: none;
  box-shadow: var(--glow-blue);
  border-radius: var(--radius-xs);
}
.ez-conf__help {
  font: var(--text-body);
  color: var(--text-muted);
  margin-bottom: var(--space-5);
  /* 48ch broke a 74-character hint onto a second line while the card had room
     to spare. Still bounded, but at the top of the readable measure. */
  max-width: 76ch;
}
.ez-dimensions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.ez-conf__hint {
  font: var(--text-body-sm);
  color: var(--ink-600);
  margin-top: var(--space-4);
  padding-left: var(--space-4);
  border-left: 2px solid var(--ink-900);
  max-width: 52ch;
}
.ez-conf__hint strong {
  color: var(--ink-900);
}
.ez-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.ez-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--ink-75);
  transition: border-color var(--dur-fast) var(--ease-standard),
    background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.ez-option:hover {
  background: var(--ink-100);
}
.ez-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.ez-option__box {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-300);
  flex: 0 0 auto;
  transition: border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}
.ez-option__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-800);
}
.ez-option.is-checked {
  background: var(--ink-900);
}
.ez-option.is-checked .ez-option__label {
  color: var(--white);
  font-weight: 700;
}
.ez-option.is-checked .ez-option__box {
  border-color: var(--white);
  box-shadow: inset 0 0 0 3px var(--ink-900), inset 0 0 0 16px var(--white);
}
.ez-option:has(input:focus-visible) {
  box-shadow: 0 0 0 2px var(--ink-900);
}
.ez-option.is-checked:has(input:focus-visible) {
  box-shadow: inset 0 0 0 2px var(--white);
}
.ez-option__mark,
.ez-note-card__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--danger-500);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  flex: 0 0 auto;
}
.ez-option__mark {
  margin-left: auto;
}
.ez-option.is-checked .ez-option__mark {
  background: var(--white);
  color: var(--ink-900);
}
.ez-note-card {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-left: 2px solid var(--danger-500);
  background: var(--ink-75);
  border-radius: var(--radius-sm);
}
.ez-note-card strong {
  display: block;
  font: var(--text-h4);
  color: var(--ink-900);
  margin-bottom: var(--space-2);
}
.ez-note-card p {
  font: var(--text-body-sm);
  color: var(--ink-700);
}
.ez-note-card p + p {
  margin-top: var(--space-2);
}
.ez-conf__nav {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
.ez-answers {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}
.ez-answers__title {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: var(--space-3);
}
.ez-answers ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.ez-answers li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--ink-100);
}
.ez-answers li:last-child {
  border-bottom: none;
}
.ez-answers__label {
  font: var(--text-body-sm);
  color: var(--ink-500);
}
.ez-answers__value {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-900);
}
.ez-answers button {
  border: none;
  background: none;
  padding: 0;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-600);
  cursor: pointer;
}
.ez-answers button:hover {
  color: var(--ink-900);
}
.ez-answers button[disabled] {
  color: var(--ink-300);
  cursor: default;
}
.ez-conf__result h3 {
  font: var(--text-display-md);
  letter-spacing: var(--tracking-display);
  color: var(--text-strong);
}
.ez-conf__result h3:focus-visible {
  outline: none;
  box-shadow: var(--glow-blue);
  border-radius: var(--radius-xs);
}
.ez-conf__result-lead {
  font: var(--text-body-lg);
  color: var(--text-muted);
  margin-top: var(--space-3);
  max-width: 52ch;
}
.ez-conf__panel {
  position: sticky;
  top: 88px;
}
.ez-conf__panel-empty {
  font: var(--text-body);
  color: var(--text-subtle);
  padding-block: var(--space-6);
}
.ez-conf__panel-hint {
  font: var(--text-body-sm);
  color: var(--ink-500);
  margin-bottom: var(--space-3);
}

.ez-panel {
  background: var(--ink-75);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 2rem);
}
/* Across the full width the readout breaks into columns instead of one long
   ladder of rows. */
.ez-panel__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0 clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.ez-panel__cols--balance {
  align-items: center;
  margin-top: var(--space-5);
  gap: var(--space-5) clamp(1.5rem, 4vw, 3.5rem);
}
.ez-panel__cols--balance .ez-panel__total {
  margin-top: 0;
  height: 100%;
}
.ez-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--ink-200);
}
.ez-panel__tag {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-pill);
  padding: 0.35em 0.7em;
}
.ez-panel__heading {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: var(--space-5) 0 var(--space-3);
}
.ez-panel__list {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.ez-panel__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--ink-150);
}
.ez-panel__row:last-child {
  border-bottom: none;
}
.ez-panel__row dt {
  font: var(--text-body-sm);
  color: var(--text-muted);
}
.ez-panel__row dd {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-900);
  text-align: right;
}
.ez-panel__vat {
  font: var(--text-body-sm);
  color: var(--ink-500);
  margin-top: var(--space-4);
}
.ez-panel__src {
  display: block;
  margin-top: 2px;
  font-weight: 700;
  color: var(--ink-800);
}
.ez-panel__src.is-demo {
  color: var(--ink-500);
  font-weight: 400;
}
.ez-panel__aside {
  font: var(--text-body-sm);
  color: var(--ink-500);
  margin-top: var(--space-4);
}
.ez-panel__warn {
  font: var(--text-body-sm);
  color: var(--ink-900);
  border-left: 2px solid var(--ink-900);
  padding-left: var(--space-3);
  margin-top: var(--space-3);
}
.ez-panel__total {
  margin-top: var(--space-5);
  padding: var(--space-5);
  background: var(--ink-900);
  border-radius: var(--radius-md);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35em;
}
.ez-panel__total-label {
  flex: 1 0 100%;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: var(--space-3);
}
.ez-panel__total-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.25rem;
  letter-spacing: var(--tracking-display);
  color: var(--white);
}
.ez-panel__total-unit {
  font-size: 0.8125rem;
  color: var(--ink-400);
}
.ez-panel__compare {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.ez-panel__bar {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  align-items: center;
  gap: var(--space-3);
}
.ez-panel__bar-label {
  font: var(--text-body-sm);
  color: var(--text-muted);
}
.ez-panel__bar-track {
  height: 8px;
  background: var(--ink-200);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.ez-panel__bar-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width var(--dur-slow) var(--ease-standard);
}
.ez-panel__bar-fill--current {
  background: var(--ink-300);
}
.ez-panel__bar-fill--ione {
  background: var(--ink-900);
}
.ez-panel__bar-value {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-900);
}
.ez-panel__delta {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
}

.ez-assumptions {
  margin: var(--space-5) 0;
  border-top: 1px solid var(--ink-200);
  padding-top: var(--space-4);
}
.ez-assumptions summary {
  font: var(--text-body-sm);
  font-weight: 700;
  color: var(--ink-900);
  cursor: pointer;
}
.ez-assumptions dl {
  margin: var(--space-4) 0 var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ez-assumptions dl > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}
.ez-assumptions dt {
  font: var(--text-body-sm);
  color: var(--text-muted);
}
.ez-assumptions dd {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-800);
  text-align: right;
}
.ez-assumptions__sub {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-top: var(--space-4);
}
.ez-assumptions p {
  font: var(--text-body-sm);
  color: var(--text-subtle);
}

.ez-saveform {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}
.ez-saveform h3 {
  font: var(--text-h2);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin-bottom: var(--space-2);
}
.ez-saveform > p {
  font: var(--text-body);
  color: var(--text-muted);
  max-width: 48ch;
}
.ez-saveform__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin: var(--space-5) 0;
}
.ez-saveform__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ---------- 7. monthly economics ----------------------------------------- */
.ez-econ__switch {
  display: inline-flex;
  padding: 4px;
  background: var(--ink-100);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-6);
}
.ez-switchbtn {
  border: none;
  background: transparent;
  padding: 0.6em 1.3em;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-600);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}
.ez-switchbtn.is-active {
  background: var(--ink-900);
  color: var(--white);
}
.ez-econ__panel {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--radius-xl);
  background: var(--white);
  box-shadow: var(--ring-hairline), var(--shadow-sm);
}
.ez-econ__chart {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  height: 300px;
  padding-bottom: var(--space-2);
}
.ez-econ__column {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  width: 132px;
}
.ez-econ__caption {
  padding-top: var(--space-2);
  border-top: 2px solid transparent;
}
.ez-econ__column.is-active .ez-econ__caption {
  border-top-color: var(--ink-900);
  color: var(--ink-900);
}
.ez-econ__column.is-active .ez-econ__total {
  color: var(--ink-900);
}
.ez-econ__column:not(.is-active) .ez-econ__total {
  color: var(--ink-500);
}
.ez-econ__stack {
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: height var(--dur-slow) var(--ease-standard);
}
.ez-econ__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: var(--space-2);
  text-align: center;
}
.ez-econ__bar span {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.3;
}
.ez-econ__bar--current {
  background: var(--ink-200);
  color: var(--ink-600);
}
.ez-econ__bar--fin {
  background: var(--ink-900);
  color: var(--ink-300);
}
.ez-econ__bar--energy {
  background: var(--ink-500);
  color: var(--white);
}
.ez-econ__total {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: var(--tracking-display);
  color: var(--text-strong);
  margin-top: var(--space-3);
}
.ez-econ__caption {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.ez-ticklist {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.ez-ticklist li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font: var(--text-body-lg);
  color: var(--ink-800);
}
.ez-ticklist li span {
  display: inline-flex;
  color: var(--ink-900);
}
.ez-econ__headline {
  font: var(--text-h2);
  letter-spacing: var(--tracking-display);
  color: var(--text-strong);
  margin-bottom: var(--space-3);
}

/* ---------- 8. process --------------------------------------------------- */
.ez-process {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--ink-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--ring-hairline);
}
.ez-process__step {
  background: var(--white);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 136px;
}
.ez-process__num {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink-500);
}
.ez-process__label {
  font: var(--text-h4);
  color: var(--ink-900);
}

/* ---------- 9. installers ------------------------------------------------- */
.ez-installers {
  /* Sits under the delivery process now, not alone in its own section. */
  margin-top: clamp(2rem, 5vh, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.ez-installers__intro h3 {
  font: var(--text-display-md);
  letter-spacing: var(--tracking-display);
  margin: var(--space-3) 0 var(--space-4);
}
.ez-installers__intro p {
  font: var(--text-body-lg);
  color: var(--text-muted);
  margin-bottom: var(--space-6);
  max-width: 42ch;
}
.ez-installers__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--ink-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--ring-hairline);
}
.ez-installers__list li {
  background: var(--white);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font: var(--text-body-lg);
  color: var(--ink-800);
}
.ez-installers__list li span {
  display: inline-flex;
  color: var(--ink-500);
}

/* ---------- 10. technology ------------------------------------------------ */
.ez-tech {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.ez-tech__globe {
  margin: 0;
}
.ez-tech__globe svg {
  width: 100%;
  height: auto;
  max-width: 420px;
  margin-inline: auto;
}
.ez-globe__sphere {
  fill: var(--white);
  stroke: var(--ink-200);
}
.ez-globe__grid ellipse,
.ez-globe__grid line {
  fill: none;
  stroke: var(--ink-200);
  stroke-width: 1;
}
.ez-globe__node circle {
  fill: var(--ink-800);
  stroke: var(--white);
  stroke-width: 2.5;
}
.ez-globe__route path {
  fill: none;
  stroke: var(--ink-300);
  stroke-width: 1.25;
  stroke-dasharray: 3 5;
}
.ez-globe__eu {
  fill: var(--ink-75);
  stroke: var(--ink-900);
  stroke-width: 1.5;
}
.ez-globe__eulabel {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  fill: var(--ink-900);
  text-anchor: middle;
}
.ez-tech__layers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.ez-tech__layer {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.ez-tech__layer:last-child {
  border-bottom: none;
}
.ez-tech__idx {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink-500);
  padding-top: 4px;
}
.ez-tech__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ez-tech__body strong {
  font: var(--text-h4);
  color: var(--ink-900);
}
.ez-tech__body span {
  font: var(--text-body-sm);
  color: var(--text-muted);
}
.ez-tech__notes {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.ez-tech__criteria {
  font: var(--text-body-lg);
  color: var(--text-body);
  max-width: 78ch;
}

/* ---------- 11. data ------------------------------------------------------ */

/* ---------- 13. footer ------------------------------------------------------ */
/* gtlab.org keeps the page white to the very bottom. */
.mk-footer {
  background: var(--white);
  color: var(--ink-600);
  border-top: 1px solid var(--border-default);
  padding-block: var(--space-7) var(--space-5);
}
.mk-footer__grid {
  border-bottom: 1px solid var(--border-subtle);
}
/* The kit styles .mk-footer h4; the markup uses h3 for heading order, so the
   same treatment is restated here rather than edited in vendor CSS. */
.mk-footer h3 {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: var(--space-4);
}
.mk-footer h3 {
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.mk-footer a {
  color: var(--ink-600);
}
.mk-footer a:hover {
  color: var(--ink-900);
}
.mk-footer__brand .mk-logo,
.mk-footer__brand .ez-logo {
  color: var(--ink-900);
}
.mk-footer__brand p {
  color: var(--ink-500);
}
.mk-footer .mk-footer__bottom,
.mk-footer .ez-logo__product {
  color: var(--ink-500);
}
.ez-footer__domain {
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--ink-900);
  margin-top: var(--space-2);
}

/* ---------- modal ---------------------------------------------------------- */
.ez-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: color-mix(in srgb, var(--ink-950) 45%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  overflow-y: auto;
}
.ez-modal__panel {
  position: relative;
  width: min(560px, 100%);
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.ez-modal__panel h2 {
  font: var(--text-h1);
  letter-spacing: var(--tracking-display);
  color: var(--text-strong);
  margin-bottom: var(--space-4);
}
.ez-modal__panel p {
  font: var(--text-body);
  color: var(--text-muted);
}
.ez-modal__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin: var(--space-5) 0;
}
.ez-modal__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.ez-modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 34px;
  height: 34px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink-600);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.ez-modal__close:hover {
  border-color: var(--ink-900);
  color: var(--ink-900);
}

/* ---------- reveal on scroll ------------------------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ez-dg__flow path,
  .ez-dg__control path {
    animation: none;
  }
  * {
    scroll-behavior: auto !important;
  }
}

/* ---------- one section, one screen ------------------------------------------
   The window decides the height, not the content: every section is exactly
   one screen tall and its content is scaled by ez/fit.js until it fits.
   Only on windows big enough for a scaled section to stay readable. */
@media (min-width: 1024px) and (min-height: 620px) {
  html[data-ez-fit] {
    scroll-snap-type: y proximity;
  }
  /* The footer sits outside the sections and had no snap point of its own, so
     the bottom of the document was not a resting place: scrolling to it pulled
     the page back to the last section start and the footer went out of view.
     Aligned to the end, so the document end is where the scroll comes to rest. */
  html[data-ez-fit] .mk-footer {
    scroll-snap-align: end;
  }
  [data-ez-fit] .ez-page > section {
    /* Fixed, not min-height: the section must stay one screen tall so the
       content overflows it and fit.js can measure how much to scale. */
    height: calc(100svh - var(--ez-header, 69px));
    /* The vendor rhythm of 104px top and bottom is a third of a short
       window on its own; the screen edge is the rhythm here. */
    padding-block: clamp(1rem, 3.5vh, 2.5rem);
    display: grid;
    align-content: center;
    overflow: hidden;
    scroll-snap-align: start;
    scroll-margin-top: var(--ez-header, 69px);
  }
  [data-ez-fit] .ez-page > section > * {
    /* A grid item with `margin-inline: auto` does not stretch — it shrinks to
       its content. The wrap needs an explicit width or every section ends up
       a different column width while all of them stay centred, which reads as
       inconsistent alignment. max-width still caps it and the auto margins
       still centre it. */
    width: 100%;
    transform: scale(var(--ez-fit, 1));
    transform-origin: center center;
  }
  /* Past the floor scale the type stops being readable. That section keeps
     its full size and scrolls the way it always did — the configurator with
     its question, answer list and result panel is the honest case. */
  [data-ez-fit] .ez-page > section[data-ez-scroll] {
    height: auto;
    min-height: calc(100svh - var(--ez-header, 69px));
    overflow: visible;
  }
  /* And a section holding far less than a screen takes its own height with a
     generous band instead of a full screen: stretched, its content floated in
     the middle and the empty halves of two neighbours added up into a hole. */
  [data-ez-fit] .ez-page > section[data-ez-short] {
    height: auto;
    padding-block: clamp(3rem, 9vh, 6rem);
    overflow: visible;
  }

  /* The two pictures are what make their sections tall, so they are the two
     things given a ceiling in screen heights rather than in pixels. The
     ceiling is on the width, derived from the drawing's own proportions —
     capping the height alone would letterbox them inside a full-width frame. */
  [data-ez-fit] .ez-hero__visual {
    /* 600 : 394 is the schematic's viewBox. No padding to add any more.
       Left, not centred: the poster line, the statement and the lead above it
       all start at the column edge, and a centred drawing under them read as
       the one element that had been forgotten. */
    max-width: calc(40svh * 600 / 394);
    margin-inline: 0;
  }
}

/* ---------- responsive -------------------------------------------------------- */
@media (max-width: 1100px) {
  .ez-conf {
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  }
  .ez-process {
    grid-template-columns: repeat(2, 1fr);
  }
}

@container (max-width: 980px) {
  .ez-hero__inner,
  .ez-econ__panel,
  .ez-installers,
  .ez-tech,
  .ez-conf {
    grid-template-columns: minmax(0, 1fr);
  }
  .ez-conf__panel {
    position: static;
  }
  /* the schematic keeps its own scale and scrolls sideways rather than
     shrinking its labels below legibility */
  .ez-hero__visual {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(90deg, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent 100%);
  }
  .ez-hero__visual svg {
    min-width: 520px;
  }

}

@container (max-width: 700px) {
  /* the explanation moves below the layer list instead of beside it */
  .ez-orbit {
    grid-template-columns: minmax(0, 1fr);
  }
  .ez-orbit__detail {
    border-left: none;
    border-top: 1px solid var(--border-default);
    padding-left: 0;
    padding-top: var(--space-5);
  }
}

@media (max-width: 860px) {
  .ez-nav {
    display: none;
  }
  /* Two letters, quiet until needed — the language is not the point of the page. */
.ez-lang {
  display: inline-flex;
  gap: var(--space-2);
  margin-right: var(--space-4);
}
.ez-lang a {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  /* ink-400 on white is 3.4:1 — under AA for text this size. */
  color: var(--ink-500);
  padding: 2px 0;
}
.ez-lang a:hover {
  color: var(--ink-900);
}
.ez-lang a.is-current {
  color: var(--ink-900);
  border-bottom: 1.5px solid var(--ink-900);
}

.ez-burger {
    display: flex;
  }
  .ez-compare {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .ez-answers li {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
  .ez-answers__value {
    grid-column: 1 / -1;
    order: 3;
  }
  .ez-process {
    grid-template-columns: minmax(0, 1fr);
  }
  .ez-econ__chart {
    height: 240px;
    gap: var(--space-5);
  }
  .ez-econ__column {
    width: 88px;
  }
  .ez-panel__bar {
    grid-template-columns: 84px 1fr auto;
  }
}

/* The hero carries no button any more, so the header CTA stays on every width;
   at 390 px the logo, the button and the menu still fit on one bar. */
@media (max-width: 400px) {
  .mk-header .ez-header__cta-btn {
    padding: 0 0.7em;
    font-size: 0.75rem;
  }
}

/* ---------- the consultant ---------------------------------------------------
   A launcher in the corner and a panel above it. Same monochrome as the rest;
   the only colour is the cyan the design system reserves for live states. */
.ez-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ez-ask {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 60;
  width: 60px;
  height: 60px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  /* Light, because the figure is grey: on the near-black of the rest of the
     page's buttons the visor disappeared into the background. */
  background: var(--white);
  color: var(--ink-900);
  cursor: pointer;
  box-shadow: var(--ring-hairline), var(--shadow-md);
  transition: box-shadow var(--dur-base) var(--ease-standard);
}
.ez-ask:hover {
  box-shadow: 0 0 0 1px var(--ink-900), var(--shadow-lg);
}
.ez-ask.is-open {
  background: var(--ink-900);
  color: var(--white);
}
/* The head fills the disc and sits a little low, the way a portrait does. */
.ez-ask picture,
.ez-ask img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
.ez-ask.is-open picture {
  display: none;
}
.ez-ask:focus-visible {
  outline: 2px solid var(--ion-mint-500);
  outline-offset: 2px;
}

.ez-consultant {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: calc(clamp(1rem, 3vw, 2rem) + 68px);
  z-index: 60;
  width: min(400px, calc(100vw - 2rem));
  max-height: min(600px, calc(100vh - 8rem));
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--ring-hairline), var(--shadow-lg);
  overflow: hidden;
}
.ez-consultant__head {
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.ez-consultant__head h2 {
  font: var(--text-h3);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.ez-consultant__head p {
  font: var(--text-body-sm);
  color: var(--text-muted);
  margin-top: var(--space-2);
}

.ez-consultant__log {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.ez-consultant__seeds {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ez-consultant__seeds button {
  width: 100%;
  text-align: left;
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--white);
  font: var(--text-body-sm);
  color: var(--ink-700);
  cursor: pointer;
}
.ez-consultant__seeds button:hover {
  border-color: var(--ink-400);
  color: var(--ink-900);
}

.ez-turn p {
  font: var(--text-body-sm);
  color: var(--ink-800);
}
.ez-turn p + p {
  margin-top: var(--space-3);
}
.ez-turn--user {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--ink-75);
}
.ez-turn--user p {
  color: var(--ink-900);
  font-weight: var(--fw-medium);
}
.ez-turn__computed {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.ez-consultant__busy,
.ez-consultant__failed {
  font: var(--text-body-sm);
  color: var(--text-muted);
}
.ez-consultant__failed {
  color: var(--danger-600);
}

.ez-consultant__ask {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-subtle);
}
.ez-consultant__ask input {
  flex: 1;
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  font: var(--text-body-sm);
  color: var(--ink-900);
}
.ez-consultant__ask input:focus-visible {
  outline: 2px solid var(--ink-900);
  outline-offset: -1px;
}
.ez-consultant__ask button {
  padding: var(--space-3) var(--space-4);
  border: none;
  border-radius: var(--radius-sm);
  background: var(--ink-900);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}
.ez-consultant__ask button:disabled {
  background: var(--ink-300);
  cursor: default;
}
.ez-consultant__note {
  padding: 0 var(--space-5) var(--space-4);
  font-size: 0.6875rem;
  color: var(--text-subtle);
}

/* ---- Chinese ------------------------------------------------------------
   Archivo and IBM Plex carry no CJK glyphs, so without this the page falls
   back to whatever the browser picks per glyph and the type stops being a
   typeface. Latin and digits still come from the brand faces — the CJK
   families sit behind them and are only reached for characters the brand
   faces do not have. A system stack, not a webfont: a Chinese webfont is
   several megabytes for one page.

   The display tracking is negative because Latin display type wants it;
   Chinese characters at -0.02em touch each other. Zeroed here, and only
   here. */
html[lang="zh"] {
  --font-display: 'Archivo', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
    'Noto Sans CJK SC', 'Source Han Sans SC', sans-serif;
  --font-body: 'IBM Plex Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
    'Noto Sans CJK SC', 'Source Han Sans SC', sans-serif;
  --font-mono: 'IBM Plex Mono', 'PingFang SC', 'Microsoft YaHei', ui-monospace, monospace;
  --tracking-display: 0;
  --tracking-tight: 0;
}