/* ==========================================================================
   helmrow.com — the Evidence Binder
   Aubergine cover stock · ivory workpaper · dove rules · coral = the
   auditor's pencil (ticks, traces, stamps, primary action). Manrope carries
   the narrative voice; Martian Mono carries the record register (exhibit
   tags, timestamps, control totals). Product fragments keep the product's
   own card language: white, 1px dove border, 12px radius, no shadows.
   ========================================================================== */

@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-latin-var.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("/assets/fonts/martian-mono-latin-var.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

:root {
  /* cover stock */
  --aub: #3a2745;
  --aub-deep: #2c1e36;
  --aub-well: #241729;
  --aub-line: #524061;
  --on-aub: #f6f4ef;
  --on-aub-2: #cfc0d8;
  --on-aub-3: #a892b5;
  /* workpaper */
  --ivory: #f6f4ef;
  --paper: #fcfbf7;
  --white: #ffffff;
  --dove: #d5d1cc;
  --dove-soft: #e7e3dd;
  --ink: #2a2130;
  --ink-2: #62556b;
  --ink-3: #6e6175;
  /* the pencil */
  --coral: #e76f51;
  /* Hover lifts rather than darkens: the filled button carries near-black
     ink, and a darker coral drops that pair under 4.5:1. */
  --coral-hover: #dd6244;
  --coral-press: #d15a3b;
  --coral-text: #b3461f;
  /* the pencil, legible on cover stock: #e76f51 clears AA on the deep and
     well tones but lands at 4.36:1 on plain aubergine, so link-weight coral
     on a cover uses this instead */
  --coral-on-dark: #ef8168;
  --coral-soft: #fbe9e2;
  /* record states (product-faithful) */
  --ok: #166534;
  --ok-soft: #dcfce7;
  --warn: #92400e;
  --warn-soft: #fef3c7;
  --bad: #991b1b;
  --bad-soft: #fee2e2;
  --hold: #efe9f2;
  /* type */
  /* The record register's one label size. Every mono micro-label — exhibit
     tags, group headings, rung keys, timestamps — sits here rather than on
     eight near-identical steps, and it clears the 11px legibility floor. */
  --micro: 0.7rem;
  --sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  /* shape */
  --r-card: 12px;
  --r-input: 8px;
  /* large surfaces: the film dialog and the poster card */
  --r-panel: 16px;
  /* rhythm */
  --gutter: clamp(20px, 4vw, 48px);
  --measure: 66ch;
  color-scheme: light;
}

/* ── Base ────────────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ivory) url("/assets/brand/tooth-dark.png") repeat;
  background-size: 128px 128px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--coral);
  color: var(--aub-well);
}
.cover ::selection,
.site-foot ::selection {
  background: var(--coral);
  color: var(--aub-well);
}

:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
  border-radius: 2px;
}
.cover :focus-visible,
.site-foot :focus-visible {
  outline-color: var(--on-aub);
}

::placeholder {
  color: var(--ink-3);
  opacity: 1;
}

html {
  scrollbar-color: var(--dove) var(--ivory);
}
::-webkit-scrollbar {
  width: 13px;
  height: 13px;
}
::-webkit-scrollbar-track {
  background: var(--ivory);
}
::-webkit-scrollbar-thumb {
  background: var(--dove);
  border: 3px solid var(--ivory);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ink-3);
}

input,
select,
textarea,
button {
  font: inherit;
  color: inherit;
  caret-color: var(--coral);
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--coral);
}
a:hover {
  color: var(--coral-text);
}

p {
  margin: 0 0 1em;
  max-width: var(--measure);
}

.tnum,
td.num,
th.num {
  font-variant-numeric: tabular-nums;
}

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

.skip-link {
  position: absolute;
  top: -48px;
  left: 16px;
  z-index: 100;
  background: var(--coral);
  color: var(--aub-well);
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 0 0 var(--r-input) var(--r-input);
  text-decoration: none;
  transition: top 0.15s ease-out;
}
.skip-link:focus {
  top: 0;
}

/* ── Type scale ──────────────────────────────────────────────────────── */

h1,
h2,
h3 {
  font-weight: 800;
  margin: 0;
  text-wrap: balance;
}

.display {
  font-size: clamp(2.6rem, 4.6vw + 1rem, 5rem);
  line-height: 1.03;
  letter-spacing: -0.033em;
}

/* Short statements, one per line, each unbreakable. Balance would otherwise
   split a line like "Built for GovCon." across two and blur the count. */
.display.lockup {
  font-size: clamp(2.4rem, 3.4vw + 1rem, 4rem);
  text-wrap: nowrap;
}
.display.lockup span {
  display: block;
}
/* Below about 380px the clamp's floor is wider than the column, and the
   nowrap that keeps each statement on its own line would push the longer
   one off the page. Scale with the viewport instead of wrapping, so the
   headline keeps its line count all the way down. */
@media (max-width: 380px) {
  .display.lockup {
    font-size: 9.6vw;
  }
}

/* Keeps the last few words of a heading together, the job   used to
   do. Unlike   it can be released: below 620px a bound phrase like
   "government contractors." is wider than the column, and a hard-bound one
   both bleeds off the page and sets a min-content width that pushes grid
   tracks past the viewport. */
.nb {
  white-space: nowrap;
}
@media (max-width: 620px) {
  .nb {
    white-space: normal;
  }
}

h2,
.h2 {
  font-size: clamp(1.9rem, 2.2vw + 0.9rem, 3rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

h3,
.h3 {
  font-size: 1.35rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.lede {
  font-size: clamp(1.1rem, 0.5vw + 1rem, 1.3rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 58ch;
}
.cover .lede {
  color: var(--on-aub-2);
}

/* The record register: exhibit tags, stamps, timestamps, control totals. */
.tag {
  font-family: var(--mono);
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ── Buttons ─────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--r-input);
  border: 1px solid transparent;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.01em;
  padding: 14px 26px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.18s ease-out, border-color 0.18s ease-out,
    color 0.18s ease-out, transform 0.18s ease-out;
}
.btn:active {
  transform: translateY(1px);
}
.btn .i {
  transition: transform 0.18s ease-out;
}
.btn:hover .i {
  transform: translateX(3px);
}

.btn-coral {
  background: var(--coral);
  color: var(--aub-well);
}
.btn-coral:hover {
  background: var(--coral-hover);
  color: var(--aub-well);
}
.btn-coral:active {
  background: var(--coral-press);
  color: var(--white);
}

.btn-ghost-light {
  border-color: var(--aub-line);
  color: var(--on-aub);
  /* the ghost variants are used on <button> as well as <a>, and a bare
     button would otherwise take the UA's opaque buttonface grey */
  background: transparent;
}
.btn-ghost-light:hover {
  border-color: var(--on-aub-2);
  background: rgba(246, 244, 239, 0.07);
  color: var(--on-aub);
}

.btn-ghost-dark {
  border-color: var(--dove);
  color: var(--ink);
  background: var(--white);
}
.btn-ghost-dark:hover {
  border-color: var(--ink-3);
  color: var(--ink);
}

/* ── Header ──────────────────────────────────────────────────────────── */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--aub);
  border-bottom: 1px solid var(--aub-line);
}
.site-head .bar {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--on-aub);
  margin-right: auto;
}
.brand img {
  height: 34px;
  width: auto;
}
.brand .word {
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
/* The H and the R carry the accent, the way the mark does. Both are set on
   cover stock at 20px/800, which clears AA for large text. */
.brand .word .hr {
  color: var(--coral);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.site-nav a {
  color: var(--on-aub-2);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 9px 13px;
  border-radius: var(--r-input);
  transition: color 0.15s ease-out, background-color 0.15s ease-out;
}
.site-nav a:hover {
  color: var(--on-aub);
  background: rgba(246, 244, 239, 0.08);
}
.site-nav a[aria-current] {
  color: var(--on-aub);
  box-shadow: inset 0 -2px 0 var(--coral);
  border-radius: var(--r-input) var(--r-input) 2px 2px;
}
.site-nav .btn {
  margin-left: 10px;
  padding: 10px 18px;
  font-size: 0.95rem;
}
/* .site-nav a is more specific than .btn-coral, so the CTA label has to
   restate its color here or it inherits the nav-link tint. */
.site-nav a.btn-coral,
.site-nav a.btn-coral:hover {
  color: var(--aub-well);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--aub-line);
  border-radius: var(--r-input);
  color: var(--on-aub);
  padding: 9px 11px;
  cursor: pointer;
}
.nav-toggle svg {
  display: block;
}

@media (max-width: 880px) {
  .nav-toggle {
    display: block;
  }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--aub-deep);
    border-bottom: 1px solid var(--aub-line);
    padding: 10px var(--gutter) 18px;
  }
  .site-nav[hidden] {
    display: none;
  }
  .site-nav a {
    padding: 13px 14px;
    font-size: 1.05rem;
  }
  .site-nav .btn {
    margin: 10px 0 0;
    justify-content: center;
  }
}

/* ── Cover sections (binder stock) ───────────────────────────────────── */

.cover {
  background: var(--aub);
  color: var(--on-aub);
  position: relative;
  overflow: clip;
}
.cover.deep {
  background: var(--aub-deep);
}

/* cover stock: paper tooth (raster tile) over a debossed dot grid */
.cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/assets/brand/tooth-light.png"),
    radial-gradient(rgba(246, 244, 239, 0.028) 1px, transparent 1px);
  background-size: 128px 128px, 22px 22px;
  pointer-events: none;
}
.cover > * {
  position: relative;
}
/* Micro-labels and inline "more" links keep their light-surface colours by
   default; on cover stock they need the cover's own register. */
.cover .tag {
  color: var(--on-aub-3);
}
.cover .more {
  color: var(--coral-on-dark);
}

/* ── Shell / section rhythm ──────────────────────────────────────────── */

.shell {
  max-width: 1240px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.chapter {
  padding-top: clamp(72px, 9vw, 130px);
  padding-bottom: clamp(72px, 9vw, 130px);
}
.anchor-target {
  scroll-margin-top: 84px;
}
.chapter.tight {
  padding-top: clamp(56px, 7vw, 96px);
  padding-bottom: clamp(56px, 7vw, 96px);
}

/* Ruled chapter break: a plain hairline with generous space above the
   heading — the workpaper's rule, no label riding it. */
.file-rule {
  border-top: 1px solid var(--dove);
  margin-bottom: clamp(40px, 5vw, 72px);
}
.cover .file-rule {
  border-top-color: var(--aub-line);
}

.chapter-head {
  max-width: 820px;
  margin-bottom: clamp(36px, 4.5vw, 60px);
}
.chapter-head p {
  margin-top: 18px;
  margin-bottom: 0;
}

/* ── Included (the no-paywall statement) ─────────────────────────────── */

/* One claim, centred, no supporting grid. It is a statement about how
   HelmRow is sold, not another feature block, so it gets no furniture. */
.included {
  max-width: 52ch;
  margin: 0 auto;
  text-align: center;
}
.included h2 {
  margin: 0;
}
.included .lede {
  margin: 18px auto 0;
}

/* ── The auditor's tick ──────────────────────────────────────────────── */

.tick {
  color: var(--coral);
  flex: none;
}
.tick path {
  stroke: currentColor;
  stroke-width: 2.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.reveal-tick .tick path {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
}
.reveal-tick.in-view .tick path {
  animation: tick-draw 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s forwards;
}
@keyframes tick-draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* ── Exhibits (product windows) ──────────────────────────────────────── */

figure.exhibit {
  margin: 0;
}
.exhibit-frame {
  background: var(--white);
  border: 1px solid var(--dove);
  border-radius: var(--r-card);
  overflow: hidden;
}
.exhibit figcaption {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink-2);
}
/* Uppercase sits on the label alone. It used to sit on the figcaption, which
   swept the fictional-data declaration into the caps run and pushed every
   caption past the length where uppercase still helps you read. */
.exhibit figcaption .lbl {
  text-transform: uppercase;
}
.cover .exhibit figcaption {
  color: var(--on-aub-3);
}
/* The declaration is a sentence, not a label: keeping it out of the
   uppercase run holds every caption's caps to a readable short phrase. */
.exhibit figcaption .fict {
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--ink-3);
}
.cover .exhibit figcaption .fict {
  color: var(--on-aub-3);
}
/* ── Screens (real application captures) ──────────────────────────────────
   A screenshot of HelmRow itself, populated with the Northstar demonstration
   data. One frame everywhere: 1px dove border, card radius, no shadow (the
   site has none), and a caption that names the role and the task. Pressing
   the image opens the same capture larger in a native <dialog>. */
