/* ==========================================================================
   Character Commons — v3 landing page
   1:1 port of Figma node 166:8527 (1424px design frame), made responsive.
   All type, colour and button values are the Figma values verbatim.
   ========================================================================== */

:root {
  /* palette (verbatim from Figma) */
  --ink: #18181b;
  --gold: #9e7e38;
  --gold-deep: #7e652d;
  --gold-btn: #8c6d2c;
  --blue: #16597a;
  --gray-505: #505058;
  --gray-545: #54524d;
  --gray-717: #71717a;
  --gray-626: #62626c;
  --gray-333: #333333;
  --gray-475: #475467;
  --gray-888: #888888;
  --border: #e4e4e7;
  --border-card: #d0d0d0;
  --border-res: #e1dedc;
  --border-shelf: #e7e5e1;
  --divider-soft: #ececea;
  --bg-resources: rgba(22, 89, 122, 0.05);
  --bg-eci: #f3f7f8;
  --bg-funders: #fffcf5;

  /* type families */
  --f-nunito-sans: "Nunito Sans", system-ui, sans-serif;
  --f-nunito: "Nunito", system-ui, sans-serif;
  --f-inter: "Inter", system-ui, sans-serif;
  --f-inter-tight: "Inter Tight", "Inter", system-ui, sans-serif;

  /* layout */
  --frame: 1424px;
  --gutter: clamp(20px, 5.2668vw, 75px);       /* 75px at 1424 */
  --content: 1274px;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: #fff;
  overflow-x: clip;          /* the Launch illustration bleeds past the card on very narrow phones */
}
html:focus-within { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--f-inter);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-optical-sizing: none;     /* Figma uses static Inter / Nunito Sans (text masters); keep the same metrics */
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 1000;
  background: var(--blue); color: #fff; padding: 10px 16px; border-radius: 999px;
  font: 600 14px/1 var(--f-inter); transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

/* Hide reveal targets until GSAP takes over (only when JS is present) */
html.js [data-reveal],
html.js [data-reveal-group] > *,
html.js [data-split] { visibility: hidden; }
html.js.motion-ready [data-reveal],
html.js.motion-ready [data-reveal-group] > *,
html.js.motion-ready [data-split] { visibility: inherit; }

/* --------------------------------------------------------------------------
   Shared primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--frame);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.h2 {
  font-family: var(--f-nunito-sans);
  font-weight: 700;
  font-size: clamp(32px, 3.2303vw, 46px);     /* 46px at 1424 */
  line-height: 1.04;
  letter-spacing: -1.15px;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "YTLC" 500, "wdth" 100;
}
.h2 .gold { color: var(--gold); letter-spacing: -0.16px; }

.lede {
  font-family: var(--f-inter);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.52;
  color: var(--gray-505);
}

/* Pill CTA — Figma: #16597a, radius 999, Inter SemiBold 15.5, white, ↗ glyph */
.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blue);
  color: #fff;
  border-radius: 999px;
  padding: 16px 22px 16px 24px;
  font-family: var(--f-inter);
  font-weight: 600;
  font-size: 15.5px;
  line-height: normal;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
  transition:
    transform var(--dur) var(--ease-spring),
    box-shadow var(--dur) var(--ease-out);
  will-change: transform;
}
.pill--15 { padding-block: 15px; }
.pill .arrow { display: inline-block; }
.pill:hover, .pill:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -8px rgba(22, 89, 122, 0.55), 0 4px 10px -4px rgba(22, 89, 122, 0.35);
}
.pill:active { transform: translateY(0) scale(0.97); transition-duration: 90ms; }

/* --------------------------------------------------------------------------
   Nav  (Figma: 80px, white, 1px #e4e4e7 bottom border, radius 12)
   -------------------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--border);
  border-radius: 0 0 12px 12px;
  transition: box-shadow var(--dur) var(--ease-out);
}
.nav.is-scrolled { box-shadow: 0 8px 24px -12px rgba(24, 24, 27, 0.18); }
.nav__inner {
  height: 79px;                 /* + 1px border = Figma's 80px bar */
  max-width: var(--frame);
  margin-inline: auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav__logo {
  font-family: var(--f-inter-tight);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -0.3966px;
  color: #000;
  line-height: normal;
  white-space: nowrap;
  position: relative;
  top: 1px;
}
.nav__logo .char { display: inline-block; transition: transform 420ms var(--ease-spring); }
.nav__logo:hover .char { transform: translateY(-2px); }
.nav__right { display: flex; align-items: center; gap: 40px; }

