/*
 * Impact public website — design system.
 *
 * Ported from the v0 "Impact United" export (app/globals.css) into plain CSS.
 * The export is a Next.js + Tailwind prototype; Impact's frontend has no build
 * step, so the Tailwind imports, the shadcn theme mapping and the rules for
 * screens this website does not show were dropped. Every selector and
 * declaration kept here is copied verbatim, so the appearance is unchanged.
 *
 * Scope: the public marketing website served at /. The Impact application
 * keeps its own stylesheet (/styles.css) under /app/.
 */


* { box-sizing: border-box; }


html { scroll-behavior: smooth; }


body { margin: 0; background: var(--background); color: var(--foreground); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }


button, input, textarea, select { font: inherit; }


button { color: inherit; }


button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid #4fa7c7; outline-offset: 3px; }


.iu-app {
  --iu-bg: #f6f9f7;
  --iu-surface: #fff;
  --iu-surface-soft: #f0fbf5;
  --iu-surface-muted: #eef3f0;
  --iu-ink: #14201e;
  --iu-copy: #61716d;
  --iu-muted: #7c8b87;
  --iu-border: #dfe6e3;
  --iu-hairline: #eef2f0;
  --iu-green: #2d806c;
  --iu-green-hover: #216457;
  --iu-green-light: #ddf4e9;
  --iu-green-bright: #3fa486;
  --iu-sun: #b66a1f;
  --iu-sun-soft: #fff0d5;
  --iu-sky: #216a8a;
  --iu-sky-soft: #dff3fa;
  --iu-coral: #a94e4b;
  --iu-coral-soft: #f7e1de;
  --iu-shadow: 0 4px 14px rgba(20, 32, 30, .07);
  min-height: 100vh;
  color: var(--iu-ink);
  background: var(--iu-bg);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -.01em;
}


.iu-app svg { flex: 0 0 auto; }


.iu-container { width: min(1160px, calc(100% - 56px)); margin-inline: auto; }


.iu-skip-link { position: absolute; left: 16px; top: -100px; z-index: 30; border-radius: 10px; background: var(--iu-green); padding: 12px 16px; color: white; }


.iu-skip-link:focus { top: 12px; }


.iu-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--iu-border); background: color-mix(in srgb, var(--iu-surface) 94%, transparent); backdrop-filter: blur(14px); }


.iu-header-inner { width: min(1320px, calc(100% - 56px)); min-height: 76px; margin: 0 auto; display: flex; align-items: center; gap: 20px; }


.iu-brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; border: 0; background: none; cursor: pointer; padding: 0; color: inherit; text-align: left; text-decoration: none; }


.iu-brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: white; background: var(--iu-green); }


.iu-brand-mark svg { width: 21px; height: 21px; }


.iu-brand-name { color: var(--iu-ink); font-size: 18px; font-weight: 760; letter-spacing: -.065em; }


.iu-brand-name > span { color: var(--iu-green); }

/* Official Impact United artwork.
 *
 * A raster lockup (no vector original was supplied). It is shown at its native
 * aspect ratio and is NOT recoloured, redrawn, or keyed out: cream lettering,
 * the mint dot, green "UNITED" and the dark green plate are the supplied
 * pixels. The plate is the artwork's own background, so it meets surrounding
 * dark surfaces without a crude background-removal filter. */
.impact-logo-link { display: inline-flex; align-items: center; flex: 0 0 auto; line-height: 0; text-decoration: none; }
.impact-logo { --impact-logo-height: 54px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border-radius: calc(var(--impact-logo-height) * .18); background: #081712; line-height: 0; }
.impact-logo__img { display: block; width: auto; max-width: none; height: var(--impact-logo-height); object-fit: contain; }
.impact-logo--xs { --impact-logo-height: 34px; }
.impact-logo--sm { --impact-logo-height: 44px; }
.impact-logo--md { --impact-logo-height: 54px; }
.impact-logo--lg { --impact-logo-height: 58px; }
.impact-logo--xl { --impact-logo-height: 96px; }



/* Brand left, navigation centred in the space that is left, actions right — one
 * balanced row. The nav takes the leftover width and centres its own links, so
 * the three groups stay optically aligned at every desktop width. */
.iu-navigation { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 2px; }


.iu-nav-link { display: inline-flex; align-items: center; min-height: 38px; border: 0; border-radius: 10px; padding: 0 12px; background: none; color: var(--iu-copy); cursor: pointer; text-decoration: none; font-size: 13px; font-weight: 570; transition: background .18s ease, color .18s ease; }


.iu-nav-link:hover { color: var(--iu-green); background: var(--iu-surface-muted); }


/* ONE active treatment, identical in the desktop row and the compact panel:
 * green label on a soft green pill. (Previously the desktop underline bar and
 * the panel's left edge bar were two different signals for the same state.) */
.iu-nav-link.is-active { color: var(--iu-green); background: var(--iu-green-light); }


/* The toggle is hidden by default: the desktop row is the primary navigation.
 * It is revealed only in the breakpoint below, where that row no longer fits. */
.iu-mobile-menu { display: none; }


.iu-header-search { display: flex; align-items: center; gap: 8px; width: min(245px, 24vw); margin-left: auto; border: 1px solid var(--iu-border); border-radius: 999px; padding: 0 13px; background: var(--iu-bg); color: var(--iu-muted); }


.iu-header-search svg { width: 16px; }


.iu-header-search input { width: 100%; height: 38px; border: 0; outline: none; background: transparent; color: var(--iu-ink); font-size: 12px; }


.iu-header-search input::placeholder { color: var(--iu-muted); }


.iu-header-actions { display: flex; align-items: center; flex: 0 0 auto; gap: 10px; }


.iu-icon-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 44px; min-height: 44px; border: 1px solid var(--iu-border); border-radius: 12px; background: var(--iu-surface); color: var(--iu-copy); cursor: pointer; transition: background .18s ease, transform .18s ease; }


