/* assets/rn/pages/audits.css — /audits.html (3-audits-tom). Linked LAST, after components.css; unlayered, so it beats
   the legacy layer with single classes. Everything here is scoped to classes that exist only on this page (au-*), plus
   the hero's .audit-hero (kept for base.css's display H1 and its red emphasis).

   The audit family: ink and paper, marks in the text colour, no lime, yellow or blue. Red appears twice: the H1 phrase
   (base.css 6) and the Example readout's Now finding (chip and rule). Motion (assets/rn/pages/audits.js and the toolkit):
   the readout assembles like the hero's findings list, the how-it-works flow draws its line and lights its steps, the
   AI map is a data-rn-timeline, the career rule draws on scroll (components.css 10), and the figures roll on reels.
   Holds are opacity and transform only, released by .rn-in; reduced motion and the site pause show the final state.

    1. Sections and heads     4. What you get       7. #ai: the offline AI map   10. Holds, failsafe, forced colours
    2. Hero, readout, proof   5. How it works       8. #tom: career, On camera
    3. What gets reviewed     6. #tom: the person   9. FAQ and the band                                              */

/* 1. Sections and heads ──────────────────────────────────────────────────────────────────────────────────────────── */
.au-section {
  padding-block: var(--rn-section);
  color: var(--rn-text);
}

.au-section[data-tone=light] {
  background: var(--rn-paper);
}

.au-section[data-tone=dark] {
  background: var(--rn-ink);
}

.au-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  gap: var(--rn-space-5) var(--rn-space-8);
  margin: 0 0 clamp(40px, 5vw, 72px);
}

.au-head h2,
.au-split-copy h2,
.au-faq-head h2 {
  max-width: 15ch;
  margin: var(--rn-space-4) 0 0;
  color: var(--rn-text);
}

.au-head-lead {
  max-width: 46ch;
  margin: 0;
  color: var(--rn-muted);
  font: 500 var(--rn-fs-body-lg)/var(--rn-lh-lead) var(--rn-font-body);
}

/* A text link with a trailing arrow: the underline sits on the words only (on the flex link the arrow got its own
   underline segment). */
.au-arrow-link {
  text-decoration: none;
}

.au-arrow-link > .au-lt {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.au-arrow-link:is(:hover, :focus-visible) > .au-lt {
  text-decoration-thickness: 2px;
}

.au-index {
  color: var(--rn-muted);
  font: 500 var(--rn-fs-label)/1.3 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .au-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}

/* 2. Hero: copy, the Example readout, the proof strip ─────────────────────────────────────────────────────────────
   Content starts just under the header at every width (lux.css centred the copy in a 100svh column on phones, which
   left an empty screen above it). The readout sits beside the copy from 901px and under it below; the proof strip
   follows, above the fold at 1440x900. */
.au-hero {
  position: relative;
  overflow: clip;
  padding: calc(var(--rn-header-top) + var(--rn-header-h) + clamp(28px, 5vw, 72px)) 0 clamp(56px, 6vw, 88px);
  border: 0;
  background: var(--rn-ink);
  color: var(--rn-text);
}

/* The hero's faint 88px grid, fading out before the proof strip (it replaces lux.css's side-masked grid). */
.au-hero::before {
  position: absolute;
  inset: 0;
  opacity: 1;
  background-image: linear-gradient(var(--rn-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--rn-grid-line) 1px, transparent 1px);
  background-position: 50% -1px;
  background-size: var(--rn-grid) var(--rn-grid);
  content: "";
  pointer-events: none;
  -webkit-mask-image: linear-gradient(black 50%, transparent 92%);
  mask-image: linear-gradient(black 50%, transparent 92%);
}

.au-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: center;
  gap: var(--rn-space-7) clamp(40px, 5vw, 88px);
}

.au-hero-copy {
  min-width: 0;
}

/* The display role at a size that leaves room for the readout: 42px at 390, 83px at 1440 (base.css sets the family,
   weight, leading and tracking). */
.au-hero h1 {
  max-width: 13ch;
  margin: var(--rn-space-5) 0 0;
  color: var(--rn-text);
  font-size: clamp(2.625rem, 1.3rem + 4.3vw, 5.25rem);
}

