/* ==========================================================================
   Find Me Funders — modern fintech
   Deep navy ink, electric blue action colour, indigo gradient accents,
   white cards on a cool ground, soft elevation, motion on scroll.
   ========================================================================== */

:root {
  /* Ground */
  --bg: #F6F8FC;
  --bg-2: #EDF1F9;
  --surface: #FFFFFF;

  /* Ink */
  --ink: #0B1220;
  --ink-2: #475069;
  --ink-3: #5F6882;
  --on-dark: #FFFFFF;
  --on-dark-2: #A8B6D4;

  /* Brand */
  --brand: #2549E8;
  --brand-600: #1C39C4;
  --brand-700: #162E9E;
  --brand-50: #EEF2FF;
  --brand-100: #DDE4FF;
  --indigo: #6D3AED;
  --grad: linear-gradient(135deg, #2549E8 0%, #5B37E0 55%, #7C3AED 100%);
  --grad-soft: linear-gradient(135deg, #EEF2FF 0%, #F3EEFF 100%);

  /* Semantic */
  --ok: #067A55;
  --ok-50: #E6F5F0;
  --flag: #A85B10;          /* paid placement only */
  --flag-50: #FDF3E4;

  /* Lines */
  --line: #E3E9F4;
  --line-2: #CBD5E9;
  --field-line: #7A8AAB;

  /* Type */
  --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Space */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s7:32px; --s8:40px; --s9:48px; --s10:64px; --s11:80px; --s12:96px;

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-full:999px;

  /* Elevation */
  --sh-1: 0 1px 2px rgba(11,18,32,.06), 0 1px 3px rgba(11,18,32,.05);
  --sh-2: 0 4px 10px rgba(11,18,32,.06), 0 12px 28px rgba(11,18,32,.07);
  --sh-3: 0 10px 24px rgba(11,18,32,.10), 0 30px 60px rgba(11,18,32,.12);
  --sh-brand: 0 10px 24px rgba(37,73,232,.22);

  --container: 1240px;
  --gutter: 20px;
  --header-h: 68px;
  --dur: 180ms;
  --dur-2: 420ms;
  --ease: cubic-bezier(.22,.68,.28,1);
}
@media (min-width: 900px) { :root { --gutter: 32px; --header-h: 76px; } }

/* --- Reset ---------------------------------------------------------------- */
*,*::before,*::after { box-sizing: border-box; }
/* clip, not hidden: hidden turns these into scroll containers and breaks
   position:sticky on the header and filter bar. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }

body {
  margin:0; font-family: var(--sans); font-size:16px; line-height:1.6;
  color: var(--ink-2); background: var(--bg);
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
  overflow-x: clip;
}
@media (min-width:1024px){ body{ font-size:17px; } }

img,svg{ max-width:100%; height:auto; display:block; }
a{ color: var(--brand); text-underline-offset:2px; }
a:hover{ color: var(--brand-600); }

h1,h2,h3{ font-family:var(--sans); color:var(--ink); margin:0 0 var(--s4);
  letter-spacing:-.025em; line-height:1.14; font-weight:800; text-wrap:balance; }
h1{ font-size: clamp(2rem, 1.35rem + 2.5vw, 3rem); }
h2{ font-size: clamp(1.55rem, 1.25rem + 1.25vw, 2.15rem); }
h3{ font-size:1.15rem; font-weight:700; line-height:1.3; letter-spacing:-.015em; }
h4{ font-size:.95rem; font-weight:700; color:var(--ink); margin:0 0 var(--s3); }
p{ margin:0 0 var(--s4); max-width:66ch; }

:focus-visible{ outline:3px solid var(--brand); outline-offset:2px; border-radius:4px; }

.skip-link{ position:absolute; left:var(--s4); top:-100px; z-index:200;
  background:var(--ink); color:#fff; padding:var(--s3) var(--s5);
  border-radius:var(--r-md); font-weight:700; text-decoration:none; transition:top var(--dur) var(--ease); }
.skip-link:focus{ top:var(--s4); color:#fff; }

.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; }

/* --- Motion --------------------------------------------------------------- */

.js [data-reveal]{ opacity:0; transform: translateY(22px); }
.js [data-reveal].is-in{ opacity:1; transform:none;
  transition: opacity 620ms var(--ease), transform 620ms var(--ease); }
[data-reveal-delay="1"].is-in{ transition-delay:80ms; }
[data-reveal-delay="2"].is-in{ transition-delay:160ms; }
[data-reveal-delay="3"].is-in{ transition-delay:240ms; }
[data-reveal-delay="4"].is-in{ transition-delay:320ms; }

@keyframes floaty { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }
@keyframes marquee { from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; }
  .js [data-reveal]{ opacity:1 !important; transform:none !important; }
  .marquee__track{ animation:none !important; }
}

/* --- Layout --------------------------------------------------------------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block: clamp(56px, 6.5vw, 104px); }
.section--tight{ padding-block: clamp(36px, 4vw, 64px); }
.section--alt{ background:var(--bg-2); }
.section--white{ background:var(--surface); }

.kicker{ display:inline-flex; align-items:center; gap:var(--s2);
  font-size:.74rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--brand); margin:0 0 var(--s3); }
.section--dark .kicker{ color:#9FB4FF; }

.section-head{ max-width:60ch; margin-bottom:var(--s8); }
.section-head p{ margin-bottom:0; font-size:1.02rem; }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head--center p{ margin-inline:auto; }

/* --- Buttons -------------------------------------------------------------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:50px; padding:var(--s3) var(--s6); border:1px solid transparent;
  border-radius:var(--r-md); font-size:.95rem; font-weight:700; line-height:1.2;
  text-decoration:none; cursor:pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.btn svg{ width:17px; height:17px; }
.btn--primary{ background:var(--grad); color:#fff; box-shadow:var(--sh-brand); }
.btn--primary:hover{ color:#fff; transform:translateY(-2px); box-shadow:0 14px 30px rgba(37,73,232,.32); }
.btn--secondary{ background:var(--surface); color:var(--ink); border-color:var(--field-line); box-shadow:var(--sh-1); }
.btn--secondary:hover{ color:var(--ink); transform:translateY(-2px); box-shadow:var(--sh-2); border-color:var(--field-line); }
.btn--onDark{ background:#fff; color:var(--ink); }
.btn--onDark:hover{ color:var(--ink); transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.25); }
.btn--ghostDark{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.28); }
.btn--ghostDark:hover{ background:rgba(255,255,255,.16); color:#fff; }
.btn--sm{ min-height:40px; padding:var(--s2) var(--s4); font-size:.85rem; }
.btn--block{ width:100%; }

/* --- Header --------------------------------------------------------------- */
.header{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid transparent;
  transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.header.is-stuck{ border-bottom-color:var(--line); box-shadow:0 2px 14px rgba(11,18,32,.06); }
.header__inner{ display:flex; align-items:center; gap:var(--s5); min-height:var(--header-h);
  transition: min-height var(--dur-2) var(--ease); }
.header.is-stuck .header__inner{ min-height:60px; }

.brand{ display:inline-flex; align-items:center; gap:var(--s3); margin-right:auto;
  font-size:1.16rem; font-weight:800; letter-spacing:-.03em; color:var(--ink);
  text-decoration:none; padding-block:4px; }
.brand:hover{ color:var(--ink); }
.brand__mark{ width:32px; height:32px; flex:none; border-radius:9px; background:var(--grad);
  display:grid; place-items:center; box-shadow:var(--sh-brand); }
.brand__mark svg{ width:17px; height:17px; color:#fff; }

.nav{ display:none; }
@media (min-width:1040px){ .nav{ display:flex; align-items:center; gap:2px; } }
.nav__item{ position:relative; }
.nav__link{ display:inline-flex; align-items:center; gap:6px; min-height:40px;
  padding:var(--s2) var(--s3); background:none; border:0; border-radius:var(--r-sm);
  font:inherit; font-size:.92rem; font-weight:600; color:var(--ink-2);
  text-decoration:none; cursor:pointer; transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.nav__link:hover{ color:var(--ink); background:var(--brand-50); }
.nav__link[aria-expanded="true"]{ color:var(--brand); background:var(--brand-50); }
.nav__caret{ width:10px; height:10px; transition:transform var(--dur) var(--ease); }
.nav__link[aria-expanded="true"] .nav__caret{ transform:rotate(180deg); }

.mega{ position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%);
  width:min(940px, calc(100vw - 48px)); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-3);
  padding:var(--s6); z-index:120; }
.mega[hidden]{ display:none; }
.mega--wide{ width:min(1120px, calc(100vw - 48px)); }
.mega__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s5) var(--s6); }
.mega__col h4{ font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:var(--s3); }
.mega__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.mega__link{ display:flex; gap:var(--s3); align-items:flex-start; padding:var(--s2);
  border-radius:var(--r-sm); text-decoration:none; color:var(--ink);
  transition:background var(--dur) var(--ease); }
