/* LUMOTURO product site, identity "Projection". One block per section, in page order; then the parts that
   several sections share, then the phone layout. */

/* =========================================================
   Hero: one night photograph edge to edge, headline over it
   ========================================================= */

.hero-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  margin-top: calc(-1 * var(--head-h));
  min-height: max(640px, 100svh);
}
/* Without JavaScript the header is solid, so the photograph starts under it and not behind it. */
html:not(.js) .hero-stage { margin-top: 0; }
.hero-fig { position: absolute; inset: 0; z-index: -1; }
.hero-box { position: absolute; inset: 0; overflow: hidden; container-type: size; background: #070a12; }
/* The picture box behaves like object-fit: cover, enlarged and anchored. In the landscape picture the tower is at
   44 % of the width and its foot at 80 % of the height: the picture is 136 % of the hero wide and starts at the left
   edge, so the tower stands at 60 % of the width, right of the copy; its foot is held at 80 % of the hero height. */
.hero-art {
  position: absolute;
  display: block;
  left: 0;
  --w: max(136vw, 150.3vh);
  top: clamp(100vh - .6655 * var(--w), 80vh - .5324 * var(--w), 0px);
  width: var(--w);
  aspect-ratio: 2000 / 1331;
}
@supports (width: 1cqw) {
  .hero-art {
    --w: max(136cqw, 150.3cqh);
    top: clamp(100cqh - .6655 * var(--w), 80cqh - .5324 * var(--w), 0px);
  }
}
.hero-art img { display: block; width: 100%; height: 100%; }
.hero-box::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(14, 15, 18, .78) 0, rgba(14, 15, 18, .5) 90px, rgba(14, 15, 18, 0) 190px),
    linear-gradient(to right, rgba(14, 15, 18, .86) 0, rgba(14, 15, 18, .8) 28%, rgba(14, 15, 18, .62) 38%, rgba(14, 15, 18, .28) 44%, rgba(14, 15, 18, 0) 50%);
}
.hero-inner {
  align-self: center;
  padding-block: calc(var(--head-h) + 28px) clamp(56px, 9vh, 96px);
}
/* The copy stops short of the tower, which stands a little right of the middle of the frame. */
.hero-copy { max-width: min(600px, calc(47vw - var(--gut))); }
.lede {
  margin-top: 20px;
  max-width: 33em;
  font-size: clamp(1.15rem, .5vw + 1rem, 1.35rem);
  line-height: 1.4;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-actions .btn-line { background: rgba(14, 15, 18, .4); border-color: rgba(246, 242, 228, .8); }
.hero-actions .btn-line:hover { background: rgba(14, 15, 18, .7); }

@media (min-width: 900px) and (max-width: 1199.98px) {
  .hero-copy { max-width: calc(50vw - var(--gut)); }
}
@media (max-width: 899.98px) {
  /* The photograph fills the upper part of the first screen; the line of text and the two calls to action
     stand on night below it. */
  .hero-stage { --below: 148px; min-height: max(640px, 100svh); }
  .hero-fig { inset: 0 0 var(--below) 0; }
  /* The upright picture: the tower is at 51 % of its width, its foot at 80 % of its height.
     It is centred on the tower, and the foot is held at 83 % of the picture box. */
  .hero-art {
    aspect-ratio: 1000 / 1447;
    --w: max(130vw, 52vh);
    left: clamp(100vw - var(--w), 50vw - .51 * var(--w), 0px);
    top: auto; bottom: 0;
  }
  @supports (width: 1cqw) {
    .hero-art {
      --w: max(130cqw, 80cqh);
      left: clamp(100cqw - var(--w), 50cqw - .51 * var(--w), 0px);
      top: clamp(100cqh - 1.447 * var(--w), 83cqh - 1.1576 * var(--w), 0px);
      bottom: auto;
    }
  }
  .hero-box::after {
    background:
      linear-gradient(to bottom, rgba(14, 15, 18, .84) 0, rgba(14, 15, 18, .72) 150px, rgba(14, 15, 18, .4) 235px, rgba(14, 15, 18, 0) 320px),
      linear-gradient(to top, var(--night) 0, rgba(14, 15, 18, 0) 22%);
  }
  .hero-inner { align-self: stretch; display: flex; padding-block: calc(var(--head-h) + 14px) 28px; }
  .hero-copy { flex: 1; display: flex; flex-direction: column; max-width: none; }
  .hero h1 { margin-bottom: auto; font-size: clamp(1.9rem, 7.7vw, 2.6rem); }
  .lede { margin-top: 24px; }
  .hero-actions { margin-top: 18px; }
}
@media (max-width: 559.98px) {
  /* stacked buttons: the photograph ends higher, so the foot of the tower stays clear of the text */
  .hero-stage { --below: 210px; }
  .hero-actions { display: grid; }
}

/* =========================================================
   Fits in a van, carried by hand: two pictures and no lines of text. The real clip in a loop, with the current
   step written straight onto the footage, and the van picture.
   The clip is built like the take in "How it goes up": no plates, the footage darkened evenly, letters with a soft shadow.
   The camera changes with every shot, so the words keep to one corner of the picture and point at nothing.
   Files, timings and words come from ../shared/data/carry.js (window.LUMO_CARRY).
   ========================================================= */

/* On a computer the heading and the van picture stand in the text column, the clip beside them. The picture is
   set down on the line of the clip's lower edge. */
.carry-in {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  grid-template-areas: "mark mark" "h clip" "boot clip";
  grid-template-rows: auto auto 1fr;
  gap: 0 clamp(32px, 5vw, 72px);
  align-items: start;
}
.carry-in > .mark { grid-area: mark; }
.carry-in > h2 { grid-area: h; }
.boot { grid-area: boot; align-self: end; margin-top: clamp(22px, 2.6vw, 32px); }

/* The van picture: a generated scene, 3:2, with the AI mark in its corner. */
.boot-pic { position: relative; display: block; margin: 0; overflow: hidden; background: #000; aspect-ratio: 3 / 2; }
.boot-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }

.clip {
  grid-area: clip;
  --dark: .4;     /* how much night colour lies over the footage */
  --soft: 0 1px 2px rgba(14, 15, 18, .9), 0 0 10px rgba(14, 15, 18, .65), 0 0 22px rgba(14, 15, 18, .4);
  container: clip / inline-size;
}
.clip-view { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; color: var(--light); }
.clip-video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.clip-layer { position: absolute; inset: 0; pointer-events: none; }
.clip-layer::before { content: ""; position: absolute; inset: 0; background: rgba(14, 15, 18, var(--dark)); }
/* the step that is on: three bars, its number and title, one large value with its label. Bottom left, always. */
.clip-step { position: absolute; left: 3.4%; bottom: 5.5%; text-shadow: var(--soft); }
.clip-step p { margin: 0; }
.clip-bars { display: flex; gap: 6px; }
.clip-bars i { width: 30px; height: 3px; background: rgba(246, 242, 228, .55); box-shadow: 0 0 3px rgba(14, 15, 18, .8); }
.clip-bars i.is-on { background: var(--signal); }
.clip-step .clip-title { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 1.15rem; font-weight: 600; line-height: 1.25; }
/* on the footage the number is an outline: nothing filled lies on the picture */
.clip-n {
  flex: none;
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border: 1.5px solid var(--signal);
  color: var(--signal);
  font-size: var(--t-tag);
  font-variant-numeric: tabular-nums;
}
.clip-step .clip-fig {
  margin-top: 8px;
  font-weight: 300;
  font-size: clamp(3.2rem, 7.4cqw, 4.8rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.clip-step .clip-lab { margin-top: 4px; font-size: 1rem; font-weight: 500; line-height: 1.3; }
.clip-toggle { position: absolute; right: 8px; bottom: 8px; z-index: 2; }
html:not(.js) .clip-layer, html:not(.js) .clip-toggle { display: none; }
/* With reduced motion, until the video is played: the still stands clear, and the steps are a list under it. */
.clip.is-still:not(.is-live) .clip-layer { display: none; }

/* The three steps as a list: without JavaScript and with reduced motion. */
.clip-steps {
  list-style: none;
  margin: 14px 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(20px, 3vw, 40px);
}
.js .clip:not(.is-still) .clip-steps { display: none; }
.clip-steps li { padding: 12px 0 4px; border-top: 1px solid var(--rule-strong); }
.clip-steps h3 { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; font-weight: 600; letter-spacing: 0; line-height: 1.25; }
.clip-steps p { margin-top: 6px; padding-left: 34px; font-size: var(--t-run); line-height: 1.45; }
.clip-steps b { font-weight: 600; white-space: nowrap; }

/* narrow computer screens: the heading keeps to two lines in the text column (its longer line is 7.9 em wide,
   the column 29 % of the screen), so the van picture still ends on the clip's lower edge */
@media (min-width: 1000px) and (max-width: 1199.98px) {
  .carry-in > h2 { font-size: 3.6vw; }
}

/* one column: heading, the clip, then the van picture */
@media (max-width: 999.98px) {
  .carry-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "mark" "h" "clip" "boot"; grid-template-rows: none; }
  .carry-in > h2 { margin-bottom: 22px; }
  .boot { margin-top: 12px; }
}

/* =========================================================
   How it goes up: the real take in a loop, with graphics drawn over it and kept in step with it
   ========================================================= */

.how { padding-block: clamp(28px, 2.4vw, 36px) var(--sec-y); border-top: 1px solid var(--rule); }

/* The real take plays in a loop, with lines, figures and words drawn straight onto the footage: no plates, no boxes.
   The footage is darkened evenly so that they read; letters carry a soft shadow, lines a thin dark edge.
   Call-outs sit in a layer that has exactly the box of the 16:9 frame, so every position is a share of the frame,
   as in the data file ../shared/data/take.js (window.LUMO_TAKE). */
.take {
  --cx: 47%;      /* narrow screens show a window of the frame; its centre, as a share of the frame width */
  --dark: .46;    /* how much night colour lies over the footage */
  --above: 180px; /* what stands between the header and the picture when a link leads to the block: padding and heading */
  --ink: rgba(14, 15, 18, .72);
  --soft: 0 1px 2px rgba(14, 15, 18, .9), 0 0 10px rgba(14, 15, 18, .65), 0 0 22px rgba(14, 15, 18, .4);
  container: take / inline-size;
  /* One grid for both arrangements: its parts are the heading, the picture with what lies on it,
     and the stages. */
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "mark mark" "h h" "view view" "stages stages";
  gap: 0 clamp(32px, 5vw, 72px);
  align-items: end;
  /* heading and picture stay on one screen: see the window on the frame below */
  width: min(100%, max(600px, (100svh - var(--head-h) - var(--above)) / .495));
  margin: 0 auto;
}
.take-box, .take-title { display: contents; }
.take-title .mark { grid-area: mark; margin-bottom: 12px; }
.take-title h2 { grid-area: h; margin-bottom: clamp(16px, 2vw, 24px); }
/* the control: an icon in the lower right corner of the picture, over the ground */
.take-toggle { grid-area: view; z-index: 3; align-self: end; justify-self: end; margin: 0 8px 8px 0; }
.take-view { grid-area: view; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.take-frame { position: absolute; inset: 0; }
/* Where the screen is not tall enough for the heading and the whole frame, the window on the frame gets lower:
   up to 12 % of its top, the sky and the crest of the mountain, is left out, so that the ground with its
   call-outs stays on screen. The frame keeps its shape and its place, so no position changes. */
@supports (height: 1cqw) {
  .js .take-view { aspect-ratio: auto; height: clamp(49.5cqw, 100svh - var(--head-h) - var(--above), 56.25cqw); }
  .js .take-frame { inset: auto 0 0 0; aspect-ratio: 16 / 9; }
}
.take-video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
html:not(.js) .take-toggle, html:not(.js) .take-layer, html:not(.js) .tk-ui { display: none; }

/* The three stages: real text. Under the picture, or on it where the frame is wide enough. */
.take-stages {
  grid-area: stages;
  align-self: start;
  list-style: none;
  margin: 14px 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(20px, 3vw, 40px);
}
.take-stages li { padding: 12px 0 4px; border-top: 1px solid var(--rule); transition: border-color .24s; }
.take-stages h3 {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.05rem; font-weight: 600; letter-spacing: 0; line-height: 1.25;
  transition: color .24s;
}
.stage-n {
  flex: none;
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border: 1px solid currentColor;
  font-size: var(--t-tag);
  font-variant-numeric: tabular-nums;
  transition: background-color .24s, border-color .24s, color .24s;
}
.take-stages p { margin-top: 6px; padding-left: 34px; font-size: var(--t-run); line-height: 1.45; transition: color .24s; }
.take-stages li.is-on { border-top-color: var(--signal); }
.take-stages li.is-on .stage-n { background: var(--signal); border-color: var(--signal); color: var(--night); text-shadow: none; }
/* while the take runs, only the current stage stands at full strength */
.is-live .take-stages li:not(.is-on) h3, .is-live .take-stages li:not(.is-on) p { color: var(--fg2); }

/* The frame layer: the even darkening, then the lines, then the words of the call-outs. */
.take-layer { position: absolute; inset: 0; pointer-events: none; color: var(--light); }
.take-layer::before { content: ""; position: absolute; inset: 0; background: rgba(14, 15, 18, var(--dark)); }
.take-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.take-svg path, .take-svg circle, .tk-plan-svg path, .tk-plan-svg circle { fill: none; vector-effect: non-scaling-stroke; }
/* every line is drawn twice: the lower one is its thin dark edge */
.tk-case { stroke: var(--ink); stroke-width: 4.5px; stroke-linecap: round; stroke-linejoin: round; }
.tk-line { stroke: var(--light); stroke-width: 1.5px; }
.tk-thin { stroke: var(--light); stroke-width: 1px; stroke-dasharray: 9 3 2 3; }
.tk-faint { stroke: var(--light); stroke-width: 1px; opacity: .8; }
.tk-act { stroke: var(--signal); stroke-width: 2.5px; stroke-linecap: round; }
.take-svg .tk-dot { fill: var(--signal); stroke: var(--ink); stroke-width: 1.5px; }
/* what is not shown is taken out of the picture altogether once it has faded */
.cue, .tk-call { opacity: 0; visibility: hidden; transition: opacity .24s var(--ease), visibility 0s .24s; }
.cue.is-on, .tk-call.is-on { opacity: 1; visibility: visible; transition: opacity .24s var(--ease), visibility 0s; }

/* the words of the call-outs lie on the footage: over the earth and the mountain, never over the sky or the column */
.tk-call {
  position: absolute;
  margin: 0;
  font-size: .9rem; font-weight: 600; line-height: 1.25;
  white-space: nowrap;
  text-shadow: var(--soft);
}
.tk-call[data-cue="air"], .tk-call[data-cue="light"] { transform: translate(-50%, -50%); letter-spacing: .08em; }
.tk-call[data-cue="height"] { transform: translate(calc(-100% - 10px), -50%); font-variant-numeric: tabular-nums; }
.tk-call[data-cue^="step"] { transform: translate(8px, -50%); }

/* What lies on the picture but does not belong to a point of the frame: the stopwatch with the note,
   and during the hold the plan. The stopwatch stands top left, over the dark trees and clear of the path of
   the lifting column; the captions of the plan top right, over the tree; the plan itself over the ground, bottom left. */
.tk-ui {
  grid-area: view;
  z-index: 2;
  align-self: stretch;
  position: relative;
  color: var(--light);
  text-shadow: var(--soft);
  pointer-events: none;
}
.tk-watch { position: absolute; left: 3%; top: 8%; }
/* the line above the figure is kept for the word "Rewind", so the figure does not move when it comes and goes */
.tk-watch-top { margin: 0; font-size: var(--t-cap); line-height: 1.3; }
.tk-rewind { display: flex; align-items: center; gap: 7px; font-weight: 600; color: var(--signal); opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
.tk-rewind::before {
  content: "";
  width: 14px; height: 10px;
  background: currentColor;
  clip-path: polygon(0 50%, 50% 0, 50% 50%, 100% 0, 100% 100%, 50% 50%, 50% 100%);
  filter: drop-shadow(0 0 1px rgba(14, 15, 18, .9));
}
.is-rewind .tk-rewind { opacity: 1; visibility: visible; transition: opacity .2s, visibility 0s; }
.tk-time {
  margin: 0;
  font-weight: 300;
  font-size: clamp(3.4rem, 6cqw, 5rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.tk-ruler { position: relative; width: clamp(180px, 17cqw, 240px); height: 32px; margin-top: 8px; }
.ruler-ticks { position: absolute; left: 0; top: 0; width: 100%; height: 12px; display: block; overflow: visible; filter: drop-shadow(0 0 1.5px rgba(14, 15, 18, .95)); }
.ruler-ticks path { fill: none; stroke: rgba(246, 242, 228, .8); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ruler-ticks .major { stroke: var(--light); stroke-width: 1.5; }
.ruler-s {
  position: absolute; top: 19px;
  transform: translateX(-50%);
  font-size: var(--t-tag); font-weight: 500; line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* the last figure carries the unit: its digits stay on the tick, the unit hangs to the right */
.ruler-s.is-last { transform: translateX(-.62em); }
.ruler-head { position: absolute; left: -1px; top: -4px; width: 2px; height: 20px; background: var(--signal); box-shadow: 0 0 0 1px var(--ink); will-change: transform; }
.tk-note { margin: 12px 0 0; font-size: var(--t-cap); font-weight: 600; line-height: 1.3; }

/* While the last frame is held: the plan of what one tower lights. Line work with see-through fills. */
.tk-plan-text, .tk-plan-fig { opacity: 0; visibility: hidden; transition: opacity .28s var(--ease), visibility 0s .28s; }
.is-plan .tk-plan-text, .is-plan .tk-plan-fig { opacity: 1; visibility: visible; transition: opacity .28s var(--ease), visibility 0s; }
.tk-plan-text { position: absolute; right: 3%; top: 10%; width: 30%; display: grid; gap: 8px; }
.tk-cap { margin: 0; display: grid; font-size: var(--t-cap); font-weight: 500; line-height: 1.32; }
.tk-cap b { font-weight: 600; }
.tk-cap b::before {
  content: "";
  display: inline-block;
  width: 16px;
  margin-right: 7px;
  vertical-align: .28em;
  border-top: 2px solid var(--signal);
  filter: drop-shadow(0 0 1px rgba(14, 15, 18, .9));
}
.tk-cap-out b::before { border-top-style: dashed; }
/* the plan with its label above it */
.tk-plan-fig { position: absolute; left: 3%; bottom: 4%; display: grid; gap: 10px; justify-items: start; }
.tk-plan-svg {
  display: block;
  width: clamp(112px, 15cqw, 176px); height: auto;
  aspect-ratio: 1 / 1;
  overflow: visible;
  filter: drop-shadow(0 0 1px rgba(14, 15, 18, .9)) drop-shadow(0 0 3px rgba(14, 15, 18, .5));
}
.pc-centre { stroke: rgba(246, 242, 228, .85); stroke-width: 1px; stroke-dasharray: 9 3 2 3; }
.tk-plan-svg .pc-tower { fill: var(--night); stroke: var(--light); stroke-width: 2px; }
.tk-plan-svg .pc-in { fill: rgba(255, 237, 0, .16); stroke: var(--signal); stroke-width: 2px; }
.tk-plan-svg .pc-out { fill: rgba(255, 237, 0, .08); stroke: var(--signal); stroke-width: 2px; stroke-dasharray: 6 5; }
.pc-in, .pc-out, .tk-cap { opacity: 0; visibility: hidden; transition: opacity .28s var(--ease), visibility 0s .28s; }
.is-inner .pc-in, .is-inner .tk-cap-in, .is-outer .pc-out, .is-outer .tk-cap-out { opacity: 1; visibility: visible; transition: opacity .28s var(--ease), visibility 0s; }

/* Wide frame: the stages stand on the picture too, as a quiet column over the tree on the right.
   The plan then keeps to the left: its captions under the stopwatch, over the trees, the circles under them over the ground. */
@container take (min-width: 1100px) {
  .js .tk-ui { display: flex; flex-direction: column; align-items: flex-start; padding: 4.6% 0 3% 3%; }
  .js .tk-watch, .js .tk-plan-text, .js .tk-plan-fig { position: static; width: auto; }
  .js .tk-plan-text { margin-top: auto; }
  .js .tk-plan-fig { flex: none; margin-top: 10px; }
  .js .tk-plan-svg { width: clamp(112px, 13cqw, 176px); }
  .js .take-stages {
    grid-area: view;
    z-index: 2;
    justify-self: end;
    display: block;
    width: 27%;
    margin: 4.6% 3% 0 0;
    color: var(--light);
    text-shadow: var(--soft);
  }
  .js .take-stages li { padding: 12px 0 10px; border-top-color: rgba(246, 242, 228, .34); }
  .js .take-stages li.is-on { border-top-color: var(--signal); }
  /* on the footage the number of the current stage is an outline too: nothing filled lies on the picture */
  .js .take-stages li.is-on .stage-n { background: none; border: 1.5px solid var(--signal); color: var(--signal); text-shadow: var(--soft); }
  .js .is-live .take-stages li:not(.is-on) h3, .js .is-live .take-stages li:not(.is-on) p { color: rgba(246, 242, 228, .7); }
}
/* Narrow screens show a window of the frame, centred on the tower: 4:3, and 4:5 on phones.
   The frame is wider than the window and carries the video and its layer together. */
@media (max-width: 899.98px) {
  .take {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "mark" "h" "view" "stages";
    width: 100%;
  }
  .take-title h2 { margin-bottom: 12px; }
  .js .take-view { aspect-ratio: 4 / 3; height: auto; }
  .js .take-frame { inset: auto; top: 0; left: 50%; height: 100%; aspect-ratio: 16 / 9; transform: translateX(calc(-1 * var(--cx))); }
  .tk-time { font-size: 3.2rem; }
  .tk-ruler { width: 160px; }
  .tk-plan-text { top: 12%; width: 34%; }
  /* the captions of the plan take the place of the words beside the column */
  .is-plan .tk-call[data-cue^="step"], .is-plan .cue-step { opacity: 0; visibility: hidden; }
}
@media (max-width: 639.98px) {
  .js .take-view { aspect-ratio: 4 / 5; margin-inline: calc(-1 * var(--gut)); }
  .take-toggle { margin: 0 calc(6px - var(--gut)) 6px 0; }
  .take-stages { grid-template-columns: minmax(0, 1fr); }
  /* the window is narrow: the stopwatch keeps to the strip left of the lifting column, the captions start below the sky */
  .tk-ui { margin-inline: calc(-1 * var(--gut)); }
  .tk-watch { top: 9%; width: 96px; }
  .tk-time { font-size: 2.6rem; }
  .tk-ruler { width: 86px; }
  .tk-note { margin-top: 10px; }
  .tk-plan-text { right: 1.5%; top: 14%; width: 33%; gap: 7px; }
  .tk-cap b::before { width: 12px; margin-right: 5px; }
  .tk-plan-fig { left: 3.5%; width: 31%; gap: 8px; }
  .tk-plan-svg { width: 100%; }
  /* the figure before the last has no room on so short a time line: its tick stays, its number goes */
  .ruler-s.is-tight { display: none; }
}

/* =========================================================
   Why
   ========================================================= */

.why { border-top: 1px solid var(--rule); }
.why-h { margin-bottom: clamp(24px, 3vw, 40px); }

/* The facts behind it: three sourced facts on a dimension rule, then the study. Under the drawing. */
.facts-h { margin: clamp(36px, 4.4vw, 60px) 0 clamp(18px, 2.2vw, 26px); }
.why-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(24px, 3.4vw, 56px);
}
.why-facts li { padding-top: 16px; }
.why-fact { font-weight: 300; font-size: clamp(1.12rem, .6vw + 1rem, 1.38rem); line-height: 1.3; }
.src { margin-top: 10px; font-size: var(--t-cap); color: var(--fg2); }

.cmp-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px clamp(24px, 3vw, 48px);
}
.cmp-draw { position: relative; border: 1px solid var(--rule); }
.cmp-draw svg { display: block; width: 100%; height: auto; }
html:not(.js) .cmp-draw { display: none; }
.cmp h3 { margin-top: 16px; }
html:not(.js) .cmp h3 { margin-top: 0; }
.cmp p { margin-top: 6px; max-width: 52ch; color: var(--fg2); }
/* the control of the drawing: an icon in the upper right corner of the figure */
.compare { position: relative; }
.cmp-toggle { position: absolute; right: 4px; top: 4px; }
.evidence-line {
  margin-top: clamp(24px, 3vw, 40px);
  max-width: 72ch;
  padding-left: 20px;
  border-left: 1px solid var(--rule-strong);
}

/* Styles of the drawing (the SVG is built in js/compare.js). */
.cz-ground { stroke: var(--dim); stroke-width: 1; fill: none; }
.cz-hair { stroke: var(--dim); stroke-width: .8; fill: none; }
.cz-proj { stroke: var(--dim); stroke-width: .7; stroke-dasharray: 3 4; fill: none; opacity: .8; }
.cz-obj { stroke: var(--light); stroke-width: 1.1; fill: var(--night); stroke-linejoin: round; }
.cz-objline { stroke: var(--light); stroke-width: 1.1; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cz-dimfill { fill: var(--dim); stroke: none; }
.cz-lightfill { fill: var(--light); stroke: none; }
.cz-ray { stroke: var(--signal); stroke-width: .8; fill: none; opacity: .62; }
.cz-ray-eye { stroke: var(--signal); stroke-width: 1.6; fill: none; }
.cz-ray-eye-thin { stroke: var(--signal); stroke-width: .7; fill: none; opacity: .8; }
.cz-shadow { fill: var(--night); stroke: none; }
.cz-road { fill: rgba(246, 242, 228, .035); stroke: none; }
.cz-roadedge { stroke: var(--dim); stroke-width: .8; fill: none; }
.cz-roadmid { stroke: var(--dim); stroke-width: .8; stroke-dasharray: 10 10; fill: none; }
.cz-src { fill: var(--signal); stroke: none; }
.cz-t { fill: var(--light); font-size: 11.5px; paint-order: stroke; stroke: var(--night); stroke-width: 4px; stroke-linejoin: round; }
.cz-view { fill: var(--dim); font-size: 11px; }
.cz-lead { stroke: var(--light); stroke-width: .7; fill: none; }

@media (max-width: 899.98px) {
  .why-facts { grid-template-columns: minmax(0, 1fr); row-gap: 20px; border-top: 0; }
  .why-facts li { border-top: 1px solid var(--rule-strong); }
  .cmp-panels { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   Recent photos: one row of pictures of equal height, each at its own proportions, from edge to edge of the page.
   The row scrolls natively; the script moves it slowly to the left and repeats the set. A photo opens larger.
   ========================================================= */

.gal-h { margin-bottom: clamp(20px, 2.6vw, 32px); }
/* about half the screen height, and never so tall that one landscape picture fills the whole width */
.gal { --gh: clamp(260px, min(50svh, 46vw), 520px); }
.gal-row {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  gap: 10px;
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--dim) transparent;
}
/* with the script the row has no end, so a scroll bar would say nothing */
.js .gal-row { scrollbar-width: none; cursor: grab; }
.js .gal-row::-webkit-scrollbar { display: none; }
.js .gal-row.is-drag { cursor: grabbing; }
.gal-item { flex: none; width: calc(var(--r) * var(--gh)); height: var(--gh); }
.gal-open {
  display: block;
  width: 100%; height: 100%;
  padding: 0;
  border: 0;
  background: #000;
  overflow: hidden;
  cursor: zoom-in;
}
.gal-open img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
.gal-open:focus-visible { outline-offset: -4px; }
.is-drag .gal-open { cursor: grabbing; }
html:not(.js) .gal-open { cursor: default; }
html:not(.js) .gal-row { padding-bottom: 12px; }
/* under the row, at its right end: the pause icon, then the two arrows */
.gal-bar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 14px; }
html:not(.js) .gal-bar { display: none; }
.gal-arrow {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition: background-color .16s, color .16s;
}
.gal-arrow:hover { background: var(--fg); color: var(--bg); }
.gal-arrow svg { display: block; width: 10px; height: 17px; }
.gal-arrow path { fill: none; stroke: currentColor; stroke-width: 1.6; }

@media (max-width: 699.98px) {
  .gal { --gh: 300px; }
}

/* Larger view */
.lb {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  align-items: center;
  padding: 60px 8px 24px;
  background: rgba(8, 9, 11, .97);
  color: var(--light);
  --focus: var(--signal);
}
.lb-fig { display: grid; justify-items: center; gap: 12px; min-width: 0; }
.lb-fig img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100svh - 170px); object-fit: contain; }
.lb-fig figcaption { margin: 0; max-width: 70ch; font-size: var(--t-run); color: var(--light); }
.lb-count { margin-left: 10px; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lb-close, .lb-nav {
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid rgba(246, 242, 228, .5);
  border-radius: 2px;
  background: var(--night);
  color: var(--light);
  cursor: pointer;
}
.lb-close { position: absolute; right: 12px; top: 10px; width: 44px; height: 44px; }
.lb-nav { justify-self: center; width: 44px; height: 64px; }
.lb-close:hover, .lb-nav:hover { background: var(--light); color: var(--night); }
.lb svg { display: block; }
.lb-close svg { width: 14px; height: 14px; }
.lb-nav svg { width: 12px; height: 20px; }
.lb path { fill: none; stroke: currentColor; stroke-width: 1.6; }
@media (max-width: 699.98px) {
  .lb { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 60px 12px 16px; row-gap: 12px; align-content: center; }
  .lb-fig { grid-column: 1 / -1; grid-row: 1; }
  .lb-prev { grid-row: 2; justify-self: end; width: 64px; height: 44px; }
  .lb-next { grid-row: 2; justify-self: start; width: 64px; height: 44px; }
  .lb-fig img { max-height: calc(100svh - 230px); }
}

/* =========================================================
   Use cases
   ========================================================= */

.apps-top { padding-bottom: 0; border-top: 1px solid var(--rule); }
.apps-h { margin-bottom: clamp(18px, 2.2vw, 28px); }

/* Eight picture cards with the name of the industry. The chosen one turns to paper and joins the sheet under it. */
.app-scroll { width: min(var(--wrap), 100% - 2 * var(--gut)); margin-inline: auto; }
.app-cards {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.app-cards li { display: flex; min-width: 0; }
.app-card {
  flex: 1;
  min-width: 0;
  display: flex; flex-direction: column;
  padding: 7px 7px 13px;
  border-top: 3px solid transparent;
  color: var(--light);
  text-decoration: none;
  transition: background-color .18s, color .18s;
}
.app-pic { aspect-ratio: 3 / 2; }
.app-pic img { transition: opacity .2s; }
.js .app-card .app-pic img { opacity: .66; }
.js .app-card:hover .app-pic img,
.js .app-card:focus-visible .app-pic img,
.js .app-card[aria-selected="true"] .app-pic img { opacity: 1; }
.app-ind { margin-top: 9px; font-size: .9375rem; font-weight: 600; line-height: 1.22; }
.app-card:hover { background: rgba(246, 242, 228, .08); }
.app-card[aria-selected="true"] { background: var(--paper); border-top-color: var(--signal); color: var(--night); }
.app-card:focus-visible { outline-offset: -5px; }
.app-card[aria-selected="true"]:focus-visible { outline-color: var(--night); }

@media (max-width: 1279.98px) {
  .app-scroll {
    width: auto;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gut);
    padding-inline: calc(var(--gut) - 8px);
    scrollbar-width: thin;
    scrollbar-color: var(--dim) transparent;
  }
  .app-cards { display: flex; width: max-content; }
  .app-cards li { width: 214px; scroll-snap-align: start; }
}

/* The open entry: the situation title, then the picture and the plan drawing side by side, at about one height.
   No text stands next to them: the four texts wait behind "More detail". */
.apps-sheet { padding-block: clamp(24px, 3vw, 40px) var(--sec-y); }
.fx-panel {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  grid-template-areas: "text text" "pic plan" "more more" "extra extra";
  gap: 18px clamp(20px, 2.4vw, 32px);
  align-items: start;
  scroll-margin-top: calc(var(--head-h) + 16px);
}
.fx-text { grid-area: text; }
.fx-pic { grid-area: pic; }
.fx-pic img { display: block; width: 100%; }
.fx-plan { grid-area: plan; border: 1px solid var(--rule-strong); }
.fx-more-row { grid-area: more; }
.fx-extra { grid-area: extra; padding-top: 16px; border-top: 1px solid var(--rule-strong); }
.js .fx-panel:not(.is-more) .fx-extra { display: none; }

/* the name of the industry stands on the chosen card; the entry repeats it only where there are no cards */
.js .fx-ind { display: none; }
.fx-ind { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; font-size: .9rem; font-weight: 600; }
.fx-ind::before {
  content: "";
  flex: none;
  width: 12px; height: 12px;
  border: 1.5px solid var(--night);
  border-radius: 50%;
  background: var(--signal);
}
.fx-title { font-size: clamp(1.5rem, 1.2vw + 1rem, 2.1rem); line-height: 1.1; }
.fx-facts { display: grid; gap: 14px; margin: 0; }
.fx-facts dt { margin-bottom: 4px; font-size: var(--t-cap); font-weight: 600; }
.fx-facts dd { margin: 0; font-size: 1rem; line-height: 1.5; }
.fx-facts .is-key dt::before {
  content: "";
  display: inline-block;
  width: 9px; height: 9px;
  margin-right: 8px;
  background: var(--signal);
  outline: 1px solid var(--night);
}

.fx-more-btn { gap: 10px; }
.fx-more-btn::after {
  content: "";
  flex: none;
  width: 11px; height: 11px;
  background:
    linear-gradient(currentColor, currentColor) 50% 50% / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 50% 50% / 1.5px 100% no-repeat;
}
.is-more .fx-more-btn::after { background: linear-gradient(currentColor, currentColor) 50% 50% / 100% 1.5px no-repeat; }
.t-less { display: none; }
.is-more .t-more { display: none; }
.is-more .t-less { display: inline; }

/* the four texts in reading order: situation, usual light, with a glowing column, evidence */
.fx-extra .fx-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px clamp(20px, 2.4vw, 32px); }
/* the road entry: one line stands before its evidence */
.fx-extra-line { display: block; margin-bottom: 6px; }

/* without JavaScript every entry stands open: its title, then its picture with the four texts beside it */
html:not(.js) .fx-panel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "text text" "pic extra"; }
html:not(.js) .fx-panel + .fx-panel { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--rule-strong); }
html:not(.js) .fx-plan, html:not(.js) .fx-more-row { display: none; }
html:not(.js) .fx-extra { padding-top: 0; border-top: 0; }
html:not(.js) .fx-extra .fx-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.plan { position: relative; aspect-ratio: 40 / 26; overflow: hidden; }
.plan svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.plan-tb {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 0;
  max-width: none;
  border-top: 1px solid var(--rule-strong);
  font-size: var(--t-cap);
  line-height: 1.35;
  color: var(--fg);
}
.plan-tb > * { padding: 7px 10px; }
.plan-tb > :first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--rule); }
.plan-key + .plan-key { border-left: 1px solid var(--rule); }
.plan-key { display: flex; align-items: flex-start; gap: 8px; }
.plan-key i {
  flex: none;
  width: 14px; height: 14px;
  margin-top: 2px;
  border-radius: 50%;
  border: 1px dashed var(--night);
  background: rgba(255, 237, 0, .62);
}
.plan-key.is-move i { background: rgba(255, 237, 0, .24); }
.plan-key b { font-weight: 600; }
.plan-key span { color: var(--fg2); }

/* Plan drawing styles (the SVG is built in js/plans.js). */
.pl-road { fill: rgba(14, 15, 18, .055); }
.pl-line { fill: none; stroke: var(--night); stroke-width: 1; }
.pl-thin { fill: none; stroke: var(--night); stroke-width: .6; }
.pl-mid { fill: none; stroke: var(--night); stroke-width: .7; opacity: .7; }
.pl-heavy { fill: none; stroke: var(--night); stroke-width: 1.5; stroke-linejoin: miter; }
.pl-solid { fill: var(--night); stroke: none; }
.pl-body { fill: var(--paper); stroke: var(--night); stroke-width: 1.1; stroke-linejoin: round; }
.pl-tint { fill: rgba(14, 15, 18, .05); stroke: none; }
.pl-hatch { stroke: var(--night); stroke-width: .6; opacity: .55; }
.pl-light-work { fill: var(--signal); opacity: .32; }
.pl-light-move { fill: var(--signal); opacity: .14; }
.pl-light { mix-blend-mode: multiply; }
.pl-ringline { fill: none; stroke: var(--night); stroke-width: .7; stroke-dasharray: 4 3; opacity: .75; }
.pl-tower { fill: var(--signal); stroke: var(--night); stroke-width: 1.4; }
.pl-centre { fill: none; stroke: var(--night); stroke-width: .6; stroke-dasharray: 8 2.5 1.5 2.5; opacity: .8; }
.pl-t { fill: var(--night); font-size: 11px; paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; }
.pl-t-dim { font-variant-numeric: tabular-nums; font-weight: 600; }
.pl-path { fill: none; stroke: var(--night); stroke-width: .7; stroke-dasharray: 2 5; opacity: .7; }
.pl-barrier { fill: none; stroke: var(--night); stroke-width: 2.2; stroke-dasharray: 6 3; }
.pl-scale-a { fill: var(--night); }
.pl-scale-b { fill: var(--paper); stroke: var(--night); stroke-width: 1; }

@media (max-width: 999.98px) {
  .fx-extra .fx-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================
   What is inside the base: the cutaway with its six points
   ========================================================= */

.inside-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 28px clamp(32px, 5vw, 72px);
  align-items: center;
}
.cut { justify-self: center; width: min(100%, 330px); }
.cut-view { position: relative; aspect-ratio: 2 / 3; outline: 1px solid var(--rule); }
.cut-view > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.cut-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.leaders path { fill: none; stroke: var(--light); stroke-width: 1; vector-effect: non-scaling-stroke; }
.leader-dots circle { fill: var(--night); stroke: var(--light); stroke-width: 2; vector-effect: non-scaling-stroke; }
.spot {
  position: absolute;
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  padding: 0;
  border: 0;
  background: none;
  display: grid; place-items: center;
  cursor: pointer;
}
.spot span, .part-n {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border: 1px solid var(--light);
  border-radius: 50%;
  background: var(--night);
  color: var(--light);
  font: 600 var(--t-tag)/1 "Geologica", sans-serif;
  font-variant-numeric: tabular-nums;
  transition: background-color .16s, color .16s, border-color .16s;
}
.spot:hover span, .spot.is-on span, .parts li.is-on .part-n {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--night);
}
html:not(.js) .spot { cursor: default; }

