/* ============================================================================
   about.css — Sections specific to /about. Loaded after site.css.
   ========================================================================== */

/* Subnav (sticky chapter tabs under the main nav) */
.subnav {
  position: sticky; top: 56px; z-index: 48;
  background: rgba(7,15,7,0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
  overflow-x: auto;
}
.subnav .inner {
  display: flex; align-items: center; gap: 32px;
  max-width: 1200px; margin: 0 auto;
  padding: 14px 32px;
  font-family: var(--font-sans); font-weight: 700; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.16em;
}
.subnav a {
  color: var(--text-mute); text-decoration: none; border: none;
  white-space: nowrap;
  transition: color 200ms ease;
}
.subnav a:hover, .subnav a.active { color: var(--accent); }

/* About hero — quiet, just sets the tone */
.about-hero {
  padding: 144px 32px 96px;
  background:
    radial-gradient(ellipse 1200px 700px at 50% 0%, rgba(0,190,90,0.06), transparent 60%),
    var(--bg);
  text-align: center;
  position: relative;
}
.about-hero .display {
  font-family: var(--font-sans);
  font-size: clamp(48px, 7vw, 96px); font-weight: 800;
  letter-spacing: -0.05em; line-height: 1.0;
  color: var(--text); max-width: 900px; margin: 32px auto 0;
}
.about-hero .display .accent { color: var(--accent); }
.about-hero .lede {
  margin: 36px auto 0; max-width: 680px;
  font-size: 20px; line-height: 1.65; color: var(--text-dim);
  letter-spacing: -0.01em;
}
.about-hero .gbar { max-width: 480px; margin: 48px auto 0; }

/* Chapter divider — eyebrow + section number */
.chapter {
  padding: 80px 32px;
  border-top: 1px solid var(--line-soft);
}
.chapter.no-border { border-top: none; }
.chapter.band { background: var(--bg-forest); }
.chapter .container { max-width: 1100px; margin: 0 auto; }
.chapter .container.tight { max-width: 820px; }
.chapter .chapter-head {
  display: flex; gap: 64px; align-items: flex-start;
  margin-bottom: 64px;
}
.chapter .chapter-head .num {
  font-family: var(--font-sans); font-size: 13px; font-weight: 700;
  color: var(--accent); letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-top: 10px;
  white-space: nowrap;
}
.chapter .chapter-head .text { flex: 1; }
.chapter .chapter-head h2 {
  font-family: var(--font-sans);
  font-size: clamp(34px, 4.4vw, 56px); font-weight: 700;
  color: var(--text); letter-spacing: -0.045em; line-height: 1.02;
  margin: 0;
}
.chapter .chapter-head h2 .dim { color: var(--text-dim); }
.chapter .chapter-head h2 .accent { color: var(--accent); }
.chapter .chapter-head .lede {
  margin-top: 24px; max-width: 680px;
  font-size: 18px; line-height: 1.65; color: var(--text-dim);
  letter-spacing: -0.01em;
}

/* ============================================================================
   Operating stack — Earth / Humans / Markets
   ========================================================================== */
.op-stack { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: 4px; overflow: hidden; }
.op-tier { background: var(--bg); padding: 36px 28px; position: relative; }
.op-tier .num {
  font-family: var(--font-sans); font-weight: 700; font-size: 11px;
  color: var(--accent); text-transform: uppercase; letter-spacing: 0.16em;
}
.op-tier h3 {
  margin: 12px 0 14px;
  font-family: var(--font-sans); font-size: 32px; font-weight: 700;
  letter-spacing: -0.04em; color: var(--text); line-height: 1;
}
.op-tier .body { font-size: 14px; color: var(--text-dim); line-height: 1.6; }

/* ============================================================================
   Problem — pull-quote + editorial receipts
   ========================================================================== */
.receipts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px; background: var(--line-soft); margin-top: 64px;
  border: 1px solid var(--line-soft); border-radius: 4px; overflow: hidden;
}
.receipt {
  background: var(--bg);
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.receipt .big {
  font-family: var(--font-sans); font-size: 48px; font-weight: 800;
  color: var(--text); letter-spacing: -0.04em; line-height: 1;
  font-feature-settings: "tnum" on;
}
.receipt .big.accent { color: var(--accent); }
.receipt .big.warn  { color: #DE6E5A; }
.receipt .label {
  font-family: var(--font-sans); font-size: 14px; color: var(--text-dim);
  letter-spacing: -0.01em; line-height: 1.6;
}
.receipt .label em {
  color: var(--text-mute); font-style: normal;
  font-size: 12px;
  display: inline-block;
  border-left: 1px solid var(--line-soft);
  padding-left: 8px;
  margin-left: 2px;
}

/* Chapter coda — closing punchline line that summarises a chapter */
.chapter-coda {
  max-width: 760px; margin: 64px auto 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--line-soft);
  text-align: center;
}
.chapter-coda p {
  font-family: var(--font-sans);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.025em; line-height: 1.35;
  margin: 0;
}

/* ============================================================================
   Card — NRD / Earth Credit / etc.
   ========================================================================== */
.deck-card {
  position: relative;
  background: linear-gradient(180deg, rgba(45,90,39,0.10) 0%, rgba(45,90,39,0.04) 100%);
  border: 1px solid rgba(0,190,90,0.18);
  border-radius: 6px;
  padding: 48px 56px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  overflow: hidden;
}
.deck-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg,#00BE5A 0%,#32C8FF 100%);
}
.deck-card .lhs { display: flex; flex-direction: column; gap: 14px; }
.deck-card .pretitle {
  font-family: var(--font-sans); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent);
}
.deck-card h3 {
  font-family: var(--font-sans); font-size: clamp(36px, 4.2vw, 56px);
  font-weight: 700; letter-spacing: -0.04em; line-height: 1.02; color: var(--text);
  margin: 0;
}
.deck-card h3 .accent { color: var(--accent); }
.deck-card .body { font-size: 17px; color: var(--text-dim); line-height: 1.65; letter-spacing: -0.01em; }
.deck-card .rhs { display: flex; flex-direction: column; gap: 12px; }
.deck-card .feature {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px;
  background: rgba(7,15,7,0.55);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
}
.deck-card .feature .ic {
  flex-shrink: 0; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  background: rgba(0,190,90,0.08);
  border: 1.5px solid rgba(0,190,90,0.40);
  border-radius: 50%;
  font-family: var(--font-sans); font-size: 14px; font-weight: 700;
  letter-spacing: -0.01em;
  font-feature-settings: "tnum" on;
}
.deck-card .feature .title {
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  color: var(--text); letter-spacing: -0.01em; margin-bottom: 4px;
}
.deck-card .feature .text {
  font-size: 13px; color: var(--text-dim); line-height: 1.55;
}

