/* ===========================================================================
   landing.css — public marketing pages (index, terms, privacy, refunds)
   Built on the shared design system (bc-tokens.css + biz-catalyst-core.css +
   platform.css). No external CDNs: Inter is self-hosted from /fonts/.
   =========================================================================== */

/* --- Self-hosted Inter (the four weights the shared components use) -------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-latin-700-normal.woff2') format('woff2');
}

/* --- Page frame ----------------------------------------------------------- */
body.lp {
  font-family: var(--bc-font);
  color: var(--bc-text);
  background: var(--bc-surface);
  line-height: var(--bc-line-height);
  margin: 0;
}

.lp-container {
  max-width: var(--bc-container-max);
  margin: 0 auto;
  padding-left: var(--bc-space-6);
  padding-right: var(--bc-space-6);
}

.lp-section { padding: var(--bc-space-12) 0; }
.lp-section__head { text-align: center; max-width: 640px; margin: 0 auto var(--bc-space-8); }
.lp-section__head h2 {
  font-size: var(--bc-font-size-2xl);
  font-weight: 700;
  line-height: var(--bc-line-height-tight);
  margin: 0 0 var(--bc-space-2);
}
.lp-section__head p { color: var(--bc-text-muted); margin: 0; }
.lp-section--tint { background: var(--bc-surface-raised); }

/* --- Header --------------------------------------------------------------- */
.lp-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bc-header-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.lp-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bc-space-4);
  min-height: 64px;
}
.lp-wordmark {
  font-size: var(--bc-font-size-lg);
  font-weight: 700;
  color: var(--bc-header-text-active);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.lp-header__nav { display: flex; align-items: center; gap: var(--bc-space-3); }
/* "Log in" reads as a quiet link on the dark bar; "Get started" is the CTA */
.lp-header__nav .lp-login {
  color: var(--bc-header-text-active);
  text-decoration: none;
  font-weight: 500;
  padding: var(--bc-space-2) var(--bc-space-3);
  border-radius: var(--bc-radius);
}
.lp-header__nav .lp-login:hover { background: rgba(255, 255, 255, 0.1); }

/* --- Hero ----------------------------------------------------------------- */
.lp-hero {
  padding: var(--bc-space-12) 0;
  background: linear-gradient(180deg, var(--bc-surface-raised), var(--bc-surface));
  text-align: center;
}
.lp-hero__inner { max-width: 760px; margin: 0 auto; }
.lp-hero h1 {
  font-size: clamp(1.875rem, 4vw + 1rem, 3rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--bc-space-4);
}
.lp-hero__sub {
  font-size: var(--bc-font-size-lg);
  color: var(--bc-text-muted);
  margin: 0 auto var(--bc-space-6);
  max-width: 620px;
}
.lp-hero__cta { display: flex; gap: var(--bc-space-3); justify-content: center; flex-wrap: wrap; }

/* --- App overview --------------------------------------------------------- */
.lp-app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--bc-space-5);
}
.lp-app-card {
  --app-accent: var(--bc-primary);
  position: relative;
  background: var(--bc-surface);
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius-lg);
  padding: var(--bc-space-5);
  box-shadow: var(--bc-shadow-sm);
  overflow: hidden;
}
.lp-app-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 4px;
  background: var(--app-accent);
}
.lp-app-card__icon {
  width: 44px; height: 44px;
  border-radius: var(--bc-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  background: color-mix(in srgb, var(--app-accent) 15%, transparent);
  margin-bottom: var(--bc-space-3);
}
.lp-app-card__name {
  display: flex;
  align-items: center;
  gap: var(--bc-space-2);
  font-weight: 600;
  font-size: var(--bc-font-size-lg);
  margin: 0 0 var(--bc-space-1);
}
.lp-app-card__desc { color: var(--bc-text-muted); font-size: var(--bc-font-size-sm); margin: 0; }
.lp-free-pill {
  font-size: var(--bc-font-size-xs);
  font-weight: 600;
  color: var(--bc-app-cadence);
  background: color-mix(in srgb, var(--bc-app-cadence) 16%, transparent);
  padding: 0.1rem 0.5rem;
  border-radius: var(--bc-radius-full);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* --- Pricing (reuses .pt-tier-* / .pricing-* from platform.css) ----------- */
.lp-pricing .pt-tier-grid { margin-bottom: var(--bc-space-6); }
.lp-pricing .pricing-transparency h3 { text-align: center; font-size: var(--bc-font-size-xl); }
.lp-pricing .pricing-transparency > p { text-align: center; }
.lp-value-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--bc-space-4);
  margin-top: var(--bc-space-8);
}
.lp-value-point {
  background: var(--bc-surface);
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius-lg);
  padding: var(--bc-space-5);
}
.lp-value-point h4 { margin: 0 0 var(--bc-space-2); font-size: var(--bc-font-size-base); font-weight: 600; }
.lp-value-point p { margin: 0; color: var(--bc-text-muted); font-size: var(--bc-font-size-sm); }
.tier-note { font-size: var(--bc-font-size-xs); color: var(--bc-text-muted); margin: var(--bc-space-1) 0 0; }

