/* ===========================================================
   Fundraise Gap Scan
   Editorial: warm paper, serif questions, one ink accent.
   Reads like a research house, not a form builder.
   =========================================================== */
:root{
  color-scheme: light;

  --paper:#fbfaf8;
  --paper-2:#f3f1ec;
  --paper-3:#f7f5f1;
  --white:#ffffff;

  --ink:#1c1b19;
  --ink2:#4a4741;
  --muted:#8a857c;

  --rule:#e4e0d8;
  --rule-soft:#ece9e2;
  --field:#d5d0c5;

  --accent:#16324f;        /* deep ink blue — the only colour */
  --accent-press:#1e4368;
  --accent-wash:#eef1f5;
  --red:#9c2c20;
  --green:#3f6b4a;

  --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:14px;

  --serif:ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16.5px; line-height:1.55;
  letter-spacing:-.005em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
::selection{background:#dce4ee}

a{color:var(--accent)}
a:hover{text-decoration:underline}

.wrap{max-width:760px;margin:0 auto;padding:0 32px}
.wrap.wide{max-width:980px}
.center{text-align:center}
.hidden{display:none !important}
.muted{color:var(--muted)}

h1,h2,h3{font-family:var(--serif);font-weight:600;color:var(--ink);margin:0 0 .32em;letter-spacing:-.018em}
h1{font-size:clamp(38px,5.6vw,58px);line-height:1.06}
h2{font-size:clamp(30px,4.2vw,44px);line-height:1.1}
h3{font-size:21px;line-height:1.3;letter-spacing:-.012em}
h4{font-family:var(--sans);font-size:16.5px;font-weight:600;letter-spacing:-.012em;margin:0 0 .35em}
p{margin:0 0 1em}
.lede{font-size:clamp(17px,1.9vw,19.5px);color:var(--ink2);line-height:1.52;letter-spacing:-.008em}

.eyebrow{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px}
.sc-tag{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}

/* ---------- top bar ---------- */
/* One backdrop-filter layer on the page, promoted to its own compositing
   layer. Two stacked blurred sticky elements caused white repaint flashes
   while scrolling — the progress rail below is deliberately opaque. */
.topbar{
  position:sticky;top:0;z-index:50;background:rgba(251,250,248,.92);
  backdrop-filter:saturate(140%) blur(16px);-webkit-backdrop-filter:saturate(140%) blur(16px);
  border-bottom:1px solid var(--rule);
  transform:translateZ(0);will-change:transform;
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:56px}
.logo{display:inline-flex;align-items:baseline;gap:9px;font-family:var(--serif);font-size:17px;font-weight:600;
  letter-spacing:-.015em;color:var(--ink)}
.logo .mk{width:6px;height:6px;border-radius:50%;flex:none;background:var(--accent);transform:translateY(-3px)}
.tnav{display:flex;align-items:center;gap:12px}
.tlink{font-size:12px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
@media(max-width:540px){.tnav{display:none}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-size:15.5px;font-weight:500;letter-spacing:-.005em;
  padding:12px 24px;border:1px solid transparent;border-radius:var(--r-sm);
  background:var(--accent);color:#fff;cursor:pointer;
  transition:background .16s var(--ease), opacity .16s var(--ease);
}
.btn:hover{background:var(--accent-press);text-decoration:none}
.btn:active{opacity:.85}
.btn.lg{padding:14px 30px;font-size:16.5px}
.btn.ghost{background:transparent;color:var(--ink2);border-color:var(--field)}
.btn.ghost:hover{background:var(--paper-2)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ---------- surfaces ---------- */
.card{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);padding:26px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.g2,.g3{grid-template-columns:1fr}}
.section{padding:64px 0;border-top:1px solid var(--rule)}
.hero{padding:82px 0 48px}
.hero h1{max-width:15ch}
.hero .lede{max-width:54ch}
.pill{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex:none}
.microcopy{font-size:14px;color:var(--muted);margin-top:16px}

.numlist{counter-reset:n;display:grid;margin-top:30px;border-top:1px solid var(--rule)}
.numitem{display:flex;gap:24px;align-items:flex-start;padding:24px 0;border-bottom:1px solid var(--rule)}
.numitem .n{counter-increment:n;flex:none;font-family:var(--serif);font-size:17px;color:var(--muted);
  padding-top:1px;min-width:22px;font-variant-numeric:tabular-nums}
.numitem .n::before{content:counter(n)}
.numitem h4{margin:0 0 5px}
.numitem p{margin:0;color:var(--ink2);font-size:15.5px;line-height:1.5;max-width:62ch}

footer{border-top:1px solid var(--rule);padding:28px 0 46px;color:var(--muted);font-size:13px}

/* ---------- progress ---------- */
.progress{
  position:sticky;top:56px;z-index:40;background:var(--paper);   /* opaque on purpose — see .topbar */
  padding:13px 0 12px;border-bottom:1px solid var(--rule);
  transform:translateZ(0);
}
.pbar{height:2px;background:var(--rule);overflow:hidden}
.pbar i{display:block;height:100%;width:0;background:var(--accent);transition:width .5s var(--ease)}
.pmeta{display:flex;justify-content:space-between;gap:16px;margin-top:9px;font-size:12px;font-weight:500;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}

/* ---------- form ---------- */
.fstep{padding:56px 0 8px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important}}
.fstep h2{margin-bottom:14px}
.fstep .sub{color:var(--ink2);margin-bottom:46px;font-size:17.5px;line-height:1.55;max-width:56ch}

.q{padding:30px 0;scroll-margin-top:140px}
.q + .q{border-top:1px solid var(--rule-soft)}
.qlabel{display:block;position:relative;padding-left:40px;font-family:var(--serif);font-size:22px;font-weight:500;
  letter-spacing:-.014em;line-height:1.3;margin-bottom:8px;color:var(--ink)}
.qn{position:absolute;left:0;top:.42em;font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--muted);
  font-variant-numeric:tabular-nums;letter-spacing:.04em}
.help{font-size:15px;line-height:1.5;color:var(--muted);margin:0 0 18px 40px;max-width:58ch}
.qbody{margin-left:40px}
@media(max-width:600px){
  .help,.qbody{margin-left:0}
  .qlabel{padding-left:28px;font-size:20px}
  .qn{font-size:12px}
}
.opt{display:inline;font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-left:10px;vertical-align:2px}

input[type=text],input[type=url],input[type=email],input[type=number],textarea,select{
  width:100%;font-family:var(--sans);font-size:16.5px;letter-spacing:-.005em;color:var(--ink);
  background:var(--white);border:1px solid var(--field);border-radius:var(--r-sm);
  padding:13px 15px;outline:none;transition:border-color .14s var(--ease), box-shadow .14s var(--ease);
}
input::placeholder,textarea::placeholder{color:#b5b0a6}
textarea{min-height:106px;resize:vertical;line-height:1.55}
input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(22,50,79,.12)}
input[type=number]{-moz-appearance:textfield;font-variant-numeric:tabular-nums}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.prefix{position:relative}
.prefix>span{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:16px;pointer-events:none}
.prefix input{padding-left:30px}
.suffix{display:flex;align-items:center;gap:12px}
.suffix .unit{color:var(--muted);font-size:14.5px;white-space:nowrap}

/* choice rows */
.choices{display:grid;gap:7px}
.choices.two{grid-template-columns:1fr 1fr}
@media(max-width:680px){.choices.two{grid-template-columns:1fr}}
.choice{
  display:flex;gap:12px;align-items:flex-start;cursor:pointer;background:var(--white);
  border:1px solid var(--field);border-radius:var(--r-sm);padding:13px 15px;font-size:15.5px;
  transition:border-color .14s var(--ease), background .14s var(--ease);
}
.choice:hover{border-color:#b9b2a4;background:var(--paper-3)}
.choice input{
  appearance:none;-webkit-appearance:none;flex:none;margin:2px 0 0;width:18px;height:18px;border-radius:50%;
  border:1px solid #b9b2a4;background:var(--white);position:relative;cursor:pointer;
  transition:background .14s var(--ease), border-color .14s var(--ease);
}
.choice input[type=checkbox]{border-radius:4px}
.choice input:checked{background:var(--accent);border-color:var(--accent)}
.choice input[type=radio]:checked::after{content:"";position:absolute;inset:4.5px;border-radius:50%;background:#fff}
.choice input[type=checkbox]:checked::after{content:"";position:absolute;left:6px;top:2.8px;width:4.2px;height:8.6px;
  border:1.8px solid #fff;border-top:0;border-left:0;transform:rotate(45deg)}
.choice:has(input:checked){border-color:var(--accent);background:var(--accent-wash)}
.choice b{font-weight:500}
.choice small{display:block;color:var(--muted);font-size:13.5px;line-height:1.4;margin-top:2px}

.err{color:var(--red);font-size:14.5px;margin-top:10px}

/* ---------- live benchmark ---------- */
.bench{margin-top:16px;padding-top:15px;border-top:1px solid var(--rule-soft);
  animation:benchIn .32s var(--ease) both}
@keyframes benchIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.bench-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:11px}
.bench-head .bl{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.bench-head .bv{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--accent);
  font-variant-numeric:tabular-nums}
.bench-scale{position:relative;height:3px;background:var(--rule);margin:0 0 7px}
.bench-scale span{position:absolute;top:0;width:1px;height:3px;background:#cec8bb}
.bench-scale i{position:absolute;top:-4px;width:11px;height:11px;border-radius:50%;background:var(--accent);
  border:2px solid var(--paper);margin-left:-5.5px;transition:left .35s var(--ease)}
.bench-ticks{position:relative;height:15px;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.bench-ticks span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.bench-note{margin:9px 0 0;font-size:14.5px;line-height:1.45;color:var(--ink2)}
.bench-note b{font-weight:600;color:var(--ink)}
.bench-note.warn b{color:var(--red)}
.bench-note.good b{color:var(--green)}

.filebox{border:1px solid var(--field);border-radius:var(--r-lg);padding:28px 24px;text-align:center;background:var(--white)}
.filebox p{margin:0;color:var(--ink2);font-size:15px}
.filebox p strong{font-weight:600;color:var(--ink)}
.filebox input[type=file]{font-family:var(--sans);font-size:14px;color:var(--ink2);margin-top:14px;max-width:100%}
.filebox input[type=file]::file-selector-button{
  font:inherit;font-size:14px;color:var(--accent);background:var(--paper-2);border:1px solid var(--rule);
  border-radius:var(--r-sm);padding:7px 15px;margin-right:12px;cursor:pointer;transition:background .14s var(--ease)}
.filebox input[type=file]::file-selector-button:hover{background:var(--paper-3)}

.callout{background:var(--white);border:1px solid var(--rule);border-left:2px solid var(--accent);
  border-radius:0 var(--r-md) var(--r-md) 0;padding:20px 24px;margin-bottom:36px}
.callout p{margin:0;font-size:15.5px;color:var(--ink2);line-height:1.55}
.callout strong{color:var(--ink);font-weight:600}
.contactbox{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);padding:24px;margin-bottom:12px}
.contactbox .q{padding:0}
.contactbox .qlabel{padding-left:0;font-size:20px}

.navrow{display:flex;justify-content:space-between;gap:14px;align-items:center;
  padding:28px 0 88px;border-top:1px solid var(--rule);margin-top:30px}
.savenote{font-size:12px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
@media(max-width:600px){.savenote{display:none}}