.iu-icon-button:hover { background: var(--iu-surface-muted); }


.iu-icon-button svg { width: 17px; height: 17px; }


.iu-notifications { position: relative; border-color: transparent; background: transparent; }


.iu-notifications i { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border: 1px solid var(--iu-surface); border-radius: 50%; background: var(--iu-coral); }


.iu-avatar { width: 36px; height: 36px; border: 0; border-radius: 50%; background: #e6e9f5; color: #4a5fbf; cursor: pointer; font-size: 12px; font-weight: 700; }


.iu-button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; border-radius: 12px; padding: 0 16px; cursor: pointer; text-decoration: none; font-size: 13px; font-weight: 650; transition: background .18s ease, transform .18s ease, border-color .18s ease; }


.iu-button:hover { transform: translateY(-1px); }


.iu-button:active { transform: scale(.98); }


.iu-button svg { width: 17px; height: 17px; }


.iu-button-primary { color: #fff; background: var(--iu-green); }


.iu-button-primary:hover { background: var(--iu-green-hover); }


.iu-button-secondary { border-color: var(--iu-border); background: var(--iu-surface); color: var(--iu-ink); }


.iu-button-secondary:hover { border-color: #b7c8c2; background: var(--iu-surface-muted); }


.iu-button-quiet { padding-inline: 4px; background: transparent; color: var(--iu-green); }


.iu-button-quiet:hover { color: var(--iu-green-hover); }


.iu-button-large { min-height: 52px; padding-inline: 19px; font-size: 14px; }


.iu-header-cta { min-height: 40px; padding-inline: 13px; font-size: 12px; }


.iu-main { min-height: calc(100vh - 210px); }


.iu-hero { min-height: 565px; display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; gap: 34px; padding-top: 36px; padding-bottom: 30px; }


.iu-hero-copy { position: relative; z-index: 1; padding-block: 34px; }


.iu-eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--iu-green); font-size: 11px; font-weight: 700; letter-spacing: .105em; text-transform: uppercase; }


.iu-eyebrow-line { display: inline-block; width: 21px; height: 1px; background: var(--iu-green-bright); }


.iu-hero h1 { margin: 20px 0 18px; font-size: clamp(48px, 6.2vw, 76px); font-weight: 690; line-height: .99; letter-spacing: -.075em; }


.iu-hero h1 span { color: var(--iu-green); }


.iu-hero-description { max-width: 450px; margin: 0; color: var(--iu-copy); font-size: 17px; line-height: 1.65; }


.iu-hero-actions { display: flex; align-items: center; gap: 22px; margin-top: 30px; }


.iu-hero-note { display: flex; align-items: center; gap: 12px; margin-top: 36px; }


.iu-avatar-stack { display: flex; align-items: center; padding-left: 5px; }