figure.shot {
  margin: 0;
}
.shot-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--dove);
  border-radius: var(--r-card);
  background: var(--white);
  overflow: hidden;
  cursor: zoom-in;
  transition: border-color 0.15s ease-out;
}
.shot-open:hover {
  border-color: var(--ink-3);
}
.shot-open:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
}
.shot-open img {
  display: block;
  width: 100%;
  height: auto;
}
.cover .shot-open {
  border-color: var(--line);
}
.shot figcaption {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: var(--micro);
  letter-spacing: 0.08em;
  color: var(--ink-2);
}
.shot figcaption .lbl {
  text-transform: uppercase;
  font-weight: 500;
}
.shot figcaption .task {
  font-family: var(--sans);
  font-size: 0.9rem;
  letter-spacing: 0;
  color: var(--ink-2);
  min-width: 0;
  overflow-wrap: anywhere;
}
.shot figcaption {
  flex-wrap: wrap;
}
.cover .shot figcaption,
.cover .shot figcaption .task {
  color: var(--on-aub-3);
}
/* the hero's capture: no caption, a little larger radius, priority-loaded */
.hero-shot .shot-open {
  border-radius: var(--r-panel);
  cursor: default;
}
.hero.real {
  padding-bottom: clamp(56px, 7vw, 104px);
}
.hero.real .hero-grid {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
}
.hero.real .hero-copy {
  padding-bottom: 0;
}
.hero.real .hero-stage {
  min-height: 0;
}
/* the headline shares the row with a real screen now, so it sizes to its
   five-column share rather than to the old six */
.hero.real .display.lockup {
  font-size: clamp(2.3rem, 4.3vw, 4rem);
}
@media (max-width: 900px) {
  .hero.real .hero-grid,
  .story-grid.shots {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero.real .hero-stage {
    margin-top: 8px;
  }
  .story-grid.shots.flip .story-copy {
    order: 0;
  }
}
/* the two hero cuts have different shapes; the box is reserved before the
   image arrives so nothing below it moves */
.hero-shot img {
  aspect-ratio: 2016 / 1600;
}
@media (max-width: 760px) {
  .hero-shot img {
    aspect-ratio: 780 / 1610;
  }
}
/* a story whose visual is a capture gives the capture more of the row */
.story-grid.shots {
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
}
.shot-wide {
  margin-top: clamp(28px, 4vw, 48px);
}
.shot-pair.shot-wide {
  margin-top: clamp(20px, 3vw, 36px);
}
.tour-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: clamp(28px, 4vw, 44px);
}
.tour-links .more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--coral-text);
  text-decoration: none;
}
.tour-links .more:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.record .record-copy p:last-child {
  color: var(--ink-2);
}
/* a pair: two captures side by side that read as one step and its result */
.shot-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 28px);
  align-items: start;
}
@media (max-width: 760px) {
  .shot-pair {
    grid-template-columns: 1fr;
  }
}
/* the enlarged view */
.shot-dialog {
  width: min(1400px, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100vh - 2 * var(--gutter));
  padding: 0;
  border: 1px solid var(--dove);
  border-radius: var(--r-panel);
  background: var(--ivory);
  color: var(--ink);
  overflow: auto;
}
.shot-dialog::backdrop {
  background: rgba(36, 23, 41, 0.78);
}
.shot-dialog img {
  display: block;
  width: 100%;
  height: auto;
}
.shot-dialog-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-top: 1px solid var(--dove);
  font-size: 0.9rem;
  color: var(--ink-2);
}
.shot-dialog-bar .lbl {
  font-family: var(--mono);
  font-size: var(--micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-right: 8px;
}
.shot-dialog-x {
  flex: none;
  background: none;
  border: 1px solid var(--dove);
  border-radius: var(--r-input);
  padding: 7px 12px;
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}
.shot-dialog-x:hover {
  border-color: var(--ink-3);
}
.shot-dialog-x:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}

.exhibit figcaption .tick {
  width: 15px;
  height: 15px;
}

/* wall figures carry caption-first DOM (valid figcaption placement);
   flex order keeps the visual stack: frame, caption, title, blurb */
.wall figure.exhibit {
  display: flex;
  flex-direction: column;
}
.wall figure.exhibit > figcaption {
  order: 2;
}
.wall figure.exhibit > .exhibit-frame {
  order: 1;
}
.wall figure.exhibit > h3 {
  order: 3;
}
.wall figure.exhibit > .desc {
  order: 4;
}

/* ── Product fragment language (marketing-only recreations) ──────────── */

.hx {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
  padding: 18px 20px;
  overflow-x: auto;
}
.hx-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.hx-title {
  font-weight: 800;
  font-size: 15.5px;
  letter-spacing: -0.01em;
}
.hx-sub {
  color: var(--ink-2);
  font-size: 13px;
}

.hx-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.hx-pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.hx-pill.open {
  border: 1px solid var(--dove);
  color: var(--ink-2);
  background: var(--white);
}
.hx-pill.progress {
  background: #e0f2fe;
  color: #075985;
}
.hx-pill.certified {
  background: var(--hold);
  color: var(--aub);
}
.hx-pill.approved {
  background: var(--ok-soft);
  color: var(--ok);
}
.hx-pill.pending {
  background: var(--warn-soft);
  color: var(--warn);
}
.hx-pill.rejected {
  background: var(--bad-soft);
  color: var(--bad);
}

.hx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.hx-table th {
  text-align: left;
  font-weight: 700;
  font-size: 12px;
  color: var(--ink-2);
  padding: 7px 8px;
  border-bottom: 1px solid var(--dove);
}
.hx-table td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--dove-soft);
}
.hx-table tr:last-child td {
  border-bottom: 0;
}
.hx-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.hx-table .sub {
  color: var(--ink-3);
  font-size: 12px;
  display: block;
}

.hx-meter {
  height: 8px;
  border-radius: 999px;
  background: var(--ivory);
  border: 1px solid var(--dove);
  overflow: hidden;
}
.hx-meter > span {
  display: block;
  height: 100%;
  width: var(--fill, 17%);
  background: var(--aub);
  border-radius: 999px;
}
.hx-meter-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  color: var(--ink-2);
  margin: 9px 0 6px;
}
.hx-meter-row b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.hx-kv {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 6px 0;
  font-size: 13.5px;
  margin: 0;
}
.hx-kv dt {
  color: var(--ink-2);
}
.hx-kv dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
@media (max-width: 420px) {
  .hx-kv {
    flex-direction: column;
    gap: 1px;
    padding: 7px 0;
  }
  .hx-kv dd {
    text-align: left;
  }
}

/* A fragment laid out as one row rather than a stacked card. */
.hx-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* On the narrowest phones the row leaves the label about half a card, which
   shreds it into four lines. Let the trailing element drop instead. */
@media (max-width: 360px) {
  .hx-row {
    flex-wrap: wrap;
    gap: 8px 12px;
  }
}

/* The candidate-to-employee handoff, drawn as the product's own affordance:
   an action, not a link, so it reads as a fragment and not site chrome. */
.hx-move {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--coral-text);
  background: var(--coral-soft);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
}

.hx-note {
  background: var(--hold);
  border-left: 1px solid var(--aub);
  border-radius: var(--r-input);
  padding: 10px 14px;
  font-size: 13px;
}
.hx-note footer {
  color: var(--ink-3);
  font-size: 12px;
  margin-top: 4px;
}

.hx-strike {
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 1.5px;
}
.hx-arrow {
  color: var(--coral-text);
  font-weight: 800;
}
.hx-cell {
  display: inline-block;
  min-width: 52px;
  padding: 5px 4px;
  border: 1px solid var(--dove);
  border-radius: var(--r-input);
  background: var(--white);
  font-variant-numeric: tabular-nums;
  text-align: center;
  font-size: 13px;
}
.hx-cell.empty {
  border-color: transparent;
  color: var(--ink-3);
}
.hx-cell.late {
  border-color: var(--warn);
  box-shadow: inset 0 -2px 0 var(--warn);
  position: relative;
}
.hx-cell.late::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warn);
}
.hx-cell.leave-pending {
  background: var(--warn-soft);
  border-color: transparent;
  color: var(--warn);
  font-weight: 700;
}

/* ── Hero ────────────────────────────────────────────────────────────── */

