/* The public-site look, taken from the Gallery page: Space Grotesk throughout, mono eyebrow labels with a lime dot,
   large tightly-tracked headings, thin 1px borders on dark panels, lime and ghost buttons.
   Only pages that set `site_look` get body.sl, so the studios and workspaces are never affected. */
body.sl {
    --sl-bg: #090c0e;
    --sl-panel: #101619;
    --sl-ink: #f1f3eb;
    --sl-muted: #a5b0aa;
    --sl-line: #ffffff1c;
    --sl-lime: #d4ff3a;
    background: var(--sl-bg);
    color: var(--sl-ink);
    font-family: 'Space Grotesk', 'Inter', sans-serif;
}
body.sl button, body.sl input, body.sl select, body.sl textarea { font-family: inherit; }
body.sl :focus-visible { outline: 2px solid var(--sl-lime); outline-offset: 4px; }

/* The shared <main> is a 980px column; public pages manage their own width, as the Gallery does. */
body.sl main.site-main { max-width: none; width: 100%; margin: 0; padding: 0; }

/* Headings: same weight and tracking as the Gallery. */
body.sl h1, body.sl h2, body.sl h3 { font-family: 'Space Grotesk', sans-serif; }
body.sl main h1 { font-weight: 600; letter-spacing: -.055em; line-height: 1.05; }
body.sl main h2 { font-weight: 600; letter-spacing: -.04em; line-height: 1.12; }
body.sl main h3 { font-weight: 600; letter-spacing: -.02em; }

/* Eyebrow labels. */
body.sl .eyebrow, body.sl .blog-eyebrow, body.sl .ir-kicker, body.sl .legal-updated {
    display: inline-flex; align-items: center; gap: 10px;
    font: 400 11px/1.6 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase;
    color: var(--sl-lime); background: none; border: 0; padding: 0; border-radius: 0;
}
body.sl .eyebrow::before, body.sl .blog-eyebrow::before {
    content: ""; height: 7px; width: 7px; border-radius: 50%; background: var(--sl-lime); box-shadow: 0 0 18px #d4ff3a40; flex-shrink: 0;
}

