:root{
  /* ----------------------------------------------------------------
     DAF Impact. The directory is neutral infrastructure: it
     hosts many funds, so it wears none of their brands. Ink slate for
     gravity, flux teal for capital in motion, signal amber for the one
     thing a visitor is here to press.
     ---------------------------------------------------------------- */
  --ink:         #12202A;   /* primary dark surface */
  --ink-deep:    #0B161D;   /* deepest surface */
  --ink-mid:     #1C3644;   /* panels on ink */
  --ink-soft:    #24485A;   /* raised panel on ink */

  --flux:        #0E8C7E;   /* text-safe teal — links, eyebrows on light */
  --flux-lt:     #45D6C0;   /* teal on dark surfaces */
  --flux-deep:   #0A6B60;
  --flux-pale:   #E2F3EF;

  --signal:      #E8A33D;   /* the easy button */
  --signal-lt:   #F5C46F;
  --signal-deep: #9C6416;   /* amber that stays legible on white */
  --signal-pale: #FBEFD8;
  --signal-sink: #A96F17;   /* the button's shadow edge */

  --sand:        #EDEAE2;
  --paper:       #F8F7F4;
  --white:       #FFFFFF;

  --on-dark:     #E6EEF0;
  --on-dark-mu:  #9DB2BC;
  --on-light:    #3D4C55;
  --on-light-mu: #5E6F79;

  --rule-dark:   rgba(230,238,240,.15);
  --rule-light:  rgba(18,32,42,.11);

  /* The signature: the press falling into the flow. */
  --spine: linear-gradient(180deg, var(--signal) 0%, #7FC29A 48%, var(--flux) 100%);

  --shadow-sm: 0 1px 2px rgba(18,32,42,.05), 0 6px 16px rgba(18,32,42,.06);
  --shadow-md: 0 2px 4px rgba(18,32,42,.05), 0 14px 38px rgba(18,32,42,.08);

  --r-card: 14px;
  --r-ctl: 8px;

  /* Per-surface roles. Dark surfaces re-declare these; components read them. */
  --heading: var(--ink);
  --muted:   var(--on-light-mu);
  --accent:  var(--flux);
  --rule:    var(--rule-light);

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --ui:      "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --wrap: 1220px;
  --gut: clamp(20px, 5vw, 56px);
  --sec-y: clamp(64px, 9vw, 128px);
}

*,*::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(--on-light);
  font-family:var(--ui);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{ max-width:100%; }
a{ color:inherit; }

:focus-visible{
  outline:2px solid var(--flux);
  outline-offset:3px;
  border-radius:var(--r-ctl);
}

/* ---------- Type primitives ---------- */

h1,h2,h3,h4{ margin:0; font-weight:500; }

.hero, .pagehead, .on-dark, .on-slate, .foot, .disclosure, .card--dark{
  --heading: var(--on-dark);
  --muted:   var(--on-dark-mu);
  --accent:  var(--signal);
  --rule:    var(--rule-dark);
}
.cta-band{
  --heading: var(--white);
  --muted:   rgba(255,255,255,.80);
  --accent:  var(--signal);
  --rule:    rgba(255,255,255,.22);
}

.display,
.quote__text,
.card__title,
.stage__title,
.rail b{ color:var(--heading); }

.display{
  font-family:var(--display);
  font-weight:500;
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 40;
  letter-spacing:-.02em;
  line-height:1.07;
}

.h-hero{ font-size:clamp(2.5rem, 5.7vw, 4.2rem); }
.h-sec { font-size:clamp(1.9rem, 3.5vw, 2.8rem); line-height:1.15; }
.h-sub { font-size:clamp(1.3rem, 2.1vw, 1.58rem); line-height:1.24; }

.eyebrow{
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 18px;
  display:flex;
  align-items:center;
  gap:12px;
}
.eyebrow::after{
  content:"";
  flex:1; height:1px;
  background:var(--rule);
  max-width:120px;
}

.lede{
  font-size:clamp(1.06rem, 1.5vw, 1.22rem);
  line-height:1.58;
  color:var(--muted);
}

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
strong{ font-weight:600; }

/* ---------- Layout ---------- */

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.wrap--narrow{ max-width:900px; }

.section{ padding-block:var(--sec-y); }
.section--tight{ padding-block:clamp(48px,6vw,84px); }

.on-dark{ background:var(--ink); color:var(--on-dark); }
.on-slate{ background:var(--ink-deep); color:var(--on-dark); }
.on-sand{ background:var(--sand); }

.split{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(28px,5vw,72px);
  align-items:start;
}
.split--even{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:860px){
  .split,.split--even{ grid-template-columns:1fr; }
}

.stack-sm > * + *{ margin-top:14px; }
.stack   > * + *{ margin-top:22px; }
.stack-lg> * + *{ margin-top:38px; }

/* ---------- Buttons ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--ui);
  font-size:.95rem;
  font-weight:500;
  padding:14px 24px;
  border:1px solid transparent;
  border-radius:var(--r-ctl);
  text-decoration:none;
  cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.btn .arw{ transition:transform .22s cubic-bezier(.2,.7,.3,1); }
.btn:hover .arw{ transform:translateX(4px); }

.btn--primary{ background:var(--flux); color:var(--white); }
.btn--primary:hover{ background:#12A392; }
.btn--ghost{ border-color:rgba(230,238,240,.3); color:var(--on-dark); }
.btn--ghost:hover{ border-color:var(--signal); color:var(--signal); }
.btn--outline{ border-color:rgba(18,32,42,.24); color:var(--ink); }
.btn--outline:hover{ border-color:var(--flux); color:var(--flux); }
.cta-band .btn--primary{ background:var(--signal); color:var(--ink); }
.cta-band .btn--primary:hover{ background:var(--signal-lt); }
.btn--sm{ padding:10px 16px; font-size:.85rem; }

.btn-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

/* ---------- The easy button ----------
   The whole premise of the site is that moving DAF capital should take
   one press. So the control that does it is the only thing on the page
   built to look physically pressable: a raised amber pill on a hard
   bottom edge that actually travels down when you push it. Nothing else
   on the site is allowed to use this treatment. */

.ebtn{
  position:relative;
  display:inline-flex;
  align-items:center; justify-content:center; gap:12px;
  font-family:var(--ui);
  font-weight:600;
  font-size:1.02rem;
  letter-spacing:-.005em;
  color:#2A1B06;
  background:linear-gradient(180deg, var(--signal-lt) 0%, var(--signal) 58%);
  border:0;
  border-radius:999px;
  padding:18px 34px;
  cursor:pointer;
  text-decoration:none;
  box-shadow:0 3px 0 var(--signal-sink), 0 12px 26px rgba(168,110,20,.30);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.ebtn:hover{
  filter:saturate(108%) brightness(1.03);
  transform:translateY(-1px);
  box-shadow:0 4px 0 var(--signal-sink), 0 16px 32px rgba(168,110,20,.34);
}
.ebtn:active{
  transform:translateY(3px);
  box-shadow:0 0 0 var(--signal-sink), 0 4px 10px rgba(168,110,20,.28);
}
.ebtn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; }
.ebtn__dot{
  width:9px; height:9px; border-radius:50%;
  background:#2A1B06;
  opacity:.6;
  flex:0 0 auto;
}
.ebtn--wide{ width:100%; }
@media (prefers-reduced-motion: reduce){
  .ebtn,.ebtn:hover,.ebtn:active{ transform:none; transition:none; }
}

.txt-link{
  font-family:var(--mono);
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, currentColor 45%, transparent);
  padding-bottom:3px;
  display:inline-flex;
  gap:9px;
  align-items:center;
}
.txt-link:hover{ border-bottom-color:currentColor; }

