/* The developer pitch (moved from the old landing page when the Okona app
   took the front page; okona-tv D37/D53). The signed-out top of /developers/:
   the pitch, then the sign-in card (#sign-in), use cases, contact, footer. */
/* Landing scrolls (overrides the global app-shell overflow:hidden) so the footer links are reachable on mobile */
        html, body { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; }
        .lp { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
        .lp-nav { display: flex; justify-content: space-between; align-items: center; padding: 24px 32px; }
        .lp-logo { font-weight: 700; font-size: 1.25rem; letter-spacing: 0.02em; color: var(--text-primary); text-decoration: none; }
        .lp-logo .accent { color: var(--color-gold); }
        .lp-nav-right { display: flex; align-items: center; gap: 18px; }
        .lp-nav-link { color: var(--text-secondary); text-decoration: none; font-size: 0.9375rem; font-weight: 500; }
        .lp-nav-link:hover { color: var(--text-primary); }
        .lp-nav-link-cta { padding: 7px 14px; border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-primary); }
        .lp-nav-link-cta:hover { background: var(--bg-surface); }
        @media (max-width: 480px) { .lp-nav { padding: 18px 16px; } .lp-nav-right { gap: 12px; } .lp-nav-link:not(.lp-nav-link-cta) { display: none; } }
        .lp-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 24px 64px; gap: 22px; }
        .lp-main h1 { font-size: clamp(2rem, 5.5vw, 3.25rem); color: var(--text-primary); line-height: 1.08; max-width: 20ch; }
        .lp-main p { color: var(--text-secondary); font-size: 1.125rem; max-width: 54ch; line-height: 1.65; margin: 0; }
        .lp-cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
        .lp-btn { display: inline-block; padding: 13px 26px; border-radius: 10px; font-weight: 600; font-size: 1rem; text-decoration: none; transition: transform .12s ease, background .15s ease; }
        .lp-btn:hover { transform: translateY(-1px); }
        .lp-btn-primary { background: var(--color-gold); color: #0D1B2A; }
        .lp-btn-primary:hover { background: var(--color-gold-light); }
        .lp-btn-secondary { border: 1px solid var(--border-color); color: var(--text-primary); }
        .lp-btn-secondary:hover { background: var(--bg-surface); }
        .lp-support { color: var(--text-muted); font-size: 0.9375rem; margin-top: 4px; }
        .lp-support a { color: var(--color-gold); text-decoration: none; }
        .lp-how { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 18px; max-width: 1100px; }
        .lp-how div { flex: 1 1 220px; max-width: 255px; padding: 18px 20px; border: 1px solid var(--border-color); border-radius: 12px; text-align: left; }
        .lp-how h3 { font-size: 1rem; color: var(--text-primary); margin: 0 0 6px; }
        .lp-how p { font-size: 0.9375rem; color: var(--text-secondary); max-width: none; }
        .lp-how p em { color: var(--text-primary); font-style: normal; font-weight: 600; }
        .lp-builtin-title { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-top: 26px; }
        .lp-builtin { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center; max-width: 960px; margin-top: -8px; }
        .lp-builtin div { flex: 1 1 190px; max-width: 215px; text-align: left; }
        .lp-builtin h4 { font-size: 0.9375rem; color: var(--text-primary); margin: 0 0 2px; }
        .lp-builtin p { font-size: 0.875rem; color: var(--text-muted); line-height: 1.5; max-width: none; }
        .lp-license { padding: 44px 24px 48px; border-top: 1px solid var(--border-color); text-align: center; }
        .lp-license h2 { font-size: 1.5rem; color: var(--text-primary); margin: 0 0 6px; }
        .lp-license-lead { color: var(--text-secondary); font-size: 1rem; max-width: 62ch; margin: 0 auto 26px; line-height: 1.6; }
        .lp-license-cols { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; max-width: 860px; margin: 0 auto; }
        .lp-license-cols div { flex: 1 1 300px; max-width: 420px; padding: 20px 22px; border: 1px solid var(--border-color); border-radius: 12px; text-align: left; }
        .lp-license-cols h3 { font-size: 1rem; color: var(--text-primary); margin: 0 0 8px; }
        .lp-license-cols p { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.6; margin: 0 0 12px; }
        .lp-license-cols p strong { color: var(--color-gold); }
        .lp-license-cols a { color: var(--color-gold); text-decoration: none; font-weight: 600; font-size: 0.9375rem; }
        .lp-license-cols a:hover { color: var(--color-gold-light); }
        .lp-contact { text-align: center; padding: 36px 24px; border-top: 1px solid var(--border-color); }
        .lp-contact h2 { font-size: 1.125rem; color: var(--text-primary); margin: 0 0 8px; }
        .lp-contact p { color: var(--text-secondary); font-size: 0.9375rem; line-height: 1.65; max-width: 48ch; margin: 0 auto; }
        .lp-contact a { color: var(--color-gold); text-decoration: none; font-weight: 600; }
        .lp-contact a:hover { color: var(--color-gold-light); }
        .lp-foot { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; padding: 24px; border-top: 1px solid var(--border-color); }
        .lp-foot a { color: var(--text-muted); text-decoration: none; font-size: var(--font-size-sm); }
        .lp-foot a:hover { color: var(--text-secondary); }
        @media (max-width: 600px) {
            /* Top-align the hero on phones so the footer links sit a short scroll below, not off-screen */
            .lp-main { justify-content: flex-start; padding: 28px 22px 40px; }
        }

/* On the sign-in page the card is a section of the long page, not a full screen. */
.dev-pitch-page .auth-container { min-height: auto; padding-top: 8px; padding-bottom: 56px; }
.dev-pitch-page .lp-main { flex: none; }

/* The pitch already says who Okona is: the card's header keeps only "Developer Portal" + the invite note. */
.dev-pitch-page .auth-header .logo,
.dev-pitch-page .auth-tagline:not(.auth-tagline-note) { display: none; }