/*
   Metrexy — metrexy.ai · A product of VeWeb Platforms Inc.

   The brief was "not another AI-looking site", so the whole thing is built
   against that. Rules, in order of importance:

   1. NO pills, NO rounded corners, NO gradient buttons, NO gradient headline
      text, NO card grids, NO badge chips. Those are the entire visual
      signature of a generated landing page.
   2. The brand gradient lives in the LOGO MARK and the scroll progress line.
      Nowhere else. Not on text, not on buttons, not as a background.
   3. It is an editorial page: paper ground, a reading serif for prose, hairline
      rules for structure, real typographic scale doing the work of decoration.
   4. Everything sits on a two-column measure, left-aligned. Nothing is centered.
*/

:root {
  --paper:    #F7F8FA;   /* cool near-white; warm cream is the AI tell */
  --paper-2:  #FFFFFF;
  --ink:      #0B0D12;
  --ink-2:    #333A45;
  --muted:    #6A7280;
  --rule:     #DFE3E9;
  --rule-2:   #C6CCD6;
  --link:     #2C4ED4;   /* deeper than the brand blue so it passes on paper */

  --display: 'Sulphur Point', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;

  --gutter: clamp(26px, 7vw, 128px);
  --max: 1180px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --spin: cubic-bezier(0.42, 0.02, 0.16, 1);  /* visible through the whole turn */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:   #0C0E13;
    --paper-2: #12151C;
    --ink:     #F0F2F6;
    --ink-2:   #C2C8D2;
    --muted:   #858D9A;
    --rule:    #232833;
    --rule-2:  #333A47;
    --link:    #7AA7F5;
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.62;
  font-optical-sizing: auto;
  font-variant-numeric: oldstyle-num;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

::selection { background: #405DE2; color: #fff; }
b { font-weight: 600; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: 12px 18px; font-family: var(--display); font-size: 15px;
}
.skip:focus { left: 14px; top: 14px; }

:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }

/* Scroll progress
   The only place the gradient appears besides the mark: a 2px hairline that
   fills as you read, giving a sense of length without a scrollbar gimmick.  */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 50;
}
.progress span {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, #405DE2, #4096E2);
  transform: scaleX(0);
  transform-origin: left;
}

/* Masthead
   Logo only. No nav, no CTA. On desktop the lockup starts large and centred in
   the opening, then travels up into this bar as the page scrolls, so the header
   is assembled by the reader rather than simply present. */
.masthead {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.45s var(--ease), border-color 0.45s var(--ease),
              backdrop-filter 0.45s var(--ease);
}
/* Arrives behind the logo once it has landed, rather than being there from the
   start — the header assembles itself as you read. */
.masthead.is-stuck {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--rule);
}

.lockup {
  display: inline-flex; align-items: center;
  text-decoration: none; color: inherit;
}
.lockup span {
  font-family: var(--display); font-weight: 700;
  letter-spacing: -0.03em;
}

.lockup--nav {
  gap: 11px;
  max-width: var(--max); margin: 0 auto;
  padding: 20px var(--gutter);
}
.lockup--nav img { width: 30px; }
.lockup--nav span { font-size: 23px; letter-spacing: -0.01em; }

/* The travelling lockup. Hidden on small screens, where a large centred mark
   would eat the whole first screen for no benefit. */
.lockup--hero {
  position: relative; z-index: 45;
  gap: clamp(14px, 2vw, 28px);
  transform-origin: 0 0;
  will-change: transform;
}
.lockup--hero img { width: clamp(70px, 10vw, 132px); }
.lockup--hero span { font-size: clamp(62px, 10.5vw, 150px); line-height: 1; }

/* The travelling lockup becomes the header lockup, so the static one is
   suppressed entirely whenever JS is driving. */
.lockup-active .lockup--nav { opacity: 0; pointer-events: none; }
.lockup--nav { transition: opacity 0.2s var(--ease); }
.lockup--nav { transition: opacity 0.25s var(--ease); }

/* Intro entry
   The whole lockup resolves out of blur while the mark turns, and both finish
   on the same frame, so the logo arrives fully formed exactly as the spin
   stops rather than settling in two separate beats. */

.mark-svg {
  width: clamp(70px, 10vw, 132px);
  height: auto;
  overflow: visible;
}

/* Entry, after the VePulse loading mark: the blades arrive one at a time to
   build the icon, then the assembled mark turns once and stops. The mark never
   changes size and never moves — only the blades and the rotation animate. */
