/* Features (#53): headline cards in groups, each linking to its guide. */
.features-hero { position: relative; padding: clamp(1.4rem, 4vw, 2.6rem) clamp(1.3rem, 4vw, 3rem); border: 1px solid #52616a;
  background: linear-gradient(110deg, #0e1920f7 38%, #15212ac2), url("/static/img/rf-ether-bg.jpg") center 55% / cover;
  box-shadow: 0 28px 70px #0006; }
.features-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 4px;
  background: linear-gradient(90deg, #da6328, #ffc170 40%, transparent); }
.features-hero h1 { margin: .35rem 0 .7rem; font: 500 clamp(2.3rem, 5vw, 4rem)/1 "Arial Narrow", Bahnschrift, sans-serif;
  text-transform: uppercase; letter-spacing: .04em; }
.features-intro { max-width: 40rem; margin: 0; color: #c6d0d2; }
.features-group { margin-top: 2rem; }
.features-group h2 { margin: 0 0 .8rem; color: var(--gold-2); font: 500 clamp(1.4rem, 2.6vw, 1.8rem)/1.1 "Arial Narrow", Bahnschrift, sans-serif;
  text-transform: uppercase; letter-spacing: .04em; }
.features-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: .8rem;
  list-style: none; margin: 0; padding: 0; }
.features-list li { display: flex; flex-direction: column; min-width: 0; padding: .9rem 1rem; border: 1px solid #52616a;
  border-top: 3px solid var(--gold-2); background: #0e1920; }
.features-list h3 { margin: 0 0 .35rem; font: 500 1.25rem/1.1 "Arial Narrow", Bahnschrift, sans-serif;
  text-transform: uppercase; letter-spacing: .04em; }
.features-list p { flex: 1; margin: 0; color: #c6d0d2; }
.features-list a { margin-top: .6rem; font-size: .9rem; text-decoration: none; }
.features-list a::after { content: " \2192"; }
.features-list a:hover, .features-list a:focus-visible { text-decoration: underline; }