/* Shared design system — Default Base (2026-09-02 reskin)
   Same selectors/structure as the previous dark rust/sage system — every page
   on this site (index, quiz, report, intake, pay, call, contact, privacy,
   terms, niche pages) references these by class name and CSS variable, so
   changing the tokens here reskins the whole site with zero HTML/JS changes.
   Light background, single font family (Inter), red-orange action color —
   the "Default Base" kit Amit approved 2026-09-02. Grain texture removed
   (was part of the old dark-editorial look, not this one). */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --ink: #ffffff;
  --ink2: #f4f4f2;
  --panel2: #fbe7e0;
  --paper: #14161a;
  --paper-dim: #5b5e64;
  --line: #e4e4e1;
  --rust: #dc4b27;
  --rust-bright: #e8623d;
  --sage: #1e5f74;
  --danger: #c0392b;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: 'Inter', -apple-system, sans-serif;
  line-height: 1.6;
  font-size: 17px;
}

h1, h2, h3, .display {
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}

.wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; }
.wrap-narrow { max-width: 620px; }

a { color: var(--rust-bright); }

/* top nav */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
}
.nav .brand { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 18px; color: var(--paper); text-decoration: none; }
.nav .brand span { color: var(--rust-bright); }
.nav a.navlink { color: var(--paper-dim); text-decoration: none; font-size: 14px; }

/* hero */
.hero { padding: 64px 0 40px; }
.eyebrow {
  display: inline-block;
  color: var(--rust);
  background: var(--panel2);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12.5px;
  padding: 6px 14px;
  border-radius: 4px;
  margin-bottom: 18px;
}
h1.headline { font-size: 40px; line-height: 1.15; margin-bottom: 20px; }
h1.headline .accent { color: var(--rust); }
p.lede { font-size: 19px; color: var(--paper-dim); max-width: 540px; margin: 0 0 30px; }

/* the one repeated CTA style */
.cta {
  display: inline-block;
  background: var(--rust);
  color: #fff;
  padding: 15px 26px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 15.5px;
  text-decoration: none;
  border: 1px solid var(--rust);
  box-shadow: 0 4px 12px rgba(220,75,39,0.28);
}
.cta:hover { background: var(--rust-bright); border-color: var(--rust-bright); }
.cta-ghost {
  display: inline-block;
  color: var(--paper);
  padding: 14px 24px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: 1.5px solid var(--line);
}

/* sections */
section { padding: 44px 0; border-top: 1px solid var(--line); }
section.first { border-top: none; }
h2.section-title { font-size: 26px; margin-bottom: 20px; }
p { color: var(--paper); }
p.dim { color: var(--paper-dim); }

/* credibility block — used before any ask */
.proof {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 20px;
  background: var(--ink2);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.proof .avatar {
  flex: 0 0 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px dashed var(--paper-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper-dim);
  font-size: 11px;
  text-align: center;
  line-height: 1.3;
}
.proof .name { font-weight: 800; color: var(--paper); }
.proof .role { color: var(--paper-dim); font-size: 14.5px; }

/* card list, numbered circle badges */
.point-list { list-style: none; margin: 0; padding: 0; }
.point-list li {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  background: var(--ink2);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 12px;
}
.point-list li:last-child { margin-bottom: 0; }
.point-list .mark {
  flex: 0 0 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--panel2);
  border: 1px solid var(--rust);
  color: var(--rust);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
}
.point-list .p-title { font-weight: 700; margin-bottom: 3px; }
.point-list .p-desc { color: var(--paper-dim); font-size: 15px; }

/* stat cards */
.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 16px 18px;
  background: var(--ink2);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 12px;
}
.stat-row:last-of-type { margin-bottom: 0; }
.stat-row .label { color: var(--paper-dim); font-size: 14px; }
.stat-row .value { font-weight: 800; font-size: 18px; white-space: nowrap; }
.stat-row.total { border-color: var(--sage); background: var(--panel2); }
.stat-row.total .value { color: var(--sage); font-size: 22px; }

.pull-quote {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  background: var(--ink2);
  border: 1px solid var(--rust);
  border-radius: 14px;
  padding: 20px 22px;
  margin: 8px 0;
  color: var(--paper);
}

.tag-strip { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tag {
  border: 1px solid var(--line);
  color: var(--paper-dim);
  font-size: 11.5px;
  padding: 3px 10px;
  border-radius: 999px;
}

footer { padding: 30px 0 56px; color: var(--paper-dim); font-size: 13.5px; }

.placeholder-note {
  border: 1px dashed var(--danger);
  color: var(--danger);
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 4px;
  margin: 10px 0;
}

@media (max-width: 600px) {
  h1.headline { font-size: 30px; }
  p.lede { font-size: 17px; }
}