/* AI Partner Sentinel
   Design source: skill sentinel-design. Tokens, type, components and motion rules follow it. */

@font-face {
  font-family: "Chakra Petch";
  src: url("../fonts/chakra-petch-600.woff2?v=78b72bbec5") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Chakra Petch";
  src: url("../fonts/chakra-petch-700.woff2?v=ed8ed86c29") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-400.woff2?v=9f8e022a88") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-500.woff2?v=fc8105f8cb") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-600.woff2?v=bd83e5464d") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-400.woff2?v=2ca8b55312") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}

:root {
  --void-950: #04060B;
  --void-900: #070A12;
  --void-800: #0C111C;
  --steel-800: #121826;
  --steel-700: #1B2230;
  --steel-600: #2A3345;
  --steel-500: #5A6579;
  --steel-400: #8792A6;
  --steel-300: #B7C0CF;
  --steel-100: #E8ECF4;
  --white: #F7F9FF;

  --red-700: #B3121F;
  --red-500: #FF2D3F;
  --red-400: #FF5A66;
  --red-glow: rgba(255, 45, 63, 0.45);

  --blue-700: #1448B8;
  --blue-500: #2D7BFF;
  --blue-400: #5C9BFF;
  --blue-glow: rgba(45, 123, 255, 0.45);

  --ok: #2ECC8F;
  --warn: #FFB020;
  --orange: #FF7A2F;

  --split: linear-gradient(90deg, var(--red-500) 0 49.5%, var(--blue-500) 50.5% 100%);

  --fs-300: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --fs-400: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-500: clamp(1.1875rem, 1.12rem + 0.3vw, 1.3125rem);
  --fs-600: clamp(1.5rem, 1.35rem + 0.6vw, 1.75rem);
  --fs-700: clamp(1.9rem, 1.6rem + 1.2vw, 2.5rem);
  --fs-800: clamp(2.5rem, 1.9rem + 2.6vw, 4rem);
  /* hero display sits a step below the page h1 so the line breaks land between phrases
     inside the narrower left column of the two column hero */
  --fs-hero: clamp(2.25rem, 1.5rem + 2vw, 3.5rem);

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-body: 1.6;
  --measure: 62ch;

  --pad: clamp(16px, 4vw, 48px);
  --section: clamp(64px, 10vw, 144px);
  --nav-h: 64px;

  --chamfer: 14px;
  --chamfer-sm: 8px;
  --chamfer-btn: 10px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding-top: var(--nav-h);
  background: var(--void-950);
  color: var(--steel-300);
  font-family: Barlow, system-ui, sans-serif;
  font-size: var(--fs-400);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: "Chakra Petch", system-ui, sans-serif;
  color: var(--white);
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-800); line-height: var(--lh-tight); font-weight: 700; }
h2 { font-size: var(--fs-700); line-height: var(--lh-snug); font-weight: 600; }
h3 { font-size: var(--fs-600); line-height: var(--lh-snug); font-weight: 600; }

p { margin: 0; max-width: var(--measure); }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

code, pre { font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  background: var(--white);
  color: var(--void-950);
  padding: 12px 20px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 2px;
}
.skip:focus { top: 12px; }

:focus-visible {
  outline: 2px solid var(--blue-400);
  outline-offset: 3px;
}

.wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section { padding-block: var(--section); background: var(--void-900); border-top: 1px solid var(--steel-700); }
.section__head { display: grid; gap: 12px; margin-bottom: clamp(32px, 5vw, 64px); }
.section__sub { color: var(--steel-400); font-size: var(--fs-500); max-width: 46ch; }
.caption { font-size: var(--fs-300); color: var(--steel-400); margin-top: 12px; }

/* Chamfer: clip-path cannot draw a border, so bordered chamfers use a 1px gradient
   wrapper with an inset surface. Used by .panel-border and buttons. */
.chamfer {
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
}
.chamfer-sm {
  clip-path: polygon(var(--chamfer-sm) 0, 100% 0, 100% calc(100% - var(--chamfer-sm)),
    calc(100% - var(--chamfer-sm)) 100%, 0 100%, 0 var(--chamfer-sm));
}

