/* MD chat animation styles — scoped under .hw-mech.
   Source: _REFERENCE/MD_REFERENCE/public/styles.css (lines 935-end), namespaced.
   Do not edit selectors directly; re-run scripts/extract-mech-css if MD updates. */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap");

.hw-mech {
  --bg:           oklch(0.985 0.005 75);
  --bg-elev:      oklch(0.975 0.005 75);
  --card:         oklch(0.995 0.003 75);
  --border:       oklch(0.91 0.006 75);
  --border-strong: oklch(0.82 0.01 75);
  --ink:          oklch(0.20 0.02 260);
  --ink-2:        oklch(0.42 0.015 260);
  --ink-3:        oklch(0.58 0.01 260);
  --critical:     oklch(0.55 0.20 25);

  --staff:        oklch(0.60 0.15 50);
  --director:     oklch(0.42 0.14 250);
  --doctor:       oklch(0.48 0.09 185);

  --font:         "Geist", ui-sans-serif, system-ui, sans-serif;
  --mono:         "Geist Mono", ui-monospace, monospace;

  --radius:       10px;
  --radius-sm:    6px;
  --radius-lg:    14px;

  /* default accent — overridden per-slot below */
  --accent:       oklch(0.48 0.09 185);
  --accent-soft:  oklch(0.94 0.025 185);
  --accent-fg:    oklch(0.28 0.08 185);

  font-family: var(--font);
  color: var(--ink);
}

/* per-slot accent variants */
.hw-mech[data-product="md"]  { --accent: oklch(0.55 0.13 145); --accent-soft: oklch(0.94 0.04 145); --accent-fg: oklch(0.30 0.10 145); }
.hw-mech[data-product="biz"] { --accent: oklch(0.65 0.16 60);  --accent-soft: oklch(0.95 0.05 60);  --accent-fg: oklch(0.35 0.12 60); }
.hw-mech[data-product="edu"] { --accent: oklch(0.42 0.14 250); --accent-soft: oklch(0.94 0.03 250); --accent-fg: oklch(0.25 0.10 250); }

.hw-mech .ehr-chat {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 0;
  min-height: 0;
  position: relative; /* cursor sprite positions against this wrapper now */
}

/* ─── EHR records mock ─── */
.hw-mech .ehrx {
  background: var(--card);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 14px 38px oklch(0.20 0.02 260 / 0.07);
  font-size: 13px;
  /* Bias upper data panel taller than chat: 55/45 split when space is
     plentiful, but never shorter than 320px so EHR/project/student
     rows always render w/ enough lines to read on mid-size viewports
     (e.g. Galaxy Z Fold unfolded). */
  flex: 1.2 1 0;
  min-height: 320px;
  display: flex;
  flex-direction: column;
}

.hw-mech .ehrx-banner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  background: linear-gradient(180deg, oklch(0.97 0.005 260), oklch(0.95 0.008 260));
  border-bottom: 1px solid var(--border);
}
.hw-mech .ehrx-banner-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hw-mech .ehrx-bed {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 30px;
  background: oklch(0.20 0.02 260);
  color: white;
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.hw-mech .ehrx-id { display: flex; flex-direction: column; min-width: 0; }
.hw-mech .ehrx-name {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.hw-mech .ehrx-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  display: flex; gap: 6px; align-items: center;
  letter-spacing: 0.04em;
}
.hw-mech .ehrx-meta .dot { color: oklch(0.75 0.005 260); }
.hw-mech .ehrx-meta .allergy { color: var(--ink-2); }

.hw-mech .ehrx-banner-r { display: flex; gap: 6px; }
.hw-mech .ehrx-chip {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink-2);
}
.hw-mech .ehrx-chip.status { color: oklch(0.45 0.13 145); border-color: oklch(0.85 0.07 145); background: oklch(0.97 0.03 145); }
.hw-mech .ehrx-chip.code { color: var(--critical); border-color: oklch(0.88 0.07 25); background: oklch(0.98 0.02 25); }

