/* =============================================================
   BuildsProof — HR Mode
   Page-specific layer only. Every colour, radius, font and the
   navbar itself come from the shared style.css, so this page is
   provably the same product as the landing page rather than a
   lookalike. All rules are namespaced .hm-* and never touch the
   landing page's .hero / .eco / .hr blocks.
   ============================================================= */

/* ------------------------------ tokens ------------------------------ */
.hm-body {
  --hm-line: var(--line);
  --hm-line-2: var(--line-strong);
  --hm-green: var(--green);
  --hm-green-600: var(--green-600);
  --hm-green-700: var(--green-700);
  --hm-mint: var(--mint);
  --hm-mint-soft: var(--mint-soft);
  --hm-paper: var(--paper);
  --hm-field: var(--field);

  /* section rhythm */
  --hm-pad: clamp(72px, 8.5vw, 132px);
  --hm-pad-sm: clamp(52px, 6vw, 84px);

  /* the rail and chain gaps are variables because the connector geometry
     below has to add them back: a track spanning node centre to node
     centre is one column plus one gap, and CSS cannot infer the gap from
     a percentage */
  --hm-rail-gap: clamp(10px, 1.4vw, 22px);
  --hm-chain-gap: 4px;
  --hm-vgap: 34px;

  background: var(--field);
}

/* The rail fill is driven from hr-mode.js as a single 0..1 value, so the
   line, the nodes and the labels all agree on one source of truth.

   It defaults to 1, i.e. the completed ladder, so a visitor without JS
   sees a finished rail rather than an empty one. The script drops it to
   0 in the same tick it confirms motion support, before the rail is ever
   scrolled to. */
.hm-body {
  --hm-p: 1;
}

/* ------------------------------ reset ------------------------------ */
/* The shared stylesheet resets ul but not ol, so a bare <ol> would carry
   the UA's 40px padding-inline-start and sit 40px off its own grid. This
   is scoped to the page: style.css and the landing page are untouched. */
.hm-body ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ------------------------------ type ------------------------------ */
.hm-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hm-green);
}

.hm-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hm-green);
  flex-shrink: 0;
}

.hm-title {
  margin: 0;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--ink);
}

.hm-lede {
  max-width: 52ch;
  margin: 20px 0 0;
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  line-height: 1.62;
  color: var(--muted);
}

.hm-lede--center {
  margin-inline: auto;
  text-align: center;
}

.hm-head {
  position: relative;
  max-width: 820px;
  margin-inline: auto;
  margin-bottom: clamp(40px, 5vw, 68px);
  text-align: center;
}

.hm-head .hm-eyebrow {
  justify-content: center;
}

/* ------------------------------ buttons ------------------------------ */
/* .btn itself is the landing page's button, reused unchanged. Only the
   quiet variant is added here. */
.hm-body .btn--quiet {
  background: transparent;
  color: var(--hm-green-700);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}

.hm-body .btn--quiet:hover {
  background: var(--mint-soft);
  color: var(--hm-green-700);
  box-shadow: inset 0 0 0 1.5px var(--hm-green);
}

.hm-body .btn--quiet:active {
  background: var(--mint);
  color: var(--hm-green-700);
}

.hm-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}

.hm-actions--center {
  justify-content: center;
}

/* =============================================================
   1. HERO
   ============================================================= */
.hm-hero {
  position: relative;
  padding-block: clamp(56px, 7vw, 104px) var(--hm-pad);
  overflow: hidden;
}

/* A single hairline grid, faded out with a mask so it reads as paper
   texture rather than a table. */
.hm-hero-grid-hair {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--hm-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hm-line) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(
    120% 90% at 72% 42%,
    #000 0%,
    transparent 72%
  );
  mask-image: radial-gradient(120% 90% at 72% 42%, #000 0%, transparent 72%);
  opacity: 0.75;
}

.hm-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(32px, 4.5vw, 68px);
  align-items: center;
}

.hm-hero-title {
  margin: 0;
  font-size: clamp(2.5rem, 6.1vw, 4.5rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--ink);
}

