/* landing.css — the machine, for the front page only.
 *
 * Every color is a token from app.css; every gap is a step of the scale.
 * Held to the same lint as the page it dresses.
 *
 * THE MOTIF. One shape repeats over the whole page: a cell, 7px by 14px,
 * either off (--dark-3 on ink, --line on slab) or lit (--hivis). It is the
 * rack LED, the packet travelling the wire, the marquee separator, the beat
 * tick, the bullet on a fact and the caret in the terminal. Everything that
 * moves on this page is that one cell, lighting or travelling, which is why
 * the page reads as one machine rather than a pile of effects.
 *
 * THE VOICES. Two, deliberately far apart and with nothing in between: the
 * display face at weight 900 and 40-92px with -.045em tracking, and the mono
 * face at 11-13px, weight 700, tracked out to .18em. The missing middle is
 * the point.
 *
 * THE BANDS. Ink is the product's native environment, so the machine runs in
 * it and the pale slab is RELIEF between dark sections, never the default:
 * ink, lime, INK, slab, INK, slab, INK, slab. The proof band is the one that
 * moved to paper, because a receipt is printed.
 *
 * Lime always means on. Red appears exactly once, on the one device that
 * needs the office.
 */

/* ---------- the page's own voice ---------- */
.lp-hero .eyebrow, .lp-plain .eyebrow, .lp-trade .eyebrow,
.lp-receipts .eyebrow, .lp-close .eyebrow {
  font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; margin-bottom:var(--s3);
}
.lp-trade .eyebrow, .lp-close .eyebrow { color:var(--hivis); }
.lp-plain .eyebrow { color:var(--go-ink); }
.lp-receipts .eyebrow { color:var(--go-ink); }
.lp-plain h2, .lp-trade h2, .lp-receipts h2, .lp-close h2 {
  font-size:clamp(28px, 3.6vw, 46px); line-height:1.02; letter-spacing:-.03em;
  font-weight:800; text-transform:none; margin:0;
}
.lp-plain .lead, .lp-receipts .lead { color:var(--ink-2); font-size:17px; line-height:1.5;
  margin:var(--s4) 0 0; max-width:62ch; }
.lp-trade .lead, .lp-close .lead { color:var(--dim-on-dark); font-size:17px; line-height:1.5;
  margin:var(--s4) 0 0; max-width:62ch; }

/* ---------- the pointer light ----------
 * One element, painted once, moved by transform. The gradient is never
 * recomputed, so following the pointer costs a composite and nothing else. */
.lp-glow { position:absolute; left:0; top:0; width:640px; height:640px; margin:-320px 0 0 -320px;
  border-radius:var(--r-pill); pointer-events:none; z-index:1; will-change:transform;
  background:radial-gradient(circle closest-side, var(--hivis), transparent); }

/* ---------- the rack, in the hero ---------- */
.hw-rack { position:relative; display:grid; gap:var(--s4); align-content:center; }
.hw-node { background:var(--dark-1); border:1px solid var(--dark-3); border-radius:var(--r-md);
  padding:var(--s4); transform-origin:50% 100%; }
.hw-nhd { display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; }
.hw-nhd b { font-family:var(--mono); font-size:12px; letter-spacing:.18em; color:var(--dark-ink-2); }
.hw-sleds { display:grid; gap:var(--s2); margin-top:var(--s4); }
.hw-sleds u { display:block; height:14px; border-radius:2px; background:var(--dark-2);
  border-left:3px solid var(--dark-3); }

/* the lane: the off cells are the lane's own background, the lit ones are
 * the children, so lighting one is an opacity and nothing else */
.hw-lane { display:inline-flex; gap:var(--s1); height:14px; align-items:stretch; vertical-align:middle;
  background:repeating-linear-gradient(90deg, var(--dark-3) 0 7px, transparent 7px 11px); }
.hw-lane i { display:block; width:7px; border-radius:2px; background:var(--hivis); color:var(--hivis-ink); }
.hw-lane.hw-dk { background:repeating-linear-gradient(90deg, var(--line) 0 7px, transparent 7px 11px); }

/* ---------- the marquee ---------- */
.lp-marq { background:var(--hivis); color:var(--hivis-ink); overflow:hidden; padding:var(--s3) 0;
  border-bottom:3px solid var(--ink); }
.lp-track { display:flex; align-items:center; gap:var(--s4); width:max-content;
  font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.18em;
  will-change:transform; animation:lp-run 32s linear infinite; }