.hw-mech .ehrx-tabs {
  display: flex; align-items: stretch;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  padding: 0 8px;
  position: relative;
}
.hw-mech .ehrx-tab {
  font: inherit;
  background: transparent; border: 0;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
  cursor: pointer;
  position: relative;
  letter-spacing: 0.01em;
}
.hw-mech .ehrx-tab.active {
  color: var(--ink);
}
.hw-mech .ehrx-tab.active::after {
  content: ""; position: absolute; left: 6px; right: 6px; bottom: -1px;
  height: 2px; background: var(--accent);
  border-radius: 2px 2px 0 0;
}
.hw-mech .ehrx-tabs-right { margin-left: auto; display: flex; gap: 8px; align-items: center; padding-right: 4px; }
.hw-mech .ehrx-filter {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--card);
}

.hw-mech .ehrx-source-head {
  padding: 8px 14px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hw-mech .ehrx-rows-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.hw-mech .ehrx-rows {
  padding: 4px 0 4px;
  height: 100%;
  overflow: hidden;
  position: relative;
  transition: opacity 0.25s, transform 0.25s;
}
.hw-mech .ehrx-rows[aria-hidden="true"] {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}
.hw-mech .ehrx-rows::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 40px;
  background: linear-gradient(to bottom, transparent, var(--card));
  pointer-events: none;
}

.hw-mech .ehrx-row {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: start;
  padding: 7px 12px 7px 10px;
  border-bottom: 1px dashed oklch(0.92 0.005 75);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-2);
  transition: background-color 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.hw-mech .ehrx-row:last-child { border-bottom: 0; }
.hw-mech .ehrx-row-i {
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 5px;
  text-align: center;
  width: fit-content;
}
.hw-mech .ehrx-row-body {
  white-space: pre-wrap; word-break: break-word;
}
.ehrx-row.active,
.hw-mech .ehrx-row.flash {
  background: oklch(from var(--accent) l c h / 0.12);
  box-shadow: inset 3px 0 0 var(--accent);
  border-bottom-color: oklch(from var(--accent) l c h / 0.2);
  color: var(--ink);
}
.ehrx-row.active .ehrx-row-i,
.hw-mech .ehrx-row.flash .ehrx-row-i {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.hw-mech .ehrx-row.flash {
  animation: rowflash 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes rowflash {
  0%   { background: oklch(from var(--accent) l c h / 0.30); }
  100% { background: oklch(from var(--accent) l c h / 0.12); }
}

/* EHR detail overlay — appears when a citation chip is clicked. */
.hw-mech .ehrx-detail {
  position: absolute;
  inset: 0;
  background: var(--card);
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 2;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.28s, transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hw-mech .ehrx-detail.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.hw-mech .ehrx-detail-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.hw-mech .ehrx-detail-num {
  font-weight: 600;
  color: var(--accent-fg);
}
.hw-mech .ehrx-detail-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  background: var(--accent-soft);
  color: var(--accent-fg);
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid oklch(from var(--accent) l c h / 0.22);
}
.hw-mech .ehrx-detail-head {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-transform: uppercase;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.hw-mech .ehrx-detail-body {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink);
  flex: 1 1 auto;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  padding-right: 4px;
}
.hw-mech .ehrx-detail-body::-webkit-scrollbar { width: 6px; }
.hw-mech .ehrx-detail-body::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
}
.hw-mech .ehrx-detail-foot {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  padding: 5px 10px 5px 4px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid oklch(from var(--accent) l c h / 0.25);
  color: var(--accent-fg);
  font-family: var(--mono);
  font-size: 11px;
}

.hw-mech .ehrx-breadcrumb {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hw-mech .ehrx-breadcrumb strong { color: var(--accent-fg); }
.hw-mech .ehrx-back-icon { color: var(--accent); }

/* ─── Chat box ─── */
.hw-mech .chatx {
  position: relative;
  background: var(--card);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 14px 38px oklch(0.20 0.02 260 / 0.07);
  /* Chat panel: needs room for header (~40), question bubble, answer
     (lead + numbered points + citations), and input row (~52). Cursor
     animation timing assumes ~290px+ usable height for the body. */
  flex: 1 1 0;
  min-height: 300px;
}

.hw-mech .chatx-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
}
.hw-mech .chatx-logo {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: 12.5px;
  min-width: 0;
}
.hw-mech .chatx-logo-brand { font-weight: 600; flex-shrink: 0; }
.hw-mech .chatx-logo-sep { color: var(--ink-3); }
.hw-mech .chatx-logo-patient {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.hw-mech .chatx-logo-mark {
  width: 14px; height: 14px; border-radius: 3px;
  background: var(--accent);
  position: relative;
}
.hw-mech .chatx-logo-mark::after {
  content: ""; position: absolute; inset: 3px;
  border-radius: 1px; background: var(--card);
}
.hw-mech .chatx-state {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hw-mech .chatx-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: oklch(0.65 0.13 145);
}
.hw-mech .chatx.phase-thinking .chatx-dot {
  background: oklch(0.65 0.13 80);
  animation: pulse 1.4s infinite;
}
.hw-mech .chatx.phase-streaming .chatx-dot {
  background: var(--accent);
  animation: pulse 1.2s infinite;
}

.hw-mech .chatx-body {
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  /* anchor messages to the bottom so they hug the input bar even when the
     chat panel is stretched to fill a tall hero column */
  justify-content: flex-end;
}

.hw-mech .chatx-q {
  align-self: flex-end;
  max-width: 90%;
  background: oklch(0.96 0.005 75);
  border: 1.5px solid var(--border-strong);
  border-radius: 12px 12px 4px 12px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--ink);
  animation: bubblein 0.25s ease both;
}

.hw-mech .chatx-a {
  align-self: flex-start;
  max-width: 100%;
  background: oklch(from var(--accent) l c h / 0.07);
  border: 1.5px solid oklch(from var(--accent) l c h / 0.30);
  border-radius: 12px 12px 12px 4px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
  animation: bubblein 0.3s ease both;
}
.hw-mech .chatx-a.thinking {
  padding: 14px 16px;
}

.hw-mech .chatx-dots {
  display: inline-flex; gap: 4px; align-items: center;
}
.hw-mech .chatx-dots span {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--accent);
  opacity: 0.4;
  animation: thinkdot 1s infinite ease-in-out;
}
.hw-mech .chatx-dots span:nth-child(2) { animation-delay: 0.15s; }
.hw-mech .chatx-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes thinkdot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.hw-mech .chatx-lead { margin-bottom: 8px; }

