/* Shared chrome for Valueatorpro's public marketing pages (landing, pricing,
   auth) — extends style.css's tokens rather than opening a new visual world.
   Page-specific sections (hero, tiles, pricing cards, etc.) stay inline in
   each page's own <style> block; only what's identical across pages lives
   here. */

body { background: var(--ground); }

.lp-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 40px; background: rgba(247, 247, 248, 0.86);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.lp-mark { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.lp-mark img { width: 26px; height: 26px; }
.lp-nav { display: flex; align-items: center; gap: 28px; }
.lp-nav a { font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.lp-nav a:hover { color: var(--ink); }
.lp-nav-cta {
  padding: 9px 18px; border-radius: 999px; background: var(--accent-deep); color: #fff !important;
  transition: background-color 160ms ease-out;
}
.lp-nav-cta:hover { background: var(--accent-press); }

.lp-section { padding: 88px 40px; max-width: 1180px; margin: 0 auto; }
.lp-section-tight { padding-top: 64px; padding-bottom: 64px; }

.lp-section-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.lp-section-head h2 { font-size: 34px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
.lp-section-head p { margin-top: 14px; font-size: 16px; color: var(--ink-2); line-height: 1.55; }

.lp-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px; border-radius: 999px; background: var(--accent-deep); color: #fff;
  font-size: 15.5px; font-weight: 700; letter-spacing: -0.006em; text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: background-color 160ms ease-out, transform 160ms ease-out;
}
.lp-btn-primary:hover { background: var(--accent-press); transform: translateY(-1px); }
.lp-btn-primary .ic { width: 16px; height: 16px; }
.lp-link { font-size: 14.5px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.lp-link:hover { color: var(--ink); }

/* ---------- Closing CTA band (reused by landing + pricing) ---------- */
.lp-closing { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 40px 96px; box-sizing: border-box; }
.lp-closing-card {
  background: var(--accent-deep); border-radius: var(--r-card); padding: 64px 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  box-shadow: var(--shadow-raise);
}
.lp-closing-card h2 { color: #fff; font-size: 32px; font-weight: 700; letter-spacing: -0.025em; max-width: 14ch; line-height: 1.15; }
.lp-closing-card p { color: rgba(255,255,255,0.82); font-size: 14.5px; margin-top: 12px; max-width: 40ch; }
.lp-closing-actions { flex: none; text-align: right; }
.lp-btn-white {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px; border-radius: 999px; background: #fff; color: var(--accent-deep);
  font-size: 15.5px; font-weight: 700; text-decoration: none;
  transition: transform 160ms ease-out;
}
.lp-btn-white:hover { transform: translateY(-1px); }
.lp-closing-fine { color: rgba(255,255,255,0.72); font-size: 12px; margin-top: 12px; }

/* ---------- Footer ---------- */
.lp-footer {
  width: 100%; max-width: 1180px; margin: 0 auto; padding: 32px 40px 48px;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--hairline);
  box-sizing: border-box;
}
.lp-footer-nav { display: flex; gap: 22px; }
.lp-footer-nav a { font-size: 13px; color: var(--ink-3); text-decoration: none; }
.lp-footer-nav a:hover { color: var(--ink-2); }
.lp-footer-fine { font-size: 12.5px; color: var(--ink-3); }

@media (max-width: 860px) {
  .lp-header { padding: 14px 20px; }
  .lp-nav { gap: 16px; }
  .lp-nav a:not(.lp-nav-cta) { display: none; }
  .lp-section, .lp-hero, .lp-closing, .lp-footer { padding-left: 20px; padding-right: 20px; }
  .lp-closing-card { flex-direction: column; align-items: flex-start; text-align: left; padding: 40px 28px; }
  .lp-closing-actions { text-align: left; }
  .lp-closing-card h2 { max-width: none; }
  .lp-footer { flex-direction: column; gap: 16px; align-items: flex-start; }
}