/* Buttons */
.btn {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding-inline: 28px;
  font-family: Barlow, system-ui, sans-serif;
  font-size: var(--fs-400);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--void-950);
  background: none;
  border: 0;
  cursor: pointer;
  isolation: isolate;
}
.btn::before, .btn::after {
  content: "";
  position: absolute;
  clip-path: polygon(var(--chamfer-btn) 0, 100% 0, 100% calc(100% - var(--chamfer-btn)),
    calc(100% - var(--chamfer-btn)) 100%, 0 100%, 0 var(--chamfer-btn));
  transition: opacity 200ms ease, background-color 150ms ease;
}
.btn::before { inset: -1px; z-index: -2; background: var(--split); opacity: 0; }
.btn--primary::after { inset: 0; z-index: -1; background: var(--white); }
.btn--primary { color: var(--void-950); }
.btn--primary:hover::after { background: var(--steel-100); }
.btn--primary:hover::before { opacity: 1; }

.btn--secondary::before { inset: 0; z-index: -2; background: var(--steel-600); opacity: 1; }
.btn--secondary::after { inset: 1px; z-index: -1; background: var(--void-800); }
.btn--secondary { color: var(--white); }
.btn--secondary:hover::before { background: var(--steel-300); }

.btn--nav { min-height: 40px; padding-inline: 18px; font-size: var(--fs-300); }

/* Navigation */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
  height: var(--nav-h);
  background: rgba(4, 6, 11, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.nav__inner {
  height: var(--nav-h);
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: "Chakra Petch", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--white);
}
.lockup__div { width: 1px; height: 18px; background: var(--steel-600); }
.lockup__product { color: var(--steel-300); font-weight: 600; }

.nav__links { display: none; }
.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 4px;
  background: none;
  border: 0;
  color: var(--white);
  cursor: pointer;
}

.nav__rule {
  position: absolute;
  inset-inline: 0;
  inset-block-end: -2px;
  height: 2px;
  background: var(--split);
  opacity: 0;
  transition: opacity 200ms ease;
}
.nav[data-scrolled="true"] .nav__rule { opacity: 1; }

.nav__sheet {
  position: fixed;
  inset-block-start: var(--nav-h);
  inset-inline: 0;
  height: calc(100dvh - var(--nav-h));
  background: var(--void-950);
  border-top: 1px solid var(--steel-700);
  padding: 24px var(--pad) 48px;
  transition: opacity 200ms ease;
}
.nav__sheet[hidden] { display: none; }
.nav__sheet nav { display: grid; gap: 4px; }
.nav__sheet a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding-inline: 4px;
  color: var(--steel-100);
  text-decoration: none;
  font-size: var(--fs-500);
  border-bottom: 1px solid var(--steel-700);
}
.nav__sheet a:hover { color: var(--white); }

/* Pre-animation state. Only applied when JS confirms motion will run, so the thread is
   never left empty if a script fails. Copy and headings always paint immediately, because
   the h1 is the LCP element and a fade on it costs real time.
   The entrance is four keyframe delays rather than a tween library, which keeps 30 KB of
   JavaScript off the critical path. Everything below is compositor friendly. */
.js-motion .bubble { opacity: 0; }
.js-motion .wash { opacity: 0; }
.js-motion .chat-border { transform: scale(0.994); }

