@layer reset, tokens, base, layout, components, legal, responsive, motion;

@font-face {
  font-family: "DeepFlow Sans";
  src: url("../assets/fonts/geist-latin-wght-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "DeepFlow Sans";
  src: url("../assets/fonts/geist-latin-wght-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

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

  html {
    scroll-behavior: smooth;
  }

  body,
  h1,
  h2,
  h3,
  p,
  ol,
  ul,
  dl,
  dd,
  figure {
    margin: 0;
  }

  ol,
  ul {
    padding: 0;
  }

  img {
    display: block;
    max-width: 100%;
  }

  button,
  a {
    font: inherit;
  }

  button {
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
  }
}

@layer tokens {
  :root {
    color-scheme: light;

    /* Shared with Denario: same canvas, same ink, same hairlines. */
    --canvas: #e8edf1;
    --surface: #f8fafb;
    --white: #ffffff;
    --ink: #102235;
    --muted: #5b6974;
    --line: #b9c4cc;
    --line-strong: #8999a6;

    /* DeepFlow's own accent inside the same cold family. */
    --accent: #0d5f6b;
    --accent-soft: #c9dde1;
    --accent-deep: #084149;

    --up: #1d6b4f;
    --down: #9b3226;

    --font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
    --font-ui: "DeepFlow Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", "Courier New", monospace;

    --gutter: clamp(1.25rem, 3.4vw, 4rem);
    --section-space: clamp(4.5rem, 8vw, 9rem);
    --header-height: 4.5rem;
    --ticker-height: 2.5rem;

    /* Background texture: paper grain only. Vertical ruling was tried and
       dropped, it read as confusing against the hairline borders. */
  }
}

@layer base {
  /* Texture lives on the root element so it paints behind every section and
     costs nothing on scroll: the pattern tiles, so no fixed attachment. */
  html {
    background-color: var(--canvas);
    background-image:
      radial-gradient(120% 75% at 10% -12%, color-mix(in srgb, var(--white) 82%, transparent), transparent 62%),
      linear-gradient(to bottom, color-mix(in srgb, var(--white) 55%, transparent), transparent 42rem),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.65' intercept='0.55'/%3E%3CfeFuncG type='linear' slope='0.65' intercept='0.55'/%3E%3CfeFuncB type='linear' slope='0.65' intercept='0.55'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
  }

  body {
    min-width: 20rem;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 1rem;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  body.nav-open {
    overflow: hidden;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  button,
  a {
    -webkit-tap-highlight-color: transparent;
  }

  button:focus-visible,
  a:focus-visible,
  [tabindex="0"]:focus-visible {
    outline: 0.1875rem solid var(--accent);
    outline-offset: 0.25rem;
  }

  ::selection {
    background: var(--accent);
    color: var(--white);
  }

  h1,
  h2 {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -0.045em;
    text-wrap: balance;
  }

  h2 {
    font-size: clamp(2.6rem, 5vw, 5.6rem);
    line-height: 0.99;
  }

  table {
    width: 100%;
    border-collapse: collapse;
  }

  .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-link {
    position: fixed;
    z-index: 1000;
    top: 0.75rem;
    left: 0.75rem;
    transform: translateY(-180%);
    background: var(--ink);
    color: var(--white);
    padding: 0.75rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
  }

  .skip-link:focus {
    transform: translateY(0);
  }
}

@layer layout {
  /* Header is authored mobile first: brand, language switch and menu button on
     one row, with the nav dropping in as an overlay. The desktop rule below
     moves the nav to the left and parks the logo top right. */
  .site-header {
    position: sticky;
    z-index: 100;
    top: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: stretch;
    height: var(--header-height);
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--canvas) 94%, transparent);
    backdrop-filter: blur(0.5rem);
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    padding-inline: var(--gutter);
  }

  .brand-logo {
    width: auto;
    height: clamp(1rem, 3.4vw, 1.4rem);
    object-fit: contain;
  }

  .brand-scope {
    display: none;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }

  .header-tools {
    display: contents;
  }

  .primary-nav {
    position: fixed;
    z-index: 90;
    top: var(--header-height);
    right: 0;
    left: 0;
    display: none;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    border-bottom: 1px solid var(--line-strong);
    background: var(--canvas);
  }

  .primary-nav.is-open {
    display: grid;
  }

  .primary-nav a {
    display: grid;
    place-items: center start;
    min-width: 0;
    border-top: 1px solid var(--line);
    padding: 1.15rem var(--gutter);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
    transition: background-color 180ms ease, color 180ms ease;
  }

  .primary-nav a:hover,
  .primary-nav a.is-active {
    background: var(--white);
    color: var(--accent);
  }

  .language-toggle {
    display: flex;
    align-items: stretch;
    border-left: 1px solid var(--line);
  }

  .language-toggle button {
    padding-inline: 0.85rem;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    transition: color 180ms ease, background-color 180ms ease;
  }

  .language-toggle button + button {
    border-left: 1px solid var(--line);
  }

  .language-toggle button.is-active,
  .language-toggle button[aria-pressed="true"] {
    background: var(--white);
    color: var(--accent);
  }

  .menu-toggle {
    display: grid;
    place-items: center;
    border-left: 1px solid var(--line);
    padding-inline: 1rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
  }

  .site-section {
    padding: clamp(2.75rem, 4.5vw, 4.5rem) var(--gutter) var(--section-space);
    border-bottom: 1px solid var(--line);
    scroll-margin-top: var(--header-height);
  }

  /* Short of a full viewport on purpose: the copy is bottom aligned, so a
     taller hero only buys dead space between the nav and the headline. */
  .hero {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: calc(100svh - var(--header-height) - clamp(3rem, 11vh, 10rem));
    border-bottom: 1px solid var(--line);
    scroll-margin-top: var(--header-height);
  }

  /* Mobile first: one column, the engine rail stacked under the copy. */
  .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
    padding: clamp(3rem, 7vh, 6rem) var(--gutter) clamp(2.5rem, 5vh, 4rem);
  }

  .contact-section {
    display: grid;
    grid-template-rows: 1fr auto;
    min-height: 100svh;
    scroll-margin-top: var(--header-height);
  }
}

@layer components {
  /* Shared marks */
  .terminal-mark {
    color: var(--accent);
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: -0.18em;
  }

  .section-label {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: clamp(0.75rem, 1vw, 0.9375rem);
    letter-spacing: 0.04em;
  }

  .section-label .terminal-mark {
    margin-right: 0.25rem;
  }

  .micro-heading {
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
  }

  .text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 0.15rem;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: clamp(0.75rem, 1vw, 0.875rem);
    letter-spacing: 0.04em;
    transition: color 180ms ease, border-color 180ms ease;
  }

  .text-link:hover {
    color: var(--ink);
    border-color: var(--ink);
  }

  .text-link span {
    transition: transform 180ms ease;
  }

  .text-link:hover span {
    transform: translateX(0.2rem);
  }

  .button-primary {
    display: inline-flex;
    min-height: 3.25rem;
    align-items: center;
    justify-content: center;
    background: var(--ink);
    color: var(--white);
    padding: 0.75rem 1.5rem;
    font-family: var(--font-mono);
    font-size: clamp(0.75rem, 1vw, 0.9375rem);
    letter-spacing: 0.04em;
    white-space: nowrap;
    transition: background-color 180ms ease, transform 180ms ease;
  }

  .button-primary:hover {
    background: var(--accent);
  }

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

  /* Market ticker: the quotes drift rightwards on a seamless loop. */
  .ticker-strip {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2.25rem);
    height: var(--ticker-height);
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    padding-left: var(--gutter);
    background: var(--surface);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.045em;
  }

  .ticker-status {
    flex: none;
    color: var(--accent);
  }

  .ticker-viewport {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
  }

  .ticker-lane {
    display: flex;
    width: max-content;
  }

  .ticker-track {
    display: flex;
    flex: none;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 3rem);
    padding-right: clamp(1.5rem, 3vw, 3rem);
  }

  @media (prefers-reduced-motion: no-preference) {
    /* Two identical tracks translated from -50% to 0 read as one endless
       band moving right. Paused on hover and while a quote has focus. */
    .ticker-lane.is-looping {
      animation: ticker-drift 60s linear infinite;
    }

    .ticker-strip:hover .ticker-lane,
    .ticker-strip:focus-within .ticker-lane {
      animation-play-state: paused;
    }
  }

  @keyframes ticker-drift {
    from {
      transform: translate3d(-50%, 0, 0);
    }

    to {
      transform: translate3d(0, 0, 0);
    }
  }

  .ticker-item {
    display: flex;
    flex: none;
    align-items: baseline;
    gap: 0.45rem;
    color: var(--muted);
  }

  .ticker-item b {
    color: var(--ink);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
  }

  .ticker-item i {
    font-style: normal;
    font-variant-numeric: tabular-nums;
  }

  .ticker-item.is-up i {
    color: var(--up);
  }

  .ticker-item.is-down i {
    color: var(--down);
  }

  /* Hero */
  .hero h1 {
    max-width: 22ch;
    font-size: clamp(3rem, 6.2vw, 7rem);
    line-height: 0.94;
  }

  .hero-support {
    max-width: 44rem;
    margin-top: clamp(1.25rem, 2.5vh, 2rem);
    color: var(--muted);
    font-size: clamp(1.0625rem, 1.5vw, 1.5rem);
    line-height: 1.34;
    letter-spacing: -0.008em;
  }

  .hero-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
    margin-top: clamp(1.75rem, 3.5vh, 2.75rem);
  }

  .command-link {
    font-family: var(--font-mono);
    font-size: clamp(0.8125rem, 1.2vw, 1.0625rem);
    letter-spacing: 0.04em;
    transition: color 180ms ease, border-color 180ms ease;
  }

  .command-link--primary {
    border-bottom: 2px solid var(--accent);
    color: var(--accent);
  }

  .command-link--primary:hover {
    color: var(--ink);
    border-color: var(--ink);
  }

  .command-link--secondary {
    color: var(--muted);
  }

  .command-link--secondary:hover {
    color: var(--ink);
  }

  .truth-note {
    margin-top: clamp(1.25rem, 2.5vh, 2rem);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.055em;
  }

  /* Process rail */
  /* align-content: end makes the rail hug the bottom of its column, so on
     desktop it starts at the same baseline as the bottom aligned hero copy
     instead of stretching across the whole viewport. */
  .status-ledger {
    display: grid;
    align-content: end;
    border-top: 1px solid var(--line);
    padding: clamp(1.25rem, 3vh, 2rem) var(--gutter) clamp(2.5rem, 5vh, 4rem);
  }

  .ledger-kicker {
    align-self: end;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--line);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.055em;
  }

  .status-row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: 1px solid var(--line);
    padding-block: 1rem;
    font-family: var(--font-mono);
  }

  .status-row:last-child {
    border-bottom: 0;
  }

  .status-label {
    font-size: clamp(0.875rem, 1.2vw, 1.0625rem);
  }

  .status-value {
    margin-top: 0.35rem;
    color: var(--accent);
    font-size: clamp(0.75rem, 1.05vw, 0.9375rem);
  }

  .status-note {
    max-width: 18rem;
    margin-top: 0.65rem;
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: clamp(0.8125rem, 1vw, 0.9375rem);
    line-height: 1.45;
  }

  /* 01 Hypothesis */
  /* Mobile first: heading plus noise list, then the argument underneath.
     The desktop rule puts the two side by side at the same height. */
  .hypothesis-section {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: start;
    overflow: hidden;
  }

  .hypothesis-lead {
    position: relative;
    z-index: 1;
    display: grid;
    gap: clamp(2rem, 5vh, 3.5rem);
    align-content: start;
  }

  .hypothesis-lead h2 {
    max-width: 16ch;
    margin: 0;
  }

  .noise-sequence {
    border-left: 1px solid var(--line);
    list-style: none;
  }

  .noise-sequence li {
    display: grid;
    grid-template-columns: minmax(7rem, 0.6fr) minmax(0, 1.4fr) auto;
    gap: 1rem;
    min-height: 5.25rem;
    align-items: center;
    border-bottom: 1px solid var(--line);
    padding: 1rem clamp(1rem, 2.2vw, 2.25rem);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: clamp(0.8125rem, 1.05vw, 0.9375rem);
  }

  .noise-sequence li:first-child {
    border-top: 1px solid var(--line);
  }

  .noise-sequence li small {
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: clamp(0.8125rem, 1vw, 0.9375rem);
    line-height: 1.4;
  }

  .noise-mark {
    color: var(--line-strong);
  }

  .noise-sequence li.is-active {
    color: var(--ink);
  }

  .noise-sequence li.is-active .noise-mark {
    color: var(--accent);
  }

  .hypothesis-copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 2rem;
    align-content: start;
    color: var(--muted);
    font-size: clamp(1rem, 1.2vw, 1.125rem);
    line-height: 1.45;
  }

  .hypothesis-intro {
    max-width: 42rem;
    color: var(--ink);
    font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
    line-height: 1.38;
  }

  .hypothesis-claim {
    display: grid;
    gap: 1rem;
    border-block: 1px solid var(--line-strong);
    padding-block: 1.5rem;
  }

  .hypothesis-claim > p:not(.micro-heading) {
    color: var(--ink);
    font-size: clamp(1.0625rem, 1.35vw, 1.3rem);
    line-height: 1.38;
  }

  .hypothesis-claim small {
    color: var(--muted);
    font-size: 0.875rem;
    line-height: 1.45;
  }

  .split-roles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--line);
  }

  .split-roles p {
    padding: 0 1.5rem 1.5rem 0;
  }

  .split-roles p + p {
    border-left: 1px solid var(--line);
    padding-right: 0;
    padding-left: 1.5rem;
  }

  .split-roles strong {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
  }

  .hypothesis-proof {
    display: grid;
    gap: 0.75rem;
  }

  /* 02 Process */
  .process-section {
    background: var(--white);
  }

  .process-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(17rem, 0.85fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: end;
  }

  .process-intro h2 {
    max-width: 18ch;
    margin-top: 2.25rem;
  }

  .process-intro > p {
    padding-bottom: 0.5rem;
    color: var(--muted);
    font-size: clamp(0.9375rem, 1.25vw, 1.1875rem);
  }

  .pipeline {
    display: grid;
    grid-template-columns: 0.95fr 0.26fr 2.9fr 0.26fr 1fr 0.26fr 1.1fr 0.26fr 0.95fr;
    gap: 0.4rem;
    align-items: center;
    margin-top: clamp(3rem, 7vh, 6rem);
  }

  .pipeline-node,
  .source-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    min-height: 11.5rem;
    border: 1px solid var(--ink);
    padding: 1rem 0.75rem;
    text-align: center;
  }

  .pipeline-node strong,
  .source-cell strong {
    font-family: var(--font-mono);
    font-size: clamp(0.6875rem, 0.95vw, 0.875rem);
    font-weight: 500;
    letter-spacing: 0.03em;
  }

  .pipeline-node small,
  .source-cell small {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: clamp(0.5625rem, 0.75vw, 0.6875rem);
    line-height: 1.35;
  }

  .pipeline-node em {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    font-style: normal;
    letter-spacing: 0.05em;
  }

  .pipeline-node--future {
    border-style: dashed;
  }

  .pipeline-node--output {
    border-color: var(--accent);
    color: var(--accent);
  }

  .source-group {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.55rem;
    border: 1px solid var(--ink);
    padding: 0.9rem;
  }

  .source-cell {
    min-height: 9.75rem;
    padding-inline: 0.5rem;
  }

  .flow-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 1.75rem;
  }

  .flow-arrow.is-future {
    flex-direction: column;
    color: var(--muted);
  }

  .flow-arrow.is-future span:first-child {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.08em;
  }

  .source-ledger {
    display: grid;
    grid-template-columns: clamp(7.5rem, 11vw, 10rem) minmax(0, 1fr);
    margin-top: clamp(2.5rem, 5vh, 4.5rem);
    border-top: 1px solid var(--line-strong);
  }

  .source-ledger-caption {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    border-right: 1px solid var(--line);
    padding: 1.6rem 1rem 1rem 0;
    font-family: var(--font-mono);
  }

  .source-ledger-caption strong {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
  }

  .source-ledger-caption span {
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: 0.8125rem;
    line-height: 1.4;
  }

  .table-scroll {
    overflow-x: auto;
    scrollbar-color: var(--line-strong) transparent;
  }

  .source-ledger table {
    min-width: 52rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
  }

  .source-ledger th,
  .source-ledger td {
    border-bottom: 1px solid var(--line);
    padding: 0.85rem 1rem;
    text-align: left;
    font-weight: 400;
  }

  .source-ledger th {
    color: var(--muted);
  }

  .source-ledger td:last-child {
    white-space: nowrap;
    color: var(--accent);
  }

  .source-ledger tr:last-child td {
    border-bottom: 0;
  }

  /* 03 Sample */
  .sample-section {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2.5rem, 5vw, 5.5rem);
    align-items: center;
  }

  .sample-figure {
    display: grid;
    gap: 1rem;
  }

  .sample-frame {
    position: relative;
    border: 1px solid var(--line-strong);
    background: var(--white);
    padding: clamp(0.75rem, 1.5vw, 1.5rem);
  }

  .sample-frame img {
    width: 100%;
    height: auto;
    border: 1px solid var(--line);
  }

  .sample-stamp {
    position: absolute;
    top: clamp(0.75rem, 1.5vw, 1.5rem);
    left: clamp(0.75rem, 1.5vw, 1.5rem);
    background: var(--ink);
    color: var(--white);
    padding: 0.4rem 0.7rem;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.08em;
  }

  .sample-figure figcaption {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.03em;
    line-height: 1.6;
  }

  .sample-figure figcaption a {
    color: var(--accent);
    border-bottom: 1px solid var(--line-strong);
  }

  .sample-figure figcaption a:hover {
    color: var(--ink);
    border-color: var(--ink);
  }

  .sample-copy {
    display: grid;
    gap: 1.5rem;
    align-content: center;
  }

  .sample-copy h2 {
    max-width: 14ch;
    margin-top: 1rem;
  }

  .sample-copy > p {
    max-width: 40rem;
    color: var(--muted);
    font-size: clamp(1rem, 1.3vw, 1.1875rem);
    line-height: 1.45;
  }

  .sample-records {
    display: grid;
    border-top: 1px solid var(--line-strong);
  }

  .sample-records div {
    display: grid;
    grid-template-columns: minmax(6rem, 0.4fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: baseline;
    border-bottom: 1px solid var(--line);
    padding-block: 1rem;
  }

  .sample-records span {
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
  }

  .sample-records p {
    color: var(--muted);
    font-size: 0.9375rem;
  }

  /* 04 Limits */
  .limits-section {
    background: var(--surface);
  }

  .limits-intro {
    display: grid;
    gap: 1.25rem;
    max-width: 52rem;
  }

  .limits-intro h2 {
    max-width: 16ch;
    margin-top: 2rem;
  }

  .limits-intro p {
    color: var(--muted);
    font-size: clamp(1rem, 1.3vw, 1.1875rem);
  }

  .limits-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(13rem, 18vw, 17rem);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
    margin-top: clamp(2.5rem, 6vh, 5rem);
  }

  .limits-table {
    font-family: var(--font-mono);
    font-size: 0.75rem;
  }

  .limits-table th,
  .limits-table td {
    border-bottom: 1px solid var(--line);
    padding: 1rem 0.85rem;
    text-align: left;
    font-weight: 400;
  }

  .limits-table thead th {
    border-bottom-color: var(--line-strong);
    color: var(--muted);
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
  }

  .limits-table tbody th {
    color: var(--ink);
    letter-spacing: 0.03em;
  }

  .limits-table td {
    color: var(--muted);
  }

  .limits-table td:last-child {
    color: var(--accent);
  }

  .limits-cards {
    display: none;
  }

  .limits-cards article {
    border-top: 1px solid var(--line);
    padding-block: 1.25rem;
  }

  .limits-cards h3 {
    margin: 0 0 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.04em;
  }

  .limits-cards dl {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.75rem;
  }

  .limits-cards dl > div {
    display: grid;
    grid-template-columns: minmax(7rem, 0.5fr) minmax(0, 1fr);
    gap: 0.75rem;
  }

  .limits-cards dt {
    color: var(--muted);
  }

  .limits-cards dd {
    margin: 0;
  }

  .safety-rail {
    display: grid;
    gap: 1.25rem;
    align-content: start;
    border-left: 1px solid var(--line-strong);
    padding-left: clamp(1.25rem, 2vw, 2rem);
    font-family: var(--font-mono);
    font-size: 0.75rem;
  }

  .safety-rail div {
    display: grid;
    gap: 0.3rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: 1rem;
  }

  .safety-rail strong {
    font-weight: 500;
    letter-spacing: 0.04em;
  }

  .safety-rail span {
    color: var(--muted);
  }

  .safety-rail p {
    color: var(--accent);
    letter-spacing: 0.05em;
  }

  /* 05 Roadmap */
  .roadmap-intro {
    margin-top: clamp(3rem, 9vh, 7rem);
    text-align: center;
  }

  .roadmap-intro h2 {
    margin-inline: auto;
    max-width: 18ch;
  }

  .roadmap-intro p {
    margin: 1.25rem auto 0;
    max-width: 44rem;
    color: var(--muted);
    font-size: clamp(0.9375rem, 1.3vw, 1.1875rem);
  }

  .roadmap {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin-top: clamp(3rem, 8vh, 6rem);
    list-style: none;
  }

  .roadmap::before {
    position: absolute;
    top: 0.65rem;
    right: 0;
    left: 0;
    height: 1px;
    background: var(--line-strong);
    content: "";
  }

  .roadmap::after {
    position: absolute;
    top: 0.65rem;
    left: 0;
    width: 10%;
    height: 2px;
    background: var(--accent);
    content: "";
  }

  .roadmap li {
    position: relative;
    padding: 3rem 0.75rem 0;
    text-align: center;
  }

  .roadmap-marker {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 50%;
    width: 1.3rem;
    height: 1.3rem;
    transform: translateX(-50%);
    border: 2px solid var(--line-strong);
    background: var(--canvas);
  }

  .roadmap li.is-active .roadmap-marker {
    border-color: var(--accent);
    background: var(--accent);
  }

  /* Denario is the step we are wiring up next: accented outline, not filled. */
  .roadmap li.is-next .roadmap-marker {
    border-color: var(--accent);
  }

  .roadmap li.is-next strong {
    color: var(--accent);
  }

  .roadmap h3,
  .roadmap strong,
  .roadmap-gate {
    font-family: var(--font-mono);
  }

  .roadmap h3 {
    font-size: clamp(0.75rem, 1.05vw, 0.9375rem);
    font-weight: 500;
    letter-spacing: 0.03em;
  }

  .roadmap p {
    max-width: 12rem;
    min-height: 4rem;
    margin: 0.9rem auto 0;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: clamp(0.6875rem, 0.9vw, 0.8125rem);
    line-height: 1.4;
  }

  .roadmap strong {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.05em;
  }

  .roadmap li.is-active strong {
    color: var(--accent);
  }

  .roadmap-gate {
    margin-top: clamp(2.5rem, 6vh, 4.5rem);
    border-top: 1px solid var(--line-strong);
    padding-top: 2rem;
    color: var(--muted);
    text-align: center;
    font-size: clamp(0.6875rem, 0.95vw, 0.8125rem);
    letter-spacing: 0.035em;
  }

  /* 06 Contact and footer */
  .contact-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(13rem, 16vw, 16rem);
    gap: clamp(2rem, 4vw, 4.5rem);
    align-items: end;
    padding: clamp(2.5rem, 4.5vw, 4.5rem) var(--gutter) clamp(3rem, 6vw, 6rem);
  }

  .contact-copy h2 {
    max-width: 16ch;
    margin-top: clamp(3rem, 9vh, 7rem);
  }

  .contact-copy > p {
    max-width: 42rem;
    margin-top: 2rem;
    color: var(--muted);
    font-size: clamp(1rem, 1.35vw, 1.25rem);
    line-height: 1.45;
  }

  .contact-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2.25rem;
  }

  .contact-channels {
    display: grid;
    align-content: end;
    align-self: stretch;
    border-top: 1px solid var(--line);
    padding-top: 1.25rem;
  }

  .channel {
    display: grid;
    gap: 0.35rem;
    border-bottom: 1px solid var(--line);
    padding-block: 1.15rem;
  }

  .channel:last-child {
    border-bottom: 0;
  }

  .channel-label {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    transition: color 180ms ease;
  }

  .channel-value {
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: clamp(0.8125rem, 1vw, 0.9375rem);
    overflow-wrap: anywhere;
    transition: color 180ms ease;
  }

  .channel:hover .channel-label,
  .channel:hover .channel-value {
    color: var(--accent);
  }

  .site-footer {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: clamp(1.25rem, 3vw, 3rem);
    align-items: center;
    border-top: 1px solid var(--line-strong);
    padding: 1.75rem var(--gutter);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
  }

  .footer-brand {
    font-family: var(--font-display);
    font-size: 1.25rem;
    letter-spacing: -0.03em;
  }

  .site-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
    color: var(--muted);
  }

  .site-footer nav a:hover {
    color: var(--accent);
  }

  .footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
    color: var(--muted);
    text-align: right;
  }

  .footer-legal a {
    color: var(--accent);
    border-bottom: 1px solid var(--line-strong);
  }

  .footer-legal a:hover {
    color: var(--ink);
    border-color: var(--ink);
  }
}