.blade {
  transform-origin: 400px 400px;   /* viewBox centre */
  opacity: 0;
  animation: bladeIn 0.62s var(--ease) both;
  animation-delay: calc(var(--i) * 0.15s);
}
@keyframes bladeIn {
  from { opacity: 0; transform: rotate(-55deg) scale(0.72); }
  to   { opacity: 1; transform: rotate(0deg) scale(1); }
}

/* One clean revolution once all four are present. */
.blades {
  transform-origin: 400px 400px;
  animation: markSpin 1.15s var(--spin) 0.78s both;
}
@keyframes markSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* The wordmark finishes exactly as the revolution stops. */
.lockup--hero span {
  animation: wordIn 0.95s var(--ease) 0.98s both;
}
@keyframes wordIn {
  from { opacity: 0; filter: blur(14px); }
  to   { opacity: 1; filter: blur(0); }
}

/* Nothing renders until the display face has loaded. Swapping from a fallback
   mid-animation re-flows the lockup and shifts the mark sideways, which is the
   drift that was visible on every load. */
.lockup--hero { visibility: hidden; }
.fonts-ready .lockup--hero { visibility: visible; }

/* Shared container
   Every band of content sits on this. Without it sections run edge to edge and
   the whole page collapses against the left rail. */
.open, .chapter, .closing__inner, .footer__grid, .footer__base {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.chapter--set { padding-inline: 0; }
.chapter--set > * {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Intro
   A full screen holding nothing but the logo. No tagline, no copy, no scroll
   prompt. The page begins when the reader decides it does. */

.intro {
  /* Height is held by the section itself, not its contents — the lockup is
     lifted out of flow on desktop and would otherwise take the screen with it. */
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--gutter);
}

/* Opening
   The first beat of content, sitting one screen down so the intro reads as a
   clean plate rather than a hero with a logo stuck on top. */

.open {
  padding-block: clamp(20px, 4vw, 48px) clamp(60px, 10vw, 120px);
}

.open__tag {
  overflow-wrap: break-word;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(40px, 8.2vw, 124px);
  line-height: 0.94;
  letter-spacing: -0.035em;
  margin: 0;
  max-width: 12ch;
}
/* "now" drops into a light serif italic — the one soft note against all that
   geometry, and it lands on the word that carries the meaning. */
.open__tag em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 0.82em;
  letter-spacing: -0.01em;
}

.open__foot {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(20px, 5vw, 64px);
  align-items: end;
  margin-top: clamp(40px, 6vw, 80px);
  padding-top: 26px;
  border-top: 1px solid var(--rule);
}
.open__sub {
  font-size: clamp(19px, 2.2vw, 26px);
  line-height: 1.4;
  margin: 0;
  max-width: 34ch;
}
.open__note {
  font-family: var(--display);
  font-size: 15px; line-height: 1.6;
  color: var(--muted); margin: 0;
}

@media (max-width: 1024px) {
  .intro { height: 78svh; min-height: 380px; place-items: center start; }
  .lockup--hero { gap: 12px; }
  .lockup--hero img { width: 54px; }
  .lockup--hero span { font-size: clamp(42px, 12vw, 68px); }
  .open__foot { grid-template-columns: 1fr; align-items: start; }
}

/* Figures
   Measured numbers, set as figures rather than boxed as stats. The rules do the
   separating so nothing needs a card. */

.figures {
  border-block: 1px solid var(--rule);
  background: var(--paper-2);
}
.figures__inner {
  max-width: var(--max);
  margin-inline: auto;
  padding: clamp(40px, 5vw, 64px) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(26px, 4vw, 52px);
}
.figures__n {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(44px, 5.4vw, 72px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin: 0 0 12px;
}
.figures__n span {
  font-size: 0.44em;
  letter-spacing: -0.01em;
  margin-left: 0.06em;
  color: var(--muted);
}
.figures__l {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--muted);
  max-width: 24ch;
}

/* Chapters */

.chapter { padding-block: clamp(56px, 9vw, 118px); }
.chapter--set {
  max-width: none;
  background: var(--paper-2);
  border-block: 1px solid var(--rule);
}
.chapter--set > * { max-width: var(--max); margin-inline: auto; }