.hw-mech .chatx-points {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.hw-mech .chatx-point {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  align-items: start;
  padding: 4px 6px 4px 4px;
  border-radius: 6px;
  margin: 0 -6px 0 -4px;
  transition: background-color 0.25s;
}
.hw-mech .chatx-point.hot {
  background: oklch(from var(--accent) l c h / 0.10);
}
.hw-mech .chatx-bullet {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 999px;
  background: oklch(from var(--accent) l c h / 0.15);
  color: var(--accent-fg);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  margin-top: 2px;
}
.hw-mech .chatx-point.hot .chatx-bullet {
  background: var(--accent);
  color: white;
}
.hw-mech .chatx-pt-text { display: inline; }

.hw-mech .chatx-cite {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--accent-fg);
  background: var(--accent-soft);
  border: 1px solid oklch(from var(--accent) l c h / 0.22);
  border-radius: 999px;
  padding: 1px 7px 1px 4px;
  margin-left: 5px;
  vertical-align: 2px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.hw-mech .chatx-cite.popin {
  animation: citepop 0.4s cubic-bezier(0.2, 1.2, 0.4, 1) both;
}
.hw-mech .chatx-cite.on {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px oklch(from var(--accent) l c h / 0.30);
}

@keyframes citepop {
  0%   { opacity: 0; transform: translateY(2px) scale(0.7); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.08); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* streaming caret — sits at the streaming edge while a section is being
   produced, blinks softly. */
.hw-mech .stream-caret {
  display: inline-block;
  width: 0.5ch;
  margin-left: 1px;
  color: var(--accent);
  font-weight: 600;
  transform: translateY(0);
  animation: caretblink 1s steps(1, end) infinite;
  vertical-align: baseline;
}
@keyframes caretblink {
  0%, 50%   { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
.hw-mech .chatx-cite-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  border-radius: 999px;
  background: var(--accent);
  color: white;
  font-size: 9.5px;
  font-weight: 600;
}

.hw-mech .chatx-outro {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--ink-2);
}

/* input bar — now wraps a pasted-context block (when present) on top of the
   input row, and uses a fake field (div) instead of a real input so we can
   render a blinking caret at the end of the typed text. */
.hw-mech .chatx-input {
  position: relative;
  display: flex; flex-direction: column;
  padding: 10px 10px 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  gap: 8px;
}

.hw-mech .chatx-input-row {
  display: flex; align-items: flex-end; gap: 8px;
  min-width: 0;
}

/* The fake field renders as a block of wrappable text so the message can
   grow across multiple lines like a real chat composer. The send button on
   the right column aligns to the bottom (flex-end on the row) so it stays
   pinned to the last line when the field grows. */
.hw-mech .chatx-field {
  flex: 1; min-width: 0;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  padding: 6px 0;
  line-height: 1.45;
  word-break: break-word;
  white-space: normal;
  cursor: text;
  background: transparent;
  border: 0; outline: 0;
  max-height: 6.5em; /* ~4 lines before scrolling, like ChatGPT */
  overflow-y: auto;
}
.hw-mech .chatx-field-text { display: inline; white-space: normal; }
.hw-mech .chatx-field-placeholder { color: var(--ink-3); }

/* Fake caret that we toggle via the `on` modifier. The blinking animation
   only runs while `.on` is applied so the caret is fully hidden (no flash,
   no ghost) whenever the input is not "focused". */
.hw-mech .chatx-field-caret {
  display: inline-block;
  width: 0;
  margin-left: 1px;
  color: var(--accent);
  font-weight: 400;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
}
.hw-mech .chatx-field-caret.on {
  opacity: 1;
  width: 0.5ch;
  animation: caretblink 1s steps(1, end) infinite;
}

.hw-mech .chatx-send {
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--ink-3);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, transform 0.1s, box-shadow 0.15s;
  flex-shrink: 0;
}
.hw-mech .chatx-send.hover {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  box-shadow: 0 4px 14px oklch(from var(--accent) l c h / 0.32);
}
.hw-mech .chatx-send.pressed { transform: scale(0.92); }

/* Pasted-context block (above the input row, after a paste action) */
.hw-mech .chatx-pasted {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: start;
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  animation: pastein 0.28s ease both;
  min-width: 0;
}
.hw-mech .chatx-pasted-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-fg);
  background: var(--accent-soft);
  border: 1px solid oklch(from var(--accent) l c h / 0.22);
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  white-space: nowrap;
}
.hw-mech .chatx-pasted-text {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
@keyframes pastein {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Follow-up user bubble — same look as the first Q bubble, plus an inline
   quote block containing the pasted note text. */
.hw-mech .chatx-q-followup {
  margin-top: 4px;
}
.hw-mech .chatx-q-quote {
  margin-top: 8px;
  padding: 8px 10px;
  border-left: 3px solid var(--accent);
  background: oklch(from var(--accent) l c h / 0.06);
  border-radius: 0 6px 6px 0;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-2);
  line-height: 1.45;
  white-space: pre-wrap;
  display: flex; flex-direction: column; gap: 4px;
}
.hw-mech .chatx-q-quote-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-fg);
}

