@charset "utf-8";
/* ============================================================================
   page-home-services.css
   Page-scoped styles for /home-services.html
   Loaded only on this page. Colour, space, radius, type and easing come from
   the design-system custom properties in core.css — no raw colour values here
   except the two local aliases defined immediately below, which resolve to
   brand tokens.
   ==========================================================================*/

/* ---------------------------------------------------------------------------
   0. Local band-aware aliases
   Amber and green are legible as text on dark bands but not on light ones, so
   the "attention" ink resolves to --ink on light bands and the amber marker is
   carried by rules, dots and plates instead.
   ------------------------------------------------------------------------ */
.band {
  /* Decorative amber (rules, dots, halos, plate fills) never darkens — it is the
     demand accent and must actually read as amber on paper. */
  --hs-attn: var(--amber-bright);
  /* --rf-amber resolves to #8A5D05 on light bands and #E7A63A on dark ones, so
     the "human attention" ink is legible on either without a hardcoded value. */
  --hs-attn-ink: var(--rf-amber);
  --hs-pos: var(--ok);
  --hs-pos-ink: color-mix(in srgb, var(--ok) 74%, #000);
  --hs-plate: var(--bg-card);
  --hs-plate-2: var(--bg-card-2);
}
.band--dark,
.band--void {
  --hs-attn-ink: var(--amber);
  --hs-pos-ink: var(--ok-hi);
}

/* A .panel is a DARK island even inside a light band, so the page's own inks
   have to be restated for it — otherwise the light-band amber (#8A5D05) and the
   darkened "ok" green land on a near-black surface and fail contrast. */
.band--light .panel {
  --hs-attn: var(--amber-bright);
  --hs-attn-ink: var(--amber-soft);
  --hs-pos-ink: var(--ok-hi);
}
/* core.css aliases --d-muted to the light muted inside a light band, which the
   panel chrome then inherits onto its dark bar. The panel already restates
   --muted for its own contents; use that. */
.band--light .panel__bar {
  color: var(--muted);
}

/* ===========================================================================
   1. HERO — .hs-hero
   Two columns on desktop: copy left, routing diagram right.
   ======================================================================== */
.hs-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hs-hero__inner {
  display: grid;
  /* The figure column carries a 600-unit drawing; giving it the wider share
     renders that drawing at or above its authored scale, which is what keeps
     its mono labels above the legibility floor on a 13" screen. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.07fr);
  align-items: center;
  gap: var(--s-12) var(--s-12);
}

.hs-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);
  min-width: 0;
}

.hs-hero__title {
  margin: 0;
  max-width: 19ch;
  text-wrap: balance;
  letter-spacing: -0.02em;
}

/* Two deliberate lines: the problem, then the outcome in accent. Left to wrap
   on its own the second line orphans a single word. */
.hs-hero__accent {
  color: var(--accent);
  display: block;
}

.hs-hero__lead {
  margin: 0;
  max-width: 48ch;
  color: var(--body);
  /* the narrow column used to drop "a person." onto a line of its own */
  text-wrap: pretty;
}

.hs-hero__cta {
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--s-2);
}

/* "Mapping call" is our vocabulary, not the reader's. It gets decoded in plain
   words at the point of first use, immediately under the button that uses it. */
.hs-hero__decode {
  margin: 0;
  max-width: 46ch;
  padding-left: var(--s-4);
  border-left: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--body);
  text-wrap: pretty;
}
.hs-hero__decode b {
  font-weight: 600;
  color: var(--ink);
}