.js-motion.is-ready .chat-border {
  animation: panel-in 800ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.js-motion.is-ready .wash--red { animation: wash-in 1200ms ease-out 150ms forwards; }
.js-motion.is-ready .wash--blue { animation: wash-in 1200ms ease-out 300ms forwards; }
.js-motion.is-ready .bubble { animation: bubble-in 500ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.js-motion.is-ready .chat__row:nth-of-type(1) .bubble { animation-delay: 300ms; }
.js-motion.is-ready .chat__row:nth-of-type(2) .bubble { animation-delay: 480ms; }
.js-motion.is-ready .chat__row:nth-of-type(3) .bubble { animation-delay: 660ms; }
.js-motion.is-ready .chat__row:nth-of-type(4) .bubble { animation-delay: 840ms; }

@keyframes panel-in {
  to { transform: none; }
}
@keyframes wash-in {
  to { opacity: 0.26; }
}
@keyframes bubble-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* Hero: copy left, the live thread right */
.hero {
  position: relative;
  padding-block: clamp(28px, 5vw, 64px) clamp(48px, 8vw, 96px);
  background: var(--void-950);
  overflow: clip;
}
.hero__grid {
  display: grid;
  gap: clamp(20px, 4vw, 32px);
  grid-template-areas: "copy" "actions" "visual" "proof";
  justify-items: start;
}
.hero__copy { grid-area: copy; display: grid; gap: 20px; }
.hero__actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: 12px; }
.hero__proof { grid-area: proof; font-size: var(--fs-300); color: var(--steel-400); max-width: 46ch; }
.hero__visual { grid-area: visual; width: 100%; display: flex; justify-content: center; justify-self: stretch; }
.hero h1 { max-width: none; font-size: var(--fs-hero); }
.lead { font-size: var(--fs-500); color: var(--steel-300); max-width: 42ch; }
@media (max-width: 639px) {
  .hero__actions { display: grid; gap: 12px; width: 100%; }
  .hero__actions .btn { width: 100%; }
  .bubble { max-width: 92%; }
}

/* The thread. A chamfered panel with a header, a darker body and two bubble directions.
   The bubble cut corner points at its sender, which keeps the armour geometry without
   rounding anything into a pill. Red edge marks what was found, blue edge what was handled. */
.chat-fig { margin: 0; width: 100%; max-width: 520px; display: grid; gap: 12px; }
.chat-fig .caption { margin: 0; }
.chat-wrap { position: relative; isolation: isolate; }
.chat-border { --chamfer: 18px; position: relative; z-index: 1; background: var(--steel-600); }
/* .panel sets its own padding later in the sheet, so this needs the two class selector */
.panel.chat { padding: 0; background: var(--void-900); display: grid; }

.chat__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--void-800);
  border-block-end: 1px solid var(--steel-700);
}
.chat__avatar { width: 36px; height: 36px; flex: 0 0 auto; display: block; }
.chat__id { display: grid; line-height: 1.25; margin-inline-end: auto; }
.chat__name { font-family: "Chakra Petch", system-ui, sans-serif; font-weight: 600; font-size: 1rem; color: var(--white); }
.chat__sub { font-size: var(--fs-300); color: var(--steel-400); }
.chat__online {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-300);
  color: var(--steel-300);
}
.chat__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(46, 204, 143, 0.16);
  animation: breathe 3.6s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.chat__body { display: grid; gap: 10px; padding: clamp(14px, 3vw, 18px); background: var(--void-950); }
.chat__day { text-align: center; font-size: var(--fs-300); color: var(--steel-400); margin-block: 0 4px; }
.chat__day span { display: inline-block; padding: 2px 10px; background: var(--steel-800); border-radius: 2px; }
.chat__row { display: flex; }
.chat__row--out { justify-content: flex-end; }

.bubble {
  position: relative;
  max-width: 86%;
  padding: 10px 14px;
  font-size: var(--fs-400);
  line-height: 1.5;
}
.bubble p { max-width: none; }
.bubble--out {
  background: var(--steel-700);
  color: var(--steel-100);
  /* the cut sits on the sender's own corner, bottom right */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}
.bubble--in {
  background: var(--void-800);
  color: var(--steel-300);
}
.bubble--found, .bubble--done { padding-inline-start: 16px; }
.bubble--found::before, .bubble--done::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 2px;
}
.bubble--found::before { background: var(--red-500); }
.bubble--done::before { background: var(--blue-500); }

/* The action log is a two column key and value, so every row lines up even when a label
   is longer than the others. display: contents keeps the markup a plain list of rows. */
.act {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px 12px;
  margin-block-start: 10px;
  padding-block-start: 9px;
  border-block-start: 1px solid var(--steel-600);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.8125rem;
  line-height: 1.7;
}
.act__row { display: contents; }
.act__k { color: var(--steel-400); }
.act code { color: var(--steel-100); font-size: inherit; }
.act__row:last-child .act__k { color: var(--blue-400); }

/* Composer: the affordance that says messaging, without copying another app's palette.
   It is a real link to the WhatsApp thread, so it does something when tapped. */
.chat__composer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--void-800);
  border-block-start: 1px solid var(--steel-700);
  text-decoration: none;
}
.chat__field {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--steel-500);
  border-radius: 2px;
  color: var(--steel-400);
  font-size: var(--fs-300);
  transition: border-color 150ms ease, color 150ms ease;
}
.chat__send {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  background: var(--steel-700);
  color: var(--blue-400);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: background-color 150ms ease, color 150ms ease;
}
.chat__composer:hover .chat__field { border-color: var(--steel-300); color: var(--steel-300); }
.chat__composer:hover .chat__send { background: var(--blue-500); color: var(--void-950); }

/* Two washes light the panel from the sides, red left, blue right. Plain gradients, no blur.
   They are kept apart and pushed outside the frame so the two colours never mix to purple. */
