/* ==========================================================================
   home.css — Orcheum landing page · navigation + hero
   --------------------------------------------------------------------------
   Locked visual source: Figma 939:31440 ("Home", 1440 × 789).

     894:12975   Header    1440 × 76 · 18/52 padding · 1px #e6e3dd underline
     939:31595   Hero      1440 × 713 · content 800 wide, 194 from the top
     939:31598   Headline  598 × 105 · Newsreader 56 / italic 64 / stop 52
     939:31601   Composer  672 × 122 · white · 2px #e6e3dd · radius 16
     958:16686   Texture   the dotted ground behind the hero

   P2 adds the first section below the fold, on the same terms:

     958:16692   One layer  1440 × 597 · 24/52/80 · 765 + 76 + 495
     958:16697   Headline   Newsreader Medium 56 / 63 · tracking -1.5
     958:16844   Capabilities  three rows, 6 apart, 15 between number and text
     958:16756   Constellation  495 × 493 · 16 marks around the nucleus

   P3 adds the second, on the same gutters and the same ground:

     958:17579   From intent  1440 × 656 · 24/52/80 · 44 between the two halves
     958:17668   Headline     Newsreader Medium 56 / 63 · two drawn lines
     958:17666   Bodies       Geist Medium 24 on 648, then 18 on 604
     958:17745   Stages       4 × 283, 68 gutter · 1336 = 1440 − 52 − 52

   P5 closes the page — the conversion point, then the quiet footer:

     960:17941   Final CTA  1440 × 352 · 44/52/80 · headline + 44 + composer
     960:17943   Headline   Newsreader Medium 56 / 61.6 · tracking −1.12
     960:18043   Composer   the hero's composer, second mount, same handoff
     960:18236   Footer     1440 × 316 · 44/40 · 4 × 328 · 78 · © centred

   and one restrained entrance system (§9) shared by all five phases.

   This sheet is written to be extended rather than restated, and it owns no
   selector another surface reads.

   Two things it deliberately does not do:

   1. It does not touch landing.css. That sheet is the shared editorial
      system — index.html, Studios, Argus and Philosophy all load it — and it
      still describes the retired orange demo-frame hero. Restyling `.lp-*`
      here would move four surfaces that are not in this task.

   2. It does not restyle the Composer component. The hero mounts the real
      one (components/chat/composer.js) and skins it through its own custom
      properties, scoped to `.lh-composer-host`, exactly as the Workspace
      does for 887:8194. No other surface's composer moves.

   Desktop is the reference, measure for measure, at 1440. Below that the
   composition adapts — the headline scales as one piece in `em`, the
   composer keeps its usable width, and the nav collapses rather than
   colliding. It is the approved composition narrowed, not a second design.
   ========================================================================== */

/* 958:16846 — the capability numerals are set in Safiro, the display face the
   rest of the marketing surfaces already self-host. landing.css declares it
   too, but this page does not load that sheet, so the one weight it needs is
   declared here rather than pulling in the whole editorial system.

   The frame names Safiro MEDIUM. The repository ships SemiBold and Bold only
   (assets/landing/fonts), so the numerals are set in the nearest weight that
   actually exists. Documented rather than faked: no synthetic weight, no
   substituted family. */
@font-face {
  font-family: "Safiro";
  src: url("../assets/landing/fonts/Safiro-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

.lh {
  /* 894:12975 — the header's own height, which the hero measures against. */
  --lh-nav-h: 76px;

  /* 939:31440 ground. The platform's warm off-white, the same stone under
     Home, Projects, Artifacts and Studios — not a second page colour. */
  --lh-page: #faf9f6;

  --lh-ink: #24252d;
  --lh-ink-display: #000000;
  --lh-nav-ink: #6b6a64;
  --lh-accent: #a84e2e;      /* 956:16674 — "end to end" */
  --lh-rule: #e6e3dd;        /* header underline · composer stroke */
  --lh-control-line: #d9d1cb;

  --lh-hero-w: 800px;        /* 939:31597 */
  --lh-composer-w: 672px;    /* 939:31601 */

  /* How far the hero block rides above where the frame put it. The frame sets
     the headline 194 down from the section's ceiling; that reads low on a real
     screen, so the block is lifted by this much. It is carried in two places —
     the section's height and the block's own bias — so the lift comes out of
     the ceiling and not out of the floor under the model strip. One number:
     raise it to lift the block further, set it to 0 for the frame's own bias. */
  --lh-hero-lift: 56px;

  /* Newsreader carries the whole headline: Medium upright for "Orchestrate
     Intelligence" and the full stop, Medium Italic for "end to end". One
     family across the line. This is the approved face — do not swap it. */
  --lh-display: "Newsreader", Georgia, serif;
  --lh-ui: Geist, Inter, var(--font-sans, system-ui), sans-serif;
  --lh-num: "Safiro", "Geist", Inter, system-ui, sans-serif;

  /* 958:16692 ink. Warmer than the hero's near-black — the section is set on
     paper, not over the dotted ground. */
  --lh-ink-copy: #1f1e1b;
  --lh-ink-soft: #6b6a64;
  /* 958:17664 — one step darker than --lh-ink-soft, and the only place it is
     used: the frame gives the primary body of "From intent" its own value. */
  --lh-ink-body: #5e5d54;

  /* 960:17863 ink and surfaces. These are the Figma variables the pricing
     frame names, carried across under their own names rather than rounded
     into the four above: `text/secondary`, `card/border`, `card/separator`
     and `background`. */
  --lh-ink-muted: #7c746f;          /* text/secondary */
  --lh-card-border: rgba(189, 196, 198, 0.5);   /* card/border */
  --lh-card-separator: rgba(50, 47, 47, 0.05);  /* card/separator */
  --lh-toggle-on-ink: #fbf7ef;      /* background — the label on the charcoal */

  margin: 0;
  background: var(--lh-page);
  color: var(--lh-ink);
  font-family: var(--lh-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* The hero's texture is inset from the edges; nothing may scroll sideways. */
  overflow-x: clip;
}

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

.lh-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--lh-ink);
  border-radius: var(--radius-8, 8px);
  color: #fff;
  font-size: 14px;
  text-decoration: none;
}
.lh-skip:focus {
  left: 24px;
  top: 24px;
}

/* A label that only the screen reader needs — the billing group's name, which
   the drawing carries in the two pills themselves. */
.lh-skip-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ══ 1 · HEADER — 894:12975 ═══════════════════════════════════════════════
   1440 × 76. The 40-tall "Get started" button is what sets the height:
   18 + 40 + 18. Sticky, because the hero below it is a full viewport and a
   nav that scrolls away on the first section has nowhere to come back from.
   The frame's 3.5px backdrop blur only means anything over moving content,
   so the fill is a veil rather than the flat page colour.               */

.lh-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--lh-nav-h);
  /* 18 top / 18 bottom in the frame, where the rule is drawn INSIDE the 76.
     In CSS the rule is a border, so the bottom inset carries it and the box
     stays exactly 76 rather than 77. */
  padding: 18px 52px 17px;
  background: rgba(250, 249, 246, 0.72);
  border-bottom: 1px solid var(--lh-rule);
  -webkit-backdrop-filter: blur(3.5px);
  backdrop-filter: blur(3.5px);
}

/* 955:16568 — the approved mark and wordmark, 8 apart. These are the locked
   brand files in assets/brand/ (Figma lYAdZcZAWgfo2MzDGBHpHS "Logo_typography":
   the symbol 1030:2712, and the unchanged 97.377 × 18.144 "Orcheum" wordmark),
   NOT assets/landing/figma/header-wordmark.svg, which is the retired V1. */
.lh-brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.lh-brand__mark {
  display: block;
  width: 24px;
  height: 24px;
}

.lh-brand__word {
  display: block;
  width: 97.377px;
  height: 18.144px;
}

.lh-brand:focus-visible {
  outline: 2px solid var(--lh-accent);
  outline-offset: 4px;
  border-radius: 4px;
}

/* 894:12980 — the five destinations, centred in what the brand and the
   actions leave. The frame spaces them with a 32 left inset on each link
   after the first, which is a gap of 32. */
.lh-nav {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 32px;
  min-width: 0;
}

.lh-nav__link {
  color: var(--lh-nav-ink);
  font-family: var(--lh-ui);
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
  transition: color 140ms ease;
}

/* Ink, not orange. The accent is spent on the headline and the send; a nav
   that lights up warm on every pass would spend it on nothing. */
.lh-nav__link:hover,
.lh-nav__link:focus-visible {
  color: var(--lh-ink);
}

.lh-nav__link:focus-visible {
  outline: 2px solid var(--lh-accent);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Drawn, not published. Pricing and FAQ are P2 sections; until they exist
   the link is present and legible but does not pretend to lead anywhere. */
.lh-nav__link[aria-disabled="true"] {
  cursor: default;
}

/* 955:16596 — "Log in" and the button, 24 apart. */
.lh-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 24px;
}

.lh-login {
  color: var(--lh-ink);
  font-family: var(--lh-ui);
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
}

.lh-login:hover,
.lh-login:focus-visible {
  color: var(--lh-accent);
}

.lh-login:focus-visible {
  outline: 2px solid var(--lh-accent);
  outline-offset: 4px;
  border-radius: 4px;
}

/* 955:16600 — the primary. It is the production `.oc-btn`, so the state
   language comes with it unchanged — which is now UI kit section 3:
   #171d23 at rest, #f05822 under the pointer, and no pressed fill (the
   0.5px settle carries the press). Only the frame's own metrics are
   restated (40 tall, 10/20, 16/20 label) — never a colour, never a state. */
.lh-header .oc-btn {
  min-width: 0;
  height: 40px;
  padding: 10px 20px;
  border-radius: var(--radius-8, 8px);
  font-size: 16px;
  line-height: 20px;
  /* `.oc-btn` is written for <button>; as an <a> it would carry the UA rule. */
  text-decoration: none;
}

/* The focus ring's inner gap is bound to the surface the button sits on. */
.lh-header .oc-btn:focus-visible {
  box-shadow:
    0 0 0 2px var(--lh-page),
    0 0 0 4px var(--color-puddle-700, #61686b);
}

/* ── The collapsed row ──
   Below the artboard the five destinations and the two actions move behind
   one control. Hidden at full width; the media query at the foot turns it
   on. Not a different design — the same row, folded. */
.lh-menu {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--lh-rule);
  border-radius: var(--radius-8, 8px);
  color: var(--lh-ink);
  cursor: pointer;
}

.lh-menu:focus-visible {
  outline: 2px solid var(--lh-accent);
  outline-offset: 2px;
}

.lh-menu__bars,
.lh-menu__bars::before,
.lh-menu__bars::after {
  display: block;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 160ms ease, opacity 160ms ease;
}

.lh-menu__bars {
  position: relative;
}

.lh-menu__bars::before,
.lh-menu__bars::after {
  position: absolute;
  left: 0;
  content: "";
}

.lh-menu__bars::before { top: -5px; }
.lh-menu__bars::after  { top: 5px; }

.lh-menu[aria-expanded="true"] .lh-menu__bars {
  background: transparent;
}
.lh-menu[aria-expanded="true"] .lh-menu__bars::before {
  transform: translateY(5px) rotate(45deg);
}
.lh-menu[aria-expanded="true"] .lh-menu__bars::after {
  transform: translateY(-5px) rotate(-45deg);
}

/* ══ 2 · HERO — 939:31595 ═════════════════════════════════════════════════
   The frame gives the hero the 713 left under the 76 header on a 789-tall
   artboard, and sets the 263-tall content block 194 down from its top —
   above centre, not on it. Reproduced as a centred block with 40 of floor
   padding and a 62 bottom margin: at 1440 × 789 that resolves to exactly
   194 above and 256 below, and on any other viewport the same bias holds
   while the padding keeps the composition off the edges.

   The whitespace here is the composition. It is not compressed.          */

.lh-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 80 of floor under the model strip, added to the section's own height as
     well as to its padding. The section is border-box and its block is flex-
     centred, so padding alone would have shrunk the content box and lifted the
     headline and composer 40 to pay for the floor. Carried on both, the floor
     is pure gain: the headline stays at 194, the strip stays 101 under the
     composer, and what follows the hero simply starts 80 later. */
  min-height: calc(100svh - var(--lh-nav-h) + 80px - var(--lh-hero-lift));
  padding: 40px 24px 120px;
  overflow: clip;
}

/* 958:16686 — the ground.
   The frame draws it as a blurred raster at 60%; here it is the thing that
   raster is a picture of, a 24 dot grid at a contrast low enough that it
   reads as paper tooth rather than as pattern. Drawn as an SVG tile, not a
   gradient. The mask is what makes it "fade naturally into the page": it is
   a fade applied to the texture's own alpha, not a wash laid over the
   page — the ground underneath stays one flat colour. */
.lh-hero__texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='1.6' cy='1.6' r='1.1' fill='%232b2118' fill-opacity='0.085'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-position: center;
  -webkit-mask-image: radial-gradient(118% 82% at 50% 44%, #000 38%, transparent 100%);
  mask-image: radial-gradient(118% 82% at 50% 44%, #000 38%, transparent 100%);
}

/* 939:31597 — 800 wide, headline and composer 36 apart. */
.lh-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  width: 100%;
  max-width: var(--lh-hero-w);
  /* The frame's upward bias: half of this is the offset above centre. The lift
     is added whole because the section it is centred in gives up the same
     amount — together they move the block up by exactly the lift. */
  margin-bottom: calc(62px + var(--lh-hero-lift));
}

/* ── Headline — 956:16674 ──
   Two lines in one measure. Every size is stated once, at the top, and the
   two accents are `em` of it, so the block scales as a single drawing
   instead of three sizes drifting apart at narrow widths.

   Figma: upright 56 / accent 64 / stop 52, line-height 0.73. As `em`:
   64/56 = 1.1429 and 52/56 = 0.9286.

   Tracking is the one value NOT taken from the export. The exporter reports
   +2.08px on the block, but the frame it is describing measures 598 wide,
   and "Orchestrate Intelligence" is 24 characters: 24 × 2.08 = 49.9. Set at
   2.08px the line renders 647.5 — 598 plus exactly that tracking. The drawn
   line is therefore the untracked one, and 2.08px is an artifact of how the
   value was converted out of Figma. Matched to what the reference RENDERS,
   which is the locked thing, rather than to a number beside it. */
.lh-hero__title {
  margin: 0;
  color: var(--lh-ink-display);
  font-family: var(--lh-display);
  /* One curve for every width, so the headline never changes direction as the
     viewport narrows. 3.889vw is the frame's own ratio — 56 at 1440 — and it
     runs unbroken down to a 26 floor at ~668. A second clamp in a media query
     would cross this one and step the headline UP as the page got narrower. */
  font-size: clamp(26px, 3.889vw, 56px);
  font-weight: 500;
  font-style: normal;
  line-height: 0.73;
  letter-spacing: 0;
  text-align: center;
}

/* The frame breaks the headline itself; the break is part of the drawing. */
.lh-hero__line {
  display: block;
}

.lh-hero__line--lead {
  margin-bottom: 16px;
}

/* "end to end" — Newsreader's italic, in the warm brown the frame names. */
.lh-hero__accent {
  color: var(--lh-accent);
  font-size: 1.1429em;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.04em;
}

/* The full stop stays upright, black, and a size of its own. */
.lh-hero__stop {
  color: var(--lh-ink-display);
  font-size: 0.9286em;
  font-style: normal;
}

/* ── Composer — 939:31600 / 939:31601 ──
   The host is the frame's 800 group; the card inside it is the drawn 672.
   The component is production; everything below is its own skin. */
.lh-composer-host {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
}

/* THE LANDING COMPOSER IS NOT UI KIT §4. It is drawn from the ratified
   marketing frame 939:31601, which states a different card: white on a 2px
   warm rule, radius 16, 32 control squares, an orange send. The component's
   own visual owner is components/chat/composer.css and it now draws §4
   (158:948), so this host restates the marketing card in full — including
   suppressing §4's blurred rectangle, which 939:31601 does not draw.

   This is the ONE surface where a host still redraws the composer, and it is
   a genuine competing owner rather than an oversight: §4 and 939:31601 are
   both ratified and they disagree. Reported for a ruling; not resolved here,
   because repainting the marketing hero is not this build's scope. */
.lh-composer-host .oc-composer::before,
.lh-composer-host .oc-composer::after { display: none; }

.lh-composer-host .oc-composer {
  /* The frame's control unit — every square in the toolbar measures from it. */
  --oc-composer-control-height: 32px;
  isolation: auto;
  width: 100%;
  max-width: var(--lh-composer-w);
  min-height: 0;
  height: auto;
  gap: 12px;
  /* 14, not the frame's 16. Figma draws the 2px stroke inside the card's own
     122 and measures the 16 inset from the card edge; CSS adds the border
     outside the padding box. 14 + 2 puts the thought exactly 16 from the
     edge, as drawn, and holds the card at 123 against the drawn 122. */
  padding: 14px;
  background: #ffffff;
  border: 2px solid var(--lh-rule);
  border-radius: 16px;
  box-shadow:
    -2px -2px 8px rgba(0, 0, 0, 0.05),
    2px 2px 8px rgba(0, 0, 0, 0.05);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: border-color 140ms ease;
}

/* Live. `is-ready` is the component's own word for "there is something here
   to send", so a draft the reader left and came back to keeps the warm
   stroke. Same treatment the Workspace composer uses. */