.hs-hero__fine {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Hero figure -------------------------------------------------------------*/
.hs-hero__figure {
  margin: 0;
  min-width: 0;
}

.hs-figure {
  position: relative;
  background: var(--paper-card, #fff);
}

/* Scroll shell for the routing figure. Inert until the phone breakpoint asks
   the SVG to hold its designed width. */
.hs-hero__scroll {
  position: relative;
  min-width: 0;
}
.hs-hero__scroll::after {
  background: linear-gradient(90deg, transparent, var(--paper-card, #fff));
}

.hs-route {
  position: relative;
  z-index: 1;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: auto;
  color: var(--muted);
  overflow: visible;
}

/* Column rule across the top of the figure — teaches the three phases. */
.hs-rule {
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 2 5;
  fill: none;
}

/* soft plate behind the convergence node */
.hs-route__ring {
  fill: color-mix(in srgb, var(--blue) 6%, transparent);
}
.hs-route__ring2 {
  stroke-opacity: 0.22;
}

.hs-route__check {
  fill: none;
  stroke: #fff;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The exception path keeps its dash and marches slowly, so "this one left the
   automation" reads even in a still frame. */
.hs-route__human-path {
  animation: hs-march 2.6s linear infinite;
}

@keyframes hs-march {
  to { stroke-dashoffset: -16; }
}

/* the amber "a person decides" halo — the single focal point of the figure */
.hs-route__halo {
  fill: none;
  stroke: var(--hs-attn);
  stroke-width: 1.5;
  stroke-opacity: 0.55;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: hs-halo 3.6s var(--e-inout) infinite;
}

@keyframes hs-halo {
  0%, 100% { scale: 1;     opacity: 0.85; }
  50%      { scale: 1.055; opacity: 0.15; }
}

/* Channel packets. The circles are authored at the origin with no cx/cy —
   they are positioned entirely by offset-path along the three inbound
   channels, so they are hidden where offset-path is unsupported. */
.hs-route__packets {
  color: var(--accent);
  pointer-events: none;
}

.hspk { display: none; fill: var(--rf-ch-2); }

@supports (offset-path: path("M0 0 L1 1")) {
  .hspk {
    display: inline;
    offset-rotate: 0deg;
    opacity: 0;
    animation: hs-packet 4.2s linear infinite;
  }
  /* These three paths must stay character-for-character identical to the
     [d] of the three .dg-channel strokes in the markup — the packet rides the
     channel, so if one moves the other moves with it. */
  .hspk--1 {
    offset-path: path("M216 69 C 264 69, 258 172, 301 187");
    animation-delay: 0s;
  }
  .hspk--2 {
    offset-path: path("M216 196 C 252 196, 262 190, 301 190");
    animation-delay: 1.4s;
  }
  .hspk--3 {
    offset-path: path("M216 323 C 264 323, 258 208, 301 193");
    animation-delay: 2.8s;
  }
}

@keyframes hs-packet {
  0%   { offset-distance: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  62%  { opacity: 1; }
  72%  { offset-distance: 100%; opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}

.hs-hero__caption {
  margin: 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
  inline-size: 100%;
  max-inline-size: 620px;
  text-align: center;
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--muted);
  text-wrap: balance;
}

/* ===========================================================================
   1b. WHO THIS IS FOR — two labelled lanes + the day-board scene
   The two audiences (dispatch and appointments) are given equal weight: one
   card each, each led by its own expensive moment, each closed by its own
   human boundary. The chips do the naming so the prose does not have to.
   ======================================================================== */
.hs-fitgrid {
  align-items: stretch;
  margin-top: var(--s-10);
}

.hs-fitcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
  overflow: hidden;
  background: var(--paper-card, var(--bg-card));
  --hs-lane: var(--accent);
  transition:
    transform var(--d-3) var(--e-out),
    box-shadow var(--d-3) var(--e-out),
    border-color var(--d-3) var(--e-out);
}

.band--dark .hs-fitcard,
.band--void .hs-fitcard {
  background: var(--bg-card);
}

.hs-fitcard::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  background: var(--hs-lane);
  opacity: 0.65;
}

.hs-fitcard--appts { --hs-lane: var(--rf-ch-2); }

.hs-fitcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: color-mix(in srgb, var(--hs-lane) 45%, var(--line));
}
.hs-fitcard:hover::before { opacity: 1; }

.hs-fitcard__k {
  margin: 0;
  color: var(--hs-lane);
}

/* The expensive moment, at display scale — this is what the reader recognises. */
.hs-fitcard__moment {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-title-1);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}

.hs-fitcard__line {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--body);
}

/* Naming more business types means more chips, never more paragraphs. */
.hs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-2) 0 0;
  padding: 0;
  list-style: none;
}

.hs-fitchip {
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-card-2);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--body);
  white-space: nowrap;
}

.hs-fitcard__bound {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
  margin: auto 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--body);
  min-width: 0;
}