.iu-avatar-stack > span, .iu-avatar-stack > i { width: 29px; height: 29px; display: grid; place-items: center; margin-left: -5px; border: 2px solid var(--iu-bg); border-radius: 50%; background: #f2d9cb; color: #725043; font-size: 9px; font-style: normal; font-weight: 700; }


.iu-avatar-stack > span:nth-child(2) { background: #e1e5d2; color: #5c6544; }


.iu-avatar-stack > span:nth-child(3) { background: #d8e5ed; color: #456574; }


.iu-avatar-stack > i { background: var(--iu-surface); color: var(--iu-green); }


.iu-hero-note p { margin: 0; color: var(--iu-copy); font-size: 11px; }


.iu-hero-note strong { display: block; color: var(--iu-ink); font-weight: 650; }


.iu-hero-visual { position: relative; min-height: 465px; display: grid; place-items: center; }


.iu-hero-orbit { position: absolute; border: 1px solid #dcece3; border-radius: 50%; }


.iu-orbit-one { width: 405px; height: 405px; }


.iu-orbit-two { width: 495px; height: 495px; border-style: dashed; opacity: .6; }


.iu-video-window { position: relative; z-index: 1; width: min(330px, 74%); overflow: hidden; border: 7px solid var(--iu-surface); border-radius: 24px; background: #16372d; box-shadow: 0 18px 50px rgba(18, 48, 37, .2); transform: rotate(2deg); }


.iu-hero-video { display: block; width: 100%; height: 355px; object-fit: cover; }


.iu-video-window-caption { display: flex; flex-direction: column; gap: 5px; padding: 13px 15px 15px; color: #fff; background: #18372e; font-size: 12px; font-weight: 620; }


.iu-video-kicker { display: flex; align-items: center; gap: 5px; color: #a6d9be; font-size: 9px; letter-spacing: .08em; }


.iu-video-kicker svg { width: 12px; height: 12px; }


.iu-floating-card { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; border: 1px solid var(--iu-border); border-radius: 13px; padding: 11px 13px; background: var(--iu-surface); box-shadow: var(--iu-shadow); }


.iu-floating-card strong, .iu-floating-card small { display: block; white-space: nowrap; }


.iu-floating-card strong { font-size: 11px; }


.iu-floating-card small { margin-top: 2px; color: var(--iu-copy); font-size: 9px; }


.iu-floating-card-top { top: 64px; right: 6px; }


.iu-floating-icon { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 10px; background: var(--iu-green-light); color: var(--iu-green); }


.iu-floating-icon svg { width: 18px; }


.iu-floating-card-bottom { bottom: 46px; left: -6px; }


.iu-floating-card-bottom > svg { width: 14px; color: var(--iu-green); }


.iu-mini-avatar { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; background: #ead5ca; color: #614a40; font-weight: 700; }


.iu-sunburst { position: absolute; right: 29px; bottom: 102px; color: #e7a34f; font-size: 45px; line-height: 1; }


.iu-trust-row { min-height: 94px; display: flex; align-items: center; justify-content: center; gap: clamp(22px, 6vw, 84px); border-top: 1px solid var(--iu-border); border-bottom: 1px solid var(--iu-border); }


.iu-trust-row > div { display: flex; align-items: center; gap: 12px; }


.iu-trust-row > svg { width: 16px; color: #afbbb7; }


.iu-trust-number { color: var(--iu-green); font-size: 11px; font-weight: 750; }


.iu-trust-row strong, .iu-trust-row small { display: block; }


.iu-trust-row strong { font-size: 12px; }


.iu-trust-row small { margin-top: 2px; color: var(--iu-copy); font-size: 10px; }


.iu-featured-section { padding: 76px 0 82px; }


.iu-section-heading h2 { margin: 10px 0 7px; font-size: 32px; line-height: 1.15; letter-spacing: -.055em; }


.iu-section-heading > .iu-button { margin-bottom: 4px; }


.iu-project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 27px; }


.iu-project-tile { min-width: 0; overflow: hidden; border: 1px solid var(--iu-border); border-radius: 17px; background: var(--iu-surface); box-shadow: 0 2px 7px rgba(20, 32, 30, .025); }


.iu-tile-image-wrap { position: relative; height: 225px; overflow: hidden; background: var(--iu-surface-muted); }


.iu-tile-image { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
/* The progress artwork is a dashboard, not a photograph. Cropping it would cut
   the figures, so it scales to fit and the tile background continues its
   dark-green canvas instead of leaving a visible letterbox. */
.iu-tile-illustration { object-fit: contain; background: #0f231e; }
.iu-project-tile:hover .iu-tile-illustration { transform: none; }


.iu-project-tile:hover .iu-tile-image { transform: scale(1.025); }


.iu-tile-image-meta { position: absolute; top: 14px; left: 15px; display: flex; gap: 7px; }


.iu-category-tag, .iu-stage-tag { min-height: 24px; display: inline-flex; align-items: center; border-radius: 999px; padding: 0 9px; background: var(--iu-green-light); color: var(--iu-green); font-size: 10px; font-weight: 680; }


.iu-category-tag.community { background: #efe7f8; color: #71518e; }


.iu-category-tag.education { background: var(--iu-sun-soft); color: var(--iu-sun); }


.iu-stage-tag { gap: 6px; background: rgba(255,255,255,.94); color: var(--iu-copy); }


.iu-stage-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--iu-green-bright); }


.iu-save-button { position: absolute; top: 11px; right: 11px; min-width: 36px; min-height: 36px; border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.92); color: var(--iu-copy); }


.iu-save-button.is-saved { color: var(--iu-coral); }


.iu-tile-content { padding: 17px 18px 16px; }


.iu-org-line { display: flex; align-items: center; gap: 8px; color: var(--iu-copy); font-size: 11px; }


.iu-org-mark { width: 27px; height: 27px; display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 9px; background: var(--iu-green-light); color: var(--iu-green); font-size: 9px; font-weight: 750; }


.iu-org-mark.coral { background: var(--iu-coral-soft); color: var(--iu-coral); }


.iu-org-mark.sun { background: var(--iu-sun-soft); color: var(--iu-sun); }


.iu-sample-org-label { border: 1px solid var(--iu-border); border-radius: 999px; padding: 2px 6px; color: var(--iu-muted); font-size: 8px; }


.iu-tile-content h3 { margin: 12px 0 6px; font-size: 20px; line-height: 1.22; letter-spacing: -.04em; }


.iu-tile-content > p { min-height: 40px; margin: 0; color: var(--iu-copy); font-size: 12px; line-height: 1.6; }


.iu-tile-location { display: flex; align-items: center; gap: 5px; margin-top: 12px; color: var(--iu-muted); font-size: 10px; }


.iu-tile-location svg { width: 13px; height: 13px; }


.iu-skill-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }


.iu-skill-list span { border-radius: 999px; padding: 4px 8px; background: var(--iu-surface-muted); color: var(--iu-copy); font-size: 10px; }


.iu-card-actions { display: flex; align-items: center; gap: 8px; margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--iu-hairline); }


.iu-support-button { min-height: 39px; padding: 0 11px; font-size: 11px; }


.iu-support-button svg { width: 15px; }


.iu-support-button > span { opacity: .78; }


.iu-support-button.is-supported { background: var(--iu-green-hover); }


.iu-card-actions > .iu-button-secondary { min-height: 39px; padding-inline: 11px; font-size: 11px; }


.iu-dual-invite { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; padding-bottom: 78px; }


.iu-invite-card { display: flex; gap: 17px; min-height: 236px; border: 1px solid var(--iu-border); border-radius: 18px; padding: 26px; background: var(--iu-surface); }


/* This card is deliberately light in BOTH themes — it is a highlight surface.
 * Its text used to inherit the theme's ink tokens, which turn near-white in
 * dark mode, so the heading and body were pale-on-pale and unreadable. Pinning
 * the tokens the card reads to the light palette here fixes the cause: every
 * descendant (h2, p, overline, the secondary button and its border) resolves
 * against this card instead of the dark theme, with no per-element overrides. */
.iu-invite-org { background: #f2f7f2; color: var(--iu-ink); --iu-ink: #14201e; --iu-copy: #61716d; --iu-muted: #7c8b87; --iu-border: #dfe6e3; --iu-surface: #fff; --iu-surface-muted: #eef3f0; --iu-green: #2d806c; --iu-green-hover: #216457; --iu-green-light: #ddf4e9; }


.iu-invite-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; background: var(--iu-green-light); color: var(--iu-green); }


.iu-invite-icon svg { width: 21px; }


.iu-overline { color: var(--iu-muted); font-size: 9px; font-weight: 720; letter-spacing: .1em; text-transform: uppercase; }


.iu-invite-card h2 { max-width: 365px; margin: 10px 0 7px; font-size: 21px; line-height: 1.22; letter-spacing: -.045em; }


.iu-invite-card p { max-width: 365px; margin: 0 0 17px; color: var(--iu-copy); font-size: 12px; }


.iu-screen { min-height: 78vh; padding: 40px 0 72px; }


.iu-page-intro { display: flex; align-items: end; justify-content: space-between; gap: 24px; }


.iu-location-pill { display: grid; grid-template-columns: 18px auto 1fr 14px; align-items: center; column-gap: 8px; min-height: 54px; border: 1px solid var(--iu-border); border-radius: 13px; padding: 8px 12px; background: var(--iu-surface); }


.iu-location-pill > svg:first-child { width: 17px; color: var(--iu-green); }


.iu-location-pill > svg:last-child { width: 14px; color: var(--iu-muted); }


.iu-location-pill span { grid-column: 2 / 4; color: var(--iu-muted); font-size: 9px; }


.iu-location-pill strong { grid-column: 2; grid-row: 2; font-size: 11px; }


.iu-discover-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 17px; margin-top: 29px; }


.iu-feed-search { width: min(325px,100%); min-height: 44px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--iu-border); border-radius: 11px; padding: 0 12px; background: var(--iu-surface); color: var(--iu-muted); }


.iu-feed-search svg { width: 17px; }


.iu-feed-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--iu-ink); font-size: 11px; }


.iu-filter-chips { display: flex; flex-wrap: wrap; gap: 7px; }


.iu-filter-chip { min-height: 37px; border: 1px solid var(--iu-border); border-radius: 999px; padding: 0 13px; background: var(--iu-surface); color: var(--iu-copy); cursor: pointer; font-size: 10px; }


.iu-filter-chip.is-active { border-color: var(--iu-green); background: var(--iu-green); color: #fff; }


.iu-feed-layout { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 25px; margin-top: 32px; }


.iu-feed-sidebar { position: sticky; top: 100px; align-self: start; padding: 15px 4px; }


.iu-feed-sidebar > .iu-overline { display: block; margin: 0 0 12px 10px; }


.iu-sidebar-link { width: 100%; min-height: 42px; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 10px; padding: 0 10px; background: transparent; color: var(--iu-copy); text-align: left; cursor: pointer; font-size: 11px; }


.iu-sidebar-link svg { width: 16px; }


.iu-sidebar-link.is-active { background: var(--iu-green-light); color: var(--iu-green); font-weight: 650; }


.iu-sidebar-note { display: flex; gap: 8px; margin: 20px 4px 0; border-top: 1px solid var(--iu-border); padding-top: 15px; color: var(--iu-sun); }


.iu-sidebar-note svg { width: 15px; }


.iu-sidebar-note p { margin: 0; color: var(--iu-copy); font-size: 10px; }


.iu-feed-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }


.iu-feed-heading strong, .iu-feed-heading span { display: block; }


.iu-feed-heading strong { font-size: 14px; }


.iu-feed-heading span { margin-top: 2px; color: var(--iu-muted); font-size: 10px; }


.iu-sort-button { min-height: 37px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--iu-border); border-radius: 10px; padding: 0 10px; background: var(--iu-surface); font-size: 10px; }


.iu-sort-button svg { width: 13px; transform: rotate(90deg); }


.iu-feed-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; margin-top: 0; }


.iu-feed-grid .iu-tile-image-wrap { height: 175px; }


.iu-feed-grid .iu-tile-content { padding: 13px; }


.iu-feed-grid .iu-tile-content h3 { font-size: 17px; }


.iu-feed-grid .iu-card-actions { flex-wrap: wrap; }


.iu-empty-state { display: grid; justify-items: center; gap: 8px; padding: 54px 20px; border: 1px dashed var(--iu-border); border-radius: 16px; background: var(--iu-surface); text-align: center; }


.iu-empty-state > svg { width: 26px; color: var(--iu-green); }


.iu-empty-state h2 { margin: 6px 0 0; font-size: 19px; }


.iu-empty-state p { margin: 0 0 8px; color: var(--iu-copy); }


.iu-breadcrumb { display: flex; align-items: center; gap: 7px; color: var(--iu-muted); font-size: 11px; }


.iu-breadcrumb svg { width: 13px; }


.iu-breadcrumb strong { color: var(--iu-copy); font-weight: 600; }


.iu-breadcrumb button { border: 0; padding: 0; background: transparent; color: var(--iu-copy); cursor: pointer; }


.iu-text-link { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; border: 0; padding: 0; background: transparent; color: var(--iu-green); cursor: pointer; font-size: 10px; font-weight: 650; }


.iu-text-link svg { width: 14px; }


/* `hidden` must win over the display above: the staff-testing footer link ships
   hidden and is revealed only on a server that hosts IMPACT TESTING. Without
   this rule the authored display would make the attribute decorative and the
   link would appear on the production site too. */
.iu-text-link[hidden] { display: none; }


.iu-full-button { width: 100%; min-height: 38px; margin-top: 8px; font-size: 10px; }


.iu-list-item { display: flex; align-items: center; gap: 12px; min-height: 72px; border-top: 1px solid var(--iu-hairline); }


.iu-list-item-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--iu-green-light); color: var(--iu-green); }


