/* ========================================
   Matrix Landing Page — Greco-Futurism
   Pure CSS, zero JavaScript
   Tokens and motifs imported from /design/ (see /design/README.md)

   This page runs on the MARBLE surface. The token aliases below flip
   the inherited dark palette to the warm marble-dominant palette
   without rewriting 1400+ lines of component CSS.
   ======================================== */

:root {
  --bg: var(--ground);
  --bg-alt: var(--ground-deep);
  --surface: var(--ground-soft);
  --border: var(--ground-edge);
  --text: var(--stone);
  --text-muted: var(--stone-soft);
  --text-bright: var(--stone-deep);
  /* --accent = warm antique gold (#b8903d) — WCAG AA on marble.
     --accent-warm swaps to the lighter gold for hover/highlight.
     --gold-deep (#8a6a3f) is used directly for architectural metal. */
  --accent: var(--gold);
  --accent-warm: var(--gold-soft);
  --accent-soft: var(--stone-soft);
  --accent-dim: var(--gold-glow);
}

/* Reset */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-size: 1.02rem;
  -webkit-font-smoothing: antialiased;
}

/* Language toggle */
.lang-nav {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 100;
}

.lang-toggle {
  display: inline-block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 8px 16px;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--text);
  transition: border-color 0.2s;
}

.lang-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Layout */
.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

.container-narrow {
  max-width: 560px;
}

/* Typography */
h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--text-bright);
  letter-spacing: -0.015em;
}

h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.8vw, 2.6rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--text-bright);
  letter-spacing: -0.01em;
  margin-bottom: 48px;
}

h3 {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-bright);
  margin-bottom: 12px;
}

.accent {
  color: var(--accent);
}

/* Sections */
.section {
  padding: 120px 0;
}

/* Alternating sections on marble: no color panel (which banded visibly
   on cream). Instead, frame the alt section with thin gold inlay lines
   — a twin hairline top and bottom, classical frieze rhythm. */
.section-alt {
  background: var(--ground);
  border-top: 1px solid var(--gold-deep);
  border-bottom: 1px solid var(--gold-deep);
  box-shadow:
    inset 0 3px 0 var(--ground),
    inset 0 4px 0 rgba(138, 106, 63, 0.35),
    inset 0 -3px 0 var(--ground),
    inset 0 -4px 0 rgba(138, 106, 63, 0.35);
}

.section-alt + .section:not(.section-alt) {
  border-top: none;
}

/* Section label — mono caps with a small gold inscription mark.
   The mark is a 16px gold hairline to the left, evoking a stone
   tablet's line-start rule. */
.section-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold-deep);
  margin-bottom: 28px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.section-label::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--gold-deep);
}

/* ========================================
   Hero
   ======================================== */

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 120px 0 100px;
  background: var(--ground);
}

/* Top meander frieze — Greek key pattern, bronze on deeper marble */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 32px;
  background-color: var(--ground-deep);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'><g fill='none' stroke='%238a6a3f' stroke-width='1.6'><path d='M0 6 H8 V14 H14 V8 H20 V14 H14 M20 8 H26 V26 H6 V20 H12 V14 M26 20 H32'/></g></svg>");
  background-repeat: repeat-x;
  background-size: 32px 32px;
  border-top: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  box-shadow: 0 3px 0 var(--ground-soft), 0 4px 0 var(--gold-deep);
}

/* Bottom bronze inlay — twin lines */
.hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8px;
  border-top: 1px solid var(--gold-deep);
  border-bottom: 2px solid var(--gold);
  background: var(--ground-deep);
}

.grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* Left fluted pilaster — 5 narrow columns, ends in a bronze edge */
    linear-gradient(
      90deg,
      transparent 0 8px,
      rgba(138, 106, 63, 0.18) 8px 9px,
      transparent 9px 24px,
      rgba(138, 106, 63, 0.18) 24px 25px,
      transparent 25px 40px,
      rgba(138, 106, 63, 0.18) 40px 41px,
      transparent 41px 56px,
      rgba(138, 106, 63, 0.18) 56px 57px,
      transparent 57px 72px,
      rgba(138, 106, 63, 0.18) 72px 73px,
      transparent 73px 88px,
      var(--gold) 88px 90px,
      transparent 90px
    ) no-repeat 0 0 / 120px 100%,
    /* Right fluted pilaster — mirror */
    linear-gradient(
      270deg,
      transparent 0 8px,
      rgba(138, 106, 63, 0.18) 8px 9px,
      transparent 9px 24px,
      rgba(138, 106, 63, 0.18) 24px 25px,
      transparent 25px 40px,
      rgba(138, 106, 63, 0.18) 40px 41px,
      transparent 41px 56px,
      rgba(138, 106, 63, 0.18) 56px 57px,
      transparent 57px 72px,
      rgba(138, 106, 63, 0.18) 72px 73px,
      transparent 73px 88px,
      var(--gold) 88px 90px,
      transparent 90px
    ) no-repeat right top / 120px 100%,
    /* Whole hero — subtle vertical rhythm */
    repeating-linear-gradient(
      90deg,
      transparent 0 59px,
      rgba(138, 106, 63, 0.03) 59px 60px
    ),
    /* Warm marble base with a breath of gradient */
    linear-gradient(180deg, var(--ground-soft) 0%, var(--ground) 45%, var(--ground-deep) 100%);
}

@media (max-width: 900px) {
  .grid-bg {
    background:
      repeating-linear-gradient(
        90deg,
        transparent 0 39px,
        rgba(138, 106, 63, 0.06) 39px 40px
      ),
      linear-gradient(180deg, var(--ground-soft) 0%, var(--ground) 100%);
  }
}

.hero-content {
  position: relative;
  text-align: center;
}

.hero-label {
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 32px;
}

.hero-sub {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--text);
  margin-top: 28px;
  font-weight: 400;
  line-height: 1.7;
}

.hero-tagline {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  color: var(--text);
  margin-top: 36px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.hero-highlight {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--text);
  margin-top: 20px;
  font-weight: 400;
  line-height: 1.6;
}

.hero-cta {
  margin-top: 48px;
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ========================================
   Buttons
   ======================================== */

/* Buttons — engraved bronze plates. Twin gold inlay top and bottom
   on both variants ties them into the plaque family; primary is
   filled gold with marble inscription, ghost is marble with gold. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  border: none;
  position: relative;
}

.btn-primary {
  background: var(--gold);
  color: var(--ground);
  box-shadow:
    inset 0 2px 0 var(--gold-deep),
    inset 0 -2px 0 var(--gold-deep),
    inset 0 0 0 1px rgba(138, 106, 63, 0.45);
}

.btn-primary:hover {
  background: var(--gold-deep);
  color: var(--ground);
  box-shadow:
    inset 0 2px 0 var(--gold),
    inset 0 -2px 0 var(--gold),
    inset 0 0 0 1px var(--gold);
}

.btn-ghost {
  background: var(--ground-soft);
  color: var(--gold-deep);
  box-shadow:
    inset 0 2px 0 var(--gold-deep),
    inset 0 -2px 0 var(--gold-deep),
    inset 0 0 0 1px rgba(138, 106, 63, 0.25);
}

.btn-ghost:hover {
  color: var(--stone-deep);
  background: var(--ground);
  box-shadow:
    inset 0 2px 0 var(--gold),
    inset 0 -2px 0 var(--gold),
    inset 0 0 0 1px var(--gold);
}

/* ========================================
   Matrix For
   ======================================== */

.matrix-for {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.matrix-for-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}

.matrix-for-item:hover {
  border-color: var(--accent);
  background: rgba(184, 144, 61, 0.03);
}

.matrix-for-name {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text-bright);
}

.matrix-for-arrow {
  color: var(--text-muted);
  font-size: 1.1rem;
  transition: color 0.2s;
}

.matrix-for-item:hover .matrix-for-arrow {
  color: var(--accent);
}

/* ========================================
   Problem — Tabbed Layout
   ======================================== */

.problem-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: start;
}

.problem-left h2 {
  margin-bottom: 20px;
}

.problem-sub {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 12px;
}

.problem-punchline {
  color: var(--text-bright);
  font-size: 1rem;
  font-weight: 500;
}

.problem-right {
  position: relative;
}

.problem-right input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.problem-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
}

.problem-tabs label {
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 2px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.problem-tabs label:hover {
  color: var(--text);
  border-color: var(--accent);
}

#tab-without:checked ~ .problem-tabs label[for="tab-without"],
#tab-with:checked ~ .problem-tabs label[for="tab-with"] {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-dim);
}

