/* valuemaxx.com — the landing page.
 *
 * Every colour, size and radius comes from tokens.css; nothing here invents one.
 * The page is one column of full-bleed bands on the ground colour, with the
 * hero held by a sticky stage so the search animation can take the screen over
 * as you scroll past it. */

@import url("./shared/tokens.css");

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

body {
  --vmx-gutter: clamp(20px, 4.2vw, 60px);
  margin: 0;
  background: var(--vmx-ground);
  color: var(--vmx-ink);
  font-family: var(--vmx-font-ui);
  font-size: var(--vmx-size-body);
  -webkit-font-smoothing: antialiased;
}

.k {
  font-family: var(--vmx-font-mono);
  font-size: 10.5px;
  letter-spacing: var(--vmx-track-label);
  text-transform: uppercase;
  color: var(--vmx-faint);
  margin: 0;
}
.m { font-family: var(--vmx-font-mono); font-variant-numeric: tabular-nums; }
.fig {
  font-family: var(--vmx-font-display);
  font-weight: 400;
  letter-spacing: var(--vmx-track-tighter);
}
.lead {
  font-family: var(--vmx-font-display);
  font-size: var(--vmx-size-lead);
  line-height: 1.45;
  color: var(--vmx-muted);
  margin: 14px 0 0;
  max-width: 40ch;
}

/* ---- controls ---------------------------------------------------------- */
.pill {
  border-radius: var(--vmx-radius-pill);
  border: 0;
  font: inherit;
  font-size: 13.5px;
  padding: 11px 22px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  font-family: var(--vmx-font-ui);
}
.pill-solid { background: var(--vmx-ink); color: var(--vmx-ground); }
/* Corner brackets rather than a border: the secondary action reads as a
   drafting mark instead of a second button competing with the first. */
.pill-ghost { background: transparent; color: var(--vmx-ink); position: relative; padding: 11px 24px; }
.pill-ghost::before, .pill-ghost::after {
  content: ""; position: absolute; width: 9px; height: 9px;
  border: 1px solid var(--vmx-ink); opacity: 0.45;
}
.pill-ghost::before { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.pill-ghost::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.cta-row { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.cta-note { margin-top: 20px; }

/* ---- nav --------------------------------------------------------------- */
.topnav {
  position: fixed; top: 22px; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 34px; pointer-events: none;
}
.topnav > * { pointer-events: auto; }
.navpill {
  background: rgba(255, 255, 255, 0.42);
  border-radius: var(--vmx-radius-pill);
  padding: 9px 8px; display: flex; align-items: center; gap: 4px;
  backdrop-filter: blur(8px);
}
.navpill-right { padding: 7px 7px 7px 16px; gap: 10px; }
.navlink {
  font-size: 13px; color: var(--vmx-muted); padding: 5px 13px;
  border-radius: var(--vmx-radius-pill); text-decoration: none;
}
.navpill-right .navlink { padding: 0; }
.navpill-right .pill { font-size: 12.5px; padding: 8px 16px; }

/* The centre pill collapses to its mark once the hero leaves. Animating
   max-width rather than display keeps the collapse continuous. */
.brand {
  display: flex; align-items: center; gap: 9px;
  background: rgba(255, 255, 255, 0.42);
  border-radius: var(--vmx-radius-pill); padding: 9px 18px;
  font-size: 14px; backdrop-filter: blur(8px);
  transition: padding var(--vmx-dur) var(--vmx-ease);
}
.brand-word {
  max-width: 120px; overflow: hidden; white-space: nowrap;
  transition: max-width var(--vmx-dur) var(--vmx-ease),
              opacity var(--vmx-dur-fast) ease,
              margin var(--vmx-dur) var(--vmx-ease);
}
.brand.tight { padding: 9px 11px; }
.brand.tight .brand-word { max-width: 0; opacity: 0; margin-left: -9px; }
.mark { position: relative; display: block; width: 16px; height: 16px; flex: none; }
.mark i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--vmx-ink); }
.mark i:nth-child(1) { left: 0; top: 6px; }
.mark i:nth-child(2) { left: 6px; top: 0; }
.mark i:nth-child(3) { left: 6px; top: 6px; }
.mark i:nth-child(4) { left: 6px; top: 12px; }
.mark i:nth-child(5) { left: 12px; top: 3px; }
.mark i:nth-child(6) { left: 12px; top: 9px; }

