/* ═══════════════════════════════════════════════════════════════
   FLEEKART — landing
   Tokens → Base → Type → Ink illustration → Nav → Sections → Responsive
   Single family: Manrope (variable, self-hosted, latin subset).
   ═══════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Manrope';
  src:url(/assets/Manrope.woff2) format('woff2-variations');
  font-weight:200 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* Paper & ink — warm neutral base */
  --paper:    #FBFAF7;
  --paper-2:  #F3F0E9;
  --paper-3:  #EDE8DE;
  --card:     #FFFFFF;
  --ink:      #14181B;
  --ink-2:    #3A4247;
  --ink-3:    #6A737A;   /* 4.7:1 on --paper */
  --line:     rgba(20,24,27,.11);
  --line-2:   rgba(20,24,27,.055);

  /* Brand — taken from the Fleekart mark */
  --teal:      #0E8FA6;   /* Donor · links · interaction */
  --teal-deep: #07697C;   /* 4.9:1 on --paper */
  --teal-tint: #E4F2F5;
  --teal-line: rgba(14,143,166,.30);

  --green:     #2E9E4F;   /* Plinks, and only Plinks */
  --green-deep:#1D7A38;   /* 4.6:1 on --paper */
  --green-tint:#E8F4EA;

  --clay:      #B85C38;   /* Beneficiary */
  --clay-deep: #9A4728;
  --clay-tint: #F6EBE5;

  --sand:      #E9E0D1;   /* illustration wash */

  --sans:'Manrope',ui-sans-serif,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --gutter: clamp(20px,5vw,72px);
  --maxw: 1288px;
  --sec-y: clamp(84px,9vw,136px);
  --r: 14px;

  --ease:   cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --nav-h: 76px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-weight:450;
  font-size:clamp(15.5px,1.02vw,17px); line-height:1.62;
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--teal); color:#fff; }
:focus-visible{ outline:2.5px solid var(--teal); outline-offset:3px; border-radius:4px; }

/* paper grain — one cheap tiled SVG, no repaint cost */
body::before{
  content:''; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.sec{ position:relative; padding-block:var(--sec-y); }
.vh{ position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }
.skip{ position:fixed; top:-120px; left:16px; z-index:1000; background:var(--ink); color:#fff;
  padding:12px 18px; border-radius:8px; font-weight:650; font-size:13px; letter-spacing:.02em; transition:top .2s; }
.skip:focus{ top:16px; }

/* ── Type ───────────────────────────────────────────────────── */
h1,h2,h3,h4{ margin:0; font-weight:780; letter-spacing:-.033em; line-height:1.03; text-wrap:balance; }
p{ margin:0; }
.eyebrow{
  font-size:11.5px; font-weight:680; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-3); display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:''; width:22px; height:1px; background:currentColor; opacity:.55; flex:none; }
.eyebrow.plain::before{ display:none; }
.d1{ font-size:clamp(40px,4.65vw,68px); }
.d2{ font-size:clamp(34px,4.05vw,58px); letter-spacing:-.032em; }
.d3{ font-size:clamp(23px,2.05vw,30px); letter-spacing:-.024em; line-height:1.15; }
.lead{ font-size:clamp(17px,1.28vw,20px); line-height:1.55; color:var(--ink-2); font-weight:450; letter-spacing:-.008em; text-wrap:pretty; }
.body{ color:var(--ink-2); text-wrap:pretty; }
.muted{ color:var(--ink-3); }
.num{ font-variant-numeric:tabular-nums; }

/* ── Buttons & links ────────────────────────────────────────── */
.btn{
  --bg:var(--ink); --fg:#fff;
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:15px 24px; border-radius:11px; background:var(--bg); color:var(--fg);
  font-weight:640; font-size:15px; letter-spacing:-.008em; white-space:nowrap;
  transition:transform .34s var(--ease), box-shadow .34s var(--ease), background .2s;
  box-shadow:0 1px 2px rgba(20,24,27,.16), 0 6px 18px -8px rgba(20,24,27,.34);
  will-change:transform;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 2px 4px rgba(20,24,27,.18), 0 14px 30px -12px rgba(20,24,27,.42); }
.btn:active{ transform:translateY(0); transition-duration:.09s; }
.btn .ar{ transition:transform .34s var(--ease); }
.btn:hover .ar{ transform:translateX(4px); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); box-shadow:inset 0 0 0 1.4px var(--line); }
.btn--ghost:hover{ --bg:rgba(20,24,27,.035); box-shadow:inset 0 0 0 1.4px rgba(20,24,27,.24); }
.btn--teal{ --bg:var(--teal-deep); }
.btn--sm{ padding:10px 17px; font-size:13.5px; border-radius:9px; }
.btn[aria-disabled="true"]{
  --bg:transparent; --fg:var(--ink-3); cursor:default; box-shadow:inset 0 0 0 1.4px var(--line-2);
}
.btn[aria-disabled="true"]:hover{ transform:none; box-shadow:inset 0 0 0 1.4px var(--line-2); }

.tlink{ position:relative; display:inline-flex; align-items:center; gap:7px; font-weight:600; color:var(--teal-deep); }
.tlink::after{ content:''; position:absolute; left:0; right:0; bottom:-3px; height:1.4px; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease); }
.tlink:hover::after{ transform:scaleX(1); transform-origin:left; }
.tlink .ar{ transition:transform .35s var(--ease); }
.tlink:hover .ar{ transform:translateX(3px); }