/* ---------- Masthead ---------- */

.masthead{
  position:sticky; top:0; z-index:50;
  background:rgba(248,247,244,.93);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--rule-light);
  color:var(--ink);
}
.masthead__in{ display:flex; align-items:center; gap:20px; height:72px; }

.mark{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; color:inherit;
  margin-right:auto; flex:0 0 auto;
}
.mark__bar{
  flex:0 0 auto;
  width:4px; height:38px;
  border-radius:2px;
  background:var(--spine);
}
.mark__txt{
  font-family:var(--ui);
  font-weight:700;
  font-size:1.02rem;
  letter-spacing:-.022em;
  line-height:1.15;
  color:var(--ink);
}
.mark__txt small{
  display:block;
  font-family:var(--mono);
  font-weight:500;
  font-size:.66rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--flux);
  margin-top:3px;
}
.foot .mark__txt{ color:var(--white); }
.foot .mark__txt small{ color:var(--flux-lt); }

.nav{ display:flex; align-items:center; gap:26px; }
.nav a{
  font-size:.9rem;
  font-weight:500;
  text-decoration:none;
  color:var(--on-light-mu);
  padding-block:6px;
  border-bottom:1px solid transparent;
  transition:color .16s ease, border-color .16s ease;
}
.nav a:hover{ color:var(--ink); }
.nav a[aria-current="page"]{ color:var(--flux); border-color:var(--flux); }
.nav .btn{ padding:10px 18px; font-size:.86rem; border-bottom:1px solid transparent; }
.nav .btn--primary{ color:var(--white); }

