/* The home page, section by section, on the design system (css/cantic.css) and the hero film
   (css/hero.css). This sheet holds only what the home page adds: the latest line in the hero, the
   Eclipse loop beside the statement and its system strip, the field map, the source columns and
   segment tiles, the French attack, the console vignettes (js/vignettes.js), the track record, the
   steps and the cards to read next.
   Sizes come from the design system's tokens, so the page scales with the screen like every other. */

/* The hero's latest line (the generator writes it between the gen:latest fences): the label and
   the date in the film's mono, the article's title in the sans, the link to it underlined. Under
   1200 px the title steps aside for screen readers only, so the bottom row stays one quiet line. */

.hud-latest {
  flex: 1 1 26em;
  max-width: 62em;
  margin: 0;
  font: 400 14px/1.5 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}

@media (min-width: 1200px) {
  .hud-latest {
    white-space: nowrap;
  }
}

.hud-latest__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 4px 2px 0;
  border-radius: 50%;
  background: var(--signal);
  font-size: 0;
  vertical-align: middle;
}

.hud-latest a {
  position: relative;
  color: #fff;
}

/* a 44 px target round the 12 px link */
.hud-latest a::after {
  content: '';
  position: absolute;
  inset: calc(50% - 22px) 0;
}

.hud-latest__title {
  font: 400 18px/1.5 var(--sans);
  letter-spacing: -.005em;
  text-transform: none;
}

.hud-latest__more {
  margin-left: .4em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  white-space: nowrap;
}

@media (hover: hover) {
  .hud-latest a:hover .hud-latest__more {
    text-decoration-thickness: 2px;
  }
}

.hud-latest a:focus-visible {
  outline: none;
}

.hud-latest a:focus-visible .hud-latest__more {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 2px;
}

@media (max-width: 1199px) {
  .hud-latest__title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .hud-latest__more {
    margin-left: 0;
  }

  /* Without the title, the link takes its own line under the date, so the line never ends on a
     separator with the link alone below it (768 to 900 px) */
  .hud-latest time + [aria-hidden] {
    display: none;
  }

  .hud-latest a {
    display: table;
    margin-top: 2px;
  }
}

/* The headline in three lines in both languages on wide screens: the Spanish one would otherwise run
   two long lines to 72% of the width, over the film's subjects and the eclipse's proof bracket. */
@media (min-width: 768px) and (min-aspect-ratio: 4/5) {
  .film[data-film='world'] .film__title {
    max-width: 12.5em;
  }
}

/* Phones: the home hero carries the industry picker as well as the industry pages' copy, so its
   headline and sub-line take a size smaller than theirs. The whole hero then fits an 844 px screen in
   both languages (the Spanish sub-line ran a seventh line and pushed the bottom row off it), and the
   film keeps a band under the copy a little deeper than the industry pages give theirs. */
@media (max-width: 767px) {
  .film[data-film='world'] .film__title {
    font-size: 33px;
  }

  .film[data-film='world'] .film__lead {
    font-size: 17px;
  }

  .film[data-film='world'] .film__copy {
    --film-room: clamp(130px, 21svh, 230px);
  }
}

/* Phones: the note and the pause control share the row below, edge to edge. */
@media (max-width: 767px) {
  .film__aside {
    flex: 1 1 100%;
    justify-content: space-between;
    margin-left: 0;
  }
}

/* The statement, then the system strip */

.home-strip {
  margin-top: var(--sp-144);
}

.home-strip .eyebrow {
  margin-bottom: var(--sp-48);
}

/* a label that takes two lines ("Cold rooms" on a phone) leaves the others in its row where they are */
.home-strip .strip li {
  align-content: start;
}

/* the Spanish labels hold words longer than a phone's quarter column ("Aplicaciones", "Servidores"):
   two columns there, so no label runs into the next */
@media (max-width: 559px) {
  .home-strip:lang(es) .strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The Eclipse loop, beside the statement's lead: a ring of points with four stations, in the order the
   lead tells them (finds the way in, proves it, Fortify writes the fix, attacks again), and the red
   bracket going round from one to the next (js/home.js draws it on two canvases over the figure).
   The words are HTML in the page's language, one in each corner; the ring sits between them. Without
   the script the figure shows its still picture (an SVG of the same ring, every station lit and the
   bracket on the first); under reduced motion the script draws that same still frame.
   Phones and tablets: between the statement and the lead, smaller. From 992 px: in the empty columns
   left of the lead. */

.eloop {
  --d: min(64vw, 260px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-column: 1 / -1;
  align-items: end;
  column-gap: var(--sp-16);
  row-gap: clamp(14px, 1.25vw, 24px);
  margin-top: var(--sp-96);
}

.eloop__stage {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
  width: min(100%, var(--d));
  aspect-ratio: 1;
}

.eloop__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--fg);
  stroke-linecap: round;
}

.eloop__still .eloop__n {
  fill: var(--fg);
  stroke: none;
}

.eloop__still .eloop__o {
  stroke-width: .3;
  opacity: .5;
}

.eloop__still .eloop__b {
  stroke: var(--signal);
  stroke-width: .675;
  stroke-linecap: butt;
}

/* the canvases cover the whole figure, so the leaders reach the words */
.eloop__cv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.eloop.is-live .eloop__still {
  visibility: hidden;
}

.eloop__stops {
  display: contents;
}

/* Each station's words on a plate of the page's own white, so no point of the ring runs through them;
   the top two sit over the ring, the bottom two under it, and lines break evenly on narrow screens. */
.eloop__stop {
  position: relative;
  z-index: 1;
  max-width: 100%;
  padding-block: 2px;
  background: var(--bg);
  font: 400 var(--fs-label)/1.4 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--fg);
}

/* the top row shares its width unevenly: the second station's words are short in both languages, and
   a clear gap keeps the two from reading as one line */
.eloop__stop:nth-child(1) {
  grid-area: 1 / 1 / 2 / -1;
  max-width: calc(100% - 12em);
}

.eloop__stop:nth-child(2) {
  grid-area: 1 / 1 / 2 / -1;
  justify-self: end;
  max-width: 9.5em;
  text-align: right;
}

.eloop__stop:nth-child(3) {
  grid-area: 3 / 2;
  align-self: start;
  justify-self: end;
  text-align: right;
}

