/* ==========================================================================
   FERN — The API Interface Layer
   Design tokens
   ========================================================================== */
:root{
  --canopy: #0c1310;
  --understory: #131c17;
  --understory-2: #182219;
  --hairline: #24322a;
  --hairline-soft: #1c2620;
  --ink: #eaf0ea;
  --ink-dim: #b7c4bc;
  --mist: #7e9086;
  --frond: #5fae7f;
  --frond-soft: #3d7358;
  --spore: #a9f0c6;
  --rust: #e2764b;
  --rust-soft: #7a4531;

  --serif: "Fraunces", ui-serif, Georgia, serif;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --max: 860px;
  --pad: clamp(24px, 6vw, 64px);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body{
  margin:0;
  background: var(--canopy);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection{ background: var(--frond-soft); color: var(--spore); }

a{ color: inherit; }

main{
  padding-left: 220px;
}

.section{
  max-width: var(--max);
  margin: 0 auto;
  padding: 120px var(--pad) 0;
  position: relative;
}
.section:last-of-type{ padding-bottom: 140px; }

/* ---------- Frond scroll rail ---------- */
.frond-rail{
  position: fixed;
  left: 96px;
  top: 0;
  bottom: 0;
  width: 24px;
  z-index: 5;
  pointer-events: none;
}
.frond-line{ width: 100%; height: 100%; overflow: visible; }
.frond-track{ stroke: var(--hairline); stroke-width: 2; fill: none; }
.frond-fill{
  stroke: var(--frond);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgba(169,240,198,0.5));
}

/* ---------- Side nav ---------- */
.sidenav{
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 220px;
  padding: 48px 0 48px 40px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.wordmark-link{ text-decoration: none; }
.wordmark{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.01em;
  color: var(--spore);
}
.sidenav ul{
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sidenav a{
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  padding: 7px 0;
  color: var(--mist);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  transition: color 0.25s ease;
}
.sidenav .dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--hairline);
  flex-shrink: 0;
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.sidenav a:hover{ color: var(--ink-dim); }
.sidenav a:hover .dot{ background: var(--frond); }
.sidenav a.is-active{ color: var(--spore); }
.sidenav a.is-active .dot{
  background: var(--spore);
  box-shadow: 0 0 8px rgba(169,240,198,0.7);
  transform: scale(1.4);
}

/* ---------- Typography ---------- */
.eyebrow{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--frond);
  margin: 0 0 28px;
}
.kicker{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--frond);
  margin: 0 0 16px;
}
.hero-title{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  max-width: 15ch;
}
.hero-title-accent{
  font-style: italic;
  color: var(--spore);
  font-weight: 500;
}
.hero-sub{
  font-family: var(--mono);
  font-size: 15px;
  color: var(--ink-dim);
  margin: 0 0 64px;
}
.section-title{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin: 0 0 40px;
  max-width: 20ch;
}
.prose{ max-width: 62ch; margin: 0 0 28px; }
.prose p{ margin: 0 0 16px; color: var(--ink-dim); }
.prose p:last-child{ margin-bottom: 0; }
.prose strong{ color: var(--ink); font-weight: 600; }
.prose em{ color: var(--spore); font-style: italic; }
.prose-strong{ color: var(--ink) !important; font-weight: 500; font-size: 17px; }
.prose-lede{ max-width: 58ch; color: var(--ink-dim); margin: -16px 0 40px; }

.pullquote{
  border-left: 2px solid var(--frond);
  padding: 4px 0 4px 28px;
  margin: 40px 0;
  max-width: 58ch;
}
.pullquote p{
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 2.3vw, 23px);
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
}
.pullquote-alt{ border-left-color: var(--rust); }

code{
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--understory-2);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--spore);
}

/* ---------- Reveal animation ---------- */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ padding-top: 140px; min-height: 92vh; }
.hero-inner{ max-width: 720px; }