.hero {
  padding-top: clamp(56px, 7vw, 104px);
  padding-bottom: 0;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 6.2fr) minmax(0, 5.4fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
}
.hero-copy {
  padding-bottom: clamp(64px, 8vw, 120px);
  min-width: 0;
}
.hero-copy .lede {
  margin: 26px 0 38px;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* the exhibit page rising out of the cover's bottom edge */
.hero-stage {
  align-self: end;
  min-width: 0;
  position: relative;
  /* Tall enough that all four fragments clear the cover's bottom edge. The
     sheet itself is still clipped there, which is the point; a card cut in
     half is not. */
  min-height: 600px;
}
.hero-page {
  position: absolute;
  /* The sheet runs past the cover's bottom edge, where the section's
     `overflow: clip` cuts it: the page carries on into the next section
     rather than floating in the middle of the field. */
  inset: clamp(8px, 2vw, 30px) 0 -64px 0;
  background: var(--ivory);
  border: 1px solid var(--dove);
  border-bottom: 0;
  border-radius: var(--r-card) var(--r-card) 0 0;
  padding: 26px 26px 0;
  min-height: 460px;
}

/* Between the breakpoint and roughly 1100px the fragments wrap onto extra
   lines, so the sheet needs more room to keep the last card off the edge. */
@media (min-width: 881px) and (max-width: 1100px) {
  .hero-stage {
    min-height: 650px;
  }
}

.hero-exhibits {
  display: grid;
  gap: 14px;
}
.hero-exhibits .exhibit-frame {
  border-radius: var(--r-card);
}

@media (max-width: 880px) {
  .hero-grid {
    /* minmax(0, …), not 1fr: a plain 1fr floors at the widest item's
       min-content, and the product fragments below would push the single
       column, and the headline with it, past a narrow viewport. */
    grid-template-columns: minmax(0, 1fr);
  }
  .hero-copy {
    padding-bottom: 44px;
  }
  .hero-stage {
    min-height: 0;
  }
  .hero-page {
    position: relative;
    inset: auto;
    min-height: 0;
    padding: 22px 16px 0;
  }
}

/* hero choreography: the record assembling itself, once — candidate, then
   employee, then onboarding, then an approved week */
.hero-seq .seq {
  opacity: 0;
  transform: translateY(14px);
  animation: seq-in 0.7s cubic-bezier(0.16, 0.84, 0.3, 1) forwards;
}
.hero-seq .seq-0 {
  animation-delay: 0s;
}
.hero-seq .seq-1 {
  animation-delay: 0.3s;
}
.hero-seq .seq-2 {
  animation-delay: 0.6s;
}
.hero-seq .seq-3 {
  animation-delay: 0.9s;
}
@keyframes seq-in {
  to {
    opacity: 1;
    transform: none;
  }
}

/* status flip: In Progress → Certified → Approved, settling once */
.hx-status-flip {
  position: relative;
  display: inline-grid;
}
.hx-status-flip .hx-pill {
  grid-area: 1 / 1;
  opacity: 0;
}
.hero-seq .hx-status-flip .s1 {
  animation: flip-hold 0.9s step-end 1.25s backwards;
}
.hero-seq .hx-status-flip .s2 {
  animation: flip-hold 0.9s step-end 2.15s backwards;
}
.hero-seq .hx-status-flip .s3 {
  opacity: 1;
  animation: flip-final 0.3s ease-out 3.05s backwards;
}
@keyframes flip-hold {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes flip-final {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.hero-seq .hero-tick path {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: tick-draw 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) 3.25s forwards;
}

/* ── Scroll reveal (exhibits only; text never animates) ──────────────── */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.65s cubic-bezier(0.16, 0.84, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 0.84, 0.3, 1);
}
.reveal.in-view {
  opacity: 1;
  transform: none;
}

/* ── Module columns (one platform) ───────────────────────────────────── */

.modules {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--dove);
}
.module {
  border-left: 1px solid var(--dove);
  padding: 30px 26px 34px 26px;
}
.module:first-child {
  border-left: 0;
  padding-left: 0;
}
.module h3 {
  font-size: clamp(1.4rem, 1vw + 1rem, 1.8rem);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.module p {
  color: var(--ink-2);
  font-size: 0.95rem;
  margin-bottom: 16px;
}
.module .more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--coral-text);
  text-decoration: none;
}
.module .more:hover {
  text-decoration: underline;
  text-decoration-color: var(--coral);
  text-underline-offset: 3px;
}
@media (max-width: 980px) {
  .modules {
    grid-template-columns: 1fr 1fr;
  }
  .module:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }
  .module:nth-child(n + 3) {
    border-top: 1px solid var(--dove-soft);
  }
}
@media (max-width: 560px) {
  .modules {
    grid-template-columns: 1fr;
  }
  .module {
    border-left: 0;
    padding-left: 0;
  }
  .module:nth-child(n + 2) {
    border-top: 1px solid var(--dove-soft);
  }
}

/* ── Legal documents (privacy, terms) ────────────────────────────────── */

/* Long-form prose set as a filed document: a numbered section register in
   the mono voice, hairlines between clauses, one comfortable measure. */
.legal {
  max-width: 78ch;
}
.legal-sec {
  border-top: 1px solid var(--dove);
  padding-top: clamp(28px, 3vw, 40px);
  margin-top: clamp(28px, 3vw, 40px);
}
.legal-sec:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
.legal-sec h2 {
  font-size: clamp(1.4rem, 1vw + 1rem, 1.8rem);
  line-height: 1.15;
  margin-bottom: 18px;
}
.legal-sec h2 .n {
  display: block;
  font-family: var(--mono);
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--coral-text);
  margin-bottom: 10px;
}
.legal-sec h3 {
  font-size: 1.05rem;
  margin: 30px 0 10px;
}
.legal p {
  color: var(--ink-2);
  max-width: none;
}
.legal b {
  color: var(--ink);
  font-weight: 800;
}
.legal ul {
  list-style: none;
  margin: 0 0 1em;
  padding: 0;
  display: grid;
  gap: 12px;
}
/* The tick hangs in the margin rather than being a flex sibling, so inline
   emphasis inside a bullet stays inline instead of becoming a flex item. */
.legal ul li {
  position: relative;
  padding-left: 25px;
  color: var(--ink-2);
}
.legal ul .tick {
  position: absolute;
  left: 0;
  top: 6px;
}
.legal-contact {
  border-left: 2px solid var(--coral);
  padding-left: 18px;
  line-height: 1.8;
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0 1.4em;
  font-size: 0.95rem;
}
.legal-table th,
.legal-table td {
  text-align: left;
  vertical-align: top;
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--dove-soft);
  color: var(--ink-2);
}
.legal-table thead th {
  font-family: var(--mono);
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom-color: var(--dove);
  padding-bottom: 10px;
}
.legal-table td:first-child {
  color: var(--ink);
  font-weight: 700;
  padding-right: 24px;
}
@media (max-width: 620px) {
  .legal-table,
  .legal-table thead,
  .legal-table tbody,
  .legal-table tr,
  .legal-table th,
  .legal-table td {
    display: block;
  }
  .legal-table thead {
    display: none;
  }
  .legal-table tr {
    border-bottom: 1px solid var(--dove);
    padding: 14px 0;
  }
  .legal-table td {
    border: 0;
    padding: 2px 0;
  }
}

/* ── FAQ (question left, answer right, on hairlines) ─────────────────── */

.faq {
  border-top: 1px solid var(--dove);
}
.faq-item {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(18px, 4vw, 56px);
  border-bottom: 1px solid var(--dove-soft);
  padding: clamp(22px, 2.6vw, 32px) 0;
}
.faq-item h3 {
  font-size: 1.15rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 0;
}
.faq-item p {
  margin: 0;
  color: var(--ink-2);
  max-width: none;
}
@media (max-width: 780px) {
  .faq-item {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ── Family bands (product page grouping) ────────────────────────────── */

/* Five groups stand above the individual areas, so the product page reads
   as a shape rather than a list of eleven equals. */
.family {
  padding-top: clamp(64px, 8vw, 112px);
  padding-bottom: clamp(8px, 1.5vw, 20px);
}
.family-head {
  max-width: 700px;
}
.family-title {
  font-size: clamp(2.4rem, 3vw + 1rem, 3.9rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.family-head p {
  margin: 16px 0 0;
  color: var(--ink-2);
  font-size: clamp(1.05rem, 0.4vw + 1rem, 1.2rem);
}

/* An area sits one level under its family, so it is set smaller than the
   family title and larger than the body it introduces. */
.area-title {
  font-size: clamp(1.5rem, 1.3vw + 0.9rem, 2.1rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

/* ── Areas (the four things HelmRow does) ────────────────────────────── */

/* Four ruled cells, each carrying one claim and one small piece of real UI
   underneath it. The fragment is the proof; the sentence is the label. */
.areas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--dove);
}
.area {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--dove);
  padding: 30px 26px 34px;
}
.area:first-child {
  border-left: 0;
  padding-left: 0;
}
.area h3 {
  font-size: clamp(1.25rem, 0.8vw + 1rem, 1.55rem);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.area p {
  color: var(--ink-2);
  font-size: 0.95rem;
  margin-bottom: 22px;
}
.area .hx.mini {
  margin-top: auto;
  margin-bottom: 18px;
}
.area .more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--coral-text);
  text-decoration: none;
}
.area .more:hover {
  text-decoration: underline;
  text-decoration-color: var(--coral);
  text-underline-offset: 3px;
}

/* A single-row fragment: the product's card language at one-line scale. */
.hx.mini {
  padding: 12px 14px;
  border: 1px solid var(--dove);
  border-radius: var(--r-card);
  background: var(--white);
}
.hx.mini .hx-kv:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

@media (max-width: 980px) {
  .areas {
    grid-template-columns: 1fr 1fr;
  }
  .area:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }
  .area:nth-child(n + 3) {
    border-top: 1px solid var(--dove-soft);
  }
}
@media (max-width: 560px) {
  .areas {
    grid-template-columns: 1fr;
  }
  .area {
    border-left: 0;
    padding-left: 0;
  }
  .area:nth-child(n + 2) {
    border-top: 1px solid var(--dove-soft);
  }
}

/* ── Pillar grid (eleven product areas) ──────────────────────────────── */

.pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--dove);
  border-left: 1px solid var(--dove);
}
.pillar {
  border-right: 1px solid var(--dove);
  border-bottom: 1px solid var(--dove);
  padding: 22px 22px 24px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 7px;
  transition: background-color 0.15s ease-out;
}
a.pillar:hover {
  background: var(--paper);
  color: inherit;
}
.pillar h3 {
  font-size: 1.1rem;
  letter-spacing: -0.015em;
  display: flex;
  align-items: center;
  gap: 9px;
}
.pillar h3 .n {
  font-family: var(--mono);
  font-size: var(--micro);
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0.06em;
}
.pillar p {
  color: var(--ink-2);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
  max-width: none;
}
.pillar.is-time h3 .n {
  color: var(--coral-text);
}
@media (max-width: 980px) {
  .pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .pillars {
    grid-template-columns: 1fr;
  }
}

/* ── Audience rows (four readers, four lines) ────────────────────────── */

.audiences {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
}
.audience {
  border-top: 2px solid var(--aub);
  padding-top: 18px;
}
.audience .who {
  font-family: var(--mono);
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 10px;
}
.audience p {
  font-size: 1.02rem;
  line-height: 1.45;
  letter-spacing: -0.01em;
  font-weight: 700;
  margin: 0;
  max-width: none;
}
.cover .audience {
  border-top-color: var(--coral);
}
.cover .audience .who {
  color: var(--on-aub-3);
}
.cover .audience p {
  color: var(--on-aub);
}
@media (max-width: 880px) {
  .audiences {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 520px) {
  .audiences {
    grid-template-columns: 1fr;
  }
}

/* ── Stage rail (recruiting pipeline, lifecycle) ─────────────────────── */

.stages {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.stage {
  font-family: var(--mono);
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--dove);
  border-radius: 999px;
  padding: 4px 11px;
  color: var(--ink-2);
  background: var(--white);
  white-space: nowrap;
}
.stage.on {
  background: var(--aub);
  border-color: var(--aub);
  color: var(--on-aub);
}

/* ── Progress bar (onboarding) ───────────────────────────────────────── */

.hx-progress {
  height: 9px;
  border-radius: 999px;
  background: var(--hold);
  overflow: hidden;
}
.hx-progress > span {
  display: block;
  height: 100%;
  width: var(--fill, 50%);
  background: var(--aub);
  border-radius: 999px;
}

/* ── Module deep-link list (product page contents) ───────────────────── */

.toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}
.toc a {
  font-family: var(--mono);
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border: 1px solid var(--aub-line);
  border-radius: 999px;
  padding: 7px 14px;
  color: var(--on-aub-2);
  text-decoration: none;
  transition: border-color 0.15s ease-out, color 0.15s ease-out,
    background-color 0.15s ease-out;
}
.toc a:hover {
  border-color: var(--coral);
  color: var(--on-aub);
  background: rgba(231, 111, 81, 0.14);
}

/* ── Limits list (honest boundaries) ─────────────────────────────────── */

.limits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 34px);
  border-top: 1px solid var(--dove);
  padding-top: 28px;
}
.limit b {
  display: block;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  margin-bottom: 5px;
}
.limit span {
  color: var(--ink-2);
  font-size: 0.92rem;
  line-height: 1.5;
}
@media (max-width: 880px) {
  .limits {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ── Lifecycle progression ───────────────────────────────────────────── */

.lifecycle {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  counter-reset: step;
}
.lifecycle li {
  border-top: 2px solid var(--dove);
  padding-top: 20px;
  position: relative;
}
.lifecycle li::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--coral);
}
.lifecycle h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 1.15rem;
  margin-bottom: 8px;
}
.lifecycle h3 .i {
  color: var(--coral);
}
.lifecycle p {
  color: var(--ink-2);
  font-size: 0.95rem;
  margin: 0;
}
/* Names only: four stages read as a path, with no paragraph under each to
   turn them back into a feature list. */