.hm-hero-note {
  max-width: 46ch;
  margin: 30px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--hm-line);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--muted);
}

.hm-hero-art {
  min-width: 0;
  /* The wordmark is sized from this box, not the viewport. The card's width
     is not a monotonic function of the viewport: it is capped at 560px
     through the single-column range and then narrows again to ~472px at
     the two-column breakpoint, so a vw-based size looks correct at some
     widths and far too small at others. Sizing off the card itself keeps
     the run at roughly three quarters of the width everywhere. */
  container-type: inline-size;
}

/* Wordmark sitting directly above the illustration. Both this and the
   figure are children of .hm-hero-art, and the figure sets no width of
   its own, so width:100% here resolves to the same box the figure's
   border box occupies - the left and right edges line up exactly rather
   than approximately. The glyphs are centred inside that full-width
   block, so the edge alignment and the optical centring both hold.
   Tracking and treatment follow the landing page's .fin-title. The two
   halves are adjacent with no whitespace between them, so the wordmark
   still reads as the single word BUILDPROOF while each half can take
   its own colour. The vw term is capped so the run fills roughly three
   quarters of the card at desktop widths and never overflows it on the
   narrow viewports, where the card shrinks faster than the type does. */
.hm-hero-word {
  width: 100%;
  margin: 0 0 35px;
  margin-top: 0;
  /* The negative lift only works while the hero is two columns, because
     then the art column has open space above it. Once the columns stack
     the copy column sits directly overhead, and lifting 80px drops the
     wordmark on top of .hm-hero-note, so the offset is re-enabled from
     the same 860px breakpoint that stacks them. */
  margin-top: -80px;
  /* Viewport-based fallback first, so a browser without container units
     still gets a sane size; the container-relative value below overrides
     it wherever cqw is supported. */
  font-size: clamp(1.5rem, 4.9vw, 4.2rem);
  font-size: clamp(1.5rem, 11.5cqw, 4.2rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
}

.hm-word-build {
  color: var(--ink);
}

.hm-word-proof {
  color: var(--hm-green);
}

.hm-hero-figure {
  position: relative;
  margin: 0;
  padding: clamp(18px, 2.4vw, 32px);
  border: 1px solid var(--hm-line-2);
  border-radius: var(--r-lg);
  background: var(--hm-paper);
  box-shadow: var(--shadow-card);
}

/* A green rule and a mint plate behind the artwork: flat, geometric, and
   built from the palette rather than an added gradient. */
.hm-hero-figure::before {
  content: "";
  position: absolute;
  inset: auto clamp(18px, 2.4vw, 32px) clamp(18px, 2.4vw, 32px) auto;
  height: 64%;
  z-index: 0;
  border-radius: var(--r-md);
  background: var(--hm-mint-soft);
}

.hm-hero-figure::after {
  content: "";
  position: absolute;
  top: clamp(18px, 2.4vw, 32px);
  left: clamp(18px, 2.4vw, 32px);
  z-index: 2;
  width: 76px;
  height: 3px;
  background: var(--hm-green);
}

.hm-hero-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 1536 / 1024;
  object-fit: contain;
}

/* Brand lockup over the illustration. The offsets are the figure's own
   padding clamp, so the chip's left and bottom edges land flush with the
   image rather than floating. z-index 3 clears ::before(0), the image(1)
   and the green accent bar(2), so nothing already in the figure is
   covered. White needs the dark chip: the artwork is mid-tone (mean
   luminance 176/255), where white text alone measures 2.16:1. On
   --hm-green-700 it reaches ~7.5:1. */
.hm-hero-mark {
  position: absolute;
  z-index: 3;
  bottom: clamp(18px, 2.4vw, 32px);
  left: clamp(18px, 2.4vw, 32px);
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--hm-green-700);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  white-space: nowrap;
}

/* =============================================================
   2. WHAT IS HR MODE — the chain
   ============================================================= */
.hm-what {
  position: relative;
  padding-block: var(--hm-pad);
  background: var(--hm-paper);
  border-block: 1px solid var(--hm-line);
}