/* ── Ink illustration system ────────────────────────────────── */
.ink{ --sw:2.1; }
.ink [data-ink]{ fill:none; stroke:var(--ink); stroke-width:var(--sw); stroke-linecap:round; stroke-linejoin:round; }
.ink [data-ink="thin"]{ stroke-width:calc(var(--sw) * .62); }
.ink [data-ink="hair"]{ stroke-width:calc(var(--sw) * .46); opacity:.5; }
.ink .wash{ stroke:none; }
.hand-drawn{ filter:url(#fkInk); }
@media (prefers-reduced-motion:reduce){ .hand-drawn{ filter:none; } }

/* ── Chapter rule ───────────────────────────────────────────── */
.hr{ height:1px; background:var(--line); border:0; margin:0; }
.sec-head{ display:grid; gap:20px; max-width:720px; }
.sec-head.wide{ max-width:900px; }

/* ── Navigation ─────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:120; height:var(--nav-h);
  display:flex; align-items:center;
  transition:height .38s var(--ease), background .38s var(--ease), box-shadow .38s var(--ease);
  background:transparent;
}
.nav__in{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; gap:clamp(18px,2.4vw,38px); }
.nav__logo{ flex:none; display:block; }
.nav__logo img{ height:44px; width:auto; transition:height .38s var(--ease); }
.nav__links{ display:flex; align-items:center; gap:clamp(14px,1.75vw,27px); margin-left:auto; }
.nav__links a{
  position:relative; font-size:12.4px; font-weight:620; letter-spacing:.075em; text-transform:uppercase;
  color:var(--ink-2); padding:6px 0; transition:color .22s;
}
.nav__links a::after{
  content:''; position:absolute; left:0; right:0; bottom:1px; height:1.5px; background:var(--teal);
  transform:scaleX(0); transform-origin:right; transition:transform .38s var(--ease);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after,.nav__links a[aria-current="true"]::after{ transform:scaleX(1); transform-origin:left; }
.nav__cta{ margin-left:clamp(8px,1.4vw,20px); }
.nav.is-stuck{ height:60px; background:rgba(251,250,247,.78); backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px); box-shadow:0 1px 0 var(--line-2), 0 8px 26px -22px rgba(20,24,27,.6); }
.nav.is-stuck .nav__logo img{ height:36px; }
.burger{ display:none; }

/* mobile menu */
.mnav{
  position:fixed; inset:0; z-index:119; background:var(--paper);
  padding:calc(var(--nav-h) + 22px) var(--gutter) 40px;
  display:flex; flex-direction:column; gap:6px;
  clip-path:inset(0 0 100% 0); transition:clip-path .55s var(--ease);
  overscroll-behavior:contain;
}
.mnav.is-open{ clip-path:inset(0 0 0 0); }
.mnav a{ font-size:clamp(27px,7.4vw,38px); font-weight:740; letter-spacing:-.032em; padding:11px 0;
  border-bottom:1px solid var(--line-2); display:flex; justify-content:space-between; align-items:baseline; }
.mnav a span{ font-size:11px; font-weight:600; letter-spacing:.14em; color:var(--ink-3); }
.mnav .btn{ margin-top:26px; justify-content:center; }

/* ═══ HERO ═══════════════════════════════════════════════════ */
.hero{ position:relative; padding-top:calc(var(--nav-h) + clamp(18px,4vw,52px)); padding-bottom:clamp(40px,5vw,72px);
  min-height:100svh; display:grid; align-content:center; }
.hero .wrap{ max-width:1560px; }
.hero__grid{ display:grid; grid-template-columns:minmax(0,640px) minmax(0,1fr); gap:clamp(24px,3.4vw,58px); align-items:center; }
.hero__copy{ display:grid; gap:clamp(18px,1.9vw,25px); max-width:640px; }
.hero h1{ letter-spacing:-.038em; }
.hero h1 .ln{ display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em; }
.hero h1 .ln > span{ display:block; }
.hero h1 em{ font-style:normal; color:var(--teal-deep); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.hero__note{ display:flex; align-items:center; gap:10px; font-size:13.2px; color:var(--ink-3); font-weight:500; }
.hero__note b{ color:var(--ink-2); font-weight:650; }
.dot{ width:5px; height:5px; border-radius:50%; background:var(--green); flex:none; }

.stage{ position:relative; }
.stage svg{ width:100%; height:auto; }
.tag{ font-size:10.5px; font-weight:680; letter-spacing:.13em; text-transform:uppercase; }

/* ═══ MARQUEE / VALUE STRIP ══════════════════════════════════ */
.strip{ border-block:1px solid var(--line); background:var(--paper-2); overflow:hidden; }
.strip__in{ display:flex; gap:0; width:max-content; will-change:transform; }
.strip__set{ display:flex; align-items:center; gap:clamp(26px,3.4vw,52px); padding:15px clamp(13px,1.7vw,26px); }
.strip i{ font-style:normal; font-size:12.4px; font-weight:620; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-2); white-space:nowrap; }
.strip s{ text-decoration:none; color:var(--teal); font-size:9px; }

/* ═══ ABOUT ══════════════════════════════════════════════════ */
.about__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.03fr); gap:clamp(28px,5vw,80px); align-items:center; }
.about h2{ max-width:15ch; }
.about__body{ display:grid; gap:22px; max-width:520px; }
.about__pts{ display:grid; gap:14px; margin-top:4px; }
.about__pt{ display:flex; gap:13px; align-items:flex-start; font-size:15.4px; color:var(--ink-2); }
.about__pt b{ color:var(--ink); font-weight:660; }
.about__pt svg{ flex:none; margin-top:2px; }

/* ═══ HOW IT WORKS ═══════════════════════════════════════════ */
.how{ background:var(--paper-2); border-block:1px solid var(--line); }
.how__head{ display:flex; flex-wrap:wrap; gap:24px 40px; align-items:flex-end; justify-content:space-between; margin-bottom:clamp(34px,4vw,58px); }
.how__legend{ display:flex; gap:22px; flex-wrap:wrap; }
.how__legend span{ display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:670; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-2); }
.how__legend i{ width:9px; height:9px; border-radius:50%; display:block; }

/* ── DONOR ↔ BENEFICIARY LADDER ─────────────────────────────── */
.ladder{ --spine:104px; }
.ladder__head,.rung,.ladder__foot{
  display:grid; grid-template-columns:1fr var(--spine) 1fr; align-items:center;
}
.ladder__head{ margin-bottom:clamp(10px,1.4vw,18px); }
/* headers and outcomes line up with the row text, not the spine */
.ladder{ --inset:calc(30px + clamp(14px,1.5vw,20px) + clamp(14px,1.8vw,26px)); }
.ladder__role--donor{ text-align:right; --deep:var(--teal-deep); padding-right:var(--inset); }
.ladder__role--ben{ --deep:var(--clay-deep); padding-left:var(--inset); }
.flow__label{ font-size:11.5px; font-weight:720; letter-spacing:.16em; text-transform:uppercase; color:var(--deep); }

.ladder__rows{ position:relative; list-style:none; margin:0; padding:0; display:grid; gap:0; }
.ladder__rows::before,.ladder__rows::after{
  content:''; position:absolute; left:50%; top:0; bottom:0; width:1px; margin-left:-.5px;
}
.ladder__rows::before{ background:var(--line); }
.ladder__rows::after{
  background:var(--ink); opacity:.22; height:100%; bottom:auto;
  transform:scaleY(var(--spine-scale,0)); transform-origin:top;
}
.no-js .ladder__rows::after,.reduced .ladder__rows::after{ transform:scaleY(1); }

.rung{ position:relative; padding-block:clamp(18px,2.1vw,27px); }
.rung + .rung::before{
  content:''; position:absolute; left:4%; right:4%; top:0; height:1px; background:var(--line-2);
}
.rung__side{ display:flex; align-items:flex-start; gap:clamp(14px,1.5vw,20px); }
.rung__side--donor{ flex-direction:row-reverse; text-align:right;
  --deep:var(--teal-deep); padding-right:clamp(14px,1.8vw,26px); }