.nav__trigger {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 6px 8px; border-radius: 8px;
  font-family: var(--f-inter); font-weight: 500; font-size: 14px; line-height: 20px;
  letter-spacing: 0.07px; color: var(--ink); text-align: center;
  position: relative;
}
.nav__trigger::after {
  content: ""; position: absolute; left: 8px; right: 34px; bottom: 4px; height: 1.5px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.nav__trigger:hover::after, .nav__trigger:focus-visible::after { transform: scaleX(1); }
.nav__chev { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; }
.nav__chev img { width: 11.5px; height: 6.5px; }

.btn-login {
  display: inline-flex; align-items: center; justify-content: center;
  width: 70px; height: 34px; border-radius: 8px;
  background: var(--gold-btn);
  color: #fafafa;
  font-family: var(--f-inter); font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: 0.07px;
  filter: drop-shadow(0 4px 3px rgba(0,0,0,0.1)) drop-shadow(0 2px 2px rgba(0,0,0,0.06));
  transition: transform var(--dur) var(--ease-spring), filter var(--dur) var(--ease-out);
}
.btn-login:hover, .btn-login:focus-visible {
  transform: translateY(-2px);
  filter: drop-shadow(0 8px 10px rgba(140,109,44,0.28)) drop-shadow(0 2px 3px rgba(0,0,0,0.08));
}
.btn-login:active { transform: translateY(0) scale(0.96); }

/* --------------------------------------------------------------------------
   Hero  (Figma frame 1424×657 incl. nav; gradient white → 30% gold)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(206,151,47,0.3) 100%);
  overflow: hidden;
}
.hero__inner {
  position: relative; z-index: 1;                /* copy sits above the artwork */
  max-width: var(--frame);
  margin-inline: auto;
  padding: 107px 64px 57px 101px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 17px;
  min-height: 577px;
}
.hero__copy {
  flex: 0 1 698px; min-width: 0;
  max-width: min(698px, calc(58.287vw - 132px));   /* always ends 31px before the artwork (Figma: 799 vs 830) */
}
.hero__title {
  font-family: var(--f-nunito-sans);
  font-weight: 700;
  font-size: clamp(36px, 4.2135vw, 60px);       /* 60px at 1424 */
  line-height: 1.04;
  letter-spacing: -1.5px;
  color: var(--ink);
  margin: 0;
  width: 123%;                                    /* Figma text box is 860 wide on a 698 column */
  max-width: 860px;
  font-variation-settings: "YTLC" 500, "wdth" 100;
}
.hero__title .gold { color: var(--gold); letter-spacing: -0.16px; }
.hero__title .line { display: block; }
.hero__lede {
  margin-top: 22px;                                /* 333 − (187 + 124) */
  font-family: var(--f-nunito-sans);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.52;
  color: var(--ink);
  max-width: 698px;
  font-variation-settings: "YTLC" 500, "wdth" 100;
}
.hero__lede strong { font-weight: 700; }
.hero__cta { margin-top: 33px; }                   /* 546 − 513 */

/* Art (Figma 1091:5956): the watercolour, exported with a transparent background and cropped to
   x 830–1424, y −80…700 of the 657px hero frame. Anchored to the window's right edge; it runs 160px up
   behind the nav and 43px past the bottom so the scroll parallax never exposes an edge. */
.hero__art {
  position: absolute; z-index: 0;
  top: -160px; bottom: -43px; right: 0;
  width: min(594px, 41.713vw);
  pointer-events: none;
}
.hero__art picture { display: contents; }
.hero__art img {
  display: block; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 0% 0%;     /* keep the painted left edge; any crop comes off the right */
  will-change: transform;
}

/* --------------------------------------------------------------------------
   Steps  (white, pt 96 / pb 100, gap 52)
   -------------------------------------------------------------------------- */