.hs-fitcard__bound > span {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--hs-attn-ink);
}

.hs-fitcard__bound > span::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  flex: none;
  background: var(--hs-attn);
}

/* The day board -----------------------------------------------------------*/
/* One scene, not a diagram: a working day seen from above, with both lanes on
   it. Capped in width so it stays a board and not a billboard. */
/* A tinted plate, not a white sheet: at a glance the board has to register as
   one object with a lit surface, which is what stops it reading as grey noise. */
.hs-day-fig {
  margin-block: var(--s-14) 0;
  max-inline-size: 960px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--blue) 5%, var(--paper-card, #fff)) 0%,
      var(--paper-card, #fff) 58%);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-lift);
}
.hs-day-fig .dg-plate {
  stroke-width: 2;
}

/* core.css centres a figure's SVG and caps it at 680px so small diagrams cannot
   balloon. This one is a scene, not a diagram — a board that has to be read like
   a schedule — so it is allowed a wider plate. Both overrides are specificity
   bumps on the same properties, not new behaviour. */
.hs-fit .hs-day-fig {
  margin-inline: auto;
}
.hs-fit .hs-day-fig .figure__scroll .hs-day {
  max-inline-size: 880px;
  margin-inline: auto;
}

.hs-day__scroll {
  position: relative;
  min-width: 0;
}
.hs-day__scroll::after {
  background: linear-gradient(90deg, transparent, var(--paper-card, #fff));
}

.hs-day {
  position: relative;
  z-index: 1;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: auto;
  color: var(--muted);
  overflow: visible;
}

/* Close of business — the reason 7:12 PM costs money. Deep enough to read as a
   field of its own rather than a wash, and run the full width of the board. */
.hs-day__night {
  fill: color-mix(in srgb, var(--blue) 11%, transparent);
}
.hs-day__nightline {
  fill: none;
  stroke: var(--rf-ch-1);
  stroke-width: 2;
  stroke-dasharray: 6 5;
  opacity: 0.75;
}
.hs-day__grid path {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.25;
  stroke-dasharray: 2 6;
}
.hs-day__rule {
  fill: none;
  stroke: var(--rf-ch-1);
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 1;
}

/* The empty slot: present, dashed, and worth money. */
.hs-day__gapbox {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 2.5;
  stroke-dasharray: 6 5;
}
/* The one word the empty slot carries. It was a ghost stamp before — set at
   plate-label weight and pulled a full label-width clear of the card edge. */
.hs-day__gaptext {
  fill: var(--ink);
  fill-opacity: 0.78;
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.13em;
}

/* The name of the shaded close-of-business field, set inside the field itself
   so the hour gutter is left holding hours and nothing else. */
.hs-day__nightk {
  fill: var(--rf-label);
  fill-opacity: 1;
  opacity: 1;
  letter-spacing: 0.16em;
}

/* Diagram legibility: both bespoke figures render below their authored scale in
   a two-column layout, which pushed the kit's 10.5px mono labels toward 8px
   optical. The plates were widened in the markup to take the larger type. */
.hs-route .dg-label,
.hs-day .dg-label {
  font-size: 12px;
}
.hs-route .dg-plate-sub,
.hs-day .dg-plate-sub {
  font-size: 11px;
}
.hs-day .dg-plate-label {
  font-size: 15.5px;
}
/* The routing figure is the narrower of the two canvases and its result plates
   sit hard against the right edge of the viewBox, so its plate titles run one
   step smaller — still well clear of the legibility floor. */
.hs-route .dg-plate-label {
  font-size: 14px;
}

/* The single amber focal point of the scene. */
.hs-day__halo {
  fill: none;
  stroke: var(--hs-attn);
  stroke-width: 1.5;
  stroke-opacity: 0.55;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: hs-halo 3.6s var(--e-inout) infinite;
}

/* The cancellation crossfades into the refill just after the waitlist packet
   lands, so the board tells its story without a caption. */
.hs-day__gap    { animation: hs-day-gap 9s var(--e-inout) infinite; }
.hs-day__refill { animation: hs-day-refill 9s var(--e-inout) infinite; }

@keyframes hs-day-gap {
  0%, 30% { opacity: 1; }
  36%, 92% { opacity: 0; }
  98%, 100% { opacity: 1; }
}
@keyframes hs-day-refill {
  0%, 30% { opacity: 0; }
  36%, 92% { opacity: 1; }
  98%, 100% { opacity: 0; }
}

.hs-day__packets { pointer-events: none; }
.hs-daypk { display: none; fill: var(--rf-ch-2); }

@supports (offset-path: path("M0 0 L1 1")) {
  .hs-daypk {
    display: inline;
    offset-rotate: 0deg;
    opacity: 0;
    animation: hs-day-packet 9s linear infinite;
  }
  /* Same contract as the hero packets: these two ride the day board's two
     inbound channels and must match their [d] exactly. */
  .hs-daypk--wait {
    offset-path: path("M690 448 C 690 366, 700 276, 682 246");
    animation-delay: 0.4s;
  }
  .hs-daypk--call {
    offset-path: path("M240 448 C 240 428, 256 410, 300 398");
    animation-delay: 5.2s;
  }
}

@keyframes hs-day-packet {
  0%   { offset-distance: 0%;   opacity: 0; }
  6%   { opacity: 1; }
  24%  { offset-distance: 100%; opacity: 1; }
  30%  { offset-distance: 100%; opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}

.hs-day__cap {
  margin: 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
  inline-size: 100%;
  max-inline-size: 620px;
  margin-inline: auto;
  text-align: center;
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--muted);
  text-wrap: balance;
}

/* ===========================================================================
   2. WHERE IT BREAKS — .hs-breaks / .hs-break
   ======================================================================== */
.hs-breaks {
  align-items: stretch;
}

.hs-break {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
  background: var(--paper-card, var(--bg-card));
  transition:
    transform var(--d-3) var(--e-out),
    box-shadow var(--d-3) var(--e-out),
    border-color var(--d-3) var(--e-out);
}

.band--dark .hs-break,
.band--void .hs-break {
  background: var(--bg-card);
}

.hs-break:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: color-mix(in srgb, var(--blue) 32%, var(--line));
}

/* The glyph plate is now the card's anchor, so the index steps back to its own
   mono scale. Selected by class, not by :first-child — the plate is the first
   child now, and a title-scale font-size and a blue ink applied to it would
   recolour the glyph, which takes its colour from the plate via currentColor. */
.hs-break .card__index {
  color: var(--muted);
  opacity: 1;
}

.hs-break__cost {
  margin: var(--s-1) 0 0;
  padding-top: var(--s-4);
  padding-left: var(--s-4);
  border-top: 1px solid var(--line-soft);
  border-left: 2px solid var(--hs-attn);
  margin-left: calc(var(--s-1) * -0);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--body);
  margin-top: auto;
}

/* ===========================================================================
   3. PULL QUOTE — .hs-quote
   ======================================================================== */
/* The page speaks in one voice: the grotesque for statements, the mono for
   labels. This line used to arrive in an italic serif borrowed from nowhere
   else on the page, so it now uses the display face like every other statement
   and earns its emphasis from scale and the accent rule instead. */
.hs-quote {
  position: relative;
  max-inline-size: 40ch;
  margin: var(--s-16) auto 0;
  padding-top: var(--s-10);
  text-align: center;
  text-wrap: balance;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  font-size: var(--t-title-1);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.hs-quote .serif-accent {
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

.hs-quote::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: 40px;
  block-size: 2px;
  border-radius: var(--r-pill);
  background: var(--accent);
  opacity: 0.7;
}

/* ===========================================================================
   4. THE FLOW — .hs-flow (rail + sticky aside)
   ======================================================================== */
.hs-flow {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--s-12) var(--s-16);
}

.hs-flow__main,
.hs-flow__aside {
  min-width: 0;
}

.hs-sticky {
  position: sticky;
  top: calc(var(--s-20) + var(--s-4));
}

/* Stage rail --------------------------------------------------------------*/
.hs-stages {
  margin: 0;
}

.hs-stage {
  min-width: 0;
  transition:
    opacity var(--d-3) var(--e-out),
    filter var(--d-3) var(--e-out);
}

/* Spec plate inside each stage --------------------------------------------*/
.hs-spec {
  margin: var(--s-3) 0 0;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--hs-plate);
  transition:
    border-color var(--d-3) var(--e-out),
    background-color var(--d-3) var(--e-out),
    box-shadow var(--d-3) var(--e-out);
}

