/*
 * Cirtiq Splash Page Styles
 * Light mode, clean, minimal. Tokens: ./tokens.css (from bcs_brand_book.md v1.0)
 */

@import url("./tokens.css");

/* Prevent dark flash on load */
html {
  background: var(--color-surface);
  scroll-behavior: smooth;
  color-scheme: light;
}

/*
 * Cross-document view transitions (same-origin MPA) — Chrome 126+, Safari 18+.
 * @see https://developer.chrome.com/docs/web-platform/view-transitions/cross-document
 * Respects reduced motion: full rule is skipped when the user requests less animation.
 */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  /* Root snapshot: short cross-fade. Duration kept under 400ms for focus management + perceived snappiness. */
  ::view-transition-old(root) {
    animation: vt-fade-out 0.24s var(--ease-standard) both;
  }

  ::view-transition-new(root) {
    animation: vt-fade-in 0.32s var(--ease-enter) both;
  }
}

@keyframes vt-fade-out {
  to {
    opacity: 0;
  }
}

@keyframes vt-fade-in {
  from {
    opacity: 0;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  background-color: var(--color-surface);
  /* Subtle brand halo behind the hero. Constrained to the first viewport via
     background-size so it fades naturally as the reader scrolls into the
     content sections — no fixed-attachment, no parallax, no repeat. */
  background-image: radial-gradient(
    ellipse 90% 55% at 50% 18%,
    rgba(30, 58, 96, 0.06) 0%,
    rgba(30, 58, 96, 0.02) 35%,
    transparent 70%
  );
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100vh;
  min-height: 100vh;
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
}

/* ========== Navigation (Sticky) — unified chrome home + team ========== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  padding: 0 var(--space-5);
  background: var(--color-surface);
  border-bottom: 1px solid rgba(26, 32, 44, 0.08);
  box-sizing: border-box;
  transition: background 0.35s var(--ease-standard), border-color 0.35s var(--ease-standard),
    box-shadow 0.35s var(--ease-standard);
}

.nav.is-scrolled {
  background: var(--color-surface);
  border-bottom-color: rgba(26, 32, 44, 0.12);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* Scroll progress indicator — 2px brand line sitting flush against the
   bottom of the fixed nav. Width is driven by JS reading document scroll. */
.scroll-progress {
  position: absolute;
  bottom: -2px;
  left: 0;
  height: 2px;
  width: 0%;
  background: var(--color-brand-dominant);
  pointer-events: none;
  transition: width 120ms linear;
  will-change: width;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress {
    transition: none;
  }
}

.nav-logo {
  display: block;
  transition: filter 0.2s var(--ease-standard);
}

.nav-logo:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.nav-logo img {
  height: 32px;
  width: auto;
  display: block;
}

.nav-logo:hover {
  opacity: 0.72;
}

/* ========== Hero Section ========== */
.hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-5);
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.hero-logo {
  width: 88px;
  height: 88px;
  margin-bottom: var(--space-6);
  align-self: center;
  display: block;
  overflow: visible;
}

/* The mark, drawn to the master artwork's measured geometry (stroke 13% of
   the outer diameter, break 40° centred at 1 o'clock, dot 13.4% on the
   ring's midline). The ring fades in; the dot is the one brand
   animation: a 200ms scale-in once the ring is present. The ring never
   moves and never closes. */
.hero-mark-ring {
  fill: none;
  stroke: var(--color-brand-dominant);
  stroke-width: 13;
  opacity: 0;
  animation: heroLogoFadeIn 0.5s var(--ease-enter) forwards;
}

.hero-mark-dot {
  fill: var(--color-accent);
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  animation: dotIn 200ms var(--ease-standard) 0.55s forwards;
}

@keyframes dotIn {
  to { transform: scale(1); }
}

/* Optional brand graphic (brand book §12): the ring, cropped and bleeding off
   the page edge, in Cirtiq Navy at 6–10% opacity. Never full opacity, never
   decoration elsewhere. Sits behind the hero only; hidden on small screens. */
.hero-ring {
  position: absolute;
  top: calc(var(--nav-height) - 10vw);
  right: -16vw;
  width: 58vw;
  height: 58vw;
  max-width: 900px;
  max-height: 900px;
  background: url("../assets/cirtiq-ring.svg") no-repeat center / contain;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}

.hero h1 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading-xbold);
  font-size: var(--text-hero-h1);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4);
  opacity: 0;
  transform: translateY(12px);
  animation: heroHeadlineSlideUp 0.6s var(--ease-enter) 0.25s forwards;
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
}

.hero h2 {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-regular);
  font-size: var(--text-hero-h2);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-5);
  opacity: 0;
  animation: heroSubheadFadeIn 0.6s var(--ease-enter) 0.55s forwards;
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
}

.hero .statement {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.hero .statement-item {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading-medium);
  font-size: clamp(16px, 2vw, 24px);
  letter-spacing: var(--tracking-heading);
  color: var(--color-brand-dominant);
  opacity: 0;
  animation: statementFadeIn 0.4s var(--ease-enter) forwards;
}

/* Cascade lands as the subhead finishes. The whole hero settles in
   about two seconds; announcement traffic will not wait longer. */
.hero .statement-item:nth-child(1) { animation-delay: 0.9s; }
.hero .statement-item:nth-child(2) { animation-delay: 1.05s; }
.hero .statement-item:nth-child(3) { animation-delay: 1.2s; }