.lp-track i { display:block; width:7px; height:14px; border-radius:2px; background:var(--hivis-ink);
  color:var(--hivis); flex:0 0 auto; }
.lp-track span { flex:0 0 auto; }
@keyframes lp-run { from { transform:translate3d(0,0,0); } to { transform:translate3d(-50%,0,0); } }
.lp-marq.lp-off .lp-track { animation-play-state:paused; }

/* ---------- the machine's band: ink, and the stage sticks ---------- */
.lp-scroll { position:relative; height:300vh; background:var(--ink); color:var(--dark-ink);
  border-bottom:3px solid var(--hivis); }
.lp-stage { position:sticky; top:0; height:100vh; display:grid;
  grid-template-columns:320px 1fr; gap:var(--s6); overflow:hidden;
  align-items:center; max-width:1280px; margin:0 auto; padding:0 var(--s5); }
.lp-side { position:relative; align-self:center; }

/* the beat meter: which beat, of how many, so a pin is progress and not a trap */
.lp-meter { display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s5); }
.lp-mn { font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.18em;
  color:var(--dark-ink-2); white-space:nowrap; }
.lp-num { display:inline-block; width:2ch; text-align:left; color:var(--hivis); }
.lp-mn .lp-num + .lp-num { margin-left:-2ch; }
.lp-caps { position:relative; min-height:260px; }
.lp-cap { position:absolute; left:0; right:0; top:0; }
.lp-cap h3 { font-size:clamp(24px, 2.8vw, 34px); line-height:1.04; letter-spacing:-.028em;
  font-weight:800; margin:0; text-transform:none; color:var(--chalk); }
.lp-cap p { color:var(--dim-on-dark); font-size:16px; line-height:1.5; margin:var(--s4) 0 0; max-width:42ch; }
.lp-view { position:relative; height:100%; display:flex; align-items:center; }

/* ---------- the machine itself: one canvas, everything placed on it ----------
 * Absolutely placed so a beat can re-stage — a card can shrink and move left
 * while a device arrives from the right — instead of every beat being the same
 * grid with a different chip in it. */
.hw-net { position:relative; width:100%; height:460px; }
/* a light card standing inside a dark band: it has to say its own ink, or
 * everything in it that does not name a color inherits the band's pale text
 * and lands white-on-white */
.hw-card { position:absolute; background:var(--card); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-lift);
  overflow:hidden; }
.hw-card.hw-big { left:50%; top:50%; width:min(460px,100%); margin-left:calc(min(460px,100%) / -2);
  margin-top:-150px; }
.hw-card.hw-small { left:0; top:50%; width:216px; margin-top:-56px; }
.hw-cband { height:6px; background:var(--hivis); color:var(--hivis-ink); }
.hw-cin { padding:var(--s3) var(--s4) var(--s4); }
.hw-cin .k { font-family:var(--mono); font-size:11px; letter-spacing:.16em; font-weight:700;
  color:var(--ink-3); }
.hw-cin .j { font-weight:800; font-size:19px; letter-spacing:-.02em; margin-top:2px; }
.hw-cin .a { color:var(--ink-2); font-size:14px; margin-top:2px; }
.hw-card.hw-small .j { font-size:15px; }
.hw-card.hw-small .a { font-size:12px; }
.hw-who { margin-top:var(--s2); font-size:14px; font-weight:700; color:var(--ink); }
.hw-who em, .hw-cin em, .hw-cnt em { font-style:normal; color:var(--ink-3); }
.hw-chips { display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:var(--s3); }
.hw-chip { display:inline-block; font-size:12px; font-weight:700; padding:2px var(--s2);
  border-radius:var(--r-pill); background:var(--slab); color:var(--ink); white-space:nowrap; }
.hw-cin .hw-lane { margin-top:var(--s3); }
.hw-cnt { margin-top:var(--s3); font-size:13px; font-weight:700; color:var(--go-ink); }
.hw-th { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s2); margin-top:var(--s3); }
.hw-th i { display:block; height:44px; border-radius:var(--r-xs); background:var(--slab-deep);
  border-top:3px solid var(--hivis); }
.hw-card .hw-tag { position:absolute; right:var(--s4); bottom:var(--s4); }

/* ---------- the wire, and what travels it ---------- */
.hw-wire { position:absolute; left:230px; right:280px; top:50%; height:2px; background:var(--hivis);
  color:var(--hivis-ink); transform-origin:0 50%; }