.lh-composer-host .oc-composer:focus-within,
.lh-composer-host .oc-composer.is-ready {
  border-color: rgba(240, 88, 34, 0.6);
}

/* The base sheet rings a keyboard-focused composer in ink because on the
   surfaces it was written for the card does not otherwise move. Here the
   stroke turns warm the moment focus lands, and a second dark ring outside
   it is noise on the frame's one border. */
.lh-composer-host .oc-composer:has(.oc-composer__input:focus-visible) {
  outline: none;
}

/* 939:31602 → 939:31603 — the thought, then 40, then the row. */
.lh-composer-host .oc-composer__body {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 40px;
  min-height: 0;
}

.lh-composer-host .oc-composer__input {
  flex: 0 0 auto;
  /* The line box IS the height: 16 × 1.2 = 19.2, the frame's 19. A taller
     floor would push the card past the drawn 122. */
  min-height: 0;
  max-height: 140px;
  color: var(--lh-ink);
  font-family: Inter, Geist, var(--font-sans, system-ui), sans-serif;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.05em;
}

.lh-composer-host .oc-composer__input::placeholder {
  color: #86807b;
}

.lh-composer-host .oc-composer__toolbar {
  display: flex;
  height: var(--oc-composer-control-height);
}

.lh-composer-host .oc-composer__actions {
  flex: 0 0 auto;
  gap: 8px;
}

/* 939:31605 / 939:31609 — the two capability marks. 32 squares, hairline
   stroke, 20 icon. The label stays in the DOM for assistive technology;
   the frame simply does not draw it. */
.lh-composer-host .oc-composer__control {
  width: var(--oc-composer-control-height);
  /* 939:31601's control square is 32 and must not shrink. The `min-width: 0`
     that stood after this line was written when §4 gave the control no floor
     of its own; components/chat/composer.css now states `min-width: 24px`, so
     the zero stopped being a release and became an override of the 32 above
     it — the same declaration, later in the block, winning. One floor now. */
  min-width: var(--oc-composer-control-height);
  height: var(--oc-composer-control-height);
  gap: 0;
  justify-content: center;
  padding: 6px;
  background: transparent;
  border: 0.5px solid var(--lh-control-line);
  border-radius: var(--radius-8, 8px);
}

.lh-composer-host .oc-composer__control-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lh-composer-host .oc-composer__control-icon {
  display: block;
  width: 20px;
  height: 20px;
  opacity: 1;
}

/* 939:31601 draws no mic surface; §4 does. */
.lh-composer-host .oc-composer__voice {
  width: var(--oc-composer-control-height);
  min-width: var(--oc-composer-control-height);
  height: var(--oc-composer-control-height);
  padding: 6px;
  background: transparent;
  border: 0.5px solid var(--lh-control-line);
  border-radius: var(--radius-8, 8px);
}

.lh-composer-host .oc-composer__voice .oc-composer__control-icon {
  width: 20px;
  height: 20px;
}

/* Orange means two different things and they must not be confused: on the
   globe it is a FACT (Web Search is granted), on the plus it is only "under
   the pointer". So the plus takes the fill on hover and the globe takes it
   only when it is actually on. Same rule the Workspace composer follows. */
.lh-composer-host .oc-composer__control[data-action="attach"]:hover:not(:disabled),
.lh-composer-host .oc-composer__control[data-action="attach"]:focus-visible:not(:disabled),
.lh-composer-host .oc-composer__control.is-selected {
  background: #f05822;
  border-color: var(--lh-control-line);
}

.lh-composer-host .oc-composer__control[data-action="attach"]:hover:not(:disabled) .oc-composer__control-icon,
.lh-composer-host .oc-composer__control[data-action="attach"]:focus-visible:not(:disabled) .oc-composer__control-icon,
.lh-composer-host .oc-composer__control.is-selected .oc-composer__control-icon {
  filter: brightness(0) invert(1);
}

/* Stated outright, not borrowed. `--oc-composer-hover` is the app composer's
   own token and §4 moved it to a blue tint; this page's neutral wash is
   939:31601's and must not follow it. */
.lh-composer-host .oc-composer__control[data-action="online"]:not(.is-selected):hover:not(:disabled),
.lh-composer-host .oc-composer__control[data-action="online"]:not(.is-selected):focus-visible:not(:disabled) {
  background: rgba(17, 15, 15, 0.05);
}

.lh-composer-host .oc-composer__control.is-selected:hover:not(:disabled),
.lh-composer-host .oc-composer__control.is-selected:focus-visible:not(:disabled),
.lh-composer-host .oc-composer__control:active:not(:disabled) {
  background: #d94d1a;
}

.lh-composer-host .oc-composer__control:active:not(:disabled) .oc-composer__control-icon {
  filter: brightness(0) invert(1);
}

/* Attach is drawn but cannot be granted here: a file has no way to cross the
   navigation into the Workspace. The control keeps the frame's drawing and
   says why on hover rather than accepting a file this page would drop. */
.lh-composer-host .oc-composer__control:disabled {
  opacity: 1;
}

/* 939:31616 / 939:31619 — the engine's name, 16 from the send that runs it.
   Two orange treatments; which one shows is decided by the send's own
   `disabled`, so an empty composer draws the frame's 50% exactly. */
.lh-composer-host .oc-composer__send {
  flex: 0 0 var(--oc-composer-control-height);
  background-image: none;
  width: var(--oc-composer-control-height);
  height: var(--oc-composer-control-height);
  padding: 6px;
  background: #f05822;
  border-radius: var(--radius-8, 8px);
  color: #fdfcfb;
  opacity: 1;
}

.lh-composer-host .oc-composer__send:disabled {
  background: rgba(240, 88, 34, 0.5);
  opacity: 1;
}

.lh-composer-host .oc-composer__send.is-loading,
.lh-composer-host .oc-composer__send.is-loading:disabled {
  background: #f05822;
}

/* ── Model strip — 974:4688 ──
   The frame states this as a 962 × 185 block at y 501 of the 713 hero, with
   the label at 558 and the row of marks at 614.84. The composer's own floor
   is at 457. So the two intervals the drawing actually fixes are 101 from
   that floor to the label and 42.84 from the label to the row.

   Those intervals — not the section coordinates — are what is reproduced.
   The strip is taken out of `.lh-hero__inner`'s flow and hung off its bottom
   edge, which IS the composer's bottom edge. Two things follow: adding the
   strip cannot move the headline or the composer (the centred block that
   positions them is untouched, still 263 tall with its 62 of floor), and the
   four-part relationship headline → composer → label → row holds at every
   viewport height rather than only at the 789 the frame was drawn at.

   Nothing here animates. No cycling, no marquee, no reveal. */
.lh-hero__models {
  position: absolute;
  left: 50%;
  top: calc(100% + 101px);
  transform: translateX(-50%);
  /* 974:4688's own width. Wider than the 800 inner block it hangs from, which
     is why it is centred on the viewport rather than filling its parent. */
  width: min(962px, calc(100vw - 48px));
}

/* 974:4689 — Geist Medium 14 in the hero's ink, centred on the measure. */
.lh-hero__models-label {
  margin: 0;
  color: var(--lh-ink);
  font-family: var(--lh-ui);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
}

/* 974:4690 — nine 44 marks on the frame's 109 pitch: the mark plus a 65
   gutter. Every mark is one path in #24252d, the same ink as the label; the
   weights differ because the drawings differ, not because they are tinted.
   They are laid out in a wrap-capable row so the narrow cases below can fold
   it without a second treatment. */
.lh-hero__models-row {
  /* The window the lineup moves through. It is exactly the nine-mark run plus
     the frame's 46 of slack, which is what gives an arriving mark somewhere to
     be before it is seen. */
  --lh-models-gutter: 65px;
  --lh-models-pitch: calc(44px + var(--lh-models-gutter));
  /* The frame's own row is thirteen marks on that pitch — 974:4690 is 1460 wide
     and its parent clips it at 962, which is why the still shows nine. The run
     is those nine: it is what the window centres on, and so what fixes the
     still. The other four wait beyond the right edge, where the frame put them. */
  --lh-models-run: calc(44px * 9 + var(--lh-models-gutter) * 8);
  /* One full turn of the lineup: thirteen pitches, after which the repeat pass
     stands exactly where the first began. */
  --lh-models-sequence: calc(13 * var(--lh-models-pitch));
  margin-top: 42.84px;
  /* Nothing outside the 962 exists: the track is twenty-six marks long. */
  overflow: hidden;
  /* 974:4724 / 974:4725 — the strip reads out at both edges. The frame draws
     that as two page-coloured panels laid over the row; here it is the same
     fade applied to the row's own alpha, so the dotted ground underneath
     stays one flat field instead of being papered over. The stops are the
     frame's: fully veiled to 26.6 of 962, fully clear by 126. The 26.6 is what
     hides the 23 of slack a mark waits in, so the same fade the frame drew for
     the still is also what lets marks enter and leave unseen. */
  -webkit-mask-image: linear-gradient(to right, transparent 2.765%, #000 13.098%, #000 86.902%, transparent 97.235%);
  mask-image: linear-gradient(to right, transparent 2.765%, #000 13.098%, #000 86.902%, transparent 97.235%);
}

/* The stream. One track, one transform, never stopping. Its left edge is set
   where the row's own centring puts the nine marks — (962 − 916) / 2 — so the
   still it starts from is the approved lineup, and the repeat pass hangs off the
   right where the marks that follow come from. */
.lh-hero__models-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  margin-left: calc((100% - var(--lh-models-run)) / 2);
  column-gap: var(--lh-models-gutter);
  animation: lh-models-stream 45s linear infinite;
  will-change: transform;
}

.lh-hero__models-row img {
  display: block;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
}

/* One sequence width — thirteen pitches, 1417 — travelled at a constant 31.5 a
   second. The track states the thirteen twice, so after exactly thirteen pitches
   every mark has arrived where the mark thirteen places ahead of it began: the
   end of the cycle IS the start of it, pixel for pixel, and `linear infinite`
   runs through that boundary without a seam. Nothing rests, nothing steps,
   nothing is animated per mark — the whole lineup drifts as one. */
@keyframes lh-models-stream {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--lh-models-sequence))); }
}

/* A wide window can still be a short one, and a hung strip cannot make the
   section taller — under about 680 of viewport the row starts to run past the
   hero's floor and be clipped against it. From here down it is returned to
   the flow, where the section grows to hold it. The frame's 101 is kept: 65
   here plus the inner block's own 36 gap. */
@media (max-height: 700px) {
  .lh-hero__models {
    position: static;
    /* It is wider than the 800 block it now sits inside, and stays so. */
    flex: 0 0 auto;
    margin-top: 65px;
    transform: none;
  }

  /* The lift comes off with it. Once the strip is in the flow the section is
     taller than its own content and grows to fit, so this margin stops being a
     bias to centre against and becomes plain trailing space — carrying the lift
     in it would only push the block against the ceiling and open a void under
     the marks. Back to the frame's own bias. */
  .lh-hero__inner {
    margin-bottom: 62px;
  }
}

/* ══ 3 · NARROWER ═════════════════════════════════════════════════════════
   The approved composition, folded — never a second design. The headline
   keeps its two drawn lines and its proportions (it scales in `em` from one
   size); the composer keeps a usable width; the nav collapses before it can
   collide.                                                                */

/* The gutter closes before anything else has to move. */
@media (max-width: 1180px) {
  .lh-header {
    padding: 18px 32px;
  }
  .lh-nav {
    gap: 24px;
  }
}

/* The strip's 962 measure stops fitting here, so the 65 gutter closes instead,
   by exactly the amount that keeps all nine marks on one line: 444 is the nine
   44 marks plus the strip's own 48 of inset. The edge fades stay — a stream has
   to have somewhere to arrive from and leave to at every width, and with the
   marks always in motion no one of them sits permanently veiled. */
@media (max-width: 1000px) {
  .lh-hero__models-row {
    --lh-models-gutter: clamp(28px, calc((100vw - 444px) / 8), 65px);
  }
}

/* The five destinations and the two actions no longer fit beside the brand
   on one line. They fold behind the control rather than wrapping into it. */
