/* ============================================================
   SPONSOR PAGE — DONATION FORM + TIER LADDER
   ============================================================ */

.donation-form{
  max-width:44rem;margin-inline:auto;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:clamp(1.75rem,4vw,3rem);
  box-shadow:var(--shadow-md);
}
.df-header{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:1.5rem;
  padding-bottom:1.5rem;
  border-bottom:1px solid var(--color-divider);
}
@media (max-width:600px){.df-header{flex-direction:column;align-items:flex-start}}

/* Recurring toggle */
.switch{
  display:inline-flex;align-items:center;gap:.75rem;
  cursor:pointer;font-size:.9rem;
}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch-track{
  width:42px;height:24px;
  background:var(--color-surface-offset);
  border:1px solid var(--color-border);
  border-radius:var(--radius-full);
  position:relative;
  transition:background var(--transition-interactive);
}
.switch-thumb{
  position:absolute;top:2px;left:2px;
  width:18px;height:18px;
  background:var(--color-text-faint);
  border-radius:50%;
  transition:transform var(--transition-interactive), background var(--transition-interactive);
}
.switch input:checked + .switch-track{background:var(--color-accent)}
.switch input:checked + .switch-track .switch-thumb{
  transform:translateX(18px);
  background:var(--color-primary);
}
.switch-label{color:var(--color-text-muted);font-weight:500}

/* Presets */
.df-presets{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.75rem;
  margin-top:1.75rem;
}
@media (max-width:500px){.df-presets{grid-template-columns:repeat(2,1fr)}}
.preset{
  padding:1rem 1rem;
  font-family:var(--font-display);
  font-size:1.15rem;font-weight:400;
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  color:var(--color-text);
  cursor:pointer;
  transition:all var(--transition-interactive);
}
.preset:hover{border-color:var(--color-accent);color:var(--color-accent)}
.preset[aria-pressed="true"]{
  background:var(--color-accent);
  border-color:var(--color-accent);
  color:var(--color-primary);
  font-weight:500;
}

/* Custom amount */
.df-custom{margin-top:1.25rem}
.df-label{
  display:block;
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-text-muted);
  font-weight:500;
  margin-bottom:.5rem;
}
.df-input-wrap{
  display:flex;align-items:center;
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  background:var(--color-surface-2);
  overflow:hidden;
  transition:border-color var(--transition-interactive);
}
.df-input-wrap:focus-within{border-color:var(--color-accent)}
.df-input-prefix{
  padding:0 1rem;
  font-family:var(--font-display);
  color:var(--color-text-muted);
  font-size:1.1rem;
}
.df-input-wrap input{
  flex:1;
  padding:.85rem 1rem .85rem 0;
  border:none;background:transparent;
  font-family:var(--font-display);
  font-size:1.15rem;
  outline:none;
  min-width:0;
}