#tab-without:checked ~ .only-with,
#tab-without:checked ~ .flow-graph .only-with,
#tab-without:checked ~ .flow-graph .flow-row .only-with,
#tab-without:checked ~ .flow-graph .flow-row--more .only-with,
#tab-with:checked ~ .only-without,
#tab-with:checked ~ .flow-graph .only-without,
#tab-with:checked ~ .flow-graph .flow-row .only-without,
#tab-with:checked ~ .flow-graph .flow-row--more .only-without {
  display: none;
}

.panel-task {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-bright);
  margin-bottom: 20px;
}

/* Flow graph */
.flow-graph {
  margin-bottom: 24px;
  border-left: 1px solid var(--border);
  padding-left: 0;
}

.flow-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0 7px 16px;
  position: relative;
}

.flow-row::before {
  content: '';
  position: absolute;
  left: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
}

.flow-row--wait {
  padding: 4px 0 4px 16px;
  border-left-style: dashed;
}

.flow-row--wait::before {
  display: none;
}

.flow-row--reply::before {
  background: var(--accent);
}

.flow-actor {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  flex-shrink: 0;
  min-width: 36px;
  text-align: center;
}

.flow-actor--you {
  color: var(--text);
  background: rgba(200, 180, 140, 0.08);
  border: 1px solid var(--border);
}

.flow-actor--other {
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid rgba(184, 144, 61, 0.2);
}

.flow-line {
  width: 20px;
  height: 1px;
  background: var(--border);
  flex-shrink: 0;
}

.flow-action {
  font-size: 0.85rem;
  color: var(--text);
  flex: 1;
}

.flow-target {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.flow-wait {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  font-style: italic;
  letter-spacing: 0.06em;
  opacity: 0.6;
}


.flow-row--more {
  padding: 10px 0 10px 16px;
}

.flow-row--more::before {
  display: none;
}

.flow-more {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

.flow-more--agent {
  color: var(--accent);
  opacity: 0.7;
}

.flow-summary {
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
}

.flow-summary--matrix {
  color: var(--accent);
}

.flow-closing {
  margin-top: 16px;
  font-size: 0.95rem;
  color: var(--text-bright);
  font-weight: 400;
}

.flow-actor--agent {
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid rgba(184, 144, 61, 0.2);
}

.flow-row--agent-label {
  padding: 4px 0 4px 16px;
}

.flow-row--agent-label::before {
  display: none;
}

.flow-agent-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  opacity: 0.7;
}


.timesplit-quote {
  margin-top: 48px;
  text-align: center;
  border: none;
  padding: 24px 0;
  border-top: 1px solid rgba(184, 144, 61, 0.2);
  border-bottom: 1px solid rgba(184, 144, 61, 0.2);
}

.timesplit-quote p {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.8vw, 2rem);
  color: var(--text-bright);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.timesplit-quote cite {
  display: block;
  margin-top: 8px;
  font-size: 0.8rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-style: normal;
  letter-spacing: 0.05em;
}

.timesplit-quip {
  margin-top: 12px;
  font-size: 0.95rem;
  color: var(--accent);
  text-align: center;
  font-weight: 400;
}


/* ========================================
   Cards (How it works)
   ======================================== */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card {
  padding: 36px 32px;
  background: var(--surface);
  border: 1px solid rgba(138, 106, 63, 0.25);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(138, 106, 63, 0.06);
}

.card h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: 14px;
  letter-spacing: -0.005em;
}

.card::before,
.card::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  pointer-events: none;
}

.card::before {
  top: -1px;
  left: -1px;
  border-top: 1px solid var(--accent);
  border-left: 1px solid var(--accent);
}

.card::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
}

.card-highlight {
  border: 1px solid var(--gold-deep);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(184, 144, 61, 0.08), 0 2px 0 rgba(138, 106, 63, 0.1);
}

.card-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold-deep);
  margin-bottom: 18px;
}

.card p:last-child {
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
}

.card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.badge {
  display: inline-block;
  padding: 5px 12px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: rgba(200, 180, 140, 0.05);
  border: 1px solid var(--border);
  border-radius: 2px;
}

.badge-skill {
  color: var(--accent);
  background: var(--accent-dim);
  border-color: rgba(184, 144, 61, 0.2);
}

.badge-custom {
  border-style: dashed;
  color: var(--text-muted);
  background: transparent;
}

.cards-footer {
  text-align: center;
  margin-top: 48px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ========================================
   Self-extending flow
   ======================================== */

.extend-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 48px;
}

.extend-step {
  text-align: center;
  flex: 1;
  max-width: 240px;
}