.nav-toggle{
  display:none;
  background:none; border:1px solid var(--rule-light); border-radius:var(--r-ctl);
  color:var(--ink); padding:9px 12px; cursor:pointer;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
}
@media (max-width:1040px){
  .nav-toggle{ display:block; }
  .nav{
    position:absolute; top:72px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper);
    border-bottom:1px solid var(--rule-light);
    box-shadow:var(--shadow-md);
    padding:8px var(--gut) 24px;
  }
  .nav[hidden]{ display:none; }
  .nav a{ padding:15px 0; border-bottom:1px solid var(--rule-light); }
  .nav .btn{ margin-top:16px; justify-content:center; }
}

/* ---------- Hero ---------- */

.hero{
  position:relative;
  background:var(--ink);
  color:var(--on-dark);
  overflow:hidden;
  padding-block:clamp(70px,10vw,132px) clamp(46px,6vw,80px);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:url("../img/field.svg") center top / cover no-repeat;
  opacity:.9;
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(18,32,42,.15) 0%, rgba(18,32,42,.68) 54%, var(--ink) 100%);
  pointer-events:none;
}
.hero .wrap{ position:relative; z-index:1; }
.hero__in{ max-width:850px; }
.hero .h-hero{ margin-bottom:26px; }
.hero .lede{ max-width:660px; margin-bottom:34px; }

.hero__meta{
  margin-top:46px; padding-top:22px;
  border-top:1px solid var(--rule-dark);
  display:flex; flex-wrap:wrap; gap:10px 30px;
  font-family:var(--mono);
  font-size:.7rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--on-dark-mu);
}
.hero__meta span{ display:inline-flex; align-items:center; gap:8px; }
.hero__meta span::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--signal); flex:0 0 auto;
}

.pagehead{
  background:var(--ink);
  color:var(--on-dark);
  padding-block:clamp(56px,7.5vw,94px) clamp(44px,6vw,74px);
  border-bottom:1px solid var(--rule-dark);
}
.pagehead .h-sec{ max-width:20ch; margin-bottom:20px; }
.pagehead .lede{ max-width:660px; }

/* ---------- The tape ----------
   A fixed row of directory-wide figures. Reads as a ticker without
   moving, because a moving one would be unreadable and vain. */

.tape{
  background:var(--ink-deep);
  border-block:1px solid var(--rule-dark);
  color:var(--on-dark);
  padding-block:22px;
}
.tape__row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  gap:clamp(14px,2.4vw,30px);
}
.tape__cell{
  border-left:2px solid var(--flux-lt);
  padding-left:16px;
}
.tape__cell:nth-child(2){ border-color:var(--signal); }
.tape__fig{
  font-family:var(--display);
  font-size:clamp(1.55rem,3.1vw,2.15rem);
  line-height:1.05;
  letter-spacing:-.03em;
  color:var(--on-dark);
  display:block;
}
.tape__lab{
  font-family:var(--mono);
  font-size:.66rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--on-dark-mu);
  margin-top:8px; display:block; line-height:1.5;
}

/* ---------- Quote ---------- */

.quote{ position:relative; padding-left:clamp(20px,3vw,34px); }
.quote::before{
  content:"";
  position:absolute; left:0; top:2px; bottom:2px;
  width:3px; border-radius:2px;
  background:var(--spine);
}
.quote__text{
  font-family:var(--display);
  font-size:clamp(1.25rem,2.35vw,1.7rem);
  line-height:1.4;
  letter-spacing:-.015em;
  margin:0 0 22px;
}
.quote__by{
  font-family:var(--mono);
  font-size:.72rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted);
}
.quote__by b{ color:var(--accent); font-weight:500; }

/* ---------- Figure ---------- */

