/* Page parts the shared styles.css doesn't have: the single-column landing, feature grid and FAQ. */
.landing section { padding: 72px 0; }
.landing .hero { padding: 130px 0 80px; }
.landing .hero .wrap { grid-template-columns: 1.1fr .9fr; }
.hero-icon { width: min(320px, 70%); height: auto; margin: 0 auto; border-radius: 22%; box-shadow: var(--shadow); }
.landing .soon-note { color: var(--muted); font-weight: 600; }
.feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 28px; }
.narrow { max-width: 760px; }
details { border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; margin: 12px 0; background: #fff; }
summary { cursor: pointer; font-weight: 600; }
details p { margin: 10px 0 2px; color: var(--muted); }
code { background: var(--bg2); padding: 1px 6px; border-radius: 6px; }
.layouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; margin-top: 28px; }
.layout { margin: 0; text-align: center; }
.layout .screen { aspect-ratio: 16 / 9; display: flex; flex-direction: column; gap: 4px; padding: 6px; background: var(--navy); border-radius: 10px; box-shadow: var(--shadow); }
.layout .lrow { flex: 1; display: flex; gap: 4px; }
.layout i { flex: 1; border-radius: 3px; background: linear-gradient(180deg, #2d6f8f, #1b4863); }
.layout .lrow:first-child i:first-child { background: linear-gradient(180deg, #4ed0e0, #1f8fa8); }
.layout figcaption b { display: block; margin-top: 10px; }
.layout figcaption span { color: var(--muted); font-size: 14px; }
.sub { color: var(--muted); max-width: 640px; }
@media (max-width: 920px) { .landing .hero .wrap { grid-template-columns: 1fr; } }