.lifecycle.rail {
  margin-top: 34px;
  gap: clamp(12px, 2vw, 24px);
}
.lifecycle.rail li {
  padding-top: 14px;
}
.lifecycle.rail h3 {
  font-size: 1rem;
  margin: 0;
}

/* Six-stage rail (post → depart). Set the column count here rather than
   inline, so the breakpoints below can actually win. */
.lifecycle.six {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
@media (max-width: 1180px) {
  .lifecycle.six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 30px;
  }
}
@media (max-width: 880px) {
  .lifecycle,
  .lifecycle.six {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .lifecycle li {
    border-top: 0;
    border-left: 2px solid var(--dove);
    padding: 0 0 4px 20px;
  }
  .lifecycle li::before {
    top: 4px;
    left: -6px;
  }
}

/* half-width wall pieces (2×2 glimpse) */
.wall .w-half {
  grid-column: span 3;
}
@media (max-width: 980px) {
  .wall .w-half {
    grid-column: span 2;
  }
}

/* ── Findings ledger (why HelmRow): full-width ruled rows ────────────── */

.findings {
  border-top: 1px solid var(--dove);
}
.finding {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
  gap: clamp(24px, 4vw, 72px);
  padding: clamp(36px, 4.5vw, 60px) 0;
  border-bottom: 1px solid var(--dove);
  align-items: center;
}
.finding h3 {
  font-size: clamp(1.6rem, 1.4vw + 1rem, 2.2rem);
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.finding p {
  margin-bottom: 0;
  color: var(--ink-2);
}
.finding .trace {
  margin-top: 16px;
}
@media (max-width: 880px) {
  .finding {
    grid-template-columns: 1fr;
  }
}

/* ── Exhibit wall (product glimpse): asymmetric, ruled ───────────────── */

.wall {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
}
.wall > * {
  grid-column: span 2;
}
@media (max-width: 980px) {
  .wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wall > *
}
.wall h3 {
  margin: 18px 0 6px;
}
.wall .desc {
  color: var(--ink-2);
  font-size: 0.98rem;
  margin: 0;
}

/* ── Controls workpaper (DCAA) ───────────────────────────────────────── */

.controls-sheet {
  border: 1px solid var(--dove);
  border-radius: var(--r-card);
  background: var(--paper);
  overflow: hidden;
}
.controls-sheet table {
  width: 100%;
  border-collapse: collapse;
}
.controls-sheet th {
  font-family: var(--mono);
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-align: left;
  padding: 14px 22px;
  border-bottom: 1px solid var(--dove);
  background: var(--ivory);
}
.controls-sheet td {
  padding: 17px 22px;
  border-bottom: 1px solid var(--dove-soft);
  vertical-align: top;
}
.controls-sheet tr:last-child td {
  border-bottom: 0;
}
.controls-sheet td.c-name {
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.controls-sheet td.c-how {
  color: var(--ink-2);
  font-size: 0.98rem;
}
.controls-sheet td.c-tick {
  width: 46px;
}
.controls-sheet .tick {
  width: 19px;
  height: 19px;
}
@media (max-width: 720px) {
  .controls-sheet td.c-name {
    white-space: normal;
  }
  .controls-sheet td,
  .controls-sheet th {
    padding: 13px 16px;
  }
}
@media (max-width: 640px) {
  .controls-sheet thead {
    display: none;
  }
  .controls-sheet table,
  .controls-sheet tbody,
  .controls-sheet tr,
  .controls-sheet td {
    display: block;
    width: 100%;
  }
  .controls-sheet tr {
    position: relative;
    border-bottom: 1px solid var(--dove);
    padding: 15px 0;
  }
  .controls-sheet tr:last-child {
    border-bottom: 0;
  }
  .controls-sheet td {
    border-bottom: 0;
    padding: 3px 18px;
  }
  .controls-sheet td.c-name {
    padding-top: 4px;
    padding-right: 52px;
  }
  .controls-sheet td.c-tick {
    position: absolute;
    top: 15px;
    right: 10px;
    width: auto;
    padding: 0;
  }
}

.disclaimer {
  font-size: 0.86rem;
  color: var(--ink-3);
  max-width: 74ch;
}
.cover .disclaimer,
.site-foot .disclaimer {
  color: var(--on-aub-3);
}

/* ── Workspace (yourcompany.helmrow.com) ─────────────────────────────── */

.workspace-card {
  background: var(--white);
  border: 1px solid var(--dove);
  border-radius: var(--r-card);
  overflow: hidden;
}
.workspace-card .ws-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ivory);
  border-bottom: 1px solid var(--dove);
  padding: 12px 16px;
}
.workspace-card .ws-dots {
  display: flex;
  gap: 5px;
}
.workspace-card .ws-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dove);
}
.workspace-card .ws-url {
  flex: 1;
  font-family: var(--mono);
  font-size: 0.78rem;
  background: var(--white);
  border: 1px solid var(--dove);
  border-radius: 999px;
  padding: 7px 16px;
  color: var(--ink-2);
}
.workspace-card .ws-url b {
  color: var(--ink);
  font-weight: 700;
}
.workspace-card .ws-body {
  padding: 22px;
}

/* ── Chapter on cover stock (GovCon band, final CTA) ─────────────────── */

.cover .chapter-head p {
  color: var(--on-aub-2);
}
.cover-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 44px);
  border-top: 1px solid var(--aub-line);
  padding-top: 34px;
}
.cover-points > div h3 {
  font-size: 1.15rem;
  margin-bottom: 8px;
}
.cover-points > div p {
  color: var(--on-aub-2);
  font-size: 0.98rem;
  margin: 0;
}
@media (max-width: 880px) {
  .cover-points {
    grid-template-columns: 1fr;
  }
}

/* ── Final CTA ───────────────────────────────────────────────────────── */

.close-cta {
  border-top: 1px solid var(--dove);
  text-align: center;
  padding-top: clamp(88px, 11vw, 150px);
  padding-bottom: clamp(88px, 11vw, 150px);
}
.close-cta h2 {
  max-width: 21ch;
  margin: 0 auto 20px;
}
.close-cta .lede {
  margin: 0 auto 40px;
}
.close-cta .hero-ctas {
  justify-content: center;
}

/* ── Footer (the manifest) ───────────────────────────────────────────── */

.site-foot {
  background: var(--aub-well);
  color: var(--on-aub-2);
  font-size: 0.94rem;
}
.site-foot a {
  color: var(--on-aub-2);
  text-decoration: none;
}
.site-foot a:hover {
  color: var(--on-aub);
}
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr));
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(56px, 6vw, 88px) 0 44px;
}
.foot-grid .brand img {
  height: 30px;
}
.foot-grid .foot-line {
  margin-top: 18px;
  color: var(--on-aub-3);
  max-width: 34ch;
}
.foot-grid .foot-h {
  font-family: var(--mono);
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-aub-3);
  margin: 0 0 16px;
}
.foot-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
@media (max-width: 880px) {
  .foot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .foot-grid > div:first-child {
    grid-column: 1 / -1;
  }
}
.foot-legal {
  border-top: 1px solid var(--aub-line);
  padding: 26px 0 44px;
  display: grid;
  gap: 14px;
}
/* "Website designed by Vahzor": the designer's badge, placed as supplied.
   The emblem is a mask filled with currentColor, so it takes the footer's
   own text colour; not dimmed, not boxed, wording kept, per its house rules. */
.foot-legal .vahzor-badge {
  color: var(--on-aub-2);
  justify-self: start;
}
.vahzor-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-decoration: none;
  padding: 0.4em 0;
  transition: color 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.vahzor-badge:hover,
.vahzor-badge:focus-visible {
  color: var(--on-aub);
}
.vahzor-badge:hover span:not(.vahzor-badge__mark),
.vahzor-badge:focus-visible span:not(.vahzor-badge__mark) {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.vahzor-badge:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
  border-radius: 3px;
}
.vahzor-badge b {
  font-weight: 600;
}
.vahzor-badge__mark {
  display: block;
  flex: none;
  width: 1.5em;
  height: 1.5em;
  background-color: currentColor;
  -webkit-mask: url("/assets/brand/vahzor-mark.png") center / contain no-repeat;
          mask: url("/assets/brand/vahzor-mark.png") center / contain no-repeat;
}
@supports not ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .vahzor-badge__mark {
    background-color: transparent;
    background: url("/assets/brand/vahzor-mark.png") center / contain no-repeat;
  }
}
.foot-legal small {
  color: var(--on-aub-3);
  font-size: 0.82rem;
  max-width: 88ch;
}
.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 0;
  max-width: none;
}
.foot-links a {
  color: var(--on-aub-2);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
}
.foot-links a:hover {
  color: var(--on-aub);
  text-decoration: underline;
  text-decoration-color: var(--coral);
  text-underline-offset: 3px;
}

/* The 404 carries the legal links only, so the policies stay reachable
   from a page that has no full footer. */
.lost-foot .foot-legal {
  border-top: 0;
}

/* ── Demo form ───────────────────────────────────────────────────────── */

.demo-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(36px, 5vw, 88px);
  align-items: start;
}
@media (max-width: 880px) {
  .demo-grid {
    grid-template-columns: 1fr;
  }
}

.demo-form {
  background: var(--paper);
  border: 1px solid var(--dove);
  border-radius: var(--r-card);
  padding: clamp(24px, 3vw, 40px);
}
.demo-form .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 560px) {
  .demo-form .row {
    grid-template-columns: 1fr;
  }
}
.field {
  display: grid;
  gap: 7px;
  margin-bottom: 18px;
}
.field label {
  font-weight: 700;
  font-size: 0.92rem;
}
.field .hint {
  font-size: 0.82rem;
  color: var(--ink-3);
}
.field input,
.field select,
.field textarea {
  border: 1px solid var(--dove);
  border-radius: var(--r-input);
  background: var(--white);
  padding: 12px 14px;
  font-size: 1rem;
  transition: border-color 0.15s ease-out;
  width: 100%;
}
.field textarea {
  resize: vertical;
  min-height: 120px;
}
.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--ink-3);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline-offset: 0;
  outline-width: 2px;
  border-color: var(--coral);
}
.field.invalid input,
.field.invalid textarea {
  border-color: var(--bad);
}
.field .error {
  display: none;
  color: var(--bad);
  font-size: 0.85rem;
  font-weight: 600;
}
.field.invalid .error {
  display: block;
}

.form-note {
  display: none;
  border-radius: var(--r-input);
  padding: 14px 18px;
  font-size: 0.95rem;
  margin-top: 18px;
}
.form-note.show {
  display: block;
}
.form-note.ok {
  background: var(--ok-soft);
  color: var(--ok);
  font-weight: 600;
}
.form-note.err {
  background: var(--warn-soft);
  color: var(--warn);
  font-weight: 600;
}

/* ── Long-form pages ─────────────────────────────────────────────────── */

.page-hero {
  padding-top: clamp(56px, 7vw, 100px);
  padding-bottom: clamp(56px, 7vw, 100px);
}
.page-hero .lede {
  margin-top: 22px;
}
.page-hero .display {
  font-size: clamp(2.3rem, 3.6vw + 1rem, 4.2rem);
}