.hw-wire.hw-dead { background:repeating-linear-gradient(90deg, var(--dark-3) 0 6px, transparent 6px 12px); }
.hw-pkt { position:absolute; left:230px; top:calc(50% - 7px); width:7px; height:14px;
  border-radius:2px; background:var(--hivis); color:var(--hivis-ink); }

/* ---------- a device, and the work on its screen ---------- */
.hw-dev { border:1px solid var(--dark-3); border-radius:var(--r-sm); padding:var(--s2);
  background:var(--dark-1); min-width:84px; }
.hw-dev.hw-one { position:absolute; right:0; top:50%; width:264px; margin-top:-124px; }
.hw-dev .hw-scr { display:block; border-radius:var(--r-xs); background:var(--dark-2);
  border-top:2px solid var(--hivis); padding:var(--s2); }
.hw-dev b { display:block; margin-top:var(--s1); font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; color:var(--dark-ink-2); white-space:nowrap; }
/* a scrap of a real day, at the size it is actually read from across a room */
/* --dark-ink-3 measures 4.12:1 on this surface and this is 9px type, which
 * gets no large-text exemption — so it reads the next ink up. */
.hw-scr .s-k { display:flex; justify-content:space-between; font-family:var(--mono); font-size:9px;
  letter-spacing:.1em; color:var(--dark-ink-2); }
.hw-scr .s-k em { font-style:normal; color:var(--hivis); }
.hw-scr .s-j { display:block; font-size:11px; font-weight:800; color:var(--chalk); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hw-scr .s-r { display:block; position:relative; font-size:9px; color:var(--dark-ink-2);
  padding-left:var(--s3); margin-top:var(--s1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hw-scr .s-r::before { content:""; position:absolute; left:0; top:2px; width:5px; height:9px;
  border-radius:1px; background:var(--dark-3); }
.hw-scr .s-r.on::before { background:var(--hivis); color:var(--hivis-ink); }
.hw-scr .s-r.on { color:var(--dark-ink); }
.hw-scr .s-f { display:block; font-family:var(--mono); font-size:9px; color:var(--dark-ink-3);
  margin-top:var(--s2); }
.hw-scr .s-f em { font-style:normal; }
.hw-dev.hw-one .hw-scr .s-k, .hw-dev.hw-one .hw-scr .s-r, .hw-dev.hw-one .hw-scr .s-f { font-size:12px; }
.hw-dev.hw-one .hw-scr .s-j { font-size:17px; }
.hw-dev.hw-one .hw-scr .s-r { padding-left:var(--s4); margin-top:var(--s2); }
.hw-dev.hw-one .hw-scr .s-r::before { width:7px; height:14px; top:1px; }
.hw-dev.hw-one b { font-size:12px; }

.hw-fleet { display:flex; gap:var(--s3); flex-wrap:wrap; align-items:flex-start; }
/* the fleet keeps to the far side of the wire: the office end of the canvas
 * belongs to the order, and a device sitting on top of it reads as a bug */
.hw-fleet.hw-grid { position:absolute; left:268px; right:0; top:0; bottom:0; display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr));
  gap:var(--s3); align-content:center; }

/* the lighting: the site at dusk, one element, one opacity */
.hw-dim { position:absolute; inset:0; background:var(--ink); pointer-events:none; }

/* ---------- a tag: the state of a thing, in one word ---------- */
.hw-tag { display:inline-flex; align-items:center; font-family:var(--mono); font-size:11px;
  font-weight:700; letter-spacing:.16em; padding:var(--s1) var(--s2); border-radius:var(--r-xs);
  background:var(--dark-2); color:var(--dark-ink); white-space:nowrap; }
.hw-tag.hw-lit { background:var(--hivis); color:var(--hivis-ink); }
.hw-tag.hw-wait { background:var(--wait); color:var(--wait-on); }
.hw-tag.hw-stop { background:var(--stake); color:var(--stake-on); }
/* three slots, so a state can change without a tag moving or the row
 * reflowing: the code left, the link's state in the middle (waiting, then
 * synced, stacked in the one cell), a device's state right */
.hw-flags { position:absolute; left:0; right:0; bottom:0; display:grid;
  grid-template-columns:1fr 1fr 1fr; gap:var(--s2); align-items:end; }
.hw-flags .hw-tag { grid-row:1; }
.hw-tag.hw-f1 { grid-column:1; justify-self:start; }
.hw-tag.hw-f2 { grid-column:2; justify-self:center; }
.hw-tag.hw-f3 { grid-column:3; justify-self:end; }

/* ---------- the paper band: who this is for ---------- */
.lp-plain { background:var(--slab); padding:88px 0; }
.lp-trades { display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:var(--s5); }
.lp-trades span { font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.1em;
  padding:var(--s2) var(--s3); border-radius:var(--r-pill); background:var(--card);
  border:1px solid var(--line); color:var(--ink); }

/* ---------- the trade you pick ---------- */
.lp-trade { background:var(--ink); color:var(--dark-ink); padding:88px 0;
  border-bottom:3px solid var(--hivis); }
.lp-trade h2 { color:var(--chalk); }
.lp-tabs { display:flex; gap:var(--s2); flex-wrap:wrap; margin:var(--s6) 0 var(--s5); }
.lp-tab { font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; padding:var(--s3) var(--s4); min-height:var(--tap);
  border-radius:var(--r-sm); border:1px solid var(--dark-3); background:var(--dark-1);
  color:var(--dark-ink); cursor:pointer; }
.lp-tab:hover { border-color:var(--dark-ink-3); color:var(--chalk); }
.lp-tab[aria-selected="true"] { background:var(--hivis); color:var(--hivis-ink); border-color:var(--hivis); }
.lp-tab:focus-visible { outline:2px solid var(--hivis); outline-offset:3px; }

.hw-term { width:100%; max-width:760px; background:var(--dark-1); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow-lift); border:1px solid var(--dark-3); }
.hw-tbar { display:flex; align-items:center; gap:var(--s2); padding:var(--s3) var(--s4);
  background:var(--ink); }