.mega__link:hover{ background:var(--brand-50); color:var(--brand); }
.mega__ico{ width:32px; height:32px; flex:none; border-radius:9px; background:var(--brand-50);
  color:var(--brand); display:grid; place-items:center; }
.mega__ico svg{ width:16px; height:16px; }
.mega__link b{ display:block; font-size:.88rem; font-weight:700; }
.mega__link em{ display:block; font-style:normal; font-size:.76rem; font-weight:500; color:var(--ink-3); }
/* The count sits under the description as a meta line, not floated to the
   right of a wrapping title. Right-aligning it stole width from the title,
   which then wrapped to three lines and left the number stranded at the top
   reading as a stray figure. */
.mega__n{ display:inline-block; margin-top:5px; padding:2px 8px;
  border-radius:var(--r-full); background:var(--bg-2); border:1px solid var(--line);
  font-family:var(--mono); font-size:.68rem; font-weight:700; line-height:1.5;
  color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease); }
.mega__link:hover .mega__n{ background:#fff; border-color:var(--brand-100);
  color:var(--brand-700); }
.mega__cols .mega__n{ margin-top:3px; }
.mega__cols{ columns:3; column-gap:var(--s6); list-style:none; margin:0; padding:0; }
.mega__cols li{ break-inside:avoid; }
.mega__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s4);
  margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--line);
  font-size:.82rem; color:var(--ink-3); }