/* EHR text selection — highlights the Plan paragraph when the cursor "selects" it */
.hw-mech .ehrx-selection {
  border-radius: 3px;
  padding: 0 2px;
  transition: background-color 0.28s ease, color 0.28s ease;
}
.hw-mech .ehrx-selection.on {
  background: oklch(from var(--accent) l c h / 0.30);
  color: var(--ink);
  box-shadow: 0 0 0 1px oklch(from var(--accent) l c h / 0.35);
}

/* Copy chip — flashes near the selection after the "copy" action */
.hw-mech .copy-chip {
  position: absolute;
  transform: translate(-50%, -100%);
  pointer-events: none;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--accent);
  color: white;
  padding: 5px 10px;
  border-radius: 999px;
  box-shadow: 0 6px 18px oklch(from var(--accent) l c h / 0.35);
  opacity: 0;
  animation: copychipin 0.65s ease both;
  z-index: 7;
}
.hw-mech .copy-chip::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -4px;
  transform: translateX(-50%) rotate(45deg);
  width: 8px; height: 8px;
  background: var(--accent);
}
@keyframes copychipin {
  0%   { opacity: 0; transform: translate(-50%, -90%) scale(0.85); }
  20%  { opacity: 1; transform: translate(-50%, -110%) scale(1); }
  100% { opacity: 1; transform: translate(-50%, -100%) scale(1); }
}

/* Text overlay covering the ENTIRE animation card (label bar + inner pad
   + chat content). Uses negative outset to break past .ehr-chat's bounds
   and reach the card edge. Tuned to match .mech-slot-inner padding +
   .mech-slot-label height so it always lines up exactly with the rounded
   card edges. `state-` is one of: off | in | text | out. */