.rung__side--ben{ --deep:var(--clay-deep); padding-left:clamp(14px,1.8vw,26px); }
.rung__ico{ flex:none; color:var(--deep); opacity:.72; margin-top:1px;
  transition:opacity .3s var(--ease), transform .3s var(--ease); }
.rung__ico svg{ width:30px; height:30px; display:block; }
.rung__txt h3{ font-size:16px; font-weight:670; letter-spacing:-.018em; margin-bottom:4px; }
.rung__txt p{ font-size:14px; color:var(--ink-3); line-height:1.5; text-wrap:pretty; max-width:38ch; }
.rung__side--donor .rung__txt p{ margin-left:auto; }
.rung__tag{ display:none; }

.rung__node{
  justify-self:center; font-size:12px; font-weight:730; color:var(--ink-3);
  font-variant-numeric:tabular-nums; letter-spacing:.06em;
  background:var(--paper-2); padding:7px 9px; line-height:1;
  transition:color .3s var(--ease);
}
.rung:hover .rung__node,.rung:focus-within .rung__node,.rung.is-lit .rung__node{ color:var(--ink); }
.rung.is-lit .rung__ico{ opacity:1; }
.rung:hover .rung__ico,.rung:focus-within .rung__ico{ opacity:1; transform:translateY(-2px); }


.ladder__foot{ margin-top:clamp(16px,1.8vw,24px); }
.ladder__out{ font-size:14px; color:var(--ink-3); max-width:38ch; }
.ladder__out--donor{ text-align:right; justify-self:end; padding-right:var(--inset); }
.ladder__out--ben{ justify-self:start; padding-left:var(--inset); }
.ladder__out b{ font-weight:670; color:var(--ink); }
.ladder__out--donor b{ color:var(--green-deep); }
.ladder__out--ben b{ color:var(--clay-deep); }

/* ═══ PLINKS ═════════════════════════════════════════════════ */
.plinks__grid{ display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:clamp(30px,5vw,76px); align-items:center; }
.plinks__body{ display:grid; gap:22px; max-width:520px; }
.plinks h2 em{ font-style:normal; color:var(--green-deep); }
.equation{ display:grid; gap:0; }
.eq{
  display:flex; align-items:center; gap:16px; padding:17px 20px; border:1px solid var(--line); border-radius:12px;
  background:var(--card);
}
.eq__i{ width:42px; height:42px; border-radius:11px; display:grid; place-items:center; flex:none;
  background:var(--paper-2); border:1px solid var(--line-2); }
.eq__i svg{ width:26px; height:26px; }
.eq__t{ font-size:14.6px; font-weight:640; letter-spacing:-.012em; }
.eq__d{ font-size:13.2px; color:var(--ink-3); }
.eq[data-hl="1"]{ border-color:rgba(46,158,79,.3); background:var(--green-tint); }
.eq[data-hl="1"] .eq__i{ background:#fff; border-color:rgba(46,158,79,.22); }
.eq__arrow{ height:22px; display:grid; place-items:center; }
.eq__arrow svg{ opacity:.42; }
.buy{
  margin-top:6px; border:1px dashed var(--line); border-radius:12px; padding:18px 20px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:space-between; background:transparent;
}
.buy__t{ font-size:15px; font-weight:640; }
.buy__d{ font-size:13.2px; color:var(--ink-3); }
.soon{ font-size:10.5px; font-weight:720; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  border:1px solid var(--line); border-radius:99px; padding:6px 12px; }

/* ═══ CATEGORIES ═════════════════════════════════════════════ */
.cats{ background:var(--ink); color:#fff; }
.cats .eyebrow{ color:rgba(255,255,255,.56); }
.cats .lead{ color:rgba(255,255,255,.72); }
.cats__grid{ display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:clamp(26px,4vw,64px); align-items:center; margin-top:clamp(32px,4vw,54px); }
.cats__list{ display:grid; gap:2px; }
.cat{
  position:relative; display:flex; align-items:center; gap:16px; width:100%; text-align:left;
  padding:17px 18px 17px 0; border-bottom:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.5); transition:color .3s var(--ease), padding-left .4s var(--ease);
}
.cat:first-child{ border-top:1px solid rgba(255,255,255,.12); }
.cat__n{ font-size:10.5px; font-weight:700; letter-spacing:.14em; width:22px; flex:none; }
.cat__t{ font-size:clamp(20px,1.75vw,26px); font-weight:700; letter-spacing:-.028em; }
.cat__d{ margin-left:auto; font-size:13px; opacity:0; transform:translateX(-6px); transition:.4s var(--ease); text-align:right; max-width:190px; line-height:1.4; }
.cat::before{ content:''; position:absolute; left:0; bottom:-1px; height:1.5px; width:0; background:var(--teal); transition:width .55s var(--ease); }
.cat:hover,.cat:focus-visible{ color:#fff; }
.cat.is-on{ color:#fff; padding-left:16px; }
.cat.is-on::before{ width:100%; }
.cat.is-on .cat__d{ opacity:.62; transform:none; }
.cats__stage{ position:relative; border-radius:18px; background:var(--paper); overflow:hidden; aspect-ratio:16/11; }
.cats__stage .catart{ position:absolute; inset:0; opacity:0; }
.cats__stage .catart.is-on{ opacity:1; }
.cats__cap{ position:absolute; left:22px; bottom:20px; right:22px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.cats__cap b{ font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); }
.cats__dots{ display:none; }

/* ═══ IMPACT ═════════════════════════════════════════════════ */
.impact__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); gap:clamp(30px,5vw,72px); align-items:center; }
.lifeline{ position:relative; }
.lifeline__row{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(8px,1.2vw,18px); align-items:start; }
.life{ text-align:left; }
.life__box{ position:relative; border:1px solid var(--line); border-radius:13px; background:var(--card); aspect-ratio:1/.92;
  display:grid; place-items:center; overflow:hidden; }
.life__box svg{ width:64%; height:auto; }
.life__t{ margin-top:12px; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.life__d{ font-size:13px; color:var(--ink-3); line-height:1.45; margin-top:4px; }
.life__link{ position:absolute; top:38%; right:-9%; width:18%; height:1.5px; background:var(--line); }
.life__link i{ position:absolute; inset:0; background:var(--teal); transform:scaleX(0); transform-origin:left; }
.statement{
  margin-top:clamp(34px,4vw,52px); padding:clamp(26px,3vw,40px); border-radius:16px;
  background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
}
.statement p{ font-size:clamp(21px,2.15vw,31px); font-weight:740; letter-spacing:-.028em; line-height:1.12; max-width:19ch; }
.statement span{ font-size:14px; color:rgba(255,255,255,.6); max-width:34ch; line-height:1.5; }

/* ═══ DOWNLOAD ═══════════════════════════════════════════════ */
.dl{ background:var(--paper-2); border-top:1px solid var(--line); }
.dl__grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px,5vw,72px); align-items:center; }
.dl h2{ max-width:13ch; }
.dl h2 em{ font-style:normal; color:var(--teal-deep); }
.dl__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.dl__stores{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.store{
  display:flex; align-items:center; gap:10px; padding:11px 16px; border-radius:11px;
  border:1px solid var(--line); color:var(--ink-3); background:transparent; cursor:default;
}
.store svg{ width:19px; height:19px; flex:none; }
.store b{ display:block; font-size:13px; font-weight:640; color:var(--ink-2); letter-spacing:-.01em; }
.store i{ display:block; font-style:normal; font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }

/* ═══ FOOTER ═════════════════════════════════════════════════ */
.foot{ border-top:1px solid var(--line); padding-block:clamp(40px,4.5vw,60px) 30px; }
.foot__top{ display:flex; gap:34px 60px; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; }
.foot__brand{ display:grid; gap:14px; max-width:270px; }
.foot__brand img{ height:40px; width:auto; }
.foot__brand p{ font-size:13.6px; color:var(--ink-3); line-height:1.5; }
.foot__links{ display:flex; gap:clamp(24px,3.6vw,56px); flex-wrap:wrap; }
.foot__col{ display:grid; gap:10px; align-content:start; }
.foot__col b{ font-size:10.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3); margin-bottom:2px; }
.foot__col a{ font-size:14px; color:var(--ink-2); transition:color .2s; width:fit-content; }
.foot__col a:hover{ color:var(--teal-deep); }
.foot__bot{ margin-top:clamp(32px,4vw,52px); padding-top:20px; border-top:1px solid var(--line-2);
  display:flex; gap:14px 28px; flex-wrap:wrap; justify-content:space-between; align-items:center;
  font-size:12.6px; color:var(--ink-3); }