/* What runs on its own — one sentence, the stage's whole story. */
.hs-spec__do {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--body);
  text-wrap: pretty;
}

/* What stays yours — an amber-marked footer line, never a second paragraph. */
.hs-spec__own {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
  margin: var(--s-3) 0 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--body);
  min-width: 0;
}

.hs-spec__own > span {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--hs-attn-ink);
}

.hs-spec__own > span::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  flex: none;
  background: var(--hs-attn);
}

/* Run-player states -------------------------------------------------------*/
/* The dimming stays shallow: every step is real copy and must stay legible
   whatever the player position. */
.hs-stage[data-run-state="future"] {
  opacity: 0.72;
}
.hs-stage[data-run-state="past"] {
  opacity: 0.88;
}
.hs-stage[data-run-state="current"] {
  opacity: 1;
}
.hs-stage[data-run-state="current"] .hs-spec {
  border-color: var(--line-strong);
  background: var(--hs-plate-2);
  box-shadow: var(--shadow-lift);
}
.hs-stage[data-run-state="current"] .rail__title {
  color: var(--ink);
}
.hs-stage[data-run-state="past"] .hs-spec {
  background: transparent;
}

/* Run controls ------------------------------------------------------------*/
.hs-run-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

.hs-run-controls [data-run-position],
.hs-run-controls [data-run-live] {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.hs-run-controls [data-run-position] {
  margin-inline-start: auto;
  font-variant-numeric: tabular-nums;
}

.hs-run-controls [data-run-live] {
  flex-basis: 100%;
  color: var(--body);
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: var(--t-xs);
}

/* The page's one synthetic-data statement -----------------------------------
   A demonstration running on invented data is normal, so this is set as a plain
   fact in muted body type under a hairline — not on the amber caution slab,
   which is reserved for the human-attention moments (the decision gate, the
   exception, the paged owner). It sits directly beneath the first simulated
   record so it cannot be screenshot away from what it describes. */
.hs-synth {
  margin: 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  max-inline-size: 58ch;
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

/* Language card in the aside ---------------------------------------------*/
.hs-lang {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
}
.hs-lang > h3,
.hs-lang > p {
  margin: 0;
}

.hs-lang__chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin: var(--s-2) 0 0;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--bg-card-2);
  color: var(--muted);
  font-size: var(--t-sm);
}

