/* ==========================================================================
   PULSE V2 — about.css
   Flagship editorial manifesto: hero scope instrument (the thesis state),
   mission + trust ledger, pull-quote band, THE INSTRUMENT SEQUENCE (four
   principles on a vertical rail, each with its own zone atmosphere and a
   small honest artifact), animated "how we measure" sensor-bus card,
   contact, labeled closing waveform. Requires tokens.css + base.css first.
   Tokens only — zero hardcoded colors. No inline styles (CSP style-src
   'self'). All hidden/zero states are html.anim-gated with failsafes.
   PERF: no filter:blur() on any layer added here — auroras come from
   base.css; every texture is a flat gradient at token alphas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero — the thesis instrument: a framed scope holding the calm trace
   -------------------------------------------------------------------------- */
.about-hero h1 { max-width: 16ch; }
.about-hero .section-sub { max-width: 52ch; }

.hero-scope {
  position: relative;
  width: min(44rem, 100%);
  margin-top: var(--sp-8);
}
/* Slab face — grid texture + glass gradient composed in ONE image stack so
   the combined class="hero-scope-glass texture-grid" can never cancel it
   (the .card background shorthand trap, documented in base.css). */
.hero-scope-glass {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--slab-edge);
  border-top-color: var(--slab-edge-top);
  border-radius: var(--radius-xl);
  background-color: var(--slab-face);
  box-shadow:
    var(--shadow-slab),
    0 0 0 1px var(--slab-ring),
    0 18px 50px -16px var(--slab-drop);
}
.hero-scope-glass.texture-grid {
  background-image:
    linear-gradient(var(--viz-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--viz-grid) 1px, transparent 1px),
    radial-gradient(120% 100% at 50% -25%, var(--slab-glow), transparent 58%),
    linear-gradient(180deg, var(--slab-grad-1), var(--slab-grad-2));
  background-size: 32px 32px, 32px 32px, 100% 100%, 100% 100%;
}
.hero-scope-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 11px 16px;
  border-bottom: 1px solid var(--line-1);
  background: var(--slab-bar);
}
/* The scope window — trace fades in from the left edge and out at the
   right, riding over a dashed target line (the hero-slab language). */
.hero-scope-window {
  position: relative;
  padding: clamp(12px, 2vw, 18px) clamp(14px, 2.5vw, 22px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.hero-scope-window::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 52%;
  border-top: 1px dashed var(--line-2);
  pointer-events: none;
}
.hero-scope-window .motif-svg {
  position: relative;
  height: auto;
}
/* The one hot seam under the instrument */
.hero-scope-seam {
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: -2px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  filter: drop-shadow(var(--glow-trace));
}
.about-hero .trace-caption { margin-top: var(--sp-4); }

/* --------------------------------------------------------------------------
   01 · Mission — trust ledger card (scanline film + landing rows)
   -------------------------------------------------------------------------- */
/* texture-scan + hud-corners both claim background-image; compose the two
   stacks so the ledger keeps its scanlines AND its brackets. */
.ledger {
  --hud: var(--line-3);
  padding: var(--sp-5) var(--sp-6);
  background-image:
    repeating-linear-gradient(180deg,
      var(--scanline) 0, var(--scanline) 1px, transparent 1px, transparent 4px),
    linear-gradient(var(--hud), var(--hud)), linear-gradient(var(--hud), var(--hud)),
    linear-gradient(var(--hud), var(--hud)), linear-gradient(var(--hud), var(--hud)),
    linear-gradient(var(--hud), var(--hud)), linear-gradient(var(--hud), var(--hud)),
    linear-gradient(var(--hud), var(--hud)), linear-gradient(var(--hud), var(--hud));
  background-repeat: repeat,
    no-repeat, no-repeat, no-repeat, no-repeat,
    no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: auto,
    12px 1px, 1px 12px,
    12px 1px, 1px 12px,
    12px 1px, 1px 12px,
    12px 1px, 1px 12px;
  background-position: 0 0,
    0 0, 0 0,
    100% 0, 100% 0,
    0 100%, 0 100%,
    100% 100%, 100% 100%;
}
.ledger:hover { --hud: var(--accent-line); }
.ledger-head {
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line-1);
}
.ledger dl { margin: 0; }
.ledger-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
  border-top: 1px solid var(--line-0);
  transition: background-color var(--dur-1) ease;
}
.ledger-row:hover { background-color: var(--wash-1); }
.ledger-row:first-of-type { border-top: 0; }
.ledger-row dt {
  margin: 0;
  font: 700 var(--fs-micro) / 1.5 var(--font-mono);
  letter-spacing: 0.05em;
  color: var(--text-3);
}
.ledger-row dd {
  margin: 0;
  font-size: var(--fs-body-sm);
  color: var(--text-1);
  text-align: end;
}