.figure-line{
  display:flex; align-items:baseline; gap:16px;
  font-family:var(--display);
  font-size:clamp(2.6rem,6vw,4rem);
  line-height:1;
  color:var(--accent);
  letter-spacing:-.035em;
}
.figure-line small{
  font-family:var(--mono);
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
  max-width:20ch; line-height:1.55;
}

/* ---------- Cards ---------- */

.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
  gap:clamp(16px,2.2vw,26px);
}

.card{
  position:relative;
  background:var(--white);
  border:1px solid rgba(18,32,42,.07);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-sm);
  padding:clamp(26px,3vw,34px);
  padding-left:clamp(30px,3.4vw,40px);
  overflow:hidden;
  display:flex; flex-direction:column;
}
.card::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:3px; background:var(--spine);
}
.card--dark{
  background:var(--ink-mid);
  border-color:var(--rule-dark);
  box-shadow:none;
  color:var(--on-dark);
}
.card__no{
  font-family:var(--mono);
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--signal-deep);
  background:var(--signal-pale);
  border-radius:99px;
  padding:5px 11px;
  align-self:flex-start;
  margin-bottom:16px;
}
.card--dark .card__no{ background:rgba(232,163,61,.13); color:var(--signal); }
.card__title{
  font-family:var(--display);
  font-size:1.22rem; line-height:1.25; letter-spacing:-.018em;
  margin-bottom:12px;
}
.card__body{ font-size:.95rem; color:var(--muted); }
.card__list{
  list-style:none; margin:22px 0 0; padding:20px 0 0;
  border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:.74rem; letter-spacing:.04em;
  line-height:1.5;
}
.card__list li{ padding-left:16px; position:relative; margin-bottom:9px; }
.card__list li:last-child{ margin-bottom:0; }
.card > .card__list{ margin-top:auto; }
.card__list li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:6px; height:2px; border-radius:1px; background:var(--accent);
}

/* ---------- The directory ----------
   The listings themselves. One listing is a row, not a tile: an
   a directory like this is read by scanning down a column of comparable figures,
   and tiles destroy that alignment the moment the copy lengths differ. */

.directory{ display:grid; gap:clamp(14px,2vw,20px); }

.listing{
  position:relative;
  background:var(--white);
  border:1px solid rgba(18,32,42,.08);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,320px);
  gap:clamp(20px,3vw,40px);
  padding:clamp(24px,3vw,34px);
  padding-left:clamp(28px,3.4vw,42px);
  transition:box-shadow .18s ease, border-color .18s ease;
}
.listing::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:3px; background:var(--spine);
}
.listing:hover{ box-shadow:var(--shadow-md); border-color:rgba(18,32,42,.14); }
.listing[hidden]{ display:none; }
@media (max-width:840px){ .listing{ grid-template-columns:1fr; } }

.listing__head{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 14px;
  margin-bottom:6px;
}
.listing__name{
  font-family:var(--display);
  font-size:clamp(1.3rem,2.1vw,1.6rem);
  line-height:1.2; letter-spacing:-.02em;
  color:var(--ink);
}
.listing__name a{ text-decoration:none; }
.listing__name a:hover{ color:var(--flux); }
.listing__steward{
  font-family:var(--mono);
  font-size:.7rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--on-light-mu);
  margin-bottom:16px;
}
.listing__sum{ font-size:.96rem; color:var(--on-light-mu); margin-bottom:18px; max-width:62ch; }

/* status pip */
.pip{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono);
  font-size:.64rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--flux-deep);
  white-space:nowrap;
}
.pip::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--flux); flex:0 0 auto;
}
.pip--diligence{ color:var(--signal-deep); }
.pip--diligence::before{ background:var(--signal); }
.pip--closed{ color:var(--on-light-mu); }
.pip--closed::before{ background:#9AA7AE; }

/* theme + instrument tags */
.tags{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; }
.tag{
  font-family:var(--mono);
  font-size:.66rem; letter-spacing:.09em;
  padding:5px 10px;
  border-radius:99px;
  background:var(--flux-pale);
  color:var(--flux-deep);
  white-space:nowrap;
}
.tag--inst{ background:var(--sand); color:#4A5A63; }

/* the comparable figures — the reason a listing is a row */
.metrics{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr));
  gap:16px 22px;
  margin:20px 0 0;
  padding-top:18px;
  border-top:1px solid var(--rule-light);
}
.metrics div{ margin:0; }
.metrics dt{
  font-family:var(--mono);
  font-size:.62rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--on-light-mu);
  margin-bottom:5px;
}
.metrics dd{
  margin:0;
  font-family:var(--mono);
  font-size:.95rem;
  font-weight:500;
  color:var(--ink);
  line-height:1.3;
}