.eloop__stop:nth-child(4) {
  grid-area: 3 / 1;
  align-self: start;
}

.eloop__stop:nth-child(1),
.eloop__stop:nth-child(4) {
  justify-self: start;
}

.eloop__word,
.eloop__sub {
  display: block;
}

.eloop__sub {
  color: var(--fg-2);
}

/* Without the script the words carry their own rule, where the canvas would draw it. */
html:not(.js) .eloop__stop:nth-child(-n + 2) {
  border-bottom: 1px solid var(--fg);
}

html:not(.js) .eloop__stop:nth-child(n + 3) {
  border-top: 1px solid var(--fg);
}

/* Live: a station is grey until the bracket reaches it, black once it has, and red while it is there. */
.eloop.is-live .eloop__stop {
  color: var(--fg-2);
  transition: color .35s var(--ease-io);
}

.eloop.is-live .eloop__stop.is-on {
  color: var(--fg);
}

.eloop.is-live .eloop__stop.is-now .eloop__word {
  color: var(--signal-on-light);
}

/* phones: the bottom row leans right, where the longer words are, and the tracking eases a little */
@media (max-width: 767px) {
  .eloop {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  }

  .eloop__stop {
    letter-spacing: .08em;
  }
}

@media (min-width: 768px) {
  .eloop {
    --d: clamp(232px, 20.833vw, 400px);
    width: 100%;
    max-width: 480px;
  }
}

/* Beside the lead: the five columns left of it, a free column between them, centred on the lead. */
@media (min-width: 992px) {
  .home-statement .statement__lead {
    grid-row: 2;
    align-self: start;
  }

  .home-statement .eloop {
    grid-row: 2;
    grid-column: 1 / span 5;
    align-self: start;
    max-width: none;
    margin-top: clamp(48px, 5vw, 96px);
  }
}

/* Field to shelf: the map, on a dot grid. Across the top, the outside firms that reach the plant from
   their own offices and phones, with their remote access; under them the internet, one line; under it
   every site of the business hanging from its own door, each drawn in line and points with its systems
   as chips. The firms' dashed red lines run through the internet into the plant, the cold store and the
   office they look after.
   Everything is HTML and CSS, so the map is whole without the script and under reduced motion: the
   lines are the pseudo-elements of the parts they join, sized from the same tokens as the layout.
   js/home.js only draws it in (class is-armed, then is-in on each part as it comes into view) and runs
   the red pulses and the bracket that snaps onto one way in at a time (is-live).
   From 1200 px the sites stand side by side, six columns shared by the firms above them. Below, they
   read top to bottom: the internet down the left with a branch to each site, the firms' red line down
   the right with a branch into each site they reach. */

.fmap {
  --fm-pl: 30px;
  --fm-pr: 22px;
  --fm-art: 120px;
  --fm-chip: clamp(12px, .903vw, 17.33px);
  --fm-dot: rgba(255, 255, 255, .58);
  --fm-red: var(--signal);
  margin-top: var(--sp-96);
}

.fmap__stage {
  position: relative;
  isolation: isolate;
  padding: 0 var(--fm-pr) 0 var(--fm-pl);
}

/* The firms */

.fmap__firms {
  position: relative;
  display: grid;
  gap: 14px;
  margin: 0 calc(-1 * var(--fm-pr)) 28px calc(-1 * var(--fm-pl));
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #0b0b0b;
  transition: border-color .3s var(--ease-io);
}

.fmap__name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-card-body);
  line-height: 1.3;
  letter-spacing: -.01em;
}

.fmap__node {
  width: 16px;
  height: 16px;
  color: var(--fg);
}

.fmap__who {
  display: grid;
  gap: 8px;
}

.fmap__firm {
  position: relative;
  padding-left: 26px;
  font-size: var(--fs-card-body);
  line-height: 1.3;
  color: var(--fg);
}

/* each firm's mark: a small red node, where its line leaves */
.fmap__firm::before {
  content: '';
  position: absolute;
  left: 4px;
  top: calc(.65em - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fm-red);
  box-shadow: 0 0 0 3px #0b0b0b, 0 0 0 4px rgba(255, 77, 46, .45);
}

.fmap__state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  min-height: 26px;
  padding-block: 4px;
}

.fmap__via {
  font: 400 var(--fs-label)/1.2 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-2);
}

/* The internet: its word, and the line (drawn by the stage and the sites below) */

.fmap__net {
  position: relative;
  height: 30px;
  font: 400 var(--fs-label)/1.2 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg);
}

.fmap__net span {
  position: relative;
  z-index: 1;
  margin-left: calc(-1 * var(--fm-pl));
}

/* The sites */

.fmap__places {
  position: relative;
  isolation: isolate;
  display: grid;
}

/* the ground: a dot grid like the film's network, fading out towards its edges */
.fmap__places::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -30px calc(-1 * var(--fm-pr)) -24px calc(-1 * var(--fm-pl));
  background: radial-gradient(circle, rgba(255, 255, 255, .17) 0 .9px, transparent 1.3px) 0 0 / 22px 22px;
  -webkit-mask: radial-gradient(ellipse 72% 70% at 50% 45%, #000 50%, transparent 100%);
  mask: radial-gradient(ellipse 72% 70% at 50% 45%, #000 50%, transparent 100%);
  pointer-events: none;
}

.fmap__place {
  position: relative;
  padding-bottom: 36px;
  outline-offset: 14px;
  border-radius: 2px;
  transition: opacity .3s var(--ease-io);
}

.fmap__art {
  position: relative;
  width: var(--fm-art);
  color: var(--fg);
}

.fmap__art svg,
.fmap__glyph {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fmap__art svg *,
.fmap__glyph * {
  vector-effect: non-scaling-stroke;
  transition: stroke .3s var(--ease-io), stroke-opacity .3s var(--ease-io);
}

.fmap__art .l,
.fmap__glyph .l {
  stroke-width: 1.15;
  stroke-opacity: .8;
}

.fmap__art .f,
.fmap__glyph .f {
  stroke-width: 1;
  stroke-opacity: .42;
}

.fmap__art .d,
.fmap__glyph .d {
  stroke-width: 1.6;
  stroke-dasharray: 0 3.4;
  stroke-opacity: .55;
}

.fmap__art .a,
.fmap__glyph .a {
  stroke-width: 1.25;
  stroke-opacity: .95;
}

/* the site's node, where its line from the internet arrives */
.fmap__art::before {
  content: '';
  position: absolute;
  z-index: 1;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--fg);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px rgba(255, 255, 255, .45);
  transition: background-color .3s var(--ease-io), box-shadow .3s var(--ease-io);
}

.fmap__place .fmap__name {
  display: block;
  margin-top: 16px;
}

.fmap__kinds {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
}

/* a system: a chip in the film's mono, legible on the black */
.fmap__kinds li {
  position: relative;
  padding: 6px 8px 5px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 4px;
  background: var(--bg);
  font: 400 var(--fm-chip)/1.3 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .84);
  transition: color .3s var(--ease-io), border-color .3s var(--ease-io);
}

