/* Millennium Mams' - Donation. Public pages. */
:root{
  --navy:#213568;
  --navy-700:#1a2a54;
  --navy-900:#111c38;
  --red:#dd2227;
  --red-soft:#fdeceb;
  --ink:#171a21;
  --body:#474f5c;
  --muted:#727a88;
  --muted-2:#98a0ad;
  --line:#e3e7ef;
  --line-2:#ccd3e0;
  --tint:#eef1f8;
  --page:#f6f7fb;
  --surface:#ffffff;
  --ok:#0a7d33;
  --radius:14px;
  --radius-sm:10px;

  box-sizing:border-box;
  padding-top:env(safe-area-inset-top, 0px);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(env(safe-area-inset-top, 0px) + 20px);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--page);color:var(--body);
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size:15.5px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
h1,h2,h3{font-family:'Plus Jakarta Sans',Inter,sans-serif;color:var(--navy);margin:0;line-height:1.2;letter-spacing:-.01em}
a{color:var(--navy)}
:where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.wrap{width:min(680px, 100% - 32px);margin-inline:auto}
@media (max-width:520px){.wrap{width:min(680px, 100% - 22px)}}

/* ---------- header ---------- */
.site-head{background:var(--surface);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0}
.logo{display:block}
.logo img{height:38px;width:auto;display:block}
@media (max-width:520px){.logo img{height:29px}}
.secure-note{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.secure-note svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}

/* ---------- intro + amount ---------- */
.intro{padding:30px 0 0}
.intro h1{font-size:clamp(1.55rem,5vw,2rem);margin-bottom:8px}
.intro p{margin:0;max-width:52ch;color:var(--body);font-size:15px}

.amount-card{
  margin:22px 0 26px;padding:18px 20px;border-radius:var(--radius);
  background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.amount-card .what{font-size:13.5px;color:#c3cde6}
.amount-card .who{font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:16px;color:#fff;margin-top:2px}
.amount-card .sum{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:26px;letter-spacing:-.02em;white-space:nowrap}

/* ---------- step rail ---------- */
.rail{display:none}
.js .rail{display:block;margin-bottom:20px}
.rail-track{height:3px;background:var(--line);border-radius:3px;overflow:hidden}
.rail-fill{height:100%;width:33.33%;background:var(--navy);border-radius:3px;transition:width .3s ease}
.rail-steps{display:flex;justify-content:space-between;margin-top:10px;gap:8px}
.rail-steps li{
  list-style:none;flex:1;background:none;border:0;border-radius:0;padding:0;margin:0;max-width:none;
}
.rail-steps li:nth-child(2){text-align:center}
.rail-steps li:last-child{text-align:right}
.rail-step{
  font:inherit;font-size:12.5px;color:var(--muted-2);background:none;border:0;padding:4px 2px;
  cursor:pointer;border-radius:6px;text-align:inherit;
}
.rail-step:hover:not([disabled]){color:var(--navy);text-decoration:underline}
.rail-step[disabled]{cursor:default;opacity:.55}
.rail-step.is-on{color:var(--navy);font-weight:600}
.rail-step.is-done{color:var(--body)}
.rail-steps li:nth-child(2){text-align:center}
.rail-steps li:last-child{text-align:right}
@media (prefers-reduced-motion:reduce){.rail-fill{transition:none}}

/* ---------- cards + fields ---------- */
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;margin-bottom:18px}
.js .step[hidden]{display:none}
.step > h2{font-size:1.15rem;margin-bottom:4px}
.step > .lead{margin:0 0 22px;font-size:14px;color:var(--muted)}
@media (max-width:520px){.step{padding:22px 18px;border-radius:12px}}

.f{margin-bottom:18px}
.f:last-child{margin-bottom:0}
.step > .f:last-of-type{margin-bottom:0}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.pair .f{margin-bottom:0}
@media (max-width:560px){.pair{grid-template-columns:1fr;gap:18px}}

.lab{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:7px}
.lab .req{color:var(--red);margin-left:3px}
.lab .opt{font-weight:400;color:var(--muted-2);font-size:13px}

input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],select,textarea{
  width:100%;padding:13px 15px;font:inherit;font-size:16px;color:var(--ink);
  background:var(--surface);border:1.5px solid var(--line-2);border-radius:var(--radius-sm);
  transition:border-color .15s, box-shadow .15s;
}
/* A native date input sizes itself to its content and keeps its own chrome,
   so it needs bringing into line with the other fields by hand. */
input[type=date]{
  -webkit-appearance:none;appearance:none;
  min-height:52px;line-height:1.2;font-variant-numeric:tabular-nums;
}
input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0}
input[type=date]::-webkit-calendar-picker-indicator{
  cursor:pointer;opacity:.55;padding:4px;margin-left:auto;
}
input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1}
input[type=date]:focus::-webkit-calendar-picker-indicator{opacity:1}