/* --------------------------------------------------------------------------
   Pull-quote band — grid-breaking offset, editorial scale, a drawn accent
   spine (visible by default; draws in under html.anim once revealed)
   -------------------------------------------------------------------------- */
.quote-inner {
  position: relative;
  display: grid;
  gap: var(--sp-5);
  padding-inline-start: clamp(1.25rem, 3vw, 2rem);
}
@media (min-width: 56em) {
  .quote-inner { margin-inline-start: calc(100% / 6); }
}
.quote-inner::before {
  content: "";
  position: absolute;
  inset-block: 4px;
  inset-inline-start: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--accent), var(--mint), transparent);
  border-radius: var(--radius-pill);
  transform-origin: top;
  transition: transform 900ms var(--ease-glide) 150ms;
}
html.anim .quote-inner:not(.in-view)::before { transform: scaleY(0); }
html.anim:not(.anim-ok) .quote-inner:not(.in-view)::before {
  animation: rv-failsafe 0ms linear 3000ms forwards;
}
.pull-quote {
  font-size: clamp(1.75rem, 3.4vw, 2.625rem);
  font-weight: 650;
  line-height: 1.22;
  letter-spacing: var(--track-tight);
  color: var(--text-1);
  max-width: 24ch;
  text-wrap: balance;
}
.quote-rest {
  color: var(--text-3);
  font-size: var(--fs-lead);
  max-width: 48ch;
}

/* --------------------------------------------------------------------------
   02 · THE INSTRUMENT SEQUENCE — four principles on a vertical rail.
   Each row: node (lights on reveal) · ghost numeral · content · artifact
   panel carrying its own zone atmosphere (grid → scan → dots → mint).
   The .in-view class persists after motion.js reveals a row — the nodes
   and numerals key their lit state off it.
   -------------------------------------------------------------------------- */
.seq {
  position: relative;
  border-top: 1px solid var(--line-1);
  padding-inline-start: clamp(1.75rem, 4vw, 2.75rem);
}
/* The rail — a static hairline the nodes sit on */
.seq::before {
  content: "";
  position: absolute;
  top: var(--sp-6);
  bottom: var(--sp-6);
  inset-inline-start: 6px;
  width: 1px;
  background: linear-gradient(180deg, var(--line-2), var(--line-1) 85%, transparent);
}

.principle {
  position: relative;
  display: grid;
  gap: var(--sp-5) var(--sp-6);
  padding-block: var(--sp-7);
  border-bottom: 1px solid var(--line-1);
  transition: border-color var(--dur-2) ease;
}
.principle:hover { border-bottom-color: var(--line-2); }

/* The node — lights and pings as its row reveals */
.seq-node {
  position: absolute;
  top: calc(var(--sp-7) + 0.85rem);
  inset-inline-start: calc(clamp(1.75rem, 4vw, 2.75rem) * -1 + 2px);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--line-3);
  background: var(--canvas);
  transition:
    border-color var(--dur-3) ease,
    background-color var(--dur-3) ease,
    box-shadow var(--dur-3) ease;
}
.principle.in-view .seq-node {
  border-color: var(--accent);
  background: var(--accent-tint-1);
  box-shadow: 0 0 8px var(--accent-line);
}
.seq-node::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0;
  transform: scale(0.45);
}
html.anim .principle.in-view .seq-node::after {
  animation: seq-ping 900ms var(--ease-out) 250ms forwards;
}
@keyframes seq-ping {
  0%   { opacity: 0.9; transform: scale(0.45); }
  100% { opacity: 0;   transform: scale(2.4); }
}

.principle-index {
  font: 700 clamp(2rem, 4vw, 3rem) / 1 var(--font-mono);
  color: var(--text-4);
  user-select: none;
  transition: color var(--dur-3) ease;
}
.principle.in-view .principle-index { color: var(--text-3); }
.principle-content h3 { max-width: 24ch; }
.principle-content > p { margin-top: var(--sp-3); max-width: 46ch; }
.principle-tag {
  display: block;
  margin-top: var(--sp-4);
}

@media (min-width: 56em) {
  .principle { grid-template-columns: repeat(12, 1fr); align-items: center; }
  .principle-index { grid-column: 1 / 2; align-self: start; }
  .principle-content { grid-column: 2 / 8; }
  .principle-artifact { grid-column: 9 / 13; }
  /* Even rows mirror: artifact left, content right — editorial rhythm */
  .principle:nth-of-type(even) .principle-content { grid-column: 8 / 13; }
  .principle:nth-of-type(even) .principle-artifact { grid-column: 2 / 7; grid-row: 1; }
  .principle:nth-of-type(even) .principle-index { grid-row: 1; }
}

