/* =====================================================================
   Pocket Change BDA — Design upgrade layer
   ---------------------------------------------------------------------
   Applies the Slacc-inspired design language (Inter type system with
   editorial-density tracking, over-padded pill buttons, 16px card
   geometry, caps eyebrows, generous section rhythm) on top of the
   EXISTING Pocket Change navy / lime / gold colour scheme.

   Loaded only on the content / marketing pages (home, about,
   ambassadors, camps, privacy, child-protection) — NOT the app pages.
   Layered after site + hero-square stylesheets so it wins on ties.
   ===================================================================== */

:root{
  --d-radius-card: 16px;   /* design.md rounded.xl  */
  --d-radius-pill: 90px;   /* design.md rounded.pill */
}

/* ── Type system: Inter for display + body (design.md substitute) ── */
body{
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.modern-hero h1,.subhero h1,
.section-heading h2,.photo-proof-panel h2,.flashcard-studio h2,
.apps-showcase h2,.founder-strip h2,.story-panel h2,.founder-profile h2,
.trust-panel h2,.policy-document h2,
h1,h2,h3,h4{
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
}

/* Display tier keeps the brand's tight, editorial negative tracking but
   firms up the weight the way the reference's 700-weight display does. */
.modern-hero h1,.subhero h1{ font-weight:800; }
.section-heading h2,.photo-proof-panel h2,.flashcard-studio h2,
.apps-showcase h2,.founder-strip h2,.story-panel h2,.founder-profile h2,
.trust-panel h2,.policy-document h2{ font-weight:800; }
h3{ font-weight:700; letter-spacing:-.01em; }

/* Eyebrows → uppercase tracked caps (design.md micro-cap eyebrow). */
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:700;
  font-size:.78rem;
}

/* ── Buttons: over-padded pills (design.md signature geometry) ── */
.btn{
  border-radius:var(--d-radius-pill);
  padding:.95rem 1.9rem;
  min-height:52px;
  font-weight:800;
  letter-spacing:.01em;
}
.header-cta{
  border-radius:var(--d-radius-pill);
  padding:.85rem 1.55rem;
}

/* ── Cards: unify to the 16px design.md card radius ── */
.program-card,.app-card,.pathway-card,.pillar-card,
.amb-card,.camp-card,.news-card{
  border-radius:var(--d-radius-card);
}

/* ── Inline body links → brand blue (design.md link-on-light) ──
   Scoped to prose in the policy documents; standalone CTA links keep
   their deliberate navy/lime treatment. */
.policy-document p a,
.policy-document li a{
  color:var(--blue,#0969a8);
  text-decoration:none;
}
.policy-document p a:hover,
.policy-document li a:hover{
  color:var(--navy,#08336f);
  text-decoration:underline;
}