/* the right-hand rail of a listing: where the press lives */
.listing__act{
  border-left:1px solid var(--rule-light);
  padding-left:clamp(20px,2.6vw,32px);
  display:flex; flex-direction:column; gap:14px;
  align-self:stretch;
  justify-content:center;
}
@media (max-width:840px){
  .listing__act{
    border-left:0; border-top:1px solid var(--rule-light);
    padding-left:0; padding-top:22px;
  }
}
.listing__min{
  font-family:var(--mono);
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--on-light-mu);
}
.listing__min b{ color:var(--ink); font-weight:500; }

/* ---------- Filters ---------- */

.filters{
  background:var(--white);
  border:1px solid rgba(18,32,42,.08);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-sm);
  padding:clamp(18px,2.4vw,26px);
  margin-bottom:clamp(20px,3vw,30px);
}
.filters__row{ display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center; }
.filters__row + .filters__row{ margin-top:16px; padding-top:16px; border-top:1px solid var(--rule-light); }
.filters__lab{
  font-family:var(--mono);
  font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-light-mu);
  flex:0 0 96px;
}
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  font-family:var(--mono);
  font-size:.7rem; letter-spacing:.06em;
  padding:8px 14px;
  border-radius:99px;
  border:1px solid rgba(18,32,42,.16);
  background:var(--paper);
  color:var(--on-light);
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.chip:hover{ border-color:var(--flux); color:var(--flux); }
.chip[aria-pressed="true"]{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--white);
}
.filters__count{
  margin-left:auto;
  font-family:var(--mono);
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--on-light-mu);
}
.directory__empty{
  padding:40px;
  text-align:center;
  font-family:var(--mono);
  font-size:.78rem; letter-spacing:.1em;
  color:var(--on-light-mu);
  border:1px dashed var(--rule-light);
  border-radius:var(--r-card);
}
.directory__empty[hidden]{ display:none; }

/* ---------- Allocation tray ----------
   The one stateful element: funds picked across the directory,
   held in a tray until the visitor sends the whole allocation at once. */

.tray{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:60;
  background:var(--ink);
  color:var(--on-dark);
  border-top:1px solid var(--rule-dark);
  box-shadow:0 -10px 40px rgba(11,22,29,.30);
  transform:translateY(100%);
  transition:transform .26s cubic-bezier(.2,.7,.3,1);
}
.tray[data-open="true"]{ transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .tray{ transition:none; } }
.tray__in{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px;
  padding-block:16px;
}
.tray__lab{
  font-family:var(--mono);
  font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--signal);
}
.tray__list{
  display:flex; flex-wrap:wrap; gap:8px;
  list-style:none; margin:0; padding:0;
  flex:1 1 320px;
}
.tray__item{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.84rem;
  background:var(--ink-mid);
  border:1px solid var(--rule-dark);
  border-radius:99px;
  padding:6px 8px 6px 14px;
}
.tray__drop{
  border:0; background:none; cursor:pointer;
  color:var(--on-dark-mu);
  font-size:1rem; line-height:1;
  padding:3px 6px; border-radius:50%;
}
.tray__drop:hover{ color:var(--signal); background:rgba(232,163,61,.14); }

/* ---------- Numbered stage list ---------- */

.stages{ list-style:none; margin:0; padding:0; counter-reset:stage; }
.stages > li{
  counter-increment:stage;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(18px,3vw,30px);
  padding-block:clamp(24px,3vw,32px);
  border-top:1px solid var(--rule);
}
.stages > li:last-child{ border-bottom:1px solid var(--rule); }
.stages > li::before{
  content:counter(stage,decimal-leading-zero);
  font-family:var(--mono);
  font-size:.78rem; letter-spacing:.1em;
  color:var(--accent);
  padding-top:.35em;
}
.stage__title{
  font-family:var(--display);
  font-size:1.2rem; letter-spacing:-.018em;
  margin-bottom:8px;
}
.stage__body{ font-size:.97rem; color:var(--muted); }

/* ---------- Spec list ---------- */