@keyframes statementFadeIn {
  to { opacity: 1; }
}

.hero .statement-word {
  margin-right: 1px;
}

.hero .statement-dot {
  font-weight: 400;
  color: currentColor;
}

/* "The dot is the token: the moment an order is cleared." One Signal Blue
   moment in the hero composition (rule of one), on the final word. It
   scales in like the dot in the mark, after the word has landed. */
.hero .statement-item:nth-child(3) .statement-dot {
  color: var(--color-accent);
  display: inline-block;
  transform: scale(0);
  animation: dotIn 200ms var(--ease-standard) 1.5s forwards;
}

@keyframes heroLogoFadeIn {
  to {
    opacity: 1;
  }
}

@keyframes heroHeadlineSlideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroSubheadFadeIn {
  to { opacity: 1; }
}

/* ========== Scroll Cue ========== */
.scroll-cue {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-7);
  color: var(--text-on-dark-faint);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.4s var(--ease-standard), color 0.2s var(--ease-standard);
  animation: scrollCueFadeIn 0.6s var(--ease-enter) 1.9s forwards;
}

.scroll-cue:hover {
  color: var(--color-brand-dominant);
}

.scroll-cue.is-hidden {
  opacity: 0 !important;
  pointer-events: none;
}

@keyframes scrollCueFadeIn {
  to { opacity: 1; }
}

@keyframes scrollCueBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(4px); }
}

@media (prefers-reduced-motion: no-preference) {
  .scroll-cue svg {
    animation: scrollCueBounce 1.5s ease-in-out 2.5s infinite;
  }
}

/* ========== Footer ========== */
.footer {
  padding: var(--space-5) var(--space-5);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.footer-moat {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-light);
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 36em;
  line-height: 1.5;
}

.footer-copy {
  font-family: var(--font-body);
  font-size: var(--text-tiny);
  font-weight: var(--font-weight-body-regular);
  color: var(--color-text-tertiary);
  margin: 0;
}

/* ========== Responsive ========== */
/*
 * Breakpoints (standard):
 * Mobile:  < 640px
 * Tablet:  640px - 1023px (iPad portrait 768, landscape 1024)
 * Desktop: 1024px+
 */

/* ---- Mobile (< 640px) ---- */
@media (max-width: 639px) {
  .nav {
    padding: 0 var(--space-4);
    height: var(--nav-height-mobile);
  }

  .nav-logo img {
    height: 28px;
  }

  .hero {
    padding: var(--space-6) var(--space-4);
    min-height: 100svh;
  }

  .hero-logo {
    width: 64px;
    margin-bottom: var(--space-4);
  }

  .hero h1 {
    font-size: clamp(28px, 7.5vw, 36px);
    margin-bottom: var(--space-3);
  }

  .hero h2 {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: var(--space-4);
  }

  .hero .statement {
    justify-content: center;
    max-width: 100%;
    padding: 0;
  }

  .hero .statement-item {
    font-size: 14px;
  }

  .footer {
    padding: var(--space-4) var(--space-4);
    gap: var(--space-2);
  }

  .footer-copy {
    font-size: 11px;
  }
}

/* ---- Tablet (640px - 1023px) ---- */
@media (min-width: 640px) and (max-width: 1023px) {
  .hero {
    padding: var(--space-7) var(--space-5);
  }

  .hero h1 {
    font-size: clamp(42px, 6vw, 56px);
  }

  .hero h2 {
    font-size: 20px;
  }

  .hero .statement-item {
    font-size: 18px;
  }
}

/* ---- Desktop (1024px+) ---- */
@media (min-width: 1024px) {
  .hero .statement-item {
    font-size: 24px;
  }
}

/* ============================================================
 * SITE v2 EXTENSIONS
 * Long-scroll home + team page.
 * Non-destructive additions below this line.
 * ============================================================ */

:root {
  /* Light-mode text vocabulary (scoped to v2 sections) */
  --text-on-dark: var(--color-text-primary);     /* Obsidian — headings */
  --text-on-dark-muted: var(--color-text-secondary);  /* Slate Grey — body */
  --text-on-dark-quiet: var(--color-text-tertiary);   /* Cool Grey — captions */
  --text-on-dark-faint: #94a3b8;     /* very quiet / decorative */

  /* Light-mode rule colors (Obsidian-based hairlines) */
  --rule-on-dark: rgba(26, 32, 44, 0.1);
  --rule-on-dark-strong: rgba(26, 32, 44, 0.2);

  /* Brand accent on light background: Cirtiq Navy. Signal Blue is
     reserved (rule of one) for --color-accent moments. */
  --brand-on-dark: var(--color-brand-dominant);
}

/* Anchor links shouldn't land behind the fixed nav (56px + breathing room) */
html {
  scroll-padding-top: calc(var(--nav-height) + var(--space-4));
}

/* Hero sizing + line-height overrides. Desktop rule added below. */
.hero h1 {
  color: var(--text-on-dark);
  line-height: var(--line-height-display-lg);
  letter-spacing: var(--tracking-heading);
}

.hero h2 {
  color: var(--text-on-dark-muted);
  line-height: 1.5;
  letter-spacing: 0;
}

/* Desktop hero sizing — existing CSS has no desktop rule, falls back to browser default */
@media (min-width: 1024px) {
  .hero h1 {
    font-size: var(--text-display-lg);
  }
  .hero h2 {
    font-size: clamp(18px, 1.6vw, 22px);
  }
}

