/* /how-it-works — the product walkthrough (lib/views/how.mjs, behaviour in /how.js). Builds on /styles.css (tokens, .btn,
   .mk-* chrome) and /css/landing.css (.lp tokens, section labels, headings, the warm CTA), so it reads as the same site.
   Flat and technical: near-black canvas, hairline borders, mono labels, one faint structural grid, the sage accent for
   selection and the desaturated green (--ok) only for things a person has confirmed (approved, interested, sold).
   Every interface panel shows structure, zeros or clearly marked example rows — never a customer, a vehicle or a figure. */

.hw {
  --hw-line: #1a1e20;          /* section + table hairlines */
  --hw-line-2: #262b2d;        /* component borders */
  --hw-line-3: #33393b;        /* hover borders */
  --hw-panel: #080b0d;         /* interface panels */
  --hw-panel-2: #0c1012;       /* raised rows, cards */
  --hw-ink: var(--text);
  --hw-ink-2: #c9cdcc;
  --hw-ink-3: #a3a8a7;
  --hw-ink-4: #737877;
  --hw-sk: #191d1f;            /* skeleton bars */
  --hw-accent: var(--accent);  /* selection: the brand's faint sage */
  --hw-ok: var(--ok);          /* confirmed by a person */
  --hw-ok-rgb: var(--ok-rgb);
}
.hw main { display: block; }
/* Zero-specificity resets, so every component's own spacing wins. */
:where(.hw) :where(h1, h2, h3, h4, p) { margin: 0; }