/* ============================================================================
   Spectrum scroll-snap — six dimensions
   ========================================================================== */
.spectrum-shell {
  position: relative;
  margin-top: 56px;
  background: rgba(7,15,7,0.65);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  overflow: hidden;
}
.spectrum-rail {
  height: 6px; display: flex;
}
.spectrum-rail .seg { flex: 1; transition: opacity 240ms ease; }
.spectrum {
  display: flex; flex-direction: row;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.spectrum::-webkit-scrollbar { display: none; }
.spec-panel {
  flex: 0 0 100%;
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  padding: 48px 112px;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  position: relative;
  min-height: 460px;
  border-right: 1px solid var(--line-soft);
}

/* Floating carousel arrows — large, central, always visible */
.spec-arrow {
  position: absolute; top: calc(50% + 3px); transform: translateY(-50%);
  z-index: 4;
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(7,15,7,0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 22px; font-weight: 500;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.spec-arrow:hover { background: rgba(0,190,90,0.18); border-color: var(--accent); color: var(--accent); }
.spec-arrow:active { transform: translateY(-50%) scale(0.94); }
.spec-arrow.prev { left: 28px; }
.spec-arrow.next { right: 28px; }
.spec-arrow:disabled,
.spec-arrow[aria-disabled="true"] {
  opacity: 0.3; cursor: default; pointer-events: none;
}
.spec-panel:last-child { border-right: none; }
.spec-panel .lhs { display: flex; flex-direction: column; gap: 18px; }
.spec-panel .lhs .code-line {
  font-family: var(--font-sans); font-weight: 700; font-size: 12px; 
  text-transform: uppercase; letter-spacing: 0.16em;
}
.spec-panel .lhs .name {
  font-family: var(--font-sans); font-size: clamp(40px, 4.2vw, 64px);
  font-weight: 800; letter-spacing: -0.04em; line-height: 1.0;
  color: var(--text); margin: 0;
}
.spec-panel .lhs .desc {
  font-size: 17px; color: var(--text-dim); line-height: 1.65; max-width: 460px; letter-spacing: -0.01em;
}
.spec-panel .lhs .meta {
  margin-top: auto;
  font-family: var(--font-sans); font-weight: 700; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-mute);
}
.spec-panel .rhs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  align-content: start;
}
.spec-panel .method {
  background: rgba(7,15,7,0.7);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  padding: 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.spec-panel .method .v {
  font-family: var(--font-sans); font-size: 16px; font-weight: 700;
  color: var(--text); letter-spacing: -0.025em; line-height: 1.25;
}
.spec-panel .method .src {
  font-family: var(--font-sans); font-size: 13px;
  color: var(--text-dim); letter-spacing: -0.005em; line-height: 1.5;
}

.spec-controls {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px 28px;
  background: rgba(7,15,7,0.85);
  border-top: 1px solid var(--line-soft);
}
.spec-status {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--font-sans); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-mute);
}
.spec-status .name {
  font-family: var(--font-sans); font-size: 15px; font-weight: 700;
  text-transform: none; letter-spacing: -0.01em; color: var(--text);
}
.spec-status .counter { color: var(--text-mute); }
.spec-dots { display: flex; gap: 10px; align-items: center; }
.spec-dots .dot {
  width: 10px; height: 10px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: transparent;
  transition: all 200ms ease;
  padding: 0;
}
.spec-dots .dot.active { width: 32px; border-radius: 999px; border-color: transparent; }