/* Artifact panels — small honest instruments, one zone atmosphere each.
   hud-corners owns background-image; zone textures are stacked AFTER the
   eight bracket gradients so both survive on one element. */
.pa {
  position: relative;
  background-color: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  transition: border-color var(--dur-2) ease, box-shadow var(--dur-2) ease;
}
.pa:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow-1);
}
.pa-head {
  display: block;
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line-1);
}

/* Zone atmospheres — flat token-alpha textures, one per principle.
   Composed with the hud-corner brackets (8 gradients) per the base.css
   class-combination note. */
.pa--grid,
.pa--scan,
.pa--dots,
.pa--mint {
  --hud: var(--line-3);
  background-repeat: no-repeat;
}
.pa--grid {
  background-image:
    linear-gradient(var(--hud), var(--hud)), linear-gradient(var(--hud), var(--hud)),
    linear-gradient(var(--hud), var(--hud)), linear-gradient(var(--hud), var(--hud)),
    linear-gradient(var(--hud), var(--hud)), linear-gradient(var(--hud), var(--hud)),
    linear-gradient(var(--hud), var(--hud)), linear-gradient(var(--hud), var(--hud)),
    linear-gradient(var(--viz-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--viz-grid) 1px, transparent 1px);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat,
    no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat;
  background-size:
    12px 1px, 1px 12px, 12px 1px, 1px 12px,
    12px 1px, 1px 12px, 12px 1px, 1px 12px,
    28px 28px, 28px 28px;
  background-position:
    0 0, 0 0, 100% 0, 100% 0,
    0 100%, 0 100%, 100% 100%, 100% 100%,
    0 0, 0 0;
}
.pa--scan {
  background-image:
    linear-gradient(var(--hud), var(--hud)), linear-gradient(var(--hud), var(--hud)),
    linear-gradient(var(--hud), var(--hud)), linear-gradient(var(--hud), var(--hud)),
    linear-gradient(var(--hud), var(--hud)), linear-gradient(var(--hud), var(--hud)),
    linear-gradient(var(--hud), var(--hud)), linear-gradient(var(--hud), var(--hud)),
    repeating-linear-gradient(180deg,
      var(--scanline) 0, var(--scanline) 1px, transparent 1px, transparent 4px);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat,
    no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-size:
    12px 1px, 1px 12px, 12px 1px, 1px 12px,
    12px 1px, 1px 12px, 12px 1px, 1px 12px,
    auto;
  background-position:
    0 0, 0 0, 100% 0, 100% 0,
    0 100%, 0 100%, 100% 100%, 100% 100%,
    0 0;
}
.pa--dots {
  background-image:
    linear-gradient(var(--hud), var(--hud)), linear-gradient(var(--hud), var(--hud)),
    linear-gradient(var(--hud), var(--hud)), linear-gradient(var(--hud), var(--hud)),
    linear-gradient(var(--hud), var(--hud)), linear-gradient(var(--hud), var(--hud)),
    linear-gradient(var(--hud), var(--hud)), linear-gradient(var(--hud), var(--hud)),
    radial-gradient(circle, var(--line-2) 1px, transparent 1.7px),
    radial-gradient(circle, var(--line-1) 1px, transparent 1.9px);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat,
    no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat;
  background-size:
    12px 1px, 1px 12px, 12px 1px, 1px 12px,
    12px 1px, 1px 12px, 12px 1px, 1px 12px,
    56px 56px, 92px 92px;
  background-position:
    0 0, 0 0, 100% 0, 100% 0,
    0 100%, 0 100%, 100% 100%, 100% 100%,
    0 0, 27px 45px;
}
.pa--mint {
  background-image:
    linear-gradient(var(--hud), var(--hud)), linear-gradient(var(--hud), var(--hud)),
    linear-gradient(var(--hud), var(--hud)), linear-gradient(var(--hud), var(--hud)),
    linear-gradient(var(--hud), var(--hud)), linear-gradient(var(--hud), var(--hud)),
    linear-gradient(var(--hud), var(--hud)), linear-gradient(var(--hud), var(--hud)),
    radial-gradient(circle, var(--accent-tint-1) 1.2px, transparent 2px),
    radial-gradient(circle, var(--line-1) 1px, transparent 1.8px);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat,
    no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat;
  background-size:
    12px 1px, 1px 12px, 12px 1px, 1px 12px,
    12px 1px, 1px 12px, 12px 1px, 1px 12px,
    112px 112px, 76px 76px;
  background-position:
    0 0, 0 0, 100% 0, 100% 0,
    0 100%, 0 100%, 100% 100%, 100% 100%,
    14px 32px, 0 0;
}
.pa--grid:hover, .pa--scan:hover, .pa--dots:hover, .pa--mint:hover {
  --hud: var(--accent-line);
}

