/* ===========================================================================
   Landing page only.

   Committed dark palette rather than following the system theme. An earlier
   version put a dark hero on a themed page, which meant anyone in dark mode
   got dark-on-dark: the hero stopped reading as a surface and the page went
   flat. Fixed colours mean what is designed here is what everyone sees.

   The documentation and legal pages keep style.css and its light default,
   because a page of terms should look like terms.
   =========================================================================== */

/*
  The palette lives in style.css :root and is shared with every other page.
  Nothing colour-related is redefined here - the landing page is the same
  world as the terms, seen from a different room.
*/

.lp {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 28px;
}

/* --------------------------------------------------------- scroll progress */

/*
  A hairline that fills as the page is read. It is the one piece of chrome
  that tells you this page has a length and you are moving through it, which
  is what makes a scroll feel like a story rather than a list.
*/
.lp-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--tint), var(--tint-lit));
  will-change: transform;
}

/* ---------------------------------------------------------------- masthead */

/*
  The bar sits outside the hero band on purpose. A sticky element cannot
  escape its parent's box, and any ancestor with `overflow: hidden` - which
  the band needs, to clip its aurora - becomes the sticky container and drops
  it as soon as that ancestor scrolls away. So the bar is a sibling.

  Its resting colour matches the very top of the band's gradient, which makes
  the seam between them invisible until it lifts into a blurred bar.
*/
.lp-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #0b1015;
  border-bottom: 1px solid transparent;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease),
    backdrop-filter 0.3s var(--ease);
}

.lp-topbar.is-stuck {
  background: rgba(7, 9, 12, 0.78);
  border-bottom-color: var(--line);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* .lp-topbar is the sticky element here, so the masthead itself steps back
   from the treatment style.css gives it on every other page. */
.landing .masthead {
  position: static;
  padding: 16px 0;
  border-bottom: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.landing .masthead nav a {
  color: var(--hush);
  border-bottom: 0;
  transition: color 0.18s var(--ease);
}

.landing .masthead nav a:hover {
  color: var(--tint);
}

.landing .wordmark {
  color: var(--ink);
}

/* --------------------------------------------------------------- top band */

/*
  The band itself does not clip, so it never becomes a sticky container for
  anything. All the clipping happens in the backdrop layer below it.
*/
.lp-band {
  position: relative;
}

.lp-band > .lp {
  position: relative;
  z-index: 1;
}

.lp-band__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #0b1015 0%, var(--ground) 100%);
  pointer-events: none;
}

/*
  Aurora. Two soft blooms drifting on a long loop - slow enough that it reads
  as depth rather than animation, which is the difference between alive and
  busy.
*/
.lp-band__bg::after {
  content: "";
  position: absolute;
  inset: -35%;
  background:
    radial-gradient(38% 44% at 74% 26%, rgba(78, 201, 168, 0.3) 0%, transparent 62%),
    radial-gradient(34% 40% at 22% 68%, rgba(64, 148, 214, 0.16) 0%, transparent 66%);
  filter: blur(28px);
  animation: lp-drift 38s ease-in-out infinite alternate;
  will-change: transform;
  pointer-events: none;
}

@keyframes lp-drift {
  from {
    transform: translate3d(-4%, -2%, 0) scale(1);
  }
  to {
    transform: translate3d(6%, 4%, 0) scale(1.14);
  }
}

/* A fine grid, faded at the edges, for technical texture. */
.lp-band__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(120% 92% at 50% 0%, #000 20%, transparent 76%);
  -webkit-mask-image: radial-gradient(120% 92% at 50% 0%, #000 20%, transparent 76%);
  pointer-events: none;
}

/* -------------------------------------------------------------------- hero */

.lp-hero {
  padding: clamp(56px, 8vw, 108px) 0 clamp(56px, 8vw, 100px);
}

.lp-eyebrow {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 clamp(20px, 2.6vw, 30px);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--tint);
}

.lp-eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(78, 201, 168, 0.4), transparent);
}

