/* ==========================================================================
   Two-Mind — pre-launch site styles
   Visual system unchanged from the approved production design:
   warm ivory canvas, restrained cobalt, white product objects.

   Contents
   1.  Design tokens
   2.  Base, utilities, focus
   3.  Buttons
   4.  Header and navigation
   5.  Hero and hero artifacts
   6.  Section scaffold and prose
   7.  Problem and verification gap
   8.  Creation vs. judgment (cobalt band)
   9.  How Two-Mind works
   10. Architecture
   11. Capabilities
   12. Assurance record (sticky)
   13. Controlled evaluation
   14. Company
   15. Partners and investors
   16. Contact form
   17. Footer
   18. Legal pages
   19. Responsive
   20. Reduced motion
   ========================================================================== */

/* 1. Design tokens ------------------------------------------------------- */
:root {
  /* brand */
  --blue: #1448a6;
  --blue-soft: #e7edf8;
  --blue-on-dark: #c9d9f7;

  /* neutrals (warm) */
  --bg: #f6f4ef;
  --bg-alt: #eeebe3;
  --sheet: #ffffff;
  --ink: #101722;
  --muted: #566070;
  --line: #ddd8cc;
  --field-line: #7d8590;

  /* semantic: only to carry system meaning */
  --amber: #8f5106;
  --amber-line: #e08a1e;
  --amber-soft: #fdf0dd;
  --ok: #1a6b43;
  --ok-soft: #e3f1e9;

  /* type: system stacks; no webfont required */
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --serif: ui-serif, Georgia, "Times New Roman", serif;

  /* layout */
  --maxw: 1180px;
  --gut: 32px;
  --radius: 16px;
  --nav-h: 80px;
  --section-y: 112px;
}