.duo {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 5fr);
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
}
/* Grid items default to min-width: auto, so one long unbreakable phrase can
   push an item past its track and the page past the viewport. The tracks
   already say minmax(0, …); this makes the items agree. */
.duo > * {
  min-width: 0;
}
.duo.flip > :first-child {
  order: 2;
}
@media (max-width: 880px) {
  .duo,
  .duo.flip > :first-child {
    grid-template-columns: 1fr;
    order: initial;
  }
}
.duo h3 {
  font-size: clamp(1.5rem, 1.2vw + 1rem, 2rem);
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.duo .prose p {
  color: var(--ink-2);
}
.duo + .duo {
  margin-top: clamp(56px, 7vw, 100px);
}

.prose ul {
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  max-width: var(--measure);
}
.prose ul li {
  display: flex;
  gap: 11px;
  align-items: baseline;
  color: var(--ink-2);
}
.prose ul .tick {
  width: 14px;
  height: 14px;
  transform: translateY(1px);
}

/* ── The seal (About) ────────────────────────────────────────────────── */

.seal-wrap {
  display: grid;
  justify-items: center;
}
.seal {
  width: min(250px, 60vw);
  height: auto;
  color: var(--aub);
}
.seal .ring {
  fill: none;
  stroke: currentColor;
}
.seal text {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3em;
  fill: currentColor;
}
.seal text .hr {
  fill: var(--coral-text);
}
.seal .dot {
  fill: var(--coral);
}

/* ── 404 ─────────────────────────────────────────────────────────────── */

.lost {
  min-height: 62vh;
  display: grid;
  align-content: center;
  padding-top: 80px;
  padding-bottom: 80px;
}
.lost .display {
  max-width: 18ch;
}
.lost .lede {
  margin-top: clamp(20px, 2.4vw, 30px);
}
.lost .hero-ctas {
  margin-top: clamp(32px, 3.5vw, 44px);
}

/* ── Reduced motion: the record simply is ────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }
  .reveal,
  .hero-seq .seq {
    opacity: 1;
    transform: none;
  }
  .reveal-tick .tick path,
  .hero-seq .hero-tick path {
    stroke-dashoffset: 0;
  }
  .hero-seq .hx-status-flip .s1,
  .hero-seq .hx-status-flip .s2 {
    opacity: 0;
  }
  .hero-seq .hx-status-flip .s3 {
    opacity: 1;
  }
}

/* ==========================================================================
   HOMEPAGE 2026-09-09 — product-led redesign
   Light HR environment for most of the page, a deep GovCon environment for
   the labor-accountability sequence, and one motif ("the Trace") connecting
   product states. Motion is CSS + IntersectionObserver only: this site has
   no build step, so no animation framework is introduced.
   ========================================================================== */

/* ── The Trace ───────────────────────────────────────────────────────────
   A hairline that draws itself between meaningful product states. It is
   never decorative: every Trace connects one state to the next. */

.trace {
  position: absolute;
  overflow: visible;
  pointer-events: none;
}
.trace path {
  fill: none;
  stroke: var(--coral);
  stroke-width: 1.5;
  stroke-linecap: round;
  /* No non-scaling-stroke here: it moves dash lengths into screen space,
     which makes the browser ignore pathLength="1" and renders the Trace as a
     1px-on/1px-off dotted line that never draws. Every Trace viewBox is thin
     on its perpendicular axis, so the stroke keeps its 1.5px weight anyway. */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0.55;
}

/* ── Hero sequence ─────────────────────────────────────────────────────── */

.seq {
  position: relative;
  padding-left: 26px;
}
.seq > .trace {
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  height: 100%;
}
.seq .card {
  /* .hx scrolls wide tables, and that clipped every node dot out of the
     gutter. Nothing in these four cards is wide enough to need it. */
  overflow: visible;
  border: 1px solid var(--dove);
  border-radius: var(--r-card);
  background: var(--white);
  margin-bottom: 12px;
  position: relative;
}
.seq .card::before {
  content: "";
  position: absolute;
  /* centred on the rail: seq padding (26) - 27.5 + half the dot (3.5) = 2,
     which is where the Trace path sits inside its 4px viewBox. Vertically it
     centres on the card it marks: these cards are different heights, and a
     fixed offset from the top drifts 27px off centre on the tallest. */
  left: -27.5px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral);
  opacity: 0;
}
.seq .hx-title {
  font-size: 15.5px;
}
.seq .role {
  margin: -4px 0 0;
  max-width: none;
}
.seq .unit {
  margin: 2px 0 0;
  max-width: none;
}
.seq .convert {
  margin-top: 12px;
}
.seq-event {
  font-family: var(--mono);
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 14px 0 0;
  position: relative;
}
.seq-event::before {
  content: "";
  position: absolute;
  left: -27.5px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral);
  opacity: 0;
}

/* The person card carries two identities. Only the name stays put, so the
   viewer reads one person moving through the system rather than two cards. */
.s-person .p-emp,
.s-person .unit {
  display: none;
}

/* Resting state before the sequence runs */
.seq [data-step] {
  opacity: 0;
  transform: translateY(10px);
}
.seq [data-step="1"] {
  opacity: 1;
  transform: none;
}
.hx-status-flip .s2 {
  opacity: 0;
}
.hx-status-flip .s1 {
  opacity: 1;
}

/* Running state, switched on by JS once the hero is in view */
.seq.run .trace path {
  animation: trace-draw 2.4s ease-out 2.6s forwards;
}
.seq.run [data-step="2"] { animation: rise 0.55s ease-out 3.9s forwards; }
.seq.run [data-step="3"] { animation: rise 0.55s ease-out 4.9s forwards; }
.seq.run [data-step="4"] { animation: rise 0.55s ease-out 5.9s forwards; }
.seq.run [data-step="5"] { animation: rise 0.55s ease-out 8.3s forwards; }
.seq.run [data-step="2"]::before { animation: node-in 0.4s ease-out 4.05s forwards; }
.seq.run [data-step="3"]::before { animation: node-in 0.4s ease-out 5.05s forwards; }
.seq.run [data-step="4"]::before { animation: node-in 0.4s ease-out 6.05s forwards; }
.seq.run [data-step="5"]::before { animation: node-in 0.4s ease-out 8.45s forwards; }
.seq.run .s-person::before { animation: node-in 0.4s ease-out 2.8s forwards; }
.seq.run .convert { animation: convert-press 1.1s ease-in-out 1.2s forwards; }
.seq.run .p-cand { animation: fade-out 0.4s ease-out 2.3s forwards; }
.seq.run .p-emp {
  display: inline-flex;
  opacity: 0;
  animation: fade-in 0.45s ease-out 2.45s forwards;
}
.seq.run .unit {
  display: block;
  opacity: 0;
  animation: fade-in 0.45s ease-out 2.55s forwards;
}
.seq.run .hx-status-flip .s1 { animation: fade-out 0.4s ease-out 7.2s forwards; }
.seq.run .hx-status-flip .s2 { animation: fade-in 0.45s ease-out 7.35s forwards; }
/* The payoff, once everything above has settled. It fills the sheet's empty
   lower half rather than leaving the sequence hanging in white space. */
.seq.run ~ .seq-close { animation: rise 0.6s ease-out 8.9s forwards; }

/* Both pills live in the head so the person card can flip identity in
   place. Once the candidate pill has faded it has to leave the layout too,
   or it keeps reserving ~140px and pushes the Active pill off the card. */
.seq.done .convert,
.seq.done .p-cand {
  display: none;
}
.seq .hx-head {
  flex-wrap: wrap;
}

.seq-close {
  margin: clamp(22px, 3vw, 38px) -26px 0;
  padding: clamp(18px, 2.2vw, 26px) 26px 0;
  border-top: 1px solid var(--dove);
  opacity: 0;
  transform: translateY(10px);
}
.seq-close b {
  display: block;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.seq-close span {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}

@keyframes trace-draw { to { stroke-dashoffset: 0; } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes node-in { to { opacity: 1; } }
@keyframes fade-in { to { opacity: 1; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes convert-press {
  0% { background: var(--coral-soft); }
  35% { background: var(--coral); color: var(--aub-well); }
  70% { background: var(--coral); color: var(--aub-well); opacity: 1; }
  100% { opacity: 0; background: var(--coral); color: var(--aub-well); }
}

/* ── Section 2 · the mental model ──────────────────────────────────────── */

.model {
  text-align: center;
}
.model h2 {
  max-width: 18ch;
  margin: 0 auto;
}
.model-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 44px);
  margin-top: clamp(48px, 6vw, 80px);
  text-align: left;
}
.model-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.model-grid > div {
  border-top: 1px solid var(--dove);
  padding-top: 20px;
}
.model-grid h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}
.model-grid p {
  color: var(--ink-2);
  font-size: 0.95rem;
  margin: 0;
}

/* ── Product window (a cropped, masked piece of the application) ───────── */

.win {
  border: 1px solid var(--dove);
  border-radius: var(--r-card);
  background: var(--white);
  /* it carries its own paper, so it carries its own ink: without this a
     light window on a cover section inherits ivory text and vanishes */
  color: var(--ink);
}
/* The window does not clip its own overflow: the callout labels hang in the
   margin beside it. Only the tab strip crops, which is the point of it. */
.win-bar {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--dove-soft);
  background: var(--paper);
  border-radius: var(--r-card) var(--r-card) 0 0;
}
.win-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dove);
}
.win-body {
  padding: 20px 22px 22px;
}
.win-tabs {
  display: flex;
  gap: 22px;
  border-bottom: 1px solid var(--dove-soft);
  margin: -4px 0 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
}
.win-tabs span {
  padding-bottom: 11px;
}
.win-tabs .on {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--coral);
}
.win-id {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}
.win-name {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 2px;
}
.win-kv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 22px;
  margin: 16px 0 0;
}
.win-kv div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--dove-soft);
  padding: 9px 0;
  font-size: 14px;
}
.win-kv dt {
  color: var(--ink-3);
}
.win-kv dd {
  margin: 0;
  font-weight: 700;
}
.win-rows {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
.win-rows li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* a long label and a long value have to be allowed to stack rather than
     force the window wider than a 320px viewport */
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--dove-soft);
  font-size: 14px;
}
.win-rows li:last-child {
  border-bottom: 0;
}
.win-rows b {
  font-weight: 800;
}
.win-group {
  font-family: var(--mono);
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 20px 0 2px;
}
.win-group:first-child {
  margin-top: 0;
}
.win.sm .win-body {
  padding: 20px 22px;
}

/* ── Section 3 · one employee, one record ──────────────────────────────── */

.record-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: clamp(36px, 6vw, 90px);
  align-items: center;
}
.record-copy > * {
  min-width: 0;
}
.record-copy .lede {
  margin: 18px 0 20px;
}
.record-copy p:last-child {
  color: var(--ink-2);
  margin: 0;
}
/* The record runs off its own right edge, so the viewer reads more product
   than the page shows. */
.record-stage {
  position: relative;
  /* The overhang is a fraction of the gutter, so the window always stops
     short of the viewport edge instead of scrolling the page at 1024. */
  margin-right: calc(var(--gutter) * -0.7);
}
/* The strip runs past the window's right edge and is cut there, so the
   viewer reads more record than the page shows. */