.wash {
  position: absolute;
  z-index: 0;
  width: 50%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  opacity: 0.26;
  pointer-events: none;
}
.wash--red {
  inset-block-start: 4%;
  inset-inline-start: -24%;
  background: radial-gradient(circle closest-side,
    rgba(255, 45, 63, 0.55) 0%,
    rgba(255, 45, 63, 0.2) 42%,
    rgba(255, 45, 63, 0) 76%);
}
.wash--blue {
  inset-block-end: 2%;
  inset-inline-end: -24%;
  background: radial-gradient(circle closest-side,
    rgba(45, 123, 255, 0.55) 0%,
    rgba(45, 123, 255, 0.2) 42%,
    rgba(45, 123, 255, 0) 76%);
}

/* What a message can do: quoted message, outcome, and the unit that carries it */
.acts__grid { display: grid; gap: clamp(24px, 4vw, 48px); }
.acts__intro { display: grid; gap: 16px; align-content: start; }
.acts__note { font-size: var(--fs-300); color: var(--steel-400); max-width: 36ch; }
.acts__list { display: grid; }
.actrow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  padding-block: 20px;
  border-top: 1px solid var(--steel-700);
}
.actrow:last-child { border-bottom: 1px solid var(--steel-700); }
.actrow__msg { grid-row: 1; grid-column: 1; color: var(--steel-100); font-weight: 600; font-size: var(--fs-400); }
.actrow__out { grid-row: 2; grid-column: 1 / -1; color: var(--steel-300); font-size: var(--fs-400); max-width: 52ch; }
.actrow__unit {
  grid-row: 1;
  grid-column: 2;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: var(--fs-300);
  color: var(--steel-400);
  justify-self: end;
  align-self: baseline;
}

/* Sweep track */
.track { position: relative; display: grid; gap: 0; padding-left: 0; }
.track__line {
  position: absolute;
  z-index: 0;
  inset-block: 0;
  inset-inline-start: 21px;
  width: 1px;
  background: var(--steel-600);
  transform-origin: top center;
}
.step {
  position: relative;
  padding: 0 0 40px 64px;
  min-height: 44px;
}
.step:last-child { padding-bottom: 0; }
.step__n {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--void-900);
  border: 1px solid currentColor;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: var(--fs-300);
  color: var(--steel-400);
}
.step--found .step__n { color: var(--red-400); }
.step--handled .step__n { color: var(--blue-400); }
.step h3 { font-size: var(--fs-500); margin-bottom: 8px; }
.step p { font-size: var(--fs-400); max-width: 40ch; }

/* Report. The terminal block gets the full measure so no line is clipped, then the two
   findings sit side by side beneath it. */
.report__intro { max-width: 68ch; }
.report__intro p { color: var(--steel-300); }
.report__block { display: grid; gap: 0; min-width: 0; }
.report__block > * { min-width: 0; }
.report__lead { margin-block-start: clamp(28px, 4vw, 40px); max-width: 62ch; color: var(--steel-300); }
.report__findings { display: grid; gap: 20px; margin-block-start: 24px; }
.report__findings > * { min-width: 0; }

.panel--report {
  background: var(--steel-800);
  padding: 18px;
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--steel-600) transparent;
}
.panel--report::-webkit-scrollbar { height: 6px; }
.panel--report::-webkit-scrollbar-track { background: transparent; }
.panel--report::-webkit-scrollbar-thumb { background: var(--steel-600); }

.panel-border {
  --chamfer: 14px;
  padding: 1px;
  background: var(--steel-700);
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
}
.panel-border--sm { --chamfer: 12px; }
.panel {
  position: relative;
  background: var(--void-800);
  padding: 20px;
  clip-path: polygon(calc(var(--chamfer) - 1px) 0, 100% 0, 100% calc(100% - var(--chamfer) + 1px),
    calc(100% - var(--chamfer) + 1px) 100%, 0 100%, 0 calc(var(--chamfer) - 1px));
}
.panel--report {
  background: var(--steel-800);
  padding: 18px;
  overflow-x: auto;
  max-width: 100%;
}
.report__code {
  margin: 0;
  font-size: var(--fs-300);
  line-height: 1.7;
  color: var(--steel-300);
  white-space: pre;
}
.report__code .m { color: var(--steel-400); }
.report__code .r { color: var(--red-400); }
.report__code .w { color: var(--warn); }
.report__code .b { color: var(--blue-400); }