.hm-chain {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--hm-chain-gap);
}

/* the connector line behind the chain, spanning first node centre to last.
   Half a column is (100% - 6 gaps) / 14, not 100% / 14: a percentage
   cannot see the gap, so ignoring it leaves the line 2px proud of the
   outer nodes on each side. */
.hm-chain::before {
  content: "";
  position: absolute;
  left: calc((100% - 6 * var(--hm-chain-gap)) / 14);
  right: calc((100% - 6 * var(--hm-chain-gap)) / 14);
  top: 13px;
  height: 1px;
  background: var(--hm-line-2);
}

.hm-chain-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 0;
  text-align: center;
}

.hm-chain-idx {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 1px solid var(--hm-line-2);
  border-radius: 50%;
  background: var(--hm-paper);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.hm-chain-name {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* the destination reads as the outcome, in the accent */
.hm-chain-step--out .hm-chain-idx {
  border-color: var(--hm-green);
  background: var(--hm-green);
  color: #fff;
}

.hm-chain-step--out .hm-chain-name {
  color: var(--hm-green-700);
}

/* =============================================================
   3. WHY — comparison
   ============================================================= */
.hm-why {
  padding-block: var(--hm-pad);
}

.hm-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--hm-line-2);
  border-radius: var(--r-lg);
  background: var(--hm-paper);
  overflow: hidden;
}

.hm-compare-col {
  padding: clamp(26px, 3vw, 40px);
}

.hm-compare-col + .hm-compare-col {
  border-left: 1px solid var(--hm-line);
}

.hm-compare-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 22px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.hm-compare-flag {
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--hm-mint-soft);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--hm-green-700);
}

.hm-compare-list {
  display: grid;
  gap: 14px;
}

.hm-compare-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--muted);
}

/* a hairline dash: "not this", without a red or a cross */
.hm-compare-mark {
  flex-shrink: 0;
  width: 13px;
  height: 1.5px;
  margin-top: 10px;
  background: var(--hm-line-2);
}

.hm-compare-check {
  position: relative;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 4px;
  border-radius: 3px;
  background: var(--hm-green);
}

.hm-compare-check::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 4px;
  width: 4px;
  height: 7px;
  border: solid #fff;
  border-width: 0 1.7px 1.7px 0;
  transform: rotate(42deg);
}

.hm-compare-col--proof .hm-compare-title {
  color: var(--hm-green-700);
}

.hm-compare-col--proof .hm-compare-list li {
  color: var(--ink-soft);
}

/* =============================================================
   4. WORKFLOW RAIL
   Desktop: 7 columns. Mobile: one column and the track turns
   vertical, so the line is never lost.

   The connector is drawn per stage rather than as one long line over
   the whole rail. Each stage owns the run from its own node centre to
   the next node's centre, which is exactly one column plus one gap —
   so the geometry is correct by construction at any width, and it
   survives a gap clamp landing on a different value at each
   breakpoint. A single shared line would have to divide 100% by the
   column count, and that silently ignores the gap.
   ============================================================= */
.hm-flow {
  position: relative;
  padding-block: var(--hm-pad);
  background: var(--hm-paper);
  border-block: 1px solid var(--hm-line);
}

.hm-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--hm-rail-gap);
}

.hm-rail-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* --- the connector: track underneath, green fill on top --- */
.hm-rail-stage::before,
.hm-rail-stage::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 2px;
  pointer-events: none;
}

.hm-rail-stage::before {
  top: 7px;
  left: 50%;
  width: calc(100% + var(--hm-rail-gap));
  height: 2px;
  background: var(--hm-line-2);
}

.hm-rail-stage::after {
  top: 7px;
  left: 50%;
  width: calc(100% + var(--hm-rail-gap));
  height: 2px;
  background: var(--hm-green);
  /* the local share of the global progress: this segment is full once the
     fill has travelled one whole stage past it */
  transform: scaleX(clamp(0, calc(var(--hm-p) * 6 - var(--hm-i, 0)), 1));
  transform-origin: left center;
}