/* the way in: the red bracket snaps onto one system, its words turn red */
.fmap__kinds li::after {
  content: '';
  position: absolute;
  inset: -4px;
  --c: var(--fm-red);
  background:
    linear-gradient(var(--c), var(--c)) left top / 9px 2.25px,
    linear-gradient(var(--c), var(--c)) left top / 2.25px 9px,
    linear-gradient(var(--c), var(--c)) right top / 9px 2.25px,
    linear-gradient(var(--c), var(--c)) right top / 2.25px 9px,
    linear-gradient(var(--c), var(--c)) left bottom / 9px 2.25px,
    linear-gradient(var(--c), var(--c)) left bottom / 2.25px 9px,
    linear-gradient(var(--c), var(--c)) right bottom / 9px 2.25px,
    linear-gradient(var(--c), var(--c)) right bottom / 2.25px 9px;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.3);
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
  pointer-events: none;
}

.fmap__kinds li:is([data-way], .is-way) {
  border-color: rgba(255, 77, 46, .5);
  /* half as heavy again as the grey chips' outline, without moving the chip */
  box-shadow: inset 0 0 0 .5px rgba(255, 77, 46, .5);
  color: var(--fm-red);
}

.fmap__kinds li:is([data-way], .is-way)::after {
  opacity: 1;
  transform: none;
}

/* the bracket's words, on the line over the chips of the site it is in */
.fmap__way {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 400 var(--fs-label)/1.2 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fm-red);
  transition: opacity .25s var(--ease-out);
}

.fmap__way .node {
  width: 14px;
  height: 14px;
}

.fmap.is-live .fmap__way:not(.is-on) {
  opacity: 0;
}

/* a site the pulse has reached: its systems' marks and its node in red */
.fmap__firm.is-hot .fmap__glyph .a,
.fmap__place.is-hit .fmap__art .a {
  stroke: var(--fm-red);
  stroke-opacity: 1;
}

.fmap__place.is-hit .fmap__art::before {
  background: var(--fm-red);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px rgba(255, 77, 46, .6);
}

/* The lines. White dots for the internet, red dashes for the firms' remote access. */
.fmap__net::before,
.fmap__net::after,
.fmap__place::before,
.fmap__place::after,
.fmap__firms::after,
.fmap__firm::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

/* A pulse: a red point running along a line, from the internet (or a firm) into a site. js/home.js
   moves the box from one end of its line to the other; the point and its tail ride at its front. */
.fmap__pulse {
  position: absolute;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}

.fmap__pulse::after {
  content: '';
  position: absolute;
  border-radius: 3px;
}

/* Hover or keyboard focus on a site: its lines, node and chips come forward, the other sites step back.
   On the firms: their red lines come forward, and the sites they do not reach step back. Only where
   there is a real hover, so a tap on a phone leaves nothing dimmed. */
.fmap__firm::after {
  transition: opacity .3s var(--ease-io);
}

@media (hover: hover) {
  .fmap__places:has(.fmap__place:is(:hover, :focus-visible)) .fmap__place:not(:hover, :focus-visible),
  .fmap__stage:has(.fmap__firms:is(:hover, :focus-visible)) .fmap__place:not([data-target]) {
    opacity: .36;
  }

  .fmap__place:is(:hover, :focus-visible) .fmap__kinds li,
  .fmap__firms:is(:hover, :focus-visible) .fmap__kinds li {
    border-color: rgba(255, 255, 255, .6);
    color: var(--fg);
  }

  .fmap__place:is(:hover, :focus-visible) .fmap__art .l {
    stroke-opacity: 1;
  }

  .fmap__firms:is(:hover, :focus-visible) {
    border-color: rgba(255, 77, 46, .55);
  }

  .fmap__firms:is(:hover, :focus-visible) .fmap__glyph .l,
  .fmap__stage:has([data-site='plant']:is(:hover, :focus-visible)) .fmap__firm[data-to='plant'] .fmap__glyph .l,
  .fmap__stage:has([data-site='cold']:is(:hover, :focus-visible)) .fmap__firm[data-to='cold'] .fmap__glyph .l,
  .fmap__stage:has([data-site='office']:is(:hover, :focus-visible)) .fmap__firm[data-to='office'] .fmap__glyph .l {
    stroke-opacity: 1;
  }

  .fmap__stage:has(.fmap__place:is(:hover, :focus-visible)) .fmap__firm::after {
    opacity: .3;
  }

  .fmap__stage:has([data-site='plant']:is(:hover, :focus-visible)) .fmap__firm[data-to='plant']::after,
  .fmap__stage:has([data-site='cold']:is(:hover, :focus-visible)) .fmap__firm[data-to='cold']::after,
  .fmap__stage:has([data-site='office']:is(:hover, :focus-visible)) .fmap__firm[data-to='office']::after {
    opacity: 1;
  }
}

.fmap__firm.is-hot .fmap__glyph .l {
  stroke-opacity: 1;
}

.fmap__firms:focus-visible {
  outline-offset: 4px;
}

/* Drawn in as it comes into view (is-armed, set by the script; never without it or under reduced
   motion): the internet line runs out, each site's line drops to it, the site comes in, then the
   firms' red lines. Hiding is instant; only the way in is animated, each part after its own delay
   (--fm-at for a line, --fm-in for words and drawings). */