.hs-lang__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.25rem;
  padding: var(--s-1) var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--bg-card-3, var(--bg-card));
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  color: var(--ink);
}

.hs-lang__out {
  display: inline-flex;
  align-items: center;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

/* ===========================================================================
   5. LANE DIPTYCH — routine vs urgent
   ======================================================================== */
.hs-diptych {
  align-items: stretch;
}

.hs-lane {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
  overflow: hidden;
  --hs-lane: var(--accent);
}

.hs-lane::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  background: var(--hs-lane);
  opacity: 0.65;
}

.hs-lane--routine { --hs-lane: var(--accent); }
.hs-lane--urgent  { --hs-lane: var(--hs-attn); }

.hs-lane__k {
  margin: 0;
  color: var(--hs-lane);
}
.hs-lane--urgent .hs-lane__k { color: var(--hs-attn-ink); }

.hs-lane__svg {
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: auto;
  margin-block-start: auto;
  margin-inline: 0;
  color: var(--muted);
  padding-top: var(--s-4);
}

/* lane diagram marks --------------------------------------------------------*/
.hs-lane__port {
  fill: var(--bg-card);
  stroke: var(--rf-ch-2);
  stroke-width: 2.5;
}
.hs-lane__port--amber {
  stroke: var(--hs-attn);
}

.hs-lane__cap {
  fill: var(--rf-node-1);
}
.hs-lane__cap--amber {
  fill: var(--hs-attn);
}

/* Glyphs sitting on a filled cap: white on the blue cap, near-black on the
   amber one — the amber fill is bright by design, so white would not hold. */