/* Buttons. */
body.sl .btn-primary, body.sl .pricing-btn.btn-primary, body.sl .pit-btn-active {
    background: var(--sl-lime); color: #111709; border: 1px solid var(--sl-lime); border-radius: 4px;
    font-family: 'Space Grotesk', sans-serif; font-weight: 700; box-shadow: none;
}
body.sl .btn-primary:hover { background: #e0ff79; border-color: #e0ff79; }
body.sl .btn-ghost, body.sl .pricing-btn.btn-ghost {
    background: #ffffff03; color: var(--sl-ink); border: 1px solid var(--sl-line); border-radius: 4px;
    font-family: 'Space Grotesk', sans-serif; font-weight: 700;
}
body.sl .btn-ghost:hover { border-color: #8f9d8a; background: #ffffff08; }

/* ── Pricing ─────────────────────────────────────────────────────────────── */
body.sl .pricing-page { width: min(1440px, calc(100% - 80px)); max-width: none; margin: 0 auto; padding: 54px 0 70px; position: relative; }
body.sl .pricing-page::before { content: ""; position: absolute; z-index: -1; pointer-events: none; top: -50px; left: -40px; width: calc(100% + 80px); height: 700px;
    background: radial-gradient(ellipse at 92% 15%, #a9c96a0d, transparent 60%), linear-gradient(90deg, #ffffff02 1px, transparent 1px); background-size: auto, 64px 64px; }
body.sl .pricing-hero { text-align: left; margin-bottom: 40px; padding-bottom: 36px; border-bottom: 1px solid var(--sl-line); }
body.sl .pricing-hero h1 { font-size: clamp(44px, 5.4vw, 80px); font-weight: 600; letter-spacing: -.06em; line-height: 1.03; margin: 22px 0 18px; }
body.sl .pricing-hero > p { max-width: 640px; font-size: 16px; line-height: 1.75; color: var(--sl-muted); margin: 0; }
body.sl .pricing-credit-pills { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; margin: 26px 0 22px; }
body.sl .pricing-credit-pill { border: 1px solid var(--sl-line); border-radius: 4px; background: #ffffff03; padding: 8px 12px;
    font: 400 11px/1.5 'JetBrains Mono', monospace; letter-spacing: .04em; color: var(--sl-muted); }
body.sl .pricing-credit-pill-icon { display: none; }
body.sl .pricing-interval-toggle { border-radius: 4px; border: 1px solid #34413b; background: #0c1113; padding: 3px; }
body.sl .pit-btn { border-radius: 3px; font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 700; padding: 8px 16px; }
body.sl .pit-save-badge { border-radius: 3px; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .06em; }

body.sl .pricing-grid { gap: 16px; align-items: stretch; }
body.sl .pricing-card { background: var(--sl-panel); border: 1px solid var(--sl-line); border-radius: 5px; box-shadow: none; overflow: hidden; }
body.sl .pricing-card::before, body.sl .pricing-card::after, body.sl .pricing-card-cinema-art { display: none; }
body.sl .pricing-card-pro { border-color: #d4ff3a66; background: linear-gradient(180deg, #d4ff3a0d, transparent 40%), var(--sl-panel); }
body.sl .pricing-plan-icon { display: none; }
body.sl .pricing-plan-name { font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -.03em; }
body.sl .pricing-price { font-family: 'Space Grotesk', sans-serif; font-weight: 600; letter-spacing: -.05em; }
body.sl .pricing-credits-line { font: 400 12px/1.5 'JetBrains Mono', monospace; letter-spacing: .02em; color: var(--sl-lime); }
body.sl .pricing-desc, body.sl .pricing-features li { color: var(--sl-muted); }
body.sl .pricing-features li { color: #c9d1cb; }
body.sl .pricing-popular, body.sl .pricing-current-badge { border-radius: 3px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .08em; top: 14px; left: auto; right: 14px; transform: none; }
body.sl .pricing-btn { border-radius: 4px; font-family: 'Space Grotesk', sans-serif; font-size: 13px; }
body.sl .pricing-btn:not(.btn-primary) { background: #ffffff03; color: var(--sl-ink); border: 1px solid var(--sl-line); }
body.sl .pricing-btn:not(.btn-primary):hover { border-color: #8f9d8a; background: #ffffff08; }
body.sl .pricing-credit-box, body.sl .pricing-faq-item { background: var(--sl-panel); border: 1px solid var(--sl-line); border-radius: 5px; box-shadow: none; }
body.sl .pricing-credit-box-title { font-family: 'Space Grotesk', sans-serif; font-weight: 600; letter-spacing: -.02em; }
body.sl .pricing-faq h2, body.sl .pricing-credit-explainer h2 { font-size: clamp(28px, 3.2vw, 42px); letter-spacing: -.04em; text-align: left; }
body.sl .pricing-faq-item h3 { font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
body.sl .pricing-faq-item a { color: var(--sl-lime); }

/* ── Form controls, shared by Contact and sign-in ───────────────────────── */
body.sl main input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
body.sl main select, body.sl main textarea {
    background: #0c1113; border: 1px solid #34413b; border-radius: 4px; color: var(--sl-ink);
    font-family: 'Space Grotesk', sans-serif; font-size: 14px;
}
body.sl main input:focus, body.sl main select:focus, body.sl main textarea:focus { border-color: var(--sl-lime); outline: none; }
body.sl .row > label:first-child, body.sl .cf-label { font: 400 11px/1.6 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--sl-muted); }

/* ── Contact ────────────────────────────────────────────────────────────── */
body.sl .contact-page { width: min(1440px, calc(100% - 80px)); max-width: none; margin: 0 auto; padding: 54px 0 70px; }
body.sl .contact-card { background: var(--sl-panel); border: 1px solid var(--sl-line); border-radius: 5px; padding: 40px; }
body.sl .contact-badge { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; border-radius: 0; background: none;
    font: 400 11px/1.6 'JetBrains Mono', monospace; letter-spacing: .08em; color: var(--sl-lime); }
body.sl .contact-badge::before { content: ""; height: 7px; width: 7px; border-radius: 50%; background: var(--sl-lime); box-shadow: 0 0 18px #d4ff3a40; }
body.sl .contact-header h1 { font-size: clamp(40px, 4.6vw, 68px); margin: 14px 0 14px; }
body.sl .contact-sub, body.sl .ci-note { color: var(--sl-muted); }
body.sl .ci-link { color: var(--sl-lime); }
body.sl .ci-label { font-family: 'JetBrains Mono', monospace; font-weight: 400; letter-spacing: .08em; color: var(--sl-muted); }
body.sl .contact-form-title { font-family: 'Space Grotesk', sans-serif; font-weight: 600; letter-spacing: -.03em; color: var(--sl-ink); }
body.sl .cf-input { background: #0c1113; border: 1px solid #34413b; border-radius: 4px; font-family: 'Space Grotesk', sans-serif; }
body.sl .cf-input:focus { border-color: var(--sl-lime); }
body.sl .cf-submit { background: var(--sl-lime); color: #111709; border: 1px solid var(--sl-lime); border-radius: 4px; font-family: 'Space Grotesk', sans-serif; font-size: 14px; }
body.sl .cf-note-submit { color: var(--sl-muted); }

/* ── Sign in / create account ───────────────────────────────────────────── */
body.sl .auth-hero { margin: 54px auto 24px; }
body.sl .auth-hero .eyebrow { border: 0; padding: 0; background: none; }
body.sl .auth-headline { font-size: clamp(40px, 4.4vw, 64px); }
body.sl .auth-headline .accent { background: none; -webkit-text-fill-color: var(--sl-lime); color: var(--sl-lime); }
body.sl .auth-tagline { color: var(--sl-muted); }
body.sl .card.auth-card, body.sl .auth-card { background: var(--sl-panel); border: 1px solid var(--sl-line); border-radius: 5px; box-shadow: none; }
body.sl .auth-card h2 { font-size: 24px; }
body.sl .auth-switch-link:hover { color: var(--sl-lime); }

/* ── Blog ───────────────────────────────────────────────────────────────── */
body.sl .blog-hero, body.sl .blog-grid-wrap { width: min(1440px, calc(100% - 80px)); }
body.sl .blog-hero { padding: 54px 0 36px; border-bottom: 1px solid var(--sl-line); }
body.sl .blog-hero h1, body.sl .blog-article h1 { font-size: clamp(44px, 5.4vw, 80px); letter-spacing: -.06em; line-height: 1.03; }
body.sl .blog-hero p { color: var(--sl-muted); font-size: 16px; line-height: 1.75; }
body.sl .blog-grid { gap: 16px; }
body.sl .blog-card { background: var(--sl-panel); border: 1px solid var(--sl-line); border-radius: 5px; }
body.sl .blog-card:hover { border-color: #8f9d8a; }
body.sl .blog-card h2, body.sl .blog-card h3 { font-size: 20px; letter-spacing: -.03em; }
body.sl .blog-card-meta { font: 400 11px/1.6 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--sl-muted); }
body.sl .blog-read-link, body.sl .blog-back-link { font: 400 12px/1.6 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--sl-lime); }
body.sl .blog-article { width: min(820px, calc(100% - 40px)); }
body.sl .blog-prose { font-size: 17px; line-height: 1.8; color: #d6dcd7; }
body.sl .blog-prose h2, body.sl .blog-prose h3 { color: var(--sl-ink); }
body.sl .blog-prose a { color: var(--sl-lime); }

/* ── Privacy and terms ──────────────────────────────────────────────────── */
body.sl .legal-page { width: min(1440px, calc(100% - 80px)); max-width: none; padding: 54px 0 70px; }
body.sl .legal-inner { max-width: 820px; }
body.sl .legal-title { font-size: clamp(40px, 4.6vw, 68px); font-weight: 600; letter-spacing: -.06em; line-height: 1.04; color: var(--sl-ink); margin-bottom: 20px; }
body.sl .legal-body h2 { font-size: 22px; font-weight: 600; letter-spacing: -.03em; margin: 36px 0 10px; padding-top: 22px; border-top: 1px solid var(--sl-line); }
body.sl .legal-body p { font-size: 15px; line-height: 1.8; color: #c3cbc6; }
body.sl .legal-body p.legal-bullet::before { color: var(--sl-lime); }

/* ── Small screens: the same 16px gutters the Gallery uses. ─────────────── */
@media (max-width: 720px) {
    body.sl .pricing-page, body.sl .contact-page, body.sl .legal-page,
    body.sl .blog-hero, body.sl .blog-grid-wrap { width: calc(100% - 32px); }
    body.sl .pricing-page, body.sl .contact-page, body.sl .legal-page { padding-top: 32px; }
    body.sl .contact-card { padding: 24px 18px; }
    body.sl .blog-article { width: calc(100% - 32px); }
    body.sl .pricing-page::before { display: none; }
}

body.sl input[type=checkbox], body.sl input[type=radio] { accent-color: var(--sl-lime); }
body.sl .auth-card label[for="marketing_emails_opt_in"] { font: 400 13px/1.6 'Space Grotesk', sans-serif; letter-spacing: 0; text-transform: none; color: var(--sl-muted); }
body.sl .auth-notice { color: var(--sl-lime); }