/* Allow main to host multiple sections below the 800px-constrained hero.
   Positioned so the cropped hero ring graphic anchors to the page, not the viewport. */
main {
  display: block;
  position: relative;
}

/* ---------- Skip to content ---------- */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-brand-dominant);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 500;
  border-radius: var(--radius-sm);
  z-index: 200;
  transition: top var(--duration-fast) var(--ease-standard);
}

.skip-to-content:focus {
  top: var(--space-3);
  outline: none;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-brand-dominant);
  text-decoration: none;
  letter-spacing: 0.01em;
  position: relative;
  padding: var(--space-2) 0;
  transition: color var(--duration-fast) var(--ease-standard);
}

/* Hairline underline gives hover/focus feedback and marks the current page. */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 280ms var(--ease-standard);
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a[aria-current="page"] {
  color: var(--text-on-dark);
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after,
.nav-links a[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav-links a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .nav-links a::after {
    transition: none;
  }
}

/* ---------- Section primitives ---------- */
.section {
  padding: var(--space-8) var(--space-5) var(--space-7);
  color: var(--text-on-dark-muted);
  opacity: 1;
}

/*
 * Section separators: on a single-color canvas, a hairline carries the
 * section boundary. When adjacent sections have different backgrounds
 * (e.g. warm body bg → elevated white, or section → founding), the bg
 * change itself is the separator and the hairline would look noisy.
 * First child skips the border automatically; the sibling selector covers
 * the rest and the overrides below drop it where a bg shift already marks
 * the break.
 */
.section + .section,
.section + .deployment-signal,
.section + .close,
.deployment-signal + .close {
  border-top: 1px solid var(--rule-on-dark);
}

/* Drop the hairline wherever two adjacent sections have different bg
   tints — the color shift carries the visual separation on its own. */
.section--elevated + .section,
.section + .section--elevated,
.section + .founding,
.founding + .close {
  border-top: none;
}

/* Alternating section tint — pure white on warm off-white body bg.
   Creates rhythm without requiring cards, borders, or heavy chrome. */
.section--elevated {
  background: var(--color-surface-elevated);
}

/* Leader's address flows from hero — no separator above */
.leader-address {
  border-top: none !important;
}

.section > .container {
  max-width: 1040px;
  margin: 0 auto;
}

.section.section-narrow > .container {
  max-width: 720px;
}

.section-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand-on-dark);
  /* Flex host so the ::before pip sits on the same baseline as the label.
     No top margin — section padding handles the space above. */
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin: 0 0 var(--space-3);
}

/* Section eyebrow pip — small Cirtiq Navy dot preceding the label.
   Functional colors (teal/amber) are product-state signals, never decoration,
   so the pip has no color modifiers. */
.section-eyebrow::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-on-dark);
  flex-shrink: 0;
}

.section h2 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading-semibold);
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.18;
  color: var(--text-on-dark);
  margin: 0 0 var(--space-5);
  letter-spacing: var(--tracking-heading);
  max-width: 44rem;
}

.section h3 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading-medium);
  font-size: 22px;
  line-height: 1.3;
  color: var(--text-on-dark);
  margin: 0 0 var(--space-3);
  letter-spacing: var(--tracking-heading);
}

.section p {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--text-on-dark-muted);
  margin: 0 0 var(--space-3);
}

.section p.lead {
  font-size: var(--text-body-lg);
  line-height: 1.7;
  color: var(--text-on-dark-muted);
  font-weight: 400;
  max-width: 56rem;
}

.section p.lead strong {
  color: var(--text-on-dark);
  font-weight: 600;
}

/* Accent-colored emphasis. Used sparingly on a few load-bearing phrases to
   create visual rhythm without the "highlighter-marker" effect. The ::lead
   strong rule above sets the default color; these override for specific
   strongs that opt in via modifier class. Ordering matters — these must
   appear after the .lead strong rule so they win specificity-wise. */
.accent { color: var(--color-brand-dominant); font-weight: 600; }

.section p.lead strong.accent { color: var(--color-brand-dominant); font-weight: 600; }

.section p.lead + p.lead {
  margin-top: var(--space-4);
}

.section p:last-child {
  margin-bottom: 0;
}

.pull-quote {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading-medium);
  font-style: normal;
  letter-spacing: var(--tracking-heading);
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.6;
  color: var(--text-on-dark);
  text-align: center;
  max-width: 44rem;
  margin: var(--space-7) auto 0;
  padding: 0;
  border: none;
}

/* Beat the generic .section p margin so the block keeps its top space
   and stays centered in the section. */
.section p.pull-quote {
  margin: var(--space-7) auto 0;
  max-width: 44rem;
  text-align: center;
}

/* The brand book's "break": a short rule with a gap and a Signal Blue dot
   resting in the gap. A linear version of the mark. */
.pull-quote::before {
  content: "";
  display: block;
  width: 72px;
  height: 8px;
  margin: 0 auto var(--space-4);
  background:
    radial-gradient(circle, var(--color-accent) 0 3px, transparent 3.5px) center / 0 0 no-repeat,
    linear-gradient(to right, var(--rule-on-dark-strong) 0 38%, transparent 38% 62%, var(--rule-on-dark-strong) 62% 100%) center / 100% 1px no-repeat;
}

.is-visible .pull-quote::before {
  animation: breakDotIn 200ms var(--ease-standard) 350ms forwards;
}

@keyframes breakDotIn {
  to { background-size: 8px 8px, 100% 1px; }
}