.fmap.is-armed :is(.fmap__net, .fmap__place)::before,
.fmap.is-armed :is(.fmap__net, .fmap__place, .fmap__firms)::after,
.fmap.is-armed .fmap__firm::after {
  -webkit-clip-path: inset(0 0 100% 0);
  clip-path: inset(0 0 100% 0);
}

.fmap.is-armed :is(.fmap__net, .fmap__place).is-in::before,
.fmap.is-armed :is(.fmap__net, .fmap__place, .fmap__firms).is-in::after,
.fmap.is-armed .fmap__firms.is-in .fmap__firm::after {
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
  transition: clip-path .5s var(--ease-out) var(--fm-at, 0s), -webkit-clip-path .5s var(--ease-out) var(--fm-at, 0s), opacity .3s var(--ease-io);
}

.fmap.is-armed :is(.fmap__firms, .fmap__net span),
.fmap.is-armed .fmap__place > :not(.fmap__pulse) {
  opacity: 0;
  transform: translateY(8px);
}

.fmap.is-armed .fmap__firms.is-in,
.fmap.is-armed .fmap__net.is-in span,
.fmap.is-armed .fmap__place.is-in > :not(.fmap__pulse) {
  opacity: 1;
  transform: none;
  transition: opacity .5s var(--ease-out) var(--fm-in, 0s), transform .5s var(--ease-out) var(--fm-in, 0s), border-color .3s var(--ease-io);
}

.fmap__place:nth-child(2) { --fm-i: 1; }
.fmap__place:nth-child(3) { --fm-i: 2; }
.fmap__place:nth-child(4) { --fm-i: 3; }
.fmap__place:nth-child(5) { --fm-i: 4; }
.fmap__place:nth-child(6) { --fm-i: 5; }

.fmap__place {
  --fm-at: calc(var(--fm-i, 0) * .08s);
  --fm-in: calc(.25s + var(--fm-i, 0) * .08s);
}

.fmap__firm[data-to='plant'] { --fm-at: .9s; }
.fmap__firm[data-to='cold'] { --fm-at: 1.05s; }
.fmap__firm[data-to='office'] { --fm-at: 1.2s; }

/* Phones and tablets: top to bottom. The internet runs down the left at 7 px, the firms' red line down
   the right at 7 px; each site is its drawing (branches meet it half way down), then its name, the
   line for the bracket's words and its chips. */
