/* Public marketing landing page (§4.1). Self-contained: this page does NOT load
   admin.css (it's the SEO-critical entry point and shouldn't ship the admin
   stylesheet), so the shared palette vars, base reset, and .btn rules that the
   landing relies on are inlined here, alongside the PhillyLabs skyline accents. */
:root {
  /* Shared palette (kept in sync with admin.css). */
  --brand: #3b3b98;
  --brand-dark: #2b2b78;
  --bg: #f5f6fb;
  --ink: #1a1a2e;
  --muted: #6b7280;
  --border: #e4e6ef;
  --radius: 10px;
  /* Landing-only accents. */
  --teal: #168b8b;
  --teal-soft: #e1f5ee;
  --teal-ink: #0f6e56;
}

/* Base reset (ported from admin.css so this page stands alone). */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
}
a { color: var(--brand); }
h1, h2, h3 { color: var(--ink); margin-top: 0; }

/* Primary button (ported from admin.css). */
.btn {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  border: none;
  padding: 11px 18px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--brand-dark); }
.btn-sm { padding: 6px 12px; font-size: 13px; }

.lp { color: var(--ink); }
.lp h1, .lp h2, .lp h3 { color: var(--ink); }
.lp-mark { width: 30px; height: 23px; flex: none; }

/* --- Nav --- */
.lp-nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 14px 28px;
  background: #fff; border-bottom: 1px solid var(--border);
}
.lp-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.lp-brand span { font-size: 19px; font-weight: 800; color: var(--brand); }
.lp-nav-links { display: flex; gap: 22px; }
.lp-nav-links a { color: var(--muted); text-decoration: none; font-size: 14px; }
.lp-nav-links a:hover { color: var(--ink); }
.lp-nav-cta { display: flex; align-items: center; gap: 16px; }
.lp-signin { color: var(--ink); text-decoration: none; font-size: 14px; }

/* --- Section frame --- */
.lp-section { max-width: 1040px; margin: 0 auto; padding: 56px 28px; }
.lp-section > h2 { font-size: 26px; margin-bottom: 28px; text-align: center; }

/* --- Hero --- */
.lp-hero {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center;
  max-width: 1040px; margin: 0 auto; padding: 64px 28px;
}
.lp-badge {
  display: inline-block; font-size: 12px; letter-spacing: .03em;
  color: var(--teal-ink); background: var(--teal-soft);
  padding: 5px 12px; border-radius: 999px; margin-bottom: 16px;
}
.lp-hero-copy h1 { font-size: 40px; line-height: 1.12; margin-bottom: 16px; }
.lp-hero-copy p { font-size: 17px; line-height: 1.6; color: var(--muted); margin: 0 0 24px; }
.lp-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-ghost {
  display: inline-block; padding: 11px 20px; border-radius: 8px;
  border: 1px solid var(--border); background: #fff; color: var(--ink);
  font-size: 15px; text-decoration: none;
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }

/* --- Hero phone --- */
.lp-phone {
  justify-self: center; width: 230px; background: #fff;
  border: 9px solid var(--ink); border-radius: 30px; padding: 18px 14px;
}
.lp-phone-bar { font-size: 12px; color: var(--muted); text-align: center; margin-bottom: 14px; }
.lp-bubble {
  font-size: 13px; line-height: 1.4; padding: 9px 12px; margin-bottom: 10px;
  max-width: 85%; border-radius: 14px;
}
.lp-bubble.in { margin-left: auto; background: var(--brand); color: #fff; border-bottom-right-radius: 3px; }
.lp-bubble.out { background: var(--bg); color: var(--ink); border-bottom-left-radius: 3px; }
.lp-bubble.code { background: var(--teal-soft); color: var(--teal-ink); border-bottom-left-radius: 3px; }

/* --- How it works --- */
.lp-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.lp-step h3 { font-size: 17px; margin: 12px 0 6px; }
.lp-step p { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0; }
.lp-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 16px;
}

/* --- Features --- */
.lp-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.lp-feature { border: 1px solid var(--border); border-radius: 12px; padding: 20px; background: #fff; }
.lp-feature h3 { font-size: 16px; margin: 12px 0 6px; }
.lp-feature p { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0; }
.lp-dot { display: block; width: 26px; height: 26px; border-radius: 7px; }

/* --- Pricing --- */
.lp-pricing {
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  flex-wrap: wrap; background: var(--bg); border-radius: 16px; padding: 32px 36px;
}
.lp-pricing h2 { font-size: 22px; margin-bottom: 6px; }
.lp-pricing p { font-size: 15px; color: var(--muted); margin: 0; }
.lp-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lp-price-label { font-size: 14px; color: var(--muted); }
.lp-price-amt { font-size: 38px; font-weight: 800; color: var(--brand); }
.lp-price-unit { font-size: 14px; color: var(--muted); margin-right: 8px; }
.lp-price .btn { align-self: center; }

/* --- Footer --- */
.lp-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; max-width: 1040px; margin: 0 auto; padding: 28px;
  border-top: 1px solid var(--border);
}
.lp-footer-brand { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.lp-footer-links { display: flex; align-items: center; gap: 18px; font-size: 14px; }
.lp-footer-links a { color: var(--ink); text-decoration: none; }
.lp-footer-links a:hover { color: var(--brand); }
.lp-copy { color: var(--muted); }

/* --- Responsive --- */
@media (max-width: 820px) {
  .lp-hero { grid-template-columns: 1fr; padding: 40px 24px; }
  .lp-phone { order: -1; }
  .lp-hero-copy h1 { font-size: 32px; }
  .lp-steps-grid { grid-template-columns: 1fr; gap: 22px; }
  .lp-nav-links { display: none; }
}
@media (max-width: 520px) {
  .lp-nav { padding: 12px 18px; }
  .lp-section { padding: 40px 20px; }
}