.extend-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 1rem;
  margin-bottom: 16px;
}

.extend-connector {
  width: 60px;
  height: 1px;
  background: var(--border);
  flex-shrink: 0;
  margin-bottom: 32px;
}

.extend-step p {
  font-size: 0.95rem;
  color: var(--text);
}

.extend-bottom {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.8;
}

/* ========================================
   Principles
   ======================================== */

/* Principles — four inscriptions on one marble tablet. Rendered
   as a 2×2 grid, separated by thin gold hairlines forming a cross.
   No per-cell boxes; the whole tablet wears the plaque language. */
.principles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  background: var(--ground-soft);
  border-top: 2px solid var(--gold-deep);
  border-bottom: 2px solid var(--gold-deep);
  border-left: 1px solid rgba(138, 106, 63, 0.22);
  border-right: 1px solid rgba(138, 106, 63, 0.22);
  box-shadow:
    0 1px 0 rgba(138, 106, 63, 0.18) inset,
    0 -1px 0 rgba(138, 106, 63, 0.18) inset;
}

.principle {
  padding: 36px 40px;
  background: transparent;
  border: none;
  position: relative;
  overflow: visible;
}

/* Horizontal rule: beneath the top-row cells only */
.principle:nth-child(1),
.principle:nth-child(2) {
  border-bottom: 1px solid rgba(138, 106, 63, 0.22);
}

/* Vertical rule: between the two columns */
.principle:nth-child(odd) {
  border-right: 1px solid rgba(138, 106, 63, 0.22);
}

.principle-title {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--stone-deep);
  margin-bottom: 12px;
  font-size: 1.35rem;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.principle p:last-child {
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
}

/* ========================================
   V1 Journey
   ======================================== */

.journey {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 560px;
  margin-bottom: 48px;
}

.journey-step {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}

.journey-step:last-child {
  border-bottom: none;
}

.journey-num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent);
  flex-shrink: 0;
  width: 28px;
}

.journey-step p {
  color: var(--text);
  font-size: 1rem;
}

.journey-footer {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-style: italic;
}

/* ========================================
   For Builders
   ======================================== */

.section-builders {
  text-align: center;
}

.builders-text {
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 24px;
}

.section-builders .btn {
  margin-top: 16px;
}

.team-members {
  display: flex;
  gap: 80px;
  justify-content: center;
  margin-top: 48px;
  padding-top: 36px;
  position: relative;
}

.team-members::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 1px;
  background: var(--gold-deep);
}

.team-member {
  text-align: center;
  position: relative;
}

.team-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--stone-deep);
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}

.team-role {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--gold-deep);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ========================================
   Early Access
   ======================================== */

#early-access {
  text-align: center;
}

.early-sub {
  color: var(--text-muted);
  margin-bottom: 36px;
  margin-top: -24px;
  font-size: 1rem;
}

.email-form {
  display: flex;
  gap: 12px;
  max-width: 480px;
  margin: 0 auto;
}

.email-form input {
  flex: 1;
  padding: 14px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--text-bright);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s;
}

.email-form input::placeholder {
  color: var(--text-muted);
}

.email-form input:focus {
  border-color: var(--accent);
}

/* ========================================
   Footer
   ======================================== */

.footer {
  padding: 72px 0 48px;
  border-top: 2px solid var(--gold-deep);
  background: var(--ground-soft);
  position: relative;
}

.footer::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gold-deep);
  opacity: 0.5;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 48px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(138, 106, 63, 0.22);
}

.footer-logo {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--stone-deep);
  margin-bottom: 10px;
}

.footer-tagline {
  color: var(--stone-soft);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-style: italic;
  max-width: 520px;
  line-height: 1.6;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.footer-links a {
  color: var(--gold-deep);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color 0.2s;
}

.footer-links a:hover {
  color: var(--stone-deep);
}

.footer-copy {
  color: var(--stone-whisper);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
}

/* ========================================
   How It Works — page-specific
   ======================================== */

.hero-short {
  min-height: 70vh;
}

.back-link {
  color: var(--accent);
  text-decoration: none;
  transition: opacity 0.2s;
}

.back-link:hover {
  opacity: 0.7;
}

/* Step headers */
.step-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.step-number {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--accent);
  border: 1px solid rgba(184, 144, 61, 0.3);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-header .section-label {
  margin-bottom: 0;
}

/* Story blocks */
.story-block {
  max-width: 720px;
  margin-bottom: 56px;
}

.story-block h3 {
  margin-bottom: 16px;
}

.story-text {
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--text);
  margin-bottom: 24px;
}