.hs-lane__tick {
  fill: none;
  stroke: #fff;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hs-lane__glyph {
  fill: var(--ink);
}

.hs-lane__halo {
  fill: none;
  stroke: var(--hs-attn);
  stroke-width: 1.5;
  stroke-opacity: 0.5;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: hs-halo 3.6s var(--e-inout) infinite;
}

/* card hover lifts the whole lane and saturates its rule */
.hs-lane {
  transition:
    transform var(--d-3) var(--e-out),
    box-shadow var(--d-3) var(--e-out),
    border-color var(--d-3) var(--e-out);
}
.hs-lane:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: color-mix(in srgb, var(--hs-lane) 45%, var(--line));
}
.hs-lane:hover::before {
  opacity: 1;
}

/* Mid-page conversion strip ------------------------------------------------*/
.hs-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4) var(--s-8);
  margin-top: var(--s-12);
  padding: var(--s-6) var(--s-8);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background:
    linear-gradient(120deg,
      color-mix(in srgb, var(--blue) 7%, var(--bg-card)) 0%,
      var(--bg-card) 62%);
  box-shadow: var(--shadow-card);
}

.hs-strip__k {
  margin: 0;
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--t-title-1);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}

/* ===========================================================================
   6. TWO-COLUMN BLOCK — sequence + live feed
   ======================================================================== */
.hs-two {
  align-items: start;
  row-gap: var(--s-16);
}

.hs-two__col {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
}

.hs-seq {
  margin: 0;
}

/* Feed panel --------------------------------------------------------------*/
.hs-feed {
  margin-top: var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.hs-feed__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label chip"
    "value chip";
  align-items: center;
  gap: var(--s-1) var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--line-soft);
}

.hs-feed__row:first-child {
  border-top: 0;
}

.hs-feed__label {
  grid-area: label;
  margin: 0;
  font-size: var(--t-xs);
  letter-spacing: 0.02em;
  color: var(--muted);
  min-width: 0;
}

.hs-feed__value {
  grid-area: value;
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-title-2);
  line-height: 1.2;
  color: var(--ink);
  min-width: 0;
}

.hs-feed__value--warn {
  color: var(--hs-attn-ink);
}

.hs-feed__value--sm {
  font-size: var(--t-sm);
  letter-spacing: 0.01em;
  color: var(--body);
}

.hs-feed__row--resolved {
  background: color-mix(in srgb, var(--ok) 8%, transparent);
}

/* Status chips ------------------------------------------------------------*/
.hs-chip {
  grid-area: chip;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--body);
}

.hs-chip::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  flex: none;
  background: currentColor;
}

.hs-chip--ok {
  color: var(--hs-pos-ink);
  border-color: color-mix(in srgb, var(--ok) 45%, transparent);
  background: color-mix(in srgb, var(--ok) 10%, transparent);
}
.hs-chip--ok::before { background: var(--ok); }

.hs-chip--warn {
  color: var(--hs-attn-ink);
  border-color: color-mix(in srgb, var(--hs-attn) 50%, transparent);
  background: color-mix(in srgb, var(--hs-attn) 12%, transparent);
}
.hs-chip--warn::before { background: var(--hs-attn); }

/* ===========================================================================
   7. BOUNDARY BAND — what stays human
   ======================================================================== */
.hs-boundary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Amber is the human-attention colour, so the one band about human control is
   the one band washed with it. Kept far below text-contrast thresholds. */
.hs-boundary__wash {
  background:
    radial-gradient(ellipse 62% 52% at 50% 6%, rgba(231, 166, 58, 0.17), transparent 64%),
    radial-gradient(ellipse 52% 48% at 14% 88%, rgba(16, 119, 215, 0.09), transparent 66%),
    linear-gradient(180deg, #ffffff 0%, var(--paper) 62%, #f2f6fa 100%);
}

.hs-eyebrow--amber {
  color: var(--hs-attn-ink);
}
.hs-eyebrow--amber::before {
  background: var(--hs-attn);
  opacity: 0.75;
}

/* Owned-by-humans grid ----------------------------------------------------*/
.hs-owned {
  margin-top: var(--s-10);
  row-gap: var(--s-5);
}

/* On a light band a hairline-only list has no presence, so each boundary gets
   its own white plate with an amber top rule — the human-attention marker. */
.hs-owned__item {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper-card, var(--bg-card));
  box-shadow: var(--shadow-card);
  transition:
    transform var(--d-3) var(--e-out),
    box-shadow var(--d-3) var(--e-out),
    border-color var(--d-3) var(--e-out);
}