.iu-list-item-icon svg { width: 18px; }


.iu-list-item > span:nth-child(2) { flex: 1; }


.iu-list-item strong, .iu-list-item small { display: block; }


.iu-list-item strong { font-size: 11px; }


.iu-list-item small { margin-top: 3px; color: var(--iu-muted); font-size: 9px; }


.iu-verification-main .iu-breadcrumb { margin-bottom: 33px; }


.iu-field-label { display: block; margin: 8px 0 7px; color: var(--iu-copy); font-size: 10px; }


.iu-field-helper { display: block; margin-top: 6px; color: var(--iu-muted); font-size: 9px; }


.iu-footer { min-height: 85px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--iu-border); padding: 14px max(28px, calc((100% - 1160px) / 2)); background: var(--iu-surface); }


.iu-footer-brand .iu-brand-mark { width: 30px; height: 30px; border-radius: 9px; }


.iu-footer-brand .iu-brand-mark svg { width: 17px; }


.iu-footer-brand .iu-brand-name { font-size: 15px; }


.iu-footer > span { color: var(--iu-muted); font-size: 10px; }


@media (prefers-color-scheme: dark) {
.iu-app { --iu-bg:#0e1513; --iu-surface:#141d1b; --iu-surface-soft:#172820; --iu-surface-muted:#1a2623; --iu-ink:#e8f0ee; --iu-copy:#a8b6b2; --iu-muted:#7e8d89; --iu-border:rgba(255,255,255,.11); --iu-hairline:rgba(255,255,255,.07); --iu-green:#63c49d; --iu-green-hover:#7bd3ad; --iu-green-light:rgba(99,196,157,.14); --iu-green-bright:#63c49d; --iu-sun:#f0b45f; --iu-sun-soft:rgba(240,180,95,.14); --iu-sky:#6bbbd8; --iu-sky-soft:rgba(107,187,216,.14); --iu-coral:#c97a72; --iu-coral-soft:rgba(201,122,114,.14); --iu-shadow:0 4px 14px rgba(0,0,0,.2); }

.iu-org-mark.coral { background: rgba(201,122,114,.14); }
.iu-org-mark.sun { background: rgba(240,180,95,.14); }
.iu-category-tag.community { background: rgba(180,145,211,.15); color: #c1a4e4; }
.iu-category-tag.education { background: rgba(240,180,95,.14); color: #f0b45f; }
.iu-stage-tag { background: rgba(20,29,27,.94); }
.iu-hero-orbit { border-color: rgba(99,196,157,.16); }
.iu-avatar-stack > span, .iu-avatar-stack > i { border-color: var(--iu-bg); }
.iu-notifications i { border-color: var(--iu-surface); }
.iu-floating-card { box-shadow: 0 8px 24px rgba(0,0,0,.3); }
}


@media (max-width: 1080px) {
.iu-header-inner { gap: 16px; }
.iu-navigation { gap: 0; }
.iu-header-search { width: min(185px,20vw); }
.iu-hero { min-height: 520px; }
.iu-hero-visual { transform: scale(.9); }
.iu-floating-card-top { right: -14px; }
.iu-feed-grid { grid-template-columns: 1fr; }
.iu-feed-grid .iu-tile-image-wrap { height: 220px; }
}


/* -------------------------------------------------------------------------
 * Header: compact panel takes over below 1020px.
 *
 * 1020px is measured, not guessed: the full desktop row needs 939px of content
 * plus the container's 56px of side margin = 995px to sit on one line, so above
 * 1020 it always fits with slack. Below it, the row cannot fit and the links
 * used to be squeezed onto two lines — the toggle becomes the only way to reach
 * the navigation.
 * ---------------------------------------------------------------------- */
@media (max-width: 1020px) {
.iu-header-inner { width: calc(100% - 32px); min-height: 64px; gap: 10px; }
.iu-mobile-menu { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; order: 3; border: 1px solid var(--iu-border); border-radius: 11px; background: var(--iu-surface); color: var(--iu-ink); }
.iu-mobile-menu svg { width: 19px; }
/* A compact panel that hangs just under the header, inset from the edges, with
 * rows that clear the 44px touch-target floor. */
.iu-navigation { position: absolute; top: calc(100% + 8px); right: 16px; left: 16px; display: none; flex-direction: column; align-items: stretch; gap: 2px; border: 1px solid var(--iu-border); border-radius: 14px; padding: 8px; background: var(--iu-surface); box-shadow: 0 14px 34px rgba(20, 32, 30, .16); }
.iu-navigation.is-open { display: flex; }
.iu-nav-link { min-height: 46px; justify-content: flex-start; padding: 0 14px; font-size: 14px; text-align: left; }
/* The auto margin belongs to the actions, not the toggle: it pushes the whole
 * right-hand group across, giving "logo … CTA ☰" instead of the CTA sitting
 * against the logo with the toggle stranded on the far edge. */
.iu-header-actions { order: 2; gap: 8px; margin-left: auto; }
/* Sign-in lives in the panel's flow on small screens; the primary call to
 * action stays visible in the bar, so there is exactly one of each. */
.iu-header-actions .iu-header-login { display: none; }
.iu-header-cta { min-height: 42px; padding-inline: 13px; font-size: 12px; }
}


@media (max-width: 760px) {
.iu-container { width: min(100% - 36px, 560px); }
.iu-brand-mark { width: 34px; height: 34px; }
.iu-brand-name { font-size: 17px; }
.impact-logo--md { --impact-logo-height: 44px; }
.iu-main { min-height: 75vh; }
.iu-hero { min-height: 0; grid-template-columns: 1fr; gap: 5px; padding-top: 35px; padding-bottom: 19px; }
.iu-hero-copy { padding-block: 0; }
.iu-eyebrow { font-size: 9px; }
.iu-hero h1 { margin: 16px 0 11px; font-size: clamp(47px,13vw,68px); }
.iu-hero-description { max-width: 360px; font-size: 14px; }
.iu-hero-actions { flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.iu-hero-actions .iu-button { min-height: 46px; font-size: 11px; }
.iu-hero-note { margin-top: 19px; }
.iu-hero-visual { min-height: 376px; transform: none; }
.iu-orbit-one { width: 275px; height: 275px; }
.iu-orbit-two { width: 330px; height: 330px; }
.iu-video-window { width: min(256px,69%); border-width: 5px; border-radius: 19px; transform: rotate(1deg); }
.iu-hero-video { height: 266px; }
.iu-video-window-caption { padding: 10px 11px 12px; font-size: 10px; }
.iu-video-kicker { font-size: 7px; }
.iu-floating-card { gap: 8px; padding: 9px; }
.iu-floating-card strong { font-size: 9px; }
.iu-floating-card small { font-size: 8px; }
.iu-floating-card-top { top: 42px; right: -1px; }
.iu-floating-icon { width: 29px; height: 29px; }
.iu-floating-card-bottom { bottom: 21px; left: -2px; }
.iu-mini-avatar { width: 27px; height: 27px; }
.iu-sunburst { right: 7px; bottom: 53px; font-size: 32px; }
.iu-trust-row { width: 100%; min-height: 77px; justify-content: space-evenly; gap: 7px; padding: 0 13px; }
.iu-trust-row > div { gap: 6px; }
.iu-trust-row > svg { width: 12px; }
.iu-trust-number { font-size: 9px; }
.iu-trust-row strong { font-size: 9px; }
.iu-trust-row small { max-width: 92px; font-size: 8px; }
.iu-featured-section { padding: 48px 0; }
.iu-section-heading { align-items: start; flex-direction: column; gap: 12px; }
.iu-section-heading h2 { font-size: 26px; }
.iu-section-heading p { font-size: 11px; }
.iu-section-heading > .iu-button { min-height: 35px; }
.iu-project-grid, .iu-feed-grid { grid-template-columns: 1fr; gap: 13px; margin-top: 18px; }
.iu-tile-image-wrap { height: 195px; }
.iu-tile-content { padding: 14px; }
.iu-tile-content h3 { font-size: 18px; }
.iu-tile-content > p { min-height: 0; }
.iu-tile-location { flex-wrap: wrap; }
.iu-card-actions { gap: 6px; }
.iu-card-actions > .iu-button-secondary { flex: 1; }
.iu-dual-invite { grid-template-columns: 1fr; gap: 11px; padding-bottom: 50px; }
.iu-invite-card { min-height: 0; gap: 12px; padding: 19px; }
.iu-invite-icon { width: 35px; height: 35px; }
.iu-invite-card h2 { font-size: 18px; }
.iu-invite-card p { font-size: 11px; }
.iu-screen { padding: 29px 0 55px; }
.iu-page-intro { align-items: flex-start; flex-direction: column; gap: 14px; }
.iu-location-pill { width: 100%; }
.iu-discover-controls { align-items: stretch; gap: 10px; margin-top: 20px; }
.iu-feed-search { width: 100%; }
.iu-filter-chips { flex-wrap: nowrap; overflow-x: auto; margin-right: -18px; padding-bottom: 3px; }
.iu-filter-chip { min-height: 34px; flex: 0 0 auto; }
.iu-feed-layout { display: block; margin-top: 18px; }
.iu-feed-sidebar { display: flex; align-items: center; gap: 5px; overflow-x: auto; position: static; margin: 0 -18px 14px; padding: 0 18px; }
.iu-feed-sidebar > .iu-overline, .iu-sidebar-note { display: none; }
.iu-sidebar-link { width: auto; min-height: 36px; flex: 0 0 auto; border: 1px solid var(--iu-border); padding: 0 10px; background: var(--iu-surface); font-size: 9px; }
.iu-sidebar-link svg { width: 14px; }
.iu-feed-grid .iu-tile-image-wrap { height: 205px; }
.iu-feed-grid .iu-tile-content h3 { font-size: 18px; }
.iu-verification-main .iu-breadcrumb { margin-bottom: 25px; }
.iu-footer { min-height: 75px; flex-wrap: wrap; justify-content: center; gap: 7px 14px; padding: 13px 18px 65px; text-align: center; }
.iu-footer > span { width: 100%; order: 3; }
.iu-footer .iu-text-link { min-height: 36px; font-size: 9px; }
.iu-footer-brand .iu-brand-mark { width: 26px; height: 26px; }
.iu-footer-brand .iu-brand-name { font-size: 13px; }
}


@media (max-width: 390px) {
.iu-container { width: calc(100% - 30px); }
/* The smallest phones: logo + call to action + toggle must still share one row.
 * The call to action shrinks here rather than the row wrapping. */
.iu-header-inner { gap: 8px; }
.iu-brand-name { font-size: 16px; }
.iu-header-cta { min-height: 40px; padding-inline: 11px; font-size: 11px; }
/* The label carries the meaning; the decorative arrow is the first thing to go
 * when the row is this tight. */
.iu-header-cta svg { display: none; }
.iu-hero-actions { align-items: stretch; flex-direction: column; }
.iu-hero-actions > * { width: 100%; }
.iu-hero-visual { min-height: 345px; }
.iu-trust-row { padding-inline: 7px; }
.iu-trust-row > div { gap: 4px; }
.iu-trust-row small { max-width: 77px; font-size: 7px; }
.iu-card-actions > .iu-button { gap: 5px; padding-inline: 8px; font-size: 9px; }
.iu-feed-heading { align-items: flex-start; gap: 7px; }
}


.iu-header-search { position: relative; }


.iu-header-search > svg { display: none; }


.iu-header-search input { padding-right: 30px; }


.iu-header-search-submit { position: absolute; right: 5px; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--iu-copy); cursor: pointer; }


.iu-header-search-submit:hover { background: var(--iu-surface-muted); color: var(--iu-green); }


.iu-header-search-submit svg { width: 16px; }


.iu-project-title-link { border: 0; padding: 0; background: transparent; color: inherit; cursor: pointer; text-align: left; font: inherit; font-weight: inherit; }


.iu-project-title-link:hover { color: var(--iu-green); }


.iu-project-detail-card { max-width: 900px; margin: 24px auto; border: 1px solid var(--iu-border); border-radius: 20px; padding: clamp(22px, 4vw, 44px); background: var(--iu-surface); box-shadow: var(--iu-shadow); }


.iu-project-detail-card h1 { margin: 16px 0 10px; font-size: clamp(30px, 4vw, 48px); line-height: 1.05; letter-spacing: -.06em; }


.iu-project-detail-card > p { max-width: 680px; color: var(--iu-copy); font-size: 16px; line-height: 1.65; }


.iu-detail-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }


.iu-detail-actions .iu-button { min-height: 42px; }


.iu-source-form .iu-form-section { display: flex; align-items: stretch; flex-direction: column; gap: 9px; }


.iu-source-form .iu-form-section p { margin: 0; color: var(--iu-copy); font-size: 12px; }


.iu-source-form .iu-field-label { margin-top: 7px; color: var(--iu-ink); font-size: 12px; font-weight: 650; }


.iu-source-input { width: 100%; min-height: 44px; border: 1px solid var(--iu-border); border-radius: 10px; padding: 10px 12px; background: var(--iu-surface); color: var(--iu-ink); }


textarea.iu-source-input { resize: vertical; }


.iu-source-input:focus { border-color: var(--iu-green); outline: 2px solid color-mix(in srgb, var(--iu-green) 22%, transparent); }


.iu-checkbox-label { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; }


.iu-checkbox-label input { width: 18px; height: 18px; accent-color: var(--iu-green); }


.iu-field-helper { color: var(--iu-copy); font-size: 11px; }


.iu-access-container { max-width: 640px; }


.iu-access-form { display: grid; gap: 8px; margin-top: 18px; }


.iu-access-form .iu-field-label { margin-top: 4px; }


.iu-access-form .iu-full-button { min-height: 46px; font-size: 12px; }


.iu-auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 4px; }


.iu-auth-links button, .iu-inline-button { border: 0; padding: 0; background: transparent; color: var(--iu-green); cursor: pointer; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }


.iu-inline-button { display: inline; font: inherit; }


.iu-form-status { border-left: 3px solid var(--iu-sun); padding: 8px 11px; background: #fff8e9; color: #72501c; font-size: 12px; }


.iu-avatar svg { width: 18px; height: 18px; }


@media (max-width: 680px) {
.iu-source-form .iu-form-section { width: 100%; min-width: 0; }
.iu-source-form .iu-filter-chips { flex-wrap: wrap; overflow: visible; margin-right: 0; }
}


@media (max-width: 680px) {
.iu-project-detail-card { margin-top: 18px; padding: 20px; }
.iu-project-detail-card > p { font-size: 13px; }
.iu-detail-actions { align-items: stretch; }
.iu-detail-actions .iu-button { flex: 1 1 42%; }
}


/* ------------------------------------------------------------------
 * Public-website sections that the v0 export did not include.
 *
 * The export covered the app's own screens; this website adds an FAQ and a
 * closing call to action, plus the mobile menu's close icon. They are built
 * from the same custom properties and metrics as the rest of the design
 * system, so they inherit light/dark and both breakpoints unchanged.
 * ------------------------------------------------------------------ */

.iu-icon-close[hidden], .iu-icon-menu[hidden] { display: none; }

.iu-faq { display: grid; gap: 10px; margin-top: 27px; }

.iu-faq-item { border: 1px solid var(--iu-border); border-radius: 14px; background: var(--iu-surface); overflow: hidden; }

.iu-faq-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; padding: 15px 18px; cursor: pointer; color: var(--iu-ink); font-size: 14px; font-weight: 650; list-style: none; }

.iu-faq-item > summary::-webkit-details-marker { display: none; }

.iu-faq-item > summary svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--iu-green); transition: transform .18s ease; }