/* --- Contact -------------------------------------------------------------- */
.lp-contact { text-align: center; }
.lp-contact a { color: var(--bc-brand-primary); font-weight: 600; }

/* --- Footer --------------------------------------------------------------- */
.lp-footer {
  background: var(--bc-header-bg);
  color: var(--bc-header-text);
  padding: var(--bc-space-10) 0;
  font-size: var(--bc-font-size-sm);
}
.lp-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bc-space-6);
  justify-content: space-between;
}
.lp-footer__legal { max-width: 640px; line-height: 1.7; margin: 0; }
.lp-footer__legal strong { color: var(--bc-header-text-active); }
.lp-footer__links { display: flex; flex-direction: column; gap: var(--bc-space-2); }
.lp-footer__links a { color: var(--bc-header-text); text-decoration: none; }
.lp-footer__links a:hover { color: var(--bc-header-text-active); text-decoration: underline; }

/* --- Legal shell body ----------------------------------------------------- */
.lp-legal { max-width: 760px; margin: 0 auto; padding: var(--bc-space-12) 0; min-height: 40vh; }
.lp-legal h1 { font-size: var(--bc-font-size-2xl); font-weight: 700; margin: 0 0 var(--bc-space-4); }
.lp-legal__notice {
  background: var(--bc-warning-tint, #fef3c7);
  border: 1px solid var(--bc-warning-border, #fcd34d);
  border-radius: var(--bc-radius);
  padding: var(--bc-space-4) var(--bc-space-5);
  color: var(--bc-text);
}

/* --- Legal prose ---------------------------------------------------------- */
.lp-legal__updated { color: var(--bc-text-muted); font-size: var(--bc-font-size-sm); margin: 0 0 var(--bc-space-8); }
.lp-legal h2 { font-size: var(--bc-font-size-xl); font-weight: 700; margin: var(--bc-space-8) 0 var(--bc-space-3); }
.lp-legal h3 { font-size: var(--bc-font-size-lg); font-weight: 600; margin: var(--bc-space-6) 0 var(--bc-space-2); }
.lp-legal p { color: var(--bc-text); line-height: 1.7; margin: 0 0 var(--bc-space-4); }
.lp-legal ul { margin: 0 0 var(--bc-space-4); padding-left: var(--bc-space-6); }
.lp-legal li { line-height: 1.7; margin: 0 0 var(--bc-space-2); }
.lp-legal a { color: var(--bc-brand-primary); font-weight: 600; text-decoration: none; }
.lp-legal a:hover { text-decoration: underline; }
.lp-legal table { width: 100%; border-collapse: collapse; margin: 0 0 var(--bc-space-4); font-size: var(--bc-font-size-sm); }
.lp-legal th, .lp-legal td { text-align: left; padding: var(--bc-space-3); border: 1px solid var(--bc-border); vertical-align: top; }
.lp-legal thead th { background: var(--bc-primary-tint); font-weight: 600; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 640px) {
  .lp-section { padding: var(--bc-space-10) 0; }
  .lp-hero { padding: var(--bc-space-10) 0; }
  .lp-header__nav { gap: var(--bc-space-2); }
  .lp-footer__inner { flex-direction: column; gap: var(--bc-space-6); }
}