/* ---------------------------------------------------------------
   pitchpro-site — Asphalt & Sky palette, light mode default.
   Forked from electricrm-site (Option A indigo dark mode) on 2026-05-21
   for the M3 marketing-site spinoff. All palette tokens live in :root
   so they can be tweaked centrally.
   --------------------------------------------------------------- */

:root {
  /* Asphalt & Sky palette (same tokens the app uses) */
  --color-primary:     #FF6B1A;   /* safety orange — main CTA, brand mark, focus ring */
  --color-primary-hov: #E55A0F;   /* darker orange for button hover */
  --color-primary-tint:#FFEEDC;   /* tinted backgrounds */
  --color-accent:      #3B82F6;   /* sky blue — secondary accents, "Pro" half of the wordmark */
  --color-accent-tint: #DBEAFE;
  --color-text:        #2B2D31;   /* charcoal asphalt — body text */
  --color-text-muted:  #6B7280;   /* secondary text */
  --color-bg:          #F5F5F4;   /* off-white page background */
  --color-surface:     #FFFFFF;   /* cards */
  --color-surface-alt: #EDEDEC;   /* alt rows */
  --color-border:      #D6D6D3;   /* dividers */
  --color-success:     #22C55E;
  --color-warning:     #F59E0B;
  --color-destructive: #DC2626;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif;

  --size-xs:  0.875rem;
  --size-sm:  1rem;
  --size-md:  1.125rem;
  --size-lg:  1.5rem;
  --size-xl:  2rem;
  --size-2xl: 2.5rem;
  --size-3xl: 3.5rem;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --container-max: 1100px;

  --sh-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --sh-md: 0 4px 12px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { overflow-x: hidden; }

img, svg { display: block; max-width: 100%; }

a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover { color: var(--color-primary-hov); }

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

h1, h2, h3 {
  margin: 0 0 var(--space-2);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--color-text);
}

p { margin: 0 0 var(--space-2); }

ul { margin: 0; padding: 0; list-style: none; }

/* skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  padding: var(--space-1) var(--space-2);
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-sm);
  z-index: 100;
  font-weight: 600;
}
.skip-link:focus { left: var(--space-2); top: var(--space-2); }

/* ── HEADER ─────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  background: rgba(245,245,244,0.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--color-border);
  z-index: 50;
}

.nav {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-2) var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: 700;
  font-size: var(--size-md);
  color: var(--color-text);
}
.nav__brand:hover { color: var(--color-text); }

.nav__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 700;
}

.brand__crm { color: var(--color-accent); }

.nav__login {
  font-weight: 600;
  font-size: var(--size-sm);
  color: var(--color-text);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.nav__login:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ── HERO ─────────────────────────────────────────── */

.hero {
  padding: var(--space-7) var(--space-3) var(--space-6);
  max-width: var(--container-max);
  margin: 0 auto;
  text-align: center;
}

.hero__headline {
  font-size: var(--size-3xl);
  line-height: 1.05;
  margin-bottom: var(--space-3);
}

.hero__subhead {
  font-size: var(--size-md);
  color: var(--color-text-muted);
  max-width: 620px;
  margin: 0 auto var(--space-4);
}

.hero__cta-row {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
}

/* ── BUTTONS ─────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--size-sm);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s, transform .05s;
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.btn--primary:hover { background: var(--color-primary-hov); border-color: var(--color-primary-hov); color: #fff; }

.btn--ghost {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn--ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }

.btn--lg { padding: var(--space-2) var(--space-4); font-size: var(--size-md); }

/* ── SECTIONS ─────────────────────────────────────────── */

main { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-3); }

.section-title {
  font-size: var(--size-2xl);
  text-align: center;
  margin-bottom: var(--space-5);
}

.features {
  padding: var(--space-6) 0;
}

.features__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
}

.feature {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--sh-sm);
}

.feature__icon {
  font-size: 1.8rem;
  margin-bottom: var(--space-2);
  color: var(--color-primary);
}

.feature__title {
  font-size: var(--size-md);
  margin-bottom: var(--space-1);
}

.feature__body {
  font-size: var(--size-sm);
  color: var(--color-text-muted);
}

/* ── WHY ─────────────────────────────────────────── */

.why { padding: var(--space-6) 0; background: var(--color-surface-alt); border-radius: var(--radius-lg); margin-top: var(--space-5); }

.why__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.why__heading {
  font-size: var(--size-md);
  color: var(--color-accent);
  margin-bottom: var(--space-1);
}

.why__body { color: var(--color-text-muted); }

/* ── USECASE ─────────────────────────────────────────── */

.usecase { padding: var(--space-6) 0; }

.usecase__story {
  max-width: 720px;
  margin: 0 auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--sh-sm);
}

.usecase__story p { font-size: var(--size-md); line-height: 1.7; }
.usecase__story strong { color: var(--color-primary); }

/* ── PRICING ─────────────────────────────────────────── */

.pricing { padding: var(--space-6) 0; }

.pricing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}

.tier {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  text-align: center;
  box-shadow: var(--sh-sm);
}

.tier--featured {
  border-color: var(--color-primary);
  background: var(--color-primary-tint);
  position: relative;
}

.tier__name { font-size: var(--size-md); }
.tier__price { margin: var(--space-2) 0; }
.tier__amount { font-size: var(--size-2xl); font-weight: 700; color: var(--color-primary); }
.tier__per { color: var(--color-text-muted); font-size: var(--size-sm); }
.tier__meta { color: var(--color-text-muted); font-size: var(--size-sm); margin-bottom: var(--space-2); }
.tier__list { font-size: var(--size-sm); color: var(--color-text-muted); }
.tier__list li { padding: 4px 0; }

/* ── CTA / SIGN-UP ─────────────────────────────────────────── */

.cta {
  padding: var(--space-6) 0 var(--space-7);
  text-align: center;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  margin-top: var(--space-5);
  box-shadow: var(--sh-sm);
  border: 1px solid var(--color-border);
}

.cta__lede {
  color: var(--color-text-muted);
  max-width: 540px;
  margin: 0 auto var(--space-4);
  font-size: var(--size-md);
}

.cta__form {
  max-width: 460px;
  margin: 0 auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cta__field { display: flex; flex-direction: column; gap: 4px; }

.cta__label {
  font-weight: 600;
  font-size: var(--size-sm);
}

.cta__input {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--size-md);
  font-family: inherit;
  background: var(--color-bg);
  color: var(--color-text);
}
.cta__input:focus { outline: 2px solid var(--color-primary); outline-offset: 0; border-color: var(--color-primary); }

#signup-submit { align-self: center; margin-top: var(--space-2); }

.cta__status {
  text-align: center;
  font-size: var(--size-sm);
  margin: var(--space-2) 0 0;
  min-height: 1.5em;
}
.cta__status.success { color: var(--color-success); }
.cta__status.error { color: var(--color-destructive); }

.cta__hp { display: none; }

/* ── FOOTER ─────────────────────────────────────────── */

.site-footer {
  text-align: center;
  padding: var(--space-4) var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--size-sm);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-6);
}

.site-footer__tag { margin: 0 0 var(--space-1); }
.site-footer__links { margin: 0; }
.site-footer__links a { color: var(--color-text-muted); margin: 0 var(--space-1); }
.site-footer__links a:hover { color: var(--color-primary); }

/* ── RESPONSIVE ─────────────────────────────────────────── */

@media (max-width: 640px) {
  .hero__headline { font-size: var(--size-2xl); }
  .hero { padding: var(--space-5) var(--space-2) var(--space-4); }
  .nav { padding: var(--space-1) var(--space-2); }
  .nav__login { display: none; }
}