/* ---- hero -------------------------------------------------------------- */
/* The stage is taller than the screen so there is scroll to spend on the
   growth; the sticky inner is what the reader actually sees. */
.stage { height: 232vh; position: relative; }
.stick {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 760px;
  display: flex;
  align-items: center;
  padding: clamp(92px, 12vh, 120px) var(--vmx-gutter) 50px;
}
.hero {
  --p: 0;
  display: grid; width: 100%;
  grid-template-columns: calc(400px * (1 - var(--p))) minmax(0, 1fr);
  gap: calc(50px * (1 - var(--p)));
  align-items: center;
}
.hero-text {
  opacity: calc(1 - var(--p) * 1.7);
  transform: translateX(calc(var(--p) * -46px));
  overflow: hidden;
}
.hero-figure { display: flex; align-items: baseline; gap: 18px; margin-top: 6px; }
#fall { font-size: var(--vmx-size-figure); line-height: 0.9; font-variant-numeric: tabular-nums; transition: opacity 0.34s ease; }
#fall.rewind { opacity: 0; }
.hero-delta { display: flex; flex-direction: column; gap: 1px; padding-bottom: 15px; opacity: 0; transition: opacity 0.5s ease; }
.hero-delta.on { opacity: 1; }
.hero-delta-pct { font-size: clamp(19px, 1.4vw + 14px, 29px); line-height: 1; color: var(--vmx-pass); }
.hero-text h1 { margin: 20px 0 0; font-size: var(--vmx-size-h2); line-height: 1.05; }

/* ---- the search animation --------------------------------------------- */
.viz { position: relative; }
.rail { display: flex; align-items: center; gap: 0; margin: 0 0 15px; padding: 0; list-style: none; }
.stp {
  font-family: var(--vmx-font-mono); font-size: 10px; letter-spacing: 0.085em;
  text-transform: uppercase; color: var(--vmx-faint); opacity: 0.45;
  display: flex; align-items: center; gap: 7px; padding-right: 20px;
  transition: opacity 0.42s ease, color 0.42s ease;
}
.stp .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--vmx-faint);
  transition: background 0.42s ease, transform 0.42s var(--vmx-ease);
}
.stp.on { opacity: 1; color: var(--vmx-ink); }
.stp.on .dot { background: var(--vmx-pass); transform: scale(1.5); }

.caps { position: relative; min-height: 56px; margin-bottom: 10px; }
.cap {
  position: absolute; inset: 0;
  font-family: var(--vmx-font-display); font-size: var(--vmx-size-lead); line-height: 1.3;
  letter-spacing: -0.02em; color: var(--vmx-ink); max-width: 54ch;
  opacity: 0; transform: translateY(9px);
  transition: opacity 0.52s ease, transform 0.52s var(--vmx-ease);
}
.cap.on { opacity: 1; transform: none; }

.plot svg { width: 100%; display: block; overflow: visible; }
.viz svg * { transition: opacity 0.62s ease, transform 0.62s var(--vmx-ease), fill 0.7s ease; }
.axl, .gl { font-family: var(--vmx-font-mono); letter-spacing: 0.09em; }
/* The svg scales with its column, so a 10px label renders at 15px once the
   graph has taken the screen. Shrinking the user-unit size cancels most of it. */
.gl { font-size: calc(11px * (1 - var(--p, 0) * 0.34)); }
.axl { font-size: calc(14px * (1 - var(--p, 0) * 0.34)); fill: var(--vmx-ink); fill-opacity: 0.62; }

.ax, .base, .floor, .cand, .win, .ramp, .strikes { opacity: 0; }
.cand { transform: scale(0.3); transform-origin: center; transform-box: fill-box; fill: var(--vmx-faint); }
.base { transform: translateY(10px); }
.win { transform: scale(0.4); transform-origin: center; transform-box: fill-box; }
.rmp rect { transform: scaleY(0); transform-origin: bottom; transform-box: fill-box; transition: transform 0.7s var(--vmx-ease); }