.mega__foot a{ font-weight:700; margin-left:auto; }

.header__cta{ display:none; }
@media (min-width:1040px){ .header__cta{ display:inline-flex; } }
.menu-toggle{ display:inline-flex; align-items:center; min-height:44px; padding:var(--s2) var(--s4);
  background:var(--surface); border:1px solid var(--field-line); border-radius:var(--r-md);
  font:inherit; font-size:.85rem; font-weight:700; color:var(--ink); cursor:pointer; }
@media (min-width:1040px){ .menu-toggle{ display:none; } }

.mnav{ border-top:1px solid var(--line); background:var(--surface); padding-bottom:var(--s6);
  max-height:calc(100vh - var(--header-h)); overflow-y:auto; }
.mnav[hidden]{ display:none; }
.mnav__group{ border-bottom:1px solid var(--line); }
.mnav__trigger{ display:flex; width:100%; align-items:center; justify-content:space-between;
  padding:var(--s4) 0; background:none; border:0; font:inherit; font-size:1rem;
  font-weight:700; color:var(--ink); cursor:pointer; }
.mnav__panel[hidden]{ display:none; }
.mnav__panel a{ display:flex; justify-content:space-between; gap:var(--s3);
  padding:var(--s3) 0 var(--s3) var(--s4); font-size:.92rem; color:var(--ink-2); text-decoration:none; }
.mnav > .container > a{ display:block; padding:var(--s4) 0; border-bottom:1px solid var(--line);
  font-size:1rem; font-weight:700; color:var(--ink); text-decoration:none; }
.mnav .btn{ margin-top:var(--s5); }

/* --- Hero ----------------------------------------------------------------- */
.hero{ position:relative; overflow:hidden; background:var(--surface);
  padding-block: clamp(44px,5vw,88px) clamp(48px,5.5vw,96px); }
.hero::before{ content:""; position:absolute; inset:-20% -10% auto -10%; height:70%;
  background: radial-gradient(45% 60% at 18% 30%, rgba(37,73,232,.16), transparent 70%),
              radial-gradient(40% 55% at 78% 12%, rgba(124,58,237,.16), transparent 70%);
  pointer-events:none; }
.hero__grid{ position:relative; display:grid; gap:var(--s9); }
@media (min-width:1040px){
  .hero__grid{ grid-template-columns:minmax(0,1fr) minmax(0,.92fr); gap:var(--s10); align-items:center; }
}
.hero h1{ margin-bottom:var(--s5); }
.hero h1 .grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero__deck{ font-size:clamp(1.04rem,.99rem+.32vw,1.2rem); color:var(--ink-2); max-width:48ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s7); }
.hero__trust{ display:flex; flex-wrap:wrap; gap:var(--s3) var(--s6); margin-top:var(--s7);
  font-size:.86rem; color:var(--ink-3); }
.hero__trust span{ display:inline-flex; align-items:center; gap:6px; }
.hero__trust svg{ width:16px; height:16px; color:var(--ok); flex:none; }

/* Product mockup */
.mock{ position:relative; margin-block:var(--s5); }
.mock__glow{ position:absolute; inset:8% -6% -10% -6%; background:var(--grad);
  filter:blur(58px); opacity:.22; border-radius:50%; pointer-events:none; }