.specs{ margin:0; }
.specs > div{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:clamp(14px,3vw,32px);
  padding-block:22px;
  border-top:1px solid var(--rule);
}
.specs > div:last-child{ border-bottom:1px solid var(--rule); }
.specs dt{
  font-family:var(--mono);
  font-size:.71rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent);
  padding-top:.25em;
}
.specs dd{ margin:0; font-size:.98rem; color:var(--muted); }
@media (max-width:640px){ .specs > div{ grid-template-columns:1fr; gap:8px; } }

/* ---------- Diagrams ---------- */

.diagram{ display:block; width:100%; height:auto; }
.diagram-frame{
  border:1px solid var(--rule-dark);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(69,214,192,.09), rgba(11,22,29,0));
  padding:clamp(18px,3vw,34px);
}
.diagram-cap{
  font-family:var(--mono);
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-dark-mu);
  margin-top:18px; text-align:center;
}
@media (max-width:760px){ .diagram-frame{ display:none; } }

.dg-node{ fill:var(--ink-mid); stroke:rgba(230,238,240,.14); }
.dg-node--key{ fill:var(--ink-soft); stroke:rgba(232,163,61,.5); }
.dg-label{ font-family:var(--ui); font-size:16px; fill:var(--on-dark); }
.dg-label--key{ fill:var(--signal); }
.dg-meta{ font-family:var(--mono); font-size:12px; letter-spacing:.09em; fill:var(--on-dark-mu); }
.dg-flow{ fill:none; stroke:var(--flux-lt); stroke-width:1.4; stroke-opacity:.8; }
.dg-return{ fill:none; stroke:var(--signal); stroke-width:1.4; stroke-opacity:.9; }
.dg-dash{ stroke-dasharray:7 11; animation:flow 2.6s linear infinite; }
@keyframes flow{ to{ stroke-dashoffset:-36; } }
@media (prefers-reduced-motion: reduce){
  .dg-dash{ animation:none; stroke-dasharray:none; stroke-opacity:.5; }
}

/* ---------- Callout ---------- */

.callout{
  position:relative;
  background:var(--white);
  border:1px solid rgba(18,32,42,.07);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-sm);
  padding:clamp(22px,3vw,32px);
  padding-left:clamp(26px,3.2vw,38px);
  overflow:hidden;
}
.callout::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:3px; background:var(--spine);
}
.callout__label{
  font-family:var(--mono);
  font-size:.69rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--accent);
  margin-bottom:12px;
}
.on-dark .callout,.on-slate .callout{
  background:rgba(255,255,255,.04);
  border-color:var(--rule-dark);
  box-shadow:none;
}

/* ---------- Forms ---------- */

.form-shell{
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  gap:clamp(30px,5vw,70px);
  align-items:start;
}
@media (max-width:900px){ .form-shell{ grid-template-columns:1fr; } }

.form-aside{ position:sticky; top:104px; }
@media (max-width:900px){ .form-aside{ position:static; } }

.form{
  background:var(--white);
  border:1px solid rgba(18,32,42,.07);
  border-radius:18px;
  box-shadow:var(--shadow-md);
  padding:clamp(24px,3.6vw,44px);
}

.field{ margin-bottom:28px; }
.field > label:not(.affirm),
.field > .field__legend{
  display:block;
  font-family:var(--ui);
  font-size:.94rem;
  font-weight:500;
  margin-bottom:8px;
  color:var(--ink);
}
.req{ color:var(--flux); font-family:var(--mono); font-size:.76em; margin-left:6px; letter-spacing:.08em; }
.field__help{ font-size:.87rem; color:var(--on-light-mu); margin:0 0 12px; }

