/* ============================================================
   Stage Plot Pro — shared landing/resource page styles
   Reuses CSS variables from tokens.css (dark theme).
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg, #0E0E0E);
  color: var(--color-text, #F5F5F7);
  font-family: var(--font-sans, "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
a { color: var(--color-accent, #FF5D18); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

/* ─── Header ─── */
.lp-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 24px; background:var(--color-surface, #1A1A1A); border-bottom:1px solid var(--color-border-strong, rgba(255,255,255,0.12)); position:sticky; top:0; z-index:50; }
.lp-header-logo img { height:34px; display:block; }
.lp-header-nav { display:flex; align-items:center; gap:18px; }
.lp-header-nav a { color:rgba(255,255,255,0.85); font-weight:600; font-size:13px; }
.lp-header-nav a:hover { color:#fff; text-decoration:none; }
.lp-btn { display:inline-block; background:var(--color-accent, #FF5D18); color:#fff; font-weight:700; font-size:14px; padding:11px 22px; border-radius:var(--radius-md, 8px); border:none; cursor:pointer; transition:background .15s ease, box-shadow .15s ease; }
.lp-btn:hover { background:var(--color-accent-hover, #E04D10); text-decoration:none; box-shadow:var(--shadow-accent, 0 0 12px rgba(255,93,24,0.25)); color:#fff; }
.lp-btn-lg { font-size:16px; padding:15px 32px; }

/* ─── Breadcrumb ─── */
.lp-breadcrumb { max-width:920px; margin:0 auto; padding:18px 24px 0; font-size:13px; color:var(--color-text-muted,#9CA3AF); }
.lp-breadcrumb a { color:var(--color-text-muted,#9CA3AF); }
.lp-breadcrumb a:hover { color:#fff; }

/* ─── Hero ─── */
.lp-hero { text-align:center; padding:64px 24px 48px; max-width:840px; margin:0 auto; }
.lp-eyebrow { text-transform:uppercase; letter-spacing:1.5px; font-size:12px; font-weight:700; color:var(--color-accent, #FF5D18); margin:0 0 14px; }
.lp-hero h1 { font-size:42px; line-height:1.12; font-weight:700; margin:0 0 18px; letter-spacing:-0.5px; }
.lp-hero p { font-size:18px; color:var(--color-text-light, #D1D1D6); margin:0 auto 30px; max-width:700px; }

/* ─── Content ─── */
.lp-main { max-width:920px; margin:0 auto; padding:0 24px; }
.lp-main h2 { font-size:27px; font-weight:700; margin:48px 0 14px; letter-spacing:-0.3px; }
.lp-main h3 { font-size:18px; font-weight:700; margin:28px 0 8px; color:var(--color-text, #F5F5F7); }
.lp-main p { color:var(--color-text-light, #D1D1D6); margin:0 0 16px; }
.lp-main ul, .lp-main ol { color:var(--color-text-light, #D1D1D6); padding-left:22px; margin:0 0 18px; }
.lp-main li { margin:0 0 8px; }
.lp-main strong { color:var(--color-text, #F5F5F7); }

/* ─── Cards ─── */
.lp-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:20px; margin:28px 0; }
.lp-card { background:var(--color-surface, #1A1A1A); border:1px solid var(--color-border-strong, rgba(255,255,255,0.12)); border-radius:var(--radius-lg, 12px); padding:22px; }
.lp-card h3 { margin:0 0 8px; font-size:17px; }
.lp-card p { font-size:14px; margin:0; color:var(--color-text-muted, #9CA3AF); }

/* ─── Steps ─── */
.lp-steps { counter-reset:step; list-style:none; padding:0; margin:24px 0; }
.lp-steps > li { position:relative; padding:0 0 22px 56px; margin:0; }
.lp-steps > li::before { counter-increment:step; content:counter(step); position:absolute; left:0; top:0; width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:var(--color-accent-bg, rgba(255,93,24,0.08)); border:1px solid var(--color-accent, #FF5D18); color:var(--color-accent, #FF5D18); font-weight:700; border-radius:50%; }
.lp-steps h3 { margin:6px 0 6px; }

/* ─── CTA band ─── */
.lp-cta { text-align:center; background:linear-gradient(180deg, rgba(255,93,24,0.10), rgba(255,93,24,0.02)); border:1px solid var(--color-border-strong, rgba(255,255,255,0.12)); border-radius:var(--radius-xl, 16px); padding:48px 28px; margin:60px auto; max-width:840px; }
.lp-cta h2 { font-size:28px; margin:0 0 12px; }
.lp-cta p { color:var(--color-text-light,#D1D1D6); margin:0 auto 26px; max-width:580px; }

/* ─── FAQ ─── */
.lp-faq details { border-bottom:1px solid var(--color-border-strong, rgba(255,255,255,0.12)); padding:16px 0; }
.lp-faq summary { font-weight:700; font-size:16px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; color:var(--color-text,#F5F5F7); }
.lp-faq summary::-webkit-details-marker { display:none; }
.lp-faq summary::after { content:'+'; color:var(--color-accent,#FF5D18); font-size:22px; line-height:1; }
.lp-faq details[open] summary::after { content:'\2013'; }
.lp-faq p { margin:12px 0 0; color:var(--color-text-light,#D1D1D6); }

/* ─── Footer ─── */
.lp-footer { border-top:1px solid var(--color-border-strong, rgba(255,255,255,0.12)); margin-top:64px; padding:40px 24px; }
.lp-footer-inner { max-width:920px; margin:0 auto; }
.lp-footer-links { display:flex; flex-wrap:wrap; gap:10px 22px; margin-bottom:14px; }
.lp-footer-links a { color:var(--color-text-light, #D1D1D6); font-size:14px; }
.lp-footer-copy { font-size:12px; color:var(--color-text-dim, #6E6E73); margin:0; }

@media (max-width:640px){
  .lp-hero { padding:44px 18px 32px; }
  .lp-hero h1 { font-size:31px; }
  .lp-hero p { font-size:16px; }
  .lp-main h2 { font-size:22px; }
  .lp-header { padding:10px 16px; }
  .lp-header-nav { gap:12px; }
}