.hw-mech .ehr-chat-overlay {
  position: absolute;
  /* break out of .ehr-chat to cover the full card. Overshoot by a few
     px so the slot's 1px border + label's 1px bottom-border don't
     leave a hairline of card content visible at overlay peak. The
     slot's overflow:hidden clips the overshoot to the rounded edge. */
  top: calc(-1 * (39px + 1rem + 4px));
  right: calc(-1.1rem - 4px);
  bottom: calc(-1.1rem - 4px);
  left: calc(-1.1rem - 4px);
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 2.6s cubic-bezier(0.4, 0.0, 0.2, 1);
  z-index: 8;
  /* inherit the slot's rounded corners */
  border-radius: 32px;
  /* contain via clip-path so corners stay sharp w/ inherited radius */
  overflow: hidden;
}
.ehr-chat-overlay.state-in,
.hw-mech .ehr-chat-overlay.state-text { opacity: 1; }
.hw-mech .ehr-chat-overlay.state-out { opacity: 0; }

.hw-mech .ehr-chat-overlay-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05em;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-align: center;
  text-wrap: balance;
  padding: 0 16px;
}
.hw-mech .ehr-chat-overlay-text .line {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.9s cubic-bezier(0.4, 0.0, 0.2, 1),
              transform 0.9s cubic-bezier(0.4, 0.0, 0.2, 1);
}
/* The accent ("To Understanding.") fades in after the lead line for drama */
.hw-mech .ehr-chat-overlay-text .line-2 {
  transition-delay: 1.05s;
}
.hw-mech .ehr-chat-overlay.state-text .ehr-chat-overlay-text .line {
  opacity: 1;
  transform: translateY(0);
}
.hw-mech .ehr-chat-overlay-text .accent { color: var(--accent); }

/* Mouse cursor sprite — positioned dynamically via inline style (left/top
   from JS measurement). Visible from typing through the post-stream
   interaction phase; never hidden mid-cycle. */
.hw-mech .chatx-cursor {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
  transition: left 0.55s cubic-bezier(0.4, 0.2, 0.2, 1.1),
              top  0.55s cubic-bezier(0.4, 0.2, 0.2, 1.1),
              transform 0.12s ease,
              opacity 0.2s;
  transform-origin: 30% 25%;
}
.hw-mech .chatx-cursor.pressed { transform: scale(0.85); }

/* a small ripple ring on click */
.hw-mech .chatx-click-ring {
  position: absolute;
  left: 2px; top: 2px;
  width: 22px; height: 22px;
  border-radius: 999px;
  border: 2px solid var(--accent);
  opacity: 0.7;
  animation: clickring 0.55s ease-out forwards;
  pointer-events: none;
}
@keyframes clickring {
  0%   { transform: scale(0.4); opacity: 0.9; }
  100% { transform: scale(1.8); opacity: 0; }
}

@keyframes bubblein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Campaign HQ — post-opt-in
   ============================================================ */

.hw-mech .hq {
  --page-pad-x: clamp(20px, 4vw, 56px);
  background: var(--bg);
  color: var(--ink);
  min-height: 100%;
  padding: 28px var(--page-pad-x) 80px;
}
.hw-mech .hq-inner {
  max-width: 980px;
  margin: 0 auto;
}
.hw-mech .hq .brandbar { margin-bottom: 28px; }

.hw-mech .hq-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--accent-fg);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 5px 12px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.hw-mech .hq-status .check {
  width: 14px; height: 14px;
  border-radius: 999px; background: var(--accent);
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px;
}

.hw-mech .hq-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 16px 0 12px;
  text-wrap: balance;
}
.hw-mech .hq-sub {
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0 0 28px;
  max-width: 64ch;
}
.hw-mech .hq-sub .facility { color: var(--accent-fg); font-weight: 500; }

.hw-mech .hq-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 2.8vw, 32px);
  margin-bottom: 18px;
}