.parts {
  list-style: none;
  margin: 22px 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, 3vw, 48px);
  border-top: 1px solid var(--rule-strong);
}
.parts li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
}
.js .parts li { cursor: pointer; }
.parts h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: 0; line-height: 1.6; }
.parts p { font-size: var(--t-run); color: var(--fg2); }
.parts li.is-on p { color: var(--light); }
@media (max-width: 899.98px) {
  .inside-grid { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .inside-copy { display: contents; }
  .inside-h { order: 1; }
  .cut { order: 3; width: min(100%, 300px); margin-top: 22px; }
  .parts { order: 4; grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 560px) and (max-width: 899.98px) {
  .parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================
   Power: two sources side by side, each with its picture, its name and the same rows on shared row lines,
   so that they read across.
   ========================================================= */

.power-opts {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, 3vw, 48px);
}
.pw { display: grid; grid-row: span 7; grid-template-rows: subgrid; }
.pw-pic { aspect-ratio: 3 / 2; }
.pw h3 { margin: 18px 0 12px; font-size: 1.5rem; }
.pw-rows { margin: 0; display: grid; grid-row: span 5; grid-template-rows: subgrid; border-bottom: 1px solid var(--rule); }
.pw-row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
  column-gap: 20px;
  padding: 9px 0 11px;
  border-top: 1px solid var(--rule);
}
.pw-row:first-child { border-top-color: var(--rule-strong); }
.pw-row dt { font-size: var(--t-cap); line-height: 1.6; color: var(--fg2); }
.pw-row dd { margin: 0; font-size: var(--t-run); line-height: 1.4; }
.pw-row b { font-weight: 600; }
.pw-also { display: block; color: var(--fg2); }
.power-sep { margin-top: clamp(20px, 2.4vw, 30px); }
.power-quiet { margin-top: 6px; max-width: 86ch; font-size: var(--t-cap); color: var(--fg2); }

/* =========================================================
   Light coverage: one off and on pair, the coverage drawing with its one legend, the reference steps
   ========================================================= */

.light-h { margin-bottom: clamp(24px, 3vw, 40px); }
.light-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
  grid-template-areas: "pair cov lux";
  gap: 28px clamp(20px, 2.6vw, 40px);
  align-items: start;
}
.pair { grid-area: pair; }
.cov { grid-area: cov; }
.lux { grid-area: lux; }