.foot__bot span{ display:flex; align-items:center; gap:8px; }

/* ── Scroll reveal primitive ────────────────────────────────── */
.rv{ opacity:0; transform:translateY(18px);
  transition:opacity .74s var(--ease), transform .74s var(--ease); will-change:opacity, transform; }
.rv.is-in{ opacity:1; transform:none; will-change:auto; }
.no-js .rv, .reduced .rv{ opacity:1!important; transform:none!important; }

/* ═══ RESPONSIVE ═════════════════════════════════════════════ */
@media (max-width:1080px){
  .nav__links{ display:none; }
  .burger{
    display:block; position:relative; margin-left:auto; width:44px; height:44px; border-radius:10px;
    border:1px solid var(--line); background:rgba(255,255,255,.5);
  }
  .burger span{
    position:absolute; left:50%; top:50%; width:18px; height:1.7px; margin:-.85px 0 0 -9px;
    background:var(--ink); border-radius:2px; transition:transform .4s var(--ease);
  }
  .burger span:first-child{ transform:translateY(-3.2px); }
  .burger span:last-child{ transform:translateY(3.2px); }
  .burger[aria-expanded="true"] span:first-child{ transform:rotate(45deg); }
  .burger[aria-expanded="true"] span:last-child{ transform:rotate(-45deg); }
  .nav__cta{ display:none; }
  .hero__grid{ grid-template-columns:1fr; gap:34px; }
  .hero__copy{ max-width:660px; }
  .about__grid,.plinks__grid,.impact__grid,.dl__grid,.cats__grid{ grid-template-columns:1fr; }
  .about__grid .stage,.plinks__grid .stage{ order:-1; }
  .cats__grid{ gap:26px; }
  .cats__stage{ order:-1; }
}
@media (max-width:820px){
  :root{ --nav-h:66px; }
  .ladder__head{ display:none; }   /* each half carries its own role tag here */
  .ladder__foot{ grid-template-columns:1fr; gap:10px; }
  .ladder__role--donor{ text-align:left; padding-right:0; }
  .ladder__role--ben{ padding-left:0; }
  .ladder__out--donor,.ladder__out--ben{ text-align:left; justify-self:start; padding:0; max-width:none; }
  .ladder__rows::before,.ladder__rows::after{ display:none; }
  .rung{ grid-template-columns:1fr; gap:13px; padding-block:22px; }
  .rung__node{ justify-self:start; order:-1; background:none; padding:0; }
  .rung__side--donor{ flex-direction:row; text-align:right; padding:0 0 0 14px; border-left:2px solid var(--teal); }
  .rung__side--ben{ padding:0 0 0 14px; border-left:2px solid var(--clay); }
  .rung__side--donor,.rung__side--ben{ text-align:left; }
  .rung__side--donor .rung__txt p{ margin-left:0; }
  .rung__txt p{ max-width:none; }
  .rung__tag{ display:block; font-size:10px; font-weight:720; letter-spacing:.14em;
    text-transform:uppercase; color:var(--deep); margin-bottom:3px; }
  .rung__ico svg{ width:26px; height:26px; }
  .lifeline__row{ grid-template-columns:1fr 1fr; gap:20px 16px; }
  .life__link{ display:none; }
  .statement{ flex-direction:column; align-items:flex-start; gap:14px; }
  .cat__d{ display:none; }
  .cats__list{ display:flex; overflow-x:auto; gap:8px; scroll-snap-type:x mandatory;
    -ms-overflow-style:none; scrollbar-width:none; padding-bottom:4px; }
  .cats__list::-webkit-scrollbar{ display:none; }
  .cat{ flex:none; border:1px solid rgba(255,255,255,.16); border-radius:99px; padding:11px 18px; scroll-snap-align:start; }
  .cat:first-child{ border-top:1px solid rgba(255,255,255,.16); }
  .cat::before{ display:none; }
  .cat.is-on{ padding-left:18px; background:#fff; color:var(--ink); border-color:#fff; }
  .cat__n{ display:none; }
  .cat__t{ font-size:15px; letter-spacing:-.01em; }
  .cats__stage{ aspect-ratio:4/3.3; }
  .foot__top{ flex-direction:column; }
}
@media (max-width:560px){
  .hero__cta .btn{ flex:1 1 auto; justify-content:center; }
  .eq{ padding:14px 15px; gap:13px; }
  .cats__stage{ border-radius:14px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important; }
  .rv{ opacity:1!important; transform:none!important; }
}

.hero .tag{ font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }

/* ── plinks art ────────────────────────────────────────────── */
.plinks__art{ display:grid; gap:8px; justify-items:end; }
.plinks__vid{ width:clamp(160px,19vw,208px); height:auto; margin-right:clamp(0px,2vw,26px); }
.equation{ width:100%; }

/* ── category gallery ──────────────────────────────────────── */
.cats__stage .catart{ position:absolute; inset:0; margin:0; opacity:0; }
.cats__stage .catart.is-on{ opacity:1; }
.catart img{ width:100%; height:100%; object-fit:cover; }
.catart figcaption{
  position:absolute; left:15px; bottom:14px; display:flex; align-items:center; gap:9px;
  padding:7px 15px 7px 9px; border-radius:99px; background:rgba(251,250,247,.94);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.catart figcaption b{ font-size:11.5px; font-weight:720; letter-spacing:.13em; text-transform:uppercase; color:var(--ink); }
.catart__ico{ display:block; width:21px; height:21px; color:var(--teal-deep); }
.catart__ico svg{ width:21px; height:21px; }

/* ── impact ────────────────────────────────────────────────── */
.impact__film{ border:1px solid var(--line); border-radius:18px; background:#fff; overflow:hidden;
  max-width:440px; margin-inline:auto; }
.impact__vid{ width:100%; height:auto; mix-blend-mode:multiply; }
.life__box{ aspect-ratio:1/.6; }
.life__box svg{ width:62px; height:62px; }
.lifeline__row{ --gap:clamp(10px,1.4vw,20px); gap:var(--gap); }
.life__box{ overflow:visible; }
.life__link{ position:absolute; top:46%; left:100%; right:auto; width:var(--gap); height:1.5px; background:var(--line); }
.lifeline{ margin-top:clamp(38px,4.4vw,64px); }

/* ── download art ──────────────────────────────────────────── */
.dl__art{ display:grid; place-items:center; }
.dl__vid{ width:min(100%,360px); height:auto; }

@media (max-width:820px){
  .plinks__art{ justify-items:center; }
  .plinks__vid{ margin-right:0; }
  .dl__art{ order:-1; }
  .dl__vid{ width:min(76%,280px); }
}

/* rail ends exactly on the last step's icon */
.flow__rail{ --gap:clamp(10px,1.4vw,20px); }
.flow__line{ left:34px; right:calc((100% - 3 * var(--gap)) / 4 - 34px); }

/* category list breathes */
.cats__grid{ grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); }
.cat{ padding-block:26px; }
.cat__d{ max-width:215px; }

@media (max-width:1080px){
  .cats__grid{ grid-template-columns:1fr; }
  .cats__stage{ order:0; }
}
@media (max-width:820px){
  .flow__line{ left:33px; right:auto; top:34px; bottom:auto; height:calc(100% - 100px); }
  .cat{ width:auto; padding-block:11px; }
}

/* ── photographic scenes ───────────────────────────────────── */
.shot{ position:relative; margin:0; }
.shot__frame{
  position:relative; width:100%; border-radius:20px; overflow:hidden; background:var(--paper-2);
  box-shadow:0 1px 2px rgba(20,24,27,.07), 0 34px 64px -44px rgba(20,24,27,.55);
}
.shot__img{ width:100%; height:auto; }
.pill{
  position:absolute; z-index:2; display:inline-flex; align-items:center; gap:7px;
  padding:7px 14px 7px 9px; border-radius:99px; background:rgba(251,250,247,.94);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-size:10.5px; font-weight:730; letter-spacing:.13em; text-transform:uppercase;
  box-shadow:0 2px 12px rgba(20,24,27,.16);
}
.pill i{ width:7px; height:7px; border-radius:50%; display:block; flex:none; }
.pill--donor{ left:14px; bottom:14px; color:var(--teal-deep); }
.pill--ben{ right:14px; top:14px; color:var(--clay-deep); }
.shot__accent{
  position:absolute; z-index:3; left:clamp(-46px,-3vw,-24px); bottom:clamp(-34px,-2.4vw,-18px);
  width:clamp(104px,12.5vw,164px); height:auto; pointer-events:none;
  filter:drop-shadow(0 12px 22px rgba(20,24,27,.16));
}
.shot__accent--right{ left:auto; right:clamp(-42px,-2.6vw,-20px); bottom:clamp(-30px,-2vw,-16px); }
.hero .stage{ padding-block:clamp(14px,2vw,30px); }
/* the hero film takes the height the full-screen section gives it */
@media (min-width:821px){
  .hero .shot--reel .shot__frame{ aspect-ratio:auto; height:clamp(380px,62svh,720px); }
}
.about .stage{ padding:clamp(10px,1.6vw,22px) clamp(6px,1.4vw,26px); }

@media (max-width:820px){
  .shot__accent{ width:clamp(84px,22vw,112px); left:-14px; bottom:-18px; }
  .shot__accent--right{ left:auto; right:-12px; }
  .pill{ font-size:9.5px; padding:6px 11px 6px 7px; }
}


/* how-it-works header aside */
.how__aside{ display:flex; align-items:center; gap:clamp(14px,2vw,26px); }
.how__vid{ width:clamp(96px,9vw,124px); height:auto; flex:none; }
@media (max-width:820px){
  .how__aside{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:12px 18px; width:100%; }
  .how__vid{ width:74px; order:-1; }
  .how__legend{ flex:1 1 200px; min-width:0; gap:14px; }
}

.how__head .sec-head{ flex:1 1 440px; min-width:0; }
.how__aside{ flex:0 0 auto; }

/* ── hero: film on a soft stage ────────────────────────────── */
.shot--film .shot__frame{
  aspect-ratio:5/4; display:grid; place-items:center; border-radius:26px;
  background:radial-gradient(120% 96% at 50% 44%, #EEF6F7 0%, var(--paper-2) 58%, var(--paper-3) 100%);
  box-shadow:0 1px 2px rgba(20,24,27,.05), 0 34px 70px -50px rgba(20,24,27,.45);
}
.shot--film .shot__frame{ position:relative; }
.shot__film{ position:absolute; left:50%; top:51%; transform:translate(-50%,-50%);
  width:auto; height:auto; max-height:92%; max-width:78%;
  filter:drop-shadow(0 20px 34px rgba(20,24,27,.18)); }
@media (max-width:820px){
  .shot--film .shot__frame{ aspect-ratio:4/3.6; border-radius:20px; }
  .shot__film{ max-height:88%; max-width:74%; }
}

/* ── film frames ───────────────────────────────────────────── */
.shot--reel .shot__frame{ aspect-ratio:16/10; border-radius:24px; background:var(--paper-3); }
.shot--about .shot__frame{ aspect-ratio:3/2; border-radius:22px; background:var(--paper-3); }
.shot--impact{ width:100%; max-width:560px; margin-inline:auto; }
.shot--impact .shot__frame{ aspect-ratio:16/9; border-radius:20px; background:var(--paper-3); }
.shot__reel{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
.shot--reel .shot__frame,.shot--about .shot__frame,.shot--impact .shot__frame{ position:relative; }
@media (max-width:820px){
  .shot--reel .shot__frame{ aspect-ratio:16/10; border-radius:18px; }
  .shot--about .shot__frame{ aspect-ratio:3/2; border-radius:18px; }
}

/* ── film band ─────────────────────────────────────────────────
   Opens from an inset window to full bleed as it is scrolled into,
   then holds edge to edge: no gutter, no radius, no ground of its
   own showing through. The video is never resized — only the
   window onto it is — so the footage cannot letterbox or stretch
   at any point in the move. */
.filmband{
  position:relative; width:100%; margin:0; padding:0;
  aspect-ratio:16/9;                    /* the band tracks the footage */
  max-height:82vh;                      /* never taller than the screen */
  min-height:clamp(300px,42vh,400px);   /* still a band on narrow screens */
  background:var(--paper); line-height:0;
  --cx:9%; --cy:7%; --cr:26px;          /* the closed window; script opens it */
}
.filmband__clip{
  position:absolute; inset:0; overflow:hidden;
  clip-path:inset(var(--cy) var(--cx) round var(--cr));
}
.filmband__vid{
  position:absolute; inset:0; width:100%; height:100%; max-width:none;
  object-fit:cover; object-position:50% 46%;
  will-change:transform;
}
/* just enough ground for the caption to read on */
.filmband__veil{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(13,16,18,.62) 0%, rgba(13,16,18,.16) 26%, rgba(13,16,18,0) 46%);
}
.filmband__cap{
  position:absolute; z-index:2; left:0; bottom:0;
  margin:0; max-width:26ch; color:#fff; line-height:1.32; text-wrap:balance;
  padding:0 var(--gutter) clamp(20px,3vw,34px);
  font-size:clamp(15px,1.5vw,21px); font-weight:640; letter-spacing:-.018em;
  text-shadow:0 1px 18px rgba(10,13,15,.45);
  opacity:0; transform:translateY(14px);
  transition:opacity .7s var(--ease) .08s, transform .7s var(--ease) .08s;
}
.filmband.is-read .filmband__cap{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .filmband{ --cx:0%; --cy:0%; --cr:0px; }
  .filmband__cap{ transition:none; }
}

/* ═══ THE HANDOVER — do it yourself ═══════════════════════════ */
.deal{
  border:1px solid var(--line); border-radius:22px; background:var(--card);
  padding:clamp(22px,3vw,40px) clamp(16px,2.6vw,38px) clamp(18px,2.2vw,28px);
  margin-bottom:clamp(30px,3.6vw,52px);
}
.deal__stage{
  position:relative; display:grid; grid-template-columns:1fr minmax(210px,34%) 1fr;
  gap:clamp(6px,1vw,16px); align-items:start;
}
.deal__side{ display:grid; justify-items:center; gap:14px; }
.deal__who{ display:grid; justify-items:center; gap:3px; }
.deal__ava{
  width:clamp(58px,5.6vw,74px); height:clamp(58px,5.6vw,74px); border-radius:50%;
  object-fit:cover; border:2.5px solid var(--accent); margin-bottom:6px;
}
.deal__side--donor{ --accent:var(--teal); --deep:var(--teal-deep); --tint:var(--teal-tint); }
.deal__side--ben{ --accent:var(--clay); --deep:var(--clay-deep); --tint:var(--clay-tint); }
.deal__role{ font-size:11.5px; font-weight:730; letter-spacing:.14em; text-transform:uppercase; color:var(--deep); }
.deal__note{ font-size:13px; color:var(--ink-3); }

.deal__slot{
  position:relative; width:100%; max-width:210px; aspect-ratio:1/.74; border-radius:16px;
  display:grid; place-items:center; transition:border-color .3s, background .3s, transform .3s var(--ease);
}
.deal__slot--from{ border:1.5px solid var(--line-2); background:var(--paper); }
.deal__slot--from span{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); opacity:0; transition:opacity .4s .5s; }
.deal.is-done .deal__slot--from span{ opacity:.55; }
.deal__slot--to{ border:1.5px dashed var(--line); background:transparent; }
.deal__slot--to span{ font-size:12px; font-weight:640; color:var(--ink-3); }
.deal.is-armed .deal__slot--to{ border-color:var(--clay); background:var(--clay-tint); transform:scale(1.03); }
.deal.is-done .deal__slot--to{ border-style:solid; border-color:transparent; background:var(--clay-tint); }
.deal.is-done .deal__slot--to span{ opacity:0; }

.deal__mid{ position:relative; display:grid; justify-items:center; align-content:start; gap:8px;
  padding-top:var(--hub-top,74px); }
.deal__lane{ position:relative; width:100%; display:grid; justify-items:center; gap:5px; }
.deal__lane i{ display:block; width:100%; height:2px; border-radius:2px; background:var(--line); position:relative; }
.deal__lane i::before{
  content:''; position:absolute; top:-4px; width:0; height:0;
  border-block:5px solid transparent; transition:border-color .5s;
}
.deal__lane--item i::before{ right:-2px; border-left:8px solid var(--line); }
.deal__lane--plink i::before{ left:-2px; border-right:8px solid var(--line); }
.deal.is-done .deal__lane--item i::before{ border-left-color:var(--teal); }
.deal.is-done .deal__lane--plink i::before{ border-right-color:var(--green); }
.deal__lane i::after{ content:''; position:absolute; inset:0; transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease); }
.deal__lane--item i::after{ background:var(--teal); }
.deal__lane--plink i::after{ background:var(--green); transform-origin:right; }
.deal.is-done .deal__lane i::after{ transform:scaleX(1); }
.deal__lane b{ font-size:10.5px; font-weight:720; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); }
.deal__lane--plink{ order:3; }
.deal__lane--plink b{ color:var(--green-deep); }
.deal__hub{
  width:clamp(58px,5.4vw,70px); height:clamp(58px,5.4vw,70px); border-radius:50%;
  border:2.4px solid var(--ink); background:var(--card); display:grid; place-items:center;
  color:var(--ink); position:relative; margin-top:4px;
}
.deal__hub > svg{ width:56%; height:56%; transition:opacity .3s; }
.deal__tick{ position:absolute; inset:0; margin:auto; width:44%!important; height:44%!important;
  color:var(--green-deep); opacity:0; transform:scale(.5); }