@media (max-width: 1199px) {
  .fmap__art {
    margin-left: 14px;
  }

  .fmap__art::before {
    left: -18.5px;
    top: calc(var(--fm-art) * .3125 - 4.5px);
  }

  /* the internet: the rail from under its word down the left; each site's piece of it, its branch and
     its door; the last site's rail stops at its branch */
  .fmap__net::before,
  .fmap__place::before {
    left: calc(7px - var(--fm-pl) - .75px);
  }

  .fmap__net::before {
    top: 22px;
    bottom: 0;
    width: 1.5px;
    background: linear-gradient(to bottom, var(--fm-dot) 0 1.5px, transparent 1.5px) 0 0 / 1.5px 5px repeat-y;
  }

  .fmap__place::before {
    top: 0;
    bottom: 0;
    width: calc(var(--fm-pl) - 7px);
    background:
      linear-gradient(#fff, #fff) -3px calc(var(--fm-art) * .3125 - 4px) / 7px 9px no-repeat,
      linear-gradient(to right, var(--fm-dot) 0 1.5px, transparent 1.5px) 0 calc(var(--fm-art) * .3125 - .75px) / 5px 1.5px repeat-x,
      linear-gradient(to bottom, var(--fm-dot) 0 1.5px, transparent 1.5px) 0 0 / 1.5px 5px repeat-y;
  }

  .fmap__place:last-child::before {
    bottom: auto;
    height: calc(var(--fm-art) * .3125 + 5px);
  }

  /* the firms' red line: from the firms down the right, a branch into each site they reach */
  .fmap__firms::after {
    top: 100%;
    right: 5.875px;
    width: 2.25px;
    height: 29px;
    background: linear-gradient(to bottom, var(--fm-red) 0 5px, transparent 5px) 0 0 / 2.25px 9px repeat-y;
  }

  .fmap__net::after,
  .fmap__place::after {
    right: calc(7px - var(--fm-pr) - 1.125px);
    width: 2.25px;
    top: 0;
    bottom: 0;
    background: linear-gradient(to bottom, var(--fm-red) 0 5px, transparent 5px) 0 0 / 2.25px 9px repeat-y;
  }

  .fmap__place[data-target]::after {
    left: calc(var(--fm-art) + 18px);
    width: auto;
    background:
      radial-gradient(circle, var(--fm-red) 0 2.5px, transparent 3px) 0 calc(var(--fm-art) * .3125 + 2.75px) / 6px 6px no-repeat,
      linear-gradient(to left, var(--fm-red) 0 5px, transparent 5px) 0 calc(var(--fm-art) * .3125 + 4.625px) / 9px 2.25px repeat-x,
      linear-gradient(to bottom, var(--fm-red) 0 5px, transparent 5px) 100% 0 / 2.25px 9px repeat-y;
  }

  .fmap__place:last-child::after {
    bottom: auto;
    height: calc(var(--fm-art) * .3125 + 6.5px);
  }

  .fmap__firms,
  .fmap__firms .fmap__firm::after {
    --fm-at: 0s;
  }

  /* the pulses: along a branch into the site, from the left (internet) or the right (firm) */
  .fmap__pulse {
    top: calc(var(--fm-art) * .3125 - 3px);
    height: 6px;
    left: calc(7px - var(--fm-pl));
    width: calc(var(--fm-pl) - 7px);
  }

  .fmap__pulse--red {
    top: calc(var(--fm-art) * .3125 + 2px);
    left: calc(var(--fm-art) + 20px);
    width: auto;
    right: calc(7px - var(--fm-pr));
  }

  .fmap__pulse::after {
    top: -1px;
    right: -1px;
    width: 30px;
    height: 8px;
    background: radial-gradient(circle at calc(100% - 4px) 50%, var(--fm-red) 0 3px, transparent 3.5px), linear-gradient(to right, transparent, rgba(255, 77, 46, .85) 88%, transparent) 0 50% / calc(100% - 4px) 3px no-repeat;
    filter: drop-shadow(0 0 4px rgba(255, 77, 46, .8));
  }

  .fmap__pulse--red::after {
    right: auto;
    left: 0;
    transform: scaleX(-1);
  }

  .fmap__firm .fmap__pulse,
  .fmap__glyph {
    display: none;
  }
}

@media (min-width: 640px) and (max-width: 1199px) {
  .fmap {
    --fm-art: 150px;
  }

  .fmap__who {
    grid-template-columns: repeat(3, max-content);
    column-gap: 32px;
  }
}

/* Side by side: six columns, the firms over the sites they reach. Every line is sized from the same
   tokens: the firms' padding (--fm-pad), the gap to the internet (--fm-gap), the internet's row
   (--fm-net) and the drop to each site (--fm-drop). */
@media (min-width: 1200px) {
  .fmap {
    --fm-cols: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .85fr) minmax(0, 1fr);
    --fm-art: clamp(120px, 10.417vw, 200px);
    --fm-x: calc(var(--fm-art) / 2);
    --fm-rx: clamp(30px, 2.361vw, 45px);
    --fm-pad: clamp(18px, 1.528vw, 29px);
    --fm-gap: clamp(30px, 2.778vw, 53px);
    --fm-net: clamp(26px, 2.083vw, 40px);
    --fm-drop: clamp(48px, 4.444vw, 85px);
    margin-top: var(--sp-96);
  }

  .fmap__stage {
    display: grid;
    grid-template-columns: var(--fm-cols);
    column-gap: var(--gutter);
    padding: 0;
  }

  .fmap__firms {
    grid-column: 1 / -1;
    grid-template-columns: var(--fm-cols);
    column-gap: var(--gutter);
    margin: 0 0 var(--fm-gap);
    padding: var(--fm-pad) 0;
    border: 0;
    background: none;
  }

  /* the firms' ground: a band a little wider than the map */
  .fmap__firms::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0 calc(-1 * var(--sp-24));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #0b0b0b;
    transition: border-color .3s var(--ease-io);
  }

  .fmap__firms:is(:hover, :focus-visible)::before {
    border-color: rgba(255, 77, 46, .55);
  }

  .fmap__firms:focus-visible {
    outline: 0;
  }

  .fmap__firms:focus-visible::before {
    outline: 2px solid var(--fg);
    outline-offset: 4px;
  }

  .fmap__band {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
  }

  .fmap__who {
    grid-column: 2 / -1;
    grid-row: 1;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .85fr) minmax(0, 1fr);
    column-gap: var(--gutter);
  }

  .fmap__firm[data-to='plant'] { grid-column: 1; }
  .fmap__firm[data-to='cold'] { grid-column: 2; }
  .fmap__firm[data-to='office'] { grid-column: 5; }

  .fmap__firm {
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    padding: 0;
  }

  .fmap__glyph {
    display: block;
    width: calc(var(--fm-rx) * 2);
    height: auto;
    color: var(--fg);
  }

  /* the firm's red line, from under its laptop down through the internet into its site */
  .fmap__firm::before {
    left: calc(var(--fm-rx) - 4px);
    top: calc(100% - 4px);
  }

  .fmap__firm::after {
    left: calc(var(--fm-rx) - 1.125px);
    top: calc(100% - 4px);
    width: 2.25px;
    height: calc(var(--fm-pad) + var(--fm-gap) + var(--fm-net) + var(--fm-drop));
    background: linear-gradient(to bottom, var(--fm-red) 0 5px, transparent 5px) 0 0 / 2.25px 9px repeat-y;
  }

  .fmap__remote {
    grid-column: 4 / 6;
    grid-row: 1;
    display: grid;
    gap: 6px;
    align-content: start;
  }

  .fmap__remote .fmap__state {
    min-height: 0;
    padding-top: 0;
  }


  /* the internet: its word over the left end of its line; the line runs the map's width */
  .fmap__net {
    grid-column: 1 / -1;
    height: var(--fm-net);
  }

  .fmap__net span {
    margin-left: 0;
  }

  .fmap__net::before {
    right: -7px;
    bottom: -3.75px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--fg);
  }

  .fmap__net::after {
    left: 0;
    right: 0;
    bottom: -.75px;
    height: 1.5px;
    background: linear-gradient(to right, rgba(255, 255, 255, .9) 0 1.5px, transparent 1.5px) 0 0 / 4px 1.5px repeat-x;
  }

  .fmap.is-armed .fmap__net::after {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
  }

  .fmap.is-armed .fmap__net.is-in::after {
    transition-duration: .8s;
  }

  .fmap.is-armed .fmap__net.is-in::before {
    transition-delay: .7s;
  }

  .fmap__places {
    grid-column: 1 / -1;
    grid-template-columns: var(--fm-cols);
    grid-template-rows: auto auto auto 1fr;
    column-gap: var(--gutter);
    padding-top: var(--fm-drop);
  }

  .fmap__places::before {
    inset: calc(-1 * var(--fm-net)) calc(-1 * var(--sp-24)) -12px;
  }

  /* the chain from field to shelf: under the drawings, from the farm to the shop */
  .fmap__places::after {
    content: '';
    position: absolute;
    left: var(--fm-x);
    right: calc((100% - 5 * var(--gutter)) * 1.85 / 6.25 + 2 * var(--gutter) - var(--fm-x));
    top: calc(var(--fm-drop) + var(--fm-art) * .625 + 8px);
    height: 1.5px;
    background: linear-gradient(to right, rgba(255, 255, 255, .4) 0 1.5px, transparent 1.5px) 0 0 / 5px 1.5px repeat-x;
    pointer-events: none;
  }

  .fmap__place {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    align-content: start;
    padding-bottom: 0;
  }

  .fmap__art {
    width: min(100%, var(--fm-art));
  }

  .fmap__art::before {
    left: calc(50% - 4.5px);
    top: -4.5px;
  }

  .fmap__place .fmap__name {
    align-self: start;
    margin-top: 26px;
  }

  /* the site's line from the internet, with its door on the internet line */
  .fmap__place::before {
    left: calc(var(--fm-x) - 4px);
    top: calc(-1 * var(--fm-drop) - 5.5px);
    width: 8px;
    height: calc(var(--fm-drop) + 5.5px);
    background:
      linear-gradient(#fff, #fff) 50% 0 / 7px 11px no-repeat,
      linear-gradient(to bottom, var(--fm-dot) 0 1.5px, transparent 1.5px) 50% 0 / 1.5px 5px repeat-y;
  }

  /* the red door where a firm's line crosses the internet */
  .fmap__place[data-target]::after {
    left: calc(var(--fm-rx) - 3.5px);
    top: calc(-1 * var(--fm-drop) - 5.5px);
    width: 7px;
    height: 11px;
    background: var(--fm-red);
  }

  .fmap.is-armed .fmap__place[data-target]::after {
    --fm-at: 1.1s;
  }

  .fmap__pulse {
    left: calc(var(--fm-x) - 3px);
    top: calc(-1 * var(--fm-drop));
    width: 6px;
    height: var(--fm-drop);
  }

  .fmap__firm .fmap__pulse {
    left: calc(var(--fm-rx) - 3px);
    top: 100%;
    height: calc(var(--fm-pad) + var(--fm-gap) + var(--fm-net) + var(--fm-drop));
  }

  .fmap__pulse::after {
    left: -1px;
    bottom: -1px;
    width: 8px;
    height: 40px;
    background: radial-gradient(circle at 50% calc(100% - 4px), var(--fm-red) 0 3px, transparent 3.5px), linear-gradient(to bottom, transparent, rgba(255, 77, 46, .85) 88%, transparent) 50% 0 / 3px calc(100% - 4px) no-repeat;
    filter: drop-shadow(0 0 4px rgba(255, 77, 46, .8));
  }

  .fmap__place .fmap__pulse--red {
    display: none;
  }

  .fmap__kinds {
    margin-top: 2px;
  }

  .fmap__place .fmap__state {
    padding-top: 10px;
  }
}