.ba {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #000;
  user-select: none;
  -webkit-user-select: none;
  --p: 50%;
}
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none; }
.ba-clip { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.ba-lab {
  position: absolute;
  top: 12px;
  padding: 3px 8px 4px;
  background: var(--night);
  color: var(--light);
  font-size: var(--t-tag); font-weight: 600; line-height: 1.3;
}
.ba-lab-off { left: 12px; }
.ba-lab-on { right: 12px; }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; margin-left: -1px; background: var(--light); pointer-events: none; }
.ba-handle::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  border: 1px solid var(--light);
  border-radius: 50%;
  background: var(--night) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M17.5 15.5L11 22l6.5 6.5M26.5 15.5L33 22l-6.5 6.5' fill='none' stroke='%23F6F2E4' stroke-width='1.6'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.ba-range {
  position: absolute;
  top: 0; left: -22px;
  width: calc(100% + 44px);
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.ba-range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 400px; }
.ba-range::-moz-range-thumb { width: 44px; height: 400px; border: 0; }
.ba:has(.ba-range:focus-visible) .ba-handle::after { outline: 2px solid var(--signal); outline-offset: 3px; }
html:not(.js) .ba-range { display: none; }

.cov-view { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.cov-view > img {
  position: absolute;
  left: -38.89%; top: -38.89%;
  width: 177.78%; height: 177.78%;
  max-width: none;
  display: block;
}
.cov-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cov-c { fill: none; stroke: var(--signal); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.cov-c-move { stroke-dasharray: 7 5; }
.cov-centre { fill: none; stroke: var(--light); stroke-width: .7; stroke-dasharray: 10 3 2 3; opacity: .5; vector-effect: non-scaling-stroke; }
/* The one legend of the drawing: each circle is named once, with its own line as the key. */
.cov-key {
  list-style: none;
  margin: 14px 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
}
.cov-key li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
  align-content: start;
  padding-top: 10px;
  border-top: 1px solid var(--rule-strong);
}
.cov-sw { display: block; width: 20px; height: 20px; overflow: visible; }
.cov-sw circle { fill: none; stroke: var(--signal); stroke-width: 1.6; }
.is-move .cov-sw circle { stroke-dasharray: 3.4 2.6; }
.cov-key strong { font-weight: 300; font-size: 1.8rem; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cov-key span { grid-column: 1 / -1; margin-top: 3px; font-size: var(--t-cap); line-height: 1.3; color: var(--fg2); }

.lux-h { font-size: 1.4rem; }
.lux-scale {
  position: relative;
  list-style: none;
  height: 300px;
  margin: 22px 0 0;
  padding: 0;
  border-left: 1px solid var(--rule-strong);
}
.lux-scale li {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(var(--y) * 100%);
  padding-left: 28px;
  transform: translateY(50%);
}
.lux-scale li::before { content: ""; position: absolute; left: 0; top: 50%; width: 18px; height: 1px; background: var(--fg); }
.lux-scale li.is-range {
  top: 0;
  bottom: calc(var(--y) * 100%);
  display: flex; flex-direction: column; justify-content: center;
  transform: none;
}
.lux-scale li.is-range::before { top: 0; bottom: 0; left: -1px; width: 6px; height: auto; }
.lux-scale strong { display: block; font-weight: 300; font-size: 1.45rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.lux-scale span { display: block; font-size: var(--t-run); line-height: 1.3; color: var(--fg2); }
.lux-note { margin-top: 20px; font-size: var(--t-run); color: var(--fg2); max-width: 44ch; }

@media (max-width: 1099.98px) {
  .light-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "pair cov" "lux cov"; }
}
@media (max-width: 719.98px) {
  .light-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "pair" "cov" "lux"; }
  .lux-scale { height: 270px; }
}

/* =========================================================
   Specifications
   ========================================================= */

.specs-h { margin-bottom: clamp(20px, 2.6vw, 32px); }
.specs-grid {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 28px clamp(32px, 5vw, 72px);
  align-items: start;
}
.sheet-draw { position: sticky; top: calc(var(--head-h) + 20px); }
.sheet-svg { display: block; width: 100%; height: auto; border: 1px solid var(--rule-strong); }
/* The tower is white: the column is drawn light with an ink outline. Yellow marks only the ring in the plan view. */
.sd-l { fill: none; stroke: var(--night); stroke-width: 1.1; }
.sd-thin { stroke-width: .6; stroke-dasharray: 3 2; }
.sd-house { fill: rgba(14, 15, 18, .16); stroke: var(--night); stroke-width: 1.1; }
.sd-skirt { fill: var(--dim); stroke: var(--night); stroke-width: 1.1; }
.sd-col { fill: #FFFFFF; stroke: var(--night); stroke-width: 1.1; }
.sd-ringfill { fill: none; stroke: var(--signal); stroke-width: 10.25; }
.sd-centre { fill: none; stroke: rgba(14, 15, 18, .6); stroke-width: .6; stroke-dasharray: 10 3 2 3; }
.sd-proj { fill: none; stroke: rgba(14, 15, 18, .55); stroke-width: .6; stroke-dasharray: 3 3; }
.sd-hatch { stroke: rgba(14, 15, 18, .5); stroke-width: .7; }
.sd-dim path { fill: none; stroke: var(--night); stroke-width: .6; }
.sd-dim .sd-tick { stroke-width: 1; }
.sd-dim text { fill: var(--night); font-size: 12px; font-variant-numeric: tabular-nums; }
.sd-view { fill: rgba(14, 15, 18, .74); font-size: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .js .sheet-draw .sd-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .sheet-draw.is-in .sd-draw { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s var(--ease); }
  .js .sheet-draw .sd-col, .js .sheet-draw .sd-skirt, .js .sheet-draw .sd-house { fill-opacity: 0; }
  .js .sheet-draw.is-in .sd-col, .js .sheet-draw.is-in .sd-skirt, .js .sheet-draw.is-in .sd-house { fill-opacity: 1; transition: stroke-dashoffset 1.3s var(--ease), fill-opacity .6s ease .9s; }
  .js .sheet-draw .sd-ringfill, .js .sheet-draw .sd-dim text { opacity: 0; }
  .js .sheet-draw.is-in .sd-ringfill, .js .sheet-draw.is-in .sd-dim text { opacity: 1; transition: opacity .6s ease 1s; }
}

.specs-table table { width: 100%; border-collapse: collapse; font-size: var(--t-run); }
.specs-table th, .specs-table td {
  padding: 8px 18px 9px 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
  line-height: 1.36;
}
.specs-table thead th {
  padding-block: 7px;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  font-size: var(--t-cap); font-weight: 600;
}
.specs-table tbody th { width: 27%; font-weight: 400; }
.specs-table tbody td:nth-child(2) { width: 39%; font-weight: 600; font-variant-numeric: tabular-nums; }
.specs-table tbody td:last-child { padding-right: 0; }
.specs-table tr.is-open th, .specs-table tr.is-open td { color: var(--fg2); }
.specs-table tr.is-open td:nth-child(2) { font-weight: 400; }
.specs-note { margin-top: 14px; font-size: var(--t-run); color: var(--fg2); }

@media (max-width: 999.98px) {
  .specs-grid { grid-template-columns: minmax(0, 1fr); }
  .sheet-draw { position: static; width: min(100%, 300px); }
}
@media (max-width: 699.98px) {
  /* Phone: one compact row per figure. Name on the left, value on the right. */
  .specs-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .specs-table table, .specs-table tbody { display: block; }
  .specs-table tbody { border-top: 1px solid var(--rule-strong); }
  .specs-table tr {
    display: grid;
    grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
    column-gap: 14px;
    padding: 9px 0 10px;
    border-bottom: 1px solid var(--rule);
  }
  .specs-table th, .specs-table td { display: block; width: auto !important; padding: 0; border: 0; }
  .specs-table tbody th { grid-row: 1 / span 2; color: var(--fg2); }
  .specs-table tbody td { grid-column: 2; }
  .specs-table tbody td:last-child { margin-top: 2px; }
}

/* =========================================================
   Quote request
   ========================================================= */

.demo-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 32px clamp(36px, 6vw, 96px);
  align-items: start;
}
.demo-lede { margin-top: 18px; font-weight: 300; font-size: 1.3rem; line-height: 1.38; }
.demo-sub { margin: 30px 0 10px; font-size: var(--t-cap); font-weight: 600; letter-spacing: 0; }
.demo-steps { list-style: none; counter-reset: d; margin: 0; padding: 0; border-top: 1px solid var(--rule-strong); }
.demo-steps li {
  counter-increment: d;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: baseline;
  padding: 12px 0 13px;
  border-bottom: 1px solid var(--rule);
}
.demo-steps li::before { content: counter(d); font-weight: 300; font-size: 1.5rem; line-height: 1; font-variant-numeric: tabular-nums; }

.demo-formwrap { padding: clamp(18px, 2.4vw, 32px); border: 1px solid var(--rule-strong); }
.demo-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.field-wide, .demo-form noscript { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: 5px; font-size: var(--t-cap); font-weight: 600; }
.field input, .field select, .field textarea {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 9px 12px;
  border: 1px solid var(--dim);
  border-radius: 2px;
  background: transparent;
  color: var(--light);
  font: 400 1rem/1.4 "Geologica", sans-serif;
}
.field textarea { resize: vertical; }
.field select {
  -webkit-appearance: none; appearance: none;
  padding-right: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F6F2E4' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center;
}
.field select option { background: var(--night); color: var(--light); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--light); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; border-color: var(--light); }
.field [aria-invalid="true"] { border-color: var(--signal); }
.field-err { margin-top: 5px; font-size: var(--t-run); color: var(--signal); }
.form-end { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 4px; }
/* next to the button: the trust line, then the small print */
.trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; font-size: var(--t-run); line-height: 1.4; }
.trust li + li::before { content: "·"; margin: 0 .7em; }
.form-small { margin-top: 2px; font-size: var(--t-run); line-height: 1.4; color: var(--fg2); }
.form-done { padding: 18px 20px; border: 1px solid var(--signal); font-size: 1.1rem; line-height: 1.45; }
.form-done:focus-visible { outline-offset: 4px; }
.form-done a:not(.btn) { color: inherit; text-decoration: underline; text-underline-offset: .18em; }
.form-alt { margin-top: 10px; font-size: var(--t-run); color: var(--fg2); }
.form-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.form-text { display: block; width: 100%; margin-top: 16px; padding: 9px 12px; border: 1px solid var(--dim); border-radius: 2px; background: transparent; color: var(--light); font: 400 1rem/1.4 "Geologica", sans-serif; resize: vertical; }