@media (max-width: 900px) {
  .lh-header {
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 24px;
  }

  .lh-menu {
    display: inline-flex;
  }

  /* The control belongs beside the brand, on the first line, whether the
     panel is open or shut. In source order it follows the two rows it
     toggles, so without this it wraps BELOW them once they unfold. */
  .lh-brand   { order: 0; }
  .lh-menu    { order: 1; }
  .lh-nav     { order: 2; }
  .lh-actions { order: 3; }

  /* Closed: the row is out of the layout and out of the tab order. */
  .lh-nav,
  .lh-actions {
    display: none;
  }

  .lh-header.is-open .lh-nav,
  .lh-header.is-open .lh-actions {
    display: flex;
    flex: 1 0 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .lh-header.is-open .lh-nav {
    padding-top: 8px;
    border-top: 1px solid var(--lh-rule);
  }

  .lh-header.is-open .lh-actions {
    gap: 12px;
    padding-bottom: 4px;
  }

  .lh-header.is-open .lh-nav__link,
  .lh-header.is-open .lh-login {
    padding: 10px 0;
  }

  .lh-header.is-open .oc-btn {
    width: 100%;
  }

  /* A folded header is as tall as its contents, so the hero measures against
     the closed row rather than an open one that would push it off screen. */
  .lh {
    --lh-nav-h: 72px;
  }
}

@media (max-width: 760px) {
  .lh-hero {
    /* The gutters close; the 80 of floor does not. */
    padding: 32px 20px 112px;
  }

  /* Less floor to hold the block off centre when there is less floor. */
  .lh-hero__inner {
    gap: 28px;
    margin-bottom: 32px;
  }

  /* The headline is NOT resized here — it is already on one continuous curve
     from 1440 down, and a second clamp at this breakpoint would step it up. */

  .lh-composer-host .oc-composer {
    padding: 14px;
    border-radius: 14px;
  }

  /* The 40 between thought and row is a 672-wide measure; at phone width it
     is a hole. The row keeps its air without the card becoming a column. */
  .lh-composer-host .oc-composer__body {
    gap: 28px;
  }

  /* There is no longer enough floor under the composer to hang the strip in,
     and a hung strip cannot make the section taller — it would be clipped.
     So it is returned to the flow, where the hero grows to hold it. The
     frame's 101 is kept: 73 here plus the inner block's own 28 gap. */
  .lh-hero__models {
    position: static;
    width: 100%;
    margin-top: 73px;
    transform: none;
  }
}

/* Nine marks on one line need 620 — 396 of mark plus eight closed 28 gutters —
   and below this width the row no longer has it. It folds to five and four,
   held on the frame's own 44 mark: the gutter carries the fold rather than the
   marks shrinking, and the two lines stay centred on the same axis. 268 is the
   five marks plus the inset the fold has to clear. */
@media (max-width: 667px) {
  .lh-hero__models-row {
    --lh-models-gutter: clamp(12px, calc((100vw - 268px) / 4), 28px);
  }
}

/* ── The strip at rest ──
   Reduced motion gets the approved still, and only reduced motion needs it: the
   fold to five and four was drawn because nine 44 marks will not stand still in
   a phone's width, which stops being a problem the moment they are moving
   through it. So the still folds and the stream does not. */
@media (prefers-reduced-motion: reduce) {
  .lh-hero__models-track {
    animation: none;
  }
  /* The repeat pass leaves the layout, so the nine sit exactly where the row
     centred them — 23 in, on the 109 pitch. */
  .lh-hero__models-track > [data-clone] {
    display: none;
  }
}

/* Below the 962 the nine marks fill the window edge to edge, so with nothing
   moving through them the fades would only veil the outermost two. They come
   off, and the compressed still is the approved one again. */
@media (prefers-reduced-motion: reduce) and (max-width: 1000px) {
  .lh-hero__models-row {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* And here the still takes the fold: five and four, centred on one axis, on the
   frame's own 44 mark. 268 is the five marks plus the inset the fold clears. */
@media (prefers-reduced-motion: reduce) and (max-width: 667px) {
  .lh-hero__models-track {
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    max-width: calc(44px * 5 + var(--lh-models-gutter) * 4);
    margin-inline: auto;
    row-gap: var(--lh-models-gutter);
  }
}

/* The placeholder is a full sentence and the field is one line tall, so below
   this width it was being cut mid-word ("…orchestrate the"). The thought gets
   a second line to land on. The component autosizes from content, so this is
   a floor on the empty state only — it does not cap what the reader types. */
@media (max-width: 560px) {
  .lh-composer-host .oc-composer__input {
    min-height: 2.4em;
  }
}

@media (max-width: 420px) {
  .lh-header {
    padding: 14px 16px;
  }

  .lh-hero__inner {
    gap: 24px;
  }

  /* The engine's name is the first thing to go when the row runs out of
     room — the send and the two capability marks are controls, and it is a
     label. It stays in the DOM for assistive technology. */
  .lh-composer-host .oc-composer__model {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ══ 4 · ONE LAYER — 958:16692 ════════════════════════════════════════════
   1440 × 599. 24 of ceiling, 80 of floor, 52 gutters — the header's own
   gutter, so the headline starts on the same vertical as the wordmark above
   it. Inside: a 765 measure, 24 of air, the 495 orbit, and 52 of trailing.

   765 + 24 + 495 + 52 = 1336 = 1440 − 52 − 52.

   The frame butts the drawing straight against the measure (958:16693 ends
   at 817 and 971:2573 begins there) and leaves its air on the outside edge
   instead. That is what makes the two halves one composition rather than two
   things at opposite ends of a wide row, so the air is carried where the
   frame carries it: 24 between them, and the page's own gutter again beyond
   the drawing, which is why the trailing space reads as margin rather than
   as a gap that failed to close. The orbit's right edge lands on 1336 — the
   frame draws it on 1330.

   The trailing 52 is part of the second track rather than a third one, so
   the section still has two tracks and the drawing is simply held to the
   start of its own. Stated as a ratio rather than as fixed widths, so the
   asymmetry — the thing the frame is actually about — survives every width
   above the stack breakpoint instead of being true at exactly 1440 and
   nowhere else. At 1440 the tracks resolve to precisely 765 and 547, and
   the drawing inside the second one to precisely 495.

   There is no card. The ground is the page's, unchanged.                   */

.lh-onelayer {
  display: grid;
  grid-template-columns: minmax(0, 765fr) minmax(0, 547fr);
  align-items: start;
  gap: 24px;
  padding: 24px 52px 80px;
}

/* 958:16694 — headline, paragraph and list, 24 apart. */
.lh-onelayer__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

/* 958:16697 — Newsreader Medium 56 / 63, tracking −1.5.
   Every size in this section is stated as a curve between the frame's value
   at 1440 and a floor at 600, so the block narrows as one drawing. Tracking
   is carried in `em` of each size — Figma states one −1.5px across a stack of
   different sizes, which is −0.027em on the headline and −0.0625em on the
   24s. Two ratios, not one length, or the smaller type would go slack as it
   scaled down. */
.lh-onelayer__title {
  margin: 0;
  color: var(--lh-ink-copy);
  font-family: var(--lh-display);
  font-size: clamp(32px, 14.857px + 2.857vw, 56px);
  font-weight: 500;
  line-height: 1.125;
  letter-spacing: -0.0268em;
}

/* 958:16755 — Geist Medium 24 / 31, 650 measure. The measure is what breaks
   the paragraph after "Orcheum"; it is part of the drawing. */
.lh-onelayer__body {
  margin: 0;
  max-width: 650px;
  color: var(--lh-ink-soft);
  font-family: var(--lh-ui);
  font-size: clamp(17px, 12px + 0.8333vw, 24px);
  font-weight: 500;
  line-height: 1.2917;
  letter-spacing: -0.0625em;
}

/* 958:16844 — three rows, 6 apart. */
.lh-caps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 958:16845 — numeral, 15, then two lines of text. Both start at the row's
   top edge; the numeral's line box is its own size and the text's is 28, so
   the numeral rides ~2 above the label's baseline exactly as drawn. */
.lh-cap {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.lh-cap__n {
  flex: 0 0 auto;
  color: var(--lh-ink-copy);
  font-family: var(--lh-num);
  font-size: clamp(17px, 12px + 0.8333vw, 24px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.0625em;
  font-variant-numeric: tabular-nums;
}

.lh-cap__text {
  min-width: 0;
  max-width: 290px;
  font-size: clamp(17px, 12px + 0.8333vw, 24px);
  line-height: 1.1667;
  letter-spacing: -0.0625em;
}

/* 958:16847 — the label is the serif, the description the interface face.
   The frame breaks between them; the break is drawn, so it is markup. */
.lh-cap__label {
  display: block;
  color: var(--lh-ink-copy);
  font-family: var(--lh-display);
  font-weight: 600;
}

.lh-cap__desc {
  display: block;
  color: var(--lh-ink-soft);
  font-family: var(--lh-ui);
  font-weight: 400;
}

/* ── Orbit — 971:2573 ──
   513 × 513 in the frame, on the right track this section has always had. It
   is drawn square and it is placed square: `aspect-ratio` reserves the box
   before the SVG paints, so the section has its final height on the first
   frame and nothing below it moves when the drawing arrives.

   The SVG is inline and carries a `viewBox` and no `width`/`height` of its
   own, so it scales to whatever the track resolves to and never crops — the
   whole composition is always in view, at every width, by construction.

   Its parts are addressable and deliberately left that way for the pass that
   animates them: `.orbit__core` is the centre, `.orbit__arc` the paths,
   `.orbit__body` the marks running on them and `.orbit__spark` the small
   warm ones. Nothing here moves yet.

   495 of the second track's 547 — the same 495 it has always been — held to
   the start of that track so the remaining 52 falls outside it, between the
   drawing and the gutter. A fraction rather than a length, so the drawing
   scales with its track exactly as it did before it was moved.             */

.lh-orbit {
  justify-self: start;
  width: 90.4936%;
  aspect-ratio: 1 / 1;
}

.lh-orbit > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ── The section, narrowed ──
   The gutter steps with the header's, so the copy stays on the wordmark's
   vertical all the way down. Above the stack breakpoint the two tracks hold
   their 765 : 547 ratio; below it the orbit moves under the copy at its drawn
   size and stays centred. It is never re-composed, never cropped and never
   dropped — the drawing is what the section is about, so it survives every
   width the copy does.

   The gap gives a little as the section narrows, as it always has — but from
   24 now, not from 76, so the two halves stay as close together at 1180 as
   they are at 1440.                                                        */

@media (max-width: 1180px) {
  .lh-onelayer {
    gap: 20px;
    padding-inline: 32px;
  }
}

/* Below this the 765 measure can no longer hold the headline on one line
   beside a drawing worth looking at. The section stacks, and the orbit keeps
   its drawn 495 rather than growing into the full measure — it is a drawing
   at a size, not a banner. */
@media (max-width: 1000px) {
  .lh-onelayer {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    padding-bottom: 72px;
  }

  .lh-orbit {
    justify-self: center;
    width: min(100%, 495px);
  }
}

@media (max-width: 900px) {
  .lh-onelayer {
    padding-inline: 24px;
    padding-bottom: 64px;
  }
}

@media (max-width: 600px) {
  .lh-onelayer {
    gap: 40px;
    padding-bottom: 48px;
  }

  .lh-onelayer__copy {
    gap: 20px;
  }

  /* The 15 between numeral and text is a 24px-type measure. */
  .lh-cap {
    gap: 12px;
  }
}

@media (max-width: 420px) {
  .lh-onelayer {
    padding-inline: 16px;
  }
}

/* ══ 5 · FROM INTENT — 958:17579 ══════════════════════════════════════════
   1440 × 656, on the same terms as the section above it: 24 of ceiling, 80 of
   floor, the header's own 52 gutters — so this headline stands on the same
   vertical as "One layer" and as the wordmark above that. 44 of air between
   the lede and the stages.

     958:17668   Headline   Newsreader Medium 56 / 63 · tracking −1.5 · two
                            drawn lines inside a 790 measure
     958:17664   Body       Geist Medium 24 · 648 measure · −0.36
     958:17663   Note       Geist Medium 18 · 604 measure · untracked
     958:17745   Stages     4 × 283, 68 gutter · 1336 = 1440 − 52 − 52

   The four tracks are stated as `repeat(4, 1fr)` with the drawn gutter rather
   than as four 283s: at 1440 the arithmetic resolves to exactly 283, and
   above and below it the gutter stays the drawn one while the measure gives.

   There is no card, no rule, no panel and no connector. The composition is
   held by its whitespace, and the order is carried by the numerals.

   Tracking follows §4's rule, not §4's number: Figma states one −1.5px across
   this section's 56 / 28 / 24 / 18 stack, which is a different ratio at each
   size, so each is carried in the `em` of the size it lands on. The 18s are
   the reason this matters — at −1.5px they are −0.083em, and it is that
   tracking, not the 283 alone, that sets the stages' drawn line breaks.    */

.lh-flow {
  display: flex;
  flex-direction: column;
  gap: 44px;
  padding: 24px 52px 80px;
}

/* 958:17670 — headline and the two bodies, 24 apart. */
.lh-flow__lede {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 790px;
  min-width: 0;
}

/* 958:17668 — Newsreader Medium 56 / 63, tracking −1.5 → −0.0268em. The same
   curve the section above uses, so the two headlines narrow together. */
.lh-flow__title {
  margin: 0;
  color: var(--lh-ink-copy);
  font-family: var(--lh-display);
  font-size: clamp(32px, 14.857px + 2.857vw, 56px);
  font-weight: 500;
  line-height: 1.125;
  letter-spacing: -0.0268em;
}

/* The frame draws the headline on two lines in a measure wide enough to hold
   it on one. The break is composed, so it is a block — not a `<br>`, and not
   `nowrap`: below the artboard each line still wraps rather than overflowing. */
.lh-flow__line {
  display: block;
}

.lh-flow__bodies {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 958:17664 — Geist Medium 24 / 31, 648 measure, tracking −0.36 → −0.015em.
   The measure is what breaks the paragraph after "across" and after "all";
   it is part of the drawing. 1.2917 is Geist's own auto leading, stated as a
   number so a fallback face cannot re-break the paragraph. */
.lh-flow__body {
  margin: 0;
  max-width: 648px;
  color: var(--lh-ink-body);
  font-family: var(--lh-ui);
  font-size: clamp(17px, 12px + 0.8333vw, 24px);
  font-weight: 500;
  line-height: 1.2917;
  letter-spacing: -0.015em;
}

/* 958:17663 — Geist Medium 18, 604 measure. The one text in this section the
   frame leaves untracked, and it reads as the quieter of the two bodies
   because of it. Not normalised to its neighbours. */
.lh-flow__note {
  margin: 0;
  max-width: 604px;
  color: var(--lh-ink-soft);
  font-family: var(--lh-ui);
  font-size: clamp(15px, 12.857px + 0.3571vw, 18px);
  font-weight: 500;
  line-height: 1.2917;
}

/* 958:17745 — the four stages. */
.lh-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 68px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 958:17734 — stage line, 17, then the text block. The column is its own
   container so the mark below can be stated as a fraction of it: the four
   marks then hold their drawn proportion to their own stage at every width,
   which is the only way "the same optical size" survives a fluid column. */
.lh-step {
  display: flex;
  flex-direction: column;
  gap: 17px;
  min-width: 0;
  container-type: inline-size;
}

/* 969:2239 — the stage line and its mark share one row, both hanging from
   its top edge. The row is as tall as the mark, which is what sets the 17
   below it; the numeral and label keep their own line box inside it. */
.lh-step__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

/* 958:17733 — numeral and label on one line, 14 apart, centred on each other.
   The numeral's line box is its own size and the label's is 31, which is what
   sets the numeral 3.5 below the row's top edge exactly as drawn. */
.lh-step__stage {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  color: var(--lh-accent);
  font-size: clamp(17px, 12px + 0.8333vw, 24px);
  letter-spacing: -0.0625em;
  white-space: nowrap;
}

/* 958:17731 — the numeral is Safiro, the display face §4 already self-hosts
   for the capability numbers. The frame names Safiro REGULAR; the repository
   ships SemiBold and Bold only (assets/landing/fonts), so this is set in the
   nearest weight that exists — the same documented substitution 958:16846
   carries, not a second rule. */
.lh-step__n {
  flex: 0 0 auto;
  font-family: var(--lh-num);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.lh-step__label {
  font-family: var(--lh-ui);
  font-weight: 400;
  line-height: 1.2917;
}

/* ── The four stage marks — 969:2243 / 2264 / 2293 / 2308 ──
   78×79, 87×84, 63×69 and 108×79 in a 283 column, each one inset from that
   column's right edge by the 22 / 4 / 26 / 0 the frame draws. Both numbers
   are carried as a fraction of the column and capped at the drawn pixel, so
   a mark shrinks with its stage and never grows past the size it was drawn
   at — the reason they still read as one family when the row folds to two
   and the columns get much wider than 283.

   Each keeps its own aspect ratio, so the box is reserved before the SVG
   paints and no stage moves when the drawings arrive. They are the smallest
   thing in the stage and stay that way: no ground, no card, no border.    */

.lh-step__mark {
  flex: 0 0 auto;
  display: block;
}

.lh-step__mark > svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.lh-step__mark--direct {
  width: min(27.56cqw, 78px);
  margin-right: min(7.77cqw, 22px);
  aspect-ratio: 78 / 79;
}

.lh-step__mark--orchestrate {
  width: min(30.74cqw, 87px);
  margin-right: min(1.41cqw, 4px);
  aspect-ratio: 87 / 84;
}

/* The one stage whose row the frame draws taller than its mark: 969:2289 is
   86 over a 69 drawing, which is what puts "Get one traced result" on the
   same line as the other three headlines instead of 17 above them. The mark
   carries that 17 rather than the row declaring a height, so the drawing
   still sits at the row's top edge exactly as the other three do. */
.lh-step__mark--deliver {
  width: min(22.26cqw, 63px);
  margin-right: min(9.19cqw, 26px);
  margin-bottom: min(6.01cqw, 17px);
  aspect-ratio: 63 / 69;
}

.lh-step__mark--iterate {
  width: min(38.16cqw, 108px);
  aspect-ratio: 108 / 79;
}

/* 958:17711 — the step headline and its copy, one blank line apart. In the
   frame they are one text block and the gap is an empty line box; here they
   are two elements and the gap is that line box's height. Stated once, so all
   four columns keep the same vertical rhythm — the frame sets that blank line
   in a different face in the fourth column, which moves it by a pixel and is
   an authoring artefact rather than a fifth rule. */
.lh-step__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 958:17729 — Newsreader Medium 28, tracking −1.5 → −0.0536em. The frame sets
   this leading to Auto, which for Newsreader is exactly 1 — the reason two
   lines of a step headline sit as close as they do. Stated as the number
   rather than `normal` so a fallback serif cannot open it up. */
.lh-step__title {
  margin: 0;
  color: var(--lh-ink-copy);
  font-family: var(--lh-display);
  font-size: clamp(20px, 14.286px + 0.9524vw, 28px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.0536em;
}

/* 958:17711 — Geist Regular 18, tracking −1.5 → −0.0833em. The stage label is
   the accent and the headline is the serif; this is the quiet third level and
   does not compete with either. */
.lh-step__desc {
  margin: 0;
  color: var(--lh-ink-soft);
  font-family: var(--lh-ui);
  font-size: clamp(15px, 12.857px + 0.3571vw, 18px);
  font-weight: 400;
  line-height: 1.2917;
  letter-spacing: -0.0833em;
}

/* ── The section, narrowed ──
   The gutter steps with the header's and with §4's, so the headline stays on
   the wordmark's vertical all the way down. The stages fold 4 → 2 × 2 → 1 and
   never re-order: Direct, Orchestrate, Deliver, Iterate is the content, not
   the layout. No carousel, no scroller — the row breaks, it does not slide. */

@media (max-width: 1180px) {
  .lh-flow {
    padding-inline: 32px;
  }

  .lh-steps {
    gap: 48px;
  }
}

/* Below this a 283 measure cannot hold four of these columns without the
   serif headlines breaking to three and four lines. Two by two. */
@media (max-width: 1000px) {
  .lh-flow {
    gap: 40px;
    padding-bottom: 72px;
  }

  .lh-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 44px 48px;
  }
}

@media (max-width: 900px) {
  .lh-flow {
    padding-inline: 24px;
    padding-bottom: 64px;
  }
}

@media (max-width: 600px) {
  .lh-flow {
    gap: 36px;
    padding-bottom: 48px;
  }

  .lh-flow__lede {
    gap: 20px;
  }

  .lh-flow__bodies {
    gap: 18px;
  }

  .lh-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .lh-step {
    gap: 12px;
  }

  /* The blank line between headline and copy is a 24px-type measure. */
  .lh-step__text {
    gap: 16px;
  }

  .lh-step__stage {
    gap: 12px;
  }
}

@media (max-width: 420px) {
  .lh-flow {
    padding-inline: 16px;
  }
}

/* ══ 6 · PRICING — 960:17863 ══════════════════════════════════════════════
   1440 × 748 · 44 of ceiling, 80 of floor. The composition is centred rather
   than left-aligned, so it is the only section on this page that is not read
   off the 52 gutter: the frame states a 1312 block, which is 1440 − 64 − 64.
   (Figma's own outer padding is 52 with a fixed 1312 child pinned to the
   start, which would stand a centred headline 12px left of the page's axis.
   That is an auto-layout artefact, not a drawing — the block is centred.)

     960:17762   Headline   Newsreader Medium 56 / 61.6 · tracking −1.12
     960:17763   Toggle     262 × 48 · 32 radius · two 120 × 40 pills, 12 apart
     960:17768   Cards      417 + 20 + 438 + 20 + 417 = 1312, centred on each
                            other · Free and Enterprise 420 tall, Pro 458

   28 between the headline, the toggle and the row — all three, one figure.

   The hierarchy is the frame's and it is deliberately quiet: Pro is 5% wider,
   19 taller top and bottom, sets its name in Geist SemiBold 24 where the
   other two use Regular 20, and is the only orange control on the page below
   the hero's send. Enterprise carries three features to Pro's six because the
   sparseness is the point; nothing here pads it out to match.

   The three tracks are stated as 417fr / 438fr / 417fr rather than as two
   flexible columns beside a fixed 438: at 1312 the arithmetic resolves to
   exactly the drawn widths, and every width below it keeps Pro's proportional
   advantage instead of surrendering it the moment the row is squeezed.      */

.lh-price {
  padding: 44px 52px 80px;
  scroll-margin-top: var(--lh-nav-h);
}

/* 960:17761 — the 1312 block. Headline, toggle and row, 28 apart. */
.lh-price__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  max-width: 1312px;
  margin-inline: auto;
}

/* 960:17762 — Newsreader Medium 56 / 61.6, tracking −1.12 → −0.02em. Same
   family and weight as §4 and §5's headlines and the same narrowing curve, so
   the four headlines scale as one; its own leading and tracking, because the
   frame sets this one tighter than those two. */
.lh-price__title {
  margin: 0;
  color: var(--lh-ink-copy);
  font-family: var(--lh-display);
  font-size: clamp(32px, 14.857px + 2.857vw, 56px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
}

/* ── Billing period — 960:17763 ──
   Two native radios in a group, so the arrow keys, the roving tab stop and
   the "one of these" semantics are the platform's rather than re-implemented.
   The labels carry the drawing; the inputs are only removed from view. */

.lh-price__periods {
  display: flex;
  gap: 12px;
  /* `<fieldset>` for the grouping semantics, so its UA box has to be undone:
     the intrinsic min-width, the 2px groove, and the inline margin. */
  min-width: 0;
  /* The frame states 4/5 inside a 262 × 48 track and a 1px stroke. Figma
     draws that stroke outside the padding box and CSS draws it inside, so the
     inset is carried as 3/4 + the border: 1 + 4 + 120 + 12 + 120 + 4 + 1 =
     262, with the pill 5 from the outer edge exactly as measured. */
  padding: 3px 4px;
  margin: 0;
  border: 1px solid var(--lh-card-border);
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(19.65px);
  backdrop-filter: blur(19.65px);
  transition: box-shadow var(--duration-fast, 150ms) var(--ease-standard, ease);
}

/* One ring for the group rather than one inside each pill: in a radio group
   the focus follows the selection, so the checked pill already says which of
   the two is focused, and a ring outside the track never has to fight the
   charcoal fill for contrast. */
.lh-price__periods:has(.lh-price__period-input:focus-visible) {
  box-shadow:
    0 0 0 2px var(--lh-page),
    0 0 0 4px var(--color-puddle-700, #61686b);
}

@supports not selector(:has(*)) {
  .lh-price__periods:focus-within {
    box-shadow:
      0 0 0 2px var(--lh-page),
      0 0 0 4px var(--color-puddle-700, #61686b);
  }
}

.lh-price__period-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* 960:17764 / 960:17766 — 120 × 40, radius 32. */
.lh-price__period-label {
  display: grid;
  place-items: center;
  width: 120px;
  height: 40px;
  border-radius: 32px;
  color: var(--lh-ink);
  font-family: var(--lh-ui);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--duration-fast, 150ms) var(--ease-standard, ease),
    color var(--duration-fast, 150ms) var(--ease-standard, ease);
}

.lh-price__period-input:checked + .lh-price__period-label {
  background: var(--lh-ink);
  color: var(--lh-toggle-on-ink);
}

@media (hover: hover) and (pointer: fine) {
  .lh-price__period-input:not(:checked) + .lh-price__period-label:hover {
    background: rgba(36, 37, 45, 0.06);
  }
}

/* ── The row — 960:17768 ── */
.lh-price__plans {
  display: grid;
  grid-template-columns:
    minmax(0, 417fr)
    minmax(0, 438fr)
    minmax(0, 417fr);
  align-items: center;
  gap: 20px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 960:17769 — white paper, 16 radius, one soft drop. The frame's 42px
   backdrop blur is not carried: the fill above it is opaque white, so it
   would cost a compositor layer per card and change nothing. */
.lh-price__card {
  display: flex;
  flex-direction: column;
  min-height: 420px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 23.5px -4px rgba(0, 0, 0, 0.21);
}

/* 960:17793 — Pro stands 19 proud of the other two at each end. */
.lh-price__card--pro {
  min-height: 458px;
}

/* 960:17770 — 23/40, name and tagline 4 apart. The separator is drawn at the
   header's own baseline and adds no height to it, so it is the header's rule
   rather than a row of its own: 85 + 335 = 420 exactly. Inset 40 either side,
   as drawn — not full bleed. */
.lh-price__head {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 23px 40px;
}

.lh-price__head::after {
  content: "";
  position: absolute;
  right: 40px;
  bottom: 0;
  left: 40px;
  height: 1px;
  background: var(--lh-card-separator);
}

/* 960:17772 — Geist Regular 20. Pro's is 960:17796: SemiBold 24. That step is
   the whole of the card's typographic prominence and it is not exaggerated. */
.lh-price__plan {
  margin: 0;
  color: var(--lh-ink);
  font-family: var(--lh-ui);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}

.lh-price__card--pro .lh-price__plan {
  font-size: 24px;
  font-weight: 600;
}

/* 960:17773 — Geist Regular 12 / 15. */
.lh-price__for {
  margin: 0;
  color: var(--lh-ink-muted);
  font-family: var(--lh-ui);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.25;
}

/* 960:17776 — 40 all round, the control on the floor. `space-between` is what
   the frame does: Free's 48 and Enterprise's 73 of air above the button are
   not stated figures, they are what is left of 420 once the copy is set. */
.lh-price__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 40px;
}

/* 960:17777 — price block and features, 21 apart; 28 in Pro (960:17801). */
.lh-price__stack {
  display: flex;
  flex-direction: column;
  gap: 21px;
}

.lh-price__card--pro .lh-price__stack {
  gap: 28px;
}

/* 960:17779 — figure and its line, 8 apart. */
.lh-price__figure {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 960:17780 — Newsreader Regular 24. The serif is the headline's family one
   weight down, which is why the price reads as editorial rather than as a
   number in the interface face. */
.lh-price__amount {
  margin: 0;
  color: var(--lh-ink);
  font-family: var(--lh-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

.lh-price__terms {
  margin: 0;
  color: var(--lh-ink-muted);
  font-family: var(--lh-ui);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.25;
}

/* 960:17782 — the rows sit 1 apart, which at 24 tall is a 25 rhythm. */
.lh-price__features {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lh-price__feature {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
}

.lh-price__check {
  flex: 0 0 auto;
  display: block;
  width: 24px;
  height: 24px;
}

.lh-price__feature span {
  color: var(--lh-ink-muted);
  font-family: var(--lh-ui);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.25;
}

/* 960:17936 — the production `.oc-btn`, at the frame's own metrics. Free and
   Enterprise take the primary language untouched, which since UI kit section
   3 is #171d23 at rest and #f05822 under the pointer. */
.lh-price .oc-btn {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 8px 12px;
  border-radius: var(--radius-8, 8px);
  text-decoration: none;
}

/* The ring's inner gap is bound to the surface the control sits on, which
   inside a card is the card, not the page. */
.lh-price .oc-btn:focus-visible {
  box-shadow:
    0 0 0 2px #ffffff,
    0 0 0 4px var(--color-puddle-700, #61686b);
}

/* 960:17816 — Pro's is the one control on this page drawn orange AT REST.
   READ THIS BEFORE CHANGING IT. The old rationale was that this is simply the
   pressed orange every primary already flashed, held. Section 3 retired that:
   #f05822 is now the primary HOVER, and there is no pressed fill at all. So
   Pro's resting fill is the colour its two neighbours take under the pointer,
   and hovering Free or Enterprise now makes them look like Pro at rest. The
   frame still draws Pro orange, so the frame is followed and nothing is
   patched over locally — but this is a live design question for 960:17816,
   not a settled one. Only the resting fill and the SemiBold label are
   restated here; hover is left to button.css. */
.lh-price .lh-price__cta--accent {
  background: var(--color-button-primary-pressed-bg, #f05822);
  color: var(--color-button-primary-fg, #fdfcfb);
  font-weight: 600;
}

/* "Contact sales" is drawn but has no destination in this repository — there
   is no sales route and none is invented here. Same treatment the header
   gives Pricing and FAQ before they existed: present, legible, and it does
   not pretend to lead anywhere. */
.lh-price .oc-btn[aria-disabled="true"] {
  opacity: 1;
  cursor: default;
}

/* ── The section, narrowed ──
   Three tracks hold their proportions to 1024. Below that the row becomes one
   column in the drawn order — Free, Pro, Enterprise, never re-ordered and
   never a carousel — and Pro keeps the two things that made it primary: the
   larger measure and the orange control. */

@media (max-width: 1180px) {
  .lh-price {
    padding-inline: 32px;
  }

  .lh-price__body,
  .lh-price__head {
    padding-inline: 32px;
  }

  .lh-price__head::after {
    right: 32px;
    left: 32px;
  }

  .lh-price__plans {
    gap: 16px;
  }
}

/* At this width a 12px feature line has stopped fitting on one line in the
   two narrow cards, so the drawn heights are released rather than holding a
   number that the copy no longer agrees with. */
@media (max-width: 1100px) {
  .lh-price__card,
  .lh-price__card--pro {
    min-height: 0;
  }
}

@media (max-width: 1024px) {
  .lh-price {
    padding-inline: 24px;
  }

  .lh-price__plans {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 20px;
  }

  /* Stacked, prominence is carried by measure and by the control, in the
     same 438 : 417 the row states. */
  .lh-price__card {
    width: 100%;
    max-width: 468px;
  }

  .lh-price__card--pro {
    max-width: 492px;
  }

  .lh-price__body {
    justify-content: flex-start;
  }
}

@media (max-width: 900px) {
  .lh-price {
    padding-block: 32px 64px;
  }
}

@media (max-width: 600px) {
  .lh-price {
    padding-bottom: 48px;
  }

  .lh-price__inner {
    gap: 24px;
  }

  .lh-price__card,
  .lh-price__card--pro {
    max-width: 100%;
  }
}

@media (max-width: 420px) {
  .lh-price {
    padding-inline: 16px;
  }

  .lh-price__body,
  .lh-price__head {
    padding-inline: 24px;
  }

  .lh-price__head::after {
    right: 24px;
    left: 24px;
  }

  .lh-price__body {
    padding-block: 32px;
  }

  /* 262 still clears a 375 viewport with the gutter; the pills only stop
     being 120 when the gutter would otherwise have to give. */
  .lh-price__period-label {
    width: 112px;
  }
}

/* ══ 7 · FAQ — 974:7392 ═══════════════════════════════════════════════════
   1440 × 997 · 80 of ceiling, 80 of floor, an 892 measure centred in it. The
   52 gutters are the page's, not the frame's: at 1440 the 892 sits 274 clear
   of both edges and never meets them, so the gutter only starts doing work
   below about 996.

     974:7394    Head       830 wide, centred, 29 between serif and lede
     974:7395    Title      Newsreader 400 at 64/64, two drawn lines
     974:7396    Lede       Geist 400 at 20/28.62
     974:7397    Rows       892 wide, 22.658 apart
     974:7398    Row        23.85 all round · 1.193 rule at 10% copy ink
     974:7400    Question   20/28.62
     974:7401    Answer     18/23.85, −0.0596 tracking, in the question's column
     974:7402    Icon       28.62, copy ink at 60%

   ONE SUBSTITUTION, and it is deliberate: the frame sets the question in
   Sk-Modernist, which this repository does not ship and which is not in the
   page's approved type system (Newsreader, Geist, Inter, Safiro). Rather than
   add a face or silently swap the system, the question is set in the page's
   own UI face — the same one the lede and the answer already use. Flagged
   rather than decided: if Sk-Modernist is meant to enter the system, that is
   a type decision, not an implementation one.                              */

.lh-faq {
  /* The row's inset and its icon, stated once. The answer's right padding is
     the sum of the two — it has to clear the icon to sit in the question's
     column — so the narrow cases below only ever restate these. */
  --lh-faq-pad: 23.85px;
  --lh-faq-icon: 28.62px;
  padding: 80px 52px;
  scroll-margin-top: var(--lh-nav-h);
}

/* 974:7393 — the 892 measure; head and rows 76 apart. */
.lh-faq__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 76px;
  max-width: 892px;
  margin-inline: auto;
}

/* 974:7394 — an 830 block inside the 892, so the head is narrower than the
   rows it introduces. */
.lh-faq__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 29px;
  width: 100%;
  max-width: 830px;
  text-align: center;
}

/* 974:7395 — 128 tall for two 64 lines, which is a line-height of exactly 1.
   Stated as `1` rather than as the exporter's `normal`: Newsreader's normal
   would set the two lines 153 apart and the frame's block is 128. */
.lh-faq__title {
  margin: 0;
  color: var(--lh-ink-copy);
  font-family: var(--lh-display);
  /* 64 at 1440, on one unbroken curve down to a 30 floor — the same shape
     the hero's headline uses, so the two never disagree about direction. */
  font-size: clamp(30px, 4.444vw, 64px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

/* The frame breaks the title itself; the break is part of the drawing. */
.lh-faq__title-line {
  display: block;
}

.lh-faq__lede {
  margin: 0;
  color: var(--lh-ink-copy);
  font-family: var(--lh-ui);
  font-size: 20px;
  font-weight: 400;
  line-height: 28.62px;
}

/* 974:7397 */
.lh-faq__list {
  display: flex;
  flex-direction: column;
  gap: 22.658px;
  width: 100%;
}

/* 974:7398 — the rule closes each row rather than separating them, so the
   last row carries one too, exactly as the frame draws it. */
.lh-faq__item {
  border-bottom: 1.193px solid rgba(31, 30, 27, 0.1);
}

.lh-faq__qwrap {
  margin: 0;
  font: inherit;
}

/* The question is the control: the whole header line is the target, and the
   icon rides at its top right on the frame's own 23.85 inset. */
.lh-faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--lh-faq-pad);
  width: 100%;
  margin: 0;
  padding: var(--lh-faq-pad);
  background: none;
  border: 0;
  color: var(--lh-ink-copy);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* 974:7400 — see the substitution note above. */
.lh-faq__q-text {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--lh-ui);
  font-size: 20px;
  font-weight: 400;
  line-height: 28.62px;
}

/* 974:7402 — the frame draws this pointing down in both states and does not
   rotate it, so neither does this. `aria-expanded` carries the state, and the
   open answer is what a sighted reader sees change. */
.lh-faq__icon {
  flex: 0 0 var(--lh-faq-icon);
  width: var(--lh-faq-icon);
  height: var(--lh-faq-icon);
  opacity: 0.6;
}

.lh-faq__q:focus-visible {
  outline: 2px solid var(--lh-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* The answer's own height is the thing that animates — a grid row from 0fr to
   1fr, so nothing has to be measured in script and the row settles at its
   real height. `visibility` is what takes it out of the accessibility tree
   while it is closed, and it is transitioned so it holds until the collapse
   has finished. */
.lh-faq__a {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows 260ms var(--lh-enter-ease),
    visibility 260ms var(--lh-enter-ease);
}

.lh-faq__item.is-open .lh-faq__a {
  grid-template-rows: 1fr;
  visibility: visible;
}

/* The row the grid collapses. It carries the clip and nothing else — no
   padding, because padding survives a 0fr row and would hold the closed row
   23.85 taller than the frame's 76.7. */
.lh-faq__a-inner {
  overflow: hidden;
  min-height: 0;
}

/* 974:7401 — the answer sits in the question's column, not the row's: 23.85
   in from the left, and 52.47 from the right so it clears the icon. */
.lh-faq__a-text {
  margin: 0;
  padding: 0 calc(var(--lh-faq-pad) + var(--lh-faq-icon)) var(--lh-faq-pad) var(--lh-faq-pad);
  color: var(--lh-ink-copy);
  font-family: var(--lh-ui);
  font-size: 18px;
  font-weight: 400;
  line-height: 23.85px;
  letter-spacing: -0.0596px;
}

/* ── The FAQ, folded ──
   Same gutter ladder the pricing section above it walks, so the two keep one
   edge all the way down. The title is already on a continuous curve, so it is
   not restated here; what gives is the row's inset, and only once it has to. */

@media (max-width: 1180px) {
  .lh-faq {
    padding-inline: 32px;
  }
}

@media (max-width: 1024px) {
  .lh-faq {
    padding-inline: 24px;
  }
}

@media (max-width: 900px) {
  .lh-faq {
    padding-block: 56px;
  }
  /* The head sat 76 below on a 997-tall section; at this height that is a
     hole rather than air. */
  .lh-faq__inner {
    gap: 56px;
  }
}

@media (max-width: 600px) {
  /* 23.85 of inset plus the same again as a gutter plus a 28.62 icon is 100 of
     chrome around a question that now has under 300 to live in. The inset
     closes; the mark, the rule and the type keep their proportions. */
  .lh-faq {
    --lh-faq-pad: 18px;
  }
  .lh-faq__q-text {
    font-size: 18px;
    line-height: 26px;
  }
  .lh-faq__lede {
    font-size: 18px;
    line-height: 26px;
  }
}

@media (max-width: 420px) {
  .lh-faq {
    --lh-faq-pad: 14px;
    --lh-faq-icon: 24px;
    padding-inline: 16px;
  }
}

/* The answer arrives at its height with no travel: open is open. */
@media (prefers-reduced-motion: reduce) {
  .lh-faq__a {
    transition: none;
  }
}

/* ══ 8 · FINAL CTA — 960:17941 ════════════════════════════════════════════
   1440 × 687 · 44 of ceiling, 80 of floor, 52 gutters — the same block the
   pricing section stands on, so the two read as one rhythm. Pricing's 80 of
   floor and this section's 44 of ceiling give the 124 of separation the
   frame draws between them.

     972:3537    Drawing    488 × 235, centred
     972:3965    Headline   Newsreader Medium 56 / 61.6 · tracking −1.12 ·
                            two drawn lines in a 607 measure
     960:18043   Composer   the 800 group; the card inside it the drawn 672

   38 between the drawing and the headline, 44 between the headline and the
   Composer: 44 + 235 + 38 + 124 + 44 + 122 + 80 = 687. The drawing and the
   headline are one group so the section's own 44 lands where the frame puts
   it, between the headline and the Composer, rather than being spent twice.

   Nothing else is in this section: no supporting paragraph, no second
   control. The Composer is the call to action.                             */

.lh-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
  padding: 44px 52px 80px;
  scroll-margin-top: var(--lh-nav-h);
}

/* 972:3536 — the drawing and the headline, 38 apart. */
.lh-cta__lede {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 38px;
  width: 100%;
}

/* 972:3537 — the drawn 488, never wider, and never wider than the section
   either: below 592 the gutters take it and it narrows with them rather than
   running under them. `aspect-ratio` reserves the box before the SVG paints,
   so the headline and the Composer do not move when it arrives.

   It sits above the headline in the flow — not behind it, not absolute, not
   a background. Its four beats are `.chaos__noise`, `.chaos__mind`,
   `.chaos__signal` and `.chaos__resolve`, addressable and still.           */
.lh-cta__art {
  width: min(100%, 488px);
  aspect-ratio: 488 / 235;
}

.lh-cta__art > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Identical to 960:17762 — same family, weight, leading, tracking and the
   same narrowing curve as the pricing headline, because the frame sets them
   identically. Stated rather than inherited: this section owns no selector
   of §6's, and §6 owns none of this one's. */
.lh-cta__title {
  margin: 0;
  color: var(--lh-ink-copy);
  font-family: var(--lh-display);
  font-size: clamp(32px, 14.857px + 2.857vw, 56px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
}

/* The frame draws the headline on two lines in a 607 measure. The break is
   composed, so it is a block — the same decision `.lh-flow__line` makes, and
   for the same reason: below the artboard each line still wraps rather than
   overflowing. `balance` comes off it, or it would re-break the sentence the
   frame has already broken. */
.lh-cta__line {
  display: block;
  text-wrap: initial;
}

/* 960:18043 — the frame's 800 group. The card's own 672 and its whole skin
   come from `.lh-composer-host` (§2), which this host also carries: one
   composer skin on this page, worn twice. */
.lh-cta__composer {
  max-width: var(--lh-hero-w);
}

/* ══ 9 · FOOTER — 960:18236 ═══════════════════════════════════════════════
   1440 × 316 · 44/40 padding · one 1px #e6e3dd hairline above · 78 between
   the columns and the copyright.

     960:18238   Columns   4 × 328, 16 apart = 1360 · items 12 apart
     960:18327   Brand     28 mark + 8 + 129 wordmark
     960:18263   Copyright Geist Regular 14 · centred

   The frame gives the Resources column a 20 line box and the Social and
   legal columns a 14 one, so the first column's rows stride 32 and the
   other two stride 26. That difference is drawn and visible, so it is
   reproduced; it is not levelled into one figure.                          */

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

.lh-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 78px;
  padding: 44px 40px;
}

/* 960:18238 — four equal tracks. `minmax(0, 1fr)` rather than `1fr` so a
   long label shortens its own column instead of widening the grid past the
   viewport. */
.lh-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

/* A direct grid child, so it is blockified and its box is exactly the 28 the
   marks measure — an inline-level link here would sit in a line box and carry
   its strut's descender into the column's height. */
.lh-footer__brand {
  display: flex;
  align-items: center;
  justify-self: start;
  gap: 8px;
  text-decoration: none;
}

.lh-footer__mark {
  display: block;
  width: 28px;
  height: 28px;
}

.lh-footer__word {
  display: block;
  width: 129px;
  height: 24px;
}

.lh-footer__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* 960:18250 / 960:18255 — Geist Medium 14 in the copy ink. A heading by role
   and by markup; the frame simply does not make it bigger than the links. */
.lh-footer__head {
  margin: 0;
  color: var(--lh-ink);
  font-family: var(--lh-ui);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.lh-footer__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  /* Stated on the row, not only on the link: the row's own strut is what
     decides the item's height, and at the inherited size it would set a 16
     line box under a 14 link. */
  font-size: 14px;
  list-style: none;
}

/* The row owns the line box, not the link inside it: the item's height is
   then the drawn one rather than whatever strut the inline box would add. */
.lh-footer__list > li {
  line-height: 1;
}

.lh-footer__link {
  color: var(--lh-ink-soft);
  font-family: var(--lh-ui);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  transition: color 140ms ease;
}

/* 960:18249 — the Resources column is the one set in Medium, and its rows
   sit on a 20 line box, so they stride 32 where Social's and the legal
   column's stride 26. Both are drawn and both are visible. */
.lh-footer__list--resources > li {
  line-height: 20px;
}

.lh-footer__list--resources .lh-footer__link {
  font-weight: 500;
}

/* 960:18251 — "Documentation" is left on the 14 box the other columns use
   while the three rows above it sit on 20, which puts it 29 below "Studios"
   where the rest of the column strides 32. It is the frame's own remnant of
   those three rows having been added later (they carry far higher node ids).
   Reproduced rather than levelled: evening it out would move this column off
   the drawn 136 and the footer off its 316. */
.lh-footer__list--resources > li:last-child {
  line-height: 1;
}

/* Only a real destination responds to the pointer. */
.lh-footer__link[href]:hover,
.lh-footer__link[href]:focus-visible {
  color: var(--lh-ink);
}

/* Drawn, not published. No href, so it cannot lead anywhere real or invented
   — with or without JavaScript — and it is not a tab stop pretending to be
   one. It keeps the frame's ink and its place in the column. */
.lh-footer__link[data-unpublished] {
  cursor: default;
}

/* 960:18263 — the frame right-aligns this row against a second, transparent
   copyright that is template residue (960:18265). With that text gone, the
   drawn position of "© 2026 Orcheum" — 19px left of the page's axis — is an
   artefact of a string nobody can see. Centred, which is what the frame
   reads as. */
.lh-footer__copy {
  margin: 0;
  color: var(--lh-ink);
  font-family: var(--lh-ui);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}

/* ── The section, narrowed ──
   The CTA never changes composition: the headline scales on the same curve
   as the other three and the composer keeps its usable width. The footer
   goes four columns → two → one, always in the drawn reading order.        */

@media (max-width: 1180px) {
  .lh-cta {
    padding-inline: 32px;
  }

  .lh-footer__inner {
    padding-inline: 32px;
  }
}

@media (max-width: 1024px) {
  .lh-cta {
    padding-inline: 24px;
  }

  .lh-footer__inner {
    padding-inline: 24px;
    gap: 56px;
  }
}

/* Two columns before any of the four can be crushed. Brand keeps the first
   cell, so the reading order is unchanged. */
@media (max-width: 900px) {
  .lh-cta {
    padding-block: 32px 64px;
    gap: 32px;
  }

  .lh-footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 16px;
  }
}

@media (max-width: 600px) {
  .lh-cta {
    padding-bottom: 48px;
  }

  .lh-footer__inner {
    padding-block: 32px;
    gap: 40px;
  }

  .lh-footer__cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

@media (max-width: 420px) {
  .lh-cta {
    padding-inline: 16px;
  }

  .lh-footer__inner {
    padding-inline: 16px;
  }
}

/* ══ 10 · ENTRANCE ═════════════════════════════════════════════════════════
   One system, all five phases, and the six drawings on the same terms as
   everything else: opacity and a small lift, once. No scale, no bounce, no
   elastic, no blur, and nothing that keeps moving after it has arrived —
   the composition rests.

   Nothing here animates a layout property: opacity and transform only.

   The hidden states hang off `.lh-js`, set inline in the head. Without
   JavaScript the page is simply drawn.                                     */

.lh {
  --lh-enter-ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  --lh-enter-dur: 520ms;
  --lh-enter-step: 70ms;
  --lh-enter-lift: 10px;
}

.lh-js .lh-reveal {
  opacity: 0;
  transform: translate3d(0, var(--lh-enter-lift), 0);
  transition:
    opacity var(--lh-enter-dur) var(--lh-enter-ease),
    transform var(--lh-enter-dur) var(--lh-enter-ease);
  transition-delay: calc(var(--d, 0ms) + var(--i, 0) * var(--lh-enter-step));
}

/* Two ways in: an element told to arrive (the hero, on load) and an element
   inside a section that has arrived (everything below the fold). */
.lh-js .lh-reveal.is-in,
.lh-js .is-in .lh-reveal {
  opacity: 1;
  transform: none;
}

/* The header does not move. A sticky bar that slides on load reads as a
   layout settling rather than as a page arriving. */
.lh-js .lh-reveal--fade {
  --lh-enter-lift: 0px;
  --lh-enter-dur: 420ms;
}

/* ── Five of the six drawings arriving ──
   They arrive on the page's own entrance and nothing else: opacity and a
   lift, once, with their section. No node-by-node choreography, no hover
   lift, nothing that loops, orbits or floats — those drawings are still.

   The parts inside them (`.chaos__noise`, `.iter__mark` …) are named,
   grouped and still deliberately untouched here: this stylesheet declares no
   transition, no transform and no will-change on any of them, so nothing in
   it has to be undone when their pass comes.

   The orbit is the exception, and it is now §10's. It no longer carries
   `.lh-reveal` at all — it is not a rectangle that fades in.               */

/* ── Motion ── */
@media (prefers-reduced-motion: reduce) {
  .lh-nav__link,
  .lh-menu__bars,
  .lh-menu__bars::before,
  .lh-menu__bars::after,
  .lh-composer-host .oc-composer,
  .lh-price__periods,
  .lh-price__period-label,
  .lh-footer__link {
    transition: none;
  }

  /* Not "the same entrance, faster" — no entrance. The reader arrives at the
     finished page: nothing hidden, nothing offset, nothing to wait for. */
  .lh-js .lh-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ══ 11 · THE ORBIT, RUNNING ══════════════════════════════════════════════
   971:2573 in motion. The section says "One layer to run them all", and the
   drawing beside it is the only thing on this page that has to mean it: one
   stable core, and around it a system that is coordinated without being
   synchronised. Everything below is in service of that sentence.

   ── What the drawing actually is ──
   Eighty-three paths, and the geometry is not decorative. Fitting a centre
   to the ring system puts it at 261.54, 256.10 — four units off the core's
   own centre, because the core is drawn by hand — and from there the marks
   fall into five clean shells with almost no scatter:

       s1  r ≈  69–81   14 marks      s4  r ≈ 201–204   13 marks
       s2  r ≈ 111–113  12 marks      s5  r ≈ 237–251   27 marks
       s3  r ≈ 152–156  16 marks

   No path crosses a shell, and no path in one shell touches a path in
   another — checked, all 3 403 pairs. The shells are genuinely independent
   rings, so each one can be given its own rate and its own direction and the
   drawing cannot tear.

   ── Why rotation about that centre, and nothing else ──
   A rotation about the ring centre moves a mark ALONG the path it was drawn
   on. It does not invent a trajectory: the arc slides in its own groove, the
   node travels its own orbit, the radius never changes and the bounding box
   never changes. That is also why the composition is safe — the drawing is
   locked, and this is the one transform that cannot unlock it.

   The whole shell rotates together, arcs and nodes and sparks as one, so
   every junction the illustrator drew stays a junction. What varies is
   BETWEEN shells, not within them.

   ── Why it drifts rather than orbits ──
   A continuous revolution is a solar system, and a fast one is a spinner.
   Both are forbidden and both would be wrong: they would eventually leave
   the composition somewhere other than where it was approved. So each shell
   swings — out and back, returning through its drawn position every cycle.
   The drawing is always the drawing; it is never a frame of an animation.

   What is held near-constant is SPEED, not angle. An early cut held linear
   travel constant instead — a tidy 8px everywhere — and it was wrong: at the
   long outer periods that works out to 0.45 px/s, a third of the inner ring's
   pace, and the rim stopped reading as heavy and started reading as stopped.
   Forty of the eighty-two marks live out there. So each shell is tuned to a
   peak linear speed instead, falling gently outward, which is what actually
   carries the weight: the rim is slower than the core's neighbours, but it is
   unmistakably moving.

   The amplitudes below are the second correction to the same instinct. The
   first pass was tuned to be missable — around 1 px/s and eight to eleven
   pixels of travel — and once the entrance finished the drawing read as a
   still picture. Restraint that nobody can detect is not restraint, it is
   just a static illustration with a stylesheet attached. So the travel went
   up by about two and a third, to eighteen to twenty-three pixels swing:

       s1  17s  +7.50°  3.09 px/s     s4  31s  −3.40°  1.81 px/s
       s2  23s  −6.00°  2.38 px/s     s5  41s  +2.70°  1.52 px/s
       s3  29s  +3.90°  2.38 px/s

   Note what did NOT change to buy that. The periods are the same, so the
   drift is no more frequent; the peaks sit at the same fractions, so the
   rhythm is the same; nothing spins. Only the swing is wider. Instantaneous
   speed is still between 1.5 and 3 px/s — a mark crosses its own width in
   about four seconds — which is why the section is still readable with the
   drawing in peripheral vision. Inner shells move most per second, outer
   shells move furthest per cycle: quick and light against slow and broad,
   which is the hierarchy the drawing already had in its line weights.

   Adjacent shells counter-rotate. The five periods are 17/23/29/31/41 — all
   prime, so the system passes through a given arrangement once and does not
   return to it for a hundred and sixty-seven days. Each shell also has its own
   asymmetric schedule (the peaks do not sit at 25%/75%), so they are not in
   phase even in the first cycle, and the eased segments mean nothing ever
   holds a constant angular speed.

   ── The seven that lead ──
   Ring drift alone is a mechanism. `.orbit-lead` is the intelligence: seven
   marks — three of them the warm ones — that advance a little ahead of their
   ring and ease back, mostly at rest, on periods coprime with everything
   else. Each one stands well clear of every other path, so its extra travel
   cannot pull an arc off a junction. The three sparks dim and recover across
   the advance, on a period unrelated to the advance itself, so the two never
   land together: a route firing, not a blinking light. Their advance is
   deliberately NOT scaled with the shells — it is a slip relative to the
   ring, and clearance, not taste, is what caps it.

   ── Costs ──
   Transform and opacity only. Nothing here reads or writes a layout
   property, nothing animates a filter or a shadow, no element is promoted,
   and no library was added — this is 83 paths, five keyframe sets and a
   media query. `will-change` is deliberately absent: 83 promoted layers
   would cost far more than the one repaint of a 495px box that this is.  */

.orbit-art {
  /* The fitted centre of the ring system. Every rotation in this section is
     about this point and no other. */
  --orbit-o: 261.54px 256.1px;
  --orbit-in-dur: 700ms;
  /* The page's own entrance ease, so the drawing arrives on the same terms
     as the copy beside it. */
  --orbit-in-ease: cubic-bezier(0.22, 0.8, 0.24, 1);
}

.orbit-art path,
.orbit-art .orbit-lead {
  transform-box: view-box;
  transform-origin: var(--orbit-o);
}

/* The core is the one thing that does not belong to the ring system, so it
   breathes about ITS own centre rather than the rings'. */
.orbit__core path {
  transform-origin: 265.41px 255.79px;
}

/* ── The shells ──
   `--k` is the entrance rank, `--b` the sixth of the circle the mark sits
   in. Both were measured off the drawn `d`; neither is a decision. */
.orbit-s1 { --k: 0 }
.orbit-s2 { --k: 1 }
.orbit-s3 { --k: 2 }
.orbit-s4 { --k: 3 }
.orbit-s5 { --k: 4 }

.orbit-n0 { --b: 0 }
.orbit-n1 { --b: 1 }
.orbit-n2 { --b: 2 }
.orbit-n3 { --b: 3 }
.orbit-n4 { --b: 4 }
.orbit-n5 { --b: 5 }

/* ══ The entrance ═════════════════════════════════════════════════════════
   Not a fade-up. The system forms:

     0ms      the core, alone, from nothing
     260ms    the rings begin resolving into register, inner first, each one
              swinging in from the side its live drift will later favour and
              settling out to its true radius
     420ms    the marks follow their rings, sweeping round the circle in
              sixths so the ring comes online rather than appearing
     ~1700ms  the last mark lands, and the live state is already under way

   Every hidden state hangs off `.lh-js`. Without JavaScript the drawing is
   simply drawn, which is the rule the rest of this stylesheet already keeps.
   The section's own `.is-in` is the trigger — the same one the copy uses, so
   the two halves of the section arrive together.                          */

.lh-js .orbit-art path {
  opacity: 0;
}

/* The arcs are the ring resolving; the marks are what runs on it, so they
   follow rather than accompany. Each shell rule below reads this off its own
   element, which is why the two tiers cost one declaration each rather than
   a delay hand-written eighty-two times. */
.lh-js .is-in .orbit__arc path { --orbit-in-lead: 260ms }
.lh-js .is-in .orbit__body path,
.lh-js .is-in .orbit__spark path { --orbit-in-lead: 420ms }

@keyframes orbit-core-in {
  from { opacity: 0; transform: scale(0.32) }
  55%  { opacity: 1 }
  to   { opacity: 1; transform: scale(1) }
}

/* Each shell enters from the side its drift will favour, and from just
   inside its radius. The scale only ever runs 0.95 → 1, so the drawing is
   never larger than drawn and nothing can overflow or clip. */
@keyframes orbit-in-s1 {
  from { opacity: 0; transform: rotate(-5deg) scale(0.955) }
  to   { opacity: 1; transform: rotate(0deg) scale(1) }
}
@keyframes orbit-in-s2 {
  from { opacity: 0; transform: rotate(6deg) scale(0.962) }
  to   { opacity: 1; transform: rotate(0deg) scale(1) }
}
@keyframes orbit-in-s3 {
  from { opacity: 0; transform: rotate(-4.5deg) scale(0.968) }
  to   { opacity: 1; transform: rotate(0deg) scale(1) }
}
@keyframes orbit-in-s4 {
  from { opacity: 0; transform: rotate(4deg) scale(0.974) }
  to   { opacity: 1; transform: rotate(0deg) scale(1) }
}
@keyframes orbit-in-s5 {
  from { opacity: 0; transform: rotate(-3.2deg) scale(0.978) }
  to   { opacity: 1; transform: rotate(0deg) scale(1) }
}

/* ══ The live state ═══════════════════════════════════════════════════════
   Every cycle starts AND ends at the drawn position, which is the whole
   reason a shell can pick up its drift at any moment without a jump: the
   entrance's filled end state and the drift's 0% are the same value, so the
   two animations meet exactly. It is also why the live delays can be skewed
   per shell — more phase for free, and still nothing moves discontinuously.

   The peaks sit at deliberately unequal fractions of each cycle. A shell
   that peaked at 25% and 75% would be a sine, and five sines started at rest
   look synchronised for the first minute however coprime their periods.  */

.lh-js .is-in .orbit-art .orbit-s1 {
  animation-name: orbit-in-s1, orbit-drift-s1;
  animation-duration: var(--orbit-in-dur), 17s;
  animation-delay: calc(var(--orbit-in-lead, 260ms) + var(--b, 0) * 44ms), 1750ms;
  animation-iteration-count: 1, infinite;
  animation-timing-function: var(--orbit-in-ease), ease-in-out;
  animation-fill-mode: both, none;
}
.lh-js .is-in .orbit-art .orbit-s2 {
  animation-name: orbit-in-s2, orbit-drift-s2;
  animation-duration: var(--orbit-in-dur), 23s;
  animation-delay: calc(var(--orbit-in-lead, 260ms) + 90ms + var(--b, 0) * 44ms), 1980ms;
  animation-iteration-count: 1, infinite;
  animation-timing-function: var(--orbit-in-ease), ease-in-out;
  animation-fill-mode: both, none;
}
.lh-js .is-in .orbit-art .orbit-s3 {
  animation-name: orbit-in-s3, orbit-drift-s3;
  animation-duration: var(--orbit-in-dur), 29s;
  animation-delay: calc(var(--orbit-in-lead, 260ms) + 180ms + var(--b, 0) * 44ms), 1840ms;
  animation-iteration-count: 1, infinite;
  animation-timing-function: var(--orbit-in-ease), ease-in-out;
  animation-fill-mode: both, none;
}
.lh-js .is-in .orbit-art .orbit-s4 {
  animation-name: orbit-in-s4, orbit-drift-s4;
  animation-duration: var(--orbit-in-dur), 31s;
  animation-delay: calc(var(--orbit-in-lead, 260ms) + 270ms + var(--b, 0) * 44ms), 2210ms;
  animation-iteration-count: 1, infinite;
  animation-timing-function: var(--orbit-in-ease), ease-in-out;
  animation-fill-mode: both, none;
}
.lh-js .is-in .orbit-art .orbit-s5 {
  animation-name: orbit-in-s5, orbit-drift-s5;
  animation-duration: var(--orbit-in-dur), 41s;
  animation-delay: calc(var(--orbit-in-lead, 260ms) + 360ms + var(--b, 0) * 44ms), 2060ms;
  animation-iteration-count: 1, infinite;
  animation-timing-function: var(--orbit-in-ease), ease-in-out;
  animation-fill-mode: both, none;
}

@keyframes orbit-drift-s1 {
  0%   { transform: rotate(0deg) }
  26%  { transform: rotate(7.5deg) }
  49%  { transform: rotate(0deg) }
  76%  { transform: rotate(-7.5deg) }
  100% { transform: rotate(0deg) }
}
@keyframes orbit-drift-s2 {
  0%   { transform: rotate(0deg) }
  31%  { transform: rotate(-6deg) }
  55%  { transform: rotate(0deg) }
  79%  { transform: rotate(6deg) }
  100% { transform: rotate(0deg) }
}
@keyframes orbit-drift-s3 {
  0%   { transform: rotate(0deg) }
  22%  { transform: rotate(3.9deg) }
  46%  { transform: rotate(0deg) }
  68%  { transform: rotate(-3.9deg) }
  100% { transform: rotate(0deg) }
}
@keyframes orbit-drift-s4 {
  0%   { transform: rotate(0deg) }
  31%  { transform: rotate(-3.4deg) }
  58%  { transform: rotate(0deg) }
  80%  { transform: rotate(3.4deg) }
  100% { transform: rotate(0deg) }
}
@keyframes orbit-drift-s5 {
  0%   { transform: rotate(0deg) }
  27%  { transform: rotate(2.7deg) }
  57%  { transform: rotate(0deg) }
  80%  { transform: rotate(-2.7deg) }
  100% { transform: rotate(0deg) }
}

/* The core, breathing. 1.1% over fifteen seconds — enough that it is not
   pasted onto a moving drawing, far too little to read as movement. It is
   the anchor; everything else is measured against its stillness. */
.lh-js .is-in .orbit__core path {
  animation-name: orbit-core-in, orbit-core-breathe;
  animation-duration: 620ms, 15s;
  animation-delay: 0ms, 1600ms;
  animation-iteration-count: 1, infinite;
  animation-timing-function: var(--orbit-in-ease), ease-in-out;
  animation-fill-mode: both, none;
}

@keyframes orbit-core-breathe {
  0%   { transform: scale(1) }
  44%  { transform: scale(1.011) }
  100% { transform: scale(1) }
}

/* ══ The seven that lead ══════════════════════════════════════════════════
   Layered on top of the ring, not instead of it: the wrapper carries the
   advance, the path inside it carries the ring's drift, and the two compose.
   Mostly at rest — the advance occupies about a tenth of each cycle and the
   return is slow, so what the eye catches is a mark having moved rather than
   a mark moving.

   WHICH marks may do this is not a taste decision, it is a clearance one.
   The drawing joins arcs to nodes, and a node that advances away from the arc
   it terminates would read as the drawing coming apart. So a mark leads only
   if it stands at least 11 units clear of every other path in the drawing —
   measured, not eyeballed — and its advance is then held under 3 units, a
   safety factor of about four. That is a short list, and this is all of it:

       s1  p067  gap 11.5   1.90°   s5  p037  gap 39.0  -0.70°
       s2  p057  gap 36.6   1.30°   s5  p069  gap 22.5   0.62°
       s3  p080  gap 20.6  -1.00°   s5  p027  gap 88.7  -0.68°
       s4  p039  gap 38.3   0.85°

   The angle falls as the radius rises so the LINEAR advance is about 2.7 to
   3.0 units everywhere: a lead on the rim slips as far as a lead by the core,
   which is what keeps them reading as one behaviour rather than seven.

   p042, p050 and p058 are warm marks too, and they are deliberately left
   alone — each one sits within 6 units of the arc it belongs to, and nothing
   in this section is worth breaking a junction the illustrator drew.       */

.lh-js .is-in .orbit-lead {
  animation-name: orbit-lead-advance;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes orbit-lead-advance {
  0%, 46% { transform: rotate(0deg) }
  57%     { transform: rotate(var(--lead-a)) }
  100%    { transform: rotate(0deg) }
}

.lh-js .is-in .orbit-lead--1 { --lead-a:  1.90deg; animation-duration: 21s; animation-delay: 2600ms }
.lh-js .is-in .orbit-lead--2 { --lead-a:  1.30deg; animation-duration: 26s; animation-delay: 3100ms }
.lh-js .is-in .orbit-lead--3 { --lead-a: -1.00deg; animation-duration: 31s; animation-delay: 3400ms }
.lh-js .is-in .orbit-lead--4 { --lead-a:  0.85deg; animation-duration: 24s; animation-delay: 2500ms }
.lh-js .is-in .orbit-lead--5 { --lead-a: -0.70deg; animation-duration: 34s; animation-delay: 3700ms }
.lh-js .is-in .orbit-lead--6 { --lead-a:  0.62deg; animation-duration: 27s; animation-delay: 2900ms }
.lh-js .is-in .orbit-lead--7 { --lead-a: -0.68deg; animation-duration: 38s; animation-delay: 2700ms }

/* Three of the seven are the warm marks, and they carry one thing more.
   Opacity, on a period coprime with their own advance, so the dim and the
   move drift in and out of coincidence instead of arriving together as one
   event — a route firing, not a light blinking. Opacity does not contend with
   the transform above; both live on the same wrapper. */
.lh-js .is-in .orbit__spark .orbit-lead {
  animation-name: orbit-lead-advance, orbit-spark-route;
  animation-timing-function: ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite;
}

@keyframes orbit-spark-route {
  0%, 52% { opacity: 1 }
  70%     { opacity: 0.62 }
  100%    { opacity: 1 }
}

/* p067, p039, p027 — the three leads that are also sparks. */
.lh-js .is-in .orbit-lead--1 { animation-duration: 21s, 22s; animation-delay: 2600ms, 4600ms }
.lh-js .is-in .orbit-lead--4 { animation-duration: 24s, 19s; animation-delay: 2500ms, 3900ms }
.lh-js .is-in .orbit-lead--7 { animation-duration: 38s, 25s; animation-delay: 2700ms, 3100ms }

/* ══ Reduced motion ═══════════════════════════════════════════════════════
   The same answer §9 gives, for the same reason: not a shorter orbit, no
   orbit. The reader gets the drawing finished — every mark at its drawn
   position, at full opacity, at rest. Nothing hidden, nothing offset,
   nothing pulsing, nothing to wait for, and the composition is exactly the
   one that was approved.

   `!important` is load-bearing here, twice over, and both reasons were found
   by testing the rule rather than by reading it:

     · The shell rules above are `.lh-js .is-in .orbit-art .orbit-sN` — four
       classes. Any selector here that ends in a type (`… .orbit-art path`)
       carries three classes and one type and LOSES to them. Without the flag
       this block quietly failed: it set opacity, and the eighty-two paths
       went on orbiting underneath it.
     · A running animation outranks any normal declaration whatever its
       specificity, so `transform: none` cannot stop one on its own. Killing
       `animation` is what stops it, and that has to win outright.

   So the flag, and no relying on selector arithmetic that a later shell rule
   could silently outgrow.                                                  */
@media (prefers-reduced-motion: reduce) {
  .lh-js .orbit-art path,
  .lh-js .orbit-art .orbit-lead,
  .lh-js .is-in .orbit-art path,
  .lh-js .is-in .orbit-art .orbit-lead {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   §11 — Direct, 969:2243
   --------------------------------------------------------------------------
   The first stage mark, and the one the other three are measured against. It
   is 78×79 at the drawn size and it sits beside its own headline, so
   everything here is an order of magnitude smaller than §10's orbit: this is
   a mark being drawn, not a drawing that performs.

   ── What it says ──
   Ten dark fragments around one warm centre. The stage is "Tell Orcheum what
   you need", and the drawing is the moment a loose thought becomes a
   recognisable intent — so the fragments are struck first and the centre is
   the last thing in the mark to exist. The point that ends up holding still
   is also the point that arrives last.

   It is NOT a workflow diagram, so nothing here converges, orbits, spins or
   dissolves, and no fragment travels toward the centre or away from it. Each
   one is drawn where it belongs, along its own outline, and stays there.

   ── Clip safety ──
   The drawing keeps its `direct-clip` rect, which is the viewBox exactly, and
   three fragments live on that boundary: p002 touches x=0, p006 already runs
   0.30 above y=0, p001 comes within 0.09 of y=79. The construction cannot
   reach any of them: it moves nothing. The half-unit stroke is centred on the
   outline, so it can extend a quarter of a unit past a boundary path while it
   is being drawn — a quarter of a pixel, on a contour that is transparent by
   the time the mark is finished. The live drift below is the only thing that
   translates at all, and the two boundary fragments are given none of it.

   ── Costs ──
   Two paint channels and a transform, on fourteen paths, and no layout
   property is read or written after `getTotalLength` at startup: the box is
   reserved by `.lh-step__mark--direct` before the SVG paints, so nothing here
   can shift the stage or the row. No dependency, no promotion, no
   rasterisation, and the SVG's own geometry is untouched — this section adds
   classes to paths and nothing else.                                       */

/* ══ How all four marks are drawn ═════════════════════════════════════════
   These are hand-drawn illustrations, and they arrive the way a drawing
   arrives: line, then fragment, then shape, then detail. Not four SVGs
   fading in.

   ── The technique ──
   Not one path in the four files carries a stroke — they are filled
   silhouettes, which is exactly the artwork we are not allowed to change. So
   each path is given a stroke IN ITS OWN FILL COLOUR, its outline is drawn by
   running `stroke-dashoffset` down to zero along the path's real geometry,
   and the fill then comes up underneath the ink as the stroke fades out. The
   last keyframe is `stroke-opacity: 0; fill-opacity: 1` — the file's artwork,
   to the unit, with the stroke gone rather than merely matched.

   CSS cannot measure a path, so `home.js` writes each one's length into
   `--len` once at startup and sets the stroke colour from the path's own
   `fill`. That is the whole of the JavaScript: no library, no per-frame work,
   no layout property read or written after that first measurement.

   ── The rhythm ──
   A path does not wait for the one before it to finish. Starts are staggered
   on `--o` (an uneven index, not a constant interval) and durations vary with
   how structural a path is, so three or four outlines are usually in flight
   at once and the drawing accumulates instead of listing itself. Structural
   contours are slow and early; details are quick and late. Each mark is fully
   constructed between 2.1 and 2.3 seconds.

   ── The handoff ──
   Construction touches `stroke-dashoffset`, `stroke-opacity` and
   `fill-opacity` and never `transform`, so the live state below — which is
   transform-only and begins and ends at identity — can start at any moment
   without a jump. It is nevertheless delayed past the last path of its own
   mark, so the drawing is finished before it is alive.

   ── The trigger ──
   Each mark carries its own `.is-in`, set by its own observer at 60% visible
   (home.js), so a reader meets a drawing being drawn rather than finding it
   already finished. The copy's reveal is untouched: that class lands on the
   mark, never on the step.                                                 */

.direct-art path,
.orch-art path,
.deliv-art path,
.iter-art path {
  transform-box: view-box;
  /* Half a unit on drawings that render at roughly one unit to the pixel —
     a hairline, and the same weight in all four so the row reads as one
     hand. Invisible at rest: `--len` is absent until JavaScript measures it,
     and the stroke is transparent until its own path is being drawn. */
  stroke-width: 0.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-opacity: 0;
  stroke-dasharray: var(--len);
}

/* Hidden only where the construction can actually run. Without JavaScript
   there is no `--len` and no stroke, so the drawing is simply drawn — the
   rule the rest of this stylesheet keeps. It is the FILL that waits, not the
   element: the ink has to be visible while the fill is not. */
.lh-js .direct-art path,
.lh-js .orch-art path,
.lh-js .deliv-art path,
.lh-js .iter-art path { fill-opacity: 0 }

/* One keyframe set for all fifty-two paths. The outline draws through the
   first 58%, the fill crosses under the ink through the next 20%, and the
   stroke is gone by the end. Nothing pops, because nothing here is a step:
   every channel is interpolated. */
@keyframes mark-construct {
  0%   { stroke-dashoffset: var(--len); stroke-opacity: 0;    fill-opacity: 0 }
  7%   { stroke-opacity: 1 }
  58%  { stroke-dashoffset: 0;          stroke-opacity: 1;    fill-opacity: 0 }
  79%  { stroke-opacity: 0.55;                                fill-opacity: 0.6 }
  100% { stroke-dashoffset: 0;          stroke-opacity: 0;    fill-opacity: 1 }
}

.direct-art,
.orch-art,
.deliv-art,
.iter-art {
  /* A pen's own curve: it takes a moment to bite, runs evenly, and eases off
     at the end of the stroke. Not the page's entrance ease — that one is for
     things that arrive, and these are things that are made. */
  --mark-draw: cubic-bezier(0.38, 0.06, 0.2, 1);
}

.direct-art {
  /* Each mark leads by its own step's reveal delay (`--i` × 70ms) and no
     more, so no drawing spends its construction multiplied by a parent that
     is still fading up. */
  --direct-in-lead: 220ms;
  --direct-u: 130ms;
}

.direct-art .direct__core { transform-origin: 39.81px 39.49px }
.direct-art .direct-f1  { transform-origin: 38.28px  3.29px }
.direct-art .direct-f2  { transform-origin:  4.83px 41.01px }
.direct-art .direct-f3  { transform-origin: 63.60px 12.95px }
.direct-art .direct-f4  { transform-origin: 39.36px 74.22px }
.direct-art .direct-f5  { transform-origin: 15.38px 13.13px }
.direct-art .direct-f6  { transform-origin: 73.46px 40.89px }
.direct-art .direct-f7  { transform-origin: 15.62px 64.72px }
.direct-art .direct-f8  { transform-origin: 54.35px 55.86px }
.direct-art .direct-f9  { transform-origin: 38.00px 17.52px }
.direct-art .direct-f10 { transform-origin: 38.76px 61.74px }

/* ══ The construction ═════════════════════════════════════════════════════
   The stage is "Tell Orcheum what you need", and the drawing is the moment a
   loose thought becomes a recognisable intent. So the dark fragments are
   struck first, scattered rather than in reading order, and the composition
   is already legible as a ring of marks before the warm centre exists at all:

     220ms    the first fragment's contour is struck
     ~350ms   two more are already in flight behind it
     ~1010ms  the tenth and last fragment begins
     ~1030ms  the centre begins, on the slowest curve in the section — it
              comes up UNDER a form that is by then complete
     ~1560ms  the last fragment's fill has closed
     ~2280ms  the orange resolves, and the drawing is finished

   Chaotic fragments gathering into intent, and the intent arriving last.  */

.lh-js .lh-step__mark.is-in .direct-art .direct__core {
  animation-name: mark-construct, direct-core-breathe;
  animation-duration: var(--dur), 19s;
  animation-delay: calc(var(--direct-in-lead) + var(--o) * var(--direct-u)), 3200ms;
  animation-iteration-count: 1, infinite;
  animation-timing-function: var(--mark-draw), ease-in-out;
  animation-fill-mode: both, none;
}

/* The four paths of the warm centre are drawn as one form, slowest of all.
   The orange face is the last thing in the mark to exist. */
.direct-art #direct-p004 { --o: 6.0; --dur: 1150ms }
.direct-art #direct-p000 { --o: 6.6; --dur: 1200ms }
.direct-art #direct-p012 { --o: 7.1; --dur:  900ms }
.direct-art #direct-p013 { --o: 7.4; --dur:  850ms }

/* ══ The live state ═══════════════════════════════════════════════════════
   Every cycle begins and ends at the drawn position, so a fragment can take
   up its drift at any moment without a jump and the entrance's filled end
   state meets the drift's 0% exactly.

   The amplitudes are the smallest thing in this stylesheet: at most 0.3 units
   of travel and 1.2° of turn on a 78-unit drawing, which at the rendered size
   is a third of a pixel. Periods are 17/19/21/23/26/29/31/34/37/41 seconds
   against three different waveforms whose peaks sit at unequal fractions of
   the cycle, so no two fragments are ever doing the same thing and the set
   does not return to an arrangement it has held. What that buys is a drawing
   that is not a photograph — noticeable only if you watch it, and never while
   you are reading the sentence beside it.

   f2 and f6 — the two fragments standing on the clip boundary — turn but do
   not travel. See the clip note above.                                     */

@keyframes direct-frag-drift-a {
  0%   { transform: translate(0, 0) rotate(0deg) }
  24%  { transform: translate(var(--dx), var(--dy)) rotate(var(--da)) }
  47%  { transform: translate(0, 0) rotate(0deg) }
  71%  { transform: translate(calc(var(--dx) * -0.62), calc(var(--dy) * -0.62)) rotate(calc(var(--da) * -0.62)) }
  100% { transform: translate(0, 0) rotate(0deg) }
}
@keyframes direct-frag-drift-b {
  0%   { transform: translate(0, 0) rotate(0deg) }
  31%  { transform: translate(var(--dx), var(--dy)) rotate(var(--da)) }
  58%  { transform: translate(0, 0) rotate(0deg) }
  82%  { transform: translate(calc(var(--dx) * -0.55), calc(var(--dy) * -0.55)) rotate(calc(var(--da) * -0.55)) }
  100% { transform: translate(0, 0) rotate(0deg) }
}
@keyframes direct-frag-drift-c {
  0%   { transform: translate(0, 0) rotate(0deg) }
  19%  { transform: translate(var(--dx), var(--dy)) rotate(var(--da)) }
  44%  { transform: translate(0, 0) rotate(0deg) }
  74%  { transform: translate(calc(var(--dx) * -0.7), calc(var(--dy) * -0.7)) rotate(calc(var(--da) * -0.7)) }
  100% { transform: translate(0, 0) rotate(0deg) }
}

/* The centre, breathing. 0.7% over nineteen seconds — enough that it is not
   pasted onto a living drawing, far too little to read as movement. It is the
   anchor, and everything else is measured against its stillness. */
@keyframes direct-core-breathe {
  0%   { transform: scale(1) }
  41%  { transform: scale(1.007) }
  100% { transform: scale(1) }
}

.lh-js .lh-step__mark.is-in .direct-art .direct__frag {
  animation-duration: var(--dur), var(--per);
  animation-delay: calc(var(--direct-in-lead) + var(--o) * var(--direct-u)), var(--amb);
  animation-iteration-count: 1, infinite;
  animation-timing-function: var(--mark-draw), ease-in-out;
  animation-fill-mode: both, none;
}

/* --o/--dur      where the fragment falls in the construction, and how long
                  its own contour takes to draw. The order is deliberately not
                  the drawing's reading order and the intervals are uneven —
                  three or four contours are in flight at any moment
   --per/--amb    the live cycle's period, and when it may start: every one of
                  these is past 2.28s, so no fragment is still being drawn
                  when it begins to drift
   --dx/--dy/--da live amplitudes, unchanged from the approved resting state */
.lh-js .lh-step__mark.is-in .direct-art .direct-f1 {
  --o: 0.0; --dur: 720ms; --per: 29s; --amb: 3300ms;
  --dx: 0px; --dy: 0px; --da: 0.8deg;
  animation-name: mark-construct, direct-frag-drift-c;
}
.lh-js .lh-step__mark.is-in .direct-art .direct-f2 {
  --o: 0.8; --dur: 680ms; --per: 31s; --amb: 3600ms;
  --dx: 0px; --dy: 0px; --da: -1.1deg;
  animation-name: mark-construct, direct-frag-drift-a;
}
.lh-js .lh-step__mark.is-in .direct-art .direct-f3 {
  --o: 2.1; --dur: 660ms; --per: 37s; --amb: 4000ms;
  --dx: 0.15px; --dy: 0.20px; --da: -1deg;
  animation-name: mark-construct, direct-frag-drift-b;
}
.lh-js .lh-step__mark.is-in .direct-art .direct-f4 {
  --o: 4.3; --dur: 720ms; --per: 23s; --amb: 3050ms;
  --dx: 0.22px; --dy: -0.10px; --da: 0.9deg;
  animation-name: mark-construct, direct-frag-drift-b;
}
.lh-js .lh-step__mark.is-in .direct-art .direct-f5 {
  --o: 1.5; --dur: 700ms; --per: 41s; --amb: 2900ms;
  --dx: 0.14px; --dy: 0.18px; --da: 1.2deg;
  animation-name: mark-construct, direct-frag-drift-c;
}
.lh-js .lh-step__mark.is-in .direct-art .direct-f6 {
  --o: 3.2; --dur: 700ms; --per: 19s; --amb: 2950ms;
  --dx: 0px; --dy: 0px; --da: 0.7deg;
  animation-name: mark-construct, direct-frag-drift-c;
}
.lh-js .lh-step__mark.is-in .direct-art .direct-f7 {
  --o: 3.8; --dur: 680ms; --per: 26s; --amb: 4300ms;
  --dx: -0.20px; --dy: -0.16px; --da: -0.6deg;
  animation-name: mark-construct, direct-frag-drift-a;
}
.lh-js .lh-step__mark.is-in .direct-art .direct-f8 {
  --o: 4.9; --dur: 660ms; --per: 34s; --amb: 3500ms;
  --dx: 0.24px; --dy: 0.12px; --da: 0.55deg;
  animation-name: mark-construct, direct-frag-drift-b;
}
.lh-js .lh-step__mark.is-in .direct-art .direct-f9 {
  --o: 2.7; --dur: 640ms; --per: 17s; --amb: 4600ms;
  --dx: 0.10px; --dy: -0.22px; --da: -0.9deg;
  animation-name: mark-construct, direct-frag-drift-a;
}
.lh-js .lh-step__mark.is-in .direct-art .direct-f10 {
  --o: 5.4; --dur: 640ms; --per: 21s; --amb: 4900ms;
  --dx: -0.12px; --dy: 0.26px; --da: -1.15deg;
  animation-name: mark-construct, direct-frag-drift-c;
}

/* ══ Reduced motion ═══════════════════════════════════════════════════════
   The answer §9 and §10 both give, for the same reason: not a shorter
   entrance, no entrance. Every path at its drawn position, at full opacity,
   at rest — the composition that was approved, immediately.

   `!important` for the two reasons §10 documents: the rules above carry four
   classes and would otherwise outrank anything written here with a type
   selector, and a running animation beats a normal declaration whatever its
   specificity, so killing `animation` is what actually stops it.          */
@media (prefers-reduced-motion: reduce) {
  .lh-js .direct-art path,
  .lh-js .lh-step__mark.is-in .direct-art path,
  .lh-js .lh-step__mark.is-in .direct-art .direct__core,
  .lh-js .lh-step__mark.is-in .direct-art .direct__frag {
    opacity: 1 !important;
    fill-opacity: 1 !important;
    stroke: none !important;
    stroke-opacity: 0 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   §12 — Orchestrate, Deliver, Iterate — 969:2264 / 969:2293 / 969:2308
   --------------------------------------------------------------------------
   The remaining three stage marks, constructed on §11's terms exactly: each
   path's outline drawn along its own geometry, the fill crossing under the
   ink, the stroke gone by the end. No layout property is read or written and
   every box is already reserved by `.lh-step__mark--*`, so nothing here can
   move a stage or the row. Each path also turns about a measured point in
   view-box units, which is what lets seventeen separate paths behave as one
   group without wrapping them in one — the SVG geometry is untouched and the
   only markup added is a class on eleven paths.

   The row is a row, not a performance. Each mark leads by its own step's
   reveal delay — 290 / 360 / 430ms against Direct's 220 — and each is fully
   constructed between 2.1 and 2.3 seconds, on its own trigger rather than the
   section's. After that the amplitudes drop by an order of magnitude and stay
   there: periods are mutually prime-ish seconds against waveforms whose peaks
   sit at unequal fractions, so no two marks in the row are ever doing the same
   thing at the same time.

   Construction never touches `transform`, and every live cycle begins and ends
   at identity, so the handoff between the two is exact — and every live delay
   below is past the last path of its own mark, so nothing starts drifting
   while it is still being drawn.                                           */

.orch-art { --orch-in-lead: 290ms; --orch-u: 110ms }
.deliv-art { --deliv-in-lead: 360ms; --deliv-u: 170ms }
.iter-art { --iter-in-lead: 430ms; --iter-u: 175ms }

/* ── 02 Orchestrate ───────────────────────────────────────────────────────
   Two hands. `p000` carries the baton itself — one stroke from the tip at
   (66, 1) down to the fingers around (30, 26) — and sixteen more paths draw
   the hand and sleeve beneath it; the five marked `.orch__hand` are the
   second hand, low and right, and they do not overlap the first, so the two
   read as separate limbs and can be given separate pivots.

   This is the one mark that is literally a line drawing, so it gets the most
   of the technique. `p000` is the longest contour in the section — the baton
   from its tip at (66, 1) all the way down through the fingers and into the
   sleeve — and it is struck first, alone, over a slow 1.25s. The second hand's
   own contour (`p001`) starts before the first has finished, so the two limbs
   are being drawn at the same time and the coordination between them is
   established before either is solid. The sleeve follows, then the baton's
   dark shaft, and only then do the interior facets and highlights fill in,
   quickest and last. Nothing rotates or fades into view as a finished hand.

   The construction moves nothing, so the `orch-clip` rect at the viewBox is
   never a problem on the way in. The live state is where the wrist is: the
   baton turns about the fingers at (26, 36), never about the drawing, and its
   turn is single-signed on purpose — +0.5° swings the tip DOWN, into the clip,
   so the one extreme that could ever be cut is the one direction this never
   goes. The second hand answers on a different period and a different sign. */

.orch-art .orch__mark > path:not(.orch__hand) { transform-origin: 26px 36px }
.orch-art .orch__hand { transform-origin: 72px 63px }

/* Structural contours first and slowest, interior detail last and quickest.
   The order is a draughtsman's, not the file's. */
.orch-art #orch-p000 { --o:  0.0; --dur: 1250ms }
.orch-art #orch-p001 { --o:  1.1; --dur: 1150ms }
.orch-art #orch-p003 { --o:  2.0; --dur: 1000ms }
.orch-art #orch-p013 { --o:  2.9; --dur:  850ms }
.orch-art #orch-p007 { --o:  3.5; --dur:  800ms }
.orch-art #orch-p016 { --o:  4.2; --dur:  700ms }
.orch-art #orch-p021 { --o:  4.8; --dur:  650ms }
.orch-art #orch-p002 { --o:  5.3; --dur:  750ms }
.orch-art #orch-p006 { --o:  5.9; --dur:  700ms }
.orch-art #orch-p004 { --o:  6.4; --dur:  750ms }
.orch-art #orch-p011 { --o:  6.9; --dur:  680ms }
.orch-art #orch-p014 { --o:  7.4; --dur:  640ms }
.orch-art #orch-p015 { --o:  7.8; --dur:  660ms }
.orch-art #orch-p019 { --o:  8.2; --dur:  620ms }
.orch-art #orch-p005 { --o:  8.6; --dur:  640ms }
.orch-art #orch-p008 { --o:  9.0; --dur:  600ms }
.orch-art #orch-p009 { --o:  9.4; --dur:  580ms }
.orch-art #orch-p012 { --o:  9.8; --dur:  600ms }
.orch-art #orch-p017 { --o: 10.2; --dur:  560ms }
.orch-art #orch-p010 { --o: 10.6; --dur:  540ms }
.orch-art #orch-p020 { --o: 11.0; --dur:  520ms }
.orch-art #orch-p018 { --o: 11.4; --dur:  560ms }

/* The live state. The baton's turn is single-signed on purpose: +0.5° swings
   the tip DOWN, into the clip, so the one extreme that could ever be cut is
   the one direction this never goes. 0.5° at the tip's radius is half a unit
   on an 87-unit drawing — a sixth of a pixel at the rendered size. The two
   hands run 23s against 31s and peak at 27% against 38%, so they are never
   at rest together and never moving together. */
@keyframes orch-baton-live {
  0%   { transform: rotate(0deg) }
  27%  { transform: rotate(0.5deg) }
  58%  { transform: rotate(0.06deg) }
  79%  { transform: rotate(0.34deg) }
  100% { transform: rotate(0deg) }
}

@keyframes orch-hand-live {
  0%   { transform: rotate(0deg) translate(0, 0) }
  38%  { transform: rotate(-0.38deg) translate(-0.1px, 0.06px) }
  66%  { transform: rotate(0deg) translate(0, 0) }
  86%  { transform: rotate(0.22deg) translate(0.06px, -0.04px) }
  100% { transform: rotate(0deg) translate(0, 0) }
}

.lh-js .lh-step__mark.is-in .orch-art .orch__mark > path:not(.orch__hand) {
  animation-name: mark-construct, orch-baton-live;
  animation-duration: var(--dur), 23s;
  animation-delay: calc(var(--orch-in-lead) + var(--o) * var(--orch-u)), 2900ms;
  animation-iteration-count: 1, infinite;
  animation-timing-function: var(--mark-draw), ease-in-out;
  animation-fill-mode: both, none;
}

.lh-js .lh-step__mark.is-in .orch-art .orch__mark > path.orch__hand {
  animation-name: mark-construct, orch-hand-live;
  animation-duration: var(--dur), 31s;
  animation-delay: calc(var(--orch-in-lead) + var(--o) * var(--orch-u)), 3400ms;
  animation-iteration-count: 1, infinite;
  animation-timing-function: var(--mark-draw), ease-in-out;
  animation-fill-mode: both, none;
}

/* ── 03 Deliver ───────────────────────────────────────────────────────────
   Three layers resolving into one artifact. `.deliv__rear` is the sheet
   behind — its light face, its dark edge and its right column; `.deliv__fold`
   is the corner where the two sheets meet, and it is the last thing to
   resolve; everything else is the front sheet and the outline that binds the
   two, which arrives first and holds still.

   The artifact is built from its outlines. `p000` is the binding contour —
   it draws both sheets' edges as one continuous line — and it is struck
   first, over the slowest 1.5s in the section, so for the first second the
   mark is literally an empty outline of a document. The front sheet's face
   closes under it, then the rear sheet's dark edge, its light face and its
   right column, and the fold resolves last of all: the top strip, the crease,
   then the corner triangle where the two sheets meet.

   A result being assembled, not two finished sheets sliding together. This
   mark has no clip rect, so nothing here can be cut.

   Almost static afterwards, as the stage is: one settling on each layer,
   19 / 27 / 34 seconds apart, none of them more than a fifth of a unit. They
   are held that small because the binding contour draws part of the rear
   sheet's edge, and anything larger would open a seam between the two.     */

.deliv-art .deliv__mark > path { transform-origin: 31.5px 34.5px }

.deliv-art #deliv-p000 { --o: 0.0; --dur: 1500ms }
.deliv-art #deliv-p002 { --o: 1.2; --dur: 1150ms }
.deliv-art #deliv-p003 { --o: 2.2; --dur: 1050ms }
.deliv-art #deliv-p001 { --o: 3.0; --dur:  900ms }
.deliv-art #deliv-p006 { --o: 3.7; --dur:  850ms }
.deliv-art #deliv-p005 { --o: 4.6; --dur:  750ms }
.deliv-art #deliv-p004 { --o: 5.3; --dur:  800ms }
.deliv-art #deliv-p007 { --o: 6.1; --dur:  900ms }

@keyframes deliv-front-settle {
  0%   { transform: translate(0, 0) }
  33%  { transform: translate(0, 0.09px) }
  100% { transform: translate(0, 0) }
}

@keyframes deliv-rear-settle {
  0%   { transform: translate(0, 0) }
  26%  { transform: translate(0.2px, -0.13px) }
  61%  { transform: translate(0, 0) }
  83%  { transform: translate(-0.09px, 0.05px) }
  100% { transform: translate(0, 0) }
}

@keyframes deliv-fold-settle {
  0%   { transform: translate(0, 0) }
  44%  { transform: translate(0.14px, 0.08px) }
  100% { transform: translate(0, 0) }
}

.lh-js .lh-step__mark.is-in .deliv-art .deliv__mark > path {
  animation-name: mark-construct, deliv-front-settle;
  animation-duration: var(--dur), 19s;
  animation-delay: calc(var(--deliv-in-lead) + var(--o) * var(--deliv-u)), var(--amb, 3100ms);
  animation-iteration-count: 1, infinite;
  animation-timing-function: var(--mark-draw), ease-in-out;
  animation-fill-mode: both, none;
}

.lh-js .lh-step__mark.is-in .deliv-art .deliv__mark > path.deliv__rear {
  --amb: 3600ms;
  animation-name: mark-construct, deliv-rear-settle;
  animation-duration: var(--dur), 27s;
}

.lh-js .lh-step__mark.is-in .deliv-art .deliv__mark > path.deliv__fold {
  --amb: 4100ms;
  animation-name: mark-construct, deliv-fold-settle;
  animation-duration: var(--dur), 34s;
}

/* ── 04 Iterate ───────────────────────────────────────────────────────────
   Eight marks, tall to short, left to right. They are the only sequence in
   the row, and the one thing they must not become is a bar chart, so nothing
   here grows off a baseline. Each mark is DRAWN: the dash runs down one edge,
   across the foot and back up the other, which is a pen making a stroke, not
   a value rising. The tallest marks take the longest because they are the
   longest, and that alone gives the row its rhythm.

   The stagger is uneven — 0, 1.1, 2.0, 3.2, 4.2, 5.4, 6.5, 7.6 — and so are
   the durations, because a constant interval is a metronome and a metronome
   is the equaliser reading. Marks overlap heavily: the third is still being
   drawn when the sixth begins. The last one closes at about 2.28s, and the
   sequence reads as continued refinement rather than a countdown.

   Afterwards, one travelling emphasis: a shallow dip in opacity, 1 → 0.9 → 1,
   spent in the first fifth of a 37-second cycle and offset a little further
   along the row for each mark, so a faint pass crosses the drawing in about
   four seconds and then nothing happens for half a minute. No transform, so
   nothing about the live state can read as a bar changing height.

   The marks are addressed by position because that is what they are: an
   ordered sequence inside one locked group, with no roles to name. The
   transform origins are kept for the live state; `iter-clip` is the viewBox
   and the tallest mark already touches y=0, so nothing here ever scales up. */

.iter-art .iter__mark path:nth-child(1) { transform-origin:   1.46px 62px; --o: 0.0; --dur: 1000ms; --amb: 3200ms }
.iter-art .iter__mark path:nth-child(2) { transform-origin:  16.78px 62px; --o: 1.1; --dur: 1100ms; --amb: 3750ms }
.iter-art .iter__mark path:nth-child(3) { transform-origin:  31.80px 62px; --o: 2.0; --dur: 1250ms; --amb: 4200ms }
.iter-art .iter__mark path:nth-child(4) { transform-origin:  46.80px 62px; --o: 3.2; --dur: 1100ms; --amb: 4800ms }
.iter-art .iter__mark path:nth-child(5) { transform-origin:  61.39px 62px; --o: 4.2; --dur:  950ms; --amb: 5250ms }
.iter-art .iter__mark path:nth-child(6) { transform-origin:  76.43px 62px; --o: 5.4; --dur:  800ms; --amb: 5850ms }
.iter-art .iter__mark path:nth-child(7) { transform-origin:  91.02px 62px; --o: 6.5; --dur:  650ms; --amb: 6300ms }
.iter-art .iter__mark path:nth-child(8) { transform-origin: 105.62px 62px; --o: 7.6; --dur:  520ms; --amb: 6900ms }

@keyframes iter-pass {
  0%   { opacity: 1 }
  9%   { opacity: 0.9 }
  20%  { opacity: 1 }
  100% { opacity: 1 }
}

.lh-js .lh-step__mark.is-in .iter-art .iter__mark path {
  animation-name: mark-construct, iter-pass;
  animation-duration: var(--dur), 37s;
  animation-delay: calc(var(--iter-in-lead) + var(--o) * var(--iter-u)), var(--amb);
  animation-iteration-count: 1, infinite;
  animation-timing-function: var(--mark-draw), ease-in-out;
  animation-fill-mode: both, none;
}

/* ══ Reduced motion ═══════════════════════════════════════════════════════
   §11's answer, for the same reasons: no entrance rather than a short one,
   and `!important` because a running animation outranks a normal declaration
   whatever the specificity. Every path drawn, at rest, immediately.       */
@media (prefers-reduced-motion: reduce) {
  .lh-js .orch-art path,
  .lh-js .deliv-art path,
  .lh-js .iter-art path,
  .lh-js .lh-step__mark.is-in .orch-art path,
  .lh-js .lh-step__mark.is-in .deliv-art path,
  .lh-js .lh-step__mark.is-in .iter-art path,
  .lh-js .lh-step__mark.is-in .orch-art .orch__mark > path.orch__hand,
  .lh-js .lh-step__mark.is-in .deliv-art .deliv__mark > path.deliv__rear,
  .lh-js .lh-step__mark.is-in .deliv-art .deliv__mark > path.deliv__fold {
    opacity: 1 !important;
    fill-opacity: 1 !important;
    stroke: none !important;
    stroke-opacity: 0 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   §13 — Turn chaos into a system — 972:3537
   --------------------------------------------------------------------------
   The closing drawing: a tangled mass on the left, a human head, a thread of
   marks running through it, and an orange globe at the far right.

   THIS ONE IS NOT DRAWN INTO EXISTENCE. It is already there — complete, at
   full weight, from the first frame it is painted. §11 and §12 construct
   their marks because those marks are small and a reader meets them once;
   this drawing is 488 × 235, it is the last thing on the page, and it does
   not want an entrance. It wants to be ALIVE. Nothing below touches the fill,
   stroke or opacity of the artwork; everything below is motion, it never
   stops, and every cycle passes through rest, so there is no start to see and
   no seam to catch.

   Four movements, and they are one system:

     THE TANGLE turns. A full revolution in ninety seconds about its own
     middle, unevenly — its keyframes are not ninety degrees apart, so it
     gains and loses a little as it goes and never reads as a wheel. Sixty of
     its paths also turn about their own centres on 23 / 29 / 37 second
     cycles, which is what keeps it a churning tangle rather than a rigid
     shape being rotated.

     THE THREAD flows. The marks through the head share one wave and take
     their phase from `--bx`, their own position: the leftmost runs a full
     cycle ahead of the rightmost, so the movement travels along the thread
     from the tangle toward the temple instead of pulsing everywhere at once.
     Under a unit of lift, with a little brightness travelling in it.

     THE HEAD nods. One dip, a smaller second, and a slight raise across
     twelve seconds — and the turn is about the ORANGE GLOBE at (462, 90), not
     about the head. That is the whole trick of it. The head sits two hundred
     units from that point and the perpendicular there is almost exactly
     vertical, so the rotation reads as a nod; and the far end of the same
     contour, which carries the line out to the globe, sits AT the point and
     does not move at all. No seam can open where the line meets the globe,
     because the line's end is the pivot. `.chaos__signal` takes the identical
     turn, so the thread nods inside the head it lives in.

     Direction is not free: the neck bleeds off the bottom of the frame, so
     the nod is nearly all negative — down, where the frame takes it — and the
     raise is held to a tenth of a degree, half a pixel, well under what would
     lift the neck off the edge.

     THE GLOBE beats. Two thumps and a rest, every four and a bit seconds:
     2.2%, back, 1.4%, and down. On a fifty-unit ring the first thump is half
     a pixel, which is a heartbeat and not a pulse animation. It scales about
     its own centre so it grows into the ring rather than off toward the
     frame.

   ── Cost ──
   Transform only, and on `rotate`, `translate` and `scale` — the independent
   properties, so a group can turn while its paths turn inside it without
   either overwriting the other. No filter, no blur, no rAF, no library, no
   layout property read or written after one measuring pass. Three groups and
   about sixty of the tangle's three hundred and twenty-seven paths carry all
   of it.                                                                   */

.chaos-art path { transform-box: view-box }

.chaos-art .chaos__noise {
  transform-box: view-box;
  /* The tangle's own middle. */
  transform-origin: 85px 88px;
}
.chaos-art .chaos__mind,
.chaos-art .chaos__signal {
  transform-box: view-box;
  /* The globe. See above — this is what makes a nod a nod. */
  transform-origin: 462px 90px;
}
.chaos-art .chaos__resolve {
  transform-box: view-box;
  transform-origin: 462.5px 91.5px;
}

/* ── The tangle ═══════════════════════════════════════════════════════════ */
@keyframes chaos-turn {
  0%   { rotate: 0deg }
  27%  { rotate: 84deg }
  51%  { rotate: 187deg }
  74%  { rotate: 263deg }
  100% { rotate: 360deg }
}

.lh-js .chaos-art.is-in .chaos__noise {
  animation: chaos-turn 90s linear infinite;
}

/* Inside it, three sets of about twenty paths turning about their own
   middles. Amplitude and phase both come from `--j`, so no two are alike and
   the set never returns to an arrangement it has held — there is no cycle
   here to catch, only a tangle that will not settle. */
@keyframes chaos-churn-a {
  0%   { transform: rotate(0deg) translate(0, 0) }
  27%  { transform: rotate(var(--amp)) translate(var(--dx), var(--dy)) }
  55%  { transform: rotate(0deg) translate(0, 0) }
  78%  { transform: rotate(calc(var(--amp) * -0.6)) translate(calc(var(--dx) * -0.5), calc(var(--dy) * -0.5)) }
  100% { transform: rotate(0deg) translate(0, 0) }
}
@keyframes chaos-churn-b {
  0%   { transform: rotate(0deg) translate(0, 0) }
  34%  { transform: rotate(calc(var(--amp) * -0.9)) translate(calc(var(--dy) * 0.9), calc(var(--dx) * -0.8)) }
  66%  { transform: rotate(0deg) translate(0, 0) }
  87%  { transform: rotate(calc(var(--amp) * 0.5)) translate(calc(var(--dy) * -0.4), calc(var(--dx) * 0.4)) }
  100% { transform: rotate(0deg) translate(0, 0) }
}
@keyframes chaos-churn-c {
  0%   { transform: rotate(0deg) translate(0, 0) }
  19%  { transform: rotate(calc(var(--amp) * 0.7)) translate(calc(var(--dx) * -0.7), var(--dy)) }
  48%  { transform: rotate(calc(var(--amp) * -0.35)) translate(0, 0) }
  73%  { transform: rotate(calc(var(--amp) * -0.95)) translate(var(--dx), calc(var(--dy) * -0.6)) }
  100% { transform: rotate(0deg) translate(0, 0) }
}

.lh-js .chaos-art.is-in .chaos__noise path:nth-child(13n + 2),
.lh-js .chaos-art.is-in .chaos__noise path:nth-child(17n + 7),
.lh-js .chaos-art.is-in .chaos__noise path:nth-child(19n + 13) {
  --amp: calc((0.7 + var(--j, 0.5) * 1.4) * 1deg);
  --dx: calc((var(--j, 0.5) - 0.5) * 0.9px);
  --dy: calc((0.5 - var(--j, 0.5)) * 0.75px);
  transform-origin: var(--cx) var(--cy);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  /* Negative, so every path is already mid-cycle on the first frame. */
  animation-delay: calc(var(--j, 0.5) * -34s);
}
.lh-js .chaos-art.is-in .chaos__noise path:nth-child(13n + 2) {
  animation-name: chaos-churn-a;
  animation-duration: 23s;
}
.lh-js .chaos-art.is-in .chaos__noise path:nth-child(17n + 7) {
  animation-name: chaos-churn-b;
  animation-duration: 29s;
}
.lh-js .chaos-art.is-in .chaos__noise path:nth-child(19n + 13) {
  animation-name: chaos-churn-c;
  animation-duration: 37s;
}

/* Four of the tangle's paths are not tangle. They are the strand that leaves
   it at x=122 and runs to the head at 169, and if they turn with everything
   else the drawing comes apart: the tangle drifts off on its own and the
   thread through the head starts from nothing.

   So they are given the turn back. Same ninety seconds, same four uneven
   keyframes, opposite sign, about the same point — a child's `rotate`
   composes with its group's, so these four cancel to nothing and stay exactly
   where they are drawn while the mass revolves behind them. Which is the
   picture: one thread has been pulled out of the noise and it holds. */
@keyframes chaos-anchor {
  0%   { rotate: 0deg }
  27%  { rotate: -84deg }
  51%  { rotate: -187deg }
  74%  { rotate: -263deg }
  100% { rotate: -360deg }
}

.lh-js .chaos-art.is-in .chaos__noise #chaos-p066,
.lh-js .chaos-art.is-in .chaos__noise #chaos-p089,
.lh-js .chaos-art.is-in .chaos__noise #chaos-p233,
.lh-js .chaos-art.is-in .chaos__noise #chaos-p272 {
  transform-origin: 85px 88px;
  animation: chaos-anchor 90s linear infinite;
}

/* ── The head ═════════════════════════════════════════════════════════════ */
@keyframes head-nod {
  0%   { rotate: 0deg }
  11%  { rotate: -0.78deg }
  24%  { rotate: -0.34deg }
  38%  { rotate: -0.54deg }
  55%  { rotate: -0.06deg }
  68%  { rotate: 0.1deg }
  84%  { rotate: -0.18deg }
  100% { rotate: 0deg }
}

.lh-js .chaos-art.is-in .chaos__mind,
.lh-js .chaos-art.is-in .chaos__signal {
  animation: head-nod 12s ease-in-out infinite;
}

/* ── The thread ═══════════════════════════════════════════════════════════
   One wave, and every mark on it. The negative delay is the whole mechanism:
   a mark's phase is its own position, so the crest leaves the tangle and
   arrives at the temple three seconds later rather than the thread blinking
   as one. */
@keyframes thread-flow {
  0%   { translate: 0 0;      opacity: 1 }
  25%  { translate: 0 -0.8px; opacity: 0.72 }
  50%  { translate: 0 0;      opacity: 1 }
  75%  { translate: 0 0.55px; opacity: 0.88 }
  100% { translate: 0 0;      opacity: 1 }
}

.lh-js .chaos-art.is-in .chaos__signal path {
  animation: thread-flow 4.4s ease-in-out infinite;
  animation-delay: calc((var(--bx, 0.5) - 0.33) * -13s);
}

/* ── The globe ════════════════════════════════════════════════════════════
   Two thumps and a rest. The rest is most of it, which is what makes it calm
   and what makes it a heart. */
@keyframes globe-beat {
  0%   { scale: 1 }
  7%   { scale: 1.022 }
  15%  { scale: 1.005 }
  23%  { scale: 1.014 }
  40%  { scale: 1 }
  100% { scale: 1 }
}

.lh-js .chaos-art.is-in .chaos__resolve {
  animation: globe-beat 4.3s cubic-bezier(0.32, 0, 0.3, 1) infinite;
}

/* ── Narrow ──
   Every amplitude above is in viewBox units and scales with the drawing, so
   the only one worth taking down is the nod: the same three units of dip is a
   proportionally larger gesture on a 340-wide drawing than on a 488-wide one,
   and it has to read the same at both. */
@media (max-width: 560px) {
  @keyframes head-nod {
    0%   { rotate: 0deg }
    11%  { rotate: -0.5deg }
    24%  { rotate: -0.22deg }
    38%  { rotate: -0.35deg }
    55%  { rotate: -0.04deg }
    68%  { rotate: 0.07deg }
    84%  { rotate: -0.12deg }
    100% { rotate: 0deg }
  }
}

/* ── Reduced motion ═══════════════════════════════════════════════════════
   Nothing turns, nothing flows, nothing nods and nothing beats. There is no
   entrance to skip and no state to restore — the drawing is already the
   finished drawing, so this only has to stop it moving. */
@media (prefers-reduced-motion: reduce) {
  .lh-js .chaos-art .chaos__noise,
  .lh-js .chaos-art .chaos__noise path,
  .lh-js .chaos-art .chaos__mind,
  .lh-js .chaos-art .chaos__signal,
  .lh-js .chaos-art .chaos__signal path,
  .lh-js .chaos-art .chaos__resolve {
    rotate: none !important;
    translate: none !important;
    scale: none !important;
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
  }
}