.lp-hero h1 {
  margin: 0 0 clamp(20px, 2.6vw, 30px);
  max-width: 15ch;
  font-size: clamp(40px, 7.4vw, 84px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.038em;
  color: #fdfeff;
}

/* Flat accent is the base; the gradient is the enhancement, so no browser
   ends up with `color: transparent` and half a headline missing. */
.lp-hero h1 em {
  font-style: normal;
  color: var(--tint-lit);
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .lp-hero h1 em {
    background: linear-gradient(94deg, var(--tint) 8%, var(--tint-lit) 92%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.lp-hero__lede {
  margin: 0 0 clamp(30px, 3.6vw, 40px);
  max-width: 54ch;
  font-size: clamp(16.5px, 1.7vw, 19.5px);
  line-height: 1.6;
  color: var(--dim);
}

.lp-hero__lede strong {
  color: var(--ink);
  font-weight: 600;
}

/* ----------------------------------------------------------------- buttons */

.lp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.lp-btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  border: 1px solid var(--line-lit);
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 550;
  text-decoration: none;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease),
    transform 0.18s var(--ease);
}

.lp-btn:hover {
  border-color: var(--tint);
  color: var(--tint);
  transform: translateY(-1px);
}

.lp-btn--solid {
  border-color: var(--tint);
  background: var(--tint);
  color: #04100c;
  font-weight: 620;
  box-shadow: 0 0 0 1px rgba(78, 201, 168, 0.18),
    0 10px 34px -12px rgba(78, 201, 168, 0.6);
}

.lp-btn--solid:hover {
  border-color: var(--tint-lit);
  background: var(--tint-lit);
  color: #04100c;
}

/* ------------------------------------------------------------- figure rail */

.lp-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin: clamp(44px, 6vw, 76px) 0 0;
  border-top: 1px solid var(--line);
}

.lp-rail div {
  padding: 22px 22px 0 0;
}

.lp-rail b {
  display: block;
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--tint);
}

.lp-rail span {
  display: block;
  margin-top: 9px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--hush);
}

/* ---------------------------------------------------------------- chapters */

/*
  Numbered, because the page is an argument in order: what goes wrong, what we
  do instead, what that has produced, where the same idea goes next, and how
  to check any of it. The numbers are the reader's position in that argument.
*/
.landing main {
  padding: 0;
}

.lp-chapter {
  padding: clamp(72px, 9vw, 128px) 0;
}

.lp-chapter + .lp-chapter {
  border-top: 1px solid var(--line);
}

.lp-chapter__head {
  margin: 0 0 clamp(32px, 4vw, 52px);
  max-width: 62ch;
}

.lp-chapter__num {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--hush);
}

.lp-chapter__num b {
  font-weight: 600;
  color: var(--tint);
}

.lp-chapter__num::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.lp-chapter__head h2 {
  margin: 0 0 16px;
  font-size: clamp(28px, 4.2vw, 48px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.032em;
  color: #fdfeff;
}

.lp-chapter__head p {
  margin: 0;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.62;
  color: var(--dim);
}

/* ------------------------------------------------------------- pull quotes */

/*
  One large sentence carrying the turn in the argument. A story needs a line
  the reader can repeat, and it should not look like body copy.
*/
.lp-turn {
  margin: clamp(36px, 5vw, 60px) 0 0;
  padding-left: clamp(20px, 3vw, 34px);
  border-left: 2px solid var(--tint);
  max-width: 30ch;
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.028em;
  color: var(--ink);
}

.lp-turn em {
  font-style: normal;
  color: var(--tint);
}

/* ---------------------------------------------------------- the boundary  */

/*
  The diagram for chapter 02. Traffic circulates inside the customer's own
  tenancy and the region outside it is deliberately empty - that is the whole
  architecture in one picture, and it is easier to see than to read.
*/
.lp-diagram {
  position: relative;
  margin: clamp(36px, 5vw, 56px) 0 0;
  padding: clamp(24px, 3.4vw, 40px);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(158deg, var(--raised) 0%, var(--surface) 72%);
}

.lp-diagram svg {
  display: block;
  width: 100%;
  height: auto;
}

.lp-diagram__caption {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--hush);
}