.hw-mech .progress-row {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap; gap: 12px;
}
.hw-mech .progress-row .label {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hw-mech .progress-row .count {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum";
}
.hw-mech .progress-row .count .total {
  color: var(--ink-3);
  font-weight: 400;
  font-size: 18px;
}

.hw-mech .progress-bar {
  height: 12px;
  background: oklch(0.94 0.005 75);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.hw-mech .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, oklch(from var(--accent) calc(l - 0.05) c h), var(--accent));
  border-radius: 999px;
  transform-origin: left center;
  animation: fillgrow 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
@keyframes fillgrow {
  from { transform: scaleX(0.01); }
  to   { transform: scaleX(var(--progress, 0.5)); }
}
.hw-mech .progress-meta {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 10px;
  display: flex; justify-content: space-between;
}

/* recent signers */
.hw-mech .signers-card .head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px;
}
.hw-mech .signers-card h3 {
  font-size: 16px; font-weight: 600;
  margin: 0; letter-spacing: -0.01em;
}
.hw-mech .signers-card .head .live {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 6px;
}
.hw-mech .signers-card .head .live::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: oklch(0.65 0.13 145);
  box-shadow: 0 0 0 0 oklch(0.65 0.13 145 / 0.7);
  animation: pulse 1.6s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 oklch(0.65 0.13 145 / 0.7); }
  70%  { box-shadow: 0 0 0 8px oklch(0.65 0.13 145 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(0.65 0.13 145 / 0); }
}

.hw-mech .signers-list { display: flex; flex-direction: column; }
.hw-mech .signer {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.hw-mech .signer:last-child { border-bottom: 0; }
.hw-mech .signer .avatar {
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-fg);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 12px;
}
.hw-mech .signer .who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hw-mech .signer .who .name { font-size: 14px; font-weight: 500; }
.hw-mech .signer .who .role { font-size: 12px; color: var(--ink-3); }
.hw-mech .signer .when {
  font-family: var(--mono);
  font-size: 11.5px; color: var(--ink-3);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.hw-mech .signer.you {
  position: relative;
}
.hw-mech .signer.you::after {
  content: "you";
  font-family: var(--mono);
  font-size: 10px;
  color: var(--accent-fg);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 2px 6px;
  margin-left: 6px;
  position: absolute;
  left: 168px;
  top: 50%; transform: translateY(-50%);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* share row */
.hw-mech .share-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  padding: 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius);
  background: var(--bg-elev);
  margin-top: 14px;
}
.hw-mech .share-row .lbl { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); letter-spacing: 0.05em; text-transform: uppercase; }
.hw-mech .share-row code { font-family: var(--mono); font-size: 13px; color: var(--ink); }
.hw-mech .share-row .copy {
  font: inherit; font-size: 12.5px; font-weight: 500;
  border: 1px solid var(--border-strong);
  background: var(--card);
  color: var(--ink);
  padding: 7px 12px; border-radius: 7px;
  cursor: pointer;
}
.hw-mech .share-row .copy:hover { border-color: var(--accent); color: var(--accent-fg); }

/* milestones */
.hw-mech .milestones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
@media (max-width: 720px) { .milestones { grid-template-columns: 1fr; } }
.hw-mech .milestone {
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 4px;
  background: var(--bg);
}
.hw-mech .milestone .ms-n { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; }
.hw-mech .milestone .ms-h { font-weight: 500; font-size: 14px; }
.hw-mech .milestone .ms-d { font-size: 12.5px; color: var(--ink-3); }
.hw-mech .milestone.reached { border-color: var(--accent); background: var(--accent-soft); }
.hw-mech .milestone.reached .ms-h { color: var(--accent-fg); }
.hw-mech .milestone.reached .ms-n { color: var(--accent-fg); }

/* hq footer actions */
.hw-mech .hq-actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 24px;
}
.hw-mech .linkbtn {
  font: inherit; font-size: 13.5px; font-weight: 500;
  color: var(--ink-2);
  background: transparent; border: 1px solid var(--border);
  padding: 9px 14px; border-radius: 8px;
  cursor: pointer;
}
.hw-mech .linkbtn:hover { color: var(--ink); border-color: var(--border-strong); }

/* ============================================================
   Utility / responsive
   ============================================================ */

.hw-mech .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* tighter density mode (tweak) */
.hw-mech .page.dense .headline { font-size: clamp(28px, 3.8vw, 46px); }
.hw-mech .page.dense .sub { font-size: clamp(14.5px, 1.3vw, 16.5px); }
.hw-mech .page.dense .hero { gap: clamp(20px, 3vw, 40px); }
.hw-mech .page.dense .form-card { padding: 14px 16px; }
.hw-mech .page.dense .field input { padding: 8px 10px; font-size: 13.5px; }
.hw-mech .page.dense .cta { padding: 11px 16px; font-size: 14px; }
.hw-mech .page.dense .mech-section { margin-top: clamp(36px, 6vw, 68px); }