.chapter__head {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: clamp(12px, 3vw, 40px);
  align-items: start;
}
.kicker {
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin: 10px 0 0;
}
.h2 {
  overflow-wrap: break-word;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(29px, 4.1vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0;
  max-width: 21ch;
}
@media (max-width: 1024px) {
  .chapter__head { grid-template-columns: 1fr; gap: 8px; }
  .kicker { margin-top: 0; }
}

.chapter__body {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: clamp(12px, 3vw, 40px);
  margin-top: clamp(24px, 4vw, 48px);
}
.chapter__body p {
  grid-column: 2;
  margin: 0 0 1.15em;
  color: var(--ink-2);
  max-width: 52ch;
}
.chapter__body p:last-child { margin-bottom: 0; }
@media (max-width: 1024px) {
  .chapter__body { grid-template-columns: 1fr; }
  .chapter__body p { grid-column: 1; }
}

/* Ledger */

.ledger { list-style: none; margin: clamp(36px, 6vw, 76px) 0 0; padding: 0; }
.ledger li {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: clamp(12px, 3vw, 40px);
  align-items: baseline;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
}
.ledger li:last-child { border-bottom: 1px solid var(--rule); }
.ledger span { font-family: var(--display); font-size: 14px; color: var(--muted); }
.ledger p {
  margin: 0;
  font-size: clamp(19px, 2.2vw, 25px);
  line-height: 1.35;
}
@media (max-width: 1024px) { .ledger li { grid-template-columns: 1fr; gap: 4px; } }

/* What it sees */

.see {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 72px);
  margin-top: clamp(36px, 6vw, 76px);
  align-items: start;
}
.see__post { margin: 0; }
.see__plate {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3;
  /* An abstraction of the photograph, not stock imagery — the section is about
     what a machine extracts, so a literal photo would undercut it. */
  background: linear-gradient(180deg, #2C3B54 0%, #3A5470 36%, #71796F 37%, #939788 63%, #6E7775 100%);
}
.see__plate i {
  position: absolute; left: 0; right: 0; top: -34%;
  height: 34%;
  background: linear-gradient(180deg, transparent, rgba(64,150,226,0.5), transparent);
}
.is-in .see__plate i { animation: sweep 2.4s var(--ease) 0.2s 2; }
@keyframes sweep { to { top: 100%; } }

.see__caption { font-size: 21px; margin: 16px 0 3px; }
.see__meta { font-family: var(--display); font-size: 14px; color: var(--muted); margin: 0; }
.see__verdict {
  font-family: var(--display);
  font-size: 15px; color: var(--muted);
  margin: 20px 0 0; padding-top: 14px;
  border-top: 1px solid var(--rule);
}

.see__read { margin: 0; }
.see__read > div {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid var(--rule);
}
.see__read > div:first-child { border-top: 0; padding-top: 0; }
.see__read dt {
  font-family: var(--display);
  font-size: 14px; color: var(--muted); padding-top: 3px;
}
.see__read dd { margin: 0; font-size: 17.5px; line-height: 1.45; }
@media (max-width: 1024px) {
  .see { grid-template-columns: 1fr; }
  .see__read > div { grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
}

.pullquote {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  max-width: 24ch;
  margin: clamp(40px, 6vw, 72px) 0 0;
  padding-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--rule-2);
}
.pullquote em { font-family: var(--serif); font-weight: 400; }

/* Stages */

.stages {
  list-style: none;
  counter-reset: stage;
  margin: clamp(36px, 6vw, 76px) 0 0;
  padding: 0;
}
.stages li {
  counter-increment: stage;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: clamp(12px, 3vw, 40px);
  padding: clamp(26px, 4vw, 44px) 0;
  border-top: 1px solid var(--rule);
}
.stages li:last-child { border-bottom: 1px solid var(--rule); }
.stages li::before {
  content: counter(stage, decimal-leading-zero);
  font-family: var(--display);
  font-size: 14px;
  color: var(--muted);
  padding-top: 6px;
}
.stages h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: -0.018em;
  margin: 0 0 12px;
}
.stages p { margin: 0; color: var(--ink-2); max-width: 58ch; }
.stages li > * { grid-column: 2; }
@media (max-width: 1024px) {
  .stages li { grid-template-columns: 1fr; }
  .stages li::before { grid-column: 1; padding-top: 0; }
  .stages li > * { grid-column: 1; }
}

/* Columns (live now) */

.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(26px, 4vw, 56px);
  margin-top: clamp(36px, 6vw, 76px);
  padding-top: 26px;
  border-top: 1px solid var(--rule-2);
}
.columns h3 {
  font-family: var(--display);
  font-weight: 700; font-size: 19px;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}
.columns ul { list-style: none; margin: 0; padding: 0; }
.columns li {
  font-size: 16.5px; line-height: 1.45;
  color: var(--ink-2);
  padding: 9px 0;
  border-top: 1px solid var(--rule);
}

