/* Given — site styles.
   The wordmark is served as SVG, never as live text: Avenir Next is an Apple
   system face, so a Windows or Android visitor would otherwise see the logo
   set in a fallback. Body copy uses a stack and is allowed to vary. */
:root {
  --vault:#0E1116;
  --vault-2:#151A21;
  --paper:#F7F8FA;
  --card:#FFFFFF;
  --ink:#12161B;
  --ink-2:#4B5563;
  --ink-3:#7C8794;
  --line:#E3E6EB;
  --line-dark:#232A34;
  --titanium:#6E86B8;
  --platinum:#8FE3E8;
  --brand:#1B6FD4;
  --sans:'Avenir Next',Avenir,'Nunito Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --measure:60ch;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
/* The header is sticky, so an anchor jump would otherwise land a section
   underneath it and hide its eyebrow. */
section[id],div[id]{scroll-margin-top:92px}
@media (max-width:600px){section[id],div[id]{scroll-margin-top:72px}}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,
[tabindex]:focus-visible{outline:3px solid var(--platinum);outline-offset:3px;border-radius:6px}
/* Range thumbs sit inside a shadow tree, so the outline goes on the track. */
input[type=range]:focus-visible{outline-offset:6px}
/* The checkbox is visually a switch; its own outline would trace the switch
   rather than the row you actually pressed, so the label carries it. */
.toggle:focus-within{outline:3px solid var(--platinum);outline-offset:3px;border-radius:12px}

/* Skip link: the header and seven section links sit ahead of the content, so
   a keyboard user would otherwise tab through the whole nav on every page. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:60;background:var(--platinum);
  color:#08222A;padding:12px 20px;border-radius:0 0 10px 0;font-weight:600;text-decoration:none}
.skip-link:focus{left:0}

/* ---- header ---- */
.site-head{background:var(--vault);padding:22px 0;position:sticky;top:0;z-index:20}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.site-head img{height:34px;width:auto;display:block}
.nav{display:flex;gap:26px;align-items:center;font-size:15px}
.nav a{color:#C7CEDA;text-decoration:none}
.nav a:hover{color:#fff}
.btn{display:inline-block;border-radius:999px;padding:11px 22px;font-weight:600;
  text-decoration:none;font-size:15px;border:1px solid transparent}
.btn-primary{background:var(--platinum);color:#08222A}
.btn-primary:hover{background:#A9EBEF}
.btn-ghost{border-color:#33404F;color:#E6EAF0}
.btn-ghost:hover{border-color:#5C6B7D}

/* ---- hero ---- */
.hero{background:var(--vault);color:#EEF1F5;padding:76px 0 96px}
.hero h1{font-size:clamp(2.6rem,6vw,4.4rem);line-height:1.02;letter-spacing:-.03em;
  margin:0 0 22px;font-weight:600;max-width:16ch;text-wrap:balance}
.hero p.lede{font-size:clamp(1.05rem,2vw,1.28rem);color:#AEB8C6;margin:0 0 34px;max-width:52ch}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
/* The hero carries only type now — the ladder moved to the rank section,
   where a slider actually drives it. A single measured column reads better
   than one column of a two-column grid with an empty half. */
.hero-single > div{max-width:46ch}
.hero-single h1{max-width:none}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.hero .note{margin:22px 0 0;font-size:13.5px;color:#7E8B9B}

/* ---- the ladder, the hero's one real illustration ---- */
.ladder{background:var(--vault-2);border:1px solid var(--line-dark);border-radius:16px;padding:26px 24px}
.ladder h2{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:#8794A4;margin:0 0 20px;font-weight:400}
.rung{display:flex;align-items:center;gap:14px;padding:9px 0}
.rung .dot{width:14px;height:14px;border-radius:50%;flex:none}
.rung .name{font-weight:600;font-size:15px}
.rung .at{margin-left:auto;font-family:var(--mono);font-size:12px;color:#7E8B9B;
  font-variant-numeric:tabular-nums}
.rung.top .name{color:#fff}
.rung.dim .name{color:#96A2B1}

/* ---- sections ---- */
section{padding:88px 0}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 14px}
h2.sec{font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.1;letter-spacing:-.022em;
  margin:0 0 18px;font-weight:600;max-width:20ch;text-wrap:balance}
.sec-lede{color:var(--ink-2);max-width:var(--measure);margin:0 0 44px;font-size:1.06rem}
.steps{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.step{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px 24px}
.step .n{font-family:var(--mono);font-size:12px;color:var(--brand);letter-spacing:.1em;
  display:block;margin-bottom:12px}
.step h3{margin:0 0 8px;font-size:1.15rem;font-weight:600;letter-spacing:-.01em}
.step p{margin:0;color:var(--ink-2);font-size:.95rem}

.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.claims{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.claims li{padding:20px 0;border-bottom:1px solid var(--line)}
.claims h3{margin:0 0 5px;font-size:1.02rem;font-weight:600}
.claims p{margin:0;color:var(--ink-2);font-size:.94rem}

.dark-band{background:var(--vault);color:#EEF1F5}
.dark-band .eyebrow{color:#8794A4}
.dark-band .sec-lede{color:#AEB8C6}
.dark-band .step{background:var(--vault-2);border-color:var(--line-dark)}
.dark-band .step p{color:#AEB8C6}
.dark-band .step .n{color:var(--platinum)}

/* ---- waitlist ---- */
.signup{display:flex;gap:10px;flex-wrap:wrap;max-width:460px;margin-top:26px}
.signup input{flex:1 1 240px;padding:13px 16px;border-radius:999px;border:1px solid #33404F;
  background:#0B0F14;color:#EEF1F5;font-family:inherit;font-size:15px}
.signup input::placeholder{color:#6C7A8A}

/* ---- footer ---- */
footer{background:var(--vault);color:#8794A4;padding:52px 0;font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:flex-start}
footer a{color:#AEB8C6;text-decoration:none;display:block;padding:4px 0}
footer a:hover{color:#fff}
footer .cols{display:flex;gap:56px;flex-wrap:wrap}
footer h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#6C7A8A;margin:0 0 10px;font-weight:400}
footer img{height:28px;margin-bottom:12px}

/* ---- doc pages ---- */
.doc{max-width:74ch;padding:64px 0 96px}
.doc h1{font-size:clamp(2rem,4.4vw,2.9rem);letter-spacing:-.025em;margin:0 0 10px;font-weight:600}
.doc .updated{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin:0 0 44px}
.doc h2{font-size:1.35rem;margin:44px 0 12px;letter-spacing:-.015em;font-weight:600}
.doc h3{font-size:1.05rem;margin:28px 0 8px;font-weight:600}
.doc p,.doc li{color:var(--ink-2)}
.doc a{color:var(--brand)}
.doc .callout{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:0 10px 10px 0;padding:18px 22px;margin:26px 0}
.doc .callout p{margin:0;color:var(--ink)}

@media (max-width:860px){
  .hero-grid,.split{grid-template-columns:1fr;gap:36px}
  .hero-single > div{max-width:none}
  .nav .hide-sm{display:none}
  section{padding:64px 0}
}

/* ============ interactive sections ============ */
/* Scroll reveals are an ENHANCEMENT, and are scoped to .js for that reason.
   Hiding content by default and revealing it with script means any failure of
   that script — blocked, errored, still downloading on a bad connection —
   leaves a blank page. 34 elements and 8 of 10 headings were in that state.
   The class is set by an inline script in <head>, before first paint. */
.js [data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.22,.7,.3,1),transform .7s cubic-bezier(.22,.7,.3,1)}
.js [data-reveal].shown{opacity:1;transform:none}
.js [data-reveal][data-delay="1"]{transition-delay:.08s}
.js [data-reveal][data-delay="2"]{transition-delay:.16s}
.js [data-reveal][data-delay="3"]{transition-delay:.24s}

.demo{background:var(--vault-2);border:1px solid var(--line-dark);border-radius:18px;padding:30px 28px}
.demo .cap{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:#8794A4;margin:0 0 22px}
.big{font-size:clamp(2.6rem,7vw,3.8rem);font-weight:600;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums;color:#fff}
.bump{animation:bump .34s cubic-bezier(.2,.8,.3,1)}
@keyframes bump{0%{transform:translateY(4px);opacity:.55}100%{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.bump{animation:none}}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:34px;background:transparent;cursor:grab}
input[type=range]:active{cursor:grabbing}
input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:99px;background:#2B3542}
input[type=range]::-moz-range-track{height:5px;border-radius:99px;background:#2B3542}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;
  background:var(--platinum);border:4px solid var(--vault-2);margin-top:-11px;
  box-shadow:0 0 0 1px #2B3542,0 4px 14px rgba(143,227,232,.35);transition:transform .16s}
input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--platinum);
  border:4px solid var(--vault-2);box-shadow:0 0 0 1px #2B3542}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.09)}

.splitbar{height:12px;border-radius:99px;background:#31404F;overflow:hidden;margin:8px 0 10px}
.splitbar span{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--titanium),var(--platinum));transition:width .3s cubic-bezier(.2,.8,.3,1)}
.rows{display:grid;gap:2px;margin-top:20px}
.line{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;
  border-bottom:1px solid #232A34;font-size:15px}
.line:last-child{border-bottom:0}
.line .k{color:#9AA6B4}
.line .v{font-variant-numeric:tabular-nums;font-weight:600;color:#EEF1F5}
.line.total .v{color:var(--platinum);font-size:1.15rem}

.rung.reached .name{color:#fff}
.rung.reached .dot{box-shadow:0 0 0 4px rgba(255,255,255,.07)}
.rung .dot{transition:box-shadow .3s,transform .3s}
.rung:not(.reached) .dot{opacity:.32;transform:scale(.78)}
.rung:not(.reached) .name{color:#6C7A8A}
.rung:not(.reached) .at{color:#5A6675}

.ringwrap{display:flex;align-items:center;gap:20px;margin-bottom:6px}
.ring{width:74px;height:74px;border-radius:50%;border:7px solid var(--titanium);flex:none;
  transition:border-color .35s}

/* leaderboard */
.scopes{display:flex;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.scope{background:transparent;border:1px solid #2B3542;color:#9AA6B4;border-radius:999px;
  padding:7px 16px;font:inherit;font-size:14px;cursor:pointer;transition:.18s}
.scope:hover{border-color:#42505F;color:#D7DEE7}
.scope.on{background:var(--platinum);border-color:var(--platinum);color:#08222A;font-weight:600}
.board-row{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid #232A34;
  animation:slidein .42s cubic-bezier(.22,.7,.3,1) both}
@keyframes slidein{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.board-row{animation:none}}
.board-row .pos{font-family:var(--mono);font-size:12px;color:#7E8B9B;width:22px;flex:none}
.board-row .who{font-weight:600;color:#EEF1F5;font-size:15px}
.board-row .meta{color:#8794A4;font-size:13px}
.board-row .chip{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 10px;border-radius:99px;border:1px solid}

/* feed */
.post{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px;
  display:grid;gap:10px;transition:box-shadow .3s,transform .3s}
.post.pulse{box-shadow:0 0 0 2px rgba(27,111,212,.22);transform:translateY(-2px)}
.post .amt{font-size:1.5rem;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.post .to{color:var(--ink-2);font-size:.95rem}
.post .foot{display:flex;align-items:center;gap:12px;margin-top:4px}
.give-too{border:1px solid var(--line);background:#fff;color:var(--brand);border-radius:999px;
  padding:8px 16px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:.18s}
.give-too:hover{border-color:var(--brand);background:#F2F7FE}
.give-too.done{color:var(--ink-3);border-color:var(--line);background:#F4F6F8;cursor:default}
.post .givers{margin-left:auto;color:var(--ink-3);font-size:13px;font-variant-numeric:tabular-nums}
.nolike{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-top:26px}

/* ---- the vault demo ---- */
.submit-row{margin-top:22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.btn-give{background:var(--platinum);color:#08222A;border:0;border-radius:999px;
  padding:13px 26px;font:inherit;font-size:15px;font-weight:600;cursor:pointer;
  font-variant-numeric:tabular-nums;transition:transform .16s,box-shadow .16s}
.btn-give:hover{transform:translateY(-1px);box-shadow:0 8px 22px -10px rgba(143,227,232,.6)}
.btn-give:active{transform:none}
.submit-note{color:#7E8B9B;font-size:13px}

[data-stage]{max-height:0;opacity:0;overflow:hidden;
  transition:max-height .75s cubic-bezier(.22,.7,.3,1),opacity .5s ease .12s}
[data-stage].open{max-height:1400px;opacity:1}
@media (prefers-reduced-motion:reduce){[data-stage]{transition:none}}

.vault-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.vault-head .bal{font-size:2.4rem;font-weight:600;color:var(--platinum);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.grid-pieces{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));margin-top:20px}
.piece{background:#10151C;border:1px solid #232A34;border-radius:13px;padding:16px 12px;
  display:grid;gap:5px;justify-items:center;cursor:pointer;font:inherit;color:#EEF1F5;
  transition:border-color .18s,transform .18s,opacity .18s}
.piece:hover:not(:disabled){border-color:var(--platinum);transform:translateY(-2px)}
.piece:disabled{cursor:default;opacity:.4}
.piece.has{opacity:1;border-color:var(--titanium);background:#141B26}
.piece .ico{font-size:26px;line-height:1}
.piece .nm{font-size:13px;font-weight:600}
.piece .cr{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:#8794A4}
.piece.has .cr{color:var(--titanium)}

.shelf{margin-top:22px;padding:16px 18px;border:1px dashed #2B3542;border-radius:13px;
  display:flex;gap:12px;align-items:center;min-height:62px;flex-wrap:wrap;transition:border-color .3s}
.shelf.flash{border-color:var(--platinum)}
.shelf .trophy{font-size:26px;animation:pop .45s cubic-bezier(.2,.9,.3,1) both}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.shelf .trophy{animation:none}}
.shelf .empty{color:#6C7A8A;font-size:14px}
.vault-hint{color:#8794A4;font-size:13.5px;margin:16px 0 0}

/* ---- employer match toggle ---- */
.toggle{display:flex;align-items:center;gap:12px;margin-top:18px;cursor:pointer;
  padding:12px 14px;border:1px solid #232A34;border-radius:12px;transition:border-color .2s}
.toggle:hover{border-color:#3A4756}
.toggle input{appearance:none;-webkit-appearance:none;width:42px;height:24px;border-radius:99px;
  background:#2B3542;position:relative;cursor:pointer;flex:none;transition:background .22s;margin:0}
.toggle input::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;
  border-radius:50%;background:#8794A4;transition:transform .22s,background .22s}
.toggle input:checked{background:rgba(143,227,232,.28)}
.toggle input:checked::after{transform:translateX(18px);background:var(--platinum)}
.toggle input:focus-visible{outline:2px solid var(--platinum);outline-offset:3px}
.toggle .tl{font-size:14px;color:#D7DEE7;line-height:1.35}
.toggle .tl small{display:block;color:#7E8B9B;font-size:12.5px}
.splitbar{display:flex}
.splitbar span{display:block;height:100%;border-radius:99px;transition:width .35s cubic-bezier(.2,.8,.3,1)}
.splitbar [data-bar]{background:linear-gradient(90deg,var(--titanium),var(--platinum))}
.splitbar [data-bar-match]{background:repeating-linear-gradient(45deg,#3F7F86 0 6px,#356B72 6px 12px);
  margin-left:2px}
.line.match .k{color:var(--platinum)}
.line.match .v{color:var(--platinum)}

/* ---- standings ---- */
.standing-fig{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.standing-ring{width:66px;height:66px;border-radius:50%;border:7px solid var(--titanium);flex:none;
  transition:border-color .35s}
.standing-pos{font-size:clamp(2.4rem,6vw,3.4rem);font-weight:600;letter-spacing:-.03em;
  line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.standing-of{color:#9AA6B4;font-size:15px;margin-top:4px}
.move{margin-top:14px;display:inline-flex;align-items:center;gap:7px;color:var(--platinum);
  font-size:14px;font-weight:600}
.move.flash{animation:moveIn .5s cubic-bezier(.2,.9,.3,1) both}
@keyframes moveIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.move.flash{animation:none}}

/* ---- the like button that declines ---- */
.fake-like{border:1px solid var(--line);background:#fff;color:var(--ink-3);border-radius:999px;
  padding:8px 16px;font:inherit;font-size:14px;cursor:pointer;transition:.2s}
.fake-like:hover{border-color:var(--ink-3)}
.fake-like.refused{background:#F4F6F8;color:var(--ink-2);border-color:var(--line);
  animation:shake .34s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{10%,90%{transform:translateX(-1px)}30%,70%{transform:translateX(2px)}
  50%{transform:translateX(-2px)}}
@media (prefers-reduced-motion:reduce){.fake-like.refused{animation:none}}

/* ============ mobile ============
   Checked at 375px, which had never been done until now. Two real faults:
   the header CTA wrapped onto three lines and rendered as a circle, and
   almost every control sat under the 44px minimum touch target. */
/* Long nav labels get a short form on narrow screens. Without this the
   "List your organization" button pushed the page 30px wide and the whole
   site scrolled sideways. */
.btn .sm{display:none}
@media (max-width:600px){
  .btn .lg{display:none}
  .btn .sm{display:inline}
  /* The logo is a link home and was the last sub-44px control on the page. */
  .site-head .wrap > a{display:flex;align-items:center;min-height:44px}
  .site-head{padding:14px 0}
  .site-head img{height:28px}
  .nav{gap:14px}
  .nav a{padding:10px 0}
  /* The label is what wrapped. Keeping it on one line and trimming the
     padding is enough; hiding the only call to action would cost more. */
  .btn{white-space:nowrap;font-size:14px;padding:11px 16px}
  .nav .btn{padding:11px 14px}

  /* 44px is the floor for anything a thumb has to hit. */
  .btn,.btn-give,.give-too,.fake-like,.scope,.piece{min-height:44px}
  .give-too,.fake-like{padding:11px 18px}
  .scope{padding:11px 18px}
  input[type=range]{height:48px}
  input[type=range]::-webkit-slider-thumb{width:30px;height:30px;margin-top:-13px}
  input[type=range]::-moz-range-thumb{width:30px;height:30px}

  .hero{padding:44px 0 60px}
  .hero h1{font-size:clamp(2rem,9vw,2.6rem)}
  .demo{padding:22px 18px}
  .big{font-size:clamp(2.1rem,11vw,2.8rem)}
  .grid-pieces{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:9px}
  .post .foot{flex-wrap:wrap;gap:8px}
  .post .givers{margin-left:0;width:100%}
  .standing-fig{gap:14px}
  .signup{max-width:none}
  .signup input{min-height:44px}
  footer .wrap{gap:32px}
  footer .cols{gap:32px}
  /* Footer links are the last thing a thumb reaches for and were the
     smallest targets on the page. */
  footer a{padding:11px 0;min-height:44px;display:flex;align-items:center}
  footer > .wrap > div > a{min-height:44px}
}

/* ---- waitlist feedback ---- */
.wl-status{margin-top:16px;font-size:14.5px;max-width:46ch}
.wl-status[data-tone="good"]{color:var(--platinum)}
.wl-status[data-tone="bad"]{color:#F2A0A0}
.wl-status[data-tone="note"]{color:#7E8B9B}

/* ---- standings neighbours ---- */
.standing-demo{padding:30px 28px}
.standing-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.neighbours{margin-top:22px;border-top:1px solid #232A34}
.nb{display:flex;align-items:center;gap:14px;padding:13px 4px;border-bottom:1px solid #232A34;
  animation:slidein .4s cubic-bezier(.22,.7,.3,1) both}
@media (prefers-reduced-motion:reduce){.nb{animation:none}}
.nb-pos{font-family:var(--mono);font-size:12px;color:#7E8B9B;width:60px;flex:none;
  font-variant-numeric:tabular-nums}
.nb-who{color:#D7DEE7;font-size:15px;font-weight:500}
.nb-meta{color:#7E8B9B;font-size:13px;margin-left:auto}
.nb-chip{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid;border-radius:99px;padding:3px 9px}
.nb.me{background:rgba(143,227,232,.07);margin:0 -12px;padding-left:16px;padding-right:16px;
  border-radius:10px;border-bottom-color:transparent}
.nb.me .nb-who{color:#fff;font-weight:600}
.nb.me .nb-pos{color:var(--platinum)}


/* ---- vault presets (the More info page) ---- */
.give-presets{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:26px}
.preset-label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#8794A4;margin-right:2px}
.preset{background:transparent;border:1px solid #2B3542;color:#D7DEE7;border-radius:999px;
  padding:11px 20px;font:inherit;font-size:15px;font-weight:600;cursor:pointer;
  font-variant-numeric:tabular-nums;transition:.18s}
.preset:hover{border-color:var(--platinum);color:#fff;transform:translateY(-1px)}
.preset:active{transform:none}
@media (max-width:600px){.preset{min-height:44px}}

/* One card, so no two-column split to leave a dead half. */
.give-solo{max-width:560px}
@media (max-width:860px){.give-solo{max-width:none}}

/* ---- FAQ ---- */
.faq{max-width:70ch;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:20px 34px 20px 0;font-size:1.05rem;font-weight:600;
  list-style:none;position:relative;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
/* A rotating chevron rather than the default triangle, drawn in CSS so it
   inherits the accent and needs no asset. */
.faq summary::after{content:'';position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:translateY(-70%) rotate(45deg);transition:transform .22s}
.faq details[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.faq summary:hover{color:var(--brand)}
.faq summary:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:6px}
.faq details p{margin:0 0 22px;color:var(--ink-2);max-width:64ch}
.faq details a{color:var(--brand)}
.faq-more{margin-top:28px;color:var(--ink-3);font-size:.95rem}
.faq-more a{color:var(--brand)}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}
@media (max-width:600px){.faq summary{padding:18px 30px 18px 0;font-size:1rem}}