/* serif headline tweak */
.hw-mech .page.font-editorial .headline {
  font-family: "Geist", ui-serif, Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.page.font-editorial .eyebrow,
.hw-mech .page.font-editorial .section-eyebrow { font-family: var(--mono); }

/* monumental headline tweak */
.hw-mech .page.font-monument .headline {
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.035em;
  font-size: clamp(34px, 5vw, 64px);
}

/* prevents the stage from jumping when content swaps */
.hw-mech .viewer-stage > * { width: 100%; min-height: 100%; }

/* ============================================================
   HOMEPAGE + supporting-page additions (Phase 1 build out)
   ============================================================ */

/* CTA buttons (used on hero CTAs + cta-strip) */
.hw-mech .cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  background: var(--ink-1, #0F1830);
  color: var(--bone-100, #FAF8F2);
  padding: 0.85em 1.4em;
  border: 1px solid var(--ink-1, #0F1830);
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: opacity 0.15s ease, background 0.15s ease;
  cursor: pointer;
}
.hw-mech .cta:hover { opacity: 0.88; }
.hw-mech .cta .arrow { font-size: 1.2em; line-height: 0; }
.hw-mech .cta-secondary {
  background: transparent;
  color: var(--ink-1, #0F1830);
}
.hw-mech .cta-secondary:hover {
  background: var(--ink-1, #0F1830);
  color: var(--bone-100, #FAF8F2);
  opacity: 1;
}

/* Hero CTA row */
.hw-mech .cta-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }

/* Section sub-headline (under .section-title, above grid) */
.hw-mech .section-sub {
  max-width: 720px;
  margin: 0.75rem 0 2.5rem;
  font-size: 1.05rem;
  line-height: 1.55;
  opacity: 0.72;
}

/* Sector picker grid (homepage) */
.hw-mech .sectors-section {
  padding: 5rem 0 4rem;
  max-width: 1100px;
  margin: 0 auto;
}
.hw-mech .sector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}
.hw-mech .sector-card {
  background: var(--bone-100, #FAF8F2);
  border: 1px solid rgba(26, 43, 76, 0.12);
  border-radius: 4px;
  padding: 1.5rem;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.hw-mech .sector-card:hover {
  border-color: rgba(26, 43, 76, 0.28);
  transform: translateY(-1px);
}
.hw-mech .sector-card-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(26, 43, 76, 0.08);
}
.hw-mech .sector-idx {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.22em;
  opacity: 0.5;
}
.hw-mech .sector-name {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}
.hw-mech .sector-voters {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.hw-mech .voter-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  margin: 0 -0.75rem;
  text-decoration: none;
  color: inherit;
  font-size: 0.95rem;
  border-radius: 2px;
  transition: background 0.12s ease;
}
.hw-mech .voter-link:hover { background: rgba(26, 43, 76, 0.04); }
.hw-mech .voter-arrow {
  margin-left: auto;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  opacity: 0.4;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.hw-mech .voter-link:hover .voter-arrow {
  opacity: 1;
  transform: translateX(2px);
}
.hw-mech .voter-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-1, #0F1830);
  flex-shrink: 0;
}
.hw-mech .voter-link[data-accent="orange"] .voter-dot { background: var(--staff, #F5A623); }
.hw-mech .voter-link[data-accent="blue"]   .voter-dot { background: var(--director, #243C6A); }
.hw-mech .voter-link[data-accent="teal"]   .voter-dot { background: var(--doctor, #5DA89C); }
.hw-mech .voter-link[data-accent="rose"]   .voter-dot { background: var(--family, #C77B7B); }

/* Why-now section */
.hw-mech .whynow-section {
  padding: 5rem 0 4rem;
  max-width: 1100px;
  margin: 0 auto;
}
.hw-mech .whynow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin: 2.5rem 0 2rem;
}
.hw-mech .whynow-stat {
  background: var(--bone-100, #FAF8F2);
  border: 1px solid rgba(26, 43, 76, 0.10);
  border-radius: 4px;
  padding: 1.75rem 1.5rem;
}
.hw-mech .whynow-stat .num {
  display: block;
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 0.5rem;
  color: var(--green, #96C3A1);
}
.hw-mech .whynow-stat p {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  line-height: 1.5;
  opacity: 0.78;
}
.hw-mech .whynow-stat .src {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.45;
}
.hw-mech .whynow-tag {
  max-width: 900px;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.5;
  border-left: 4px solid var(--orange, #F5A623);
  padding-left: 1.25rem;
}

/* CTA strip */
.hw-mech .cta-strip {
  padding: 4rem 0;
}
.hw-mech .cta-strip-inner {
  max-width: 1100px;
  margin: 0 auto;
  background: var(--bone-100, #FAF8F2);
  border: 1px solid rgba(26, 43, 76, 0.12);
  border-radius: 4px;
  padding: 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

/* Prose blocks (long-form body copy on Investor + Security + Pricing pages) */
.hw-mech .prose {
  max-width: 720px;
  font-size: 1.02rem;
  line-height: 1.65;
}
.hw-mech .prose p { margin: 0 0 1em; }
.hw-mech .prose ul.bullet-list {
  list-style: disc;
  padding-left: 1.5rem;
  margin: 0 0 1em;
}
.hw-mech .prose ul.bullet-list li { margin-bottom: 0.5em; }
.hw-mech .prose strong { font-weight: 700; }
.hw-mech .prose a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Pricing table */
.hw-mech .pricing-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}
.pricing-table th,
.hw-mech .pricing-table td {
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(26, 43, 76, 0.10);
}
.hw-mech .pricing-table th {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.6;
}
.hw-mech .pricing-table tbody tr:hover { background: rgba(26, 43, 76, 0.03); }

/* Mobile */
@media (max-width: 640px) {
  .sectors-section,
  .hw-mech .whynow-section { padding: 3rem 1rem 2rem; }
  .hw-mech .cta-strip-inner { padding: 1.75rem; flex-direction: column; align-items: flex-start; }
  .hw-mech .whynow-stat .num { font-size: 2rem; }
}

/* ============================================================
   Coverage strip (homepage replacement for sector picker grid)
   Static breadth-of-coverage list — NO clickthrough to landing pages
   (landing pages are paid-ad targets, not homepage nav).
   ============================================================ */
.hw-mech .coverage-section {
  padding: 5rem 0 4rem;
  max-width: 1100px;
  margin: 0 auto;
}
.hw-mech .coverage-grid {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.6rem;
}
.hw-mech .coverage-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  background: var(--bone-100, #FAF8F2);
  border: 1px solid rgba(26, 43, 76, 0.10);
  border-radius: 3px;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.hw-mech .coverage-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green, #96C3A1);
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .hw-mech .coverage-section { padding: 3rem 1rem 2rem; }
}

/* Hero min-height — ensures right-column animation has room to breathe even
   when the left column doesn't contain a tall form (like the homepage +
   investor page, which use CTAs instead). 700px matches landing-page heroes
   (form-driven heroes settle around 671px) so EHR + chat panel proportions
   stay identical across all heroes. */
.hw-mech .hero {
  min-height: 700px;
  /* Critical: hero must always contain its children. position: relative gives
     any descendant with `position: absolute` (overlay, cursor sprite, glass
     fade) a containing block scoped to the hero. Without this the overlay
     anchored to .ehr-chat can compute against a higher ancestor on certain
     reflows and visually leak into the mech-section below. */
  position: relative;
  isolation: isolate;
}
.hw-mech .hero-side {
  /* Clip the absolute-positioned overlay + cursor sprite so they cannot
     paint past the right column's bounds, even if .ehr-chat collapses on
     a strange viewport. */
  overflow: hidden;
  border-radius: var(--radius-lg);
}
@media (max-width: 920px) {
  .hw-mech .hero {
    min-height: 0;
  }
  /* When stacked, give the animation panel a concrete height so flex:1 1 0
     children inside .ehr-chat don't collapse to 0 and let their content
     overflow vertically into the section below. */
  .hw-mech .hero-side {
    min-height: 520px;
    height: 520px;
  }
}
@media (max-width: 480px) {
  .hw-mech .hero-side {
    min-height: 440px;
    height: 440px;
  }
}

/* Text-only hero (homepage, investor) — push CTAs to the bottom of the left
   column so content fills the cell height the same way the form-card does
   on landing pages. Without this the text + CTAs sit at top with a ~240px
   gap below them, making the column look broken next to the full-height
   right side. */
.hw-mech .hero-text .cta-row {
  margin-top: auto;
  padding-top: 8px;
}