.deal.is-done .deal__hub > svg:first-child{ opacity:.18; }
.deal.is-done .deal__tick{ opacity:1; transform:scale(1); transition:opacity .3s .25s, transform .4s .25s var(--ease); }
.deal__hubLab{ font-size:11px; font-weight:720; letter-spacing:.13em; text-transform:uppercase; color:var(--ink); }

.wallet{ display:inline-flex; align-items:center; gap:8px; padding:7px 13px 7px 8px; border-radius:99px;
  border:1px solid var(--line-2); background:var(--paper); opacity:.45;
  transition:opacity .4s, border-color .4s, background .4s; }
.wallet__coin{ width:19px; height:19px; color:var(--ink-3); transition:color .4s; }
.wallet__coin svg{ width:19px; height:19px; }
.wallet__t{ font-size:11.5px; font-weight:670; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); transition:color .4s; }
.deal.is-done .wallet{ opacity:1; border-color:rgba(46,158,79,.3); background:var(--green-tint); }
.deal.is-done .wallet__coin,.deal.is-done .wallet__t{ color:var(--green-deep); }

.thing{
  position:absolute; z-index:5; top:0; left:0; width:clamp(112px,11vw,148px);
  display:grid; justify-items:center; gap:7px; padding:16px 12px 13px; border-radius:16px;
  background:var(--card); border:1px solid var(--line);
  box-shadow:0 2px 4px rgba(20,24,27,.06), 0 16px 32px -20px rgba(20,24,27,.5);
  cursor:grab; touch-action:none; will-change:transform;
  transition:box-shadow .3s var(--ease), border-color .3s;
}
.thing:hover{ box-shadow:0 3px 6px rgba(20,24,27,.09), 0 22px 40px -22px rgba(20,24,27,.55); }
.thing.is-held{ cursor:grabbing; box-shadow:0 6px 12px rgba(20,24,27,.12), 0 30px 54px -26px rgba(20,24,27,.6); }
.thing__ico{ width:46px; height:46px; color:var(--teal-deep); transition:color .4s; }
.thing__ico svg{ width:46px; height:46px; }
.thing__name{ font-size:12.4px; font-weight:640; letter-spacing:-.01em; text-align:center; line-height:1.25; }
.thing__grab{ width:26px; height:3px; border-radius:2px; background:var(--line); transition:opacity .3s; }
.deal.is-done .thing{ cursor:default; }
.deal.is-done .thing__ico{ color:var(--clay-deep); }
.deal.is-done .thing__grab{ opacity:0; }
.thing::after{
  content:''; position:absolute; inset:-7px; border-radius:22px; border:2px solid var(--teal);
  opacity:0; transform:scale(.96); pointer-events:none;
}
.deal.is-idle .thing::after{ animation:thingHint 2.6s var(--ease) 1.2s 3; }
@keyframes thingHint{ 0%,100%{opacity:0;transform:scale(.96)} 22%{opacity:.5;transform:scale(1)} 55%{opacity:0;transform:scale(1.04)} }