@media (max-width: 899.98px) {
  .demo-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 559.98px) {
  .demo-form { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   Questions
   ========================================================= */

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 24px clamp(32px, 5vw, 80px);
  align-items: start;
}
.faq-list { border-top: 1px solid var(--rule-strong); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 54px;
  padding: 10px 0;
  font-size: 1.1rem;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 15px; height: 15px;
  background:
    linear-gradient(var(--night), var(--night)) 50% 50% / 100% 1.5px no-repeat,
    linear-gradient(var(--night), var(--night)) 50% 50% / 1.5px 100% no-repeat;
  transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--fg2); }
.faq details p { max-width: 66ch; padding: 0 44px 20px 0; color: var(--fg2); }

@media (max-width: 899.98px) {
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   Closing: the heading and the button, on the page's two-column head grid. Nothing else.
   ========================================================= */

.closing-in {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 22px clamp(32px, 5vw, 72px);
  align-items: end;
}
.closing-in h2 { max-width: 16em; }
.closing-act { margin: 0; }
@media (max-width: 899.98px) {
  .closing-in { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   Footer: one small wordmark and four lines. No links.
   ========================================================= */

.site-foot {
  padding: clamp(28px, 3.4vw, 44px) 0 28px;
  border-top: 1px solid var(--rule);
  font-size: var(--t-run);
  color: var(--fg2);
}
/* The footer carries the full logo once: the word with the tower standing over its first O (the O is the tower seen from above). */
.foot-lockup { display: block; width: 200px; height: auto; aspect-ratio: 808.02 / 685.88; margin-bottom: 22px; color: var(--light); }
.site-foot p { max-width: 100ch; }
.site-foot p + p { margin-top: 4px; }
.site-foot .foot-last { margin-top: 16px; font-size: var(--t-cap); }

/* =========================================================
   Parts used by several sections: the mark on pictures made with AI, rows that open on phones
   ========================================================= */

/* The mark on a picture made with AI: two letters in a corner of the picture itself, always shown.
   One small component: restyle or move it here. */
.fx-pic, .pic { position: relative; }
.ai-mark {
  position: absolute;
  left: 8px; bottom: 7px;
  z-index: 1;
  font-size: .8125rem; font-weight: 600; line-height: 1; letter-spacing: .08em;
  color: rgba(246, 242, 228, .94);
  text-shadow: 0 0 2px rgba(14, 15, 18, .95), 0 1px 5px rgba(14, 15, 18, .8);
  pointer-events: none;
}

/* a row that opens the rest of a section: shown on phones only */
.more-line { display: none; margin: 0; }
.plan-scale { color: var(--fg2); }
/* the title of the current stage on the picture: phones only, where the list of stages is not shown */
.tk-stage { display: none; }

/* =========================================================
   Phones, below 768 px. One idea per screen: a large heading, a picture or a figure, one short text.
   The rest of a section sits behind one row with a plus sign, "More" and "Less".
   ========================================================= */
@media (max-width: 767.98px) {
  body, .page { font-size: 1.125rem; line-height: 1.5; }
  h2 { font-size: 1.9rem; line-height: 1.1; }
  h3 { font-size: 1.3rem; }
  .sec-head { margin-bottom: 16px; }
  .mini-btn { font-size: .9375rem; }

  /* ----- rows that open ----- */
  .js .more-line { display: block; }
  .more-row, .js .fx-more-btn {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%;
    min-height: 54px;
    padding: 6px 0;
    border: 0;
    border-top: 1px solid var(--rule-strong);
    border-bottom: 1px solid var(--rule-strong);
    border-radius: 0;
    background: none;
    color: var(--fg);
    font: 600 1.0625rem/1.25 "Geologica", sans-serif;
    text-align: left;
    cursor: pointer;
  }
  .more-row:hover, .js .fx-more-btn:hover { background: none; color: var(--fg); }
  .more-s { display: flex; align-items: center; gap: 10px; margin-left: auto; font-size: .9375rem; }
  .more-t + .more-s { font-weight: 500; color: var(--fg2); }
  .more-s::after, .js .fx-more-btn::after {
    content: "";
    flex: none;
    width: 15px; height: 15px;
    background:
      linear-gradient(var(--fg), var(--fg)) 50% 50% / 100% 2px no-repeat,
      linear-gradient(var(--fg), var(--fg)) 50% 50% / 2px 100% no-repeat;
  }
  .is-more-open .more-s::after, .js .is-more .fx-more-btn::after { background: linear-gradient(var(--fg), var(--fg)) 50% 50% / 100% 2px no-repeat; }
  .more-row .t-less, .is-more-open .more-row .t-more { display: none; }
  .is-more-open .more-row .t-less { display: inline; }
  .js [data-more-scope]:not(.is-more-open) .more-body { display: none; }
  .more-body { margin-top: 16px; }

  /* ----- pairs of a large value and a short name ----- */
  .pairs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
  .pairs li { display: grid; padding-top: 10px; border-top: 1px solid var(--rule-strong); }
  .pairs strong { font-weight: 300; font-size: 1.8rem; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .pairs span { margin-top: 2px; font-size: .9375rem; line-height: 1.3; color: var(--fg2); }

  /* ----- menu: a full-screen list in large type ----- */
  /* the page does not scroll under the open menu. Only the root is held: a held <body> would become its own
     scroll box, and the header, which sticks to the screen, would go up with the page */
  .nav-open { overflow: hidden; }
  .js .site-nav {
    position: fixed;
    left: 0; right: 0; top: var(--head-h); bottom: 0;
    padding: 4px var(--gut) 28px;
    overflow-y: auto;
    border: 0;
    background: var(--night);
  }
  .js .site-nav li a {
    width: 100%; height: auto; min-height: 62px;
    padding: 8px 0;
    line-height: 1.15;
    border: 0; border-bottom: 1px solid rgba(141, 140, 134, .34);
    font-size: 1.75rem; font-weight: 300; letter-spacing: -.01em;
  }
  .js .nav-toggle { font-size: .9375rem; }
  /* every section by its heading */
  .js .nav-d { display: none; }
  .js li.nav-m { display: block; }
  .js span.nav-m { display: inline; }
  /* while the menu is open the quote bar stays at the bottom, under the list: it stands for the quote section */
  .js .site-nav { padding-bottom: 96px; }
  .js .site-nav .nav-cta { display: none; }
  .nav-open .demo-bar, .nav-open .demo-bar[hidden] { display: block; transform: none; visibility: visible; z-index: 80; }

  /* ----- why: the drawing, two titles and one line each; the facts wait behind a row ----- */
  .why > .wrap { display: flex; flex-direction: column; }
  .why-h { margin-bottom: 16px; }
  .facts-h { display: none; }
  /* the two titles and their lines say what the drawing shows: its own small lettering is left out */
  .cz-t, .cz-view, .cz-lead { display: none; }
  .why .compare { order: 2; }
  .why .more-line { order: 3; margin-top: 10px; }
  .why .why-facts { order: 4; margin-bottom: 0; }
  .why .evidence-line { order: 5; margin-top: 18px; }
  .cmp h3 { margin-top: 10px; font-size: 1.3rem; }
  .cmp p { font-size: 1.0625rem; line-height: 1.4; }
  .cmp-panels { gap: 16px; }
  .why-fact { font-size: 1.125rem; }

  /* ----- fits in a van, carried by hand: heading, the square clip from edge to edge, then the van picture from edge to edge ----- */
  .carry-in > h2 { margin-bottom: 16px; }
  .boot { margin-top: 10px; }
  .boot-pic { margin-inline: calc(-1 * var(--gut)); }
  .clip-view { margin-inline: calc(-1 * var(--gut)); }
  .js .clip-view { aspect-ratio: 1 / 1; }
  /* The square cut frames each shot around its subject, so the free corner is low: under the tower in her arms
     and under the button. The bars stand over one row: the value, and beside it the step and the label. */
  .clip-step {
    left: var(--gut); bottom: 12px;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas: "bars bars" "fig title" "fig lab";
    column-gap: 12px;
    justify-content: start;
  }
  .clip-bars { grid-area: bars; margin-bottom: 8px; }
  .clip-bars i { width: 24px; }
  .clip-step .clip-fig { grid-area: fig; align-self: end; margin: 0 0 -3px; font-size: 2.6rem; line-height: 1; }
  .clip-step .clip-title { grid-area: title; align-self: end; margin: 0; gap: 8px; font-size: 1.0625rem; line-height: 1.2; }
  .clip-n { width: 22px; height: 22px; }
  .clip-step .clip-lab { grid-area: lab; margin: 0; font-size: .9375rem; line-height: 1.25; }
  .clip-toggle { right: 4px; bottom: 4px; }
  .clip-steps { grid-template-columns: minmax(0, 1fr); margin-top: 12px; }
  .clip-steps li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; padding: 9px 0; }
  .clip-steps h3 { font-size: 1.125rem; }
  .clip-steps p { grid-column: 1 / -1; margin-top: 2px; font-size: 1.0625rem; }

  /* ----- recent photos ----- */
  .gal-h { margin-bottom: 16px; }

  /* ----- use cases: cards with the industry name, then the open entry ----- */
  .apps-h { margin-bottom: 14px; }
  .app-ind { font-size: 1rem; }
  .fx-panel, html:not(.js) .fx-panel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "pic" "text" "more" "extra" "plan"; gap: 14px; padding-top: 16px; }
  .fx-title { font-size: 1.5rem; }
  /* the plan drawing waits behind the row, after the four texts */
  .js .fx-panel:not(.is-more) .fx-plan { display: none; }
  .fx-facts dt { font-size: .9375rem; }
  .fx-facts dd { font-size: 1.125rem; line-height: 1.45; }
  .fx-extra, html:not(.js) .fx-extra { padding-top: 0; border: 0; }
  .fx-extra .fx-facts, html:not(.js) .fx-extra .fx-facts { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .plan-tb { grid-template-columns: minmax(0, 1fr); font-size: .9375rem; }
  .plan-tb > :first-child { grid-column: auto; border-bottom: 0; }
  .plan-key + .plan-key, .plan-tb > * + * { border-left: 0; border-top: 1px solid var(--rule); }

  /* ----- how it goes up: the stopwatch and the current stage on the picture, its text under the picture ----- */
  .take { grid-template-areas: "mark" "h" "view" "stages"; }
  .take-title h2 { margin-bottom: 16px; }
  .tk-watch { position: static; width: auto; padding: 8% 0 0 3.2%; }
  .js .tk-stage { display: block; margin: 8px 0 0; max-width: 7em; font-size: 1.125rem; font-weight: 600; line-height: 1.2; }
  .tk-note { display: none; }   /* on a phone the picture keeps the stopwatch, the stage and the call-outs */
  .tk-watch-top { font-size: .9375rem; }
  .ruler-s { font-size: .875rem; }
  .tk-call { font-size: .9375rem; }
  .tk-cap { font-size: .9375rem; }
  .js .take-stages { display: block; margin-top: 12px; min-height: 3.4em; }
  .js .take-stages li { display: none; padding: 0; border: 0; }
  .js .take-stages li.is-shown { display: block; }
  .js .take-stages li.is-shown h3 { display: none; }
  .js .take-stages li.is-shown p, .js .is-live .take-stages li.is-shown p { margin: 0; padding: 0; font-size: 1.125rem; line-height: 1.45; color: var(--fg); }
  .take-stages p { font-size: 1.125rem; }

  /* ----- inside the base: one point at a time ----- */
  .cut { width: min(100%, 236px); margin-top: 16px; }
  .js .parts { display: block; margin-top: 14px; min-height: 4.4em; border-top: 0; }
  .js .parts li { display: none; }
  .js .parts li.is-on { display: grid; padding: 0; border: 0; }
  .parts h3 { font-size: 1.2rem; }
  .parts p, .parts li.is-on p { font-size: 1.125rem; color: var(--fg); }
  .part-n, .spot span { font-size: .875rem; }

  /* ----- light coverage: the slider, the drawing with its legend; the reference levels wait behind a row ----- */
  .light-h { margin-bottom: 16px; }
  .light-row { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: none; gap: 14px; }
  .light-row > * { grid-area: auto; min-width: 0; }
  .ba-lab { font-size: .9375rem; }
  .cov-key { margin-top: 12px; }
  .lux-h { display: none; }
  .lux-scale strong { font-size: 1.125rem; }
  .lux-scale span { font-size: 1rem; }
  .lux-note { font-size: .9375rem; }

  /* ----- power: two cards, one under the other, each with its picture, its name and two figures;
     the other rows and the two closing lines wait behind a row ----- */
  .power-opts { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .pw { display: block; }
  .pw h3 { margin: 12px 0 8px; font-size: 1.3rem; }
  .pw-rows { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0 16px; border-bottom: 0; }
  /* a large value with its short name under it; the names of the two figures stand on one line */
  .pw-row { display: flex; flex-direction: column-reverse; justify-content: space-between; padding: 8px 0 0; border-top: 1px solid var(--rule-strong); }
  .pw-row dd { font-size: 1.125rem; line-height: 1.3; }
  .pw-row dd b { display: block; font-weight: 300; font-size: 1.5rem; line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .pw-row dd span { font-size: .9375rem; }
  .pw-row dt { margin-top: 3px; font-size: .9375rem; line-height: 1.3; }
  .power .pw-row.more-body { grid-column: 1 / -1; margin-top: 12px; }
  .power .pw-also.more-body { margin-top: 2px; }
  .power-sep { margin-top: 18px; }
  .power-quiet { font-size: .9375rem; }
  .power .more-line { margin-top: 18px; }

  /* ----- specifications: eight pairs; the table waits behind a row and reads as pairs too ----- */
  .specs-h { margin-bottom: 18px; }
  .spec-pairs { margin-bottom: 22px; }
  .specs-grid { display: block; }
  .sheet-draw { max-width: 280px; margin: 0 auto 18px; }
  .specs-table thead { display: none; }
  .specs-table table, .specs-table tbody, .specs-table tr, .specs-table th, .specs-table td { display: block; width: auto; }
  .specs-table tr { padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .specs-table tbody th { padding: 0; border: 0; font-size: .9375rem; font-weight: 500; color: var(--fg2); }
  .specs-table tbody td { padding: 2px 0 0; border: 0; font-size: 1.125rem; }
  .specs-note { font-size: .9375rem; }

  /* ----- quote: the text and the form ----- */
  .demo-sub, .demo-steps { display: none; }
  .demo-lede { margin-top: 12px; font-size: 1.125rem; font-weight: 400; }
  .demo-formwrap { padding: 0; border: 0; margin-top: 4px; }
  .demo-form { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .field label { font-size: .9375rem; }
  .field input, .field select, .field textarea { font-size: 1.0625rem; min-height: 46px; }
  .field label { margin-bottom: 3px; }
  .field textarea { min-height: 64px; height: 64px; }
  .field-err, .form-small { font-size: .9375rem; }
  .trust { font-size: 1rem; }
  .form-end .btn { width: 100%; }
  .form-notes { width: 100%; }

  /* ----- questions ----- */
  .faq summary { min-height: 50px; padding-block: 9px; font-size: 1.125rem; }
  .faq details p { padding-right: 0; font-size: 1.125rem; }

  /* ----- closing: the heading, then the button across the screen ----- */
  .closing { padding-block: 36px; }
  .closing-in { gap: 18px; }
  .closing-act .btn { width: 100%; }

  /* ----- footer: the last lines may be small ----- */
  .site-foot { font-size: .9375rem; }
  .foot-lockup { width: 176px; margin-bottom: 18px; }
  .site-foot .foot-last { margin-top: 12px; font-size: .8125rem; }

  /* ----- hero: the one line of text ----- */
  .lede { font-size: 1.125rem; }
}