/* P1 — sensor feed scope */
.pa-scope {
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.pa-scope::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px dashed var(--line-2);
  pointer-events: none;
}
.pa-scope .motif-svg {
  position: relative;
  height: auto;
}

/* P2 — snapshot ledger rows */
.pa-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line-0);
}
.pa-row:last-child { border-bottom: 0; }
.pa-row-label {
  font-size: var(--fs-body-sm);
  color: var(--text-2);
}

/* P3 — fair-play chip cluster */
.pa-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.pa-foot {
  margin-top: var(--sp-4);
  font-size: var(--fs-body-sm);
  color: var(--text-3);
  max-width: 34ch;
}

/* P4 — footprint KPI */
.pa-num {
  font: 700 var(--fs-num-lg) / 1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text-1);
  margin-bottom: var(--sp-4);
}
.pa-num small {
  font-size: 0.34em;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--text-3);
}

/* --------------------------------------------------------------------------
   03 · How we measure — full-bleed telemetry band on surface-1.
   The card is an instrument: feed draws across the scope, rows land
   one by one (data-stagger), the honest dash closes the list.
   -------------------------------------------------------------------------- */
.measure {
  background: var(--surface-1);
  border-top: 1px solid var(--line-1);
  border-bottom: 1px solid var(--line-1);
}
.measure-grid {
  display: grid;
  gap: var(--sp-7);
  align-items: start;
}
.measure-head { margin-bottom: 0; } /* grid gap owns the spacing, not the
                                       base .section-head margin */
@media (min-width: 56em) {
  .measure-grid { grid-template-columns: 5fr 7fr; }
  .measure-head { grid-column: 2; grid-row: 1; }
  .measure-card { grid-column: 1; grid-row: 1; }
}
.measure-note {
  margin-top: var(--sp-4);
  max-width: 52ch;
}

.measure-card {
  background-color: var(--surface-2);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  transition: border-color var(--dur-2) ease;
}
.measure-card:hover { border-color: var(--line-2); }

.src-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line-1);
}
.src-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.src-row {
  display: grid;
  grid-template-columns: minmax(6.5rem, 9rem) 1fr;
  gap: var(--sp-4);
  align-items: baseline;
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--line-0);
  transition: background-color var(--dur-1) ease;
}
.src-row:hover { background-color: var(--wash-1); }
.src-row:last-child { border-bottom: 0; }
.src-name {
  font: 700 var(--fs-body-sm) / 1.4 var(--font-mono);
  color: var(--text-1);
}
.src-desc {
  color: var(--text-3);
  font-size: var(--fs-body-sm);
}
.src-row--dash .src-desc { color: var(--text-2); }
.src-dash {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent-bright);
}
.src-foot {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-1);
  color: var(--text-3);
  font-size: var(--fs-body-sm);
}

/* --------------------------------------------------------------------------
   04 · Who's behind it — offset right for asymmetry
   -------------------------------------------------------------------------- */
@media (min-width: 56em) {
  .who-grid { display: grid; grid-template-columns: repeat(12, 1fr); }
  .who-content { grid-column: 5 / 13; }
}
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

/* --------------------------------------------------------------------------
   Closing — quiet resolution + CTA
   -------------------------------------------------------------------------- */
.closing .container { padding-top: var(--sp-8); }
.closing-line {
  margin-top: var(--sp-4);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: var(--track-tight);
  color: var(--text-1);
  max-width: 26ch;
  text-wrap: balance;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.closing-links {
  margin-top: var(--sp-6);
  font: 400 var(--fs-body-sm) / 1.8 var(--font-mono);
  letter-spacing: 0.02em;
}
.closing-links a {
  color: var(--text-3);
  text-decoration-color: var(--line-2);
}
.closing-links a:hover { color: var(--text-1); }

/* --------------------------------------------------------------------------
   Mobile — single column, rail intact, artifacts after content
   -------------------------------------------------------------------------- */
@media (max-width: 55.99em) {
  .seq { padding-inline-start: clamp(1.5rem, 6vw, 2rem); }
  .seq-node { inset-inline-start: calc(clamp(1.5rem, 6vw, 2rem) * -1 + 2px); }
  .principle { gap: var(--sp-4); }
  .principle-index { font-size: 1.5rem; }
}