.lp-diagram__caption b {
  color: var(--tint);
  font-weight: 600;
}

/* Flow along the connectors: the page is showing work happening. */
.lp-flow {
  stroke-dasharray: 5 9;
  animation: lp-run 1.5s linear infinite;
}

@keyframes lp-run {
  to {
    stroke-dashoffset: -14;
  }
}

.lp-pulse {
  animation: lp-breathe 3.4s ease-in-out infinite;
  transform-origin: center;
}

.lp-pulse--b {
  animation-delay: 1.1s;
}

.lp-pulse--c {
  animation-delay: 2.2s;
}

@keyframes lp-breathe {
  0%,
  100% {
    opacity: 0.32;
    r: 25;
  }
  50% {
    opacity: 0.06;
    r: 34;
  }
}

/* ------------------------------------------------------------------- cards */

.lp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.landing .record {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(168deg, var(--raised) 0%, var(--surface) 62%);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

.landing .record:hover {
  border-color: rgba(78, 201, 168, 0.45);
  transform: translateY(-3px);
  box-shadow: 0 20px 48px -26px rgba(0, 0, 0, 0.95);
}

.landing .record__name {
  margin: 0 0 10px;
  font-size: 18.5px;
  font-weight: 620;
  letter-spacing: -0.017em;
  color: var(--ink);
  transition: color 0.18s var(--ease);
}

.landing .record:hover .record__name {
  color: var(--tint);
}

.landing .record__desc {
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--dim);
}

.landing .record__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: auto;
}

.landing .tag {
  padding: 4px 9px;
  border: 1px solid var(--line-lit);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.02);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hush);
}

.landing .tag--accent {
  border-color: rgba(78, 201, 168, 0.4);
  background: rgba(78, 201, 168, 0.09);
  color: var(--tint);
}

/* ----------------------------------------------------------------- feature */

.lp-feature {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
  padding: clamp(26px, 3.4vw, 40px);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(158deg, var(--raised) 0%, var(--surface) 70%);
}

.lp-feature__body h3 {
  margin: 0 0 14px;
  font-size: clamp(20px, 2.3vw, 25px);
  font-weight: 620;
  line-height: 1.22;
  letter-spacing: -0.022em;
  color: var(--ink);
}

.lp-feature__body p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.68;
  color: var(--dim);
}

.lp-feature__body p:last-child {
  margin-bottom: 0;
}

/* Darker than the panel holding it, so it reads as inset. */
.landing pre.lp-code {
  margin: 0;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #05070a;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.8;
  color: #97a5b4;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.lp-code b {
  color: var(--tint-lit);
  font-weight: 500;
}

.lp-code i {
  font-style: normal;
  color: #dfe7ef;
}

.lp-code__bar {
  display: flex;
  gap: 6px;
  margin-bottom: 15px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.lp-code__bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #1e262f;
}

/* --------------------------------------------------------------- aion run */

/*
  A run, not an illustration. One program fans out to forty concurrent calls
  and comes back as a single answer, and the two meters underneath are the
  measured result of a real forty-file review: 22,451 characters produced,
  315 returned. The gap between those two bars is the entire argument for the
  tool, and it is more persuasive drawn than described.

  The sequence runs only while it is on screen - landing.js toggles
  .is-running - so it costs nothing when nobody is looking at it.
*/
.aion-run {
  margin: 16px 0 0;
  padding: clamp(24px, 3.4vw, 38px);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(158deg, var(--raised) 0%, var(--surface) 70%);
}

/*
  Stretched, not centred: the fan's height depends on how wide the column ends
  up, so the wires have to take their height from the row rather than guess at
  one. With preserveAspectRatio="none" they stretch to meet it. The end nodes
  opt back out and stay centred.
*/
.aion-run__stage {
  display: grid;
  grid-template-columns: auto minmax(34px, 64px) 1fr minmax(34px, 64px) auto;
  align-items: stretch;
}

/* ---- the two end nodes ---- */

.aion-node {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 14px;
  min-width: 92px;
  border: 1px solid var(--line-lit);
  border-radius: 9px;
  background: #05070a;
}

.aion-node b {
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.aion-node span {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hush);
  text-align: center;
}