.coin{
  position:absolute; z-index:6; top:0; left:0; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; background:var(--green-tint); border:1px solid rgba(46,158,79,.35);
  color:var(--green-deep); opacity:0; pointer-events:none;
  box-shadow:0 8px 18px -10px rgba(20,24,27,.45);
}
.coin svg{ width:24px; height:24px; }

.deal__hint{ text-align:center; font-size:14.4px; color:var(--ink-3); margin-top:clamp(18px,2vw,28px); text-wrap:balance; }
.deal__hint b{ color:var(--ink); font-weight:680; }
.deal__ctrl{ display:flex; align-items:center; justify-content:center; gap:clamp(12px,1.6vw,22px);
  flex-wrap:wrap; margin-top:14px; }
.deal__again{
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:99px;
  background:var(--ink); color:#fff; font-size:13px; font-weight:640;
  transition:transform .3s var(--ease), opacity .3s; box-shadow:0 1px 2px rgba(20,24,27,.18);
}
.deal__again:hover{ transform:translateY(-1.5px); }
.deal__again[disabled]{ opacity:.32; pointer-events:none; }
.deal__dots{ display:flex; gap:6px; }
.deal__dots button{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:var(--ink-3);
  border:1px solid transparent; transition:color .25s, border-color .25s, background .25s;
}
.deal__dots button svg{ width:22px; height:22px; }
.deal__dots button:hover{ color:var(--ink); border-color:var(--line); }
.deal__dots button[aria-selected="true"]{ color:var(--ink); border-color:var(--line); background:var(--paper); }