/* ---------- Section 2: Leader's Address ---------- */
/* Bridge block from hero → product. Short, high-authority, no content heading. */
.leader-address {
  padding-top: var(--space-7);
  padding-bottom: var(--space-8);
}

/* The lede is the thesis of the site — should be display-level, not body-level.
   Must beat .leader-address p specificity (0,2,0) so we use (0,3,0): class + element + class. */
.leader-address p.leader-lede {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading-semibold);
  font-size: clamp(34px, 4.2vw, 52px);
  line-height: 1.12;
  letter-spacing: var(--tracking-heading);
  color: var(--text-on-dark);
  margin: 0 0 var(--space-5);
  max-width: 22rem;
}

.leader-address p {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: 1.75;
  color: var(--text-on-dark-muted);
  margin: 0 0 var(--space-4);
}

.leader-address p:last-child {
  margin-bottom: 0;
}

.leader-address strong {
  color: var(--text-on-dark);
  font-weight: 600;
}

/* ---------- Section 3: What OrderGuard Is ---------- */
.facts-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.fact h3 {
  font-size: 20px;
  margin-bottom: var(--space-2);
  color: var(--text-on-dark);
}

.fact p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-on-dark-quiet);
  margin: 0;
}

/* ---------- Section 4: What Becomes Detectable ---------- */
.examples {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.example {
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-4);
  border-left: 2px solid rgba(30, 58, 96, 0.3);
}

.example-state {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-brand-dominant);
  margin: 0 0 var(--space-2);
}

.example p.example-state {
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-brand-dominant);
  margin: 0 0 var(--space-2);
}

.example h3 {
  font-size: 18px;
  margin-bottom: var(--space-2);
  color: var(--text-on-dark);
}

.example p {
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--text-on-dark-muted);
  margin: 0 0 var(--space-2);
}

.example p:last-child {
  margin-bottom: 0;
}

/* ---------- Section 5: Why Now ---------- */
.pillars {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: var(--space-6);
}

/* Large thin numeral preceding the pillar title — 01 / 02 / 03.
   Visual anchor for the "three convergences" narrative. */
.pillar-number {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-on-dark-faint);
  margin: 0 0 var(--space-2);
  font-feature-settings: "tnum" 1;
}

.pillar h3 {
  font-size: 22px;
  margin-bottom: var(--space-3);
}

.pillar p strong {
  color: var(--text-on-dark);
  font-weight: 600;
}

/* ---------- Section 6: Built for Both Sides ---------- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  margin-top: var(--space-6);
  position: relative;
}

.two-col::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--rule-on-dark);
  transform: translateX(-50%);
}

.two-col > * {
  min-width: 0;
}

.two-col h3 {
  font-size: 18px;
  margin-bottom: var(--space-3);
  color: var(--text-on-dark);
}

.two-col ul,
.three-col ul,
.adoption-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.two-col li {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-on-dark-muted);
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  position: relative;
}

.two-col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 6px;
  height: 6px;
  background: var(--color-brand-dominant);
  border-radius: 50%;
}

/* ---------- Section 7: Adoptable Without Friction ---------- */
.three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.adoption-col h3 {
  font-size: 18px;
  margin-bottom: var(--space-3);
  color: var(--text-on-dark);
}

.adoption-col li {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-on-dark-muted);
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  position: relative;
}

.adoption-col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 5px;
  height: 5px;
  background: var(--color-brand-dominant);
}

/* ---------- Section 8: Deployment Signal ---------- */
/* Inherits border-top from .section + .deployment-signal sibling rule above.
   Only needs a bottom border since it doesn't have .section class. */
.deployment-signal {
  padding: var(--space-6) var(--space-5);
  border-bottom: 1px solid var(--rule-on-dark);
}

.deployment-signal p {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--text-on-dark);
  text-align: center;
  margin: 0;
  max-width: 44rem;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Section 8 (alt): Founding ---------- */
/* Origin note — quiet, single paragraph, sized like the leader's address body.
   A faint Cirtiq Navy tint signals a shift in register: this is the personal
   note inside an otherwise institutional document. */
.founding {
  background: rgba(30, 58, 96, 0.04);
}

.founding .section-eyebrow {
  margin-bottom: var(--space-4);
}

.founding p.founding-note {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: 1.75;
  color: var(--text-on-dark-muted);
  margin: 0;
  max-width: 44rem;
}

/* ---------- Section 9: Close ---------- */
.close {
  padding: var(--space-7) var(--space-5) var(--space-8);
  text-align: center;
  background: var(--color-surface-elevated);
}

.close-anchor {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading-semibold);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.2;
  color: var(--text-on-dark);
  letter-spacing: -0.01em;
  margin: 0 auto var(--space-5);
  max-width: 40rem;
}

/* Short centered hairline above the closing line. Gives the sentence a
   pedestal without resorting to heavier typographic treatment. */
.close-anchor::before {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: var(--rule-on-dark-strong);
  margin: 0 auto var(--space-4);
}

.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-medium);
  font-size: var(--text-body);
  color: var(--color-white);
  background: var(--color-brand-dominant);
  min-height: 48px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-brand-dominant);
  border-radius: var(--radius-sm);
  text-decoration: none;
  letter-spacing: 0.015em;
  transition: background var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.cta-button::after {
  content: none;
}

.cta-button:hover,
.cta-button:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.cta-button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.cta-button:active {
  transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
  .cta-button::after {
    transition: none;
  }
}