/* The answer node only lights once the wave has finished arriving. */
.aion-node--out {
  border-color: var(--line-lit);
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.is-running .aion-node--out {
  animation: aion-land 7s var(--ease) infinite;
}

@keyframes aion-land {
  0%,
  58% {
    border-color: var(--line-lit);
    box-shadow: none;
  }
  70%,
  92% {
    border-color: var(--tint);
    box-shadow: 0 0 0 1px rgba(78, 201, 168, 0.25),
      0 10px 34px -14px rgba(78, 201, 168, 0.7);
  }
  100% {
    border-color: var(--line-lit);
    box-shadow: none;
  }
}

.is-running .aion-node--out b {
  animation: aion-lit 7s var(--ease) infinite;
}

@keyframes aion-lit {
  0%,
  58% {
    color: var(--ink);
  }
  70%,
  92% {
    color: var(--tint);
  }
  100% {
    color: var(--ink);
  }
}

/* ---- the connectors ---- */

.aion-wires {
  width: 100%;
  height: 100%;
  min-height: 84px;
  overflow: visible;
}

.aion-wires path {
  fill: none;
  stroke: var(--line-lit);
  stroke-width: 1.2;
}

.is-running .aion-wires path {
  stroke: var(--tint);
  stroke-dasharray: 4 8;
  animation: aion-wire 7s linear infinite;
}

/* Out-bound wires carry first; the return leg carries after the fan is done. */
@keyframes aion-wire {
  0% {
    stroke-dashoffset: 0;
    opacity: 0.15;
  }
  12%,
  52% {
    opacity: 0.85;
  }
  100% {
    stroke-dashoffset: -240;
    opacity: 0.15;
  }
}

.aion-wires--back path {
  animation-delay: 0.9s;
}

/* ---- the forty calls ---- */

.aion-fan {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 5px;
  padding: 0 clamp(8px, 1.6vw, 18px);
}

.aion-fan i {
  display: block;
  aspect-ratio: 1;
  border-radius: 2px;
  background: #10161d;
  box-shadow: inset 0 0 0 1px var(--line);
}

/*
  Each cell is one model call. They fire in a staggered wave rather than in
  unison because forty concurrent calls do not return at the same instant,
  and a wave shows the concurrency that a simultaneous flash would hide.
*/
.is-running .aion-fan i {
  animation: aion-cell 7s var(--ease) infinite;
  animation-delay: calc(var(--i) * 42ms);
}

@keyframes aion-cell {
  0%,
  6% {
    background: #10161d;
    box-shadow: inset 0 0 0 1px var(--line);
  }
  14% {
    background: rgba(78, 201, 168, 0.85);
    box-shadow: inset 0 0 0 1px var(--tint), 0 0 12px -2px rgba(78, 201, 168, 0.8);
  }
  30%,
  60% {
    background: rgba(78, 201, 168, 0.22);
    box-shadow: inset 0 0 0 1px rgba(78, 201, 168, 0.5);
  }
  78%,
  100% {
    background: #10161d;
    box-shadow: inset 0 0 0 1px var(--line);
  }
}

/* ---- the ledger ---- */

.aion-ledger {
  margin: clamp(24px, 3vw, 34px) 0 0;
  padding-top: clamp(20px, 2.6vw, 26px);
  border-top: 1px solid var(--line);
  display: grid;
  gap: 14px;
}

.aion-meter {
  display: grid;
  grid-template-columns: minmax(0, 200px) 1fr auto;
  align-items: center;
  gap: 16px;
}

.aion-meter__k {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hush);
}

.aion-meter__bar {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: #10161d;
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}

.aion-meter__bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  border-radius: 4px;
  background: var(--line-lit);
}

.aion-meter--kept .aion-meter__bar i {
  background: linear-gradient(90deg, var(--tint), var(--tint-lit));
  min-width: 3px;
}

.is-running .aion-meter__bar i {
  animation: aion-fill 7s var(--ease) infinite;
}

@keyframes aion-fill {
  0%,
  46% {
    width: 0;
  }
  66%,
  92% {
    width: var(--w);
  }
  100% {
    width: 0;
  }
}