.hw-tbar i { display:block; width:7px; height:14px; border-radius:2px; background:var(--dark-3); }
.hw-tbar span { margin-left:auto; font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  color:var(--dark-ink-3); }
.hw-tstack { padding:var(--s6) var(--s5); }
.hw-tv code { display:block; font-family:var(--mono); font-size:19px; line-height:1.55;
  color:var(--dark-ink); word-break:break-word; }
.hw-tv code b { color:var(--hivis); font-weight:700; }
.hw-tv code i { display:inline-block; width:7px; height:14px; border-radius:2px;
  background:var(--dark-3); vertical-align:middle; }
.hw-tv .hw-chip { margin-top:var(--s4); background:var(--dark-2); color:var(--dark-ink); }
/* with script, one panel at a time; without it, all five read as a list */
.js .hw-tv + .hw-tv { margin-top:0; }
.hw-tv + .hw-tv { margin-top:var(--s5); }

/* ---------- the receipts, printed on paper ----------
 * The one band that moved the other way. Lime on slab is unreadable, so the
 * figure is heavy mono in the ink and the lime is the mark beside it. */
.lp-receipts { background:var(--slab); color:var(--ink); padding:88px 0; }
.lp-figs { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s6); margin-top:56px; }
.lp-fig { border-top:2px solid var(--ink); padding-top:var(--s4); position:relative; }
.lp-fig::before { content:""; position:absolute; left:0; top:-2px; width:7px; height:14px;
  border-radius:2px; background:var(--hivis); color:var(--hivis-ink); }
.lp-fig b { display:block; font-family:var(--mono); font-weight:700; font-size:clamp(38px,4.6vw,60px);
  line-height:1; letter-spacing:-.04em; color:var(--ink); font-variant-numeric:tabular-nums;
  min-width:3ch; margin-top:var(--s3); }
.lp-fig span { display:block; margin-top:var(--s3); color:var(--ink-2); font-size:14px;
  line-height:1.45; }
.lp-nos { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); margin-top:56px; }
.lp-nos p { margin:0; color:var(--ink-2); font-size:15px; line-height:1.5; }
.lp-nos b { color:var(--ink); font-weight:800; }
.lp-fine { color:var(--ink-3); font-size:14px; margin:56px 0 0; max-width:60ch; }

/* ---------- the close: one band, one thing to do ---------- */
.lp-close { background:var(--ink); color:var(--dark-ink); padding:88px 0 96px;
  border-top:3px solid var(--hivis); }
.lp-close h2 { color:var(--chalk); }
.lp-askgrid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s6); align-items:start; }
/* The low-friction path, and it carries the same weight as the form's submit:
 * a foreman in a truck will text before he fills anything in. Both are one tap
 * on a phone; the number is also plain selectable text for a desk. */