/* ---------- Footer v2 (brand book §17: Obsidian with reverse lockup) ---------- */
.footer-v2 {
  padding: var(--space-7) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  text-align: center;
  background: var(--color-surface-dark);
  color: var(--color-text-on-dark-muted);
}

.footer-logo {
  display: inline-block;
  margin: 0 0 var(--space-4);
}

.footer-logo img {
  height: 28px;
  width: auto;
  display: block;
}

.footer-logo:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: 2px;
}

.footer-v2 p {
  font-family: var(--font-body);
  font-size: var(--text-tiny);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--color-text-on-dark-muted);
  margin: 0;
  line-height: 1.65;
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
}

.footer-v2 .sep {
  display: inline-block;
  margin: 0 var(--space-2);
  color: rgba(255, 255, 255, 0.4);
}

/* ---------- Scroll-fade observer ---------- */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 400ms var(--ease-standard), transform 400ms var(--ease-standard);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered reveal — when a section has both .reveal and .stagger, the
   section itself doesn't animate. Instead, its direct children fade+lift in
   one at a time after the parent becomes visible. Covers both sections that
   wrap content in .container (most) and sections that don't (close).
   Stagger step is ~70ms; the first child has no delay so the section feels
   responsive to scroll. */
.reveal.stagger {
  opacity: 1;
  transform: none;
  transition: none;
}

.reveal.stagger > .container > *,
.close.reveal.stagger > * {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 400ms var(--ease-standard), transform 400ms var(--ease-standard);
  will-change: opacity, transform;
}

.reveal.stagger.is-visible > .container > *,
.close.reveal.stagger.is-visible > * {
  opacity: 1;
  transform: none;
}

.reveal.stagger.is-visible > .container > *:nth-child(1),
.close.reveal.stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal.stagger.is-visible > .container > *:nth-child(2),
.close.reveal.stagger.is-visible > *:nth-child(2) { transition-delay: 60ms; }
.reveal.stagger.is-visible > .container > *:nth-child(3),
.close.reveal.stagger.is-visible > *:nth-child(3) { transition-delay: 120ms; }
.reveal.stagger.is-visible > .container > *:nth-child(4),
.close.reveal.stagger.is-visible > *:nth-child(4) { transition-delay: 180ms; }
.reveal.stagger.is-visible > .container > *:nth-child(5),
.close.reveal.stagger.is-visible > *:nth-child(5) { transition-delay: 240ms; }
.reveal.stagger.is-visible > .container > *:nth-child(n+6),
.close.reveal.stagger.is-visible > *:nth-child(n+6) { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .reveal.stagger > .container > *,
  .close.reveal.stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-logo,
  .hero-mark-ring,
  .hero-mark-dot,
  .hero h1,
  .hero h2,
  .hero .statement-item,
  .hero .statement-dot,
  .scroll-cue {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .pull-quote::before,
  .is-visible .pull-quote::before {
    animation: none !important;
    background-size: 8px 8px, 100% 1px !important;
  }

  .loop .loop-token {
    display: none;
  }

  .loop .loop-dot,
  .loop .loop-hold,
  .is-visible .loop .loop-dot,
  .is-visible .loop .loop-hold {
    animation: none !important;
    transform: none !important;
  }
}

/* ============================================================
 * TEAM PAGE
 * ============================================================ */

.team-hero {
  padding: calc(var(--space-8) + var(--nav-height)) var(--space-5) var(--space-7);
  max-width: 1040px;
  margin: 0 auto;
  text-align: left;
}

.team-hero h1 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading-semibold);
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.1;
  color: var(--text-on-dark);
  margin: 0 0 var(--space-4);
  letter-spacing: var(--tracking-heading);
}

.team-hero p {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: 1.6;
  color: var(--text-on-dark-muted);
  margin: 0;
  max-width: 44rem;
}

.team-section {
  padding: var(--space-7) var(--space-5);
}

.team-section > .container {
  max-width: 1040px;
  margin: 0 auto;
}

.team-section-heading {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand-on-dark);
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--rule-on-dark);
}

.founders {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.founder {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-6);
}

.founder-head h3 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading-semibold);
  font-size: 22px;
  line-height: 1.25;
  color: var(--text-on-dark);
  margin: 0 0 var(--space-2);
  letter-spacing: -0.01em;
}

.founder-title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-on-dark);
  margin: 0 0 var(--space-3);
  letter-spacing: 0.01em;
}

.founder-credentials {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-on-dark-quiet);
  margin: 0;
}

.founder-bio p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-on-dark-muted);
  margin: 0 0 var(--space-3);
}

.founder-bio p:last-child {
  margin-bottom: 0;
}

.advisors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.advisor {
  padding-top: var(--space-3);
  border-top: 2px solid rgba(30, 58, 96, 0.3);
}

.advisor h3 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading-semibold);
  font-size: 17px;
  line-height: 1.3;
  color: var(--text-on-dark);
  margin: 0 0 var(--space-1);
}

.advisor-title {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-on-dark);
  margin: 0 0 var(--space-2);
  letter-spacing: 0.01em;
}

.advisor-affiliation {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-on-dark-quiet);
  margin: 0 0 var(--space-3);
  letter-spacing: 0.02em;
}

.advisor p.advisor-bio {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-on-dark-muted);
  margin: 0;
}

/* ============================================================
 * RESPONSIVE v2
 * ============================================================ */