.record-stage .win-tabs {
  margin-right: -22px;
  -webkit-mask-image: linear-gradient(90deg, #fff 82%, transparent 100%);
  mask-image: linear-gradient(90deg, #fff 82%, transparent 100%);
}

/* ── Section 3b · candidate to colleague (closes the record section) ──── */

.track {
  list-style: none;
  margin: clamp(48px, 6vw, 80px) 0 0;
  padding: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 4vw, 56px);
}
.track > .trace {
  left: 0;
  right: 0;
  top: 46px;
  width: 100%;
  height: 4px;
}
.track.in-view > .trace path {
  animation: trace-draw 1.6s ease-out 0.2s forwards;
}
.track li {
  position: relative;
}
.track .card {
  border: 1px solid var(--dove);
  border-radius: var(--r-card);
  background: var(--white);
  padding: 20px 22px;
  display: grid;
  gap: 6px;
  justify-items: start;
  opacity: 0;
  transform: translateY(10px);
}
.track.in-view li:nth-child(2) .card { animation: rise 0.6s ease-out 0.35s forwards; }
.track.in-view li:nth-child(3) .card { animation: rise 0.6s ease-out 0.9s forwards; }
.track.in-view li:nth-child(4) .card { animation: rise 0.6s ease-out 1.45s forwards; }
.track .hx-sub {
  max-width: none;
}

/* ── Section 4 · the breathing point ───────────────────────────────────── */

.breathe {
  text-align: center;
}
/* The measure belongs on the heading, in heading units. Capping the wrapper
   in body ch squeezed a display headline into a column one word wide. */
.breathe h2 {
  max-width: 22ch;
  margin: 0 auto;
}
.breathe .lede {
  max-width: 52ch;
  margin: 22px auto 0;
}
.notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
  margin-top: clamp(48px, 6vw, 76px);
  text-align: left;
}
.notes .card {
  border: 1px solid var(--dove);
  border-radius: var(--r-card);
  background: var(--white);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  max-width: none;
}

/* ── Section 6 · what needs attention ──────────────────────────────────── */

.attn-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 5fr);
  gap: clamp(36px, 6vw, 90px);
  align-items: center;
}
.attn-copy > * {
  min-width: 0;
}
.attn-copy .lede {
  margin-top: 18px;
}
.attn-stage {
  max-width: 420px;
}

/* ── Environment transitions ───────────────────────────────────────────── */

/* The GovCon chapter's close: the correction card, the two actions and the
   disclaimer sit on the section's centre line. */
.govcon .hero-ctas {
  justify-content: center;
}
.govcon .disclaimer {
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
}

/* ── Section 8 · the labor ladder ──────────────────────────────────────── */

.ladder {
  list-style: none;
  margin: clamp(48px, 6vw, 76px) 0 0;
  padding: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 22px);
}
.ladder > .trace {
  left: 0;
  right: 0;
  /* the 11px node at top:1px centres on 6.5; the path sits at y=2 of the
     4px box, so the box starts at 4.5 for the two to line up */
  top: 4.5px;
  width: 100%;
  height: 4px;
}
.ladder > .trace path {
  opacity: 0.75;
}
.ladder.in-view > .trace path {
  animation: trace-draw 3.4s ease-out 0.2s forwards;
}
.ladder li {
  position: relative;
  padding-top: 30px;
  opacity: 0.25;
  transition: opacity 0.5s ease-out;
}
.ladder li::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--aub-line);
  background: var(--aub-deep);
  transition: border-color 0.4s ease-out, background-color 0.4s ease-out;
}
.ladder.in-view li {
  opacity: 1;
}
.ladder.in-view li::before {
  border-color: var(--coral);
  background: var(--coral);
}
.ladder.in-view li:nth-child(2) { transition-delay: 0.3s; }
.ladder.in-view li:nth-child(3) { transition-delay: 0.85s; }
.ladder.in-view li:nth-child(4) { transition-delay: 1.4s; }
.ladder.in-view li:nth-child(5) { transition-delay: 1.95s; }
.ladder.in-view li:nth-child(6) { transition-delay: 2.5s; }
.ladder.in-view li:nth-child(7) { transition-delay: 3.05s; }
.ladder.in-view li:nth-child(2)::before { transition-delay: 0.3s; }
.ladder.in-view li:nth-child(3)::before { transition-delay: 0.85s; }
.ladder.in-view li:nth-child(4)::before { transition-delay: 1.4s; }
.ladder.in-view li:nth-child(5)::before { transition-delay: 1.95s; }
.ladder.in-view li:nth-child(6)::before { transition-delay: 2.5s; }
.ladder.in-view li:nth-child(7)::before { transition-delay: 3.05s; }
.rung-k {
  display: block;
  font-family: var(--mono);
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--on-aub-3);
  margin-bottom: 7px;
}
.rung-v {
  display: block;
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--on-aub);
  line-height: 1.25;
}
.rung-t {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--coral);
}

.correction {
  margin: clamp(40px, 5vw, 62px) auto 0;
  max-width: 460px;
  border: 1px solid var(--aub-line);
  border-radius: var(--r-card);
  background: rgba(246, 244, 239, 0.045);
  color: var(--on-aub);
  padding: 18px 20px;
}
.correction .hx-title,
.correction dd {
  color: var(--on-aub);
}
.correction .hx-sub,
.correction dt {
  color: var(--on-aub-3);
}
.correction .hx-kv {
  border-bottom-color: var(--aub-line);
}
.correction .hx-strike {
  color: var(--on-aub-3);
}
/* the change arrow carries meaning, so it has to clear AA on dark stock too */
.correction .hx-arrow,
.win.dark .hx-arrow {
  color: var(--coral-on-dark);
}

/* ── Section 9 · reporting ─────────────────────────────────────────────── */

.report-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 5fr);
  gap: clamp(36px, 6vw, 90px);
  align-items: center;
}
.report-grid > * {
  min-width: 0;
}
.report-grid .lede {
  margin-top: 18px;
}
.win.dark {
  border-color: var(--aub-line);
  background: rgba(246, 244, 239, 0.045);
  color: var(--on-aub);
}
.win.dark .win-bar {
  background: rgba(246, 244, 239, 0.05);
  border-bottom-color: var(--aub-line);
}
.win.dark .win-bar i {
  background: var(--aub-line);
}
.win.dark .win-group {
  color: var(--on-aub-3);
}
.win.dark .win-rows li {
  border-bottom-color: var(--aub-line);
  color: var(--on-aub-2);
}
.win.dark .win-rows b {
  color: var(--on-aub);
}
.win.dark .hx-sub {
  color: var(--on-aub-3);
}
.win.dark .hx-note {
  background: rgba(246, 244, 239, 0.06);
  border-left-color: var(--coral);
  color: var(--on-aub-2);
}
.split {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  margin: 12px 0 4px;
  background: var(--aub-line);
}
.split span {
  width: var(--w);
}
.split .d,
.k.d {
  background: var(--coral);
}
.split .i,
.k.i {
  background: var(--on-aub-3);
}
.split .u,
.k.u {
  background: var(--aub-line);
}
.legend span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.k {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  display: inline-block;
}

/* ── Section 10 · the workspace ────────────────────────────────────────── */

.workspace {
  text-align: center;
}
.workspace h2 {
  max-width: 16ch;
  margin: 0 auto;
}
.workspace .lede {
  max-width: 52ch;
  margin: 20px auto 0;
}
.ws-domain {
  font-family: var(--mono);
  /* A domain has no break opportunity, so it has to be sized to fit the
     narrowest viewport rather than relying on wrapping. */
  font-size: clamp(0.75rem, 3.4vw, 1.35rem);
  overflow-wrap: anywhere;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: clamp(40px, 5vw, 64px) auto 0;
  max-width: none;
  color: var(--ink-3);
}
.ws-domain b {
  color: var(--ink);
  font-weight: 800;
}

/* ── Section 11 · the film invitation ──────────────────────────────────── */

.film-inner {
  text-align: center;
}
.film-inner h2 {
  max-width: 20ch;
  margin: 0 auto;
}
.film-inner .lede {
  max-width: 56ch;
  margin: 20px auto 34px;
}
.btn .play {
  margin-right: -2px;
}
.btn:hover .play {
  transform: none;
}

/* ── Film modal ────────────────────────────────────────────────────────── */

.film-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: var(--gutter);
}
/* display on the class outranks the UA's [hidden] rule, so say it here. */
.film-modal[hidden] {
  display: none;
}
.film-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(36, 23, 41, 0.72);
}
.film-dialog {
  position: relative;
  /* sized for a 1080p film rather than for prose */
  width: min(1040px, 100%);
  max-height: calc(100vh - var(--gutter) * 2);
  overflow: auto;
  background: var(--ivory);
  border: 1px solid var(--dove);
  border-radius: var(--r-panel);
  padding: clamp(18px, 2.4vw, 30px);
}
.film-x {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  background: none;
  border: 0;
  padding: 8px;
  border-radius: 8px;
  color: var(--ink-2);
  cursor: pointer;
  line-height: 0;
}
.film-x:hover {
  background: var(--dove-soft);
  color: var(--ink);
}
.film-slot video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-input);
  display: block;
  background: var(--aub-deep);
}
.film-fallback {
  color: var(--ink-2);
  margin: 0;
}
/* The invitation shows the film's own opening frame rather than describing
   it. The poster is a button: pressing it opens the dialog and plays. */
.film-poster {
  position: relative;
  display: block;
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 0;
  border: 1px solid var(--dove);
  border-radius: var(--r-panel);
  background: var(--white);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s ease-out, transform 0.2s ease-out;
}
.film-poster img {
  width: 100%;
  height: auto;
  display: block;
}
.film-poster:hover {
  border-color: var(--ink-3);
  transform: translateY(-2px);
}
.film-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.film-play svg {
  width: 66px;
  height: 66px;
  padding: 21px 19px 21px 23px;
  border-radius: 50%;
  background: var(--coral);
  color: var(--aub-well);
  box-sizing: border-box;
  transition: transform 0.2s ease-out;
}
.film-poster:hover .film-play svg {
  transform: scale(1.06);
}
.film-cta {
  display: block;
  border-top: 1px solid var(--dove);
  padding: 15px 20px;
  font-weight: 800;
  font-size: 1rem;
  color: var(--ink);
  text-align: left;
}

@media (prefers-reduced-motion: reduce) {
  .film-poster,
  .film-play svg {
    transition: none;
  }
  .film-poster:hover {
    transform: none;
  }
  .film-poster:hover .film-play svg {
    transform: none;
  }
}

/* ── Mobile ────────────────────────────────────────────────────────────── */

@media (max-width: 980px) {
  .model-grid {
    grid-template-columns: 1fr 1fr;
  }
  .ladder {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 30px;
  }
  /* Same reasoning as the track: draw the vertical Trace in CSS rather than
     re-pointing an SVG path against its own viewBox. */
  .ladder > .trace {
    display: none;
  }
  .ladder::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 6px;
    bottom: 6px;
    width: 1.5px;
    background: var(--coral);
    opacity: 0.75;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 3.4s cubic-bezier(0.16, 0.84, 0.3, 1) 0.2s;
  }
  .ladder.in-view::before {
    transform: scaleY(1);
  }
  .ladder li {
    padding-top: 0;
    padding-left: 26px;
  }
  .ladder li::before {
    top: 6px;
  }
}

@media (max-width: 880px) {
  .record-grid,
  .attn-grid,
  .report-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(30px, 5vw, 48px);
  }
  .record-stage {
    margin-right: 0;
  }
  .attn-stage {
    max-width: none;
  }
  /* The horizontal story becomes a vertical one. The SVG steps aside and a
     CSS rule draws the Trace instead: re-pointing the path through CSS `d`
     fights the viewBox's aspect ratio and stretches the stroke enormously. */
  .track {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .track > .trace {
    display: none;
  }
  .track::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 10px;
    bottom: 10px;
    width: 1.5px;
    background: var(--coral);
    opacity: 0.55;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 1.6s cubic-bezier(0.16, 0.84, 0.3, 1) 0.2s;
  }
  .track.in-view::before {
    transform: scaleY(1);
  }
  .track li {
    padding-left: 34px;
  }
  .track li::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 28px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--coral);
  }
}