.au-hero h1 em {
  font-style: normal;
}

.au-lede {
  max-width: 34em;
  margin: var(--rn-space-5) 0 0;
  color: var(--rn-muted);
  font: 500 var(--rn-fs-body-lg)/1.55 var(--rn-font-body);
}

.au-hero-actions {
  margin-top: var(--rn-space-6);
}

.au-hero-meta {
  max-width: 44ch;
  margin: var(--rn-space-5) 0 0;
  color: var(--rn-muted);
  font: 500 var(--rn-fs-small)/1.5 var(--rn-font-body);
}

/* The Example readout (rn-example): a paper card on the ink hero. */
.au-readout {
  justify-self: end;
  width: 100%;
  max-width: 560px;
  padding: clamp(22px, 2.6vw, 34px) clamp(22px, 2.6vw, 34px) clamp(14px, 1.8vw, 24px);
}

.au-readout > figcaption {
  margin-bottom: var(--rn-space-5);
}

.au-readout-title {
  margin: 0 0 var(--rn-space-2);
  color: var(--rn-text);
  font: 700 var(--rn-fs-title)/1.2 var(--rn-font-body);
  letter-spacing: var(--rn-track-title);
}

.au-rows > li {
  grid-template-columns: 4.75em minmax(0, 1fr) auto;
  padding: var(--rn-space-4) 0;
}

.au-rows .rn-readout-finding {
  font-size: var(--rn-fs-body-lg);
}

.au-why {
  display: block;
  margin-top: 4px;
  color: var(--rn-muted);
  font: 500 var(--rn-fs-small)/1.45 var(--rn-font-body);
  text-wrap: pretty;
}

/* The Now chip is a neutral chip with its red state laid exactly over it (aria-hidden), so the red can land last. */
.au-prio {
  position: relative;
}

.au-now {
  position: absolute;
  inset: -1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: var(--rn-red);
  color: var(--rn-on-red);
}

/* The proof strip (rn-stat). It no longer carries lux.css's .audit-proof: that class's `span` rule (0.78rem, 50% white,
   a 10px top margin) landed on the reel overlays motion.js inserts, so the first second of every roll showed tiny grey
   digits. The reel's spans also take the figure's size, colour and leading here, in case a legacy rule reaches them
   again (never their margins: the strip's digit spacing is motion.css's). */
.au-proof-wrap {
  position: relative;
  z-index: 1;
  margin-top: clamp(40px, 5vw, 64px);
}

.au-proof .rn-reel-roll,
.au-proof .rn-reel-roll span {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.au-proof-note {
  max-width: none;
}

/* Up to 1180px the readout column is too narrow for a third column: the area moves under the finding. */
@media (max-width: 1180px) {
  .au-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .au-rows > li {
    grid-template-columns: 4.75em minmax(0, 1fr);
  }

  .au-rows .rn-readout-area {
    grid-column: 2;
    text-align: left;
  }
}

@media (max-width: 900px) {
  .au-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .au-readout {
    justify-self: stretch;
    max-width: none;
  }

  .au-rows > li {
    grid-template-columns: 4.75em minmax(0, 1fr) auto;
  }

  .au-rows .rn-readout-area {
    grid-column: auto;
    text-align: right;
  }
}

@media (max-width: 640px) {
  .au-hero {
    padding-bottom: var(--rn-space-8);
  }

  .au-hero-grid {
    gap: var(--rn-space-6);
  }

  .au-hero-actions {
    gap: var(--rn-space-2) var(--rn-space-5);
  }

  .au-rows > li {
    grid-template-columns: 4.25em minmax(0, 1fr);
  }

  .au-rows .rn-readout-area {
    grid-column: 2;
    text-align: left;
  }

  .au-proof-wrap {
    margin-top: var(--rn-space-6);
  }

  .au-proof > div {
    padding: 18px 20px;
  }
}

/* 3. What gets reviewed: six ringed cards, index, title, one line. Not links, so no lift. ──────────────────────── */
.au-cover-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rn-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.au-cover {
  gap: var(--rn-space-3);
  padding: clamp(24px, 2.4vw, 32px);
  /* Static cards: only the ring may change (rn-card also transitions opacity, which the reveal already animates). */
  transition-property: border-color;
}

.au-cover .rn-card-title {
  margin-top: var(--rn-space-4);
}

.au-cover p {
  margin: 0;
  color: var(--rn-muted);
  font: 400 var(--rn-fs-body)/var(--rn-lh-body) var(--rn-font-body);
}

.au-cover:hover {
  border-color: var(--rn-card-ring);
  translate: none;
}

@media (max-width: 1180px) {
  .au-cover-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .au-cover-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rn-space-3);
  }

  .au-cover {
    padding: 22px 22px 24px;
  }

  .au-cover .rn-card-title {
    margin-top: var(--rn-space-2);
  }
}

/* 4. What you get: the copy beside the three ranks (neutral chips: red is kept for the readout's finding). ─────── */
.au-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: start;
  gap: var(--rn-space-7) var(--rn-space-9);
}

.au-split-copy h2 {
  margin-bottom: var(--rn-space-5);
}

.au-split-copy > p:not(.rn-eyebrow) {
  max-width: 42ch;
  margin: 0 0 var(--rn-space-3);
  color: var(--rn-muted);
  font: 500 var(--rn-fs-body-lg)/var(--rn-lh-lead) var(--rn-font-body);
}

.au-ranks {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rn-line);
  list-style: none;
}

.au-ranks > li {
  display: grid;
  grid-template-columns: 5.5em minmax(0, 1fr);
  align-items: baseline;
  gap: var(--rn-space-5);
  padding: var(--rn-space-5) 0;
  border-bottom: 1px solid var(--rn-line);
}

.au-ranks h3 {
  margin: 0;
  color: var(--rn-text);
  font: 700 var(--rn-fs-title)/1.2 var(--rn-font-body);
  letter-spacing: var(--rn-track-title);
}

.au-ranks p {
  max-width: 46ch;
  margin: var(--rn-space-2) 0 0;
  color: var(--rn-muted);
}

@media (max-width: 900px) {
  .au-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .au-ranks > li {
    grid-template-columns: 4.25em minmax(0, 1fr);
    gap: var(--rn-space-4);
  }
}

/* 5. How it works: six steps on one line that draws itself; the terms under it. ─────────────────────────────────
   Across at 1181px and up; a vertical line below that. Each step's node sits on the line; the segment after a node
   runs to the next node (it is a child of the earlier step, sized in % of that step plus the gap). */
.au-flow {
  --au-node: 13px;
  --au-gap: var(--rn-space-4);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--au-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.au-step {
  position: relative;
  min-width: 0;
  padding-top: calc(var(--au-node) + var(--rn-space-5));
}

.au-node {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: var(--au-node);
  height: var(--au-node);
  border: 1px solid var(--rn-text);
  border-radius: 50%;
  background: var(--rn-paper);
}

.au-node > i {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--rn-text);
}

.au-seg {
  position: absolute;
  top: calc(var(--au-node) / 2 - 0.5px);
  left: calc(var(--au-node) / 2);
  width: calc(100% + var(--au-gap));
  height: 1px;
  background: var(--rn-line);
}

.au-seg > i {
  position: absolute;
  inset: 0;
  background: var(--rn-text);
  transform-origin: 0 50%;
}

.au-step-body h3 {
  margin: var(--rn-space-3) 0 var(--rn-space-2);
  color: var(--rn-text);
  font: 700 var(--rn-fs-title)/1.2 var(--rn-font-body);
  letter-spacing: var(--rn-track-title);
}

.au-step-body p {
  margin: 0;
  color: var(--rn-muted);
  font: 400 var(--rn-fs-body)/1.5 var(--rn-font-body);
}

.au-tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin-top: var(--rn-space-3);
  padding: 0 11px;
  border: 1px solid var(--rn-text);
  border-radius: var(--rn-radius-pill);
  color: var(--rn-text);
  font: 500 var(--rn-fs-label)/1 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  /* The node sits centred on the title's first line (the index, title and text share a baseline in this layout). */
  .au-flow {
    --au-node-top: calc(var(--rn-fs-title) * 0.6 - var(--au-node) / 2);
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .au-step {
    padding: 0 0 var(--rn-space-6) calc(var(--au-node) + var(--rn-space-5));
  }

  .au-step:last-child {
    padding-bottom: 0;
  }

  .au-node {
    top: var(--au-node-top);
  }

  /* From this node down to the next one: the step's own height (the next node sits at the same offset). */
  .au-seg {
    top: calc(var(--au-node-top) + var(--au-node) / 2);
    left: calc(var(--au-node) / 2 - 0.5px);
    width: 1px;
    height: 100%;
  }

  .au-seg > i {
    transform-origin: 50% 0;
  }

  .au-step-body {
    display: grid;
    grid-template-columns: 3em minmax(9em, 13em) minmax(0, 1fr);
    align-items: baseline;
    column-gap: var(--rn-space-5);
  }

  .au-step-body h3 {
    margin: 0;
  }

  .au-step-body .au-tag {
    grid-column: 3;
    justify-self: start;
    margin-top: var(--rn-space-2);
  }
}

@media (max-width: 640px) {
  /* Stacked: the node sits on the index line. */
  .au-flow {
    --au-node-top: 1px;
  }

  .au-step {
    padding-bottom: var(--rn-space-5);
  }

  .au-step-body {
    display: block;
  }

  .au-step-body h3 {
    margin: var(--rn-space-1) 0 var(--rn-space-1);
  }
}

/* The terms: fee (a guide, never a price list), turnaround and access, in one ringed strip. */
.au-terms-wrap {
  margin-top: clamp(48px, 6vw, 88px);
}

.au-terms {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--rn-card-ring);
  border-radius: var(--rn-radius-card);
  background: var(--rn-card-bg);
}

.au-terms > div {
  padding: clamp(22px, 2.4vw, 32px);
  border-left: 1px solid var(--rn-card-ring);
}

.au-terms > div:first-child {
  border-left: 0;
}

.au-terms dt {
  margin: 0 0 var(--rn-space-3);
  color: var(--rn-muted);
  font: 500 var(--rn-fs-label)/1.3 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
}

.au-terms dd {
  max-width: 48ch;
  margin: 0;
  color: var(--rn-text);
  font: 500 var(--rn-fs-body)/1.55 var(--rn-font-body);
}

.au-terms-actions {
  margin-top: var(--rn-space-6);
}

@media (max-width: 900px) {
  .au-terms {
    grid-template-columns: minmax(0, 1fr);
  }

  .au-terms > div {
    border-left: 0;
  }

  .au-terms > div + div {
    border-top: 1px solid var(--rn-card-ring);
  }
}

/* 6. #tom: the person. The H2's "A person." takes the kinetic highlight (a paper block on ink). ──────────────────── */
.au-tom-head {
  align-items: start;
}

.au-tom-head h2 {
  max-width: none;
}

.au-tom-intro p {
  max-width: 50ch;
  margin: 0 0 var(--rn-space-4);
  color: var(--rn-muted);
  font: 400 var(--rn-fs-body-lg)/1.6 var(--rn-font-body);
}

.au-tom-intro p:last-child {
  margin-bottom: 0;
}

.au-tom-intro .au-tom-lead {
  color: var(--rn-text);
  font: 600 var(--rn-fs-lead)/1.4 var(--rn-font-body);
}

@media (min-width: 901px) {
  .au-tom-intro {
    padding-top: calc(var(--rn-fs-label) * 1.3 + var(--rn-space-4));
  }
}

/* 7. #ai: how AI is used, and where the data goes. A stage card on paper, like the band and the feature: its H2 takes
   the compact role (an H2 inside a card). ─────────────────────────────────────────────────────────────────────── */
.au-ai {
  --rn-card-bg: var(--rn-ink-soft);
  --rn-card-ring: var(--rn-ring);
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: start;
  gap: var(--rn-space-7) var(--rn-space-8);
  padding: clamp(28px, 4.4vw, 64px);
  border: 1px solid var(--rn-ring);
  border-radius: var(--rn-radius-card);
  background-color: var(--rn-stage);
  background-image: linear-gradient(var(--rn-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--rn-grid-line) 1px, transparent 1px);
  background-position: -1px -1px;
  background-size: var(--rn-grid) var(--rn-grid);
  color: var(--rn-text);
}

.au-ai-copy h2 {
  max-width: 14ch;
  margin: var(--rn-space-4) 0 var(--rn-space-5);
  color: var(--rn-text);
  font: var(--rn-weight-display) var(--rn-fs-h2-sm)/var(--rn-lh-heading) var(--rn-font-display);
  letter-spacing: var(--rn-track-display);
}

.au-ai-copy > p:not(.rn-eyebrow) {
  max-width: 46ch;
  margin: 0 0 var(--rn-space-4);
  color: var(--rn-muted);
  font: 400 var(--rn-fs-body-lg)/1.6 var(--rn-font-body);
}

.au-ai-copy > h2 + p {
  color: var(--rn-text);
}

.au-ai-copy .rn-link {
  margin-top: var(--rn-space-2);
}

/* The map: account → (my hardware, offline: the model) → me → readout; cloud AI services get no client data. */
.au-map {
  margin: 0;
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid var(--rn-ring);
  border-radius: var(--rn-radius-md);
  background: var(--rn-ink-soft);
}

.au-map-cap,
.au-map-box-cap {
  margin: 0 0 var(--rn-space-4);
  color: var(--rn-muted);
  font: 500 var(--rn-fs-label)/1.3 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
}

.au-map-flow {
  margin: 0;
  padding: 0;
  list-style: none;
}

.au-map-step {
  --au-conn: 22px;
  position: relative;
  display: grid;
  gap: 2px;
  padding: 12px 16px;
  border: 1px solid var(--rn-ring);
  border-radius: var(--rn-radius-sm);
  background: var(--rn-ink);
}

/* Items that a connector runs out of: the connector fills the gap under them. */
.au-map-flow > li + li {
  margin-top: 22px;
}

.au-map-k {
  color: var(--rn-text);
  font: 700 var(--rn-fs-body)/1.3 var(--rn-font-body);
}

.au-map-v {
  color: var(--rn-muted);
  font: 500 var(--rn-fs-small)/1.4 var(--rn-font-body);
}

.au-map-conn {
  position: absolute;
  top: calc(100% + 1px);
  left: 24px;
  width: 1px;
  height: 22px;
  background: var(--rn-text);
}

/* Draw top-down (the toolkit's "y" grows from the bottom). */
.au-map-conn[data-rn-draw] {
  transform-origin: 50% 0;
}

.au-map-box {
  position: relative;
  padding: 14px;
  border: 1px solid var(--rn-muted);
  border-radius: var(--rn-radius-md);
}

.au-map-box-cap {
  margin-bottom: var(--rn-space-3);
  color: var(--rn-text);
}

.au-map-box > .au-map-conn {
  left: 24px;
}

.au-map-cloud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: var(--rn-space-5) 0 0;
  padding-top: var(--rn-space-4);
  border-top: 1px dashed var(--rn-line);
}

.au-map-cloud .au-map-k {
  color: var(--rn-muted);
  font-weight: 600;
}

.au-map-cloud .au-map-v {
  font-family: var(--rn-font-mono);
  font-size: var(--rn-fs-label);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
}

.au-map-x {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--rn-muted);
  border-radius: 50%;
}

.au-map-x::before,
.au-map-x::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 1px;
  margin: -0.5px 0 0 -4px;
  background: var(--rn-muted);
  content: "";
  transform: rotate(45deg);
}

.au-map-x::after {
  transform: rotate(-45deg);
}

@media (max-width: 900px) {
  .au-ai {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .au-ai {
    padding: 24px 18px;
  }
}

/* 8. #tom: the career (rn-timeline) and On camera (rn-oncamera). ────────────────────────────────────────────── */
.au-career {
  display: grid;
  margin-top: clamp(56px, 7vw, 104px);
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: start;
  gap: var(--rn-space-7) var(--rn-space-8);
}

.au-career-title {
  margin: 0 0 var(--rn-space-5);
  color: var(--rn-text);
  font: 700 var(--rn-fs-h3)/1.15 var(--rn-font-body);
  letter-spacing: var(--rn-track-title);
}

.au-career .rn-timeline > li::before {
  background: var(--rn-ink);
}

.au-career .rn-timeline > li.is-current::before {
  background: var(--rn-text);
}

.au-oncamera .rn-eyebrow {
  margin-bottom: var(--rn-space-5);
}

.au-oc-label {
  color: var(--rn-muted);
  font: 500 var(--rn-fs-label)/1.3 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
}

.au-oc-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rn-space-3) var(--rn-space-6);
  margin: var(--rn-space-2) 0 0;
}

.au-oc-stats > div {
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
}

.au-oc-stats dt {
  color: var(--rn-muted);
  font: 500 var(--rn-fs-label)/1.3 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
}

.au-oc-stats dd {
  margin: 0;
  color: var(--rn-text);
  font: 500 var(--rn-fs-h3)/1 var(--rn-font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rn-oncamera .au-oc-note {
  font-size: 0.75rem;
  line-height: 1.5;
}

.au-oncamera .rn-link {
  justify-self: start;
}

@media (max-width: 900px) {
  .au-career {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 9. FAQ and the band ─────────────────────────────────────────────────────────────────────────────────────────── */
.au-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  align-items: start;
  gap: var(--rn-space-7) var(--rn-space-9);
}

.au-faq-head {
  position: sticky;
  top: calc(var(--rn-header-clearance) + var(--rn-space-4));
}

/* Three lines that read as phrases: "Before you / hand over / access." */
.au-faq-head h2 {
  max-width: 10ch;
}

@media (max-width: 900px) {
  .au-faq-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .au-faq-head {
    position: static;
  }
}

/* 10. Holds, failsafe, forced colours ────────────────────────────────────────────────────────────────────────────
   Before audits.js plays them, each first frame is held (opacity and transform only, matching the first keyframe, so
   nothing jumps). Reduced motion and the site pause never hold anything.
   The readout is above the fold, so its hold starts with the first paint (html.js) and has the 4s failsafe until
   audits.js has booted (html.au-live). The flow is far below the fold: it is held only once audits.js is live, so if
   the script never arrives the steps simply show (and a paused offscreen failsafe can never leave them dim). */
@media (prefers-reduced-motion: no-preference) {
  html.js:not([data-motion="paused"]) .au-readout:not(.rn-in) .au-rows > li,
  html.js:not([data-motion="paused"]) .au-readout:not(.rn-in) .au-now {
    opacity: 0;
  }

  html.js:not([data-motion="paused"]) .au-readout:not(.rn-in) .au-rows > li.rn-finding::before {
    transform: scaleY(0);
  }

  html.js:not([data-motion="paused"], .au-live) .au-readout:not(.rn-in) .au-rows > li,
  html.js:not([data-motion="paused"], .au-live) .au-readout:not(.rn-in) .au-now,
  html.js:not([data-motion="paused"], .au-live) .au-readout:not(.rn-in) .au-rows > li.rn-finding::before {
    animation: au-failsafe 1ms 4s forwards;
  }

  html.au-live:not([data-motion="paused"]) .au-step:not(.rn-in) .au-node > i {
    opacity: 0;
    scale: 0;
  }

  html.au-live:not([data-motion="paused"]) .au-step:not(.rn-in) .au-step-body {
    opacity: 0.3;
  }

  html.au-live:not([data-motion="paused"]) .au-seg:not(.rn-in) > i {
    scale: 0 1;
  }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 1180px) {
  html.au-live:not([data-motion="paused"]) .au-seg:not(.rn-in) > i {
    scale: 1 0;
  }
}

@keyframes au-failsafe {
  to {
    opacity: 1;
    scale: none;
    transform: none;
  }
}

@media (forced-colors: active) {
  .au-now {
    border: 2px solid CanvasText;
  }

  .au-node > i,
  .au-seg > i {
    background: CanvasText;
  }
}