.lp-reach { margin:var(--s6) 0 0; }
.lp-reach-k { display:block; font-family:var(--mono); font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dark-ink-2); margin-bottom:var(--s3); }
.lp-reach-acts { display:flex; gap:var(--s3); flex-wrap:wrap; }
.lp-call { display:inline-flex; align-items:center; justify-content:center; min-height:56px;
  padding:var(--s4) var(--s5); border-radius:var(--r-sm); font-size:16px; font-weight:800;
  text-decoration:none; background:var(--hivis); color:var(--hivis-ink); }
/* a peer of the call, not a lesser option: a foreman texts first. It takes
 * the lime as an outline rather than a fill, so the pair reads as equals
 * without putting a third lime block beside the form's submit. */
.lp-call.lp-sms { background:var(--dark-2); color:var(--chalk); border:2px solid var(--hivis); }
.lp-call.lp-sms:hover { background:var(--dark-3); color:var(--chalk); }
.lp-call:focus-visible { outline:2px solid var(--hivis); outline-offset:3px; }
.lp-reach-p { margin:var(--s4) 0 0; font-size:15px; line-height:1.5; color:var(--dim-on-dark); }
.lp-reach-p a { color:var(--hivis); }
.lp-tel { font-family:var(--mono); letter-spacing:.1em; color:var(--chalk); }
.lp-under { color:var(--dark-ink-2); font-size:15px; margin-top:var(--s5); }
.lp-under a { color:var(--hivis); }

/* the form belongs to the terminal: mono labels, ink ground, the cell mark */
.lp-form { background:var(--dark-1); border:1px solid var(--dark-3); border-radius:var(--r-lg);
  padding:var(--s5); }
.lp-f { display:block; margin-bottom:var(--s4); }
.lp-f > span { display:block; font-family:var(--mono); font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dark-ink-2); margin-bottom:var(--s2); }
.lp-f textarea, .lp-f input, .lp-f select { display:block; width:100%; font-family:var(--display);
  font-size:16px; color:var(--chalk); background:var(--ink); border:1px solid var(--dark-3);
  border-radius:var(--r-sm); padding:var(--s3); min-height:var(--tap); }
.lp-f textarea { resize:vertical; line-height:1.45; }
.lp-f textarea:focus, .lp-f input:focus, .lp-f select:focus { outline:2px solid var(--hivis); outline-offset:2px; }
.lp-f2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); }
.lp-form .go { width:100%; justify-content:center; margin-top:var(--s2); }
.lp-small { display:block; margin-top:var(--s3); font-size:13px; color:var(--dark-ink-3); }
.lp-said { margin:0 0 var(--s4); padding:var(--s3); border-radius:var(--r-sm);
  background:var(--tint-go); color:var(--go-ink); font-weight:700; font-size:15px; }
.lp-said.lp-bad { background:var(--tint-stop); color:var(--stop-ink); }
/* the trap. Off the tab order, autofill off, named after nothing a password
 * manager recognises — a field a real person's browser fills is a real
 * person's question thrown away. */
.lp-trap { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- the foot ---------- */
.lp-foot { background:var(--slab); border-top:1px solid var(--line); padding:var(--s5) 0 var(--s6);
  color:var(--ink-3); font-size:13px; }
.lp-foot .lp-wrap { display:flex; gap:var(--s4); flex-wrap:wrap; }
.lp-foot a { color:var(--ink-2); }

/* ---------- reveals ---------- */
.js .rv { opacity:0; transform:translate3d(0,18px,0); }
.js .rv.in { opacity:1; transform:none; transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1); }
.lp-static .rv, .lp-static .rv.in { opacity:1; transform:none; transition:none; }

/* the pieces a timeline lights start dark, but only when there is a timeline.
 * The headline's lines and the hero facts are hooked by selector rather than
 * by a class, because the tests read a bare <h1> and a bare <li>. */
.js .h0, .js .hero h1 i, .js .hero-facts li { opacity:0; }

/* ---------- no script, or motion reduced: the finished machine, held still ---------- */
html:not(.js) .lp-scroll, .lp-static .lp-scroll { height:auto; }
html:not(.js) .lp-stage, .lp-static .lp-stage { position:static; height:auto;
  grid-template-columns:1fr; padding:56px var(--s5); }