.mock__card{ position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-xl); box-shadow:var(--sh-3); overflow:hidden; }
.mock__bar{ display:flex; align-items:center; gap:6px; padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--line); background:var(--bg); }
.mock__dot{ width:9px; height:9px; border-radius:50%; background:var(--line-2); }
.mock__title{ margin-left:var(--s3); font-size:.76rem; font-weight:700; color:var(--ink-3); }
.mock__rows{ padding:var(--s3) 0; }
.mock__row{ display:grid; grid-template-columns:1fr auto auto; gap:var(--s3);
  align-items:center; padding:var(--s3) var(--s5); font-size:.82rem; }
.mock__row + .mock__row{ border-top:1px solid var(--line); }
.mock__row b{ font-weight:700; color:var(--ink); font-size:.86rem; }
.mock__row small{ display:block; color:var(--ink-3); font-size:.72rem; font-weight:500; }
.mock__amt{ font-weight:700; color:var(--ink); }
.mock__pill{ padding:2px 9px; border-radius:var(--r-full); font-size:.68rem; font-weight:800;
  background:var(--ok-50); color:var(--ok); white-space:nowrap; }
.mock__pill--flag{ background:var(--flag-50); color:var(--flag); }
.mock__foot{ padding:var(--s4) var(--s5); background:var(--bg); border-top:1px solid var(--line);
  font-size:.76rem; color:var(--ink-3); }

.mock__float{ position:absolute; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); box-shadow:var(--sh-2); padding:var(--s3) var(--s4); }
.mock__float b{ display:block; font-size:1.15rem; font-weight:800; color:var(--ink); line-height:1.1; }
.mock__float span{ font-size:.72rem; color:var(--ink-3); font-weight:600; }
/* Pinned to the corners so they read as layered chrome rather than covering
   the rows underneath — the earlier inset positions hid two funder names. */
.mock__float--a{ left:-9%; bottom:14%; animation:floaty 7s ease-in-out infinite; }
.mock__float--b{ right:-6%; top:-7%; animation:floaty 8.5s ease-in-out .8s infinite; }
@media (max-width:1120px){ .mock__float--a{ left:-3%; bottom:20%; } .mock__float--b{ right:-2%; } }
@media (max-width:640px){ .mock__float{ display:none; } }

/* --- Marquee (4 desktop / 3 tablet / 2 mobile) ---------------------------- */
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__track{ display:flex; width:max-content; animation:marquee 38s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__item{ flex:none; width:50vw; display:grid; place-items:center; padding:var(--s4) var(--s3); }
@media (min-width:700px){ .marquee__item{ width:33.333vw; } }
@media (min-width:1040px){ .marquee__item{ width:25vw; max-width:300px; } }
.marquee__name{ font-size:.98rem; font-weight:800; letter-spacing:-.02em; color:var(--ink-3);
  white-space:nowrap; transition:color var(--dur) var(--ease); }
.marquee__item:hover .marquee__name{ color:var(--ink); }

/* --- Stats ---------------------------------------------------------------- */
.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4); }
@media (min-width:860px){ .stats{ grid-template-columns:repeat(4,1fr); gap:var(--s5); } }
.stat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s5); box-shadow:var(--sh-1);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.stat:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); }
.stat__ico{ width:36px; height:36px; border-radius:10px; background:var(--brand-50); color:var(--brand);
  display:grid; place-items:center; margin-bottom:var(--s4); }
.stat__ico svg{ width:18px; height:18px; }
.stat__n{ font-size:clamp(1.7rem,1.4rem+1.1vw,2.2rem); font-weight:800; letter-spacing:-.03em;
  color:var(--ink); line-height:1; }
.stat__l{ margin-top:6px; font-size:.85rem; color:var(--ink-3); font-weight:500; }

/* --- Qualifier card ------------------------------------------------------- */
.qual{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--sh-3); padding:var(--s6); }
@media (min-width:600px){ .qual{ padding:var(--s7); } }
.qual h2{ font-size:1.3rem; margin-bottom:var(--s2); }
.qual__note{ font-size:.86rem; color:var(--ink-3); margin-bottom:var(--s5); }
.qual__result{ display:flex; align-items:center; gap:var(--s4); margin-bottom:var(--s5);
  padding:var(--s4) var(--s5); border-radius:var(--r-md); background:var(--grad-soft);
  border:1px solid var(--brand-100); }
.qual__count{ font-size:1.9rem; font-weight:800; letter-spacing:-.03em; color:var(--brand-700); line-height:1; }
.qual__label{ font-size:.85rem; color:var(--ink-2); font-weight:500; }

