body:has(.features-page) {--base:#f2f0e9;--surface:#fffcf4;--ink:#152c26;--muted:#485951;--sea:#215748;--sea-deep:#163d32;--line:#c0c8be;--mist:#e4ece4}
.features-page .page-intro h1 {letter-spacing: -.04em;text-wrap:balance}
.feature-actions {display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 2rem}
.feature-actions .button, .feature-guide a {min-height: 44px}
.feature-examples {margin-block:0 clamp(32px,5vw,64px)}
.feature-examples h2 {margin:0 0 12px;font-size:clamp(1.2rem,2.4vw,1.55rem);letter-spacing:-.025em}
.feature-examples-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.feature-demo {display:flex;flex-direction:column;min-width:0;border-radius:14px;background:var(--surface);color:var(--ink);text-decoration:none}
.feature-demo img {display:block;width:100%;height:auto;aspect-ratio:2.3;object-fit:cover;border-radius:14px 14px 0 0}
.feature-demo > span {display:block;margin-block-start:auto;padding:12px 14px 14px;color:var(--muted);font-size:.9rem}
.feature-demo strong {display:block;margin-block-end:3px;color:var(--ink);font-size:1.04rem}
.feature-demo--map {justify-content:center;background:var(--mist)}
.feature-demo--map > span {max-width:32ch;margin:0;padding:clamp(14px,3vw,28px)}
.feature-demo--map strong {font-size:clamp(1.04rem,2vw,1.45rem)}
.feature-demo:is(:hover,:active) strong {text-decoration:underline;text-underline-offset:3px}
.feature-demo:active {box-shadow:inset 0 0 0 1px currentColor}
.feature-catalog {
  display: grid;
  align-items: start;
  grid-template-columns: minmax(10rem,14rem) minmax(0,1fr);
  gap: clamp(1.5rem,4vw,3.5rem);
}
.feature-index {
  position: sticky;
  top: 12px;
  padding: 8px;
  border-radius: 12px;
  background: var(--mist);
}
.feature-index ul {list-style: none; margin: 0; padding: 0}
.feature-index--mobile {display:none}
.feature-index summary {min-height:44px;padding:10px;font-weight:650;cursor:pointer}
.feature-index a, .feature-entry a, .feature-guide a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 650;
}
.feature-index a {display: flex; padding: 6px 10px; border-radius: 6px; text-decoration: none}
.feature-index a:is(:hover,:active) {background: var(--surface); text-decoration: underline}
.feature-sections {min-width: 0; overflow-wrap: anywhere}
.feature-sections section + section {margin-top: 2.25rem}
.feature-sections section {scroll-margin-block-start: 1rem}
.feature-sections section:target {outline: 2px solid var(--sea); outline-offset: 5px; border-radius: 4px}
.feature-sections h2 {margin: 0 0 .65rem; font-size: clamp(1.35rem,3vw,1.8rem); letter-spacing: -.03em; line-height: 1.2}
.feature-entry {
  display: grid;
  grid-template-columns: minmax(8rem,12rem) minmax(0,1fr);
  gap: 1rem;
  padding: 1rem 0;
  border-block-start: 1px solid var(--line);
}
.feature-entry h3 {margin: 0; font-size: 1.03rem; line-height: 1.35}
.feature-entry p {margin: 0; color: var(--muted); max-width: 66ch}
.feature-guide {margin: 1rem 0 0}
@media (max-width: 760px) {
  .feature-catalog {grid-template-columns: minmax(0,1fr)}
  .feature-index {position: static}
  .feature-index--desktop {display:none}
  .feature-index--mobile {display:block}
  .feature-index ul {display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,11rem),1fr))}
}
@media (max-width: 540px) {
  .feature-actions {margin-bottom: 1.25rem}
  .feature-entry {grid-template-columns: minmax(0,1fr); gap: .35rem}
  .feature-examples-grid {grid-template-columns:minmax(0,1fr)}
  .feature-demo:has(img) {display:grid;grid-template-columns:minmax(80px,32%) minmax(0,1fr)}
  .feature-demo img {height:100%;min-height:92px;aspect-ratio:auto;border-radius:14px 0 0 14px}
}
@media (max-height: 460px) {
  .feature-index {position: static}
}