html:not(.js) .lp-meter, .lp-static .lp-meter { display:none; }
html:not(.js) .lp-caps, .lp-static .lp-caps { display:grid; grid-template-columns:repeat(2,1fr);
  gap:var(--s6); min-height:0; }
html:not(.js) .lp-cap, .lp-static .lp-cap { position:static; }
html:not(.js) .lp-view, .lp-static .lp-view { margin-top:56px; height:auto; }
/* the machine, unstacked: every piece that was placed on the canvas reads as a
 * plain column instead, in the order the beats happen */
html:not(.js) .hw-net, .lp-static .hw-net { height:auto; display:grid; gap:var(--s5); }
html:not(.js) .hw-card, .lp-static .hw-card,
html:not(.js) .hw-dev.hw-one, .lp-static .hw-dev.hw-one,
html:not(.js) .hw-fleet.hw-grid, .lp-static .hw-fleet.hw-grid,
html:not(.js) .hw-flags, .lp-static .hw-flags {
  position:static; inset:auto; margin:0; width:auto; }
html:not(.js) .hw-card.hw-big, .lp-static .hw-card.hw-big { max-width:460px; }
html:not(.js) .hw-card.hw-small, .lp-static .hw-card.hw-small { display:none; }
html:not(.js) .hw-fleet.hw-grid, .lp-static .hw-fleet.hw-grid { grid-template-rows:auto; left:auto; right:auto; }
html:not(.js) .hw-card .hw-tag, .lp-static .hw-card .hw-tag { position:static; margin-top:var(--s3); }
html:not(.js) .hw-wire, .lp-static .hw-wire,
html:not(.js) .hw-pkt, .lp-static .hw-pkt,
html:not(.js) .hw-dim, .lp-static .hw-dim { display:none; }
html:not(.js) .lp-track, .lp-static .lp-track { animation:none; }
html:not(.js) .lp-glow, .lp-static .lp-glow { display:none; }
html:not(.js) .lp-tabs, .lp-static .lp-tabs { display:none; }
.lp-static .h0, .lp-static .hero h1 i, .lp-static .hero-facts li { opacity:1; }
/* the amber and the red are states, not decoration: with the machine held
 * still nothing is waiting and nothing is stopped, so they are not shown */
html:not(.js) .hw-tag.hw-stop, .lp-static .hw-tag.hw-stop,
html:not(.js) .hw-tag.hw-wait, .lp-static .hw-tag.hw-wait { display:none; }

/* ---------- narrow: cut the heaviest sequences rather than stutter ---------- */
@media (max-width: 900px) {
  .lp-plain, .lp-trade, .lp-receipts { padding:56px 0; }
  .lp-close { padding:56px 0; }
  .lp-scroll { height:340vh; }
  .lp-stage { grid-template-columns:1fr; grid-template-rows:auto 1fr; gap:var(--s5);
    padding:var(--s5) var(--s4); align-items:start; }
  .lp-caps { min-height:230px; }
  .lp-cap p { font-size:15px; }
  /* A phone has no room for an office lane beside a fleet, so the canvas
   * stacks instead: the order and the one tablet along the top, the wire
   * under them, the fleet across the full width below. */
  .hw-net { height:360px; }
  .hw-card.hw-big { width:100%; margin-left:0; left:0; margin-top:-140px; }
  .hw-card.hw-small { width:164px; top:0; margin-top:0; }
  .hw-dev.hw-one { width:180px; top:0; margin-top:0; }
  .hw-wire { left:172px; right:188px; top:56px; }
  .hw-pkt { left:172px; top:calc(56px - 6px); }
  .hw-fleet.hw-grid { left:0; right:0; top:150px; bottom:40px;
    grid-template-rows:minmax(0,1fr); align-content:center; }
  .hw-dev.hw-cut { display:none; }
  .lp-figs, .lp-nos { grid-template-columns:1fr 1fr; }
  .lp-askgrid { grid-template-columns:1fr; }
  html:not(.js) .lp-caps, .lp-static .lp-caps { grid-template-columns:1fr; }
}
@media (max-width: 600px) {
  .lp-figs, .lp-nos { grid-template-columns:1fr; }
  .hw-rack { min-height:0; }
  .lp-cap h3 { font-size:22px; }
  .lp-caps { min-height:250px; }
  .lp-f2 { grid-template-columns:1fr; }
  .hw-tv code { font-size:16px; }
  .hw-tstack { padding:var(--s5) var(--s4); }
}