.field{ margin-bottom:var(--s4); }
.field label{ display:block; margin-bottom:6px; font-size:.8rem; font-weight:700; color:var(--ink-2); }
.field select,.field input{ width:100%; min-width:0; min-height:50px; padding:var(--s3) var(--s4);
  font:inherit; font-size:.93rem; color:var(--ink); background:var(--surface);
  border:1px solid var(--field-line); border-radius:var(--r-md); appearance:none;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.field select{ padding-right:var(--s8);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475069' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right var(--s4) center; background-size:16px; }
.field select:hover,.field input:hover{ border-color:var(--brand); }
.field select:focus,.field input:focus{ box-shadow:0 0 0 4px var(--brand-50); }
.field-row{ display:grid; gap:var(--s4); }
@media (min-width:520px){ .field-row{ grid-template-columns:1fr 1fr; } }

/* --- Cards / grids -------------------------------------------------------- */
.grid{ display:grid; gap:var(--s5); }
.grid--2{ grid-template-columns:1fr; }
.grid--3{ grid-template-columns:1fr; }
.grid--4{ grid-template-columns:repeat(2,1fr); }
@media (min-width:680px){ .grid--2{ grid-template-columns:repeat(2,1fr); } .grid--3{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .grid--3{ grid-template-columns:repeat(3,1fr); } .grid--4{ grid-template-columns:repeat(4,1fr); } }

.card{ display:block; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--s6); text-decoration:none; color:inherit;
  box-shadow:var(--sh-1);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
a.card:hover{ color:inherit; transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--brand-100); }
.card__ico{ width:44px; height:44px; border-radius:12px; background:var(--brand-50); color:var(--brand);
  display:grid; place-items:center; margin-bottom:var(--s4);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.card__ico svg{ width:21px; height:21px; }
a.card:hover .card__ico{ background:var(--grad); color:#fff; }
.card h3{ margin-bottom:6px; }
.card p{ font-size:.9rem; color:var(--ink-2); margin:0; }
.card__meta{ display:inline-flex; align-items:center; gap:6px; margin-top:var(--s4);
  font-size:.82rem; font-weight:700; color:var(--brand); }
.card__meta svg{ width:14px; height:14px; transition:transform var(--dur) var(--ease); }
a.card:hover .card__meta svg{ transform:translateX(3px); }

/* Photo cards (industries) */
.pcard{ display:block; border-radius:var(--r-lg); overflow:hidden; background:var(--surface);
  border:1px solid var(--line); box-shadow:var(--sh-1); text-decoration:none; color:inherit;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.pcard:hover{ color:inherit; transform:translateY(-4px); box-shadow:var(--sh-2); }
.pcard__media{ display:block; position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--grad-soft); }
.pcard__media img{ width:100%; height:100%; object-fit:cover;
  transition:transform 640ms var(--ease); }
.pcard:hover .pcard__media img{ transform:scale(1.05); }
/* Placeholder until a licensed photo is uploaded in the admin */
/* Shown until a licensed photo is uploaded against the Industry record. */
.pcard__ph{ position:absolute; inset:0; display:grid; place-items:center;
  background:var(--grad-soft) ; }
.pcard__ph::after{ content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg, rgba(37,73,232,.05) 0 10px, transparent 10px 20px); }
.pcard__ph svg{ position:relative; z-index:1; width:34px; height:34px; color:var(--brand); opacity:.55; }
.pcard__body{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding:var(--s4) var(--s5); }
.pcard__body h3{ margin:0; font-size:1rem; }
.pcard__n{ font-size:.8rem; font-weight:700; color:var(--ink-3); white-space:nowrap; }

/* --- Steps ---------------------------------------------------------------- */
.steps{ display:grid; gap:var(--s5); counter-reset:step; }
@media (min-width:900px){ .steps{ grid-template-columns:repeat(3,1fr); gap:var(--s6); } }
.step{ position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--s6); box-shadow:var(--sh-1); }
.step__n{ counter-increment:step; width:40px; height:40px; border-radius:12px;
  background:var(--grad); color:#fff; display:grid; place-items:center;
  font-weight:800; font-size:.95rem; margin-bottom:var(--s4); box-shadow:var(--sh-brand); }
.step__n::before{ content:counter(step); }
.step h3{ margin-bottom:6px; }
.step p{ font-size:.92rem; margin:0; }

/* --- Comparison table ----------------------------------------------------- */
.ctable-wrap{ overflow-x:auto; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-1); }
.ctable{ width:100%; min-width:640px; border-collapse:collapse; font-size:.9rem; }
.ctable th,.ctable td{ padding:var(--s4) var(--s5); text-align:left; border-bottom:1px solid var(--line); }
.ctable thead th{ font-size:.72rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); background:var(--bg); }
.ctable tbody th{ font-weight:600; color:var(--ink); font-size:.89rem; }
.ctable tbody tr:last-child th,.ctable tbody tr:last-child td{ border-bottom:0; }
.ctable .col-best{ background:var(--brand-50); }
.ctable thead .col-best{ color:var(--brand-700); background:var(--brand-100); }
.verdict{ display:inline-flex; align-items:center; gap:6px; font-size:.86rem; color:var(--ink-3); }
.verdict svg{ width:15px; height:15px; flex:none; }
.verdict--yes{ color:var(--ok); font-weight:600; }