@media (max-width: 620px) {
  .notes,
  .model-grid,
  .ladder {
    grid-template-columns: 1fr;
  }
  .ladder li {
    padding-top: 0;
    padding-left: 26px;
  }
  .ladder li::before {
    top: 6px;
  }
  .win-kv {
    grid-template-columns: 1fr;
  }
  .seq {
    padding-left: 20px;
  }
  .seq .card::before,
  .seq-event::before {
    /* same centring against the narrower 20px rail inset */
    left: -21.5px;
  }
}

/* ── Reduced motion: show the finished state, animate nothing ──────────── */

@media (prefers-reduced-motion: reduce) {
  .seq [data-step],
  .seq-close,
  .track .card {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .seq .card::before,
  .seq-event::before {
    opacity: 1 !important;
    animation: none !important;
  }
  .trace path {
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }
  .seq .convert,
  .seq .p-cand,
  .hx-status-flip .s1 {
    display: none !important;
  }
  .seq .p-emp,
  .seq .unit {
    display: block !important;
    opacity: 1 !important;
    animation: none !important;
  }
  .seq .p-emp {
    display: inline-flex !important;
  }
  .hx-status-flip .s2 {
    opacity: 1 !important;
    animation: none !important;
  }
  .track::before,
  .ladder::before {
    transform: scaleY(1) !important;
    transition: none !important;
  }
  .ladder li,
  .ladder li::before {
    opacity: 1 !important;
    transition: none !important;
  }
  .ladder li::before {
    border-color: var(--coral) !important;
    background: var(--coral) !important;
  }
}

/* ==========================================================================
   SHARED DEEP-PAGE SYSTEM
   Product, GovCon, Compliance, About and Request Demo are built from the
   pieces below so they read as the homepage's work. The rules the homepage
   set hold here: text never animates, every sequence plays once and settles,
   and only opacity and transform move.
   ========================================================================== */

/* ── Page hero with a visual beside it ─────────────────────────────────── */

.hero-split .hero-grid {
  align-items: center;
}
.hero-split .hero-copy {
  padding-bottom: 0;
}
.hero-art {
  min-width: 0;
}
/* One window, held to a readable width and pulled toward the outer margin */
.hero-art-single {
  max-width: 460px;
  margin-left: auto;
}

/* Layered fragments: three pieces of the product overlapping, the way an
   open record actually sits behind a form. The ring is the cover stock
   showing through, so the cards separate without a shadow. */
.stack {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.stack > div {
  position: relative;
}
.stack-a {
  grid-column: 1 / 11;
  grid-row: 1;
  z-index: 3;
}
.stack-b {
  grid-column: 4 / 13;
  grid-row: 2;
  margin-top: -16px;
  z-index: 2;
}
.stack-c {
  grid-column: 2 / 12;
  grid-row: 3;
  margin-top: -16px;
  z-index: 1;
}
.stack .win {
  box-shadow: 0 0 0 7px var(--aub);
}

/* ── Product story (copy beside one large product window) ──────────────── */

.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.story-grid > * {
  min-width: 0;
}
.story-grid.flip .story-copy {
  order: 2;
}
.story-copy h2 {
  margin: 0;
}
.story-copy .lede {
  margin: 20px 0 24px;
}
.story-visual {
  min-width: 0;
}

/* Capability labels: the short list under a story, never a feature grid. */
.caps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: 46ch;
}
.caps li {
  display: flex;
  gap: 11px;
  align-items: baseline;
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.5;
}
.cover .caps li {
  color: var(--on-aub-2);
}

.story-copy .more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 22px;
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--coral-text);
  text-decoration: none;
}
.cover .story-copy .more {
  color: var(--coral-on-dark);
}
.story-copy .more:hover {
  text-decoration: underline;
  text-decoration-color: var(--coral);
  text-underline-offset: 3px;
}

/* ── Rungs: one employee climbing through the platform (Product) ────────── */

.rungs {
  list-style: none;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 0 0 32px;
  position: relative;
}
.rungs::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 24px;
  bottom: 24px;
  width: 1.5px;
  background: var(--coral);
  opacity: 0.6;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 3s cubic-bezier(0.16, 0.84, 0.3, 1) 0.2s;
}
.rungs.in-view::before {
  transform: scaleY(1);
}
.rungs li {
  position: relative;
  opacity: 0.25;
  transition: opacity 0.5s ease-out;
}
.rungs li + li {
  margin-top: 12px;
}
.rungs li::before {
  content: "";
  position: absolute;
  left: -32px;
  top: 22px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--dove);
  background: var(--paper);
  transition: border-color 0.4s ease-out, background-color 0.4s ease-out;
}
.rungs.in-view li {
  opacity: 1;
}
.rungs.in-view li::before {
  border-color: var(--coral);
  background: var(--coral);
}
.rungs.in-view li:nth-child(2),
.rungs.in-view li:nth-child(2)::before { transition-delay: 0.36s; }
.rungs.in-view li:nth-child(3),
.rungs.in-view li:nth-child(3)::before { transition-delay: 0.72s; }
.rungs.in-view li:nth-child(4),
.rungs.in-view li:nth-child(4)::before { transition-delay: 1.08s; }
.rungs.in-view li:nth-child(5),
.rungs.in-view li:nth-child(5)::before { transition-delay: 1.44s; }
.rungs.in-view li:nth-child(6),
.rungs.in-view li:nth-child(6)::before { transition-delay: 1.8s; }
.rungs.in-view li:nth-child(7),
.rungs.in-view li:nth-child(7)::before { transition-delay: 2.16s; }
.rungs.in-view li:nth-child(8),
.rungs.in-view li:nth-child(8)::before { transition-delay: 2.52s; }
.rungs .hx {
  border: 1px solid var(--dove);
  border-radius: var(--r-card);
  background: var(--white);
  padding: 15px 18px;
}
.rungs .hx-head {
  margin-bottom: 4px;
}
.rungs .hx-pill {
  margin-bottom: 0;
}
.rungs .hx-sub {
  margin: 0;
}

/* ── Vertical labor ladder (GovCon) ────────────────────────────────────── */

.ladder.tall {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 24px;
  max-width: 820px;
}
.ladder.tall::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 1.5px;
  background: var(--coral);
  opacity: 0.75;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 3.4s cubic-bezier(0.16, 0.84, 0.3, 1) 0.2s;
}
.ladder.tall.in-view::before {
  transform: scaleY(1);
}
.ladder.tall li {
  padding-top: 0;
  padding-left: 30px;
}
.ladder.tall li::before {
  top: 3px;
}
@media (min-width: 760px) {
  .ladder.tall li {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 22px;
    align-items: baseline;
  }
  .ladder.tall .rung-k {
    margin-bottom: 0;
  }
}

/* ── Control explorer (Compliance) ─────────────────────────────────────────
   Six stages driving one window. Built on radio inputs rather than script:
   the browser gives arrow-key navigation and a labelled group for free, and
   with :has() unsupported the six windows simply stack and stay readable. */