.viz:not([data-phase="0"]) .ax { opacity: 1; }
.viz:not([data-phase="0"]) .base { opacity: 1; transform: none; }
.viz[data-phase="2"] .cand, .viz[data-phase="3"] .cand,
.viz[data-phase="4"] .cand, .viz[data-phase="5"] .cand { opacity: 1; transform: none; }

/* Colour arrives at step three, and both limits apply in that one step. */
.viz[data-phase="3"] .floor, .viz[data-phase="4"] .floor, .viz[data-phase="5"] .floor { opacity: 1; }
.viz[data-phase="3"] .cand.qfail, .viz[data-phase="4"] .cand.qfail,
.viz[data-phase="5"] .cand.qfail { fill: var(--vmx-fail); opacity: 0.2; }
.viz[data-phase="3"] .cand.lfail, .viz[data-phase="4"] .cand.lfail,
.viz[data-phase="5"] .cand.lfail { fill: var(--vmx-fail); opacity: 0.2; transition-delay: 0.34s; }
.viz[data-phase="3"] .strikes, .viz[data-phase="4"] .strikes,
.viz[data-phase="5"] .strikes { opacity: 1; transition-delay: 0.34s; }
.viz[data-phase="3"] .cand.ok, .viz[data-phase="4"] .cand.ok,
.viz[data-phase="5"] .cand.ok { fill: var(--vmx-pass); }

.viz[data-phase="4"] .win, .viz[data-phase="5"] .win { opacity: 1; transform: none; }
.viz[data-phase="4"] .cand.isw, .viz[data-phase="5"] .cand.isw { opacity: 0; }
.viz[data-phase="4"] .ring { animation: halo 1.9s ease-out infinite; }
@keyframes halo { 0% { r: 9; opacity: 0.9; } 100% { r: 30; opacity: 0; } }

.viz[data-phase="5"] .ramp { opacity: 1; }
.viz[data-phase="5"] .rmp rect { transform: none; }
/* The field steps back rather than clearing, so the rollout reads as the
   consequence of the pick and not a different screen. */
.viz[data-phase="5"] .cand:not(.isw), .viz[data-phase="5"] .base { opacity: 0.14; }
.viz[data-phase="5"] .strikes { opacity: 0.14; }
.viz[data-phase="5"] .floor { opacity: 0.28; }

/* ---- bands ------------------------------------------------------------- */
.band { scroll-margin-top: 92px; border-top: 1px solid var(--vmx-rule); padding: clamp(44px, 5vw, 64px) var(--vmx-gutter); }
.band-grid { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 44px; }
.band-label { padding-top: 4px; }
.band-title { margin: 0; font-size: var(--vmx-size-h2); line-height: 1.12; max-width: 24ch; }
.band-title-wide { max-width: 26ch; }

.band-dark { scroll-margin-top: 92px; background: var(--vmx-dark); color: var(--vmx-on-dark); border-top: 0; padding: clamp(48px, 6vw, 78px) var(--vmx-gutter); }
.band-dark .k { color: var(--vmx-on-dark-dim); }
.band-dark .band-label { color: var(--vmx-pass-on-dark); }

/* ---- the problem ------------------------------------------------------- */
.prob-caps { position: relative; min-height: 62px; margin-top: 20px; }
.pcap {
  position: absolute; inset: 0;
  font-family: var(--vmx-font-display); font-size: var(--vmx-size-lead); line-height: 1.35;
  color: var(--vmx-ink); max-width: 60ch;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.52s ease, transform 0.52s var(--vmx-ease);
}
.pcap.on { opacity: 1; transform: none; }
.pcap .m { font-size: 19px; }
.pcap em { color: var(--vmx-fail); font-style: normal; }

/* The bill as one block, then as the calls it was made of. Gap is the whole
   trick: at zero the grid reads as a single object. */
