/* The feature tour: chapters as pearl panels around dark glass screenshots, like the app's side panels and stage. */
.feature-page{max-width:1240px;margin:auto;padding:56px 32px 70px}
.feature-hero{padding:10px 0 46px}
.feature-hero>.eyebrow{color:color-mix(in srgb,var(--accent) 70%,#fff)}
.feature-hero h1{max-width:900px;margin:18px 0;font-size:clamp(44px,6vw,80px);line-height:1.04}
.feature-hero>p:not(.eyebrow,.release-status){max-width:760px;font-size:19px;line-height:1.75;color:var(--page-soft)}
.feature-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:900px;margin:30px 0}
.feature-stats div{padding:14px 16px;border:1px solid var(--edge);border-radius:16px;background:var(--gloss),var(--pearl);box-shadow:var(--lift);color:var(--ink)}
.feature-stats strong{display:block;width:fit-content;padding:0 10px;border:1px solid color-mix(in srgb,var(--surface) 30%,#7aa1b0);border-radius:8px;background:#f2fdffcc;box-shadow:inset 0 1px 3px #2c5b6e33;font:400 28px/1.4 Consolas,monospace}
.feature-stats span{display:block;margin-top:8px;font-size:13px;color:var(--soft)}
.feature-hero .release-status{max-width:900px}
.feature-jump{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border:1px solid #ffffff4d;border-radius:22px;background:#ffffff1a;box-shadow:inset 0 2px 5px #00203044}
.feature-jump a{padding:8px 16px;border:1px solid transparent;border-radius:18px;font-size:14px;font-weight:600}
.feature-jump a:hover{background:var(--aqua);border-color:color-mix(in srgb,var(--accent) 40%,#3b8299);color:#073e54}
.feature-chapter{padding:56px 0;border-top:1px solid #ffffff26;scroll-margin-top:90px}
.feature-chapter>.eyebrow{color:color-mix(in srgb,var(--accent) 70%,#fff)}
.feature-chapter h2{margin:12px 0 14px}
.feature-chapter>p:not(.eyebrow){max-width:820px;font-size:17px;line-height:1.85;color:var(--page-soft)}
.feature-chapter>p a{text-decoration:underline;text-underline-offset:3px;color:var(--page-ink)}
.feature-shot{margin:28px 0;padding:10px}
.feature-shot img{display:block;width:100%;height:auto;border:1px solid #5e9dab;border-radius:12px}
.feature-shot figcaption{padding:14px 10px 4px;font-size:15px;line-height:1.7}
.feature-catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:28px 0}
.feature-catalog article{padding:26px}
.feature-catalog h3{margin:0 0 10px;font-size:22px}
.feature-catalog p{margin:0;font-size:16px;line-height:1.8;color:var(--soft)}
.feature-page .button{margin:10px 0}
.preset-directory{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:26px}
.preset-directory article{padding:18px 20px;border:1px solid #ffffff38;border-radius:16px;background:linear-gradient(#ffffff1f,#ffffff08);box-shadow:inset 0 1px #ffffff40}
.preset-directory article:nth-last-child(-n+4){border-color:color-mix(in srgb,var(--accent) 60%,#fff);background:linear-gradient(color-mix(in srgb,var(--accent) 22%,#ffffff1f),#ffffff0a)}
.preset-directory h3{margin:0 0 6px;font-size:18px}
.preset-directory p{margin:0;font-size:14px;line-height:1.65;color:var(--page-soft)}
.preset-directory small{display:block;margin-top:10px;font:11px/1.5 Consolas,monospace;color:var(--accent)}
@media(max-width:900px){.feature-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.preset-directory{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.feature-page{padding:30px 16px 50px}.feature-catalog,.preset-directory{grid-template-columns:1fr}.feature-shot{padding:5px}.feature-chapter{padding:38px 0}.feature-catalog article{padding:20px}.feature-stats strong{font-size:22px}}