/* =========================================================================
   Version 4 — Custom
   The nav, hero and partner logos are styled exactly like Version 3
   (Starlight), except "beyond" uses the same font. From "The challenge"
   down, the page is Version 1 (Lavender) with word-by-word reveals,
   larger How It Works steps and bolder impact numbers.
   ========================================================================= */

:root {
  --bg: #FAF6FF;
  --surface: #FFFFFF;
  --surface-2: #F2EAFA;
  --text: #2A1A33;
  --muted: #66566F;
  --heading: #4B2A5E;
  --line: rgba(75, 42, 94, 0.12);
  --why: #613B75;

  --font-display: 'League Spartan', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.015em;

  --btn-radius: 999px;
  --primary-bg: var(--orange);
  --primary-fg: #2A1636;
  --primary-hover: #F2A955;
  --primary-shadow: 0 10px 24px -12px rgba(233, 154, 59, 0.9);
  --secondary-fg: var(--brand);
  --secondary-border: #B497CF;

  --nav-bg: rgba(255, 255, 255, 0.94);
  --nav-radius: 16px;
  --nav-shadow: 6px 8px 0 -2px rgba(205, 182, 224, 0.55), 0 10px 30px rgba(75, 42, 94, 0.06);

  --hiw-bg: var(--bg);
  --hiw-line: #D8C8E6;
  --hiw-fill: linear-gradient(#B497CF, var(--brand));
}

body { font-size: 17.5px; }
.eyebrow { font-family: var(--font-body); }

/* ---- Top of page in Version 3 style: nav, hero, partner logos ------------- */
.site-header, .mobile-menu, .hero, .partners {
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.035em;
  --heading: #1E1225;
  --text: #241A2B;
  --muted: #66596E;
  --line: rgba(30, 18, 37, 0.09);
  --btn-radius: 999px;
  --primary-bg: var(--brand);
  --primary-fg: #FFFFFF;
  --primary-hover: var(--brand-600);
  --primary-shadow: 0 10px 30px -10px rgba(133, 79, 159, 0.85);
  --secondary-fg: #1E1225;
  --secondary-border: rgba(30, 18, 37, 0.14);
  --secondary-bg: #FFFFFF;
  font-family: var(--font-body);
}
.site-header {
  --nav-bg: rgba(255, 255, 255, 0.82);
  --nav-radius: 999px;
  --nav-border: rgba(30, 18, 37, 0.06);
  --nav-shadow: 0 10px 40px -12px rgba(30, 18, 37, 0.14);
  --nav-shadow-scrolled: 0 10px 40px -12px rgba(30, 18, 37, 0.2);
}
.nav { padding-left: 26px; }
.site-header .eyebrow, .hero .eyebrow, .partners .eyebrow { font-family: var(--font-body); }

.hero {
  position: relative; overflow: hidden; overflow: clip visible; text-align: center;
  padding-top: calc(var(--header-h) + clamp(56px, 8vw, 116px));
  background:
    radial-gradient(60% 50% at 50% 100%, rgba(205, 182, 224, 0.45) 0%, rgba(205, 182, 224, 0) 70%),
    radial-gradient(40% 30% at 15% 20%, rgba(233, 154, 59, 0.08) 0%, rgba(233, 154, 59, 0) 70%),
    #FCFAFE;
}
.hero__inner { display: flex; flex-direction: column; align-items: center; }
.hero .h1 { font-size: clamp(54px, 8.4vw, 112px); line-height: .95; letter-spacing: -0.045em; color: var(--heading); }
.hero .h1 em { font: inherit; letter-spacing: inherit; color: var(--brand); }
/* One clean line on tablets and up: the size scales to the available width. */
@media (min-width: 721px) {
  .hero .h1 { white-space: nowrap; font-size: min(112px, calc((min(100vw, 1264px) - 2 * var(--gutter)) / var(--h1-fit, 11.75))); }
}
.hero .lead { margin-top: 26px; max-width: 40ch; }
.hero .btn-row { justify-content: center; margin-top: 34px; }
.hero .app-menu__panel { left: 50%; transform: translate(-50%, -6px); }
.hero .app-menu.is-open .app-menu__panel { transform: translate(-50%, 0); }
.hero__visual {
  position: relative; width: 100%; max-width: 820px; height: clamp(380px, 46vw, 500px); margin-top: clamp(36px, 5vw, 56px);
  -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent);
}
.hero__visual .phone-stage { position: absolute; inset: 0; align-items: start; }
.js .hero__visual { animation: hero-rise 1s .3s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
.hero .tile-a { left: 6%; top: 8%; --r: -8deg; }
.hero .tile-b { right: 6%; top: 4%; --r: 7deg; }
.hero .tile-c { left: 14%; top: 52%; --r: 5deg; }
.hero .tile-d { right: 13%; top: 48%; --r: -6deg; }
@media (max-width: 720px) {
  .float-tile { width: 68px; height: 68px; border-radius: 20px; }
  .hero .tile-a { left: 0; } .hero .tile-b { right: 0; } .hero .tile-c { left: 2%; } .hero .tile-d { right: 2%; }
}

.partners { padding-block: 56px var(--section-y); background: #FCFAFE; }
.partners__label { margin-bottom: 26px; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.partners__row img { filter: grayscale(1) contrast(1.1); opacity: .55; transition: filter .25s, opacity .25s; }
.partners__row img:hover { filter: none; opacity: 1; }

/* ---- Why (deep purple band) --------------------------------------------- */
.why { margin-top: 0; background: var(--why); color: #fff; padding-block: clamp(56px, 8vw, 120px); }
.why__row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.why__row + .why__row { margin-top: clamp(72px, 10vw, 140px); }
.why__row--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.why .eyebrow { color: #D9C4EA; margin-bottom: 18px; }
.why .h2 { color: #fff; font-size: clamp(32px, 4.2vw, 54px); line-height: 1.08; }
.why em { font-style: normal; text-transform: uppercase; color: #F6B567; }
.why__art { width: 100%; height: auto; max-width: 520px; justify-self: center; }
.why__sub { margin-top: 22px; color: rgba(255, 255, 255, 0.78); font-size: 19px; max-width: 42ch; }
.why .link-arrow { margin-top: 26px; color: #fff; }
@media (max-width: 860px) {
  .why__row, .why__row--flip { grid-template-columns: 1fr; }
  .why__row--flip .why__art { order: 2; }
}

/* ---- How it works ------------------------------------------------------- */
.hiw__head .eyebrow { margin-bottom: 10px; }
.hiw__head .h2 { color: #4B2A5E; }
.hiw__n { color: var(--orange-600); }
.hiw__art img { filter: drop-shadow(0 30px 40px rgba(75, 42, 94, 0.08)); }

/* ---- Impact ------------------------------------------------------------- */
.impact__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.impact__partner { background: #fff; border-radius: var(--radius-lg); padding: clamp(32px, 5vw, 56px); display: grid; justify-items: center; gap: 22px; text-align: center; box-shadow: 0 20px 50px -30px rgba(75, 42, 94, 0.35); }
.impact__partner figcaption { color: var(--muted); font-size: 16px; max-width: 30ch; }
.impact__stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.impact__stats li { display: grid; grid-template-columns: clamp(120px, 13vw, 190px) 1fr; align-items: center; gap: 4px 22px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.impact__stats li:last-child { border-bottom: 0; }
.impact__stats .stat__num { font-size: clamp(56px, 7vw, 88px); color: var(--brand); }
.impact__stats .stat__label { font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.2; color: var(--heading); }
@media (max-width: 860px) { .impact__grid { grid-template-columns: 1fr; } }

/* ---- CTA ---------------------------------------------------------------- */
.cta { padding-top: 0; }
.cta__card { background: var(--why); color: #fff; }
.cta__card::after {
  content: ""; position: absolute; right: -120px; top: -120px; width: 360px; height: 360px; border-radius: 22%;
  background: rgba(255, 255, 255, 0.05); transform: rotate(18deg);
}
.cta__card .h2 { color: #fff; }
.cta__card .lead { color: rgba(255, 255, 255, 0.8); }
.cta__card .btn--secondary { --secondary-fg: #fff; --secondary-border: rgba(255, 255, 255, 0.5); }
.cta__card .hipaa { --hipaa-bg: rgba(255, 255, 255, 0.1); --hipaa-fg: #fff; }

/* ---- Footer ------------------------------------------------------------- */
.footer { --footer-bg: #2A1636; --footer-text: #fff; --footer-muted: rgba(255, 255, 255, 0.68); --footer-head: #D9C4EA; --footer-line: rgba(255, 255, 255, 0.12); }
.footer .hipaa { --hipaa-bg: rgba(255, 255, 255, 0.08); --hipaa-fg: #fff; }

/* ---- About -------------------------------------------------------------- */
.page-hero .h1 em { font-style: normal; color: var(--brand); }
.team { background: #fff; }
.person__photo { box-shadow: 0 24px 50px -30px rgba(75, 42, 94, 0.5); }
.role { background: #fff; box-shadow: 0 16px 40px -30px rgba(75, 42, 94, 0.4); }

/* ---- The challenge + Our solution: words light up as you scroll (from Version 3) */
.js .why .statement .w { color: rgba(255, 255, 255, 0.26); transition: color .35s ease; }
.js .why .statement .w.is-lit { color: #fff; }
.js .why .statement em .w { color: rgba(246, 181, 103, 0.32); }
.js .why .statement em .w.is-lit { color: #F6B567; }

/* ---- How it works: larger step text --------------------------------------- */
@media (min-width: 861px) { .hiw__grid { grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); } }
.hiw__track { --node: 76px; --gap: 32px; --h3: clamp(24px, 3.4vh, 33px); --lead: clamp(20px, 3.6vh, 56px); --step-gap: clamp(16px, 2.6vh, 34px); }
.hiw__desc > p { font-size: clamp(16px, 2.15vh, 20px); line-height: 1.55; max-width: 48ch; }
@media (min-width: 861px) { .hiw__grid { row-gap: clamp(14px, 2.4vh, 28px); } }
@media (min-width: 861px) and (max-height: 820px) {
  .hiw__track { --node: 64px; --gap: 28px; --h3: clamp(22px, 3.6vh, 29px); --lead: 24px; --step-gap: 16px; }
  .hiw__desc > p { font-size: clamp(15.5px, 2.2vh, 17.5px); }
}
@media (max-width: 860px) {
  .hiw__track { --node: 52px; --gap: 18px; --h3: 21px; --lead: 24px; --step-gap: 16px; }
  .hiw__desc > p { font-size: 16.5px; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .hiw__track { --node: 46px; --h3: 19px; }
  .hiw__art { height: min(26svh, 240px); }
}

/* ---- Impact: bigger, bolder numbers + uppercase labels ------------------- */
.impact__stats li { grid-template-columns: calc(clamp(72px, 9vw, 120px) * 2.45) minmax(0, 1fr); gap: 4px 20px; padding: 26px 0; }
.impact__stats .stat__num { font-size: clamp(72px, 9vw, 120px); font-weight: 800; letter-spacing: -0.045em; line-height: .9; }
.impact__stats .stat__label {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  font-size: clamp(16px, 1.45vw, 20px); line-height: 1.3; color: var(--heading);
}
@media (max-width: 600px) {
  .impact__stats li { grid-template-columns: 1fr; gap: 10px; }
}

/* ---- About: centered founders (from Version 3) ---------------------------- */
.team .section-head { margin-inline: auto; text-align: center; }
.team-grid { justify-content: center; }

/* ---- Header: orange Volunteer Sign Up button ------------------------------ */
.btn--accent { background: var(--orange); color: #2A1636; box-shadow: 0 10px 24px -12px rgba(233, 154, 59, 0.9); }
.btn--accent:hover { background: #F2A955; }
.nav__actions { gap: 8px; }
.mobile-menu .btn--accent { flex-basis: 100%; }
/* With three buttons the full header needs more room, so switch to the
   menu button a little earlier than the other versions. */
@media (max-width: 1180px) {
  .nav { grid-template-columns: 1fr auto; padding-left: 18px; }
  .nav__links, .nav__login, .nav__volunteer { display: none; }
  .menu-toggle { display: inline-grid; }
}