.steps { background: #fff; padding: 96px 0 108px; }   /* Figma frame is 1061 tall (pb renders as 108) */
.steps .container { display: flex; flex-direction: column; align-items: center; gap: 52px; }
.steps__header { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.steps__header .h2 { max-width: 938px; line-height: 1.06; }
.steps__header .h2 .gold, .steps__header .h2 .tail { line-height: 1.04; letter-spacing: -0.16px; }
.steps__header .lede { max-width: 712px; }

/* Dashboard composition — 1135×358 frame, children at Figma % offsets (export bounds incl. shadows) */
.diagrams {
  position: relative;
  width: 100%;
  max-width: 1135px;
  aspect-ratio: 1135 / 358;
}
.diagrams .mock { position: absolute; will-change: transform; }   /* GSAP owns this layer (arrival + parallax) */
.diagrams .mock img {
  width: 100%;
  height: auto;
  transition: transform 600ms var(--ease-out);                        /* CSS owns the hover layer */
}
/* export bounds = node bounds + shadow blur (asymmetric vertically by the shadow's y offset) */
.diagrams .mock--listing { left: -0.677%; top: 9.056%;  width: 37.048%; z-index: 1; }
.diagrams .mock--mapinfo { left: 63.121%; top: 6.883%;  width: 38.018%; z-index: 2; }
.diagrams .mock--map     { left: 27.192%; top: -1.111%; width: 45.639%; z-index: 3; }
.diagrams:hover .mock--map img     { transform: translateY(-6px) scale(1.015); }
.diagrams:hover .mock--listing img { transform: translate(-6px, 4px) rotate(-0.8deg); }
.diagrams:hover .mock--mapinfo img { transform: translate(6px, 4px) rotate(0.8deg); }

.cards3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
}
.step {
  position: relative;
  min-height: 297px;
  border: 1px solid var(--border-card);
  border-radius: 26px;
  padding: 28px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
  text-align: center;
  overflow: hidden;
  /* Figma: cream → crimson vertical gradient */
  background: linear-gradient(180deg, rgba(255, 252, 245, 0.3) 0%, rgba(139, 35, 50, 0.3) 100%);
  transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out);
  will-change: transform;
}
.step--1 { border-radius: 16px; }
.step:hover { transform: translateY(-6px); box-shadow: 0 24px 40px -24px rgba(22,89,122,0.35); }
.step__icon { width: 32px; height: 32px; transition: transform 600ms var(--ease-spring); }
.step__icon img { width: 100%; height: 100%; }
.step:hover .step__icon { transform: translateY(-4px) scale(1.08) rotate(-4deg); }
.step__tg { display: flex; flex-direction: column; align-items: center; gap: 9px; width: 100%; }
.step--1 .step__tg { min-height: 192px; justify-content: center; }
.step__title {
  font-family: var(--f-nunito-sans); font-weight: 700;
  font-size: clamp(26px, 2.107vw, 30px); letter-spacing: -0.3px; color: var(--ink);
  line-height: normal; margin: 0;
  font-variation-settings: "YTLC" 500, "wdth" 100;
}
.step--2 .step__title { line-height: 42px; max-width: 296px; }
.step--3 .step__title { max-width: 201px; }
.step__title .line { display: block; }
.step__text {
  font-family: var(--f-nunito-sans); font-weight: 400;
  font-size: 17px; line-height: 1.48; color: var(--gray-626);
  font-variation-settings: "YTLC" 500, "wdth" 100;
}
.step--1 .step__text { max-width: 314px; }
.step--2 .step__text { max-width: 246px; }
.step--3 .step__text { max-width: 268px; }

/* --------------------------------------------------------------------------
   Explore resources  (rgba(22,89,122,.05), pt 96 / pb 100, gap 48)
   -------------------------------------------------------------------------- */
.resources { background: var(--bg-resources); padding: 96px 0 100px; }
.resources .container { display: flex; flex-direction: column; gap: 48px; }
.resources__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; }
.resources__lc { display: flex; flex-direction: column; gap: 16px; max-width: 540px; }
.resources__lc .lede { font-size: 17.5px; color: var(--gray-545); }
.resources__head .pill {
  border: 1px solid rgba(255,255,255,0.6);
  gap: 9px;
  box-shadow: 0 8px 20px 0 rgba(102,89,153,0.18);
  flex-shrink: 0;
}
.resources__head .pill:hover { box-shadow: 0 14px 28px -6px rgba(22,89,122,0.5), 0 8px 20px 0 rgba(102,89,153,0.18); }