.field input[type=text],
.field input[type=email],
.field input[type=url],
.field input[type=number],
.field select,
.field textarea{
  width:100%;
  font-family:var(--ui);
  font-size:1rem;
  color:var(--ink);
  background:var(--paper);
  border:1px solid rgba(18,32,42,.16);
  border-radius:var(--r-ctl);
  padding:13px 14px;
  transition:border-color .16s ease, background .16s ease;
}
.field textarea{ min-height:170px; resize:vertical; line-height:1.6; }
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%230E8C7E' stroke-width='1.6'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:12px;
  padding-right:38px;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--flux);
  background:var(--white);
}
.field input::placeholder,.field textarea::placeholder{ color:#98A2A8; }

.choices{ display:grid; gap:10px; margin:0; padding:0; border:0; }
.choice{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:12px; align-items:start;
  padding:14px 16px;
  border:1px solid rgba(18,32,42,.13);
  border-radius:10px;
  background:var(--paper);
  cursor:pointer;
  font-size:.94rem; line-height:1.45;
  transition:border-color .16s ease, background .16s ease;
}
.choice:hover{ border-color:var(--flux); }
.choice input{ margin:.32em 0 0; accent-color:var(--flux); width:16px; height:16px; }
.choice:has(input:checked){ border-color:var(--flux); background:rgba(14,140,126,.07); }

.affirm{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:12px; align-items:start;
  font-size:.9rem; line-height:1.55;
  color:var(--on-light-mu);
  padding:18px 18px 18px 21px;
  border:1px solid var(--rule-light);
  border-radius:10px;
  background:var(--paper);
  cursor:pointer;
  position:relative; overflow:hidden;
}
.affirm::before{
  content:""; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:var(--spine);
}
.affirm input{ margin:.28em 0 0; accent-color:var(--flux); width:16px; height:16px; }

fieldset{ border:0; margin:0; padding:0; }
legend{ padding:0; }
.field__legend{ width:100%; }

.form-foot{
  margin-top:10px; padding-top:26px;
  border-top:1px solid var(--rule-light);
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px;
}
.form-fine{
  flex:0 0 100%;
  margin:0;
  font-size:.85rem; line-height:1.55;
  color:var(--muted);
  max-width:62ch;
}
.form-note{
  font-family:var(--mono);
  font-size:.68rem; letter-spacing:.1em;
  color:var(--on-light-mu);
  max-width:34ch; line-height:1.6;
}
.form-status{
  margin-top:20px;
  padding:16px 18px;
  border-radius:var(--r-ctl);
  font-size:.93rem;
  border:1px solid var(--flux);
  background:rgba(14,140,126,.08);
}
.form-status[hidden]{ display:none; }
.form-status--err{ border-color:#B4433A; background:rgba(180,67,58,.07); }

.err-msg{
  display:block;
  font-family:var(--mono);
  font-size:.7rem; letter-spacing:.06em;
  color:#B4433A;
  margin-top:7px;
}
.err-msg[hidden]{ display:none; }

/* ---------- Allocation table (on /allocate) ---------- */

.alloc{ margin-bottom:28px; }
.alloc__row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 150px auto;
  gap:14px;
  align-items:center;
  padding-block:14px;
  border-top:1px solid var(--rule-light);
}
.alloc__row:last-of-type{ border-bottom:1px solid var(--rule-light); }
@media (max-width:620px){
  .alloc__row{ grid-template-columns:minmax(0,1fr) auto; }
  .alloc__amt{ grid-column:1 / -1; }
}
.alloc__name{ font-size:.95rem; font-weight:500; color:var(--ink); }
.alloc__name small{
  display:block;
  font-family:var(--mono);
  font-size:.64rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--on-light-mu);
  font-weight:400; margin-top:3px;
}
.alloc__amt input{
  width:100%;
  font-family:var(--mono); font-size:.95rem;
  color:var(--ink); background:var(--paper);
  border:1px solid rgba(18,32,42,.16);
  border-radius:var(--r-ctl);
  padding:11px 12px;
  text-align:right;
}
.alloc__amt input:focus{ border-color:var(--flux); background:var(--white); }
.alloc__total{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:16px; padding-top:18px;
  font-family:var(--mono);
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-light-mu);
}
.alloc__total b{
  font-family:var(--display);
  font-size:1.9rem; letter-spacing:-.03em;
  color:var(--ink); font-weight:500;
}
.alloc__empty{
  padding:26px;
  border:1px dashed var(--rule-light);
  border-radius:var(--r-ctl);
  font-size:.92rem;
  color:var(--on-light-mu);
}
.alloc__empty[hidden]{ display:none; }

/* ---------- Rail ---------- */

.rail{ list-style:none; margin:0; padding:0; }
.rail li{
  position:relative;
  padding:0 0 26px 30px;
  border-left:1px solid var(--rule);
  font-size:.95rem;
  color:var(--muted);
}
.rail li:last-child{ padding-bottom:0; border-color:transparent; }
.rail li::before{
  content:""; position:absolute; left:-4.5px; top:.52em;
  width:8px; height:8px; border-radius:50%;
  background:var(--accent);
}
.rail b{ display:block; font-family:var(--ui); font-weight:500; margin-bottom:4px; font-size:1rem; }

/* ---------- CTA band ---------- */