.crossover{ margin: 20px 0 72px; }
.crossover-chart{ position: relative; }
.crossover-svg{ width: 100%; height: auto; display: block; }
.grid-line{ stroke: var(--hairline-soft); stroke-width: 1; }
.line-human{
  fill: none; stroke: var(--mist); stroke-width: 2.5;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.line-agent{
  fill: none; stroke: var(--spore); stroke-width: 2.5;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  filter: drop-shadow(0 0 6px rgba(169,240,198,0.45));
}
.line-human.animate, .line-agent.animate{
  animation: draw 1.8s cubic-bezier(.3,.7,.4,1) forwards;
}
@keyframes draw{ to{ stroke-dashoffset: 0; } }
.dot-human{ fill: var(--mist); opacity: 0; }
.dot-agent{ fill: var(--spore); opacity: 0; }
.dot-human.show, .dot-agent.show{ opacity: 1; transition: opacity 0.3s ease 1.6s; }

.crossover-labels{
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 11px; color: var(--mist);
  margin-top: 4px;
}
.crossover-stats{
  display: flex; gap: 48px; margin-top: 28px; flex-wrap: wrap;
}
.stat-num{
  display: block;
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
}
.stat-label{
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mist);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.stat-label::before{
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
}
.agent-label::before{ background: var(--spore); }
.human-label::before{ background: var(--mist); }
.crossover-caption{
  font-family: var(--mono); font-size: 12.5px; color: var(--mist);
  margin-top: 22px; max-width: 46ch; line-height: 1.6;
}

.scroll-cue{
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--mist);
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.04em;
  margin-top: 8px;
  transition: color 0.25s ease;
}
.scroll-cue:hover{ color: var(--spore); }
.scroll-cue svg{ animation: bob 1.8s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(4px); } }

/* ==========================================================================
   THE SHIFT
   ========================================================================== */
.visit-compare{
  display: flex; align-items: center; gap: 32px;
  margin: 8px 0 48px; flex-wrap: wrap;
}
.visit-block{ max-width: 220px; }
.visit-num{
  display: block;
  font-family: var(--serif);
  font-size: clamp(44px, 7vw, 68px);
  line-height: 1;
  color: var(--ink-dim);
  font-weight: 400;
}
.visit-block-agent .visit-num{ color: var(--spore); font-weight: 500; }
.visit-label{
  font-family: var(--mono); font-size: 12px; color: var(--mist);
  display: block; margin-top: 10px; line-height: 1.5;
}
.visit-x{
  font-family: var(--mono); color: var(--rust); font-size: 13px;
}

/* ==========================================================================
   THE PROBLEM — drift board
   ========================================================================== */
.drift-board{
  background: var(--understory);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 28px;
  margin: 32px 0 40px;
}
.drift-source{
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 18px; margin-bottom: 18px;
  border-bottom: 1px dashed var(--hairline);
}
.drift-source-label{ font-family: var(--mono); font-size: 11.5px; color: var(--mist); }
.drift-tag{
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: 20px;
}
.drift-tag.current{ background: rgba(169,240,198,0.12); color: var(--spore); border: 1px solid rgba(169,240,198,0.3); }
.drift-tag.stale{ background: rgba(226,118,75,0.1); color: var(--rust); border: 1px solid rgba(226,118,75,0.28); }
.drift-tag.missing{ background: rgba(126,144,134,0.1); color: var(--mist); border: 1px solid var(--hairline); }
.drift-rows{ display: flex; flex-direction: column; gap: 14px; }
.drift-row{
  display: grid;
  grid-template-columns: 90px 60px 1fr;
  align-items: center;
  gap: 16px;
}
.drift-name{ font-family: var(--mono); font-size: 13px; color: var(--ink); }
.drift-note{ font-family: var(--mono); font-size: 12px; color: var(--mist); }

.consequence-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin: 36px 0;
}
.consequence-card{
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 22px;
  background: var(--understory);
}
.consequence-kicker{
  font-family: var(--mono); font-size: 12px; color: var(--rust);
  margin: 0 0 10px; letter-spacing: 0.02em;
}
.consequence-card p:last-child{ color: var(--ink-dim); margin: 0; font-size: 14.5px; line-height: 1.6; }

/* ==========================================================================
   THE PRODUCT — pipeline + graph
   ========================================================================== */