@media (max-width:820px){
  .deal__stage{ grid-template-columns:1fr; gap:0; justify-items:center; }
  .deal__mid{ padding:16px 0; width:100%; max-width:220px; }
  .deal__lane i{ width:2px; height:34px; margin-inline:auto; }
  .deal__lane i::before{ top:auto; bottom:auto; left:-4px; right:auto;
    border-left:5px solid transparent; border-right:5px solid transparent;
    border-top:0; border-bottom:0; }
  .deal__lane--item i::before{ bottom:-7px; border-top:8px solid var(--line); }
  .deal__lane--plink i::before{ top:-7px; border-bottom:8px solid var(--line); }
  .deal.is-done .deal__lane--item i::before{ border-top-color:var(--teal); border-left-color:transparent; }
  .deal.is-done .deal__lane--plink i::before{ border-bottom-color:var(--green); border-right-color:transparent; }
  .deal__lane i::after{ transform:scaleY(0); transform-origin:top; }
  .deal__lane--plink i::after{ transform-origin:bottom; }
  .deal.is-done .deal__lane i::after{ transform:scaleY(1); }
  .deal__side{ width:100%; max-width:260px; }
  .deal__slot{ max-width:200px; }
}
@media (prefers-reduced-motion:reduce){ .deal.is-idle .thing::after{ animation:none; } }

/* ═══ motion & hover: impact lifeline ═════════════════════════ */
.life{ position:relative; }
.life__box{
  transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.life__box svg{ transition:transform .45s var(--ease); transform-origin:50% 50%; }
.life:hover .life__box{
  transform:translateY(-5px); border-color:var(--hue,var(--line));
  box-shadow:0 2px 4px rgba(20,24,27,.05), 0 18px 34px -22px rgba(20,24,27,.42);
}
.life:hover .life__box svg{ transform:scale(1.09); }
.life:nth-child(1){ --hue:rgba(20,24,27,.3); }
.life:nth-child(2){ --hue:var(--teal); }
.life:nth-child(3){ --hue:var(--clay); }
.life:nth-child(4){ --hue:var(--green); }
.life__t{ transition:color .35s var(--ease); }
.life:hover .life__t{ color:var(--hue); }

/* ═══ motion & hover: the Plinks equation ═════════════════════ */
.equation{ position:relative; }
.eq{ transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); }
.eq__i{ transition:transform .4s var(--ease); }
.eq:hover{ transform:translateX(4px); box-shadow:0 2px 4px rgba(20,24,27,.05), 0 14px 26px -20px rgba(20,24,27,.4); }
.eq:hover .eq__i{ transform:scale(1.08) rotate(-4deg); }
.eq__coin{
  position:absolute; z-index:3; top:0; left:0; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; background:var(--green-tint); border:1px solid rgba(46,158,79,.4);
  color:var(--green-deep); opacity:0; pointer-events:none;
  box-shadow:0 6px 14px -8px rgba(20,24,27,.5);
}
.eq__coin svg{ width:19px; height:19px; }