.prob-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16px, 1fr));
  gap: 0;
  margin-top: 26px;
  max-width: 900px;
}
.prob-grid i {
  aspect-ratio: 1;
  background: var(--vmx-ink);
  opacity: 0;
  border-radius: 1.5px;
  transform: scale(1);
  transition: opacity 0.52s ease, background 0.62s ease,
              transform 0.9s var(--vmx-ease);
}
.prob-grid[data-p="1"] i, .prob-grid[data-p="2"] i,
.prob-grid[data-p="3"] i, .prob-grid[data-p="4"] i { opacity: 0.86; }
.prob-grid[data-p="2"] i, .prob-grid[data-p="3"] i, .prob-grid[data-p="4"] i {
  transform: scale(0.78);
}
/* Only the wasted share changes colour. Painting both halves turned the grid
   into a quilt with nowhere for the eye to land. */
.prob-grid[data-p="3"] i.nil { background: var(--vmx-fail); opacity: 1; }
/* Four drains the colour back out. The section has to END on not knowing. */
.prob-grid[data-p="4"] i { background: var(--vmx-ink); opacity: 0.5; }

.prob-legend { display: flex; justify-content: space-between; margin-top: 12px; gap: 20px; }
.prob-leg { opacity: 0; transition: opacity 0.52s ease; }
.prob-leg-waste { color: var(--vmx-fail); }

/* A figure inside a serif sentence, set in mono so the number is findable
   without spending a colour on it. Colour on this page means status. */
.pcap .m,
.cap .m {
  font-size: 0.92em;
  letter-spacing: 0;
}
.prob-leg.on { opacity: 1; }
.works-with { display: flex; gap: 44px; margin-top: 34px; flex-wrap: wrap; }
.works-with .m { font-size: 13px; line-height: 1.9; margin: 6px 0 0; }

/* ---- how it works ------------------------------------------------------ */
.phases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 26px; margin: 30px 0 0; padding: 0; list-style: none;
}
.ph h4 { margin: 7px 0 6px; font-size: 21px; line-height: 1.2; font-family: var(--vmx-font-display); font-weight: 400; letter-spacing: var(--vmx-track-tight); }
.ph p { font-size: 14px; line-height: 1.6; color: var(--vmx-muted); margin: 0; }

.frame {
  background: var(--vmx-surface); border-radius: var(--vmx-radius);
  overflow: hidden; box-shadow: var(--vmx-lift-high); margin-top: 40px;
}
.stop-line {
  display: flex; align-items: baseline; gap: 14px; margin: 20px 0 0;
  flex-wrap: wrap; font-size: var(--vmx-size-prose); color: var(--vmx-muted);
}
.stop-line .k { white-space: nowrap; }

/* ---- turning it on ----------------------------------------------------- */
.flow { margin-top: 26px; }
.flow svg { width: 100%; display: block; overflow: visible; }
.nl { font-family: var(--vmx-font-mono); font-size: 11px; letter-spacing: 0.09em; fill: var(--vmx-on-dark); }
.fl { font-family: var(--vmx-font-mono); font-size: 10px; letter-spacing: 0.09em; fill: var(--vmx-on-dark-dim); }
.node { opacity: 0; }
.flow.go .node { animation: reveal 0.7s both; }
.flow.go .node.vmx { animation-delay: 0.26s; }
@keyframes reveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* The packets ride offset-path so each route is declared once, as geometry,
   rather than twice as keyframes. */
.pk { opacity: 0; offset-rotate: 0deg; }
.flow.go .pk { animation: pk 9s linear infinite; }
@keyframes pk {
  0%   { offset-distance: 0%;   opacity: 0; }
  2%   { opacity: 1; }
  11%  { offset-distance: 100%; opacity: 1; }
  13%  { offset-distance: 100%; opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}
.fl-late { opacity: 0; }
.flow.go .fl-late { animation: blip 9s linear infinite 5s; }
@keyframes blip { 0% { opacity: 0; } 4% { opacity: 1; } 26% { opacity: 1; } 32% { opacity: 0; } 100% { opacity: 0; } }

.code-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 24px; margin-top: 34px;
}
.code {
  margin: 8px 0 0; padding: 16px 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--vmx-radius-small);
  font-family: var(--vmx-font-mono); font-size: 11.5px; line-height: 1.75;
  color: var(--vmx-on-dark); white-space: pre-wrap; overflow-wrap: anywhere;
}
.swap { background: rgba(31, 122, 82, 0.28); border-radius: 3px; padding: 1px 3px; }