/* ---- Below 900px: collapse 3-col layouts to single column ---- */
@media (max-width: 899px) {
  .facts-row,
  .three-col {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .advisors {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

/* ---- Below 768px: collapse 2-col + founder row ---- */
@media (max-width: 767px) {
  .hero-ring {
    display: none;
  }

  .two-col {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .two-col::before {
    display: none;
  }

  .founder {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* ---- Mobile tightening (< 640px) ---- */
@media (max-width: 639px) {
  .section {
    padding: var(--space-6) var(--space-4) var(--space-6);
  }

  .leader-address {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }

  .section h2 {
    font-size: 26px;
  }

  .pull-quote {
    font-size: 17px;
  }

  .leader-address p {
    font-size: 17px;
  }

  .section p.lead {
    font-size: 17px;
  }

  .deployment-signal {
    padding: var(--space-5) var(--space-4);
  }

  .deployment-signal p {
    font-size: 17px;
  }

  .close {
    padding: var(--space-7) var(--space-4) var(--space-8);
  }

  .cta-button {
    padding: 12px 22px;
    font-size: var(--text-body);
  }

  .nav-links {
    gap: var(--space-3);
  }

  .nav-links a {
    font-size: 13px;
  }

  .team-hero {
    padding: calc(var(--space-7) + var(--nav-height-mobile)) var(--space-4) var(--space-6);
  }

  .team-section {
    padding: var(--space-6) var(--space-4);
  }
}

/* ---- Very narrow nav: hide some links ---- */
@media (max-width: 479px) {
  .nav-links .nav-link-approach {
    display: none;
  }
}

/* ============================================================
 * CONTENT REVISION (announcement-ready): layers, standard, ledger,
 * parties grid, team strip, news + privacy pages, footer links.
 * ============================================================ */

/* Product section flows directly from the hero: no hairline above it. */
.section--first {
  border-top: none !important;
}

.tm {
  font-size: 0.55em;
  vertical-align: super;
  font-weight: var(--font-weight-heading-medium);
}

.section h3.subsection-heading {
  margin: var(--space-7) 0 var(--space-3);
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule-on-dark);
}

/* Three verification layers: same rhythm as the Why Now pillars, but in a row. */
.layers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-4);
}

.layer h3 {
  font-size: 20px;
  margin-bottom: var(--space-2);
}

.layer p:not(.pillar-number) {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-on-dark-muted);
  margin: 0;
}

/* The one-paragraph definition of the category. Set apart with the
   "break" element from the brand book: a rule with a gap, dot in the gap. */
.definition {
  position: relative;
  max-width: 56rem;
  margin: 0 0 var(--space-6);
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
  background: var(--color-surface);
  border: none;
  border-left: 3px solid var(--color-brand-dominant);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.definition p {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: 1.7;
  color: var(--text-on-dark);
  margin: 0;
}

.definition p strong {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading-semibold);
  letter-spacing: var(--tracking-heading);
}

/* Who it serves: five parties in a responsive grid. */
.parties {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-7);
  margin-top: var(--space-6);
}

@media (max-width: 767px) {
  .parties {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

.party {
  padding-top: var(--space-3);
  border-top: 2px solid rgba(30, 58, 96, 0.3);
}

.party h3 {
  font-size: 18px;
  margin-bottom: var(--space-2);
}

.party p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-on-dark-muted);
  margin: 0;
}

/* Team strip on the home page. */
.team-strip .container {
  max-width: 720px;
}

.team-strip p.team-strip-line {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading-medium);
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.4;
  letter-spacing: var(--tracking-heading);
  color: var(--text-on-dark);
  margin: 0 0 var(--space-4);
}

.text-link {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-medium);
  color: var(--color-brand-dominant);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color var(--duration-fast) var(--ease-standard);
}

.text-link:hover,
.text-link:focus-visible {
  color: var(--color-accent);
}

.text-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Press line under the CTA. */
.close-press {
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--text-on-dark-quiet);
  margin: var(--space-4) 0 0;
}

.close-press a {
  color: var(--color-brand-dominant);
  text-decoration: none;
  border-bottom: 1px solid rgba(30, 58, 96, 0.35);
}

.close-press a:hover,
.close-press a:focus-visible {
  border-bottom-color: currentColor;
}

/* Footer links row. */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.footer-links a {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-medium);
  color: var(--color-text-on-dark-muted);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--color-white);
}

.footer-links a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: 2px;
}

/* News and privacy pages reuse the team-hero / team-section chrome. */
.news-item {
  padding: var(--space-5) 0;
  border-top: 1px solid var(--rule-on-dark);
  max-width: 44rem;
}

.news-item:last-child {
  border-bottom: 1px solid var(--rule-on-dark);
}

.news-date {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-on-dark-quiet);
  margin: 0 0 var(--space-2);
}

.news-item h2 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading-semibold);
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: var(--tracking-heading);
  color: var(--text-on-dark);
  margin: 0 0 var(--space-3);
}

.news-item p {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--text-on-dark-muted);
  margin: 0 0 var(--space-3);
}

.news-item p:last-child {
  margin-bottom: 0;
}

.prose {
  max-width: 44rem;
}

.prose h2 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading-medium);
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: var(--tracking-heading);
  color: var(--text-on-dark);
  margin: var(--space-6) 0 var(--space-3);
}

.prose p,
.prose li {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--text-on-dark-muted);
  margin: 0 0 var(--space-3);
}

.prose a {
  color: var(--color-brand-dominant);
}

