/* Feature directory: shared BATIQ colors, type, navigation, and textures. */
.features-shell { max-width: 1600px; margin: auto; padding: 170px var(--gutter) 70px; }
.features-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 5vw; padding-bottom: 65px; }
.features-hero h1 { font: normal clamp(64px, 7.5vw, 116px)/.96 var(--serif); letter-spacing: -.035em; margin: 24px 0; }
.features-page em { color: var(--gold-hi); font-weight: normal; }
.features-lede { max-width: 480px; color: var(--muted); font-size: 17px; line-height: 1.7; }
.features-tally { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 30px; font-size: 11px; color: var(--gold); }
.features-image { margin: 0; transform: rotate(-2deg); }
.features-image img { display: block; width: 100%; height: auto; border: 1px solid var(--line); box-shadow: 0 24px 90px #0008; }
.features-image figcaption { text-align: right; font: italic 22px var(--serif); color: var(--gold); margin-top: 18px; }
.feature-jumps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 22px 0; gap: 6px 30px; }
.feature-jumps a { display: flex; align-items: baseline; gap: 16px; padding: 12px 0; font-size: 13px; }
.feature-jumps span { font: italic 18px var(--serif); color: var(--gold); }
.feature-jumps a:hover, .features-page .nav-links [aria-current="page"] { color: var(--gold-hi); }
.feature-section { display: grid; grid-template-columns: minmax(200px, .75fr) 2fr; gap: 5vw; padding: 66px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 110px; }
.feature-section h2 { font: normal clamp(34px, 3.3vw, 48px)/1.08 var(--serif); letter-spacing: -.02em; max-width: 310px; margin: 16px 0; }
.feature-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 38px; }
.feature-list li { padding-left: 16px; border-left: 1px solid #c9a86755; }
.feature-list h3 { margin: 0 0 9px; font-size: 15px; font-weight: 500; color: var(--ivory); }
.feature-list p { margin: 0; font-size: 13px; line-height: 1.75; color: var(--muted); }
.features-outro { text-align: center; padding: 90px 0 35px; }
.features-outro h2 { font: normal clamp(44px, 6vw, 76px)/1.1 var(--serif); margin: 20px 0; }
.features-outro > p:not(.overline) { color: var(--muted); }
.features-outro > div { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 30px; margin-top: 36px; font-size: 13px; }
.features-page .grain { animation: none; }
@media (max-width: 900px) {
  .features-shell { padding-top: 130px; }
  .features-hero { grid-template-columns: 1fr; gap: 32px; }
  .features-image { max-width: 650px; transform: none; }
  .feature-section { grid-template-columns: 1fr; gap: 22px; padding: 45px 0; }
  .feature-section h2 { max-width: none; }
  .feature-jumps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .feature-list { grid-template-columns: 1fr; gap: 25px; }
  .feature-jumps { gap: 4px 16px; }
  .feature-jumps a { font-size: 12px; gap: 9px; }
  .features-hero { padding-bottom: 40px; }
  .features-hero h1 { font-size: 70px; }
  .features-lede { font-size: 16px; }
}

.feature-spotlight { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 24px; align-items: start; scroll-margin-top: 110px; }
.feature-screenshot { display: block; width: 100%; max-width: 220px; }
.feature-screenshot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.feature-screenshot span { display: block; margin-top: 8px; color: var(--gold); font-size: 12px; }
.feature-screenshot:hover span { color: var(--gold-hi); }

@media (max-width: 560px) {
  .feature-spotlight { grid-template-columns: 1fr; gap: 16px; }
  .feature-screenshot { max-width: 180px; }
}