.finding .panel { padding: 24px; }
.finding .panel::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
}
.finding--open .panel::before { background: var(--red-500); }
.finding--done .panel::before { background: var(--blue-500); }

.finding__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; }
.tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding-inline: 8px;
  border-radius: 2px;
  font-size: var(--fs-300);
  font-weight: 600;
  font-family: Barlow, system-ui, sans-serif;
}
.tag--critical { background: rgba(255, 45, 63, 0.14); color: var(--red-400); box-shadow: inset 0 0 0 1px rgba(255, 45, 63, 0.35); }
.tag--high { background: rgba(255, 122, 47, 0.14); color: var(--orange); box-shadow: inset 0 0 0 1px rgba(255, 122, 47, 0.35); }
.finding__state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-300);
  font-weight: 500;
  color: var(--red-400);
}
.finding__state--done { color: var(--blue-400); }
.finding__id {
  margin-inline-start: auto;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: var(--fs-300);
  color: var(--steel-400);
}
.finding__title { font-size: var(--fs-500); line-height: 1.35; margin-bottom: 8px; }
.finding__asset { font-size: var(--fs-300); color: var(--steel-400); margin-bottom: 14px; }
.finding__evidence {
  margin: 0 0 16px;
  padding: 12px 14px;
  background: var(--void-950);
  border-inline-start: 1px solid var(--steel-600);
  overflow-x: auto;
  font-size: var(--fs-300);
  line-height: 1.7;
  color: var(--steel-300);
}
.finding__evidence .m { color: var(--steel-400); }
.finding__evidence .b { color: var(--blue-400); }
.finding__fix { font-size: var(--fs-300); color: var(--steel-300); display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.finding__fixlabel { color: var(--steel-400); font-weight: 500; }
.finding__fix code { color: var(--steel-100); font-size: var(--fs-300); }

/* Access */
.access__grid { display: grid; gap: clamp(24px, 4vw, 48px); }
.access__intro { display: grid; gap: 16px; align-content: start; }
.deflist__row {
  display: grid;
  gap: 4px;
  padding-block: 18px;
  border-top: 1px solid var(--steel-700);
}
.deflist__row:last-child { border-bottom: 1px solid var(--steel-700); }
.deflist dt { color: var(--steel-100); font-weight: 500; }
.deflist dd { margin: 0; color: var(--steel-300); font-size: var(--fs-400); max-width: 60ch; }

/* Pricing */
.pricing__grid { display: grid; gap: 0; }
.stage { padding-block: 28px; border-top: 1px solid var(--steel-700); display: grid; gap: 10px; align-content: start; }
.stage:last-child { border-bottom: 1px solid var(--steel-700); }
.stage h3 { font-size: var(--fs-500); }
.stage__what { font-size: var(--fs-400); color: var(--steel-300); }
.stage__price { font-size: var(--fs-300); color: var(--steel-300); font-weight: 500; padding-block-start: 12px; margin-block-start: 6px; border-top: 1px solid var(--steel-700); }

/* FAQ */
.faq__grid { display: grid; gap: clamp(24px, 4vw, 48px); }
.faq__list { display: grid; }
details { border-top: 1px solid var(--steel-700); }
details:last-child { border-bottom: 1px solid var(--steel-700); }
summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding-block: 14px;
  cursor: pointer;
  color: var(--steel-100);
  font-size: var(--fs-400);
  font-weight: 500;
  list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  background:
    linear-gradient(var(--steel-400), var(--steel-400)) center / 12px 1px no-repeat,
    linear-gradient(var(--steel-400), var(--steel-400)) center / 1px 12px no-repeat;
  transition: transform 200ms ease, opacity 200ms ease;
}
details[open] summary::after { transform: rotate(90deg); opacity: 0.6; }
summary:hover { color: var(--white); }
.faq__a { overflow: hidden; }
.faq__a p { padding-block: 0 20px; color: var(--steel-300); font-size: var(--fs-400); animation: faqin 200ms ease both; }
@keyframes faqin {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Final call to action */
.cta { position: relative; background: var(--void-950); }
.cta__rule { height: 2px; background: var(--split); }
.cta__inner {
  padding-block: clamp(64px, 10vw, 136px);
  display: grid;
  gap: 20px;
  justify-items: center;
  text-align: center;
}
.cta__inner p { color: var(--steel-300); font-size: var(--fs-500); max-width: 44ch; text-wrap: balance; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-block-start: 8px; }
.cta__contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  font-size: var(--fs-300);
  color: var(--steel-400);
  margin-block-start: 12px;
}
.cta__contact a { color: var(--steel-300); text-decoration: none; border-bottom: 1px solid var(--steel-600); padding-bottom: 1px; }
.cta__contact a:hover { color: var(--white); border-color: var(--steel-300); }

