/* The service's own pages, on top of the client's app.css. */
body.saas { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.saas-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; }
.saas-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; color: inherit; }
.saas-brand .icon { color: var(--accent); }
.saas-nav { display: flex; align-items: center; gap: 16px; }
.saas-foot { margin-top: auto; padding: 20px 24px; text-align: center; }
.saas-hero { max-width: 1080px; margin: 0 auto; padding: 48px 24px 32px; display: grid; gap: 40px; }
.saas-hero h1 { font-size: clamp(34px, 6vw, 56px); line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 16px; }
.saas-hero .lead { font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 640px; }
.saas-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.saas-cards .panel h2 { font-size: 17px; margin: 0 0 8px; }
.saas-page { max-width: 880px; width: 100%; margin: 0 auto; padding: 24px; }
.saas-page h1 { margin-top: 0; }
.saas-form { display: grid; gap: 12px; margin-top: 12px; }
.saas-import { margin-top: 16px; }
.saas-import summary { cursor: pointer; color: var(--accent); }
.saas-auth #authlock-mount { min-height: 120px; margin: 12px 0; }
.saas-table { width: 100%; }
.saas-table td, .saas-table th { padding: 8px 6px; text-align: left; }
.text-bad { color: #dc2626; }
@media (max-width: 600px) { .saas-top { padding: 12px 16px; } .saas-hero { padding-top: 24px; } }