.band--dark .hs-owned__item,
.band--void .hs-owned__item {
  background: var(--bg-card);
}

.hs-owned__item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: color-mix(in srgb, var(--amber) 45%, var(--line));
}

.hs-owned__item > :last-child {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--muted);
}

.hs-owned__k {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-size: var(--t-title-3);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.hs-owned__k::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--hs-attn);
  translate: 0 -2px;
}

.hs-owned__item--note {
  border-color: color-mix(in srgb, var(--amber) 55%, transparent);
  background: color-mix(in srgb, var(--amber) 7%, var(--paper-card, #fff));
}
.hs-owned__item--note .hs-owned__k {
  color: var(--hs-attn-ink);
}

/* Build cards -------------------------------------------------------------*/
.hs-builds {
  margin-top: var(--s-12);
  align-items: stretch;
}

.hs-build {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
  background: var(--paper-card, var(--bg-card));
}

.band--dark .hs-build,
.band--void .hs-build {
  background: var(--bg-card);
}

.hs-scope {
  background: var(--paper-card, var(--bg-card));
}

/* the card's closing link is pushed down so every card's CTA sits on one line */
.hs-build > :last-child {
  margin-top: auto;
  padding-top: var(--s-2);
}

/* Titles run one or two lines; reserving two keeps every card's RESULT row on
   the same baseline across the row. */
.hs-build > h3 {
  min-block-size: 2.6em;
}

.hs-build__spec {
  margin: var(--s-1) 0 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

/* every row of the spec list — dt label over dd value */
.hs-build__spec > div {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}

.hs-build__spec dt {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--muted);
}

.hs-build__spec dd {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--body);
}

/* the human-boundary row is the promise of the card — mark it */
.hs-build__bound {
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
}
.hs-build__bound > dt {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--hs-attn-ink);
}
.hs-build__bound > dt::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--hs-attn);
}
.hs-build__bound > dd {
  color: var(--ink);
}

/* ===========================================================================
   8. SCOPES — focused / connected / custom
   ======================================================================== */
.hs-scopes-wrap {
  display: block;
  margin-top: var(--s-16);
  padding-top: var(--s-10);
  border-top: 1px solid var(--line);
}

.hs-scopes {
  margin-top: var(--s-8);
  align-items: stretch;
}

.hs-scope {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}

.hs-scope > :last-child {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: 400;
  line-height: 1.55;
  color: var(--muted);
}

.hs-scope__k {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-title-2);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.hs-scope--lead {
  background: var(--bg-card-2);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-lift);
}
.hs-scope--lead .hs-scope__k {
  color: var(--accent);
}

/* ===========================================================================
   9. CLOSING CTA BAND
   ======================================================================== */
.hs-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

.hs-cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline-start: 50%;
  inset-block-start: -30%;
  inline-size: min(900px, 120%);
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--blue) 16%, transparent) 0%,
    transparent 62%);
}

.hs-cta .section-head,
.hs-cta .lead,
.hs-cta p {
  margin-inline: auto;
}

.hs-cta .row,
.hs-cta .grid {
  justify-content: center;
}

/* ===========================================================================
   10. RESPONSIVE
   ======================================================================== */
@media (max-width: 1024px) {
  .hs-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-12);
  }
  .hs-hero__title {
    max-width: 18ch;
  }
  .hs-hero__figure {
    align-items: center;
  }
  .hs-flow {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-12);
  }
  .hs-sticky {
    position: static;
  }
  .hs-scopes-wrap {
    margin-top: var(--s-12);
  }
}

@media (max-width: 768px) {
  .hs-quote {
    margin-top: var(--s-12);
    max-inline-size: 30ch;
  }
  .hs-owned {
    margin-top: var(--s-8);
    row-gap: var(--s-6);
  }
  .hs-builds {
    margin-top: var(--s-10);
  }
  .hs-feed__row {
    padding: var(--s-4);
  }
}