@media (max-width: 899px) {
  .layers {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

@media (max-width: 639px) {
  .definition {
    padding: var(--space-4);
    border-left-width: 3px;
  }

  .definition p {
    font-size: var(--text-body);
  }
}


/* ============================================================
 * POLISH PASS: loop diagram, ledger, founder photos, press, 404
 * ============================================================ */

/* Verification loop diagram: one continuous clockwise stroke, echoing the
   ring. The break is the intercept; the dot in the break is the cleared
   token. Static by design (the ring is never drawn closing). */
.loop-figure {
  margin: var(--space-5) auto var(--space-6);
  max-width: 640px;
}

.loop {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.loop .loop-ring {
  fill: none;
  stroke: var(--color-brand-dominant);
  stroke-width: 5;
  stroke-linecap: butt;
}

.loop .loop-entry {
  fill: none;
  stroke: var(--color-brand-dominant);
  stroke-width: 2.5;
  stroke-linecap: round;
}

/* Clockwise direction cues between stages. */
.loop .loop-chevron {
  fill: none;
  stroke: var(--color-white);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The order in motion: one token, in along the arrow and around the loop
   to the break. Started by site.js when the figure reveals; never under
   reduced motion. The ring itself is static. */
.loop .loop-token {
  fill: var(--color-brand-dominant);
  stroke: var(--color-white);
  stroke-width: 3;
  opacity: 0;
}

.loop .loop-node {
  fill: var(--color-white);
  stroke: var(--color-brand-dominant);
  stroke-width: 4;
}

.loop .loop-arrow {
  fill: var(--color-brand-dominant);
}

.loop text {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  fill: var(--text-on-dark);
}

.loop text.label {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading-medium);
  font-size: 16px;
  letter-spacing: var(--tracking-heading);
  fill: var(--text-on-dark);
}

.loop text.num {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 13px;
  fill: var(--color-brand-dominant);
}

.loop text.caps {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  fill: var(--color-text-tertiary);
}

.loop text.state {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading-semibold);
  font-size: 16px;
  letter-spacing: var(--tracking-heading);
  fill: var(--text-on-dark);
}

.loop-figure figcaption {
  font-family: var(--font-body);
  font-size: var(--text-small);
  line-height: 1.6;
  color: var(--color-text-tertiary);
  text-align: center;
  margin: var(--space-3) auto 0;
  max-width: 36rem;
}

/* Safety Compliance Ledger, depicted. The one place on the marketing site
   where the functional colours appear, because this is the product. */
.ledger-wrap {
  margin-top: var(--space-6);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ledger {
  min-width: 760px;
  background: var(--color-surface-dark);
  border-radius: var(--radius-md);
  padding: var(--space-2) 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-on-dark-muted);
}

.ledger-row {
  display: grid;
  grid-template-columns: 20px 190px 110px 100px 1fr 90px;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.ledger-row:first-child {
  border-top: none;
}

.ledger-row.is-header {
  font-size: 11px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.55);
}

.ledger-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  justify-self: center;
}

.ledger-dot.is-clear { background: var(--color-signal-success); }
.ledger-dot.is-hold { background: var(--color-signal-warning); }

.ledger-state {
  text-align: right;
  color: var(--color-white);
}

.ledger-row.is-resolution {
  color: rgba(226, 232, 240, 0.75);
}

.section p.ledger-caption {
  font-size: var(--text-small);
  color: var(--color-text-tertiary);
  margin: var(--space-2) 0 0;
}

/* Founder photos: square crop, slightly desaturated, faint navy cast. */
.founder-photo {
  position: relative;
  width: 168px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-border);
  margin: 0 0 var(--space-4);
}

.founder-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
  filter: saturate(0.82) contrast(1.02);
}

.founder-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(30, 58, 96, 0.12);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Press page */
.prose ul.facts-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.prose ul.facts-list li {
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  position: relative;
}

.prose ul.facts-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-brand-dominant);
}

.prose strong {
  color: var(--text-on-dark);
  font-weight: 600;
}

.assets-note {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--text-on-dark-muted);
  max-width: 44rem;
  margin: 0 0 var(--space-5);
}

.asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
}

.asset-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}

.asset-card:hover,
.asset-card:focus-visible {
  border-color: var(--color-brand-dominant);
  box-shadow: var(--shadow-sm);
}

.asset-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.asset-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  padding: var(--space-4);
  background: var(--color-surface);
}

.asset-preview.is-dark {
  background: var(--color-brand-dominant);
}

.asset-preview.is-photo {
  padding: 0;
}

.asset-preview img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.asset-preview.is-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
}

.asset-preview img.asset-icon {
  width: 96px;
  height: 96px;
}

.asset-label {
  display: block;
  padding: var(--space-3) var(--space-3) var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--text-on-dark);
}

.asset-meta {
  display: block;
  font-weight: 400;
  color: var(--color-text-tertiary);
  margin-top: 2px;
}

/* 404 */
.not-found {
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--nav-height) + var(--space-8)) var(--space-5) var(--space-8);
}

.not-found-code {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  letter-spacing: var(--tracking-caps);
  color: var(--color-text-tertiary);
  margin: 0 0 var(--space-3);
}

.not-found h1 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading-semibold);
  font-size: clamp(28px, 3.4vw, 38px);
  letter-spacing: var(--tracking-heading);
  color: var(--text-on-dark);
  margin: 0 0 var(--space-3);
}