@layer legal {
  .legal-hero {
    padding: clamp(3rem, 7vh, 6rem) var(--gutter) clamp(2.5rem, 5vh, 4rem);
    border-bottom: 1px solid var(--line);
  }

  /* legal-i18n.js re-renders this markup on a language switch, so both the
     semantic selector and the legacy class names it ships have to be styled. */
  .legal-hero h1,
  .legal-hero__title {
    max-width: 18ch;
    margin-top: 1.5rem;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.6rem, 5vw, 5rem);
    letter-spacing: -0.045em;
    line-height: 1;
  }

  .legal-hero__title em {
    font-style: normal;
  }

  .legal-hero .eyebrow {
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
  }

  .legal-hero__sub {
    max-width: 46rem;
    margin-top: 1.5rem;
    color: var(--muted);
    font-size: clamp(1rem, 1.3vw, 1.1875rem);
    line-height: 1.45;
  }

  .legal-updated {
    display: inline-block;
    margin-top: 1.5rem;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.055em;
  }

  .legal-layout {
    display: grid;
    grid-template-columns: clamp(12rem, 18vw, 16rem) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    padding: clamp(2.5rem, 5vh, 4rem) var(--gutter) clamp(4rem, 8vh, 7rem);
  }

  .legal-toc__inner {
    position: sticky;
    top: calc(var(--header-height) + 2rem);
    display: grid;
    gap: 0.5rem;
    border-left: 1px solid var(--line);
    padding-left: 1.25rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
  }

  .legal-toc__label {
    color: var(--accent);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
  }

  .legal-toc__inner a {
    color: var(--muted);
    padding-block: 0.2rem;
    transition: color 180ms ease;
  }

  .legal-toc nav {
    display: grid;
    gap: 0.35rem;
  }

  .legal-toc__inner a:hover,
  .legal-toc nav a.active {
    color: var(--accent);
  }

  .legal-content {
    display: grid;
    gap: clamp(2.5rem, 5vh, 4rem);
    min-width: 0;
    max-width: 52rem;
  }

  .legal-doc {
    display: grid;
    gap: 1rem;
    border-top: 1px solid var(--line-strong);
    padding-top: 1.75rem;
    scroll-margin-top: calc(var(--header-height) + 1.5rem);
  }

  .legal-doc__label {
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
  }

  .legal-doc h2 {
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    line-height: 1.05;
  }

  .legal-doc h3 {
    margin-top: 1rem;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.03em;
  }

  .legal-doc p,
  .legal-doc li {
    color: var(--muted);
    font-size: 0.9375rem;
    line-height: 1.6;
  }

  .legal-doc ul,
  .legal-doc ol {
    display: grid;
    gap: 0.5rem;
    padding-left: 1.25rem;
  }

  .legal-doc a {
    color: var(--accent);
    border-bottom: 1px solid var(--line-strong);
  }

  .legal-doc a:hover {
    color: var(--ink);
    border-color: var(--ink);
  }

  .legal-callout {
    border: 1px solid var(--line-strong);
    background: var(--white);
    padding: 1.25rem 1.5rem;
  }

  .legal-variant {
    display: grid;
    gap: 0.75rem;
    border-left: 2px solid var(--accent);
    padding-left: 1.25rem;
  }

  .legal-variant__label {
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
  }
}

