/* Marketing site — layered on top of app.css */
body.site { background:#fff; }

.site-nav {
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 2rem; max-width:1200px; margin:0 auto; gap:1rem; flex-wrap:wrap;
}
.site-brand { display:flex; align-items:center; gap:.5rem; font-weight:800; font-size:1.15rem; color:var(--navy); }
.site-links { display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.site-links a { color:var(--muted); font-weight:600; font-size:.92rem; }
.site-links a:hover { color:var(--navy); text-decoration:none; }
.site-signin { color:var(--navy) !important; }
.site-cta { color:#fff !important; padding:.5rem .95rem; }
.site-flashes { max-width:900px; margin:0 auto; padding:0 2rem; }

/* Hero */
.hero {
  display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center;
  max-width:1200px; margin:1rem auto 0; padding:3rem 2rem 4rem;
}
.eyebrow { color:var(--teal-600); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; }
.hero h1 { font-size:2.9rem; line-height:1.08; margin:.6rem 0 1rem; color:var(--ink); letter-spacing:-.02em; }
.lede { font-size:1.18rem; color:var(--muted); max-width:36ch; }
.hero-cta { display:flex; gap:.8rem; margin:1.6rem 0 1.2rem; flex-wrap:wrap; }
.ghost-dark { background:#fff; color:var(--navy); border:1px solid var(--line); }
.ghost-dark:hover { background:#f2f5f9; }
.hero-badges { display:flex; gap:.5rem; flex-wrap:wrap; }

.hero-panel { display:flex; justify-content:center; }
.mini-dash {
  background:linear-gradient(160deg,#1f3a5f,#16293f); color:#fff; border-radius:18px;
  padding:1.4rem; width:100%; max-width:360px; box-shadow:0 24px 60px rgba(16,32,55,.28);
}
.mini-row { display:flex; justify-content:space-between; align-items:center; padding:.5rem 0; border-bottom:1px solid rgba(255,255,255,.12); }
.mini-row strong { font-size:1.5rem; }
.mini-row strong.amber { color:#f0b95a; } .mini-row strong.red { color:#f2887c; }
.mini-bar { background:rgba(255,255,255,.08); border-radius:9px; padding:.55rem .7rem; margin-top:.6rem; font-size:.86rem; }
.mini-bar em { font-style:normal; font-weight:700; }
.mini-bar.watch { border:1px solid #f0b95a; }

/* Bands */
.band { max-width:1120px; margin:0 auto; padding:3.5rem 2rem; }
.band.alt { background:var(--bg); max-width:none; }
.band.alt > * { max-width:1120px; margin-left:auto; margin-right:auto; }
.band.narrow { max-width:760px; }
.band-title { font-size:2rem; text-align:center; margin:0 0 .4rem; letter-spacing:-.01em; }
.band-sub { text-align:center; color:var(--muted); max-width:60ch; margin:0 auto 2rem; }

.feature-grid, .sec-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:1.5rem; }
.feature, .sec { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem; box-shadow:var(--shadow); }
.feature h3, .sec h3 { margin:0 0 .5rem; font-size:1.1rem; color:var(--navy); }
.feature p, .sec p { margin:0; color:var(--muted); font-size:.95rem; }

.cat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.cat { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem; }
.cat-tag { display:inline-block; background:var(--navy); color:#fff; border-radius:999px; padding:.2rem .7rem; font-size:.8rem; font-weight:700; margin-bottom:.6rem; }
.cat p { margin:0; color:var(--muted); font-size:.92rem; }

.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-top:1.5rem; }
.step { text-align:left; }
.step-n { display:inline-flex; width:38px; height:38px; align-items:center; justify-content:center; border-radius:50%; background:var(--teal); color:#fff; font-weight:800; margin-bottom:.6rem; }
.step h3 { margin:.2rem 0 .3rem; font-size:1.05rem; }
.step p { margin:0; color:var(--muted); font-size:.92rem; }

.disclaimer { text-align:center; color:var(--muted); font-size:.85rem; margin-top:1.5rem; max-width:70ch; margin-left:auto; margin-right:auto; }

/* Pricing */
.price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; align-items:start; }
.price { background:#fff; border:1px solid var(--line); border-radius:14px; padding:1.6rem; box-shadow:var(--shadow); position:relative; }
.price.featured { border:2px solid var(--teal); }
.price-flag { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--teal); color:#fff; font-size:.72rem; font-weight:700; padding:.2rem .7rem; border-radius:999px; }
.price h3 { margin:.2rem 0; color:var(--navy); }
.amt { font-size:2.2rem; font-weight:800; color:var(--ink); margin:.3rem 0 1rem; }
.amt span { font-size:.9rem; font-weight:500; color:var(--muted); }
.price ul { list-style:none; padding:0; margin:0 0 1.2rem; }
.price li { padding:.35rem 0 .35rem 1.4rem; position:relative; color:var(--muted); font-size:.92rem; border-bottom:1px solid var(--line); }
.price li::before { content:"✓"; position:absolute; left:0; color:var(--teal-600); font-weight:800; }

.cta-band { background:linear-gradient(160deg,#1f3a5f,#16293f); color:#fff; text-align:center; padding:3.5rem 2rem; }
.cta-band h2 { font-size:2rem; margin:0 0 .4rem; }
.cta-band p { color:#c7d6e8; margin:0 0 1.4rem; }

.contact-form { max-width:680px; margin:0 auto; }
.code-block { background:#16293f; color:#e6edf3; border-radius:10px; padding:1rem; overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.85rem; line-height:1.5; white-space:pre; }
.band.narrow h3 { margin-top:1.6rem; }

/* Footer */
.site-footer { background:#16293f; color:#c7d6e8; margin-top:2rem; }
.site-footer-grid { max-width:1120px; margin:0 auto; padding:3rem 2rem 1.5rem; display:grid; grid-template-columns:2fr 1fr 1fr; gap:2rem; }
.site-footer h4 { color:#fff; margin:0 0 .6rem; font-size:.95rem; }
.site-footer a { display:block; color:#a9c0da; padding:.2rem 0; font-size:.9rem; }
.site-footer a:hover { color:#fff; }
.site-footer p { color:#8ba6c4; font-size:.9rem; max-width:34ch; }
.site-legal { max-width:1120px; margin:0 auto; padding:1.2rem 2rem 2.5rem; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.78rem; color:#7f9bbb; }

@media (max-width: 900px){
  .hero { grid-template-columns:1fr; }
  .feature-grid, .sec-grid, .cat-grid, .steps, .price-grid, .site-footer-grid { grid-template-columns:1fr 1fr; }
  .hero h1 { font-size:2.2rem; }
}
@media (max-width: 560px){
  .feature-grid, .sec-grid, .cat-grid, .steps, .price-grid, .site-footer-grid { grid-template-columns:1fr; }
  .site-nav { padding:.8rem 1rem; }
}