.connect { margin-top: 34px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.connect-label { color: var(--vmx-pass-on-dark) !important; }
.connect-line { font-family: var(--vmx-font-display); font-size: var(--vmx-size-lead); line-height: 1.4; color: var(--vmx-on-dark); margin: 9px 0 20px; max-width: 60ch; }
.conns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(104px, 45%), 1fr)); gap: 10px; }
.conn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 8px 6px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--vmx-on-dark-dim);
}

.conn svg {
  width: clamp(30px, 3.4vw, 44px);
  height: clamp(30px, 3.4vw, 44px);
}

.conn-name { font-family: var(--vmx-font-mono); font-size: 10px; letter-spacing: 0.04em; }

/* ---- close ------------------------------------------------------------- */
.band-close { padding: clamp(48px, 6vw, 78px) var(--vmx-gutter) clamp(44px, 5vw, 64px); }
.close-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 50px; flex-wrap: wrap; }
.close-title { margin: 0; font-size: var(--vmx-size-hero); line-height: 1.04; max-width: 15ch; font-family: var(--vmx-font-display); font-weight: 400; letter-spacing: var(--vmx-track-tighter); }
.close-lead { font-size: var(--vmx-size-prose); color: var(--vmx-muted); margin: 16px 0 0; max-width: 46ch; }
.close-steps { font-size: 12.5px; line-height: 2; color: var(--vmx-fainter); margin: 0; }
.close-assurances { display: flex; gap: 52px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--vmx-rule); flex-wrap: wrap; }
.close-assurances > div { max-width: 34ch; }
.close-assurances p:last-child { font-size: var(--vmx-size-prose); color: var(--vmx-muted); margin: 5px 0 0; }

.footer {
  border-top: 1px solid var(--vmx-rule); padding: 26px var(--vmx-gutter) 34px;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
}
.footer, .footer a { font-size: 12px; color: var(--vmx-fainter); text-decoration: none; }
.footer-links { display: flex; gap: 18px; }





/* ---- the console screen, inside How it works ---------------------------- */
.fr-chrome {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 16px; border-bottom: 1px solid var(--vmx-rule-soft);
}
.fr-chrome span:not(.m) { width: 8px; height: 8px; border-radius: 50%; background: var(--vmx-rule-soft); }
.fr-chrome .m { font-size: 10px; color: var(--vmx-fainter); margin-left: 8px; }
.fr-body { padding: 24px 26px 26px; }
.fr-top { display: flex; align-items: baseline; gap: 20px; margin-top: 4px; }
.fr-fig { font-size: 60px; line-height: 0.96; font-variant-numeric: tabular-nums; }
.fr-tickets { display: flex; flex-direction: column; gap: 1px; padding-bottom: 9px; }
.fr-tickets .m { font-size: 13px; }
.fr-rollout { margin-left: auto; text-align: right; padding-bottom: 10px; }
.fr-ramp { display: flex; align-items: flex-end; gap: 5px; height: 34px; margin-top: 5px; }
.fr-rb { width: 10px; background: var(--vmx-pass); transform-origin: bottom; transform: scaleY(0); }
.fr-head {
  display: flex; justify-content: space-between; padding: 18px 0 7px;
  border-top: 1px solid var(--vmx-rule-soft); margin-top: 18px;
}
.fr-head-2 { border-top: 0; margin-top: 16px; padding: 0 0 7px; }
.fr-row {
  display: grid; grid-template-columns: 180px minmax(0, 1fr) 80px 110px;
  align-items: center; gap: 14px; padding: 9px 0;
  border-bottom: 1px solid var(--vmx-rule-hairline); opacity: 0;
}
.fr-row .m { font-size: 11.5px; }
.fr-row > .m:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fr-cfg { font-size: 9.5px !important; color: var(--vmx-fainter); }
.fr-price { text-align: right; }
.fr-price.beat { text-decoration: line-through; color: var(--vmx-fainter); }
.fr-verd {
  text-align: right; font-size: 9.5px !important; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--vmx-fainter);
}
.fr-verd.won { color: var(--vmx-pass); }
.fr-trend { display: flex; align-items: flex-end; gap: 3px; height: 46px; }
.fr-bar { flex: 1; background: var(--vmx-ink); transform-origin: bottom; transform: scaleY(0); border-radius: 1px; }
.settled { opacity: 0; }