.pipeline{
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px 6px;
  font-family: var(--mono); font-size: 12.5px;
  margin: 32px 0 44px;
  padding: 18px 20px;
  background: var(--understory);
  border: 1px solid var(--hairline);
  border-radius: 10px;
}
.pipeline-sm{ margin: 16px 0; padding: 14px 16px; }
.pipe-chip{
  padding: 5px 11px; border-radius: 6px;
  background: var(--understory-2);
  color: var(--ink-dim);
  border: 1px solid var(--hairline);
  white-space: nowrap;
}
.pipe-code{ color: var(--ink); border-color: var(--mist); }
.pipe-spec{ color: var(--spore); border-color: rgba(169,240,198,0.35); }
.pipe-face{ color: var(--ink-dim); }
.pipe-catalog{ color: var(--frond); border-color: var(--frond-soft); }
.pipe-check{ color: var(--rust); border-color: var(--rust-soft); }
.pipe-arrow{ color: var(--mist); }
.pipe-dot{ color: var(--hairline); }

.graph-wrap{ margin: 32px 0 44px; }
.graph-svg{ width: 100%; height: auto; overflow: visible; }
.frond-path{
  fill: none; stroke: var(--hairline); stroke-width: 1.5;
  transition: stroke 0.3s ease, stroke-width 0.3s ease;
}
.frond-path.is-active{ stroke: var(--frond); stroke-width: 2; }
.gnode-root circle{
  fill: var(--understory-2); stroke: var(--frond); stroke-width: 1.5;
}
.gnode-root .gnode-title{ fill: var(--ink); }
.gnode-spec rect{
  fill: var(--understory-2); stroke: var(--spore); stroke-width: 1.2;
}
.gnode-spec .gnode-title{ fill: var(--spore); }
.gnode-leaf rect{
  fill: var(--understory); stroke: var(--hairline); stroke-width: 1.2;
  cursor: pointer;
  transition: stroke 0.25s ease, fill 0.25s ease;
}
.gnode-leaf:hover rect, .gnode-leaf:focus rect, .gnode-leaf.is-active rect{
  stroke: var(--frond); fill: var(--understory-2);
}
.gnode-leaf{ outline: none; }
.gnode-title{
  font-family: var(--mono); font-size: 16px; text-anchor: middle;
  fill: var(--ink);
}
.gnode-title-sm{
  font-family: var(--mono); font-size: 14px; text-anchor: middle;
  fill: var(--ink);
}
.gnode-leaf .gnode-title, .gnode-leaf .gnode-title-sm{ text-anchor: start; fill: var(--ink-dim); }
.gnode-leaf:hover .gnode-title, .gnode-leaf:focus .gnode-title,
.gnode-leaf:hover .gnode-title-sm, .gnode-leaf:focus .gnode-title-sm,
.gnode-leaf.is-active .gnode-title, .gnode-leaf.is-active .gnode-title-sm{ fill: var(--ink); }

.graph-detail{
  margin-top: 20px;
  padding: 18px 22px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--understory);
  min-height: 74px;
}
.graph-detail-audience{
  font-family: var(--mono); font-size: 11.5px; color: var(--spore);
  letter-spacing: 0.04em; text-transform: uppercase;
  margin: 0 0 8px;
}
.graph-detail-desc{ margin: 0; color: var(--ink-dim); font-size: 14.5px; }

/* ==========================================================================
   A TUESDAY — PR card
   ========================================================================== */