.not-found p {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: 1.6;
  color: var(--text-on-dark-muted);
  max-width: 36rem;
  margin: 0 0 var(--space-4);
}

@media (max-width: 639px) {
  .founder-photo {
    width: 128px;
  }

  .ledger-row {
    grid-template-columns: 16px 170px 100px 90px 1fr 80px;
    padding: 8px var(--space-3);
    font-size: 12px;
  }
}

.prose p.press-note {
  font-size: var(--text-small);
  color: var(--color-text-tertiary);
}

/* ---------- Typographic wrapping ---------- */
h1, h2, h3,
.hero h1,
.hero h2,
.close-anchor,
.team-strip p.team-strip-line {
  text-wrap: balance;
}

p, li, figcaption, .definition p {
  text-wrap: pretty;
}

/* ============================================================
 * COPY V2: examples grid, straight answers, section link
 * ============================================================ */
.examples--grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5) var(--space-6);
}

.examples--grid .example {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.answers {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-6);
  max-width: 56rem;
}

.answer {
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule-on-dark);
}

.answer h3 {
  font-size: 20px;
  margin-bottom: var(--space-2);
}

.answer p {
  margin: 0;
}

.section p.section-link {
  margin: var(--space-5) 0 0;
}

.close-press .sep {
  display: inline-block;
  margin: 0 var(--space-2);
  color: var(--text-on-dark-faint);
}

@media (max-width: 767px) {
  .examples--grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* Three plain statements at the end of the product section. */
.plain-terms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule-on-dark);
}

.plain-term h3 {
  font-size: 19px;
  margin-bottom: var(--space-2);
}

.plain-term p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-on-dark-muted);
  margin: 0;
}

@media (max-width: 899px) {
  .plain-terms {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

/* ============================================================
 * LOOP DIAGRAM SEQUENCING (driven by js/site.js on one clock)
 * State classes only; no keyframe timelines to drift.
 * ============================================================ */
.loop .loop-token {
  opacity: 0;
  transition: opacity 180ms var(--ease-standard), fill 200ms var(--ease-standard);
}

.loop .loop-token.is-on { opacity: 1; }
.loop .loop-token.is-flagged { fill: var(--color-signal-warning); }

.loop .loop-node,
.loop .loop-dot,
.loop .loop-hold {
  transform-box: fill-box;
  transform-origin: center;
}

.loop .loop-dot { fill: var(--color-accent); }
.loop .loop-hold { fill: var(--color-signal-warning); }

.loop .loop-tick,
.loop .loop-cross {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: stroke-dashoffset 220ms var(--ease-standard), opacity 220ms var(--ease-standard);
}

.loop .loop-tick { stroke: var(--color-brand-dominant); }
.loop .loop-cross { stroke: var(--color-signal-warning); }

.loop .loop-tick.is-on,
.loop .loop-cross.is-on {
  stroke-dashoffset: 0;
  opacity: 1;
}

.loop .loop-tick.is-off,
.loop .loop-cross.is-off {
  stroke-dashoffset: 0;
  opacity: 0;
  transition: opacity 400ms var(--ease-standard);
}

.loop .is-pulse { animation: loopPulse 420ms var(--ease-standard); }

@keyframes loopPulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .loop .loop-token { display: none; }
  .loop .loop-tick { stroke-dashoffset: 0 !important; opacity: 1 !important; }
  .loop .loop-cross { opacity: 0 !important; }
  .loop .is-pulse { animation: none !important; }
}

/* ---------- The Standard page ---------- */
.team-hero p.standard-subtitle {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading-medium);
  font-size: clamp(20px, 2.2vw, 24px);
  letter-spacing: var(--tracking-heading);
  color: var(--text-on-dark);
  margin: 0 0 var(--space-1);
}

.team-hero p.standard-meta {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-text-tertiary);
  margin: 0 0 var(--space-4);
}

.standard-body p.standard-about {
  padding: var(--space-4);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-small);
  line-height: 1.7;
  margin: 0 0 var(--space-5);
}

.standard-body .definition {
  margin-bottom: var(--space-4);
}

.standard-body dl.terms {
  margin: 0 0 var(--space-3);
}

.standard-body dl.terms dt {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--text-on-dark);
  margin: var(--space-3) 0 var(--space-1);
}

.standard-body dl.terms dd {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--text-on-dark-muted);
  margin: 0;
}

.standard-body ol.requirements {
  margin: 0 0 var(--space-3);
  padding-left: 1.5em;
}

.standard-body ol.requirements > li {
  padding: var(--space-2) 0;
  margin: 0;
}

.standard-body ol.requirements ul {
  margin: var(--space-2) 0;
  padding-left: 1.25em;
}

.standard-body ol.requirements ul li {
  margin: 0 0 var(--space-1);
  padding: 0;
  list-style: disc;
}

.standard-body p.footnote {
  font-size: var(--text-small);
  color: var(--color-text-tertiary);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule-on-dark);
}

.standard-body sup {
  font-size: 0.7em;
  line-height: 0;
  vertical-align: super;
}

.standard-body sup a {
  text-decoration: none;
  color: var(--color-brand-dominant);
}

.standard-body ol.sources {
  padding-left: 1.5em;
  margin: 0;
}

.standard-body ol.sources li {
  font-size: var(--text-small);
  line-height: 1.6;
  margin: 0 0 var(--space-2);
}

.standard-body ol.sources a {
  word-break: break-all;
}