/* --- FAQ ------------------------------------------------------------------ */
.faq{ max-width:78ch; }
.faq details{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  margin-bottom:var(--s3); box-shadow:var(--sh-1); overflow:hidden; }
.faq details[open]{ border-color:var(--brand-100); }
.faq summary{ display:flex; justify-content:space-between; align-items:center; gap:var(--s4);
  padding:var(--s5); cursor:pointer; list-style:none; font-size:1rem; font-weight:700; color:var(--ink); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; flex:none; width:22px; height:22px; border-radius:50%;
  background:var(--brand-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232549E8' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/13px no-repeat;
  transition:transform var(--dur-2) var(--ease); }
.faq details[open] summary::after{ transform:rotate(135deg); }
.faq details > div{ padding:0 var(--s5) var(--s5); }
.faq p{ font-size:.93rem; margin:0; }

/* --- Callouts ------------------------------------------------------------- */
.callout{ background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--brand);
  border-radius:var(--r-md); padding:var(--s5) var(--s6); box-shadow:var(--sh-1); }
.callout--flag{ border-left-color:var(--flag); background:var(--flag-50); border-color:#EFDCC0; }
.callout h3{ font-size:1.02rem; margin-bottom:6px; }
.callout p{ font-size:.91rem; margin:0; }

/* --- CTA band ------------------------------------------------------------- */
.ctaband{ position:relative; overflow:hidden; background:var(--grad); border-radius:var(--r-xl);
  padding:clamp(36px,4.5vw,68px); text-align:center; box-shadow:var(--sh-3); }
.ctaband::after{ content:""; position:absolute; inset:auto -10% -60% -10%; height:80%;
  background:radial-gradient(50% 60% at 50% 0%, rgba(255,255,255,.22), transparent 70%); pointer-events:none; }
.ctaband h2{ color:#fff; position:relative; margin-inline:auto; max-width:20ch; }
.ctaband p{ color:rgba(255,255,255,.86); position:relative; margin-inline:auto; max-width:56ch; }
.ctaband__actions{ position:relative; display:flex; flex-wrap:wrap; gap:var(--s3);
  justify-content:center; margin-top:var(--s6); }
.ctaband__note{ position:relative; margin-top:var(--s5); font-size:.85rem; color:rgba(255,255,255,.8); }
.ctaband__note a{ color:#fff; font-weight:700; padding:4px 2px; display:inline-block; }

/* --- Footer --------------------------------------------------------------- */
.footer{ background:var(--ink); color:var(--on-dark-2); padding-block:var(--s11) var(--s7); }
.footer__grid{ display:grid; gap:var(--s7); }
@media (min-width:760px){ .footer__grid{ grid-template-columns:1.5fr 1fr 1fr 1fr; } }
.footer h4{ font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:#fff; margin-bottom:var(--s3); }
.footer ul{ list-style:none; margin:0; padding:0; }
.footer ul a,.footer__meta a{ display:inline-block; padding-block:5px; }
.footer a{ color:var(--on-dark-2); text-decoration:none; font-size:.89rem; }
.footer a:hover{ color:#fff; }
.footer .brand{ color:#fff; margin-bottom:var(--s4); }
.footer .brand:hover{ color:#fff; }
.footer__about{ font-size:.89rem; max-width:38ch; }
.footer__legal{ margin-top:var(--s9); padding-top:var(--s6); border-top:1px solid rgba(255,255,255,.12); font-size:.81rem; }
.footer__legal p{ max-width:88ch; color:#8494B5; }
.footer__legal p + p{ margin-top:var(--s3); }
.footer__legal b{ color:#fff; }
.footer__meta{ display:flex; flex-wrap:wrap; gap:var(--s4); margin-top:var(--s4); font-size:.81rem; }

/* --- Filters -------------------------------------------------------------- */
.filters{ background:rgba(246,248,252,.92); backdrop-filter:blur(10px);
  border-block:1px solid var(--line); padding-block:var(--s4); }
@media (min-width:900px){ .filters{ position:sticky; top:var(--header-h); z-index:40; } }
.filters__top{ display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; }

.search{ position:relative; flex:1 1 100%; min-width:0; }
@media (min-width:760px){ .search{ flex:0 1 320px; } }
.search input{ width:100%; min-height:46px; padding:var(--s2) var(--s4) var(--s2) 42px;
  font:inherit; font-size:.9rem; color:var(--ink); background:var(--surface);
  border:1px solid var(--field-line); border-radius:var(--r-md);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.search input:focus{ border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-50); }
.search svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--ink-3); pointer-events:none; }

.selects{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); width:100%; min-width:0; }
@media (min-width:760px){ .selects{ display:flex; width:auto; min-width:auto; margin-left:auto; } }
.selects select{ min-width:0; width:100%; min-height:46px;
  padding:var(--s2) var(--s7) var(--s2) var(--s4); font:inherit; font-size:.86rem; font-weight:600;
  color:var(--ink-2); background-color:var(--surface); border:1px solid var(--field-line);
  border-radius:var(--r-md); appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475069' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right var(--s3) center; background-size:15px; }
@media (min-width:760px){ .selects select{ min-width:158px; } }

.chips{ display:flex; gap:var(--s2); flex:1 1 100%; min-width:0; max-width:100%;
  overflow-x:auto; overscroll-behavior-x:contain; padding-bottom:3px; scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent); }
.chip{ flex:none; min-height:38px; padding:var(--s2) var(--s4); background:var(--surface);
  border:1px solid var(--field-line); border-radius:var(--r-full); font:inherit; font-size:.84rem;
  font-weight:600; color:var(--ink-2); white-space:nowrap; cursor:pointer;
  transition:all var(--dur) var(--ease); }
.chip:hover{ border-color:var(--brand); color:var(--brand); }
.chip[aria-pressed="true"]{ background:var(--grad); border-color:transparent; color:#fff;
  box-shadow:var(--sh-brand); }
.chip__n{ font-size:.75rem; opacity:.72; margin-left:4px; font-weight:700; }

.filters__bar{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3) var(--s4); margin-top:var(--s3); }
.filters__count{ margin:0; font-size:.84rem; color:var(--ink-3); font-weight:500; }
.filters__count b{ color:var(--ink); font-weight:800; }
.active-filters{ display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center; }
.active-filters:empty{ display:none; }
.afchip{ display:inline-flex; align-items:center; gap:var(--s2); min-height:32px;
  padding:2px var(--s2) 2px var(--s3); background:var(--brand-50); border:1px solid var(--brand-100);
  border-radius:var(--r-full); font:inherit; font-size:.79rem; font-weight:600;
  color:var(--brand-700); cursor:pointer; transition:background var(--dur) var(--ease); }
.afchip:hover{ background:var(--brand-100); }
.afchip svg{ width:13px; height:13px; }
.afclear{ background:none; border:0; padding:var(--s2) 0; font:inherit; font-size:.82rem;
  font-weight:700; color:var(--brand); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }

/* --- Funder table --------------------------------------------------------- */
.table-wrap{ background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-1); }
.ftable{ width:100%; border-collapse:collapse; font-size:.9rem; }
.ftable caption{ text-align:left; padding:0 0 var(--s3); font-size:.83rem; color:var(--ink-3); }

.ftable thead{ display:none; }
@media (min-width:1060px){
  .ftable thead{ display:table-header-group; }
  .ftable thead th{ position:sticky; top:var(--stick-top, calc(var(--header-h) + 112px)); z-index:20;
    background:var(--bg); text-align:left; padding:0; border-bottom:1px solid var(--line); white-space:nowrap; }
  .ftable thead th:first-child{ border-top-left-radius:var(--r-lg); }
  .ftable thead th:last-child{ border-top-right-radius:var(--r-lg); }
}
.sortbtn{ display:flex; align-items:center; gap:6px; width:100%; min-height:46px;
  padding:var(--s3) var(--s4); background:none; border:0; font:inherit; font-size:.72rem;
  font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
  cursor:pointer; text-align:left; transition:color var(--dur) var(--ease); }
.sortbtn:hover{ color:var(--brand); }
.sortbtn__i{ width:12px; height:12px; opacity:.3; flex:none; }
th[aria-sort="ascending"] .sortbtn,th[aria-sort="descending"] .sortbtn{ color:var(--brand); }
th[aria-sort="ascending"] .sortbtn__i,th[aria-sort="descending"] .sortbtn__i{ opacity:1; }
th[aria-sort="descending"] .sortbtn__i{ transform:rotate(180deg); }
.th-plain{ padding:var(--s3) var(--s4); font-size:.72rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); }

.ftable tbody tr{ display:block; padding:var(--s5); border-bottom:1px solid var(--line); }
.ftable tbody tr:last-child{ border-bottom:0; }
.ftable tbody tr.is-partner{ background:var(--flag-50); }
.ftable tbody tr[hidden]{ display:none; }
.ftable td{ display:flex; gap:var(--s4); padding:3px 0; align-items:baseline; }
.ftable td::before{ content:attr(data-label); flex:none; width:110px; font-size:.7rem;
  font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); }
.ftable td.c-name,.ftable td.c-act{ display:block; }
.ftable td.c-name::before,.ftable td.c-act::before{ display:none; }
.ftable td.c-name{ margin-bottom:var(--s3); }
.ftable td.c-act{ margin-top:var(--s4); }

@media (min-width:1060px){
  .ftable tbody tr{ display:table-row; padding:0; transition:background var(--dur) var(--ease); }
  .ftable td{ display:table-cell; padding:var(--s4); vertical-align:middle; border-bottom:1px solid var(--line); }
  .ftable td::before{ display:none; }
  .ftable td.c-name,.ftable td.c-act{ display:table-cell; margin:0; }
  .ftable tbody tr:hover{ background:var(--brand-50); }
  .ftable tbody tr.is-partner:hover{ background:#FBEBD6; }
  .ftable tbody tr:last-child td{ border-bottom:0; }
  .ftable th:nth-child(1),.ftable td:nth-child(1){ width:22%; }
  .ftable th:nth-child(2),.ftable td:nth-child(2){ width:11%; white-space:nowrap; }
  .ftable th:nth-child(3),.ftable td:nth-child(3){ width:15%; }
  .ftable th:nth-child(4),.ftable td:nth-child(4){ width:8%; white-space:nowrap; }
  .ftable th:nth-child(5),.ftable td:nth-child(5){ width:8%; white-space:nowrap; }
  .ftable th:nth-child(6),.ftable td:nth-child(6){ width:10%; white-space:nowrap; }
  .ftable th:nth-child(7),.ftable td:nth-child(7){ width:18%; }
  .ftable th:nth-child(8),.ftable td:nth-child(8){ width:8%; white-space:nowrap; }
  .ftable td.c-name{ white-space:normal; }
}

.fname{ display:inline-block; padding-block:3px; font-size:1rem; font-weight:700;
  line-height:1.25; color:var(--ink); text-decoration:none; letter-spacing:-.015em; }
.fname:hover{ color:var(--brand); }
.fmeta{ font-size:.78rem; color:var(--ink-3); margin-top:1px; }
.flag-tag{ display:inline-block; margin-left:var(--s2); padding:2px 8px; background:var(--flag);
  color:#fff; border-radius:var(--r-full); font-size:.63rem; font-weight:800;
  letter-spacing:.07em; text-transform:uppercase; vertical-align:2px; }
.na{ color:var(--ink-3); font-size:.86em; }
.plist{ display:flex; flex-wrap:wrap; gap:4px; }
.ptag{ padding:2px 8px; border-radius:var(--r-full); background:var(--bg-2);
  font-size:.72rem; font-weight:600; color:var(--ink-2); white-space:nowrap; }

.empty-state{ display:none; padding:var(--s11) var(--s5); text-align:center; }
.empty-state.is-visible{ display:block; }
.empty-state p{ margin-inline:auto; }
.empty-state__ico{ width:56px; height:56px; margin:0 auto var(--s5); border-radius:16px;
  background:var(--brand-50); color:var(--brand); display:grid; place-items:center; }
.empty-state__ico svg{ width:26px; height:26px; }

/* --- Index list (used on subpages) ---------------------------------------- */
.index{ display:grid; gap:var(--s3); }
.index__row{ display:grid; grid-template-columns:1fr auto; gap:var(--s2) var(--s5);
  align-items:center; padding:var(--s4) var(--s5); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-1);
  text-decoration:none; color:inherit; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.index__row:hover{ color:inherit; transform:translateY(-2px); box-shadow:var(--sh-2); }
@media (min-width:760px){ .index__row{ grid-template-columns:16rem 1fr auto; } }
.index__name{ font-size:1rem; font-weight:700; color:var(--ink); letter-spacing:-.015em; }
.index__desc{ font-size:.86rem; color:var(--ink-3); grid-column:1/-1; }
@media (min-width:760px){ .index__desc{ grid-column:auto; } }
.index__n{ font-size:.84rem; font-weight:700; color:var(--brand); white-space:nowrap; }