.cta-band{
  background:var(--flux-deep);
  color:var(--white);
  padding-block:clamp(56px,7vw,96px);
}
.cta-band .h-sec{ max-width:20ch; }
.cta-band p{ color:var(--muted); max-width:52ch; }

/* ---------- Disclosure + footer ---------- */

.disclosure{
  background:var(--ink-deep);
  color:var(--on-dark-mu);
  border-top:1px solid var(--rule-dark);
  padding-block:36px;
}
.disclosure__in{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(16px,3vw,34px);
  align-items:start;
}
@media (max-width:700px){ .disclosure__in{ grid-template-columns:1fr; } }
.disclosure__label{
  font-family:var(--mono);
  font-size:.64rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--flux-lt);
  white-space:nowrap; padding-top:.25em;
}
.disclosure__text{
  font-size:.82rem; line-height:1.68; font-style:italic;
  margin:0; max-width:92ch;
}

.foot{
  background:var(--ink);
  color:var(--on-dark);
  padding-block:56px 40px;
  border-top:1px solid var(--rule-dark);
}
.foot__grid{
  display:grid;
  grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));
  gap:clamp(26px,4vw,50px);
}
@media (max-width:860px){ .foot__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot__grid{ grid-template-columns:1fr; } }
.foot h4{
  font-family:var(--mono);
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--flux-lt);
  margin-bottom:16px;
}
.foot ul{ list-style:none; margin:0; padding:0; }
.foot li{ margin-bottom:11px; }
.foot a{ color:var(--on-dark-mu); text-decoration:none; font-size:.92rem; }
.foot a:hover{ color:var(--on-dark); }
.foot__blurb{ color:var(--on-dark-mu); font-size:.92rem; max-width:38ch; margin-top:18px; }
.foot__bar{
  margin-top:44px; padding-top:22px;
  border-top:1px solid var(--rule-dark);
  display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between;
  font-family:var(--mono);
  font-size:.66rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--on-dark-mu);
}

/* ---------- DAFpay panel ---------- */

.dafpay{
  position:relative;
  background:var(--white);
  border:1px solid rgba(18,32,42,.07);
  border-radius:18px;
  box-shadow:var(--shadow-md);
  padding:clamp(24px,3.4vw,40px);
  padding-left:clamp(28px,3.8vw,44px);
  overflow:hidden;
}
.dafpay::before{
  content:""; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:var(--spine);
}
.dafpay .h-sub{ margin-bottom:10px; }
.dafpay > .muted{ font-size:.95rem; margin-bottom:24px; max-width:56ch; }
.dafpay__mount{ margin-top:6px; min-height:56px; }
.dafpay__mount:empty::after{
  content:"Loading DAFpay\2026";
  font-family:var(--mono);
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted);
}
.dafpay__note{
  margin-top:20px; padding-top:18px;
  border-top:1px solid var(--rule);
  font-size:.85rem; color:var(--muted);
}
.dafpay[data-state="success"] .dafpay__mount,
.dafpay[data-state="success"] .dafpay__amount{ display:none; }
.dafpay__amount{ max-width:260px; margin-bottom:22px; }

/* ---------- Utilities ---------- */

.measure{ max-width:64ch; }
.muted{ color:var(--on-light-mu); }
.on-dark .muted,.on-slate .muted{ color:var(--on-dark-mu); }
.signal{ color:var(--signal); }
.center{ text-align:center; }
.skip{
  position:absolute; left:-9999px;
  background:var(--flux); color:var(--white);
  padding:12px 18px; z-index:100; border-radius:var(--r-ctl);
  font-size:.9rem;
}
.skip:focus{ left:12px; top:12px; }

/* Consecutive dark surfaces should read as one field, not two gaps. */
.hero + .section.on-dark,
.hero + .section.on-slate,
.pagehead + .section.on-dark,
.pagehead + .section.on-slate{ padding-top:clamp(44px,6vw,84px); }
.section.on-dark + .section.on-slate,
.section.on-slate + .section.on-dark{ padding-top:clamp(48px,6.5vw,96px); }

/* Narrow-screen stand-in for the system diagram. */
.flow-mini{ display:none; }
@media (max-width:760px){ .flow-mini{ display:block; } }
.flow-mini li b{ font-size:1.02rem; }

/* The tray overlays the page bottom, so the page only needs to give up
   the space while it is actually raised. */
body:has(.tray[data-open="true"]){ padding-bottom:104px; }