/* ==========================================================
   Shared public-page design system (2026-10-18).

   Copied from the 2026-10-09 landing redesign (app/templates/landing.html,
   the `.lp` block) so other public pages can match it without each one
   carrying its own copy. Everything is scoped to body.lp, so style.css keeps
   serving the old pages unchanged. The header and footer keep their style.css
   classes on purpose: script.js drives the mobile drawer through them.

   Used by: static/pricing.html.
   Follow-up: link this from landing.html and delete its inline duplicate.
   Load AFTER style.css and the Bricolage Grotesque + Geist font link.
   ========================================================== */
.lp {
    --ink: #0c0c0f;
    --ink-2: #17171c;
    --paper: #ffffff;
    --paper-2: #fafafa;
    --line: #ececef;
    --text: #111114;
    --text-2: #52525b;
    --text-3: #67676f;
    --brand: #f97316;
    --brand-ink: #c2410c;   /* brand orange that passes AA as text on white */
    --brand-soft: #fff7ed;
    --ok: #15803d;
    --font-display: 'Bricolage Grotesque', 'Segoe UI', sans-serif;
    --font-body: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-family: var(--font-body);
    background: var(--paper);
    color: var(--text);
}
.lp p { color: inherit; margin: 0; }
.lp h1, .lp h2, .lp h3 { margin: 0; color: inherit; }
.lp-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.lp-eyebrow { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-ink); }
.lp-h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(38px, 5.4vw, 68px); line-height: 1.0; letter-spacing: -0.035em; margin-top: 18px !important; color: var(--text) !important; }
.lp-h1 span { color: var(--brand); }
.lp-h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.05; letter-spacing: -0.03em; margin-top: 14px !important; }
.lp-lead { font-size: 18px; line-height: 1.6; color: var(--text-2) !important; margin-top: 18px !important; }

/* Buttons */
.lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 14px 24px; border-radius: 12px; font-weight: 600; font-size: 16px; line-height: 1.2; text-decoration: none; transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.lp-btn:hover { transform: translateY(-1px); }
.lp-btn-brand { background: var(--brand); color: var(--text); }
.lp-btn-brand:hover { background: #fb8a3c; color: var(--text); }
.lp-btn-ghost { border: 1px solid #d4d4d8; color: var(--text); background: #ffffff; }
.lp-btn-ghost:hover { border-color: #a1a1aa; color: var(--text); }
.lp-btn-ink { background: var(--text); color: #ffffff; }
.lp-btn-ink:hover { background: #2a2a31; color: #ffffff; }

/* Header */
.lp .site-header, .lp .site-header.scrolled { background: rgba(255,255,255,0.94); border-bottom: 1px solid var(--line); box-shadow: none; }
.lp .header-actions { display: flex; gap: 0.6rem; align-items: center; }
.lp .header-signin { color: var(--text); font-weight: 500; font-size: 15px; padding: 12px 14px; min-height: 44px; display: inline-flex; align-items: center; }
.lp .header-signin:hover { color: var(--brand-ink); }
.lp .header-start { min-height: 44px; padding: 10px 18px; font-size: 15px; }

/* Sections */
.lp-hero-soft { background: linear-gradient(180deg, #fff7ed 0%, #ffffff 75%); padding: 132px 0 40px; }
.lp-section { padding: 88px 0; }
.lp-section-tight { padding: 0 0 88px; }

/* Footer */
.lp .site-footer { margin-top: 0; background: var(--ink); }
.lp .site-footer .footer-section p { color: rgba(255,255,255,0.5); }
.lp .site-footer .footer-bottom p { color: rgba(255,255,255,0.65); }

@media (max-width: 768px) {
    .desktop-only { display: none !important; }
    .lp-hero-soft { padding: 104px 0 28px; }
    .lp-section { padding: 64px 0; }
    .lp-section-tight { padding: 0 0 64px; }
    .lp .header-start { display: none; }
}
@media (min-width: 769px) { .mobile-only { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
    .lp-btn, .lp-btn:hover { transition: none; transform: none; }
}