/* Spec list */

.spec { margin: clamp(36px, 6vw, 76px) 0 0; }
.spec > div {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(12px, 3vw, 40px);
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
}
.spec > div:last-child { border-bottom: 1px solid var(--rule); }
.spec dt {
  font-family: var(--display);
  font-weight: 700; font-size: 19px;
  letter-spacing: -0.01em;
}
.spec dd { margin: 0; color: var(--ink-2); font-size: 17px; max-width: 54ch; }
@media (max-width: 1024px) { .spec > div { grid-template-columns: 1fr; gap: 4px; } }

/* Roadmap */

.roadmap { margin: clamp(36px, 6vw, 76px) 0 0; }
.roadmap > div {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(12px, 3vw, 40px);
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
}
.roadmap > div:last-child { border-bottom: 1px solid var(--rule); }
.roadmap dt {
  font-family: var(--display);
  font-weight: 700; font-size: 19px;
  letter-spacing: -0.01em;
}
.roadmap dd { margin: 0; color: var(--ink-2); font-size: 17px; max-width: 52ch; }
@media (max-width: 1024px) {
  .roadmap > div { grid-template-columns: 1fr; gap: 4px; }
}

/* Closing */

.closing {
  background: var(--paper-2);
  border-top: 1px solid var(--rule-2);
  padding-block: clamp(64px, 10vw, 130px);
  padding-inline: var(--gutter);
}
.closing__inner { max-width: 760px; margin-inline: auto; }
.closing p {
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0 0 1.1em;
}
.closing__turn {
  font-family: var(--display) !important;
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 54px) !important;
  line-height: 1.04;
  letter-spacing: -0.028em;
  color: var(--ink) !important;
  margin: 0.6em 0 0.7em !important;
}
.closing p:last-child { margin-bottom: 0; }

/* Footer
   Compact and typographic. Labels are small uppercase with wide tracking so the
   columns read as a set without needing rules or boxes between them. */

.footer {
  background: var(--paper);
  border-top: 1px solid var(--rule-2);
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.8fr) minmax(0, 1.05fr) minmax(0, 0.7fr);
  gap: clamp(28px, 4vw, 56px);
  padding-block: clamp(44px, 5vw, 68px) clamp(30px, 3.5vw, 44px);
}

.footer__brand img { width: 30px; margin-bottom: 18px; }
.footer__tag {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0;
  max-width: 11ch;
}

/* One label style for every column. */
.footer h4 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 16px;
}

.footer nav a {
  display: block;
  font-family: var(--display);
  font-size: 15.5px;
  line-height: 1.35;
  color: var(--ink-2);
  text-decoration: none;
  padding: 5px 0;
  transition: color 0.2s var(--ease);
}
.footer nav a:hover { color: var(--ink); }

/* Contact. Role above address, so the addresses align on one edge and the
   roles read as a quiet index down the left. */