input:hover,select:hover,textarea:hover{border-color:var(--muted-2)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 4px var(--tint)}
textarea{min-height:100px;resize:vertical;line-height:1.55}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
input[readonly]{background:var(--page);color:var(--body)}
.stacked input + input{margin-top:10px}
select{
  appearance:none;padding-right:42px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 15px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
input[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--red);background:var(--red-soft)}
input[aria-invalid="true"]:focus,select[aria-invalid="true"]:focus{box-shadow:0 0 0 4px rgba(221,34,39,.12)}
.err{display:block;color:var(--red);font-size:13px;margin-top:6px;font-weight:500}
.err:empty{display:none}
.hint{display:block;font-size:12.8px;color:var(--muted-2);margin-top:6px}

/* checkboxes as tappable rows */
.cbx{display:flex;gap:12px;align-items:flex-start;padding:11px 13px;border:1.5px solid var(--line);border-radius:var(--radius-sm);margin-bottom:9px;cursor:pointer}
.cbx:hover{border-color:var(--line-2);background:var(--page)}
.cbx input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--navy)}
.cbx label{font-size:14.5px;color:var(--ink);cursor:pointer}
.cbx label .opt{color:var(--muted-2)}
.cbx:has(input:checked){border-color:var(--navy);background:var(--tint)}

/* the mandatory commitment */
.commit{margin:22px 0 18px;padding:18px 20px;border-radius:var(--radius-sm);background:var(--tint);border:1.5px solid #cbd5ea}
.commit-head{margin:0 0 6px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:15px;color:var(--navy)}
.commit-body{margin:0 0 14px;font-size:14px;color:var(--body)}
.commit .cbx{background:var(--surface);margin-bottom:0;border-color:#cbd5ea;align-items:center}
.commit .cbx input{margin-top:0}
.commit.is-bad{background:var(--red-soft);border-color:#f0b9b7}
.commit.is-bad .commit-head{color:var(--red)}

/* ---------- review step ---------- */
.review{border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;margin-bottom:20px}
.review div{display:flex;gap:14px;padding:11px 15px;border-bottom:1px solid var(--line);font-size:14.5px}
.review div:last-child{border-bottom:0}
.review dt{flex:0 0 40%;color:var(--muted);margin:0}
.review dd{margin:0;color:var(--ink);word-break:break-word}
.pay-method{display:flex;align-items:center;gap:12px;padding:15px;border:1.5px solid var(--navy);background:var(--tint);border-radius:var(--radius-sm)}
.pay-method input{width:20px;height:20px;accent-color:var(--navy);flex:none}
.pay-method label{font-weight:600;color:var(--ink);font-size:15px}
.pay-method .note{display:block;font-weight:400;color:var(--muted);font-size:13px;margin-top:2px}
.privacy{font-size:13px;color:var(--muted);margin:16px 0 0}

/* ---------- actions ---------- */
.actions{display:flex;gap:12px;align-items:center;margin-top:22px}
.actions .spacer{flex:1}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-size:16px;font-weight:600;font-family:'Plus Jakarta Sans',sans-serif;
  padding:14px 26px;border-radius:var(--radius-sm);border:1.5px solid var(--line-2);
  background:var(--surface);color:var(--navy);cursor:pointer;min-height:50px;
}
.btn:hover{background:var(--page)}
.btn-primary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-700)}
.btn-primary:disabled{opacity:.65;cursor:progress}
.btn-pay,.btn-link{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:16px;font-weight:600;
  padding:14px 26px;border-radius:var(--radius-sm);border:0;background:var(--navy);color:#fff;
  text-decoration:none;cursor:pointer;min-height:50px;
}
.btn-pay:hover,.btn-link:hover{background:var(--navy-700)}

/* sticky action bar on phones */
.sticky-bar{display:none}
@media (max-width:700px){
  .js .sticky-bar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;gap:12px;align-items:center;
    background:var(--surface);border-top:1px solid var(--line);
    padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    box-shadow:0 -6px 20px -14px rgba(17,28,56,.5);
  }
  .sticky-bar .sum{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:17px;color:var(--navy)}
  .sticky-bar .sum small{display:block;font-weight:400;font-size:11.5px;color:var(--muted)}
  .sticky-bar .btn{flex:1;padding:14px 18px}
  .js .actions{display:none}
  .js main{padding-bottom:90px}
}