/* 2. Base, utilities, focus --------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 18px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

section[id] { scroll-margin-top: calc(var(--nav-h) + 12px); }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.skip-link {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font: 500 15px var(--sans);
}
.skip-link:focus { top: 12px; outline-color: #fff; }

.w {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut);
}

/* small monospace label, used for annotations and metadata only */
.lab {
  font: 500 11.5px/1.35 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.sec-label { display: block; margin-bottom: 22px; }
.id { font: 400 12px var(--mono); color: var(--muted); }

h1 {
  font-weight: 500;
  font-size: clamp(40px, 5.8vw, 82px);
  line-height: .98;
  letter-spacing: -.042em;
}
h2 {
  font-weight: 500;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.04;
  letter-spacing: -.036em;
  max-width: 1000px;
}
.lede {
  max-width: 620px;
  margin-top: 22px;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.5;
}

/* 3. Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 500 16px/1.2 var(--sans);
  white-space: nowrap;
  cursor: pointer;
}
.btn:hover { background: rgba(16, 23, 34, .05); }
.btn--primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn--primary::after { content: "→"; }
.btn--primary:hover { background: #0f3b8c; border-color: #0f3b8c; }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ctas--center { justify-content: center; margin-top: 40px; }

/* 4. Header and navigation ---------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 244, 239, .94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.nav-row {
  display: flex;
  align-items: center;
  gap: 36px;
  min-height: var(--nav-h);
}
.brand { display: block; flex: none; }
.brand img { height: 44px; width: auto; }

.nav-menu { display: flex; align-items: center; gap: 32px; margin-left: auto; }
.nav-links { display: flex; gap: 30px; font-size: 15.5px; color: var(--muted); }
.nav-links a { display: inline-block; padding: 8px 0; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { padding: 13px 22px; font-size: 15.5px; }

.nav-toggle { display: none; }

/* 5. Hero and hero artifacts -------------------------------------------- */
.hero { position: relative; padding: 96px 0 20px; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 620px;
  background-image:
    linear-gradient(rgba(16, 23, 34, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 23, 34, .045) 1px, transparent 1px);
  background-size: 120px 120px;
  -webkit-mask-image: linear-gradient(#000, transparent);
  mask-image: linear-gradient(#000, transparent);
  pointer-events: none;
}
.hero .w { position: relative; }
.hero h1 { max-width: 980px; margin-top: 24px; }
.hero h1 .accent { color: var(--blue); }
.hero-copy { display: grid; gap: 26px; margin-top: 30px; }
.hero-sub { max-width: 660px; color: var(--muted); font-size: 22px; line-height: 1.45; }
.hero-sub p + p { margin-top: 12px; }
.hero-actions { display: grid; gap: 22px; justify-items: start; }

/* quiet status indicator: static, no animation */
.status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font: 500 12px/1.2 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }

.stage { padding: 44px 0 90px; }
.trio {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  align-items: start;
}
.sh {
  position: relative;
  padding: 26px 28px;
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 24px 50px -38px rgba(16, 23, 34, .67);
}
.sh-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font: 500 11px var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.sh-title .n {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border: 1.5px solid var(--blue);
  border-radius: 50%;
  color: var(--blue);
  font-size: 11px;
}

/* staged, overlapping composition */
.sh--claim { z-index: 1; margin: 56px -22px 0 0; padding-right: 46px; border-top: 4px solid var(--amber-line); }
.sh--evidence { z-index: 2; margin: 22px -22px 0 0; padding: 32px 46px 30px 28px; min-height: 330px; }
.sh--record { z-index: 3; padding-left: 44px; }

.claim-title { margin-bottom: 8px; font: 500 29px/1.15 var(--sans); letter-spacing: -.02em; }
.claim-sub { margin-bottom: 22px; color: var(--muted); font-size: 16px; }

/* circular cobalt connectors bridging each stage */
.cn {
  position: absolute;
  top: 50%;
  left: -21px;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(20, 72, 166, .85);
  transform: translateY(-50%);
}
.cn svg { width: 18px; height: 18px; }

.tag {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 4px;
  font: 500 10.5px var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tag--amber { background: var(--amber-soft); color: var(--amber); }

.sh-heading { margin-bottom: 4px; font: 500 26px/1.2 var(--sans); letter-spacing: -.02em; }
.sh-lead { margin-bottom: 14px; color: var(--muted); font-size: 15.5px; }
.ev li {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16.5px;
  line-height: 1.35;
}
.ev li:last-child { border-bottom: 0; }
.ev .tick {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--ok-soft);
  color: var(--ok);
  font-size: 13px;
  font-weight: 700;
}
.ev .st {
  color: var(--ok);
  font: 500 11px var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sh--record .top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
}
.sh--record .top img { height: 34px; width: auto; }
.sh--record .top b { display: block; font-size: 17px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.sh--record .verdict {
  margin: 16px 0 4px;
  color: var(--ok);
  font: 600 34px/1 var(--sans);
  letter-spacing: -.03em;
}
.record-lead { margin-bottom: 10px; color: var(--muted); font-size: 14.5px; }
.sh--record dl > div {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  line-height: 1.4;
}
.sh--record dl > div:last-child { border-bottom: 0; }
.sh--record dt {
  font: 500 10.5px/1.7 var(--mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}

.caption { margin-top: 26px; font: 400 12px var(--mono); color: var(--muted); }

/* 6. Section scaffold and prose ------------------------------------------ */
.section { padding: var(--section-y) 0; }
.section--alt { background: var(--bg-alt); }
.prose { max-width: 560px; margin-top: 26px; color: var(--muted); font-size: 19px; line-height: 1.55; }
.prose p + p { margin-top: 16px; }
.prose--wide { max-width: 680px; }

/* 7. Problem and verification gap ------------------------------------------ */
.gap { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.gap > * { min-width: 0; }

.paths {
  padding: 26px;
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 20px 50px -40px rgba(16, 23, 34, .67);
}
.path + .path { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.nodes { display: flex; margin-top: 12px; }
.nodes li {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 72px;
  margin-right: 34px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
}
.nodes li:last-child { margin-right: 0; }
.nodes li:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: -28px;
  width: 22px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  text-align: center;
  transform: translateY(-50%);
}
.nodes .unknown { background: var(--amber-soft); border: 1.5px dashed var(--amber-line); color: var(--amber); font-size: 30px; font-weight: 600; }
.nodes .tm { background: var(--blue); border-color: var(--blue); color: #fff; }
.nodes .tm small { display: block; margin-top: 3px; color: var(--blue-on-dark); font: 400 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.paths .caption { margin-top: 22px; }

/* 8. Creation vs. judgment (cobalt band) ---------------------------------- */
.band {
  position: relative;
  overflow: hidden;
  padding: 112px 0;
  background: var(--blue);
  color: #fff;
}
.band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .065) 1px, transparent 1px);
  background-size: 120px 120px;
  pointer-events: none;
}
.band .w { position: relative; }
.band h2 { color: #fff; }
.band .lab { color: var(--blue-on-dark); }
.band :focus-visible { outline-color: #fff; }
.band-copy { max-width: 640px; margin-top: 26px; color: #e9effc; font-size: 20px; line-height: 1.5; }
.band-copy p + p { margin-top: 14px; }

.sep { display: grid; grid-template-columns: 1fr 80px 1fr; margin-top: 60px; }
.sep > * { min-width: 0; }
.panel {
  padding: 36px 38px;
  background: var(--sheet);
  border-radius: var(--radius);
  color: var(--ink);
}
.panel h3 { margin: 12px 0 22px; font-size: 34px; font-weight: 500; line-height: 1.05; letter-spacing: -.03em; }
.panel li {
  display: flex;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid #e6e2d8;
  color: #2a3342;
  font-size: 18.5px;
}
.panel li:last-child { border-bottom: 0; }
.panel li::before { content: "–"; color: var(--muted); }
.panel--judgment { box-shadow: 0 0 0 5px rgba(255, 255, 255, .25); }
.panel--judgment li::before { content: "✓"; color: var(--blue); font-weight: 600; }
.panel .lab { color: var(--muted); }
.panel--judgment .lab { color: var(--blue); }

.boundary { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #dbe6fb; }
.boundary i { flex: 1; width: 2px; background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.75), rgba(255,255,255,0)); }
.boundary span {
  writing-mode: vertical-rl;
  font: 500 11px var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.band-quote { margin-top: 64px; font-size: clamp(30px, 3.8vw, 52px); font-weight: 500; line-height: 1.08; letter-spacing: -.035em; }

/* 9. How Two-Mind works ---------------------------------------------------- */
.seq {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-top: 60px;
  counter-reset: stage;
}
.seq::before { content: ""; position: absolute; left: 0; right: 0; top: 15px; height: 1px; background: var(--ink); }
.seq li { position: relative; padding-right: 16px; counter-increment: stage; }
.seq li::before {
  content: counter(stage, decimal-leading-zero);
  display: block;
  position: relative;
  width: 31px; height: 31px;
  margin-bottom: 20px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--bg-alt);
  font: 500 12px/29px var(--mono);
  text-align: center;
}
.seq b { display: block; margin-bottom: 6px; font-size: 24px; font-weight: 500; letter-spacing: -.03em; }
.seq p { color: var(--muted); font-size: 15px; line-height: 1.5; }
.seq .is-repair::before { border-color: var(--amber-line); background: var(--amber-soft); color: var(--amber); }
.seq .is-approve::before { border-color: var(--ok); background: var(--ok); color: #fff; }

/* 10. Architecture ---------------------------------------------------------- */
.arch {
  margin-top: 56px;
  padding: 38px;
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: 22px;
}
.tier { display: grid; grid-template-columns: 220px 1fr; gap: 26px; align-items: center; }
.tier > * { min-width: 0; }
.tier h3 { font: 500 11.5px/1.35 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  padding: 12px 18px;
  background: var(--sheet);
  border: 1px dashed #8d939d;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
}
.chip--solid { border-style: solid; border-color: var(--line); }

.tier--layer { display: block; padding: 32px; background: var(--blue-soft); border: 1.5px solid var(--blue); border-radius: var(--radius); }
.tier--layer h3 { margin-bottom: 14px; color: var(--blue); }
.tier--layer .lead { display: block; margin-bottom: 18px; font-size: 28px; font-weight: 500; letter-spacing: -.03em; line-height: 1.2; }
.comp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.comp li { padding: 15px 16px; background: var(--sheet); border: 1px solid #c7d6f0; border-radius: 10px; font-size: 16px; font-weight: 500; line-height: 1.3; }

.flow {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 64px;
  padding-left: 30px;
  color: var(--muted);
  font: 500 11.5px var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.flow::before { content: ""; flex: none; width: 2px; height: 100%; background: var(--ink); }

/* 11. Capabilities ------------------------------------------------------------ */
.caps { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 56px; border-top: 1px solid var(--ink); counter-reset: cap; }
.cap { padding: 32px 32px 38px 0; margin-right: 32px; border-bottom: 1px solid var(--line); counter-increment: cap; }
.cap:nth-child(3n) { margin-right: 0; padding-right: 0; }
.cap::before { content: counter(cap, decimal-leading-zero); display: block; color: var(--blue); font: 300 40px/1.2 var(--sans); letter-spacing: -.04em; }
.cap h3 { margin: 8px 0 10px; font-size: 26px; font-weight: 500; line-height: 1.1; letter-spacing: -.03em; }
.cap p { color: var(--muted); font-size: 16.5px; }

/* 12. Assurance record (sticky) ------------------------------------------------ */
.record-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 76px; align-items: start; }
.record-layout > * { min-width: 0; }
.lede--follow { margin-top: 16px; }
.preserves { max-width: 560px; margin-top: 14px; }
.preserves li {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 18px;
}
.preserves li:last-child { border-bottom: 0; }
.preserves li::before { content: "✓"; color: var(--blue); font-weight: 700; }
.reasons { margin-top: 30px; counter-reset: reason; }
.reasons li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  counter-increment: reason;
}
.reasons li::before {
  content: counter(reason);
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font: 600 11px/24px var(--mono);
  text-align: center;
}
.reasons b { display: block; font-weight: 600; }
.reasons span { color: var(--muted); font-size: 16px; }

.record-object { position: relative; padding: 24px 0 0 22px; }
.record-object::before {
  content: "";
  position: absolute;
  left: 0; top: 0; right: 26px; bottom: 34px;
  background: #faf9f6;
  border: 1px solid var(--line);
  border-radius: 10px;
  transform: rotate(-1.8deg);
}
.rec {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 38px 40px;
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 40px 80px -52px rgba(16, 23, 34, .67);
}
.rec-wm { position: absolute; right: -26px; bottom: -26px; width: 220px; height: auto; opacity: .06; pointer-events: none; }
.rec-head { display: flex; align-items: center; gap: 16px; margin-bottom: 4px; padding-bottom: 18px; border-bottom: 2px solid var(--ink); }
.rec-head img { height: 48px; width: auto; }
.rec-head h3 { font-size: 23px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
.rec-status {
  margin-left: auto;
  padding: 7px 11px;
  border: 1.5px solid var(--ok);
  border-radius: 4px;
  color: var(--ok);
  font: 600 11.5px var(--mono);
  letter-spacing: .08em;
}
.rec dl > div {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 14px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16.5px;
  line-height: 1.45;
}
.rec dt { font: 500 11px/1.9 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.rec .is-pass { color: var(--ok); font-weight: 600; }
.rec-foot { position: relative; margin-top: 22px; color: var(--muted); font: 400 11.5px var(--mono); }

/* 13. Controlled evaluation ------------------------------------------------------ */
.eval { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: start; }
.eval > * { min-width: 0; }
.status-card {
  padding: 30px 34px;
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: 22px;
}
.status-card dl > div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 17px;
}
.status-card dt { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.honest { margin-top: 24px; padding: 12px 16px; background: var(--amber-soft); border-radius: 8px; color: var(--amber); font: 500 13.5px var(--mono); }

/* 14. Company ------------------------------------------------------------------------ */
.stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 52px; }
.stages li { padding-top: 16px; border-top: 2px solid var(--ink); }
.stages b { display: block; margin-bottom: 6px; font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.stages p { color: var(--muted); font-size: 16.5px; }

/* 15. Partners and investors ----------------------------------------------------------- */
.cta { padding: var(--section-y) 0; }
.cta-panel { position: relative; overflow: hidden; padding: 96px 56px; background: var(--sheet); border: 1px solid var(--line); border-radius: 28px; text-align: center; }
.cta-panel > * { position: relative; }
.cta-panel h2 { margin: 0 auto; }
.cta-panel .lede { margin-left: auto; margin-right: auto; }
.cta-wm { position: absolute !important; top: -30px; right: -30px; width: 300px; height: auto; opacity: .06; pointer-events: none; }

/* 16. Contact form ------------------------------------------------------------------------- */
.contact { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: start; }
.contact > * { min-width: 0; }
.fine { max-width: 440px; margin-top: 22px; color: var(--muted); font-size: 15px; }
.fine a, .legal a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

.form-card { padding: 36px; background: var(--sheet); border: 1px solid var(--line); border-radius: 22px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: grid; gap: 6px; align-content: start; }
.span-2 { grid-column: 1 / -1; }
.field label { font-size: 14.5px; font-weight: 600; }
.req { color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 16px;
  background: #fff;
  border: 1.5px solid var(--field-line);
  border-radius: 12px;
  color: var(--ink);
  font: 400 16px/1.4 var(--sans);
}
.field textarea { min-height: 130px; resize: vertical; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 26px; }
.form-note { flex: 1 1 260px; color: var(--muted); font-size: 15px; line-height: 1.4; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--blue); }

/* 17. Footer ------------------------------------------------------------------------------------ */
.site-footer { padding: 42px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.footer-brand img { height: 34px; width: auto; }
.footer-links { display: flex; gap: 24px; }
.footer-links a, .footer-copy a { text-decoration: underline; text-underline-offset: 3px; }
.footer-copy { margin-top: 22px; }

/* 18. Legal pages ---------------------------------------------------------------------------------- */
.legal { max-width: 760px; margin: 0 auto; padding: 72px var(--gut) 100px; }
.legal h1 { font-size: clamp(34px, 4.4vw, 52px); letter-spacing: -.035em; line-height: 1.05; }
.legal h2 { margin-top: 44px; font-size: 24px; letter-spacing: -.02em; line-height: 1.2; }
.legal p, .legal li { margin-top: 12px; color: #2a3342; font-size: 17px; }
.legal ul { margin-top: 8px; padding-left: 22px; list-style: disc; }
.legal .updated { margin-top: 14px; color: var(--muted); font: 400 12.5px var(--mono); }
.back-link { margin-left: auto; color: var(--muted); font-size: 15.5px; text-decoration: underline; text-underline-offset: 3px; }

/* 19. Responsive ------------------------------------------------------------------------------------- */

/* sticky record: only where there is room to show it (desktop, tall viewport) */
@media (min-width: 1101px) and (min-height: 820px) {
  .record-object { position: sticky; top: 112px; }
}

/* tablet landscape and below: stack hero artifacts, no sticky */
@media (max-width: 1100px) {
  .hero-copy { gap: 22px; }
  .trio { grid-template-columns: 1fr; gap: 40px; }
  .sh--claim, .sh--evidence, .sh--record { margin: 0; padding: 26px 28px; }
  .sh--evidence { min-height: 0; }
  .cn { top: -41px; left: 50%; transform: translateX(-50%) rotate(90deg); }
  .gap, .eval, .contact, .record-layout { grid-template-columns: 1fr; gap: 44px; }
  .record-layout { gap: 50px; }
  .seq { grid-template-columns: repeat(4, 1fr); row-gap: 36px; }
  .seq::before { display: none; }
  .tier { grid-template-columns: 1fr; gap: 12px; }
  .caps { grid-template-columns: 1fr 1fr; }
  .cap:nth-child(3n) { margin-right: 32px; padding-right: 32px; }
  .cap:nth-child(2n) { margin-right: 0; padding-right: 0; }
}

/* mobile navigation */
@media (max-width: 959px) {
  .nav-row { flex-wrap: wrap; gap: 12px 16px; padding-top: 12px; padding-bottom: 12px; }
  .nav-menu { flex: 1 1 100%; flex-direction: column; align-items: stretch; gap: 14px; margin-left: 0; padding-bottom: 14px; }
  .nav-links { flex-direction: column; gap: 0; font-size: 17px; }
  .nav-links a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav-cta { justify-content: center; }
  .js .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    padding: 10px 16px;
    border: 1.5px solid var(--ink);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    font: 500 15px var(--sans);
    cursor: pointer;
  }
  .nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
  .nav-toggle .bars { position: relative; }
  .nav-toggle .bars::before, .nav-toggle .bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle .bars::before { top: -6px; }
  .nav-toggle .bars::after { top: 6px; }
  .nav-toggle[aria-expanded="true"] .bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .bars::before { top: 0; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bars::after { top: 0; transform: rotate(-45deg); }
  .js .nav-menu { display: none; }
  .js .nav-menu.is-open { display: flex; }
}

@media (max-width: 900px) {
  .sep { grid-template-columns: 1fr; gap: 34px; }
  .boundary { flex-direction: row; padding: 6px 0; }
  .boundary i { flex: 1; width: auto; height: 2px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.75), rgba(255,255,255,0)); }
  .boundary span { writing-mode: horizontal-tb; }
  .comp { grid-template-columns: 1fr 1fr; }
  .stages { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 700px) {
  :root { --gut: 20px; --section-y: 80px; --nav-h: 68px; }
  body { font-size: 17px; }
  .brand img { height: 36px; }
  .hero { padding: 60px 0 10px; }
  .hero-sub { font-size: 19px; }
  .stage { padding: 30px 0 70px; }
  .band { padding: 84px 0; }
  .panel { padding: 28px 24px; }
  .seq, .caps { grid-template-columns: 1fr; }
  .cap { margin-right: 0 !important; padding-right: 0 !important; }
  .nodes { flex-direction: column; }
  .nodes li { margin-right: 0; margin-bottom: 32px; }
  .nodes li:last-child { margin-bottom: 0; }
  .nodes li:not(:last-child)::after { content: "↓"; top: auto; right: auto; bottom: -29px; left: 50%; transform: translateX(-50%); }
  .arch { padding: 24px 20px; }
  .tier--layer { padding: 22px 18px; }
  .rec { padding: 26px 22px; }
  .rec dl > div { grid-template-columns: 1fr; gap: 2px; padding: 14px 0; }
  .rec-head { flex-wrap: wrap; }
  .record-object { padding: 0; }
  .record-object::before { display: none; }
  .sh--record dl > div { grid-template-columns: 1fr; gap: 0; }
  .ev li { grid-template-columns: 30px 1fr; }
  .ev .st { grid-column: 2; }
  .status-card { padding: 22px 20px; }
  .status-card dl > div { grid-template-columns: 1fr; gap: 6px; }
  .cta-panel { padding: 56px 22px; }
  .cta-wm { width: 200px; }
  .form-card { padding: 24px 20px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-actions .btn { width: 100%; justify-content: center; }
  .legal { padding-top: 48px; }
}

/* 20. Reduced motion --------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Mockup additions (appended; nothing above is changed)
   ========================================================================== */
.founder-note { max-width: 860px; margin-top: 48px; padding: 6px 0 6px 28px; border-left: 4px solid var(--blue); }
.founder-note blockquote { margin: 0; font-size: clamp(24px, 3vw, 38px); font-weight: 500; line-height: 1.15; letter-spacing: -.03em; }
.founder-note p { margin-top: 16px; max-width: 640px; color: var(--muted); font-size: 18px; line-height: 1.55; }
.founder-note .sig { display: block; margin-top: 18px; color: var(--ink); font: 600 15px var(--sans); }
.auth-strip { margin-top: 28px; padding: 22px 28px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.35); border-radius: var(--radius); color: #fff; font-size: 19px; line-height: 1.45; }
.auth-strip b { display: block; margin-bottom: 4px; color: var(--blue-on-dark); font: 500 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.pressure { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.pressure > * { min-width: 0; }
.pressure .prose p.strong { color: var(--ink); font-weight: 600; }
.apv { padding: 26px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 20px 50px -40px rgba(16,23,34,.67); }
.apv-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.apv-h b { font-size: 16px; }
.apv-c { margin: 16px 0; padding: 14px 16px; background: var(--bg); border-radius: 12px; font-size: 15.5px; }
.apv-c span { display: block; margin-bottom: 6px; }
.apv-q { display: grid; gap: 10px; margin-bottom: 18px; }
.apv-q li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: center; padding: 11px 14px; border: 1.5px dashed var(--amber-line); border-radius: 12px; background: var(--amber-soft); color: var(--amber); font-size: 15.5px; font-weight: 500; }
.apv-q i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; font-style: normal; font-weight: 700; }
.apv-b { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fake { padding: 13px 30px; border-radius: 999px; background: var(--blue); color: #fff; font-weight: 600; }
.apv-b small { color: var(--muted); font-size: 13.5px; }

.nodes .unknown.pressured { padding: 8px 6px; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; text-align: center; }
.nodes .unknown.pressured small { display: block; margin-top: 4px; font: 500 10px/1.25 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.tv { padding: 28px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 20px 50px -40px rgba(16,23,34,.67); }
.tv-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.tv-h b { font-size: 16px; }
.tv-row + .tv-row { margin-top: 26px; }
.tv-row > .lab { display: block; margin: 20px 0 10px; }
.tv-bar { display: flex; gap: 4px; height: 46px; }
.tv-bar > span { display: flex; align-items: center; min-width: 0; padding: 0 10px; border-radius: 8px; font: 500 12.5px/1.2 var(--sans); white-space: nowrap; overflow: hidden; }
.tv-w { background: var(--blue); color: #fff; }
.tv-r { background: var(--bg-alt); border: 1.5px solid var(--ink); color: var(--ink); }
.tv-n { min-width: 92px; background: var(--amber-soft); border: 1.5px dashed var(--amber-line); color: var(--amber); }
.tv-pend { margin-top: 6px; display: grid; gap: 4px; }
.tv-key { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; color: var(--muted); font-size: 14px; }
.tv-key i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
.tv-key .k-w { background: var(--blue); }
.tv-key .k-r { background: var(--bg-alt); border: 1.5px solid var(--ink); }
.tv-key .k-n { background: var(--amber-soft); border: 1.5px dashed var(--amber-line); }
.tv-queue { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.tv-queue i { width: 18px; height: 18px; border-radius: 4px; background: var(--blue); opacity: .85; }
.tv-queue i.q-d { background: var(--sheet); border: 1.5px solid var(--ink); opacity: 1; }
.tv-line { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-weight: 600; font-size: 16.5px; line-height: 1.35; }
@media (max-width: 700px) { .tv { padding: 20px 16px; } .tv-bar > span { padding: 0 6px; font-size: 11px; } }
@media (max-width: 1100px) { .pressure { grid-template-columns: 1fr; gap: 44px; } }
@media (max-width: 700px) { .apv-b { flex-direction: column; align-items: flex-start; } .founder-note { padding-left: 18px; } }