.footer__contact p { margin: 0 0 13px; }
.footer__contact p:last-child { margin-bottom: 0; }
.footer__contact span {
  display: block;
  font-family: var(--display);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.footer__contact a {
  font-family: var(--display);
  font-size: 15.5px;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.footer__contact a:hover { color: var(--ink); border-bottom-color: var(--rule-2); }

.footer__base {
  display: flex; flex-wrap: wrap; gap: 6px 28px;
  justify-content: space-between; align-items: baseline;
  padding-block: 18px 26px;
  border-top: 1px solid var(--rule);
  font-family: var(--display);
  font-size: 13.5px;
  letter-spacing: 0.005em;
  color: var(--muted);
}
.footer__base p { margin: 0; }
.footer__base a {
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-2);
  padding-bottom: 1px;
  transition: color 0.2s var(--ease);
}
.footer__base a:hover { color: var(--ink); }
.footer__legal { white-space: nowrap; }
.footer__legal .sep { margin: 0 9px; opacity: 0.4; }

/* Motion */

.motion [data-reveal],
.motion [data-stagger] > * { opacity: 0; transform: translateY(14px); }

[data-reveal], [data-stagger] > * {
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.motion .is-in[data-reveal],
.motion .is-in > * { opacity: 1; transform: none; }

[data-reveal-delay="1"] { transition-delay: 0.06s; }
[data-reveal-delay="2"] { transition-delay: 0.12s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .motion [data-reveal], .motion [data-stagger] > * { opacity: 1; transform: none; }
  .blade, .blades, .lockup--hero span {
    animation: none; opacity: 1; filter: none; transform: none;
  }
}


/* ───────────────────────────────────────────────────────────────────────────
   Phone and tablet

   Different experience, not a squeezed desktop. The lockup does not travel —
   the intro simply scrolls away like any other content — and the page is tuned
   for a single column and a thumb.
   ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {

  body { font-size: 17.5px; line-height: 1.58; }

  /* Intro keeps the full screen and stays centred, exactly as on desktop. */
  .intro {
    min-height: 100svh;
    justify-content: center;
    text-align: center;
  }
  .lockup--hero { gap: clamp(10px, 2.4vw, 18px); }
  .mark-svg { width: clamp(56px, 13vw, 92px); }
  .lockup--hero span { font-size: clamp(46px, 13vw, 96px); }

  /* The bar holds off until the intro has scrolled away, so the logo is not
     duplicated on the opening screen. */
  .masthead .lockup--nav { opacity: 0; transition: opacity 0.35s var(--ease); }
  .masthead.is-stuck .lockup--nav { opacity: 1; }
  .lockup--nav { padding: 15px var(--gutter); }
  .lockup--nav img { width: 26px; }
  .lockup--nav span { font-size: 20px; }

  /* Single column everywhere. The label rails become stacked eyebrows. */
  .chapter { padding-block: clamp(44px, 9vw, 72px); }
  .chapter__head,
  .chapter__body,
  .ledger li,
  .stages li,
  .spec > div,
  .roadmap > div { grid-template-columns: 1fr; gap: 6px; }

  .chapter__body { margin-top: 20px; }
  .chapter__body p,
  .stages p,
  .spec dd,
  .roadmap dd { max-width: none; }

  .kicker { margin: 0 0 10px; }
  .h2 { font-size: clamp(28px, 6.4vw, 40px); max-width: none; }

  .open { padding-block: clamp(36px, 8vw, 56px) clamp(44px, 9vw, 72px); }
  .open__tag { font-size: clamp(38px, 11vw, 68px); max-width: none; }
  .open__foot { margin-top: 32px; padding-top: 20px; }
  .open__sub { font-size: clamp(18px, 4.6vw, 22px); max-width: none; }

  .stages li,
  .spec > div,
  .roadmap > div { padding-block: 20px; }
  .stages li::before { padding-top: 0; margin-bottom: 4px; }
  .stages h3 { font-size: clamp(19px, 5vw, 24px); margin-bottom: 8px; }

  /* Two up on a phone reads better than a single tall stack of numbers. */
  .figures__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 20px;
    padding-block: 36px;
  }
  .figures__n { font-size: clamp(34px, 9vw, 52px); margin-bottom: 8px; }
  .figures__l { font-size: 14px; max-width: none; }

  .columns { gap: 28px; }

  .closing { padding-block: clamp(48px, 10vw, 80px); }
  .closing p { font-size: clamp(18px, 4.4vw, 21px); }
  .closing__turn { font-size: clamp(28px, 7.4vw, 40px) !important; }

  /* Footer, rebuilt for a single column rather than hidden. It carries the
     VeWeb attribution and the only outbound links on the page, so removing it
     on the screens most people arrive on left the site a dead end. */
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 20px;
    padding-block: 38px 26px;
  }
  .footer__brand,
  .footer__contact { grid-column: 1 / -1; }
  .footer__brand img { width: 26px; margin-bottom: 12px; }
  .footer__tag { font-size: clamp(19px, 5vw, 23px); max-width: 10ch; }
  .footer h4 { margin-bottom: 12px; }
  .footer nav a { font-size: 15px; padding: 6px 0; }
  .footer__contact a { font-size: 16px; }

  .footer__base {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-block: 16px 24px;
    font-size: 11px;
  }
  .footer__brand img { width: 28px; margin-bottom: 12px; }
  .footer__tag { font-size: clamp(19px, 5.4vw, 24px); max-width: 10ch; }
  .footer h4 { margin-bottom: 10px; }
  .footer nav a { font-size: 15px; padding: 7px 0; }

  .footer__base {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-block: 18px 26px;
    font-size: 13.5px;
  }
}

/* Narrow phones: ease the display type down one more step so headings do not
   run to five and six lines. */
@media (max-width: 480px) {
  .open__tag { font-size: clamp(34px, 12vw, 46px); }
  .h2 { font-size: clamp(26px, 7.6vw, 32px); }
  .figures__inner { grid-template-columns: 1fr; gap: 24px; }
}