.frame.go .settled { animation: reveal 0.82s 5.5s both; }
.frame.run .fr-row { animation: reveal 0.72s both; }
.frame.run .fr-bar { animation: grow 0.62s both; }
.frame.run .fr-bar.late { animation: grow 0.62s both, to-green 0.58s both; }
.frame.run .fr-rb { animation: grow 0.62s both; }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes to-green { from { background: var(--vmx-ink); } to { background: var(--vmx-pass); } }

/* What is left needs a breakpoint because it is a STRUCTURAL change, not a
   size: a two-column hero becomes one, a sticky stage stops being sticky, and
   the section links leave the nav. Everything else above sizes itself. */
@media (max-width: 900px) {
  .band-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  /* The growth trades the text column for the graph; with one column there is
     nothing to trade, so the copy must not fade. */
  .hero-text { opacity: 1; transform: none; }
  .stage { height: auto; }
  .stick { position: static; height: auto; min-height: 0; }

  .topnav { padding: 0 14px; gap: 10px; }
  .topnav .navpill:first-of-type { display: none; }
  .brand { padding: 8px 14px; }

  .cap, .pcap { font-size: 17px; }
  .caps { min-height: 84px; }
  .prob-caps { min-height: 92px; }
  .rail { flex-wrap: wrap; gap: 4px 0; }

  /* The console screen is a picture of a desktop app: it drops the columns that
     cannot fit rather than being redrawn. */
  .fr-row { grid-template-columns: minmax(0, 1fr) 62px 78px; gap: 8px; }
  .fr-cfg { display: none; }
  .fr-body { padding: 16px 16px 18px; }
  .fr-fig { font-size: clamp(34px, 9vw, 60px); }
  .code { font-size: 10.5px; }
  .fr-top { flex-wrap: wrap; gap: 12px; }
  .fr-rollout { margin-left: 0; text-align: left; }

  /* The svg is 880 user units wide in a narrow column, so an 11px label lands at
     four. The counter-scale runs the other way here. */
  .gl { font-size: 19px; }
  .axl { font-size: 23px; }
  .cand { r: 10; }
  .base circle { r: 14; }

  /* A phone has room for the claim, not for the sentence that supports it. Each
     of these has its point made by something still on screen: the step names by
     the animation above them, the diagram's sub-labels by the boxes they sit in,
     and the hero's second sentence by the section it introduces. */
  .m-hide { display: none; }

  /* With the bodies gone the steps are five words, so they stop being five
     blocks and become a list. */
  .phases { gap: 0; margin-top: 22px; }
  .ph {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: baseline;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid var(--vmx-rule-soft);
  }
  .ph:last-child { border-bottom: 0; }
  .ph h4 { margin: 0; font-size: 21px; }
  .ph { cursor: pointer; }
  .ph p.m-hide { display: none; }
  .ph.open p.m-hide {
    display: block;
    grid-column: 2;
    margin-top: 6px;
    animation: reveal 0.36s both;
  }
  .ph::after {
    content: "+";
    grid-column: 3;
    font-family: var(--vmx-font-mono);
    font-size: 15px;
    color: var(--vmx-faint);
    justify-self: end;
  }
  .ph.open::after { content: "–"; }
  .ph { grid-template-columns: 30px minmax(0, 1fr) 20px; }
  /* An svg child cannot be un-displayed by the shorthand alone. */
  text.m-hide { display: none; visibility: hidden; }

  .close-top { flex-direction: column; align-items: flex-start; gap: 26px; }
  .footer { flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (max-width: 420px) {
  .conns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }