/* Tracefox site styles. Desktop styles first, then tablet (≤1199px) and phone (≤809px) overrides at the bottom. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--nav-height); }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word; /* a word wider than its column (display type at large text sizes) breaks instead of pushing the page sideways */
}
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
code { font-family: var(--font-mono); font-weight: 700; } /* Anonymous Pro ships at 700 only */
strong, b { font-weight: 600; } /* Poppins ships 400, 500 and 600; the browser default 700 would be synthesised */
/* Focus ring: --focus-ring is set per surface so it reaches 3:1 everywhere (tokens.css). */
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.hero, .page-hero, .cta__inner { --focus-ring: var(--color-white); }
.timeline, .hero-video, .price, .revoke, .footer, .section--ink, .panel--ink { --focus-ring: var(--color-signal); }
.pricing__inner, .panel--lime, .callout--lime { --focus-ring: var(--color-ink); }
::selection { background: var(--color-lime); color: var(--color-ink); }

.container { width: 100%; max-width: var(--container); margin-inline: auto; }

/* ---------- Type ---------- */
.display, .heading, .title, .stat { text-wrap: balance; }
/* Two families: Anton (one weight, 400) for the hero, section headings and big figures;
   Poppins SemiBold for every title from 20px to 32px. */
.display { font-family: var(--font-headline); font-size: var(--display-size); font-weight: 400; line-height: 1.02; letter-spacing: var(--tracking-headline); }
.heading { font-family: var(--font-headline); font-size: var(--heading-size); font-weight: 400; line-height: 1.08; letter-spacing: var(--tracking-headline); }
.title { font-family: var(--font-sans); font-size: var(--title-size); font-weight: 600; line-height: 1.1; letter-spacing: var(--tracking-title); }
.stat { font-family: var(--font-headline); font-size: var(--stat-size); font-weight: 400; line-height: 1; letter-spacing: var(--tracking-headline); }
.lead { font-size: var(--lead-size); line-height: 1.45; text-wrap: pretty; }
.body { font-size: var(--body-size); line-height: 1.5; text-wrap: pretty; }
.label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--label-size);
  line-height: 1.3;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* ---------- Button ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--body-size);
  line-height: 1;
  white-space: nowrap;
  max-width: 100%;
  background: var(--color-ink);
  color: var(--color-white);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn:hover { background: var(--color-cobalt); }
.btn--white { background: var(--color-white); color: var(--color-ink); }
.btn--white:hover { background: var(--color-lime); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }

/* ---------- Brand ---------- */
.brand { display: inline-flex; align-items: center; padding-block: 11px; margin-block: -11px; } /* 50px hit area around the 28px wordmark, no layout change */
.nav .brand { color: var(--color-logo-ink); }
/* Logo lockup: the 28px lime fox tile (#i-mark), a 9px gap, then the "tracefox" wordmark (#i-wordmark), 28px tall.
   The wordmark is raised 2px so its lowercase body centres on the nav link text rather than the box. */
.brand__mark { display: block; height: 28px; width: 28px; margin-right: 9px; flex: none; }
.brand__wordmark { display: block; height: 28px; width: auto; aspect-ratio: 3398 / 799; position: relative; top: -2px; }

/* ---------- Navigation ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 5;
  height: var(--nav-height);
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-line-light);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; }
.nav__links { display: flex; gap: 32px; }
/* Poppins runs wide: on tablets the five links need a tighter gap to leave the logo room */
@media (max-width: 1199px) { .nav__links { gap: 24px; } }
.nav__links a { font-weight: 500; transition: color 0.2s ease; }
.nav__links a:hover { color: var(--color-cobalt); }

/* ---------- Hero ---------- */
.hero { background: var(--color-cobalt); color: var(--color-white); padding: 88px var(--gutter) 72px; }
.hero__inner { display: flex; flex-direction: column; gap: 72px; }
.hero__row { display: flex; align-items: center; gap: 64px; }
.hero__copy { flex: 1; display: flex; flex-direction: column; gap: 28px; }
.hero__copy .lead { color: var(--color-white-soft); max-width: 560px; }
/* On cobalt the ink button would vanish into the background on a cobalt hover. */
.hero .btn:not(.btn--white):hover,
.page-hero .btn:not(.btn--white):hover { background: var(--color-lime); color: var(--color-ink); }
.hero__copy .actions { padding-top: 8px; }
/* "What you buy" ledger: the Services hero's right column, the same width as the homepage timeline */
.ledger { width: 460px; flex-shrink: 0; display: flex; flex-direction: column; padding: 28px 28px 8px; background: var(--color-ink); color: var(--color-white); --focus-ring: var(--color-signal); }
.ledger__head { padding-bottom: 12px; border-bottom: 1px solid var(--color-line-dark); color: var(--color-white-muted); }
.ledger__item { display: flex; flex-direction: column; gap: 8px; padding: 20px 0; transition: color 0.2s ease; }
.ledger__item + .ledger__item { border-top: 1px solid var(--color-line-dark); }
.ledger__meta { color: var(--color-lime); }
.ledger__title { font-family: var(--font-sans); font-weight: 600; font-size: var(--title-size); line-height: 1.15; letter-spacing: var(--tracking-title); }
.ledger__facts { font-size: var(--small-size); line-height: 1.45; color: var(--color-white-muted); }
.ledger__item:hover .ledger__title { color: var(--color-lime); }

/* Incident timeline */
.timeline {
  width: 460px;
  flex-shrink: 0;
  background: var(--color-ink);
  padding: 28px 28px 12px;
}
.timeline__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-line-dark);
}
.timeline__live { display: inline-flex; align-items: center; gap: 10px; }
.timeline__dot { width: 10px; height: 10px; background: var(--color-signal); animation: pulse 1.6s ease-in-out infinite alternate; }
.timeline__svc { color: var(--color-white-muted); }
.timeline__step { display: flex; gap: 20px; padding: 18px 0; }
.timeline__step > div { flex: 1; min-width: 0; overflow-wrap: break-word; } /* shrinks beside the em-wide time column at large text sizes */
.timeline__step + .timeline__step { border-top: 1px solid var(--color-line-dark); }
.timeline__time {
  width: calc(60em / 16); /* 60px at 16px; in em so the column grows with the text */
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--body-size);
  line-height: 1.4;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--color-white-muted);
}
.timeline__time--alert { color: var(--color-signal); }
.timeline__time--ok { color: var(--color-lime); }
.timeline__step h3 { font-size: var(--body-size); font-weight: 500; line-height: 1.5; }
.timeline__step p { margin-top: 4px; font-size: var(--small-size); line-height: 1.45; color: var(--color-white-muted); text-wrap: pretty; }

/* Hero video (homepage): click-to-play, poster with the play control, disclosure line underneath.
   Source, encode and decisions in .agents/hero-video.md. The play square is white, not signal orange:
   orange means "needs attention" (Colour Means State Rule) and would outrank the primary button. */
.hero-video { width: 560px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; margin: 0; }
.hero-video__frame { position: relative; aspect-ratio: 16 / 9; background: var(--color-ink); overflow: hidden; }
.hero-video__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--color-ink); }
.hero-video__play {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 6px;
  padding: 28px;
  font: inherit; text-align: left; color: var(--color-white);
  background: linear-gradient(to top, rgba(13, 15, 14, 0.85) 0%, rgba(13, 15, 14, 0.35) 55%, rgba(13, 15, 14, 0) 100%);
  border: 0; cursor: pointer;
  transition: background-color 0.2s ease;
}
.hero-video__play:hover .hero-video__icon { background: var(--color-lime); color: var(--color-ink); }
.hero-video__icon {
  display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: auto;
  background: var(--color-white); color: var(--color-ink);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.hero-video__icon svg { width: 32px; height: 32px; }
.hero-video__eyebrow { color: var(--color-lime); }
.hero-video__title { font-family: var(--font-sans); font-weight: 600; font-size: var(--title-size); line-height: 1.15; letter-spacing: var(--tracking-title); text-wrap: balance; }
.hero-video__meta { font-size: var(--small-size); line-height: 1.45; color: var(--color-white-muted); }
.hero-video.is-playing .hero-video__play { display: none; }
.hero-video__status { font-size: var(--small-size); line-height: 1.45; font-weight: 600; color: var(--color-white); } /* shown only if the video fails to load */
.hero-video__note { font-size: var(--small-size); line-height: 1.45; color: var(--color-white-soft); } /* soft, not muted: it sits on cobalt */

/* Proof strip */
.proof { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 24px; border-top: 1px solid var(--color-line-dark); }
.proof__item { display: flex; flex-direction: column; gap: 10px; padding: 28px 24px 0 0; }
.proof__item + .proof__item { border-left: 1px solid var(--color-line-dark); padding-left: 24px; }
.proof__item dt { color: var(--color-lime); }
.proof__note { color: var(--color-white-soft); }

/* ---------- How it works ---------- */
.section-head { display: flex; align-items: flex-end; gap: 64px; }
.section-head__title { flex: 1; display: flex; flex-direction: column; gap: 20px; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0; /* a grid item may shrink below its longest word, so large text wraps instead of overflowing */
  padding: 32px;
  background: var(--color-white);
  border: 1px solid var(--color-line-light);
  overflow-wrap: break-word;
}
.card__top { display: flex; justify-content: space-between; align-items: center; }
.card__top svg { width: 36px; height: 36px; color: var(--color-signal); }
.card__num { color: var(--color-ink-muted); }
.card p { color: var(--color-ink-muted); }

.works-with { display: flex; align-items: center; gap: 28px; }
.works-with ul { display: flex; flex-wrap: wrap; gap: 8px; }
.works-with li {
  padding: 6px 10px;
  border: 1px solid var(--color-line-light);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--label-size);
  line-height: 1.3;
}
.works-with .logos { gap: 28px; }
.works-with .logos li { padding: 0; border: 0; }
.panel .works-with { flex-wrap: wrap; gap: 16px 28px; padding-top: 20px; border-top: 1px solid var(--color-line-light); }
.logos svg { width: 26px; height: 26px; color: var(--color-ink); }
.revoke {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: var(--color-ink);
  font-size: var(--small-size);
  line-height: 1.3;
}
.revoke code { font-weight: 700; color: var(--color-lime); }
.revoke p { color: var(--color-white-muted); }
/* Revoke strip: one line of context, then the console path per cloud */
.revoke:has(.revoke__steps) { flex-direction: column; align-items: flex-start; gap: 10px; padding-block: 16px; }
.revoke__steps { display: grid; gap: 6px; }
.revoke__steps > div { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 12px; align-items: baseline; }
.revoke__steps dd { text-wrap: balance; }
.revoke code span { white-space: nowrap; } /* a console path breaks between names, never inside one */
.revoke__steps dt { font-family: var(--font-mono); font-weight: 700; font-size: var(--tag-size); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-white-muted); }

/* ---------- Pricing ---------- */
.pricing { padding: 0 var(--gutter) 24px; }
.pricing__inner { display: flex; align-items: center; gap: 64px; padding: 64px; background: var(--color-lime); }
.pricing__copy { flex: 1; display: flex; flex-direction: column; gap: 24px; }
.pricing__copy .lead { color: var(--color-ink-muted); max-width: 520px; }
.pricing__copy .actions { padding-top: 8px; }
.pricing__note { font-weight: 500; }
.price {
  width: 480px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 40px;
  background: var(--color-ink);
  color: var(--color-white);
}
.price .label { color: var(--color-lime); }
.price__unit { color: var(--color-white-muted); }
.price__list { padding-top: 12px; }
.panel--ink .revoke { margin-top: auto; border: 1px solid var(--color-line-dark); } /* pricing: how to leave, at the foot of the Not included panel */
.price__def { margin-top: -8px; font-size: var(--small-size); color: var(--color-white-muted); } /* pricing: what "production service" means, a footnote to the unit line above it */
.price__terms { padding-top: 14px; border-top: 1px solid var(--color-line-dark); font-size: var(--small-size); color: var(--color-white-muted); }
/* Pricing page: the price leads. Copy, card, then actions, so phones read the price before the button. */
.pricing__inner--split { display: grid; grid-template-columns: minmax(0, 1fr) 480px; grid-template-areas: "copy price" "actions price"; column-gap: 64px; row-gap: 32px; align-items: center; }
.pricing__inner--split .pricing__copy { grid-area: copy; align-self: end; }
.pricing__inner--split .price { grid-area: price; }
.pricing__inner--split .pricing__actions { grid-area: actions; align-self: start; }
.price__figure { font-family: var(--font-headline); font-weight: 400; font-size: 3.5rem; line-height: 1; letter-spacing: var(--tracking-headline); } /* 56px: one-off, the pricing page's price sits above its 48px section heading */
.price__list li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-top: 1px solid var(--color-line-dark); }
.price__list svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--color-lime); }


/* ---------- Closing CTA ---------- */
.cta { padding: 0 var(--gutter) var(--section-y); }
.cta__inner { display: flex; flex-direction: column; gap: 32px; padding: 80px 64px; background: var(--color-cobalt); color: var(--color-white); }
.cta .display { max-width: 980px; }
.cta__note { color: var(--color-white-soft); }
.cta__alt { align-self: flex-start; color: var(--color-white); }
.cta .link:hover { color: var(--color-lime); } /* outranks the base .link:hover (cobalt), which would vanish on the cobalt block */

/* ---------- Footer ---------- */
.footer { background: var(--color-ink); color: var(--color-white); padding: 80px var(--gutter) 40px; }
.footer__inner { display: flex; flex-direction: column; gap: 56px; }
.footer__top { display: flex; flex-wrap: wrap; gap: 48px; }
.footer__brand { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 16px; }
.footer__brand .brand { align-self: flex-start; }
.footer__brand p { max-width: 320px; color: var(--color-white-muted); }
.footer__col { width: 200px; display: flex; flex-direction: column; gap: 14px; }
.footer__col .label { color: var(--color-lime); }
.footer__col a, .footer__col li { color: var(--color-white-muted); }
.footer__col ul { display: flex; flex-direction: column; gap: 14px; }
.footer__col a { transition: color 0.2s ease; }
.footer__col a:hover { color: var(--color-lime); }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-top: 24px;
  border-top: 1px solid var(--color-line-dark);
  color: var(--color-white-muted);
}

/* ---------- Motion ---------- */
@keyframes pulse { to { opacity: 0.15; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* Timeline steps play in once the panel is on screen; cards rise when scrolled into view.
   Both need JS (site.js adds .is-visible); without it everything is simply shown. */
.js .timeline__step { opacity: 0; }
.js .timeline.is-visible .timeline__step { animation: rise 0.5s var(--ease-out) both; }
.timeline__step:nth-child(2) { animation-delay: 0.15s; }
.timeline__step:nth-child(3) { animation-delay: 0.3s; }
.timeline__step:nth-child(4) { animation-delay: 0.45s; }
.timeline__step:nth-child(5) { animation-delay: 0.6s; }
.js .card { opacity: 0; transform: translateY(16px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
.js .card.is-visible { opacity: 1; transform: none; }
.js .card:nth-child(2) { transition-delay: 0.08s; }
.js .card:nth-child(3) { transition-delay: 0.16s; }
.js .guide-list > li:nth-child(3n+2) > .card { transition-delay: 0.08s; }
.js .guide-list > li:nth-child(3n+3) > .card { transition-delay: 0.16s; }
/* Landing page. The hero plays in on load; .reveal blocks rise once when scrolled into view;
   .stagger lists bring their items in one after another, 60ms apart. site.js adds .is-visible. */
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.hero--home .hero__copy > *, .hero--home .hero-video { animation: rise 0.6s var(--ease-out) both; }
.hero--home .hero__copy > :nth-child(2) { animation-delay: 0.06s; }
.hero--home .hero__copy > :nth-child(3) { animation-delay: 0.12s; }
.hero--home .hero__copy > :nth-child(4) { animation-delay: 0.18s; }
.hero--home .hero-video { animation-delay: 0.24s; }
.js .reveal, .js .stagger > * { opacity: 0; transform: translateY(16px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
.js .reveal.is-visible, .js .stagger.is-visible > * { opacity: 1; transform: none; }
.js .reveal--late { transition-delay: 0.08s; }
.js .reveal--last { transition-delay: 0.3s; }
.js .stagger > :nth-child(2) { transition-delay: 0.06s; }
.js .stagger > :nth-child(3) { transition-delay: 0.12s; }
.js .stagger > :nth-child(4) { transition-delay: 0.18s; }
.js .stagger > :nth-child(5) { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .timeline__dot, .js .timeline.is-visible .timeline__step { animation: none; }
  .js .timeline__step { opacity: 1; }
  .js .card { opacity: 1; transform: none; transition: none; }
  /* Keep the fades, which help reading order; drop the movement. */
  .hero--home .hero__copy > *, .hero--home .hero-video { animation-name: fade; }
  .js .reveal, .js .stagger > * { transform: none; transition: opacity 0.4s ease; }
}

/* ---------- Tablet (≤1199px) ---------- */
@media (max-width: 1199px) {
  :root {
    --display-size: 3.5rem;
    --heading-size: 2.625rem;
    --stat-size: 2.375rem;
    --lead-size: 1rem;
    --gutter: 32px;
    --section-y: 96px;
  }
  .hero { padding-block: 72px 64px; }
  .hero__inner { gap: 56px; }
  .hero__row { flex-direction: column; align-items: stretch; gap: 48px; }
  .timeline, .ledger, .hero-video { width: 100%; }
  .proof { grid-template-columns: repeat(2, 1fr); }
  .proof__item:nth-child(3) { border-left: 0; padding-left: 0; }

  .section-head { flex-direction: column; align-items: stretch; gap: 24px; }
  .cards { grid-template-columns: 1fr; gap: 12px; }

  .pricing { padding-bottom: 20px; }
  .pricing__inner { flex-direction: column; align-items: stretch; gap: 48px; padding: 48px 40px; }
  .price { width: 100%; }
  .pricing__inner--split { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "price" "actions"; row-gap: 40px; }
  .price__figure { font-size: 3rem; }

  .cta__inner { padding: 64px 40px; }

  .footer { padding: 72px var(--gutter) 32px; }
  .footer__top { gap: 40px; }
  .footer__col { width: 170px; }
}

/* ---------- Phone (≤809px) ---------- */
@media (max-width: 809px) {
  :root {
    --display-size: 2.625rem;
    --heading-size: 2.125rem;
    --stat-size: 2.125rem;
    --lead-size: 1rem;
    --subhead-size: 1.625rem;
    --prose-size: 1.0625rem;
    --gutter: 20px;
    --section-y: 80px;
    --nav-height: 68px;
  }
  .nav__links { display: none; }

  .hero { padding-block: 48px; }
  .hero-video__play { padding: 18px; }
  .hero-video__icon { width: 48px; height: 48px; }
  .hero-video__icon svg { width: 24px; height: 24px; }
  .timeline { padding: 20px 18px 6px; }
  .timeline__step { gap: 14px; }
  .timeline__time { width: calc(48em / 14); font-size: var(--small-size); }
  .proof { grid-template-columns: 1fr; border-top: 0; }
  .proof__item,
  .proof__item + .proof__item { border-left: 0; padding: 24px 0; border-top: 1px solid var(--color-line-dark); }
  .hero .proof { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8em), 1fr)); column-gap: 20px; } /* em, so large browser text drops to one column before a figure spills */
  .hero .proof__item, .hero .proof__item + .proof__item { padding: 20px 0; }

  .card { padding: 24px; }
  .works-with { flex-direction: column; align-items: flex-start; gap: 16px; }
  .revoke { flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; }
  .revoke code { font-size: var(--tag-size); }
  .revoke__steps > div { grid-template-columns: 1fr; gap: 2px; }

  .pricing { padding-bottom: 16px; }
  .pricing__inner { padding: 36px 20px; }
  .price { padding: 28px 24px; }
  .pricing__inner--split { row-gap: 32px; }
  .price__figure { font-size: 2.625rem; }

  .cta__inner { padding: 48px 20px; }

  .footer { padding: 64px var(--gutter) 28px; }
  .footer__inner { gap: 40px; }
  .footer__top { flex-direction: column; gap: 36px; }
  .footer__brand { min-width: 0; }
  .footer__col, .footer__col ul { gap: 4px; }
  .footer__col a { padding-block: 10px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================
   Shared site components (v8): navigation menu, inner page hero,
   sections, steps, panels, tables, FAQ and the readiness check.
   Used by every page; its own tablet and phone overrides sit at
   the end of this block so they win over the desktop rules above.
   ========================================================== */

/* ---------- Navigation: right group and phone menu ---------- */
.nav__right { display: flex; align-items: center; gap: 12px; }
.nav__links a[aria-current="page"] { color: var(--color-cobalt); }
.nav__toggle {
  display: none;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-line-light);
  cursor: pointer;
}
.nav__toggle svg { width: 22px; height: 22px; }
button.btn { border: 0; cursor: pointer; }

/* Underlined text link with arrow */
.link { display: inline; font-weight: 600; text-decoration: underline 2px; text-decoration-skip-ink: none; text-underline-offset: 0.3em; transition: color 0.2s ease; } /* a text underline follows the words line by line, wherever the link sits */
.link svg { display: inline-block; width: 16px; height: 16px; margin-left: 8px; vertical-align: -3px; } /* inline, so a wrapping link keeps its arrow after the last word */
.link:hover { color: var(--color-cobalt); }

/* ---------- Inner page hero ---------- */
.page-hero { background: var(--color-cobalt); color: var(--color-white); padding: 96px var(--gutter) 88px; }
.page-hero__inner { display: flex; flex-direction: column; gap: 28px; }
.page-hero .display { max-width: 1000px; }
.page-hero .lead { max-width: 680px; color: var(--color-white-soft); }
.page-hero .actions { padding-top: 8px; }

/* ---------- Sections ---------- */
.section { padding: var(--section-y) var(--gutter); }
.section--flush { padding-top: 0; }
.section--ink + .section--flush { padding-top: var(--section-y); } /* flush only joins sections on the same ground; after ink it needs its top padding back */
.section--ink { background: var(--color-ink); color: var(--color-white); }
.section__inner { display: flex; flex-direction: column; gap: 56px; }
/* Eyebrows: one implementation. A 10px square drawn in CSS starts every eyebrow,
   panel label, quiz question label and the quiz error. On light grounds the text is
   ink and the square is signal (orange text fails contrast there); on cobalt and ink
   the text is lime. Heroes also turn the square lime. */
.eyebrow, .panel > .label:first-child, .q legend .label, .quiz__error { display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before, .panel > .label:first-child::before, .q legend .label::before, .quiz__error::before { content: ""; width: 10px; height: 10px; flex-shrink: 0; background: var(--eyebrow-square, var(--color-signal)); }
.eyebrow { color: var(--color-ink); }
.hero .eyebrow, .page-hero .eyebrow { color: var(--color-lime); --eyebrow-square: var(--color-lime); }
.cta .eyebrow, .section--ink .eyebrow { color: var(--color-lime); }
.section-head .lead { width: 380px; flex-shrink: 0; color: var(--color-ink-muted); }
.section--ink .section-head .lead { color: var(--color-white-muted); }
.section-head__title .lead { color: var(--color-ink-muted); }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- Numbered steps (also used for project rows) ---------- */
.steps { border-top: 1px solid var(--color-line-light); }
.step {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 1.5fr); /* rem, so the number column grows with the reader's text size */
  gap: 32px;
  padding: 36px 0;
  border-bottom: 1px solid var(--color-line-light);
}
.step__num { padding-top: 6px; color: var(--color-ink-muted); }
.step__head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.step__body { color: var(--color-ink-muted); max-width: 30em; }
/* Readable measure for running paragraphs that would otherwise span a whole section or panel */
.panel > p.body, .section__inner > p.body, .card > p.body { max-width: 30em; } /* about 64 characters of Poppins (wider than Archivo, which gave about 72); ch would allow ~90 because it measures the wide zero */
.step__body .lead { color: var(--color-ink); }
.step__body .lead + .body { margin-top: 12px; }
.step__body > .body + .body { margin-top: 12px; }
.step--compact { grid-template-columns: 3.5rem minmax(0, 1fr); gap: 20px; padding: 28px 0; }
.step--compact .step__num { padding-top: 4px; }
.step--compact .step__body { margin-top: 8px; }

/* ---------- Panels and two-up layouts ---------- */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.split--stretch { align-items: stretch; }
.story__aside { display: flex; flex-direction: column; gap: 16px; } /* about: the MSP menu panel stacked over the Tracefox panel */
.panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px;
  background: var(--color-white);
  border: 1px solid var(--color-line-light);
}
.panel > .label { color: var(--color-ink); }
.panel p { color: var(--color-ink-muted); }
.panel--ink { background: var(--color-ink); color: var(--color-white); border-color: var(--color-ink); }
.panel--ink > .label { color: var(--color-lime); }
.panel--ink p { color: var(--color-white-muted); }
.panel--ink .link { color: var(--color-white); }
.panel--ink .link:hover { color: var(--color-lime); }
.panel--lime { background: var(--color-lime); border-color: var(--color-lime); }
.panel--lime > .label, .panel--lime p { color: var(--color-ink); }

/* Chips (tool names) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
  padding: 6px 10px;
  border: 1px solid var(--color-line-light);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--label-size);
  line-height: 1.3;
}
.panel--ink .chips li { border-color: var(--color-line-dark); }

/* Tick and cross lists */
.ticks li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-top: 1px solid var(--color-line-light); }
.ticks svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--color-signal); }
.panel--ink .ticks li { border-color: var(--color-line-dark); color: var(--color-white-muted); }
.panel--ink .ticks svg { color: var(--color-lime); }
.panel--ink .ticks--no svg { color: var(--color-signal); }
.panel--lime .ticks li { border-color: var(--color-line-light); }
.panel--lime .ticks svg { color: var(--color-ink); }

/* Stat and fact rows on light backgrounds */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; border-top: 1px solid var(--color-line-light); }
.stats__item { display: flex; flex-direction: column; gap: 10px; padding: 28px 24px 0 0; }
.stats__item + .stats__item { padding-left: 24px; border-left: 1px solid var(--color-line-light); }
.stats__item dt { color: var(--color-ink-muted); }
.stats__note { color: var(--color-ink-muted); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; text-align: left; }
.table th {
  padding: 0 24px 14px 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--label-size);
  line-height: 1.3;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  border-bottom: 1px solid var(--color-line-light);
  vertical-align: bottom;
}
.table td { padding: 22px 24px 22px 0; color: var(--color-ink-muted); border-bottom: 1px solid var(--color-line-light); vertical-align: top; }
.table th:first-child, .table td:first-child { padding-left: 20px; }
.table td:first-child { color: var(--color-ink); font-weight: 600; }
.table tr.is-us td { background: var(--color-lime); color: var(--color-ink); }
.table--compare { min-width: 960px; }
/* Two-way comparison (compare.html): rows are topics, the Tracefox column is lime */
.table--versus th:first-child { width: 18%; }
.table--versus th:not(:first-child) { width: 41%; }
.table--versus th.is-us { padding: 14px 24px 14px 20px; background: var(--color-lime); color: var(--color-ink); }
.table--versus td.is-us { padding-left: 20px; background: var(--color-lime); color: var(--color-ink); }
.section--ink .table th { color: var(--color-white-muted); border-color: var(--color-line-dark); }
.section--ink .table td { color: var(--color-white-muted); border-color: var(--color-line-dark); }
.section--ink .table td:first-child { color: var(--color-white); }
.section--ink .table tr.is-us td { color: var(--color-ink); } /* lime highlight rows keep ink text on dark sections */
.tag {
  display: inline-block;
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--tag-size);
  line-height: 1.3;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  max-width: 100%; /* tags wrap rather than push the page sideways at large text sizes */
}
.tag--allow { background: var(--color-lime); color: var(--color-ink); }
.tag--deny { background: var(--color-signal); color: var(--color-ink); }
.tag--plain { padding: 3px 7px; border: 1px solid var(--color-line-light); color: var(--color-ink); } /* a label, not a state: lime and signal stay for allow and deny */

/* Revoke strip, full width version */
.revoke--wide { justify-content: space-between; flex-wrap: wrap; padding: 20px 24px; border: 1px solid var(--color-line-dark); }
.revoke--wide:has(.revoke__steps) { flex-direction: row; align-items: center; gap: 16px 40px; padding-block: 20px; }

/* ---------- FAQ ---------- */
.faq-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 64px; align-items: start; }
.faq-layout .section-head__title { position: sticky; top: calc(var(--nav-height) + 32px); }
.faq { border-top: 1px solid var(--color-line-light); }
.faq details { border-bottom: 1px solid var(--color-line-light); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 24px 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--term-size);
  line-height: 1.25;
  letter-spacing: var(--tracking-title);
  list-style: none;
  cursor: pointer;
  transition: color 0.2s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex-shrink: 0; font-family: var(--font-mono); font-size: 1.5rem; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--color-cobalt); }
.faq details > p { max-width: 720px; padding: 0 48px 28px 0; color: var(--color-ink-muted); }
.faq details { scroll-margin-top: calc(var(--nav-height) + 16px); } /* deep links such as faq.html#revoke land below the sticky nav */
.faq details > p .link { color: var(--color-ink); }
.faq details > p code { font-weight: 700; }
.section__inner--loose { gap: 96px; } /* FAQ groups on the questions page */
.section-head__title .lead .link { color: var(--color-ink); }
/* Jump links in a hero (questions page): white, lime on hover, like the closing block's alternate link */
.page-hero__jump { gap: 10px 28px; }
.page-hero .link { color: var(--color-white); }
.page-hero .link:hover, .hero .link:hover { color: var(--color-lime); }
.hero__alt { align-self: flex-start; }

/* ---------- Readiness check ---------- */
.quiz-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; }
.quiz { display: flex; flex-direction: column; gap: 16px; }
.q { min-width: 0; margin: 0; padding: 32px; background: var(--color-white); border: 1px solid var(--color-line-light); }
.q legend { float: left; width: 100%; padding: 0; margin-bottom: 20px; }
.q legend .label { margin-bottom: 10px; color: var(--color-ink); }
.q legend .title { display: block; }
.q__opts { clear: both; display: grid; gap: 8px; }
.opt {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--color-line-light);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.opt:hover { border-color: var(--color-ink); }
.opt input {
  -webkit-appearance: none;
  appearance: none;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  background: var(--color-white);
  border: 2px solid var(--color-ink);
  border-radius: 0;
  cursor: pointer;
}
.opt input:checked { background: var(--color-ink); box-shadow: inset 0 0 0 3px var(--color-white); }
.opt:has(input:checked) { border-color: var(--color-ink); background: var(--color-paper); }
.quiz__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-top: 8px; }
.quiz__error { align-items: flex-start; color: var(--color-ink); font-weight: 600; }
.quiz__error::before { margin-top: 7px; } /* square sits on the first line when the message wraps */
.quiz__error[hidden] { display: none; }
.quiz-aside { position: sticky; top: calc(var(--nav-height) + 32px); }
.progress { height: 6px; background: var(--color-line-dark); }
.panel--ink .progress__text { color: var(--color-white-muted); }
.progress__bar { width: 0; height: 100%; background: var(--color-lime); transition: width 0.3s ease; }
.result { scroll-margin-top: calc(var(--nav-height) + 24px); }
.result[hidden] { display: none; }
.result .title { font-size: var(--subhead-size); }
.result--no { border-top: 6px solid var(--color-signal); }

/* ---------- Tablet (≤1199px) ---------- */
@media (max-width: 1199px) {
  .page-hero { padding-block: 80px 72px; }
  .section-head .lead { width: auto; max-width: 680px; } /* DESIGN.md: leads held to 520–680px */
  .cards--3 { grid-template-columns: 1fr; }
  .step { grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 24px; row-gap: 12px; }
  .step > .step__body { grid-column: 2; }
  .step--compact > div { grid-column: 2; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .stats__item:nth-child(3) { padding-left: 0; border-left: 0; }
  .faq-layout { grid-template-columns: 1fr; gap: 32px; }
  .faq-layout .section-head__title { position: static; }
  .quiz-layout { grid-template-columns: 1fr; gap: 24px; }
  .quiz-aside { position: static; }
  .panel { padding: 32px; }
}

/* ---------- Phone (≤809px) ---------- */
@media (max-width: 809px) {
  .nav__toggle { display: inline-flex; }
  .nav .btn { padding: 14px 16px; }
  .nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 0 var(--gutter) 12px;
    background: var(--color-paper);
    border-bottom: 1px solid var(--color-line-light);
  }
  .nav.is-open .nav__links { display: flex; }
  .nav__links a { padding: 16px 0; border-top: 1px solid var(--color-line-light); }

  .page-hero { padding-block: 56px; }
  .step, .step--compact { grid-template-columns: 1fr; row-gap: 10px; }
  .step > .step__body, .step--compact > div { grid-column: auto; }
  .split, .cards--2 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; border-top: 0; }
  .stats__item, .stats__item + .stats__item { padding: 24px 0; border-left: 0; border-top: 1px solid var(--color-line-light); }
  .panel { padding: 28px 24px; }
  .q { padding: 24px 20px; }
  .faq summary { font-size: 1.125rem; }
  .section__inner { gap: 40px; } /* scales with the section padding, 120 to 80 */
  .section__inner--loose { gap: 64px; }
  .faq details > p { padding-right: 0; }

  /* Tables become stacked blocks, each cell labelled */
  .table--compare { min-width: 0; }
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack td { display: block; width: 100%; }
  .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table--stack tr { padding: 20px 0; border-bottom: 1px solid var(--color-line-light); }
  .section--ink .table--stack tr { border-color: var(--color-line-dark); }
  .table--stack td, .table--stack td:first-child { padding: 2px 0; border: 0; }
  .table--stack td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin: 12px 0 2px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--tag-size);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-ink-muted);
  }
  .section--ink .table--stack td[data-label]::before { color: var(--color-lime); }
  .table--stack tr.is-us { padding: 20px; background: var(--color-lime); }
  .table--stack tr.is-us td { background: none; }
  .table--stack tr.is-us td[data-label]::before { color: var(--color-ink); }
  .table--versus td.is-us { margin-top: 12px; padding: 4px 16px 16px; }
  .table--versus td.is-us[data-label]::before { color: var(--color-ink); }
  .revoke--wide { padding: 16px; }
}

/* Very narrow phones: the header button moves into the menu so the logo has room. */
.nav__links .nav__book { display: none; }
@media (max-width: 519px) {
  .nav__right .btn { display: none; }
  .btn { white-space: normal; line-height: 1.25; padding-block: 16px; } /* long labels wrap at large text sizes; same 52px height as before */
  .nav__links .nav__book { display: flex; justify-content: space-between; margin-top: 8px; padding: 18px 24px; border-top: 0; color: var(--color-white); }
}
.nav__links .nav__book:hover { color: var(--color-white); }

/* Phone booking bar (homepage): with the header button in the menu, this keeps "Book" in thumb reach.
   Paper with a top hairline, like the sticky nav. site.js adds .is-shown once the hero has scrolled away;
   visibility keeps the hidden bar out of the tab order. */
.book-bar { display: none; }
@media (max-width: 519px) {
  .js .book-bar {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
    padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
    background: var(--color-paper);
    border-top: 1px solid var(--color-line-light);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.3s var(--ease-out), visibility 0s linear 0.3s;
  }
  .js .book-bar.is-shown { transform: none; visibility: visible; transition-delay: 0s; }
  .book-bar .btn { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .js .book-bar { transform: none; opacity: 0; transition: opacity 0.2s ease, visibility 0s linear 0.2s; }
  .js .book-bar.is-shown { opacity: 1; }
}

/* ---------- Long-form text: guides, sample report, security ---------- */
.article { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 80px; align-items: start; }
.prose { max-width: 720px; display: flex; flex-direction: column; gap: 20px; font-size: var(--prose-size); line-height: 1.6; }
.prose > h2 { margin-top: 28px; font-family: var(--font-headline); font-size: var(--subhead-size); font-weight: 400; line-height: 1.12; letter-spacing: var(--tracking-headline); text-wrap: balance; }
.prose > h3 { margin-top: 12px; font-family: var(--font-sans); font-size: var(--title-size); font-weight: 600; line-height: 1.15; letter-spacing: var(--tracking-title); }
.prose p, .prose li { text-wrap: pretty; }
.prose ul, .prose ol { display: flex; flex-direction: column; gap: 10px; padding-left: 24px; }
.prose ul { list-style: square; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--color-cobalt); font-weight: 700; }
.prose strong { font-weight: 600; }
.prose a:not(.btn) { border-bottom: 2px solid currentColor; font-weight: 600; }
.prose a:not(.btn):hover { color: var(--color-cobalt); }
.prose > h2 { scroll-margin-top: 16px; } /* jump links land with a little air under the sticky nav */

/* On this page: jump links at the top of long pages (guides, sample report, security, About).
   An eyebrow label, then one row per section split by hairlines; each row is a 44px tap target. */
.toc { display: flex; flex-direction: column; gap: 12px; }
.prose .toc ol, .toc ol { display: flex; flex-direction: column; gap: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-line-light); border-bottom: 1px solid var(--color-line-light); }
.toc li + li { border-top: 1px solid var(--color-line-light); }
.prose .toc a, .toc a { display: block; padding: 10px 0; border-bottom: 0; font-size: var(--body-size); font-weight: 500; line-height: 1.5; transition: color 0.2s ease; }
.prose .toc a:hover, .toc a:hover { color: var(--color-cobalt); }
.section__inner > .toc { max-width: 720px; }
.prose > * { min-width: 0; }
.prose .table-wrap { margin: 8px 0; max-width: 100%; overflow-x: auto; }
.prose .table { font-size: var(--body-size); }
.prose .table th:first-child, .prose .table td:first-child { padding-left: 0; } /* no lime row in prose tables, so the first column lines up with the text */
.callout { padding: 24px 28px; background: var(--color-white); border-left: 4px solid var(--color-cobalt); font-size: var(--body-size); line-height: 1.55; }
.callout .label { display: block; margin-bottom: 8px; }
.callout--lime { background: var(--color-lime); border-left-color: var(--color-ink); }
.article__aside { position: sticky; top: calc(var(--nav-height) + 32px); display: flex; flex-direction: column; gap: 20px; }
.article__aside .panel { padding: 28px; gap: 14px; }
.source { font-size: var(--small-size); line-height: 1.5; color: var(--color-ink-muted); }
.section--ink .source { color: var(--color-white-muted); }
.cards > li { min-width: 0; } /* grid items may shrink, so cards wrap at large text sizes instead of pushing the page sideways */
.guide-list > li { display: flex; }
.guide-list .card { flex: 1; display: flex; flex-direction: column; gap: 16px; transition: border-color 0.2s ease; }
.guide-list a.card:hover { border-color: var(--color-ink); }
.guide-list .link { align-self: flex-start; }
.guide-list .card .body { flex: 1; }
.guide-list a.card:hover .title { color: var(--color-cobalt); }
.report-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--color-line-light); border: 1px solid var(--color-line-light); }
.report-kpis > div { padding: 24px; background: var(--color-white); display: flex; flex-direction: column; gap: 10px; }
.report-kpis .stat { font-size: 2.125rem; } /* 34px: four stats in a quarter-width cell */
.status-ok { color: var(--color-status-ok); font-weight: 600; }
.status-watch { color: var(--color-status-watch); font-weight: 600; }

@media (max-width: 1199px) {
  .article { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .article__aside { position: static; }
  .report-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 809px) {
  .prose > h2 { margin-top: 16px; }
  .report-kpis { grid-template-columns: 1fr; }
}

/* Glossary (definition list inside .prose) */
.glossary { display: grid; grid-template-columns: 220px minmax(0, 1fr); border-top: 1px solid var(--color-line-light); }
.glossary dt, .glossary dd { padding: 20px 0; border-bottom: 1px solid var(--color-line-light); }
.glossary dt { padding-right: 24px; font-family: var(--font-sans); font-size: var(--term-size); font-weight: 600; line-height: 1.25; letter-spacing: var(--tracking-title); scroll-margin-top: calc(var(--nav-height) + 16px); }
.glossary dd { font-size: 1.0625rem; /* 17px: denser than prose for a long list */ line-height: 1.55; }
@media (max-width: 809px) {
  .glossary { grid-template-columns: 1fr; }
  .glossary dt { padding-bottom: 6px; border-bottom: 0; }
  .glossary dd { padding-top: 0; }
}

/* Skip link: hidden until focused by keyboard */
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 10; padding: 12px 16px; background: var(--color-ink); color: var(--color-white); font-weight: 600; }
.skip-link:focus { top: 12px; }

/* Stats as a vertical list of facts (about page, company panel) */
.stats.stats--list { grid-template-columns: 1fr; border-top: 0; }
.stats.stats--list .stats__item { padding: 20px 0; border-left: 0; border-top: 1px solid var(--color-line-light); }
.stats.stats--list .stats__item:first-child { padding-top: 0; border-top: 0; }
.stats.stats--list .stats__item:last-child { padding-bottom: 0; }
.stats--list dd.title { margin-top: 8px; }
/* Pricing lime block: three short figures (168 hours, 21 shifts, 4–5 SREs) stay side by side at every width */
.stats.stats--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 0; border-top: 1px solid var(--color-line-light); }
.stats--trio .stats__item, .stats--trio .stats__item + .stats__item { justify-content: space-between; padding-top: 20px; padding-bottom: 0; border-top: 0; } /* labels wrap unevenly; the figures share a baseline */
.stats--trio .stats__item + .stats__item { padding-left: 24px; border-left: 1px solid var(--color-line-light); }
@media (max-width: 519px) {
  .stats--trio .stats__item { padding-right: 12px; }
  .stats--trio .stats__item + .stats__item { padding-left: 12px; }
}

/* Example reliability goal (homepage, reliability work panel) */
.goal { margin: 0; display: flex; flex-direction: column; gap: 16px; padding-top: 24px; border-top: 1px solid var(--color-line-dark); }
.goal__caption { color: var(--color-white-muted); }
.panel--ink .goal__name { color: var(--color-white); font-weight: 500; }
.goal__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 5em), 1fr)); gap: 16px; }
.goal__facts > div { display: flex; flex-direction: column; gap: 6px; }
.goal__facts dt { color: var(--color-lime); }

/* Report excerpt (homepage): the hero stat row reused inside an ink panel */
.excerpt .proof { margin-top: 4px; }
.excerpt > .body { max-width: 640px; }

/* Example handover (How it works): the handover pack shown filled in, not listed.
   The panel is the note itself; rows are the pack's contents in the order the page promises them. */
.split--handover { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.handover { margin: 0; gap: 24px; }
.handover__caption { display: flex; flex-direction: column; gap: 10px; }
.handover__note { font-size: var(--small-size); line-height: 1.45; color: var(--color-ink-muted); max-width: 34em; }
.handover__head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 24px; border-top: 1px solid var(--color-line-light); }
.handover .handover__meta { font-size: var(--small-size); color: var(--color-ink-muted); }
.handover__meta time, .handover__times time { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-ink); }
.handover .handover__title { font-family: var(--font-sans); font-weight: 600; font-size: var(--title-size); line-height: 1.15; letter-spacing: var(--tracking-title); color: var(--color-ink); text-wrap: balance; }
.handover__rows { display: flex; flex-direction: column; }
.handover__rows > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 8px 24px; padding: 16px 0; border-top: 1px solid var(--color-line-light); }
.handover__rows > div:last-child { padding-bottom: 0; }
.handover__rows dt { color: var(--color-ink); padding-top: 3px; }
.handover__rows dd { display: flex; flex-direction: column; gap: 10px; color: var(--color-ink-muted); max-width: 34em; }
.handover .handover__rows dd p { color: inherit; }
.handover__times { display: flex; flex-direction: column; gap: 6px; }
.handover__times li { display: grid; grid-template-columns: 3.25em minmax(0, 1fr); gap: 12px; }
.handover__confidence { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
@media (max-width: 1199px) {
  .split--handover { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 519px) {
  .handover__rows > div { grid-template-columns: minmax(0, 1fr); }
  .handover__rows dt { padding-top: 0; }
}

/* ==========================================================
   Site revisions, 2026-10-24 (design canvas "Tracefox site revisions").
   Placeholders, team and rota, the options table, engagement access
   column, alert audit form and the readiness email panel.
   ========================================================== */

/* The closing block has no top padding; after an ink section it needs it back. */
.section--ink + .cta { padding-top: var(--section-y); }

/* Placeholders: an orange marker for a fact that is not cleared yet (a name, number, photo,
   quote or status). Every .ph and .ph-media must be replaced with a real fact or removed before
   the page goes live. Signal orange with ink text: 5.8:1, and it reads on paper, white, cobalt and ink. */
.ph { padding: 0 4px; background: var(--color-signal); color: var(--color-ink); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ph-media {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 24px; text-align: center;
  background: var(--color-paper); border: 1px solid var(--color-line-light); color: var(--color-ink-muted);
}
.ph-media svg { width: 40px; height: 40px; }
.ph-media .ph { font-family: var(--font-mono); font-weight: 700; font-size: var(--tag-size); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.ph-media__note { max-width: 28em; font-size: var(--small-size); line-height: 1.45; }
.ph-media--portrait { aspect-ratio: 4 / 5; }
.ph-media--square { aspect-ratio: 1 / 1; border: 0; border-bottom: 1px solid var(--color-line-light); }
.ph-media--wide { aspect-ratio: 16 / 10; background: var(--color-white); }
.ph-media--logo { align-self: flex-start; min-height: 56px; padding: 12px 20px; }
.ph-media--embed { min-height: 560px; background: var(--color-white); }

/* Two-up fact grid (home: who answers at 3am; About: how the rota works) */
.stats.stats--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0; }
.stats--pair .stats__item, .stats--pair .stats__item + .stats__item { padding: 24px 24px 24px 0; border-left: 0; border-bottom: 1px solid var(--color-line-light); }
.stats--pair .stats__item:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--color-line-light); }
.section--ink .stats { border-color: var(--color-line-dark); }
.section--ink .stats__item, .section--ink .stats__item + .stats__item { border-color: var(--color-line-dark); }
.section--ink .stats__item dt { color: var(--color-white-muted); }

/* Founder and team (home and About) */
.person { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 32px; align-items: start; }
.person__text { display: flex; flex-direction: column; gap: 12px; }
.person__name { font-family: var(--font-headline); font-size: var(--subhead-size); font-weight: 400; line-height: 1.12; letter-spacing: var(--tracking-headline); }
.person__role { color: var(--color-ink-muted); }
.founder { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 56px; align-items: start; }
.founder__text { display: flex; flex-direction: column; gap: 20px; max-width: 36em; }
.founder__text .hero-video { width: 100%; margin-top: 12px; }
.founder__text .hero-video__note { color: var(--color-ink-muted); }
.cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.team-card { padding: 0; gap: 0; }
.team-card__body { display: flex; flex-direction: column; gap: 6px; padding: 24px; }

/* Cost of cover (home: why the price works) */
.cost { display: flex; flex-direction: column; }
.cost__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; padding: 20px 0; border-top: 1px solid var(--color-line-light); }
.cost__row:last-child { border-bottom: 1px solid var(--color-line-light); }
.cost__row.is-us { padding-inline: 20px; background: var(--color-lime); border-color: var(--color-lime); }
.cost__what { display: flex; flex-direction: column; gap: 4px; }
.cost__what span:first-child { font-weight: 600; }
.cost__what span + span { font-size: var(--small-size); color: var(--color-ink-muted); }
.cost__row.is-us .cost__what span + span { color: var(--color-ink); }

/* Customer quotes (home) */
.quote { margin: 0; color: var(--color-ink); font-size: var(--lead-size); line-height: 1.45; }
.card .quote p { color: var(--color-ink); }
.quote__by { font-size: var(--small-size); }
.quote__metric { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--color-line-light); }

/* Four-way comparison (home and options): rows are topics, the Tracefox column is lime */
.table--options { min-width: 960px; }
.table--options th:first-child { width: 16%; }
.table--options th.is-us { padding: 14px 24px 14px 20px; background: var(--color-lime); color: var(--color-ink); }
.table--options td.is-us { padding-left: 20px; background: var(--color-lime); color: var(--color-ink); }
.table--options tbody th { padding: 22px 24px 22px 20px; font-family: var(--font-sans); font-size: var(--body-size); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--color-ink); vertical-align: top; }
.table__note { max-width: 44em; color: var(--color-ink-muted); }

/* Price tiers inside the price card (home) */
.tiers { display: flex; flex-direction: column; }
.tiers > div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 20px; flex-wrap: wrap; padding: 16px 0; border-top: 1px solid var(--color-line-dark); }
.tiers dt { color: var(--color-white-muted); }
.tiers dd { display: flex; align-items: baseline; gap: 8px; }
.tiers .stat { font-size: 2rem; }
.tiers__unit { font-size: var(--small-size); color: var(--color-white-muted); }

/* Engagement: each step adds the access Tracefox holds at that point */
.step--access { grid-template-columns: 7rem minmax(0, 2fr) minmax(0, 1fr); }
.step--access .step__head { gap: 12px; }
.step--access .step__head .body { color: var(--color-ink-muted); max-width: 36em; }
.step--access .step__head .body strong { color: var(--color-ink); font-weight: 600; }
.step__access { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; background: var(--color-white); border: 1px solid var(--color-line-light); font-size: var(--small-size); line-height: 1.45; color: var(--color-ink-muted); }
.step__access .label { color: var(--color-ink); }
.step__access strong { color: var(--color-ink); font-weight: 600; }

/* Allow and deny rows (security: code repositories) */
.rules { display: flex; flex-direction: column; }
.rules li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--color-line-light); }
.rules li:last-child { border-bottom: 1px solid var(--color-line-light); }
.rules .tag { justify-self: start; }

/* Forms (alert audit, readiness email) */
.form { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 500; }
.field input, .field select {
  min-height: 48px; padding: 0 12px;
  font: inherit; color: var(--color-ink);
  background: var(--color-white); border: 1px solid rgba(13, 15, 14, 0.4); border-radius: 0;
}
.field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.check input { flex-shrink: 0; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--color-ink); }
.form__note { font-size: var(--small-size); line-height: 1.45; }
.form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 56px; align-items: start; }
.form-layout > .panel { position: sticky; top: calc(var(--nav-height) + 32px); }
.book-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; align-items: start; }
.book-aside { display: flex; flex-direction: column; gap: 32px; }
.book-aside .person-chip { flex-direction: row; gap: 20px; align-items: center; padding: 28px; }
.book-aside .person-chip .ph-media { flex: none; width: 80px; height: 80px; padding: 0; }
.book-aside ol { display: flex; flex-direction: column; gap: 8px; padding-left: 22px; list-style: decimal; }

@media (max-width: 1199px) {
  .founder, .person { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .founder .ph-media--portrait, .person .ph-media--portrait { max-width: 360px; }
  .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step--access { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .step--access > .step__access { grid-column: 2; }
  .form-layout, .book-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .form-layout > .panel { position: static; }
}
@media (max-width: 809px) {
  .stats.stats--pair { grid-template-columns: minmax(0, 1fr); }
  .stats--pair .stats__item:nth-child(even) { padding-left: 0; border-left: 0; }
  .cards--4 { grid-template-columns: minmax(0, 1fr); }
  .step--access { grid-template-columns: minmax(0, 1fr); }
  .step--access > .step__access { grid-column: auto; }
  .table--options { min-width: 0; }
  .table--options th:first-child { width: auto; }
  .table--options tbody th, .table--options tbody th:first-child { display: block; padding: 0 0 4px; border: 0; font-size: var(--title-size); }
  .table--options td.is-us { margin-top: 12px; padding: 4px 16px 16px; }
  .table--options td.is-us[data-label]::before { color: var(--color-ink); }
  .ph-media--embed { min-height: 360px; }
}
.stats__item dt.title { color: var(--color-ink); }
.section--ink .panel--ink { border-color: var(--color-line-dark); }

/* Homepage hero without the video (moved to About): hold the headline and lead to a readable width; the proof row plays in last. */
.hero--home .display { max-width: 15em; }
.hero--home .hero__copy .lead { max-width: 640px; }
.hero--home .proof { animation: rise 0.6s var(--ease-out) 0.24s both; }
@media (prefers-reduced-motion: reduce) { .hero--home .proof { animation-name: fade; } }
.quiz-aside { display: flex; flex-direction: column; gap: 16px; }
.panel[hidden] { display: none; }

/* Sample report: where the month's alerts went, as one stacked bar with a key.
   Runbook fixes lime, noise ink, false alarms grey, escalations signal; they differ in lightness as well as hue. */
.alert-split { margin: 8px 0; display: flex; flex-direction: column; gap: 14px; padding: 24px; background: var(--color-white); border: 1px solid var(--color-line-light); }
.alert-split__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.alert-split__head .label + .label { color: var(--color-ink-muted); }
.alert-split__bar { display: flex; height: 28px; gap: 2px; }
.alert-split__seg { flex-basis: 0; min-width: 4px; }
.alert-split__seg--runbook { background: var(--color-lime); outline: 1px solid var(--color-line-light); outline-offset: -1px; }
.alert-split__seg--noise { background: var(--color-ink); }
.alert-split__seg--false { background: rgba(13, 15, 14, 0.32); }
.alert-split__seg--escalated { background: var(--color-signal); }
.alert-split__key { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; font-size: var(--body-size); }
.alert-split__key > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--color-line-light); }
.alert-split__key dt { display: flex; align-items: center; gap: 10px; }
.alert-split__key dd { font-weight: 600; font-variant-numeric: tabular-nums; }
.alert-split__swatch { flex-shrink: 0; width: 12px; height: 12px; }
@media (max-width: 809px) { .alert-split__key { grid-template-columns: minmax(0, 1fr); } .alert-split { padding: 20px; } }