/* ============================================================================
   Lifecycle bar — three clear boxes with floating arrows between
   ========================================================================== */
.lifecycle-bar {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  margin-top: 64px;
  position: relative;
}
.lc-step {
  position: relative;
  padding: 40px 36px 36px;
  background: rgba(45,90,39,0.06);
  border: 1px solid rgba(0,190,90,0.16);
  border-radius: 6px;
  display: flex; flex-direction: column; gap: 16px;
  transition: border-color 240ms ease, background 240ms ease;
}
.lc-step:hover { border-color: rgba(0,190,90,0.45); background: rgba(45,90,39,0.10); }
.lc-step .word {
  font-family: var(--font-sans); font-size: clamp(40px, 5vw, 64px);
  font-weight: 800; color: var(--text); letter-spacing: -0.045em; line-height: 0.95;
  margin: 0;
}
.lc-step .word.retire { color: var(--accent); }
.lc-step .desc {
  font-family: var(--font-sans); font-size: 15px;
  color: var(--text-dim); line-height: 1.6; letter-spacing: -0.01em;
  margin: 0;
}
.lc-step .stamp {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  color: var(--accent); letter-spacing: -0.005em;
  margin-top: auto; padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.lc-arrow {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg-forest);
  border: 1px solid rgba(0,190,90,0.45);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 18px; color: var(--accent);
  pointer-events: none;
}
.lc-arrow.a1 { left: 33.33%; }
.lc-arrow.a2 { left: 66.66%; }

/* ============================================================================
   Do / do not panel
   ========================================================================== */
.do-panel {
  margin-top: 56px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft); border-radius: 6px; overflow: hidden;
}
.do-side {
  background: var(--bg);
  padding: 40px 40px 44px;
}
.do-side .head {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-sans); font-weight: 700; font-size: 11px; 
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--accent);
  margin-bottom: 24px;
}
.do-side.x .head { color: #DE6E5A; }
.do-side .head .mk {
  width: 22px; height: 22px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid currentColor;
}
.do-side ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.do-side li {
  display: flex; gap: 12px; align-items: flex-start;
}
.do-side li .mk {
  flex-shrink: 0; font-family: var(--font-mono); width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent); font-weight: 600; font-size: 13px;
}
.do-side.x li .mk { color: #DE6E5A; }
.do-side li .body {
  display: flex; flex-direction: column; gap: 4px;
}
.do-side li .body .label {
  font-family: var(--font-sans); font-size: 16px; font-weight: 600;
  color: var(--text); letter-spacing: -0.01em;
}
.do-side li .body .why {
  font-size: 13px; color: var(--text-dim); line-height: 1.55;
}

/* ============================================================================
   Ecosystem — five entities radiating from Landseed PBC
   ========================================================================== */
.ecosystem { display: flex; flex-direction: column; gap: 12px; margin-top: 56px; }
.entity {
  display: grid; grid-template-columns: 220px 1fr 200px;
  gap: 32px; align-items: center;
  padding: 24px 28px;
  background: rgba(45,90,39,0.06);
  border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
  transition: background 200ms ease, transform 200ms ease;
}
.entity.primary { background: rgba(0,190,90,0.10); border-left-width: 4px; }
.entity:hover { background: rgba(45,90,39,0.14); }
.entity .name {
  font-family: var(--font-sans); font-size: 22px; font-weight: 700;
  color: var(--text); letter-spacing: -0.03em; line-height: 1.1;
}
.entity .name .badge {
  display: block; margin-top: 6px;
  font-family: var(--font-sans); font-weight: 700; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent);
}
.entity .desc { font-size: 15px; color: var(--text-dim); line-height: 1.6; }
.entity .when {
  display: flex; flex-direction: column; gap: 4px; text-align: right;
}
.entity .when .ph {
  font-family: var(--font-sans); font-weight: 700; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-mute);
}
.entity .when .ph.accent { color: var(--accent); }
.entity .when .role { font-family: var(--font-sans); font-size: 12px; color: var(--text); }