/* Figma 1090:6244: two rows of three, 411.33px cards, 20px gutters.
   Every card spans two row tracks (title, description) shared with its row neighbours via subgrid,
   so if a title wraps at some width, all descriptions in that row move down together. */
.rgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.rcard {
  position: relative;
  min-width: 0;
  background: #fff;
  border: 0.5px solid var(--border-res);
  border-radius: 18px;
  padding: 41.5px 30px;                  /* Figma: kicker sits 42px from the top (its 0.5px stroke is drawn inside the card) */
  grid-row: span 2;
  display: grid; grid-template-rows: subgrid; row-gap: 10px; align-content: start;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out);
  will-change: transform;
  cursor: pointer;
}
.rcard:hover, .rcard:focus-within {
  transform: translateY(-8px);
  box-shadow: 0 28px 40px -18px rgba(22,89,122,0.28), 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
}
.rcard__body { display: contents; }     /* title row + description become the card's two subgrid rows */
.rcard__top { display: flex; align-items: flex-start; gap: 16px; width: 100%; }
.rcard__tg { flex: 1 1 0; min-width: 0; color: var(--gray-333); }
.rcard__kicker {
  font-family: var(--f-nunito); font-weight: 400;
  font-size: 26px; line-height: 43px; color: var(--gold); margin: 0;
}
.rcard__title {
  font-family: var(--f-nunito); font-weight: 700;
  font-size: clamp(30px, 2.458vw, 35px); line-height: 43px; color: var(--gray-333); margin: 0;
  position: relative; top: -3px; margin-bottom: -2px;   /* Figma sets these glyphs 3px higher and ends the text box 2px sooner */
}
.rcard__arrow { flex-shrink: 0; width: 20.805px; height: 20px; transition: transform 450ms var(--ease-spring); }
.rcard__arrow img { width: 100%; height: 100%; }
.rcard:hover .rcard__arrow, .rcard:focus-within .rcard__arrow { transform: translate(4px, -4px); }
.rcard__text {
  font-family: var(--f-nunito); font-weight: 400;
  font-size: 18px; line-height: 24px; color: var(--gray-475);
}
.rcard a.rcard__link::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }

/* --------------------------------------------------------------------------
   Launch your profile  (white, pt 40 / pb 96; card 538 tall, radius 12)
   -------------------------------------------------------------------------- */