/* the last stage has no next node to reach */
.hm-rail-stage:last-child::before,
.hm-rail-stage:last-child::after {
  display: none;
}

.hm-rail-stage:nth-child(1) {
  --hm-i: 0;
}
.hm-rail-stage:nth-child(2) {
  --hm-i: 1;
}
.hm-rail-stage:nth-child(3) {
  --hm-i: 2;
}
.hm-rail-stage:nth-child(4) {
  --hm-i: 3;
}
.hm-rail-stage:nth-child(5) {
  --hm-i: 4;
}
.hm-rail-stage:nth-child(6) {
  --hm-i: 5;
}

.hm-rail-node {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  margin-bottom: 20px;
  border: 2px solid var(--hm-line-2);
  border-radius: 50%;
  background: var(--hm-paper);
  transition:
    border-color 0.3s ease,
    background 0.3s ease;
}

/* A stage switches to the accent once the fill has passed it. The class
   is set from JS off the same --hm-p value, so node and fill can never
   disagree. */
.hm-rail-stage.is-lit .hm-rail-node {
  border-color: var(--hm-green);
  background: var(--hm-green);
}

.hm-rail-idx {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--muted);
  transition: color 0.3s ease;
}

.hm-rail-stage.is-lit .hm-rail-idx {
  color: var(--hm-green);
}

.hm-rail-name {
  margin: 8px 0 0;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

.hm-rail-copy {
  margin: 10px 0 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

/* =============================================================
   5. FEATURES — editorial index
   ============================================================= */
.hm-features {
  padding-block: var(--hm-pad);
}

.hm-feature-index {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--hm-line-2);
}

.hm-feature-group {
  padding: clamp(24px, 2.6vw, 34px) clamp(20px, 2.2vw, 30px);
  border-bottom: 1px solid var(--hm-line);
}

/* vertical hairlines between the three columns, on the top row only */
.hm-feature-group:nth-child(3n + 2),
.hm-feature-group:nth-child(3n + 3) {
  border-left: 1px solid var(--hm-line);
}

.hm-feature-group:nth-child(n + 4) {
  border-top: 0;
}

.hm-feature-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
}

.hm-feature-idx {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--hm-green);
}

.hm-feature-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

.hm-feature-list {
  display: grid;
  gap: 9px;
}

.hm-feature-list li {
  position: relative;
  padding-left: 16px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted);
}

.hm-feature-list li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 6px;
  height: 1.5px;
  background: var(--hm-line-2);
}

/* =============================================================
   6. RECRUITER WORKSPACE MOCKUP
   Deliberately NOT named .shot: the landing page's .shot carries a
   fixed height at small widths, which is right for a screenshot and
   wrong for this. Here the box is always sized by its content.
   ============================================================= */
.hm-workspace {
  padding-block: var(--hm-pad);
  background: var(--hm-paper);
  border-block: 1px solid var(--hm-line);
}

.hm-app {
  border: 1px solid var(--hm-line-2);
  border-radius: var(--r-lg);
  background: var(--hm-field);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.hm-app-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--hm-line);
  background: var(--hm-paper);
}

.hm-app-dots {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

.hm-app-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hm-line-2);
}

.hm-app-title {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.hm-app-role {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--hm-line-2);
  background: var(--hm-mint-soft);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hm-green-700);
}

.hm-app-body {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  align-items: start;
}

.hm-app-side {
  padding: 20px;
  border-right: 1px solid var(--hm-line);
  background: var(--hm-paper);
  min-width: 0;
}

.hm-search {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--hm-line-2);
  border-radius: var(--r-sm);
  background: var(--field);
}

.hm-search-ico {
  position: relative;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  border: 1.6px solid var(--muted);
  border-radius: 50%;
}

.hm-search-ico::after {
  content: "";
  position: absolute;
  top: 11px;
  left: 11px;
  width: 6px;
  height: 1.6px;
  background: var(--muted);
  transform: rotate(45deg);
  transform-origin: left center;
}