.explorer {
  display: grid;
  grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.ex-stages {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  display: grid;
  gap: 4px;
}
.ex-opt {
  position: relative;
  min-width: 0;
}
.ex-opt input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}
.ex-opt label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 14px;
  padding: 13px 16px;
  border: 1px solid transparent;
  border-radius: var(--r-input);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.ex-n {
  grid-row: 1 / 3;
  font-family: var(--mono);
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--on-aub-3);
  padding-top: 4px;
  transition: color 0.2s ease;
}
.ex-h {
  font-weight: 800;
  font-size: 1rem;
  color: var(--on-aub);
}
.ex-d {
  font-size: 0.87rem;
  line-height: 1.45;
  color: var(--on-aub-3);
}
.ex-opt label:hover {
  background: rgba(246, 244, 239, 0.055);
}
.ex-opt input:checked + label {
  background: rgba(231, 111, 81, 0.13);
  border-color: var(--coral);
}
.ex-opt input:checked + label .ex-n {
  color: var(--coral);
}
.ex-opt input:focus-visible + label {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}
.ex-view {
  display: grid;
  gap: 18px;
  min-width: 0;
}
.ex-panel {
  min-width: 0;
}
@supports selector(:has(*)) {
  .ex-view {
    gap: 0;
  }
  .ex-panel {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
  }
  .explorer:has(#ex-0:checked) .ex-panel[data-ex="0"],
  .explorer:has(#ex-1:checked) .ex-panel[data-ex="1"],
  .explorer:has(#ex-2:checked) .ex-panel[data-ex="2"],
  .explorer:has(#ex-3:checked) .ex-panel[data-ex="3"],
  .explorer:has(#ex-4:checked) .ex-panel[data-ex="4"],
  .explorer:has(#ex-5:checked) .ex-panel[data-ex="5"] {
    opacity: 1;
    visibility: visible;
    animation: ex-in 0.32s cubic-bezier(0.16, 0.84, 0.3, 1);
  }
}
@keyframes ex-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── Audit history that accumulates (Compliance) ───────────────────────── */

.hist-rows {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
.hist-rows li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 3px 16px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--aub-line);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.hist-rows li:last-child {
  border-bottom: 0;
}
.hist.in-view .hist-rows li {
  opacity: 1;
  transform: none;
}
.hist.in-view .hist-rows li:nth-child(2) { transition-delay: 0.3s; }
.hist.in-view .hist-rows li:nth-child(3) { transition-delay: 0.6s; }
.hist.in-view .hist-rows li:nth-child(4) { transition-delay: 0.9s; }
.hist.in-view .hist-rows li:nth-child(5) { transition-delay: 1.2s; }
.hist.in-view .hist-rows li:nth-child(6) { transition-delay: 1.5s; }
.hist-t {
  font-family: var(--mono);
  font-size: var(--micro);
  font-weight: 500;
  color: var(--on-aub-3);
}
.hist-b {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.hist-b b {
  font-size: 14px;
  font-weight: 800;
  color: var(--on-aub);
}
.hist-b span,
.hist-w {
  font-size: 12.5px;
  color: var(--on-aub-3);
  line-height: 1.45;
}
.hist-w {
  text-align: right;
}

/* ── Detail accordion (Product, Compliance) ────────────────────────────── */

.acc {
  max-width: 900px;
  border-top: 1px solid var(--dove);
}
.acc-item {
  border-bottom: 1px solid var(--dove);
}
.acc-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.acc-item summary::-webkit-details-marker {
  display: none;
}
.acc-item summary:hover {
  color: var(--coral-text);
}
.acc-mark {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}
.acc-mark::before,
.acc-mark::after {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 1.6px;
  background: var(--coral);
}
.acc-mark::after {
  transform: rotate(90deg);
  transition: transform 0.25s ease;
}
.acc-item[open] .acc-mark::after {
  transform: rotate(0deg);
}
.acc-body {
  padding: 0 0 24px;
  max-width: 68ch;
}
.acc-body p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.98rem;
  line-height: 1.65;
}

/* ── Split call to action band ─────────────────────────────────────────── */

.split-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 60px);
  flex-wrap: wrap;
}
.split-cta > :first-child {
  flex: 1 1 420px;
  min-width: 0;
}
.split-cta h2 {
  margin: 0;
  max-width: 17ch;
}
.split-cta .lede {
  margin-top: 16px;
}
.split-cta .hero-ctas {
  flex: none;
}

/* ── About: essay and principles ───────────────────────────────────────── */

.chapter-head.narrow {
  max-width: 660px;
}
.essay {
  max-width: 62ch;
}
.essay p {
  margin: 0 0 22px;
  color: var(--ink-2);
  font-size: clamp(1.02rem, 0.3vw + 1rem, 1.14rem);
  line-height: 1.7;
}
.essay p:last-child {
  margin-bottom: 0;
}

.principles {
  list-style: none;
  margin: 0;
  padding: 30px 0 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3.5vw, 52px);
}
.principles > .trace {
  left: 0;
  right: 0;
  top: 5px;
  width: 100%;
  height: 4px;
}
.principles.in-view > .trace path {
  animation: trace-draw 2.6s ease-out 0.2s forwards;
}
.principles li {
  position: relative;
  min-width: 0;
}
.principles li::before {
  content: "";
  position: absolute;
  top: -30px;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--dove);
  background: var(--paper);
  transition: border-color 0.4s ease-out, background-color 0.4s ease-out;
}
.principles.in-view li::before {
  border-color: var(--coral);
  background: var(--coral);
}
.principles.in-view li:nth-child(2)::before { transition-delay: 0.75s; }
.principles.in-view li:nth-child(3)::before { transition-delay: 1.5s; }
.principles h3 {
  font-size: 1.18rem;
  margin: 0 0 12px;
}
.principles p {
  margin: 0 0 16px;
  color: var(--ink-2);
  font-size: 0.97rem;
  line-height: 1.6;
}
.principles .caps li::before {
  content: none;
}
.principles .caps {
  gap: 8px;
}
.principles .caps li {
  font-size: 0.9rem;
}

/* ── Request a demo: form first, product proof beside it ───────────────── */

.demo-hero {
  padding-bottom: clamp(40px, 5vw, 66px);
}
.demo-body {
  background: var(--ivory);
  padding: clamp(48px, 6vw, 84px) 0 clamp(64px, 8vw, 110px);
}
/* Form left, proof right — and the form is first in the source, so a phone
   gets the thing it came to do before the argument for doing it. */
.demo-grid {
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}
.demo-proof h2 {
  margin: 0;
  max-width: 16ch;
}
.show-list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 22px;
}
.show-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
}
.show-n {
  font-family: var(--mono);
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--coral-text);
  padding-top: 4px;
}
.show-list b {
  display: block;
  font-size: 1rem;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.show-list span {
  color: var(--ink-2);
  font-size: 0.93rem;
  line-height: 1.55;
}
.demo-visual {
  margin-top: 32px;
}

/* ── Deep-page responsive ──────────────────────────────────────────────── */

@media (max-width: 980px) {
  .explorer {
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  }
  .principles {
    gap: 26px;
  }
}

@media (max-width: 880px) {
  /* .three carries a class, so it outranks the shared .model-grid stacking
     rules further up the sheet and has to stack itself */
  .model-grid.three {
    grid-template-columns: minmax(0, 1fr);
  }
  .story-grid,
  .story-grid.flip .story-copy {
    grid-template-columns: minmax(0, 1fr);
    order: initial;
  }
  .story-grid {
    gap: clamp(30px, 5vw, 48px);
  }
  .hero-art-single {
    max-width: none;
  }
  /* the explorer becomes a chip grid over one window */
  .explorer {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }
  .ex-stages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .ex-d {
    display: none;
  }
  .principles {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 0;
    gap: 30px;
  }
  .principles > .trace {
    display: none;
  }
  .principles li {
    border-top: 1px solid var(--dove);
    padding-top: 28px;
  }
  .principles li::before {
    top: -6px;
  }
  .demo-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-proof {
    max-width: 620px;
  }
  .split-cta .hero-ctas {
    flex: 1 1 100%;
  }
}

@media (max-width: 620px) {
  .stack {
    grid-template-columns: minmax(0, 1fr);
  }
  .stack-a,
  .stack-b,
  .stack-c {
    grid-column: 1;
    margin-top: 0;
  }
  .stack-b,
  .stack-c {
    grid-row: auto;
  }
  .stack {
    gap: 12px;
  }
  .stack .win {
    box-shadow: none;
  }
  .rungs {
    padding-left: 26px;
  }
  .rungs li::before {
    left: -26px;
  }
  .ladder.tall li {
    padding-left: 26px;
  }
  .ex-stages {
    grid-template-columns: minmax(0, 1fr);
  }
  .hist-rows li {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .hist-w {
    grid-column: 2;
    text-align: left;
  }
  .acc-item summary {
    font-size: 0.99rem;
    gap: 16px;
  }
}

/* Reduced motion: the finished state, immediately, with nothing to wait for
   and nothing to scroll toward. */
@media (prefers-reduced-motion: reduce) {
  .rungs::before,
  .ladder.tall::before {
    transform: scaleY(1) !important;
    transition: none !important;
  }
  .rungs li,
  .rungs li::before,
  .hist-rows li,
  .principles li::before {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .rungs li::before,
  .principles li::before {
    border-color: var(--coral) !important;
    background: var(--coral) !important;
  }
  .ex-panel {
    animation: none !important;
  }
  .acc-mark::after {
    transition: none !important;
  }
}

/* ── Journal (/blog/) ─────────────────────────────────────────────────────
   Editorial pages in the site's own register: the article opens on cover
   stock like every long-form page, then reads on ivory at a 46rem measure.
   Website captures sit a step wider than the text (60rem) in the product
   window's frame: the same dove border and card radius, the same three-dot
   strip, with the address named in the record register. */

.crumbs ol {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  row-gap: 6px;
  font-size: 0.92rem;
  color: var(--on-aub-2);
}
.crumbs li {
  min-width: 0;
}
.crumbs li + li::before {
  content: "/";
  margin: 0 10px;
  color: var(--on-aub-3);
}
.crumbs a {
  color: var(--on-aub-2);
  text-decoration: none;
}
.crumbs a:hover {
  color: var(--on-aub);
  text-decoration: underline;
}
.crumbs [aria-current] {
  color: var(--on-aub);
}
/* The current page's crumb repeats the H1 just below it, so it keeps to one
   line and truncates rather than wrapping the trail. */
.crumbs li:last-child:not(:first-child) {
  flex: 1 1 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-col,
.post-body > * {
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}
.post-head {
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(48px, 6vw, 88px);
}
.post-head .tag {
  margin-bottom: 16px;
}
.post-head .display.post-title {
  /* the documented form-hero step: a long title at the demo page's scale */
  font-size: clamp(2.1rem, 2.6vw + 1rem, 3.4rem);
  line-height: 1.06;
}
.post-head .lede {
  margin-top: 22px;
}
.post-meta {
  margin: 26px 0 0;
  font-size: 0.95rem;
  color: var(--on-aub-2);
}
.post-meta > span:not(.sep) {
  white-space: nowrap;
}
.post-meta b {
  color: var(--on-aub);
  font-weight: 700;
}

.post-body {
  padding-top: clamp(36px, 5vw, 64px);
  padding-bottom: clamp(64px, 8vw, 112px);
}
.post-body > p {
  line-height: 1.7;
  color: var(--ink-2);
  margin-bottom: 1.2em;
}
.post-body > p a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 2px;
}
.post-body > p a:hover {
  color: var(--coral-text);
}
/* Lists and tables in the reading column: the pencil marks the bullets; a
   table reads like the legal register (mono column heads, hairline rows) and
   stacks each row under its own column labels on a phone. */
.post-body > ul {
  margin-top: 0;
  margin-bottom: 1.4em;
  padding-left: 1.25em;
  color: var(--ink-2);
  line-height: 1.6;
}
.post-body > ul li {
  margin-bottom: 0.45em;
  padding-left: 0.2em;
}
.post-body > ul li::marker {
  color: var(--coral);
}
.post-body > ul b {
  color: var(--ink);
}
.post-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.4em;
  margin-bottom: 1.8em;
  font-size: 0.95rem;
  line-height: 1.5;
}
.post-table th,
.post-table td {
  text-align: left;
  vertical-align: top;
  padding: 12px 18px 12px 0;
  border-bottom: 1px solid var(--dove-soft);
  color: var(--ink-2);
}
.post-table thead th {
  font-family: var(--mono);
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom-color: var(--dove);
  padding-bottom: 10px;
}
.post-table td:first-child {
  color: var(--ink);
  font-weight: 700;
}
@media (max-width: 620px) {
  .post-table,
  .post-table thead,
  .post-table tbody,
  .post-table tr,
  .post-table th,
  .post-table td {
    display: block;
  }
  .post-table thead {
    display: none;
  }
  .post-table tr {
    border-bottom: 1px solid var(--dove);
    padding: 14px 0;
  }
  .post-table td {
    border: 0;
    padding: 3px 0;
  }
  .post-table td:first-child {
    padding-bottom: 6px;
  }
  .post-table td:not(:first-child)::before {
    content: attr(data-th);
    display: block;
    font-family: var(--mono);
    font-size: var(--micro);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 6px 0 2px;
  }
}
.post-body > h2 {
  font-size: clamp(1.5rem, 1.2vw + 1rem, 2rem);
  line-height: 1.15;
  margin-top: 2.1em;
  margin-bottom: 0.6em;
}
.post-body > .post-fig {
  max-width: 60rem;
  /* figure.shot zeroes its margins; the figure centres on the column */
  margin-left: auto;
  margin-right: auto;
  margin-top: clamp(32px, 4vw, 52px);
  margin-bottom: clamp(36px, 4.5vw, 60px);
}
.post-body > .post-fig:first-child {
  margin-top: 0;
}
.post-ctas {
  margin-top: 30px;
}

/* The capture's frame carries the browser strip; the enlarge button is the
   image alone, so its name and its visible content agree. */
.site-frame {
  border: 1px solid var(--dove);
  border-radius: var(--r-card);
  background: var(--white);
  overflow: hidden;
  transition: border-color 0.15s ease-out;
}
.site-frame:has(.shot-open:hover) {
  border-color: var(--ink-3);
}
.site-frame .shot-open {
  border: 0;
  border-radius: 0;
}
.site-frame .shot-open:focus-visible {
  outline-offset: -3px;
}
.site-frame .win-bar,
.post-card-img .win-bar {
  align-items: center;
  border-radius: 0;
}
.win-bar .url {
  margin-left: 10px;
  font-family: var(--mono);
  font-size: var(--micro);
  letter-spacing: 0.06em;
  color: var(--ink-2);
}

.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(40px, 5vw, 64px);
}
.post-card {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.post-card-img {
  border: 1px solid var(--dove);
  border-radius: var(--r-card);
  background: var(--white);
  overflow: hidden;
}
.post-card-img img {
  display: block;
  width: 100%;
  height: auto;
}
.post-card .tag {
  margin-bottom: 12px;
}
.post-card-h {
  font-size: clamp(1.5rem, 1.3vw + 0.9rem, 2.1rem);
  line-height: 1.12;
  margin-bottom: 14px;
}
.post-card-h a {
  text-decoration: none;
}
.post-card-h a:hover {
  color: var(--coral-text);
  text-decoration: underline;
}
.post-card-copy > p {
  color: var(--ink-2);
}
.post-card-meta {
  margin: 0;
  color: var(--ink-2);
}
@media (max-width: 880px) {
  .post-card {
    grid-template-columns: minmax(0, 1fr);
  }
}