/* Footer */
.footer { background: var(--void-950); border-top: 1px solid var(--steel-700); padding-block: 32px; }
.footer__inner { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.footer__brand { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: var(--fs-300); color: var(--steel-400); }
.footer__brand a { color: var(--steel-300); text-decoration: none; }
.footer__brand a:hover { color: var(--white); }
.footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; font-size: var(--fs-300); }
.footer__links a { color: var(--steel-400); text-decoration: none; }
.footer__links a:hover { color: var(--steel-100); }
.footer__toggle {
  background: none;
  border: 0;
  padding: 8px 0;
  min-height: 44px;
  color: var(--steel-400);
  font-family: inherit;
  font-size: var(--fs-300);
  cursor: pointer;
}
.footer__toggle:hover { color: var(--steel-100); }
.footer__toggle[aria-pressed="true"] { color: var(--blue-400); }

/* Breakpoints */
@media (min-width: 640px) {
  .report__body { grid-template-columns: 1fr; }
}

@media (min-width: 960px) {
  .nav__toggle { display: none; }
  .nav__links {
    display: flex;
    align-items: center;
    gap: 28px;
  }
  .nav__links a:not(.btn) {
    color: var(--steel-300);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    padding-block: 8px;
    transition: color 150ms ease;
  }
  .nav__links a:not(.btn):hover { color: var(--white); }

  .hero__grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    grid-template-areas:
      "copy visual"
      "actions visual"
      "proof visual";
    column-gap: clamp(32px, 5vw, 80px);
    row-gap: 24px;
    align-content: center;
  }
  .hero__visual { justify-content: flex-end; align-self: center; }
  .chat-fig { max-width: 540px; }

  .acts__grid { grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
  .acts__intro { position: sticky; inset-block-start: calc(var(--nav-h) + 32px); }

  .track {
    grid-template-columns: repeat(4, 1fr);
    gap: 0 24px;
    padding-block-start: 76px;
  }
  .track__line {
    inset-block: auto;
    inset-block-start: 21px;
    inset-inline: auto;
    inset-inline-start: 22px;
    /* starts at the centre of marker 1 and stops at the centre of marker 4, so the line
       does not run on into empty space past the last step */
    width: calc(75% + 18px);
    height: 1px;
    transform-origin: left center;
  }
  .step { padding: 0; }
  .step__n { inset-block-start: -76px; inset-inline-start: 0; }
  .step:last-child { padding-bottom: 0; }
  .step p { max-width: 30ch; }

  .report__findings { grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 32px); align-items: start; }
  .access__grid { grid-template-columns: 0.8fr 1.2fr; }
  .faq__grid { grid-template-columns: 0.8fr 1.2fr; }

  .pricing__grid { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .stage { padding: 32px; padding-inline-start: 0; border-top: 1px solid var(--steel-700); }
  .stage + .stage { padding-inline-start: 32px; border-inline-start: 1px solid var(--steel-700); }
  .stage:last-child { border-bottom: 1px solid var(--steel-700); }
}

@media (min-width: 1200px) {
  .hero__grid { column-gap: 96px; }
}

/* Reduced motion and low effects */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

html[data-perf="low"] .wash { opacity: 0.14; }
html[data-perf="low"] .chat__dot { animation: none; }
html[data-perf="low"] .nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--void-950); }

/* Legal pages */
.legal { padding-block: clamp(48px, 8vw, 96px) var(--section); background: var(--void-950); }
.legal__inner { display: grid; gap: 32px; max-width: 70ch; }
.legal h1 { font-size: var(--fs-700); }
.legal h2 { font-size: var(--fs-500); margin-block-start: 12px; }
.legal p, .legal li { color: var(--steel-300); }
.legal ul { display: grid; gap: 8px; padding-inline-start: 20px; list-style: disc; }
.legal .meta { font-size: var(--fs-300); color: var(--steel-400); }
.legal a { color: var(--steel-100); }
.back { font-size: var(--fs-300); color: var(--steel-400); text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.back:hover { color: var(--steel-100); }