.hm-search-text {
  font-size: 0.8125rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hm-app-label {
  margin: 0 0 12px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.hm-filters {
  display: grid;
  gap: 18px;
}

.hm-filter-name {
  display: block;
  margin-bottom: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.hm-filter-vals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hm-filter-val {
  padding: 5px 9px;
  border: 1px solid var(--hm-line-2);
  border-radius: 999px;
  background: var(--hm-paper);
  font-size: 0.75rem;
  color: var(--muted);
}

.hm-filter-val--on {
  border-color: var(--hm-green);
  background: var(--mint-soft);
  font-weight: 600;
  color: var(--hm-green-700);
}

.hm-app-main {
  padding: 20px;
  min-width: 0;
}

.hm-cands {
  display: grid;
  gap: 8px;
}

.hm-cand {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
  border: 1px solid var(--hm-line);
  border-radius: var(--r-sm);
  background: var(--hm-paper);
}

.hm-cand-avatar {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--mint);
}

.hm-cand-avatar::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--hm-paper);
  border-radius: 50%;
  background: var(--hm-green);
}

.hm-cand-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hm-cand-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink);
}

.hm-cand-role {
  font-size: 0.75rem;
  color: var(--muted);
}

.hm-cand-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
  min-width: 0;
}

.hm-cand-badge {
  padding: 4px 9px;
  border: 1px solid var(--hm-line);
  border-radius: 999px;
  background: var(--field);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
}

.hm-cand-act {
  flex-shrink: 0;
  padding: 7px 12px;
  border-radius: var(--r-sm);
  background: var(--hm-green);
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

.hm-pipe {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--hm-line);
}

.hm-pipe-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.hm-pipe-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--hm-line-2);
  border-radius: var(--r-sm);
  background: var(--hm-paper);
}

.hm-pipe-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
}

.hm-pipe-n {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--muted);
}

/* the stage the mockup is parked on */
.hm-pipe-step.is-now {
  border-color: var(--hm-green);
  background: var(--hm-green);
}

.hm-pipe-step.is-now .hm-pipe-name,
.hm-pipe-step.is-now .hm-pipe-n {
  color: #fff;
}

/* =============================================================
   7. DEVELOPER → HR CONNECTION
   ============================================================= */
.hm-connect {
  padding-block: var(--hm-pad);
  background: var(--hm-paper);
  border-block: 1px solid var(--hm-line);
}

.hm-link {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 0.9fr)
    minmax(0, 1fr);
  align-items: center;
  gap: 0;
}

.hm-link-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: clamp(20px, 2.4vw, 30px) 16px;
  border: 1px solid var(--hm-line-2);
  border-radius: var(--r-md);
  background: var(--field);
  text-align: center;
}

.hm-link-node--bp {
  border-color: var(--hm-green);
  background: var(--mint-soft);
}

.hm-link-ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--hm-line-2);
  border-radius: 50%;
  background: var(--hm-paper);
}

.hm-link-node--bp .hm-link-ico {
  border-color: var(--hm-green);
  background: var(--hm-paper);
}

.hm-link-role {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}

.hm-link-desc {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}

/* the wire, with a travelling pulse once the section is in view */
.hm-link-wire {
  position: relative;
  height: 2px;
  background: var(--hm-line-2);
}

.hm-link-pulse {
  position: absolute;
  inset: 0;
  background: var(--hm-green);
  transform: scaleX(0);
  transform-origin: left center;
}

.hm-link-wire.is-live .hm-link-pulse {
  animation: hm-wire-run 2.4s ease-in-out infinite;
}

.hm-link-wire:last-of-type .hm-link-pulse {
  animation-delay: 1.2s;
}

@keyframes hm-wire-run {
  0% {
    transform: scaleX(0);
    transform-origin: left center;
  }
  45% {
    transform: scaleX(1);
    transform-origin: left center;
  }
  55% {
    transform: scaleX(1);
    transform-origin: right center;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right center;
  }
}

/* =============================================================
   8. VALUE
   ============================================================= */
.hm-value {
  padding-block: var(--hm-pad);
}

.hm-value-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--hm-line-2);
}