.aion-meter__v {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--dim);
  white-space: nowrap;
}

.aion-meter--kept .aion-meter__v {
  color: var(--tint);
}

.aion-run__note {
  margin: 18px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--hush);
}

.aion-run__note b {
  color: var(--tint);
  font-weight: 600;
}

/* ------------------------------------------------------------------ proofs */

.lp-proofs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--line);
  overflow: hidden;
}

.lp-proof {
  padding: clamp(22px, 2.8vw, 28px);
  background: var(--surface);
  transition: background 0.2s var(--ease);
}

.lp-proof:hover {
  background: var(--raised);
}

.lp-proof__key {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tint);
}

.lp-proof__val {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--dim);
}

/* ------------------------------------------------------------------- aside */

.lp-proofs + .lp-aside {
  margin-top: clamp(28px, 3.5vw, 44px);
}

.lp-aside {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding: 22px 26px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s var(--ease);
}

.lp-aside:hover {
  border-color: rgba(78, 201, 168, 0.45);
}

.lp-aside__text {
  display: block;
  max-width: 60ch;
}

.lp-aside__kicker {
  display: block;
  margin-bottom: 7px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--hush);
}

.lp-aside__title {
  display: block;
  margin-bottom: 5px;
  font-size: 16.5px;
  font-weight: 620;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.lp-aside__desc {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  color: var(--dim);
}

.lp-aside__go {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tint);
}

/* ------------------------------------------------------------------ footer */

.landing .colophon {
  margin-top: 0;
  padding: 24px 0 44px;
  border-top: 1px solid var(--line);
  color: var(--hush);
}

.landing .colophon a {
  color: var(--hush);
}

.landing .colophon a:hover {
  color: var(--tint);
}

/* ----------------------------------------------------------------- reveals */

/*
  Guarded by .js so that without scripting every section is simply visible.
  A page that hides its content until JavaScript says otherwise is a page that
  can fail to say anything at all.
*/
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

.js .reveal--d1 {
  transition-delay: 0.08s;
}

.js .reveal--d2 {
  transition-delay: 0.16s;
}

.js .reveal--d3 {
  transition-delay: 0.24s;
}

/* -------------------------------------------------------------- responsive */

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

@media (max-width: 720px) {
  /* The wires need horizontal room to read as a fan; without it they are
     noise, so the stage stacks and they go. */
  .aion-run__stage {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 18px;
  }
  .aion-wires {
    display: none;
  }
  .aion-fan {
    width: 100%;
    padding: 0;
  }
  .aion-meter {
    grid-template-columns: 1fr auto;
  }
  .aion-meter__bar {
    grid-column: 1 / -1;
    order: 3;
  }
}

@media (max-width: 560px) {
  .lp-hero h1 {
    max-width: none;
  }
  .lp-rail div {
    padding-right: 0;
  }
  .lp-aside {
    justify-content: flex-start;
  }
  .lp-diagram {
    padding: 18px;
  }
}

/* ---------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  .lp-band__bg::after,
  .lp-flow,
  .lp-pulse {
    animation: none;
  }

  /*
    The run resolves to its finished state rather than simply freezing at the
    start, so a reader who asked for stillness still sees the result the
    animation exists to show.
  */
  .is-running .aion-fan i,
  .is-running .aion-wires path,
  .is-running .aion-node--out,
  .is-running .aion-node--out b,
  .is-running .aion-meter__bar i {
    animation: none;
  }
  .aion-fan i {
    background: rgba(78, 201, 168, 0.22);
    box-shadow: inset 0 0 0 1px rgba(78, 201, 168, 0.5);
  }
  .aion-meter__bar i {
    width: var(--w);
  }
  .aion-node--out {
    border-color: var(--tint);
  }
  .aion-node--out b {
    color: var(--tint);
  }
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .landing .record,
  .lp-btn,
  .lp-aside,
  .lp-topbar {
    transition: none;
  }
  .landing .record:hover,
  .lp-btn:hover {
    transform: none;
  }
  .lp-progress {
    display: none;
  }
}