/* OLIVE — dedicated feature pages. Visual-first, low-density. */

/* Black feature mode: page, cards and chrome only. The homepage and the
   olive narrative keep the global Terminal Luxe tokens. */
body[data-theme="black"] {
  --bg: #050604;
  --surface: #0B0D09;
  --raised: #11140E;
  --line: #1B2117;
  --line-strong: #2A3221;
  --text-4: #7F8468;
}
body[data-theme="black"] .nav--solid {
  background: rgba(5, 6, 4, .82);
}
body[data-theme="black"] .fig-node {
  fill: var(--bg);
}

.feature-hero {
  position: relative;
  padding-block: 160px 54px;
}
.feature-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
  gap: clamp(40px, 5vw, 76px);
  align-items: center;
}
.feature-hero__copy { min-width: 0; }
.feature-hero__crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--text-3);
  margin-bottom: 28px;
}
.feature-hero__crumb a {
  color: var(--text-2);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
  transition: color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}
.feature-hero__crumb a:hover { color: var(--signal); border-color: var(--signal); }
.feature-hero__kicker { color: var(--signal); margin-bottom: 18px; }
.feature-hero__title {
  max-width: 760px;
  margin-bottom: 22px;
  color: var(--cream);
  font-size: clamp(40px, 5.2vw, 76px);
  font-weight: 500;
  line-height: .99;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.feature-hero__lede { max-width: 560px; color: var(--text-2); }
.feature-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.feature-figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.feature-figure__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.feature-figure__bar .mono { font-size: 9px; color: var(--text-3); }
.feature-figure__bar .mono:first-child { color: var(--signal); }
.feature-figure__canvas { overflow: hidden; }
.feature-figure__caption {
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  color: var(--text-3);
  font-size: 9px;
}
.feature-schematic { display: block; width: 100%; height: auto; }

.feature-schematic .fig-line,
.feature-schematic .fig-line-soft,
.feature-schematic .fig-node,
.feature-schematic .fig-ring,
.feature-schematic .fig-seg { vector-effect: non-scaling-stroke; }
.fig-line { fill: none; stroke: var(--olive); stroke-width: 1; }
.fig-line-soft { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.fig-node { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1; }
.fig-node--core { stroke: var(--signal); }
.fig-dot { fill: var(--signal); }
.fig-ring { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.fig-seg { fill: none; stroke-width: 14; }
.fig-seg--signal { stroke: var(--signal); }
.fig-seg--olive { stroke: var(--olive); }
.fig-seg--line { stroke: var(--line-strong); }
.fig-label {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 500;
  fill: var(--cream);
}
.fig-label--sm { font-size: 14px; }
.fig-label--center { text-anchor: middle; }
.fig-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .1em;
  fill: var(--text-3);
  text-transform: uppercase;
}
.fig-mono--signal { fill: var(--signal); }
.fig-mono--gate { font-size: 10px; letter-spacing: .05em; }
.fig-spark { fill: none; stroke: var(--signal); stroke-width: 1.2; }

.feature-meta-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 44px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.feature-meta-strip__item { display: flex; flex-direction: column; gap: 5px; }
.feature-meta-strip__item .mono { color: var(--text-3); font-size: 9px; }
.feature-meta-strip__item span:last-child { color: var(--text-2); font-size: 14px; }

.feature-section { position: relative; }
.feature-cap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.feature-cap {
  padding: 22px 22px 26px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.feature-glyph {
  display: block;
  width: 26px;
  height: 26px;
  margin-bottom: 20px;
  color: var(--signal);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}
.feature-cap h3 {
  margin: 0 0 8px;
  color: var(--cream);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.feature-cap p { max-width: 34ch; color: var(--text-2); font-size: 15px; line-height: 1.5; }

.feature-use-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 24px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.feature-use-row > .mono { flex: none; color: var(--signal); }
.feature-use-row ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  list-style: none;
}
.feature-use-row li { color: var(--text-2); font-size: 14px; }
.feature-use-row li + li { padding-left: 24px; border-left: 1px solid var(--line-strong); }

.feature-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  position: relative;
  padding-top: 28px;
  border-top: 1px solid var(--line-strong);
}
.feature-flow__node { position: relative; padding-top: 18px; }
.feature-flow__dot {
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border: 1px solid var(--signal);
  border-radius: 50%;
  background: var(--surface);
}
.feature-flow__node .mono { color: var(--signal); font-size: 9px; }
.feature-flow__node h3 {
  margin: 12px 0 6px;
  color: var(--cream);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.15;
}
.feature-flow__node p { max-width: 24ch; color: var(--text-2); font-size: 15px; line-height: 1.45; }

.feature-rwa {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.feature-rwa__intro p:first-child { color: var(--signal); }
.feature-rwa__intro h2 {
  max-width: 12ch;
  margin-top: 16px;
  color: var(--cream);
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.025em;
}
.feature-rwa__intro p:last-child {
  max-width: 38ch;
  margin-top: 16px;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.5;
}
.feature-terms {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.feature-terms__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.feature-terms__bar .mono { font-size: 9px; color: var(--text-3); }
.feature-terms__bar .mono:first-child { color: var(--signal); }
.feature-terms__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.feature-terms__row:last-child { border-bottom: 0; }
.feature-terms__row .mono { color: var(--text-3); font-size: 9px; }
.feature-terms__row span:last-child { color: var(--cream); font-size: 14px; line-height: 1.35; text-align: right; }
.feature-rwa__note {
  max-width: 64ch;
  margin-top: 16px;
  color: var(--text-3);
  font-size: 11px;
  line-height: 1.5;
}

.feature-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.feature-control h2 { max-width: 24ch; color: var(--cream); font-size: 26px; font-weight: 500; line-height: 1.12; letter-spacing: -.015em; }
.feature-control p { max-width: 54ch; margin-top: 8px; color: var(--text-2); font-size: 15px; line-height: 1.45; }
.feature-control .tlink { flex: none; }

.feature-faq { border-top: 1px solid var(--line); }
.feature-faq details { border-bottom: 1px solid var(--line); }
.feature-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  color: var(--cream);
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  line-height: 1.35;
}
.feature-faq summary::-webkit-details-marker { display: none; }
.feature-faq summary::after {
  content: "+";
  flex: none;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}
.feature-faq details[open] summary::after { content: "−"; color: var(--signal); }
.feature-faq details p {
  max-width: 74ch;
  padding: 0 36px 18px 0;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.5;
}

.feature-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.feature-related-card {
  display: flex;
  flex-direction: column;
  min-height: 146px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out);
}
.feature-related-card:hover { border-color: var(--signal); background: var(--surface); }
.feature-related-card .mono { color: var(--signal); font-size: 9px; }
.feature-related-card h3 { margin: 14px 0 6px; color: var(--cream); font-size: 19px; font-weight: 500; line-height: 1.2; }
.feature-related-card p { color: var(--text-3); font-size: 14px; line-height: 1.4; }
.feature-related-card svg {
  margin-top: auto;
  color: var(--text-3);
  transition: color var(--motion-fast) var(--ease-out), transform var(--motion-standard) var(--ease-out);
}
.feature-related-card:hover svg { color: var(--signal); transform: translateX(4px); }

.feature-close {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  gap: 48px;
  align-items: end;
}
.feature-close h2 {
  max-width: 22ch;
  color: var(--cream);
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.025em;
}
.feature-close .body-l { max-width: 54ch; margin-top: 16px; }
.feature-close__side { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.feature-close__side .mono { color: var(--text-3); font-size: 9px; }

@media (max-width: 1099px) {
  .feature-hero { padding-top: 144px; }
  .feature-hero__inner { grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; }
  .feature-hero__title { font-size: clamp(44px, 5vw, 64px); }
}

@media (max-width: 899px) {
  .feature-hero { padding-block: 132px 48px; }
  .feature-hero__inner { grid-template-columns: 1fr; gap: 36px; }
  .feature-figure { max-width: 620px; }
  .feature-meta-strip { margin-top: 36px; }
  .feature-cap-grid { grid-template-columns: 1fr; }
  .feature-cap { padding: 22px 0; border-right: 0; }
  .feature-flow {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0 0 0 24px;
    border-top: 0;
    border-left: 1px solid var(--line-strong);
  }
  .feature-flow__node { padding: 0 0 24px; }
  .feature-flow__dot { top: 4px; left: -29px; }
  .feature-rwa, .feature-close { grid-template-columns: 1fr; gap: 28px; }
  .feature-related-grid { grid-template-columns: 1fr; }
  .feature-related-card { min-height: 0; }
  .feature-control { flex-direction: column; align-items: flex-start; gap: 18px; }
}

@media (max-width: 620px) {
  .feature-hero { padding-top: 116px; }
  .feature-hero__title { font-size: 40px; }
  .feature-hero__actions .btn { width: 100%; }
  .feature-meta-strip { grid-template-columns: 1fr; gap: 12px; }
  .feature-use-row ul { width: 100%; }
  .feature-use-row li + li { padding-left: 0; border-left: 0; }
  .feature-rwa__intro h2 { max-width: 12ch; }
  .feature-faq summary { font-size: 16px; }
  .feature-close h2 { font-size: 32px; }
  .feature-close__side { width: 100%; }
  .feature-close__side .btn { width: 100%; }
}