@layer responsive {
  /* Desktop header: brand on the left, nav and language switch on the right. */
  @media (min-width: 901px) {
    .menu-toggle {
      display: none;
    }

    .site-header {
      grid-template-columns: minmax(14rem, 34%) 1fr;
    }

    .header-tools {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      min-width: 0;
    }

    .brand-logo {
      height: clamp(1.1rem, 1.8vw, 1.6rem);
    }

    .brand-scope {
      display: block;
    }

    .primary-nav {
      position: static;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      border-bottom: 0;
      background: none;
    }

    .primary-nav a {
      place-items: center;
      border-top: 0;
      border-left: 1px solid var(--line);
      padding: 0 0.5rem;
      font-size: clamp(0.6875rem, 0.95vw, 0.875rem);
    }
  }

  /* Desktop hero: two columns, both blocks bottom aligned to the same line. */
  @media (min-width: 1025px) {
    /* Section 01: headline on the left, the argument on the right. The copy
       drops a little so it starts below the headline rather than level with
       the section label. */
    .hypothesis-section {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .hypothesis-copy {
      margin-top: clamp(5rem, 11vh, 9rem);
    }

    .contact-channels {
      border-top: 0;
      border-left: 1px solid var(--line);
      padding: 0 0 0 clamp(1.25rem, 2.4vw, 2.25rem);
    }

    .hero-inner {
      grid-template-columns: minmax(0, 1fr) clamp(15rem, 20vw, 21rem);
    }

    .hero .status-ledger {
      border-top: 0;
      border-left: 1px solid var(--line);
      padding: clamp(3rem, 7vh, 6rem) clamp(1.25rem, 2.4vw, 2.25rem) clamp(2.5rem, 5vh, 4rem);
    }

    .hero .status-row {
      padding-block: 1.15rem;
    }

    /* The rail is the taller column, so bottom aligning the copy pushed the
       headline far down the viewport. Centring it against the rail keeps the
       two columns balanced without the dead band under the nav. */
    .hero-copy {
      justify-content: center;
      padding-block: clamp(2rem, 4vh, 3rem);
    }
  }

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

    .pipeline > .flow-arrow {
      display: none;
    }

    .source-group {
      grid-column: 1 / -1;
    }

    .hypothesis-heading h2 {
      margin-left: 0;
    }
  }

  @media (max-width: 1024px) {
    .process-intro,
    .sample-section,
    .limits-layout,
    .contact-main {
      grid-template-columns: minmax(0, 1fr);
    }

    .status-note {
      max-width: none;
    }

    .safety-rail {
      border-left: 0;
      border-top: 1px solid var(--line-strong);
      padding-left: 0;
      padding-top: 1.5rem;
    }

    .sample-section {
      align-items: start;
    }

    .legal-layout {
      grid-template-columns: minmax(0, 1fr);
    }

    .legal-toc__inner {
      position: static;
      grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    }
  }

  @media (max-width: 900px) {
    .roadmap {
      grid-template-columns: minmax(0, 1fr);
      border-top: 1px solid var(--line-strong);
    }

    .roadmap::before,
    .roadmap::after {
      display: none;
    }

    .roadmap li {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 0.25rem 1.25rem;
      border-bottom: 1px solid var(--line);
      padding: 1.25rem 0 1.25rem 0.5rem;
      text-align: left;
    }

    .roadmap-marker {
      position: static;
      grid-row: 1 / span 3;
      align-self: center;
      width: 0.85rem;
      height: 0.85rem;
      transform: none;
    }

    .roadmap p {
      max-width: none;
      min-height: 0;
      margin: 0;
    }

    .roadmap strong {
      justify-self: start;
    }

    .roadmap-intro {
      text-align: left;
    }

    .roadmap-intro h2,
    .roadmap-intro p {
      margin-inline: 0;
    }

    .roadmap-gate {
      text-align: left;
    }

    .site-footer {
      grid-template-columns: minmax(0, 1fr);
      gap: 1.25rem;
    }

    .site-footer nav,
    .footer-legal {
      justify-content: flex-start;
      text-align: left;
    }
  }

  @media (max-width: 720px) {
    .hypothesis-section,
    .hypothesis-copy {
      gap: 1.75rem;
    }

    .noise-sequence li {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: start;
      gap: 0.5rem 1rem;
      padding-inline: 1rem;
    }

    .noise-sequence li small {
      grid-column: 1 / -1;
    }

    .split-roles {
      grid-template-columns: minmax(0, 1fr);
    }

    .split-roles p {
      padding: 0 0 1.25rem;
    }

    .split-roles p + p {
      border-left: 0;
      border-top: 1px solid var(--line);
      padding: 1.25rem 0 0;
    }

    .pipeline {
      grid-template-columns: minmax(0, 1fr);
    }

    .source-group {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .source-ledger {
      grid-template-columns: minmax(0, 1fr);
    }

    .source-ledger-caption {
      border-right: 0;
      border-bottom: 1px solid var(--line);
      padding: 1.25rem 0;
    }

    .limits-table {
      display: none;
    }

    .limits-cards {
      display: block;
    }

    .sample-records div {
      grid-template-columns: minmax(0, 1fr);
      gap: 0.3rem;
    }

    .contact-actions {
      flex-direction: column;
      align-items: flex-start;
      gap: 1rem;
    }
  }
}

@layer motion {
  [data-reveal].reveal-pending {
    opacity: 0;
    transform: translateY(0.875rem);
  }

  [data-reveal].reveal-pending.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 650ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 650ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}