.hm-value-item {
  padding: clamp(24px, 2.6vw, 34px) clamp(18px, 2vw, 28px);
  border-bottom: 1px solid var(--hm-line);
}

.hm-value-item + .hm-value-item {
  border-left: 1px solid var(--hm-line);
}

.hm-value-idx {
  display: block;
  margin-bottom: 16px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--hm-green);
}

.hm-value-name {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.hm-value-copy {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

/* =============================================================
   9. FINAL CTA
   ============================================================= */
.hm-final {
  padding-block: clamp(72px, 9vw, 140px);
  background: var(--mint-soft);
  border-top: 1px solid var(--hm-line-2);
}

.hm-final-inner {
  position: relative;
  text-align: center;
}

.hm-final-inner .hm-eyebrow {
  justify-content: center;
}

.hm-final-title {
  margin: 0;
  font-size: clamp(2.1rem, 5.4vw, 4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--ink);
}

.hm-final-copy {
  max-width: 46ch;
  margin: 22px auto 0;
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* =============================================================
   REVEAL
   Nothing is hidden by default. hr-mode.js adds .hm-armed at the same
   moment it switches on motion support, so a page with no JS — or a
   moment before the script runs — is simply complete and readable.
   ============================================================= */
.hm-body.hm-armed [data-hm] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hm-body.hm-armed [data-hm].is-in {
  opacity: 1;
  transform: none;
}

/* the hero runs its own short entrance rather than waiting to scroll */
.hm-body.hm-armed .hm-hero-copy [data-hm] {
  transition-delay: 0.06s;
}

.hm-body.hm-armed .hm-hero-copy [data-hm]:nth-child(2) {
  transition-delay: 0.14s;
}

.hm-body.hm-armed .hm-hero-copy [data-hm]:nth-child(3) {
  transition-delay: 0.22s;
}

.hm-body.hm-armed .hm-hero-copy [data-hm]:nth-child(4) {
  transition-delay: 0.3s;
}

.hm-body.hm-armed .hm-hero-art[data-hm] {
  transition-delay: 0.18s;
}

/* candidate rows arrive one after another, the way a list populates */
.hm-body.hm-armed [data-hm-cands] .hm-cand {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hm-body.hm-armed [data-hm-app].is-in .hm-cand {
  opacity: 1;
  transform: none;
}

.hm-body.hm-armed [data-hm-app].is-in .hm-cand:nth-child(1) {
  transition-delay: 0.1s;
}

.hm-body.hm-armed [data-hm-app].is-in .hm-cand:nth-child(2) {
  transition-delay: 0.22s;
}

.hm-body.hm-armed [data-hm-app].is-in .hm-cand:nth-child(3) {
  transition-delay: 0.34s;
}

.hm-body.hm-armed [data-hm-app].is-in .hm-cand:nth-child(4) {
  transition-delay: 0.46s;
}

/* =============================================================
   RESPONSIVE
   ============================================================= */

/* ---------- tablet: pull the wide structures in before they crowd ---------- */
@media (max-width: 1180px) {
  .hm-chain {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 28px;
  }

  /* the connector only makes sense on a single run of columns, so it is
     dropped once the chain wraps */
  .hm-chain::before {
    display: none;
  }

  .hm-feature-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hm-feature-group:nth-child(3n + 2),
  .hm-feature-group:nth-child(3n + 3) {
    border-left: 0;
  }

  .hm-feature-group:nth-child(even) {
    border-left: 1px solid var(--hm-line);
  }

  .hm-value-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hm-value-item:nth-child(odd) {
    border-left: 0;
  }

  .hm-value-item:nth-child(even) {
    border-left: 1px solid var(--hm-line);
  }

  .hm-app-body {
    grid-template-columns: 236px minmax(0, 1fr);
  }
}

/* ---------- the rail turns vertical ---------- */
@media (max-width: 1100px) {
  .hm-rail {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    max-width: 720px;
    margin-inline: auto;
  }

  /* one row per field, so the index, the name and the copy each keep
     their own line instead of stacking into one cell */
  .hm-rail-stage {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    grid-template-areas:
      "node idx"
      ".    name"
      ".    copy";
    column-gap: 20px;
    row-gap: 2px;
    align-items: start;
    text-align: left;
    padding-bottom: var(--hm-vgap);
  }

  .hm-rail-stage:last-child {
    padding-bottom: 0;
  }

  /* The connector turns with the layout: it now runs from this node's
     centre down to the next node's centre, which is exactly this
     stage's own height, because the stages stack with no gap and the
     bottom padding is inside that height. */
  .hm-rail-stage::before,
  .hm-rail-stage::after {
    top: 8px;
    left: 7px;
    width: 2px;
    height: 100%;
  }

  .hm-rail-stage::after {
    transform: scaleY(clamp(0, calc(var(--hm-p) * 6 - var(--hm-i, 0)), 1));
    transform-origin: center top;
  }

  .hm-rail-node {
    grid-area: node;
    margin-bottom: 0;
  }

  .hm-rail-idx {
    grid-area: idx;
  }

  .hm-rail-name {
    grid-area: name;
    margin: 4px 0 0;
  }

  .hm-rail-copy {
    grid-area: copy;
    margin: 6px 0 0;
    max-width: 54ch;
  }
}

@media (max-width: 980px) {
  .hm-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .hm-hero-art {
    order: 2;
    max-width: 560px;
  }

  /* Stacked layout: the copy column is directly above, so the desktop
     lift is cancelled or the wordmark lands on .hm-hero-note. */
  .hm-hero-word {
    margin-top: 0;
  }

  .hm-link {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    max-width: 460px;
    margin-inline: auto;
  }

  /* vertical wire between the nodes */
  .hm-link-wire {
    width: 2px;
    height: 46px;
    margin-inline: auto;
  }

  .hm-link-pulse {
    transform-origin: center top;
  }

  .hm-link-wire.is-live .hm-link-pulse {
    animation-name: hm-wire-run-v;
  }

  .hm-compare {
    grid-template-columns: minmax(0, 1fr);
  }

  .hm-compare-col + .hm-compare-col {
    border-left: 0;
    border-top: 1px solid var(--hm-line);
  }
}

@keyframes hm-wire-run-v {
  0% {
    transform: scaleY(0);
    transform-origin: center top;
  }
  45% {
    transform: scaleY(1);
    transform-origin: center top;
  }
  55% {
    transform: scaleY(1);
    transform-origin: center bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: center bottom;
  }
}

@media (max-width: 720px) {
  .hm-app-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .hm-app-side {
    border-right: 0;
    border-bottom: 1px solid var(--hm-line);
  }

  /* the mockup stays a product surface, so it stacks rather than scrolls */
  .hm-cand {
    flex-wrap: wrap;
  }

  .hm-cand-proof {
    margin-left: 47px;
    width: 100%;
  }

  .hm-cand-act {
    margin-left: auto;
  }

  .hm-pipe-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hm-feature-index,
  .hm-value-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hm-feature-group,
  .hm-feature-group:nth-child(even),
  .hm-value-item,
  .hm-value-item:nth-child(even) {
    border-left: 0;
  }

  .hm-chain {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .hm-actions .btn {
    flex: 1 1 100%;
  }

  .hm-br {
    display: none;
  }
}

@media (max-width: 420px) {
  .hm-chain {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .hm-chain-step {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    text-align: left;
  }

  .hm-pipe-steps {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =============================================================
   REDUCED MOTION
   Everything resolves to its final state. The rail still shows the
   completed ladder, and the connection wires stay filled rather than
   leaving two grey stubs on screen.
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .hm-body,
  .hm-body *::before,
  .hm-body *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .hm-body.hm-armed [data-hm],
  .hm-body.hm-armed [data-hm-cands] .hm-cand {
    opacity: 1;
    transform: none;
  }

  .hm-link-pulse {
    transform: scaleX(1);
  }

  @media (max-width: 980px) {
    .hm-link-pulse {
      transform: scaleY(1);
    }
  }
}