/* Summary block */
.df-summary{
  margin-top:1.75rem;
  padding:1.5rem;
  background:var(--color-surface-offset);
  border-radius:var(--radius-md);
}
.df-row{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:1rem;
}
.df-key{
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--color-text-muted);
  font-weight:500;
}
.df-total{
  font-family:var(--font-display);
  font-size:clamp(1.75rem,3vw,2.5rem);
  font-weight:400;line-height:1;
  color:var(--color-primary);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
.df-tier-row{padding-block:1rem;border-top:1px solid var(--color-divider)}
.df-tier-name{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.75rem}
.df-tier-value{
  font-family:var(--font-display);
  font-size:1.35rem;font-weight:500;
  color:var(--color-accent);
}
.df-tier-progress{
  height:6px;
  background:var(--color-border);
  border-radius:var(--radius-full);
  overflow:hidden;
}
.df-tier-bar{
  height:100%;
  background:linear-gradient(90deg, var(--color-accent), var(--color-accent-bright));
  width:0;
  transition:width var(--transition-cinematic);
  border-radius:var(--radius-full);
}
.df-tier-next{
  margin-top:.65rem;
  font-size:.8rem;color:var(--color-text-muted);
  font-style:italic;
}
.df-impact{
  margin-top:1rem;
  padding:.85rem 1rem;
  background:color-mix(in oklab, var(--color-accent) 12%, transparent);
  border-left:2px solid var(--color-accent);
  font-size:.9rem;
  color:var(--color-text);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  transition:background var(--transition-interactive);
}

.df-submit{
  width:100%;margin-top:1.5rem;
  padding:1.2rem;
  font-size:1rem;
}
.df-notice{
  margin-top:1rem;
  padding:.75rem 1rem;
  background:color-mix(in oklab, var(--color-success) 12%, transparent);
  border-radius:var(--radius-sm);
  font-size:.85rem;
  color:var(--color-text);
  opacity:0;height:0;overflow:hidden;
  transition:opacity var(--transition-interactive), height var(--transition-interactive), margin var(--transition-interactive);
}
.df-notice.visible{opacity:1;height:auto;padding:.75rem 1rem}
.df-fineprint{
  margin-top:1rem;
  font-size:.75rem;color:var(--color-text-faint);
  text-align:center;
  line-height:1.55;
}

/* ————— TIER LADDER ————— */
.tier-ladder{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
}
@media (max-width:900px){.tier-ladder{grid-template-columns:repeat(2,1fr)}}
@media (max-width:500px){.tier-ladder{grid-template-columns:1fr}}
.tier-card{
  padding:2rem 1.5rem;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  display:flex;flex-direction:column;
  transition:all var(--transition-interactive);
  position:relative;
}
.tier-card:hover{
  transform:translateY(-4px);
  border-color:var(--color-accent);
  box-shadow:var(--shadow-md);
}
.tier-card .tier-rank{
  font-family:var(--font-display);
  font-size:var(--text-lg);
  font-weight:400;
  color:var(--color-text);
  line-height:1.1;
}
.tier-card .tier-min{
  font-family:var(--font-display);
  font-size:1.5rem;font-weight:400;
  color:var(--color-accent);
  margin-block:.75rem 1.25rem;
  font-variant-numeric:tabular-nums;
}
.tier-card ul{
  list-style:none;padding:0;margin:0;
  padding-top:1rem;
  border-top:1px solid var(--color-divider);
}
.tier-card li{
  font-size:.85rem;color:var(--color-text-muted);
  padding-block:.5rem;
  padding-left:1rem;
  position:relative;
  line-height:1.5;
}
.tier-card li::before{
  content:"";position:absolute;left:0;top:.75rem;
  width:6px;height:1px;background:var(--color-accent);
}
.tier-card.featured{
  background:color-mix(in oklab, var(--color-accent) 8%, var(--color-surface));
  border-color:var(--color-accent);
}
.tier-card.captain{
  background:linear-gradient(160deg, #142B40 0%, #0B1E2E 100%);
  border-color:var(--color-accent);
  box-shadow:var(--shadow-brass);
}
.tier-card.captain .tier-rank{color:var(--color-accent-bright)}
.tier-card.captain .tier-min{color:var(--color-accent-bright);font-weight:500}
.tier-card.captain ul{border-top-color:rgba(212,169,74,.25)}
.tier-card.captain li::before{background:var(--color-accent-bright)}

/* ————— TIER GROUP TITLES (approved two-program ladder) ————— */
.tier-group-title{
  grid-column:1 / -1;
  font-family:var(--font-display);
  font-size:var(--text-xl);
  font-weight:500;
  color:var(--color-accent);
  margin:1.5rem 0 .25rem;
}
.tier-group-title:first-child{margin-top:0}

/* ————— DONOR-TYPE SELECTOR ————— */
.df-donortype{margin-top:1.75rem}
.df-dtype-btns{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.75rem;
  margin-top:.75rem;
}
.dtype-btn{font-size:1rem;padding:.85rem 1rem}