.iu-faq-item[open] > summary svg { transform: rotate(180deg); }

.iu-faq-item > summary:hover { color: var(--iu-green); }

.iu-faq-item > p { margin: 0; border-top: 1px solid var(--iu-hairline); padding: 14px 18px 17px; color: var(--iu-copy); font-size: 13px; line-height: 1.7; }

.iu-faq-item > p a { color: var(--iu-green); text-underline-offset: 3px; }

/* ---- Offerings (for organizations: the five product lines) ---- */

.iu-offering-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 27px;
}

.iu-offering-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--iu-border);
  border-radius: 17px;
  padding: 20px;
  background: var(--iu-surface);
  box-shadow: 0 2px 7px rgba(20, 32, 30, .025);
}

.iu-offering-card h3 {
  margin: 13px 0 7px;
  font-size: 19px;
  line-height: 1.22;
  letter-spacing: -.04em;
  color: var(--iu-ink);
}

.iu-offering-card > p {
  margin: 0;
  color: var(--iu-copy);
  font-size: 12px;
  line-height: 1.65;
}

.iu-offering-list {
  margin: 13px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.iu-offering-list li {
  position: relative;
  padding-left: 17px;
  color: var(--iu-copy);
  font-size: 11px;
  line-height: 1.55;
}

.iu-offering-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--iu-green);
  font-size: 10px;
  font-weight: 700;
}