.story-text:last-child {
  margin-bottom: 0;
}

/* Detail cards */
.story-detail {
  margin-top: 48px;
}

.detail-card {
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  max-width: 720px;
}

.detail-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  margin-bottom: 12px;
}

.detail-card p:last-child {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.7;
}

/* Conversation example */
/* Conversation — rendered as a classical ledger: role in the left
   column, speech in the right, a single gold spine running floor
   to ceiling between them. Frame with the plaque language (twin
   gold inlay top & bottom, hairline side edges). */
.conversation-example {
  max-width: 720px;
  margin-top: 48px;
  background: var(--ground-soft);
  border-top: 2px solid var(--gold-deep);
  border-bottom: 2px solid var(--gold-deep);
  border-left: 1px solid rgba(138, 106, 63, 0.22);
  border-right: 1px solid rgba(138, 106, 63, 0.22);
  box-shadow:
    0 1px 0 rgba(138, 106, 63, 0.18) inset,
    0 -1px 0 rgba(138, 106, 63, 0.18) inset,
    0 2px 0 rgba(138, 106, 63, 0.06);
  /* The spine — a vertical gold hairline sitting at the column
     boundary, uninterrupted top to bottom. */
  background-image: linear-gradient(
    to right,
    transparent 0 calc(172px - 1px),
    var(--gold) calc(172px - 1px) 172px,
    transparent 172px
  );
}

.conv-line {
  display: grid;
  grid-template-columns: 140px 1fr;
  column-gap: 48px;
  padding: 22px 32px;
  border-bottom: 1px solid rgba(138, 106, 63, 0.18);
  align-items: baseline;
}

.conv-line:last-child {
  border-bottom: none;
}

.conv-role {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  text-align: right;
  padding: 0;
  border: none;
  background: none;
  align-self: baseline;
}

.conv-you {
  color: var(--stone-soft);
}

/* Agent speaks with authority — darker gold text, no per-row tick;
   the full-height central spine carries the vertical accent now. */
.conv-agent {
  color: var(--gold-deep);
}

.conv-line p {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.7;
}

.conv-footer {
  text-align: center;
  color: var(--stone-soft);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  margin-top: 24px;
  letter-spacing: 0.005em;
}

@media (max-width: 640px) {
  .conversation-example {
    background-image: none;
  }

  .conv-line {
    grid-template-columns: 1fr;
    row-gap: 8px;
  }

  .conv-role {
    text-align: left;
  }
}

/* Flow chain */
.flow-chain {
  max-width: 600px;
  margin: 48px 0;
}

.flow-node {
  padding: 24px 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.flow-node-end {
  border-color: rgba(184, 144, 61, 0.2);
  background: linear-gradient(135deg, var(--surface), rgba(184, 144, 61, 0.03));
}

.flow-node-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 8px;
}

.flow-node-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.flow-arrow {
  text-align: center;
  color: var(--accent);
  font-size: 1.2rem;
  padding: 8px 0;
}

/* Graph insights */
.graph-insights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 48px 0;
}

