/* ---------------------------------------------------------------------------
   War Room / Second Offer(TM) -- brand system.
   Single source of truth for every surface: landing, coming-soon, intake,
   status, offer, and the PDF report (which re-declares these values inline
   because it must render standalone in Playwright).

   Palette sampled directly from Chris's approved landing-page design rather
   than estimated. Earlier files carried three different navies and two
   different greens across the app; these are the real ones.
   --------------------------------------------------------------------------- */
:root {
  --navy:       #0a354e;   /* primary brand ground and headline colour */
  --navy-deep:  #072838;   /* footers, dark bands */
  --olive:      #456126;   /* accent, icon marks, primary action */
  --olive-deep: #37501d;   /* action hover */
  --gold:       #c9962e;   /* rule under the dark header, sparing highlight */
  --cream:      #f9f8f1;   /* page ground */
  --paper:      #ffffff;   /* cards */
  --ink:        #1c2a38;   /* body text */
  --muted:      #5d6b78;   /* secondary text */
  --line:       #dfdccd;   /* hairlines */
  --error:      #a33d32;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  font-family: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }

/* --- brand lockup: boxed wordmark + tagline, per the approved design ------ */
.lockup { display: inline-block; }
.lockup .box {
  border: 2px solid var(--navy);
  padding: 5px 13px 4px;
  display: inline-block;
}
.lockup .word {
  font-size: 1.42rem; font-weight: 800; letter-spacing: .06em;
  color: var(--navy); line-height: 1; white-space: nowrap;
}
.lockup .tag {
  font-size: .5rem; font-weight: 700; letter-spacing: .13em;
  color: var(--navy); margin-top: 5px; white-space: nowrap;
}
.lockup.on-dark .box { border-color: #fff; }
.lockup.on-dark .word, .lockup.on-dark .tag { color: #fff; }
.lockup.sm .word { font-size: 1.1rem; }
.lockup.sm .tag { font-size: .44rem; }

/* --- header -------------------------------------------------------------- */
.brandbar {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 14px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

/* --- actions ------------------------------------------------------------- */
.btn {
  display: inline-block; background: var(--olive); color: #fff;
  font-weight: 700; font-size: .95rem; padding: 13px 24px;
  border: none; border-radius: 5px; text-decoration: none; cursor: pointer;
  text-align: center;
}
.btn:hover { background: var(--olive-deep); }
.btn.navy { background: var(--navy); }
.btn.navy:hover { background: var(--navy-deep); }
.btn.outline {
  background: transparent; color: var(--navy);
  border: 1.5px solid var(--navy); font-weight: 700;
}
.btn.outline:hover { background: var(--navy); color: #fff; }
.btn.block { display: block; width: 100%; }

/* --- the four approved pillars ------------------------------------------- */
.pillars {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.pillar .dot {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--olive); margin-bottom: 11px;
  display: flex; align-items: center; justify-content: center;
}
.pillar .dot svg { width: 20px; height: 20px; fill: #fff; }
.pillar h3 {
  font-size: .78rem; font-weight: 800; letter-spacing: .05em;
  color: var(--navy); margin: 0 0 5px; text-transform: uppercase; line-height: 1.25;
}
.pillar p { font-size: .84rem; line-height: 1.5; color: var(--muted); margin: 0; }

/* --- typography ---------------------------------------------------------- */
.eyebrow {
  font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  color: var(--olive); margin-bottom: 14px;
}
h1, h2, h3 { color: var(--navy); }
h1 { font-weight: 800; letter-spacing: -.015em; line-height: 1.06; }
h1 .accent { color: var(--olive); }

/* --- footer -------------------------------------------------------------- */
.site-footer {
  background: var(--navy); color: #fff; padding: 28px 32px 24px; margin-top: 48px;
}
.site-footer .foot-inner {
  max-width: 980px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; flex-wrap: wrap;
}
.site-footer .footer-links { font-size: .8rem; }
.site-footer .footer-links a { color: #cfd8e2; text-decoration: none; margin-left: 16px; }
.site-footer .footer-links a:hover { text-decoration: underline; }
.site-footer .foot-fine {
  max-width: 980px; margin: 20px auto 0; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.16);
  font-size: .72rem; line-height: 1.55; color: #aebbc8;
}
.site-footer .foot-fine .built { color: #cfd8e2; margin-bottom: 6px; }

@media (max-width: 860px) {
  .pillars { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .brandbar, .site-footer { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 520px) {
  .pillars { grid-template-columns: 1fr; }
}