.view-directory { position: relative; background: var(--surface); box-shadow: 0 0 0 100vmax var(--surface); clip-path: inset(0 -100vmax); }
.view-directory::after { content: ''; position: absolute; left: -100vmax; right: -100vmax; bottom: 0; height: 1px; background: var(--border); }
.view-directory { display: flex; flex-wrap: wrap; gap: var(--space-4); padding-block: var(--space-3); }
.view-directory a { font-size: 14px; font-weight: 650; text-decoration: none; }
.feature-section { border-bottom: 1px solid var(--border); }
.feature-section:nth-of-type(odd) { background: linear-gradient(145deg, var(--green-glow), transparent 65%); }
.feature-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: center; }
.feature-reverse .feature-copy { order: 2; } .feature-reverse .feature-figure { order: 1; }
.feature-number { display: block; color: var(--secondary); font: 20px var(--mono); margin-bottom: var(--space-3); }
.feature-copy > p { color: var(--muted); margin-top: var(--space-3); }
.annotation-list { counter-reset: annotations; list-style: none; padding: 0; margin: var(--space-4) 0 0; }
.annotation-list li { position: relative; counter-increment: annotations; padding: 16px 0 16px 42px; border-top: 1px solid var(--border); font-size: 15px; }
.annotation-list li::before { content: counter(annotations); position: absolute; top: 16px; left: 0; border: 1px solid var(--secondary); color: var(--secondary); border-radius: 50%; width: 26px; height: 26px; text-align: center; font: 13px/25px var(--mono); }
.annotation-list b, .annotation-list span { display: block; }
.annotation-list span { color: var(--muted); margin-top: 4px; }
.plain-facts { margin-block: var(--space-4); }
.plain-facts > div { display: grid; grid-template-columns: 60px 1fr; gap: 16px; border-top: 1px solid var(--border); padding-block: 14px; font-size: 15px; }
.plain-facts dt { color: var(--secondary); font-weight: 650; }
.plain-facts dd { color: var(--muted); margin: 0; }
.feature-figure { padding-block: 10px; }
.feature-figure > figcaption { text-align: center; }
.mock-filter.is-off .mock-input { opacity: .45; }
.mock-filter.dragging { opacity: .65; border-style: dashed; }
.mock-filter.drag-over { border-color: var(--secondary); box-shadow: 0 -3px 0 var(--secondary); }
.mock-site-list > div { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding-block: 10px; border-bottom: 1px solid var(--border); }
.mock-site-list small { color: var(--muted); flex: 1; }
.mock-site-list .site-controls { display: flex; gap: 4px; width: 100%; }
.site-controls .chip { font-size: 10px; padding: 4px 8px; }
.sample-regions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sample-regions .chip { justify-content: space-between; padding: 8px; font-size: 11px; }
.sample-regions .chip span { font: 10px var(--mono); opacity: .8; }
.wider-feature .section-heading { margin-bottom: var(--space-5); }
@media (max-width: 760px) {
  .feature-layout { grid-template-columns: 1fr; gap: var(--space-4); }
  .feature-reverse .feature-copy, .feature-reverse .feature-figure { order: initial; }
  .view-directory { gap: 12px 22px; }
}