/* ═══ hover: what moves ═══════════════════════════════════════ */
.cat__t{ display:inline-block; transition:transform .4s var(--ease); }
.cat:hover .cat__t{ transform:translateX(3px); }
.cat:hover .cat__d{ opacity:.5; transform:none; }
.cat::before{ transition:width .5s var(--ease), background .3s; }
.cat:hover::before{ width:34%; background:rgba(255,255,255,.4); }
.cat.is-on:hover::before{ width:100%; background:var(--teal); }
.cats__stage{ transition:box-shadow .5s var(--ease); }
.catart img{ transition:transform 1.1s var(--ease); }
.cats__stage.is-peek{ box-shadow:0 30px 60px -34px rgba(0,0,0,.55); }
.cats__stage.is-peek .catart.is-on img{ transform:scale(1.03); }
@media (max-width:820px){
  .cat:hover .cat__t{ transform:none; }
  .cat:hover::before,.cat.is-on:hover::before{ width:0; }
}

/* ═══ ICON MOTION SYSTEM ══════════════════════════════════════
   Every line icon carries a gesture that matches what it means.
   It plays once when the icon first appears, and again on hover.
   ═════════════════════════════════════════════════════════════ */
svg[data-ico]{ transform-origin:50% 50%; will-change:transform; }

@keyframes icoSpin  { from{ transform:rotate(0) }            to{ transform:rotate(360deg) } }
@keyframes icoFlip  { from{ transform:rotateY(0) }           to{ transform:rotateY(360deg) } }
@keyframes icoDrop  { 0%{ transform:translateY(-26%) } 58%{ transform:translateY(7%) } 100%{ transform:translateY(0) } }
@keyframes icoPop   { 0%{ transform:scale(.7) } 58%{ transform:scale(1.1) } 100%{ transform:scale(1) } }
@keyframes icoSway  { 0%,100%{ transform:rotate(0) } 30%{ transform:rotate(-8deg) } 66%{ transform:rotate(5deg) } }
@keyframes icoHop   { 0%,100%{ transform:translateY(0) } 34%{ transform:translateY(-15%) } 70%{ transform:translateY(3%) } }
@keyframes icoTurn  { 0%,100%{ transform:scaleX(1) } 50%{ transform:scaleX(.78) } }
@keyframes icoNudge { 0%,100%{ transform:translateX(0) } 38%{ transform:translateX(11%) } 72%{ transform:translateX(-3%) } }
@keyframes icoShoot { 0%,100%{ transform:translate(0,0) } 42%{ transform:translate(10%,-10%) } }
@keyframes icoShake { 0%,100%{ transform:rotate(0) } 20%{ transform:rotate(-10deg) } 46%{ transform:rotate(8deg) } 72%{ transform:rotate(-4deg) } }

.ico-in[data-ico],
.ico-go[data-ico]{ animation:var(--ico-anim,icoPop) var(--ico-dur,.6s) var(--ease) both; }

svg[data-ico="plink"]  { --ico-anim:icoFlip;  --ico-dur:.8s; }
svg[data-ico="loop"],
svg[data-ico="again"]  { --ico-anim:icoSpin;  --ico-dur:.85s; }
svg[data-ico="drop"]   { --ico-anim:icoDrop;  --ico-dur:.7s; }
svg[data-ico="verify"],
svg[data-ico="check"]  { --ico-anim:icoPop;   --ico-dur:.55s; }
svg[data-ico="shirt"]  { --ico-anim:icoSway;  --ico-dur:.75s; }
svg[data-ico="toy"]    { --ico-anim:icoHop;   --ico-dur:.7s; }
svg[data-ico="book"]   { --ico-anim:icoTurn;  --ico-dur:.7s; }
svg[data-ico="gadget"] { --ico-anim:icoHop;   --ico-dur:.7s; }
svg[data-ico="discover"]{ --ico-anim:icoNudge;--ico-dur:.7s; }
svg[data-ico="spend"]  { --ico-anim:icoShoot; --ico-dur:.7s; }
svg[data-ico="receive"]{ --ico-anim:icoNudge; --ico-dur:.7s; }
svg[data-ico="bin"]    { --ico-anim:icoShake; --ico-dur:.75s; }

/* the store marks and the download arrow are not from the symbol set */
.store svg{ transition:transform .4s var(--ease); }
.store:hover svg{ transform:translateY(-2px) scale(1.08); }
.btn .ar--down{ transition:transform .4s var(--ease); }
.btn:hover .ar--down{ transform:translateY(3px); }
.dot{ animation:none; }
.dot.ico-in{ animation:dotPulse 1.6s var(--ease) 2; }
@keyframes dotPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(46,158,79,0) } 40%{ box-shadow:0 0 0 5px rgba(46,158,79,.16) } }

@media (prefers-reduced-motion:reduce){
  .ico-in[data-ico],.ico-go[data-ico],.dot.ico-in{ animation:none!important; }
  .store:hover svg,.btn:hover .ar--down{ transform:none; }
}


/* founder corrections, 12 Sep 2026: the sections he rewrote run ~15% smaller */
.about .d2,.how .d2,.plinks .d2,.impact .d2{ font-size:clamp(29px,3.45vw,49px); }
.about .lead,.how .lead,.plinks .lead,.impact .lead{ font-size:clamp(15px,1.1vw,17px); }
.about .d3,.how .d3,.plinks .d3{ font-size:clamp(20px,1.75vw,26px); }
.about__why{ display:grid; gap:10px; }
.about__why p{ font-size:15px; color:var(--ink-2); line-height:1.55; text-wrap:pretty; }
.journey{ margin-top:clamp(40px,5vw,72px); margin-bottom:clamp(22px,2.6vw,36px); }
.earn{ display:grid; gap:12px; margin:0; }
.earn div{ display:grid; gap:2px; }
.earn dt{ font-size:15px; font-weight:660; letter-spacing:-.012em; }
.earn dd{ margin:0; font-size:13.8px; color:var(--ink-3); line-height:1.5; text-wrap:pretty; }
.why{ margin-top:clamp(36px,4.5vw,64px); }
.why__row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,44px); }
.why__item h3{ font-size:16px; font-weight:670; letter-spacing:-.018em; margin-bottom:8px; }
.why__item p{ font-size:13.8px; color:var(--ink-3); line-height:1.55; text-wrap:pretty; }
.dl__grid{ grid-template-columns:minmax(0,1fr); }
@media (max-width:880px){ .why__row{ grid-template-columns:minmax(0,1fr); } }