.launch { background: #fff; padding: 40px 0 47px; }    /* Figma frame 625: 40 + 538 + 47 */
.launch__card {
  position: relative;
  min-height: 538px;
  border-radius: 12px;
  overflow: hidden;
  background: url("../assets/launch-bg.png") center / cover no-repeat;
  display: flex;
}
.launch__copy {
  position: relative; z-index: 2;
  padding: 77.55px 0 76px 76px;
  max-width: min(696px, 56%);  /* 620 + 76 at 1274 */
  display: flex; flex-direction: column; align-items: flex-start;
}
.launch__copy .h2 { max-width: 620px; }
.launch__text {
  margin-top: 35.6px;          /* 161 − (77.55 + 47.84) */
  max-width: 544px;
  font-family: var(--f-inter); font-weight: 400; font-size: 18px; line-height: 1.5; color: var(--gray-717);
}
.launch__text p + p { margin-top: 27px; }   /* empty line in Figma (1.5 × 18) */
.launch__copy .pill { margin-top: 34.5px; } /* 410.55 − 376 */

.launch__art {
  position: absolute; z-index: 1;
  left: 533px; top: -22px;
  width: 949px; height: 542px;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.launch__art img { width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   Powered by ECI  (#f3f7f8, py 96)
   -------------------------------------------------------------------------- */
.eci { background: var(--bg-eci); padding: 96px 0 81px; }   /* Figma frame 509 */
.eci__header { display: flex; flex-direction: column; gap: 35px; align-items: flex-start; }
.eci__header .h2 { max-width: 1008px; line-height: 1.06; }
.eci__header .h2 .gold { letter-spacing: -1.15px; line-height: 1.06; }
.eci__row { display: flex; align-items: center; gap: 39px; width: 100%; }
.eci__row .lede { max-width: 896px; }
.eci__logo { flex-shrink: 0; width: 322.711px; height: 162px; max-width: 100%; }
.eci__logo img { width: 100%; height: 100%; object-fit: contain; }

/* --------------------------------------------------------------------------
   Funders  (#fffcf5, py 96, gap 44)
   -------------------------------------------------------------------------- */
.funders { background: var(--bg-funders); padding: 96px 0 62px; }   /* Figma frame 473 */
.funders .container { display: flex; flex-direction: column; gap: 44px; }
.funders__header { display: flex; flex-direction: column; gap: 18px; }
.funders__header .h2 { max-width: 720px; line-height: 1.06; }
.funders__header .h2 .gold { line-height: 1.06; }
.funders__header .lede { max-width: 620px; }
.shelf {
  background: #fff;
  border: 1px solid var(--border-shelf);
  border-radius: 24px;
  height: 150px;
  display: flex; align-items: center;
  overflow: hidden;
  box-shadow: 0 8px 24px 0 rgba(0,0,0,0.05);
}
.shelf__cell { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; }
.shelf__cell img { transition: transform 500ms var(--ease-spring), filter 500ms var(--ease-out); }
.shelf__cell:hover img { transform: scale(1.04); }
.shelf__div { flex-shrink: 0; width: 1px; height: 64px; background: var(--gold-btn); }
.shelf__div--soft { background: var(--divider-soft); }
.logo-lilly { width: 235.938px; height: 56.84px; }
.logo-templeton { width: 240.328px; height: 75.04px; }

/* --------------------------------------------------------------------------
   Footer  (white, 270 tall)
   -------------------------------------------------------------------------- */
.footer { background: #fff; }
.footer .container { position: relative; padding-top: 55px; padding-bottom: 95.45px; }   /* Figma frame 270 */
.footer__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.footer__brand {
  font-family: var(--f-inter-tight); font-weight: 700; font-size: 16px; letter-spacing: -0.3966px; color: #000;
  line-height: normal; margin: 0;
}
.footer__blurb {
  margin-top: 8px;                        /* blurb top at y=83 */
  max-width: 588px;
  font-family: var(--f-nunito); font-weight: 400; font-size: 14.279px; line-height: normal; color: #000;
  letter-spacing: -0.3966px;
}
.footer__blurb a.gold { color: var(--gold); position: relative; }
.footer__blurb a.gold::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform var(--dur) var(--ease-out);
}
.footer__blurb a.gold:hover::after { transform: scaleX(1); transform-origin: left; }
.footer__blurb a.mail { text-decoration: underline; text-underline-position: from-font; text-decoration-skip-ink: none; }
.footer__blurb a.mail:hover { color: var(--blue); }
.footer__rule { border: 0; height: 1px; background: var(--border); margin: 19.55px 0 12px; }   /* rule at y=140.55, row at 153.55 */
.footer__bottom {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  font-family: var(--f-nunito); font-weight: 400; font-size: 14px; line-height: 21px; color: var(--gray-888);
}
.footer__legal { display: flex; gap: 16px; }
.footer__legal a { transition: color var(--dur-fast) var(--ease-out); }
.footer__legal a:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   Word-split reveal helpers
   -------------------------------------------------------------------------- */
.w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.wi { display: inline-block; will-change: transform; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1300px) {
  /* narrower desktops: copy column tightens, art scales with the card and sits further right */
  .launch__copy { max-width: 50%; }
  .launch__art { left: 47%; top: -2%; width: 68%; height: auto; aspect-ratio: 949 / 542; }
}

@media (max-width: 1200px) {
  .hero__inner { padding-left: calc(var(--gutter) + 26px); padding-right: var(--gutter); }
  .hero__copy { max-width: calc(53.020vw - 57px); }   /* same 31px clearance with the narrower left padding */
}

/* full three-up grid: Figma's 274px cards (row 2's shorter copy still gets the same card height) */
@media (min-width: 1291px) {
  .rgrid { grid-auto-rows: auto minmax(96px, auto); }
}

/* below this the longest title ("Organization Type") no longer fits beside the arrow, so go two-up */
@media (max-width: 1290px) {
  .rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rcard { padding: 30px; }
}

@media (max-width: 1100px) {
  .eci__row { gap: 32px; }
}

@media (max-width: 960px) {
  .hero__inner {
    flex-direction: column; align-items: stretch; gap: 32px;
    padding-top: 72px; padding-bottom: 24px; min-height: 0;   /* the curve itself gives the button room */
  }
  .hero__copy { flex: none; max-width: none; }
  .hero__title { width: 100%; }
  /* stacked: the painting rises from the bottom of the hero instead of entering from the side.
     Its top edge is the desktop's curved left edge turned on its side (deepest under the button,
     highest on the right), and it uses a separate fully painted 3x crop, so no bare strip shows. */
  .hero__art {
    position: relative; inset: auto; width: 100%;
    height: clamp(360px, 92vw, 600px);
    overflow: hidden;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 190 C19 180 74 147 111 132 C148 117 185 107 222 99 C259 91 296 86 333 84 C370 82 407 82 444 85 C481 89 519 103 556 106 C593 108 630 107 667 100 C704 94 741 78 778 66 C815 55 852 44 889 33 C926 22 981 5 1000 0 L1000 1000 L0 1000Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 190 C19 180 74 147 111 132 C148 117 185 107 222 99 C259 91 296 86 333 84 C370 82 407 82 444 85 C481 89 519 103 556 106 C593 108 630 107 667 100 C704 94 741 78 778 66 C815 55 852 44 889 33 C926 22 981 5 1000 0 L1000 1000 L0 1000Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  }
  .hero__art img {
    position: absolute; left: 0; top: -60px;          /* 60px of extra painting above for the parallax */
    width: 100%; height: calc(100% + 60px);
    object-position: 50% 68%;                          /* frames the circle of people */
  }
  .cards3 { grid-template-columns: 1fr; max-width: 560px; }
  .step { min-height: 0; }
  .diagrams { max-width: 820px; }

  .launch__card { flex-direction: column; }
  .launch__copy { padding: 56px 40px 0; max-width: none; }
  .launch__art {
    position: relative; left: auto; right: auto; top: auto;
    width: 120%; height: auto; aspect-ratio: 949 / 542; margin: -12px 0 -36px -10%;
  }
  .eci__row { flex-direction: column-reverse; align-items: flex-start; gap: 28px; }
  .eci__logo { height: auto; aspect-ratio: 322.711 / 162; }   /* keep the Figma ratio when it must shrink */
}

@media (max-width: 720px) {
  .nav__inner { padding: 0 16px; height: 71px; }
  .nav__logo { font-size: 22px; }
  .nav__right { gap: 16px; }
  .hero__inner { padding-left: var(--gutter); padding-right: var(--gutter); padding-top: 56px; }
  .hero__lede { font-size: 18px; }
  .steps, .resources, .eci, .funders { padding-block: 64px; }
  .launch { padding-bottom: 47px; }
  .resources__head { flex-direction: column; }
  .rgrid { grid-template-columns: 1fr; }
  .rcard { padding: 26px; }
  .launch__copy { padding: 44px 24px 0; }
  .shelf { flex-direction: column; height: auto; padding: 28px 0; gap: 20px; }
  .shelf__cell { height: auto; padding: 8px 0; }
  .shelf__div { width: 64px; height: 1px; }
  .shelf__div + .shelf__div { display: none; }
  .shelf__div--soft { display: none; }
  .footer__top { flex-direction: column; }
  .footer__bottom { flex-direction: column; }
}

@media (max-width: 480px) {
  .nav__inner { padding: 0 12px; }
  .nav__logo { font-size: 18px; }
  .nav__right { gap: 10px; }
  .nav__trigger { padding: 6px 4px; }
}

@media (max-width: 380px) {
  .nav__inner { padding: 0 10px; }
  .nav__logo { font-size: 16px; }
  .nav__right { gap: 8px; }
  .nav__trigger { padding: 6px 2px; }
}

/* smallest phones: the nav has to fit logo + Resources + Login on one line */
@media (max-width: 340px) {
  .nav__inner { padding: 0 8px; gap: 8px; }
  .nav__logo { font-size: 14px; }
  .nav__right { gap: 6px; }
  .nav__chev { width: 14px; }
  .btn-login { width: auto; padding: 0 10px; }
}

@media (max-width: 420px) {
  .step__text, .rcard__text { font-size: 16px; }
  .logo-lilly, .logo-templeton { max-width: 80%; height: auto; }
}

/* --------------------------------------------------------------------------
   Reduced motion — everything visible, transitions minimal
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js [data-reveal], html.js [data-reveal-group] > *, html.js [data-split] { visibility: visible; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}