.form-error{
  display:none;margin:0 0 18px;padding:13px 16px;border-radius:var(--radius-sm);
  background:var(--red-soft);border-left:4px solid var(--red);color:var(--ink);font-size:14.5px;
}
.form-error.show{display:block}

/* ---------- result, error, handoff ---------- */
.done{max-width:520px;margin:54px auto 80px;text-align:center;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:40px 30px}
.done .tick{width:60px;height:60px;border-radius:50%;background:#e7f6ec;color:var(--ok);
  display:grid;place-items:center;font-size:29px;margin:0 auto 20px}
.done .tick.cross{background:var(--red-soft);color:var(--red)}
.done h1{font-size:1.6rem;margin-bottom:12px}
.done p{font-size:15px}
.done .ref{display:inline-block;margin:12px 0 8px;padding:9px 16px;background:var(--page);
  border:1px solid var(--line);border-radius:8px;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
.done .small{font-size:13.5px;color:var(--muted)}
.redirect-note{margin:24px auto 0;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.redirect-note strong{font-variant-numeric:tabular-nums;color:var(--ink);display:inline-block;min-width:1.2em;text-align:center}
.redirect-note a{margin-left:8px}
body.handoff{display:grid;place-items:center;min-height:100vh;text-align:center;padding:24px}
.handoff-box h1{font-size:1.4rem;margin-bottom:8px}
.handoff-box p{color:var(--muted)}
.spinner{width:34px;height:34px;margin:0 auto 20px;border-radius:50%;
  border:3px solid var(--line);border-top-color:var(--navy);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation:none}}

/* ---------- footer ---------- */
.site-foot{background:var(--surface);border-top:1px solid var(--line);margin-top:40px}
.site-foot .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:20px 0;font-size:13.5px;color:var(--muted)}
.ascent{display:inline-flex;align-items:center;text-decoration:none}
.ascent img{height:34px;width:auto;display:block}
@media (max-width:700px){
  /* The sticky bar is fixed over the page, so the footer needs room to clear it
     rather than sitting underneath. */
  .site-foot .wrap{padding-bottom:calc(104px + env(safe-area-inset-bottom, 0px));gap:18px}
  .site-foot .ascent{margin-top:2px}
}

/* ---------- new or existing member ---------- */
.choice{border:0;padding:0;margin:22px 0 18px;min-width:0}
.choice legend{padding:0;margin-bottom:9px}
.segmented{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.segmented input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.segmented label{
  display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;
  padding:15px 14px;border:1.5px solid var(--line-2);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--ink);font-size:15.5px;font-weight:500;cursor:pointer;
  min-height:54px;transition:border-color .15s, background .15s;
}
.segmented label:hover{border-color:var(--muted-2)}
.segmented input:checked + label{
  border-color:var(--navy);background:var(--tint);color:var(--navy);font-weight:600;
  box-shadow:inset 0 0 0 1px var(--navy);
}
.segmented input:focus-visible + label{outline:2px solid var(--navy);outline-offset:2px}
.choice.is-bad .segmented label{border-color:var(--red)}
.choice.is-bad legend{color:var(--red)}
@media (max-width:420px){.segmented{grid-template-columns:1fr}}

/* Without JavaScript both branches are simply shown. */
html:not(.js) [data-member]{display:block}
@media (prefers-reduced-motion:reduce){.segmented label{transition:none}}

/* ---------- a note with no questions in it ---------- */
.notice{
  margin:24px 0 4px;padding:20px 22px;border-radius:var(--radius-sm);
  background:var(--page);border:1px solid var(--line);
}
.notice-head{
  margin:0 0 12px;font-family:'Plus Jakarta Sans',Inter,sans-serif;font-weight:700;
  font-size:15px;color:var(--navy);
}
.notice-sub{margin:0 0 4px;font-weight:600;font-size:14px;color:var(--ink)}
.notice p:not(.notice-head):not(.notice-sub){margin:0 0 14px;font-size:14px;color:var(--body)}
.notice p:last-child{margin-bottom:0}

/* An intro line that should hold together on one row where there is room. */
.intro p.wide{max-width:none}

/* Room under an intro that is followed straight by a card, rather than by the
   amount panel the donation page has. */
.intro-plain{padding-bottom:22px}

/* Paired fields align from the top, so a hint under one of them does not drag
   the other's input down to meet it. Keep paired labels to one line and the
   inputs stay level; that is why the long ones were shortened rather than
   bottom aligned. */