.pr-card{
  border: 1px solid var(--hairline);
  border-radius: 12px;
  overflow: hidden;
  margin: 8px 0 40px;
  background: var(--understory);
}
.pr-header{
  padding: 16px 22px 6px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.pr-title{ font-weight: 600; font-size: 15px; }
.pr-num{ font-family: var(--mono); color: var(--mist); font-size: 13px; }
.pr-meta{
  padding: 0 22px 16px;
  font-family: var(--mono); font-size: 12px; color: var(--mist);
  border-bottom: 1px solid var(--hairline);
}
.pr-branch{ color: var(--ink-dim); }
.bot-comment{
  display: flex; gap: 14px;
  padding: 20px 22px 24px;
}
.bot-avatar{
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--frond-soft); color: var(--spore);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  flex-shrink: 0;
}
.bot-body{ flex: 1; min-width: 0; }
.bot-name{
  font-family: var(--mono); font-size: 13px; color: var(--ink);
  margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.bot-tag{
  font-size: 10px; color: var(--mist); border: 1px solid var(--hairline);
  padding: 1px 6px; border-radius: 20px;
}
.bot-body p{ margin: 0 0 12px; color: var(--ink-dim); font-size: 14.5px; line-height: 1.6; }
.bot-warning{ color: var(--rust) !important; }
.bot-checklist{
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px;
}
.check-item{
  font-family: var(--mono); font-size: 11.5px;
  padding: 4px 10px; border-radius: 6px;
  background: var(--understory-2);
  border: 1px solid var(--hairline);
  color: var(--ink-dim);
}
.check-item.ok{ color: var(--spore); border-color: rgba(169,240,198,0.25); }
.check-item.warn{ color: var(--rust); border-color: var(--rust-soft); }

.three-questions{
  display: grid; grid-template-columns: repeat(3,1fr); gap: 16px;
  margin: 32px 0;
}
.q-card{
  border-top: 2px solid var(--frond);
  padding-top: 14px;
}
.q-card .q{ font-family: var(--serif); font-style: italic; font-size: 16px; margin: 0 0 8px; color: var(--ink); }
.q-card .a{ font-family: var(--mono); font-size: 12.5px; color: var(--mist); margin: 0; line-height: 1.6; }

/* ==========================================================================
   THE CORE LOOP — classifier
   ========================================================================== */
.classifier{ margin: 24px 0 40px; }
.classifier-toggle{
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--understory); border: 1px solid var(--hairline);
  border-radius: 30px; margin-bottom: 20px;
}
.classifier-btn{
  font-family: var(--mono); font-size: 13px;
  padding: 9px 18px; border-radius: 24px;
  border: none; background: transparent; color: var(--mist);
  cursor: pointer; transition: all 0.25s ease;
}
.classifier-btn.is-active{ background: var(--understory-2); color: var(--ink); }
.classifier-btn[data-mode="breaking"].is-active{ color: var(--rust); }
.classifier-btn[data-mode="additive"].is-active{ color: var(--spore); }

.classifier-stage{ position: relative; }
.classifier-panel{
  display: none;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  overflow: hidden;
  background: var(--understory);
}
.classifier-panel.is-shown{ display: block; }

.diff-box{
  font-family: var(--mono); font-size: 13px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--hairline);
  background: var(--canopy);
}
.diff-line{ padding: 2px 0; white-space: pre; color: var(--ink-dim); }
.diff-add{ color: var(--spore); }
.diff-remove{ color: var(--rust); text-decoration: line-through; opacity: 0.8; }
.diff-tag{
  font-size: 10.5px; margin-left: 8px; padding: 1px 7px; border-radius: 10px;
  background: rgba(169,240,198,0.12); color: var(--spore); border: 1px solid rgba(169,240,198,0.3);
}
.diff-tag.warn{ background: rgba(226,118,75,0.12); color: var(--rust); border-color: var(--rust-soft); }