.iu-offering-note {
  margin: 12px 0 0;
  color: var(--iu-muted);
  font-size: 10px;
  line-height: 1.6;
}

.iu-offering-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid var(--iu-hairline);
}

.iu-offering-price { color: var(--iu-ink); font-size: 12px; font-weight: 700; }

.iu-offering-disclaimer {
  max-width: 760px;
  margin: 24px 0 0;
  color: var(--iu-muted);
  font-size: 11px;
  line-height: 1.7;
}

.iu-cta-band { display: flex; align-items: center; justify-content: space-between; gap: 26px; margin: 0 0 78px; border: 1px solid var(--iu-border); border-radius: 20px; padding: 34px; background: var(--iu-surface-soft); }

.iu-cta-band h2 { max-width: 520px; margin: 10px 0 0; font-size: 30px; line-height: 1.15; letter-spacing: -.055em; }

.iu-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 760px) {
.iu-faq-item > summary { min-height: 52px; padding: 13px 14px; font-size: 12px; }
.iu-faq-item > p { padding: 12px 14px 15px; font-size: 11px; }
.iu-offering-grid { grid-template-columns: 1fr; }
.iu-offering-foot { flex-direction: column; align-items: stretch; }
.iu-offering-foot .iu-button { width: 100%; }
.iu-cta-band { flex-direction: column; align-items: stretch; gap: 17px; margin-bottom: 52px; padding: 21px; }
.iu-cta-band h2 { font-size: 23px; }
.iu-cta-actions { align-items: stretch; flex-direction: column; }
.iu-cta-actions .iu-button { width: 100%; }
}