/* Diagram legibility on narrow screens.
   The routing figure is 600 units wide. On a phone it would render at roughly
   half scale, putting its labels near 6.8px — and enlarging them inside the
   coordinate system pushes the detail lines straight out of their plates.
   So the figure keeps its designed geometry and scrolls instead, now held at
   its authored 1:1 scale so the enlarged labels arrive at full size. */
@media (max-width: 600px) {
  .hs-hero__scroll {
    margin-inline: calc(var(--s-2) * -1);
    padding-inline: var(--s-2);
  }
  .hs-hero__scroll .hs-route {
    min-inline-size: 600px;
    max-inline-size: none;
  }
  /* Same treatment for the day board: held at its authored 740 units. */
  .hs-day__scroll {
    margin-inline: calc(var(--s-2) * -1);
    padding-inline: var(--s-2);
  }
  .hs-day__scroll .hs-day {
    min-inline-size: 740px;
    max-inline-size: none;
  }
  /* The lane figures do fit, they are just small — the labels are enlarged
     inside the viewBox instead, and the two label rows were spaced 21 units
     apart in the markup so the taller type cannot collide. */
  .hs-lane__svg text {
    font-size: 15.5px;
    letter-spacing: 0.55px;
  }
}

@media (max-width: 560px) {
  .hs-hero__inner {
    gap: var(--s-10);
  }
  .hs-hero__title {
    max-width: none;
  }
  .hs-hero__cta {
    inline-size: 100%;
  }
  .hs-hero__cta > * {
    flex: 1 1 14rem;
  }

  .hs-spec {
    padding-inline: var(--s-4);
  }

  .hs-feed__row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "label"
      "value"
      "chip";
    gap: var(--s-2);
  }
  .hs-chip {
    justify-self: start;
  }

  .hs-run-controls {
    gap: var(--s-2);
  }
  .hs-run-controls [data-run-position] {
    margin-inline-start: 0;
    flex-basis: 100%;
  }

  /* Touch targets ---------------------------------------------------------
     The stage markers are real buttons — they drive the run player — and at
     33px they were a third under the 44px thumb floor. The marker column of
     the rail widens with them so the numeral stays centred on its own track.
     The estimate rail's markers are inert spans, but they are the same object
     to the eye and would read as a mistake if only one rail grew. */
  .hs-stages .rail__step,
  .hs-seq .rail__step {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .hs-stages .rail__marker,
  .hs-seq .rail__marker {
    inline-size: 44px;
    block-size: 44px;
    font-size: 12px;
  }

  /* Player controls ship at 40px tall; on a phone they take the 44px floor. */
  .hs-run-controls .btn {
    min-block-size: 44px;
    min-inline-size: 44px;
  }

  /* The owner's initials sat at 10px inside their disc. */
  .hs-flow__aside .owner__avatar {
    font-size: 11.5px;
  }

  .hs-lang__chain {
    padding: var(--s-3);
  }

  .hs-break__cost {
    padding-left: var(--s-3);
  }

  /* Two chips a row instead of one: the list has to stay one scannable object
     on a phone, not a column of eleven boxes. */
  .hs-chips {
    gap: var(--s-1) var(--s-2);
  }
  .hs-fitchip {
    padding: var(--s-1) var(--s-2);
    letter-spacing: 0.04em;
  }
}

/* ===========================================================================
   11. REDUCED MOTION
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hs-route__halo,
  .hs-route__human-path,
  .hspk,
  .hs-day__halo,
  .hs-day__gap,
  .hs-day__refill,
  .hs-daypk {
    animation: none;
  }
  .hs-route__halo { scale: 1; opacity: 0.9; }
  /* packets rest mid-channel instead of travelling */
  .hspk { offset-distance: 58%; opacity: 0.95; }
  .hs-daypk { offset-distance: 62%; opacity: 0.95; }
  /* the board rests on its resolved state: the slot is refilled */
  .hs-day__halo { scale: 1; opacity: 0.9; }
  .hs-day__gap { opacity: 0; }
  .hs-day__refill { opacity: 1; }
  .hs-stage,
  .hs-spec {
    transition: none;
  }
}