/* ── Section scaffolding ── */
.hw-sec { position: relative; padding: 112px 0 120px; border-top: 1px solid var(--lp-line); }
.hw-head { max-width: 760px; }
.hw-head .lp-label { margin-top: 18px; }
.hw-h2 { margin-top: 30px; color: var(--hw-ink); font-size: clamp(32px, 3.3vw, 46px); font-weight: 400; line-height: 1.12; letter-spacing: .012em; text-wrap: balance; }
.hw-lede { max-width: 640px; margin-top: 18px; color: var(--lp-ink-2); font-size: 18.5px; line-height: 1.5; }
.hw-mono { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.hw-label-idx { --idx-x: 13px; --idx-w: 220px; }

/* ── 01 Hero ── */
.hw-hero { position: relative; padding: 104px 0 96px; overflow: clip; }
/* The only background on the page: a faint construction grid that fades out under the workflow. */
.hw-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgb(255 255 255 / .028) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .028) 1px, transparent 1px);
  background-size: 72px 72px; background-position: center -1px;
  -webkit-mask-image: linear-gradient(#000 0, #000 45%, transparent 92%); mask-image: linear-gradient(#000 0, #000 45%, transparent 92%); }
.hw-hero > .mk-wrap { position: relative; z-index: 1; }
.hw-hero-copy { max-width: 860px; }
.hw-h1 { max-width: 15em; margin-top: 40px; color: var(--hw-ink); font-size: clamp(38px, 4.6vw, 64px); font-weight: 400; line-height: 1.04; letter-spacing: .012em; text-wrap: balance; }
.hw-hero-lede { max-width: 600px; margin-top: 24px; color: var(--lp-ink-2); font-size: 20px; line-height: 1.45; }
.hw-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 34px; }
.hw-ctas .lp-cta { width: auto; min-width: 216px; padding: 1px 26px 0; }
.hw-cta-2 { --h: 50px; min-width: 216px; gap: 13px; padding: 1px 26px 0; border-color: #3a4042; color: var(--hw-ink); font-size: 12px; letter-spacing: .14em; }
.hw-cta-2:hover { border-color: #5a6163; background: rgb(255 255 255 / .03); }
.hw-cta-2 .icon { width: 14px; height: 14px; stroke-width: 2; }
.hw-note { margin-top: 16px; color: var(--hw-ink-4); font-size: 13.5px; line-height: 1.5; }

/* Workflow strip: seven stages on one rail, the rail filled up to the selected stage. */
.hw-flow { --hw-at: 0; --hw-n: 7; position: relative; margin-top: 76px; }
.hw-flow-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; color: var(--hw-ink-4); }
.hw-stages { position: relative; display: grid; grid-template-columns: repeat(var(--hw-n), minmax(0, 1fr)); border: 1px solid var(--hw-line-2); border-radius: var(--r-2); background: rgb(8 11 13 / .86); }
/* The rail sits on the stages' top edge; its fill ends at the middle of the selected stage. */
.hw-stages::before, .hw-stages::after { content: ""; position: absolute; top: -1px; left: 0; height: 1px; pointer-events: none; }
.hw-stages::before { right: 0; background: var(--hw-line-2); }
.hw-stages::after { width: calc((var(--hw-at) + .5) / var(--hw-n) * 100%); background: var(--hw-accent); transition: width 520ms var(--ease-out); }
.hw-stage { position: relative; display: grid; align-content: start; gap: 12px; min-height: 124px; padding: 18px 16px 16px; border: 0; border-left: 1px solid var(--hw-line); background: none; color: var(--hw-ink-3);
  font: inherit; text-align: left; cursor: pointer; transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.hw-stage:first-child { border-left: 0; }
.hw-stage:hover { background: rgb(255 255 255 / .022); color: var(--hw-ink-2); }
.hw-stage[aria-selected="true"] { background: #0e1214; color: var(--hw-ink); }
.hw-stage:focus-visible { outline: 1.5px solid var(--hw-accent); outline-offset: -2px; }
/* A node on the rail above each stage: hollow ahead of the selection, filled up to it. */
.hw-stage::before { content: ""; position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border: 1px solid #4a5052; border-radius: 50%; background: var(--page-mk); transition: background-color var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out); }
.hw-stage.is-past::before, .hw-stage[aria-selected="true"]::before { border-color: var(--hw-accent); background: var(--hw-accent); }
.hw-stage-top { display: flex; align-items: center; justify-content: space-between; }
.hw-stage-n { color: var(--hw-ink-4); font: 400 10px/1 var(--mono); letter-spacing: .08em; }
.hw-stage[aria-selected="true"] .hw-stage-n { color: var(--hw-accent); }
.hw-stage .icon { width: 18px; height: 18px; stroke-width: 1.5; }
.hw-stage-name { font: 500 11.5px/1.35 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.hw-stage-panel { margin-top: 0; border: 1px solid var(--hw-line-2); border-top: 0; border-radius: 0 0 var(--r-2) var(--r-2); background: rgb(8 11 13 / .86); }
@media (prefers-reduced-motion: no-preference) { .hw-stage-panel:not([hidden]) { animation: hw-in 380ms var(--ease-out); } }
.hw-stage-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hw-col { padding: 24px 26px 26px; border-left: 1px solid var(--hw-line); }
.hw-col:first-child { border-left: 0; }
.hw-col h4 { color: var(--hw-ink-4); font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.hw-col p { margin-top: 12px; color: var(--hw-ink-2); font-size: 15px; line-height: 1.55; }
.hw-col-where p { color: var(--hw-ink); }
.hw-stage-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 26px; border-top: 1px solid var(--hw-line); }
.hw-link { display: inline-flex; align-items: center; gap: 10px; color: var(--hw-ink-2); font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: color var(--dur-2) var(--ease-out); }
.hw-link .icon { width: 13px; height: 13px; transition: translate var(--dur-2) var(--ease-out); }
.hw-link:hover { color: var(--hw-ink); }
.hw-link:hover .icon { translate: 3px 0; }
.hw-next { display: inline-flex; align-items: center; gap: 10px; height: 32px; padding: 0 12px; border: 1px solid var(--hw-line-2); border-radius: var(--r-1); background: none; color: var(--hw-ink-2);
  font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.hw-next:hover { border-color: var(--hw-line-3); color: var(--hw-ink); }
.hw-next .icon { width: 13px; height: 13px; }

/* ── 02 Recovery flow: a sticky rail beside the seven steps ── */
.hw-rec-grid { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 72px; margin-top: 64px; }
.hw-rail { position: sticky; top: 28px; align-self: start; --hw-at: 0; }
.hw-rail ol { position: relative; margin: 0; padding: 0; list-style: none; }
.hw-rail ol::before, .hw-rail ol::after { content: ""; position: absolute; left: 11px; top: 14px; width: 1px; pointer-events: none; }
.hw-rail ol::before { bottom: 14px; background: var(--hw-line-2); }
.hw-rail ol::after { height: calc(var(--hw-at) / 6 * (100% - 28px)); background: var(--hw-accent); transition: height 520ms var(--ease-out); }
.hw-rail a { position: relative; display: grid; grid-template-columns: 23px 1fr; align-items: center; column-gap: 14px; min-height: 52px; padding: 6px 0; color: var(--hw-ink-4); text-decoration: none; }
.hw-rail-dot { position: relative; z-index: 1; width: 23px; height: 23px; border: 1px solid #3c4244; border-radius: 50%; background: var(--page-mk); color: var(--hw-ink-4);
  font: 400 9.5px/21px var(--mono); text-align: center; transition: border-color var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out), background-color var(--dur-3) var(--ease-out); }
.hw-rail-verb { display: block; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; transition: color var(--dur-2) var(--ease-out); }
.hw-rail-title { display: block; margin-top: 6px; color: var(--hw-ink-4); font-size: 13px; line-height: 1.3; transition: color var(--dur-2) var(--ease-out); }
.hw-rail a:hover .hw-rail-verb, .hw-rail a:hover .hw-rail-title { color: var(--hw-ink-2); }
.hw-rail a.is-done .hw-rail-dot { border-color: var(--hw-accent); color: var(--hw-accent); }
.hw-rail a[aria-current="step"] .hw-rail-dot { border-color: var(--hw-accent); background: var(--hw-accent); color: var(--primary-ink); }
.hw-rail a[aria-current="step"] .hw-rail-verb { color: var(--hw-ink); }
.hw-rail a[aria-current="step"] .hw-rail-title { color: var(--hw-ink-2); }
.hw-rail a:focus-visible { outline: 1.5px solid var(--hw-accent); outline-offset: 2px; border-radius: 2px; }
.hw-rail-note { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--hw-line); color: var(--hw-ink-4); font-size: 12.5px; line-height: 1.55; }

.hw-steps { display: grid; }
.hw-step { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; padding: 56px 0; border-top: 1px solid var(--hw-line); scroll-margin-top: 24px; }
.hw-step:first-child { padding-top: 8px; border-top: 0; }
.hw-step-tag { display: flex; align-items: center; gap: 12px; color: var(--hw-ink-4); }
.hw-step-tag b { color: var(--hw-accent); font-weight: 500; }
.hw-step h3 { margin-top: 18px; color: var(--hw-ink); font-size: 27px; font-weight: 400; line-height: 1.2; letter-spacing: .005em; outline: none; }
.hw-step-copy > p { margin-top: 14px; color: var(--hw-ink-2); font-size: 16px; line-height: 1.6; }
.hw-points { display: grid; gap: 10px; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--hw-line); list-style: none; }
.hw-points li { position: relative; padding-left: 22px; color: var(--hw-ink-3); font-size: 14px; line-height: 1.5; }
.hw-points li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 1px; background: var(--hw-accent); }
.hw-points strong { color: var(--hw-ink); font-weight: 500; }

/* ── Interface panels (the product's own structure, no data) ── */
.hw-ui { position: relative; border: 1px solid var(--hw-line-2); border-radius: var(--r-2); background: var(--hw-panel); overflow: hidden; }
.hw-ui-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; padding: 10px 16px; border-bottom: 1px solid var(--hw-line); }
.hw-ui-title { display: flex; align-items: center; gap: 10px; color: var(--hw-ink); font-size: 14px; }
.hw-ui-title .icon { width: 16px; height: 16px; color: var(--hw-ink-3); stroke-width: 1.6; }
.hw-ui-body { padding: 16px; }
.hw-ui-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 16px; border-top: 1px solid var(--hw-line); }
.hw-ex { display: inline-flex; align-items: center; gap: 8px; color: var(--hw-ink-4); font: 400 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.hw-ex::before { content: ""; width: 5px; height: 5px; border: 1px solid currentColor; border-radius: 50%; }
.hw-live { min-height: 18px; color: var(--hw-ink-3); font-size: 12.5px; line-height: 1.45; }

/* Segmented control and small panel buttons. */
.hw-seg { display: inline-flex; padding: 2px; border: 1px solid var(--hw-line-2); border-radius: var(--r-2); }
.hw-seg button { height: 26px; padding: 0 10px; border: 0; border-radius: 2px; background: none; color: var(--hw-ink-4); font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.hw-seg button:hover { color: var(--hw-ink-2); }
.hw-seg button[aria-pressed="true"] { background: #171c1e; color: var(--hw-ink); }
.hw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 32px; padding: 0 13px; border: 1px solid var(--hw-line-2); border-radius: var(--r-1); background: none; color: var(--hw-ink-2);
  font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.hw-btn:hover:not(:disabled) { border-color: var(--hw-line-3); color: var(--hw-ink); }
.hw-btn:disabled { opacity: .4; cursor: not-allowed; }
.hw-btn:focus-visible, .hw-seg button:focus-visible, .hw-switch button:focus-visible, .hw-next:focus-visible { outline: 1.5px solid var(--hw-accent); outline-offset: 2px; }
.hw-btn .icon { width: 13px; height: 13px; }
.hw-btn[aria-pressed="true"] { border-color: var(--hw-ink-3); background: #141819; color: var(--hw-ink); }
.hw-btn-go { border-color: rgb(var(--hw-ok-rgb) / .45); color: var(--hw-ok); }
.hw-btn-go:hover:not(:disabled) { border-color: var(--hw-ok); color: #c9e6d1; }
.hw-btn-go[aria-pressed="true"] { border-color: var(--hw-ok); background: rgb(var(--hw-ok-rgb) / .12); color: #d6eedd; }
.hw-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Rows: a light table built from grids, a skeleton bar where a value would be. */
.hw-tr { display: grid; grid-template-columns: var(--hw-cols); align-items: center; gap: 12px; min-height: 44px; padding: 0 4px; border-bottom: 1px solid var(--hw-line); }
.hw-th { min-height: 32px; color: var(--hw-ink-4); font: 400 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.hw-tr:last-child { border-bottom: 0; }
.hw-sk { display: block; width: var(--w, 60%); height: 8px; border-radius: 2px; background: var(--hw-sk); }
.hw-sk-2 { height: 6px; margin-top: 7px; opacity: .7; }
.hw-cell { min-width: 0; color: var(--hw-ink-3); font-size: 12.5px; }
.hw-cell b { display: block; overflow: hidden; color: var(--hw-ink-2); font-size: 13px; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; }
.hw-cell small { display: block; margin-top: 3px; color: var(--hw-ink-4); font-size: 11px; }
.hw-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border: 1px solid var(--hw-line-2); border-radius: var(--r-1); color: var(--hw-ink-3);
  font-size: 11px; line-height: 1; white-space: nowrap; transition: border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); }
.hw-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.hw-badge.is-ok { border-color: rgb(var(--hw-ok-rgb) / .35); color: var(--hw-ok); }
.hw-badge.is-warn { border-color: rgb(var(--warn-rgb) / .35); color: var(--warn); }
.hw-badge.is-off { color: var(--hw-ink-4); }
.hw-badge.is-strong { border-color: #4a5052; color: var(--hw-ink); }
.hw-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border: 1px dashed #343a3c; border-radius: var(--r-1); color: var(--hw-ink-4); font-size: 11.5px; white-space: nowrap;
  transition: border-color 320ms var(--ease-out), color 320ms var(--ease-out), background-color 320ms var(--ease-out); }
.hw-chip .icon { width: 12px; height: 12px; }
/* Three-step meter for a factor's weight (an abstract level, never a measured number). */
.hw-meter { display: inline-grid; grid-template-columns: repeat(3, 14px); gap: 3px; }
.hw-meter i { height: 5px; border-radius: 1px; background: #23292b; }
.hw-meter[data-v="1"] i:nth-child(-n+1), .hw-meter[data-v="2"] i:nth-child(-n+2), .hw-meter[data-v="3"] i { background: var(--hw-ink-3); }
.hw-empty { display: grid; justify-items: center; padding: 38px 20px 34px; text-align: center; }
.hw-empty .icon { width: 28px; height: 28px; color: var(--hw-ink-4); stroke-width: 1.25; }
.hw-empty b { margin-top: 12px; color: var(--hw-ink); font-size: 15px; font-weight: 400; }
.hw-empty small { max-width: 360px; margin-top: 6px; color: var(--hw-ink-3); font-size: 13px; line-height: 1.5; }
.hw-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.hw-stat { padding: 12px 12px 13px; border: 1px solid var(--hw-line-2); border-radius: var(--r-2); background: var(--hw-panel-2); }
.hw-stat span { display: block; color: var(--hw-ink-4); font-size: 11px; line-height: 1.35; }
.hw-step .hw-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hw-stat b { display: block; margin-top: 8px; color: var(--hw-ink); font-size: 24px; font-weight: 300; line-height: 1; letter-spacing: -.02em; }
.hw-stat small { display: block; margin-top: 6px; color: var(--hw-ink-4); font-size: 11px; }
@media (prefers-reduced-motion: no-preference) { [data-hw-view]:not([hidden]) { animation: hw-in 320ms var(--ease-out); } }

/* FIND — the empty workspace, or the same queue laid out with example rows. */
[data-hw-state="empty"] .hw-only-example, [data-hw-state="example"] .hw-only-empty { display: none; }
.hw-find .hw-tr { --hw-cols: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }

/* MATCH — one unit on the left, past shoppers on the right; comparing lights the factors they share. */
.hw-match { display: grid; grid-template-columns: minmax(0, .9fr) 44px minmax(0, 1.1fr); align-items: stretch; }
.hw-card { padding: 14px; border: 1px solid var(--hw-line-2); border-radius: var(--r-2); background: var(--hw-panel-2); }
.hw-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--hw-ink-4); font: 400 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.hw-facts { display: grid; gap: 9px; margin-top: 14px; }
.hw-fact { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 10px; color: var(--hw-ink-4); font-size: 11.5px; }
.hw-wire { position: relative; }
.hw-wire::before { content: ""; position: absolute; top: 50%; left: 6px; right: 6px; height: 1px; background: var(--hw-line-2); }
.hw-wire::after { content: ""; position: absolute; top: 50%; left: 6px; right: 6px; height: 1px; background: var(--hw-ok); scale: 0 1; transform-origin: left; transition: scale 620ms var(--ease-in-out); }
.hw-leads { display: grid; gap: 8px; }
.hw-lead { display: grid; gap: 9px; padding: 11px 12px; border: 1px solid var(--hw-line-2); border-radius: var(--r-2); background: var(--hw-panel-2); transition: border-color 420ms var(--ease-out); }
.hw-lead-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--hw-ink-2); font-size: 12.5px; }
.hw-lead-chips { display: flex; flex-wrap: wrap; gap: 6px; }
[data-hw-state="matched"] .hw-wire::after { scale: 1 1; }
[data-hw-state="matched"] .hw-lead.is-fit { border-color: rgb(var(--hw-ok-rgb) / .4); }
[data-hw-state="matched"] .hw-chip.is-fit { border-style: solid; border-color: rgb(var(--hw-ok-rgb) / .45); background: rgb(var(--hw-ok-rgb) / .07); color: var(--hw-ok); }
[data-hw-state="matched"] .hw-lead:nth-child(2) .hw-chip.is-fit { transition-delay: 140ms; }
[data-hw-state="matched"] .hw-lead:nth-child(3) .hw-chip.is-fit { transition-delay: 280ms; }
.hw-match-score { color: var(--hw-ink-4); font-size: 11.5px; }
[data-hw-state="matched"] .hw-match-score { color: var(--hw-ink-2); }

/* PRIORITIZE — the same matches, ordered by the factor you pick. */
.hw-rank .hw-tr { --hw-cols: 18px minmax(0, 1fr) 48px 48px 92px 84px; }
.hw-legend { margin: 12px 4px 0; color: var(--hw-ink-4); font-size: 11.5px; line-height: 1.5; }
.hw-rank-n { color: var(--hw-ink-4); font: 400 10px/1 var(--mono); }
/* The rank numbers count the rows as they stand, so re-ordering renumbers them. */
.hw-rank [data-hw-rank] { display: grid; counter-reset: hw-rank; }
.hw-rank [data-hw-rank] > .hw-tr { counter-increment: hw-rank; }
.hw-rank-n::before { content: counter(hw-rank); }

/* ENGAGE — a drafted email that cannot leave until a person approves it. */
.hw-seq { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hw-seq-step { padding: 10px 12px; border: 1px solid var(--hw-line-2); border-radius: var(--r-2); background: var(--hw-panel-2); }
.hw-seq-step.is-on { border-color: #4a5052; }
.hw-seq-step b { display: block; color: var(--hw-ink-2); font-size: 12.5px; font-weight: 400; }
.hw-seq-step small { display: block; margin-top: 4px; color: var(--hw-ink-4); font-size: 11px; }
.hw-draft { margin-top: 14px; border: 1px solid var(--hw-line-2); border-radius: var(--r-2); background: var(--hw-panel-2); }
.hw-draft-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--hw-line); color: var(--hw-ink-4); font-size: 11.5px; }
.hw-draft-text { display: block; width: 100%; min-height: 128px; height: auto; padding: 12px; border: 0; border-radius: 0; background: none; color: var(--hw-ink-2); font: inherit; font-size: 13px; line-height: 1.6; resize: vertical; white-space: pre-line; }
.hw-draft-text:read-only { cursor: default; }
@supports (field-sizing: content) { .hw-draft-text { field-sizing: content; } }
@supports not (field-sizing: content) { @media (max-width: 767px) { .hw-draft-text { min-height: 236px; } } }
textarea.hw-draft-text:focus { outline: none; box-shadow: inset 0 0 0 1px var(--hw-line-3); }
.hw-consent { margin-top: 12px; color: var(--hw-ink-3); font-size: 12.5px; line-height: 1.45; }
.hw-gate { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border: 1px solid rgb(var(--warn-rgb) / .35); border-radius: var(--r-2); background: rgb(var(--warn-rgb) / .05); color: var(--hw-ink-2); font-size: 13px; line-height: 1.45;
  transition: border-color var(--dur-3) var(--ease-out), background-color var(--dur-3) var(--ease-out); }
.hw-gate .icon { flex: none; width: 18px; height: 18px; color: var(--warn); }
.hw-gate-ok, .hw-gate-skip { display: none; }
[data-hw-state="approved"] .hw-gate { border-color: rgb(var(--hw-ok-rgb) / .4); background: rgb(var(--hw-ok-rgb) / .06); }
[data-hw-state="approved"] .hw-gate .icon { color: var(--hw-ok); }
[data-hw-state="approved"] .hw-gate-wait, [data-hw-state="skipped"] .hw-gate-wait { display: none; }
[data-hw-state="approved"] .hw-gate-ok, [data-hw-state="skipped"] .hw-gate-skip { display: inline; }
[data-hw-state="skipped"] .hw-gate { border-color: var(--hw-line-2); background: none; }
[data-hw-state="skipped"] .hw-gate .icon { color: var(--hw-ink-4); }
[data-hw-state="skipped"] .hw-draft { opacity: .5; }
.hw-state-draft, .hw-state-edit, .hw-state-approved, .hw-state-skipped { display: none; }
[data-hw-state="draft"] .hw-state-draft, [data-hw-state="edit"] .hw-state-edit, [data-hw-state="approved"] .hw-state-approved, [data-hw-state="skipped"] .hw-state-skipped { display: inline-flex; }

/* RESPOND — staff record the reply and its outcome; interest moves the match up and pauses follow-up. */
.hw-reply { display: grid; gap: 12px; }
.hw-reply-box { padding: 12px; border: 1px solid var(--hw-line-2); border-radius: var(--r-2); background: var(--hw-panel-2); }
.hw-outcomes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hw-quote { height: auto; min-height: 34px; padding: 7px 12px; font: 400 13px/1.35 var(--font); letter-spacing: 0; text-transform: none; white-space: normal; text-align: left; }
.hw-effects { display: grid; gap: 8px; }
.hw-effect { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 0 12px; border: 1px solid var(--hw-line); border-radius: var(--r-2); color: var(--hw-ink-3); font-size: 12.5px; }
.hw-effect .hw-badge { flex: none; }
.hw-if-interested, .hw-if-neutral, .hw-if-not, .hw-if-none { display: none; }
[data-hw-state="none"] .hw-if-none, [data-hw-state="interested"] .hw-if-interested, [data-hw-state="neutral"] .hw-if-neutral, [data-hw-state="not"] .hw-if-not { display: inline-flex; }

/* HANDOFF — salesperson, appointment, notes, status. */
.hw-fields { display: grid; }
.hw-field { display: grid; grid-template-columns: 128px minmax(0, 1fr); align-items: center; gap: 14px; min-height: 52px; border-bottom: 1px solid var(--hw-line); }
.hw-field:last-child { border-bottom: 0; }
.hw-field > span { color: var(--hw-ink-4); font: 400 9.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.hw-field-v { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; color: var(--hw-ink-3); font-size: 13px; }
.hw-a-off, .hw-s-off { display: inline-flex; }
.hw-a-on, .hw-s-on { display: none; }
[data-state-assign="on"] .hw-a-off, [data-state-appt="on"] .hw-s-off { display: none; }
[data-state-assign="on"] .hw-a-on, [data-state-appt="on"] .hw-s-on { display: inline-flex; }
.hw-field-v > span { flex-wrap: wrap; gap: 6px; }

/* MEASURE — the attribution chain, lit through to the sale once it is marked sold. */
.hw-chain { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.hw-chain li { position: relative; display: grid; justify-items: center; gap: 9px; padding: 4px 4px 0; color: var(--hw-ink-4); font-size: 11px; text-align: center; }
.hw-chain li::before { content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 1px; background: var(--hw-line-2); }
.hw-chain li:first-child::before { display: none; }
.hw-chain i { position: relative; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #3c4244; border-radius: 50%; background: var(--hw-panel); }
.hw-chain i .icon { width: 12px; height: 12px; }
[data-hw-state="sold"] .hw-chain li { color: var(--hw-ink-2); }
[data-hw-state="sold"] .hw-chain li::before { background: var(--hw-ok); }
[data-hw-state="sold"] .hw-chain i { border-color: var(--hw-ok); color: var(--hw-ok); }
@media (prefers-reduced-motion: no-preference) {
  .hw-chain li::before, .hw-chain i, .hw-chain li { transition: background-color 320ms var(--ease-out), border-color 320ms var(--ease-out), color 320ms var(--ease-out); }
  [data-hw-state="sold"] .hw-chain li:nth-child(2)::before, [data-hw-state="sold"] .hw-chain li:nth-child(2) i { transition-delay: 90ms; }
  [data-hw-state="sold"] .hw-chain li:nth-child(3)::before, [data-hw-state="sold"] .hw-chain li:nth-child(3) i { transition-delay: 180ms; }
  [data-hw-state="sold"] .hw-chain li:nth-child(4)::before, [data-hw-state="sold"] .hw-chain li:nth-child(4) i { transition-delay: 270ms; }
  [data-hw-state="sold"] .hw-chain li:nth-child(5)::before, [data-hw-state="sold"] .hw-chain li:nth-child(5) i { transition-delay: 360ms; }
  [data-hw-state="sold"] .hw-chain li:nth-child(6)::before, [data-hw-state="sold"] .hw-chain li:nth-child(6) i { transition-delay: 450ms; }
}
.hw-totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.hw-if-sold { display: none; }
[data-hw-state="sold"] .hw-if-sold { display: inline-flex; }
[data-hw-state="sold"] .hw-if-open { display: none; }

/* ── 03 Before / after ── */
.hw-compare { margin-top: 56px; }
.hw-switch { display: inline-flex; padding: 3px; border: 1px solid var(--hw-line-2); border-radius: var(--r-2); }
.hw-switch button { height: 38px; padding: 0 18px; border: 0; border-radius: 2px; background: none; color: var(--hw-ink-4); font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.hw-switch button:hover { color: var(--hw-ink-2); }
.hw-switch button[aria-pressed="true"] { background: #161b1d; color: var(--hw-ink); }
.hw-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 22px; border: 1px solid var(--hw-line-2); border-radius: var(--r-2); }
.hw-side { padding: 30px 32px 34px; transition: opacity 420ms var(--ease-out), background-color 420ms var(--ease-out); }
.hw-side + .hw-side { border-left: 1px solid var(--hw-line-2); }
.hw-side h3 { display: flex; align-items: center; gap: 12px; color: var(--hw-ink); font-size: 21px; font-weight: 400; }
.hw-side h3 .icon { width: 18px; height: 18px; }
.hw-side ol { display: grid; gap: 0; margin: 22px 0 0; padding: 0; list-style: none; counter-reset: hw-side; }
.hw-side li { position: relative; display: grid; grid-template-columns: 32px 1fr; align-items: center; min-height: 56px; border-top: 1px solid var(--hw-line); color: var(--hw-ink-2); font-size: 16px; counter-increment: hw-side; }
.hw-side li::before { content: counter(hw-side, decimal-leading-zero); color: var(--hw-ink-4); font: 400 10px/1 var(--mono); }
.hw-side-without h3 .icon { color: var(--hw-ink-4); }
.hw-side-with h3 .icon { color: var(--hw-ok); }
.hw-side-with li::after { content: ""; position: absolute; left: -32px; top: 50%; width: 3px; height: 3px; }
.hw-compare[data-side="without"] .hw-side-with, .hw-compare[data-side="with"] .hw-side-without { opacity: .38; }
.hw-compare[data-side="with"] .hw-side-with { background: rgb(var(--hw-ok-rgb) / .025); }
.hw-compare[data-side="with"] .hw-side-with li { color: var(--hw-ink); }
@media (prefers-reduced-motion: no-preference) {
  .hw-compare[data-side="with"] .hw-side-with li, .hw-compare[data-side="without"] .hw-side-without li { animation: hw-in 520ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); }
}
.hw-compare-note { margin-top: 16px; color: var(--hw-ink-4); font-size: 13px; line-height: 1.5; }

/* ── 04 Product explorer ── */
.hw-explorer { margin-top: 56px; }
.hw-tabs { display: flex; gap: 0; overflow-x: auto; border-bottom: 1px solid var(--hw-line-2); scrollbar-width: none; }
.hw-tabs::-webkit-scrollbar { display: none; }
.hw-tab { position: relative; flex: none; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px; border: 0; background: none; color: var(--hw-ink-4);
  font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: color var(--dur-2) var(--ease-out); }
.hw-tab .icon { width: 15px; height: 15px; stroke-width: 1.6; }
.hw-tab::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 1px; background: var(--hw-accent); scale: 0 1; transition: scale 360ms var(--ease-out); }
.hw-tab:hover { color: var(--hw-ink-2); }
.hw-tab[aria-selected="true"] { color: var(--hw-ink); }
.hw-tab[aria-selected="true"]::after { scale: 1 1; }
.hw-tab:focus-visible { outline: 1.5px solid var(--hw-accent); outline-offset: -4px; }
.hw-xp { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; padding-top: 34px; }
@media (prefers-reduced-motion: no-preference) { .hw-xp:not([hidden]) { animation: hw-in 360ms var(--ease-out); } }
.hw-xp-notes { display: grid; align-content: start; gap: 0; }
.hw-note-block { padding: 18px 0; border-top: 1px solid var(--hw-line); }
.hw-note-block:first-child { padding-top: 4px; border-top: 0; }
.hw-note-block h4 { color: var(--hw-ink-4); font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.hw-note-block p { margin-top: 10px; color: var(--hw-ink-2); font-size: 15px; line-height: 1.55; }
.hw-xp .hw-ui-body { display: grid; gap: 14px; }
.hw-xp .hw-th { border-top: 1px solid var(--hw-line); }

/* ── 05 What LotRevive is not ── */
.hw-not-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 52px 0 0; padding: 0; list-style: none; border: 1px solid var(--hw-line-2); border-radius: var(--r-2); }
.hw-not-card { padding: 26px 24px 28px; }
.hw-not-card + .hw-not-card { border-left: 1px solid var(--hw-line-2); }
.hw-not-card .icon { width: 20px; height: 20px; color: var(--hw-ink-4); stroke-width: 1.5; }
.hw-not-card h3 { margin-top: 20px; color: var(--hw-ink); font-size: 17px; font-weight: 400; line-height: 1.3; }
.hw-not-card p { margin-top: 10px; color: var(--hw-ink-3); font-size: 14px; line-height: 1.55; }
.hw-statement { position: relative; max-width: 980px; margin-top: 56px; padding: 6px 0 6px 30px; color: var(--hw-ink); font-size: clamp(24px, 2.4vw, 33px); font-weight: 400; line-height: 1.32; letter-spacing: .005em; text-wrap: balance; }
.hw-statement::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; background: var(--hw-ok); }

/* ── 06 Data flow ── */
.hw-data { --hw-at: 0; margin-top: 56px; }
.hw-diagram { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, .9fr) 56px minmax(0, 1.25fr); align-items: center; }
.hw-lane { display: grid; gap: 10px; }
.hw-lane-h { margin-bottom: 4px; color: var(--hw-ink-4); }
.hw-node { position: relative; display: grid; gap: 6px; width: 100%; padding: 13px 14px; border: 1px solid var(--hw-line-2); border-radius: var(--r-2); background: var(--hw-panel); color: var(--hw-ink-2);
  font: inherit; text-align: left; cursor: pointer; transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.hw-node:hover { border-color: var(--hw-line-3); color: var(--hw-ink); }
.hw-node[aria-selected="true"] { border-color: var(--hw-accent); background: #0e1214; color: var(--hw-ink); }
.hw-node:focus-visible { outline: 1.5px solid var(--hw-accent); outline-offset: 2px; }
.hw-node-k { color: var(--hw-ink-4); font: 400 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.hw-node-name { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.hw-node-name .icon { flex: none; width: 16px; height: 16px; color: var(--hw-ink-3); stroke-width: 1.6; }
.hw-core { min-height: 168px; align-content: center; justify-items: center; text-align: center; border-color: #3a4042; }
.hw-core .brand-mark { width: 26px; height: auto; opacity: .9; }
.hw-core .hw-node-name { justify-content: center; font-size: 16px; }
/* Connectors: a hairline per gap, with a light that runs along it on a loop (still for reduced motion). */
.hw-pipe { position: relative; align-self: stretch; }
.hw-pipe::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--hw-line-3); }
.hw-pipe::after { content: ""; position: absolute; top: calc(50% - 3px); right: 0; width: 6px; height: 6px; border-top: 1px solid var(--hw-line-3); border-right: 1px solid var(--hw-line-3); rotate: 45deg; }
.hw-pipe i { position: absolute; top: 50%; left: 0; width: 18px; height: 1px; background: linear-gradient(90deg, transparent, var(--hw-accent)); opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .hw-pipe i { animation: hw-run 2.4s linear infinite; } .hw-pipe + .hw-lane + .hw-pipe i { animation-delay: 1.2s; } }
@keyframes hw-run { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 18px); opacity: 0; } }
.hw-steps-lane { position: relative; gap: 0; }
.hw-steps-lane .hw-node { border-radius: 0; }
.hw-steps-lane .hw-node + .hw-node { margin-top: -1px; }
.hw-steps-lane .hw-node:first-of-type { border-radius: var(--r-2) var(--r-2) 0 0; }
.hw-steps-lane .hw-node:last-of-type { border-radius: 0 0 var(--r-2) var(--r-2); }
.hw-steps-lane .hw-node[aria-selected="true"] { z-index: 1; }
.hw-node-panel { margin-top: 22px; padding: 22px 24px; border: 1px solid var(--hw-line-2); border-radius: var(--r-2); background: var(--hw-panel); }
@media (prefers-reduced-motion: no-preference) { .hw-node-panel:not([hidden]) { animation: hw-in 320ms var(--ease-out); } }
.hw-node-panel-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.hw-node-panel h4 { color: var(--hw-ink-4); font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.hw-node-panel p { margin-top: 10px; color: var(--hw-ink-2); font-size: 15px; line-height: 1.55; }
.hw-node-panel .hw-badge { margin-top: 12px; }

/* ── 07 Final CTA ── */
.hw-final { padding: 120px 0 128px; }
.hw-final .hw-h2 { max-width: 14em; font-size: clamp(34px, 3.8vw, 54px); }
.hw-final .hw-lede { max-width: 620px; }
.hw-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--hw-line); color: var(--hw-ink-3); font-size: 15px; }
.hw-price strong { color: var(--hw-ink); font-size: 17px; font-weight: 500; }

@keyframes hw-in { from { opacity: 0; translate: 0 8px; } }

/* ── Responsive ── */
@media (max-width: 1199px) {
  .hw-rec-grid { grid-template-columns: 224px minmax(0, 1fr); gap: 48px; }
  .hw-step { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .hw-stage { padding: 16px 12px 14px; }
  .hw-stage-name { font-size: 10.5px; letter-spacing: .08em; }
}
@media (max-width: 1023px) {
  .hw-sec { padding: 88px 0 96px; }
  /* Tablet and phone: the workflow becomes a stacked list beside its rail; the recovery rail gives way to the steps. */
  .hw-flow { margin-top: 56px; }
  .hw-stages { grid-template-columns: minmax(0, 1fr); }
  .hw-stages::before, .hw-stages::after { top: 0; left: 21px; right: auto; width: 1px; }
  .hw-stages::before { bottom: 0; height: auto; }
  .hw-stages::after { height: calc((var(--hw-at) + .5) / var(--hw-n) * 100%); transition: height 520ms var(--ease-out); }
  .hw-stage { grid-template-columns: auto 1fr; align-items: center; column-gap: 16px; min-height: 56px; padding: 12px 16px 12px 40px; border-left: 0; border-top: 1px solid var(--hw-line); }
  .hw-stage:first-child { border-top: 0; }
  .hw-stage::before { top: 50%; left: 18px; margin: -3.5px 0 0; }
  .hw-stage-top { gap: 14px; }
  .hw-stage .icon { display: none; }
  .hw-stage-name { font-size: 11.5px; }
  .hw-stage-panel { border-top: 1px solid var(--hw-line-2); border-radius: var(--r-2); margin-top: 12px; }
  .hw-col { padding: 22px 22px 24px; }
  .hw-rec-grid { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .hw-rail { display: none; }
  .hw-step { padding: 44px 0; }
  .hw-xp { grid-template-columns: minmax(0, 1fr); }
  /* Product explorer: all six screens in view as a grid (3×2 here, 2×3 on phones) instead of a strip that scrolls sideways. */
  .hw-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; border: 1px solid var(--hw-line-2); border-radius: var(--r-2); }
  .hw-tab { height: auto; min-height: 48px; padding: 10px 14px; white-space: normal; line-height: 1.35; text-align: left; }
  .hw-tab:nth-child(n+4) { border-top: 1px solid var(--hw-line); }
  .hw-tab:not(:nth-child(3n+1)) { border-left: 1px solid var(--hw-line); }
  .hw-tab .icon { flex: none; }
  .hw-tab::after { top: 10px; bottom: 10px; left: -1px; right: auto; width: 1px; height: auto; scale: 1 0; }
  .hw-tab[aria-selected="true"] { background: #0e1214; }
  .hw-tab[aria-selected="true"]::after { scale: 1 1; }
  .hw-not-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hw-not-card:nth-child(3) { border-left: 0; }
  .hw-not-card:nth-child(n+3) { border-top: 1px solid var(--hw-line-2); }
  .hw-diagram { grid-template-columns: minmax(0, 1fr); }
  .hw-pipe { height: 40px; }
  .hw-pipe::before { top: 0; bottom: 0; left: 50%; right: auto; width: 1px; height: auto; }
  .hw-pipe::after { top: auto; bottom: 1px; right: auto; left: calc(50% - 3px); rotate: 135deg; }
  .hw-pipe i { top: 0; left: 50%; width: 1px; height: 14px; background: linear-gradient(transparent, var(--hw-accent)); }
  @media (prefers-reduced-motion: no-preference) { .hw-pipe i { animation-name: hw-run-y; } }
  .hw-core { min-height: 120px; }
}
@keyframes hw-run-y { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 14px); opacity: 0; } }
@media (max-width: 767px) {
  .hw-hero { padding: 72px 0 72px; }
  .hw-stage-cols { grid-template-columns: minmax(0, 1fr); }
  .hw-col { padding: 20px 20px 22px; border-left: 0; border-top: 1px solid var(--hw-line); }
  .hw-col:first-child { border-top: 0; }
  .hw-stage-foot { flex-wrap: wrap; padding: 14px 20px; }
  .hw-hero-lede { font-size: 17.5px; }
  .hw-ctas .lp-cta, .hw-cta-2 { width: 100%; min-width: 0; }
  .hw-sides { grid-template-columns: minmax(0, 1fr); }
  .hw-side + .hw-side { border-left: 0; border-top: 1px solid var(--hw-line-2); }
  /* Phones show the side that is switched on. */
  .hw-compare[data-side="without"] .hw-side-with, .hw-compare[data-side="with"] .hw-side-without { display: none; }
  .hw-switch { display: flex; }
  .hw-switch button { flex: 1; padding: 0 10px; }
  .hw-side { padding: 22px 20px 24px; }
  .hw-match { grid-template-columns: minmax(0, 1fr); }
  .hw-wire { height: 28px; }
  .hw-wire::before, .hw-wire::after { top: 4px; bottom: 4px; left: 50%; right: auto; width: 1px; height: auto; }
  .hw-wire::after { transform-origin: top; scale: 1 0; }
  [data-hw-state="matched"] .hw-wire::after { scale: 1 1; }
  /* Ranked matches: name and tier on top, the fit and budget meters under the name, a recorded reply below that. */
  .hw-rank .hw-th { display: none; }
  .hw-rank .hw-tr { grid-template-columns: 14px auto minmax(0, 1fr) auto; gap: 8px 12px; padding: 12px 2px; }
  .hw-rank .hw-tr > :nth-child(1) { grid-area: 1 / 1; align-self: start; padding-top: 3px; }
  .hw-rank .hw-tr > :nth-child(2) { grid-area: 1 / 2 / 2 / 4; }
  .hw-rank .hw-tr > :nth-child(6) { grid-area: 1 / 4; align-self: start; }
  .hw-rank .hw-tr > :nth-child(3) { grid-area: 2 / 2; }
  .hw-rank .hw-tr > :nth-child(4) { grid-area: 2 / 3 / 3 / 5; }
  .hw-rank .hw-tr > :nth-child(5) { grid-area: 3 / 2 / 4 / 5; }
  .hw-rank .hw-tr > :nth-child(5):has(> small) { display: none; }
  .hw-rank .hw-tr > :nth-child(3)::before { content: "Fit"; }
  .hw-rank .hw-tr > :nth-child(4)::before { content: "Budget"; }
  .hw-rank .hw-tr > :is(:nth-child(3), :nth-child(4))::before { margin-right: 8px; color: var(--hw-ink-4); font: 400 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
  /* Panel bars: the title on its own line, the view switch or example note under it. */
  .hw-ui-bar { flex-wrap: wrap; gap: 10px; }
  .hw-ui-bar > :not(.hw-ui-title) { flex: 1 1 100%; }
  .hw-seg { display: flex; }
  .hw-seg button { flex: 1 1 auto; padding: 0 7px; letter-spacing: .06em; }
  .hw-card-h { flex-wrap: wrap; row-gap: 6px; }
  .hw-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hw-seq { grid-template-columns: minmax(0, 1fr); }
  .hw-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hw-field { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 0; }
  .hw-chain { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }
  .hw-chain li:nth-child(4)::before { display: none; }
  .hw-not-grid { grid-template-columns: minmax(0, 1fr); }
  .hw-not-card + .hw-not-card { border-left: 0; border-top: 1px solid var(--hw-line-2); }
  .hw-node-panel-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .hw-find .hw-tr { --hw-cols: minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, 1fr); }
  .hw-find .hw-tr > :nth-child(3) { display: none; }
  .hw-totals { grid-template-columns: minmax(0, 1fr); }
  .hw-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hw-tab:nth-child(n) { border-top: 0; border-left: 0; }
  .hw-tab:nth-child(n+3) { border-top: 1px solid var(--hw-line); }
  .hw-tab:nth-child(even) { border-left: 1px solid var(--hw-line); }
}
@media (prefers-reduced-motion: reduce) {
  .hw-stages::after, .hw-rail ol::after, .hw-wire::after, .hw-side, .hw-tab::after { transition: none; }
}