/* PodiumSafety marketing site — placeholder brand palette.
   No dedicated marketing brand exists yet (see docs/podiumsafety-marketing-site-brief.md
   Section 2) — this reuses the already-locked in-product primary navy
   (docs/podium-safety-color-palette-appendix.md) as the "confident dark navy base" the brief
   asks for, plus one new accent colour for marketing CTAs only. The accent is deliberately NOT
   one of the product's severity colours (green/gold/burnt-orange/red/maroon) so it never reads
   as a severity signal if a real app screenshot ever sits next to it on this site.

   Every brand value lives here as a CSS custom property so a real brand pass later is a
   find-and-replace, not a redesign — see the list below.
   <!-- LOGO PLACEHOLDER: swap the text wordmark in the navbar for a real mark when supplied --> */

:root {
  /* --- Brand palette (placeholder — see comment above) --- */
  --brand-primary: #042C53;       /* reused from the product's locked primary navy */
  --brand-primary-dark: #021D38;  /* hover/active shade, derived from primary */
  --brand-primary-tint: #E6F1FB;  /* reused from the product's locked light tint */
  --brand-accent: #E08D2C;        /* NEW placeholder accent — marketing CTAs only, not a severity colour */
  --brand-accent-dark: #C97620;   /* hover/active shade, derived from accent */
  --brand-text: #1A1A1A;          /* reused from the product's locked neutral text */
  --brand-text-muted: #6B6B6B;    /* reused from the product's locked muted text */
  --brand-bg: #FFFFFF;
  --brand-bg-alt: #F7F9FB;        /* new, subtle section-alternation background */
  --brand-border: #E2E8EF;

  /* --- Type (placeholder — system font stack per the brief, no webfont dependency) --- */
  --brand-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --bs-primary: var(--brand-primary);
  --bs-body-color: var(--brand-text);
  --bs-body-bg: var(--brand-bg);
  --bs-link-color: var(--brand-primary);
  --bs-font-sans-serif: var(--brand-font);
}

body {
  font-family: var(--brand-font);
  background-color: var(--brand-bg);
  color: var(--brand-text);
}

.text-muted { color: var(--brand-text-muted) !important; }

.navbar-brand-podium {
  font-weight: 700;
  font-size: 1.25rem;
  color: #fff !important;
}

.navbar-podium {
  background-color: var(--brand-primary);
}

.btn-brand-primary {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}
.btn-brand-primary:hover, .btn-brand-primary:focus {
  background-color: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
  color: #fff;
}

.btn-brand-accent {
  background-color: var(--brand-accent);
  border-color: var(--brand-accent);
  color: #fff;
}
.btn-brand-accent:hover, .btn-brand-accent:focus {
  background-color: var(--brand-accent-dark);
  border-color: var(--brand-accent-dark);
  color: #fff;
}

.btn-lg-podium {
  padding: 0.85rem 1.75rem;
  font-size: 1.05rem;
  font-weight: 600;
  border-radius: 0.5rem;
}

.section-alt {
  background-color: var(--brand-bg-alt);
}

.callout-tint {
  background-color: var(--brand-primary-tint);
  color: var(--brand-primary);
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
}

/* Every screen/QR-example slot on this site is a clearly-marked placeholder, not a blank box —
   per docs/podiumsafety-marketing-site-brief.md Section 9. */
.screen-placeholder {
  border: 2px dashed var(--brand-border);
  border-radius: 0.75rem;
  background-color: var(--brand-bg-alt);
  color: var(--brand-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.9rem;
  padding: 2rem 1rem;
  min-height: 220px;
}

.report-tile {
  border: 1px solid var(--brand-border);
  border-radius: 0.75rem;
  padding: 1.75rem;
  height: 100%;
  background-color: var(--brand-bg);
}

.report-tile .report-tile-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: var(--brand-primary-tint);
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.step-number {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: var(--brand-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

.footer-podium {
  background-color: var(--brand-bg-alt);
  border-top: 1px solid var(--brand-border);
}

.footer-podium a {
  color: var(--brand-text-muted);
  text-decoration: none;
}
.footer-podium a:hover {
  color: var(--brand-primary);
  text-decoration: underline;
}

.hero-band {
  background: linear-gradient(180deg, var(--brand-primary-tint) 0%, var(--brand-bg) 100%);
}

.social-proof-placeholder {
  border: 1px dashed var(--brand-border);
  border-radius: 0.5rem;
  padding: 1.5rem;
  color: var(--brand-text-muted);
  text-align: center;
  font-size: 0.9rem;
}

.form-confirmation {
  display: none;
}