/* Three columns of sourced facts, under the map's heading */

.home-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-48) var(--gutter);
  margin-top: var(--sp-48);
}

.home-col {
  display: grid;
  align-content: start;
  gap: var(--sp-16);
}

.home-col__text {
  max-width: 30em;
  font-size: var(--fs-card-body);
  line-height: 1.5;
  text-wrap: pretty;
}

.home-col .source {
  margin-top: 4px;
}

/* the industries, two rows of four (css/cantic.css .itiles); the menu's "All industries" lands here */
.home-tiles {
  margin-top: var(--sp-144);
  scroll-margin-top: calc(var(--nav-h) + var(--sp-24));
}

.home-more {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-48);
  margin-top: var(--sp-24);
}

@media (min-width: 992px) {
  .home-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* It is already happening: the French attack and the second wave */

.home-incident {
  border-top: 0;
  padding-top: 0;
}

.home-incident__title {
  max-width: 17em;
}

.home-incident__more {
  margin-top: var(--sp-24);
  font-size: var(--fs-button, clamp(15px, 1.042vw, 20px));
  line-height: 1.4;
  letter-spacing: -.01em;
}

.home-incident__more a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

@media (hover: hover) {
  .home-incident__more a:hover {
    text-decoration-thickness: 2px;
  }
}

.home-incident .incident__facts {
  margin-top: var(--sp-24);
  row-gap: var(--sp-48);
}

.home-incident .incident__facts li {
  display: grid;
  align-content: start;
  gap: 10px;
}

/* Side by side, the three facts line up row by row: each lead, text and source starts level with
   its neighbours, however many lines a lead takes */
@supports (grid-template-rows: subgrid) {
  .home-incident .incident__facts li:has(> .home-fact__lead) {
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 10px;
  }
}

.home-fact__lead {
  font-size: var(--fs-lead);
  line-height: 1.3;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.home-fact__text {
  font-size: var(--fs-card-body);
  line-height: 1.5;
  color: var(--fg-2);
  text-wrap: pretty;
}

.home-incident--next {
  margin-top: var(--sp-48);
  padding-top: var(--sp-48);
  border-top: 1px solid var(--line);
}

.home-incident--next .incident__body {
  gap: var(--sp-16);
}

.home-incident__line {
  max-width: 34em;
}

.home-france__end {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-24) var(--sp-48);
  margin-top: var(--sp-96);
}

.home-france__line {
  max-width: 14em;
}

/* The platform: three product rows with their console vignettes */

.home-head {
  margin-bottom: var(--sp-96);
}

/* The vignettes (js/vignettes.js moves them; every word is in the markup). Each fills its console's
   body clear of the part that runs off the screen (--bleed). Mono, uppercase, synthetic data. */

.vg {
  position: absolute;
  inset: 0 var(--bleed, 0px) 0 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(12px, 1.389vw, 26px);
  padding: clamp(16px, 2.5vw, 48px) clamp(16px, 2.778vw, 53px);
  font: 400 var(--fs-label)/1.4 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.vg__head,
.vg__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  margin: 0;
}

.vg__head {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.vg__foot {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.vg .node {
  width: 14px;
  height: 14px;
}

/* the attack map: Eclipse on the left, a branch to each way in, each tried in turn */
.vg-map__tree {
  display: grid;
  align-content: center;
  gap: 10px;
  min-height: 0;
}

.vg-map__root {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--fg);
}

/* the rows share the list's columns (subgrid), so the addresses and the states line up from row to
   row whatever each state's longest word is ("Vía de entrada" against "Resiste") */
.vg-map__list {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content max-content;
  column-gap: 16px;
  margin-left: 6px;
  padding: 4px 0 0 30px;
}

/* the trunk, down from Eclipse to the last branch */
.vg-map__list::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: calc(clamp(8px, .903vw, 17px) + .7em + 1px);
  left: 0;
  width: 1px;
  background: var(--line);
}

.vg-map__t {
  position: relative;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) max-content max-content;
  grid-template-columns: subgrid;
  align-items: center;
  gap: 16px;
  padding: clamp(8px, .903vw, 17px) 0;
  border-bottom: 1px solid var(--line);
  transition: color .3s var(--ease-io);
}

/* each branch, and the probe that runs along it while the way in is tried */
.vg-map__t::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -30px;
  width: 22px;
  height: 1px;
  background: var(--line);
}

.vg-map__t::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -30px;
  width: 4px;
  height: 4px;
  margin-top: -1.5px;
  border-radius: 50%;
  background: var(--fg);
  opacity: 0;
}