/* ============================================================================
   Flywheel — split layout, matches the home page version exactly
   ========================================================================== */
.flywheel-wrap {
  position: relative; height: 620px; margin: 0;
  display: flex; align-items: center; justify-content: center;
}
.flywheel { position: relative; width: 520px; height: 520px; }
.fw-ambient {
  position: absolute; inset: -10%;
  background: radial-gradient(circle at 50% 50%, rgba(0,190,90,0.10) 0%, transparent 60%);
  border-radius: 50%; pointer-events: none;
}
.fw-orbit {
  position: absolute; inset: 0;
  animation: fwSpin 90s linear infinite;
  pointer-events: none;
}
@keyframes fwSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.fw-orbit svg { width: 100%; height: 100%; display: block; }
.fw-orbit .orbit-line {
  stroke-dasharray: 6 8;
  animation: orbitDash 60s linear infinite;
}
@keyframes orbitDash { to { stroke-dashoffset: -800; } }
.fw-center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 160px; height: 160px;
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
}
.fw-center img {
  width: 108px; height: 108px;
  filter: drop-shadow(0 0 48px rgba(0,190,90,0.25));
}
.fw-node {
  position: absolute;
  width: 200px;
  padding: 12px 14px;
  background: rgba(7,15,7,0.92);
  border: 1px solid rgba(0,190,90,0.20);
  border-radius: 6px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 32px rgba(0,0,0,0.45), 0 0 1px rgba(0,190,90,0.10);
  z-index: 2;
  transform: translate(-50%, -50%);
  opacity: 0; animation: nodeReveal 700ms cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes nodeReveal { to { opacity: 1; } }
.fw-node.n1 { top: 0%;   left: 50%; animation-delay: 200ms; }
.fw-node.n2 { top: 30%;  left: 100%; animation-delay: 320ms; }
.fw-node.n3 { top: 70%;  left: 100%; animation-delay: 440ms; }
.fw-node.n4 { top: 100%; left: 50%; animation-delay: 560ms; }
.fw-node.n5 { top: 70%;  left: 0%;  animation-delay: 680ms; }
.fw-node.n6 { top: 30%;  left: 0%;  animation-delay: 800ms; }
.fw-node .num {
  font-family: var(--font-sans); font-weight: 700; font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-mute);
  margin-bottom: 2px;
}
.fw-node h4 {
  font-family: var(--font-sans); font-size: 14px; font-weight: 800;
  letter-spacing: -0.02em; margin: 0 0 4px; line-height: 1.15;
}
.fw-node p { font-size: 11px; color: var(--text-dim); line-height: 1.45; margin: 0; }

/* Split layout — chapter head on left, wheel on right */
#flywheel .container {
  display: grid; grid-template-columns: minmax(320px, 1fr) minmax(640px, 1.4fr);
  gap: 48px; align-items: center;
  max-width: 1300px;
}
#flywheel .chapter-head {
  display: block; margin: 0; max-width: 480px;
}
#flywheel .chapter-head .num {
  margin-bottom: 14px;
}
#flywheel .chapter-head h2 {
  font-size: clamp(32px, 3.4vw, 44px);
}
@media (max-width: 1080px) {
  #flywheel .container { grid-template-columns: 1fr; }
  #flywheel .chapter-head { max-width: none; }
}
.fw-legend {
  margin-top: 32px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px;
  max-width: 980px; margin-left: auto; margin-right: auto;
}
.fw-legend .row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  background: rgba(45,90,39,0.04);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
}
.fw-legend .row .swatch {
  width: 4px; height: 36px; border-radius: 1px; flex-shrink: 0; margin-top: 2px;
}
.fw-legend .row .title {
  font-family: var(--font-sans); font-size: 13px; font-weight: 700;
  letter-spacing: -0.01em;
}
.fw-legend .row .sub {
  font-size: 11px; color: var(--text-dim); line-height: 1.4;
}

/* ============================================================================
   Closing
   ========================================================================== */
.about-closing {
  padding: 160px 32px 180px;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
  text-align: center;
}
.about-closing .gbar { max-width: 480px; margin: 64px auto 0; }