.classifier-result{
  display: flex; gap: 16px; padding: 20px 22px;
}
.result-icon{
  font-family: var(--mono); font-size: 16px;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.result-ok .result-icon{ color: var(--spore); background: rgba(169,240,198,0.1); }
.result-stop .result-icon{ color: var(--rust); background: rgba(226,118,75,0.1); font-size: 12px; }
.result-title{ margin: 0 0 6px; font-weight: 600; font-size: 14.5px; }
.result-sub{ margin: 0; color: var(--ink-dim); font-size: 13.5px; }
.affected-list{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.affected-pill{
  font-family: var(--mono); font-size: 11.5px;
  padding: 4px 10px; border-radius: 6px;
  background: rgba(226,118,75,0.08); border: 1px solid var(--rust-soft);
  color: var(--rust);
}

/* ==========================================================================
   THE FOUR FACES
   ========================================================================== */
.faces-tabs{
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px;
}
.face-tab{
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 13px;
  padding: 10px 16px; border-radius: 8px;
  background: transparent; border: 1px solid var(--hairline);
  color: var(--ink-dim); cursor: pointer;
  transition: all 0.25s ease;
}
.face-tab-num{ color: var(--mist); font-size: 11px; }
.face-tab:hover{ border-color: var(--frond-soft); color: var(--ink); }
.face-tab.is-active{ background: var(--understory-2); border-color: var(--frond); color: var(--ink); }
.face-tab.is-active .face-tab-num{ color: var(--spore); }

.face-panel{ display: none; }
.face-panel.is-active{ display: block; }
.face-arc{
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-family: var(--serif); font-size: 22px; font-style: italic;
  margin-bottom: 24px; color: var(--ink);
}
.arc-arrow{ color: var(--frond); font-style: normal; }
.arc-dest{ color: var(--spore); }
.arc-role{
  font-family: var(--mono); font-style: normal; font-size: 11px;
  color: var(--mist); border: 1px solid var(--hairline); padding: 3px 10px;
  border-radius: 20px; letter-spacing: 0.04em; text-transform: uppercase;
}
.face-cols{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.face-h{
  font-family: var(--mono); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--frond); margin: 0 0 10px;
}
.face-cols p{ color: var(--ink-dim); font-size: 14.5px; line-height: 1.65; margin: 0 0 12px; }
.face-cols p:last-child{ margin-bottom: 0; }
.face-summary{
  margin-top: 44px; font-family: var(--mono); font-size: 13px;
  color: var(--mist); max-width: 58ch; line-height: 1.7;
}

.terminal{
  border-radius: 8px; overflow: hidden; border: 1px solid var(--hairline);
  margin: 12px 0;
}
.terminal-bar{
  display: flex; gap: 6px; padding: 9px 12px;
  background: var(--understory-2);
}
.terminal-bar span{
  width: 9px; height: 9px; border-radius: 50%; background: var(--hairline);
}
.terminal-body{ background: var(--canopy); padding: 14px 16px; }
.term-line{ font-family: var(--mono); font-size: 12.5px; color: var(--ink-dim); margin-bottom: 6px; }
.term-line:last-child{ margin-bottom: 0; }
.term-prompt{ color: var(--frond); margin-right: 6px; }

/* ==========================================================================
   WHY DEFENSIBLE
   ========================================================================== */
.moat-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin: 8px 0 44px;
}
.moat-card{
  border: 1px solid var(--hairline); border-radius: 12px;
  padding: 22px; background: var(--understory);
}
.moat-card:nth-child(4), .moat-card:nth-child(5){ grid-column: span 1; }
.moat-leaf{ color: var(--frond); font-size: 18px; display: block; margin-bottom: 12px; }
.moat-title{ font-weight: 600; font-size: 14.5px; margin: 0 0 8px; color: var(--ink); }
.moat-card p:last-child{ color: var(--ink-dim); font-size: 13.5px; line-height: 1.6; margin: 0; }

/* ==========================================================================
   MARKET CHART
   ========================================================================== */
.market-chart{
  margin: 32px 0 40px;
  border: 1px solid var(--hairline); border-radius: 12px;
  padding: 26px 26px 20px; background: var(--understory);
}
.market-row{
  display: grid; grid-template-columns: 90px 1fr 90px;
  align-items: center; gap: 16px; margin-bottom: 16px;
}
.market-name{ font-family: var(--mono); font-size: 13px; color: var(--ink); }
.market-bar-track{
  height: 10px; background: var(--understory-2); border-radius: 6px; overflow: hidden;
}
.market-bar{
  height: 100%; width: 0%; border-radius: 6px;
  background: linear-gradient(90deg, var(--frond-soft), var(--frond));
  transition: width 1.4s cubic-bezier(.2,.7,.3,1);
}
.market-val{ font-family: var(--mono); font-size: 12px; color: var(--mist); text-align: right; }
.market-source{
  font-family: var(--mono); font-size: 11px; color: var(--mist);
  margin: 12px 0 0; padding-top: 14px; border-top: 1px dashed var(--hairline);
}

.oss-row{ margin: 32px 0; }
.oss-lede{ color: var(--ink-dim); margin: 0 0 14px; }
.oss-chips{ display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.oss-chip{
  font-family: var(--mono); font-size: 12.5px;
  padding: 6px 14px; border-radius: 20px;
  border: 1px solid var(--hairline); color: var(--ink-dim);
}
.oss-row p{ color: var(--ink-dim); font-size: 14.5px; }

/* ==========================================================================
   SEQUENCE / ROADMAP
   ========================================================================== */
.phase-tabs{ display: flex; gap: 10px; margin-bottom: 32px; flex-wrap: wrap; }
.phase-tab{
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: 1px solid var(--hairline);
  border-radius: 10px; padding: 12px 18px; cursor: pointer;
  transition: all 0.25s ease;
}
.phase-letter{
  font-family: var(--serif); font-size: 20px; font-style: italic; color: var(--mist);
}
.phase-name{ font-family: var(--mono); font-size: 12.5px; color: var(--ink-dim); }
.phase-tab:hover{ border-color: var(--frond-soft); }
.phase-tab.is-active{ border-color: var(--frond); background: var(--understory); }
.phase-tab.is-active .phase-letter{ color: var(--spore); }
.phase-tab.is-active .phase-name{ color: var(--ink); }

.phase-panel{ display: none; }
.phase-panel.is-active{ display: block; }
.phase-panel h3{
  font-family: var(--serif); font-weight: 400; font-size: 22px;
  margin: 0 0 20px; color: var(--ink);
}
.phase-list{ margin: 0 0 24px; padding-left: 20px; }
.phase-list li{ color: var(--ink-dim); margin-bottom: 12px; line-height: 1.65; font-size: 14.5px; }
.phase-list li::marker{ color: var(--frond); }
.phase-list li strong{ color: var(--ink); }
.phase-exit{
  font-size: 13.5px; color: var(--ink-dim); line-height: 1.6;
  border-top: 1px dashed var(--hairline); padding-top: 16px; margin: 0;
}
.phase-exit span{
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--rust); display: block; margin-bottom: 6px;
}

/* ==========================================================================
   CLOSE
   ========================================================================== */
.close-section{ text-align: left; }
.close-line{
  font-family: var(--serif); font-weight: 500; font-style: italic;
  font-size: clamp(28px, 4.4vw, 44px); color: var(--spore);
  margin: 0 0 20px; line-height: 1.2;
}
.close-sub{ max-width: 56ch; color: var(--ink-dim); font-size: 16px; line-height: 1.7; margin: 0 0 64px; }
.close-footer{
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 28px; border-top: 1px solid var(--hairline);
  flex-wrap: wrap; gap: 12px;
}
.wordmark-lg{ font-size: 26px; }
.close-authors{ font-family: var(--mono); font-size: 12px; color: var(--mist); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 980px){
  .face-cols{ grid-template-columns: 1fr; gap: 20px; }
  .moat-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px){
  main{ padding-left: 0; }
  .frond-rail{ display: none; }
  .sidenav{
    position: fixed; left: 0; right: 0; top: 0; height: auto;
    width: 100%; flex-direction: row; align-items: center;
    padding: 14px 20px; background: rgba(12,19,16,0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--hairline);
    gap: 20px;
  }
  .sidenav ul{ display: none; }
  .section{ padding-top: 100px; }
  .hero{ padding-top: 120px; }
  .consequence-grid{ grid-template-columns: 1fr; }
  .three-questions{ grid-template-columns: 1fr; gap: 22px; }
  .moat-grid{ grid-template-columns: 1fr; }
  .drift-row{ grid-template-columns: 70px 50px 1fr; gap: 10px; }
}

@media (max-width: 520px){
  .visit-compare{ flex-direction: column; align-items: flex-start; gap: 16px; }
  .crossover-stats{ gap: 28px; }
}