/* Landing page layout only. Colours, fonts, cards and buttons come from the app's own app.css. */
main.site { max-width: 980px; padding-bottom: 48px; }
.notice { display: block; border-left: 3px solid var(--accent); }
.notice strong { display: block; }
.notice p { margin-top: 4px; }
.hero h1 { font-size: clamp(1.9rem, 6vw, 2.8rem); margin-top: 18px; }
.lead { font-size: 1.1rem; max-width: 40em; }
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 24px 0; }
.shots figure { margin: 0; }
.shots img { width: 100%; height: auto; display: block; border-radius: var(--r-lg); border: 1px solid var(--line); }
.shots figcaption { color: var(--muted); font-size: .9rem; margin-top: 8px; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 12px; }
.features .card { margin: 6px 0; }
footer { margin-top: 32px; border-top: 1px solid var(--line); padding-top: 12px; }
@media (max-width: 480px) { .shots { grid-template-columns: 1fr 1fr; gap: 10px; } }