.insight-card {
  padding: 28px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.insight-metric {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 12px;
}

.insight-card p:last-child {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.graph-footer {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.95rem;
  font-style: italic;
}

/* Trust extras */
.trust-extras {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 24px;
}

.trust-item {
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
}

.trust-title {
  font-weight: 500;
  color: var(--text-bright);
  margin-bottom: 12px;
  font-size: 1rem;
}

.trust-item p:last-child {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Closing section */
.closing-section {
  text-align: center;
}

.closing-text {
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 20px;
  margin-top: -24px;
}

.closing-text + .closing-text {
  margin-top: 0;
}

/* ========================================
   Responsive
   ======================================== */


@media (max-width: 768px) {
  .section {
    padding: 80px 0;
  }

  .matrix-for {
    grid-template-columns: repeat(2, 1fr);
  }

  .problem-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .problem-tabs {
    flex-wrap: wrap;
  }


  .cards {
    grid-template-columns: 1fr;
  }

  .principles {
    grid-template-columns: 1fr;
  }

  .extend-flow {
    flex-direction: column;
    gap: 8px;
  }

  .extend-connector {
    width: 1px;
    height: 32px;
    margin-bottom: 0;
  }

  .email-form {
    flex-direction: column;
  }

  .footer-inner {
    flex-direction: column;
    gap: 32px;
  }

  .graph-insights {
    grid-template-columns: 1fr;
  }

  .trust-extras {
    grid-template-columns: 1fr;
  }

  .conv-line {
    flex-direction: column;
    gap: 8px;
  }

  .grid-bg {
    opacity: 0.5;
  }

  h1 br, h2 br, .hero-sub br, .builders-text br, .extend-bottom br {
    display: none;
  }

  .site-nav {
    top: 12px;
    right: 12px;
    gap: 12px;
  }

  .nav-link {
    font-size: 0.65rem;
    padding: 6px 10px;
  }

  .nav-dropdown-menu {
    right: 0;
  }
}

/* Floating navigation — classical plaque mounted on marble.
   Twin gold inlay top/bottom, vertical gold hairlines between links,
   mono caps lettering for the serif + mono tension. */
.site-nav {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 100;
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--ground-soft);
  border-top: 2px solid var(--gold-deep);
  border-bottom: 2px solid var(--gold-deep);
  padding: 0;
  box-shadow:
    0 1px 0 rgba(138, 106, 63, 0.18) inset,
    0 -1px 0 rgba(138, 106, 63, 0.18) inset,
    0 2px 24px -12px rgba(42, 36, 29, 0.3);
}

.nav-link {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  text-decoration: none;
  padding: 12px 18px;
  transition: color 0.2s, background 0.2s;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  display: inline-flex;
  align-items: center;
  border-left: 1px solid rgba(138, 106, 63, 0.25);
}

.site-nav > .nav-link:first-child,
.site-nav > .nav-dropdown:first-child .nav-link {
  border-left: none;
}

.site-nav > .nav-dropdown {
  border-left: 1px solid rgba(138, 106, 63, 0.25);
}

.site-nav > .nav-dropdown:first-child {
  border-left: none;
}

.site-nav > .nav-dropdown .nav-link {
  border-left: none;
}

/* Active / hover highlight — a 2px gold stripe flush with the
   plaque's bottom inlay, so the highlight reads as the inlay
   brightening beneath the active link. Symmetric, full-width. */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}

.nav-link:hover {
  color: var(--stone-deep);
}

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

.nav-link[aria-current="page"] {
  color: var(--stone-deep);
}

.nav-dropdown {
  position: relative;
  display: flex;
}

.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav-arrow {
  font-size: 0.55rem;
  transition: transform 0.15s;
  color: var(--gold);
}

.nav-dropdown:hover .nav-arrow {
  transform: rotate(180deg);
}

/* Dropdown: seamless extension of the plaque. Aligned flush-right to
   its trigger, same gold-deep top/bottom inlay, same vertical
   hairline edges. A thin vertical tether links it to the trigger. */
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  right: -1px;
  min-width: 100%;
  display: none;
  flex-direction: column;
  background: var(--ground-soft);
  border-top: 2px solid var(--gold-deep);
  border-bottom: 2px solid var(--gold-deep);
  border-left: 1px solid rgba(138, 106, 63, 0.25);
  border-right: 1px solid rgba(138, 106, 63, 0.25);
  margin-top: 2px;
  box-shadow:
    0 1px 0 rgba(138, 106, 63, 0.18) inset,
    0 -1px 0 rgba(138, 106, 63, 0.18) inset,
    0 6px 28px -12px rgba(42, 36, 29, 0.3);
  min-width: 160px;
  padding-top: 4px;
  margin-top: 0;
}

/* Hover gap bridge — so the cursor can travel from trigger to menu
   without the dropdown collapsing. Invisible, just traps the pointer. */
.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 0;
  right: 0;
  height: 6px;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  display: flex;
}

.nav-dropdown-menu a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  text-decoration: none;
  padding: 12px 22px;
  transition: color 0.15s, background 0.15s;
  position: relative;
  text-align: center;
}

/* Dropdown hover highlight — a left gold bar, like a column capital
   accent. Symmetrical with the main nav's bottom-underline motif. */
.nav-dropdown-menu a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.15s ease;
}

.nav-dropdown-menu a:hover {
  color: var(--stone-deep);
  background: var(--ground);
}

.nav-dropdown-menu a:hover::before {
  transform: scaleY(1);
}

.nav-dropdown-menu a:not(:last-child) {
  border-bottom: 1px solid rgba(138, 106, 63, 0.18);
}