.vg-map__t[data-state='try']::after {
  opacity: 1;
  animation: vg-probe .7s var(--ease-io) infinite;
}

@keyframes vg-probe {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(20px);
  }
}

.vg-map__name {
  color: var(--fg-2);
  transition: color .3s var(--ease-io);
}

.vg-map__addr {
  font-variant-numeric: tabular-nums;
  opacity: .8;
}

.vg-map__st {
  position: relative;
  display: grid;
  justify-items: end;
}

/* one state at a time: the old one goes at once, the new one fades in, so two never overlap */
.vg-s {
  grid-area: 1 / 1;
  opacity: 0;
  white-space: nowrap;
}

.vg-map__t[data-state='try'] .vg-map__name,
.vg-map__t[data-state='way'] .vg-map__name,
.vg-map__t[data-state='proven'] .vg-map__name {
  color: var(--fg);
}

.vg-map__t[data-state='try'] .vg-s--try,
.vg-map__t[data-state='held'] .vg-s--held,
.vg-map__t[data-state='way'] .vg-s--way,
.vg-map__t[data-state='proven'] .vg-s--proven {
  opacity: 1;
  transition: opacity .25s var(--ease-io);
}

.vg-s--try {
  color: var(--fg);
}

.vg-s--way,
.vg-s--proven {
  color: var(--alert);
}

/* the bracket that snaps onto the way in: four corners in signal red */
.vg-map__t[data-way] .vg-map__name::after {
  content: '';
  position: absolute;
  inset: 2px -8px 2px -10px;
  --c: var(--alert);
  background:
    linear-gradient(var(--c), var(--c)) left top / 10px 2.25px,
    linear-gradient(var(--c), var(--c)) left top / 2.25px 10px,
    linear-gradient(var(--c), var(--c)) right top / 10px 2.25px,
    linear-gradient(var(--c), var(--c)) right top / 2.25px 10px,
    linear-gradient(var(--c), var(--c)) left bottom / 10px 2.25px,
    linear-gradient(var(--c), var(--c)) left bottom / 2.25px 10px,
    linear-gradient(var(--c), var(--c)) right bottom / 10px 2.25px,
    linear-gradient(var(--c), var(--c)) right bottom / 2.25px 10px;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.25);
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
  pointer-events: none;
}

.vg-map__t[data-state='way'] .vg-map__name::after,
.vg-map__t[data-state='proven'] .vg-map__name::after {
  opacity: 1;
  transform: none;
}

.vg-map__count [data-count] {
  color: var(--fg);
}

.vg-map__done {
  color: var(--fg);
  opacity: 0;
  transition: opacity .3s var(--ease-io);
}

.vg-map.is-done .vg-map__done {
  opacity: 1;
}

/* the finding, from found to closed: a timeline of steps that light in turn */
.vg-fix__title {
  align-self: start;
  max-width: 26em;
  margin: 0;
  font: 400 var(--fs-lead)/1.35 var(--sans);
  letter-spacing: -.015em;
  text-transform: none;
  color: var(--fg);
  text-wrap: balance;
}

.vg-fix {
  grid-template-rows: auto auto minmax(0, 1fr);
}

/* a step: when, then what happened over a note, so long words wrap in their own column. The steps
   share the list's columns (subgrid), so "Within 24 h" or "Nueva prueba" moves no step's words. */
.vg-fix__steps {
  position: relative;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-content: end;
  gap: 0;
}

.vg-fix__step {
  position: relative;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(6.5em, auto) minmax(0, 1fr);
  grid-template-columns: subgrid;
  align-items: baseline;
  gap: 2px 16px;
  padding: clamp(8px, .764vw, 15px) 0 clamp(8px, .764vw, 15px) 22px;
  border-top: 1px solid var(--line);
  opacity: .38;
  transition: opacity .35s var(--ease-io);
}

.vg-fix__when {
  grid-row: 1 / span 2;
}

.vg-fix__what,
.vg-fix__note {
  grid-column: 2;
}

/* the step's node: a dot that fills once the step is done */
.vg-fix__step::before {
  content: '';
  position: absolute;
  top: calc(clamp(8px, .764vw, 15px) + .7em);
  left: 2px;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border: 1px solid var(--fg);
  border-radius: 50%;
}

.vg-fix__step.is-on {
  opacity: 1;
}

.vg-fix__step.is-on::before {
  background: var(--fg);
}

.vg-fix__step.is-now::before {
  background: var(--alert);
  border-color: var(--alert);
}

.vg-fix__what {
  color: var(--fg);
}

.vg-fix__note {
  font: 400 var(--fs-small)/1.35 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-2);
}

.vg-fix__step--end .vg-fix__what::after {
  content: '';
  display: inline-block;
  width: .95em;
  height: .95em;
  margin-left: .6em;
  vertical-align: -.12em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4 4 9-9.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4 4 9-9.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* the ledger: hashed, timestamped rows arriving one at a time */
.vg-ledger {
  grid-template-rows: auto minmax(0, 1fr);
}

.vg-ledger__ok {
  color: var(--fg);
  opacity: 0;
  transition: opacity .3s var(--ease-io);
}

.vg-ledger__ok::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 8px 2px 0;
  border-radius: 50%;
  background: var(--fg);
  vertical-align: middle;
}

.vg-ledger.is-done .vg-ledger__ok {
  opacity: 1;
}

.vg-ledger__window {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.vg-ledger__rows {
  display: grid;
  transition: transform .5s var(--ease-out);
}

.vg-ledger__rows li {
  display: grid;
  grid-template-columns: 6.2em minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 14px;
  padding: clamp(7px, .694vw, 13px) 0;
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}

.vg-ledger__rows li.is-on {
  opacity: 1;
  transform: none;
}

.vg-ledger__t,
.vg-ledger__h {
  font-variant-numeric: tabular-nums;
}

.vg-ledger__a {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--fg);
}

.vg-ledger__key .vg-ledger__a::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 8px 2px 0;
  border-radius: 50%;
  background: var(--alert);
  vertical-align: middle;
}

/* Without the script, under reduced motion and in a still frame, every vignette shows its end. */
html:not(.js) .vg-map__t .vg-s--held,
html:not(.js) .vg-map__t[data-way] .vg-s--proven,
html:not(.js) .vg-map__done,
html:not(.js) .vg-ledger__ok {
  opacity: 1;
}

html:not(.js) .vg-map__t[data-way] .vg-map__name::after {
  opacity: 1;
  transform: none;
}

html:not(.js) .vg-fix__step,
html:not(.js) .vg-ledger__rows li {
  opacity: 1;
  transform: none;
}

/* Narrower frames: the map's addresses step aside, so a way in and its state keep their room. */
@media (max-width: 1199px) {
  .vg-map__list {
    grid-template-columns: minmax(0, 1fr) max-content;
  }

  .vg-map__t {
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-columns: subgrid;
  }

  .vg-map__addr {
    display: none;
  }
}

/* Phones: the console grows to its vignette rather than cropping it. */
@media (max-width: 767px) {
  .home-platform .console__body {
    aspect-ratio: auto;
  }

  .vg {
    position: relative;
    inset: auto;
    min-height: 0;
  }

  .vg-fix__steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .vg-fix__step {
    grid-template-columns: minmax(0, 1fr);
    grid-template-columns: subgrid;
  }

  .vg-fix__when {
    grid-row: auto;
  }

  /* the Spanish console label is too long for a phone's frame: the frame keeps "datos de
     demostración", which says what matters, on one line */
  :lang(es) .console__brand {
    display: none;
  }

  .vg-fix__what,
  .vg-fix__note {
    grid-column: 1;
  }

  .vg-ledger__window {
    height: 15.5em;
  }

  .vg-ledger__rows li {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .vg-ledger__t {
    grid-column: 1 / -1;
    margin-bottom: -6px;
  }
}

/* The track record and the rules */

.home-record {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gutter);
  margin-top: var(--sp-48);
}

.home-record__case {
  align-content: space-between;
  gap: var(--sp-48);
  min-height: clamp(200px, 16.667vw, 320px);
}

.home-record__case .t-card,
.home-record__case .t-lead {
  max-width: 22em;
  text-wrap: pretty;
}

.home-record__figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: var(--sp-48) var(--gutter);
  padding-top: var(--sp-16);
}

.home-record__fine {
  grid-column: 1 / -1;
}

.home-trust {
  margin-top: var(--sp-192);
}

/* In a section of its own after the track record (the trust section for high-stakes
   environments), so its lead never reads as part of the record: the record section's bottom
   padding and this margin keep the old 192 between them */
.home-trust-sec .home-trust {
  margin-top: var(--sp-96);
}

.home-trust .rows {
  margin-top: var(--sp-96);
}

@media (min-width: 768px) {
  .home-record {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-record__case--lead {
    grid-column: 1 / -1;
  }

  /* beside the second card the two figures stack, each with the full width for its label */
  .home-record__figures {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-24);
    padding-top: 0;
  }
}

@media (min-width: 1200px) {
  .home-record {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .home-record__case--lead {
    grid-column: span 2;
  }

  .home-record__figures {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 0;
    padding-left: clamp(0px, 1.111vw, 21px);
  }
}

/* Get started */

.home-start__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-24);
  margin-bottom: var(--sp-48);
}

.home-start__foot {
  margin-top: var(--gutter);
}

.home-start__foot .fine {
  margin-top: var(--sp-16);
}

/* Read next: the newest article (written in by the generator as a blog card: the design system's
   link card inside one link) and the machines page, as two cards that invert on hover. The blog's
   own sheet is not loaded here, so the card's few layout rules are repeated for this section. */

.home-next__title {
  margin-bottom: var(--sp-48);
}

.home-next .card-article {
  display: flex;
  min-width: 0;
}

.home-next .card-article__link {
  display: flex;
  flex: 1;
  min-width: 0;
  border-radius: var(--radius);
}

.home-next .card-article__box {
  flex: 1;
  min-width: 0;
}

.home-next .card-article__link:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}

.home-next .card-article__link:focus-visible .lcard {
  --bg: var(--inv-bg);
  --fg: var(--inv-fg);
  --fg-2: var(--inv-fg-2);
  --line: var(--inv-line);
  background: var(--bg);
}

.home-next .card-article__link:focus-visible .earrow::before {
  transform: none;
}

.home-next .card-article__link:focus-visible .earrow .icon {
  color: var(--bg);
  transform: none;
}

.home-next .card-article__title {
  overflow-wrap: break-word;
}

/* the article's whole summary: a summary cut off mid-word reads as a fault */
.home-next .card-article .lcard__text {
  display: block;
  margin-top: var(--sp-16);
  overflow: visible;
  -webkit-line-clamp: none;
  line-clamp: none;
}

/* The message of 4 November 2026: the loop's plain-words line (under the statement's lead since 6 November),
   the line before "Reacting is too late", the comparison with a yearly test, and the trust lead. */

.statement__plain {
  max-width: 24em;
  margin-top: var(--sp-16);
  text-wrap: pretty;
}

/* under the lead, the grid's own gap spaces it */
.statement__lead .statement__plain {
  margin-top: 0;
}


.home-france__same {
  flex-basis: 100%;
  max-width: 30em;
  text-wrap: pretty;
}

.home-compare__card {
  margin-top: var(--sp-96);
  padding-block: var(--sp-8);
}

.compare {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.compare th,
.compare td {
  width: 50%;
  padding: var(--sp-24) 0;
  text-align: left;
  vertical-align: top;
}

.compare :is(th, td):first-child {
  padding-right: var(--gutter);
}

.compare th {
  font: 400 var(--fs-label)/1.2 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.compare th:last-child {
  color: var(--fg);
}

.compare td {
  border-top: 1px solid var(--line);
  font-size: var(--fs-card-body);
  line-height: 1.4;
  text-wrap: pretty;
}

.compare td:first-child {
  color: var(--fg-2);
}

.home-compare__fine {
  max-width: 40em;
  margin-top: var(--sp-24);
}

.home-trust__lead {
  max-width: 30em;
  margin-top: var(--sp-16);
  font-size: var(--fs-lead);
  line-height: 1.45;
  letter-spacing: -.015em;
  color: var(--fg-2);
  text-wrap: pretty;
}

@media (min-width: 992px) {
  .compare td {
    font-size: var(--fs-lead);
  }
}